/* Mobile website chrome stays light. Browser chrome color is controlled by theme-color. */
@media (min-width: 768px) {
  .site-header .public-staff-portal-link,
  .site-header .logout-form button {
    white-space: nowrap !important;
  }

  .site-header .public-staff-portal-link {
    width: auto !important;
    min-width: max-content;
    padding-inline: 16px !important;
    font-size: 0.98rem !important;
  }

  body.zenith-home-v2 .site-header .nav-actions {
    min-width: max-content;
    gap: 10px;
  }
}

@media (max-width: 767px) {
  body:not(.auth-theme):not(.staff-theme) .site-header,
  body.theme-light:not(.auth-theme):not(.staff-theme) .site-header,
  body.theme-light:not(.auth-theme):not(.staff-theme) .site-header.is-scrolled,
  body.theme-light:not(.auth-theme):not(.staff-theme).menu-open .site-header {
    border-bottom-color: rgba(15, 63, 52, 0.10) !important;
    background: #fbf9f4 !important;
    color: #123f34 !important;
    box-shadow: none !important;
  }

  body:not(.auth-theme):not(.staff-theme) .site-header .brand-logo,
  body:not(.auth-theme):not(.staff-theme) .site-header .brand img,
  body:not(.auth-theme):not(.staff-theme) .site-header.is-scrolled .brand-logo,
  body:not(.auth-theme):not(.staff-theme).menu-open .site-header .brand-logo {
    filter: none !important;
  }

  body:not(.auth-theme):not(.staff-theme) .site-header .mobile-menu-toggle,
  body.theme-light:not(.auth-theme):not(.staff-theme) .site-header .mobile-menu-toggle,
  body:not(.auth-theme):not(.staff-theme) .site-header.is-scrolled .mobile-menu-toggle,
  body:not(.auth-theme):not(.staff-theme).menu-open .site-header .mobile-menu-toggle {
    border-color: rgba(15, 63, 52, 0.10) !important;
    background: rgba(255, 255, 255, 0.72) !important;
    color: #123f34 !important;
    box-shadow: 0 8px 20px rgba(15, 63, 52, 0.08) !important;
  }

  body:not(.auth-theme):not(.staff-theme) .site-header .mobile-menu-toggle span,
  body:not(.auth-theme):not(.staff-theme) .site-header.is-scrolled .mobile-menu-toggle span,
  body:not(.auth-theme):not(.staff-theme).menu-open .site-header .mobile-menu-toggle span {
    background: #123f34 !important;
  }

  body:not(.auth-theme):not(.staff-theme) .site-header .mobile-menu-panel,
  body:not(.auth-theme):not(.staff-theme) .site-header .tropical-mobile-panel {
    overflow-x: hidden !important;
    border-color: rgba(15, 63, 52, 0.10) !important;
    background: #fbf9f4 !important;
    color: #123f34 !important;
    box-shadow: 0 18px 42px rgba(15, 63, 52, 0.12) !important;
  }

  body:not(.auth-theme):not(.staff-theme) .site-header .mobile-menu-panel a,
  body:not(.auth-theme):not(.staff-theme) .site-header .tropical-mobile-panel a,
  body:not(.auth-theme):not(.staff-theme) .site-header .mobile-menu-auth-form button {
    border-color: rgba(15, 63, 52, 0.10) !important;
    background: rgba(255, 255, 255, 0.72) !important;
    color: #123f34 !important;
    white-space: normal !important;
  }

  body:not(.auth-theme):not(.staff-theme) .site-header .mobile-menu-panel a.is-active,
  body:not(.auth-theme):not(.staff-theme) .site-header .tropical-mobile-panel a.is-active {
    background: rgba(15, 63, 52, 0.08) !important;
  }

  body:not(.auth-theme):not(.staff-theme) .site-header .mobile-menu-panel a strong,
  body:not(.auth-theme):not(.staff-theme) .site-header .tropical-mobile-panel a strong,
  body:not(.auth-theme):not(.staff-theme) .site-header .mobile-menu-auth-form strong {
    color: #123f34 !important;
  }

  body:not(.auth-theme):not(.staff-theme) .site-header .mobile-menu-panel a span,
  body:not(.auth-theme):not(.staff-theme) .site-header .tropical-mobile-panel a span,
  body:not(.auth-theme):not(.staff-theme) .site-header .mobile-menu-auth-form span {
    display: none !important;
  }
}

@media (max-width: 767px) {
  .mobile-menu-auth-form {
    margin: 0;
  }

  .mobile-menu-auth-form button {
    width: 100%;
    min-height: 64px;
    padding: 14px 16px;
    border: 1px solid rgba(15, 63, 52, 0.12);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.72);
    color: #123f34;
    text-align: left;
    cursor: pointer;
  }

  .mobile-menu-auth-form strong,
  .mobile-menu-auth-form span {
    display: block;
  }

  .mobile-menu-auth-form strong {
    font-weight: 800;
  }

  .mobile-menu-auth-form span {
    margin-top: 4px;
    font-size: 0.88rem;
    line-height: 1.4;
    opacity: 0.72;
  }

  .mobile-menu-auth-form button:hover,
  .mobile-menu-auth-form button:focus-visible {
    background: rgba(15, 63, 52, 0.08);
  }
}