/* sl-design.css: Sanctuary Lake Apartments desktop parity layer (Stage 4). Replaces the content build's sl-base.css. Loads after the ported live CSS
   (sl-bundle.css, sl-live.css) and before sl-mobile.css (the designed bands below 1250px).
   Every rule here either undoes something Divi adds that live (Bootstrap 3 + iLaunch general.css) never had, or puts back a live rule that the
   CSS port scoped under #page-container although its element lives outside it (the booking calendar and the photo pop-up are appended to <body>).
   Measured against live with build/stage4/design_pairs_sl.js + design_diff.py at 1440. $B = body.sl-site, $P = body.sl-site #page-container.
   Bootstrap 3 sizes everything border-box, like Divi, so no content-box restore is needed on this template. */

/* ---------- 1. Divi neutralisers (were sl-base.css) ---------- */
/* Divi caps .container at 80% / 1080px; live's bootstrap container is 1170px (the width comes from the ported bootstrap rules at 768, 992, 1200) */
body.sl-site #page-container .container { max-width: none; }
/* below 768 bootstrap leaves .container at auto width; Divi's 80% made every phone column narrower than live (the header's
   "container col-xs-8" keeps its Bootstrap column width, so the phone number and menu button stay at the right edge as on live) */
@media (max-width: 767px) {
  body.sl-site #page-container .container:not([class*="col-"]) { width: auto; }
}
/* Divi's text rhythm: p padding, ul/ol padding and 26px line height, heading padding, greyscale smoothing; live uses the browser defaults + bootstrap.
   (The body weight stays live's 300 from the port: the content build's `font-weight: 400` made every inheriting box heavier than live.) */
body.sl-site { -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; }
body.sl-site :where(.et-l, #main-content) p { padding-bottom: 0; }
body.sl-site :where(.et-l, #main-content) ul, body.sl-site :where(.et-l, #main-content) ol { padding: 0 0 0 40px; line-height: inherit; }
body.sl-site :where(.et-l, #main-content) :is(h1, h2, h3, h4, h5, h6) { padding-bottom: 0; }
/* Divi's `.entry-content ul { list-style-type: disc }` gives every nesting level a round bullet; live's nested lists use the browser's circle then
   square (the site map's posts under each category) */
body.sl-site #page-container .page-content :where(ul, ol) ul:not(.list-unstyled) { list-style-type: circle; }
body.sl-site #page-container .page-content :where(ul, ol) :where(ul, ol) ul:not(.list-unstyled) { list-style-type: square; }
/* Divi's `ol, ul { list-style: none }` reaches the blog post body; live shows the browser markers there (disc, then circle, then square; numbers for ol).
   Post body column only: menus, footer, sidebar and .list-unstyled keep theirs (3.18 fix N1) */
body.sl-site #page-container .blog-post .col-lg-8 ul:not(.list-unstyled) { list-style: disc outside; }
body.sl-site #page-container .blog-post .col-lg-8 ol:not(.list-unstyled) { list-style: decimal outside; }
body.sl-site #page-container .blog-post .col-lg-8 :where(ul, ol) ul:not(.list-unstyled) { list-style-type: circle; }
body.sl-site #page-container .blog-post .col-lg-8 :where(ul, ol) :where(ul, ol) ul:not(.list-unstyled) { list-style-type: square; }
/* Divi colours every blockquote border with its accent blue (#2ea3f2); live's are the text colour (and 0 wide, so this is invisible, but measured) */
body.sl-site :where(.et-l, #main-content) blockquote { border-color: currentColor; }
/* Divi's content-table look is not on live */
body.sl-site :where(.et-l, #main-content) table:not(.variations) { border: 0; margin: 0; width: auto; text-align: start; }
body.sl-site :where(.et-l, #main-content) table[width="100%"]:not(.variations) { width: 100%; }
body.sl-site :where(.et-l, #main-content) :is(td, th) { padding: 1px; border: 0; text-align: start; }
/* Divi pads "#main-content .container" at the top */
html body.sl-site #main-content .container { padding-top: 0; }
/* Divi draws a 1px sidebar rule with "#main-content .container:before" (absolute, full height). Bootstrap's own .container:before is its clearfix
   (display: table), which stops a first heading's top margin escaping its container: without it the Location Map heading on /location and /contact
   sat 20px higher than live (its 20px margin collapsed into the gallery's 60px). The clearfix is put back, the rule's look is not. */
body.sl-site #main-content .container::before { content: " "; display: table; position: static; width: auto; height: auto; background: none; }
/* Bootstrap sets the root size (`html { font-size: 10px }`), which the port moved onto the body class, so on dev 1rem was the browser's 16px:
   /experience-local's own boxes pad their text by 5rem (50px on live, 80px on dev, every text column 60px narrower). The root size, put back
   (no Divi module on this site uses rem: the only rem rules are Divi's video play icon, and no page has a Divi video). */
html:has(body.sl-site) { font-size: 10px; }
/* Divi's reset sets `font { font-size: 100% }`, which cancels the size attribute of live's <font> tags (the home HotelsCombined badge's
   <font size="1">AUSTRALIA</font> rendered 14px instead of 10px, 2px taller): the browser's presentational sizes, put back */
body.sl-site #page-container font[size="1"] { font-size: x-small; }
body.sl-site #page-container font[size="2"] { font-size: small; }
body.sl-site #page-container font[size="3"] { font-size: medium; }
body.sl-site #page-container font[size="4"] { font-size: large; }
body.sl-site #page-container font[size="5"] { font-size: x-large; }
body.sl-site #page-container font[size="6"] { font-size: xx-large; }
/* Divi gives every image max-width:100%; live's images render at their own width, bootstrap's .img-responsive opts in where wanted */
body.sl-site img { max-width: none; }
/* live's body{overflow-x:hidden} stops sideways scrolling. With Divi's wrappers that clip no longer reaches the viewport; overflow-x on html/body would
   break fancybox (it saves and restores the page scroll when it opens), so the page wrapper clips instead (clip creates no scroll container). */
body.sl-site #page-container { overflow-x: clip; }
/* the blog views load Divi's own nav stylesheet, whose `.nav li { line-height: 1em }` shrinks the menu items' line boxes */
body.sl-site #page-container #navbar .nav li { line-height: inherit; }

/* ---------- 1b. Search form: live's keyword field is an unstyled input (the browser's 2px inset border); Divi restyles bare inputs.
   (revert, not the computed 2px inset values: an author-set border makes Chrome drop the native field look that live shows) ---------- */
body.sl-site #page-container .page-content table.searchpage input[type="text"] { -webkit-appearance: revert; appearance: revert; padding: revert; border: revert; border-radius: revert; background: revert; color: #444444; }

/* ---------- 2. Booking calendar (#datepicker_div, appended to <body>): the port scoped the calendar's table class (.datepicker, and general.css's
   `.datepicker a { font-size: 16px }`) and live's generic td, th, label and select rules under #page-container, so on dev they missed the calendar.
   Live's rules, put back on the calendar itself (element-level ones inside :where(#datepicker_div) so the calendar's own class rules still win). ---------- */
body.sl-site :where(#datepicker_div) table { border-collapse: collapse; border-spacing: 0; background-color: transparent; }
body.sl-site :where(#datepicker_div) :is(td, th) { padding: 0; font-family: 'Montserrat', Arial, Helvetica, sans-serif; font-size: 14px; line-height: 18px; color: #444444; font-weight: 300; }
body.sl-site :where(#datepicker_div) th { text-align: left; }
body.sl-site :where(#datepicker_div) label { display: inline-block; max-width: 100%; margin-bottom: 5px; font-weight: 700; }
body.sl-site :where(#datepicker_div) select { font-family: inherit; font-size: inherit; line-height: inherit; text-transform: none; margin: 0; color: inherit; }
body.sl-site #datepicker_div .datepicker { clear: both; float: left; width: 100%; color: #ffffff; background: #cccccc; text-align: center; font-size: 100%; }
body.sl-site #datepicker_div .datepicker a { display: block; width: 100%; font-size: 16px; }

/* ---------- 3. Photo pop-up (fancybox 1.3.4, appended to <body>): its frame and shadow pieces carry the class .fancy-bg, which the port scoped under
   #page-container, so they lost their 20px size and absolute position. Live's rule, unscoped. ---------- */
body.sl-site .fancy-bg { position: absolute; padding: 0; margin: 0; border: 0; width: 20px; height: 20px; z-index: 1001; }
/* the port restores content-box on every pop-up piece (right for the V2 skin); live here is Bootstrap, border-box everywhere, and the only piece with
   padding is the title strip, which came out 20px wider than live's (the photo's caption box ran past the photo on the right) */
body.sl-site #fancybox-wrap #fancybox-title { -webkit-box-sizing: border-box; box-sizing: border-box; }

/* ---------- 4. Contact, review and newsletter forms: Divi contact-form modules dressed as live's Bootstrap 3 forms (measured at 1440):
   label 14px bold above a 34px field (6px 12px padding, 14px Montserrat 300, 1px #ccc border, faint inset shadow), 15px between groups, a 74px
   message box, the Verification row (its label, then a 78px block where live shows Google's reCAPTCHA box), and live's yellow SUBMIT (.btn-primary:
   16px bold, 36px tall, 28px side padding, 1px letter spacing). Divi's maths question stands in for live's reCAPTCHA (its key belongs to iLaunch's
   account and is bound to the live domain): a DELIBERATE row. ---------- */
body.sl-site #page-container .sl-contact-form { margin: 0; padding: 0; background: none; }
body.sl-site #page-container .sl-contact-form .et_pb_contact { padding: 0; margin: 0; }
body.sl-site #page-container .sl-contact-form form.et_pb_contact_form { display: block; margin: 0; padding: 0; }
body.sl-site #page-container .sl-contact-form p.et_pb_contact_field { float: none; clear: both; width: auto; margin: 0 0 15px; padding: 0; }
body.sl-site #page-container .sl-contact-form .et_pb_contact_form_label { display: inline-block; margin: 0 0 5px; padding: 0; font: 700 14px/18px 'Montserrat', Arial, Helvetica, sans-serif; color: #444444; text-transform: none; }
body.sl-site #page-container .sl-contact-form .et_pb_contact p input.input,
body.sl-site #page-container .sl-contact-form .et_pb_contact p textarea.input {
  display: block; width: 100%; height: 34px; margin: 0; padding: 6px 12px; border: 1px solid #cccccc; border-radius: 0; background-color: #ffffff;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); font: 300 14px/20px 'Montserrat', Arial, Helvetica, sans-serif; color: #333333; }
body.sl-site #page-container .sl-contact-form .et_pb_contact p textarea.input { height: 74px; min-height: 0; resize: vertical; color: #555555; }
/* live's email field is an input type=email, which Bootstrap colours #555 (the text fields #333) */
body.sl-site #page-container .sl-contact-form .et_pb_contact p input.input[data-field_type="email"] { color: #555555; }
body.sl-site #page-container .sl-contact-form .et_pb_contact .input::placeholder { color: #999999; opacity: 1; }
body.sl-site #page-container .sl-contact-form .et_pb_contact .input:focus { border-color: #66afe9; outline: 0; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6); }
/* Verification group: the label line (18px + 5px) and a 78px block, 15px below (116px in all, as live's group with the reCAPTCHA box). The maths
   question and its field sit at the top of that block; the field is a Bootstrap-style 34px box like the others */
body.sl-site #page-container .sl-contact-form .et_contact_bottom_container { display: block; float: none; clear: both; margin: 0; padding: 0; text-align: left; }
body.sl-site #page-container .sl-contact-form .et_pb_contact_right { display: block; float: none; margin: 0 0 15px; padding: 0; text-align: left; }
body.sl-site #page-container .sl-contact-form .et_pb_contact_right p.clearfix { display: block; float: none; height: 101px; margin: 0; padding: 0; font: 300 14px/34px 'Montserrat', Arial, Helvetica, sans-serif; color: #444444; text-align: left; }
body.sl-site #page-container .sl-contact-form .et_pb_contact_right p.clearfix::before { content: "Verification"; display: block; visibility: visible; height: 18px; margin: 0 0 5px; font: 700 14px/18px 'Montserrat', Arial, Helvetica, sans-serif; color: #444444; }
body.sl-site #page-container .sl-contact-form .et_pb_contact_right p.clearfix::after { display: none; }
body.sl-site #page-container .sl-contact-form .et_pb_contact_captcha_question { font: 300 14px/34px 'Montserrat', Arial, Helvetica, sans-serif; color: #444444; }
body.sl-site #page-container .sl-contact-form .et_pb_contact p input.input.et_pb_contact_captcha {
  display: inline-block; width: 80px; max-width: none; height: 34px; margin: 0 0 0 4px; padding: 6px 12px; vertical-align: top; text-align: left; }
/* SUBMIT: live's .btn.btn-primary (rest #fdbc1a with #644907 text; hover and pressed white on #29437c; keyboard focus Bootstrap's white on #286090, as live) */
body #page-container .et_pb_section .sl-contact-form.et_pb_contact_form_container.et_pb_module .et_pb_button.et_pb_contact_submit {
  display: inline-block; float: none; height: 36px; margin: 0 !important; padding: 0 28px !important; border: 0 !important; border-radius: 0 !important;
  background: #fdbc1a !important; color: #644907 !important; font: 700 16px/36px 'Montserrat', Arial, Helvetica, sans-serif !important; letter-spacing: 1px !important;
  text-transform: uppercase; cursor: pointer; transition: none; }
body #page-container .et_pb_section .sl-contact-form.et_pb_contact_form_container.et_pb_module .et_pb_button.et_pb_contact_submit:focus { background: #286090 !important; color: #ffffff !important; padding: 0 28px !important; }
body #page-container .et_pb_section .sl-contact-form.et_pb_contact_form_container.et_pb_module .et_pb_button.et_pb_contact_submit:hover,
body #page-container .et_pb_section .sl-contact-form.et_pb_contact_form_container.et_pb_module .et_pb_button.et_pb_contact_submit:active { background: #29437c !important; color: #ffffff !important; padding: 0 28px !important; }
body #page-container .et_pb_section .sl-contact-form.et_pb_contact_form_container.et_pb_module .et_pb_button.et_pb_contact_submit::after { display: none !important; }
/* the success line (Divi replaces the form with it) and the error list keep live's body text */
body.sl-site #page-container .sl-contact-form .et-pb-contact-message { font: 300 14px/18px 'Montserrat', Arial, Helvetica, sans-serif; color: #444444; margin: 0; }
body.sl-site #page-container .sl-contact-form .et-pb-contact-message > * { margin: 0 0 15px; }
body.sl-site #page-container .sl-contact-form .et-pb-contact-message ul { padding: 0 0 0 20px; }
/* Reviews (page 1139): live's form is the boxed .form-standard (1px #eee border, 15px padding, 25px margin; 200px side margins from 1200px) */
/* (the margin sits on the module so it collapses with the intro paragraph's margin, as live's form margin does) */
body.sl-site.page-id-1139 #page-container .sl-contact-form { margin: 25px 0; }
body.sl-site.page-id-1139 #page-container .sl-contact-form form.et_pb_contact_form { border: 1px solid #eeeeee; padding: 15px; }
@media (min-width: 1200px) {
  body.sl-site.page-id-1139 #page-container .sl-contact-form { margin: 25px 200px; }
}
/* Newsletter subscribe (page 1150) and unsubscribe (page 1151): live's .form-horizontal from 768px (label in a 25% column of the 30px-wider row, field in a
   66.67% (subscribe) or 58.33% (unsubscribe) column, the verification block and the button under the field; subscribe also has "click here to unsubscribe"
   beside its button, in a 25% column after a 41.67% one). Below 768 Bootstrap stacks the columns, as the plain forms. */
@media (min-width: 768px) {
  body.sl-site:is(.page-id-1150, .page-id-1151) #page-container .sl-contact-form form.et_pb_contact_form { display: grid; grid-template-columns: calc(25% + 7.5px) calc(66.6667% - 10px) 1fr; margin: 0; }
  body.sl-site.page-id-1151 #page-container .sl-contact-form form.et_pb_contact_form { grid-template-columns: calc(25% + 7.5px) calc(58.3333% - 12.5px) 1fr; }
  body.sl-site:is(.page-id-1150, .page-id-1151) #page-container .sl-contact-form p.et_pb_contact_field { display: contents; }
  body.sl-site:is(.page-id-1150, .page-id-1151) #page-container .sl-contact-form p.et_pb_contact_field > .et_pb_contact_form_label { grid-column: 1; align-self: start; margin: 0 0 15px; }
  body.sl-site:is(.page-id-1150, .page-id-1151) #page-container .sl-contact-form .et_pb_contact p.et_pb_contact_field > input.input { grid-column: 2; margin: 0 0 15px; }
  body.sl-site:is(.page-id-1150, .page-id-1151) #page-container .sl-contact-form .et_contact_bottom_container { grid-column: 2 / 4; }
  /* live's verification group has no label here: the 78px block only, then the button in its own .form-group (15px below) */
  body.sl-site:is(.page-id-1150, .page-id-1151) #page-container .sl-contact-form .et_pb_contact_right p.clearfix { height: 78px; }
  body.sl-site:is(.page-id-1150, .page-id-1151) #page-container .sl-contact-form .et_pb_contact_right p.clearfix::before { content: none; display: none; }
  body.sl-site:is(.page-id-1150, .page-id-1151) #page-container .sl-contact-form .et_contact_bottom_container { padding-bottom: 15px; }
  /* subscribe: "click here to unsubscribe" sits in the button's row (pulled up into that row by its height plus the 15px gap; its 35px bottom margin ends the form where live's does, measured equal at 1440), 41.67% of the row after the field column's start (live's col-sm-offset-3 col-sm-5, then col-sm-3) */
  body.sl-site.page-id-1150 #page-container .sl-contact-form + .sl-unsub-link { position: relative; margin: -51px 0 35px calc(66.6667% + 20px); width: calc(25% - 22.5px); }
}
body.sl-site.page-id-1150 #page-container .sl-unsub-link { margin: 0 0 15px; }

/* ---------- 5. Keyboard focus: Divi's reset removes every outline (`:focus { outline: 0 }`), live shows the browser's ring (and Bootstrap's ring on
   links and buttons). Low specificity so live's own outline rules still decide where they exist. ---------- */
body.sl-site :focus-visible { outline: revert; }
/* controls whose own CSS removes the ring on live too (slider arrows, the phone menu button, the maths-question field, the Book Online heading):
   a ring only while focused from the keyboard, so nothing changes for a mouse or a finger */
body.sl-site #page-container #feature :is(.sp-arrow, .sp-prev, .sp-next):focus-visible { outline: 2px solid #ffffff !important; outline-offset: 2px; box-shadow: 0 0 0 4px #29437c !important; }
/* the carousels (home rooms and reviews, apartments photos): slick removes the ring from its list (a tab stop), arrows and dots */
body.sl-site #page-container :is(.slick-prev, .slick-next):focus-visible { outline: 2px solid #ffffff !important; outline-offset: -4px; box-shadow: 0 0 0 3px #29437c !important; }
body.sl-site #page-container .slick-list:focus-visible { outline: 3px solid #29437c !important; outline-offset: -3px; }
body.sl-site #page-container .slick-dots li button:focus-visible { outline: 2px solid #29437c !important; outline-offset: 1px; }
/* a live link whose inline style sets outline: 0 (the airport-transfer logo link on /location) */
body.sl-site #page-container a[style*="outline"]:focus-visible { outline: 2px solid #29437c !important; outline-offset: 2px; }
body.sl-site #page-container .navbar-toggle:focus-visible { outline: 2px solid #29437c !important; outline-offset: 2px; }
body.sl-site #page-container .sl-contact-form .et_pb_contact p input.input:focus-visible { outline: revert; }

/* ---------- 5b. Google Translate button: Google's own `.goog-te-gadget-simple a { color: #000 }` wins over live's bare `a { color: #444 }` on live,
   but loses to the scoped port of it on dev (a lighter "SELECT LANGUAGE" label, 0.03% of every page's top slice). Google's colour, put back. ---------- */
body.sl-site #page-container #translate-widget .goog-te-gadget-simple a { color: #000000; }

/* ---------- 6. Phone numbers: explicit tel: links that keep the surrounding text's colour and look in every state (live shows plain text there) ---------- */
body.sl-site #page-container a.tel-link, body.sl-site #page-container a.tel-link:link, body.sl-site #page-container a.tel-link:visited,
body.sl-site #page-container a.tel-link:hover, body.sl-site #page-container a.tel-link:active, body.sl-site #page-container a.tel-link:focus,
body.sl-site a[x-apple-data-detectors] { color: inherit !important; text-decoration: none !important; font: inherit; }

/* ---------- 7. Keyless map card (/location, /contact): live's Maps JavaScript map (a referrer-locked key on iLaunch's account) shows a pin and keeps
   its .map-info box (Location Map, the address, Get Directions) for its info window. The keyless embed (DELIBERATE, the map row) cannot open live's
   window, so that box shows as a card drawn like Google's info window, just above the embed's own pin, keeping Get Directions one tap away (kit
   prove_map asserts it). ---------- */
body.sl-site #page-container .map-wrapper { position: relative; }
body.sl-site #page-container .map-container { position: relative; height: 400px; }
body.sl-site #page-container .map-container iframe.ils-map { display: block; width: 100%; height: 100%; min-height: 300px; border: 0; }
body.sl-site #page-container .map-wrapper .map-info { display: block; position: absolute; left: 50%; bottom: 251px; transform: translateX(-50%); z-index: 3; width: max-content; max-width: min(300px, calc(100% - 32px));
  padding: 12px 14px; background: #ffffff; border-radius: 8px; box-shadow: 0 2px 7px 1px rgba(0, 0, 0, 0.3); font: 400 12px/16px Roboto, Arial, Helvetica, sans-serif; color: #000000; text-align: left; }
body.sl-site #page-container .map-wrapper .map-info::after { content: ""; position: absolute; left: 50%; bottom: -8px; margin-left: -8px; border: 8px solid transparent; border-bottom: 0; border-top-color: #ffffff; }
body.sl-site #page-container .map-wrapper .map-info strong { font-weight: 700; }
body.sl-site #page-container .map-wrapper .map-info a { color: #000000; text-decoration: underline; }