/**
 * Washnah — final mobile navigation and hero controls
 * 2026-06-25
 * Loaded after every page stylesheet.
 */

@media (max-width: 1199.98px) {
  /*
   * The header used will-change: transform, which can turn fixed descendants
   * into header-sized elements on mobile browsers. Remove that containing
   * block so the navigation drawer always fills the real viewport.
   */
  .site-header.header {
    overflow: visible !important;
    will-change: auto !important;
  }

  body.mobile-nav-active .site-header.header {
    transform: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  .header .container,
  .header .navmenu {
    overflow: visible !important;
  }

  .header .navmenu {
    position: static !important;
  }

  .navmenu::before {
    position: fixed !important;
    inset: 0 !important;
    z-index: 10000 !important;
    background: rgba(20, 7, 10, .64) !important;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }

  #navmenu-list {
    position: fixed !important;
    inset: 0 0 0 auto !important;
    z-index: 10003 !important;
    display: block !important;
    width: min(88vw, 370px) !important;
    height: 100vh !important;
    height: 100svh !important;
    height: 100dvh !important;
    max-height: none !important;
    margin: 0 !important;
    padding:
      calc(78px + env(safe-area-inset-top))
      18px
      calc(26px + env(safe-area-inset-bottom)) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    color: #252025 !important;
    background: #fff !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: -28px 0 75px rgba(20, 6, 10, .28) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translate3d(104%, 0, 0) !important;
    transition:
      transform .34s cubic-bezier(.2, .78, .2, 1),
      opacity .22s ease,
      visibility .22s ease !important;
  }

  body.mobile-nav-active #navmenu-list {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translate3d(0, 0, 0) !important;
  }

  body.mobile-nav-active .mobile-nav-toggle {
    position: fixed !important;
    top: calc(14px + env(safe-area-inset-top)) !important;
    right: max(14px, env(safe-area-inset-right)) !important;
    left: auto !important;
    z-index: 10006 !important;
    width: 44px !important;
    height: 44px !important;
    color: #801922 !important;
    background: #fff !important;
    border-color: rgba(128, 25, 34, .18) !important;
    box-shadow: 0 12px 30px rgba(35, 7, 12, .20) !important;
  }

  body.mobile-nav-active .header-actions {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  #navmenu-list > li {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border-bottom: 1px solid rgba(35, 25, 30, .08) !important;
  }

  #navmenu-list > li:last-child {
    border-bottom: 0 !important;
  }

  #navmenu-list > li > a,
  #navmenu-list > li > a:focus {
    width: 100% !important;
    min-height: 50px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 12px 8px !important;
    color: #2a2428 !important;
    background: transparent !important;
    border-radius: 12px !important;
    font-size: 15px !important;
    font-weight: 650 !important;
    line-height: 1.35 !important;
    white-space: normal !important;
  }

  #navmenu-list > li > a:hover,
  #navmenu-list > li > a.active,
  #navmenu-list > li > a[aria-current="page"] {
    color: #801922 !important;
    background: rgba(128, 25, 34, .07) !important;
  }

  #navmenu-list .dropdown > a .toggle-dropdown {
    position: static !important;
    flex: 0 0 34px !important;
    width: 34px !important;
    height: 34px !important;
    display: grid !important;
    place-items: center !important;
    margin: 0 !important;
    color: #801922 !important;
    background: rgba(128, 25, 34, .08) !important;
    border-radius: 50% !important;
  }

  #navmenu-list .dropdown > ul,
  #navmenu-list .dropdown ul {
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 8px !important;
    overflow: hidden !important;
    color: #2a2428 !important;
    background: rgba(128, 25, 34, .035) !important;
    border: 0 !important;
    border-radius: 14px !important;
    box-shadow: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    transition: max-height .28s ease, padding .28s ease, margin .28s ease !important;
  }

  #navmenu-list .dropdown > ul.dropdown-active,
  #navmenu-list .dropdown ul.dropdown-active {
    max-height: 240px !important;
    margin: 4px 0 10px !important;
    padding: 6px 8px !important;
  }

  #navmenu-list .dropdown ul a {
    min-height: 44px !important;
    padding: 10px 11px !important;
    color: #40383d !important;
    font-size: 13.5px !important;
  }
}

@media (max-width: 767.98px) {
  /* Compact, predictable hero actions on phones. */
  .hero-actions,
  .sector-hero-actions {
    width: min(100%, 280px) !important;
    max-width: 280px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: center !important;
    gap: 10px !important;
    margin-inline: auto !important;
    margin-top: 24px !important;
  }

  .hero-actions > .btn-primary-pro,
  .hero-actions > .btn-secondary-pro,
  .sector-hero-actions > .btn-primary-pro,
  .sector-hero-actions > .btn-secondary-pro,
  .hero-actions > a,
  .sector-hero-actions > a {
    flex: 0 0 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 280px !important;
    min-height: 48px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 12px 18px !important;
    border-radius: 999px !important;
    font-size: 14px !important;
    line-height: 1.25 !important;
    white-space: normal !important;
  }

  .hero-home .hero-content,
  .sector-hero .sector-hero-copy {
    min-height: 0 !important;
  }

  .hero-home .hero-main-title {
    margin-bottom: 0 !important;
  }

  .video-banner.sector-hero h1,
  .sector-hero-copy h1,
  .balanced-page-title {
    font-size: clamp(2rem, 10.5vw, 3.35rem) !important;
    line-height: 1.05 !important;
  }
}

@media (max-width: 389.98px) {
  #navmenu-list {
    width: min(92vw, 350px) !important;
    padding-inline: 15px !important;
  }

  .hero-actions,
  .sector-hero-actions,
  .hero-actions > a,
  .sector-hero-actions > a {
    max-width: 252px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #navmenu-list {
    transition-duration: .01ms !important;
  }
}