/* ==========================================================================
   AMERICAN HERITAGE SCHOOL — SALT LAKE CITY CAMPUS
   Canvas Design System  v1.0
   --------------------------------------------------------------------------
   UPLOAD: Canvas Admin > Themes > [Your Theme] > Upload > CSS file
   Applies to every course in the account.

   TO REBRAND THE ENTIRE SCHOOL: edit the tokens in section 1 only.
   Nothing below section 1 contains a hard-coded color, font, or size.
   ========================================================================== */


/* ==========================================================================
   1. DESIGN TOKENS  — the only section you should ever need to edit
   ========================================================================== */

:root {

  /* --- Core brand ------------------------------------------------------- */
  --ahs-navy:        #252E62;  /* headings, structure, primary text on light */
  --ahs-crimson:     #A51E36;  /* primary buttons, the signature rule        */
  --ahs-gold:        #EEC764;  /* SURFACES ONLY — never text, never an icon  */
  --ahs-gold-deep:   #7A5C10;  /* the text/icon-safe member of the gold family */
  --ahs-green:       #376A33;  /* success + 3rd member of three-way sets     */
  --ahs-lavender:    #D2D0DE;  /* quiet background tint — optional/enrichment */

  /* --- Interaction states ----------------------------------------------- */
  --ahs-navy-hover:      #1B2249;
  --ahs-navy-active:     #141A38;
  --ahs-crimson-hover:   #8A1A2E;
  --ahs-crimson-active:  #701526;

  /* --- Neutrals --------------------------------------------------------- */
  --ahs-ink:    #1A1D26;  /* body text. Navy-tinted, never pure black.       */
  --ahs-slate:  #4A4F5C;  /* captions, secondary text                        */
  --ahs-mist:   #8A8F9A;  /* disabled/placeholder ONLY — never body text     */
  --ahs-rule:   #DDE0E5;  /* borders, dividers, table lines                  */
  --ahs-paper:  #F4F4F4;  /* section backgrounds                             */
  --ahs-white:  #FFFFFF;

  /* --- Semantic: fill / border / text ----------------------------------- */
  --ahs-info-bg:      #EAF0F7;  --ahs-info-br:      #252E62;  --ahs-info-tx:      #1D2545;
  --ahs-success-bg:   #EAF2E9;  --ahs-success-br:   #376A33;  --ahs-success-tx:   #284D25;
  --ahs-warning-bg:   #FDF4E0;  --ahs-warning-br:   #EEC764;  --ahs-warning-tx:   #6B4E0C;
  --ahs-error-bg:     #F9E9EC;  --ahs-error-br:     #A51E36;  --ahs-error-tx:     #7E1729;
  --ahs-note-bg:      #F4F4F4;  --ahs-note-br:      #DDE0E5;  --ahs-note-tx:      #1A1D26;
  --ahs-optional-bg:  #D2D0DE;  --ahs-optional-br:  #5A5870;  --ahs-optional-tx:  #2A2838;

  /* --- Typography ------------------------------------------------------- */
  --ahs-font-head: "Roboto Slab", Georgia, "Times New Roman", serif;
  --ahs-font-body: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --ahs-size-h1:      2.125rem;  /* 34px */
  --ahs-size-h2:      1.6875rem; /* 27px */
  --ahs-size-h3:      1.3125rem; /* 21px */
  --ahs-size-h4:      1.0625rem; /* 17px */
  --ahs-size-body:    1rem;      /* 16px */
  --ahs-size-body-lg: 1.125rem;  /* 18px */
  --ahs-size-caption: 0.875rem;  /* 14px */
  --ahs-size-eyebrow: 0.75rem;   /* 12px */

  --ahs-lh-tight: 1.2;
  --ahs-lh-head:  1.3;
  --ahs-lh-body:  1.6;

  /* --- Spacing: 8px grid ------------------------------------------------ */
  --ahs-s1:  4px;   --ahs-s2:  8px;   --ahs-s3:  12px;  --ahs-s4:  16px;
  --ahs-s5:  24px;  --ahs-s6:  32px;  --ahs-s7:  48px;  --ahs-s8:  64px;
  --ahs-s9:  96px;

  /* --- Structure -------------------------------------------------------- */
  --ahs-radius:     0;                              /* SHARP. Do not change. */
  --ahs-border:     1px solid var(--ahs-rule);
  --ahs-accent-w:   4px;                            /* callout left border   */
  --ahs-shadow:     0 1px 3px rgba(37, 46, 98, .08);
  --ahs-measure:    68ch;                           /* max readable line     */
  --ahs-touch:      44px;                           /* min touch target      */

  /* --- Focus: the branded gold ring ------------------------------------- */
  --ahs-focus:        3px solid var(--ahs-gold);
  --ahs-focus-offset: 2px;
}


/* Load the type. Canvas allows @import in Theme CSS.
   Fallbacks in --ahs-font-* above cover the case where it is blocked. */
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;0,900;1,400&family=Roboto+Slab:wght@400;700&display=swap');


/* ==========================================================================
   2. FOUNDATION
   ========================================================================== */

/* Scope everything to .ahs-page so we never fight Canvas's own chrome. */
.ahs-page {
  font-family: var(--ahs-font-body);
  font-size: var(--ahs-size-body);
  line-height: var(--ahs-lh-body);
  color: var(--ahs-ink);
  max-width: 100%;
}

.ahs-page * { box-sizing: border-box; }

/* Readable measure for prose. Full-bleed elements opt out. */
.ahs-page > p,
.ahs-page > ul,
.ahs-page > ol { max-width: var(--ahs-measure); }


/* ---- Headings ------------------------------------------------------------
   NOTE: Canvas generates the page title as <h1>. Teacher content therefore
   STARTS AT H2. An .ahs-h1 class exists for the rare page that needs one.
   -------------------------------------------------------------------------- */

.ahs-page h2, .ahs-h1 {
  font-family: var(--ahs-font-head);
  font-weight: 700;
  color: var(--ahs-navy);
  line-height: var(--ahs-lh-tight);
}

.ahs-h1 {
  font-size: var(--ahs-size-h1);
  letter-spacing: -.01em;
  margin: 0 0 var(--ahs-s4);
}

.ahs-page h2 {
  font-size: var(--ahs-size-h2);
  margin: var(--ahs-s7) 0 var(--ahs-s4);   /* 48 above, 16 below */
}

/* THE SIGNATURE: the crimson rule, lifted from the wordmark. */
.ahs-page h2::after {
  content: "";
  display: block;
  width: 64px;
  height: 3px;
  background: var(--ahs-crimson);
  margin-top: var(--ahs-s3);
}

/* Opt out where the rule would be wrong (inside a card, e.g.) */
.ahs-page h2.ahs-no-rule::after { display: none; }

.ahs-page h3 {
  font-family: var(--ahs-font-body);
  font-size: var(--ahs-size-h3);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--ahs-navy);
  line-height: var(--ahs-lh-head);
  margin: var(--ahs-s6) 0 var(--ahs-s3);   /* 32 above, 12 below */
}

.ahs-page h4 {
  font-family: var(--ahs-font-body);
  font-size: var(--ahs-size-h4);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ahs-crimson);
  line-height: 1.4;
  margin: var(--ahs-s5) 0 var(--ahs-s2);
}

/* The eyebrow. Replaces the print system's script label.
   Small quiet tag above a large loud headline. */
.ahs-eyebrow {
  display: block;
  font-family: var(--ahs-font-body);
  font-size: var(--ahs-size-eyebrow);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--ahs-crimson);
  margin: 0 0 var(--ahs-s2);
}

.ahs-page p  { margin: 0 0 var(--ahs-s4); }
.ahs-lead    { font-size: var(--ahs-size-body-lg); }
.ahs-caption { font-size: var(--ahs-size-caption); color: var(--ahs-slate); }

.ahs-page a {
  color: var(--ahs-navy);
  text-decoration: underline;      /* never remove — link ≠ color alone */
  text-underline-offset: 2px;
}
.ahs-page a:hover { color: var(--ahs-crimson-hover); }

/* Focus: visible, branded, everywhere. */
.ahs-page a:focus-visible,
.ahs-page button:focus-visible,
.ahs-btn:focus-visible,
.ahs-card:focus-within {
  outline: var(--ahs-focus);
  outline-offset: var(--ahs-focus-offset);
}


/* ==========================================================================
   3. LAYOUT
   ========================================================================== */

/* Auto-responsive grid. No media query needed: cards simply wrap.
   This is what makes the system mobile-safe by default. */
.ahs-grid {
  display: grid;
  gap: var(--ahs-s5);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin: var(--ahs-s5) 0;
}
.ahs-grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.ahs-grid--4 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

.ahs-section  { margin: var(--ahs-s8) 0; }
.ahs-divider  { border: 0; border-top: var(--ahs-border); margin: var(--ahs-s7) 0; }
.ahs-divider--crimson {
  border: 0; height: 3px; background: var(--ahs-crimson);
  width: 64px; margin: var(--ahs-s6) 0;
}


/* ==========================================================================
   4. BREADCRUMB BAR
   Ported from the Welcome Guide's running head:  AHS STANDARDS ▸ ACADEMICS
   Answers "Where am I?" — the first of the three questions.
   ========================================================================== */

.ahs-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  margin: 0 0 var(--ahs-s5);
  font-family: var(--ahs-font-body);
  font-size: var(--ahs-size-eyebrow);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.ahs-breadcrumb__tag {
  background: var(--ahs-crimson);
  color: var(--ahs-white);
  padding: var(--ahs-s2) var(--ahs-s4);
}
.ahs-breadcrumb__here {
  background: var(--ahs-paper);
  color: var(--ahs-navy);
  padding: var(--ahs-s2) var(--ahs-s4);
  border-bottom: 2px solid var(--ahs-gold);
  flex: 1;
}


/* ==========================================================================
   5. HERO / BANNER
   Ported from the Welcome Guide section-divider page.
   Photo + navy overlay + eyebrow + title + gold rule.
   ========================================================================== */

.ahs-hero {
  position: relative;
  background: var(--ahs-navy);
  background-size: cover;
  background-position: center;
  color: var(--ahs-white);
  padding: var(--ahs-s8) var(--ahs-s5);
  margin: 0 0 var(--ahs-s6);
  overflow: hidden;
}

/* The overlay is what makes ANY photo safe for white text.
   Teachers can drop in any image and contrast still passes. */
.ahs-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
              rgba(37,46,98,.92) 0%,
              rgba(37,46,98,.78) 55%,
              rgba(37,46,98,.55) 100%);
}
.ahs-hero > * { position: relative; }

.ahs-hero .ahs-eyebrow { color: var(--ahs-gold); }

.ahs-hero__title {
  font-family: var(--ahs-font-head);
  font-size: var(--ahs-size-h1);
  font-weight: 700;
  line-height: var(--ahs-lh-tight);
  color: var(--ahs-white);
  margin: 0 0 var(--ahs-s3);
}
.ahs-hero__sub {
  font-size: var(--ahs-size-body-lg);
  color: var(--ahs-white);
  margin: 0;
  max-width: 52ch;
  opacity: .95;
}
.ahs-hero::after {                     /* the gold rule */
  content: "";
  position: absolute;
  left: var(--ahs-s5);
  bottom: var(--ahs-s5);
  width: 80px;
  height: 4px;
  background: var(--ahs-gold);
}


/* ==========================================================================
   6. BUTTONS
   ONE crimson button per page. Everything else is outlined.
   Two primary buttons = zero primary buttons.
   ========================================================================== */

.ahs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ahs-s2);
  min-height: var(--ahs-touch);          /* 44px — WCAG 2.2 target size */
  padding: var(--ahs-s3) var(--ahs-s5);
  font-family: var(--ahs-font-body);
  font-size: var(--ahs-size-body);
  font-weight: 700;
  letter-spacing: .03em;
  text-decoration: none;
  border-radius: var(--ahs-radius);      /* 0 */
  border: 2px solid transparent;
  transition: background-color .15s ease, color .15s ease;
}

.ahs-btn--primary {
  background: var(--ahs-crimson);
  color: var(--ahs-white) !important;
  border-color: var(--ahs-crimson);
}
.ahs-btn--primary:hover {
  background: var(--ahs-crimson-hover);
  border-color: var(--ahs-crimson-hover);
  color: var(--ahs-white) !important;
}

.ahs-btn--secondary {
  background: transparent;
  color: var(--ahs-navy) !important;
  border-color: var(--ahs-navy);
}
.ahs-btn--secondary:hover {
  background: var(--ahs-navy);
  color: var(--ahs-white) !important;
}

.ahs-btn--full  { display: flex; width: 100%; }
.ahs-btn--large { min-height: 56px; font-size: var(--ahs-size-body-lg); }  /* K-5 */

/* Button row — wraps on mobile automatically. */
.ahs-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ahs-s3);
  margin: var(--ahs-s5) 0;
}


/* ==========================================================================
   7. CARDS
   ========================================================================== */

.ahs-card {
  background: var(--ahs-white);
  border: var(--ahs-border);
  border-top: 4px solid var(--ahs-navy);   /* the color-coded cap */
  border-radius: var(--ahs-radius);
  box-shadow: var(--ahs-shadow);
  padding: var(--ahs-s5);
}
.ahs-card--crimson { border-top-color: var(--ahs-crimson); }
.ahs-card--green   { border-top-color: var(--ahs-green);   }
.ahs-card--gold    { border-top-color: var(--ahs-gold);    }

.ahs-card h3, .ahs-card h4 { margin-top: 0; }
.ahs-card > :last-child    { margin-bottom: 0; }

/* Quick-link card — the whole tile is a link. */
.ahs-card--link {
  display: block;
  text-decoration: none !important;
  border-top-color: var(--ahs-crimson);
  min-height: var(--ahs-touch);
}
.ahs-card--link:hover {
  background: var(--ahs-paper);
  border-top-color: var(--ahs-navy);
}
.ahs-card--link .ahs-card__label {
  display: block;
  font-weight: 700;
  color: var(--ahs-navy);
  font-size: var(--ahs-size-h4);
  text-transform: uppercase;
  letter-spacing: .03em;
  margin-bottom: var(--ahs-s1);
}
.ahs-card--link .ahs-card__desc {
  display: block;
  color: var(--ahs-slate);
  font-size: var(--ahs-size-caption);
}

/* Teacher profile card */
.ahs-teacher {
  display: flex;
  flex-wrap: wrap;                        /* stacks on mobile, no query */
  gap: var(--ahs-s5);
  align-items: flex-start;
  background: var(--ahs-paper);
  border-left: var(--ahs-accent-w) solid var(--ahs-crimson);
  padding: var(--ahs-s5);
  margin: var(--ahs-s5) 0;
}
.ahs-teacher__photo {
  width: 140px;
  height: 140px;
  object-fit: cover;
  border: 3px solid var(--ahs-white);
  box-shadow: var(--ahs-shadow);
  flex-shrink: 0;
}
.ahs-teacher__body { flex: 1; min-width: 240px; }
.ahs-teacher__body > :first-child { margin-top: 0; }
.ahs-teacher__body > :last-child  { margin-bottom: 0; }


/* ==========================================================================
   8. CALLOUTS
   4px left border + icon + label + color = FOUR signals.
   Strip the color entirely and the box still communicates.
   ========================================================================== */

.ahs-callout {
  border-left: var(--ahs-accent-w) solid var(--ahs-note-br);
  background: var(--ahs-note-bg);
  color: var(--ahs-note-tx);
  padding: var(--ahs-s4) var(--ahs-s5);
  margin: var(--ahs-s5) 0;
}
.ahs-callout > :first-child { margin-top: 0; }
.ahs-callout > :last-child  { margin-bottom: 0; }

/* The label carries the meaning in WORDS. Never color alone. */
.ahs-callout__label {
  display: flex;
  align-items: center;
  gap: var(--ahs-s2);
  font-family: var(--ahs-font-body);
  font-size: var(--ahs-size-h4);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin: 0 0 var(--ahs-s2);
}
.ahs-callout__label svg { width: 20px; height: 20px; flex-shrink: 0; }

.ahs-callout--info     { border-color: var(--ahs-info-br);     background: var(--ahs-info-bg);     color: var(--ahs-info-tx);     }
.ahs-callout--success  { border-color: var(--ahs-success-br);  background: var(--ahs-success-bg);  color: var(--ahs-success-tx);  }
.ahs-callout--warning  { border-color: var(--ahs-warning-br);  background: var(--ahs-warning-bg);  color: var(--ahs-warning-tx);  }
.ahs-callout--error    { border-color: var(--ahs-error-br);    background: var(--ahs-error-bg);    color: var(--ahs-error-tx);    }
.ahs-callout--optional { border-color: var(--ahs-optional-br); background: var(--ahs-optional-bg); color: var(--ahs-optional-tx); }

.ahs-callout--info .ahs-callout__label     { color: var(--ahs-info-br);    }
.ahs-callout--success .ahs-callout__label  { color: var(--ahs-success-tx); }
.ahs-callout--warning .ahs-callout__label  { color: var(--ahs-warning-tx); }
.ahs-callout--error .ahs-callout__label    { color: var(--ahs-error-br);   }
.ahs-callout--optional .ahs-callout__label { color: var(--ahs-optional-tx);}

/* START HERE — the one loud box. Gold surface, navy text. 7.4:1. */
.ahs-callout--start {
  border-left: 0;
  border-top: 4px solid var(--ahs-crimson);
  background: var(--ahs-gold);
  color: var(--ahs-navy);
  padding: var(--ahs-s5);
}
.ahs-callout--start .ahs-callout__label { color: var(--ahs-navy); }


/* ==========================================================================
   9. HIGHLIGHT BLOCK  (the gold "Academic Probation" box, Welcome Guide p.12)
   ========================================================================== */

.ahs-highlight {
  background: var(--ahs-gold);
  color: var(--ahs-navy);                 /* the ONLY legal text on gold */
  padding: var(--ahs-s5);
  margin: var(--ahs-s5) 0;
}
.ahs-highlight h3, .ahs-highlight h4 { color: var(--ahs-navy); margin-top: 0; }
.ahs-highlight > :last-child         { margin-bottom: 0; }


/* ==========================================================================
   10. QUOTE
   ========================================================================== */

.ahs-quote {
  border-left: var(--ahs-accent-w) solid var(--ahs-gold);
  background: var(--ahs-paper);
  padding: var(--ahs-s5) var(--ahs-s6);
  margin: var(--ahs-s6) 0;
  font-family: var(--ahs-font-head);
  font-size: var(--ahs-size-h3);
  font-style: italic;
  font-weight: 400;
  line-height: 1.5;
  color: var(--ahs-navy);
}
.ahs-quote cite {
  display: block;
  margin-top: var(--ahs-s3);
  font-family: var(--ahs-font-body);
  font-size: var(--ahs-size-caption);
  font-style: normal;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ahs-crimson);
}


/* ==========================================================================
   11. LISTS & CHECKLIST
   Checkmarks via ::before — NOT emoji. Screen readers stay silent.
   (The old page's ✅ was announced as "white heavy check mark" every time.)
   ========================================================================== */

.ahs-page ul, .ahs-page ol { padding-left: var(--ahs-s5); margin: 0 0 var(--ahs-s4); }
.ahs-page li { margin-bottom: var(--ahs-s2); }

.ahs-checklist { list-style: none; padding-left: 0; }
.ahs-checklist li {
  position: relative;
  padding-left: var(--ahs-s6);
  margin-bottom: var(--ahs-s3);
  min-height: 24px;
}
.ahs-checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 18px;
  height: 18px;
  border: 2px solid var(--ahs-crimson);
  background: var(--ahs-white);
}
/* Completed state: adds a checkmark glyph AND changes color = two signals. */
.ahs-checklist li.is-done::before {
  background: var(--ahs-green);
  border-color: var(--ahs-green);
}
.ahs-checklist li.is-done::after {
  content: "";
  position: absolute;
  left: 6px; top: 6px;
  width: 5px; height: 10px;
  border: solid var(--ahs-white);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* Numbered steps */
.ahs-steps { list-style: none; padding-left: 0; counter-reset: ahs-step; }
.ahs-steps li {
  position: relative;
  padding-left: var(--ahs-s7);
  margin-bottom: var(--ahs-s4);
  counter-increment: ahs-step;
  min-height: 32px;
}
.ahs-steps li::before {
  content: counter(ahs-step);
  position: absolute;
  left: 0; top: 0;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  background: var(--ahs-navy);
  color: var(--ahs-white);
  font-family: var(--ahs-font-body);
  font-weight: 700;
  font-size: var(--ahs-size-caption);
}


/* ==========================================================================
   12. DEFINITION LIST  (contact info, at-a-glance facts)
   A table WITHOUT table markup — so it reflows on a phone.
   ========================================================================== */

.ahs-facts { margin: var(--ahs-s5) 0; }
.ahs-facts dt {
  font-family: var(--ahs-font-body);
  font-size: var(--ahs-size-caption);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ahs-crimson);
  margin-bottom: var(--ahs-s1);
}
.ahs-facts dd {
  margin: 0 0 var(--ahs-s4);
  padding-bottom: var(--ahs-s4);
  border-bottom: var(--ahs-border);
  color: var(--ahs-ink);
}
.ahs-facts dd:last-child { border-bottom: 0; }


/* ==========================================================================
   13. TABLES
   Only for genuinely tabular data (a schedule). Never for layout.
   Below 600px they become stacked cards via data-label.
   ========================================================================== */

.ahs-table-wrap { overflow-x: auto; margin: var(--ahs-s5) 0; }

.ahs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--ahs-size-body);
}
.ahs-table caption {
  text-align: left;
  font-weight: 700;
  color: var(--ahs-navy);
  padding-bottom: var(--ahs-s3);
}
.ahs-table th {
  background: var(--ahs-navy);
  color: var(--ahs-white);
  text-align: left;
  padding: var(--ahs-s3) var(--ahs-s4);
  font-family: var(--ahs-font-body);
  font-size: var(--ahs-size-caption);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.ahs-table td {
  padding: var(--ahs-s3) var(--ahs-s4);
  border-bottom: var(--ahs-border);
  vertical-align: top;
}
.ahs-table tbody tr:nth-child(even) { background: var(--ahs-paper); }


/* ==========================================================================
   14. FOOTER
   ========================================================================== */

.ahs-footer {
  background: var(--ahs-navy);
  color: var(--ahs-white);
  padding: var(--ahs-s6) var(--ahs-s5);
  margin-top: var(--ahs-s8);
  border-top: 4px solid var(--ahs-crimson);
  text-align: center;
}
.ahs-footer img  { max-width: 180px; height: auto; margin-bottom: var(--ahs-s4); }
.ahs-footer p    { color: var(--ahs-white); margin: 0 0 var(--ahs-s2); font-size: var(--ahs-size-caption); }
.ahs-footer a    { color: var(--ahs-gold) !important; }   /* 3.9:1 on navy — passes for large/bold */
.ahs-footer__tag {
  font-family: var(--ahs-font-head);
  font-size: var(--ahs-size-h4);
  letter-spacing: .04em;
  color: var(--ahs-gold);
  margin-bottom: var(--ahs-s4) !important;
}


/* ==========================================================================
   15. GRADE-BAND TEMPERATURE
   Same brand. Different warmth. Maps to the school's own
   passenger → navigator → co-pilot → pilot progression.
   ========================================================================== */

/* K-5: gold-forward, larger targets, bigger icons */
.ahs-page--elementary { font-size: var(--ahs-size-body-lg); }
.ahs-page--elementary .ahs-btn      { min-height: 56px; font-size: var(--ahs-size-body-lg); }
.ahs-page--elementary .ahs-card     { border-top-color: var(--ahs-gold); border-top-width: 6px; }
.ahs-page--elementary .ahs-hero::before {
  background: linear-gradient(90deg, rgba(37,46,98,.88) 0%, rgba(37,46,98,.70) 100%);
}
.ahs-page--elementary svg { width: 32px; height: 32px; }

/* 6-8: crimson-forward (the default, essentially) */
.ahs-page--middle .ahs-card { border-top-color: var(--ahs-crimson); }

/* 9-12: navy-forward, denser, quieter */
.ahs-page--high .ahs-card   { border-top-color: var(--ahs-navy); box-shadow: none; }
.ahs-page--high .ahs-hero   { padding: var(--ahs-s7) var(--ahs-s5); }


/* ==========================================================================
   16. RESPONSIVE
   The grid/flex above already handles most of this. These are the
   deliberate mobile overrides.
   ========================================================================== */

@media (max-width: 640px) {

  :root {
    --ahs-size-h1: 1.75rem;    /* 28px */
    --ahs-size-h2: 1.5rem;     /* 24px */
    --ahs-size-h3: 1.1875rem;  /* 19px */
    --ahs-s8: 40px;
    --ahs-s9: 56px;
  }

  .ahs-hero { padding: var(--ahs-s6) var(--ahs-s4); }

  /* Buttons go full-width and stack — no more thumb-missing. */
  .ahs-btn-row      { flex-direction: column; }
  .ahs-btn-row .ahs-btn { width: 100%; }

  .ahs-teacher        { flex-direction: column; align-items: center; text-align: center; }
  .ahs-teacher__photo { width: 120px; height: 120px; }

  /* Tables become stacked cards. Requires data-label on each <td>. */
  .ahs-table--stack thead { position: absolute; left: -9999px; }
  .ahs-table--stack tr {
    display: block;
    margin-bottom: var(--ahs-s4);
    border: var(--ahs-border);
    border-left: var(--ahs-accent-w) solid var(--ahs-navy);
  }
  .ahs-table--stack tbody tr:nth-child(even) { background: var(--ahs-white); }
  .ahs-table--stack td {
    display: flex;
    justify-content: space-between;
    gap: var(--ahs-s4);
    border-bottom: var(--ahs-border);
  }
  .ahs-table--stack td:last-child { border-bottom: 0; }
  .ahs-table--stack td::before {
    content: attr(data-label);
    font-weight: 700;
    font-size: var(--ahs-size-caption);
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ahs-crimson);
    flex-shrink: 0;
  }
}


/* ==========================================================================
   17. ACCESSIBILITY & PRINT
   ========================================================================== */

/* Reverence is the register: no motion, and none for anyone who'd rather not. */
@media (prefers-reduced-motion: reduce) {
  .ahs-page *, .ahs-page *::before, .ahs-page *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* Windows High Contrast Mode: our colored borders vanish, so force them back. */
@media (forced-colors: active) {
  .ahs-callout, .ahs-card, .ahs-btn { border: 1px solid; }
}

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

@media print {
  .ahs-hero { background: none !important; color: var(--ahs-ink) !important; }
  .ahs-hero::before { display: none; }
  .ahs-hero__title, .ahs-hero__sub { color: var(--ahs-ink) !important; }
  .ahs-btn { border: 1px solid var(--ahs-ink); color: var(--ahs-ink) !important; background: none !important; }
}