/* ==========================================================================
   SAT SITE PAGES  —  the shared product chrome, added 2026-08-19

   Markup: frontend/partials/header-product.blade.php with $product = 'sat'.
   The blade is shared with IELTS and TOEFL; only the CSS is per-product. See
   that file's header comment for why the split is that way round.

   WHY THIS IS A NEW FILE AND NOT sat.css. public/assets/css/sat.css is the
   standalone exam interface. Its own opening comment says it is "loaded ONLY by
   the SAT layout, which does not include the site chrome" — it styles html/body
   directly and sets a global `* { box-sizing: border-box }`. Loading it on a
   page that DOES carry the site chrome would repaint the ground and restyle the
   footer the layout shares with every other product. So the chrome gets its own
   sheet, which is also the path claudecode/colour-standard.mjs already reserved
   for SAT's site pages.

   COLOURS ARE DELIBERATELY IDENTICAL TO IELTS AND TOEFL, not the 10.16 standard.
   These 13 selectors are the same measured TestGlider chrome that shipped for
   IELTS (10.24) and TOEFL (10.29), inside the same client-directed reversal
   recorded in 10.18. Three products sharing one blade must not render three
   different blues. The 10.16 purple/white/#0051FD standard still governs the SAT
   landing page BODY — the hero, the cards and the CTA below this chrome — which
   is a separate surface and is guarded separately.

   Values are prefix-swapped from the TOEFL block, which is itself the IELTS
   block; claudecode/toefl/toefl-contract.mjs asserts all three stay in step.
   ========================================================================== */

.sat-head { position: sticky; top: 0; z-index: 11; background: #FFFFFF; }
.sat-head-main { border-bottom: 1px solid #E8EAED; }
.sat-head-shell {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 40px;
}
.sat-head-main .sat-head-shell {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 52px;
  padding-top: 6px;
  padding-bottom: 6px;
}

/* The logo keeps app.css's .navbar-logo sizing untouched — 50px. It is the one
   element the client asked not to change, so nothing here sets its size. */
.sat-head-brand { flex: 0 0 auto; text-decoration: none; }

.sat-head-product { font-size: 16px; font-weight: 600; color: #111114; }
.sat-head-partner {
  font-size: 12px;
  color: #8A8C91;
  white-space: nowrap;
}
.sat-head-partner b { color: #36373B; font-weight: 700; }

.sat-head-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}
.sat-head-link {
  font-size: 13px;
  font-weight: 600;
  color: #4A4B4D;
  padding: 6px 16px;
  text-decoration: none;
  border-radius: 9999px;
  transition: color 120ms ease, background-color 120ms ease;
}
a.sat-head-link:hover { color: #175FFC; background: #F7F9FB; }
.sat-head-sep {
  width: 1px;
  height: 12px;
  background: #E8EAED;
  flex: 0 0 auto;
}
.sat-head-purchase {
  background: #175FFC;
  color: #FFFFFF;
  font-weight: 600;
  font-size: 14px;
  padding: 8px 16px;
  border-radius: 9999px;
  border: 0;
  white-space: nowrap;
}
.sat-head-avatar {
  padding: 0;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid #E8EAED;
  background: #FFFFFF;
  color: #175FFC;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  text-decoration: none;
  transition: border-color 120ms ease;
}
.sat-head-avatar:hover { border-color: #B8BCC0; color: #175FFC; }
.sat-head-avatar svg { width: 20px; height: 20px; }

/* Controls with no destination. Deliberately not links: there is no reviews
   table, no community and no purchase flow anywhere in this codebase, and
   pointing them at "#" would advertise pages that do not exist. §10.21. */
.sat-head-link[aria-disabled="true"],
.sat-head-purchase[aria-disabled="true"] { opacity: .45; cursor: default; }

.sat-head :focus-visible { outline: 3px solid #175FFC; outline-offset: 2px; border-radius: 6px; }

/* ---- the sub-nav row ---- */
.sat-subnav { background: #FFFFFF; border-bottom: 1px solid #E8EAED; }
.sat-subnav-row {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scrollbar-width: none;
}
.sat-subnav-row::-webkit-scrollbar { display: none; }

/* SCOPED to .sat-subnav, mirroring .toefl-subnav and .ielts-subnav. `sat-switch`
   is a new name today, but the scoping is kept so that a future legacy view
   cannot be restyled from here by accident — the reason the TOEFL block is
   scoped is exactly that it was not, once. */
.sat-subnav .sat-switch {
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  color: #111114;
  padding: 16px 8px;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color 120ms ease, border-color 120ms ease;
}
.sat-subnav a.sat-switch:hover        { color: #175FFC; }
.sat-subnav .sat-switch[on="yes"]     { color: #175FFC; border-bottom-color: #175FFC; }
.sat-subnav .sat-switch:focus-visible { outline: 3px solid #175FFC; outline-offset: 2px; }
.sat-subnav .sat-switch[aria-disabled="true"] { opacity: .45; cursor: default; }

@media (max-width: 900px) {
  /* the partner lockup and the secondary links are the first things TestGlider
     drops at narrow widths */
  .sat-head-partner,
  .sat-head-link,
  .sat-head-sep { display: none; }
  .sat-head-shell { padding: 0 16px; }
}

/* ---- mobile product header, 2026-09-07 (HANDOFF §10.129) ------------------

   MEASURED in headless Chrome at a 390px mobile viewport, against the live
   page, before this block existed: /sat/mock-tests overflowed the document by
   31px.

   The cause of that 31px is `.sat-head-right`. It is a non-wrapping flex row
   holding Reviews / Blog / Community + Purchase + the avatar, and it measured
   143px, which is more than the shell has left beside the 199px brand anchor.

   IT WAS NOT THE ONLY CAUSE ON THIS PAGE, and that is the correction worth
   reading. A second, entirely unrelated offender -- `.lapwrap`, the decorative
   hero laptop, a fixed 400px slot centred in a 390px viewport -- puts the
   document 5px over on its own (13px at 375px). This block fixes the 31px and
   leaves that 5px, so it does NOT get /sat/mock-tests to zero by itself. The
   laptop is fixed in sat-landing.css, where it is defined.

   NOT the sub-nav. `.sat-subnav-row` already carries `overflow-x: auto`, so
   the `.sat-switch` links that appear to hang off-screen are SCROLLABLE
   CONTENT inside it, not document overflow.

   NOT THE SHELL PADDING EITHER. An earlier draft of this block reset
   `.sat-head-shell` to 16px side padding, on the stated theory that it was
   spending 40px a side. It is not: the existing `@media (max-width: 900px)`
   rule already sets `padding: 0 16px`, and the measured value before this
   block was 16px. That rule was a no-op and has been dropped.


   KNOWN LIMIT, MEASURED, NOT FIXED HERE. With the hero laptop fixed, this
   block gets /sat/mock-tests to zero at 390px. It does NOT at 375px (16px
   over) or 320px (70px over), and at those widths the offender is
   `.sat-head-right` -- the product word this block deliberately keeps is 31px
   of that. So the word IS load-bearing below 390px even though it is not at
   390px. Hiding it only under a narrower query, or wrapping the shell the way
   IELTS does, are both open options. Neither is taken here without a decision.
   See HANDOFF §10.129.
   640px because the header is all that changes here and it fits comfortably by
   then. No exam screen is touched, and `exam.css` is not touched (CLAUDE.md
   rule 4). */
@media (max-width: 640px) {
  .sat-head-main .sat-head-shell { gap: 8px; }

  /* Reviews / Blog / Community are the widest items in the row and the least
     load-bearing during a test. Hidden on phones only; they stay in the footer
     and on every larger screen. Scoped to `-head-main` so the sub-nav row,
     which scrolls on its own, keeps all of its links. */
  .sat-head-main .sat-head-link,
  .sat-head-main .sat-head-sep { display: none; }

  /* The partner byline wraps to a second line at this width and pushes the
     header taller than the sticky offset expects. */
  .sat-head-partner { display: none; }

  /* NO `.sat-head-product { display: none }` HERE, DELIBERATELY.

     TOEFL and IELTS both hide the product word at this breakpoint and both
     have a measured reason to. SAT does not. With the links and the byline
     hidden, /sat/mock-tests measures 5px over with the product word shown and
     5px over with it hidden -- identical. The residue was the hero laptop, not
     the word. Hiding it would have cost the header its product name for no
     measured gain, so it stays.

     An earlier draft did hide it here, justified by a "53px OVER" figure that
     does not reproduce: the measured intermediate is 22px on TOEFL and 5px on
     SAT. If a future SAT header genuinely overflows, measure it first. */

  .sat-head-right { gap: 6px; }
  .sat-head-purchase { font-size: 13px; padding: 7px 12px; }
}