/* ---------------------------------------------------------------------------
   Public-site stylesheet — the marketing pages' counterpart to portal.css.

   The app deliberately runs two stylesheets: portal.css for the authenticated
   portal, this one for the public pages. They share no rules and are loaded on
   different pages, so a change to one can never move the other.

   The marketing pages are otherwise self-contained, each carrying its own
   inline <style> block — which is how the old footer rules came to be copied
   into all seven of them. This file is linked once from
   marketing/partials/head-meta.blade.php, so anything shared across public
   pages belongs here rather than in those inline blocks. Currently that is the
   footer (WI-576); add further shared public-page rules below it.

   Every selector is scoped under .site-footer, which also means each rule
   outranks the bare `footer { ... }` element rules still sitting in those
   pages' inline <style> blocks, regardless of source order.

   Muted greys are chosen for contrast on the #3a0a31 plum ground:
     #c9aac0  7.9:1   #b294ab  5.9:1   #e8d6e2 / #f2e6ee  well above
   Do not reach for #8d6a84 — it measures 3.57:1 and fails. Subordinate text is
   signalled with weight and letter-spacing, never by dropping luminance.
--------------------------------------------------------------------------- */

.site-footer {
  background: #3a0a31;
  color: #e8d6e2;
  text-align: center;
  /* The pages' own inline `footer { padding: 48px 0 20px }` rule still exists;
     each band carries its own padding now, so zero it explicitly. */
  padding: 0;
}

/* --- Band 1: logo / wellness centre / contact ---------------------------- */

.site-footer .sf-main {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: center;
  justify-items: center;
  /* Tops aligned, not centres: the three columns are very different heights,
     and centring them left the logo floating against a four-line address. */
  align-items: start;
  text-align: center;
  gap: 72px;
  padding: 36px 40px 32px;
}

.site-footer .sf-logo {
  position: relative;
  display: block;
  text-decoration: none;
  /* Room for the absolutely-positioned word below the mark. */
  padding-bottom: 22px;
}

.site-footer .sf-logo img {
  width: 140px;
  height: auto;
  display: block;
}

/* Live text rather than part of the image, so it can carry the brand magenta.
   The 53.84% offset centres it under the wordmark's own visual centre — the
   artwork is not centred in its canvas, so a plain 50% sits noticeably left. */
.site-footer .sf-logo-word {
  position: absolute;
  left: 53.84%;
  top: 100%;
  transform: translateX(-50%);
  margin-top: -18px;
  white-space: nowrap;
  color: #e0578f;
  font-size: .88rem;
  font-weight: 800;
  letter-spacing: .1em;
}

.site-footer .sf-label {
  color: #e0578f;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.site-footer .sf-address {
  display: flex;
  flex-direction: column;
  font-style: normal;
  font-size: 13.5px;
  line-height: 1.7;
  color: #f2e6ee;
}

.site-footer .sf-directions {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 14px;
  padding: 10px 18px;
  border-radius: 999px;
  background: #fff;
  color: #3a0a31;
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none;
  transition: background .2s, color .2s;
}

.site-footer .sf-directions:hover,
.site-footer .sf-directions:focus-visible {
  background: #f2e6ee;
  color: #3a0a31;
}

.site-footer .sf-directions svg {
  width: 14px;
  height: 14px;
  flex: none;
}

.site-footer .sf-email {
  display: inline-block;
  font-size: 13.5px;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
}

.site-footer .sf-email:hover {
  color: #f2e6ee;
}

.site-footer .sf-social {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 14px;
}

.site-footer .sf-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  color: #fff;
  transition: background .2s;
}

.site-footer .sf-social a:hover,
.site-footer .sf-social a:focus-visible {
  background: rgba(255, 255, 255, .22);
}

.site-footer .sf-social svg {
  width: 17px;
  height: 17px;
}

/* --- Band 2: registered office ------------------------------------------ */

.site-footer .sf-regd {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 12px;
  padding: 14px 40px;
  border-top: 1px solid rgba(255, 255, 255, .14);
}

.site-footer .sf-regd-org {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #c9aac0;
}

.site-footer .sf-regd-lbl {
  font-size: 11px;
  font-weight: 500;
  color: #b294ab;
}

.site-footer .sf-regd-addr {
  font-size: 12.5px;
  color: #e8d6e2;
}

/* --- Band 3: links + copyright ------------------------------------------ */

.site-footer .sf-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  /* One centred line: links and copyright read as a single run rather than
     being pushed to opposite ends of the footer. */
  justify-content: center;
  gap: 18px;
  padding: 16px 40px;
  border-top: 1px solid rgba(255, 255, 255, .14);
}

.site-footer .sf-links {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}

.site-footer .sf-links a {
  font-size: 12px;
  font-weight: 500;
  color: #e8d6e2;
  text-decoration: none;
}

.site-footer .sf-links a:hover,
.site-footer .sf-links a:focus-visible {
  color: #fff;
}

.site-footer .sf-copy {
  margin: 0;
  font-size: 11.5px;
  color: #b294ab;
}

/* --- Mobile -------------------------------------------------------------- */

@media (max-width: 768px) {
  .site-footer .sf-main {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 30px 24px 26px;
  }

  .site-footer .sf-directions {
    min-height: 48px;
    padding: 13px 22px;
  }

  .site-footer .sf-social a {
    width: 44px;
    height: 44px;
  }

  .site-footer .sf-social svg {
    width: 20px;
    height: 20px;
  }

  /* Four centred lines rather than a wrapping baseline row — at this width the
     wrap points are arbitrary and the legal address stops reading as one unit. */
  .site-footer .sf-regd {
    flex-direction: column;
    align-items: center;
    gap: 4px;
  }

  .site-footer .sf-bottom {
    gap: 12px;
    padding: 18px 24px;
  }

  .site-footer .sf-links {
    justify-content: center;
    gap: 12px;
  }

  .site-footer .sf-links a {
    font-size: 12.5px;
  }

  .site-footer .sf-copy {
    text-align: center;
  }
}

/* --- Header logo (WI-587) ------------------------------------------------
   One size on every public page. Each page's inline <style> still carries a
   `.brand img { height: 38px }` rule; this scoped rule outranks it so a page
   can never drift to its own logo size again. --------------------------- */

.site-header .brand img {
  height: 38px;
  width: auto;
}

/* --- Header Book button on phones (WI-587) --------------------------------
   Search Console's mobile-usability floor is a 44px tap target. The pages'
   inline rule sets 8px padding, which measured 36px; this outranks it. ---- */

.site-header a.mobile-book-btn {
  display: none;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
}

@media (max-width: 880px) {
  .site-header a.mobile-book-btn {
    display: inline-flex;
  }
}