/* ==========================================================================
   Footer — The Wild Hare
   --------------------------------------------------------------------------
   Every value here is sampled from the site's own design language rather than
   invented, so the footer reads as part of the page instead of a bolt-on:

     #ffffff / #2a2a2a  .scheme_default.footer_wrap   (the theme's footer)
     #d47742            .vc_custom_1580970470008      (homepage "Contact info"
                                                       panel — the site's own
                                                       treatment for reach-us
                                                       content, so the footer's
                                                       booking panel echoes it)
     #fee8d1            .socials_wrap .social_icon    (theme's social chips)
     #f3f5f7            .footer_wrap .vc_row          (theme's alternate fill)
     #e5e5e5            .sc_layouts_row_delimiter     (theme's rule colour)
     #d27b28            footer link hover
     FrankRuhlLibre     h2.sc_item_title / h6.sc_item_subtitle — the site leans
                        hard on large serif display type; the panel does too.

   The signature is the week ribbon: opening hours on a shared 8am–9pm axis, so
   Thursday's late night and Saturday's early start are visible at a glance
   instead of buried in seven lines of text.
   ========================================================================== */

.wh-footer {
  --wh-ink:         #2a2a2a;
  --wh-muted:       #6b6b6b;
  --wh-rule:        #e5e5e5;
  --wh-mist:        #f3f5f7;
  --wh-peach:       #fee8d1;
  --wh-copper:      #d47742;
  --wh-copper-deep: #d27b28;
  --wh-bar:         #e0a878;

  --wh-serif: var(--font-primary, 'FrankRuhlLibre', Georgia, serif);
  --wh-sans:  var(--font-secondary, 'JosefinSans', 'Helvetica Neue', sans-serif);

  background: #ffffff;
  color: var(--wh-ink);
  font-family: var(--wh-sans);
  border-top: 1px solid var(--wh-rule);
  position: relative;
  margin: 0;
  padding: 0;
}

/* muji-child-style.css loads after this and carries an unscoped
   `p { text-align: center !important }` inside two mobile media queries.
   Equal !important, higher specificity — this restores normal inheritance. */
.wh-footer p,
.wh-footer h2,
.wh-footer h3,
.wh-footer li,
.wh-footer span,
.wh-footer a { text-align: inherit !important; }

.wh-footer :focus-visible {
  outline: 2px solid var(--wh-copper-deep);
  outline-offset: 3px;
  border-radius: 2px;
}

.wh-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 3.75rem 1.75rem 3rem;
  display: grid;
  grid-template-columns: 0.82fr 1.05fr 1fr;
  gap: 3.5rem;
  align-items: start;
}

/* --------------------------------------------------------------------------
   Brand column — the real logo, at its natural weight
   -------------------------------------------------------------------------- */
.wh-brand-logo { display: block; margin: 0 0 1.15rem; }
.wh-brand-logo img {
  display: block;
  width: 132px;
  height: auto;
}

.wh-brand-line {
  margin: 0 0 1.6rem;
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.7;
  color: var(--wh-muted);
}

/* Peach chips, lifted straight from the theme's own social treatment. */
.wh-socials { display: flex; align-items: center; gap: 0.55rem; }
.wh-socials a {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--wh-peach);
  color: var(--wh-ink);
  font-size: 1rem;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}
.wh-socials a:hover,
.wh-socials a:focus-visible {
  background: var(--wh-copper);
  color: #ffffff;
}

/* Contact details, directly under the social chips. */
.wh-contact {
  margin: 1.35rem 0 0;
  padding: 0;
  list-style: none;
}
.wh-contact li { margin-bottom: 0.45rem; }
.wh-contact li:last-child { margin-bottom: 0; }
.wh-contact a {
  font-size: 0.9rem;
  color: var(--wh-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--wh-rule);
  padding-bottom: 1px;
  transition: color 0.2s ease, border-color 0.2s ease;
  word-break: break-word;
}
.wh-contact a:hover,
.wh-contact a:focus-visible {
  color: var(--wh-copper-deep);
  border-bottom-color: var(--wh-copper-deep);
}

/* --------------------------------------------------------------------------
   Week ribbon (signature)
   -------------------------------------------------------------------------- */
.wh-label {
  margin: 0 0 1.35rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--wh-ink);
}

.wh-days { margin: 0 0 0.9rem; padding: 0; list-style: none; }

.wh-day {
  display: grid;
  grid-template-columns: 2.5rem 1fr 4.7rem;
  align-items: center;
  gap: 0.85rem;
  padding: 0.3rem 0;
}

.wh-day-name {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wh-muted);
}

.wh-footer .wh-day-hours {
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  color: var(--wh-muted);
  text-align: right !important;
}

.wh-track {
  display: block;
  position: relative;
  height: 9px;
  background: var(--wh-mist);
  border-radius: 1px;
}
.wh-bar {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--s);
  width: var(--w);
  background: var(--wh-bar);
  border-radius: 1px;
}

.wh-day.is-today .wh-day-name,
.wh-day.is-today .wh-day-hours { color: var(--wh-ink); }
.wh-day.is-today .wh-bar { background: var(--wh-copper); }

.wh-axis {
  display: grid;
  grid-template-columns: 2.5rem 1fr 4.7rem;
  gap: 0.85rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--wh-rule);
}
.wh-axis-scale {
  grid-column: 2;
  display: flex;
  justify-content: space-between;
  font-size: 0.64rem;
  letter-spacing: 0.08em;
  color: var(--wh-muted);
}

.wh-status {
  margin: 1rem 0 0;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.82rem;
  color: var(--wh-muted);
}
.wh-status b { font-weight: 700; color: var(--wh-ink); }
.wh-dot {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #b9b9b9;
  flex: none;
}
.wh-status.is-open .wh-dot {
  background: var(--wh-copper);
  box-shadow: 0 0 0 3px rgba(212, 119, 66, 0.2);
}

/* --------------------------------------------------------------------------
   Booking panel — the same solid copper the homepage uses for "Contact info"
   -------------------------------------------------------------------------- */
.wh-panel {
  background: var(--wh-copper);
  padding: 2.4rem 2.2rem;
}

/* White on #d47742 is 3.2:1 — fine for large text, not for small. This line is
   deliberately large; the small copy below sits on white instead. */
.wh-panel h2 {
  margin: 0 0 1.6rem;
  font-family: var(--wh-serif);
  font-weight: 400;
  font-size: clamp(1.6rem, 2.5vw, 2.15rem);
  line-height: 1.2;
  color: #ffffff;
}

.wh-book {
  display: inline-block;
  padding: 1rem 2rem;
  background: #ffffff;
  color: var(--wh-ink);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}
.wh-book:hover,
.wh-book:focus-visible { background: var(--wh-peach); color: var(--wh-ink); }

/* --------------------------------------------------------------------------
   Baseline
   -------------------------------------------------------------------------- */
.wh-base { border-top: 1px solid var(--wh-rule); }
.wh-base-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 1.5rem 1.75rem 1.75rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 2.5rem;
  font-size: 0.84rem;
  color: var(--wh-muted);
}
.wh-base-inner p { margin: 0; }
.wh-base-inner a {
  color: var(--wh-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--wh-rule);
  transition: color 0.2s ease, border-color 0.2s ease;
}
.wh-base-inner a:hover,
.wh-base-inner a:focus-visible {
  color: var(--wh-copper-deep);
  border-bottom-color: var(--wh-copper-deep);
}
.wh-sep { color: var(--wh-rule); margin: 0 0.55rem; }

/* Agency credit. Given a real affordance — weight, colour and an underline —
   so it reads as a link worth clicking rather than boilerplate. The copper is
   deepened to #a85520 because the brand #d27b28 is only 3.2:1 on white and
   this is small text. */
.wh-credit { color: var(--wh-muted); }
.wh-credit .wh-heart {
  font-size: 1.05em;
  line-height: 1;
  margin: 0 0.12em;
  vertical-align: -0.08em;
}
.wh-base-inner .wh-credit a {
  color: #a85520;
  font-weight: 700;
  border-bottom: 1px solid rgba(168, 85, 32, 0.35);
  transition: color 0.2s ease, border-color 0.2s ease;
}
.wh-base-inner .wh-credit a:hover,
.wh-base-inner .wh-credit a:focus-visible {
  color: #8f4519;
  border-bottom-color: #8f4519;
}

.wh-vh {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1020px) {
  .wh-inner { grid-template-columns: 1fr 1fr; gap: 2.75rem; }
  .wh-panel { grid-column: 1 / -1; }
}

@media (max-width: 700px) {
  .wh-inner {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    padding: 2.75rem 1.25rem 2.25rem;
  }
  .wh-panel { padding: 2rem 1.5rem; }
  .wh-footer .wh-book { display: block; width: 100%; text-align: center !important; }
  .wh-panel-tel { width: auto; }
  .wh-base-inner {
    padding: 1.35rem 1.25rem 1.6rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wh-footer * { transition: none !important; }
}