/* Noto Sans (Global Font Override) */
@font-face {
    font-family: 'Noto Sans';
    src: url('../fonts/noto-sans/NotoSans-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Noto Sans';
    src: url('../fonts/noto-sans/NotoSans-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Noto Sans';
    src: url('../fonts/noto-sans/NotoSans-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Noto Sans';
    src: url('../fonts/noto-sans/NotoSans-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Noto Sans';
    src: url('../fonts/noto-sans/NotoSans-Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

:root {
    --font-primary: 'Noto Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-secondary: 'Noto Sans', -apple-system, BlinkMacSystemFont, sans-serif;
}
html, body {
    font-size: 14px;
    font-weight: 300;
    line-height: 22px;
}
/* Standard section-title size, sitewide (page titles, section headings, card titles, etc.) —
   was a flat 28px with no responsive scaling; now scales smoothly between a 22px mobile floor
   (verified not to wrap awkwardly on a 375px phone) and the 32px desktop baseline. */
h1, h2, h3, h4, h5, h6 {
    font-weight: 500;
    font-size: clamp(20px, 5vw, 30px) !important;
}
/* Footer column headings are literal <h5> tags (main.css:1094) and would otherwise inherit
   the rule above — pin them back to the original 28px so footer typography is unaffected. */
.common-footer-content .uk-navbar-nav > li h5 {
    font-size: 16px !important;
}
/* .footer-size h5/h6/p typography is consolidated in the "Footer Columns" block further down this file. */
/* Body/paragraph copy inside content sections (excludes footer, which uses a different
   wrapper class, and popups). Base html/body is already 14px flat; this adds a mild
   responsive floor so long paragraphs don't sit at a fixed size on very small screens. */
.common-wrapper .common-content p {
    font-size: clamp(13px, 3.5vw, 14px);
}


/* Mayaana Brand Colors (Global Color Override) */
:root {
    --primary-color: #37493c;        /* Deep Moss Green: headings, icons/text on light surfaces */
    --secondary-color: #c4a77d;      /* Subtle Gold: accents, dividers, hover text on dark/moss surfaces */
    --text-color: #37493c;           /* Deep Moss Green: body copy on light backgrounds */
    --background-primary: #dfdccd;   /* Natural Cream: page background */
    --background-secondary: #37493c; /* Deep Moss Green: footer background */
    --background-muted: #dfdccd;     /* Natural Cream: muted/alternate section background */
    --white-color: #dfdccd;          /* Natural Cream: light backgrounds & sub-text on dark sections */
}

/* Header bar background is hardcoded in main.css, not variable-driven */
.common-navbar {
    background-color: #37493c;
}
.common-navbar .uk-navbar-nav > li > a,ฟ
.common-navbar .uk-navbar-dropdown-nav > li > a,
.common-navbar .uk-navbar-item,
.common-navbar .uk-navbar-toggle {
    color: #dfdccd;
}

/* Navbar inner container — same box as .common-content (main.css:483-488).

   .common-navbar itself is position:fixed / width:100% (main.css:65-71) and keeps
   its full-bleed background bar; only the inner .common-navbar-main is capped and
   centred. That is exactly the .common-wrapper / .common-content relationship every
   content section on the site already uses, so the values here are copied from it
   verbatim: max-width var(--breakpoint-xl) + margin auto + 30px of side padding.

   Before this, .common-navbar-main had no max-width at all — it ran the full
   viewport with a flat 70px of side padding, so it could never line up with the
   content below it, and the size of the mismatch changed with the window:
       1200-1440px viewport -> content edge at 30px, navbar edge at 70px
         (navbar 40px further IN)
       1920px viewport      -> content edge at 270px, navbar edge at 70px
         (navbar 200px further OUT — the reported symptom: logo and Book Now
          sitting closer to the viewport edges than the highlight tiles)
   The crossover was ~1520px. With the cap they are the same box at every width.

   Left unscoped by a media query on purpose: below 1200px the viewport is narrower
   than the 1440px cap, so max-width and the auto margins are inert, and the
   padding values here are already overridden by the tablet/mobile blocks directly
   below. Nothing under 1200px changes. */
.common-navbar .common-navbar-main {
    max-width: var(--breakpoint-xl);
    margin-left: auto;
    margin-right: auto;
    padding-left: 30px;
    padding-right: 30px;
}
/* The logo <img> carries padding:10px (main.css:83-86), which would inset it a
   further 10px and leave the logo's left edge at 40px against the tiles' 30px.
   Drop the left side only at desktop — the 10px top/bottom is what gives the bar
   its height, and the right side has nothing to align to. Same 0,3,1 selector as
   the base rule, winning on load order; min-width:1200px matches the convention
   already used by the activities/meetings blocks in this file, and keeps clear of
   the screen.css:256 mobile override (padding: 20px 0 0 below 640px). */
@media (min-width: 1200px) {
    .common-navbar .common-navbar-main .common-logo img {
        padding: 10px 10px 10px 0;
    }
}
@media (max-width: 1199px) {
    .common-navbar .common-navbar-main {
        padding-left: 28px !important;
        padding-right: 0px !important;
    }

    .common-navbar .common-navbar-main .common-navbar-container .common-navbar-button a {
        width: 165px !important;
        height: 77px !important;
    }
}
@media (max-width: 767px) {
    .common-navbar .common-navbar-main {
        padding-left: 18px !important;
        /* padding-right: 18px !important; */
    }
}

@media (max-width: 450px) {
    .common-navbar .common-navbar-main {
        padding-left: 18px !important;
        padding-right: 0px !important;
    }

    /* This 100px box was sized for "BOOK NOW" (2 short words). The mobile hamburger-row
       button's label was later changed to "Book the table" (3 words, ~40% more characters,
       part-header.php:32) without revisiting this width, which is what was pushing the box —
       and with it the whole flex row (.uk-navbar-nav has no white-space:nowrap of its own,
       but nothing here explicitly allowed wrapping either) — past the viewport edge. Explicit
       white-space:normal guarantees the text can break at a space instead of forcing one
       unbroken line no fixed-width box this size could hold; font-size/padding reduced so two
       wrapped lines ("BOOK THE" / "TABLE") sit comfortably inside the resulting 88px content
       box (100px width minus this rule's own 6px×2 padding) with room to spare — no need to
       widen the box itself, which would eat into the logo/hamburger's share of a 320px viewport.
       height stays whatever the max-width:1199px block above already set (77px) — that was
       already sized for 2-line wrapping at tablet width (e.g. "Explore the Stay"), so it
       needs no separate override here. */
    .common-navbar .common-navbar-main .common-navbar-container .common-navbar-button a {
        width: 100px !important;
        padding: 6px;
        font-size: 10px;
        letter-spacing: 0;
        white-space: normal;
        line-height: 1.3;
        text-align: center;
    }

    .common-navbar .uk-navbar-nav, .common-navbar .uk-navbar-right {
        gap: 0px !important;
    }
}

/* Button typography: Book Now (primary) & Explore (secondary) CTAs */
.common-navbar .common-navbar-main .common-navbar-container .common-navbar-button a,
.common-navbar .common-navbar-main .common-navbar-container .navbar-button-outline a,
.common-wrapper .common-content .common-row .uk-button-primary,
.common-wrapper .common-content .common-row .uk-button-default,
.common-popup .common-popup-content .button-primary {
    font-family: var(--font-secondary);
    font-size: 12px;
    font-weight: 400;
    text-transform: uppercase;
    color: #FFF;
}

/* Primary CTA buttons ("Book Now" style): Deep Moss Green, no border */
.common-navbar .common-navbar-main .common-navbar-container .common-navbar-button a,
.common-popup .common-popup-content .button-primary {
    background-color: #C96F4A;
    border: none;
}

.common-wrapper .common-content .common-row .uk-button-primary {
    background-color: var(--background-secondary);
    border: none;
}

.common-navbar .common-navbar-main .common-navbar-container .common-navbar-button a:hover,
.common-wrapper .common-content .common-row .uk-button-primary:hover,
.common-popup .common-popup-content .button-primary:hover {
    background-color: #94410c;
}

/* Header nav secondary button ("Explore the Stay") — transparent fill, cream border.
   Requires the "navbar-button-outline" CSS class to be added to that menu item in wp-admin. */
.common-navbar .common-navbar-main .common-navbar-container .navbar-button-outline a {
    background-color: transparent;
    border: 1px solid #dfdccd;
}

/* Center nav li's within the row instead of stretching each to the tallest
   sibling's height — fixes the fixed-height buttons sitting flush to the top */
.common-navbar .uk-navbar-nav {
    align-items: center;
}

/* Header nav button fixed dimensions. Widened from the requested 136px to 165px —
   "Book Your Table" and "Explore the Stay" measured ~131px wide at 12px/uppercase
   with the inherited body letter-spacing, which overflowed a 136px box. */
.common-navbar .common-navbar-main .common-navbar-container .common-navbar-button a,
.common-navbar .common-navbar-main .common-navbar-container .navbar-button-outline a {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 165px;
    height: 36px;
    min-height: 36px;
    padding: 10px;
}

/* Secondary CTA buttons ("Explore" style): Soft Terracotta fill, cream border */
.common-wrapper .common-content .common-row .uk-button-default {
    background-color: #C96F4A;
}

/* Footer nav links: cream by default (readable on moss footer), gold on hover already var-driven */
.common-footer-content .uk-navbar-nav > li > a {
    color: var(--primary-color);
}

/* Home footer uses a hardcoded white background independent of the color variables */
.home .common-footer.background-muted {
    background-color: #37493c;
}

/* Gold reads too light on cream/light surfaces — moss instead. Gold stays via --secondary-color
   for hovers/accents on the dark moss navbar & footer, and for non-text fills/borders/dividers. */
.common-navbar-offcanvas .uk-subnav .uk-active a {
    color: #37493c !important;
}
.common-navbar-offcanvas .main-social-media ul li a:hover {
    color: #37493c;
}
.common-navbar-offcanvas .uk-dropdown-nav > li > a:hover,
.common-navbar-offcanvas .uk-offcanvas-bar .uk-subnav > * > :first-child:hover {
    color: #37493c;
}
.common-wrapper .common-content .common-row .articles a {
    color: #37493c;
}
.common-wrapper .common-content .common-row .uk-button-default:hover {
    color: #FFF;
    background-color: #94410c;
}
.common-card-content .uk-breadcrumb a:hover {
    color: #37493c;
}
.common-contact .common-contact-details a:hover {
    color: #37493c;
}
.common-blog .header-intro .uk-breadcrumb a:hover {
    color: #37493c;
}
.common-breadcrumb .nav-breadcrumb .uk-breadcrumb a:hover,
.common-breadcrumb .nav-breadcrumb .uk-breadcrumb > * > :hover {
    color: #37493c;
}
.common-sidebar-wrapper .sidebar-entry .uk-nav-default a:hover {
    color: #37493c;
}
.common-popup .uk-modal-close-default:hover {
    color: #37493c;
}
.common-popup .common-popup-content .subtitle {
    color: #37493c;
}

/* Body */
/* body p { color: #666; }
body i { color: #666; } 
body span { color: #666; } 
body li { color: #666; }  */

/*Slider Room Home*/
.common-slider-primary .position-nav-center{ margin: 0 auto; top: calc(60vh - 50px); }

/* Roiback Booking Engine Widget */
/* div#roi-engine-container { background-color: #fff; position: relative; z-index: 2; }
.roi-search-engine { background-color: #fff; }
.roi-search-engine .roi-search-engine__form--shadow { box-shadow: none; }
.roi-search-engine .roi-search-engine__subtitle,
.roi-search-engine .roi-search-engine__title,
.roi-search-engine .roi-search-engine__label--checkin,
.roi-search-engine .roi-search-engine__label--checkout,
.roi-search-engine .roi-search-engine__field--day,
.roi-search-engine .roi-search-engine__field--month-year,
.roi-search-engine .roi-search-engine__occupancy-text,
.roi-search-engine .roi-search-engine__label--promo, 
.roi-search-engine .roi-search-engine__label--suggested-promocode,
.roi-search-engine .roi-search-engine__item--promo .roi-search-engine__field--promo,
.roi-search-engine .roi-search-engine__field--action { font-family: 'Roboto', sans-serif; font-weight: 300; letter-spacing: 1.4px }
.roi-search-engine__field--action { background-color: #333; border: none; border-radius: 0; padding: 0 30px; }
.roi-search-engine__field--action:hover { background-color: #a68563; } */

/*Content*/
.common-wrapper .common-content .common-row .details .heading-intro .heading-sub{ margin: 0!important; }

.common-wrapper .common-content .common-row .wp-block-button__link{ background-color: inherit; padding: 0; }
.heading-intro .wp-block-buttons{ margin-top: 20px;}
.heading-intro .wp-block-button__link:hover{ color: #fff; }

/*Contact*/
.wpcf7-form .uk-grid-small p{ margin: 0 !important;}
.wpcf7-form .uk-grid-small .uk-form-icon.uk-icon{ z-index: 1; top: 10px; bottom: auto; }
.uk-form-icon:not(.uk-form-icon-flip) ~ span.wpcf7-form-control-wrap .uk-input{ padding-left: 40px;}
.wpcf7-form .uk-grid-small.uk-grid > .uk-grid-margin {
    margin-top: 15px;
}
.wpcf7-form .wpcf7-not-valid-tip{
    font-size: 0.8em;
    margin-top: 10px;
}
/* The spinner is hidden (display:none) until form submission, but CF7's own
   stylesheet still gives it margin: 0 24px — that horizontal margin occupies
   layout space even while hidden from view, which is what was pushing the
   submit button left of the form's right edge. */
.wpcf7-spinner {
    margin-right: 0 !important;
}

/* Contact page form (.common-form, template-parts/page/content-contact.php)
   response banner. Scoped to .common-form so the footer's own already-
   customised CF7 output (style-custom.css:431-432, gold background) is
   untouched — this is a different form instance on a different page.
   Overrides CF7's own bundled default (padding:.2em 1em; border:2px solid
   #00a0d2 — that blue is CF7's, not this theme's) at (0,3,0) specificity,
   comfortably above CF7's own (0,2,1) base rule. There's also a
   `.wpcf7 form.sent .wpcf7-response-output{border-color:var(--primary-color)}`
   rule visible in devtools that isn't in any file in this repo — likely
   injected via the ACF "custom_code" options field (DB-only, not visible
   here). (0,4,0) below outranks its (0,3,1), so this wins regardless.
   No border-radius: no button or card anywhere in this theme uses rounded
   corners (checked main.css/style-custom.css), so this stays sharp-cornered
   to match. */
.common-form .wpcf7-form .wpcf7-response-output {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 1.5em 0 0;
    padding: 16px 20px;
    border-radius: 0;
    font-size: 0.95em;
    line-height: 1.5;
}
/* Success: soft moss tint (8% of --primary-color, same tint-math this file
   already uses for card borders elsewhere — e.g. the 15% moss
   .home-review-card border) over a solid moss border/text. #37493c text on
   this near-white tint measures ~7:1 contrast — the same primary-on-light
   pairing already used for all body copy sitewide (verified against the
   sitewide cream background, --background-muted #dfdccd: 6.998:1), so this
   reuses an already-accessible pairing rather than introducing a new one.
   Checkmark-in-circle is an inline SVG delivered as a data: URI on ::before
   — CF7 generates this div's text content itself at submit time (Messages
   tab / AJAX response), so there's no PHP template hook to place a literal
   <svg> node inside it; this is the self-contained-vector equivalent with
   no external image request (i.e. it can't 404 the way an <img src> could). */
.common-form .wpcf7-form.sent .wpcf7-response-output {
    background-color: rgba(55, 73, 60, 0.08);
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
}
.common-form .wpcf7-form.sent .wpcf7-response-output::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='20' height='20'%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='%2337493c' stroke-width='1.8'/%3E%3Cpath d='M7.5 12.5l3 3 6-6' fill='none' stroke='%2337493c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    flex: 0 0 auto;
    display: flex;
}
/* Error: same banner shell, terracotta instead of moss — the site's other
   established accent colour (§4 palette: CTA button fills / hover states).
   Text/border/icon use the darker hover terracotta #94410c, not the
   lighter #C96F4A button fill — #C96F4A only measures ~3.3:1 against this
   tint (fails WCAG AA 4.5:1 for text), while #94410c measures ~6.4:1
   (passes comfortably). #C96F4A is used only as the background tint's
   source colour, where the non-text 3:1 contrast minimum is what applies.
   Different icon shape (exclamation, not a second checkmark) so the two
   states stay distinguishable without relying on colour alone. */
.common-form .wpcf7-form.invalid .wpcf7-response-output {
    background-color: rgba(201, 111, 74, 0.08);
    border: 1px solid #94410c;
    color: #94410c;
}
.common-form .wpcf7-form.invalid .wpcf7-response-output::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='20' height='20'%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='%2394410c' stroke-width='1.8'/%3E%3Cline x1='12' y1='7' x2='12' y2='13' stroke='%2394410c' stroke-width='1.8' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='16.5' r='1' fill='%2394410c'/%3E%3C/svg%3E");
    flex: 0 0 auto;
    display: flex;
}

/* Modal split layout (image panel + form panel) — SHARED by #book-the-table-modal
   (header CTA, part-header.php) and #request-a-quote-modal (content-meetings.php).
   Genericized/renamed from the original book-table-modal-*-prefixed, ID-scoped
   version once a second modal needed the identical treatment, rather than
   duplicating this whole block a second time under a different prefix — these
   are now plain class selectors with no #modal-id scoping, since both modals'
   markup carries the same .modal-split-* classes.
   Built the same way content-restaurant.php builds its own image/text split
   cards (uk-grid-collapse + uk-cover-container + [uk-cover] img — object-fit:
   cover comes free from uikit.css:7732-7742). 960px width (vs. a plain single-
   column popup's default ~600px) so the form column (58%) doesn't feel cramped
   next to the image column (42%); max-width keeps UIkit's own responsive
   shrink (uikit.css: max-width:100% !important) intact.
   uk-modal-body is deliberately NOT used on the dialog — it would add padding
   around the whole dialog, including the image's edges — padding lives only on
   .modal-split-form instead, so the image stays edge-to-edge. Each modal's
   form is wrapped in .common-form to reuse the sitewide CF7 response-banner
   styling (success/error) defined earlier in this file, same as the contact
   page form. The close button in each modal needs no repositioning: it's a
   direct child of .uk-modal-dialog (not the grid), so UIkit's own
   top:10px;right:10px (relative to the dialog, uikit.css:3788-3794) still
   lands correctly in the dialog's overall top-right corner regardless of the
   columns underneath. */
.modal-split-dialog {
    width: 960px;
    max-width: 100%;
    overflow: hidden;
}
.modal-split-grid {
    margin: 0;
}
/* background-color is a fallback panel, not a decorative choice — if the
   fetched image URL 404s/is unreachable client-side (get_field() can only
   confirm ACF *has* a URL, not that it resolves — can't verify reachability
   without a live HTTP request, and no DB/browser access from here to check
   the actual stored value), the <img>'s onerror handler (part-header.php /
   content-meetings.php) hides the broken element and this shows through
   instead of a bare white box + browser's broken-image glyph. */
.modal-split-image {
    width: 42%;
    background-color: var(--background-secondary);
}
/* The <img> itself has no width/height attributes (uk-cover sizes it via CSS
   instead, to 100%/100% of this container), so before it finishes downloading
   some browsers show a generic "image loading" placeholder glyph at its
   top-left corner — visually near-identical to the broken-image icon, but
   not a stray element; it's this same photo mid-load. Kept invisible via
   opacity until the onload handler adds .is-loaded, so the background-color
   fallback above shows through the empty gap instead of any placeholder
   glyph, then the real photo fades in once it's actually ready to paint. */
.modal-split-image img {
    opacity: 0;
    transition: opacity 0.3s ease;
}
.modal-split-image img.is-loaded {
    opacity: 1;
}
.modal-split-form {
    width: 58%;
    padding: 50px 45px 40px;
    /* No sitewide *{box-sizing:border-box} reset exists (checked main.css/
       uikit.css) — without this, the padding above would add onto the 58%
       flex-basis instead of being contained within it, overflowing the row. */
    box-sizing: border-box;
}
/* Falls back to a single column if no image was found at render time (see
   the image lookups in part-header.php / content-meetings.php) —
   .modal-split-image simply isn't printed in that case, rather than leaving
   a blank 42% gap next to a narrow form. */
.modal-split-grid > .modal-split-form:only-child {
    width: 100%;
}
/* Heading lives at the top of the form column (not centered over both
   columns) — no extra rule needed for font/color/weight, it already inherits
   the sitewide h1-h6 treatment (main.css: var(--font-primary)/uppercase/
   0.5px letter-spacing, style-custom.css:50-53: weight 500 + responsive
   clamp), the same cascade "SUPERIOR ROOMS" and every other card heading
   uses. Margin added because h1-h6 have margin:0 from the sitewide reset
   and nothing else provides a gap before the form fields. */
.modal-split-form h2 {
    margin-bottom: 20px;
}
/* Small copyright line at the bottom of the form column — added to
   #request-a-quote-modal specifically (content-meetings.php), whose form has
   noticeably fewer fields than #book-the-table-modal's (Guest Name, Event
   Date, Number of Guests, Event Type, Note vs. Book the Table's eight
   fields), leaving visible empty space below the submit button next to a
   similarly-tall image panel. Left-aligned to match the form's own
   left-aligned fields, rather than centered, which would look inconsistent
   with everything above it. Muted color reuses the exact same tone already
   established for placeholder text in these modals (this file, .uk-input::
   placeholder) rather than introducing a new "secondary text" color — not
   var(--primary-color)/var(--text-color), which is reserved for headings/
   labels/body copy, so this reads as distinctly lower-emphasis footer text.
   No border/background, so it doesn't look like part of the form itself.
   Shared class (.modal-split-*) in case #book-the-table-modal ever needs
   the same treatment later, though it doesn't today — see the CSS class
   name, not an ID-scoped one, so adding <p class="modal-split-copyright">
   there would pick this up automatically without any further CSS work. */
.modal-split-copyright {
    margin: 24px 0 0;
    text-align: left;
    font-size: 12px;
    color: rgba(55, 73, 60, 0.5);
}
/* Mobile (<768px, this repo's CLAUDE.md breakpoint convention): hide the
   image rather than stacking it as a banner above the form — both forms this
   applies to run long enough (Book the Table: 8 fields; Request a Quote:
   comparable) that a banner image above them pushes the first field below
   the fold on a phone-height viewport, which costs more than the decorative
   image is worth. Tested both for Book the Table; hiding reads cleaner. */
@media (max-width: 767px) {
    .modal-split-image {
        display: none;
    }
    .modal-split-form {
        width: 100%;
        padding: 45px 22px 30px;
    }
}

/* CF7-in-a-modal form content — shared by #book-the-table-modal and
   #request-a-quote-modal (template-parts/page/content-meetings.php). Neither
   has an ancestor .common-wrapper/.common-content/.common-row (they live in
   modals, not page sections), so none of the sitewide .uk-button-primary /
   .uk-input theming above (all scoped to that wrapper chain) reaches them —
   it was falling through to UIkit's raw defaults (blue #1e87f0 button/focus,
   grey #e5e5e5 borders, uikit.css:1444-1497). This block ports the same
   values those rules already use elsewhere, scoped to both modals instead of
   duplicating a second copy of the same declarations. */

/* The special-offer inquiry uses the same form language without an image
   panel, so a narrower dialog keeps the two-column fields comfortably sized. */
.special-offer-inquiry-dialog {
    width: 760px;
}
#special-offer-inquiry-modal .wpcf7-form .uk-button-primary {
    background-color: var(--background-secondary);
    border: none;
    color: #fff;
    font-family: var(--font-secondary);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
#special-offer-inquiry-modal .wpcf7-form .uk-button-primary:hover {
    background-color: #94410c;
}
#special-offer-inquiry-modal .wpcf7-form .uk-input,
#special-offer-inquiry-modal .wpcf7-form .uk-select,
#special-offer-inquiry-modal .wpcf7-form .uk-textarea {
    border-color: rgba(55, 73, 60, 0.2);
    color: var(--text-color);
    padding-left: 10px;
}
#special-offer-inquiry-modal .wpcf7-form .uk-input::placeholder,
#special-offer-inquiry-modal .wpcf7-form .uk-textarea::placeholder {
    color: rgba(55, 73, 60, 0.5);
}
#special-offer-inquiry-modal .wpcf7-form .uk-input:focus,
#special-offer-inquiry-modal .wpcf7-form .uk-select:focus,
#special-offer-inquiry-modal .wpcf7-form .uk-textarea:focus {
    border-color: var(--secondary-color);
    box-shadow: 0 0 0 1px var(--secondary-color);
}
#special-offer-inquiry-modal .wpcf7-form .wpcf7-not-valid-tip {
    display: block;
    margin-top: 6px;
    color: #94410c;
    font-size: 0.8em;
}

/* Submit button: same treatment as the sitewide .uk-button-primary used for
   in-page CTAs (e.g. "More Details" on offers/facilities/restaurant cards) —
   var(--background-secondary) is the site's dark moss green (#37493c),
   hover #94410c is the same terracotta-dark used by every other primary
   button's hover state (style-custom.css:190-195). Not the header nav's flat
   terracotta fill (.common-navbar-button) — that treatment is reserved for
   the fixed-size 165x36 nav button box, not a full-width form submit. */
#book-the-table-modal .wpcf7-form input[type="submit"],
#book-the-table-modal .wpcf7-form .uk-button-primary,
#request-a-quote-modal .wpcf7-form input[type="submit"],
#request-a-quote-modal .wpcf7-form .uk-button-primary {
    background-color: var(--background-secondary);
    border: none;
    color: #fff;
    font-family: var(--font-secondary);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
#book-the-table-modal .wpcf7-form input[type="submit"]:hover,
#book-the-table-modal .wpcf7-form .uk-button-primary:hover,
#request-a-quote-modal .wpcf7-form input[type="submit"]:hover,
#request-a-quote-modal .wpcf7-form .uk-button-primary:hover {
    background-color: #94410c;
}

/* Labels/body copy: dark moss (var(--text-color)) instead of UIkit's grey
   #666, matching body text color used everywhere else on the site. */
#book-the-table-modal .wpcf7-form label,
#request-a-quote-modal .wpcf7-form label {
    color: var(--text-color);
    font-family: var(--font-secondary);
    font-size: 13px;
}

/* Inputs: muted moss-tinted border (20% var(--primary-color)) instead of
   UIkit's neutral grey #e5e5e5 — subtle rather than a saturated brand-color
   border on every field at rest. border-radius stays 0 (UIkit's own default);
   no button or input anywhere in this theme uses rounded corners.
   padding-left:10px cancels the sitewide icon-spacing rule (this file,
   ~line 317: ".uk-form-icon:not(.uk-form-icon-flip) ~ span.wpcf7-form-
   control-wrap .uk-input{padding-left:40px}") for any field in either modal
   that doesn't render a visible leading icon (harmless no-op — same as
   UIkit's own un-iconed .uk-input default, padding:0 10px — for any field
   that does). Scoped with the #book-the-table-modal / #request-a-quote-modal
   ids ((1,2,0) specificity beats the sitewide rule's (0,4,1) on ID count
   alone) so pages/forms that DO still show an icon — any other
   .uk-form-icon usage sitewide — keep their 40px untouched. */
#book-the-table-modal .wpcf7-form .uk-input,
#book-the-table-modal .wpcf7-form .uk-select,
#book-the-table-modal .wpcf7-form .uk-textarea,
#request-a-quote-modal .wpcf7-form .uk-input,
#request-a-quote-modal .wpcf7-form .uk-select,
#request-a-quote-modal .wpcf7-form .uk-textarea {
    border-color: rgba(55, 73, 60, 0.2);
    color: var(--text-color);
    padding-left: 10px;
}
#book-the-table-modal .wpcf7-form .uk-input::placeholder,
#book-the-table-modal .wpcf7-form .uk-textarea::placeholder,
#request-a-quote-modal .wpcf7-form .uk-input::placeholder,
#request-a-quote-modal .wpcf7-form .uk-textarea::placeholder {
    color: rgba(55, 73, 60, 0.5);
}
/* Focus: var(--secondary-color), the site's Subtle Gold accent — the same
   color already used for every other focus/hover/active accent sitewide
   (dot-nav active state main.css:1064-1067, .accommodation-summary-title
   underline style-custom.css:2236), replacing UIkit's default blue #1e87f0. */
#book-the-table-modal .wpcf7-form .uk-input:focus,
#book-the-table-modal .wpcf7-form .uk-select:focus,
#book-the-table-modal .wpcf7-form .uk-textarea:focus,
#request-a-quote-modal .wpcf7-form .uk-input:focus,
#request-a-quote-modal .wpcf7-form .uk-select:focus,
#request-a-quote-modal .wpcf7-form .uk-textarea:focus {
    border-color: var(--secondary-color);
    box-shadow: 0 0 0 1px var(--secondary-color);
}

/* Checkboxes (Half Day / Full Day on the Request a Quote form —
   [checkbox event-type class:uk-checkbox use_label_element "Half Day" "Full Day"],
   so uk-checkbox IS present on the generated <input>; the custom appearance:none
   styling below covers it anyway, and doubles as a fallback for any future
   checkbox field that doesn't carry that class). Checked-state fill is the
   same dark moss (var(--background-secondary)) as the submit button, with the
   same terracotta-dark hover/focus (#94410c) used everywhere else in these
   modals; the checkmark itself is a small inline SVG, same technique this
   file already uses for the CF7 response-banner icons above. A .uk-checkbox
   override is kept alongside this as a second layer, since that class's own
   CSS would otherwise reimplement the checked state as flat UIkit blue
   #1e87f0 on top of the custom styling.
   .wpcf7-list-item / .wpcf7-list-item-label / .wpcf7-form-control.wpcf7-checkbox
   are Contact Form 7's own generated wrapper classes for every checkbox/radio
   field, unconditionally — safe to target without knowing this field's exact
   custom markup.
   Horizontal layout: the container itself (.wpcf7-form-control.wpcf7-checkbox)
   is the flex row now, not just each .wpcf7-list-item individually set to
   inline-flex — relying on each item's own inline-flex to line up side by
   side via normal inline flow didn't hold in practice (reported still
   stacking vertically), so the container now owns the row layout directly,
   which can't stack regardless of how CF7's markup whitespace/nesting is
   structured around each item. gap replaces the old per-item margin for
   inter-item spacing (cleaner than compensating margins on both sides), and
   flex-wrap means this degrades to stacked automatically at widths too
   narrow to fit both side by side, with no separate breakpoint needed.
   Shared with #book-the-table-modal for the same reason every other rule in
   this block is — no checkbox field there today, but no cost to covering it
   if one is ever added. */
/* !important on display/flex-wrap/align-items only, not the whole rule: this
   is the specific trio that determines block-vs-row layout, the actual crux
   of the stacking bug — no Contact Form 7 plugin files exist anywhere in
   this filesystem to confirm what's actually overriding it (this repo is
   theme-only, no wp-content/plugins present), so this is a defensive
   strengthening rather than a confirmed fix for a confirmed cause. Scoped
   with the #book-the-table-modal / #request-a-quote-modal id prefix, same as
   every other rule in this block — !important only changes which
   declaration wins for elements this selector already matches, it can't
   make the selector reach any other checkbox field site-wide (Contact page
   form, footer forms, etc.), so nothing outside these two modals is
   affected by adding it here. */
#book-the-table-modal .wpcf7-form .wpcf7-form-control.wpcf7-checkbox,
#request-a-quote-modal .wpcf7-form .wpcf7-form-control.wpcf7-checkbox {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 10px 24px;
}
#book-the-table-modal .wpcf7-form .wpcf7-list-item,
#request-a-quote-modal .wpcf7-form .wpcf7-list-item {
    display: inline-flex !important;
    align-items: center !important;
    margin: 0;
}
/* .wpcf7-list-item being flex (above) only centers its own single child —
   the <label> — within itself; it does nothing for how <input> and
   .wpcf7-list-item-label sit relative to EACH OTHER inside that <label>,
   which is what actually determines checkbox-vs-text alignment. Confirmed
   via DevTools: the <label> itself has no flex properties of its own, so
   the checkbox (a replaced, baseline-aligned inline element even with
   appearance:none) and the text next to it fall back to default inline
   baseline alignment, which is why the checkbox sat slightly above the
   text instead of centered with it. Making the <label> itself the flex
   container (not just its parent span) fixes this directly. gap replaces
   .wpcf7-list-item-label's own margin-left below — using both would double
   the spacing (8px margin + 8px gap = 16px). */
#book-the-table-modal .wpcf7-form .wpcf7-list-item label,
#request-a-quote-modal .wpcf7-form .wpcf7-list-item label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}
#book-the-table-modal .wpcf7-form .wpcf7-list-item-label,
#request-a-quote-modal .wpcf7-form .wpcf7-list-item-label {
    color: var(--text-color);
}
/* Event Type field (Request a Quote's "Half Day"/"Full Day" checkboxes) —
   back to sharing a row with "Number of Guests" (reverted from the
   full-width-row version — the earlier :has()-based CSS that forced it
   onto its own row regardless of the CF7 field's own width class has been
   removed entirely, since that's actively unwanted now).
   Alignment approach this time is top-edge matching, not cross-axis
   centering: "Number of Guests" presumably has its own label sitting above
   its dropdown (a <label> + control, block-stacked); this field should
   mirror that same shape — a label above, checkbox row below with a small
   margin-top separating them — so both columns' content starts at
   comparable vertical positions from the top of the row, the way two
   ordinary stacked label+control fields naturally line up, rather than
   trying to vertically center a short checkbox row against a taller
   sibling's total height (the approach used in earlier attempts, which is
   what kept looking misaligned). display:block (not flex) here because
   this wrapper no longer needs to lay out multiple children of its own —
   just sit in normal document flow under whatever label precedes it.
   margin-top:8px matches the gap suggested for the label-to-control spacing
   elsewhere in this form. [data-name="event-type"] is CF7's own
   unconditional wrapper attribute for this field — set to the field's tag
   name regardless of whatever markup the admin authored around it (DB
   content, not in this repo) — so this still doesn't depend on knowing
   that exact structure. */
#book-the-table-modal .wpcf7-form .wpcf7-form-control-wrap[data-name="event-type"],
#request-a-quote-modal .wpcf7-form .wpcf7-form-control-wrap[data-name="event-type"] {
    display: block;
    margin: 8px 0 0;
}
#book-the-table-modal .wpcf7-form input[type="checkbox"],
#request-a-quote-modal .wpcf7-form input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    /* Up from 18px — next to a 40px-tall bordered dropdown, even 18px still
       read as small/insubstantial. 22px is a meaningfully bigger, more
       intentional-looking target without dwarfing the "Half Day"/"Full Day"
       text next to it (13px, .wpcf7-list-item-label below). Checkmark
       background-size scaled up to match (was 11x9, now 13x11). */
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    margin: 0;
    /* No stray margin-top confirmed (margin:0 above). vertical-align:middle
       is a belt-and-braces fallback for the default baseline alignment a
       checkbox gets as a replaced inline element — the label fix above
       already makes this moot wherever the <label> flex row applies (flex
       ignores vertical-align on its children entirely), but this keeps the
       checkbox reasonably centered even in some other, non-flex context
       (e.g. if a browser doesn't run this rule for any reason). */
    vertical-align: middle;
    border: 1px solid rgba(55, 73, 60, 0.35);
    border-radius: 0;
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 13px 11px;
    cursor: pointer;
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}
/* Checked-state color: terracotta (#C96F4A), the same accent used by the
   header's "BOOK NOW"/.common-navbar-button fill (style-custom.css:178-182)
   and "Explore the Stay" — not var(--background-secondary) (dark moss),
   which is what these checkboxes used previously. Hover/focus deepens to
   #94410c, the same terracotta-dark used as that button's own hover state,
   already reused below for :hover. */
#book-the-table-modal .wpcf7-form input[type="checkbox"]:checked,
#book-the-table-modal .wpcf7-form input[type="checkbox"]:indeterminate,
#request-a-quote-modal .wpcf7-form input[type="checkbox"]:checked,
#request-a-quote-modal .wpcf7-form input[type="checkbox"]:indeterminate {
    background-color: #C96F4A;
    border-color: #C96F4A;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpolyline points='3,8 7,12 13,4' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
#book-the-table-modal .wpcf7-form input[type="checkbox"]:checked:hover,
#book-the-table-modal .wpcf7-form input[type="checkbox"]:indeterminate:hover,
#request-a-quote-modal .wpcf7-form input[type="checkbox"]:checked:hover,
#request-a-quote-modal .wpcf7-form input[type="checkbox"]:indeterminate:hover {
    background-color: #94410c;
    border-color: #94410c;
}
#book-the-table-modal .wpcf7-form input[type="checkbox"]:focus,
#request-a-quote-modal .wpcf7-form input[type="checkbox"]:focus {
    outline: none;
    border-color: var(--secondary-color);
    box-shadow: 0 0 0 2px rgba(196, 167, 125, 0.35);
}
/* Second, harmless layer in case uk-checkbox is ever added to the CF7 field
   later — see comment above. Without this, that class's own CSS
   (uikit.css:1664-1710) would reintroduce flat UIkit blue for the checked
   state on top of the custom styling above. */
#book-the-table-modal .wpcf7-form .uk-checkbox:checked,
#book-the-table-modal .wpcf7-form .uk-checkbox:indeterminate,
#request-a-quote-modal .wpcf7-form .uk-checkbox:checked,
#request-a-quote-modal .wpcf7-form .uk-checkbox:indeterminate {
    background-color: #C96F4A;
    border-color: transparent;
}
#book-the-table-modal .wpcf7-form .uk-checkbox:checked:focus,
#book-the-table-modal .wpcf7-form .uk-checkbox:indeterminate:focus,
#request-a-quote-modal .wpcf7-form .uk-checkbox:checked:focus,
#request-a-quote-modal .wpcf7-form .uk-checkbox:indeterminate:focus {
    background-color: #94410c;
}

/* Validation error text ("Please fill out this field.", CF7's own
   .wpcf7-not-valid-tip span under each invalid field) — was CF7's bundled
   default red (#dc3232, a WordPress-admin red with no relation to this
   site's palette). Retoned to #94410c, the same terracotta-dark already
   established as this site's error color (the CF7 response-banner "invalid"
   state above, style-custom.css:407-416) rather than introducing a second,
   unrelated red. margin-top gives it breathing room from the field above,
   where previously it had none beyond the tip's own font-size. */
#book-the-table-modal .wpcf7-form .wpcf7-not-valid-tip,
#request-a-quote-modal .wpcf7-form .wpcf7-not-valid-tip {
    display: block;
    margin-top: 6px;
    color: #94410c;
    font-size: 0.8em;
}

/* Custom placeholder overlay for native <input type="date"> fields — they
   can't display custom placeholder text via the placeholder attribute; the
   browser always renders its own localized mm/dd/yyyy-style hint instead.
   Originally built for #book-the-table-modal's single Book Date field;
   genericized to a plain class selector (no #modal-id scope) once the
   Contact page's Check-in/Check-out dates needed the identical treatment —
   that form isn't inside any modal at all, so ID-scoping this would have
   meant either a second copy of the whole block or missing that context
   entirely. Wherever CF7 field content wraps a date field with this
   pattern (assets/js/main.js toggles .date-placeholder-text to match):
     <div class="common-inline date-placeholder-wrap">
       [optional <span class="uk-form-icon" uk-icon="icon: ...">]
       [date* field-name class:uk-input]
       <span class="date-placeholder-text">Some Label</span>
     </div>
   this now applies automatically, in a modal or not.
   Positioning uses insets (top/left/bottom + right) tied to the input's own
   1px border and 10px padding-left (the value already established for every
   plain, icon-less .uk-input in this file) rather than a fixed pixel box —
   robust across whatever native date-input height a given browser/OS
   renders, since it's always relative to the input's actual box rather than
   an assumed one. right:30px deliberately leaves the rightmost strip of the
   input exposed — that's roughly where Chrome/Firefox render the calendar-
   icon affordance, and covering it too would visually hide the one cue that
   tells a user this is a date field. color reuses the exact same muted tone
   already established for .uk-input::placeholder elsewhere in this file, so
   the overlay text reads identically to a real placeholder; font-size:
   inherit instead of a hardcoded value so it always matches whatever the
   input's actual computed font-size is. pointer-events:none is what lets
   clicks/taps pass through to the real input underneath it — without this,
   the overlay would block the field from ever opening the native date
   picker. */
.date-placeholder-wrap {
    position: relative;
}
.date-placeholder-text {
    position: absolute;
    top: 1px;
    bottom: 1px;
    left: 1px;
    right: 30px;
    display: flex;
    align-items: center;
    padding-left: 9px;
    background-color: #fff;
    color: rgba(55, 73, 60, 0.5);
    font-family: var(--font-secondary);
    font-size: inherit;
    overflow: hidden;
    white-space: nowrap;
    pointer-events: none;
}
/* Check-in/Check-out on the Contact page's MESSAGE US form lead with a
   <span class="uk-form-icon" uk-icon="icon: calendar"> before the input —
   unlike Book the Table's date field, which had its icon removed earlier
   in this project. That icon pushes the input's own native text start to
   40px via the sitewide rule at ~line 336 (".uk-form-icon:not(.uk-form-
   icon-flip) ~ span.wpcf7-form-control-wrap .uk-input{padding-left:40px}"),
   so the base 10px-inset overlay position above would land to the left of
   — overlapping — the icon, rather than over the native hint text. This
   reuses that exact same general-sibling-combinator technique (.uk-form-
   icon ~ target) to detect the icon's presence and shift the overlay to
   match — 39px (+1px border-inset from .date-placeholder-text's own
   left:1px = 40px total), not a separately re-guessed value. */
.uk-form-icon ~ .date-placeholder-text {
    padding-left: 39px;
}

/* Logo inside the CF7 form body: the image panel now carries the brand/
   visual identity, so any leftover logo block in the form content should
   not render at all. This is CSS-only, not a real removal — the logo <img>
   is admin-configured inside the CF7 form editor's "Form" tab (DB content,
   not present in this repo), so it can't be deleted at the source from
   here. Hiding it here is the closest equivalent achievable without
   wp-admin access; removing the block directly in Contact Form 7 → "Book
   the table" → Form tab is the real fix and would make this rule dead
   code (harmless to leave either way). */
#book-the-table-modal .wpcf7-form img {
    display: none;
}

/*bar checkbox*/
.uk-offcanvas-bar-checkbox h3{ font-size: 1.6em; color: #333; margin-bottom: 20px!important; text-align: center;}
.uk-offcanvas-bar-checkbox .uk-close{ color: #000;}
.uk-offcanvas-bar-checkbox .uk-close:hover{ color: #000;}

/* Booking Widget — "BOOK YOUR ROOMS" title
   (assets/reservation_widget/booking_engine/checkbox-template.php:9)

   ROOT CAUSE. The widget ships its own size for this heading —
   #WCL_RESERVATION_WIDGET.TYPE02 h3 { font-size: 1.3rem } (reservation.css:142,
   = 18.2px, since html is pinned to 14px at the top of this file) — but that
   rule never applies. Two sitewide declarations further up THIS file beat it:

     style-custom.css:50-53   h1..h6 { font-weight: 500;
                                       font-size: clamp(20px, 5vw, 30px) !important }

   The !important forces the title to 20-30px instead of 18.2px (30px at any
   viewport >= 600px), and font-weight:500 turns the widget's light heading
   into Medium — the "bolder, bigger" half of the report. The colour comes from
   main.css:32-38, h1..h6 { color: var(--primary-color) } = #37493c deep moss,
   which is darker than the #333 the rest of the widget uses and is the
   "near-black" half.

   Nothing here is width-dependent — the heading has always been oversized —
   but it only visibly BREAKS when the panel is narrow, because TYPE02's panel
   is capped at 320px (reservation.css:143) minus 20px padding each side = 280px
   of text width, while "BOOK YOUR ROOMS" at 30px + the body's inherited
   letter-spacing:0.1rem (main.css:23) measures ~322px. Hence the wrap onto two
   lines. At 768px (TYPE02 .box-center, reservation.css:138) there is room to
   spare, which is why the wide/desktop rendering looks correct.

   THE FIX. Restore the widget's intended typography, scoped by BOTH of its
   IDs. #BOOKING_WIDGET / #WCL_RESERVATION_WIDGET are rendered exactly once,
   only by checkbox-template.php (grepped across every .php/.css/.js in the
   theme — the other booking template, smartbooking-pro.php, is a Roiback embed
   that uses neither ID and has no h3), so this selector can only ever match
   this one heading. The sitewide h1..h6 rules are deliberately global and are
   NOT touched.

   Specificity: (2,1,1) beats the (0,0,1) h1..h6 rules for weight/colour/
   spacing outright; font-size still needs !important of its own purely to
   answer the !important at line 52 — an ID-weighted !important wins that.

   Size: clamp(15px, 4.6vw, 18px). The 18px ceiling is the widget's own 1.3rem
   intent rounded down; at 18px the English string measures ~191px
   (~10.2em of glyph advance + 15 x 0.5px tracking), i.e. it fits the narrowest
   280px panel with ~32% to spare. The 4.6vw middle term is headroom for
   translations — the string is __('Book Your Rooms','wcl'), so a longer locale
   still steps down instead of wrapping. white-space:nowrap is deliberately NOT
   used: it would convert an over-long translation from a wrap into horizontal
   overflow out of a fixed-width panel, which is the worse failure.

   Be aware the vw term is dormant under the CURRENT config: reservation.css:
   162-164 hides the whole widget below 1024px viewport, and at >=1024px 4.6vw
   is >=47px, so the clamp always resolves to its 18px ceiling. The narrow
   container this fix is actually about is the 320px PANEL at a desktop
   viewport, which no viewport media query can see — that is why the ceiling,
   not a breakpoint, is what does the work here. The vw middle term only starts
   mattering if that display:none is ever lifted.

   Weight/colour: 300 is the Light face loaded at the top of this file and is
   what main.css:36 originally asked for. The colour tracks the rest of the
   widget: it was #333 back when BE_FONT_COLOR's fallback was also #333
   (matching UIkit's own heading base, h1..h6 { color: #333 },
   uikit.css:206-228), and it is now var(--text-color) because that fallback is
   var(--text-color) too (reservation-setup.php:47), which default-style.php
   applies to .wcl_rsvn_box — the CHECK IN / PROMO CODE labels. Same value by
   the same variable, so the title cannot drift from the labels again. Caveat
   unchanged: BE_FONT_COLOR is an ACF appearance setting, so if the client picks
   a custom label colour in wp-admin, the title keeps the brand moss and this
   rule has to follow by hand.
   letter-spacing 0.5px replaces the body's inherited 1.4px, matching
   .wcl_rsvn_box label (reservation.css:36). */
#BOOKING_WIDGET.wrapper-reservation #WCL_RESERVATION_WIDGET .wcl_rsvn_control h3 {
    font-size: clamp(15px, 4.6vw, 18px) !important;
    font-weight: 300;
    letter-spacing: 0.5px;
    color: var(--text-color);
}

/* Booking Widget — CHECK IN / CHECK OUT date cluster ("25 SEP / 2026")
   (assets/reservation_widget/booking_engine/checkbox-template.php:89,99)

   MARKUP. The date is three bare sibling <span>s inside .wcl_date —
   day / month / year, with no classes; reservation-script.js:43-54,76-87
   rewrites them by :nth-child on date pick, so the element order and count
   must not change. Only CSS is touched here.

   ROOT CAUSE of the year landing flush-left. reservation.css:146-149 lays the
   TYPE02 cluster out with floats:

     .wcl_date span            { float: left; width: 50% }
     .wcl_date span:first-child{ text-align: right; padding-right: 5px }  ->  "25"
     .wcl_date span:nth-child(2){ text-align: left; margin-top: 3.5px }   ->  "SEP"
     .wcl_date span:nth-child(3){ text-align: left }                      ->  "2026"

   Two 50% floats already fill the first float row ("25" 0-50%, "SEP" 50-100%),
   so the third float has to drop to the next row — and with nothing offsetting
   it, CSS 2.1 float rule 9.5.1(7) puts it as far left as possible, i.e. at 0.
   That is the bug: the year renders under the DAY, in column 1, instead of
   under the MONTH in column 2. Nothing in the rule set expresses "column 2,
   row 2" — the year only ever got there by wrapping, and wrapping goes left.

   Secondly, a float may not sit higher than the bottom of an earlier float in
   its way (9.5.1(2)), so the year is pushed below the tallest item on row 1.
   html/body pin line-height to a fixed 22px (style-custom.css:41-45), which
   every span inherits, so the year's box top lands at 25.5px = below "SEP"s
   22px line box + its 3.5px margin. Its digits then sit at y 32.8-40.8 while
   the 31.5px (2.25em of 14px) day digits only span y 0.7-23.2 — the year is
   entirely below the day, which is the "not a cluster / sits low near the
   icon" half of the report.

   THE FIX: two explicit columns and two explicit rows, which is what the
   design actually is. Grid states the placement instead of inferring it from
   wrap order, so the year can be put in column 2 / row 2 directly and the
   day can span both rows. Track geometry is deliberately identical to the
   float version (1fr 1fr = the same 50% split, same right/left text-align,
   same 5px gutter on the day), so "25" and "SEP" do not move horizontally by
   a single pixel; only the year changes column.

   Vertical: dropping the month's 3.5px margin-top and giving the month/year
   line-height 1.2 (instead of the inherited 22px, which is 2x the year's
   11.2px font) makes rows 1-2 measure 16.8px + 17.4px. The day keeps its
   inherited 22px line box, so ITS glyphs do not move either; because the two
   rows together (34.2px) already exceed the day's 22px, the row-spanning day
   contributes no extra track space and cannot re-open the gap. Net result:
   "SEP" digits y 3.8-13.8 (top-right of the day, was 9.9-19.9) and "2026"
   y 19.8-27.8 (was 32.8-40.8) — the stack now overlaps the day's 0.7-23.2
   band and reads as one unit.

   The year's 4px margin-bottom preserves clearance to the calendar icon.
   .wcl_icon_calendar is absolute at bottom:20px, 28px tall, inside .wcl_date's
   50px padding-bottom (reservation.css:145,156), i.e. always 2px below the
   content box; the tightened leading would otherwise cut the visible gap from
   the current ~8.7px to ~4.4px. With the 4px it is ~8.4px — unchanged to the
   eye. The block as a whole gets 13px shorter (101px vs 114px), which is the
   intended "more compact" part of the report; the widget's own overlay input
   (height: calc(100% - 20px), reservation.css:159) is percentage-based and
   follows the box.

   SCOPE. Deliberately .TYPE02-only. .wcl_date markup exists solely in
   checkbox-template.php (grepped: only reservation.css, reservation-script.js,
   default-style*.php and this file mention .wcl_date / #WCL_RESERVATION_WIDGET;
   there is no other date picker in the theme), but that one template serves
   both layouts, and TYPE01 does NOT have this bug — reservation.css:90-91
   positions its month and year absolutely at the same static-position left
   edge (bottom: 18.5px / 5px), so its year is already under its month. TYPE02
   is the live layout (h3 visible, 320px panel — see the block above). The
   horizontal-bar TYPE01 must keep its own geometry, hence no shared-selector
   edit.

   Specificity (2,4,1) beats reservation.css's (1,3,1) outright, so this wins
   regardless of enqueue order (reservation.css and style-custom.css are both
   registered on wp_enqueue_scripts from different files — widget.php:8 and
   site-setup.php:48 — so relying on source order would be fragile) and no
   !important is needed. float/width are re-declared because grid items ignore
   float but NOT width: the inherited width:50% would otherwise halve each
   column's content box.

   Responsive: no change at any breakpoint but desktop. reservation.css:162-164
   hides #WCL_RESERVATION_WIDGET entirely below 1024px, and reservation.css:173
   additionally hides every .wcl_rsvn_box below 768px, so tablet (768-1023px)
   and mobile never render this block; 1024px-1199px renders the same 320px
   panel as >=1200px. In that 320px panel the calendar box is 48% = ~120px, so
   each column is ~59px against widest content of ~41px ("25" + gutter), ~32px
   ("SEP" incl. the inherited 1.4px letter-spacing) and ~31px ("2026") — no
   overflow, no wrapping, and the same holds with room to spare in the 768px
   .box-center panel. */
#BOOKING_WIDGET.wrapper-reservation #WCL_RESERVATION_WIDGET.TYPE02 .wcl_date {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
}
#BOOKING_WIDGET.wrapper-reservation #WCL_RESERVATION_WIDGET.TYPE02 .wcl_date span {
    float: none;
    width: auto;
    align-self: start;
}
/* Day — left column, spanning both rows so the month/year stack sits beside it. */
#BOOKING_WIDGET.wrapper-reservation #WCL_RESERVATION_WIDGET.TYPE02 .wcl_date span:first-child {
    grid-area: 1 / 1 / 3 / 2;
    text-align: right;
    padding: 0 5px 0 0;
}
/* Month — right column, row 1. */
#BOOKING_WIDGET.wrapper-reservation #WCL_RESERVATION_WIDGET.TYPE02 .wcl_date span:nth-child(2) {
    grid-area: 1 / 2 / 2 / 3;
    text-align: left;
    line-height: 1.2;
    margin: 0;
}
/* Year — right column, row 2: directly under the month, not under the day. */
#BOOKING_WIDGET.wrapper-reservation #WCL_RESERVATION_WIDGET.TYPE02 .wcl_date span:nth-child(3) {
    grid-area: 2 / 2 / 3 / 3;
    text-align: left;
    line-height: 1.2;
    margin: 0 0 4px 0;
}

/* Booking Widget — brand colors for the parts ACF cannot reach
   (assets/reservation_widget/css/reservation.css)

   WHERE THE WIDGET'S COLORS COME FROM. Two sources, and this block is
   deliberately only about the second:

   1. ACF Appearance fields, printed as an inline <style> in the page body by
      booking_engine/default-style.php — panel background, label color, BOOK NOW
      button fill/label, and .daterangepicker td.active. Those are now branded at
      their source, in reservation-setup.php:45-80, NOT here: that keeps wp-admin
      authoritative over them (an ACF value still overrides the fallback), and
      avoids a CSS layer that would silently defeat a future client change. Do
      not re-declare those properties in this file — the inline <style> is in the
      body, so it outranks this stylesheet on equal specificity anyway.

   2. Hard-coded values inside reservation.css, which no ACF field exposes:
      #333333 date figures (:38), #eeeeee borders on the date box / select box /
      promo input (:145,153,154), #eee borders + #333 text + #eeeeee hover on the
      dropdown options (:61,62,64), #888 promo-code text (:43). Those are the
      generic grays this block replaces, plus focus rings, which the widget
      simply never had.

   VALUES, all already used elsewhere on the site:
     var(--text-color)         #37493c  body-copy moss  (:72)
     rgba(55, 73, 60, 0.2)     form input borders       (:568, the CF7 modals)
     rgba(55, 73, 60, 0.5)     placeholder text         (:575)
     var(--secondary-color)    #c4a77d  gold focus ring (:580-584)
     rgba(55, 73, 60, 0.08)    hover/selection wash — same moss-alpha scale as
                               the two above, one step lighter than the border
   Intentionally NOT touched: the #fff panel and dropdown surfaces, the #FFF
   button label, and the year's opacity:0.5 (reservation.css:40) — all readable
   and deliberate rather than generic, per the brief.

   SCOPE. Both IDs, as with the blocks above: #BOOKING_WIDGET /
   #WCL_RESERVATION_WIDGET are printed once, by checkbox-template.php only, and
   every wcl_* / select-box__* class exists solely in this widget (grepped across
   the theme's .php/.css/.js — reservation.css, reservation-script.js,
   default-style*.php and this file are the only files that mention them). So
   nothing here can leak into another component, and no shared button or color
   class is edited. Specificity (2,x,y) also clears reservation.css's (1,x,y)
   without !important. */

/* Date figures: was #333333. */
#BOOKING_WIDGET.wrapper-reservation #WCL_RESERVATION_WIDGET .wcl_date span {
    color: var(--text-color);
}
/* Field borders: were #eeeeee. */
#BOOKING_WIDGET.wrapper-reservation #WCL_RESERVATION_WIDGET.TYPE02 .wcl_date,
#BOOKING_WIDGET.wrapper-reservation #WCL_RESERVATION_WIDGET.TYPE02 .select-box,
#BOOKING_WIDGET.wrapper-reservation #WCL_RESERVATION_WIDGET.TYPE02 .wcl_promo_code input[type=text] {
    border-color: rgba(55, 73, 60, 0.2);
}
/* Promo code input: was #888 text on a gray border, with UA-default placeholder. */
#BOOKING_WIDGET.wrapper-reservation #WCL_RESERVATION_WIDGET .wcl_rsvn_box.wcl_promo_code input[type=text] {
    color: var(--text-color);
}
#BOOKING_WIDGET.wrapper-reservation #WCL_RESERVATION_WIDGET .wcl_rsvn_box.wcl_promo_code input[type=text]::placeholder {
    color: rgba(55, 73, 60, 0.5);
}
/* Rooms/Adults/Children dropdown: were #eee borders, #333 sub-label, #eeeeee hover.
   border-color alone is enough — reservation.css:61,63 decide WHICH edges have a
   border width, and this only recolors whichever ones are drawn. */
#BOOKING_WIDGET.wrapper-reservation #WCL_RESERVATION_WIDGET li label.select-box__option {
    border-color: rgba(55, 73, 60, 0.2);
}
#BOOKING_WIDGET.wrapper-reservation #WCL_RESERVATION_WIDGET li label.select-box__option span {
    color: var(--text-color);
}
#BOOKING_WIDGET.wrapper-reservation #WCL_RESERVATION_WIDGET li label.select-box__option:hover,
#BOOKING_WIDGET.wrapper-reservation #WCL_RESERVATION_WIDGET li label.select-box__option:focus {
    color: var(--text-color);
    background-color: rgba(55, 73, 60, 0.08);
}
/* Focus rings — new, not a recolor. The widget had none: the promo input is
   outline:none (reservation.css:43) and the two date fields are transparent
   opacity:0 inputs laid over .wcl_date (reservation.css:41,159), so a keyboard
   user got no feedback at all. :focus-within puts the ring on the visible box
   instead of the invisible control, matching the CF7 modal treatment at :580-584.
   TYPE02-only on purpose: these three rings sit on the borders TYPE02 draws
   (reservation.css:145,153,154). TYPE01 is the borderless horizontal bar — its
   .wcl_date is an unboxed absolute cluster and its promo input is border:none
   (reservation.css:43), so a 1px ring there would outline nothing. */
#BOOKING_WIDGET.wrapper-reservation #WCL_RESERVATION_WIDGET.TYPE02 .wcl_rsvn_box.wcl_calendar:focus-within .wcl_date,
#BOOKING_WIDGET.wrapper-reservation #WCL_RESERVATION_WIDGET.TYPE02 .select-box:focus-within,
#BOOKING_WIDGET.wrapper-reservation #WCL_RESERVATION_WIDGET.TYPE02 .wcl_rsvn_box.wcl_promo_code input[type=text]:focus {
    border-color: var(--secondary-color);
    box-shadow: 0 0 0 1px var(--secondary-color);
}

/* Calendar popup (assets/reservation_widget/css/daterangepicker.css:175,192).
   Selected days already follow the brand via BE_BUTTON_COLOR / td.active, but
   the range fill between them and the day-hover were vendor #eeeeee with #000
   text. Not ID-scoped because daterangepicker appends its popup to <body>,
   outside #BOOKING_WIDGET — class selectors are the only option. Still narrow in
   practice: reservation-script.js:11 holds the theme's ONLY .daterangepicker()
   init (#date_from/#date_to, i.e. this widget), and the CF7 booking modals use
   plain UIkit date inputs, not this plugin. Equal specificity to the vendor rule
   wins on order — widget.php's enqueues run before site-setup.php's
   (inc/config.php:90 vs :92-94), so this file always loads last. The endpoint
   cells stay moss: td.active is printed later still, from the body <style>. */
.daterangepicker td.in-range {
    background-color: rgba(55, 73, 60, 0.08);
    color: var(--text-color);
}
.daterangepicker td.available:hover,
.daterangepicker th.available:hover {
    background-color: rgba(55, 73, 60, 0.08);
}

/* Accommodation */
.common-list-flex .entry-wrap span { color: #666; }

/* FAQ */
.custom-faq-section  { display: flex; justify-content: center; }
.home-faq { display: block; float: none; max-width: 1000px; overflow: hidden; margin: 50px 0; position: relative; text-align: center; width: 100%; }

.faq-header { line-height: normal; }
.faq-accordion { margin: 50px 0; }
.faq-accordion .faq-topic { text-align: left; margin: 20px 0 0; }
.faq-accordion .faq-item { border-bottom: 1px solid #c3c3c3; }

.custom-faq-section .faq-question { padding: 20px 0; cursor: pointer; display: flex; justify-content: space-between; align-items: center; text-align: left; }
.custom-faq-section .faq-question::after { content: ''; width: 7px; height: 7px; border-right: 1px solid #333; border-bottom: 1px solid #333; transform: rotate(45deg); transition: transform 0.3s ease; margin-right: 10px; }
.custom-faq-section .faq-answer { display: none; padding-bottom: 25px; line-height: 1.6; animation: fadeIn 0.4s ease-out forwards; }

.custom-faq-section .faq-answer p { color: #8e8e8e; margin: 0; }
.custom-faq-section .faq-item.active .faq-answer { display: block; text-align: left; }
.custom-faq-section .faq-item.active .faq-question::after { transform: rotate(225deg); margin-top: 5px; border-right: 1px solid #333; border-bottom: 1px solid #333; }

/* Read More button */
.faq-accordion .faq-item:nth-child(n+5),
.faq-accordion .faq-topic:nth-child(n+5) { display: none; }

.faq-accordion.show-all .faq-item:nth-child(n+5),
.faq-accordion.show-all .faq-topic:nth-child(n+5) { display: block; animation: fadeIn 0.4s ease-out forwards; }

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}
/* End FAQ */

/* Guest Reviews */
.guest-review-container { display: flex; flex-direction: column; gap: 60px; }
.guest-review-item { display: flex; flex-wrap: wrap; gap: 5%; padding-bottom: 30px; }
.guest-review-info-col { flex: 1 1 30%; display: flex; flex-direction: column; justify-content: flex-start; padding-top: 10px; }
.guest-review-name { text-transform: uppercase; letter-spacing: 2px; margin: 0 0 15px 0; border-bottom: 1px solid var(--secondary-color); padding-bottom: 15px; }
.guest-review-date { margin-bottom: 5px; }
.guest-review-source { color: #37493c; }
.guest-review-detail-col { flex: 1 1 65%; line-height: 1.8; padding-right: 20px; }
.guest-review-detail-col p { margin-bottom: 15px; padding-top: 20px; }
.guest-review-detail-col p:first-child::before {
    position: relative;
    content: '"';
    height: 40px;
    width: 40px;
    left: -5px;
    top: -2px;
    font-size: 16px;
}
.guest-review-detail-col p:last-child:after {
	position: relative;
    content: '"';
    height: 40px;
    width: 40px;
    right: -5px;
    bottom: 2px;
    font-size: 16px;
}
.guest-review-additional-content { margin-top: 50px; text-align: center; }
/* End Guest Reiews */

/*Blog*/
.uk-breadcrumb a{ color: #999; }
.uk-breadcrumb a:hover{ color: #37493c; }
.common-breadcrumb .nav-breadcrumb .uk-breadcrumb .breadcrumb_last:hover *{ color: #999 !important;}
.uk-breadcrumb.common-tag a{ color: #999; }
.breadcrumb-end-content a{ color: #999; }
.breadcrumb-end-content a:hover{ color: #37493c; }
.sidebar-entry .wp-block-latest-posts li{ margin-bottom: 10px; display: inline-block;}
.widget_block .wp-block-latest-posts__featured-image{ max-width: 60px;}
.widget_block .wp-block-latest-posts__post-title{ font-family: var(--font-primary); color: var(--primary-color);}
.widget_block .wp-block-latest-posts__post-title:hover{ color: #37493c;}
.widget_block .wp-block-categories-list{ padding: 0;}
.widget_block .wp-block-categories-list li{ list-style-type: none;}
.widget_block .wp-block-categories-list li a{ color: #999;}
.widget_block .wp-block-categories-list li a:hover{ color: #37493c;}
.widget_block .wp-block-tag-cloud a,
.widget_block .wp-block-latest-posts__post-author, .wp-block-latest-posts__post-date{ color: #999;}
.widget_block .wp-block-tag-cloud a:hover{ color: #37493c;}
.widget_block .wp-block-search__button-inside .wp-block-search__inside-wrapper{border: 1px solid var(--border-color);}
.widget_block .wp-block-search__button svg{ color: #999;}
.widget_block .wp-block-search__button:hover svg{ color: #37493c;}
.widget_block .wp-element-button{border:0; background: transparent;}
/* Home Footer */
.home .common-footer.background-muted { background-color: var(--background-muted); }
/*Footer*/
.common-footer .common-footer-content .no-cursor { cursor: unset; }
.common-footer .common-footer-content form .uk-flex p{ display: flex; width: 100%; margin: 0!important; }
.common-footer .common-footer-content form .uk-flex p .wpcf7-form-control-wrap{ width: 70%;}
.common-footer .common-footer-content form input{ width: 100%;}
.common-footer .common-footer-content form button{ width: 30%; height: 40px;}
.common-footer .common-footer-content form .uk-flex p .wpcf7-form-control-wrap .wpcf7-not-valid-tip{ color: #FF0000;}
.common-footer .common-footer-content form.invalid .wpcf7-response-output,
.common-footer .common-footer-content form.sent .wpcf7-response-output{ border: none; background-color: #c4a77d; font-size: 0.8em; color: #37493c; }

/* Footer Widget */
#contacts-container .contacts-launcher { background-color: var(--secondary-color) !important; }

/* Chat launcher (footer.php:20-45 — third-party "contacts-script" widget,
   loaded async from https://api.webconnection.asia/chat/widget.js, which
   also injects its own stylesheet: widget.js does
   `head.appendChild(<link href=".../widget.css">)` on load, so that
   stylesheet always lands in <head> AFTER this one — an unqualified
   override of its #contacts-container/.contacts-launcher rules would lose
   the cascade tie on source order alone, hence !important below (this file
   otherwise avoids it per the layering convention at the top of this file —
   this is the documented exception, since there's no first-party base rule
   to fix at the source).

   widget.css anchors the button bottom-right (`#contacts-container{
   position:fixed; right:0; bottom:0}`, `.contacts-launcher{ position:
   absolute; right:14px; bottom:20px }`), which at narrow widths sat on top
   of the Location section's green card / GET DIRECTIONS button. Flipped to
   the top edge instead below 768px (screen.css/style-custom.css's existing
   mobile+tablet cutoff — see .common-location-grid's own breakpoint,
   style-custom.css:1650 — reused rather than inventing a new one).

   Offsets aren't guessed: `top: 80px` on the container reuses this theme's
   own header-height constant (main.css:125, `.uk-navbar-dropdown{ top:80px
   !important }` — the value the theme itself already uses to sit content
   flush below the fixed .common-navbar, main.css:65-71, and that height is
   constant across breakpoints since the logo's 10px top/bottom padding,
   main.css:83-86, never changes below 1200px). `top: 20px` on the launcher
   mirrors its own original `bottom: 20px` edge margin from widget.css,
   just moved to the opposite edge, so it keeps the same breathing room it
   shipped with. Desktop (>768px) is left bottom-anchored as-is — nothing
   reported it looking wrong there, and the Location card already has its
   own bottom clearance for it (style-custom.css:1585-1597).

   `.contacts-panel` is excluded on both selectors: `.contacts-chat-icon.
   contacts-panel` (widget.css) is the *expanded* modal, kept centered via
   its own `top:50% !important` — an unscoped override here would have
   beaten that rule (an ID-qualified selector always outranks a two-class
   one, regardless of !important on both sides) and broken the open state. */
@media (max-width: 768px) {
    #contacts-container {
        top: 80px !important;
        bottom: auto !important;
    }
    #contacts-container .contacts-launcher:not(.contacts-panel),
    #contacts-container .contacts-chat-icon:not(.contacts-panel) {
        top: 20px !important;
        bottom: auto !important;
    }
}

@media (max-width: 1024px){
    .common-slider-primary .position-nav-center{ top: calc(25vh - 40px); }
    #checkbox-flip{ display: none!important; }
}
@media (max-width: 768px) {
	.guest-review-container { gap: 0; }
	.guest-review-item { flex-direction: column; gap: 20px; }
  	.guest-review-info-col,
  	.guest-review-detail-col { flex: 1 1 100%; padding-right: 0; }
    .guest-review-detail-col p { padding-top: 0; }
}
 .block-policy{
        display: block;
        text-align: left;
    }
    .block-policy h3{
        font-size: 20px;
        line-height: 1;
        font-weight: 500;
        margin-top: 24px;
		margin-bottom: 8px;
    }
    .block-policy h4{
        font-size: 16px;
        line-height: 1;
        font-weight: 500;
        margin-bottom: 8px;
    }
    .block-policy p{
        font-size: 14px;
		margin-top: 8px;
    }

/* Welcome Section (front-page.php the_content() intro, inside .home-intro-wrapper) */

/* Rhythm Section */
/* Removes duplicate bottom padding: this section is nested inside front-page.php's
   own .common-wrapper.home-intro-wrapper, so both were stacking a redundant 80px. */
.common-wrapper.home-intro-wrapper .common-content .common-row {
    padding-bottom: 0;
}
.common-rhythm-image {
    width: 100%;
    max-width: 918px;
    aspect-ratio: 918 / 480;
    margin: 0 auto 40px;
}
.common-wrapper .common-content .common-row.common-rhythm-row {
    padding-bottom: 80px;
}
/* max-width matches the shared .details cap (main.css:494, 1024px) instead of
   overriding it to 1440px. Every other text block on the site — page intros,
   section headings, .common-contact (main.css:914) — is a 1024px column
   centred inside .common-content's padded box; this one was the exception and
   ran the full width of that box, which is the "hero area stretches
   edge-to-edge differently from other sections" report.

   It was invisible while screen.css re-capped .common-content to 1200px below
   1441px (the box was 1140px, so the difference was 116px). With that cap
   removed the box is 1380px at a 1440px viewport, and an uncapped rhythm block
   would have run 1380px wide with its own 918px image (.common-rhythm-image
   above) floating in the middle of it — so the two changes have to land
   together.

   1024px also agrees with that 918px image cap, which is what the section was
   evidently composed around. The pipe-separated items line is the only content
   here at risk of wrapping at the narrower width; if it does, it breaks after a
   "|", which the note under .common-rhythm-items already treats as the correct
   wrap point. */
.common-wrapper .common-content .common-row .details.common-rhythm-details {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 1024px;
    margin: 0 auto;
}
.common-rhythm-items {
    font-size: 14px;
}
.rhythm-item {
    text-transform: uppercase;
}
/* Y03 — separator is generated here instead of being a literal "|" span in
   part-home-rhythm.php. Same rendering as before by design: same glyph, same
   gold, same 8px each side (the old .rhythm-divider span carried margin:0 8px),
   so this is a markup cleanup, not a visual change.
   :not(:last-child) replaces the template's $key/count arithmetic and is more
   accurate — it only counts items that actually rendered, so a repeater row with
   an empty label can no longer leave a dangling separator at the end.
   Wrap behaviour is unchanged too: the only whitespace in the markup is still
   between one item and the next, i.e. after the separator, so a narrow viewport
   still breaks after a "|" and never between a phrase and its own separator —
   which is what the .common-rhythm-details note above relies on.
   aria-hidden isn't needed: CSS-generated content is decorative and most screen
   readers skip ::after text, whereas the old literal span was read aloud. */
.rhythm-item:not(:last-child)::after {
    content: "|";
    margin: 0 8px;
    color: var(--secondary-color);
}
.rhythm-subtext {
    font-size: 14px;
    text-align: center;
    margin: 0;
}
/* Pipe-separated rhythm list is the widest, most attention-grabbing text in this section
   (16px uppercase x4 phrases + dividers) — at desktop it fits on one line inside the 1440px
   .common-rhythm-details wrapper, but that same 16px overwhelms the section and forces ugly
   mid-phrase wraps once the container narrows to tablet/mobile widths. Scale it down at the
   two breakpoints so the phrases wrap cleanly at their natural whitespace (after each "|")
   instead of fighting for space on one line. */
@media (max-width: 768px) {
    .common-rhythm-items {
        font-size: 14px;
    }
    .rhythm-item:not(:last-child)::after {
        margin: 0 6px;
    }
}
@media (max-width: 480px) {
    .common-rhythm-items {
        font-size: 12px;
    }
    .rhythm-item:not(:last-child)::after {
        margin: 0 4px;
    }
}
/* Home Accommodation Carousel — even card content, bottom-aligned CTAs
   (template-parts/part-home-accommodation.php, .room-slider-home)

   Y04. The <li> cards are ALREADY equal height — uk-grid stretches them and
   uk-grid-match (part-home-accommodation.php:14) makes each one a flex box whose
   lines stretch to the shared height, and the room photo is a fixed 60vh /
   40vh (main.css:561, screen.css:95) in every card. The uneven part is INSIDE
   the card: .details is a plain block (main.css:493), so its content stacks from
   the top and the Book Now / Explore row lands wherever the description happens
   to end — high on the short "Superior" copy, low on the long "Mayaana
   Panoramic" copy. That is the misaligned-buttons report.

   Making .details a flex column is the whole fix, because the mechanism for it
   is already in place and just inert: main.css:517-523 gives .split-sentence
   flex-grow:1, which does nothing while the parent is a block. As a flex column
   it expands the description box to absorb all the leftover card height, and the
   button <p> after it is pushed to the card's bottom edge — identical across
   every card, since every card is the same height. No margin-top:auto needed,
   and no min-height/fixed height guesses. Works even when a room has no
   intro_detail at all: the template emits the empty .split-sentence div
   regardless, so the spacer is always there.

   Margin collapsing isn't a concern: flex items don't collapse margins, but
   every child here is already at margin 0 (main.css:28-31 zeroes h1-h6 and
   "* + p", which covers both the .split-sentence-preceded button <p> and the
   heading-sub/h3), so the rhythm is unchanged. text-align:center and the
   max-width:1024px from .details' base rule still apply.

   Clamp: the description was already clamped — .split-sentence is
   -webkit-line-clamp:3 site-wide (main.css:517-523), which is the "consistent
   length" half of the report, already satisfied. Raised to 4 lines HERE ONLY,
   per the QA's 4-5 line ask: these cards are uk-width-3-4 of the viewport, far
   wider than the 1-3 card grids that same site-wide rule also feeds (offers,
   facilities, "Other Rooms"), so 3 lines cuts unusually early at this width. It
   stays a fixed maximum, so uniformity is unaffected. Deliberately NOT changed
   in main.css — that would move every card grid on the site, which is out of
   scope for this item.

   Responsive: nothing here is width-dependent, and it holds at all three QA
   breakpoints. The carousel keeps its own screen.css overrides (.uk-width-3-4
   and .details at :170-176 and :319-324) untouched; this only changes how
   .details distributes its own height, and it cannot overflow because the extra
   space being distributed already existed inside the card. */
.common-slider-primary .room-slider-home .uk-slider-items > li > .details {
    display: flex;
    flex-direction: column;
}
.common-wrapper .common-content .common-row .room-slider-home .split-sentence {
    -webkit-line-clamp: 4;
}

/* Highlight Tiles Section */
.highlight-tiles-section {
    background-color: #37493c;
    color: #dfdccd;
}
.highlight-tiles-section h2,
.highlight-tiles-section p,
.highlight-tiles-section span {
    color: #dfdccd;
}
/* CSS Grid — every row is equal-height by default (grid's own
   align-items:stretch), which is what actually keeps the 3 tiles aligned;
   no UIkit uk-grid/uk-grid-match involved any more. */
.highlight-tiles-grid {
    margin-top: 20px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}
.highlight-tile {
    text-align: center;
    /* Column layout so image/heading/description stack, with the text
       block pushed to a shared baseline via margin-top:auto below. */
    display: flex;
    flex-direction: column;
}
/* Single aspect-ratio source of truth for every tile image — object-fit:cover
   crops any source size to the same box. Previously this container also had
   a UIkit uk-cover-container + canvas placeholder (700x500, ratio 1.4) that
   fought this element's own CSS aspect-ratio (448/288, ratio 1.556) — two
   different mechanisms asserting two different ratios on the same box is
   what caused the uneven tile heights. Now there's only one. */
.highlight-tile-image {
    width: 100%;
    aspect-ratio: 3 / 2;
    position: relative;
    overflow: hidden;
}
.highlight-tile-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.highlight-tile-text {
    width: 100%;
    /* Pushes the title+description block toward the bottom of the equal-height column,
       so shorter descriptions don't leave the title floating high under the image. */
    margin-top: auto;
}
.highlight-tile-heading {
    font-size: 16px !important;
    font-weight: 400;
    color: #ffffff !important;
    margin-top: 20px;
}
.highlight-tile-description {
    font-size: 12px;
    font-weight: 300;
    line-height: 22px;
    margin-top: 10px;
}

/* Responsive: 3 columns desktop / 2 columns tablet / 1 column mobile */
@media (max-width: 768px) {
    .highlight-tiles-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
    .highlight-tile-heading {
        font-size: 14px !important;
    }
}
@media (max-width: 480px) {
    .highlight-tiles-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .highlight-tile-heading {
        font-size: 13px !important;
    }
}

/* Facilities / Experiences Section — small uppercase label above each tile heading.
   main.css:680 already declares .common-switch-places-content .heading-sub{text-transform:uppercase}
   (the hook existed before the markup did); this matches that selector's specificity
   (0,2,0) and wins purely on load order (style-custom.css loads after main.css), so
   no !important is needed. Color is left inherited (moss --text-color) deliberately:
   this section sits on the cream uk-background-muted, and the brand notes above in
   this file record that gold reads too light on cream surfaces. */
.common-switch-places-content .heading-sub {
    font-size: 14px;
    font-weight: 300;
    letter-spacing: 0.15em;
    line-height: 1.4;
    margin-bottom: 10px;
    opacity: 0.75;
}
@media (max-width: 1199px) {
    .common-switch-places-content .heading-sub {
        font-size: 11px;
        letter-spacing: 0.12em;
        margin-bottom: 8px;
    }
}


/* Main nav menu items (Home, Accommodation, Facilities, etc.) — excludes button-styled items */
.common-navbar .common-navbar-container .uk-navbar-nav > li.menu-item:not(.common-navbar-button):not(.navbar-button-outline) > a {
    font-family: var(--font-secondary);
    font-weight: 300;
    font-size: 12px;
    line-height: 22px;
    color: #dfdccd;
    text-decoration-line: underline;
    text-decoration-color: transparent;
    text-decoration-thickness: 2px;
    /* Gap between label and active underline — was 5px (too tight), pushed down for breathing room */
    text-underline-offset: 12px;
    /* Scoped to color only — no other property (decoration, background, transform) animates on hover */
    transition: color 0.2s ease;
}
/* Active/current page — the persistent orange underline. No :hover here anymore: this must
   win the specificity tie against the hover rule below (same selector weight), so it stays
   ordered AFTER it, keeping the underline visible even while the active item is hovered. */
.common-navbar .common-navbar-container .uk-navbar-nav > li.menu-item:not(.common-navbar-button):not(.navbar-button-outline) > a:hover {
    color: #c4a77d !important;
}
.common-navbar .common-navbar-container .uk-navbar-nav > li.menu-item.current-menu-item:not(.common-navbar-button):not(.navbar-button-outline) > a,
.common-navbar .common-navbar-container .uk-navbar-nav > li.menu-item.current_page_item:not(.common-navbar-button):not(.navbar-button-outline) > a {
    text-decoration-color: #C96F4A !important;
}

@media (min-width: 1200px) {
    /* --- Desktop nav fit ---------------------------------------------------
       The row holds 11 flex items: 9 uppercase labels + the Book Now and
       Explore the Stay buttons. At the old values (12px type, the 0.1rem
       /1.4px letter-spacing inherited from html,body at main.css:22, a 20px
       gap and two fixed 165px buttons) that row measures ~1347px. Available
       width was 912px at a 1200px viewport and 1104px at 1440px and above —
       i.e. it overflowed across the whole desktop range, which is the crowding
       in the screenshot.

       Trimming type, gap and buttons recovers ~285px, which is not enough on
       its own. The rest is structural: main.css:79-88 splits the bar 20% logo
       / 80% nav, but the logo is only an 80px image, so the 20% column wasted
       138px at 1200px and 186px at 1440px. Sizing the logo to its content and
       letting the nav take the remainder is what actually makes the row fit;
       the four sizing changes below then buy the breathing room.

       Budget after both (see the per-item arithmetic in the fit table):
         1200px viewport -> needs ~952px  of 1050px available (98px spare)
         1440px viewport -> needs ~1062px of 1290px available (228px spare)
         1920px viewport -> identical to 1440px; the container is capped at
                            1440px, so nothing grows past it. This is also why
                            the clamps below top out at a 1440px viewport
                            rather than scaling on unbounded vw. */

    /* 0. Structural: logo takes its own width, nav takes what's left.
       (0,3,0) ties main.css:80 and (0,4,0) beats main.css:86; screen.css:87
       re-widens the logo to 50% but only at <=1024px, so no overlap.
       min-width:0 lets the nav shrink rather than wrap to a second line —
       .common-navbar-main is flex-wrap:wrap (main.css:76), so without it an
       over-long row would drop onto a new line and double the bar's height. */
    .common-navbar .common-navbar-main .common-logo {
        width: auto;
        flex: 0 0 auto;
    }
    .common-navbar .common-navbar-main .common-navbar-container.common-navbar-fixed {
        width: auto;
        flex: 1 1 auto;
        min-width: 0;
    }

    /* 1. Item gap: 20px -> 10px at 1200px, easing back to 14px at 1440px+.
       Same clamp(min, expression, max) form the theme already uses for the
       hero title (main.css:392). 1.6667vw - 10px hits exactly 10px at 1200
       and 14px at 1440. Ties main.css:104-106 and wins on load order. */
    .common-navbar .uk-navbar-nav,
    .common-navbar .uk-navbar-right {
        gap: clamp(10px, 1.6667vw - 10px, 14px);
    }

    /* 2. Label type: fixed 13px per brand request (was clamp(10px, 0.41667vw
       + 5px, 11px)). Letter-spacing stays at 0.04em to keep some of the
       space savings from the original fit pass — see the width-budget note
       above this block. Same selector as the base rule at :651 (0,6,2) —
       this whole block sits after the base nav/button rules (:165, :211,
       :651) precisely so it wins on source order without needing
       !important. */
    .common-navbar .common-navbar-container .uk-navbar-nav > li.menu-item:not(.common-navbar-button):not(.navbar-button-outline) > a {
        font-size: 13px;
        letter-spacing: 0.04em;
    }

    /* 2b. Extra separation at the label -> button boundary only. The flex gap
       above is uniform, so "Contact" would otherwise sit the same 10-14px from
       "Book Now" as the labels sit from each other. The adjacent-sibling test
       means the two buttons keep the plain gap between themselves, and the rule
       is order-agnostic — whichever button follows the last label gets it. */
    .common-navbar .common-navbar-container .uk-navbar-nav > li:not(.common-navbar-button):not(.navbar-button-outline) + li.common-navbar-button,
    .common-navbar .common-navbar-container .uk-navbar-nav > li:not(.common-navbar-button):not(.navbar-button-outline) + li.navbar-button-outline {
        margin-left: 10px;
    }

    /* 3. Buttons: the fixed 165px box was sized for 12px type with the old
       letter-spacing ("Explore the Stay" measured ~131px then, ~97px now).
       Width goes auto so each button is only as wide as it needs, with
       min-width keeping the short "Book Now" visually paired with the long
       one rather than collapsing next to it. Horizontal padding 10px -> 14px
       is a slight *increase* per side, which is what keeps the tighter box
       from looking pinched — the saving comes from dropping the fixed width
       (330px -> ~245-255px for the pair), not from squeezing the padding.
       height/min-height stay at 36px so the bar's height is unchanged. */
    .common-navbar .common-navbar-main .common-navbar-container .common-navbar-button a,
    .common-navbar .common-navbar-main .common-navbar-container .navbar-button-outline a {
        width: auto;
        min-width: 120px;
        padding: 10px 14px;
        font-size: clamp(10px, 0.41667vw + 5px, 11px);
        letter-spacing: 0.04em;
    }
}

/* Mobile offcanvas nav labels (Home, Our Story, Accommodation, etc.) — the
   slide-out menu shown from the hamburger. Scoped to max-width:1024px, the
   same breakpoint screen.css:41-90 already uses to switch the header from
   the desktop nav to the hamburger/offcanvas nav, so the label size lines
   up with the exact range this menu is actually reachable in. Targets only
   the top-level `:first-child` link per main.css:195's own selector (the
   `<a>` is the first child of each `<li>`) — leaves the uk-close button,
   dropdown submenu items (.uk-dropdown-nav > li > a) and the social-media
   block, which share that base rule, untouched. Ties main.css:195 (0,4,0)
   and wins on load order, same pattern as the desktop nav block above. */
@media (max-width: 1024px) {
    .common-navbar-offcanvas .uk-offcanvas-bar .uk-subnav > * > :first-child {
        font-size: 12px;
    }
}

/* ==========================================================================
   Facilities / Experiences Section (Background, Colors & Margins)
   ========================================================================== */

/* 1. ปรับพื้นหลังของกล่องข้อความให้เป็นสีเขียวเข้ม */
.common-switch-places-content .uk-grid-collapse > .uk-flex {
    background-color: var(--primary-color) !important;
}

/* 2. ปรับสีตัวอักษรให้เป็นสีสว่าง
   ul/li/a/span/strong/em ถูกเพิ่มเข้ามาระหว่าง QA pass — ของเดิมครอบแค่ p/h3/heading-sub
   ซึ่งพอสำหรับหน้าที่ใช้ .card-description (บล็อค 9 ด้านล่างครอบชุดนี้ซ้ำอีกที) แต่
   part-home-facilities.php (การ์ด Facilities/Experiences บนหน้า Home) echo
   $item['description'] ตรง ๆ โดยไม่มี .card-description ครอบ ถ้าเนื้อหา WYSIWYG มี list/link/
   inline tag พวกนี้จะเหลือสีเขียวเข้ม (--primary-color) ทับพื้นเขียวเข้มเดียวกัน อ่านไม่ออก
   เพิ่มชุดนี้ที่นี่แทนเพื่อให้ครอบทุกหน้าที่ใช้ .uk-card-body นี้โดยไม่ต้องพึ่ง .card-description

   .uk-card-body a:not(.uk-button) กันไม่ให้ชนปุ่ม BOOK NOW / EXPLORE (<a class="uk-button ...">)
   ซึ่งเป็นลูก <a> ของ .uk-card-body เหมือนกัน — ปุ่ม uk-button-default มี hover state เปลี่ยนสีเป็น
   #37493c ที่ style-custom.css:253 (ไม่มี !important) ถ้า a ตัวนี้ครอบแบบไม่กันไว้ !important
   ของ rule นี้จะชนะแล้วปุ่มจะขาว "ค้าง" ตลอด ไม่เปลี่ยนสีตอน hover */
.common-switch-places-content .uk-card-body .heading-sub,
.common-switch-places-content .uk-card-body h3,
.common-switch-places-content .uk-card-body p,
.common-switch-places-content .uk-card-body ul,
.common-switch-places-content .uk-card-body li,
.common-switch-places-content .uk-card-body a:not(.uk-button),
.common-switch-places-content .uk-card-body span,
.common-switch-places-content .uk-card-body strong,
.common-switch-places-content .uk-card-body em {
    color: #FFF !important;
}

/* 3. กล่องข้อความโดยรวม (ดันขอบ Padding ให้สวยงาม) */
.common-switch-places-content .uk-card-body {
    padding: 50px 8% !important; 
    box-sizing: border-box;
    width: 100%;
}

/* 4. บีบระยะห่างใต้ Sub-title (DINING) */
.common-switch-places-content .uk-card-body .heading-sub {
    margin-top: 0 !important;
    margin-bottom: 4px !important; /* บีบให้ชิด Heading มากที่สุด */
}

/* 5. บีบระยะห่าง Heading (EAT. DRINK. REPEAT.) */
.common-switch-places-content .uk-card-body h3 {
    margin-top: 0 !important;
    margin-bottom: 8px !important; /* บีบให้ชิดคำอธิบาย */
    line-height: 1.2 !important;   /* ลดช่องว่างโปร่งๆ ของตัวอักษร */
}

/* 6. ระยะห่างของเนื้อหา Description */
.common-switch-places-content .uk-card-body p {
    margin-top: 0 !important;
    margin-bottom: 0 !important;   /* เคลียร์ระยะห่างด้านล่างทิ้ง */
    line-height: 1.6 !important;
}

/* 7. แยกจัดการเฉพาะปุ่ม (ซึ่งถูกครอบด้วย <p> ตัวสุดท้าย) */
.common-switch-places-content .uk-card-body p:last-of-type {
    margin-top: 24px !important;   /* ดันปุ่มให้ห่างจากข้อความด้านบน 24px */
    margin-bottom: 0 !important;
}

/* 8. ระยะ Padding สำหรับมือถือ */
@media (max-width: 768px) {
    .common-switch-places-content .uk-card-body {
        padding: 40px 20px !important;
        text-align: center;
    }
}

/* 9. Short description (content-restaurant.php) — บังคับสีตัวอักษรเป็นสีขาว
   ครอบคลุมทั้งกรณีที่ ACF คืนค่าเป็น plain text (text node ตรง ๆ ที่ไม่โดนกฎ p ข้อ 2)
   และกรณี WYSIWYG ที่มี tag ย่อยอื่นนอกเหนือจาก <p> */
.common-switch-places-content .uk-card-body .card-description,
.common-switch-places-content .uk-card-body .card-description p,
.common-switch-places-content .uk-card-body .card-description li,
.common-switch-places-content .uk-card-body .card-description span,
.common-switch-places-content .uk-card-body .card-description strong,
.common-switch-places-content .uk-card-body .card-description em,
.common-switch-places-content .uk-card-body .card-description a {
    color: #FFF !important;
}

/* กัน margin-top ของปุ่มจากข้อ 7 ไม่ให้ตกมาที่ย่อหน้าสุดท้ายของ description */
.common-switch-places-content .uk-card-body .card-description p:last-of-type {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* 10. Tablet — ลดขนาดตัวอักษร/letter-spacing ของ description ให้พอดีกับคอลัมน์ที่แคบลง
   (ยังเป็น 2 คอลัมน์อยู่จนถึง 640px จึงต้องบีบที่ 768px) */
@media (max-width: 768px) {
    .common-switch-places-content .uk-card-body .card-description,
    .common-switch-places-content .uk-card-body .card-description p,
    .common-switch-places-content .uk-card-body .card-description li {
        font-size: 0.85rem !important;
        line-height: 1.6 !important;
        letter-spacing: 0.06rem !important;
    }

    .common-switch-places-content .uk-card-body h3 {
        text-align: center;
    }
}

/* 11. Mobile — บีบอีกขั้น + กันคำยาวล้นกล่อง */
@media (max-width: 480px) {
    .common-switch-places-content .uk-card-body .card-description,
    .common-switch-places-content .uk-card-body .card-description p,
    .common-switch-places-content .uk-card-body .card-description li {
        font-size: 0.8rem !important;
        line-height: 1.7 !important;
        letter-spacing: 0.04rem !important;
        overflow-wrap: break-word;
        word-break: break-word;
    }
}

/* 12. Slider nav arrows (restaurant + facilities switch-places slider).
   Scoped to .common-switch-places-content — that class is authored in the PHP
   (content-restaurant.php:45, content-facilities.php:45), unlike .uk-slider-container
   which UIkit's JS injects at runtime, so it's the stable hook. The .uk-slidenav class
   itself is JS-applied to the <a>, same as the existing .uk-icon hook at screen.css:162.
   Base .uk-slidenav (uikit.css:5907) is only padding + a translucent grey color, and
   .uk-light .uk-slidenav (uikit.css:12076) lifts it to rgba(255,255,255,0.7) — still a
   bare glyph that disappears over busy photos. These add the pill behind it.
   Specificity here is 0,2,0, matching .uk-light .uk-slidenav, and wins on load order
   (site-setup.php enqueues uikit at :36, style-custom at :41) — no !important needed.
   Visibility is deliberately NOT touched: uk-hidden-hover (uikit.css:9400) still
   collapses the arrow to 0x0 until the slider is hovered/focused. */
.common-switch-places-content .uk-slidenav {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 50%;
    background-color: rgba(55, 73, 60, 0.45); /* --primary-color #37493c (Deep Moss Green) */
    color: #FFF;
    transition: background-color 0.2s ease-in-out, color 0.1s ease-in-out;
}
.common-switch-places-content .uk-slidenav svg {
    width: 16px;
    height: 26px;
}
.common-switch-places-content .uk-slidenav:hover,
.common-switch-places-content .uk-slidenav:focus {
    background-color: rgba(55, 73, 60, 0.75);
    color: #FFF;
}
.common-switch-places-content .uk-slidenav:active {
    background-color: rgba(55, 73, 60, 0.9);
    color: #FFF;
}

/* 12a. Tablet */
@media (max-width: 1199px) {
    .common-switch-places-content .uk-slidenav {
        width: 38px;
        height: 38px;
    }
    .common-switch-places-content .uk-slidenav svg {
        width: 14px;
        height: 23px;
    }
}

/* 12b. Mobile — 767px ไม่ใช่ 768px เพราะ 768px ยังนับเป็น tablet ตาม convention ของโปรเจกต์ */
@media (max-width: 767px) {
    .common-switch-places-content .uk-slidenav {
        width: 34px;
        height: 34px;
    }
    .common-switch-places-content .uk-slidenav svg {
        width: 12px;
        height: 20px;
    }
}

/* 13. Tablet และต่ำกว่า — บังคับให้ card grid เรียงเป็นคอลัมน์เดียว (รูปบน / ข้อความล่าง)
   UIkit ตั้ง .uk-child-width-1-2@s ให้เป็น 50% ตั้งแต่ min-width:640px (uikit.css:6781)
   ไม่ใช่ 768px จึงต้องครอบตั้งแต่ 1199px ลงมาทั้งช่วง ไม่งั้นช่วง 640–767px จะยังเป็น 2 คอลัมน์
   ค้างอยู่ (ดูคำอธิบายเพิ่มเติมในรายงาน)
   .uk-flex-last@s (uikit.css:8630) คือ order:99 ที่ทำ zebra-striping สลับซ้าย/ขวา —
   ต้องรีเซ็ตเป็น 0 ด้วย ไม่งั้นแถวคี่จะกลายเป็นข้อความอยู่บน รูปอยู่ล่าง ไม่ตรงกับ mobile
   specificity 0,2,0 ชนะ UIkit ที่เป็น 0,1,0 จึงไม่ต้องใช้ !important
   (escape \@ ใช้แบบเดียวกับ screen.css:174 ที่มีอยู่แล้วในโปรเจกต์)
   ไม่แตะ .uk-card-media-left / .uk-card-media-right เพราะสองคลาสนี้ไม่มี CSS ผูกอยู่เลย */
@media (max-width: 1199px) {
    .common-switch-places-content .uk-child-width-1-2\@s > * {
        width: 100%;
    }
    .common-switch-places-content .uk-flex-last\@s {
        order: 0;
    }
    /* 13a. คุมความสูงรูปตอน stack — <canvas> คือตัวที่กำหนดความสูงของ .uk-cover-container
       (uikit.css:149 ให้ canvas เป็น max-width:100%; height:auto) พอ column กว้างเต็มจอ
       อัตราส่วน 750x500 (3:2) จะทำให้สูงถึง ~800px ที่ 1199px จึง cap ไว้ที่ 520px
       ตัว <img uk-cover> ถูก position absolute อยู่แล้ว (uikit.css:7672) และ container
       เป็น overflow:hidden (uikit.css:7694) รูปจึงยัง cover เต็มกรอบที่เตี้ยลงโดยไม่บิดสัดส่วน
       selector นี้ครอบทั้ง canvas ของรูปเดี่ยวและ canvas ในแต่ละ <li> ของ slider
       ที่ ~780px ลงมาความสูงตามธรรมชาติต่ำกว่า 520px อยู่แล้ว rule นี้จึงไม่มีผลกับมือถือ */
    .common-switch-places-content .uk-cover-container canvas {
        max-height: 520px;
    }
}

/* ==========================================================================
   Activities page only (.activities-media-col / .activities-card-body
   — content-activities.php)

   REVERT + POLISH. The card-grid redesign (.activities-groups /
   .activity-group-* / .activity-card-*) is deleted in full — every selector,
   the <details> accordion styling, the numbered badge, the chevron, the
   keyframes. The page is back on .common-switch-places-content, so blocks
   1-13 above apply to it again exactly as they did originally:
       block 1  — dark green fill on the text column
       block 2  — white text on h3 / p / ul / li / strong
       block 3  — 50px 8% padding on .uk-card-body
       block 5  — h3 margins
       block 9  — white text inside .card-description
       block 13 — stack to one column below 1200px
   Nothing in those blocks is edited here; they are shared with
   content-facilities.php, content-restaurant.php, content-meetings.php and
   part-home-facilities.php. Everything below is scoped to one of the three
   Activities-only hook classes so those four pages are untouched.

   Block 14 (the height:100% chain that makes the image column match the
   green block) is restored verbatim from the original — it was deleted
   during the redesign and is what requirement 2c ("consistent vertical
   alignment between the image and the text block") depends on.

   GOLD ON DARK GREEN — the one place a brand value is not used directly.
   --secondary-color #c4a77d against --primary-color #37493c measures 3.59:1.
   That is fine for a solid 2px bar (non-text), but the activity names are
   15px bold, which WCAG does not count as large text (that starts at 18.66px
   bold), so they would need 4.5:1 and fail. #d9c49b is the same hue lightened
   until it clears the bar at 5.56:1. It is used for every gold accent inside
   the green block — names, dash markers, heading underline — so they all
   match each other rather than one being visibly duller than the rest. The
   brand --secondary-color is still used unchanged everywhere else on the
   site, including on light backgrounds where it measures fine.
   ========================================================================== */

/* --- 14. คอลัมน์รูปให้สูงเท่ากล่องข้อความสีเขียว (restored from the original) ---
   ตัว .uk-grid เป็น display:flex (uikit.css:4510) และ align-items ปริยายคือ stretch
   ดังนั้น <div> คอลัมน์รูป "ยืดเต็มความสูงแถวอยู่แล้ว" — ที่เตี้ยคือ *เนื้อหาข้างใน*:
     - เคสรูปเดี่ยว: <canvas 750x500> จองความสูงแค่ 2/3 ของความกว้าง
     - เคส slider: <div uk-slider> เป็น block ความสูง auto ตามสไลด์ ไม่ได้ยืดตาม parent
   จึงไล่ set height:100% ลงไปทุกชั้นให้ชนก้นคอลัมน์ ส่วน <img uk-cover> ถูก
   position:absolute + parent overflow:hidden อยู่แล้ว (uikit.css:7672/7694)
   รูปจึง cover เต็มกรอบที่สูงขึ้นโดยไม่ยืดผิดสัดส่วน
   จำกัดไว้ที่ min-width:1200px เท่านั้น เพราะบล็อค 13 ทำให้ต่ำกว่า 1200px เป็น stack
   คอลัมน์เดียวไปแล้ว การไปบังคับความสูงตาม sibling ที่อยู่ "ใต้" กันจึงไม่มีความหมาย
   และจะทำให้รูปโดน crop เกินจำเป็น — ต่ำกว่า 1200px ปล่อยเป็น auto + cap 520px ตาม 13a */
@media (min-width: 1200px) {
    .activities-media-col {
        align-self: stretch;
    }
    /* เคสรูปเดี่ยว */
    .activities-media-col > canvas {
        height: 100%;
    }
    /* เคส slider — [uk-slider] เป็น attribute ที่เขียนไว้ใน markup จริง ไม่ใช่คลาสที่ JS เติม */
    .activities-media-col > [uk-slider],
    .activities-media-col .uk-slider-items,
    .activities-media-col .uk-slider-items > li,
    .activities-media-col .uk-slider-items > li > .uk-cover-container,
    .activities-media-col .uk-slider-items > li > .uk-cover-container > canvas {
        height: 100%;
    }
}

/* 14a. REMOVED — the row previously carried border-radius:14px + overflow:hidden
   to clip the image and the green block into one rounded panel. Both corners
   are now square, matching the rest of the site's switch-places rows. The
   overflow:hidden went with it: it existed only to make the radius clip, and
   leaving it behind would be an invisible clipping boundary on the row with
   nothing asking for one. The .activities-row hook class was dropped from the
   template at the same time — it had no other user. */

/* --- 14b. More internal padding on the dark-green block ---
   Overrides block 3's `padding: 50px 8% !important` (0,2,0). !important is
   required because the rule being beaten carries it; the selector is (0,3,0)
   so it wins on specificity, per this project's CLAUDE.md rule.
   The per-breakpoint values below use the SAME selector and win on load
   order, which is also why they have to be restated rather than inherited:
   block 8's own mobile padding is only (0,2,0), so without these the desktop
   64px would survive all the way down to a phone. */
.common-switch-places-content .uk-card-body.activities-card-body {
    padding: 64px 9% !important;
}

/* --- 14c. Section heading — bold, prominent, gold underline accent ---
   Block 5 sets margin-bottom:8px !important at (0,2,0) to pull the old h3
   tight against its paragraph; with a list below and an underline beneath the
   title, that is too tight. (0,3,0) + !important overrides it.
   text-transform:uppercase is applied here rather than assumed from the
   field — delete that one line if the titles should render as typed. */
.common-switch-places-content .uk-card-body.activities-card-body h3 {
    position: relative;
    margin-bottom: 26px !important;
    padding-bottom: 16px;
    font-size: clamp(22px, 2.4vw, 30px) !important;
    font-weight: 600;
    line-height: 1.25 !important;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.common-switch-places-content .uk-card-body.activities-card-body h3::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 48px;
    height: 2px;
    background-color: #d9c49b;
}
/* Small label above the heading — a little more air under it than block 4's
   4px, which was tuned for a title sitting directly on a paragraph. */
.common-switch-places-content .uk-card-body.activities-card-body .heading-sub {
    margin-bottom: 10px !important;
    opacity: 0.7;
}

/* --- 14d. The activity list ---
   This is the readability fix. The content is untouched WYSIWYG markup —
   <ul><li><strong>Morning Yoga</strong> – description…</li></ul> — so all of
   it is done with CSS on the tags the editor already produces.

   Default disc markers are dropped for a thin gold dash. list-style:none plus
   an absolutely-positioned ::before is used rather than ::marker, because
   ::marker only accepts content/colour/font, not a drawn shape, and a text
   dash character would not line up consistently across fonts. */
/* Cap the line length. At >=1200px the green column is ~690px wide and its
   9% padding already leaves a ~566px measure, so this is inert there. It only
   bites once block 13 stacks the layout below 1200px and the block goes full
   width: at 1199px that would otherwise be a ~957px measure, ~130 characters
   a line, which is roughly twice a comfortable reading length and undoes the
   line-height work. One rule, no breakpoint needed — it engages exactly when
   the column gets too wide and does nothing when it doesn't. */
.common-switch-places-content .uk-card-body.activities-card-body .card-description {
    max-width: 600px;
}
.common-switch-places-content .uk-card-body.activities-card-body .card-description ul {
    list-style: none;
    margin: 0;
    padding-left: 4px; /* the deeper indent lives on the li, so the dash hangs inside this */
}
.common-switch-places-content .uk-card-body.activities-card-body .card-description li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 22px; /* the "not cramped" gap between activities */
    font-size: 14px;
    line-height: 1.9;    /* was the inherited 22px/14px ≈ 1.57 */
}
.common-switch-places-content .uk-card-body.activities-card-body .card-description li:last-child {
    margin-bottom: 0;
}
/* The dash. 0.95em from the top lands it on the optical centre of the first
   line at line-height 1.9, so it stays aligned whether the item runs to one
   line or four. */
.common-switch-places-content .uk-card-body.activities-card-body .card-description li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.95em;
    width: 16px;
    height: 1.5px;
    background-color: #d9c49b;
}

/* Activity name — gold, bolder, a step larger.
   Blocks 2 and 9 both force color:#FFF !important onto strong/b inside this
   card body, at (0,3,0). This is (0,5,0) + !important, so it wins outright.
   Left inline rather than made display:block on purpose: the authored text is
   "Morning Yoga – Start your day…", so breaking the name onto its own line
   would leave the description starting with a dangling "– ". Inline gold at
   700 already separates it clearly. */
.common-switch-places-content .uk-card-body.activities-card-body .card-description li strong,
.common-switch-places-content .uk-card-body.activities-card-body .card-description li b {
    color: #d9c49b !important;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.04em;
}
/* Description text — muted white rather than pure white, so the gold names
   read as the first level and the copy as the second. Over #37493c this
   resolves to roughly #dbdedc, about 12:1, so it is muted visually without
   giving up any real contrast. Same specificity note as above: blocks 2 and 9
   set #FFF !important on li, so this needs (0,5,0) + !important too. */
.common-switch-places-content .uk-card-body.activities-card-body .card-description li,
.common-switch-places-content .uk-card-body.activities-card-body .card-description p {
    color: rgba(255, 255, 255, 0.82) !important;
}
/* Paragraphs inside the list body (an intro or closing line the editor wrote
   outside the <ul>) get the same rhythm as the list items. Block 6 sets
   line-height:1.6 !important at (0,2,0); this is (0,4,0). */
.common-switch-places-content .uk-card-body.activities-card-body .card-description p {
    line-height: 1.9 !important;
    margin-bottom: 20px !important;
}
.common-switch-places-content .uk-card-body.activities-card-body .card-description p:last-child {
    margin-bottom: 0 !important;
}

/* --- 14e. Keep the block left-aligned at every width ---
   Same fix, same reason, as block 15 does for the Meetings page. Two rules
   centre this text on small screens:
       block 8            @media (max-width:768px) → text-align:center
       screen.css:255     @media (max-width:640px) → text-align:center
   Centred text would strand every gold dash on the left edge with its item
   floating away from it, and the h3 underline (left:0) would sit under
   nothing. (0,4,0) here beats both, so no !important is needed. */
.common-switch-places-content .uk-grid-collapse .uk-card-body.activities-card-body,
.common-switch-places-content .uk-grid-collapse .uk-card-body.activities-card-body .heading-sub,
.common-switch-places-content .uk-grid-collapse .uk-card-body.activities-card-body h3,
.common-switch-places-content .uk-grid-collapse .uk-card-body.activities-card-body p,
.common-switch-places-content .uk-grid-collapse .uk-card-body.activities-card-body .card-description,
.common-switch-places-content .uk-grid-collapse .uk-card-body.activities-card-body .card-description ul,
.common-switch-places-content .uk-grid-collapse .uk-card-body.activities-card-body .card-description ol,
.common-switch-places-content .uk-grid-collapse .uk-card-body.activities-card-body .card-description li {
    text-align: left;
}

/* --- 14f. Responsive ---
   Desktop-first, descending, matching this file's cascade order. Only padding
   and list rhythm change; the layout itself (2 columns down to 1199px, then
   stacked, per block 13) is the original's and is not touched here.
     1200-1199+ 64px / 9%
     1024-1199  56px / 8%   — the green column is ~470px wide at 1024px
     768-1023   48px / 7%
     <=767      44px / 26px — % padding stops making sense once the block is
                full-width; a fixed inset keeps the text off the edge without
                eating a third of a phone screen
     <=480      36px / 22px, tighter list rhythm */
@media (max-width: 1199px) {
    .common-switch-places-content .uk-card-body.activities-card-body {
        padding: 56px 8% !important;
    }
    .common-switch-places-content .uk-card-body.activities-card-body h3 {
        margin-bottom: 22px !important;
    }
}
@media (max-width: 1023px) {
    .common-switch-places-content .uk-card-body.activities-card-body {
        padding: 48px 7% !important;
    }
    /* Block 10 (@media max-width:768px) sets line-height:1.6 !important on
       .card-description li at (0,3,0). The base rule above is (0,4,0) but
       carries no !important, so without this the roomier 1.9 would silently
       revert to 1.6 for everything from 768px down — the exact widths where
       the extra breathing room matters most. Restated here at (0,4,0) +
       !important; this query is still in effect at 768px and below, so it
       wins on specificity. */
    .common-switch-places-content .uk-card-body.activities-card-body .card-description li {
        line-height: 1.9 !important;
    }
}
@media (max-width: 767px) {
    .common-switch-places-content .uk-card-body.activities-card-body {
        padding: 44px 26px !important;
    }
}
@media (max-width: 480px) {
    .common-switch-places-content .uk-card-body.activities-card-body {
        padding: 36px 22px !important;
    }
    /* Blocks 10 and 11 already step the description down to 0.85rem then
       0.8rem at these widths with line-height !important; restate the rhythm
       at (0,4,0) so the roomier spacing survives, and pull the indent in so a
       narrow column keeps enough room for the text itself. */
    .common-switch-places-content .uk-card-body.activities-card-body .card-description li {
        padding-left: 24px;
        margin-bottom: 18px;
        line-height: 1.85 !important;
    }
    .common-switch-places-content .uk-card-body.activities-card-body .card-description li::before {
        width: 12px;
    }
    .common-switch-places-content .uk-card-body.activities-card-body .card-description li strong,
    .common-switch-places-content .uk-card-body.activities-card-body .card-description li b {
        font-size: 14px;
    }
}

/* ==========================================================================
   Meetings page only (.meetings-card-body — content-meetings.php:56/60)
   ========================================================================== */

/* 15. บังคับชิดซ้ายทุก breakpoint
   ต้นเหตุคือ screen.css:255 ที่อยู่ใน @media (max-width: 640px):
       .common-switch-places-content .uk-grid-collapse .uk-card-body { text-align: center; }
   text-align สืบทอดลงลูกทั้งหมด heading-sub / h3 / ul จึงกึ่งกลางตามไปด้วย
   ส่วน <ul> ยังมี padding-left:30px ของ UIkit (uikit.css:295) ค้างอยู่ พอข้อความกึ่งกลาง
   ทั้งก้อนเลยดูเยื้องเข้ามาครึ่งหนึ่งตามที่เห็นในภาพ
   selector นี้ specificity 0,4,0 สูงกว่า screen.css ที่ 0,3,0 จึงไม่ต้องใช้ !important
   (และ style-custom.css ถูก enqueue หลัง screen.css อยู่แล้ว — site-setup.php:39 vs :41)
   ไม่แตะ padding/margin ของ ul เลย desktop จึงยังหน้าตาเดิมเป๊ะ แค่ mobile กลับมาชิดซ้าย */
.common-switch-places-content .uk-grid-collapse .uk-card-body.meetings-card-body,
.common-switch-places-content .uk-grid-collapse .uk-card-body.meetings-card-body .heading-sub,
.common-switch-places-content .uk-grid-collapse .uk-card-body.meetings-card-body h3,
.common-switch-places-content .uk-grid-collapse .uk-card-body.meetings-card-body p,
.common-switch-places-content .uk-grid-collapse .uk-card-body.meetings-card-body .card-description,
.common-switch-places-content .uk-grid-collapse .uk-card-body.meetings-card-body .card-description ul,
.common-switch-places-content .uk-grid-collapse .uk-card-body.meetings-card-body .card-description ol,
.common-switch-places-content .uk-grid-collapse .uk-card-body.meetings-card-body .card-description li {
    text-align: left;
}

/* 16. คอลัมน์รูปให้สูงเท่ากล่องข้อความสีเขียว (โครงสร้างเดียวกับบล็อค 14 ของหน้า activities)
   .uk-grid เป็น display:flex (uikit.css:4510) align-items ปริยาย = stretch ทั้งสองคอลัมน์
   จึง "สูงเท่ากันอยู่แล้ว" และกล่องเขียวก็คือ grid child ที่ถูก stretch (พื้นหลังมาจากบล็อค 1
   ที่ทาไว้บน .uk-grid-collapse > .uk-flex ไม่ใช่บน .uk-card-body) — ที่ไม่เต็มคือเนื้อหาในคอลัมน์รูป:
     - เคสรูปเดี่ยว: <canvas 750x500> จองความสูงแค่ 2/3 ของความกว้าง
     - เคส slider: <div uk-slider> เป็น block ความสูง auto ไม่ยืดตาม parent
   จึงไล่ set height:100% ลงไปทุกชั้น ส่วน <img uk-cover> เป็น position:absolute
   ใน container ที่ overflow:hidden อยู่แล้ว (uikit.css:7672/7694) จึง cover เต็มกรอบ
   โดยไม่ต้องเติม object-fit ซ้ำและไม่ผิดสัดส่วน
   จำกัดที่ min-width:1200px เพราะบล็อค 13 ทำให้ต่ำกว่านั้น stack เป็นคอลัมน์เดียวไปแล้ว
   ความสูงจึงกลับเป็น auto เองโดยไม่ต้องมี override ที่ max-width:767px */
@media (min-width: 1200px) {
    .meetings-media-col {
        align-self: stretch;
    }
    /* เคสรูปเดี่ยว */
    .meetings-media-col > canvas {
        height: 100%;
    }
    /* เคส slider — [uk-slider] เป็น attribute ที่อยู่ใน markup จริง ไม่ใช่คลาสที่ JS เติม */
    .meetings-media-col > [uk-slider],
    .meetings-media-col .uk-slider-items,
    .meetings-media-col .uk-slider-items > li,
    .meetings-media-col .uk-slider-items > li > .uk-cover-container,
    .meetings-media-col .uk-slider-items > li > .uk-cover-container > canvas {
        height: 100%;
    }
}

/* ==========================================================================
   Special Offers page only (.offers-media-col — content-offers.php:71/74)

   content-offers.php was rebuilt onto the shared .common-switch-places-content
   pattern (full-width alternating rows) and off the .common-card-content
   3-up grid. Everything that page needs is therefore inherited from blocks
   1-13 above — the green text panel, the type scale, the slidenav styling and
   the <=1199px stack-to-one-column rule all key off .common-switch-places-content
   and needed no changes. Only two page-specific things are left:

   a. Image column height, identical in purpose to blocks 14 and 16.
   b. The "Best Deal" / "Hot Deal" ribbon, which lost its styling in the move.
   ========================================================================== */

/* a. คอลัมน์รูปให้สูงเท่ากล่องข้อความสีเขียว — โครงเดียวกับบล็อค 14/16 เป๊ะ
   <canvas 750x500> จองความสูงแค่ 2/3 ของความกว้าง ส่วน [uk-slider] เป็น block
   ความสูง auto จึงไม่ยืดตาม parent ทั้งคู่ต้องไล่ set height:100% ลงไป
   ต่างจาก 14/16 ตรง <li> ของสไลด์: หน้านี้ใช้โครงของ content-facilities.php
   ที่วาง <img> ไว้ใน <li> ตรง ๆ (ไม่มี uk-cover-container + canvas ซ้อน) จึงต้อง
   object-fit:cover ที่ตัว img เอง แทนที่จะพึ่ง uk-cover ของ UIkit
   จำกัดที่ min-width:1200px เพราะบล็อค 13 ทำให้ต่ำกว่านั้น stack เป็นคอลัมน์เดียว
   ความสูงกลับเป็น auto + cap 520px ตาม 13a อยู่แล้ว */
@media (min-width: 1200px) {
    .offers-media-col {
        align-self: stretch;
    }
    /* เคสรูปเดี่ยว */
    .offers-media-col > canvas {
        height: 100%;
    }
    /* เคส slider — [uk-slider] เป็น attribute ที่เขียนไว้ใน markup จริง ไม่ใช่คลาสที่ JS เติม */
    .offers-media-col > [uk-slider],
    .offers-media-col .uk-slider-items,
    .offers-media-col .uk-slider-items > li {
        height: 100%;
    }
    .offers-media-col .uk-slider-items > li > img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

/* b. ป้าย Best Deal / Hot Deal
   เดิมได้สไตล์มาจาก .common-card-content .position-items-img .ribbon-inner
   (main.css:768-790) ซึ่งหน้านี้ไม่มี .common-card-content แล้ว ป้ายจึงกลายเป็น
   <label> เปล่า ๆ — ก็อปค่าเดิมมาผูกกับ .offers-media-col แทน
   ตัว .uk-cover-container เป็น position:relative + overflow:hidden อยู่แล้ว
   (uikit.css:7750-7755) ป้ายที่หมุน 45 องศาจึงถูก clip เป็นสามเหลี่ยมมุมขวาบน
   เหมือนเดิมโดยไม่ต้องประกาศเพิ่ม
   สี .sohot ไม่ได้ใช้ var(--ribbon-color) ตามของเดิม เพราะตัวแปรนั้นไม่เคยถูก
   ประกาศไว้ที่ไหนเลยในธีม (ปัญหาชุดเดียวกับ --border-color) ทำให้ background-color
   ทั้ง declaration invalid แล้วตกกลับไปเป็น transparent — ป้าย Hot Deal จึงโปร่งใส
   มาตลอด ใช้สีเทอร์ราคอตต้าที่ไฟล์นี้ใช้เป็นสี CTA รองอยู่แล้วแทน */
.common-switch-places-content .offers-media-col .ribbon-inner {
    position: absolute;
    width: 200px;
    top: 24px;
    right: -70px;
    background-color: var(--white-color);
    font-size: 0.7rem;
    color: var(--primary-color);
    text-transform: uppercase;
    text-align: center;
    padding: 10px;
    transform: rotate(45deg);
    display: block;
    z-index: 1;
}
.common-switch-places-content .offers-media-col .ribbon-inner.sohot {
    background-color: #C96F4A;
    color: #dfdccd;
}
/* ริบบิ้นถูกย่อตามสัดส่วนเดียวกับ screen.css:200 (-70px = -35% ของ 200px)
   เพื่อให้ยังตกมุมขวาบนพอดีตอนคอลัมน์แคบลง */
@media (max-width: 768px) {
    .common-switch-places-content .offers-media-col .ribbon-inner {
        width: 150px;
        top: 20px;
        right: -52px;
        font-size: 0.65rem;
        padding: 8px;
    }
}

/* ==========================================================================
   Contact page — Getting Here / Nearby Highlights (content-contact.php)
   ========================================================================== */

/* 17. บล็อคใหม่สองคอลัมน์ คั่นระหว่างแถว address/form กับแผนที่
   margin-top 50px ให้เท่ากับ .common-map (main.css:944) จังหวะแนวตั้งจะได้ต่อเนื่องกัน
   h4 padding-bottom 30px ก็อปจังหวะของ .common-contact-details h4 (main.css:916)
   แต่ไม่ต้องใส่ !important เพราะ specificity 0,2,1 ชนะ h1..h6{padding:0} (main.css:28) อยู่แล้ว
   <ul> ปล่อยให้ใช้ค่า default ของ UIkit (padding-left:30px, uikit.css:295) และ list-style: disc
   ตามเบราว์เซอร์ — ไม่มี list-style:none ตัวไหนใน main.css ที่ครอบมาถึงหน้านี้ */
.common-contact .common-contact-info {
    margin-top: 50px;
}
.common-contact .common-contact-info h4 {
    padding-bottom: 30px;
    text-transform: uppercase;
}
/* 17a. เนื้อหาจาก WYSIWYG อยู่ใน <dd> — ตัว editor ใส่ <p> มาเองซึ่ง UIkit ให้ margin-bottom 20px
   (uikit.css:183) ถ้าปล่อยไว้จะมีช่องว่างค้างท้ายทุกแถวและห่างเกินจริง จึงเคลียร์ margin
   ของ child ตัวสุดท้ายใน dd ทิ้ง แล้วคุมระยะห่างระหว่างแถวที่ dd แทน
   dt ปกติ UIkit ให้ font-weight:bold (700) แต่ body ของโปรเจกต์เป็น 300 และ heading เป็น 500
   จึงตั้ง 500 ให้เข้าชุดกับ typography เดิม (ปรับเป็น 600/700 ได้ถ้าอยากให้หนากว่านี้) */
.common-contact .common-contact-info dl {
    margin: 0;
}
.common-contact .common-contact-info dt {
    font-weight: 500;
    margin-bottom: 4px;
}
.common-contact .common-contact-info dd {
    margin-left: 0;
    margin-bottom: 20px;
}
.common-contact .common-contact-info dd > *:last-child {
    margin-bottom: 0;
}
.common-contact .common-contact-info dd:last-child {
    margin-bottom: 0;
}

/* 18. Address / Message Us — stack เป็นคอลัมน์เดียวต่ำกว่า 1200px
   uk-width-1-2@s ของ UIkit เริ่มที่ min-width:640px (ไม่ใช่ 768px) ช่วง 640–1199px
   ฟอร์มจึงถูกบีบเหลือครึ่งจอ ทั้งที่มี input เต็มความกว้าง 6 ช่อง + textarea
   specificity 0,2,0 ชนะ .uk-width-1-2\@s ที่ 0,1,0 จึงไม่ต้องใช้ !important
   ระยะห่างตอน stack ไม่ต้องเพิ่มเอง UIkit grid เติมคลาส .uk-grid-margin (margin-top:30px)
   ให้ item ที่ตกลงมาแถวใหม่อยู่แล้ว
   ไม่รวม .common-contact-info (Getting Here / Nearby Highlights) เพราะเป็น label/value
   สั้น ๆ อยู่ 2 คอลัมน์ที่ tablet ได้สบาย ไม่ต้องดันให้หน้ายาวขึ้น */
@media (max-width: 1199px) {
    .common-contact .common-contact-details,
    .common-contact .common-form {
        width: 100%;
    }
}

/* 19. Location Maps — iframe ให้ responsive
   embed_code ที่ ACF เก็บมาจาก Google Maps มักมี width/height ติดมาเป็น attribute ตายตัว
   ของเดิมมีแค่ margin-top (main.css:947) จึงล้นจอแนวนอนได้บนมือถือ
   ใช้ pattern เดียวกับ .common-location-map iframe (style-custom.css:1139)
   คือ display:block + width:100% + border:0 แล้วกำหนดความสูงชัดเจนต่อ breakpoint
   ไม่ประกาศ margin ตรงนี้ margin-top:30px ของ main.css จึงยังอยู่ */
.common-contact .common-map iframe {
    display: block;
    width: 100%;
    height: 450px;
    border: 0;
}

@media (max-width: 1199px) {
    .common-contact .common-map iframe {
        height: 380px;
    }
}
@media (max-width: 767px) {
    .common-contact .common-map iframe {
        height: 300px;
    }
}

/* Parent items with a submenu (e.g. Accommodation) — NO arrow for now (removed per request).
   Kills the ::after that previously showed the images/Vector.png caret, and keeps UIkit's
   own JS-injected .uk-navbar-parent-icon span hidden too, so nothing renders next to the
   label at all. content: none (not '') + display: none guarantees no residual box/image. */
.common-navbar .common-navbar-container .uk-navbar-nav > li.menu-item-has-children .uk-navbar-parent-icon {
    display: none !important;
}
.common-navbar .common-navbar-container .uk-navbar-nav > li.menu-item-has-children > a::after {
    content: none !important;
    display: none !important;
    background-image: none !important;
    width: 0 !important;
    margin-left: 0 !important;
}

/* Dropdown submenu panel (Superior Room / Deluxe Room / Suite Room / Pool Villas, etc.)
   main.css sets a white panel with pale cream link text inherited from the top nav —
   near-unreadable. Restyle to brand: deep moss panel, cream links, gold-on-moss hover. */
.common-navbar .uk-navbar-dropdown {
    background-color: #2c3b30; /* Deep Moss Green, slightly darker than the navbar's #37493c for separation */
    width: max-content !important; /* main.css's own width: auto (line 122) was clamping the panel */
    min-width: 260px !important; /* generous side padding around the longest label ("SUPERIOR ROOM") */
    padding: 20px 32px !important; /* keep main.css's 20px vertical rhythm (line 127), widen horizontal to 32px */
}
.common-navbar .uk-navbar-dropdown-nav > li > a {
    color: #dfdccd;
    /* Match the top-level nav link's type exactly (was inheriting main.css's smaller 0.7rem dropdown font-size) */
    font-family: var(--font-secondary);
    font-weight: 300;
    font-size: 12px;
    line-height: 22px;
    white-space: nowrap !important;
    /* UIkit's uk-nav default is "padding: 5px 0" (uikit.css) — too tight against the
       dividers. Even, comfortable spacing on all sides; horizontal edge-to-panel gap
       is covered by the panel's own 32px padding above, so 0 here keeps it balanced. */
    padding: 12px 0 !important;
}
.common-navbar .uk-navbar-dropdown-nav > li > a:hover {
    color: #c4a77d;
    background-color: #24302a; /* subtle darker-green highlight on hover */
}

/* ==========================================================================
   FOOTER COLUMNS — .common-footer-grid / .footer-size / .footer-managed-row
   Single consolidated block (typography + layout). Plain CSS Grid, no
   UIkit uk-grid/uk-width-1-3 dependency. This file loads after
   main.css/screen.css (see inc/site-setup.php enqueue order), so
   equal-or-higher specificity here beats their base rules without
   needing !important — the one exception is noted below, where an
   unrelated site-wide rule genuinely requires it.
   ========================================================================== */

/* --- Layout: 3-column grid ---
   .common-footer-content (main.css) already caps at max-width:var(--breakpoint-xl)
   (1440px), same as .common-wrapper .common-content used by every other
   section — the grid just fills that width, no separate cap of its own. */
.common-footer-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 150px;
    align-items: start;
}

/* --- Typography ---
   h1,h2,h3,h4,h5,h6 { font-size: clamp(22px,5vw,32px) !important } (this
   file, ~line 51) applies site-wide and its !important beats any
   non-!important rule regardless of specificity — so !important here is
   required, not a specificity workaround. Admin-authored WYSIWYG content
   in columns 1-2 has historically used <h6> instead of <h5>, so both are
   covered. Columns stack their own children (h5, then p/ul/div) via
   normal block flow — no flex needed for that. */
.footer-size h5,
.footer-size h6 {
    font-size: 16px !important;
    font-weight: 500;
    margin: 0 0 10px;
}
.common-footer-grid .footer-size p {
    font-size: 14px;
    font-weight: 300;
    line-height: 22px;
    margin: 8px 0 0;
    /* Y02 — measure cap so the postal address wraps on its own, at whatever
       width the column happens to be, instead of at a hard <br> baked into the
       stored content (that <br> is now dropped at render, see part-footer.php).
       34ch ~= 258px at this 14px Noto Sans, against columns of ~380px at 1440px,
       ~340px at 1199px and ~294px at 1023px — so the address breaks into short,
       even lines near its natural phrase boundaries at every desktop/tablet
       width, and no line runs the full column. Left edge stays flush with the
       column's h5, because the box keeps its normal left margin here.
       ch (not px) keeps the cap tied to the font size if that ever changes.
       NOTE the cap is NOT inert at <=768px: the grid goes 1-column full-width
       and centred there, so the box needs auto side margins to stay centred —
       done in the 768px block further down, not here. */
    max-width: 34ch;
}
.common-footer-grid .footer-size ul {
    margin: 8px 0 0;
    padding: 0;
}

/* --- Managed By column: logo and icons on one row, tightly grouped.
   align-items:center vertically centers the icon row against the logo block.
   The gap here separates the logo from the icon group; the 12px gap on
   .footer-social-icons below separates the 3 icons from each other. --- */
.footer-managed-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 18px;
}
.footer-managed-row img {
    display: block;
    max-width: 90px;
    height: auto;
}
.footer-managed-row .footer-social-icons {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.footer-social-icons a {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #dfdccd;
}
.footer-social-icons a:hover {
    color: #c4a77d;
}
.footer-social-icons svg {
    width: 20px;
    height: 20px;
}

/* LINE icon (icomoon-social .ico-social.icon-line-chat) renders larger than the UIkit SVG
   icons (20px) it sits next to in two places: the footer's "Managed By" row
   (.footer-social-icons svg is explicitly 20px above) and the offcanvas "FOLLOW US" list
   (main.css:170-201 — no icon-size override there, so facebook/instagram/tripadvisor render
   at UIkit's unmodified 20px default).
   IMPORTANT: assets/fonts/icomoon-v1.0/style.css's own .icon-line-chat:before rule already
   has an explicit font-size:20px on it (added outside this repo's own edit history — it
   wasn't there when this icon set was first read into this project) — that's what's actually
   controlling the visible glyph, since a pseudo-element's font-size is independent of its
   host element once set explicitly; overriding font-size on .ico-social.icon-line-chat
   itself (the host <i>, not :before) would not touch it. So this rule targets :before
   directly, with higher selector specificity (ancestor classes + .ico-social.icon-line-chat)
   than that file's own bare .icon-line-chat:before, to win without !important.
   18px (not 20px) is a deliberate, moderate reduction below the SVGs' own 20px — the existing
   20px override evidently wasn't enough on its own (this bug report exists despite it), which
   points to the LINE glyph being drawn with less internal padding within its em-square than
   these particular UIkit SVGs have within their viewBox, so equal nominal size doesn't
   produce equal visual size here. This value is a reasoned estimate, not a measured one — I
   have no way to render this page from this environment to compare pixel-for-pixel, so treat
   18px as a starting point and nudge it (this one declaration) if it's still off either way
   once actually viewed.
   One shared rule since both contexts need the same treatment — if a future location needs a
   different size, add it as its own selector here rather than widening this one.
   vertical-align:middle is needed for the offcanvas case specifically: .footer-social-icons a
   is display:flex with align-items:center (this file, above), which centers any child
   regardless of type, but .main-social-media ul li a (main.css:188) has no such flex
   treatment — SVGs there get vertical-align:middle for free from UIkit's own base reset
   (uikit.css: canvas/img/svg/video), but a plain <i> icon-font glyph doesn't, so it would
   otherwise sit on the default text baseline instead of centered against the SVGs. Harmless
   on the footer's flex-centered instance — vertical-align has no effect on flex items, so
   flex alignment still wins there regardless. */
.footer-social-icons .ico-social.icon-line-chat,
.common-navbar-offcanvas .main-social-media .ico-social.icon-line-chat {
    vertical-align: middle;
}
.footer-social-icons .ico-social.icon-line-chat:before,
.common-navbar-offcanvas .main-social-media .ico-social.icon-line-chat:before {
    font-size: 18px;
}

/* --- Responsive ---
   Desktop (>=1200px): base .common-footer-grid rule above — unchanged.
   Tablet (769-1199px): 3 columns still, but the 150px desktop gap has to come
     down. .common-footer-content is max-width:1440px / padding:0 30px
     (main.css:1088), so the box is viewport-60: at 800px that leaves
     (740 - 300) / 3 = 146px per column, and the Managed By row needs 192px
     (90px logo + 18px gap + 84px of icons) with no flex-wrap — it overflowed
     the track. 60px then 40px keeps the narrowest tablet column at ~210px.
   Mobile (max-width:768px): a 2-column grid would leave "Managed By" (a
     compact logo+icon block, much narrower than the other two long-text
     columns) alone on its own row with a large empty gap beside it, which
     reads unbalanced — so all 3 columns stack full-width here instead.
   Mobile (max-width:480px): same 1-column stack, tighter spacing, and a
     smaller logo/icons so nothing crowds a narrow viewport. */
@media (max-width: 1199px) {
    .common-footer-grid {
        gap: 60px;
    }
}
@media (max-width: 1023px) {
    .common-footer-grid {
        gap: 40px;
    }
}
@media (max-width: 768px) {
    .common-footer-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    /* text-align:center covers headings (h5/h6) and plain text/list content
       in all 3 columns via normal inheritance. .footer-managed-row is a flex
       container, which text-align doesn't reach — and since it's a ROW,
       horizontal centering of the logo+icons group is justify-content (main
       axis); align-items:center from the base rule handles their vertical
       alignment to each other.
       flex-wrap:wrap overrides the implicit nowrap so that if the logo and the
       icon group ever exceed the column width (a wider replacement logo, or a
       320px phone), they break onto two centred lines instead of overflowing. */
    .footer-size {
        text-align: center;
    }
    /* Y02 — the 34ch measure cap on .footer-size p (base rule above) is narrower
       than this now-full-width single column, so without auto side margins the
       capped box would hug the column's left edge and the centred address text
       inside it would read visibly off-centre against the centred h5 above it.
       Side margins only: the 8px top margin from the base rule is preserved. */
    .common-footer-grid .footer-size p {
        margin-left: auto;
        margin-right: auto;
    }
    .footer-managed-row {
        gap: 12px;
        justify-content: center;
        flex-wrap: wrap;
    }
    /* Belt-and-braces for the logo itself. .footer-managed-row img is already
       display:block above, and the flex parent's justify-content centres it —
       but the "Managed By" column can also be authored as raw HTML through the
       footer_widget WYSIWYG repeater (part-footer.php:51-56) instead of the
       managed_by_logo field, in which case there is no .footer-managed-row at
       all and a block-level <img> would sit hard left with text-align doing
       nothing. Auto side margins centre it either way.
       Scoped to img only — it must not become a rule about <ul>, or the address
       and Contact Us lists would be re-laid-out too. (0,2,1) beats
       .footer-managed-row img (0,1,1), and sets no max-width, so the 90px /
       70px caps above still stand. */
    .common-footer-grid .footer-size img {
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
}
@media (max-width: 480px) {
    .common-footer .common-row {
        padding: 24px 0;
    }
    .common-footer-grid {
        gap: 36px;
    }
    .footer-managed-row img {
        max-width: 70px;
    }
    .footer-managed-row .footer-social-icons {
        gap: 10px;
    }
    .footer-social-icons svg {
        width: 18px;
        height: 18px;
    }
}

/* ==========================================================================
   FOOTER TOP BAR — cream section, circular logo + "Follow Us" icons
   (part-footer.php:3-39)
   ========================================================================== */

/* Mobile: screen.css:189 already flips this bar to a stacked, centred block
   (`.common-footer-content .uk-navbar { text-align:center; display:block }`),
   and the Follow Us side lands centred because screen.css:193 makes
   .uk-navbar-nav an inline-flex — an inline box, which text-align does reach.
   The logo side does not: .uk-navbar-left is display:flex (uikit.css:5214-5221)
   and text-align never reaches a flex container's items, so the logo stayed
   pinned to the left edge while everything around it centred. This is the same
   defect as the "Managed By" row, one section up.
   justify-content is the flex equivalent; (0,2,0) beats UIkit's bare
   .uk-navbar-left (0,1,0) and this file loads after uikit.css anyway.

   Only the horizontal alignment changes — the bar's stacking, padding and the
   logo's own size are untouched. The logo is sized solely by the width="100"
   attribute on part-footer.php:13 (no CSS anywhere targets the footer
   .common-logo), so it renders at 100px on desktop and mobile alike; it is not
   oversized on a narrow viewport and is deliberately left alone. */
@media (max-width: 768px) {
    .common-footer-content .uk-navbar-left,
    .common-footer-content .uk-navbar-right {
        justify-content: center;
    }
}

/* Footer Copyright Bar
   The copyright line comes from an ACF WYSIWYG field, so it renders wrapped
   in a <p> that inherits the global paragraph margins (main.css p{margin-top:20px}
   plus UIkit's p{margin:0 0 20px}). This two-class + element selector (0,2,1)
   outranks both bare p rules (0,0,1), so it needs no !important. */
.common-copyright .common-copyright-content p {
    margin: 10px 0 10px 0;
}

/* Home Location Section
   Plain flex, no UIkit uk-grid/uk-grid-collapse/uk-flex-middle — those
   depended on UIkit's JS adding the .uk-grid class at runtime (the "uk-grid"
   attribute alone doesn't apply the static display:flex CSS), and the extra
   uk-flex-middle wrapper centered the green box's own content height inside
   itself instead of stretching the box to fill the row, which is what
   caused the height mismatch and empty green space below. */
.common-location-grid {
    display: flex;
    align-items: stretch;
    gap: 0;
}
.common-location-map {
    flex: 1 1 50%;
}
.common-location-map iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}
/* Map tap-to-activate gate (part-home-location.php + assets/js/main.js).
   The wrapper sits between .common-location-map and the iframe, so it has to
   pass the height through: the iframe's height:100% above resolves against
   THIS box, and this box's height:100% resolves against .common-location-map
   (definite on desktop via the row's align-items:stretch, and explicitly
   320px/250px in the mobile blocks below). */
.common-location-map-embed {
    position: relative;
    height: 100%;
}
/* .is-gated is added by main.js on load and removed on the first tap/click —
   without JS neither of these two rules ever applies, so the map is interactive
   straight away exactly as before. While gated, the iframe takes no pointer
   events at all, which is what stops Google's grey cooperative-gesture overlay
   ("Use ctrl + scroll to zoom the map") from ever being triggered by a page
   scroll passing over the section. */
.common-location-map-embed.is-gated iframe {
    pointer-events: none;
}
.common-location-map-gate {
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    /* Reset the UA button box — this is an invisible hit target, not a button
       shape. background:transparent keeps the map fully visible through it. */
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    /* Vertical page scrolling still passes through (the gate isn't scrollable
       and doesn't capture touchmove); only taps land on it. */
    align-items: flex-end;
    justify-content: center;
}
.common-location-map-embed.is-gated .common-location-map-gate {
    display: flex;
}
/* Hint pill. Hidden by default and shown only on touch devices below — this is
   a touch-vs-mouse distinction, not a width one: an 810px tablet gets Google's
   grey overlay just like a phone does, while a mouse user at any window width
   needs no hint (a click on a map is self-evident, and the pill would be new
   furniture on a desktop layout that reads fine today). */
.common-location-map-gate-hint {
    display: none;
    margin-bottom: 14px;
    padding: 7px 16px;
    border-radius: 40px;
    background-color: rgba(0, 0, 0, 0.55);
    color: #FFF;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0.02em;
}
/* Location section - map gate hint, touch devices only (phones + tablets).
   Deliberately a pointer/hover query rather than a max-width one; see the
   rule above. */
@media (hover: none) and (pointer: coarse) {
    .common-location-map-gate-hint {
        display: block;
    }
}
.common-location-details {
    flex: 1 1 50%;
    background-color: var(--background-secondary);
    /* Bottom padding is larger than the other three sides on purpose: the
       floating chat/search launcher buttons (footer.php:20-45, third-party
       `contacts-script` widget loaded from api.webconnection.asia — no CSS
       for it lives in this repo, so its fixed bottom-corner position isn't
       ours to move) were sitting on top of the GET DIRECTIONS button. This
       clears their typical ~56px-diameter + ~24px edge-offset footprint so
       the button scrolls past that corner zone before the buttons reach it. */
    padding: 60px 50px;
    box-sizing: border-box;
    /* Green fill covers the full stretched height (row height is set by
       whichever column's content is taller — normally this one); centering
       the content inside that full-height box, not the box inside a taller
       transparent wrapper, is what was missing before. */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Title — h1-h6{font-size:clamp(22px,5vw,32px)!important} applies site-wide
   (this file, ~line 51); !important here is required to beat it with a
   fixed 28px, not a specificity workaround. */
.common-location-details h2 {
    font-size: 25px !important;
    color: #FFF;
}

/* Each point on one line: [icon] Highlight description. Both the bold
   highlight and the regular description share the same 16px/#FFF — only
   font-weight differs — so they're set once on the parent span and only
   overridden on strong. */
.common-location-points {
    /* Top margin only — .common-location-details p below adds its own
       margin-top, and flex-column siblings' margins don't collapse the way
       block siblings' would, so a bottom margin here would stack with that
       instead of sharing it. */
    margin: 24px 0 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}
.location-point {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}
.location-point-icon {
    /* Font Awesome 6 <i> glyph, not an <img> — font-size sets the icon's
       size and color sets its fill (replaces the old img width/height +
       brightness/invert filter trick used to force PNGs to white). */
    font-size: 20px;
    color: #FFF;
    width: 24px;
    flex-shrink: 0;
    text-align: center;
}
.location-point span {
    font-size: 16px;
    font-weight: 400;
    color: #FFF;
}
.location-point strong {
    font-weight: 600;
}

.common-location-details p {
    margin-top: 16px;
}

@media (max-width: 768px) {
    /* Stack to one column. flex-direction:column changes the main axis to
       vertical, so the desktop flex:1 1 50% (a 50%-of-width instruction)
       would otherwise be reinterpreted as 50%-of-height — reset it here. */
    .common-location-grid {
        flex-direction: column;
    }
    .common-location-map,
    .common-location-details {
        flex: none;
    }
    .common-location-map {
        margin-bottom: 24px;
    }
    .common-location-details {
        /* Extra bottom clearance for the floating chat/search buttons — see
           the base rule's comment above. */
        padding: 40px 30px;
    }
    .common-location-map,
    .common-location-map iframe {
        /* Explicit height: stacked, there's no sibling to stretch against
           any more, so the map needs its own definite size. */
        height: 320px;
    }

    .common-footer-grid .footer-size ul {
        text-align: center;
    }

    /* Icon shrunk ~25% (20px->15px font-size, 24px->18px width) and label
       text bumped up 2px (16px->18px) so the label reads more clearly next
       to the now-smaller icon on mobile. Consolidated here in the block
       that already handles this component's other mobile-width rules,
       rather than adding a separate/duplicate query for just these two
       properties. */
    .location-point-icon {
        font-size: 18px;
        width: 18px;
    }
    .location-point span {
        font-size: 16px;
    }
}
@media (max-width: 480px) {
    .common-location-map {
        margin-bottom: 20px;
    }
    .common-location-details {
        /* Extra bottom clearance for the floating chat/search buttons — see
           the base rule's comment above. */
        padding: 30px 35px;
        text-align: center;
    }
    .common-location-details h2 {
        font-size: 20px !important;
    }
    .common-location-map,
    .common-location-map iframe {
        height: 250px;
    }

    .location-point span {
        font-size: 14px;
    }
}
@media (max-width: 375px) {
    .location-point span {
        font-size: 10px;
    }
}

@media (max-width: 320px) {
    .location-point-icon {
        font-size: 12px;
        width: 12px;
    }

     .location-point span {
        font-size: 8px;
    }
}

/* ==========================================================================
   GALLERY FILTER — content-gallery.php (.common-filter-lightbox .uk-subnav)

   Base rules live in main.css (FILTER LIGHTBOX GALLERY section, ~line 900):
   .common-filter-lightbox .common-lightbox / .uk-subnav-pill > .uk-active > a.
   UIkit's own .uk-subnav (uikit.css:5582-5593) is display:flex;flex-wrap:wrap
   with no justify-content set (defaults to flex-start) and a negative-margin/
   padding-left:20px gutter trick per item — with 6 labels of very different
   lengths ("All" vs "Meetings and Events"), that wraps into uneven,
   left-ragged rows on narrow screens. Horizontal scroll (chosen over a
   centered wrapped grid) sidesteps the ragged-wrap problem entirely rather
   than just prettifying it — everything stays on one line, swipeable,
   regardless of how mismatched the label lengths are. */
@media (max-width: 767px) {
    .common-filter-lightbox .uk-subnav {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        margin-left: 0;
        padding: 4px 4px 10px;
    }
    /* Scrollbar hidden visually — cross-browser: Firefox/IE-Edge legacy via
       properties on the scroll container itself, WebKit/Chromium/Safari via
       the ::-webkit-scrollbar pseudo-element. overflow-x:auto above still
       keeps it scrollable via touch/trackpad/drag regardless of whether the
       browser's own scrollbar chrome is visible. */
    .common-filter-lightbox .uk-subnav {
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .common-filter-lightbox .uk-subnav::-webkit-scrollbar {
        display: none;
    }
    /* flex:0 0 auto stops items from shrinking/wrapping now that the row
       scrolls instead — without this, flex's default flex-shrink:1 would
       still try to compress each pill to fit the viewport width before
       ever reaching overflow-x:auto's fallback. Gutter reduced from
       UIkit's 20px per item to 10px — the biggest actual lever for "fit
       better" here, since horizontal space itself isn't the constraint in
       a scrolling row the way it would be in a wrapped grid; a tighter
       gutter just means less swiping to reach the last pill and a more
       cohesive-looking row of six. */
    .common-filter-lightbox .uk-subnav > * {
        flex: 0 0 auto;
        padding-left: 10px;
        scroll-snap-align: start;
    }
    .common-filter-lightbox .uk-subnav > *:first-child {
        padding-left: 0;
    }
    /* Font-size/padding reduced modestly, per request — kept close to
       UIkit's own already-tight pill defaults (uikit.css:5670/5673-5674:
       0.875rem font, 5px 10px padding) rather than shrinking further, so
       tap targets stay comfortable now that this is a touch-scrolled row. */
    .common-filter-lightbox .uk-subnav-pill > * > :first-child {
        font-size: 12px;
        padding: 6px 12px;
        white-space: nowrap;
    }
    /* Right-edge fade — visual hint that the row scrolls, since a plain
       cut-off pill doesn't read as "more content" the way a fade does.
       Section background here is plain white (content-gallery.php's second
       <section class="common-wrapper"> has no uk-background-muted, unlike
       the page-intro section above it), so the gradient targets white.
       Scoped to a fixed height (matching .uk-subnav's own ~48px, driven by
       its fixed font-size/padding values, not viewport width) rather than
       top:0/bottom:0 — .common-filter-lightbox (the ::after's positioning
       parent) wraps the whole filter+photo-grid section, per
       content-gallery.php:28-59, so stretching to its full height would
       drape the fade down over the photo grid below the pills too. */
    .common-filter-lightbox {
        position: relative;
    }
    .common-filter-lightbox::after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        height: 48px;
        width: 30px;
        background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.9));
        pointer-events: none;
    }
}


/* ==========================================================================
   ACCOMMODATION CATEGORY LISTING — content-accommodation.php

   Filter tabs (UIkit's native uk-filter/uk-filter-control/uk-subnav-pill —
   same mechanism already used by content-gallery.php, so no custom JS) toggle
   whole .room-category-section elements, each holding a category heading and
   its own 2-column card grid (.common-card-content > uk-child-width-1-2@m,
   the same grid content-accommodation-category.php already uses for its
   full room listing). Alternating background is a plain background-color on
   every other section, not full-bleed — content-width only, same effect as
   the "frame/border" alternative this could have been.

   Previously this page used a card-grid, then a card-slider, then a unified
   slider with a dynamic label — all replaced now, so their dedicated classes
   (.room-category-card-*, .room-unified-*, .accommodation-summary-name/-intro/
   -meta) are gone rather than left dangling, per this file's own convention. */

/* --- Filter tabs ---
   Active-tab colour matches the existing gallery filter's own convention
   (style-custom.css:906-909, .common-filter-lightbox .uk-subnav-pill >
   .uk-active > a), scoped to this page's own wrapper class instead of reusing
   that selector directly so the two filters stay independently tunable. */
.room-filter-tabs {
    justify-content: center;
    margin-bottom: 40px;
    row-gap: 12px;
}
/* Selector shape matches UIkit's own (.uk-subnav-pill > * > :first-child,
   uikit.css:5670) scoped to this page's wrapper — equal specificity, and
   style-custom.css loads after uikit.css, so it wins without !important
   (same pattern already relied on elsewhere in this file). */
.room-filter-tabs > * > :first-child {
    border: 1px solid rgba(55, 73, 60, 0.25);
    padding: 8px 18px;
}
.room-filter-tabs > .uk-active > a {
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
}

/* --- Category sections ---
   Plain white background, no alternating tone — just vertical breathing room
   between one category's grid and the next. */
.room-category-section {
    padding: 40px 0;
}

/* --- Description ---
   Full text, no line clamp. Cards may end up uneven height within a row as
   a result; buttons are pinned to each card's own bottom via margin-top:auto
   below instead of relying on forced equal height.

   .offer-card-intro-short (content-offers.php) is listed here rather than
   given its own rule further down: the offers grid was rebuilt on this exact
   card, and the description is meant to be pixel-identical to the room card's
   — a second rule with the same four declarations would only be somewhere for
   the two to drift apart. See the SPECIAL OFFERS block near the bottom of this
   file for the full inventory of what that page inherits. */
.room-card-intro-short,
.offers-card-grid .offer-card-intro-short {
    margin: 10px 0 8px;
    font-size: 13px;
    line-height: 20px;
    color: var(--text-color);
}

/* --- Tagline (short_description) ---
   Sits AFTER the description now, as a closing statement right before the
   Book Now/Explore buttons — larger/bolder/italic in the Soft Terracotta
   accent so it still reads as a pull-quote, not just more body copy. #C96F4A
   matches the existing Explore/Book Now accent (style-custom.css:180,225) —
   hardcoded to match since the theme has no CSS variable for this color
   (only --secondary-color/gold and --primary-color/moss are defined).
   Both margins are deliberately non-zero and self-sufficient rather than
   relying on a neighbor's margin, because .uk-card-body is a flex column
   (main.css:701-704) where sibling margins don't collapse: top 8px pairs
   with .room-card-intro-short's own 8px bottom margin for a combined ~16px
   gap when description is present, but still gives a real (if smaller) gap
   on its own if a page ever has short_description without a description.
   Bottom 16px keeps the tagline clear of the button row even when
   uk-grid-match stretches this card to match a taller sibling's height,
   since margin-top:auto on the <p> below (next rule) only contributes extra
   space when there's leftover row height to absorb — with none, this
   element's own bottom margin is the only guaranteed gap. */
.room-card-tagline {
    margin: 8px 0 16px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    color: #C96F4A;
}

/* --- Button row: bottom-aligned ---
   .common-icon-set's flex-grow (main.css:709) already absorbs slack from
   uk-grid-match row-height equalization, but only when a room has amenities
   to render that element. Without it (or without grid-match matching at
   all, e.g. single-column layouts), nothing pins the button row down —
   margin-top:auto on the flex-column .uk-card-body (main.css:701) covers
   both cases unconditionally. */
.common-card-content .common-card-default .uk-card-body > p {
    margin-top: auto;
}

/* --- Button row: stacked on narrow mobile ---
   Scoped to .accommodation-card-grid (added on content-accommodation.php's
   card wrapper) rather than the bare .common-card-content .common-card-default
   .uk-card-body > p selector above, because that selector is shared with
   several other pages' card grids (content-restaurant.php, content-meetings.php,
   content-activities.php, content-accommodation-category.php — see the
   comment in content-accommodation-category.php referencing this same <p>
   pattern) — this fix is scoped to accommodation only, not a sitewide change.
   Root cause: UIkit's own .uk-button is inline-block with 30px horizontal
   padding each side (uikit.css:1933-1935) and no wrap suppression, so at
   narrow widths "Book Now" + "Explore" don't both fit on one line and the
   second button drops to its own line, left-aligned under the first — valid
   CSS, but visually lopsided. Below 480px, stack them as full-width blocks
   with a deliberate gap instead of letting inline-block wrap decide.

   .offers-card-grid is included because content-offers.php now renders the
   same card with the same two-button row (Explore + Book/Enquire), so it has
   the identical wrap problem at the identical width.

   The third rule (margin:0) is scoped to offers ONLY, deliberately: main.css:
   538 gives every button here a margin of 5px 5px 5px 0, and flex-item margins
   don't collapse, so it stacks with gap:10px and lands at ~20px between
   stacked buttons. Offers is a new grid and gets the intended 10px from the
   start; accommodation has shipped with the 20px for a while and is not part
   of this change, so it is left alone rather than silently re-spaced. The
   chain repeats main.css's four ancestor classes plus the grid class so it
   wins on specificity without !important (same technique as
   .accommodation-category-card-grid's copy of this rule further down). */
@media (max-width: 480px) {
    .accommodation-card-grid .uk-card-body > p,
    .offers-card-grid .uk-card-body > p {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    .accommodation-card-grid .uk-card-body > p .uk-button,
    .offers-card-grid .uk-card-body > p .uk-button {
        width: 100%;
    }
    .common-wrapper .common-content .common-row .offers-card-grid .uk-card-body > p .uk-button {
        margin: 0;
    }
}

/* --- Category title ---
   h1-h6 are reset to margin:0 (main.css:29) and pinned to
   clamp(20px,5vw,30px) !important (style-custom.css:52). 30px was sized for a
   full-width section heading; at half width above a compact card it dwarfs the
   card. Overriding an !important declaration needs !important back — same
   pattern the footer headings already use at style-custom.css:56.
   uppercase comes free from main.css:36. */
.accommodation-summary-title {
    margin: 0 0 20px;
    padding-bottom: 14px;
    font-size: clamp(18px, 2.2vw, 22px) !important;
    letter-spacing: 0.12em;
    position: relative;
}
/* Short accent underline — 48px, left-aligned, gold. Safe on this section's
   plain white background (the "gold reads too light on cream" note elsewhere
   in this file applies to uk-background-muted sections, not this one). */
.accommodation-summary-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 48px;
    height: 2px;
    background-color: var(--secondary-color);
}
@media (max-width: 480px) {
    .accommodation-summary-title {
        margin-bottom: 16px;
        padding-bottom: 12px;
    }
}

/* ==========================================================================
   ROOM CARD ICON ROW + AMENITY TAGS
   (content-accommodation-category.php — a different template from
   content-accommodation.php above, used for the individual room cards, e.g.
   "Superior" / "Superior Sea View" shown on /accommodation/superior-rooms/)
   Scoped to .accommodation-category-card-grid (added on this template's card
   wrapper) rather than editing the shared .common-icon-set/main.css rules
   directly, because those are also used by part-other-rooms.php's card
   carousel — this keeps both fixes below scoped to this template only. */

/* --- Icon row (bed/view/size): one line, not 2-column wrap ---
   Root cause of the wrap bug: main.css:719-724 lays this <ul> out with CSS
   multi-column (`columns: 2`), which is a text-flow tool, not a row layout
   tool — with 3 <li>s it distributes them across the 2 columns by height
   balance (2 stacked in column 1, 1 alone in column 2), which reads as one
   item dropping to "a second line" beneath the other two. Flex row with
   nowrap fixes that structurally instead of fighting the column balance. */
.accommodation-category-card-grid .common-icon-set ul {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 8px;
}
.accommodation-category-card-grid .common-icon-set ul li {
    flex: 1 1 0;
    min-width: 0;
    padding: 0;
}
/* main.css:709's flex-grow:1 lets .common-icon-set itself stretch to absorb
   uk-grid-match's row-height equalization slack, with the empty space
   landing below the icon row (since it's the last child before .room-card-
   amenities' new position). That would put a variable, unpredictable gap
   between the icon row and the divider below it depending on the row's
   tallest card. Cancelling flex-grow here hands slack-absorption back to
   .uk-card-body > p's own margin-top:auto (style-custom.css, shared rule),
   which is the same predictable "push buttons to the bottom" behavior used
   everywhere else this card pattern appears.
   padding-top is reduced from main.css's shared 20px to 10px, and a new
   margin-bottom:14px added — .split-sentence below now contributes its own
   14px margin-bottom too (see the vertical-rhythm block further down), so
   description→icon-row settles at ~24px combined; the new self-sufficient
   margin-bottom here guarantees ~14px after the icon row even on rooms with
   no amenities field content, where this would otherwise be the last
   element before the button row and margin-top:auto alone isn't reliable
   (zero flex slack when this card is the tallest in its uk-grid-match row). */
.accommodation-category-card-grid .common-icon-set {
    flex-grow: 0;
    padding-top: 10px;
    margin-bottom: 14px;
}
@media (max-width: 480px) {
    .accommodation-category-card-grid .common-icon-set ul {
        gap: 4px;
    }
    .accommodation-category-card-grid .common-icon-set .icon {
        padding-right: 6px;
    }
    .accommodation-category-card-grid .common-icon-set ul li span {
        font-size: 11px;
    }
}

/* --- Amenity tags (.room-card-amenities / .room-card-amenities-list) ---
   Card-scaled version of the full-page AMENITIES section's list treatment
   (.common-amenities-list ul, main.css:837-843: plain multi-column bullet
   list, no icons) — same idea, smaller type, fewer columns, sized to fit a
   card instead of full content width.

   Source is the existing "Section Amenities" tab WYSIWYG field (field name
   "amenities" — the same one the full-page section itself reads), not a
   separate repeater: the template DOMDocument-parses that field's stored
   <h4>+<ul class="uk-list uk-list-large uk-list-disc"> HTML, keeps only the
   <ul>, and swaps its classes for .room-card-amenities-list — so this rule
   is the ONLY styling that <ul> gets in card context; UIkit's uk-list-large
   etc. classes are stripped, not just outranked, so there's no specificity
   fight and no !important needed here.

   Now positioned AFTER the icon row rather than before it, with a divider
   on top: var(--border-color) is never actually declared anywhere in this
   theme (same dead-variable issue already noted at the .sohot ribbon fix,
   style-custom.css:1499-1502 — using it here would silently render no
   border at all), so this reuses rgba(55, 73, 60, 0.15) — --primary-color
   at 15% opacity — the theme's real working subtle-divider value, already
   used the same way at style-custom.css:3110. */
.room-card-amenities {
    margin: 14px 0 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(55, 73, 60, 0.15);
}
.room-card-amenities-list {
    margin: 0;
    padding: 0;
    columns: 2;
    -webkit-columns: 2;
    -moz-columns: 2;
}
.room-card-amenities-list li {
    list-style: disc;
    list-style-position: outside;
    margin-left: 16px;
    padding: 0 8px 8px 0;
    font-size: 12px;
    line-height: 1.4;
    /* #999 matches the theme's existing muted/secondary text convention
       (breadcrumbs, widget meta — style-custom.css:468-486) rather than
       --text-color, which is full-strength body copy used one step up by
       .room-card-intro-short — keeps the type scale's hierarchy visible:
       title > description > amenity tags. List markers inherit this color
       too (default browser ::marker behavior), no separate rule needed. */
    color: #999;
    break-inside: avoid;
}
/* Same collapse-to-1-column breakpoint as the sibling .common-icon-set list
   in this exact card (main.css:709 / screen.css:359, both @414px) — keeping
   both amenity-style blocks collapsing at the same width avoids one going
   single-column while the other is still 2-up, which would look inconsistent
   directly above/below each other in the same card. */
@media (max-width: 414px) {
    .room-card-amenities-list {
        columns: 1;
        -webkit-columns: 1;
        -moz-columns: 1;
    }
}

/* --- Card outer border ---
   main.css:696-697 sets border: 1px solid var(--border-color) on
   .common-card-default, but --border-color is never declared anywhere in
   this theme (same dead-variable issue as --ribbon-color, already noted at
   style-custom.css:1499-1502) — an invalid var() with no fallback makes the
   whole border declaration invalid, so the card border has always rendered
   as nothing sitewide, not just here. Scoped to this template only rather
   than fixed at the main.css source, since fixing it globally would change
   the border on every other card grid on the site (restaurant, meetings,
   activities, offers, etc.), which wasn't asked for here — only overriding
   border-color, so main.css's border-width/style still apply as-is. */
.accommodation-category-card-grid .common-card-default {
    border-color: rgba(55, 73, 60, 0.15);
}

/* --- Card body: padding + vertical rhythm ---
   .uk-card-media-top's <img> has no side padding/margin of its own (it
   fills the card's full inner width edge-to-edge, standard UIkit card
   behavior) — .uk-card-body's padding only insets the text content next to
   it, inside the same outer card border both share, so widening it here
   cannot misalign the image against the card edge; the two are independent
   siblings under one shared border.

   Padding is intentionally NOT increased below 768px: at mobile widths the
   card is already a single column with limited inner width, and that width
   budget is what the one-line icon-row fix and the wider buttons below
   depend on to keep fitting without wrapping — growing padding there would
   directly undo both. Increased at tablet/desktop instead, where width is
   not the constraint. */
@media (min-width: 768px) and (max-width: 1199px) {
    .accommodation-category-card-grid .uk-card-body {
        padding: 34px 32px;
    }
}
@media (min-width: 1200px) {
    .accommodation-category-card-grid .uk-card-body {
        padding: 44px 40px;
    }
}
/* Badge → title → description rhythm. .heading-sub only sets text-transform
   (main.css:706) and h3 is margin:0 from the sitewide h1-h6 reset (main.css:
   28-31) — neither carried deliberate spacing before this. .split-sentence's
   own rule (main.css:517-523) IS active (a prior version of this comment
   said it was commented out — it isn't; see the clamp-removal rule below,
   which exists precisely because this rule truncates text sitewide).
   .split-sentence's div always renders regardless of whether intro_detail
   has content (no empty-check wraps it in the template), so its margin-bottom
   is a reliable, unconditional gap before whatever section comes next — icon
   row, amenities divider, or directly the button row on a room with neither. */
.accommodation-category-card-grid .uk-card-body .heading-sub {
    margin-bottom: 8px;
}
.accommodation-category-card-grid .uk-card-body h3 {
    margin-bottom: 10px;
}
.accommodation-category-card-grid .split-sentence {
    margin-bottom: 14px;
}
/* Full descriptions on this grid (deluxe-rooms, etc.) — unlike part-other-
   rooms.php's "Other Rooms" teaser carousel, which deliberately keeps the
   3-line clamp for compact cards and must NOT be touched by this rule.
   Overrides main.css:517-523's sitewide .split-sentence -webkit-line-clamp:3
   (the actual source of the "..." mid-sentence cutoff). Selector chain
   repeats main.css:517's four ancestor classes plus this template's own
   scope class so it wins on specificity (0,5,0 vs 0,4,0) without
   !important, same technique already used below for the button-width
   override (style-custom.css:2425-2429, further down this file).
   uk-grid-match (content-accommodation-category.php:83) still equalises
   card height per row, and the sitewide margin-top:auto button-row fix
   (style-custom.css:2165) still keeps Book Now/Explore pinned to the
   bottom of each card regardless of how long an individual description
   now runs — so this alone is enough for two uneven cards to sit side by
   side without looking broken. */
.common-wrapper .common-content .common-row .accommodation-category-card-grid .split-sentence {
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
}

/* --- Book Now / Explore buttons: wider, still left-aligned ---
   Base width comes from main.css:534-539 (padding:0 20px; min-width:115px),
   shared by every .uk-button-primary/.uk-button-default under
   .common-wrapper .common-content .common-row — i.e. most of the site's
   buttons, not just this card. That selector chain is 4 classes deep, so
   matching it here (rather than a shorter .accommodation-category-card-grid
   .uk-button-primary, which would lose the specificity contest and need
   !important) means repeating the same ancestry with the card-grid class
   appended, scoping the wider size to this template only. ~30% wider on
   both axes, within the requested 20-40% range. Both buttons already share
   identical box-model rules (padding/min-width/line-height), so they stay
   height-matched automatically — no separate height rule needed. Still
   inline-block/intrinsic width (no width:100%), so they stay left-aligned
   and don't stretch to fill the card. */
.common-wrapper .common-content .common-row .accommodation-category-card-grid .uk-button-primary,
.common-wrapper .common-content .common-row .accommodation-category-card-grid .uk-button-default {
    padding: 0 28px;
    min-width: 150px;
}
/* Wider buttons made the pre-existing narrow-mobile wrap risk worse: two
   150px-min-width buttons plus gap comfortably exceed the ~255-290px inner
   content width available in a single-column mobile card (375-414px
   viewport minus .common-content's fixed 30px/side padding and
   .uk-card-body's own padding), so without this they'd wrap unevenly — the
   second button dropping to its own left-aligned line. Same stacked
   full-width treatment already used for this exact problem on
   content-accommodation.php's cards (.accommodation-card-grid, further up
   this file), reused here under this template's own scope class. */
@media (max-width: 480px) {
    .accommodation-category-card-grid .uk-card-body > p {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    .accommodation-category-card-grid .uk-card-body > p .uk-button {
        width: 100%;
    }
    /* main.css:538 gives every .uk-button-primary/.uk-button-default under
       .common-wrapper .common-content .common-row (4 classes) a
       margin: 5px 5px 5px 0 — that would stack with the gap:10px above
       (flex-item margins don't collapse), landing at ~20px between stacked
       buttons instead of the intended 10px. Zeroed here, with the full
       ancestor chain repeated so this selector's specificity (6 classes)
       clears main.css's 4-class rule — gap alone handles spacing once
       margin's out of the way, which is also why a bottom-margin on the
       last button isn't missed: gap never adds space after the final item. */
    .common-wrapper .common-content .common-row .accommodation-category-card-grid .uk-card-body > p .uk-button {
        margin: 0;
    }
}

/* ==========================================================================
   SPECIAL OFFERS — CARD GRID (content-offers.php)

   The previous full-bleed "magazine" layout is GONE — template and CSS both.
   Every one of its selectors (.offers-magazine-grid, .offer-card and the
   --feature / --tall / --wide variants, .offer-card-media / -veil / -badge /
   -body / -title / -intro / -actions, and the ghost-button overrides) has
   been deleted rather than left dangling; nothing else in the theme
   referenced them (verified by grep across main.css / screen.css /
   style-custom.css and every .php / .js file), so there is no orphaned
   override behind this.

   Special Offers now uses the theme's standard white card — the SAME markup
   and therefore the same computed style as content-accommodation.php's room
   cards:

       .common-card-content.offers-card-grid
         > .uk-child-width-1-2@m.uk-grid-match[uk-grid]
           > div
             > .uk-card.common-card-default
                 > .uk-card-media-top.features-slider
                     > .position-items-img   (single <img>, or a uk-slider
                       when the offer's featured_option is "slider", plus the
                       Best Deal / Hot Deal corner ribbon)
                 > .uk-card-body
                     .heading-sub, h3, .offer-card-intro-short, <p> buttons

   Which means almost none of the styling lives here. It is inherited from
   rules that already existed and are shared with the accommodation /
   restaurant / meetings / activities card grids:

       main.css:696-704        .common-card-default border + flex column,
                               .uk-card-body flex-grow (equal-height cards)
       main.css:706            .heading-sub uppercase
       main.css:768-790        .position-items-img + the rotated Best Deal /
                               Hot Deal ribbon (.ribbon-inner / .sohot)
       main.css:791-797        .features-slider slidenav positioning
       main.css:534-553        .uk-button-primary / -default fill + hover
       style-custom.css:2877   .common-card-content .common-card-default
                               .uk-card-body > p { margin-top:auto } — this is
                               what pins the button row to the bottom edge of
                               every card, so Book Now / Explore line up
                               across a row even when one offer's description
                               runs longer than its neighbour's.

   Note that .common-card-default's border never actually renders: main.css:697
   asks for 1px solid var(--border-color) and --border-color is not declared
   anywhere in the theme, so the whole declaration is invalid. That is true
   sitewide and is deliberately NOT fixed here — the accommodation page has
   the same borderless cards, and matching it is the point of this change.
   (.accommodation-category-card-grid opts into a border of its own at
   style-custom.css:3094; offers intentionally does not.)

   Only two rules anywhere in this file are specific to this page, and both
   live in the accommodation block ABOVE rather than here, because each one
   simply extends an existing accommodation rule to this grid instead of
   restating its declarations and giving the two somewhere to drift apart:
   .room-card-intro-short (style-custom.css:2836) and the <480px button
   stacking rule (style-custom.css:2910) each now list the offers selector
   alongside the accommodation one. Nothing below this comment but the
   section masthead, which is unchanged.
   ========================================================================== */

/* --- Typeface: none. ---
   This section declares NO font-family anywhere. Section heading, kicker,
   card titles, descriptions and buttons all inherit the theme's global stack
   (--font-primary / --font-secondary, both Noto Sans, set at the top of this
   file) exactly like the rest of the site. Do not reintroduce a font-family
   in this block. */

/* --- Section masthead (the "SPECIAL OFFERS" heading) ---
   Scoped by the extra .offers-intro-head class the template adds alongside
   .heading-intro, so no other page's intro block is affected.

   Specificity notes (this project's CLAUDE.md rule — win on the selector,
   don't reach for !important unless the thing being beaten is itself
   !important):
     * h1 must carry !important because style-custom.css:52 sets
       h1..h6 { font-size: clamp(20px, 5vw, 30px) !important }. Two
       !important declarations, so the longer selector here wins.
     * .heading-sub must carry !important because style-custom.css:308 sets
       margin: 0 !important on it at (0,5,0); the chain here is (0,6,0). */
.common-wrapper .common-content .common-row .details .heading-intro.offers-intro-head h1 {
    font-size: clamp(32px, 5.2vw, 56px) !important;
    line-height: 1.1;
    letter-spacing: 0.02em;
    margin: 0;
    color: var(--primary-color);
}
/* Small kicker line UNDER the title (the template prints sub_title after
   alt_title now). Deep moss at 65% rather than gold: this section sits on
   .uk-background-muted, i.e. the cream #dfdccd, and gold-on-cream is the
   low-contrast pairing already flagged elsewhere in this file. */
.common-wrapper .common-content .common-row .details .heading-intro.offers-intro-head .heading-sub {
    margin: 20px 0 0 !important;
    font-size: 12px;
    line-height: 1.6;
    font-weight: 400;
    letter-spacing: 0.24em;
    color: rgba(55, 73, 60, 0.65);
}
/* Short gold rule between title and kicker — the one place gold is safe on
   cream, because it is a solid 2px bar rather than text. */
.common-wrapper .common-content .common-row .details .heading-intro.offers-intro-head .heading-sub::before {
    content: '';
    display: block;
    width: 56px;
    height: 2px;
    margin: 0 auto 20px;
    background-color: var(--secondary-color);
}

/* ==========================================================================
   OUR STORY — .our-story-section-* (content-page.php, story_sections repeater)

   A new, visually distinct card style, deliberately NOT the alternating
   image-left/right split used by .common-switch-places-content (facilities /
   restaurant / meetings) — no zebra-striping, no order-swap by row index,
   every row places the image on the same side. It DOES now mirror
   .accommodation-summary-card's own left-image/right-content split (40/60,
   aspect-ratio square, object-fit:cover, stack-on-mobile) — the brief's
   second pass asked for that layout specifically, so lines below cite the
   accommodation block wherever a value is a deliberate copy of it. Nothing
   there was edited; every rule here is its own .our-story-section-* selector.

   The border/background/shadow language is still copied from
   .accommodation-summary-card (style-custom.css:1649) — same 1px hairline at
   15% primary, same white fill, same "clean rectangle" read.
   ========================================================================== */

/* --- Card list: vertical stack, one row per repeater entry ---
   .our-story-sections sits directly in .common-row, which already supplies
   80px of vertical section padding (main.css:490) — the gap here is only the
   rhythm BETWEEN cards, not before/after the whole list. */
.our-story-sections {
    display: flex;
    flex-direction: column;
    gap: 50px;
}

/* --- Card shell: horizontal split, same shell as before ---
   align-items:stretch (the flex default) is what makes the image column's
   height follow the text column's rather than the reverse — same mechanism
   .accommodation-summary-card relies on (style-custom.css:1650-1652). */
.our-story-section-card {
    display: flex;
    align-items: stretch;
    background-color: #fff;
    border: 1px solid var(--primary-color); /* --primary-color #37493c at 15%, matches accommodation-summary-card */
    overflow: hidden;
}

/* --- Image (optional), left column ---
   flex-basis fixes the split at 40/60, and aspect-ratio:1/1 is copied
   verbatim from .accommodation-summary-media (style-custom.css:1688-1694) —
   same reasoning applies here: as a stretched flex item the square is a
   floor, not a fixed height, so the image only ever grows past it to match a
   taller text column, and object-fit:cover crops rather than distorting
   either way.
   When section_image is empty the PHP omits this element entirely (no
   placeholder, no empty column) — .our-story-section-body's flex:1 1 auto
   below is what lets the text side expand to the full card width in that
   case, the same fallback .accommodation-summary-body relies on when a room
   has no featured image. */
.our-story-section-image {
    position: relative;
    flex: 0 0 40%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}
.our-story-section-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --- Body: heading, then WYSIWYG copy — right column ---
   flex:1 1 auto + min-width:0 is the other half of the split, copied from
   .accommodation-summary-body (style-custom.css:1708-1710): min-width:0
   overrides a flex item's default min-width:auto, which is what stops a long
   unbroken word in the WYSIWYG copy from pushing this column past 60% and
   squeezing the image. Padding is unchanged from the vertical-stack version —
   this card keeps its own more generous padding rather than adopting
   .accommodation-summary-body's tighter 26px/28px. */
.our-story-section-body {
    flex: 1 1 auto;
    min-width: 0;
    padding: 50px;
}
/* Same uppercase/eyebrow language as every other section title on the site
   (.heading-intro .heading-sub, main.css:527) but sized as a standalone
   heading rather than a small kicker above a bigger <h1> — there is no larger
   title in this card for it to sit under. Chained onto .our-story-section-body
   (0,2,0) so it beats the site-wide h1-h6 clamp at style-custom.css:52
   (0,0,6 + !important) the same way every other overridden heading in this
   file does — via matching or exceeding specificity, not !important, since
   this file loads after main.css/screen.css already. Text colour and
   font-family/weight are inherited from h1-h6 (main.css:32-37; style-custom.css:51). */
.our-story-section-body .our-story-section-heading {
    margin: 0 0 20px;
    font-size: clamp(20px, 2.2vw, 26px) !important;
    letter-spacing: 0.02em;
}
/* WYSIWYG copy: comfortable reading measure, not the site's default p{margin-top:20px}
   rhythm (main.css:49) which is a touch tight for repeated paragraphs of body
   copy at this width. line-height 1.7 and 16px/26px type is a deliberate step
   up from the 13-14px used on card-style summaries elsewhere (e.g.
   .accommodation-summary-intro) — this is long-form narrative copy, not a
   caption. */
.our-story-section-body .our-story-section-content {
    font-size: 16px;
    line-height: 1.7;
    color: var(--text-color);
}
.our-story-section-body .our-story-section-content p {
    margin: 20px 0 0;
}
.our-story-section-body .our-story-section-content > :first-child {
    margin-top: 0;
}
.our-story-section-body .our-story-section-content ul,
.our-story-section-body .our-story-section-content ol {
    margin: 20px 0 0;
    padding-left: 1.25rem;
}

/* --- Responsive ---
   Desktop (>=1200px): the base rules above ARE the desktop state — 40/60
     split, 50px card padding.
   Tablet (768-1199px): same left-image/right-content split, just tighter
     padding (36px). No width/columns rule needed: the 40/60 flex-basis split
     and the square media ratio hold at any container width down to the
     mobile stack switch, exactly how .accommodation-summary-card behaves
     across this same range.
   Mobile: stack switch happens at max-width:768px — the site's own Desktop/
     Tablet/Mobile convention boundary, used in place of
     .accommodation-summary-card's own <=640px breakpoint (style-custom.css:
     1926) by explicit request, so there is no 641-767px band that renders
     differently from the rest of "Mobile" the way the Accommodation cards'
     own boundary would have left one.
     16/10 on the stacked image is still copied verbatim from
     .accommodation-summary-media's own mobile override
     (style-custom.css:1930-1934) — only the trigger width moved, not the
     stacked ratio itself. Folded into the same block as the type/gap
     tightening below rather than kept as a second query, since both now
     fire at the same width. */
@media (max-width: 1199px) {
    .our-story-section-body {
        padding: 36px;
    }
}
@media (max-width: 768px) {
    .our-story-sections {
        gap: 36px;
    }
    .our-story-section-card {
        flex-direction: column;
    }
    .our-story-section-image {
        flex: 0 0 auto;
        width: 100%;
        aspect-ratio: 16 / 10;
    }
    .our-story-section-body {
        padding: 24px;
    }
    .our-story-section-body .our-story-section-heading {
        margin-bottom: 16px;
    }
    .our-story-section-body .our-story-section-content {
        font-size: 14px;
    }
}
@media (max-width: 480px) {
    .our-story-sections {
        gap: 28px;
    }
}

/* ==========================================================================
   HOME REVIEWS SECTION — .home-review-* (part-home-review.php)
   ========================================================================== */

/* "Review on Tripadvisor" CTA: icon + label, horizontally aligned with a
   small gap. Scoped to .home-review-cta-btn, added ALONGSIDE the existing
   .uk-button.uk-button-primary classes rather than replacing them — every
   other button using .uk-button-primary sitewide (Book Now, etc.) keeps its
   exact current markup/selector and is untouched by this rule. display:
   inline-flex overrides UIkit's base .uk-button display:inline-block
   (uikit.css:1934) on source order (both 0,1,0, this file loads after
   uikit.css); padding, line-height and background still come from the
   existing .uk-button-primary rules untouched. */
.home-review-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
/* Icon is an inline <svg fill/stroke="currentColor"> (part-home-review.php),
   not a webfont glyph, so it already inherits colour with no rule needed —
   kept explicit anyway so the intent (icon always matches the button's own
   text colour, through every state) is documented, not just incidental. */
.home-review-cta-btn svg {
    color: currentColor;
    flex: 0 0 auto;
}
/* Button LABEL colour bug: main.css:53 has a sitewide bare `span{ color:
   var(--primary-color) }` rule. That's a direct match on this button's
   <span>, so it wins over the inherited white text colour from
   .uk-button-primary (style-custom.css:174) — inheritance never outranks a
   rule that targets the element directly, no matter how much less specific
   it is. --primary-color and .uk-button-primary's own background-color
   (--background-secondary) are both #37493c (style-custom.css:70/74), so the
   label was rendering in the exact colour of its own button background —
   invisible, not missing. Restoring inherit here is the fix; the icon <svg>
   never had this problem since the sitewide span rule doesn't touch it. */
.home-review-cta-btn span {
    color: inherit;
}

/* CTA block spacing: no margin-top existed between this .details block and
   whatever precedes it in the row (the review carousel above), so it sat
   flush against it. 50px matches the theme's own established rhythm for a
   second content block following other content in the same .common-row —
   see .articles' identical margin-top: 50px, main.css:498-500 — rather than
   an invented number. The 80px gap below (down to the section's bottom
   edge) already comes for free from .common-row's own padding:80px 0
   (main.css:490-492, this CTA is the last child in the row), and the ~20px
   gap between the cta_title <h3> and the button already comes from the
   sitewide `p{ margin-top:20px }` rule (main.css:50-52) acting on the <p>
   that wraps the button — neither needed a rule here too.
   Full selector chain (not just .home-review-cta) to match-or-beat
   main.css:493's `.common-row .details{ margin:auto }` (0,4,0) — a bare
   class here would lose that specificity fight and margin-top would stay
   auto. Only margin-top is set, so the rest of that rule's margin:auto
   (the horizontal centering) is untouched. */
.common-wrapper .common-content .common-row .details.home-review-cta {
    margin-top: 50px;
}

/* --- Review cards (.home-review-card) ---
   Reused inside the SAME .common-slider-content / uk-slider shell as
   part-home-offers.php (see part-home-review.php's own header comment) —
   the carousel mechanics (dot-nav, prev/next, the <=768px 1-per-view
   collapse at screen.css:192/334) are that shell's, not re-declared here.
   Only the card's own content needs new CSS — nothing pre-existing in the
   theme is shaped like a testimonial card.

   Border/background/shadow values are copied verbatim from
   .accommodation-summary-card / .our-story-section-card (the other bordered
   card families in this file) rather than re-derived, so every card built
   this session reads as the same visual language. Special Offers is not in
   that list: it uses the theme's plain .common-card-default shell instead,
   the same one as the accommodation page (see the SPECIAL OFFERS block
   above). uk-grid-match (on .uk-slider-items, part-home-review.php) is
   what equalises card height within a visible slide "page" at runtime —
   this class doesn't need its own height rule for that. */
.home-review-card {
    position: relative;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 16px;
    background-color: #fff;
    border: 1px solid rgba(55, 73, 60, 0.15); /* --primary-color #37493c at 15% */
    padding: 28px;
}

/* Platform badge — editor-uploaded logo image (ACF Image field, reviews.
   review_items.platform), top-right corner. Uploads can come in at any real
   dimensions/aspect ratio, so width/height are capped here in CSS (not left
   to the file's intrinsic size) and object-fit:contain keeps non-square
   logos from stretching within that fixed box. Sized to sit close to
   .home-review-card-avatar's 48px so the two corner images visually balance
   rather than the platform badge reading as an afterthought. */
.home-review-card-platform {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 44px;
    height: 44px;
    object-fit: contain;
}

.home-review-card-head {
    display: flex;
    align-items: center;
    gap: 12px;
}
.home-review-card-avatar {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
}
.home-review-card-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.home-review-card-name {
    font-family: var(--font-primary);
    font-size: 14px;
    font-weight: 500;
    color: var(--primary-color);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.home-review-card-date {
    font-size: 12px;
    color: var(--text-color);
    opacity: 0.65;
    margin-top: 2px;
}

/* Star rating — plain inline SVGs (not a webfont glyph) so the filled
   portion can be coloured with a simple class toggle rather than juggling
   two different icon glyphs (filled/outline) per star. Unfilled stars use
   the same 18%-opacity moss as the platform badge, so the two decorative
   elements read as one consistent "muted" tone; filled stars use the site's
   gold accent (--secondary-color), the same token used for hover/accent
   states everywhere else. */
.home-review-card-stars {
    display: flex;
    gap: 2px;
}
.home-review-card-stars svg {
    color: rgba(55, 73, 60, 0.18);
}
.home-review-card-stars svg.is-filled {
    color: var(--secondary-color);
}

/* Review quote text. line-clamp keeps one unusually long review from making
   its slide "page" noticeably taller than the others — uk-grid-match only
   equalises cards that share a page, not every page in the carousel, so an
   outlier can still visually stand out between page-swipes without this. */
.home-review-card-text {
    margin: 0;
    font-size: 13px;
    line-height: 20px;
    color: var(--text-color);
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (max-width: 480px) {
    .home-review-card {
        padding: 20px;
        gap: 12px;
    }
}




/* Tablet (768–1199px — the same band screen.css already uses via its
   `@media (max-width: 1199px)` / `@media (max-width: 768px)` blocks):
   restore UIkit's native uk-child-width-1-2@s 2-up layout for review cards.
   Without this, screen.css:192's `.common-slider-content .uk-child-width-1-2@s
   > *` rule — written for the offers slider, whose cards need the full row
   width — also matches this slider (it shares .common-slider-content) and
   collapses it to 1 card all the way up to and including 768px, one step
   past where mobile is supposed to end. Scoped to .home-review-slider so the
   offers slider's own 1-per-row behaviour in that range is untouched.
   UIkit's slider recalculates its dot-nav pages from the rendered item width
   on resize, so no separate pagination count needs updating here. */
@media (min-width: 768px) and (max-width: 1199px) {
    .home-review-slider .uk-child-width-1-2\@s > * {
        width: 50%;
    }
}

/* Other Rooms Carousel (template-parts/single/part-other-rooms.php, included from
   content-accommodation-sub.php and content-accommodation-category.php).
   Scoped to .other-rooms-section (authored on the <section>, stable — unlike
   .uk-slider-container-offset/.uk-slidenav which UIkit's JS injects at runtime,
   same reasoning as the switch-places arrows further up this file). */

/* 0. Full-bleed section tint. rgba() rather than the requested #e8e5d938
   8-digit hex — this codebase already expresses every alpha color as rgba()
   (e.g. the slidenav pills below, the card box-shadows, etc.), so this matches
   the stylesheet's existing convention rather than introducing a new syntax;
   #e8e5d9 at 22% alpha === rgba(232, 229, 217, 0.22), same color. Applied to
   .other-rooms-section itself (same element as .common-wrapper, main.css:477)
   rather than .common-content, matching the site's existing full-bleed
   pattern for section backgrounds: .common-wrapper has no max-width
   (main.css:477-479) while .common-wrapper.uk-background-muted paints
   background-color directly on it (main.css:481-483) and lets the
   max-width-capped .common-content sit inside, unpainted, as plain content.
   Card backgrounds are pinned to solid #fff below (card 2 block) so they
   don't visually merge into this new tint. */
.other-rooms-section {
    background-color: rgba(232, 229, 217, 0.22);
}

/* 1. Heading-to-cards spacing. main.css:693-694 gives .common-card-content a
   flat 50px margin-top sitewide; h2 (style-custom.css:50-53) and .heading-sub
   (main.css:527) carry no margin of their own, so 50px was the entire gap
   between "OTHER ROOMS" and the card row — tight relative to the 80px vertical
   rhythm .common-row itself already uses (main.css:490-491). Scaled down at
   the same tablet/mobile bands screen.css already uses so it doesn't eat an
   outsized share of the section on small screens. */
.other-rooms-section .common-card-content {
    margin-top: 80px;
}
@media (max-width: 1199px) {
    .other-rooms-section .common-card-content {
        margin-top: 60px;
    }
}
@media (max-width: 767px) {
    .other-rooms-section .common-card-content {
        margin-top: 44px;
    }
}

/* 2. Card border + hover lift. Same dead --border-color issue documented at
   style-custom.css:2352-2365 for the sibling accommodation-category-card-grid
   — main.css:696-697's border: 1px solid var(--border-color) has always
   rendered as no border here too, so there was nothing for a hover state to
   change. :focus-within mirrors :hover for keyboard users tabbing onto the
   Book Now/Explore links, same pattern as the other card grids in this file. */
.other-rooms-section .common-card-default {
    border-color: rgba(55, 73, 60, 0.15);
    background-color: #fff;
    transition: box-shadow 0.25s ease-in-out, border-color 0.25s ease-in-out;
}
.other-rooms-section .common-card-default:hover,
.other-rooms-section .common-card-default:focus-within {
    border-color: var(--secondary-color);
    box-shadow: 0 12px 28px rgba(55, 73, 60, 0.14);
}
/* Subtle image zoom on hover, contained by the card border above. */
.other-rooms-section .uk-card-media-top {
    overflow: hidden;
}
.other-rooms-section .uk-card-media-top img {
    transform: scale(1);
    transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.other-rooms-section .common-card-default:hover .uk-card-media-top img,
.other-rooms-section .common-card-default:focus-within .uk-card-media-top img {
    transform: scale(1.05);
}

/* 3. Card body rhythm + bottom-pinned CTAs. Badge/title/description previously
   had no deliberate spacing between them (same accidental-zero-gap issue
   documented at style-custom.css:2391-2400). line-height on .split-sentence
   cascades to the <p> the_content wraps around it (no own line-height set
   there to fight). The button row only gets flex-grow:1 pushing it down when
   .common-icon-set (amenities_default) is present (main.css:709-714) — a room
   with none would otherwise leave its buttons sitting higher than a room with
   amenities once uk-grid-match equalises card heights. margin-top:auto on the
   button wrapper pins it to the bottom of the flex-column card body
   (main.css:701-705) unconditionally, so Book Now/Explore stay level across
   every card in a row regardless of amenities or description length. */
.other-rooms-section .uk-card-body .heading-sub {
    margin-bottom: 8px;
}
.other-rooms-section .uk-card-body h3 {
    margin-bottom: 10px;
    line-height: 1.25;
}
.other-rooms-section .split-sentence {
    margin-bottom: 14px;
    line-height: 1.65;
}
.other-rooms-section .uk-card-body > p {
    margin-top: auto;
}
/* 3b. Mobile-only compaction (tested 320-375px) — the card was noticeably
   tall on phones: UIkit's own unoverridden .uk-card-body padding
   (uikit.css:2584-2587, 30px all around), the card image's natural 16:9
   ratio from its 1440x810 source (no CSS height/aspect-ratio of its own),
   main.css:729's sitewide 20px bottom-padding per amenity <li>, and the
   desktop rhythm above (10-14px margins) all add up fast once stacked in a
   single mobile column. Every value below is a straight reduction of an
   existing desktop rule, scoped inside this query only — nothing here
   changes above 767px.
   .uk-card-body > p's margin-top:auto (immediately above) is overridden to
   a fixed value here specifically — auto is what actively stretches the
   button row down to match a taller sibling card under uk-grid-match, which
   works directly against "shorter card" as a goal. Desktop's cross-card
   button alignment (the reason margin-top:auto was chosen there) is
   unaffected, since this override only applies inside this same
   max-width:767px block. */
@media (max-width: 767px) {
    /* 1. Image: shorter aspect-ratio instead of the natural ~16:9 the
       source image renders at, +object-fit:cover so it crops rather than
       distorts. aspect-ratio scales with whatever width the card actually
       renders at across 320-767px, unlike a fixed px height that would only
       look right at one specific width in that range. */
    .other-rooms-section .uk-card-media-top img {
        aspect-ratio: 16 / 7;
        object-fit: cover;
    }
    /* 2. Card-body's own outer padding — was UIkit's unoverridden 30px on
       every side. */
    .other-rooms-section .uk-card-body {
        padding: 18px 20px 20px;
    }
    .other-rooms-section .uk-card-body .heading-sub {
        margin-bottom: 4px;
    }
    .other-rooms-section .uk-card-body h3 {
        margin-bottom: 6px;
    }
    /* 3. Description — the 3-line clamp (main.css:517-523) still caps
       worst-case height regardless of line-height. */
    .other-rooms-section .split-sentence {
        margin-bottom: 8px;
        line-height: 1.4;
    }
    /* 4. Amenity rows (King / Sea View / 35 sqm) — main.css:709's
       flex-grow:1 top padding and main.css:729's 20px bottom-padding per
       <li> are both generous even on desktop; halved-or-more here rather
       than removed entirely, so rows stay visually separated, just closer
       together. */
    .other-rooms-section .common-icon-set {
        padding-top: 10px;
    }
    .other-rooms-section .common-icon-set ul li {
        padding-bottom: 8px;
    }
    /* 5. Space directly above Book Now/Explore — see the margin-top:auto
       note above this query for why this needs to be a fixed value here,
       not just a smaller one. */
    .other-rooms-section .uk-card-body > p {
        margin-top: 12px;
    }
}

/* 4. Slider arrows — plain grey UIkit default (uikit.css:5907/12076) had no
   visible pill/background, easy to miss over a light card row. Same moss-green
   circular-pill treatment already established for this exact component
   elsewhere on the site (.common-switch-places-content .uk-slidenav,
   style-custom.css:1039-1063) — reused here rather than inventing a new
   pattern, matching the CLAUDE.md brief to fit the site's existing design
   language. .uk-slidenav is JS-applied by UIkit at runtime (same as the
   switch-places case), .uk-position-small's top-offset positioning
   (main.css:739-742, screen.css:222-224) is untouched. */
.other-rooms-section .uk-slidenav {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    /* border-radius: 6px; */
    background-color: rgb(55 73 60 / 90%);
    color: #FFF;
    transition: background-color 0.2s ease-in-out, color 0.1s ease-in-out;
}
.other-rooms-section .uk-slidenav svg {
    width: 16px;
    height: 26px;
}
.other-rooms-section .uk-slidenav:hover,
.other-rooms-section .uk-slidenav:focus {
    background-color: rgba(55, 73, 60, 0.75);
    color: #FFF;
}
.other-rooms-section .uk-slidenav:active {
    background-color: rgba(55, 73, 60, 0.9);
    color: #FFF;
}
@media (max-width: 1199px) {
    .other-rooms-section .uk-slidenav {
        width: 38px;
        height: 38px;
    }
    .other-rooms-section .uk-slidenav svg {
        width: 14px;
        height: 23px;
    }
}
@media (max-width: 767px) {
    .other-rooms-section .uk-slidenav {
        width: 34px;
        height: 34px;
    }
    .other-rooms-section .uk-slidenav svg {
        width: 12px;
        height: 20px;
    }
}

/* 5. Dot nav — active/hover already goes gold sitewide (main.css:1064-1067,
   var(--secondary-color)) over the UIkit default (uikit.css:5999, grey), so
   the active-vs-inactive contrast this section needs is already there; only
   adding breathing room under the cards and a touch more dot size so the gold
   active state reads clearly at a glance. */
.other-rooms-section .uk-dotnav {
    margin-top: 30px;
}
.other-rooms-section .uk-dotnav > * > * {
    width: 9px;
    height: 9px;
}

/* 6. Tablet band 1025-1199px: without this, UIkit's own uk-child-width-1-3@s
   (33% from 640px up, uikit.css) applies unmodified here — screen.css's
   existing 2-up override only reaches to max-width:1024px (screen.css:116-120)
   and 640px (screen.css:275-277), leaving a 1025-1199px gap where 3 cards
   would still cram into what CLAUDE.md's convention treats as the tablet
   band (768-1199px). Ranges don't overlap with screen.css's ≤1024px/≤640px
   rules, so no specificity fight either way. */
@media (min-width: 1025px) and (max-width: 1199px) {
    .other-rooms-section .uk-slider-items.uk-child-width-1-3\@s > * {
        width: calc(100% * 1 / 2.001);
    }
}

/* ==========================================================================
   SITE-WIDE QA PASS — Y05 (responsive/touch), Y06 (focus states), Y07 (CLS)
   Deliberately at the end of the file: these are the only rules here that are
   intentionally global rather than component-scoped, so they are kept together
   and out of the component blocks above.
   ========================================================================== */

/* --- Y06. Keyboard focus ring, site-wide ---
   UIkit zeroes the UA focus ring (:focus { outline: none }, uikit.css:397-399)
   and substitutes :focus-visible { outline: 2px dotted #333 } (uikit.css:400-402).
   So a ring does exist — but it is UIkit's generic dark grey dotted one, and on
   this site's dark surfaces (#37493c navbar dropdowns are light, but the moss
   footer, the highlight-tiles section and the offcanvas bar are not) #333 on
   #37493c is ~1.4:1, i.e. effectively invisible. That is the "no visible focus
   ring" report.
   Replaced with the brand ring: moss on light surfaces, gold on dark ones.
   Contrast measured against each surface it actually lands on —
     moss #37493c on white          9.6:1
     moss #37493c on cream #dfdccd  7.0:1
     gold #c4a77d on moss #37493c   4.2:1
   all well past the 3:1 WCAG 2.2 non-text contrast floor. outline-offset lifts
   the ring off the element's own border so it reads as a ring and not as a
   thickened edge, and outline (not box-shadow) is used so it follows the shape
   of inline/wrapped links and can never affect layout.
   :focus-visible only — mouse users see nothing, which is why this can be
   global without changing the look of the site for anyone clicking.
   Scoped to interactive elements rather than *, so a focusable container
   (tabindex="-1" wrappers like .room-slider-home, or UIkit's slider) doesn't
   draw a full-width ring around a whole section. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[role="button"]:focus-visible,
[tabindex="0"]:focus-visible,
.uk-button:focus-visible,
.uk-navbar-toggle:focus-visible,
.uk-slidenav:focus-visible,
.uk-close:focus-visible,
.hamburger:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}
/* Dark surfaces — switch the ring to gold. Same declaration order means the
   later rule wins at equal specificity for elements inside these containers;
   each selector is one class deeper than the base list above anyway. */
.common-footer a:focus-visible,
.common-footer button:focus-visible,
.common-copyright a:focus-visible,
.highlight-tiles-section a:focus-visible,
.highlight-tiles-section button:focus-visible,
.common-navbar-offcanvas a:focus-visible,
.common-navbar-offcanvas button:focus-visible,
.common-navbar-offcanvas .uk-close:focus-visible,
.footer-social-icons a:focus-visible {
    outline-color: var(--secondary-color);
}
/* --- Y06. Pressed state ---
   Hover states already exist for every CTA, nav link and social icon (navbar
   links -> gold, main.css:115-119; nav/primary/default buttons -> #94410c,
   style-custom.css "Button typography" block; .footer-social-icons a:hover ->
   gold). What was missing everywhere was any :active feedback, so a tap on
   mobile — where :hover is not a state that exists — gave no confirmation that
   the press registered. A 1px nudge is used rather than a colour change so it
   cannot collide with the per-component hover colours above, and transform
   affects only paint, never layout of siblings. */
.uk-button:active,
.common-navbar-button a:active,
.navbar-button-outline a:active,
.footer-social-icons a:active,
.common-navbar-offcanvas .main-social-media ul li a:active {
    transform: translateY(1px);
}

/* --- Y05. Touch targets: 44x44 minimum ---
   Audited every interactive control at 375px. Already compliant and left alone:
   the home carousel's slidenav arrows (screen.css:180-186 and :325-331, already
   min 44px at <=768px), the "switch places" / review / other-rooms slidenavs
   (style-custom.css, 44x44 each), the nav CTA buttons (165x36 box but 36px is
   its documented fixed design height — width is far past 44 and it is a text
   button, not an icon hit area), and the FAQ question rows (full-width, 20px
   vertical padding).
   The four below were genuinely under the floor. In every case the ICON size is
   untouched — only the clickable box grows — so nothing in the design gets
   visually bigger. */

/* 1. Mobile menu trigger — the worst offender: .hamburger_box is 25x15px
   (main.css:232-236), so the whole mobile nav hung off a ~25x25 target.
   Enlarged with a centred pseudo-element instead of by resizing the element,
   because .hamburger_box carries `margin: 0 auto; margin-bottom: 10px` and the
   animated bars are positioned against that box — growing the box itself would
   move the bars. This leaves every pixel of the design where it is and only
   extends the hit area. .hamburger is already position:relative (main.css:215). */
.common-navbar .common-navbar-main .hamburger::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 44px;
    height: 44px;
}

/* 2-3. Social icons — footer "Managed By" row and the offcanvas "Follow Us"
   list. Both were bare 20px SVG links (.footer-social-icons svg is 20x20;
   the offcanvas list only had 5px of padding on the <li>, not on the <a>).
   Sized for real here rather than with an overlay pseudo-element: these sit in
   a row 12px apart, so a 44px overlay on a 20px icon would have overlapping
   hit areas and taps near an edge would trigger the wrong icon. Growing the
   anchors spaces the icons honestly instead. Widest case is the footer row at
   3 icons: 3x44 + 2x12 gap = 156px, which still fits beside the ~90px logo
   inside the narrowest (1-column, full-width) mobile footer column, and inside
   the ~294px tablet column. */
.footer-social-icons a {
    min-width: 44px;
    min-height: 44px;
}
.common-navbar-offcanvas .main-social-media ul li a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
}
/* The <li>'s own 5px padding (main.css:183-187) is now redundant and would push
   the 44px boxes 10px further apart than intended; the anchors provide the
   spacing themselves. */
.common-navbar-offcanvas .main-social-media ul li {
    padding: 0;
}

/* 4. Close buttons — UIkit's .uk-close is a bare 14px icon, and both the
   offcanvas close and the modal close (part-header.php, the Book the Table /
   quote modals) rely on it. uk-close-large is not used anywhere here, so this
   is the only rule they get. */
.uk-offcanvas-bar .uk-offcanvas-close,
.uk-modal-dialog .uk-modal-close-default {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
}

/* --- Y05. Fixed-header overlap guard ---
   .common-navbar is position:fixed (main.css:65-71) and nothing reserves space
   for it, which is correct and deliberate on every normal page: header.php
   always renders part-mainslide.php, and that hero/cover is designed to sit
   behind the translucent bar. The gap is a page whose ACF section_type resolves
   to neither "slider" nor "cover" AND has no video_cover — part-mainslide.php
   then outputs nothing at all, and the first content section starts at y=0
   underneath the bar.
   :has() keeps the fix to exactly that case: pages that DO render a hero are
   matched by neither selector and are completely unaffected, so no existing
   page moves. 80px is the navbar's own effective height as the theme already
   states it — main.css:125 hangs the desktop dropdown at top:80px and
   header.php:24 caps .menu-item-has-children at max-height:80px. */
body:not(:has(.common-slideshow)):not(:has(.common-header-cover)) {
    padding-top: 80px;
}

/* --- Y07. Reserve space before UIkit's JS measures it (CLS) ---
   The hero's height does not come from CSS at all: the markup is
   uk-height-viewport on .uk-slideshow-items (part-mainslide.php:16,84) and on
   the cover's inner div (:58), and UIkit sets that as an INLINE min-height from
   JS on DOMContentLoaded. Worse, main.css:350-352 forces
   .uk-slideshow-items { aspect-ratio: auto !important }, removing the intrinsic
   ratio that would otherwise hold the space. Until UIkit runs, the hero's only
   in-flow content is a uk-cover <img>, which UIkit absolutely positions — so the
   section measures ~0 and everything below it jumps down by a full viewport
   height when the script lands. That is the hero layout shift.
   These are pre-hydration placeholders only: UIkit writes min-height as an
   inline style, and an inline declaration beats any stylesheet rule, so whatever
   it computes still wins immediately afterwards — including the JS value being
   smaller than the placeholder. Values chosen to match what it computes:
     slideshow  uk-height-viewport="offset-top: true"   -> 100vh (the hero is the
                first in-flow element on the page; the navbar is fixed and so
                contributes no offset)
     cover      uk-height-viewport="offset-bottom: 30"  -> 100vh - 30vh = 70vh
                (UIkit reads a bare number as a percentage of the viewport)
   Adding width/height attributes to the <img> tags would NOT fix this case —
   uk-cover images are taken out of flow, so their intrinsic ratio reserves
   nothing. */
.common-slideshow .uk-slideshow-items {
    min-height: 100vh;
}
.common-header-cover > [uk-height-viewport],
.common-header-cover > .uk-background-cover {
    min-height: 70vh;
}
/* Room gallery carousel (template-parts/single/content-accommodation-sub.php:56).
   Same shape of bug as the hero: uk-height-viewport on the <ul> plus uk-cover
   images that are out of flow, so nothing holds the strip open until UIkit runs.
   Reserved by RATIO rather than by a vh guess here, because this one is mid-page
   — "offset-top: true" makes UIkit's value depend on where the section happens
   to sit, so any vh placeholder I picked could easily be further from the final
   value than zero was, turning one shift into two. 16/9 is exactly the crop the
   template requests (get_image_detail(..., 1440, 810)) and it scales off the
   card's own width, so it is right at every viewport. uk-grid-match stretches
   these anchors once UIkit boots, which supersedes the ratio — as intended.
   The HOME accommodation carousel deliberately gets no rule: its image has a
   real CSS height already (60vh, main.css:561 / 40vh, screen.css:95), so its
   space is reserved before any script runs. */
.common-slider-default .uk-slider-items > li > .uk-cover-container {
    aspect-ratio: 16 / 9;
}
/* Instagram feed. Each tile is a .uk-cover-container that is only a flex box
   (main.css:861-865) with no height, ratio, or padding trick — its height comes
   entirely from the <img> inside it once that image has loaded, so the whole
   4-across strip pops into existence and pushes the footer down. Unlike the
   hero, these <img> tags ARE in normal flow, so the width/height attributes now
   on them (part-home-instagram.php) already give the browser the 3:2 ratio to
   reserve. This aspect-ratio is the belt to that braces: it holds even when
   aq_resize passes the original through unresized (get_image_detail only crops
   when the source is larger than 450x300), in which case the attributes would
   describe a ratio the file does not have. object-fit keeps a mismatched
   original from distorting, matching how every other cover image on the site
   behaves. */
.common-lightbox .uk-cover-container {
    aspect-ratio: 3 / 2;
}
.common-lightbox .uk-cover-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}