/* =========================================================================
   Hairways - site footer

   Rebuilt 2026-10-01. The previous version stacked every block into a single
   column on phones, so the footer ran to several screens of near-identical
   links plus a seven-row opening-hours table. On a phone that is the last
   thing a visitor sees, and it read as filler.

   What changed:
     - the two link lists sit SIDE BY SIDE on mobile, not stacked
     - opening hours are grouped into two lines instead of seven, with a live
       open/closed pill carrying the part people actually want
     - tighter vertical rhythm throughout

   Dark ground so the ivory logo reads, brass accents to match the rest of
   the site. Loaded on every page, so it stays small.
   ========================================================================= */

.hwf {
  /* Warm sand, not near-black. The page runs ivory hero -> white and
     #faf6ec sections, so a near-black footer was the only dark block on
     the site and met the white FAQ section on a hard edge. This is the
     same warm family, one step deeper than the sections, so it grounds
     the page without slamming shut. */
  --f-ground: #f0e8d7;   /* the footer's own ground - deepest ivory */
  --f-ink:    #16150f;   /* warm near-black type, as everywhere else */
  --f-ink-2:  #5a5247;   /* body copy */
  --f-paper:  #16150f;   /* kept as the "strong text" token */
  --f-mute:   #6b6254;   /* 4.9:1 on the sand ground - #857b6a was 3.4 */
  --f-line:   rgba(22,21,15,.14);
  --f-gold:   #7a5610;   /* antique brass, 5.4:1 on sand - #8a6414 was 4.4 */
  --f-open:   #2f7a4d;
  --f-shut:   #9c4a38;

  background: var(--f-ground);
  color: var(--f-ink-2);

  /* A defined top edge. Sand against the white section above it is a quiet
     transition, and without a rule the footer reads as more page rather than
     as the close of it. */
  border-top: 1px solid #e3d9c2;
  font-family: 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 300;
  line-height: 1.6;
}
.hwf *, .hwf *::before, .hwf *::after { box-sizing: border-box; }

.hwf__in {
  max-width: 1180px;
  margin: 0 auto;
  padding: 2.5rem 1.25rem 2rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}


/* ---- brand ------------------------------------------------------------ */

.hwf__logo { display: inline-block; }

.hwf__logo img {
  display: block;
  width: 190px;
  height: auto;
  border-radius: 0 !important;   /* the theme rounds every img site-wide */
}

.hwf__wordmark {
  display: inline-block;
  font-size: 1.5rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--f-paper);
  text-decoration: none;
}
.hwf__wordmark span { color: var(--f-gold); }

.hwf__tag {
  margin: 1.05rem 0 1.25rem;
  max-width: 40ch;
  font-size: .89rem;
  color: var(--f-mute);
}

.hwf__cta { display: flex; flex-wrap: wrap; gap: .55rem; }

.hwf__btn {
  display: inline-block;
  padding: .7em 1.45em;
  border-radius: 100px;
  font-size: .85rem;
  letter-spacing: .03em;
  text-decoration: none;
  border: 1px solid transparent;
  white-space: nowrap;
  transition: background .2s, color .2s, border-color .2s;
}
.hwf__btn--solid { background: var(--f-ink); color: #f7f2e6; border-color: var(--f-ink); }
.hwf__btn--solid:hover { background: var(--f-gold); border-color: var(--f-gold); color: #fffdf7; }
.hwf__btn--ghost { color: var(--f-ink); border-color: rgba(22,21,15,.26); }
.hwf__btn--ghost:hover { border-color: var(--f-gold); color: var(--f-gold); background: rgba(22,21,15,.03); }
.hwf__btn:focus-visible { outline: 2px solid var(--f-gold); outline-offset: 3px; }


/* ---- link columns ------------------------------------------------------ */
/* Two lists side by side on a phone. Stacked, they turned the footer into
   ten near-identical rows of text and pushed everything else off-screen. */

.hwf__links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.6rem 1.25rem;
}

.hwf__col h3 {
  margin: 0 0 .85rem;
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--f-gold);
}
.hwf__col ul { list-style: none; margin: 0; padding: 0; }
.hwf__col li { margin-bottom: .48rem; }
.hwf__col a {
  color: var(--f-paper);
  text-decoration: none;
  font-size: .89rem;
  opacity: .82;
  transition: opacity .18s, color .18s;
}
.hwf__col a:hover { opacity: 1; color: var(--f-gold); }
.hwf__col a:focus-visible { outline: 2px solid var(--f-gold); outline-offset: 2px; }
.hwf__col a b {
  font-weight: 400;
  font-size: .72rem;
  color: var(--f-mute);
  font-variant-numeric: tabular-nums;
}


/* ---- visit ------------------------------------------------------------- */

.hwf__visit address {
  font-style: normal;
  font-size: .89rem;
  color: var(--f-mute);
  margin-bottom: .65rem;
}

.hwf__link, .hwf__tel {
  display: inline-block;
  font-size: .89rem;
  color: var(--f-paper);
  text-decoration: none;
  transition: color .18s;
}
.hwf__link:hover, .hwf__tel:hover { color: var(--f-gold); }
.hwf__link:focus-visible, .hwf__tel:focus-visible { outline: 2px solid var(--f-gold); outline-offset: 2px; }

.hwf__tel {
  display: block;
  font-size: 1.08rem;
  letter-spacing: .02em;
  margin-top: .5rem;
}

/* live opening state - the one line most visitors are looking for */
.hwf__state {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin: 1.25rem 0 .7rem;
  padding: .34em .8em;
  background: #fffdf7;
  border: 1px solid var(--f-line);
  border-radius: 100px;
  font-size: .78rem;
  color: var(--f-ink);
}
.hwf__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--f-mute); flex: none; }
.hwf__state.is-open .hwf__dot { background: var(--f-open); box-shadow: 0 0 0 3px rgba(108,196,138,.2); }
.hwf__state.is-shut .hwf__dot { background: var(--f-shut); box-shadow: 0 0 0 3px rgba(217,139,120,.18); }

/* Grouped, not one row per day. Seven rows of "9am-9pm" is noise; the only
   fact that varies is Tuesday. */
.hwf__hours { list-style: none; margin: 0; padding: 0; max-width: 300px; }
.hwf__hours li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .34rem 0;
  font-size: .84rem;
  color: var(--f-mute);
  border-bottom: 1px solid var(--f-line);
}
.hwf__hours li:last-child { border-bottom: none; }
.hwf__hours b { font-weight: 400; font-variant-numeric: tabular-nums; color: var(--f-paper); }
.hwf__hours .is-closed b { color: var(--f-mute); font-style: italic; }


/* ---- bottom bar -------------------------------------------------------- */

.hwf__bar { border-top: 1px solid var(--f-line); }
.hwf__barin {
  max-width: 1180px;
  margin: 0 auto;
  padding: 1.05rem 1.25rem 1.3rem;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.25rem;
  align-items: center;
  justify-content: space-between;
  font-size: .78rem;
  color: var(--f-mute);
}
.hwf__barin p { margin: 0; }
.hwf__legal a { color: var(--f-mute); text-decoration: none; }
.hwf__legal a:hover { color: var(--f-gold); text-decoration: underline; }
.hwf__legal span { margin: 0 .45rem; opacity: .5; }


/* ---- wider layouts ----------------------------------------------------- */

@media (min-width: 560px) {
  .hwf__in { padding: 3rem 1.5rem 2.25rem; }
  .hwf__logo img { width: 210px; }
}

@media (min-width: 720px) {
  .hwf__in { grid-template-columns: 1fr 1fr; gap: 2.5rem; padding: 3.25rem 1.5rem 2.5rem; }
  .hwf__brand { grid-column: 1 / -1; }

  /* The wrapper that pairs the two lists on mobile dissolves here, so each
     nav becomes a grid item of the footer in its own right. */
  .hwf__links { display: contents; }
}

@media (min-width: 1000px) {
  .hwf__in {
    grid-template-columns: 2fr 1fr 1fr 1.5fr;
    gap: 3rem;
    padding: 4rem 1.5rem 3rem;
  }
  .hwf__brand { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .hwf__btn, .hwf__col a, .hwf__link, .hwf__tel { transition: none; }
}