/* ==========================================================================
   KF Elements — Hero
   ========================================================================== */

.kfe .kfe-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: flex-end;
  padding-bottom: 11vh;
  overflow: hidden;
  background: var(--kfe-primary-deep);
  font-family: var(--kfe-font-body);
  /* The SECOND copy of the declaration #104 ruled on, and the one that was
     missed (#110). `base.css` stopped `.kfe-section` contradicting the kit by
     reading `var(--kfe-body-weight, 400)`; this rule sat above it at (0,2,0)
     in a sheet that loads later, so every hero went on inheriting Light while
     every other band moved to 400. Measured on ee-build at 0.14.0: the one
     page in the EuroEyes pack whose banner is a `kfe_hero` reported `48 of
     1505 body characters at weight <=350` under wp-eedk's E7 census, and all
     48 were this widget's own lede — `section.kfe-hero.layout-band >
     .kfe-wrap > p.sub`, computed 300, "Overkommelige priser på grå stær –
     alt inklusive". After this rule: 0 characters at <=350, at both widths.

     Same token, same default, same escape hatch: a site that genuinely wants
     Light writes `--kfe-body-weight: 300` in its own token map and gets it in
     the hero too, which it could not do before. The title is untouched — it
     declares `var(--kfe-heading-weight)` of its own, on the
     `.kfe-hero h1 / .kfe-hero-title` pair and again on the `.layout-band`
     pair below. (Named rather than numbered: line cites go stale.) */
  font-weight: var(--kfe-body-weight, 400);
  line-height: 1.65;
}
.kfe .kfe-hero.v-center { align-items: center; padding: 120px 0 60px; }

.kfe .kfe-hero .bg,
.kfe .kfe-hero video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
}

/* --kfe-veil is the overlay base colour; the overlay_color control writes it
   per instance on `{{WRAPPER}} .kfe-hero`.

   THE DECLARATION THAT WAS HERE IS GONE (w2.kfe-heads.1). Until this lane this
   rule re-declared `--kfe-veil: var(--kfe-primary-deep)` on `.veil`, a CHILD of
   the element the control writes to, so the child's own declaration always won
   and every colour an editor set was silently ignored. Each read below now
   carries that same value as its fallback — `var(--kfe-veil,
   var(--kfe-primary-deep))` — so an instance with no colour set paints exactly
   what it painted before, and one WITH a colour finally paints it. The one
   intended computed-style change on a released widget (spec §1.1, §3.2).

   --kfe-veil-mix is the solid tint's share, written by overlay_strength; its
   fallback is today's 45%. The no-color-mix branch below keeps today's literal
   scrim at 45% and reads neither token, because there is no way to mix one
   without color-mix(): a browser without it renders the band exactly as it
   renders every hero today. */
.kfe .kfe-hero .veil {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(10, 14, 28, 0.55) 0%, rgba(10, 14, 28, 0.2) 35%, rgba(10, 14, 28, 0.78) 100%);
}
.kfe .kfe-hero .veil-solid { background: rgba(10, 14, 28, 0.45); }
@supports (color: color-mix(in srgb, red 50%, blue)) {
  .kfe .kfe-hero .veil {
    background: linear-gradient(
      180deg,
      color-mix(in srgb, var(--kfe-veil, var(--kfe-primary-deep)) 55%, transparent) 0%,
      color-mix(in srgb, var(--kfe-veil, var(--kfe-primary-deep)) 20%, transparent) 35%,
      color-mix(in srgb, var(--kfe-veil, var(--kfe-primary-deep)) 78%, transparent) 100%
    );
  }
  .kfe .kfe-hero .veil-solid { background: color-mix(in srgb, var(--kfe-veil, var(--kfe-primary-deep)) var(--kfe-veil-mix, 45%), transparent); }
}

.kfe .kfe-hero .kfe-wrap { position: relative; z-index: 2; width: 100%; }

.kfe .kfe-hero .kfe-hero-logo { height: 160px; width: auto; margin-bottom: 38px; }

.kfe .kfe-hero .eyebrow {
  color: rgba(255, 255, 255, 0.82);
  font-size: 13px; letter-spacing: 0.34em; text-transform: uppercase;
  margin-bottom: 24px;
  opacity: 0; animation: kfeRise 0.9s 0.2s forwards;
}

/* The headline's level is a control (header_size on kfe_hero), so every rule
   from here on matches BOTH the historical bare h1 and the title class the
   widget now always emits. The two selectors must stay IN STEP: their line
   counts are asserted by grep, and a rule that kept only one of them silently
   loses its styling the moment the level is not h1. */
.kfe .kfe-hero h1,
.kfe .kfe-hero .kfe-hero-title {
  font-family: var(--kfe-font-heading);
  color: #fff;
  font-weight: var(--kfe-heading-weight);
  font-size: clamp(2.6rem, 6.5vw, 5.6rem);
  line-height: 1.02;
  letter-spacing: -0.015em;
  max-width: 16ch;
  margin: 0;
}
.kfe .kfe-hero h1 .alt,
.kfe .kfe-hero .kfe-hero-title .alt { font-style: italic; color: var(--kfe-on-dark-soft); }
/* Each line is a MASK the headline rises out of. A mask exactly one line box
   tall cut every descender (g, j, p, q, y, the comma): at the 1.02 line height
   a hero renders with (the line-spacing control's default, which Elementor
   writes per instance and which outranks the band's 1.16 below), a geometric
   sans at 700 (the face measured) reaches 0.10-0.12em below the box,
   measured at 1440, 820 and 390.
   So the mask gets 0.25em of room below the line, and an equal negative
   margin gives it straight back: nothing after the title moves, and neither
   does a second line (the margin collapses with `.line + .line`'s gap). The
   headroom covers the line-spacing control's 0.9 floor (~0.18em in that
   face). A heading face with deeper descenders may need more.
   The rise starts the same 0.25em lower, so its first frame is as far below
   the taller mask as it was below the old one: nothing shows before it moves.
   On RTL pages the branch at the foot of this file drops the mask
   (overflow: visible). This pair still applies there but paints nothing:
   the RTL line and title boxes grow by the same 0.25em, and every glyph
   stays where it was. */
.kfe .kfe-hero h1 .line,
.kfe .kfe-hero .kfe-hero-title .line { display: block; overflow: hidden; padding-bottom: 0.25em; margin-bottom: -0.25em; }
.kfe .kfe-hero h1 .line i,
.kfe .kfe-hero .kfe-hero-title .line i { display: block; font-style: inherit; transform: translateY(calc(110% + 0.25em)); animation: kfeRise 1.1s forwards; }
.kfe .kfe-hero h1 .line:nth-child(1) i,
.kfe .kfe-hero .kfe-hero-title .line:nth-child(1) i { animation-delay: 0.35s; }
.kfe .kfe-hero h1 .line:nth-child(2) i,
.kfe .kfe-hero .kfe-hero-title .line:nth-child(2) i { animation-delay: 0.5s; }

.kfe .kfe-hero .sub { margin-top: 30px; max-width: 54ch; color: var(--kfe-on-dark); font-size: 18px; opacity: 0; animation: kfeRise 1s 0.8s forwards; }
.kfe .kfe-hero .actions { margin-top: 40px; opacity: 0; animation: kfeRise 1s 1s forwards; }
.kfe .kfe-hero .terms { margin-top: 30px; font-size: 12.5px; color: rgba(255, 255, 255, 0.5); font-style: italic; max-width: 56ch; line-height: 1.6; }

@keyframes kfeRise { to { transform: translateY(0); opacity: 1; } }

/* ==========================================================================
   layout=band — the reference's centred banner (spec §3.2)
   --------------------------------------------------------------------------
   `.kfe .kfe-hero` above sets min-height, `padding-bottom: 11vh` and a
   primary-deep ground at (0,2,0) — the same weight as base.css's `.kfe
   .kfe-bg-*` presets, and hero.css loads after base.css, so a band that only
   added `section_classes()` would still paint primary-deep with an 11vh foot.
   Every rule here therefore RESTATES what that one shadows: the height, the
   padding and each ground preset, at (0,3,0) or more and after `.v-center`, so
   source order settles the one tie.

   A `full` hero matches none of these selectors and is untouched.
   ========================================================================== */
.kfe .kfe-hero.layout-band {
  min-height: auto;
  align-items: center;
  padding: var(--kfe-section-pad-start, var(--kfe-section-pad)) 0 var(--kfe-section-pad-end, var(--kfe-section-pad));
  background: none;
}
.kfe .kfe-hero.layout-band.kfe-bg-surface { background: var(--kfe-surface); }
.kfe .kfe-hero.layout-band.kfe-bg-white { background: var(--kfe-white); }
.kfe .kfe-hero.layout-band.kfe-bg-tint { background: var(--kfe-surface-deep); }
.kfe .kfe-hero.layout-band.kfe-bg-dark { background: var(--kfe-primary); }
.kfe .kfe-hero.layout-band.kfe-bg-deep { background: var(--kfe-primary-deep); }
.kfe .kfe-hero.layout-band.kfe-bg-accent { background: var(--kfe-accent); }

/* The head's alignment is the frame's, and the reference centres it. */
.kfe .kfe-hero.layout-band .kfe-wrap { text-align: var(--kfe-head-align, center); }

/* A banner's headline is a section title, not a display line: the widget's own
   title_size writes over this when the instance sets it, and the weight comes
   from the heading token rather than the hero's display weight. */
.kfe .kfe-hero.layout-band h1,
.kfe .kfe-hero.layout-band .kfe-hero-title {
  font-size: var(--kfe-title-size, clamp(2rem, 4.2vw, 2.9rem));
  font-weight: var(--kfe-heading-weight);
  line-height: 1.16;
  letter-spacing: -0.01em;
  max-width: var(--kfe-title-measure, 22ch);
  margin-inline: auto;
}
.kfe .kfe-hero.layout-band .sub {
  font-size: var(--kfe-body-size, 18px);
  max-width: 62ch;
  margin-inline: auto;
  margin-top: 20px;
}
.kfe .kfe-hero.layout-band .actions { margin-top: 30px; }
.kfe .kfe-hero.layout-band .eyebrow { margin-bottom: 18px; }

/* A band on a light ground: the title and the eyebrow take the page's own ink,
   because no `.kfe-dark` is on the section. A band with a photograph keeps the
   white type the veil was drawn for. */
.kfe .kfe-hero.layout-band.kfe-bg-white h1,
.kfe .kfe-hero.layout-band.kfe-bg-white .kfe-hero-title,
.kfe .kfe-hero.layout-band.kfe-bg-surface h1,
.kfe .kfe-hero.layout-band.kfe-bg-surface .kfe-hero-title,
.kfe .kfe-hero.layout-band.kfe-bg-tint h1,
.kfe .kfe-hero.layout-band.kfe-bg-tint .kfe-hero-title { color: var(--kfe-heading, var(--kfe-primary)); }
.kfe .kfe-hero.layout-band.kfe-bg-white .sub,
.kfe .kfe-hero.layout-band.kfe-bg-surface .sub,
.kfe .kfe-hero.layout-band.kfe-bg-tint .sub { color: var(--kfe-body, var(--kfe-muted)); }

/* The instance's own title_size is responsive, so Elementor writes the phone
   size inside its own ≤767 query and beats this; this is the fallback for a
   band that never set one. */
@media (max-width: 767px) {
  .kfe .kfe-hero.layout-band h1,
  .kfe .kfe-hero.layout-band .kfe-hero-title { font-size: var(--kfe-title-size, clamp(1.8rem, 7vw, 2.2rem)); }
}

@media (prefers-reduced-motion: reduce) {
  .kfe .kfe-hero .eyebrow,
  .kfe .kfe-hero h1 .line i,
  .kfe .kfe-hero .kfe-hero-title .line i,
  .kfe .kfe-hero .sub,
  .kfe .kfe-hero .actions { animation: none; opacity: 1; transform: none; }
}

@media (max-width: 820px) {
  .kfe .kfe-hero.v-center { min-height: 92vh; padding: 104px 0 56px; }
  .kfe .kfe-hero .kfe-hero-logo { margin-bottom: 28px; }
  .kfe .kfe-hero .actions .kfe-btn { display: block; width: 100%; }
}

/* --------------------------------------------------------------------------
   RTL — the LTR headline rises out of an overflow:hidden mask one line box
   tall (plus 0.25em below for Latin descenders). Connected scripts render
   below that box (kasra, descenders), so the mask would clip them. On RTL
   pages, drop the mask and fade instead: same effect, nothing can be cut off.
   -------------------------------------------------------------------------- */
html[dir="rtl"] body .kfe .kfe-hero h1,
html[dir="rtl"] body .kfe .kfe-hero .kfe-hero-title { line-height: 1.6; letter-spacing: 0; }
html[dir="rtl"] body .kfe .kfe-hero h1 .line + .line,
html[dir="rtl"] body .kfe .kfe-hero .kfe-hero-title .line + .line { margin-top: 0.32em; }
html[dir="rtl"] body .kfe .kfe-hero h1 .line,
html[dir="rtl"] body .kfe .kfe-hero .kfe-hero-title .line { overflow: visible; padding-top: 0; }
html[dir="rtl"] body .kfe .kfe-hero h1 .line i,
html[dir="rtl"] body .kfe .kfe-hero .kfe-hero-title .line i {
  transform: translateY(26px);
  opacity: 0;
  animation: kfeFadeRise 1.1s forwards;
}
@keyframes kfeFadeRise { to { transform: translateY(0); opacity: 1; } }