/* ──────────────────────────────────────────────────────────────
   Group Four — sitewide styles (the one stylesheet every page loads
   before first paint)

   Icons         <i class="fas fa-NAME"> holding an <svg class="g4i">
                 from /assets/icons.svg, which replaced the Font
                 Awesome webfonts. Sized by font-size like the old
                 glyphs, so page rules on those <i> still apply.

   WhatsApp brand treatment:

   .g4-wa-nav    The WhatsApp button in the nav bar, in WhatsApp
                 green. That button is built six different ways
                 across the templates (.nav-cta, .btn-premium,
                 .btn-wa, .nav-btn-wa and two Tailwind utility
                 stacks), so each page tags it with this one class
                 and the selectors below out-rank every template's
                 own base and :hover rules, instead of editing six
                 stylesheets.

   .g4-wa-float  Round floating button, bottom-right. z-index 45 sits
                 above page content but under the full-screen mobile
                 menus (50) and the lightbox/success modals (100).
                 While the cookie banner is open, consent.js sets
                 --g4-consent-h to its height so the button rides
                 above the banner rather than disappearing under it.
   ────────────────────────────────────────────────────────────── */

/* Icons: the same box as the Font Awesome glyphs they replaced, 1em
   tall, as wide as the icon's viewBox, .125em below the baseline.
   :where() keeps these at zero specificity: the webfont CSS loaded before
   each page's own styles, so page rules (e.g. Tailwind .text-sm line
   heights) have to keep winning ties. */
:where(i.fas, i.fab, i.far) {
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  line-height: 1;
  vertical-align: -.125em;
}
.g4i {
  display: block;
  height: 1em;
  width: auto;
  overflow: visible;
  fill: currentColor;
}
.fa-spin { animation: g4-spin 1s linear infinite; }
@keyframes g4-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .fa-spin { animation: none; } }

:root {
  --g4-wa: #25d366;
  --g4-wa-dark: #128c7e;
}

nav a.g4-wa-nav {
  background: var(--g4-wa);
  color: #fff;
}
nav a.g4-wa-nav:hover,
nav a.g4-wa-nav:focus-visible {
  background: var(--g4-wa-dark);
  color: #fff;
}

.g4-wa-float {
  position: fixed;
  right: 1.25rem;
  right: max(1.25rem, env(safe-area-inset-right));
  bottom: calc(1.25rem + var(--g4-consent-h, 0px));
  bottom: calc(max(1.25rem, env(safe-area-inset-bottom)) + var(--g4-consent-h, 0px));
  z-index: 45;
  width: 3.5rem;
  height: 3.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--g4-wa);
  color: #fff;
  box-shadow: 0 6px 20px rgba(15, 23, 42, .25);
  transition: background .2s, transform .2s, bottom .45s cubic-bezier(.16, 1, .3, 1);
  -webkit-tap-highlight-color: transparent;
}
.g4-wa-float svg {
  display: block;
  width: 1.875rem;
  height: 1.875rem;
}
.g4-wa-float:hover {
  background: var(--g4-wa-dark);
  transform: scale(1.06);
}
.g4-wa-float:focus-visible {
  outline: 3px solid #d1a054;
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .g4-wa-float { transition: background .2s; }
  .g4-wa-float:hover { transform: none; }
}

@media print {
  .g4-wa-float { display: none; }
}

/* Email address in each page's "Get in touch" block. It used to be plain
   text on most pages; now it is a mailto link. Each page's own link rules
   (default blue, gold .contact-item a, etc.) would restyle it, so it inherits
   the surrounding text instead and only underlines on hover. The id in :is()
   lifts specificity above those per-page rules. */
:is(#contact, .contact-section) a.contact-email-link {
  color: inherit;
  font: inherit;
  text-decoration: none;
}
:is(#contact, .contact-section) a.contact-email-link:hover,
:is(#contact, .contact-section) a.contact-email-link:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}