/* ==========================================================================
   Download Library
   --------------------------------------------------------------------------
   Written for this markup rather than ported: LynTec's downloads-library.css is 539 lines built
   around its navy palette and card language, and the two would not have shared a single colour.
   The class contract (kf-downloads__*, kf-dlrow__*) is the same, so the two remain comparable.

   Colour literals, not --kf-* tokens: those are scoped to `.kf-sec` in kf-about.css, and this
   element renders inside whatever section the Builder places it in. A var() that resolves to
   nothing takes its whole declaration with it, so nothing here depends on the ancestry.
   ========================================================================== */

.kf-downloads {
    --kf-dl-ink: #161616;
    --kf-dl-ink-3: #414243;
    --kf-dl-mute: #717275;
    /* Two greys doing two different jobs — keep them apart.
       --kf-dl-line OUTLINES a box (the PDF badge, the filter card, the search input): it has to
       close a shape, so it needs to be seen.
       --kf-dl-rule DIVIDES stacked things (section headers, download rows, filter groups): the
       type either side already does the separating, so the rule only has to hint at the seam. A
       divider that competes with the content it is separating is the thing being fixed here. */
    --kf-dl-line: #E5E5E5;
    --kf-dl-rule: #F2F2F2;
    --kf-dl-paper: #F9F9F9;
    --kf-dl-yellow: #FED208;
    --kf-dl-display: 'Roboto Condensed', 'Roboto', system-ui, sans-serif;
}

/* ---------------------------------------------------------------- sections */
.kf-downloads__section { margin-bottom: 44px; }

.kf-downloads__section-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 12px;
    margin-bottom: 4px;
    border-bottom: 2px solid var(--kf-dl-rule);
}

.kf-downloads__section-title {
    margin: 0;
    font-family: var(--kf-dl-display);
    font-size: 22px;
    line-height: 28px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: var(--kf-dl-ink);
}

.kf-downloads__view-all,
.kf-downloads__flat-count {
    flex: 0 0 auto;
    font-size: 14px;
    color: var(--kf-dl-ink-3);
    text-decoration: none;
    white-space: nowrap;
}
/* 14px text gives a 26px tap target, under the WCAG 2.5.8 minimum of 24 once you account for the
   line box, and there are ten of these on the library page. inline-flex plus min-height grows the
   hit area to 32px without changing where the text sits: the header row is centre-aligned and its
   height is set by the section title, which is taller than this. */
.kf-downloads__view-all {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
}
.kf-downloads__view-all:hover { color: var(--kf-dl-ink); text-decoration: underline; }

/* ------------------------------------------------------------------- rows */
.kf-downloads__list { display: flex; flex-direction: column; }

.kf-dlrow {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    padding: 14px 4px;
    border-bottom: 1px solid var(--kf-dl-rule);
}
.kf-dlrow:hover { background: var(--kf-dl-paper); }

/* Fixed width so every title starts on the same line regardless of format. */
.kf-dlrow__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 30px;
    border: 1px solid var(--kf-dl-line);
    background: #fff;
    font-family: var(--kf-dl-display);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    color: var(--kf-dl-ink-3);
}

.kf-dlrow__body { min-width: 0; }
.kf-dlrow__title {
    margin: 0;
    font-family: var(--kf-dl-display);
    font-size: 16px;
    line-height: 22px;
    font-weight: 700;
    color: var(--kf-dl-ink);
    text-transform: none;
}
.kf-dlrow__meta { margin-top: 2px; font-size: 13px; color: var(--kf-dl-mute); }

/* Shape and type come from .kf-btn in kf-about.css, where this class is aliased — do NOT set
   font-family, letter-spacing, border-radius or text-transform here. This rule originally did, in
   Roboto Condensed at .06em, and because this file loads AFTER kf-about.css it quietly beat the
   design system: the buttons kept LynTec's condensed, tracked lettering inside a Kino Flo pill.

   YELLOW, the house primary. These were a ghost outline on the reasoning that sixty yellow pills
   would be loud in a list — but yellow on ink is what a Kino Flo button looks like, and downloading
   is the only thing anyone comes to this page to do. */
.kf-dlrow__btn {
    flex: 0 0 auto;
    background: var(--kf-dl-yellow);
    color: var(--kf-dl-ink);
    border: 2px solid transparent;
    text-decoration: none;
    white-space: nowrap;
}
.kf-dlrow__btn:hover { background: #D9B201; color: var(--kf-dl-ink); text-decoration: none; }

/* --------------------------------------------------------------- sidebar */
.kf-downloads__sidebar { position: sticky; top: 24px; align-self: start; }

.kf-downloads__filter { border: 1px solid var(--kf-dl-line); background: #fff; padding: 20px; }

/* The mobile drawer's contents are a CLONE of the sidebar card above, so the card arrives wearing
   an outline and 20px of padding it does not need once it is inside the bottom sheet — the sheet
   panel is already the container, and at 390px the doubled inset costs 42px of label width. Strip
   the chrome, keep the contents. */
[data-kf-downloads-drawer-content] .kf-downloads__filter {
    border: 0;
    padding: 0;
    background: transparent;
}

.kf-downloads__filter-search { position: relative; margin-bottom: 16px; }
.kf-downloads__filter-search-input {
    width: 100%;
    height: 40px;
    padding: 0 38px 0 12px;
    border: 1px solid var(--kf-dl-line);
    background: var(--kf-dl-paper);
    font-size: 15px;
    color: var(--kf-dl-ink);
}
.kf-downloads__filter-search-input:focus { outline: none; border-color: var(--kf-dl-ink); background: #fff; }
.kf-downloads__filter-search-icon {
    position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
    width: 18px; height: 18px; color: var(--kf-dl-mute); pointer-events: none;
}

.kf-downloads__filter-header {
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    padding-top: 4px; margin-bottom: 10px;
}
.kf-downloads__filter-header h3 {
    margin: 0;
    font-family: var(--kf-dl-display);
    font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    color: var(--kf-dl-ink);
}
.kf-downloads__filter-clear {
    border: 0; background: none; padding: 0; cursor: pointer;
    /* A link, not a button — so it is not aliased onto .kf-btn, but it still needs the house face
       rather than whatever the browser defaults a <button> to (Arial). */
    font-family: 'Roboto', system-ui, sans-serif;
    font-size: 13px; color: var(--kf-dl-ink-3); text-decoration: underline;
}
.kf-downloads__filter-clear:hover { color: var(--kf-dl-ink); }

.kf-downloads__filter-groups { list-style: none; margin: 0; padding: 0; }
.kf-downloads__filter-group { border-top: 1px solid var(--kf-dl-rule); }

.kf-downloads__filter-group-toggle {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    width: 100%; padding: 12px 0; border: 0; background: none; cursor: pointer;
    font-family: var(--kf-dl-display);
    font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--kf-dl-ink); text-align: left;
}
.kf-downloads__filter-group-chevron {
    width: 8px; height: 8px; flex: 0 0 auto;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: rotate(45deg); transition: transform .15s ease;
}
.kf-downloads__filter-group.is-open > .kf-downloads__filter-group-toggle .kf-downloads__filter-group-chevron {
    transform: rotate(-135deg);
}

.kf-downloads__filter-group-body { list-style: none; margin: 0 0 12px; padding: 0; }
.kf-downloads__filter-group:not(.is-open) > .kf-downloads__filter-group-body { display: none; }
.kf-downloads__filter-group-body li { margin: 0; }
.kf-downloads__filter-group-body label {
    display: flex; align-items: center; gap: 10px;
    padding: 6px 4px; font-size: 15px; line-height: 1.3;
    color: var(--kf-dl-ink-3); cursor: pointer;
}
.kf-downloads__filter-group-body label:hover { background: var(--kf-dl-paper); color: var(--kf-dl-ink); }
/* Checkbox — yellow when checked, with a dark glyph.
   `accent-color` cannot express this: it colours the box but leaves the tick to the browser, which
   picks black or white by luminance on its own and disagrees across engines. appearance:none and a
   hand-drawn tick is the only way to guarantee #FED208 behind #161616 everywhere, and it is already
   how the products and blog filters are built. The 3px corner stays — per the house spec only
   buttons become pills and only cards go square; checkboxes keep theirs. */
.kf-downloads__filter-checkbox {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    margin: 0;
    flex-shrink: 0;
    position: relative;
    border: 1.5px solid #B9BABC;
    border-radius: 3px;
    background: #fff;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}
.kf-downloads__filter-checkbox:hover { border-color: var(--kf-dl-ink); }
.kf-downloads__filter-checkbox:checked {
    background: var(--kf-dl-yellow);
    border-color: var(--kf-dl-yellow);
}
.kf-downloads__filter-checkbox:checked::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 0.5px;
    width: 4px;
    height: 8px;
    border: solid var(--kf-dl-ink);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.kf-downloads__filter-checkbox:focus-visible {
    outline: 2px solid var(--kf-dl-ink);
    outline-offset: 2px;
}
.kf-downloads__filter-count { color: var(--kf-dl-mute); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------- empty + load more */
.kf-downloads__empty { padding: 40px 0; font-size: 16px; color: var(--kf-dl-ink-3); }
.kf-downloads__reset,
.kf-downloads__loadmore-btn {
    margin-left: 8px;
    border: 1px solid var(--kf-dl-ink); background: transparent; cursor: pointer;
    padding: 10px 18px;
    color: var(--kf-dl-ink);
}
.kf-downloads__reset:hover,
.kf-downloads__loadmore-btn:hover { background: var(--kf-dl-ink); color: #fff; }
.kf-downloads__loadmore { margin: 28px 0 0; text-align: center; }
.kf-downloads__loadmore-btn { margin: 0; background: var(--kf-dl-yellow); border-color: var(--kf-dl-yellow); }
.kf-downloads__loadmore-btn:hover { background: #D9B201; border-color: #D9B201; color: var(--kf-dl-ink); }

/* --------------------------------------------- mobile filter sheet (FAB) */
.kf-downloads__mobile-fab {
    position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 900;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 20px; border: 0; cursor: pointer;
    background: var(--kf-dl-ink); color: #fff;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
}
.kf-downloads__mobile-fab-count {
    min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--kf-dl-yellow); color: var(--kf-dl-ink); font-size: 12px;
}

.kf-downloads__bottomsheet { position: fixed; inset: 0; z-index: 1000; }
.kf-downloads__bottomsheet[hidden] { display: none; }
.kf-downloads__bottomsheet-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .5); }
.kf-downloads__bottomsheet-panel {
    position: absolute; left: 0; right: 0; bottom: 0;
    max-height: 84vh; display: flex; flex-direction: column;
    background: #fff; padding: 8px 16px 16px;
}
.kf-downloads__bottomsheet-handle {
    width: 44px; height: 4px; border-radius: 2px; margin: 6px auto 10px; background: var(--kf-dl-line);
}
.kf-downloads__bottomsheet-close {
    position: absolute; top: 6px; right: 10px;
    border: 0; background: none; font-size: 26px; line-height: 1; cursor: pointer; color: var(--kf-dl-ink-3);
}
.kf-downloads__bottomsheet-content { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; }
.kf-downloads__bottomsheet-ctas { display: flex; gap: 10px; padding-top: 12px; }
.kf-downloads__bottomsheet-cta {
    flex: 1 1 0; padding: 13px 12px; border: 1px solid var(--kf-dl-ink); cursor: pointer;
}
.kf-downloads__bottomsheet-cta--reset { background: #fff; color: var(--kf-dl-ink); }
.kf-downloads__bottomsheet-cta--apply { background: var(--kf-dl-yellow); border-color: var(--kf-dl-yellow); color: var(--kf-dl-ink); }

@media (max-width: 959px) {
    .kf-downloads__sidebar { position: static; }
    .kf-dlrow { grid-template-columns: 44px minmax(0, 1fr); row-gap: 10px; }
    .kf-dlrow__badge { width: 44px; }
    .kf-dlrow__btn { grid-column: 2; justify-self: start; }
}

/* ==========================================================================
   Download Center — hero
   --------------------------------------------------------------------------
   The theme's `secondary` section style is mid-grey (#58595b). The house hero — press release,
   search — is near-black with a yellow rule, a yellow eyebrow and a display-scale heading, so the
   band is overridden here rather than by picking a different Builder style that still would not
   match. !important because the section style sets its own background and colours.
   ========================================================================== */
.kf-sec.kf-dl-head {
    background-color: #161616 !important;
    color: #fff !important;
}

/* ---- Background video ---------------------------------------------------
   The section carries a looping <video> (warranty-hero-bts.mp4) behind the copy. The ink
   background above stays as the fallback: it is what shows while the file buffers, on a data-saver
   connection, and anywhere the codec fails — so the hero is never a white band, it is just the flat
   hero it was before.

   Two scrims, not one. YOOtheme's `media_overlay` paints a flat rgba(0,0,0,.62) cover, which
   protects the copy but flattens the whole frame into grey mud. Adding a gradient on top of it
   returns some depth: heaviest at the left and bottom where the eyebrow, heading, subline and the
   ten browse tiles actually sit, lightest at the top right where nothing but footage is. */
.kf-dl-head > .uk-position-cover {
    background-image:
        linear-gradient(100deg, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, .18) 55%, rgba(0, 0, 0, 0) 100%),
        linear-gradient(to top, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, 0) 55%);
}

/* Stop the loop for anyone who has asked the OS for less motion. The poster frame stays, so the
   hero still reads as an image rather than going blank. */
@media (prefers-reduced-motion: reduce) {
    .kf-dl-head video { display: none; }
}

.kf-dl-head .kf-rule {
    display: block;
    width: 64px;
    height: 3px;
    background: #FED208;
    margin: 0 0 18px;
}

.kf-dl-head .kf-eyebrow {
    font-family: 'Roboto', system-ui, sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .145em;
    text-transform: uppercase;
    color: #FED208;
    margin: 0 0 10px;
}

/* Display scale. The press hero runs to 80px; this is a utility landing, so it sits a step below
   while still reading as the same family. */
.kf-dl-head h1,
.kf-dl-head .kf-h1 {
    font-family: 'Roboto Condensed', 'Roboto', system-ui, sans-serif !important;
    font-size: 56px !important;
    line-height: 62px !important;
    font-weight: 700 !important;
    color: #fff !important;
    margin: 0 0 14px !important;
    text-transform: none !important;
}

.kf-dl-head .kf-sub {
    max-width: 62ch;
    font-size: 17px;
    line-height: 27px;
    color: #D3D4D5;
    margin: 0;
}

/* The browse tiles sit inside the ink hero — invert them onto it.
   Tinted DOWN, not up. A 4%-white wash was enough separation against flat #161616, but over moving
   footage it disappears entirely wherever a bright frame passes under it — and these ten tiles are
   the hero's actual navigation, so they cannot be allowed to flicker in and out of legibility with
   the edit. Tinting toward black instead gives each tile its own consistent ground regardless of
   what is behind it, and the blur keeps it from reading as a flat black box. */
.kf-dl-head .kf-dlbrowse { margin-top: 34px; }
.kf-dl-head .kf-dlbrowse__card {
    background: rgba(10, 10, 10, .52);
    border-color: rgba(255, 255, 255, .22);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.kf-dl-head .kf-dlbrowse__card:hover {
    background: rgba(10, 10, 10, .72);
    border-color: #FED208;
}
.kf-dl-head .kf-dlbrowse__label { color: #fff; }
.kf-dl-head .kf-dlbrowse__count { color: #C6C7C9; }
.kf-dl-head .kf-dlbrowse__grid::-webkit-scrollbar-track { background: rgba(255, 255, 255, .08); }
.kf-dl-head .kf-dlbrowse__grid::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .28); }

@media (max-width: 959px) {
    .kf-dl-head h1, .kf-dl-head .kf-h1 { font-size: 40px !important; line-height: 46px !important; }
}

/* Section titles at the house h2 scale.
   They were 22px against the site's 36px h2, which read as a smaller, unrelated page. 30px sits
   between the two: ten of these stack down the page, and the full h2 at that repetition would
   overwhelm the rows they label. */
.kf-downloads__section-title {
    font-size: 30px;
    line-height: 36px;
    letter-spacing: 0;
}
.kf-downloads__view-all { font-size: 15px; }

/* The browse tiles' desktop grid is NOT here — it is in the element's own <style> block, at
   builder/kf_downloads_browse_types/templates/template.php. That block renders in the body, after
   this file, so anything written here that the element also declares (display, overflow-x) loses.
   Only the hero-inversion colours above work from this file, because the element never sets them. */

/* ==========================================================================
   Buttons — geometry exceptions only
   --------------------------------------------------------------------------
   The button itself is the design system's: kf-about.css owns .kf-btn (52px, 30px padding, 30px
   radius, Roboto 15/700, untracked, uppercase) and these classes are aliased onto it there. This
   block previously restated all of that, which is the mistake that let LynTec's square, Inter,
   letterspaced buttons survive the port in the first place.

   What stays here is only what genuinely differs from a CTA.
   ========================================================================== */

/* Sixty of these stack down the page; the 52px CTA height would turn the list into a column of
   lozenges. Same pill, same type, shorter. */
.kf-dlrow__btn {
    min-height: 40px;
    padding-inline: 24px;
    font-size: 14px;
}

.kf-downloads__reset { min-height: 44px; padding-inline: 24px; }
.kf-downloads__bottomsheet-cta { padding-inline: 20px; }
.kf-downloads__mobile-fab { padding-inline: 26px; }

/* The FAB is dark-on-light, which no .kf-btn modifier covers. */
.kf-downloads__mobile-fab { background: var(--kf-dl-ink); color: #fff; border: 0; }

/* The sidebar search field takes the pill so it sits with the buttons. */
.kf-downloads__filter-search-input { border-radius: 999px; padding-left: 18px; }

/* "View all" is a link, not a button. */
.kf-downloads__view-all {
    font-family: 'Roboto', system-ui, sans-serif;
    font-weight: 700;
    text-transform: none;
    letter-spacing: normal;
}

/* The hero eyebrow draws its own rule.
   It used to be a literal <span class="kf-rule"> sitting in an HTML text node beside the eyebrow —
   98 bytes that were the only thing keeping /downloads/ off 100% element-based. Same 64x3 yellow
   bar, now a pseudo-element so the eyebrow can be a real headline element. */
.kf-dl-head__eyebrow::before {
    content: "";
    display: block;
    width: 64px;
    height: 3px;
    margin-bottom: 18px;
    background: var(--kf-yellow, #FED208);
}