/* su-design.css - Stage 4 DESKTOP parity layer for The Summit Apartments (iLaunch on Divi).
   Loaded after su-bundle.css + su-live.css + su-extra.css and before su-mobile.css.
   Started from the kit's ilaunch-divi-parity.template.css; every rule here undoes something Divi adds that live never had,
   or restores what live's single #container-outer wrapper did that the Divi section split cannot. */

/* 1. Live CSS assumes the browser default content-box; Divi sets * {box-sizing:border-box}. Zero specificity on purpose:
      it only beats Divi's universal rule (which loads before this file), so live's own rules, the STAAH widget's rules
      (injected after this file) and Divi's form-module rules all still win where they set a value. */
/*    Form controls the browser itself sizes as border-box (select, buttons, checkbox, radio) are left out, as on live. */
:where(body.su-site #page-container) *:where(:not(select, button, input[type=checkbox], input[type=radio], input[type=submit], input[type=button], input[type=reset], input[type=image], input[type=color], meter, progress)),
:where(body.su-site #page-container) *::before, :where(body.su-site #page-container) *::after { box-sizing: content-box; }
body.su-site #page-container .et_pb_contact_form_container, body.su-site #page-container .et_pb_contact_form_container * { box-sizing: border-box; }
body.su-site #page-container select, body.su-site #page-container button,
body.su-site #page-container input[type=submit], body.su-site #page-container input[type=button], body.su-site #page-container input[type=reset] { box-sizing: border-box; }

/* 2. Divi caps .container at 80% / 1080px; live is a fixed 1170px. */
body.su-site #page-container .container { max-width: none; }
/* Divi also makes .container position:relative; live's is static, so the absolutely placed header logo (top:15px) sat 77px
   low, under the menu bar (the "partly hidden logo"). Live's own .container.main stays relative (its rule out-ranks this). */
body.su-site #page-container .container:not(.main) { position: static; }
/* Divi pads "#main-content .container" 58px at the top (meant for its own header). */
html body.su-site #main-content .container { padding-top: 0; }
body.su-site #main-content .container::before { display: none; }

/* 3. Live's #container-outer (overflow-x:hidden) wraps the whole page; here it only wraps the header and hero, so the 2000px
      decorative pseudo-elements in the content (home crisscross bands, blog band) widened the page. Clip the page instead. */
@media (min-width: 1250px) { body.su-site #page-container { overflow-x: hidden; overflow-x: clip; } }
/*    Below 1250 nothing is clipped: su-mobile.css scales the wedges to the screen, and the width sweep checks every element. */
/*    Live's `#container-outer {overflow-x:hidden}` makes its overflow-y auto, which cost nothing on live (the wrapper holds the
      whole page) but here it ends under the hero, so it cut off the lower half of the home hero's crisscross band (the grey
      textured sides and white diamond between the hero and the welcome copy: 58,138 px different from live at 1440, found in
      Stage 3b). `clip` keeps the sideways clip without a vertical one (su-mobile.css already does this below 1170). */
@media (min-width: 1170px) { body.su-site #page-container #container-outer { overflow-x: clip; overflow-y: visible; } }

/* 4. Browser-default spacing and line boxes the live CSS relies on, which Divi's reset removes. :where() keeps these at
      element specificity, so every live rule still wins where live sets a value. */
body.su-site :where(.et-l, #main-content) p { padding-bottom: 0; }
body.su-site :where(.et-l, #main-content) ul, body.su-site :where(.et-l, #main-content) ol { padding: 0 0 0 40px; margin: 1em 0; line-height: inherit; list-style-type: revert; }
body.su-site :where(.et-l, #main-content) :is(ul, ol) :is(ul, ol) { margin-top: 0; margin-bottom: 0; }
body.su-site :where(.et-l, #main-content) li { line-height: inherit; }
/* Headings Divi sizes that live leaves to the browser (h5 terms lines 0.83em, h6), and Divi's 10px heading padding. */
body.su-site :where(.et-l, #main-content) :is(h1, h2, h3, h4, h5, h6) { padding-bottom: 0; line-height: inherit; font-weight: revert; color: inherit; }
body.su-site :where(.et-l, #main-content) h5 { font-size: 0.83em; }
body.su-site :where(.et-l, #main-content) h6 { font-size: 0.67em; }

/* 5. Divi's content-table look (borders, cell padding, width 100%) is not on live. */
body.su-site :where(.et-l, #main-content) table:not(.variations) { border: 0; margin: 0; width: auto; text-align: start; border-collapse: separate; }
body.su-site :where(.et-l, #main-content) table[width="100%"]:not(.variations) { width: 100%; }
body.su-site :where(.et-l, #main-content) tr td, body.su-site :where(.et-l, #main-content) tr th { border-top: 0; padding: 1px; }
body.su-site :where(.et-l, #main-content) table[cellpadding="0"] tr td, body.su-site :where(.et-l, #main-content) table[cellpadding="0"] tr th { padding: 0; }

/* 6. Divi draws a 5px rule down the left of every blockquote; live has none (reviews). */
body.su-site :where(.et-l, #main-content) blockquote { border: 0; border-color: currentColor; }

/* 7. Divi forces greyscale font smoothing; live uses the browser default. */
body.su-site { -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; }

/* 8. Live's header <style> block (STAAH booking bar) is unscoped plain "#booking ..." rules that come AFTER live's general.css
      and so win there. Here the scoped port of general.css out-ranks them, so they are restated at the scoped weight.
      The fragment's own <style> is kept byte-verbatim (the booking proof depends on the header markup). */
body.su-site #page-container #booking { display: flex; width: 95%; margin: auto; left: 0; align-items: center; }
body.su-site #page-container #booking h3 { width: 20%; text-align: center; font-size: 22px; }
body.su-site #page-container #booking .bookingform { width: 100%; }

/* 9. Phone menu button (added for the mobile design; never shown at desktop widths). */
body.su-site #page-container .ils-menu-toggle { display: none; }

/* 10. Links: live's "a:link" rule is missing a semicolon ("color: #555555 text-decoration: underline"), so the browser drops
       both declarations and live's plain links are the browser default (blue, underlined). Divi paints every link #2ea3f2 with
       no underline. Back to the browser default at element weight, so every live rule that colours a link still wins. */
:where(body.su-site #page-container) a { color: revert; text-decoration: revert; }
:where(body.su-site #page-container) :is(h1, h2, h3, h4, h5, h6) a { color: revert; }   /* Divi: h1 a ... h6 a { color: inherit } */

/* 11. STAAH widget inputs: live's bare "input" rule (8px 15px padding, 15px type, white ground) loses to the widget's own
       ".Configure-quickBook-Widget ..." rules on live, but the scoped port out-ranks them here. Restate the widget's values. */
body.su-site #page-container #booking .Configure-quickBook-Widget .MbsSearchWidget .inputRoom .d-flex input { background-color: transparent; padding: 1px 0; }
body.su-site #page-container #booking .Configure-quickBook-Widget .MbsSearchWidget input.checkinDate { padding: 7px 10px; font-size: 13px; }

/* 12. Contact, review and unsubscribe forms: the Divi contact-form module dressed as live's table.form (th labels right-aligned
       in 37px lines, 236 x 36px white inputs with a 1px #e1e1e1 border, 609 x 108px message box, a gold star 7px down at the
       right edge of each required cell, grey 48px SUBMIT with live's hover, "Required fields" note under it). Live's column
       widths come from its auto table layout, so each form's grid is pinned per page. Live's reCAPTCHA (iLaunch's key) is
       replaced by Divi's maths captcha in live's Verification cell (DELIBERATE). Desktop grid from 1170px (live's fixed layout fits from there); below that
       su-mobile.css stacks it. */
body.su-site #page-container .su-contact-form { margin: 15px 0; padding: 0; background: none; }
body.su-site #page-container .su-contact-form .et-pb-contact-message:empty { display: none; }
body.su-site #page-container .su-contact-form .et_pb_contact { padding: 0; margin: 0; }
body.su-site #page-container .su-contact-form form.et_pb_contact_form { margin: 0; padding: 0; }
body.su-site #page-container .su-contact-form p.et_pb_contact_field { margin: 0; padding: 0; width: auto; float: none; }
body.su-site #page-container .su-contact-form .et_pb_contact_form_label {
  display: block; position: relative; margin: 0; padding: 5px 10px 5px 5px; font: 400 14px/37px 'AdventorBook', Arial, Helvetica, sans-serif;
  color: #333333; text-align: right; }
body.su-site #page-container .su-contact-form p.et_pb_contact_field .input,
body.su-site #page-container .su-contact-form input.et_pb_contact_captcha {
  display: block; margin: 5px 0 6px 5px; width: 236px; height: 36px; padding: 8px 15px; border: 1px solid #e1e1e1; border-radius: 0; background: #ffffff;
  font: 400 15px/normal 'AdventorBook', Helvetica, sans-serif; color: #666666; box-shadow: none; }
body.su-site #page-container .su-contact-form p.et_pb_contact_field textarea.input { width: 609px; height: 108px; min-height: 108px; margin-bottom: 13px; resize: both; }
body.su-site #page-container .su-contact-form p.et_pb_contact_field .input::placeholder { color: transparent; }
body.su-site #page-container .su-contact-form .input.et_contact_error, body.su-site #page-container .su-contact-form .et_pb_contact_captcha.et_contact_error { border-color: #e02b20; }
body.su-site #page-container .su-contact-form p.et_pb_contact_field:has(> [data-required_mark="required"]) > .et_pb_contact_form_label::after {
  content: ""; position: absolute; top: 7px; left: calc(100% + var(--su-td, 261px) - 16px); width: 16px; height: 16px;
  background: url(/wp-content/uploads/ilaunch/skin/icon-required.png) no-repeat; pointer-events: none; }
body.su-site #page-container .su-contact-form p.et_pb_contact_field:has(> textarea[data-required_mark="required"]) { --su-td: 636px; }
body.su-site #page-container .su-contact-form .et_contact_bottom_container { float: none; margin: 0; padding: 0; }
body.su-site #page-container .su-contact-form .et_pb_contact_right { float: none; margin: 0; padding: 0; }
body.su-site #page-container .su-contact-form .et_pb_contact_right p.clearfix { margin: 5px 0 0 5px; padding: 0; font: 400 15px/36px 'AdventorBook', Helvetica, sans-serif; color: #666666; float: none; display: flex; gap: 6px; align-items: flex-start; }
body.su-site #page-container .su-contact-form .et_pb_contact_captcha_question { font: inherit; color: inherit; }
body.su-site #page-container .su-contact-form input.et_pb_contact_captcha { width: 64px; margin: 0; display: inline-block; }
body.su-site #page-container .et_pb_section .su-contact-form.et_pb_contact_form_container.et_pb_module .et_pb_button {
  display: inline-block; float: none; width: auto; height: 48px; margin: 5px 20px 0 5px; padding: 0 50px !important; border: 1px solid #e1e1e1 !important; border-radius: 0 !important;
  background: #6c6c6c !important; color: #ffffff !important; font: 700 14px/46px 'AdventorDemi', Helvetica, sans-serif !important;
  letter-spacing: 0.5px !important; text-transform: uppercase; cursor: pointer; transition: all 1s; }
body.su-site #page-container .et_pb_section .su-contact-form.et_pb_contact_form_container.et_pb_module .et_pb_button:hover,
body.su-site #page-container .et_pb_section .su-contact-form.et_pb_contact_form_container.et_pb_module .et_pb_button:focus { background: #19338a !important; padding: 0 50px !important; }
body.su-site #page-container .et_pb_section .su-contact-form.et_pb_contact_form_container.et_pb_module .et_pb_button::after { display: none !important; }
/*    The build's "Required fields" note (p.ils-required-note right after the form) drawn as live's em.required. */
body.su-site #page-container .su-contact-form { margin-bottom: 0; }
body.su-site #page-container p.ils-required-note { margin: 0 20px 20px 5px; padding: 0; text-align: right; }
body.su-site #page-container p.ils-required-note em.required { display: block; padding: 0 20px 0 0; font: normal 400 11px/22px 'AdventorBook', Arial, Helvetica, sans-serif;
  color: #979797; background: url(/wp-content/uploads/ilaunch/skin/icon-required.png) no-repeat right center; }

@media (min-width: 1170px) {
  body.su-site #page-container .su-contact-form form.et_pb_contact_form { display: grid; grid-template-columns: 100px 261px 114px 261px 105px 329px; column-gap: 0; row-gap: 0; }
  /* /reviews: live's auto table layout gives fractional columns (cells measured on live at 1440 and 1250: name field at 107.91px
     into the 1170 box, location 482.42, email 845.98; Chrome lays out in 1/64px steps, so the tracks are those exact
     multiples). Whole pixels put the location and email columns, the Comments star
     and Verification 1px right of live (3.18 OF9); the textarea cell spans columns 2 to 4 (635.515625px) for its star. */
  body.su-site.page-id-1137 #page-container .su-contact-form form.et_pb_contact_form { grid-template-columns: 102.90625px 261px 113.515625px 261px 102.5625px 329.015625px; }
  body.su-site.page-id-1137 #page-container .su-contact-form p.et_pb_contact_field:has(> textarea[data-required_mark="required"]) { --su-td: 635.515625px; }
  body.su-site #page-container .su-contact-form p.et_pb_contact_field,
  body.su-site #page-container .su-contact-form .et_contact_bottom_container,
  body.su-site #page-container .su-contact-form .et_pb_contact_right { display: contents; }
  body.su-site #page-container .su-contact-form .et_pb_contact_field_0 > label { grid-area: 1 / 1; }
  body.su-site #page-container .su-contact-form .et_pb_contact_field_0 > .input { grid-area: 1 / 2; }
  body.su-site #page-container .su-contact-form .et_pb_contact_field_1 > label { grid-area: 1 / 3; }
  body.su-site #page-container .su-contact-form .et_pb_contact_field_1 > .input { grid-area: 1 / 4; }
  body.su-site #page-container .su-contact-form .et_pb_contact_field_2 > label { grid-area: 1 / 5; }
  body.su-site #page-container .su-contact-form .et_pb_contact_field_2 > .input { grid-area: 1 / 6; }
  body.su-site #page-container .su-contact-form .et_pb_contact_field_3 > label { grid-area: 2 / 1; }
  body.su-site #page-container .su-contact-form .et_pb_contact_field_3 > .input { grid-area: 2 / 2 / 3 / 5; }
  body.su-site #page-container .su-contact-form .et_pb_contact_right p.clearfix { grid-area: 2 / 6; position: relative; }
  body.su-site #page-container .su-contact-form .et_pb_contact_right p.clearfix::before { content: "Verification"; position: absolute; right: 100%; top: -5px; width: auto; padding: 5px 10px 5px 5px; font: 400 14px/37px 'AdventorBook', Arial, Helvetica, sans-serif; color: #333333; text-align: right; display: block; visibility: visible; height: auto; margin-right: 5px; white-space: nowrap; }
  body.su-site #page-container .et_pb_section .su-contact-form.et_pb_contact_form_container.et_pb_module .et_pb_contact_submit { grid-area: 3 / 1 / 4 / 7; justify-self: end; }
  /* /newsletter/unsubscribe: one field and the button, live's default 2px cell spacing, no captcha, no note. */
  body.su-site.page-id-1149 #page-container .su-contact-form form.et_pb_contact_form { grid-template-columns: 115px 261px; column-gap: 2px; row-gap: 2px; padding: 2px; width: max-content; }
  body.su-site.page-id-1149 #page-container .su-contact-form .et_pb_contact_field_0 > label { grid-area: 1 / 1; }
  body.su-site.page-id-1149 #page-container .su-contact-form .et_pb_contact_field_0 > .input { grid-area: 1 / 2; }
  body.su-site.page-id-1149 #page-container .et_pb_section .su-contact-form.et_pb_contact_form_container.et_pb_module .et_pb_contact_submit { grid-area: 2 / 2; justify-self: start; margin: 5px 0 5px 5px; }
}

/* 13. Phone numbers (kit rule of 2026-10-07, found on a real iPhone): live shows them as plain text, which iOS turns
       into its own link colour. They are explicit tel: links here (class tel-link, the fax left plain) that keep the
       surrounding text colour with no underline in every state, so 1250 and up looks exactly like live. */
body.su-site #page-container a.tel-link, body.su-site #page-container a.tel-link:link, body.su-site #page-container a.tel-link:visited,
body.su-site #page-container a.tel-link:hover, body.su-site #page-container a.tel-link:active, body.su-site #page-container a.tel-link:focus,
body.su-site a[x-apple-data-detectors] { color: inherit !important; text-decoration: none !important; font: inherit; }

/* 14. Blog views (/blog, posts, category, month and tag lists) and the map's Get Directions box have NO live render to copy
       (live's blog is the iLaunch error page, live's map info box is hidden), so they get the AA link states at every width
       instead of live's 2.9 to 3.4:1 pager and panel hover colours. */
body.su-site:is(.page-id-1147, .single, .blog, .archive) #page-container a:active,
body.su-site #page-container .map-info a:active { color: #b30000; }
body.su-site:is(.page-id-1147, .single, .blog, .archive) #page-container .paging,
body.su-site:is(.page-id-1147, .single, .blog, .archive) #page-container .paging a:link,
body.su-site:is(.page-id-1147, .single, .blog, .archive) #page-container .paging a:visited,
body.su-site:is(.page-id-1147, .single, .blog, .archive) #page-container .paging a:active { color: #595959; }
body.su-site:is(.page-id-1147, .single, .blog, .archive) #page-container .paging a:hover,
body.su-site:is(.page-id-1147, .single, .blog, .archive) #page-container .paging a:focus,
body.su-site:is(.page-id-1147, .single, .blog, .archive) #page-container .paging em a { background-color: #0072a3 !important; color: #ffffff !important; }
body.su-site:is(.page-id-1147, .single, .blog, .archive) #page-container .panel a:not(.more):hover,
body.su-site:is(.page-id-1147, .single, .blog, .archive) #page-container .panel a:not(.more):focus,
body.su-site:is(.page-id-1147, .single, .blog, .archive) #page-container .panel a:not(.more):active { color: #ffffff !important; text-decoration: underline; }
body.su-site:is(.page-id-1147, .single, .blog, .archive) #page-container .socialmedia a:active { color: #ffffff; }
/* After a successful submit Divi replaces the form with its thank-you line; the "Required fields" note then has nothing to annotate. */
body.su-site #page-container .su-contact-form:not(:has(form)) + p.ils-required-note { display: none; }
/* 15. On archive views (category, month, tag) Divi prints the Theme Builder footer row with padding-bottom:20px!important, so those
       pages ended 20px lower than every other page. Same footer edge everywhere. */
html body.su-site #et-boc .et-l.et-l--footer .et_pb_row { padding-bottom: 0 !important; }

/* 16. Home welcome copy (Bryan's decision, 7 Oct 2026): live keeps the six welcome paragraphs in a 180px scroll box whose
       lower half sits under the offer photo (.special margin -180px). Shown in full at every width from 1170 up, as Stage 4
       already did for 1170 to 1249: the box grows to its copy and clears the photo (200px margin against the photo's -180px),
       so the home page is taller by the hidden copy plus 20px and nothing else on the page moves. A deliberate difference
       from live (parity-table D row). Below 1170 su-mobile.css lays the welcome copy out on its own. */
@media (min-width: 1170px) { body.su-site.su-home #page-container .content.main { height: auto; overflow: visible; margin-bottom: 200px; } }

/* 17. Keyboard focus (fix round 1, 3.18 OF1). Divi's inline stylesheet resets ":focus { outline: 0 }" and "a, abbr, ...
       { outline: 0 }", so no link, field or button showed where the keyboard was; live has no such reset and shows the
       browser's own focus ring. "revert" hands the outline back to the browser (Chrome: its two-tone ring, dark and white;
       Safari and Firefox their own), exactly what live gets from 1250 up. Body-wide, so the lightbox and anything else
       appended outside #page-container is covered. Low specificity on purpose: live's own "outline: none" rules (fancybox,
       slider arrows, select) still win, as on live. Below 1250 su-mobile.css draws its own AA ring. */
body.su-site :focus-visible { outline: revert; }
/*    The STAAH widget removes the ring from its own room and promo-code fields (live too: 2 of the first 30 Tab stops on live's
      home show nothing). The browser's ring is handed back there as well, so every focusable element shows where the keyboard
      is; nothing changes until a field has keyboard focus. */
body.su-site .Configure-quickBook-Widget :focus-visible { outline: revert !important; }

/* 18. Stacking under the lightbox (fix round 1, 3.18 OF3). On live every page block sits inside #container-outer
       (position relative, z-index 2), so live's z-index 9999 on the home welcome copy, the Book Direct lines and the blog
       band's wedge only order them among themselves, and fancybox (overlay 1100, frame 1101, appended to <body>) covers all
       of them. Here #container-outer wraps only the header and hero, so those three sat at the ROOT level at 9999 and painted
       over the open video lightbox. 1000 keeps their order among the page blocks exactly as on live (above live's 999 items,
       above the header-and-hero wrapper's 2) and puts them under fancybox again. */
body.su-site.su-home #page-container .content.main,
body.su-site.su-home #page-container .content.bottom p,
body.su-site.su-home #page-container .content.blog-map::before { z-index: 1000; }

/* 19. Hero slider before it starts (fix round 1, OF4 follow-up). Until slidepark runs (at DOMContentLoaded) the slide list has
       the browser's default list margin (14px) and padding, and Divi's builder wrapper lets that margin collapse through
       #feature and #container-outer, so the whole header and hero moved up 14px once the slider started (a layout shift at
       every width, 0.01 at 1440). slidepark sets exactly these values inline when it starts, so the running slider and
       everything after it look the same as before; only the jump goes. */
body.su-site #page-container ul#featuremain { margin: 0; padding: 0; list-style: none; }

/* 20. Posts with no feature image carry an empty, zero-size lightbox link (<a class="gallery-item" href="#"></a>): a keyboard
       stop with nothing to see or press, and a nameless link for screen readers (3.18 N8; found again by the fix round 1
       focus check). It is taken out of the page; posts with a picture keep theirs. */
body.su-site #page-container a.gallery-item[href="#"]:empty { display: none; }

/* 21. The booking widget is third-party (script, then its own availability call) and fills in about 1-2 seconds after the page
       paints, leaving an empty bar. Until it arrives, show a plain loading line in the bar; the widget replaces
       #quikbook-widget outright, so the line disappears by itself once the real form is drawn (Clarissa, 9 Oct). */
body.su-site #page-container #booking #quikbook-widget:empty::before { content: "Loading booking options\2026"; display: block; color: #ffffff; font-size: 14px; line-height: 36px; padding: 14px 10px; }