/* =============================================================================
   Mobile drawer — MNAV2 (Figma 369:947 / 1046 / 1253 / 1460)
   "Nav v2 — updated from Alan's Figma feedback (Aug 12–14)"
   =============================================================================

   DESIGN            390-wide FULL-BLEED WHITE drawer, not the theme's 270-wide dark slate panel
   L1 ROWS           60 tall · label x20 Bold 18 #000 · chevron x357 #444 · 1px #e2e2e2 rules
   FOOTER            Contact Us pill, 350x52, r100, #ffdd00, 24 above and below
   SUB-LEVELS        indent ladder 20 / 20 / 34, the same 14px-per-level step the desktop
                     drawer uses

   Scoped to #tm-dialog-mobile throughout: `.uk-offcanvas-bar` is a shared UIkit component and
   this must not restyle any other off-canvas on the site.

   NOT DONE HERE, because neither is reachable from CSS: the design's black utility bar
   ("House of Brands" / "Quick Product Find") and the logo inside the drawer header. Both need
   markup in the off-canvas, which is a theme template override rather than a stylesheet.
   ============================================================================= */

#tm-dialog-mobile .uk-offcanvas-bar {
  width: 100%;
  max-width: none;
  left: 0;
  right: 0;
  padding: 0;
  background: #fff;
  color: #000;
}

/* the theme pushes the nav to the bottom of the drawer; the design starts it at the top */
#tm-dialog-mobile .uk-margin-auto-bottom {
  margin-top: 0 !important;
  margin-bottom: auto !important;
}

/* RESERVE THE HEADER'S HEIGHT, do not let the header create it.
   js/kf-mnav-header.js injects the utility bar and header, and while that markup sat in normal
   flow the drawer had two layouts: before the script ran the rows began at y=0, and the moment it
   landed they were shoved down 118px. On a fast local load that is invisible; on a real connection
   it is a visible snap — the menu opens with everything jammed against the top and then jumps.

   118 = the utility bar's 42 plus the header's 76, i.e. exactly where MNAV2 puts the first row.
   The two bands are absolutely positioned into that reserve (below), so they paint INTO space the
   list has already left for them and nothing moves when they arrive. */
#tm-dialog-mobile .uk-panel.widget {
  padding-top: 118px;
}
#tm-dialog-mobile .kf-mnav__util,
#tm-dialog-mobile .kf-mnav__head {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 1;
}
#tm-dialog-mobile .kf-mnav__util {
  top: 0;
}
#tm-dialog-mobile .kf-mnav__head {
  top: 42px;
}

/* ---- L1 rows ------------------------------------------------------------- */
#tm-dialog-mobile .uk-nav-primary > li > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 60px;
  margin: 0;
  padding: 0 20px;
  font:
    700 18px/22px "Roboto Condensed",
    sans-serif;
  color: #000;
  text-transform: none;
  letter-spacing: 0;
}
#tm-dialog-mobile .uk-nav-primary > li > a:hover,
#tm-dialog-mobile .uk-nav-primary > li.uk-open > a {
  color: #000;
  background: #f2f2f2;
}

/* UIkit's own divider, recoloured. `.uk-nav-divider > :nth-child(n+2)` already draws it, so this
   only changes the colour and lets it run the full width rather than inside the old 20px padding. */
#tm-dialog-mobile .uk-nav-divider > :nth-child(n+2) {
  border-top: 1px solid #e2e2e2;
  margin-top: 0;
  padding-top: 0;
}

/* the chevron UIkit renders for a parent row */
#tm-dialog-mobile .uk-nav-parent-icon > a::after,
#tm-dialog-mobile .uk-nav-primary > li > a > .uk-nav-parent-icon {
  color: #444;
  width: 14px;
  height: 14px;
}

/* ---- sub levels ---------------------------------------------------------- */
/* Level 2 is the column name (By Series / By Category / By Application), level 3 the series or
   category, level 4 the destination. The ladder is 20 / 20 / 34 — the design keeps levels 2 and 3
   flush and only indents the leaf. */
#tm-dialog-mobile .uk-nav-sub {
  padding: 0 0 8px;
}
#tm-dialog-mobile .uk-nav-sub a {
  display: block;
  padding: 7px 20px;
  font:
    600 14px/18px "Roboto Condensed",
    sans-serif;
  color: #000;
}
#tm-dialog-mobile .uk-nav-sub .uk-nav-sub a {
  font:
    700 15px/19px "Roboto Condensed",
    sans-serif;
  color: #000;
}
#tm-dialog-mobile .uk-nav-sub .uk-nav-sub .uk-nav-sub a {
  padding-left: 34px;
  font:
    400 14px/18px "Roboto",
    sans-serif;
  color: #444;
}
#tm-dialog-mobile .uk-nav-sub a:hover {
  color: #000;
  text-decoration: underline;
}

/* ---- footer CTA ---------------------------------------------------------- */
/* A real menu item (see add-mobile-cta.php), not a pseudo-element: it has to be a link people can
   tap and reach by keyboard. It lives in the shared menu, so the navbar — which has its own
   Contact Us pill — hides it. */
.uk-navbar-nav > li.kf-mnav__cta { display: none; }

#tm-dialog-mobile .uk-nav-primary > li.kf-mnav__cta {
  border-top: 0 !important;
  margin: 0;
  padding: 24px 20px;
}
#tm-dialog-mobile .uk-nav-primary > li.kf-mnav__cta > a {
  display: flex;
  align-items: center;
  justify-content: center;
  /* the CTA sits inside .uk-nav-primary, so the 60px L1 row height applies to it too and made the
     pill 8px too tall; height wins over the inherited min-height */
  min-height: 0;
  height: 52px;
  padding: 0 24px;
  border-radius: 100px;
  background: var(--kf-yellow, #fed208);
  color: #000;
  font:
    700 16px/20px "Roboto Condensed",
    sans-serif;
  text-transform: none;
}
#tm-dialog-mobile .uk-nav-primary > li.kf-mnav__cta > a:hover {
  background: #e8c900;
  color: #000;
}

/* =============================================================================
   Drawer header — MNAV2 (Figma 369:947)
   =============================================================================
   Two bands above the first menu row. Markup is assembled by js/kf-mnav-header.js; the geometry
   is here. Measured off the design at its own 390 width:

     utility bar  390x42  #000, labels 13px at x20 and flush right to x370
     header       390x76  #fff, logo 40 tall at x20, icons frame x312 w58
                          (search 20px at 312, close at 354 — a 22px gap)

   The first L1 row therefore starts at y=118. Before this the nav began at 76, i.e. exactly the
   utility bar's 42px too high. */
.kf-mnav__util {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 42px;
  padding-inline: 20px;
  background: #000;
}
.kf-mnav__util a {
  font:
    400 13px/16px "Roboto",
    sans-serif;
  color: #fff;
  text-decoration: none;
}
.kf-mnav__util a:hover,
.kf-mnav__util a:focus-visible {
  color: var(--kf-yellow, #fed208);
}

.kf-mnav__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
  padding-inline: 20px;
  background: #fff;
}
.kf-mnav__logo {
  display: flex;
  align-items: center;
}
.kf-mnav__logo img {
  display: block;
  height: 40px;
  width: auto;
}
/* Only the close button lives here now — search was pulled out of the drawer once it landed in the
   mobile header bar, where it is reachable without opening the drawer first. The gap is kept so a
   second icon can be added back without re-deriving the spacing. */
.kf-mnav__icons {
  display: flex;
  align-items: center;
  gap: 22px;
}

/* UIkit parks its close button absolutely in the bar's top-right. Inside the header row it is a
   flex item, so the absolute positioning has to go or it would sit over the utility bar. */
/* 16px, not UIkit's 24: the design's close glyph is 16 wide. ID-scoped because .uk-offcanvas-bar is
   an inverse context in UIkit and paints .uk-close white, which is invisible on this white ground —
   a class-only rule ties on specificity and loses on order. */
#tm-dialog-mobile .kf-mnav__icons > .uk-offcanvas-close {
  position: static;
  margin: 0;
  padding: 0;
  width: 16px;
  height: 25px;
  color: #000;
}
#tm-dialog-mobile .kf-mnav__icons > .uk-offcanvas-close svg {
  width: 16px;
  height: 16px;
}

/* =============================================================================
   Products panel — MNAV2 2/3/4 (Figma 369:1046 / 369:1253 / 369:1460)
   =============================================================================
   Measured off the design at 390:

     panel            full width, #f2f2f2, content inset to x20 (350 wide)
     facet head       350x49, label 14px Semi Bold #000, +/- glyph flush right
     facet rule       350x1 #000000  — BLACK, unlike the #e2e2e2 between L1 rows
     series card      350x64, 64px thumb at x20, copy from x98 (14px gutter)
                      title 15/20 Bold #000, description 12/17 Regular #444
     application row  350x46 with #e2e2e2 rules between
     buttons          350x52 each, 12px apart, 26px below the last rule
   ============================================================================= */
#tm-dialog-mobile .uk-nav-primary > li > .uk-nav-sub {
  background: #f2f2f2;
  padding: 4px 20px 0;
  margin: 0;
}

/* ---- facet heads --------------------------------------------------------- */
#tm-dialog-mobile .kf-facet > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 49px;
  padding: 0;
  border-bottom: 1px solid #000;
  font:
    600 14px/17px "Roboto",
    sans-serif;
  color: #000;
  text-transform: none;
}
/* The +/- is drawn rather than imported: it is two rules, and an icon font or an SVG sprite for
   this would be more moving parts than the glyph is worth. The horizontal bar is always there;
   the vertical one is removed when the facet opens, turning + into -. */
#tm-dialog-mobile .kf-facet > a::after {
  content: "";
  width: 11px;
  height: 11px;
  flex: 0 0 auto;
  background:
    linear-gradient(#000, #000) center/11px 1px no-repeat,
    linear-gradient(#000, #000) center/1px 11px no-repeat;
}
#tm-dialog-mobile .kf-facet.uk-open > a::after {
  background: linear-gradient(#000, #000) center/11px 1px no-repeat;
}
/* Collapsed in CSS, not only by UIkit. WordPress renders every sub-list expanded and UIkit hides
   them when the Nav component initialises — so between first paint and that moment the panel is its
   full ~2,000px, all 48 rows deep. Same class of flash as the header above: state the resting
   layout in CSS and let the component take over from there. `.uk-open` is what UIkit sets. */
#tm-dialog-mobile .kf-facet > ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: none;
}
#tm-dialog-mobile .kf-facet.uk-open > ul {
  display: block;
}

/* ---- series cards -------------------------------------------------------- */
/* The design's series list runs on an 84px pitch — a 64px card and a 20px gap (cards at y74, 158,
   242) — with the first card 21px below the black rule.
   
   MARGINS, NOT A FLEX GAP. This list was `display: flex; gap: 20px` and that is what produced the
   squash on every open and close: UIkit animates the panel's HEIGHT, and a column flex container
   responds to losing height by shrinking its items — so the seven cards visibly compressed into
   each other, thumbnails and all, before the panel finished collapsing. Block layout cannot
   compress; the content is simply clipped by the animating box, which is what the eye expects.
   The spacing is on the LI rather than inside the anchor so the gap stays dead to a stray tap. */
#tm-dialog-mobile .kf-facet > ul:has(.kf-scard) {
  padding-top: 1px;
  padding-bottom: 4px;
}
/* Series cards only. The application rows are also .kf-scard now, and they sit on the row rhythm
   with a hairline between them rather than floating 20px apart like the cards. */
#tm-dialog-mobile .kf-facet > ul > li:has(> a.kf-scard:not(.kf-scard--app)) {
  margin-top: 20px;
}
#tm-dialog-mobile a.kf-scard {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 0;
  min-height: 0;
  text-transform: none;
}
/* 96x64, not the design's 64x64 square. Every one of these stills is a wide frame — Diva Lux is
   300x125, i.e. 2.4:1 — so a square crop threw away 58% of the picture and left an unreadable
   sliver of a lit set. 3:2 keeps the subject and still holds the card at 64 tall, so the 84px
   pitch is unchanged. Same ratio as the application rows, so the two lists agree.

   6px radius matches the desktop panel, where both the 80x80 series plate and the 127x84
   application tile are rounded. The radius is on the CLIPPING box: putting it on the <img> alone
   leaves the square corners of the box showing through behind an object-fit crop. */
#tm-dialog-mobile .kf-scard__thumb {
  flex: 0 0 96px;
  width: 96px;
  height: 64px;
  overflow: hidden;
  border-radius: 6px;
  background: #d9d9d9;
}
#tm-dialog-mobile .kf-scard__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
#tm-dialog-mobile .kf-scard__copy {
  display: block;
  min-width: 0;
}
#tm-dialog-mobile .kf-scard__t {
  display: block;
  font:
    700 15px/20px "Roboto",
    sans-serif;
  color: #000;
}
/* Two lines, clamped. The design draws every series card at exactly 64 so the list runs on an even
   84px pitch, and that only holds while the description fits two lines: Auroris and LiteRibbon are
   long enough to take a third, which pushed those cards to 75 and made the rhythm stagger. The
   wider 96px thumb narrowed the copy column and would have put four more cards over the line.
   Clamping keeps the pitch even and the sentence still reads — the full copy is on the page the
   card leads to. */
#tm-dialog-mobile .kf-scard__d {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  margin-top: 4px;
  font:
    400 12px/17px "Roboto",
    sans-serif;
  color: #444;
}

/* ---- category tree and application rows ---------------------------------- */
/* Rows that are NOT series cards: the category tree and the four applications. The design gives
   applications a 46px row with a hairline between; the category tree indents by depth. */
#tm-dialog-mobile .kf-facet > ul > li > a {
  display: flex;
  align-items: center;
  min-height: 46px;
  padding: 0;
  font:
    700 15px/20px "Roboto",
    sans-serif;
  color: #000;
  text-transform: none;
}
#tm-dialog-mobile .kf-facet > ul > li + li > a {
  border-top: 1px solid #e2e2e2;
}
/* Series cards carry their own spacing and must not take the row rule. */
#tm-dialog-mobile .kf-facet > ul > li > a.kf-scard {
  border-top: 0;
  min-height: 0;
}

/* ---- application rows carry the desktop panel's stills ---------------------
   The desktop mega-menu shows each application as a photo tile; the drawer showed the four as bare
   text. Same four images, same order, so an application looks the same in both navs.

   The thumb is 3:2 like the desktop tile (127x84) rather than the series list's 64px square — an
   application still is a scene, and a square crop of a wide frame loses the part that identifies
   it. The row keeps its hairline, so this reads as a richer row rather than as a second card list. */
#tm-dialog-mobile .kf-facet > ul > li > a.kf-scard--app {
  align-items: center;
  gap: 14px;
  padding-block: 12px;
}
/* The rule between rows, which the blanket .kf-scard reset above removes for the series cards. */
#tm-dialog-mobile .kf-facet > ul > li + li > a.kf-scard--app {
  border-top: 1px solid #e2e2e2;
}
/* Same 96x64 as the series thumb above now — kept as its own rule only so the application row's
   proportions stay stated rather than inherited by accident. */
#tm-dialog-mobile .kf-scard--app .kf-scard__t {
  font:
    700 15px/20px "Roboto",
    sans-serif;
}
#tm-dialog-mobile .kf-facet > ul ul {
  list-style: none;
  margin: 0 0 8px;
  padding: 0 0 0 14px;
}
#tm-dialog-mobile .kf-facet > ul ul a {
  display: flex;
  align-items: center;
  min-height: 31px;
  padding: 0;
  font:
    600 14px/19px "Roboto",
    sans-serif;
  color: #222;
  text-transform: none;
}

/* ---- the two pill buttons ------------------------------------------------ */
#tm-dialog-mobile .kf-mnav__btns {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 26px 0 24px;
  list-style: none;
}
#tm-dialog-mobile a.kf-mnav__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  border-radius: 100px;
  padding: 0 24px;
  font:
    700 15px/20px "Roboto",
    sans-serif;
  text-transform: none;
  text-decoration: none;
}
#tm-dialog-mobile a.kf-mnav__btn--dark {
  background: #000;
  color: #fff;
}
#tm-dialog-mobile a.kf-mnav__btn--yellow {
  background: var(--kf-yellow, #fed208);
  color: #000;
}