/* st-mobile.css - Surfers Tradewinds tablet and phone design (Stage 4). Loads LAST.
   Live ships no viewport meta, so every phone gets the 1170px desktop page: everything below 1250 is OUR design.
   Bands: 1250 and up = live's exact look, nothing here applies. 1170 to 1249 = live's layout with the fixed rows fitted and the AA layer.
   768 to 1169 = a reflow (header on a menu button, one column, 3-up galleries). 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.
   Palette: purple #3d0a82, blue #041998, gold gradient #ea9900 to #f5c800 (dark text #1d0a47 on it, 7:1 or better), footer purple #3d0a82 with white text. */

/* =================== 1170 to 1249: live's layout, fixed rows fitted =================== */
@media (min-width: 1170px) and (max-width: 1249px) {
  /* the hero's ENQUIRE NOW sits 26.2rem in from the overlay's right edge: at 1170 it ends 1px outside the viewport */
  body.st-site #page-container .featureoverlay > a[href^="tel:"] { right: calc(26.2rem + 6px) !important; }
  /* AA: the offer text and the room text sit on a solid purple, so their contrast can be proven (live paints them straight on a photo and a translucent graphic) */
  body.st-site.st-home #page-container .special .text { left: 0; right: 0; width: auto; margin: 0; bottom: 0; padding: 22px 24px 26px calc(50% - 570px); background: #3d0a82; box-sizing: border-box; }
  body.st-site #page-container .list.rooms .entry { background-color: #3d0a82; }
}

/* =================== below 1170: tablet and phone share one reflow =================== */
@media (max-width: 1169px) {
  body.st-site #page-container .container { width: auto; max-width: 1170px; margin-left: auto; margin-right: auto; padding-left: 24px; padding-right: 24px; }
  body.st-site #page-container .container.upper { padding-left: 24px; padding-right: 24px; }

  /* ---- header: logo left; CALL NOW and the menu button right; the menu opens as a panel under the row ---- */
  body.st-site #page-container #header { position: relative; z-index: 30; height: auto; min-width: 0; margin: 16px auto 0; }
  body.st-site #page-container #header-top { padding: 0; }
  body.st-site #page-container #header-top > .container { position: static; display: flow-root; height: 68px; padding-top: 0; padding-bottom: 0; }
  body.st-site #page-container #header .logo { float: none; margin: -14px 0 0 0; }
  body.st-site #page-container #header .logo img { width: 142px; height: auto; max-width: none; }
  body.st-site #page-container #header-top .socialmedia { display: none; }
  body.st-site #page-container #header > .container { position: static; padding: 0; }
  body.st-site #page-container #header .clearboth { display: none; }
  body.st-site #page-container .ils-menu-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 10px; position: absolute; z-index: 40; top: 12px; right: 24px; height: 44px; min-width: 104px; margin: 0; padding: 0 14px;
    border: 0; border-radius: 4px; background: #3d0a82; color: #ffffff; font: 700 15px/44px Arial, Helvetica, sans-serif; text-transform: uppercase; letter-spacing: 1px; cursor: pointer; box-sizing: border-box; }
  body.st-site #page-container .ils-menu-toggle span, body.st-site #page-container .ils-menu-toggle span::before, body.st-site #page-container .ils-menu-toggle span::after {
    display: block; position: relative; width: 18px; height: 2px; background: #ffffff; content: ""; }
  body.st-site #page-container .ils-menu-toggle span::before { position: absolute; top: -6px; left: 0; }
  body.st-site #page-container .ils-menu-toggle span::after { position: absolute; top: 6px; left: 0; }
  body.st-site #page-container #header.ils-menu-open .ils-menu-toggle { background: #041998; }
  body.st-site #page-container #header.ils-menu-open .ils-menu-toggle span { background: transparent; }
  body.st-site #page-container #header.ils-menu-open .ils-menu-toggle span::before { top: 0; transform: rotate(45deg); }
  body.st-site #page-container #header.ils-menu-open .ils-menu-toggle span::after { top: 0; transform: rotate(-45deg); }

  /* the menu: a list under the header row; CALL NOW stays in the row (its own link, always visible) */
  body.st-site #page-container #menu { float: none; margin: 0; font-size: 17px; text-transform: none; }
  body.st-site #page-container #menu > ul { display: block; position: static; margin: 0; padding: 0; width: auto; }
  body.st-site #page-container #menu > ul > li:not(.button) { display: none; }
  body.st-site #page-container #header.ils-menu-open #menu > ul > li:not(.button) { display: block; margin: 0; border-top: 1px solid #d9d0ea; background: #ffffff; }
  body.st-site #page-container #header.ils-menu-open #menu > ul { border-bottom: 3px solid #3d0a82; }
  body.st-site #page-container #menu li a:link, body.st-site #page-container #menu li a:visited, body.st-site #page-container #menu li a:active {
    display: block; padding: 0 24px; line-height: 52px; color: #1d0a47; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; border-left: 6px solid transparent; }
  body.st-site #page-container #menu li.active > a:link, body.st-site #page-container #menu li.active > a:visited { color: #041998; background: #eeeaf8; border-left-color: #041998; }
  body.st-site #page-container #menu li:hover > a:link, body.st-site #page-container #menu li:hover > a:visited { color: #041998; padding-top: 0; }
  body.st-site #page-container #menu li ul { position: static; display: block; width: auto; padding: 0; margin: 0; background: #f6f3fc; border: 0; }
  body.st-site #page-container #menu li ul li { border-top: 1px solid #e4def2; }
  body.st-site #page-container #menu li ul a:link, body.st-site #page-container #menu li ul a:visited, body.st-site #page-container #menu li:hover ul a:link, body.st-site #page-container #menu li:hover ul a:visited {
    padding: 0 24px 0 44px; line-height: 46px; font-size: 16px; font-weight: 400; text-transform: none; letter-spacing: 0; color: #1d0a47; border-left: 6px solid transparent; }
  body.st-site #page-container #menu li li.active a:link, body.st-site #page-container #menu li li.active a:visited { color: #041998; font-weight: 700; background: #eeeaf8; border-left-color: #041998; }
  body.st-site #page-container #menu li li:hover, body.st-site #page-container #menu li li.active { background: #eeeaf8; }
  /* CALL NOW: the menu's own tel: link, lifted into the header row */
  body.st-site #page-container #menu > ul > li.button { display: block; position: absolute; z-index: 40; top: 12px; right: 144px; margin: 0; padding: 0; border: 0; }
  body.st-site #page-container #menu > ul > li.button a:link, body.st-site #page-container #menu > ul > li.button a:visited { display: block; box-sizing: border-box; height: 44px; padding: 0 16px; border: 0; border-radius: 4px; line-height: 44px; font-size: 15px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; text-align: center; border-left: 0; }

  /* ---- hero: shorter, in the flow; the overlay keeps its whole blue wave, anchored to the right edge ---- */
  body.st-site #page-container #feature { height: 300px; margin-top: 16px; }
  body.st-site.st-home #page-container #feature { height: 400px; }
  body.st-site #page-container .featuremain { height: 100%; }
  body.st-site #page-container .featureimage { height: 100%; }
  body.st-site #page-container .featureoverlay { left: 0; right: 0; width: auto; margin-left: 0; height: 100%; }
  body.st-site #page-container .featureoverlay > img { position: absolute; top: 0; right: 0; left: 0; height: 100%; width: 100%; max-width: none; object-fit: cover; object-position: right center; }
  body.st-site #page-container .featureoverlay > a[href^="tel:"] { right: 24px !important; bottom: 24px !important; width: auto !important; height: 48px !important; padding: 0 24px; font-size: 16px !important; text-transform: uppercase; letter-spacing: 1px; text-decoration: none; }

  /* ---- home: offer banner, welcome block, latest blogs ---- */
  body.st-site.st-home #page-container .special { height: 420px; }
  body.st-site.st-home #page-container .special .image { height: 100%; }
  body.st-site.st-home #page-container .special .special-topping { left: 0; margin-left: 0; width: 100%; height: 100%; background-size: auto 100%; background-position: 30% 0; }
  body.st-site.st-home #page-container .special .text { left: 0; right: 0; width: auto; margin: 0; bottom: 0; padding: 22px 24px 26px; background: #3d0a82; }
  body.st-site.st-home #page-container .special h3 { font-size: 40px; line-height: 42px; }
  body.st-site.st-home #page-container .special .button { width: 240px; }
  body.st-site.st-home #page-container .container.text { height: auto; }
  body.st-site.st-home #page-container .container.text .contentbg { left: 0; margin-left: 0; right: 0; }
  body.st-site.st-home #page-container .container.text > .left { position: relative; top: auto; left: auto; right: auto; bottom: auto; margin: 0; width: auto !important; height: 360px; }
  body.st-site.st-home #page-container .container.text > .left img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
  body.st-site.st-home #page-container .container.text > .container { padding: 0; }
  body.st-site.st-home #page-container .container .text-content { width: auto; margin: 0; padding: 36px 24px 44px; }
  body.st-site.st-home #page-container .container .text-content .left-col, body.st-site.st-home #page-container .container .text-content .right-col { float: none; width: auto; margin: 0; }
  body.st-site.st-home #page-container .text-content .left-col h1 { font-size: 44px; line-height: 48px; margin-bottom: 16px; }
  body.st-site.st-home #page-container .faq-button { width: auto; max-width: 440px; margin: 28px 0 0; padding-right: 64px; }
  body.st-site.st-home #page-container .container .text-content .right-col { margin-top: 32px; }
  body.st-site.st-home #page-container .booking-banner { width: auto; max-width: 440px; min-height: 0; margin: 0 0 28px; padding: 24px 24px 28px; }
  body.st-site.st-home #page-container .container .text-content .right-col h2 { margin-top: 8px; }
  body.st-site.st-home #page-container .panel.blog { margin: 0; padding: 40px 0 44px; }
  body.st-site.st-home #page-container .panel.blog h3 { margin-top: 0; }
  body.st-site.st-home #page-container .panel.blog ul { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 20px; }
  body.st-site.st-home #page-container .panel.blog li { width: auto; float: none; margin: 0; }
  body.st-site.st-home #page-container .panel.blog .blog-image { float: none; margin: 0 0 10px; width: auto; height: 130px; }
  body.st-site.st-home #page-container .panel.blog .blog-image a { width: 100%; height: 100%; }

  /* ---- content pages ---- */
  body.st-site #page-container .content { padding: 36px 0 6px; }
  body.st-site #page-container .content.bottom { margin: 36px 0; padding: 0; }
  body.st-site #page-container .content h1 { font-size: 44px; line-height: 48px; margin-bottom: 16px; }
  body.st-site #page-container .content h2 { font-size: 30px; line-height: 36px; margin: 26px 0 10px; }
  body.st-site #page-container .content h3 { font-size: 24px; line-height: 30px; margin: 22px 0 8px; }
  body.st-site #page-container .content p { margin: 14px 0; }
  body.st-site #page-container .content .socialwidgets { display: none; }
  body.st-site #page-container .content img { max-width: 100%; height: auto; }
  body.st-site #page-container .container .left, body.st-site #page-container .container .right, body.st-site #page-container .content .left, body.st-site #page-container .content .right,
  body.st-site #page-container .content.split .left, body.st-site #page-container .content.split .right { float: none; width: auto; }
  body.st-site #page-container .panel { margin: 36px 0; }
  body.st-site #page-container .gallery { margin: 36px 0; }
  body.st-site #page-container .gallery:not(.room) > .container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
  body.st-site #page-container .gallery:not(.room) > .container > h3 { grid-column: 1 / -1; margin: 0 0 8px; }
  body.st-site #page-container .gallery:not(.room) > .container > p { grid-column: 1 / -1; margin: 0 0 8px; }
  body.st-site #page-container .gallery:not(.room) > .container > a:not(.gallery-item) { position: absolute; }
  body.st-site #page-container .gallery:not(.room) a.gallery-item { display: block; }
  body.st-site #page-container .gallery:not(.room) img { float: none; display: block; width: 100%; height: auto; margin: 0; }
  body.st-site #page-container .gallery:not(.room) .clearleft, body.st-site #page-container .gallery:not(.room) .clearboth { display: none; }

  /* ---- rooms: photo, thumbnail strip, then the text on purple ---- */
  body.st-site #page-container .list.rooms .container { width: 100%; padding: 0; z-index: auto; }
  body.st-site #page-container .list.rooms .entry { height: auto; margin: 0; padding: 0 0 26px; background: #3d0a82; position: relative; }
  body.st-site #page-container .list.rooms .entry + .entry { margin-top: 20px; }
  body.st-site #page-container .list.rooms .entry .images { position: relative; top: auto; left: auto; float: none; width: auto; height: auto; margin: 0; }
  body.st-site #page-container .list.rooms .entry .main-photo { width: 100%; height: 360px; background-position: center !important; }
  body.st-site #page-container .list.rooms .entry .photo-topping { top: 0; left: 0; width: 100%; height: 360px; background: none; }
  body.st-site #page-container .list.rooms .entry .photo-topping a { background-position: center center; }
  body.st-site #page-container .list.rooms .entry .photo-topping a.overlay-youtube { right: 0; }
  body.st-site #page-container .gallery.room { position: static; display: flex; gap: 8px; width: auto; height: auto; margin: 0; padding: 12px 24px; overflow-x: auto; overflow-y: hidden; background: #2e0760; -webkit-overflow-scrolling: touch; }
  body.st-site #page-container .gallery.room a.gallery-item { flex: 0 0 auto; display: block; }
  body.st-site #page-container .gallery.room img { float: none; display: block; margin: 0; width: 93px; height: 73px; }
  body.st-site #page-container .gallery.room .clearleft { display: none; }
  body.st-site #page-container .list.rooms .entry h2 { margin: 22px 0 0; padding: 0 24px; font-size: 32px; line-height: 38px; }
  body.st-site #page-container .list.rooms .entry p { padding: 0 24px; font-size: 16px; line-height: 26px; margin: 12px 0; }
  body.st-site #page-container .list.rooms .entry p:has(> a.button) { margin-top: 18px; }
  body.st-site #page-container .list.rooms .entry .clearleft { display: none; }

  /* ---- blog ---- */
  body.st-site #page-container .list .entry { margin: 28px 0 0; }
  body.st-site #page-container .list .entry h2, body.st-site #page-container .list .entry h3 { font-size: 26px; line-height: 32px; }
  body.st-site #page-container .blog-image { margin: 4px 20px 12px 0; }
  body.st-site #page-container .paging { text-align: left; }

  /* ---- contact table, search ---- */
  body.st-site #page-container .content table[cellpadding] { display: block; width: auto; }
  body.st-site #page-container .content table[cellpadding] tbody { display: block; }
  body.st-site #page-container .content table[cellpadding] tr { display: grid; grid-template-columns: 90px minmax(0, 1fr); column-gap: 8px; margin-bottom: 8px; }
  body.st-site #page-container .content table[cellpadding] td { display: block; width: auto !important; padding: 0; }
  body.st-site #page-container .content table[cellpadding] td[colspan] { grid-column: 2; }
  body.st-site #page-container .form.searchpage { margin: 0; }

  /* contact and review forms: label over a full-width field */
  body.st-site #page-container .st-contact-form, body.st-site.page-id-1315 #page-container .st-contact-form { width: auto; max-width: 640px; }
  body.st-site #page-container .st-contact-form form.et_pb_contact_form, body.st-site.page-id-1315 #page-container .st-contact-form form.et_pb_contact_form { grid-template-columns: minmax(0, 1fr); }
  body.st-site #page-container .st-contact-form .et_pb_contact_form_label { text-align: left; padding: 8px 0 2px; line-height: 24px; font-size: 16px; }
  body.st-site #page-container .st-contact-form p.et_pb_contact_field:has(> [data-required_mark="required"]) > .et_pb_contact_form_label::after { position: static; display: inline-block; margin-left: 6px; vertical-align: -3px; }
  body.st-site #page-container .st-contact-form p.et_pb_contact_field .input { box-sizing: border-box; width: 100%; height: 48px; margin: 0 0 6px; padding: 10px 12px; font-size: 16px; }
  body.st-site #page-container .st-contact-form p.et_pb_contact_field textarea.input { grid-column: 1; width: 100%; height: 150px; margin: 0 0 6px; }
  body.st-site #page-container .st-contact-form .et_pb_contact_right p.clearfix { grid-column: 1; flex-wrap: wrap; align-items: center; padding: 8px 0 6px; font-size: 16px; line-height: 48px; }
  body.st-site #page-container .st-contact-form .et_pb_contact_right p.clearfix::before { flex: 0 0 100%; text-align: left; padding: 0 0 2px; line-height: 24px; font-size: 16px; }
  body.st-site #page-container .st-contact-form .et_pb_contact_captcha_question { line-height: 48px; padding: 0 6px 0 0; }
  body.st-site #page-container .st-contact-form input.et_pb_contact_captcha { box-sizing: border-box; width: 90px; height: 48px; margin: 0 0 0 6px; padding: 10px 12px; font-size: 16px; }
  body.st-site #page-container .et_pb_section .st-contact-form.et_pb_contact_form_container.et_pb_module .et_pb_button { grid-column: 1; justify-self: stretch; box-sizing: border-box; width: 100%; height: 52px; margin: 8px 0 0 !important; padding: 0 20px !important; font-size: 18px !important; line-height: 52px !important; }
  body.st-site #page-container .content p.ils-required-note { height: auto; margin: 8px 0 20px; text-align: left; }
  body.st-site #page-container .content p.ils-required-note em.required { padding-right: 0; padding-left: 22px; background-position: left 5px; font-size: 14px; line-height: 24px; }


  /* ---- footer ---- */
  body.st-site #page-container #footer .container.upper { min-height: 0; padding-top: 36px; padding-bottom: 28px; background-position: right 10px bottom 10px; background-size: 150px auto; }
  body.st-site #page-container .footermenu { float: none; margin: 0 0 24px; }
  body.st-site #page-container .vcard { float: none; }
  body.st-site #page-container #footer .vcard .org { font-size: 22px; line-height: 28px; }
  body.st-site #page-container .copyright { text-align: left; line-height: 1.5; }
  body.st-site #page-container .copyright .container { padding-top: 12px; padding-bottom: 14px; }
  body.st-site #page-container .copyright ul { float: none; width: auto; margin: 0 0 6px; padding: 0; }
  body.st-site #page-container .copyright li a { display: inline-block; }
  body.st-site #page-container .footer-tags { display: block; margin: 6px 0 0; }
}

/* =================== phone: below 768 =================== */
@media (max-width: 767px) {
  body.st-site #page-container .container, body.st-site #page-container .container.upper { padding-left: 16px; padding-right: 16px; }
  body.st-site #page-container #header { margin-top: 12px; }
  body.st-site #page-container #header-top > .container { height: 60px; }
  body.st-site #page-container #header .logo { margin-top: -12px; }
  body.st-site #page-container #header .logo img { width: 118px; }
  body.st-site #page-container .ils-menu-toggle { top: 8px; right: 16px; min-width: 92px; padding: 0 10px; }
  body.st-site #page-container #menu > ul > li.button { top: 8px; right: 116px; }
  body.st-site #page-container #menu > ul > li.button a:link, body.st-site #page-container #menu > ul > li.button a:visited { padding: 0 12px; }
  body.st-site #page-container #menu li a:link, body.st-site #page-container #menu li a:visited, body.st-site #page-container #menu li a:active { padding-left: 16px; padding-right: 16px; }
  body.st-site #page-container #menu li ul a:link, body.st-site #page-container #menu li ul a:visited, body.st-site #page-container #menu li:hover ul a:link, body.st-site #page-container #menu li:hover ul a:visited { padding-left: 36px; }

  /* hero */
  body.st-site #page-container #feature { height: 200px; margin-top: 12px; }
  body.st-site.st-home #page-container #feature { height: 210px; }
  body.st-site #page-container .featureoverlay > a[href^="tel:"] { right: 12px !important; bottom: 12px !important; height: 44px !important; padding: 0 18px; font-size: 15px !important; }

  /* home */
  body.st-site.st-home #page-container .special { height: 290px; }
  body.st-site.st-home #page-container .special .text { padding: 18px 16px 22px; }
  body.st-site.st-home #page-container .special h3 { font-size: 34px; line-height: 36px; margin-bottom: 8px; }
  body.st-site.st-home #page-container .container.text > .left { height: 210px; }
  body.st-site.st-home #page-container .container .text-content { padding: 28px 16px 36px; }
  body.st-site.st-home #page-container .text-content .left-col h1 { font-size: 34px; line-height: 38px; }
  body.st-site.st-home #page-container .faq-button a { font-size: 18px; }
  body.st-site.st-home #page-container .panel.blog ul { grid-template-columns: 1fr; row-gap: 26px; }
  body.st-site.st-home #page-container .panel.blog .blog-image { height: 150px; }
  body.st-site.st-home #page-container .panel.blog h3 { font-size: 30px; line-height: 34px; }

  /* content */
  body.st-site #page-container .content { padding-top: 24px; }
  body.st-site #page-container .content h1 { font-size: 32px; line-height: 36px; margin-bottom: 14px; }
  body.st-site #page-container .content h2 { font-size: 26px; line-height: 31px; }
  body.st-site #page-container .content h3 { font-size: 22px; line-height: 27px; }
  body.st-site #page-container .content h4 { font-size: 20px; line-height: 26px; }
  body.st-site #page-container .gallery:not(.room) > .container { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  body.st-site #page-container .gallery:not(.room) > .container > h3 { font-size: 24px; line-height: 28px; }
  /* justified text opens wide gaps on a narrow column */
  body.st-site #page-container :is(.content, .panel, #main-content .entry) :is(p, li, td, h1, h2, h3, h4)[style*="justify"] { text-align: left !important; }
  body.st-site #page-container .content .summary li[style*="white-space: pre;"] { white-space: normal !important; }

  /* rooms */
  body.st-site #page-container .list.rooms .entry .main-photo, body.st-site #page-container .list.rooms .entry .photo-topping { height: 230px; }
  body.st-site #page-container .gallery.room { padding: 10px 16px; }
  body.st-site #page-container .list.rooms .entry h2 { padding: 0 16px; font-size: 28px; line-height: 33px; }
  body.st-site #page-container .list.rooms .entry p { padding: 0 16px; }

  /* blog */
  body.st-site #page-container .list .entry h2, body.st-site #page-container .list .entry h3 { font-size: 22px; line-height: 27px; }
  body.st-site #page-container .blog-image { margin: 4px 14px 8px 0; }
  body.st-site #page-container .entry .summary img.blog-image { width: 120px; height: auto; }
  body.st-site.single-post #page-container .entry > a.gallery-item { float: none; display: block; text-align: center; }
  body.st-site #page-container .paging a { margin-bottom: 6px; }

  /* contact table: stacked label over value */
  body.st-site #page-container .content table[cellpadding] tr { grid-template-columns: 1fr; row-gap: 2px; margin-bottom: 14px; }
  body.st-site #page-container .content table[cellpadding] td[colspan] { grid-column: 1; }

  /* search: the field and its button on one row, the field shrinks */
  body.st-site #page-container table.form.searchpage, body.st-site #page-container table.form.searchpage tbody, body.st-site #page-container table.form.searchpage tr { display: block; width: auto; }
  body.st-site #page-container table.form.searchpage td { display: flex; gap: 8px; width: auto; padding: 5px 0; }
  body.st-site #page-container .form.searchpage input { float: none; flex: 1 1 auto; min-width: 0; width: auto; height: 48px; margin: 0; box-sizing: border-box; }
  body.st-site #page-container .form.searchpage input.button { flex: 0 0 auto; padding: 0 20px; line-height: 48px; }

  /* footer */
  body.st-site #page-container #footer .container.upper { padding-top: 28px; background-size: 120px auto; }
  body.st-site #page-container .copyright .container { padding-left: 16px; padding-right: 16px; }

  /* long addresses in the text (the old booking links now read the contact page address; a few posts print a bare web address) wrap instead of pushing the page sideways */
  body.st-site #page-container #main-content :is(p, li, td, div.summary, div.entry) { overflow-wrap: break-word; }
  body.st-site #page-container #main-content :is(p, li, td, div.summary, div.entry) a { overflow-wrap: anywhere; }
}

/* =================== narrow phones: columns that would squeeze the text (3.18 round 1, F1 F2 F3) =================== */
@media (max-width: 599px) {
  /* F1: a blog post's lead image is a 300px thumbnail floated left; beside it the first paragraph got a 3 to 60px column (mid-word breaks). Stack it above the text. */
  body.st-site.single-post #page-container .entry > a.gallery-item { text-align: left; }
  body.st-site.single-post #page-container .entry > a.gallery-item > img.blog-image { float: none; display: block; max-width: 100%; height: auto; margin: 0 0 14px; }
  /* F2: the Experience Oz widget on /attractions is a 220px iframe floated right inside the intro paragraph (inline style); stack it above the text */
  body.st-site #page-container #main-content iframe#experience-oz { float: none !important; display: block; margin: 0 0 16px !important; max-width: 100%; }
}
@media (max-width: 389px) {
  /* F3: logo, CALL NOW and MENU in one row at every width from 320: the two buttons get fixed widths and the logo takes what is left (100% of 108px at 320, full 118px from 330) */
  body.st-site #page-container .ils-menu-toggle { width: 80px; min-width: 0; gap: 4px; padding: 0 4px; font-size: 14px; letter-spacing: 0.5px; }
  body.st-site #page-container #menu > ul > li.button { right: 104px; }
  body.st-site #page-container #menu > ul > li.button a:link, body.st-site #page-container #menu > ul > li.button a:visited { width: 84px; padding: 0; font-size: 14px; letter-spacing: 0.5px; }
  body.st-site #page-container #header .logo img { width: min(118px, calc(100vw - 212px)); }
}

/* =================== short pages (404, search, news): the footer sits at the bottom of the screen, not mid-screen with white under it =================== */
@media (max-width: 1249px) {
  body.st-site #page-container #et-boc { min-height: 100vh; display: flex; flex-direction: column; }
  body.st-site #page-container #et-boc > #et-main-area { flex: 1 0 auto; }
  /* /news and the two /newsletter pages print their short layout with the footer short of the screen bottom (the first two also print the hero above the header) (live's unbalanced markup, copied), so the flex column above does not reach their footer: the screen below it takes the footer's colour */
  html:has(body.page-id-1323, body.page-id-1324, body.page-id-1325) { background-color: #300b61; }
  body.page-id-1323 #page-container, body.page-id-1324 #page-container, body.page-id-1325 #page-container { background-color: #ffffff; }
}

/* =================== AA layer: everything below 1250 (every state), 14px text floor, 16px inputs, 24px taps =================== */
@media (max-width: 1249px) {
  /* 14px text floor (live's side panels, bylines, footer and pager text are 11 to 13px) */
  body.st-site #page-container :is(.panel, .panel li, .panel .text, .panel .summary, .entry .details, .panel .details, .panel .date, .panel li em, .panel .title, .smalltext, .smalltext a,
    .paging, .paging a, .paging .options a, div.top, div.top a,
    a.more, .form td em, .form td em.required, p.ils-required-note em.required, .content h6) { font-size: 14px; line-height: 1.5; }
  /* footer: live's own line heights stay (the copyright bar is 38px high) */
  body.st-site #page-container :is(#footer, #footer p, #footer li, #footer a, .copyright, .copyright li a, .footer-tags, .footer-tags p, .footer-tags a) { font-size: 14px; }
  body.st-site #page-container .list.rooms .entry p { font-size: 16px; line-height: 26px; }
  body.st-site #page-container .content p.ils-required-note em.required { font-size: 14px; line-height: 22px; }
  body.st-site #page-container :is(input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="image"]), select, textarea) { font-size: 16px; }
  /* 24px taps: padding on stand-alone link rows (no change to how a line wraps) */
  body.st-site #page-container :is(#footer .footermenu a, .copyright li a, .footer-tags a:not(.tag), .panel li a, .details a, a.more, .paging a, .options a, div.top a) { padding-top: 5px; padding-bottom: 5px; }
  body.st-site #page-container .footermenu li { line-height: 1.5; }
  body.st-site #page-container :is(#main-content li > a, #main-content td a:not(.button), #footer .vcard a.email, a.tel-link, .copyright li a, #footer .footermenu a) { padding-top: 4px; padding-bottom: 4px; }
  body.st-site #page-container :is(.paging a, .paging .options a, a.more, div.top a) { display: inline-block; min-height: 24px; box-sizing: border-box; }
  /* colours below 1250: gold gradient buttons carry dark text, every state; the hover is blue with white text */
  body.st-site #page-container :is(a.button, input.button, .special .button, .roombooking, .et_pb_button) { background-color: #f5c800; }
  body.st-site #page-container .featureoverlay > a[href^="tel:"], body.st-site #page-container #menu > ul > li.button > a { background-color: #f5c800; }
  body.st-site #page-container .right-col .booking-banner a.button:is(:link, :visited) { background-color: #1c298d; color: #ffffff; }
  body.st-site #page-container .et_pb_section .st-contact-form.et_pb_contact_form_container.et_pb_module .et_pb_button { background-color: #f5c800 !important; }
  body.st-site #page-container :is(a.button, input.button, .special .button, .roombooking, .et_pb_button):is(:link, :visited) { color: #1d0a47; }
  body.st-site #page-container :is(.featureoverlay > a[href^="tel:"], #menu > ul > li.button > a):is(:link, :visited) { color: #1d0a47 !important; }
  body.st-site #page-container :is(a.button, input.button, .special .button, .booking-banner a.button, .featureoverlay > a[href^="tel:"], #menu > ul > li.button > a, .et_pb_section .st-contact-form .et_pb_button):is(:hover, :focus, :focus-visible, :active) {
    background: #041998 !important; color: #ffffff !important; text-decoration: none; }
  body.st-site #page-container .et_pb_section .st-contact-form.et_pb_contact_form_container.et_pb_module .et_pb_button { color: #1d0a47 !important; }
  body.st-site #page-container .et_pb_section .st-contact-form.et_pb_contact_form_container.et_pb_module .et_pb_button:is(:hover, :focus, :focus-visible, :active) { color: #ffffff !important; background: #041998 !important; }
  /* the home yellow banner: dark text on it (white on yellow is 1.9:1); its blue button keeps white */
  body.st-site #page-container .booking-banner a.button:is(:link, :visited) { color: #ffffff; }
  body.st-site #page-container .booking-banner p { color: #1d0a47 !important; }
  body.st-site #page-container .booking-banner a.button { color: #ffffff !important; }
  body.st-site #page-container .faq-button:is(:hover, :focus-within) { background: #041998; }
  body.st-site #page-container .faq-button:is(:hover, :focus-within) a { color: #ffffff; }
  body.st-site #page-container :is(.content, .panel) a:is(:link, :visited):not(.button):not(.more):not(.scrollto) { color: #041998; }
  body.st-site #page-container a.more:is(:link, :visited) { color: #3143ab !important; }
  body.st-site #page-container a.more:is(:hover, :focus, :active) { color: #041998 !important; text-decoration: underline; }
  /* 3.18 r2 C2: the rest colour of a.link stays scoped to .content, as before round 1. Widening it to the entry scope (an id inside :is() raises the specificity) beat the approved blue in-text rule above and turned the links grey; the hover rule below keeps the round 1 widening. */
  body.st-site #page-container .content a.link:is(:link, :visited) { color: #555555; }
  body.st-site #page-container :is(.content, #main-content .entry) a.link:is(:hover, :focus, :active) { color: #1d0a47; }
  body.st-site #page-container :is(.panel .title a, .panel .date, .panel .details, .entry .details, .panel li em, blockquote .details) { color: #444444; }
  body.st-site #page-container .panel .title a:is(:hover, :focus, :active) { color: #041998; }
  body.st-site #page-container .panel .details a:is(:link, :visited, :hover, :focus, :active), body.st-site #page-container .entry .details a:is(:link, :visited, :hover, :focus, :active) { color: #041998; }
  body.st-site:where(.st-home) #page-container .panel.blog .date { color: #555555; font-size: 14px; line-height: 20px; }
  body.st-site:where(.st-home) #page-container .panel.blog .title a:hover { color: #041998; }
  body.st-site #page-container .paging a:is(:link, :visited, :active) { background-color: #ededed; color: #333333; }
  body.st-site #page-container .paging a:hover, body.st-site #page-container .paging em, body.st-site #page-container .paging em a:is(:link, :visited, :hover, :active) { background-color: #041998; color: #ffffff; }
  body.st-site #page-container .paging { color: #444444; }
  /* every other link in the page body: live's amber hover (2.2:1 on white) becomes a dark purple with an underline, in every state; links on dark panels keep white */
  body.st-site #page-container #main-content a:where(:not(.button, .more, .scrollto, .label, .link, [class*="overlay"], .paging a)):is(:hover, :focus, :active) { color: #1d0a47; text-decoration: underline; }
  body.st-site #page-container #main-content :is(.list.rooms, .special, .faq-button, .booking-banner, .text-content) a:is(:hover, :focus, :active):not(.button):not(.link) { color: #ffffff; }
  body.st-site #page-container #main-content .options a.label:is(:link, :visited, :active) { background: #ededed; color: #333333; text-decoration: none; }
  body.st-site #page-container #main-content .options a.label.label-primary:is(:link, :visited, :active) { background: #041998; color: #ffffff; }
  body.st-site #page-container #main-content .options a.label:is(:hover, :focus) { background: #041998; color: #ffffff; text-decoration: none; }
  /* the hero's empty booking panel (live keeps it for the old booking bar) adds 7px of scroll height inside the clipped hero */
  body.st-site #page-container #feature .container.bookpanel { display: none; }
  body.st-site #page-container div.top a:is(:link, :visited, :active) { color: #444444; border-color: #8a8a8a; }
  body.st-site #page-container div.top a:is(:hover, :focus) { background: #041998; color: #ffffff; border-color: #041998; }
  body.st-site #page-container #footer a:is(:link, :visited, :hover, :focus, :active) { color: #ffffff; }
  body.st-site #page-container #footer a:is(:hover, :focus) { text-decoration: underline; }
  body.st-site #page-container .form td em, body.st-site #page-container p.ils-required-note em.required { color: #444444; }
  /* F5: in-text links (inside a paragraph, byline, list item or table cell of the page body) carry an underline, so they differ from the text by more than hue (colour-blind readers; Lighthouse link-in-text-block). Buttons, "Read More", labels, thumbnails and the footer menus are already clearly links by shape or position. */
  body.st-site #page-container #main-content :is(p, .summary, .details, .content li, .entry li, .text-content li, td) a:is(:link, :visited):not(.button, .more, .scrollto, .label, .gallery-item, .roombooking, [class*="overlay"]) { text-decoration: underline; text-underline-offset: 2px; }
  /* F8: footer links stacked as lines were 24px boxes drawn over each other (inline padding does not take space), so each was partly covered by its neighbour (Lighthouse target-size): they take their own 24px of height */
  body.st-site #page-container :is(#footer .footermenu a, #footer .vcard a.email, #footer .vcard a.tel-link, .footer-tags a:not(.tag)) { display: inline-block; padding-top: 4px; padding-bottom: 4px; line-height: 16px; }
}