/* ============================================================
   Samana — Footer
   Same 3-column frame as Pure Massage: menus (left), logo +
   copyright (center), contact stack (right) — phone, address and
   CTA stacked, social icons below. Mobile-first: one centered
   column (menus → contact → logo), 3 columns from 1071px.
   ============================================================ */

.site-footer {
  background-color: var(--color-footer-bg);
  color: var(--color-footer-text);
  padding-block: clamp(1.875rem, 5vw, 2.5rem); /* 30 → 40px, no breakpoints */
}

.footer-inner {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "menus"
    "booking"
    "logo";
  justify-items: center;
  text-align: center;
  gap: 30px;
}

/* ============================================================
   MENUS
   ============================================================ */
.footer-menus {
  grid-area: menus;
  display: flex;
  justify-content: center;
  gap: var(--space-lg);
}

.footer-menu {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-menu a {
  color: var(--color-footer-text);
  text-decoration: none;
  font-size: var(--fs-sm);
  transition: color var(--transition);
}

.footer-menu a:hover,
.footer-menu a:focus-visible,
.footer-menu .current-menu-item > a {
  color: var(--color-footer-link-hover);
}

/* ============================================================
   LOGO + COPYRIGHT + COPYRIGHT MENU
   ============================================================ */
.footer-logo-col {
  grid-area: logo;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
}

.footer-logo {
  display: block;
  width: fit-content;
}

.footer-logo-img {
  width: clamp(125px, 18vw, 175px);
  height: auto;
}

.footer-logo-text {
  font-family: var(--font-heading);
  font-size: 1.375rem;
  font-weight: var(--fw-heading);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-footer-heading);
}

.footer-copyright-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2xs);
  font-size: var(--fs-xs);
}

.footer-copyright-divider {
  display: none;
  opacity: 0.5;
}

.copyright-menu {
  display: flex;
  gap: var(--space-xs);
}

.copyright-menu li:not(:last-child)::after {
  content: "|";
  margin-left: var(--space-xs);
  opacity: 0.5;
}

.copyright-menu a {
  color: var(--color-footer-text);
  text-decoration: none;
  transition: color var(--transition);
}

.copyright-menu a:hover,
.copyright-menu a:focus-visible {
  color: var(--color-footer-link-hover);
}

/* ============================================================
   CONTACT — phone, address, CTA, then social icons
   ============================================================ */
.footer-contact {
  grid-area: booking;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.footer-contact-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
}

/* Phone + address grouped tight — the bigger group gap above still
   separates the pair from the CTA and social links. */
.footer-contact-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.footer-phone {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.footer-phone-label {
  font-size: 0.75rem;
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-caps);
}

.footer-phone-number {
  font-weight: var(--fw-bold);
  font-size: var(--fs-nav);
  line-height: 24px;
  letter-spacing: 0.04em;
  color: inherit;
  text-decoration: none;
}

.footer-address {
  font-style: normal;
  font-size: var(--fs-sm);
  line-height: 1.6;
}

.footer-address-title {
  display: block;
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  font-size: 0.75rem;
  margin-block-end: var(--space-2xs);
  opacity: 0.75;
}

/* ============================================================
   SOCIAL LINKS (reusable anywhere samana_social_links() prints)
   ============================================================ */
.social-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm);
}

/* Plain white icons, as in the design — 40px hit area (touch-
   friendly) around an 18px glyph. Color comes from the context
   (currentColor), so they also work on light sections. */
.social-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: inherit;
  transition: color var(--transition), opacity var(--transition);
}

.site-footer .social-links a {
  color: var(--color-white);
}

.social-links a:hover,
.social-links a:focus-visible {
  opacity: 0.7;
}

/* ============================================================
   DESKTOP — 3 columns
   ============================================================ */
@media (min-width: 1071px) {
  .footer-inner {
    grid-template-columns: 1fr auto 1fr;
    grid-template-areas: "menus logo booking";
    align-items: center;
    justify-items: stretch;
    text-align: initial;
    gap: var(--space-2xl);
  }

  .footer-menus {
    justify-content: flex-start;
    gap: var(--space-3xl);
  }

  .footer-contact,
  .footer-contact-group,
  .footer-contact-info,
  .footer-phone {
    align-items: flex-end;
    text-align: right;
  }

  .footer-copyright-row {
    flex-direction: row;
    gap: var(--space-xs);
  }

  .footer-copyright-divider {
    display: inline;
  }
}