/* ============================================================================
   Joy Group — THE FOOTER. One file, loaded by every page.

   The footer renders on the dc homepage (template markup + its own <style>) and
   on the plain-HTML subpages (markup injected by chrome.js, styled by site.css).
   Keeping the design in both places did not work: an audit on 2026-08-19 found
   13 of 27 footer selectors rendering differently between the two, because every
   phone fix made that day had landed on the homepage only — link padding 11 vs
   8px, nav gap 32 vs 48, copyright centred vs left, socials wrapped vs not,
   newsletter button 44 vs 42.

   So the design lives HERE and nowhere else. The homepage links this file; site.css
   @imports it for the subpages. Do not restate any of these rules in either place —
   that is precisely how they drifted. If a footer rule seems not to apply on the
   homepage, the cause is almost always an inline style on the element, which beats
   any stylesheet: fix it by removing the inline style, not by adding !important here.
   ========================================================================== */

/* ---------- Ground ---------- */
/* The bottom padding carries the home-indicator inset so the ink ground reaches the
   real bottom edge under viewport-fit=cover. --sa-b is 0 on phones without one. */
#footer { background: var(--bg-inverse); color: var(--text-inverse);
  padding: var(--space-5) 0 calc(var(--space-4) + var(--sa-b)); }
#footer .shell { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter-lg); }
#footer a:hover, #footer a:focus-visible { color: var(--crisp-white) !important; }

/* ---------- Top row: wordmark + newsletter ---------- */
.footer-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); padding-bottom: var(--space-3); border-bottom: var(--hairline) solid var(--rule-inverse); }
.footer-top .wordmark { width: 184px; display: block; flex: 0 0 auto; }
.footer-su { margin: 0; font-family: var(--font-ui); font-weight: var(--fw-light); font-size: 24px;
  line-height: 1.15; letter-spacing: 0.02em; text-transform: uppercase; color: var(--crisp-white);
  flex: 0 0 auto; white-space: nowrap; }
.footer-nl { display: flex; align-items: center; gap: var(--space-5); }
.footer-nl-col { position: relative; display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-1); flex: 0 1 auto; min-width: 0; }
/* Out of flow so its reserved height cannot pull the pill off the wordmark's centre. */
.footer-nl-col #dc-nl-status { position: absolute; top: calc(100% + 4px); right: 0; margin: 0; min-height: 1.1em; font-family: var(--font-ui); font-size: var(--text-caption-size); line-height: 1.4; color: var(--text-inverse-secondary); }
/* Size via width/height, NOT flex-basis: the phone block flips this row to a column,
   and a flex-basis would then be read as the pill's HEIGHT. */
.nl-pill { display: flex; align-items: center; gap: var(--space-1); flex: 0 1 auto;
  width: 390px; max-width: 100%; min-width: 260px; height: 54px;
  padding: 0 6px 0 var(--space-3); border-radius: 999px; background: var(--crisp-white);
  transition: box-shadow var(--dur-base) var(--ease-standard); }
.nl-pill.nl-err { box-shadow: inset 0 0 0 2px var(--ink-black); }
.nl-pill:focus-within { box-shadow: inset 0 0 0 2px var(--ink-black) !important; }
.nl-pill input { flex: 1 1 auto; min-width: 0; appearance: none; background: none; border: none;
  align-self: stretch; color: var(--ink-black); font-family: var(--font-ui); font-size: var(--text-body-size); }
.nl-pill input::placeholder { color: var(--graphite); }
.nl-pill button { flex: 0 0 auto; height: 42px; padding: 0 var(--space-3); border-radius: 999px; border: none;
  background: var(--ink-black); color: var(--crisp-white); font-family: var(--font-ui); font-weight: var(--fw-medium);
  font-size: var(--text-btn-size); letter-spacing: var(--text-btn-ls); text-transform: uppercase; cursor: pointer;
  transition: opacity var(--dur-base) var(--ease-standard); }
.nl-pill button:hover { opacity: 0.8; }

/* ---------- Columns ---------- */
.footer-cols { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--grid-gap); padding: var(--space-5) 0; }
.footer-tagline-col { grid-column: 1 / span 4; display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-3); }
/* align-self, or nothing. .footer-tagline-col is a flex column and a flex child
   stretches by default, so the pill ran the full width of the column and stopped
   reading as a button. Everything else it needs is .joy-btn's already. */
.footer-agents { align-self: flex-start; }
.footer-tagline { margin: 0; max-width: 32ch; font-family: var(--font-ui); font-size: var(--text-body-sm-size); line-height: var(--text-body-sm-lh); color: var(--text-inverse-secondary); text-wrap: pretty; }
.footer-nav-col { grid-column: 5 / span 4; display: flex; flex-direction: column; gap: var(--space-4); }
.footer-colhead { margin: 0; font-family: var(--font-ui); font-weight: var(--fw-medium); font-size: var(--text-label-size); letter-spacing: var(--text-label-ls); text-transform: uppercase; color: var(--white-a62); }
/* 9 links: 5 rows over two columns. At 4 they overflowed into a third column. */
.footer-navgrid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(5, auto);
  grid-auto-flow: column; gap: 0 var(--space-6); }
.footer-navgrid a { font-family: var(--font-ui); font-size: var(--text-body-sm-size); color: var(--text-inverse-secondary); text-decoration: none; border: none; padding: 8px 0; }
.footer-contact-col { position: relative; grid-column: 9 / span 4; display: flex; flex-direction: column; gap: var(--space-4); }
.footer-contact { display: flex; flex-direction: column; }
.footer-contact a, .footer-contact span { font-family: var(--font-ui); font-size: var(--text-body-sm-size); color: var(--text-inverse-secondary); text-decoration: none; border: none; padding: 8px 0; }

/* ---------- Language toggle ---------- */
/* .footer-lang positions; .lang-pill is the control. Keeping those separate is what
   lets the homepage and the subpages share one definition. */
.footer-lang { position: absolute; right: 0; bottom: 0; }
.lang-pill { display: flex; align-items: center; gap: var(--space-1); border: var(--hairline) solid var(--rule-inverse); border-radius: 999px; padding: 6px 8px; flex: 0 0 auto; }
.lang-pill button { appearance: none; background: transparent; border: none; border-radius: 999px; cursor: pointer;
  padding: 4px 14px; font-family: var(--font-ui); font-weight: var(--fw-medium);
  font-size: var(--text-label-size); letter-spacing: var(--text-label-ls);
  /* a62, not a40: at 11px the inactive label is interactive text, and white-a40 on ink
     measures 3.78:1 — under the 4.5:1 minimum. a62 is 7.18:1. */
  color: var(--white-a62); }
.lang-pill button[aria-pressed="true"] { background: var(--crisp-white); color: var(--ink-black); }

/* ---------- Bottom utility bar ---------- */
.footer-bottom { border-top: var(--hairline) solid var(--rule-inverse); padding-top: var(--space-3); display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); }
.footer-copy { font-family: var(--font-ui); font-size: var(--text-caption-size); color: var(--white-a62); }
.footer-copy a { color: var(--text-inverse-secondary); text-decoration: none; border: none; }

/* A tablet is a touch device that takes the DESKTOP footer, and there the AL/EN
   buttons are 46x21 and the Privacy Policy link 70x12 — both under the 24px
   minimum, fine for a mouse and awkward for a thumb. The phone block already
   fixes this by growing them, but that comes bundled with the phone's pill
   redesign (square ends, no gap), which has no business on an iPad. So here the
   hit area grows and nothing visual moves: an absolutely-positioned ::after
   costs no layout, exactly the trick .gal-dot uses. Scoped to hover:none so a
   desktop pointer is untouched; the two ::after boxes extend only vertically,
   so AL and EN cannot swallow each other's taps. */
@media (min-width: 769px) and (hover: none) {
  .lang-pill button { position: relative; }
  .lang-pill button::after { content: ""; position: absolute; inset: -12px 0; }
  .footer-copy a { position: relative; display: inline-block; }
  .footer-copy a::after { content: ""; position: absolute; inset: -16px -6px; }
}
.footer-socials { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2); }
.footer-socials a { width: 40px; height: 40px; border-radius: 999px; border: var(--hairline) solid var(--rule-inverse); display: flex; align-items: center; justify-content: center; color: var(--crisp-white); text-decoration: none; transition: background-color var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard); }
.footer-socials a:hover, .footer-socials a:focus-visible { background: var(--crisp-white); color: var(--ink-black) !important; }

/* ---- Where the signup label is dropped, and why ----------------------------
   .footer-top is a row of wordmark | "Stay informed" | pill. The label's left
   edge crosses the wordmark's right through a band of widths: 78px of overlap at
   769, 29px at 820, 15px at 834, clear by 900. The phone block above already
   drops it, for the same reason plus the stacked layout — the signup itself
   stays, and the input's placeholder says what the field is for.

   TABLET PORTRAIT takes it for the overlap. Portrait-gated, because the width
   band alone would also swallow landscape phones and that is a different
   platform decision, not this one.

   A PHONE IN LANDSCAPE takes it because it is still a phone. Keying that off
   width fails: a 430x932 handset is 932 wide once turned, past any sane tablet
   cut-off, so the label reappeared on the same device that hides it in portrait
   — one phone, two different footers. Height is what actually separates a
   handset on its side from a tablet on its side: no tablet is under 700px tall
   in landscape, and no phone is over 500. */
@media (min-width: 769px) and (max-width: 880px) and (orientation: portrait) {
  .footer-su { display: none; }
}
@media (orientation: landscape) and (max-height: 500px) {
  .footer-su { display: none; }
}

/* ============================================================================
   PHONE
   ========================================================================== */
@media (max-width: 768px) {
  /* "Stay informed" goes; the signup itself stays. The label is a 24px uppercase line
     that, stacked above a full-width pill, read as a section heading in a footer with
     no other headings — and the input's placeholder already says what the field is. */
  .footer-su { display: none; }
  /* The wordmark is CENTRED here, deliberately: it caps the footer above a full-width
     signup pill while every block below keeps the left margin. Centring the ROW would
     shrink the pill with it, so only the wordmark is centred. */
  .footer-top { flex-direction: column; align-items: stretch; gap: var(--space-6); }
  .footer-top .wordmark { align-self: center; }
  .footer-nl-col { align-items: flex-start; width: 100%; }
  .footer-nl { flex-direction: column; align-items: flex-start; gap: var(--space-3); width: 100%; }
  .footer-nl-col #dc-nl-status { position: static; }
  .nl-pill { flex: 1 1 auto; width: 100%; }
  .nl-pill button { height: 44px; }

  .footer-cols { grid-template-columns: 1fr; }
  .footer-tagline-col, .footer-nav-col, .footer-contact-col { grid-column: auto; }
  /* THE AGENTS PILL MOVES UNDER THE HAIRLINE, full width, at the user's ask.
     Stacked, it had been sitting 28% of the way down a 1170px footer, wedged
     between the tagline and NAVIGIM — which is the bottom of column one on
     desktop, but in the middle of everything once the columns become one.
     It is a CSS move, not a markup one. The pill exists twice — in chrome.js
     and in the homepage's template — and doing this in the stylesheet keeps the
     two copies in step for free.
     display: contents dissolves .footer-tagline-col so its two children become
     grid items of .footer-cols itself; without that, `order` could only shuffle
     the pill inside its own parent, where it is the second of two. Then order:-1
     puts it first, directly under .footer-top's border-bottom.
     54px, matching .nl-pill exactly: two full-width pills stacked read as a pair
     when they share a height and as a mistake when they miss it by ten. The
     weights still differ where it matters — subscribe is a filled white pill,
     this is an outline — so the hierarchy survives the matching geometry. */
  .footer-tagline-col { display: contents; }
  .footer-agents { order: -1; justify-self: stretch; align-self: start;
    width: 100%; box-sizing: border-box; height: 54px;
    margin: 0 0 var(--space-2); }
  /* A section label and the list under it are ONE block: 32px was the value this footer
     spends BETWEEN blocks, so both labels floated free of their own lists. */
  .footer-nav-col, .footer-contact-col { gap: var(--space-2); }
  .footer-navgrid { gap: 0 var(--space-4); }
  /* 8px padding gives a 39px row — under the 44px touch floor. 11px clears it. */
  .footer-navgrid a, .footer-contact a, .footer-contact span { padding: 11px 0; }

  /* Sized off the social icons, not off the touch minimum. 44px buttons made the pill
     58px tall — 14px taller than the icons below it — and it read as bulky. The ring
     hugs them now, so the control is 44px overall with each half a 42px target: past
     the 24px WCAG 2.5.8 floor, and the same inner height the icons have inside their
     own 1px ring. */
  .lang-pill { padding: 0; gap: 0; overflow: hidden; }
  .lang-pill button { min-height: 42px; padding: 0 14px; border-radius: 0; }
  /* Right edge lines up with the WhatsApp icon, not the page margin — the social row is
     CENTRED, so its last icon stops short of the margin. Derived from the row's own
     geometry, but it depends on the icon COUNT: update the 5 if a social link changes. */
  .footer-lang { right: calc((100% - (5 * 44px + 4 * var(--space-2))) / 2); }

  /* THE OVERFLOW FIX: this bar never wrapped, so the social circles ran off the right
     edge of the screen and the whole page scrolled sideways. */
  .footer-bottom { flex-wrap: wrap; justify-content: center; gap: var(--space-4); }
  .footer-copy { flex: 1 1 100%; text-align: center; }
  .footer-copy a { display: inline-flex; align-items: center; min-height: 44px; }
  .footer-socials { flex: 1 1 100%; flex-wrap: wrap; justify-content: center; }
  .footer-socials a { width: 44px; height: 44px; }
}