/**
 * @file
 * Header styling for the Save Mo Lives theme.
 *
 * Top utility bar (orange) + bottom branding/search bar (white), matching the
 * SaveMoLives style guide.
 */

.site-header {
  position: relative;
  z-index: 30;
}

/* ---------------------------------------------------------------------------
 * Top utility bar (orange).
 * ------------------------------------------------------------------------- */
.header-top-wrapper {
  background: var(--sml-header-top-bg);
  color: var(--sml-black);
  font-family: var(--sml-font-jost);
  font-size: 0.8125rem;
  font-weight: 700;
  padding-block: 0.75rem;
}

.header-top-wrapper .row {
  justify-content: space-between;
  min-height: 18px;
}

.header-top-wrapper .region--header-top-left {
  display: flex;
  align-items: center;
}

.header-top-wrapper .region--header-top-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1.25rem;
}

.header-top-wrapper a {
  color: var(--sml-black);
  text-decoration: none;
}

.header-top-wrapper a:hover,
.header-top-wrapper a:focus {
  text-decoration: underline;
}

/* Phone number block: always visible, always underlined per Figma design.
 * Uses higher specificity to override Olivero's .text-content a rule, which
 * loads after this file and hides the link decoration at rest. */
.header-top-wrapper #block-save-mo-lives-header-phone-number a {
  color:           var(--sml-black);
  font-family:     var(--sml-font-jost);
  font-size:       1.125rem;
  font-weight:     700;
  line-height:     normal;
  text-decoration: underline;
  text-transform:  uppercase;
  white-space:     nowrap;
  box-shadow:      none;
}

.header-top-wrapper #block-save-mo-lives-header-phone-number a:hover,
.header-top-wrapper #block-save-mo-lives-header-phone-number a:focus {
  color:           var(--sml-black);
  text-decoration: underline;
}

.header-top-wrapper .block__content,
.header-top-wrapper p {
  margin: 0;
}

/* Olivero's region.css adds margin-block-end (up to var(--sp3) = 54px) to
 * every direct .region child. Remove it here so the top bar height is
 * controlled solely by the wrapper's padding-block above. */
.header-top-wrapper .region > *:where(:not([data-big-pipe-placeholder-id])) {
  margin-block-end: 0;
}

/* Header utility menu (Email / Text Updates, Contact Us, Translate). */
.header-top-wrapper .menu--header .menu {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  list-style: none;
}

.header-top-wrapper .menu--header .menu__item {
  margin: 0;
  list-style: none;
}

.header-top-wrapper .menu--header .menu__link {
  font-weight: 700;
  white-space: nowrap;
}

/* Social icons in the top bar. */
.header-top-wrapper .social-media-links--platforms {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin: 0;
  list-style: none;
}

.header-top-wrapper .social-media-links--platforms li {
  margin: 0;
  list-style: none;
}

.header-top-wrapper .social-media-links--platforms a {
  display: inline-flex;
  align-items: center;
}

.header-top-wrapper .social-media-links--platforms svg {
  width: 16px;
  height: 16px;
  color: var(--sml-black);
}

/* ---------------------------------------------------------------------------
 * Bottom branding/search bar (white).
 * ------------------------------------------------------------------------- */
.header-bottom-wrapper {
  position: relative;
  background: var(--sml-white);
  border-bottom: 2px solid var(--sml-orange);
}

/* Olivero's layout.css caps .container at --max-width (1350 px) via a
 * 0,1,0 rule. Raise specificity to 0,2,0 so the header shell always
 * fills the full container-fluid width; this lets the search and
 * hamburger button flush to the viewport right edge with a single
 * margin formula. */
.header-top-wrapper .sml-shell-container,
.header-bottom-wrapper .sml-shell-container {
  max-width: var(--sml-shell-max-xxl);
}

.sml-header-main {
  display: flex;
  height: 120px;
  min-height: 120px;
  align-items: stretch;
}

.sml-header-brand {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  padding-right: 1.5rem;
}

.sml-header-navigation {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
  padding-right: 1.5rem;
}

.sml-header-search {
  display: flex;
  flex: 0 0 136px;
  align-items: stretch;
  /* Negate both padding layers (fluid + container) so the gray search
   * button sits flush against the viewport right edge.
   * --sml-container-pad  = fluid's padding (1.5 rem)
   * --container-padding  = Olivero container padding (1.125 rem below
   *                        1200 px, 2.25 rem at ≥ 1200 px) */
  margin-right: calc(-1 * (var(--sml-container-pad) + var(--container-padding)));
}

.sml-header-search .region--header-bottom-right {
  flex: 1;
  height: 100%;
}

/* Site branding / logo. Neutralize Olivero's decorative gradient and
 * block-level bottom margin so flex centering in .sml-header-brand
 * places the logo vertically centered in the 120 px nav bar. */
.site-branding {
  background: none !important;
  margin: 0;
}

.site-branding__inner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0;
}

.site-branding__text {
  display: none;
}

.site-branding__logo img,
.sml-header-brand .block-savemoliveslogo img {
  display: block;
  width: auto;
  max-width: 254px;
  max-height: 30px;
}

.site-branding__name a {
  color: var(--sml-black);
  font-weight: 800;
  font-size: 1.1rem;
  text-decoration: none;
}

/* Search exposed form in the header. */
.sml-header-search .views-exposed-form,
.sml-header-search .block__content,
.sml-header-search form,
.sml-header-search .form--inline,
.sml-header-search .form-actions {
  width: 100%;
  height: 100%;
  margin: 0;
}

.sml-header-search .views-exposed-form,
.sml-header-search form,
.sml-header-search .form--inline {
  display: flex;
  align-items: stretch;
}

/* Anchor the revealed panel to the full header bar, not the narrow search
 * block. Drupal's .contextual-region sets position: relative on the exposed
 * form, which would otherwise become the panel's offset parent. */
.sml-header-search .views-exposed-form {
  position: static;
}

.sml-header-search .js-form-item-search-api-fulltext,
.sml-header-search .form-item,
.sml-header-search .search-result-form-wrapper {
  position: absolute;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  width: 1px;
  height: 1px;
  white-space: nowrap;
}

.sml-header-search .block__content {
  padding-left: 10px;
}
#block-save-mo-lives-savemomenu > ul {
  column-gap: 1.3rem;
}

.sml-header-search .form-actions {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-width: 64px;
  margin: 0;
  background: var(--sml-gray);
}

.sml-header-search .form-actions::before {
  content: '';
  width: 20px;
  height: 20px;
  margin-right: 0;
  background: no-repeat center / contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23000' d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0s208 93.1 208 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z'/%3E%3C/svg%3E");
}

.sml-header-search .form-actions::after {
  content: 'Search';
  color: var(--sml-black);
  font-family: var(--sml-font-jost);
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1;
}

.sml-header-search .form-actions .button,
.sml-header-search .form-actions input[type='submit'] {
  width: auto;
  height: auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--sml-black);
  font-family: var(--sml-font-jost);
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1;
  cursor: pointer;
}

.sml-header-search .form-actions .button:hover,
.sml-header-search .form-actions .button:focus,
.sml-header-search .form-actions input[type='submit']:hover,
.sml-header-search .form-actions input[type='submit']:focus {
  color: var(--sml-black);
  text-decoration: underline;
}

.sml-header-search.is-open .js-form-item-search-api-fulltext,
.sml-header-search.is-open .search-result-form-wrapper {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  z-index: 20;
  display: flex;
  height: auto;
  min-height: 84px;
  padding: 25px;
  background: var(--sml-gray);
  white-space: normal;
}

/* ---------------------------------------------------------------------------
 * Mobile toggle buttons (hidden on desktop).
 * ------------------------------------------------------------------------- */
.header-toggle-button {
  display: none;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
}

@media (max-width: 991px) {
  .header-top-wrapper {
    display: none;
  }

  .header-bottom-wrapper {
    padding-right: 0;
    padding-left: 0;
    border-bottom-width: 1px;
  }

  .header-bottom-wrapper .sml-shell-container {
    padding-right: 0;
    padding-left: 0;
  }

  .sml-header-main {
    height: 75px;
    min-height: 75px;
    align-items: center;
  }

  .sml-header-brand {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0 1.125rem;
  }

  .sml-header-navigation,
  .sml-header-search {
    display: none;
  }

  .header-toggle-button {
    display: flex;
    flex: 0 0 auto;
    align-self: stretch;
    gap: 0;
  }

  .site-branding__logo img,
  .sml-header-brand .block-savemoliveslogo img {
    max-width: 220px;
    max-height: 32px;
  }

  .header-toggle-button .navbar-toggler {
    width: 69px;
    height: 75px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: var(--sml-orange);
  }

  .header-toggle-button .navbar-toggler:focus {
    outline-offset: -4px;
  }

  .header-toggle-button .navbar-toggler.toggle-menu span {
    left: calc(50% - 15px);
    width: 30px;
    height: 3px;
    background: var(--sml-black);
  }

  .header-toggle-button .navbar-toggler.toggle-menu span:nth-child(1) {
    top: 28px;
  }

  .header-toggle-button .navbar-toggler.toggle-menu span:nth-child(2),
  .header-toggle-button .navbar-toggler.toggle-menu span:nth-child(3) {
    top: 36px;
  }

  .header-toggle-button .navbar-toggler.toggle-menu span:nth-child(4) {
    top: 44px;
  }
}

/* JS-driven collapse: nav overflows available space. */
.site-header.is-nav-collapsed .sml-header-navigation,
.site-header.is-nav-collapsed .sml-header-search {
  display: none;
}

.site-header.is-nav-collapsed .sml-header-brand {
  flex: 1 1 auto;
  min-width: 0;
}

.site-header.is-nav-collapsed .header-toggle-button {
  display: flex;
  flex: 0 0 auto;
  align-self: stretch;
  gap: 0;
}

/* Hamburger fills the 120px desktop header height when collapsed. */
@media (min-width: 992px) {
  .site-header.is-nav-collapsed .header-toggle-button {
    /* Same two-layer negate as the search so the button sits flush
     * against the viewport right edge at all desktop widths. */
    margin-right: calc(-1 * (var(--sml-container-pad) + var(--container-padding)));
  }

  .site-header.is-nav-collapsed .header-toggle-button .navbar-toggler {
    width: 69px;
    height: 100%;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: var(--sml-orange);
  }

  .site-header.is-nav-collapsed
    .header-toggle-button .navbar-toggler.toggle-menu span {
    left: calc(50% - 15px);
    width: 30px;
    height: 3px;
    background: var(--sml-black);
  }

  .site-header.is-nav-collapsed
    .header-toggle-button .navbar-toggler.toggle-menu span:nth-child(1) {
    top: 51px;
  }

  .site-header.is-nav-collapsed
    .header-toggle-button .navbar-toggler.toggle-menu span:nth-child(2),
  .site-header.is-nav-collapsed
    .header-toggle-button .navbar-toggler.toggle-menu span:nth-child(3) {
    top: 59px;
  }

  .site-header.is-nav-collapsed
    .header-toggle-button .navbar-toggler.toggle-menu span:nth-child(4) {
    top: 67px;
  }
}

@media (min-width: 992px) and (max-width: 1299px) {
  .sml-header-brand {
    padding-right: 1rem;
  }
}


@media (min-width: 1500px) {
  .header-top-wrapper {
    font-size: 1.125rem;
  }

  .header-top-wrapper .row {
    min-height: 24px;
  }

  .header-top-wrapper .region--header-top-right {
    gap: 3.5rem;
  }

  .header-top-wrapper .menu--header .menu {
    gap: 3.5rem;
  }

  .header-top-wrapper .social-media-links--platforms {
    gap: 1.125rem;
  }

  .header-top-wrapper .social-media-links--platforms svg {
    width: 18px;
    height: 18px;
  }

  .site-branding__logo img,
  .sml-header-brand .block-savemoliveslogo img {
    max-width: 254px;
    max-height: 30px;
  }
}

@media (min-width: 1733px) {
  .sml-header-search {
    margin-right: calc(var(--sml-container-pad) * -1);
  }
}