/*
 * ═══════════════════════════════════════════════════════════════════════
 *  element_webpage_home_header.css  —  Homepage Header Element
 *  Daralbeida.com  ·  DAB-VIS-CSS-EL-HP-HDR-001  ·  v2.0  ·  May 2026
 *
 *  CHANGELOG
 *  ─────────
 *  v2.0  May 2026  — Wordmark slightly larger (2.55→2.85rem).
 *                    Added flanking gold hairlines via .header-brand
 *                    ::before / ::after (no markup change required).
 *                    Switched .header-brand to row flex to accommodate lines.
 *  v1.0  May 2026  — Initial release
 *
 *  TOKENS USED
 *  ───────────
 *  --consumer-header-h    header height    (css/webpage_home.css)
 *  --f-display            Cormorant Garamond (css/webpage_home.css)
 *  --gold                 #B8832A          (darx_tokens.css)
 *
 *  SECTIONS
 *  ────────
 *  1.  Fixed header band
 *  2.  Brand wordmark + flanking lines
 * ═══════════════════════════════════════════════════════════════════════
 */


/* ═══════════════════════════════════════════════════════════════════════
   1. FIXED HEADER BAND
      Transparent — hero photo bleeds to the top edge.
      Height driven by --consumer-header-h (css/webpage_home.css).
   ═══════════════════════════════════════════════════════════════════════ */
.site-header {
  position: fixed;
  top: 0;
  width: 100%;
  height: var(--consumer-header-h);
  /* Solid brown band that feathers DOWNWARD into the hero — the vertical mirror
     of the footer's band (which feathers upward). Sized to hold the wordmark
     (+ subbrand) rather than matching the footer's 40px pixel-for-pixel, so the
     wordmark keeps its scale. Same brown + same 6px feather as the footer. */
  --header-stripe-h: 74px;    /* solid brown band — ~12px BELOW the subbrand (whose
                                 bottom is ~62px) so the wordmark + subbrand still
                                 sit FULLY on solid brown before any fade begins.  */
  --header-feather:  34px;    /* feather completes at 140px (the header height), so
                                 the fade reaches full transparency with no hard
                                 cut-off edge at the header's bottom.              */
  /* The fade uses an EASED midpoint (held ~72% opaque just past the solid band)
     instead of a straight solid→transparent ramp. The straight ramp's abrupt
     slope-change at the band edge reads as a faint lighter "Mach band" line; the
     eased midpoint softens that corner so the transition looks clean. */
  background: linear-gradient(
    to bottom,
    var(--brand-dark) 0,
    var(--brand-dark) var(--header-stripe-h),                                 /* solid band      */
    rgba(28, 20, 16, 0.72)
      calc(var(--header-stripe-h) + var(--header-feather) * 0.45),            /* eased midpoint   */
    transparent calc(var(--header-stripe-h) + var(--header-feather))          /* fully clear      */
  );
  display: flex;
  align-items: flex-start;
  justify-content: center;
  /* Wordmark centred on the solid band; the subbrand sits just below it on the
     feathering brown. */
  padding-top: 6px;
  flex-shrink: 0;
  z-index: 500;
  -webkit-font-smoothing: antialiased;
}


/* ═══════════════════════════════════════════════════════════════════════
   2. BRAND WORDMARK + FLANKING LINES
      .header-brand is a flex row: [line] [wordmark] [line]
      Lines are ::before / ::after pseudo-elements — no markup change.
      Each line fades from transparent → gold, pointing inward.
   ═══════════════════════════════════════════════════════════════════════ */
.header-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;   /* subbrand is tucked up under the wordmark via its negative margin */
  pointer-events: auto;
}

/* Wordmark row: flanking gold lines on each side of DARALBEIDA™ */
.header-brand-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  transform: translateY(4px);   /* lower ONLY the wordmark + flanking lines 4px;
                                   subbrand/flag/everything else stay put (transform
                                   doesn't affect layout flow). */
}

/* Left line */
.header-brand-row::before {
  content: '';
  display: block;
  width: 67px;
  height: 3px;
  background: linear-gradient(to right, transparent, var(--gold));
  opacity: 1;
  flex-shrink: 0;
  /* Embossed: white highlight on top, dark shadow on bottom */
  filter: drop-shadow(0 -1px 0 rgba(255, 255, 255, 0.35))
          drop-shadow(0 1px 1px rgba(0, 0, 0, 0.45));
}

/* Right line */
.header-brand-row::after {
  content: '';
  display: block;
  width: 67px;
  height: 3px;
  background: linear-gradient(to left, transparent, var(--gold));
  opacity: 1;
  flex-shrink: 0;
  /* Embossed: white highlight on top, dark shadow on bottom */
  filter: drop-shadow(0 -1px 0 rgba(255, 255, 255, 0.35))
          drop-shadow(0 1px 1px rgba(0, 0, 0, 0.45));
}

.header-wordmark {
  /* Hardcoded: the DARX consumer tokens (darx_tokens.css) carry --f-display
     (Bebas Neue), not the platform's --font-display, so the wordmark must name
     Cinzel Decorative directly. @font-face lives in css/fonts.css. */
  font-family: 'Cinzel Decorative', Georgia, serif;
  font-size: var(--ui-fs-display);   /* 3.4rem + 10px */
  font-weight: 700;
  letter-spacing: 4px;   /* Cinzel Decorative is naturally wide */
  /* Tight line box: 'normal' yields a ~103px line box (vs ~51px glyphs) which
     made the brand block over-tall and pushed the subbrand out of the band. */
  line-height: 1.05;
  text-transform: none;
  color: var(--gold);
  text-decoration: none;
  white-space: nowrap;
  -webkit-font-smoothing: antialiased;
  /* Layered for depth + drama on the brown band:
     1) warm top bevel highlight  2) crisp engraved bottom edge  3) near depth
     shadow  4) long dramatic cast  5) gold halo glow.
     drop-shadow (not text-shadow) because the FX layer paints the wordmark with
     a transparent text-fill + gradient shimmer. */
  filter:
    drop-shadow(0 -1px 0 rgba(255, 244, 214, 0.30))   /* top bevel highlight  */
    drop-shadow(0  1px 0 rgba(0, 0, 0, 0.60))          /* engraved lower edge  */
    drop-shadow(0  3px 4px rgba(0, 0, 0, 0.50))        /* near depth shadow    */
    drop-shadow(0  9px 20px rgba(0, 0, 0, 0.42))       /* long dramatic cast   */
    drop-shadow(0  0  14px rgba(240, 195, 105, 0.45)); /* tight gold halo (kept
                              small so it doesn't wash the subbrand below)      */
}

.header-subbrand {
  /* IDENTICAL to the footer tagline (.footer-tagline) so the subbrand reads the
     SAME in both places: same font, size, weight, tracking, colour — and NO
     text-shadow (it sits fully on the solid brown band, like the footer does,
     so it needs none). Keep these in sync with element_webpage_home_footer.css. */
  font-family: var(--f-mono);
  font-size: var(--ui-fs-label);
  font-weight: 600;
  font-style: normal;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 1;
  /* Lowered from the wordmark for breathing room; sits on the solid brown band. */
  margin: 8px 0 0;
  -webkit-font-smoothing: antialiased;
}

@media (max-width: 768px) {
  .header-brand-row::before,
  .header-brand-row::after { width: 28px; }
  .header-wordmark { font-size: var(--ui-fs-display); letter-spacing: 5px; }
  /* Match .footer-tagline's mobile sizing so the subbrand stays identical in
     both places at every breakpoint. */
  .header-subbrand { font-size: var(--ui-fs-label); letter-spacing: 0.20em; }
}