/* clh-mobile.css: the designed tablet and phone layer for Cairns Holiday Lodge (Stage 4, skill Rule 2). Loads LAST.
   Started from the kit's ilaunch-responsive.template.css (copy in build/stage4/) for its structure and every-state rules; every
   selector is rewritten for this skin (header with #left logo + .right phone/social, absolute white #menu bar, #feature hero with
   the booking box inside it, home .content/.maintext/.faq/.video, .special offer, .blog-wrapper teasers, rooms .list.rooms,
   .gallery, .content.blog lists, #footer .footermenu/.footer-mid with the map). Nothing here applies at 1250px and up.
   Bands: 1250+ live (clh-live.css + clh-design.css); 1170-1249 live's layout with AA colours, 14px text, 16px inputs and 24px
   tap targets; 768-1169 the tablet reflow; below 768 the phone design. AA palette computed for this site's colours:
   link/heading blue #1d7fba (4.38:1 on white) -> #196d9e (5.64:1, live's own footer-row blue); menu blue #259ae0 under white
   text (3.10:1) -> #196d9e; buttons #222 on gold #f3c70e (9.84:1) at rest, white on navy #072e53 (13.77:1) hovered, focused or tapped. */

body.clh-site { --clh-navy: #072e53; --clh-deep: #041f37; --clh-blue: #1d7fba; --clh-blue-aa: #196d9e; --clh-gold: #f3c70e; --clh-ink: #222222; --clh-grey: #ededed; }

/* ==================== below 1250: AA colours, 14px text floor, 16px inputs, 24px taps (live's layout kept from 1170) ==================== */
@media (max-width: 1249px) {
  /* live has no viewport meta and a 1170px minimum (clh-design.css 21); the designed bands need neither */
  body.clh-site #page-container { min-width: 0; }

  /* small live type up to 14px */
  body.clh-site #page-container #footer, body.clh-site #page-container .vcard, body.clh-site #page-container .vcard li,
  body.clh-site #page-container .copyright, body.clh-site #page-container .footer-tags p, body.clh-site #page-container #footer .fmenu li a { font-size: 14px; }
  body.clh-site #page-container .panel, body.clh-site #page-container .panel .summary, body.clh-site #page-container .panel .date,
  body.clh-site #page-container .panel .details, body.clh-site #page-container .entry .details, body.clh-site #page-container .panel li em,
  body.clh-site #page-container .paging, body.clh-site #page-container div.top { font-size: 14px; }
  body.clh-site.clh-home #page-container .panel.blog .summary, body.clh-site.clh-home #page-container .panel.blog .date { font-size: 14px; line-height: 20px; }
  body.clh-site #page-container a.more, body.clh-site #page-container a.more:link, body.clh-site #page-container a.more:visited { font-size: 14px; line-height: 20px; padding-top: 2px; padding-bottom: 2px; color: var(--clh-blue-aa) !important; }
  body.clh-site #page-container a.more:hover, body.clh-site #page-container a.more:focus, body.clh-site #page-container a.more:active { color: var(--clh-navy) !important; }

  /* AA text colours */
  body.clh-site #page-container h3, body.clh-site #page-container .maintext h4 { color: var(--clh-blue-aa); }
  body.clh-site #page-container .panel .date { color: #666666; }
  body.clh-site #page-container div.top a { color: #666666; }
  body.clh-site #page-container div.top a:hover, body.clh-site #page-container div.top a:focus, body.clh-site #page-container div.top a:active { color: #ffffff; background: #6d6d6d; }
  body.clh-site #page-container .paging, body.clh-site #page-container .paging a:link, body.clh-site #page-container .paging a:visited { color: #595959; }
  body.clh-site #page-container .paging em, body.clh-site #page-container .paging em a:link, body.clh-site #page-container .paging em a:visited,
  body.clh-site #page-container .paging a:hover, body.clh-site #page-container .paging a:focus, body.clh-site #page-container .paging a:active { color: #ffffff; background-color: #6d6d6d; }
  body.clh-site #page-container blockquote .highlight { color: #555555; }
  body.clh-site #page-container .panel .title a:hover, body.clh-site #page-container .panel .title a:focus { color: var(--clh-blue-aa); }
  body.clh-site.clh-home #page-container .panel.blog .title a:hover, body.clh-site.clh-home #page-container .panel.blog .title a:focus { color: var(--clh-blue-aa); }

  /* the menu bar (1170-1249) and its drop-down: live's #259ae0 under white text is 3.1:1 */
  body.clh-site #page-container #menu li.active a:link, body.clh-site #page-container #menu li.active a:active, body.clh-site #page-container #menu li.active a:visited,
  body.clh-site #page-container #menu li:hover a:link, body.clh-site #page-container #menu li:hover a:active, body.clh-site #page-container #menu li:hover a:visited, body.clh-site #page-container #menu li:hover a:hover,
  body.clh-site #page-container #menu li a:focus { color: #ffffff; background: var(--clh-blue-aa); }
  body.clh-site #page-container #menu li ul, body.clh-site #page-container #menu li:hover ul a:link, body.clh-site #page-container #menu li:hover ul a:active, body.clh-site #page-container #menu li:hover ul a:visited { background: var(--clh-blue-aa); color: #ffffff; }
  body.clh-site #page-container #menu li li:hover a:link, body.clh-site #page-container #menu li li a:hover, body.clh-site #page-container #menu li li a:focus,
  body.clh-site #page-container #menu li li.active a, body.clh-site #page-container #menu li:hover li.active a { background: #ffffff; color: var(--clh-blue-aa); }
  /* Book Now in the menu: dark text on gold at rest, white on navy in every other state */
  body.clh-site #page-container #menu li.alt a:link, body.clh-site #page-container #menu li.alt a:visited { color: var(--clh-ink); background: var(--clh-gold); }
  body.clh-site #page-container #menu li.alt:hover a:link, body.clh-site #page-container #menu li.alt:hover a:visited, body.clh-site #page-container #menu li.alt a:hover,
  body.clh-site #page-container #menu li.alt a:focus, body.clh-site #page-container #menu li.alt a:active { color: #ffffff; background: var(--clh-navy); }

  /* every button in every state: dark text on gold at rest; hover, focus and the tap that sticks on a phone white on navy */
  body.clh-site #page-container input.button, body.clh-site #page-container a.button, body.clh-site #page-container a.button:link, body.clh-site #page-container a.button:visited,
  body.clh-site #page-container .bookingbutton .button, body.clh-site.clh-home #page-container .special .button, body.clh-site #page-container .button.roombooking { color: var(--clh-ink) !important; background-color: var(--clh-gold) !important; }
  body.clh-site #page-container input.button:hover, body.clh-site #page-container input.button:focus, body.clh-site #page-container input.button:active,
  body.clh-site #page-container a.button:hover, body.clh-site #page-container a.button:focus, body.clh-site #page-container a.button:active,
  body.clh-site #page-container .bookingbutton .button:hover, body.clh-site #page-container .bookingbutton .button:focus, body.clh-site #page-container .bookingbutton .button:active,
  body.clh-site.clh-home #page-container .special .button:hover, body.clh-site.clh-home #page-container .special .button:focus, body.clh-site.clh-home #page-container .special .button:active,
  body.clh-site #page-container .button.roombooking:hover, body.clh-site #page-container .button.roombooking:focus, body.clh-site #page-container .button.roombooking:active { color: #ffffff !important; background-color: var(--clh-navy) !important; }

  /* 16px inputs (no zoom on focus) */
  body.clh-site #page-container input, body.clh-site #page-container select, body.clh-site #page-container textarea { font-size: 16px; }

  /* tap targets: footer and sidebar links at least 24px tall */
  body.clh-site #page-container #footer .fmenu li a { height: auto; line-height: 24px; }
  /* the month links (not VIEW MORE, whose arrow is a background in its 11px right padding: fix round 1 V2) */
  body.clh-site #page-container .panel ul.archive a:not(.more), body.clh-site #page-container .panel .title a { display: inline-block; padding: 3px 0; }
  body.clh-site #page-container .entry .details a, body.clh-site #page-container .panel .details a { display: inline-block; padding: 2px 0; }
  body.clh-site #page-container .footer-tags a { display: inline-block; line-height: 24px; }
  body.clh-site #page-container #footer li a.email { display: inline-block; line-height: 24px; }
  body.clh-site #page-container .paging a:link, body.clh-site #page-container .paging a:visited, body.clh-site #page-container .paging em { display: inline-block; min-width: 24px; line-height: 24px; text-align: center; }
  body.clh-site #page-container span.options a { display: inline-block; min-width: 24px; line-height: 24px; text-align: center; }
  body.clh-site #page-container div.top a { line-height: 24px; }
  body.clh-site #page-container .container.main div.top a.scrollto:hover, body.clh-site #page-container .container.main div.top a.scrollto:focus, body.clh-site #page-container .container.main div.top a.scrollto:active,
  body.clh-site #page-container div.top a.scrollto:hover, body.clh-site #page-container div.top a.scrollto:focus, body.clh-site #page-container div.top a.scrollto:active { color: #ffffff; background: #6d6d6d; }
  body.clh-site #page-container #footer .footermenu a { display: inline-block; }
  body.clh-site #page-container .maintext td a { display: inline-block; padding: 3px 0; }
  body.clh-site #page-container .maintext a:has(> img), body.clh-site #page-container .entry .summary a:has(> img) { display: inline-block; }
  body.clh-site #page-container .maintext a, body.clh-site #page-container .entry a { overflow-wrap: anywhere; }
  /* links inside running text (they wrap with the sentence): a 25px tap box per line without moving the text (vertical padding on an inline box) */
  body.clh-site #page-container .entry .summary p a:not(.button):not(.more), body.clh-site #page-container .maintext p a:not(.button):not(.more) { padding-top: 3px; padding-bottom: 3px; }
  /* site map: the list sits in the .container after .content-bottom, not in .maintext (fix round 1 V4: the links were 19px tall); links stay
     inline so a wrapped item keeps its bullet on its first line, the vertical padding gives a 33px tap area in a 34px row */
  body.clh-site.page-id-1244 #page-container .content-bottom + .container li a { display: inline; padding: 7px 0; }
  body.clh-site.page-id-1244 #page-container .content-bottom + .container li { line-height: 22px; padding: 6px 0; }
  body.clh-site.page-id-1244 #page-container .content-bottom + .container li > :is(ul, ol) { margin-top: 6px; }
  /* headings under 24px and their links: live's #1d7fba is 4.38:1 on white */
  body.clh-site #page-container h2, body.clh-site #page-container h2 a:link, body.clh-site #page-container h2 a:visited, body.clh-site #page-container h2 a:hover, body.clh-site #page-container h2 a:active { color: var(--clh-blue-aa); }
  /* the header's icon links carry their names as hidden text in live's grey: the same white as the footer's (no visible change) */
  body.clh-site #page-container #header .socialmedia a:link, body.clh-site #page-container #header .socialmedia a:visited, body.clh-site #page-container #header .socialmedia a:hover { color: #ffffff; }
}

/* keyboard focus below 1250: a navy ring with a white halo, readable on white pages, the navy header and footer and the photo panels alike
   (navy on white 13.8:1, white on navy 13.8:1); 1250 and up keep the browser's own ring (clh-design.css 26) */
@media (max-width: 1249px) {
  body.clh-site :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 3px solid var(--clh-navy) !important; outline-offset: 2px !important; box-shadow: 0 0 0 2px #ffffff, 0 0 0 7px #ffffff !important; }
}

/* the drop-down on touch screens and keyboards where the menu bar shows (1170 and up): the first tap on Contact Us opens its list
   (html.ils-touch, script in clh-sitewide.php), keyboard focus inside opens it too */
@media (min-width: 1170px) {
  body.clh-site #page-container #menu > ul > li:focus-within > ul, body.clh-site #page-container #menu > ul > li.ils-open > ul { display: block; }
  html.ils-touch body.clh-site #page-container #menu > ul > li:not(.ils-open):hover > ul { display: none; }
  /* opened by keyboard or tap (no hover): the items take the open list's white text, as they do under live's hover */
  body.clh-site #page-container #menu > ul > li:focus-within li:not(.active) > a:link, body.clh-site #page-container #menu > ul > li:focus-within li:not(.active) > a:visited,
  body.clh-site #page-container #menu > ul > li.ils-open li:not(.active) > a:link, body.clh-site #page-container #menu > ul > li.ils-open li:not(.active) > a:visited { color: #ffffff; }
  body.clh-site #page-container #menu > ul > li:focus-within li:not(.active) > a:link:focus, body.clh-site #page-container #menu > ul > li.ils-open li:not(.active) > a:link:focus,
  body.clh-site #page-container #menu > ul > li:focus-within li:not(.active) > a:link:hover, body.clh-site #page-container #menu > ul > li.ils-open li:not(.active) > a:link:hover,
  body.clh-site #page-container #menu > ul > li:focus-within li:not(.active) > a:visited:focus, body.clh-site #page-container #menu > ul > li.ils-open li:not(.active) > a:visited:focus { color: var(--clh-blue-aa); background: #ffffff; }
}

/* ==================== below 1170: tablet and phone share the reflow ==================== */
@media (max-width: 1169px) {
  /* containers: fluid with a 24px gutter */
  body.clh-site #page-container .container { width: auto; padding-left: 24px; padding-right: 24px; }

  /* header: navy bar in the flow, logo left; phone number and social icons; MENU button opens the menu below */
  body.clh-site #page-container #header { position: relative; height: auto; padding: 14px 0; }
  body.clh-site #page-container #header .container { display: flex; flex-wrap: wrap; align-items: center; column-gap: 20px; row-gap: 12px; }
  body.clh-site #page-container #header .container > .clearboth, body.clh-site #page-container #header .right > .clearboth { display: none; }
  body.clh-site #page-container #header #left { flex: 0 1 auto; margin-right: auto; }
  body.clh-site #page-container #header .logo { float: none; padding: 0; }
  body.clh-site #page-container #header .logo a { display: block; }
  body.clh-site #page-container #header .logo img { width: 300px; max-width: 100%; height: auto; }
  body.clh-site #page-container #header .container .right { float: none; width: auto; margin: 0; display: flex; align-items: center; column-gap: 20px; }
  body.clh-site #page-container #header .socialmedia { float: none; margin: 0; line-height: 0; display: flex; gap: 6px; }
  body.clh-site #page-container #header .socialmedia a { margin: 0; }
  body.clh-site #page-container #header .tel { float: none; order: -1; }
}
@media (min-width: 768px) and (max-width: 979px) {
  body.clh-site #page-container #header .socialmedia { display: none; }
}
@media (max-width: 1169px) {
  body.clh-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: 0;
    background: var(--clh-blue-aa); color: #ffffff; font: 700 15px/44px 'PT Sans', Arial, Helvetica, sans-serif; letter-spacing: 1px; text-transform: uppercase; cursor: pointer; }
  body.clh-site #page-container .ils-menu-toggle:hover, body.clh-site #page-container .ils-menu-toggle:focus, body.clh-site #page-container .ils-menu-toggle:active { background: #ffffff; color: var(--clh-navy); }
  body.clh-site #page-container .ils-menu-toggle span, body.clh-site #page-container .ils-menu-toggle span::before, body.clh-site #page-container .ils-menu-toggle span::after { display: block; position: relative; width: 20px; height: 2px; background: currentColor; content: ""; }
  body.clh-site #page-container .ils-menu-toggle span::before { position: absolute; top: -6px; }
  body.clh-site #page-container .ils-menu-toggle span::after { position: absolute; top: 6px; }
  body.clh-site #page-container #header.ils-menu-open .ils-menu-toggle span { background: transparent; }
  body.clh-site #page-container #header.ils-menu-open .ils-menu-toggle span::before { top: 0; transform: rotate(45deg); background: currentColor; }
  body.clh-site #page-container #header.ils-menu-open .ils-menu-toggle span::after { top: 0; transform: rotate(-45deg); background: currentColor; }

  /* the menu: a white panel under the bar, one item per row */
  body.clh-site #page-container #menu { display: none; position: static; flex: 1 1 100%; width: auto; margin: 2px -24px -14px; padding: 0; line-height: normal; text-align: left; box-shadow: none; background: #ffffff; letter-spacing: 0.5px; }
  body.clh-site #page-container #header.ils-menu-open #menu { display: block; }
  body.clh-site #page-container #menu ul { display: block; width: auto; }
  body.clh-site #page-container #menu li, body.clh-site #page-container #menu li.alt { display: block; float: none; margin: 0; border-top: 1px solid #e1e1e1; }
  body.clh-site #page-container #menu a:link, body.clh-site #page-container #menu a:visited, body.clh-site #page-container #menu a:active { display: block; padding: 0 24px; line-height: 50px; font-size: 17px; color: #333333; background: #ffffff; }
  body.clh-site #page-container #menu li ul { position: static; display: block; width: auto; padding: 0; background: #f4f4f4; }
  body.clh-site #page-container #menu li li { border-top: 1px solid #e1e1e1; }
  body.clh-site #page-container #menu li ul a:link, body.clh-site #page-container #menu li ul a:visited, body.clh-site #page-container #menu li ul a:active,
  body.clh-site #page-container #menu li:hover ul a:link, body.clh-site #page-container #menu li:hover ul a:visited, body.clh-site #page-container #menu li:hover ul a:active { padding: 0 24px 0 44px; line-height: 46px; font-size: 16px; color: #333333; background: #f4f4f4; }
  body.clh-site #page-container #menu li:hover > a:link, body.clh-site #page-container #menu li:hover > a:visited { color: #333333; background: #ffffff; }
  body.clh-site #page-container #menu li a:hover, body.clh-site #page-container #menu li a:focus, body.clh-site #page-container #menu li li a:hover, body.clh-site #page-container #menu li li a:focus,
  body.clh-site #page-container #menu li.active > a:link, body.clh-site #page-container #menu li.active > a:visited, body.clh-site #page-container #menu li li.active a,
  body.clh-site #page-container #menu li:hover li.active a { color: #ffffff; background: var(--clh-blue-aa); }
  body.clh-site #page-container #menu li.alt a:link, body.clh-site #page-container #menu li.alt a:visited { font-weight: 700; padding: 0 24px; color: var(--clh-ink); background: var(--clh-gold); }
  /* the current section's sub-items stay grey rows (only the current page's own row is blue) */
  body.clh-site #page-container #menu li.active li:not(.active) > a:link, body.clh-site #page-container #menu li.active li:not(.active) > a:visited { color: #333333; background: #f4f4f4; }
  body.clh-site #page-container #menu li.active li:not(.active) > a:hover, body.clh-site #page-container #menu li.active li:not(.active) > a:focus, body.clh-site #page-container #menu li.active li:not(.active) > a:active { color: #ffffff; background: var(--clh-blue-aa); }

  /* hero: the photo keeps a fixed height, the booking box moves under it */
  body.clh-site #page-container #feature, body.clh-site.clh-home #page-container #feature { height: auto; overflow: visible; background: var(--clh-grey); }
  body.clh-site #page-container .featuremain, body.clh-site #page-container .featureimage { height: 360px; }
  body.clh-site.clh-home #page-container .featuremain { height: 440px; }
  body.clh-site.clh-home #page-container .featureoverlay { width: 360px; left: auto; right: 24px; bottom: auto; top: 192px; margin: 0; }
  body.clh-site.clh-home #page-container .featureoverlay img { display: block; width: 100%; height: auto; }

  /* booking: a white box with live's grey frame, centred under the photo */
  body.clh-site #page-container #booking, body.clh-site.clh-home #page-container #booking { position: relative; left: auto; bottom: auto; width: auto; max-width: 720px; height: auto; margin: 0 auto; padding: 4px 24px 24px; border-width: 8px; border-style: solid; border-color: #cececf; box-sizing: border-box; }
  body.clh-site #page-container #feature > #booking { margin-top: 24px; margin-bottom: 24px; }
  body.clh-site #page-container #booking::after { width: 60px; height: 56px; margin: -34px -18px 0 0; background-size: contain; }
  body.clh-site #page-container #booking h3 { line-height: 48px; }
  body.clh-site #page-container .bookingform { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; column-gap: 16px; row-gap: 14px; align-items: end; }
  body.clh-site #page-container .bookingform span.check-in, body.clh-site #page-container .bookingform span.duration { float: none; display: block; margin: 0; }
  body.clh-site #page-container .bookingform .datepicker_wrap { position: relative; display: block; }
  body.clh-site #page-container .bookingform span input { float: none; display: block; width: 100%; height: 48px; line-height: 46px; box-sizing: border-box; }
  body.clh-site #page-container img.datepicker_trigger { bottom: 17px; }
  body.clh-site #page-container .bookingform span select { width: 100%; height: 48px; box-sizing: border-box; }
  body.clh-site #page-container .bookingbutton, body.clh-site #page-container #feature .bookingbutton { float: none; display: block; margin: 0; }
  body.clh-site #page-container .bookingbutton .button { width: auto; height: 48px; line-height: 48px; padding: 0 28px; }
  body.clh-site #page-container .bookingform .clearleft { display: none; }

  /* home: welcome text, FAQ band, video, offer, blog teasers, one column */
  body.clh-site.clh-home #page-container .content { text-align: left; }
  body.clh-site.clh-home #page-container .content::after { display: none; }
  body.clh-site.clh-home #page-container .content .container::before { display: none; }
  body.clh-site.clh-home #page-container .content .container.main { padding: 36px 24px 0; }
  body.clh-site.clh-home #page-container .container.main .maintext { float: none; width: auto; padding-bottom: 0; }
  body.clh-site.clh-home #page-container .faq { position: static; width: auto; margin: 28px -24px 0; }
  body.clh-site.clh-home #page-container .faqcontent { position: static; width: auto; padding: 0 24px; }
  body.clh-site.clh-home #page-container .faqcontent p { height: auto; line-height: normal; }
  body.clh-site.clh-home #page-container .faqcontent p a { display: block; width: auto; padding: 22px 52px 22px 0; font-size: 24px; line-height: 30px; background-position: right 0 center; }
  body.clh-site.clh-home #page-container .video { position: relative; top: auto; bottom: auto; right: auto; width: auto; height: 440px; margin: 0; box-shadow: none; background-position: center center; }
  body.clh-site.clh-home #page-container .content > .clearboth { display: none; }

  body.clh-site #page-container .special { height: auto; display: grid; grid-template-columns: 1fr 1fr; }
  body.clh-site #page-container .special .special-image { position: relative; inset: auto; min-height: 360px; }
  body.clh-site #page-container .special .text { float: none; display: block; width: auto; padding: 28px 24px 30px; }
  body.clh-site #page-container .special .text::before, body.clh-site #page-container .special .text::after { display: none; }
  body.clh-site #page-container .special h3 { position: relative; left: auto; float: none; display: block; width: auto; margin: 0 0 16px; }
  body.clh-site #page-container .special h4 { position: static; display: block; width: auto; margin: 0 0 14px; }
  body.clh-site #page-container .special p { float: none; padding: 0; line-height: 20px; margin: 0 0 12px; }
  body.clh-site #page-container .special > .clearboth { display: none; }

  body.clh-site.clh-home #page-container .blog-wrapper { position: relative; height: auto; }
  body.clh-site.clh-home #page-container .panel.blog { width: auto; padding: 0 24px 44px; }
  body.clh-site.clh-home #page-container .panel.blog h3 { margin: 36px 0 28px; padding-left: 84px; font-size: 32px; line-height: 70px; background-size: 70px auto; }
  body.clh-site.clh-home #page-container .panel.blog ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 20px; row-gap: 28px; }
  body.clh-site.clh-home #page-container .panel.blog li, body.clh-site.clh-home #page-container .panel.blog li:last-child { float: none; display: block; width: auto; margin: 0; }
  body.clh-site.clh-home #page-container .panel.blog .blog-image { float: none; width: auto; height: auto; margin: 0; aspect-ratio: 370 / 256; background-size: cover; }
  body.clh-site.clh-home #page-container .panel.blog .blog-image a { width: 100%; height: 100%; }
  body.clh-site.clh-home #page-container .panel.blog .text { display: block; width: auto; margin: -40px 12px 0; }

  /* inner pages */
  body.clh-site #page-container .content .container.main { padding: 36px 24px 0; }
  body.clh-site #page-container .container > .left, body.clh-site #page-container .container > .right,
  body.clh-site #page-container .content .left, body.clh-site #page-container .content .right { float: none; width: auto; }
  body.clh-site #page-container .container > .right.sidemenu { margin-top: 10px; }
  body.clh-site #page-container .panel { margin: 40px 0; }
  body.clh-site #page-container .maintext img, body.clh-site #page-container .entry img, body.clh-site #page-container .maintext iframe { max-width: 100%; height: auto; }
  body.clh-site #page-container .maintext table { max-width: 100%; }
  /* FAQ: the category index (repeated after every category) shows once, at the top */
  body.clh-site.page-id-1233 #page-container .content-bottom + .container { display: flex; flex-direction: column; }
  body.clh-site.page-id-1233 #page-container .content-bottom + .container > .right ~ .right { display: none; }
  body.clh-site.page-id-1233 #page-container .content-bottom + .container > .right:not(.right ~ .right) { order: -1; margin: 0 0 10px; }
  body.clh-site.page-id-1233 #page-container .content-bottom + .container > .right .panel { margin: 30px 0 0; }

  /* search page: field and button on one row */
  body.clh-site #page-container table.form.searchpage, body.clh-site #page-container table.form.searchpage tbody, body.clh-site #page-container table.form.searchpage tr { display: block; width: auto; }
  body.clh-site #page-container table.form.searchpage td { display: flex; gap: 10px; width: auto; padding: 0 0 36px; }
  body.clh-site #page-container .form.searchpage input.clicknclear { float: none; flex: 1 1 auto; min-width: 0; width: auto; height: 48px; margin: 0; box-sizing: border-box; border-color: #767676; }
  body.clh-site #page-container .form.searchpage input.button { float: none; flex: 0 0 auto; height: 48px; line-height: 48px; margin: 0; padding: 0 24px; }

  /* rooms: photo, thumbnails, then the navy text panel */
  body.clh-site #page-container .list.rooms { padding-bottom: 8px; }
  body.clh-site #page-container .list.rooms .container { z-index: auto; }
  body.clh-site #page-container .list.rooms .entry { display: flex; flex-direction: column; margin: 0 0 36px; background: var(--clh-deep); }
  body.clh-site #page-container .list.rooms .entry .main-photo { position: relative; inset: auto; aspect-ratio: 1170 / 650; height: auto; }
  body.clh-site #page-container .list.rooms .entry .main-photo a { width: auto; right: 0; }
  body.clh-site #page-container .list.rooms .entry .images { position: static; width: auto; height: auto; }
  body.clh-site #page-container .gallery.room { position: static; display: flex; flex-wrap: wrap; gap: 8px; padding: 10px; }
  body.clh-site #page-container .gallery.room a { flex: 0 0 auto; display: block; }
  body.clh-site #page-container .gallery.room img { float: none; margin: 0; }
  body.clh-site #page-container .list.rooms .entry .roomtext { float: none; width: auto; min-height: 0; padding: 4px 24px 28px; background: var(--clh-deep); }
  body.clh-site #page-container .button.roombooking { margin-top: 18px; }

  /* image galleries: a grid of whole photos */
  body.clh-site #page-container .gallery:not(.room) { margin: 40px 0; }
  body.clh-site #page-container .gallery:not(.room) .container { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  body.clh-site #page-container .gallery:not(.room) .container > h3 { grid-column: 1 / -1; margin: 0 0 6px; }
  body.clh-site #page-container .gallery:not(.room) .container > a:not(.gallery-item) { position: absolute; }
  body.clh-site #page-container .gallery:not(.room) .container > .clearleft { display: none; }
  body.clh-site #page-container .gallery:not(.room) .gallery-item { display: block; }
  body.clh-site #page-container .gallery:not(.room) img { float: none; width: 100%; height: auto; margin: 0; }

  /* footer: the keyword row wraps as whole items; map, address and links reflow */
  body.clh-site #page-container .footermenu { padding: 8px 0; }
  body.clh-site #page-container .footermenu ul { display: flex; flex-wrap: wrap; justify-content: center; column-gap: 26px; row-gap: 0; }
  body.clh-site #page-container .footermenu li, body.clh-site #page-container .footermenu li:first-child { display: block; padding: 0; background: none; }
  body.clh-site #page-container #footer .footermenu a { display: inline-block; padding: 0; line-height: 36px; }
  body.clh-site #page-container .footer-mid { height: auto; min-height: 292px; }
  body.clh-site #page-container .footer-mid .container { width: auto; padding: 0 24px 30px calc(50% + 24px); }
  body.clh-site #page-container .footer-mid .vcard { float: none; width: auto; padding: 92px 0 0 0; background-position: 0 18px; }
  body.clh-site #page-container #footer .footer-mid .container .right { float: none; width: auto; margin: 0; text-align: left; }
  body.clh-site #page-container #footer .socialmedia { float: none; margin: 22px 0 14px; }
  body.clh-site #page-container #footer .fmenu { margin: 0 0 14px; }
  body.clh-site #page-container .copyright { float: none; display: block; text-align: left; }
  body.clh-site #page-container .footer-mid .map-wrapper { top: 0; bottom: 0; height: auto; }
  body.clh-site #page-container .footer-mid .map-container { height: 100%; min-height: 292px; }
}

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

  /* header: logo and MENU on the first row, the phone number and social icons on the second */
  body.clh-site #page-container #header { padding: 12px 0; }
  body.clh-site #page-container #header .container { column-gap: 12px; row-gap: 10px; }
  body.clh-site #page-container #header #left { order: 1; flex: 1 1 0; min-width: 0; }
  body.clh-site #page-container #header .logo img { width: 230px; }
  body.clh-site #page-container .ils-menu-toggle { order: 2; }
  body.clh-site #page-container #header .container .right { order: 3; flex: 1 1 100%; flex-wrap: wrap; row-gap: 8px; justify-content: space-between; }
  body.clh-site #page-container #header .tel { font-size: 19px; padding-left: 34px; letter-spacing: 0.5px; }
  body.clh-site #page-container #menu { order: 4; margin: 0 -16px -12px; }
  body.clh-site #page-container #menu a:link, body.clh-site #page-container #menu a:visited, body.clh-site #page-container #menu a:active, body.clh-site #page-container #menu li.alt a:link, body.clh-site #page-container #menu li.alt a:visited { padding-left: 16px; padding-right: 16px; }
  body.clh-site #page-container #menu li ul a:link, body.clh-site #page-container #menu li ul a:visited, body.clh-site #page-container #menu li:hover ul a:link, body.clh-site #page-container #menu li:hover ul a:visited { padding-left: 36px; }

  /* hero */
  body.clh-site #page-container .featuremain, body.clh-site #page-container .featureimage { height: 220px; }
  body.clh-site.clh-home #page-container .featuremain { height: 270px; }
  body.clh-site.clh-home #page-container .featureoverlay { width: 250px; right: 8px; top: 102px; }

  /* booking: stacked, two fields side by side, a full-width button */
  body.clh-site #page-container #feature > #booking { margin: 16px; }
  body.clh-site #page-container #booking, body.clh-site.clh-home #page-container #booking { padding: 2px 16px 18px; }
  body.clh-site #page-container #booking h3 { font-size: 22px; line-height: 44px; }
  body.clh-site #page-container .bookingform { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 12px; }
  body.clh-site #page-container .bookingform span input { padding: 0 34px 0 12px; }
  body.clh-site #page-container img.datepicker_trigger { right: 12px; }
  body.clh-site #page-container .bookingform span select { padding: 0 30px 0 12px; background-position: right 12px center; }
  body.clh-site #page-container .bookingbutton, body.clh-site #page-container #feature .bookingbutton { grid-column: 1 / -1; }
  body.clh-site #page-container .bookingbutton .button { width: 100%; height: 52px; line-height: 52px; padding: 0; }

  /* type */
  body.clh-site #page-container h1 { font-size: 26px; line-height: 31px; }
  body.clh-site #page-container h2 { font-size: 22px; line-height: 27px; }
  body.clh-site #page-container .content p { margin: 14px 0; }
  body.clh-site #page-container [style*="justify"] { text-align: left !important; }

  /* home */
  body.clh-site.clh-home #page-container .content .container.main { padding: 28px 16px 0; }
  body.clh-site.clh-home #page-container .faq { margin: 24px -16px 0; }
  body.clh-site.clh-home #page-container .faqcontent { padding: 0 16px; }
  body.clh-site.clh-home #page-container .faqcontent p a { font-size: 19px; line-height: 25px; padding: 18px 48px 18px 0; }
  body.clh-site.clh-home #page-container .video { height: 260px; }
  body.clh-site #page-container .special { display: flex; flex-direction: column; }
  body.clh-site #page-container .special .special-image { min-height: 0; height: 220px; }
  body.clh-site #page-container .special .text { order: -1; padding: 24px 16px 26px; }
  body.clh-site #page-container .special .button { display: block; width: auto; padding: 0; height: 52px; line-height: 52px; }
  body.clh-site.clh-home #page-container .panel.blog { padding: 0 16px 36px; }
  body.clh-site.clh-home #page-container .panel.blog h3 { margin: 28px 0 20px; padding-left: 64px; font-size: 28px; line-height: 56px; background-size: 56px auto; }
  body.clh-site.clh-home #page-container .panel.blog ul { grid-template-columns: minmax(0, 1fr); row-gap: 26px; }
  body.clh-site.clh-home #page-container .panel.blog .text { margin: -44px 14px 0; padding: 12px 16px; }
  body.clh-site.clh-home #page-container .panel.blog .title a { font-size: 18px; line-height: 23px; padding: 2px 0; }

  /* inner pages */
  body.clh-site #page-container .content .container.main { padding: 26px 16px 0; }
  body.clh-site #page-container .panel { margin: 32px 0; }
  body.clh-site #page-container .panel h3 { font-size: 24px; line-height: 28px; }
  body.clh-site #page-container blockquote { padding: 6px 0 14px 52px; background-size: 40px auto; }
  body.clh-site #page-container .maintext p > a:only-child { display: inline-block; padding: 3px 0; }
  /* contact details table: label and value pairs */
  body.clh-site #page-container .maintext table:not(.form), body.clh-site #page-container .maintext table:not(.form) > tbody { display: block; }
  body.clh-site #page-container .maintext table:not(.form) tr { display: grid; grid-template-columns: 82px minmax(0, 1fr); }
  body.clh-site #page-container .maintext table:not(.form) td { display: block; width: auto; }
  body.clh-site #page-container .maintext table:not(.form) td[colspan] { grid-column: 2; }
  /* live's table forms (newsletter unsubscribe): label over a full-width field, the star beside the label */
  body.clh-site #page-container table.form:not(.searchpage), body.clh-site #page-container table.form:not(.searchpage) > tbody, body.clh-site #page-container table.form:not(.searchpage) tr { display: block; width: auto; }
  body.clh-site #page-container table.form:not(.searchpage) th, body.clh-site #page-container table.form:not(.searchpage) td { display: block; width: auto; padding: 0; text-align: left; line-height: 24px; }
  body.clh-site #page-container table.form:not(.searchpage) th { padding: 8px 0 6px; font-weight: 700; color: #333333; }
  body.clh-site #page-container table.form:not(.searchpage) td.required { background-position: right 0 top 16px; padding-right: 24px; }
  body.clh-site #page-container table.form:not(.searchpage) input:not(.button) { width: 100%; height: 48px; box-sizing: border-box; padding: 0 14px; border-color: #767676; }
  body.clh-site #page-container table.form:not(.searchpage) input.button { width: 100%; height: 52px; line-height: 52px; margin-top: 8px; padding: 0; }

  /* rooms */
  body.clh-site #page-container .gallery.room { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
  body.clh-site #page-container .gallery.room a { scroll-snap-align: start; }
  body.clh-site #page-container .list.rooms .entry .roomtext { padding: 2px 16px 22px; }
  body.clh-site #page-container .list.rooms .entry h2 { font-size: 23px; line-height: 27px; padding: 18px 0 12px; }
  body.clh-site #page-container .button.roombooking { display: block; padding: 0; height: 52px; line-height: 52px; }

  /* galleries two up */
  body.clh-site #page-container .gallery:not(.room) { margin: 28px 0; }
  body.clh-site #page-container .gallery:not(.room) .container { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }

  /* blog list and posts: thumbnails keep their own size above the text */
  body.clh-site #page-container .blog-image, body.clh-site #page-container .entry img.blog-image { float: none; display: block; max-width: 100%; height: auto; margin: 4px 0 14px; }
  body.clh-site #page-container .entry > a.gallery-item { display: inline-block; }
  body.clh-site #page-container .paging { text-align: left; line-height: 32px; }
  body.clh-site #page-container .paging .options { display: block; margin: 0; }
  body.clh-site #page-container .paging .result-count { margin: 0; }

  /* footer: address, map, then links and credits */
  body.clh-site #page-container .footermenu { padding: 6px 16px; }
  body.clh-site #page-container .footermenu ul { column-gap: 20px; }
  body.clh-site #page-container .footer-mid { display: flex; flex-direction: column; min-height: 0; }
  body.clh-site #page-container .footer-mid .container { display: contents; }
  body.clh-site #page-container .footer-mid .vcard { order: 1; padding: 92px 16px 4px; background-position: 16px 18px; }
  body.clh-site #page-container .footer-mid .map-wrapper { order: 2; position: relative; width: auto; height: 360px; margin-top: 24px; }
  body.clh-site #page-container .footer-mid .map-wrapper::after { display: none; }
  body.clh-site #page-container .footer-mid .map-container { height: 360px; min-height: 0; }
  body.clh-site #page-container #footer .footer-mid .container .right { order: 3; padding: 0 16px 30px; }
}

/* the smallest phones: the phone number and the three icons still share one row */
@media (max-width: 379px) {
  body.clh-site #page-container #header .tel { font-size: 17px; padding-left: 30px; letter-spacing: 0; }
  body.clh-site #page-container #header .container .right { column-gap: 8px; }
  body.clh-site #page-container #header .socialmedia { gap: 4px; }
  body.clh-site #page-container #header .logo img { width: 200px; }
}

/* ==================== forms below 1250: a label over each field, two one-line fields per row (one on phones) ==================== */
@media (max-width: 1249px) {
  body.clh-site #page-container .clh-contact-form { max-width: 760px; }
  body.clh-site #page-container .clh-contact-form form.et_pb_contact_form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; row-gap: 16px; }
  body.clh-site #page-container .clh-contact-form p.et_pb_contact_field { display: block; position: relative; }
  body.clh-site #page-container .clh-contact-form p.et_pb_contact_field_3 { grid-column: 1 / -1; }
  body.clh-site #page-container .clh-contact-form .et_pb_contact_form_label { padding: 0 0 6px; font-size: 15px; line-height: 22px; font-weight: 700; color: #333333; text-align: left; }
  body.clh-site #page-container .clh-contact-form p.et_pb_contact_field:has(> [data-required_mark="required"]) > .et_pb_contact_form_label::after { content: ""; display: inline-block; width: 16px; height: 16px; margin-left: 6px; vertical-align: -2px;
    background: url(/wp-content/uploads/ilaunch/skin/images/icon-required.png) no-repeat; }
  body.clh-site #page-container .clh-contact-form .et_pb_contact_field input.input, body.clh-site #page-container .clh-contact-form .et_pb_contact_field textarea.input {
    width: 100%; height: 48px; padding: 0 14px; box-sizing: border-box; border-color: #767676; font-size: 16px; line-height: 46px; color: #333333; }
  body.clh-site #page-container .clh-contact-form .et_pb_contact_field textarea.input { height: 150px; padding: 12px 14px; line-height: 22px; }
  body.clh-site #page-container .clh-contact-form .et_contact_bottom_container { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: flex-end; column-gap: 24px; row-gap: 16px; }
  body.clh-site #page-container .clh-contact-form .et_pb_contact_right p.clearfix { font-size: 16px; line-height: 48px; color: #333333; }
  body.clh-site #page-container .clh-contact-form .et_pb_contact_right p.clearfix::before { font-size: 15px; line-height: 22px; font-weight: 700; color: #333333; padding-bottom: 6px; }
  body.clh-site #page-container .clh-contact-form .et_pb_contact_captcha_question { font-size: 16px; line-height: 48px; color: #333333; }
  body.clh-site #page-container .clh-contact-form input.et_pb_contact_captcha { width: 72px; height: 48px; padding: 0 12px; box-sizing: border-box; border-color: #767676; font-size: 16px; line-height: 46px; color: #333333; }
  body #page-container .et_pb_section .clh-contact-form.et_pb_contact_form_container.et_pb_module .et_pb_contact_submit.et_pb_button { height: 48px; padding: 0 40px !important; font-size: 15px !important; line-height: 48px !important; }
  body #page-container .et_pb_section .clh-contact-form.et_pb_contact_form_container.et_pb_module .et_pb_contact_submit.et_pb_button:hover,
  body #page-container .et_pb_section .clh-contact-form.et_pb_contact_form_container.et_pb_module .et_pb_contact_submit.et_pb_button:focus,
  body #page-container .et_pb_section .clh-contact-form.et_pb_contact_form_container.et_pb_module .et_pb_contact_submit.et_pb_button:active { padding: 0 40px !important; }
  body.clh-site #page-container .clh-contact-form form.et_pb_contact_form::after { grid-column: 1 / -1; font-size: 14px; line-height: 22px; }
  body.clh-site #page-container .clh-contact-form h1.et_pb_contact_main_title { margin: 0 0 16px; }
  body.clh-site #page-container .clh-contact-form .et-pb-contact-message p { font-size: 16px; line-height: 24px; }
}
@media (max-width: 767px) {
  body.clh-site #page-container .clh-enquiry-form > .et_pb_row, body.clh-site #page-container .clh-review-form > .et_pb_row { padding: 0 16px; }
  body.clh-site #page-container .et_pb_section.clh-enquiry-form, body.clh-site #page-container .et_pb_section.clh-review-form { padding-bottom: 40px; }
  body.clh-site #page-container .clh-contact-form form.et_pb_contact_form { grid-template-columns: minmax(0, 1fr); }
  body #page-container .et_pb_section .clh-contact-form.et_pb_contact_form_container.et_pb_module .et_pb_contact_submit.et_pb_button { width: 100%; height: 52px; line-height: 52px !important; }
}

/* the booking calendar below 1250: live's look with AA colours, 14px text and 24px rows (white on live's #1d7fba is 4.4:1 at 11px bold,
   on #259ae0 3.1:1; #eee on the #777 day-name row 3.9:1; greyed days #888 on #ccc 2.2:1) */
@media (max-width: 1249px) {
  body.clh-site #datepicker_div .datepicker_control, body.clh-site #datepicker_div .datepicker_header, body.clh-site #datepicker_div .datepicker_header select { background: var(--clh-blue-aa); }
  body.clh-site #datepicker_div .datepicker_control a, body.clh-site #datepicker_div .datepicker_links a { color: #ffffff !important; }
  body.clh-site #datepicker_div .datepicker_control a:hover, body.clh-site #datepicker_div .datepicker_control a:focus { background: #ffffff !important; color: var(--clh-navy) !important; }
  body.clh-site #datepicker_div .datepicker_links a:hover, body.clh-site #datepicker_div .datepicker_links a:focus { background: #dddddd !important; color: #333333 !important; }
  body.clh-site #datepicker_div .datepicker_control, body.clh-site #datepicker_div .datepicker_links { font-size: 14px; }
  body.clh-site #datepicker_div .datepicker_control a, body.clh-site #datepicker_div .datepicker_links a, body.clh-site #datepicker_div .datepicker_links label { display: block; line-height: 24px; }
  body.clh-site #datepicker_div .datepicker_header { height: auto; }
  body.clh-site #datepicker_div .datepicker_header select { font-size: 15px; height: 26px; line-height: 26px; color: #ffffff; }
  body.clh-site #datepicker_div .datepicker_titleRow, body.clh-site #datepicker_div .datepicker_titleRow .datepicker_weekEndCell { background: #595959; }
  body.clh-site #datepicker_div .datepicker_titleRow a { color: #ffffff !important; }
  body.clh-site #datepicker_div .datepicker_unselectable { color: #555555; }
  body.clh-site #datepicker_div .datepicker td { line-height: 26px; }
}

/* the booking calendar (appended to <body>) at a usable size on phones */
@media (max-width: 767px) {
  body.clh-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); }
  body.clh-site #datepicker_div .datepicker_oneMonth { width: 100%; }
  body.clh-site #datepicker_div .datepicker_control a, body.clh-site #datepicker_div .datepicker_links a { display: block; padding: 0 12px !important; line-height: 42px; font-size: 15px; }
  body.clh-site #datepicker_div .datepicker_control, body.clh-site #datepicker_div .datepicker_links { padding: 0; }
  body.clh-site #datepicker_div .datepicker_header { height: auto; padding: 6px 0; }
  body.clh-site #datepicker_div .datepicker_header select { font-size: 16px; height: 36px; padding: 0 6px; }
  body.clh-site #datepicker_div td { font-size: 16px !important; height: 42px; line-height: 42px; }
  body.clh-site #datepicker_div td a { line-height: 42px; }
}

/* ==================== fix round 1 (3.18 findings V1, V3, V5, V7 to V10; 10 Oct 2026). Nothing here applies at 1250px and up. ==================== */

/* V1 /specials below 768: each deal stacks (its text, then the room photo full width at the photo's own 1140 x 800 shape) and the
   ENQUIRE button is a full-width bar whose label never breaks (at 390 the rows stayed side by side and "ENQUI" / "RE" split the label) */
@media (max-width: 767px) {
  body.clh-site #page-container .list.deals .entry { min-height: 0; margin: 0 0 36px; }
  body.clh-site #page-container .list.deals .contentleft, body.clh-site #page-container .list.deals .contentright { float: none; width: auto; height: auto; }
  body.clh-site #page-container .list.deals .deal-image { position: relative; inset: auto; width: 100%; height: auto; aspect-ratio: 1140 / 800; margin: 20px 0 0; }
  body.clh-site #page-container .list.deals a.button { display: block; width: auto; height: 52px; padding: 0 16px; line-height: 52px; text-align: center; white-space: nowrap; }
}

/* V3 posts 32, 33, 34 and 40 below 1250: live left a dead Facebook Like block and an empty paragraph (line breaks only) at the end of
   these four posts' text; below 1250 they opened a 235px blank gap before Blog Categories (107px after every other post) */
@media (max-width: 1249px) {
  body.clh-site #page-container .entry .summary > .socialwidgets, body.clh-site #page-container .entry .summary > .socialwidgets + p:last-child { display: none; }
}

/* V5 the stacked blog sidebar: live's 300px column (.container .right.sidemenu) kept every panel, the Latest Blog teasers included, at
   300px on a full-width page, and VIEW MORE sat centred in that box. Below 1170 the panels take the page width and VIEW MORE starts at
   the month list's left edge. Live's Tag Cloud has no tags (its one link is empty): below 1250 the lone heading is hidden (1250 and up
   keep it, as live) */
@media (max-width: 1169px) {
  body.clh-site #page-container .container .right.sidemenu { width: auto; }
  body.clh-site #page-container .panel li.archive-more { text-align: left; }
}
@media (max-width: 1249px) {
  body.clh-site #page-container .right.sidemenu .panel:has(> .text > a:only-child:empty) { display: none; }
}

/* V7 home: the FAQ call-out's own padding lost to the in-text link rule above (.maintext p a), so its grey band held the text 3px from
   its edges; and the three Latest Blog cards end level in the 768 to 1169 row */
@media (max-width: 1169px) {
  body.clh-site.clh-home #page-container .maintext .faqcontent p a:not(.button):not(.more) { padding-top: 22px; padding-bottom: 22px; }
}
@media (max-width: 767px) {
  body.clh-site.clh-home #page-container .maintext .faqcontent p a:not(.button):not(.more) { padding-top: 18px; padding-bottom: 18px; }
}
@media (min-width: 768px) and (max-width: 1169px) {
  body.clh-site.clh-home #page-container .panel.blog li, body.clh-site.clh-home #page-container .panel.blog li:last-child { display: flex; flex-direction: column; }
  body.clh-site.clh-home #page-container .panel.blog li .text { flex: 1 1 auto; }
}

/* V8 home below 768: the selling-points badge (an image with its words in it) sat over the photo at 45%, its lettering about 11px. It
   now sits under the photo, centred, its transparent left and top margins trimmed (34px and 20px of 556 x 358; the 38px at its foot keeps
   the booking box's butterfly clear of the banner), at 58 to 63% of its size: lettering about 14 to 15px from 320 to 390 */
@media (max-width: 767px) {
  body.clh-site.clh-home #page-container .featureoverlay { position: static; width: auto; max-width: 324px; margin: 14px auto 0; padding: 0 8px; }
  body.clh-site.clh-home #page-container .featureoverlay img { width: 107.5%; max-width: none; height: auto; margin: -3.9% 0 0 -6.6%; }
}

/* V9 bulleted lists below 1250: live's list-style-position: inside ran each wrapped line back under its bullet. Bullets now hang
   outside and wrapped lines align with the text (Recommended Tours on /attractions, the site map, the deal options on /specials).
   Fix round 2 R2-3 (11 Oct 2026): was below 768 only; the first Recommended Tours item also wraps from 768 to 1024 */
@media (max-width: 1249px) {
  body.clh-site #page-container :is(.maintext, .entry .summary, .list.deals .text) :is(ul, ol),
  body.clh-site.page-id-1244 #page-container .content-bottom + .container :is(ul, ol) { list-style-position: outside; padding-left: 22px; }
  body.clh-site #page-container :is(.maintext, .entry .summary, .list.deals .text) li,
  body.clh-site.page-id-1244 #page-container .content-bottom + .container li { list-style-position: outside; }
}

/* fix round 2 R2-2 (11 Oct 2026): the blank tail live leaves at the end of 27 posts (a run of line breaks at the end of the last paragraph,
   or an empty block after it), marked clh-trail by the single-post view in ilaunch-site.php, is hidden below 1250 so every post ends
   with the same gap before Blog Categories as the posts without one (1250 and up keep live's tail) */
@media (max-width: 1249px) {
  body.clh-site #page-container .entry .summary .clh-trail { display: none; }
}

/* V10 contact details below 1250: the phone and email values (inline-block links with a 24px tap height) sat 3 to 4px below their
   labels; the cells now share their first text baseline */
@media (max-width: 1249px) {
  body.clh-site #page-container .maintext table:not(.form) td { vertical-align: baseline; }
  /* an inline-block's baseline is its LAST line (the email wraps to two lines at 320); an inline-flex box's is its first */
  body.clh-site #page-container .maintext table:not(.form) td a { display: inline-flex; }
}
@media (max-width: 767px) {
  body.clh-site #page-container .maintext table:not(.form) tr { align-items: baseline; }
}
/* the smallest phones: a 74px label column ("Address:" is 58px) leaves the email address room for one line at 320 */
@media (max-width: 379px) {
  body.clh-site #page-container .maintext table:not(.form) tr { grid-template-columns: 74px minmax(0, 1fr); }
}