/* ============================================
   VitroWorks — Footer
   ============================================ */

.site-footer {
  background: var(--color-footer-bg);
  color: var(--color-navy);
  padding-block: var(--space-8);
}

.site-footer__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  text-align: center;
}

.site-footer__col {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  align-items: center;
}

.site-footer__col a {
  color: var(--color-navy);
  font-size: var(--fs-xs);
}

/* Offerte aanvragen — highlighted call-to-action in bold orange.
   Reverts to the shared cyan on hover and when it's the active page
   (the rules below come later at equal specificity, so they win). */
.site-footer__col a.nav-cta {
  color: var(--color-orange);
  font-weight: var(--fw-bold);
}

.site-footer__col a:hover {
  color: var(--color-cyan);
}

.site-footer__col a.is-active {
  color: var(--color-cyan);
}

/* Active indicator: a small blue dot after the item. */
.site-footer__col a.is-active::after {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-left: var(--space-2);
  vertical-align: middle;
  border-radius: 50%;
  background: var(--color-cyan);
}

.site-footer__brand {
  gap: var(--space-3);
}

.site-footer__monogram {
  opacity: 1;
}

.site-footer__copyright {
  font-size: var(--fs-xs);
  color: var(--color-navy-soft);
}

.site-footer__address {
  font-style: normal;
  font-size: var(--fs-xs);
  color: var(--color-navy-soft);
  line-height: var(--lh-relaxed);
}

.site-footer__address a {
  color: var(--color-navy-soft);
  /* WCAG 2.5.8: a tel/mailto link is a touch target and needs 24px of
     tappable height; at 13px type the line box alone is ~21px. The padding
     buys the rest without moving anything visibly. */
  display: inline-block;
  padding: 4px 0;
}

.site-footer__address a:hover {
  color: var(--color-cyan);
}

.site-footer__reviews {
  font-size: var(--fs-xs);
  color: var(--color-navy-soft);
  margin: var(--space-2) 0 0;
}

.site-footer__reviews a {
  color: var(--color-navy-soft);
  /* Same WCAG 2.5.8 touch-target padding as the address links above. */
  display: inline-block;
  padding: 4px 0;
}

.site-footer__reviews a:hover {
  color: var(--color-cyan);
}

@media (min-width: 768px) {
  .site-footer__inner {
    grid-template-columns: 1fr 1fr 1fr 1.4fr;
    text-align: left;
  }

  .site-footer__col {
    align-items: flex-start;
  }
}

/* --- Floating pills ------------------------------------------------------ */
/* Geometry shared by the two fixed pills at the bottom of the viewport, and
   by the footer padding that keeps them off its content. One source, so the
   clearance can never drift away from the thing it is clearing. */
:root {
  --pill-h: 36px;                                  /* measured: 35.5px */
  --pill-offset: 16px;
  --pill-safe: env(safe-area-inset-bottom, 0px);   /* iOS home indicator */
  /* The least room a pill needs to clear content beneath it: 36 + 2x16. */
  --pill-clear: calc(var(--pill-h) + var(--pill-offset) * 2);
}

/* --- Admin shortcut ------------------------------------------------------ */
/* Fixed pill bottom-left, linking to /site-admin/. Only in the DOM when an
   admin session exists — see inc/footer.php. */
.admin-shortcut {
  position: fixed;
  bottom: calc(var(--pill-offset) + var(--pill-safe));
  left: 16px;
  z-index: 550;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  background: #1f2a30;
  color: #fff;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  box-shadow: 0 2px 12px rgba(20, 24, 27, 0.35);
  opacity: 0.82;
  transition: opacity 0.15s ease;
}

.admin-shortcut:hover,
.admin-shortcut:focus-visible {
  opacity: 1;
  color: #fff;
}

.admin-shortcut svg {
  width: 15px;
  height: 15px;
  flex: none;
}

/* --- Floating quote button ----------------------------------------------- */
/* The header CTA is only styled from 1024px up (header.css), so below that
   the quote form is behind the hamburger. This is the standing route to it.
   Same height as .admin-shortcut, so on an admin's phone the two read as a
   pair rather than two unrelated blobs. */
.cta-float {
  position: fixed;
  right: 16px;
  bottom: calc(var(--pill-offset) + var(--pill-safe));
  z-index: 500;   /* under the menu (900), legal (900) and offerte (800) layers */
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--color-orange);
  color: #fff;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  /* Never let the label wrap: two lines would double the height and break
     the match with the pill beside it. Variant B's longer wording measures
     174.9px, which still clears .admin-shortcut by 17.6px at 320px. */
  white-space: nowrap;
  box-shadow: 0 2px 12px rgba(20, 24, 27, 0.35);
  transition: background-color 0.15s ease;
}

.cta-float:hover,
.cta-float:focus-visible {
  background: var(--color-orange-hover);
  color: #fff;
}

/* Visually 36px to match the pill beside it, but 48px to the thumb (was 44;
   raised 12/08 when the button became scroll-triggered, since a control
   that comes and goes is worth the larger target). Nothing else sits in
   this corner, so the extra area cannot steal a tap, and ::after is
   invisible — the pill still measures 36px to the eye. */
.cta-float::after {
  content: "";
  position: absolute;
  inset: -6px 0;
}

.cta-float__arrow {
  font-size: 15px;
  line-height: 1;
}

/* --- Sticky behaviour (js/site.js) --------------------------------------- */
/* The pill above is unchanged; this only decides WHEN it is on screen. It
   ships with .is-off, so without JS it never appears at all — better than
   a button that flashes in on first paint and has nothing driving it.

   translateY(100%) on its own is not enough for a floating pill: 100% is
   its own height, which parks it in the gap between the pill and the
   bottom edge, still visible. The bottom offset and the safe-area inset
   have to travel with it.

   Reduced motion needs nothing here: base.css already flattens every
   transition to 0.01ms under prefers-reduced-motion, so the pill snaps
   instead of sliding without a second rule to keep in step. */
.vw-sticky-cta.is-off {
  transform: translateY(calc(100% + var(--pill-offset) + var(--pill-safe)));
  visibility: hidden;
  /* Stay visible for the length of the slide, then go. Without this the
     pill would vanish on frame one and slide out unseen. */
  transition: transform 0.2s ease, visibility 0s linear 0.2s;
}

.vw-sticky-cta.is-on {
  transform: translateY(0);
  visibility: visible;
  transition: transform 0.2s ease, background-color 0.15s ease;
}

/* Desktop already carries the CTA in the sticky header; a second permanent
   one would just be the same offer twice. */
@media (min-width: 1024px) {
  .cta-float { display: none; }
}

/* The modal covers the screen anyway (z-index 800), but leaving the button
   underneath it means a stray tap during the scroll lock. */
body.ofm-open .cta-float { display: none; }

/* Room under the footer so the button never rests on its content. Twice the
   bare clearance, because at the minimum the last line of footer text still
   ends up right against the pill and reads as crowded.
   The safe-area inset is added once and never doubled: it is a physical
   device measurement, not breathing room. */
@media (max-width: 1023px) {
  .site-footer {
    padding-bottom: calc(var(--pill-clear) * 2 + var(--pill-safe));
  }
  /* Focus scrolling stays at the single clearance. Its job is only to keep a
     focused control out from under the button (WCAG 2.2 SC 2.4.11 — a focused
     control must not be entirely hidden); doubling it would shove anchor
     targets further up the screen than anyone asked for. */
  html {
    scroll-padding-bottom: calc(var(--pill-clear) + var(--pill-safe));
  }
}