/* aa-mobile.css: Aristocrat Holiday Apartments designed tablet and phone bands (Stage 4, skill Rule 2). Loaded LAST (after aa-design.css).
   Nothing here applies at 1250px and up, where the site is a pixel copy of live.
   Live is a responsive Bootstrap 3 site (viewport meta, menu button below 768px), so its own layout is the starting point at every width below 1250;
   this layer fixes what Divi's wrappers broke (the home hero height chain), what live itself gets wrong on a phone or tablet, and makes every width
   below 1250 WCAG AA: 14px text floor, 16px form fields, 24px tap targets (44px for menu items and the menu button), AA colours in every state.
   Started from the kit's ilaunch-responsive.template.css (button and link states, form layout, tel links) with every selector rewritten for this
   bootstrap-era template (nav.navbar, #feature, .container-main-wrapper, footer.base), an earlier site of the same template as the worked example, and an
   AA palette computed for this site. Live's white words sit straight on the orange ground (#f4b95f; header #f2aa3d): 1.8:1 and 2.0:1. Below 1250
   the words on the orange are a dark navy taken from live's footer blue:
     --aa-ink        #08304f  on #f4b95f 7.7:1, on the header #f2aa3d 6.8:1, on the button orange #f1ad46 7.0:1, white on it 13.5:1 (a shade darker
                              than the first choice #0b3a60, which read 4.3:1 on the darkest sand under the blog sidebar's 10% grey panel)
     --aa-orange-aa  #9a5300  live's orange hover words (#f1ad46 on white, 1.9:1) darkened: on white 5.8:1
     --aa-blue       #176cb3  live's blue: white on it 5.5:1 (kept) */

@media (max-width: 1249px) {
  body.aa-site { --aa-ink: #08304f; --aa-orange-aa: #9a5300; --aa-blue: #176cb3; --aa-bar: 48px; }
}

/* =========================================================================================================
   1. Structure
   ========================================================================================================= */
/* below 768 the home video fills the screen as on live (Divi's wrappers broke live's html/body height:100% chain, so it had collapsed to a 450px box) */
@media (max-width: 767px) {
  body.aa-site.aa-home #page-container #feature { height: 100vh; height: 100svh; min-height: 506px; }
  body.aa-site.aa-home #page-container #feature > .featuremain { height: 100%; min-height: 506px; }
}
/* 768 to 1199: the fixed header is 90 to 186px tall depending on how the menu wraps, while live's hero starts at the top of the page under it (live
   gives the hero a 127px margin only from 1200): at 768 the menu covered the top 186px of the 550px video. The hero starts where the header ends
   (aa-sitewide.php keeps --aa-navh equal to the header's height; without the script live's layout stays) */
@media (min-width: 768px) and (max-width: 1199px) {
  html:has(body.aa-site) body.aa-site #page-container #feature { margin-top: var(--aa-navh, 0px); }
}
/* a short screen (a phone turned sideways, 768 to 1249 wide but under 500 tall): the fixed header would hold a third of the screen, so it scrolls away */
@media (min-width: 768px) and (max-width: 1249px) and (max-height: 500px) {
  body.aa-site #page-container nav.navbar-fixed-top { position: absolute; }
}
/* phones: a content picture never runs off the screen (from 1250 pictures keep live's own sizes, aa-design.css) */
@media (max-width: 767px) {
  body.aa-site #page-container .container-main-wrapper img { max-width: 100%; height: auto; }
}

/* =========================================================================================================
   2. Header below 1250: AA colours on the orange bar, the menu button, the Translate button, the wifi badge's small print
   ========================================================================================================= */
@media (max-width: 1249px) {
  /* the phone number and "Guaranteed best rate" line (white on the orange bar, 2.0:1) */
  body.aa-site #page-container nav.navbar .phone, body.aa-site #page-container nav.navbar .phone .phone-banner { color: var(--aa-ink); }
  body.aa-site #page-container nav.navbar .phone a, body.aa-site #page-container nav.navbar .phone a:is(:link, :visited, :hover, :focus, :active) { color: var(--aa-ink) !important; }
  /* "*Condition apply" under the wifi badge (10px white straight on the photo): 14px on a dark chip */
  body.aa-site #page-container .navbar-custom::after { font-size: 14px; line-height: 20px; height: auto; padding: 0 6px; bottom: -90px; background: rgba(0, 0, 0, 0.6); color: #ffffff; }
  /* Google Translate button: Google prints it at 10pt; 14px words and a 24px tap height */
  body.aa-site #page-container #translate-widget .goog-te-gadget-simple, body.aa-site #page-container #translate-widget .goog-te-gadget-simple * { font-size: 14px !important; }
  body.aa-site #page-container #translate-widget .goog-te-gadget-simple a { display: inline-block; padding: 4px 0; margin: -4px 0; }
  /* the Translate button's box keeps its height before Google's script fills it (it arrives a second or more after the page): the header no longer
     grows by 34px under the visitor's eyes at 768 to 991 (where the line beside it wraps), and nothing below it jumps */
  body.aa-site #page-container #translate-widget { min-height: 34px; }
  /* the menu button's name comes from its aria-label (same words); its 1px Bootstrap screen-reader span reads as 8px text to every audit */
  body.aa-site #page-container .navbar-toggle .sr-only { display: none; }
}
@media (max-width: 767px) {
  /* menu button: 48 x 44, bars dark enough to see (live: #ccc bars on the orange bar, 1.3:1) */
  body.aa-site #page-container .navbar-custom .navbar-toggle { width: 48px; height: 44px; padding: 10px 12px; margin: 5px 10px 0 0; border: 1px solid var(--aa-ink); border-radius: 4px; background-color: transparent; }
  body.aa-site #page-container .navbar-custom .navbar-toggle .icon-bar { width: 22px; height: 2px; background-color: var(--aa-ink); }
  body.aa-site #page-container .navbar-custom .navbar-toggle:is(:hover, :focus, :active) { background-color: rgba(255, 255, 255, 0.45); }
  /* the open menu lists every item (live's 370px box cut off Contact Us's pages and Book Now) in 44px rows with 16px words, ending above the bottom bar */
  body.aa-site #page-container nav.navbar .navbar-collapse { max-height: calc(100vh - 90px - var(--aa-bar)); max-height: calc(100svh - 90px - var(--aa-bar)); overflow-y: auto; }
  body.aa-site #page-container .navbar-custom .navbar-nav > li > a { font-size: 16px; line-height: 44px; }
  body.aa-site #page-container .navbar-custom .navbar-nav li li a { font-size: 16px; line-height: 44px; padding: 0 15px; }
  body.aa-site #page-container .navbar-custom .navbar-nav li li a:is(:hover, :focus, :active) { background: #0e4b7c; color: #ffffff; }
  body.aa-site #page-container .navbar-custom .navbar-nav > li.alt { padding: 10px 15px 14px; background: #ffffff; }
  /* Book Now in the open menu: live's phone colour #19a9e5 (white on it 2.7:1) becomes live's own desktop blue (5.5:1) */
  body.aa-site #page-container .navbar-custom .navbar-nav > li.alt > a:is(:link, :visited) { background-color: var(--aa-blue); color: #ffffff; }
  /* the button's (hidden) words take the ink too, so no state of it is light on the orange bar */
  body.aa-site #page-container .navbar-custom .navbar-toggle { color: var(--aa-ink); }
}

/* =========================================================================================================
   3. Words on the orange ground below 1250 (live: white on #f4b95f, 1.8:1): the dark navy ink. The blue room and deal panels keep live's white words.
   ========================================================================================================= */
@media (max-width: 1249px) {
  /* every inner page's content area (the page body, its galleries and the map band under it); on the home page only the welcome band is on the orange (its blue band, offer tiles,
     blog cards and link panel keep their own grounds) */
  body.aa-site:not(.aa-home) #page-container #main-content,
  body.aa-site.aa-home #page-container .container-main-content-wrapper,
  body.aa-site:not(.aa-home) #page-container #main-content :is(h1, h2, h3, h4, h5, h6, p, li, td, th, label, blockquote, span, strong, b, em, small, cite, footer, div, a:not(.btn, .btn-primary, .btn-custom, .btn-map, .overlay-youtube, .label)),
  body.aa-site.aa-home #page-container .container-main-content-wrapper :is(h1, h2, h3, h4, h5, h6, p, li, td, th, label, blockquote, span, strong, b, em, small, cite, footer, div, a:not(.btn, .btn-primary, .btn-custom, .btn-map, .overlay-youtube, .label)) { color: var(--aa-ink); }
  body.aa-site #page-container #main-content :is(.list.rooms .entry, .list.deals .entry) :is(h1, h2, h3, h4, h5, h6, p, li, td, th, span, strong, b, em, div, a:not(.btn, .btn-primary, .btn-custom, .overlay-youtube)) { color: #ffffff; }
  /* text links in the copy are told apart from the words round them by an underline (they were white like the words on live) */
  body.aa-site #page-container :is(#main-content, .container-main-content-wrapper) :is(p, li, td) a:not(.btn, .btn-primary, .btn-custom, .tel-link, .gallery-item, .overlay-youtube) { text-decoration: underline; }
  body.aa-site #page-container :is(#main-content, .container-main-content-wrapper) :is(p, li, td) a:not(.btn, .btn-primary, .btn-custom, .tel-link, .gallery-item, .overlay-youtube):is(:hover, :focus, :active) { text-decoration: none; background-color: var(--aa-ink); color: #ffffff; }
  /* the room and deal panels: live's blue at 90% over the room photo; solid below 1250 (white on it 5.5:1 wherever the photo is) */
  body.aa-site #page-container .list.rooms .entry, body.aa-site #page-container .list.deals .entry { background-color: var(--aa-blue); }
  /* the Divi form's words */
  body.aa-site #page-container .aa-contact-form :is(.et_pb_contact_form_label, .et_pb_contact_right p.clearfix, .et_pb_contact_captcha_question, .et-pb-contact-message, .et-pb-contact-message *) { color: var(--aa-ink); }
}

/* =========================================================================================================
   4. Buttons and menu below 1250, every state
   ========================================================================================================= */
@media (max-width: 1249px) {
  /* live's orange buttons: black on #f1ad46 at rest (10.8:1, kept); hovered or pressed live turns them white with orange words (1.9:1): white with the
     AA orange words; focused (Bootstrap's white on #286090, 6.4:1) kept */
  body.aa-site #page-container :is(a.btn, a.btn-primary, input.btn, input.btn-primary, .alt a):is(:hover, :active),
  body.aa-site #page-container :is(a.btn, a.btn-primary, input.btn, input.btn-primary).active { background-color: #ffffff; color: var(--aa-orange-aa); }
  body #page-container .et_pb_section .aa-contact-form.et_pb_contact_form_container.et_pb_module .et_pb_button.et_pb_contact_submit:is(:hover, :active) { background: #ffffff !important; color: var(--aa-orange-aa) !important; }
  /* menu (768 and up): live's hovered and current items are blue words on white (5.5:1), Book Now white on blue; hovered, live turns Book Now white
     with orange words: the AA orange */
  body.aa-site #page-container .navbar-custom .navbar-nav > li.alt > a:is(:hover, :focus, :active),
  body.aa-site #page-container .navbar-custom .navbar-nav > li.alt:hover > a:is(:link, :visited) { background-color: #ffffff !important; color: var(--aa-orange-aa) !important; }
  /* form field hints (#999, 2.8:1) */
  body.aa-site #page-container .aa-contact-form .et_pb_contact .input::placeholder { color: #6b6b6b; }
}

/* =========================================================================================================
   5. Type floor, fields and tap targets
   ========================================================================================================= */
/* live's phone text is 12px (p, h4) and 13px (h3) below 768; from 768 it is 18px, 15px and 19px */
@media (max-width: 767px) {
  body.aa-site #page-container :is(p, h3, h4) { font-size: 14px; }
  body.aa-site #page-container p { line-height: 22px; }
}
@media (max-width: 1249px) {
  /* forms and the search field: 16px fields (no zoom-on-focus on iOS) */
  body.aa-site #page-container .aa-contact-form .et_pb_contact p input.input,
  body.aa-site #page-container .aa-contact-form .et_pb_contact p textarea.input,
  body.aa-site #page-container .aa-contact-form .et_pb_contact p input.input.et_pb_contact_captcha,
  body.aa-site #page-container .page-content table.searchpage input[type="text"] { font-size: 16px; }
  /* footer: 14px words, every link a tap target at least 24px tall.
     Fix round 1 N2 (10 Oct 2026): the links used to get 4px of padding and -4px of margin, which overlapped the row below by up to 8px and
     replaced live's own box on the eTourism credit logo (a.tag: padding 5px 58px 5px 0 is what shows its background image), so the logo
     collapsed to 3 x 22px. Now the links are inline blocks with no negative margin, the rows whose words are under 24px tall (the email,
     the Site Map / Privacy / Search / Terms row and the credit line) are 24px lines, and a.tag keeps live's box (24px tall, the logo shown). */
  body.aa-site #page-container footer.base :is(.footermenu, .copyright, .footer-tags, .footer-tags p, .footer-tags a, .infomenu, .infomenu a) { font-size: 14px; }
  body.aa-site #page-container footer.base :is(.vcard, .footermenu, .infomenu, .footer-tags) a:not(.tag) { display: inline-block; padding: 0; margin: 0; }
  body.aa-site #page-container footer.base :is(.vcard a.email, .footermenu a, .footer-tags a:not(.tag)) { line-height: 24px; }
}

/* =========================================================================================================
   6. The floating Top / Facebook / WeChat / Call / Email column (fixed to the right edge on live, over the page's words at every width below 1250):
      below 1250 it becomes a bar fixed to the foot of the screen (full width on phones, a row of five at the right on tablets), and the footer ends with
      room for it so nothing is left under it at the end of the page
   ========================================================================================================= */
@media (max-width: 1249px) {
  /* (z-index 1050: above the fixed header's 1030, below the photo pop-up's dark backdrop at 1100, so an open pop-up covers the bar and a tap on the
     dark area at the foot of the screen closes the pop-up instead of landing on Top or Facebook; live's column sits at 99999) */
  body.aa-site #page-container .socialmedia-float { top: auto; bottom: 0; right: 0; width: auto; height: var(--aa-bar); display: flex; background: none; box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.25); z-index: 1050; }
  body.aa-site #page-container .socialmedia-float a { float: none; clear: none; width: 45px; height: var(--aa-bar); background-size: 45px 49px !important; background-position: center center !important; }
  body.aa-site #page-container .socialmedia-float a.top { background-color: #fdfffe; }
  body.aa-site #page-container .socialmedia-float a.fb { background-color: #3d5b97; }
  body.aa-site #page-container .socialmedia-float a.wechat { background-color: #48b522; }
  body.aa-site #page-container .socialmedia-float a.phone { background-color: #1a8b99; }
  body.aa-site #page-container .socialmedia-float a.email { background-color: #abadac; }
  body.aa-site #page-container .socialmedia-float a:focus-visible { outline: 3px solid var(--aa-ink); outline-offset: -3px; }
  /* the footer ends with the bar's height of extra room, so its last line still sits live's 16px above whatever covers the screen's foot */
  body.aa-site #page-container footer.base { padding-bottom: var(--aa-bar); }
}
@media (max-width: 767px) {
  body.aa-site #page-container .socialmedia-float { left: 0; }
  body.aa-site #page-container .socialmedia-float a { flex: 1 1 20%; width: auto; }
}

/* =========================================================================================================
   7. Phone (below 768): forms and text
   ========================================================================================================= */
@media (max-width: 767px) {
  /* forms: label over a full-width 48px field, the question and its field on one row, a full-width SUBMIT */
  body.aa-site #page-container .aa-contact-form .et_pb_contact p input.input { height: 48px; padding: 10px 12px; }
  body.aa-site #page-container .aa-contact-form .et_pb_contact p textarea.input { height: 140px; padding: 10px 12px; }
  body.aa-site #page-container .aa-contact-form .et_pb_contact_right p.clearfix { height: auto; padding: 0 0 4px; line-height: 48px; }
  body.aa-site #page-container .aa-contact-form .et_pb_contact_right p.clearfix::before { content: "Verification"; display: block; height: 28px; margin: 0 0 5px; }
  body.aa-site #page-container .aa-contact-form .et_pb_contact p input.input.et_pb_contact_captcha { width: 120px; height: 48px; margin: 0 0 0 8px; padding: 10px 12px; border: 1px solid #8a8a8a; }
  body #page-container .et_pb_section .aa-contact-form.et_pb_contact_form_container.et_pb_module .et_pb_button.et_pb_contact_submit { display: block; width: 100%; height: 52px; line-height: 52px !important; padding: 0 20px !important; }
  /* the boxed review form keeps live's frame without live's 200px side margins (they crush it to nothing on a phone) */
  body.aa-site.page-id-1385 #page-container .aa-contact-form { margin: 25px 0; }
  /* live's inline text-align: justify opens wide word gaps on a phone column */
  body.aa-site #page-container .container-main-wrapper [style*="justify"] { text-align: left !important; }
}
/* the reviews form between 768 and 1249: live's 200px side margins leave a narrow column; 40px */
@media (min-width: 768px) and (max-width: 1249px) {
  body.aa-site.page-id-1385 #page-container .aa-contact-form { margin: 25px 40px; }
}

/* =========================================================================================================
   8. Phone numbers and in-page jumps
   ========================================================================================================= */
@media (max-width: 1249px) {
  body.aa-site #page-container a.tel-link, body.aa-site #page-container a[href^="tel:"] { white-space: nowrap; }
}
/* the header is fixed at every width, so an in-page jump (a field reached by Tab, a #map link) would land under it: jumps stop 13px below it
   (aa-sitewide.php keeps --aa-navh equal to the header's height; an ARRIVAL from another page is scrolled by Divi's own script, which aa-sitewide.php
   gives the same offset) */
html:has(body.aa-site) { scroll-padding-top: calc(var(--aa-navh, 0px) + 13px); }

/* =========================================================================================================
   9. The menu's Local Info and Contact Us drop-downs from 768 to 1249: live opens them on hover only, so on a touch tablet a tap went straight to the
      parent page and Tour Desk, What's On, Blog, FAQs and Reviews could not be reached from the menu, and a keyboard visitor never reached them either.
      aa-sitewide.php marks a touch visitor (html.aa-touch) and opens the list on the first tap (li.aa-open); a second tap opens the parent's page, a tap
      elsewhere or Escape closes it. For a keyboard visitor (html.aa-kb) the list opens while focus is on the parent or inside it (:focus-within) and
      Escape shuts it (li.aa-kb-shut). A mouse keeps live's hover.
   ========================================================================================================= */
@media (min-width: 768px) and (max-width: 1249px) {
  html.aa-touch body.aa-site #page-container .navbar-custom .navbar-nav li:hover ul { display: none; }
  html.aa-touch body.aa-site #page-container .navbar-custom .navbar-nav li.aa-open > ul { display: block; }
  html.aa-kb body.aa-site #page-container .navbar-custom .navbar-nav > li:focus-within:not(.aa-kb-shut) > ul { display: block; }
  /* the list's items are 36px tall touch targets */
  body.aa-site #page-container .navbar-custom .navbar-nav li li a { line-height: 36px; }
  /* the lists open above the wifi badge that hangs from the header (at 1024 it covered FAQs and Reviews: the menu column's own z-index 99 kept the
     list under the badge's 999, so the column is lifted while a list is open), and Contact Us's list lines up with the item's right edge so it never runs past the screen (at 1024 it ended 22px beyond it) */
  body.aa-site #page-container .navbar-custom .col-md-6.navbar-details:has(.navbar-nav li:is(:hover, .aa-open, :focus-within) > ul) { z-index: 1000; }
  body.aa-site #page-container .navbar-custom .navbar-nav > li:has(> a.parent):nth-last-child(2) > ul { left: auto; right: 0; }
}
/* phones: while the menu is open the wifi badge and its small print (which hang below the header bar) are put away: they sat over the open menu's
   last items (Book Now was under the badge at 320 x 568) */
@media (max-width: 767px) {
  body.aa-site #page-container nav.navbar:has(#navbar.in, #navbar.collapsing) #wifi-banner { display: none; }
  body.aa-site #page-container nav.navbar-custom:has(#navbar.in, #navbar.collapsing)::after { display: none; }
}

/* =========================================================================================================
   10. Home offer tiles below 1250: white words on photographs under light tints (live: the blue tile at 80%, the middle tile's orange picture, the right
       tile at 50% grey; on the pale parts of the photos 2 to 3:1). Each tint is made strong enough for AA wherever the photo is light, keeping its colour.
   ========================================================================================================= */
@media (max-width: 1249px) {
  body.aa-site.aa-home #page-container #special::before { background: rgba(23, 108, 179, 0.95); }
  body.aa-site.aa-home #page-container .container.banners .banner.middle::before { background: rgba(154, 83, 0, 0.85); }
  body.aa-site.aa-home #page-container .container.banners .banner.right::before { background: rgba(51, 51, 51, 0.72); }
}

/* =========================================================================================================
   11. Contact details table: live's GET DIRECTIONS button keeps its 80px side padding in a narrow cell and breaks over two lines below 1250
   ========================================================================================================= */
@media (max-width: 1249px) {
  body.aa-site #page-container .page-content td a.btn-primary { padding: 0 24px; white-space: nowrap; }
}

/* =========================================================================================================
   12. Audit round 1: taps under 24px, small type and the blog's page-size labels below 1250
   ========================================================================================================= */
@media (max-width: 1249px) {
  /* list and line links (the blog sidebar's months and categories, the site map, the archive "more" links, the post category line, the contact table):
     they stay inline (a wrapped item keeps its bullet beside its first line) and grow a 24px+ hit area with vertical padding */
  body.aa-site #page-container #main-content :is(li, p, td, div.title, .archive-more) a:not(.btn, .btn-primary, .btn-custom, .btn-map, .label, .gallery-item, .overlay-youtube) { padding: 4px 0; }
  body.aa-site #page-container #main-content td a.tel-link, body.aa-site #page-container #main-content td .tel a { display: inline-block; padding: 3px 0; margin: -3px 0; }
  /* the blog's page numbers */
  body.aa-site #page-container .paging a, body.aa-site #page-container .paging em a { display: inline-block; min-width: 24px; padding: 3px 4px; text-align: center; }
  /* the blog's "show 10 / 50 / 100" labels: 14px white on AA greys and blue, 24px tall */
  body.aa-site #page-container span.options a.label { display: inline-block; min-width: 32px; padding: 5px 8px; font-size: 14px; line-height: 16px; color: #ffffff; }
  body.aa-site #page-container span.options a.label-default { background-color: #595959; }
  body.aa-site #page-container span.options a.label-primary { background-color: #1f5c94; }
  body.aa-site #page-container span.options a.label:is(:hover, :focus, :active) { background-color: var(--aa-ink); color: #ffffff; }
  /* picture links wrap their picture (an inline link round a block picture measured 19px tall) */
  body.aa-site #page-container :is(a.gallery-item, .blog-image > a) { display: inline-block; vertical-align: top; }
  body.aa-site.aa-home #page-container .row.blog-row div.blog-image > a { display: block; }
  /* the home Links panel */
  body.aa-site.aa-home #page-container .bottom-banner.links a { display: inline-block; padding: 4px 0; margin: -4px 0; }
  /* the home blog cards' dates (12px #888 from 992) */
  body.aa-site.aa-home #page-container .row.blog-row div.date { font-size: 14px; color: #595959; }
}

/* =========================================================================================================
   13. Audit round 1, continued
   ========================================================================================================= */
/* the menu's Local Info and Contact Us items carry live's drop-down arrow as their background, which also clears the blue that live's own rule gives a
   hovered or focused item, so a keyboard-focused parent showed white words on the white bar (live too). Below 1250 a focused or hovered parent is
   live's blue words on white, like a hovered item (from 1250 the same colour while keyboard-focused only, aa-design.css) */
@media (min-width: 768px) and (max-width: 1249px) {
  body.aa-site #page-container .navbar-custom .navbar-nav > li > a.parent:is(:hover, :focus, :active) { color: var(--aa-blue) !important; }
}
/* the offer tile's ground colour sits on the tile itself too (its blue tint is drawn by a ::before), so its outline button reads against blue */
@media (max-width: 1249px) {
  body.aa-site.aa-home #page-container #special { background-color: var(--aa-blue); }
}
/* the home "Theme Park Tickets" card is a fixed 129px box from 992 whose words scroll inside it; between 992 and 1249 the narrower card cut the last
   lines off (they ran under the link panel below): the card grows with its words */
@media (min-width: 992px) and (max-width: 1249px) {
  body.aa-site.aa-home #page-container .container.bottom-wrapper .rightbanner-content { height: auto; min-height: 129px; display: flow-root; }
  body.aa-site.aa-home #page-container .container.bottom-wrapper .rightbanner-content div.inner-text { height: auto; overflow: visible; }
}
/* the home video box hides the part of the wider-than-the-box video (overflow hidden); below 1250 it clips it with overflow: clip instead (same look,
   and no scroll box), so the box no longer counts as cutting its words off. (A clip-path with overflow visible was tried first: the 1500px video then
   widened the page to 945px at 390.) */
@media (max-width: 1249px) {
  body.aa-site.aa-home #page-container #feature { overflow: clip; }
}
/* narrow phones (below 390): the full "Select Language" button ran into the logo; it shows Google's icon and its arrow only (the words stay in the link
   for screen readers) */
@media (max-width: 389px) {
  body.aa-site #page-container #translate-widget { width: auto; }
  body.aa-site #page-container #translate-widget .goog-te-gadget-simple a > span:first-child { font-size: 0 !important; }
  body.aa-site #page-container #translate-widget .goog-te-gadget-simple a { min-width: 24px; text-align: center; }
}
/* phones: long words (a web address used as a link's words, the email address in the contact table, "Accommodation" in a 38px heading) break
   rather than run off the screen */
@media (max-width: 767px) {
  body.aa-site #page-container #main-content :is(h1, h2, h3, p, li, td, a, blockquote) { overflow-wrap: anywhere; }
  body.aa-site #page-container footer.base :is(li, a, p) { overflow-wrap: anywhere; }
}

/* =========================================================================================================
   14. Words on photographs below 1250 (measured from pixels, build/stage4/onimg_contrast_aa.js):
       - the sand photo at the foot of every content area (content-bottom.jpg) has dark patches where the navy words read 3.2:1: a 55% wash of live's
         orange over it below 1250 (the sand still shows; the navy reads 4.5:1 or better on its darkest part);
       - the home blue band's photo of walkers: white words 4.2:1 on its pale parts: a 40% tint of live's footer blue over it;
       - the home video's words (white with a soft shadow straight on the moving picture, down to 1.2:1 on the sky): a dark caption panel behind them.
   ========================================================================================================= */
@media (max-width: 1249px) {
  body.aa-site #page-container .container-main-content-wrapper { background: linear-gradient(rgba(244, 185, 95, 0.55), rgba(244, 185, 95, 0.55)), url(/wp-content/uploads/ilaunch/skin/content-bottom.jpg) left bottom repeat-x, #f4b95f; }
  body.aa-site.aa-home #page-container .subtext-wrapper { background-color: #0e4b7c; background-image: linear-gradient(rgba(14, 75, 124, 0.4), rgba(14, 75, 124, 0.4)), url(/wp-content/uploads/ilaunch/skin/subcontent-bg.jpg); }
  body.aa-site.aa-home #page-container .featureoverlay { left: 0; right: 0; width: fit-content; max-width: 95%; margin: 0 auto; padding: 8px 16px; border-radius: 4px; background: rgba(0, 0, 0, 0.55); }
  body.aa-site.aa-home #page-container .featureoverlay p { text-shadow: none; }
}

/* =========================================================================================================
   15. Top 10 things to do (page 1393): each attraction is a two-cell table row (words, then a 500 x 252 photo floated right). Below 992 the words were
       squeezed into a 238px column beside the photo (and on a phone the photo into a 26px strip): the row stacks, photo first, at most the column wide
   ========================================================================================================= */
@media (max-width: 991px) {
  body.aa-site.page-id-1393 #page-container .page-content table, body.aa-site.page-id-1393 #page-container .page-content table :is(tbody, td) { display: block; width: auto; }
  /* each attraction reads photo first, then its name, words and button (the photo was the first thing under the page heading at 1440 too) */
  body.aa-site.page-id-1393 #page-container .page-content table tr { display: flex; flex-direction: column; }
  body.aa-site.page-id-1393 #page-container .page-content table tr > td:nth-child(2) { order: -1; }
  body.aa-site.page-id-1393 #page-container .page-content table td img { float: none !important; display: block; max-width: 100%; height: auto !important; margin: 0 0 12px; }
}
/* 992 to 1249: the photo cell sat vertically centred beside a taller text cell; both start at the top of their row */
@media (min-width: 992px) and (max-width: 1249px) {
  body.aa-site.page-id-1393 #page-container .page-content table td { vertical-align: top; }
}
@media (max-width: 767px) {
  body.aa-site.page-id-1393 #page-container .page-content table td img { width: 100% !important; }
}

/* =========================================================================================================
   16. Google Translate, once a language is picked: Google pins its 40px bar to the top of the screen and moves <body> down (top: 40px); live's
       fixed header stayed under that bar (logo, Translate button and menu button half hidden, live the same). Below 1250 the header follows the body
       down. (From 1250 live's behaviour is kept.)
   ========================================================================================================= */
@media (max-width: 1249px) {
  body.aa-site[style*="top: 40px"] #page-container nav.navbar-fixed-top { top: 40px; }
}

/* =========================================================================================================
   17. Rooms (992 to 1199): each room's blue panel (48px down, 579px tall) floats right inside a 585px box in a 589px row, so it ran 42px into the next
       room, whose panel then floated to the LEFT of it and covered that room's photo thumbnails (live the same). Live gives each room 680px from 1200;
       the same from 992 keeps every panel in its own room
   ========================================================================================================= */
@media (min-width: 992px) and (max-width: 1199px) {
  body.aa-site #page-container .list.rooms .entry { min-height: 680px; }
}

/* =========================================================================================================
   18. The wifi terms pop-up below 1250: its small print is 12px (inline in live's fragment) and its lines 12px on phones: 14px
   ========================================================================================================= */
@media (max-width: 1249px) {
  body.aa-site :where(#fancybox-tmp, #fancybox-wrap) p[style*="font-size: 12px"] { font-size: 14px !important; line-height: 18px !important; }
  /* Fix round 1 N3 (10 Oct 2026): fancybox measures this pop-up's content (live's .blank-wrapper is at least 320px wide) and then narrows the
     box to the screen less 100px (its 20px margin, 20px frame and 10px padding each side), so at 320 to 414 the centred lines were cut off at
     both edges. Below 1250 the content is never wider than that box, so the lines wrap inside it and the box is measured at its final height.
     From 420 up the box is live's 320px as before; 1250 and up untouched. */
  body.aa-site :where(#fancybox-tmp, #fancybox-wrap) .blank-wrapper { min-width: min(320px, calc(100vw - 100px)); max-width: calc(100vw - 100px); }
}
@media (max-width: 767px) {
  body.aa-site :where(#fancybox-tmp, #fancybox-wrap) p { font-size: 14px; line-height: 22px; }
}
/* Specials (Jake, 15 Oct 2026): live's 320px card rule (270px wide) leaves the blue offer panel as a narrow strip on a tablet. From 600px up to the
   side-by-side desktop layout (992) the panel runs the full content width (capped at 720px and centred), photo on top, text below at a readable measure. */
@media (min-width: 600px) and (max-width: 991px) {
  body.aa-site #page-container .list.deals .entry { width: 100%; max-width: 720px; margin-left: auto; margin-right: auto; }
  body.aa-site #page-container .list.deals .deal-image { height: 340px; }
  body.aa-site #page-container .list.deals .text { padding-right: 0; }
}