/*
 * ACAD1 Review Center: site header (2026-11-10)
 *
 * A slim dark contact bar that scrolls away, over a white navigation bar that stays at the top of
 * the screen. Both bars run the full width of the window; what is inside them lines up with the
 * page frame from 35-frame.css, so the logo sits on the same left edge as every slab below it.
 *
 * Markup: inc/site-header.php. Nothing here styles the old .a1-header markup.
 */
:root {
  --a1-topbar-h:   40px;
  --a1-masthead-h: 76px;
  --a1-z-masthead: 70;   /* above the mobile nav token (60) and the enrolment bar (50) */
}

/* Anchor jumps and keyboard focus land below the sticky bar, not under it. */
html { scroll-padding-top: calc(var(--a1-masthead-h) + 16px); }

/* 10-base.css stops sideways scroll with overflow-x: hidden on html and body. Hidden on both turns
   body into a scroll box of its own, and a sticky bar then sticks to a box that never scrolls.
   "clip" cuts the same overflow without creating that box. Browsers without it keep "hidden". */
@supports (overflow: clip) {
  html, body { overflow-x: clip; }
  /* GP Premium's off-canvas script tags body with this class and sets hidden again. */
  body.offside-js--init { overflow-x: clip; }
}

/* ── Contact bar ───────────────────────────────────────────────────────────────── */
.a1-topbar { background: var(--a1-primary); color: var(--a1-on-dark-80); font-size: var(--a1-meta); }
.a1-topbar__in,
.a1-masthead__in,
.a1-menu__in {
  max-width: calc(var(--a1-frame) + 2 * var(--a1-frame-pad));
  margin-inline: auto;
  padding-inline: calc(var(--a1-frame-pad) + 4px);
  box-sizing: border-box;
}
.a1-topbar__in { display: flex; align-items: center; justify-content: space-between; gap: var(--a1-s-5); min-height: var(--a1-topbar-h); }
.a1-topbar__contact { display: flex; align-items: center; gap: var(--a1-s-4); margin: 0; }
.a1-topbar__label { color: var(--a1-on-dark-70); }
.a1-topbar__links { display: flex; align-items: center; gap: var(--a1-s-5); list-style: none; margin: 0; padding: 0; }
.a1-topbar a {
  display: inline-flex; align-items: center; min-height: var(--a1-topbar-h);
  color: var(--a1-on-dark); text-decoration: none; font-weight: 500;
}
.a1-topbar__contact a { font-variant-numeric: tabular-nums; font-weight: 600; }
.a1-topbar a:hover { text-decoration: underline; text-underline-offset: 4px; }
.a1-topbar :focus-visible { outline: 2px solid var(--a1-contrast); outline-offset: 2px; border-radius: 4px; }

/* ── Navigation bar ────────────────────────────────────────────────────────────── */
.a1-masthead {
  position: sticky; top: 0; z-index: var(--a1-z-masthead);
  background: var(--a1-contrast);
  border-bottom: 1px solid var(--a1-border);
}
/* WordPress' own toolbar sits above the bar for signed-in staff. Under 601px that toolbar scrolls away. */
.admin-bar .a1-masthead { top: 32px; }
@media (max-width: 782px) { .admin-bar .a1-masthead { top: 46px; } }
@media (max-width: 600px) { .admin-bar .a1-masthead { top: 0; } }

/* A soft shadow once the page has moved, so the bar reads as resting above the content. */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .a1-masthead { animation: a1-masthead-lift linear both; animation-timeline: scroll(root); animation-range: 0 96px; }
  }
}
@keyframes a1-masthead-lift { to { box-shadow: 0 10px 28px -18px rgba(23, 22, 20, 0.35); border-bottom-color: transparent; } }

.a1-masthead__in { display: flex; align-items: center; gap: var(--a1-s-6); min-height: var(--a1-masthead-h); }

.a1-brand { display: inline-flex; align-items: center; gap: var(--a1-s-3); flex: none; text-decoration: none; border-radius: var(--a1-r-btn); }
.a1-brand__logo { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; display: block; flex: none; }
.a1-brand__text { display: block; line-height: 1; }
.a1-brand__name { display: block; font-size: 21px; font-weight: 800; letter-spacing: -0.045em; color: var(--a1-primary); }
.a1-brand__sub { display: block; margin-top: 5px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--a1-secondary); }

.a1-nav { flex: 1 1 auto; min-width: 0; align-self: stretch; display: flex; justify-content: center; }
.a1-nav ul { display: flex; align-items: stretch; gap: 2px; list-style: none; margin: 0; padding: 0; }
.a1-nav li { display: flex; margin: 0; }
.a1-nav a {
  position: relative; display: inline-flex; align-items: center;
  padding-inline: 14px;
  font-size: 15px; font-weight: 600; letter-spacing: -0.005em; white-space: nowrap;
  color: var(--a1-text); text-decoration: none;
  transition: color 150ms ease;
}
/* The marker is a bar on the bottom edge of the header: thin on hover, full strength on the current section. */
.a1-nav a::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: -1px; height: 3px;
  border-radius: 3px 3px 0 0; background: var(--a1-accent);
  transform: scaleX(0); transform-origin: left center; transition: transform 180ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.a1-nav a:hover { color: var(--a1-accent); }
.a1-nav a:hover::after { transform: scaleX(1); opacity: 0.35; }
.a1-nav a[aria-current] { color: var(--a1-accent); }
.a1-nav a[aria-current]::after { transform: scaleX(1); opacity: 1; }
.a1-nav a:focus-visible { outline-offset: -4px; border-radius: var(--a1-r-btn); }
@media (prefers-reduced-motion: reduce) { .a1-nav a, .a1-nav a::after { transition: none; } }

.a1-masthead__actions { display: flex; align-items: center; gap: var(--a1-s-3); flex: none; margin-left: auto; }
.a1-masthead__cta { white-space: nowrap; }

/* ── Menu (tablet and phone) ───────────────────────────────────────────────────── */
.a1-menu { display: none; }
.a1-menu > summary { list-style: none; }
.a1-menu > summary::-webkit-details-marker { display: none; }
.a1-menu__toggle {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: var(--a1-target-min); padding-inline: 14px;
  border: 1px solid var(--a1-border-strong); border-radius: var(--a1-r-btn);
  background: var(--a1-contrast); color: var(--a1-text);
  font-size: 15px; font-weight: 700; cursor: pointer; user-select: none;
}
.a1-menu__toggle:hover { border-color: var(--a1-text); }
.a1-menu__icon { position: relative; width: 18px; height: 12px; flex: none; }
.a1-menu__icon::before,
.a1-menu__icon::after,
.a1-menu__icon > span {
  content: ""; position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px; background: currentColor;
  transition: transform 180ms ease, opacity 120ms ease;
}
.a1-menu__icon::before { top: 0; }
.a1-menu__icon > span { top: 5px; }
.a1-menu__icon::after { top: 10px; }
.a1-menu[open] .a1-menu__icon::before { transform: translateY(5px) rotate(45deg); }
.a1-menu[open] .a1-menu__icon > span { opacity: 0; }
.a1-menu[open] .a1-menu__icon::after { transform: translateY(-5px) rotate(-45deg); }
@media (prefers-reduced-motion: reduce) { .a1-menu__icon::before, .a1-menu__icon::after, .a1-menu__icon > span { transition: none; } }

/* The panel hangs from the bottom edge of the sticky bar and scrolls on its own when it is taller than the screen. */
.a1-menu__panel {
  position: absolute; left: 0; right: 0; top: 100%;
  max-height: calc(100vh - var(--a1-masthead-h));
  max-height: calc(100dvh - var(--a1-masthead-h));
  overflow-y: auto; overscroll-behavior: contain;
  background: var(--a1-contrast);
  border-top: 1px solid var(--a1-border); border-bottom: 1px solid var(--a1-border);
  box-shadow: var(--a1-sh-lg);
}
.a1-menu__in { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--a1-s-8); padding-block: var(--a1-s-6) var(--a1-s-7); }
.a1-menu__nav { display: flex; flex-direction: column; }
.a1-menu__nav a {
  display: flex; align-items: center; justify-content: space-between; min-height: 52px;
  border-bottom: 1px solid var(--a1-rule);
  font-size: 17px; font-weight: 600; color: var(--a1-text); text-decoration: none;
}
.a1-menu__nav a:last-child { border-bottom: 0; }
.a1-menu__nav a::after { content: "\2192"; color: var(--a1-border-strong); font-weight: 400; }
.a1-menu__nav a:hover,
.a1-menu__nav a[aria-current] { color: var(--a1-accent); }
.a1-menu__nav a[aria-current]::after { color: var(--a1-accent); }
.a1-menu__aside { display: flex; flex-direction: column; align-items: flex-start; gap: var(--a1-s-2); padding: var(--a1-s-5); border-radius: var(--a1-r-card); background: var(--a1-surface); align-self: start; }
.a1-menu__heading { margin: 0; font-size: var(--a1-meta); font-weight: 600; color: var(--a1-secondary); }
.a1-menu__phone { display: inline-flex; align-items: center; min-height: 40px; font-size: 19px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--a1-text); text-decoration: none; }
.a1-menu__phone:hover { color: var(--a1-accent); }
.a1-menu__small { display: flex; flex-direction: column; margin: var(--a1-s-2) 0 var(--a1-s-3); }
.a1-menu__small a { display: inline-flex; align-items: center; min-height: 40px; font-size: var(--a1-body-sm); color: var(--a1-secondary); }
.a1-menu__aside .a1-btn--block { width: 100%; }

/* ── Breakpoints ───────────────────────────────────────────────────────────────── */
/* Six links, the logo and the button need about 1,060px. Below that the links move into the menu. */
@media (max-width: 1100px) {
  .a1-nav { display: none; }
  .a1-menu { display: block; }
}
/* On phones the contact bar goes (its numbers are in the menu and the bar at the bottom of the screen),
   and so does the header's Enroll button, which the bottom bar repeats. */
@media (max-width: 700px) {
  :root { --a1-masthead-h: 64px; }
  .a1-topbar { display: none; }
  .a1-masthead__cta { display: none; }
  .a1-brand__logo { width: 42px; height: 42px; }
  .a1-brand__name { font-size: 19px; }
  .a1-menu__in { grid-template-columns: minmax(0, 1fr); gap: var(--a1-s-5); padding-block: var(--a1-s-3) var(--a1-s-6); }
  .a1-menu__aside { align-self: stretch; }
}
@media (max-width: 360px) {
  .a1-brand__sub { display: none; }
  .a1-menu__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

@media print {
  .a1-topbar, .a1-masthead { display: none; }
}