/* =============================================================================
   Footer v2 — Figma 600:8730 "Section / Footer"
   =============================================================================
   Site-wide chrome: the same frame appears on Home, About, Warranty and Learning Library, so this
   is loaded on every page rather than keyed to a post meta like the page sheets.

   Measured off the design at its 1600 frame, content inset 180 -> 1420 (1240 wide):

     ground            #0d0d0d
     column heads      14px Bold  #ffffff        at y69
     column links      13px       #d3d4d5        y99/125/151/177 -> 26px pitch
     columns           x600 / 806 / 1012 / 1218  -> 206px pitch
     logo              x180 y69, 249 wide
     social rings      34x34, x180 + 46px pitch, 1px #5a5e62
     rules             1px #2a2b2c at y222 and y338
     HOUSE OF BRANDS   11px Medium #717275, centred
     brand wordmarks   12px Medium #58595b, 7 across
     bottom row        13px #d3d4d5 at y354
   ============================================================================= */
/* Two classes. The section renders as `uk-section-secondary`, whose own ground is a single class
   and would otherwise tie and win on order. */
.uk-section.kf-footer {
  background: #0d0d0d;
  color: #d3d4d5;
}
/* The section paints the ground and nothing else. `uk-section` brings 70px of its own padding top
   and bottom, which stacked on the container's and made the footer 140px taller than the design
   before a single row was counted. */
.uk-section.kf-footer {
  padding-block: 0;
}
.kf-footer > .uk-container {
  padding-block: 69px 30px;
}
/* Every row here is a `uk-grid-margin`, which is a flat 40px margin-top from UIkit. The spacing
   between these three blocks is stated per block below, so the inherited 40 is only ever additive
   noise — the same trap as the gutter margins on the home page's card rows. */
.kf-footer .uk-container > .uk-grid-margin {
  margin-top: 0;
}

/* ---- top row: logo + socials, then four link columns --------------------- */
.kf-footer .kf-f__logo img {
  width: 249px;
  max-width: 100%;
  height: auto;
  display: block;
}
/* 21, so the ring row's top lands on the design's y143 under a logo that ends at 122. */
.kf-footer .kf-f__socials {
  margin-top: 21px;
}
/* The design's rings are outlines, not filled brand chips — the row is a quiet corner of the
   footer, and five solid marks would pull more weight than the link columns beside them. */
.kf-footer .kf-f__socials a {
  width: 34px;
  height: 34px;
  border: 1px solid #5a5e62;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #d3d4d5;
  transition:
    border-color 0.15s ease-out,
    color 0.15s ease-out;
}
.kf-footer .kf-f__socials a:hover,
.kf-footer .kf-f__socials a:focus-visible {
  border-color: var(--kf-yellow, #fed208);
  color: var(--kf-yellow, #fed208);
}

.kf-footer .kf-f__h {
  font:
    700 14px/16px "Roboto",
    sans-serif;
  /* Kino yellow, not white: the column labels are the only structural signal in a footer that is
     otherwise four columns of identical grey links, and at white they read as another link. */
  color: var(--kf-yellow, #fed208);
  margin: 0 0 14px;
}
.kf-footer .kf-f__links {
  list-style: none;
  margin: 0;
  padding: 0;
}
/* 26px pitch = the design's y99 -> y125, i.e. a 15px line plus 11px of space.
   `.uk-list > li:nth-child(n+2)` carries its own margin-top and stacked on top of this one, which
   is what made the pitch 39 instead of 26 — so the reset has to name the same element, not just
   set a value on `li + li`. */
.kf-footer .kf-f__links > li,
.kf-footer .kf-f__links > li:nth-child(n + 2) {
  margin: 0;
}
.kf-footer .kf-f__links > li + li {
  margin-top: 11px;
}
.kf-footer .kf-f__links a {
  font:
    400 13px/15px "Roboto",
    sans-serif;
  color: #d3d4d5;
  text-decoration: none;
}
/* Colour shift, not the highlighter. The footer sits on #0d0d0d with white links, so a yellow
   stroke behind white text left the label unreadable — the marker works on the dark bands because
   the text there is ink, and on the light ones for the same reason. Yellow text on near-black is
   the same accent doing the same job with the contrast the right way round. */
.kf-footer .kf-f__links a {
  transition: color 0.15s ease-out;
}
.kf-footer .kf-f__links a:hover,
.kf-footer .kf-f__links a:focus-visible {
  color: var(--kf-yellow, #fed208);
}
@media (prefers-reduced-motion: reduce) {
  .kf-footer .kf-f__links a {
    transition: none;
  }
}

/* ---- house of brands ------------------------------------------------------ */
.kf-footer .kf-f__rule {
  border-top: 1px solid #2a2b2c;
  margin: 0;
}
/* Scoped `.uk-container > ...` to match the uk-grid-margin reset above: at two classes these rules
   LOST to it and neither block moved, which is why the two rules sat 10px high however the value
   was tuned. Same specificity, declared later, so these win.
   The gap is measured from the TALLEST column in the row above — a 4-item link column, not the
   logo block, which is shorter. */
/* 40, against the design's 11.
 *
 * The Figma puts the top row's baseline at 211 and the first rule at 222, and 11px is what that
 * measures to — but the design's link columns are shorter than the built ones, so in the real
 * footer the rule crowds the last row of links ("All Products", "Downloads", "Privacy & Legal")
 * and the House of Brands band reads as attached to the menu above it rather than as its own
 * section.
 *
 * 40 matches the vertical rhythm this block already uses internally — the label sits on 30 above
 * and the brand row clears 28 below — so the rule now has comparable air on both sides. Deliberate
 * deviation, recorded in DEPLOY-DEV.md §7. */
.kf-footer .uk-container > .kf-f__hob {
  margin-top: 40px;
}
.kf-footer .kf-f__hoblabel {
  font:
    500 11px/14px "Roboto",
    sans-serif;
  letter-spacing: 0.12em;
  color: #717275;
  text-align: center;
  margin: 30px 0 16px;
}
/* Seven names on one row at the design's 12px. A flex row rather than a grid: the names are very
   different lengths (ChamSys against CHAUVET Professional) and equal columns would leave the short
   ones adrift in whitespace. */
.kf-footer .kf-f__brands {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 24px;
  /* 28 to the second rule: the wordmark row starts at the design's y282 and renders 28 tall
     (the design's text box is 18 — this is a link row with a 15px line in a list item), so 28 of
     margin lands the rule on y338. */
  margin: 0 0 28px;
  padding: 0;
}
.kf-footer .kf-f__brands > li,
.kf-footer .kf-f__brands > li:nth-child(n + 2) {
  margin: 0;
}
.kf-footer .kf-f__brands a {
  font:
    500 12px/15px "Roboto",
    sans-serif;
  color: #58595b;
  text-decoration: none;
}
.kf-footer .kf-f__brands a:hover,
.kf-footer .kf-f__brands a:focus-visible {
  color: #d3d4d5;
}

/* ---- bottom bar ----------------------------------------------------------- */
.kf-footer .uk-container > .kf-f__bottom {
  margin-top: 16px;
}
.kf-footer .kf-f__copy p {
  font:
    400 13px/15px "Roboto",
    sans-serif;
  color: #d3d4d5;
  margin: 0;
}
.kf-footer .kf-f__legal {
  list-style: none;
  display: flex;
  justify-content: flex-end;
  gap: 26px;
  margin: 0;
  padding: 0;
}
.kf-footer .kf-f__legal > li,
.kf-footer .kf-f__legal > li:nth-child(n + 2) {
  margin: 0;
}
/* Match the copyright's 15px line box so the two halves of the bottom row share a baseline; the
   list's own line-height left the legal side 28 tall against the copy's 15. */
.kf-footer .kf-f__legal > li {
  line-height: 15px;
}
.kf-footer .kf-f__legal a {
  font:
    400 13px/15px "Roboto",
    sans-serif;
  color: #d3d4d5;
  text-decoration: none;
}
.kf-footer .kf-f__legal a:hover,
.kf-footer .kf-f__legal a:focus-visible {
  color: var(--kf-yellow, #fed208);
}

/* ---- reflow --------------------------------------------------------------- */
@media (max-width: 959px) {
  .kf-footer > .uk-container {
    padding-block: 48px 28px;
  }
  .kf-footer .kf-f__brands {
    justify-content: flex-start;
  }
}
/* 959, not 767: the columns carry `width_medium`, so they go side by side at the m breakpoint and
   are stacked full width below it. The whole footer is in its stacked form from here down, which is
   where the touch-sized targets and the left-aligned legal row belong. */
@media (max-width: 959px) {
  .kf-footer .kf-f__socials {
    margin-top: 24px;
  }

  /* The design's 26px pitch is a 15px line and 11px of gap, which makes every footer link a 15px
     tall target — fine for a cursor, well under a thumb. The gap becomes PADDING here so the
     target grows without the rhythm changing: same 26px pitch, but the whole interval is now live.
     Desktop keeps the design's density, where the pointer is precise. */
  .kf-footer .kf-f__links > li + li,
  .kf-footer .kf-f__legal > li,
  .kf-footer .kf-f__brands > li {
    margin-top: 0;
  }
  .kf-footer .kf-f__links a,
  .kf-footer .kf-f__legal a,
  .kf-footer .kf-f__brands a {
    display: flex;
    align-items: center;
    min-height: 34px;
  }
  .kf-footer .kf-f__legal {
    flex-wrap: wrap;
    gap: 0 26px;
  }
  .kf-footer .kf-f__brands {
    gap: 0 24px;
  }
  /* The bottom row is two halves at desktop; stacked it reads as one block, so the legal links
     move under the copyright rather than staying flush right against nothing. */
  .kf-footer .kf-f__legal {
    justify-content: flex-start;
    margin-top: 14px;
  }
}

/* =============================================================================
   Mobile: collapsing link columns, brand marks, legal before copyright
   ============================================================================= */

/* The heading becomes a button (js/kf-footer.js) so it is focusable and states its own expanded
   state. It has to look identical to the plain heading it replaces at every width. */
.kf-footer .kf-f__toggle {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  width: 100%;
  cursor: default;
}
.kf-footer .kf-f__toggle:focus-visible {
  outline: 2px solid var(--kf-yellow, #fed208);
  outline-offset: 3px;
}

/* ---- brand marks ---------------------------------------------------------- */
/* Sized by optical AREA, not by height.
 *
 * One shared height is the obvious way to line up a logo row and it is wrong here, because these
 * marks are not the same shape. CHAUVET Professional is a stacked lockup at 229x150 (1.5:1);
 * Kino Flo's is a horizontal one at 300x63 (4.8:1). Give both the same 26px height and CPRO comes
 * out 40px wide against Kino Flo's 124 — a third of the width, reading as an afterthought. That is
 * what "the CHAUVET marks are smudges" was really describing, and why this had already been pushed
 * 18 -> 26 once: raising the shared height treats the symptom and widens the gap.
 *
 * Two marks look equally weighted when they cover a similar AREA, so height is derived per logo
 * from its aspect ratio instead. Full area-matching (h proportional to 1/sqrt(ar)) over-corrects
 * and made CPRO 56px tall against Kino Flo's 32; the exponent is eased to ~0.4, which keeps the row
 * between 32 and 50 and still reads as one band.
 *
 *   logo                  native      ratio   height   width
 *   CHAUVET Professional  229 x 150   1.53     50       76
 *   CHAUVET DJ            198 x  86   2.30     43       99
 *   ChamSys               238 x  85   2.80     40      112
 *   LynTec                800 x 216   3.71     35      130
 *   Kino Flo              300 x  63   4.76     32      152
 *
 * Every width is up on the old 40 / 60 / 73 / 83 / 124, and the spread is far tighter. A brand
 * added later with no rule of its own gets the 38px default and lands in the middle of the row.
 *
 * Matched on the filename, as the Kino Flo opacity exception below already is — these are the
 * install's own committed assets, so the names are stable. */
.kf-footer .kf-f__brands img {
  height: var(--kf-brand-h, 38px);
  width: auto;
  max-width: 160px;
  object-fit: contain;
  display: block;
  /* These are already WHITE marks, so no greyscale filter is needed — only the weight. Held at
     55% they read as the design's #58595b wordmarks do, a footnote under the link columns rather
     than a competing row; full strength on hover. Iluminarc is still a colour PNG, which the
     grayscale below normalises so it does not stand out against the six white ones. */
  opacity: 0.55;
  transition:
    filter 0.15s ease-out,
    opacity 0.15s ease-out;
}
.kf-footer .kf-f__brands img[src*="cpro-logo"]      { --kf-brand-h: 50px; }
.kf-footer .kf-f__brands img[src*="DJ-Logo"]        { --kf-brand-h: 43px; }
.kf-footer .kf-f__brands img[src*="chamsys-logo"]   { --kf-brand-h: 40px; }
.kf-footer .kf-f__brands img[src*="lyntec-logo"]    { --kf-brand-h: 35px; }
.kf-footer .kf-f__brands img[src*="kinoflo-white"]  { --kf-brand-h: 32px; }

.kf-footer .kf-f__brands img[src$=".png"] {
  filter: grayscale(1) brightness(2.4);
}
.kf-footer .kf-f__brands a:hover img,
.kf-footer .kf-f__brands a:focus-visible img {
  filter: none;
  opacity: 1;
}
/* Kino Flo's own mark is the exception: this is its site, so it sits at full strength rather than
   dimmed alongside the others. */
.kf-footer .kf-f__brands img[src*="kinoflo"] {
  opacity: 1;
}
.kf-footer .kf-f__brands a {
  display: flex;
  align-items: center;
  /* Clears the tallest mark (CPRO at 50) so the row's baseline does not shift when one logo grows. */
  min-height: 50px;
}
/* The two brands with no mark are wordmarks, and at full white they outweighed the six logos held
   at 55%. Matching their weight keeps the row even. */
.kf-footer .kf-f__brands a:not(:has(img)) {
  color: #6b6c6e;
}
.kf-footer .kf-f__brands a:not(:has(img)):hover,
.kf-footer .kf-f__brands a:not(:has(img)):focus-visible {
  color: #d3d4d5;
}

@media (max-width: 959px) {
  /* ---- link columns collapse -------------------------------------------- */
  /* Flush rows separated by their own hairline, like the mobile drawer's. Stacked columns carry
     UIkit's 30px `uk-grid-margin`, which put 83px of pitch on a 52px row and undid most of what
     collapsing them was for. */
  .kf-footer .kf-f__col,
  .kf-footer .kf-f__col.uk-grid-margin {
    margin-top: 0;
    border-top: 1px solid #2a2b2c;
  }
  .kf-footer .kf-f__brand.uk-grid-margin {
    margin-top: 0;
  }
  .kf-footer .kf-f__brand {
    margin-bottom: 26px;
  }
  .kf-footer .kf-f__col .kf-f__h {
    margin: 0;
  }
  .kf-footer .kf-f__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 52px;
    cursor: pointer;
  }
  /* Drawn, not an icon font: two rules, and the vertical one is dropped when the column opens —
     the same + / − the mobile nav's facets use, so the two behave alike. */
  .kf-footer .kf-f__toggle::after {
    content: "";
    width: 11px;
    height: 11px;
    flex: 0 0 auto;
    background:
      linear-gradient(#d3d4d5, #d3d4d5) center / 11px 1px no-repeat,
      linear-gradient(#d3d4d5, #d3d4d5) center / 1px 11px no-repeat;
  }
  .kf-footer .kf-f__col.is-open .kf-f__toggle::after {
    background: linear-gradient(#d3d4d5, #d3d4d5) center / 11px 1px no-repeat;
  }
  .kf-footer .kf-f__col .kf-f__links {
    display: none;
  }
  .kf-footer .kf-f__col.is-open .kf-f__links {
    display: block;
    padding-bottom: 12px;
  }

  /* ---- legal before copyright ------------------------------------------- */
  /* Stacked, the copyright is the least useful line in the footer and was sitting above the three
     links people actually go looking for. `order` rather than reordering the markup, so the
     desktop row keeps its designed left-to-right reading. */
  .kf-footer .kf-f__bottom {
    display: flex;
    flex-direction: column;
  }
  .kf-footer .kf-f__bottom > :first-child {
    order: 2;
  }
  .kf-footer .kf-f__bottom > :last-child {
    order: 1;
  }
  .kf-footer .kf-f__legal {
    margin-top: 0;
    margin-bottom: 6px;
  }
}