/* bbs-responsive.src.css - FAMILY B (Broadbeach Savannah) designed tablet + phone layer (Stage 4, 2026-10-08).
   Tokenised like kit ilaunch-responsive.template.css (body.bbs-site #page-container body.bbs-site.bbs-home #page-container body.bbs-site bbs, {X_PAGE_ID}); expanded with kit/expand_css_template.py
   (build/expand.sh) to theme/bbs-mobile.css, loaded LAST. Colours come from the palette in bbs-design.css (section 0).
   Family B markup (verified against this site's live HTML): #header (absolute over the hero, .logo absolute left,
   .right with .socialmedia rss, span.tel, #menu), #feature (.featuremain slidepark on home, .featureimage banner inside),
   .content > .container.main > .maintext / .maintextfull, home .content .left/.right + .special + .video + .midbanner
   (.map-wrapper + .faq) + .blog-wrapper .panel.blog, .list.rooms .entry (.main-photo, .roomtext, .images .gallery.room),
   #footer (.footermenu info links, .mid .vcard, .right .socialmedia .fmenu .copyright .footer-tags).
   Width bands (skill Rule 2): 1250+ live's exact look (nothing here applies); 1170-1249 live's layout, AA colours;
   768-1169 reflow ours; below 768 the phone design. NO booking bar on family B: booking is the nav BOOK NOW tab and the
   orange Book Online Now / room Book Now buttons to RMS Cloud. */

/* ==================== below 1250: AA in every state (live's own colours stay at 1250 and up) ==================== */
@media (max-width: 1249px) {
  /* live's headings are gold #ce9a63 on white (2.5:1): the darker gold below 1250 */
  body.bbs-site #page-container h1, body.bbs-site #page-container .maintext h1, body.bbs-site #page-container .panel.blog h3, body.bbs-site #page-container .gallery h3 { color: var(--ils-gold-text); }
  body.bbs-site #page-container h2 a:link, body.bbs-site #page-container h2 a:visited { color: var(--ils-gold-text); }
  /* site .button: burgundy rest is AA (10.4:1); live's hover is white on orange (2.2:1): dark text on orange instead */
  body.bbs-site #page-container input.button:hover, body.bbs-site #page-container input.button:focus, body.bbs-site #page-container input.button:active,
  body.bbs-site #page-container a.button:hover, body.bbs-site #page-container a.button:focus, body.bbs-site #page-container a.button:active,
  body #page-container .et_pb_section .bbs-contact-form.et_pb_contact_form_container.et_pb_module .et_pb_contact_submit.et_pb_button:hover,
  body #page-container .et_pb_section .bbs-contact-form.et_pb_contact_form_container.et_pb_module .et_pb_contact_submit.et_pb_button:focus,
  body #page-container .et_pb_section .bbs-contact-form.et_pb_contact_form_container.et_pb_module .et_pb_contact_submit.et_pb_button:active {
    color: var(--ils-on-gold) !important; background-color: var(--ils-gold) !important; }
  /* the home offer button is white on orange at rest (2.2:1): dark text at rest; burgundy + white in every active state */
  body.bbs-site #page-container .special a.button:link, body.bbs-site #page-container .special a.button:visited { color: var(--ils-on-gold) !important; background-color: var(--ils-gold); }
  body.bbs-site #page-container .special a.button:hover, body.bbs-site #page-container .special a.button:focus, body.bbs-site #page-container .special a.button:active { color: #ffffff !important; background-color: var(--ils-green) !important; }
  /* menu: the active/hover gold text on burgundy is 4.2:1 at 15px: live's tan instead (6.6:1) */
  body.bbs-site #page-container #menu li.active a:link, body.bbs-site #page-container #menu li.active a:visited, body.bbs-site #page-container #menu li.active a:active,
  body.bbs-site #page-container #menu li:hover a:link, body.bbs-site #page-container #menu li:hover a:visited, body.bbs-site #page-container #menu li:hover a:active, body.bbs-site #page-container #menu li:hover a:hover,
  body.bbs-site #page-container #menu a:focus { color: var(--ils-tan); }
  /* menu BOOK NOW: white on gold (2.5:1) -> dark text on gold; hover/focus white on dark burgundy */
  body.bbs-site #page-container #menu li.alt a:link, body.bbs-site #page-container #menu li.alt a:visited, body.bbs-site #page-container #menu li.alt a:active { color: var(--ils-on-gold); background-color: var(--ils-gold-aa); }
  body.bbs-site #page-container #menu li.alt:hover a:link, body.bbs-site #page-container #menu li.alt:hover a:visited, body.bbs-site #page-container #menu li.alt a:hover, body.bbs-site #page-container #menu li.alt a:focus, body.bbs-site #page-container #menu li.alt:hover a:hover { color: #ffffff; background-color: var(--ils-olive-dark); }
  /* the submenu (gold panel, white text 2.5:1): dark burgundy panel, white text; active/hover item white panel, burgundy text */
  body.bbs-site #page-container #menu li ul, body.bbs-site #page-container #menu li:hover ul a:link, body.bbs-site #page-container #menu li:hover ul a:visited, body.bbs-site #page-container #menu li:hover ul a:active { background-color: var(--ils-olive-dark); color: #ffffff; }
  body.bbs-site #page-container #menu li li:hover a:link, body.bbs-site #page-container #menu li li:hover a:visited, body.bbs-site #page-container #menu li li a:hover, body.bbs-site #page-container #menu li li a:focus, body.bbs-site #page-container #menu li li.active a:link, body.bbs-site #page-container #menu li li.active a:visited, body.bbs-site #page-container #menu li:hover li.active a { background-color: #ffffff; color: var(--ils-green); }
  /* read-more links: gold 11px on white -> darker gold, 14px */
  body.bbs-site #page-container a.more, body.bbs-site #page-container a.more:link, body.bbs-site #page-container a.more:visited { font-size: 14px; color: var(--ils-gold-text) !important; }
  body.bbs-site #page-container .panel.blog .date, body.bbs-site #page-container .panel .date, body.bbs-site #page-container .details, body.bbs-site #page-container .entry .details { font-size: 14px; color: #595959; }
  body.bbs-site #page-container .paging, body.bbs-site #page-container .paging a:link, body.bbs-site #page-container .paging a:visited { font-size: 14px; color: #595959; }
  body.bbs-site #page-container .paging a:hover, body.bbs-site #page-container .paging a:focus, body.bbs-site #page-container .paging a:active, body.bbs-site #page-container .paging em { color: #ffffff; background-color: #6d6d6d; }
  body.bbs-site #page-container div.top { font-size: 14px; }
  body.bbs-site #page-container div.top a:link, body.bbs-site #page-container div.top a:visited { color: #666666; }
  body.bbs-site #page-container div.top a:hover, body.bbs-site #page-container div.top a:focus, body.bbs-site #page-container div.top a:active { color: #ffffff; background: #6d6d6d; }
  body.bbs-site #page-container .footer-tags p, body.bbs-site #page-container .footer-tags a, body.bbs-site #page-container #footer .fmenu li a, body.bbs-site #page-container .copyright { font-size: 14px; }
  /* 16px inputs (no zoom on focus) */
  body.bbs-site #page-container .bbs-contact-form .et_pb_contact_field.et_pb_contact_field > .input, body.bbs-site #page-container .bbs-contact-form input.et_pb_contact_captcha, body.bbs-site #page-container #content .form.searchpage input, body.bbs-site #page-container .form.searchpage input, body.bbs-site #page-container input[type=text], body.bbs-site #page-container textarea, body.bbs-site #page-container select { font-size: 16px; }
  /* the form's 11px "Required fields" note */
  body.bbs-site #page-container .bbs-contact-form form.et_pb_contact_form::after { font-size: 14px; }
}

/* ==================== below 1250: the 1170px live form no longer fits; label and field pairs ==================== */
@media (max-width: 1249px) {
  body.bbs-site #page-container .bbs-contact-form form.et_pb_contact_form { display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; row-gap: 12px; }
  body.bbs-site #page-container .bbs-contact-form .et_pb_contact, body.bbs-site #page-container .bbs-contact-form .et_contact_bottom_container, body.bbs-site #page-container .bbs-contact-form .et_pb_contact_right { display: contents; }
  body.bbs-site #page-container .bbs-contact-form p.et_pb_contact_field { display: block; padding-right: 20px; background-position: right 34px; }
  body.bbs-site #page-container .bbs-contact-form .et_pb_contact_form_label { text-align: left; padding: 0; line-height: 28px; }
  body.bbs-site #page-container .bbs-contact-form .et_pb_contact_field input.input { width: 100%; height: 44px; margin: 0; }
  body.bbs-site #page-container .bbs-contact-form .et_pb_contact_field.et_pb_contact_field_3 { grid-column: 1 / -1; }
  body.bbs-site #page-container .bbs-contact-form .et_pb_contact_field textarea.input { width: 100%; height: 140px; margin: 0; }
  body.bbs-site #page-container .bbs-contact-form .et_pb_contact_right p.clearfix { grid-column: 1 / -1; display: block; padding: 0; }
  body.bbs-site #page-container .bbs-contact-form .et_pb_contact_right p.clearfix::before { position: static; width: auto; display: block; margin: 0; padding: 0; text-align: left; line-height: 28px; }
  body.bbs-site #page-container .bbs-contact-form .et_pb_contact_captcha_question { padding-left: 0; }
  body.bbs-site #page-container .bbs-contact-form input.et_pb_contact_captcha { height: 44px; width: 90px; }
  body #page-container .et_pb_section .bbs-contact-form.et_pb_contact_form_container.et_pb_module .et_pb_contact_submit { grid-column: 1 / -1; justify-self: start; margin: 4px 0 0 !important; }
  body.bbs-site #page-container .bbs-contact-form form.et_pb_contact_form::after { grid-column: 1 / -1; justify-self: start; margin: -4px 0 0; }
}

/* ==================== below 1170: tablet and phone share the reflow ==================== */
@media (max-width: 1169px) {
  /* every fixed 1170px box takes the screen width */
  body.bbs-site #page-container .container, body.bbs-site.bbs-home #page-container .content .container .maintext, body.bbs-site.bbs-home #page-container .panel.blog, body.bbs-site #page-container .list.rooms { width: auto; }
  body.bbs-site #page-container #container-outer { overflow-x: hidden; }

  /* header: out of the hero into the flow, solid burgundy, logo left, phone and RSS right, menu row below */
  body.bbs-site #page-container #header { position: relative; min-height: 0; background: var(--ils-green); }
  body.bbs-site #page-container #header .container { display: flex; flex-wrap: wrap; align-items: center; column-gap: 20px; row-gap: 0; min-height: 0; padding: 0 24px; }
  body.bbs-site #page-container #header .container::before, body.bbs-site #page-container #header .container::after, body.bbs-site #page-container #header .container > .clearboth { display: none; }
  body.bbs-site #page-container #header #left { flex: 0 0 auto; }
  body.bbs-site #page-container #header .logo { position: static; width: auto; padding: 8px 0; background: none; }
  body.bbs-site #page-container #header .logo::after { display: none; }
  body.bbs-site #page-container #header .logo img { margin: 0; width: 174px; height: auto; }
  body.bbs-site #page-container #header .container .right { flex: 1 1 0; width: auto; margin: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; column-gap: 20px; }
  body.bbs-site #page-container #header .right > .clearboth { display: none; }
  body.bbs-site #page-container #header .tel { float: none; order: 1; }
  body.bbs-site #page-container #header .socialmedia { float: none; order: 2; margin: 0; }
  body.bbs-site #page-container #menu { order: 10; float: none; display: block; flex: 1 1 100%; margin: 6px 0 0; text-align: right; }
  body.bbs-site #page-container #menu > ul > li { margin: 0 12px; }
  body.bbs-site #page-container #menu > ul > li.alt { margin: 0 0 0 6px; padding: 0; }
  body.bbs-site #page-container .ils-menu-toggle { display: none; }

  /* hero */
  body.bbs-site #page-container #feature, body.bbs-site #page-container .featureimage { height: 340px; }
  body.bbs-site.bbs-home #page-container #feature, body.bbs-site.bbs-home #page-container .featuremain { height: 460px; }

  /* inner content */
  body.bbs-site #page-container .container.main { padding: 50px 24px 30px; }
  body.bbs-site #page-container .content img, body.bbs-site #page-container .content iframe, body.bbs-site #page-container .content video { max-width: 100%; }
  body.bbs-site #page-container .content img { height: auto; }
  body.bbs-site #page-container .content table { max-width: 100%; }
  body.bbs-site #page-container .container .left, body.bbs-site #page-container .container .right, body.bbs-site #page-container .content .left, body.bbs-site #page-container .content .right { width: auto; }
  body.bbs-site #page-container .content.bottom { margin: 40px 0; }
  body.bbs-site #page-container .content.bottom > .container { padding: 0 24px; }

  /* home: two text columns, then the offer, video, map + FAQ, blog */
  body.bbs-site.bbs-home #page-container .content { padding: 50px 0 300px; }
  body.bbs-site.bbs-home #page-container .content .container { padding: 0 24px; }
  body.bbs-site.bbs-home #page-container .content .container .left, body.bbs-site.bbs-home #page-container .content .container .right { width: calc(50% - 12px); padding: 0; }
  body.bbs-site.bbs-home #page-container .special { height: auto; min-height: 420px; }
  body.bbs-site.bbs-home #page-container .special .special-image { width: calc(100% - 340px); }
  body.bbs-site.bbs-home #page-container .special .container { padding: 0 24px; }
  body.bbs-site.bbs-home #page-container .special .text { position: relative; top: auto; padding: 50px 0; width: 270px; }
  body.bbs-site.bbs-home #page-container .video { height: 420px; }
  body.bbs-site.bbs-home #page-container .faq { width: 380px; }
  body.bbs-site.bbs-home #page-container .panel.blog { padding: 0 24px 40px; }
  body.bbs-site.bbs-home #page-container .panel.blog ul { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 24px; }
  body.bbs-site.bbs-home #page-container .panel.blog ul::before, body.bbs-site.bbs-home #page-container .panel.blog ul::after { display: none; }
  body.bbs-site.bbs-home #page-container .panel.blog li { float: none; width: auto; margin: 0; }
  body.bbs-site.bbs-home #page-container .panel.blog .blog-image { width: 100%; height: auto; aspect-ratio: 370 / 205; background-size: cover; }
  body.bbs-site.bbs-home #page-container .panel.blog .blog-image a { width: 100%; height: 100%; }
  body.bbs-site.bbs-home #page-container .blog-wrapper { float: none; }

  /* apartments: photo full width with the text panel over its right side, thumbnails wrap */
  body.bbs-site #page-container .list.rooms .entry { margin: 0 0 60px; }
  body.bbs-site #page-container .list.rooms .entry .roomtext { width: 310px; }
  body.bbs-site #page-container .list .entry .images { width: 100%; }
  body.bbs-site #page-container .gallery.room { float: none; display: flex; flex-wrap: wrap; gap: 10px; }
  body.bbs-site #page-container .gallery.room img, body.bbs-site #page-container .gallery.room a.overlay-youtube, body.bbs-site #page-container .gallery.room a:nth-child(4n) img, body.bbs-site #page-container .gallery.room a:nth-child(4n) { margin: 0; }
  body.bbs-site #page-container .gallery.room a { display: block; }

  /* image galleries (facilities etc.) */
  body.bbs-site #page-container .gallery:not(.room) img { max-width: 100%; height: auto; }

  /* blog list, posts and sidebar */
  body.bbs-site #page-container .content .container > .left, body.bbs-site #page-container .content .container > .right { float: none; width: auto; }
  body.bbs-site #page-container .content .container > .right { margin-top: 30px; }

  /* footer */
  body.bbs-site #page-container #footer .container { padding: 0 24px; }
  body.bbs-site #page-container #footer .container .mid { float: none; width: auto; }
  body.bbs-site #page-container #footer .container .right { float: none; width: auto; text-align: left; margin-top: 24px; }
  body.bbs-site #page-container .vcard { float: none; width: auto; }
  body.bbs-site #page-container #footer .fmenu, body.bbs-site #page-container .copyright { float: none; display: block; text-align: left; }
  body.bbs-site #page-container #footer .socialmedia { float: none; }
  body.bbs-site #page-container .footermenu { display: block; }
}

/* ==================== below 980: menu behind a button ==================== */
@media (max-width: 979px) {
  body.bbs-site #page-container #header .container { padding: 0 20px 0 20px; }
  body.bbs-site #page-container .ils-menu-toggle { display: inline-flex; order: 3; align-items: center; gap: 8px; height: 44px; padding: 0 14px; margin: 0; border: 1px solid rgba(255, 255, 255, 0.45); border-radius: 0;
    background: var(--ils-green); color: #ffffff; font: 700 15px/44px 'Lato', Arial, Helvetica, sans-serif; text-transform: uppercase; letter-spacing: 1px; cursor: pointer; }
  body.bbs-site #page-container .ils-menu-toggle span, body.bbs-site #page-container .ils-menu-toggle span::before, body.bbs-site #page-container .ils-menu-toggle span::after { display: block; position: relative; width: 18px; height: 2px; background: #ffffff; content: ""; }
  body.bbs-site #page-container .ils-menu-toggle span::before { position: absolute; top: -6px; }
  body.bbs-site #page-container .ils-menu-toggle span::after { position: absolute; top: 6px; }
  body.bbs-site #page-container .ils-menu-toggle:hover, body.bbs-site #page-container .ils-menu-toggle:focus, body.bbs-site #page-container .ils-menu-toggle:active { background: var(--ils-olive-dark); color: #ffffff; }
  body.bbs-site #page-container #menu { display: none; margin: 8px -20px 0; text-align: left; line-height: 50px; border-top: 1px solid rgba(255, 255, 255, 0.25); }
  body.bbs-site #page-container #header.ils-menu-open #menu { display: block; }
  body.bbs-site #page-container #menu ul { display: block; }
  body.bbs-site #page-container #menu > ul > li, body.bbs-site #page-container #menu > ul > li.alt { display: block; margin: 0; padding: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.2); }
  body.bbs-site #page-container #menu a:link, body.bbs-site #page-container #menu a:visited, body.bbs-site #page-container #menu a:active, body.bbs-site #page-container #menu li:hover a:link, body.bbs-site #page-container #menu li:hover a:visited,
  body.bbs-site #page-container #menu li.active a:link, body.bbs-site #page-container #menu li.active a:visited { display: block; padding: 0 20px; line-height: 50px; font-size: 16px; border-top: 0; }
  body.bbs-site #page-container #menu li.active > a:link, body.bbs-site #page-container #menu li.active > a:visited { background-color: var(--ils-olive-dark); }
  body.bbs-site #page-container #menu li ul { position: static; display: block; width: auto; padding: 0; background: none; }
  body.bbs-site #page-container #menu li li { border-top: 1px solid rgba(255, 255, 255, 0.12); }
  body.bbs-site #page-container #menu li ul a:link, body.bbs-site #page-container #menu li ul a:visited, body.bbs-site #page-container #menu li ul a:active,
  body.bbs-site #page-container #menu li:hover ul a:link, body.bbs-site #page-container #menu li:hover ul a:visited { padding: 0 20px 0 40px; line-height: 46px; font-size: 15px; background: none; color: #ffffff; }
  body.bbs-site #page-container #menu li li.active a:link, body.bbs-site #page-container #menu li li.active a:visited, body.bbs-site #page-container #menu li:hover li.active a { background-color: #ffffff; color: var(--ils-green); }
  body.bbs-site #page-container #menu li.alt a:link, body.bbs-site #page-container #menu li.alt a:visited { padding: 0 20px; }
}

/* ==================== phone: below 768 ==================== */
@media (max-width: 767px) {
  body.bbs-site #page-container #header .container { padding: 0 16px; column-gap: 12px; }
  body.bbs-site #page-container #header .logo { padding: 8px 0; }
  body.bbs-site #page-container #header .logo img { width: 120px; }
  body.bbs-site #page-container #header .container .right { column-gap: 12px; row-gap: 8px; }
  body.bbs-site #page-container #header .tel { font-size: 18px; padding-left: 28px; background-size: 22px auto; }
  body.bbs-site #page-container #header .socialmedia { display: none; }
  body.bbs-site #page-container #menu { margin: 8px -16px 0; }

  /* hero */
  body.bbs-site #page-container #feature, body.bbs-site #page-container .featureimage { height: 220px; }
  body.bbs-site.bbs-home #page-container #feature, body.bbs-site.bbs-home #page-container .featuremain { height: 300px; }

  /* type */
  body.bbs-site #page-container h1, body.bbs-site #page-container .maintext h1 { font-size: 26px; line-height: 32px; letter-spacing: 2px; }
  body.bbs-site.bbs-home #page-container .maintext h1 { letter-spacing: 3px; }
  body.bbs-site #page-container h2 { font-size: 22px; line-height: 28px; }
  body.bbs-site #page-container .content p, body.bbs-site #page-container .content li, body.bbs-site #page-container .content td { font-size: 16px; line-height: 24px; }
  /* 3.18 fix round 3 (N7): posts render in #main-content .entry .summary, not .content, so the kit rule never reached them */
  body.bbs-site #page-container .content [style*="justify"], body.bbs-site #page-container #main-content [style*="justify"] { text-align: left !important; }
  body.bbs-site #page-container .container.main { padding: 32px 16px 24px; }
  body.bbs-site #page-container .content.bottom > .container { padding: 0 16px; }
  body.bbs-site #page-container .content table, body.bbs-site #page-container .content tbody, body.bbs-site #page-container .content tr { max-width: 100%; }
  body.bbs-site #page-container .content td[width] { width: auto; }

  /* home */
  body.bbs-site.bbs-home #page-container .content { padding: 32px 0 220px; }
  body.bbs-site.bbs-home #page-container .content::before { height: 300px; }
  body.bbs-site.bbs-home #page-container .content .container { padding: 0 16px; }
  body.bbs-site.bbs-home #page-container .content .container .left, body.bbs-site.bbs-home #page-container .content .container .right { float: none; width: auto; }
  body.bbs-site.bbs-home #page-container .content .left > *, body.bbs-site.bbs-home #page-container .content .right > *, body.bbs-site.bbs-home #page-container .container.main p, body.bbs-site.bbs-home #page-container .content p { font-size: 16px !important; line-height: 24px; }
  body.bbs-site.bbs-home #page-container .special { min-height: 0; }
  body.bbs-site.bbs-home #page-container .special .special-image { position: relative; display: block; width: 100%; height: 220px; }
  body.bbs-site.bbs-home #page-container .special .container { padding: 0 16px; }
  body.bbs-site.bbs-home #page-container .special .text { width: auto; padding: 28px 0 32px; }
  body.bbs-site.bbs-home #page-container .special h3 { font-size: 22px; margin-bottom: 18px; }
  body.bbs-site.bbs-home #page-container .special p { font-size: 14px; line-height: 20px; }
  body.bbs-site.bbs-home #page-container .special .button { width: 100%; max-width: 360px; height: 56px; line-height: 56px; }
  body.bbs-site.bbs-home #page-container .video { height: 240px; background-position: center; }
  body.bbs-site.bbs-home #page-container .midbanner { height: auto; display: flex; flex-direction: column; }
  body.bbs-site.bbs-home #page-container .map-wrapper { float: none; height: 240px; }
  body.bbs-site.bbs-home #page-container .faq { position: relative; top: auto; right: auto; width: auto; height: auto; }
  body.bbs-site.bbs-home #page-container .faq a { padding: 24px 16px; font-size: 15px; }
  body.bbs-site.bbs-home #page-container .faq a strong { font-size: 30px; line-height: 34px; }
  body.bbs-site.bbs-home #page-container .panel.blog { padding: 0 16px 32px; }
  body.bbs-site.bbs-home #page-container .panel.blog h3 { margin: 40px 0 20px; font-size: 26px; }
  body.bbs-site.bbs-home #page-container .panel.blog ul { grid-template-columns: 1fr; row-gap: 28px; }
  body.bbs-site.bbs-home #page-container .panel.blog .blog-image { margin-bottom: 12px; }
  body.bbs-site.bbs-home #page-container .panel.blog .title a { font-size: 18px; line-height: 24px; }
  body.bbs-site.bbs-home #page-container .panel.blog .summary { font-size: 15px; line-height: 22px; }
  body.bbs-site.bbs-home #page-container .panel.blog a.more { display: inline-block; padding: 10px 14px 10px 0; }

  /* apartments: photo on top (a fixed-height band), text below it, then thumbnails */
  body.bbs-site #page-container .list.rooms .entry { display: flex; flex-direction: column; margin: 0 0 40px; }
  body.bbs-site #page-container .list.rooms .entry .main-photo { position: relative; top: auto; bottom: auto; height: 240px; order: 1; }
  body.bbs-site #page-container .list.rooms .entry .main-photo p { right: 0; }
  body.bbs-site #page-container .list.rooms .entry .roomtext { float: none; order: 2; width: auto; padding: 24px 16px; background: var(--ils-green); }
  body.bbs-site #page-container .list.rooms .entry h2 { font-size: 22px; line-height: 28px; }
  body.bbs-site #page-container .list.rooms .entry, body.bbs-site #page-container .list.rooms .entry p, body.bbs-site #page-container .list.rooms .entry li { font-size: 16px; line-height: 24px; }
  body.bbs-site #page-container .list.rooms .entry .images { margin-top: 16px; }
  body.bbs-site #page-container .gallery.room { gap: 8px; }
  body.bbs-site #page-container .gallery.room img { width: 72px; height: auto; aspect-ratio: 64 / 49; }
  /* (Stage 6 F2: the 64x49 thumbnails carry no width/height attributes, so before each one loads its link is 6px tall;
     Lighthouse target-size failed on /apartments mobile. The ratio reserves the tap area before the image arrives) */
  body.bbs-site #page-container .list.rooms .entry > .clearboth { display: none; }

  /* blog list, posts and sidebar */
  body.bbs-site #page-container .blog-image, body.bbs-site #page-container .list .entry .blog-image { float: none; display: block; margin: 0 0 14px; max-width: 100%; height: auto; }
  body.bbs-site #page-container .panel li { margin: 18px 0; }
  body.bbs-site #page-container .panel .title a, body.bbs-site #page-container .panel li > a { display: inline-block; padding: 6px 0; }
  body.bbs-site #page-container .paging a:link, body.bbs-site #page-container .paging a:visited, body.bbs-site #page-container .paging em { display: inline-block; min-width: 32px; line-height: 32px; text-align: center; padding: 0 8px; }
  body.bbs-site #page-container .paging .options { display: block; margin: 8px 0; }
  body.bbs-site #page-container #content p > a:only-child:not(.button), body.bbs-site #page-container .content p > a:only-child:not(.button) { display: inline-block; padding: 6px 0; }
  body.bbs-site #page-container .content td a:not(.button) { display: inline-block; padding: 4px 0; }

  /* forms: one column */
  body.bbs-site #page-container .bbs-contact-form form.et_pb_contact_form { grid-template-columns: 1fr; }
  body #page-container .et_pb_section .bbs-contact-form.et_pb_contact_form_container.et_pb_module .et_pb_contact_submit { justify-self: stretch; width: 100%; height: 54px; }
  body.bbs-site #page-container .form.searchpage, body.bbs-site #page-container .form.searchpage tbody, body.bbs-site #page-container .form.searchpage tr, body.bbs-site #page-container .form.searchpage td { display: block; width: auto; }
  body.bbs-site #page-container .form.searchpage td { display: flex; gap: 8px; }
  body.bbs-site #page-container .form.searchpage input { float: none; flex: 1 1 auto; width: auto; min-width: 0; height: 48px; margin: 0; }
  body.bbs-site #page-container .form.searchpage input.button { flex: 0 0 auto; }

  /* footer */
  body.bbs-site #page-container #footer { padding: 32px 0; font-size: 14px; }
  body.bbs-site #page-container #footer .container { padding: 0 16px; }
  body.bbs-site #page-container .footermenu { text-align: left; margin-bottom: 24px; }
  body.bbs-site #page-container .footermenu li, body.bbs-site #page-container .footermenu li:first-child { display: block !important; background: none; }
  body.bbs-site #page-container #footer .footermenu a { display: inline-block; padding: 8px 0; font-size: 15px; }
  body.bbs-site #page-container .vcard { padding: 104px 0 0; }
  body.bbs-site #page-container .vcard li { font-size: 15px; line-height: 24px; }
  body.bbs-site #page-container #footer .vcard a.email { display: inline-block; padding: 4px 0; }
  body.bbs-site #page-container #footer .fmenu li { display: inline-block; padding: 0 10px 0 0; background: none; }
  body.bbs-site #page-container #footer .fmenu li a { line-height: 40px; height: auto; font-size: 14px; }
  body.bbs-site #page-container .footer-tags { display: block; margin-top: 8px; }
  body.bbs-site #page-container .footer-tags a { display: inline-block; line-height: 32px; }
  body.bbs-site #page-container #footer .socialmedia { margin-bottom: 8px; }
}

/* ==================== round 2 (2026-10-08, from the 390 renders) ==================== */
@media (max-width: 1249px) {
  /* every gold heading (live's h1, h2, h3 and h5 default) darker; context rules that set white or #333 still win */
  body.bbs-site #page-container h1, body.bbs-site #page-container h2, body.bbs-site #page-container h3, body.bbs-site #page-container h5 { color: var(--ils-gold-text); }
  /* the home offer panel: white text on gold is 2.5:1, so the panel takes the darker gold (white 5.3:1) */
  body.bbs-site.bbs-home #page-container .special { background-color: var(--ils-gold-text); }
  /* apartments: the room text panel is white on 90% gold (2.5:1): burgundy panel; the room Book Now becomes the orange
     button with dark text so it stands out from the panel; every active state white on dark burgundy */
  body.bbs-site #page-container .list.rooms .entry .roomtext { background: rgba(131, 9, 20, 0.94); }
  body.bbs-site #page-container .list.rooms .button.roombooking, body.bbs-site #page-container .list.rooms a.button.roombooking:link, body.bbs-site #page-container .list.rooms a.button.roombooking:visited { color: var(--ils-on-gold) !important; background-color: var(--ils-gold); }
  body.bbs-site #page-container .list.rooms a.button.roombooking:hover, body.bbs-site #page-container .list.rooms a.button.roombooking:focus, body.bbs-site #page-container .list.rooms a.button.roombooking:active { color: #ffffff !important; background-color: var(--ils-olive-dark) !important; }
}
@media (max-width: 1169px) {
  /* blog list, posts, galleries: these .container blocks sit outside .container.main and had no side gutter */
  body.bbs-site #page-container .content-bottom ~ .container, body.bbs-site #page-container .content.bottom > .container, body.bbs-site #page-container .gallery > .container { padding-left: 24px; padding-right: 24px; }
  body.bbs-site #page-container .right.sidemenu { width: auto; padding: 0; margin-left: 0; }
  /* image galleries: a grid, the heading across the top, live's empty anchor targets kept but out of the grid */
  body.bbs-site #page-container .gallery:not(.room) > .container { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
  body.bbs-site #page-container .gallery:not(.room) > .container > h3, body.bbs-site #page-container .gallery:not(.room) > .container > h2 { grid-column: 1 / -1; }
  body.bbs-site #page-container .gallery:not(.room) > .container > a:not(.gallery-item) { position: absolute; }
  body.bbs-site #page-container .gallery:not(.room) > .container > .clearleft, body.bbs-site #page-container .gallery:not(.room) > .container > .clearboth { display: none; }
  body.bbs-site #page-container .gallery:not(.room) a.gallery-item { display: block; }
  body.bbs-site #page-container .gallery:not(.room) img { float: none; width: 100%; height: auto; margin: 0; }
}
@media (max-width: 767px) {
  body.bbs-site #page-container .content-bottom ~ .container, body.bbs-site #page-container .content.bottom > .container, body.bbs-site #page-container .gallery > .container { padding-left: 16px; padding-right: 16px; }
  body.bbs-site #page-container .gallery:not(.room) > .container { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  /* contact details table: a gap between label and value, links on the text line */
  body.bbs-site #page-container .content table td { padding-right: 8px; vertical-align: baseline; }
  body.bbs-site #page-container .content table td a[href^="mailto"] { display: inline; padding: 0; }
}

/* ==================== round 3 (2026-10-08, mobile_audit.js 390 findings) ==================== */
@media (max-width: 1249px) {
  /* tap targets: phone numbers, the RSS icon (sprite kept to its 24x23 content box), Back to top, pager options */
  body.bbs-site #page-container a.tel-link { display: inline-block; padding: 3px 0; }
  body.bbs-site #page-container .socialmedia a.rss { padding: 1px 0; background-origin: content-box; background-clip: content-box; }
  body.bbs-site #page-container div.top a { display: inline-block; padding: 2px 10px; }
  body.bbs-site #page-container span.options a, body.bbs-site #page-container span.options a.label { display: inline-block; min-width: 32px; padding: 4px 4px; text-align: center; }
  body.bbs-site #page-container a.more { padding-top: 3px; padding-bottom: 3px; }
  /* live's inline gold text spans (e.g. the location page's "Check In Instructions") */
  body.bbs-site #page-container [style*="#ce9a63"], body.bbs-site #page-container [style*="#CE9A63"], body.bbs-site #page-container [style*="206, 154, 99"] { color: var(--ils-gold-text) !important; }
  /* blog sidebar: 13px teaser text, archive links, 10-13px tag cloud and FAQ counts up to the 14px floor */
  body.bbs-site #page-container .panel.blog .summary, body.bbs-site #page-container .panel ul.archive a, body.bbs-site #page-container .panel ul.archive li, body.bbs-site #page-container .faqs .details, body.bbs-site #page-container .details { font-size: 14px; }
  body.bbs-site #page-container .panel .text a { display: inline-block; padding: 3px 0; }
  body.bbs-site #page-container .panel .text a:is([style*="font-size: 8px"], [style*="font-size: 9px"], [style*="font-size: 10px"], [style*="font-size: 11px"], [style*="font-size: 12px"], [style*="font-size: 13px"]) { font-size: 14px !important; }
  body.bbs-site #page-container .site-map li a, body.bbs-site #page-container #main-content li > a { padding-top: 3px; padding-bottom: 3px; }
  /* long URLs written into post text wrap instead of pushing the page sideways */
  body.bbs-site #page-container #main-content p, body.bbs-site #page-container #main-content li, body.bbs-site #page-container #main-content td { overflow-wrap: break-word; }
  /* (break-word, not anywhere: anywhere lets a table shrink its label column to one letter, "Phon / e:" in WebKit) */
  body.bbs-site #page-container #main-content table td:first-child { white-space: nowrap; }
  body.bbs-site #page-container #main-content p > a:only-child:not(.button):not(.tel-link) { display: inline-block; padding: 3px 0; }
  body.bbs-site #page-container #main-content td a:not(.button):not(.tel-link) { display: inline-block; padding: 3px 0; }
  /* Stage 6 F1: the home FAQ banner link is live's block with a 30px inset; the tap-area rule above out-specified it and
     put the text flush against the box's left edge (the screen edge on phones) at every width below 1250 */
  body.bbs-site.bbs-home #page-container #main-content .faq p > a:only-child { display: block; padding: 30px; }
  /* the WordPress 404 page's search block: AA button, 16px input */
  body.bbs-site .wp-block-search__button { color: #ffffff; background: var(--ils-green); border-color: var(--ils-green); }
  body.bbs-site .wp-block-search__input { font-size: 16px !important; }
}
@media (max-width: 767px) {
  /* Stage 6 F1, phones: the banner's designed 24px 16px inset (bbs-responsive line ~215), restored after the rule above */
  body.bbs-site.bbs-home #page-container #main-content .faq p > a:only-child { padding: 24px 16px; }
}

/* ==================== round 4 (2026-10-08, from the 768/1024/1200 renders) ==================== */
/* 980-1169: the whole menu fits on one row beside the logo (BOOK NOW had wrapped to a second row at 1024) */
@media (min-width: 980px) and (max-width: 1169px) {
  body.bbs-site #page-container #menu > ul > li { margin: 0 8px; }
  body.bbs-site #page-container #menu > ul > li.alt { margin: 0 0 0 4px; }
}
/* 14px text floor at 768-1249: live's home intro columns (13px); phones have their own 16px rules above */
@media (min-width: 768px) and (max-width: 1249px) {
  body.bbs-site.bbs-home #page-container .content .left > *, body.bbs-site.bbs-home #page-container .content .right > *, body.bbs-site.bbs-home #page-container .content .left p, body.bbs-site.bbs-home #page-container .content .right p { font-size: 14px !important; line-height: 22px; }
  body.bbs-site.bbs-home #page-container .special p { font-size: 14px; line-height: 19px; }
  body.bbs-site.bbs-home #page-container .panel.blog .date { font-size: 14px; }
  body.bbs-site #page-container .list.rooms .entry, body.bbs-site #page-container .list.rooms .entry p, body.bbs-site #page-container .list.rooms .entry li { font-size: 14px; }
}

/* ==================== round 5 (2026-10-08, mobile_audit.js 768/1024 tap targets) ==================== */
/* 24px tap height below 1250 for the small inline links (footer rows, sidebar archive, pager, FAQ index, links inside
   body text). Vertical padding on an inline link adds tap area without moving any line. */
@media (max-width: 1249px) {
  body.bbs-site #page-container #footer .footermenu a, body.bbs-site #page-container #footer .vcard a, body.bbs-site #page-container #footer .copyright a, body.bbs-site #page-container #footer .footer-tags a { padding-top: 4px; padding-bottom: 4px; }
  body.bbs-site #page-container #footer .fmenu li a { height: auto; padding-top: 3px; padding-bottom: 3px; }
  body.bbs-site #page-container .panel ul.archive a, body.bbs-site #page-container .paging em a, body.bbs-site #page-container .faqs .title a, body.bbs-site #page-container div.title a.scrollto { padding-top: 4px; padding-bottom: 4px; }
  body.bbs-site #page-container #main-content :is(p, li, td, em, span) a:not(.button):not(.tel-link) { padding-top: 4px; padding-bottom: 4px; }
}

/* ==================== round 6 (2026-10-08, overlap_check / clip_check findings) ==================== */
/* (the room video thumbnail text rule moved to bbs-design.css section 24: it applies at every width) */
/* narrow phones (320-420): long uppercase page titles ("ACCOMMODATION") ran past the edge at 26px */
@media (max-width: 420px) {
  body.bbs-site #page-container h1, body.bbs-site #page-container .maintext h1 { font-size: 22px; line-height: 28px; letter-spacing: 1px; overflow-wrap: break-word; }
}
/* link states below 1250 (link_contrast.js round 2): live's blue sidebar/FAQ-index hover (#0b79d9, 4.4:1) becomes the
   burgundy; Back to top keeps white text on grey in every active state (live's #333 rule had won the tap state);
   the room video thumbnail's title stays invisible as on live (text-fill transparent) while its colour is readable, so no
   state reads dark to a contrast check or a screen reader's highlight */
@media (max-width: 1249px) {
  body.bbs-site #page-container .panel .title a:hover, body.bbs-site #page-container .panel .title a:focus, body.bbs-site #page-container .panel .title a:active,
  body.bbs-site #page-container a.scrollto:hover, body.bbs-site #page-container a.scrollto:focus, body.bbs-site #page-container a.scrollto:active { color: var(--ils-green); }
  body.bbs-site #page-container .container.main div.top a.scrollto:hover, body.bbs-site #page-container .container.main div.top a.scrollto:focus, body.bbs-site #page-container .container.main div.top a.scrollto:active,
  body.bbs-site #page-container div.top a.scrollto:hover, body.bbs-site #page-container div.top a.scrollto:focus, body.bbs-site #page-container div.top a.scrollto:active { color: #ffffff; background: #6d6d6d; }
  body.bbs-site #page-container .gallery.room a.overlay-youtube, body.bbs-site #page-container .gallery.room a.overlay-youtube:hover, body.bbs-site #page-container .gallery.room a.overlay-youtube:focus, body.bbs-site #page-container .gallery.room a.overlay-youtube:active { color: #ffffff; -webkit-text-fill-color: transparent; }
}
@media (max-width: 1249px) {
  /* the RSS icon link's hidden label inherits a burgundy link colour on the burgundy header: white, every state */
  body.bbs-site #page-container .socialmedia a.rss, body.bbs-site #page-container .socialmedia a.rss:hover, body.bbs-site #page-container .socialmedia a.rss:focus, body.bbs-site #page-container .socialmedia a.rss:active { color: #ffffff; }
}
/* phone footer bottom (clip_check: 84px from the last text line to the page end against live's ~40px): the eTourism
   logo link drops to its own line on a phone, so it gets a text-line height and the footer a shorter bottom padding */
@media (max-width: 767px) {
  body.bbs-site #page-container #footer { padding-bottom: 24px; }
  body.bbs-site #page-container #footer .footer-tags a.tag { display: inline-block; line-height: 24px; padding: 0 58px 0 0; vertical-align: middle; }
}

/* ==================== round 7 (2026-10-08, prove_menu.js: menu items were only as wide as the header's right column) ==================== */
/* below 980 the opened menu drops down across the full header width (positioned on the header .container, which live
   already makes position: relative), over the top of the hero */
@media (max-width: 979px) {
  body.bbs-site #page-container #header.ils-menu-open #menu { position: absolute; left: 0; right: 0; top: 100%; margin: 0; z-index: 10000; background: var(--ils-green); box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35); }
}
/* 340-409px: the eTourism credit logo wraps to its own line there, so the footer's own bottom padding is trimmed to keep
   the gap under the last text line close to live's ~40px (clip_check / width sweep) */
@media (min-width: 340px) and (max-width: 409px) {
  body.bbs-site #page-container #footer { padding-bottom: 10px; }
}
/* 320px: the contact table's email address could not wrap (overlap_check OFFSCREEN-R); it may break inside the address */
@media (max-width: 767px) {
  body.bbs-site #page-container #main-content table td a[href^="mailto"] { word-break: break-all; }
}
/* the room video thumbnail matches the 72px photo thumbnails beside it on phones (it kept live's 64 x 49) */
@media (max-width: 767px) {
  body.bbs-site #page-container .gallery.room a.overlay-youtube { width: 72px; height: 55px; }
}
/* the dropdown was clipped at the bottom of the hero (live's #container-outer overflow-x: hidden also clips vertically)
   and could sit under the page content: while the menu is open the header block lets it overflow and stacks on top */
@media (max-width: 979px) {
  body.bbs-site #page-container #container-outer:has(#header.ils-menu-open) { overflow: visible; }
  body.bbs-site #page-container .et-l--header:has(#header.ils-menu-open), body.bbs-site #page-container .et-l--header:has(#header.ils-menu-open) .et_pb_section { position: relative; z-index: 100000; }
}
@media (max-width: 979px) {
  /* sub-items under the current page's parent stay white; only the current item is marked */
  body.bbs-site #page-container #menu li.active li:not(.active) a:link, body.bbs-site #page-container #menu li.active li:not(.active) a:visited { color: #ffffff; }
}
@media (max-width: 979px) {
  /* sub-items (FAQs, Reviews under Contact Us) indented so they read as part of their parent */
  body.bbs-site #page-container #menu li li a:link, body.bbs-site #page-container #menu li li a:visited, body.bbs-site #page-container #menu li:hover li a:link, body.bbs-site #page-container #menu li:hover li a:visited, body.bbs-site #page-container #menu li.active li a:link, body.bbs-site #page-container #menu li.active li a:visited { padding-left: 40px; }
}

/* ==================== 3.18 fix round 2 (2026-10-09) ==================== */
/* N1: from 768 to 1249 live's FAQ banner (right-aligned, 380px below 1170, live's 425px at 1170-1249) covered the hotel's
   pin and label on the static map. The map is drawn "cover" at 347px tall, i.e. 1539px wide at every width in this band,
   with the pin at 812-965px of that width (pin to the end of its label). Anchoring the image's right edge past the box's
   right edge puts the label end 444px (1170+: 484px) left of the screen edge at every width, so pin and label sit clear of
   the banner with about 60px to spare. 1250+ (live's centred map) and phones (banner stacked under the map) unchanged. */
@media (min-width: 768px) and (max-width: 1169px) {
  body.bbs-site.bbs-home #page-container .midbanner .static-map-wrapper { background-position: right -130px center !important; }
}
@media (min-width: 1170px) and (max-width: 1249px) {
  body.bbs-site.bbs-home #page-container .midbanner .static-map-wrapper { background-position: right -90px center !important; }
}
/* N3: blog, category and archive pager links at 768-1249 were live's 20 x 21px inline boxes: 24px tap targets there
   (phones already have 32px ones). Live's look (grey box, 6px side padding) kept. */
@media (min-width: 768px) and (max-width: 1249px) {
  body.bbs-site #page-container .paging a:link, body.bbs-site #page-container .paging a:visited, body.bbs-site #page-container .paging a:active { display: inline-block; box-sizing: border-box; min-width: 24px; min-height: 24px; line-height: 24px; padding: 0 6px; text-align: center; vertical-align: middle; }
  /* the current page's grey frame (live: em around the link) takes the same height, so the frame stays even */
  body.bbs-site #page-container .paging em { display: inline-block; box-sizing: border-box; min-height: 24px; line-height: 24px; padding: 0 6px; vertical-align: middle; }
}
/* N4: Google Docs posts carry inline white-space-collapse: preserve / pre-wrap on their text spans, or white-space: pre on
   the list item around them (spans then wrap but keep every space); a space at a line end then hangs past the right edge
   (1170: post 254 two lines and post 248 eight list lines 4px past the screen, overlap_check OFFSCREEN-R). Below 1250 the
   spaces INSIDE those text spans collapse as in normal text, so no line runs past its column; the list items' own
   whitespace (live's empty lines between bullets) is left as live renders it. 1250+ unchanged (live's wrapping). */
@media (max-width: 1249px) {
  body.bbs-site #page-container [style*="white-space-collapse: preserve"]:is(span, a), body.bbs-site #page-container [style*="pre-wrap"]:is(span, a), body.bbs-site #page-container [style*="white-space: pre"] :is(span, a) { white-space-collapse: collapse !important; }
}

/* ==================== fix round 4 (2026-10-09, Darcie on her own phone: header and footer spacing) ==================== */
/* phone header: the bar's height came from the logo alone, so on narrow phones (below ~430, where the phone number and
   the MENU button stack in the right column) the number touched the bar's top edge and the button its bottom edge, and
   at 430-767 the logo sat 8px from both edges. 12px top and bottom inside the bar, live's 16px phone gutter at the
   sides; the logo's own padding moves to the bar so it is centred like the other two. */
@media (max-width: 767px) {
  body.bbs-site #page-container #header .container { padding: 12px 16px; }
  body.bbs-site #page-container #header .logo { padding: 0; }
}
/* phone footer bottom: the eTourism credit logo sat 10px (340-409px; 24-31px elsewhere) above the bottom of the screen.
   The footer now ends with the same 32px it starts with, plus the iPhone home-indicator inset where the browser reports
   one. Supersedes the 24px and 340-409px 10px rules above. */
@media (max-width: 767px) {
  body.bbs-site #page-container #footer { padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px)); }

  /* the footer menu's two lines (Site Map, Privacy Policy, Search Site / Terms & Conditions) were 46px apart at 40px
     line-height, so the wrapped link read as a group of its own: 30px lines, tap height still 36px with the 3px padding */
  body.bbs-site #page-container #footer .fmenu li a { line-height: 30px; }
  body.bbs-site #page-container #footer .copyright { margin-top: 12px; }
}

/* fix 5 (3.18 N8, 2026-10-09): on /blog, category, archive and /faq the sidebar (.right.sidemenu) sits in its own
   .container, not under .content, so the posts' full-width rule never reached it and live's 300px float right won:
   at 390 it started 74px in, at 600 284px in. Phones only (768 and up unchanged): full width at the 16px gutter, under
   the content, as on the posts. Also the footer RSS icon is 23px of art in a 24px sprite cell: on 3x screens the last
   column showed a sliver of the next sprite icon; a 23px box clips it. */
/* fix 6 (3.18 N9): the same sidebar rule up to 1169, where the post list already runs full width; the parent .container
   carries the 24px tablet gutter (16px below 768), the same as the posts. 1170 and up unchanged. */
@media (max-width: 1169px) {
  body.bbs-site #page-container .container > .right.sidemenu { float: none; clear: both; width: auto; margin-top: 30px; }
}
@media (max-width: 767px) {
  body.bbs-site #page-container #footer .socialmedia a.rss { width: 23px; }
}

/* ==================== fix round 7 (2026-10-13, Darcie on her own phone, look 2; quick path) ==================== */
/* 1. home intro: the aerial photo under the intro is .content::before, a band anchored to the BOTTOM of .content (live:
   483px tall inside 350px of bottom padding, so on live's desktop the text sits on the photo's faded sky by design).
   Below 1170 the bottom padding (300px tablet, 220px phone) was smaller than the photo (483px, 300px), so the intro's last
   lines ran 128px (tablet) and 60px (phone) into the photo. The padding now holds the whole photo plus a clear gap: 24px
   on phones and 32px on tablets, measured from the last line of text (20px of paragraph margin, plus 35px of text-block
   spacing on tablet, already sit below the text). 1170 and up keep live's overlap. Only home has this band. */
@media (min-width: 768px) and (max-width: 1169px) {
  body.bbs-site.bbs-home #page-container .content { padding-bottom: 460px; }
}
@media (max-width: 767px) {
  body.bbs-site.bbs-home #page-container .content { padding-bottom: 304px; }
}
/* 2. home map on phones: live's map is a 1668 x 376px picture, so at 390px wide and 240px tall its labels were about 7px
   high and unreadable. Below 768 the picture is swapped for a keyless Google Maps embed (no API key; the kit's
   .map-container iframe.ils-map pattern) 400px tall with a "Get directions" link, both in the home page content and
   hidden at every other width. Tablet keeps live's picture: at 347px tall its labels are near full size, and fix round 2
   keeps the pin clear of the FAQ banner there. */
body.bbs-site.bbs-home #page-container .midbanner .map-wrapper > .bbs-map-phone { display: none; }
@media (max-width: 767px) {
  body.bbs-site.bbs-home #page-container .map-wrapper { height: 400px; }
  body.bbs-site.bbs-home #page-container .midbanner .map-wrapper > .static-map-wrapper { display: none; }
  body.bbs-site.bbs-home #page-container .midbanner .map-wrapper > .map-container.bbs-map-phone { display: block; width: 100%; height: 100%; }
  /* 48px up so the box clears Google's logo and attribution row along the map's bottom edge */
  body.bbs-site.bbs-home #page-container .midbanner .map-wrapper > .map-info.bbs-map-phone { display: block; padding: 0; bottom: 48px; }
  body.bbs-site.bbs-home #page-container .midbanner .map-info.bbs-map-phone a:link, body.bbs-site.bbs-home #page-container .midbanner .map-info.bbs-map-phone a:visited { display: block; padding: 8px 18px; font-size: 15px; line-height: 24px; font-weight: 700; color: var(--ils-green); text-decoration: none; white-space: nowrap; }
  body.bbs-site.bbs-home #page-container .midbanner .map-info.bbs-map-phone a:hover, body.bbs-site.bbs-home #page-container .midbanner .map-info.bbs-map-phone a:focus, body.bbs-site.bbs-home #page-container .midbanner .map-info.bbs-map-phone a:active { color: var(--ils-green); text-decoration: underline; }
}
/* 3. blog, category and archive listings on phones: the page-number block (Pages 1 to 11, then 10 / 50 / 100 and the
   result count) showed above the posts as well as below them, and stacked on a phone it was a 104px block before the
   first post. Below 768 the TOP block is hidden; the bottom one stays and still pages. 768 and up keep both (at 768 the
   top block is one compact right-aligned row, as on live). Archive months never have more than 10 posts, so they show
   no pager at all. */
@media (max-width: 767px) {
  body.bbs-site:is(.page-id-1627, .blog, .archive) #page-container .list > .paging:first-child,
  body.bbs-site:is(.page-id-1627, .blog, .archive) #page-container .list > .paging:first-child + .options,
  body.bbs-site:is(.page-id-1627, .blog, .archive) #page-container .list > .paging:first-child + .options + .result-count { display: none; }
}
/* 5. FAQ page below 1170: each of the three sections carries its own "FAQ Categories" box (live's right-hand column), so
   stacked it repeated three times among the questions. Below 1170 the first box moves above the first section, directly
   under the page heading, and the other two are hidden; its links already jump to #faq1 to #faq3. The container becomes
   a flex column (its clearfix pseudo-elements render nothing below 1170, so no phantom items) and the sections' floats
   no longer apply, which changes nothing because they were already full width. 1170 and up unchanged. */
@media (max-width: 1169px) {
  body.bbs-site.page-id-1629 #page-container .content-bottom + .container { display: flex; flex-direction: column; }
  body.bbs-site.page-id-1629 #page-container .content-bottom + .container > .left:first-child + .right.sidemenu { order: -1; margin: 0; }
  /* the box's own 65px top and bottom margins no longer collapse inside a flex item: 20px above it, and below it the first
     section's own 65px question spacing, so it sits about 65px from the intro and from the first section heading */
  body.bbs-site.page-id-1629 #page-container .content-bottom + .container > .left:first-child + .right.sidemenu > .panel.faqs { margin: 20px 0 0; }
  body.bbs-site.page-id-1629 #page-container .content-bottom + .container > .right.sidemenu ~ .right.sidemenu { display: none; }
}
/* 3b. (same round, follow-up) with the top pager hidden, the first post's own 65px top margin (live's space under the
   pager row) plus the intro's trailing space left a 99-119px empty band between the intro and the first post title on
   phones (/blog 119: paragraph margin 20 + intro padding 24 + content padding 10 + 65; category and archive 99, their
   last intro line is the heading, no margin). Below 768 the first post's top margin is 6px and the /blog intro
   paragraph's trailing margin is 0, so the intro's last line sits about 40px above the first post title on all three
   listings. The spacing between posts (65px) and 768 and up are unchanged. */
@media (max-width: 767px) {
  body.bbs-site:is(.page-id-1627, .blog, .archive) #page-container .list > .result-count + .entry,
  body.bbs-site:is(.page-id-1627, .blog, .archive) #page-container .list > .entry:first-child { margin-top: 6px; }
  body.bbs-site:is(.page-id-1627, .blog, .archive) #page-container .content .maintext > p:last-child { margin-bottom: 0; }
}