/* ============================================================
   FOOTER
   Hanalei Day Spa

   Four-column grid on desktop: brand column (2fr) + three nav
   columns (1fr each). Collapses to 2×2 on tablet, single
   column on mobile. The sage accent bar + plum copyright strip
   close the page.
   ============================================================ */

/* --------------------------------------------------------
   SAGE ACCENT BAR
   The thin gradient rule that separates the page from footer.
   -------------------------------------------------------- */
.sage-bar {
  height: 3px;
  background: linear-gradient(
    90deg,
    var(--sage-light),
    var(--sage),
    var(--sage-light)
  );
}

/* --------------------------------------------------------
   FOOTER SHELL
   -------------------------------------------------------- */
#site-footer {
  background: var(--charcoal);
  padding: 64px var(--gutter) 32px;
}

.ft-wrap {
  max-width: var(--max-content);
  margin-inline: auto;
}

/* --------------------------------------------------------
   FOOTER GRID
   Brand column is double-width to hold the logo, tagline,
   and schedule CTA comfortably alongside three nav columns.
   -------------------------------------------------------- */
.ft-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 56px;
  margin-bottom: 48px;
}

/* --------------------------------------------------------
   BRAND COLUMN
   -------------------------------------------------------- */
.ft-brand {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: var(--fw-regular);
  color: var(--white);
  letter-spacing: var(--ls-tight);
  margin-bottom: 10px;
}

/* The short sage rule below the brand name. */
.ft-rule {
  width: 36px;
  height: 1px;
  background: var(--sage);
  margin: 16px 0;
  border: 0;
}


/* ── Tagline ────────────────────────────────────────────── */

.ft-tagline {
  font-size: var(--fs-meta);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.44);
  margin: 0 0 20px;
}

/* ── Address block ──────────────────────────────────────── */

.ft-address {
  font-style: normal; /* override browser default italic on <address> */
  font-size: var(--fs-meta);
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.44);
  border-left: 2px solid var(--sage);
  padding-left: 12px;
  margin: 0 0 24px;
}

.ft-address__landmark {
  font-family: var(--font-utility);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--sage);
  margin: 0 0 4px;
}

.ft-address__phone {
  color: rgba(255, 255, 255, 0.44);
  transition: color var(--transition-fast) ease;
}

.ft-address__phone:hover {
  color: var(--sage);
}

.ft-license {
  font-size: 11px;
  opacity: 0.6;
}

/* ── CTA button pair ────────────────────────────────────── */

.ft-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.ft-actions .btn {
  flex: 1 1 auto;
  text-align: center;
  font-size: 0.8rem;
}

/* Remove old single-button wrapper if still present */
.ft-schedule {
  display: contents;
}


/* --------------------------------------------------------
   NAV COLUMNS
   -------------------------------------------------------- */
.ft-col h5 {
  /* h5 is already styled by global.css; these overrides handle the dark bg. */
  color: rgba(255, 255, 255, 0.32);
  margin-bottom: 16px;
}

.ft-col ul { list-style: none; }

.ft-col li { margin-bottom: 10px; }

.ft-col a {
  font-family: var(--font-utility);
  font-size: var(--fs-meta);
  font-weight: var(--fw-regular);
  color: rgba(255, 255, 255, 0.44);
  transition: color var(--transition-fast) ease;
}

.ft-col a:hover {
  color: var(--sage);
}

/* --------------------------------------------------------
   FOOTER BOTTOM BAR
   Copyright line — rule + two-column layout.
   -------------------------------------------------------- */
.ft-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: var(--space-md);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-xs);
  font-family: var(--font-utility);
  font-size: 11px;
  font-weight: var(--fw-regular);
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.24);
}

.ft-bottom a {
  color: rgba(255, 255, 255, 0.32);
  transition: color var(--transition-fast) ease;
}
.ft-bottom a:hover { color: var(--sage); }

/* --------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------- */

/* Tablet — 2×2 grid */
@media (max-width: 900px) {
  #site-footer {
    padding: 48px var(--gutter) 28px;
  }

  .ft-grid {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }
}

/* Mobile — single column */
@media (max-width: 600px) {
  #site-footer {
    padding: 44px var(--gutter) 28px;
  }

  .ft-grid {
    grid-template-columns: 1fr;
    gap: 0;
    margin-bottom: var(--space-lg);
  }

  /* Dividing line between columns when stacked */
  .ft-col {
    padding-top: 28px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
  }

  /* Brand column doesn't need a top rule */
  .ft-grid > div:first-child {
    border-top: 0;
    padding-top: 0;
  }
}