/* ==========================================================================
   Elneeru — site header (one bar, every page)
   File: /wp-content/themes/botiga-child/assets/css/site-header.css

   Replaces both of the old bars: .el-nav (fixed, homepage) and
   .el-nav--solid (sticky category strip, inner pages). One component,
   rendered by elneeru_render_site_header() in site-header.php.

   Two page variants, and nothing else varies:
     .elh-hdr            — homepage: transparent over the hero
     .elh-hdr--inner     — every other page: frosted from the top
   One scroll state, added by site-header.js past 90px:
     .elh-hdr.is-stuck   — 60px, frosted, phone number swaps for WhatsApp

   Botiga's global `a:visited { color:#212121 }` beats class-only link
   colours, so every link below restates :visited. Do not drop them.
   ========================================================================== */

/* ── The bar's height, published ───────────────────────────────────────────
   Two numbers, because the bar condenses on scroll. They are published as
   custom properties for two reasons:

   1. Full-viewport templates (login, lost-password) subtract it rather than
      overflowing by a header's worth.
   2. Every sticky sub-bar on the site — the product page's Itinerary /
      Permits nav, the /treks/ filter bar, the blog category strip, the
      booking and order-summary cards — pins itself at --sticky-top-offset.
      That used to be one fixed number because the old bar was one fixed
      height. This one is not, so the offset has to follow it: `.elh-stuck`
      is put on <html> by site-header.js at the same moment the header
      condenses, and every sub-bar moves up with it. Pin nothing to a
      hardcoded pixel value. */
:root {
  --elh-h:       76px;   /* at rest */
  --elh-h-stuck: 60px;   /* past 90px of scroll */
}
@media (max-width: 760px) {
  :root { --elh-h: 58px; --elh-h-stuck: 54px; }
}
/* --sticky-top-offset is defined ONCE, in style.css, as --elh-h-stuck. It is
   deliberately not overridden here per scroll state: see the note there. The
   `elh-stuck` class site-header.js puts on <html> stays available for
   anything that genuinely needs to know the bar is condensed, but nothing
   pins to it any more. */

/* Any jump to an #anchor — a footer link, a FAQ deep link, a hash in a
   shared URL — otherwise lands the target under the sticky header. Pages
   with their own pinned sub-bar add its height on top of this. */
html { scroll-padding-top: calc(var(--elh-h-stuck, 60px) + 12px); }

/* Sub-bars follow the header's 76→60px condense; without the matching easing
   they jump the difference in one frame at the threshold. */
.elx-wrap,
.td-sticky-nav,
.blog-cat-filter,
.td-right,
.el-co-right,
.fx-ask-inner { transition: top 0.22s ease; }

.elh-hdr,
.elh-hdr *,
.elh-mm,
.elh-mm * { box-sizing: border-box; }

.elh-hdr {
  --elh-forest: #1A2E1A;
  --elh-lime:   #A8C957;
  --elh-cream:  #F5F0E8;
  --elh-wa:     #25D366;
  --elh-line:   rgba(168,201,87,0.18);

  position: sticky; top: 0; left: 0; right: 0;
  z-index: 200;
  height: var(--elh-h);
  display: flex; align-items: center; gap: 30px;
  padding: 0 clamp(16px, 3vw, 44px);
  margin: 0;
  font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
  background: linear-gradient(to bottom, rgba(7,14,7,0.8), rgba(7,14,7,0));
  transition: height 0.22s ease, background 0.22s ease;
}

/* Inner pages: frosted from the top, plus the hairline. Same heights,
   same scroll behaviour — one different background. */
.elh-hdr--inner {
  background: rgba(10,20,10,0.86);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  backdrop-filter: blur(14px) saturate(1.15);
  border-bottom: 1px solid var(--elh-line);
}

/* Scrolled: condensed and frosted — translucent over a real blur, never a
   flat fill, so the photograph keeps moving underneath it. */
.elh-hdr.is-stuck {
  height: var(--elh-h-stuck);
  background: rgba(10,20,10,0.78);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  backdrop-filter: blur(14px) saturate(1.15);
  border-bottom: 1px solid var(--elh-line);
}

/* There is deliberately NO `@supports not (backdrop-filter)` fallback here.
   An earlier version painted rgba(10,20,10,.94) for browsers without the
   filter — and any browser that reported no support (or mis-read the
   `not (A or B)` condition) got a near-opaque slab instead of frosted glass,
   which is exactly the "it goes solid when I scroll" the design does not do.
   Without it, such a browser simply gets the .78 translucent fill with no
   blur: still legible, still translucent, never solid. Do not add it back. */

/* ── wordmark ─────────────────────────────────────────────────────────── */
.elh-logo,
.elh-logo:visited,
.elh-logo:hover,
.elh-logo:focus {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.45rem; letter-spacing: 5px;
  color: var(--elh-lime) !important;
  text-decoration: none;
  line-height: 1; flex: none;
  transition: font-size 0.22s ease;
}
.elh-hdr.is-stuck .elh-logo { font-size: 1.2rem; }

/* ── nav: three sections, beside the wordmark ─────────────────────────── */
.elh-nav { display: flex; gap: 26px; align-items: center; }
.elh-nav a,
.elh-nav a:visited {
  font-size: 0.65rem; letter-spacing: 2px; text-transform: uppercase;
  color: rgba(245,240,232,0.76) !important;
  text-decoration: none;
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
  transition: color 0.2s;
}
.elh-nav a:hover { color: var(--elh-lime) !important; }
.elh-nav a.is-on,
.elh-nav a.is-on:visited {
  color: var(--elh-lime) !important;
  border-bottom-color: var(--elh-lime);
}

/* ── right group ──────────────────────────────────────────────────────── */
.elh-r { margin-left: auto; display: flex; align-items: center; gap: 18px; }

.elh-acct,
.elh-acct:visited {
  font-size: 0.65rem; letter-spacing: 2px; text-transform: uppercase;
  color: rgba(245,240,232,0.76) !important; text-decoration: none;
  transition: color 0.2s;
}
.elh-acct:hover { color: var(--elh-lime) !important; }

.elh-rule { width: 1px; height: 20px; background: rgba(245,240,232,0.2); flex: none; }

.elh-tel,
.elh-tel:visited {
  font-size: 0.66rem; letter-spacing: 1.4px;
  color: rgba(245,240,232,0.78) !important; text-decoration: none;
  font-variant-numeric: tabular-nums; white-space: nowrap;
  transition: color 0.2s;
}
.elh-tel:hover { color: var(--elh-lime) !important; }

/* WhatsApp earns its place only once the hero has scrolled away, and the
   phone number steps aside for it so the row never carries two contacts. */
.elh-cta,
.elh-cta:visited {
  display: none; align-items: center; gap: 8px;
  background: var(--elh-wa); color: #fff !important;
  font-size: 0.63rem; font-weight: 600; letter-spacing: 2px;
  text-transform: uppercase; padding: 10px 18px;
  text-decoration: none; border: none;
  transition: transform 0.2s, filter 0.2s;
}
.elh-cta svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.elh-hdr.is-stuck .elh-cta { display: inline-flex; }
.elh-hdr.is-stuck .elh-tel { display: none; }
.elh-cta:hover { filter: brightness(1.08); transform: translateY(-2px); }

/* ── header search — identical on every page, in every state ──────────── */
.elh-search { display: flex; align-items: center; gap: 0; margin: 0; position: relative; }
/* Restated locally: the label is a flex child here, so if the parent theme
   ever stops shipping .screen-reader-text it would take up space. */
.elh-hdr .screen-reader-text {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0; padding: 0; margin: -1px;
}
/* visibility (not just width:0) so a collapsed field is out of the tab order
   too — the rule is never two search inputs reachable at once, not just
   never two on screen. */
.elh-search input {
  width: 0; opacity: 0; visibility: hidden;
  padding: 0; border: none; background: none;
  color: var(--elh-cream);
  font-family: 'DM Sans', system-ui, sans-serif; font-size: 0.82rem;
  height: 34px; border-radius: 0; box-shadow: none;
  transition: width 0.22s ease, opacity 0.18s ease, padding 0.22s ease;
}
.elh-search.is-open input {
  width: 210px; opacity: 1; visibility: visible; padding: 0 12px;
  background: rgba(245,240,232,0.08);
  border: 1px solid rgba(245,240,232,0.2); border-right: none;
}
.elh-search input::placeholder { color: rgba(245,240,232,0.42); }
.elh-search input:focus { outline: none; }

.elh-mini {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0; flex: none;
  border: 1px solid rgba(245,240,232,0.2); background: none;
  border-radius: 0; cursor: pointer;
}
.elh-mini svg { width: 15px; height: 15px; stroke: rgba(245,240,232,0.7); fill: none; stroke-width: 1.7; }
.elh-mini:hover { border-color: var(--elh-lime); background: none; }
.elh-mini:hover svg { stroke: var(--elh-lime); }

.elh-burger { display: none; background: none; border: none; padding: 6px; cursor: pointer; }
.elh-burger svg {
  stroke: var(--elh-cream); width: 22px; height: 22px;
  fill: none; stroke-width: 1.8; stroke-linecap: round;
}

/* The signed-in avatar menu (.nav-account) is reused from the old bar —
   it only needed a flex parent, which .elh-r provides. */
.elh-r .nav-account-menu { top: calc(100% + 10px); }

.elh-hdr :focus-visible,
.elh-mm :focus-visible { outline: 2px solid var(--elh-lime); outline-offset: 2px; }

/* ── mobile menu ──────────────────────────────────────────────────────── */
.elh-mm {
  position: fixed; inset: 0; z-index: 260;
  background: rgba(9,18,9,0.985);
  padding: 76px 22px 22px;
  display: none; overflow-y: auto;
  font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
}
.elh-mm.is-open { display: block; }
body.elh-menu-open { overflow: hidden; }

.elh-mm a,
.elh-mm a:visited {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 0; font-size: 1.05rem;
  color: var(--elh-cream, #F5F0E8) !important; text-decoration: none;
  border-bottom: 1px solid rgba(168,201,87,0.14);
  font-weight: 500;
}
.elh-mm a em {
  margin-left: auto; font-style: normal; font-size: 0.58rem;
  letter-spacing: 1.8px; text-transform: uppercase; color: rgba(245,240,232,0.34);
}
.elh-mm a.is-on,
.elh-mm a.is-on:visited { color: #A8C957 !important; }

.elh-mm .elh-mm-wa,
.elh-mm .elh-mm-wa:visited {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  margin-top: 22px; border-bottom: none;
  background: #25D366; color: #fff !important;
  font-size: 0.7rem; font-weight: 600; letter-spacing: 2px;
  text-transform: uppercase; padding: 15px;
}
.elh-mm .elh-mm-ph,
.elh-mm .elh-mm-ph:visited {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  margin-top: 8px;
  border: 1px solid rgba(168,201,87,0.4); border-bottom: 1px solid rgba(168,201,87,0.4);
  color: #A8C957 !important;
  font-size: 0.7rem; font-weight: 600; letter-spacing: 2px;
  text-transform: uppercase; padding: 14px;
}
.elh-mm svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.elh-mm-x {
  position: absolute; top: 20px; right: 20px;
  background: none; border: none; cursor: pointer; padding: 6px;
}
.elh-mm-x svg { stroke: #F5F0E8; width: 22px; height: 22px; }
.elh-mm-logo,
.elh-mm-logo:visited {
  display: block; border-bottom: none; padding: 0 0 10px;
  font-family: 'Bebas Neue', sans-serif; font-size: 1.3rem; letter-spacing: 5px;
  color: #A8C957 !important;
}

/* ── ≤1080px: nav, account, phone and WhatsApp go behind the burger ───── */
@media (max-width: 1080px) {
  .elh-nav,
  .elh-tel,
  .elh-acct,
  .elh-rule { display: none; }
  .elh-hdr.is-stuck .elh-cta,
  .elh-cta { display: none !important; }
  .elh-burger { display: block; }
  .elh-r { gap: 12px; }

  /* Search stays in the bar — it is the one thing worth reaching without
     opening a menu. Tapping it drops a full-width row beneath the header
     rather than squeezing a 210px field between the logo and the burger. */
  .elh-search { position: static; }
  .elh-search.is-open input {
    position: absolute; top: 100%; left: 0;
    width: 100%; height: 52px; padding: 0 16px;
    background: rgba(10,20,10,0.97);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border: none;
    border-top: 1px solid rgba(168,201,87,0.28);
    border-bottom: 1px solid rgba(168,201,87,0.28);
    font-size: 1rem; z-index: 61;
  }
}

@media (max-width: 760px) {
  /* heights come from --elh-h / --elh-h-stuck, already reset at this width */
  .elh-hdr { gap: 16px; }
  .elh-logo { font-size: 1.25rem; letter-spacing: 4px; }
  .elh-hdr.is-stuck .elh-logo { font-size: 1.1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .elh-hdr,
  .elh-hdr *,
  .elh-mm * { transition: none !important; }
}