/*
  Maido Customs Pure PHP Rebuild - Stage 3R
  Fixes after mobile/shrunk screenshot review:
  - Replace | CONTACT | text with a compact envelope contact icon.
  - Restore proper mobile hamburger behaviour: only the three-bar icon shows until tapped.
  - Move Contact into the mobile menu so the header stays compact.
  - Reduce desktop dropdown wasted space and match old Journal dropdown typography better.
  - Keep correct imported mobile hero image and prevent hero text overflow on mobile.
*/

:root {
  --maido-3r-menu-font: "Oswald", "Arial Narrow", "Helvetica Neue Condensed", Arial, sans-serif;
  --maido-3r-dropdown-font: "Avenir Next", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --maido-3r-black: #050505;
}

/* Compact contact icon replacing the wider | CONTACT | text. */
html body .maido-stage3r-envelope-contact {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 31px !important;
  height: 31px !important;
  color: #050505 !important;
  text-decoration: none !important;
  flex: 0 0 auto !important;
}

html body .maido-stage3r-envelope-contact svg,
html body .maido-stage3r-envelope-icon {
  width: 25px !important;
  height: 21px !important;
  display: block !important;
}

html body .maido-stage3r-envelope-contact:hover {
  opacity: .72 !important;
}

html body .maido-stage3r-mobile-contact {
  display: none !important;
}

/* Hide old text contact class if an earlier cached header/asset still leaves it on the page. */
html body .maido-stage3o-header-contact:not(.maido-stage3r-envelope-contact) {
  font-size: 0 !important;
  width: 0 !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* Desktop menu: just a fraction smaller, closer to the old Maido header. */
html body.has-hero-header .site-header--hero .main-nav a,
html body.has-hero-header .site-header--hero .main-nav .nav-link,
html body.has-hero-header .site-header--hero .nav-link span:first-child {
  font-family: var(--maido-3r-menu-font) !important;
  font-size: 14px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  color: var(--maido-3r-black) !important;
}

html body.has-hero-header .site-header--hero .main-nav {
  gap: clamp(20px, 1.9vw, 31px) !important;
}

html body.has-hero-header .site-header--hero .nav-caret {
  font-size: 11px !important;
  margin-left: 7px !important;
}

/* Main desktop dropdown: reduce height/width and use old-style lighter dropdown font. */
html body .maido-stage3k-menu-panel,
html body.has-hero-header .maido-stage3k-menu-panel {
  min-width: 238px !important;
  width: 238px !important;
  max-width: 76vw !important;
  top: calc(100% + 9px) !important;
  border-radius: 2px !important;
  box-shadow: 0 9px 20px rgba(0,0,0,.12) !important;
}

html body .maido-stage3k-row,
html body .maido-stage3k-view-all {
  min-height: 38px !important;
  height: 38px !important;
  padding: 0 15px !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: var(--maido-3r-dropdown-font) !important;
  font-size: 15px !important;
  line-height: 1.1 !important;
  font-weight: 400 !important;
  color: #080808 !important;
  letter-spacing: -.01em !important;
  text-transform: none !important;
}

html body .maido-stage3k-child-arrow {
  font-size: 18px !important;
  color: #8a8a8a !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: 226px !important;
  width: 226px !important;
  max-width: 72vw !important;
  box-shadow: 0 9px 20px rgba(0,0,0,.12) !important;
}

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

html body .maido-stage3k-level-2 .maido-stage3k-category-link,
html body .maido-stage3k-level-3 .maido-stage3k-category-link,
html body .maido-stage3k-level-2 a,
html body .maido-stage3k-level-3 a {
  font-family: var(--maido-3r-dropdown-font) !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.1 !important;
}

/* Desktop hero text: keep close to the reference but avoid the too-heavy/oversized look. */
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: "Montserrat", "Arial", "Helvetica Neue", Helvetica, sans-serif !important;
  font-size: clamp(27px, 2.02vw, 36px) !important;
  line-height: .98 !important;
  font-weight: 750 !important;
  letter-spacing: -.045em !important;
}

html body.maido-stage3k-home .landing-hero__inner,
html body.has-hero-header .landing-hero__inner {
  left: clamp(56px, 4.55vw, 82px) !important;
  bottom: clamp(128px, 7.75vw, 164px) !important;
}

/* Mobile / shrunk header: keep the nav closed until hamburger is clicked. */
@media (max-width: 980px) {
  html body.has-hero-header .site-header--hero,
  html body.has-hero-header .site-header,
  html body.has-hero-header .site-header--hero .primary-header {
    position: relative !important;
    background: #ffffff !important;
    color: #050505 !important;
  }

  html body.has-hero-header .site-header--hero .container.header-grid,
  html body.has-hero-header .site-header--hero .container.header-grid--landing {
    min-height: 104px !important;
    height: 104px !important;
    padding: 0 20px !important;
    display: grid !important;
    grid-template-columns: 62px 1fr auto !important;
    align-items: center !important;
  }

  html body.has-hero-header .site-header--hero .menu-toggle {
    display: inline-flex !important;
    flex-direction: column !important;
    gap: 7px !important;
    width: 46px !important;
    height: 46px !important;
    align-items: flex-start !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body.has-hero-header .site-header--hero .menu-toggle span {
    display: block !important;
    width: 35px !important;
    height: 3px !important;
    min-height: 3px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 4px !important;
    background: #050505 !important;
    opacity: 1 !important;
    transform: none !important;
  }

  html body.has-hero-header .site-header--hero .brand--center {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
  }

  html body.has-hero-header .site-header--hero .brand__logo--full,
  html body.has-hero-header .site-header--hero .brand img {
    max-height: 74px !important;
  }

  html body.has-hero-header .site-header--hero .header-actions {
    gap: 16px !important;
  }

  html body .maido-stage3r-envelope-contact {
    width: 29px !important;
    height: 34px !important;
  }

  html body .maido-stage3r-envelope-contact svg,
  html body .maido-stage3r-envelope-icon {
    width: 24px !important;
    height: 20px !important;
  }

  html body.has-hero-header .site-header--hero .header-icon {
    width: 31px !important;
    height: 36px !important;
  }

  /* Closed by default. This overrides Stage 3Q where the mobile nav was visible over the hero. */
  html body.has-hero-header .site-header--hero .main-nav,
  html body.has-hero-header .site-header--hero .main-nav[data-main-nav] {
    display: none !important;
    position: absolute !important;
    top: 104px !important;
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    transform: none !important;
    padding: 8px 0 !important;
    margin: 0 !important;
    border-radius: 18px !important;
    background: rgba(255,255,255,.98) !important;
    box-shadow: 0 9px 22px rgba(0,0,0,.16) !important;
    z-index: 120 !important;
    overflow: visible !important;
  }

  html body.maido-mobile-menu-open.has-hero-header .site-header--hero .main-nav,
  html body.has-hero-header .site-header--hero .main-nav.is-open,
  html body.has-hero-header .site-header--hero .menu-toggle[aria-expanded="true"] + .main-nav {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
  }

  html body.has-hero-header .site-header--hero .main-nav .nav-item,
  html body.has-hero-header .site-header--hero .main-nav .nav-link,
  html body.has-hero-header .site-header--hero .maido-stage3r-mobile-contact {
    width: 100% !important;
  }

  html body.has-hero-header .site-header--hero .main-nav .nav-link,
  html body.has-hero-header .site-header--hero .nav-link span:first-child,
  html body.has-hero-header .site-header--hero .maido-stage3r-mobile-contact span {
    min-height: 45px !important;
    height: 45px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-family: var(--maido-3r-menu-font) !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #050505 !important;
    line-height: 1 !important;
  }

  html body .maido-stage3r-mobile-contact {
    display: flex !important;
    justify-content: center !important;
    text-decoration: none !important;
  }

  html body.has-hero-header .site-header--hero .main-nav .nav-item--has-dropdown .maido-stage3k-menu-panel {
    position: static !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }

  html body.has-hero-header .site-header--hero .main-nav:not(.is-open) .maido-stage3k-menu-panel {
    display: none !important;
  }

  /* Correct mobile hero image and make the text fit inside the screen. */
  html body.maido-stage3k-home .landing-hero,
  html body.has-hero-header .landing-hero {
    background-image: url('/image/catalog/imgs/banner-mble-1.png') !important;
    background-size: cover !important;
    background-position: center top !important;
    min-height: min(760px, calc(100vh - 104px)) !important;
    height: min(760px, calc(100vh - 104px)) !important;
  }

  html body.maido-stage3k-home .landing-hero__inner,
  html body.has-hero-header .landing-hero__inner {
    left: 26px !important;
    right: 18px !important;
    bottom: 76px !important;
    max-width: calc(100vw - 44px) !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-size: clamp(19px, 4.95vw, 24px) !important;
    line-height: 1 !important;
    font-weight: 750 !important;
    letter-spacing: -.055em !important;
    white-space: nowrap !important;
    max-width: 100% !important;
  }
}

@media (max-width: 560px) {
  html body.has-hero-header .site-header--hero .container.header-grid,
  html body.has-hero-header .site-header--hero .container.header-grid--landing {
    min-height: 92px !important;
    height: 92px !important;
    padding: 0 18px !important;
    grid-template-columns: 52px 1fr auto !important;
  }

  html body.has-hero-header .site-header--hero .brand__logo--full,
  html body.has-hero-header .site-header--hero .brand img {
    max-height: 68px !important;
  }

  html body.has-hero-header .site-header--hero .header-actions {
    gap: 13px !important;
  }

  html body.has-hero-header .site-header--hero .main-nav,
  html body.has-hero-header .site-header--hero .main-nav[data-main-nav] {
    top: 92px !important;
  }

  html body.maido-stage3k-home .landing-hero,
  html body.has-hero-header .landing-hero {
    min-height: min(700px, calc(100vh - 92px)) !important;
    height: min(700px, calc(100vh - 92px)) !important;
  }

  html body.maido-stage3k-home .landing-hero__inner,
  html body.has-hero-header .landing-hero__inner {
    left: 22px !important;
    right: 14px !important;
    bottom: 70px !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-size: clamp(18px, 4.8vw, 22px) !important;
  }
}