/*==============================================================
   LOCAL FONT SETUP
   Primary (headings/titles): Lora
   Secondary (body, nav, buttons): Montserrat
   Files: /assets/fonts/Lora/*.woff2, /assets/fonts/Montserrat/*.woff2
   Reference: /images/Home2.jpg
   One @font-face per static weight/style file (.woff2 only, no .woff
   fallback - none shipped alongside these) instead of the single
   variable-font .ttf, for smaller/faster downloads. Every weight
   actually used sitewide (300/400/600 Montserrat, 400/700 Lora) has
   an exact file below, so no fallback-weight matching is needed.
================================================================*/
@font-face{
    font-family: 'Lora';
    src: url('../fonts/lora/Lora-Regular.woff2?v=2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face{
    font-family: 'Lora';
    src: url('../fonts/lora/Lora-Italic.woff2?v=2') format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}
@font-face{
    font-family: 'Lora';
    src: url('../fonts/lora/Lora-Medium.woff2?v=2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face{
    font-family: 'Lora';
    src: url('../fonts/lora/Lora-MediumItalic.woff2?v=2') format('woff2');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}
@font-face{
    font-family: 'Lora';
    src: url('../fonts/lora/Lora-SemiBold.woff2?v=2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face{
    font-family: 'Lora';
    src: url('../fonts/lora/Lora-SemiBoldItalic.woff2?v=2') format('woff2');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}
@font-face{
    font-family: 'Lora';
    src: url('../fonts/lora/Lora-Bold.woff2?v=2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face{
    font-family: 'Lora';
    src: url('../fonts/lora/Lora-BoldItalic.woff2?v=2') format('woff2');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}
@font-face{
    font-family: 'Montserrat';
    src: url('../fonts/montserrat/Montserrat-Thin.woff2?v=2') format('woff2');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}
@font-face{
    font-family: 'Montserrat';
    src: url('../fonts/montserrat/Montserrat-ThinItalic.woff2?v=2') format('woff2');
    font-weight: 100;
    font-style: italic;
    font-display: swap;
}
@font-face{
    font-family: 'Montserrat';
    src: url('../fonts/montserrat/Montserrat-ExtraLight.woff2?v=2') format('woff2');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}
@font-face{
    font-family: 'Montserrat';
    src: url('../fonts/montserrat/Montserrat-ExtraLightItalic.woff2?v=2') format('woff2');
    font-weight: 200;
    font-style: italic;
    font-display: swap;
}
@font-face{
    font-family: 'Montserrat';
    src: url('../fonts/montserrat/Montserrat-Light.woff2?v=2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face{
    font-family: 'Montserrat';
    src: url('../fonts/montserrat/Montserrat-LightItalic.woff2?v=2') format('woff2');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}
@font-face{
    font-family: 'Montserrat';
    src: url('../fonts/montserrat/Montserrat-Regular.woff2?v=2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face{
    font-family: 'Montserrat';
    src: url('../fonts/montserrat/Montserrat-Italic.woff2?v=2') format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}
@font-face{
    font-family: 'Montserrat';
    src: url('../fonts/montserrat/Montserrat-Medium.woff2?v=2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face{
    font-family: 'Montserrat';
    src: url('../fonts/montserrat/Montserrat-MediumItalic.woff2?v=2') format('woff2');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}
@font-face{
    font-family: 'Montserrat';
    src: url('../fonts/montserrat/Montserrat-SemiBold.woff2?v=2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face{
    font-family: 'Montserrat';
    src: url('../fonts/montserrat/Montserrat-SemiBoldItalic.woff2?v=2') format('woff2');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}
@font-face{
    font-family: 'Montserrat';
    src: url('../fonts/montserrat/Montserrat-Bold.woff2?v=2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face{
    font-family: 'Montserrat';
    src: url('../fonts/montserrat/Montserrat-BoldItalic.woff2?v=2') format('woff2');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}
@font-face{
    font-family: 'Montserrat';
    src: url('../fonts/montserrat/Montserrat-ExtraBold.woff2?v=2') format('woff2');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}
@font-face{
    font-family: 'Montserrat';
    src: url('../fonts/montserrat/Montserrat-ExtraBoldItalic.woff2?v=2') format('woff2');
    font-weight: 800;
    font-style: italic;
    font-display: swap;
}
@font-face{
    font-family: 'Montserrat';
    src: url('../fonts/montserrat/Montserrat-Black.woff2?v=2') format('woff2');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}
@font-face{
    font-family: 'Montserrat';
    src: url('../fonts/montserrat/Montserrat-BlackItalic.woff2?v=2') format('woff2');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

/*==============================================================
   GLOBAL COLOR / TYPE VARIABLES
   Sampled from images/Home2.jpg to match the reference design.
   Declared here (loaded after the ACF-driven :root in
   template-parts/style-system.php) with !important so these
   values reliably win on the live site regardless of the
   ACF Global Fonts/Colors option values.
================================================================*/
:root{
    --font-primary: 'Lora', serif !important;
    --font-secondary: 'Montserrat', sans-serif !important;
    --primary-color: #92A7BA !important;
    --secondary-color: #768da2 !important;
    --text-color: #676767 !important;
    --white-color: #FFFFFF !important;
    --background-primary: #FCFBF9 !important;
    --background-secondary: #91A6B9 !important;
    --background-muted: #FCFBF9 !important;
    --border-color: #E1E6EA !important;
    --copyright: #FCFBF9 !important;
}

/* Missing utility classes - content-facilities.php, content-discovery.php,
   and content-meeting.php all alternate each row's background between
   "background-muted" and "background-secondary" (their identical
   $box_bg PHP logic: even rows get background-muted, odd rows get
   background-secondary), but neither class had a matching CSS rule
   anywhere in the theme (confirmed via grep - only *-prefixed variants
   existed: .uk-background-muted/.uk-background-secondary from UIkit,
   and .common-footer.background-muted/.common-footer{background-color:
   var(--background-secondary)}, none of which match a bare row <div>).
   So every alternating row on all three pages was rendering with no
   background-color at all - the alternation was a complete no-op, not
   an intentional matched pattern. The --background-muted/--background-
   secondary variables above already exist with exactly matching names
   and were already in active use elsewhere for this same soft cream /
   blue-gray pairing (--background-muted on .common-wrapper.uk-
   background-muted; --background-secondary on .common-footer) -
   strongly suggesting this was the intended pairing, just missing the
   connecting class rule. Added generically (not scoped per-page) since
   these exact class names aren't used for anything else in the theme. */


/*==============================================================
   BUTTONS
   Flat, square corners, no shadow, solid/outline pair in the
   accent blue - matches the BOOK NOW / EXPLORE buttons in the
   reference design.
================================================================*/
.uk-button-primary,
.uk-button-default,
.common-wrapper .common-content .common-row .uk-button-primary,
.common-wrapper .common-content .common-row .uk-button-default{
    font-family: var(--font-primary) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    letter-spacing: 1px;
    min-width: 150px;
    padding: 0 28px;
    line-height: 40px;
    /* 0.8333rem = 12px against this theme's actual 14.4px root
       (html,body sets font-size:0.9rem in main.css, i.e. 0.9 * 16px) */
    font-size: 0.8333rem !important;
}
/* Button text (12px) is already small - the "too large on mobile" feel
   actually comes from min-width:150px + 28px side padding above, which
   forces a ~206px-wide button regardless of viewport (2 side-by-side
   buttons, e.g. Meeting & Event/Discovery's button pairs, need ~410px+
   and overflow a 320-480px column). Scaled down at this breakpoint
   rather than converted to a fluid clamp() - a button has a practical
   minimum tap-target width regardless of screen size, so unlike type
   there's no benefit to smooth interpolation here, just a smaller fixed
   floor for small screens. */
@media (max-width: 480px){
    .uk-button-primary,
    .uk-button-default,
    .common-wrapper .common-content .common-row .uk-button-primary,
    .common-wrapper .common-content .common-row .uk-button-default{
        min-width: 120px;
        padding: 0 18px;
    }
}
.uk-button-primary{
    background-color: var(--primary-color);
    color: var(--white-color);
    border: 1px solid var(--primary-color);
}
.uk-button-primary:hover{
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
}
.uk-button-default{
    background-color: var(--white-color);
    color: var(--secondary-color);
    border: 1px solid var(--secondary-color);
}
.uk-button-default:hover{
    background-color: var(--secondary-color);
    color: var(--white-color);
}
.common-navbar .common-navbar-main .common-navbar-container .common-navbar-button a{
    font-family: var(--font-primary) !important;
    border-radius: 0;
    letter-spacing: 1px;
    font-size: 0.8333rem !important;
	color: var(--white-color) !important;
}
/* Footer newsletter "SIGN UP" button - white fill, blue text on the blue footer band */
.common-footer .common-footer-content form button,
.common-footer .common-footer-content form input[type="submit"]{
    background-color: var(--white-color);
    color: var(--secondary-color);
    border: none;
    border-radius: 0;
    box-shadow: none;
    letter-spacing: 1px;
    font-family: var(--font-primary) !important;
}
/* main.css:1148 sets font-size on "form button span" (0.7rem), which is
   more specific than "form button" above and wins for any button text
   wrapped in a span - overridden here so Sign Up matches every other
   button regardless of markup. */
.common-footer .common-footer-content form button,
.common-footer .common-footer-content form input[type="submit"]{
    font-size: 0.8333rem !important;
}

.common-footer .common-footer-content form button span {font-size: 0.8333rem !important; color: var(--primary-color);}
/* Copyright bar sits on a near-white background (--copyright), so its
   text must not be white (main.css sets it to var(--white-color)) */
.common-copyright .common-copyright-content,
.common-copyright .common-copyright-content a{
    color: var(--text-color) !important;
    font-size: 12px;
}

.common-copyright .common-copyright-content p {margin: 10px;}
/*==============================================================
   NAV BAR
   Reference shows a flat white bar with no drop shadow.
================================================================*/
.common-navbar{
    box-shadow: none !important;
}

/*==============================================================
   LOGO SIZING (header + footer)
   Figma spec: header nav bar is a fixed 80px row (padding-left: 50px
   already set on .common-navbar-main in main.css:83); UIkit's default
   .uk-navbar-nav item height is also 80px (uikit.css:5277), confirming
   the row height. Logo is constrained to max-height: 60px, leaving
   ~10px breathing room top and bottom, vertically centered via
   align-items: center. width:auto (never a fixed width) preserves
   the logo's native aspect ratio at any size.
================================================================*/
.common-navbar .common-navbar-main .common-logo,
.common-navbar .common-navbar-main .common-logo a{
    display: flex !important;
    align-items: center;
}
.common-navbar .common-navbar-main .common-logo img{
    max-height: 60px !important;
    width: auto !important;
    padding: 0 !important;
}
.common-footer .uk-navbar-left .common-logo,
.common-footer .uk-navbar-left .common-logo a{
    display: flex !important;
    align-items: center;
}
/* Footer logo: fixed 62x62 square per Figma spec (not proportional
   scaling like the header) - object-fit:contain keeps the image content
   undistorted inside that box even if the source asset isn't perfectly
   square. Vertical centering with the "Follow Us" row comes from
   UIkit's .uk-navbar-left/.uk-navbar-right, which are align-items:center
   by default (uikit.css:5184-5190); .common-logo's own align-items:center
   above centers the img within that. */
.common-footer .uk-navbar-left .common-logo img{
    width: 62px !important;
    height: 62px !important;
    max-height: none !important;
    object-fit: contain;
    padding: 0 !important;
}
@media (max-width: 640px) {
    .common-navbar .common-navbar-main .common-logo img{
        max-height: 44px !important;
        width: auto !important;
        padding: 0 !important;
    }
}

/*==============================================================
   EYEBROW / SECTION LABELS (WELCOME TO, ACCOMMODATION, FACILITIES...)
   Reference uses a small, wide-tracked uppercase label above each
   heading; theme previously only uppercased it with no size/tracking.
================================================================*/
.heading-intro .heading-sub,
.details .heading-sub{
    font-family: var(--font-secondary);
    font-size: 1rem;
    letter-spacing: 2px;
    color: var(--text-color);
    margin-bottom: 8px !important;
}
/* main.css sets margin:0 !important on this exact deep selector for the
   Welcome/Facilities sections - match it so the label spacing above wins */
.common-wrapper .common-content .common-row .details .heading-intro .heading-sub{
    margin: 0 0 8px !important;
}

/*==============================================================
   HEADING WEIGHT (h3-h6)
   main.css's shared h1-h6 rule requests font-weight:300, but the
   local Lora variable font (assets/fonts/Lora/*.ttf) only declares
   a 400-700 weight axis (main.css:41-42 already bumps h1/h2 to 400
   for the same reason). h3-h6 never got that same bump, so they were
   requesting a weight the font file can't render - browsers just
   silently clamp to 400 already; this makes the CSS say what's
   actually rendering instead of claiming 300.
================================================================*/
h3, h4, h5, h6{
    font-weight: 400 !important;
}

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

/*Content*/
.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;
}

/*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;}

/*Blog*/
.uk-breadcrumb a{ color: #999; }
.uk-breadcrumb a:hover{ color: #A68563; }
.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: var(--secondary-color); }
.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: var(--secondary-color);}
.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: var(--secondary-color);}
.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: var(--secondary-color);}
.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: var(--secondary-color);}
.widget_block .wp-element-button{border:0; background: transparent;}
/*Footer*/
.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: #A78563; font-size: 0.8em; color: #FFF; }

/* Footer 3-column area (hotel name/address, Contact Us, Newsletter).
   main.css:1075 uses --background-secondary (#91A6B9); reference design
   asks for #92A7BA, which is already --primary-color and already used
   for this same blue-gray band on the Contact page
   (.content-contact-section, style-custom.css above) - reused here so
   both sections share one variable. This only affects the second
   .common-footer section (the uk-grid/uk-width-1-3 widget row): the
   logo/"Follow Us" bar above it carries the separate .background-muted
   class, which wins on specificity regardless of this rule. */
.common-footer .common-row{
    background-color: var(--primary-color);
    /* Thin divider between the column content and the copyright bar */
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
/* main.css's global h1-h6 rule forces uppercase + color:var(--primary-color)
   (main.css:32-39), which is invisible against this same primary-color
   background. Scoped to .common-row so it doesn't touch the "Follow Us"
   h5 in the logo bar above (no .common-row wrapper there - see
   part-footer.php). Font-size is tiered by heading level rather than
   fixed to one value since the actual tag (h3 vs h4 etc) is chosen by
   whoever edits the ACF "footer_widget" option content, not this
   template - this keeps the hotel-name heading visually larger than the
   Contact Us/Newsletter headings whatever level they were authored at. */
.common-footer .common-row .common-footer-content h1,
.common-footer .common-row .common-footer-content h2,
.common-footer .common-row .common-footer-content h3,
.common-footer .common-row .common-footer-content h4,
.common-footer .common-row .common-footer-content h5,
.common-footer .common-row .common-footer-content h6{
    font-family: var(--font-primary);
    color: var(--white-color);
    text-transform: none !important;
}
.common-footer .common-row .common-footer-content h1,
.common-footer .common-row .common-footer-content h2{ font-size: 2rem !important; }
.common-footer .common-row .common-footer-content h3{ font-size: 1.5rem !important; }
.common-footer .common-row .common-footer-content h4{ font-size: 1.25rem !important; }
.common-footer .common-row .common-footer-content h5{ font-size: 1.25rem !important; }
.common-footer .common-row .common-footer-content h6{ font-size: 1rem !important; }
/* Newsletter email field - transparent/bordered per reference. Scoped to
   type so it can't also restyle the SIGN UP submit button, which is
   styled separately above via form button/input[type="submit"]. */
.common-footer .common-footer-content form input[type="email"],
.common-footer .common-footer-content form input[type="text"]{
    background-color: var(--primary-color);
    border: 1px solid rgb(255, 255, 255);
    color: var(--white-color);
}
.common-footer .common-footer-content form input[type="email"]::placeholder,
.common-footer .common-footer-content form input[type="text"]::placeholder{
    color: rgba(255, 255, 255, 0.7);
}

@media (max-width: 1024px){
    .common-slider-primary .position-nav-center{ top: calc(25vh - 40px); }
    #checkbox-flip{ display: none!important; }
}

/*==============================================================
   FAQ (Section FAQ)
   Accordion list built on the loaded UIkit accordion component;
   items 6+ collapse via .faq-hidden, animated with max-height/
   opacity so the "Read More" reveal can fade/slide instead of
   jumping (display:none can't transition). max-height is in rem
   (not px, per theme convention below) and generous, so a long
   answer is never clipped by the collapse animation.
   Breakpoints below (768/640) reuse the same values screen.css
   already uses for the h1/h2 and Facilities mobile scaling -
   no new breakpoints introduced.
================================================================*/
/* Decorative background pattern - shared by any section that wants it via
   .common-section-pattern-bg, added directly to that section's <section>
   tag (styling hook only, no ACF/PHP logic touched). Originally FAQ-only
   (was .common-faq-section) - renamed and reused on part-home-offers.php
   too rather than duplicating this block, since section wrapper classes
   like .common-wrapper/.uk-background-muted are shared by ~15 other page
   templates and can't be targeted directly without affecting them all.
   Image is actually at /images/bg-sino2.png (theme root), not
   /assets/images/ as the original FAQ ticket assumed - confirmed via
   `find`. It's a 149x150px light tile motif, tiled at native size (no
   background-size override needed) with plain background-repeat, no
   overlay/tint added since the source image is already faint by design.
   uk-background-muted sets background-color:#f8f8f8 (uikit.css) at equal
   specificity, so !important is used here to make sure the white base
   wins. */
.common-section-pattern-bg{
    background-color: #FFFFFF !important;
    background-image: url('../../images/bg-sino2.png');
    background-repeat: repeat;
}
.common-faq-content{ width: 100%; margin-top: 28px; }
.common-faq-content .faq-list{ list-style: none; margin: 0; padding: 0; }
.common-faq-content .faq-item{
    max-height: 100rem;
    width: 100%;
    opacity: 1;
    overflow: hidden;
    /* Figma spec: Border Bottom 1px #E9E9E9. Set as a literal color here
       rather than changing var(--border-color), since that variable is
       shared by 6 other rules across main.css/style-custom.css
       (search widget, .articles border, etc.) that aren't part of this
       spec. */
    border-bottom: 1px solid #dddddd;
    transition: max-height 0.4s ease, opacity 0.3s ease, margin 0.4s ease;
    /* UIkit's own accordion base rule (uikit.css:3464) sets
       "margin-top: 20px" on every list item except the first
       (.uk-accordion > :nth-child(n+2)), with no matching margin-bottom -
       this was the real source of the uneven spacing (confirmed via
       DevTools box model: ~20px orange margin above each row, none
       below). Zeroed out here so row spacing comes only from
       .uk-accordion-title's own symmetric padding (18px 0) plus this
       border-bottom, which keeps every divider evenly spaced since all
       rows now share identical box geometry. */
    margin: 0;
}
.common-faq-content .faq-item.faq-hidden{
    max-height: 0;
    opacity: 0;
    margin: 0;
    pointer-events: none;
}
.common-faq-content .faq-item .uk-accordion-title,
.common-faq-content .faq-item .uk-accordion-content{
    /* Same secondary font + body-copy scale as html,body in main.css
       (font-size/letter-spacing), overriding UIkit's own accordion
       defaults (font-size:1.25rem, color:#333) so FAQ text reads
       like the rest of the site's body/list text rather than a new
       custom style. */
    font-family: var(--font-secondary) !important;
    font-size: 0.9rem;
    letter-spacing: 0.1rem;
    color: var(--text-color);
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
}
.common-faq-content .faq-item .uk-accordion-title{
    /* No --font-weight-* variables exist anywhere in this theme (checked
       :root in main.css/style-custom.css). The only weights the site
       actually uses above the 300 body-copy default are 400 (eyebrow/
       sub-title labels like .header-sub-title, .slideshow-sub-title)
       and 600 (nav-only, .navbar-font-weight). 400 is the closer match
       for body-adjacent emphasized text, so reused here instead of the
       body's 300.
       Layout: question left / chevron right, vertically centered -
       replaces UIkit's default title layout (block + floated ::before
       marker). overflow must be reset to visible: UIkit's own base
       rule sets overflow:hidden here (leftover from its float-based
       marker), which - combined with a flex child that has no
       min-width - was clipping the chevron out of view once the row's
       flex content hit the container edge (e.g. when a scrollbar
       appears after a panel opens and shaves a few px off the
       available width).
       Figma spec (Frame 306): Flow Horizontal, Padding 16px, Gap 75px,
       Height Hug. That frame IS this title row (question + chevron),
       not the vertical stack of FAQ rows - Gap:75px is the min
       horizontal space between the question text and the chevron, not
       spacing between separate questions. Rows themselves stay flush
       against each other, separated only by the border-bottom above. */
    font-weight: 400;
    display: flex;
    align-items: center;
    justify-content: space-between;
    overflow: visible;
    gap: 75px;
    padding: 25px 0;
    /* padding-top/bottom above are already equal (16px/16px) - the
       reported unevenness is the browser's default "normal" line-height
       for Montserrat, whose leading isn't split evenly above/below the
       glyphs, so align-items:center (above) was centering an off-center
       line box instead of the visible text. Pixel-measured on the
       reference screenshot: ~85px above the text vs ~44px below it with
       line-height unset. Tightening line-height collapses the line box
       close to the glyph bounds so the equal padding actually reads as
       centered. */
    line-height: 1;
}
/* UIkit's own plus/cross marker - we render our own chevron icon instead */
.common-faq-content .faq-item .uk-accordion-title::before{
    display: none;
}
.common-faq-content .faq-item .faq-question-text{
    min-width: 0;
    /* main.css:58 has a global "span{ color: var(--primary-color); }"
       rule (#92A7BA, blue-gray). .faq-question-text is a <span>, so
       that element-selector rule was winning over the inherited
       color:var(--text-color) from .uk-accordion-title above - CSS
       inheritance always loses to any rule that matches the element
       directly, regardless of specificity. Color-sampled from the
       Figma reference (darkest text pixels averaged to #333333) rather
       than reusing --text-color (#676767), since neither existing
       variable matches what the design shows. Still the darkest tone
       in the FAQ block by design, kept as-is against the light
       bg-sino2.png pattern (.common-section-pattern-bg above) - the
       answer text below is the one that read too faint against it.
       font-size bumped from a fixed 16px to 1.25rem (18px at this
       theme's 0.9rem/14.4px root - main.css html rule) for a slight,
       proportional readability increase; switched to rem so it scales
       with the same root-based system as the rest of the theme
       instead of sitting outside it as a literal px value. */
    color: #333333;
    font-size: 14px;
}
.common-faq-content .faq-item .faq-chevron{
    flex: none;
    /* Always visible in both states - only the transform changes */
    display: inline-flex;
    opacity: 1;
    color: var(--text-color);
    transition: transform 0.3s ease;
}
.common-faq-content .faq-item.uk-open .faq-chevron{
    transform: rotate(180deg);
}
.common-faq-content .faq-item .uk-accordion-content{
    /* Overrides the shared .uk-accordion-title/.uk-accordion-content
       rule above (font-size:0.9rem/12.96px, color:var(--text-color)
       #676767) - same selector specificity, wins by appearing later
       in the cascade. #676767 read as too faint against the light
       bg-sino2.png pattern behind this section; #555555 keeps the
       answer visibly lighter/lower-weight than the #333333 question
       text (font-weight:300 vs 400 below it, already the case) while
       being clearly darker/higher-contrast than the old --text-color.
       font-size raised from 0.9rem to 1rem (14.4px) - a smaller step
       than the question's, so the question (1.25rem) stays the larger
       of the two per this request. Applies to every FAQ item's answer
       in both collapsed and expanded state: .uk-open/.faq-hidden only
       toggle the chevron rotation and panel visibility (see above),
       neither one carries its own color/font-size override. */
    font-weight: 300;
    margin: 0 0 18px;
    font-size: 14px;
    color: #555555;
}
.common-faq-content .faq-readmore-wrapper{ margin-top: 30px; }

/* Reuses the theme's existing 768px breakpoint (screen.css h1/h2, .common-row).
   Padding scaled down from the 16px desktop base at the same ~0.78 ratio
   used before (was 14px against an 18px base). Gap (question<->chevron
   minimum spacing) cut from the Figma desktop spec of 75px to 32px - full
   75px has no design source for mobile and would eat most of a 375-768px
   row's width; 32px is comfortably within the 32-40px range this was
   scoped to. */
@media (max-width: 768px){
    .common-faq-content .faq-item .uk-accordion-title{
        padding: 20px 0;
        gap: 32px;
    }
    .common-faq-content .faq-item .uk-accordion-content{
        margin: 0 0 14px;
    }

    .common-faq-content .faq-item .faq-question-text {
        line-height: 1.5rem;
    }
    .common-footer .uk-navbar-left .common-logo { justify-content: center;}
}
/* Reuses the theme's existing 640px breakpoint (screen.css Facilities mobile padding) */
@media (max-width: 640px){
    .common-faq-content .faq-readmore-wrapper{ margin-top: 20px; }
    
}

/*==============================================================
   FACILITIES - main content section
   Flat #92A7BA, unchanged - not part of the pattern-overlay request
   below (only Facilities was left out this round).
================================================================*/
.content-facilities-section{
    background: #92A7BA;
}

/*==============================================================
   MEETING / OFFERS / DISCOVERY / CONTACT / GALLERY / ACCOMMODATION
   - main content sections
   Base color #92A7BA (matches var(--primary-color), same solid
   color .content-facilities-section above still uses) with
   bg-sino2.png layered on top as a repeating, blended pattern - same
   tile image as the FAQ section's .common-section-pattern-bg further
   below in this file, at the same ../../images/bg-sino2.png path
   (relative to this file's own location, assets/css/style-custom.css
   - not ../images/, which would resolve to assets/images/ and 404,
   the actual file lives at the theme root).
   background-blend-mode:soft-light (rather than a ::before pseudo-
   element) mutes the pattern into the base color in one step, no
   extra positioned layer to keep out of the way of the white text
   (Meeting/Offers/Discovery/Contact) or white cards (Offers/
   Accommodation) these sections already rely on for contrast
   (unchanged/untouched here). soft-light chosen for a gentler, less
   contrasty result than overlay - swap to overlay if more visible
   texture is wanted.
   .content-gallery-section and .common-accommodation-cards-section
   (content-accommodation.php's actual class - confirmed via grep,
   not "content-accommodation-section") added to this same shared
   rule rather than duplicated separately, per this request. */
.content-meeting-section,
.common-offers-cards-section,
.content-discovery-section,
.content-contact-section,
.content-gallery-section,
.content-facilities-section,
.common-accommodation-cards-section,
.common-other-rooms-section,
.common-other-offers-section{
    background-color: #92A7BA;
    background-image: url('../../images/bg-sino2.png');
    background-repeat: repeat;
    background-blend-mode: soft-light;
}

/* Blue section background needs white copy for contrast - overrides
   the grey var(--text-color)/default heading colors used elsewhere. */
.content-discovery-section,
.content-discovery-section h1,
.content-discovery-section h2,
.content-discovery-section h3,
.content-discovery-section h4,
.content-discovery-section p,
.content-discovery-section .heading-sub,
.content-meeting-section,
.content-meeting-section h1,
.content-meeting-section h2,
.content-meeting-section h3,
.content-meeting-section h4,
.content-meeting-section p,
.content-meeting-section .heading-sub,
.content-gallery-section,
.content-gallery-section h1,
.content-gallery-section h2,
.content-gallery-section h3,
.content-gallery-section h4,
.content-gallery-section p,
.content-gallery-section .heading-sub,
.content-facilities-section,
.content-facilities-section h1,
.content-facilities-section h2,
.content-facilities-section h3,
.content-facilities-section h4,
.content-facilities-section p,
.content-facilities-section .heading-sub{
    color: #FFF !important;
}

/* Keep each meeting card's existing actions and inquiry action on one
   responsive row. Buttons wrap only when the card becomes too narrow. */
.content-meeting-section .meeting-button-group{
    gap: 4px;
    margin-top: 20px;
}
.common-wrapper.content-meeting-section .common-content .common-row .meeting-button-group .uk-button{
    margin-right: 0;
    min-width: 0;
    padding-left: 12px;
    padding-right: 12px;
}

/* Row gap fix - close the vertical space between stacked rows so they
   connect edge-to-edge. Discovery/Meeting/Facilities: each row is its
   own [uk-grid] element inside .common-switch-places-content; UIkit's
   own vertical-collapse rule needs a matching ".uk-grid" class on the
   preceding sibling to zero out, so it's forced directly here instead.
   Gallery: a single grid wraps onto multiple lines - UIkit adds
   ".uk-grid-margin" to the first item of each wrapped line for the
   vertical gutter, so margin-top is zeroed on every grid item instead
   of relying on that class being reset. */
.content-discovery-section .common-switch-places-content [uk-grid],
.content-meeting-section .common-switch-places-content [uk-grid],
.content-facilities-section .common-switch-places-content [uk-grid]{
    margin: 0 !important;
}
.content-gallery-section .js-filter > *{
    margin-top: 0 !important;
}

/*==============================================================
   CONTENT-DISCOVERY-SECTION - stack through tablet widths too
   uk-child-width-1-2@s (content-discovery.php:55) switches each row
   to a 2-column side-by-side layout at UIkit's own @s breakpoint
   (--uk-breakpoint-s:640px, uikit.css:438) and stays 2-column at
   every width above that - there's no @m/@l suffix also applied to
   step it back down again, so tablet (768-1024px) was already
   inheriting the full desktop side-by-side layout, not a tablet-
   specific one. Reuses this theme's own existing 1024px breakpoint
   (already used elsewhere - e.g. screen.css's nav hamburger cutover -
   as the site's tablet/desktop boundary) as the threshold, rather
   than a bare UIkit tier (@m=960px is the closest built-in option but
   doesn't land on exactly the requested 1024px).
   uk-flex-last@s (content-discovery.php:50, the "image on the right"
   modifier applied to odd-numbered rows) activates at that same
   640px breakpoint too - without resetting it back to the default
   order here, odd rows would keep reordering image-after-text while
   stacked through 768-1024px, so alternating rows would stack in
   different visual orders instead of all matching mobile's
   consistent image-first order below 640px.
   margin-bottom restores spacing between rows specifically for this
   newly-stacked band: the "Row gap fix" above (margin:0!important,
   meant to glue side-by-side rows together edge-to-edge on desktop)
   also zeroes the gap between stacked rows wherever this section is
   stacked - previously only true below 640px (out of scope for this
   request), now also true up to 1024px, so it needs the same fix
   here to avoid rows reading as visually cramped/touching. */
@media (max-width: 1024px){
    .content-discovery-section .common-switch-places-content [uk-grid] > *{
        width: 100% !important;
    }
    .content-discovery-section .common-switch-places-content [uk-grid] .uk-flex-last\@s{
        order: 0;
    }
    .content-discovery-section .common-switch-places-content [uk-grid]{
        margin-bottom: 30px !important;
    }
}

/*==============================================================
   CONTENT-DISCOVERY-INTRO-SECTION - tablet/mobile list + text size
   content-discovery.php:8-17 - the_content() (ACF/WYSIWYG page intro
   copy) renders inside .details .heading-intro, so any <ul>/<li> a
   content editor added lives there. No CSS in this theme touches
   generic content <ul>/<li> at all (confirmed via grep - only
   component-specific lists like .faq-list or block-editor widgets
   have list-style rules), so any bullet list here was rendering with
   the plain browser-default disc marker + ~40px UA-stylesheet
   indent - most awkward here since .details itself is text-align:
   center (main.css:508-511, shared by every page intro section), so
   the list's own box wasn't centered even though its text was,
   reading as visually off-center on top of the default indent.
   list-style:none + padding/margin-left:0 removes both the marker
   and that leftover indent together, only <=768px (desktop keeps
   its current bullet layout, unchanged).
   Body/list text: h1 already has a sitewide fluid clamp() (main.css,
   applied earlier this session) so it's not duplicated here - only
   paragraph/list-item text is addressed, since it had no mobile-
   specific sizing at all before this (inherits the flat html,body
   0.9rem/14.4px at every width, main.css). Fluid down to 0.8125rem
   (11.7px) at ~320px, capped at the original 0.9rem (14.4px) so
   desktop/tablet-large end is unchanged - consistent with the
   min/preferred/max clamp() pattern used for headings elsewhere in
   this file rather than a hard breakpoint step. */
.content-discovery-intro-section .heading-intro p,
.content-discovery-intro-section .heading-intro li{
    font-size: clamp(0.8125rem, 0.7rem + 0.7vw, 0.9rem);
}
@media (max-width: 768px){
    .content-discovery-intro-section .heading-intro ul{
        list-style: none;
        padding-left: 0;
        margin-left: 0;
    }
    .content-discovery-intro-section .heading-intro li{
        padding-left: 0;
        margin-left: 0;
    }
}

/*==============================================================
   ACCOMMODATION LISTING (content-accommodation.php) - room cards
   Colored section band with white cards on top, same pattern as
   .content-contact-section elsewhere in this file. Background is on
   the <section class="common-accommodation-cards-section common-wrapper">
   element itself (full-bleed, edge-to-edge) rather than the nested
   .common-content div, which is capped at max-width:1440px and would
   have left the outer edges white. Scoped to .common-accommodation-cards-section
   (added to that file's second <section> tag - styling hook only, no
   ACF/PHP logic touched) since .common-content/.common-card-default are
   shared by ~10 other templates (archive.php, search.php, offers/rooms/
   meeting/facilities "other" carousels, etc.) that aren't part of this
   request. Section background itself now lives in the shared MEETING/
   OFFERS/DISCOVERY/CONTACT/GALLERY/ACCOMMODATION pattern-overlay rule
   above (background-blend-mode:soft-light + bg-sino2.png), not here. */
.common-accommodation-cards-section .common-card-default{
    background-color: var(--white-color);
}

/*==============================================================
   EXCLUSIVE OFFERS LISTING (content-offers.php) - offer cards
   Same colored-band-with-white-cards pattern as
   .common-accommodation-cards-section directly above (reused rather
   than duplicated as literal properties). Without an opaque card
   background, the section's blue-gray fill showed through/behind the
   card photos (Free Night/Last Minute/Early Bird), reading as a tint
   over the images - giving .common-card-default its own white
   background here fixes that the same way it was fixed for
   Accommodation, since the photo <img> sits inside that white card,
   not directly on the section background. Scoped to
   .common-offers-cards-section (added to content-offers.php's second
   <section> tag - styling hook only, no ACF/get_posts() logic
   touched) rather than the shared .common-content/.common-card-default
   classes reused by ~10 other templates. Card text stays the
   default dark var(--text-color)/heading colors (no override here) -
   those already have full contrast against the new white card
   background. */
.common-offers-cards-section .common-card-default{
    background-color: var(--white-color);
}

/*==============================================================
   OTHER ROOMS / OTHER OFFERS CAROUSELS (single/part-other-rooms.php,
   single/part-other-offers.php) - room/offer cards
   .common-other-rooms-section and .common-other-offers-section are
   now both in the shared blue (#92A7BA) pattern-overlay rule above,
   same band as .content-meeting-section/etc. Cards get the same
   bg-sino2.png + soft-light technique but with white as the base
   color instead, so they read as white cards on top of the colored
   band (same layering as .common-accommodation-cards-section/
   .common-offers-cards-section above) rather than blending into it.
   Scoped to these two classes (added to each file's <section> tag -
   styling hook only, no PHP/get_posts() logic touched) rather than
   the shared .common-card-default class reused by ~10 other
   templates. */
.common-other-rooms-section .common-card-default,
.common-other-offers-section .common-card-default{
    background-color: var(--white-color);
    background-image: url('../../images/bg-sino2.png');
    background-repeat: repeat;
    background-blend-mode: soft-light;
}

/* Both sections are now on the same blue band as .content-meeting-section,
   but unlike that section, their "Other Rooms"/"Other Offers" intro
   headings (each file's .details/.heading-intro) sit directly on the band
   rather than inside a background-muted/secondary box, so they need the
   same white-copy-for-contrast treatment. Scoped to .details specifically
   (not a blanket h1-h4/p/heading-sub rule like the Meeting/Discovery/
   Gallery/Facilities block below) so it doesn't also turn the
   .common-card-default card text white, which would make that text
   invisible against the white card background set above. */
.common-other-rooms-section .details h2,
.common-other-rooms-section .details .heading-sub,
.common-other-offers-section .details h2,
.common-other-offers-section .details .heading-sub{
    color: #FFF;
}

/*==============================================================
   HOME FACILITIES - decorative watermark
   Faint architectural line-art (images/building2.png, already a very
   light/low-contrast asset by design - no extra opacity/tint needed),
   applied once as the whole section's background rather than per-row/
   per-column, so it doesn't repeat behind each of the three rows
   (Fitness Room / Swimming Pool / Meeting & Event). Scoped to
   .common-home-facilities-section (added to that file's <section> tag -
   styling hook only, no ACF/PHP logic touched) rather than the shared
   .common-wrapper/.uk-background-muted classes on the same element,
   which are reused by ~15 other page templates. background-image/repeat/
   position/size are set as individual properties (not the "background"
   shorthand) so they layer on top of uk-background-muted's own
   background-color (#f8f8f8, uikit.css) instead of clearing it. */
.common-home-facilities-section{
    background-image: url('../../images/building2.png');
    background-repeat: no-repeat;
    background-size: 500px auto;
}

/*==============================================================
   HOME WELCOME INTRO - decorative watermark
   Same approach as .common-home-facilities-section above, mirrored to
   the right side per this request. Faint architectural line-art
   (images/building1.png, already very light by design), applied once
   to the whole section rather than per-column. Scoped to
   .common-home-welcome-section (added to front-page.php's <section>
   tag - styling hook only, no ACF/PHP logic touched) since
   .common-wrapper/.uk-background-muted on the same element are shared
   by ~15 other templates. No reference screenshot was provided for
   this section, so size/position follow the same 500px-auto convention
   as the Facilities watermark rather than a measured value - worth a
   visual check once deployed. background-image/repeat/position/size
   are individual properties (not the "background" shorthand) so they
   layer on top of uk-background-muted's own background-color
   (#f8f8f8, uikit.css) instead of clearing it.
   .content-accommodation-intro-section (STAY page intro),
   .content-facilities-intro-section (FACILITIES page intro),
   .content-meeting-intro-section (MEETING & EVENT page intro),
   .content-offers-intro-section (EXCLUSIVE OFFERS page intro),
   .content-discovery-intro-section (DISCOVERY page intro), and
   .content-contact-intro-section (CONTACT US page intro) each added
   to that page template's <section> tag - reuse this same rule
   for a consistent watermark treatment. */
.common-home-welcome-section,
.content-accommodation-intro-section,
.content-facilities-intro-section,
.content-meeting-intro-section,
.content-offers-intro-section,
.content-discovery-intro-section,
.content-contact-intro-section{
    background-image: url('../../images/building1.png');
    background-repeat: no-repeat;
    background-position: right top;
    background-size: 500px auto;
}

/* WATERMARK BACKGROUNDS - mobile clipping fix
   At any section width narrower than the fixed 500px background-size
   above, the watermark no longer fits and gets cropped hard by the
   section's edge - the building1.png group (anchored right top) loses
   its left side off-canvas, while .common-home-facilities-section
   (building2.png, no background-position set above so it defaults to
   the browser's initial 0% 0%/left top) loses its right side instead.
   Reuses this theme's existing 640px breakpoint (screen.css/FAQ block
   above already key off it) rather than a one-off value - comfortably
   covers 320/375/414px, and 500px still fits without clipping at
   anything wider (e.g. 768px, per the responsive audit). Only
   background-size changes; each rule's own background-position is
   left as-is, so the smaller artwork stays anchored to the same edge
   it was already on. Deliberately smaller/fainter here rather than
   hidden or repositioned, matching this site's decorative-watermark
   intent instead of a stricter crop-to-viewport fix. */
@media (max-width: 640px){
    .common-home-welcome-section,
    .content-accommodation-intro-section,
    .content-facilities-intro-section,
    .content-meeting-intro-section,
    .content-offers-intro-section,
    .content-discovery-intro-section,
    .content-contact-intro-section,
    .common-home-facilities-section{
        background-size: 220px auto;
    }
}

/* Featured/slider images (uk-cover) - UIkit's cover.js sets inline
   width/height/position on the <img> at runtime, so !important is
   required here for aspect-ratio/object-fit to win on the live site. */
/* .content-discovery-section .uk-cover-container,
.content-meeting-section .uk-cover-container,
.content-facilities-section .uk-cover-container,
.content-gallery-section .uk-cover-container{
    aspect-ratio: 4 / 3;
} */
.content-discovery-section .uk-cover-container img,
.content-discovery-section .uk-slider-items img,
.content-meeting-section .uk-cover-container img,
.content-meeting-section .uk-slider-items img,
.content-facilities-section .uk-cover-container img,
.content-facilities-section .uk-slider-items img,
.content-gallery-section .uk-cover-container img{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/*==============================================================
   FACILITIES ROW IMAGE - slider vs non-slider aspect-ratio fix
   content-facilities.php:58-81 branches per-row on featured_option:
   the non-slider branch (:76-81) uses UIkit's documented uk-cover
   pattern - <canvas width="1024" height="768"> as a sizing sibling
   next to <img uk-cover> inside .uk-cover-container - which gives
   that branch a real, intrinsic 4:3 (1024/768) box. The slider
   branch (:58-73) has no canvas/uk-cover at all; its <img> sits
   several levels deep (.uk-cover-container > [uk-slider] > ul.uk-
   slider-items > li > img) with nothing establishing a height at
   any level, so the height:100% in the shared img rule just above
   this block resolves to auto (percentage heights need a non-auto
   ancestor height) - a no-op for this branch specifically. Result:
   slider rows rendered at their raw 1200x800 (3:2) aspect instead of
   matching the non-slider rows' 4:3 box, so row heights differed
   depending on which image mode each facility item used.
   The commented-out rule right above this block already tried an
   aspect-ratio fix but was disabled and scoped to 4 page types at
   once (Discovery/Meeting/Facilities/Gallery) - left commented since
   only Facilities was reported/requested here; re-enabling it for
   the other 3 pages is a separate follow-up, not done in this pass.
   aspect-ratio:4/3 here matches the non-slider branch's own existing
   1024x768 canvas ratio exactly, so it's a no-op for that branch
   (same box it already had) and only changes the slider branch.
   The three height:100% rules chain that box's height down through
   the slider markup (UIkit's own .uk-slider-items > * is flex:none,
   which under the ul's default flex align-items:stretch would size
   <li> automatically - set explicitly here anyway rather than
   relying on that default) so the height:100% !important in the
   shared img rule above finally resolves against a real height
   instead of auto, letting object-fit:cover fill/crop it exactly
   like the non-slider branch. No PHP/ACF changes needed - image
   markup and get_field() calls in content-facilities.php are
   untouched. */
.content-facilities-section .uk-cover-container{
    aspect-ratio: 4 / 3;
}
.content-facilities-section .uk-cover-container [uk-slider],
.content-facilities-section .uk-cover-container .uk-slider-items,
.content-facilities-section .uk-cover-container .uk-slider-items > li{
    height: 100%;
}

/*==============================================================
   CONTACT US (Address + Message Us) - dark theme
   Section class added to the wrapping <section> in
   template-parts/page/content-contact.php:28 (only the class
   attribute changed there - get_field()/do_shortcode() calls are
   untouched). .content-contact-section's own background is now set
   in the consolidated MEETING/OFFERS/DISCOVERY/CONTACT gradient rule
   near the top of this file, not here - this block only covers the
   Address/Message Us text/form contrast rules that sit on top of it.
================================================================*/
/* Location Maps keeps its original light background/colors - the
   reference dark theme only covers the Address + Message Us block,
   which sits above it in the same section. */
.content-contact-section .common-map{
    background-color: var(--background-primary);
}

/* Headings + address body copy */
.content-contact-section .common-contact-details,
.content-contact-section .common-contact-details h4,
.content-contact-section .common-form h4{
    color: #FFFFFF;
}
.content-contact-section .common-contact-details a{
    /* overrides main.css ".common-contact .common-contact-details a"
       (color: var(--primary-color)) - that blue link has no contrast
       once the section background becomes the same primary-color blue */
    color: #FFFFFF !important;
}
.content-contact-section .common-contact-details a:hover{
    color: rgba(255, 255, 255, 0.75) !important;
}

/* Form fields */
.content-contact-section .common-form .uk-input,
.content-contact-section .common-form .uk-select,
.content-contact-section .common-form .uk-textarea{
    background-color: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #FFFFFF;
}
/* Native dropdown popup renders on an opaque system background, so the
   closed-select white text needs a dark option color to stay legible */
.content-contact-section .common-form .uk-select option{
    color: #333333;
}
.content-contact-section .common-form .uk-input::placeholder,
.content-contact-section .common-form .uk-textarea::placeholder{
    color: rgba(255, 255, 255, 0.6);
}
.content-contact-section .common-form .uk-form-icon{
    color: #FFFFFF;
}

/* Send Message button - outline style instead of the solid fill from
   the shared .uk-button-primary/.uk-button-default rules above.
   wpcf7-submit/input[type=submit] included as a fallback since the
   button markup comes from the CF7 shortcode (ACF 'form_shortcode'
   field), not this template. */
.content-contact-section .common-form .uk-button-primary,
.content-contact-section .common-form .uk-button-default,
.content-contact-section .common-form .wpcf7-submit,
.content-contact-section .common-form input[type="submit"]{
    background-color: transparent;
    color: #FFFFFF;
    border: 1px solid #FFFFFF;
    font-size: 0.8333rem !important;
}
.content-contact-section .common-form .uk-button-primary:hover,
.content-contact-section .common-form .uk-button-default:hover,
.content-contact-section .common-form .wpcf7-submit:hover,
.content-contact-section .common-form input[type="submit"]:hover{
    background-color: rgba(255, 255, 255, 0.15);
    color: #FFFFFF;
}

/*==============================================================
   CONTACT US - tighten mobile vertical rhythm (~375-480px)
   main.css's Address/Message-Us/Map spacing (h4 padding-bottom:30px,
   form margin-top:30px, map margin-top:50px+30px) is flat across every
   screen size, and UIkit's own .uk-grid gutter has no reduction below
   its 1200px tier either - on a narrow phone these independent 30px+
   gaps stack up and read as loose/inconsistent. Scoped to
   .common-contact/.content-contact-section only, ≤480px only -
   desktop and every other section are untouched.
================================================================*/
@media (max-width: 480px) {
    /* Address/Message-Us stacked-column gap (UIkit's own grid-margin
       gutter, flat 30px at every width by default) */
    .common-contact .uk-grid > .uk-grid-margin{
        margin-top: 20px;
    }
    /* Address heading - was the same 30px on every screen size */
    .common-contact .common-contact-details h4{
        padding-bottom: 15px !important;
    }
    /* Hotel name (h5) + address paragraph inside the ACF rich-text -
       currently unstyled (falls back to browser default spacing) */
    .common-contact .common-contact-details h5{
        margin-top: 15px;
        margin-bottom: 8px;
    }
    .common-contact .common-contact-details p{
        margin-top: 8px;
    }
    /* Message Us heading - same treatment as Address h4 above */
    .common-contact .common-form h4{
        padding-bottom: 15px !important;
    }
    .common-contact .common-form form{
        margin-top: 20px;
    }
    /* Each form field wrapper - consistent floor spacing regardless of
       whatever margin the CF7-generated field markup brings */
    .common-contact .common-form .common-inline{
        margin-bottom: 15px;
    }
    .common-contact .common-form .common-inline:last-child{
        margin-bottom: 0;
    }
    /* Map - main.css's 50px + 30px (80px combined) was the same gap
       on every screen size */
    .common-contact .common-map{
        margin-top: 30px;
    }
    .common-contact .common-map iframe{
        margin-top: 15px;
    }
}

/*==============================================================
   HOME INSTAGRAM - hide the Instagram logo icon
   template-parts/part-home-instagram.php renders
   <span uk-icon="icon: instagram"> over each thumbnail (shared
   .common-lightbox/.uk-cover-container markup with content-gallery.php,
   which uses uk-icon="icon: image" instead) - targeting the exact
   icon attribute keeps this scoped to Instagram only, no PHP edit
   needed.
================================================================*/
.common-lightbox .uk-cover-container [uk-icon="icon: instagram"]{
    display: none;
}

/*==============================================================
   HOME INSTAGRAM - warm-tone filter on gallery thumbnails
   Scoped to .common-home-instagram-section (added to
   part-home-instagram.php's <section> tag - styling hook only, no
   PHP/ACF logic touched) rather than the shared .common-lightbox
   class directly, since content-gallery.php reuses that same class
   for its own image grid and should keep its normal color rendering.
   Values give a mild warm/natural tint (not overly yellow) - adjust
   the percentages here if a stronger or subtler tone is wanted.
================================================================*/
.common-home-instagram-section .common-lightbox img{
    filter: sepia(15%) saturate(1.15) brightness(1.02) contrast(1.02);
}


.wp-block-buttons .wp-block-button__link {
    width: 100%;
    color: var(--primary-color);
}

/*==============================================================
   NAV MENU - active/current page state
   part-header.php renders 2 wp_nav_menu() calls (desktop:
   #uk-menu-desktop/.uk-navbar-nav via WclSubmenuWrap; mobile
   offcanvas: #uk-mobile-menu/.uk-subnav via WclSubmenuWrapMobile,
   inc/site-setup.php). Both walkers build the <li> class attribute
   from $item->classes through the same 'nav_menu_css_class' filter
   core's own Walker_Nav_Menu uses, so WordPress's standard current-
   page classes (current-menu-item, current_page_item, plus the
   current-menu-ancestor/current_page_ancestor pair applied to a
   top-level item when a dropdown child page is the current one) are
   already present on the <li> - no PHP/walker change needed, only
   CSS hooks onto classes that already exist. Value is var(--primary-
   color), already #92A7BA (see GLOBAL COLOR VARIABLES block above),
   reused instead of a literal hex so this stays in sync with
   Contact/Footer/Accommodation/Offers if that variable ever changes.
   !important matches this file's established convention for rules
   that need to win reliably against main.css on the live site.
   Text color only, no border-bottom/underline - a border-bottom was
   tried initially and removed per follow-up request; active state is
   color-only by design now. */
.common-navbar .uk-navbar-nav > li.current-menu-item > a,
.common-navbar .uk-navbar-nav > li.current_page_item > a,
.common-navbar .uk-navbar-nav > li.current-menu-ancestor > a,
.common-navbar .uk-navbar-nav > li.current_page_ancestor > a,
.common-navbar-offcanvas .uk-subnav > li.current-menu-item > a,
.common-navbar-offcanvas .uk-subnav > li.current_page_item > a,
.common-navbar-offcanvas .uk-subnav > li.current-menu-ancestor > a,
.common-navbar-offcanvas .uk-subnav > li.current_page_ancestor > a{
    color: var(--primary-color) !important;
}

/*==============================================================
   NAV MENU - mobile/offcanvas font size
   main.css:198-205 sets font-size:0.7rem across five unrelated
   offcanvas elements in one shared rule (uk-close button, the top-
   level nav links, social icon links, dropdown/submenu nav links,
   and the "Follow Us" label) - too small to read as a nav item per
   this request, but only the actual nav-item links should grow, not
   the close button/social icons/label, so font-size is overridden
   here on just those two selectors rather than editing the shared
   main.css rule (which would also resize the untouched elements).
   Desktop nav (.common-navbar .uk-navbar-nav > li > a, main.css:112-
   118, font-size:0.75rem) is a separate rule/selector and is not
   touched. Root font-size is 0.9rem (14.4px, main.css html rule) not
   the browser default 16px. An initial pass set this to 1rem
   (14.4px); a follow-up request settled on 0.75rem (10.8px) as the
   final size instead - still a step up from the original 0.7rem
   (10.08px), and now matches the desktop nav's own 0.75rem for
   consistency between breakpoints. */
.common-navbar-offcanvas .uk-offcanvas-bar .uk-subnav > * > :first-child,
.common-navbar-offcanvas .uk-dropdown-nav > li > a{
    font-size: 0.75rem !important;
}

/*==============================================================
   GALLERY FILTER TABS (ALL / STAY / FACILITIES / MEETING & EVENT)
   content-gallery.php:28-35 - <div class="... common-filter-lightbox">
   wraps <ul class="uk-subnav uk-subnav-pill">. Both uk-subnav classes
   ship their own low-contrast defaults straight from uikit.css
   (:5616 .uk-subnav > * > :first-child and :5670 .uk-subnav-pill >
   * > :first-child, both color:#999) - fine on that library's default
   white/light backgrounds, but this section sits on the
   .content-gallery-section #92A7BA band (see DISCOVERY/MEETING/
   GALLERY/FACILITIES block above), where #999 nearly disappears.
   Scoped to .common-filter-lightbox (the wrapping <div>, not the
   bare .uk-subnav/.uk-subnav-pill classes) since those two bare
   classes aren't reused by any other template - confirmed via grep -
   so this can't leak onto another filter/nav component. It also
   intentionally does NOT touch .common-navbar-offcanvas's own
   .uk-subnav (the mobile main menu, styled separately above), which
   already wins on selector specificity/scoping regardless.
   Active tab: main.css:895 (.common-filter-lightbox .uk-subnav-pill
   > .uk-active > a) already sets background-color:var(--secondary-
   color) (#768da2); uikit's own .uk-active rule supplies color:#fff
   on top of that (main.css doesn't override text color there), so
   the active pill is already white-on-blue with solid contrast - not
   a white pill/dark text as it may have looked at a glance. Left
   untouched, no change needed.
   Hover: uikit's own .uk-subnav-pill > * > a:hover (background:
   #f8f8f8, color:#666) is the same low-contrast pairing as the
   inactive default, so it's overridden here too with a light
   translucent-white background instead of an opaque light-gray one,
   which reads correctly against the blue-gray section on both
   inactive tabs and (if hovered) the active one. */
.common-filter-lightbox .uk-subnav > * > :first-child,
.common-filter-lightbox .uk-subnav-pill > * > :first-child{
    color: #FFFFFF !important;
}
.common-filter-lightbox .uk-subnav > * > a:hover,
.common-filter-lightbox .uk-subnav-pill > * > a:hover{
    color: #FFFFFF !important;
    background-color: rgba(255, 255, 255, 0.2);
}
/* Touch-target size (responsive audit) - uikit's own pill padding
   (5px 10px, uikit.css:5670-5674) renders at roughly 26-28px tall,
   under the ~44px minimum recommended tap target for touch devices.
   .uk-subnav already wraps (flex-wrap:wrap, uikit.css:5582-5585) so
   this doesn't risk overflow - confirmed no wrap/overflow issue at
   375px in the responsive audit. Scoped to <=768px (this theme's
   existing tablet breakpoint, reused elsewhere e.g. the FAQ block
   above) rather than changing desktop, where these tabs are
   mouse-driven and the tighter pill size matches the rest of the
   desktop UI; not touched. Only the top-level pill (.uk-subnav-pill,
   ALL/STAY/FACILITIES/MEETING & EVENT) needs this - the plain
   .uk-subnav padding rule above is left alone since it isn't used
   for these filter tabs (content-gallery.php's <ul> carries both
   classes, but .uk-subnav-pill's own :first-child rule is the one
   that actually renders the pill's padding). */
@media (max-width: 768px){
    .common-filter-lightbox .uk-subnav-pill > * > :first-child{
        padding: 14px 16px !important;
    }
}

.follow {
    cursor: unset;
}

.wpcf7 form.sent .wpcf7-response-output {
    color: #fff;
}

/* Contact-form icons are absolutely positioned. Give each field wrapper
   its own positioning context so the icons do not stack in the modal corner. */
.meeting-inquiry-modal .common-inline{
    position: relative;
    display: block;
    max-width: 100%;
}

/* Meeting inquiry modal uses a white background, so the site's global
   white CF7 success text becomes invisible. Present all AJAX responses
   as compact, readable alerts and hide the empty response container. */
.meeting-inquiry-modal .wpcf7 form .wpcf7-response-output{
    box-sizing: border-box;
    margin: 20px 0 0;
    padding: 12px 16px;
    border: 0;
    border-left: 4px solid #768da2;
    background-color: #f3f6f8;
    color: #33404c;
    font-size: 0.9rem;
    line-height: 1.5;
    text-align: left;
}
.meeting-inquiry-modal .wpcf7 form .wpcf7-response-output:empty{
    display: none;
}
.meeting-inquiry-modal .wpcf7 form.sent .wpcf7-response-output{
    border-left-color: #46b450;
    background-color: #eef8f0;
    color: #275f33;
}
.meeting-inquiry-modal .wpcf7 form.invalid .wpcf7-response-output,
.meeting-inquiry-modal .wpcf7 form.unaccepted .wpcf7-response-output,
.meeting-inquiry-modal .wpcf7 form.payment-required .wpcf7-response-output,
.meeting-inquiry-modal .wpcf7 form.spam .wpcf7-response-output,
.meeting-inquiry-modal .wpcf7 form.failed .wpcf7-response-output,
.meeting-inquiry-modal .wpcf7 form.aborted .wpcf7-response-output{
    border-left-color: #d63638;
    background-color: #fdf1f1;
    color: #842029;
}
.meeting-inquiry-modal .btn-wrapper{
    margin-top: 20px;
}
.meeting-inquiry-modal .btn-wrapper p{
    margin: 0;
}