/*
  LockwoodSTEM IED accessibility hardening
  Loaded last on every IED page so component text cannot be hidden by older
  high-specificity theme rules or cached WebKit text-fill colors.
*/

:root {
  --ied-a11y-navy: #061b31;
  --ied-a11y-navy-2: #0b1f3a;
  --ied-a11y-blue: #174f8a;
  --ied-a11y-gold: #f3c95c;
  --ied-a11y-gold-strong: #d9ab3d;
  --ied-a11y-white: #ffffff;
  --ied-a11y-text: #26384d;
  --ied-a11y-muted: #475569;
  --ied-a11y-line: #b8c7d8;
  --ied-a11y-light: #f7fafc;
  --ied-a11y-light-blue: #eaf4fb;
}

/* Never allow old text-fill declarations to make control labels disappear. */
html body :is(a.btn, button, summary, label, legend, input, select, textarea),
html body :is(a.btn, button, summary, label, legend, input, select, textarea) * {
  opacity: 1 !important;
  text-shadow: none !important;
}

html body main#main :is(a.btn, button.btn),
html body main#main :is(a.btn, button.btn) * {
  -webkit-text-fill-color: currentColor !important;
  color: inherit !important;
}

/* Strong, consistent keyboard focus on every interactive element. */
html body :is(a[href], button, summary, input, select, textarea):focus-visible {
  outline: 3px solid var(--ied-a11y-gold) !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 2px var(--ied-a11y-navy) !important;
}

/* Primary buttons: gold with dark text. */
html body main#main :is(a.btn, button.btn):not(.secondary):not(.ghost):not(.dark):not(.disabled) {
  background: var(--ied-a11y-gold-strong) !important;
  border-color: var(--ied-a11y-gold-strong) !important;
  color: var(--ied-a11y-navy) !important;
  -webkit-text-fill-color: var(--ied-a11y-navy) !important;
}

/* Dark/download buttons: white text on navy. */
html body main#main :is(.btn.dark, .resource-actions .btn, .lesson-resource-card .btn),
html body main#main :is(.btn.dark, .resource-actions .btn, .lesson-resource-card .btn) * {
  background: var(--ied-a11y-navy-2) !important;
  border-color: var(--ied-a11y-navy-2) !important;
  color: var(--ied-a11y-white) !important;
  -webkit-text-fill-color: var(--ied-a11y-white) !important;
}

/* Secondary buttons on light cards and lesson sections. */
html body main#main :is(a.btn.secondary, button.btn.secondary) {
  background: var(--ied-a11y-light-blue) !important;
  border-color: #9db5cc !important;
  color: var(--ied-a11y-navy-2) !important;
  -webkit-text-fill-color: var(--ied-a11y-navy-2) !important;
}

/* Hero and dark-panel secondary/ghost buttons remain light-on-dark. */
html body :is(.lesson-mission-hero, .page-hero, .hero, .mission-panel, .card.dark)
  :is(a.btn.secondary, button.btn.secondary, a.btn.ghost, button.btn.ghost) {
  background: rgba(255,255,255,.10) !important;
  border-color: rgba(255,255,255,.72) !important;
  color: var(--ied-a11y-white) !important;
  -webkit-text-fill-color: var(--ied-a11y-white) !important;
}

html body main#main :is(a.btn.ghost, button.btn.ghost) {
  background: var(--ied-a11y-white) !important;
  border-color: #9db5cc !important;
  color: var(--ied-a11y-navy-2) !important;
  -webkit-text-fill-color: var(--ied-a11y-navy-2) !important;
}

/* Bottom navigation is on a dark site background. */
html body .lesson-bottom-nav :is(.btn, .btn.secondary, .btn.ghost) {
  background: var(--ied-a11y-white) !important;
  border-color: var(--ied-a11y-white) !important;
  color: var(--ied-a11y-navy-2) !important;
  -webkit-text-fill-color: var(--ied-a11y-navy-2) !important;
}

/* Disabled controls remain readable, but visibly inactive. */
html body main#main :is(.btn.disabled, button:disabled, input:disabled, select:disabled, textarea:disabled) {
  background: #e2e8f0 !important;
  border-color: #94a3b8 !important;
  color: #334155 !important;
  -webkit-text-fill-color: #334155 !important;
  opacity: 1 !important;
  cursor: not-allowed !important;
}

/* Hover states preserve contrast instead of swapping to invisible labels. */
html body main#main :is(a.btn, button.btn):not(.disabled):hover,
html body main#main :is(a.btn, button.btn):not(.disabled):focus {
  background: var(--ied-a11y-gold) !important;
  border-color: var(--ied-a11y-gold-strong) !important;
  color: var(--ied-a11y-navy) !important;
  -webkit-text-fill-color: var(--ied-a11y-navy) !important;
}

/* Pills, tags, and compact labels. */
html body main#main .tag,
html body main#main .tag *,
html body main#main .process-number,
html body main#main .process-number * {
  background: var(--ied-a11y-gold-strong) !important;
  color: var(--ied-a11y-navy) !important;
  -webkit-text-fill-color: var(--ied-a11y-navy) !important;
}

html body main#main .tag.blue { background: #dbeafe !important; color: #1e3a8a !important; -webkit-text-fill-color: #1e3a8a !important; }
html body main#main .tag.green { background: #dcfce7 !important; color: #14532d !important; -webkit-text-fill-color: #14532d !important; }
html body main#main .tag.gray { background: #e5e7eb !important; color: #374151 !important; -webkit-text-fill-color: #374151 !important; }
html body main#main .tag.orange { background: #ffedd5 !important; color: #9a3412 !important; -webkit-text-fill-color: #9a3412 !important; }

/* Lesson section labels and timeline chips. */
html body main#main :is(.lesson-section, .lesson-web-section) .eyebrow {
  color: #7a5200 !important;
  -webkit-text-fill-color: #7a5200 !important;
}

html body :is(.lesson-mission-hero, .page-hero, .hero) :is(.eyebrow, .mission-eyebrow) {
  color: var(--ied-a11y-gold) !important;
  -webkit-text-fill-color: var(--ied-a11y-gold) !important;
}

html body main#main .timeline span,
html body main#main .pacing-strip span {
  background: #d9ecff !important;
  color: var(--ied-a11y-navy) !important;
  -webkit-text-fill-color: var(--ied-a11y-navy) !important;
}

html body .verb-strip span,
html body .presentation-chip {
  background: var(--ied-a11y-gold) !important;
  color: var(--ied-a11y-navy) !important;
  -webkit-text-fill-color: var(--ied-a11y-navy) !important;
}

html body main#main :is(.choice, .choice-card) > strong,
html body main#main .lesson-choice-list li > span {
  background: var(--ied-a11y-gold) !important;
  color: var(--ied-a11y-navy) !important;
  -webkit-text-fill-color: var(--ied-a11y-navy) !important;
}

/* All reveal/accordion controls use one predictable high-contrast treatment. */
html body main#main details,
html body main#main article.reveal-card > details,
html body main#main details.answer-reveal,
html body main#main details.lesson-answer-reveal {
  overflow: hidden !important;
  border: 1px solid var(--ied-a11y-line) !important;
  border-radius: 14px !important;
  background: var(--ied-a11y-white) !important;
  color: var(--ied-a11y-navy-2) !important;
  -webkit-text-fill-color: var(--ied-a11y-navy-2) !important;
  padding: 0 !important;
}

html body main#main details > summary,
html body main#main article.reveal-card > details > summary,
html body main#main details.answer-reveal > summary,
html body main#main details.lesson-answer-reveal > summary {
  display: list-item !important;
  min-height: 44px !important;
  padding: .8rem 1rem !important;
  background: var(--ied-a11y-gold) !important;
  color: var(--ied-a11y-navy) !important;
  -webkit-text-fill-color: var(--ied-a11y-navy) !important;
  font-weight: 900 !important;
  cursor: pointer !important;
}

html body main#main details > summary *,
html body main#main article.reveal-card > details > summary *,
html body main#main details.answer-reveal > summary *,
html body main#main details.lesson-answer-reveal > summary * {
  color: var(--ied-a11y-navy) !important;
  -webkit-text-fill-color: var(--ied-a11y-navy) !important;
}

html body main#main details[open] > summary {
  border-bottom: 1px solid var(--ied-a11y-line) !important;
}

html body main#main details > :not(summary),
html body main#main details > :not(summary) * {
  color: var(--ied-a11y-text) !important;
  -webkit-text-fill-color: var(--ied-a11y-text) !important;
  text-shadow: none !important;
  opacity: 1 !important;
}

html body main#main details > :is(p, ul, ol, div, table, blockquote):not(summary) {
  margin-left: 1rem !important;
  margin-right: 1rem !important;
}

html body main#main details > :last-child:not(summary) {
  margin-bottom: 1rem !important;
}

/* Forms and labels. */
html body main#main :is(label, legend, .stl-control-label) {
  color: var(--ied-a11y-navy-2) !important;
  -webkit-text-fill-color: var(--ied-a11y-navy-2) !important;
  opacity: 1 !important;
}

html body main#main :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  background: var(--ied-a11y-white) !important;
  border: 1px solid #7f94aa !important;
  color: var(--ied-a11y-navy-2) !important;
  -webkit-text-fill-color: var(--ied-a11y-navy-2) !important;
  opacity: 1 !important;
}

html body main#main :is(input, textarea)::placeholder {
  color: #526579 !important;
  -webkit-text-fill-color: #526579 !important;
  opacity: 1 !important;
}

html body main#main select option {
  background: var(--ied-a11y-white) !important;
  color: var(--ied-a11y-navy-2) !important;
}

/* Interactive STL controls and orthographic-view tools. */
html body main#main :is(.stl-view-button, .stl-mode-button, .stl-action-button, .orthographic-match-button) {
  background: var(--ied-a11y-light) !important;
  border-color: #9aaec2 !important;
  color: var(--ied-a11y-navy-2) !important;
  -webkit-text-fill-color: var(--ied-a11y-navy-2) !important;
  opacity: 1 !important;
}

html body main#main :is(.stl-view-button, .stl-mode-button)[aria-pressed="true"] {
  background: var(--ied-a11y-navy-2) !important;
  border-color: var(--ied-a11y-navy-2) !important;
  color: var(--ied-a11y-white) !important;
  -webkit-text-fill-color: var(--ied-a11y-white) !important;
}

html body main#main .stl-action-button.primary {
  background: var(--ied-a11y-gold) !important;
  border-color: var(--ied-a11y-gold-strong) !important;
  color: var(--ied-a11y-navy) !important;
  -webkit-text-fill-color: var(--ied-a11y-navy) !important;
}

html body main#main :is(.stl-view-button, .stl-mode-button, .stl-action-button, .orthographic-match-button):hover,
html body main#main :is(.stl-view-button, .stl-mode-button, .stl-action-button, .orthographic-match-button):focus-visible {
  background: var(--ied-a11y-gold) !important;
  border-color: var(--ied-a11y-gold-strong) !important;
  color: var(--ied-a11y-navy) !important;
  -webkit-text-fill-color: var(--ied-a11y-navy) !important;
}

html body main#main .stl-line-legend,
html body main#main .stl-line-legend span,
html body main#main .stl-switch-row,
html body main#main .stl-viewer-note,
html body main#main .orthographic-view-card figcaption,
html body main#main .orthographic-view-card figcaption * {
  color: var(--ied-a11y-text) !important;
  -webkit-text-fill-color: var(--ied-a11y-text) !important;
  opacity: 1 !important;
}

html body main#main .model-explorer-banner,
html body main#main .model-explorer-banner > strong,
html body main#main .model-explorer-banner > span:not(.model-explorer-badge) {
  color: var(--ied-a11y-navy-2) !important;
  -webkit-text-fill-color: var(--ied-a11y-navy-2) !important;
}

html body main#main .model-explorer-badge,
html body main#main .model-explorer-badge * {
  background: var(--ied-a11y-navy) !important;
  color: var(--ied-a11y-white) !important;
  -webkit-text-fill-color: var(--ied-a11y-white) !important;
}

/* Challenge-library badges and filters. */
html body main#main .challenge-badge {
  background: #fff2c9 !important;
  color: #674800 !important;
  -webkit-text-fill-color: #674800 !important;
}
html body main#main .challenge-badge.tool {
  background: #dbeafe !important;
  color: #174f8a !important;
  -webkit-text-fill-color: #174f8a !important;
}
html body main#main .challenge-id { color: #174f8a !important; -webkit-text-fill-color: #174f8a !important; }
html body main#main .challenge-category { color: #475569 !important; -webkit-text-fill-color: #475569 !important; }

/* Navigation and utility buttons. */
html body .nav-toggle,
html body .back-to-top {
  color: var(--ied-a11y-white) !important;
  -webkit-text-fill-color: var(--ied-a11y-white) !important;
}

/* Minimum target size for controls used by students. */
html body :is(a.btn, button, summary, select, input[type="button"], input[type="submit"], input[type="reset"]) {
  min-height: 44px;
}

@media (prefers-reduced-motion: reduce) {
  html body *, html body *::before, html body *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

@media print {
  html body main#main details { border-color: #000 !important; }
  html body main#main details > summary { background: #fff !important; color: #000 !important; -webkit-text-fill-color: #000 !important; }
}

/* Final high-specificity corrections for labels inside dark mission panels and light course sections. */
html body main#main .verb-strip span,
html body main#main .presentation-chip {
  background: var(--ied-a11y-gold) !important;
  color: var(--ied-a11y-navy) !important;
  -webkit-text-fill-color: var(--ied-a11y-navy) !important;
}

html body main#main .light-section .eyebrow {
  color: #7a5200 !important;
  -webkit-text-fill-color: #7a5200 !important;
}

/* IED unit hubs: convert Units 2-5 lesson tables into readable mobile cards. */
@media (max-width: 760px) {
  body.immersive-unit-page .lesson-table-wrap {
    overflow: visible !important;
    width: 100% !important;
  }

  body.immersive-unit-page .unit-lesson-table,
  body.immersive-unit-page .unit-lesson-table tbody,
  body.immersive-unit-page .unit-lesson-table tr,
  body.immersive-unit-page .unit-lesson-table td {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body.immersive-unit-page .unit-lesson-table {
    border: 0 !important;
    background: transparent !important;
  }

  body.immersive-unit-page .unit-lesson-table thead {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

  body.immersive-unit-page .unit-lesson-table tbody {
    display: grid !important;
    gap: 1rem !important;
  }

  body.immersive-unit-page .unit-lesson-table tr {
    overflow: hidden !important;
    border: 1px solid #b9c9d8 !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    box-shadow: 0 8px 20px rgba(6, 27, 49, 0.08) !important;
  }

  body.immersive-unit-page .unit-lesson-table td {
    padding: 0.8rem 1rem !important;
    border: 0 !important;
    border-bottom: 1px solid #d9e3ec !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    color: #102033 !important;
    -webkit-text-fill-color: #102033 !important;
  }

  body.immersive-unit-page .unit-lesson-table td:last-child {
    border-bottom: 0 !important;
  }

  body.immersive-unit-page .unit-lesson-table td::before {
    display: block !important;
    margin-bottom: 0.25rem !important;
    color: #5b4300 !important;
    -webkit-text-fill-color: #5b4300 !important;
    font-size: 0.75rem !important;
    font-weight: 900 !important;
    letter-spacing: 0.07em !important;
    text-transform: uppercase !important;
  }

  body.immersive-unit-page .unit-lesson-table td:nth-child(1)::before { content: "Lesson"; }
  body.immersive-unit-page .unit-lesson-table td:nth-child(2)::before { content: "Title"; }
  body.immersive-unit-page .unit-lesson-table td:nth-child(3)::before { content: "Focus Question"; }
  body.immersive-unit-page .unit-lesson-table td:nth-child(4)::before { content: "Open"; }

  body.immersive-unit-page .unit-lesson-table td:first-child {
    background: #f7e7a8 !important;
    color: #061b31 !important;
    -webkit-text-fill-color: #061b31 !important;
    font-size: 1rem !important;
    font-weight: 900 !important;
  }

  body.immersive-unit-page .unit-lesson-table td a:not(.btn) {
    color: #0b4d78 !important;
    -webkit-text-fill-color: #0b4d78 !important;
    font-weight: 800 !important;
  }

  body.immersive-unit-page .unit-lesson-table .lesson-table-action {
    width: 100% !important;
    min-width: 0 !important;
    white-space: normal !important;
  }

  body.immersive-unit-page .unit-lesson-table .lesson-table-action .btn {
    display: inline-flex !important;
    width: auto !important;
    min-height: 44px !important;
    margin: 0.2rem 0.35rem 0.2rem 0 !important;
    white-space: normal !important;
    text-align: center !important;
  }
}