/*
 * layout.css — Container, header, nav, footer
 * --------------------------------------------
 * Mobile-first. Tablet at 640px, desktop at 1024px, large at 1280px.
 * All values use tokens from tokens.css.
 */


/* =====================================================================
   SKIP LINK — accessibility helper, visually hidden until focused
   ---------------------------------------------------------------------
   Keyboard / screen-reader users can press Tab once on page load and
   activate this to jump past the sticky header + nav into the main
   content area. Required by WCAG 2.4.1 (Bypass Blocks).
   ===================================================================== */

.skip-link {
  position: fixed;
  top: -100px;                                    /* off-screen until focused */
  left: var(--space-3);
  z-index: var(--z-toast);                        /* sit above sticky header */
  padding: var(--space-2) var(--space-4);
  background: var(--color-primary);
  color: var(--color-text-on-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  border-radius: var(--radius-md);
  transition: top var(--transition-fast);
}
.skip-link:focus {
  top: var(--space-3);                             /* slide into view on focus */
  outline: var(--border-width-strong) solid var(--color-white);
  outline-offset: var(--space-0-5);
}


/* =====================================================================
   CONTAINER — centers content and caps width
   ---------------------------------------------------------------------
   Responsive horizontal padding scales up on larger viewports so content
   never touches the edge of the screen at any size:
       mobile   (<640px):     16px (token default)
       tablet   (640+):       24px
       desktop  (1024+):      32px
       large    (1440+):      48px
   The variable is overridden inside :root media queries so anything else
   that reads --container-padding-x (e.g., the mobile menu) stays in sync.
   ===================================================================== */

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

@media (min-width: 640px) {
  :root { --container-padding-x: 24px; }
}
@media (min-width: 1024px) {
  :root { --container-padding-x: 32px; }
}
@media (min-width: 1440px) {
  :root { --container-padding-x: 48px; }
}


/* =====================================================================
   SITE LAYOUT — sticky footer pattern
   ===================================================================== */

body {
  display: flex;
  flex-direction: column;
}

.site-main {
  flex: 1 0 auto;
  padding-block: var(--space-6) var(--space-12);
}


/* =====================================================================
   HEADER
   ===================================================================== */

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

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-height);
  gap: var(--space-4);
}

@media (min-width: 640px) {
  .site-header__inner { height: var(--header-height-tablet); }
}
@media (min-width: 1024px) {
  .site-header__inner { height: var(--header-height-desktop); }
}

/* Right-side group — wraps nav, Compare CTA, and hamburger so they sit
   together on the right of the header bar. Compare CTA is part of this
   group (not the nav drawer), so it stays visible on every breakpoint. */
.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* Header CTA (Compare) — smaller than the generic .btn so it fits cleanly
   in the header at every breakpoint without dominating. */
.site-header__cta {
  display: inline-flex;
  align-items: center;
  padding: var(--cta-padding-y) var(--cta-padding-x);
  font-family: inherit;
  font-size: var(--font-size-xs);                  /* 12px — matches college card CTA */
  font-weight: var(--font-weight-regular);
  color: var(--color-text-on-accent);
  background: var(--color-accent);
  border: 0;
  border-radius: var(--radius-md);
  text-decoration: none;
  white-space: nowrap;                              /* never wrap "Compare →" */
  line-height: var(--line-height-button);
  transition: background var(--transition-fast);
}
.site-header__cta:hover,
.site-header__cta:focus-visible {
  background: var(--color-primary);
  color: var(--color-text-on-primary);             /* explicit — overrides any global a:hover red */
}

/* Slight bump on desktop so the CTA reads as the primary action. */
@media (min-width: 1024px) {
  .site-header__cta {
    padding: var(--cta-padding-y-lg) var(--cta-padding-x-lg);
    font-size: var(--font-size-sm);                /* 14px */
  }
}

/* Logo */
.site-header__logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.site-header__logo img {
  height: var(--site-logo-height);
  width: auto;
}
@media (min-width: 640px) {
  .site-header__logo img { height: var(--site-logo-height-tablet); }
}
@media (min-width: 1024px) {
  .site-header__logo img { height: var(--site-logo-height-desktop); }
}


/* =====================================================================
   PRIMARY NAVIGATION — desktop default + mobile drawer
   ===================================================================== */

.site-nav {
  /* Mobile: hidden by default, slides in when toggled */
  position: fixed;
  inset: var(--header-height) 0 0 0;
  background: var(--color-white);
  padding: var(--space-6) var(--container-padding-x);
  transform: translateX(100%);
  transition: transform var(--transition-base);
  overflow-y: auto;
  z-index: var(--z-fixed);
}
.site-nav.is-open {
  transform: translateX(0);
}

.site-nav__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
/* Mobile: each top-level item is a full-width row separated by a hairline,
   so the drawer reads as a standard mobile menu. */
.site-nav__item {
  border-bottom: var(--border-width) solid var(--color-border);
}
.site-nav__item:last-child {
  border-bottom: 0;
}

.site-nav__link {
  display: block;
  padding: var(--space-3) var(--space-4);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-lg);
  color: var(--color-text);
  border-radius: var(--radius-md);
  transition: color var(--transition-fast);
}
/* Hover → red. No background change. */
.site-nav__link:hover,
.site-nav__link:focus-visible {
  color: var(--color-accent);
}
/* Active (mouse pressed) → snap back to normal text color. */
.site-nav__link:active {
  color: var(--color-text);
}
/* Current page → red, to indicate where the user is. */
.site-nav__link[aria-current="page"] {
  color: var(--color-accent);
}

/* Desktop: nav becomes inline + right-aligned (link items hug the right
   side of the middle space, sitting next to the Compare CTA). */
@media (min-width: 1024px) {
  .site-nav {
    position: static;
    inset: auto;
    background: transparent;
    padding: 0;
    transform: none;
    overflow: visible;
    z-index: auto;
    flex: 1;
    display: flex;
    justify-content: flex-end;
  }
  .site-nav__list {
    flex-direction: row;
    align-items: center;
    gap: var(--space-1);
  }
  .site-nav__link {
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-base);
  }
  /* Desktop uses hover megas — no mobile row dividers or carets. */
  .site-nav__item { border-bottom: 0; }
  .site-nav__toggle::after { display: none; }
}


/* =====================================================================
   MOBILE MENU TOGGLE (hamburger)
   ===================================================================== */

.menu-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: var(--menu-toggle-size);
  height: var(--menu-toggle-size);
  border-radius: var(--radius-sm);
  gap: var(--space-1-5);
}
.menu-toggle span {
  display: block;
  width: var(--hamburger-bar-width);
  height: var(--space-0-5);
  background: var(--color-secondary);
  border-radius: var(--radius-sm);
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}
.menu-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.menu-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.menu-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media (min-width: 1024px) {
  .menu-toggle { display: none; }
}

/* When mobile menu open, prevent body scroll */
body.has-open-menu { overflow: hidden; }


/* =====================================================================
   DROPDOWN PANELS (header nav)
   ---------------------------------------------------------------------
   Desktop (≥1024px): hover-open dropdowns below each top-nav button.
   Mobile: panels render inline below the toggle inside the drawer.
   Two flavors:
     .dropdown--simple — single-column list (About, etc.)
     .dropdown--mega-* — full mega menus (see mega menu block)
   ===================================================================== */

/* Toggle button — styled to match .site-nav__link visually. */
.site-nav__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  font-family: inherit;
  cursor: pointer;
  padding: var(--space-3) var(--space-4);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-lg);
  color: var(--color-text);
  border-radius: var(--radius-md);
  transition: color var(--transition-fast);
}
.site-nav__toggle:hover,
.site-nav__toggle:focus-visible {
  color: var(--color-accent);
  outline: none;
}
/* Mobile: caret affordance on each expandable section; rotates + section
   label turns red when its panel is open. */
.site-nav__toggle::after {
  content: "";
  flex-shrink: 0;
  width: var(--space-2);
  height: var(--space-2);
  margin-left: var(--space-3);
  border-right: var(--border-width-strong) solid currentColor;
  border-bottom: var(--border-width-strong) solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--transition-fast);
}
.site-nav__item.is-open > .site-nav__toggle {
  color: var(--color-accent);
}
.site-nav__item.is-open > .site-nav__toggle::after {
  transform: rotate(-135deg);
}

/* Mobile-default: panel collapsed inside the drawer, shown when open. Plain —
   no box background/padding; sub-items carry their own padding + dividers.
   (Desktop megas override position/background/padding in the mega block.) */
.dropdown {
  display: none;
}
.site-nav__item--has-dropdown.is-open > .dropdown,
.site-nav__item--has-mega.is-open > .dropdown {
  display: block;
}

/* Mobile: the open section reads as one lavender card inside the white
   drawer — the heading row takes the surface with rounded top corners,
   the expanded panel continues it with rounded bottom corners. Both are
   inset by the same side margin so the card floats off the drawer edges.
   Scoped below 1024px — desktop megas keep their own surface treatment. */
@media (max-width: 1023.98px) {
  /* The card floats: the row dividers that would touch its rounded corners
     (the previous item's border-bottom and the open item's own) are
     suppressed, and the heading row gets a top margin to mirror the
     panel's bottom margin. Without this the hairlines hug the corners
     and the card reads as a rendering glitch. */
  .site-nav__item.is-open,
  .site-nav__item:has(+ .site-nav__item.is-open) {
    border-bottom-color: transparent;
  }
  .site-nav__item--has-dropdown.is-open > .site-nav__toggle,
  .site-nav__item--has-mega.is-open > .site-nav__toggle {
    background: var(--color-lavender-deep);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    margin-top: var(--space-3);
    margin-inline: var(--space-2);
    width: calc(100% - 2 * var(--space-2));
  }
  .site-nav__item--has-dropdown.is-open > .dropdown,
  .site-nav__item--has-mega.is-open > .dropdown {
    background: var(--color-lavender-deep);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    margin: 0 var(--space-2) var(--space-3);
  }
}

.dropdown__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.dropdown__list a {
  display: block;
  padding: var(--space-2) var(--space-2);
  color: var(--color-text);
  text-decoration: none;
  font-size: var(--font-size-sm);
}


@media (min-width: 1024px) {

  /* .site-header__inner becomes the positioning context for the mega
     menu so it spans container width (logo edge → Compare edge), not
     full viewport. Simple --has-dropdown items still anchor to their
     own <li> for the smaller dropdown panel. */
  .site-header__inner {
    position: relative;
  }
  .site-nav__item--has-dropdown {
    position: relative;
  }
  .site-nav__item--has-mega {
    position: static;
  }

  .site-nav__toggle {
    width: auto;
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-base);
  }
  .site-nav__toggle[aria-expanded="true"] {
    color: var(--color-accent);
  }

  /* Dropdown panel — anchored below its parent button. */
  .dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 240px;
    margin: 0;
    padding: var(--space-3);
    background: var(--color-white);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    z-index: var(--z-fixed);
  }

  /* Simple variant — single column of links */
  .dropdown--simple .dropdown__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
  }
  .dropdown--simple .dropdown__list a {
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    transition: background var(--transition-fast), color var(--transition-fast);
  }
  .dropdown--simple .dropdown__list a:hover {
    background: var(--color-offwhite);
    color: var(--color-primary);
  }

  /* (The States dropdown is now a mega — see .dropdown--mega-states
     in the mega menu block below.) */

  /* ───── MEGA MENUS (Colleges + Majors + Programs + Careers + States) ─────
     All five megas span container width (logo edge → Compare button edge)
     because they anchor to .site-header__inner (which is position:
     relative above). Two-column grid: lavender left + white right. */
  .dropdown--mega-colleges,
  .dropdown--mega-majors,
  .dropdown--mega-programs,
  .dropdown--mega-careers,
  .dropdown--mega-states,
  .dropdown--mega-guides,
  .dropdown--mega-about {
    position: absolute;
    top: 100%;
    /* Inset by --container-padding-x on each side so the mega's edges
       line up with the logo (left) and the Compare button (right),
       instead of extending to the .container's outer edge. */
    left: var(--container-padding-x);
    right: var(--container-padding-x);
    width: auto;
    min-width: 0;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    /* Top corners stay flat so the mega visually meets the header's
       bottom edge; only the bottom corners are rounded. */
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
  }
  .dropdown--mega-colleges .dropdown-mega__mobile-extras,
  .dropdown--mega-majors .dropdown-mega__mobile-extras,
  .dropdown--mega-programs .dropdown-mega__mobile-extras,
  .dropdown--mega-careers .dropdown-mega__mobile-extras,
  .dropdown--mega-states .dropdown-mega__mobile-extras,
  .dropdown--mega-guides .dropdown-mega__mobile-extras,
  .dropdown--mega-about .dropdown-mega__mobile-extras {
    display: none;
  }

  /* States mega right column: all 51 states A–Z in 4 balanced columns
     (no region headings) instead of the 3×2 default. Cells start-aligned. */
  .dropdown--mega-states .dropdown-mega__right {
    grid-template-columns: repeat(4, 1fr);
    align-content: start;
  }

  /* Marquee CTA at the bottom of each mega's left column — one tool
     per mega, color matches the global header Compare button so it
     reads unambiguously as a primary action. */
  .dropdown-mega__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    margin-top: var(--space-5);
    padding: var(--space-2-5) var(--space-3);
    background: var(--color-accent);
    color: var(--color-text-on-accent);
    text-decoration: none;
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    text-align: center;
    transition: background var(--transition-fast);
  }
  .dropdown-mega__cta:hover {
    background: var(--color-accent-hover);
    color: var(--color-text-on-accent);
  }

  .dropdown-mega__grid {
    display: grid;
    grid-template-columns: var(--mega-left-col-width) 1fr;
  }

  /* Left column: soft lavender surface, 3 stacked filter groups */
  .dropdown-mega__left {
    background: var(--color-lavender);
    color: var(--color-text);
    padding: var(--space-5);
  }
  .dropdown-mega__left .dropdown-mega__title {
    margin: 0 0 var(--space-2);
    color: var(--color-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
  }
  .dropdown-mega__left .dropdown-mega__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-0-5);
  }
  .dropdown-mega__left .dropdown-mega__list a {
    color: var(--color-text-secondary);
    text-decoration: none;
    font-size: var(--font-size-xs);
    line-height: var(--line-height-base);
    transition: color var(--transition-fast);
  }
  .dropdown-mega__left .dropdown-mega__list a:hover {
    color: var(--color-accent);
  }
  .dropdown-mega__divider {
    margin: var(--space-4) 0;
    border: 0;
    border-top: var(--border-width) solid var(--color-divider-medium);
  }

  /* Right column: white, 6-cell category grid (3 × 2) */
  .dropdown-mega__right {
    background: var(--color-white);
    padding: var(--space-5);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
  }
  .dropdown-mega__right .dropdown-mega__category {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }
  .dropdown-mega__right .dropdown-mega__title {
    margin: 0;
    color: var(--color-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    text-decoration: none;
    transition: color var(--transition-fast);
  }
  .dropdown-mega__right .dropdown-mega__title:hover {
    color: var(--color-accent);
  }
  .dropdown-mega__right .dropdown-mega__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-0-5);
  }
  .dropdown-mega__right .dropdown-mega__list a {
    color: var(--color-text-secondary);
    text-decoration: none;
    font-size: var(--font-size-xs);
    line-height: var(--line-height-base);
    transition: color var(--transition-fast);
  }
  .dropdown-mega__right .dropdown-mega__list a:hover {
    color: var(--color-primary);
  }

  /* Majors + Programs + Careers megas reuse the Colleges right-column
     layout (.dropdown-mega__right defaults to repeat(3, 1fr)). Cells
     start-aligned so shorter categories don't get stretched to the
     tallest cell's height. About handles its own row sizing below so
     the 2 colored rows fill the full right-column height. */
  .dropdown--mega-majors   .dropdown-mega__right,
  .dropdown--mega-programs .dropdown-mega__right,
  .dropdown--mega-careers  .dropdown-mega__right,
  .dropdown--mega-guides   .dropdown-mega__right {
    align-content: start;
  }

  /* Guides mega: cluster headings are labels, not links, on desktop — the
     guide links live beneath each one. Kept as an <a> in markup so it still
     becomes the tappable cluster link on mobile (where sub-links collapse). */
  .dropdown--mega-guides .dropdown-mega__right .dropdown-mega__title {
    pointer-events: none;
    cursor: default;
  }

  /* Guide links stay on a single line — long titles truncate with an ellipsis
     instead of wrapping. Truncation lives on the <li> so the <a> keeps the
     exact inline rendering (and row spacing) of every other mega's links.
     min-width:0 lets the grid cell shrink so the ellipsis engages. */
  .dropdown--mega-guides .dropdown-mega__category {
    min-width: 0;
  }
  .dropdown--mega-guides .dropdown-mega__right .dropdown-mega__list li {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  /* About mega right column — 3×2 grid of cells, each with title +
     2-line description. Cells fill the full right container edge-to-
     edge with NO gap, and each cell gets its own pastel tint from the
     6 category-bg tokens (same palette used by the homepage tools-
     bento). Color does all the visual separation — no dividers, no
     card borders, no hover effects. Cell remains fully clickable. */
  .dropdown--mega-about .dropdown-mega__right {
    background: transparent;
    padding: 0;
    gap: 0;
    /* 2 equal-height rows (3×2): top 3 cells, bottom 3 cells, filling the
       full right-column height to match the left column. */
    grid-template-rows: 1fr 1fr;
  }
  .dropdown-mega__about-cell {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-4);
    text-decoration: none;
    color: var(--color-text);
  }
  /* Per-cell pastel tint. 6 cells in a 3×2 — Row 1: About Us / Explore Guides /
     College Rankings. Row 2: Top Findings / Browse Topics / Contact Us. Colors
     are decorative — a left-to-right, top-to-bottom flow. */
  .dropdown-mega__about-cell:nth-child(1) { background: var(--color-cat-humanities-bg); }  /* About Us — soft purple */
  .dropdown-mega__about-cell:nth-child(2) { background: var(--color-cat-stem-bg); }        /* Explore Guides — soft blue */
  .dropdown-mega__about-cell:nth-child(3) { background: var(--color-cat-health-bg); }      /* College Rankings — soft teal */
  .dropdown-mega__about-cell:nth-child(4) { background: var(--color-cat-business-bg); }    /* Top Findings — soft green */
  .dropdown-mega__about-cell:nth-child(5) { background: var(--color-cat-social-bg); }      /* Browse Topics — soft yellow */
  .dropdown-mega__about-cell:nth-child(6) { background: var(--color-cat-trades-bg); }      /* Contact Us — soft pink */
  .dropdown-mega__about-title {
    color: var(--color-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-snug);
  }
  .dropdown-mega__about-desc {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    line-height: var(--line-height-base);
  }

}


/* Mobile-only behavior for all 6 mega menus (Colleges, Majors, Programs,
   Careers, States, About) below 1024px: left column hides, the right
   column's sub-link lists / descriptions hide, and each category/region/
   page headline becomes a direct link. Colleges + States show two
   mobile-only "extras" appended below — Colleges needs them to reach
   8 mobile links; States needs them because 4 region titles alone is
   sparse. About's mobile rules sit in a sub-block at the bottom of the
   media query because its right-column markup uses different class
   names (.dropdown-mega__about-cell, not .dropdown-mega__category). */
@media (max-width: 1023.98px) {
  .dropdown--mega-colleges .dropdown-mega__left,
  .dropdown--mega-majors   .dropdown-mega__left,
  .dropdown--mega-programs .dropdown-mega__left,
  .dropdown--mega-careers  .dropdown-mega__left,
  .dropdown--mega-states   .dropdown-mega__left,
  .dropdown--mega-guides   .dropdown-mega__left {
    display: none;
  }
  .dropdown--mega-colleges .dropdown-mega__right .dropdown-mega__list,
  .dropdown--mega-majors   .dropdown-mega__right .dropdown-mega__list,
  .dropdown--mega-programs .dropdown-mega__right .dropdown-mega__list,
  .dropdown--mega-careers  .dropdown-mega__right .dropdown-mega__list,
  .dropdown--mega-states   .dropdown-mega__right .dropdown-mega__list,
  .dropdown--mega-guides   .dropdown-mega__right .dropdown-mega__list {
    display: none;
  }
  .dropdown--mega-colleges .dropdown-mega__right,
  .dropdown--mega-majors   .dropdown-mega__right,
  .dropdown--mega-programs .dropdown-mega__right,
  .dropdown--mega-careers  .dropdown-mega__right,
  .dropdown--mega-states   .dropdown-mega__right,
  .dropdown--mega-guides   .dropdown-mega__right {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  /* Sub-items: plain rows with a hairline divider between them. */
  .dropdown--mega-colleges .dropdown-mega__category,
  .dropdown--mega-majors   .dropdown-mega__category,
  .dropdown--mega-programs .dropdown-mega__category,
  .dropdown--mega-careers  .dropdown-mega__category,
  .dropdown--mega-states   .dropdown-mega__category,
  .dropdown--mega-guides   .dropdown-mega__category {
    padding: var(--space-3) var(--space-4);
    border-bottom: var(--border-width) solid var(--color-border);
  }
  .dropdown .dropdown-mega__category:last-child { border-bottom: 0; }
  /* States mega has no region titles to collapse on mobile (desktop is a flat
     A–Z grid). Hide the state columns so they don't render as empty rows; the
     "All 50 States" mobile extra carries navigation. */
  .dropdown--mega-states .dropdown-mega__category {
    display: none;
  }
  .dropdown--mega-colleges .dropdown-mega__title,
  .dropdown--mega-majors   .dropdown-mega__title,
  .dropdown--mega-programs .dropdown-mega__title,
  .dropdown--mega-careers  .dropdown-mega__title,
  .dropdown--mega-states   .dropdown-mega__title,
  .dropdown--mega-guides   .dropdown-mega__title {
    display: block;
    padding: 0;
    margin: 0;
    color: var(--color-text);
    text-decoration: none;
    font-size: var(--font-size-base);
  }
  .dropdown--mega-colleges .dropdown-mega__mobile-extras,
  .dropdown--mega-states   .dropdown-mega__mobile-extras,
  .dropdown--mega-guides   .dropdown-mega__mobile-extras {
    list-style: none;
    margin: 0;
    padding: 0;
    display: block;
  }
  .dropdown--mega-colleges .dropdown-mega__mobile-extras a,
  .dropdown--mega-states   .dropdown-mega__mobile-extras a,
  .dropdown--mega-guides   .dropdown-mega__mobile-extras a {
    display: block;
    padding: var(--space-3) var(--space-4);
    border-bottom: var(--border-width) solid var(--color-border);
    color: var(--color-text);
    text-decoration: none;
    font-size: var(--font-size-base);
  }
  .dropdown .dropdown-mega__mobile-extras li:last-child a { border-bottom: 0; }

  /* About mega mobile — matches the standard 5-mega pattern now that
     the navigation lives in the right column. Left (tools) hides; the
     6 right-column cells re-flow as a flat list of title links. The
     2-line descriptions + pastel cell tints + equal-height row grid
     are all scoped to the desktop @media above, so they don't apply
     here — no reset needed for them on mobile. */
  .dropdown--mega-about .dropdown-mega__left {
    display: none;
  }
  .dropdown--mega-about .dropdown-mega__about-desc {
    display: none;
  }
  .dropdown--mega-about .dropdown-mega__right {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .dropdown--mega-about .dropdown-mega__about-cell {
    padding: var(--space-3) var(--space-4);
    border-bottom: var(--border-width) solid var(--color-border);
  }
  .dropdown--mega-about .dropdown-mega__about-cell:last-child { border-bottom: 0; }
  .dropdown--mega-about .dropdown-mega__about-title {
    color: var(--color-text);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-regular);
  }
}


/* =====================================================================
   FOOTER
   ===================================================================== */

/* Outer wrapper — dark surface using --color-secondary (near-black, the
   "secondary" brand tone). White text on top, muted variants for legal
   copy at the bottom. */
.site-footer {
  background: var(--color-secondary);
  color: var(--color-on-dark-text-strong);
  padding-block: var(--space-12) var(--space-6);
  flex-shrink: 0;
}

.site-footer__inner {
  /* .container provides max-width + padding-inline already */
}

/* Brand top — logo on the left, social icons on the right at tablet+.
   Stacks vertically (logo above, social below, both centered) on mobile.
   A divider below (site-footer__divider--top) separates this row from
   the 5-column link grid. */
.site-footer__brand-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}
@media (min-width: 640px) {
  .site-footer__brand-top {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

.site-footer__logo {
  display: inline-block;
  text-decoration: none;
  line-height: 0;   /* prevents extra space below the inline img */
}
/* The logo SVG is hardcoded navy; invert + brightness flips it to white
   for use on the dark footer surface. Keeps a single SVG asset working
   on both the light header and the dark footer. */
.site-footer__logo img {
  display: block;
  height: var(--site-footer-logo-height);
  width: auto;
  filter: brightness(0) invert(1);
}

/* Social icons — circular buttons on a subtle white tint. Use the
   existing on-dark-surface tokens so the buttons match the visual
   language of the navy hero / final CTA pill row. */
.site-footer__social {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--social-btn-size);
  height: var(--social-btn-size);
  border-radius: var(--radius-full);
  color: var(--color-on-dark-text-medium);
  background: var(--color-on-dark-surface);
  transition: color var(--transition-fast), background var(--transition-fast);
}
.site-footer__social a:hover,
.site-footer__social a:focus-visible {
  color: var(--color-text-on-primary);
  background: var(--color-on-dark-surface-hover);
  outline: none;
}
.site-footer__social svg {
  width: var(--icon-size-md);
  height: var(--icon-size-md);
  /* Each <symbol> in the sprite uses fill="currentColor", so icons take
     their color from the parent <a>'s `color` rule (defined above).
     Hover and focus states transition naturally with no filter hack. */
}

/* Footer link grid — 1 col mobile → 2 col tablet → 5 per row desktop. */
.site-footer__cols {
  display: grid;
  gap: var(--space-8);
  grid-template-columns: 1fr;
}
/* Mobile (single-column stack): every section gets a hairline below it,
   matching the uniform divider rhythm (24px each side). The last section
   of each row group skips it — the explicit row divider sits there. */
@media (max-width: 639.98px) {
  .site-footer__cols {
    gap: var(--space-6);
  }
  .site-footer__col {
    border-bottom: var(--border-width) solid var(--color-on-dark-divider);
    padding-bottom: var(--space-6);
  }
  .site-footer__cols .site-footer__col:last-child {
    border-bottom: 0;
    padding-bottom: 0;
  }
}
@media (min-width: 640px) {
  .site-footer__cols {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .site-footer__cols {
    grid-template-columns: repeat(5, 1fr);
  }
  /* Row 1 carries six columns (Useful Links / Colleges / Majors / Programs /
     Careers / States); tighter gap keeps the short link lists comfortable. */
  .site-footer__cols--six {
    grid-template-columns: repeat(6, 1fr);
    gap: var(--space-6);
  }
  /* Mixed row (Tools / Guides / Topics / Rankings / Findings): equal
     fifths on narrow desktops (some wrapping tolerated), tighter gap. */
  .site-footer__cols--mixed {
    gap: var(--space-6);
  }
}
/* Full desktop: the Rankings / Findings columns size to their longest
   anchor (max-content) so page-title links never wrap; the three short
   columns share the remaining width. Measured fit needs ~1100px of track
   space, hence the 1280px gate + the tighter gap. */
@media (min-width: 1280px) {
  .site-footer__cols--mixed {
    grid-template-columns: 1fr 1.15fr 1.4fr max-content max-content;
    gap: var(--space-5);
  }
}

/* Column heading — Title Case at 20px, white on the dark footer surface. */
.site-footer__heading {
  margin: 0 0 var(--space-3);
  color: var(--color-text-on-primary);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-regular);
}

/* Link list */
.site-footer__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1-5);
}
.site-footer__list a {
  color: var(--color-on-dark-text-medium);
  text-decoration: none;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-light);
  transition: color var(--transition-fast);
}
.site-footer__list a:hover,
.site-footer__list a:focus-visible {
  color: var(--color-text-on-primary);
  outline: none;
}
/* Sub-list separated from the main list by a top margin + thin rule.
   Used in column 4 to set "Contact Us" apart from the other resources. */
.site-footer__list--separated {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: var(--border-width) solid var(--color-on-dark-divider);
}

/* About / legal strip — the former About column as one horizontal,
   centered, wrapping row of links between the link grid and the legal
   band. Link styling matches the column lists. */
.site-footer__inline-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2) var(--space-8);
}
.site-footer__inline-links a {
  color: var(--color-on-dark-text-medium);
  text-decoration: none;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-light);
  transition: color var(--transition-fast);
}
.site-footer__inline-links a:hover,
.site-footer__inline-links a:focus-visible {
  color: var(--color-text-on-primary);
  outline: none;
}

/* Footer dividers — ONE uniform spacing for every divider in the footer
   (logo/grid, between grid rows, around the About strip, inside the legal
   block) so the vertical rhythm reads consistent top to bottom. */
.site-footer__divider {
  margin: var(--space-6) 0;
  border: 0;
  border-top: var(--border-width) solid var(--color-on-dark-divider);
}

/* Sub-footer legal block — centered, vertical stack */
.site-footer__legal {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  text-align: center;
}

/* Bottom row of the legal block: copyright on the left, last-refresh
   on the right at tablet+. Stacks centered on mobile. */
.site-footer__legal-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
}
@media (min-width: 640px) {
  .site-footer__legal-bottom {
    flex-direction: row;
    justify-content: space-between;
    align-items: baseline;
  }
}
.site-footer__copyright,
.site-footer__disclaimer,
.site-footer__updated {
  margin: 0;
  font-size: var(--font-size-xs);
  line-height: var(--line-height-base);
}
.site-footer__copyright { color: var(--color-on-dark-text-medium); }
.site-footer__disclaimer,
.site-footer__updated   { color: var(--color-on-dark-text-soft); }