/**
 * Foundation Page Comprehensive Fixes
 * Addresses all visibility, spacing, and color issues
 */

/* ==========================================================================
   1. Breadcrumb Spacing - Reduce top margin
   ========================================================================== */

.aiab-breadcrumb {
  margin-top: 0.5rem; /* Reduced from default */
  margin-bottom: 1.5rem;
  padding: 0.5rem 0;
}

/* ==========================================================================
   2. Core Section Text Visibility - Fix unreadable body text
   ========================================================================== */

/* Light mode - ensure all text is dark and readable */
:root:not([data-theme="dark"]),
[data-theme="light"] {
  /* Core section text */
  .core-section h2,
  .core-section h3,
  .core-section h4,
  .core-section p,
  .core-section li,
  .core-section span,
  #core h2,
  #core h3,
  #core h4,
  #core p,
  #core li,
  #core span {
    color: #212529;
  }

  /* All body text */
  main p,
  main li,
  main span:not(.demo-col),
  article p,
  article li,
  section p,
  section li {
    color: #212529;
  }

  /* Headings */
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    color: #212529;
  }
}

/* Dark mode - ensure proper text colors */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    .core-section h2,
    .core-section h3,
    .core-section h4,
    .core-section p,
    .core-section li,
    #core h2,
    #core h3,
    #core h4,
    #core p,
    #core li {
      color: #ffffff;
    }

    main p,
    main li,
    main span:not(.demo-col),
    article p,
    article li,
    section p,
    section li {
      color: #ffffff;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      color: #ffffff;
    }
  }
}

[data-theme="dark"] {
  .core-section h2,
  .core-section h3,
  .core-section h4,
  .core-section p,
  .core-section li,
  #core h2,
  #core h3,
  #core h4,
  #core p,
  #core li {
    color: #ffffff;
  }

  main p,
  main li,
  main span:not(.demo-col),
  article p,
  article li,
  section p,
  section li {
    color: #ffffff;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    color: #ffffff;
  }
}

/* ==========================================================================
   3. Code Block Backgrounds - Dark gray instead of white
   ========================================================================== */

.code-example,
pre,
code {
  background: #2d2d2d;
  color: #f8f8f2;
  border: 1px solid #666666;
  border-radius: 0.375rem;
}

/* Inline code */
code:not(pre code) {
  padding: 0.125rem 0.375rem;
  background: #3a3a3a;
  color: #f8f8f2;
  border: 1px solid #555555;
}

/* Code blocks in light mode should also be dark */
:root:not([data-theme="dark"]) .code-example,
:root:not([data-theme="dark"]) pre,
[data-theme="light"] .code-example,
[data-theme="light"] pre {
  background: #2d2d2d;
  color: #f8f8f2;
}

:root:not([data-theme="dark"]) code:not(pre code),
[data-theme="light"] code:not(pre code) {
  background: #3a3a3a;
  color: #f8f8f2;
}

/* ==========================================================================
   4. Remove Orange Backgrounds - Make transparent
   ========================================================================== */

/* Remove any orange gradients or backgrounds */
.demo-grid,
.demo-col,
.golden-ratio-demo .demo-col,
.push-pull-demo .demo-col {
  background: transparent;
  border: 2px solid #666666;
  color: inherit;
}

/* Ensure demo columns have proper text color */
:root:not([data-theme="dark"]) .demo-col,
[data-theme="light"] .demo-col {
  color: #212529;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .demo-col {
    color: #ffffff;
  }
}

[data-theme="dark"] .demo-col {
  color: #ffffff;
}

/* Media query demo - remove orange */
.media-query-demo {
  background: transparent;
  border: 2px solid #666666;
}

@media (--bp-md-down) {
  .media-query-demo {
    background: transparent;
    border-color: #999999;
  }
}

/* ==========================================================================
   5. Bottom of Page Text - Fix built-in breakpoints visibility
   ========================================================================== */

/* Breakpoints section */
#breakpoints h2,
#breakpoints h3,
#breakpoints p,
#breakpoints li,
#breakpoints code,
.breakpoints-section h2,
.breakpoints-section h3,
.breakpoints-section p,
.breakpoints-section li,
.breakpoints-section code {
  color: inherit;
}

/* Table text in breakpoints */
#breakpoints table,
#breakpoints th,
#breakpoints td,
.breakpoints-section table,
.breakpoints-section th,
.breakpoints-section td {
  color: inherit;
}

/* Light mode specific */
:root:not([data-theme="dark"]) #breakpoints,
:root:not([data-theme="dark"]) .breakpoints-section,
[data-theme="light"] #breakpoints,
[data-theme="light"] .breakpoints-section {
  color: #212529;
}

:root:not([data-theme="dark"]) #breakpoints *,
:root:not([data-theme="dark"]) .breakpoints-section *,
[data-theme="light"] #breakpoints *,
[data-theme="light"] .breakpoints-section * {
  color: #212529;
}

/* Dark mode specific */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) #breakpoints,
  :root:not([data-theme="light"]) .breakpoints-section {
    color: #ffffff;
  }

  :root:not([data-theme="light"]) #breakpoints *,
  :root:not([data-theme="light"]) .breakpoints-section * {
    color: #ffffff;
  }
}

[data-theme="dark"] #breakpoints,
[data-theme="dark"] .breakpoints-section {
  color: #ffffff;
}

[data-theme="dark"] #breakpoints *,
[data-theme="dark"] .breakpoints-section * {
  color: #ffffff;
}

/* ==========================================================================
   Additional Global Fixes
   ========================================================================== */

/* Ensure all sections have proper text color inheritance */
.doc-section {
  color: inherit;
}

/* Fix any remaining visibility issues */
main {
  color: inherit;
}

/* Tables should have visible text */
table {
  color: inherit;
}

th,
td {
  color: inherit;
}

/* Lists should be visible */
ul,
ol,
dl {
  color: inherit;
}

li,
dt,
dd {
  color: inherit;
}

/* Ensure demo columns inside code examples maintain their styling */
.code-example .demo-col {
  background: #666666;
  color: white;
  border: none;
}