/* WCAG 2.2 AA-oriented interaction, reflow, and reading refinements. */

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  position: relative;
  z-index: 1;
}

:where(.surface-card, .choice, .lesson-direction, .download-card):has(:focus-visible) {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
}

.field-input[aria-invalid="true"],
.field-select[aria-invalid="true"],
.field-textarea[aria-invalid="true"] {
  border-width: 2px;
  box-shadow: 0 0 0 2px var(--color-error-surface);
}

.form-feedback:not([hidden]) {
  scroll-margin-block: var(--space-5);
}

.lesson-reading,
.lesson-reading section,
.lesson-scenario > div,
.worked-example,
.lesson-practice,
.lesson-knowledge-check,
.lesson-references {
  min-width: 0;
}

.lesson-reading p,
.lesson-scenario p,
.worked-example p,
.lesson-practice p,
.lesson-knowledge-check p,
.lesson-references li {
  max-width: 70ch;
}

.lesson-reading p,
.lesson-scenario p,
.worked-example p,
.lesson-practice p,
.lesson-knowledge-check p {
  line-height: 1.75;
}

.lesson-practice summary,
.lesson-references summary,
.faq-list summary,
.source-panel summary {
  display: flex;
  min-height: 2.75rem;
  align-items: center;
  padding-block: var(--space-2);
}

.lesson-direction,
.download-card,
.resource-card a,
.catalog-card a {
  overflow-wrap: anywhere;
}

.certificate,
.certificate-name,
.certificate-meta strong,
.verification-card dd,
.data-table td,
.data-table th {
  overflow-wrap: anywhere;
}

.table-region,
.table-scroll,
.tab-list,
.module-nav {
  overscroll-behavior-inline: contain;
  scrollbar-gutter: stable;
}

.data-table th,
.data-table td {
  vertical-align: top;
}

/* Keep the shared footer treatment from being weakened by legacy page rules. */
.site-footer {
  display: grid;
  grid-template-columns: minmax(16rem, 1.2fr) minmax(0, 1.8fr);
  gap: var(--space-12);
  align-items: start;
  padding: var(--space-16) var(--page-gutter) var(--space-8);
  border-top: 0;
  background: var(--brand-evergreen-950);
  color: var(--color-text-inverse-muted);
}

.site-footer p,
.site-footer .footer-disclaimer {
  color: var(--color-text-inverse-muted);
}

.site-footer .footer-mark {
  color: var(--brand-learning-gold);
}

.learning-path-preview li > span {
  color: var(--brand-gold-dark);
}

@media (max-width: 70rem) {
  .site-footer {
    grid-template-columns: 1fr;
  }
}

@media (pointer: coarse), (max-width: 47.99rem) {
  :where(a, button, summary, input, select, textarea) {
    scroll-margin-block: var(--space-4);
  }

  .breadcrumbs a,
  .faq-list summary,
  .lesson-references a,
  .resource-card a,
  .account-panel > p a,
  .site-footer a {
    min-height: 2.75rem;
    display: inline-flex;
    align-items: center;
  }

  .button-sm {
    min-height: 2.75rem;
  }
}

@media (max-width: 47.99rem) {
  html {
    scroll-padding-top: 5rem;
  }

  :where(h1, h2, h3, [tabindex="-1"]) {
    scroll-margin-top: 5rem;
  }

  .navigation-drawer {
    width: min(100%, 28rem);
    padding-inline: max(var(--space-5), env(safe-area-inset-left)) max(var(--space-5), env(safe-area-inset-right));
    padding-bottom: max(var(--space-8), env(safe-area-inset-bottom));
  }

  .modal-backdrop {
    align-items: start;
    padding: max(var(--space-3), env(safe-area-inset-top)) var(--space-3) max(var(--space-3), env(safe-area-inset-bottom));
  }

  .modal-card {
    max-height: calc(100dvh - 1.5rem);
  }

  .lesson-page-header h1 {
    font-size: clamp(2rem, 11vw, 3rem);
    line-height: 1.08;
  }

  .lesson-page-header .bookmark-button,
  .lesson-actions .button,
  .lesson-direction {
    width: 100%;
  }

  .lesson-section,
  .lesson-progress,
  .lesson-actions {
    margin-block: var(--space-6);
  }

  .lesson-reading p {
    font-size: 1rem;
  }

  .certificate-wrap {
    overflow-x: visible;
  }

  .certificate {
    min-width: 0;
    aspect-ratio: auto;
    padding: var(--space-10) var(--space-4);
    border-width: 8px;
  }

  .certificate::before {
    top: -5rem;
    left: -5rem;
    width: 10rem;
    height: 10rem;
  }

  .certificate::after {
    right: -4rem;
    bottom: -4rem;
    width: 9rem;
    height: 9rem;
  }

  .certificate h2 {
    font-size: clamp(2rem, 12vw, 3.25rem);
  }

  .certificate-name {
    min-width: 0;
    max-width: 100%;
    font-size: clamp(1.75rem, 10vw, 2.75rem);
  }

  .certificate-description {
    max-width: 36rem;
  }

  .certificate-meta {
    display: grid;
    gap: var(--space-5);
  }

  .certificate-meta > div {
    min-width: 0;
  }

  .site-footer {
    align-items: start;
  }
}

@media (max-width: 22rem) {
  :root {
    --page-gutter: 1rem;
  }

  .brand-logo {
    width: 8.75rem;
  }

  .lesson-page-header,
  .lesson-objectives,
  .lesson-scenario,
  .lesson-practice,
  .lesson-knowledge-check,
  .worked-example,
  .takeaway-card,
  .reflection-card {
    padding: var(--space-4);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .button:hover,
  .download-card:hover,
  .landing-course-card:hover,
  .resource-card:hover {
    transform: none !important;
  }
}

@media (prefers-contrast: more) {
  :root {
    --color-border: var(--color-contrast-border);
    --color-border-strong: var(--color-contrast-border-strong);
    --color-text-secondary: var(--color-contrast-text-secondary);
  }
}