/* Footer — mist treatment.
   Spec: docs/superpowers/specs/2026-08-27-footer-mist-design.md

   The ground, and every text colour, live in the Elementor data as Global Kit
   references — not here. This sheet carries only what a control cannot express:
   the grid, the eyebrow type, the social chips and the colophon rule.

   Scope is `.bnly-foot`, the component class, NOT `.elementor-location-footer`.
   That wrapper only exists on the front end: theme-document.php adds
   `elementor-location-<location>` solely when the Locations Manager rendered the
   document, so `get_current_location()` is empty in the editor and the class is
   never emitted. Scoping to it made every rule here invisible while editing —
   the eyebrows lost their type and the icon-box links fell back to the kit's
   `primary` face at 88px, exactly as they do on the front end without this
   sheet. Every other component sheet in this theme scopes on its own class
   (.bnly-cta, .bnly-hub, .rail) for the same reason.

   `.bnly-foot.elementor-section` is compounded so dropping the wrapper costs no
   specificity: two classes, as `.elementor-location-footer .bnly-foot` was.

   Specificity: layout rules are written at (0,0,5,0) or higher. Elementor bakes
   per-element geometry at up to (0,0,4,0) — `.elementor-62 .elementor-element
   .elementor-element-XXX > .elementor-container` — and @media adds nothing. The
   child stylesheet is enqueued after the Elementor post CSS, so a (0,0,4,0)
   match would appear to work on load order alone; that is not relied on. */

.bnly-foot.elementor-section {
  /* #DCE5EC has no Global Kit token. enrol-hub.css declares it the same way. */
  --rule-l: #DCE5EC;
  --foot-gut: clamp(20px, 4vw, 40px);
  padding-block: clamp(56px, 7vw, 88px) 34px;
}

/* ---------------------------------------------------------------- rail --- */
/* 1200, matching every other section on the site. Not the prototype's 1270 —
   porting that number put the CTA copy at x=85 while the rest of the page
   starts at 120. */
/* Only the inner sections take the rail. `fb7bfc5` is layout:full_width and its
   own container must stay edge to edge — scoping the rail to both nested it,
   and the inner one measured 1120 at x=160 instead of 1200 at x=120. */
.bnly-foot.elementor-section .elementor-section > .elementor-container {
  width: min(1200px, 100% - 2 * var(--foot-gut));
  max-width: none;
  margin-inline: auto;
}

/* --------------------------------------------------------------- grid ---- */
.bnly-foot.elementor-section .bnly-foot__grid.elementor-section > .elementor-container {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}

/* The columns are grid items now. `_inline_size` is cleared in the data, but
   `_column_size: 25` still renders the class `elementor-col-25` (width: 25%),
   which a grid item obeys — so the width is reset here rather than in Elementor. */
.bnly-foot.elementor-section .bnly-foot__grid.elementor-section > .elementor-container > .elementor-column {
  width: auto;
  max-width: none;
  flex: initial;
  /* A grid item's automatic minimum is min-content, and .elementor-column is a
     flex container with min-width:auto — so the Contact column refused to go
     below 569px and froze the fr distribution, giving 164/110/109/569 against a
     requested 1.5/1/1/1.1. */
  min-width: 0;
}

.bnly-foot.elementor-section .bnly-foot__grid.elementor-section > .elementor-container > .elementor-column > .elementor-widget-wrap {
  min-width: 0;
}

/* The same automatic-minimum rule applies one level down: .elementor-widget-wrap
   is a wrapping flex row, so each widget in it is a flex item with
   min-width:auto and refuses to go below its own min-content. The Contact
   column's icon-boxes stayed 569px wide inside a 247px track and pushed
   document scrollWidth to 1642 against a 1440 viewport. */
.bnly-foot.elementor-section .elementor-widget-wrap > .elementor-element,
.bnly-foot.elementor-section .elementor-icon-box-wrapper,
.bnly-foot.elementor-section .elementor-icon-box-content,
.bnly-foot.elementor-section .elementor-icon-box-title,
.bnly-foot.elementor-section .elementor-nav-menu,
.bnly-foot.elementor-section .elementor-nav-menu > li {
  min-width: 0;
  max-width: 100%;
}

@media (max-width: 860px) {
  .bnly-foot.elementor-section .bnly-foot__grid.elementor-section > .elementor-container {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 520px) {
  .bnly-foot.elementor-section .bnly-foot__grid.elementor-section > .elementor-container {
    grid-template-columns: 1fr;
  }
}

/* ------------------------------------------------------------ eyebrows --- */
/* Navy, not brand. Spec 4.6 says "brand on light" for eyebrows, but brand on
   mist is 3.18 and these are 11.5px — colour law 3. The colour itself comes
   from the kit (globals/colors?id=secondary) via the widget. */
.bnly-foot.elementor-section .elementor-widget-heading .elementor-heading-title {
  margin: 0 0 20px;
}

/* --------------------------------------------------------------- links --- */
/* 15px deep #4A4A4A — 8.15 on mist. NOT var(--body): that resolves to the kit's
   `text` token #757575 in redesign.css, which measures 4.24 on mist and fails.
   The prototype's --body is a different colour under the same name. */
/* The `> a` is not optional. Elementor's widget default binds the icon-box
   title AND its anchor to the kit's `primary` token:

     .elementor-widget-icon-box .elementor-icon-box-title,
     .elementor-widget-icon-box .elementor-icon-box-title a
       { font-size: var(--e-global-typography-primary-font-size) }

   `primary` is the H1 face — Newsreader 700 at 88px. The widget's baked
   title_typography had been masking it; clearing that under the BUILD RULE
   exposed it, and the phone number rendered at 88px, overflowing its 247px
   track. Clearing a baked value falls back to the kit default, not to nothing. */
.bnly-foot.elementor-section .elementor-nav-menu .elementor-item,
.bnly-foot.elementor-section .elementor-icon-box-title,
.bnly-foot.elementor-section .elementor-icon-box-title > a {
  /* type comes from each widget's own typography control (Rule 1) */
  min-width: 0;
}

.bnly-foot.elementor-section .elementor-nav-menu--layout-vertical .elementor-nav-menu > li:not(:last-child) {
  margin-bottom: 12px;
}

.bnly-foot.elementor-section .elementor-nav-menu .elementor-item,
.bnly-foot.elementor-section .elementor-nav-menu .elementor-item:focus {
  padding: 0;
  transition: color 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.bnly-foot.elementor-section .elementor-nav-menu .elementor-item:hover,
.bnly-foot.elementor-section .elementor-icon-box-wrapper a:hover .elementor-icon-box-title {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* The Contact column's three icon-boxes carry no icon, so the icon slot is
   collapsed and the rows are spaced like the menus beside them. */
.bnly-foot.elementor-section .elementor-widget-icon-box .elementor-icon-box-icon:empty {
  display: none;
}

/* owl/custom.css carries `.elementor-widget:not(:last-child){margin-bottom:0
   !important}` site-wide. No amount of specificity answers !important, so this
   rule carries it too — the only !important here that is not about beating an
   inline style. 12px matches the 34px rhythm the nav columns get from a 22.5px
   line-height plus their own 12px. */
.bnly-foot.elementor-section .bnly-foot__grid .elementor-widget-wrap > .elementor-widget-icon-box:not(:last-child) {
  margin-bottom: 12px !important;
}

.bnly-foot.elementor-section .elementor-icon-box-wrapper {
  text-align: left;
}

/* The icon-box title ships as an inline <span> wrapping an inline <a>. Inside a
   247px content block its line boxes still measured 569/313/306px wide and sat
   86px apart, pushing the page's scrollWidth past the viewport. width and
   max-width do not apply to non-replaced inline boxes, so min-width:0 could not
   fix it. Promoting both to block puts them under normal block constraint — and
   gives the phone and email links a full-width hit area. */
.bnly-foot.elementor-section .elementor-icon-box-title,
.bnly-foot.elementor-section .elementor-icon-box-title > a {
  display: block;
  line-height: 1.5;
}

/* ---------------------------------------------------------------- logo --- */
/* The image carries an inline width/height, which no stylesheet rule can
   outrank without !important — the same trap the hero figure hit. */
.bnly-foot.elementor-section .elementor-widget-theme-site-logo img {
  height: 36px !important;
  width: auto !important;
  max-width: 100% !important;
}

/* -------------------------------------------------------------- social --- */
/* 40px framed chips. Glyph navy, border the hairline; the fill and the hover
   pair (ink field, white glyph) are kit references set on the widget. */
.bnly-foot.elementor-section .elementor-social-icons-wrapper .elementor-social-icon {
  width: 40px;
  height: 40px;
  border: 1px solid var(--rule-l);
  border-radius: 0;
  transition: background-color 0.2s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.bnly-foot.elementor-section .elementor-social-icons-wrapper .elementor-social-icon:hover {
  border-color: var(--e-global-color-ink, #101D2B);
}

/* ----------------------------------------------------------- colophon --- */
/* Elementor's default 10px widget-wrap padding put the colophon at x=145/1140
   inside a 1200 rail — the same 10px-off-rail defect the old centred colophon
   had at x=110. Zeroed so the rule aligns with the columns above it. */
.bnly-foot.elementor-section .bnly-foot__colophon.elementor-section > .elementor-container > .elementor-column > .elementor-widget-wrap {
  padding: 0;
}

.bnly-foot.elementor-section .bnly-foot__colophon .elementor-widget-text-editor .elementor-widget-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 20px;
  margin-top: clamp(46px, 6vw, 72px);
  padding-top: 24px;
  border-top: 1px solid var(--rule-l);
}

.bnly-foot.elementor-section .bnly-foot__colophon a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.bnly-foot.elementor-section .bnly-foot__colophon a:hover {
  color: var(--e-global-color-ink, #101D2B);
  text-decoration: underline;
  text-underline-offset: 3px;
}