/* ════════════════════════════════════════════════════════════
   Seaside Holiday Cottage — V5 brand styles (v2 "heritage-modern")
   Cool blues + golden sand/sun, daymark red the single accent.
   Cormorant Garamond display + Inter body. Layered over /qx/v5/blocks.css;
   targets brand classes our composite objects + page blocks carry via the
   blocks' `class` input. NB: where a block needs CSS `display` (e.g. grid),
   author it WITHOUT direction/justify so the adapter emits no inline flex.
   ════════════════════════════════════════════════════════════ */
:root {
  --c-sky-top:#fef9c3; --c-sky-mid:#e0f2fe; --c-sky-low:#7dd3fc; --c-sky-horizon:#38bdf8;
  --c-sea-shallow:#06b6d4; --c-sea-mid:#0891b2; --c-sea-deep:#0c4a6e;
  --c-headland:#475569; --c-headland-deep:#1e293b; --c-headland-haze:#94a3b8;
  --c-daymark-red:#dc2626; --c-daymark-deep:#b91c1c;
  --c-sand:#fbbf24; --c-sand-deep:#d97706; --c-cream:#fef9d6;
  --c-paper:#fafaf5; --c-paper-deep:#f3f1e8;
  --c-text:#1c1917; --c-muted:#57534e; --c-meta:#94a3b8; --c-rule:rgba(15,30,50,0.08);
  --f-display:"Cormorant Garamond","Times New Roman",serif;
  --f-body:"Inter",-apple-system,system-ui,sans-serif;
}

/* ── reset (the missing box-sizing — was the horizontal-scroll cause) ── */
*, *::before, *::after { box-sizing:border-box; }
html, body { margin:0; max-width:100%; overflow-x:hidden; }
body { font-family:var(--f-body); color:var(--c-text); background:var(--c-paper); line-height:1.6; -webkit-font-smoothing:antialiased; }
.qx-heading { font-family:var(--f-display); font-weight:300; color:var(--c-headland-deep); line-height:1.15; margin:0; }
.qx-text { margin:0; }
.qx-link { color:inherit; }

/* ════════════════════════════════════════════════════════════ SLIM HEADER */
.seaside-header {
  background:rgba(254,250,245,0.96); border-bottom:1px solid var(--c-rule);
  padding-block:0.85rem; padding-inline:max(1.5rem, calc((100% - 80rem) / 2)); gap:1.5rem;
}
.seaside-mark { text-decoration:none; display:inline-flex; align-items:baseline; gap:0.55rem; }
.wm-script { font-family:var(--f-display); font-style:italic; font-weight:400; font-size:1.4rem; line-height:1; color:var(--c-headland-deep); }
.wm-caps { display:inline-flex; align-items:center; gap:0.45em; }
.wm-word { font-family:var(--f-display); font-weight:300; text-transform:uppercase; letter-spacing:0.26em; font-size:0.78rem; line-height:1; color:var(--c-headland); }
.wm-dot { width:6px; height:6px; min-width:6px; border-radius:50%; background:var(--c-daymark-red); box-shadow:0 0 0 2.5px rgba(255,255,255,0.9); align-self:center; }
.seaside-nav { gap:1.75rem; }
.seaside-navlink { position:relative; font-family:var(--f-body); font-size:0.82rem; font-weight:500; text-transform:uppercase; letter-spacing:0.06em; color:var(--c-muted); text-decoration:none; transition:color .2s; }
.seaside-navlink:hover { color:var(--c-text); }
/* active page — subtle "you are here": deeper text + a short daymark-red underline */
.seaside-navlink.qx-link--active { color:var(--c-headland-deep); }
.seaside-navlink.qx-link--active::after { content:""; position:absolute; left:0; right:0; bottom:-0.45rem; height:2px; background:var(--c-daymark-red); border-radius:1px; }
.seaside-cta-mini { font-family:var(--f-body); font-size:0.78rem; font-weight:600; text-transform:uppercase; letter-spacing:0.06em; color:var(--c-cream); background:var(--c-daymark-red); padding:0.5rem 1.2rem; border-radius:999px; text-decoration:none; transition:background .2s; }
.seaside-cta-mini:hover { background:var(--c-daymark-deep); }
@media (max-width:720px){
  /* Logo stays top-left; the nav (links + Book pill) wraps onto its own centered
     row so Cottage/Location stay reachable on a phone — no JS menu needed. */
  .seaside-header{ flex-wrap:wrap; row-gap:0.7rem; }
  .seaside-nav{ flex-basis:100%; flex-wrap:wrap; justify-content:center; gap:0.6rem 1.3rem; }
  .seaside-navlink{ font-size:0.8rem; }
}

/* ════════════════════════════════════════════════════════════ HERO */
.seaside-hero {
  min-height:82svh; min-height:82vh; padding:2rem 1.5rem 4rem; text-align:center; color:#fff;
  background:linear-gradient(180deg,
    var(--c-sky-top) 0%, var(--c-sky-mid) 28%, var(--c-sky-low) 52%,
    var(--c-sky-horizon) 63%, var(--c-sea-shallow) 70%, var(--c-sea-mid) 83%, var(--c-sea-deep) 94%);
}
.hero-script { font-family:var(--f-display); font-style:italic; font-weight:300; font-size:clamp(4rem,13vw,10rem); color:var(--c-cream); line-height:1; margin-bottom:0.1em; text-shadow:0 4px 28px rgba(15,30,50,0.25); }
.hero-caps { display:inline-flex; align-items:center; gap:0.5em; }
.hero-cap { font-family:var(--f-display); font-weight:300; text-transform:uppercase; letter-spacing:0.5em; font-size:clamp(0.95rem,2.2vw,1.5rem); color:#fff; text-shadow:0 2px 16px rgba(15,30,50,0.3); }
.hero-dot { width:0.5em; height:0.5em; min-width:10px; border-radius:50%; background:var(--c-daymark-red); box-shadow:0 0 0 0.16em rgba(255,255,255,0.85); align-self:center; }
.hero-bar { width:clamp(60px,8vw,100px); height:1px; background:rgba(255,255,255,0.6); margin:1.5rem auto 0; }
.hero-sub { font-family:var(--f-display); font-style:italic; font-weight:400; font-size:clamp(1rem,1.6vw,1.35rem); letter-spacing:0.05em; color:rgba(255,255,255,0.92); margin-top:1.5rem; max-width:44ch; text-shadow:0 2px 12px rgba(15,30,50,0.35); }

/* ════════════════════════════════════════════════════════════ SECTIONS */
.seaside-section { padding:5rem 1.5rem; }
.seaside-section.bg-paper-deep { background:var(--c-paper-deep); }
.seaside-section.bg-headland { background:var(--c-headland-deep); color:var(--c-cream); }
/* bg-headland CTA bands always abut the same-colour footer — trim the bottom
   so the CTA and footer don't read as one dark zone with a yawning gap. */
.seaside-section.bg-headland { padding-bottom:3rem; }
.seaside-container { max-width:64rem; margin:0 auto; width:100%; }
.seaside-container.narrow { max-width:44rem; }
.seaside-eyebrow { font-family:var(--f-body); font-weight:500; font-size:0.75rem; letter-spacing:0.3em; text-transform:uppercase; color:var(--c-daymark-red); margin-bottom:1.25rem; }
.seaside-eyebrow.muted { color:var(--c-meta); }
.seaside-h2 { font-family:var(--f-display); font-weight:300; font-style:italic; font-size:clamp(2rem,4vw,3rem); line-height:1.15; color:var(--c-headland-deep); margin-bottom:1.25rem; }
.bg-headland .seaside-h2 { color:var(--c-cream); }
.seaside-pull { font-family:var(--f-display); font-weight:300; font-style:italic; font-size:clamp(1.6rem,3.6vw,2.4rem); color:var(--c-headland-deep); line-height:1.35; max-width:34ch; margin:0 auto 1.5rem; }
.seaside-body { color:var(--c-muted); font-size:1.05rem; line-height:1.75; max-width:60ch; }
.seaside-body + .seaside-body { margin-top:1rem; }
.text-center { text-align:center; }

/* pillars (grid — authored WITHOUT direction so this display wins) */
.seaside-features { display:grid; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); gap:3rem; margin-top:3.5rem; }
.seaside-feature { text-align:center; }
.feature-num { font-family:var(--f-display); font-weight:300; font-style:italic; font-size:2.2rem; color:var(--c-daymark-red); line-height:1; margin-bottom:0.4rem; }
.feature-h { font-family:var(--f-display); font-weight:400; font-size:1.35rem; letter-spacing:0.04em; color:var(--c-headland-deep); margin-bottom:0.6rem; }
.feature-p { color:var(--c-muted); font-size:0.95rem; line-height:1.65; }

/* facts row */
.seaside-facts { display:grid; grid-template-columns:repeat(auto-fit,minmax(8rem,1fr)); gap:1.5rem; margin:2.5rem auto 0; max-width:44rem; }
.seaside-fact { text-align:center; }
.fact-n { font-family:var(--f-display); font-weight:300; font-style:italic; font-size:2.5rem; line-height:1; color:var(--c-daymark-red); }
.fact-l { font-size:0.72rem; text-transform:uppercase; letter-spacing:0.15em; color:var(--c-muted); font-weight:500; margin-top:0.5rem; }

/* CTA button */
.seaside-cta { display:inline-block; margin-top:2rem; padding:0.85rem 2.25rem; background:var(--c-daymark-red); color:var(--c-cream); border-radius:999px; text-decoration:none; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; font-size:0.82rem; transition:background .2s; }
.seaside-cta:hover { background:var(--c-daymark-deep); }
.bg-headland .seaside-cta { background:var(--c-cream); color:var(--c-headland-deep); }

/* ════════════════════════════════════════════════════════════ FOOTER */
.seaside-footer { background:var(--c-headland-deep); color:#cbd5e1; padding:3rem 1.5rem 3rem; text-align:center; }
.footer-script { font-family:var(--f-display); font-style:italic; font-weight:300; font-size:clamp(2.5rem,6vw,3.5rem); color:var(--c-cream); line-height:1; }
.footer-caps { display:inline-flex; align-items:center; gap:0.45em; margin-top:0.2rem; }
.footer-cap { font-family:var(--f-display); font-weight:300; text-transform:uppercase; letter-spacing:0.4em; font-size:0.8rem; color:#cbd5e1; }
.footer-dot { width:6px; height:6px; min-width:6px; border-radius:50%; background:var(--c-daymark-red); box-shadow:0 0 0 2px rgba(255,255,255,0.8); align-self:center; }
.footer-meta { margin-top:2rem; color:#94a3b8; font-size:0.85rem; letter-spacing:0.08em; }
.footer-nav { gap:1.5rem; margin-top:1.75rem; }
.footer-link { color:#94a3b8; text-decoration:none; letter-spacing:0.06em; text-transform:uppercase; font-size:0.8rem; font-weight:500; }
.footer-link:hover { color:var(--c-cream); }
.footer-copy { margin-top:2.5rem; font-size:0.72rem; color:#64748b; letter-spacing:0.05em; }
.footer-legal { gap:0.6rem; margin-top:0.9rem; }
.footer-legal-link { color:#64748b; text-decoration:none; font-size:0.72rem; letter-spacing:0.05em; }
.footer-legal-link:hover { color:#cbd5e1; text-decoration:underline; }
.footer-legal-sep { color:#475569; font-size:0.72rem; }

/* Legal documents (privacy / terms) — readable left-aligned prose page. */
.legal-doc { text-align:left; }
.legal-doc .seaside-body { max-width:none; }
.legal-updated { color:var(--c-muted); font-size:0.85rem; margin-bottom:1.75rem; }
.legal-h { font-family:var(--f-display); font-weight:300; font-style:italic; font-size:1.5rem; color:var(--c-headland-deep); margin:2.25rem 0 0.6rem; }

/* ════════════════════════════════════════════════════════════ INNER-PAGE BANNER */
.page-top { background:var(--c-headland-deep); color:var(--c-cream); padding:7rem 1.5rem 4rem; text-align:center; }
.page-top-eyebrow { font-family:var(--f-body); font-size:0.75rem; letter-spacing:0.3em; text-transform:uppercase; color:var(--c-meta); margin-bottom:1rem; }
.page-top-title { font-family:var(--f-display); font-weight:300; font-style:italic; font-size:clamp(2.5rem,6vw,4.5rem); line-height:1.05; color:var(--c-cream); margin-bottom:0.75rem; }
.page-top-lede { font-family:var(--f-display); font-weight:300; font-size:clamp(1.05rem,2vw,1.4rem); letter-spacing:0.04em; color:rgba(254,249,214,0.82); max-width:40ch; margin:0 auto; }

/* ════════════════════════════════════════════════════════════ PHOTO FEATURES */
.photo-feature { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center; margin:4rem auto; max-width:64rem; width:100%; }
.photo-feature .qx-image { width:100%; aspect-ratio:16/13; object-fit:cover; border-radius:4px; box-shadow:0 1rem 2.5rem rgba(30,41,59,0.16); }
.photo-feature.reverse .pf-media { order:2; }
.pf-h { font-family:var(--f-display); font-weight:400; font-size:clamp(1.5rem,2.5vw,2rem); color:var(--c-headland-deep); margin-bottom:1rem; letter-spacing:0.02em; }
@media (max-width:720px){ .photo-feature{ grid-template-columns:1fr; gap:1.5rem; margin:2.5rem auto; } .photo-feature.reverse .pf-media{ order:0; } }

/* ════════════════════════════════════════════════════════════ AMENITIES (two-col) */
.amenities { columns:2; column-gap:3rem; max-width:44rem; margin:2.5rem auto 0; }
.amenity { padding:0.6rem 0 0.6rem 1.4rem; position:relative; color:var(--c-muted); border-bottom:1px solid var(--c-rule); break-inside:avoid; }
.amenity::before { content:"·"; color:var(--c-daymark-red); position:absolute; left:0; font-size:1.5rem; line-height:1.05; font-weight:700; }
@media (max-width:600px){ .amenities{ columns:1; } }

/* loading placeholder */
.qx-ready .qx-loading { display:none; }

/* ════════════════════════════════════════════════════════════ BOOKING CARD (book page) */
.booking-card { background:var(--c-paper); border:1px solid var(--c-rule); border-radius:8px; padding:3rem 2rem; text-align:center; margin:0 auto; max-width:32rem; box-shadow:0 12px 40px rgba(15,30,50,0.06); }
.availability-status { display:inline-block; padding:0.4rem 1rem; background:rgba(34,197,94,0.12); color:#15803d; border-radius:999px; font-size:0.8rem; letter-spacing:0.1em; text-transform:uppercase; font-weight:600; margin-bottom:1.5rem; }
.availability-status::before { content:"●"; color:#22c55e; margin-right:0.4em; }
.phone-label { margin-top:1.5rem; font-size:0.8rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--c-meta); }
.phone-num { display:inline-block; margin-top:0.3rem; font-family:var(--f-display); font-weight:400; font-size:clamp(2.25rem,4.5vw,3rem); color:var(--c-headland-deep); text-decoration:none; letter-spacing:0.01em; }
.phone-num:hover { color:var(--c-daymark-red); }

/* ════════════════════════════════════════════════════════════ MAP (embed.map) */
.seaside-map { display:block; margin-top:2.5rem; }
.qx-map { display:block; border-radius:6px; overflow:hidden; box-shadow:0 1rem 2.5rem rgba(30,41,59,0.16); }
.qx-map-img { width:100%; height:auto; display:block; }
.qx-map--placeholder { display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,var(--c-sky-low),var(--c-sea-shallow)); color:var(--c-cream); text-decoration:none; font-family:var(--f-body); font-size:0.85rem; letter-spacing:0.08em; text-transform:uppercase; }
.qx-map--placeholder .qx-map-ph { position:relative; padding-left:1.4rem; }
.qx-map--placeholder .qx-map-ph::before { content:"●"; color:var(--c-daymark-red); position:absolute; left:0; top:0; }
.qx-map--interactive { background:var(--c-sky-low); }
.qx-map--interactive .qx-map-ph { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--c-cream); text-decoration:none; font-family:var(--f-body); font-size:0.85rem; letter-spacing:0.08em; text-transform:uppercase; }

/* location page — the property address (small, muted; the only place the historic
   name "The Old School House" appears, as a parenthetical) */
.seaside-addr { margin-top:1.75rem; margin-bottom:0; font-size:0.82rem; letter-spacing:0.04em; color:var(--c-meta); }
.seaside-addr + .seaside-body { margin-top:0.35rem; font-size:0.85rem; }

/* ── Booking request component (seaside.booking-request) ──────────────── */
.booking-dates { margin: 0 0 0.25rem; }
.booking-dates-range { font-size: 1.1rem; }
.booking-date { color: var(--qx-accent, #2b6cb0); }

/* The card centres its prose; the form itself reads better full-width and
   left-aligned. Scope qx-form overrides to the booking card so the generic
   form styling (blocks.css) is untouched elsewhere. */
.booking-request .booking-form { width: 100%; max-width: 26rem; margin: 0.5rem auto 0; text-align: left; }
.booking-request .qx-form { gap: 1rem; }
.booking-request .qx-form__submit {
    margin-top: 0.5rem;
    align-self: stretch;
    padding: 0.85rem 1.5rem;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #fff;
    background: var(--c-headland, #2b5366);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s ease;
}
.booking-request .qx-form__submit:hover { background: var(--c-accent, #1f3f4f); }

.booking-error { margin: 0.75rem 0 0; color: #9a2c2c; font-size: 0.9rem; }

.booking-sent { margin: 0.5rem 0; }
.booking-sent .seaside-h2 { color: var(--c-headland, #2b5366); }

.booking-fallback { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--c-rule, #e7ded2); }
.booking-fallback .seaside-body { margin: 0 0 0.25rem; font-size: 0.9rem; color: var(--c-meta, #6b6356); }