/* ============================================================
   Accessibility Improvements - Scoped by data-accessibility
   ============================================================ */

/* ===========================================================
   1. Links must be distinguishable without color (WCAG 2.1)
   =========================================================== */

/* WCAG AAA: All links have underlines by default */
[data-accessibility="wcag-aaa"] a {
  text-decoration: underline;
  text-decoration-skip-ink: auto;
}

/* WCAG AA: Content links have underlines, nav links on hover */
[data-accessibility="wcag-aa"] p a,
[data-accessibility="wcag-aa"] li a,
[data-accessibility="wcag-aa"] td a,
[data-accessibility="wcag-aa"] article a {
  text-decoration: underline;
  text-decoration-skip-ink: auto;
}

/* Minimal: Only hover underlines for content links */
[data-accessibility="minimal"] p a:hover,
[data-accessibility="minimal"] li a:hover,
[data-accessibility="minimal"] td a:hover {
  text-decoration: underline;
}

/* All levels: Keep buttons without underlines */
[data-accessibility] button,
[data-accessibility] .btn,
[data-accessibility] .button,
[data-accessibility] [role="button"],
[data-accessibility] .cta-primary-large,
[data-accessibility] .cta-secondary {
  text-decoration: none !important;
}

/* All levels: Navigation links - underline on hover only */
[data-accessibility] nav a,
[data-accessibility] .site-title a,
[data-accessibility] header a,
[data-accessibility] .home-nav-links a,
[data-accessibility] .breadcrumbs a {
  text-decoration: none;
}

[data-accessibility] nav a:hover,
[data-accessibility] nav a:focus,
[data-accessibility] .site-title a:hover,
[data-accessibility] header a:focus,
[data-accessibility] .home-nav-links a:hover,
[data-accessibility] .home-nav-links a:focus {
  text-decoration: underline;
}

/* All levels: Home page specific - preserve clean design */
[data-accessibility] .home-page h1 a,
[data-accessibility] .home-page h2 a,
[data-accessibility] .home-page h3 a,
[data-accessibility] .social-proof-card a,
[data-accessibility] .post-card a,
[data-accessibility] .module-card a {
  text-decoration: none !important;
}

[data-accessibility] .home-page h1 a:hover,
[data-accessibility] .home-page h2 a:hover,
[data-accessibility] .home-page h3 a:hover {
  text-decoration: underline !important;
}

/* ===========================================================
   2. Improve color contrast for code blocks (WCAG 1.4.3)
   =========================================================== */

/* All levels: Code syntax highlighting - always improve contrast */
[data-accessibility] .highlight .c,    /* Comments */
[data-accessibility] .highlight .cm,
[data-accessibility] .highlight .c1 {
  color: #6a737d !important;  /* Gray with WCAG AA contrast */
  background-color: transparent !important;
}

[data-accessibility] .highlight pre,
[data-accessibility] .highlight code {
  background-color: #f6f8fa !important;  /* Light background */
  color: #24292e !important;  /* Dark text - 4.5:1 contrast */
}

/* All levels: Yellow highlights - improve contrast */
[data-accessibility] span.c {
  background-color: #fff3cd !important;  /* Lighter yellow */
  color: #856404 !important;  /* Dark brown - 4.5:1 contrast */
  padding: 2px 4px;
  border-radius: 3px;
}

/* All levels: Built-in names (commands) - darker blue for contrast */
[data-accessibility] .highlight .nb,
[data-accessibility] .highlight .bp {
  color: #005cc5 !important;  /* WCAG AA compliant blue */
  font-weight: 500 !important;
}

/* ===========================================================
   3. Minimum touch target sizes (WCAG 2.5.5)
   ===========================================================
   AAA: 48x48px minimum
   AA:  44x44px minimum
   Minimal: No minimum (preserve design)
   =========================================================== */

/* WCAG AAA: 48px minimum touch targets for standalone interactive elements */
[data-accessibility="wcag-aaa"] button:not(.copy-button):not(.toc-toggle),
[data-accessibility="wcag-aaa"] input[type="submit"],
[data-accessibility="wcag-aaa"] input[type="button"],
[data-accessibility="wcag-aaa"] select {
  min-height: 48px;
  min-width: 48px;
  padding: 12px;
}

/* WCAG AA: 44px minimum touch targets */
[data-accessibility="wcag-aa"] button:not(.copy-button):not(.toc-toggle),
[data-accessibility="wcag-aa"] input[type="submit"],
[data-accessibility="wcag-aa"] input[type="button"],
[data-accessibility="wcag-aa"] select {
  min-height: 44px;
  min-width: 44px;
  padding: 10px;
}

/* All levels: Task list checkboxes remain normal size */
[data-accessibility] .task-list-item-checkbox {
  min-height: auto !important;
  min-width: auto !important;
  padding: 0 !important;
  display: inline !important;
  width: 16px !important;
  height: 16px !important;
  margin-right: 8px !important;
  vertical-align: middle !important;
}

/* All levels: Inline text links - use negative margin trick */
/* This preserves visual spacing while expanding touch target */
[data-accessibility] p a,
[data-accessibility] li:not(.toc-item) a:not(.cta-primary-large),
[data-accessibility] td a {
  padding: 6px 4px;
  margin: -6px -4px;
  min-height: auto;
  min-width: auto;
  display: inline;
  line-height: inherit;
}

/* All levels: Navigation links get full touch targets on mobile */
@media (max-width: 768px) {
  [data-accessibility] nav a,
  [data-accessibility] .breadcrumbs a,
  [data-accessibility] .home-nav-links a {
    min-height: 44px;
    padding: 10px 16px;
    display: inline-flex;
    align-items: center;
  }

  /* Enhanced touch targets for inline links on mobile */
  [data-accessibility="wcag-aaa"] p a,
  [data-accessibility="wcag-aaa"] li a,
  [data-accessibility="wcag-aaa"] td a {
    padding: 10px 6px;
    margin: -10px -6px;
    min-height: 44px;
  }

  [data-accessibility="wcag-aa"] p a,
  [data-accessibility="wcag-aa"] li a,
  [data-accessibility="wcag-aa"] td a {
    padding: 8px 5px;
    margin: -8px -5px;
    min-height: 40px;
  }
}

/* All levels: Special button types - preserve their styling */
[data-accessibility] .copy-button,
[data-accessibility] .toc-toggle,
[data-accessibility] button[data-clipboard-target] {
  /* These are handled by head-custom.html */
  min-height: 48px;
  min-width: 48px;
  padding: 12px;
}

/* All levels: CTA buttons - ensure proper sizing */
[data-accessibility] .calculate-btn,
[data-accessibility] .cta-primary,
[data-accessibility] .cta-secondary,
[data-accessibility] .cta-button,
[data-accessibility] .cta-primary-large {
  min-height: 48px;
  padding: 14px 28px;
  display: inline-block;
  line-height: 1.2;
  box-sizing: border-box;
}

/* All levels: Product box CTA - fixed layout */
[data-accessibility] .product-box-cta {
  display: inline-block !important;
  line-height: 1.4 !important;
  text-align: center !important;
  padding: 14px 24px !important;
  min-height: 48px !important;
  box-sizing: border-box !important;
}

/* All levels: Inline simple CTA */
[data-accessibility] .inline-simple-cta {
  display: inline-block !important;
  line-height: 1.4 !important;
  text-align: center !important;
  padding: 10px 16px !important;
  min-height: 44px !important;
  box-sizing: border-box !important;
}

/* ===========================================================
   4. Focus indicators for keyboard navigation (WCAG 2.4.7)
   =========================================================== */

/* All levels: Clear focus indicators - critical for keyboard users */
[data-accessibility] a:focus,
[data-accessibility] button:focus,
[data-accessibility] input:focus,
[data-accessibility] select:focus,
[data-accessibility] textarea:focus {
  outline: 2px solid #0969da;
  outline-offset: 2px;
}

/* All levels: Checkboxes get visual focus */
[data-accessibility] input[type="checkbox"]:focus {
  outline: 2px solid #0969da;
  outline-offset: 2px;
}

/* All levels: Task list checkboxes - decorative only */
[data-accessibility] .task-list-item-checkbox[disabled] {
  aria-hidden: true;
}

/* ===========================================================
   5. Color contrast - Headings (WCAG 1.4.3)
   =========================================================== */

/* All levels: Ensure headings have sufficient contrast */
[data-accessibility] h1,
[data-accessibility] h2,
[data-accessibility] h3,
[data-accessibility] h4,
[data-accessibility] h5,
[data-accessibility] h6 {
  color: #24292e;  /* 4.5:1 contrast ratio */
}

/* ===========================================================
   6. Mobile font size minimum (WCAG 1.4.4)
   =========================================================== */

/* All levels: Prevent zoom on input focus (16px minimum) */
@media (max-width: 768px) {
  [data-accessibility] body {
    font-size: 16px;
  }

  [data-accessibility] p,
  [data-accessibility] li,
  [data-accessibility] td,
  [data-accessibility] th {
    font-size: 16px;
  }

  [data-accessibility] small {
    font-size: 14px;  /* Minimum for small text */
  }
}

/* 8. Full-width layout for default.html (guides, tools, content pages) */
.full-width-layout .wrapper {
  width: 100% !important;
  max-width: 960px !important;
  margin: 0 auto !important;
}

.full-width-layout header {
  display: none !important;
  border: none !important;
}

.full-width-layout section {
  width: 100% !important;
  float: none !important;
  padding: 20px !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
}

/* Footer base styles - but exclude professional-footer from forced styles */
.full-width-layout footer:not(.professional-footer) {
  width: 100% !important;
  float: none !important;
  text-align: center !important;
  padding: 20px !important;
  border-top: none !important;
  margin-top: 40px !important;
}

/* Professional footer should maintain its own styles */
/* CRITICAL: Override Minimal theme's footer styles (270px width + fixed position) */
.full-width-layout footer.professional-footer {
  /* Override Minimal's fixed positioning (footer is fixed at bottom:50px on desktop) */
  position: static !important;
  bottom: auto !important;
  left: auto !important;

  /* Override Minimal's 270px width constraint - THIS IS THE KEY FIX */
  width: 100% !important;
  max-width: 100% !important;
  min-width: 100% !important;

  /* Override Minimal's float: left */
  float: none !important;

  /* Layout and spacing */
  text-align: left !important;
  padding: 64px 0 0 0 !important;  /* Restore top padding for visual spacing */
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  border-top: 1px solid #e5e5e5 !important;  /* Restore top border */
  border-bottom: none !important;
  border-left: none !important;
  border-right: none !important;

  /* Visibility and size */
  min-height: auto !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  visibility: visible !important;
  opacity: 1 !important;

  /* Ensure block-level display */
  display: block !important;
}

/* Restore proper display modes for layout containers - DON'T force display on children */
.full-width-layout footer.professional-footer .footer-container {
  display: grid !important;
  grid-template-columns: 2fr 1fr 1fr 1.5fr !important;  /* Force 4-column layout */
  width: 100% !important;  /* Use full footer width */
  max-width: 1200px !important;  /* Match home-max-width */
  min-width: 800px !important;  /* Minimum width for 4-column layout */
  box-sizing: border-box !important;
  margin: 0 auto !important;  /* Center the container */
}

.full-width-layout footer.professional-footer .footer-bottom-container {
  max-width: 1200px !important;  /* Match footer-container width */
  margin: 0 auto !important;
}

.full-width-layout footer.professional-footer .footer-social-links,
.full-width-layout footer.professional-footer .footer-bottom-container {
  display: flex !important;
}

/* 9. Optimized post layout - layout only (TOC styles moved to reading-experience.css) */
.post-layout .wrapper {
  width: 100% !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 20px !important;
}

.post-layout section {
  width: 100% !important;
  max-width: 900px !important;
  margin-left: auto !important;
  margin-right: 0 !important;
  padding: 20px 20px 20px 40px !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
}

.post-layout footer {
  width: 100% !important;
  max-width: 900px !important;
  margin-left: auto !important;
  margin-right: 0 !important;
  padding: 20px 20px 20px 40px !important;
  border-top: none !important;
  margin-top: 40px !important;
  position: relative !important;
  z-index: 1 !important;
}

/* Limit image size in articles and content pages - Desktop */
.post-layout section img,
.full-width-layout section img {
  max-width: 100% !important;
  max-height: 600px !important;
  width: auto !important;
  height: auto !important;
  display: block !important;
  margin: 20px auto !important;
  object-fit: contain !important;
}

/* For very large images (diagrams, flowcharts), limit both width and height - Desktop */
.post-layout section img[src*="diagram"],
.post-layout section img[src*="architecture"],
.post-layout section img[src*="flow"],
.full-width-layout section img[src*="diagram"],
.full-width-layout section img[src*="architecture"],
.full-width-layout section img[src*="flow"] {
  max-width: 700px !important;
  max-height: 500px !important;
}

@media (max-width: 768px) {
  .post-layout .post-sidebar {
    position: static !important;
    width: 100% !important;
    float: none !important;
  }

  .post-layout section {
    width: 100% !important;
    float: none !important;
    margin-left: 0 !important;
  }

  .post-layout footer {
    width: 100% !important;
    float: none !important;
    margin-left: 0 !important;
  }

  /* Images on mobile - scale to fit container, maintain aspect ratio */
  .post-layout section img,
  .full-width-layout section img {
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
    max-height: none !important;
    margin: 15px auto !important;
    display: block !important;
  }

  /* Override diagram size limits on mobile - also scale to fit */
  .post-layout section img[src*="diagram"],
  .post-layout section img[src*="architecture"],
  .post-layout section img[src*="flow"],
  .full-width-layout section img[src*="diagram"],
  .full-width-layout section img[src*="architecture"],
  .full-width-layout section img[src*="flow"] {
    max-width: 100% !important;
    width: auto !important;
    max-height: none !important;
  }

  /* ============================================================
     Jekyll Theme Minimal Mobile Overrides (from style.scss)
     ============================================================ */

  /* CRITICAL: Prevent horizontal scrolling completely */
  html {
    width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  /* Force full-width layout on all pages - override theme defaults */
  body {
    padding: 0 !important;
    margin: 0 !important;
    font-size: 16px !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
    position: relative !important;
  }

  .wrapper,
  .home-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  /* Full-width sections - override 270px sidebar + 500px content */
  header, section, footer,
  .home-header, .home-content, .home-footer {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    position: static !important;
    padding: 15px !important;
    border: none !important;
    margin: 0 !important;
    left: 0 !important;
    right: 0 !important;
    box-sizing: border-box !important;
  }

  /* Hide TOC sidebar on mobile */
  .post-sidebar,
  .post-layout .post-sidebar,
  .floating-toc {
    display: none !important;
  }

  /* Full-width layout header should be hidden on mobile */
  .full-width-layout header {
    display: none !important;
  }

  /* Prevent text truncation */
  h1, h2, h3, h4, h5, h6, p, li, td, th {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
  }

  /* Fluid typography - scales smoothly across all mobile devices */
  /* Uses clamp() for responsive font sizes without media query breakpoints */
  body {
    font-size: clamp(14px, 4vw, 16px) !important;
    line-height: 1.6 !important;
  }

  h1 {
    font-size: clamp(22px, 6vw, 28px) !important;
    line-height: 1.2 !important;
    margin: clamp(12px, 3vw, 16px) 0 !important;
  }

  h2 {
    font-size: clamp(18px, 5vw, 24px) !important;
    line-height: 1.3 !important;
    margin: clamp(10px, 2.5vw, 14px) 0 !important;
  }

  h3 {
    font-size: clamp(16px, 4.5vw, 20px) !important;
    line-height: 1.3 !important;
    margin: clamp(8px, 2vw, 12px) 0 !important;
  }

  /* Better paragraph spacing */
  p {
    margin-bottom: 1.2em !important;
    line-height: 1.65 !important;
  }

  /* Home page specific fixes - HORIZONTAL navigation on mobile */
  .home-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  .home-header {
    padding: 15px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .home-nav-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 15px !important;
    width: 100% !important;
  }

  .home-site-title {
    font-size: 20px !important;
    margin: 0 !important;
    width: 100% !important;
  }

  /* CRITICAL: Force horizontal layout for Guides/Tools/Products */
  .home-nav-links {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap: 15px 20px !important;
    width: 100% !important;
  }

  .home-nav-links a {
    flex: 0 0 auto !important;
    padding: 8px 12px !important;
    margin: 0 !important;
    white-space: nowrap !important;
  }

  /* Containers must not add extra width */
  section,
  .home-content,
  .post-layout section,
  .full-width-layout section {
    padding: 15px !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  /* CRITICAL: Images must scale down to fit container width (minus padding) */
  img {
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
    display: block !important;
    margin: 15px auto !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  /* Ensure ALL elements stay within container */
  * {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Code blocks must fit container, not viewport */
  pre, code {
    max-width: 100% !important;
    overflow-x: auto !important;
    word-wrap: normal !important;
    box-sizing: border-box !important;
  }

  /* Add visual indicator for code blocks */
  pre {
    border-left: 3px solid #0969da !important;
    padding-left: 12px !important;
    background: #f6f8fa !important;
    border-radius: 6px !important;
  }

  /* Ensure parent containers don't cause page-level horizontal scroll */
  .post-layout section,
  .full-width-layout section,
  .home-content {
    overflow-x: hidden !important;
  }

  /* Responsive tables - Card layout for better mobile UX */
  table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin: 15px 0 !important;
    font-size: 14px !important;
  }

  /* Small tables with 2-3 columns: keep traditional layout but scrollable */
  table:not(.card-table) {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    border: 1px solid #e1e4e8 !important;
    border-radius: 6px !important;
  }

  /* Large tables: convert to card layout for readability */
  table.card-table {
    display: block !important;
    border: 0 !important;
  }

  table.card-table thead {
    display: none !important;
  }

  table.card-table tbody {
    display: block !important;
  }

  table.card-table tr {
    display: block !important;
    margin-bottom: 15px !important;
    border: 1px solid #e1e4e8 !important;
    border-radius: 6px !important;
    padding: 12px !important;
    background: #f6f8fa !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
  }

  table.card-table td {
    display: flex !important;
    justify-content: space-between !important;
    padding: 8px 0 !important;
    border: 0 !important;
    border-bottom: 1px solid #e1e4e8 !important;
    text-align: right !important;
  }

  table.card-table td:last-child {
    border-bottom: 0 !important;
  }

  /* Add data labels using data-label attribute */
  table.card-table td::before {
    content: attr(data-label) !important;
    font-weight: 600 !important;
    color: #24292e !important;
    text-align: left !important;
    margin-right: 10px !important;
  }

  /* Scroll indicator for horizontal scrolling tables */
  table:not(.card-table)::after {
    content: '' !important;
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 30px !important;
    background: linear-gradient(to left, rgba(255,255,255,0.9), transparent) !important;
    pointer-events: none !important;
  }

  /* CTA buttons should be full-width on mobile for better UX */
  .product-box-cta,
  .inline-simple-cta {
    width: calc(100% - 30px) !important;
    max-width: calc(100% - 30px) !important;
    display: block !important;
    text-align: center !important;
    padding: 14px 20px !important;
    margin: 10px 15px !important;
    box-sizing: border-box !important;
  }

  /* Breadcrumbs should wrap */
  nav.breadcrumbs {
    width: calc(100% - 30px) !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    font-size: 14px !important;
    margin: 0 15px !important;
    box-sizing: border-box !important;
  }

  /* Prevent paragraphs and divs from extending beyond viewport */
  p, div, ul, ol, li {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* Extra small devices (phones, less than 480px) */
@media (max-width: 480px) {
  body {
    font-size: 16px !important;
  }

  h1 {
    font-size: 22px !important;
  }

  h2 {
    font-size: 18px !important;
  }

  h3 {
    font-size: 16px !important;
  }

  .home-wrapper,
  .home-content,
  section {
    padding: 10px !important;
  }

  .home-nav-links {
    flex-direction: column !important;
    gap: 10px !important;
    align-items: flex-start !important;
  }
}