/* Footer redesign styles. Enqueued directly (D6) — same bytes on local and prod. */

/* ---------------------------------------------------------------------
 * Desktop grid.
 *
 * `.footer-brand-col` is column 1: a flex column. Its items were, until
 * Round 4, the two `footer-1` widgets welded together as ONE grid item
 * (`.footer-widget.area-1`, logo+tagline+badges all inside the same
 * opaque `block-14`) plus `.footer-brand-extra` (QR / store buttons /
 * socials). Round 4 split the widget content itself (`block-14` now
 * holds only logo+tagline; the 6 certification badges moved to the
 * previously-empty `block-12`, both in the same `footer-1` sidebar) and
 * gives `.footer-widget.area-1` `display: contents` (desktop only —
 * reverted for the single-column mobile stack below), so `#block-14`,
 * `.footer-brand-extra` and `#block-12` become three independently
 * orderable flex items of `.footer-brand-col`: logo → QR+socials →
 * badges, matching the design without any further widget-content split.
 * `.footer-audience`/`.footer-col`s are left on `grid-column: auto` so
 * CSS Grid auto-placement fills whichever of columns 2–5 are actually
 * present — this is what keeps Task 2.8's empty-column reflow working: a
 * missing widget area is simply a missing DOM node, auto-placement
 * closes the gap on its own.
 * ------------------------------------------------------------------- */
.footer-grid {
  display: grid;
  grid-template-columns: minmax(240px, 1.4fr) repeat(4, 1fr);
  gap: 12px 32px;
  align-items: start;
}

.footer-brand-col {
  grid-column: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-widget.area-1 {
  display: contents;
}

#block-14 {
  order: 1;
}

.footer-brand-extra {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  order: 2;
}

#block-12 {
  order: 3;
}

/* The 6 certification-badge images (`block-12`, since Round 4 — see the
 * comment above) have no inline `width`/`height`/`style` on their own
 * `<img>` tags (team-lead rewrote the widget content to drop them), so a
 * plain author-stylesheet rule is enough; no attribute-override note
 * needed anymore. `flex-wrap` lets the row break on its own if the
 * column is too narrow for all 6 — verified in Round 4 to land 5+2 at
 * the current column width, matching the design, without a forced
 * `flex-basis`/`width` split (team-lead's explicit instruction: don't
 * force it if it doesn't fall out naturally). Height history (Round 3,
 * corrected twice against the real artifact): 9px and 20px were
 * illegible; 34px (matched to the 32.5px social icons) still left ACF/
 * Worldchefs blurry; 44px is "just under the social icons" and reads
 * the full badge text. */
.footer-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
}

.footer-badges img {
  width: auto;
  height: 44px;
}

/* QR (desktop) / store buttons (mobile) — both stay in the DOM (D7), CSS
 * toggles visibility per breakpoint so a single WP Rocket page cache entry
 * serves every device. */

/* Round 3 fix #2: bordered pill box, small QR left + two-line label right,
 * replacing the previous large QR + single-line caption underneath. */
.footer-qr {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--bb-content-border-color, #E2DEDD);
  border-radius: 8px;
  padding: 10px 14px;
}

.footer-qr img {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
}

.footer-qr__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.footer-qr__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--bb-headings-color, #3E2B2E);
  line-height: 1.3;
}

.footer-qr__subtitle {
  font-size: 12px;
  font-weight: 400;
  color: var(--bb-body-text-color, #666666);
  opacity: 0.75;
  line-height: 1.3;
}

.footer-stores {
  display: none;
}

/* The `custom_html-5` widget's own title field is the literal string
 * "Mobile" — an internal admin label, never meant to be user-facing, and
 * not part of the design. Hiding the title element leaves the widget's
 * `content` field (where the store anchors and their attribution params
 * live) completely untouched.
 * Specificity note: `.widget h2.widget-title` (general.css) sets
 * `display: inline-block` at (0,2,1) — a plain `.footer-stores
 * .widget-title` (0,2,0) loses to it, so this matches the same `.widget
 * h2.widget-title` pattern with one more qualifying class to win outright. */
.footer-stores .widget h2.widget-title {
  display: none;
}

/* Link columns (footer-2/3/4 + the audience column) are now all `nav_menu`
 * WIDGETS registered in real widget areas (`register_sidebar()` in
 * inc/theme.php), so all 4 headings render as WordPress core's own
 * `<aside class="widget ..."><h2 class="widget-title">`. They already get
 * their orange color, weight and links styling for free from the site-wide
 * `.widget h2.widget-title` rule in general.css and
 * `.bb-footer .widget ul li a` — no per-column replication needed here.
 * (Before the audience column was a widget, this file carried ~40 lines
 * hand-copying those computed values, plus a color override working around
 * `--palette_primary_color_05` resolving to gray instead of the assumed
 * `#FF543E`; both are gone with the conversion, not just the color bug.) */

/* Round 3 fix #4: white rounded pill for the language switcher. The
 * BuddyBoss base rule `div, dl, li { border-radius: 0 }` matches this
 * element directly (confirmed via CDP `getMatchedStylesForNode`) — a
 * 2-class selector already outranks that bare-element one, no `!important`
 * needed. Scoped to `.footer-bottom` so it never touches a language
 * switcher elsewhere on the site.
 *
 * The wrapper's own padding is left alone — `general.css:1794-1806`
 * already reserves 35px on the left (for the absolutely-positioned globe
 * icon) and 30px on the right on the `<select>` itself, so the white
 * background just needs to trace that existing box; adding our own
 * padding on top of it would double the spacing. Only `border`/
 * `background` are stripped so the pill reads as one seamless shape
 * instead of a bordered `<select>` floating inside a white box.
 * `appearance: none` (same stylesheet) already removes the native select
 * arrow and nothing in this theme replaces it with a custom one — added
 * a `::after` chevron using `bb-icons` (already loaded site-wide, same
 * icon font as the globe) in the right-padding space `select` already
 * reserves. */
.footer-bottom .wpml-language-switcher.not-print {
  background: #ffffff;
  border-radius: 999px;
}

.footer-bottom .wpml-language-switcher.not-print select {
  background: transparent;
  border: none;
}

.footer-bottom .wpml-language-switcher.not-print::after {
  /* Chevron drawn in CSS, not an icon glyph. Two reasons, both measured:
   * the document declares SIX @font-face faces named `bb-icons` and only one
   * is loaded, so `font-family: bb-icons` can resolve to an unloaded face and
   * paint tofu — the working social icons survive that by using the full
   * stack `ScoolinaryIcons, bb-icons, …`. And `bb-icon-caret-down` is a solid
   * triangle anyway; the design asks for a thin stroked chevron. Borders give
   * exact control of that stroke via border-width, and rotate cleanly for the
   * mobile accordion's open state. */
  content: '';
  position: absolute;
  right: 14px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid var(--palette_complementary_color_05, #666666);
  border-bottom: 1.5px solid var(--palette_complementary_color_05, #666666);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}

/* Empty-column reflow (Task 2.8): a widget area with zero widgets renders
 * no `.footer-widget` div at all (see the `is_active_sidebar()` guards in
 * footer.php), so the grid already has one fewer item — auto-placement
 * (the default `grid-auto-flow: row`) closes the gap without an explicit
 * rule. This selector guards the case where a widget area is active but
 * renders empty markup (e.g. a nav menu with zero items).
 */
.footer-col:empty {
  display: none;
}

/* ---------------------------------------------------------------------
 * Bottom bar (Task 2.6): copyright + legal links on the left, language
 * switcher right-aligned via `push-right` (existing class, already used
 * for this purpose elsewhere in the theme).
 * ------------------------------------------------------------------- */
.footer-bottom-right.push-right {
  margin-left: auto;
  display: flex;
  align-items: center;
}

/* ---------------------------------------------------------------------
 * Mobile: single-column stack. `order` (not grid-column/row) drives
 * sequence here — with one column, `order` fully determines the visual
 * stack, is robust to any subset of columns being empty, and needs no
 * row-counting arithmetic the way explicit grid placement would.
 *
 * Round 4c order (per team-lead, supersedes Round 4b's "logo+badges as one
 * unit"): logo → 4 accordions (audience, then footer-2/3/4) → store
 * buttons+socials → badges. `.footer-widget.area-1` stays `display:
 * contents` here too now (the desktop-only override this file used to
 * reset it back to `display: block` is gone) so `#block-14` (logo) and
 * `#block-12` (badges) are independently orderable on mobile exactly like
 * on desktop — only the two `order` VALUES differ per breakpoint.
 * ------------------------------------------------------------------- */
@media (max-width: 768px) {
  .footer-grid {
    grid-template-columns: 1fr;
    /* Round 6, #6a, second lever: the base rule's `gap: 12px 32px` (top of
     * this file) is desktop's 5-column row/column gap — `column-gap` is
     * moot on a single-column mobile stack, but `row-gap` is the OTHER
     * half of the collapsed-section pitch (see the `.footer-col.is-
     * collapsed` comment below). This is mobile-only: same selector, later
     * in the cascade, inside this media query — the desktop 12px/32px gap
     * is untouched above 768px. */
    row-gap: 8px;
  }

  /* Round 6, #5: spread the 8 social icons across the full 350px column
   * instead of hugging the left edge (they measured 269px, 81px unused).
   * `space-between` is the "no manual arithmetic" version of team-lead's
   * own (350 − 8×31) / 7 ≈ 14.6px gap calculation — both land in the same
   * place, this one stays correct if the icon count ever changes. Circle
   * size (31px) is untouched — the ask was to use the width, not to grow
   * the icons. `.footer-brand-col` itself is `display: contents` here, so
   * this can't be measured against it (0x0 rect) — measured instead
   * against `.footer-brand-extra`, the real box one level down that
   * actually carries the width.
   * Specificity note, found via CDP `getMatchedStylesForNode` after a first
   * attempt at 3 classes still measured `flex-start`: a `.scoolinary_new
   * .bb-footer .footer-socials { width: 100%; justify-content: flex-start;
   * }` rule (outside this file, 0,3,0) ties this selector's own first
   * attempt at the same specificity and wins on source order. `.bb-footer`
   * is also a class on this exact element's ancestor (`.footer-widget-area
   * bb-footer`, see footer.php), so adding it as a fourth qualifying class
   * reaches (0,4,0) and wins outright — same pattern as every other
   * override in this file, just one class short the first time. */
  /* The `ul.footer-socials` isn't a direct child of `.footer-brand-extra`:
   * footer.php wraps it in its OWN `<div class="footer-bottom-left">` (a
   * second, unrelated element reusing the same class as the copyright
   * bar's — scoping to `.footer-brand-extra` reaches only this one). That
   * div is `display: block`, still shrink-wrapped to 269px by the same
   * `align-items: flex-start` on `.footer-brand-extra`, so the `ul`'s own
   * `width: 100%` below was resolving against a 269px containing block,
   * not the 350px column — found by measuring the wrapper directly after
   * the `ul`'s `width: 100%` alone had no visible effect. */
  .footer-brand-extra .footer-bottom-left {
    width: 100%;
  }

  .bb-footer .footer-grid .footer-brand-col .footer-socials {
    /* `justify-content` only redistributes space INSIDE the flex
     * container's own box — it changes nothing if that box is still
     * shrink-to-fit. `width: 100%` is what actually claims the full
     * column, now that its containing block (above) does too. */
    width: 100%;
    justify-content: space-between;
  }

  /* Unwrap the desktop-only `.footer-brand-col` flex wrapper (Round 3 fix
   * #2) back into independent grid items, so `order` below can place the
   * 4 accordion columns BETWEEN the logo and the store buttons/socials/
   * badges, exactly as before that wrapper existed. */
  .footer-brand-col {
    display: contents;
  }

  .footer-audience {
    order: 2;
  }

  .footer-widget.area-2 {
    order: 3;
  }

  .footer-widget.area-3 {
    order: 4;
  }

  .footer-widget.area-4 {
    order: 5;
  }

  .footer-brand-extra {
    order: 6;
  }

  /* `#block-14` (logo) keeps the base rule's `order: 1` (set above, outside
   * this media query — same value both breakpoints, no override needed).
   * `#block-12` (badges) is `order: 3` on desktop but goes LAST on mobile —
   * this is the one value that actually differs per breakpoint. */
  #block-12 {
    order: 7;
  }

  /* Separator lines (team-lead's diff #3): one under the logo, one after
   * each accordion section — reuses `--bb-content-border-color`, the same
   * variable already proven correct for the QR card's border earlier in
   * this file, rather than guessing a new gray. `#block-14` needs its own
   * rule because `.footer-widget.area-1` is `display: contents` (no box,
   * so no border/padding of its own) — `.footer-col` still generates a
   * real box, so one rule covers all 4 accordion sections. */
  #block-14 {
    border-bottom: 1px solid var(--bb-content-border-color, #E2DEDD);
    padding-bottom: 16px;
  }

  /* Round 6, #4: mobile-only, desktop logo untouched. Measured natural size
   * is 300x54 (5.56:1); 160px wide keeps that same ratio (`height: auto`)
   * rather than picking a height and letting the ratio drift. */
  #block-14 img {
    width: 160px;
    height: auto;
  }

  .footer-col {
    border-bottom: 1px solid var(--bb-content-border-color, #E2DEDD);
    padding-bottom: 12px;
  }

  /* Round 6, #6a: tighter collapsed pitch. Scoped to `.is-collapsed` so the
   * OPEN section keeps the `.footer-col` `padding-bottom: 12px` above —
   * same reasoning as the round-5 fix, now applied to a second property.
   * Heading height (30px) is left alone: shrinking it would change the
   * title's font-size/line-height, which nobody asked for. */
  .footer-col.is-collapsed {
    padding-bottom: 8px;
  }

  .footer-qr {
    display: none;
  }

  /* Round 6: side by side, not stacked. Each store link's HTML actually
   * carries TWO `<a>` tags — a real one wrapping the lazy-loaded `<img>`,
   * and a decoy that only wraps a `<noscript>` (a WP Rocket/lazy-load
   * fallback, invisible on any script-enabled browser: `a:has(noscript)`
   * has zero rendered width, confirmed via `:empty` NOT matching it —
   * `<noscript>` still counts as a child element, it just isn't parsed
   * into further DOM nodes). Left alone, that decoy still becomes a flex
   * ITEM in a row, adding a phantom gap on each side of both real badges.
   * Hiding it removes only the fallback, never the real link — the `href`
   * with its Apple `pt`/`ct`/`mt` attribution params lives on the visible
   * `<a>`, untouched here. Checked the no-JS case directly (raw HTML via
   * `curl`, then Playwright with `javaScriptEnabled: false`): the "real"
   * `<a>`'s `<img>` already ships `src` (not just `data-lazy-src`) plus
   * native `loading="lazy"`, so it paints with zero JavaScript — the
   * `<noscript>` fallback is genuinely redundant here, unconditionally. */
  .footer-stores {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
  }

  .footer-stores a:has(noscript) {
    display: none;
  }

  /* Same lesson as the certification badges above: Apple's file is 120x40
   * (3:1) and Google's is 300x90 (3.33:1) — close but not equal, and each
   * PNG/SVG carries its own internal padding, so matching on WIDTH (the
   * inline `width: 90%` the widget content ships with) makes them paint at
   * different heights and read as uneven. `!important` is required here
   * because it overrides that inline `style=""` attribute, not another
   * stylesheet rule — inline style specificity otherwise beats any class
   * selector regardless of source order. Height first, width follows:
   * 108px (Apple) + 120px (Google) + the 12px gap above = 240px, inside
   * the measured 273px column with room to spare. */
  .footer-stores img {
    width: auto !important;
    height: 48px !important;
    max-width: none !important;
  }

  /* Accordion (Task 3.3 applies/removes `.is-collapsed` and `aria-expanded`
   * via footer.js at this same breakpoint). All 4 columns are now
   * `nav_menu` widgets, so the heading sits at the same depth in every
   * one — `.widget > h2.widget-title` — and one selector covers all of
   * them. (Before the audience column was a widget, its heading rendered
   * as `.footer-col`'s own direct child instead, which needed a second
   * selector plus a `:not(.widget)` exclusion to avoid hiding the widget
   * wrapper, and its heading, along with the collapsed content.) */
  .footer-col.is-collapsed .widget > *:not(.widget-title) {
    display: none;
  }

  /* Round 6: collapsed-section pitch was 85px (measured), target ~53px.
   * Two stacked margins were the cause — both survive on a collapsed column
   * because they belong to the widget/heading box, not to the hidden `ul`:
   * `.widget` carries a 30px `margin-bottom` (BuddyBoss core, applies to
   * every widget) and `.widget-title` its own `margin-bottom: 0.5em`
   * (general.css, ~8px) — normally the gap before a widget's own content,
   * now dangling below a heading with nothing visible under it. `.footer-col`
   * already owns the section-end spacing via its `padding-bottom` (12px)
   * below, so these are pure duplication once collapsed. Scoped to
   * `.is-collapsed` only — the OPEN column (link rhythm, already correct)
   * is untouched, and `.footer-grid .footer-col.is-collapsed …` (4 classes)
   * is needed to outrank the core `.bb-template-v2 .widget .widget-title`
   * rule at the same 0,3,0 specificity (see the link-indentation note below
   * for the same class of fix). Result: 30+8.45px removed, pitch → ~55px. */
  .footer-grid .footer-col.is-collapsed .widget {
    margin-bottom: 0;
  }

  .footer-grid .footer-col.is-collapsed .widget-title {
    margin-bottom: 0;
  }

  /* Team-lead's diffs #1/#2: the heading is a row (title left, chevron
   * right, pushed to the column's own right edge via `justify-content:
   * space-between` — not a symbol glued to the text), and its color is a
   * STATE, not a fixed value: dark while collapsed, orange only while
   * open, keyed off the same `aria-expanded` footer.js already writes —
   * no second class needed. `--bb-headings-color` is reused from the
   * `.footer-qr__title` rule above rather than guessing a new "almost
   * black".
   *
   * ROOT CAUSE of an early false alarm here, for the record: both states
   * measured orange on `/` (EN) but correct on `/es/` at first — not a
   * specificity bug. `link#scoolinary-footer-css`'s `href` on EN pointed
   * at `wp-content/cache/min/1/…/footer.css?ver=1789071371`, WP Rocket's
   * MINIFIED CSS CACHE, frozen from BEFORE this rule existed — the exact
   * "stale minified bundle" class of bug this project has hit before
   * (`wp-content/cache/min`, not `wp-content/cache/wp-rocket`, needs its
   * own purge). `!important` is kept anyway as cheap insurance against
   * that same stale-bundle class recurring mid-measurement — this
   * selector is already the correct, most-specific source of truth for
   * this state, so nothing legitimate needs to out-rank it later. */
  .footer-grid .footer-col .widget-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    color: var(--bb-headings-color, #3E2B2E) !important;
  }

  .footer-grid .footer-col .widget-title[aria-expanded="true"] {
    color: var(--accent_color, #FF543E) !important;
  }

  /* Chevron: the same border-two-sides-rotated-45deg technique as the
   * language switcher's `::after` above, not a font glyph or `+`/`−` text
   * — team-lead's fix #1 explicitly asked to reuse that approach rather
   * than add a new icon asset. `currentColor` ties its color to the
   * state rule above for free (dark closed, orange open). Closed points
   * down (⌄); open adds 180° to point up (⌃) — `transform` animates this
   * for free, which a font glyph swap would not. */
  .footer-grid .footer-col .widget-title::after {
    content: '';
    flex-shrink: 0;
    width: 7px;
    height: 7px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.15s ease, border-color 0.15s ease;
  }

  .footer-grid .footer-col .widget-title[aria-expanded="true"]::after {
    transform: rotate(225deg);
  }

  /* Team-lead's diff #4: links flush with the title (no indent), darker
   * than the desktop `#666666`, more line-height between them. Scoped to
   * `.footer-col` so it never touches the desktop columns. `!important`
   * on `color`/`line-height` kept for the same reason as the heading rule
   * above — see that comment; the stale `cache/min` bundle was the real
   * cause of it looking unnecessary at first, not a specificity loss. */
  .footer-col .menu,
  .footer-col ul {
    margin-left: 0;
    padding-left: 0;
    list-style: none;
  }

  .footer-col .menu a,
  .footer-col ul li a {
    padding-left: 0;
    color: var(--bb-headings-color, #3E2B2E) !important;
    line-height: 2.1 !important;
  }
}


/* --- Brand column rhythm (round 4) ------------------------------------- *
 * Badges: a 5-column grid, so six marks fall 5 + 1 exactly as the artefact
 * shows, instead of wrapping wherever their intrinsic widths happen to run
 * out. Each cell centres its mark so the uneven aspect ratios (ConfianzaOnline
 * is 2x wider than WorldChefs at the same height) still read as a row.        */
.footer-widget.area-1 .footer-badges {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px 10px;
  align-items: center;
  margin-top: 4px;
  max-width: 300px;
}
.footer-widget.area-1 .footer-badges a,
.footer-widget.area-1 .footer-badges > img {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.footer-widget.area-1 figcaption { margin-top: 18px; }

/* Even vertical rhythm between logo, QR, socials and badges. The artefact
 * spaces these four evenly; before this they inherited three different
 * margins from three different sources. */
.footer-brand-col > * + * { margin-top: 22px; }
.footer-brand-extra .footer-qr { margin-bottom: 18px; }

/* --- Brand column: spacing and the QR card (round 4) -------------------- *
 * Measured before writing: logo->QR was 63px, the socials row wrapped to two
 * lines (89px tall) because eight icons at their inherited size need more than
 * the 273px the column gives, and the QR card rendered on a transparent
 * background where the artefact shows a white card. Each rule below answers
 * one of those three numbers.                                               */

/* The figure that wraps the logo carries block-editor margins that the flex
 * gap then adds to. Zero it and let one rule own the rhythm. */
.footer-brand-col #block-14 figure,
.footer-brand-col #block-14 .wp-block-image { margin: 0; }
.footer-brand-col > * + * { margin-top: 0; }
.footer-brand-col { gap: 20px; }

/* White card, as in the artefact. */
.footer-brand-extra .footer-qr {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 0;
  width: fit-content;
}

/* Eight icons across 273px: 8 x 28px plus seven 6px gaps = 266px, so they hold
 * one line with room to spare. The artefact shows seven on a line; we carry an
 * extra network, so the size is derived from the count rather than copied. */
.footer-brand-col .footer-socials {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  margin: 0;
  padding: 0;
}
.footer-brand-col .footer-socials li { margin: 0; }
.footer-brand-col .footer-socials a {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
}

/* The socials row overflowed: the <ul> measured 344px inside a 273px column,
 * because each <li> carries its own 38.5px width from the theme — sizing only
 * the <a> left that untouched. Eight items at 31px with a 3px gap come to
 * 269px, which fits with two pixels to spare. Derived from the count and the
 * column, not copied from the artefact, which shows seven networks where this
 * site now carries eight. */
.footer-brand-col .footer-socials li {
  width: 31px;
  height: 31px;
  flex: 0 0 31px;
}
.footer-brand-col .footer-socials { gap: 3px; }
.footer-brand-col .footer-socials a { width: 31px; height: 31px; font-size: 12px; }
.footer-brand-col .footer-socials i { font-size: 15px; line-height: 1; }

/* --- Brand column, final pass -----------------------------------------
 * Everything below supersedes the incremental rounds above, which had
 * accumulated three competing `.footer-brand-col { gap }` declarations. Keep
 * spacing decisions here so there is one place to change them.
 */

/* Requested: 20px between logo, QR, socials and badges. The logo is a
 * WordPress block widget and ships its own bottom margin, which stacked on
 * top of the flex gap (14 + 30 = the 44px that kept measuring). Zeroing the
 * block margin is what makes the declared gap the actual gap. */
.footer-brand-col { gap: 20px; }
.footer-brand-col > .footer-widget.area-1,
.footer-brand-col > #block-14,
.footer-brand-col #block-14 figure,
.footer-brand-col #block-14 .wp-block-image,
.footer-brand-col .wp-block-image { margin-top: 0; margin-bottom: 0; }
.footer-brand-col > * + * { margin-top: 0; }

/* Requested: no white card behind the QR. The footer ground shows through. */
.footer-brand-extra .footer-qr,
.footer-qr {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  margin-bottom: 0;
}

/* Requested: every badge the same size. Their natural ratios run from 0.61:1
 * (WorldChefs, tall and narrow) to 2.12:1 (the ConfianzaOnline file, which is
 * one image carrying TWO marks side by side), so matching on height alone
 * gave six different widths and read as uneven. A fixed box plus
 * `object-fit: contain` gives every mark an identical footprint and scales
 * each inside it without distortion. 5 boxes + 4 gaps = 270px, which is what
 * fits the 273px column — so the first row takes five and the dual-mark file
 * takes the second. */
.footer-widget.area-1 .footer-badges,
#block-12 .footer-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 10px;
  max-width: none;
  grid-template-columns: none;
}
.footer-widget.area-1 .footer-badges a,
.footer-widget.area-1 .footer-badges > img,
#block-12 .footer-badges a,
#block-12 .footer-badges > img {
  flex: 0 0 46px;
  width: 46px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.footer-widget.area-1 .footer-badges img,
#block-12 .footer-badges img {
  width: 46px;
  height: 44px;
  object-fit: contain;
  object-position: center;
}

/* `#block-14` carries margin-bottom: 30px from the block-widget defaults, and
 * it is NOT a direct child of `.footer-brand-col`: it sits inside
 * `.footer-widget.area-1`, which is `display: contents`. That property
 * flattens the box tree for layout but leaves the DOM tree alone, so the `>`
 * combinator above never matched it and the 30px kept stacking on the 20px
 * gap. Descendant selectors are what reach it. */
.footer-brand-col aside.widget,
.footer-brand-col #block-14,
.footer-brand-col #block-12 { margin-top: 0; margin-bottom: 0; }

/* One badge is not one logo: `confianza-online-138x65-black.png` is a single
 * file carrying TWO marks side by side, at a 2.12:1 ratio against the roughly
 * square singles. Forced into the same 46x44 box as the rest, `contain` scales
 * it to 46x21 and each of its marks reads at half the height of every other
 * mark — identical boxes producing visibly unequal logos. Giving it the width
 * of two cells plus the gap between them (46*2 + 10) lets `contain` bind on
 * height instead, so its inner marks land at the same 44px as the singles.
 * Equal logos, which is the actual goal; the boxes differ because the files do.
 *
 * The selectors below repeat the generic rule's three classes on purpose. The
 * generic `.footer-widget.area-1 .footer-badges img` scores 0,3,1; a plain
 * `[src*=]` override scores 0,2,1 and LOSES no matter how far below it sits,
 * which is why an earlier attempt left this file painting at 22px. Matching the
 * general selector's weight and adding the attribute is what lands it.
 *
 * Drop this whole block to get strictly identical boxes instead. */
.footer-widget.area-1 .footer-badges img[src*="confianza-online"],
#block-12 .footer-badges img[src*="confianza-online"] { width: 102px; height: 44px; }
.footer-widget.area-1 .footer-badges a:has(img[src*="confianza-online"]),
#block-12 .footer-badges a:has(img[src*="confianza-online"]) { flex-basis: 102px; width: 102px; }

/* --- Mobile accordion: link indentation fix (round 5) ------------------
 * Measured via CDP `getMatchedStylesForNode` (same technique as the
 * language-switcher pill above): `.bb-template-v2 .widget.widget_nav_menu
 * ul a` (BuddyBoss core, scores 0,3,2) sets `padding-left: 10px` and
 * outranks this file's own `.footer-col .menu a` (0,2,1) from the mobile
 * media query above, whose `padding-left: 0` never actually won. That 10px
 * survived as a measured ~10px offset between the link text and the header
 * text — links were NOT flush with the header despite the earlier rule.
 * Same fix pattern as the `.footer-stores .widget h2.widget-title` note
 * earlier in this file: copy the winning selector's shape and add
 * `.footer-col` as a qualifying class to win outright rather than tie.
 *
 * A second core rule at the same specificity, `.bb-template-v2
 * .widget.widget_nav_menu ul li` (0,3,2), also sets `margin: 2px -7px` —
 * the negative left margin BuddyBoss uses to compensate its own 10px link
 * padding so the click target grows without shifting the text. Zeroing
 * only the padding above left that -7px unopposed, so the link text moved
 * 7px PAST the header edge instead of landing on it. Same override shape,
 * one level up the tree. */
@media (max-width: 768px) {
  .bb-template-v2 .footer-col .widget.widget_nav_menu ul a {
    padding-left: 0;
  }

  .bb-template-v2 .footer-col .widget.widget_nav_menu ul li {
    margin-left: 0;
  }
}

/* --- ICEX / EU co-financing strip --------------------------------------
 * `#icex-footer` is rendered only on the front page (footer.php) and revealed
 * only for visitors geolocated in Spain (inc/geo.php emits the jQuery .show()
 * when $country === 'ES'), which is why it is easy to miss in review. It had
 * NO stylesheet rule of its own, so `icex.png` — one 917x83 file carrying
 * three marks side by side — painted at its full natural 917px and read as a
 * banner bolted onto the footer rather than part of it.
 *
 * Sizing it by height instead of width is what integrates it. 62px was chosen
 * over the 42px that matched the trust badges exactly: these are institutional
 * marks with fine internal detail (the ministry crest, the small-caps wordmarks)
 * that stop being legible at badge scale. The
 * 11:1 strip is why the width figure looks large — it is three logos, not one.
 */
#icex-footer {
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid var(--bb-content-border-color, rgba(0, 0, 0, 0.08));
}
#icex-footer img {
  height: 62px;
  width: auto;
  max-width: 100%;
  display: block;
}
/* The legal sentence runs the full width of the footer container by request:
 * no measure cap. It still recedes through size and opacity, which is what
 * keeps it from competing with the marks above it. */
#icex-footer p {
  margin: 14px 0 0;
  font-size: 12px;
  line-height: 1.6;
  opacity: 0.72;
}

@media (max-width: 768px) {
  /* Below the breakpoint the strip would shrink its marks past legibility if
   * it kept a fixed height, so let width bind and the height follow. */
  #icex-footer img { height: auto; width: 100%; max-width: 340px; }
  #icex-footer { margin-top: 28px; padding-top: 22px; }
}

/* ---------------------------------------------------------------------
 * Mobile bottom bar (Round 6): CSS-only reorder, no PHP touched. The
 * desktop markup order in footer.php is copyright-wrap (copyright, then
 * the legal `ul`) followed by the language switcher — that order is
 * exactly right for desktop's side-by-side layout and stays untouched
 * there. `.container.flex` inside `.footer-bottom` is ALREADY
 * `display: flex; flex-direction: column` below 768px from BuddyBoss
 * core (confirmed via computed style, not assumed), so its two children
 * — `.footer-bottom-left` and `.footer-bottom-right` — are flex items an
 * `order` can move without restructuring the DOM both breakpoints share.
 * Target stack: language pill → separator → legal links (vertical,
 * left-aligned) → copyright, last.
 * ------------------------------------------------------------------- */
@media (max-width: 768px) {
  /* `.container.flex` (core rule, 0,2,0) is `align-items: center` — inert
   * while `.footer-bottom-left`'s content (the old horizontal, wrapped
   * legal-links row) was wide enough to fill the available width, so the
   * shrink-to-fit centering never showed. The narrow vertical links list
   * below exposes it: both bottom-bar blocks are `display: block`, so
   * they become shrink-wrapped flex ITEMS of this column and land
   * horizontally centered instead of flush left. Confirmed via computed
   * style, not assumed — see the `.footer-copyright-wrap` note below for
   * the matching trap one level down. `flex-start` here (0,3,0) is what
   * actually pins both blocks to the container's left edge. */
  .footer-bottom .container.flex {
    align-items: flex-start;
  }

  /* Language switcher block moves first. */
  .footer-bottom .container.flex > .footer-bottom-right.push-right {
    order: -1;
    margin-left: 0;
    border-bottom: 1px solid var(--bb-content-border-color, #E2DEDD);
    padding-bottom: 16px;
  }

  /* `.footer-copyright-wrap` is itself `display: flex` (row, desktop and
   * mobile alike) wrapping [copyright, legal `ul`] in that DOM order —
   * `column-reverse` flips what's PAINTED first without touching the
   * markup, so the legal links land above the copyright line for free. */
  /* `.footer-copyright-wrap` also carries `align-items: center` (core rule) —
   * inert in ROW mode, where `align-items` only governs the cross axis
   * (vertical centering of the two items sitting side by side). Flipping to
   * `column-reverse` makes that same declaration govern the HORIZONTAL
   * axis instead, centering the copyright line and legal-links block —
   * confirmed via computed style before assuming it. `flex-start` restores
   * the left edge at x:20, flush with every other footer-bottom element. */
  .footer-bottom .footer-copyright-wrap {
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 12px;
  }

  /* Legal links: general.css's `.footer-copyright-wrap .privacy-menu`
   * (0,3,0) lays them out as a wrapped horizontal row with `margin: 0
   * 15px` per link — built for the desktop/current mobile row. One more
   * qualifying class (`.footer-bottom`, same pattern as every other
   * override in this file) reaches (0,4,0) and wins outright for the
   * vertical, left-aligned stack the design calls for; the horizontal
   * `15px` side margins are zeroed so the links land flush with the
   * copyright line and the pill above them, not indented. */
  .footer-bottom .footer-copyright-wrap .privacy-menu {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .footer-bottom .footer-copyright-wrap .privacy-menu a {
    margin: 0;
  }
}

@media (max-width: 768px) {
  /* The language block carried `padding-left: 20px`, which pushed the pill to
   * x=40 while every other item in the footer bottom — the legal links, the
   * copyright — sits at x=20. The container itself already starts at 20, so
   * the padding was a second indent stacked on the first. Removing it lines
   * the pill up with the column it belongs to. Bottom padding stays: it is
   * what separates the pill from the separator rule beneath it. */
  .footer-bottom .container.flex > .footer-bottom-right.push-right {
    padding-left: 0;
  }
}

/* --- Separator visibility ----------------------------------------------
 * The section rules were there all along and measured 1px solid
 * rgb(231,233,236) — but they were invisible, and the numbers said why:
 * that colour is `--bb-content-border-color` (#E7E9EC), a COOL grey meant
 * for BuddyBoss's white surfaces, sitting on this footer's WARM pink
 * rgb(239,232,231). Their luminances are near-identical: contrast 1.01:1.
 * A line is drawn and nothing reads.
 *
 * Deriving the line from the surface instead of borrowing a token from
 * another one fixes it at any background: a translucent black tints
 * whatever it sits on, so it stays correct if the footer colour changes.
 */
.footer-widget-area .footer-grid > .footer-col,
.footer-widget-area .footer-grid #block-14 {
  border-bottom-color: rgba(0, 0, 0, 0.14);
}

@media (max-width: 768px) {
  /* The last accordion's own bottom rule is what separates the group from
   * the store buttons below it, so no extra border is needed there — it was
   * invisible for the same reason, not absent. */
  .footer-widget-area .footer-grid > .footer-col,
  .footer-widget-area .footer-grid #block-14 {
    border-bottom-color: rgba(0, 0, 0, 0.14);
  }
}

@media (max-width: 768px) {
  /* The store buttons sat directly under the last accordion's separator rule,
   * so the line read as belonging to them rather than closing the menu above.
   * The gap gives the rule room to act as a terminator for the accordion
   * group, which is what the artefact shows. */
  .footer-widget-area .footer-grid .footer-stores {
    margin-top: 26px;
  }
}

@media (max-width: 768px) {
  /* Stores, socials and badges were all 12px apart, so the three rows read as
   * one undifferentiated block of marks. They are three different kinds of
   * thing — app links, social accounts, trust seals — and the spacing should
   * say so. Slightly more room below the socials than above them keeps the
   * seals reading as a separate footer-of-the-footer rather than a fourth
   * row of icons. */
  .footer-widget-area .footer-grid .footer-socials { margin-top: 20px; }
  .footer-widget-area .footer-grid .footer-badges { margin-top: 26px; }
}