/* Main site header */

/* Variables */
.site-header {
  /* Layout */
  --site-header-height: 130px;
  --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);
}


/* All screen sizes. */
.site-header-logo { width: 260px; height: auto; }
.site-header-links-apply-now {
  display: inline-block; padding: 16px 30px;
  font-weight: bold; text-decoration: none;
  color: var(--color-site-header-apply-btn-text);
  background: var(--color-site-header-apply-btn);
  border: none; border-radius: 8px;
  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; width: 100%; max-width: fit-content; }
  .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 {
    padding: 22px 50px 20px;
    padding: 22px 20px 20px;
    border-radius: 8px 8px 0 0;
    transition: background-color ease-out 200ms;
  }

  .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,
  .site-nav-dropdown-item:focus { background: var(--color-site-header-dropdown-active); }
  .site-nav-dropdown-item:hover svg,
  .site-nav-dropdown-item:focus svg { fill: var(--color-site-header-dropdown-caret-active); transform: translateY(10px) scale(1.1); }
  .site-nav-dropdown-item.is-focused .site-nav-dropdown-content,
  .site-nav-dropdown-item:hover .site-nav-dropdown-content,
  .site-nav-dropdown-item:focus .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); backdrop-filter: blur(3px);
    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: flex-start; align-items: center;
    padding-top: 16px; 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; }
}


/* 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;
    box-shadow: 0 0 26px 0 hsl(0 0% 20% / 0.6);
  }
  .site-header-logo { width: 200px; }
  .site-nav-mobile {
    display: block;
  }
}