/*
Theme Name: Winterfell
Theme URI: https://homestaymukteshwar.com
Author: Marketing Mojito
Description: Editorial theme for Cottage Winterfell, a homestay in Mukteshwar, Uttarakhand.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: winterfell
*/

:root {
  /* Palette — fused with the Tengile MalaMala reference. Paper and mist were
     already within 2 points of the reference's, so they carry over untouched;
     the dark warms from blue-leaning pine to forest-olive, and ember stays as
     the single warm accent the reference does not have. */
  --cream: #F7F4EC;
  --paper: #FBF8F6;
  --ink: #26301F;
  --ink-soft: #5A6150;
  --pine: #3B4632;
  --pine-deep: #26301F;
  --moss: #5C6E21;
  --ember: #B4542A;
  --mist: #E4DFD3;
  --line: #D3CDBE;

  --shell: 1440px;
  --pad-x: 48px;
  --sec-y: 112px;
  --sec-y-tight: 72px;
  --nav-h: 88px;

  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans: "Karla", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --display: "Cormorant Garamond", Georgia, "Times New Roman", serif;

  --ease: cubic-bezier(.22, 1, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--ink); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--ember); }

/* Display is set the way the reference sets it: light weight, uppercase,
   tracked tight, on a near-1 line-height. That combination is what reads as
   restraint rather than volume. */
h1, h2, h3, h4 {
  font-family: var(--display); font-weight: 600; line-height: 1.04;
  letter-spacing: -0.008em; text-transform: uppercase; margin: 0;
}

p { margin: 0 0 1.2em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

::selection { background: var(--ember); color: var(--paper); }

/* ---------- layout ---------- */
.shell { max-width: var(--shell); margin: 0 auto; padding: 0 var(--pad-x); }
.section { padding: var(--sec-y) 0; }
/* Not every section gets the same air — the gallery runs tighter at the top
   because the marquee below it supplies its own breathing room. */
.section-tight { padding: var(--sec-y-tight) 0 calc(var(--sec-y-tight) + 24px); }
.rule { height: 1px; background: var(--line); border: 0; margin: 0; }

/* ---------- type helpers ---------- */
/* 0.08em, not the old 0.28em: contemporary without collapsing. Karla is a
   narrow face and goes cramped at the reference's own -0.01em. */
.over {
  font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  font-weight: 500; color: var(--ember); margin: 0 0 20px;
}
/* Only the hero gets display scale. Everything below steps down hard — that
   gap is where the reference spends its impact. */
.disp-xl { font-size: clamp(42px, 8.2vw, 118px); line-height: 0.9; }
.disp-l  { font-size: clamp(30px, 3.6vw, 46px); line-height: 1.02; }
.disp-m  { font-size: clamp(24px, 2.4vw, 30px); line-height: 1.04; }
/* Headlines are monochrome in this direction; the span stays for the markup's
   sake but carries no treatment of its own. */
.ital { font-style: normal; color: inherit; }
.lead { font-size: clamp(17px, 1.4vw, 19px); line-height: 1.75; color: var(--ink-soft); }
.body-m { font-size: 15px; line-height: 1.7; color: var(--ink-soft); }
.num { font-family: var(--serif); font-size: 18px; letter-spacing: 0.04em; color: var(--ember); }
/* The inline figure at the end of a list row stays quiet — it is a tally, not a section index. */
.row-item .num { font-size: 13px; color: var(--ink-soft); letter-spacing: 0; }

/* ---------- buttons ---------- */
.btn, .btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 52px; padding: 0 34px; border-radius: 999px; border: 1px solid transparent;
  font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600;
  white-space: nowrap;
  font-family: var(--sans); cursor: pointer; transition: background .2s ease, color .2s ease, border-color .2s ease;
}

/* Secondary actions are typographic, not pills — the reference never stacks
   two filled buttons where a rule-underlined link will do. */
.tlink {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600;
  padding-bottom: 7px; border-bottom: 1px solid currentColor;
}
.tlink:hover { color: var(--ember); }
.btn { background: var(--ink); color: var(--cream); }
.btn:hover { background: var(--ember); color: var(--cream); }
.btn-light { background: var(--cream); color: var(--ink); }
.btn-light:hover { background: var(--ember); color: var(--cream); }
/* Must reset the background: .btn-ghost is used alongside .btn, whose ink fill
   would otherwise make the "ghost" a second solid pill. */
.btn-ghost { background: transparent; border-color: rgba(247,244,236,0.5); color: var(--cream); }
.btn-ghost:hover { background: var(--cream); color: var(--ink); }
.btn-sm { padding: 12px 24px; }

/* ---------- header ----------
   Transparent over the hero, solidifying past 80px. Every template in this
   theme opens with a full-bleed image, so the transparent state is always
   over photography and never over paper. */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: transparent; border-bottom: 1px solid transparent;
  transition: background .35s var(--ease), border-color .35s var(--ease);
}
.site-header.is-solid {
  background: rgba(247,244,236,0.95);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-bottom-color: var(--line);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; height: var(--nav-h); gap: 24px; }
.brand { display: flex; align-items: center; }
.brand img {
  height: 46px; width: auto;
  filter: brightness(0) invert(1);
  transition: filter .35s var(--ease);
}
.is-solid .brand img { filter: none; }

.nav-main { display: flex; align-items: center; gap: 38px; }
.nav-main ul { display: flex; align-items: center; gap: 38px; list-style: none; margin: 0; padding: 0; }
.nav-main a { font-size: 13px; letter-spacing: 0.04em; font-weight: 500; color: var(--cream); }
.nav-main a:hover, .nav-main .current-menu-item > a { color: var(--ember); }
.is-solid .nav-main a { color: var(--ink); }
.is-solid .nav-main a:hover, .is-solid .nav-main .current-menu-item > a { color: var(--ember); }
/* The header CTA inverts with the bar so it never sits paper-on-paper. */
.nav-main .btn { background: var(--cream); color: var(--ink); }
.nav-main .btn:hover { background: var(--ember); color: var(--cream); }
.is-solid .nav-main .btn { background: var(--ink); color: var(--cream); }
.is-solid .nav-main .btn:hover { background: var(--ember); }

.nav-toggle { display: none; background: none; border: 0; padding: 8px; cursor: pointer; }
.nav-toggle span { display: block; width: 24px; height: 1.5px; background: var(--cream); margin: 5px 0; transition: transform .25s ease, opacity .2s ease, background-color .35s var(--ease); }
.is-solid .nav-toggle span, .nav-open .nav-toggle span { background: var(--ink); }
.nav-open .nav-toggle span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ---------- hero ---------- */
.hero { position: relative; min-height: clamp(560px, 88vh, 860px); display: flex; overflow: hidden; }
.hero-media { position: absolute; inset: -6% 0; overflow: hidden; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
/* The headline sits low in the frame, over foliage that can be bright. The
   scrim stays light through the upper third and then carries real weight from
   the midpoint down, where the type actually lands. */
.hero-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(20,26,16,0.58) 0%,
    rgba(20,26,16,0.34) 15%,
    rgba(20,26,16,0.80) 42%,
    rgba(20,26,16,0.92) 100%);
}
.hero-inner {
  position: relative; z-index: 2; width: 100%;
  display: flex; flex-direction: column; justify-content: space-between;
  padding-top: calc(var(--nav-h) + 28px); padding-bottom: 64px;
}

/* Split-text reveal. Each line is masked by its own overflow-hidden wrapper,
   so the type rises out of nothing rather than fading in place. */
.hero h1 .line { display: block; overflow: hidden; }
.hero h1 .line > span { display: block; }
/* Scoped to .js: with scripting off the headline simply renders in place. */
@media (prefers-reduced-motion: no-preference) {
  .js .hero h1 .line > span { transform: translateY(100%); transition: transform .9s var(--ease); }
  .js .hero.is-in h1 .line > span { transform: none; }
  .js .hero h1 .line:nth-child(2) > span { transition-delay: .09s; }
  .js .hero h1 .line:nth-child(3) > span { transition-delay: .18s; }
}
.hero-rating { display: flex; align-items: center; gap: 12px; color: var(--cream); }
.hero-bottom { display: block; }
/* Lead and buttons share a row beneath the headline — never beside it. */
.hero-foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 64px; margin-top: 30px; }
.hero h1 { color: var(--cream); }
.hero .over { color: rgba(247,244,236,0.8); }
.hero .lead { color: rgba(247,244,236,0.88); max-width: 470px; margin: 0; }
.hero-actions { display: flex; gap: 14px; padding-bottom: 6px; }
.stars { color: var(--ember); letter-spacing: 0.16em; font-size: 13px; }

/* ---------- page hero (interior pages) ---------- */
.page-hero { position: relative; min-height: 460px; display: flex; align-items: flex-end; overflow: hidden; }
.page-hero .hero-media img { width: 100%; height: 100%; object-fit: cover; }
/* Clears the fixed header even when the hero is at its shortest. */
.page-hero-inner { position: relative; z-index: 2; width: 100%; padding-top: calc(var(--nav-h) + 40px); padding-bottom: 64px; }
.page-hero h1 { color: var(--paper); }
.page-hero .over { color: rgba(253,251,246,0.82); }
.crumb { font-size: 12px; letter-spacing: 0.1em; color: rgba(253,251,246,0.7); margin-bottom: 14px; }
.crumb a { color: rgba(253,251,246,0.7); }
.crumb a:hover { color: var(--paper); }

/* ---------- split ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.split-imgs { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.split-imgs img { width: 100%; height: 400px; object-fit: cover; }
/* The 72px offset is structural, not decorative — it is what stops a paired
   image block reading as a plain two-up grid. */
.split-imgs img:first-child { margin-top: 72px; }
.split figure { margin: 0; }
.split figure img { width: 100%; height: 520px; object-fit: cover; }

/* ---------- amenities ---------- */
.band-paper { background: var(--mist); }
.sec-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 48px; margin-bottom: 48px; }
.sec-head > div { max-width: 720px; }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; align-items: start; }
.card img { width: 100%; height: 440px; object-fit: cover; }
/* Middle card drops — same reason as the split images. */
.cards .card:nth-child(2) { margin-top: 72px; }
.card h3 { font-size: clamp(22px, 2.1vw, 28px); margin: 0 0 14px; }
.card .num { display: block; margin: 22px 0 10px; }

/* ---------- gallery marquee ----------
   Replaces the old 4-column grid. Duplicated track scrolls continuously and
   pauses on hover or keyboard focus; it also drag-scrolls, so the animation is
   an invitation rather than the only way through. */
#gallery { scroll-margin-top: calc(var(--nav-h) + 16px); }
.marquee {
  overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; cursor: grab;
  /* Native momentum on touch; the JS drag handles mouse only. */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.marquee::-webkit-scrollbar { display: none; }
/* Without this a mouse drag selects the surrounding text and fights the gesture. */
.marquee.is-dragging { cursor: grabbing; user-select: none; -webkit-user-select: none; }
.marquee-track { display: flex; gap: 16px; width: max-content; padding-left: var(--pad-x); }
.marquee-track .tile { display: block; overflow: hidden; flex: none; width: 380px; height: 490px; }
.marquee-track img {
  width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease);
  /* Stops the browser's native image-drag ghost from hijacking a scroll drag. */
  user-select: none; -webkit-user-drag: none;
}
.marquee-track .tile:hover img { transform: scale(1.04); }
@media (prefers-reduced-motion: no-preference) {
  .marquee-track { animation: winterfell-marquee 40s linear infinite; }
  .marquee:hover .marquee-track,
  .marquee:focus-within .marquee-track,
  .marquee.is-dragging .marquee-track { animation-play-state: paused; }
  /* Once the visitor steers it themselves, the auto-scroll stops for good —
     otherwise the animation keeps translating under their scroll position and
     fights them. */
  .marquee.is-manual .marquee-track { animation: none; }
}

/* Same circular control as the reviews carousel, on a light surface. */
.marquee-nav { display: flex; align-items: center; gap: 12px; flex: none; }
.marquee-nav button {
  width: 44px; height: 44px; border-radius: 999px; cursor: pointer;
  background: none; border: 1px solid var(--line); color: var(--ink);
  font-size: 15px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.marquee-nav button:hover { background: var(--ink); color: var(--cream); border-color: var(--ink); }
/* Half the duplicated track, plus the gap that follows its last item. */
@keyframes winterfell-marquee {
  to { transform: translateX(calc(-50% - 8px)); }
}

/* ---------- reviews carousel ---------- */
.quote-stage { display: grid; grid-template-columns: 1fr auto; gap: 80px; align-items: end; }
/* Stacking every slide in one grid cell fixes the stage to the tallest quote,
   so a short review no longer collapses the section around it. */
.quote-slides { display: grid; }
.quote-slide {
  grid-area: 1 / 1; margin: 0;
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .5s var(--ease), transform .5s var(--ease), visibility 0s linear .5s;
}
.quote-slide.is-active {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .5s var(--ease), transform .5s var(--ease), visibility 0s;
}
.review-avatar {
  width: 56px; height: 56px; border-radius: 999px; object-fit: cover; flex: none;
}
.review-meta { display: flex; flex-direction: column; gap: 5px; }
.quote-nav { display: flex; align-items: center; gap: 20px; color: rgba(247,244,236,0.65); font-size: 13px; }
.quote-nav button {
  width: 42px; height: 42px; border-radius: 999px; cursor: pointer;
  background: none; border: 1px solid rgba(247,244,236,0.35); color: var(--cream);
  font-size: 15px; line-height: 1; transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.quote-nav button:hover { background: var(--cream); color: var(--ink); border-color: var(--cream); }
.quote-count { font-variant-numeric: tabular-nums; letter-spacing: 0.1em; }

/* ---------- reviews ---------- */
.band-dark { background: var(--pine-deep); color: var(--cream); }
.band-dark h2 { color: var(--cream); }
.band-dark .lead, .band-dark .body-m { color: rgba(247,244,236,0.72); }
.band-dark a { color: var(--cream); }
.band-dark a:hover { color: var(--ember); }
.review-head { display: flex; align-items: center; gap: 16px; }
.review-score { font-size: 13px; color: rgba(247,244,236,0.72); }
/* Italic is legitimate here — this is a pulled quote, not a heading. */
.quote {
  font-family: var(--serif); font-size: clamp(21px, 2.6vw, 34px); font-weight: 300;
  line-height: 1.42; font-style: italic; color: var(--cream);
  margin: 0 0 34px; max-width: 900px; text-transform: none; letter-spacing: 0;
}
.who { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; color: rgba(247,244,236,0.65); }

/* ---------- interior page components ----------
   Rooms, places and activities all reuse .split / .cards so the interior pages
   read as the same system as the home page rather than a second design. */
.split.is-flipped > :first-child { order: 2; }
.place { padding: 56px 0; border-top: 1px solid var(--line); }
.place:first-of-type { border-top: 0; padding-top: 0; }
.place figure { margin: 0; }
.place figure img, .split figure img { width: 100%; height: 520px; object-fit: cover; }

.cards-4 { grid-template-columns: repeat(4, 1fr); gap: 28px; }
.cards-4 .card { margin-top: 0 !important; }
.cards-4 .card img { height: 300px; }

.amenities {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 28px;
}
.amenity { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.amenity img { width: 44px; height: 44px; object-fit: contain; filter: brightness(0) invert(1); opacity: .85; }
.amenity span { font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(247,244,236,0.78); }

/* Native disclosure — no JS, keyboard-operable for free. */
.faqs { border-top: 1px solid var(--line); max-width: 900px; }
.faq { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; padding: 22px 0;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  font-size: 17px; color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 22px; line-height: 1; color: var(--ink-soft); transition: transform .25s var(--ease); }
.faq[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--ember); }
.faq p { padding: 0 0 24px; max-width: 78ch; }

.routes { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; }
.route-steps { list-style: none; margin: 0 0 28px; padding: 0; counter-reset: step; }
.route-steps li {
  counter-increment: step; position: relative; padding: 0 0 26px 44px; font-size: 16px;
}
.route-steps li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute; left: 0; top: 1px;
  font-family: var(--serif); font-size: 13px; color: var(--ember);
}
/* The rule joins each step to the next; the last step ends the line. */
.route-steps li::after {
  content: ""; position: absolute; left: 8px; top: 22px; bottom: 4px; width: 1px; background: var(--line);
}
.route-steps li:last-child { padding-bottom: 0; }
.route-steps li:last-child::after { display: none; }
.route-note { margin-bottom: 14px; }

/* ---------- list rows ---------- */
.rows { margin-bottom: 36px; }
.row-item { display: flex; align-items: center; justify-content: space-between; padding: 18px 0; }
.row-item span:first-child { font-size: 16px; }

/* ---------- CTA ---------- */
.cta { position: relative; min-height: 520px; display: flex; align-items: center; overflow: hidden; }
.cta .hero-media img { width: 100%; height: 100%; object-fit: cover; }
.cta-scrim { position: absolute; inset: 0; background: rgba(38,48,31,0.74); }
.cta-inner { position: relative; z-index: 2; width: 100%; text-align: center; }
.cta h2 { color: var(--cream); margin-bottom: 40px; }
.cta .over { color: rgba(247,244,236,0.8); }
.cta-actions { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; }

/* ---------- footer ---------- */
.site-footer { background: var(--paper); border-top: 1px solid var(--line); }
/* The footer wordmark sits under the crest; the header shows the crest alone. */
.site-footer .brand-name {
  font-family: var(--display); font-weight: 300; text-transform: uppercase;
  letter-spacing: -0.01em; line-height: 1;
}
.footer-grid { display: grid; grid-template-columns: 2.2fr 1fr 1fr 1.3fr; gap: 56px; padding-top: 88px; }
.footer-col { display: flex; flex-direction: column; gap: 13px; }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 13px; }
.footer-col a, .footer-col li a { font-size: 14px; color: var(--ink-soft); }
.footer-col a:hover { color: var(--ember); }
.footer-head { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; color: var(--ink-soft); margin-bottom: 9px; }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 26px 0 44px; }
.footer-bottom span { font-size: 12px; color: var(--ink-soft); }
/* Agency credit — sits in the bottom bar, deliberately quieter than the
   client's own copyright. */
.credit { font-size: 12px; color: var(--ink-soft); }
.credit a { color: var(--ink-soft); border-bottom: 1px solid var(--line); padding-bottom: 1px; }
.credit a:hover { color: var(--ember); border-bottom-color: var(--ember); }
.credit .heart { color: var(--ember); font-size: 13px; }
.socials { display: flex; align-items: center; gap: 20px; }
.socials a { font-size: 12px; }

/* ---------- article / editor content ---------- */
.entry { max-width: 760px; margin: 0 auto; }
.entry h2 { font-size: clamp(30px, 3.4vw, 42px); margin: 56px 0 20px; }
.entry h3 { font-size: clamp(24px, 2.6vw, 30px); font-weight: 400; margin: 42px 0 16px; }
.entry h4 { font-size: 22px; font-weight: 500; margin: 32px 0 12px; }
/* Elementor sets colour on the widget container, so a rule on the descendant
   <p> would win and blank out light-on-photo sections. Article defaults apply
   to real article content only. */
body:not(.elementor-page) .entry p,
body:not(.elementor-page) .entry li { font-size: 17px; line-height: 1.8; color: var(--ink-soft); }
body:not(.elementor-page) .entry a { color: var(--ember); text-decoration: underline; text-underline-offset: 3px; }
.entry ul, .entry ol { padding-left: 22px; margin: 0 0 1.4em; }
.entry li { margin-bottom: 8px; }
.entry img { margin: 32px 0; }
.entry blockquote {
  margin: 36px 0; padding-left: 28px; border-left: 2px solid var(--ember);
  font-family: var(--serif); font-style: italic; font-size: 22px; line-height: 1.5; color: var(--ink);
}
.entry table { width: 100%; border-collapse: collapse; margin: 32px 0; }
.entry th, .entry td { border-bottom: 1px solid var(--line); padding: 12px 10px; text-align: left; font-size: 15px; }
.entry figure { margin: 32px 0; }
.entry figcaption { font-size: 13px; color: var(--ink-soft); margin-top: 10px; }

/* ---------- posts index ---------- */
.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px 34px; }
.post-card img { width: 100%; height: 300px; object-fit: cover; }
.post-card h2 { margin-bottom: 12px; }
.post-meta { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); margin: 22px 0 10px; }

/* Long-form runs narrower and looser than the marketing pages. */
.entry .post-nav { display: flex; justify-content: space-between; gap: 28px; border-top: 1px solid var(--line); padding-top: 22px; }
.entry .post-nav a {
  font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600;
  display: inline-flex; align-items: center; gap: 10px; max-width: 46%;
}
.entry .post-nav a:hover { color: var(--ember); }
.pagination { margin-top: 64px; display: flex; justify-content: center; }
.pagination .nav-links { display: flex; gap: 10px; align-items: center; }
.pagination .page-numbers {
  min-width: 42px; height: 42px; padding: 0 12px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); font-size: 13px;
}
.pagination .page-numbers.current { background: var(--ink); color: var(--cream); border-color: var(--ink); }

/* ---------- contact / info cards ---------- */
.info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; margin-bottom: 64px; }
.info-card { background: var(--paper); border: 1px solid var(--line); padding: 36px 32px; }
.info-card h3 { font-size: 22px; font-weight: 500; margin-bottom: 12px; }
.info-card p, .info-card a { font-size: 15px; color: var(--ink-soft); line-height: 1.7; }
.info-card a:hover { color: var(--ember); }

.map-embed { border: 1px solid var(--line); overflow: hidden; line-height: 0; }
.map-embed iframe { width: 100%; height: 420px; border: 0; display: block; }

/* ---------- booking + forms (plugin output restyle) ---------- */
.booking-shell { background: var(--paper); border: 1px solid var(--line); padding: 44px; }

/* WP Booking System renders one wrapper holding the calendar then the form. */
.booking-shell .wpbs-main-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.booking-shell .wpbs-container, .booking-shell .wpbs-form-container { min-width: 0; }
.wpbs-calendar, .wpbs-calendar * { font-family: var(--sans) !important; }
.wpbs-calendar-header select { font-family: var(--sans); padding: 8px 10px; border: 1px solid var(--line); background: var(--cream); }
.wpbs-calendars, .wpbs-calendar { width: 100%; }

.wpbs-form-field { margin-bottom: 20px; }
/* Tracking eases off as the size goes up — 0.18em was set for 11px and sprawls
   at 14px. */
.wpbs-form-field-label, .rich-reviews-form label {
  display: block; font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase;
  font-weight: 600; color: var(--ink); margin-bottom: 8px;
}
.wpbs-field-required { color: var(--ember); }
.wpbs-form-field-input input[type="text"], .wpbs-form-field-input input[type="email"],
.wpbs-form-field-input input[type="tel"], .wpbs-form-field-input input[type="number"],
.wpbs-form-field-input select, .wpbs-form-field-input textarea,
.rich-reviews-form input[type="text"], .rich-reviews-form input[type="email"],
.rich-reviews-form select, .rich-reviews-form textarea {
  width: 100%; max-width: none; padding: 14px 16px; border: 1px solid var(--line); background: var(--cream);
  font-family: var(--sans); font-size: 15px; color: var(--ink); border-radius: 2px;
}
.wpbs-form-field-input textarea, .rich-reviews-form textarea { min-height: 120px; resize: vertical; }
.wpbs-form-field-input input:focus, .wpbs-form-field-input select:focus, .wpbs-form-field-input textarea:focus,
.rich-reviews-form input:focus, .rich-reviews-form textarea:focus {
  outline: none; border-color: var(--ember);
}
/* .wpbs-form-submit-button is the wrapper; the control inside it is a <button>. */
.wpbs-form-submit-button { background: none; border: 0; padding: 0; }
/* The plugin ships !important on a 4-class chain, so match its specificity. */
.booking-shell .wpbs-main-wrapper .wpbs-form-container .wpbs-form-field button[type="submit"],
.booking-shell .wpbs-main-wrapper .wpbs-form-container .wpbs-form-field input[type="submit"],
.rich-reviews-form input[type="submit"] {
  width: auto !important; background-color: var(--ink) !important; color: var(--paper) !important;
  border: 0 !important; border-radius: 999px !important;
  padding: 15px 34px !important; font-size: 12px !important; letter-spacing: 0.18em; text-transform: uppercase;
  font-weight: 600 !important; font-family: var(--sans) !important; cursor: pointer;
  line-height: 1.2 !important; height: auto !important; text-shadow: none; box-shadow: none;
  transition: background-color .2s ease;
}
.booking-shell .wpbs-main-wrapper .wpbs-form-container .wpbs-form-field button[type="submit"]:hover,
.booking-shell .wpbs-main-wrapper .wpbs-form-container .wpbs-form-field input[type="submit"]:hover,
.rich-reviews-form input[type="submit"]:hover { background-color: var(--ember) !important; }
/* Rich Reviews renders a table with td headings rather than labels, and its
   stylesheet loads after the theme's — so these selectors match its depth. */
.rich-reviews-form .rr_review_form .form_table { width: 100%; border-collapse: separate; border-spacing: 0 14px; }
.rich-reviews-form .rr_review_form .form_table .rr_form_row .rr_form_heading {
  width: 210px; text-align: left; padding-right: 24px; padding-top: 14px; vertical-align: top;
  font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase;
  font-weight: 600; color: var(--ink);
}
.rich-reviews-form .rr_review_form .form_table .rr_form_row .rr_required::after {
  position: static; color: var(--ember); content: " *";
}
.rich-reviews-form .rr_review_form .form_table .rr_form_row .rr_form_input { width: auto; }
.rich-reviews-form .rr_review_form .form_table .rr_form_row .rr_form_input input[type="text"],
.rich-reviews-form .rr_review_form .form_table .rr_form_row .rr_form_input input[type="email"],
.rich-reviews-form .rr_review_form .form_table .rr_form_row .rr_form_input textarea { width: 100%; }

.rich-reviews-list { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; }
.rich-review { border-top: 1px solid var(--line); padding-top: 22px; }

@media (max-width: 860px) {
  .rich-reviews-form .rr_review_form .form_table,
  .rich-reviews-form .rr_review_form .form_table tbody,
  .rich-reviews-form .rr_review_form .form_table tr,
  .rich-reviews-form .rr_review_form .form_table td { display: block; width: auto; }
  .rich-reviews-form .rr_review_form .form_table .rr_form_row .rr_form_heading {
    width: auto; padding-top: 0; padding-right: 0; margin-bottom: 8px;
  }
}

/* ---------- Elementor pages ----------
   Restyle type and controls only. Colours are left to Elementor: several
   sections put light text over photographs, and forcing a colour here made
   that text unreadable. */
.elementor-page .entry { max-width: none; }
/* Scoped to page.php's own article, never to `.section` at large. Elementor
   tags the <body> of every page it has ever touched — including ones now
   rendered entirely by theme templates — so a blanket rule here silently
   stripped the top padding off almost every section on the site. */
.elementor-page .section-editor { padding-top: 0; }
.elementor-widget-heading .elementor-heading-title {
  font-family: var(--serif) !important; font-weight: 300 !important; letter-spacing: -0.02em !important;
  line-height: 1.08 !important;
}
.elementor-widget-text-editor, .elementor-widget-text-editor p {
  font-family: var(--sans) !important; line-height: 1.8 !important;
}
.elementor-button {
  background-color: var(--ink) !important; color: var(--paper) !important; border-radius: 999px !important;
  font-family: var(--sans) !important; font-size: 12px !important; letter-spacing: 0.18em !important;
  text-transform: uppercase !important; font-weight: 600 !important; padding: 15px 30px !important;
}
.elementor-button:hover { background-color: var(--ember) !important; }

/* ---------- accessibility ---------- */
.screen-reader-text {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(1px,1px,1px,1px); white-space: nowrap;
}
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--ember); outline-offset: 3px;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; background: var(--ink); color: var(--paper);
  padding: 12px 20px; z-index: 999; font-size: 13px;
}
.skip-link:focus { left: 12px; top: 12px; color: var(--paper); }

/* ---------- reveal on scroll ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s var(--ease); }
  .js .reveal.in { opacity: 1; transform: none; }

  /* Siblings arrive in sequence rather than as one block. --i is set by
     theme.js from each element's index within its group. */
  .js .reveal[style*="--i"] { transition-delay: calc(var(--i) * 90ms); }

  /* Row lists tick in one after another. */
  .js .rows .row-item { opacity: 0; transform: translateY(12px); transition: opacity .5s ease, transform .5s var(--ease); }
  .js .rows.in .row-item { opacity: 1; transform: none; }
  .js .rows.in .row-item:nth-child(2) { transition-delay: .08s; }
  .js .rows.in .row-item:nth-child(4) { transition-delay: .16s; }
  .js .rows.in .row-item:nth-child(6) { transition-delay: .24s; }
}

/* Media answers the pointer everywhere, not only in the marquee. */
.card a, .card figure, .split figure, .split-imgs, .post-card a { overflow: hidden; display: block; }
.card img, .split figure img, .post-card img {
  transition: transform .8s var(--ease);
}
.card:hover img, .post-card:hover img { transform: scale(1.03); }

/* The arrow leads on hover; the rule underneath stays put. */
.tlink span, .tlink::after { transition: transform .25s var(--ease); }
.tlink:hover { color: var(--ember); }
.tlink:hover .arw { transform: translateX(5px); }
.arw { display: inline-block; transition: transform .25s var(--ease); }

/* Anchored sections clear the fixed header. */
#write-a-review, #gallery { scroll-margin-top: calc(var(--nav-h) + 16px); }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  :root { --sec-y: 88px; --sec-y-tight: 64px; --pad-x: 32px; }
  .split { gap: 48px; }
  .cards { grid-template-columns: repeat(2, 1fr); gap: 28px; }
  .cards .card:nth-child(2) { margin-top: 0; }
  .post-grid { grid-template-columns: repeat(2, 1fr); }
  .info-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
  .marquee-track a { width: 300px; height: 400px; }
  .quote-stage { grid-template-columns: 1fr; gap: 34px; }
  .cards-4 { grid-template-columns: repeat(2, 1fr); }
  .amenities { grid-template-columns: repeat(4, 1fr); gap: 24px; }
  .routes { grid-template-columns: 1fr; gap: 48px; }
  .place figure img, .split figure img { height: 400px; }
}

@media (max-width: 860px) {
  :root { --pad-x: 20px; --sec-y: 72px; --sec-y-tight: 56px; --nav-h: 64px; }

  .nav-toggle { display: block; }
  .nav-main {
    position: fixed; inset: var(--nav-h) 0 auto 0; background: var(--cream);
    border-bottom: 1px solid var(--line); flex-direction: column; align-items: stretch;
    gap: 0; padding: 12px 20px 26px; display: none;
  }
  .nav-open .nav-main { display: flex; }
  .nav-main ul { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-main li { border-bottom: 1px solid var(--line); }
  /* The sheet is always paper, so its links are always ink regardless of the
     bar's transparent/solid state. */
  .nav-main a, .is-solid .nav-main a { display: block; padding: 15px 0; font-size: 15px; color: var(--ink); }
  .nav-main .btn, .is-solid .nav-main .btn { margin-top: 18px; align-self: stretch; background: var(--ink); color: var(--cream); }

  .brand img { height: 36px; }

  .hero { min-height: 640px; }
  .hero-inner { gap: 24px; padding-bottom: 40px; }
  .hero .over { margin-bottom: 16px; }
  .hero-foot { flex-direction: column; align-items: stretch; gap: 26px; margin-top: 20px; }
  .hero .lead { max-width: none; }
  .hero-actions { flex-direction: column; gap: 11px; padding-bottom: 0; }
  .hero-actions .btn, .hero-actions .btn-ghost { width: 100%; }

  .split { grid-template-columns: 1fr; gap: 34px; }
  .split-imgs img:first-child { margin-top: 0; }
  .split-imgs img { height: 210px; }
  .split-imgs { gap: 12px; }
  .split figure img { height: 380px; }

  .sec-head { flex-direction: column; align-items: flex-start; gap: 22px; margin-bottom: 44px; }
  .cards { grid-template-columns: 1fr; gap: 44px; }
  .card img { height: 330px; }

  /* Flipped splits go back to image-first on mobile; the alternation only
     reads as rhythm when the columns sit side by side. */
  .split.is-flipped > :first-child { order: 0; }
  .place { padding: 40px 0; }
  .place figure img, .split figure img { height: 300px; }
  .cards-4 { grid-template-columns: 1fr; gap: 40px; }
  .amenities { grid-template-columns: repeat(2, 1fr); gap: 28px; }
  .faq summary { font-size: 16px; }

  .marquee-track { gap: 11px; padding-left: var(--pad-x); }
  .marquee-track a { width: 250px; height: 320px; }

  .quote-stage { grid-template-columns: 1fr; gap: 34px; }
  .quote-nav { justify-content: space-between; }
  .rich-reviews-list { grid-template-columns: 1fr; gap: 28px; }

  .post-grid { grid-template-columns: 1fr; }
  .info-grid { grid-template-columns: 1fr; gap: 20px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 34px 20px; padding-top: 56px; }
  .footer-grid > div:first-child { grid-column: 1 / -1; }
  .footer-grid > div:last-child { grid-column: 1 / -1; }
  .footer-bottom { flex-direction: column-reverse; align-items: flex-start; gap: 14px; }
  .socials { flex-wrap: wrap; }

  .booking-shell { padding: 24px 18px; }
  .booking-shell .wpbs-main-wrapper { grid-template-columns: 1fr; gap: 36px; }
  .cta { min-height: 0; padding: 80px 0; }
}

@media (max-width: 480px) {
  .hero { min-height: 600px; }
  .btn, .btn-ghost { height: 50px; padding: 0 26px; font-size: 11px; }
}