/* =============================================================================
 *  assets/css/footer.css — THE FOOTER. One file, one look, every page.
 *
 *  ── WHY THIS FILE EXISTS ───────────────────────────────────────────────────
 *  This site has three kinds of page and, until this file, three footers:
 *
 *    · the hand-written pages (apparel, jewellery, privacy, 404) shipped
 *      <footer class="ftr"> and took their styling from site.css;
 *    · the home page is a React export whose footer is a Tailwind <div> row —
 *      a different height, a different link set, and /aac without its trailing
 *      slash — patched at runtime by spa.js to look approximately similar;
 *    · /aac/ had NO footer at all. The theme control mounted into the little
 *      "Back to aloftaura.international" line instead, which is why that page
 *      ended in one grey sentence while every other page ended in the house
 *      signature.
 *
 *  Three footers cannot be kept identical by intention. So the MARKUP now comes
 *  from one place (assets/js/footer.js) and the LOOK comes from here, and both
 *  are loaded by all three kinds of page.
 *
 *  ── IT IS SELF-CONTAINED ON PURPOSE ────────────────────────────────────────
 *  site.css defines the house tokens; spa.css and aac.css define their own, and
 *  /aac/ does not load site.css at all. So every custom property used here is
 *  written with a FALLBACK — `var(--faint, rgba(245,243,238,.42))` — which
 *  means this file draws the same footer on a page that has the tokens and on a
 *  page that has none. Nothing here may depend on a stylesheet it is not
 *  guaranteed to be loaded beside.
 *
 *  ── AND IT IS LOADED LAST ──────────────────────────────────────────────────
 *  site.css still carries the older .ftr rules. They are now inert: this file is
 *  linked after it on every page, and states the same values at the end of the
 *  cascade. THE FOOTER'S APPEARANCE IS DECIDED HERE — edit this file, not that
 *  section, or the two will disagree and which one wins will depend on the page.
 * ========================================================================== */

/*  THE FOOTER THE HOME PAGE'S BUNDLE RENDERS, stood down.
 *
 *  footer.js keeps the node — React owns it and expects to find it — empties
 *  nothing and simply hides it. `hidden` alone is not enough: the bundle sets a
 *  `display` on that element through a Tailwind class, and a class beats the
 *  browser's own `[hidden] { display: none }` rule. This is the one place in
 *  the file that needs !important, and this is why. */
footer[data-aa-oldfoot] { display: none !important; }

/* ---------------------------------------------------------------------------
 *  The band.
 *
 *  40/34 rather than an even 64: the tallest thing in this row is a 19px
 *  wordmark, and at that size letter-spacing does the work padding was doing.
 * ------------------------------------------------------------------------ */
.ftr {
  border-top: 1px solid var(--line-soft, rgba(245, 243, 238, .07));
  padding: 40px 0 34px;
  background: transparent;
  /*  ITS OWN TYPOGRAPHIC BASE, not the page's.
   *
   *  Everything in this footer is sized absolutely, but the CONTACT FORM's
   *  fields inherit line-height, and the three pages inherit three different
   *  ones — the React export's Tailwind base, site.css's, and /aac/'s. Same
   *  markup, same rules, three heights: 307 / 290 / 302px at one viewport.
   *  Stating the base here is what makes the footer the same object rather than
   *  the same recipe cooked in three kitchens. */
  font-size: 10.5px;
  line-height: 1.6;
}

/* column-gap only. The contact band is a full-width flex item, so a ROW gap
   here would stack on top of the margin the band already carries beneath
   itself and push this footer taller than it looks. */
.ftr .wrap {
  width: min(1400px, 100%);
  margin-inline: auto;
  padding-inline: var(--gut, clamp(20px, 5vw, 64px));
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  column-gap: clamp(20px, 3vw, 40px);
  row-gap: 14px;
}

/* ---- the signature -------------------------------------------------------- */
.ftr__mark { display: inline-flex; }
.ftr__mark img {
  width: 132px; height: auto;
  opacity: .82;
  transition: opacity .4s var(--ease, cubic-bezier(.22, 1, .36, 1));
}
.ftr__mark:hover img { opacity: 1; }

/*  FASHION · LIFESTYLE · JEWELLERY.
 *
 *  Part of the lockup, not copy: it stays in English and in the Latin face in
 *  all 46 languages. It is marked data-no-i18n in the markup so the language
 *  layer leaves the words alone; `:root` is carried on the selector only to
 *  out-specify site.css's script-aware `:root:not([lang="en"]) *` stand-down,
 *  which would otherwise drop the casing on a non-Latin page. */
:root .ftr__mid,
.ftr .ftr__mid {
  margin: 0;
  font-family: var(--brand-latin, var(--brand, inherit));
  text-transform: uppercase !important;
  font-size: 10.5px; letter-spacing: .3em;
  color: var(--faint, rgba(245, 243, 238, .42));
}

/* ---- the link row --------------------------------------------------------- */
.ftr__links {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: clamp(12px, 1.6vw, 22px);
  /*  A ROW OF WORDS IS AS TALL AS ONE LINE OF THEM.
   *  Left to inherit, the row came out 20px on the hand-written pages and 35px
   *  on the home page — the React export's Tailwind base line-height applied to
   *  the theme control's <button>, which has no line-height of its own. Stating
   *  it here is what makes three pages agree. */
  line-height: 1.9;
}
.ftr__links > *,
.ftr__links button { line-height: inherit; }
.ftr__links a,
.ftr__links span {
  font-size: 10.5px; letter-spacing: .18em;
  color: var(--faint, rgba(245, 243, 238, .42));
  text-decoration: none;
  transition: color .35s var(--ease, cubic-bezier(.22, 1, .36, 1));
}
.ftr__links a { position: relative; padding-bottom: 3px; }
.ftr__links a:hover { color: var(--gold-lt, #f4e3a1); }
/* A hairline that grows under a link on hover rather than the colour change
   alone — the same gesture the sign-in card makes. */
.ftr__links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--gold-lt, #f4e3a1);
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .3s var(--ease, cubic-bezier(.22, 1, .36, 1));
}
.ftr__links a:hover::after { transform: scaleX(1); }
/* The copyright is the quietest thing in the row and should look it. */
.ftr__links span[data-no-i18n] { opacity: .72; }

/*  The language button and the theme control are two more WORDS in this row,
 *  not two widgets dropped into it. src/i18n.js and assets/js/theme.js both
 *  inject their own styles at runtime, so these selectors are one step more
 *  specific than theirs and win without !important. */
.ftr__links .i18n-wrap { display: inline-flex; }
.ftr__links .i18n-btn {
  padding: 0; border: 0; border-radius: 0; background: none;
  font-size: 10.5px; line-height: inherit; letter-spacing: .18em;
  color: var(--faint, rgba(245, 243, 238, .42));
  transition: color .35s var(--ease, cubic-bezier(.22, 1, .36, 1));
}
.ftr__links .i18n-btn:hover { border-color: transparent; color: var(--gold-lt, #f4e3a1); }
/* The globe is the one piece of decoration the row does not have. */
.ftr__links .i18n-btn .i18n-globe { display: none; }
.ftr__links .i18n-btn .i18n-code { font-weight: 400; letter-spacing: .18em; }
.ftr__links .theme-pick__t { font-size: 10.5px; letter-spacing: .18em; }

/* ---------------------------------------------------------------------------
 *  THE THEME CONTROL — Obsidian · Bright · Device.
 *
 *  assets/js/theme.js builds it and mounts it into this row, beside AAC SIGNIN.
 *  It is styled HERE because the footer is the only place it appears, and
 *  because it was previously described in two stylesheets that disagreed: the
 *  home page carried a leftover set of rules from the three-pill design this
 *  control used to be, with `:root[data-theme]` on every selector — higher
 *  specificity than the rules meant to replace them, so the home page silently
 *  kept the old design and its 18px top margin knocked the whole footer row out
 *  of line.
 *
 *  One line of text that opens to three choices. No borders anywhere: the live
 *  choice is marked by colour and a bullet, the way the rest of this row
 *  distinguishes things.
 * ------------------------------------------------------------------------ */
.theme-pick { position: relative; display: inline-flex; align-items: center; line-height: inherit; }
.theme-pick__t {
  font-family: var(--brand-latin, var(--brand, inherit));
  font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--faint, rgba(245, 243, 238, .45));
  background: none; border: 0; padding: 0; margin: 0;
  line-height: inherit; vertical-align: baseline;
  cursor: pointer;
  transition: color .35s var(--ease, cubic-bezier(.22, 1, .36, 1));
}
.theme-pick__t:hover,
.theme-pick.is-open .theme-pick__t { color: var(--gold-lt, #f4e3a1); }
.theme-pick__t::after { content: "\2009\25BE"; font-size: .8em; opacity: .7; }   /* thin space + caret */
.theme-pick.is-open .theme-pick__t::after { content: "\2009\25B4"; }

/*  The menu lifts UPWARD: this control lives in a footer, and a panel opening
 *  downward would be off the bottom of the document. */
.theme-pick__m {
  position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%);
  z-index: 60; display: flex; flex-direction: column; gap: 2px;
  padding: 8px 6px; min-width: 132px;
  background: var(--panel, #101017);
  border: 1px solid color-mix(in srgb, var(--gold, #d9b45a) 26%, transparent);
  box-shadow: var(--shadow-pop, 0 18px 44px -20px rgba(0, 0, 0, .8));
}
.theme-pick__m[hidden] { display: none; }
.theme-pick__b {
  position: relative;
  font-family: var(--brand-latin, var(--brand, inherit));
  font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; text-align: left;
  color: var(--muted, rgba(245, 243, 238, .62));
  background: none; border: 0;                       /* no outline, ever */
  padding: 7px 12px 7px 20px; white-space: nowrap; cursor: pointer;
  transition: color .2s var(--ease, cubic-bezier(.22, 1, .36, 1)),
              background .2s var(--ease, cubic-bezier(.22, 1, .36, 1));
}
.theme-pick__b:hover {
  color: var(--cream, #f5f3ee);
  background: color-mix(in srgb, var(--cream, #f5f3ee) 6%, transparent);
}
/* The live choice: gold, with a bullet in the gutter the padding reserves. */
.theme-pick__b.on { color: var(--gold-lt, #f4e3a1); }
.theme-pick__b.on::before { content: "\2022"; position: absolute; left: 8px; color: var(--gold, #d9b45a); }
.theme-pick__b:focus-visible { outline: 1px solid var(--gold, #d9b45a); outline-offset: -2px; }

/*  BRIGHT IS NO LONGER SPELLED OUT HERE.
 *
 *  This block stated the control's daylight ink as literals — rgba(27,27,33,.55)
 *  for the trigger, .66 for the choices, `--gold-deep` for the live one. Each
 *  was a second answer to a question the tokens already answer, and each was
 *  slightly wrong: .55 is 3.8:1 on cream, under the floor, and `--gold-deep` in
 *  daylight is the PALE gold — the live choice was the least readable line in
 *  the menu.
 *
 *  The rules above already ask for --faint, --muted, --gold-lt and --panel, and
 *  those flip on their own. Deleting this block is what makes them do it. */

/*  A page with no footer at all still gets the control — theme.js builds it a
 *  bare band. Nothing on this site should reach that path now that the footer
 *  is on every page, but a page added later might, and a floating control over
 *  the content is worse than a quiet rule under it. */
.theme-only-foot {
  display: flex; justify-content: center;
  padding: 8px var(--gut, clamp(20px, 5vw, 64px)) 28px;
  border-top: 1px solid var(--line-soft, rgba(245, 243, 238, .07));
}
@media (prefers-reduced-motion: reduce) {
  .theme-pick__t, .theme-pick__b { transition: none; }
}

/* ---------------------------------------------------------------------------
 *  The contact band — full width, above the signature line.
 *
 *  A row of its own rather than a fourth item in the flex row: the row is one
 *  line of three small things, and a form dropped in beside them crushes all
 *  three.
 * ------------------------------------------------------------------------ */
.ftr__contact {
  flex: 1 0 100%;
  display: flex; justify-content: center;
  padding-bottom: clamp(26px, 4vh, 44px);
  margin-bottom: clamp(22px, 3vh, 36px);
  border-bottom: 1px solid var(--line-soft, rgba(245, 243, 238, .07));
}
/* Nothing has been planted in it yet (contact.js runs deferred) — an empty
   bordered band would flash on first paint and then fill. */
.ftr__contact:empty { display: none; margin: 0; padding: 0; border: 0; }

/*  THE FORM, INSIDE THE FOOTER.
 *
 *  Scoped to `.ftr` so this governs the form wherever the footer is, including
 *  on /aac/, which loads neither site.css nor spa.css and would otherwise show
 *  an unstyled form. On the two pages that DO carry their own copy these are
 *  one step more specific, so there is one answer rather than two. */
.ftr .aa-contact {
  display: grid;
  gap: 14px;
  width: 100%; max-width: 860px;
  grid-template-columns: minmax(190px, 1fr) minmax(240px, 1.7fr) auto;
  align-items: end;
  font-family: inherit;
}
.ftr .aa-contact__title {
  grid-column: 1 / -1; text-align: center;
  margin: 0 0 2px;
  font-size: 9.5px; letter-spacing: .3em; text-transform: uppercase;
  color: var(--gold, #d9b45a);
}
.ftr .aa-contact__field { display: grid; gap: 6px; }
.ftr .aa-contact__field > span {
  font-size: 9px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--faint, rgba(245, 243, 238, .38));
}
/*  line-height is stated, not inherited: at 13px an inherited 1.6 makes the
 *  field 45px on the pages that have one and 40px on the page whose stylesheet
 *  resets inputs to `normal`. Same markup, same rules, two heights. */
.ftr .aa-contact input[type="email"],
.ftr .aa-contact textarea {
  width: 100%; padding: 11px 13px; line-height: 1.25;
  border: 1px solid var(--line, rgba(245, 243, 238, .16)); border-radius: 0;
  background: var(--field-wash, rgba(255, 255, 255, .03));
  color: var(--cream, #f5f3ee);
  font-family: inherit; font-size: 13px; letter-spacing: .02em; text-transform: none;
  transition: border-color .3s var(--ease, cubic-bezier(.22, 1, .36, 1)),
              background-color .3s var(--ease, cubic-bezier(.22, 1, .36, 1));
}
.ftr .aa-contact input[type="email"]::placeholder,
.ftr .aa-contact textarea::placeholder {
  color: color-mix(in srgb, var(--cream, #f5f3ee) 28%, transparent);
  text-transform: none;
}
.ftr .aa-contact input[type="email"]:focus,
.ftr .aa-contact textarea:focus {
  outline: none;
  border-color: var(--gold, #d9b45a);
  background: var(--field-wash-focus, rgba(255, 255, 255, .05));
}
/* It grows only once someone is actually writing in it — so the row stays one
   line until it has a reason not to be. */
.ftr .aa-contact textarea {
  min-height: 0; height: 42px; resize: none; padding-top: 12px; line-height: 1.7;
  transition: height .35s var(--ease, cubic-bezier(.22, 1, .36, 1)), border-color .3s, background-color .3s;
}
.ftr .aa-contact textarea:focus,
.ftr .aa-contact textarea:not(:placeholder-shown) { height: 96px; resize: vertical; }
.ftr .aa-contact__send {
  justify-self: start; align-self: end;
  height: 42px; padding: 0 26px;
  border: 1px solid var(--gold-edge, rgba(217, 180, 90, .45));
  background: transparent;
  color: var(--gold-lt, #f4e3a1);
  font-family: inherit; font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
  cursor: pointer;
  transition: border-color .3s, color .3s, background-color .3s, opacity .3s;
}
.ftr .aa-contact__send:hover:not(:disabled) {
  border-color: var(--gold, #d9b45a);
  background: var(--gold-wash, rgba(217, 180, 90, .1));
  color: var(--gold-hi, #fff6d6);
}
.ftr .aa-contact__send:disabled { opacity: .5; cursor: not-allowed; }
.ftr .aa-contact__msg {
  grid-column: 1 / -1; text-align: center; margin: 0;
  font-size: 10.5px; letter-spacing: .08em; line-height: 1.7; min-height: 1.2em;
  color: color-mix(in srgb, var(--cream, #f5f3ee) 55%, transparent);
}
.ftr .aa-contact__msg.is-ok { color: var(--ok, #9fdcbc); }
.ftr .aa-contact__msg.is-bad { color: var(--bad, #ffb99e); }
/* The honeypot. Out of sight, out of the tab order and out of the
   accessibility tree — a person cannot reach it by any route, so anything in
   it was typed by a script. Never `display:none`: some bots skip those. */
.ftr .aa-contact__hp {
  position: absolute; left: -9999px; width: 1px; height: 1px;
  overflow: hidden; opacity: 0; pointer-events: none;
}

/* ---------------------------------------------------------------------------
 *  Narrow screens.
 *
 *  Stacked and centred, where space-between would strand each item on its own
 *  line edge; and the form folds to one column, where three would leave each
 *  of them unusable.
 * ------------------------------------------------------------------------ */
@media (max-width: 820px) {
  .ftr .aa-contact { grid-template-columns: 1fr; align-items: stretch; }
  .ftr .aa-contact__title,
  .ftr .aa-contact__msg { text-align: left; }
  .ftr .aa-contact textarea { height: 84px; resize: vertical; }
  .ftr .aa-contact__send { justify-self: start; }
}
/*  THE FOOTER ON A PHONE.
 *
 *  The wrap is one flex row on a desktop and four stacked rows here, so the
 *  tight row-gap that makes the desktop footer read as one line collapses
 *  those rows into a crammed block — mark, signature and links touching, with
 *  the AAC link and the copyright reading as one accidental sentence.
 *
 *  Centred, not left-aligned: with the contact form's fields running the full
 *  width above it, a left-hugging lockup reads as fallen over rather than
 *  placed. A hairline separates the signature band from the form, which is the
 *  job the horizontal distance does on a wide screen.
 *
 *  THIS USED TO LIVE IN site.css, which two of the six pages do not load. The
 *  hand-written pages got it and the home page and /aac/ did not, so the same
 *  footer was 547px tall on one page and 528px on the next — the exact kind of
 *  difference that makes two pages feel like two sites. 760px, not 720px: that
 *  is the width the interior pages switch their navigation at, and the footer
 *  should turn with the page rather than 40px later. */
@media (max-width: 760px) {
  .ftr { padding: 44px 0 36px; }
  .ftr .wrap { row-gap: 22px; justify-content: center; text-align: center; }
  .ftr__contact { width: 100%; }
  .ftr__mark { order: 1; }
  .ftr__mid { order: 2; width: 100%; }
  .ftr__links {
    order: 3; width: 100%; justify-content: center; gap: 20px;
    padding-top: 18px; border-top: 1px solid var(--line-soft, rgba(245, 243, 238, .07));
  }
}
/* 44px of finger without changing what the eye sees — the links are 10.5px
   type, which is a target no thumb can hit reliably. */
@media (pointer: coarse) {
  .ftr__links a,
  .ftr__links .i18n-btn,
  .ftr__links .theme-pick__t { position: relative; }
  .ftr__links a::before,
  .ftr__links .i18n-btn::before,
  .ftr__links .theme-pick__t::before {
    content: ""; position: absolute; inset: -14px -10px; z-index: 0;
  }
  /*  The mark is a link too, and it was the one the rule above missed: 132×17,
     because an <img> link is only as tall as its art. Same treatment, same
     reason — the eye sees no change, the thumb gets 45px. */
  .ftr__mark { position: relative; }
  .ftr__mark::before { content: ""; position: absolute; inset: -14px -10px; z-index: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ftr__links a::after,
  .ftr__mark img,
  .ftr .aa-contact textarea { transition: none; }
}