/* El Lago Waters Motel (#19): the DESIGNED tablet and phone layer (Stage 4, 8 Oct 2026, Bryan's side, dev site). Loaded LAST.
   Nothing here applies at 1250px and up (live's exact look, el-design.css). Bands (skill Rule 2):
     1170-1249  live's fixed layout (it fits from 1170), with the AA layer below;
     768-1169   a reflow: fluid columns, the menu behind a MENU button, Book Now always in view under the header;
     below 768  the phone design.
   Below 1250 every state (rest, hover, focus, active) is WCAG AA, text is 14px or more, inputs 16px, tap targets 24px or more.
   Started from the kit's ilaunch-responsive.template.css (expanded copy: build/stage4/el-mobile.expanded.css): the starter pack's
   render_mobile_css.py refused this site (exit 3, no booking bar, build/stage4/render_mobile_css-attempt.txt) and the template's
   Family A selectors (#content, #booking, #topcontainer) do not exist in this family B shell, so the rules are rewritten for
   live's .content / .content-wrapper / .wrapper markup; the template's AA approach (dark text on the yellow at rest, white on the
   dark brand colour in every active state, 14px floor, list-link tap padding, justified text left-aligned) is kept.
   AA palette (ratios measured): buttons #222222 on live's #ebbb00 (8.8:1), hover/focus/active white on live's #006189 (6.8:1);
   links and Read More #006189 (6.8:1), their hover #a14700 (6.2:1, live's orange darkened); muted text #666666 (5.7:1 on white,
   5.3:1 on #f5f5f5); menu panel white on #006189, item hover/focus #004a69 (9.6:1); active menu items carry a 4px yellow bar
   (a shape, not colour alone). */
body.el-site { --el-yellow: #ebbb00; --el-blue: #006189; --el-blue-dark: #004a69; --el-ink: #222222; --el-muted: #666666; --el-link-hover: #a14700; }

/* ======================= every width below 1250: the AA layer (type floor, inputs, taps, colours, states) ======================= */
@media (max-width: 1249px) {
  /* buttons: dark text on the yellow at rest; white on the brand blue when hovered, focused or tapped (the tap state sticks on phones) */
  body.el-site #page-container a.button:link, body.el-site #page-container a.button:visited, body.el-site #page-container input.button,
  body #page-container .et_pb_section .el-contact-form.et_pb_contact_form_container.et_pb_module .et_pb_button.et_pb_contact_submit {
    color: var(--el-ink) !important; background-color: var(--el-yellow) !important; }
  body.el-site #page-container a.button:hover, body.el-site #page-container a.button:focus, body.el-site #page-container a.button:active,
  body.el-site #page-container input.button:hover, body.el-site #page-container input.button:focus, body.el-site #page-container input.button:active,
  body #page-container .et_pb_section .el-contact-form.et_pb_contact_form_container.et_pb_module .et_pb_button.et_pb_contact_submit:hover,
  body #page-container .et_pb_section .el-contact-form.et_pb_contact_form_container.et_pb_module .et_pb_button.et_pb_contact_submit:focus,
  body #page-container .et_pb_section .el-contact-form.et_pb_contact_form_container.et_pb_module .et_pb_button.et_pb_contact_submit:active {
    color: #ffffff !important; background-color: var(--el-blue) !important; }
  /* a long button label (the Tourist Park "Book ... by calling direct") wraps inside its yellow box instead of spilling under it */
  body.el-site #page-container .content a.button { height: auto; min-height: 39px; line-height: 21px; padding-top: 9px; padding-bottom: 9px; white-space: normal; text-align: center; max-width: 100%; box-sizing: border-box; }
  /* the home special offer's Book Now (live: white on a see-through blue over the photo) and the book banner */
  body.el-site.el-home #page-container .special .button:link, body.el-site.el-home #page-container .special .button:visited { color: #ffffff !important; background: var(--el-blue) !important; }
  body.el-site.el-home #page-container .special .button:hover, body.el-site.el-home #page-container .special .button:focus, body.el-site.el-home #page-container .special .button:active { color: #ffffff !important; background: var(--el-blue-dark) !important; text-decoration: underline; }
  body.el-site.el-home #page-container .feature-banners .book-banner .book-banner-shade { background: var(--el-blue); }
  body.el-site.el-home #page-container .feature-banners .book-banner .book-text p a:hover,
  body.el-site.el-home #page-container .feature-banners .book-banner .book-text p a:focus,
  body.el-site.el-home #page-container .feature-banners .book-banner .book-text p a:active { color: #ffffff !important; background-color: var(--el-blue-dark) !important; outline: 2px solid #ffffff; }

  /* text links: live's hovers (#f57c31 orange, #ebbb00 / #fcc20c yellow) are under 3:1 on white */
  body.el-site #page-container a:hover, body.el-site #page-container a:focus, body.el-site #page-container a:active { color: var(--el-link-hover); }
  body.el-site #page-container h2 a:hover, body.el-site #page-container h2 a:focus { color: var(--el-link-hover); }
  body.el-site #page-container .panel .title a:hover, body.el-site #page-container .panel .title a:focus, body.el-site #page-container .panel .title a:active { color: var(--el-link-hover); }
  body.el-site #page-container a.more:link, body.el-site #page-container a.more:visited { font-size: 14px; line-height: 20px; color: var(--el-blue); padding: 6px 9px 6px 0; }
  body.el-site #page-container a.more:hover, body.el-site #page-container a.more:focus, body.el-site #page-container a.more:active,
  body.el-site.el-home #page-container .panel a.more:hover, body.el-site.el-home #page-container .panel a.more:focus { color: var(--el-link-hover); background-image: url(/wp-content/uploads/ilaunch/skin/more-bg-home.png); text-decoration: underline; }

  /* muted and small text: 14px floor, AA greys */
  body.el-site #page-container .panel, body.el-site #page-container .panel .summary, body.el-site #page-container .panel .date,
  body.el-site.el-home #page-container .panel .summary { font-size: 14px; line-height: 20px; }
  body.el-site #page-container .panel .details, body.el-site #page-container .entry .details, body.el-site #page-container .panel li em,
  body.el-site.el-home #page-container .panel .details { font-size: 14px; line-height: 20px; color: var(--el-muted); }
  body.el-site #page-container .panel .details a:link, body.el-site #page-container .panel .details a:visited, body.el-site #page-container .entry .details a:link, body.el-site #page-container .entry .details a:visited { color: var(--el-muted); }
  body.el-site #page-container .panel .text a { font-size: 14px !important; display: inline-block; padding: 3px 0; }
  body.el-site #page-container .panel .text a:not(:empty) { margin-right: 8px; }
  /* the archive list's own links only: live's script appends the sidebar VIEW MORE (li.archive-more > a.more), whose right padding keeps the arrow off
     the text (Stage 3b: this rule and the list-link tap rule below took that padding away and the arrow sat over the final E at 390 and 768) */
  body.el-site #page-container .panel ul.archive a:not(.more) { display: inline-block; padding: 3px 0; }
  body.el-site #page-container .panel .title a { display: inline-block; padding: 3px 0; }
  body.el-site #page-container .smalltext, body.el-site #page-container .smalltext a { font-size: 14px; color: var(--el-muted); line-height: 20px; }
  body.el-site #page-container div.top { font-size: 14px; line-height: 24px; }
  body.el-site #page-container div.top a:link, body.el-site #page-container div.top a:visited { color: var(--el-muted); padding: 2px 10px; }
  body.el-site #page-container div.top a:hover, body.el-site #page-container div.top a:focus, body.el-site #page-container div.top a:active { color: #ffffff; background: #6d6d6d; }
  body.el-site #page-container .paging { font-size: 14px; color: #555555; line-height: 32px; }
  body.el-site #page-container .paging a:link, body.el-site #page-container .paging a:visited { display: inline-block; min-width: 14px; padding: 3px 8px; line-height: 20px; color: #555555; text-align: center; }
  body.el-site #page-container .paging em, body.el-site #page-container .paging em a:link, body.el-site #page-container .paging em a:visited { color: #ffffff; background-color: #6d6d6d; }
  body.el-site #page-container .paging em { display: inline-block; min-width: 14px; padding: 3px 8px; line-height: 20px; text-align: center; }
  body.el-site #page-container .paging em a:link, body.el-site #page-container .paging em a:visited { padding: 0; min-width: 0; background: none; }
  body.el-site #page-container .paging a:hover, body.el-site #page-container .paging a:focus, body.el-site #page-container .paging a:active { color: #ffffff; background-color: #6d6d6d; }
  body.el-site #page-container span.options a { display: inline-block; min-width: 24px; padding: 3px 6px; line-height: 20px; font-size: 14px; text-align: center; }
  body.el-site #page-container .result-count { font-size: 14px; }
  body.el-site #page-container blockquote .highlight, body.el-site #page-container blockquote .highlight strong { color: var(--el-link-hover); }
  body.el-site #page-container blockquote .details { color: var(--el-muted); }
  body.el-site #page-container .form td, body.el-site #page-container .form td em { font-size: 14px; color: var(--el-muted); }
  body.el-site #page-container p.ils-required-note em.required { font-size: 14px; color: var(--el-muted); }
  body.el-site #page-container .warning, body.el-site #page-container .notification, body.el-site #page-container .error { color: #555555; }
  /* 16px inputs (no zoom-on-focus) */
  body.el-site #page-container input:not([type=submit]):not([type=image]):not([type=hidden]), body.el-site #page-container select, body.el-site #page-container textarea,
  body.el-site #page-container .el-contact-form .et_pb_contact_field input.input, body.el-site #page-container .el-contact-form .et_pb_contact_field textarea.input,
  body.el-site #page-container .el-contact-form input.et_pb_contact_captcha { font-size: 16px; }
  /* links inside running text are underlined (live's #444 links are the colour of the text around them, so colour alone never told them apart) */
  body.el-site #page-container .content-wrapper :is(p, td, li, .summary > div, .text) a[href]:not(.button):not(.more):not(.gallery-item):not(.label) { text-decoration: underline; text-underline-offset: 2px; }
  /* a phone number inside a sentence (the FAQ's "Tel: 02 4332 3955"): a 24px tap box without moving the line */
  body.el-site #page-container .content a.tel-link { padding-top: 4px; padding-bottom: 4px; }
  /* list and table links in running content: taller tap rows without changing the line (kept inline so bullets stay on the first line) */
  body.el-site #page-container .content li > a:only-child:not(.button):not(.more), body.el-site #page-container .content td a:not(.button),
  body.el-site #page-container .content :is(strong, b, em, span) > a:only-child:not(.button) { padding: 4px 0; }
  /* the visitor search's image button (live: 27 x 23px) */
  body.el-site #page-container .form.searchpage input.none { box-sizing: content-box; width: 27px; height: 23px; padding: 10px; font-size: 16px; }

  /* footer: 14px, AA hover (white underlined on the blue; live's yellow is 3.8:1 there), taller tap rows */
  body.el-site #page-container #footer .copyright a, body.el-site #page-container #footer .copyright, body.el-site #page-container #footer p,
  body.el-site #page-container .footer-tags, body.el-site #page-container .vcard .adr, body.el-site #page-container .vcard li, body.el-site #page-container .footermenu { font-size: 14px; }
  body.el-site #page-container #footer .copyright li a, body.el-site #page-container #footer .vcard a, body.el-site #page-container .footer-tags a:not(.tag) { display: inline-block; padding: 4px 0; line-height: 18px; }
  body.el-site #page-container #footer .container a:hover, body.el-site #page-container #footer .container a:focus, body.el-site #page-container #footer .container a:active,
  body.el-site #page-container #footer .copyright a:hover, body.el-site #page-container #footer a.email:hover, body.el-site #page-container #footer a.email:focus { color: #ffffff; text-decoration: underline; }
  body.el-site #page-container .footermenu a:hover, body.el-site #page-container .footermenu a:focus, body.el-site #page-container .footermenu a:active { color: var(--el-yellow); text-decoration: underline; }
  body.el-site #page-container .footer-tags .tag { display: inline-block; padding: 5px 58px 5px 0; line-height: 14px; vertical-align: middle; }
  body.el-site #page-container .footermenu a { padding: 4px 0; }
  /* room thumbnails: the link is as tall as its photo */
  body.el-site #page-container .gallery.room a.gallery-item { display: inline-block; vertical-align: top; line-height: 0; }

  /* header and menu (the horizontal menu still shows at 1170-1249): live's active/hover yellow text is 1.8:1 on white */
  body.el-site #page-container #menu li.active > a:link, body.el-site #page-container #menu li.active > a:visited, body.el-site #page-container #menu li.active > a:active,
  body.el-site #page-container #menu li:hover > a:link, body.el-site #page-container #menu li:hover > a:visited, body.el-site #page-container #menu > ul > li > a:hover, body.el-site #page-container #menu > ul > li > a:focus { color: #7a5f00; }
  body.el-site #page-container #menu > ul > li.active > a { box-shadow: inset 0 -4px 0 var(--el-yellow); }
  body.el-site #page-container #menu li li:hover, body.el-site #page-container #menu li li > a:hover, body.el-site #page-container #menu li li > a:focus { background: var(--el-blue-dark); }
  body.el-site #page-container #menu li:hover ul a:link, body.el-site #page-container #menu li:hover ul a:visited, body.el-site #page-container #menu li ul a:hover, body.el-site #page-container #menu li ul a:focus { color: #ffffff; }
  body.el-site #page-container #menu li li.active, body.el-site #page-container #menu li li.active a, body.el-site #page-container #menu li:hover li.active a { background: var(--el-yellow); color: var(--el-ink); }
  body.el-site #page-container #menu li ul a:link, body.el-site #page-container #menu li ul a:visited { padding: 8px 12px; }
  body.el-site #page-container #header .socialmedia a { width: 25px; height: 24px; }
}

/* ======================= 1170-1249: live's layout; only fixed rows that no longer fit are fitted ======================= */
@media (min-width: 1170px) and (max-width: 1249px) {
  /* the footer's three columns at 14px: the vcard is live's 425px box beside a 350px credit column */
  body.el-site #page-container #footer .copyright { width: 360px; }
  body.el-site #page-container .footer-tags { width: 360px; }
  /* the home Latest Blog panel is a fixed 238px box on live; its three teasers at 14px grow with it here */
  body.el-site.el-home #page-container .panel.blog { height: auto; }
  /* contact and review forms: live's table geometry at 16px inputs */
  body.el-site #page-container .el-contact-form .et_pb_contact_field input.input { height: 32px; }
  /* Stage 3b: the Contact Us drop-down (Reviews, Blog). Keyboard: it opens while focus is inside it (live: hover only, so Tab skipped both pages).
     Touch (html.el-touch, el-sitewide.php): the first tap opens it (li.el-open), a tap elsewhere or Escape closes it; the sticky hover a tap leaves
     behind and the focus it leaves on Contact Us do not hold it open. The open list's items are white on live's blue (6.8:1) in every case. */
  /* the open list is 240px wide from Contact Us's left edge, so from 1170 to about 1225 it hung up to 28px off the right of the screen: align it to
     Contact Us's right edge instead (inside the screen at every width of the band) */
  body.el-site #page-container #menu > ul > li > ul { left: auto; right: 0; }
  body.el-site #page-container #menu > ul > li:focus-within > ul { display: block; }
  html.el-touch body.el-site #page-container #menu > ul > li:hover > ul, html.el-touch body.el-site #page-container #menu > ul > li:focus-within > ul { display: none; }
  html.el-touch body.el-site #page-container #menu > ul > li.el-open > ul { display: block; }
  body.el-site #page-container #menu > ul > li:focus-within li:not(.active) > a:link, body.el-site #page-container #menu > ul > li:focus-within li:not(.active) > a:visited,
  body.el-site #page-container #menu > ul > li.el-open li:not(.active) > a:link, body.el-site #page-container #menu > ul > li.el-open li:not(.active) > a:visited { color: #ffffff; }
  /* the current page's item (yellow) keeps the dark text when the list is open without a hover (keyboard): the menu's active-link rule above
     out-ranked it and left #7a5f00 on the yellow (3.4:1) */
  body.el-site #page-container #menu > ul > li li.active > a:link, body.el-site #page-container #menu > ul > li li.active > a:visited { color: var(--el-ink); }
}

/* ======================= below 1170: tablet and phone share the reflow ======================= */
@media (max-width: 1169px) {
  /* --- header: logo block, then MENU; Book Now always in view; the menu opens as a panel under the header --- */
  body.el-site #page-container #header { padding: 12px 0 0; }
  body.el-site #page-container #header .container { width: auto; max-width: none; padding: 0 24px; display: flex; flex-wrap: wrap; align-items: center; column-gap: 16px; row-gap: 8px; }
  body.el-site #page-container #header .container > .clearboth { display: none; }
  body.el-site #page-container #header .right { display: contents; }
  body.el-site #page-container #header .logo { order: 0; float: none; width: auto; flex: 0 0 auto; align-items: center; gap: 12px !important; }
  body.el-site #page-container #header .logo img { width: 84px !important; height: 84px; max-width: none; object-fit: cover; }
  body.el-site #page-container #header .logo a { display: block; line-height: 0; }
  body.el-site #page-container #header .logo a img { width: 134px !important; height: 84px; object-fit: contain; }
  body.el-site #page-container .headerbannertext { order: 1; float: none; flex: 1 1 200px; margin: 0; text-align: right; }
  body.el-site #page-container .headerbannertext p { font-size: 20px; line-height: 26px; }
  body.el-site #page-container #header .socialmedia { order: 2; float: none; line-height: 24px; }
  body.el-site #page-container #header .right > .clearboth { order: 3; display: block; flex: 0 0 100%; height: 0; }
  body.el-site #page-container .ils-menu-toggle { order: 5; display: inline-flex; align-items: center; gap: 10px; height: 48px; margin: 0 0 12px auto; padding: 0 18px; border: 0; border-radius: 0;
    background: var(--el-blue); color: #ffffff; font: 700 16px/48px 'Raleway', Arial, Helvetica, sans-serif; text-transform: uppercase; letter-spacing: 0.5px; cursor: pointer; }
  body.el-site #page-container .ils-menu-toggle:hover, body.el-site #page-container .ils-menu-toggle:focus, body.el-site #page-container .ils-menu-toggle:active,
  body.el-site #page-container #header.ils-menu-open .ils-menu-toggle { background: var(--el-blue-dark); color: #ffffff; }
  body.el-site #page-container .ils-menu-toggle:focus-visible { outline: 3px solid var(--el-yellow); outline-offset: 2px; }
  body.el-site #page-container .ils-menu-toggle span, body.el-site #page-container .ils-menu-toggle span::before, body.el-site #page-container .ils-menu-toggle span::after {
    display: block; position: relative; width: 20px; height: 2px; background: #ffffff; content: ""; }
  body.el-site #page-container .ils-menu-toggle span::before { position: absolute; top: -6px; }
  body.el-site #page-container .ils-menu-toggle span::after { position: absolute; top: 6px; }
  body.el-site #page-container #header.ils-menu-open .ils-menu-toggle span { background: transparent; }
  body.el-site #page-container #header.ils-menu-open .ils-menu-toggle span::before { top: 0; transform: rotate(45deg); }
  body.el-site #page-container #header.ils-menu-open .ils-menu-toggle span::after { top: 0; transform: rotate(-45deg); }

  /* the menu: closed, only Book Now shows (a button beside MENU); open, a full-width panel under the header, Book Now first */
  body.el-site #page-container #menu { order: 4; flex: 1 1 auto; margin: 0 0 12px; text-align: right; font-size: 16px; }
  body.el-site #page-container #menu ul { display: inline-flex; flex-direction: column; margin: 0; padding: 0; }
  body.el-site #page-container #menu > ul > li:not(.alt) { display: none; }
  body.el-site #page-container #menu li { margin: 0; padding: 0; }
  body.el-site #page-container #menu li.alt { order: -1; }
  body.el-site #page-container #menu li.alt > a:link, body.el-site #page-container #menu li.alt > a:visited, body.el-site #page-container #menu li.alt > a:active {
    display: block; height: 48px; padding: 0 26px; background: var(--el-yellow); color: var(--el-ink); font-weight: 700; font-size: 16px; line-height: 48px; text-transform: uppercase; letter-spacing: 0.5px; text-align: center; }
  body.el-site #page-container #menu li.alt > a:hover, body.el-site #page-container #menu li.alt > a:focus, body.el-site #page-container #menu li.alt:hover > a:link, body.el-site #page-container #menu li.alt:hover > a:visited {
    background: var(--el-blue); color: #ffffff; }
  body.el-site #page-container #header.ils-menu-open #menu { order: 6; flex: 0 0 auto; width: calc(100% + 48px); margin: 0 -24px; text-align: left; background: var(--el-blue); }
  body.el-site #page-container #header.ils-menu-open #menu ul { display: flex; width: 100%; }
  body.el-site #page-container #header.ils-menu-open #menu > ul > li { display: block; border-top: 1px solid rgba(255, 255, 255, 0.25); }
  body.el-site #page-container #header.ils-menu-open #menu > ul > li.alt { border-top: 0; }
  body.el-site #page-container #header.ils-menu-open #menu li a:link, body.el-site #page-container #header.ils-menu-open #menu li a:visited, body.el-site #page-container #header.ils-menu-open #menu li a:active {
    display: block; padding: 0 24px; line-height: 50px; font-size: 17px; color: #ffffff; text-align: left; }
  body.el-site #page-container #header.ils-menu-open #menu li.alt > a:link, body.el-site #page-container #header.ils-menu-open #menu li.alt > a:visited { color: var(--el-ink); background: var(--el-yellow); }
  body.el-site #page-container #header.ils-menu-open #menu li.alt > a:hover, body.el-site #page-container #header.ils-menu-open #menu li.alt > a:focus { color: #ffffff; background: var(--el-blue-dark); }
  body.el-site #page-container #header.ils-menu-open #menu li:not(.alt) > a:hover, body.el-site #page-container #header.ils-menu-open #menu li:not(.alt) > a:focus,
  body.el-site #page-container #header.ils-menu-open #menu li:not(.alt):hover > a:link, body.el-site #page-container #header.ils-menu-open #menu li:not(.alt):hover > a:visited { background: var(--el-blue-dark); color: #ffffff; text-decoration: underline; }
  body.el-site #page-container #header.ils-menu-open #menu li.active > a:link, body.el-site #page-container #header.ils-menu-open #menu li.active > a:visited {
    color: #ffffff; font-weight: 700; box-shadow: inset 6px 0 0 var(--el-yellow); }
  body.el-site #page-container #header.ils-menu-open #menu li ul { position: static; display: block; width: auto; padding: 0; margin: 0; background: none; border: 0; }
  body.el-site #page-container #header.ils-menu-open #menu li li { border-top: 1px solid rgba(255, 255, 255, 0.15); background: none; }
  body.el-site #page-container #header.ils-menu-open #menu li li a:link, body.el-site #page-container #header.ils-menu-open #menu li li a:visited { padding: 0 24px 0 46px; line-height: 46px; font-size: 16px; color: #ffffff; background: none; }
  body.el-site #page-container #header.ils-menu-open #menu li li.active a:link, body.el-site #page-container #header.ils-menu-open #menu li li.active a:visited { background: none; color: #ffffff; font-weight: 700; box-shadow: inset 6px 0 0 var(--el-yellow); }
  body.el-site #page-container #header.ils-menu-open #menu li li a:hover, body.el-site #page-container #header.ils-menu-open #menu li li a:focus { background: var(--el-blue-dark); color: #ffffff; }
  body.el-site #page-container #menu > ul > li.active > a { box-shadow: none; }

  /* --- hero --- */
  body.el-site #page-container .featureimage { height: 240px; }
  body.el-site #page-container .featuremain, body.el-site #page-container ul.featuremain.slidepark, body.el-site #page-container ul.featuremain.slidepark > li { height: 300px !important; }
  body.el-site.el-home #page-container .featuremain, body.el-site.el-home #page-container ul.featuremain.slidepark, body.el-site.el-home #page-container ul.featuremain.slidepark > li { height: 440px !important; }
  body.el-site #page-container ul.featuremain.slidepark > li > img { width: 100%; height: 100%; }

  /* --- content columns --- */
  body.el-site #page-container .content { padding: 40px 24px; }
  body.el-site #page-container .content.no-top { padding-top: 0; }
  body.el-site #page-container .content-wrapper { width: auto; max-width: 1000px; }
  body.el-site #page-container .content img, body.el-site #page-container .content iframe, body.el-site #page-container .content video { max-width: 100%; }
  body.el-site #page-container .content img { height: auto; }
  body.el-site #page-container .content table:not(.form) { max-width: 100%; }
  body.el-site #page-container .content h1 { font-size: 42px; line-height: 48px; }
  body.el-site #page-container .content [style*="justify"] { text-align: left !important; }
  body.el-site #page-container .content.split .left, body.el-site #page-container .content.split .right { width: 48%; }
  body.el-site #page-container .content .left.smaller { width: 42%; margin-right: 3%; }
  body.el-site #page-container .content .right.adjusted { width: 55%; }

  /* rooms: photo column narrows with the page */
  body.el-site #page-container .list .entry .images { width: 50%; max-width: 570px; margin-right: 30px; }
  body.el-site #page-container .list .entry .images > img { display: block; width: 100%; }
  body.el-site #page-container .list .entry .images .gallery.room { display: flex; flex-wrap: wrap; gap: 2px; }
  body.el-site #page-container .list .entry .images .gallery.room img { width: 96px; height: auto; padding: 0 !important; }
  body.el-site #page-container .list .entry h2 { line-height: 36px; }
  /* photo galleries: full rows at every width (fixed 316px boxes leave one per row and half-empty rows on tablets) */
  body.el-site #page-container .gallery:not(.room) { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 12px; }
  body.el-site #page-container .gallery:not(.room) > :not(a.gallery-item) { grid-column: 1 / -1; }
  body.el-site #page-container .gallery:not(.room) > a.gallery-item { display: block; line-height: 0; }
  body.el-site #page-container .gallery:not(.room) > a.gallery-item img { display: block; width: 100%; height: auto; aspect-ratio: 300 / 203; object-fit: cover; box-sizing: border-box; }

  /* blog list titles: live's 30px titles sit on a 22px line (they overlap when they wrap at desktop: live's own, kept there) */
  body.el-site #page-container .list .entry .details h2, body.el-site #page-container .list .entry .details h2 a { font-size: 26px !important; line-height: 32px; }

  /* --- home --- */
  body.el-site.el-home #page-container .content.main { padding: 40px 24px 10px; }
  body.el-site.el-home #page-container .content .wrapper { width: auto; max-width: 970px; }
  body.el-site.el-home #page-container .content .inner { width: calc(100% - 345px); margin: 0 40px 0 0; }
  body.el-site.el-home #page-container .content h1 { font-size: 42px; line-height: 48px; }
  body.el-site.el-home #page-container .panel.blog { height: auto; padding-bottom: 30px; }
  body.el-site.el-home #page-container .feature-video { padding: 24px 24px 10px; box-sizing: border-box; }
  body.el-site.el-home #page-container .feature-video .wrapper { width: auto; max-width: 970px; }
  body.el-site.el-home #page-container .feature-video img { display: block; height: auto; }
  body.el-site.el-home #page-container .special { padding: 24px; box-sizing: border-box; }
  body.el-site.el-home #page-container .special .image { width: auto; max-width: 970px; height: auto; padding-top: 45.26%; background-size: 100% auto !important; background-position: center top !important; background-repeat: no-repeat; background-color: #ffffff; }
  body.el-site.el-home #page-container .special h3 { height: auto; font-size: 44px; line-height: 72px; }
  body.el-site.el-home #page-container .special .image .shade { width: 100%; height: 100%; }
  body.el-site.el-home #page-container .special .text { position: static; display: flex; flex-wrap: wrap; align-items: center; column-gap: 24px; row-gap: 10px; width: auto; padding: 16px 20px; float: none; }
  body.el-site.el-home #page-container .special .text > p, body.el-site.el-home #page-container .special .info { float: none; width: auto; margin: 0; }
  body.el-site.el-home #page-container .special .text > .clearboth { display: none; }
  body.el-site.el-home #page-container .special .info { order: 1; flex: 1 1 200px; }
  body.el-site.el-home #page-container .special .info p { margin: 0; font-size: 15px; }
  body.el-site.el-home #page-container .special .text > p:first-child { order: 0; }
  body.el-site.el-home #page-container .special .text > p:first-child a { float: none; width: auto; display: inline-block; padding: 6px 0; }
  body.el-site.el-home #page-container .special .text > p:has(.button) { order: 2; }
  body.el-site.el-home #page-container .special .button { position: static; display: inline-block; float: none; width: auto; height: 48px; padding: 0 30px; line-height: 48px; font-size: 18px; }
  body.el-site.el-home #page-container .feature-banners { width: auto; max-width: 970px; height: auto; margin: 0 24px 40px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  body.el-site.el-home #page-container .feature-banners .banner { float: none; width: auto; height: auto; margin: 0; aspect-ratio: 300 / 278; background-size: cover; background-position: center; }
  body.el-site.el-home #page-container .feature-banners .book-banner { padding: 20px; box-sizing: border-box; aspect-ratio: auto; display: flex; }
  body.el-site.el-home #page-container .feature-banners .book-banner .book-text { width: auto; flex: 1 1 auto; height: auto; padding: 32px 12px 24px; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; }
  body.el-site.el-home #page-container .feature-banners .book-banner .book-text p { font-size: 20px; line-height: 28px; }
  body.el-site.el-home #page-container .feature-banners .book-banner .book-text p a { display: inline-block; margin-top: 16px; padding: 14px 18px; line-height: 20px; }
  body.el-site.el-home #page-container .feature-banners > .clearboth { display: none; }

  /* --- forms below 1250 are in their own block further down --- */

  /* --- footer --- */
  body.el-site #page-container #footer .container, body.el-site #page-container .footermenu .container { width: auto; max-width: none; padding: 0 24px; }
  body.el-site #page-container #footer .copyright { width: 54%; }
  body.el-site #page-container #footer .copyright .left { float: none; }
  body.el-site #page-container #footer .copyright ul { display: flex; flex-wrap: wrap; column-gap: 22px; }
  body.el-site #page-container #footer .copyright li, body.el-site #page-container #footer .copyright li:last-child { margin: 0; padding: 0; background: none; }
  body.el-site #page-container .footer-tags { width: auto; float: none; }
  body.el-site #page-container #footer .vcard { width: 40%; }
  body.el-site #page-container #footer .vcard ul { float: none; }
  body.el-site #page-container #footer .socialmedia { float: right; clear: right; margin: 12px 0 0; width: 40%; }
  /* SEO link row: whole items wrap, centred, no separator image left at a line start; the nested item becomes a sibling */
  body.el-site #page-container .footermenu { padding: 12px 0; }
  body.el-site #page-container .footermenu .container > ul { float: none; display: flex; flex-wrap: wrap; justify-content: center; column-gap: 28px; row-gap: 2px; }
  body.el-site #page-container .footermenu li, body.el-site #page-container .footermenu li:last-child { background: none; padding: 0; margin: 0; }
  body.el-site #page-container .footermenu li:has(> ul), body.el-site #page-container .footermenu li > ul { display: contents; }
  body.el-site #page-container .footermenu a { display: inline-block; padding: 4px 0; line-height: 20px; }
}

/* ======================= below 980: one column ======================= */
@media (max-width: 979px) {
  body.el-site #page-container .content .left, body.el-site #page-container .content .right,
  body.el-site #page-container .content.split .left, body.el-site #page-container .content.split .right,
  body.el-site #page-container .content .left.smaller, body.el-site #page-container .content .right.adjusted { float: none; width: auto; margin-right: 0; }
  body.el-site #page-container .content .right, body.el-site #page-container .content .right.adjusted { margin-top: 30px; }
  body.el-site #page-container .content .right .panel { padding: 0 0 12px; }
  body.el-site #page-container .content .right .panel h3 { margin-left: 0; }
  body.el-site.el-home #page-container .content .inner { float: none; width: auto; margin: 0; }
  body.el-site.el-home #page-container .content.main .right.blog { float: none; width: auto; margin-top: 20px; }
  body.el-site.el-home #page-container .panel.blog ul { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 24px; }
  body.el-site.el-home #page-container .panel.blog li { float: none; width: auto; }
  body.el-site.el-home #page-container .panel.blog > .clearleft { display: none; }
  body.el-site.el-home #page-container .panel.blog img { float: none; display: block; margin: 0 0 10px; }
  body.el-site #page-container .list .entry .images { float: none; width: auto; max-width: 570px; margin: 0 0 20px; }
  body.el-site.el-home #page-container .feature-banners { grid-template-columns: 1fr 1fr; }
  body.el-site.el-home #page-container .feature-banners .book-banner { grid-column: 1 / -1; }
}

/* single blog posts, 768 to 979 (fix round 1, 3.18 finding N2, 8 Oct 2026): the lead photo (300px, floated left in this band) is
   taller than a short post's text (post 59), and once the sidebar stacks under the post the float was never cleared, so the
   "Comments" heading and the sidebar's first heading wrapped beside the photo while their content started below it. Clear the photo
   at the end of the post entry, so everything after the post starts below it. The 16px of padding, cancelled by the -16px margin
   when there is nothing to clear, leaves a 16px gap under the photo only when the clear moves something (the phone layout's gap):
   measured on all 53 posts at 768, 900 and 979, only post 59 moves. Below 768 the photo is not floated; 980 and up keep live's layout. */
@media (min-width: 768px) and (max-width: 979px) {
  body.el-site.single-post #page-container .content .left > .entry::after { content: ""; display: block; clear: both; padding-top: 16px; margin-top: -16px; }
}

/* phone numbers in the page text keep their digits on one line on a phone (fix round 1, 3.18 note O1, 8 Oct 2026): the FAQ's
   in-sentence "02 4332 3955" broke as "02" / "4332 3955" at 390 and 412. The whole number is about 85px, so it moves to the next
   line when it does not fit; measured at 320 to 767 with no overflow. */
@media (max-width: 767px) {
  body.el-site #page-container .content a.tel-link { white-space: nowrap; }
}

/* ======================= phone: below 768 ======================= */
@media (max-width: 767px) {
  /* header */
  body.el-site #page-container #header { padding-top: 10px; }
  body.el-site #page-container #header .container { padding: 0 16px; column-gap: 10px; }
  body.el-site #page-container #header .logo { gap: 8px !important; }
  body.el-site #page-container #header .logo img { width: 60px !important; height: 60px; }
  body.el-site #page-container #header .logo a img { width: 96px !important; height: 60px; }
  body.el-site #page-container .headerbannertext { order: 4; flex: 1 1 100%; text-align: center; }
  body.el-site #page-container .headerbannertext p { font-size: 15px; line-height: 20px; }
  body.el-site #page-container #header .socialmedia { display: none; }
  body.el-site #page-container .ils-menu-toggle { order: 1; margin: 0 0 0 auto; }
  body.el-site #page-container #header .right > .clearboth { display: none; }
  body.el-site #page-container #menu { order: 5; flex: 1 1 100%; margin: 0 -16px; text-align: left; }
  body.el-site #page-container #menu ul { display: flex; width: 100%; }
  body.el-site #page-container #menu li.alt > a:link, body.el-site #page-container #menu li.alt > a:visited, body.el-site #page-container #menu li.alt > a:active { height: 52px; line-height: 52px; font-size: 18px; }
  body.el-site #page-container #header.ils-menu-open #menu { order: 5; flex: 1 1 100%; width: auto; margin: 0 -16px; }
  body.el-site #page-container #header.ils-menu-open #menu li a:link, body.el-site #page-container #header.ils-menu-open #menu li a:visited { padding: 0 16px; }
  body.el-site #page-container #header.ils-menu-open #menu li li a:link, body.el-site #page-container #header.ils-menu-open #menu li li a:visited { padding: 0 16px 0 36px; }

  /* hero */
  body.el-site #page-container .featureimage { height: 170px; }
  body.el-site #page-container .featuremain, body.el-site #page-container ul.featuremain.slidepark, body.el-site #page-container ul.featuremain.slidepark > li { height: 200px !important; }
  body.el-site.el-home #page-container .featuremain, body.el-site.el-home #page-container ul.featuremain.slidepark, body.el-site.el-home #page-container ul.featuremain.slidepark > li { height: 250px !important; }

  /* content */
  body.el-site #page-container .content { padding: 28px 16px; }
  body.el-site #page-container .content.no-top { padding-top: 0; }
  body.el-site #page-container .content h1, body.el-site.el-home #page-container .content h1 { font-size: 32px; line-height: 38px; margin-bottom: 18px; }
  body.el-site #page-container .content h2, body.el-site #page-container .content h2 p { font-size: 24px; line-height: 30px; }
  body.el-site #page-container .content h3 { font-size: 21px; line-height: 27px; }
  body.el-site #page-container .content p { margin: 16px 0; }
  body.el-site #page-container .content .panel p, body.el-site #page-container .content .special p, body.el-site #page-container .content .book-text p { margin: 0; }
  body.el-site #page-container .content.split .left table td[width] { width: 76px; }
  body.el-site.el-home #page-container .content.main { padding: 28px 16px 10px; }
  body.el-site.el-home #page-container .content h2 { font-size: 22px; line-height: 28px; }
  body.el-site.el-home #page-container .panel h3 { font-size: 26px; line-height: 30px; margin-bottom: 16px; }
  body.el-site.el-home #page-container .panel.blog ul { grid-template-columns: 1fr; row-gap: 18px; }
  body.el-site.el-home #page-container .panel.blog li { margin: 0; }
  body.el-site.el-home #page-container .panel.blog img { float: left; margin: 0 14px 8px 0; }

  /* home bands */
  body.el-site.el-home #page-container .feature-video { padding: 16px 16px 6px; }
  body.el-site.el-home #page-container .special { padding: 16px; margin-bottom: 20px; }
  body.el-site.el-home #page-container .special h3 { font-size: 30px; line-height: 50px; padding: 0 14px; }
  body.el-site.el-home #page-container .special .text { padding: 14px 16px 16px; }
  body.el-site.el-home #page-container .special .text > p:has(.button) { flex: 1 1 100%; }
  body.el-site.el-home #page-container .special .button { display: block; width: auto; height: 52px; line-height: 52px; text-align: center; }
  body.el-site.el-home #page-container .feature-banners { margin: 0 16px 28px; gap: 12px; }
  body.el-site.el-home #page-container .feature-banners .banner p, body.el-site.el-home #page-container .feature-banners .banner p a { font-size: 17px; line-height: 20px; }
  body.el-site.el-home #page-container .feature-banners .book-banner .book-text { padding: 22px 12px 20px; }
  body.el-site.el-home #page-container .feature-banners .book-banner .book-text p a { display: block; padding: 0 18px; height: 52px; line-height: 52px; }

  body.el-site #page-container .content a.button { padding-left: 20px; padding-right: 20px; }
  /* rooms */
  body.el-site #page-container .list .entry { margin: 0; padding: 28px 0 8px; }
  body.el-site #page-container .list .entry .images { max-width: none; margin-bottom: 16px; }
  body.el-site #page-container .list .entry .images .gallery.room { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; }
  body.el-site #page-container .list .entry .images .gallery.room a { flex: 0 0 auto; scroll-snap-align: start; }
  body.el-site #page-container .list .entry .images .gallery.room img { width: 110px; }
  body.el-site #page-container .list .entry h2 { font-size: 26px !important; line-height: 32px; }
  body.el-site #page-container .list .entry ul { padding-left: 0; }
  body.el-site #page-container .list .entry a.button.roombooking { display: block; height: 52px; padding: 0 20px; line-height: 52px; text-align: center; }
  body.el-site #page-container .gallery:not(.room) { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  body.el-site #page-container .gallery:not(.room) > a.gallery-item img { border-width: 4px; }

  /* blog list, posts and sidebar */
  body.el-site #page-container .list .entry .details h2, body.el-site #page-container .list .entry .details h2 a { font-size: 22px !important; line-height: 28px; }
  body.el-site #page-container .list .entry .summary img.blog-image { width: 96px; height: 96px; margin: 4px 14px 6px 0; }
  body.el-site #page-container .entry > a.gallery-item { display: block; }
  body.el-site #page-container .entry > a.gallery-item img.blog-image { float: none; display: block; width: 100%; max-width: 300px; height: auto; margin: 0 0 16px; }
  body.el-site #page-container .paging { text-align: left; }
  body.el-site #page-container .paging .options { display: block; margin: 0; }
  body.el-site #page-container .content .right .panel { padding: 0 0 12px; }
  body.el-site #page-container .content .right .panel h3 { margin: 0 0 16px; font-size: 26px; line-height: 30px; }
  body.el-site #page-container .content .right .panel li { margin: 14px 0; }
  body.el-site #page-container .summary table, body.el-site #page-container .entry table { display: block; overflow-x: auto; }

  /* live's empty Google +1 / Facebook Like spacer only adds a gap on a phone */
  body.el-site #page-container .socialwidgets { display: none; }

  /* footer: one column */
  body.el-site #page-container #footer { padding-top: 24px; }
  body.el-site #page-container #footer .container { padding: 0 16px; }
  body.el-site #page-container #footer .copyright, body.el-site #page-container #footer .vcard { float: none; width: auto; }
  body.el-site #page-container #footer .copyright ul { display: flex; flex-wrap: wrap; float: none; row-gap: 2px; }
  body.el-site #page-container #footer .copyright .left { float: none; }
  body.el-site #page-container #footer .vcard { margin-top: 24px; }
  body.el-site #page-container #footer .vcard .org { font-size: 18px; margin-bottom: 4px; }
  body.el-site #page-container #footer .vcard ul { float: none; margin-top: 6px; }
  body.el-site #page-container #footer .socialmedia { float: none; width: auto; margin: 16px 0 0; }
  body.el-site #page-container .footermenu { margin-top: 24px; padding: 10px 0; }
  body.el-site #page-container .footermenu .container > ul { flex-direction: column; align-items: center; row-gap: 0; }
  body.el-site #page-container .footermenu a { padding: 8px 0; line-height: 20px; }
}

/* ======================= forms below 1250 ======================= */
@media (max-width: 1249px) {
  body.el-site #page-container .el-contact-form .et_pb_contact_field input.input { height: 34px; line-height: 20px; }
  body.el-site #page-container .el-contact-form input.et_pb_contact_captcha { height: 34px; }
  body.el-site #page-container .el-contact-form .et_pb_contact_captcha_question { height: 30px; font-size: 14px; line-height: 28px; }
}
@media (max-width: 1169px) {
  /* label over a full-width field; the star stays beside its label; Verification, then a full-width SUBMIT */
  body.el-site #page-container .content.split .el-contact-form, body.el-site #page-container .right.adjusted .el-contact-form { width: auto; max-width: 560px; }
  body.el-site #page-container .el-contact-form p.et_pb_contact_field { display: block; margin: 0 0 14px; background-position: right 4px; }
  body.el-site #page-container .el-contact-form p.et_pb_contact_field:has(> [data-required_mark="required"]) { background-position: calc(100% - 2px) 6px; padding-right: 0; }
  body.el-site #page-container .right.adjusted .el-contact-form .et_pb_contact_right p.clearfix { background: none; }
  body.el-site #page-container .el-contact-form .et_pb_contact_form_label { width: auto; padding: 0 0 4px; font-weight: 700; font-size: 15px; line-height: 22px; }
  body.el-site #page-container .el-contact-form .et_pb_contact_field input.input, body.el-site #page-container .el-contact-form .et_pb_contact_field textarea.input {
    width: 100%; height: 44px; margin: 0; padding: 10px 12px; font-size: 16px; line-height: 22px; }
  body.el-site #page-container .el-contact-form .et_pb_contact_field textarea.input { height: 140px; margin: 0; }
  body.el-site #page-container .el-contact-form .et_pb_contact_right p.clearfix { height: auto; margin: 0 0 16px; padding: 0; align-items: center; }
  body.el-site #page-container .el-contact-form .et_pb_contact_right p.clearfix::before { content: "Verification"; display: block !important; flex: 0 0 auto; margin-right: 12px; font: 700 15px/22px 'Raleway', Arial, Helvetica, sans-serif; color: #444444; }
  body.el-site #page-container .el-contact-form .et_pb_contact_captcha_question { margin: 0; height: 44px; padding: 0 10px; font-size: 16px; line-height: 42px; }
  body.el-site #page-container .el-contact-form input.et_pb_contact_captcha { width: 80px !important; flex: 0 0 80px; height: 44px; margin-left: 0; font-size: 16px; }
  body.el-site #page-container .el-contact-form .et_pb_contact_right p.clearfix { column-gap: 10px; font-size: 16px; line-height: 44px; }
  body #page-container .et_pb_section .el-contact-form.et_pb_contact_form_container.et_pb_module .et_pb_button.et_pb_contact_submit { width: 100%; height: 52px; margin: 0 !important; padding: 0 20px !important; line-height: 52px !important; }
  body.el-site #page-container .el-contact-form .et_contact_bottom_container { padding: 0; }
  body.el-site #page-container .content.split p.ils-required-note, body.el-site #page-container .right.adjusted p.ils-required-note {
    width: auto; height: auto; max-width: 560px; margin: 10px 0 0; padding: 0 22px 0 0; text-align: right; line-height: 22px; background-position: right 6px; }
  body.el-site #page-container .el-contact-form:not(:has(form)) .et-pb-contact-message { font-size: 16px; line-height: 24px; }
  /* the visitor search (live: a 300px field and an image button) */
  body.el-site #page-container .form.searchpage { width: 100%; max-width: 560px; margin: 0; }
  body.el-site #page-container .form.searchpage td { display: flex; align-items: center; gap: 8px; padding: 5px 0; }
  body.el-site #page-container .form.searchpage input.clicknclear { float: none; flex: 1 1 auto; min-width: 0; width: auto; height: 44px; margin: 0; box-sizing: border-box; font-size: 16px; }
  body.el-site #page-container .form.searchpage input.none { float: none; flex: 0 0 auto; margin: 0; }
  /* the unsubscribe form */
  body.el-site #page-container table.form:not(.searchpage) { width: 100%; max-width: 560px; }
  body.el-site #page-container table.form:not(.searchpage) input:not(.button) { width: 100%; box-sizing: border-box; height: 44px; }
  body.el-site #page-container table.form:not(.searchpage) td { width: auto; }
  body.el-site #page-container table.form:not(.searchpage) th { width: auto; padding-right: 12px; }
}
@media (max-width: 767px) {
  body.el-site #page-container .content.split .el-contact-form, body.el-site #page-container .right.adjusted .el-contact-form { max-width: none; }
  body.el-site #page-container table.form:not(.searchpage), body.el-site #page-container table.form:not(.searchpage) tbody, body.el-site #page-container table.form:not(.searchpage) tr,
  body.el-site #page-container table.form:not(.searchpage) th, body.el-site #page-container table.form:not(.searchpage) td { display: block; width: auto; padding: 0; }
  body.el-site #page-container table.form:not(.searchpage) th { padding: 8px 0 4px; font-weight: 700; }
  body.el-site #page-container table.form:not(.searchpage) td { padding: 0 0 8px; background-position: right 4px; }
  body.el-site #page-container table.form:not(.searchpage) input.button { width: 100%; height: 52px; }
}

/* the narrowest phones (320-379): logo block and MENU on one row */
@media (max-width: 379px) {
  body.el-site #page-container #header .logo { gap: 6px !important; }
  body.el-site #page-container #header .logo img { width: 52px !important; height: 52px; }
  body.el-site #page-container #header .logo a img { width: 83px !important; height: 52px; }
  body.el-site #page-container .ils-menu-toggle { padding: 0 14px; gap: 8px; }
}

/* Room photo and text side by side on tablets (12 Oct 2026, Jake): stacked at 768-979 the photo left a wide empty band on its right (the 500px original
   cannot be stretched to the full width without going soft), so the photo takes the left 46% and the room text sits beside it, as at 980 and up. */
@media (min-width: 768px) and (max-width: 979px) {
  body.el-site #page-container .list .entry .images { float: left; width: 46%; max-width: 570px; margin: 0 28px 20px 0; }
  /* each text block is its own box beside the photo, so lists and the Book Now button never wrap round under the photo's foot */
  body.el-site #page-container .list .entry > :is(h2, p, ul) { display: flow-root; }
  body.el-site #page-container .list .entry > ul { padding-left: 0; }
  /* the button line usually starts below the photo's foot, so it is indented to the text column instead of dropping to the left edge */
  body.el-site #page-container .list .entry > p:has(> a.roombooking) { margin-left: calc(46% + 28px); }
}