/* bv-mobile.css: Bay Views and Harbourview Apartments designed tablet and phone bands (Stage 4, skill Rule 2). Loaded LAST (after bv-design.css).
   Nothing here applies at 1250px and up, where the site is a pixel copy of live.
   Live is a responsive Bootstrap 3 site (viewport meta, menu button below 768px), so its own layout is the starting point at every width below 1250;
   this layer fixes what Divi's wrappers broke (the home hero height chain), what live itself gets wrong on a phone or tablet, and makes every width
   below 1250 WCAG AA: 14px text floor, 16px form fields, 24px tap targets (44px for menu items and the menu button), AA colours in every state.
   Started from the kit's ilaunch-responsive.template.css (expanded reference copy: build/stage4/bv-ilaunch-responsive.from-kit.css: button and link
   states, form layout, tel links) with every selector rewritten for this bootstrap-era template (nav.navbar, #feature, .container-main-wrapper,
   footer.base), and its AA palette recomputed for this site's orange and blue:
     --bv-orange     #ed8d51  live's orange (menu current item, buttons, header phone, Read More): white on it 2.5:1, it on white 2.5:1 (kept at 1250+)
     --bv-orange-aa  #b3561c  the same hue darkened: white on it 4.9:1, it on white 4.9:1
     --bv-blue       #3b72b3  live's nav blue: white on it 4.95:1 (passes, kept)
     --bv-sky-aa     #2c5c93  live's Book Now blue #4f8cd3 (white 3.5:1) darkened: white on it 6.8:1, and set apart from the #3b72b3 bar
   $P = body.bv-site #page-container, $H = body.bv-site.bv-home #page-container. */

@media (max-width: 1249px) {
  body.bv-site { --bv-orange-aa: #b3561c; --bv-sky-aa: #2c5c93; --bv-blue: #3b72b3; --bv-navy: #274c78; }
}

/* =========================================================================================================
   1. Structure below 768: the home hero fills the screen as on live (Divi's wrappers broke live's html/body
      height:100% chain, so it collapsed to a strip with the icon banners hanging below it)
   ========================================================================================================= */
@media (max-width: 767px) {
  body.bv-site.bv-home #page-container #feature { height: 100vh; height: 100svh; min-height: 650px; }
  body.bv-site.bv-home #page-container #feature > .featuremain { height: 100%; min-height: 650px; }
}
/* the two deal pages show the rotating slider (not a banner): on a phone live itself shows a 100px strip of it inside its 350px hero box (the
   slider's height:100% resolves against an auto-height box); the slider fills the same 350px box instead, so nothing below moves */
@media (max-width: 767px) {
  body.bv-site:not(.bv-home) #page-container #feature:has(> .featuremain) { height: 350px; }
  body.bv-site:not(.bv-home) #page-container #feature > .featuremain { height: 100%; min-height: 350px; }
}

/* 768 to 1249: the fixed header is 164 to 215px tall depending on how the menu wraps, while live's hero starts at a fixed 160, 200 or 300px:
   at 768 to 991 that left an 85px white band under the menu and at 992 to 1199 the menu covered the top 14px of the photo. The hero starts where
   the header ends (bv-sitewide.php keeps --bv-navh equal to the header's height; without the script live's margins stay) */
@media (min-width: 768px) and (max-width: 1249px) {
  html:has(body.bv-site) body.bv-site #page-container #feature { margin-top: var(--bv-navh, 200px); }
}
/* a short screen (a phone turned sideways, 768 to 1249 wide but under 500 tall): the 215px fixed header would hold half the screen, so it scrolls away with the page */
@media (min-width: 768px) and (max-width: 1249px) and (max-height: 500px) {
  body.bv-site #page-container nav.navbar-fixed-top { position: absolute; }
}

/* =========================================================================================================
   2. AA colours below 1250 (live's orange #ed8d51 fails AA both as text on white and under white text, 2.5:1;
      its Book Now blue #4f8cd3 3.5:1; Bootstrap's phone-menu highlight #2cd2ff 1.8:1)
   ========================================================================================================= */
@media (max-width: 1249px) {
  /* header phone number (orange on white) */
  body.bv-site #page-container nav.navbar .phone a, body.bv-site #page-container nav.navbar .phone a:is(:link, :visited, :hover, :focus, :active) { color: var(--bv-orange-aa) !important; }
  /* buttons: white on orange at rest; live's own hover (white on #3b72b3, 4.95:1) and Bootstrap's focus (white on #286090) already pass */
  /* (the offer band's and the blue panel's outline buttons and the teaser text links keep live's own, more specific rules) */
  body.bv-site #page-container :is(a.btn, a.btn-primary, input.btn, input.btn-primary) { background-color: var(--bv-orange-aa); color: #ffffff; }
  body.bv-site #page-container :is(a.btn, a.btn-primary, input.btn, input.btn-primary):is(:hover, :active) { background-color: var(--bv-blue); color: #ffffff; }
  body.bv-site #page-container :is(a.btn, a.btn-primary, input.btn, input.btn-primary):focus { background-color: #286090; color: #ffffff; }
  body #page-container .et_pb_section .bv-contact-form.et_pb_contact_form_container.et_pb_module .et_pb_button.et_pb_contact_submit { background-color: var(--bv-orange-aa) !important; }
  body #page-container .et_pb_section .bv-contact-form.et_pb_contact_form_container.et_pb_module .et_pb_button.et_pb_contact_submit:is(:hover, :active) { background-color: var(--bv-blue) !important; }
  body #page-container .et_pb_section .bv-contact-form.et_pb_contact_form_container.et_pb_module .et_pb_button.et_pb_contact_submit:focus { background-color: #286090 !important; }
  /* the offer band: white words on live's orange picture (2.9:1): the same shape, filled with the AA orange (4.9:1) */
  body.bv-site.bv-home #page-container #special .text { background-image: none !important; isolation: isolate; }
  body.bv-site.bv-home #page-container #special .text::before { content: ""; position: absolute; inset: 0; z-index: -1; background-color: var(--bv-orange-aa);
    -webkit-mask: url(/wp-content/uploads/ilaunch/skin/special-text-bg.png) center center / cover no-repeat; mask: url(/wp-content/uploads/ilaunch/skin/special-text-bg.png) center center / cover no-repeat; }
  /* the "Best Price Guaranteed" panel: live's blue at 90% over the photo; solid below 1250 (white on it 4.95:1 wherever the photo is) */
  body.bv-site.bv-home #page-container div.banner .banner-text { background-color: var(--bv-blue); }
  /* blog teaser "Read More" (a text link from 992, orange on white) */
  @media (min-width: 992px) {
    body.bv-site.bv-home #page-container .row.blog-row div.col-md-4 a.btn:is(:link, :visited) { color: var(--bv-orange-aa); background-color: transparent; }
  }
  /* menu (768 and up): the current page and the hovered item are white on live's orange, the drop-down is white on orange and its hovered item orange on white */
  body.bv-site #page-container .navbar-custom .navbar-nav li.active > a:is(:link, :visited, :hover, :focus, :active),
  body.bv-site #page-container .navbar-custom .navbar-nav > li:hover > a:is(:link, :visited, :hover, :focus, :active),
  body.bv-site #page-container .navbar-custom .navbar-nav > li > a:is(:hover, :focus, :active),
  body.bv-site #page-container .navbar-default .navbar-nav > .active > a,
  body.bv-site #page-container .navbar-default .navbar-nav > .active > a:is(:hover, :focus) { color: #ffffff !important; background-color: var(--bv-orange-aa) !important; }
  body.bv-site #page-container .navbar-custom .navbar-nav li ul { background-color: var(--bv-orange-aa); }
  body.bv-site #page-container .navbar-custom .navbar-nav li:hover li a:is(:link, :visited) { color: #ffffff; background-color: var(--bv-orange-aa); }
  body.bv-site #page-container .navbar-custom .navbar-nav li li:is(:hover, .active),
  body.bv-site #page-container .navbar-custom .navbar-nav li li a:is(:hover, :focus, :active),
  body.bv-site #page-container .navbar-custom .navbar-nav li li.active a,
  body.bv-site #page-container .navbar-custom .navbar-nav li:hover li.active a,
  body.bv-site #page-container .navbar-custom .navbar-nav li li:hover a:hover { color: var(--bv-orange-aa) !important; background-color: #ffffff !important; }
  /* Book Now: live's light blue (white on it 3.5:1) darkened; hovered, the AA orange like the other items */
  body.bv-site #page-container .navbar-custom .navbar-nav > li.alt > a:is(:link, :visited) { color: #ffffff; background-color: var(--bv-sky-aa); }
  body.bv-site #page-container .navbar-custom .navbar-nav > li.alt > a:is(:hover, :focus, :active),
  body.bv-site #page-container .navbar-custom .navbar-nav > li.alt:hover > a:is(:link, :visited) { color: #ffffff !important; background-color: var(--bv-orange-aa) !important; }
  /* form field hints (#999, 2.8:1) */
  body.bv-site #page-container .bv-contact-form .et_pb_contact .input::placeholder { color: #6b6b6b; }
}

/* =========================================================================================================
   3. Type floor, fields and tap targets below 1250
   ========================================================================================================= */
@media (max-width: 1249px) {
  /* the menu button's name comes from its aria-label (same words); its 1px Bootstrap screen-reader span reads as 8px text to every audit */
  body.bv-site #page-container .navbar-toggle .sr-only { display: none; }
  /* forms and the search field: 16px fields (no zoom-on-focus on iOS) */
  body.bv-site #page-container .bv-contact-form .et_pb_contact p input.input,
  body.bv-site #page-container .bv-contact-form .et_pb_contact p textarea.input,
  body.bv-site #page-container .bv-contact-form .et_pb_contact p input.input.et_pb_contact_captcha,
  body.bv-site #page-container .page-content table.searchpage input[type="text"] { font-size: 16px; }
  /* footer contact lines and menus: 24px tap height without moving the lines (inline padding grows the hit area only) */
  body.bv-site #page-container footer.base .vcard a { display: inline-block; padding: 3px 0; margin: -3px 0; }
  body.bv-site #page-container footer.base :is(.footermenu, .infomenu) a { display: inline-block; padding: 3px 0; margin: -3px 0; }
  /* the blog sidebar's links */
  body.bv-site #page-container .well a { display: inline-block; padding: 3px 0; margin: -3px 0; }
}

/* site map: list links stay inline (a wrapped item keeps its bullet on the first line); vertical padding gives a 24px+ hit area */
@media (max-width: 1249px) {
  body.bv-site.page-id-1153 #page-container .page-content li a { display: inline; padding: 4px 0; }
}

/* =========================================================================================================
   4. Phone (below 768): header, menu, contact table, text, forms, footer
   ========================================================================================================= */
@media (max-width: 767px) {
  /* menu button: 48 x 44, bars dark enough to see (live #ccc bars on white, 1.6:1) */
  body.bv-site #page-container .navbar-custom .navbar-toggle { width: 48px; height: 44px; padding: 10px 12px; margin: 3px 8px 0 0; border: 1px solid #8a8a8a; border-radius: 4px; background-color: #ffffff; }
  body.bv-site #page-container .navbar-custom .navbar-toggle .icon-bar { width: 22px; height: 2px; background-color: #333333; }
  body.bv-site #page-container .navbar-custom .navbar-toggle:is(:hover, :focus, :active) { background-color: #e2e2e2; }
  /* the open menu: every item, not live's 250px box that cuts off after Location; the Contact Us sub-items at 16px in 44px rows; Book Now as a button */
  body.bv-site #page-container nav.navbar .navbar-collapse { max-height: calc(100vh - 95px); max-height: calc(100svh - 95px); overflow-y: auto; }
  body.bv-site #page-container .navbar-custom .navbar-nav { margin: 0; }
  body.bv-site #page-container .navbar-custom .navbar-nav > li { margin: 0; border-top: 1px solid rgba(255, 255, 255, 0.25); }
  body.bv-site #page-container .navbar-custom .navbar-nav li li a { font-size: 16px; line-height: 44px; padding: 0 15px; color: #ffffff; background: var(--bv-navy); }
  body.bv-site #page-container .navbar-custom .navbar-nav li li a:is(:hover, :focus, :active), body.bv-site #page-container .navbar-custom .navbar-nav li li.active > a { color: #ffffff !important; background: var(--bv-orange-aa) !important; }
  body.bv-site #page-container .navbar-custom .navbar-nav > li.alt { padding: 10px 15px 14px; }
  body.bv-site #page-container .navbar-custom .navbar-nav > li.alt > a:is(:link, :visited) { color: #ffffff; background: var(--bv-sky-aa); border: 2px solid #ffffff; line-height: 46px; height: 50px; }

  /* the contact details table (live: 500px wide, its heading running off the screen) fits the phone */
  body.bv-site #page-container .page-content table[width="500"] { width: 100%; max-width: 100%; table-layout: auto; }
  body.bv-site #page-container .page-content table[width="500"] h4 { overflow-wrap: break-word; }

  /* forms: label over a full-width 48px field, the question and its field on one row, a full-width SUBMIT */
  body.bv-site #page-container .bv-contact-form .et_pb_contact p input.input { height: 48px; padding: 10px 12px; }
  body.bv-site #page-container .bv-contact-form .et_pb_contact p textarea.input { height: 140px; padding: 10px 12px; }
  body.bv-site #page-container .bv-contact-form .et_pb_contact_right p.clearfix { height: auto; padding: 0 0 4px; line-height: 48px; }
  body.bv-site #page-container .bv-contact-form .et_pb_contact_right p.clearfix::before { content: "Verification"; display: block; height: 24px; margin: 0 0 5px; }
  body.bv-site #page-container .bv-contact-form .et_pb_contact p input.input.et_pb_contact_captcha { width: 120px; height: 48px; margin: 0 0 0 8px; padding: 10px 12px; border: 1px solid #8a8a8a; }
  body #page-container .et_pb_section .bv-contact-form.et_pb_contact_form_container.et_pb_module .et_pb_button.et_pb_contact_submit { display: block; width: 100%; height: 52px; line-height: 52px !important; padding: 0 20px !important; background-position: right 18px center !important; }
  /* the subscribe page's unsubscribe link stands under the button with room to tap */
  body.bv-site.page-id-1148 #page-container .page-content p.bv-unsub-link { margin: 16px 0 0; }
  body.bv-site.page-id-1148 #page-container .page-content p.bv-unsub-link a { display: inline-block; padding: 6px 0; }

  /* live's inline text-align: justify opens wide word gaps on a phone column (post bodies and their headings) */
  body.bv-site #page-container .container-main-wrapper [style*="justify"] { text-align: left !important; }

  /* footer menu: links in centred rows with room to tap */
  body.bv-site #page-container footer.base .footermenu ul { display: flex; flex-wrap: wrap; justify-content: center; column-gap: 18px; row-gap: 6px; padding: 0; }
  body.bv-site #page-container footer.base .footermenu li { float: none; width: auto; background: none !important; line-height: 24px; padding: 0; }
}

/* the slider arrows are white glyphs straight on the photo (on a pale sky they all but vanish): below 1250 they sit on a dark disc */
@media (max-width: 1249px) {
  body.bv-site #page-container #feature .sp-arrow { background-color: rgba(0, 0, 0, 0.55); border-radius: 50%; }
}

/* a phone number is never split over two lines */
@media (max-width: 1249px) {
  body.bv-site #page-container a.tel-link, body.bv-site #page-container a[href^="tel:"] { white-space: nowrap; }
}

/* the header is fixed at every width, so an in-page jump (the FAQ categories, a field reached by Tab) would land under it: jumps stop 13px below
   it (bv-sitewide.php keeps --bv-navh equal to the header's height; an ARRIVAL from another page is scrolled by Divi's own script, which
   bv-sitewide.php gives the same offset) */
html:has(body.bv-site) { scroll-padding-top: calc(var(--bv-navh, 0px) + 13px); }

/* =========================================================================================================
   5. 768 to 1249: the home blog teasers (live's absolutely placed Read More button sat on top of the summary text
      at 768 to 991)
   ========================================================================================================= */
@media (min-width: 768px) and (max-width: 991px) {
  body.bv-site.bv-home #page-container .row.blog-row div.col-md-4 { height: auto; min-height: 350px; padding-bottom: 24px; vertical-align: top; }
  body.bv-site.bv-home #page-container .row.blog-row div.col-md-4 a.btn { position: relative; left: auto; bottom: auto; margin: 0; }
}

/* =========================================================================================================
   6. The menu's Contact Us drop-down (Reviews, FAQs) from 768 to 1249: live opens it on hover only, so on a touch
      tablet a tap went straight to the Contact Us page and the two pages could not be reached from the menu, and a
      keyboard visitor never reached them either. bv-sitewide.php marks a touch visitor (html.bv-touch) and opens the
      list on the first tap (li.bv-open); a second tap on Contact Us opens its page, a tap elsewhere or Escape closes it.
      For a keyboard visitor (html.bv-kb) the list opens while focus is on Contact Us or inside it (:focus-within) and
      Escape shuts it (li.bv-kb-shut). A mouse keeps live's hover.
   ========================================================================================================= */
@media (min-width: 768px) and (max-width: 1249px) {
  html.bv-touch body.bv-site #page-container .navbar-custom .navbar-nav li:hover ul { display: none; }
  html.bv-touch body.bv-site #page-container .navbar-custom .navbar-nav li.bv-open > ul { display: block; }
  html.bv-touch body.bv-site #page-container .navbar-custom .navbar-nav > li.bv-open > a:is(:link, :visited) { color: #ffffff !important; background-color: var(--bv-orange-aa) !important; }
  body.bv-site #page-container .navbar-custom .navbar-nav li:is(:hover, .bv-open) li a:is(:link, :visited) { color: #ffffff; background-color: var(--bv-orange-aa); }
  html.bv-kb body.bv-site #page-container .navbar-custom .navbar-nav > li:focus-within:not(.bv-kb-shut) > ul { display: block; }
  html.bv-kb body.bv-site #page-container .navbar-custom .navbar-nav > li:focus-within:not(.bv-kb-shut) > a:is(:link, :visited) { color: #ffffff !important; background-color: var(--bv-orange-aa) !important; }
  html.bv-kb body.bv-site #page-container .navbar-custom .navbar-nav > li:focus-within li a:is(:link, :visited) { color: #ffffff; background-color: var(--bv-orange-aa); }
  /* the list's items are 36px tall touch targets (live: 22px lines) */
  body.bv-site #page-container .navbar-custom .navbar-nav li li a { line-height: 36px; }
  /* the focused item is always the white box with a dark ring inside it */
  html body.bv-site #page-container .navbar-custom .navbar-nav li li > a:focus-visible:is(:link, :visited) { color: var(--bv-orange-aa) !important; background-color: #ffffff !important; outline: 2px solid var(--bv-navy) !important; outline-offset: -4px; }
}

/* =========================================================================================================
   7. Audit round 1 (mobile_audit at 390): taps under 24px, text under 14px, greys under 4.5:1
   ========================================================================================================= */
@media (max-width: 1249px) {
  /* footer email and phone lines (14px line boxes): a 24px hit area without moving the lines */
  body.bv-site #page-container footer.base .vcard li a { display: inline-block; padding: 5px 0; margin: -5px 0; }
  /* the footer's Facebook and RSS icons are 24 x 23 */
  body.bv-site #page-container footer.base .vcard .socialmedia a { height: 24px; padding: 0; margin: 0; }
  /* photo links wrap their picture (an inline link around a block picture measured 22px tall) */
  body.bv-site #page-container .blog-image > a, body.bv-site #page-container a.gallery-item { display: inline-block; vertical-align: top; }
  body.bv-site.bv-home #page-container .row.blog-row div.blog-image > a { display: block; }
  /* blog: the category line under each title, the page numbers and the page-size labels */
  body.bv-site #page-container .container-main-wrapper p.lead a { display: inline-block; padding: 3px 0; margin: -3px 0; }
  body.bv-site #page-container .page-content .paging a { display: inline-block; min-width: 32px; padding: 4px 0; text-align: center; }
  body.bv-site #page-container .page-content span.options a.label { display: inline-block; min-width: 32px; padding: 5px 8px; font-size: 14px; line-height: 16px; }
  body.bv-site #page-container .page-content .label-default[href]:is(:link, :visited) { background-color: #666666; }
  body.bv-site #page-container .page-content .label-default[href]:is(:hover, :focus, :active) { background-color: #333333; color: #ffffff; }
  body.bv-site #page-container .page-content .label-primary[href]:is(:hover, :focus, :active) { background-color: #1f4d75; color: #ffffff; }
  /* the home blog teasers' dates (13px from 992) */
  body.bv-site.bv-home #page-container .row.blog-row div.date { font-size: 14px; }
  /* the subscribe page's unsubscribe link */
  body.bv-site.page-id-1148 #page-container .page-content p.bv-unsub-link a { display: inline-block; padding: 3px 0; margin: -3px 0; }
  /* the contact details table's phone and email links */
  body.bv-site #page-container .page-content td a:not(.btn, .btn-primary) { display: inline-block; padding: 3px 0; margin: -3px 0; }
  /* reviews: the reviewer, place and date lines (#777, 4.48:1) */
  body.bv-site #page-container blockquote :is(footer, small, .small, cite, .details) { color: #666666; }
  /* small print set inline in live's copy (things to do 13px, the offers' terms 12px) */
  body.bv-site #page-container .page-content :is(span, em, font, small):is([style*="font-size: small"], [style*="font-size: 12px"]) { font-size: 14px !important; line-height: 1.5; }
}

/* =========================================================================================================
   8. Phone details from the look round: the search field takes the row beside its button at the button's height;
      the deal pages' Enquire and Back to buttons (stacked on a phone) get a gap between them
   ========================================================================================================= */
@media (max-width: 767px) {
  body.bv-site #page-container .page-content table.searchpage, body.bv-site #page-container .page-content table.searchpage :is(tbody, tr) { display: block; width: auto; }
  body.bv-site #page-container .page-content table.searchpage td { display: flex; align-items: stretch; gap: 8px; width: auto; padding: 0; font-size: 0; }
  body.bv-site #page-container .page-content table.searchpage input[type="text"] { flex: 1 1 auto; min-width: 0; height: 42px; margin: 0; box-sizing: border-box; font-size: 16px; }
  body.bv-site #page-container .page-content table.searchpage input.btn { flex: 0 0 auto; margin: 0; font-size: 14px; }
  body.bv-site:is(.page-id-1151, .page-id-1152) #page-container .page-content .btn { margin: 0 4px 10px; }
}

/* photo galleries (things to do, facilities, location): Bootstrap's floated thumbnails stagger when one thumbnail is taller than its neighbours
   (at 992 to 1199 the attractions came out as rows of 3, 3, 3, 1, 3, 1, 2). Each visual row starts on a new line (Divi trap: clear the first column
   of every row per breakpoint, never flex the row) */
@media (max-width: 991px) {
  body.bv-site #page-container .gallery-row div.thumb:nth-of-type(2n+1) { clear: left; }
}
@media (min-width: 992px) and (max-width: 1199px) {
  body.bv-site #page-container .gallery-row div.thumb:nth-of-type(3n+1) { clear: left; }
}

/* inner pages on a phone: the On-site Tour Desk and Free Parking badges sat on top of the hero photo and hid it (Jake, 13 Oct, things to do).
   They now sit side by side in a row directly under the photo; the home hero and the slider pages are unchanged */
@media (max-width: 767px) {
  body.bv-site:not(.bv-home) #page-container #feature:not(:has(> .featuremain)) { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 10px; padding: 0 10px 10px; box-sizing: border-box; }
  body.bv-site:not(.bv-home) #page-container #feature:not(:has(> .featuremain)) > .featureimage { flex: 0 0 calc(100% + 20px); margin: 0 -10px; }
  body.bv-site:not(.bv-home) #page-container #feature:not(:has(> .featuremain)) > .iconbanner,
  body.bv-site:not(.bv-home) #page-container #feature:not(:has(> .featuremain)) > .iconbanner.bottom { position: static; flex: 0 1 calc(50% - 5px); max-width: 206px; margin: 10px 0 0; top: auto; right: auto; left: auto; }
  body.bv-site:not(.bv-home) #page-container #feature:not(:has(> .featuremain)) > .iconbanner img { display: block; width: 100%; height: auto; }
}