/* Footer. 5% side margins,
   left elements flush left / right flush right. Red = :active tap
   state only. */

.footer {
  margin-top: 2.5rem; /* 40px */
  /* the token, not a literal 5%: it drops to 3% on desktop, and the
     footer has to sit in the same content column as the header */
  padding-inline: var(--gutter);
  padding-bottom: 1.25rem; /* 20px */
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
}

.footer a {
  color: inherit;
  text-decoration: none;
}

.footer a:active {
  color: var(--accent-red-small); /* tap highlight before navigation; covers the legal strip */
}

.footer__social a:focus-visible,
.footer__legal a:focus-visible {
  text-decoration: underline;
}

@media (hover: hover) {
  .footer__social a:hover,
  .footer__legal a:hover {
    text-decoration: underline;
  }
}

/* ---- JOIN OUR NOTES card: 2px ink border, radius 33 ---- */

.footer__notes {
  width: 20.875rem; /* 334px */
  max-width: 100%;
  margin-inline: auto;
  border: var(--border-thick);
  border-radius: var(--radius-card);
  padding: 1rem 1.25rem 0.8125rem; /* 13px bottom, tuned to the drawn frame */
  text-align: center;
}

.footer__notes-title {
  font-size: var(--text-title); /* 24px */
  font-weight: var(--weight-medium);
  line-height: 0.93;
  color: var(--accent-yellow);
  -webkit-text-stroke: 1px var(--color-ink);
  paint-order: stroke fill;
}

.footer__notes-caption {
  margin-top: 0.375rem;
  font-size: var(--text-caption); /* 13px */
  line-height: 1.2;
}

/* .footer__notes opened as a popup from the marquee's "Subscribe" link
   (js/marquee.js) — the card itself is untouched, same styling as in
   the footer; .newsletter-dialog is just an invisible shell centering
   the close button and the card below it. */
/* [open] scoped: dialog:not([open]){display:none} is a normal-priority
   UA rule, and normal-priority author CSS always beats it regardless of
   specificity — an unscoped display here would force it visible. */
.newsletter-dialog[open] {
  display: flex;
}

.newsletter-dialog {
  position: fixed; /* overrides the UA default, which only centers via inset:0/margin:auto anyway */
  /* top is a static fallback for browsers without the VisualViewport
     API — js/newsletter-dialog.js overrides it inline on viewport
     resize/scroll and on the email field's focus/blur (+30px keyboard
     nudge): plain position:fixed doesn't track the visible area on iOS
     Safari once the keyboard changes the visual viewport. */
  top: 0.375rem;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  width: fit-content;
  max-width: calc(100% - 2 * var(--gutter));
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  background: none;
  border: none;
  padding: 0;
  transition: top 0.2s ease;
}

.newsletter-dialog::backdrop {
  background: rgba(0, 0, 0, 0.4);
}

/* the card has no background of its own normally (the footer's page
   background shows through) — needs one here so it reads against the
   dimmed backdrop */
.newsletter-dialog .footer__notes {
  background: var(--color-paper);
}

/* same 40px/1px-ink-border close control as the menu overlay (menu.css
   .menu__close) — one close-icon language sitewide. Its own element,
   outside/above the card, not inside its border. White background since
   it sits directly over the dimmed backdrop, not the card's own paper
   background. */
.newsletter-dialog__close button {
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  background: var(--color-paper);
  border: 1px solid var(--color-ink);
  border-radius: 0;
  cursor: pointer;
}

.newsletter-dialog__close button:active {
  color: var(--accent-red);
  border-color: var(--accent-red);
}

/* form and result message overlap in the same cell so the taller of the
   two sets the row height — swapping content never shrinks/grows the card */
.footer__newsletter-frame {
  display: grid;
}

.footer__newsletter-frame > * {
  grid-area: 1 / 1;
}

.footer__newsletter--hidden {
  visibility: hidden;
}

.footer__newsletter-result {
  margin-top: 0.5rem;
  font-size: var(--text-caption);
  text-align: left;
}

.footer__newsletter-result[role='alert'] {
  color: #d33; /* same error red as .form__form-error (form.css) */
}

/* Success replaces the form but the frame keeps the form's height —
   centre the message in that space and draw a checkmark beneath it
   (a border-L rotated 45°, same 2px ink stroke as the site's borders).
   Frame-scoped: only the success message renders inside the frame,
   errors sit above it with the form still showing. */
.footer__newsletter-frame .footer__newsletter-result {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.footer__newsletter-frame .footer__newsletter-result::after {
  content: '';
  width: 1.625rem;
  height: 0.875rem;
  margin: 0.875rem auto 0;
  border-left: 2px solid var(--color-ink);
  border-bottom: 2px solid var(--color-ink);
  rotate: -45deg;
}

.footer__newsletter {
  margin-top: 0.5rem;
  text-align: left;
}

.footer__newsletter label {
  display: block;
  font-size: var(--text-caption);
}

.footer__newsletter input {
  display: block;
  width: 100%;
  margin-top: var(--space-1); /* 8px gap from the EMAIL label — shared by the footer form and its newsletter-dialog popup copy */
  height: 1.9375rem; /* 31px */
  background-color: var(--accent-yellow); /* its own fill, not the UA's — base.css clears those */
  border: var(--border-thin);
  border-radius: 0;
  padding-inline: 0.375rem;
  font-size: var(--text-ui); /* 16px — iOS Safari auto-zooms on focus below this */
}

.footer__newsletter button {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0.75rem auto 0;
  min-width: 4.8125rem; /* 77px */
  height: 2.0625rem;    /* 33px */
  padding-inline: 0.75em;
  background: var(--color-paper);
  border: var(--border-thin);
  border-radius: var(--radius-l);
  font-size: var(--text-ui); /* 16px */
  font-weight: var(--weight-semibold);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: inherit;
  cursor: pointer;
}

/* ---- house with logo + contact inside (transparent line art) ---- */

.footer__house {
  position: relative;
  width: 100%;
  margin-top: 2.1875rem; /* 35px */
}

.footer__house-img {
  width: 100%;
  height: auto;
}

/* left/top anchor a 15.3%-wide slot measured off the reference art; the
   drawing sits 20% smaller inside it, the translate re-centres it (the
   trimmed 0.2 × 15.3% split as 12.5% of its own new size per side) */
.footer__logo {
  position: absolute;
  left: 35%;
  top: 21.5%;
  width: 12.24%;
  height: auto;
  translate: 12.5% 12.5%;
}

/* position on the house's right wall measured off the reference art
   (x 625-745, y 125-232 of the house image's 782×288 canvas) */
.footer__runner {
  position: absolute;
  z-index: 1; /* in front of .footer__house-img */
  left: calc(83.8% - 15px);
  top: calc(43.4% - 25px);
  /* fixed size, not % width + height:auto — mobile Safari/WebKit fails
     to advance an animated WebP's frames when sized via a viewport-
     relative % width rather than its native resolution. */
  width: 3.5rem;   /* 56px, ~13.836% at the 405px reference width */
  height: 6.25rem; /* 100px, same aspect ratio as the 168x299 source */
}

/* phones only: 20% smaller and lifted into the right wall's white space
   — the 80px figure just fits the ~83px between the eave and the base
   line at the 405 reference width */
@media (max-width: 45.9375rem) {
  .footer__runner {
    left: calc(83.8% - 9.4px);
    top: calc(43.4% - 29px);
    width: 2.8rem;
    height: 5rem;
  }
}

.footer__contact {
  position: absolute;
  left: 8.8%;
  top: 59.5%; /* sits under the logo */
  width: 65.4%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  font-size: var(--text-small); /* 14px */
  line-height: 1.3;
}

.footer__contact img {
  width: 1rem;
  height: 1rem;
}

.footer__contact a {
  text-decoration: underline;
}

/* ---- follow + social 2×2: left column flush left, right flush right ---- */

.footer__follow {
  margin-top: 0.25rem;
  font-size: var(--text-micro); /* 11px */
  text-align: left;
}

.footer__social {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
  color: var(--accent-red);
  font-size: 1.8rem; /* 32px scaled 0.9 so two-column rows hold within the 5% gutters at 405 */
  line-height: 1.3;
}

.footer__social li {
  width: 50%;
}

.footer__social li:nth-child(odd) {
  text-align: left;
}

.footer__social li:nth-child(even) {
  text-align: right;
}

/* ---- legal strip: center-wrapped, two items on the first line, the
   third centered beneath ---- */

.footer__legal {
  display: grid; /* fixed at every width: left / right / centered below */
  grid-template-columns: 1fr 1fr;
  row-gap: 0.25rem;
  margin-top: 0.75rem;
  margin-bottom: 2.5rem; /* 40px — breathing room below the footer's last text */
  color: var(--accent-mint);
  font-size: var(--text-caption); /* 13px */
  line-height: 1.3;
  -webkit-text-stroke: 0.3px var(--color-ink);
  paint-order: stroke fill;
}

.footer__legal > :nth-child(1) {
  justify-self: start; /* Shipping & Returns */
}

.footer__legal > :nth-child(2) {
  justify-self: end; /* Terms & Conditions */
}

.footer__legal > :nth-child(3) {
  grid-column: 1 / -1;
  justify-self: center; /* Privacy & Cookies */
}

/* non-default languages (server-rendered modifier, footer.php): plain
   stacked list — every title its own centered line. The nth-child
   selector out-specifies the start/end/center rules above, which would
   otherwise still stagger the boxes: justify-self applies to
   block-level boxes too in current browsers, not just grid items. */
.footer__legal--stacked {
  display: block;
  text-align: center;
}

.footer__legal--stacked > :nth-child(-n + 3) {
  display: block;
  justify-self: center;
  padding: 0.125rem 0;
}

/* ============================================================
   Tablet portrait (and the stretched-mobile band generally): the
   mobile footer at double its designed width leaves the house art
   huge but its overlaid contact line tiny, and the 2x2 social /
   stacked legal grids pointlessly cramped. Upper bound: desktop
   takes over at 72rem.
   ============================================================ */
@media (min-width: 46rem) and (max-width: 71.9375rem) {
  /* Notes card and house side by side, like desktop; everything else
     spans below. The half-width house lands back at the art's own
     ~390px design size, so the base overlay geometry (contact line,
     runner) applies unchanged — no stretched-house compensations. */
  .footer {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: center;
    column-gap: var(--space-3);
  }

  /* a hair smaller, so a house of the SAME height still fits beside it —
     zoom scales the whole card as one piece (cart popover precedent) */
  .footer__notes {
    grid-column: 1;
    zoom: 0.85;
  }

  /* sized by HEIGHT to exactly match the card (the stretched row), width
     following the art's ratio; fit-content keeps the overlay geometry
     (% of this box) glued to the drawing */
  .footer__house {
    grid-column: 2;
    margin-top: 0;
    width: fit-content;
  }

  .footer__house-img {
    width: auto;
    height: 100%;
  }

  .footer__follow,
  .footer__social,
  .footer__legal,
  .footer__legal--stacked {
    grid-column: 1 / -1;
  }

  /* air between the card/house row and the social block below it */
  .footer__follow {
    margin-top: var(--space-3);
  }

  /* one spread row instead of the 405-width 2x2 */
  .footer__social {
    flex-wrap: nowrap;
    justify-content: space-between;
  }

  .footer__social li {
    width: auto;
  }

  /* one spread row for the legal titles too (both the EN grid and the
     stacked non-default-language variant), 10% up on the size */
  .footer__legal,
  .footer__legal--stacked {
    display: flex;
    justify-content: space-between;
    font-size: 0.89375rem; /* 14.3px */
  }
}

/* ============================================================
   Desktop. The mobile footer stacks: notes card, house, follow,
   socials, legal. Here: notes left, socials as a full-height
   centered column between, house right — the legal titles as one
   small justified row beneath the lot. Markup unchanged.
   ============================================================ */
@media (min-width: 72rem) {
  .footer {
    padding-bottom: 1.875rem;
    display: grid;
    /* notes and the house size to themselves; the middle flexes and the
       socials column centres inside it */
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "notes social house"
      "legal legal  legal";
    column-gap: var(--space-5);
    align-items: start;
  }

  .footer__notes {
    grid-area: notes;
    margin-inline: 0;
  }

  .footer__follow {
    display: none;
  }

  /* The socials run the row's full height like both neighbours: a
     centered column, links spread from the notes card's top line to its
     bottom. */
  .footer__social {
    grid-area: social;
    align-self: stretch;
    justify-self: center;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    font-size: 2.376rem; /* 38px — sized to carry the row's height */
    text-align: center;
  }

  .footer__social li,
  .footer__social li:nth-child(even) {
    width: auto;
    text-align: center;
  }

  /* Height-driven: stretches to the row, so the drawing runs exactly
     from the notes card's top to its bottom, width following via
     aspect-ratio (the box and the drawing stay one box, which the
     %-positioned overlays rely on). height:0 + min-height:100% keeps the
     figure out of the row-height math — sized normally it would inflate
     the very row it's supposed to fit. */
  .footer__house {
    grid-area: house;
    align-self: stretch;
    justify-self: end; /* right edge on the content column's, same line as the band arrows above */
    height: 0;
    min-height: 100%;
    width: auto;
    aspect-ratio: 391 / 144; /* house.png */
    margin-top: 0;
  }

  .footer__house-img {
    width: 100%;
    height: 100%;
  }

  /* +20% over mobile's 12.24%, still centred in the 15.3% slot (the
     0.305% of leftover slot per side is 2.08% of its own size), nudged 10px down */
  .footer__logo {
    width: 14.69%;
    translate: 2.08% calc(2.08% + 10px);
  }

  .footer__contact {
    top: calc(59.5% + 30px);
    font-size: var(--text-ui); /* one token up from mobile's --text-small */
  }

  .footer__contact img {
    width: 1.2rem; /* +20%, tracking the text bump */
    height: 1.2rem;
  }

  /* +30% over mobile's 3.5x6.25rem, same fixed-size constraint (see base) */
  .footer__runner {
    width: 4.55rem;
    height: 8.125rem;
    top: calc(43.4% - 45px); /* base's -25px, 20px higher */
  }

  /* one small justified row under everything (both the EN grid and the
     stacked non-default-language variant) */
  .footer__legal,
  .footer__legal--stacked {
    grid-area: legal;
    display: flex;
    justify-content: space-between;
    max-width: none;
    margin-top: var(--space-3);
    margin-bottom: 0;
    font-size: 1.116rem; /* 17.9px — Vytas-tuned up from the halved 0.775rem */
    text-align: left;
  }

  .footer__legal--stacked > :nth-child(-n + 3) {
    justify-self: start;
    padding: 0;
  }
}

/* tablet band: 40px below the mobile offset (kept in sync with
   js/newsletter-dialog.js's own baseTop, which overrides this inline
   whenever the VisualViewport API is present) */
@media (min-width: 46rem) and (max-width: 71.9375rem) {
  .newsletter-dialog {
    top: 2.875rem; /* 46px */
  }
}

/* the 0.375rem top above is a mobile concern (keyboard + visual viewport);
   on a desktop window the popup belongs in the middle of the screen */
@media (min-width: 72rem) {
  .newsletter-dialog {
    top: 50%;
    transform: translate(-50%, -50%);
  }
}