/* site-extras.css — split from shared.css (lines 985-1053), 2026-08-17.
   ::selection, the Google reviews band (.gband-*), coarse-pointer tweaks
   LOAD ORDER IS LOAD-BEARING. Link in this exact sequence, after nothing and
   before the engine-*.css layer:
     site-fonts.css -> site-base.css -> site-atoms.css -> site-chrome.css -> site-page-furniture.css -> site-footer-forms.css -> site-marketing.css -> site-extras.css
   Slices are CONTIGUOUS: rule order is unchanged from shared.css, so the cascade is
   equivalent by construction. Some selectors are redefined in a later module on
   purpose — do not reorder, and do not "tidy" rules between files.
   shared.css itself is UNTOUCHED on disk and still serves the other 17 pages. */
::selection { background: #051D40; color: var(--gold); }
::-moz-selection { background: #051D40; color: var(--gold); }

/* ── GOOGLE REVIEWS BAND (Simply Home *company* reviews — /api/google-reviews) ──
   Self-contained component (no dependency on page-local review styles) so it can
   drop onto any page. Company-level reviews only; property reviews live on the
   vacation-rentals modal cards. */
.gband { border-top: 1px solid transparent; border-image: linear-gradient(90deg, transparent, var(--gold), transparent) 1; padding: 4rem 4vw 4.5rem; max-width: 1200px; margin: 0 auto; }
.gband-head { text-align: center; margin-bottom: 2rem; }
.gband-eyebrow { font-family: var(--body); font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--sage); margin: 0 0 0.7rem; }
.gband-rating { display: inline-flex; align-items: baseline; gap: 0.55rem; }
.gband-score { font-family: var(--display); font-size: 2.6rem; font-weight: 600; color: var(--parchment); line-height: 1; }
.gband-stars { color: var(--sage); font-size: 1.15rem; letter-spacing: 0.05em; }
.gband-stars .on { color: var(--gold); }
.gband-count { display: block; font-size: 0.8rem; color: var(--sage); margin-top: 0.75rem; }
.gband-count a { color: var(--gold); text-decoration: none; }
.gband-count a:hover { text-decoration: underline; }
.gband-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; }
.gband-card { background: var(--pine); border: 1px solid var(--gold-line); border-radius: var(--radius-sm); padding: 1rem 1.15rem; }
.gband-card-head { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin-bottom: 0.5rem; }
.gband-card-stars { color: var(--sage); font-size: 0.82rem; letter-spacing: 0.04em; }
.gband-card-stars .on { color: var(--gold); }
.gband-when { font-size: 0.72rem; color: var(--sage); white-space: nowrap; }
.gband-text { font-size: 0.86rem; color: rgba(245, 240, 232, 0.82); line-height: 1.6; margin: 0; }
.gband-author { font-size: 0.8rem; font-weight: 600; color: var(--parchment); margin: 0.6rem 0 0; }
.gband-author .via { font-weight: 400; color: var(--sage); font-size: 0.72rem; }
@media (max-width: 640px) { .gband-grid { grid-template-columns: 1fr; } }

/* ── Touch-target minimums (WCAG 2.5.8, added 2026-07-27) ──────────────────
   Measured on a 375px viewport: the nav Instagram icon rendered 21x21, the
   footer legal links ~21px tall and the tel: links ~15px tall — all under the
   24x24 minimum, so they are easy to miss with a thumb.

   The hit area is extended with an ABSOLUTE ::after overlay rather than
   padding or min-height on purpose: padding would reflow the footer and the
   nav, and this design is tuned. The overlay changes nothing that is drawn —
   no size, colour, spacing or position moves — it only gives the finger a
   bigger place to land. Coarse pointers only, so mouse hover targets are
   untouched.                                                                */
@media (pointer: coarse) {
  .nav-instagram,
  .footer-legal a,
  .footer-email,
  .footer-phones a[href^="tel:"],
  .footer-contact a[href^="tel:"] { position: relative; }

  .nav-instagram::after,
  .footer-legal a::after,
  .footer-email::after,
  .footer-phones a[href^="tel:"]::after,
  .footer-contact a[href^="tel:"]::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    min-height: 24px;
    height: 100%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
  }

  /* The icon is square and narrow, so it needs width as well as height. */
  .nav-instagram::after { left: 50%; right: auto; min-width: 24px; width: 100%;
    -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
}

/* ── END OF SHARED.CSS ── */