/* ==========================================================================
   Header — two rows.

   Top row  : Support Us / Member Portal, rendered from the Secondary menu and
              styled as buttons. They are links, so they stay menu items rather
              than becoming Customizer button elements; their labels live in
              Appearance > Menus with everything else.
   Main row : lockup left, primary navigation right.

   No sticky behaviour by design.
   ========================================================================== */

/* --- Both rows share the Sandstone band ---------------------------------- */
#masthead .site-top-header-wrap,
#masthead .site-main-header-wrap {
  background: var(--gsjc-surface-alt);
}

/* --- Top row: menu items drawn as buttons --------------------------------
   Measured off the mockup at its 1920 canvas: the header band is 150px, the
   buttons are 61px and sit flush to the very top edge, leaving 89px for the
   main row. Scaled to the 1290px container that is a 43px top row. */
:root {
  --gsjc-header-top-h: 43px;
}

#masthead .site-top-header-wrap .site-header-row {
  min-height: var(--gsjc-header-top-h);
  align-items: stretch;
}

#masthead .site-top-header-wrap .site-header-row-container-inner {
  padding-block: 0;
}

#masthead .secondary-navigation .menu {
  gap: var(--gsjc-space-2xs);
}

#masthead .secondary-navigation .menu > li > a {
  display: inline-flex;
  align-items: center;
  min-height: var(--gsjc-header-top-h);
  padding: 0 1.4rem;
  background: var(--gsjc-accent);
  color: var(--gsjc-umber);
  font-family: var(--gsjc-font-body);
  font-size: var(--gsjc-fs-small);
  font-weight: var(--gsjc-weight-caption);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--gsjc-radius-sm);
  transition: background-color 0.18s var(--gsjc-ease);
}

/* Ochre on Umber is 9.91:1, and stays so on hover: darkening the fill only
   raises it. Never invert this to light text on Ochre - that is 1.95:1. */
#masthead .secondary-navigation .menu > li > a:hover,
#masthead .secondary-navigation .menu > li > a:focus-visible {
  background: var(--gsjc-primary);
  color: var(--gsjc-white);
}

/* --- Main row ------------------------------------------------------------ */
#masthead .site-main-header-wrap .site-header-row {
  min-height: 0;
}

#masthead .site-branding .brand {
  display: inline-flex;
  align-items: center;
  color: var(--gsjc-ink);          /* the inline SVG inherits this */
  text-decoration: none;
}

.gsjc-logo {
  display: block;
  height: auto;
  fill: currentColor;
}

/* The lockup contains the wordmark, so the site title is switched off in the
   Customizer (logo_layout.include = "logo") rather than hidden here — hiding it
   in CSS would leave the name twice in the accessibility tree. */
/* Sizing and alignment both work off the SVG's INK, not its box. Measured from
   the path data: the lockup's ink occupies 62.2% of the viewBox height and
   starts 10.11% of the way in from the left, so the box has real whitespace
   baked into it. Two consequences:
     - the box must be ~1.61x the intended visible height
     - the box must be pulled left by 0.1011 x its width to put the INK on the
       content edge, and width = 2.282 x height, so the pull is 0.2307 x height
   The 2.994 ink ratio computed from the paths matches the mockup's measured
   2.99 exactly, which is what makes these numbers trustworthy. */
.gsjc-logo--header {
  --gsjc-logo-h: clamp(70px, 7.7vw, 111px);
  width: auto;
  height: var(--gsjc-logo-h);
  margin-left: calc(var(--gsjc-logo-h) * -0.2307);
}

#masthead .site-main-header-wrap .site-header-row-container-inner {
  padding-block: var(--gsjc-space-sm);
}

/* The mark is taller than the main row and centres on the FULL header, exactly
   as the mockup draws it: its ink centre sits at y=74 against a header centre
   of 75. Pulling the branding up by half the top row's height moves the centre
   from the main row's midpoint to the whole header's, which is that same
   offset. The top row's left side is empty, so nothing is displaced. */
/* The mark is taller than the row that holds it, exactly as the mockup draws
   it, so the row must NOT reserve its full height or the header inflates - a
   first attempt left it 178px against the mockup's ~112px equivalent.
   .site-branding is therefore given a deliberately short box that the SVG
   overflows symmetrically, and the transform then lifts it by half the top
   row so it centres on the WHOLE header.
   Margin was tried first and does not work: the branding is a flex child of a
   centred row, so a negative margin is partly re-absorbed by the centring. */
@media (min-width: 1025px) {
  #masthead .site-branding {
    display: flex;
    align-items: center;
    height: 2.5rem;
    transform: translateY(calc(var(--gsjc-header-top-h) / -2));
  }
}

#masthead .site-main-header-wrap,
#masthead .site-header-main-section-left,
#masthead .site-branding,
#masthead .site-branding .brand {
  overflow: visible;
}

/* --- Primary navigation -------------------------------------------------- */
#masthead .main-navigation .menu > li > a {
  font-family: var(--gsjc-font-body);
  font-size: var(--gsjc-fs-nav);
  font-weight: var(--gsjc-weight-caption);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gsjc-ink);
  text-decoration: none;
}

/* Hairline between items, as drawn in the mockup: 1px, and 35px tall on the
   1920 canvas against a 12px cap height, so the rule runs well past the text
   rather than matching it. Only BETWEEN items - li + li, never a leading or
   trailing edge. */
#masthead .main-navigation .menu > li + li {
  position: relative;
}

#masthead .main-navigation .menu > li + li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 1.5625rem;
  background: var(--gsjc-rule);
}

#masthead .main-navigation .menu > li > a {
  padding-inline: var(--gsjc-space-md);
}

#masthead .main-navigation .menu > li:last-child > a {
  padding-right: 0;
}

#masthead .main-navigation .menu > li > a:hover,
#masthead .main-navigation .menu > li > a:focus-visible {
  color: var(--gsjc-primary);
}

/* The current page is marked by a rule as well as colour, so it is not
   signalled by hue alone.
   text-decoration rather than a box-shadow or a border: an underline follows
   the TEXT, so it stops at the last glyph instead of running the full width of
   the link's padding. */
#masthead .main-navigation .menu > li.current-menu-item > a,
#masthead .main-navigation .menu > li.current_page_item > a {
  color: var(--gsjc-primary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.55em;
  text-decoration-skip-ink: none;
}

/* --- Mobile -------------------------------------------------------------- */
@media (max-width: 1024px) {
  #masthead .site-top-header-wrap {
    display: none;   /* both rows merge into the drawer; see the mobile menu */
  }
}

/* --- Mobile drawer --------------------------------------------------------
   Kadence colours the drawer's current item with --global-palette-highlight
   via `.mobile-navigation ul li.current-menu-item > a`. That resolves to
   Aubergine, which is a text colour for LIGHT grounds — on the drawer's dark
   panel it measures 1.79:1, so the one item telling you where you are is the
   one item you cannot read.

   Ochre is the answer already used everywhere else this theme puts text on a
   dark ground (the footer, both carousels' focus rings): 9.91:1 on Umber.

   The id is needed. Kadence's rule is (0,2,3) and a class-only override loses
   to it silently, which is the same trap that had already taken the season
   card margins and the Watch heading. */
#mobile-drawer .drawer-inner .mobile-navigation ul li.current-menu-item > a,
#mobile-drawer .drawer-inner .mobile-navigation ul li.current_page_item > a {
  color: var(--gsjc-accent);
}

/* The drawer ground was Kadence's default #090c10 — a cold near-black that is
   not in the palette and sits oddly against the warm Umber footer directly
   below it. Set here rather than in the Customizer so it travels with the
   theme; see docs/kadence-settings.md, which says not to set it there. */
.popup-drawer#mobile-drawer .drawer-inner {
  background: var(--gsjc-surface-invert);
}

.popup-drawer#mobile-drawer {
  --gsjc-focus-ring: var(--gsjc-ochre);
  --gsjc-focus-halo: var(--gsjc-umber);
}

/* 37x31 as Kadence ships it. WCAG 2.5.5 asks 44x44, and this is the single
   most-tapped control on a phone — every page begins with it. Padding rather
   than width, so the glyph does not scale with the hit area. */
#masthead .menu-toggle-open,
.mobile-toggle-open-container .menu-toggle-open {
  min-width: 44px;
  min-height: 44px;
}