/* ===================================================================
   KABTech — WP-menu-driven navigation: typography restatement.
   ===================================================================
   ROUND-2 EXPERIMENT (2026-08-26).

   WHY THIS FILE EXISTS
   kab.css owns the nav's LAYOUT and CHROME (eyebrow bars, column borders,
   panel positioning, overlay, footer grid) and already targets the
   .kab-* classes the new renderer emits — so all of it keeps working
   unchanged. What it does NOT own is the per-widget TYPOGRAPHY: in the
   Elementor build every font-size/weight/colour lived in Elementor's
   generated per-element CSS (post-32.css / post-33.css), keyed on
   .elementor-element-<id>. Those ids belong to widgets that no longer
   exist here, so the type has to be restated once, in the design system,
   against the semantic classes.

   Every value below is MEASURED off the Elementor build (build/navprobe.js
   → qa-screens/navrebuild/before-typo.json), not guessed. Changing one is
   a design change, not a refactor.

   NO !important anywhere: these rules load after kab.css (priority 110 vs
   100) and out-specify Elementor's remaining container rules on their own.
   =================================================================== */

/* -------------------------------------------------------------------
   Header — nav toggles
   Measured: 15px/24px, 600, Public Sans, #0F1533, padding 10px 16px,
   box 126x44 (Solutions) / 133x44 (Resources).
   ------------------------------------------------------------------- */
.kab-navlinks {
  display: flex;
  align-items: center;
  gap: 20px;
}
.kab-navtoggle .kab-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  font-family: "Public Sans", sans-serif;
  font-size: 15px;
  line-height: 24px;
  font-weight: 600;
  color: var(--e-global-color-kabnavink);
}

/* -------------------------------------------------------------------
   Header — mega panel geometry
   -------------------------------------------------------------------
   In the Elementor build every one of these values came from a container
   SETTING, and kab.css therefore scoped its rules `.e-con.kab-dd*`. The
   renderer emits plain divs (no .e-con), so those rules do not apply and
   the geometry has to be restated here. This is the real cost of moving
   off widgets, and it is a one-time cost: the values are the same ones
   kab.css documents, measured back off the Elementor build.

   The shortcode widget Elementor wraps around our output must not become
   a positioning context or a layout box of its own. */
.kab-header > .elementor-widget-shortcode.kab-panelswrap,
.kab-panelswrap > .elementor-shortcode { display: contents; }

/* Panel: full-bleed drop panel positioned against .kab-header
   (mirrors .e-con.kab-dd in kab.css). */
.kab-dd {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  width: 100%;
  background: #fff;
  border-top: 1px solid var(--e-global-color-kabnavborder);
  box-shadow: 0 30px 50px -24px rgba(10, 16, 56, 0.35);
  display: none;
  z-index: 90;
}
.kab-dd.kab-dd-open { display: block; }

/* Inner row: the 1288 chrome grid, led by 41px so the columns land on the
   design's 117/519/921 (@1440) x-positions — see the long note in kab.css. */
.kab-dd-inner {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: flex-start;
  /* kab.css's .kab-chrome supplies the 1288 grid via --kab-gutter-chrome,
     which is itself `max(40px, (100% - 1288px)/2)` — so the gutter IS the
     centring and no max-width/margin is needed (adding one double-counts
     and pulls the columns left of the design's 117px). */
  padding-left: calc(var(--kab-gutter-chrome) + 41px);
  padding-right: var(--kab-gutter-chrome);
}

/* Columns: 402px fixed, the design's asymmetric padding, 1px divider. */
.kab-dd-inner > .kab-dd-col {
  width: 402px;
  flex: 0 0 402px;
  min-width: 0;
  padding: 38px 49px 52px 48px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-right: 1px solid var(--e-global-color-kabcolborder);
}
.kab-dd-inner > .kab-dd-col:first-child { padding-left: 0; }
.kab-dd-inner > .kab-dd-col:last-child { border-right: 0; }
.kab-dd-inner > .kab-dd-card {
  background: var(--e-global-color-kabcardbg);
  border-right: 0;
}

/* Mobile: the panels never show below the tablet breakpoint (belt and
   braces with the JS resize handler — a panel left open on desktop would
   otherwise stay painted over the mobile layout; gotcha #14). */
@media (max-width: 1024px) {
  .kab-dd,
  .kab-dd.kab-dd-open { display: none; }
}

/* Eyebrow — 12px/24px, 500, IBM Plex Mono, #9E9D9D, ls 3.36px, uppercase.
   The 3px accent bar itself comes from kab.css (.kab-dd-eyebrow::before). */
.kab-dd-eyebrow p {
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  line-height: 24px;
  font-weight: 500;
  letter-spacing: 3.36px;
  text-transform: uppercase;
  color: var(--e-global-color-kabnaveyebrow);
}

/* Group title — 16px/24px, 700, Public Sans, #0F1533, 10px lead. */
.kab-dd-title {
  margin-top: 10px;
}
.kab-dd-title p {
  font-family: "Public Sans", sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  color: var(--e-global-color-kabnavink);
}
/* Standalone destination (Material Lifts) takes the blue link ink. */
.kab-dd-standalone p,
.kab-dd-standalone a { color: var(--e-global-color-kabnavlink); }

/* Link rows — 14.5px/24px, 400, Public Sans, #19257D.
   Elementor's icon-list split its 9px space_between into
   padding-block-end 4.5 + margin-block-start 4.5 (gotcha #11), giving a
   29px row. Reproduced exactly so the vertical rhythm is unchanged. */
.kab-dd-links .elementor-icon-list-items {
  list-style: none;
  margin: 0;
  padding: 0;
}
/* ⛔ Do NOT zero the first row's margin-block-start. Elementor's icon-list
   applies the split space_between to EVERY row including the first, so
   zeroing it shortens each list by 4.5px — which accumulates into a
   5px-per-group downward drift and a 9px error by the bottom of the column.
   Match Elementor exactly: every row gets both halves. */
.kab-dd-links .elementor-icon-list-item {
  padding-block-end: 4.5px;
  margin-block-start: 4.5px;
}
.kab-dd-links .elementor-icon-list-item a {
  display: block;
  font-family: "Public Sans", sans-serif;
  font-size: 14.5px;
  line-height: 24px;
  text-decoration: none;
}
.kab-dd-links .elementor-icon-list-text {
  font-family: "Public Sans", sans-serif;
  font-size: 14.5px;
  line-height: 24px;
  font-weight: 400;
  color: var(--e-global-color-kabnavlink);
}
/* The Resources columns use the slightly larger 15px / 11px-gap variant. */
.kab-col-lg .kab-dd-links .elementor-icon-list-text,
.kab-col-lg .kab-dd-links .elementor-icon-list-item a { font-size: 15px; }
.kab-col-lg .kab-dd-links .elementor-icon-list-item {
  padding-block-end: 5.5px;
  margin-block-start: 5.5px;
}

/* -------------------------------------------------------------------
   Header — Resources promo card
   Was three Elementor widgets (heading + text + button); now three
   elements with the same measured type. Card background/border come
   from kab.css (.kab-dd-card).
   ------------------------------------------------------------------- */
.kab-dd-inner > .kab-dd-card {
  padding: 38px 76px 42px 48px;
  gap: 0;
}
.kab-dd-cardtitle {
  font-family: "Saira", sans-serif;
  font-size: 22px;
  line-height: 25px;
  font-weight: 700;
  color: var(--e-global-color-kabnavink);
  margin: 0 0 10px;
}
/* The 20px below the copy is load-bearing: without it the CTA rides 20px
   high in the card. A bare `margin` here loses to Astra's `p { margin-bottom }`
   reset, so the rule is scoped through the card. */
.kab-dd-card > .kab-dd-cardcopy {
  font-family: "Public Sans", sans-serif;
  font-size: 14.5px;
  line-height: 22.5px;
  color: #4B5068;
  margin: 0 0 20px;
}
.kab-dd-cardbtn {
  display: inline-block;
  align-self: flex-start;
  padding: 12px 20px;
  font-family: "Public Sans", sans-serif;
  font-size: 13.5px;
  line-height: 24px;
  font-weight: 700;
  letter-spacing: 0.27px;
  text-decoration: none;
  background: var(--e-global-color-accent);
  color: var(--e-global-color-kabnavink);
}
.kab-dd-cardbtn:hover { background: var(--e-global-color-accent); color: var(--e-global-color-kabnavink); }

/* -------------------------------------------------------------------
   Promo card rendered from the Elementor template (#762)
   -------------------------------------------------------------------
   The card is now team-editable via an Elementor `section` template, so
   its three parts arrive wrapped in Elementor's own widget markup rather
   than as the plain divs the rules above style. The design values are
   IDENTICAL — only the selectors differ. Both paths are kept so the
   hardcoded fallback still renders correctly if the template is missing.

   Elementor's template wrapper must not add a box of its own. */
.kab-dd-card > .elementor,
.kab-dd-card .kab-dd-card-inner {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.kab-dd-card .kab-dd-cardtitle,
.kab-dd-card .kab-dd-cardtitle .elementor-heading-title {
  font-family: "Saira", sans-serif;
  font-size: 22px;
  line-height: 25px;
  font-weight: 700;
  color: var(--e-global-color-kabnavink);
}
.kab-dd-card > .elementor .kab-dd-cardtitle { margin: 0 0 10px; }

.kab-dd-card .kab-dd-cardcopy,
.kab-dd-card .kab-dd-cardcopy p {
  font-family: "Public Sans", sans-serif;
  font-size: 14.5px;
  line-height: 22.5px;
  color: #4B5068;
  margin: 0;
}
.kab-dd-card > .elementor .kab-dd-cardcopy { margin: 0 0 20px; }

/* The button widget wrapper must not stretch; the anchor carries the chrome. */
.kab-dd-card .kab-dd-cardbtn-w { align-self: flex-start; }
.kab-dd-card .kab-dd-cardbtn-w .elementor-button {
  display: inline-block;
  padding: 12px 20px;
  border-radius: 0;
  font-family: "Public Sans", sans-serif;
  font-size: 13.5px;
  line-height: 24px;
  font-weight: 700;
  letter-spacing: 0.27px;
  text-decoration: none;
  background: var(--e-global-color-accent);
  color: var(--e-global-color-kabnavink);
}
.kab-dd-card .kab-dd-cardbtn-w .elementor-button:hover {
  background: var(--e-global-color-accent);
  color: var(--e-global-color-kabnavink);
}

/* -------------------------------------------------------------------
   Mobile overlay
   Accordion toggle 17px/600; group eyebrow 11px ls 2.4; group title
   15px/700 with the 12/10 lead that fix A3 established; links 14.5px
   with Elementor's 12px space_between split 6/6.
   ------------------------------------------------------------------- */
/* Accordion open/closed. kab.css scopes these `.e-con.kab-acc-panel`, which
   no longer matches — so without this the panel defaults to visible and the
   accordion neither collapses on load nor on re-tap. Same class-scoping
   family as the mega panel and the footer grid. */
.kab-acc { border-bottom: 1px solid #171B37; }
.kab-acc-panel { display: none; padding-bottom: 18px; }
.kab-acc-panel.kab-open { display: flex; flex-direction: column; }

.kab-acc-toggle .kab-btn {
  font-family: "Public Sans", sans-serif;
  font-size: 17px;
  line-height: 24px;
  font-weight: 600;
  color: var(--e-global-color-kabnavink);
}
.kab-mm-group { padding-bottom: 14px; }
.kab-mm-group-eyebrow p {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  line-height: 24px;
  font-weight: 500;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--e-global-color-kabnaveyebrow);
  margin: 8px 0 6px;
}
.kab-mm-group-title p {
  font-family: "Public Sans", sans-serif;
  font-size: 15px;
  line-height: 24px;
  font-weight: 700;
  color: var(--e-global-color-kabnavink);
  margin: 12px 0 10px;
}
.kab-mm-standalone p,
.kab-mm-standalone a { color: var(--e-global-color-kabnavlink); }
.kab-mm-links .elementor-icon-list-items {
  list-style: none;
  margin: 0;
  padding: 0;
}
.kab-mm-links .elementor-icon-list-item {
  padding-block-end: 6px;
  margin-block-start: 6px;
}
.kab-mm-links .elementor-icon-list-item a {
  display: block;
  font-family: "Public Sans", sans-serif;
  font-size: 14.5px;
  line-height: 24px;
  text-decoration: none;
}
.kab-mm-links .elementor-icon-list-text {
  font-family: "Public Sans", sans-serif;
  font-size: 14.5px;
  line-height: 24px;
  font-weight: 400;
  color: var(--e-global-color-kabnavlink);
}
.kab-mm-links .elementor-icon-list-item > a:hover .elementor-icon-list-text {
  text-decoration: underline;
}

/* -------------------------------------------------------------------
   Footer columns
   Head 12px/24px 500 IBM Plex Mono #fff ls 2.4 uppercase (the 3px bar is
   kab.css). Links 13px/24px 400 #F4F5F7, rows 31px (Elementor split its
   14px space_between into 7 + 7). "View All" gold row is kab.css's
   .kab-has-viewall rule, which keys on :last-child — preserved because
   the renderer emits the View All item last, exactly as before.
   ------------------------------------------------------------------- */
/* The shortcode widget and Elementor's own .elementor-shortcode wrapper sit
   BETWEEN the footer grid and the columns, so the grid saw 2 children (one
   wrapper + the kept Get in Touch column) and placed all five link columns
   into a single track. display:contents removes both boxes from layout and
   promotes the real columns to grid items, which is what the 6-track
   template expects. Same trick as the mega panels above. */
.kab-footcols > .elementor-widget-shortcode.kab-footcolswrap,
.kab-footcolswrap > .elementor-shortcode { display: contents; }

.kab-foothead p {
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  line-height: 24px;
  font-weight: 500;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--e-global-color-kabinverse);
}
.kab-foothead a { text-decoration: none; }
.kab-footlinks .elementor-icon-list-items {
  list-style: none;
  margin: 0;
  padding: 0;
}
/* kab.css sets `.e-con.kab-footcol { gap: 8px }` and Elementor made the
   column a flex box; a plain div inherits neither, so the head and the link
   list stacked tight and every row drifted ~45-50px. Restate both. */
/* ⛔ NOT `.kab-footcols > .kab-footcol`. `display:contents` promotes the
   columns to GRID ITEMS for layout, but it does NOT change the DOM, so the
   child combinator still fails across the two wrapper elements. Match the
   column on its own class. */
.kab-footcolswrap .kab-footcol {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.kab-footlinks .elementor-icon-list-item {
  padding-block-end: 7px;
  margin-block-start: 7px;
}
/* Pin the anchor's line-height: without it the block anchor's line box adds
   the font strut's descender on top of the inline span and comes out 25px
   against Elementor's 24px, which compounds to +1px per row down the column. */
/* ⛔ The FONT-SIZE must sit on the ANCHOR, not only on the inner span.
   The anchor's line box is sized by ITS OWN font strut: leaving the anchor
   at the inherited 16px while the span is 13px makes a 25px line box in a
   24px line-height, i.e. +1px on every row, compounding down the column. */
.kab-footlinks .elementor-icon-list-item a {
  display: block;
  font-family: "Public Sans", sans-serif;
  font-size: 13px;
  line-height: 24px;
  text-decoration: none;
}
.kab-footlinks .elementor-icon-list-text {
  font-family: "Public Sans", sans-serif;
  font-size: 13px;
  line-height: 24px;
  font-weight: 400;
  color: var(--e-global-color-kabtertiary);
}

/* ---------------------------------------------------------------------------
   C5 (RFL 2026-08-27: "yes, darken") — nav eyebrow / category labels.
   The kit token --e-global-color-kabnaveyebrow is #9E9D9D, which measures
   2.70:1 on the white panel and 2.55:1 on the #F7F8FB card — both well under
   the 4.5:1 WCAG AA minimum for normal text (these are 11-12px, so the
   large-text 3:1 allowance does NOT apply).
   Redefined HERE rather than in the Elementor kit so the kit stays untouched;
   the token is referenced by nothing but these two nav rules (verified: 0
   Elementor elements, 0 other stylesheets).
   #6E6E6E = 5.10:1 on white / 4.80:1 on the card — AA on both, and still a
   quiet neutral grey rather than body-text ink.
   --------------------------------------------------------------------------- */
.kab-dd,
.kab-mm {
  --e-global-color-kabnaveyebrow: #6E6E6E;
}


/* ===========================================================================
   C15 - MOBILE FOOTER ACCORDION  (2026-08-27)
   ===========================================================================
   The five PRIMARY-menu (#14) group headings as collapsible rows, <=767px.

   BREAKPOINT: 767, NOT the nav's 900. The site has two mobile switch points -
   the header nav swaps to the hamburger drawer at 900, the FOOTER condenses at
   767 (`.e-con.kab-footcols{display:none}`). The desktop footer must stay
   exactly as deployed, and between 768 and 900 it still paints its 3-column
   wrapped grid; taking that band would change the desktop footer. 767 fills
   precisely the band where the footer is ALREADY condensed and currently shows
   no links at all.

   Values measured off the Figma C15 states (STATE 1 / 3 / 5) at 2.3147
   crop-px per design-px, not guessed:
     divider          1px  #2C3140  (~rgba(255,255,255,.10) on the footer navy)
     header row pitch 47.5px   (415.2 / 462.7 / 510.2 / 557.7 / 605.3)
     sub-row pitch    38.9px   (462.7 / 501.6 / 540.5 / 579.3 / 618.2 / 657.1)
     header type      ~13px uppercase bold, wide tracking, #fff
     sub type         ~15px sentence case regular, #C9CEDA
     +/- glyph        the yellow accent, right-aligned
   The site token --e-global-color-accent (#F5C518) is used for the glyph
   rather than the comp's raster-sampled #F2C200: every other yellow on this
   build comes from that token, and matching a sampled value would fork it.
   ========================================================================== */

.kab-facc { display: none; }

/* Astra styles bare `button` elements as real buttons (a yellow
   --ast-global-color-0 fill, borders, padding). The accordion toggle is a
   semantic control, not a UI button, so the reset has to be UNCONDITIONAL:
   keeping it inside the 767 block left the element carrying Astra's yellow
   fill at every width above the breakpoint. It is display:none up there so
   nothing painted - but that is one `display` rule away from a very loud bug,
   and it made the computed styles read wrong while debugging. Reset here,
   style below. */
.kab-facc-btn {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-transform: none;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
}
.kab-facc-btn:hover,
.kab-facc-btn:focus,
.kab-facc-btn:active {
  background: none;
  box-shadow: none;
}

@media (max-width: 767px) {
  /* The accordion replaces the hidden column grid in the same slot. */
  .kab-facc { display: block; }

  .kab-facc-item + .kab-facc-item,
  .kab-facc-item:first-child { border-top: 1px solid #2C3140; }
  .kab-facc-item:last-child  { border-bottom: 1px solid #2C3140; }

  /* h3 is a heading only for document structure - it must carry no visual
     weight of its own, or it fights the button's type. */
  .kab-facc-h {
    margin: 0;
    padding: 0;
    font-size: inherit;
    line-height: inherit;
    font-weight: inherit;
  }

  .kab-facc-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    /* 47.5px row = 19px line + 14px/14px. Padding, not height, so a label
       that wraps to two lines grows the row instead of clipping. */
    padding: 14px 0;
    margin: 0;
    border: 0;
    background: none;
    text-align: left;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
  }

  .kab-facc-label {
    font-family: "IBM Plex Mono", monospace;
    font-size: 12px;
    line-height: 19px;
    font-weight: 500;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: var(--e-global-color-kabinverse);
  }

  /* The +/- is DRAWN, not a glyph: a font "+" and "\2212" differ in optical
     weight and vertical centring between the two states, which makes the row
     twitch on toggle. Two bars, one rotated away when open, stay identical. */
  .kab-facc-sign {
    position: relative;
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
  }
  .kab-facc-sign::before,
  .kab-facc-sign::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 14px;
    height: 2px;
    margin-top: -1px;
    background: var(--e-global-color-accent);
  }
  .kab-facc-sign::after {
    transform: rotate(90deg);
    transition: transform 0.2s ease, opacity 0.2s ease;
  }
  /* Open = the vertical bar rotates flat and fades, leaving the minus. */
  .kab-facc-btn[aria-expanded="true"] .kab-facc-sign::after {
    transform: rotate(0deg);
    opacity: 0;
  }

  .kab-facc-btn:hover .kab-facc-label { color: var(--e-global-color-accent); }
  /* Keyboard focus must be visible on a dark ground; the accent ring reads
     against #11142A where the UA's default blue does not. */
  .kab-facc-btn:focus-visible {
    outline: 2px solid var(--e-global-color-accent);
    outline-offset: 2px;
  }

  .kab-facc-panel { padding: 0 0 6px; }
  /* [hidden] is the collapsed state and must survive Astra/Elementor's
     display rules, which otherwise re-show the panel. */
  .kab-facc-panel[hidden] { display: none; }

  .kab-facc-links {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .kab-facc-row {
    margin: 0;
    border-top: 1px solid #2C3140;
  }
  /* 38.9px row = 20px line + 9.5px/9.5px. */
  .kab-facc-row > a,
  .kab-facc-row > span {
    display: block;
    padding: 9px 0;
    font-family: "Public Sans", sans-serif;
    font-size: 15px;
    line-height: 20px;
    font-weight: 400;
    color: #C9CEDA;
    text-decoration: none;
  }
  .kab-facc-row > a:hover {
    color: var(--e-global-color-kabinverse);
    text-decoration: underline;
  }
  .kab-facc-row > a:focus-visible {
    outline: 2px solid var(--e-global-color-accent);
    outline-offset: -2px;
  }

  /* A d2 parent that owns children is a LABEL, not a link (see kab-nav.php -
     linking it would duplicate its first child's URL). Bold + inverse so the
     grouping reads without an indent, which the comp does not use. */
  .kab-facc-row.kab-facc-grouphead > span {
    font-weight: 700;
    color: var(--e-global-color-kabinverse);
  }

  /* An inert placeholder, if one is ever added in Appearance -> Menus. */
  .kab-facc-row > .kab-facc-dead { color: var(--e-global-color-kabmuted); }

  @media (prefers-reduced-motion: reduce) {
    .kab-facc-sign::after { transition: none; }
  }
}


/* ===========================================================================
   C15b - MOBILE GET IN TOUCH  (2026-08-27)
   ===========================================================================
   RFL's C15 mobile comp shows the Get in Touch block ABOVE the accordion.
   Before this, `.kab-footcols` was display:none at <=767 and the Get in Touch
   column lives INSIDE that grid - so mobile visitors got no phone, no email
   and no address in the footer at all.

   ⛔ NO NEW MARKUP. Every element already exists in template #829 (head,
   address, the contact icon-list with `tel:`/`mailto:`, and the CTA button).
   Only the grid was hidden, so this re-shows the grid, hides the five LINK
   columns (the accordion is now their mobile form), and re-flows what is left
   to full width. That also means the phone stays the one the template already
   carries - 864-879-7242 / tel:8648797242 - and cannot drift to the comp's
   wrong 864-432-5466, because no number is authored here.

   Comp measurements (design px at the 375 frame), used for the spacing:
     divider above the block   118.8   (1px #2C3140, full content width)
     GET IN TOUCH eyebrow      138.2
     address                   157.7
     phone row                ~190     email row ~215
     CTA button top            254.9   height 45, FULL WIDTH
     divider below (accordion) 346.9
   ========================================================================== */

@media (max-width: 767px) {
  /* The grid comes back, but as a single full-width column. `!important` is
     not needed: this rule is later in the same file than the one that hid it
     (kab.css sets `.e-con.kab-footcols{display:none}` - matched here at equal
     specificity with `.e-con` so it wins on source order, kab-nav.css being
     enqueued after kab-custom). */
  .e-con.kab-footcols {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    /* The five link columns are hidden below, so the grid's only child is the
       Get in Touch container; keep it flush with the footer's 24px inset. */
    --e-con-grid-template-columns: 1fr;
  }

  /* The five LINK columns are replaced by the accordion on mobile.
     ⛔ Hiding the WRAPPER does not work, and the reason is gotcha #2/#3 of the
     nav rebuild: the shortcode widget carries
       `.kab-footcols > .elementor-widget-shortcode.kab-footcolswrap,
        .kab-footcolswrap > .elementor-shortcode { display: contents }`
     which is specificity 0-3-1 and beats a bare `.kab-footcolswrap` (0-1-0),
     so `display:none` on the wrapper silently lost and all five columns still
     painted (footer 503px -> 2104px on the first attempt). `display:contents`
     also means the columns are LAID OUT as grid items regardless of the
     wrapper's own box. So hide the COLUMNS, matched on their own class -
     never through the child combinator, which does not cross the two
     display:contents wrappers either.
     The Get in Touch column is a sibling Elementor CONTAINER (`.e-con`), not
     part of the shortcode output, so `:not(.e-con)` keeps it visible while
     removing exactly the five shortcode-rendered ones. */
  .kab-footcols .kab-footcol:not(.e-con) { display: none; }

  /* The 1px rule the comp draws between the tagline and the block. */
  .e-con.kab-footcols {
    border-top: 1px solid #2C3140;
    padding-top: 18px;
  }

  /* Full-width, left-aligned stack. */
  .e-con.kab-footcols > .kab-footcol {
    width: 100%;
    max-width: none;
    align-items: stretch;
  }

  /* The address sits closer to the eyebrow than the desktop 17px. */
  .kab-footcols .kab-footcol .kab-footaddr { padding-top: 11px; }

  /* Contact rows: the comp gives them more air than the desktop column, and
     they are the primary mobile action - the icon-list keeps its own row
     spacing (Elementor splits space_between into padding/margin on EVERY row;
     do not zero the first, gotcha #5 of the nav rebuild). */
  .kab-footcols .kab-footcol .kab-footcontact { padding-top: 10px; }

  /* Tap targets: a 13px text link in a 24px line box is under the 44px
     minimum. Pad the ANCHOR (not the li) so the whole row is hittable.
     The comp also puts the glyph INLINE with its text; Elementor renders the
     anchor `display:block` with a full-width icon span, so on both desktop and
     mobile the icon stacks ABOVE the text. That is pre-existing and RFL signed
     off the desktop footer as-is, so the flex fix is scoped to <=767 ONLY -
     making it global would change the desktop footer, which must not move. */
  .kab-footcols .kab-footcontact .elementor-icon-list-item > a {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
  }
  .kab-footcols .kab-footcontact .elementor-icon-list-item > a
    > .elementor-icon-list-icon {
    width: 18px;
    flex: 0 0 18px;
  }

  /* CTA: full width, matching the comp's 45px bar. */
  .kab-footcols .kab-footcol .elementor-widget-button { margin-top: 8px; }
  .kab-footcols .kab-footcol .elementor-widget-button .elementor-button {
    display: flex;
    width: 100%;
    justify-content: center;
  }
}