/* ============================================================
   SITE FOOTER (custom CSS — no Tailwind for fast first paint)
   ============================================================ */

.site-footer {
  background-color: #192915;
  padding-top: clamp(3rem, 8vw, 6.25rem);
  padding-bottom: clamp(2rem, 4vw, 3.125rem);
}

.site-footer__inner {
  width: 100%;
}

/* ── Subscribe row ── */
.site-footer__subscribe-row {
  display: flex;
  flex-direction: column;
  gap: clamp(2rem, 4vw, 3.75rem);
  /* margin-bottom: clamp(2.5rem, 6vw, 5.3125rem); */
}

.site-footer__subscribe-top {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

@media (min-width: 1024px) {
  .site-footer__subscribe-top {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.site-footer__subscribe-copy {
  display: flex;
  flex-direction: column;
  gap: clamp(1.25rem, 3vw, 2.375rem);
}

.site-footer__subscribe-heading {
  font-family: var(--font-heading, 'Bacasime Antique', serif);
  font-size: clamp(2rem, 1.19rem + 3.59vw, 4rem);
  color: #ffffff;
  line-height: 0.9;
  letter-spacing: -0.05em;
  margin: 0;
}

.site-footer__subscribe-desc {
  color: #cfcfcf;
  font-family: 'Inter 18pt', sans-serif;
  font-size: 0.875rem;
  font-weight: 300;
  line-height: 1.5;
  max-width: 416px;
  margin: 0;
}

.site-footer__subscribe-form {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  flex-shrink: 0;
  gap: 0.75rem;
}

@media (min-width: 640px) {
  .site-footer__subscribe-form {
    gap: 0;
  }
}

.site-footer__email-input {
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.875rem;
  padding: 17px;
  outline: none;
  width: 100%;
}

.site-footer__email-input::placeholder {
  color: rgba(255, 255, 255, 0.7);
}

.site-footer__subscribe-btn {
  background-color: #ffffff;
  color: #192915;
  /* Hardcoded rather than reading --text-base, so the small-screen step-down
     is repeated in the mobile block at the end of this file. */
  font-size: 1rem;
  font-weight: 500;
  padding-inline: 2.5rem;
  flex-shrink: 0;
  line-height: 2.65;
  border: none;
  cursor: pointer;
  width: 100%;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: color 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.site-footer__subscribe-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: #3b4938;
  z-index: -1;
  pointer-events: none;
  transform: translateX(-101%);
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (hover: hover) {
  .site-footer__subscribe-btn:hover {
    color: #ffffff;
  }
  .site-footer__subscribe-btn:hover::before {
    transform: translateX(0);
  }
}

@media (min-width: 640px) {
  .site-footer__email-input {
    width: clamp(14rem, 25vw, 19.625rem);
  }

  .site-footer__subscribe-btn {
    width: auto;
  }
}

.site-footer__divider {
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  margin: 0;
}

/* ── Links columns ── */
.site-footer__links {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 5vw, 3.75rem);
  margin-bottom: clamp(3rem, 7vw, 5.3125rem);
}

@media (min-width: 640px) {
  .site-footer__links {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .site-footer__links {
    grid-template-columns: repeat(3, 1fr);
  }
}

.site-footer__col {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.site-footer__col-title {
  font-family: var(--font-heading, 'Bacasime Antique', serif);
  color: #ffffff;
  font-size: 1.25rem;
  line-height: 0.9;
  margin: 0;
}

.site-footer__nav {
  display: flex;
  flex-direction: column;
  gap: 14px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-footer__nav a,
.site-footer__link {
  color: #cfcfcf;
  font-family: 'Inter 18pt', sans-serif;
  font-size: 0.875rem;
  font-weight: 300;
  text-decoration: none;
  transition: color 0.2s ease;
  display: inline-block;
}

.site-footer__nav a:hover,
.site-footer__link:hover {
  color: #ffffff;
}

.site-footer__contact-group {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.site-footer__contact-links {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  font-family: 'Inter 18pt', sans-serif;
}

.site-footer__phones {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.25rem 0.3rem;
}

.site-footer__address-block {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.site-footer__address {
  color: #cfcfcf;
  font-family: 'Inter 18pt', sans-serif;
  font-size: 0.875rem;
  font-weight: 300;
  line-height: 1.5;
  margin: 0;
}

.site-footer__map-link {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
}

.site-footer__map-link svg {
  width: 0.875rem;
  height: 0.75rem;
  fill: currentColor;
  flex-shrink: 0;
}

/* ── Bottom bar ── */
.site-footer__bottom {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .site-footer__bottom {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 0.75rem;
  }
}

.site-footer__copyright {
  color: #cfcfcf;
  font-family: 'Inter 18pt', sans-serif;
  font-size: 0.875rem;
  font-weight: 300;
  margin: 0;
  order: 2;
}

@media (min-width: 768px) {
  .site-footer__copyright {
    order: 1;
  }
}

.site-footer__copyright a {
  color: #cfcfcf;
  text-decoration: none;
  transition: color 0.2s ease;
}

.site-footer__copyright a:hover {
  color: #ffffff;
}

/* Legal links (Privacy Policy, Terms) — inline, sitting directly after the
   copyright so the two read as one line, as in the Figma bottom bar. */
.site-footer__policies {
  display: flex;
  align-items: center;
  order: 3;
}

@media (min-width: 768px) {
  .site-footer__policies {
    order: 2;
  }

  /* Separator between the copyright and the first legal link. Desktop only —
     on mobile they stack, so a leading pipe would dangle. */
  .site-footer__policies::before {
    content: '|';
    margin-right: 0.75rem;
    color: #cfcfcf;
    opacity: 0.5;
  }
}

.site-footer__policies-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-footer__policies-list li + li::before {
  content: '|';
  margin-right: 0.75rem;
  color: #cfcfcf;
  opacity: 0.5;
}

.site-footer__policies-list a {
  color: #cfcfcf;
  font-family: 'Inter 18pt', sans-serif;
  font-size: 0.875rem;
  font-weight: 300;
  text-decoration: none;
  transition: color 0.2s ease;
  display: inline-block;
}

.site-footer__policies-list a:hover {
  color: #ffffff;
}

.site-footer__social {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  order: 1;
}

@media (min-width: 768px) {
  .site-footer__social {
    order: 3;
    /* auto margins here and on the credit split the leftover space evenly,
       so the icons sit between the copyright block and "Designed by WAC" */
    margin-left: auto;
  }
}

.site-footer__social-link {
  color: #ffffff;
  transition: color 0.2s ease;
  display: inline-flex;
}

.site-footer__social-link:hover {
  color: #a8d5ba;
}

/* Explicit width, not auto — the outer <svg> has no viewBox (it is on the
   <symbol>), so width:auto resolves to the 300px replaced-element default and
   the social row blows the bottom bar apart. See .site-menu__social a svg. */
.site-footer__social-link svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: currentColor;
}

.site-footer__credit {
  color: #cfcfcf;
  font-family: 'Inter 18pt', sans-serif;
  font-size: 0.875rem;
  font-weight: 300;
  margin: 0;
  order: 4;
}

@media (min-width: 768px) {
  .site-footer__credit {
    order: 4;
    margin-left: auto;
  }
}

.site-footer__credit a {
  color: #cfcfcf;
  text-decoration: none;
  transition: color 0.2s ease;
}

@media (hover: hover) {
  .site-footer__credit a:hover {
    color: #ffffff;
  }
}

/* 16px → 14px on small screens, matching the --text-base override in
   src/sections.css. This button hardcodes 1rem so it misses that token. */
@media (max-width: 639.98px) {
  .site-footer__subscribe-btn {
    font-size: 0.875rem;
  }
}

/* ── Footer link columns: accordions on phones ─────────────────────
 * Stacked, the two menu columns run to roughly 500px of links before the
 * contact details are reachable. Below 640px — the width where
 * .site-footer__links drops to a single column — each heading becomes a
 * toggle and its list collapses. From 640px up the columns sit side by side
 * and there is nothing to save, so the button is inert and reads as the
 * plain heading it was.
 * ────────────────────────────────────────────────────────────── */
.site-footer__col-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  /* Neutralise the UA button styling — but NOT colour or font.
     .site-footer__col-title sits on this same element and already supplies
     the serif face, 1.25rem size, 0.9 line-height and #fff. This rule is
     later in the file at equal specificity, so a `color: inherit` /
     `font: inherit` reset here wins over it and silently drops the heading
     to the footer body colour — taking the chevron with it, since that
     draws with currentColor. font-weight is the one UA property the title
     does not set, and 400 is what the <p> inherited anyway. */
  padding: 0;
  background: none;
  border: 0;
  font-weight: inherit;
  text-align: left;
}

.site-footer__col-chevron {
  display: none;
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.25s ease;
}

@media (min-width: 640px) {
  /* Two columns and up the heading is just a heading. Left focusable so the
     keyboard order is unchanged; main.js ignores the click at this width. */
  .site-footer__col-toggle {
    pointer-events: none;
  }
}

@media (max-width: 639.98px) {
  /* Rows of one accordion rather than separated blocks. */
  .site-footer__links {
    gap: 0;
  }

  /* The subscribe block ends in .site-footer__divider, which now reads as
     the top edge of the first accordion row. Its 2.5rem margin left a gap
     there that none of the other rows have, breaking the rhythm; dropping
     it makes every divider the same distance apart. */
  .site-footer__subscribe-row {
    margin-bottom: 0;
  }

  .site-footer__col--collapsible {
    gap: 0;
    border-bottom: 1px solid rgb(255 255 255 / 0.12);
  }

  /* The collapsed columns no longer carry the grid gap, so the contact
     column needs its own breathing room above it. */
  .site-footer__col:not(.site-footer__col--collapsible) {
    padding-top: 2rem;
  }

  .site-footer__col-toggle {
    padding-block: 0.9375rem;
    cursor: pointer;
  }

  .site-footer__col--collapsible .site-footer__col-chevron {
    display: block;
  }

  /* Animated open/close.

     display:none cannot be transitioned and neither can height:auto, so the
     panel is a one-row grid and the row itself animates from 0fr to 1fr —
     which resolves to the content height without anyone having to measure
     it in JS. The inner element does the clipping; min-height:0 is required
     or the flex nav refuses to shrink below its content and the row never
     collapses.

     The bottom padding lives on the inner element, not the panel: padding
     on the grid container sits outside the animated row and would pop in
     and out at the ends of the transition.

     visibility keeps collapsed links out of the tab order — clipped content
     is still focusable, so a keyboard user would otherwise tab into an
     invisible menu. It flips instantly on open and is delayed to the end of
     the transition on close, so it never cuts the animation short. */
  .site-footer__col--collapsible .site-footer__col-body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.32s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .site-footer__col--collapsible .site-footer__col-body > * {
    overflow: hidden;
    min-height: 0;
    visibility: hidden;
    /* Starts at 0 and animates in with the row. overflow:hidden clips
       content but NOT padding, so a constant padding-bottom here stayed
       on screen at 0fr and left the collapsed panel 20px tall — a band of
       dead space between each heading and its divider. */
    padding-bottom: 0;
    transition: visibility 0s linear 0.32s,
                padding-bottom 0.32s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .site-footer__col--collapsible.is-open .site-footer__col-body {
    grid-template-rows: 1fr;
  }

  .site-footer__col--collapsible.is-open .site-footer__col-body > * {
    visibility: visible;
    padding-bottom: 1.25rem;
    transition-delay: 0s;
  }

  .site-footer__col--collapsible.is-open .site-footer__col-chevron {
    transform: rotate(180deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-footer__col-chevron,
  .site-footer__col--collapsible .site-footer__col-body,
  .site-footer__col--collapsible .site-footer__col-body > * {
    transition: none;
  }
}

/* ── Bottom bar type on phones ───────────────────────────────────────
 * Copyright, legal links and the credit all sit at 0.875rem, which is the
 * same size as the footer nav links above them. Stacked on a phone that
 * gives the fine print equal weight to the navigation; a step down to
 * 0.8125rem restores the hierarchy. The breakpoint is where
 * .site-footer__bottom stops being a row.
 * ────────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
  .site-footer__copyright,
  .site-footer__credit,
  .site-footer__policies-list,
  .site-footer__policies-list a {
    /* The list itself is included so the "|" separator, which is a
       ::before on the li, comes down with the links. */
    font-size: 0.8125rem;
  }

  /* Stacked, the 1.5rem row gap was set for the desktop bar where these sit
     side by side. As four separate lines it spreads the fine print over
     ~190px; 0.75rem keeps them reading as one block. */
  .site-footer__bottom {
    gap: 0.75rem;
  }

  /* Same reasoning for the run-up to it. */
  .site-footer__links {
    margin-bottom: 2rem;
  }

  /* Column body text down to match: menu links, the email/phone links, the
     address and the "View Location" link (which carries .site-footer__link
     alongside its own modifier). Only the .site-footer__col-title headings
     stay at 1.25rem, so the columns keep their hierarchy. */
  .site-footer__nav a,
  .site-footer__link,
  .site-footer__address {
    font-size: 0.8125rem;
  }

  /* The social row is order:1, so the tightened 0.75rem bottom gap applies
     between the icons and the copyright too. They are a different kind of
     element, not another line of fine print, so give that one seam its own
     breathing room while the three text rows stay close together. */
  .site-footer__social {
    margin-bottom: 0.75rem;
  }

  /* Contact / address column.

     These gaps were set for the three-across desktop grid, where each column
     is narrow and the rows need separating. Stacked full-width the same
     values leave the heading floating away from the text it labels. Scaled
     down so each heading reads as attached to its own block, with the larger
     step kept between the two blocks so they stay distinct. */
  .site-footer__col:not(.site-footer__col--collapsible) {
    gap: 0.75rem;
  }

  .site-footer__contact-group {
    gap: 1.25rem;
  }

  .site-footer__contact-links {
    gap: 0.5rem;
  }

  .site-footer__address-block {
    gap: 0.75rem;
  }
}

/* ── Subscribe row vs CF7 validation ─────────────────────────────────
 * CF7 wraps every control in a <span class="wpcf7-form-control-wrap"> and,
 * when validation fails, appends .wpcf7-not-valid-tip INSIDE that span. In
 * an align-items:stretch flex row that makes the wrap taller, the Subscribe
 * button stretches to match, and the row loses its alignment the moment
 * anyone submits an empty field.
 *
 * Taking the tip out of flow keeps the wrap exactly the height of the input,
 * so the button never moves. The default tip colour is #dc3232, which is
 * close to unreadable on the dark green footer.
 * ──────────────────────────────────────────────────────────────────── */
.site-footer__subscribe-form .wpcf7-form-control-wrap {
  display: block;
  position: relative;
  width: 100%;
}

@media (min-width: 640px) {
  /* The input carries its own width clamp from 640px up. */
  .site-footer__subscribe-form .wpcf7-form-control-wrap {
    width: auto;
  }
}

.site-footer__subscribe-form .wpcf7-not-valid-tip {
  position: absolute;
  top: calc(100% + 0.375rem);
  left: 0;
  font-size: 0.8125rem;
  color: #ff9a9a;
}