/* ==========================================================================
   Usshmaa public site: shared spacing system.

   Loaded on every public page (PageController). The design pages keep their
   own look; section and container spacing comes from these tokens so every
   page shares one rhythm. Sections and page-width wrappers use the classes
   below instead of inline padding/max-width; body line-height and the
   eyebrow → heading → text steps use the variables inline.
   ========================================================================== */
:root {
  /* Brand colours from the logo (photos/brand/): teal icon, gold wordmark. */
  --brand-teal: #4E8B80;
  --brand-gold: #B07F32;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --section-y: clamp(48px, 7vw, 96px);
  --container: 1200px;
  --gutter: clamp(16px, 4vw, 32px);
  --lh-heading: 1.2;
  --lh-body: 1.7;
}

/* Every content section: one vertical rhythm, no outer margin, and its
   content held to the container column (backgrounds still run full width). */
.u-section {
  padding-block: var(--section-y);
  padding-inline: max(var(--gutter), (100% - var(--container)) / 2);
  margin-block: 0;
}
/* A section that sets its own narrower width keeps it, with the plain gutter. */
.u-section--narrow { padding-inline: var(--gutter); }
.u-section--flush-top { padding-top: 0; }
.u-section--flush-bottom { padding-bottom: 0; }

/* Every page-width content wrapper. */
.u-container {
  max-width: var(--container);
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   Header: menu items that do not fit on one line move into "More".
   Items carry data-nav-i (1-based); the panel repeats them as data-more-i.
   Phones (≤980px) keep the horizontally scrolling row and no "More".
   -------------------------------------------------------------------------- */
[data-ush-more] { display: none; position: relative; align-items: center; }
[data-ush-more] > button {
  font: inherit; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
  color: #55706A; background: none; border: 0; padding: 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
}
[data-ush-more] > button::after { content: ""; width: 6px; height: 6px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: translateY(-2px) rotate(45deg); }
[data-ush-more-panel] {
  position: absolute; top: 100%; right: 0; margin-top: 14px; padding: 10px; min-width: 220px; z-index: 80;
  display: flex; flex-direction: column;
  background: #FBF9F5; border: 1px solid rgba(44,74,64,.1); box-shadow: 0 18px 40px rgba(30,51,44,.14);
  visibility: hidden; opacity: 0; transition: opacity .18s ease;
}
[data-ush-more]::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 16px; }
[data-ush-more]:hover [data-ush-more-panel],
[data-ush-more]:focus-within [data-ush-more-panel] { visibility: visible; opacity: 1; }
[data-ush-more-panel] > a {
  display: block; padding: 9px 12px; border-radius: 2px; font-size: 13px; letter-spacing: .04em;
  color: #2C4A40; text-transform: none; white-space: nowrap;
}
[data-ush-more-panel] > a:hover { background: #F2EEE5; color: #2C4A40; }

@media (min-width: 981px) {
  [data-ush-more] { display: inline-flex; }
  [data-nav], [data-navscroll] { flex-wrap: nowrap !important; }
}
@media (min-width: 981px) and (max-width: 1099px) {
  [data-navscroll] > [data-nav-i]:nth-child(n+5) { display: none !important; }
  [data-ush-more-panel] > [data-more-i]:nth-child(-n+4) { display: none; }
}
@media (min-width: 1100px) and (max-width: 1439px) {
  [data-navscroll] > [data-nav-i]:nth-child(n+6) { display: none !important; }
  [data-ush-more-panel] > [data-more-i]:nth-child(-n+5) { display: none; }
}
@media (min-width: 1440px) and (max-width: 1599px) {
  [data-navscroll] > [data-nav-i]:nth-child(n+8) { display: none !important; }
  [data-ush-more-panel] > [data-more-i]:nth-child(-n+7) { display: none; }
  [data-ush-more][data-fits-from="1440"] { display: none; }
}
@media (min-width: 1600px) {
  [data-navscroll] > [data-nav-i]:nth-child(n+9) { display: none !important; }
  [data-ush-more-panel] > [data-more-i]:nth-child(-n+8) { display: none; }
  [data-ush-more][data-fits-from="1440"],
  [data-ush-more][data-fits-from="1600"] { display: none; }
}

/* --------------------------------------------------------------------------
   Phones: the chat button floats over the bottom-right corner
   (58px wide, 12px from the edge), so the footer's last row stops short of them.
   -------------------------------------------------------------------------- */
@media (max-width: 760px) {
  footer > div:last-child { margin-right: 64px; }
}

/* --------------------------------------------------------------------------
   Forms that sit in two columns on desktop stack on phones.
   -------------------------------------------------------------------------- */
@media (max-width: 560px) {
  [data-form-grid] { grid-template-columns: 1fr !important; }
  [data-form-row] > label { flex-basis: 100% !important; }
}

/* --------------------------------------------------------------------------
   Home page header. [data-topbar] carries data-header-state: "clear" over the
   hero (and while the menu is open), "solid" once scrolled. Every item has
   its own colour per state instead of inheriting the header text colour; all
   pairs are at least 4.5:1. Scoped to [data-header-state], so the other
   pages' headers are untouched. Hover only on devices that really hover.
   -------------------------------------------------------------------------- */
[data-topbar][data-header-state="solid"] {
  background: rgba(248, 246, 241, .98) !important;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 2px 12px rgba(0, 0, 0, .06);
}
[data-topbar][data-header-state] .btn-book-header,
[data-topbar][data-header-state] .btn-contact-header {
  display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; height: 44px;
  padding: 0 22px !important; border: 1px solid transparent; border-radius: 2px; font-size: 12px; font-weight: 500;
  letter-spacing: .16em; line-height: 1; text-transform: uppercase; white-space: nowrap; text-decoration: none;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
/* Book Now: brand green, white text, in every state (9.7:1). */
[data-topbar][data-header-state] .btn-book-header { background: #2C4A40; border-color: #2C4A40; color: #FFFFFF; }
[data-topbar][data-header-state="clear"] .btn-book-header { border-color: rgba(251, 249, 245, .55); }
/* Contact: outline. Over the hero cream on the dark photo; scrolled green on cream (9.2:1). */
[data-topbar][data-header-state] .btn-contact-header { background: transparent; border-color: rgba(251, 249, 245, .85); color: #FBF9F5; }
[data-topbar][data-header-state="solid"] .btn-contact-header { border-color: #2C4A40; color: #2C4A40; }
@media (hover: hover) {
  [data-topbar][data-header-state] .btn-book-header:hover { background: #1E332C; border-color: #1E332C; color: #FFFFFF; }
  [data-topbar][data-header-state] .btn-contact-header:hover { background: rgba(251, 249, 245, .16); color: #FFFFFF; }
  [data-topbar][data-header-state="solid"] .btn-contact-header:hover { background: #2C4A40; border-color: #2C4A40; color: #FFFFFF; }
}
[data-topbar][data-header-state] .btn-book-header:active { background: #1E332C; border-color: #1E332C; color: #FFFFFF; }
[data-topbar][data-header-state] .btn-book-header:focus-visible,
[data-topbar][data-header-state] .btn-contact-header:focus-visible { outline: 2px solid #B07F32; outline-offset: 3px; }
[data-topbar][data-header-state="clear"] .btn-book-header:focus-visible,
[data-topbar][data-header-state="clear"] .btn-contact-header:focus-visible { outline-color: #DFC894; }
/* Language selector (i18n.js draws it with fixed dark-background colours). */
[data-topbar][data-header-state] .ush-lang-btn { height: 32px; padding: 0 10px !important; font-size: 12px !important; color: #FBF9F5 !important; border-color: rgba(251, 249, 245, .7) !important; }
[data-topbar][data-header-state="solid"] .ush-lang-btn { color: #2C4A40 !important; border-color: rgba(44, 74, 64, .55) !important; }
[data-topbar][data-header-state] .ush-lang-btn span + span { opacity: 1 !important; font-size: 10px !important; }
[data-topbar][data-header-state] .ush-lang-btn:focus-visible { outline: 2px solid #B07F32; outline-offset: 2px; }
/* Narrow screens: Enquire / Contact / Book Now / call would sit off-screen (still reachable by
   Tab); the menu, the side contact stack and the booking bar cover them there. */
@media (max-width: 739.98px) {
  [data-topbar][data-header-state] [data-nav] > a { display: none; }
}

/* Header logo (photos/brand/logo-full): 56 px tall, 42 px on phones. The logo carries
   the tagline ("The Himalayas Wellness Orchard Retreats"), so the design's text tagline
   beside it is not shown. */
@media (max-width: 760px) {
  header img[src*="/photos/brand/logo-full"], [data-topbar] img[src*="/photos/brand/logo-full"] { height: 42px !important; width: auto !important; }
}
[data-topbar] [data-tagline] { display: none !important; }

/* Home hero: the gold tagline under the h1 — one line on desktop, wraps on phones. */
.hero-tagline { white-space: nowrap; }
@media (max-width: 760px) { .hero-tagline { white-space: normal; text-wrap: balance; } }

/* Footer map (SiteChrome::footerMap): right-most column on desktop, full width
   under the links on tablets, right after the address on phones. It stops short
   of the floating call / WhatsApp buttons at the right edge of the screen. */
.ush-footer-map { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ush-footer-map-frame { height: 260px; border-radius: 8px; overflow: hidden; border: 1px solid rgba(242, 238, 229, .16); background: #2C4A40; }
.ush-footer-directions { align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; border: 1px solid rgba(201, 164, 94, .45); border-radius: 100px; font: 500 12px/1 'Manrope', system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; }
@media (min-width: 1100px) {
  footer [data-footer-grid] { grid-template-columns: minmax(0, 1.25fr) repeat(3, minmax(0, 1fr)) minmax(320px, 2.9fr) !important; }
}
@media (max-width: 1099px) {
  .ush-footer-map { grid-column: 1 / -1; margin-right: max(0px, calc(64px - 5vw)); }
  .ush-footer-map-frame { height: 240px; }
}
@media (max-width: 760px) {
  footer [data-footer-grid] > :first-child { order: 1; }
  .ush-footer-map { order: 2; }
  footer [data-footer-grid] > :not(:first-child):not(.ush-footer-map) { order: 3; }
  .ush-footer-map-frame { height: 220px; }
}
/* The wide footer logo fits its column instead of running into the next one. */
footer img[src*="/photos/brand/logo-full"] { max-width: 100%; height: auto !important; aspect-ratio: auto; }