/* ==========================================================================
   Victor Harbour Whale Sighting — site footer (theme-chrome replica)
   Hand-coded 1:1 replica of the visitvictorharbor.com theme footer for the
   standalone demo; deleted at WP integration (data-vh-theme="site-footer",
   see PLACEHOLDERS.md). Markup lives in partials/footer.html (canonical)
   and is duplicated into each page. Requires tokens.css + base.css.

   Geometry pixel-measured from the design crops:
   - desktop: assets/img/theme/footer-desktop.png + figma-refs/lp-desktop-1.png
     (footer region 1440x745; link columns at x 78/373/667, card 952..1362)
   - mobile:  assets/img/theme/footer-mobile.png (520 wide, 12px gutter)
   Typography mirrors the live site footer CSS (Elementor post-53.css):
   headings Josefin 700 11px, links Josefin 400 10px/1.7, contact 12px/1.2,
   acknowledgment Lora 11px/16px. Background texture is the live site's
   ui-footer-img-bg@2x-1.jpg rendered at the live element's proportions
   (bg box ~107.4% of footer height at 1440 — matches the design render).
   ========================================================================== */

/* Background: the texture crop/scale is matched numerically to the design
   renders (RMS-minimised against the Figma crops), not plain `cover` —
   the live element the designs were shot from was taller than the visible
   footer, so the equivalent fixed-size rendering is reproduced here. */
.vh-footer {
  background: #000 url('../../img/theme/footer-bg.jpg') no-repeat center -550px;
  background-size: auto 2400px;
  color: var(--vh-white);
  font-family: var(--vh-font-display);
}

.vh-footer a {
  color: inherit;
  text-decoration: none;
}

/* Hover not designed (flat image previously) — live site underlines */
.vh-footer a:hover {
  text-decoration: underline;
}

/* base.css focus outline is black — invisible on the dark texture */
.vh-footer :focus-visible {
  outline-color: var(--vh-white);
}

.vh-footer__inner {
  max-width: 1440px;
  margin-inline: auto;
  padding: 46px 12px 50px;
}

/* The nav landmark wraps the five link columns without generating a box,
   so the columns participate directly in the grid / stacking flow. */
.vh-footer__nav {
  display: contents;
}

/* --- Link columns ------------------------------------------------------ */

.vh-footer__heading {
  font-size: 15px;
  line-height: 1.091;
  letter-spacing: 0.25px;
}

.vh-footer__links {
  margin: 13px 0 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  line-height: 22.55px;
  letter-spacing: 0.1px;
  text-transform: uppercase;
}

/* Mobile: single stacked column (matches footer-mobile.png) */
.vh-footer__col + .vh-footer__col,
.vh-footer__group + .vh-footer__group {
  margin-top: 25px;
}

/* Design quirk reproduced from the renders: PLAN sits flush under CAMPING */
.vh-footer__col + .vh-footer__col--plan {
  margin-top: 0;
}

.vh-footer__heading--stacked {
  margin-top: 16px;
}

/* --- Contact (phone / email / address) --------------------------------- */

.vh-footer__contact {
  margin-top: 25px;
  font-style: normal;
  font-size: 12px;
  line-height: 14px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.vh-footer__contact-item + .vh-footer__contact-item {
  margin-top: 18px;
}

.vh-footer__contact-label {
  display: block;
  font-weight: 600;
}

/* Values render at 11px in the design (labels stay 12px) */
.vh-footer__contact-item a {
  display: block;
  font-size: 11px;
  line-height: 15px;
}

/* --- Acknowledgment of Country ----------------------------------------- */

.vh-footer__ack {
  margin-top: 35px;
  font-family: var(--vh-font-body);
  font-size: 11px;
  line-height: 16px;
}

.vh-footer__ack-heading {
  font-family: var(--vh-font-body);
  font-size: 11px;
  font-weight: 700; /* falls back to the loaded Lora 600 if not synthesized */
  line-height: 14px;
  text-transform: none;
}

.vh-footer__ack p {
  margin: 9px 0 0;
}

.vh-footer__ack p + p {
  margin-top: 21px;
}

/* --- Granite Island promo card ----------------------------------------- */

.vh-footer__promo {
  margin-top: 30px;
}

.vh-footer__card {
  max-width: 408px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--vh-white);
  color: var(--vh-black);
  text-align: center;
}

.vh-footer__card-photo {
  width: 100%;
  height: auto;
}

.vh-footer__card-kicker {
  margin-top: 12px;
  font-size: 15px;
  line-height: 21px;
  text-transform: uppercase;
}

.vh-footer__card-link {
  margin: 3px 0 31px;
  font-size: 15px;
  font-weight: 700;
  line-height: 21px;
  text-transform: uppercase;
}

.vh-footer__card-link a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.vh-footer__dots {
  display: flex;
  justify-content: center;
  gap: 20.5px;
  max-width: 408px;
  margin-top: 51px;
}

.vh-footer__dot {
  width: 17px;
  height: 9px;
  border: 1px solid var(--vh-white);
  border-radius: 999px;
}

.vh-footer__dot--active {
  background: var(--vh-white);
}

/* --- Desktop (1440 artboard; fluid ≥1024) ------------------------------- */

@media (min-width: 1024px) {
  .vh-footer {
    background-position: top center;
    background-size: auto 800px;
  }

  .vh-footer__inner {
    padding: 113px 79px 54px 77px;
  }

  /* 4 columns; at 1440 → 295 / 294 / 285 / 410 px (measured) */
  .vh-footer__grid {
    display: grid;
    grid-template-columns: 22.975% 22.897% 1fr 31.932%;
    grid-template-rows: minmax(268px, auto) auto auto;
    align-items: start;
  }

  .vh-footer__col--explore { grid-row: 1; grid-column: 1; }
  .vh-footer__col--see-do  { grid-row: 1; grid-column: 2; }
  .vh-footer__col--plan    { grid-row: 1; grid-column: 3; }
  .vh-footer__col--eat     { grid-row: 2; grid-column: 1; }
  .vh-footer__col--more    { grid-row: 2; grid-column: 2; }
  .vh-footer__contact      { grid-row: 2; grid-column: 3; }
  .vh-footer__ack          { grid-row: 3; grid-column: 1 / 4; }
  .vh-footer__promo        { grid-row: 1 / 3; grid-column: 4; }

  .vh-footer__col + .vh-footer__col,
  .vh-footer__contact,
  .vh-footer__promo {
    margin-top: 0;
  }

  .vh-footer__heading {
    font-size: 11px;
  }

  .vh-footer__links {
    margin-top: 9px;
    font-size: 10px;
    line-height: 17.2px;
  }

  .vh-footer__group + .vh-footer__group {
    margin-top: 0;
  }

  .vh-footer__group + .vh-footer__group--whats-on {
    margin-top: 31px;
  }

  .vh-footer__heading--stacked {
    margin-top: 10px;
  }

  .vh-footer__ack {
    margin-top: 48px;
    max-width: 705px;
  }

  .vh-footer__promo {
    margin-top: 39px;
  }

  .vh-footer__card {
    max-width: none;
  }

  .vh-footer__dots {
    max-width: none;
  }
}