/*
 * marketing-header.css
 *
 * Phase 1 of the Elementor -> plain-BEM migration for the marketing site.
 * Styles the new `.mkt-header` / `.mkt-nav` / `.mkt-mobile-nav` markup in
 * web/templates/marketing/layout.templ.
 *
 * NOTE (post-migration): the Elementor CSS bundle and web/static/css/elementor/*.css
 * have since been fully removed — these styles are now standalone. The file paths
 * cited below are historical provenance (what each value was reverse-engineered
 * from), not live dependencies.
 *
 * Values below were reverse-engineered from the real Elementor export and
 * verified against the live @1440 visual baseline
 * (e2e/visual/marketing.visual.ts-snapshots/marketing-home-darwin.png):
 *   - web/static/css/elementor/marketing-overrides.css (fixed-header rule,
 *     .mkt-spacer-100, hamburger button, mobile drawer/overlay)
 *   - web/static/css/elementor/post-257.css (header container vars, nav
 *     link/submenu rules, CTA button per-element override)
 *   - web/static/css/elementor/post-10.css (kit-wide button/typography/color
 *     globals: --e-global-color-*, --e-global-typography-*)
 *   - web/static/css/elementor/widget-styles.css (ElementKit nav-menu widget
 *     base: link font-size, dropdown position/shadow/transition)
 *   - web/static/css/elementor/frontend.min.css (.e-con/.e-con-inner boxed
 *     max-width + centering model, base .elementor-button)
 *   - web/static/css/tokens.css (--color-primary / --color-primary-hover /
 *     --shadow-hover — the *app* red, confirmed by pixel-sampling the
 *     baseline PNG: the active "Acasă" link renders as #D40000, not the
 *     marketing brand red var(--color-brand-red) used for the CTA/border/hover)
 *
 * Structural note: the old header was actually a transparent full-width
 * fixed strip (`elementor-element-fd1900e`, no background) with a *nested*
 * white, red-bordered, rounded "pill" container
 * (`elementor-element-2b496e0`) holding the real nav content — confirmed by
 * pixel-sampling the baseline (pink hero background visible in the corners
 * around a white rounded bar).
 *
 * IMPORTANT layout fix (visual-regression round 1): `<header class="mkt-header">`
 * wraps the pill (`.mkt-header__inner`), the mobile off-canvas panel/overlay,
 * AND the 100px spacer (`.mkt-header__spacer`) as flow siblings. Putting
 * `position:fixed` on `.mkt-header` itself pulls the spacer out of normal
 * flow along with it, so it stops reserving 100px above `<main>` — the whole
 * page then renders 100px short. Fix: `.mkt-header` stays a plain in-flow
 * block (so the spacer still pushes `<main>` down); `position:fixed` moves
 * to `.mkt-header__inner` (the visible pill) instead — this matches the old
 * DOM shape, where only the inner strip was fixed and the spacer sat in flow
 * as its sibling.
 *
 * IMPORTANT specificity fix (visual-regression round 2): the still-loaded
 * Elementor kit styles BARE ELEMENTS body-wide — `.elementor-kit-10 a { color:
 * var(--e-global-color-secondary) }` (resolves to var(--color-brand-red)) and `.elementor-kit-10
 * button { background-color:var(--color-brand-red); color:#fff; padding:13px 34px;
 * border-radius:4px; ... }` — both at specificity (0,1,1). Every bare
 * `<a>`/`<button>` this stylesheet styles with a single BEM class (0,1,0)
 * LOSES to those kit rules: nav links rendered kit-red instead of dark, the
 * "Evenimente" toggle rendered as a red filled button (kit's `button` rule),
 * and the CTA's white text lost to kit-red (invisible on the CTA's own red
 * background). Fix: every such selector below is prefixed with the `.mkt-header`
 * ancestor class so it sits at (0,2,0), which beats (0,1,1) outright (the
 * cascade compares specificity components left-to-right; a higher class/
 * pseudo-class count always wins regardless of the element-count column).
 */

/* ── In-flow wrapper (NOT fixed — see note above) ───────────────────── */

.mkt-header {
  /* Deliberately no position/padding/background here: this element must stay
     in normal flow so its in-flow child, .mkt-header__spacer, keeps
     reserving the 100px band that pushes <main> down. All the old fd1900e
     visual properties (fixed position, z-index, background) now live on
     .mkt-header__inner below, since that's the element actually painted. */
}

.mkt-header__spacer {
  height: 100px; /* known constant: .mkt-spacer-100 (marketing-overrides.css) */
  /* Every marketing page opens with a pink hero whose gradient is solid #ffe8e8
     for its top ~62%. Painting the spacer that same pink extends the hero colour
     up behind the fixed header pill (matching prod, whose hero sits at y≈-44),
     instead of leaving a white band above the hero. */
  background-color: #ffe8e8;
}

/* ── Fixed, boxed, centered pill ─────────────────────────────────────── */

.mkt-header__inner {
  position: fixed;
  /* NOT (100px band - 78px pill)/2: the pill sits asymmetrically in the
     100px band (~20px above, ~2px below), not centered — confirmed by
     directly pixel-sampling the baseline PNG (top/bottom border rows at
     y=20 and y=97 of a 1440-viewport capture). round-2 visual-regression
     caught the earlier ~11px guess sitting the whole pill 9px too high. */
  top: 20px;
  left: 15px; /* --padding-left:15px on the old fd1900e strip */
  right: 15px; /* --padding-right:15px on the old fd1900e strip */
  z-index: 999; /* post-257.css --z-index:999 on elementor-element-fd1900e */
  /* Full-width pill: spans edge-to-edge between the 15px left/right insets (no
     1400px cap, no auto-centering) — per design change. */
  height: 78px; /* measured white/red-bordered pill height @1440, border-box */
  display: flex;
  align-items: center;
  /* round-3 fix: `justify-content: space-between` always splits leftover
     space into two EQUAL gaps (~200px/~200px), but the baseline's Elementor
     markup centered the nav inside its own wider column rather than in the
     whole bar, producing an ASYMMETRIC split (~186px/~211px, pixel-measured
     from e2e/visual/marketing.visual.ts-snapshots/marketing-home-darwin.png
     @1440) — the nav cluster sits slightly left-of-center. Reproduced here
     with flex-start packing + explicit per-item trailing margins (below)
     instead of space-between; the ~24px left over after the CTA is simply
     unused trailing space, matching the baseline's own CTA-to-border gap. */
  justify-content: flex-start;
  padding: 0 15px; /* elementor-element-2b496e0 padding-left/right:1% of 1400px */
  background-color: #ffffff; /* elementor-element-2b496e0 */
  border: 1px solid var(--color-brand-red); /* elementor-element-2b496e0 border-color (secondary) */
  border-radius: 15px; /* elementor-element-2b496e0 --border-radius */
}

/* ── Logo ────────────────────────────────────────────────────────────── */

.mkt-header__logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  margin-right: 168px; /* pixel-measured gap (logo end @1440 x256 -> nav/Acasă
                           box start x424) — see .mkt-nav below for the
                           matching nav<->cta gap and full derivation */
}

.mkt-header__logo img {
  /* Rendered size approximated from the baseline screenshot (logo mark +
     wordmark ink spans ~221px wide @1440); height is intentionally left to
     the browser's intrinsic width/height (2000x480) aspect-ratio instead of
     being pinned, so it stays proportional. GUESS: exact width not
     reverse-engineerable from Elementor's fluid 20%-of-boxed-column sizing —
     flag for visual-diff attention. */
  width: 220px;
  height: auto;
  display: block;
}

/* ── Desktop nav ─────────────────────────────────────────────────────── */

.mkt-nav {
  /* round-3 fix: reproduces the baseline's asymmetric logo/nav/CTA split
     (see the .mkt-header__inner comment above). Derivation, all pixel-
     measured @1440 from the baseline PNG (nav item box edges = text-ink
     edges +/- the 20px link padding below):
       content box:  [36, 1404]  (inner edge of the pill's 1px border + 15px padding)
       logo box:     [36, 256]   (width 220, per .mkt-header__logo img)
       nav box:      [424, 1011] (width 587: Acasă-box-left to Contact-box-right)
       cta box:      [1202, 1380] (width 178, per .mkt-header__cta)
       gap logo->nav: 424 - 256 = 168  -> .mkt-header__logo margin-right
       gap nav->cta:  1202 - 1011 = 191 -> this margin-right
       trailing gap:  1404 - 1380 = 24  -> left as unused space (no margin
                                           needed: flex-start packing leaves
                                           it automatically after the CTA)
     GUESS/residual: this chains off the nav's own emergent (font-rendered)
     width, so a few px of cross-browser font-metric drift versus the
     measured 587px could nudge the CTA a few px off — flag for visual-diff
     attention if the residual doesn't fully close.

     2026-08-30: the "Parteneri" nav item (6th link) widened the nav past what
     the fixed 191px nav->cta gap could absorb, overflowing the CTA off the
     pill. Replaced the fixed gap with a small safety min-gap here + a
     `margin-left:auto` on the CTA (below), so the CTA now auto-pushes to the
     right edge and the layout adapts to the nav's width regardless of item
     count. */
  margin-right: 24px;
}

.mkt-nav__list {
  display: flex;
  align-items: center;
  gap: 0; /* spacing comes from 0 20px padding on each link/toggle below,
              matching the measured ~40px gap between adjacent nav items */
  margin: 0;
  padding: 0;
  list-style: none;
}

.mkt-nav__item {
  position: relative;
}

.mkt-nav__item--dropdown {
  position: relative;
}

.mkt-header .mkt-nav__link,
.mkt-header .mkt-nav__toggle {
  font-family: "Unbounded", Sans-serif;
  font-size: 15px; /* widget-styles.css ElementKit nav-menu widget default */
  font-weight: 500;
  line-height: 1;
  color: #1b1b1b; /* var(--e-global-color-primary) */
  text-decoration: none;
  padding: 0 14px; /* tightened from 20px so the one-line "Cum Funcționează" + all items + CTA fit at 1440 */
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap; /* keep multi-word items (e.g. "Cum Funcționează") on one line */
  transition: color 0.2s ease;
}

.mkt-header .mkt-nav__toggle {
  background: none; /* must beat .elementor-kit-10 button { background-color:var(--color-brand-red) } */
  border: 0;
  border-radius: 0; /* beat .elementor-kit-10 button { border-radius:4px } */
  cursor: pointer;
  /* No `font: inherit` here (round-2 fix): that shorthand was fired by THIS
     rule, at the same (0,2,0) specificity as the shared font-family/size/
     weight/line-height rule above but later in source order, so it won the
     tiebreak and silently reset the toggle's font back to the inherited
     body default (Poppins) — the "Evenimente" label rendered in the wrong
     typeface. The shared rule above already sets every font sub-property
     this button needs, so no reset is required. */
  gap: 0; /* round-4 fix: the shared 6px gap (for text<->chevron spacing)
              made "Evenimente"+chevron render ~8px wider than baseline's
              ~117px (pixel-measured 758-873 vs actual's 758-883 @1440),
              which cascaded into Contact and the CTA landing a few px right
              of baseline. Zeroed here (a separate, later rule for the same
              selector at equal specificity wins by source order) together
              with the chevron's own explicit size below. */
}

.mkt-header .mkt-nav__link:hover,
.mkt-header .mkt-nav__link:focus,
.mkt-header .mkt-nav__toggle:hover,
.mkt-header .mkt-nav__toggle:focus {
  color: var(--color-brand-red); /* var(--e-global-color-secondary) */
}

.mkt-header .mkt-nav__link.is-active,
.mkt-header .mkt-nav__toggle.is-active {
  color: #d40000; /* var(--color-primary) — confirmed by pixel-sampling the
                      baseline: the active "Acasă" link is #D40000, the app
                      red token, NOT the marketing brand red var(--color-brand-red). The
                      "Evenimente" toggle (a <button>, not an <a>) picks up
                      the same is-active class + color on /evenimente and
                      /evenimente/<slug> pages so it matches the baseline. */
  font-weight: 600;
}

.mkt-nav__chevron {
  display: inline-flex;
  align-items: center;
}

.mkt-nav__toggle.is-active .mkt-nav__chevron svg {
  /* The chevron's stroke is hardcoded #222 via an SVG presentation attribute
     in the markup; a CSS `stroke` declaration (even from an author
     stylesheet) always outranks a presentation attribute, so this flips the
     chevron to follow the toggle's own active text color instead of a
     second hardcoded red. */
  stroke: currentColor;
}

.mkt-nav__chevron svg {
  /* round-4 fix: shrink the inline 14x14 SVG (CSS wins over the markup's own
     width/height attributes on a replaced element) — together with zeroing
     .mkt-nav__toggle's gap above, this removes the ~8px the "Evenimente"
     toggle was rendering wider than baseline, which had cascaded into
     Contact/CTA landing a few px right of their measured baseline x. GUESS:
     12px was chosen to hit the measured 8px total delta (6 from the gap +
     2 from this) — not independently re-measured against the chevron's own
     ink bounds, so flag for visual-diff attention if a residual remains. */
  width: 12px;
  height: 12px;
}

/* ── Dropdown submenu ────────────────────────────────────────────────── */

.mkt-nav__dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  margin: 0;
  padding: 0;
  list-style: none;
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 0 10px 30px 0 rgba(45, 45, 45, 0.2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: transform 0.4s ease, opacity 0.4s ease, visibility 0.4s ease;
  z-index: 999;
}

.mkt-nav__item--dropdown:hover .mkt-nav__dropdown,
.mkt-nav__item--dropdown:focus-within:not(.mkt-nav__item--collapsed) .mkt-nav__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.mkt-nav__dropdown-item {
  margin: 0;
}

.mkt-header .mkt-nav__dropdown-link {
  display: flex;
  align-items: center;
  font-family: "Unbounded", Sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 30px;
  padding: 5px 15px;
  color: #1b1b1b; /* must beat .elementor-kit-10 a { color: var(--e-global-color-secondary) } */
  text-decoration: none;
  border-radius: 10px;
  transition: all 0.3s;
}

.mkt-header .mkt-nav__dropdown-link:hover,
.mkt-header .mkt-nav__dropdown-link:focus {
  background-color: var(--color-brand-red);
  color: #ffffff;
}

/* ── CTA button ──────────────────────────────────────────────────────── */

.mkt-header .mkt-header__cta {
  flex-shrink: 0;
  margin-left: auto; /* 2026-08-30: auto-push the CTA to the pill's right edge so the
                        header fits any nav width (added the "Parteneri" 6th item) — see
                        the .mkt-nav margin-right note above. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "Unbounded", Sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 30px;
  letter-spacing: 0;
  color: #ffffff; /* must beat .elementor-kit-10 a { color: var(--e-global-color-secondary) },
                      which otherwise renders red text on this red button (invisible) */
  background-color: var(--color-brand-red);
  border-radius: 15px;
  padding: 13px 34px; /* cascades from post-10.css .elementor-kit-10 .elementor-button
                          (the per-element override doesn't set its own padding) —
                          confirmed by measuring the button's rendered height
                          (56px = 13 + 30 line-height + 13) in the baseline */
  text-decoration: none;
  transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.mkt-header .mkt-header__cta:hover,
.mkt-header .mkt-header__cta:focus-visible {
  background-color: #b40000; /* var(--color-primary-hover) */
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12); /* var(--shadow-hover) */
}

.mkt-header .mkt-header__cta:active {
  background-color: #b40000;
  transform: translateY(0);
  box-shadow: none;
}

/* ── Hamburger (mobile trigger) ──────────────────────────────────────── */

.mkt-header .mkt-header__burger {
  display: none; /* shown only at/below the 1024px breakpoint, see below */
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  background: none; /* must beat .elementor-kit-10 button { background-color:var(--color-brand-red) } */
  border: 0;
  border-radius: 20px;
  padding: 0;
  cursor: pointer;
}

.mkt-header__burger-icon {
  display: block;
  position: relative;
  width: 22px;
  height: 16px;
}

.mkt-header__burger-icon span {
  position: absolute;
  left: 0;
  width: 22px;
  height: 3px;
  background: #222;
  border-radius: 2px;
}

.mkt-header__burger-icon span:nth-child(1) {
  top: 0;
}

.mkt-header__burger-icon span:nth-child(2) {
  top: 6.5px;
}

.mkt-header__burger-icon span:nth-child(3) {
  top: 13px;
}

/* ── Responsive: single 1024px breakpoint ───────────────────────────────
 * Matches the old `data-responsive-breakpoint="1024"` +
 * `elementor-hidden-tablet elementor-hidden-mobile` behaviour: desktop nav +
 * CTA above 1024px, hamburger-triggered off-canvas at/below it. */
@media (max-width: 1024px) {
  .mkt-nav,
  .mkt-header .mkt-header__cta {
    /* .mkt-header__cta must match the (0,2,0) specificity of its base rule
       above, or this display:none would lose to that rule's display:inline-flex
       regardless of the media query (specificity beats source order/media). */
    display: none;
  }

  .mkt-header .mkt-header__logo {
    /* Bug found via e2e (marketing-shell-nav.spec.ts): .mkt-header__logo's
       168px desktop margin-right (reserved to space the logo from the
       now-hidden .mkt-nav) was never reset for mobile. With .mkt-nav/.mkt-header__cta
       display:none, the burger became the logo's very next flex sibling and
       inherited that 168px gap — pixel-measured, this placed the burger's box
       at a viewport-INDEPENDENT x=419 (flex-start packing ignores container
       width), i.e. fully off-screen and untappable on every real phone width
       (iPhone-class ~375-430px), only entering the visible viewport above
       ~455px. Reset the gap here so the burger stays on-screen.
       (`stage`, pre-existing on the committed BEM header rewrite — 2026-08-27.) */
    margin-right: 0;
  }

  .mkt-header .mkt-header__burger {
    display: flex;
    margin-left: auto; /* pin to the pill's right edge, opposite the logo */
  }
}

/* ── Mobile off-canvas panel ─────────────────────────────────────────── */

.mkt-mobile-nav__overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.2);
  z-index: 1199;
  display: none;
}

.mkt-mobile-nav__overlay[hidden] {
  display: none;
}

.mkt-mobile-nav__overlay--visible {
  display: block;
}

.mkt-mobile-nav__panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  width: 80vw;
  max-width: 320px;
  background: #ffffff;
  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
  z-index: 1200;
  padding: 2rem 1rem 1rem 1rem;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.3s;
  display: flex;
  flex-direction: column;
}

.mkt-mobile-nav__panel--open {
  transform: translateX(0);
}

.mkt-mobile-nav__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}

.mkt-mobile-nav__logo img {
  max-width: 190px;
  max-height: 50px;
  width: auto;
  height: auto;
}

.mkt-header .mkt-mobile-nav__close {
  background: none; /* must beat .elementor-kit-10 button { background-color:var(--color-brand-red) } */
  border: 0;
  color: var(--color-brand-red);
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 28px;
  line-height: 1;
  flex-shrink: 0;
}

.mkt-mobile-nav__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  width: 100%;
}

.mkt-mobile-nav__list li {
  width: 100%;
  margin: 0;
}

.mkt-header .mkt-mobile-nav__link {
  display: block;
  padding: 0.85rem 0;
  font-family: "Unbounded", Sans-serif;
  font-size: 15px;
  line-height: 30px;
  color: #1d1a4e; /* must beat .elementor-kit-10 a { color: var(--e-global-color-secondary) } */
  text-decoration: none;
}

/* ── Keyboard-only focus rings (no effect on at-rest screenshots) ──────── */

.mkt-header .mkt-nav__link:focus-visible,
.mkt-header .mkt-nav__toggle:focus-visible,
.mkt-header .mkt-nav__dropdown-link:focus-visible,
.mkt-header .mkt-header__cta:focus-visible,
.mkt-header .mkt-header__burger:focus-visible,
.mkt-header .mkt-mobile-nav__close:focus-visible,
.mkt-header .mkt-mobile-nav__link:focus-visible {
  outline: 2px solid var(--color-brand-red);
  outline-offset: 2px;
}