/* ==========================================================================
   12-FOOTER.CSS  —  the last piece of the page
   --------------------------------------------------------------------------
   Three parts, separated by hairlines and nothing else: who we are, a
   subscribe box, and a quiet bottom bar.

   Its wording and links come from js/data/site-config.js, and the social
   marks from js/icons.js — the same drawings the menu uses.
   ========================================================================== */

.footer {
  background-color: var(--cream-deep);
  border-top: 1px solid var(--hairline);
  padding-top: var(--space-7);
  padding-bottom: max(var(--space-5), env(safe-area-inset-bottom));
}

.footer__inner {
  max-width: var(--footer-max);
  margin-inline: auto;
}


/* ==========================================================================
   ROW 1 — brand, follow us, contact us
   One column on a phone; three from 768px up (see 99-responsive.css).
   ========================================================================== */
.footer__top {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

/* --- the brand lockup, same as the navbar's --------------------------- */
.footer__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.footer__mark {
  height: var(--mark-h);
  width: auto;
  flex: none;
}

.footer__wordmark {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-brand);
  letter-spacing: 0.01em;
  line-height: 1;
  color: var(--ink);
  white-space: nowrap;
}

.footer__tagline {
  margin-top: var(--space-3);
  font-family: var(--font-eyebrow);
  font-weight: 500;
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--ink-muted);
  line-height: 1.6;
}

.footer__blurb {
  margin-top: var(--space-3);
  font-family: var(--font-body);
  font-size: var(--fs-footer-blurb);
  line-height: var(--lh-body);
  color: var(--ink-soft);
  max-width: var(--measure-blurb);
  text-wrap: pretty;
}

/* --- the two column labels -------------------------------------------- */
/* Not the .eyebrow class. That one comes with orange rules either side and
   belongs to section headings; these are column labels doing a quieter job. */
.footer__label {
  font-family: var(--font-eyebrow);
  font-weight: 500;
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--ink-muted);
  line-height: 1;
}


/* ==========================================================================
   THE SOCIAL TILES
   A circle each, so six different brand colours sit together without any
   one of them shouting.
   ========================================================================== */
.footer__socials {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.social-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;

  width: var(--tile-social);
  height: var(--tile-social);
  border-radius: 50%;
  background-color: var(--surface);
  border: 1px solid var(--hairline);

  transition:
    transform    var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out);
}

.social-tile svg {
  width: var(--glyph-social);
  height: var(--glyph-social);
}

/* Each mark in its own colour. Instagram is missing from this list on
   purpose — it paints itself with a gradient rather than a flat colour. */
.social-tile--facebook  { color: var(--social-facebook); }
.social-tile--youtube   { color: var(--social-youtube); }
.social-tile--pinterest { color: var(--social-pinterest); }
.social-tile--whatsapp  { color: var(--social-whatsapp); }
.social-tile--email     { color: var(--social-email); }

/* On hover the tile lifts and its border takes the platform's colour. The
   mark itself does not move or change — six colours already carry the row,
   and animating the glyphs on top of that turns a tidy set into a fidget
   toy. */
@media (hover: hover) {

  .social-tile:hover {
    transform: translateY(-2px);
  }

  .social-tile--facebook:hover  { border-color: var(--social-facebook); }
  .social-tile--instagram:hover { border-color: var(--ig-2); }
  .social-tile--youtube:hover   { border-color: var(--social-youtube); }
  .social-tile--pinterest:hover { border-color: var(--social-pinterest); }
  .social-tile--whatsapp:hover  { border-color: var(--social-whatsapp); }
  .social-tile--email:hover     { border-color: var(--social-email); }
}


/* ==========================================================================
   THE SUBSCRIBE BOX
   ========================================================================== */
.footer__subscribe {
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid var(--hairline);
  text-align: center;
}

.subscribe__inner {
  max-width: var(--subscribe-max);
  margin-inline: auto;
}

.subscribe__heading {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-subscribe);
  line-height: 1.3;
  color: var(--ink);
}

.subscribe__form {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.subscribe__input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 14px 20px;
  border-radius: var(--radius-pill);
  background-color: var(--surface);
  border: 1px solid var(--hairline-strong);

  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: 1.2;
  color: var(--ink);

  transition: border-color var(--dur-base) var(--ease-out);
}

.subscribe__input::placeholder {
  color: var(--ink-muted);
}

.subscribe__input:focus {
  border-color: var(--orange);
}

.subscribe__input:disabled {
  color: var(--ink-muted);
  cursor: not-allowed;
}

.subscribe__form .btn {
  flex: none;
}

.subscribe__note {
  margin-top: var(--space-3);
  font-family: var(--font-body);
  font-size: var(--fs-footer-small);
  line-height: var(--lh-body);
  color: var(--ink-muted);
}

/* Whatever the form has to say back — an invalid address, a failure, or a
   thank you. Empty and invisible until there is something to say. */
.subscribe__status {
  font-family: var(--font-body);
  font-size: var(--fs-footer-small);
  line-height: var(--lh-body);
}

.subscribe__status:empty {
  display: none;
}

.subscribe__status--error {
  margin-top: var(--space-2);
  color: var(--orange-deep);
}

.subscribe__status--success {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
  font-size: var(--fs-body);
  color: var(--ink);
}

.subscribe__check {
  width: 20px;
  height: 20px;
  flex: none;
  color: var(--orange);
}

/* The spam trap. Off the side of the screen rather than display: none,
   because the automated form-fillers this is meant to catch know to skip
   anything hidden that way. A real visitor never sees it or tabs into it. */
.subscribe__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}


/* ==========================================================================
   THE BOTTOM BAR
   ========================================================================== */
.footer__bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);

  margin-top: var(--space-5);
  padding-top: var(--space-5);
  padding-bottom: var(--space-3);
  border-top: 1px solid var(--hairline);
}

.footer__copyright {
  order: 2;   /* on a phone the copyright reads last */
  font-family: var(--font-body);
  font-size: var(--fs-footer-small);
  color: var(--ink-muted);
}

.footer__links {
  order: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
}

.footer__link {
  font-family: var(--font-body);
  font-size: var(--fs-footer-small);
  color: var(--ink-muted);
  transition: color var(--dur-base) var(--ease-out);
}

@media (hover: hover) {

  .footer__link:hover {
    color: var(--orange-deep);
  }
}


/* ==========================================================================
   REDUCED MOTION
   The whole footer is simply present, and the form still works exactly as
   it does for everyone else.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {

  .js .footer__inner[data-reveal] {
    opacity: 1;
    transform: none;
  }
}