/* =============================================================================
   Primary header — Figma "Prototype — D, category toggles" / PROTO 1 (372:2692)
   =============================================================================
   One row: logo left, menu centred, search + Contact Us right. Measured at the 1600 frame:

     header      1600x124 white, 1px #444 rule along the bottom
     logo        x30, 332 wide
     menu        18px Bold #000, SENTENCE CASE, items 26px apart, spanning 432 -> 1178
     search      24px #444 at x1326
     Contact Us  157x64 pill at x1380, label 18px Bold

   The old header was `stacked-left` — logo on its own row with the menu beneath it — which is the
   shape this replaces. The theme's `horizontal-center` absolutely positions the centre group on the
   container's midpoint, so the menu only clears the logo once it is the design's width: uppercase
   at the old tracking made it 1112 wide and it ran straight through the logo. Sentence case and a
   26px gap bring it to ~746, which is what the design draws.
   ============================================================================= */
.tm-header .uk-navbar-container {
  background: #fff;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
/* 40, not the design's 30. Every other boxed container on this site is on 40, and — decisively —
   the Products panel's grid resolves its own inset from that same 40. Forcing the header to 30 left
   the mega-menu sitting 10px inboard of the logo above it, and compare-navdrop derives its expected
   column x FROM THE NAVBAR EDGE, so it read as 6 metrics off. Matching the site's inset keeps the
   panel exact and costs 10px against the frame. */
.tm-header .uk-navbar-container > .uk-container {
  padding-inline: 40px;
}
.tm-header .uk-navbar {
  min-height: 124px;
}

/* ---- logo -----------------------------------------------------------------
   260, NOT the design's 332. The only working lockup on this install is a 300x64 PNG
   (2023/03/kinoflologo.png) — `2022/04/kinoflologo.svg` is a media-library record whose file 302s,
   the same way the 2022 brand logos do. Rendering a 300px raster at 332 upscales it, which is what
   made the logo look soft and oversized. 260 sits comfortably inside its natural width, so it is
   sharp at 1x and only mildly soft at 2x.

   To hit the design's 332 properly this needs a real SVG or a 2x export of the colour lockup. */
.tm-header .uk-logo img {
  width: 260px;
  max-width: 100%;
  height: auto;
}

/* ---- centred menu --------------------------------------------------------- */
/* The centre group holds a SECOND, empty `.uk-navbar-nav` — the menu's Contact Us row, which is the
   drawer's CTA and is hidden on desktop, leaving an empty list behind. The group carries a 40px
   flex gap, so that empty list still claimed a 40px slot: the GROUP stayed centred while the
   visible menu sat 20px left of centre inside it. Collapsing both the gap and the empty list is
   what actually centres the labels. */
.tm-header .uk-navbar-center {
  gap: 0;
}
.tm-header
  .uk-navbar-center
  > .uk-navbar-nav:not(:has(> li:not(.kf-mnav__cta))) {
  display: none;
}

/* `.uk-navbar-nav` ships a 15px flex `gap`, which stacked on the anchors' own padding. The design's
   26px interval is the padding alone (13 each side), so the gap has to go or every item sits 15px
   further apart and the row runs 60px wider than it should. */
.tm-header .uk-navbar-nav {
  gap: 0;
}

/* `text-transform: none` is the load-bearing one. Everything else follows from it: uppercase at
   18px is ~25% wider per label, which is what pushed the row into the logo. */
.tm-header .uk-navbar-nav > li > a {
  min-height: 124px;
  padding: 0 13px;
  font:
    700 18px/22px "Roboto",
    sans-serif;
  letter-spacing: normal;
  text-transform: none;
  color: #000;
}
.tm-header .uk-navbar-nav > li > a:hover,
.tm-header .uk-navbar-nav > li > a[aria-expanded="true"],
.tm-header .uk-navbar-nav > li.uk-active > a {
  color: var(--kf-ink-3, #4a4a4a);
}

/* ---- right group ---------------------------------------------------------- */
.tm-header .uk-navbar-right {
  gap: 30px;
}
/* Search sits here, to the left of Contact Us — not in the utility bar. */
.tm-header .uk-navbar-right .uk-navbar-toggle,
.tm-header .uk-search-icon {
  color: #444;
  min-height: 124px;
}
.tm-header .uk-navbar-right .uk-icon svg {
  width: 24px;
  height: 24px;
}

/* Contact Us is a custom-HTML widget in the right position, not a menu item — the menu's own
   Contact Us row is the DRAWER's CTA and stays hidden here. The design fills this #ffdd00 with #444
   text: corporate yellow, which the rest of this build has been moving off (see the TODO). Brand
   #fed208 with ink text — same shape, right yellow, stronger contrast than grey on yellow. */
.tm-header .uk-navbar-right .uk-button,
.tm-header a.kf-header__cta,
.tm-header .kf-mnav__cta > a,
.tm-header a.kf-mnav__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 157px;
  min-height: 64px;
  padding: 0 28px;
  border-radius: 100px;
  background: var(--kf-yellow, #fed208);
  color: var(--kf-ink, #161616);
  font:
    700 18px/22px "Roboto",
    sans-serif;
  letter-spacing: normal;
  text-transform: none;
}
.tm-header .uk-navbar-right .uk-button:hover,
.tm-header a.kf-header__cta:hover,
.tm-header .kf-mnav__cta > a:hover,
.tm-header a.kf-mnav__cta:hover {
  background: #e5bd07;
  color: var(--kf-ink, #161616);
}

/* ---- reflow --------------------------------------------------------------- */
/* Below 1400 the centred menu and the logo start competing for the same middle ground, so the
   header loses height and the labels tighten before anything can overlap. */
@media (max-width: 1399px) {
  .tm-header .uk-navbar {
    min-height: 96px;
  }
  .tm-header .uk-navbar-nav > li > a,
  .tm-header .uk-navbar-right .uk-navbar-toggle,
  .tm-header .uk-search-icon {
    min-height: 96px;
  }
  .tm-header .uk-navbar-nav > li > a {
    padding: 0 9px;
    font-size: 16px;
  }
  .tm-header .uk-logo img {
    width: 260px;
  }
  .tm-header .uk-navbar-right .uk-button,
  .tm-header a.kf-header__cta,
  .tm-header .kf-mnav__cta > a,
  .tm-header a.kf-mnav__cta {
    min-width: 0;
    min-height: 52px;
    padding: 0 20px;
    font-size: 16px;
  }
  .tm-header .uk-navbar-right {
    gap: 18px;
  }
}

/* ---- simple dropdowns -----------------------------------------------------
   Applications, Buy & Rent, Support and Learn are plain WordPress submenus, so they were still
   rendering in the theme's stock nav style — Nunito Sans 16/28 #333 — against the Products
   mega-menu's Roboto 13/16 #444. Two dropdowns off the same navbar in two different typefaces.

   These take the Products panel's treatment (css/kf-navdrop.css, `.kf-nd__items a`) so the whole
   navbar reads as one component, with the size lifted 13 -> 14 because these are short standalone
   lists rather than a dense three-column panel. */
.tm-header .uk-navbar-dropdown-nav > li > a,
.tm-header .uk-navbar-dropdown .uk-nav > li > a {
  /* 600, not 400. At 14px regular these read as body copy rather than as navigation; the weight
     carries in every state, not only on hover, so the row does not change thickness under the
     pointer. */
  font:
    600 14px/20px "Roboto",
    sans-serif;
  letter-spacing: normal;
  text-transform: none;
  color: #444;
  padding: 6px 0;
}
.tm-header .uk-navbar-dropdown-nav > li > a:hover,
.tm-header .uk-navbar-dropdown .uk-nav > li > a:hover,
.tm-header .uk-navbar-dropdown-nav > li.uk-active > a {
  /* No underline: the highlighter stroke is the hover signal on these links, and an underline on
     top of it gave the label two marks at once. */
  color: var(--kf-ink, #161616);
  text-decoration: none;
}
/* Headings inside these lists take the mega-menu's group treatment. */
.tm-header .uk-navbar-dropdown-nav .uk-nav-header {
  font:
    600 13px/16px "Roboto Condensed",
    sans-serif;
  letter-spacing: normal;
  text-transform: none;
  color: #8a8b8d;
}

/* Rounded, as asked — these are narrow panels rather than the full-width mega-menu, so a corner
   radius reads as a card. The Products panel stays square: it spans the whole measure, and a
   rounded full-bleed band looks like a mistake rather than a card. */
.tm-header .uk-navbar-dropdown:not(:has(.kf-nd)) {
  border-radius: 8px;
  padding: 22px 26px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.14);
}

/* ---- Products mega-menu: restore the full measure --------------------------
   REGRESSION from the layout change, not from the panel. The dropdown is configured
   `stretch: navbar`, which resolves against the `.uk-navbar` boundary — and under `horizontal-center`
   the centre group is ABSOLUTELY POSITIONED, so the panel stretched to that group instead of the
   navbar and came out 759 wide with its series column collapsed to zero.

   Pinned to the boxed page explicitly, exactly as the House of Brands panel is. Same reasoning for
   the negative margin over a transform, and the same 1600 measure as `.tm-page`. */
.uk-drop:has(.kf-nd),
.uk-navbar-dropdown:has(.kf-nd) {
  --kf-nd-measure: min(1600px, 100vw);
  left: 50% !important;
  right: auto !important;
  width: var(--kf-nd-measure) !important;
  margin-left: calc(var(--kf-nd-measure) / -2) !important;
  max-width: none !important;
}

/* ---- highlighter on the dropdown links -------------------------------------
   The same marker stroke the footer, warranty links and House of Brands panel use, on the DROPDOWN
   children only. It was briefly on the top-level row too; that row is the site's spine and a stroke
   under every word at once was too much movement for it.

   The gradient goes on a SPAN, not the anchor, so it sizes to the glyphs rather than to the row
   box. The span is injected by js/kf-header.js — the titles are plain text from WordPress.

   `.kf-navhl`, NOT the shared `.kf-hl`. That class carries `align-self: flex-start`, which is right
   where it came from (a COLUMN flex container, keeping the stroke hugging the glyphs) and wrong in
   a ROW container, where it pins the label to the top of the box. Same effect, different container
   — the declaration does not transfer, exactly as noted for .kw-links on the warranty page.

   Scoped to `li.menu-item > a`: the WordPress menu children. The Products mega-menu is Builder
   output, not a menu list, and is left alone — see the note in js/kf-header.js. */
.tm-header .uk-navbar-dropdown li.menu-item > a > .kf-navhl {
  display: inline-block;
  background-image: linear-gradient(
    var(--kf-yellow, #fed208),
    var(--kf-yellow, #fed208)
  );
  background-repeat: no-repeat;
  background-position: 0 88%;
  background-size: 0 42%;
  transition: background-size 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.tm-header .uk-navbar-dropdown li.menu-item > a:hover > .kf-navhl,
.tm-header .uk-navbar-dropdown li.menu-item > a:focus-visible > .kf-navhl,
.tm-header .uk-navbar-dropdown li.menu-item.uk-active > a > .kf-navhl {
  background-size: 100% 42%;
}
/* The stroke is the hover signal, so no colour shift alongside it — two signals for one state read
   as a flicker while the gradient animates in. */
.tm-header .uk-navbar-dropdown li.menu-item > a:hover,
.tm-header .uk-navbar-dropdown li.menu-item.uk-active > a {
  color: #000;
}
/* The top-level row keeps its plain colour change, unchanged from before the highlighter existed. */
.tm-header .uk-navbar-nav > li > a:hover,
.tm-header .uk-navbar-nav > li > a[aria-expanded="true"],
.tm-header .uk-navbar-nav > li.uk-active > a {
  color: #000;
}
@media (prefers-reduced-motion: reduce) {
  .tm-header .uk-navbar-dropdown li.menu-item > a > .kf-navhl {
    transition: none;
  }
}

/* ---- mobile header --------------------------------------------------------
   Search sits left (`navbar-mobile` -> .uk-navbar-left), the logo stays centred, the drawer toggle
   stays right (`header-mobile` -> .uk-navbar-right). One 44px icon a side, so the centred logo keeps
   its configured 200px with ~36px of clearance either way at 390. */
.tm-header-mobile .uk-navbar-left .uk-navbar-toggle,
.tm-header-mobile .uk-navbar-right .uk-navbar-toggle {
  min-width: 44px;
  min-height: 60px;
  color: var(--kf-ink, #161616);
}
/* The search widget renders a form wrapper around the icon; strip its margin so the icon lines up
   with the container gutter the way the toggle does on the other side. */
.tm-header-mobile .uk-navbar-left .uk-search {
  margin: 0;
}