/* =========================================================
   Gerbs Footer V3 — FINAL  (Mobile C × Desktop 2)
   One DOM, container-query responsive. BEM .gfoot__*, DS tokens.
   Depends on: gerbs-tokens (colors_and_type.css)
   Desktop ≥900: yellow signup band → blue area: brand | shop | help | company
   Tablet ≤900: band stacks; 3 link cols, brand row below
   Phone ≤600:  band stacks; SHOP as chips, HELP+COMPANY twin cols,
                logo + social row, stacked legal

   [F2] No :root block — gerbs-tokens.css already defines --focus-ring-color
   (blue) site-wide. Redeclaring it here would leak white focus rings across the
   entire site. Instead, hardcode the footer's scope below (see "Focus rings").

   [F3] .gfoot__input uses flex:1 1 0 (not 1 1 auto + width:100%). The width:100%
   caused the Subscribe button to wrap to its own line on desktop (stacked, not
   inline). flex:1 1 0 shares the row with the button; mobile stack is preserved
   via flex-direction:column + align-items:stretch at ≤600px.
   ========================================================= */

.gfoot {
  background: var(--gerbs-blue);
  color: #fff;
  font-family: var(--ff-body);
  width: 100%;
  container-type: inline-size;
}
.gfoot * { box-sizing: border-box; }
.gfoot a { text-decoration: none; }

/* ---- 1. Yellow signup band ---- */
.gfoot__band { background: var(--gerbs-yellow); color: var(--gerbs-ink); }
.gfoot__band-inner {
  max-width: 1200px; margin: 0 auto;
  padding: var(--space-10) var(--space-8);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-12);
}
.gfoot__band-eyebrow {
  font-size: var(--fs-12); font-weight: var(--fw-bold);
  letter-spacing: var(--ls-caps); text-transform: uppercase;
  color: var(--gerbs-blue); margin: 0 0 var(--space-2);
}
.gfoot__signup-label {
  font-family: var(--ff-display); font-size: var(--fs-24); font-weight: var(--fw-bold);
  line-height: var(--lh-snug); color: var(--gerbs-ink);
  margin: 0; max-width: 20ch;
}
.gfoot__band-form { flex: 0 0 480px; }

.gfoot__form { display: flex; flex-wrap: wrap; gap: var(--space-3); }
/* Cloudflare Turnstile (managed/flexible) sits on its own row inside the form */
.gfoot__form .cf-turnstile { flex: 1 1 100%; width: 100%; }
/* [F3] flex:1 1 0 (not 1 1 auto + width:100%) — keeps input+button on ONE
   desktop row. At ≤600px the form is flex-direction:column so the input
   stretches full-width via align-items:stretch — no regression on mobile. */
.gfoot .gfoot__input {
  flex: 1 1 0; min-width: 0;
  font-family: var(--ff-body); font-size: var(--fs-16);
  color: var(--gerbs-ink); background: #fff;
  border: 1.5px solid rgba(30,30,30,0.14); border-radius: var(--radius-sm);
  padding: 14px 16px; min-height: 52px; outline: none;
  transition: box-shadow .15s;
}
.gfoot .gfoot__input::placeholder { color: var(--gerbs-ink-50); }
.gfoot .gfoot__input:focus { box-shadow: 0 0 0 3px rgba(38,114,255,0.3); }
.gfoot__subscribe {
  flex: 0 0 auto; min-height: 52px; padding: 0 var(--space-6);
  border: 0; border-radius: var(--radius-pill);
  background: var(--gerbs-blue); color: #fff;
  font-family: var(--ff-body); font-size: var(--fs-16); font-weight: var(--fw-bold);
  cursor: pointer; transition: background .15s;
}
.gfoot__subscribe:hover { background: var(--gerbs-blue-press); }
.gfoot__subscribe:disabled { opacity: 0.7; cursor: not-allowed; }
.gfoot__consent {
  font-size: var(--fs-12); color: rgba(17,17,17,0.65);
  margin: var(--space-2) 0 0; line-height: var(--lh-normal);
}
.gfoot__consent a { color: var(--gerbs-blue); text-decoration: underline; }
.gfoot__consent a:hover { color: var(--gerbs-blue-press); }

/* success state — swaps in for the form (footer-v2.js contract; .gfoot__card-* aliases keep the existing JS working unchanged) */
.gfoot__band-success, .gfoot__card-success { display: flex; align-items: center; gap: var(--space-3); }
.gfoot__band-success[hidden], .gfoot__card-success[hidden] { display: none; }
.gfoot__band-success svg { width: 32px; height: 32px; fill: var(--gerbs-blue); flex: 0 0 auto; }
.gfoot__success-head { font-weight: var(--fw-bold); font-size: var(--fs-16); color: var(--gerbs-ink); margin: 0; }
.gfoot__success-sub { font-size: var(--fs-14); color: rgba(17,17,17,0.65); margin: 0; }
.gfoot__band-error, .gfoot__card-error {
  margin-top: var(--space-2); font-size: var(--fs-14);
  font-weight: var(--fw-semibold); color: var(--gerbs-ink); /* never red on yellow — contrast */
}
.gfoot__band-error[hidden], .gfoot__card-error[hidden] { display: none; }
.gfoot__hp { position: absolute; left: -9999px; opacity: 0; pointer-events: none; }

/* ---- 2. Blue link area ---- */
.gfoot__inner {
  max-width: 1200px; margin: 0 auto;
  padding: var(--space-16) var(--space-8) 0;
}
.gfoot__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  grid-template-areas: "brand shop help company";
  gap: var(--space-10);
  align-items: start;
}
.gfoot__brand { grid-area: brand; }
.gfoot__col--shop { grid-area: shop; }
.gfoot__col--help { grid-area: help; }
.gfoot__col--company { grid-area: company; }

.gfoot__brand-logo { width: 112px; height: auto; display: block; margin-bottom: var(--space-5); }
.gfoot__tag {
  font-family: var(--ff-display); font-weight: var(--fw-bold);
  font-size: var(--fs-20); line-height: var(--lh-snug);
  color: #fff; margin: 0 0 var(--space-6); max-width: 14ch;
}

.gfoot__col h5 {
  font-family: var(--ff-body); font-size: var(--fs-12); font-weight: var(--fw-bold);
  letter-spacing: var(--ls-caps); text-transform: uppercase;
  color: var(--gerbs-yellow); margin: 0 0 var(--space-5);
}
.gfoot__col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.gfoot__col a {
  color: rgba(255,255,255,0.82); font-size: var(--fs-14); font-weight: 400;
  transition: color .15s;
}
.gfoot__col a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* ---- Social ---- */
.gfoot__social { display: flex; gap: var(--space-3); }
.gfoot__social a {
  width: 40px; height: 40px; display: grid; place-items: center;
  border-radius: var(--radius-pill); background: rgba(255,255,255,0.12);
  transition: background .15s, transform .15s;
}
.gfoot__social a:hover { background: var(--gerbs-yellow); transform: translateY(-2px); }
.gfoot__social svg { width: 18px; height: 18px; fill: #fff; transition: fill .15s; }
.gfoot__social a:hover svg { fill: var(--gerbs-ink); }

/* ---- 3. Legal bar ---- */
.gfoot__legal {
  max-width: 1200px; margin: var(--space-12) auto 0;
  padding: var(--space-5) var(--space-8) var(--space-6);
  border-top: 1px solid rgba(255,255,255,0.18);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4); flex-wrap: wrap;
}
.gfoot__legal-copy { font-size: var(--fs-12); color: rgba(255,255,255,0.7); }
.gfoot__legal-right { display: flex; align-items: center; gap: var(--space-6); flex-wrap: wrap; }
.gfoot__legal-links { display: flex; gap: var(--space-5); }
.gfoot__legal-links a { font-size: var(--fs-12); color: rgba(255,255,255,0.7); white-space: nowrap; }
.gfoot__legal-links a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.gfoot__feedback {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  font-family: var(--ff-body); font-size: var(--fs-12); font-weight: var(--fw-semibold);
  color: #fff; background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.28); border-radius: var(--radius-pill);
  padding: 8px 16px; min-height: 34px;
  cursor: pointer; transition: background .15s, border-color .15s;
}
.gfoot__feedback:hover { background: rgba(255,255,255,0.2); border-color: rgba(255,255,255,0.5); }
.gfoot__feedback svg { width: 14px; height: 14px; fill: #fff; flex-shrink: 0; }

/* =========================================================
   Tablet ≤900: band stacks, 3 link cols, brand row below
   ========================================================= */
@container (max-width: 900px) {
  .gfoot__band-inner {
    flex-direction: column; align-items: flex-start;
    gap: var(--space-5); padding: var(--space-8) var(--space-6);
  }
  .gfoot__band-form { flex: 0 0 auto; width: 100%; max-width: 520px; }

  .gfoot__inner { padding: var(--space-12) var(--space-6) 0; }
  .gfoot__grid {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas:
      "shop help company"
      "brand brand brand";
    gap: var(--space-8) var(--space-6);
  }
  .gfoot__brand {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--space-5); border-top: 1px solid rgba(255,255,255,0.18);
    padding-top: var(--space-6);
  }
  .gfoot__brand-logo { width: 92px; margin: 0; }
  .gfoot__tag { font-size: var(--fs-16); margin: 0; flex: 1 1 auto; }
}

/* =========================================================
   Phone ≤600: SHOP chips, HELP+COMPANY twin cols, logo+social row
   ========================================================= */
@container (max-width: 600px) {
  .gfoot__band-inner { padding: var(--space-8) var(--space-5); }
  .gfoot__signup-label { font-size: var(--fs-20); max-width: 22ch; }
  .gfoot__form { flex-direction: column; }
  .gfoot__subscribe { width: 100%; }

  .gfoot__inner { padding: var(--space-8) var(--space-5) 0; }
  .gfoot__grid {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "shop shop"
      "help company"
      "brand brand";
    gap: var(--space-8) var(--space-6);
  }

  /* Shop column becomes wrapped chips */
  .gfoot__col--shop ul { flex-direction: row; flex-wrap: wrap; gap: var(--space-2); }
  .gfoot__col--shop a {
    display: inline-flex; align-items: center;
    min-height: 44px; padding: 0 var(--space-5);
    border: 1px solid rgba(255,255,255,0.35); border-radius: var(--radius-pill);
    color: #fff; font-weight: var(--fw-medium);
    transition: background .15s, border-color .15s;
  }
  .gfoot__col--shop a:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.6); text-decoration: none; }

  /* 44px touch targets on plain link lists */
  .gfoot__col--help a, .gfoot__col--company a {
    display: flex; align-items: center; min-height: 40px;
  }
  .gfoot__col--help ul, .gfoot__col--company ul { gap: 0; }

  /* Brand: logo left, social right, no tagline */
  .gfoot__brand { padding-top: var(--space-2); border-top: 0; }
  .gfoot__tag { display: none; }
  .gfoot__brand-logo { width: 80px; }
  .gfoot__social { gap: var(--space-2); }
  .gfoot__social a { width: 44px; height: 44px; }

  .gfoot__legal {
    flex-direction: column; align-items: flex-start; gap: var(--space-4);
    margin-top: var(--space-8); padding: var(--space-5) var(--space-5) var(--space-8);
  }
  .gfoot__legal-right { width: 100%; flex-direction: column-reverse; align-items: flex-start; gap: var(--space-4); }
  .gfoot__legal-links { flex-wrap: wrap; }
  .gfoot__feedback { min-height: 44px; }
}

/* ---- Focus rings ----
   [F2] No :root override — gerbs-tokens.css defines --focus-ring-color:#3C70F6
   (blue) globally. Hardcode the footer's own scope instead so the global token
   is never touched:
   - .gfoot  (blue area): white ring (2px solid #fff)
   - .gfoot__band (yellow area): override to blue via var(--gerbs-blue)
   Result: white ring on blue links/buttons/inputs; blue ring on the yellow band.
   The :root token stays #3C70F6 — no global leak. */
.gfoot a:focus-visible,
.gfoot button:focus-visible,
.gfoot input:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
.gfoot__band a:focus-visible,
.gfoot__band button:focus-visible,
.gfoot__band input:focus-visible {
  outline-color: var(--gerbs-blue);
}