/* rw-mobile.css - Royal Woods Resort: the DESIGNED tablet and phone layer (Stage 4, skill Rule 2). Loaded LAST.
   Started from the starter pack's ilaunch-v2-mobile.starter.css (render_mobile_css.py, rw-mobile.starter.css) and adapted to
   this site's own markup and live renders: none of the starter's VARIANT blocks exist here (no reviews circle, no
   .content-bottom band, no footer map image, no promo pin), so they are gone; Royal Woods' own blocks are designed below.
   Width bands (coordinator rule 2026-10-07, skill Rule 2):
     1250px and up  : nothing here applies; live's exact colours, type and geometry (rw-design.css).
     1170 to 1249   : live's fixed 1170 layout, fitted (the 1218px outer frame loses its 12px gutters) and the accessibility
                      floor: WCAG AA in every state, text 14px or more, inputs 16px, tap targets 24px or more.
     768 to 1169    : one reflow (fluid columns, menu behind a button, booking block under the hero), same floor.
     below 768      : the phone layout.
   Tokens: P = body.rw-site #page-container, H = body.rw-site.rw-home #page-container (outranks live's
   body.rw-site:where(.rw-home) #page-container home rules), B = body.rw-site. */

/* ======================= A. below 1250: the accessibility floor (all states AA, 14px, 16px inputs, 24px taps) ======================= */
@media (max-width: 1249px) {
  /* fit: live's outer frame is 1194px + 12px gutters; the 1170 layout fits from 1170 without the gutters */
  body.rw-site #page-container #container-outer { width: auto; max-width: 1170px; padding: 0; }
  body.rw-site #et-main-area { width: auto; max-width: 1170px; padding: 0; }

  /* links: live's gold hover (#e7a917 on white, 2.1:1) becomes a deep gold (5.5:1) */
  body.rw-site #page-container .content a:hover, body.rw-site #page-container .list a:hover, body.rw-site #page-container .map-wrapper a:hover,
  body.rw-site #page-container .content a:focus, body.rw-site #page-container .list a:focus { color: #8a6200; }
  body.rw-site #page-container .panel .title a:hover, body.rw-site #page-container .panel .details a:hover, body.rw-site #page-container .entry .details a:hover { color: #8a6200; }
  /* gold buttons: live's white label on #e7aa18 is 2.1:1; navy label at rest (6.3:1), white on live's purple hover (7.4:1) */
  body.rw-site #page-container a.button:not(.alt, .roombooking), body.rw-site #page-container input.button:not(.alt, #bp_submit) { color: #2d2f44; }
  body.rw-site #page-container a.button:not(.alt, .roombooking):is(:hover, :focus, :active), body.rw-site #page-container input.button:not(.alt, #bp_submit):is(:hover, :focus, :active) { background-color: #474f98; color: #ffffff; }
  body.rw-site #page-container .button.roombooking:link, body.rw-site #page-container .button.roombooking:visited { color: #2d2f44; }
  body.rw-site #page-container .button.roombooking:is(:hover, :focus, :active) { background-color: #474f98; color: #ffffff; }
  body.rw-site #page-container .et_pb_section .rw-contact-form.et_pb_contact_form_container.et_pb_module .et_pb_button { color: #2d2f44 !important; font-size: 18px !important; }
  body.rw-site #page-container .et_pb_section .rw-contact-form.et_pb_contact_form_container.et_pb_module .et_pb_button:is(:hover, :focus, :active) { background: #474f98 !important; color: #ffffff !important; }
  /* the purple room/offer buttons keep white text; their white hover gets a navy label */
  body.rw-site #page-container #booking .button:is(:hover, :focus, :active) { background-color: #ffffff; color: #2d2f44; }
  body.rw-site #page-container .special .button:is(:hover, :focus, :active) { background-color: #2d2f44; color: #ffffff; }
  body.rw-site #page-container input.button.alt:is(:hover, :focus, :active), body.rw-site #page-container a.button.alt:is(:hover, :focus, :active) { color: #ffffff !important; }

  /* menu: the sub-menu's gold hover row (white on #e5a415, 2.1:1) gets a navy label */
  body.rw-site #page-container #menu li li:hover > a:link, body.rw-site #page-container #menu li li:hover > a:visited,
  body.rw-site #page-container #menu li li.active > a:link, body.rw-site #page-container #menu li li.active > a:visited { color: #2d2f44; }

  /* booking bar: white labels on the gold band (2.1:1) become navy (6.3:1) */
  body.rw-site #page-container #booking h3, body.rw-site #page-container .bookingform em { color: #2d2f44; }
  body.rw-site #page-container .bookingform span input, body.rw-site #page-container .bookingform span select { font-size: 16px; }

  /* small text up to 14px, muted greys darkened to AA */
  body.rw-site #page-container .panel { font-size: 14px; line-height: 20px; }
  body.rw-site #page-container .panel li em, body.rw-site #page-container .panel .date { font-size: 14px; color: #666666; }
  body.rw-site #page-container .panel .details, body.rw-site #page-container .entry .details { font-size: 14px; line-height: 20px; color: #666666; }
  body.rw-site #page-container .panel .details a, body.rw-site #page-container .entry .details a { color: #444444; }
  body.rw-site #page-container .paging { font-size: 14px; color: #555555; }
  body.rw-site #page-container .paging a:link, body.rw-site #page-container .paging a:visited, body.rw-site #page-container .paging a:active {
    display: inline-block; min-width: 26px; padding: 2px 6px; line-height: 22px; text-align: center; box-sizing: border-box; color: #444444; }
  body.rw-site #page-container .paging em { background: none; padding: 0; }
  body.rw-site #page-container .paging a:hover, body.rw-site #page-container .paging em a:link, body.rw-site #page-container .paging em a:visited { background-color: #666666; color: #ffffff; }
  body.rw-site #page-container span.options, body.rw-site #page-container span.result-count { font-size: 14px; }
  body.rw-site #page-container span.options a { display: inline-block; min-width: 26px; line-height: 24px; text-align: center; }
  body.rw-site #page-container div.top { font-size: 14px; line-height: 24px; }
  body.rw-site #page-container div.top a { color: #555555; }
  body.rw-site #page-container div.top a:hover { color: #ffffff; background: #666666; }
  body.rw-site #page-container blockquote .details { color: #666666; font-size: 14px; }
  body.rw-site #page-container .feature-review .highlight { color: #666666; }
  body.rw-site #page-container .content .container p.ils-required-note em.required { font-size: 14px; }
  body.rw-site #page-container .rw-contact-form p.et_pb_contact_field .input, body.rw-site #page-container .rw-contact-form input.et_pb_contact_captcha { font-size: 16px; }
  body.rw-site #page-container .content .form input:not(.button), body.rw-site #page-container .content .form select, body.rw-site #page-container .content .form textarea { font-size: 16px; }
  body.rw-site #page-container .content form > a { display: inline-block; padding: 4px 0; }

  /* home blog panel: dates and Read More on the purple panel */
  body.rw-site.rw-home #page-container .panel.blog .date { font-size: 14px; line-height: 18px; color: #ffffff; }
  body.rw-site.rw-home #page-container .panel.blog .title { font-size: 14px; }
  /* inline padding (not inline-block): an inline-block title would drop below the floated thumbnail */
  body.rw-site.rw-home #page-container .panel.blog .title a { padding: 4px 0; }
  /* :focus and :active too (Stage 3b): the band-wide .content a:focus deep gold was 1.35:1 on this purple panel */
  body.rw-site.rw-home #page-container .panel.blog .title a:is(:hover, :focus, :active) { color: #ffffff; text-decoration: underline; }
  body.rw-site.rw-home #page-container .panel.blog .more { display: inline-block; padding: 4px 12px 4px 0; font-size: 14px; line-height: 18px; color: #fde6a8; }
  body.rw-site.rw-home #page-container .panel.blog .more:is(:hover, :focus, :active) { color: #ffffff; }
  body.rw-site #page-container a.more:not(.button) { display: inline-block; padding: 4px 12px 4px 0; font-size: 14px; line-height: 18px; }

  /* the TripAdvisor strip and Google's language selector: 14px text, AA */
  body.rw-site #page-container #CDSSCROLLINGRAVE, body.rw-site #page-container #CDSSCROLLINGRAVE * { font-size: 14px !important; line-height: 20px; }
  body.rw-site #page-container #CDSSCROLLINGRAVE .rightBorder a { display: inline-block; min-height: 24px; }
  /* the review ticker (a <marquee>) ran 100px past the widget's own box on phones: logo cell and ticker share the box */
  body.rw-site #page-container #CDSSCROLLINGRAVE { display: flex; align-items: center; max-width: 100%; box-sizing: border-box; overflow: hidden; }
  body.rw-site #page-container #CDSSCROLLINGRAVE .rightBorder { flex: 0 0 auto; }
  body.rw-site #page-container #CDSSCROLLINGRAVE marquee { flex: 1 1 auto; min-width: 0; width: auto; }
  /* the blog sidebar's Latest Blogs panel is light grey: live's gold Read More (1.9:1) becomes deep gold */
  body.rw-site:not(.rw-home) #page-container .panel.blog .more { color: #8a6200; }
  body.rw-site:not(.rw-home) #page-container .panel.blog .more:hover { color: #000000; }
  body.rw-site #page-container #translate-widget .goog-te-gadget-simple { font-size: 14px; line-height: 24px; }
  body.rw-site #page-container #translate-widget .goog-te-gadget-simple a { display: inline-block; line-height: 24px; }
  body.rw-site #page-container #translate-widget .goog-te-gadget-simple span { font-size: 14px; }

  /* footer: 12/13px to 14px, links 24px tall */
  body.rw-site #page-container #footer, body.rw-site #page-container #footer p, body.rw-site #page-container .copyright,
  body.rw-site #page-container .footer-tags p, body.rw-site #page-container #footer .vcard, body.rw-site #page-container .infomenu { font-size: 14px; }
  body.rw-site #page-container .menu li, body.rw-site #page-container .vcard li { padding-top: 0; padding-bottom: 0; line-height: 24px; background-position: 0 9px; }
  body.rw-site #page-container .menu li a, body.rw-site #page-container #footer .vcard a { display: inline-block; line-height: 24px; }
  body.rw-site #page-container .footer-tags a { display: inline-block; line-height: 24px; }
  body.rw-site #page-container #footer .copyright a:hover { color: #fce224; }

  /* content links that stand alone (contact table's "get directions", site map entries): 24px tall */
  body.rw-site #page-container .content td > a:only-child, body.rw-site #page-container .content li > a:only-child { display: inline-block; min-height: 24px; line-height: 24px; }
  /* links that are a paragraph's only element: inline padding (a bigger hit area without changing how the line wraps) */
  body.rw-site #page-container :is(.content, .list) :is(p, strong) > a:only-child:not(.button, .more) { padding: 4px 0; }
  /* a link that holds only a picture (We Recommend logos): its box is the picture */
  body.rw-site #page-container .content p > a:has(> img:only-child) { display: inline-block; padding: 0; }
  body.rw-site #page-container .panel ul.archive a { display: inline-block; line-height: 24px; }
  body.rw-site #page-container .panel .title a { padding: 4px 0; }
  /* phone numbers (tel: links, Stage 3b) and the map box's Get Directions link (16px tall): 24px tall tap targets */
  body.rw-site #page-container :is(td, #footer .vcard) a.tel-link, body.rw-site #page-container .map-wrapper .map-info a { display: inline-block; line-height: 24px; }
  /* fix round 2 (3.18 r2 R2C1): a phone number inside a blog post's text is a tel: link too; inline 4px vertical padding makes a 24px+
     tap without moving a line (the /contact table's numbers use the td rule above) */
  body.rw-site #page-container .entry .summary a.tel-link { padding: 4px 0; }
  /* below 1250 every tab stop shows the ring, the selects too (live has none on them; AA band, Stage 3b) */
  body.rw-site #page-container select:focus-visible { outline: 1px auto Highlight; outline: 1px auto -webkit-focus-ring-color; }
}

/* ======================= B. below 1170: the reflow (tablet and phone) ======================= */
@media (max-width: 1169px) {
  body.rw-site #page-container .container { width: auto; max-width: 1170px; }
  body.rw-site #page-container #container-outer { width: auto; }

  /* ---- header: logo + language + menu button on a white bar; live's gold swoosh scaled under it ---- */
  body.rw-site #page-container #header { z-index: 10000; }
  body.rw-site #page-container #header .container {
    display: flex; flex-wrap: wrap; align-items: center; column-gap: 16px; row-gap: 8px; min-height: 0;
    padding: 12px 24px calc(100vw * 70 / 1170 + 10px); background: url(/wp-content/uploads/ilaunch/skin/header-bg.png) center bottom / 100% auto no-repeat #ffffff; }
  body.rw-site #page-container #header .container > .clearboth { display: none; }
  body.rw-site #page-container #header .logo { order: 1; float: none; margin: 0 auto 0 0; }
  body.rw-site #page-container #header .logo img { display: block; width: 300px; max-width: 100%; height: auto; }
  body.rw-site #page-container #translate-widget { order: 2; float: none; position: static; margin: 0; }
  body.rw-site #page-container .ils-menu-toggle { order: 3; }
  body.rw-site #page-container #menu { order: 10; flex: 1 1 100%; }

  /* the menu behind the button */
  body.rw-site #page-container .ils-menu-toggle { display: inline-flex; align-items: center; gap: 10px; height: 44px; margin: 0; padding: 0 16px; border: 0; border-radius: 4px;
    background: #474f98; color: #ffffff; font: 700 16px/44px 'PT Sans', Arial, Helvetica, sans-serif; text-transform: uppercase; letter-spacing: 1px; cursor: pointer; }
  body.rw-site #page-container .ils-menu-toggle span, body.rw-site #page-container .ils-menu-toggle span::before, body.rw-site #page-container .ils-menu-toggle span::after {
    display: block; position: relative; width: 18px; height: 2px; background: #ffffff; content: ""; }
  body.rw-site #page-container .ils-menu-toggle span::before { position: absolute; top: -6px; }
  body.rw-site #page-container .ils-menu-toggle span::after { position: absolute; top: 6px; }
  body.rw-site #page-container #header.ils-menu-open .ils-menu-toggle { background: #2b2f6b; }
  body.rw-site #page-container .ils-menu-toggle:focus-visible { outline: 3px solid #e7aa18; outline-offset: 2px; }
  body.rw-site #page-container #menu { display: none; margin: 0 -24px; text-align: left; background: #474f98; }
  body.rw-site #page-container #header.ils-menu-open #menu { display: block; }
  body.rw-site #page-container #menu > ul { display: block; width: auto; margin: 0; padding: 0; }
  body.rw-site #page-container #menu li { display: block; margin: 0; border-top: 1px solid rgba(255, 255, 255, 0.2); }
  body.rw-site #page-container #menu li a:link, body.rw-site #page-container #menu li a:visited, body.rw-site #page-container #menu li a:active,
  body.rw-site #page-container #menu li:hover a:link, body.rw-site #page-container #menu li:hover a:visited, body.rw-site #page-container #menu li:hover a:hover {
    display: block; padding: 0 24px; line-height: 50px; font-size: 17px; color: #ffffff; background: none; border-radius: 0; }
  body.rw-site #page-container #menu li.active > a:link, body.rw-site #page-container #menu li.active > a:visited { background: #2b2f6b; color: #ffffff; }
  body.rw-site #page-container #menu li ul { position: static; display: block; width: auto; padding: 0; background: none; border-radius: 0; }
  body.rw-site #page-container #menu li li { border-top: 1px solid rgba(255, 255, 255, 0.12); background: none; }
  body.rw-site #page-container #menu li ul a:link, body.rw-site #page-container #menu li ul a:visited, body.rw-site #page-container #menu li:hover ul a:link, body.rw-site #page-container #menu li:hover ul a:visited {
    padding: 0 24px 0 44px; line-height: 46px; font-size: 16px; color: #ffffff; background: none; }
  body.rw-site #page-container #menu li li:hover, body.rw-site #page-container #menu li li:hover a:hover { background: #2b2f6b; }
  body.rw-site #page-container #menu li li:hover > a:link, body.rw-site #page-container #menu li li:hover > a:visited { color: #ffffff; }
  body.rw-site #page-container #menu li.active li a:link, body.rw-site #page-container #menu li.active li a:visited { background: none; color: #ffffff; }
  body.rw-site #page-container #menu li li.active > a:link, body.rw-site #page-container #menu li li.active > a:visited { background: #2b2f6b; color: #ffffff; }
  body.rw-site #page-container #menu li.alt a:link, body.rw-site #page-container #menu li.alt a:visited, body.rw-site #page-container #menu li.alt a:hover {
    background: #e7aa18; color: #2d2f44; font-weight: 700; }

  /* ---- hero: in the flow under the header, scaled with live's proportions (no cropping of the welcome text) ---- */
  body.rw-site #page-container .container.feature-wrapper { margin-top: 0; padding: 0; }
  body.rw-site #page-container #feature { position: relative; height: auto; min-width: 0; }
  body.rw-site #page-container .featureimage { height: max(190px, calc(100vw * 420 / 1170)); background-size: cover !important; background-position: center center; }
  body.rw-site #page-container .featuremain { position: relative !important; height: max(190px, calc(100vw * 420 / 1170)); }
  body.rw-site.rw-home #page-container .featuremain { position: relative !important; height: max(230px, calc(100vw * 670 / 1170)); }
  body.rw-site #page-container .featuremain .slide { background-size: cover !important; background-position: center top !important; }
  body.rw-site #page-container .featuremain .slide-deco { width: 100% !important; height: 100% !important; }
  body.rw-site #page-container .featuremain .slide-deco img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
  body.rw-site #page-container .featuremain .sp-bullet-nav { bottom: 14px !important; right: 16px !important; top: auto !important; }
  body.rw-site #page-container .featuremain .sp-bullet { width: 10px !important; height: 10px !important; margin: 0 4px; border-radius: 50%; }

  /* ---- booking: live's gold band as a block under the hero; navy labels, the form still submits as live's ---- */
  body.rw-site #page-container #booking {
    position: static; width: auto; height: auto; margin: 0; padding: 16px 24px 18px; text-align: left;
    background: linear-gradient(180deg, #d09222 0, #eeaa30 22%, #f5bb53 45%, #eda92f 78%, #cf9021 100%); background-color: #e7aa18; }
  body.rw-site #page-container #booking form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; width: auto; margin: 0; }
  body.rw-site #page-container #booking h3 { float: none; flex: 1 1 100%; margin: 0; font-size: 30px; line-height: 34px; text-align: left; }
  body.rw-site #page-container .bookingform { float: none; display: flex; flex-wrap: wrap; gap: 12px 16px; flex: 1 1 auto; min-width: 0; }
  body.rw-site #page-container .bookingform span.check-in, body.rw-site #page-container .bookingform span.duration { float: none; flex: 1 1 220px; width: auto; min-width: 0; padding: 0; }
  body.rw-site #page-container .bookingform em { display: block; margin: 0 0 4px; font-size: 14px; line-height: 18px; }
  body.rw-site #page-container .bookingform .datepicker_wrap { display: flex; align-items: stretch; width: 100%; }
  body.rw-site #page-container .bookingform span input { float: none; flex: 1 1 auto; width: auto; min-width: 0; height: 44px; }
  body.rw-site #page-container .bookingform .datepicker_wrap img { float: none; display: block; flex: 0 0 auto; width: auto; height: 44px; }
  body.rw-site #page-container .bookingform span select { float: none; display: block; width: 100%; height: 44px; box-sizing: border-box; background-position: right center; }
  /* live's dotted-frame arrow image is drawn for a 151px button; the wider buttons here are plain purple with a bold label */
  body.rw-site #page-container #booking .button { float: none; flex: 0 0 auto; width: 170px; height: 44px; margin: 0; padding: 0 16px; font-size: 17px; font-weight: 700; line-height: 44px; text-align: center; background-image: none; box-sizing: border-box; }
  body.rw-site #page-container #booking .clearboth { display: none; }

  /* ---- content bands ---- */
  body.rw-site #page-container .content .container { width: auto; padding: 28px 24px 32px; }
  body.rw-site #page-container .content .left, body.rw-site #page-container .content .right { float: none; width: auto; }
  body.rw-site #page-container .content img { max-width: 100%; height: auto; }
  body.rw-site #page-container .content table { max-width: 100%; }
  body.rw-site #page-container .content iframe { max-width: 100%; }
  body.rw-site #page-container .content table[width="500"] { width: 100%; }
  body.rw-site #page-container .content h1 { font-size: 48px; line-height: 54px; }
  body.rw-site #page-container .socialwidgets { display: none; }
  body.rw-site #page-container .gallery, body.rw-site #page-container .map-wrapper, body.rw-site #page-container .list { width: auto; }

  /* home: welcome column, then the offer column; the blog panel, then the review and closing line over live's photo */
  body.rw-site.rw-home #page-container .content .container { padding: 0; display: flow-root; }
  body.rw-site.rw-home #page-container .content .left { margin: 28px 24px 0; }
  body.rw-site.rw-home #page-container .content .right { margin: 28px 24px 32px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
  body.rw-site.rw-home #page-container .content .right > .clearboth { display: none; }
  body.rw-site.rw-home #page-container .homebannertext { float: none; margin: 0; padding: 16px 20px; }
  body.rw-site.rw-home #page-container .homebannertext a { display: inline-block; }
  body.rw-site.rw-home #page-container .special .slidepark { width: 100%; max-width: 450px; height: auto; aspect-ratio: 450 / 439; }
  body.rw-site.rw-home #page-container .special .slide { background-size: contain !important; background-position: center !important; }
  body.rw-site.rw-home #page-container .special h3 { left: 0; right: 0; width: auto; }
  body.rw-site.rw-home #page-container .content h1 { font-size: 46px; line-height: 52px; }
  body.rw-site.rw-home #page-container .content-img { float: left; width: 210px; height: auto; margin: 6px 24px 16px 0; padding: 6px; }
  body.rw-site.rw-home #page-container .content-img img { width: 100%; height: auto; }
  body.rw-site.rw-home #page-container .content-text { float: none; width: auto; margin: 0; overflow: visible; }
  /* live's home paragraphs carry clear: both, which pushed the text under the photo */
  body.rw-site.rw-home #page-container .content .container .content-text p { clear: none; }
  body.rw-site.rw-home #page-container .content-text::after { content: ""; display: block; clear: both; }
  body.rw-site.rw-home #page-container .content.alt { width: auto; background: none; }
  body.rw-site.rw-home #page-container .blog-wrapper { float: none; width: auto; min-height: 0; margin: 0 24px; }
  body.rw-site.rw-home #page-container .panel.blog { width: auto; min-height: 0; }
  body.rw-site.rw-home #page-container .panel.blog ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  body.rw-site.rw-home #page-container .panel.blog li { float: none; width: auto; margin: 0; line-height: 20px; }
  /* the post thumbnails are 110 x 100 sources: shown at their own size, never stretched */
  body.rw-site.rw-home #page-container .panel.blog .blog-image { float: none; width: 110px; height: 100px; margin: 0 0 10px; }
  body.rw-site.rw-home #page-container .panel.blog .blog-image a { width: 110px; height: 100px; }
  body.rw-site.rw-home #page-container .panel.blog .clearleft { display: none; }
  body.rw-site.rw-home #page-container .contentbottom { float: none; width: auto; margin: 0; padding: 32px 24px 0; }
  body.rw-site.rw-home #page-container .feature-review { position: static; width: auto; max-width: 420px; margin: 0 auto 24px; padding: 30px 40px 0; background-size: 100% auto; }
  body.rw-site.rw-home #page-container .bottom-text { position: static; width: auto; max-width: 560px; margin: 0 auto; text-align: center; }
  body.rw-site.rw-home #page-container .content .container .bottom-text p { margin: 0 0 18px; }
  /* live's closing photo (couple by the pool) as a band under the text, cropped from the left so its grey fade drops off */
  body.rw-site.rw-home #page-container .contentbottom::after { content: ""; display: block; height: clamp(220px, 60vw, 460px); margin: 8px -24px 0; background: url(/wp-content/uploads/ilaunch/skin/content-bottom-bg.png) right bottom / cover no-repeat; }
  body.rw-site.rw-home #page-container .content.alt > .clearboth { display: none; }

  /* rooms: photo strip, main photo, then the text */
  body.rw-site #page-container .list { padding: 28px 24px 32px; }
  body.rw-site #page-container .list .entry { padding-top: 0; }
  body.rw-site #page-container .list .entry .room-border-top, body.rw-site #page-container .list .entry .room-border-bottom { width: 100%; }
  body.rw-site #page-container .list .entry .images { float: none; width: auto; margin: 0 0 20px; display: flex; flex-direction: column-reverse; gap: 10px; }
  body.rw-site #page-container .gallery.main { float: none; width: auto; }
  body.rw-site #page-container .gallery.main img { width: 100%; height: auto; max-width: 523px; }
  body.rw-site #page-container .gallery.room { float: none; width: auto; display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: 6px; }
  body.rw-site #page-container .gallery.room a { flex: 0 0 auto; scroll-snap-align: start; }
  body.rw-site #page-container .gallery.room img { float: none; width: 117px; height: auto; }
  body.rw-site #page-container .gallery.room .clearleft { display: none; }

  /* photo galleries (facilities, accommodation, image gallery, a post): an even grid */
  body.rw-site #page-container .gallery.gallery-panel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 20px 24px; }
  body.rw-site #page-container .gallery.gallery-panel > h3 { grid-column: 1 / -1; margin: 0 0 6px; }
  body.rw-site #page-container .gallery.gallery-panel > a:not(.gallery-item) { position: absolute; }
  body.rw-site #page-container .gallery.gallery-panel > .clearleft, body.rw-site #page-container .gallery.gallery-panel > br { display: none; }
  body.rw-site #page-container .gallery.gallery-panel a.gallery-item { display: block; }
  body.rw-site #page-container .gallery.gallery-panel img { float: none; display: block; width: 100%; height: auto; padding: 0; }

  /* blog list, archives, FAQ: the sidebar under the list */
  body.rw-site #page-container .list .left, body.rw-site #page-container .list .right { float: none; width: auto; }
  body.rw-site #page-container .list .right { margin-top: 28px; }
  body.rw-site #page-container .list.alt .right { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
  body.rw-site #page-container .list.alt .right .panel { margin: 0; }
  body.rw-site #page-container .list .entry h2 { font-size: 26px; line-height: 32px; }

  /* maps */
  body.rw-site #page-container .map-wrapper { padding: 20px 24px; }
  body.rw-site #page-container .map-container { height: 420px; margin-top: 24px; }

  /* contact and review forms: two columns of label-over-field */
  body.rw-site #page-container .rw-contact-form form.et_pb_contact_form { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; row-gap: 14px; padding-top: 0; }
  body.rw-site #page-container .content .container .rw-contact-form p.et_pb_contact_field, body.rw-site #page-container .rw-contact-form p.et_pb_contact_field[data-type="text"],
  body.rw-site #page-container .content .container .rw-contact-form p.et_pb_contact_field:has(> [data-required_mark="required"]) {
    display: block; grid-column: auto; margin: 0; background: none; }
  body.rw-site #page-container .rw-contact-form p.et_pb_contact_field[data-type="text"] { grid-column: 1 / -1; }
  body.rw-site #page-container .rw-contact-form .et_pb_contact_form_label { padding: 0 0 4px; line-height: 24px; letter-spacing: 0; }
  body.rw-site #page-container .rw-contact-form p.et_pb_contact_field:has(> [data-required_mark="required"]) > .et_pb_contact_form_label::after {
    content: " *"; color: #8a6200; }
  body.rw-site #page-container .rw-contact-form p.et_pb_contact_field .input { display: block; box-sizing: border-box; width: 100%; height: 48px; padding: 10px 14px; }
  body.rw-site #page-container .rw-contact-form p.et_pb_contact_field textarea.input { width: 100%; height: 150px; }
  body.rw-site #page-container .content .container .rw-contact-form .et_pb_contact_right p.clearfix { grid-column: 1 / -1; margin: 0; padding: 30px 0 0; min-height: 0; line-height: 48px; }
  body.rw-site #page-container .rw-contact-form .et_pb_contact_right p.clearfix::before { padding: 0; line-height: 24px; letter-spacing: 0; }
  body.rw-site #page-container .rw-contact-form input.et_pb_contact_captcha { box-sizing: border-box; width: 90px; max-width: none; height: 48px; vertical-align: middle; }
  body.rw-site #page-container .et_pb_section .rw-contact-form.et_pb_contact_form_container.et_pb_module .et_pb_button { grid-column: 1 / -1; justify-self: start; width: 220px; height: 50px; margin: 6px 0 0 !important; }
  body.rw-site #page-container .content .container p.ils-required-note { padding: 0; margin: 10px 0 24px; text-align: left; }
  body.rw-site #page-container .content .container p.ils-required-note em.required { display: inline-block; }

  /* ---- footer ---- */
  body.rw-site #page-container .container.footer-wrapper { width: auto; }
  body.rw-site #page-container #footer .footer-top-padder { display: block; width: 100%; height: 90px; }
  body.rw-site.rw-home #page-container #footer { margin-top: 100px; }
  body.rw-site #page-container .copyright { display: block; padding: 100px 24px 24px; text-align: center; }
  body.rw-site #page-container .copyright .left, body.rw-site #page-container .copyright .right { float: none; width: auto; margin: 0; text-align: center; }
  body.rw-site #page-container .menu.footermenu { text-align: center; }
  body.rw-site #page-container .socialmedia { margin-top: 16px; }
  body.rw-site #page-container .socialmedia a:first-child { margin-left: 5px; }
  body.rw-site #page-container #footer .vcard { padding: 14px 24px; }
  body.rw-site #page-container .infomenu { padding: 8px 24px; }
  /* inner pages: the logo circle sits on the 90px white strip and reaches 198px down; the footer text starts below it */
  body.rw-site:not(.rw-home) #page-container .copyright { padding-top: 122px; }
}

/* ======================= C. phone: below 768 ======================= */
@media (max-width: 767px) {
  /* header */
  body.rw-site #page-container #header .container { column-gap: 12px; padding: 10px 16px calc(100vw * 70 / 1170 + 8px); }
  body.rw-site #page-container #header .logo { flex: 1 1 0; min-width: 0; }
  body.rw-site #page-container #header .logo img { width: 230px; }
  body.rw-site #page-container .ils-menu-toggle { padding: 0 14px; }
  body.rw-site #page-container #translate-widget { order: 4; flex: 1 1 100%; text-align: right; }
  body.rw-site #page-container #menu { margin: 0 -16px; }
  body.rw-site #page-container #menu li a:link, body.rw-site #page-container #menu li a:visited, body.rw-site #page-container #menu li a:active,
  body.rw-site #page-container #menu li:hover a:link, body.rw-site #page-container #menu li:hover a:visited { padding: 0 16px; }
  body.rw-site #page-container #menu li ul a:link, body.rw-site #page-container #menu li ul a:visited, body.rw-site #page-container #menu li:hover ul a:link, body.rw-site #page-container #menu li:hover ul a:visited { padding: 0 16px 0 36px; }

  /* booking: stacked, 16px fields, full-width Book Now */
  body.rw-site #page-container #booking { padding: 14px 16px 18px; }
  body.rw-site #page-container #booking form { display: block; }
  body.rw-site #page-container #booking h3 { font-size: 26px; line-height: 30px; margin: 0 0 10px; }
  body.rw-site #page-container .bookingform { flex-direction: column; flex-wrap: nowrap; gap: 10px; }
  body.rw-site #page-container .bookingform span.check-in, body.rw-site #page-container .bookingform span.duration { flex: 0 0 auto; }
  body.rw-site #page-container .bookingform span input, body.rw-site #page-container .bookingform .datepicker_wrap img, body.rw-site #page-container .bookingform span select { height: 48px; }
  body.rw-site #page-container #booking .button { display: block; width: 100%; height: 52px; margin: 14px 0 0; padding: 0 20px; font-size: 18px; line-height: 52px; }

  /* type: headings scaled, nothing under 14px; justified text left aligned */
  body.rw-site #page-container .content .container { padding: 22px 16px 26px; }
  body.rw-site #page-container .content h1, body.rw-site.rw-home #page-container .content h1 { font-size: 40px; line-height: 46px; margin-bottom: 14px; }
  body.rw-site #page-container .content h2 { font-size: 24px; line-height: 30px; }
  body.rw-site #page-container .content h3 { font-size: 21px; line-height: 27px; }
  body.rw-site #page-container .content h4 { font-size: 19px; line-height: 25px; }
  body.rw-site #page-container .content .container p { margin: 14px 0; }
  body.rw-site #page-container :is(.content, .list) :is(p, li, td, h1, h2, h3, h4)[style*="justify"] { text-align: left !important; }
  body.rw-site #page-container .content table, body.rw-site #page-container .content tbody, body.rw-site #page-container .content tr { max-width: 100%; }
  body.rw-site #page-container .content table[width="500"] { width: 100%; }
  /* accommodation's room comparison table: fixed columns (labels 32%, three room columns about 23%), 14px cells, long words wrap */
  body.rw-site #page-container .content .container table#bluish { width: 100%; table-layout: fixed; }
  body.rw-site #page-container .content .container table#bluish :is(th, td) { font-size: 14px; line-height: 19px; overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; }
  body.rw-site #page-container .content .container table#bluish th { width: 32%; }
  body.rw-site #page-container .content .container table#bluish td { padding: 4px 3px; }

  /* home */
  body.rw-site.rw-home #page-container .content .left { margin: 22px 16px 0; }
  body.rw-site.rw-home #page-container .content .right { margin: 22px 16px 26px; grid-template-columns: minmax(0, 1fr); gap: 18px; }
  body.rw-site.rw-home #page-container .content-img { float: none; width: auto; max-width: 250px; margin: 0 auto 18px; }
  body.rw-site.rw-home #page-container .special .slidepark { max-width: 450px; margin: 0 auto; }
  body.rw-site.rw-home #page-container .blog-wrapper { margin: 0 16px; padding: 8px; }
  body.rw-site.rw-home #page-container .panel.blog { padding: 12px; }
  body.rw-site.rw-home #page-container .panel.blog h3 { font-size: 50px; line-height: 60px; }
  body.rw-site.rw-home #page-container .panel.blog ul { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  body.rw-site.rw-home #page-container .panel.blog li { display: grid; grid-template-columns: 110px minmax(0, 1fr); column-gap: 14px; align-items: start; }
  body.rw-site.rw-home #page-container .panel.blog .blog-image { width: 110px; height: 100px; aspect-ratio: auto; margin: 4px 0 0; }
  body.rw-site.rw-home #page-container .contentbottom { padding: 26px 16px 0; }
  body.rw-site.rw-home #page-container .feature-review { padding: 26px 22px 0; }
  body.rw-site.rw-home #page-container .feature-review p { font-size: 18px !important; line-height: 26px !important; }
  body.rw-site.rw-home #page-container .content .container .bottom-text p { font-size: 21px; line-height: 29px; }
  body.rw-site.rw-home #page-container .bottom-text a.button { display: block; padding: 15px 20px; }
  body.rw-site.rw-home #page-container .contentbottom::after { margin: 8px -16px 0; }

  /* rooms */
  body.rw-site #page-container .list { padding: 22px 16px 26px; }
  body.rw-site #page-container .list .entry { margin: 26px 0; }
  body.rw-site #page-container .gallery.room img { width: 96px; }
  body.rw-site #page-container .list .entry h2 { font-size: 23px; line-height: 29px; }
  body.rw-site #page-container .button.roombooking { display: block; width: auto; padding: 15px 20px; font-size: 18px; font-weight: 700; line-height: 20px; text-align: center; background-image: none; }

  /* galleries two up */
  body.rw-site #page-container .gallery.gallery-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 16px; }

  /* blog list, post, sidebar */
  body.rw-site #page-container .list.alt .right { grid-template-columns: minmax(0, 1fr); }
  body.rw-site #page-container .list .entry img.blog-image { width: 120px; height: auto; margin: 4px 14px 8px 0; }
  body.rw-site.single-post #page-container .content .entry img.blog-image { float: none; display: block; width: auto; max-width: 100%; margin: 0 0 16px; }
  body.rw-site #page-container .panel { padding: 16px; }
  body.rw-site #page-container .panel ul.archive { display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px; }
  body.rw-site #page-container .panel ul.archive li { margin: 0; }
  /* not the sidebar VIEW MORE link (Stage 3b): zeroing its right padding put the arrow over the final E */
  body.rw-site #page-container .panel ul.archive a:not(.more) { padding: 3px 0; }
  body.rw-site #page-container .paging { text-align: left; line-height: 36px; }
  body.rw-site #page-container .paging a:link, body.rw-site #page-container .paging a:visited, body.rw-site #page-container .paging em a:link { min-width: 34px; line-height: 30px; }
  body.rw-site #page-container .paging .options, body.rw-site #page-container span.options, body.rw-site #page-container span.result-count { display: block; margin: 4px 0; }

  /* reviews */
  body.rw-site #page-container blockquote { padding: 6px 0 16px 54px; background-size: 40px auto; }

  /* maps */
  body.rw-site #page-container .map-wrapper { padding: 16px; }
  body.rw-site #page-container .map-container { height: 340px; }

  /* contact: one column (the two address blocks, a 50/50 layout table on live, stack) */
  body.rw-site #page-container .content table[width="100%"], body.rw-site #page-container .content table[width="100%"] > tbody,
  body.rw-site #page-container .content table[width="100%"] > tbody > tr, body.rw-site #page-container .content table[width="100%"] > tbody > tr > td { display: block; width: auto; }
  body.rw-site #page-container .content table[width="100%"] > tbody > tr > td + td { margin-top: 18px; }
  body.rw-site #page-container .content table[width="500"] td { padding-right: 6px; }
  body.rw-site #page-container .rw-contact-form form.et_pb_contact_form { grid-template-columns: minmax(0, 1fr); }
  body.rw-site #page-container .rw-contact-form .et_pb_contact_form_label { font-size: 15px; }
  body.rw-site #page-container .et_pb_section .rw-contact-form.et_pb_contact_form_container.et_pb_module .et_pb_button { justify-self: stretch; width: 100%; height: 52px; }

  /* search and site map */
  body.rw-site #page-container table.form.searchpage, body.rw-site #page-container table.form.searchpage tbody, body.rw-site #page-container table.form.searchpage tr { display: block; width: auto; }
  body.rw-site #page-container table.form.searchpage td { display: block; width: auto; padding: 6px 0; }
  body.rw-site #page-container .content .form.searchpage input, body.rw-site #page-container .content .form.searchpage input.button { box-sizing: border-box; width: 100%; max-width: 100%; height: 48px; }

  /* footer: one column */
  body.rw-site #page-container .copyright { padding: 96px 16px 22px; }
  body.rw-site #page-container .menu li, body.rw-site #page-container .vcard li { margin: 0 6px 0 0; padding-left: 12px; }
  body.rw-site #page-container #footer .vcard { padding: 14px 16px; }
  body.rw-site #page-container #footer .vcard li { display: block; margin: 0; padding: 0; background: none; }
  body.rw-site #page-container .infomenu { padding: 10px 16px 14px; }
  body.rw-site #page-container .infomenu li { display: block; margin: 0; padding: 0; background: none; }
  body.rw-site #page-container .infomenu li a { padding: 4px 0; }
}

/* the photo lightbox above everything: moved to rw-design.css rule 17 in fix round 1 (3.18 B1), where it applies at every width
   (live's footer, z-index 9999, also sat above an open photo from 1250 up, because this port's footer is outside #container-outer). */
/* the booking calendar below 1250: AA labels (live's white on gold and #444 on #777 day names fail) */
@media (max-width: 1249px) {
  body.rw-site #datepicker_div .datepicker_control a, body.rw-site #datepicker_div .datepicker_control { color: #2d2f44 !important; }
  body.rw-site #datepicker_div .datepicker_control a:hover { background: #fdf3d8 !important; }
  body.rw-site #datepicker_div .datepicker_titleRow, body.rw-site #datepicker_div .datepicker_titleRow td { background: #5c5c5c; color: #ffffff; }
  body.rw-site #datepicker_div .datepicker_currentDay a { color: #2d2f44 !important; }
}
/* the booking calendar (appended to <body>) at a usable size on phones */
@media (max-width: 767px) {
  body.rw-site #datepicker_div { width: calc(100vw - 32px) !important; left: 16px !important; font-size: 16px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35); z-index: 100001 !important; }
  body.rw-site #datepicker_div .datepicker_oneMonth { width: 100%; }
  body.rw-site #datepicker_div .datepicker_control a, body.rw-site #datepicker_div .datepicker_links a { display: block; padding: 0 12px !important; line-height: 42px; font-size: 15px; }
  body.rw-site #datepicker_div .datepicker_control, body.rw-site #datepicker_div .datepicker_links { padding: 0; }
  body.rw-site #datepicker_div .datepicker_header select { font-size: 16px; height: 36px; padding: 0 6px; }
  body.rw-site #datepicker_div td { font-size: 16px !important; height: 42px; line-height: 42px; }
  body.rw-site #datepicker_div td a { line-height: 42px; }
  body.rw-site #datepicker_div .datepicker_header { height: auto; padding: 6px 0; }
  body.rw-site #datepicker_div table.datepicker :is(th, td) { font-size: 16px; line-height: 42px; }
}

/* ======================= fix round 1 (3.18 parts B and C, 2026-10-08). Nothing here applies from 1250 up. ======================= */
/* C1: the booking calendar from 768 to 1249 at a usable size. It was live's 185px desktop calendar: "<Prev", "Today", "Next>",
   "Clear" and "Close" 11.2px on 16px tap areas, dates 23x22. Now 300px wide, 15px controls on 34px rows, 16px dates in 34px
   rows (the phone calendar's sizing scaled to a tablet). Below 768 the phone calendar above applies. */
@media (min-width: 768px) and (max-width: 1249px) {
  body.rw-site #datepicker_div { width: 300px; font-size: 16px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35); }
  body.rw-site #datepicker_div .datepicker_oneMonth { width: 100%; }
  body.rw-site #datepicker_div .datepicker_control, body.rw-site #datepicker_div .datepicker_links { padding: 0; }
  body.rw-site #datepicker_div .datepicker_control a, body.rw-site #datepicker_div .datepicker_links a { display: block; padding: 0 10px !important; line-height: 34px; font-size: 15px; }
  body.rw-site #datepicker_div .datepicker_links label { display: block; padding: 0 10px; line-height: 34px; font-size: 15px; }
  body.rw-site #datepicker_div .datepicker_header { height: auto; padding: 4px 0; }
  body.rw-site #datepicker_div .datepicker_header select { font-size: 16px; height: 30px; padding: 0 6px; }
  body.rw-site #datepicker_div td { font-size: 16px !important; height: 34px; line-height: 34px; }
  body.rw-site #datepicker_div td a { line-height: 34px; }
  body.rw-site #datepicker_div table.datepicker :is(th, td) { font-size: 16px; line-height: 34px; }
}
@media (max-width: 1249px) {
  /* C2: /site-map. Every link is a block on 24px lines: a wrapped post title keeps its bullet beside its FIRST line (the
     inline-block links put the marker beside the last line, so one title read as two items), and the six top-level links
     (inline, 17px tall, 11px from the next link) are 24px taps like the rest. */
  body.rw-site.page-id-1302 #page-container .content ul li > a { display: block; min-height: 24px; line-height: 24px; }
  /* C3: /search results: the address line under each result (a 17px link) gets inline padding, a 25px tap with no line moving
     (the titles already had it). /contact: the address table's "get directions" (89 x 17) the same. */
  body.rw-site.page-id-1301 #page-container .content p > a { padding: 4px 0; }
  body.rw-site #page-container .content td > a[href*="maps.google."] { padding: 4px 0; }
}
@media (min-width: 768px) and (max-width: 1169px) {
  /* C4: in the 768 to 1169 reflow, a post heading that starts beside the floated lead photo stays one block beside it (post 107's
     "Experience Surfers Paradise..." dropped its last words under the photo at 900 to 1024), and the home welcome text is one
     column beside the framed photo (its last paragraph wrapped under the photo at 768 to 850). */
  body.rw-site.single-post #page-container .content .entry .summary :is(h1, h2, h3, h4, h5, h6) { display: flow-root; }
  body.rw-site.rw-home #page-container .content-text { display: flow-root; }
}
@media (max-width: 767px) {
  /* C6: a floated content photo that fills a phone's width (the /promotions offer photo) keeps a gap above the text under it (2px) */
  body.rw-site #page-container .content .container p > img[style*="float"] { margin-bottom: 14px; }
}