/* sl-mobile.css: Sanctuary Lake Apartments designed tablet and phone bands (Stage 4, skill Rule 2). Loaded LAST (after sl-design.css). Nothing here
   applies at 1250px and up, where the site is a pixel copy of live.
   Live is a responsive Bootstrap 3 site (viewport meta; a fixed header with a menu button below 768px; the booking form behind its "Book Online"
   heading below 992px), so its own layout is the starting point at every width below 1250. This layer fixes what Divi's wrappers broke (the home
   hero height chain), what live itself gets wrong on a phone or tablet (a screen-high photo with nothing on it, a 220px booking form with 13px
   fields), and makes every width below 1250 WCAG AA: 14px text floor, 16px form fields, 24px tap targets, AA colours in every state (rest, hover,
   focus, active).
   Started from the kit's ilaunch-responsive.template.css (copied to build/, expanded for reference in build/stage4/sl-responsive.from-kit.css: button
   and link states, form layout, calendar, tel links); none of its V2 selectors match this bootstrap-era markup, so every rule is rewritten for it
   (nav.navbar, #feature, #booking, .container-main-wrapper, footer.base), and its AA palette recomputed for this site's navy and yellow:
     #29437c  live's navy (headings, menu band, hover): white on it 9.6:1, it on white 9.6:1, passes as live has it
     #fdbc1a  live's yellow buttons with #644907 text: 4.96:1, passes as live has it; as TEXT on white it is 1.7:1
     #595959  live's light greys as text: 7.0:1 on white
   $P = body.sl-site #page-container, $H = body.sl-site.sl-home #page-container. */

/* =========================================================================================================
   1. Hero. Home, below 768: live makes the slider exactly one screen high and puts nothing on it but the
      "Book Online" tab (and Divi's wrappers broke that height chain: a 420px strip over an empty 695px box).
      On a phone the slider is now 60% of the screen (300px at least), so the page's heading shows below it.
   ========================================================================================================= */
@media (max-width: 767px) {
  body.sl-site.sl-home #page-container #feature { height: 60vh; height: 60svh; min-height: 300px; }
  body.sl-site.sl-home #page-container #feature > .featuremain { height: 100% !important; min-height: 300px !important; }
}

/* =========================================================================================================
   2. Type floor, fields and tap targets below 1250
   ========================================================================================================= */
@media (max-width: 1249px) {
  /* the menu button's name now comes from its aria-label (same words); its 1px Bootstrap screen-reader span read as 8px text that overflows its
     box to every audit, so it is dropped (the button itself only shows below 768) */
  body.sl-site #page-container .navbar-toggle .sr-only { display: none; }
  /* forms: 16px fields */
  body.sl-site #page-container .sl-contact-form .et_pb_contact p input.input,
  body.sl-site #page-container .sl-contact-form .et_pb_contact p textarea.input,
  body.sl-site #page-container .sl-contact-form .et_pb_contact p input.input.et_pb_contact_captcha,
  body.sl-site #page-container .page-content table.searchpage input[type="text"],
  body.sl-site #page-container #booking .form-field { font-size: 16px; }
  /* booking labels (live 12px) and Check Availability (live 13px; 16px on a phone, section 4) */
  body.sl-site #page-container #booking label { font-size: 14px; }
  body.sl-site #page-container #booking .btn { font-size: 14px; }
  /* header: the "View our hot deals" banner link was a 10px line box around its 30px picture */
  body.sl-site #page-container nav.navbar .banner-header a { display: inline-block; vertical-align: top; }
  /* home blog cards: the dates (live 12px #888, 3.5:1) */
  body.sl-site #page-container .row.blog-row .inner-text .date { font-size: 14px; color: #595959; }

  /* footer: 14px floor (live 11px menus, 12px address and copyright lines); the menus keep live's spaced capitals at 1px spacing so the longest
     item still fits a 320px line */
  body.sl-site #page-container footer.base :is(.infomenu a, .footermenu a, .footermenu p, .vcard li, .vcard a, .vcard span, .copyright, .copyright p, .footer-tags p, .footer-tags a) { font-size: 14px; }
  body.sl-site #page-container footer.base :is(.infomenu, .footermenu) a { letter-spacing: 1px; }
  /* footer menus and contact lines: 24px+ tap height without moving the lines (inline padding grows the hit area only) */
  body.sl-site #page-container footer.base :is(.infomenu, .footermenu) a { display: inline-block; padding: 5px 0; margin: -5px 0; }
  body.sl-site #page-container footer.base :is(.infomenu, .footermenu) li { line-height: 28px; }
  /* (never the eTourism logo link: its 58px right padding is where the logo picture sits) */
  body.sl-site #page-container footer.base .vcard a, body.sl-site #page-container footer.base .footer-tags a:not(.tag) { display: inline-block; padding: 5px 0; margin: -5px 0; }

  /* page text set smaller than the floor inline by live's editor (offers: a 10px terms line) and <small> (experience: the walk and drive times) */
  body.sl-site #page-container :is(.page-content, .container-main-wrapper) :is([style*="font-size: 10px"], [style*="font-size: 11px"], [style*="font-size: 12px"], [style*="font-size: 13px"], small, .small) { font-size: 14px !important; }
  /* home: the HotelsCombined badge's country line (a 10px <font>), the room slides' View More buttons (13px), the blog summaries (13px) */
  body.sl-site #page-container #hc-ratingRatingHotel font[size] { font-size: 14px; }
  body.sl-site #page-container #hc-ratingRatingHotel a { display: inline-block; padding: 3px 0; margin: -3px 0; }
  body.sl-site #page-container .slider.apartment-slides .apartment-slide .apartment-text .btn { font-size: 14px; }
  body.sl-site #page-container .row.blog-row div.inner-text div.summary { font-size: 14px; }
  body.sl-site #page-container .blog-image a { display: block; }
  /* slick carousels (home rooms and reviews, apartments photos): slick hides the arrow and dot words with font-size 0 (read as 0px text); the
     words stay inside their buttons in transparent 14px text (same look), and the dots become 24px targets */
  /* (the word may break inside the 43px arrow so its text box stays inside the button, which is what a finger hits) */
  body.sl-site #page-container :is(.slick-prev, .slick-next) { font-size: 14px; line-height: 16px; color: transparent; text-indent: 0; overflow: hidden; white-space: normal; overflow-wrap: anywhere; word-break: break-all; }
  body.sl-site #page-container .slick-dots li { width: 24px; height: 24px; margin: 0 2px; }
  body.sl-site #page-container .slick-dots li button { width: 24px; height: 24px; padding: 4px; font-size: 14px; line-height: 16px; color: transparent; overflow: hidden; }
  body.sl-site #page-container .slick-dots li button::before { width: 24px; height: 24px; line-height: 24px; }
  /* map card text (Google's 12px) */
  body.sl-site #page-container .map-wrapper .map-info { font-size: 14px; line-height: 20px; }
  body.sl-site #page-container .map-wrapper .map-info a { display: inline-block; padding: 2px 0; }
  /* reviews: live's #777 greys (4.48:1) and the page-size labels (white on #777, 10.5px) */
  body.sl-site #page-container blockquote :is(footer, small, .small, cite, .details) { color: #595959; }
  body.sl-site #page-container .label-default[href]:is(:link, :visited) { background-color: #595959; }
  body.sl-site #page-container .label-default[href]:is(:hover, :focus, :active) { background-color: #29437c; color: #ffffff; }
  body.sl-site #page-container .page-content span.options a.label { display: inline-block; min-width: 32px; padding: 4px 8px; font-size: 14px; line-height: 16px; }
  /* pagers (blog, reviews, search): the digits as 32px targets */
  body.sl-site #page-container .page-content .paging a { display: inline-block; min-width: 32px; padding: 4px 0; text-align: center; }
  /* blog: category line, sidebar category titles, month list and View More, the site map's lists, search result titles: 24px+ hit areas, list links
     stay inline (a wrapped item keeps its bullet on line 1) */
  body.sl-site #page-container p.lead a { display: inline-block; padding: 3px 0; margin: -3px 0; }
  body.sl-site #page-container .well .title a { display: inline-block; padding: 3px 0; margin: -3px 0; }
  body.sl-site #page-container .well ul.archive li a { display: inline-block; padding: 3px 0; margin: -3px 0; }
  body.sl-site #page-container .page-content li a { padding: 4px 0; }
  body.sl-site #page-container .page-content strong > a { padding: 4px 0; }
  /* page text links (an email address in a paragraph, a logo link in a heading, the newsletter link and button) */
  body.sl-site #page-container .page-content p > a:not(.btn):not(.button) { display: inline-block; padding: 3px 0; margin: -3px 0; }
  body.sl-site #page-container .page-content h4 > a { display: inline-block; padding: 4px 0; margin: -4px 0; }
  body.sl-site #page-container .panel a.button { display: inline-block; padding: 3px 0; }
  /* contact details table links (never the Get Directions button in the same table: it keeps its own padding) */
  body.sl-site #page-container .page-content td a:not(.btn), body.sl-site #page-container .page-content span.tel a { display: inline-block; padding: 3px 0; margin: -3px 0; }
  /* galleries' thumbnail links were line boxes around their pictures */
  body.sl-site #page-container .thumb > a.gallery-item { display: inline-block; vertical-align: top; }
  /* header: the Google Translate gadget (13.3px, 15px tall; shown from 768 as on live) */
  body.sl-site #page-container #translate-widget .goog-te-gadget-simple :is(a, span) { font-size: 14px; }
  body.sl-site #page-container #translate-widget .goog-te-gadget-simple a { display: inline-block; padding: 4px 0; }
}
@media (max-width: 479px) {
  /* header phone number (live 12px below 480, 22px from 480) */
  body.sl-site #page-container nav.navbar .navbar-details .phone a { font-size: 14px; display: inline-block; padding: 5px 0; margin: -5px 0; }
}
@media (max-width: 767px) {
  /* phones: the header is fixed and grows with the screen (60px at 320, 78 at 390, 101 at 480, 132 at 600, 140 from 640), so an in-page jump (the
     FAQ groups, the form anchors) would land under it; jumps stop 16px or more below it instead (an ARRIVAL from another page is scrolled by Divi's
     own script, which sl-sitewide.php gives the measured header height plus 16px) */
  html:has(body.sl-site) { scroll-padding-top: min(calc(22vw + 16px), 156px); }
}

/* photo galleries: Bootstrap's floated thumbnails stagger when one thumbnail is taller than its neighbours; each visual row starts on a new line
   (Divi trap: clear the first column of every row per breakpoint, never flex the row) */
@media (max-width: 991px) {
  body.sl-site #page-container .gallery-row div.thumb:nth-of-type(2n+1) { clear: left; }
}
@media (min-width: 992px) and (max-width: 1199px) {
  body.sl-site #page-container .gallery-row div.thumb:nth-of-type(3n+1) { clear: left; }
}
@media (min-width: 1200px) and (max-width: 1249px) {
  body.sl-site #page-container .gallery-row div.thumb:nth-of-type(4n+1) { clear: left; }
}

/* =========================================================================================================
   3. Phone (below 768): header, menu, forms
   ========================================================================================================= */
@media (max-width: 767px) {
  /* menu button: bars dark enough to see (live #ccc on white, 1.6:1), 48 x 44 */
  body.sl-site #page-container .navbar-custom .navbar-toggle { width: 48px; height: 44px; padding: 10px 12px; margin-top: 0; margin-bottom: 0; border: 1px solid #8a8a8a; border-radius: 4px; background-color: #ffffff; }
  /* phones under 480: the phone number sits right on top of the menu button (about 1px apart); nudge the button down 8px for a clear gap (Clarissa, 2026-10-20) */
  @media (max-width: 479px) {
    body.sl-site #page-container .navbar-custom .navbar-toggle { position: relative; top: 8px; }
  }
  /* under 360 the header is only 60-65px tall, so the button moves 4px (and is 40px tall) and the number 2px the other way to keep the same gap inside the header */
  @media (max-width: 359px) {
    body.sl-site #page-container .navbar-custom .navbar-toggle { top: 4px; height: 40px; }
    body.sl-site #page-container nav.navbar .navbar-details .phone a { position: relative; top: -2px; }
  }
  body.sl-site #page-container .navbar-custom .navbar-toggle .icon-bar { width: 22px; height: 2px; background-color: #333333; }
  body.sl-site #page-container .navbar-custom .navbar-toggle:is(:hover, :focus, :active) { background-color: #e6e6e6; }
  /* the open menu: tall rows that fit the screen and scroll inside it if the screen is short */
  body.sl-site #page-container nav.navbar .navbar-collapse { max-height: calc(100vh - 78px); max-height: calc(100svh - 78px); overflow-y: auto; }
  /* the open menu's second-level items (Attractions, Tours; FAQs, Reviews, Blog): live 12px on 18px rows; 14px on 44px rows */
  body.sl-site #page-container .navbar-custom .navbar-nav li li a { font-size: 14px; line-height: 44px; padding-top: 0; padding-bottom: 0; }
  /* Book Now: live's yellow text on the white menu (1.7:1) becomes live's own yellow button (#644907 on #fdbc1a, 5.0:1); hovered, focused or
     pressed white on live's #2664aa (6.0:1) */
  body.sl-site #page-container .navbar-custom .navbar-nav > li.alt > a:is(:link, :visited) { background-color: #fdbc1a; color: #644907; }
  body.sl-site #page-container .navbar-custom .navbar-nav > li.alt > a:is(:hover, :focus, :active) { background-color: #2664aa; color: #ffffff; }

  /* forms: label over a full-width 48px field, the maths question and its field on one row, a full-width SUBMIT */
  body.sl-site #page-container .sl-contact-form .et_pb_contact p input.input { height: 48px; padding: 10px 12px; }
  body.sl-site #page-container .sl-contact-form .et_pb_contact p textarea.input { height: 140px; padding: 10px 12px; }
  body.sl-site #page-container .sl-contact-form .et_pb_contact_right p.clearfix { display: flex; flex-wrap: wrap; align-items: center; column-gap: 8px; height: auto; padding: 0; line-height: 48px; }
  body.sl-site #page-container .sl-contact-form .et_pb_contact_right p.clearfix::before { flex: 0 0 100%; margin: 0 0 5px; }
  body.sl-site #page-container .sl-contact-form .et_pb_contact_captcha_question { line-height: 48px; }
  body.sl-site #page-container .sl-contact-form .et_pb_contact p input.input.et_pb_contact_captcha { width: 120px; height: 48px; margin: 0; padding: 10px 12px; }
  body #page-container .et_pb_section .sl-contact-form.et_pb_contact_form_container.et_pb_module .et_pb_button.et_pb_contact_submit { display: block; width: 100%; height: 48px; line-height: 48px !important; padding: 0 20px !important; }
  body.sl-site.page-id-1139 #page-container .sl-contact-form form.et_pb_contact_form { padding: 12px; }
}

/* =========================================================================================================
   4. Booking: below 992 live keeps the form behind its "Book Online" heading in a 260px card at the right of
      the hero (a 220px form, 13px fields and button). Below 768 the card spans the screen (16px gutters, at
      most 420px), the heading is a full-width tap target, and the opened form has 16px fields and 44px controls.
   ========================================================================================================= */
@media (max-width: 991px) {
  body.sl-site #page-container #booking > h3 { cursor: pointer; }
}
@media (max-width: 767px) {
  body.sl-site #page-container #booking { left: 16px; right: 16px; width: auto; max-width: 420px; margin: 0 auto; padding: 20px 16px 4px; }
  body.sl-site #page-container #booking > h3 { width: 100%; float: none; padding: 4px 0; line-height: 36px; }
  body.sl-site #page-container #booking form { width: 100%; float: none; padding: 4px 0 12px; }
  body.sl-site #page-container #booking .form-group { width: 100%; float: none; margin-bottom: 8px; }
  body.sl-site #page-container #booking label { display: block; width: 100%; float: none; line-height: 20px; }
  body.sl-site #page-container #booking .form-field { display: block; width: 100%; float: none; height: 44px; line-height: 44px; }
  body.sl-site #page-container #booking .datepicker_trigger { top: 32px; }
  body.sl-site #page-container #booking .btn { display: block; width: 100%; float: none; height: 44px; line-height: 44px; font-size: 16px; }
}

/* =========================================================================================================
   5. Booking calendar (#datepicker_div, appended to <body>) below 1250: 14px text, 16px month/year pickers,
      24px+ taps; on a phone it spans the screen with 40px day rows
   ========================================================================================================= */
@media (max-width: 1249px) {
  /* AA colours (live: Clear/Close #fff on #888 3.5:1, day names #eee on #777 4.0:1, the picked day white on orange 2.0:1, greyed past days #888 on #ddd 2.8:1) */
  body.sl-site #datepicker_div .datepicker_control { background: #595959; }
  body.sl-site #datepicker_div .datepicker_titleRow, body.sl-site #datepicker_div .datepicker_titleRow .datepicker_weekEndCell { background: #595959; }
  body.sl-site #datepicker_div .datepicker_titleRow a { color: #ffffff !important; }
  body.sl-site #datepicker_div .datepicker_currentDay a { color: #000000 !important; }
  body.sl-site #datepicker_div .datepicker_unselectable { color: #595959; }
  body.sl-site #datepicker_div .datepicker_control, body.sl-site #datepicker_div .datepicker_links { font-size: 14px; }
  body.sl-site #datepicker_div .datepicker_titleRow a { font-size: 14px; }
  body.sl-site #datepicker_div .datepicker_header, body.sl-site #datepicker_div .datepicker_header select { font-size: 16px; }
  body.sl-site #datepicker_div .datepicker_header select { height: 28px; }
  body.sl-site #datepicker_div .datepicker_header { height: auto; padding: 4px 0 6px; }
  body.sl-site #datepicker_div .datepicker_control a, body.sl-site #datepicker_div .datepicker_links a, body.sl-site #datepicker_div .datepicker_links label { display: block; line-height: 24px; }
  body.sl-site #datepicker_div td a { line-height: 24px; }
}
@media (max-width: 767px) {
  body.sl-site #datepicker_div { width: calc(100vw - 32px) !important; max-width: 420px; left: 16px !important; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35); }
  body.sl-site #datepicker_div .datepicker_oneMonth { width: 100%; }
  body.sl-site #datepicker_div .datepicker_control a, body.sl-site #datepicker_div .datepicker_links a, body.sl-site #datepicker_div .datepicker_links label { line-height: 36px; }
  body.sl-site #datepicker_div td a { line-height: 40px; }
}

/* a phone number is never split over two lines */
@media (max-width: 1249px) {
  body.sl-site #page-container a.tel-link, body.sl-site #page-container a[href^="tel:"] { white-space: nowrap; }
}
/* live content's inline justified text leaves wide word gaps on a phone column */
@media (max-width: 767px) {
  body.sl-site #page-container [style*="justify"] { text-align: left !important; }
}

/* =========================================================================================================
   6. The menu's drop-downs (Experience Local; Contact Us) from 768 to 1249. Live opens them on hover only, so on a
      touch tablet a tap went straight to the parent page and the keyboard skipped them. sl-sitewide.php marks a touch
      visitor (html.sl-touch) and opens a list on the first tap (li.sl-open); a second tap opens the parent page, a tap
      elsewhere or Escape closes it. For a touch visitor the list follows that tap state, not the sticky hover a tap
      leaves behind. A keyboard visitor (html.sl-kb) gets the list while focus is on the parent or inside it
      (:focus-within; :has(:focus-visible) cannot be used: Chrome re-checks the next link between the two focus steps,
      finds the list shut and drops focus on the page), and Escape shuts it (li.sl-kb-shut until focus leaves the item).
      The open list keeps live's colours (white on #2664aa, 6.0:1; the hovered or focused item #2664aa on white).
   ========================================================================================================= */
@media (min-width: 768px) and (max-width: 1249px) {
  html.sl-touch body.sl-site #page-container .navbar-custom .navbar-nav li:hover ul { display: none; }
  html.sl-touch body.sl-site #page-container .navbar-custom .navbar-nav li.sl-open > ul { display: block; }
  html.sl-touch body.sl-site #page-container .navbar-custom .navbar-nav > li.sl-open > a:is(:link, :visited) { color: #ffffff !important; background-color: #2664aa !important; }
  html.sl-kb body.sl-site #page-container .navbar-custom .navbar-nav > li:focus-within:not(.sl-kb-shut) > ul { display: block; }
  html.sl-kb body.sl-site #page-container .navbar-custom .navbar-nav > li:focus-within:not(.sl-kb-shut) > a:is(:link, :visited) { color: #ffffff !important; background-color: #2664aa !important; }
  html.sl-kb body.sl-site #page-container .navbar-custom .navbar-nav > li:focus-within li a:is(:link, :visited) { color: #ffffff; }
  /* the focused item is always the white box with a dark ring inside it (also the current page's item, whose `li.active a` rule keeps it white on blue otherwise) */
  html body.sl-site #page-container .navbar-custom .navbar-nav li li > a:focus-visible:is(:link, :visited) { color: #2664aa !important; background-color: #ffffff !important; outline: 2px solid #29437c !important; outline-offset: -4px; }
}

/* home blog cards from 992: live turns Read More into a 13px yellow text link (#fdbc1a on white, 1.7:1) with its arrow picture; below 1250 it is
   live's dark yellow-brown (#644907, 8.1:1) at 14px on a 24px line, the arrow kept */
@media (min-width: 992px) and (max-width: 1249px) {
  body.sl-site #page-container .row.blog-row div.col-md-4 a.btn { color: #644907; font-size: 14px; height: 24px; line-height: 24px; }
}

/* booking bar, 992 to 1169: live's inline bar gives each date a 196 to 230px box with the label beside the field; at the 14px label and 16px field
   floor "CHECK-OUT" broke over two lines and the date ran under its calendar icon. Here each label sits above its field inside the same bordered box
   (the bar is 20px taller), and Check Availability fills its box's height. From 1170 live's side-by-side layout fits at the floor and is kept. */
@media (min-width: 992px) and (max-width: 1169px) {
  body.sl-site #page-container #booking .form-group { height: 58px; }
  body.sl-site #page-container #booking label { display: block; float: none; width: 100%; padding: 4px 0 0; line-height: 18px; }
  body.sl-site #page-container #booking .form-field { display: block; float: none; width: 100%; height: 32px; line-height: 32px; padding: 0 30px 0 0; }
  body.sl-site #page-container #booking .datepicker_trigger { top: 29px; }
  /* (at 992 the 14px label is wider than its 168px button: it may wrap to two centred lines) */
  body.sl-site #page-container #booking .form-group.no-border .btn { display: flex; align-items: center; justify-content: center; height: 58px; padding: 0 8px; line-height: 20px; white-space: normal; text-align: center; }
}

/* =========================================================================================================
   7. AA in every state below 1250 (button_states / link_contrast findings)
   ========================================================================================================= */
@media (max-width: 1249px) {
  /* the hero slider's white arrows sit on the photos with nothing but the white page behind them, so until a photo has loaded (and to every
     contrast check) they are white on white: the slider gets live's navy behind its photos (the photos cover it, nothing changes once loaded) */
  body.sl-site #page-container #feature .featuremain { background-color: #29437c; }
  /* home room slides: live's View More keeps its #644907 text when focused or pressed, on Bootstrap's dark blue (1.1 to 1.3:1); white there, as
     live's own hover */
  body.sl-site #page-container .slider.apartment-slides .apartment-slide .apartment-text .btn:is(:focus, :active) { color: #ffffff; }
  /* menu Book Now from 768: live's hover turns its box #2664aa and keeps the #644907 text (1.4:1); focused or pressed it stayed yellow. White on
     live's #2664aa (6.0:1) in every active state (the arrow picture kept) */
  body.sl-site #page-container .navbar-custom .navbar-nav > li.alt > a:is(:hover, :focus, :active) { color: #ffffff; background-color: #2664aa; }
  /* home Featured Review: the #444 review text sits on a grey palm photo whose darker leaves fell to 3.2:1 at 768 (10th percentile of the pixels behind
     the text, onimg_contrast); the photo is lightened by a 40% white veil below 1250 (every pixel behind the text 4.5:1 or better) */
  body.sl-site.sl-home #page-container .testimonials-container { background-image: linear-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.4)), url(/wp-content/uploads/ilaunch/skin/testimonial-bg.jpg); }
  /* footer social icons: sprite pictures whose words (Facebook, Twitter ...) are hidden; the words' colour was the page grey (#444 on the navy footer)
     and Bootstrap's focus blue, so they take the footer's white (no visible change: only the icons show) */
  body.sl-site #page-container footer.base .socialmedia a:is(:link, :visited, :hover, :focus, :active) { color: #ffffff; }
}

/* =========================================================================================================
   8. Reflow fixes found by overlap_check
   ========================================================================================================= */
/* /apartments, 768 to 991: live gives each room heading a 25% column (192px at 768) for a 30px heading, so "AIR-CONDITIONING" ran 60px into the
   description column beside it (covered by it). The heading takes the full width above the description and the features, left-aligned with its
   rules on the left, as on a phone; the description and the features share the row two thirds to one third. */
@media (min-width: 768px) and (max-width: 991px) {
  body.sl-site #page-container .list.rooms .entry .text > h2.col-sm-3 { float: none; width: 100%; text-align: left; }
  body.sl-site #page-container .list.rooms .entry .text > h2.col-sm-3::before, body.sl-site #page-container .list.rooms .entry .text > h2.col-sm-3::after { left: 15px; right: auto; }
  body.sl-site #page-container .list.rooms .entry .text > div.col-sm-6 { width: 66.6667%; }
  body.sl-site #page-container .list.rooms .entry .text > div.col-sm-3 { width: 33.3333%; }
}
/* home room slides, 992 to 1249: live keeps the slide's title and View More on one unbroken line in a box that starts part way across the slide, so the
   box ran past the slide and the screen's right edge (View More cut off; live the same at every desktop width, kept from 1250). The box now spans the
   slide less 20px each side, the title wraps, and View More sits under it, centred on the slide's height. */
@media (min-width: 992px) and (max-width: 1249px) {
  body.sl-site #page-container .slider.responsive.apartment-slides .apartment-slide .apartment-text { float: none; white-space: normal; left: 20px; right: 20px; top: 50%; margin: 0; max-width: none; transform: translateY(-50%); }
  body.sl-site #page-container .slider.apartment-slides .apartment-slide .apartment-text h2 { display: block; margin: 0 auto 16px; line-height: 32px; }
}
/* home Latest Blog cards, 768 to 991: live gives each card a fixed 350px and pins Read More 35px above its foot; at the 14px floor a three-line
   summary ran under the button (the button covered the last line). The card grows with its text and keeps the button's space free below it. */
@media (min-width: 768px) and (max-width: 991px) {
  body.sl-site.sl-home #page-container .row.blog-row div.col-md-4 { height: auto; min-height: 350px; padding-bottom: 86px; vertical-align: top; }
}

/* post titles below 768: a long word ("COOLANGATTA/TWEED" in post 87's 30px uppercase title) may break inside itself instead of running past the
   column and being cut off at the right edge by .container.main (3.18 fix N2; 768 and up unchanged) */
@media (max-width: 767px) {
  body.sl-site #page-container .blog-post h1 { overflow-wrap: anywhere; }
}

/* =========================================================================================================
   9. Phone menu extras (Clarissa, 2026-10-19): the header strip hides the Hot Deals banner below 768 and the social icons below 640 (live's own
      rules), so a phone never saw them. The same banner and icons now sit at the foot of the open menu, only in the bands where the strip hides
      them (no duplicates). Hidden from 768 up.
   ========================================================================================================= */
body.sl-site #page-container .sl-menu-extras { display: none; }
@media (max-width: 767px) {
  body.sl-site #page-container nav.navbar .sl-menu-extras { display: block; padding: 14px 15px 18px; border-top: 1px solid #d9d9d9; text-align: center; }
  body.sl-site #page-container nav.navbar .sl-menu-deals { display: block; margin: 0; }
  body.sl-site #page-container nav.navbar .sl-menu-deals a { display: inline-block; padding: 7px 0; vertical-align: top; }
  body.sl-site #page-container nav.navbar .sl-menu-deals img { max-width: 100%; height: auto; }
  body.sl-site #page-container nav.navbar .sl-menu-social { display: none; float: none; margin: 8px 0 0; line-height: 0; }
  body.sl-site #page-container nav.navbar .sl-menu-social a { margin: 0 6px; }
  body.sl-site #page-container nav.navbar .sl-menu-social a:first-child { margin-left: 6px; }
}
@media (max-width: 639px) {
  body.sl-site #page-container nav.navbar .sl-menu-social { display: block; }
  body.sl-site #page-container nav.navbar .sl-menu-social a { margin: 0 8px; }
}