/*
 * FoodX / Shaktisarvo site header
 * Rendered on every page via the [foodx_navbar] shortcode in parts/header.html.
 * Breakpoints: >=900px full bar | <900px collapsed panel with hamburger.
 */

.fx-announce{
  background:#1B4D3E; color:#DFF3E8; text-align:center;
  font-size:13px; font-weight:600; letter-spacing:.04em;
  padding:9px 16px; line-height:1.35;
}

/* The white bar is position:sticky, but a sticky element can only travel
 * within its containing block — and the <header class="site-header"> template
 * part wrapper is only as tall as the announcement plus the bar itself, so it
 * had nowhere to go. display:contents removes that wrapper's box, scoping the
 * sticky bar to the page flow instead. The announcement scrolls away above it;
 * only the white bar pins. */
.site-header{ display:contents; }

/* Every header box sizes with its padding/border included. Without this the
 * mobile search bar (width:100% + 16px padding + border) overflows the
 * viewport and gets clipped on the right. Scoped to header classes so it can't
 * affect the rest of the page. */
.fx-hdr,.fx-hdr *,.fx-announce,.fx-announce *{ box-sizing:border-box; }

.fx-header{
  position:sticky; top:0; z-index:9990;
  background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border-bottom:1px solid #EDEFEC;
  font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
.fx-hdr{
  position:relative;
  max-width:1240px; margin:0 auto; padding:12px 24px;
  display:flex; align-items:center; gap:28px;
}

/* ---------------- brand ---------------- */
.fx-brand{ display:flex; align-items:center; gap:12px; flex-shrink:0; text-decoration:none; }
.fx-mark{
  width:48px; height:48px; border-radius:50%; flex-shrink:0; overflow:hidden;
  border:2px solid #4CBB17; box-shadow:0 0 0 3px rgba(229,142,38,.25);
  background:#fff url("data:image/webp;base64,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") center/cover no-repeat;
}
.fx-brand img.fx-mark-img{
  height:50px; width:auto; max-width:240px; flex-shrink:0; object-fit:contain;
}
.fx-wordmark{ display:flex; flex-direction:column; line-height:1.05; }
.fx-name{
  font-family:'Bricolage Grotesque',-apple-system,BlinkMacSystemFont,sans-serif;
  font-weight:800; font-size:19px; color:#1B4D3E; letter-spacing:.01em;
}
.fx-sub{ font-size:10.5px; font-weight:700; color:#E58E26; letter-spacing:.22em; margin-top:2px; }

/* panel wrapper: invisible on desktop, dropdown on mobile */
.fx-panel{ display:contents; }

/* ---------------- nav ---------------- */
.fx-nav{ display:flex; align-items:center; gap:26px; }
.fx-nav ul{ display:flex; align-items:center; gap:26px; list-style:none; margin:0; padding:0; }
.fx-nav li{ margin:0; }
.fx-nav a{
  font-size:14.5px; font-weight:600; color:#1B4D3E;
  text-decoration:none; white-space:nowrap; transition:color .18s;
}
.fx-nav a:hover,.fx-nav a:focus-visible{ color:#4CBB17; }
.fx-nav .current-menu-item > a{ color:#4CBB17; }

/* ---------------- search ---------------- */
.fx-search{
  display:flex; align-items:center; gap:10px;
  background:#fff; border:1.5px solid #E1E5E0; border-radius:999px;
  padding:8px 16px; width:240px; margin-left:auto;
  transition:border-color .18s;
}
.fx-search:focus-within{ border-color:#4CBB17; }
.fx-search svg{ flex-shrink:0; }
.fx-search input{
  border:0; outline:0; background:transparent; width:100%;
  font-family:inherit; font-size:13.5px; color:#1B2A24; padding:0;
}
.fx-search input::placeholder{ color:#8A9691; }

/* ---------------- actions ---------------- */
.fx-fav{
  position:relative; width:42px; height:42px; border-radius:50%; flex-shrink:0;
  border:1.5px solid #E1E5E0; background:#fff; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:border-color .18s;
}
.fx-fav:hover{ border-color:#E58E26; }

/* Wishlist count badge, added client-side by foodx-wishlist.js. */
.fx-fav-badge{
  position:absolute; top:-4px; right:-4px;
  min-width:18px; height:18px; padding:0 5px;
  border-radius:999px; background:#E05A2B; color:#fff;
  font-size:10.5px; font-weight:800; line-height:1;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 0 2px #fff;
}
.fx-cart{
  position:relative; height:42px; flex-shrink:0;
  border-radius:999px; border:0; background:#1B4D3E; color:#fff;
  cursor:pointer; text-decoration:none;
  display:flex; align-items:center; gap:8px; padding:0 18px;
  font-family:inherit; font-size:14px; font-weight:700;
  transition:background .18s;
}
.fx-cart:hover,.fx-cart:focus-visible{ background:#163F33; color:#fff; }
.fx-badge{
  background:#E58E26; color:#fff; font-size:11px; font-weight:800;
  min-width:20px; height:20px; border-radius:999px; padding:0 5px;
  display:flex; align-items:center; justify-content:center;
}

/* ---------------- hamburger ---------------- */
.fx-toggle{ position:absolute; opacity:0; pointer-events:none; width:0; height:0; }
.fx-burger{
  display:none; width:44px; height:44px; flex-shrink:0;
  border:1.5px solid #E1E5E0; border-radius:12px; background:#fff;
  cursor:pointer; align-items:center; justify-content:center;
}
.fx-burger span{
  display:block; width:19px; height:2px; border-radius:2px;
  background:#1B4D3E; position:relative; transition:background .2s;
}
.fx-burger span::before,.fx-burger span::after{
  content:""; position:absolute; left:0; width:19px; height:2px;
  border-radius:2px; background:#1B4D3E; transition:transform .22s ease;
}
.fx-burger span::before{ top:-6px; }
.fx-burger span::after{ top:6px; }
.fx-toggle:focus-visible + .fx-burger{ outline:2px solid #4CBB17; outline-offset:2px; }

/* ======================= DESKTOP ======================= */
/* .fx-panel is display:contents here, so .fx-nav and .fx-search are direct
 * flex items of .fx-hdr and can be ordered alongside .fx-fav / .fx-cart.
 * DOM order is left alone on purpose: the #fx-toggle checkbox has to stay
 * before .fx-burger and .fx-panel for the mobile :checked ~ selectors. */
@media (min-width:900px){
  .fx-hdr{ gap:12px; }

  .fx-brand{ order:1; }
  .fx-nav{ order:2; margin-left:16px; }
  .fx-search{ order:3; margin-left:auto; }
  .fx-fav{ order:4; }
  .fx-cart{ order:5; }
}

/* ======================= MOBILE ======================= */
@media (max-width:899px){
  .fx-hdr{ gap:14px; padding:10px 16px; flex-wrap:wrap; }

  .fx-brand{ order:1; }
  /* Logo mark only on mobile — the wordmark ate enough width to wrap
   * the hamburger onto a second row. */
  .fx-wordmark{ display:none; }
  .fx-fav{ order:2; margin-left:auto; }
  .fx-cart{ order:3; padding:0 14px; }
  .fx-burger{ display:flex; order:4; }

  .fx-toggle:checked + .fx-burger span{ background:transparent; }
  .fx-toggle:checked + .fx-burger span::before{ transform:translateY(6px) rotate(45deg); }
  .fx-toggle:checked + .fx-burger span::after{ transform:translateY(-6px) rotate(-45deg); }

  .fx-panel{
    display:none; order:5; width:100%;
    padding:6px 0 10px; margin-top:4px; border-top:1px solid #EDEFEC;
  }
  .fx-toggle:checked ~ .fx-panel{ display:block; }

  .fx-nav,.fx-nav ul{ flex-direction:column; align-items:stretch; gap:0; width:100%; }
  .fx-nav a{
    display:block; width:100%; padding:13px 4px; font-size:15.5px;
    border-bottom:1px solid #F1F3F0;
  }
  .fx-nav li:last-child a{ border-bottom:0; }

  .fx-search{ width:100%; margin:12px 0 0; padding:11px 16px; min-width:0; }
  .fx-search input{ font-size:16px; } /* 16px prevents iOS zoom-on-focus */
}

@media (max-width:400px){
  .fx-hdr{ gap:10px; padding:10px 14px; }
  .fx-mark{ width:42px; height:42px; }
  .fx-brand img.fx-mark-img{ height:42px; width:auto; }
  .fx-cart{ padding:0 12px; font-size:13px; }
  .fx-announce{ font-size:11.5px; letter-spacing:.02em; padding:8px 12px; }
}

@media (prefers-reduced-motion:reduce){
  .fx-header *,.fx-burger span,
  .fx-burger span::before,.fx-burger span::after{ transition:none !important; }
}