/* ==========================================================================
   NSU College of Dental Medicine - Department of Prosthodontics
   Shared stylesheet. One file, loaded by every page.

   HOW TO CHANGE THE COLORS
   Every color is set once in the ":root" block below. Change the value
   there and it updates across the whole website. Do not hunt for colors
   further down the file.

   CONTENTS
   1.  Design tokens (colors, spacing, type sizes, widths, borders)
   2.  Reset and base elements
   3.  Layout (container, sections, grids)
   4.  Typography
   5.  Skip link
   6.  Site header and main menu
   7.  Breadcrumbs
   8.  Buttons
   9.  Home banner and page headers
   10. Boxes and cards
   11. Profile cards (faculty, residents, alumni)
   12. Numbered steps
   13. Notices, disclaimers and content placeholders
   14. Lists, tables, figures
   15. Forms
   16. Interactive learning (quiz and worksheets)
   17. Site footer
   18. Small helper classes
   19. Reduced motion
   20. Printing
   ========================================================================== */

/* 1. Design tokens ======================================================== */

:root {
  /* Brand palette */
  --color-navy: #06245B;
  --color-navy-dark: #04193f;
  --color-blue: #0877D1;
  --color-blue-dark: #065fa8;
  --color-aqua: #19B6D2;
  --color-aqua-dark: #0d7c90;
  --color-silver: #BCC6D2;
  --color-surface: #F3F6F9;
  --color-surface-alt: #E7EDF4;
  --color-text: #172433;
  --color-text-muted: #45566a;
  --color-white: #FFFFFF;

  /* Roles */
  --color-heading: var(--color-navy);
  --color-link: var(--color-blue-dark);
  --color-link-hover: var(--color-navy);
  --color-border: #ccd6e0;
  --color-focus-ring: #0d7c90;

  /* Aqua is used decoratively for small accent rules. The current-page marker
     in the menu carries meaning rather than decoration, so it uses the darker
     teal, which reaches the 3:1 contrast WCAG asks of meaningful graphics. */
  --color-current: #0d7c90;

  /* Notice colors. Always paired with a word such as "Note" or "Correct",
     never used as the only way to tell states apart. */
  --color-notice-bg: #EAF3FB;
  --color-notice-border: #9cc4e4;
  --color-caution-bg: #FDF5E6;
  --color-caution-border: #ddb96f;
  --color-todo-bg: #FCEFEF;
  --color-todo-border: #cf9494;
  --color-todo-text: #7f2626;
  --color-correct-bg: #E8F5EE;
  --color-correct-border: #7bb99b;
  --color-correct-text: #175436;
  --color-wrong-bg: #FCEFEF;
  --color-wrong-border: #cf9494;
  --color-wrong-text: #7f2626;

  /* Spacing */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4rem;

  /* Type */
  --font-sans: Inter, Avenir, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-base: 1rem;
  --text-lg: clamp(1.0625rem, 1.02rem + 0.22vw, 1.1875rem);
  --text-h4: clamp(1.0625rem, 1.01rem + 0.28vw, 1.1875rem);
  --text-h3: clamp(1.1875rem, 1.11rem + 0.38vw, 1.375rem);
  --text-h2: clamp(1.4375rem, 1.29rem + 0.72vw, 1.875rem);
  --text-h1: clamp(1.75rem, 1.5rem + 1.25vw, 2.5rem);
  --leading-tight: 1.25;
  --leading-normal: 1.6;

  /* Widths.
     Content fills the page. --width-container is the one content column used
     by every section. --width-narrow now matches it, so text sections are no
     longer indented. --width-prose is the cap on paragraph line length; it is
     switched off so paragraphs fill the column too.

     If long lines of text ever feel hard to read on a very wide monitor, set
     --width-prose back to something like 90ch. That single change narrows the
     paragraphs without affecting the card layouts. */
  --width-container: 88rem;
  --width-narrow: 88rem;
  --width-prose: none;

  /* Borders and corners. Kept simple and consistent. */
  --radius: 6px;
  --radius-pill: 999px;
  --border: 1px solid var(--color-border);
  --shadow-soft: 0 1px 3px rgba(6, 36, 91, 0.08);

  /* Component sizing */
  --tap-target: 44px;
}

/* 2. Reset and base elements ============================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 5rem;
}

body {
  margin: 0;
  background-color: var(--color-white);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

img,
picture,
svg,
video,
iframe {
  display: block;
  max-width: 100%;
  height: auto;
}

ul,
ol {
  padding-inline-start: 1.4rem;
}

li + li {
  margin-top: var(--space-3xs);
}

a {
  color: var(--color-link);
  text-underline-offset: 0.16em;
}

a:hover {
  color: var(--color-link-hover);
}

/* Focus indicator. Visible on every interactive element. */
:focus-visible {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 2px;
}

:focus:not(:focus-visible) {
  outline: none;
}

hr {
  border: 0;
  border-top: var(--border);
  margin: var(--space-lg) 0;
}

abbr[title] {
  text-decoration: underline dotted;
  cursor: help;
}

/* 3. Layout =============================================================== */

.container {
  width: 100%;
  max-width: var(--width-container);
  margin-inline: auto;
  padding-inline: var(--space-sm);
}

@media (min-width: 48em) {
  .container {
    padding-inline: var(--space-lg);
  }
}

@media (min-width: 90em) {
  .container {
    padding-inline: var(--space-xl);
  }
}

.container--narrow {
  max-width: var(--width-narrow);
}

.section {
  padding-block: var(--space-xl);
}

.section--tight {
  padding-block: var(--space-lg);
}

.section--surface {
  background-color: var(--color-surface);
}

.section--navy {
  background-color: var(--color-navy);
  color: var(--color-white);
}

.section--navy h2,
.section--navy h3 {
  color: var(--color-white);
}

.section--navy a:not(.button) {
  color: #a9dcea;
}

.section__header {
  margin-bottom: var(--space-lg);
}

.section__header > :last-child {
  margin-bottom: 0;
}

.section--center,
.section__header--center {
  text-align: center;
}

.section--center p,
.section__header--center p {
  margin-inline: auto;
}

main:focus {
  outline: none;
}

/* Card grids. One column on phones, two on tablets, more on desktop. */
.grid {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: 1fr;
}

@media (min-width: 40em) {
  .grid--2,
  .grid--3,
  .grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 62em) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 78em) {
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}

.stack > * + * {
  margin-top: var(--space-sm);
}

.stack--lg > * + * {
  margin-top: var(--space-md);
}

/* Main content beside a sidebar. Stacks on small screens. */
.split {
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: 1fr;
  align-items: start;
}

@media (min-width: 62em) {
  .split {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: var(--space-xl);
  }
}

/* 4. Typography =========================================================== */

h1, h2, h3, h4, h5, h6 {
  color: var(--color-heading);
  font-weight: 700;
  line-height: var(--leading-tight);
  margin: 0 0 var(--space-sm);
}

h1 { font-size: var(--text-h1); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); }
h4 { font-size: var(--text-h4); }
h5 { font-size: var(--text-base); }
h6 {
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Thin aqua rule that sits under a section heading. */
h2 + .rule,
.rule {
  width: 3rem;
  height: 3px;
  background-color: var(--color-aqua);
  border-radius: 2px;
  margin: 0 0 var(--space-sm);
}

.section__header--center .rule,
.section--center .rule {
  margin-inline: auto;
}

p {
  margin: 0 0 var(--space-sm);
  max-width: var(--width-prose);
}

.section--center p,
.section__header--center p,
.card p,
.notice p,
.site-footer p,
.profile-card p,
.steps p {
  max-width: none;
}

.lead {
  font-size: var(--text-lg);
}

.eyebrow {
  display: block;
  margin-bottom: var(--space-2xs);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-aqua-dark);
}

.section--navy .eyebrow {
  color: #7fd4e6;
}

.text-muted { color: var(--color-text-muted); }
.small { font-size: var(--text-sm); }

blockquote {
  margin: var(--space-md) 0;
  padding: var(--space-sm) var(--space-md);
  border-left: 4px solid var(--color-aqua);
  background-color: var(--color-surface);
}

blockquote > :last-child {
  margin-bottom: 0;
}

/* 5. Skip link ============================================================ */

.skip-link {
  position: absolute;
  top: -100px;
  left: var(--space-sm);
  z-index: 100;
  padding: var(--space-2xs) var(--space-sm);
  background-color: var(--color-navy);
  color: var(--color-white);
  font-weight: 700;
  text-decoration: none;
  border-radius: 0 0 var(--radius) var(--radius);
}

.skip-link:focus {
  top: 0;
  color: var(--color-white);
}

/* 6. Site header and main menu ============================================ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: var(--color-white);
  border-bottom: 3px solid var(--color-navy);
}

/* The header holds the logo, eight menu items and a button, so it is given
   more room than the text columns further down the page. The full menu only
   appears once there is genuinely space for it (see the 85em rule below);
   under that width the menu button is used instead. */
.site-header .container {
  max-width: 88rem;
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding-block: var(--space-2xs);
}

/* Logo plus department name. */
.site-logo {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: var(--space-3xs);
  margin-inline-start: calc(var(--space-3xs) * -1);
  text-decoration: none;
  color: var(--color-navy);
}

.site-logo:hover {
  color: var(--color-navy);
}

.site-logo img {
  width: 48px;
  height: 48px;
  flex: none;
}

.site-logo__text {
  display: block;
  line-height: 1.2;
}

.site-logo__org {
  display: block;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-blue-dark);
}

.site-logo__dept {
  display: block;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--color-navy);
}

@media (min-width: 30em) {
  .site-logo img { width: 56px; height: 56px; }
  .site-logo__org { font-size: 0.6875rem; }
  .site-logo__dept { font-size: 1.0625rem; }
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  min-height: var(--tap-target);
  padding: var(--space-2xs) var(--space-xs);
  border: 1px solid var(--color-navy);
  border-radius: var(--radius);
  background-color: var(--color-white);
  color: var(--color-navy);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 700;
  cursor: pointer;
}

.nav-toggle:hover {
  background-color: var(--color-surface);
}

.nav-toggle svg {
  width: 1.125rem;
  height: 1.125rem;
  flex: none;
}

.nav-toggle__close { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__open { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__close { display: block; }

.main-nav {
  display: none;
}

.main-nav.is-open {
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background-color: var(--color-white);
  border-bottom: 3px solid var(--color-navy);
  box-shadow: var(--shadow-soft);
  max-height: calc(100vh - 5rem);
  overflow-y: auto;
  padding: var(--space-2xs) var(--space-sm) var(--space-md);
}

.main-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.main-nav__list li {
  margin-top: 0;
}

.main-nav__link {
  display: flex;
  align-items: center;
  min-height: var(--tap-target);
  padding: var(--space-2xs);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-navy);
  font-weight: 600;
  text-decoration: none;
}

.main-nav__link:hover {
  background-color: var(--color-surface);
  color: var(--color-blue-dark);
}

/* Current page: colored bar plus bold text, in addition to aria-current. */
.main-nav__link[aria-current="page"] {
  border-left: 4px solid var(--color-current);
  padding-left: var(--space-2xs);
  background-color: var(--color-surface);
  font-weight: 700;
  color: var(--color-navy);
}


/* Desktop menu. The breakpoint is wide (85em, about 1360px) because eight
   menu items plus a button do not fit comfortably on a narrower screen.
   Below this width the menu button in the header is used instead.
   If you change this number, change the matching value in assets/js/site.js. */
@media (min-width: 85em) {
  .nav-toggle {
    display: none;
  }

  .main-nav,
  .main-nav.is-open {
    display: block;
    position: static;
    max-height: none;
    overflow: visible;
    padding: 0;
    border: 0;
    box-shadow: none;
    background: transparent;
  }

  .main-nav__list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 2px;
  }

  .main-nav__link {
    min-height: auto;
    padding: var(--space-2xs);
    border-bottom: 3px solid transparent;
    font-size: 0.875rem;
    white-space: nowrap;
  }

  .main-nav__link[aria-current="page"] {
    border-left: 0;
    padding-left: var(--space-2xs);
    background-color: transparent;
    border-bottom-color: var(--color-current);
    font-weight: 700;
  }

}

@media (min-width: 95em) {
  .main-nav__link {
    font-size: var(--text-sm);
    padding-inline: var(--space-xs);
  }
}

/* 7. Breadcrumbs ========================================================== */

.breadcrumbs {
  background-color: var(--color-surface);
  border-bottom: var(--border);
  font-size: var(--text-sm);
}

.breadcrumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3xs) var(--space-2xs);
  list-style: none;
  margin: 0;
  padding: var(--space-2xs) 0;
}

.breadcrumbs__list li {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  margin-top: 0;
}

.breadcrumbs__list li + li::before {
  content: "/";
  color: var(--color-text-muted);
}

.breadcrumbs [aria-current="page"] {
  color: var(--color-text-muted);
  font-weight: 700;
}

/* 8. Buttons ============================================================== */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  min-height: var(--tap-target);
  padding: var(--space-2xs) var(--space-md);
  border: 2px solid var(--color-blue);
  border-radius: var(--radius);
  background-color: var(--color-blue);
  color: var(--color-white);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.button:hover {
  background-color: var(--color-blue-dark);
  border-color: var(--color-blue-dark);
  color: var(--color-white);
}

.button--secondary {
  background-color: var(--color-white);
  color: var(--color-blue-dark);
}

.button--secondary:hover {
  background-color: var(--color-surface);
  color: var(--color-navy);
}

.button--on-navy {
  background-color: var(--color-white);
  border-color: var(--color-white);
  color: var(--color-navy);
}

.button--on-navy:hover {
  background-color: var(--color-silver);
  border-color: var(--color-silver);
  color: var(--color-navy-dark);
}

.button--outline-on-navy {
  background-color: transparent;
  border-color: var(--color-white);
  color: var(--color-white);
}

.button--outline-on-navy:hover {
  background-color: rgba(255, 255, 255, 0.14);
  border-color: var(--color-white);
  color: var(--color-white);
}

.button--small {
  min-height: 2.25rem;
  padding: var(--space-3xs) var(--space-sm);
  font-size: var(--text-xs);
}

.button svg {
  width: 1rem;
  height: 1rem;
  flex: none;
}

.button-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.section--center .button-group,
.section__header--center .button-group {
  justify-content: center;
}

/* 9. Home banner and page headers ========================================= */

/* Department banner image across the top of the home page. */
.home-banner {
  background-color: var(--color-navy);
}

.home-banner picture,
.home-banner img {
  display: block;
  width: 100%;
  max-width: 100rem;
  height: auto;
  margin-inline: auto;
}

.home-intro {
  background-color: var(--color-navy);
  color: var(--color-white);
  padding-block: var(--space-xl);
}

.home-intro h1 {
  color: var(--color-white);
  margin-bottom: var(--space-sm);
}

.home-intro p {
  color: #dde6f0;
  font-size: var(--text-lg);
}

.home-intro .button-group {
  margin-top: var(--space-md);
}

/* Simple navy strip at the top of every internal page. */
.page-header {
  background-color: var(--color-navy);
  color: var(--color-white);
  padding-block: var(--space-lg);
}

.page-header h1 {
  color: var(--color-white);
  margin-bottom: var(--space-2xs);
}

.page-header p {
  margin-bottom: 0;
  color: #dde6f0;
  font-size: var(--text-lg);
}

/* 10. Boxes and cards ===================================================== */

.card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--space-md);
  background-color: var(--color-white);
  border: var(--border);
  border-radius: var(--radius);
}

.card > :last-child {
  margin-bottom: 0;
}

.card h3,
.card h4 {
  margin-bottom: var(--space-2xs);
}

.card__body {
  flex: 1 1 auto;
}

.card__footer {
  margin-top: var(--space-sm);
}

.card__meta {
  margin-bottom: var(--space-2xs);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.card--accent {
  border-top: 4px solid var(--color-aqua);
}

.card--muted {
  background-color: var(--color-surface);
}

/* Clickable card.

   The whole card surface acts as one link, in the same way a menu item does.
   It works by stretching an invisible overlay out from the card's main link
   (.card__link) to cover the card. The real link still carries the text, so
   screen readers and keyboard users get one clear, properly named link
   rather than a mystery clickable box.

   To make a card clickable: add "card--link" to the card and "card__link"
   to the one anchor inside it that the whole card should follow. */
.card--link {
  position: relative;
  cursor: pointer;
}

.card--link:hover {
  border-color: var(--color-blue);
  background-color: var(--color-surface);
}

.card--link:hover .card__link {
  color: var(--color-link-hover);
}

/* The focus ring is drawn around the whole card, not just the text. */
.card--link:focus-within {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 2px;
  border-color: var(--color-blue);
}

.card--link:focus-within .card__link:focus-visible {
  outline: none;
}

.card__link {
  text-decoration: underline;
}

/* A card whose main link is styled as a button keeps the button look. */
.card__link.button {
  text-decoration: none;
}

.card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
}

/* Any other link inside a clickable card must sit above the overlay so it
   remains independently clickable. */
.card--link a:not(.card__link) {
  position: relative;
  z-index: 1;
}

.card__tag {
  display: inline-block;
  align-self: flex-start;
  margin-bottom: var(--space-2xs);
  padding: 0.1rem var(--space-2xs);
  border-radius: var(--radius-pill);
  background-color: var(--color-surface-alt);
  color: var(--color-navy);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* 11. Profile cards ======================================================= */

.profile-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: var(--color-white);
  border: var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.profile-card__media {
  aspect-ratio: 4 / 5;
  background-color: var(--color-surface-alt);
}

.profile-card__media picture {
  display: block;
  height: 100%;
}

.profile-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

/* Shown where an approved photograph has not been supplied yet. */
.profile-card__media--empty {
  display: grid;
  place-items: center;
  padding: var(--space-md);
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  border-bottom: 1px dashed var(--color-border);
}

.profile-card__media--empty svg {
  width: 2.75rem;
  height: 2.75rem;
  margin: 0 auto var(--space-2xs);
  color: var(--color-silver);
}

.profile-card__body {
  flex: 1 1 auto;
  padding: var(--space-md);
}

.profile-card__body > :last-child {
  margin-bottom: 0;
}

.profile-card__name {
  margin-bottom: var(--space-3xs);
}

.profile-card__role {
  margin-bottom: var(--space-xs);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-blue-dark);
}

.profile-card dl {
  margin: 0;
  font-size: var(--text-sm);
}

.profile-card dt {
  margin-top: var(--space-xs);
  font-weight: 700;
  color: var(--color-navy);
}

.profile-card dd {
  margin: 0;
}

/* 12. Numbered steps ====================================================== */

.steps {
  counter-reset: step;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-md);
  grid-template-columns: 1fr;
}

@media (min-width: 40em) {
  .steps {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 62em) {
  .steps--5 {
    grid-template-columns: repeat(5, 1fr);
  }
}

.steps li {
  margin-top: 0;
  padding: var(--space-md) var(--space-sm) var(--space-sm);
  background-color: var(--color-white);
  border: var(--border);
  border-radius: var(--radius);
}

.steps li > :last-child {
  margin-bottom: 0;
}

.steps__number {
  counter-increment: step;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  margin-bottom: var(--space-2xs);
  border-radius: var(--radius-pill);
  background-color: var(--color-navy);
  color: var(--color-white);
  font-size: var(--text-sm);
  font-weight: 700;
}

.steps__number::before {
  content: counter(step);
}

.steps h3 {
  font-size: var(--text-h4);
  margin-bottom: var(--space-3xs);
}

.steps p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: 0;
}

/* 13. Notices, disclaimers and content placeholders ======================= */

.notice {
  padding: var(--space-md);
  border: 1px solid var(--color-notice-border);
  border-left-width: 5px;
  border-radius: var(--radius);
  background-color: var(--color-notice-bg);
}

.notice > :last-child {
  margin-bottom: 0;
}

.notice__title {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  margin-bottom: var(--space-2xs);
  font-size: var(--text-h4);
}

.notice__title svg {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
}

.notice--caution {
  background-color: var(--color-caution-bg);
  border-color: var(--color-caution-border);
}

.notice--plain {
  background-color: var(--color-surface);
  border-color: var(--color-border);
}

.notice--small {
  font-size: var(--text-sm);
}

/* Development placeholder. Deliberately obvious so it cannot go live
   unnoticed. Every one of these is also listed in CONTENT-REQUIRED.md. */
.placeholder {
  display: block;
  margin-bottom: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border: 2px dashed var(--color-todo-border);
  border-radius: var(--radius);
  background-color: var(--color-todo-bg);
  color: var(--color-todo-text);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: 1.5;
}

.placeholder::before {
  content: "Content required: ";
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.placeholder--inline {
  display: inline-block;
  margin-bottom: 0;
  padding: 0.05rem var(--space-2xs);
  border-width: 1px;
}

/* Shown where verified records have not been supplied. */
.empty-state {
  padding: var(--space-xl) var(--space-md);
  text-align: center;
  border: 2px dashed var(--color-border);
  border-radius: var(--radius);
  background-color: var(--color-surface);
}

.empty-state svg {
  width: 2.75rem;
  height: 2.75rem;
  margin: 0 auto var(--space-sm);
  color: var(--color-silver);
}

.empty-state > :last-child {
  margin-bottom: 0;
}

.empty-state p {
  margin-inline: auto;
  max-width: 42rem;
}

/* 14. Lists, tables, figures ============================================== */

.detail-list {
  margin: 0;
}

.detail-list div {
  padding-block: var(--space-2xs);
  border-bottom: var(--border);
}

.detail-list div:last-child {
  border-bottom: 0;
}

.detail-list dt {
  font-weight: 700;
  color: var(--color-navy);
}

.detail-list dd {
  margin: 0;
}

/* Wide tables scroll inside their own box so the page never scrolls sideways. */
.table-scroll {
  overflow-x: auto;
  border: var(--border);
  border-radius: var(--radius);
}

table {
  width: 100%;
  min-width: 32rem;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

caption {
  padding: var(--space-2xs) var(--space-sm);
  text-align: left;
  font-weight: 700;
  color: var(--color-navy);
}

th,
td {
  padding: var(--space-2xs) var(--space-sm);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--color-border);
}

thead th {
  background-color: var(--color-surface);
  color: var(--color-navy);
  white-space: nowrap;
}

tbody tr:last-child td {
  border-bottom: 0;
}

figure {
  margin: 0 0 var(--space-md);
}

figcaption {
  margin-top: var(--space-2xs);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* Text marker for links that leave this website. */
.external-note {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-text-muted);
}

.external-note svg {
  width: 0.875rem;
  height: 0.875rem;
}

/* 15. Forms =============================================================== */

.form-field {
  margin-bottom: var(--space-md);
}

label,
.form-label {
  display: block;
  margin-bottom: var(--space-3xs);
  font-weight: 700;
  color: var(--color-navy);
}

.form-hint {
  display: block;
  margin-bottom: var(--space-3xs);
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--color-text-muted);
}

input[type="text"],
input[type="email"],
input[type="date"],
input[type="url"],
select,
textarea {
  width: 100%;
  min-height: var(--tap-target);
  padding: var(--space-2xs) var(--space-xs);
  border: 1px solid var(--color-text-muted);
  border-radius: var(--radius);
  background-color: var(--color-white);
  color: var(--color-text);
  font: inherit;
}

textarea {
  min-height: 7rem;
  resize: vertical;
}

input:hover,
select:hover,
textarea:hover {
  border-color: var(--color-blue);
}

fieldset {
  margin: 0 0 var(--space-md);
  padding: var(--space-md);
  border: var(--border);
  border-radius: var(--radius);
}

legend {
  padding-inline: var(--space-2xs);
  font-weight: 700;
  color: var(--color-navy);
}

.field-error {
  display: block;
  margin-top: var(--space-3xs);
  padding: var(--space-3xs) var(--space-2xs);
  border-radius: var(--radius);
  background-color: var(--color-wrong-bg);
  color: var(--color-wrong-text);
  font-size: var(--text-sm);
  font-weight: 700;
}

/* 16. Interactive learning ================================================ */

.quiz {
  padding: var(--space-md);
  border: var(--border);
  border-radius: var(--radius);
  background-color: var(--color-white);
}

.quiz__question {
  margin-bottom: var(--space-lg);
  padding: 0 0 0;
  padding-top: var(--space-md);
  border: 0;
  border-top: var(--border);
}

.quiz__question:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.quiz__question legend {
  padding: 0;
  font-size: var(--text-h4);
  line-height: 1.35;
}

.quiz__number {
  display: block;
  margin-bottom: var(--space-3xs);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-aqua-dark);
}

.choice-list {
  list-style: none;
  margin: var(--space-xs) 0 0;
  padding: 0;
}

.choice-list li {
  margin-top: var(--space-2xs);
}

.choice {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2xs);
  min-height: var(--tap-target);
  padding: var(--space-2xs) var(--space-xs);
  border: var(--border);
  border-radius: var(--radius);
  background-color: var(--color-white);
  font-weight: 400;
  color: var(--color-text);
  cursor: pointer;
}

.choice:hover {
  border-color: var(--color-blue);
  background-color: var(--color-surface);
}

.choice input {
  margin: 0.15rem 0 0;
  width: 1.5rem;
  height: 1.5rem;
  flex: none;
  accent-color: var(--color-blue);
}

.quiz__feedback {
  margin-top: var(--space-sm);
  padding: var(--space-sm);
  border: var(--border);
  border-radius: var(--radius);
  background-color: var(--color-surface);
  font-size: var(--text-sm);
}

.quiz__feedback:empty {
  display: none;
}

/* Result color is always accompanied by the words "Correct"/"Not correct". */
.quiz__feedback--correct {
  background-color: var(--color-correct-bg);
  border-color: var(--color-correct-border);
  color: var(--color-correct-text);
}

.quiz__feedback--incorrect {
  background-color: var(--color-wrong-bg);
  border-color: var(--color-wrong-border);
  color: var(--color-wrong-text);
}

.quiz__feedback-label {
  display: block;
  margin-bottom: var(--space-3xs);
  font-weight: 700;
}

.quiz__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: var(--border);
}

.quiz__score {
  margin-top: var(--space-md);
}

.quiz__score:empty {
  display: none;
}

.quiz__score-inner {
  padding: var(--space-md);
  border: 1px solid var(--color-notice-border);
  border-radius: var(--radius);
  background-color: var(--color-notice-bg);
}

.quiz__score-inner > :last-child {
  margin-bottom: 0;
}

/* Answer key that is visible when JavaScript is not available. */
.no-js-answers summary {
  display: flex;
  align-items: center;
  min-height: var(--tap-target);
  padding: var(--space-2xs);
  font-weight: 700;
  color: var(--color-navy);
  cursor: pointer;
}

.js-enabled .js-only-hidden {
  display: none;
}

.worksheet {
  padding: var(--space-md);
  border: var(--border);
  border-radius: var(--radius);
  background-color: var(--color-white);
}

.worksheet__row {
  display: grid;
  gap: var(--space-sm);
  grid-template-columns: 1fr;
}

@media (min-width: 48em) {
  .worksheet__row--2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Writing lines that appear only on paper. */
.print-lines {
  display: none;
}

/* 17. Site footer ========================================================= */

.site-footer {
  margin-top: var(--space-2xl);
  padding-block: var(--space-xl) var(--space-md);
  background-color: var(--color-navy);
  color: #dde6f0;
  font-size: var(--text-sm);
}

.site-footer h2,
.site-footer h3 {
  margin-bottom: var(--space-xs);
  color: var(--color-white);
  font-size: var(--text-base);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.site-footer a {
  color: #a9dcea;
}

.site-footer a:hover {
  color: var(--color-white);
}

.site-footer__grid {
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: 1fr;
}

@media (min-width: 40em) {
  .site-footer__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 62em) {
  .site-footer__grid {
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: var(--space-xl);
  }
}

.site-footer__org {
  margin-bottom: var(--space-3xs);
  color: var(--color-white);
  font-weight: 700;
}

.site-footer__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-footer__list li {
  margin-top: 0;
}

.site-footer__list a {
  display: inline-block;
  padding-block: var(--space-3xs);
  min-height: 2rem;
}

.site-footer__bottom {
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid rgba(188, 198, 210, 0.3);
  font-size: var(--text-xs);
}

.site-footer__bottom > :last-child {
  margin-bottom: 0;
}

.site-footer .placeholder {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.5);
  color: #ffe3e3;
}

.site-footer address {
  font-style: normal;
}

/* Phone and email in the footer are things people tap, so give them a
   comfortable target rather than the bare height of the text. */
.site-footer address a {
  display: inline-block;
  padding-block: var(--space-3xs);
  min-height: 1.75rem;
}

/* 18. Small helper classes ================================================ */

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.text-center { text-align: center; }
.mb-0 { margin-bottom: 0; }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }

.link-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.link-list li {
  margin-top: 0;
  border-bottom: var(--border);
}

.link-list li:last-child {
  border-bottom: 0;
}

.link-list a {
  display: flex;
  align-items: center;
  min-height: var(--tap-target);
  padding-block: var(--space-2xs);
}

.checklist {
  list-style: none;
  margin: 0 0 var(--space-sm);
  padding: 0;
}

.checklist li {
  position: relative;
  margin-top: var(--space-2xs);
  padding-left: 1.6rem;
}

.checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 2px;
  background-color: var(--color-aqua);
}

/* 19. Reduced motion ====================================================== */

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

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* 20. Printing ============================================================ */

@media print {
  body {
    font-size: 11pt;
    color: #000;
    background: #fff;
  }

  .site-header,
  .site-footer,
  .breadcrumbs,
  .skip-link,
  .home-banner,
  .button,
  .quiz__actions,
  .no-print {
    display: none !important;
  }

  .home-intro,
  .page-header,
  .section--navy {
    padding-block: 0.4cm;
    background: #fff !important;
    color: #000 !important;
  }

  .home-intro h1,
  .page-header h1,
  .home-intro p,
  .page-header p,
  .section--navy h2,
  .section--navy h3 {
    color: #000 !important;
  }

  .section {
    padding-block: 0.4cm;
  }

  .card,
  .worksheet,
  .quiz,
  fieldset,
  .steps li {
    break-inside: avoid;
    border: 1px solid #999;
  }

  h1, h2, h3, h4 {
    break-after: avoid;
  }

  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    word-break: break-all;
  }

  /* Replace text boxes with ruled writing lines on paper. */
  .print-hide-input {
    display: none !important;
  }

  .print-lines {
    display: block;
  }

  .print-lines span {
    display: block;
    height: 1.6em;
    border-bottom: 1px solid #666;
  }

  .worksheet__row {
    display: block;
  }

  .placeholder {
    border: 1px solid #999;
    color: #000;
  }
}