/* Two-row site header, mobile drawer and search panel.
   Spec: docs/superpowers/specs/2026-10-11-two-row-header-and-search-design.md
   Loaded after style.css, so equal-specificity rules here win. */
:root { --hdr-top: 64px; --hdr-menu: 46px; --hdr-mobile: 56px; }

body { padding-top: calc(var(--hdr-top) + var(--hdr-menu)); }

.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 1030; transition: transform .25s ease; }
.site-header.is-compact { transform: translateY(calc(-1 * var(--hdr-top))); }

.hdr-top { height: var(--hdr-top); background: var(--surface); border-bottom: 1px solid var(--rule); }
.hdr-top-inner { display: flex; align-items: center; gap: 12px; height: 100%; }
.hdr-logo { display: block; flex: 0 0 auto; }
.hdr-logo img { display: block; width: 210px; height: auto; }

.hdr-search { margin-left: auto; flex: 1 1 auto; max-width: 420px; display: flex; align-items: center; gap: 8px; }
.hdr-search-field { position: relative; flex: 1 1 auto; min-width: 0; }
.hdr-search input { width: 100%; height: 38px; padding: 0 12px 0 34px; border: 1px solid var(--rule); border-radius: 6px; font-size: 15px; color: var(--ink); background: var(--surface); }
.hdr-search input:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px var(--navy-tint); }
.hdr-search-glyph { position: absolute; left: 12px; top: 12px; color: var(--muted); pointer-events: none; }
.hdr-search-back { display: none; }

.hdr-account { display: flex; align-items: center; gap: 8px; }
.hdr-account-toggle { display: flex; align-items: center; gap: 6px; color: var(--navy); text-decoration: none; }
.hdr-btn { display: inline-flex; align-items: center; padding: 7px 14px; border-radius: 6px; font-size: 14px; line-height: 1.4; white-space: nowrap; text-decoration: none; }
.hdr-btn-ghost { color: var(--navy); border: 1px solid var(--rule); background: var(--surface); }
.hdr-btn-ghost:hover, .hdr-btn-ghost:focus { color: var(--navy); border-color: var(--navy); text-decoration: none; }
.hdr-btn-cta { color: #fff; background: var(--action); border: 1px solid var(--action); }
.hdr-btn-cta:hover, .hdr-btn-cta:focus { color: #fff; background: var(--action-hover); border-color: var(--action-hover); text-decoration: none; }

.hdr-icon { display: none; flex: 0 0 auto; width: 44px; height: 44px; align-items: center; justify-content: center; background: none; border: 0; font-size: 20px; color: var(--navy); }

.hdr-menu { position: relative; height: var(--hdr-menu); background: var(--navy); }
.hdr-menu .navbar-nav { float: none; display: flex; margin: 0; }
.hdr-menu .navbar-nav > li { float: none; }
.hdr-menu .navbar-nav > li > a { color: #fff; font-size: 15px; line-height: 20px; padding: 13px 14px !important; }
.hdr-menu .navbar-nav > li > a:hover,
.hdr-menu .navbar-nav > li > a:focus,
.hdr-menu .navbar-nav > .open > a,
.hdr-menu .navbar-nav > .open > a:hover,
.hdr-menu .navbar-nav > .open > a:focus { color: #fff; background: var(--navy-deep); }
.hdr-menu .navbar-nav > .active > a { box-shadow: inset 0 -3px 0 var(--orange); }
.hdr-drawer-head, .hdr-drawer-foot, .hdr-backdrop { display: none; }

/* Tablet: search becomes an icon that opens the full-screen panel; the menu
   row scrolls sideways instead of wrapping. */
@media (max-width: 991px) {
  .hdr-top .hdr-search { display: none; }
  .hdr-search-open { display: inline-flex; margin-left: auto; }
  .hdr-menu .navbar-nav { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .hdr-menu .navbar-nav > li > a { font-size: 14px; padding: 13px 10px !important; white-space: nowrap; }

  body.hdr-search-on { overflow: hidden; }
  body.hdr-search-on .hdr-top .hdr-search { display: flex; position: fixed; top: 0; left: 0; right: 0; bottom: 0; max-width: none; margin: 0; padding: 8px 10px; align-items: flex-start; background: var(--surface); z-index: 1070; }
  body.hdr-search-on .hdr-search-back { display: inline-flex; }
  body.hdr-search-on .hdr-suggest { position: static; border: 0; border-radius: 0; max-height: none; min-width: 0; margin-top: 8px; }
}

/* Phone: one bar, the menu becomes a left drawer. */
@media (max-width: 767px) {
  body { padding-top: var(--hdr-mobile); }
  .site-header, .site-header.is-compact { transform: none; }
  .hdr-top { height: var(--hdr-mobile); }
  .hdr-top-inner { gap: 2px; padding: 0 4px; }
  .hdr-icon { display: inline-flex; }
  .hdr-logo { margin-right: auto; }
  .hdr-logo img { width: 150px; }
  .hdr-search-open { margin-left: 0; }
  .hdr-top .hdr-account { display: none; }

  .hdr-menu { position: fixed; top: 0; bottom: 0; left: 0; width: 85%; max-width: 360px; height: auto; background: var(--surface); overflow-y: auto; transform: translateX(-100%); visibility: hidden; transition: transform .25s ease, visibility 0s linear .25s; z-index: 1050; }
  body.hdr-menu-open { overflow: hidden; }
  /* The backdrop lives inside the header, so it covers the top bar too and
     only the drawer (z-index 1050) sits above it. The closed drawer is
     visibility:hidden so Tab and screen readers cannot reach it; the delay
     lets the slide-out finish first. */
  body.hdr-menu-open .hdr-menu { transform: none; visibility: visible; transition-delay: 0s; }
  .hdr-menu-inner { padding: 0; }
  .hdr-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 6px 4px 6px 16px; border-bottom: 1px solid var(--rule); }
  .hdr-drawer-head .hdr-logo { margin-right: 0; }
  .hdr-menu .navbar-nav { display: block; overflow: visible; }
  .hdr-menu .navbar-nav > li > a { color: var(--ink); font-size: 16px; padding: 12px 16px !important; border-bottom: 1px solid var(--navy-tint); }
  .hdr-menu .navbar-nav > li > a:hover,
  .hdr-menu .navbar-nav > li > a:focus,
  .hdr-menu .navbar-nav > .open > a,
  .hdr-menu .navbar-nav > .open > a:hover,
  .hdr-menu .navbar-nav > .open > a:focus { color: var(--ink); background: var(--navy-tint); }
  /* One 16px inset for group headers, items and View all, matching the
     parent labels. */
  .hdr-menu .mega-dropdown-menu .mega-group-head > a,
  .hdr-menu .mega-dropdown-menu > li ul > li > a { padding-left: 16px; padding-right: 16px; }
  /* The group band has a 3px orange left edge; take it out of the padding so
     the text still starts at 16px. */
  .hdr-menu .mega-dropdown-menu .mega-group-head > a { padding-left: 13px; }
  .hdr-menu .open > .dropdown-menu { position: static; float: none; width: auto; border: 0; box-shadow: none; }
  .hdr-drawer-foot { display: flex; flex-wrap: wrap; gap: 8px; padding: 16px; }
  .hdr-drawer-foot .hdr-account { display: flex; }

  .hdr-backdrop { display: block; position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(26, 46, 69, .5); opacity: 0; pointer-events: none; transition: opacity .25s ease; z-index: 1040; }
  body.hdr-menu-open .hdr-backdrop { opacity: 1; pointer-events: auto; }
}

@media (min-width: 768px) {
  .hdr-drawer-foot .hdr-account { display: none; }
}

/* style.css draws a pointer triangle under the open toggle for the old
   single-row bar; it lands on the first group heading in this layout. */
.site-header .open .dropdown-toggle span:after { content: none; }

/* Tall mega menus scroll inside the viewport.
   The header is fixed, so a dropdown taller than the window (Examinations has
   19 groups) used to run off the bottom with no way to reach the rest. The
   panel is capped at the space left under the header, both rows or, once
   compact, the menu row alone, and scrolls on its own.
   A height cap on a multi-column box makes the columns overflow sideways
   rather than down, so above 768px the group list becomes a grid with the
   same column count. Bootstrap's .row clearfix pseudo-elements would become
   grid cells, so they are switched off. Below 768px the drawer keeps its own
   layout: main.js removes #limheight there and these rules are desktop-only. */
@media (min-width: 768px) {
  .hdr-menu .mega-dropdown-menu {
    max-height: calc(100vh - var(--hdr-top) - var(--hdr-menu));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .site-header.is-compact .hdr-menu .mega-dropdown-menu { max-height: calc(100vh - var(--hdr-menu)); }
  .hdr-menu #limheight {
    display: none;
    -webkit-column-count: auto; -moz-column-count: auto; column-count: auto;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 30px;
    align-items: start;
  }
  .hdr-menu .open > #limheight { display: grid; }
  .hdr-menu #limheight.mega-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hdr-menu #limheight.mega-cols-1 { grid-template-columns: minmax(0, 1fr); }
  .hdr-menu #limheight:before, .hdr-menu #limheight:after { content: none; display: none; }
  .hdr-menu #limheight > .mega-group { padding: 0; }
  /* header.js packs the groups down the columns once it has measured them:
     each group spans as many 1px rows as it is tall, so a column has no holes. */
  .hdr-menu #limheight.is-packed { grid-auto-rows: 1px; row-gap: 0; }
}

/* Language picker */
.hdr-lang { position: relative; display: flex; align-items: center; color: var(--navy); }
.hdr-lang .fa-globe { position: absolute; left: 10px; pointer-events: none; }
/* Shared by every public select: native arrow off, a navy chevron sitting
   8px from the right edge, width following the content (full width on phones). */
.hdr-lang-select, .srch-filters select {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  width: auto; max-width: 100%; border: 1px solid var(--rule); border-radius: 6px; padding: 0 28px 0 10px;
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23243E5C' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 10px center;
  background-size: 10px 6px; text-overflow: ellipsis;
}
.hdr-lang-select { height: 36px; padding-left: 30px; color: var(--navy); font-size: 14px; }
.hdr-lang-select:focus, .srch-filters select:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px var(--navy-tint); }
.hdr-lang-drawer { flex: 1 1 100%; }
.hdr-lang-drawer .hdr-lang-select { width: 100%; height: 44px; }
@media (min-width: 768px) { .hdr-lang-drawer { display: none; } }
@media (max-width: 767px) { .hdr-top .hdr-lang { display: none; } }

/* Machine-translation notice, shown only while translated */
.hdr-mt-notice { display: none; padding: 6px 15px; font-size: 13px; text-align: center; color: var(--body); background: var(--navy-tint); border-bottom: 1px solid var(--rule); }
body.is-translated .hdr-mt-notice { display: block; }

/* Hide Google's banner, tooltip and highlight, and undo the offset it puts on
   <body>, so the fixed header stays aligned. */
.goog-te-banner-frame, iframe.skiptranslate, body > .skiptranslate { display: none !important; }
#goog-gt-tt, .goog-te-balloon-frame, .goog-tooltip { display: none !important; }
.goog-text-highlight { background: none !important; box-shadow: none !important; }
body { top: 0 !important; }