/* =============================================================================
   Utility bar — House of Brands + Quick Product Find
   =============================================================================
   Figma "Nav v2 — feedback applied" (369:812): a 55px #000 bar above the header, content inset
   30px, 16px Regular #ffffff, House of Brands flush left and Quick Product Find flush right.

   The two components are ported from LynTec, where the same bar runs alongside CHAUVET
   Professional. Their styling is not: LynTec's is red on dark in Open Sans. Everything below
   restyles them to this design.
   ============================================================================= */
/* KINO YELLOW, not the design frame's black. Nav v2 draws this bar #000; brand yellow is the call
   made since, and it is what the bar carries across the group's other sites in their own colours —
   CHAUVET DJ's is red, LynTec's is red. Ink on yellow rather than white: white on #fed208 is 1.7:1
   and fails at any size.

   Two classes: the toolbar ships as `tm-toolbar tm-toolbar-default`, and the default's own ground
   is a single class that would otherwise tie and win on order. */
.tm-toolbar.tm-toolbar-default {
  background: var(--kf-yellow, #fed208);
  color: var(--kf-ink, #161616);
  /* The toolbar carries 10px of its own block padding, which made the bar 75 against the design's
     55 even once the container inside it measured 55 exactly. */
  padding-block: 0;
}
/* The toolbar's widget row is a `uk-grid` with `margin: uk-margin-small-top`, so every widget in it
   carries a top margin — 10px on a bar the design draws at a flat 55. */
.tm-toolbar .uk-grid > * {
  margin-top: 0;
}
/* The widget layouts inside are Builder sections, and `uk-section` brings 70px of padding top and
   bottom — 140px on a bar the design draws at 55. Same trap as the footer's section. */
.tm-toolbar .uk-section {
  padding: 0;
}
/* The widget layouts each bring their OWN `.uk-container` inside the toolbar's, whose padding put
   the right-hand item 15px short of the design's 1570. The bar's container sets the measure; the
   nested ones only need to get out of the way. */
.tm-toolbar .uk-container .uk-container {
  max-width: none;
  padding-inline: 0;
}
.tm-toolbar > .uk-container {
  max-width: none;
  padding-inline: 30px;
  min-height: 55px;
  /* The toolbar's own container is a flex row of the left and right positions; the design puts one
     at each end of the measure. */
  justify-content: space-between;
  gap: 24px;
}
.tm-toolbar .uk-subnav,
.tm-toolbar .uk-iconnav,
.tm-toolbar .uk-dropnav {
  margin: 0;
}
/* The grid glyph sits in a rounded outline chip, as it does on CHAUVET DJ. Ink on yellow rather
   than DJ's white on red. */
.tm-toolbar .uk-subnav .uk-icon {
  width: 30px;
  height: 30px;
  border: 1px solid rgba(22, 22, 22, 0.45);
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: var(--kf-ink, #161616);
}
.tm-toolbar .uk-subnav > * > :first-child:hover .uk-icon {
  border-color: var(--kf-ink, #161616);
}
.tm-toolbar .uk-subnav > * {
  padding-left: 0;
}

/* ---- both triggers read the same ------------------------------------------ */
/* THREE classes plus the pseudo, and every part of that is load-bearing. theme.1.css sets the
   toolbar's label with `.tm-toolbar .uk-subnav > * > :first-child { font-size: 15px }`:
     - `:first-child`, not `a` — a pseudo-class outranks a type selector, so matching on the anchor
       loses however specific the ancestor chain looks;
     - `.tm-toolbar-default` as well as `.tm-toolbar` — theme.1.css is enqueued AFTER this sheet, so
       an equal-specificity rule loses on order and cannot be fixed by declaring it later here.
   Beating it outright is the only stable answer short of re-ordering the enqueue. */
.tm-toolbar.tm-toolbar-default .uk-subnav > * > :first-child,
.tm-toolbar.tm-toolbar-default .uk-dropnav > * > :first-child,
.tm-toolbar.tm-toolbar-default .quick-product-find__toggle {
  font:
    400 16px/19px "Roboto",
    sans-serif;
  /* theme.1.css puts `letter-spacing: 2px` on `.uk-subnav > * > :first-child`, so the menu-driven
     House of Brands label rendered tracked-out while Quick Product Find — a plain button the rule
     never matched — did not. Same family, same size; the spacing was the whole difference. */
  letter-spacing: normal;
  color: var(--kf-ink, #161616);
  text-transform: none;
  text-decoration: none;
  min-height: 55px;
  display: flex;
  align-items: center;
  gap: 8px;
  width: auto;
}
/* On yellow the hover cannot be yellow. Ink at 60% reads as a state change without introducing a
   third colour into a two-colour bar. */
.tm-toolbar .uk-subnav > * > :first-child:hover,
.tm-toolbar .uk-dropnav > * > :first-child:hover,
.tm-toolbar .uk-subnav > .uk-active > :first-child,
.tm-toolbar .quick-product-find__toggle:hover,
.tm-toolbar .quick-product-find__toggle:focus {
  color: rgba(22, 22, 22, 0.6);
}
.tm-toolbar .quick-product-find__caret {
  border-top-color: currentColor;
}

/* ---- House of Brands panel ------------------------------------------------
   Measured off CHAUVET DJ, which is the reference for this component across the group:

     panel     FULL BLEED, white, no shadow, padding 36px 40px
     columns   equal width; first has no rule and no left pad, the rest 0 40px with a
               1px #e5e5e5 left border that runs the FULL column height
     heading   19.2/23 700 #1a1a1a
     body      14/21 400 #555
     links     15/700 #1a1a1a, 45px rows, 14px 0, hairline top AND bottom
     cta       15/700, 999px radius, 14px 28px

   The first pass was a 1240px card floating 30px in with a drop shadow and cramped 305px columns —
   it read as a popover rather than as part of the header. */
.uk-drop:has(.kf-hob),
.uk-navbar-dropdown:has(.kf-hob) {
  /* Full bleed OF THE BOXED PAGE, not of the viewport. `.tm-page` is capped at 1600 and centred, so
     on a wider screen the site sits in grey gutters — and `left/right: 0` put this panel out across
     them while the toolbar above it and the Products mega-menu beside it both stopped at the box.
     Centred with a negative margin rather than a transform, because UIkit sets `transform` on drops
     when it repositions them and the two would fight.

     !important on the offsets: the menu template writes an inline `width` on Builder dropdowns and
     UIkit writes an inline `left` on every reposition. Neither carries !important, so this wins
     without having to fight the markup. 1600 matches .tm-page's max-width — if the boxed measure
     ever changes, this changes with it. */
  --kf-hob-measure: min(1600px, 100vw);
  left: 50% !important;
  right: auto !important;
  width: var(--kf-hob-measure) !important;
  margin-left: calc(var(--kf-hob-measure) / -2) !important;
  max-width: none !important;
  background: #fff;
  padding: 36px 40px;
  box-shadow: none;
  border-radius: 0;
}
.kf-hob.uk-grid {
  padding-inline: 0;
  margin-left: 0;
}
/* Equal columns whose rules run the full height.
   `flex-direction: column` is not optional: `.kf-hob__col` IS the grid item, so making it a flex
   container to get the stretch also laid its OWN children — heading, copy, link list — out in a
   row. They stack. */
.kf-hob.uk-grid > * {
  padding-left: 0;
}
.kf-hob .kf-hob__col {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-width: 0;
  padding-inline: 40px;
  border-left: 1px solid #e5e5e5;
}
/* The statement column opens the row, so it takes no rule and no left inset. */
.kf-hob .kf-hob__col--intro {
  border-left: 0;
  padding-left: 0;
}
.kf-hob .kf-hob__h {
  font:
    700 19px/23px "Roboto Condensed",
    sans-serif;
  color: #1a1a1a;
  margin: 0 0 12px;
}
.kf-hob .kf-hob__body p {
  font:
    400 14px/21px "Roboto",
    sans-serif;
  color: #555;
  margin: 0 0 20px;
}
.kf-hob .kf-hob__links {
  list-style: none;
  margin: 0;
  padding: 0;
}
.kf-hob .kf-hob__links > li,
.kf-hob .kf-hob__links > li:nth-child(n + 2) {
  margin: 0;
}
/* Hairline top and bottom on every row, as DJ has it — the last row closes the list rather than
   trailing off. Adjacent borders collapse into one because the rows sit flush. */
.kf-hob .kf-hob__links a {
  display: flex;
  align-items: center;
  /* border-box, or the theme's content-box adds the 28px of padding ON TOP of the 45px min-height
     and every row renders 73 tall. */
  box-sizing: border-box;
  min-height: 45px;
  padding: 14px 0;
  border-top: 1px solid #e5e5e5;
  font:
    700 15px/20px "Roboto",
    sans-serif;
  color: #1a1a1a;
  text-decoration: none;
}
/* "You are here" — the panel lists every sister brand, and Kino Flo's row is the one you are
   already on. Without a marker it reads as a link to somewhere else and a visitor clicks it to
   arrive back where they started.

   The row keeps its link (so it still works as a way home from a deep page) but the badge says
   plainly that it is the current site. `margin-left: auto` parks it against the row's right edge —
   the anchor is already a flex row for the 45px min-height. */
.kf-hob .kf-hob__here {
  margin-left: auto;
  flex: 0 0 auto;
  padding: 3px 8px;
  border-radius: 3px;
  background: var(--kf-yellow, #fed208);
  color: var(--kf-ink, #161616);
  font:
    700 9px/12px "Roboto Condensed",
    sans-serif;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  white-space: nowrap;
}
/* The highlighter hover is the affordance for "this goes somewhere new", so the current row does
   not get one — and its label sits at full ink rather than the link colour. */
.kf-hob .kf-hob__links > li.kf-hob__link--here a > span:first-child {
  background-image: none;
}

.kf-hob .kf-hob__links > li:last-child a {
  border-bottom: 1px solid #e5e5e5;
}
/* Yellow highlighter on hover — the same treatment as .kf-hl on home and .kw-links on warranty.
   A background-size transition rather than a pseudo-element: one compositor-friendly property, no
   extra DOM, and it degrades to a plain highlight when motion is refused. The stroke sits low and
   covers ~42% of the line box, where a real marker lands against a baseline.

   The gradient goes on a SPAN inside the anchor, not the anchor itself: these rows are 45px flex
   items, so a background on the <a> would paint a yellow band the full row height instead of a
   stroke hugging the glyphs. `width: max-content` keeps the span off the row's full width. */
.kf-hob .kf-hob__links a > span:first-child,
.kf-hob .kf-hob__links a:not(:has(span)) {
  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);
}
.kf-hob .kf-hob__links a:hover > span:first-child,
.kf-hob .kf-hob__links a:focus-visible > span:first-child,
.kf-hob .kf-hob__links a:not(:has(span)):hover,
.kf-hob .kf-hob__links a:not(:has(span)):focus-visible {
  background-size: 100% 42%;
}
.kf-hob .kf-hob__links a:hover,
.kf-hob .kf-hob__links a:focus-visible {
  color: var(--kf-ink, #161616);
}
@media (prefers-reduced-motion: reduce) {
  .kf-hob .kf-hob__links a > span:first-child,
  .kf-hob .kf-hob__links a:not(:has(span)) {
    transition: none;
  }
}
/* Brand yellow with ink text — DJ's is its own red on white. */
/* align-self so the pill sizes to its label rather than stretching to the column, which is what a
   flex column does to a block child by default. */
.kf-hob .kf-hob__col .uk-button,
.kf-hob .kf-hob__col > .uk-panel {
  align-self: flex-start;
}
.kf-hob a.kf-hob__cta,
.kf-hob .kf-hob__cta {
  background: var(--kf-yellow, #fed208);
  color: var(--kf-ink, #161616);
  border: 0;
  border-radius: 999px;
  padding: 14px 28px;
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  font:
    700 15px/20px "Roboto",
    sans-serif;
  text-transform: none;
}

/* ---- reflow --------------------------------------------------------------- */
/* The bar is desktop-only. Below the header's own breakpoint the drawer carries both of these —
   the mobile utility strip at the top of it — so a second copy here would be duplicate chrome. */
@media (max-width: 959px) {
  .tm-toolbar {
    display: none;
  }
}
@media (max-width: 1279px) {
  .tm-toolbar > .uk-container {
    padding-inline: 24px;
  }
  .kf-hob .kf-hob__col {
    padding-inline: 26px;
  }
}

/* ---- Quick Product Find ---------------------------------------------------
   Only the two things that belong to the BAR rather than to the component live here; the rest of
   its skin is css/quick-product-find.css, which the element enqueues itself. */

/* The widget's own Builder section paints `uk-section-default` — white — straight over the black
   bar, which is what hid the toggle label entirely. */
.tm-toolbar .uk-section,
.tm-toolbar .uk-section-default,
.tm-toolbar .uk-panel {
  background: transparent;
}