/* ==========================================================================
   Silver Oaks — Homepage Hero Booking Engine
   Figma booking-gadget: desktop 279:1260 (1520x116), mobile 302:1780.
   Injected into Rafa's [booking_engine_placeholder]. Scoped to .so-he.
   ========================================================================== */

.so-hero-engine-mounted { width: 100%; }

/* --------------------------------------------------------------------------
   Hero vertical rhythm (Figma hero-section 279:1251, 1024 tall):
   title block sits low (~47%), 104px gap to the gadget, gadget 40px above the
   hero base. Bottom-aligning the cover content reproduces that; the top
   padding is a guard so the copy can never slide under the fixed nav.
   -------------------------------------------------------------------------- */
.so-he-hero {
  align-items: flex-end !important;
  padding-top: 150px !important;
  padding-bottom: 40px !important;
}

.so-he-hero .wp-block-spacer {
  height: 104px !important;   /* Figma: content-wrapper -> booking-gadget */
}

/* In Figma the hero gadget is a white box sitting directly on the hero image,
   so drop the theme's gray band behind it (the CTA island keeps its gray). */
.so-he-hero .wp-block-group.has-custom-light-gray-background-color {
  background: transparent !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* --------------------------------------------------------------------------
   CTA island (Figma cta-section 279:1342): gray #E1E6E9 island holding the
   H2 + the same gadget. Figma padding 88/152/104/152, gap 48 heading->gadget.
   Island is inset 48px from the viewport edges (1824 of 1920), not full bleed.
   -------------------------------------------------------------------------- */
/* The section carries the theme's own `alignfull` class so block themes break
   it out of the narrow content column natively (no 100vw scrollbar overflow). */
.so-he-section {
  padding: 64px 0;
}

.so-he-island {
  box-sizing: border-box;
  width: calc(100% - 96px) !important;
  margin-inline: auto !important;
  padding: 88px 152px 104px !important;
  background: #E1E6E9;
}

.so-he-island > * + .so-hero-engine-mounted { margin-top: 48px; }

/* Island heading (Figma H2 48/72, centered) */
.so-he-island-title {
  font-family: 'Sumana', serif;
  font-size: 48px;
  font-weight: 400;
  line-height: 72px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #000;
  text-align: center;
  margin: 0;
}


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

/* Gadget: white container, padding 24 all round (Figma booking-gadget fill is
   an opaque white gradient + inner shadow + background blur). */
.so-he {
  position: relative;
  display: flex;
  align-items: flex-end;          /* underlines sit flush with the button base */
  gap: clamp(32px, 6vw, 98px);    /* Figma: 98px between fields group and button */
  width: 100%;
  padding: 24px;
  background: #FFFFFF;
  box-shadow: inset -5px -5px 250px rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(42px);
  -webkit-backdrop-filter: blur(42px);
  font-family: 'Open Sans', sans-serif;
}

.so-he-fields {
  display: flex;
  align-items: flex-end;
  gap: clamp(24px, 5vw, 104px);   /* Figma: 104px between the three fields */
  flex: 1 1 auto;
  min-width: 0;
}

/* dropdown-item: label + value + chevron on one row, 1px underline below */
/* Figma dropdown-item: 60px tall = 8 top pad + 28 row + 24 gap + 1px line */
.so-he-field {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 8px 0 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font: inherit;
}

/* Figma dropdown-item container: 304x28, padding 12/8/0/8, space-between */
.so-he-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 8px 0;
  min-height: 28px;
}

/* Field text: label at rest, selected value once set — same Label/S-Sb style */
.so-he-fieldtext {
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: #000;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.so-he-fieldtext.is-empty { color: #000; }

.so-he-arrow { flex-shrink: 0; color: #000; }

/* 1px full-width underline (Figma line). Colour follows the surface it sits
   on: white over the gray island/hero band, black on light surfaces. */
.so-he-line {
  display: block;
  height: 1px;
  background: var(--so-he-line-color, #000);
  width: 100%;
}

/* Empty-field feedback flash */
@keyframes so-he-flash {
  0%, 100% { background: transparent; }
  30%      { background: rgba(176, 71, 47, 0.12); }
}
.so-he-field.so-he-flash { animation: so-he-flash 0.6s ease; }
.so-he-field.so-he-flash .so-he-line { background: #B0472F; }

/* CTA: main-button Primary, padding 24/48, black, no radius */
.so-he-cta {
  flex: 0 0 auto;
  padding: 24px 48px;
  background: #000;
  color: #fff;
  border: none;
  border-radius: 0;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s;
}

.so-he-cta:hover { background: #262626; }

/* Feedback message */
.so-he-msg {
  position: absolute;
  bottom: -28px;
  left: 0;
  margin: 0;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: #B0472F;
  min-height: 18px;
}
.so-he-msg:empty { display: none; }

/* ── Guests stepper popover ────────────────────────────────────── */
#so-he-guests-pop {
  position: absolute;
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: #fff;
  border: 0.5px solid #000;
  padding: 14px 18px;
  box-shadow: 0 16px 56px rgba(0, 0, 0, 0.24);
  font-family: 'Open Sans', sans-serif;
}
#so-he-guests-pop[hidden] { display: none; }
.so-he-gp-label { font-size: 12px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: #151515; }
.so-he-gp-stepper { display: flex; align-items: center; gap: 14px; }
.so-he-gp-btn {
  width: 28px; height: 28px; border: 1px solid rgba(21,21,21,0.35); border-radius: 50%;
  background: none; cursor: pointer; font-size: 16px; line-height: 1; color: #151515;
  display: flex; align-items: center; justify-content: center; padding: 0; transition: border-color 0.15s;
}
.so-he-gp-btn:hover:not(:disabled) { border-color: #151515; }
.so-he-gp-btn:disabled { opacity: 0.3; cursor: default; }
.so-he-gp-val { font-size: 15px; min-width: 20px; text-align: center; }

/* ── Date picker popup ─────────────────────────────────────────── */
#so-he-dp,
#so-he-dp * { box-sizing: border-box; }

#so-he-dp {
  position: absolute;
  z-index: 9999;
  width: 320px;
  max-width: calc(100vw - 24px);
  background: #fff;
  border: 0.5px solid #000;
  padding: 20px;
  box-shadow: 0 16px 56px rgba(0, 0, 0, 0.24);
  font-family: 'Open Sans', sans-serif;
}
#so-he-dp[hidden] { display: none; }
.so-he-dp-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.so-he-dp-month { font-family: 'Sumana', serif; font-size: 18px; letter-spacing: 0.03em; text-transform: uppercase; color: #151515; }
.so-he-dp-navbtn {
  width: 32px; height: 32px; border: 0.5px solid #000; background: none; cursor: pointer;
  font-size: 14px; color: #151515; display: flex; align-items: center; justify-content: center;
  padding: 0; transition: background 0.15s, color 0.15s;
}
.so-he-dp-navbtn:hover:not(:disabled) { background: #151515; color: #fff; }
.so-he-dp-navbtn:disabled { opacity: 0.25; cursor: default; }
.so-he-dp-mode { font-size: 10px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: #717171; margin: 12px 0; padding-bottom: 10px; border-bottom: 1px solid #B4B4B4; }
.so-he-dp-mode strong { color: #151515; }
.so-he-dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.so-he-dp-dow { font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: #B4B4B4; text-align: center; padding: 4px 0 8px; }
.so-he-dp-day {
  background: none; border: none; cursor: pointer; font-size: 13px; color: #151515;
  padding: 8px 0; text-align: center; line-height: 1;
}
.so-he-dp-day:hover:not([disabled]):not(.is-ci):not(.is-co) { background: rgba(221, 170, 139, 0.15); }
.so-he-dp-day.is-past { color: #B4B4B4; cursor: default; }
.so-he-dp-day.is-ci, .so-he-dp-day.is-co { background: #151515; color: #fff; font-weight: 600; }
.so-he-dp-day.is-range { background: rgba(221, 170, 139, 0.3); }

/* Minimum-stay feedback inside the picker */
.so-he-dp-msg {
  font-size: 12px;
  line-height: 1.4;
  color: #B0472F;
  margin: 12px 0 0;
  min-height: 16px;
}
.so-he-dp-msg:empty { margin: 0; min-height: 0; }

/* ── Mobile: immersive hero + sticky Book Now (client round 2) ──── */
@media (max-width: 768px) {
  /* Client feedback (2026-08-15): booking fields removed from the phone
     hero entirely (sticky Book Now bar replaces them), video fills the
     first screen, copy is compact and anchored LOW so the video's closing
     logo frame (center of frame) is never hidden behind it. */
  body .wp-block-cover.so-he-hero--immersive {
    aspect-ratio: auto !important;
    height: auto !important;
    /* Full first screen. The theme pulls the hero ~80px up under the
       overlay nav, so the visible video is ~90% of the viewport. */
    min-height: 100svh !important;
    align-items: flex-end !important;
    padding-top: 150px !important;
    /* Copy clears the sticky bar (~64px) with breathing room above it. */
    padding-bottom: 110px !important;
  }
  .so-he-hero--immersive .wp-block-spacer { display: none !important; }

  /* The whole gadget island is hidden on phones — sticky bar replaces it */
  .so-he-hero--immersive .so-he-hero-island { display: none !important; }

  /* Compact copy, tight rhythm (client: smaller, more space) */
  .so-he-hero--immersive .wp-block-cover__inner-container > h1 {
    font-size: 21px !important;
    line-height: 1.35 !important;
    margin-bottom: 10px !important;
  }
  .so-he-hero--immersive .wp-block-cover__inner-container > p {
    font-size: 13px !important;
    line-height: 1.5 !important;
    margin-top: 0 !important;
  }
  .so-he-hero--immersive .wp-block-buttons { margin-top: 14px !important; }
  .so-he-hero--immersive .wp-block-button__link {
    font-size: 11px !important;
    letter-spacing: 0.2em;
  }

  /* Copy sits low now, so the sound toggle moves to the top-right corner
     of the video, just below the overlay nav (cover is pulled -80px up). */
  .so-he-hero--immersive .so-vid-sound {
    top: 210px;
    right: 16px;
    transform: none;
  }

  /* Copy fades out while the video's closing logo card is on screen
     (hero-engine.js toggles the class on timeupdate), back in on loop. */
  .so-he-hero--immersive .wp-block-cover__inner-container {
    transition: opacity 0.9s ease;
  }
  .so-he-hero--immersive.so-he-copy-faded .wp-block-cover__inner-container {
    opacity: 0;
    pointer-events: none;
  }

  /* Fallback while JS has not run (or no-JS): the island is still inside
     the cover, keep the old safe stacked layout so nothing overlaps. */
  body .wp-block-cover.so-he-hero:not(.so-he-hero--immersive) {
    aspect-ratio: auto !important;
    height: auto !important;
    min-height: 100svh !important;
    align-items: flex-start !important;
    padding-top: 200px !important;
    padding-bottom: 40px !important;
  }
  .so-he-hero:not(.so-he-hero--immersive) .wp-block-spacer { height: 48px !important; }

  /* Figma mobile cta-island 302:1899: inset 16, padding 16 */
  .so-he-section { padding: 32px 0; }
  .so-he-island {
    width: calc(100% - 32px) !important;
    padding: 16px !important;
  }
  .so-he-island > * + .so-hero-engine-mounted { margin-top: 32px; }
  .so-he-island-title { font-size: 32px; line-height: 44px; }

  /* Compressed vs the original Figma 64/48 gaps: client feedback says the
     stacked box was far too tall on phones. */
  .so-he { flex-direction: column; align-items: stretch; gap: 28px; padding: 24px 20px; }
  .so-he-fields { flex-direction: column; align-items: stretch; gap: 22px; }
  .so-he-field { flex: none; width: 100%; gap: 14px; }
  .so-he-cta { width: 100%; padding: 18px 48px; }
  .so-he-msg { position: static; margin-top: 8px; }
}

/* ── Sticky Book Now bar (mobile only; replaces the hero fields) ──── */
.so-he-sticky-cta { display: none; }

@media (max-width: 768px) {
  .so-he-sticky-cta {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    z-index: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 17px 24px;
    background: #000;
    color: #fff;
    font-family: 'Open Sans', sans-serif;
    font-size: 13px;
    font-weight: 600;
    line-height: 20px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    text-decoration: none;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    transition: background 0.2s;
  }
  .so-he-sticky-cta:active,
  .so-he-sticky-cta:hover { background: #262626; color: #fff; }
}

/* ── Video sound toggle (client request: default off, opt-in music) ── */
/* Hero cover: mid-right on desktop, clear of the centered copy column */
.so-vid-sound {
  position: absolute;
  z-index: 30;
  top: 45%;
  right: 20px;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(21, 21, 21, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.7);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background 0.2s;
}
.so-vid-sound:hover { background: rgba(21, 21, 21, 0.72); }
.so-vid-sound svg { width: 20px; height: 20px; display: block; }

/* Inline Traverse City video: pin the toggle bottom-right of the figure */
.traverse-city-video { position: relative; }
.traverse-city-video .so-vid-sound {
  top: auto;
  bottom: 16px;
  right: 16px;
  transform: none;
}

/* (Mobile hero sound-toggle position lives in the immersive block above.) */

/* --------------------------------------------------------------------------
   MOBILE HOTFIX (v1.7.7)

   Two rules in the site's custom CSS (Site Editor > Styles) are declared with
   !important and no media query, so they also applied on phones:

     .so-he-section .so-he-island { padding: 0 152px !important; }
     .traverse-city-video video   { aspect-ratio: 1 / 1.8 !important; }

   On a 390px screen the first left ~86px of usable width, and the second
   stretched a 16:9 video into a ~700px tall portrait box. Together the two
   overlapped, which covered the video's play button and swallowed taps.

   These overrides are scoped to phones only and use one extra level of
   specificity (body ...) so they win regardless of stylesheet order. Desktop
   is deliberately untouched: the 152px inset and the portrait crop are the
   intended desktop design.
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  body .so-he-section .so-he-island {
    padding: 16px !important;
    width: calc(100% - 32px) !important;
    margin-inline: auto !important;
  }

  /* Client feedback (2026-08-14): the 16:9 strip was too small to see on
     phones. Full-width portrait crop instead — big presence like the
     desktop 1/1.8 crop, object-fit keeps the center of the frame. */
  body .traverse-city-video video {
    aspect-ratio: 4 / 5 !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: cover !important;
  }

  /* Nothing should sit on top of the video and eat taps on the play button. */
  body .traverse-city-video,
  body .traverse-city-video video {
    position: relative;
    z-index: 1;
  }
}