/* pi-mobile.css: Paradise Isles designed tablet and phone bands (Stage 4, skill Rule 2). Loaded LAST (after pi-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 (a 100px slider strip on the slider
   pages, a menu clipped to 250px, a 2000px room photo shown uncropped), 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 (rest, hover, focus, active).
   Started from the kit's ilaunch-responsive.template.css (button and link states, form layout, calendar, tel links); every selector rewritten for this
   bootstrap-era template (nav.navbar, #feature, #booking, .container-main-wrapper, footer.base), and its AA palette recomputed for this site's blue:
     --pi-blue      #2da4db  live's blue (headings, header phone, nav active, footer): white on it 2.8:1, it on white 2.8:1 (kept at 1250+)
     --pi-blue-aa   #1a7098  the same hue darkened: white on it 5.5:1, it on white 5.5:1, on the #f0f0f0 header 4.8:1
     --pi-blue-deep #135471  the copyright band (live #2388b7, white on it 4.0:1): white 8.3:1
     --pi-grey-aa   #666666  live's #777 greys (blockquote footers, labels): 5.7:1 on white
   $P = body.pi-site #page-container, $H = body.pi-site.pi-home #page-container. */

@media (max-width: 1249px) {
  body.pi-site { --pi-blue-aa: #1a7098; --pi-blue-deep: #135471; --pi-grey-aa: #666666; }
}

/* =========================================================================================================
   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 100px strip); the slider pages (/test, the two deals) get a full
      405px slider instead of live's own 100px strip; the room photos are cropped to the phone instead of shown
      at their 2000px size.
   ========================================================================================================= */
@media (max-width: 767px) {
  body.pi-site.pi-home #page-container #feature { height: 100vh; height: 100svh; min-height: 654px; }
  body.pi-site.pi-home #page-container #feature > .featuremain { height: 100%; min-height: 654px; }
  body.pi-site:not(.pi-home) #page-container #feature:has(> .featuremain) { height: 405px; }
  body.pi-site:not(.pi-home) #page-container #feature > .featuremain { height: 100%; min-height: 405px; }
}

/* =========================================================================================================
   2. AA colours below 1250 (live's blue #2da4db fails AA both as text on white and under white text)
   ========================================================================================================= */
@media (max-width: 1249px) {
  /* headings: live's blue on white (2.8:1) */
  body.pi-site #page-container :is(h1, h2, h3, h4, .h1, .h2, .h3) { color: var(--pi-blue-aa); }
  body.pi-site #page-container #booking h3, body.pi-site #page-container .list.rooms .entry h2 { color: var(--pi-blue-aa); }
  body.pi-site #page-container footer.base :is(h1, h2, h3, h4) { color: #ffffff; }
  body.pi-site.pi-home #page-container .content-bg-wrapper h2 { color: #334c65; }
  body.pi-site.pi-home #page-container #special :is(h2, h3, h4) { color: #333333; }
  /* header phone number on the #f0f0f0 bar (2.5:1) */
  body.pi-site #page-container .navbar .phone a { color: var(--pi-blue-aa) !important; }
  /* footer: white on the blue (2.8:1) and on the copyright band (4.0:1) */
  body.pi-site #page-container footer.base { background-color: var(--pi-blue-aa); }
  body.pi-site #page-container footer.base .copyright-area-wrapper { background-color: var(--pi-blue-deep); }
  /* buttons: live's hover is white on the light blue (2.8:1); rest stays white on #2d2f32 (13.4:1) */
  body.pi-site #page-container :is(.btn, .btn-primary, .alt a, a.btn, #special a.btn):is(:hover, :focus, :active),
  body.pi-site #page-container .navbar-custom .navbar-nav > li.alt > a:is(:hover, :focus, :active) { background-color: var(--pi-blue-aa) !important; color: #ffffff !important; }
  body #page-container .et_pb_section .pi-contact-form.et_pb_contact_form_container.et_pb_module .et_pb_button.et_pb_contact_submit:is(:hover, :focus, :active) { background: var(--pi-blue-aa) !important; color: #ffffff !important; }
  /* menu: active and hover items are white on the light blue (2.8:1, and #2cd2ff 1.8:1 in the phone menu) */
  body.pi-site #page-container .navbar-custom .navbar-nav li.active > a:is(:link, :visited, :hover, :focus, :active),
  body.pi-site #page-container .navbar-custom .navbar-nav > li:hover > a:is(:link, :visited, :hover, :focus, :active),
  body.pi-site #page-container .navbar-custom .navbar-nav > li > a:is(:hover, :focus, :active),
  body.pi-site #page-container .navbar-default .navbar-nav > .active > a,
  body.pi-site #page-container .navbar-default .navbar-nav > .active > a:is(:hover, :focus) { color: #ffffff !important; background-color: var(--pi-blue-aa) !important; }
  /* the menu's drop-down (Contact Us: FAQs, Reviews, Blog) from 768: white on the light blue, and the light blue on white when hovered or current */
  body.pi-site #page-container .navbar-custom .navbar-nav li ul { background-color: var(--pi-blue-aa); }
  body.pi-site #page-container .navbar-custom .navbar-nav li li:is(:hover, .active),
  body.pi-site #page-container .navbar-custom .navbar-nav li li a:is(:hover, :focus, :active),
  body.pi-site #page-container .navbar-custom .navbar-nav li li.active a,
  body.pi-site #page-container .navbar-custom .navbar-nav li:hover li.active a,
  body.pi-site #page-container .navbar-custom .navbar-nav li li:hover a:hover { color: var(--pi-blue-aa) !important; background-color: #ffffff !important; }
  /* review list greys (#777, 4.5:1 short of AA by a hair) and the page-size labels */
  body.pi-site #page-container blockquote :is(footer, small, .small, cite, .details) { color: var(--pi-grey-aa); }
  body.pi-site #page-container .label-default[href]:is(:link, :visited) { background-color: var(--pi-grey-aa); }
  body.pi-site #page-container .label-default[href]:is(:hover, :focus, :active) { background-color: #333333; color: #ffffff; }
  body.pi-site #page-container .label-primary[href]:is(:hover, :focus, :active) { background-color: #1f4d75; color: #ffffff; }
  /* form field hints (#999, 2.8:1) */
  body.pi-site #page-container .pi-contact-form .et_pb_contact .input::placeholder { color: #6b6b6b; }
}

/* =========================================================================================================
   3. Type floor, fields and tap targets below 1250
   ========================================================================================================= */
@media (max-width: 1249px) {
  /* booking bar: 16px fields (no zoom-on-focus on iOS) */
  body.pi-site #page-container #booking .form-control { font-size: 16px; }
  /* the menu button's name now comes from its aria-label (same words); its 1px Bootstrap screen-reader span read as 8px text that
     overflows its box to every audit, so it is dropped (the button itself only shows below 768) */
  body.pi-site #page-container .navbar-toggle .sr-only { display: none; }
  /* room photo arrows: slick hides their text with font-size 0 (reads as 0px text); keep it inside the button, transparent (same look) */
  body.pi-site #page-container .slick-prev, body.pi-site #page-container .slick-next { font-size: 14px; line-height: 83px; color: transparent; text-indent: 0; overflow: hidden; white-space: nowrap; }
  /* footer contact lines and menu: 24px tap height without moving the lines (inline padding grows the hit area only) */
  body.pi-site #page-container footer.base .vcard a { display: inline-block; padding: 3px 0; margin: -3px 0; }
  body.pi-site #page-container footer.base .footermenu a { display: inline-block; padding: 5px 0; margin: -5px 0; }
  /* the blog sidebar's category links */
  body.pi-site #page-container .well .title a { display: inline-block; padding: 3px 0; margin: -3px 0; }
  /* forms: 16px fields */
  body.pi-site #page-container .pi-contact-form .et_pb_contact p input.input,
  body.pi-site #page-container .pi-contact-form .et_pb_contact p textarea.input,
  body.pi-site #page-container .pi-contact-form .et_pb_contact p input.input.et_pb_contact_captcha,
  body.pi-site #page-container .page-content table input[type="text"] { font-size: 16px; }
  /* the Google Translate button (Google prints it at 10pt) */
  body.pi-site #page-container #translate-widget .goog-te-gadget-simple, body.pi-site #page-container #translate-widget .goog-te-gadget-simple * { font-size: 14px !important; }
  body.pi-site #page-container #translate-widget .goog-te-gadget-simple a { display: inline-block; padding: 4px 0; margin: -4px 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.pi-site.page-id-1147 #page-container .page-content li a { display: inline; padding: 4px 0; }
}

/* =========================================================================================================
   4. Footer below 1250: the list bullets live paints in its own blue were invisible on live's blue footer; on the
      darker AA footer they showed, so the footer lists carry no marker (live shows none either)
   ========================================================================================================= */
@media (max-width: 1249px) {
  body.pi-site #page-container footer.base li { list-style: none; list-style-image: none; }
}

/* =========================================================================================================
   5. Phone (below 768): header, menu, hero, rooms, home text, forms, footer
   ========================================================================================================= */
@media (max-width: 767px) {
  /* header: live's fixed 77px bar (logo tab, phone number, menu button). The Google Translate button, which live hides on phones, sits at the
     right of the phone-number row so it works at every width */
  body.pi-site #page-container #translate-widget { display: block; position: absolute; top: 0; right: 10px; width: auto; margin: 0; z-index: 1000; }
  body.pi-site #page-container #translate-widget .goog-te-gadget-simple { padding: 2px 4px; line-height: 20px; white-space: nowrap; }
  /* menu button: 44 x 44, bars dark enough to see (live #ccc on #f0f0f0 is 1.3:1) */
  body.pi-site #page-container .navbar-custom .navbar-toggle { width: 48px; height: 44px; padding: 10px 12px; margin: 3px 10px 0 0; border: 1px solid #8a8a8a; border-radius: 4px; background-color: #ffffff; }
  body.pi-site #page-container .navbar-custom .navbar-toggle .icon-bar { width: 22px; height: 2px; background-color: #333333; }
  body.pi-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 clips after Tours; tall rows; the Contact Us sub-items at 16px; Book Now as a button */
  body.pi-site #page-container nav.navbar .navbar-collapse { max-height: calc(100vh - 77px); max-height: calc(100svh - 77px); overflow-y: auto; border-bottom: 3px solid var(--pi-blue-aa); }
  body.pi-site #page-container .navbar-custom .navbar-nav { margin: 0; }
  body.pi-site #page-container .navbar-custom .navbar-nav > li { margin: 0; border-top: 1px solid #e5e5e5; }
  body.pi-site #page-container .navbar-custom .navbar-nav > li > a { line-height: 50px; padding: 0 15px; }
  body.pi-site #page-container .navbar-custom .navbar-nav li li { border-top: 1px solid #f0f0f0; }
  body.pi-site #page-container .navbar-custom .navbar-nav li li a { font-size: 16px; line-height: 44px; padding: 0 15px; color: #333333; background: #f7f7f7; }
  body.pi-site #page-container .navbar-custom .navbar-nav li li a:is(:hover, :focus, :active), body.pi-site #page-container .navbar-custom .navbar-nav li li.active > a { color: #ffffff; background: var(--pi-blue-aa); }
  body.pi-site #page-container .navbar-custom .navbar-nav > li.alt > a:is(:link, :visited) { color: #ffffff; background: #2d2f32; }

  /* hero: the booking card and the icon tiles centred on the photo (live hangs them 10px from the right) */
  body.pi-site #page-container #booking { left: 50%; right: auto; transform: translateX(-50%); }
  body.pi-site.pi-home #page-container #icon-banner-container { left: 50%; right: auto; transform: translateX(-50%); }
  /* the slider's arrows sat at mid height beside (at 320px, under) the booking card: on a phone they move to the bottom corners of the photo */
  body.pi-site #page-container #feature .sp-arrow { top: auto; bottom: 16px; margin-top: 0; }

  /* apartments: the room photos are 2000 x 650; show each one whole-width and cropped to the phone, not as a 2000px close-up */
  body.pi-site #page-container .list.rooms .room-gallery { min-height: 0; }
  body.pi-site #page-container .list.rooms .room-gallery .slick-slide img { width: 100%; height: 260px; object-fit: cover; }

  /* home: the long "Contact us now to book your holiday" button ran off the screen */
  body.pi-site.pi-home #page-container .content-bg-wrapper .btn { height: auto; max-width: 100%; padding: 13px 20px; line-height: 24px; white-space: normal; }

  /* forms: label over a full-width 48px field, the Verification question and its field on one row, a full-width SUBMIT */
  body.pi-site #page-container .pi-contact-form .et_pb_contact p input.input { height: 48px; padding: 10px 12px; }
  body.pi-site #page-container .pi-contact-form .et_pb_contact p textarea.input { height: 140px; padding: 10px 12px; }
  body.pi-site #page-container .pi-contact-form .et_pb_contact_right p.clearfix { display: flex; flex-wrap: wrap; align-items: center; column-gap: 8px; padding: 0; }
  body.pi-site #page-container .pi-contact-form .et_pb_contact_right p.clearfix::before { flex: 0 0 100%; margin: 0 0 5px; }
  body.pi-site #page-container .pi-contact-form .et_pb_contact p input.input.et_pb_contact_captcha { width: 120px; height: 48px; margin: 0; padding: 10px 12px; border: 1px solid #8a8a8a; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); }
  body #page-container .et_pb_section .pi-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; }

  /* footer menu: four links as two centred rows with room to tap, without live's separators at the row ends */
  body.pi-site #page-container footer.base .footermenu ul { display: flex; flex-wrap: wrap; justify-content: center; column-gap: 24px; row-gap: 6px; }
  body.pi-site #page-container footer.base .footermenu li { float: none; width: auto; padding: 0; background: none !important; line-height: 24px; }
}

/* narrow phones (below 390): the phone number and the full "Select Language" button no longer fit on one row, so the button shows Google's
   icon and its arrow only; the words stay in the link for screen readers */
@media (max-width: 389px) {
  body.pi-site #page-container #translate-widget .goog-te-gadget-simple a > span:first-child { font-size: 0 !important; }
  body.pi-site #page-container #translate-widget .goog-te-gadget-simple a > span:nth-of-type(2) { display: none; }
  body.pi-site #page-container #translate-widget .goog-te-gadget-simple a { min-width: 24px; padding: 4px 2px; text-align: center; }
  /* ...and moves up into the logo row, left of the menu button (positioned on the fixed bar itself) */
  body.pi-site #page-container .navbar-custom .col-md-6.navbar-details { position: static; }
  body.pi-site #page-container #translate-widget { top: 10px; right: 68px; }
}

/* Google Translate on a phone: once a language is picked Google pins its 40px bar to the top and moves <body> down by setting top:40px on it;
   live's fixed header stayed under that bar (logo and menu button half hidden), so it follows the body down. Translated headings can run
   to two lines: the booking title keeps its 77px band for one line but no longer spaces a second line 77px apart. */
@media (max-width: 767px) {
  body.pi-site[style*="top: 40px"] #page-container nav.navbar-fixed-top { top: 40px; }
  body.pi-site #page-container #booking h3 { line-height: 37px; padding: 20px 0; }
}

/* tablet (768 to 991): the room name sat in a 25% column and ran under the text beside it; it takes the full row, the text and Book Now share the next */
@media (min-width: 768px) and (max-width: 991px) {
  body.pi-site #page-container .list.rooms .entry .text h2.col-sm-3 { float: none; width: auto; }
  body.pi-site #page-container .list.rooms .entry .text .col-sm-6 { width: 66.6667%; }
  body.pi-site #page-container .list.rooms .entry .text .col-sm-3 { width: 33.3333%; }
}

/* contact details table on narrow phones: the email address (263px at 20px) no longer fits beside the 80px label column, so label and value
   stack (which also puts "Address:" above the address instead of under it) */
@media (max-width: 479px) {
  body.pi-site.page-id-1135 #page-container .page-content .col-sm-5 table td { display: block; width: auto; padding: 0; }
  body.pi-site.page-id-1135 #page-container .page-content .col-sm-5 table tr { display: block; margin: 0 0 8px; }
}

/* narrow phones: a 42px page title ("Gold Coast Accommodation Specials") has words wider than a 320px screen */
@media (max-width: 479px) {
  body.pi-site #page-container .page-header h1 { font-size: 32px; line-height: 38px; overflow-wrap: break-word; }
}

/* 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.pi-site #page-container #feature .sp-arrow { background-color: rgba(0, 0, 0, 0.55); border-radius: 50%; }
}
/* Fix round 1, N3: on the home page from 768 to 1249 the next arrow sat at mid height under the booking card (live the same), so only the previous
   arrow could be tapped. Both arrows go to the bottom corners of the photo, below the card, as they already do on a phone */
@media (min-width: 768px) and (max-width: 1249px) {
  body.pi-site.pi-home #page-container #feature .sp-arrow { top: auto; bottom: 16px; margin-top: 0; }
}

/* =========================================================================================================
   6. Booking calendar (#datepicker_div, appended to <body>) below 1250: 14px text, 16px month/year pickers,
      AA colours (live: Clear/Close #eee on #888 3.1:1, day names #eee on #777 4.0:1, the picked day white on
      orange 2.0:1), 24px+ taps; on a phone it spans the screen with 40px day rows
   ========================================================================================================= */
@media (max-width: 1249px) {
  body.pi-site #datepicker_div .datepicker_control { background: #595959; }
  body.pi-site #datepicker_div .datepicker_control, body.pi-site #datepicker_div .datepicker_links { font-size: 14px; }
  body.pi-site #datepicker_div .datepicker_titleRow, body.pi-site #datepicker_div .datepicker_titleRow .datepicker_weekEndCell { background: #595959; }
  body.pi-site #datepicker_div .datepicker_titleRow a { color: #ffffff !important; font-size: 14px; }
  body.pi-site #datepicker_div .datepicker_currentDay a { color: #000000 !important; }
  body.pi-site #datepicker_div .datepicker_header, body.pi-site #datepicker_div .datepicker_header select { font-size: 16px; }
  body.pi-site #datepicker_div .datepicker_header select { height: 28px; }
  body.pi-site #datepicker_div .datepicker_header { padding: 2px 0; }
  body.pi-site #datepicker_div .datepicker_control a, body.pi-site #datepicker_div .datepicker_links a, body.pi-site #datepicker_div .datepicker_links label { display: block; line-height: 24px; }
}
@media (max-width: 767px) {
  body.pi-site #datepicker_div { width: calc(100vw - 32px) !important; max-width: 400px; left: 16px !important; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35); }
  body.pi-site #datepicker_div .datepicker_oneMonth { width: 100%; }
  body.pi-site #datepicker_div .datepicker_control a, body.pi-site #datepicker_div .datepicker_links a, body.pi-site #datepicker_div .datepicker_links label { display: block; line-height: 36px; }
  body.pi-site #datepicker_div td a { line-height: 40px; }
}

/* reviews pager: page numbers and arrows as 32px-wide, 32px-tall targets (live's are the bare digits) */
@media (max-width: 1249px) {
  body.pi-site #page-container .page-content .paging a { display: inline-block; min-width: 32px; padding: 4px 0; text-align: center; }
  body.pi-site #page-container .page-content span.options a.label { display: inline-block; min-width: 32px; padding: 5px 8px; }
}

/* tablet (768 to 1169): the room photo is shown whole-width and cropped to 420px high (live shows the left 768 to 1169px of a 2000px photo) */
@media (min-width: 768px) and (max-width: 1169px) {
  body.pi-site #page-container .list.rooms .room-gallery .slick-slide img { width: 100%; height: 420px; object-fit: cover; }
}

/* photo galleries: Bootstrap's floated thumbnails stagger when one thumbnail is taller than its neighbours (attractions at 992 to 1199 came out as rows
   of 3, 3, 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.pi-site #page-container .gallery-row div.thumb:nth-of-type(2n+1) { clear: left; }
}
@media (min-width: 992px) and (max-width: 1199px) {
  body.pi-site #page-container .gallery-row div.thumb:nth-of-type(3n+1) { clear: left; }
}

/* a phone number is never split over two lines (the FAQ's "07 5539 9907" broke after "07" on a phone) */
@media (max-width: 1249px) {
  body.pi-site #page-container a.tel-link, body.pi-site #page-container a[href^="tel:"] { white-space: nowrap; }
}

/* phones: the 77px header is fixed, so an in-page jump (the FAQ categories, #submitenquiry, #submitreview) and a field reached by Tab would land under
   it; jumps stop below it instead. Fix round 1 (N2): from 480 the header is 97px tall (as on live), so the stop moves to 110px there. An ARRIVAL from
   another page (/faq#faq2 from the search results) is scrolled by Divi's own script, which ignores this: pi-sitewide.php gives that scroll the
   same offset. */
@media (max-width: 767px) {
  html:has(body.pi-site) { scroll-padding-top: 90px; }
}
@media (min-width: 480px) and (max-width: 767px) {
  html:has(body.pi-site) { scroll-padding-top: 110px; }
}

/* the slider pages (/test, the two deals) on a phone: the 405px slider has the booking card from 141px down, so its arrows go to the strip of photo
   above the card instead of beside the Check Availability button (at 320 they overlapped the card) */
@media (max-width: 767px) {
  body.pi-site:not(.pi-home) #page-container #feature .sp-arrow { top: 90px; bottom: auto; }
  /* the deal page's Enquire and Back to buttons stack on a phone: a gap between them */
  body.pi-site #page-container .page-content.deal-details .btn { margin: 0 4px 10px; }
}

/* =========================================================================================================
   7. The menu's Contact Us drop-down (FAQs, Reviews, Blog) from 768 to 1249 (Stage 3b F1 and F2).
      F1: live opens it on hover only, so on a touch tablet a tap went straight to the Contact Us page and the three
      pages could not be reached from the menu. pi-sitewide.php marks a touch visitor (html.pi-touch) and opens the list
      on the first tap (li.pi-open); a second tap on Contact Us opens its page, a tap elsewhere or Escape closes it. For a
      touch visitor the list follows that tap state, not the sticky hover a tap leaves behind. A mouse keeps live's hover.
      F2: when open, the items took live's light blue behind white text from live's `li:hover a` rule (2.8:1): AA blue.
   ========================================================================================================= */
@media (min-width: 768px) and (max-width: 1249px) {
  html.pi-touch body.pi-site #page-container .navbar-custom .navbar-nav li:hover ul { display: none; }
  html.pi-touch body.pi-site #page-container .navbar-custom .navbar-nav li.pi-open > ul { display: block; }
  html.pi-touch body.pi-site #page-container .navbar-custom .navbar-nav > li.pi-open > a:is(:link, :visited) { color: #ffffff !important; background-color: var(--pi-blue-aa) !important; }
  body.pi-site #page-container .navbar-custom .navbar-nav li:is(:hover, .pi-open) li a:is(:link, :visited) { color: #ffffff; background-color: var(--pi-blue-aa); }
}

/* Fix round 1, N1 (keyboard, 768 to 1249): Tab used to go Contact Us > Book Now, so a keyboard visitor could never reach FAQs, Reviews or Blog
   from the menu. The list now also opens while keyboard focus is on Contact Us or inside its list (:focus-within, only while html.pi-kb says the
   visitor is using the keyboard, so a mouse click or a finger tap never holds it open; :has(:focus-visible) cannot be used: Chrome re-checks the next
   link between the two focus steps, finds the list shut and drops focus on the page), closes when Tab leaves it, and Escape shuts it
   (pi-sitewide.php adds li.pi-kb-shut until focus leaves the item). The open list keeps the F2 colours, Contact Us is highlighted as on hover,
   and each item shows a dark ring inside its white focused box (8.3:1). */
@media (min-width: 768px) and (max-width: 1249px) {
  html.pi-kb body.pi-site #page-container .navbar-custom .navbar-nav > li:focus-within:not(.pi-kb-shut) > ul { display: block; }
  html.pi-kb body.pi-site #page-container .navbar-custom .navbar-nav > li:focus-within:not(.pi-kb-shut) > a:is(:link, :visited) { color: #ffffff !important; background-color: var(--pi-blue-aa) !important; }
  html.pi-kb body.pi-site #page-container .navbar-custom .navbar-nav > li:focus-within li a:is(:link, :visited) { color: #ffffff; background-color: var(--pi-blue-aa); }
  /* the focused item is always the white box (also the current page's item, whose `li.active > a` rule keeps it white on blue otherwise) */
  html body.pi-site #page-container .navbar-custom .navbar-nav li li > a:focus-visible:is(:link, :visited) { color: var(--pi-blue-aa) !important; background-color: #ffffff !important; outline: 2px solid var(--pi-blue-deep) !important; outline-offset: -4px; }
}