/* su-mobile.css - Stage 4 DESIGNED tablet and phone layer for The Summit Apartments (skill Rule 2). Loaded LAST.
   Desktop (1250px and up) is untouched: every rule here sits inside a max-width query below 1250.
   Bands:  1170-1249  live's fixed 1170 layout kept, with the accessibility floor below.
           768-1169   a reflow: header and booking block in the flow above a shorter hero, fluid container, rooms and
                      home panels stacked, menu inline from 980, behind a Menu button below 980.
           below 768  the phone design.
   Floor below 1250 (every state): WCAG AA colours, text 14px+, inputs 16px+, tap targets 24px+, no clipping, no overlap,
   no sideways scroll. Started from the kit's ilaunch-responsive.template.css ideas, written for this template (family B,
   STAAH widget booking bar, #container-outer V2-style chrome). */

/* ======================= below 1250: accessibility floor (all narrower bands) ======================= */
@media (max-width: 1249px) {
  /* the 2000px decorative wedges are scaled to the screen instead of spilling past it */
  body.su-site #page-container #feature::after { left: 0; width: 100%; margin: 0 0 -15vw 0; height: 30vw; background-size: 100% 100%; }
  body.su-site #page-container .container.main::after { left: 0; width: 100%; margin: 0; height: 11.5vw; background-size: 100% 100%; }
  body.su-site #page-container .content.blog-map::before { left: 0; width: 100%; margin: -11.5vw 0 0 0; height: 11.5vw; background-size: 100% 100%; }

  /* STAAH booking widget: 14px labels, 16px fields, a darker panel so the white labels pass AA */
  body.su-site #page-container #booking .Configure-quickBook-Widget .MbsSearchWidget { background-color: rgba(255, 255, 255, 0.12) !important; }
  body.su-site #page-container #booking .Configure-quickBook-Widget .MbsSearchWidget label,
  body.su-site #page-container #booking .Configure-quickBook-Widget .MbsSearchWidget .lbl,
  body.su-site #page-container #booking .Configure-quickBook-Widget .MbsSearchWidget .widgetLabel { font-size: 14px !important; line-height: 18px !important; color: #ffffff !important; }
  body.su-site #page-container #booking .Configure-quickBook-Widget .MbsSearchWidget .checkinDate,
  body.su-site #page-container #booking .Configure-quickBook-Widget .MbsSearchWidget input,
  body.su-site #page-container #booking .Configure-quickBook-Widget .MbsSearchWidget .formGroup .input.inputRoom .d-flex input { font-size: 16px !important; }
  body.su-site #page-container #booking .Configure-quickBook-Widget .MbsSearchWidget button { font-size: 16px !important; min-height: 40px; }
  body.su-site #page-container #booking .Configure-quickBook-Widget .MbsSearchWidget .mbs-arrow { background-color: #ffffff; }
  /* the room counters STAAH draws on narrow screens (Adult(s) / Child, the - and + buttons) */
  body.su-site #page-container #booking .Configure-quickBook-Widget .MbsSearchWidget .guest_Rooms_Count label { color: #000000 !important; }
  body.su-site #page-container #booking .Configure-quickBook-Widget .MbsSearchWidget .selectrow label { color: #000000 !important; }
  /* the STAAH calendar and room picker when open: 14px type, AA weekday names */
  body.su-site .Configure-quickBook-Widget .rdrMonthName, body.su-site .Configure-quickBook-Widget .rdrWeekDay,
  body.su-site .Configure-quickBook-Widget .rdrDayNumber span, body.su-site .Configure-quickBook-Widget .dp-block,
  body.su-site .Configure-quickBook-Widget .guest-count-input span, body.su-site .Configure-quickBook-Widget .guest-count-input label { font-size: 14px !important; }
  body.su-site .Configure-quickBook-Widget .rdrWeekDay { color: #595959 !important; }


  /* home: small type and the grey-on-grey blog date */
  body.su-site #page-container .special p { font-size: 14px; line-height: 20px; }
  body.su-site #page-container .special a.overlay-youtube { font-size: 14px; }
  body.su-site #page-container .panel.blog .date { font-size: 14px; line-height: 18px; color: #dddddd; }
  body.su-site #page-container .panel.blog .summary { font-size: 14px; line-height: 20px; }
  body.su-site #page-container .panel a.more { font-size: 14px; }
  body.su-site #page-container .panel .title { font-size: 16px; line-height: 22px; }
  body.su-site #page-container .panel .title a { display: inline-block; padding: 2px 0; }
  body.su-site #page-container .panel .date, body.su-site #page-container .panel .details,
  body.su-site #page-container .entry .details, body.su-site #page-container .panel li em { font-size: 14px; }
  body.su-site #page-container .panel { font-size: 14px; line-height: 20px; }
  body.su-site #page-container a.more { font-size: 14px; line-height: 24px; display: inline-block; }
  /* live floats "Read More" left inside the teaser, which pushed the teaser's last words beside it on narrow columns */
  body.su-site #page-container .panel a.more { float: none; display: table; margin-top: 2px; }
  body.su-site #page-container #booking .Configure-quickBook-Widget .MbsSearchWidget input::placeholder { font-size: 16px !important; }

  /* content type floor */
  body.su-site #page-container .content h5 { font-size: 14px; }
  body.su-site #page-container .smalltext, body.su-site #page-container .smalltext a { font-size: 14px; line-height: 20px; }
  body.su-site #page-container div.top { font-size: 14px; line-height: 24px; }
  body.su-site #page-container div.top a { color: #595959; padding: 2px 10px; }
  body.su-site #page-container div.top a:hover, body.su-site #page-container div.top a:focus { color: #ffffff; background: #595959; }
  body.su-site #page-container .paging { font-size: 14px; line-height: 32px; color: #595959; }
  body.su-site #page-container .paging a:link, body.su-site #page-container .paging a:visited, body.su-site #page-container .paging a:active { display: inline-block; min-width: 14px; line-height: 24px; padding: 2px 8px; color: #595959; text-align: center; }
  body.su-site #page-container .paging a:hover, body.su-site #page-container .paging a:focus, body.su-site #page-container .paging em a { background-color: #0072a3 !important; color: #ffffff !important; }
  body.su-site #page-container span.options a, body.su-site #page-container .options a { display: inline-block; padding: 2px 6px; line-height: 24px; }
  body.su-site #page-container p.ils-required-note em.required { font-size: 14px; color: #6b6b6b; }

  /* forms: 16px fields (the desktop grid stays from 1170; the stacked form is below) */
  body.su-site #page-container .su-contact-form p.et_pb_contact_field .input,
  body.su-site #page-container .su-contact-form input.et_pb_contact_captcha { font-size: 16px; }
  body.su-site #page-container .content input, body.su-site #page-container .content select, body.su-site #page-container .content textarea { font-size: 16px; }

  /* footer: 14px type, 24px tap rows */
  body.su-site #page-container .vcard { font-size: 14px; line-height: 22px; }
  body.su-site #page-container .footermenu { font-size: 14px; }
  body.su-site #page-container .footermenu a { display: inline-block; line-height: 24px; padding: 2px 0; }
  body.su-site #page-container .copyright, body.su-site #page-container .footer-tags p, body.su-site #page-container .footer-tags a { font-size: 14px; line-height: 22px; }
  body.su-site #page-container .footer-tags a { display: inline-block; padding: 2px 0; }
  body.su-site #page-container .infomenu a { display: inline-block; padding: 1px 0; line-height: 24px; }
  body.su-site #page-container #footer .vcard a.email { display: inline-block; padding: 2px 0; line-height: 22px; }
  body.su-site #page-container .socialmedia a { height: 24px; background-clip: content-box; }
  body.su-site #page-container #header .logo a { display: block; }
  /* 24px tap rows without changing how lines wrap: inline vertical padding (site map, month list, pager options, offer name,
     one-link paragraphs) */
  body.su-site #page-container .content li > a, body.su-site #page-container .panel li > a,
  body.su-site #page-container span.options a, body.su-site #page-container .special h4 a,
  body.su-site #page-container .content p > a:only-child:not(.button) { padding-top: 5px; padding-bottom: 5px; }
  body.su-site #page-container span.options a { padding-left: 4px; padding-right: 4px; }
  body.su-site #page-container .content td > a { padding-top: 5px; padding-bottom: 5px; }
  body.su-site #page-container a.tel-link { padding-top: 5px; padding-bottom: 5px; }

  /* link states (live's hover blues fail AA on the blue panels; the browser's own red :active fails on white) */
  :where(body.su-site #page-container) a:active { color: #b30000; }
  body.su-site #page-container .panel a:not(.more):hover, body.su-site #page-container .panel a:not(.more):focus,
  body.su-site #page-container .panel a:not(.more):active { color: #ffffff !important; text-decoration: underline; }
  body.su-site #page-container .special a:hover, body.su-site #page-container .special a:focus,
  body.su-site #page-container .special a:active { color: #ffffff; text-decoration: underline; }
  body.su-site #page-container .special a.button:hover, body.su-site #page-container .special a.button:focus,
  body.su-site #page-container .special a.button:active { text-decoration: none; }
  body.su-site #page-container .socialmedia a, body.su-site #page-container .socialmedia a:hover,
  body.su-site #page-container .socialmedia a:focus, body.su-site #page-container .socialmedia a:active { color: #ffffff; }
  /* the STAAH room field: the read-only input that opens the room picker, 24px tall */
  body.su-site #page-container #booking .Configure-quickBook-Widget .MbsSearchWidget .formGroup .input.inputRoom .d-flex input { padding: 2px 0 !important; line-height: 20px !important; }
}

/* ======================= 1170-1249: live's layout, rows that no longer fit ======================= */
/* The home welcome copy is shown in full from 1170 up (su-design.css section 16, Bryan's decision 7 Oct 2026). */
@media (min-width: 1170px) and (max-width: 1249px) {
  /* /apartments has no banner: the header's white phone number sits on live's navy fade over the white page, 4.2 to 4.5:1
     measured from pixels (Stage 3b). Below 1250 the fade is laid twice, so the number reads at AA (live's look from 1250). */
  body.su-site.page-id-1133 #page-container .featureoverlay-fade::after { content: ""; position: absolute; inset: 0; background: inherit; pointer-events: none; }
  /* home Book Direct panel: live's white 30px lines on the light pool photo measure 1.6 to 1.9:1; the same navy wash as the
     tablet and phone layouts (below) brings them to AA here too */
  body.su-site.su-home #page-container .content.bottom::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(2, 21, 87, 0.66), rgba(2, 21, 87, 0.48)); pointer-events: none; }
}

/* ======================= below 1170: tablet and phone reflow ======================= */
@media (max-width: 1169px) {
  body.su-site #page-container .container { width: auto; max-width: 1170px; margin: 0 auto; padding: 0 24px; }
  body.su-site #page-container #feature, body.su-site #page-container #footer, body.su-site #page-container .map-wrapper { min-width: 0; }

  /* header: out of the hero into a navy band; logo left, phone and RSS right, the free Wi-Fi / parking badges between */
  body.su-site #page-container #container-outer { overflow-x: clip; }
  body.su-site #page-container #header { position: relative; z-index: 9999; background: #021557; }
  body.su-site #page-container #header .container { display: flex; flex-wrap: wrap; align-items: center; column-gap: 20px; row-gap: 12px; margin: 0; padding: 14px 24px 0; }
  body.su-site #page-container #header .container > .clearboth { display: none; }
  body.su-site #page-container #header .logo { position: static; order: 1; flex: 0 0 auto; width: 156px; height: 109px; margin: 0; }
  body.su-site #page-container #header .logo img { display: block; width: 100%; height: auto; }
  body.su-site #page-container #header .left { order: 2; float: none; width: auto; flex: 1 1 auto; display: flex; flex-wrap: wrap; gap: 10px 16px; justify-content: center; }
  body.su-site #page-container #header .freewifi { margin: 0; }
  body.su-site #page-container #header .right { order: 3; float: none; width: auto; flex: 0 0 auto; display: flex; flex-direction: row-reverse; align-items: center; gap: 16px; }
  body.su-site #page-container #header .socialmedia { float: none; margin: 0; }
  body.su-site #page-container #header .tel { float: none; }
  body.su-site #page-container .ils-menu-toggle { order: 4; }
  body.su-site #page-container #menu { order: 5; flex: 1 1 100%; width: auto; margin: 0 -24px; }
  body.su-site #page-container #menu > ul { display: flex; flex-wrap: wrap; justify-content: center; }
  body.su-site #page-container #menu li { margin: 0; }
  body.su-site #page-container #menu li.alt { padding: 0; }
  body.su-site #page-container #menu a:link, body.su-site #page-container #menu a:visited, body.su-site #page-container #menu a:active { padding: 0 13px; }
  body.su-site #page-container #menu li li a:link, body.su-site #page-container #menu li li a:visited { padding: 6px 20px; }

  /* booking: a full-width navy block in the header band, title above the widget */
  body.su-site #page-container #header #booking { order: 6; flex: 1 1 100%; display: block; position: static; left: auto; width: auto; margin: 0 -24px; padding: 14px 24px 18px; }
  body.su-site #page-container #header #booking h3 { display: block; float: none; width: auto; margin: 0 0 8px; padding: 0; font-size: 20px; line-height: 28px; text-align: left; }
  body.su-site #page-container #header #booking .bookingform { width: auto; }
  body.su-site #page-container #header #booking .clearboth { display: none; }

  /* hero: shorter, no top fade (the header no longer sits on it) */
  body.su-site #page-container #feature, body.su-site #page-container .featureimage { height: 320px; }
  body.su-site #page-container .featuremain, body.su-site #page-container .featuremain li, body.su-site #page-container .featuremain img { height: 320px; }
  body.su-site.su-home #page-container #feature, body.su-site.su-home #page-container .featuremain, body.su-site.su-home #page-container .featuremain li, body.su-site.su-home #page-container .featuremain img { height: 440px; }
  body.su-site #page-container .featuremain img { width: 100%; object-fit: cover; }
  body.su-site #page-container .featureoverlay-fade { display: none; }
  /* /apartments has no banner at all on live: no empty band here either */
  body.su-site.page-id-1133 #page-container #feature { height: 0; }

  /* content */
  body.su-site #page-container .content { padding: 40px 0; }
  body.su-site #page-container .content .left { float: left; width: calc(100% - 330px); }
  body.su-site #page-container .content .right { float: right; width: 300px; }
  body.su-site #page-container .content img, body.su-site #page-container .content iframe { max-width: 100%; }
  body.su-site #page-container .content img { height: auto; }
  body.su-site #page-container .gallery { padding-bottom: 40px; }
  body.su-site #page-container .gallery:not(.room) { display: flex; flex-wrap: wrap; gap: 12px; }
  body.su-site #page-container .gallery:not(.room) > h3, body.su-site #page-container .gallery:not(.room) > a:not(.gallery-item) { flex: 1 1 100%; }
  body.su-site #page-container .gallery:not(.room) > .clearleft { display: none; }
  body.su-site #page-container .gallery:not(.room) a.gallery-item { flex: 0 0 calc((100% - 24px) / 3); }
  body.su-site #page-container .gallery:not(.room) img { float: none; width: 100%; height: auto; margin: 0; }

  /* home: welcome text in full (live keeps it in a 180px scroll box), offer panel, FAQ and Book Direct panels stacked */
  body.su-site.su-home #page-container .content.main { width: auto; max-width: 775px; height: auto; overflow: visible; margin: 48px auto 40px; }
  body.su-site.su-home #page-container .special { height: auto; margin: 0; display: flex; flex-direction: column; background: #19338a; }
  body.su-site.su-home #page-container .special .special-image { float: none; width: 100%; height: 360px; order: 1; }
  /* the video tile keeps live's 400 x 320 size, overlapping the photo on the right as on live */
  body.su-site.su-home #page-container .special .video { position: relative; top: auto; right: auto; order: 2; width: 400px; max-width: calc(100% - 58px); height: auto; aspect-ratio: 5 / 4; margin: -200px 24px 0 auto; }
  /* the offer keeps live's arrangement (title, offer name left, details, Book Now right), in the flow under the photo */
  body.su-site.su-home #page-container .special .text { position: relative; order: 3; left: auto; bottom: auto; width: auto; height: auto; margin: 0; padding: 28px 24px 32px; display: flow-root; }
  body.su-site.su-home #page-container .special h4 { height: auto; }
  body.su-site.su-home #page-container .special .clearleft { display: none; }
  /* FAQ photo and Book Direct panel side by side, as on live, at a fluid width */
  body.su-site.su-home #page-container .faq { float: left; width: 50%; height: 440px; }
  body.su-site.su-home #page-container .faqcontent { top: auto; bottom: calc(11.5vw + 20px); left: 24px; right: 0; width: auto; }
  body.su-site.su-home #page-container .content.bottom { float: right; width: 50%; height: 440px; padding: 56px 24px 0; box-sizing: border-box; }
  body.su-site.su-home #page-container .content.bottom::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(2, 21, 87, 0.66), rgba(2, 21, 87, 0.48)); pointer-events: none; }
  body.su-site.su-home #page-container .content.bottom p { margin: 0; }
  body.su-site.su-home #page-container .content.bottom p:last-child { margin-top: 20px; }
  body.su-site.su-home #page-container .blog-map .panel.blog { width: auto; padding: 40px 24px 48px; }
  body.su-site.su-home #page-container .blog-map .panel.blog ul { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 32px; }
  body.su-site.su-home #page-container .blog-map .panel.blog li { float: none; width: auto; margin: 0; }
  body.su-site.su-home #page-container .panel.blog li > .clearboth, body.su-site.su-home #page-container .panel.blog > .clearboth { display: none; }
  body.su-site.su-home #page-container .panel.blog img { float: none; display: block; max-width: calc(100% - 10px); margin: 0 0 12px; }

  /* apartments: each room is photo, then text and Book Now, then the thumbnails */
  body.su-site #page-container .list.rooms .entry { height: auto; display: flex; flex-direction: column; background-image: none !important; }
  body.su-site #page-container .list.rooms .photo { position: relative; top: auto; right: auto; bottom: auto; width: auto; height: 380px; background-size: cover; background-position: center; }
  body.su-site #page-container .list.rooms .text { float: none; width: auto; padding: 24px; }
  body.su-site #page-container .gallery.room { position: static; width: auto; padding: 16px 0 6px 16px; display: flex; flex-wrap: wrap; }
  body.su-site #page-container .gallery.room .thumb img { margin: 0 12px 12px 0; }

  /* maps */
  body.su-site #page-container .map-wrapper { float: none; width: auto; height: auto; padding-bottom: 40px; }
  /* the address box goes under the map here: laid over a narrower map it covered Google's attribution row (Keyboard
     shortcuts, Map data, Terms) at 390 and 768 (Stage 3b) */
  body.su-site #page-container .map-wrapper { display: flex; flex-direction: column; }
  body.su-site #page-container .map-wrapper .map-info { position: static; order: 2; align-self: center; transform: none; margin: 16px 0 0; }
  body.su-site #page-container .map-container { height: 420px; }

  /* footer: three columns become two, then one */
  body.su-site #page-container #footer { padding: 40px 0 32px; }
  body.su-site #page-container #footer .container { display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; row-gap: 28px; }
  body.su-site #page-container #footer .left, body.su-site #page-container #footer .mid, body.su-site #page-container #footer .right { float: none; width: auto; margin: 0; }
  body.su-site #page-container #footer .right { grid-column: 1 / -1; text-align: left; }
  body.su-site #page-container #footer .container > .clearboth { display: none; }
  body.su-site #page-container #footer .socialmedia { text-align: left; margin-bottom: 16px; }
  body.su-site #page-container .infomenu li { float: none; display: block; }
}

/* ======================= below 980: menu behind a button, sidebars under the content ======================= */
@media (max-width: 979px) {
  body.su-site #page-container .ils-menu-toggle { display: inline-flex; align-items: center; gap: 10px; height: 44px; margin: 0 0 0 auto; padding: 0 16px; border: 2px solid #ffffff; border-radius: 0; background: #021557; color: #ffffff;
    font: 400 16px/40px 'AdventorMedium', Arial, Helvetica, sans-serif; text-transform: uppercase; letter-spacing: 1px; cursor: pointer; }
  body.su-site #page-container .ils-menu-toggle:hover, body.su-site #page-container .ils-menu-toggle:focus, body.su-site #page-container .ils-menu-toggle:active,
  body.su-site #page-container #header.ils-menu-open .ils-menu-toggle { background: #ffffff; color: #021557; }
  body.su-site #page-container .ils-menu-toggle span, body.su-site #page-container .ils-menu-toggle span::before, body.su-site #page-container .ils-menu-toggle span::after { display: block; position: relative; width: 18px; height: 2px; background: currentColor; content: ""; }
  body.su-site #page-container .ils-menu-toggle span::before { position: absolute; top: -6px; }
  body.su-site #page-container .ils-menu-toggle span::after { position: absolute; top: 6px; }
  body.su-site #page-container #header .right { order: 2; }
  body.su-site #page-container #header .left { order: 7; flex: 1 1 100%; padding: 0 0 2px; justify-content: flex-start; }
  body.su-site #page-container #menu { display: none; }
  body.su-site #page-container #header.ils-menu-open #menu { display: block; }
  body.su-site #page-container #menu > ul { display: block; }
  body.su-site #page-container #menu li { display: block; border-top: 1px solid #e3e3e3; text-align: left; }
  body.su-site #page-container #menu a:link, body.su-site #page-container #menu a:visited, body.su-site #page-container #menu a:active { display: block; margin: 0; padding: 0 24px; line-height: 50px; font-size: 16px; }
  body.su-site #page-container #menu li ul { position: static; display: block; width: auto; padding: 0; background: none; }
  body.su-site #page-container #menu li li a:link, body.su-site #page-container #menu li li a:visited, body.su-site #page-container #menu li li a:active,
  body.su-site #page-container #menu li:hover ul a:link, body.su-site #page-container #menu li:hover ul a:visited { padding: 0 24px 0 44px; line-height: 46px; background: #ffffff; color: #555555; }
  body.su-site #page-container #menu li li a:hover, body.su-site #page-container #menu li li.active a:link, body.su-site #page-container #menu li li.active a:visited { background: #19338a; color: #ffffff; }
  body.su-site #page-container #menu li.alt { padding: 0; }
  body.su-site #page-container #menu li.alt a:link, body.su-site #page-container #menu li.alt a:visited { background: #6c6c6c; color: #ffffff; }
  body.su-site #page-container #menu li.alt a:hover, body.su-site #page-container #menu li.alt a:focus { background: #19338a; color: #ffffff; }

  body.su-site #page-container .content .left, body.su-site #page-container .content .right { float: none; width: auto; }
  body.su-site #page-container .content .right { margin-top: 32px; }
}

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

  /* header */
  body.su-site #page-container #header .container { padding: 12px 16px 0; column-gap: 12px; row-gap: 10px; }
  body.su-site #page-container #header .logo { width: 100px; height: 70px; }
  body.su-site #page-container #header .right { order: 7; flex: 1 1 100%; justify-content: space-between; flex-direction: row; }
  body.su-site #page-container #header .tel { font-size: 18px; line-height: 24px; padding-left: 30px; }
  body.su-site #page-container #header .left { order: 8; justify-content: flex-start; gap: 8px 10px; }
  body.su-site #page-container #menu { margin: 0 -16px; }
  body.su-site #page-container #menu a:link, body.su-site #page-container #menu a:visited, body.su-site #page-container #menu a:active { padding: 0 16px; }
  body.su-site #page-container #menu li li a:link, body.su-site #page-container #menu li li a:visited, body.su-site #page-container #menu li:hover ul a:link, body.su-site #page-container #menu li:hover ul a:visited { padding: 0 16px 0 36px; }
  body.su-site #page-container #header #booking { margin: 0 -16px; padding: 12px 16px 16px; }

  /* hero */
  body.su-site #page-container #feature, body.su-site #page-container .featureimage,
  body.su-site #page-container .featuremain, body.su-site #page-container .featuremain li, body.su-site #page-container .featuremain img { height: 200px; }
  body.su-site.su-home #page-container #feature, body.su-site.su-home #page-container .featuremain, body.su-site.su-home #page-container .featuremain li, body.su-site.su-home #page-container .featuremain img { height: 240px; }

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

  /* home */
  body.su-site.su-home #page-container .content.main { margin: 36px auto 24px; padding: 0 16px; }
  body.su-site.su-home #page-container .content.main h2 { font-size: 20px; }
  body.su-site.su-home #page-container .special .special-image { height: 220px; }
  body.su-site.su-home #page-container .special .video { width: calc(100% - 42px); max-width: none; margin: -60px auto 0; }
  body.su-site.su-home #page-container .special .text { padding: 24px 16px 28px; }
  body.su-site.su-home #page-container .special h3 { font-size: 22px; }
  body.su-site.su-home #page-container .special h4, body.su-site.su-home #page-container .special h4 a { float: none; width: auto; height: auto; margin: 0 0 12px; }
  body.su-site.su-home #page-container .special p { padding: 0; }
  body.su-site.su-home #page-container .special .button { position: static; display: block; text-align: center; padding: 0 16px; margin-top: 4px; }
  body.su-site.su-home #page-container .faq { float: none; width: 100%; height: 260px; }
  body.su-site.su-home #page-container .faqcontent { left: 0; bottom: 24px; }
  body.su-site.su-home #page-container .content.bottom { float: none; width: auto; height: auto; padding: 36px 16px calc(11.5vw + 28px); }
  body.su-site.su-home #page-container .faqcontent a { padding: 16px; font-size: 16px; }
  body.su-site.su-home #page-container .faqcontent a strong { font-size: 20px; line-height: 24px; }
  body.su-site.su-home #page-container .content.bottom p { margin: 0; font-size: 26px; line-height: 34px; }
  body.su-site.su-home #page-container .content.bottom .button { display: block; text-align: center; padding: 0 16px; }
  body.su-site.su-home #page-container .blog-map .panel.blog { padding: 32px 16px 36px; }
  body.su-site.su-home #page-container .blog-map .panel.blog ul { grid-template-columns: 1fr; row-gap: 28px; }

  /* inner pages */
  body.su-site #page-container .gallery:not(.room) { gap: 10px; }
  body.su-site #page-container .gallery:not(.room) a.gallery-item { flex: 0 0 calc((100% - 10px) / 2); }
  body.su-site #page-container .list.rooms .photo { height: 240px; }
  body.su-site #page-container .list.rooms .text { padding: 20px 16px; }
  body.su-site #page-container .list.rooms .text .button { display: block; text-align: center; padding: 0 16px; }
  body.su-site #page-container .gallery.room { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; padding: 12px 0 0 12px; }
  body.su-site #page-container .gallery.room .thumb { flex: 0 0 auto; scroll-snap-align: start; }
  body.su-site #page-container .content table:not(.form) { display: block; }
  body.su-site #page-container .content table:not(.form) tbody { display: block; }
  body.su-site #page-container .content table:not(.form) tr { display: grid; grid-template-columns: 84px minmax(0, 1fr); row-gap: 4px; margin-bottom: 6px; }
  body.su-site #page-container .content table:not(.form) td { display: block; width: auto !important; overflow-wrap: anywhere; }
  body.su-site #page-container .content td a { display: inline-block; padding: 2px 0; }
  body.su-site #page-container blockquote { padding-left: 50px; background-size: 36px auto; }
  body.su-site #page-container .map-container { height: 320px; }
  body.su-site #page-container .content .left .blog-image, body.su-site #page-container .entry .blog-image { float: none; margin: 0 0 14px; }
  body.su-site #page-container .paging { text-align: left; }

  /* search form */
  body.su-site #page-container table.form.searchpage, body.su-site #page-container table.form.searchpage tbody, body.su-site #page-container table.form.searchpage tr { display: block; width: auto; }
  body.su-site #page-container table.form.searchpage td { display: flex; gap: 8px; width: auto; padding: 0; }
  body.su-site #page-container .form.searchpage input { float: none; margin: 0; }
  body.su-site #page-container .form.searchpage input.clicknclear, body.su-site #page-container .form.searchpage input:not(.button) { flex: 1 1 auto; min-width: 0; width: auto; height: 48px; box-sizing: border-box; }
  body.su-site #page-container .form.searchpage input.button { flex: 0 0 auto; height: 48px; padding: 0 18px; }

  /* footer: one column */
  body.su-site #page-container #footer { padding: 32px 0 28px; }
  body.su-site #page-container #footer .container { grid-template-columns: 1fr; row-gap: 24px; }
  body.su-site #page-container .infomenu a { line-height: 36px; padding: 0; }
  body.su-site #page-container .footermenu li { display: inline-block; padding: 0 10px; }
  body.su-site #page-container .footermenu li:first-child { padding-left: 0; }
  body.su-site #page-container .footermenu a { line-height: 36px; padding: 0; }
}

/* ======================= forms below 1170: label over a full-width field ======================= */
@media (max-width: 1169px) {
  body.su-site #page-container .su-contact-form { max-width: 640px; }
  body.su-site #page-container .su-contact-form form.et_pb_contact_form { display: block; }
  body.su-site #page-container .su-contact-form .et_pb_contact_form_label { text-align: left; padding: 0; line-height: 24px; margin: 14px 0 6px; }
  body.su-site #page-container .su-contact-form p.et_pb_contact_field .input { width: 100%; height: 48px; margin: 0; }
  body.su-site #page-container .su-contact-form p.et_pb_contact_field textarea.input { width: 100%; height: 150px; min-height: 150px; margin: 0; }
  body.su-site #page-container .su-contact-form p.et_pb_contact_field:has(> [data-required_mark="required"]) > .et_pb_contact_form_label::after { position: static; display: inline-block; vertical-align: -2px; margin-left: 6px; }
  body.su-site #page-container .su-contact-form .et_contact_bottom_container, body.su-site #page-container .su-contact-form .et_pb_contact_right { display: block; width: auto; text-align: left; }
  body.su-site #page-container .su-contact-form .et_pb_contact_right p.clearfix { margin: 18px 0 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; column-gap: 8px; line-height: 48px; text-align: left; }
  body.su-site #page-container .su-contact-form .et_pb_contact_right p.clearfix::before { content: "Verification"; flex: 1 1 100%; display: block; visibility: visible; height: auto; font: 400 14px/24px 'AdventorBook', Arial, Helvetica, sans-serif; color: #333333; margin: 0 0 6px; }
  body.su-site #page-container .su-contact-form input.et_pb_contact_captcha { width: 90px; height: 48px; }
  body.su-site #page-container .et_pb_section .su-contact-form.et_pb_contact_form_container.et_pb_module .et_pb_button { display: block; width: 100%; height: 52px; margin: 22px 0 0 0; line-height: 50px !important; font-size: 16px !important; }
  body.su-site #page-container p.ils-required-note { margin: 8px 0 20px; text-align: left; }
  body.su-site #page-container p.ils-required-note em.required { display: inline-block; }
}

/* ======================= 768-979: STAAH bar columns (Stage 3b) ======================= */
/* The widget's own three equal columns left the 16px dates 7px from the arrow ("08-10-2026->09-10-2026"); the date pair gets
   a little more room here and the promo code a little less. */
@media (min-width: 768px) and (max-width: 979px) {
  body.su-site #page-container #booking .Configure-quickBook-Widget .MbsSearchWidget > .searchinOut.formGroup { flex: 0 0 auto !important; width: calc(36% - 10px) !important; }
  body.su-site #page-container #booking .Configure-quickBook-Widget .MbsSearchWidget > .formGroup:nth-child(2) { flex: 0 0 auto !important; width: calc(34% - 10px) !important; }
  body.su-site #page-container #booking .Configure-quickBook-Widget .MbsSearchWidget > .formGroup:nth-child(3) { flex: 0 0 auto !important; width: calc(30% - 10px) !important; }
}

/* =================== fix round 1 (3.18 findings, 2026-10-07) =================== */
/* OF1 keyboard focus below 1250. From 1250 up su-design.css hands the ring back to the browser, as live. Below 1250 every
   state is AA, so the ring is drawn in two colours (WCAG technique C40): a 2px white band against the element, then a 2px
   near-black ring outside it. Whatever the ground (white page, navy header band, blue offer panel, photos), one of the two
   differs from it by 3:1 or more. The STAAH widget removes the outline on its own fields with stronger rules, so inside the
   widget the ring is forced. */
@media (max-width: 1249px) {
  body.su-site :focus-visible { outline: 2px solid #101010; outline-offset: 2px; box-shadow: 0 0 0 2px #ffffff;
    -webkit-box-decoration-break: clone; box-decoration-break: clone; }
  body.su-site .Configure-quickBook-Widget :focus-visible,
  body.su-site .Configure-quickBook-Widget .MbsSearchWidget input:focus-visible { outline: 2px solid #101010 !important; outline-offset: 2px !important; box-shadow: 0 0 0 2px #ffffff !important; }
  /* the guest counters (- 2 +) and the room field with its toggle sit edge to edge: the next box painted over the right side
     of a focused box's ring */
  body.su-site .Configure-quickBook-Widget .inc-div > :is(button, input):focus-visible,
  body.su-site .Configure-quickBook-Widget .inputRoom .d-flex > input:focus-visible { position: relative; z-index: 2; }
  /* home FAQ panel link: its box runs to the edge of the FAQ photo, where the Book Direct panel beside it covers anything drawn
     outside it, so its ring is drawn inside the box: white on the panel's dark grey (9.7:1) */
  body.su-site #page-container .faqcontent a:focus-visible { outline: 2px solid #ffffff; outline-offset: -4px; box-shadow: none; }
  /* room thumbnail strips scroll sideways on a phone: Tab scrolled a thumbnail only to the strip's edge (and the strict snap
     then pulled it back to the nearest snap point, still half cut off), so its ring was cut off. The strip now keeps 8px
     clear at each edge and snaps only when a swipe ends close to a thumbnail (proximity), so Tab can bring the whole
     thumbnail and its ring into view. */
  body.su-site #page-container .gallery.room { scroll-padding-inline: 8px; scroll-snap-type: x proximity; }
  body.su-site #page-container .gallery.room .thumb, body.su-site #page-container .gallery.room .thumb a { scroll-margin-inline: 8px; }
  /* and the focused thumbnail may also snap by its END, so scrolling it into view is not pulled back to the strip's start */
  body.su-site #page-container .gallery.room .thumb:focus-within { scroll-snap-align: end; }
  /* the inline menu (980 to 1249): each item is a position:relative li, so the NEXT item painted over the right-hand side of a
     focused item's ring; the focused item's li goes on top. The header logo (absolutely placed from 1170) likewise sits
     under the menu bar, which hid the bottom of its ring. */
  body.su-site #page-container #menu li:focus-within { position: relative; z-index: 2; }
  body.su-site #page-container #header .logo:focus-within { z-index: 10000; }
  /* a link that holds only a picture (the Latest Blog thumbnails) often has no box of its own to draw round (an inline link
     round a block or floated picture; live: the same, nothing shows): the ring is also drawn round the picture itself */
  body.su-site #page-container a:has(> img:only-child):focus-visible > img { outline: 2px solid #101010; outline-offset: 2px; box-shadow: 0 0 0 2px #ffffff; }
}

/* OF4 layout shift below 1170. The STAAH widget renders after the page has loaded, into the booking block that the tablet and
   phone layouts put ABOVE the hero, so everything under it jumped down (348px on a phone: CLS 0.33 at 390, 0.13 at 768; live
   0.01). Its rendered height is fixed per band (measured on staging with the widget loaded, build/fix1/proof/before/
   widget_height-*.txt and proof/of4/widget_height-0000.txt: its own breakpoint at 576px, our column rule at 768 to 979, its
   fields wrapping below 1107px), so that height is reserved before it arrives. STAAH's own content varies the height by date
   (on a phone its "Add another Room" button, 41px, shows on some dates and not others; at 980 to 1106 its fields wrap on some
   dates), so the TALLER of the two is reserved: on the other dates the block keeps a little more space under Search instead of
   the page jumping. 1170 and up is untouched: there the bar sits over the hero, as on live. */
@media (max-width: 576px) { body.su-site #page-container #header #booking .bookingform { min-height: 389px; } }
@media (min-width: 577px) and (max-width: 767px) { body.su-site #page-container #header #booking .bookingform { min-height: 197px; } }
@media (min-width: 768px) and (max-width: 979px) { body.su-site #page-container #header #booking .bookingform { min-height: 148px; } }
@media (min-width: 980px) and (max-width: 1106px) { body.su-site #page-container #header #booking .bookingform { min-height: 167px; } }
@media (min-width: 1107px) and (max-width: 1169px) { body.su-site #page-container #header #booking .bookingform { min-height: 148px; } }

/* OF5 home offer, 768 to 1169. Live's offer floats the offer name left (205px) and lets the details flow beside it; once the
   panel is narrower than live's 710px the float ends after one line, so from about 850px "From Price:" sat in the middle
   column and its value under the offer name. A two-column grid keeps live's arrangement (title across, offer name left,
   every detail line in the middle column, Book Now right) at any width in the band. */
@media (min-width: 768px) and (max-width: 1169px) {
  body.su-site.su-home #page-container .special .text { display: grid; grid-template-columns: 205px minmax(0, 1fr); column-gap: 40px; align-content: start; }
  body.su-site.su-home #page-container .special .text > h3 { grid-column: 1 / -1; }
  body.su-site.su-home #page-container .special .text > h4 { grid-column: 1; grid-row: 2 / span 4; float: none; width: auto; height: auto; margin: 0; }
  body.su-site.su-home #page-container .special .text > h4 a { float: none; width: auto; height: auto; margin: 0; }
  body.su-site.su-home #page-container .special .text > p { grid-column: 2; }
}

/* OF6 and OF7: the open booking widget below 1250 (every state 14px and AA, fields 16px). */
@media (max-width: 1249px) {
  /* nightly rate under each calendar day: the widget draws it at 10px */
  body.su-site .Configure-quickBook-Widget .rdrDayNumber > div.room-rate { font-size: 14px !important; line-height: 18px !important; }
  /* the child age drop-down in the room picker: 16px (iOS zooms on a smaller field), a visible border and arrow so it reads as
     a control (the widget draws it borderless here, and live's own arrow image is white), and the required star at AA. The picker
     is .addRoom (a drop-down) from 577px and .add-aroom (laid out in the bar) below. */
  body.su-site .Configure-quickBook-Widget .MbsSearchWidget :is(.addRoom, .add-aroom) select { font-size: 16px !important; line-height: 22px !important; height: auto !important;
    min-height: 40px; padding: 8px 34px 8px 10px !important; border: 1px solid #767676 !important; border-radius: 4px !important; color: #212529 !important;
    background: #ffffff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23333333' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 12px center / 12px 8px !important;
    -webkit-appearance: none; appearance: none; }
  body.su-site .Configure-quickBook-Widget .MbsSearchWidget :is(.addRoom, .add-aroom) select option { font-size: 16px; }
  /* at 16px "Select Age" needs a 130px box; the widget gives each age box half a row (102 to 123px at 320 and 577 to 979, so it
     read "Select A"): each age box takes at least 132px and its row wraps (a second child's box goes under the first) */
  body.su-site .Configure-quickBook-Widget .MbsSearchWidget .selectrow:has(.selectWrapperInside) { flex-wrap: wrap !important; }
  body.su-site .Configure-quickBook-Widget .MbsSearchWidget .selectrow > div:has(> .selectWrapperInside) { flex: 1 1 132px !important; min-width: 132px !important; max-width: 100% !important; }
  body.su-site .Configure-quickBook-Widget .MbsSearchWidget :is(.addRoom, .add-aroom) select { width: 100% !important; }
  body.su-site .Configure-quickBook-Widget .starIcon { color: #b30000 !important; }
}

/* OF4 follow-up, below 1170: the STAAH script tag inside the booking block blocks the HTML parser, and the browser paints what
   it has while it waits. The badges (.left) and the phone and RSS row (.right) come BEFORE the booking block in the markup but
   are shown AFTER it in these layouts, so that first paint drew them straight under the logo and they jumped down when the
   booking block arrived. They stay invisible (their space is kept) until the hero, the next block after the header, has been
   parsed; by then the booking block is in place and they appear where they belong. */
@media (max-width: 1169px) {
  body.su-site #page-container #header:not(:has(+ #feature)) > .container > :is(.left, .right) { visibility: hidden; }
}

/* OF1, 1170 to 1249 (live's fixed layout): the page galleries' photo links are zero-height blocks above their floated photos
   (live's markup and CSS), so Tab scrolled to the empty link box and the focused photo itself could be off the screen, its
   ring nowhere in view (live does the same from 1250 up, which stays live's). Floating the link instead of only the photo
   makes the link wrap its photo: the same grid, and Tab now brings the photo and its ring into view. Below 1170 the
   galleries are already a flex grid of link boxes. */
@media (min-width: 1170px) and (max-width: 1249px) {
  body.su-site #page-container .gallery:not(.room) a.gallery-item { float: left; }
}

/* OF1, below 1170: in the room thumbnail rows the link is an empty inline box beside its floated picture (live's markup), so
   Tab scrolled a phone strip only far enough to show that empty box and the picture's ring stayed cut off at the strip's
   edge. The link now wraps its picture (the picture no longer floats inside it); the thumbnails keep their size and gaps. */
@media (max-width: 1169px) {
  body.su-site #page-container .gallery.room .thumb a { display: block; width: fit-content; }
  body.su-site #page-container .gallery.room .thumb img { float: none; }
}

/* OF1, the inline menu (980 to 1249): its items sit 2px apart and the current page's item is dark blue, so an outside ring lay
   on that neighbour's dark blue (1.4:1) on one side. Inside each item the ring is drawn as a 2px white band against the edge
   and a 2px near-black ring inside it: one of the two always contrasts, on a white item or on the dark blue current one. */
@media (min-width: 980px) and (max-width: 1249px) {
  body.su-site #page-container #menu > ul > li > a:focus-visible { outline: 2px solid #101010; outline-offset: -4px; box-shadow: inset 0 0 0 2px #ffffff; }
}