/* footer.css — the closing contact poster.
 *
 * Reference canvas 1440 x 900, but the footer is full-bleed at every width:
 * FOOTER-DESKTOP.md §1 puts the horizontal structure in PERCENTAGES (4.5% page
 * gutter, 2.2% / 3.2% cell padding) precisely so the columns stay proportional
 * as the footer scales. A 1440px content cap used to live on .ftr__inner and it
 * behaved as an undeclared breakpoint — past 1440 the gutters stopped growing
 * and drifted against type that kept scaling on `cqi`. §2 is explicit that all
 * five bands are full width, and the prototype has no wrapper element at all.
 *
 * No border radius anywhere. Exactly two glows: the live dot and the clock.
 */

.ftr {
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  /* A full viewport, matching Contact and Testimonials. Was a hard 900px, which
     came out at 0.75 of a 1200-tall screen and 1.13 of an 800-tall one. */
  min-height: 100vh;
  display: flex; flex-direction: column;
  /* N3 — INLINE-SIZE, NEVER `size`. Size containment would make the section
     ignore its own content height, and the footer is exactly one of the two
     sections N3 names as overflowing when that is done. `inline-size` plus a
     `vh` term in each clamp gives both-axes behaviour without the risk. */
  container-type: inline-size;
  /* DESIGN-SYSTEM-DELTA, charcoal register: the footer ground is #16161d.
     `--char-lo` (#131316) is the Services stage and the Contact headline box —
     a different value in the same register, so it is not shared here. */
  background: #16161d;
  color: var(--on-dark);
  /* The availability strip is fixed over the viewport bottom and would otherwise
     sit permanently on top of the legal bar — this is the end of the document,
     so there is nothing left to scroll it clear. */
  padding-bottom: var(--banner-h);
}
.ftr a { color: inherit; text-decoration: none; }

.ftr__watermark {
  position: absolute;
  left: 50%; top: 38%;   /* §2 */
  transform: translate(-50%, -50%);
  z-index: 0;
  font-family: var(--display); font-weight: 900;
  font-size: clamp(231px, min(18.89cqi, 30.22vh), 348px); line-height: .78;
  letter-spacing: -.05em;
  color: rgba(244, 242, 237, .05);
  white-space: nowrap;
  pointer-events: none; user-select: none;
}

/* Everything above the watermark. */
.ftr__inner {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex; flex-direction: column;
  width: 100%;
}


/* --- meta bar ------------------------------------------------------------- */

.ftr__meta {
  display: flex; justify-content: space-between; align-items: center;
  padding: clamp(27px, min(2.22cqi, 3.56vh), 41px) 4.5% 0;
  gap: clamp(20px, min(1.67cqi, 2.67vh), 31px);
  font-family: var(--hud); font-weight: 400;
  font-size: clamp(11px, min(0.76cqi, 1.22vh), 14px); letter-spacing: .16em; text-transform: uppercase;
}
.ftr__idx { color: var(--red-dark); }
.ftr__live { display: flex; align-items: center; gap: 14px; color: var(--red-dark); white-space: nowrap; }
.ftr__dot {
  width: 7px; height: 7px; flex: none;
  background: var(--red-dark);
  box-shadow: 0 0 12px 1px var(--red-dark);
}
.ftr__div { width: 1px; height: 13px; flex: none; background: rgba(var(--red-accent-rgb), .5); }
.ftr__clock {
  font-weight: 700;
  font-size: clamp(16px, min(1.28cqi, 2.04vh), 24px); letter-spacing: .1em;
  text-shadow: 0 0 18px rgba(var(--red-accent-rgb), .5);
  /* Tabular figures stop the row twitching as the seconds tick. */
  font-variant-numeric: tabular-nums;
}


/* --- headline block ------------------------------------------------------- */

/* §4 — band 2 is "kicker, H2, paragraph, wide CTA" and the four are centred
   TOGETHER. Our markup has the CTA as a sibling of this block, not a child, so
   `flex: 1` here made this block alone absorb the slack and the CTA dropped to
   the foot of the footer: 161px below the paragraph against the prototype's 40,
   and flush against the plate below it.

   Auto margins reproduce band 2 exactly without a wrapper element. In a flex
   column, `margin-top: auto` here and `margin-bottom: auto` on the CTA split
   the free space evenly above and below the pair — which is what
   `justify-content: center` does inside the prototype's single band. Band 2's
   own bottom padding then moves to `.ftr__rows` as a margin, so it lands below
   the CTA where §4 puts it rather than between the paragraph and the CTA. */
.ftr__hero {
  margin-top: auto;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  padding: clamp(48px, min(3.89cqi, 6.22vh), 72px) 4.5% 0;
}
.ftr__eyebrow {
  font-family: var(--hud); font-weight: 400;
  font-size: clamp(10px, min(0.69cqi, 1.10vh), 13px); letter-spacing: .2em; text-transform: uppercase;
  color: var(--on-dark-3);
  margin-bottom: clamp(22px, min(1.81cqi, 2.89vh), 33px);
}
.ftr__h2 {
  margin: 0;
  font-family: var(--display); font-weight: 900;
  font-size: clamp(60px, min(4.89cqi, 7.82vh), 90px); line-height: .92;
  letter-spacing: -.04em;
  max-width: 24ch;
  text-wrap: balance;
}
.ftr__h2-dim { color: #8e949b; }

/* Wide/narrow variants, the same pair Services and About use — the eyebrow, the
   email action and the back-to-top link each carry two wordings because the
   narrow one drops words rather than re-breaking. Repeated per section rather
   than shared: small-screen overrides belong in the section's own *.small.css,
   so the pair cannot live in one place. */
.narrow-only { display: none; }
.ftr__lede {
  margin: clamp(20px, min(1.67cqi, 2.67vh), 31px) 0 0;
  font-family: var(--body); font-weight: 400;
  font-size: clamp(14px, min(1.17cqi, 1.87vh), 22px); line-height: 1.55;
  color: var(--on-dark-2);
  max-width: 56ch;
}


/* --- capacity banner — the only CTA in the section ------------------------ */

.ftr__banner {
  display: flex; align-items: center; justify-content: space-between;
  /* N3's own value. It was `max-width: 1010px` inside a 56px gutter — 1122px of
     hard minimum, which is what pushed the footer past the viewport between
     roughly 920 and 1200px wide. A cqi cap cannot do that. */
  max-width: min(70cqi, 1180px);
  width: 100%;
  /* §4 says `margin-inline: auto`, and the distinction matters: the `margin: 0
     auto` shorthand that used to be here reset margin-bottom to 0, which
     silently killed the auto margin below. */
  margin-inline: auto;
  box-sizing: border-box;
  margin-top: clamp(34px, min(2.78cqi, 4.44vh), 51px);
  margin-bottom: auto;           /* §4 — see .ftr__hero */
  gap: clamp(27px, min(2.22cqi, 3.56vh), 41px);
  padding: clamp(17px, min(1.39cqi, 2.22vh), 26px) clamp(27px, min(2.22cqi, 3.56vh), 41px);
  background: var(--red);
  color: #fff;
  transition: background 120ms ease;
}
.ftr__banner:hover { background: var(--red-dark); color: #fff; }
/* §4 — "the left cluster takes the remaining width and wraps internally",
   against a right cluster that is flex: none + nowrap. */
.ftr__banner-left {
  display: flex; align-items: center; flex-wrap: wrap;
  flex: 1; min-width: 0;
  gap: clamp(14px, min(1.11cqi, 1.78vh), 20px);
}
.ftr__banner-sq { width: clamp(10px, min(0.63cqi, 1.00vh), 13px); height: clamp(10px, min(0.63cqi, 1.00vh), 13px); background: #fff; flex: none; }
.ftr__banner-line {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(17px, min(1.38cqi, 2.20vh), 25px); line-height: 1.25;
  letter-spacing: -.01em;
}
.ftr__banner-cta {
  flex: none;
  display: flex; align-items: center; gap: 10px;
  white-space: nowrap;
  font-family: var(--hud); font-weight: 700;
  font-size: clamp(11px, min(0.78cqi, 1.24vh), 14px); letter-spacing: .18em; text-transform: uppercase;
}
.ftr__banner-arrow { font-size: clamp(13px, min(1.06cqi, 1.69vh), 19px); }


/* §2 — "Bands 4 and 5 share one darker plate; bands 1-3 sit on the footer
   ground." The prototype wraps the three in a #0e1216 div; our markup has them
   as siblings, so the plate is painted on each. Same result — they stack with
   no gap between them — and no new element in a frozen template. */
.ftr__rows,
.ftr__social,
.ftr__legal { background: var(--banner-black); }


/* --- band 3, the menu strip ----------------------------------------------- */
/* §5. The same list as the floating panel, laid out as one centred run.
   It carries band 2's bottom padding as its own margin-top, because it is what
   now follows the CTA — see the note on .ftr__hero. */

.ftr__nav {
  position: relative; z-index: 1;
  margin-top: clamp(41px, min(3.33cqi, 5.33vh), 61px);   /* §4 — band 2's bottom padding */
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  /* THE ONE VALUE IN THE FOOTER WITH NO `vh` TERM, and §5 says so outright:
     "it is a horizontal rhythm and should follow width alone". Everything else
     here takes both axes. Do not add a height term to make it look consistent
     with its neighbours — the inconsistency is the point. */
  gap: clamp(20px, 3cqi, 48px);
  padding: clamp(15px, min(1.25cqi, 2.00vh), 23px) 4.5%;
  border-top: 1px solid rgba(244, 242, 237, .22);
  border-bottom: 1px solid rgba(244, 242, 237, .10);
  font-family: var(--hud); font-weight: 400;
  font-size: clamp(11px, min(0.76cqi, 1.21vh), 14px); line-height: 1;
  letter-spacing: .16em; text-transform: uppercase;
}
/* Scoped through .ftr__nav for SPECIFICITY, not tidiness: `.ftr a { color:
   inherit }` above is (0,1,1) and a bare `.ftr__navlink` is (0,1,0), so the
   links came out at the footer's #f4f2ed instead of the strip's grey.

   `.is-current` is emitted by the walker, matching the panel's, but is left
   unstyled here for the same reason it is unstyled there — the prototype's strip
   has one resting colour and one hover colour, and no current state. */
.ftr__nav .ftr__navlink {
  color: var(--on-dark-2);
  white-space: nowrap;
  transition: color 120ms ease;
}
.ftr__nav .ftr__navlink:hover { color: var(--red-dark); }


/* --- contact rows --------------------------------------------------------- */

.ftr__rows {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid rgba(244, 242, 237, .10);
}
.ftr__row {
  display: flex; align-items: baseline; gap: clamp(19px, min(1.53cqi, 2.44vh), 28px);
  /* N3: footer link cells are 3.2% / 2.2%, were 40px / 28px. */
  padding: clamp(18px, min(1.46cqi, 2.33vh), 27px) 3.2% clamp(18px, min(1.46cqi, 2.33vh), 27px) 4.5%;
  border-right: 1px solid rgba(244, 242, 237, .10);
  transition: background 120ms ease;
}
.ftr__row--last { padding: clamp(18px, min(1.46cqi, 2.33vh), 27px) 4.5% clamp(18px, min(1.46cqi, 2.33vh), 27px) 3.2%; border-right: none; }
.ftr__row:hover { background: var(--char-hi); }
.ftr__row-idx {
  flex: none;
  font-family: var(--hud); font-weight: 400;
  font-size: clamp(9px, min(0.67cqi, 1.07vh), 12px); letter-spacing: .16em; text-transform: uppercase;
  color: var(--on-dark-3);
}
.ftr__row-val {
  font-family: var(--body); font-weight: 400;
  font-size: clamp(14px, min(1.18cqi, 1.88vh), 22px); line-height: 1.2; letter-spacing: .015em;
  color: var(--on-dark);
  min-width: 0;
  overflow-wrap: anywhere;
}
.ftr__row-val--nowrap { white-space: nowrap; overflow-wrap: normal; }
.ftr__row-act {
  margin-left: auto;
  flex: none;
  font-family: var(--hud); font-weight: 400;
  font-size: clamp(10px, min(0.69cqi, 1.10vh), 13px); letter-spacing: .18em;
  color: var(--red-dark);
}


/* --- social strip --------------------------------------------------------- */

.ftr__social {
  display: flex; align-items: stretch;
  border-top: 1px solid rgba(244, 242, 237, .22);
}
.ftr__follow {
  flex: none;
  display: flex; align-items: center;
  padding: 0 2.2% 0 4.5%;
  font-family: var(--hud); font-weight: 400;
  font-size: clamp(9px, min(0.67cqi, 1.07vh), 12px); letter-spacing: .18em; text-transform: uppercase;
  color: var(--red-dark);
  border-right: 1px solid rgba(244, 242, 237, .10);
}
.ftr__channels { display: flex; flex: 1; min-width: 0; }

/* Each cell takes an equal share and truncates, so the strip survives anywhere
   between one and six channels without reflowing the row. */
.ftr__chan {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; justify-content: center;
  gap: 6px;
  padding: clamp(17px, min(1.39cqi, 2.22vh), 26px) clamp(20px, min(1.67cqi, 2.67vh), 31px);
  border-right: 1px solid rgba(244, 242, 237, .10);
  transition: background 120ms ease;
}
.ftr__chan:hover { background: var(--char-hi); }
.ftr__chan-name {
  font-family: var(--body); font-weight: 500;
  font-size: clamp(12px, min(0.98cqi, 1.56vh), 18px); line-height: 1.2; letter-spacing: .015em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ftr__chan-handle {
  font-family: var(--hud); font-weight: 400;
  font-size: clamp(9px, min(0.61cqi, 0.98vh), 11px); line-height: 1.2; letter-spacing: .1em;
  color: var(--on-dark-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ftr__chanmeta {
  flex: none;
  display: flex; align-items: center;
  /* §7 — mirrors the leading label's 2.2% / 4.5%, in percentages for the same
     reason the gutters are: a px pad drifts against type that scales. */
  padding: 0 4.5% 0 2.2%;
  font-family: var(--hud); font-weight: 400;
  font-size: clamp(9px, min(0.67cqi, 1.07vh), 12px); letter-spacing: .18em; text-transform: uppercase;
  color: var(--on-dark-3);
}


/* --- legal bar ------------------------------------------------------------ */

.ftr__legal {
  display: flex; justify-content: space-between; align-items: baseline;
  flex-wrap: wrap;               /* §7 — three groups; wrap handles a narrow window */
  gap: clamp(27px, min(2.22cqi, 3.56vh), 41px);
  /* The bottom is deliberately deeper than the top, so the page does
     not end flush against the last line. */
  padding: clamp(15px, min(1.25cqi, 2.00vh), 23px) 4.5% clamp(19px, min(1.53cqi, 2.44vh), 28px);
  border-top: 1px solid rgba(244, 242, 237, .10);
  font-family: var(--hud); font-weight: 400;
  font-size: clamp(10px, min(0.69cqi, 1.10vh), 13px); letter-spacing: .14em; text-transform: uppercase;
  color: var(--on-dark-3);
}
.ftr__mark { color: var(--on-dark); font-weight: 800; letter-spacing: .26em; }
.ftr__mark-dot { color: var(--red-dark); }
.ftr__links { display: flex; gap: clamp(22px, min(1.81cqi, 2.89vh), 33px); }
.ftr__links a:hover { color: var(--red-dark); }

/* --- the legal links: PRIVACY ONLY ---------------------------------------
   Zsolt's decision, 2026-08-06: of the three the design ships, only a privacy
   policy will exist — and the live site confirms it, carrying a privacy page
   in each language and no imprint or cookies link at all.

   IMPRINT and COOKIES are HIDDEN rather than deleted, pending Zsolt confirming
   the two anchors can come out of template-parts/section-footer.php. Deleting
   them is the real fix: hidden, they are still in the source for a crawler and
   still real links to the top of the page. Their copy.js strings are
   untouched, so removing this rule brings both back exactly as they were.

   PRIVACY IS NO LONGER STYLED AT ALL HERE. Its href renders from PHP now
   (netface_legal(), in section-footer.php) and the anchor is omitted entirely
   when no URL is set for the language — so there is nothing to hide. The
   `is-live` class this rule used to depend on is gone with the JavaScript that
   added it. */
.ftr__link--imprint,
.ftr__link--cookies { display: none; }

/* PHP omits the privacy anchor when there is no URL, and the other two are
   hidden — so the container can end up an empty box. Below 768px the legal bar
   is a grid and .ftr__links owns a whole row, where an empty box still takes
   its gap slot and opens a hole. */
.ftr__links:not(:has(.ftr__link--privacy)) { display: none; }
.ftr__top {
  color: var(--red-dark);
  cursor: pointer;
  font: inherit;
  letter-spacing: .14em; text-transform: uppercase;
}

.ftr :focus-visible { outline: 2px solid var(--red-dark); outline-offset: 3px; }