/* as-design.css - Aruba Surf Resort DESKTOP parity layer (Stage 4). Loads after as-bundle.css + as-live.css (live's CSS, scoped under
   body.as-site #page-container) and as-base.css (Stage 3's structural minimum: content-box, no .container cap, no 58px top padding),
   and before as-mobile.css. Every rule undoes something Divi adds that live iLaunch never had, or adds an accessibility behaviour that
   does not change the look. Adapted from kit ilaunch-divi-parity.template.css and an earlier family A site's design layer; the values
   below are this site's own, read from live general.css and measured on live with design_pairs.js at 1440. */

/* ---- 1. Divi's own .container is position:relative; live's .container is static (live's "#header .container" keeps relative: two ids win) ---- */
body.as-site :where(#page-container) .container { position: static; }

/* ---- 2. browser-default type and spacing that live's CSS relies on (one id plus :where, above Divi's class rules and below every scoped live rule, so live still wins) ---- */
/* Divi sets body { font-weight: 500 } and greyscale smoothing; live is 400 with the browser's own smoothing */
body.as-site { font-weight: normal; -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; }
body.as-site #page-container :where(p) { padding-bottom: 0; margin-bottom: 1em; }
body.as-site #page-container :where(ul, ol) { padding: 0 0 0 40px; margin: 1em 0; line-height: inherit; list-style-position: outside; }
body.as-site #page-container :where(ul) { list-style-type: disc; }
body.as-site #page-container :where(ol) { list-style-type: decimal; }
body.as-site #page-container :where(ul, ol) :where(ul, ol) { margin-top: 0; margin-bottom: 0; }
body.as-site #page-container :where(ul ul) { list-style-type: circle; }
body.as-site #page-container :where(ul ul ul) { list-style-type: square; }
body.as-site #page-container :where(li) { line-height: inherit; }
body.as-site #page-container :where(h5) { font-size: 0.83em; color: inherit; line-height: inherit; }
body.as-site #page-container :where(h6) { font-size: 0.67em; margin: 2.33em 0; font-weight: bold; color: inherit; line-height: inherit; }
body.as-site #page-container :where(h1, h2, h3, h4, h5, h6) { padding-bottom: 0; }
body.as-site #page-container :where(strong, b) { font-weight: bolder; }
/* Divi colours every <a> #2ea3f2; live colours only a:link, so name anchors (a#top) inherit */
body.as-site :where(#page-container a:not([href])) { color: inherit; }

/* ---- 3. Divi's content-table look is not on live: browser defaults, honouring the width / cellpadding / cellspacing attributes ---- */
body.as-site #page-container :where(table) { border: 0; margin: 0; width: auto; text-align: start; border-collapse: separate; border-spacing: 2px; }
body.as-site #page-container :where(table[width="100%"]) { width: 100%; }
body.as-site #page-container :where(table[cellspacing="0"]) { border-spacing: 0; }
body.as-site #page-container :where(table[cellspacing="5"]) { border-spacing: 5px; }
/* the reset's margin: 0 out-ranks the align attribute's presentational centring (attractions: the 4-photo table, centred on live) */
body.as-site #page-container :where(table[align="center"]) { margin-left: auto; margin-right: auto; }
body.as-site #page-container :where(tr td, tr th) { border-top: 0; padding: 1px; text-align: start; }
body.as-site #page-container :where(table[cellpadding="0"] td, table[cellpadding="0"] th) { padding: 0; }
body.as-site #page-container :where(table[cellpadding="5"] td, table[cellpadding="5"] th) { padding: 5px; }

/* ---- 4. content images: Divi caps images at max-width 100%; live does not ---- */
body.as-site #page-container .content :where(img) { max-width: none; }

/* ---- 5. phone menu button (added to the header fragment in Stage 4; never shown from 1170 up) ---- */
body.as-site #page-container .ils-menu-toggle { display: none; }

/* ---- 6. booking calendar: appended to <body>, outside #page-container, so the CSS port leaves its rules unscoped; Divi's global
   border-box still reaches it (browser defaults, as on live) ---- */
body.as-site #datepicker_div, body.as-site #datepicker_div * { box-sizing: revert; }
/* live's bundle.css rules for the day table (".datepicker", ".datepicker a") and its general.css "select { padding: 4px 8px }" were ported
   under #page-container and never reach the calendar; given back here from 1250 up (as-mobile.css draws its own calendar below 1250).
   The table is live's: cellspacing 0 in the separate border model, so every day cell keeps its own 1px border (Divi collapses them). */
@media (min-width: 1250px) {
  body.as-site #datepicker_div .datepicker { clear: both; float: left; width: 100%; margin: 0; border: 0; border-collapse: separate; border-spacing: 0; color: #ffffff; background: #cccccc; text-align: center; font-size: 100%; }
  body.as-site #datepicker_div .datepicker a { display: block; width: 100%; }
  body.as-site #datepicker_div select { padding: 4px 8px; }
}

/* ---- 6c. photo pop-up (fancybox): appended to <body> too. Live's ".fancy-bg" rule (the eight 20px shadow pieces round the frame) was
   ported under #page-container, so on dev the pieces had no size or place and the frame lost its shadow; live's measuring box
   #fancybox-tmp is content-box; live's a:link colour reaches the pop-up's links. From 1250 up (below 1250 is as-mobile.css's). ---- */
@media (min-width: 1250px) {
  body.as-site .fancy-bg { position: absolute; padding: 0; margin: 0; border: 0; width: 20px; height: 20px; z-index: 1001; box-sizing: content-box; }
  body.as-site #fancybox-tmp { box-sizing: content-box; }
  body.as-site #fancybox-wrap a[href] { color: #f57c31; }
  body.as-site #fancybox-wrap a:not([href]) { color: inherit; }
}

/* ---- 7. keyboard focus. Divi ships ":focus { outline: 0 }" and "a, abbr, ... { outline: 0 }", which hides every focus ring; live shows
   the browser's own ring. From 1250 up this gives back exactly that ring (low specificity, so any live "outline: none" still wins);
   below 1250 as-mobile.css draws an AA ring. The Contact Us drop-down also opens while one of its links has keyboard focus (live opens
   it on hover only, so keyboard users could not reach FAQs or Booking Terms). ---- */
body.as-site :focus-visible { outline: revert; }
body.as-site #page-container #menu li:focus-within ul { display: block; }
body.as-site #page-container #menu li:focus-within { z-index: 2; }
/* B6 (3.18b): opened from the keyboard the drop-down kept the grey #444 link colour on its blue panel (2.71:1); it now takes live's own
   mouse-open look, the same rules as live's :hover ones (parent blue with the 8px bar, sub-links white, the focused or current one
   orange). From 1250 up only (below 1250 as-mobile.css styles the menu), and only on an item that has a drop-down, so a keyboard stop
   on any other menu item still looks exactly as live's. */
@media (min-width: 1250px) {
  body.as-site #page-container #menu li:has(> ul):focus-within { border-bottom: 8px solid #4489da; }
  body.as-site #page-container #menu li:has(> ul):focus-within a:is(:link, :active, :visited, :hover) { color: #4489da; }
  body.as-site #page-container #menu li:has(> ul):focus-within ul a:is(:link, :active, :visited) { color: #ffffff; }
  body.as-site #page-container #menu li:has(> ul):focus-within li:is(.active, :focus-within) a:is(:link, :active, :visited, :hover) { color: #ffae00; }
}

/* ---- 8. phone numbers: live shows them as plain text; here they are explicit tel: links (class tel-link, written by the build; the fax
   stays plain) that keep the surrounding text exactly, with no underline, in every state, so 1250 and up is pixel-identical to live.
   The class plus the attribute out-rank live's "#footer a" and ".vcard a" rules. ---- */
body.as-site #page-container a.tel-link[href^="tel:"], body.as-site #page-container a.tel-link[href^="tel:"]:is(:link, :visited, :hover, :active, :focus),
body.as-site a[x-apple-data-detectors] { color: inherit !important; text-decoration: none !important; font: inherit; }

/* ---- 9. contact and review forms (1250 and up). Live's forms are a two-column table (label left, a 426px field right, the required
   star 3px past the field, a picture-code row, then the yellow SUBMIT); here they are Divi contact-form modules (class as-contact-form),
   laid out as the same table: every row keeps live's height and every field live's box. The sum question replaces live's picture code
   (Stage 3, DELIBERATE); the space of live's two-line "type in the code found in the red box" hint is kept, so all below sits where live
   has it. --th is live's label column, --in the field width. Review form: live's table is wider than its 372px column and makes the page
   scroll sideways (scrollWidth 1546 at 1440); here the label column stays live's 82.7px and the fields are fitted inside the column. ---- */
@media (min-width: 1250px) {
  body.as-site #page-container .et_pb_section .as-contact-form.et_pb_contact_form_container.et_pb_module { --th: 165px; --in: 426px; margin: 15px 0 !important; padding: 0; }
  body.as-site #page-container .et_pb_section .right:has([data-id="location"]) .as-contact-form.et_pb_contact_form_container.et_pb_module { --th: 82.7px; --in: 272px; }
  /* B1 (3.18b): live's table.form is auto layout: its 451px field cell stays put and the label column takes what is left of the form
     column, 165px from about 1400 up, 96px at 1250. --th now follows the form box's own width (a size container), so 1250 to 1399
     keeps live's field x, the stars inside the column and the "Required fields" note on screen. */
  @supports (container-type: inline-size) {
    body.as-site #page-container .et_pb_section .as-contact-form.et_pb_contact_form_container.et_pb_module { container-type: inline-size; --th: min(165px, calc(100cqw - 451px)); }
    body.as-site #page-container .et_pb_section .right:has([data-id="location"]) .as-contact-form.et_pb_contact_form_container.et_pb_module { --th: 82.7px; }
  }
  body.as-site #page-container .as-contact-form :is(.et_pb_contact, .et_pb_contact_form) { margin: 0 !important; padding: 0 !important; float: none; width: auto; }
  /* one field = one table row: td padding 5px top and bottom, 5px left of the field */
  body.as-site #page-container .as-contact-form .et_pb_contact_form .et_pb_contact_field { float: none !important; clear: both; display: flow-root; width: auto !important; margin: 0 !important; padding: 5px 0 5px calc(var(--th) + 5px) !important; position: relative; }
  body.as-site #page-container .as-contact-form .et_pb_contact_field:has(> [data-required_mark="required"]) { background: url(/wp-content/uploads/ilaunch/skin/images/icon-required.png) no-repeat calc(var(--th) + var(--in) + 4px) 7px; }
  /* the label sits in the row's left padding (a float with a negative left margin, its margin box ending 5px before the field), so a
     label that wraps in a narrow label column makes its row taller, as live's th does (1250: "Contact Phone" on two lines, +12px) */
  body.as-site #page-container .as-contact-form .et_pb_contact_field .et_pb_contact_form_label { display: block !important; position: static; float: left; box-sizing: content-box; width: calc(var(--th) - 15px); margin: -5px 0 -5px calc(-1 * (var(--th) + 5px)); padding: 5px 10px 5px 5px; font: normal 14px/20px Arial, Helvetica, sans-serif; color: #444444; text-align: left; }
  body.as-site #page-container .as-contact-form .et_pb_contact_field .input { display: block; box-sizing: border-box; width: var(--in); height: 28px; min-height: 0; margin: 0; padding: 5px 10px; border: 1px solid #cbcbcb; border-radius: 0; background: #ffffff; font: 14px Arial, Helvetica, sans-serif; color: #666666; }
  body.as-site #page-container .as-contact-form .et_pb_contact_field textarea.input { height: 92px; margin-bottom: 6px; resize: vertical; }
  body.as-site #page-container .as-contact-form .input::placeholder { color: transparent; opacity: 0; }
  /* the sum row (82px, as live's code row) and the SUBMIT row (54px) */
  body.as-site #page-container .as-contact-form .et_contact_bottom_container { display: block !important; float: none !important; clear: both; width: auto; margin: 0 !important; padding: 0 0 0 calc(var(--th) + 5px) !important; text-align: left; }
  body.as-site #page-container .as-contact-form .et_contact_bottom_container .et_pb_contact_right { display: block; float: none; width: auto; height: 82px; margin: 0; padding: 5px 0; text-align: left; }
  body.as-site #page-container .as-contact-form .et_pb_contact_right p { display: flex; align-items: center; column-gap: 4px; margin: 0 !important; padding: 0 !important; font: 14px/22px Arial, Helvetica, sans-serif; color: #444444; }
  body.as-site #page-container .as-contact-form .et_pb_contact_right p .et_pb_contact_captcha { display: block; box-sizing: border-box; width: 62px; max-width: none; height: 28px; margin: 0 0 0 6px; padding: 5px 10px; border: 1px solid #cbcbcb; border-radius: 0; background: #ffffff; font: 14px Arial, Helvetica, sans-serif; color: #666666; text-align: left; }
  body.as-site #page-container .et_pb_section .as-contact-form.et_pb_contact_form_container.et_pb_module .et_pb_button.et_pb_contact_submit,
  body.as-site #page-container .et_pb_section .as-contact-form.et_pb_contact_form_container.et_pb_module .et_pb_button.et_pb_contact_submit:is(:hover, :focus, :active) {
    display: inline-block; float: none; position: static; box-sizing: border-box; width: auto; height: auto; margin: 5px 0 !important; padding: 12px 30px 8px 30px !important;
    border: 0 !important; border-bottom: 3px solid #dba90a !important; border-radius: 0 !important; background: #fcc20c !important; color: #ffffff !important;
    font-family: 'AdventorMedium', Arial, Helvetica, sans-serif !important; font-size: 16px !important; font-weight: 600 !important; line-height: normal !important;
    letter-spacing: normal !important; text-transform: uppercase !important; text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.15); text-decoration: none; transition: none; cursor: pointer; }
  body.as-site #page-container .et_pb_section .as-contact-form.et_pb_contact_form_container.et_pb_module .et_pb_button.et_pb_contact_submit:hover { background: #eca201 !important; border-bottom-color: #cc8c00 !important; }
  body.as-site #page-container .et_pb_section .as-contact-form.et_pb_contact_form_container.et_pb_module .et_pb_button.et_pb_contact_submit::after { display: none !important; content: none !important; }
  /* "Required fields": contact puts it at the right of the SUBMIT row, the review form in its own 32px row with the star */
  /* position: relative, or the Divi form box (positioned) paints over the note and takes its clicks */
  body.as-site #page-container .content .right p.ils-required-note { position: relative; box-sizing: content-box; width: max-content; height: 22px; margin: -69px max(4px, calc(100% - 612px)) 37px auto; padding: 5px 16px 5px 0; line-height: 22px; text-align: right;
    background: url(/wp-content/uploads/ilaunch/skin/images/icon-required.png) no-repeat calc(100% - 1px) 7px; }
  body.as-site #page-container .content .right p.ils-required-note em.required { display: block; font-size: 11px; font-style: normal; line-height: 22px; color: #979797; }
  body.as-site #page-container .content .right:has([data-id="location"]) p.ils-required-note { width: auto; height: 22px; margin: -15px 0 15px; padding: 5px calc(100% - 82.7px - 5px - 272px) 5px 0; line-height: 22px;
    background: url(/wp-content/uploads/ilaunch/skin/images/icon-required.png) no-repeat calc(82.7px + 272px + 4px) 7px; }
  body.as-site #page-container .content .right:has([data-id="location"]) p.ils-required-note em.required { display: inline; line-height: 18px; }
  body.as-site #page-container .right:has([data-id="location"]) .as-contact-form .et_contact_bottom_container .et_pb_contact_right { background: url(/wp-content/uploads/ilaunch/skin/images/icon-required.png) no-repeat calc(var(--in) - 1px) 7px; }
}
/* B5 (3.18b): from 1820 up live's review table fits the window (below it, live scrolls sideways, D2): live's 426px fields, its label column
   82.7px or what the column leaves over 451px (134px at 2200, at most 165px: live's table stops at 616px), and the "Required fields" note 20px in from the field cell's right edge. */
@media (min-width: 1820px) {
  body.as-site #page-container .et_pb_section .right:has([data-id="location"]) .as-contact-form.et_pb_contact_form_container.et_pb_module { --in: 426px; }
  @supports (container-type: inline-size) {
    body.as-site #page-container .et_pb_section .right:has([data-id="location"]) .as-contact-form.et_pb_contact_form_container.et_pb_module { --th: clamp(82.7px, calc(100cqw - 451px), 165px); }
  }
  /* the rows are live's table rows: label column + the 451px field cell, wider than the 372 to 507px column, so the stars (painted 4px
     past each field) are not cut off at the column edge, as on live */
  body.as-site #page-container .right:has([data-id="location"]) .as-contact-form :is(.et_pb_contact_form .et_pb_contact_field, .et_contact_bottom_container) { box-sizing: border-box; width: calc(var(--th) + 451px) !important; }
  body.as-site #page-container .content .right:has([data-id="location"]) p.ils-required-note { box-sizing: content-box; width: calc(clamp(82.7px, 100% - 451px, 165px) + 431px); padding: 5px 16px 5px 0;
    background-position: calc(100% - 1px) 7px; }
}

/* ---- 10. the keyless map's info box (Stage 3 port, kit port_maps.py) has no live twin: live's own map is broken ("This page can't load
   Google Maps correctly"), so its info window never shows. Its "Get Directions" link would be live's #f57c31 on white (2.69:1); with
   nothing on live to copy, it takes the AA link orange the phone and tablet design uses (#b84d0b, 5.1:1), underline as live. ---- */
@media (min-width: 1250px) {
  body.as-site #page-container .map-wrapper .map-info a:is(:link, :visited, :active, :hover, :focus) { color: #b84d0b; }
}