/* st-mobile.css - Surfers Tropique: the DESIGNED tablet and phone layer (Stage 4, skill Rule 2). Loads LAST, after st-design.css.
   Nothing here applies from 1250px up: every rule sits inside a max-width 1249px (or narrower) media query, so the 1:1 copy of live
   (st-design.css) is untouched there. Started from the starter pack's mobile pattern and the family A sibling site's phone layer,
   rewritten for THIS site's markup: white header with the paint-brush phone, the hero photo with the yellow
   circle booking box, the green home band, the blue room cards, the orange paint-brush footer with the round map.
   WIDTH BANDS
     1250 and up    live's exact look (st-design.css; nothing here).
     1170 to 1249   live's layout, fixed rows fitted, plus the AA layer.
     768 to 1169    a reflow: the menu behind a button, the booking block under the photo, columns stacked, fluid galleries.
     below 768      the phone design: compact header, stacked booking block, one column, 2-up galleries.
   AA LAYER (below 1250, every state: rest, hover, focus, active): text 14px or more, inputs 16px, tap targets 24px or more.
     Live colour (ratio)                                  below 1250 (ratio)
     white on the home and page green #02b229 (2.8)      white on #067a22 (5.5)
     white on live's blue #0086cc (4.0), links #0086cc    white on #0070aa (5.4); blue links on white #0070aa (5.4)
     white on yellow #f7c101 buttons (1.7)               dark #1d2a33 on yellow #f7c101 (8.8); hover white on #0070aa
     white on the orange footer photo (3.2)              the same brush darkened (build/fonts/footer-bg-dark.png): white on at worst #7c5000 (7+)
     menu Book Now #f7c101 on white (1.7)                #8a5a00 on white (5.9)
     grey details #888 on white (3.5)                    #5c5c5c (6.5) */

/* =================== below 1250: the AA layer =================== */
@media (max-width: 1249px) {
  body.st-site #page-container :is(.panel, .panel li, .panel .summary, .panel .date, .panel .details, .panel li em, .entry .details, .entry .details a,
    a.more, .paging, .paging a, .paging em, span.options, span.options a, span.result-count, div.top, div.top a, .smalltext, .smalltext a,
    #footer, #footer p, #footer li, #footer a, .copyright, .copyright p, .copyright li, .copyright a, .footer-tags, .footer-tags p, .footer-tags a,
    .footermenu, .footermenu li, .footermenu a, .special p, .special strong, .special .text, .form td em, blockquote .details, p.ils-required-note, p.ils-required-note em, .bookingform em) {
    font-size: 14px; line-height: 1.5; }
  body.st-site #page-container :is(.special p, .special strong) { font-size: 15px !important; line-height: 22px !important; }
  body.st-site #page-container .footermenu a { font-size: 14px !important; }
  body.st-site #page-container .panel .text a:empty { display: none; }
  body.st-site #page-container .panel .text a { font-size: 14px !important; }
  body.st-site #page-container .content :is([style*="font-size: 13.6px"], [style*="font-size:13.6px"], [style*="font-size: 12px"], [style*="font-size:12px"]) { font-size: 14px !important; line-height: 1.5 !important; }
  body.st-site #page-container :is(input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="image"]), select, textarea) { font-size: 16px; }
  /* tap targets: vertical padding on list and running-text links (no change to how a line wraps) */
  body.st-site #page-container :is(#footer a:not(.socialmedia a), .panel a:not(.button), .copyright li a, .footer-tags a, .details a, a.more:not(.button), .content p a:not(.button), .content td a:not(.button), .content li a:not(.button), blockquote a) {
    padding-top: 5px; padding-bottom: 5px; }
  body.st-site #page-container :is(.paging a, .paging em, span.options a) { display: inline-block; min-width: 24px; min-height: 24px; line-height: 24px; box-sizing: border-box; text-align: center; }
  body.st-site #page-container div.top a { padding-top: 2px; padding-bottom: 2px; line-height: 20px; }
  body.st-site #page-container .list .entry h2 > a { padding-top: 2px; padding-bottom: 2px; }
  body.st-site #page-container .form.searchpage input[type="image"] { box-sizing: content-box; padding: 8px; font-size: 16px; }
  body.st-site #page-container .socialmedia a { min-width: 30px; min-height: 30px; }
  body.st-site #page-container #header .logo a { display: block; width: fit-content; }
  body.st-site #page-container .gallery.room a.gallery-item { display: inline-block; vertical-align: top; }

  /* a post's "Comments" heading with no form under it (comments are switched off, Stage 3 DELIBERATE) would sit alone: hidden below 1250 (it stays in the page; live's heading shows from 1250 up) */
  body.st-site #page-container a#commentlist + h2 { display: none; }
  /* ---- colours, every state ---- */
  /* the paint-brush edges drawn in live's bright green and blue: the same strokes in the AA greens and blues, so no seam shows against the solid AA grounds */
  body.st-site #page-container .featureoverlay-fade { background-image: url(/wp-content/uploads/ilaunch/theme/feature-fade-dark.png); }
  body.st-site:where(.st-home) #page-container .featureoverlay-fade { background-image: url(/wp-content/uploads/ilaunch/theme/feature-fade-home-dark.png); }
  body.st-site:where(.st-home) #page-container .content .contentbg::before { background-image: url(/wp-content/uploads/ilaunch/theme/homebg-topbg-dark.png); }
  body.st-site:where(.st-home) #page-container .content .contentbg::after { background-image: url(/wp-content/uploads/ilaunch/theme/homebg-rightbg-dark.png); }
  body.st-site #page-container .list .entry .images::after { background-image: url(/wp-content/uploads/ilaunch/theme/roombg-dark.png); }
  /* the booking circle (live's yellow with white text, 1.7:1): dark text below 1250; the home panels' blue image and the faint-people green image take a solid AA ground */
  body.st-site #page-container #booking h3 { color: #1d2a33; }
  body.st-site #page-container .bookingform em { color: #1d2a33; }
  body.st-site #page-container .special .text { background-image: url(/wp-content/uploads/ilaunch/theme/special-text-bg-dark.png); }
  body.st-site #page-container .bottompanels .right .bookingbanner { background: #0b4a73; }
  body.st-site #page-container .bottompanels .right .leftbannerimage .faq p a:is(:link, :visited, :active, :hover), body.st-site #page-container .bottompanels .right .leftbannerimage .faq p a strong { color: #1d2a33; }
  body.st-site:where(.st-home) #page-container .content .contentbg-right { background-image: none; background-color: #067a22; }
  body.st-site #page-container a:is(:link, :visited, :active, :hover) { color: #0070aa; }
  body.st-site #page-container :is(.content:not(.alt), .special, .bookingbanner, .faq) a:is(:link, :visited, :active, :hover):where(:not(.button):not(.more)) { color: #ffffff; }
  body.st-site #page-container a.link:is(:link, :visited, :active, :hover) { color: #ffffff; }
  body.st-site #page-container .content.alt a:is(:link, :visited, :active, :hover):where(:not(.button):not(.more):not(.top):not(.paging a)) { color: #0070aa; }
  html body.st-site #page-container .content.alt .list .entry h2 > a:is(:link, :visited, :active, :hover):not(.more):not(.button):not(.top) { color: #000000; }
  html body.st-site #page-container .content.alt .list.rooms .entry :is(a, h2 > a):is(:link, :visited, :active, :hover):not(.button) { color: #ffffff; }
  /* buttons: live's yellow with a dark label (white was 1.7:1); hover, focus, active: white on the blue, the live inversion */
  body.st-site #page-container :is(a.button, input.button:not([type="image"])),
  body.st-site #page-container :is(a.button, input.button:not([type="image"])):is(:link, :visited, :active) {
    background-color: #f7c101; color: #1d2a33; text-shadow: none; text-decoration: none; }
  body.st-site #page-container :is(a.button, input.button:not([type="image"])):is(:hover, :focus, :focus-visible, :active) { background-color: #0070aa; color: #ffffff; }
  body.st-site #page-container .bookingbutton input.button:not([type="image"]), body.st-site #page-container .bookingbutton input.button:not([type="image"]):is(:link, :visited, :active) { background-color: #0b4a73; color: #ffffff; }
  body.st-site #page-container .bookingbutton input.button:not([type="image"]):is(:hover, :focus, :focus-visible, :active) { background-color: #1d2a33; color: #ffffff; }
  body.st-site #page-container input.button[type="image"]:is(*, :hover, :focus, :focus-visible, :active) { color: #1d2a33; text-shadow: none; }
  /* the Divi contact and review form button, drawn as live's yellow button */
  body.st-site #page-container .et_pb_section .st-contact-form.et_pb_contact_form_container.et_pb_module .et_pb_button,
  body.st-site #page-container .et_pb_section .st-contact-form.et_pb_contact_form_container.et_pb_module .et_pb_button:is(:link, :visited, :active) {
    background: #f7c101 !important; color: #1d2a33 !important; text-shadow: none !important; }
  body.st-site #page-container .et_pb_section .st-contact-form.et_pb_contact_form_container.et_pb_module .et_pb_button:is(:hover, :focus, :focus-visible, :active) { background: #0070aa !important; color: #ffffff !important; }
  /* keyboard focus: dark ring + white halo (Divi removes every ring) */
  body.st-site #page-container :is(a, input, select, textarea, button):focus-visible,
  body.st-site :is(#datepicker_div, #fancybox-wrap) :is(a, select):focus-visible {
    outline: 3px solid #111111 !important; outline-offset: 2px; box-shadow: 0 0 0 2px #ffffff; }
  body.st-site #page-container :is(.panel.blog li > a, .entry > a.gallery-item, .gallery a.gallery-item):focus-visible > img { outline: 3px solid #111111; outline-offset: 2px; box-shadow: 0 0 0 2px #ffffff; }
  /* headings and the white panels */
  body.st-site #page-container .panel h3 { color: #444444; }
  body.st-site #page-container .panel .title a:is(:link, :visited, :active) { color: #0070aa; }
  body.st-site #page-container .panel .title a:is(:hover, :focus) { color: #444444; }
  body.st-site #page-container :is(.panel .date, .panel .details, .entry .details, .panel li em, .smalltext) { color: #5c5c5c; }
  body.st-site #page-container :is(.panel .details a, .entry .details a, .smalltext a):is(:link, :visited, :active) { color: #5c5c5c; }
  body.st-site #page-container :is(.panel .details a, .entry .details a, .smalltext a):is(:hover, :focus) { color: #1d2a33; }
  /* "Read More": live's yellow on white (1.7:1) */
  body.st-site #page-container a.more:not(.button):is(:link, :visited, :active, :hover, :focus) { color: #8a5a00 !important; }
  body.st-site #page-container a.more:not(.button):is(:hover, :focus) { color: #1d2a33 !important; }
  body.st-site #page-container .paging { color: #5c5c5c; }
  body.st-site #page-container .paging a:is(:link, :visited, :active) { color: #444444; background-color: #ededed; }
  body.st-site #page-container :is(.paging a:hover, .paging a:focus, .paging em, .paging em a:is(:link, :visited)) { color: #ffffff; background-color: #5c5c5c; }
  html body.st-site #page-container div.top a:is(:link, :visited, :active):not(.more) { color: #5c5c5c !important; }
  html body.st-site #page-container div.top a:is(:hover, :focus):not(.more) { color: #ffffff !important; background: #5c5c5c; }
  /* the page green and the blue panels */
  body.st-site #page-container .content { background-color: #067a22; background-image: none; }
  body.st-site #page-container .content.alt { background-color: #ffffff; }
  body.st-site #page-container .list.rooms .entry { background: #0070aa; }
  body.st-site #page-container em.highlight { background: #0070aa; }
  body.st-site #page-container .content :is(blockquote .highlight, blockquote .details) { color: #ffffff; }
  /* menu */
  body.st-site #page-container #menu li.active > a:is(:link, :visited, :active, :hover), body.st-site #page-container #menu li:hover > a:is(:link, :visited, :active, :hover) { color: #0070aa; }
  body.st-site #page-container #menu li.alt a:is(:link, :visited, :active, :hover) { color: #8a5a00; }
  body.st-site #page-container #menu li ul { background: #0070aa; }
  body.st-site #page-container #menu li ul a:is(:link, :visited, :active), body.st-site #page-container #menu li:hover ul a:is(:link, :visited, :active) { color: #ffffff; }
  body.st-site #page-container #menu li li:is(:hover, .active), body.st-site #page-container #menu li li:is(:hover, .active) a:is(:link, :visited, :active, :hover) { background: #ffffff; color: #0070aa; }
  /* header phone: white on the blue brush */
  body.st-site #page-container #header .phone, body.st-site #page-container #header .phone a.tel-link { color: #ffffff; }
  /* booking block: the select's options stay dark on white; the date field and the select read dark on white */
  body.st-site #page-container .bookingform select option { color: #1d2a33; background: #ffffff; }
  body.st-site #page-container .bookingform span select { color: #1d2a33; }
  /* the home special-offer links on blue */
  body.st-site #page-container .special p:is(:nth-of-type(2), :nth-of-type(3)) a, body.st-site #page-container .special p:is(:nth-of-type(2), :nth-of-type(3)) a strong { color: #ffffff; }
  /* footer: the same paint-brush photo, darkened, so white text is AA on any pixel of it; hover yellow is AA on it */
  body.st-site #page-container #footer { background-image: url(/wp-content/uploads/ilaunch/theme/footer-bg-dark.png); background-color: #644000; }
  body.st-site #page-container #footer a:is(:link, :visited, :active) { color: #ffffff; }
  body.st-site #page-container #footer a:is(:hover, :focus) { color: #ffd34d; }
  body.st-site #page-container #footer .vcard a.tel-link[href^="tel:"]:is(:link, :visited, :hover, :active, :focus) { color: #ffffff !important; }
  /* in-text links (WCAG 1.4.1): differ from the text around them by more than colour */
  body.st-site #page-container :is(.content, .special, .panel) :is(p, li, td, dd, blockquote, .details, .summary, .text, .smalltext) a[href]:not(.button):not(.more):not(.top):is(:link, :visited, :hover, :active, :focus) {
    text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
  body.st-site #page-container :is(.content, .special) a.tel-link[href^="tel:"]:is(:link, :visited, :hover, :active, :focus) { text-decoration: underline !important; text-decoration-thickness: 1px !important; text-underline-offset: 2px; }
  body.st-site #page-container :is(.content, .special, .panel) :is(h1, h2, h3, h4, .title, .paging, .options) a[href]:is(:link, :visited, :hover, :active, :focus),
  body.st-site #page-container :is(.content, .special) a[href]:has(> img):is(:link, :visited, :hover, :active, :focus) { text-decoration: none; }
  body.st-site #page-container .map-wrapper .map-info, body.st-site #page-container .map-wrapper .map-info-window, body.st-site #page-container .map-wrapper .map-info-window strong { font-size: 14px; line-height: 20px; color: #1d2a33; }
  body.st-site #page-container .map-wrapper .map-info-window a[href]:is(:link, :visited, :active, :hover, :focus) { display: inline-block; min-height: 24px; padding: 4px 0; line-height: 16px; box-sizing: border-box; color: #0070aa; }
  body.st-site #page-container #footer .map-wrapper .map-info-window a[href]:is(:link, :visited, :active, :hover, :focus) { color: #0070aa; text-decoration: underline; }
  /* live prints these in the white page text colour on a white list (invisible on live too): readable below 1250 */
  body.st-site #page-container :is(.content.alt, .entry, .list) :is(span.result-count, span.result-count strong, a.link:is(:link, :visited, :active, :hover)) { color: #444444; }
  body.st-site #page-container .content :is(h1, h2, h3, h4, p, li, td, blockquote) { overflow-wrap: break-word; }
  body.st-site #page-container :is(.entry, .content, .panel, .list) a { overflow-wrap: anywhere; }
  body.st-site > img[src*="doubleclick.net"] { position: absolute; top: 0; left: 0; }
  /* layout shift: reserve the logo box; the slider list keeps a 14px browser margin until its script zeroes it */
  body.st-site #page-container #header .logo img { width: 201px; height: auto; aspect-ratio: 201 / 216; }
  body.st-site #page-container #featuremain { margin: 0; overflow: hidden; }
  body.st-site #page-container .fb-like, body.st-site #page-container .fb-like > span, body.st-site #page-container .fb-like iframe { max-width: 100% !important; }

  /* ---- the booking calendar (live's jQuery datepicker, appended to <body>): a roomy, readable month below 1250 ---- */
  body.st-site #datepicker_div { width: min(340px, calc(100vw - 24px)) !important; box-sizing: border-box; border: 0; background: #dddddd; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35); }
  body.st-site #datepicker_div .datepicker_oneMonth { float: none; width: 100%; }
  body.st-site #datepicker_div :is(.datepicker_control, .datepicker_links, .datepicker_header, .datepicker) { box-sizing: border-box; clear: both; float: none; width: 100%; }
  body.st-site #datepicker_div .datepicker_control { display: flex; padding: 0; background: #0b4a73; }
  body.st-site #datepicker_div .datepicker_links { display: flex; padding: 0; background: #000000; }
  body.st-site #datepicker_div :is(.datepicker_control, .datepicker_links) a { display: block; float: none; flex: 1 1 0; width: auto; box-sizing: border-box; padding: 0 12px; line-height: 44px; height: 44px; min-height: 44px; font-size: 14px; letter-spacing: 1px; color: #ffffff; text-align: left; }
  body.st-site #datepicker_div :is(.datepicker_control, .datepicker_links) a.datepicker_current { text-align: center; }
  body.st-site #datepicker_div :is(.datepicker_control, .datepicker_links) a:is(.datepicker_close, .datepicker_next) { text-align: right; }
  body.st-site #datepicker_div :is(.datepicker_control, .datepicker_links) a:is(:hover, :focus, :active) { background: #ffffff; color: #0b4a73; text-decoration: none; }
  body.st-site #datepicker_div .datepicker_header { display: flex; justify-content: center; gap: 10px; height: auto; padding: 8px; background: #193e93; }
  body.st-site #datepicker_div .datepicker_header select { height: 40px; margin: 0; padding: 0 8px; font-size: 16px; color: #ffffff; background: #193e93; border: 1px solid rgba(255, 255, 255, 0.5); }
  body.st-site #datepicker_div .datepicker_header select option { color: #1d2a33; background: #ffffff; }
  body.st-site #datepicker_div .datepicker { table-layout: fixed; border-collapse: separate; border-spacing: 0; color: #000000; background: #cccccc; }
  body.st-site #datepicker_div .datepicker :is(td, th) { box-sizing: border-box; height: 44px; padding: 0; font-family: 'BarlowGeoRegular', Arial, Helvetica, sans-serif; font-size: 16px; line-height: 42px; color: #000000; }
  body.st-site #datepicker_div .datepicker_titleRow td { height: 36px; line-height: 34px; font-size: 14px; color: #ffffff; background: #5c5c5c; }
  body.st-site #datepicker_div td.datepicker_daysCell a { display: block; width: 100%; height: 42px; line-height: 42px; color: #000000; text-decoration: none; }
  body.st-site #datepicker_div td.datepicker_daysCell a:is(:hover, :focus) { background: #ffffff; outline-offset: -3px; }
  body.st-site #datepicker_div td.datepicker_unselectable, body.st-site #datepicker_div td.datepicker_unselectable a { color: #595959; }
}

/* =================== 1170 to 1249: live's layout with the fixed rows fitted =================== */
@media (min-width: 1170px) and (max-width: 1249px) {
  body.st-site #page-container #menu li.ils-sub-open > ul { display: block; }
  body.st-site #page-container #menu li.ils-sub-open { z-index: 2; }
  body.st-site #page-container .ils-menu-toggle { display: none; }
}

/* =================== below 1170: the reflow (tablet and phone) =================== */
@media (max-width: 1169px) {
  body.st-site #page-container :is(#container-outer-bg, #container-outer, #header, #feature, .content, .panel.blog, #footer, .bottompanels, .map-shadow, .topbanner) { min-width: 0; }
  body.st-site #page-container .container { width: auto; max-width: 1170px; padding-left: 24px; padding-right: 24px; }
  body.st-site #page-container .container > :is(.left, .right) { float: none; width: auto; }

  /* ---- header: logo, phone, menu button on one row; the menu opens below as a panel ---- */
  body.st-site #page-container #header { height: auto; padding: 0; position: relative; z-index: 60; }
  body.st-site #page-container #header .container { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: "logo . phone toggle" "menu menu menu menu";
    align-items: center; column-gap: 14px; padding-top: 10px; padding-bottom: 10px; position: relative; }
  body.st-site #page-container #header .logo { grid-area: logo; float: none; }
  body.st-site #page-container #header .logo img { width: 96px; }
  body.st-site #page-container #header .phone-bg { grid-area: phone; position: static; width: auto; height: auto; margin: 0; background: none; }
  body.st-site #page-container #header .phone { float: none; clear: none; display: block; margin: 0; padding: 4px 16px 4px 44px; border-radius: 24px; background: #0070aa url(/wp-content/uploads/ilaunch/skin/images/icon-phone.png) no-repeat 14px center; background-size: auto 22px;
    font-size: 22px; line-height: 34px; white-space: nowrap; }
  body.st-site #page-container #header .phone a.tel-link { display: inline-block; }
  body.st-site #page-container #header .socialmedia { display: none; }
  body.st-site #page-container .ils-menu-toggle { grid-area: toggle; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 46px; min-width: 46px; margin: 0; padding: 0 16px; border: 0; border-radius: 4px;
    background: #0070aa; color: #ffffff; font: 16px/46px 'BarlowGeoMedium', Arial, Helvetica, sans-serif; text-transform: uppercase; letter-spacing: 1px; cursor: pointer; }
  body.st-site #page-container .ils-menu-toggle .ils-menu-icon, body.st-site #page-container .ils-menu-toggle .ils-menu-icon::before, body.st-site #page-container .ils-menu-toggle .ils-menu-icon::after {
    display: block; position: relative; width: 20px; height: 2px; background: #ffffff; content: ""; }
  body.st-site #page-container .ils-menu-toggle .ils-menu-icon::before { position: absolute; top: -6px; }
  body.st-site #page-container .ils-menu-toggle .ils-menu-icon::after { position: absolute; top: 6px; }
  body.st-site #page-container .ils-menu-toggle::after { content: "Menu"; }
  body.st-site #page-container .ils-menu-toggle:is(:hover, :focus-visible), body.st-site #page-container #header.ils-menu-open .ils-menu-toggle { background: #0b4a73; color: #ffffff; }
  body.st-site #page-container #menu { grid-area: menu; display: none; float: none; position: static; margin: 12px -24px 0; padding: 0; font-size: 18px; text-align: left; background: #0070aa; z-index: auto; }
  body.st-site #page-container #header.ils-menu-open #menu { display: block; }
  body.st-site #page-container #menu ul { display: block; width: auto; }
  body.st-site #page-container #menu li { display: block; position: static; margin: 0; padding: 0; border: 0; border-top: 1px solid rgba(255, 255, 255, 0.25); }
  body.st-site #page-container #menu li:first-of-type { border-top: 0; }
  body.st-site #page-container #menu li a:is(:link, :visited, :active, :hover), body.st-site #page-container #menu li:hover > a:is(:link, :visited, :active, :hover), body.st-site #page-container #menu li.active > a:is(:link, :visited, :active, :hover) {
    display: block; padding: 0 24px; line-height: 52px; font-size: 18px; color: #ffffff; background: none; border-radius: 0; }
  body.st-site #page-container #menu li a:focus-visible { outline-offset: -4px; }
  body.st-site #page-container #menu li > a:is(:hover, :focus) { background: #0b4a73; color: #ffffff; }
  body.st-site #page-container #menu li.active > a:is(:link, :visited, :active, :hover) { background: #0b4a73; color: #ffffff; }
  body.st-site #page-container #menu li ul { position: static; display: block; width: auto; padding: 0; margin: 0; background: none; }
  body.st-site #page-container #menu li li { border-top: 1px solid rgba(255, 255, 255, 0.15); }
  body.st-site #page-container #menu li li:is(:hover, .active) { background: none; }
  body.st-site #page-container #menu li ul a:is(:link, :visited, :active, :hover), body.st-site #page-container #menu li:hover ul a:is(:link, :visited, :active, :hover) { padding: 0 24px 0 44px; line-height: 48px; font-size: 16px; color: #ffffff; background: none; }
  body.st-site #page-container #menu li ul a:is(:hover, :focus), body.st-site #page-container #menu li li.active > a:is(:link, :visited, :active, :hover) { background: #0b4a73; color: #ffffff; }
  body.st-site #page-container #menu li.alt > a:is(:link, :visited, :active, :hover) { background: #f7c101; color: #1d2a33; }
  body.st-site #page-container #menu li.alt > a:is(:hover, :focus) { background: #ffd34d; color: #1d2a33; }

  /* ---- hero: the photo, then the booking block under it in the flow ---- */
  body.st-site #page-container #feature, body.st-site:where(.st-home) #page-container #feature { position: relative; height: auto; }
  body.st-site #page-container .featureimage, body.st-site #page-container .featuremain, body.st-site:where(.st-home) #page-container .featuremain { height: clamp(170px, 46vw, 440px); overflow: hidden; }
  body.st-site #page-container .featuremain li, body.st-site #page-container .featuremain li img { height: clamp(170px, 46vw, 440px) !important; }
  body.st-site #page-container .featuremain li img { width: 100% !important; object-fit: cover; }
  body.st-site #page-container .featureoverlay-fade { display: none; }
  body.st-site #page-container #booking, body.st-site:where(.st-home) #page-container #booking { position: relative; top: auto; right: auto; bottom: auto; left: auto; width: auto; height: auto; margin: 0; padding: 18px 24px 20px;
    background: #f7c101; z-index: 5; }
  body.st-site #page-container #booking h3 { margin: 0; padding: 0 0 8px; font-size: 28px; line-height: 34px; color: #1d2a33; }
  body.st-site #page-container .bookingform { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px 14px; max-width: 760px; margin: 0 auto; align-items: end; }
  body.st-site #page-container .bookingform > .clearleft { display: none; }
  body.st-site #page-container .bookingform span.check-in, body.st-site #page-container .bookingform span.duration { display: block; float: none; width: auto; margin: 0; line-height: 46px; }
  body.st-site #page-container .bookingform em { display: block; padding: 0 0 2px; font-size: 14px; line-height: 20px; color: #1d2a33; background: none; text-align: left; font-family: 'Raleway', Arial, Helvetica, sans-serif; }
  body.st-site #page-container .bookingform .datepicker_wrap { display: flex; align-items: center; width: 100%; float: none; background: #ffffff; }
  body.st-site #page-container .bookingform span input { float: none !important; flex: 1 1 auto; width: auto; min-width: 0; height: 46px; padding: 0 0 0 12px; box-sizing: border-box; background: transparent; }
  body.st-site #page-container .bookingform .datepicker_wrap > img { flex: 0 0 auto; margin: 0 10px 0 4px; }
  body.st-site #page-container .bookingform span select { display: block; width: 100%; height: 46px; padding: 0 36px 0 12px; box-sizing: border-box; background: #ffffff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231d2a33' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 12px center; }
  body.st-site #page-container .bookingbutton { grid-column: 1 / -1; float: none; width: auto; height: auto; margin: 4px 0 0; }
  body.st-site #page-container .bookingbutton .button { display: block; width: 100%; height: 48px; margin: 0; padding: 0 20px; line-height: 48px; box-sizing: border-box; }

  /* ---- home: the green band (photo, then the text on solid green) ---- */
  body.st-site:where(.st-home) #page-container .content { display: flex; flex-direction: column; height: auto; padding: 0; background-color: #067a22; }
  body.st-site:where(.st-home) #page-container .content .contentbg { position: relative; order: 1; width: 100%; height: clamp(220px, 50vw, 420px); min-width: 0; bottom: auto; }
  body.st-site:where(.st-home) #page-container .content .contentbg::before, body.st-site:where(.st-home) #page-container .content .contentbg::after { display: none; }
  body.st-site:where(.st-home) #page-container .content .contentbg-right { display: none; }
  body.st-site:where(.st-home) #page-container .content > .container { order: 2; padding-top: 24px; padding-bottom: 28px; }
  body.st-site:where(.st-home) #page-container .content .right { float: none; width: auto; }
  body.st-site:where(.st-home) #page-container .content h1 { padding-top: 0; }
  body.st-site:where(.st-home) #page-container .content > .clearboth { display: none; }
  /* home bottom panels: special offer, the benefit list and the FAQ banner, stacked */
  body.st-site:where(.st-home) #page-container .bottompanels { display: block; float: none; height: auto; width: auto; }
  body.st-site:where(.st-home) #page-container .bottompanels :is(.left, .right) { position: static; width: auto; height: auto; float: none; }
  body.st-site:where(.st-home) #page-container .special { float: none; height: auto; background-size: cover; display: flex; flex-direction: column; justify-content: flex-end; min-height: 0; }
  body.st-site:where(.st-home) #page-container .special::before { content: ""; display: block; padding-top: 52%; }
  body.st-site:where(.st-home) #page-container .special .text { position: static; width: auto; height: auto; padding: 24px; background: #0070aa; overflow: visible; }
  body.st-site:where(.st-home) #page-container .special .text-wrapper { position: static; width: auto; max-width: 460px; margin: 0 auto; }
  body.st-site:where(.st-home) #page-container .special h3 { font-size: 34px; line-height: 38px; }
  body.st-site:where(.st-home) #page-container .special h4, body.st-site:where(.st-home) #page-container .special h4 a, body.st-site:where(.st-home) #page-container .special h4 span { font-size: 24px; line-height: 30px; color: #ffffff !important; }
  body.st-site:where(.st-home) #page-container .special h4 span { font-size: 17px !important; }
  body.st-site:where(.st-home) #page-container .special .button { display: inline-block; float: none; margin-top: 4px; }
  body.st-site:where(.st-home) #page-container .special p:last-of-type { float: none; margin: 14px 0 0 !important; }
  body.st-site:where(.st-home) #page-container .bottompanels .right .bookingbanner { position: static; float: none; width: auto; background: #0b4a73; padding: 18px 24px; }
  body.st-site:where(.st-home) #page-container .bottompanels .right .bookingbanner li { font-size: 20px; line-height: 30px; }
  body.st-site:where(.st-home) #page-container .bottompanels .right .leftbannerimage { position: relative; height: 340px; }
  body.st-site:where(.st-home) #page-container .bottompanels .right .leftbannerimage .faq { top: 12px; bottom: 12px; height: auto; background-size: auto 100%; background-position: center; }
  body.st-site:where(.st-home) #page-container .bottompanels .right .leftbannerimage .faq p { padding-top: 0; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
  body.st-site:where(.st-home) #page-container .bottompanels .right .leftbannerimage .faq p a { display: block; max-width: 270px; margin: 0 auto; font-size: 17px; line-height: 22px; text-align: center; }
  body.st-site:where(.st-home) #page-container .bottompanels .right .leftbannerimage .faq p a strong { display: block; font-size: 28px; line-height: 32px; }
  html body.st-site #page-container .bottompanels .right .leftbannerimage .faq p a:is(:link, :visited, :active, :hover) { color: #1d2a33; }
  body.st-site:where(.st-home) #page-container .topbanner { margin: 0; }
  /* Latest Blog */
  body.st-site:where(.st-home) #page-container .panel.blog { padding: 24px 0 32px; }
  body.st-site:where(.st-home) #page-container .panel.blog ul { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
  @media (min-width: 900px) { body.st-site:where(.st-home) #page-container .panel.blog ul { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  body.st-site:where(.st-home) #page-container .panel.blog li { float: none; width: auto; margin: 0; padding-top: 5px; display: flow-root; }
  body.st-site:where(.st-home) #page-container .panel.blog img { float: left; margin: 2px 14px 6px 0; width: 90px; max-width: none; height: auto; }
  body.st-site:where(.st-home) #page-container .panel.blog h3 { font-size: 32px; line-height: 40px; padding: 8px 0 16px; }
  body.st-site:where(.st-home) #page-container .panel.blog .clearleft { display: none; }

  /* ---- inner pages: one column ---- */
  body.st-site #page-container .content { padding: 32px 0 36px; }
  body.st-site #page-container .content.alt { padding: 0; }
  body.st-site:where(.st-home) #page-container .content { padding: 0; }
  body.st-site #page-container .content :is(.left, .right), body.st-site #page-container .content.split :is(.left, .right) { float: none; width: auto; }
  body.st-site #page-container .content.alt .right { margin-top: 12px; padding-bottom: 24px; }
  body.st-site #page-container .content img { max-width: 100%; height: auto; }
  body.st-site #page-container .content :is(table, iframe) { max-width: 100%; }
  body.st-site #page-container .content h1 { font-size: 44px; line-height: 1.1; }
  body.st-site #page-container .content h2 { font-size: 34px; line-height: 1.15; margin-top: 36px; }
  body.st-site #page-container .list .entry h2:has(> a) { font-size: 28px; line-height: 1.25; }
  body.st-site #page-container .list .entry > .summary { display: flow-root; }
  body.st-site #page-container .content.alt .list { padding: 8px 0 8px; }
  body.st-site #page-container .list .entry { padding: 0; margin: 36px 0; }
  body.st-site #page-container .list .entry .summary { display: flow-root; }
  body.st-site #page-container .list .entry .blog-image { float: left; width: 200px; height: auto; margin: 4px 22px 12px 0; }
  body.st-site #page-container .list .entry .details { line-height: 1.5; }
  body.st-site #page-container .content.alt .list .paging { text-align: left; }
  body.st-site #page-container .panel li { margin: 14px 0; }
  body.st-site #page-container .panel p { margin: 0; }
  body.st-site #page-container .panel .title { margin-bottom: 2px; }
  body.st-site #page-container .panel h3 { margin-bottom: 8px; font-size: 28px; }

  /* room cards: a full-width blue card, the photo on top with its thumbnail strip, the text under it */
  body.st-site #page-container .list.rooms .entry { margin: 28px 0; padding: 0 0 8px; }
  body.st-site #page-container .list.rooms .entry .images { float: none; width: auto; height: auto; }
  body.st-site #page-container .list.rooms .entry .images::after { display: none; }
  body.st-site #page-container .list.rooms .entry .images > img { display: block; width: 100%; height: auto; aspect-ratio: 845 / 550; object-fit: cover; }
  body.st-site #page-container .gallery.room { position: static; width: auto; display: flex; gap: 10px; overflow-x: auto; margin: 0; padding: 10px 12px; background: #0b4a73; }
  body.st-site #page-container .gallery.room a.gallery-item { flex: 0 0 auto; }
  body.st-site #page-container .gallery.room img { float: none; width: 64px; height: 64px; margin: 0; border-width: 3px; }
  body.st-site #page-container .list.rooms .entry > :is(h2, p) { margin-left: 20px; margin-right: 20px; }
  body.st-site #page-container .list.rooms .entry h2 { padding-top: 20px; font-size: 32px; line-height: 1.15; }
  body.st-site #page-container .list.rooms .entry p { margin-top: 12px; margin-bottom: 12px; }
  body.st-site #page-container .list.rooms .entry p .button, body.st-site #page-container .list.rooms .entry p a.button { display: inline-block; }

  /* photo galleries (facilities, apartments, location, attractions): a fluid grid */
  body.st-site #page-container .gallery:not(.room) { margin: 0 0 36px; padding: 0; }
  body.st-site #page-container .gallery:not(.room) > .container { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 8px; }
  body.st-site #page-container .gallery:not(.room) > .container > :is(h3, p) { grid-column: 1 / -1; }
  body.st-site #page-container .gallery:not(.room) > .container > a:not(.gallery-item) { position: absolute; }
  body.st-site #page-container .gallery:not(.room) > .container > br { display: none; }
  body.st-site #page-container .gallery:not(.room) a.gallery-item { display: block; }
  body.st-site #page-container .gallery:not(.room) a.gallery-item img { display: block; float: none; width: 100%; height: auto; margin: 0; }
  body.st-site #page-container .gallery h3 { font-size: 30px; margin: 20px 0 12px; }

  /* map and panels */
  body.st-site #page-container .panel.contact { padding: 28px 24px; }
  body.st-site #page-container .panel { margin: 32px 0; }

  /* ---- forms (contact, review, unsubscribe): label above each field, 16px fields, the sum row, a full-height SUBMIT ---- */
  body.st-site #page-container .st-contact-form.et_pb_contact_form_container.et_pb_module { margin: 8px 0 0 !important; padding: 0; width: auto; }
  body.st-site #page-container .st-contact-form :is(.et_pb_contact, .et_pb_contact_form) { margin: 0 !important; padding: 0 !important; float: none; width: auto; }
  body.st-site #page-container .st-contact-form .et_pb_contact_form { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 14px 24px; align-items: start; }
  body.st-site #page-container .st-contact-form .et_pb_contact_form .et_pb_contact_field { float: none !important; width: auto !important; margin: 0 !important; padding: 0 !important; clear: none; }
  body.st-site #page-container .st-contact-form .et_pb_contact_form .et_pb_contact_field[data-type="text"] { grid-column: 1 / -1; }
  body.st-site #page-container .st-contact-form .et_pb_contact_field .et_pb_contact_form_label { display: block !important; position: static; margin: 0 0 4px; padding: 0; font: 16px/24px 'BarlowGeoMedium', Arial, Helvetica, sans-serif; color: #ffffff; text-align: left; }
  body.st-site #page-container .st-contact-form .et_pb_contact_field:has(> [data-required_mark="required"]) .et_pb_contact_form_label::after { content: " *"; color: #ffffff; }
  body.st-site #page-container .st-contact-form .et_pb_contact_field .input { display: block; box-sizing: border-box; width: 100%; height: 48px; min-height: 0; margin: 0; padding: 10px 14px; border: 1px solid #dedede; border-radius: 0; background: #ffffff; font: 16px 'BarlowGeoRegular', Arial, Helvetica, sans-serif; color: #000000; }
  body.st-site #page-container .st-contact-form .et_pb_contact_field textarea.input { height: 150px; resize: vertical; }
  body.st-site #page-container .st-contact-form .input::placeholder { color: transparent; opacity: 0; }
  body.st-site #page-container .st-contact-form .et_contact_bottom_container { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 20px; grid-column: 1 / -1; margin: 0; padding: 0; float: none; width: auto; }
  body.st-site #page-container .st-contact-form .et_pb_contact_right { float: none; width: auto; margin: 0; padding: 0; text-align: left; }
  body.st-site #page-container .st-contact-form .et_pb_contact_right p { display: flex; align-items: center; gap: 8px; margin: 0 !important; padding: 0 !important; font: 17px/24px 'BarlowGeoRegular', Arial, Helvetica, sans-serif; color: #ffffff; }
  body.st-site #page-container .st-contact-form .et_pb_contact_right p .et_pb_contact_captcha { display: block; box-sizing: border-box; width: 80px; height: 48px; margin: 0; padding: 10px 14px; border: 1px solid #dedede; border-radius: 0; background: #ffffff; font: 16px 'BarlowGeoRegular', Arial, Helvetica, sans-serif; color: #000000; text-align: left; }
  body.st-site #page-container .et_pb_section .st-contact-form.et_pb_contact_form_container.et_pb_module .et_pb_button.et_pb_contact_submit,
  body.st-site #page-container .et_pb_section .st-contact-form.et_pb_contact_form_container.et_pb_module .et_pb_button.et_pb_contact_submit:is(:hover, :focus, :focus-visible, :active) {
    display: inline-block; float: none; position: static; box-sizing: border-box; width: auto; min-width: 160px; height: 48px; margin: 0 !important; padding: 0 36px !important; border: 0 !important; border-radius: 0 !important;
    font-family: 'BarlowGeoSemi', Arial, Helvetica, sans-serif !important; font-size: 16px !important; font-weight: normal !important; line-height: 48px !important; letter-spacing: 2px !important; text-transform: uppercase !important; text-decoration: none; transition: none; cursor: pointer; }
  body.st-site #page-container .st-contact-form .et_pb_button.et_pb_contact_submit::after { display: none !important; content: none !important; }
  body.st-site #page-container .content p.ils-required-note { margin: 14px 0 0; padding: 0; }
  body.st-site #page-container .content p.ils-required-note em.required { display: inline; font-size: 14px; font-style: normal; color: #ffffff; }
  body.st-site #page-container .content p.ils-required-note em.required::before { content: "* "; }
  body.st-site #page-container .st-contact-form .et-pb-contact-message { margin: 0 0 14px; padding: 12px 14px; background: #ffffff; color: #1d2a33; font-size: 16px; line-height: 24px; }
  body.st-site #page-container .st-contact-form .et-pb-contact-message:empty { display: none; }
  body.st-site #page-container .st-contact-form .et-pb-contact-message p, body.st-site #page-container .st-contact-form .et-pb-contact-message li { margin: 0; color: #1d2a33; }
  /* contact details table: live's two cells, light rules */
  body.st-site #page-container .content table { max-width: 100%; }
  /* the search page's field and button */
  body.st-site #page-container .form.searchpage { width: 100%; }
  body.st-site #page-container .form.searchpage td { display: flex; flex-wrap: wrap; gap: 10px; padding: 5px 0; text-align: left; }
  body.st-site #page-container .form.searchpage input.clicknclear { float: none; flex: 1 1 260px; width: auto; min-width: 0; height: 48px; margin: 0; box-sizing: border-box; }
  body.st-site #page-container .form.searchpage input.button { float: none; flex: 0 0 auto; height: 48px; margin: 0; line-height: 48px; }
  /* empty headings and a post's lead photo */
  body.st-site #page-container .content h1:empty { display: none; }
  body.st-site #page-container .content .list .entry { overflow-wrap: break-word; }

  /* ---- footer: stacked, the round map in the middle ---- */
  body.st-site #page-container #footer { padding: 36px 0 0; margin-top: 0; min-height: 0; }
  body.st-site #page-container #footer > .container { padding-bottom: 24px; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px 32px; align-items: start; }
  body.st-site #page-container #footer .container > .clearboth { display: none; }
  body.st-site #page-container #footer .container .left { grid-column: 1; width: auto; margin-top: 30px; }
  body.st-site #page-container .infomenu { width: auto; margin: 0; }
  body.st-site #page-container .infomenu a { font-size: 17px; }
  body.st-site #page-container #footer .vcard { grid-column: 2; float: none; width: auto; margin-top: 30px; }
  body.st-site #page-container .map-wrapper { position: relative; display: flex; flex-direction: column; align-items: center; left: auto; margin: 0 auto 8px; padding: 0 24px; width: auto; height: auto; z-index: auto; }
  body.st-site:where(.st-home) #page-container .map-wrapper { margin-top: 0; }
  body.st-site #page-container .map-container { position: relative; order: 1; bottom: auto; left: auto; margin: 0; flex: 0 0 auto; }
  body.st-site #page-container .map-wrapper .map-info { position: static; order: 2; transform: none; width: 226px; max-width: 100%; height: auto; box-sizing: border-box; margin-top: 10px; }
  body.st-site #page-container .footerbottom { position: static; left: auto; margin: 0; padding: 0 0 16px; text-align: left; }
  body.st-site #page-container .footerbottom .container { display: block; }
  body.st-site #page-container .footermenu { float: none; width: auto; margin-bottom: 8px; }
  body.st-site #page-container .footermenu li { float: none; display: inline-block; padding: 0 10px; }
  body.st-site #page-container .footermenu li:first-child { padding-left: 0; }
  body.st-site #page-container .copyright { float: none; text-align: left; }
  body.st-site #page-container .footer-tags { display: block; margin: 4px 0 0; }
}

/* =================== below 768: the phone design =================== */
@media (max-width: 767px) {
  body.st-site #page-container .container { padding-left: 16px; padding-right: 16px; }
  body.st-site #page-container #header .container { column-gap: 10px; padding-top: 8px; padding-bottom: 8px; }
  body.st-site #page-container #header .logo img { width: 64px; }
  body.st-site #page-container #header .phone { padding: 2px 12px 2px 38px; font-size: 18px; line-height: 38px; background-position: 11px center; background-size: auto 18px; }
  body.st-site #page-container .ils-menu-toggle { padding: 0; width: 46px; gap: 0; }
  body.st-site #page-container .ils-menu-toggle::after { display: none; }
  body.st-site #page-container #menu { margin-left: -16px; margin-right: -16px; }
  body.st-site #page-container #menu li a:is(:link, :visited, :active, :hover), body.st-site #page-container #menu li:hover > a:is(:link, :visited, :active, :hover), body.st-site #page-container #menu li.active > a:is(:link, :visited, :active, :hover) { padding: 0 16px; }
  body.st-site #page-container #menu li ul a:is(:link, :visited, :active, :hover), body.st-site #page-container #menu li:hover ul a:is(:link, :visited, :active, :hover) { padding-left: 32px; }
  body.st-site #page-container #booking { padding: 16px 16px 18px; }
  body.st-site #page-container .bookingform { grid-template-columns: minmax(0, 1fr); }
  body.st-site #page-container .content { padding: 28px 0 32px; }
  body.st-site:where(.st-home) #page-container .content { padding: 0; }
  body.st-site #page-container .content h1 { font-size: 36px; }
  body.st-site #page-container .content h2 { font-size: 28px; }
  body.st-site #page-container .content h3 { font-size: 28px; line-height: 1.2; }
  body.st-site #page-container .content h4 { font-size: 24px; line-height: 1.2; }
  body.st-site:where(.st-home) #page-container .panel.blog ul { grid-template-columns: minmax(0, 1fr); }
  body.st-site:where(.st-home) #page-container .panel.blog img { float: left; margin: 2px 14px 6px 0; width: 90px; }
  body.st-site:where(.st-home) #page-container .bottompanels .right .bookingbanner li { font-size: 18px; }
  body.st-site #page-container .list.rooms .entry > :is(h2, p) { margin-left: 16px; margin-right: 16px; }
  body.st-site #page-container .list.rooms .entry h2 { font-size: 28px; }
  body.st-site #page-container #footer > .container { grid-template-columns: minmax(0, 1fr); }
  body.st-site #page-container #footer .container .left, body.st-site #page-container #footer .vcard { grid-column: 1; margin-top: 0; }
  body.st-site #page-container .gallery:not(.room) > .container { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  body.st-site #page-container .list .entry .blog-image { width: 120px; margin: 4px 14px 8px 0; }
  body.st-site #page-container .entry > a.gallery-item { display: block; float: none; }
  body.st-site #page-container .entry > a.gallery-item > img.blog-image { float: none; display: block; width: auto; max-width: 100%; margin: 0 0 16px; }
}

/* V1 (3.18 finding, 20 Oct 2026): two blog posts carry live's inline text-align: justify on their headings, so below 1250 a wrapped heading stretches its words apart. Left-align them here; 1250 and up stays live's pixel copy. */
@media (max-width: 1249px) {
  body.st-site #page-container .entry :is(h1, h2, h3, h4, h5, h6)[style*="justify"] { text-align: left !important; }
}

/* Keyword-page button at 359 and below (re-check finding, 20 Oct 2026): the page's own style set 13px, under the 14px floor. 14px still fits on one line at 320 (48px tall as before); if a browser sets it wider it wraps to two lines instead of spilling out. .button.button outranks the page's inline style. */
@media (max-width: 359px) {
  body.st-site #page-container .container.kw-page p.kw-cta a.button.button { font-size: 14px; letter-spacing: 0; padding: 14px 6px; line-height: 20px; white-space: normal; }
}