/* ============================================================
   PrepBenchmark · layout.css
   Page structure: header, hero, sections, footer. Load FOURTH.
   Mobile-first; desktop at 900px.
   ============================================================ */

.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section { padding-block: var(--space-7); }
.section--tight { padding-block: var(--space-6); }
.section-head {
  display: flex;
  flex-wrap: wrap;
  /* The heading side is a stack (eyebrow, h2, lede), so the trailing link sits on
     the last line rather than riding up to the eyebrow's baseline. */
  align-items: end;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}
.section-head h2 { margin-bottom: var(--space-2); }
.section-head__lede { margin: 0; font-size: var(--fs-sm); color: var(--color-ink-muted); max-width: 45rem; }

/* ============ Header ============ */
/* Offer bar + header pin together on scroll (Denny's sticky top bar). */
.site-top { position: sticky; top: 0; z-index: 50; }

.offer-bar {
  background: var(--color-navy-2);
  color: var(--color-ink-on-navy);
  font-size: var(--fs-xs);
  border-bottom: 1px solid rgba(245, 242, 233, 0.10);
}
.offer-bar__inner {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: var(--space-1);
}
.offer-bar__msg { margin: 0; text-align: center; }
.offer-bar__msg a { color: var(--color-gold); font-weight: 600; text-decoration: none; white-space: nowrap; }
.offer-bar__msg a:hover { text-decoration: underline; }

.site-header {
  background: var(--color-navy);
  color: var(--color-ink-on-navy);
  position: relative; /* anchor for the mobile nav panel */
  z-index: 50;        /* keep the header + its dropdowns above page content */
}

/* Persistent category bar (always-visible mega, Option 1) */
.cat-bar { background: var(--color-navy-2); border-top: 1px solid rgba(245, 242, 233, 0.08); font-size: var(--fs-sm); }
.cat-bar__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 44px; flex-wrap: wrap; }
.cat-bar__group { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.cat-bar__label { color: var(--color-gold); font-weight: 600; font-size: var(--fs-xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; }
.cat-bar a { color: var(--color-ink-on-navy-2); text-decoration: none; font-weight: 500; }
.cat-bar a:hover { color: var(--color-ink-on-navy); }
@media (max-width: 1023px) {
  .cat-bar__inner { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; }
  .cat-bar__group--right { display: none; }
}
.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-height: 64px;
  padding-block: var(--space-2);
}
.site-header .brand { margin-right: auto; }

/* Primary nav */
.site-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: var(--space-5);
}
.site-nav a {
  display: inline-block;
  white-space: nowrap;
  padding: var(--space-2) 0;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--color-ink-on-navy-2);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.site-nav a:hover { color: var(--color-ink-on-navy); }
.site-nav a[aria-current="page"] {
  color: var(--color-ink-on-navy);
  font-weight: 600;
  border-bottom-color: var(--color-ink-on-navy);
}

/* Mega-menu dropdowns (CSS only: hover + keyboard focus) */
.nav-item { position: relative; }
.caret {
  display: inline-block; width: 0; height: 0; margin-left: 5px;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid currentColor; vertical-align: middle;
  transition: transform var(--transition);
}
.mega {
  position: absolute; top: 100%; left: 0; z-index: 60;
  margin-top: var(--space-1);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: var(--space-5);
  opacity: 0; visibility: hidden; transform: translateY(4px);
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
}
/* Wide multi-column mega panel */
.mega a { color: var(--color-navy); white-space: normal; border-bottom: none; }
.mega--wide { width: min(92vw, 620px); }
/* Single-column panel for short menus such as About */
.mega--narrow { width: min(92vw, 300px); padding: var(--space-4); }
.mega--right { left: auto; right: 0; }
.mega__grid { display: grid; grid-template-columns: 1fr 1fr 1.15fr; gap: var(--space-5); }
.mega__head {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--tracking-caps);
  text-transform: uppercase; color: var(--color-gold-text);
}
.mega .mega__item { display: block; padding: var(--space-2); border-radius: var(--radius-sm); }
.mega .mega__item:hover { background: var(--color-bg); }
.mega a:hover { color: var(--color-navy); } /* keep dark on hover; beats .site-nav a:hover */
.mega__item-title { display: block; font-weight: 600; font-size: var(--fs-sm); line-height: 1.3; }
.mega__item-sub { display: block; font-size: var(--fs-xs); color: var(--color-ink-muted); }
.mega__feat { border-left: 1px solid var(--color-border); padding-left: var(--space-5); }
.mega__feat-row { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
.mega__feat-name { display: block; font-weight: 600; color: var(--color-navy); font-size: var(--fs-sm); }
.mega__feat-word { display: block; font-size: var(--fs-xs); color: var(--color-gold-text); }
.mega__feat-desc { margin: 0 0 var(--space-3); font-size: var(--fs-sm); color: var(--color-ink-muted); line-height: 1.5; }
.mega .link-arrow { color: var(--color-navy-2); }
.nav-item:hover > .mega, .nav-item:focus-within > .mega {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.nav-item:hover > a .caret, .nav-item:focus-within > a .caret { transform: rotate(180deg); }

/* Desktop header needs ~1020px to fit nav + search + Dashboard in one row,
   so the mobile toggle applies below 1024px. */

.nav-toggle { position: absolute; opacity: 0; }
.nav-toggle-label {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.nav-toggle-label span {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: var(--color-ink-on-navy);
  transition: transform var(--transition), opacity var(--transition);
}
.nav-toggle:focus-visible + .nav-toggle-label {
  outline: 2px solid var(--focus-on-dark);
  outline-offset: 2px;
}

@media (max-width: 1023px) {
  .nav-toggle-label { display: flex; order: 10; }
  .site-header__inner { flex-wrap: wrap; }
  /* Open the nav as an absolute panel below the header row, NOT as an in-flow
     wrapped flex line. In-flow it grew .site-header__inner past its 64px min-height,
     which un-centered the logo/hamburger and lifted them a couple of pixels when the
     menu opened (the "jump"). Absolute keeps the header row a constant 64px. */
  .site-nav {
    order: 20;
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-navy);
    padding: var(--space-3) var(--gutter) var(--space-4);
    border-top: 1px solid rgba(245, 242, 233, 0.15);
  }
  .nav-toggle:checked ~ .site-nav {
    display: block;
    max-height: calc(100dvh - 112px); /* below the offer bar + header row */
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  /* Lock the page behind the open menu so scrolling moves the menu, not the page */
  html:has(.nav-toggle:checked) { overflow: hidden; }
  .site-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .site-nav a { display: block; padding: var(--space-3) var(--space-2); border-bottom: none; }
  .site-nav a[aria-current="page"] { border-left: 3px solid var(--color-ink-on-navy); padding-left: var(--space-3); }
  .nav-toggle:checked + .nav-toggle-label span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle:checked + .nav-toggle-label span:nth-child(2) { opacity: 0; }
  .nav-toggle:checked + .nav-toggle-label span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .site-header .search-form { display: none; } /* search folds away on small screens */
  /* Mega-menus collapse to a stacked list inside the mobile menu */
  .mega {
    position: static; opacity: 1; visibility: visible; transform: none;
    width: auto; background: transparent; border: none; box-shadow: none;
    padding: 0 0 0 var(--space-4); margin: 0;
  }
  .mega__grid { grid-template-columns: 1fr; gap: var(--space-1); }
  .mega a { color: var(--color-ink-on-navy-2); }
  .mega .mega__item { padding: var(--space-2) var(--space-2); }
  .mega .mega__item:hover { background: transparent; color: var(--color-ink-on-navy); }
  .mega__head { color: var(--color-ink-on-navy-2); margin-top: var(--space-2); }
  .mega__item-sub, .mega__feat { display: none; }
  .caret { display: none; }
}

/* ============ Hero ============ */
.hero {
  position: relative;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  overflow: hidden;
}
.hero__inner {
  display: grid;
  gap: var(--space-6);
  padding-block: var(--space-7) var(--space-7);
  position: relative;
  z-index: 1;
}
/* Denny asked for the grid to split below the breadcrumb, so the image lines up
   with the eyebrow and heading rather than riding up beside the breadcrumb. The
   breadcrumb spans every column as its own row, which needs no change to the
   container or its padding. */
.hero__inner > .breadcrumb { grid-column: 1 / -1; margin-bottom: 0; }
.hero__copy { max-width: 34rem; }
/* An in-flow hero image, sitting in the second column of .hero__inner. Distinct
   from .hero__media below, which is an absolutely positioned masked backdrop and
   would fade the photograph out. Width is set here because that grid column is
   `auto` and would otherwise take the image's own 1600px. object-fit crops per
   breakpoint: a wide band on a phone, a taller panel beside the copy on desktop. */
.hero__figure { display: block; margin: 0; }
.hero__figure img { display: block; width: 100%; height: auto; border-radius: var(--radius-lg); }
@media (min-width: 900px) {
  .hero__figure { width: 30rem; max-width: 100%; }
  .hero__figure img { height: 20rem; object-fit: cover; }
}
.hero h1 { font-size: clamp(var(--fs-2xl), 5vw, var(--fs-3xl)); margin-bottom: var(--space-4); }
.hero__lede { font-size: var(--fs-md); color: var(--color-ink-muted); margin-bottom: var(--space-5); max-width: 30rem; }
/* Longer approved ledes (the articles hub) need a wider measure than the 30rem
   default, which was set for one-line hero copy. */
.hero__lede--wide { max-width: 46rem; }
/* The bottom margin exists to separate the lede from content below it inside the
   same section. Where the lede closes the section, it only adds dead space on top
   of the next section's own padding. */
.hero__lede:last-child { margin-bottom: 0; }
/* Buttons need room from the copy above them, and from each other. */
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); margin-top: var(--space-5); }
.hero__media {
  position: absolute;
  inset: 0 0 0 auto;
  width: 46%;
  z-index: 0;
  display: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 55%);
  mask-image: linear-gradient(90deg, transparent, #000 55%);
}
.hero__media .img-placeholder { height: 100%; border: none; border-radius: 0; }

/* Hero score card */
.score-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-5);
  max-width: 21rem;
}
.score-card__exam {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-ink-muted);
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}
.score-card__rank {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-gold-text);
  margin-bottom: var(--space-1);
}
.score-card__name { font-family: var(--font-serif); font-weight: 700; font-size: var(--fs-xl); color: var(--color-navy); margin-bottom: var(--space-4); }
.score-card__row { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-5); }
.score-card__meta { display: grid; gap: var(--space-2); }
.score-card__meta small { color: var(--color-ink-muted); font-weight: 500; }
.score-card .btn { width: 100%; }

@media (min-width: 900px) {
  .hero__inner { grid-template-columns: 1fr auto; align-items: center; }
  .hero__media { display: block; }
}

/* ============ Why Trust panel ============ */
.trust-panel {
  display: grid;
  gap: var(--space-5);
}
.trust-panel .card { display: grid; gap: var(--space-4); align-content: start; }
@media (min-width: 900px) {
  .trust-panel { grid-template-columns: 1fr 1fr; align-items: start; }
}

/* ============ Report CTA card ============ */
.report-card {
  background: var(--color-navy);
  border-radius: var(--radius-lg);
  color: var(--color-ink-on-navy);
  padding: var(--space-6);
  display: grid;
  gap: var(--space-4);
}
.report-card h2 { color: var(--color-ink-on-navy); }
.report-card p { color: var(--color-ink-on-navy-2); max-width: 34rem; }
@media (min-width: 720px) {
  .report-card { grid-template-columns: 1fr auto; align-items: center; }
}

/* ============ Review page ============ */
.review-header {
  background: var(--color-navy);
  color: var(--color-ink-on-navy);
  padding-block: var(--space-7);
}
.review-header__inner {
  display: grid;
  gap: var(--space-6);
  align-items: center;
}
.review-header h1 { color: var(--color-ink-on-navy); font-size: clamp(var(--fs-xl), 4vw, var(--fs-2xl)); }
.review-header__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
.review-header__verdict { color: var(--color-ink-on-navy-2); max-width: 38rem; margin-top: var(--space-4); }
.review-header__score {
  display: grid;
  justify-items: center;
  gap: var(--space-2);
  padding: var(--space-5);
  background: var(--color-navy-2);
  border-radius: var(--radius-lg);
}
@media (min-width: 900px) {
  .review-header__inner { grid-template-columns: 1fr auto; }
}

.review-layout {
  display: grid;
  gap: var(--space-6);
  padding-block: var(--space-7);
}
.review-main { display: grid; gap: var(--space-6); align-content: start; }
.review-aside { display: grid; gap: var(--space-5); align-content: start; }
@media (min-width: 900px) {
  .review-layout { grid-template-columns: minmax(0, 1fr) 320px; }
}

/* Breadcrumb */
.breadcrumb { font-size: var(--fs-sm); color: var(--color-ink-muted); margin-bottom: var(--space-4); }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2); padding: 0; }
.breadcrumb li + li::before { content: "\203A"; margin-right: var(--space-2); opacity: 0.6; }
.breadcrumb a { color: var(--color-navy-2); text-decoration-color: rgba(17,34,64,0.3); }
.breadcrumb a:hover { color: var(--color-navy); }
/* On navy surfaces (e.g. the review header) the breadcrumb goes light. */
.on-dark .breadcrumb { color: var(--color-ink-on-navy-2); }
.on-dark .breadcrumb a { color: var(--color-ink-on-navy-2); text-decoration-color: rgba(245,242,233,0.3); }
.on-dark .breadcrumb a:hover { color: var(--color-ink-on-navy); }

/* ============ Footer ============ */
.site-footer {
  background: var(--color-navy);
  color: var(--color-ink-on-navy);
  margin-top: var(--space-8);
}
.trust-bar {
  display: grid;
  gap: var(--space-5);
  padding-block: var(--space-6);
  border-bottom: 1px solid rgba(245, 242, 233, 0.15);
}
@media (min-width: 720px) { .trust-bar { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .trust-bar { grid-template-columns: repeat(4, 1fr); } }

.site-footer__main {
  display: grid;
  gap: var(--space-6);
  padding-block: var(--space-7);
}
.site-footer__col h4 {
  color: var(--color-ink-on-navy);
  font-size: var(--fs-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--space-3);
}
.site-footer__col ul { list-style: none; padding: 0; display: grid; gap: var(--space-2); }
.site-footer__col a { color: var(--color-ink-on-navy-2); font-size: var(--fs-sm); text-decoration: none; }
.site-footer__col a:hover { color: var(--color-ink-on-navy); text-decoration: underline; }
.site-footer__col p { color: var(--color-ink-on-navy-2); font-size: var(--fs-sm); }
@media (min-width: 900px) {
  .site-footer__main { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
}
.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block: var(--space-5);
  border-top: 1px solid rgba(245, 242, 233, 0.15);
  font-size: var(--fs-xs);
  color: var(--color-ink-on-navy-2);
}