/*
  Maido Customs Pure PHP Rebuild - Stage 4I
  Global inner-page hero/header polish.

  Purpose:
  - Keep non-home pages visually consistent with the homepage header/menu fonts.
  - Add a hero image to category, product, page, account, login/register and other inner pages.
  - Do not touch the manually tuned Stage 3W hero text CSS.
*/

:root {
  --maido-stage4i-menu-font: Impact, Haettenschweiler, "Arial Narrow", "Oswald", sans-serif;
  --maido-stage4i-copy-font: "Avenir Next", "Helvetica Neue", Arial, sans-serif;
  --maido-stage4i-hero-title-font: Arial, Helvetica, sans-serif;
}

/* -------------------------------------------------------------------------
   INNER PAGE HEADER: MATCH HOMEPAGE HEADER STYLE
   ------------------------------------------------------------------------- */
body.maido-stage4i-inner-page {
  --maido-stage4i-desktop-header-height: 118px;
  --maido-stage4i-mobile-header-height: 92px;
}

@media (min-width: 981px) {
  body.maido-stage4i-inner-page .site-header:not(.site-header--hero) {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 80 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  body.maido-stage4i-inner-page .site-header:not(.site-header--hero) .primary-header {
    height: var(--maido-stage4i-desktop-header-height) !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  body.maido-stage4i-inner-page .site-header:not(.site-header--hero) .header-grid,
  body.maido-stage4i-inner-page .site-header:not(.site-header--hero) .header-grid--landing {
    height: var(--maido-stage4i-desktop-header-height) !important;
    width: 100% !important;
    max-width: none !important;
    padding-left: clamp(34px, 3.1vw, 64px) !important;
    padding-right: clamp(34px, 3.1vw, 64px) !important;
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    align-items: center !important;
  }

  body.maido-stage4i-inner-page .site-header:not(.site-header--hero) .main-nav {
    justify-self: start !important;
    display: flex !important;
    align-items: center !important;
    gap: clamp(28px, 2.35vw, 46px) !important;
  }

  body.maido-stage4i-inner-page .site-header:not(.site-header--hero) .brand,
  body.maido-stage4i-inner-page .site-header:not(.site-header--hero) .site-logo,
  body.maido-stage4i-inner-page .site-header:not(.site-header--hero) .header-logo {
    justify-self: center !important;
  }

  body.maido-stage4i-inner-page .site-header:not(.site-header--hero) .brand img,
  body.maido-stage4i-inner-page .site-header:not(.site-header--hero) .site-logo img,
  body.maido-stage4i-inner-page .site-header:not(.site-header--hero) .header-logo img {
    max-height: 78px !important;
    width: auto !important;
    display: block !important;
  }

  body.maido-stage4i-inner-page .site-header:not(.site-header--hero) .header-actions {
    justify-self: end !important;
    display: flex !important;
    align-items: center !important;
    gap: clamp(18px, 1.55vw, 28px) !important;
  }

  body.maido-stage4i-inner-page .site-header:not(.site-header--hero) .main-nav .nav-link,
  body.maido-stage4i-inner-page .site-header:not(.site-header--hero) .main-nav .nav-link span:first-child,
  body.maido-stage4i-inner-page .site-header:not(.site-header--hero) .header-actions .maido-stage3r-envelope-contact,
  body.maido-stage4i-inner-page .site-header:not(.site-header--hero) .header-actions .maido-stage3o-contact-text {
    font-family: var(--maido-stage4i-menu-font) !important;
    font-size: clamp(20px, 1.28vw, 23px) !important;
    font-weight: 700 !important;
    letter-spacing: -0.012em !important;
    line-height: 1 !important;
    color: #050505 !important;
    text-shadow: none !important;
    text-transform: none !important;
  }

  body.maido-stage4i-inner-page .site-header:not(.site-header--hero) .nav-caret {
    font-size: .72em !important;
    margin-left: 9px !important;
    opacity: .62 !important;
    vertical-align: .05em !important;
  }

  body.maido-stage4i-inner-page .site-header:not(.site-header--hero) .header-icon,
  body.maido-stage4i-inner-page .site-header:not(.site-header--hero) .maido-stage3s-cart-icon {
    color: #050505 !important;
  }

  /* On scroll, keep the same solid header behaviour as the homepage. */
  body.maido-stage4i-inner-page .site-header:not(.site-header--hero).is-scrolled,
  body.maido-stage4i-inner-page .site-header:not(.site-header--hero).maido-scrolled {
    position: fixed !important;
    background: rgba(255,255,255,.98) !important;
    border-bottom: 1px solid rgba(0,0,0,.08) !important;
    box-shadow: 0 8px 22px rgba(0,0,0,.08) !important;
  }
}

/* -------------------------------------------------------------------------
   INNER PAGE HERO
   ------------------------------------------------------------------------- */
.maido-stage4i-inner-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-image:
    linear-gradient(90deg, rgba(0,0,0,.24), rgba(0,0,0,.08) 48%, rgba(0,0,0,.04)),
    var(--maido-stage4i-inner-hero-image);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  color: #fff;
}

.maido-stage4i-inner-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(0deg, rgba(0,0,0,.28), rgba(0,0,0,0) 48%);
  pointer-events: none;
}

.maido-stage4i-inner-hero__content {
  position: relative;
  z-index: 1;
  width: min(1180px, calc(100% - 64px));
  margin: 0 auto;
}

.maido-stage4i-inner-hero__kicker {
  margin: 0 0 14px;
  font-family: var(--maido-stage4i-menu-font) !important;
  font-size: clamp(15px, 1.05vw, 18px);
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: #ffffff;
  text-shadow: 0 2px 3px rgba(0,0,0,.35);
}

.maido-stage4i-inner-hero__title {
  margin: 0;
  font-family: var(--maido-stage4i-hero-title-font) !important;
  font-size: clamp(48px, 5.2vw, 86px);
  font-weight: 600;
  line-height: .9;
  letter-spacing: -0.05em;
  color: #ffffff;
  text-transform: uppercase;
  text-shadow: 0 2px 4px rgba(0,0,0,.30);
  max-width: 1120px;
}

@media (min-width: 981px) {
  .maido-stage4i-inner-hero {
    min-height: clamp(360px, 38vw, 550px);
    padding-top: var(--maido-stage4i-desktop-header-height);
    display: flex;
    align-items: flex-end;
    padding-bottom: clamp(56px, 6vw, 96px);
  }
}

@media (max-width: 980px) {
  body.maido-stage4i-inner-page .site-header:not(.site-header--hero) {
    position: relative !important;
    background: #fff !important;
    z-index: 80 !important;
  }

  .maido-stage4i-inner-hero {
    min-height: min(62vh, 520px);
    padding: clamp(170px, 28vw, 220px) 22px 44px;
    background-position: center center;
  }

  .maido-stage4i-inner-hero__content {
    width: 100%;
    margin: 0;
  }

  .maido-stage4i-inner-hero__kicker {
    font-size: 13px;
    margin-bottom: 10px;
    letter-spacing: .2em;
  }

  .maido-stage4i-inner-hero__title {
    font-size: clamp(40px, 12vw, 64px);
    line-height: .92;
    letter-spacing: -0.055em;
    max-width: 92vw;
    overflow-wrap: normal;
    word-break: normal;
  }
}

/* -------------------------------------------------------------------------
   HIDE OLD INNER PAGE TITLE PANELS WHEN THE NEW HERO IS PRESENT
   These selectors are intentionally specific/common only. If a page uses a
   different wrapper, nothing is hidden and the page remains safe.
   ------------------------------------------------------------------------- */
body.maido-stage4i-inner-page .maido-stage4i-main > .page-hero:first-child,
body.maido-stage4i-inner-page .maido-stage4i-main > .category-hero:first-child,
body.maido-stage4i-inner-page .maido-stage4i-main > .category-header:first-child,
body.maido-stage4i-inner-page .maido-stage4i-main > .listing-hero:first-child,
body.maido-stage4i-inner-page .maido-stage4i-main > .archive-hero:first-child,
body.maido-stage4i-inner-page .maido-stage4i-main > .hero-section:first-child,
body.maido-stage4i-inner-page .maido-stage4i-main > .title-section:first-child {
  display: none !important;
}

/* If an existing grey intro block remains, reduce the huge spacing so it does
   not fight the new hero. */
body.maido-stage4i-inner-page .maido-stage4i-main > section:first-child[style*="background"],
body.maido-stage4i-inner-page .maido-stage4i-main > section:first-child[class*="intro"],
body.maido-stage4i-inner-page .maido-stage4i-main > section:first-child[class*="heading"] {
  margin-top: 0 !important;
}