/* bb-mobile.css - Burleigh on the Beach DESIGNED tablet and phone layer (Stage 4, skill Rule 2). Loads last.
   Live iLaunch ships a fixed 1170px layout with no responsive CSS; nothing here applies from 1170px up, where the site is
   live's exact copy (bb-live.css + bb-design.css). Approach adapted from kit ilaunch-responsive.template.css, rewritten for
   this template's markup (booking bar inside #header, absolute #feature hero, home reviews circle, .content / .content-bottom
   bands, map footer). Colour split by width: live's colours from 768px up; WCAG AA colours and 24px+ taps below 768px.
   P = body.bb-site #page-container, H = body.bb-site.bb-home #page-container (selectors written out in full). */

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

  /* ---- header: logo + phone/social on one row, the menu on its own centred row, then the booking block ---- */
  body.bb-site #page-container #header { height: auto; min-width: 0; margin-bottom: 0; padding: 14px 0 0; background: #ffffff; }
  body.bb-site.bb-home #page-container #header { margin-bottom: 0; }
  body.bb-site #page-container #header .container { display: flex; flex-wrap: wrap; align-items: center; column-gap: 18px; row-gap: 10px; }
  body.bb-site #page-container #header .container > .clearboth { display: none; }
  body.bb-site #page-container #header .logo { float: none; width: auto; margin-right: auto; }
  body.bb-site #page-container #header .logo img { display: block; width: 300px; max-width: 100%; height: auto; }
  body.bb-site #page-container #header .right { display: contents; }
  body.bb-site #page-container #header .socialmedia { order: 1; float: none; margin: 0; }
  body.bb-site #page-container #header .phone { order: 2; float: none; margin: 0; }
  body.bb-site #page-container .ils-menu-toggle { order: 3; }
  body.bb-site #page-container #menu { order: 10; flex: 1 1 100%; text-align: center; }
  body.bb-site #page-container #menu > ul { display: inline-block; }

  /* ---- booking block (stays where live has it: under the header, above the hero) ---- */
  body.bb-site #page-container #booking { order: 20; flex: 1 1 100%; min-width: 0; position: relative; top: auto; left: auto; width: auto; height: auto;
    margin: 4px -24px 0; padding: 16px 24px 18px; text-align: left; background: #f4f7f9; border-top: 1px solid #e3e9ee; border-bottom: 4px solid #2dcbcc; }
  body.bb-site #page-container #booking h3 { float: none; display: block; font-size: 34px; line-height: 38px; margin: 0 0 12px; }
  body.bb-site #page-container .bookingform { float: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
  body.bb-site #page-container .bookingform span.check-in, body.bb-site #page-container .bookingform span.duration {
    flex: 1 1 220px; display: flex; align-items: center; width: auto; min-width: 0; height: 44px; line-height: 44px; }
  body.bb-site #page-container .bookingform em { flex: 0 0 auto; width: auto; padding: 0 10px 0 12px; }
  body.bb-site #page-container .bookingform .datepicker_wrap { flex: 1 1 auto; display: flex; align-items: center; min-width: 0; float: none; }
  body.bb-site #page-container .bookingform span input { flex: 1 1 auto; width: auto; min-width: 0; height: 32px; }
  body.bb-site #page-container .bookingform span .datepicker_trigger, body.bb-site #page-container .bookingform span img { flex: 0 0 auto; margin: 0 12px 0 4px; }
  body.bb-site #page-container .bookingform span select { flex: 1 1 auto; width: auto; min-width: 0; height: 40px; margin-right: 8px; background-position: right 4px center; }
  body.bb-site #page-container .bookingbutton { flex: 0 0 auto; display: block; }
  body.bb-site #page-container .bookingbutton .button { display: block; height: 46px; }

  /* ---- hero: in the flow under the header; the wave keeps its whole shape (scaled, not cropped) ---- */
  body.bb-site #page-container #feature { position: relative; top: auto; min-width: 0; display: flex; flex-direction: column; }
  body.bb-site #page-container .featureimage { height: 300px; }
  body.bb-site #page-container .featuremain { order: 1; height: 380px; }
  body.bb-site #page-container .featureoverlay-patch { order: 2; position: relative; bottom: auto; height: 46px; margin-top: -46px; background-size: 100% 100%; }
  body.bb-site.bb-home #page-container .featureoverlay-patch { background-size: 100% 100%; }
  body.bb-site #page-container #feature > .container { order: 3; position: relative; padding: 0; }

  /* home reviews circle: under the hero, overlapping the wave as on live */
  body.bb-site.bb-home #page-container .featurebanners { position: relative; top: auto; left: auto; width: 440px; height: 440px; max-width: 100%; margin: -60px auto 0; z-index: 3; }
  body.bb-site.bb-home #page-container .special { width: 100%; height: auto; aspect-ratio: 1 / 1; border-radius: 50%; }
  body.bb-site.bb-home #page-container .featurebanners .top-patch { width: calc(100% - 24px); height: calc(100% - 24px); border-radius: 50%; background-size: 73% auto; }
  body.bb-site.bb-home #page-container .special h3 { top: 7.5%; bottom: auto; left: 0; right: 0; width: auto; margin: 0; font-size: 30px; line-height: 30px; }
  body.bb-site.bb-home #page-container .special .text { top: auto; bottom: 0; left: 0; right: 0; width: auto; margin: 0; padding: 16px 60px 34px; }
  body.bb-site.bb-home #page-container .special .text h2 { font-size: 24px; line-height: 28px; }

  /* ---- content bands ---- */
  body.bb-site #page-container .content .container { padding: 32px 24px 36px; }
  body.bb-site #page-container .content .left, body.bb-site #page-container .content .right,
  body.bb-site #page-container .content.split .left, body.bb-site #page-container .content.split .right { float: none; width: auto; }
  body.bb-site #page-container .content .right { padding-top: 24px; }
  body.bb-site #page-container .content img { max-width: 100%; height: auto; }
  body.bb-site #page-container .content table { max-width: 100%; }
  body.bb-site #page-container .content iframe { max-width: 100%; }
  body.bb-site #page-container .content h1 { font-size: 40px; line-height: 44px; }
  body.bb-site #page-container .content .socialwidgets { display: none; }
  /* live's clickable map images (a div with an inline 500px height and background photo): a shorter, centred crop */
  body.bb-site #page-container .content div[onclick][style*="background"] { height: 340px !important; background-position: 70% 50% !important; }
  body.bb-site.page-id-1339 #page-container .content .left > h1 { font-size: 30px; line-height: 36px; }

  /* home: text band on the pool photo, then the FAQ button and Latest Blogs */
  body.bb-site.bb-home #page-container .content .content-patch { display: none; }
  body.bb-site.bb-home #page-container .content .container { padding: 24px 24px 32px; }
  body.bb-site.bb-home #page-container .content .container .right { width: auto; padding: 20px 24px 24px; background: rgba(255, 255, 255, 0.92); border-radius: 6px; }
  body.bb-site.bb-home #page-container .content-bottom { display: block; height: auto; min-width: 0; margin: 0; background: #ffffff; z-index: auto; }
  body.bb-site.bb-home #page-container .content-bottom .container { padding-top: 28px; padding-bottom: 8px; }
  body.bb-site.bb-home #page-container .content-bottom .container .left { float: none; width: auto; height: auto; margin: 0; }
  body.bb-site.bb-home #page-container .content-bottom .container .left p { margin: 0; }
  body.bb-site.bb-home #page-container .content-bottom a.button.more { position: relative; bottom: auto; display: block; padding: 14px 54px 14px 20px; line-height: 26px; white-space: normal; background-position: right 12px center; }
  body.bb-site.bb-home #page-container .content-bottom .container .right { float: none; width: auto; }
  body.bb-site.bb-home #page-container .panel.blog { width: auto; margin: 0; padding: 28px 0 32px; }
  body.bb-site.bb-home #page-container .panel.blog ul { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 24px; }
  body.bb-site.bb-home #page-container .panel.blog li { float: none; width: auto; margin: 0; display: grid; grid-template-columns: 96px 1fr; column-gap: 14px; align-content: start; }
  body.bb-site.bb-home #page-container .panel.blog .blog-image { grid-row: 1 / span 4; width: 86px; height: 86px; margin: 0; }
  body.bb-site.bb-home #page-container .panel.blog .blog-image a { width: 86px; height: 86px; }
  body.bb-site.bb-home #page-container .panel.blog .title { margin-top: 0; }
  body.bb-site.bb-home #page-container .panel.blog a.more { justify-self: start; }
  body.bb-site.bb-home #page-container .panel.blog .clearleft { display: none; }

  /* apartments: photo and room text stacked, thumbnails one swipeable row */
  body.bb-site #page-container .list .entry { margin: 30px 0 50px; }
  body.bb-site #page-container .list .entry .images { float: none; width: auto; margin: 0 0 24px; }
  body.bb-site #page-container .list .entry .images img.room-image { display: block; width: 440px; max-width: 100%; height: auto; aspect-ratio: 1 / 1; margin: 0 auto; box-sizing: border-box; }
  body.bb-site #page-container .gallery.room { display: flex; gap: 10px; margin: 16px 0 0; padding: 0 0 8px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
  body.bb-site #page-container .rooms .gallery-image { flex: 0 0 auto; float: none; width: 100px; height: 100px; margin: 0; scroll-snap-align: start; }
  body.bb-site #page-container .rooms .gallery-image a, body.bb-site #page-container .rooms .gallery-image a img { width: 100px; height: 100px; }
  body.bb-site #page-container .gallery.room .clearleft { display: none; }
  body.bb-site #page-container .list .entry h2 { font-size: 36px; line-height: 42px; }

  /* photo galleries (facilities, location, attractions): even grid of circles */
  body.bb-site #page-container .gallery:not(.room) { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
  body.bb-site #page-container .gallery:not(.room) > h3 { grid-column: 1 / -1; margin: 0; }
  body.bb-site #page-container .gallery:not(.room) > a:not(.gallery-item) { position: absolute; }
  body.bb-site #page-container .gallery:not(.room) > br, body.bb-site #page-container .gallery:not(.room) > .clearleft { display: none; }
  body.bb-site #page-container .gallery:not(.room) .gallery-image { float: none; width: auto; height: auto; aspect-ratio: 1 / 1; margin: 0; box-sizing: border-box; background-size: cover; }
  body.bb-site #page-container .gallery:not(.room) .gallery-image a { width: 100%; height: 100%; }

  /* blog: list, post and sidebar */
  body.bb-site #page-container .blog-image { width: 180px; height: 180px; margin: 4px 22px 16px 0; background-size: cover; }
  body.bb-site #page-container .blog-image a { width: 180px; height: 180px; }
  body.bb-site #page-container .content .right .panel { margin-bottom: 26px; }
  /* posts pasted from Google Docs carry list items with an inline white-space: pre, which keeps every source line break and tab
     as blank lines and a deep indent (live desktop shows the same; kept there). Normal wrapping on tablets and phones. */
  body.bb-site #page-container .content .summary li[style*="white-space: pre;"], body.bb-site #page-container .content .summary li[style*="white-space:pre;"] { white-space: normal !important; }

  /* contact: form then the address column */
  body.bb-site #page-container .content p.ils-required-note { margin: -45px 0 60px 0; }

  /* ---- footer ---- */
  body.bb-site #page-container #footer { display: block; min-width: 0; }
  body.bb-site.bb-home #page-container #footer { margin-top: 0; }
  body.bb-site #page-container #footer .top-bg { min-width: 0; left: 0; margin-left: 0; background-size: 100% 100%; height: 50px; }
  body.bb-site #page-container #footer .container { padding: 60px 24px 0; }
  body.bb-site.bb-home #page-container #footer .container { padding-top: 40px; }
  body.bb-site #page-container #footer .container .container { width: auto; padding: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; }
  body.bb-site #page-container #footer .left { float: none; width: auto; margin: 0 0 30px; }
  body.bb-site #page-container #footer .container .container > .right { position: relative; top: auto; left: auto; width: auto; min-width: 0; grid-column: 1 / -1; grid-row: 2; }
  body.bb-site #page-container #footer .vcard { position: relative; top: auto; left: auto; width: auto; height: auto; grid-column: 2; grid-row: 1; align-self: start; margin-bottom: 30px; }
  body.bb-site #page-container #footer .container .container > .clearboth { display: none; }
  body.bb-site #page-container .footer-map { width: auto; overflow: hidden; }
  body.bb-site #page-container .footer-map img { max-width: none; width: 100%; height: 300px; margin: 0; object-fit: cover; object-position: 55% 50%; }
  body.bb-site #page-container .footer-map .map-left-bg { display: none; }
  body.bb-site #page-container #footer .copyright .container { padding: 12px 24px 6px; }
}

/* =================== below 980: the menu goes behind a button =================== */
@media (max-width: 979px) {
  body.bb-site #page-container #header { padding-top: 12px; }
  body.bb-site #page-container #header .container { column-gap: 14px; }
  body.bb-site #page-container #header .logo { flex: 1 1 auto; }
  body.bb-site #page-container .ils-menu-toggle { display: inline-flex; align-items: center; gap: 10px; height: 44px; margin: 0; padding: 0 16px; border: 0; border-radius: 5px;
    background: #1772b3; color: #ffffff; font: 16px/44px 'melbournebold', Arial, Helvetica, sans-serif; text-transform: uppercase; letter-spacing: 1px; cursor: pointer; }
  body.bb-site #page-container .ils-menu-toggle span, body.bb-site #page-container .ils-menu-toggle span::before, body.bb-site #page-container .ils-menu-toggle span::after {
    display: block; position: relative; width: 18px; height: 2px; background: #ffffff; content: ""; }
  body.bb-site #page-container .ils-menu-toggle span::before { position: absolute; top: -6px; }
  body.bb-site #page-container .ils-menu-toggle span::after { position: absolute; top: 6px; }
  body.bb-site #page-container #header.ils-menu-open .ils-menu-toggle { background: #07548b; }
  body.bb-site #page-container #menu { display: none; margin: 0 -24px; text-align: left; background: #0869ae; }
  body.bb-site #page-container #header.ils-menu-open #menu { display: block; }
  body.bb-site #page-container #menu > ul { display: block; width: auto; }
  body.bb-site #page-container #menu li { display: block; margin: 0; border-top: 1px solid rgba(255, 255, 255, 0.2); }
  body.bb-site #page-container #menu li a:link, body.bb-site #page-container #menu li a:visited, body.bb-site #page-container #menu li a:active,
  body.bb-site #page-container #menu li:hover a:link, body.bb-site #page-container #menu li:hover a:visited {
    display: block; padding: 0 24px; line-height: 50px; font-size: 17px; color: #ffffff; background: none; border-radius: 0; }
  body.bb-site #page-container #menu li.active > a:link, body.bb-site #page-container #menu li.active > a:visited { background: #07548b; }
  body.bb-site #page-container #menu li ul { position: static; display: block; width: auto; padding: 0; background: none; border-radius: 0; }
  body.bb-site #page-container #menu li li { border-top: 1px solid rgba(255, 255, 255, 0.12); }
  body.bb-site #page-container #menu li ul a:link, body.bb-site #page-container #menu li ul a:visited, body.bb-site #page-container #menu li:hover ul a:link, body.bb-site #page-container #menu li:hover ul a:visited {
    padding: 0 24px 0 44px; line-height: 46px; font-size: 16px; color: #ffffff; background: none; }
  body.bb-site #page-container #menu li.active li a:link, body.bb-site #page-container #menu li.active li a:visited { background: none; color: #ffffff; }
  body.bb-site #page-container #menu li li.active a:link, body.bb-site #page-container #menu li li.active a:visited { background: #07548b; color: #ffffff; }
  body.bb-site #page-container #menu li.alt a:link, body.bb-site #page-container #menu li.alt a:visited { background: #1e7d06; color: #ffffff; }
  body.bb-site.bb-home #page-container .panel.blog ul { grid-template-columns: repeat(2, 1fr); row-gap: 24px; }
}

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

  /* header */
  body.bb-site #page-container #header { padding-top: 10px; }
  body.bb-site #page-container #header .container { column-gap: 12px; row-gap: 8px; }
  body.bb-site #page-container #header .logo { flex: 1 0 calc(100% - 150px); min-width: 0; }
  body.bb-site #page-container #header .logo img { width: 230px; }
  body.bb-site #page-container #header .phone { order: 4; flex: 0 1 auto; text-align: left; font-size: 22px; line-height: 30px; margin: 0; padding: 0 0 0 33px; background-position: left center; color: #0869ae; }
  body.bb-site #page-container #header .socialmedia { order: 5; margin-left: auto; line-height: 32px; }
  body.bb-site #page-container #header .socialmedia a { width: 24px; height: 24px; margin: 4px 3px; }
  body.bb-site #page-container #menu { margin: 0 -16px; }
  body.bb-site #page-container #menu li a:link, body.bb-site #page-container #menu li a:visited, body.bb-site #page-container #menu li a:active,
  body.bb-site #page-container #menu li:hover a:link, body.bb-site #page-container #menu li:hover a:visited { padding: 0 16px; }
  body.bb-site #page-container #menu li ul a:link, body.bb-site #page-container #menu li ul a:visited, body.bb-site #page-container #menu li:hover ul a:link, body.bb-site #page-container #menu li:hover ul a:visited { padding: 0 16px 0 36px; }

  /* booking: a stacked block, 16px fields, full-width button */
  body.bb-site #page-container #booking { margin: 2px -16px 0; padding: 14px 16px 18px; }
  body.bb-site #page-container #booking h3 { font-size: 26px; line-height: 30px; margin-bottom: 12px; }
  /* single-line column: a wrapping flex container sizes each line to its widest item's content and overflowed at 320 */
  body.bb-site #page-container .bookingform { flex-direction: column; flex-wrap: nowrap; gap: 10px; }
  body.bb-site #page-container .bookingform span.check-in, body.bb-site #page-container .bookingform span.duration { flex: 0 0 auto; height: 50px; line-height: 50px; }
  body.bb-site #page-container .bookingform em { width: 108px; font-size: 15px; }
  body.bb-site #page-container .bookingform span input { font-size: 16px; height: 40px; }
  body.bb-site #page-container .bookingform span select { font-size: 16px; height: 46px; }
  body.bb-site #page-container .bookingbutton .button { width: 100%; height: 52px; padding: 0 25px; font-size: 20px; background-color: #1e7d06; background-position: right 16px center; box-sizing: border-box; }

  /* hero */
  body.bb-site #page-container .featureimage { height: 190px; }
  body.bb-site #page-container .featuremain { height: 230px; }
  body.bb-site #page-container .featureoverlay-patch { height: 26px; margin-top: -26px; }

  /* home reviews circle */
  body.bb-site.bb-home #page-container .featurebanners { width: 310px; height: 310px; margin-top: -34px; }
  body.bb-site.bb-home #page-container .featurebanners .top-patch { border-width: 8px; width: calc(100% - 16px); height: calc(100% - 16px); }
  body.bb-site.bb-home #page-container .special h3 { top: 7%; font-size: 22px; line-height: 24px; }
  body.bb-site.bb-home #page-container .special .text { padding: 10px 44px 22px; background: rgba(23, 110, 6, 0.9); }
  body.bb-site.bb-home #page-container .special .text h2, body.bb-site.bb-home #page-container .special .text h2 strong { font-size: 19px; line-height: 23px; color: #ffffff; }
  body.bb-site.bb-home #page-container .special a.button { font-size: 16px; padding: 10px 18px; }

  /* type on a phone: headings scaled down, nothing under 14px */
  body.bb-site #page-container .content h1 { font-size: 30px; line-height: 34px; margin-bottom: 18px; }
  body.bb-site.bb-home #page-container .content h1 { font-size: 34px; line-height: 38px; }
  body.bb-site #page-container .content h2 { font-size: 25px; line-height: 30px; margin: 26px 0 8px; }
  body.bb-site #page-container .content h3 { font-size: 23px; line-height: 27px; margin: 22px 0 8px; }
  body.bb-site #page-container .content h4 { font-size: 20px; line-height: 26px; }
  body.bb-site #page-container .content .container { padding: 22px 16px 28px; }
  body.bb-site #page-container .content div[onclick][style*="background"] { height: 240px !important; }
  body.bb-site.page-id-1339 #page-container .content .left > h1 { font-size: 21px; line-height: 27px; margin-bottom: 14px; }
  body.bb-site.page-id-1339 #page-container .content .left > h1 a { padding: 2px 0; }
  body.bb-site #page-container .content p { margin: 14px 0; }
  /* justified text (live's inline style="text-align: justify") opens wide gaps on a narrow column: left aligned on phones */
  body.bb-site #page-container :is(.content, .content-bottom) :is(p, h1, h2, h3, h4, li, td) { text-align: left !important; }
  body.bb-site #page-container .content a.button:link, body.bb-site #page-container .content a.button:visited { white-space: normal; line-height: 24px; }
  /* live's #27ae08 green gives white text 2.9:1; a deeper green of the same hue passes AA on phones */
  body.bb-site #page-container .content a.button:not(.alt):link, body.bb-site #page-container .content a.button:not(.alt):visited { background-color: #1e7d06; }
  body.bb-site #page-container .content h6 { font-size: 14px; line-height: 20px; }

  /* home bands */
  body.bb-site.bb-home #page-container .content .container { padding: 18px 12px 24px; }
  body.bb-site.bb-home #page-container .content .container .right { padding: 16px 16px 20px; }
  body.bb-site.bb-home #page-container .content-bottom .container { padding-top: 22px; }
  body.bb-site.bb-home #page-container .content-bottom a.button.more { font-size: 18px; background-color: #1e7d06; }
  body.bb-site.bb-home #page-container .panel.blog { padding: 24px 0 28px; }
  body.bb-site.bb-home #page-container .panel.blog h3 { font-size: 30px; line-height: 34px; margin-bottom: 16px; }
  body.bb-site.bb-home #page-container .panel.blog ul { grid-template-columns: 1fr; row-gap: 22px; }
  body.bb-site.bb-home #page-container .panel.blog li { display: grid; grid-template-columns: 96px 1fr; column-gap: 14px; }
  body.bb-site.bb-home #page-container .panel.blog .blog-image { grid-row: 1 / span 4; width: 86px; height: 86px; margin: 0; }
  body.bb-site.bb-home #page-container .panel.blog .blog-image a { width: 86px; height: 86px; }
  body.bb-site.bb-home #page-container .panel.blog .title { margin: 0 0 2px; font-size: 16px; line-height: 21px; }
  body.bb-site.bb-home #page-container .panel.blog .date { font-size: 14px; color: #6b6b6b; }
  body.bb-site.bb-home #page-container .panel.blog .summary { font-size: 14px; line-height: 20px; }

  /* apartments */
  body.bb-site #page-container .list .entry { margin: 22px 0 40px; }
  body.bb-site #page-container .list .entry .images img.room-image { width: 300px; border-width: 4px; }
  body.bb-site #page-container .rooms .gallery-image, body.bb-site #page-container .rooms .gallery-image a, body.bb-site #page-container .rooms .gallery-image a img { width: 84px; height: 84px; }
  body.bb-site #page-container .list .entry h2 { font-size: 26px; line-height: 31px; }
  body.bb-site #page-container .button.roombooking { display: block; width: auto; padding: 14px 20px; font-size: 18px; text-align: left; background-color: #1e7d06; background-position: right 16px center; }

  /* photo galleries: two up */
  body.bb-site #page-container .gallery:not(.room) { grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 26px 0; }
  body.bb-site #page-container .gallery:not(.room) .gallery-image { border-width: 4px; }

  /* blog list, post, sidebar */
  body.bb-site #page-container .blog-image { width: 110px; height: 110px; margin: 4px 16px 10px 0; border-width: 4px; }
  body.bb-site #page-container .blog-image a { width: 110px; height: 110px; }
  body.bb-site.single-post #page-container .content .entry > .blog-image { float: none; width: 240px; height: 240px; margin: 0 auto 18px; }
  body.bb-site.single-post #page-container .content .entry > .blog-image a { width: 240px; height: 240px; }
  body.bb-site #page-container .list .entry { margin: 22px 0 30px; }
  body.bb-site #page-container .list .entry h2 { font-size: 22px; line-height: 27px; margin-bottom: 6px; }
  body.bb-site #page-container .panel { font-size: 14px; line-height: 20px; }
  body.bb-site #page-container .panel .title { font-size: 16px; line-height: 22px; }
  body.bb-site #page-container .panel .title a { display: inline-block; padding: 4px 0; }
  body.bb-site #page-container .panel li { margin: 14px 0; }
  body.bb-site #page-container .panel ul.archive { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; }
  body.bb-site #page-container .panel ul.archive li { margin: 0; }
  body.bb-site #page-container .panel ul.archive a { display: inline-block; padding: 7px 0; }
  body.bb-site #page-container .panel .text a { display: inline-block; padding: 5px 6px 5px 0; font-size: 14px !important; line-height: 22px; }
  body.bb-site #page-container .panel .date, body.bb-site #page-container .panel .details, body.bb-site #page-container .entry .details, body.bb-site #page-container .panel li em { font-size: 14px; color: #6b6b6b; }
  body.bb-site #page-container .panel .details a, body.bb-site #page-container .entry .details a { color: #5c5c5c; }
  body.bb-site #page-container a.more:not(.button), body.bb-site #page-container a.more:not(.button):link, body.bb-site #page-container a.more:not(.button):visited { display: inline-block; justify-self: start; padding: 8px 10px 8px 0; font-size: 14px; color: #0869ae; background-position: right center; }

  /* pagers (blog, archives, reviews) */
  body.bb-site #page-container .paging { font-size: 14px; line-height: 40px; }
  body.bb-site #page-container .paging a:link, body.bb-site #page-container .paging a:visited, body.bb-site #page-container .paging a:active { width: auto; min-width: 34px; height: 34px; line-height: 34px; margin: 0 2px 6px; padding: 0 4px; box-sizing: border-box; color: #333333; }
  body.bb-site #page-container .paging em a:link, body.bb-site #page-container .paging em a:visited { color: #ffffff; background: #0869ae; }
  /* live's pager hover is a #097bb6 square with white figures; the phone #333 figure colour above out-specified the white (2.7:1) */
  body.bb-site #page-container .paging a:hover, body.bb-site #page-container .paging a:focus, body.bb-site #page-container .paging a:active { color: #ffffff; background: #097bb6; }
  body.bb-site #page-container .paging .options, body.bb-site #page-container .paging .result-count,
  body.bb-site #page-container span.options, body.bb-site #page-container span.result-count { display: block; margin: 4px 0; font-size: 14px; }
  body.bb-site #page-container span.options a { display: inline-block; min-width: 34px; line-height: 30px; margin-right: 4px; text-align: center; font-size: 14px; }
  body.bb-site #page-container div.top { font-size: 14px; line-height: 32px; }
  body.bb-site #page-container div.top a { color: #5c5c5c; padding: 2px 12px; }

  /* reviews */
  body.bb-site #page-container blockquote { padding: 6px 0 16px 58px; background-size: 42px auto; }
  body.bb-site #page-container blockquote .details { color: #6b6b6b; }

  /* contact form: label over a full-width field */
  body.bb-site #page-container .bb-contact-form { width: auto; }
  body.bb-site #page-container .bb-contact-form form.et_pb_contact_form { grid-template-columns: minmax(0, 1fr); }
  body.bb-site #page-container .bb-contact-form .et_pb_contact_form_label { grid-column: 1; padding: 8px 0 4px; font-size: 15px; }
  body.bb-site #page-container .bb-contact-form p.et_pb_contact_field .input { grid-column: 1; width: 100%; height: 48px; margin: 0 0 8px; font-size: 16px; }
  body.bb-site #page-container .bb-contact-form p.et_pb_contact_field textarea.input { height: 140px; margin-bottom: 8px; }
  body.bb-site #page-container .bb-contact-form p.et_pb_contact_field:has(> [data-required_mark="required"]) > .et_pb_contact_form_label::after { position: static; display: inline-block; margin-left: 6px; vertical-align: -2px; }
  body.bb-site #page-container .bb-contact-form .et_pb_contact_right p.clearfix { grid-column: 1; min-height: 0; padding: 8px 0 12px; font-size: 16px; line-height: 48px; }
  body.bb-site #page-container .bb-contact-form input.et_pb_contact_captcha { width: 90px; height: 48px; font-size: 16px; }
  body.bb-site #page-container .et_pb_section .bb-contact-form.et_pb_contact_form_container.et_pb_module .et_pb_button { grid-column: 1; justify-self: stretch; width: 100%; margin: 4px 0 0 !important; padding: 14px 25px !important; font-size: 20px !important; background: #1e7d06 !important; }
  body.bb-site #page-container .content p.ils-required-note { height: auto; margin: 10px 0 24px; padding: 0; }
  body.bb-site #page-container .content p.ils-required-note em.required { font-size: 14px; color: #6b6b6b; }
  /* bigger tap area for links on their own (inline padding: no change to how the line wraps) */
  /* not READ MORE (a.more): this rule out-specified its own padding and the arrow painted over the final E (3.18 finding 5) */
  body.bb-site #page-container .content td a:not(.button), body.bb-site #page-container .content p > a:only-child:not(.button):not(.more) { padding: 4px 0; }

  /* search and site map */
  body.bb-site #page-container table.form.searchpage, body.bb-site #page-container table.form.searchpage tbody, body.bb-site #page-container table.form.searchpage tr { display: block; width: auto; }
  body.bb-site #page-container table.form.searchpage td { display: flex; gap: 8px; width: auto; padding: 8px 0; }
  body.bb-site #page-container .form.searchpage input { float: none; flex: 1 1 auto; min-width: 0; width: auto; height: 48px; margin: 0; font-size: 16px; box-sizing: border-box; }
  body.bb-site #page-container .form.searchpage input.button { flex: 0 0 auto; padding: 0 18px; }
  body.bb-site #page-container .content input.button:not(.alt) { background-color: #1e7d06; }
  body.bb-site.page-id-1351 #page-container .content li { margin: 7px 0; line-height: 24px; }
  body.bb-site.page-id-1351 #page-container .content li a { padding: 4px 0; }

  /* footer: one column */
  body.bb-site #page-container #footer { font-size: 14px; }
  body.bb-site #page-container #footer .top-bg { height: 28px; }
  body.bb-site #page-container #footer .container { padding: 36px 16px 0; }
  body.bb-site.bb-home #page-container #footer .container { padding-top: 30px; }
  body.bb-site #page-container #footer .container .container { grid-template-columns: minmax(0, 1fr); padding: 0; }
  body.bb-site #page-container #footer .left { margin-bottom: 18px; }
  body.bb-site #page-container #footer .footermenu ul { float: none; margin: 0; padding-left: 20px; }
  body.bb-site #page-container #footer .footermenu li { line-height: 22px; }
  body.bb-site #page-container #footer .footermenu a { display: inline-block; padding: 7px 0; font-size: 15px; }
  body.bb-site #page-container #footer .socialmedia { float: none; margin: 12px 0 0; }
  body.bb-site #page-container #footer .socialmedia a { width: 24px; height: 24px; margin: 0 8px 0 0; }
  body.bb-site #page-container #footer .vcard { grid-column: 1; grid-row: 2; margin: 0 0 20px; padding: 16px; background: #0e6f70; font-size: 14px; }
  body.bb-site #page-container #footer .vcard li { line-height: 24px; }
  body.bb-site #page-container #footer .vcard a { display: inline-block; padding: 2px 0; word-break: break-word; }
  body.bb-site #page-container #footer .container .container > .right { grid-row: 3; margin: 0 -16px; }
  body.bb-site #page-container .footer-map img { height: 170px; }
  body.bb-site #page-container #footer p { font-size: 14px; }
  body.bb-site #page-container #footer .copyright .container { padding: 12px 16px 22px; }
  /* two links per row with the separator centred on its row; no separator left dangling at a line end (3.18 finding 6) */
  body.bb-site #page-container #footer .copyright ul { float: none; display: grid; grid-template-columns: max-content max-content; column-gap: 8px; justify-items: start; margin: 0 0 8px !important; }
  body.bb-site #page-container #footer .copyright li { display: block; margin: 0; padding: 0 14px 0 0; background-position: right center; }
  body.bb-site #page-container #footer .copyright li:nth-child(even) { padding-right: 0; background: none; }
  body.bb-site #page-container #footer .copyright li a { display: inline-block; padding: 6px 0; font-size: 14px; }
  body.bb-site #page-container #footer .copyright .right { float: none !important; }
  body.bb-site #page-container #footer .footer-tags, body.bb-site #page-container #footer .footer-tags p, body.bb-site #page-container #footer .footer-tags a { font-size: 14px; line-height: 24px; }

  /* "Book Direct & Save" pin: a bottom sheet that stays in the lower part of the screen */
  body.bb-site #page-container #special_bottompin_container { left: 0; right: 0; max-width: none; min-width: 0; border-top-left-radius: 14px; border-top-right-radius: 14px; }
  body.bb-site #page-container #special_bottompin_container a.special_bottompin { padding: 13px 44px 13px 16px; font-size: 16px; line-height: 20px; }
  body.bb-site #page-container #special_bottompin_container .formDescription { max-width: none; text-align: center; }
  body.bb-site #page-container #special_bottompin_container .formDescription p { margin: 0 0 8px; }
  body.bb-site #page-container #special_bottompin_container .formDescription a { display: inline-block; padding: 7px 0; }
  body.bb-site #page-container #special_bottompin_container .formDescription img { width: auto !important; height: auto !important; max-width: min(100%, 210px); display: inline-block; }
}

/* phones: the full-width pin (z-index 99999) sat above an open photo and its backdrop, so tapping the dimmed area opened the
   promo instead of closing the photo. The lightbox goes above the pin (desktop keeps live's stacking). */
@media (max-width: 767px) {
  body.bb-site #fancybox-overlay { z-index: 100010 !important; }
  body.bb-site #fancybox-wrap { z-index: 100011 !important; }
  body.bb-site #fancybox-loading { z-index: 100014 !important; }
}
/* the pin auto-opens once a day; on shorter phones its promo shrinks so the open sheet stays below the booking block */
@media (max-width: 767px) and (max-height: 760px) {
  body.bb-site #page-container #special_bottompin_container .formDescription img { max-width: min(100%, 180px); }
}
@media (max-width: 767px) and (max-height: 700px) {
  body.bb-site #page-container #special_bottompin_container .formDescription img { max-width: min(100%, 150px); }
}
/* 320x568 and 360x640 (3.18 finding 4): the open sheet still overlapped the bottom 13px / 5px of Book Now */
@media (max-width: 767px) and (max-height: 620px) {
  body.bb-site #page-container #special_bottompin_container .formDescription img { max-width: min(100%, 96px); }
  body.bb-site #page-container #special_bottompin_container .formDescription { padding-top: 4px; }
  body.bb-site #page-container #special_bottompin_container .formDescription p { margin-bottom: 4px; }
  body.bb-site #page-container #special_bottompin_container .formDescription a { padding: 8px 0; }
}

/* =================== phone: the booking calendar (appended to <body>) at a usable size =================== */
@media (max-width: 767px) {
  body.bb-site #datepicker_div { width: calc(100vw - 34px) !important; left: 16px !important; font-size: 16px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35); z-index: 100001 !important; }
  /* the month and year selects (36px) sat in a 1.3em header and overlapped the day names; "<Prev" was 12.8px */
  body.bb-site #datepicker_div .datepicker_header { height: auto; padding: 4px 0; }
  body.bb-site #datepicker_div .datepicker_links label { display: block; padding: 0 12px; line-height: 42px; font-size: 15px; }
  body.bb-site #datepicker_div .datepicker_oneMonth { width: 100%; }
  body.bb-site #datepicker_div .datepicker_control a, body.bb-site #datepicker_div .datepicker_links a { display: block; padding: 0 12px !important; line-height: 42px; font-size: 15px; }
  body.bb-site #datepicker_div .datepicker_control, body.bb-site #datepicker_div .datepicker_links { padding: 0; }
  body.bb-site #datepicker_div .datepicker_header select { font-size: 16px; height: 36px; padding: 0 6px; }
  body.bb-site #datepicker_div td { font-size: 16px !important; height: 42px; line-height: 42px; }
  body.bb-site #datepicker_div td a { line-height: 42px; }
}

/* =================== the fixed "Book Direct & Save" pin must not cover the last footer lines (Stage 3b F2) ===================
   The minimised pin stays fixed to the bottom of the screen (46px full width on phones, a 50px tab on the right from 768px),
   so at the end of every page it sat over "Hotel Booking System / Hotel Website Design by". The copyright bar gets enough
   bottom padding for its last line to scroll clear of the pin. From 1170px up live's layout is kept exactly (live's tab
   covers the same credit line there). */
@media (max-width: 1249px) {
  /* fix round 1: from 1170 to 1249 (live's layout, 14px text floor) the 50px tab sat over ": Hotel Website Design by" too */
  body.bb-site #page-container #footer .copyright .container { padding-bottom: 62px; }
  /* fix round 1b: an empty search (live's index answers it with every row) wraps every word in an EMPTY <em class="highlight">;
     live's rule (inline-block, 2px 5px padding, dark blue) paints each one as a dark block, which on a phone or tablet
     reads as broken text. Empty ones take no room below 1250; 1250 and up stays live's exact rule. */
  body.bb-site #page-container em.highlight:empty { display: none; }
  /* fix round 1b: search result titles are 19px-tall links; inline padding gives a 25px tap area without moving any line */
  body.bb-site #page-container .content form ~ p > strong > a { padding: 3px 0; }
}
@media (max-width: 767px) {
  body.bb-site #page-container #footer .copyright .container { padding-bottom: 58px; }
}
/* the promo auto-opens once a day 2s after load and covered the lower phone-menu items (Blog, Reviews, Book Now) until
   closed: while the phone menu is open the pin steps aside (the menu carries its own Book Now) (Stage 3b F4) */
@media (max-width: 979px) {
  body.bb-site.ils-menu-open #special_bottompin_container { display: none !important; }
}

/* =================== fix round 1 (3.18 finding 1, 2026-10-07): the 768 to 1249 band ===================
   Width-band ruling (skill Rule 2, kit publish 2026-10-07): 1250 and up is live's exact copy; 1170 to 1249 keeps live's
   layout with its fixed rows fitted; 768 to 1169 is our reflow; below 768 the phone design. Below 1250 every state is
   WCAG AA with a 14px text floor, 16px inputs and 24px tap targets. Phones (below 768) already met that; this block brings
   768 to 1249 up to the same floor using the phone design's AA colours (#1e7d06 green buttons, #0869ae blue for cyan
   text, #0e6f70 contact card, #6b6b6b / #5c5c5c greys). Nothing here applies from 1250px up. */
@media (min-width: 768px) and (max-width: 1249px) {
  /* ---- colours ---- */
  body.bb-site #page-container a.button:not(.alt):link, body.bb-site #page-container a.button:not(.alt):visited,
  body.bb-site #page-container input.button:not(.alt), body.bb-site #page-container .bookingbutton .button,
  body.bb-site #page-container a.button.more { background-color: #1e7d06; }
  body.bb-site #page-container .et_pb_section .bb-contact-form.et_pb_contact_form_container.et_pb_module .et_pb_button { background-color: #1e7d06 !important; }
  body.bb-site #page-container #header .phone { color: #0869ae; }
  body.bb-site #page-container .vcard { background: #0e6f70; }
  body.bb-site.bb-home #page-container .special .text { background: rgba(23, 110, 6, 0.9); }
  body.bb-site.bb-home #page-container .special .text h2, body.bb-site.bb-home #page-container .special .text h2 strong { color: #ffffff; }
  body.bb-site #page-container a.more:not(.button):link, body.bb-site #page-container a.more:not(.button):visited { color: #0869ae; }
  body.bb-site #page-container .panel .date, body.bb-site #page-container .panel .details, body.bb-site #page-container .entry .details,
  body.bb-site.bb-home #page-container .panel.blog .date, body.bb-site #page-container blockquote .details { color: #6b6b6b; }
  body.bb-site #page-container .panel .details a, body.bb-site #page-container .entry .details a { color: #5c5c5c; }
  body.bb-site #page-container .content p.ils-required-note em.required { color: #6b6b6b; }

  /* ---- 14px text floor ---- */
  body.bb-site #page-container #footer, body.bb-site #page-container #footer p, body.bb-site #page-container .copyright p,
  body.bb-site #page-container .footer-tags, body.bb-site #page-container .footer-tags p, body.bb-site #page-container #footer .vcard li { font-size: 14px; }
  body.bb-site #page-container .panel li em, body.bb-site #page-container .panel .date, body.bb-site #page-container .panel .details,
  body.bb-site #page-container .entry .details, body.bb-site #page-container .panel .summary { font-size: 14px; }
  body.bb-site.bb-home #page-container .panel.blog .date, body.bb-site.bb-home #page-container .panel.blog .summary { font-size: 14px; line-height: 20px; }
  body.bb-site #page-container a.more:not(.button) { font-size: 14px; }
  body.bb-site #page-container .panel ul.archive a { font-size: 14px; }
  body.bb-site #page-container .paging, body.bb-site #page-container .paging .options, body.bb-site #page-container .paging .result-count,
  body.bb-site #page-container span.options, body.bb-site #page-container span.result-count { font-size: 14px; }
  body.bb-site #page-container div.top { font-size: 14px; line-height: 24px; }
  body.bb-site #page-container .content h6 { font-size: 14px; line-height: 20px; }
  body.bb-site #page-container .content p.ils-required-note em.required { font-size: 14px; }
  /* tag cloud: live sizes each tag inline (10 to 12px) */
  body.bb-site #page-container .panel .text a { font-size: 14px !important; line-height: 20px; }

  /* ---- 16px inputs ---- */
  body.bb-site #page-container .bookingform span input, body.bb-site #page-container .bookingform span select { font-size: 16px; }
  body.bb-site #page-container .bb-contact-form p.et_pb_contact_field .input, body.bb-site #page-container .bb-contact-form input.et_pb_contact_captcha,
  body.bb-site #page-container .form.searchpage input:not(.button) { font-size: 16px; }

  /* ---- 24px tap targets ---- */
  body.bb-site #page-container #header .logo a { display: inline-block; }
  body.bb-site #page-container #footer .footermenu a { display: inline-block; padding: 3px 0; }
  body.bb-site #page-container #footer .vcard a { display: inline-block; padding: 3px 0; }
  body.bb-site #page-container #footer .copyright li { display: inline-block; background-position: right center; }
  body.bb-site #page-container #footer .copyright li a, body.bb-site #page-container .footer-tags a { display: inline-block; padding: 3px 0; }
  /* inline padding, not inline-block: an inline-block title next to the floated thumbnail dropped below it */
  body.bb-site #page-container .panel .title a, body.bb-site #page-container .content .title a.scrollto { padding: 3px 0; }
  body.bb-site #page-container .panel ul.archive a, body.bb-site #page-container .panel li.archive-more a.more { display: inline-block; padding: 3px 0; line-height: 20px; }
  body.bb-site #page-container .panel li.archive-more a.more { padding-right: 12px; }
  /* a link alone in its paragraph ("See our rooms", "Get directions"): inline padding, so the line wraps as before */
  body.bb-site #page-container .content p > a:only-child:not(.button):not(.more) { padding: 3px 0; }
  /* the open "Book Direct & Save" promo: its image links were inline, a 19px line box around a 400px picture */
  body.bb-site #page-container #special_bottompin_container .formDescription a { display: inline-block; }
  body.bb-site #page-container a.more:not(.button) { padding-top: 5px; padding-bottom: 5px; padding-right: 12px; background-position: right center; }
  body.bb-site #page-container span.options a { display: inline-block; min-width: 26px; line-height: 26px; text-align: center; }
  body.bb-site #page-container div.top a { padding: 0 12px; color: #5c5c5c; }
  body.bb-site #page-container .panel .text a { display: inline-block; padding: 3px 6px 3px 0; }
  body.bb-site #page-container .content td a:not(.button) { padding: 3px 0; }
  body.bb-site.page-id-1351 #page-container .content li a { padding: 3px 0; }
}

/* 1170 to 1249 keeps live's fixed booking row: at 16px the date ran into the calendar icon, so the check-in label gives the
   field 13px (same 240px box) */
@media (min-width: 1170px) and (max-width: 1249px) {
  body.bb-site #page-container .bookingform span.check-in em { width: 102px; }
  body.bb-site #page-container .bookingform span.check-in input { width: 98px; }
  /* home intro: in live's layout its last lines run onto the pool photo (a link there measured 2.9:1 against the water);
     a soft white backing, drawn with a box-shadow so nothing moves, keeps every line AA */
  body.bb-site.bb-home #page-container .content .container .right { background: rgba(255, 255, 255, 0.86); box-shadow: 0 0 0 14px rgba(255, 255, 255, 0.86); border-radius: 2px; }
}

/* the booking calendar below 1250 (fix round 1): AA colours everywhere (day names #eee on #777 were 3.9:1, past dates #888
   on #ddd 2.6:1) and, from 768 to 1249, a usable size: 300px wide, 16px days in 34px rows, 14px controls */
@media (max-width: 1249px) {
  body.bb-site .datepicker_titleRow, body.bb-site .datepicker_titleRow .datepicker_weekEndCell { background: #5c5c5c; }
  body.bb-site .datepicker_unselectable { color: #595959; }
}
@media (min-width: 768px) and (max-width: 1249px) {
  body.bb-site #datepicker_div { font-size: 16px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35); }
  body.bb-site #datepicker_div .datepicker_oneMonth { width: 300px; }
  body.bb-site #datepicker_div .datepicker_control, body.bb-site #datepicker_div .datepicker_links { padding: 0; }
  body.bb-site #datepicker_div .datepicker_control a, body.bb-site #datepicker_div .datepicker_links a { display: block; padding: 0 10px !important; line-height: 34px; font-size: 14px; }
  body.bb-site #datepicker_div .datepicker_links label { display: block; padding: 0 10px; line-height: 34px; font-size: 14px; }
  body.bb-site #datepicker_div .datepicker_header { height: auto; padding: 4px 0; }
  body.bb-site #datepicker_div .datepicker_header select { font-size: 16px; height: 30px; padding: 0 6px !important; }
  body.bb-site #datepicker_div td { font-size: 16px !important; height: 34px; line-height: 34px; }
  body.bb-site #datepicker_div td a { line-height: 34px; }
}

/* every hover / focus / active state AA below 1250 (live: "Back to top" turns white on #E3E3E3, 1.3:1; the desktop menu's
   Book Now hover gets its blue background only through li:hover, so a focused link was white on white) */
@media (max-width: 1249px) {
  /* live's tag cloud starts with an empty link to /blog/tag/ (kept verbatim, D5); padded for taps it indented the first
     tag by 10px (3.18 finding 7). It has no text, so it takes no room below 1250 (still in the markup, as on live). */
  body.bb-site #page-container .panel .text a:empty { display: none; }
  body.bb-site #page-container div.top a:hover, body.bb-site #page-container div.top a:focus, body.bb-site #page-container div.top a:active { color: #ffffff; background: #5c5c5c; }
  body.bb-site .datepicker_control { background: #1e7d06; }
}
@media (min-width: 980px) and (max-width: 1249px) {
  body.bb-site #page-container #menu li.alt a:hover, body.bb-site #page-container #menu li.alt a:focus { background: #1772b3; color: #ffffff; }
}

/* =================== fix round 2 (3.18 round 2, 2026-10-07) =================== */
/* B1 keyboard focus below 1250: from 1250 up bb-design.css hands the ring back to the browser, as live. Below 1250 every state
   is AA, so the ring is drawn explicitly in two colours (WCAG technique C40): a 2px white band against the element, then a
   2px near-black ring outside it. Whatever the background (white page, #0869ae phone menu, #0e6f70 contact card, green
   buttons), one of the two colours differs from it by 3:1 or more. */
@media (max-width: 1249px) {
  body.bb-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; } /* a link wrapping onto two lines keeps the white band at the line break */
  /* desktop-style menu (980 to 1249): each item is a position:relative li, so the NEXT item (the active one has a blue
     background) painted over the right-hand side of a focused item's ring; the focused item's li goes on top */
  body.bb-site #page-container #menu li:focus-within { z-index: 2; }
  /* home Latest Blogs and sidebar titles: from 1170 to 1249 they keep live's 16px type on a 14px pitch, so the white band of a
     wrapped title's second line painted over the first line's letters. These panels are white: the dark ring alone is AA. */
  body.bb-site #page-container .panel .title a:focus-visible { box-shadow: none; }
  /* the booking calendar opens straight under the date field and hid the bottom of its focus ring: 6px gap */
  body.bb-site #datepicker_div { margin-top: 6px; }
  /* the minimised promo pin stays fixed to the bottom of the screen (a 46px bar on phones, a 50px tab from 768): when Tab
     scrolls a link into view at the bottom edge, it now stops above the pin instead of under it (WCAG 2.4.11) */
  html { scroll-padding-bottom: 64px; }
}
/* C1: from 1170 to 1249 the booking bar keeps live's right-hand layout but the calendar is our 300px one, so on a first visit
   (promo auto-opened) the open calendar reached under the promo sheet (z-index 99999 over the calendar's 9999): Thursday to
   Saturday could not be tapped (a tap opened the promo's link or closed the deal). The calendar now sits above the pin below
   1250, as it already did on phones. From 1250 up the two never overlap (calendar right edge 820px at 1250, the sheet starts
   at 850px), so live's stacking is kept there. */
@media (max-width: 1249px) {
  body.bb-site #datepicker_div { z-index: 100001 !important; }
}
@media (max-width: 767px) {
  /* the header logo link wrapped a block image in an inline box, so its ring had no area to draw around */
  body.bb-site #page-container #header .logo a { display: block; width: fit-content; max-width: 100%; }
}

/* C2 home hero video below 1170 (3.18 r2): live's .bg-video is the hero's full width and 150% of its height, and YouTube
   letterboxes its 16:9 video inside that box, so wherever the box is wider than 16:9 (667 to 767, 1014 to 1169) or the
   video comes out shorter than the hero (320 to 413) black bars showed inside the hero (up to 78px a side). The box is
   now a 16:9 shape that always covers the hero: full width, never shorter than 150% of the hero (so YouTube's title strip
   stays out of view, as on live) and never narrower than the hero's height at 16:9 plus 2px of slack. Where there were no
   bars the box and the picture are exactly as before. From 1170 up live's box is kept (its bars sit under the booking band
   and the wave, nothing visible). */
@media (max-width: 1169px) {
  body.bb-site.bb-home #page-container .featuremain.video .bg-video { left: 50%; width: max(100%, 680px); height: auto; aspect-ratio: 16 / 9; min-height: 570px; transform: translate(-50%, -50%); }
}
@media (max-width: 767px) {
  body.bb-site.bb-home #page-container .featuremain.video .bg-video { width: max(100%, 413px); min-height: 345px; }
}

/* C4 home "Latest Blogs" titles, 768 to 1169 (3.18 r2): live's 16px titles on a 14px line pitch touched where they wrap
   (2 lines at 768, 3 at 1024). 21px pitch, as the phone design already has. 1170 up keeps live's 16/14 (live identical). */
@media (min-width: 768px) and (max-width: 1169px) {
  body.bb-site.bb-home #page-container .panel.blog .title { line-height: 21px; margin-bottom: 2px; }
}

/* C5 blog list, category, month archive and tag teasers below 1170 (3.18 r2): teaser text that ran past the round photo
   wrapped under it (stray lines at the photo's left edge, READ MORE beside the photo in one teaser and under it in the
   next). The teaser text is now its own block beside the photo (a new formatting context), so every line, and READ MORE
   at its end, keeps to the text column. 1170 up keeps live's float wrap (live shows the same wrap at 1440). */
@media (max-width: 1169px) {
  body.bb-site #page-container .list .entry > .blog-image + .summary { display: flow-root; }
}

/* =================== fix round 3 (3.18 round 3, 2026-10-08) =================== */
/* C3 phone numbers: the header, contact-card and /contact numbers are tel: links (bb-design.css rule 15 keeps each in its
   surrounding AA colour in every state). Tap height below 1250: below 768 the header link fills its 30px line (inline it is
   only 24px); no line moves. From 768 the header link is 28px as an inline box. The contact card's link is 28px from the
   card's own link rule ("#footer .vcard a", inline-block with 2px or 3px padding, as the email link), and the /contact
   table's 25 to 27px from the table-link padding. */
@media (max-width: 767px) {
  body.bb-site #page-container #header .phone a.tel-link { display: inline-block; }
}

/* =================== fix round 4 (3.18 round 4, 2026-10-08) =================== */
/* C6: the other businesses' numbers in page and post text are tel: links (bb-design.css rule 16 keeps each in the paragraph's
   own AA colour, #444 on white, in every state). As inline text they are 19px tall: 3px of vertical padding gives a 25px tap
   area without moving any line (inline padding does not change the line box), as the search-result titles above. */
@media (max-width: 1249px) {
  body.bb-site #page-container a.dial-link { padding: 3px 0; }
}