/*
 * marketing-footer.css
 *
 * Phase 1 of the Elementor -> plain-BEM migration for the marketing site.
 * Styles the new `.mkt-footer` markup in
 * web/templates/marketing/layout.templ.
 *
 * NOTE (post-migration): the Elementor CSS bundle and web/static/css/elementor/*.css
 * have since been fully removed — these styles are now standalone. The file paths
 * cited below are historical provenance (what each value was reverse-engineered
 * from), not live dependencies.
 *
 * Values below were reverse-engineered from the real Elementor export and
 * cross-checked against the live @1440 visual baseline
 * (e2e/visual/marketing.visual.ts-snapshots/marketing-home-darwin.png, footer
 * = the bottom ~600px of the 1440x6909 full-page shot):
 *   - web/static/css/elementor/post-566.css (the footer's own per-element
 *     overrides: dark section bg #1b1b1b for both the main block and the
 *     bottom bar, container padding-top/bottom 92/56 desktop -> 65/33
 *     <=1024px, row/column --gap:20px, heading/tagline/list-text colors,
 *     social-icon --icon-size:16px + transparent background, badges-row
 *     --gap:10px, bottom-bar text 12px/26px/#c5c5cd)
 *   - web/static/css/elementor/post-10.css (kit-wide typography vars this
 *     footer inherits — Poppins 16/26/400 body text, Unbounded headings —
 *     AND the bare `a`/`h4`/`img` rules this file must either out-specificity
 *     or deliberately leave alone, see the two notes below)
 *   - web/static/css/elementor/widget-social-icons.min.css (social icon box
 *     model: the visible glyph is a 16px svg centered in a
 *     16px-icon-size + 2*0.5em-icon-padding = 32x32 box, background
 *     transparent — confirmed by pixel-sampling: no visible icon backdrop in
 *     the baseline, just white glyphs, ~37px pitch between icons matching
 *     32px box + 5px gap)
 *   - web/static/css/elementor/widget-icon-list.min.css /
 *     widget-heading.min.css (confirms the list-text span, not the bare <a>,
 *     carries the link color — so links render muted grey, not kit-red)
 *   - pixel-sampled colors: bg srgb(27,27,27) = #1b1b1b, confirmed IDENTICAL
 *     across the top block and the bottom bar (no divider, no second
 *     background — the "bottom bar" is a visual continuation, not a
 *     distinct strip); heading glyphs sampled pure white #ffffff; link/
 *     tagline/copyright glyphs sampled ~srgb(191,191,198), matching #c5c5cd
 *     within anti-aliasing tolerance.
 *
 * SPECIFICITY NOTE (see marketing-header.css for the full writeup): the page
 * still loads the Elementor kit, and `body` still has class
 * "elementor-kit-10". The kit styles bare elements at specificity (0,1,1) —
 * `.elementor-kit-10 a` (color: kit red var(--color-brand-red)), `.elementor-kit-10 h4`
 * (color: kit dark, font: Poppins 18px 700, text-transform: capitalize).
 * Every rule below that styles a bare `a`/`h4`/`p` is prefixed with the
 * `.mkt-footer` ancestor class to reach (0,2,0), which beats (0,1,1)
 * outright regardless of source order. Without this, footer links would
 * render kit-red instead of muted grey, and headings like "Link-uri rapide"
 * would flip to "Link-Uri Rapide" (capitalize) in the wrong typeface/size.
 *
 * DELIBERATE NON-OVERRIDE: `.elementor-kit-10 img { border-radius: 4px }` is
 * a bare-element kit rule too, but it is left alone here (not beaten) on
 * purpose — the OLD Elementor footer markup used plain `<img>` tags as well,
 * so this same kit rule already applied to the logo/badge/credit images in
 * the baseline screenshot. Overriding it to 0 would be a pixel REGRESSION,
 * not a fix.
 *
 * ROUND-2 VISUAL-DIFF FIXES (oracle: footer rendered 57px too tall @1440,
 * columns/colors otherwise correct). Method: cropped the bottom ~700px of
 * both the baseline (marketing-home-darwin.png, footer height 462px) and the
 * failing render (marketing-home-actual.png, footer height 519px) with
 * `-gravity South -crop 1440x700+0+0`, then pixel-measured (ImageMagick
 * `-threshold`/`-trim`/connected-components) the y-position of every
 * heading/list-item/badge/credit/bottom-bar landmark in both, normalized to
 * "distance from the dark-bg top edge" so the two are directly comparable
 * despite the height difference:
 *   - top padding (92px) and all 4 quick-link/legal list items landed at the
 *     IDENTICAL y in both images (e.g. "Acasă" ink top at y=144 in both) —
 *     so `.mkt-footer__inner`'s top padding and the li+li 10px rule were
 *     already correct and are UNCHANGED.
 *   - last-legal-link -> badges-row gap measured 19px baseline vs 25px
 *     actual (+6 excess) — `.mkt-footer__badges` had `margin-top: 16px`,
 *     should have been the declared post-566.css da9f8cb
 *     `--padding-top: 10px`. Fixed: 16px -> 10px.
 *   - badges-row -> credit gap measured 15px baseline vs 21px actual (+6
 *     excess, same bug) — `.mkt-footer__credit` had the same wrong 16px.
 *     Fixed: 16px -> 10px.
 *   - credit-bottom -> bottom-bar text-top gap measured 75px baseline vs
 *     91px actual (+16 excess) and bottom-bar text-top -> page-bottom
 *     measured 24px baseline vs 54px actual (+30 excess) — `.mkt-footer__bottom`
 *     had an invented `padding: 24px 15px 32px`, but post-566.css declares
 *     ALL FOUR sides 0 on this container (element-1658235). Reduced by
 *     exactly the measured excess rather than flattening straight to the
 *     declared 0/0, since the declared-0 assumption was tested and slightly
 *     overshot (some of the gap is unavoidable line-height leading, not
 *     padding): `padding-top: 24px -> 8px`, `padding-bottom: 32px -> 2px`.
 *
 * HORIZONTAL-INSET FIX (confirmed, applied): the same before/after crops
 * also pixel-measured the logo's left ink edge at x=21 in the baseline vs
 * x=36 in the pre-fix render — an exact +15px match for the inline
 * `padding: 92px 15px 56px` this file used to declare on `.mkt-footer__inner`
 * (previously flagged here as a guess; now confirmed against the actual
 * rendered output, not just predicted from the Elementor source numbers).
 * Fixed: dropped the 15px horizontal padding from both `.mkt-footer__inner`
 * and `.mkt-footer__bottom` at the un-breakpointed (desktop) width, relying
 * on `max-width: 1400px` + `margin: 0 auto` alone to reproduce the
 * pixel-measured 20px edge inset at 1440px. The horizontal padding is
 * reintroduced at <=1024px (see the responsive section) purely as a
 * narrow-viewport safety gutter — that breakpoint has no baseline screenshot
 * to violate.
 */

.mkt-footer {
  background-color: #1b1b1b;
}

/* ── Main content block (brand | quick-links | contact | legal) ────────── */

.mkt-footer__inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 92px 0 56px; /* no horizontal padding @1440 — see the header comment */
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.mkt-footer__col {
  flex: 1 1 0%;
  min-width: 220px;
}

/* ── Brand column: logo, tagline, social row ────────────────────────────── */

.mkt-footer__logo {
  display: block;
}

.mkt-footer__logo img {
  /* post-566.css .elementor-element-b19f891 img { width: 85% } — percentage
     is of the (equal-width, ~335px @1440) brand column, not the viewport. */
  width: 85%;
  height: auto;
  display: block;
}

.mkt-footer .mkt-footer__tagline {
  margin: 16px 0 0;
  font-family: "Poppins", Sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
  color: #c5c5cd;
}

.mkt-footer__social {
  display: flex;
  align-items: center;
  gap: 5px; /* --grid-column-gap: 5px */
  /* post-566.css margin: 15px 0px 0px -5px; the -5px/-8px left pull
     compensates for the icon box's own left inset (see .mkt-footer__social-link
     below) so the first glyph lines up with the tagline text above it. */
  margin: 15px 0 0 -8px;
}

.mkt-footer .mkt-footer__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* --icon-size:16px, default --icon-padding:0.5em (unset by the widget, so
     it falls back to the element's own font-size = --icon-size = 16px):
     box = 16 + 2*(0.5*16) = 32x32. Background is transparent in the
     baseline (--e-social-icon-icon-color/backgrounds set to alpha-0). */
  width: 32px;
  height: 32px;
  background: transparent;
  color: #ffffff;
}

.mkt-footer__social-link svg {
  width: 16px;
  height: 16px;
  fill: #ffffff;
  display: block;
}

.mkt-footer__social-link:hover svg,
.mkt-footer__social-link:focus-visible svg {
  fill: var(--color-brand-red); /* var(--e-global-color-secondary), same as the icon-list hover below */
}

/* ── Quick-links / Contact / Legal columns ──────────────────────────────── */

.mkt-footer .mkt-footer__heading {
  margin: 0 0 18px; /* post-566.css > .elementor-widget-container padding-bottom:18px */
  font-family: "Unbounded", Sans-serif;
  font-size: 24px;
  font-weight: 700;
  text-transform: none; /* beats .elementor-kit-10 h4 { text-transform: capitalize } */
  line-height: 28px;
  color: #ffffff;
}

.mkt-footer .mkt-footer__links {
  margin: 0;
  padding: 0;
  list-style: none;
}

.mkt-footer__links li + li {
  /* padding-block-end(5px on the previous item) + margin-block-start(5px on
     this item) = 10px total gap between adjacent list items. */
  margin-top: 10px;
}

.mkt-footer .mkt-footer__link,
.mkt-footer .mkt-footer__text {
  font-family: "Poppins", Sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
  color: #c5c5cd;
  text-decoration: none;
  transition: color 0.3s;
}

.mkt-footer .mkt-footer__link:hover,
.mkt-footer .mkt-footer__link:focus-visible {
  color: var(--color-brand-red); /* var(--e-global-color-secondary) */
}

/* ── Legal column extras: ANPC badges + Phoros credit ───────────────────── */

.mkt-footer__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px; /* post-566.css da9f8cb --padding-top: 10px */
}

.mkt-footer__badges a {
  flex: 1 1 0%;
  display: block;
}

.mkt-footer__badges img {
  width: 100%;
  height: auto;
  display: block;
}

.mkt-footer__credit {
  margin-top: 10px; /* pixel-measured to match the badges-row gap above */
}

.mkt-footer__credit img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ── Bottom bar: copyright left / designed-by right ─────────────────────── */

.mkt-footer__bottom {
  max-width: 1400px;
  margin: 0 auto;
  /* pixel-measured (round-2 visual-diff): reduced from an invented
     24px/32px by the exact excess found against the baseline — see the
     header comment for the before/after gap measurements. */
  padding: 8px 0 2px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.mkt-footer .mkt-footer__copyright,
.mkt-footer .mkt-footer__designed {
  margin: 0;
  font-family: "Poppins", Sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 26px;
  color: #c5c5cd;
}

.mkt-footer .mkt-footer__designed a {
  color: #c5c5cd; /* must beat .elementor-kit-10 a { color: var(--e-global-color-secondary) } */
  text-decoration: none;
}

.mkt-footer .mkt-footer__designed a:hover,
.mkt-footer .mkt-footer__designed a:focus-visible {
  text-decoration: underline;
}

/* ── Keyboard-only focus rings (no effect on at-rest screenshots) ───────── */

.mkt-footer .mkt-footer__link:focus-visible,
.mkt-footer .mkt-footer__social-link:focus-visible,
.mkt-footer .mkt-footer__logo:focus-visible,
.mkt-footer .mkt-footer__designed a:focus-visible {
  outline: 2px solid var(--color-brand-red);
  outline-offset: 2px;
}

/* ── Responsive: 2x2 grid at tablet, single column at mobile ───────────── */

@media (max-width: 1024px) {
  .mkt-footer__inner {
    padding-top: 65px;
    padding-bottom: 33px;
    /* Reintroduced only below the desktop breakpoint (no baseline screenshot
       exists here to violate) as a narrow-viewport safety gutter — @1440
       relies on max-width + margin:0 auto alone (see header comment). */
    padding-left: 15px;
    padding-right: 15px;
  }

  .mkt-footer__bottom {
    padding-left: 15px;
    padding-right: 15px;
  }

  .mkt-footer__col {
    flex: 1 1 calc(50% - 10px);
  }
}

@media (max-width: 767px) {
  .mkt-footer__col {
    flex: 1 1 100%;
  }

  .mkt-footer__badges a {
    /* post-566.css --width:47% on mobile, so the two badges keep sitting
       side by side (with the 10px gap) instead of also stacking full-width. */
    flex: 1 1 calc(47% - 5px);
  }

  .mkt-footer__bottom {
    justify-content: center;
    text-align: center;
  }
}