/*
Theme Name:   Hello Menopausia Child
Theme URI:    https://wp.hellomenopausia.com
Description:  Child theme for Hello Menopausia. Holds the header styling, SEO meta output and performance tweaks so the parent theme can update safely.
Author:       Anirudha Talmale
Template:     hello-elementor
Version:      1.2.0
Text Domain:  hello-menopausia-child
*/

/* ===================================================================
   HEADER - modelled on shop.hellomenopausia.com
   The parent theme renders:
     header.site-header > .header-inner > .site-branding + nav.site-navigation
     plus .site-navigation-toggle-holder (burger) and
     nav.site-navigation-dropdown (the mobile panel).
   We style those rather than inventing our own.
   =================================================================== */
:root{
  --hm-ink:#262521;
  --hm-blue:#8AB1C4;
  --hm-line:#E8E6E2;
  --hm-header-h:72px;
}

header.site-header{
  position:sticky; top:0; z-index:999;
  display:block;
  padding:0;
  background:#fff;
  border-bottom:1px solid var(--hm-line);
  font-family:"Work Sans",sans-serif;
}

header.site-header .header-inner{
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:nowrap; gap:24px;
  min-height:var(--hm-header-h);
  padding:0 40px;
}

/* ---------- logo ---------- */
header.site-header .site-branding{ flex:0 0 auto; display:flex; align-items:center; }
header.site-header .site-branding .site-logo img,
header.site-header .custom-logo{ height:26px; width:auto; display:block; }
header.site-header .site-title{
  font-size:18px; font-weight:700; margin:0; letter-spacing:.3px;
}
header.site-header .site-title a{ color:var(--hm-ink); text-decoration:none; }
header.site-header .site-description{ display:none !important; }

/* ---------- desktop nav ---------- */
header.site-header nav.site-navigation{ flex:1 1 auto; display:flex; justify-content:center; }
header.site-header nav.site-navigation ul.menu{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:nowrap; align-items:center; gap:34px;
}
header.site-header nav.site-navigation ul.menu li{ display:block; position:relative; padding:0; }
header.site-header nav.site-navigation ul.menu li a{
  display:block;
  font-size:12px; font-weight:500; letter-spacing:1.6px;
  text-transform:uppercase; text-decoration:none;
  color:var(--hm-ink); padding:26px 0; white-space:nowrap;
  transition:color .18s ease;
}
header.site-header nav.site-navigation ul.menu li a:hover,
header.site-header nav.site-navigation ul.menu li.current-menu-item > a{ color:var(--hm-blue); }

/* our own caret, the theme's is suppressed */
header.site-header nav.site-navigation ul.menu li.menu-item-has-children::after{ display:none !important; }
header.site-header nav.site-navigation ul.menu li.menu-item-has-children{ padding-inline-end:0 !important; }
header.site-header nav.site-navigation ul.menu li.menu-item-has-children > a::after{
  content:""; display:inline-block; margin-left:8px; vertical-align:middle;
  width:6px; height:6px;
  border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);
}

/* ---------- desktop dropdown ---------- */
header.site-header nav.site-navigation ul.menu li ul.sub-menu{
  position:absolute; inset-block-start:100%; inset-inline-start:50%;
  transform:translateX(-50%) translateY(8px);
  display:none; min-width:236px; padding:10px 0; margin:0;
  background:#fff; border:1px solid var(--hm-line); border-radius:12px;
  box-shadow:0 14px 34px rgba(38,37,33,.10);
  z-index:5;
}
header.site-header nav.site-navigation ul.menu li:hover > ul.sub-menu,
header.site-header nav.site-navigation ul.menu li:focus-within > ul.sub-menu{
  display:block; transform:translateX(-50%) translateY(0);
}
header.site-header nav.site-navigation ul.menu li ul.sub-menu li{ border:0 !important; width:100%; }
header.site-header nav.site-navigation ul.menu li ul.sub-menu li a{
  padding:9px 20px; font-size:11.5px; letter-spacing:.9px; white-space:normal;
}
header.site-header nav.site-navigation ul.menu li ul.sub-menu li a:hover{ background:#F6F4F0; }

/* ---------- burger (theme's own) ---------- */
header.site-header .site-navigation-toggle-holder{
  display:none; flex:0 0 auto; padding:0; margin-inline-start:auto;
}
header.site-header .site-navigation-toggle{
  background:none !important; border:0 !important; padding:8px !important;
  color:var(--hm-ink) !important; border-radius:0 !important;
}
header.site-header .site-navigation-toggle-icon{ width:22px; }
header.site-header .site-navigation-toggle-icon::before,
header.site-header .site-navigation-toggle-icon::after{ height:1.6px !important; }

/* ---------- mobile panel (theme's own dropdown nav) ---------- */
header.site-header nav.site-navigation-dropdown{ display:none; }

@media (max-width:1024px){
  header.site-header .header-inner{ padding:0 18px; }

  /* hide the inline nav, show the burger */
  header.site-header nav.site-navigation{ display:none !important; }
  header.site-header .site-navigation-toggle-holder{ display:flex !important; }

  /* the sliding panel */
  /* The theme sets bottom:0 on this panel; combined with our top:100% that
     computes to zero height, so bottom must be released explicitly. */
  header.site-header nav.site-navigation-dropdown{
    display:block; position:absolute;
    inset-inline:0; top:100%; bottom:auto !important;
    margin-block-start:0 !important;
    overflow:hidden;
    background:#fff; border-top:1px solid var(--hm-line);
    box-shadow:0 18px 30px rgba(38,37,33,.08);
  }
  /* the theme absolutely positions this UL, which leaves the panel with no
     height at all - put it back in flow */
  header.site-header nav.site-navigation-dropdown ul.menu{
    list-style:none; margin:0; padding:6px 0 14px; width:100%;
    position:static !important;
  }
  header.site-header nav.site-navigation-dropdown ul.menu li{
    display:block; width:100%; border:0;
  }
  header.site-header nav.site-navigation-dropdown ul.menu li a{
    display:block; background:none !important; box-shadow:none !important;
    padding:13px 18px !important;
    font-size:12px; font-weight:500; letter-spacing:1.4px;
    text-transform:uppercase; color:var(--hm-ink) !important; text-decoration:none;
  }
  header.site-header nav.site-navigation-dropdown ul.menu li.current-menu-item > a{
    color:var(--hm-blue) !important;
  }
  header.site-header nav.site-navigation-dropdown ul.menu ul.sub-menu{
    padding:0 0 6px 16px; margin:0;
  }
  header.site-header nav.site-navigation-dropdown ul.menu ul.sub-menu li a{
    padding:10px 18px !important; letter-spacing:1px; opacity:.85;
  }
}


/* ===================================================================
   FRONT PAGE: transparent header sitting on top of the hero photo,
   white logo and white links, exactly like the Shopify store.
   It turns solid white once you scroll so the nav stays readable.
   =================================================================== */
body.home header.site-header{
  position:fixed; inset-inline:0; top:0;
  background:transparent;
  border-bottom:0;
  transition:background .25s ease, border-color .25s ease, box-shadow .25s ease;
}
/* the stored logo is the black one; invert paints it white */
body.home header.site-header .custom-logo,
body.home header.site-header .site-branding .site-logo img{
  filter:brightness(0) invert(1);
  transition:filter .25s ease;
}
body.home header.site-header .site-title a{ color:#fff; }

/* ONLY the top-level links go white - submenu links sit on a white panel */
body.home header.site-header nav.site-navigation ul.menu > li > a{ color:#fff; }
body.home header.site-header nav.site-navigation ul.menu > li > a:hover{ color:var(--hm-blue); }
body.home header.site-header .site-navigation-toggle{ color:#fff !important; }

/* scrolled, or with the mobile panel open: solid white bar */
body.home.hm-solid header.site-header{
  background:#fff;
  border-bottom:1px solid var(--hm-line);
  box-shadow:0 2px 14px rgba(38,37,33,.06);
}
body.home.hm-solid header.site-header .custom-logo,
body.home.hm-solid header.site-header .site-branding .site-logo img{ filter:none; }
body.home.hm-solid header.site-header .site-title a{ color:var(--hm-ink); }
body.home.hm-solid header.site-header nav.site-navigation ul.menu > li > a{ color:var(--hm-ink); }
body.home.hm-solid header.site-header nav.site-navigation ul.menu > li > a:hover{ color:var(--hm-blue); }
body.home.hm-solid header.site-header .site-navigation-toggle{ color:var(--hm-ink) !important; }

/* inner pages keep the solid white header, so nothing else changes */

/* an anchor target must not hide under the sticky header */
html{ scroll-padding-top:calc(var(--hm-header-h) + 10px); }