/* st-design.css - Surfers Tropique DESKTOP parity layer (Stage 4). Loads after st-bundle.css + st-live.css (live's CSS, scoped under
   body.st-site #page-container) and st-base.css (Stage 3's structural minimum), and before st-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 the kit parity
   template and the family A sibling; values are this site's own, read from live general.css and measured with
   design_pairs.js at 1440. The behaviour rules (tel links, focus, body-appended widgets) apply at every width; the look rules that
   copy live's colours sit in min-width 1250px media queries (st-mobile.css owns every width below). */

/* ---- 1. browser-default type and spacing that live's CSS relies on (one id plus :where, so every scoped live rule still wins) ---- */
body.st-site { -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; }
body.st-site #page-container :where(ul, ol) { padding: 0 0 0 40px; margin: 1em 0; line-height: inherit; list-style-position: outside; }
body.st-site #page-container :where(ul) { list-style-type: disc; }
body.st-site #page-container :where(ol) { list-style-type: decimal; }
body.st-site #page-container :where(ul, ol) :where(ul, ol) { margin-top: 0; margin-bottom: 0; }
body.st-site #page-container :where(ul ul) { list-style-type: circle; }
body.st-site #page-container :where(ul ul ul) { list-style-type: square; }
body.st-site #page-container :where(li) { line-height: inherit; }
body.st-site #page-container :where(h5) { font-size: 0.83em; color: inherit; line-height: inherit; }
body.st-site #page-container :where(h6) { font-size: 0.67em; margin: 2.33em 0; font-weight: bold; color: inherit; line-height: inherit; }
body.st-site #page-container :where(strong, b) { font-weight: bolder; }
body.st-site :where(#page-container a:not([href])) { color: inherit; }
/* Divi colours every heading #666 and sets its own sizes; live's headings take the colour of the text around them */
body.st-site #page-container :where(.content h1, .content h2, .content h3, .content h4, .content h5, .content h6) { color: inherit; }

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

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

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

/* ---- 5. body-appended widgets: the booking calendar (#datepicker_div) and the photo pop-up (fancybox) hang off <body>, outside
   #page-container, so the CSS port's #page-container-scoped rules never reach them ---- */
body.st-site #datepicker_div, body.st-site #datepicker_div * { box-sizing: revert; }
@media (min-width: 1250px) {
  body.st-site #datepicker_div .datepicker { clear: both; float: left; width: 100%; margin: 0; border: 0; border-collapse: separate; border-spacing: 0; text-align: center; font-size: 100%; color: #ffffff; background: #cccccc; }
  body.st-site #datepicker_div .datepicker a { display: block; width: 100%; }
  /* live's general.css sets td and select type globally, so the calendar (outside #page-container) inherits it there: the same here */
  body.st-site #datepicker_div :is(td, th) { font-family: 'BarlowGeoRegular', Arial, Helvetica, sans-serif; font-size: 17px; line-height: 24px; color: #000000; }
  body.st-site #datepicker_div select { font-family: 'BarlowGeoRegular', Arial, Helvetica, sans-serif; }
  body.st-site .fancy-bg { position: absolute; padding: 0; margin: 0; border: 0; width: 20px; height: 20px; z-index: 1001; box-sizing: content-box; }
  body.st-site #fancybox-tmp { box-sizing: content-box; }
}

/* ---- 6. keyboard focus. Divi ships ":focus { outline: 0 }" and an outline reset on links, which hides every ring; live shows the
   browser's own. From 1250 up this gives back exactly that ring (low specificity, any live "outline: none" still wins); below 1250
   st-mobile.css draws an AA ring. The Contact Us drop-down also opens while one of its links has keyboard focus. ---- */
body.st-site :focus-visible { outline: revert; }
body.st-site #page-container #menu li:focus-within ul { display: block; }
body.st-site #page-container #menu li:focus-within { z-index: 2; }
@media (min-width: 1250px) {
  /* opened from the keyboard: the panel shows live's own mouse-open look (white links on the blue panel; the focused or current item blue on white);
     the parent link keeps its resting #444 so it stays readable (live's :focus look) */
  body.st-site #page-container #menu li:has(> ul):focus-within ul a:is(:link, :active, :visited) { color: #ffffff; }
  body.st-site #page-container #menu li:has(> ul):focus-within li:is(.active, :focus-within) a:is(:link, :active, :visited, :hover) { color: #0086cc; background: #ffffff; }
}

/* ---- 7. phone numbers: live shows them as plain text; here they are explicit tel: links (class tel-link; the fax stays plain) that
   keep the surrounding text exactly, no underline, in every state at 1250 and up ---- */
body.st-site #page-container a.tel-link[href^="tel:"], body.st-site #page-container a.tel-link[href^="tel:"]:is(:link, :visited, :hover, :active, :focus),
body.st-site a[x-apple-data-detectors] { color: inherit !important; text-decoration: none !important; font: inherit; }

/* ---- 8. contact, review and unsubscribe forms (1250 and up). Live's forms are one table (th label cells right-aligned, td field cells, the
   required star 20px past the field, a verification cell, then a right-aligned yellow SUBMIT with "Required fields" under it); here they
   are Divi contact-form modules (class st-contact-form) drawn on the same grid, so every cell, row and field is live's box. The Divi sum
   question replaces live's Google reCAPTCHA cell (Stage 3, DELIBERATE). --c1, --c2, --c3 are live's three label columns (auto table
   layout: they follow the label text, so they are measured per form). The live table is fixed at the 1170px container, so these are px. ---- */
@media (min-width: 1250px) {
  body.st-site #page-container .et_pb_section .st-contact-form.et_pb_contact_form_container.et_pb_module { --c1: 98.8px; --c2: 113.7px; --c3: 106.4px; margin: 15px 0 0 !important; padding: 0; }
  body.st-site #page-container .et_pb_section .st-review-form.et_pb_contact_form_container.et_pb_module { --c1: 102px; --c2: 113.3px; --c3: 103.7px; }
  body.st-site #page-container .st-contact-form :is(.et_pb_contact, .et_pb_contact_form) { margin: 0 !important; padding: 0 !important; float: none; width: auto; }
  body.st-site #page-container .st-contact-form:not(.st-unsub-form) .et_pb_contact_form { display: grid; grid-template-columns: var(--c1) 261px var(--c2) 261px var(--c3) 329px; align-items: start; }
  body.st-site #page-container .st-contact-form .et_pb_contact_form .et_pb_contact_field { float: none !important; clear: none; width: auto !important; margin: 0 !important; padding: 0 !important; position: relative; display: grid; grid-template-columns: subgrid; grid-column: span 2; }
  body.st-site #page-container .st-contact-form .et_pb_contact_form .et_pb_contact_field[data-type="text"] { grid-column: span 4; }
  body.st-site #page-container .st-contact-form .et_pb_contact_field:has(> [data-required_mark="required"]) { background: url(/wp-content/uploads/ilaunch/skin/images/icon-required.png) right 7px no-repeat; }
  body.st-site #page-container .st-contact-form .et_pb_contact_field .et_pb_contact_form_label { display: block !important; position: static; box-sizing: border-box; width: auto; margin: 0; padding: 5px 10px 5px 5px; font: 17px/37px 'BarlowGeoRegular', Arial, Helvetica, sans-serif; color: #ffffff; text-align: right; }
  body.st-site #page-container .st-contact-form .et_pb_contact_field .input { display: block; box-sizing: border-box; width: 236px; height: 41px; min-height: 0; margin: 5px 20px 5px 5px; padding: 10px 15px; border: 1px solid #dedede; border-radius: 0; background: #ffffff; font: 16px 'BarlowGeoRegular', Arial, Helvetica, sans-serif; color: #000000; }
  body.st-site #page-container .st-contact-form .et_pb_contact_field textarea.input { grid-column: 2 / -1; width: 609px; height: 117px; margin-bottom: 11px; resize: vertical; }
  body.st-site #page-container .st-contact-form .input::placeholder { color: transparent; opacity: 0; }
  /* the verification cell (live: "Verification" th + reCAPTCHA td) beside the message, and the SUBMIT row */
  body.st-site #page-container .st-contact-form:not(.st-unsub-form) .et_contact_bottom_container { display: contents; }
  body.st-site #page-container .st-contact-form:not(.st-unsub-form) .et_contact_bottom_container .et_pb_contact_right { grid-column: 5 / span 2; grid-row: 2; display: grid; grid-template-columns: subgrid; float: none; width: auto; margin: 0; padding: 0; }
  body.st-site #page-container .st-contact-form .et_pb_contact_right::before { content: "Verification"; box-sizing: border-box; padding: 5px 10px 5px 5px; font: 17px/37px 'BarlowGeoRegular', Arial, Helvetica, sans-serif; color: #ffffff; text-align: right; }
  body.st-site #page-container .st-contact-form .et_pb_contact_right p { display: flex; align-items: center; gap: 6px; margin: 0 !important; padding: 5px 20px 5px 5px !important; font: 17px/37px 'BarlowGeoRegular', Arial, Helvetica, sans-serif; color: #ffffff; }
  body.st-site #page-container .st-contact-form .et_pb_contact_right p .et_pb_contact_captcha { display: block; box-sizing: border-box; width: 66px; height: 41px; margin: 0; padding: 10px 15px; border: 1px solid #dedede; border-radius: 0; background: #ffffff; font: 16px 'BarlowGeoRegular', Arial, Helvetica, sans-serif; color: #000000; text-align: left; }
  body.st-site #page-container .st-contact-form:not(.st-unsub-form) .et_pb_contact_submit { grid-column: 1 / -1; grid-row: 3; justify-self: end; }
  body.st-site #page-container .et_pb_section .st-contact-form.et_pb_contact_form_container.et_pb_module .et_pb_button.et_pb_contact_submit,
  body.st-site #page-container .et_pb_section .st-contact-form.et_pb_contact_form_container.et_pb_module .et_pb_button.et_pb_contact_submit:is(:focus, :active) {
    display: inline-block; float: none; position: static; box-sizing: border-box; width: auto; height: 43px; margin: 5px 20px 27px 0 !important; padding: 0 45px !important;
    border: 0 !important; border-radius: 0 !important; background: #f7c101 !important; color: #ffffff !important;
    font-family: 'BarlowGeoSemi', Arial, Helvetica, sans-serif !important; font-size: 16px !important; font-weight: normal !important; line-height: 43px !important;
    letter-spacing: 2px !important; text-transform: uppercase !important; text-shadow: none; text-decoration: none; transition: background 1s, color 1s; cursor: pointer; }
  body.st-site #page-container .et_pb_section .st-contact-form.et_pb_contact_form_container.et_pb_module .et_pb_button.et_pb_contact_submit:hover { background: #0086cc !important; padding: 0 45px !important; }
  body.st-site #page-container .et_pb_section .st-contact-form.et_pb_contact_form_container.et_pb_module .et_pb_button.et_pb_contact_submit::after, body.st-site #page-container .st-contact-form .et_pb_button.et_pb_contact_submit::before { display: none !important; content: none !important; }
  /* "Required fields": under the SUBMIT button, inside live's last row (pulled up out of the flow after the module), right-aligned with the star past it */
  body.st-site #page-container .content p.ils-required-note { position: relative; margin: -27px 20px 20px 0; padding: 0 20px 0 0; height: 22px; text-align: right; line-height: 22px; background: url(/wp-content/uploads/ilaunch/skin/images/icon-required.png) right center no-repeat; background-origin: border-box; width: max-content; margin-left: auto; }
  body.st-site #page-container .content p.ils-required-note em.required { display: block; font-size: 11px; font-style: normal; line-height: 22px; color: #ffffff; }
  /* the unsubscribe form: live's table is 382px wide (cellspacing 2): the label column 115px, the field cell 261px, the button row under it */
  body.st-site #page-container .st-contact-form.st-unsub-form { width: 382px; padding: 2px; box-sizing: border-box; }
  body.st-site #page-container .st-unsub-form .et_pb_contact_form { display: grid; grid-template-columns: 115px 261px; }
  body.st-site #page-container .st-unsub-form .et_pb_contact_field { grid-column: span 2; }
  body.st-site #page-container .st-unsub-form .et_contact_bottom_container { display: contents; }
  body.st-site #page-container .st-unsub-form .et_pb_contact_right { grid-column: 1 / span 2; display: grid; grid-template-columns: subgrid; float: none; width: auto; margin: 0; padding: 0; }
  body.st-site #page-container .st-unsub-form .et_pb_contact_submit { grid-column: 2; justify-self: start; margin-bottom: 5px !important; }
}

/* ---- 9. a post whose comment form is switched off (DELIBERATE, Stage 3) ends on the "Comments" heading: keep it clear of the footer's
   paint-brush edge, which is pulled 70px up over the page ---- */
body.st-site #page-container .content.alt .left > h2:last-child { margin-bottom: 100px; }

/* ---- 10. the footer is pulled 70px up over the page (live's paint-brush edge sits on the last block): its transparent top band used to
   swallow clicks on whatever the page ends with (the bottom pager, "Back to top"). Pointer events pass through the footer itself; its
   own links, the map and the map card stay live. No visual change. ---- */
body.st-site #page-container :is(.et-l--footer, .et-l--footer .et_builder_inner_content, .et-l--footer :is(.et_pb_section, .et_pb_row, .et_pb_column, .et_pb_module, .et_pb_code_inner), #footer) { pointer-events: none; }
body.st-site #page-container #footer :is(a, .map-container, .map-container iframe, .map-info, .map-info *) { pointer-events: auto; }

/* ---- 11. things live has no twin for (so there is no live colour to copy): the keyless map's info card link, and the booking links rewritten to /contact
   in the posts (Stage 3, the 10 Oct rule): the AA link blue at every width ---- */
body.st-site #page-container #footer .map-wrapper .map-info a[href]:is(:link, :visited, :active, :hover, :focus) { color: #0070aa; text-decoration: underline; }
body.st-site #page-container .entry a[href$="/contact"]:not(.button):is(:link, :visited, :active, :hover) { color: #0070aa; }

/* ---- 12. two keyboard stops that live draws no ring on (live's "outline: none" on the booking select; the map frame we added): a ring for both (the map: a ring round
   its circle while the frame has focus: the frame itself draws none), keyboard focus only ---- */
@media (min-width: 1250px) {
  body.st-site #page-container .bookingform span select:focus-visible { outline: auto 1px -webkit-focus-ring-color; outline-offset: 0; }
}
body.st-site #page-container .map-container:focus-within { box-shadow: 0 0 0 3px #ffffff, 0 0 0 6px #1d2a33; }

/* ---- 13. phone numbers: Geogrotesque's digits and word space are 12 to 19 percent wider than the look-alike's, which only the header brush and the footer show at a
   size where it matters: their tracking makes the numbers as wide as live's (the container carries it, so the tel link and its plain text stay identical) ---- */
@media (min-width: 1250px) {
  body.st-site #page-container #header .phone { letter-spacing: 0.062em; }
  body.st-site #page-container #footer .vcard span.tel { letter-spacing: 0.044em; }
}

/* ---- F-FONT (Stage 3b): one face per weight, so word and digit widths now differ a little from live's; the home Latest Blog titles are the only wrapped text that broke in another place at 1440
   (the first title took a third line). A hair of tracking on those titles gives live's line counts back without touching a glyph height (measured 0.05px; 0.08px breaks the second title) ---- */
@media (min-width: 1250px) {
  body.st-site #page-container .panel.blog li .title a { letter-spacing: -0.05px; }
}

/* Menu float tolerance (re-check finding, 20 Oct 2026): #menu floats right with 110px right margin beside the 201px logo, which leaves 859px for the menu. Barlow sets it about 853px wide in Chrome and Safari, but a renderer that rounds each word up (headless Chromium shell) gets 860 and the whole menu drops below the logo onto the booking circle. A negative left margin only shrinks the float's margin box, so where it already fits nothing moves; where text runs a few px wider it now stays on its row. */
@media (min-width: 1170px) {
  body.st-site #page-container #menu { margin-left: -24px; }
}
/* Same finding, WebKit (Safari's engine): at 1250 and up the float's fractional width (852.1px) is a hair short of its items, so Book Now wrapped onto a second row. Keep the top-level items on one row; the Contact Us drop-down keeps normal wrapping. No change in Chrome. */
@media (min-width: 1170px) {
  body.st-site #page-container #menu > ul { white-space: nowrap; }
  body.st-site #page-container #menu > ul ul { white-space: normal; }
}