/* os-design.css - Ocean Sands DESKTOP parity layer (Stage 4). Loads after os-bundle.css + os-live.css (live's CSS, scoped under
   body.os-site #page-container) and before os-mobile.css. Every rule undoes something Divi adds that live iLaunch never had.
   Adapted from kit ilaunch-divi-parity.template.css ($B = body.os-site, $P = body.os-site #page-container,
   $H = body.os-site.os-home #page-container, $SC = os). Values below are measured from Ocean Sands' live site only. */

/* 1. Live iLaunch CSS assumes the browser default content-box; Divi sets * {box-sizing:border-box}. Divi's own contact-form module keeps border-box. */
body.os-site #page-container, body.os-site #page-container *, body.os-site #page-container *::before, body.os-site #page-container *::after { box-sizing: content-box; }
body.os-site #page-container .et_pb_contact_form_container, body.os-site #page-container .et_pb_contact_form_container * { box-sizing: border-box; }
/* form controls the browser sizes as border-box by default */
body.os-site #page-container select, body.os-site #page-container button,
body.os-site #page-container input[type=submit], body.os-site #page-container input[type=button], body.os-site #page-container input[type=reset], body.os-site #page-container input[type=image] { box-sizing: border-box; }

/* 2. Divi caps .container at 80% / 1080px; live's .container is a fixed 1170px. */
body.os-site #page-container .container { max-width: none; }

/* 3. Browser-default spacing the live CSS relies on, which Divi's reset removes. No ids in these selectors, so every live rule
      (body.os-site #page-container ...) still wins where live sets its own value. */
body.os-site :where(.et-l, #main-content) p { padding-bottom: 0; margin-bottom: 1em; }
body.os-site :where(.et-l, #main-content) ul, body.os-site :where(.et-l, #main-content) ol { padding: 0 0 0 40px; margin: 1em 0; line-height: inherit; list-style-position: outside; }
body.os-site :where(.et-l, #main-content) ul { list-style-type: disc; }
body.os-site :where(.et-l, #main-content) ol { list-style-type: decimal; }
body.os-site :where(.et-l, #main-content) :is(ul, ol) :is(ul, ol) { margin-top: 0; margin-bottom: 0; }
body.os-site :where(.et-l, #main-content) ul ul { list-style-type: circle; }
body.os-site :where(.et-l, #main-content) ul ul ul { list-style-type: square; }
/* live styles h1-h5 and leaves h6 to the browser; Divi's h1-h6 {color:#333; line-height:1em; font-size} must not show through */
body.os-site :where(.et-l, #main-content) h5 { font-size: 0.83em; color: inherit; line-height: inherit; }
body.os-site :where(.et-l, #main-content) h6 { font-size: 0.67em; margin: 2.33em 0; font-weight: bold; color: inherit; line-height: inherit; }
body.os-site :where(.et-l, #main-content) :is(h1, h2, h3, h4, h5, h6) { padding-bottom: 0; }
body.os-site :where(.et-l, #main-content) strong, body.os-site :where(.et-l, #main-content) b { font-weight: bold; }

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

/* 5. Divi's right-sidebar layout rule (#main-content .container::before) is not on live. */
body.os-site #main-content .container::before { display: none; }

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

/* 7. Divi draws a 5px rule down the left of every blockquote; live's blockquote is the quote-icon look (reviews). */
body.os-site :where(.et-l, #main-content) blockquote { border-left: 0; }

/* 8. Phone menu button (header fragment; never shown at desktop widths). */
body.os-site #page-container .ils-menu-toggle { display: none; }

/* 11. Divi colours every <a> #2ea3f2; live colours only a:link, so name anchors (<a id="...">) inherit. Zero-id
       specificity so every live rule still wins. */
body.os-site :where(#page-container a:not([href])) { color: inherit; }

/* 12. Divi pads "#main-content .container" 58px at the top; live's .container has none. */
html body.os-site #main-content .container { padding-top: 0; }

/* 13. Divi sets body text to font-weight 500; live's body is the browser default 400 (the self-hosted DIN and Open Sans faces
       are single-weight, so 500 changed nothing visible, but it is not live's value). */
body.os-site { font-weight: 400; }

/* 14. Divi colours every blockquote border #2ea3f2; live's only visible border is the 1px #eeeeee bottom rule (reviews). */
body.os-site :where(.et-l, #main-content) blockquote { border-color: currentColor; }

/* 15. Contact and review forms: Divi's contact-form module dressed as live's table.form (general.css "FORM"): 111px label column
       (5px 10px 5px 5px, 20px line, white 14px Open Sans), 451px field column (5px 20px 5px 5px), white 426 x 31px inputs with a 1px
       #cbcbcb border, 426 x 107px message box (row 123px with the inline-box descender gap), live's star 430px into the field cell
       of each required field, an 88px verification row (live's reCAPTCHA key belongs to iLaunch's account, so Divi's maths captcha
       sits in that row), the 128 x 51px red SUBMIT (dinbold 20px, #a40001, hover #423525) and the "Required fields" note: in the
       submit row on /contact (floated right), in its own row under the button on /reviews (live's markup differs per form). */
body.os-site #page-container .os-contact-form { margin: 15px 0; padding: 0; width: 562px; max-width: 100%; }
body.os-site #page-container .os-contact-form .et-pb-contact-message:empty { display: none; }
body.os-site #page-container .os-contact-form .et_pb_contact { padding: 0; margin: 0; }
body.os-site #page-container .os-contact-form form.et_pb_contact_form { display: grid; grid-template-columns: 111px 451px; margin: 0; padding: 0; }
body.os-site #page-container .os-contact-form p.et_pb_contact_field,
body.os-site #page-container .os-contact-form .et_contact_bottom_container,
body.os-site #page-container .os-contact-form .et_pb_contact_right { display: contents; }
body.os-site #page-container .os-contact-form .et_pb_contact_form_label {
  display: block; grid-column: 1; width: 111px; margin: 0; padding: 5px 10.5px 5px 5px; font: 400 14px/20px 'open_sansregular', Arial, Helvetica, sans-serif; color: #ffffff; text-align: left; position: relative; }
body.os-site #page-container .os-contact-form p.et_pb_contact_field .input {
  grid-column: 2; display: block; width: 426px; height: 31px; margin: 5px 20px 5px 5px; padding: 5px 10px; border: 1px solid #cbcbcb; border-radius: 0;
  background: #ffffff; font: 400 14px/normal 'open_sansregular', Arial, Helvetica, sans-serif; color: #666666; box-shadow: none; }
body.os-site #page-container .os-contact-form p.et_pb_contact_field textarea.input { height: 107px; min-height: 0; margin-bottom: 11px; resize: both; }
body.os-site #page-container .os-contact-form p.et_pb_contact_field .input::placeholder { color: transparent; }
body.os-site #page-container .os-contact-form p.et_pb_contact_field .input.et_contact_error { border-color: #e02b20; }
/* the required star: live paints it as the field cell's background at 430px 7px = 541px from the label's left edge */
body.os-site #page-container .os-contact-form p.et_pb_contact_field:has(> [data-required_mark="required"]) > .et_pb_contact_form_label::after {
  content: ""; position: absolute; left: 541px; top: 7px; width: 16px; height: 16px; background: url(/wp-content/uploads/ilaunch/skin/icon-required.png) no-repeat 0 0; }
/* verification row (live: an empty 78px reCAPTCHA box + 10px) */
body.os-site #page-container .os-contact-form .et_pb_contact_right p.clearfix {
  grid-column: 2; display: block; float: none; width: auto; margin: 0; padding: 5px 20px 5px 5px; min-height: 88px; text-align: left; font: 400 14px/31px 'open_sansregular', Arial, Helvetica, sans-serif; color: #ffffff; }
body.os-site #page-container .os-contact-form .et_pb_contact_captcha_question { font: inherit; color: inherit; }
body.os-site #page-container .os-contact-form input.et_pb_contact_captcha {
  display: inline-block; width: 62px; max-width: none; height: 31px; margin: 0 0 0 10px; padding: 5px 10px; border: 1px solid #cbcbcb; border-radius: 0; background: #ffffff;
  font: 400 14px/normal 'open_sansregular', Arial, Helvetica, sans-serif; color: #666666; vertical-align: top; box-shadow: none; }
body.os-site #page-container .os-contact-form input.et_pb_contact_captcha.et_contact_error { border-color: #e02b20; }
body.os-site #page-container .et_pb_section .os-contact-form.et_pb_contact_form_container.et_pb_module .et_pb_button {
  grid-column: 2; justify-self: start; display: inline-block; width: auto; height: auto; margin: 5px 0 5px 5px !important; padding: 13px 29px 13px 27px !important; border: 0 !important; border-radius: 0 !important;
  background: #a40001 !important; color: #ffffff !important; font: 400 20px/normal 'dinbold', Arial, Helvetica, sans-serif !important; text-transform: uppercase; letter-spacing: 0 !important; cursor: pointer; transition: none; }
body.os-site #page-container .et_pb_section .os-contact-form.et_pb_contact_form_container.et_pb_module .et_pb_button:hover { background: #423525 !important; padding: 13px 29px 13px 27px !important; }
body.os-site #page-container .et_pb_section .os-contact-form.et_pb_contact_form_container.et_pb_module .et_pb_button::after { display: none !important; }
/* "Required fields": 11px, line 22px, right edge 20px inside the field column (live: em.required floats right in the cell), live's
   star 430px 7px into the cell. The note is a zero-height block after the form (absolute children, so the column's margins still
   behave as live's table margin). */
body.os-site #page-container .os-contact-form { margin-bottom: 0; }
body.os-site #page-container .content p.ils-required-note { position: relative; width: 562px; max-width: 100%; height: 0; margin: 0 0 15px 0; padding: 0; line-height: 22px; }
body.os-site #page-container .content p.ils-required-note em.required { position: absolute; right: 20px; top: 0; font-size: 11px; font-style: normal; line-height: 22px; color: #ffffff; white-space: nowrap; }
body.os-site #page-container .content p.ils-required-note::after {
  content: ""; position: absolute; right: 5px; top: 2px; width: 16px; height: 16px; background: url(/wp-content/uploads/ilaunch/skin/icon-required.png) no-repeat 0 0; }
/* /contact: in the 61px submit row (row top = form bottom - 61; text 5px and star 7px below the row top) */
body.os-site.page-id-1493 #page-container .content p.ils-required-note em.required { top: -56px; }
body.os-site.page-id-1493 #page-container .content p.ils-required-note::after { top: -54px; }
/* /reviews: its own 32px row under the SUBMIT row (td align=right) */
body.os-site.page-id-1492 #page-container .content p.ils-required-note { height: 22px; padding: 5px 0; }
body.os-site.page-id-1492 #page-container .content p.ils-required-note em.required { top: 6px; }
body.os-site.page-id-1492 #page-container .content p.ils-required-note::after { top: 7px; }

/* 16. Divi caps every image at max-width 100%; live does not, so a 755px offer photo in a table cell (/specials) shrank its
       column to 279px and rewrapped the offer text. Live's sizes at desktop (the tablet and phone layer caps images again). */
body.os-site :where(.et-l, #main-content) .content img { max-width: none; }

/* 17. Divi makes every .container position:relative; live's .container is static (only #header .container is relative), so the
       home "Check Availability" banner (absolute, top 0) sat 30px low inside the offer row's .container. Zero-id specificity:
       live's own #header .container rule still wins. */
body.os-site :where(#page-container) .container { position: static; }

/* 18. Divi zeroes table border-spacing; live keeps the browser default (2px) and honours the cellspacing attribute (/specials: 1). */
body.os-site :where(.et-l, #main-content) table:not([cellspacing]) { border-spacing: 2px; }
body.os-site :where(.et-l, #main-content) table[cellspacing="1"] { border-spacing: 1px; }

/* 19. Photo lightbox above the menu bar and booking box (z-index 9999 on live): on live a tall photo opens with its close X
       under the menu bar, so the X cannot be clicked (live defect, not copied; the closed page looks the same). */
body.os-site #fancybox-overlay { z-index: 100000 !important; }
body.os-site #fancybox-wrap { z-index: 100001 !important; }
body.os-site #fancybox-loading { z-index: 100002 !important; }

/* 20. After a successful submit Divi replaces the form with its thank-you line; live's "Required fields" note was part of the
       form and went with it. */
body.os-site #page-container .os-contact-form:not(:has(form)) + p.ils-required-note { display: none; }

/* 21. Phone numbers (Stage 3b, 2026-10-07, finding F7; kit rule from a real-iPhone check): live shows the numbers as plain text,
       which iOS turns into its own link colour. They are now explicit tel: links (class tel-link) that keep the surrounding text
       colour, with no underline, in every state and at every width, so 1250 and up looks exactly like live; anything iOS might
       still detect is switched off by the format-detection meta (os-sitewide.php). */
body.os-site #page-container a.tel-link, body.os-site #page-container a.tel-link:link, body.os-site #page-container a.tel-link:visited,
body.os-site #page-container a.tel-link:hover, body.os-site #page-container a.tel-link:active, body.os-site #page-container a.tel-link:focus,
body.os-site a[x-apple-data-detectors] { color: inherit !important; text-decoration: none !important; font: inherit; }

/* 22. Keyboard focus ring (Stage 3b, 2026-10-07, finding F9; a sister site's independent check): Divi's inline `:focus {outline:0}`
       removed the browser's focus ring from every link, field and button (dev /contact at 1440: 0 of 41 tab stops showed a ring;
       live 37 of 38). Give the browser's own ring back for keyboard focus only, as live has it; live's own outline:none rules on
       the slider controls stay (they out-specify this). Chrome's auto ring is a dark-and-white double ring, visible on every ground. */
html body.os-site :focus-visible { outline: revert; }

/* 23. Photo pop-up frame (Stage 3b, 2026-10-07, finding F10): fancybox appends its pop-up to <body>, outside #page-container, so the
       ported rule `body.os-site #page-container .fancy-bg {...}` never reached the eight frame pieces; they fell back to static
       blocks and drew grey striped bands round the photo. Same rule without the container (and below the pieces' own id rules, so the
       edges keep their 100% width or height). */
body.os-site .fancy-bg { position: absolute; padding: 0; margin: 0; border: 0; width: 20px; height: 20px; z-index: 1001; }

/* 24. Review form verification row (fix round 1, 3.18 B2): live marks the review form's reCAPTCHA cell td class="required", so a star
       sits in that row 430px 7px into the field cell like every other star (live's /contact verification cell is not marked required:
       no star there). Divi's .clearfix::after is a hidden zero-height block, so each of its properties is set here. */
body.os-site.page-id-1492 #page-container .os-contact-form .et_pb_contact_right p.clearfix { position: relative; }
body.os-site.page-id-1492 #page-container .os-contact-form .et_pb_contact_right p.clearfix::after {
  content: ""; display: block; position: absolute; left: 430px; top: 7px; width: 16px; height: 16px; clear: none; visibility: visible; font-size: 0;
  background: url(/wp-content/uploads/ilaunch/skin/icon-required.png) no-repeat 0 0; }

/* 25. Booking calendar (fix round 1, 3.18 C1): iLaunch appends #datepicker_div to <body>, outside #page-container, so rule 1's
       content-box restore and the ported "#page-container" rules for its table, links, cells and selects never reached it, and
       Divi's border-box squeezed it to 127px (live 187px; day cells 17px against 25px). The same rules for the body-level calendar;
       its two selects keep the browser's border-box, as on live (padding: live's select rule, then its header rule's padding-top 0). */
body.os-site #datepicker_div, body.os-site #datepicker_div *, body.os-site #datepicker_div *::before, body.os-site #datepicker_div *::after { box-sizing: content-box; }
body.os-site #datepicker_div table { border-collapse: separate; }
body.os-site #datepicker_div .datepicker { clear: both; float: left; width: 100%; color: #fff; background: #ccc; text-align: center; font-size: 100%; }
body.os-site #datepicker_div .datepicker a { display: block; width: 100%; }
body.os-site #datepicker_div th, body.os-site #datepicker_div td { font-family: 'open_sansregular', Arial, Helvetica, sans-serif; }
body.os-site #datepicker_div select { box-sizing: border-box; padding: 0 8px 4px; font-family: 'open_sansregular', Arial, Helvetica, sans-serif; }