/* Chicago YMCA - "menu 1a" header layout.
   Hand-authored. Layers over assets/css/general/header.css, which is GENERATED
   verbatim from ymcachicago.org's main.min.css and must not be hand-edited
   (extract_css.py rewrites it). Everything that departs from the live site's
   one-block header lives here, so a regeneration of header.css never clobbers
   the redesign.

   The shape (from the "Header Menu Options" design canvas, option 1a):
     4px gradient rule
     full-bleed #f5f5f5 utility strip - Join/Register/Camps/Donate/Careers
                                        left, language + account right
     white 64px nav row               - logo left, primary nav, search right
     1px #dcdcdc rule

   Companion markup change: header.php lifts .site-header__top out of
   .site-header__inner-container into its own full-bleed .site-header__utility
   band, so the logo sits in the nav row instead of spanning both. */

:root {
  --header-accent: linear-gradient(72deg, #045da8 66%, #c91f88 100%);
  --header-strip-bg: #f5f5f5;
  --header-strip-border: #e4e4e4;
  --header-rule: #dcdcdc;
  --header-divider: #cfcfcf;
  --header-link: #0060af;
  --header-link-hover: #862889;
  --header-nav-row: 64px;
  --header-strip-row: 38px;
}

/* ------------------------------------------------------------- top rule -- */

.site-header__accent {
  height: 4px;
  background: var(--header-accent);
}

/* The header's own bottom edge. header.css leaves .site-header borderless
   because the old layout ended on the alert bar's shadow. */
.site-header {
  border-bottom: 1px solid var(--header-rule);
}

/* ------------------------------------------------------- utility strip -- */

/* Mobile: these links live in the drawer instead (header.php renders a second
   copy inside #header-nav), so the band would be an empty gray sliver. */
.site-header__utility {
  display: none;
}

@media (min-width: 71.25em) {
  .site-header__utility {
    display: block;
    background: var(--header-strip-bg);
    border-bottom: 1px solid var(--header-strip-border);
  }

  .site-header__top {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-height: var(--header-strip-row);
  }

  /* Utility links take the slack so the language/account group sits right. */
  .top-navigation {
    flex: 1 1 auto;
    justify-content: flex-start;
    gap: 18px;
  }

  .top-navigation__item,
  .top-navigation__item:last-child {
    padding: 0;
  }

  .top-navigation__link,
  .top-helper-navigation__link {
    font-weight: 400;
    letter-spacing: 0.4px;
    color: var(--header-link);
  }

  .top-navigation__link:hover,
  .top-navigation__link:focus,
  .top-helper-navigation__link:hover,
  .top-helper-navigation__link:focus {
    color: var(--header-link-hover);
    text-decoration: none;
  }

  /* Sprite glyphs are filled, not stroked - currentColor tints them to match
     the link the way the design's line icons do. */
  .top-navigation__icon,
  .top-helper-navigation__icon {
    width: 17px;
    height: 17px;
    fill: currentColor;
  }

  .top-navigation__link-text,
  .top-helper-navigation__link-text {
    padding: 0 0 0 8px;
  }

  .top-helper-navigation {
    flex: 0 0 auto;
    align-items: center;
    gap: 18px;
    margin: 0 0 0 20px;
    padding: 0 0 0 20px;
    border-left: 1px solid var(--header-divider);
  }

  .top-helper-navigation__item,
  .top-helper-navigation__item:last-child {
    padding: 0;
  }

  /* The account/cart pill is sized for the old 40px-tall row; keep it inside
     a 38px strip. */
  .top-helper-navigation__link.active.top-helper-navigation__link--account,
  .top-helper-navigation__link.active.top-helper-navigation__link--cart {
    padding: 5px 14px;
  }

  .top-helper-navigation__dropdown {
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.14);
    padding: 6px 0;
    min-width: 140px;
  }

  .top-helper-navigation__dropdown-link {
    display: block;
    padding: 7px 16px;
    font-family: Lato, sans-serif;
    font-size: 0.8125rem;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--header-link);
  }

  .top-helper-navigation__dropdown-link:hover,
  .top-helper-navigation__dropdown-link:focus {
    color: var(--header-link-hover);
  }
}

/* ------------------------------------------------------------- nav row -- */

@media (min-width: 71.25em) {
  .site-header__inner,
  .header-fixed .site-header__inner {
    align-items: center;
    justify-content: flex-start;
    gap: 34px;
    min-height: var(--header-nav-row);
    padding: 0;
  }

  .site-header__logo-container {
    flex: 0 0 auto;
  }

  .site-header-logo,
  .header-fixed .site-header-logo {
    width: auto;
    margin: 0;
  }

  .site-header-logo img {
    display: block;
    height: 50px;
    width: auto;
  }

  .site-header__inner-container {
    flex: 1 1 auto;
    min-width: 0;
    justify-content: center;
  }

  .site-header__bottom {
    justify-content: flex-start;
    gap: 30px;
  }

  .header-navigation,
  .header-navigation[data-expander-target] {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0;
  }

  /* Left-aligned run of five, not spread across the full width. The design is
     drawn at 1440; below that the five labels + search no longer fit at 22px,
     so the run tightens in two steps rather than colliding with the search. */
  .main-navigation > ul {
    justify-content: flex-start;
    gap: 8px;
  }

  .main-navigation > ul > li {
    flex: 0 0 auto;
  }

  .main-navigation > ul > li > a,
  .main-navigation > ul > li > button {
    text-align: left;
    font-size: 1.25rem;
    padding: 10px 30px 10px 0;
  }

  /* The notch that points into the open mega menu, re-aimed at the shorter
     row's bottom edge. */
  .main-navigation > ul > li > a.active > span:after,
  .main-navigation > ul > li > button.active > span:after {
    left: 0;
    top: calc(100% + 7px);
  }
}

@media (min-width: 81.25em) {
  .top-navigation {
    gap: 28px;
  }

  .main-navigation > ul {
    gap: 12px;
  }

  .main-navigation > ul > li > a,
  .main-navigation > ul > li > button {
    padding: 10px 32px 10px 0;
  }

  .main-navigation > ul > li > a.active > span:after,
  .main-navigation > ul > li > button.active > span:after {
    top: calc(100% + 7px);
  }
}

/* The design's own measurements. 87.5em rather than the design's 1440 because
   the media query sees the layout viewport, which a scrollbar puts ~15px under
   window width - at exactly 90em a 1440px window would still get the tight
   scale. */
@media (min-width: 87.5em) {
  .main-navigation > ul {
    gap: 16px;
  }

  .main-navigation > ul > li > a,
  .main-navigation > ul > li > button {
    font-size: 1.375rem;
    padding: 10px 38px 10px 0;
  }
}

/* --------------------------------------------------------------- search -- */

/* The input is square on the live page, and NOT because of load order — it is
   specificity. Gravity Forms' forms.min.css ships

     input[type="text"], input[type="email"], ... { border-radius: 2px }

   which is (0,1,1) and applies to every text input on the page, Gravity Forms'
   own or not. header.css's `.header-search-input { border-radius: 25px }` and
   the desktop 9999px below are both plain classes at (0,1,0), so they lose to
   it no matter which file loads last. Measured on the live page 2026-08-25:
   computed border-radius was 2px at 420px, 1200px and 1440px.

   Two classes puts this at (0,2,0), which beats GF's attribute selector without
   an id dependency or !important. One rule covers every width: the input is
   50px tall throughout, so 25px and 9999px render the same stadium anyway. */
.header-search .header-search-input {
  border-radius: 9999px;
}

/* The #eee tray behind the input. Only visible below the desktop breakpoint —
   header.css sets `background:0 0; padding:0` on .header-search at min-width
   71.25em, so above that there is no tray to round. 35px = the input's 25px
   plus the tray's own 10px padding, so the corners stay concentric.

   header.css owns .header-search's background and padding but is GENERATED from
   ymcachicago.org's main.min.css, so the override belongs here — extract_css.py
   would wipe it there on the next run. */
.header-search {
  border-radius: 35px;
}


@media (min-width: 81.25em) {
  .header-search,
  .header-search[data-expander-target] {
    flex: 0 0 auto;
    width: 190px;
    max-width: 190px;
  }

  /* Geometry from the design system's search-input component (50px tall, 16px
     text, 20px/45px padding, purple 20px glyph). The design canvas drew 42px,
     which is still a pill but reads flat - the DS proportion is the one that
     looks round. The radius lives in the (0,2,0) rule above, not here: at
     (0,1,0) this block could never win it against Gravity Forms. */
  .header-search-input {
    height: 50px;
    padding: 10px 45px 10px 20px;
    font-size: 1rem;
  }

  .header-search-submit {
    right: 20px;
    width: 20px;
    height: 20px;
  }
}

/* ----------------------------------------------------- sticky offsetting -- */

/* Signed in, WordPress fixes its admin bar across the top of the viewport and
   pushes the document clear of it with `html { margin-top: 32px !important }`.
   A position:fixed header is out of flow, so that margin does not move it — it
   stays at top:0 and the bar covers its first 32px. Offsetting by the same
   amount puts it back directly underneath.

   Only this breakpoint needs it. .sticky-header-desktop is the theme's one
   fixed header (header.php ships no .sticky-header-mobile) and header.css only
   fixes it from 71.25em up — comfortably above the 782px where the admin bar
   grows to 46px, and the 600px below which core stops fixing the bar at all.
   Measured 2026-08-31 with core's geometry: header top 0 -> 32, overlap 32 -> 0.

   header.css owns the `top:0` this overrides but is GENERATED from
   ymcachicago.org's main.min.css, so the override belongs here. */
@media (min-width: 71.25em) {
  body.admin-bar .sticky-header-desktop {
    top: 32px;
  }
}

/* site.js sets main's padding-top from the header's measured height; these are
   the no-JS fallbacks, and the header is ~107px now rather than ~170px. */
@media (min-width: 71.25em) {
  .sticky-header-desktop + * {
    padding-top: 107px;
  }
}

@media (min-width: 81.25em) {
  .sticky-header-desktop + * {
    padding-top: 107px;
  }
}