/* =====================================================================
   hakolawood — header (Step 1)
   wp-content/themes/hakolawood-child/assets/css/header.css
   Palette is locked (brand sheet). Coral #D85959, deep #C0463F.
   ===================================================================== */

.hw-header{
  position:sticky;
  top:0;
  z-index:100;
  background:#FFFFFF;
  border-bottom:1px solid #E4DFD9;
  box-shadow:0 1px 12px -8px rgba(50,32,16,0.35);
  font-family:'Manrope',system-ui,'Helvetica Neue',Helvetica,Arial,sans-serif;
  color:#1C1B1A;
  -webkit-font-smoothing:antialiased;
}
.hw-header *{box-sizing:border-box;}
.hw-header__inner{
  height:75px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 calc(64px + 5%);
}

/* ---- logo ---- */
.hw-logo{display:flex;align-items:center;gap:16px;text-decoration:none;color:#1C1B1A;}
.hw-logo__mark{display:block;width:35px;height:49px;}
.hw-logo__word{font-family:'Montserrat',sans-serif;font-weight:300;font-size:28px;letter-spacing:0.17em;line-height:1;}

/* ---- nav ---- */
.hw-nav{display:flex;align-items:center;gap:36px;height:75px;}
.hw-menu{display:flex;align-items:center;gap:36px;list-style:none;margin:0;padding:0;height:75px;}
.hw-menu__item{position:relative;display:flex;align-items:center;height:75px;}
.hw-menu__link{
  text-decoration:none;font-size:16px;font-weight:400;line-height:1;color:#1C1B1A;
  transition:color .18s ease;
}
.hw-menu__link:hover{color:#D85959;}

/* ---- shop mega-panel ---- */
.hw-mega{
  position:absolute;top:71px;left:-28px;width:360px;
  background:#FFFFFF;border:1px solid #E4DFD9;border-radius:5px;
  box-shadow:0 18px 44px -30px rgba(50,32,16,0.28);
  padding:30px 32px;
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .22s cubic-bezier(.2,.7,.3,1),transform .22s cubic-bezier(.2,.7,.3,1),visibility .22s;
  z-index:50;
}
.hw-menu__item--mega:hover .hw-mega,
.hw-menu__item--mega:focus-within .hw-mega{opacity:1;visibility:visible;transform:translateY(0);}
.hw-mega__label{font-size:13px;letter-spacing:0.14em;text-transform:uppercase;color:#8A847E;margin-bottom:16px;}
.hw-mega__item{display:block;text-decoration:none;color:#1C1B1A;padding:9px 0;}
.hw-mega__title{display:block;font-size:16px;font-weight:500;line-height:1.15;}
.hw-mega__sub{display:block;font-size:13px;color:#8A847E;margin-top:3px;}
.hw-mega__divider{height:1px;background:#E4DFD9;margin:16px 0;}
.hw-mega__item--muted{display:flex;align-items:center;gap:12px;color:#8A847E;padding:4px 0;}
.hw-mega__item--muted .hw-mega__title{color:#8A847E;}
.hw-mega__soon{font-size:12px;letter-spacing:0.04em;color:#8A847E;border:1px solid #E4DFD9;border-radius:6px;padding:3px 10px;}

/* ---- CTA (fixed) ---- */
.hw-cta{
  display:inline-flex;align-items:center;gap:9px;height:44px;padding:0 22px;
  border-radius:4px;background:#D85959;color:#fff;
  font-size:16px;font-weight:500;letter-spacing:0.01em;text-decoration:none;
  animation:hk-pulse 2.4s ease-out infinite;transition:background .18s ease;
}
.hw-cta:hover{background:#C0463F;}
@keyframes hk-pulse{
  0%{box-shadow:0 0 0 0 rgba(216,89,89,0.45);}
  70%{box-shadow:0 0 0 11px rgba(216,89,89,0);}
  100%{box-shadow:0 0 0 0 rgba(216,89,89,0);}
}
@media (prefers-reduced-motion:reduce){.hw-cta{animation:none;}}

/* ---- utilities ---- */
.hw-utils{display:flex;align-items:center;gap:26px;}
.hw-search{position:relative;display:flex;align-items:center;}
/* Search field is a dropdown anchored under the magnifying glass; hidden until opened.
   Selectors are prefixed with .hw-header to outrank Kadence's input[type=search]
   rules (which otherwise force width:100% -> ~20px inside the tiny button box). */
.hw-header .hw-search__field{
  position:absolute;top:calc(100% + 12px);right:0;
  width:260px;max-width:78vw;padding:11px 14px;
  border:1px solid #E4DFD9;border-radius:4px;background:#FFFFFF;outline:none;
  font-family:inherit;font-size:15px;color:#1C1B1A;
  box-shadow:0 18px 44px -30px rgba(50,32,16,0.28);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .18s ease,transform .18s ease,visibility .18s;
  z-index:60;
}
.hw-header .hw-search.is-open .hw-search__field{opacity:1;visibility:visible;transform:translateY(0);}
.hw-search__btn{display:flex;align-items:center;justify-content:center;background:none;border:0;padding:0;cursor:pointer;color:#3A372F;transition:color .18s ease;}
.hw-search__btn:hover{color:#D85959;}

.hw-lang{display:flex;align-items:center;font-size:16px;letter-spacing:0.02em;}
.hw-lang__list{display:flex;align-items:center;gap:7px;list-style:none;margin:0;padding:0;}
.hw-lang__list li{display:flex;align-items:center;}
.hw-lang__list li + li::before{content:"/";color:#C7C2B6;margin-right:7px;}
.hw-lang__list a{display:inline-block;text-decoration:none;text-transform:uppercase;color:#8A847E;font-weight:400;transition:color .18s ease;}
.hw-lang__list a:hover{color:#D85959;}
.hw-lang__list .current-lang>a,.hw-lang__list .current-lang a{color:#C0463F;font-weight:600;}
.hw-lang--mobile{display:none;} /* only shown inside the mobile menu (see responsive) */

.hw-cart{position:relative;display:flex;color:#3A372F;text-decoration:none;transition:color .18s ease;}
.hw-cart:hover{color:#D85959;}
.hw-cart__count{
  position:absolute;top:-7px;right:-9px;min-width:18px;height:18px;padding:0 4px;
  border-radius:6px;background:#C0463F;color:#fff;font-size:11px;font-weight:600;
  display:flex;align-items:center;justify-content:center;line-height:1;
}

/* ---- mobile toggle (hidden on desktop) ---- */
.hw-burger{display:none;flex-direction:column;gap:5px;width:38px;height:38px;align-items:center;justify-content:center;background:none;border:0;padding:0;cursor:pointer;}
/* Kill the theme's default <button> background/hover so the burger never shows a
   stray coloured box; keep it a clean icon button in every state. */
.hw-burger,.hw-burger:hover,.hw-burger:focus,.hw-burger:active{background:transparent!important;box-shadow:none!important;outline:none;}
.hw-burger span{display:block;width:22px;height:2px;background:#1C1B1A;transition:background .18s ease,transform .2s ease,opacity .2s ease;}
/* Hover/focus tints the lines coral, matching the nav links — consistent across the header. */
.hw-burger:hover span,.hw-burger:focus-visible span{background:#D85959;}
.hw-header.is-mobile-open .hw-burger span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.hw-header.is-mobile-open .hw-burger span:nth-child(2){opacity:0;}
.hw-header.is-mobile-open .hw-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* =====================================================================
   Responsive
   ===================================================================== */
@media (max-width:1180px){
  .hw-header__inner{padding:0 28px;}
  .hw-nav{gap:24px;}
  .hw-menu{gap:24px;}
}

@media (max-width:1024px){
  .hw-burger{display:flex;}
  /* full-screen drop panel toggled by the burger — full viewport width, left-aligned */
  .hw-nav{
    position:fixed;left:0;top:75px;
    width:100vw;height:calc(100vh - 75px);height:calc(100dvh - 75px);
    flex-direction:column;align-items:flex-start;gap:0;
    background:#FFFFFF;
    padding:8px 24px 32px;overflow-y:auto;
    display:none;z-index:90;
  }
  .hw-header.is-mobile-open .hw-nav{display:flex;}
  .hw-menu{flex-direction:column;align-items:stretch;width:100%;height:auto;gap:0;}
  /* stack each item (label above its mega-panel) and align left */
  .hw-menu__item{flex-direction:column;align-items:flex-start;width:100%;height:auto;}
  .hw-menu__link{padding:14px 0;font-size:18px;width:100%;}
  /* mega-panel inline, left-aligned, full width */
  .hw-mega{position:static;width:100%;opacity:1;visibility:visible;transform:none;
    box-shadow:none;border:0;border-top:1px solid #E4DFD9;border-radius:0;padding:12px 0 4px;}
  .hw-menu__item--mega:hover .hw-mega,
  .hw-menu__item--mega:focus-within .hw-mega{transform:none;}
  /* CTA sits on the first row (next to Shop), pinned to the right of the panel */
  .hw-cta{position:absolute;top:9px;right:24px;margin-top:0;}
  /* language switcher lives inside the mobile menu; hide the top-bar copy */
  .hw-utils .hw-lang{display:none;}
  .hw-lang--mobile{display:flex;margin-top:22px;}
}

@media (max-width:560px){
  .hw-header__inner{padding:0 18px;}
  .hw-logo__word{font-size:22px;letter-spacing:0.14em;}
  .hw-utils{gap:18px;}
}