/* ---------------------------------------------------------
 * CADIR Header Layout

 * Override state-template branding offsets so the logo aligns
 * with the shared Bootstrap container grid at all breakpoints.
 * --------------------------------------------------------- */
.global-header .branding {
  width: 100%;
  max-width: none;
}

.branding .header-organization-banner {
  margin-left: 0;
  margin-right: 0;
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

@media (width <= 991px) {
  .branding .header-organization-banner a .logo-assets {
    flex-wrap: nowrap;
  }
  .branding .header-organization-banner a .logo-assets .logo-text {
    min-width: 0;
  }
  /*
   * Remove Bootstrap container gutters from the mobile
   * navigation drawer so menu items fill the drawer edge-to-edge.
   */
  .navigation-search.full-width-nav {
    padding-left: 0;
    padding-right: 0;
  }
}
/* ---------------------------------------------------------
 * DIR Figma "Mega Header": logo and search row
 *
 * Desktop (992px and up, where the search sits in the logo
 * row): 112px row with 16px padding and an 80px logo. The
 * search box and button styles apply at every width.
 *
 * Drupal loads SDC CSS before cagov.core.css, so these rules
 * start with #header (and #head-search) to be more specific
 * than the State Template's rules (some use #Search).
 *
 * Hover and focus are not in Figma: the button darkens to DIR
 * Blue, as the State Template darkens its gray button.
 * --------------------------------------------------------- */
@media (width >= 992px) {
  #header .branding {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
  #header .branding .header-organization-banner {
    padding-top: 0;
    padding-bottom: 0;
  }
  /*
   * An inline link leaves room for text descenders below the logo.
   * The block link is only as wide as the logo: the State Template
   * stacks it above the search (z-index 27), so a full-width link
   * covers the search box and it can't be clicked.
   */
  #header .branding .header-organization-banner > a {
    display: block;
    width: fit-content;
  }
  /*
   * The State Template positions the search with top: -60px !important,
   * up into the logo row. Centering it in the 112px row needs it 15px
   * higher ((112px - 36px) / 2 = 38px from the row's top), so it is
   * moved with a transform. The search container hides overflow, so the
   * form itself can't be moved inside it.
   *
   * Its right edge lines up with the content edge, as in Figma (the
   * State Template uses right: 15px).
   */
  #head-search {
    right: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
    /* The State Template makes the search 32% of the menu's width, which
       is narrower than the 348px box and button below about 1100px, so
       the box was cut off. Size it to its content instead. */
    width: auto;
    transform: translateY(-15px);
  }
  #head-search #Search {
    justify-content: flex-end;
  }
  #header .branding .header-organization-banner img {
    width: auto;
    max-width: none;
    height: 80px;
    max-height: none;
  }
}
#head-search #Search .cadir-form-element {
  margin: 0;
}

/* The button sits right against the box. */
@media (width >= 992px) {
  #head-search #Search .cadir-form-element {
    flex: 0 0 auto;
  }
}
#head-search #Search .search-textfield {
  height: 36px;
  padding: 5px 12px;
  border: 2px solid #4d6eb4;
  border-radius: 4px 0 0 4px;
  color: #000;
  font-size: 1.25rem;
  line-height: 1.35;
}
#head-search #Search .search-textfield::placeholder {
  color: #000;
  opacity: 1;
}

#head-search #Search .gsc-search-button {
  width: 48px;
  height: 36px;
  min-height: 36px;
  padding: 0;
  border: 0;
  border-radius: 0 4px 4px 0;
  background-color: #4d6eb4;
  color: #fff;
}
#head-search #Search .gsc-search-button .ca-gov-icon-search {
  color: #fff;
  font-size: 1.25rem;
}
#head-search #Search .gsc-search-button:hover, #head-search #Search .gsc-search-button:focus {
  background-color: #25408f;
}

@media (width >= 992px) {
  #head-search #Search .search-textfield {
    width: 300px;
    /* The State Template sets a gray border-color !important here. */
    border-color: #4d6eb4 !important;
  }
}
/* ---------------------------------------------------------
 * DIR Figma "Mega Header Mobile" (below 992px)
 *
 * One white 68px row with a soft shadow: CA.gov logo, divider,
 * 52px DIR logo, divider, menu button. The dark top bar is
 * hidden (see scss/_utility-header.scss) and its links are
 * listed in the menu drawer (js/global.js).
 * --------------------------------------------------------- */
#header .mobile-cagov-logo {
  display: none;
}

@media (width <= 991px) {
  #header.global-header {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.16);
  }
  #header .branding {
    display: flex;
    align-items: center;
    height: 68px;
    padding-top: 8px;
    padding-bottom: 8px;
  }
  /* CA.gov logo, then a 40px divider 28px to its right. */
  #header .branding .mobile-cagov-logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    height: 40px;
    padding-right: 28px;
    margin-right: 28px;
    border-right: 1px solid rgba(77, 110, 180, 0.1);
  }
  #header .branding .mobile-cagov-logo .ca-gov-logo-svg {
    display: inline-block;
    width: 57px;
    aspect-ratio: 9/5;
  }
  #header .branding .header-organization-banner img {
    width: auto;
    max-width: none;
    height: 52px;
    max-height: none;
  }
  /* The menu button, with a divider before it. The State Template
     places it 60px up, which lines it up with the 52px content of the
     68px row (8px padding). */
  #header .main-nav-icons {
    width: fit-content;
    height: 52px;
    margin-left: auto;
    padding-left: 28px;
    border-left: 1px solid rgba(77, 110, 180, 0.1);
  }
}