/* Main site header */

:root {
  --site-header-height: 130px;
}

/* Variables */
.site-header {
  /* Layout */
  --site-header-content-max-width: calc(100% - 40px);

  /* Everything else */
  --color-site-header-bg                                : hsl(0 0% 95% / 1);
  /* --color-site-header-border-bottom                  : hsl(0 0% 70% / 1); */
  --color-site-header-border-bottom                     : none;
  --color-site-header-box-shadow                        : hsl(0 0% 20% / 0.5);
  --color-site-header-dropdown-text                     : hsl(0 0% 0% / 1);
  /* --color-site-header-dropdown-active                : hsl(269 63% 85% / 0.3); */
  --color-site-header-dropdown-active                   : none;
  --color-site-header-dropdown-caret                    : hsl(0 0% 0% / 0.15);
  --color-site-header-dropdown-caret-active             : var(--color-site-header-dropdown-caret);
  --color-site-header-dropdown-content                  : hsl(269 63% 30% / 1);
  --color-site-header-dropdown-content-padding-vertical : 32px;
  --color-site-header-dropdown-content-padding-side     : 20px;
  --color-site-header-dropdown-content-center           : hsl(269 63% 20% / 0.9);
  --color-site-header-dropdown-content-center-active    : hsl(269 63% 30% / 1);
  --color-site-header-dropdown-content-divider          : hsl(0 0% 50% / 0.5);
  --color-site-header-dropdown-content-link             : hsl(0 0% 100% / 1);
  --color-site-header-dropdown-content-link-active      : var(--color-primary-yellow);
  --color-site-header-dropdown-content-link-font-size   : 1rem;
  --color-site-header-dropdown-content-link-line-height : 1.7rem;
  --color-site-header-dropdown-content-link-font-size   : 1.0rem;
  --color-site-header-dropdown-content-link-line-height : 1.65rem;
  --color-site-header-apply-btn                         : var(--color-primary-purple);
  --color-site-header-apply-btn-active                  : hsl(269deg 63% 37% / 1);
  --color-site-header-apply-btn-text                    : hsl(0 0% 100% / 1);
}


/* ── Utility bar (social channel links above the header) ──
   Desktop only: the mobile menu carries its own social row, so the bar
   is hidden below the same 801px breakpoint the main nav uses. */
.site-utility-bar { display: none; }
@media (min-width: 801px) {
  .site-utility-bar {
    display: block;
    background: var(--color-primary-purple);
  }
  .site-utility-bar-content {
    display: flex;
    justify-content: space-between; /* quick links left, social icons right */
    align-items: center;
    /* Same content width as .site-header-content (its variable is scoped
       to .site-header, so the value is repeated here). */
    max-width: calc(100% - 40px);
    margin: 0 auto;
  }
  .site-utility-bar-links ul {
    display: flex;
    gap: 28px;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .site-utility-bar-links a {
    display: inline-flex;
    align-items: center;
    height: 40px; /* full-height click target, matches the icon buttons */
    font-size: 0.8rem;
    letter-spacing: 0.03em;
    text-decoration: none;
    /* Text needs 4.5:1 (WCAG 1.4.3, not the 3:1 icon rule) —
       85% white on the purple bar measures ~9.6:1. */
    color: hsl(0 0% 100% / 0.85);
    transition: color 0.2s;
  }
  .site-utility-bar-links a:hover,
  .site-utility-bar-links a:focus {
    color: var(--color-primary-yellow);
  }
  .social-links--utility {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .social-links--utility a {
    /* 40x40 click target around a 20px icon keeps the bar slim while
       staying comfortably above the 24px WCAG 2.5.8 minimum. */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    /* 85% white on the purple bar clears the 3:1 non-text contrast
       minimum (WCAG 1.4.11). */
    color: hsl(0 0% 100% / 0.85);
    transition: color 0.2s;
  }
  .social-links--utility a:hover,
  .social-links--utility a:focus {
    color: var(--color-primary-yellow);
  }
}

/* All screen sizes. */
.site-header-logo { width: 260px; height: auto; }
.site-header-links-apply-now {
  display: inline-block; padding: 16px 30px;
  text-decoration: none;
  color: var(--color-site-header-apply-btn-text);
  background: var(--color-site-header-apply-btn);
  border: none; border-radius: 100px;
  transition: background ease-out 200ms;
}
.site-header-links-apply-now:hover,
.site-header-links-apply-now:focus { background: var(--color-site-header-apply-btn-active); }


/* Desktop screen size */
.site-nav { display: none; }
.site-header-links { display: none; }
@media (min-width: 801px) {
  .site-nav { display: block; }
  .site-header-links { display: block; }

  .site-header {
    /* position: sticky; left: 0; top: 0; */
    position: relative; z-index: 100;
    width: 100%; max-width: 100%; height: var(--site-header-height);
    background: var(--color-site-header-bg);
    border-bottom: 1px solid var(--color-site-header-border-bottom);
    box-shadow: 0 0 24px 0 var(--color-site-header-box-shadow);
  }

  .site-header-content {
    display: flex; justify-content: space-between; align-items: center;
    max-width: var(--site-header-content-max-width); height: 100%;
    margin: 0 auto;
  }

  .site-nav { align-self: flex-end; max-width: fit-content; margin-left: auto; }
  .site-nav ul, .site-nav li { margin: 0; padding: 0; list-style-type: none; }
  .site-nav-dropdown-row { display: flex; justify-content: space-between; margin: 0; }

  .site-nav-dropdown-row header {
    display: inline-flex; align-items: center;
    color: var(--color-site-header-dropdown-text);
    cursor: pointer;
  }

  .site-nav .site-nav-dropdown-item {
    --spacing: 22px 20px 20px;
    padding: var(--spacing);
    /* padding: var(--spacing); */
    border-radius: 8px 8px 0 0;
    transition: background-color ease-out 200ms;
    cursor: pointer;
  }

  .site-nav-dropdown-item header svg { margin-left: 3px; fill: var(--color-site-header-dropdown-caret); transition: all ease-out 200ms; }
  .site-nav-dropdown-item:hover { background: hsl(0 0% 0% / 0.06); }
  .site-nav-dropdown-item:hover svg { fill: var(--color-site-header-dropdown-caret-active); }
  .site-nav-dropdown-item.is-open { background: hsl(0 0% 0% / 0.1); }
  .site-nav-dropdown-item.is-open svg { fill: var(--color-site-header-dropdown-caret-active); transform: translateY(6px) scale(1.1); }
  .site-nav-dropdown-item.is-open .site-nav-dropdown-content { pointer-events: auto; filter: opacity(1); }

  .site-nav-dropdown-content {
    display: grid;
    --side-menu-width: min(25%, 360px);
    grid-template-columns: var(--side-menu-width) 1fr var(--side-menu-width);
    position: absolute;
    left: 0; top: calc(var(--site-header-height) - 1px);
    width: 100%;
    color: hsl(0 0% 100%);
    border-bottom: 1px solid hsl(0 0% 0% / 1);
    pointer-events: none;
    filter: opacity(0);
    box-shadow: 0 0 24px 0 hsl(0 0% 0% / 50%);
    transition: filter ease-out 400ms;
    contain: content; will-change: transform;  /* Perf optimizations. */
  }

  .site-nav-dropdown-content > ul {
    padding: var(--color-site-header-dropdown-content-padding-vertical) var(--color-site-header-dropdown-content-padding-side);
    background: var(--color-site-header-dropdown-content);
  }

  .site-nav-dropdown-content a {
    display: block;
    font-size: var(--color-site-header-dropdown-content-link-font-size);
    line-height: var(--color-site-header-dropdown-content-link-line-height);
    text-decoration: none;
    color: var(--color-site-header-dropdown-content-link);
    transition: color ease-out 200ms;
  }

  .site-nav-dropdown-content a:hover,
  .site-nav-dropdown-content a:focus,
  .site-nav-dropdown-content a:active { color: var(--color-site-header-dropdown-content-link-active); }

  .site-nav-dropdown-content .center {
    display: flex; justify-content: center; align-items: flex-start; padding: 0;
    background: var(--color-site-header-dropdown-content-center);
  }

  .site-nav-dropdown-content .center li { flex: 1; height: 100%; border-right: 1px solid var(--color-site-header-dropdown-content-divider); transition: background ease-out 200ms; }
  .site-nav-dropdown-content .center li:first-of-type { border-left: 1px solid var(--color-site-header-dropdown-content-divider); }
  .site-nav-dropdown-content .center li:hover,
  .site-nav-dropdown-content .center li:focus { background: var(--color-site-header-dropdown-content-center-active); }

  .site-nav-dropdown-content .center a {
    display: flex; flex-direction: column;
    justify-content: center; align-items: center;
    height: 100%;
  }

  .site-nav-dropdown-content .center img {
    display: block; width: 80%; height: 140px; padding: 20px;
    object-fit: contain;
  }

  .site-nav-dropdown-content .center span {
    display: flex; justify-content: center; align-items: center;
    width: 100%; height: 40px;
    padding-left: 10px; padding-right: 10px;
    text-align: center;
  }

  /* Stuff that's aligned all the way to  the right. */
  .site-header-links {
    align-self: center; padding-right: 16px;
    display: flex; align-items: center; gap: 12px;
  }

  /* Search toggle */
  .site-header-search {
    display: flex; align-items: center;
    position: relative;
  }
  /* The search box is the shared <searchbar> component. It sizes itself from
     the subheader's custom properties, which don't exist up here, so define
     them locally to reproduce this header's 48px-tall, 220px-wide field:
     the component derives height as calc(--subheader-height - 22px). */
  .site-header-search {
    --subheader-height: 70px;
    --subheader-searchbar-width: 220px;
  }
  .site-header-search searchbar { width: auto; }

  /* Collapsed and expanded states. These need to outrank the component's own
     width rules (including its :placeholder-shown shrink), hence the longer
     selectors rather than !important. */
  .site-header-search searchbar input.search {
    background: hsl(0 0% 88% / 1);
    font-size: 1rem;
    transition: width 0.3s ease, opacity 0.3s ease, padding 0.3s ease, border-color 0.3s ease;
  }
  .site-header-search:not(.is-open) searchbar input.search,
  .site-header-search:not(.is-open) searchbar input.search:placeholder-shown {
    width: 0; opacity: 0; pointer-events: none;
    padding: 0; border-color: transparent;
  }
  .site-header-search.is-open searchbar input.search,
  .site-header-search.is-open searchbar input.search:placeholder-shown {
    width: 220px; opacity: 1; pointer-events: auto;
    padding: 0 44px 0 40px;
    border-color: hsl(269 63% 40% / 0.4);
  }
  /* The magnifier inside the field would otherwise float over the collapsed
     button; fade it with the input. */
  .site-header-search:not(.is-open) searchbar .icon-wrapper { opacity: 0; }
  .site-header-search searchbar .icon-wrapper {
    height: 48px; transition: opacity 0.3s ease;
  }
  .site-header-search searchbar .icon-wrapper .w-icon { color: hsl(0 0% 45% / 1); }

  /* Drop the suggestion panel clear of the 48px field. */
  .site-header-search .searchbar-suggest { top: calc(100% + 12px); }
  .site-header-search-btn {
    display: flex; align-items: center; justify-content: center;
    width: 48px; height: 48px;
    background: var(--color-site-header-apply-btn);
    color: hsl(0 0% 100%);
    border: none; border-radius: 100px; cursor: pointer;
    flex-shrink: 0;
    transition: background ease-out 200ms;
    /* Float button over the right end of the input when open */
    position: relative; z-index: 1;
    margin-left: -48px;   /* will be overridden by open state */
  }
  .site-header-search:not(.is-open) .site-header-search-btn { margin-left: 0; }
  .site-header-search.is-open .site-header-search-btn { margin-left: -48px; }
  .site-header-search-btn:hover,
  .site-header-search-btn:focus { background: var(--color-site-header-apply-btn-active); }
}


/* Mobile screen size */
.site-nav-mobile { display: none; }
@media (max-width: 800px) {
  .site-header-content {
    position: relative;
    display: flex; justify-content: space-between; align-items: center;
    min-height: 120px;
    padding-left: 10px; padding-right: 20px;
    box-shadow: 0 0 26px 0 hsl(0 0% 20% / 0.6);
  }
  .site-header-logo { width: 200px; }
  .site-nav-mobile {
    display: block;
  }
}