/* ============================================================
   CITY GUIDE + CONTACT pages. Token-driven, no hex.
   (Form card + fields come from base.css.)
   ============================================================ */

/* ---- CITY GUIDE ------------------------------------------- */
.cg{background:var(--bg-light)}
.cg .container{display:grid;grid-template-columns:.9fr 1.1fr;gap:var(--s8);align-items:start}
.cg__cover{position:relative}
.cg__cover img{width:100%;border-radius:var(--r-md);box-shadow:var(--e3);display:block}
.cg__copy .eyebrow{display:block;margin-bottom:var(--s3)}
.cg__copy h1{font-family:var(--font-head);font-optical-sizing:auto;font-weight:600;
  font-size:clamp(2.2rem,4vw,3.2rem);line-height:1.04;letter-spacing:-.02em;color:var(--text)}
.cg__lede{font-size:1.1rem;color:var(--text-muted);margin-top:var(--s4)}
.cg__inside{list-style:none;margin:var(--s5) 0;display:grid;gap:var(--s3)}
.cg__inside li{display:flex;gap:var(--s3);font-size:1rem;color:var(--text)}
.cg__inside li svg{width:20px;height:20px;color:var(--action);flex:none;margin-top:3px}
.cg__form{margin-top:var(--s5)}

/* ---- LEGAL / LONG-FORM PROSE (the base template) -----------
   Added 2026-09-01. The privacy policy had NO page template assigned, so it fell
   through to hello-elementor's bare page.php: no container, no section padding,
   so the copy ran under the floating header and jammed into the footer. The page
   now uses template-base.php; this gives its prose real rhythm. Scoped by the
   body class WordPress emits for that template, so it cannot leak elsewhere. */
.page-template-template-base .container{max-width:76ch}
/* The site header is a FLOATING pill, so it overlaps the top of the page rather
   than pushing it down. Long-form pages have no hero to absorb that, so the
   eyebrow was sitting underneath it. Clear the pill explicitly. */
.page-template-template-base .section--light{padding-top:calc(var(--s9) + 92px)}
@media (max-width:768px){
  .page-template-template-base .section--light{padding-top:calc(var(--s7) + 84px)}
}
.page-template-template-base .h1{margin-bottom:var(--s3)}
.page-template-template-base .stack h2{
  font-family:var(--font-head);
  font-size:clamp(1.3rem,2.4vw,1.7rem);
  font-weight:600;
  line-height:1.22;
  letter-spacing:-.01em;
  color:var(--text);
  margin-top:var(--s7);
  margin-bottom:var(--s3);
}
.page-template-template-base .stack > h2:first-child{margin-top:0}
.page-template-template-base .stack p,
.page-template-template-base .stack li{
  font-size:1.0625rem;
  line-height:1.75;
  color:var(--text);
}
.page-template-template-base .stack ul{
  margin-top:var(--s3);
  padding-left:1.4rem;
  list-style:disc;
  display:grid;
  gap:var(--s2);
}
.page-template-template-base .stack ul li{padding-left:.15rem}
.page-template-template-base .stack a{
  color:var(--action);
  text-decoration:underline;
  text-underline-offset:2px;
}
.page-template-template-base .stack strong{color:var(--text);font-weight:600}
@media (max-width:768px){
  .page-template-template-base .stack h2{margin-top:var(--s6)}
}

/* ---- RESCHEDULE (template-reschedule.php) ------------------
   The form itself deliberately carries NO styles here: it uses .form-card,
   .field, .err and .bk__grid from base.css, the same components the booking
   widget and the contact page use, so it cannot drift away from them. Only the
   things that genuinely do not exist elsewhere are styled below. */
.rs{max-width:560px;margin-inline:auto}
.rs__panel[hidden]{display:none}
.rs__submit{margin-top:var(--s5)}
.rs__error{margin:var(--s4) 0 0;color:var(--action);font-size:var(--fs-small);line-height:1.6;font-weight:600}

/* the found appointment, shown inside the form card */
.rs__appt{
  display:grid;gap:6px;
  padding:var(--s5);margin:var(--s4) 0 0;
  background:var(--bg-light);
  border:1px solid var(--line);
  border-radius:var(--r-sm);
}
.rs__appt b{font-size:1.15rem;color:var(--text);font-family:var(--font-head);font-weight:600}
.rs__where{color:var(--text-muted);font-size:var(--fs-small)}
.rs__kicker{font-size:var(--fs-eyebrow);letter-spacing:.14em;text-transform:uppercase;color:var(--action);font-weight:600}

/* the confirmation banner above the rebooking widget */
.rs__done{
  max-width:560px;margin:0 auto var(--s5);
  padding:var(--s4) var(--s5);
  background:var(--bg-light);border-left:3px solid var(--action);
  border-radius:var(--r-sm);
  color:var(--text);font-size:1rem;line-height:1.6;
}
/* ---- CONTACT --------------------------------------------- */
.ct-hero{background:var(--bg-deep);color:var(--on-dark);text-align:center}
.ct-hero .container{padding-block:var(--s9) var(--s7)}
.ct-hero .eyebrow{color:var(--emphasis);display:block;margin-bottom:var(--s3)}
.ct-hero h1{font-family:var(--font-head);font-optical-sizing:auto;font-weight:600;
  font-size:var(--fs-h1);line-height:1.02;letter-spacing:-.02em;color:var(--on-dark)}
.ct-hero p{color:var(--on-dark);opacity:.85;max-width:48ch;margin:var(--s4) auto 0}

.ct-body{background:var(--bg-light)}
.ct-body .container{display:grid;grid-template-columns:.85fr 1.15fr;gap:var(--s8);align-items:start}
.ct-info__block{margin-bottom:var(--s5)}
.ct-info__block h3{font-family:var(--font-display);font-size:var(--fs-eyebrow);font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--text-muted);margin-bottom:var(--s2)}
.ct-info__block p{color:var(--text);font-size:1.05rem}
.ct-info__block a{color:var(--action)}
.ct-map{margin-top:var(--s5);border-radius:var(--r-md);overflow:hidden;box-shadow:var(--e1);
  border:1px solid var(--divider);min-height:260px;background:var(--surface-deep)}
.ct-map iframe{width:100%;height:100%;min-height:260px;border:0;display:block}

@media (max-width:900px){
  .cg .container,.ct-body .container{grid-template-columns:1fr;gap:var(--s6)}
  .cg__cover{max-width:420px}
}