/* qr-mobile.css: the designed tablet and phone layer for Quirindi RSL Motel (Stage 4, skill Rule 2). Loads LAST. Nothing here applies at 1250px and up.
   BUILT from stage4/qr-mobile.src.css by stage4/build_mobile_css.py ("body.qr-site #page-container" is body.qr-site #page-container, "body.qr-site.qr-home #page-container" is the same on the home page): edit the source, not this file.
   Started from the sister build's (Cairns Holiday Lodge) tablet and phone layer for its every-state rules and structure, rewritten for this site's own markup:
   a header with a Best Western badge, the Quirindi logo, a phone number and RSS icon over a menu bar that floats on the hero; a home page of a half-width flat
   map beside a dark welcome panel and a street photo, a full-width sunflower photo, an offer banner with a diamond Book Online Now button, one Events teaser
   and an FAQ call-out; rooms as a photo with a thumbnail strip beside a purple text panel; galleries; a blog list with a 300px sidebar; Divi forms.
   Bands: 1250+ live (qr-live.css + qr-design.css); 1170-1249 live's layout with the menu fitted onto one row, AA colours, 14px text, 16px inputs and 24px tap
   targets; 768-1169 the tablet reflow (menu behind a MENU button); below 768 the phone design.
   AA palette, computed for this site's colours: live's sky blue #1bbaee carries white text at 2.26:1 and is 2.2:1 as text on white, so below 1250 it is dark text
   (#1a1a1a, 7.7:1) on #1bbaee at rest and white on #444444 (9.7:1, live's own hover colour) hovered, focused or tapped; link and heading blue becomes #005f7a
   (7.1:1 on white, 5.1:1 on the page's darkest beige); the active menu item #40c8f4 (2.0:1) becomes live's purple #4e2683 (10.9:1 on white); muted grey #888 becomes #5f5f5f. */

body.qr-site { --qr-purple: #4e2683; --qr-purple-d: #3a1c63; --qr-sky: #1bbaee; --qr-sky-aa: #005f7a; --qr-ink: #1a1a1a; --qr-grey: #444444; --qr-muted: #5f5f5f; }

/* ==================== 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 (qr-design.css 21); the designed bands need neither */
  body.qr-site #page-container { min-width: 0; }

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

  /* AA text colours */
  body.qr-site #page-container .panel .date, body.qr-site #page-container .panel li em { color: var(--qr-muted); }
  body.qr-site #page-container .panel .title a:hover, body.qr-site #page-container .panel .title a:focus { color: var(--qr-sky-aa); }
  body.qr-site #page-container .paging, body.qr-site #page-container .paging a:link, body.qr-site #page-container .paging a:visited { color: #595959; }
  body.qr-site #page-container .paging em, body.qr-site #page-container .paging em a:link, body.qr-site #page-container .paging em a:visited, body.qr-site #page-container .paging a:hover, body.qr-site #page-container .paging a:focus, body.qr-site #page-container .paging a:active { color: #ffffff; background-color: #6d6d6d; }
  body.qr-site #page-container blockquote .highlight { color: #555555; }
  body.qr-site.qr-home #page-container .panel.blog .title a:hover, body.qr-site.qr-home #page-container .panel.blog .title a:focus { color: var(--qr-purple); }
  body.qr-site #page-container .footerbanner p:first-of-type { color: #9a8f79; }

  /* the menu bar (1170-1249) and its drop-down: live's active and hover blue #40c8f4 is 2.0:1 on white, the drop-down's white text on it 1.95:1 */
  body.qr-site #page-container #menu li.active a:link, body.qr-site #page-container #menu li.active a:active, body.qr-site #page-container #menu li.active a:visited,
  body.qr-site #page-container #menu li:hover a:link, body.qr-site #page-container #menu li:hover a:active, body.qr-site #page-container #menu li:hover a:visited, body.qr-site #page-container #menu li:hover a:hover, body.qr-site #page-container #menu li a:focus { color: var(--qr-purple); }
  body.qr-site #page-container #menu li ul, body.qr-site #page-container #menu li:hover ul a:link, body.qr-site #page-container #menu li:hover ul a:active, body.qr-site #page-container #menu li:hover ul a:visited { background: var(--qr-purple); color: #ffffff; }
  body.qr-site #page-container #menu li li:hover a:link, body.qr-site #page-container #menu li li a:hover, body.qr-site #page-container #menu li li a:focus, body.qr-site #page-container #menu li li.active a, body.qr-site #page-container #menu li:hover li.active a { background: #ffffff; color: var(--qr-purple); }
  body.qr-site #page-container #menu li.alt a:link, body.qr-site #page-container #menu li.alt a:visited { color: var(--qr-purple); }

  /* every button in every state: dark text on live's sky blue at rest; hover, focus and the tap that sticks on a phone white on live's own hover grey */
  body.qr-site #page-container input.button, body.qr-site #page-container a.button, body.qr-site #page-container a.button:link, body.qr-site #page-container a.button:visited, body.qr-site #page-container input.button:link { color: var(--qr-ink) !important; background-color: var(--qr-sky) !important; }
  body.qr-site #page-container input.button:hover, body.qr-site #page-container input.button:focus, body.qr-site #page-container input.button:active, body.qr-site #page-container a.button:hover, body.qr-site #page-container a.button:focus, body.qr-site #page-container a.button:active { color: #ffffff !important; background-color: var(--qr-grey) !important; }
  /* the diamond Book Online Now button is a picture of live's sky blue: white on it is 2.3:1, so its lettering is dark in every state (7.7:1) */
  body.qr-site #page-container .special a.button, body.qr-site #page-container .special a.button:hover, body.qr-site #page-container .special a.button:focus, body.qr-site #page-container .special a.button:active,
  body.qr-site #page-container .bookingbannercontent a.button, body.qr-site #page-container .bookingbannercontent a.button:link, body.qr-site #page-container .bookingbannercontent a.button:visited,
  body.qr-site #page-container .bookingbannercontent a.button:hover, body.qr-site #page-container .bookingbannercontent a.button:focus, body.qr-site #page-container .bookingbannercontent a.button:active { color: var(--qr-ink) !important; background-color: transparent !important; }
  body.qr-site.qr-home #page-container .bookingbannercontent a.button, body.qr-site.qr-home #page-container .bookingbannercontent a.button:hover { background: url(/wp-content/uploads/ilaunch/skin/images/book-button-diamond.png) center center no-repeat !important; }
  body.qr-site #page-container .bookingbannercontent a.button:hover, body.qr-site #page-container .bookingbannercontent a.button:focus, body.qr-site #page-container .bookingbannercontent a.button:active { text-decoration: underline; }
  /* live's list (z-index 99999) sits over the diamond's left half, so a tap there never reached the link: the diamond goes above it below 1250 */
  body.qr-site #page-container .bookingbannercontent a.button { z-index: 100000; }

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

  /* tap targets: footer and sidebar links at least 24px tall */
  body.qr-site #page-container #footer .fmenu li a { height: auto; line-height: 24px; }
  body.qr-site #page-container .panel ul.archive a:not(.more), body.qr-site #page-container .panel .title a { display: inline-block; padding: 3px 0; }
  body.qr-site #page-container .entry .details a, body.qr-site #page-container .panel .details a { display: inline-block; padding: 2px 0; }
  body.qr-site #page-container .footer-tags a { display: inline-block; line-height: 24px; }
  body.qr-site #page-container #footer li a.email { display: inline-block; line-height: 24px; }
  body.qr-site #page-container .paging a:link, body.qr-site #page-container .paging a:visited, body.qr-site #page-container .paging em { display: inline-block; min-width: 24px; line-height: 24px; text-align: center; }
  body.qr-site #page-container div.top a { line-height: 24px; }
  body.qr-site #page-container div.top a.scrollto:hover, body.qr-site #page-container div.top a.scrollto:focus, body.qr-site #page-container div.top a.scrollto:active { color: #ffffff; background: #6d6d6d; }
  body.qr-site #page-container .maintext td a { display: inline-block; padding: 3px 0; }
  /* not the blog lead image: it floats left inside its link, and an inline-block link would hold it (the text then wrapped under it) */
  body.qr-site #page-container .maintext a:has(> img), body.qr-site #page-container .entry .summary a:has(> img):not(:has(> img.blog-image)) { display: inline-block; }
  body.qr-site #page-container .maintext a, body.qr-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 */
  body.qr-site #page-container .entry .summary p a:not(.button):not(.more), body.qr-site #page-container .maintext p a:not(.button):not(.more) { padding-top: 3px; padding-bottom: 3px; }
  /* site map: links stay inline so a wrapped item keeps its bullet on its first line; the vertical padding gives the tap area */
  body.qr-site #page-container .container > ul li a { display: inline; padding: 7px 0; }
  body.qr-site #page-container .container > ul li { line-height: 22px; padding: 6px 0; }
  body.qr-site #page-container .container > ul li > :is(ul, ol) { margin-top: 6px; }
  /* headings under 24px and their links: AA blue */
  body.qr-site #page-container h3 a:link, body.qr-site #page-container h3 a:visited { color: var(--qr-grey); }
  body.qr-site.qr-home #page-container .panel.blog .date { color: var(--qr-muted); }
  body.qr-site #page-container .panel .text a { font-size: 14px !important; display: inline-block; padding: 3px 4px; line-height: 18px; }
  body.qr-site #page-container sup, body.qr-site #page-container sub { font-size: 14px; }
  body.qr-site #page-container div.top a { display: inline-block; }
  body.qr-site #page-container .map-wrapper a { display: block; }
  body.qr-site #page-container .gallery.room a.gallery-item { display: inline-block; }
  body.qr-site #page-container .maintext p > a:only-child { display: inline-block; padding: 3px 0; }
  body.qr-site #page-container .map-wrapper img { display: block; }
}

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

/* the flat map is a link the size of its own picture: its ring is drawn inside the picture's edge so nothing clips it */
@media (max-width: 1249px) {
  body.qr-site #page-container .map-wrapper a { position: relative; }
  body.qr-site #page-container .map-wrapper a:focus-visible { outline: 3px solid var(--qr-purple) !important; outline-offset: -3px !important; box-shadow: none !important; }
  body.qr-site #page-container .map-wrapper a:focus-visible::after { content: ""; position: absolute; inset: 6px; border: 3px solid #ffffff; box-shadow: inset 0 0 0 3px var(--qr-purple), 0 0 0 3px var(--qr-purple); pointer-events: none; }
}

/* 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
   qr-sitewide.php), keyboard focus inside opens it too */
@media (min-width: 1170px) {
  body.qr-site #page-container #menu > ul > li:focus-within > ul, body.qr-site #page-container #menu > ul > li.ils-open > ul { display: block; }
  html.ils-touch body.qr-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.qr-site #page-container #menu > ul > li:focus-within li:not(.active) > a:link, body.qr-site #page-container #menu > ul > li:focus-within li:not(.active) > a:visited,
  body.qr-site #page-container #menu > ul > li.ils-open li:not(.active) > a:link, body.qr-site #page-container #menu > ul > li.ils-open li:not(.active) > a:visited { color: #ffffff; }
  body.qr-site #page-container #menu > ul > li:focus-within li:not(.active) > a:link:focus, body.qr-site #page-container #menu > ul > li.ils-open li:not(.active) > a:link:focus,
  body.qr-site #page-container #menu > ul > li:focus-within li:not(.active) > a:link:hover, body.qr-site #page-container #menu > ul > li.ils-open li:not(.active) > a:link:hover,
  body.qr-site #page-container #menu > ul > li:focus-within li:not(.active) > a:visited:focus, body.qr-site #page-container #menu > ul > li.ils-open li:not(.active) > a:visited:focus { color: var(--qr-purple); background: #ffffff; }
}

/* ==================== 1170 to 1249: live's header with the menu fitted onto one row ==================== */
@media (min-width: 1170px) and (max-width: 1249px) {
  /* live's .right is W-527px wide (643 to 722px here) and its menu wants 870px, so it wrapped and "Contact Us / Book Now" hung below the white band. Fitted:
     18px type, 6px gaps and no dead 115px on the right (the Book Now link ends where the phone number ends) */
  body.qr-site #page-container #menu { font-size: 18px; padding-right: 16px; }
  body.qr-site #page-container #menu li { margin: 0 6px; }
  body.qr-site #page-container #menu li:first-child { margin-left: 0; }
  body.qr-site #page-container #header .tel { margin-right: 16px; }
  /* the drop-down hangs from the right edge of Contact Us (live's left-aligned 240px list ran 70px past the screen) */
  body.qr-site #page-container #menu li ul { left: auto; right: 0; }
}

/* ==================== below 1170: tablet and phone share the reflow ==================== */
@media (max-width: 1169px) {
  /* header: in the flow (live floats it over the hero); badge and logo on the first row, the phone number, RSS icon and MENU button on the second, the menu panel below */
  body.qr-site #page-container #header { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "bw logo logo" "top top btn" "menu menu menu"; align-items: center; height: auto; min-height: 0; padding: 0; }
  body.qr-site #page-container #header > a#top { display: none; }
  body.qr-site #page-container #header .logo-bw { grid-area: bw; float: none; width: 150px; height: 84px; background-size: auto 100%; background-position: center; }
  body.qr-site #page-container #header .logo { grid-area: logo; float: none; padding: 10px 16px 10px 20px; }
  body.qr-site #page-container #header .logo img { width: 230px; max-width: 100%; height: auto; }
  body.qr-site #page-container #header .right { display: contents; }
  body.qr-site #page-container #header .right > .clearboth, body.qr-site #page-container #header > .clearboth { display: none; }
  body.qr-site #page-container #header .right div.top { grid-area: top; float: none; clear: none; display: flex; flex-flow: row-reverse; justify-content: flex-end; align-items: center; column-gap: 18px; margin: 0; padding: 10px 24px 10px 24px; }
  body.qr-site #page-container #header .tel { float: none; margin: 0; }
  body.qr-site #page-container #header .socialmedia { float: none; margin: 0; }
  body.qr-site #page-container #header .socialmedia a { margin: 0; }
  body.qr-site #page-container .ils-menu-toggle { grid-area: btn; display: inline-flex; align-items: center; gap: 10px; height: 48px; margin: 0 24px 0 0; padding: 0 18px; border: 0; border-radius: 0; background: var(--qr-purple); color: #ffffff;
    font: 700 16px/48px 'HerosCnBold', Arial, Helvetica, sans-serif; letter-spacing: 1.5px; text-transform: uppercase; cursor: pointer; }
  body.qr-site #page-container .ils-menu-toggle:hover, body.qr-site #page-container .ils-menu-toggle:focus, body.qr-site #page-container .ils-menu-toggle:active { background: var(--qr-grey); color: #ffffff; }
  body.qr-site #page-container .ils-menu-toggle span, body.qr-site #page-container .ils-menu-toggle span::before, body.qr-site #page-container .ils-menu-toggle span::after { display: block; position: relative; width: 20px; height: 2px; background: currentColor; content: ""; }
  body.qr-site #page-container .ils-menu-toggle span::before { position: absolute; top: -6px; }
  body.qr-site #page-container .ils-menu-toggle span::after { position: absolute; top: 6px; }
  body.qr-site #page-container #header.ils-menu-open .ils-menu-toggle span { background: transparent; }
  body.qr-site #page-container #header.ils-menu-open .ils-menu-toggle span::before { top: 0; transform: rotate(45deg); background: currentColor; }
  body.qr-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, every page listed (the drop-down's pages indented) */
  body.qr-site #page-container #menu { grid-area: menu; display: block; position: static; float: none; width: auto; margin: 0; padding: 0; line-height: normal; text-align: left; background: #ffffff; font-size: 17px; z-index: auto; border-top: 1px solid #d7d7d7; }
  /* closed: only the Book Now row shows (live's nav Book Now opens the booking page in a new tab, so a guest on a phone reaches it without opening the menu); open: every page */
  body.qr-site #page-container #header:not(.ils-menu-open) #menu > ul > li:not(.alt) { display: none; }
  body.qr-site #page-container #header:not(.ils-menu-open) #menu { border-top: 0; }
  body.qr-site #page-container #menu ul { display: block; width: auto; }
  body.qr-site #page-container #menu li, body.qr-site #page-container #menu li.alt, body.qr-site #page-container #menu li:first-child { display: block; float: none; margin: 0; border-top: 1px solid #e1e1e1; }
  body.qr-site #page-container #menu li:first-child { border-top: 0; }
  body.qr-site #page-container #menu a:link, body.qr-site #page-container #menu a:visited, body.qr-site #page-container #menu a:active { display: block; padding: 0 24px; line-height: 50px; font-size: 18px; color: #333333; background: none; }
  body.qr-site #page-container #menu li ul { position: static; display: block; width: auto; padding: 0; background: #f4f4f4; }
  body.qr-site #page-container #menu li li { border-top: 1px solid #e1e1e1; }
  body.qr-site #page-container #menu li ul a:link, body.qr-site #page-container #menu li ul a:visited, body.qr-site #page-container #menu li ul a:active,
  body.qr-site #page-container #menu li:hover ul a:link, body.qr-site #page-container #menu li:hover ul a:visited, body.qr-site #page-container #menu li:hover ul a:active { padding: 0 24px 0 44px; line-height: 46px; font-size: 17px; color: #333333; background: #f4f4f4; }
  body.qr-site #page-container #menu li:hover > a:link, body.qr-site #page-container #menu li:hover > a:visited { padding-top: 0; color: #333333; background: none; }
  body.qr-site #page-container #menu li a:hover, body.qr-site #page-container #menu li a:focus, body.qr-site #page-container #menu li li a:hover, body.qr-site #page-container #menu li li a:focus, body.qr-site #page-container #menu li.active > a:link, body.qr-site #page-container #menu li.active > a:visited, body.qr-site #page-container #menu li li.active a, body.qr-site #page-container #menu li:hover li.active a { color: #ffffff; background: var(--qr-purple); }
  body.qr-site #page-container #menu li.alt a:link, body.qr-site #page-container #menu li.alt a:visited { text-align: center; font-weight: 700; color: var(--qr-ink); background: var(--qr-sky); }
  body.qr-site #page-container #menu li.alt a:hover, body.qr-site #page-container #menu li.alt a:focus, body.qr-site #page-container #menu li.alt a:active { color: #ffffff; background: var(--qr-grey); }
  body.qr-site #page-container #menu li.active li:not(.active) > a:link, body.qr-site #page-container #menu li.active li:not(.active) > a:visited { color: #333333; background: #f4f4f4; }
  body.qr-site #page-container #menu li.active li:not(.active) > a:hover, body.qr-site #page-container #menu li.active li:not(.active) > a:focus, body.qr-site #page-container #menu li.active li:not(.active) > a:active { color: #ffffff; background: var(--qr-purple); }
  body.qr-site #page-container #menu a.top.parent b { font-weight: 400; }

  /* hero: the photo keeps a fixed height */
  body.qr-site #page-container #feature, body.qr-site.qr-home #page-container #feature { height: auto; }
  body.qr-site #page-container .featuremain, body.qr-site #page-container .featureimage { height: 300px; }
  body.qr-site.qr-home #page-container .featuremain { height: 360px; }

  /* containers: fluid with a 24px gutter */
  body.qr-site #page-container .container { width: auto; padding-left: 24px; padding-right: 24px; }

  /* home: welcome text beside the flat map, street photo under the text, one column below 768 */
  body.qr-site.qr-home #page-container .content { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); text-align: left; }
  body.qr-site.qr-home #page-container .content > .right { display: contents; }
  body.qr-site.qr-home #page-container .content > .clearboth, body.qr-site.qr-home #page-container .content .right > .clearboth { display: none; }
  body.qr-site.qr-home #page-container .content > .left { position: static; display: flex; width: auto; grid-column: 1; grid-row: 1 / span 2; min-height: 0; }
  body.qr-site.qr-home #page-container .content .left .map-wrapper { float: none; position: relative; flex: 1 1 auto; width: 100%; height: auto; min-height: 360px; }
  body.qr-site.qr-home #page-container .content .left .map-wrapper a { display: block; position: absolute; inset: 0; font-size: 0; line-height: 0; }
  body.qr-site.qr-home #page-container .content .left .map-wrapper img { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 44% 50%; }
  body.qr-site.qr-home #page-container .content .right .maintext { grid-column: 2; grid-row: 1; width: auto; padding: 40px 32px; }
  body.qr-site.qr-home #page-container .content .right .maintext h1 { font-size: 32px; line-height: 36px; padding-bottom: 16px; margin-bottom: 8px; }
  body.qr-site.qr-home #page-container .content .right .contentphoto { grid-column: 2; grid-row: 2; height: 240px; }
  body.qr-site.qr-home #page-container .content .right .maintext .socialwidgets { display: none; }
  body.qr-site #page-container .special { height: 340px; }
  body.qr-site #page-container .special .special-image { background-size: cover; background-position: center; }

  /* offer banner, Events teaser and FAQ call-out */
  body.qr-site.qr-home #page-container .bottom-banners { padding: 40px 0; }
  body.qr-site.qr-home #page-container .bottom-banners .container { display: flex; flex-direction: column; align-items: center; row-gap: 36px; }
  body.qr-site.qr-home #page-container .bookingbanner { float: none; width: 100%; max-width: 712px; height: auto; padding-top: 50.84%; background-size: 100% auto; background-position: top center; background-repeat: no-repeat; }
  body.qr-site.qr-home #page-container .bottom-banners .bookingbannercontent { position: relative; left: auto; bottom: auto; top: auto; width: auto; height: auto; padding: 18px 24px 22px; background: var(--qr-purple); }
  body.qr-site.qr-home #page-container .bottom-banners .bookingbannercontent::before { display: none; }
  body.qr-site.qr-home #page-container .bookingbannercontent ul { display: block; float: none; margin: 0; }
  body.qr-site.qr-home #page-container .bookingbannercontent li { float: none; display: block; margin: 0; padding: 0 0 0 16px; line-height: 30px; font-size: 20px; }
  body.qr-site.qr-home #page-container .bookingbannercontent p { margin: 0; background: none; }
  body.qr-site.qr-home #page-container .bookingbannercontent a.button { position: absolute; right: 28px; top: 50%; margin-top: -75px; width: 60px; height: 66px; }
  body.qr-site.qr-home #page-container .bottom-banners .container > .clearboth { display: none; }
  body.qr-site.qr-home #page-container .bottom-banners .right { float: none; width: 100%; max-width: 712px; height: auto; }
  body.qr-site.qr-home #page-container .blog-wrapper { float: none; width: auto; }
  body.qr-site.qr-home #page-container .panel.blog { padding: 0; }
  body.qr-site.qr-home #page-container .panel.blog h3 { margin: 0 0 12px; padding: 0; font-size: 30px; line-height: 34px; letter-spacing: 1px; }
  body.qr-site.qr-home #page-container .panel.blog ul { margin: 0; }
  body.qr-site.qr-home #page-container .panel.blog li, body.qr-site.qr-home #page-container .panel.blog li:last-child { float: none; display: grid; grid-template-columns: 230px minmax(0, 1fr); width: auto; height: auto; min-height: 190px; padding: 0 0 18px; }
  body.qr-site.qr-home #page-container .panel.blog .blog-image { grid-column: 1; grid-row: 1 / span 4; width: 100%; height: auto; min-height: 190px; margin: 0; background-size: cover; }
  body.qr-site.qr-home #page-container .panel.blog .title, body.qr-site.qr-home #page-container .panel.blog .date, body.qr-site.qr-home #page-container .panel.blog .summary, body.qr-site.qr-home #page-container .panel.blog .more { grid-column: 2; }
  body.qr-site.qr-home #page-container .panel.blog .more { margin: 0 20px 4px; }
  body.qr-site.qr-home #page-container .faq { position: static; float: none; width: auto; height: auto; }
  body.qr-site.qr-home #page-container .faq a { display: block; margin: 0; padding: 18px 56px 18px 24px; background-position: right 22px center; }
  body.qr-site.qr-home #page-container .faq p { margin: 0; }

  /* inner pages */
  body.qr-site #page-container .container.main { padding: 36px 24px 8px; }
  body.qr-site #page-container .container > .left, body.qr-site #page-container .container > .right, body.qr-site #page-container .container > .right.sidemenu { float: none; width: auto; }
  body.qr-site #page-container .container .right.sidemenu { margin-top: 10px; }
  body.qr-site #page-container .panel { margin: 40px 0; }
  body.qr-site #page-container .maintext img, body.qr-site #page-container .entry img, body.qr-site #page-container .maintext iframe { max-width: 100%; height: auto; }
  body.qr-site #page-container .maintext table { max-width: 100%; }
  body.qr-site #page-container .content.bottom { margin: 40px 0; }
  body.qr-site #page-container .map-wrapper img { height: 360px !important; }
  body.qr-site #page-container .content-bottom + .container .right.sidemenu .panel:has(> .text > a:only-child:empty) { display: none; }
  /* FAQ: the category index goes above the questions */
  body.qr-site.page-id-1177 #page-container .content-bottom + .container { display: flex; flex-direction: column; }
  body.qr-site.page-id-1177 #page-container .content-bottom + .container > .right { order: -1; margin: 0 0 10px; }
  body.qr-site.page-id-1177 #page-container .content-bottom + .container > .right ~ .right { display: none; }
  body.qr-site.page-id-1177 #page-container .content-bottom + .container > .right .panel { margin: 30px 0 0; }
  /* the contact details: label and value pairs */
  body.qr-site #page-container .maintext table:not(.form), body.qr-site #page-container .maintext table:not(.form) > tbody { display: block; }
  body.qr-site #page-container .maintext table:not(.form) tr { display: grid; grid-template-columns: 82px minmax(0, 1fr); align-items: baseline; }
  body.qr-site #page-container .maintext table:not(.form) td { display: block; width: auto; vertical-align: baseline; }
  body.qr-site #page-container .maintext table:not(.form) td[colspan] { grid-column: 2; }
  body.qr-site #page-container .maintext table:not(.form) td a { display: inline-flex; }

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

  /* rooms: photo, thumbnails, then the purple text panel */
  body.qr-site #page-container .list.rooms .entry { height: auto; margin-bottom: 36px; padding: 0 0 28px; }
  body.qr-site #page-container .list.rooms .entry .main-photo { float: none; margin: 0; width: auto; height: auto; aspect-ratio: auto; padding-top: calc(63.7755% - 7.653px); border-width: 6px; background-size: 100% auto !important; background-position: top center !important; box-sizing: content-box; }
  body.qr-site #page-container .list.rooms .entry .images { position: static; float: none; width: auto; height: auto; padding: 10px 0 8px; text-align: left; background: var(--qr-purple-d); margin: 0 -6px; padding-left: 6px; padding-right: 6px; }
  body.qr-site #page-container .list.rooms .entry .images .gallery.room { position: static; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; text-align: left; }
  body.qr-site #page-container .list.rooms .entry .images .gallery.room a { flex: 0 0 auto; display: block; }
  body.qr-site #page-container .list.rooms .entry .images .gallery.room img { float: none; margin: 0; }
  body.qr-site #page-container .list.rooms .entry h2, body.qr-site #page-container .list.rooms .entry p { padding-left: 24px; padding-right: 24px; }
  body.qr-site #page-container .list.rooms .entry h2 { padding-top: 22px; font-size: 32px; line-height: 36px; margin: 0 0 12px; }
  body.qr-site #page-container .list.rooms .entry p { margin: 0 0 14px; }
  body.qr-site #page-container .button.roombooking { margin-top: 8px; }
  body.qr-site #page-container .list.rooms .entry p:has(> .button.roombooking) { margin: 8px 0 0; }

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

  /* blog list and posts */
  body.qr-site #page-container .entry.blog .blog-image, body.qr-site #page-container .entry img.blog-image { max-width: 100%; height: auto; }
  body.qr-site #page-container .entry .about-block h2.event-date-details { font-size: 26px; line-height: 30px; }

  /* footer: banner and address side by side; links and credits under */
  body.qr-site #page-container #footer { padding: 30px 0 0; }
  body.qr-site #page-container #footer .container { width: auto; height: auto; padding: 0 24px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 32px; align-items: start; }
  body.qr-site #page-container #footer .container > .clearboth, body.qr-site #page-container #footer .container > .footermenu { display: none; }
  body.qr-site #page-container .footerbanner { float: none; width: auto; }
  body.qr-site #page-container .footerbanner p:first-of-type { font-size: 36px; line-height: 40px; margin-bottom: 12px; }
  body.qr-site #page-container #footer .container .right { float: none; width: auto; margin: 0; text-align: left; }
  body.qr-site #page-container .vcard { float: none; }
  body.qr-site #page-container #footer .bottom { position: static; margin-top: 26px; padding: 14px 24px 22px; }
  body.qr-site #page-container #footer .bottom .container { display: block; padding: 0; }
  body.qr-site #page-container #footer .bottom .container > .clearboth { display: none; }
  body.qr-site #page-container #footer .fmenu { float: none; display: block; padding: 6px 0; }
  body.qr-site #page-container .copyright { float: none; display: block; text-align: left; padding: 8px 0 0; }
}

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

  /* header: badge and logo, then the phone number, RSS icon and MENU button */
  body.qr-site #page-container #header .logo-bw { width: 112px; height: 63px; }
  body.qr-site #page-container #header .logo { padding: 8px 12px 8px 14px; }
  body.qr-site #page-container #header .logo img { width: 190px; }
  body.qr-site #page-container #header .right div.top { padding: 8px 12px 8px 16px; column-gap: 14px; }
  body.qr-site #page-container #header .tel { font-size: 21px; padding-left: 32px; background-size: 21px auto; }
  body.qr-site #page-container .ils-menu-toggle { margin-right: 16px; height: 44px; line-height: 44px; padding: 0 14px; }
  body.qr-site #page-container #menu a:link, body.qr-site #page-container #menu a:visited, body.qr-site #page-container #menu a:active { padding-left: 16px; padding-right: 16px; }
  body.qr-site #page-container #menu li ul a:link, body.qr-site #page-container #menu li ul a:visited, body.qr-site #page-container #menu li ul a:active, body.qr-site #page-container #menu li:hover ul a:link, body.qr-site #page-container #menu li:hover ul a:visited { padding-left: 36px; }

  /* hero */
  body.qr-site #page-container .featuremain, body.qr-site #page-container .featureimage { height: 190px; }
  body.qr-site.qr-home #page-container .featuremain { height: 240px; }

  /* type */
  body.qr-site #page-container h1 { font-size: 28px; line-height: 33px; padding-bottom: 18px; }
  body.qr-site #page-container h2 { font-size: 24px; line-height: 29px; }
  body.qr-site #page-container .content p { margin: 14px 0; }
  body.qr-site #page-container [style*="justify"] { text-align: left !important; }

  /* home: one column */
  body.qr-site.qr-home #page-container .content { display: flex; flex-direction: column; }
  body.qr-site.qr-home #page-container .content .right .maintext { padding: 28px 16px 30px; order: 1; }
  body.qr-site.qr-home #page-container .content .right .contentphoto { height: 200px; order: 2; }
  body.qr-site.qr-home #page-container .content > .left { order: 3; }
  body.qr-site.qr-home #page-container .content .left .map-wrapper { flex: none; height: 260px; min-height: 0; }
  body.qr-site #page-container .special { height: 200px; }
  body.qr-site.qr-home #page-container .bottom-banners { padding: 28px 0; }
  body.qr-site.qr-home #page-container .bookingbannercontent li { font-size: 18px; line-height: 28px; }
  body.qr-site.qr-home #page-container .bottom-banners .bookingbannercontent { padding: 16px 16px 20px; }
  body.qr-site.qr-home #page-container .bookingbannercontent a.button { position: relative; right: auto; top: auto; margin: 10px auto 0; }
  body.qr-site.qr-home #page-container .panel.blog li, body.qr-site.qr-home #page-container .panel.blog li:last-child { display: block; padding: 0 0 16px; }
  body.qr-site.qr-home #page-container .panel.blog .blog-image { height: 190px; min-height: 0; }
  body.qr-site.qr-home #page-container .panel.blog .title, body.qr-site.qr-home #page-container .panel.blog .date, body.qr-site.qr-home #page-container .panel.blog .summary { grid-column: auto; }
  body.qr-site.qr-home #page-container .panel.blog .more { margin: 0 20px 4px; }
  body.qr-site.qr-home #page-container .faq a { padding: 16px 52px 16px 16px; background-position: right 16px center; }

  /* inner pages */
  body.qr-site #page-container .container.main { padding: 26px 16px 4px; }
  body.qr-site #page-container .panel { margin: 32px 0; }
  body.qr-site #page-container .panel h3 { font-size: 24px; line-height: 28px; }
  body.qr-site #page-container blockquote { padding: 6px 0 14px 52px; background-size: 40px auto; }
  body.qr-site #page-container .maintext p > a:only-child { display: inline-block; padding: 3px 0; }
  body.qr-site #page-container .map-wrapper img { height: 260px !important; }
  body.qr-site #page-container .content.bottom { margin: 30px 0; }
  body.qr-site #page-container .maintext table:not(.form) td a { display: inline-flex; }
  body.qr-site #page-container .form.searchpage input.button { padding: 0 18px; }

  /* rooms */
  body.qr-site #page-container .list.rooms .entry .images .gallery.room { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: 6px; }
  body.qr-site #page-container .list.rooms .entry .images .gallery.room a { scroll-snap-align: start; }
  body.qr-site #page-container .list.rooms .entry h2, body.qr-site #page-container .list.rooms .entry p { padding-left: 16px; padding-right: 16px; }
  body.qr-site #page-container .list.rooms .entry h2 { font-size: 27px; line-height: 31px; padding-top: 18px; }
  body.qr-site #page-container .list.rooms .entry p:has(> .button.roombooking) { padding-left: 16px; padding-right: 16px; }
  body.qr-site #page-container .button.roombooking { display: block; padding: 0; height: 52px; line-height: 52px; }

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

  /* blog list and posts: thumbnails above the text */
  body.qr-site #page-container .entry.blog .blog-image, body.qr-site #page-container .entry img.blog-image { float: none; display: block; margin: 4px 0 14px; }
  body.qr-site #page-container .paging { text-align: left; line-height: 32px; }
  body.qr-site #page-container .paging .options { display: block; margin: 0; }
  body.qr-site #page-container .paging .result-count { margin: 0; }
  body.qr-site #page-container .entry .about-block h2.event-date-details { font-size: 23px; line-height: 28px; }

  /* footer: one column */
  body.qr-site #page-container #footer .container { display: block; padding: 0 16px; }
  body.qr-site #page-container .footerbanner p:first-of-type { font-size: 30px; line-height: 34px; }
  body.qr-site #page-container #footer .container .right { margin-top: 16px; }
  body.qr-site #page-container #footer .bottom { padding: 14px 16px 22px; }
}

/* the smallest phones: the badge, logo, phone number, icon and MENU button still share two tidy rows */
@media (max-width: 379px) {
  body.qr-site #page-container #header .logo-bw { width: 96px; height: 54px; }
  body.qr-site #page-container #header .logo img { width: 168px; }
  body.qr-site #page-container #header .right div.top { column-gap: 8px; padding-left: 12px; }
  body.qr-site #page-container #header .tel { font-size: 19px; padding-left: 28px; background-size: 19px auto; }
  body.qr-site #page-container .ils-menu-toggle { padding: 0 10px; margin-right: 12px; }
  body.qr-site.qr-home #page-container .bookingbannercontent li { font-size: 16px; }
}

/* ==================== forms below 1250: a label over each field, two one-line fields per row (one on phones) ==================== */
@media (max-width: 1249px) {
  body.qr-site #page-container .qr-contact-form { max-width: 760px; }
  body.qr-site #page-container .qr-contact-form form.et_pb_contact_form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; row-gap: 16px; }
  body.qr-site #page-container .qr-contact-form p.et_pb_contact_field { display: block; position: relative; width: auto; float: none; margin: 0; padding: 0; }
  body.qr-site #page-container .qr-contact-form p.et_pb_contact_field_3 { grid-column: 1 / -1; }
  body.qr-site #page-container .qr-unsub-form form.et_pb_contact_form { grid-template-columns: minmax(0, 1fr); }
  body.qr-site #page-container .qr-unsub-form p.et_pb_contact_field_0 { grid-column: 1 / -1; }
  body.qr-site #page-container .qr-contact-form .et_pb_contact_form_label { display: block; padding: 0 0 6px; font-size: 15px; line-height: 22px; font-weight: 700; color: #333333; text-align: left; }
  body.qr-site #page-container .qr-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.qr-site #page-container .qr-contact-form .et_pb_contact_field input.input, body.qr-site #page-container .qr-contact-form .et_pb_contact_field textarea.input {
    display: block; width: 100%; height: 48px; margin: 0; padding: 0 14px; box-sizing: border-box; border: 1px solid #767676; border-radius: 0; background: #ffffff; font-size: 16px; line-height: 46px; color: #333333; }
  body.qr-site #page-container .qr-contact-form .et_pb_contact_field textarea.input { height: 150px; padding: 12px 14px; line-height: 22px; }
  body.qr-site #page-container .qr-contact-form .et_pb_contact_field .input::placeholder { color: transparent; }
  body.qr-site #page-container .qr-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; float: none; margin: 0; }
  body.qr-site #page-container .qr-contact-form .et_pb_contact_right { float: none; width: auto; text-align: left; }
  body.qr-site #page-container .qr-contact-form .et_pb_contact_right p.clearfix { position: relative; float: none; margin: 0; padding: 0; font-size: 16px; line-height: 48px; color: #333333; }
  body.qr-site #page-container .qr-contact-form .et_pb_contact_right p.clearfix::before { content: "Verification"; display: block; visibility: visible; height: auto; font-size: 15px; line-height: 22px; font-weight: 700; color: #333333; padding-bottom: 6px; }
  body.qr-site #page-container .qr-contact-form .et_pb_contact_captcha_question { font-size: 16px; line-height: 48px; color: #333333; }
  body.qr-site #page-container .qr-contact-form input.et_pb_contact_captcha { width: 72px; height: 48px; margin: 0 0 0 10px; padding: 0 12px; box-sizing: border-box; border: 1px solid #767676; border-radius: 0; background: #ffffff; font-size: 16px; line-height: 46px; color: #333333; vertical-align: top; }
  body #page-container .et_pb_section .qr-contact-form.et_pb_contact_form_container.et_pb_module .et_pb_contact_submit.et_pb_button {
    display: block; height: 48px; margin: 0 !important; padding: 0 40px !important; border: 0 !important; border-radius: 0 !important; background: var(--qr-sky) !important; color: var(--qr-ink) !important;
    font: 700 17px/48px 'HerosCnBold', Arial, Helvetica, sans-serif !important; letter-spacing: 1px !important; text-transform: uppercase; cursor: pointer; }
  body #page-container .et_pb_section .qr-contact-form.et_pb_contact_form_container.et_pb_module .et_pb_contact_submit.et_pb_button:hover,
  body #page-container .et_pb_section .qr-contact-form.et_pb_contact_form_container.et_pb_module .et_pb_contact_submit.et_pb_button:focus,
  body #page-container .et_pb_section .qr-contact-form.et_pb_contact_form_container.et_pb_module .et_pb_contact_submit.et_pb_button:active { background: var(--qr-grey) !important; color: #ffffff !important; padding: 0 40px !important; }
  body #page-container .et_pb_section .qr-contact-form.et_pb_contact_form_container.et_pb_module .et_pb_contact_submit.et_pb_button::after { display: none !important; }
  body.qr-site #page-container .qr-contact-form form.et_pb_contact_form::after { content: "Required fields"; display: block; visibility: visible; height: auto; clear: none; grid-column: 1 / -1; padding-right: 20px; justify-self: start; font-size: 14px; line-height: 22px; color: #555555;
    background: url(/wp-content/uploads/ilaunch/skin/images/icon-required.png) no-repeat right center; }
  body.qr-site #page-container .qr-unsub-form form.et_pb_contact_form::after { content: none; display: none; }
  body.qr-site #page-container .qr-contact-form .et-pb-contact-message, body.qr-site #page-container .qr-contact-form .et-pb-contact-message p { font-size: 16px; line-height: 24px; color: #333333; }
}
@media (max-width: 767px) {
  body.qr-site #page-container .qr-contact-form form.et_pb_contact_form { grid-template-columns: minmax(0, 1fr); }
  body #page-container .et_pb_section .qr-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; }
  body.qr-site #page-container .qr-contact-form .et_contact_bottom_container { display: block; }
  body.qr-site #page-container .qr-contact-form .et_pb_contact_right { margin-bottom: 16px; }
}

/* ==================== lightbox and calendar widgets appended to <body> are compared in qr-design.css; nothing to add here ==================== */

/* 3.18 N4 (tablet, 768 to 1169): the street photo runs full width under the map and the welcome text, so the map column has no empty cream block under it
   (the old layout held the map in a column spanning the text and the photo, and the 360px map left 335px of bare paper). The map image fills its row (the 360px image rule above stays for the phone and the contact page). */
@media (min-width: 768px) and (max-width: 1169px) {
  body.qr-site.qr-home #page-container .content > .left { grid-row: 1; }
  body.qr-site.qr-home #page-container .content .right .contentphoto { grid-column: 1 / -1; grid-row: 2; height: 240px; }
  body.qr-site.qr-home #page-container .content .left .map-wrapper img { height: 100% !important; }
}