.sv-site-footer {
  margin-top: auto;
  background: var(--sv-color-charcoal-deep);
  color: var(--sv-color-ivory);
}

.sv-site-footer a {
  color: var(--sv-color-gold-on-dark);
}

.sv-site-footer__bottom {
  padding-block: var(--sv-space-5);
  font-size: var(--sv-fs-small);
}

/* =========================================================
   SACH & VOGUE HAIR — CTA / footer right-rail link wrapping fix
   APPEND TO: css/style.css
   Scope: footer CTA column (.sv-footer-links) + CTA button only.
   Uses .sv-footer-prefixed (2-class) selectors so it wins over the
   footer block's inline <style> WITHOUT !important.
   Does NOT touch main navigation or mega menu.
   ========================================================= */

/* 1) Never hyphenate or break CTA words into syllables (all widths) */
.sv-footer .sv-footer-links a,
.sv-cta .sv-cta-inner a {
  word-break: normal;
  overflow-wrap: normal;
  -webkit-hyphens: none;
  hyphens: none;
}

/* 2 + 3) Desktop: give the CTA column real width and keep each phrase
   on a single line — no narrow vertical word columns */
@media (min-width: 1000px) {
  .sv-footer .sv-footer-top {
    grid-template-columns: 1.25fr minmax(300px, 0.75fr);
    align-items: start;
  }
  .sv-footer .sv-footer-links a {
    white-space: nowrap;
  }
}

/* 4) Medium: let phrases wrap as whole words (clean multi-line phrases) */
@media (min-width: 600px) and (max-width: 999px) {
  .sv-footer .sv-footer-links a {
    white-space: normal;
  }
}

/* 5) Mobile: stack CTA links cleanly, full width */
@media (max-width: 599px) {
  .sv-footer .sv-footer-top {
    grid-template-columns: 1fr;
  }
  .sv-footer .sv-footer-links {
    width: 100%;
  }
  .sv-footer .sv-footer-links a {
    white-space: normal;
    display: block;
    width: 100%;
  }
}

/* =========================================================
   SACH & VOGUE HAIR — footer panel presentation
   Migrated out of block_content #24 inline <style> so the
   footer is themeable and uses the design tokens.
   Replaces the previous Arial / Georgia authored fallbacks
   with the established brand stacks.
   ========================================================= */

.sv-footer {
  background: var(--sv-color-ivory);
  padding: 90px 5vw 50px;
  color: var(--sv-color-ink-soft);
}

.sv-footer-inner {
  max-width: 1500px;
  margin: 0 auto;
}

.sv-footer-top {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 80px;
  margin-bottom: 70px;
}

/* Brand lockup — same typographic language as .sv-sach-standard__brand:
   sans wordmark + serif descriptor, warm charcoal, not Arial/Georgia. */
.sv-footer-brand {
  max-width: 980px;
  margin: 0 0 28px;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
}

.sv-footer .sv-brand-main {
  font-family: var(--sv-font-sans);
  font-size: clamp(34px, 3.6vw, 52px);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--sv-color-charcoal);
}

.sv-footer .sv-brand-sub {
  font-family: var(--sv-font-serif);
  font-size: clamp(21px, 2.2vw, 31px);
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--sv-color-charcoal);
  margin-left: 14px;
}

.sv-footer p {
  font-size: 18px;
  line-height: 1.7;
  color: var(--sv-color-muted);
  max-width: 620px;
}

.sv-footer-links {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.sv-footer .sv-footer-links a {
  color: var(--sv-color-gold);
  text-decoration: none;
  font-size: 15px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sv-footer .sv-footer-links a:hover,
.sv-footer .sv-footer-links a:focus-visible {
  color: var(--sv-color-charcoal);
}

.sv-footer-bottom {
  border-top: 1px solid rgba(155, 122, 63, 0.25);
  padding-top: 28px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
}

.sv-footer-small {
  font-size: 13px;
  color: var(--sv-color-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

@media (max-width: 900px) {
  .sv-footer {
    padding: 70px 22px 40px;
    overflow: hidden;
  }
  .sv-footer-top {
    grid-template-columns: 1fr;
    gap: 42px;
  }
  .sv-footer-brand {
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
  }
  .sv-footer .sv-brand-main {
    font-size: 30px;
  }
  .sv-footer .sv-brand-sub {
    font-size: 19px;
    margin-left: 8px;
  }
  .sv-footer p {
    font-size: 18px;
    line-height: 1.65;
  }
}