/*
Theme Name: Ixiun Onyx
Author: Ixiun
Description: Block theme (Full Site Editing). Colors & fonts are editable in the block editor's Global Styles; nav and footer are dynamic blocks backed by PHP, page content is built in Gutenberg.
Version: 1.3
Requires at least: 6.6
Tested up to: 7.0
Requires PHP: 7.4
*/

/* =============================================
   COLOR PALETTE & FONTS
   ============================================= */
:root {
  --color-primary:     var(--wp--preset--color--primary, #1a1b1a);
  --color-secondary:   var(--wp--preset--color--secondary, #f4f1e9);
  --color-accent:      var(--wp--preset--color--accent, #ddbd7d);
  --color-btn:         var(--wp--preset--color--btn, #D6A84B);
  --color-btn-secondary: var(--wp--preset--color--btn-secondary, #e7dcdc);
  /* Primary button (is-style-primary) — each slot is its own preset, so the
     button recolors without dragging the nav/text palette with it. Fallbacks
     are the tokens these slots used before, so an unset preset keeps the old look. */
  --color-btn-primary-bg:         var(--wp--preset--color--btn-primary-bg, var(--color-btn));
  --color-btn-primary-text:       var(--wp--preset--color--btn-primary-text, var(--color-primary));
  --color-btn-primary-hover-bg:   var(--wp--preset--color--btn-primary-hover-bg, var(--color-primary));
  --color-btn-primary-hover-text: var(--wp--preset--color--btn-primary-hover-text, var(--color-text-inverse));
  /* Secondary button (is-style-secondary) — same four slots as Primary. */
  --color-btn-secondary-bg:         var(--wp--preset--color--btn-secondary-bg, var(--color-btn-secondary));
  --color-btn-secondary-text:       var(--wp--preset--color--btn-secondary-text, var(--color-primary));
  --color-btn-secondary-hover-bg:   var(--wp--preset--color--btn-secondary-hover-bg, var(--color-btn));
  --color-btn-secondary-hover-text: var(--wp--preset--color--btn-secondary-hover-text, var(--color-primary));
  --color-text:        var(--wp--preset--color--text, #1a1a2e);
  --color-text-inverse:  var(--wp--preset--color--text-inverse, #ffffff);
  --color-muted:       var(--wp--preset--color--muted, #6b7280);
  --color-bg:          var(--wp--preset--color--bg, #ffffff);
  --color-surface:     var(--wp--preset--color--surface, #ffffff);
  --color-footer-bg:   var(--wp--preset--color--footer-bg, #1f211d);
  --color-footer-text: var(--wp--preset--color--footer-text, #EFE7D2);
  --color-drawer-bg:         var(--wp--preset--color--drawer-bg, #ddbd7d);
  --color-drawer-link:       var(--wp--preset--color--drawer-link, #ffffff);
  --color-drawer-link-hover: var(--wp--preset--color--drawer-link-hover, #1a1a2e);
  --color-border:      rgba(255, 255, 255, 0.15);
  /* Divider lines for the reusable stat-grid — a faint tint of the primary color */
  --stat-divider:      color-mix(in srgb, var(--color-primary) 20%, transparent);
  /* overriding bootstrap background */
  --bs-body-bg:        var(--color-bg); 
  --max-width:         1440px;
  --nav-height:        115px;
  --nav-height-shrunk: 70px;
  --topbar-height:     44px;
  /* starting fonts, can be changed in the block theme editor for specific site needs */
  --font-heading:      var(--wp--preset--font-family--georgia, Georgia, serif);
  --font-body:    var(--wp--preset--font-family--system-sans, 'Helvetica Neue', Arial, sans-serif);
  --font-logo:         'Montserrat', sans-serif;
  /* Accent font for the cabin-intro heading + photo caption. Repointed to
     Playfair Display (Amatic SC was removed). Swap the preset to restyle. */
  --font-script:       var(--wp--preset--font-family--playfair-display, 'Playfair Display', serif);
  /* Functional monospace (code / placeholder boxes) — not a brand font, so it
     stays a plain fallback rather than a Global Styles preset. */
  --font-mono:         'Courier New', monospace;

  --transition:        0.3s ease;
  --border-radius:     6px;
}

/* =============================================
   RESET & BASE
   ============================================= */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  overflow-x: clip;
}

body {
  font-family: var(--font-body);
  color: var(--color-text);
  overflow-x: clip;
}

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

a {
  color: inherit;
  text-decoration: none;
}

ul {
  list-style: none;
}

/* =============================================
   NAV
   ============================================= */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  transition: transform var(--transition);
}

.nav-anim-hide.nav-hidden .site-header {
  transform: translateY(-100%);
}

.nav-anim-load .site-header {
  animation: onyx-nav-in 0.5s ease backwards;
}

@keyframes onyx-nav-in {
  from { opacity: 0; transform: translateY(-100%); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .nav-anim-load .site-header {
    animation: none;
  }
  .nav-anim-hide.nav-hidden .site-header {
    transform: none;
  }
}

.nav-anim-overlay.has-hero .site-main,
.nav-anim-overlay.has-hero.is-scrolled .site-main {
  padding-top: 0;
}

.nav-anim-overlay.has-hero .site-nav,
.nav-anim-overlay.has-hero .nav-topbar {
  background: transparent;
}

/* Soft top-down scrim keeps white nav text legible over bright hero areas. */
.nav-anim-overlay.has-hero .site-header::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 220%;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.45), transparent);
  pointer-events: none;
  z-index: -1;
  transition: opacity var(--transition);
}


.nav-anim-overlay.has-hero.is-scrolled .site-nav {
  background: var(--color-primary);
}

/* toolbar at the top is always black */
.nav-anim-overlay.has-hero.is-scrolled .nav-topbar {
  background: var(--color-primary);
}

.nav-anim-overlay.has-hero.is-scrolled .site-header::before {
  opacity: 0;
}

.site-nav {
  position: relative;
  height: var(--nav-height);
  background: var(--color-primary);
  transition: height var(--transition), background var(--transition);
}

body.nav-anim-shrink.is-scrolled .site-nav {
  height: var(--nav-height-shrunk);
}

/* Top contact bar */
.nav-topbar {
  height: var(--topbar-height);
  background: var(--color-primary);
  color: var(--color-text-inverse);
  overflow: hidden;
  transition: height var(--transition), opacity var(--transition), background var(--transition);
}

body.nav-anim-shrink.is-scrolled .nav-topbar {
  height: 0;
  opacity: 0;
}

.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: var(--topbar-height);
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 2rem 0 0;
}

.topbar-contact {
  display: flex;
  align-items: center;
  gap: 2rem;
  font-family: var(--font-body);
  font-size: 0.85rem;
  letter-spacing: 0.03em;
}

.contact-item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--color-text-inverse);
  opacity: 0.9;
  white-space: nowrap;
  transition: opacity var(--transition), color var(--transition);
}

a.contact-item:hover {
  opacity: 1;
  color: var(--color-accent);
}

.contact-item svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  color: var(--color-accent);
}

.topbar-social {
  display: flex;
  align-items: center;
}

.topbar-social .nav-social-link svg {
  width: 18px;
  height: 18px;
}

.nav-inner {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  height: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 1rem 2rem 1rem 0;
  line-height: 1;
}

/* Logo */
.nav-logo {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  height: var(--nav-height);
  margin-top: -1rem;
  margin-bottom: -1rem;
  transition: height var(--transition);
}

body.nav-anim-shrink.is-scrolled .nav-logo {
  height: var(--nav-height-shrunk);
}

.nav-logo a {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  height: 100%;
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text-inverse);
  line-height: 1;
  transition: opacity var(--transition);
}

.nav-logo a:hover {
  opacity: 0.85;
}

.nav-logo img {
  height: 100%;
  width: auto;
  /* Scaled with the logo so a wide wordmark isn't clipped at larger sizes. */
  max-width: calc(300px * var(--logo-scale, 1));
  object-fit: contain;
}

/* Image-logo recolor (Customizer > Logo). The logo file is used as a mask on the
   link and filled with --logo-color, so any solid color works — it swaps to
   --logo-color-scrolled once the page is scrolled (.is-scrolled), which is also
   when a transparent-over-hero nav turns solid. The <img> is hidden but kept in
   flow so the link keeps the logo's box for the mask to size against. Defaults to
   white, matching the previous brightness(0) invert(1) treatment. --logo-mask
   (the logo's URL) is injected inline by onyx_render_header. Scoped to the logo's
   own link (.custom-logo-link) so an optional title/tagline link beside it is
   never masked. */
.nav-logo--image .custom-logo-link {
  background-color: var(--logo-color, #ffffff);
  -webkit-mask: var(--logo-mask) center / contain no-repeat;
          mask: var(--logo-mask) center / contain no-repeat;
  transition: background-color var(--transition), opacity var(--transition);
}

.nav-logo--image .custom-logo-link img {
  visibility: hidden;
}

body.is-scrolled .nav-logo--image .custom-logo-link {
  background-color: var(--logo-color-scrolled, var(--logo-color, #ffffff));
}

/* "Show logo in original colors" (Customizer > Logo). Turns off the recolor mask
   so the logo image renders in its own colors: the <img> is revealed and the
   mask/fill removed, at all scroll states. */
.nav-logo--natural .custom-logo-link,
body.is-scrolled .nav-logo--natural .custom-logo-link {
  background-color: transparent;
  -webkit-mask: none;
          mask: none;
}

.nav-logo--natural .custom-logo-link img {
  visibility: visible;
}

/* Logo size (Customizer > Logo). --logo-scale feeds the text-logo font size and
   the image max-width at every width. The nav-height overrides below (which make
   the whole bar grow with the logo instead of overflowing it) are desktop-only —
   mobile keeps its own fixed --nav-height (see the max-width:1100px block). */
body.logo-size-small  { --logo-scale: 0.78; }
body.logo-size-medium { --logo-scale: 1; }
body.logo-size-large  { --logo-scale: 1.25; }
body.logo-size-xlarge { --logo-scale: 1.5; }

@media (min-width: 1101px) {
  /* Grow/shrink the header with the logo. The logo is sized to 100% of the bar,
     so scaling the bar scales the logo — no overhang. The shrunk twin scales in
     step so the shrink-on-scroll animation stays proportional. */
  body.logo-size-small {
    --nav-height: 90px;
    --nav-height-shrunk: 58px;
  }
  body.logo-size-large {
    --nav-height: 144px;
    --nav-height-shrunk: 88px;
  }
  body.logo-size-xlarge {
    --nav-height: 172px;
    --nav-height-shrunk: 104px;
  }
}

/* Brand text (site title + tagline). Shown on its own as the wordmark when there
   is no logo, and optionally beside the logo image (Customizer > Logo > Show site
   title / tagline). The title/tagline are separate spans so each can be toggled. */
.nav-logo .nav-logo-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 0.15rem;
  line-height: 1.1;
  transition: opacity var(--transition);
}

.nav-logo .nav-logo-text:hover {
  opacity: 0.8;
}

.nav-logo-title {
  font-family: var(--font-logo);
  font-size: calc(1.8rem * var(--logo-scale, 1));
  font-weight: 300;
  letter-spacing: 0.1em;
  color: var(--logo-color, var(--color-text-inverse));
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.18);
  transition: font-size var(--transition), letter-spacing var(--transition), color var(--transition);
}

.nav-logo-tagline {
  font-family: var(--font-body, sans-serif);
  font-size: calc(0.72rem * var(--logo-scale, 1));
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--logo-color, var(--color-text-inverse));
  opacity: 0.85;
  transition: font-size var(--transition), color var(--transition);
}

/* Beside a logo image the title/tagline play a supporting role, so they're a bit
   smaller than the standalone wordmark. */
.nav-logo--image .nav-logo-title {
  font-size: calc(1.2rem * var(--logo-scale, 1));
}

.nav-logo--image .nav-logo-tagline {
  font-size: calc(0.66rem * var(--logo-scale, 1));
}

/* Scrolled color for the brand text — mirrors the image-logo swap above. */
body.is-scrolled .nav-logo-title,
body.is-scrolled .nav-logo-tagline {
  color: var(--logo-color-scrolled, var(--logo-color, var(--color-text-inverse)));
}

body.nav-anim-shrink.is-scrolled .nav-logo--text .nav-logo-title {
  font-size: calc(1.4rem * var(--logo-scale, 1));
  letter-spacing: 0.07em;
}

/* Right side wrapper (menu + social icons) */
.nav-right {
  display: flex;
  align-items: center;
  height: 100%;
  gap: 1.5rem;
}

/* Nav social icon */
.nav-social-link {
  display: flex;
  align-items: center;
  color: var(--color-text-inverse);
  opacity: 0.85;
  transition: opacity var(--transition);
}

.nav-social-link:hover {
  opacity: 1;
}

.nav-social-link svg {
  width: 22px;
  height: 22px;
}

/* The drawer has its own palette (gold ground, white links), so the icon follows
   --color-drawer-link rather than the nav's --color-text-inverse: a site running a
   light header inverts that token to a dark value, which is right in the nav bar
   but lands as a black icon among the drawer's white links. */
.nav-social-link--drawer {
  margin-top: 2rem;
  color: var(--color-drawer-link);
}

.nav-social-link--drawer:hover {
  color: var(--color-drawer-link-hover);
  opacity: 1;
}

/* Desktop menu */
.nav-menu {
  display: flex;
  align-items: center;
  gap: 2rem;
  margin: 0 0 0 5rem;
  padding: 0;
  height: 100%;
}

.nav-menu li {
  display: flex;
  align-items: center;
  align-self: stretch;   /* fill the nav height so dropdowns anchor to the bar's bottom edge (no hover dead-zone) */
  margin: 0;
  padding: 0;
  list-style: none;
  position: relative;
}

.nav-menu li::after {
  content: '';
  position: absolute;
  /* Anchored just under the (vertically centered) link text rather than the
     bottom of the now-full-height li, so the accent underline sits where it
     always has regardless of li height. */
  top: calc(50% + 0.8em);
  left: 0;
  width: 0;
  height: 1.5px;
  background: var(--color-accent);
  transition: width var(--transition);
}

.nav-menu li:hover::after,
.nav-menu .current-menu-item::after {
  width: 100%;
}

.nav-drawer .nav-menu li::after {
  display: none;
}

.nav-drawer .nav-menu .current-menu-item > a {
  color: var(--color-text-inverse);
  opacity: 0.55;
}

.nav-menu a {
  font-family: var(--font-body);
  font-size: 1.1rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-inverse);
  line-height: 1;
  transition: color var(--transition);
}

.nav-menu a:hover,
.nav-menu .current-menu-item > a {
  color: var(--color-accent);
}

/* =============================================
   NAV CTA  —  one menu item styled as a button
   ---------------------------------------------
   The item chosen in Customizer ▸ Nav CTA gets the .nav-cta class (added by
   onyx_nav_cta_class). It is the editorial Primary button (.is-style-primary)
   shrunk to nav scale — same barely-rounded 2px corners, same 1.5px border that
   matches the fill, same resting gradient + raised shadow, same left-to-right
   color wipe on hover. Only the footprint differs (a nav bar can't carry the
   hero's 1.45rem/3.6rem padding), plus a slow idle pulse to catch the eye.

   Colors come from the four btn-primary-* slots — the same pairs the editorial
   Primary button uses — so the two always match and re-theme from one place.
   (Do NOT reach for --color-primary / --color-text-inverse here: those are
   nav/body text tokens, and a site that runs a light header inverts them, which
   turns the filled button light-on-light.) */
.nav-menu .nav-cta > a {
  position: relative;
  z-index: 0;              /* stacking context so the wipe sits behind the label */
  overflow: hidden;        /* clip the wipe to the button box */
  display: inline-flex;
  align-items: center;
  padding: 0.85em 2.1rem;
  border-radius: 2px;      /* barely-rounded, editorial — matches .is-style-primary */
  border: 1.5px solid var(--color-btn-primary-bg);
  background: linear-gradient(150deg,
    color-mix(in srgb, var(--color-btn-primary-bg) 82%, #fff) 0%,
    color-mix(in srgb, var(--color-btn-primary-bg) 90%, #000) 100%);
  color: var(--color-btn-primary-text);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.14);   /* rests raised, so it reads as the primary action */
  transition: color 0.42s ease, border-color 0.42s ease, box-shadow 0.42s ease;
}

/* Signature left-to-right wipe — same pseudo-element trick + easing as the
   editorial buttons (.is-style-primary). Hidden (scaleX 0) until hover. */
.nav-menu .nav-cta > a::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--color-btn-primary-hover-bg);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.42s cubic-bezier(0.65, 0, 0.35, 1);
}

.nav-menu .nav-cta > a:hover {
  color: var(--color-btn-primary-hover-text);   /* label flips as the wipe fills in */
  border-color: var(--color-btn-primary-hover-bg);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
}

.nav-menu .nav-cta > a:hover::before {
  transform: scaleX(1);
}

/* Current page — a settled "you are here" fill rather than a permanently-hovered
   button: paint the hover colors straight on (no gradient, and no wipe to animate
   in on page load) and stop the idle pulse, since there's nowhere left to nudge
   the visitor. */
.nav-menu .nav-cta.current-menu-item > a,
.nav-menu .nav-cta.current-menu-item > a:hover {
  background: var(--color-btn-primary-hover-bg);
  border-color: var(--color-btn-primary-hover-bg);
  color: var(--color-btn-primary-hover-text);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  animation: none;
}

.nav-menu .nav-cta.current-menu-item > a::before {
  content: none;
}

/* The button is its own affordance — suppress the sliding accent underline. */
.nav-menu .nav-cta::after {
  display: none;
}

/* Slow idle pulse so the CTA catches the eye without a hover. Motion-safe, and
   it pauses while hovered so it doesn't fight the wipe. */
@media (prefers-reduced-motion: no-preference) {
  .nav-menu .nav-cta > a {
    animation: onyx-cta-pulse 2.8s ease-in-out infinite;
  }
  .nav-menu .nav-cta > a:hover {
    animation: none;
  }
}

@keyframes onyx-cta-pulse {
  0%, 100% { box-shadow: 0 3px 12px rgba(0, 0, 0, 0.14); }
  50%      { box-shadow: 0 6px 20px rgba(0, 0, 0, 0.24); }
}

/* ---------------------------------------------------------------
   Drawer: the CTA sheds the button entirely.

   The desktop treatment — filled gradient, 1.5px border, raised shadow, idle
   pulse — is tuned to sit in the header bar. Dropped into the drawer it fights
   the surroundings: the fill sits too close in value to the gold ground for the
   label to hold, and the box/shadow/pulse read as clutter beside four lines of
   plain white type. So in the drawer, ORDER stays type. A hairline rule above it
   separates it from the nav items, an underline and a heavier weight mark it as
   the action, and an arrow points out of the drawer. Everything boxy is unwound
   below — undoing the desktop rules is the bulk of this block.
   --------------------------------------------------------------- */

/* Rule above, matching the .drawer-contact divider so the drawer has one
   consistent separator. */
.nav-drawer .nav-menu .nav-cta {
  margin-top: 0.5rem;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  width: 100%;
}

.nav-drawer .nav-menu .nav-cta > a {
  overflow: visible;   /* desktop clips the wipe; nothing left here to clip */
  gap: 0.55rem;        /* space for the arrow, which rides in as ::after */
  padding: 0 0 0.4rem;
  background: none;
  border: 0;
  border-bottom: 1.5px solid var(--color-drawer-link);   /* the underline */
  border-radius: 0;
  box-shadow: none;
  animation: none;     /* cancels the motion-safe pulse from the desktop rule */
  color: var(--color-drawer-link);
  font-size: 1.1rem;   /* same size as the nav links it sits under */
  letter-spacing: 0.14em;
  transition: color var(--transition), border-color var(--transition);
}

/* Kill the sliding wipe — there's no longer a box for it to fill. */
.nav-drawer .nav-menu .nav-cta > a::before {
  content: none;
}

/* The arrow. A pseudo-element rather than markup, so the menu item stays an
   ordinary WordPress link the client can rename in Appearance > Menus. */
.nav-drawer .nav-menu .nav-cta > a::after {
  content: '\2192';
  display: inline-block;
  transition: transform var(--transition);
}

/* Hover, and the settled "you are here" state, are the same move: the label and
   its underline take the drawer's dark ink, and the arrow nudges outward. The
   opacity reset undoes the drawer's dimmed current-item treatment — the CTA
   shouldn't fade out on its own page. */
.nav-drawer .nav-menu .nav-cta > a:hover,
.nav-drawer .nav-menu .nav-cta.current-menu-item > a,
.nav-drawer .nav-menu .nav-cta.current-menu-item > a:hover {
  background: none;
  border-bottom-color: var(--color-drawer-link-hover);
  color: var(--color-drawer-link-hover);
  box-shadow: none;
  opacity: 1;
}

.nav-drawer .nav-menu .nav-cta > a:hover::after,
.nav-drawer .nav-menu .nav-cta.current-menu-item > a::after {
  transform: translateX(4px);
}

/* =============================================
   DROPDOWN SUBMENUS
   ---------------------------------------------
   Parent menu items (Appearance > Menus, an item nested under another) get the
   class .menu-item-has-children from wp_nav_menu and contain a <ul.sub-menu>.
   Desktop  (.nav-right): the sub-menu is a hover/focus dropdown panel.
   Mobile   (.nav-drawer): the sub-menu is a tap-to-expand accordion; the caret
   toggle button is injected by js/nav.js.
   ============================================= */

/* ---- Desktop dropdown ---- */

/* Caret after parent-item links */
.nav-right .menu-item-has-children > a {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
}

.nav-right .menu-item-has-children > a::after {
  content: '';
  width: 0.4em;
  height: 0.4em;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-0.15em) rotate(45deg);
  transition: transform var(--transition);
  flex-shrink: 0;
}

/* Rotate the caret up when the menu is open */
.nav-right .menu-item-has-children:hover > a::after,
.nav-right .menu-item-has-children:focus-within > a::after {
  transform: translateY(0.1em) rotate(-135deg);
}

/* The dropdown panel */
.nav-right .sub-menu {
  position: absolute;
  top: 100%;               /* li is full-height, so this is the nav's bottom edge */
  left: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  min-width: 220px;
  margin: 0;
  padding: 0.5rem 0;
  list-style: none;
  background: var(--color-primary);
  border-top: 2px solid var(--color-accent);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.28);
  /* Hidden until the parent is hovered/focused */
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
}

.nav-right .menu-item-has-children:hover > .sub-menu,
.nav-right .menu-item-has-children:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* Sub-menu items: plain stacked rows, no inherited underline or row layout */
.nav-right .sub-menu li {
  display: block;
  align-self: auto;
  width: 100%;
}

.nav-right .sub-menu li::after {
  display: none;
}

.nav-right .sub-menu a {
  display: block;
  padding: 0.6rem 1.4rem;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  white-space: nowrap;
  transition: color var(--transition), background var(--transition);
}

.nav-right .sub-menu a:hover,
.nav-right .sub-menu .current-menu-item > a {
  color: var(--color-accent);
  background: rgba(255, 255, 255, 0.06);
}

/* ---- Mobile drawer accordion ---- */

/* Parent item becomes a row (link + caret button) that wraps the sub-menu below */
.nav-drawer .nav-menu .menu-item-has-children {
  flex-wrap: wrap;
  column-gap: 0.5rem;
  width: 100%;
}

/* Caret toggle button (injected by js/nav.js) */
.nav-drawer .submenu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  margin-left: auto;          /* push it to the right edge of the row */
  padding: 0;
  background: none;
  border: none;
  color: var(--color-drawer-link);
  cursor: pointer;
}

.nav-drawer .submenu-toggle::before {
  content: '';
  width: 0.55rem;
  height: 0.55rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-0.12rem) rotate(45deg);
  transition: transform var(--transition);
}

.nav-drawer .menu-item-has-children.submenu-open > .submenu-toggle::before {
  transform: translateY(0.12rem) rotate(-135deg);
}

/* Collapsed by default; expands when the parent gets .submenu-open */
.nav-drawer .sub-menu {
  flex-basis: 100%;
  width: 100%;
  margin: 0;
  padding-left: 1rem;
  list-style: none;
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition);
}

.nav-drawer .menu-item-has-children.submenu-open > .sub-menu {
  max-height: 60vh;
}

.nav-drawer .sub-menu li {
  width: 100%;
}

.nav-drawer .sub-menu a {
  display: block;
  padding: 0.5rem 0;
  font-size: 1rem;
  opacity: 0.9;
}

/* Hamburger button */
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
  gap: 6px;
  padding: 0;
  position: fixed;
  top: calc((var(--nav-height) - 40px) / 2);
  right: 2rem;
  z-index: 1100;
  transition: top var(--transition);
}

body.nav-anim-shrink.is-scrolled .nav-hamburger {
  top: calc((var(--nav-height-shrunk) - 40px) / 2);
}

/* only takes effect when you're logged in as an admin so the site isn't distorted when looking at it */
.admin-bar .site-header {
  top: 32px;
}

.admin-bar .nav-hamburger {
  top: calc(32px + (var(--nav-height) - 40px) / 2);
}

.admin-bar.nav-anim-shrink.is-scrolled .nav-hamburger {
  top: calc(32px + (var(--nav-height-shrunk) - 40px) / 2);
}

@media screen and (max-width: 782px) {
  .admin-bar .site-header {
    top: 46px;
  }

  .admin-bar .nav-hamburger {
    top: calc(46px + (var(--nav-height) - 40px) / 2);
  }

  .admin-bar.nav-anim-shrink.is-scrolled .nav-hamburger {
    top: calc(46px + (var(--nav-height-shrunk) - 40px) / 2);
  }
}

.nav-hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--color-text-inverse);
  border-radius: 2px;
  transition: transform var(--transition), opacity var(--transition);
  transform-origin: center;
}

/* Animate to X */
.nav-hamburger.is-open span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.nav-hamburger.is-open span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.nav-hamburger.is-open span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* Mobile drawer */
.nav-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 300px;
  height: 100vh;
  background: var(--color-drawer-bg);
  z-index: 1050;
  display: flex;
  flex-direction: column;
  padding: 6rem 2rem 2rem;
  transform: translateX(100%);
  transition: transform var(--transition);
}

.nav-drawer.is-open {
  transform: translateX(0);
}

.nav-drawer .nav-menu {
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
  margin: 0;
  height: auto;
}

.nav-drawer .nav-menu a {
  font-size: 1.1rem;
  color: var(--color-drawer-link);
}

.nav-drawer .nav-menu a:hover,
.nav-drawer .nav-menu .current-menu-item > a {
  color: var(--color-drawer-link-hover);
}

.drawer-contact {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 2rem;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.3);
}

.contact-item--drawer {
  font-size: 1rem;
  gap: 0.6rem;
  opacity: 1;
  color: var(--color-drawer-link);
  white-space: normal;        /* let long addresses wrap (top bar forces nowrap) */
  align-items: flex-start;    /* icon lines up with the first line of wrapped text */
  overflow-wrap: anywhere;    /* break a long email/URL rather than overflow */
}

.contact-item--drawer svg {
  margin-top: 0.15em;         /* nudge the top-aligned icon to sit on the text baseline */
}

.contact-item--drawer svg {
  width: 18px;
  height: 18px;
  color: var(--color-drawer-link);
}

.nav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1040;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition);
}

.nav-overlay.is-open {
  opacity: 1;
  pointer-events: all;
}

/* =============================================
   MAIN CONTENT
   ============================================= */
.site-main {
  min-height: 60vh;
  /* Header is position:fixed (out of flow), so reserve its height here. This
     padding transitions on the same timing as the header height changes, so the
     two stay locked together on scroll and never reveal a gap. */
  padding-top: var(--nav-height);
  transition: padding-top var(--transition);
}

/* With the top bar on, reserve the bar's height too. */
.has-topbar .site-main {
  padding-top: calc(var(--topbar-height) + var(--nav-height));
}

/* Scrolled: top bar is collapsed and nav is shrunk — reserve only the shrunk
   nav. Declared after the rules above so it wins at equal specificity. */
body.nav-anim-shrink.is-scrolled .site-main {
  padding-top: var(--nav-height-shrunk);
}

/* The padding-top above stops the first block's top margin from collapsing,
   which would otherwise show as a white gap below the nav. Zero it out. */
.site-main > *:first-child {
  margin-top: 0 !important;
}

/* =============================================
   BUTTONS  —  reusable editorial button system
   ---------------------------------------------
   Applied as block styles (Editor > Button > Styles):
     - Primary   (is-style-primary)   solid, main button color  — hero CTA
     - Secondary (is-style-secondary) solid, secondary button color
     - Outline   (is-style-outline)   transparent ghost, for use on a photo
   Primary & Secondary also get the high-impact hero treatment (larger,
   gradient fill, sliding arrow). Every color comes from a Global Styles
   preset (--color-btn / --color-btn-secondary / --color-primary), so the
   whole system re-themes from the palette with no per-site hex values.
   ============================================= */

/* Base — the default (Fill) button, no style selected */
.wp-block-button__link {
  background-color: var(--color-btn) !important;
  border-radius: 50px !important;
}

.wp-block-button__link:hover {
  opacity: 0.88;
}

/* Editorial base — shared by Primary / Secondary / Outline */
.is-style-primary .wp-block-button__link,
.is-style-secondary .wp-block-button__link,
.is-style-outline .wp-block-button__link {
  position: relative !important;
  z-index: 0 !important;               /* stacking context so the wipe sits behind the text */
  overflow: hidden !important;         /* clip the wipe to the button box */
  padding: 1.1rem 2.7rem !important;
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  border-radius: 2px !important;       /* barely-rounded, editorial */
  border: 1.5px solid transparent !important;
  background-color: transparent !important;
  opacity: 1 !important;
  transition: color 0.4s ease, border-color 0.4s ease,
              box-shadow 0.4s ease !important;
}

/* Left-to-right color wipe, revealed on hover (sits behind the text) */
.is-style-primary .wp-block-button__link::before,
.is-style-secondary .wp-block-button__link::before,
.is-style-outline .wp-block-button__link::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -1 !important;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.42s cubic-bezier(0.65, 0, 0.35, 1);
}

.is-style-primary .wp-block-button__link:hover::before,
.is-style-secondary .wp-block-button__link:hover::before,
.is-style-outline .wp-block-button__link:hover::before {
  transform: scaleX(1);
}

.is-style-primary .wp-block-button__link:hover,
.is-style-secondary .wp-block-button__link:hover,
.is-style-outline .wp-block-button__link:hover {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18) !important;
  opacity: 1 !important;
}

/* Primary — solid button color; wipes to the hover color on hover. All four
   slots (bg / text / hover bg / hover text) are their own palette presets. */
.is-style-primary .wp-block-button__link {
  background-color: var(--color-btn-primary-bg) !important;
  color: var(--color-btn-primary-text) !important;
}
.is-style-primary .wp-block-button__link::before {
  background-color: var(--color-btn-primary-hover-bg) !important;
}
.is-style-primary .wp-block-button__link:hover {
  color: var(--color-btn-primary-hover-text) !important;
}

/* Secondary — solid button color; wipes to the hover color on hover. All four
   slots (bg / text / hover bg / hover text) are their own palette presets. */
.is-style-secondary .wp-block-button__link {
  background-color: var(--color-btn-secondary-bg) !important;
  color: var(--color-btn-secondary-text) !important;
}
.is-style-secondary .wp-block-button__link::before {
  background-color: var(--color-btn-secondary-hover-bg) !important;
}
.is-style-secondary .wp-block-button__link:hover {
  color: var(--color-btn-secondary-hover-text) !important;
}

/* Outline — transparent with a thin light border. Tuned for a secondary
   action sitting on a dark photo (e.g. a phone number beside the CTA);
   the border/wipe are white by design. Wipes to solid white on hover. */
.is-style-outline .wp-block-button__link {
  background-color: transparent !important;
  color: var(--color-text-inverse) !important;
  border-color: rgba(255, 255, 255, 0.55) !important;
}
.is-style-outline .wp-block-button__link::before {
  background-color: var(--color-text-inverse) !important;
}
.is-style-outline .wp-block-button__link:hover {
  color: var(--color-primary) !important;
  border-color: var(--color-text-inverse) !important;
}

/* HIGH-IMPACT footprint — Primary / Secondary / Outline share the same size
   so a solid + outline pair lines up as a set. What sets them apart is the
   fill: Primary/Secondary get the gradient + resting shadow + sliding arrow
   below; Outline stays transparent, flat, and arrow-less. */
.is-style-primary .wp-block-button__link,
.is-style-secondary .wp-block-button__link,
.is-style-outline .wp-block-button__link {
  padding: 1.45rem 3.6rem !important;
  min-width: 260px !important;
  font-size: 1rem !important;
  letter-spacing: 0.2em !important;
  text-align: center !important;
}

/* Resting raised shadow — solid buttons on a photo only (a ghost shouldn't cast
   a shadow at rest, and neither should a button on a light panel: against the
   theme's pale surfaces the shadow has nothing to separate from and just reads
   as a grey smudge hugging the button's edge). Scoped to Cover blocks, where a
   solid button does need lifting off the image. Everywhere else the button sits
   flat at rest and still gets the hover shadow below. */
.wp-block-cover :is(.is-style-primary, .is-style-secondary) .wp-block-button__link {
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.16) !important;
}

/* Gradient fills give depth at rest (the wipe still covers on hover) */
.is-style-primary .wp-block-button__link {
  background: linear-gradient(150deg,
    color-mix(in srgb, var(--color-btn-primary-bg) 82%, #fff) 0%,
    color-mix(in srgb, var(--color-btn-primary-bg) 90%, #000) 100%) !important;
}
.is-style-secondary .wp-block-button__link {
  background: linear-gradient(150deg,
    color-mix(in srgb, var(--color-btn-secondary-bg) 97%, #fff) 0%,
    color-mix(in srgb, var(--color-btn-secondary-bg) 93%, #000) 100%) !important;
}

/* Sliding arrow — appended after the label, glides right on hover */
.is-style-primary .wp-block-button__link::after,
.is-style-secondary .wp-block-button__link::after {
  content: '\2192' !important;                 /* -> */
  display: inline-block !important;
  margin-left: 0.75em !important;
  transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1) !important;
}
.is-style-primary .wp-block-button__link:hover::after,
.is-style-secondary .wp-block-button__link:hover::after {
  transform: translateX(7px) !important;
}

.is-style-primary .wp-block-button__link:hover,
.is-style-secondary .wp-block-button__link:hover {
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.24) !important;
}

/* arrow-btn — square button with an arrow tip that grows on hover.
   Apply "arrow-btn" to any Button block. Padding/size stay as set
   in the block editor. */

/* Shrink wrapper to hug the button so it doesn't stretch full-column-width */
.arrow-btn {
  align-self: flex-start !important;
  overflow: visible !important;
}

.arrow-btn .wp-block-button__link {
  position: relative;
  border-radius: 0 !important;
  width: auto !important;
  overflow: visible !important;
}

/* Arrow tail + tip grow on hover — button box never changes so text never moves */
.arrow-btn .wp-block-button__link::after {
  content: '';
  position: absolute;
  left: 100%;
  top: 0;
  height: 100%;
  width: 20px;
  background: inherit;
  /* 5-point triangle (shoulders collapsed to 0 so it's a pure tip at rest) */
  clip-path: polygon(0 0, 0 0, 100% 50%, 0 100%, 0 100%);
  pointer-events: none;
  transition: width 0.35s ease, clip-path 0.35s ease;
}

.arrow-btn .wp-block-button__link:hover::after {
  width: 60px;
  /* same 5 points — now with a rectangular tail before the 20px tip */
  clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 50%, calc(100% - 20px) 100%, 0 100%);
}

/* =============================================
   STAR BULLETS  —  list style (List ▸ Styles ▸ "Star Bullets")
   ---------------------------------------------
   Swaps the default disc for the theme's gold four-point sparkle. Apply to
   any List block; registered as .is-style-stars in functions.php. The star is
   a ::before (not ::marker) so we control its color/size and top-align it to
   the first line of wrapped items — same trick as .contact-item--drawer.
   ============================================= */
.wp-block-list.is-style-stars {
  list-style: none;
  padding-left: 0;
  margin-left: 0;
}

.wp-block-list.is-style-stars li {
  position: relative;
  padding-left: 1.9em;          /* room for the star + gap */
  margin-bottom: 0.6em;
}

.wp-block-list.is-style-stars li::before {
  content: '\2726';             /* ✦ black four-pointed star */
  position: absolute;
  left: 0;
  top: 0.1em;                   /* nudge onto the first text line */
  color: var(--color-accent);
  font-size: 0.85em;
  line-height: 1.4;             /* aligns the glyph with body text */
}

/* Nested lists indent normally and inherit the same star. */
.wp-block-list.is-style-stars ul,
.wp-block-list.is-style-stars ol {
  list-style: none;
  margin-top: 0.5em;
  padding-left: 1.9em;
}

/* =============================================
   SHOWCASE  —  reusable media + content split with a pinned action bar
   ---------------------------------------------
   A two-column section: an auto-arranging photo gallery on one side, text
   plus a price/CTA bar on the other. Reusable for listings, rooms, tours,
   or feature blocks — colors come from theme presets. Editor classes:

   showcase-layout   → the Columns block (gallery + text)
   showcase-content  → the text Column (works on EITHER side)
   showcase-bar      → the dark price/CTA Group pinned to the bottom

   To mirror two cards, put the gallery Column on the LEFT in one and the
   RIGHT in the other; everything else is identical, so they read as
   symmetric reversals. The gallery column is auto-detected via
   :has(.wp-block-gallery) — no class needed; only showcase-layout +
   showcase-content (+ showcase-bar) carry styling.
   ============================================= */

/* Equal halves, full height, no gutter so the two sides meet flush. */
.showcase-layout {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0 !important;
  align-items: stretch !important;
}

/* Desktop only: breathing room above the two halves. */
@media (min-width: 769px) {
  .showcase-layout {
    padding-top: 4rem !important;
    padding-bottom: 4rem;
  }
}



/* align-self:stretch overrides any per-block "vertical align" setting
   (e.g. one block set to "align bottom"), so both blocks behave the same
   and the two halves stay equal height. */
.showcase-layout > .wp-block-column {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  align-self: stretch !important;
}

/* The gallery column loses its padding (photos reach the edges) and
   centers the gallery vertically when the text column is taller.
   Auto-detected with :has — no extra class needed. */
.showcase-layout > .wp-block-column:has(.wp-block-gallery) {
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Gallery: a 3-column grid of small square photos, with the LAST photo
   (e.g. the exterior / hero shot) featured — it spans the full width and is larger.
   Each photo sizes itself via aspect-ratio, so the layout never depends
   on a percentage-height chain (which is what kept collapsing). */
.showcase-layout .wp-block-gallery {
  margin: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 6px !important;
}

/* width:auto kills WordPress's inline per-image flex-basis (the cause of
   the "sliver" photos); the grid cell controls the width instead. */
.showcase-layout .wp-block-gallery .wp-block-image,
.showcase-layout .wp-block-gallery figure {
  margin: 0 !important;
  width: auto !important;
  height: auto !important;
}

.showcase-layout .wp-block-gallery img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  display: block !important;
}

/* Featured photo — full-width, wider crop so it reads as the hero shot. */
.showcase-layout .wp-block-gallery > .wp-block-image:last-child {
  grid-column: 1 / -1 !important;
}

.showcase-layout .wp-block-gallery > .wp-block-image:last-child img {
  aspect-ratio: 16 / 9 !important;
}

/* Text column — same padding on both blocks; bottom padding is 0 so the
   pricing bar can sit flush against the column's lower edge. */
.showcase-content {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
  gap: 1.25rem !important;
  min-width: 0 !important;
  overflow: hidden !important;
}


/* Pricing bar — margin-top: auto pushes it to the bottom of the flex column */
.showcase-bar {
  background: var(--color-primary) !important;
  border-radius: 0 !important;
  padding: 1.5rem 3rem !important;
  margin-top: auto !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 0.75rem !important;
}

.showcase-bar p {
  color: #fff !important;
  margin: 0 !important;
}

.showcase-bar p:first-child {
  font-family: var(--font-heading) !important;
  font-size: 1.6rem !important;
  font-weight: 400 !important;
}

.showcase-bar p:nth-child(2) {
  font-size: 0.75rem !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  opacity: 0.65 !important;
}

.showcase-bar p:last-child,
.showcase-bar a {
  font-size: 1.1rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.03em !important;
  color: var(--color-btn) !important;
  text-decoration: none !important;
}

@media (max-width: 781px) {
  .showcase-content {
    padding: 2.5rem 1.5rem !important;
  }

  .showcase-bar {
    align-items: center !important;
    text-align: center !important;
    gap: 1rem !important;
    padding: 1.75rem 1.5rem !important;
  }

  /* Both inner columns (price + button) go full width so nothing
     overflows the card edge. */
  .showcase-bar > .wp-block-column {
    flex-basis: 100% !important;
    width: 100% !important;
  }

  /* Let the button fill the card width instead of running off it. */
  .showcase-bar .wp-block-button {
    width: 100% !important;
  }

  .showcase-bar .wp-block-button__link,
  .showcase-bar a {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
  }
}


/* =============================================
   LIST HIGHLIGHTS
   ============================================= */
.list-highlights {
  list-style: none !important;
  padding: 0 !important;
}

.list-highlights li {
  position: relative !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 1rem 0 1rem 2rem !important;
  font-family: var(--font-body);
  font-size: 1.08rem;
  font-weight: 500 ;
}

/* Gold diamond marker — top-aligned to the first line of text */
.list-highlights li::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 1.5rem !important;
  transform: translateY(-50%) rotate(45deg) !important;
  width: 8px !important;
  height: 8px !important;
  background: var(--color-accent) !important;
}

/* =============================================
   PHOTO BADGE  —  image with a floating corner tag
   ---------------------------------------------
   A photo with a small badge pinned to a corner: a price, a label,
   a "New" flag, etc. Reusable for listings, cards and galleries;
   colors come from theme presets. Editor classes:

     photo-badge      -> the Column/Group holding the photo (relative)
       Image .......... the photo (fills the frame)
       Group .......... photo-badge-tag   (the floating badge)
         Paragraph .... top line (large)   e.g. a price "$1,100 / week"
         Paragraph .... sub line (small caps)

   The tag styles its two lines by order (first = large, last = small
   caps), so keep them as two paragraphs in that order.
   ============================================= */

.photo-badge {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important;
  min-height: 460px !important;
}

.photo-badge .wp-block-image,
.photo-badge figure {
  flex: 1 !important;
  height: 100% !important;
  margin: 0 !important;
}

.photo-badge img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* The floating tag — pinned to the photo's lower-left corner */
.photo-badge-tag {
  position: absolute !important;
  left: 1.25rem !important;
  bottom: 1.25rem !important;
  max-width: 75% !important;
  background: var(--color-text) ;
  color: var(--color-text-inverse);
  padding: 1.4rem 2rem !important;
}

/* Top line (large) — e.g. a price */
.photo-badge-tag p:first-child {
  font-family: var(--font-heading);
  font-size: 2rem ;
  font-weight: 400 !important;
  line-height: 1 !important;
  margin: 0 !important;
}

/* Sub line (small caps) */
.photo-badge-tag p:last-child {
  margin: 0.55rem 0 0 !important;
  font-family: var(--font-body) ;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--color-muted);
}

/* Scale the tag down on phones so it doesn't crowd a smaller photo */
@media (max-width: 781px) {
  .photo-badge {
    min-height: 320px !important;
  }

  .photo-badge-tag {
    left: 0.75rem !important;
    bottom: 0.75rem !important;
    max-width: calc(100% - 1.5rem) !important;
    padding: 1rem 1.25rem !important;
  }

  .photo-badge-tag p:first-child {
    font-size: 1.5rem !important;
  }

  .photo-badge-tag p:last-child {
    font-size: 0.68rem !important;
    letter-spacing: 0.1em !important;
  }
}


/* ---- Spec table (label | value rows with divider lines) ---- */
.spec-table {
  width: 100% !important;
  margin: 0 0 1.75rem !important;
}

.spec-table table {
  width: 100% !important;
  border-collapse: collapse !important;
}

.spec-table td {
  padding: 1rem 0 !important;
  border: 0 !important;
  border-top: 1px solid rgba(107, 104, 104, 0.513) !important;
  vertical-align: middle !important;
}

.spec-table tr:last-child td {
  border-bottom: 1px solid rgba(107, 104, 104, 0.513) !important;
}

.spec-table td:first-child {
  width: 36% !important;
  font-family: var(--font-body) ;
  font-size: 0.74rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--color-muted) !important;
}

.spec-table td:last-child {
  font-family: var(--font-heading) !important;
  font-size: 1.3rem !important;
}

/* =============================================
   MEDIA CARD  +  ARROW LINK   (reusable)
   ---------------------------------------------
   MEDIA CARD — a content card: a photo on top (a Cover), an optional
   pill badge, then a body with heading, text and a link pinned to the
   bottom. Drop the cards into a Columns block. Editor classes:

     .media-card-grid   Columns block (equal-height cards)
       .media-card        each Column's Group (the card)
         .media-card-photo    Cover (photo; overlay 0, content top-left)
           .media-card-badge    Paragraph  e.g. "25 min away"
         .media-card-body     Group
           Heading h3/h4        (auto-styled serif)
           Paragraph            (description)
           .arrow-link          Paragraph (linked; pins to card bottom)

   ARROW LINK — .arrow-link: a gold, uppercase CTA link with a sliding
   arrow. Reusable anywhere; colors come from theme presets.
   ============================================= */

/* ---- gold arrow link ---- */
.arrow-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  color: var(--color-btn) !important;
  font-family: var(--font-body) !important;
  font-size: 0.8rem ;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
}

.arrow-link::after {
  color: var(--color-btn);
  content: '\2192' !important;                 /* -> */
  font-size: 1.1rem !important;
  transition: transform var(--transition) !important;
}

.arrow-link:hover::after {
  transform: translateX(4px) !important;
}

/* ---- card grid ---- */
.media-card-grid {
  max-width: var(--max-width) !important;
  margin: 0 auto !important;
  gap: 1.75rem !important;
  align-items: stretch !important;
}

.media-card {
  background: var(--color-bg) !important;
  border-radius: 5px !important;
  overflow: hidden !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.07) !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}

/* Force the card's children (photo + body) edge-to-edge, regardless of the
   Group's "inner blocks use content width" setting */
.media-card > * {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}

/* photo area (a Cover block); set overlay 0 + content position top-left */
.media-card-photo {
  min-height: 250px !important;
  width: 100% !important;
}

.media-card-photo img {
  width: 100% !important;
  object-fit: cover !important;
}

.media-card-badge {
  display: inline-block !important;
  background: var(--color-primary) !important;
  color: var(--color-text-inverse) !important;
  font-family: var(--font-body) !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  padding: 0.45rem 1rem !important;
  border-radius: 50px !important;
  margin: 0 !important;
}

/* card body — heading, text, then the link pinned to the bottom */
.media-card-body {
  padding: 1.75rem !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.85rem !important;
  flex: 1 !important;
  background-color: var(--color-surface);
}

.media-card-body h3,
.media-card-body h4 {
  font-family: var(--font-heading) !important;
  font-size: 1.45rem !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  color: var(--color-primary) !important;
  margin: 0 !important;
}

.media-card-body p:not(.arrow-link) {
  font-family: var(--font-body) !important;
  font-size: 1rem !important;
  line-height: 1.6 !important;
  color: var(--color-muted) !important;
  margin: 0 !important;
}

.media-card-body .arrow-link {
  margin-top: auto !important;
  padding-top: 0.5rem !important;
}


/* =============================================
   BLOCK EDITOR — ALIGNMENT BREAKOUT
   ============================================= */
.alignfull,
.wp-block-cover.alignfull {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}


/* =============================================
   FOOTER
   ============================================= */
.site-footer {
  background: var(--color-footer-bg);
  color: var(--color-footer-text);
}

.footer-inner {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 4.5rem 2rem 3rem;
}

.footer-col {
  padding: 0 2.5rem;
}

.footer-col:first-child {
  padding-left: 0;
}

.footer-col:last-child {
  padding-right: 0;
}

/* Faint vertical dividers between columns (Wine Diplomacy-style) */
.footer-col + .footer-col {
  border-left: 1px solid rgba(255, 255, 255, 0.12);
}

.footer-heading {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-inverse);
  margin: 0 0 1.25rem;
}

.footer-heading--hours {
  margin-top: 2rem;
}

/* About column */
.footer-logo img {
  max-height: 84px;
  width: auto;
}

/* Footer logo recolor — mirrors the nav logo (see .nav-logo--image /
   .nav-logo--natural). The logo file is used as a mask on its own link and
   filled with --logo-color, so any solid color works; the --natural class turns
   the mask off so the logo renders in its original colors. --logo-mask (the
   logo URL) and --logo-color are injected inline by onyx_render_footer, reading
   the same Customizer > Logo settings as the header. Defaults to white to match
   the previous brightness(0) invert(1) treatment. */
.footer-logo--image .custom-logo-link {
  display: inline-block;
  background-color: var(--logo-color, #ffffff);
  -webkit-mask: var(--logo-mask) center / contain no-repeat;
          mask: var(--logo-mask) center / contain no-repeat;
}

.footer-logo--image .custom-logo-link img {
  visibility: hidden;
}

.footer-logo--natural .custom-logo-link {
  background-color: transparent;
  -webkit-mask: none;
          mask: none;
}

.footer-logo--natural .custom-logo-link img {
  visibility: visible;
}

.footer-sitename {
  font-family: var(--font-logo);
  font-size: 1.5rem;
  letter-spacing: 0.08em;
  color: var(--color-text-inverse);
}

.footer-about-text {
  margin-top: 1.25rem;
  max-width: 34ch;
  font-size: 0.95rem;
  line-height: 1.8;
  color: var(--color-footer-text);
}

/* Contact + hours column */
.footer-contact-items {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.contact-item--footer {
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.95rem;
  color: var(--color-footer-text);
  opacity: 1;
}

.contact-item--footer svg {
  width: 17px;
  height: 17px;
  margin-top: 2px;
  color: var(--color-accent);
}

a.contact-item--footer:hover {
  color: var(--color-accent);
}

.footer-hours {
  font-size: 0.95rem;
  line-height: 1.9;
  color: rgba(239, 231, 210, 0.7);
}

/* Social links (icon chips) */
.social-links {
  display: flex;
  gap: 0.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.social-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 6px;
  color: var(--color-text-inverse);
  transition: color var(--transition), background var(--transition),
              border-color var(--transition), transform var(--transition);
}

.social-links a:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-primary);
  transform: translateY(-2px);
}

.social-links svg {
  width: 19px;
  height: 19px;
}

/* Bottom bar with gold accent rule */
.footer-bar {
  background: var(--color-footer-bg);
}

.footer-bar-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 1.5rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.85rem;
  color: rgba(239, 231, 210, 0.55);
  border-top: 2px solid var(--color-accent);
}

/* Copyright line — was inheriting the faded cream (.footer-bar-inner color),
   which all but disappears on a light footer. Use the accent so it reads on any
   footer background. Swap to var(--color-footer-text) if you prefer the neutral
   text tone over the gold. */
.footer-copy {
  color: var(--color-accent);
}

.footer-bar-right {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

/* "Site by Ixiun" credit lockup */
.footer-ixiun {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  text-decoration: none;
  line-height: 1;
  transition: opacity 0.2s ease;
}

.footer-ixiun--light { color: #ffffff; }
.footer-ixiun--dark  { color: #1a1a1a; }

.footer-ixiun-label {
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: currentColor;
  opacity: 0.55;
}

.footer-ixiun-logo {
  height: 50px;
  width: auto;
  display: block;
}

.footer-ixiun:hover { opacity: 0.75; }

/* Optional full-width image across the very bottom (e.g. a treeline) */
.footer-image {
  line-height: 0;
}

.footer-image img {
  display: block;
  width: 100%;
  height: auto;
}

/* Remove Media & Text gap so its 50% edge lines up with the Columns block */
.wp-block-media-text.alignfull {
  column-gap: 0 !important;
  gap: 0 !important;
}

.section-eyebrow {
  display: block;
  font-family: var(--font-body) !important;
  font-size: 1.12rem;
  font-weight: 600 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 0.85rem;
}

.section-eyebrow--primary {
  color: var(--color-primary);
}

.section-eyebrow--secondary {
  color: var(--color-secondary);
}

.section-eyebrow--muted {
  color: var(--color-muted);
}



/* =============================================
   FEATURE CIRCLES  +  PHOTO STACK   (reusable)
   ---------------------------------------------
   FEATURE CIRCLES — a row of round photo thumbnails, each with a short
   label, split by thin dividers. Good for "why stay here" highlights.
     feature-circles   Row block (the container)
       feature-circle    Group per item (Image FIRST, then a label Paragraph)
         feature-icon      the Image (forced to a round thumbnail — 160px)
   Items divide evenly; they stack vertically under 600px.

   PHOTO STACK — two photos overlapping on a stagger, for an editorial feel.
     photo-stack       Group/Row (the container)
       stack-photo stack-photo--front   Image (the top card)
       stack-photo stack-photo--back    Image (tucked lower, overlapping)
   Add a caption on an image for the gold figcaption tag; stacks vertically
   on phones. Colors/fonts come from theme presets.
   ============================================= */

/* Feature highlights — a Row of .feature-circle items, each a small
   rounded photo thumbnail with a short label beside it. */


.feature-circle {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  padding: 0 1.5rem;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
}

/* divider line between feature items */
.feature-circle + .feature-circle {
  border-left: 1px solid var(--color-muted);
}

/* the label sits under the thumb and is free to wrap normally */
.feature-circle p {
  margin: 0;
  min-width: 0;
}

/* The thumbnail is an Image block. Size is forced here so it stays a tidy
   thumbnail regardless of the editor's image size — change 160px to scale. */
.feature-icon,
.feature-icon figure {
  flex: none;
  margin: 0;
  line-height: 0;
}

.feature-icon img {
  display: block;
  width: 160px !important;
  height: 160px !important;
  object-fit: cover;
  border-radius: 100px;
}

/* ---- overlapping photo cards ----
   Cards are sized in % and the stagger uses clamp(), so the pair scales
   down cleanly on narrow screens. */
.photo-stack {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 0;
}

.stack-photo {
  position: relative;
  width: 100%;
  margin: 0;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  box-shadow: 0 25px 50px -22px rgba(26, 27, 26, 0.5);
}

.stack-photo--front {
  z-index: 2;
}

/* The second card tucks lower and slides left to overlap the first. */
.stack-photo--back {
  margin-left: -20%;
  margin-top: clamp(4rem, 11vw, 9rem);
  z-index: 1;
}

.stack-photo img,
.stack-photo-placeholder {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}


/* photo-stack: cap the pair's width once its column stacks */
@media (max-width: 900px) {
  .photo-stack {
    max-width: 480px;
    margin: 0 auto;
  }
}

/* Phone: stack feature items vertically (dividers go horizontal), and drop
   the photo overlap (stack the two cards full-width). */
@media (max-width: 600px) {
  .feature-circles {
    flex-direction: column;
  }

  .feature-circle {
    padding: 0;
  }

  .feature-circle + .feature-circle {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-left: 0;
    border-top: 1px solid rgba(26, 27, 26, 0.18);
  }

  .photo-stack {
    flex-direction: column;
    align-items: center;
    max-width: 360px;
  }

  .stack-photo {
    width: 100%;
  }

  .stack-photo--back {
    margin-left: 0;
    margin-top: 1.25rem;
  }
}

/* =============================================
   STAT GRID   (reusable)
   A stats / facts panel. Locked to 2 columns (any number of rows);
   the divider color comes from the --stat-divider token.
   Apply class "stat-grid" to the Column that holds the 2×3 stat panel.
   Expects three Grid blocks inside, each with two Cover or Group blocks.

   Divider lines are drawn as real borders on the rows and cells (NOT as
   fixed-position pseudo-elements), so they always follow the actual cell
   heights — rows can be uneven (a label that wraps to two lines) and the
   lines still land exactly on the boundaries at every screen width.
   ============================================= */
.stat-grid {
  border: 3px solid var(--stat-divider);
  overflow: hidden;
  align-self: stretch;
}

/* Collapse the theme block-gap (24px) between the stacked rows so they sit
   flush — otherwise the gap splits the vertical center divider into three
   disconnected segments and detaches the horizontal lines. */
.stat-grid > * + * {
  margin-block-start: 0 !important;
}

/* Each row of the grid — two equal columns, no gap (borders draw the lines).
   align-items:stretch makes both cells match the taller one, so the vertical
   divider spans the full row height. */
.stat-grid .wp-block-group.is-layout-grid,
.stat-grid [class*="is-layout-grid"] {
  gap: 0 !important;
  grid-template-columns: 1fr 1fr !important;
  align-items: stretch !important;
}

/* Horizontal divider — bottom border on every row except the last */
.stat-grid [class*="is-layout-grid"]:not(:last-child) {
  border-bottom: 3px solid var(--stat-divider);
}

/* Vertical divider — right border on the left cell of each row */
.stat-grid [class*="is-layout-grid"] > *:first-child {
  border-right: 3px solid var(--stat-divider);
}

/* Strip Cover block backgrounds — cells sit on the section background.
   Flex so the content vertically centers when a sibling cell is taller. */
.stat-grid .wp-block-cover {
  background: transparent !important;
  background-image: none !important;
  min-height: 0 !important;
  padding: 0 !important;
  display: flex !important;
}

.stat-grid .wp-block-cover__background,
.stat-grid .wp-block-cover::after {
  display: none !important;
}

.stat-grid .wp-block-cover__inner-container {
  padding: 2.25rem 1.75rem !important;
  width: 100%;
}

/* Stat value — large serif */
.stat-grid .wp-block-cover__inner-container p:first-child,
.stat-grid .stat-value {
  font-family: var(--font-heading) !important;
  font-size: clamp(1.9rem, 3.5vw, 3rem) !important;
  font-weight: 400 !important;
  line-height: 1.1 !important;
  color: var(--color-primary) !important;
  margin-bottom: 0.4rem !important;
}

/* Stat label — small sans */
.stat-grid .wp-block-cover__inner-container p:last-child,
.stat-grid .stat-label {
  font-family: var(--font-body) !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.04em !important;
  color: var(--color-muted) !important;
  margin: 0 !important;
}

/* Mobile — keep the 2×3 shape but tighten padding and scale the numbers down
   so long values ("Seasonal", "Sat → Sat") don't overflow their cell. */
@media (max-width: 600px) {
  .stat-grid .wp-block-cover__inner-container {
    padding: 1.4rem 1rem !important;
  }

  .stat-grid .wp-block-cover__inner-container p:first-child,
  .stat-grid .stat-value {
    font-size: clamp(1.4rem, 6.5vw, 1.9rem) !important;
  }

  .stat-grid .wp-block-cover__inner-container p:last-child,
  .stat-grid .stat-label {
    font-size: 0.78rem !important;
    letter-spacing: 0.02em !important;
  }
}

/* =============================================
   CONTENT SECTION   (reusable layout)
   Three primitives you can mix: a padded shell (content-section), a
   2-column split (content-split), and an evenly-spaced content stack
   (content-stack). The stack works on ANY Group to auto-space its
   children — that's the "adds gaps between content" behavior. Below is
   the original text + framed-photo pair arrangement it grew from.

   content-section      → outer Group 
   content-split       → the Columns block 
   content-stack      → the LEFT Column (text)
   content-heading      → the H2 
   content-body         → each body Paragraph
   framed-photos       → the RIGHT Column (holds BOTH images)
   framed-photo        → each Image block (white frame + shadow)
   framed-photo--main  → the large photo
   framed-photo--inset → the small photo (overlaps bottom-left)
   ============================================= */
.content-section {
  padding: 6rem 2rem;
  padding-top: 120px;
  padding-bottom: 120px;
}

.content-split {
  max-width: var(--max-width) !important;
  margin: 0 auto;
  align-items: center !important;
  gap: 4rem !important;
}

.content-stack {
  display: flex !important;
  flex-direction: column !important;
  /* the "auto-spacing" — one gap between every child, tunable per section */
  gap: var(--stack-gap, 1.4rem) !important;
}

/* A core Separator (<hr>) draws its line as a border on a zero-height box.
   As a flex item it shrinks to zero on the vertical axis, so the line
   collapses and "disappears" (the block is still there). Give it a real
   box and stop it from shrinking, and paint the line ourselves so it
   survives regardless of the chosen separator style. */
.content-stack hr.wp-block-separator {
  flex: 0 0 auto !important;   /* don't let flex shrink it to zero */
  height: 2px !important;      /* give the line a real box */
  width: 100% !important;      /* full width of the stack */
  border: none !important;
  background: currentColor !important;
  opacity: 0.25 !important;
  margin: 0 !important;        /* the stack's gap already handles spacing */
}

.content-heading {
  font-size: clamp(2.2rem, 4.5vw, 3.4rem) !important;
  font-weight: 600 !important;
  line-height: 1.12 !important; 
}

.content-body {
  font-size: 1.15rem !important;
  line-height: 1.85 !important;
  margin: 0 !important;
}

/* Right column is the positioning context for the overlapping inset photo.
   Pages may label the column .framed-photos (plural, per the convention above)
   or .framed-photo (singular, which is also what carries the .framed-photo img
   frame styling). Support both so the absolutely-positioned --inset always
   anchors to the column, never to a box higher up the page. Scoped to
   .wp-block-column so an image figure is never turned into the offset parent. */
.framed-photos,
.wp-block-column.framed-photo {
  position: relative !important;
  padding: 0 !important;
}

/* White polaroid frame + soft shadow on every photo in the stack */
.framed-photo img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  border: 10px solid var(--color-surface) !important;
  border-radius: 2px !important;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.18) !important;
}

/* Large lake photo — cropped to a portrait frame like the reference */
.framed-photo--main img {
  aspect-ratio: 4 / 5 !important;
  object-fit: cover !important;
}

/* Small sign photo — overlaps the bottom-left corner of the main photo */
.framed-photo--inset {
  position: absolute !important;
  left: -2.5rem !important;
  bottom: -2.5rem !important;
  width: 50% !important;
  z-index: 2 !important;
}

@media (max-width: 781px) {
  .content-section {
    padding: 3.5rem 1.5rem;
    padding-top: 60px;
    padding-bottom: 60px;
  }

  .content-split {
    gap: 2.5rem !important;
  }

  /* Keep the overlap on mobile, but center the inset horizontally over the
     main photo behind it rather than hugging the left corner. */
  .framed-photo--inset {
    left: 50% !important;
    right: auto !important;
    bottom: -1rem !important;
    width: 60% !important;
    transform: translateX(-50%) !important;
    margin: 0 !important;
  }


  .framed-photo img {
    border-width: 7px !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.16) !important;
  }
}

/* =============================================
   FINAL CTA  —  "Ready for your week on the lake?"
   A full-width dark Cover with a serif headline, one line
   of copy, and two centered buttons. Build in the editor:

     Cover (Full width) .final-cta
       · background: a lake photo · overlay color black, ~60%
       · content position: Center
       Heading (h2)            → the headline (auto serif white)
       Paragraph .final-cta-text → the supporting line
       Buttons (justify: Center)
         Button (Primary style) → "Get in touch"  (mailto:)
         Button (Outline style) → the phone number (tel:)
   ============================================= */
.final-cta {
  text-align: center !important;
}

.final-cta .wp-block-cover__inner-container {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 1.5rem !important;
  max-width: 760px !important;
  margin: 0 auto !important;
  padding: 3rem 1.5rem !important;
}

.final-cta :is(h1, h2, h3) {
  font-size: clamp(2.2rem, 5vw, 3.6rem) !important;
  line-height: 1.1 !important;
  color: #fff !important;
  margin: 0 !important;
}

.final-cta-text {
  font-family: var(--font-body) !important;
  font-size: clamp(1rem, 2vw, 1.2rem) !important;
  line-height: 1.6 !important;
  color: rgba(255, 255, 255, 0.8) !important;
  margin: 0 !important;
  max-width: 48ch !important;
}

.final-cta .wp-block-buttons {
  gap: 1rem !important;
  margin-top: 0.5rem !important;
}

/* =============================================
   RESPONSIVE
   ============================================= */
@media (max-width: 1100px) {
  :root {
    /* 80px + room for the ~0.75rem gap the logo rule below opens up top and
       bottom. The bar has to grow rather than just inset its contents: the tall
       element is the brand text stack (a wrapped two-line title over the
       tagline), which is close to the bar's full height on its own, so insetting
       alone would leave it flush. */
    --nav-height:        104px;
    /* Mobile: don't shrink the nav on scroll. The shrink animates .site-main's
       reserved top padding (nav-height -> shrunk), which shortens the document
       mid-swipe and makes the hero visibly jump up. Keeping the shrunk height
       equal to the full height neutralizes every .is-scrolled size change (nav,
       logo, and the reserved padding) at once, so nothing reflows on scroll. */
    --nav-height-shrunk: var(--nav-height);
  }

  .nav-inner .nav-menu {
    display: none;
  }

  .nav-hamburger {
    display: flex;
  }

  /* Indent the wordmark to line up with the hero text below it. Desktop already
     aligns (nav + hero share the 1200px content box); on mobile the hero is a
     full-width Cover with ~2rem of side padding while .nav-inner has none, so the
     wordmark sits flush to the edge. Match that padding here. Tweak this value if
     the hero's side padding is changed in the editor. */
  .nav-inner {
    padding-left: 2rem;
  }

  .nav-right .nav-social-link {
    display: none;
  }

  /* Top bar hides on mobile; contact info lives in the drawer instead, so the
     header only reserves the nav height even when the bar is enabled. */
  .nav-topbar {
    display: none;
  }

  .has-topbar .site-main {
    padding-top: var(--nav-height);
  }

  /* Kill fixed-background "parallax" on Cover blocks on mobile. WordPress'
     "Fixed background" toggle renders the image as a pinned layer
     (background-attachment: fixed), which mobile browsers repaint jerkily so the
     hero image stutters/jumps on every scroll — while desktop (and emulators)
     render it fine. Forcing scroll makes the image travel with the content. */
  .wp-block-cover.has-parallax,
  .wp-block-cover .has-parallax,
  .wp-block-cover__image-background.has-parallax {
    background-attachment: scroll !important;
  }

  /* Logo: constant, compact size on mobile. The desktop logo shrinks on scroll
     (1.8rem -> 1.4rem); on mobile the nav no longer shrinks, so that animation
     only served to grow the long wordmark into the hamburger mid-transition.
     Freeze base + scrolled to one non-wrapping line, sized to the viewport with
     clamp() so it always clears the hamburger on any phone width. Tune the
     clamp() middle/max value if you want the wordmark larger or smaller. */
  .nav-logo--text .nav-logo-title,
  body.nav-anim-shrink.is-scrolled .nav-logo--text .nav-logo-title {
    font-size: clamp(0.95rem, 4.3vw, 1.2rem);
    letter-spacing: 0.05em;
    /* Allow the wordmark to drop to two lines rather than forcing one line. */
    white-space: normal;
    line-height: 1.15;
  }

  /* Cap the wordmark's width so a long name wraps before it slides under the
     fixed hamburger (right: 2rem, 40px wide) instead of running into it. */
  .nav-logo--text {
    max-width: calc(100% - 40px - 1rem);
  }

  /* Breathing room above and below the logo. The base rule sizes the logo box to
     the full bar height, so it sits flush to both edges; shrink it by 1.5rem to
     open a 0.75rem gap top and bottom.

     align-self is what actually centers it. .nav-inner is align-items:stretch,
     and a flex item with a definite height under stretch falls back to
     flex-start — so the box would pin to the top of .nav-inner's content box and
     dump all the slack at the bottom. The base rule's negative margins exist to
     cancel .nav-inner's 1rem padding at full height; here they'd reintroduce that
     same top-heavy offset, so they're zeroed out and the gap comes purely from
     the height reduction, split evenly by the centering.

     The .is-scrolled selector has to be repeated or it would win and reset the
     height. Keep --nav-height above in step with the 1.5rem or the brand text
     (the tall element in this bar) goes flush again. */
  .nav-logo,
  body.nav-anim-shrink.is-scrolled .nav-logo {
    height: calc(var(--nav-height) - 1.5rem);
    align-self: center;
    margin-top: 0;
    margin-bottom: 0;
  }
}

@media (max-width: 768px) {
  /* ── Full-width CTA buttons on mobile ──────────────────────────
     Stack every standard Button block full-width so they're easy to
     tap — the same treatment the hero CTAs already get. Compact
     "tag" style pills (cabin-pills amenity tags, adventure-filter-btn
     map filters, arrow-btn) keep their natural width and are left out.

     The <a> already carries width:100%, but that's 100% of the .wp-block-button
     wrapper, which is a shrink-to-fit flex item — so the wrapper is what has to
     be widened. Column direction makes the cross axis horizontal (in a row, that
     stretch only stretched them vertically, which is why they still hugged their
     label), and the width:100% keeps .wp-block-buttons itself from shrinking to
     fit inside a flex/grid parent like .banner-content, which centers its
     children with align-items:flex-start. */
  .wp-block-buttons:has(.is-style-primary, .is-style-secondary, .is-style-outline) {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
  }

  .wp-block-buttons:has(.is-style-primary, .is-style-secondary, .is-style-outline)
    > .wp-block-button {
    width: 100% !important;
  }

  .is-style-primary .wp-block-button__link,
  .is-style-secondary .wp-block-button__link,
  .is-style-outline .wp-block-button__link {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    /* Scale the desktop "high-impact" footprint down to phone size. The label is
       full-width and centered here, so the 3.6rem side padding and the 260px
       floor buy nothing — and at 1rem/0.2em a CTA like "See the summer
       collection" wraps to two lines, which is what made these read as oversized
       slabs. Matches the hero CTA padding set further down. */
    min-width: 0 !important;
    padding: 1rem 1.5rem !important;
    font-size: 0.85rem !important;
    letter-spacing: 0.14em !important;
  }

  .footer-inner {
    grid-template-columns: 1fr;
    padding: 3rem 1.5rem 2rem;
  }

  .footer-col {
    padding: 0;
  }

  /* Stack: dividers go horizontal between rows instead of vertical */
  .footer-col + .footer-col {
    border-left: none;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    margin-top: 2.5rem;
    padding-top: 2.5rem;
  }

  .footer-bar-inner {
    flex-direction: column;
    gap: 0.5rem;
    text-align: center;
  }

  /* --- Hero: first Cover in <main> — mobile polish ---
     Heroes carry no class, so we target the first Cover in the main region.
     Structure per hero: H2.section-eyebrow · H1 · Paragraph · Buttons
     (Primary + Secondary styles). Rules below assume a left-aligned hero. */
  .site-main > .wp-block-cover:first-child {
    min-height: 100svh !important; /* svh dodges the mobile address-bar height jump */
  }

  .site-main > .wp-block-cover:first-child .wp-block-cover__inner-container {
    padding: 40px 1.5rem 56px !important;
  }

  .site-main > .wp-block-cover:first-child .section-eyebrow {
    font-size: 0.8rem !important;
    letter-spacing: 0.16em !important;
    margin-bottom: 0.6rem !important;
  }

  .site-main > .wp-block-cover:first-child h1 {
    font-size: clamp(2.1rem, 9vw, 3.1rem) !important;
    line-height: 1.1 !important;
    margin-bottom: 0.8rem !important;
  }

  .site-main > .wp-block-cover:first-child p:not(.section-eyebrow) {
    font-size: 1.02rem !important;
    line-height: 1.5 !important;
    max-width: 34ch !important; /* keep the line length comfortable to read */
  }

  /* Stack the two CTAs full-width so they're easy to tap and never overflow. */
  .site-main > .wp-block-cover:first-child .wp-block-buttons {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.75rem !important;
    width: 100%;
    max-width: 340px;
  }

  .site-main > .wp-block-cover:first-child .wp-block-button__link {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    padding: 1rem 1.5rem !important;
  }

  .wp-block-media-text__content {
    padding-top: 50px !important;
    padding-bottom: 50px !important;
  }
}

/* the row — cards stay equal size, they do NOT resize on hover */
.feature-cards {
  display: flex;
  gap: 1rem;
}

.feature-cards .feature-card {
  flex: 1;
  min-height: 460px;
  position: relative;
  overflow: hidden;
  /* Kill WordPress's block-gap margin-block-start on the non-first cards —
     the same positional offset the amenity grid had. Spacing between cards
     comes from the row's flex `gap`, so the cards need no margins. */
  margin: 0 !important;
}

/* force the Cover's inner container to fill the whole card and center the box,
   so the frame sits dead-center and can expand to every edge */
.feature-cards .feature-card .wp-block-cover__inner-container {
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* the box: small dark square (white border) centered over a clear photo at rest */
.feature-cards .feature-frame {
  box-sizing: border-box;
  width: 55%;
  height: 42%;                   /* small square-ish box at rest — tweak to taste */
  border: 2px solid #fff;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1rem 1.5rem;
  color: #fff;
  overflow: hidden;
  /* EXIT timing (box shrinking): small delay so the text disappears first */
  transition: width 0.4s ease 0.12s, height 0.4s ease 0.12s;
}

/* hover anywhere on the card: the box grows to cover the whole card */
.feature-cards .feature-card:hover .feature-frame {
  width: 100%;
  height: 100%;
  /* ENTER timing (box expanding): immediate, no delay */
  transition: width 0.45s ease, height 0.45s ease;
}

/* heading stays visible at all times */
.feature-cards .feature-frame :is(h1, h2, h3, h4, h5, h6) {
  margin: 0;
}

/* description hidden at rest; on hover it opens and pushes the title up */
.feature-cards .feature-frame p {
  max-width: 22rem;              /* fixed line length so text never re-wraps mid-animation */
  max-height: 0;
  min-height: 0;                 /* flex items default to min-height:auto — must zero it */
  opacity: 0;
  margin: 0;
  overflow: hidden;
  /* EXIT timing: collapse fast and immediately, so text is gone before the box shrinks */
  transition: max-height 0.2s ease, opacity 0.15s ease, margin-top 0.2s ease;
}
.feature-cards .feature-card:hover .feature-frame p {
  max-height: 20rem;            /* raise this if a long description still gets clipped */
  opacity: 1;
  margin-top: 0.75rem;
  /* ENTER timing: delayed reveal so the box finishes growing first */
  transition: max-height 0.4s ease 0.35s, opacity 0.3s ease 0.45s, margin-top 0.4s ease 0.35s;
}

/* mobile: no hover exists — show the box filled with text visible */
@media (max-width: 781px) {
  .feature-cards {
    flex-direction: column;
  }
  .feature-cards .feature-frame {
    width: 100%;
    height: 100%;
  }
  .feature-cards .feature-frame p {
    max-height: 15rem;
    opacity: 1;
    margin-top: 0.75rem;
  }
}

/* =============================================
   BANNER SPLIT  —  bordered media + text card   (reusable)
   ---------------------------------------------
   A rounded, softly-bordered card split 50/50: a photo on one side and a
   text panel on the other (eyebrow, serif heading, copy, a pill CTA). Generic
   promo / collection / feature callout. Colors come from theme presets.
   Editor classes:

     banner-split                 → the Columns block (the card frame)
     ├─ Column                      (holds an Image — auto-detected, NO class)
     │  └─ Image                     (fills its half, cropped to cover)
     └─ Column .banner-content
        ├─ Heading/Paragraph .section-eyebrow   (small gold label)
        ├─ Heading (h2 or h3)                    (auto serif)
        ├─ Paragraph                             (body copy)
        └─ Buttons
           └─ Button                             (use any theme Button style)

   Put the image Column on the LEFT or RIGHT — it's auto-detected either way
   (it's simply the column WITHOUT .banner-content).
   Stacks to a single column (photo on top) on phones.
   ============================================= */

.banner-split {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0 !important;
  align-items: stretch !important;
  background: var(--color-surface) !important;
  border: 1px solid color-mix(in srgb, var(--color-primary) 12%, transparent) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
}

/* Both halves share the row equally; the 320px basis lets them wrap to a
   stack on their own on narrow screens even before the breakpoint below. */
.banner-split > .wp-block-column {
  flex: 1 1 320px !important;
  min-width: 0 !important;
  align-self: stretch !important;
  margin: 0 !important;
}

/* Media half — the column WITHOUT the content class. Photo fills its half. */
.banner-split > .wp-block-column:not(.banner-content) {
  padding: 0 !important;
  display: flex !important;
  min-height: 460px !important;
}

.banner-split > .wp-block-column:not(.banner-content) .wp-block-image,
.banner-split > .wp-block-column:not(.banner-content) figure {
  flex: 1 !important;
  margin: 0 !important;
}

.banner-split > .wp-block-column:not(.banner-content) img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* Text half — padding scales smoothly with the viewport (no hard jump). */
.banner-content {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-start !important;
  gap: 1.15rem !important;
  padding: clamp(1.75rem, 4vw, 3.5rem) !important;
}

.banner-content > * {
  margin: 0 !important;
  max-width: 100% !important;
}

.banner-content :is(h1, h2, h3) {
  font-size: clamp(1.9rem, 3.5vw, 3rem) !important;
  line-height: 1.15 !important;
  overflow-wrap: break-word !important;   /* long words never overflow the card */
}

/* Mobile — stack the two halves (photo on top), shorter photo */
@media (max-width: 781px) {
  .banner-split {
    border-radius: 12px !important;
  }

  .banner-split > .wp-block-column {
    flex-basis: 100% !important;
  }

  .banner-split > .wp-block-column:not(.banner-content) {
    min-height: 240px !important;
  }
}

/* =============================================
   QUOTE  —  core Quote block (.wp-block-quote)
   ---------------------------------------------
   Styles the stock Quote block, so an editor gets the look with no class to
   remember. Structure WordPress outputs:

     blockquote.wp-block-quote
       Paragraph      the quote itself (serif italic, muted)
       cite           optional attribution (small caps, gold rule)

   The quote body runs in --color-muted so it reads as a set-aside voice rather
   than body copy. There is no left rule and no floating decorative mark: the
   quotation marks are inline, opening the first paragraph and closing the last,
   so they wrap the actual words the way a quote does on the page. They're sized
   in em, so they scale with the quote at every viewport with nothing to re-tune.

   Alignment is respected (Align Center is the variant in the seasonal-quote
   section). Core's own Plain and Large block styles still work — Plain drops the
   marks for bare type, Large scales the whole thing up.
   ============================================= */

.wp-block-quote {
  /* Core ships a heavy black border-left on this block — off, in favor of the
     inline marks below. */
  border: none;
  margin: 3rem 0;
  padding: 0;
  color: var(--color-muted);
  font-family: var(--font-heading);
  font-style: italic;
  /* Display-scale on desktop — a quote is a set piece, not a sidebar note. The
     clamp's ceiling is what a wide screen gets; the floor is what keeps it from
     shrinking past readable on a phone (see the mobile block below, which caps
     the vw growth so a long quote can't run away with a narrow column). */
  font-size: clamp(1.4rem, 2.9vw, 2.6rem);
  line-height: 1.35;
}

.wp-block-quote p {
  margin: 0 0 0.75rem;
}

.wp-block-quote p:last-of-type {
  margin-bottom: 0;
}

/* The marks themselves — accent-colored, upright (the quote is italic, but a
   slanted mark reads as a stray comma), and a touch larger than the words so
   they register as punctuation rather than letters. Sized in em so they track
   the clamped font size on their own.

   Multi-paragraph quotes get one opening mark on the first paragraph and one
   closing mark on the last, not a pair per paragraph — which is the typographic
   convention, and why these hang off :first-of-type / :last-of-type rather than
   the blockquote itself. */
.wp-block-quote p:first-of-type::before,
.wp-block-quote p:last-of-type::after {
  color: var(--color-accent);
  font-family: var(--font-heading);
  font-size: 1.3em;
  font-style: normal;
  line-height: 0;                    /* keeps the oversized glyph from opening up the line box */
  vertical-align: -0.12em;           /* sits the mark on the text, not above it */
}

.wp-block-quote p:first-of-type::before {
  content: '\201C';                  /* “ */
  margin-right: 0.06em;
}

.wp-block-quote p:last-of-type::after {
  content: '\201D';                  /* ” */
  margin-left: 0.04em;
}

/* Attribution — the counterweight to the italic serif above: upright, small,
   letterspaced caps in the body font, led by a short accent dash. */
.wp-block-quote cite,
.wp-block-quote .wp-block-quote__citation {
  display: block;
  margin-top: 1.5rem;
  font-family: var(--font-body);
  /* Nudged up with the quote, but deliberately still small — the gap in scale
     between the two is what keeps the attribution from reading as more quote. */
  font-size: 0.8rem;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-muted);
  opacity: 0.8;
}

.wp-block-quote cite::before,
.wp-block-quote .wp-block-quote__citation::before {
  content: '';
  display: inline-block;
  width: 1.75rem;
  height: 1px;
  margin-right: 0.7rem;
  vertical-align: middle;
  background: var(--color-accent);
}

/* ---- Centered (block toolbar ▸ Align text ▸ Center) ----
   The marks travel with the words, so a centered quote needs no repositioning —
   only a line-length cap, since at display size a quote spanning a full-width
   column runs uncomfortably long. */
.wp-block-quote.has-text-align-center {
  max-width: 24ch;
  margin-inline: auto;
  text-align: center;
}

.wp-block-quote.has-text-align-center cite::before,
.wp-block-quote.has-text-align-center .wp-block-quote__citation::before {
  /* The dash becomes a rule above the attribution rather than a lead-in beside it. */
  display: block;
  width: 2.5rem;
  margin: 0 auto 0.9rem;
}

/* ---- Right-aligned ---- */
.wp-block-quote.has-text-align-right {
  text-align: right;
}

/* ---- Core's Plain style — bare type, no marks ---- */
.wp-block-quote.is-style-plain p:first-of-type::before,
.wp-block-quote.is-style-plain p:last-of-type::after {
  content: none;
}

/* ---- Core's Large style — same frame, bigger voice ---- */
.wp-block-quote.is-style-large {
  font-size: clamp(1.6rem, 3.8vw, 3.4rem);
}

/* ---- Phones ----
   The base sizes above are tuned for a wide screen, and their vw terms grow
   faster than a phone column can carry — a 2.9vw quote wraps to a wall of ragged
   lines in a narrow column. The type is re-clamped here into a tight readable
   band; the marks are em-sized, so they follow it down on their own. The centered
   variant drops its ch cap (the column is already narrower than 24ch, so the cap
   would only squeeze it further). */
@media (max-width: 781px) {
  .wp-block-quote {
    margin: 2.25rem 0;
    font-size: clamp(1.25rem, 4.6vw, 1.6rem);
    line-height: 1.4;
  }

  .wp-block-quote.has-text-align-center {
    max-width: none;
  }

  .wp-block-quote.is-style-large {
    font-size: clamp(1.4rem, 5.4vw, 1.95rem);
  }

  .wp-block-quote cite,
  .wp-block-quote .wp-block-quote__citation {
    margin-top: 1.15rem;
    font-size: 0.72rem;
  }
}