/* FOOTER LAYOUT MODULE — page-footer styles.
   Every color is driven through the vendor's theme via the --ft-* palette
   variables (set by the consumer: the gallery canvas here, the dashboard sample,
   or the public page) so the color swatch themes them.

   Markup: `.site-footer.ft-<layout>` > `.ft-inner` >
     `a.ft-cta`                          (Check-Availability call to action)
     `.ft-body` > `.ft-brand` (name + tagline) + `nav.ft-nav` + `.ft-socials`
                  + `.ft-contact`
     `.ft-close` > `.ft-base` > `.ft-copyright` + `.ft-watermark` (Powered by Zulli)
   The sign-off row lives in its own `.ft-close` group, part of the same footer
   block as `.ft-body` (no gap, same background) so it reads as one footer, not a
   second one stranded below it.
   Every layout carries the SAME slots — it only rearranges and re-skins them, so
   a footer switches look by changing ONE class. No JS. Same discipline as
   faq_layouts.css / link_elements.css / pricing_layouts.css. */

.site-footer{
  container-type: inline-size;
  font-family: var(--ft-bf, 'Inter', system-ui, sans-serif);
  color: rgba(var(--ft-ink-rgb), .72);
  background: var(--ft-bg);
  /* Design tokens — all derived from the theme palette. */
  --c-ink: var(--ft-ink);
/* Secondary text now comes from the derived --*-muted role (see
   _muted_text in style_templates.py) instead of a hardcoded alpha. A fixed
   fade put 43 of 72 themes under AA; the derived value mutes as far as each
   palette allows and stops there. Fallback keeps the old look off-theme. */
  --c-muted: var(--ft-muted, rgba(var(--ft-ink-rgb), .68));
  --c-soft: rgba(var(--ft-ink-rgb), .72);
  --c-faint: var(--ft-muted, rgba(var(--ft-ink-rgb), .62));
  --c-line: rgba(var(--ft-ink-rgb), .15);
  --c-line-soft: rgba(var(--ft-ink-rgb), .08);
  --c-surface: color-mix(in srgb, var(--ft-ink) 4%, var(--ft-bg));
  --c-accent: var(--ft-primary);
  /* Only for a solid fill with --c-accent-ink painted on top (see the same
     split in link_layouts.css: --lk-primary vs --lk-primary-fill). */
  --c-accent-fill: var(--ft-primary-fill, var(--ft-primary));
  --c-accent-ink: var(--ft-on-primary);
  --c-accent-text: var(--ft-primary-text, var(--ft-primary));
  --c-accent-soft: color-mix(in srgb, var(--ft-primary) 12%, var(--ft-bg));
  /* An inked band a few layouts reverse onto — the dark counterweight the real
     page footer uses. Text on it reads via --c-band-ink. */
  --c-band: color-mix(in srgb, var(--ft-ink) 92%, var(--ft-bg));
  --c-band-ink: var(--ft-bg);
  --c-band-muted: color-mix(in srgb, var(--ft-bg) 60%, transparent);
  --c-r: 14px;
}

.ft-inner{ max-width: 640px; margin-inline: auto;
  padding: clamp(26px, 7cqi, 44px) clamp(20px, 6cqi, 40px) clamp(24px, 6cqi, 36px); }

/* ---- shared primitives ---- */
/* Centred both ways: min-height alone would leave the label riding at the top of
   the box, since text-align only handles the horizontal axis. Same recipe as
   .he-quote in hero_layouts.css. */
.ft-cta{ display:flex; align-items:center; justify-content:center;
  text-align:center; text-decoration:none; cursor:pointer;
  background: var(--c-accent-fill); color: var(--c-accent-ink);
  font-family: var(--ft-hf, 'Fraunces', serif); font-weight: var(--ft-tw, 600);
  /* --btn-lg */
  font-size: 15.5px; line-height:1.2; letter-spacing:-.005em;
  min-height: var(--btn-h-lg, clamp(48px, 5.2vw, 54px));
  padding: 8px var(--btn-px-lg, clamp(20px, 2.6vw, 30px)); border-radius: var(--ft-radius, 6px);
  transition: filter .2s ease, transform .15s ease; }
.ft-cta:hover{ filter: brightness(1.07); transform: translateY(-1px); }

.ft-name{ display:block; font-family: var(--ft-hf, 'Fraunces', serif);
  font-weight: var(--ft-tw, 600); color: var(--c-ink);
  /* --type-h2 */
  font-size: 22px; line-height:1.3; letter-spacing:-.013em;
  overflow-wrap: break-word; }
/* --type-body-sm */
.ft-tagline{ display:block; color: var(--c-muted); font-size: 13px;
  line-height:1.5; margin-top:5px; overflow-wrap: break-word; }

.ft-nav{ display:flex; flex-wrap:wrap; gap: 6px 18px; }
.ft-nav a{ text-decoration:none; color: var(--c-soft); font-size: 13px;
  transition: color .18s ease; }
.ft-nav a:hover{ color: var(--c-accent-text); }

/* flex-wrap so a vendor with many platforms wraps onto a second line instead
   of forcing the row past its own padded card — an unwrapped row on a narrow
   viewport was overflowing straight through the footer's border. */
.ft-socials{ display:flex; flex-wrap:wrap; gap:10px; }
.ft-social{ display:inline-flex; align-items:center; justify-content:center;
  /* Was 34px, under the kit's control target. */
  width:var(--btn-h-md, clamp(40px,4.4vw,44px)); height:var(--btn-h-md, clamp(40px,4.4vw,44px));
  border-radius:999px; color: var(--c-soft);
  border:1px solid var(--c-line); transition: color .18s, border-color .18s, background .18s; }
.ft-social svg{ width:var(--icon-md, 18px); height:var(--icon-md, 18px); display:block; fill: currentColor; }
.ft-social:hover{ color: var(--c-accent-text); border-color: var(--c-accent); }

.ft-contact{ color: var(--c-muted); font-size: 13px; }

/* The closing sign-off row: copyright above the Zulli watermark, both always
   centered regardless of layout — the watermark reads as a small badge, not
   fine print, and stays on its own centered line under the copyright rather
   than sharing a row with it (no per-layout left/space-between variants). */
.ft-close{ display:grid; gap:8px; }
.ft-base{ display:flex; flex-direction:column; align-items:center; gap:15px; }
/* --type-label, minus the uppercase — a copyright line is read, not scanned. */
.ft-copyright{ color: var(--c-faint); font-family: var(--ft-mf, ui-monospace, monospace);
  font-size: 12px; line-height:1.2; letter-spacing:.01em; }
.ft-watermark{ display:inline-flex; align-items:center; gap:5px; }
/* --type-label-sm, lighter than the copyright line beside it — the mark
   itself is the branding now, the word "Powered" is just a caption for it. */
.ft-watermark-label{ color: var(--c-accent-text);
  font-family: var(--ft-bf, system-ui), monospace;
  font-size: 12px; line-height:1; font-weight:600; letter-spacing:var(--track-label,.08em); text-transform:uppercase; }
/* The logo.svg is a flat gray asset (see design_generator.py's PDF footer note
   on the same file) — repainted as a mask instead, same recipe as word.svg in
   ui_concept.css/auth_open.css, so it reads in the vendor's own palette color
   (--c-accent-text) instead of always looking like grey Zulli branding. */
.ft-logo-stack{ position:relative; display:inline-block; line-height:0; }
.ft-logo-img{ display:block; height:20px; width:auto; }
@supports (mask-image:url("../img/logo-new.bf7ef29bf492.svg")) or (-webkit-mask-image:url("../img/logo-new.bf7ef29bf492.svg")){
  .ft-logo-img{ visibility:hidden; }
  .ft-logo-mask{
    display:block; position:absolute; inset:0;
    -webkit-mask-image:url("../img/logo-new.bf7ef29bf492.svg"); mask-image:url("../img/logo-new.bf7ef29bf492.svg");
    -webkit-mask-size:contain; mask-size:contain;
    -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
    -webkit-mask-position:center; mask-position:center;
    background: var(--c-accent-text);
  }
}

/* ============================================================ */
/* Named layouts                                                */
/* ============================================================ */

/* 01 · Centered Stack — everything centered in a single column; the classic,
   safe look the current page footer uses. */
.ft-stacked .ft-inner{ display:grid; justify-items:center; gap:22px; text-align:center; }
.ft-stacked .ft-cta{ width:100%; }
.ft-stacked .ft-body{ display:grid; justify-items:center; gap:16px; }
.ft-stacked .ft-nav{ justify-content:center; }
.ft-stacked .ft-socials{ justify-content:center; }
.ft-stacked .ft-close{ width:100%; justify-items:center; padding-top:20px;
  border-top:1px solid var(--c-line-soft); }

/* 02 · CTA Band — a full-width inked band carries the CTA, brand, and the
   sign-off row, so the whole footer reads as one high-contrast block. */
.ft-band .ft-inner{ max-width:none; padding:0; }
.ft-band .ft-cta{ border-radius:0; padding: clamp(20px, 5cqi, 30px);
  font-size: 15.5px; }
.ft-band .ft-body{ background: var(--c-band); color: var(--c-band-muted);
  padding: clamp(22px, 6cqi, 34px) clamp(20px, 6cqi, 40px) 0;
  display:grid; justify-items:center; gap:14px; text-align:center; }
.ft-band .ft-name{ color: var(--c-band-ink); }
.ft-band .ft-tagline{ color: var(--c-band-muted); }
.ft-band .ft-nav{ justify-content:center; }
.ft-band .ft-nav a{ color: var(--c-band-muted); }
.ft-band .ft-nav a:hover{ color: var(--c-band-ink); }
.ft-band .ft-socials{ justify-content:center; }
.ft-band .ft-social{ color: var(--c-band-muted); border-color: color-mix(in srgb, var(--c-band-ink) 30%, transparent); }
.ft-band .ft-social:hover{ color: var(--c-band-ink); border-color: var(--c-band-ink); }
.ft-band .ft-contact{ color: var(--c-band-muted); }
.ft-band .ft-close{ background: var(--c-band); justify-items:center; gap:10px;
  padding: 20px 24px clamp(22px, 6cqi, 34px); }
.ft-band .ft-copyright{ color: var(--c-band-muted); }
.ft-band .ft-watermark-label{ color: var(--c-band-ink); }
.ft-band .ft-logo-mask{ background: var(--c-band-ink); }

/* 03 · Split Row — brand on the left, socials on the right, a hairline, then the
   sign-off row. The tidy horizontal footer most sites use. */
.ft-split .ft-cta{ width:100%; margin-bottom:26px; }
.ft-split .ft-body{ display:flex; align-items:flex-start; justify-content:space-between;
  gap:24px; flex-wrap:wrap; padding-bottom:20px; border-bottom:1px solid var(--c-line); }
.ft-split .ft-brand{ flex:1 1 auto; min-width:0; }
.ft-split .ft-nav{ flex-direction:column; gap:8px; }
.ft-split .ft-socials{ order:3; flex-basis:100%; margin-top:4px; }
.ft-split .ft-contact{ flex-basis:100%; order:4; }
.ft-split .ft-close{ margin-top:16px; gap:10px; }
@container (max-width: 400px){ .ft-split .ft-body{ flex-direction:column; } }

/* 04 · Minimal — no CTA emphasis, no tagline weight; just the essentials on one
   quiet line. For pages that want the footer to disappear. */
/* Chromeless text link, but it keeps the --btn-h-lg hit area — so the rule sits
   on the text (underline), not on the bottom of a 54px box. */
.ft-minimal .ft-cta{ background:none; color: var(--c-accent-text); padding:0; margin-bottom:24px;
  text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px;
  border-radius:0; width:auto; display:inline-flex;
  font-size: 15px; }
.ft-minimal .ft-cta:hover{ transform:none; filter:none; opacity:.75; }
.ft-minimal .ft-inner{ display:grid; justify-items:center; gap:18px; text-align:center; }
.ft-minimal .ft-tagline{ display:none; }
.ft-minimal .ft-contact{ display:none; }
.ft-minimal .ft-name{ font-size: 18px; line-height:1.36; }
.ft-minimal .ft-body{ display:grid; justify-items:center; gap:14px; }
.ft-minimal .ft-nav{ justify-content:center; }
.ft-minimal .ft-socials{ justify-content:center; }
/* Chromeless, but still a tap target: the border goes, the hit area doesn't. */
.ft-minimal .ft-social{ border:none; width:var(--btn-h-md, clamp(40px,4.4vw,44px)); height:var(--btn-h-md, clamp(40px,4.4vw,44px)); }
.ft-minimal .ft-close{ justify-items:center; }

/* 05 · Brandmark — an oversized centered wordmark anchors the footer, CTA above
   it, everything else understated. Makes the business name the hero. */
.ft-brandmark .ft-inner{ display:grid; justify-items:center; gap:20px; text-align:center; }
.ft-brandmark .ft-cta{ width:auto; padding-inline:34px; }
/* --type-display-l — the brandmark footer is a display moment. */
.ft-brandmark .ft-name{ font-size: clamp(30px, 6cqi, 40px); line-height:1.12; letter-spacing:var(--track-display-l,-.02em); }
.ft-brandmark .ft-tagline{ font-size: 13px; }
.ft-brandmark .ft-body{ display:grid; justify-items:center; gap:16px; }
.ft-brandmark .ft-nav{ justify-content:center; }
.ft-brandmark .ft-socials{ justify-content:center; }
.ft-brandmark .ft-close{ justify-items:center; }

/* 06 · Sign-off — reads like a hand-signed closing note: a warm line above a
   left-aligned brand, the CTA as a text link. Editorial, serif-friendly. */
.ft-signoff .ft-inner{ display:grid; gap:20px; }
.ft-signoff .ft-brand::before{ content:"With you on the day"; display:block;
  color: var(--c-muted); font-style:italic; font-size: 15px;
  font-family: var(--ft-hf, serif); margin-bottom:14px; }
/* --type-display-m */
.ft-signoff .ft-name{ font-size: clamp(26px, 4.4cqi, 32px); line-height:1.18; }
.ft-signoff .ft-cta{ background:none; color: var(--c-accent-text); padding:0; border-radius:0;
  width:auto; justify-self:start; font-size: 15.5px;
  text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:4px; }
.ft-signoff .ft-cta:hover{ transform:none; filter:none; opacity:.8; }
.ft-signoff .ft-body{ display:grid; gap:16px; }
.ft-signoff .ft-close{ padding-top:20px; border-top:1px solid var(--c-line); gap:10px; }

/* 07 · Inline Bar — a single compact toolbar row (brand · nav · socials), CTA at
   the far end; a slim baseline underneath. Mono/utility vibe. */
.ft-inline .ft-inner{ display:grid; gap:16px; }
.ft-inline .ft-body{ display:flex; align-items:center; gap:16px 20px; flex-wrap:wrap; }
.ft-inline .ft-brand{ margin-right:auto; }
.ft-inline .ft-name{ font-size: 18px; line-height:1.36; }
.ft-inline .ft-tagline{ display:none; }
.ft-inline .ft-contact{ display:none; }
/* --btn-md for the inline strip */
.ft-inline .ft-cta{ order:5; width:auto; min-height:var(--btn-h-md, clamp(40px,4.4vw,44px));
  padding: 8px var(--btn-px-md, clamp(14px,1.8vw,20px)); font-size: 14px; }
.ft-inline .ft-social{ width:var(--btn-h-md, clamp(40px,4.4vw,44px)); height:var(--btn-h-md, clamp(40px,4.4vw,44px)); }
.ft-inline .ft-close{ padding-top:14px; border-top:1px solid var(--c-line); }
@container (max-width: 420px){ .ft-inline .ft-body{ flex-direction:column; align-items:flex-start; }
  .ft-inline .ft-cta{ order:0; width:100%; text-align:center; } }

/* 08 · Bordered Card — the whole footer floats as a bordered, rounded panel on a
   tinted surface, set in from the page edges. Contained and premium. */
.ft-bordered{ padding: clamp(16px, 4cqi, 28px); background: var(--c-surface); }
.ft-bordered .ft-inner{ border:1px solid var(--c-line); border-radius: var(--c-r);
  background: var(--ft-bg); box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 14px 30px -22px rgba(0,0,0,.4);
  display:grid; justify-items:center; gap:20px; text-align:center; }
.ft-bordered .ft-cta{ width:100%; }
.ft-bordered .ft-body{ display:grid; justify-items:center; gap:15px; }
.ft-bordered .ft-nav{ justify-content:center; }
.ft-bordered .ft-socials{ justify-content:center; }
.ft-bordered .ft-close{ width:100%; justify-items:center; padding-top:18px;
  border-top:1px solid var(--c-line-soft); }