/**
 * client-vars.css
 * An Cuil brand overrides of wdp-blueprint's tokens.css.
 *
 * Only Level 1 (--primitive-*) and Level 2 (--color-*, --font-*) tokens
 * belong here. Component tokens (--btn-*, --card-*, --input-*) cascade
 * automatically, don't redeclare them.
 *
 * Client palette:
 *   #21352C dark green    -> --color-surface-dark (header/footer/dark sections)
 *   #2E4B3C headings/icon -> --primitive-dark -> --color-text
 *   #C59A70 buttons       -> --primitive-brand-400
 *   #EAD7BC icon bkg      -> --primitive-brand-200
 *   #F1EAE0 med bkg       -> --primitive-grey-100
 *   #FAF7F0 base/light bkg -> --primitive-white
 *
 * Body/nav text is grey, distinct from the green headings. No separate
 * heading-only token in the parent, so body is pointed at
 * --color-text-muted instead, headings still resolve green since
 * h1-h6 set their own colour in base.css.
 */

/* ============================================================
   @FONT-FACE
   Self-hosted, no Google Fonts requests at runtime. Variable fonts,
   Google serves the same woff2 for every weight requested, so one
   file per family covers the whole range.
============================================================ */

@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-variable.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-variable.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-variable.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Manrope";
  src: url("../fonts/manrope-variable.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Manrope";
  src: url("../fonts/manrope-variable.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Manrope";
  src: url("../fonts/manrope-variable.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Manrope";
  src: url("../fonts/manrope-variable.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ============================================================
       LEVEL 1: PRIMITIVES
    ============================================================ */

  /* 200/400 are client-specified, 300/500 are interpolated tints/shades */
  --primitive-brand-200: #ead7bc;
  --primitive-brand-300: #d8b996;
  --primitive-brand-400: #c59a70;
  --primitive-brand-500: #947454;

  --primitive-dark: #2e4b3c;

  --primitive-white: #faf7f0;
  --primitive-grey-100: #f1eae0;

  /* accent (errors/focus) left at parent defaults, no client accent given */

  /* ============================================================
       LEVEL 2: SEMANTIC TOKENS
    ============================================================ */

  /* header, footer and dark sections all derive from this one token */
  --color-surface-dark: #21352c;

  --font-heading: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Manrope", system-ui, -apple-system, sans-serif;

  /* same 1.75rem/2.75rem bounds as the parent's --text-h1-long, but a
       steeper slope so a 2-line heading still fits comfortably once
       the hero is side by side and the text column narrows. */
  --text-h1: clamp(1.75rem, calc(-0.62rem + 4.21vw), 2.75rem);

  /* wider container, less edge padding, parent's default felt cramped */
  --container-max: 82.5rem;
  --container-padding: 1.25rem;

  --split-gap: clamp(3rem, 5vw, 5rem);

  /* a bit more than the parent's tight default */
  --section-padding-sm: clamp(2.5rem, calc(1.4rem + 4.5vw), 5rem);

  /* subtler, near-flat corner. also covers image radius via --card-radius */
  --radius-md: 5px;

  /* ============================================================
       LEVEL 3: COMPONENT TOKENS
       Overriding these since they're what the client-approved
       reference design actually calls for.
    ============================================================ */

  /* light header bar, not the parent's dark default */
  --header-height: 6rem;
  --header-bg: var(--color-surface);
  --header-bg-scrolled: var(--color-surface);
  --header-border: transparent;
  --header-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  --nav-link-color: var(--color-text-muted);
  --nav-link-hover: var(--color-brand);
  --nav-link-active: var(--color-brand);
  --nav-toggle-color: var(--color-text-muted);

  /* no drop shadows on cards, keep it flat */
  --card-shadow: none;
  --card-shadow-hover: none;

  /* fully rounded pill buttons */
  --btn-radius: var(--radius-full);

  /* more vertical padding on every plain button. hero uses --btn-padding-y-lg
       via .btn--lg so it's unaffected */
  --btn-padding-y: 1em;

  --btn-font-weight: 400;

  /* secondary button (hero's "View the cottage"): green outline, fills
       solid on hover. only secondary button on the page right now */
  --btn-secondary-border: var(--color-text);
  --btn-secondary-text: var(--color-text);
  --btn-secondary-hover-bg: var(--color-text);
  --btn-secondary-hover-text: var(--color-text-inverse);

  /* booking CTA: bigger radius on the outer card than the inner price
       card, even padding, wider column gap, bigger heading and price,
       taller button */
  --booking-cta-radius: 20px;
  /* fluid between the mobile and desktop targets (space-md/space-xl)
     instead of a hard swap at one breakpoint, so it eases in with
     the viewport rather than jumping */
  --booking-cta-padding: clamp(var(--space-md), 5vw, var(--space-xl));
  --booking-cta-gap-row: var(--space-md);
  --booking-cta-gap-column: var(--space-xl);
  --booking-cta-heading-size: var(--text-h1-long);
  --booking-cta-price-radius: 10px;
  --booking-cta-price-padding: var(--space-md);
  --booking-cta-price-size: var(--text-h1);
  --booking-cta-btn-padding-y: var(--btn-padding-y-lg);
  --booking-cta-heading-gap: var(--space-sm);

  /* parent's 60ch read too narrow for this site's column widths */
  --measure-lead: 80ch;

  /* matches wdp-card-2x (1280x840), the closest registered crop to
       the current hero photo's actual ~5:3 native ratio */
  --hero-media-ratio: 32 / 21;

  /* .section__split minimums (sections.css): bumped up from the
       parent's 280px default, which let About/Contact go side by
       side too early for how much copy they actually carry.
       Hero's text column needs more still (heading + lead + 2
       buttons side by side), so it gets its own, larger pair rather
       than sharing --split-min-col. Same idea for Location's map:
       its content side holds the 2-column facts grid, which needs
       real room of its own. */
  --split-min-col: 26rem;
  --split-hero-media-min: 32rem;
  --split-hero-content-min: 30rem;
  --split-map-media-min: 28rem;
  --split-map-content-min: 32rem;
}

body {
  color: var(--color-text-muted);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 400;
}

/* the parent's leading-tight (1.2) is unitless, so it scales down
   right along with --text-h1's clamp - fine at the top of the clamp,
   but a flat 1.2 multiplier reads as more cramped the smaller a
   2-line heading gets, not less. loosened a bit so it stays
   comfortable on narrower screens without changing how it looks at
   full desktop size. */
h1 {
  line-height: 1.3;
}

.primary-nav__menu a {
  font-weight: 600;
  font-size: var(--text-body);
}

/* centers the menu between logo and enquire button in the 3-col
   header. mobile overrides this to flex-end (right-align the
   toggle) further down, see the 900px block */
#primary-nav {
  display: flex;
  justify-content: center;
}

/* 3-column header: logo, centered menu, enquire button. parent's is a
   plain 2-child flex row, see header.php */
.site-header__inner--3col {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-md);
}

/* text logo fallback, shown until a logo is uploaded */
.site-header__site-name,
.site-footer__site-name {
  font-family: var(--font-heading);
  font-weight: 700;
}

.site-header__site-name {
  font-size: var(--text-h4);
}

.site-header__brand img {
  height: 3.5rem;
  max-width: 13.75rem;
}

/* header sits on the light background so text goes green, footer sits
   on dark green so it goes cream */
.site-header__site-name {
  color: var(--color-text);
}

.site-footer__site-name {
  color: var(--color-text-inverse);
}

/* matches the card grids' gap so the spacing scale reads as one thing */
.stat-item__row {
  gap: var(--space-sm);
}

.stat-item__label {
  font-weight: 500;
}

/* lines either side of the footnote are a fixed shorter length instead
   of the parent's default of stretching to fill the row. justify-content
   centers the (shrunk) line/text/line group since the lines no longer
   grow to fill the container themselves. */
.hero-divider {
  justify-content: center;
}

.hero-divider__line {
  flex: 0 0 auto;
  width: 8rem;
}

/* contact form sits in a light card on the section's slightly darker
   background, full-width submit button */
.contact-form-wrap {
  background-color: var(--color-surface);
  border-radius: var(--card-radius);
  padding-top: var(--space-sm);
  padding-bottom: var(--space-lg);
  padding-inline: var(--space-lg);
  box-shadow: var(--card-shadow);
}

/* check-in/check-out/guests get their own row. checkin/checkout split
   the remaining width 50/50, guests stays a fixed comfortable width
   for its label and number spinner */
.contact-form__date-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.contact-form__date-row > .form-field {
  margin-bottom: 0;
}

.contact-form__date-row > .form-field--checkin,
.contact-form__date-row > .form-field--checkout {
  flex: 1 1 0;
}

#wdp-contact-guests {
  width: 6rem;
}

/* half the parent's 140px default */
#wdp-contact-message {
  min-height: 4.375rem;
}

/* tighter gap between the text and the underline than the parent's
   default. gap between rows below is tightened to match. */
.contact-form .form-field--floating .form-input,
.contact-form .form-field--floating .form-textarea {
  padding-bottom: calc(var(--input-padding-y) * 0.15);
}

.contact-form {
  gap: var(--space-xs);
}

/* smaller reserve above the input than the parent's default, to match
   the smaller/lower-rising label below rather than leaving the extra
   parent's space unused */
.contact-form .form-field--floating {
  padding-top: var(--space-sm);
}

/* no focus ring, the border-bottom colour change is enough on its own */
.contact-form .form-input:focus,
.contact-form .form-textarea:focus {
  box-shadow: none;
}

/* solid dark green, reads distinctly from the gold buttons elsewhere */
.contact-form__submit {
  width: 100%;
  margin-top: var(--space-sm);
  background-color: var(--color-text);
  border-color: var(--color-text);
  color: var(--color-text-inverse);
}

.contact-form__submit:hover {
  background-color: var(--color-surface-dark);
  border-color: var(--color-surface-dark);
}

/* floated label sits smaller and only rises half as far as the
   parent's default (top:0), rather than all the way to the top edge.
   :not(.form-field--date-empty) on the input branch keeps this from
   overriding the parent's empty-date-field fix (components.css),
   which needs to keep Check-in/Check-out looking unfloated until
   they're actually focused or filled. */
.contact-form .form-field--floating .form-input:focus ~ .form-label,
.contact-form
  .form-field--floating:not(.form-field--date-empty)
  .form-input:not(:placeholder-shown)
  ~ .form-label,
.contact-form .form-field--floating .form-textarea:focus ~ .form-label,
.contact-form
  .form-field--floating
  .form-textarea:not(:placeholder-shown)
  ~ .form-label {
  top: var(--space-xs);
  font-size: calc(var(--text-label) * 0.95);
}

/* the unfloated, placeholder-style label: smaller than the parent's
   default (--text-body), and repositioned to match the smaller
   padding-top above so it still lines up with the input's own text.
   The date-empty variant (Check-in/Check-out when empty) needs its own
   copy of this at matching specificity, or the parent's empty-date-
   field fix (components.css) wins and they'd render larger and
   misaligned relative to every other field's label. */
.contact-form .form-field--floating .form-label,
.contact-form
  .form-field--floating.form-field--date-empty:not(:focus-within)
  .form-label {
  top: calc(var(--space-sm) + var(--input-padding-y));
  font-size: var(--text-small);
}

/* even top/bottom breathing room, no divider between columns */
.site-footer__columns {
  padding-top: var(--space-xl);
  padding-bottom: var(--space-lg);
}

.site-footer__col--brand {
  padding-right: 0;
  border-right: none;
  flex: 1 1 0;
}

.site-footer__logo::after,
.site-footer__site-name::after {
  display: none;
}

/* plain link, no button chrome, icon instead of a filled pill */
.site-footer__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 0;
  background: none;
  border: none;
  color: var(--color-brand);
  font-weight: 600;
}

.site-footer__cta:hover {
  color: var(--color-brand-hover);
}

.site-footer__cta svg {
  width: 1.1em;
  height: 1.1em;
}

/* forces "Perfectly placed for the Highlands" to wrap after the 2nd
   word rather than the 3rd */
#location h2 {
  max-width: 17ch;
}

/* auto-fit + a minimum comfortable card width: the browser works out
   1/2/3/4 across from the available width instead of a hardcoded
   column count per breakpoint */
.location-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}

/* stats: only ever 1x4 or 2x2, not the 3-across auto-fit would land
   on in between - deliberately the 2 states rather than a fluid
   column count, since 4 short stat items don't have the same "give
   each one comfortable room" logic the card grids above do */
.stat-grid {
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 700px) {
  .stat-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* same auto-fit approach: naturally 1 column on a narrow phone, 2
   once there's room. drops the old fixed 2-column/column-major flow
   (grid-auto-flow:column across 2 explicit columns can't collapse to
   1 without overflowing, since it still expects 2 columns' worth of
   rows), so at 1 column items just read top to bottom in order,
   which is what you'd want anyway with nothing beside them */
.about-checklist {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-xs) var(--space-sm);
}

.about-checklist li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-xs);
}

/* flex instead of the parent's grid, brand and the explore/enquire
   column share the row 50/50. gap is the same column-gap the parent's
   grid version used. */
.site-footer__columns-inner {
  display: flex;
  align-items: start;
  gap: var(--space-lg);
}

/* heading, link list and the enquire CTA as flex siblings instead of
   a hand-placed grid: the heading takes its own row (flex-basis:100%),
   then the link list and the CTA share the row below, side by side
   whenever there's room and wrapping to their own rows when there
   isn't. No breakpoint needed either way, it falls out of the
   available width on its own, same as the fluid card grids elsewhere
   (.stat-grid, .location-facts, .about-checklist). align-items:flex-end
   so the CTA lines up with the links' bottom row instead of the
   vertical middle of the whole 2-row block. */
.site-footer__col--links {
  flex: 1 1 0;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  column-gap: var(--space-xl);
  row-gap: var(--space-sm);
}

.site-footer__col--links .site-footer__col-heading {
  flex-basis: 100%;
}

/* a real 2-column grid rather than a flex-wrap row: flex-wrap sizes
   each row's items off that row's own content, so "Gallery" and
   "Location" (different widths) didn't start at the same x - grid
   tracks are shared across rows, which is exactly the column
   alignment a 2x2 link list needs. Always exactly 4 items, so a
   plain 2-column grid needs no fallback for more/fewer across. */
.site-footer__quick-links {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  gap: var(--space-xs) var(--space-xl);
}

/* matches the rest of the site's paragraph rhythm instead of the
   parent's tighter default */
.site-footer__tagline {
  line-height: var(--leading-base);
  max-width: 55ch;
}

/* same heading-to-body gap used everywhere else (.section__heading),
   the parent's own gap here was on a decorative underline we've
   hidden, so this was collapsing to zero */
.site-footer__site-name {
  margin-bottom: var(--space-sm);
}

/* semi-transparent white, same treatment as the amenity cards, rather
   than the parent's solid border colour */
.site-footer__bottom-inner {
  border-top-color: rgba(255, 255, 255, 0.1);
}

/* mutes the map's default vivid colours so they don't clash with the
   rest of the palette */
#location iframe {
  filter: saturate(0.6) brightness(1.02);
}

/* legal pages/posts with no featured image sit right under the fixed
   header, same clearance fix as the hero */
.post-header {
  padding-top: calc(var(--header-height) + var(--section-padding-sm));
}

/* was using the hero's h1 size, way too big for a plain text page */
.post-header__title {
  font-size: var(--text-h3);
}

.prose h2 {
  font-size: var(--text-h4);
}

.prose h3 {
  font-size: var(--text-h5);
}

/* ============================================================
   MOBILE
============================================================ */

/* mobile nav: the Enquire CTA becomes a real menu item (see inc/nav.php)
   so it can live in the dropdown instead of the header row once the
   header's own button is hidden below. hidden here by default (desktop),
   shown again inside the 900px block further down. */
.primary-nav__cta-item {
  display: none;
}

/* #primary-nav prefix: the parent's own .primary-nav__menu a (base
   color) and .primary-nav__menu > li:not(...) > a::after (chevron)
   rules are both more specific than a single class, so without the
   #primary-nav ID boost they'd win and this would render in the
   muted nav-link colour with a leftover chevron instead of as a
   solid button */
#primary-nav .primary-nav__cta-link {
  display: block;
  width: 100%;
  padding: var(--primitive-space-4) var(--container-padding);
  background-color: var(--color-brand);
  color: var(--color-text-inverse);
  font-weight: 600;
  text-align: center;
  border-radius: 0;
}

#primary-nav .primary-nav__cta-link:hover {
  background-color: var(--color-brand-hover);
  color: var(--color-text-inverse);
}

/* no leaf-row chevron on the CTA, it's a button not a regular link.
   #primary-nav prefix to outrank the parent's own chevron rule,
   see the comment above .primary-nav__cta-link */
#primary-nav .primary-nav__cta-item > a::after {
  display: none;
}

/* hero stats + divider: left align once the hero stacks to one
   column, to match the heading/lead/buttons above rather than
   reading as centred against everything else's left edge. Flanking
   lines come off too - they only make sense either side of centred
   text, and there's no room for them next to a wrapped caption
   anyway. 1149px matches the hero's own stack/side-by-side switch
   (SPLIT-SIDE-BY-SIDE-BREAKPOINT, sections.css), not just narrow
   phones, since this is really asking "is the hero stacked". */
@media ( max-width: 1149px ) {
  .stat-grid {
    text-align: left;
    /* a little breathing room off the edge now that it's left
       aligned instead of centred, or it reads as flush against the
       edge rather than deliberately placed */
    padding-left: var(--space-sm);
  }

  .stat-item {
    align-items: flex-start;
  }

  .hero-divider {
    justify-content: flex-start;
  }

  .hero-divider__text {
    text-align: left;
  }

  .hero-divider__line {
    display: none;
  }

  /* buttons sit closer under the lead paragraph once stacked, the
     desktop gap (--space-lg) reads as too much air on a narrow
     single column. section__split-content is already flex with its
     own gap, so the paragraph's own margin-bottom was stacking on
     top of both that gap and this margin-top - zeroed so the actual
     gap is just the two intentional values, not three compounding */
  .section__split--hero .section__lead {
    margin-bottom: 0;
  }

  .section__split--hero .section__actions {
    margin-top: var(--space-sm);
  }
}

/* About and Location: text before the photo/map when stacked. the
   parent cancels .section__split--reversed's order through the whole
   stacked range, below 1150px (sections.css, SPLIT-SIDE-BY-SIDE-
   BREAKPOINT), so this needs to win that back specifically for these
   two, rather than removing the parent's cancellation globally. */
@media ( max-width: 1149px ) {
  #the-cottage .section__split-content,
  #location .section__split-content {
    order: -1;
  }
}

/* about checklist: pinned to exactly 2 columns through the tablet-
   stacked range. auto-fit alone can't hold a single column count
   across a range this wide (roughly 600-984px of content) without
   also admitting 3-4 across at the top end, since it's driven by one
   fixed minimum width, so this range gets an explicit column count
   instead. below it, the fluid rule further up still applies and
   naturally lands on 1 column on a phone. */
@media ( min-width: 640px ) and ( max-width: 1023px ) {
  .about-checklist {
    grid-template-columns: repeat( 2, 1fr );
  }
}

@media ( max-width: 900px ) {
  /* the 6rem desktop height (built for logo + centred menu + cta)
     leaves too much empty space once it's just logo + toggle */
  :root {
    --header-height: 4.5rem;
  }

  /* cta column gone from the header grid on mobile, toggle sits at
     the far right of what's left */
  .site-header__inner--3col {
    grid-template-columns: auto 1fr;
  }

  #primary-nav {
    justify-content: flex-end;
  }

  .site-header__cta {
    display: none;
  }

  .primary-nav__cta-item {
    display: block;
  }

  /* footer: columns stack, copyright/legal centre instead of
     space-between. align-items switches from the row layout's
     "start" (top-aligns columns of different heights) to "stretch",
     or each stacked column would just shrink to its own content
     width instead of spanning the row */
  .site-footer__columns-inner {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-lg);
  }

  .site-footer__bottom-inner {
    flex-direction: column;
    text-align: center;
  }

  .site-footer__legal ul {
    justify-content: center;
  }
}