/* =========================================================
   WEATHERDUCK — HEADER DESKTOP (CLEAN FINAL)
   - BG: #FAF9F5
   - Brand green: #425A47
   - Taller header via outer padding only
   - Controls fixed height
   - EVEN spacing: input → CTA equals CTA → Forecast
   - Placeholder slightly less faint
   - Shop parent items show a dropdown arrow (rotates when opened)
   - Shop sub-menu hidden until click (JS toggles .sub-open)
   ========================================================= */

/* Local aliases — inherits from design-tokens.css */
:root{
  --wd-bg: var(--wd-green-light);
  --wd-astro-blue: var(--wd-blue-astro);

  --wd-text: var(--wd-text-primary);

  --wd-shadow: var(--wd-shadow-lg);

  --wd-font: 13px;

  --wd-gap-main: var(--wd-space-2xl);
  --wd-gap-brand-search: 44px;
  --wd-gap-actions: var(--wd-space-lg);
  --wd-gap-input-cta: var(--wd-space-sm);
}

/* Header bar */
.wdh.wdh--desktop{
  width: 100%;
  background: var(--wd-bg);
  position: relative;
  z-index: 9999;

  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: var(--wd-font);
}

/* 1200px container + taller via padding only */
.wdh__wrap{
  width: 1168px;
  max-width: 100%;
  margin: 0 auto;

  padding: 40px 0;
  display: flex;
  align-items: center;
  gap: var(--wd-gap-main);
}

/* Brand */
.wdh__brand{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  flex: 0 0 auto;
}

.wdh__logo{
  width: 48px;
  height: 48px;
  display: block;
  image-rendering: pixelated;
}

.wdh__wordmark{
  font-weight: 900;
  font-size: 25px;
  letter-spacing: .03em;
  color: var(--wd-green);
  line-height: 1;
}

/* Search */
.wdh__search{
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;

  /* This gap controls input -> CTA spacing */
  gap: 8px;
}

.wdh__input{
  flex: 0 1 400px;
  width: 400px;
  max-width: 100%;

  height: var(--wd-control-h);
  padding: 0 16px;

  border: 1px solid var(--wd-border-strong);
  border-radius: var(--wd-radius-lg);
  outline: none;

  background: var(--wd-bg-card);
  color: var(--wd-text);

  font-size: 12px;
  letter-spacing: .02em;
  text-transform: none;

  line-height: 1;
}

.wdh__input::placeholder{
  text-transform: none;
  font-size: 13px;
  letter-spacing: normal;

  /* less faint + slightly bolder */
  color: rgba(0,0,0,.58);
  font-weight: 600;
}

.wdh__input:focus{
  border-color: var(--wd-green);
  box-shadow: var(--wd-focus-ring);
}

/* Buttons */
.wdh__btn{
  height: var(--wd-control-h);
  padding: 0 16px;
  border-radius: var(--wd-radius-lg);

  font-weight: 700;
  font-size: 12px;
  letter-spacing: .05em;
  text-transform: uppercase;

  cursor: pointer;
  user-select: none;

  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;

  border: 1px solid transparent;
  background: transparent;
  color: var(--wd-text);

  line-height: 1;
}

.wdh__btn--primary{
  background: var(--wd-green);
  color: var(--wd-text-on-green);
}
.wdh__btn--primary:hover{ filter: brightness(.96); }

.wdh__btn--ghost{
  background: var(--wd-bg-page);
  border-color: var(--wd-border-strong);
  color: var(--wd-text);
}
.wdh__btn--ghost:hover{ background: var(--wd-bg-subtle); }

.wdh__btn--summary{
  list-style: none;
}
.wdh__btn--summary::-webkit-details-marker{ display:none; }

/* Right actions */
.wdh__actions{
  display: flex;
  align-items: center;

  /* This gap controls CTA -> Forecast spacing */
  gap: var(--wd-gap-actions);

  flex: 0 0 auto;
}

/* Dropdown */
.wdh__drop{
  position: relative;
}

.wdh__panel{
  position: absolute;
  right: 0;
  top: calc(100% + 10px);

  min-width: 240px;
  background: var(--wd-bg-card);

  border: 1px solid var(--wd-border);
  border-radius: var(--wd-radius-lg);
  box-shadow: var(--wd-shadow);

  padding: 10px;
}

/* Menu list */
.wdh__menu{
  margin: 0;
  padding: 0;
  list-style: none;
}

.wdh__menu li{ margin: 0; }

.wdh__menu a{
  display: block;
  padding: 12px 12px;
  border-radius: var(--wd-radius-md);
  text-decoration: none;

  color: var(--wd-text);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.wdh__menu a:hover{ background: var(--wd-bg-subtle); }

/* Parent item arrow (e.g. SHOP) */
.wdh__menu li.menu-item-has-children > a{
  position: relative;
  padding-right: 28px;
}

.wdh__menu li.menu-item-has-children > a::after{
  content: "▾";
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  opacity: .7;
  font-size: 12px;
  line-height: 1;
  display: inline-block;
  transition: transform .15s ease, opacity .15s ease;
}

.wdh__menu li.menu-item-has-children.sub-open > a::after{
  transform: translateY(-50%) rotate(180deg);
  opacity: .95;
}

/* Shop children: hidden until JS opens */
.wdh__menu .sub-menu{
  display: none;
  margin: 8px 0 0 0;
  padding: 8px 0 0 0;
  list-style: none;
  border-top: 1px solid rgba(0,0,0,.08);
}

.wdh__menu li.sub-open > .sub-menu{
  display: block;
}

.wdh__menu .sub-menu a{
  padding-left: 14px;
  font-weight: 650;
  color: rgba(0,0,0,.86);
}

/* Icon + caret */
.wdh__icon{
  display: inline-flex;
  align-items: center;
  opacity: .95;
}
.wdh__caret{
  opacity: .8;
}


/* Auth menu visibility — hidden until JS sets body class */
.wd-guest-only,
.wd-member-only { display: none; }
.wd-logged-out .wd-guest-only { display: list-item; }
.wd-logged-in .wd-member-only  { display: list-item; }

/* Separator line before auth items */
.wd-logged-out .wd-auth-first.wd-guest-only,
.wd-logged-in .wd-auth-first.wd-member-only {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(0,0,0,.08);
}

/* Hide desktop on mobile */
@media (max-width: 900px){
  .wdh.wdh--desktop{ display:none; }
}