/*
  Maido Customs Pure PHP Rebuild - Stage 3W
  Final mobile drawer compacting + desktop hero text visual match.
  This file intentionally loads after Stage 3V so it safely overrides only
  header/menu/hero presentation. It does not touch products, search logic,
  admin, database values, or image paths.
*/

:root {
  --maido-stage3w-menu-font: Impact, Haettenschweiler, "Arial Narrow", "Oswald", sans-serif;
  --maido-stage3w-hero-font: "Montserrat", "Arial Black", "Helvetica Neue", Arial, sans-serif;
}

/* -------------------------------------------------------------------------
   DESKTOP / WIDE HEADER AND HERO TEXT
   ------------------------------------------------------------------------- */
@media (min-width: 981px) {
  /* Main menu: very slight size lift while keeping the old Maido heavy/narrow look. */
  html body.has-hero-header .site-header--hero .main-nav .nav-link,
  html body.has-hero-header .site-header--hero .main-nav .nav-link span:first-child,
  html body.has-hero-header .site-header--hero .header-actions .maido-stage3r-envelope-contact,
  html body.has-hero-header .site-header--hero .header-actions .maido-stage3o-contact-text {
    font-family: var(--maido-stage3w-menu-font) !important;
    font-size: clamp(19px, 1.28vw, 22px) !important;
    font-weight: 700 !important;
    letter-spacing: -0.012em !important;
    line-height: 1 !important;
    color: #050505 !important;
    text-shadow: none !important;
  }

  html body.has-hero-header .site-header--hero .main-nav {
    gap: clamp(26px, 2.35vw, 44px) !important;
  }

  html body.has-hero-header .site-header--hero .nav-caret {
    font-size: .72em !important;
    margin-left: 9px !important;
    opacity: .62 !important;
    vertical-align: .05em !important;
  }

  /* Desktop hero title: closer to the old Maido reference - large, wide, bold, one line. */
  html body.maido-stage3k-home .landing-hero__inner,
  html body.has-hero-header .landing-hero__inner {
    left: clamp(62px, 5.05vw, 96px) !important;
    right: 24px !important;
    bottom: clamp(155px, 8.25vw, 186px) !important;
    max-width: none !important;
    width: auto !important;
  }

  html body.maido-stage3k-home .landing-hero h1,
  html body.maido-stage3k-home .landing-hero__title,
  html body.has-hero-header .landing-hero h1,
  html body.has-hero-header .landing-hero__title 
  
  {
font-family: Arial, Helvetica, sans-serif !important;
font-size: clamp(46px, 4.1vw, 46px) !important;
font-weight: 600 !important;
line-height: .9 !important;
letter-spacing: -0.05em !important;
    color: #ffffff !important;
    white-space: nowrap !important;
    max-width: none !important;
    width: auto !important;
    text-transform: uppercase !important;
    text-shadow: none !important;
    transform: none !important;
  }

  /* Desktop dropdowns: compact old Maido feel, with light submenu typography. */
  html body .maido-stage3k-menu-panel,
  html body.has-hero-header .maido-stage3k-menu-panel 
  
  {
    min-width: 212px !important;
    width: 212px !important;
    max-width: min(74vw, 242px) !important;
    border-radius: 4px !important;
    padding: 0 !important;
    box-shadow: 0 12px 26px rgba(0, 0, 0, .12) !important;
  }

  html body .maido-stage3k-row,
  html body .maido-stage3k-view-all {
    min-height: 40px !important;
    height: 40px !important;
    padding: 0 13px !important;
  }

  html body .maido-stage3k-menu-panel a,
  html body .maido-stage3k-menu-panel .maido-stage3k-category-link,
  html body .maido-stage3k-view-all,
  html body .maido-stage3k-menu-panel span {
    font-family: "Avenir Next", "Helvetica Neue", Arial, sans-serif !important;
    font-size: 17px !important;
    font-weight: 300 !important;
    letter-spacing: -0.035em !important;
    line-height: 1.12 !important;
    color: #111111 !important;
    text-shadow: none !important;
  }

  html body .maido-stage3k-level-1 > .maido-stage3k-has-children > .maido-stage3k-tree,
  html body .maido-stage3k-level-1 > .maido-stage3k-has-children > ul,
  html body .maido-stage3k-level-1 > .maido-stage3k-has-children > .maido-stage3k-level-2 {
    min-width: 218px !important;
    width: 218px !important;
    max-width: min(74vw, 248px) !important;
  }

  html body .maido-stage3k-level-2 .maido-stage3k-row,
  html body .maido-stage3k-level-3 .maido-stage3k-row {
    min-height: 40px !important;
    height: 40px !important;
    padding: 0 13px !important;
  }
}

/* Keep the desktop hero title from becoming silly-wide on medium screens. */
@media (min-width: 981px) and (max-width: 1260px) {
  html body.maido-stage3k-home .landing-hero h1,
  html body.maido-stage3k-home .landing-hero__title,
  html body.has-hero-header .landing-hero h1,
  html body.has-hero-header .landing-hero__title {
    font-size: clamp(38px, 4.2vw, 54px) !important;
    letter-spacing: -0.058em !important;
  }
}

/* -------------------------------------------------------------------------
   MOBILE / SHRUNK DRAWER
   ------------------------------------------------------------------------- */
@media (max-width: 980px) {
  /* Replace the large X with a simple minus when open. */
  html body.maido-mobile-menu-open .site-header--hero .menu-toggle span:nth-child(1),
  html body.maido-mobile-menu-open .menu-toggle[data-menu-toggle] span:nth-child(1),
  html body.maido-mobile-menu-open .site-header--hero .menu-toggle span:nth-child(3),
  html body.maido-mobile-menu-open .menu-toggle[data-menu-toggle] span:nth-child(3) {
    opacity: 0 !important;
    transform: scaleX(.18) !important;
  }

  html body.maido-mobile-menu-open .site-header--hero .menu-toggle span:nth-child(2),
  html body.maido-mobile-menu-open .menu-toggle[data-menu-toggle] span:nth-child(2) {
    opacity: 1 !important;
    transform: none !important;
    width: 42px !important;
    height: 5px !important;
  }

  /* Drawer only as tall as the items/content, not the whole screen. */
  html body.has-hero-header .site-header--hero .main-nav[data-main-nav],
  html body .main-nav[data-main-nav] {
    top: var(--maido-mobile-header-height, 88px) !important;
    bottom: auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(100svh - var(--maido-mobile-header-height, 88px) - 14px) !important;
    width: min(84vw, 335px) !important;
    max-width: 335px !important;
    padding: 0 !important;
    border-radius: 0 0 3px 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain !important;
    box-shadow: 14px 16px 28px rgba(0, 0, 0, .22) !important;
  }

  /* Keep menu rows compact and balanced. */
  html body.has-hero-header .site-header--hero .main-nav[data-main-nav] .nav-link,
  html body .main-nav[data-main-nav] .nav-link,
  html body.has-hero-header .site-header--hero .main-nav[data-main-nav] > .nav-link,
  html body .main-nav[data-main-nav] > .nav-link,
  html body.has-hero-header .site-header--hero .main-nav[data-main-nav] .maido-stage3r-mobile-contact,
  html body .main-nav[data-main-nav] .maido-stage3r-mobile-contact {
    height: 52px !important;
    min-height: 52px !important;
    padding: 0 22px !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    letter-spacing: -0.012em !important;
  }

  html body.has-hero-header .site-header--hero .main-nav[data-main-nav] .nav-caret,
  html body .main-nav[data-main-nav] .nav-caret {
    width: 24px !important;
    height: 24px !important;
    font-size: 18px !important;
    color: #777 !important;
  }

  /* Accordion category rows inside mobile drawer. */
  html body .main-nav[data-main-nav] .maido-stage3k-row,
  html body .main-nav[data-main-nav] .maido-stage3k-view-all {
    min-height: 38px !important;
    height: 38px !important;
    padding: 0 22px 0 34px !important;
  }

  html body .main-nav[data-main-nav] .maido-stage3k-level-2 .maido-stage3k-row {
    padding-left: 46px !important;
  }

  html body .main-nav[data-main-nav] .maido-stage3k-level-3 .maido-stage3k-row {
    padding-left: 58px !important;
  }

  html body .main-nav[data-main-nav] .maido-stage3k-category-link,
  html body .main-nav[data-main-nav] .maido-stage3k-view-all,
  html body .main-nav[data-main-nav] .maido-stage3k-menu-panel span {
    font-size: 15px !important;
    font-weight: 400 !important;
    color: #151515 !important;
  }

  /* Backdrop still covers the page below the compact drawer. */
  html body.maido-mobile-menu-open::before {
    top: var(--maido-mobile-header-height, 88px) !important;
    background: rgba(0, 0, 0, .38) !important;
  }
}

@media (max-width: 560px) {
  html body.has-hero-header .site-header--hero .main-nav[data-main-nav],
  html body .main-nav[data-main-nav] {
    width: min(86vw, 318px) !important;
    max-width: 318px !important;
  }
}