/* sa-mobile.css - Stage 4 DESIGNED tablet and phone layer for Santa Anne by the Sea (skill Rule 2). Loaded LAST.
   1250px and up is untouched: every rule here sits inside a max-width query below 1250.
   Bands:  1170-1249  live's layout kept (the 195px sidebar header over the hero), with the accessibility floor below.
           768-1169   a reflow: the header leaves the sidebar for a bar above a shorter hero (logo, phone number, Menu button;
                      the menu opens below the bar), content fluid; home, room and sidebar layouts kept side by side from 980.
           below 768  the phone design: one column, the phone number as a full-width tap bar under the logo row.
   Floor below 1250 (every state): WCAG AA colours, text 14px+, inputs 16px+, tap targets 24px+, no clipping, no overlap,
   no sideways scroll.
   Started from the kit's ilaunch-responsive.template.css (copy in build/stage4/; the starter pack's mobile starter does not apply:
   check_v2_pattern exit 3, no booking bar), with a sister family B build's phone layer (same skeleton) as the worked example;
   every selector is rewritten for this skin's markup (sidebar #header, #feature before #container-outer, home .container.main /
   .mid-area / .bottom-area, rooms .list .entry, .gallery, blog .content .left / .right, .infomenu SEO links, .footermenu legal links).
   Palette below 1250 (AA, computed for this site; live's colours from 1250 up):
     buttons, blue    #135fb8 rest (white 6.3:1, live's own)       hover/focus/active  #003e67 (white 11.2:1; live's #00bad7 is 2.3:1)
     buttons, teal    #00788d rest (white 5.2:1; live's #00bad7 is 2.3:1)  hover/focus/active  #003e67
     links on white   #006db5 + underline on hover/focus (5.5:1; live's #00bad7 hover is 2.3:1, panel #8aa2be is 2.6:1)
     home blog panel  #0062a3 ground (white 6.4:1, live's yellow Read More 5.1:1; on live's #006db5 the yellow is 4.3:1)
     muted text       #595959 (7.0:1 on white; live's #888888 / #999999 / #979797 are 3.5 / 2.8 / 2.9:1)
     footer text      white on a 60% navy panel over the sea photo (5.5:1 or better on the lightest sand; live's bare photo is 2.6:1)
     menu active      white with a 4px yellow bar beside it (a shape, not only a colour; live's #00bad7 on #006db5 is 2.3:1) */

/* ======================= below 1250: accessibility floor (all narrower bands) ======================= */
@media (max-width: 1249px) {
  /* live's fixed iLaunch frame (sa-extra.css pins #page-container at 1170px to copy live's clipped page): released */
  body.sa-site #page-container { min-width: 0; }

  /* type floor: live's 11 to 13px lines become 14px */
  body.sa-site, body.sa-site #page-container p, body.sa-site #page-container td, body.sa-site #page-container th { font-size: 14px; }
  body.sa-site #page-container .panel, body.sa-site #page-container .panel .summary { font-size: 14px; line-height: 20px; }
  body.sa-site #page-container .panel .date, body.sa-site #page-container .panel .details, body.sa-site #page-container .entry .details,
  body.sa-site #page-container .panel li em, body.sa-site #page-container .details strong, body.sa-site #page-container .details a { font-size: 14px; }
  body.sa-site #page-container a.more, body.sa-site #page-container a.more:link, body.sa-site #page-container a.more:visited { font-size: 14px; line-height: 24px; height: auto; padding-right: 13px; }
  body.sa-site #page-container .smalltext, body.sa-site #page-container .smalltext a { font-size: 14px; line-height: 20px; color: #595959; }
  body.sa-site #page-container div.top { font-size: 14px; line-height: 24px; }
  body.sa-site #page-container div.top a { color: #595959; padding: 2px 10px; }
  body.sa-site #page-container div.top a:hover, body.sa-site #page-container div.top a:focus, body.sa-site #page-container div.top a:active { color: #ffffff; background: #595959; }
  body.sa-site #page-container .paging { font-size: 14px; line-height: 32px; color: #595959; }
  body.sa-site #page-container .paging a:link, body.sa-site #page-container .paging a:visited, body.sa-site #page-container .paging a:active,
  body.sa-site #page-container .paging em { display: inline-block; min-width: 14px; line-height: 24px; padding: 2px 8px; color: #4a4a4a; text-align: center; }
  body.sa-site #page-container .paging a:hover, body.sa-site #page-container .paging a:focus, body.sa-site #page-container .paging em,
  body.sa-site #page-container .paging em a:link, body.sa-site #page-container .paging em a:visited { background-color: #595959; color: #ffffff; }
  body.sa-site #page-container span.options a { display: inline-block; padding: 2px 6px; line-height: 24px; font-size: 14px; }
  body.sa-site #page-container .result-count { font-size: 14px; }
  body.sa-site #page-container h5, body.sa-site #page-container h6 { font-size: 14px; }
  body.sa-site #page-container .form td em, body.sa-site #page-container .content p.ils-required-note em.required { font-size: 14px; color: #595959; }
  body.sa-site #page-container .panel .details a, body.sa-site #page-container .entry .details a { color: #595959; }
  /* fields: 16px (no zoom-on-focus) */
  body.sa-site #page-container input, body.sa-site #page-container select, body.sa-site #page-container textarea { font-size: 16px; }
  /* the site search's submit (input.button, /search only): live's own input.button rule (15px, sa-live.css) out-ranks the line above (Stage 3b F3) */
  body.sa-site #page-container input.button { font-size: 16px; }
  body.sa-site #page-container .sa-contact-form p.et_pb_contact_field .input, body.sa-site #page-container .sa-contact-form input.et_pb_contact_captcha { font-size: 16px; }
  body.sa-site #page-container .sa-contact-form .et_pb_contact_form_label, body.sa-site #page-container .sa-contact-form .et_pb_contact_right p.clearfix,
  body.sa-site #page-container .sa-contact-form .et_pb_contact_right p.clearfix::before { font-size: 14px; }

  /* links: live's hover colours (#00bad7 on white 2.3:1, the panel titles' #8aa2be 2.6:1) become the brand blue with an underline */
  body.sa-site #page-container a:hover, body.sa-site #page-container a:focus, body.sa-site #page-container a:active { color: #006db5; }
  body.sa-site #page-container :is(.content, .container, .list) a:not(.button):not(.more):not(.gallery-item):is(:hover, :focus, :active) { text-decoration: underline; }
  body.sa-site #page-container .panel .title a:hover, body.sa-site #page-container .panel .title a:focus, body.sa-site #page-container .panel .title a:active { color: #006db5; text-decoration: underline; }
  /* Read More on white pages (blog list, category, month, tag views): live's yellow on white is 1.2:1 */
  body.sa-site #page-container .content a.more:is(:link, :visited) { color: #135fb8 !important; }
  body.sa-site #page-container .content a.more:is(:hover, :focus, :active) { color: #003e67 !important; text-decoration: underline; }

  /* buttons: blue ones keep live's #135fb8 at rest, teal ones (live #00bad7, 2.3:1 with white) go to a darker teal; every active state white on navy */
  body.sa-site #page-container a.button:is(:link, :visited), body.sa-site #page-container input.button,
  body.sa-site #page-container .et_pb_section .sa-contact-form.et_pb_contact_form_container.et_pb_module .et_pb_button { background-color: #135fb8 !important; color: #ffffff !important; }
  body.sa-site #page-container :is(.special, .list, .roomtext) a.button:is(:link, :visited), body.sa-site #page-container a.button.roombooking:is(:link, :visited),
  body.sa-site #page-container a.button.alt:is(:link, :visited) { background-color: #00788d !important; color: #ffffff !important; }
  body.sa-site #page-container a.button:is(:hover, :focus, :active), body.sa-site #page-container input.button:is(:hover, :focus, :active),
  body.sa-site #page-container :is(.special, .list, .roomtext) a.button:is(:hover, :focus, :active), body.sa-site #page-container a.button.roombooking:is(:hover, :focus, :active),
  body.sa-site #page-container a.button.alt:is(:hover, :focus, :active),
  body.sa-site #page-container .et_pb_section .sa-contact-form.et_pb_contact_form_container.et_pb_module .et_pb_button:is(:hover, :focus, :active) { background-color: #003e67 !important; color: #ffffff !important; }

  /* the sidebar menu (1170 to 1249) and the menu panel (below 1170): the current page is white with a yellow bar beside it, hover underlines */
  body.sa-site #page-container #menu li a:is(:link, :visited), body.sa-site #page-container #menu li.active > a:is(:link, :visited) { color: #ffffff; }
  body.sa-site #page-container #menu li.active > a:is(:link, :visited) { box-shadow: inset 4px 0 0 #ffe71e; }
  body.sa-site #page-container #menu li a:is(:hover, :focus, :active) { color: #ffffff; text-decoration: underline; }
  body.sa-site #page-container #menu li:focus-within > ul { display: block; }
  /* touch and keyboard drop-down (script in sa-sitewide.php): li.sa-open = Contact Us opened by a first tap; li.sa-shut = closed with Escape */
  body.sa-site #page-container #menu > ul > li.sa-open > ul { display: block; }
  body.sa-site #page-container #menu > ul > li.sa-shut > ul { display: none; }

  /* home Latest Blog panel and the blue behind the FAQ photo: one shade darker so live's yellow Read More (and the white titles) pass */
  body.sa-site.sa-home #page-container .bottom-area .left, body.sa-site.sa-home #page-container .panel.blog { background-color: #0062a3; }
  body.sa-site.sa-home #page-container .panel .details { color: #e6eff6; font-size: 14px; }
  body.sa-site.sa-home #page-container .panel .summary { font-size: 14px; line-height: 20px; }
  body.sa-site.sa-home #page-container .panel a.more:is(:link, :visited) { line-height: 24px; height: auto; color: #ffe71e !important; }
  body.sa-site.sa-home #page-container .panel a.more:is(:hover, :focus, :active) { color: #ffffff !important; text-decoration: underline; }
  body.sa-site.sa-home #page-container .panel.blog .title a:is(:hover, :focus, :active) { color: #ffffff; text-decoration: underline; }
  body.sa-site.sa-home #page-container .faq p a:is(:hover, :focus, :active) { color: #000000 !important; text-decoration: underline; }
  body.sa-site.sa-home #page-container .faq p a { display: inline-block; padding-top: 2px; padding-bottom: 2px; }
  body.sa-site.sa-home #page-container .special h4 a:is(:hover, :focus, :active) { color: #003e67; }

  /* footer: the white words sit on the sea photo (2.6:1 where the water turns pale, less on the sand): a 60% navy panel behind each
     group keeps them at 5.5:1 or better anywhere on the photo; the bottom band goes from 60% to 85% grey */
  body.sa-site #page-container #footer .infomenu, body.sa-site #page-container #footer .vcard { background-color: rgba(0, 40, 70, 0.6); border-radius: 6px; }
  body.sa-site #page-container .footerbottom { background: rgba(30, 30, 30, 0.88); color: #ffffff; }
  /* a page shorter than the screen (tall tablets: the empty month, the unsubscribe pages, /news, /search, the landers at 1200x1600) left a white
     strip under the bottom band: the footer casts a solid shadow of the band's own rendered colour (88% grey over the photo's sand, #353230)
     straight down, so the band reaches the bottom of the screen. A shadow paints without adding scroll height, and below a long page it is never
     seen. 1250 and up keeps live's white (live shows the same strip there). Fix round 1, 3.18 M4 */
  body.sa-site #page-container #footer { box-shadow: 0 100vh 0 100vh #353230; }
  body.sa-site #page-container .footer-tags p, body.sa-site #page-container .copyright { color: #ffffff; }
  body.sa-site #page-container #footer, body.sa-site #page-container #footer p, body.sa-site #page-container .footermenu a, body.sa-site #page-container .copyright,
  body.sa-site #page-container .footer-tags a { font-size: 14px; }
  body.sa-site #page-container #footer a:is(:hover, :focus, :active) { color: #ffffff !important; text-decoration: underline; }
  body.sa-site #page-container .socialmedia a { background-clip: content-box; }

  /* 24px tap rows without changing how lines wrap: inline vertical padding (site map, month list, panel links, footer links) */
  body.sa-site #page-container .content li > a, body.sa-site #page-container .panel li > a, body.sa-site #page-container .container > ul li > a,
  body.sa-site #page-container .content p > a:only-child:not(.button), body.sa-site #page-container .content td > a:not(.button) { padding-top: 5px; padding-bottom: 5px; }
  body.sa-site #page-container .panel .title a { display: inline; padding: 4px 0; }   /* inline, so a long title still wraps beside a floated photo */
  body.sa-site #page-container .infomenu a, body.sa-site #page-container #footer .vcard li a, body.sa-site #page-container .footermenu a,
  body.sa-site #page-container .footer-tags a { display: inline-block; line-height: 24px; padding-top: 3px; padding-bottom: 3px; }
  body.sa-site #page-container a.tel-link[href^="tel:"]:is(:link, :visited) { padding-top: 5px; padding-bottom: 5px; }
  /* a link that holds only a picture: its box wraps the picture (an inline link round an inline image is one text line tall) */
  body.sa-site #page-container :is(.content, .container, .panel) a:has(> img:only-child):not(.gallery-item) { display: inline-block; }
  /* the home Latest Blog photos: the link (now a box) floats as live's photo did, so title and summary stay beside it */
  body.sa-site.sa-home #page-container .panel.blog li > a:first-child { float: left; margin: 0 15px 0 0; }
  body.sa-site.sa-home #page-container .panel.blog li > a:first-child img { margin: 0; }
  /* the booking-engine links inside post text (65 posts link the suspended engine, as live): bold so they read as links without colour alone */
  body.sa-site #page-container .entry .summary a[href*="etourism.net.au"]:not(.button) { font-weight: 700; color: #006db5; padding-top: 5px; padding-bottom: 5px; }
  /* links inside running text and the contact details (live: #444 with no underline, like the words around them): underlined so a visitor
     can see what is a link without relying on colour; live's deliberately plain SEO links (a.link) stay as text */
  body.sa-site #page-container :is(.content td, .content p, .entry .summary li, .list .entry p) > a:not(.button):not(.link):not(.more):not(.tel-link):is(:link, :visited) { text-decoration: underline; }
  /* phone numbers stay styled to their surroundings in every state (no underline: the kit's tel rule; sa-design.css section 2) */

  /* forms: label over a full-width field (the desktop grid is sa-design.css from 1250; live's table is wider than
     the screen below about 1365px) */
  body.sa-site #page-container .sa-contact-form { max-width: 640px; }
  body.sa-site #page-container .sa-contact-form form.et_pb_contact_form { display: block; }
  body.sa-site #page-container .sa-contact-form .et_pb_contact_form_label { text-align: left; padding: 0; line-height: 24px; margin: 14px 0 6px; font-size: 16px; }
  body.sa-site #page-container .sa-contact-form p.et_pb_contact_field .input { width: 100%; height: 48px; margin: 0; }
  body.sa-site #page-container .sa-contact-form p.et_pb_contact_field textarea.input { width: 100%; height: 150px; min-height: 150px; margin: 0; }
  body.sa-site #page-container .sa-contact-form p.et_pb_contact_field:has(> [data-required_mark="required"]) > .et_pb_contact_form_label::after {
    content: ""; display: inline-block; width: 16px; height: 16px; vertical-align: -2px; margin-left: 6px; background: url(/wp-content/uploads/ilaunch/skin/images/icon-required.png) no-repeat; }
  body.sa-site #page-container .sa-contact-form .et_contact_bottom_container, body.sa-site #page-container .sa-contact-form .et_pb_contact_right { display: block; width: auto; text-align: left; }
  body.sa-site #page-container .sa-contact-form .et_pb_contact_right p.clearfix { margin: 18px 0 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; column-gap: 8px; line-height: 48px; font-size: 16px; text-align: left; }
  body.sa-site #page-container .sa-contact-form .et_pb_contact_right p.clearfix::before { content: "Verification"; flex: 1 1 100%; display: block; visibility: visible; height: auto; font: 400 16px/24px 'Open Sans', Arial, Helvetica, sans-serif; color: #444444; margin: 0 0 6px; }
  body.sa-site #page-container .sa-contact-form input.et_pb_contact_captcha { width: 90px; height: 48px; }
  body.sa-site #page-container .et_pb_section .sa-contact-form.et_pb_contact_form_container.et_pb_module .et_pb_button { display: block; width: 100%; height: 52px; margin: 22px 0 0 0; line-height: 52px !important; font-size: 16px !important; }
  body.sa-site #page-container p.ils-required-note { margin: 8px 0 20px; text-align: left; }
  body.sa-site #page-container .content p.ils-required-note em.required { display: inline-block; text-align: left; }


  /* posts: live prints a "Comments" heading above its comment form; comments are off here (Darcie ruling, 6 Oct 2026), so below 1250 the
     heading, which has nothing under it, is left out (1250 and up keeps it as live's text) */
  body.sa-site #page-container .content .left > a#commentlist + h2 { display: none; }
  /* blog sidebar: live's Tag Cloud panel has no tags (its only link is live's empty /blog/tag/ anchor, X1), so below 1250 its heading would stand
     alone the same way: by the same rule the empty panel is left out there (only when its one link is empty); 1250 and up keeps it as live.
     Fix round 1, 3.18 M7 */
  body.sa-site #page-container .content .right > .panel:has(> h3 + .text > a:only-child:empty) { display: none; }

  /* keyboard focus below 1250: two-tone ring (2px white against the element, 2px near-black outside), visible on any ground */
  body.sa-site :focus-visible { outline: 2px solid #101010; outline-offset: 2px; box-shadow: 0 0 0 2px #ffffff; }
}

/* ======================= 1170 to 1249: live's layout, home welcome text under the hero ======================= */
@media (min-width: 1170px) and (max-width: 1249px) {
  /* live's welcome text sits in a 325px box over the hero that scrolls (its last lines are hidden behind the next block until scrolled);
     in this band it is a full-width text block under the 800px hero instead, lined up with the inner pages' text column */
  body.sa-site.sa-home #page-container .container.main { position: static; width: auto; height: auto; margin: 800px 0 0; padding: 48px 30px 36px 225px; background: #ffffff; overflow: visible; }
  body.sa-site.sa-home #page-container .container.main > * { max-width: 860px; }
  body.sa-site.sa-home #page-container .mid-area { margin-top: 0; }
  /* Latest Blog: live's 480px panel cuts its third post off (at 14px it would cut the second); here the band grows with it */
  body.sa-site.sa-home #page-container .bottom-area { height: auto; display: flex; overflow: visible; }
  body.sa-site.sa-home #page-container .bottom-area .left { float: none; flex: 1 1 auto; height: auto; min-height: 500px; overflow: visible; clip-path: inset(0); }   /* paints only inside itself, as live's band did */
  body.sa-site.sa-home #page-container .panel.blog { float: none; flex: 0 0 345px; height: auto; padding-bottom: 60px; }   /* the footer's wave overlaps this band by 45px, as on live */
  /* the FAQ photo keeps live's 500px composition (its white disc and curved shadow are cut at 500px); the taller band below it is the panel blue */
  body.sa-site.sa-home #page-container .faq-container, body.sa-site.sa-home #page-container .faq-container-bg { clip-path: inset(0 0 500px 0); }
}

/* ======================= below 1170: tablet and phone reflow ======================= */
@media (max-width: 1169px) {
  body.sa-site #page-container .container { width: auto; max-width: 1170px; margin-left: auto; margin-right: auto; }
  body.sa-site #page-container #container-outer, body.sa-site #page-container #feature, body.sa-site #page-container #footer,
  body.sa-site #page-container .full-list { min-width: 0; }

  /* header: out of the sidebar into a bar above the hero (logo on its white tab, phone number, Menu button; the menu opens below) */
  body.sa-site #page-container #container-outer-bg { display: flex; flex-direction: column; position: relative; }
  body.sa-site #page-container #container-outer { order: -1; position: static; z-index: auto; }
  body.sa-site #page-container #header,
  body.sa-site.sa-home #page-container #header { position: relative; top: auto; left: auto; z-index: 10; width: auto; margin: 0; padding: 0 24px 0 0; background: #006db5;
    display: flex; flex-wrap: wrap; align-items: center; column-gap: 14px; row-gap: 0; }
  body.sa-site #page-container #header > .clearboth { display: none; }
  body.sa-site #page-container #header .logo { order: 1; float: none; align-self: flex-start; margin: 0 auto 0 0; padding: 10px 0 0; background: #ffffff; }
  body.sa-site #page-container #header .logo a { display: block; }
  body.sa-site #page-container #header .logo img { width: 156px; height: auto; }
  body.sa-site #page-container #header .phone { order: 2; float: none; width: auto; display: block; padding: 0 18px 0 44px; background-position: 14px center; font-size: 20px; line-height: 48px; }
  body.sa-site #page-container #header .phone a.tel-link { display: block; padding: 0; }
  body.sa-site #page-container .ils-menu-toggle { order: 3; display: inline-flex; align-items: center; gap: 10px; height: 48px; margin: 0; padding: 0 16px; border: 2px solid #ffffff; border-radius: 0;
    background: #006db5; color: #ffffff; font: 600 16px/44px 'Open Sans', Arial, Helvetica, sans-serif; text-transform: uppercase; letter-spacing: 1px; cursor: pointer; }
  body.sa-site #page-container .ils-menu-toggle:is(:hover, :focus, :active), body.sa-site #page-container #header.ils-menu-open .ils-menu-toggle { background: #ffffff; color: #003e67; }
  body.sa-site #page-container .ils-menu-toggle span, body.sa-site #page-container .ils-menu-toggle span::before, body.sa-site #page-container .ils-menu-toggle span::after { display: block; position: relative; width: 18px; height: 2px; background: currentColor; content: ""; }
  body.sa-site #page-container .ils-menu-toggle span::before { position: absolute; top: -6px; }
  body.sa-site #page-container .ils-menu-toggle span::after { position: absolute; top: 6px; }
  /* the menu: hidden until the button opens it, then one full-width row per page, Contact Us's FAQ indented under it */
  body.sa-site #page-container #menu { order: 6; flex: 0 0 calc(100% + 24px); float: none; display: none; margin: 0 -24px 0 0; padding: 0 0 12px; z-index: auto; font-size: 16px; }
  body.sa-site #page-container #header.ils-menu-open #menu { display: block; }
  body.sa-site #page-container #menu ul { display: block; }
  body.sa-site #page-container #menu li { width: auto; text-align: left; line-height: normal; border-top: 1px solid rgba(255, 255, 255, 0.25); }
  body.sa-site #page-container #menu li a:is(:link, :visited, :hover, :focus, :active) { display: block; padding: 12px 24px; line-height: 24px; font-size: 16px; }
  body.sa-site #page-container #menu li ul { position: static; display: block; margin: 0; padding: 0 0 6px; left: auto; width: auto; background: none; }
  body.sa-site #page-container #menu li li { border: 0; }
  body.sa-site #page-container #menu li li a:is(:link, :visited, :hover, :focus, :active) { padding: 10px 24px 10px 48px; font-size: 15px; line-height: 24px; }

  /* hero: in the flow under the bar, shorter; the Free Wi-Fi badge hangs from its lower right corner */
  body.sa-site #page-container #feature { position: relative; top: auto; height: 300px; overflow: hidden; }
  body.sa-site #page-container .featureimage, body.sa-site #page-container .featureoverlay-fade,
  body.sa-site #page-container .featuremain, body.sa-site #page-container .featuremain li, body.sa-site #page-container .featuremain img { height: 300px; }
  body.sa-site.sa-home #page-container #feature, body.sa-site.sa-home #page-container .featuremain,
  body.sa-site.sa-home #page-container .featuremain li, body.sa-site.sa-home #page-container .featuremain img { height: 440px; }
  body.sa-site #page-container .featuremain img { width: 100%; object-fit: cover; }
  body.sa-site #page-container .wifi { top: auto; bottom: -34px; right: 24px; width: 72px; height: 72px; background-size: contain; z-index: 20; }
  /* the unsubscribe-complete page prints no hero (live prints its banner inside the content) */
  body.sa-site #page-container #feature:not(:has(.featureimage, .featuremain)) { height: 0; }
  /* /newsletter/unsubscribe-complete prints no hero before the header (its banner is inside the content), so the Free Wi-Fi badge would hang
     over the header's phone bar: left out there */
  body.sa-site #page-container #container-outer-bg:not(:has(> #feature)) .wifi { display: none; }

  /* live's empty Google +1 / Facebook Like block (dead services) keeps its blank 47px at desktop; not on phones and tablets */
  body.sa-site #page-container .socialwidgets { display: none; }
  /* inner pages: the content leaves the sidebar's 225px gutter and the 440px hero gap */
  body.sa-site #page-container .content { padding: 48px 24px 48px; }
  body.sa-site #page-container .content.alt { padding: 0 24px; }
  body.sa-site #page-container .content .container .container { padding: 0; }
  body.sa-site #page-container .gallery > .container, body.sa-site #page-container #footer .container { padding-left: 24px; padding-right: 24px; }
  body.sa-site #page-container .content img, body.sa-site #page-container .content iframe, body.sa-site #page-container .container img { max-width: 100%; }
  body.sa-site #page-container .content img, body.sa-site #page-container .container img { height: auto !important; }
  body.sa-site #page-container .content.alt:last-child { padding-bottom: 48px; }

  /* page galleries (apartments, facilities): fluid grid, full rows at every width (live: 370px photos three across from 1170) */
  body.sa-site #page-container .gallery:not(.room) { padding: 40px 0 32px; }
  body.sa-site #page-container .gallery:not(.room) .container { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 10px; }
  body.sa-site #page-container .gallery:not(.room) .container > :not(a.gallery-item) { grid-column: 1 / -1; }
  body.sa-site #page-container .gallery:not(.room) .container > a:not(.gallery-item), body.sa-site #page-container .gallery:not(.room) .container > .clearleft { display: none; }
  body.sa-site #page-container .gallery:not(.room) a.gallery-item { display: block; }
  body.sa-site #page-container .gallery:not(.room) img { float: none; display: block; width: 100%; height: auto; padding: 0; margin: 0; }
  body.sa-site #page-container .gallery:not(.room) h3 { margin: 0 0 8px; }

  /* blog list, posts, FAQ and site search: content and sidebar side by side from 980 (live's 70 / 28%) */
  body.sa-site #page-container .content .left { min-width: 0; }

  /* search form */
  body.sa-site #page-container table.form.searchpage, body.sa-site #page-container table.form.searchpage tbody, body.sa-site #page-container table.form.searchpage tr { display: block; width: auto; }
  body.sa-site #page-container table.form.searchpage td { display: flex; gap: 8px; width: auto; max-width: 560px; padding: 0; }
  body.sa-site #page-container .form.searchpage input { float: none; margin: 0; }
  body.sa-site #page-container .form.searchpage input.clicknclear { flex: 1 1 auto; min-width: 0; width: auto; height: 48px; box-sizing: border-box; border: 1px solid #767676; }
  body.sa-site #page-container .form.searchpage input.button { flex: 0 0 auto; height: 48px; line-height: 48px; padding: 0 22px; }

  /* footer: the fixed 341px box released; the sea photo stays at the top (wave edge and water as live), sand fills below it,
     the keyword links and the address in two columns on their navy panels, then the legal links and the credit */
  body.sa-site #page-container #footer, body.sa-site.sa-home #page-container #footer { float: none; width: auto; height: auto; overflow: visible; padding: 72px 0 0; margin-top: 0;
    background: url(/wp-content/uploads/ilaunch/skin/images/footer-bg.png) center top no-repeat, linear-gradient(to bottom, transparent 0, transparent 400px, #e0d3c2 400px); }
  body.sa-site #page-container #footer > .container { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 24px; row-gap: 20px; align-items: start; min-height: 0; padding-bottom: 32px; }
  body.sa-site #page-container #footer .container > .clearboth { display: none; }
  body.sa-site #page-container #footer .container .left { float: none; width: auto; }
  body.sa-site #page-container #footer .infomenu { padding: 14px 18px; }
  body.sa-site #page-container #footer .infomenu ul { margin: 0; padding: 0; }
  body.sa-site #page-container #footer .infomenu li { float: none; display: block; width: auto; padding-left: 15px; background-position: 0 center; }
  body.sa-site #page-container #footer .infomenu .clearboth { display: none; }
  body.sa-site #page-container #footer .vcard { float: none; width: auto; padding: 14px 18px; }
  body.sa-site #page-container #footer .vcard .org { font-size: 26px; line-height: 32px; }
  body.sa-site #page-container .footerbottom { position: static; padding-bottom: 14px; }   /* live forces the inner container's bottom padding to 0 (!important) */
  body.sa-site #page-container .footerbottom .container { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; column-gap: 24px; row-gap: 4px; padding-top: 10px; }
  body.sa-site #page-container .footerbottom .container > .clearboth { display: none; }
  body.sa-site #page-container .footermenu { float: none; width: auto; }
  body.sa-site #page-container .footermenu ul { margin: 0; padding: 0; display: flex; flex-wrap: wrap; }
  body.sa-site #page-container .footermenu li { float: none; }
  body.sa-site #page-container .footermenu a { line-height: 24px; }
  body.sa-site #page-container .copyright { float: none; width: auto; text-align: left; line-height: 24px; }
}

/* ======================= home below 1170 ======================= */
@media (max-width: 1169px) {
  /* welcome text: out of live's 325px scrolling box over the hero, into the page under the hero, all of it showing */
  body.sa-site.sa-home #page-container .container.main { position: static; width: auto; height: auto; max-width: none; padding: 48px 24px 32px; margin: 0; background: #ffffff; overflow: visible; }
  body.sa-site.sa-home #page-container .container.main > * { max-width: 820px; }
  body.sa-site.sa-home #page-container .container.main p img { max-width: calc(50% - 6px); height: auto !important; }

  /* special offer and the building photo: live's three panels side by side from 980 (photo | offer | building) */
  body.sa-site.sa-home #page-container .mid-area { float: none; width: auto; height: auto; margin: 0; display: flex; }
  body.sa-site.sa-home #page-container .special { float: none; flex: 1 1 auto; width: auto; height: auto; min-height: 455px; display: flex; }
  body.sa-site.sa-home #page-container .special .image { float: none; flex: 1 1 auto; width: auto; height: auto; }
  body.sa-site.sa-home #page-container .special .text { float: none; flex: 0 0 300px; width: 300px; padding: 30px 30px 36px; }
  body.sa-site.sa-home #page-container .special .text::before { top: 50%; margin-top: -15px; }
  body.sa-site.sa-home #page-container .midbanner { float: none; flex: 0 0 30%; width: auto; height: auto; }
  body.sa-site.sa-home #page-container .mid-area > .clearboth { display: none; }

  /* FAQ photo with its yellow circle, then (beside it from 980) the Latest Blog panel */
  body.sa-site.sa-home #page-container .bottom-area { float: none; width: auto; height: auto; overflow: visible; display: flex; }
  body.sa-site.sa-home #page-container .bottom-area .left { float: none; flex: 1 1 auto; width: auto; height: auto; min-height: 420px; position: relative; overflow: hidden; }
  body.sa-site.sa-home #page-container .faq-container-bg, body.sa-site.sa-home #page-container .map-shadow { display: none; }
  body.sa-site.sa-home #page-container .faq-container { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: auto; height: auto; border-radius: 0; box-shadow: none; -webkit-mask-image: none; }
  body.sa-site.sa-home #page-container .faq { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: auto !important; height: auto; display: flex; align-items: center; justify-content: center; }
  body.sa-site.sa-home #page-container .faq .faq-text-wrapper { float: none; margin: 0; }
  body.sa-site.sa-home #page-container .panel.blog { float: none; flex: 0 0 345px; width: 345px; height: auto; padding: 24px 24px 28px 28px; }
  body.sa-site.sa-home #page-container .panel.blog li { float: none; display: flow-root; width: auto; margin: 0 0 24px; }
  body.sa-site.sa-home #page-container .panel.blog li:last-child { margin-bottom: 0; }
  body.sa-site.sa-home #page-container .panel.blog li > a:first-child { float: left; margin: 0 15px 0 0; }
  body.sa-site.sa-home #page-container .panel.blog li > a:first-child img { margin: 0; }
  body.sa-site.sa-home #page-container .panel.blog .text { display: flow-root; }
}

/* ======================= below 980: one column of content; menu and sidebars stacked ======================= */
@media (max-width: 979px) {
  /* blog, posts, FAQ: the sidebar panels move under the content */
  body.sa-site #page-container .content .left, body.sa-site #page-container .content .right { float: none; width: auto; }
  body.sa-site #page-container .content .right { margin-top: 32px; }
  body.sa-site #page-container .content .right .panel:first-child { margin-top: 0; }
  /* FAQ: live repeats the FAQ Categories panel beside each of its three blocks. Stacked, ONE panel shows, directly under the intro that says
     "selecting a category below": the first block's panel moves above its questions and the repeats after blocks 1 and 2 are left out
     (fix round 1, 3.18 M2; before, the panel showed after block 1 and again after block 2, far below the intro). The first block is the
     .content.alt straight after the intro's .content.main (only /faq has that pair, and only it carries .panel.faqs) */
  body.sa-site #page-container .content.alt .panel.faqs { display: none; }
  body.sa-site #page-container .content.main + .content.alt > .container:has(.panel.faqs) { display: flex; flex-direction: column; }
  body.sa-site #page-container .content.main + .content.alt > .container:has(.panel.faqs) > .right { order: -1; margin: 0 0 16px; }
  /* the panel's own 65px foot margin is for panels stacked under each other: here the first question block's heading margin (32px phone,
     50px tablet) plus 16px puts about the same space under the panel as above it (fix1/m2/gap-after2.txt) */
  body.sa-site #page-container .content.main + .content.alt > .container > .right > .panel.faqs { display: block; margin-bottom: 0; }

  /* rooms: photo, then the text and CALL NOW on the blue, then the thumbnails as a swipeable strip */
  body.sa-site #page-container .list .entry .container { float: none; display: flex; flex-direction: column; }
  body.sa-site #page-container .list .entry .images { float: none; width: auto; height: 360px; }
  body.sa-site #page-container .list .entry .roomtext { float: none; width: auto; padding: 28px 24px 24px; }
  body.sa-site #page-container .gallery.room { position: static; display: flex; gap: 7px; width: auto; height: auto; margin: 18px 0 0; padding: 0; border: 0; overflow-x: auto; background: none;
    -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
  body.sa-site #page-container .gallery.room a.gallery-item { display: block; flex: 0 0 auto; scroll-snap-align: start; }
  body.sa-site #page-container .gallery.room img { float: none; display: block; border: 0; width: 91px; height: auto; }
  body.sa-site #page-container .list .entry .clearleft, body.sa-site #page-container .list .entry > .clearboth { display: none; }

  /* home: the special offer stacks (photo, offer), the building photo under it; FAQ photo, then Latest Blog */
  body.sa-site.sa-home #page-container .mid-area { display: block; }
  body.sa-site.sa-home #page-container .special { display: block; min-height: 0; }
  body.sa-site.sa-home #page-container .special .image { height: 340px; }
  body.sa-site.sa-home #page-container .special .text { width: auto; padding: 32px 24px 36px; }
  body.sa-site.sa-home #page-container .special .text::before { display: none; }
  body.sa-site.sa-home #page-container .special .text > * { max-width: 560px; margin-left: auto; margin-right: auto; }
  /* the copy and CALL NOW under the heading are centred (live's own inline styles), so the heading is centred with them below 980; it was
     left-aligned in its centred 560px box and read as off-centre (768: text 104 to 503 in a 24 to 744 column). Fix round 1, 3.18 M5 */
  body.sa-site.sa-home #page-container .special h3 { text-align: center; }
  body.sa-site.sa-home #page-container .midbanner { height: 300px; }
  body.sa-site.sa-home #page-container .bottom-area { display: block; }
  body.sa-site.sa-home #page-container .bottom-area .left { min-height: 380px; }
  body.sa-site.sa-home #page-container .panel.blog { width: auto; padding: 28px 24px 32px; }
  body.sa-site.sa-home #page-container .panel.blog ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 24px; }
  body.sa-site.sa-home #page-container .panel.blog li { margin: 0; }

  /* footer: one column */
  body.sa-site #page-container #footer > .container { grid-template-columns: minmax(0, 1fr); }
  /* the one-column footer is taller than the 401px sea photo (about 560 to 710px): the photo is scaled to cover the whole footer, so it no
     longer ends partway down the address panel on flat sand colour (fix round 1, 3.18 M3; the sand layer stays underneath as a fallback) */
  body.sa-site #page-container #footer, body.sa-site.sa-home #page-container #footer { background-size: cover, auto; }
  /* the covering photo puts the surf's white water behind the lower panel at some widths (979: the phone line measured 4.35:1 on the 60% panel):
     70% navy here keeps every footer line AA (fix1/m3/onimg-after2) */
  body.sa-site #page-container #footer .infomenu, body.sa-site #page-container #footer .vcard { background-color: rgba(0, 40, 70, 0.7); }
}

/* ======================= phone: below 768 ======================= */
@media (max-width: 767px) {
  body.sa-site #page-container .gallery > .container, body.sa-site #page-container #footer .container { padding-left: 16px; padding-right: 16px; }

  /* header: logo and Menu on the first row, the phone number as a full-width tap bar under them */
  body.sa-site #page-container #header, body.sa-site.sa-home #page-container #header { padding-right: 16px; column-gap: 10px; }
  body.sa-site #page-container #header .logo img { width: 118px; }
  body.sa-site #page-container #header .phone { order: 5; flex: 0 0 calc(100% + 16px); margin: 0 -16px 0 0; padding: 0; text-align: center; background-image: none; font-size: 20px; line-height: 50px; }
  body.sa-site #page-container #header .phone a.tel-link[href^="tel:"]:is(:link, :visited, :hover, :focus, :active) { display: inline-block; padding: 0 0 0 34px; background: url(/wp-content/uploads/ilaunch/skin/images/icon-phone.png) no-repeat 0 center; }
  body.sa-site #page-container #menu { flex-basis: calc(100% + 16px); margin-right: -16px; }

  /* hero */
  body.sa-site #page-container #feature, body.sa-site #page-container .featureimage, body.sa-site #page-container .featureoverlay-fade,
  body.sa-site #page-container .featuremain, body.sa-site #page-container .featuremain li, body.sa-site #page-container .featuremain img { height: 190px; }
  body.sa-site.sa-home #page-container #feature, body.sa-site.sa-home #page-container .featuremain,
  body.sa-site.sa-home #page-container .featuremain li, body.sa-site.sa-home #page-container .featuremain img { height: 260px; }
  body.sa-site #page-container .wifi { right: 16px; bottom: -28px; width: 60px; height: 60px; }

  /* type */
  body.sa-site #page-container h1 { font-size: 30px; line-height: 36px; margin-bottom: 18px; }
  body.sa-site #page-container h2 { font-size: 26px; line-height: 32px; margin: 32px 0 14px; }
  body.sa-site #page-container h3 { font-size: 23px; line-height: 29px; margin: 26px 0 12px; }
  body.sa-site #page-container h4 { font-size: 20px; line-height: 26px; }
  body.sa-site #page-container .content p { margin: 14px 0; }
  body.sa-site #page-container [style*="justify"] { text-align: left !important; }

  /* inner pages */
  body.sa-site #page-container .content { padding: 36px 16px 36px; }
  body.sa-site #page-container .content.alt { padding: 0 16px; }
  body.sa-site #page-container .content.alt:last-child { padding-bottom: 36px; }
  body.sa-site #page-container .gallery:not(.room) .container { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  body.sa-site #page-container .list .entry .images { height: 230px; }
  body.sa-site #page-container .list .entry .roomtext { padding: 24px 16px 20px; }
  body.sa-site #page-container .list .entry .roomtext h2 { margin-top: 0; }
  body.sa-site #page-container .content a.button:is(:link, :visited), body.sa-site #page-container .list a.button:is(:link, :visited) {
    box-sizing: border-box; display: block; max-width: 100%; height: auto; min-height: 48px; padding: 12px 20px; line-height: 24px; white-space: normal; text-align: center; }
  /* blog list and posts: the photo above the words at its own size (200px list photos, 300px post photos; never stretched) */
  body.sa-site #page-container .list .entry img.blog-image, body.sa-site #page-container .entry > a.gallery-item img.blog-image { float: none; display: block; margin: 0 0 14px; }
  body.sa-site #page-container .entry > a.gallery-item { display: inline-block; }
  body.sa-site #page-container .paging { text-align: left; }
  body.sa-site #page-container blockquote { padding-left: 50px; background-size: 36px auto; }
  /* the contact details table: label and value rows */
  body.sa-site #page-container .content table:not(.form), body.sa-site #page-container .content table:not(.form) tbody { display: block; width: auto !important; }
  body.sa-site #page-container .content table:not(.form) tr { display: grid; grid-template-columns: 84px minmax(0, 1fr); row-gap: 4px; margin-bottom: 6px; }
  body.sa-site #page-container .content table:not(.form) td { display: block; width: auto !important; overflow-wrap: anywhere; }
  body.sa-site #page-container .content table:not(.form) td[colspan] { grid-column: 1 / -1; }

  /* home */
  body.sa-site.sa-home #page-container .container.main { padding: 36px 16px 24px; }
  body.sa-site.sa-home #page-container .special .image { height: 230px; }
  body.sa-site.sa-home #page-container .special .text { padding: 24px 16px 28px; }
  body.sa-site.sa-home #page-container .special h3 { font-size: 40px; line-height: 44px; letter-spacing: 1px; margin-bottom: 18px; }
  body.sa-site.sa-home #page-container .special .button { display: block; width: auto; }
  body.sa-site.sa-home #page-container .midbanner { height: 220px; }
  body.sa-site.sa-home #page-container .bottom-area .left { min-height: 320px; }
  body.sa-site.sa-home #page-container .faq .faq-text-wrapper { width: 200px; height: 200px; padding: 0 20px; border-radius: 50%; display: flex; flex-direction: column; justify-content: center; }
  body.sa-site.sa-home #page-container .faq p { font-size: 17px; line-height: 22px; }
  body.sa-site.sa-home #page-container .faq p:nth-of-type(2) { font-size: 24px; line-height: 28px; }
  body.sa-site.sa-home #page-container .panel.blog { padding: 24px 16px 28px; }
  body.sa-site.sa-home #page-container .panel.blog h3 { font-size: 30px; line-height: 40px; }

  /* footer: one column, the legal links on one row without the separator dots */
  body.sa-site #page-container #footer { padding-top: 64px; }
  body.sa-site #page-container #footer .vcard .org { font-size: 24px; line-height: 30px; }
  body.sa-site #page-container .footerbottom .container { display: block; }
  body.sa-site #page-container .footerbottom { padding-bottom: 8px; }
  body.sa-site #page-container .footermenu ul { column-gap: 22px; }
  body.sa-site #page-container .footermenu li, body.sa-site #page-container .footermenu li:first-child { padding: 0; background: none; }
  body.sa-site #page-container .footermenu a { line-height: 30px; }
  body.sa-site #page-container .copyright { margin-top: 4px; }
  body.sa-site #page-container .footer-tags { display: block; padding-left: 0; }
}

/* ======================= small phones: below 360 ======================= */
@media (max-width: 359px) {
  body.sa-site #page-container #header .logo img { width: 104px; }
  body.sa-site #page-container .ils-menu-toggle { padding: 0 12px; }
}