/* st-design.css - Surfers Tradewinds Stage 4 desktop layer (every width; at 1250 and up it makes the pages a pixel copy of live).
   Loads after st-base.css and before st-mobile.css. Measured on live at 1440. */

/* 1. phone menu button and the "call" shortcut exist only below 1170 (st-mobile.css shows them) */
body.st-site #page-container .ils-menu-toggle { display: none; }

/* 2. home: the family photo is live's 1397x1500 image at height 100% and width auto, clipped by its box; Divi's img { max-width:100%; height:auto } shrank it to fit */
body.st-site.st-home #page-container .container .left img { max-width: none; height: 100%; width: auto; }

/* 3. nested lists on the site map: live prints disc, circle, square by depth; the port printed circle at depth 3 */
body.st-site :where(.et-l, #main-content) ul ul ul { list-style-type: square; }

/* 4. contact (page 1312) and review (page 1315) forms: Divi's contact module dressed as live's 6-column table.form.
   Live: th 100/114/105 (right-aligned 15px/37px #444, padding 5 10 5 5), td 261/261/329, 204px inputs (+8 15 padding, 1px #e1e1e1 = 236x33),
   609 x 93 message box, gold required star at the right edge of the cell, button 122 x 37 right aligned, "Required fields" line below.
   The verification cell shows Divi's maths question (live: reCAPTCHA): a DELIBERATE difference. */
body.st-site #page-container .st-contact-form { width: 1170px; max-width: 100%; margin: 15px 0 0 0; padding: 0; }
body.st-site #page-container .st-contact-form .et-pb-contact-message:empty { display: none; }
body.st-site #page-container .st-contact-form .et_pb_contact { padding: 0; margin: 0; }
body.st-site #page-container .st-contact-form form.et_pb_contact_form { display: grid; grid-template-columns: 100px 261px 114px 261px 105px 329px; margin: 0; padding: 0; }
body.st-site.page-id-1315 #page-container .st-contact-form form.et_pb_contact_form { grid-template-columns: 102px 261px 114px 261px 103px 329px; }
body.st-site #page-container .st-contact-form p.et_pb_contact_field,
body.st-site #page-container .st-contact-form .et_contact_bottom_container,
body.st-site #page-container .st-contact-form .et_pb_contact_right { display: contents; }
body.st-site #page-container .st-contact-form .et_pb_contact_form_label {
  display: block; position: relative; margin: 0; padding: 5px 10px 5px 5px; font: 400 15px/37px Arial, Helvetica, sans-serif; color: #444444; text-align: right; }
body.st-site #page-container .st-contact-form p.et_pb_contact_field .input {
  display: block; box-sizing: content-box; width: 204px; max-width: none; height: auto; margin: 5px 20px 5px 5px; padding: 8px 15px; border: 1px solid #e1e1e1; border-radius: 0;
  background: #ffffff; font: 400 13px/normal Arial, Helvetica, sans-serif; color: #666666; box-shadow: none; align-self: start; }
body.st-site #page-container .st-contact-form p.et_pb_contact_field textarea.input { grid-column: 2 / 5; box-sizing: border-box; width: 609px; height: 93px; min-height: 0; margin: 5px 0 12px 5px; resize: both; }
body.st-site #page-container .st-contact-form p.et_pb_contact_field .input::placeholder { color: transparent; }
body.st-site #page-container .st-contact-form .input.et_contact_error { border-color: #e02b20; }
/* required star: live paints icon-required.png at the right edge of the cell, 7px from its top */
body.st-site #page-container .st-contact-form p.et_pb_contact_field:has(> [data-required_mark="required"]) > .et_pb_contact_form_label::after {
  content: ""; position: absolute; left: calc(100% + 245px); top: 7px; width: 16px; height: 16px; background: url(/wp-content/uploads/ilaunch/skin/images/icon-required.png) no-repeat 0 0; }
body.st-site #page-container .st-contact-form p.et_pb_contact_field.et_pb_contact_field_3 > .et_pb_contact_form_label::after { left: calc(100% + 620px); }
/* verification cell: label in column 5, the question and its box in column 6 */
body.st-site #page-container .st-contact-form .et_pb_contact_right p.clearfix {
  grid-column: 5 / 7; display: flex; align-items: flex-start; float: none; margin: 0; padding: 5px 20px 5px 0; min-height: 0; font: 400 15px/33px Arial, Helvetica, sans-serif; color: #444444; text-align: left; }
body.st-site #page-container .st-contact-form .et_pb_contact_right p.clearfix::before { content: "Verification"; flex: 0 0 105px; box-sizing: border-box; padding: 5px 10px 5px 5px; margin-top: 0; font: 400 15px/37px Arial, Helvetica, sans-serif; text-align: right; }
body.st-site #page-container .st-contact-form .et_pb_contact_captcha_question { font: inherit; color: inherit; padding: 0 5px; line-height: 43px; }
body.st-site #page-container .st-contact-form input.et_pb_contact_captcha {
  display: inline-block; box-sizing: content-box; width: 20px; max-width: none; height: auto; margin: 5px 0 0 6px; padding: 8px 15px; border: 1px solid #e1e1e1; border-radius: 0; background: #ffffff;
  font: 400 13px/normal Arial, Helvetica, sans-serif; color: #666666; box-shadow: none; }
body.st-site #page-container .st-contact-form input.et_pb_contact_captcha.et_contact_error { border-color: #e02b20; }
/* submit: live input.button (gradient, 15px bold uppercase, letter-spacing 1px, 37px line) right aligned in a full-width row */
body.st-site #page-container .et_pb_section .st-contact-form.et_pb_contact_form_container.et_pb_module .et_pb_button {
  grid-column: 1 / -1; justify-self: end; display: inline-block; box-sizing: content-box; width: auto; height: 37px; margin: 5px 20px 5px 0 !important; padding: 0 29px !important; border: 0 !important; border-radius: 0 !important;
  background: linear-gradient(to bottom, #ea9900 0%, #f5c800 100%) !important; color: #ffffff !important; font: 700 15px/37px Arial, Helvetica, sans-serif !important; letter-spacing: 1px; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: all 1s; }
body.st-site #page-container .et_pb_section .st-contact-form.et_pb_contact_form_container.et_pb_module .et_pb_button:hover { background: #041998 !important; color: #ffffff !important; padding: 0 29px !important; }
body.st-site #page-container .et_pb_section .st-contact-form.et_pb_contact_form_container.et_pb_module .et_pb_button::after { display: none !important; }
/* "Required fields": its own 22px line under the button, right aligned, star after it */
body.st-site #page-container .content p.ils-required-note { height: 22px; margin: 0 20px 0 5px; padding: 0; text-align: right; line-height: 22px; background: none; }
body.st-site #page-container .content p.ils-required-note em.required { display: block; padding-right: 20px; background: url(/wp-content/uploads/ilaunch/skin/images/icon-required.png) right 3px no-repeat; font-size: 11px; font-style: normal; line-height: 22px; color: #444444; }
body.st-site #page-container .st-contact-form:not(:has(form)) + p.ils-required-note { display: none; }

/* 5. keyboard focus: Divi's reset removes the ring; give every control one (live shows the browser's own) */
body.st-site #page-container :is(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid #041998; outline-offset: 2px; }
body.st-site #page-container #footer :is(a):focus-visible { outline-color: #ffffff; }
/* drop-down menus also open on keyboard focus */
body.st-site #page-container #menu li:focus-within > ul { display: block; }
/* touch screens, 1170 and up: the first tap on a parent menu link opens its drop-down (st-design.php) */
body.st-site #page-container #menu li.ils-dd-open > ul { display: block; }
/* live's buttons carry "transition: all 1s": the focus ring would fade in over a second; it must be there at once */
body.st-site #page-container :is(a.button, input.button, .et_pb_button, button):focus-visible { transition: background-color 1s, background 1s, color 1s, outline 0s !important; }
/* gallery and blog thumbnails: the link is an empty box around a floated image, so the ring is drawn on the image it holds (white inner edge, blue band under it) */
body.st-site #page-container a:focus-visible:has(> img) { outline: none; }
body.st-site #page-container a:focus-visible > img { outline: 3px solid #ffffff; outline-offset: -3px; box-shadow: inset 0 0 0 7px #041998; }
/* rooms: live's play-button link is stretched over the WHOLE room block (photo and the text column), so on desktop it sits on top of the room text and its CALL NOW button and a click there opens the video
   (found by overlap_check at 1170 to 1249). The link now covers the left half only, where the photo shows and the play button is (the text column starts at 50%): same look, and the text and CALL NOW are clickable. */
body.st-site #page-container .list.rooms .entry .photo-topping a.overlay-youtube { right: 50%; }
/* the contact page's phone number is a tel: link here (live prints it as plain text): its hover must stay readable at every width (live's amber link hover is 2.2:1 on white) */
body.st-site #page-container #main-content a.tel-link:is(:hover, :focus, :active) { color: #041998; text-decoration: underline; }
/* newsletter unsubscribe (page 1325): live's table is two rows of 47px (th 115 / td 261, cellspacing 2): Email and its field, then the UNSUBSCRIBE button under the field. The Divi maths question
   sits in the free space beside the Email field (live has reCAPTCHA-free form: a DELIBERATE difference), so the page keeps live's height. From 1170; below it the stacked form above applies. */
@media (min-width: 1170px) {
  body.st-site.page-id-1325 #page-container .st-contact-form form.et_pb_contact_form { grid-template-columns: 115px 261px minmax(0, 1fr); column-gap: 2px; row-gap: 2px; padding: 2px; width: 382px; }
  body.st-site.page-id-1325 #page-container .st-contact-form { width: 1170px; }
  body.st-site.page-id-1325 #page-container .st-contact-form form.et_pb_contact_form { width: auto; }
  body.st-site.page-id-1325 #page-container .st-contact-form .et_pb_contact_form_label { padding: 5px 10px 5px 5px; line-height: 37px; text-align: right; }
  body.st-site.page-id-1325 #page-container .st-contact-form .et_pb_contact_right p.clearfix { grid-column: 3 / 4; padding: 0 0 0 20px; }
  body.st-site.page-id-1325 #page-container .et_pb_section .st-contact-form.et_pb_contact_form_container.et_pb_module .et_pb_button { grid-column: 2 / 3; justify-self: start; margin: 5px 0 5px 5px !important; }
}

/* contact (1312) and review (1315) forms, from 600 (Clarissa feedback 21 Oct, third round): every field is its own flex ROW (label column 130px right aligned, box beside it, top aligned), so no
   row depends on grid auto-placement or on display:contents (a browser that places the labels and boxes differently shifted every row after Name). Order is the DOM order (contact: Name, Email,
   Contact Phone, Message, Verification; review: Name, Location, Email, Comments, Verification). Boxes are 609px wide on desktop and shrink together on a tablet; SUBMIT and "Required fields"
   end on the right edge of the boxes. Below 600 the stacked phone layout (st-mobile.css) applies. A DELIBERATE difference from live's six-column table. */
@media (min-width: 600px) {
  html body.st-site:is(.page-id-1312, .page-id-1315) #page-container .st-contact-form { width: auto; max-width: 100%; }
  html body.st-site:is(.page-id-1312, .page-id-1315) #page-container .st-contact-form form.et_pb_contact_form { display: block; width: 744px; max-width: calc(100% - 24px); margin: 0; padding: 0; }
  html body.st-site:is(.page-id-1312, .page-id-1315) #page-container .st-contact-form p.et_pb_contact_field { display: flex; align-items: flex-start; position: relative; float: none; width: auto; margin: 0; padding: 0; }
  html body.st-site:is(.page-id-1312, .page-id-1315) #page-container .st-contact-form p.et_pb_contact_field > .et_pb_contact_form_label { flex: 0 0 130px; box-sizing: border-box; width: 130px; white-space: nowrap; text-align: right; padding: 5px 10px 5px 5px; font: 400 15px/37px Arial, Helvetica, sans-serif; }
  html body.st-site:is(.page-id-1312, .page-id-1315) #page-container .st-contact-form p.et_pb_contact_field:has(> [data-required_mark="required"]) > .et_pb_contact_form_label::after { content: none; }
  html body.st-site:is(.page-id-1312, .page-id-1315) #page-container .st-contact-form p.et_pb_contact_field:has(> [data-required_mark="required"])::after { content: ""; position: absolute; left: 100%; top: 12px; margin-left: 6px; width: 16px; height: 16px; background: url(/wp-content/uploads/ilaunch/skin/images/icon-required.png) no-repeat 0 0; }
  html body.st-site:is(.page-id-1312, .page-id-1315) #page-container .st-contact-form p.et_pb_contact_field .input { flex: 1 1 0; min-width: 0; box-sizing: border-box; width: auto; height: 37px; margin: 5px 0 5px 5px; padding: 0 15px; line-height: 35px; }
  html body.st-site:is(.page-id-1312, .page-id-1315) #page-container .st-contact-form p.et_pb_contact_field textarea.input { height: 93px; padding: 8px 15px; line-height: normal; }
  html body.st-site:is(.page-id-1312, .page-id-1315) #page-container .st-contact-form .et_contact_bottom_container { display: flex; flex-direction: column; align-items: stretch; float: none; width: 100%; margin: 0; padding: 0; }
  html body.st-site:is(.page-id-1312, .page-id-1315) #page-container .st-contact-form .et_pb_contact_right { display: block; float: none; width: 100%; margin: 0; padding: 0; }
  html body.st-site:is(.page-id-1312, .page-id-1315) #page-container .st-contact-form .et_pb_contact_right p.clearfix { display: flex; flex-wrap: nowrap; align-items: flex-start; margin: 0; padding: 5px 0; font: 400 15px/33px Arial, Helvetica, sans-serif; }
  html body.st-site:is(.page-id-1312, .page-id-1315) #page-container .st-contact-form .et_pb_contact_right p.clearfix::before { flex: 0 0 130px; width: 130px; box-sizing: border-box; padding: 5px 10px 5px 5px; text-align: right; font: 400 15px/37px Arial, Helvetica, sans-serif; }
  html body.st-site:is(.page-id-1312, .page-id-1315) #page-container .st-contact-form .et_pb_contact_captcha_question { padding: 0 5px; line-height: 43px; }
  html body.st-site:is(.page-id-1312, .page-id-1315) #page-container .st-contact-form input.et_pb_contact_captcha { flex: 0 0 66px; box-sizing: border-box; width: 66px; height: 37px; margin: 5px 0 0 6px; padding: 0 15px; line-height: 35px; }
  html body.st-site:is(.page-id-1312, .page-id-1315) #page-container .et_pb_section .st-contact-form.et_pb_contact_form_container.et_pb_module .et_pb_button { align-self: flex-end; justify-self: auto; box-sizing: content-box; width: auto; height: 37px; margin: 5px 0 5px 0 !important; padding: 0 29px !important; font-size: 15px !important; line-height: 37px !important; }
  html body.st-site:is(.page-id-1312, .page-id-1315) #page-container .content p.ils-required-note { box-sizing: border-box; width: min(614px, calc(100% - 154px)); margin: 0 0 0 130px; padding: 0; text-align: right; height: 22px; }
  html body.st-site:is(.page-id-1312, .page-id-1315) #page-container .content p.ils-required-note em.required { padding-right: 20px; padding-left: 0; background-position: right 3px; font-size: 11px; line-height: 22px; }
}

/* blog post sidebar beside the article (Clarissa feedback 21 Oct): it keeps the blue headings and #444 text it had in live's block below the article */
body.st-site #page-container .container.st-post > .right :is(h2, h3, h4) { color: #041998; }
body.st-site #page-container .container.st-post > .right :is(p, th, td) { color: #444444; }