/* ar-mobile.css: Aussie Resort designed tablet and phone layer (Stage 4, skill Rule 2). Loaded LAST. Nothing here applies at 1250px and up.
   Started from the kit's ilaunch-responsive.template.css (copy with its tokens expanded for this site: build/stage4/ar-responsive.from-kit.css). That
   template is written for the V2 markup (#header, #booking, #feature, #footer .container) which this older Bootstrap 3 skin does not have, so its
   SELECTORS did not carry over; its RULES did, re-aimed at this markup: every button state AA below 1250 (rest dark text on live's orange, hover/focus/
   active white on live's own hover blue), the 768-1249 band at a 14px floor with 16px inputs, 24px taps, footer spacing, list links kept inline,
   justified text left-aligned on phones, tel: links in the contact table inline, the booking calendar at a usable size, and a menu button
   below the width where live's nav no longer fits on one row. Live itself is responsive (viewport meta, Bootstrap 3 grid, responsive.css): its own
   390 and 768 layouts (peel-tab booking bar, hamburger menu, stacked rooms) are kept where they work for a visitor and redesigned where they did not.
   AA palette (computed for THIS site, build/stage4/cr.py):
     buttons        #1a1a1a on live's orange #ee9f17 (7.96:1; live's white on it is 2.19:1); hover/focus/active #ffffff on #225eab (6.45:1, live's hover)
     header phone   #a46200 on white (4.85:1; live's #ee9f17 is 2.19:1)
     review details #707070 on white (4.95:1; live's #999 is 2.85:1)
     FAQ banner     opaque #2460af (live 85% over the photo/map), small line #e3ebf7 (5.20:1), heading #ffffff (6.24:1)
     phone menu     live's #225dab panel, white text (6.52:1); current item #1a1a1a on #ee9f17; hover/focus white on #00717c (5.75:1, live's own)
   Bands: 1170-1249 live's layout with the fixed rows fitted; 992-1169 live's tablet-landscape reflow, nav on one row; 768-991 menu button, peel-tab
   booking bar opening as a block under the photo; below 768 the phone design. */

/* ======================= below 1250: shared AA layer (every state), 14px floor, 16px inputs, 24px taps ======================= */
@media (max-width: 1249px) {
  /* live's .container is a fixed 1200px (general.css) until responsive.css makes it 100% at 1170: 1171-1199 scrolled sideways */
  body.ar-site #page-container .container { max-width: 100%; }

  /* every button, rest: dark text on live's orange */
  body.ar-site #page-container .btn-default, body.ar-site #page-container .btn-primary, body.ar-site #page-container a.btn, body.ar-site #page-container input.btn,
  body.ar-site #page-container .navbar-default .navbar-nav > li > a.btn, body.ar-site #page-container .navbar-default .navbar-nav > li > a.btn-default,
  body.ar-site #page-container .bookonline .btn-default, body.ar-site #page-container .roomtext p .roombooking,
  body #page-container .et_pb_section .ar-contact-form.et_pb_contact_form_container.et_pb_module .et_pb_contact_submit.et_pb_button {
    color: #1a1a1a !important; background-color: #ee9f17 !important; text-decoration: none !important; }
  /* hover, focus and the tap that sticks on a phone: white on live's own hover blue */
  body.ar-site #page-container .btn-default:hover, body.ar-site #page-container .btn-default:focus, body.ar-site #page-container .btn-default:active,
  body.ar-site #page-container .btn-primary:hover, body.ar-site #page-container .btn-primary:focus, body.ar-site #page-container .btn-primary:active,
  body.ar-site #page-container a.btn:hover, body.ar-site #page-container a.btn:focus, body.ar-site #page-container a.btn:active,
  body.ar-site #page-container input.btn:hover, body.ar-site #page-container input.btn:focus, body.ar-site #page-container input.btn:active,
  body.ar-site #page-container .navbar-default .navbar-nav > li > a.btn:hover, body.ar-site #page-container .navbar-default .navbar-nav > li > a.btn:focus, body.ar-site #page-container .navbar-default .navbar-nav > li > a.btn:active,
  body.ar-site #page-container .navbar-default .navbar-nav > li > a.btn-default:hover, body.ar-site #page-container .navbar-default .navbar-nav > li > a.btn-default:focus, body.ar-site #page-container .navbar-default .navbar-nav > li > a.btn-default:active,
  body.ar-site #page-container .bookonline .btn-default:hover, body.ar-site #page-container .bookonline .btn-default:focus, body.ar-site #page-container .bookonline .btn-default:active,
  body.ar-site #page-container .roomtext p .roombooking:hover, body.ar-site #page-container .roomtext p .roombooking:focus, body.ar-site #page-container .roomtext p .roombooking:active,
  body #page-container .et_pb_section .ar-contact-form.et_pb_contact_form_container.et_pb_module .et_pb_contact_submit.et_pb_button:hover,
  body #page-container .et_pb_section .ar-contact-form.et_pb_contact_form_container.et_pb_module .et_pb_contact_submit.et_pb_button:focus,
  body #page-container .et_pb_section .ar-contact-form.et_pb_contact_form_container.et_pb_module .et_pb_contact_submit.et_pb_button:active {
    color: #ffffff !important; background-color: #225eab !important; }

  /* header: the phone number in a darker orange, logo and social links as real tap areas */
  body.ar-site #page-container header .phone a, body.ar-site #page-container header .phone a:hover, body.ar-site #page-container header .phone a:focus, body.ar-site #page-container header .phone a:active { color: #a46200; }
  body.ar-site #page-container a.logo, body.ar-site #page-container header .phone a { display: inline-block; }
  body.ar-site #page-container .socialmedia a { display: inline-block; vertical-align: middle; }
  body.ar-site #page-container .socialmedia a:focus i, body.ar-site #page-container .socialmedia a:hover i { background-color: #225eab; }

  /* booking bar: a solid navy ground (live: 80% navy over the photo) so its white heading is AA whatever photo is behind it */
  body.ar-site #page-container .bookonline { background-color: #0b2c58; }
  body.ar-site #page-container .bookonline .booking-bg { opacity: 1; }
  /* the FAQ and blog sidebars (shown from 992): 24px link rows */
  body.ar-site #page-container .sidebar .panel li > a, body.ar-site #page-container .sidebar .title a { display: inline-block; padding: 4px 0; }
  /* booking bar: 14px labels, 16px fields */
  body.ar-site #page-container .bookonline form label { font-size: 14px; }
  body.ar-site #page-container .bookonline input[type=text], body.ar-site #page-container .book-duration select { font-size: 16px; }

  /* text: 14px floor, AA greys */
  body.ar-site #page-container footer .copyrights, body.ar-site #page-container footer .copyrights p, body.ar-site #page-container footer .footer-tags a { font-size: 14px; }
  body.ar-site #page-container blockquote .details { color: #707070; }
  body.ar-site #page-container .map-container .map-info { font-size: 14px; line-height: 20px; }
  body.ar-site #page-container .map-container .map-info a { display: inline-block; padding: 4px 0; }

  /* the footer and the home text panels sit on a light paper texture (footer-bg.jpg 228-254 grey, room-text-bg.jpg 236-254): their ground colour is
     set to the texture's DARKEST grey under the image (invisible, the tiles cover it) so the contrast checks measure the worst case, not white */
  body.ar-site #page-container footer.footer { background-color: #e4e4e4; }
  body.ar-site.ar-home #page-container .mid-banner-wrapper { background-color: #ececec; }
  /* rooms: live's desktop thumbnail strip kept at every width (live's own tablet CSS wrapped it into rows that ended in one lone photo), swipeable */
  body.ar-site #page-container .rooms .gallery { white-space: nowrap; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; padding: 0; }
  body.ar-site #page-container .rooms .gallery .thumb { display: inline-block; margin: 0 1px 0 0; scroll-snap-align: start; }
  body.ar-site #page-container .rooms .gallery .thumb img { display: block; }
  /* footer links: 24px+ tap rows */
  body.ar-site #page-container footer .fmenu a { display: inline-block; padding: 4px 0; }
  body.ar-site #page-container footer .vcard a { display: inline-block; padding: 4px 0; margin: -4px 0; }   /* the negative margin keeps the line where it was: a taller tap area without moving Ph: below FAX: */
  body.ar-site #page-container footer .footer-tags a { display: inline-block; padding: 3px 0; }

  /* home FAQ banner: opaque (live lets the photo or map show through at 85%), AA on its own colour */
  body.ar-site.ar-home #page-container .faq-wrapper .text-content { background-color: #2460af; }
  body.ar-site.ar-home #page-container .faq-wrapper::after { background: #2460af; }
  body.ar-site.ar-home #page-container .faq-wrapper .text-content a { color: #e3ebf7; }
  body.ar-site.ar-home #page-container .faq-wrapper .text-content a strong { color: #ffffff; }

  /* contact table (live: a fixed 500px table that scrolls the page sideways on a phone) and the tel: links in it */
  body.ar-site #page-container .main-content table { max-width: 100%; }
  body.ar-site #page-container .main-content td a[href^="tel:"], body.ar-site #page-container .main-content td a[href^="mailto:"] { display: inline-block; padding: 4px 0; }

  /* copy pasted into live's pages with inline 11-13px type (payment terms): the 14px floor */
  body.ar-site #page-container .main-content [style*="font-size: 12px"], body.ar-site #page-container .main-content [style*="font-size:12px"],
  body.ar-site #page-container .main-content [style*="font-size: 11px"], body.ar-site #page-container .main-content [style*="font-size: 13px"] { font-size: 14px !important; }
  /* the same pasted copy names the font Inter, which neither site loads (the browser falls back to Times): the site's own Roboto below 1250 */
  body.ar-site #page-container .main-content [style*="font-family: Inter"], body.ar-site #page-container .main-content [style*="font-family:Inter"] { font-family: 'Roboto', Arial, Helvetica, sans-serif !important; }
  /* site map: links stay inline (a wrapped item keeps its bullet on the first line) with vertical padding for a 24px tap */
  body.ar-site.page-id-1142 #page-container .main-content li { padding: 2px 0; }
  body.ar-site.page-id-1142 #page-container .main-content li a { padding: 4px 0; }
  /* the unsubscribe form's email field: 16px */
  body.ar-site #page-container .main-content input.form-control { font-size: 16px; height: 44px; }
  /* FAQ list links and Back to top: tap height */
  body.ar-site #page-container .entry.faqs a.button, body.ar-site #page-container div.top a { display: inline-block; padding: 4px 0; }

  /* forms below 1250: 16px controls, 44px tall, labels kept above; the review form's hints in an AA grey */
  body.ar-site.page-id-1140 #page-container .ar-contact-form .et_pb_contact_field input.input::placeholder { color: #707070; }
  body.ar-site #page-container .ar-contact-form .et_pb_contact_field input.input { height: 44px; font-size: 16px; line-height: 22px; padding: 10px 12px; }
  body.ar-site #page-container .ar-contact-form .et_pb_contact_field textarea.input { font-size: 16px; line-height: 22px; padding: 10px 12px; height: 132px; }
  body.ar-site.page-id-1140 #page-container .ar-contact-form .et_pb_contact_field textarea.input { height: 110px; }
  body.ar-site #page-container .ar-contact-form .et_pb_contact_right p.clearfix { height: auto; min-height: 44px; padding-top: 25px; line-height: 44px; }
  body.ar-site #page-container .ar-contact-form .et_pb_contact_captcha_question { font-size: 16px; line-height: 44px; }
  body.ar-site #page-container .ar-contact-form input.et_pb_contact_captcha { height: 44px; width: 80px; font-size: 16px; line-height: 22px; padding: 10px 12px; }
  body #page-container .et_pb_section .ar-contact-form.et_pb_contact_form_container.et_pb_module .et_pb_contact_submit.et_pb_button {
    margin: 0 !important; padding: 0 28px !important; min-height: 48px; font-size: 16px !important; line-height: 48px !important; }

  /* the BOOK DIRECT pin (live's promo, auto-opens once a day): its open panel keeps to the lower 42% of the screen, so it never covers the
     middle of the screen where a scrolled-to button sits (live's 300 x 400 panel covered the form's Submit and the booking button). On a short
     screen the promo is cropped from the bottom (the pool photo) before it is scaled, so its words stay readable. Its closed tab keeps live's look. */
  body.ar-site #special_bottompin_container .formDescription { padding: 10px; text-align: center; }
  body.ar-site #special_bottompin_container .formDescription a { display: block; }
  body.ar-site #special_bottompin_container .formDescription img { display: block; margin: 0 auto; object-fit: cover; object-position: center top;
    height: min(400px, calc(42vh - 70px)) !important; width: min(300px, calc((42vh - 70px) * 1.3043)) !important; max-width: calc(100vw - 40px); }
  /* the open panel draws above the photo lightbox on a phone otherwise (a backdrop tap then opened the promo) */
  body.ar-site #fancybox-overlay { z-index: 100010 !important; }
  body.ar-site #fancybox-wrap { z-index: 100011 !important; }
  body.ar-site #fancybox-loading { z-index: 100014 !important; }
  /* the closed tab sits over the end of the page: the footer ends below it */
  body.ar-site #page-container footer.footer { padding-bottom: 80px; }
}
@media (max-width: 767px) {
  /* the open promo is as wide as its picture (live caps the panel at 75% of the screen, narrower than the picture on a phone) */
  body.ar-site #special_bottompin_container { max-width: calc(100vw - 16px); }
  body.ar-site #special_bottompin_container .formDescription img { max-width: calc(100vw - 36px); }
}

/* ======================= 1170-1249: live's layout with the fixed rows fitted ======================= */
@media (min-width: 992px) and (max-width: 1249px) {
  /* live pins the hero booking bar 50px above the photo's bottom edge, where the auto-opening BOOK DIRECT panel (bottom right) covered Check
     Availability on a 1024 x 768 or 1200 x 900 screen. Here the bar sits near the top of the photo instead (below the offer band that the home
     slides carry in their top 60px), and the open panel keeps to the lower 40% of the screen, so the two never meet. */
  body.ar-site #page-container .bookonline-wrapper { top: 80px; bottom: auto; }
  body.ar-site #special_bottompin_container .formDescription img { height: min(400px, calc(40vh - 70px)) !important; width: min(300px, calc((40vh - 70px) * 1.3043)) !important; }
}

/* ======================= 992-1169: live's tablet-landscape reflow; the nav on one row ======================= */
@media (min-width: 992px) and (max-width: 1169px) {
  body.ar-site #page-container .nav > li { margin-left: 22px; }
  body.ar-site #page-container .nav > li:first-child { margin-left: 0; }
}
@media (min-width: 992px) and (max-width: 1249px) {
  /* footer: live's three columns (address 4/12, an EMPTY newsletter 3/12, links 5/12) left the link row too narrow, so it wrapped with a
     separator bullet starting the second line and the credit split; the empty column gives its width to the links */
  body.ar-site #page-container footer .vcard-container { width: 40%; }
  body.ar-site #page-container footer .newsletter-container { display: none; }
  body.ar-site #page-container footer .socialmedia-container { width: 60%; }
  body.ar-site #page-container footer .fmenu ul { white-space: nowrap; }
}

/* ======================= below 992: menu button, the booking bar as a block under the photo ======================= */
@media (max-width: 991px) {
  /* menu button (live shows it only below 768; between 768 and 991 live's nav wrapped onto two rows) */
  body.ar-site #page-container .navbar-toggle { display: block; position: absolute; top: 10px; right: 10px; margin: 0; width: 48px; height: 44px; padding: 0 12px;
    border: 1px solid #cccccc; border-radius: 4px; background: #ffffff; }
  body.ar-site #page-container .navbar-toggle .icon-bar { display: block; width: 22px; height: 2px; background: #555555; border-radius: 1px; }
  body.ar-site #page-container .navbar-toggle .icon-bar + .icon-bar { margin-top: 5px; }
  body.ar-site #page-container .navbar-toggle:hover, body.ar-site #page-container .navbar-toggle:focus { background: #f2f2f2; }
  body.ar-site #page-container .navbar-collapse.collapse { display: none !important; height: auto !important; }
  body.ar-site #page-container .navbar-collapse.collapse.in, body.ar-site #page-container .navbar-collapse.collapsing { display: block !important; }
  body.ar-site #page-container #menu { margin: 0; float: none; position: static; }
  /* the open menu drops down from the bottom edge of the header (logo, phone and button stay visible), sliding down vertically, above the booking peel */
  body.ar-site #page-container header .header-banner-container, body.ar-site #page-container header .header-banner-container > .row { position: static; }
  body.ar-site #page-container .navbar-toggle { z-index: 1001; }
  body.ar-site #page-container .navbar-collapse { position: absolute; top: 100%; left: 0; right: 0; width: 100%; z-index: 1000; margin: 0; padding: 0; background-color: #225dab;
    text-align: center; box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35); max-height: none; overflow: hidden; border: 0; }
  /* clip the items while Bootstrap animates the height open/closed, so they never show ahead of the drop; the spacing lives on the list so the closed height is truly 0 */
  body.ar-site #page-container .navbar-collapse.collapsing { box-shadow: none; }
  body.ar-site #page-container .navbar-collapse .navbar-nav { float: none; width: 100%; margin: 0; padding: 4px 0 12px; text-align: center; }
  body.ar-site #page-container .navbar-collapse .navbar-nav > li { display: block; float: none; width: 100%; margin: 0; padding: 0; border: 0 !important; }
  body.ar-site #page-container .navbar-collapse .navbar-nav > li > a { display: block; margin: 0; padding: 12px 16px; color: #ffffff; font-size: 16px; line-height: 22px; text-align: center; background: none; }
  body.ar-site #page-container .navbar-collapse .navbar-nav > li > a:hover, body.ar-site #page-container .navbar-collapse .navbar-nav > li > a:focus,
  body.ar-site #page-container .navbar-collapse .navbar-nav > li > a:active { color: #ffffff; background-color: #00717c; }
  body.ar-site #page-container .navbar-default .navbar-collapse .navbar-nav > .active > a, body.ar-site #page-container .navbar-default .navbar-collapse .navbar-nav > .active > a:hover,
  body.ar-site #page-container .navbar-default .navbar-collapse .navbar-nav > .active > a:focus { color: #1a1a1a; background-color: #ee9f17; }
  body.ar-site #page-container .navbar-collapse .dropdown-menu { position: static; display: block; float: none; width: 100%; margin: 0; padding: 0; border: 0; box-shadow: none; background: #225dab; }
  body.ar-site #page-container .navbar-collapse .dropdown-menu > li { float: none; display: block; text-align: center; background: none; border: 0; }
  body.ar-site #page-container .navbar-collapse .navbar-nav > li .dropdown-menu a { display: block; padding: 12px 16px; font-size: 15px; line-height: 20px; color: #ffffff; border: 0; background: none; white-space: normal; }
  body.ar-site #page-container .navbar-collapse .navbar-nav > li .dropdown-menu a:hover, body.ar-site #page-container .navbar-collapse .navbar-nav > li .dropdown-menu a:focus,
  body.ar-site #page-container .navbar-collapse .navbar-nav > li .dropdown-menu a:active { color: #ffffff; background-color: #00717c; border: 0; }
  body.ar-site #page-container .navbar-collapse .dropdown-menu > .active > a { color: #1a1a1a !important; background-color: #ee9f17 !important; }
  body.ar-site #page-container .navbar-collapse .navbar-nav > li.alt { padding: 12px 16px 4px; }
  body.ar-site #page-container .navbar-collapse .navbar-nav > li.alt > a.btn { display: inline-block; top: 0; margin: 0; padding: 0 32px; line-height: 48px; font-size: 16px; border: 0; border-radius: 0; }

  /* booking: the peel tab stays (live's); the bar it opens is a solid block under the photo, not a box over the header */
  body.ar-site #page-container #booking_peel { padding: 10px 10px 0 18px; }
  /* pages with no photo carry no booking bar (payment terms, the three FAQ categories): live still shows the peel there, which only vanishes
     when tapped (booking_open() has nothing to open) and sat over the page title. The menu's Book Now is the way to book on those pages. */
  body.ar-site #page-container .main:not(:has(#bookonline-wrapper)) > #booking_peel { display: none !important; }
  body.ar-site #page-container .featureimage { overflow: visible; }
  body.ar-site #page-container .bookonline-wrapper { position: static; bottom: auto; width: auto; text-align: left; }
  body.ar-site #page-container .bookonline { display: block; max-width: none; margin: 0; padding: 18px 24px 22px; float: none; }
  body.ar-site #page-container .bookonline h3 { float: none; margin: 0 0 12px; padding: 0; line-height: 30px; font-size: 22px; background: none; border-radius: 0; text-align: left; }
  body.ar-site #page-container .bookonline form { float: none; display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; row-gap: 12px; border-radius: 0; background: none; height: auto; }
  body.ar-site #page-container .bookonline form .book-checkin, body.ar-site #page-container .bookonline form .book-duration { float: none; display: flex; width: auto; margin: 0; padding: 0; border: 0; }
  body.ar-site #page-container .bookonline form label { flex: 0 0 92px; min-width: 0; line-height: 48px; padding: 0 12px; }
  body.ar-site #page-container .bookonline .datepicker_wrap { flex: 1 1 auto; min-width: 0; display: flex; }
  body.ar-site #page-container .bookonline input[type=text] { flex: 1 1 auto; min-width: 0; width: 100%; height: 48px; line-height: 48px; padding: 0 40px 0 12px; box-sizing: border-box; }
  body.ar-site #page-container .bookonline form .book-checkin > input[type=text] { flex: 1 1 auto; }
  body.ar-site #page-container .bookonline form .book-checkin img { top: 14px; right: 10px; }
  body.ar-site #page-container .book-duration select { flex: 1 1 auto; min-width: 0; width: 100%; height: 48px; line-height: 48px; padding: 0 0 0 12px; }
  body.ar-site #page-container .book-duration:after { top: 15px; right: 14px; }
  body.ar-site #page-container .bookonline form .book-action { float: none; display: flex; gap: 16px; grid-column: 1 / -1; width: auto; margin: 0; }
  body.ar-site #page-container .bookonline .btn-default { flex: 1 1 0; width: auto; max-width: none; margin: 0; padding: 0 16px; line-height: 50px; font-size: 16px; }
  body.ar-site #page-container #btn-bookingcancel { display: block; margin: 0; }
  /* Cancel is the quiet one: outlined on the dark block */
  body.ar-site #page-container .bookonline #btn-bookingcancel { color: #ffffff !important; background-color: transparent !important; box-shadow: inset 0 0 0 2px #ffffff; }
  body.ar-site #page-container .bookonline #btn-bookingcancel:hover, body.ar-site #page-container .bookonline #btn-bookingcancel:focus,
  body.ar-site #page-container .bookonline #btn-bookingcancel:active { color: #ffffff !important; background-color: #225eab !important; }
  /* one overlay at a time: while the phone menu or the booking bar is open, the BOOK DIRECT pin steps aside */
  body.ar-site:has(#page-container .navbar-collapse.in) #special_bottompin_container,
  body.ar-site:has(#page-container #bookonline-wrapper[style*="block"]) #special_bottompin_container { display: none; }


  /* image galleries (facilities, attractions, location): full rows of live's 188px thumbnails */
  body.ar-site #page-container .gallery:not(.room) { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; text-align: left; }
  body.ar-site #page-container .gallery:not(.room) .thumb-wrapper { display: block; margin: 0; }
  body.ar-site #page-container .gallery:not(.room) .thumb { margin: 0; }
  body.ar-site #page-container .gallery:not(.room) .gallery-item { display: block; }
  body.ar-site #page-container .gallery:not(.room) .gallery-item img { display: block; width: 100%; height: auto; }
}

/* ======================= tablet portrait 768-991 ======================= */
@media (min-width: 768px) and (max-width: 991px) {
  /* header: logo, the direct-bookings line and the social links on one row, centred on the logo; the menu button at the right */
  body.ar-site #page-container nav.navbar > .container > .row { display: flex; align-items: center; }
  body.ar-site #page-container .navbar-brand-container { float: none; width: auto; flex: 0 0 auto; }
  body.ar-site #page-container header .header-banner-container { float: none; width: auto; flex: 1 1 auto; min-width: 0; display: flex; align-items: center; justify-content: flex-end; min-height: 98px; padding: 0 76px 0 15px; }
  body.ar-site #page-container header .direct-bookings { white-space: nowrap; }
  body.ar-site #page-container header .header-banner-container > #menu, body.ar-site #page-container header .header-banner-container > .clearboth { flex: 0 0 0; width: 0; min-width: 0; }
  body.ar-site #page-container header .header-banner-container > .row { display: flex; align-items: center; justify-content: flex-end; flex-wrap: nowrap; margin: 0; }
  body.ar-site #page-container header .header-banner { float: none; width: auto; flex: 0 1 auto; padding: 0; }
  body.ar-site #page-container header .header-banner > .row { display: flex; align-items: center; flex-wrap: nowrap; margin: 0; }
  body.ar-site #page-container header .direct-bookings, body.ar-site #page-container header .phone-container { float: none; width: auto; }
  body.ar-site #page-container header .phone a { margin-left: 0; white-space: nowrap; font-size: 22px; }
  body.ar-site #page-container header .socialmedia-container { float: none; width: auto; flex: 0 0 auto; padding: 0 0 0 22px; }
  body.ar-site #page-container .container > .navbar-header { top: 0; right: 0; }
  body.ar-site #page-container .navbar-toggle { top: 27px; right: 16px; }
  body.ar-site #page-container .bookonline form { grid-template-columns: 1fr 1fr; }
}

/* ======================= phone: below 768 ======================= */
@media (max-width: 767px) {
  body.ar-site #page-container .container > .navbar-header { top: 0; right: 0; }
  body.ar-site #page-container .navbar-toggle { top: 14px; right: 12px; }
  body.ar-site #page-container h1 { font-size: 32px; line-height: 38px; margin-top: 32px; }
  body.ar-site.ar-home #page-container h1 { font-size: 30px; line-height: 36px; }
  body.ar-site #page-container .main-content h2, body.ar-site #page-container .roomtext h2 { font-size: 26px; line-height: 30px; }
  body.ar-site #page-container .container { padding-left: 16px; padding-right: 16px; }
  /* live's inline text-align: justify opens wide word gaps on a phone column */
  body.ar-site #page-container [style*="justify"] { text-align: left !important; }

  /* booking: stacked, label beside its field */
  body.ar-site #page-container .bookonline { padding: 16px 16px 20px; }
  body.ar-site #page-container .bookonline form { grid-template-columns: 1fr; row-gap: 10px; }
  body.ar-site #page-container .bookonline form .book-action { flex-direction: column; gap: 10px; }
  body.ar-site #page-container .bookonline .btn-default { flex: 0 0 auto; }

  /* forms: full-width Submit */
  body #page-container .et_pb_section .ar-contact-form.et_pb_contact_form_container.et_pb_module .et_pb_contact_submit.et_pb_button { display: block; width: 100%; }

  /* the map: a phone-height map (live 500px) */
  body.ar-site #page-container .map-container { height: 380px; }
  /* contact table: label column and value column stay side by side (a 500px table no longer) */
  body.ar-site #page-container .main-content table[width="500"] { width: 100% !important; }

  /* the calendar (appended to <body>) at a usable size */
}

/* ======================= the booking calendar (appended to <body>) below 1250: bigger targets, AA colours ======================= */
/* live: 185px wide, 11px control links (16px rows), 14px day cells (20px), white on #0092ba (3.4:1), day names white on #777 (4.5:1 at 14px, no margin),
   disabled days #888 on #eee (3.0:1). Below 1250: 300px wide (the phone width below 768), 40px rows, 15-16px type, Clear/Close on our button blue,
   day names on #595959, disabled days #595959. Live's own calendar stays at 1250 and up. */
@media (max-width: 1249px) {
  body.ar-site #datepicker_div { width: 300px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35); }
  body.ar-site #datepicker_div .datepicker_oneMonth { width: 100%; }
  body.ar-site #datepicker_div .datepicker_control, body.ar-site #datepicker_div .datepicker_links { padding: 0; font-size: 14px; letter-spacing: 0.5px; }
  body.ar-site #datepicker_div .datepicker_control { background: #225eab; }
  body.ar-site #datepicker_div .datepicker_control a, body.ar-site #datepicker_div .datepicker_links a { display: block; padding: 0 10px !important; line-height: 40px; color: #ffffff !important; }
  body.ar-site #datepicker_div .datepicker_control a:hover, body.ar-site #datepicker_div .datepicker_control a:focus,
  body.ar-site #datepicker_div .datepicker_links a:hover, body.ar-site #datepicker_div .datepicker_links a:focus { background: #dddddd !important; color: #1a1a1a !important; }
  body.ar-site #datepicker_div .datepicker_links label { padding: 0 10px; line-height: 40px; color: #cccccc; }
  body.ar-site #datepicker_div .datepicker_header { height: auto; padding: 4px 0; }
  body.ar-site #datepicker_div .datepicker_header select { font-size: 16px; height: 36px; padding: 0 4px; }
  body.ar-site #datepicker_div .datepicker td { height: 38px; font-size: 15px; line-height: 38px; }
  body.ar-site #datepicker_div .datepicker td a { line-height: 38px; }
  body.ar-site #datepicker_div .datepicker_titleRow, body.ar-site #datepicker_div .datepicker_titleRow .datepicker_weekEndCell { background: #595959; }
  body.ar-site #datepicker_div .datepicker_titleRow a { color: #ffffff !important; }
  body.ar-site #datepicker_div .datepicker_titleRow a:hover, body.ar-site #datepicker_div .datepicker_titleRow a:focus { color: #1a1a1a !important; background: #dddddd !important; }
  body.ar-site #datepicker_div .datepicker_unselectable { color: #595959; }
}
@media (max-width: 767px) {
  body.ar-site #datepicker_div { width: calc(100vw - 32px) !important; left: 16px !important; }
  body.ar-site #datepicker_div .datepicker td { height: 42px; font-size: 16px; line-height: 42px; }
  body.ar-site #datepicker_div .datepicker td a { line-height: 42px; }
}
/* Things To Do (and any stacked content image): when the columns stack, an image narrower than its column (e.g. the 650px Miami Beach photo) must fill the width like its siblings */
@media (max-width: 991px) {
  body.ar-site #page-container .main-content .col-md-4 > img.img-responsive { width: 100%; height: auto; }
}