/* Bali Hai Apartments Noosa: Stage 4 desktop layer (1250 and up is a pixel copy of live; everything here is either live's look put back on a Divi element or accessibility that changes nothing for a mouse). Loaded after bh-extra.css. */

/* tel: links (every displayed number): iOS must have nothing to colour, and the number keeps the surrounding look in every state, exactly as live's plain text */
body.bh-site #page-container a.tel-link, body.bh-site #page-container a.tel-link:link, body.bh-site #page-container a.tel-link:visited,
body.bh-site #page-container a.tel-link:hover, body.bh-site #page-container a.tel-link:active, body.bh-site #page-container a.tel-link:focus,
body.bh-site a[x-apple-data-detectors] { color: inherit !important; text-decoration: none !important; font: inherit; }

/* a single post's entry block: Divi's .post rule gives it 25px of bottom padding, live has none */
body.bh-site #page-container .entry.post { padding-bottom: 0; }

/* the phone-bar controls exist only below 1170 */
body.bh-site #page-container .ils-bar-actions { display: none; }

/* keyboard focus rings: live draws the browser's own ring (it has no outline reset); Divi's reset removed it. At 1250 and up it is put back exactly (:focus-visible, so a mouse click on a link draws nothing);
   below 1250 the designed AA rings in bh-mobile.css replace it. */
body.bh-site :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 1px auto Highlight; outline: 1px auto -webkit-focus-ring-color; outline-offset: 0; }

/* ---------- Divi forms dressed as live's boxed table form (contact, reviews, newsletter unsubscribe) ----------
   live: table.form 445px wide (margin 15px 0), a 30px label row (th, 13px/20px, #efefef) over a 40px field row (td, 5px padding), inputs 425x30 (1px #cbcbcb border, 4px 10px padding,
   14px, #444), the textarea 425x90, the orange SUBMIT button 30px high, a yellow required star 430px right of each required field, "Required fields" right-aligned. */
body.bh-site #page-container .bh-contact-form.et_pb_contact_form_container { margin: 0; padding: 0; width: auto; }
body.bh-site #page-container .bh-contact-form .et_pb_contact { padding: 0; }
body.bh-site #page-container .bh-contact-form form.et_pb_contact_form { display: block; width: 445px; margin: 15px 0; padding: 0; float: none; }
body.bh-site #page-container .bh-contact-form p.et_pb_contact_field { display: block; position: relative; float: none; width: 445px; margin: 0; padding: 0; background: none; }
body.bh-site #page-container .bh-contact-form .et_pb_contact_form_label { display: block; box-sizing: content-box; height: 20px; margin: 0; padding: 5px 0; font-size: 13px; line-height: 20px; font-weight: 400; color: #efefef; text-transform: none; text-align: left; }
body.bh-site #page-container .bh-contact-form p.et_pb_contact_field > input.input, body.bh-site #page-container .bh-contact-form p.et_pb_contact_field > textarea.input {
	display: block; box-sizing: border-box; float: none; width: 425px; height: 30px; margin: 5px 0; padding: 4px 10px; border: 1px solid #cbcbcb; border-radius: 0; background: #ffffff; color: #444444; font-size: 14px; line-height: normal; font-weight: 400; box-shadow: none; }
body.bh-site #page-container .bh-contact-form p.et_pb_contact_field > textarea.input { height: 90px !important; min-height: 0; margin-bottom: 12px; resize: vertical; }
body.bh-site #page-container .bh-contact-form p.et_pb_contact_field:has(> input[data-required_mark="required"])::after { content: ""; position: absolute; left: 430px; top: 37px; width: 13px; height: 13px; background: url(/wp-content/uploads/ilaunch/skin/icon-required.png) no-repeat; }
body.bh-site #page-container .bh-contact-form p.et_pb_contact_field:has(> textarea[data-required_mark="required"])::after { content: ""; position: absolute; left: 430px; top: 37px; width: 13px; height: 13px; background: url(/wp-content/uploads/ilaunch/skin/icon-required.png) no-repeat; }
body.bh-site #page-container .bh-contact-form .et_contact_bottom_container { display: block; float: none; margin: 0; padding: 0 0 5px; width: 445px; }
/* live's captcha row (84px: image, 3 character field, message) becomes Divi's sum question in the same space (DELIBERATE: live's picture code is not ours) */
body.bh-site #page-container .bh-contact-form .et_pb_contact_right { display: block; float: none; width: 445px; height: 84px; margin: 0; padding: 0; box-sizing: border-box; }
body.bh-site #page-container .bh-contact-form .et_pb_contact_right p.clearfix { text-align: left; margin: 9px 0 0; padding: 0; width: auto; float: none; color: #efefef; font-size: 13px; line-height: 30px; }
body.bh-site #page-container .bh-contact-form .et_pb_contact_captcha_question { color: #efefef; font-size: 13px; }
body.bh-site #page-container .bh-contact-form input.et_pb_contact_captcha { box-sizing: border-box; float: none; display: inline-block; vertical-align: middle; width: 62px !important; height: 30px; margin: 0 0 0 10px; padding: 4px 10px; border: 1px solid #cbcbcb; border-radius: 0; background: #ffffff; color: #444444; font-size: 14px; line-height: normal; }
body.bh-site #page-container .bh-contact-form button.et_pb_contact_submit.et_pb_button {
	display: block; float: none; box-sizing: border-box; width: auto; height: 30px; margin: 5px 0 0; padding: 5px 22px; border: 0; border-radius: 0; background: #ff9500 !important; color: #ffffff; font-size: 14px !important; font-weight: 700 !important; line-height: 20px !important; text-transform: uppercase; text-align: left; letter-spacing: 0; font-family: inherit; box-shadow: none; }
body.bh-site #page-container .bh-contact-form button.et_pb_contact_submit.et_pb_button::after { display: none; content: none; }
body.bh-site #page-container .bh-contact-form button.et_pb_contact_submit.et_pb_button:hover { background: #008b94 !important; color: #ffffff; padding: 5px 22px !important; border: 0; }
body.bh-site #page-container .bh-contact-form .et-pb-contact-message { margin: 0; padding: 0; }
body.bh-site #page-container .bh-contact-form .et-pb-contact-message p { margin: 0; padding: 5px 0; color: #ffffff; }
body.bh-site #page-container .bh-contact-form .et-pb-contact-message ul { margin: 0; padding: 0 0 0 20px; list-style: disc; }
/* "Required fields": right-aligned at the form's right edge, level with the SUBMIT button (contact), or on its own line under it (reviews) */
body.bh-site #page-container p.ils-required-note { box-sizing: border-box; margin: 0 0 -15px; padding: 0; width: 445px; height: 0; overflow: visible; text-align: right; font-size: 12px; line-height: 16px; color: #efefef; position: relative; top: -45px; }
body.bh-site #page-container p.ils-required-note em { display: inline-block; margin: 0 20px 0 0; font-style: normal; font-size: 12px; line-height: 16px; }
body.bh-site #page-container p.ils-required-note::after { content: ""; position: absolute; left: 430px; top: -4px; width: 13px; height: 13px; background: url(/wp-content/uploads/ilaunch/skin/icon-required.png) no-repeat; }
body.bh-site.page-id-1442 #page-container p.ils-required-note { top: 0; height: 34px; margin: -15px 0 15px; padding-top: 10px; }
body.bh-site.page-id-1442 #page-container p.ils-required-note::after { top: 7px; }

body.bh-site #page-container .bh-contact-form input::placeholder, body.bh-site #page-container .bh-contact-form textarea::placeholder { color: transparent; opacity: 0; }
/* the unsubscribe page's table keeps the browser's default 2px cell spacing (cellspacing is not set there) */
body.bh-site.page-id-1450 #page-container .bh-contact-form form.et_pb_contact_form { box-sizing: border-box; width: 449px; padding: 2px; }
body.bh-site.page-id-1450 #page-container .bh-contact-form p.et_pb_contact_field > input.input { margin-top: 7px; margin-bottom: 12px; }

/* the sidebar's drop-down (Reviews > Blog) opens on keyboard focus as well as on hover (hover alone leaves it unreachable from the keyboard) */
body.bh-site #page-container #menu li:focus-within > ul { display: block; }

/* the SUBMIT button's exact colours (Divi's own button rule carries !important and a heavier selector: live's orange is #ff9500, hover #008b94) */
body.bh-site #page-container .et_pb_section .bh-contact-form.et_pb_contact_form_container.et_pb_module button.et_pb_contact_submit.et_pb_button { background-color: #ff9500 !important; color: #ffffff !important; }
body.bh-site #page-container .et_pb_section .bh-contact-form.et_pb_contact_form_container.et_pb_module button.et_pb_contact_submit.et_pb_button:hover { background-color: #008b94 !important; color: #ffffff !important; }

/* the keyless map's info card (the build's replacement for live's broken Google map; not on live): its link was live's yellow on white (1.6:1) */
body.bh-site #page-container .map-wrapper .map-info a:link, body.bh-site #page-container .map-wrapper .map-info a:visited { color: #00727a; text-decoration: underline; }
body.bh-site #page-container .map-wrapper .map-info a:hover, body.bh-site #page-container .map-wrapper .map-info a:focus, body.bh-site #page-container .map-wrapper .map-info a:active { color: #be0d55; text-decoration: underline; }

/* body-appended widgets: live's generic `body, th, td, p` rules (Open Sans / Arial 13px / 22px, th and td white) reach the booking calendar because live scopes nothing; here every ported rule sits under #page-container,
   which a widget appended to <body> is outside of, so the calendar opened with jQuery UI's own 17px type and a 2px smaller box. Same values, element weight. */
body.bh-site #ui-datepicker-div th, body.bh-site #ui-datepicker-div td, body.bh-site #ui-datepicker-div p { font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-weight: normal; font-size: 13px; line-height: 22px; }
body.bh-site #ui-datepicker-div th, body.bh-site #ui-datepicker-div td { vertical-align: top; color: #ffffff; }
/* ... and Divi's `* { box-sizing: border-box }` shrank its box by the 2px border: live has the browser default (zero weight, so the engine's own box-sizing rules still win) */
:where(body.bh-site #ui-datepicker-div, body.bh-site #ui-datepicker-div *, body.bh-site #ui-datepicker-div *::before, body.bh-site #ui-datepicker-div *::after) { box-sizing: content-box; }
:where(body.bh-site #ui-datepicker-div) :where(button, select, input[type=button], input[type=submit], input[type=reset]) { box-sizing: border-box; }

/* the booking panel's three selects carry live's `outline: none` (the engine's rule), so a keyboard user had no ring there at any width: a keyboard-only ring inside the field (DELIBERATE, nothing changes for a mouse or a finger) */
body.bh-site #page-container #booking select:focus-visible { outline: 2px solid #be0d55 !important; outline-offset: -2px !important; }

/* a dead remote image in post 14 (http:// on an https page: blocked, so it shows as an empty box on live and here): its box keeps the width and height attributes on live (214px high), Divi's `img { height: auto }` collapsed it to a text line on the page */
@media (min-width: 1250px) { body.bh-site #page-container img[src^="http://www.visitnoosa.com.au/image/themes/events/nfw2016-image-logo-border-280w"] { height: 214px; } }

/* 3.18 fix round F-G: live's room-list divider lines carry z-index 10000, above the photo pop-up's shadow (1100), so a click on the shadow that lands on one of those 2px lines never reaches it and the pop-up stays open. 1000 keeps them above the room content and below the pop-up (nothing visible changes; applies at every width) */
body.bh-site #page-container .list-bottom-border { z-index: 1000; }

/* Accommodation room thumbnails: live dims them to 50% over a black cell and lifts them on hover; on phones and tablets there is no hover, so they stayed dark and hard to see (Jake, 16 Oct). Full brightness at every width; hover and keyboard focus show a pink ring instead. */
body.bh-site #page-container .gallery.room img { opacity: 1; }
body.bh-site #page-container .gallery.room a.gallery-item:hover img, body.bh-site #page-container .gallery.room a.gallery-item:focus img { outline: 3px solid #be0d55; outline-offset: -3px; }

/* FAQ: the category list sits straight after the intro (Jake, 16 Oct), once, as equal columns on desktop and tablet and stacked on a phone; the answers then run full width. */
body.bh-site #page-container .left-wider .panel.faqs { margin: 20px 0 0; }
body.bh-site #page-container .left-wider .panel.faqs h3 { margin: 0 0 4px; }
body.bh-site #page-container .left-wider .panel.faqs ul.archive { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 28px; margin: 0; padding: 0; }
body.bh-site #page-container .left-wider .panel.faqs ul.archive li { padding: 8px 0 10px; }
@media (max-width: 767px) { body.bh-site #page-container .left-wider .panel.faqs ul.archive { grid-template-columns: minmax(0, 1fr); } }

/* Contact: Get Directions and View Map are stand-alone buttons (Jake, 16 Oct): site button, fixed 44px height with equal line-height so the label is centred, clear space above. */
body.bh-site #page-container a.button.bh-map-btn { height: 44px; line-height: 44px; padding: 0 26px; box-sizing: border-box; margin: 14px 12px 0 0; font-size: 14px; text-align: center; white-space: nowrap; color: #ffffff; }