/* sa-design.css - Stage 4 DESKTOP parity layer for Santa Anne by the Sea (iLaunch on Divi, template family B without a booking bar).
   Loaded after sa-bundle.css + sa-live.css + sa-extra.css and before sa-mobile.css.
   Every rule here undoes something Divi adds that live never had, or restores what live's own markup and CSS did that the
   Divi wrappers change. 1250px and up must be a pixel copy of live; nothing here recolours or resizes live's look.
   Started from a sister family B build's desktop layer; every selector re-read against this skin's markup. */

/* 1. Menu button for the phone and tablet design (added to the header fragment); never shown from 1170px up. */
body.sa-site #page-container .ils-menu-toggle { display: none; }

/* 2. Phone numbers are explicit tel: links (kit rule; live shows plain text in the header, footer and contact page, which iOS turns
      into its own link colour). They keep the surrounding text's colour, size and no underline in every state, so 1250 and up looks
      exactly like live. Class + attribute + state with !important: live's "#footer a:hover { text-decoration: underline }" (two ids
      once scoped) would otherwise underline the footer number on hover, which live's plain text never does. Live's own CALL NOW
      buttons (a.button with a tel: href, no tel-link class) keep live's button look. */
body.sa-site #page-container a.tel-link[href^="tel:"]:is(:link, :visited, :hover, :active, :focus),
body.sa-site a[x-apple-data-detectors] { color: inherit !important; text-decoration: none !important; font: inherit; letter-spacing: inherit; }

/* 3. Keyboard focus. Divi resets ":focus { outline: 0 }"; live has no such reset and shows the browser's own ring.
      Low specificity on purpose: live's own "outline: none" rules still win, as on live. Below 1250 sa-mobile.css draws an AA ring. */
body.sa-site :focus-visible { outline: revert; }

/* 4. Hero slider before it starts: slidepark sets these inline when it runs; until then the list's default margin and bullets
      would show for a frame. */
body.sa-site #page-container ul#featuremain { margin: 0; padding: 0; list-style: none; }

/* 5. The contact details table carries width="500" (a presentational hint). sa-extra.css section 3 gives tables width:auto to undo
      Divi's 100%, which also beat the attribute, so the "Santa Anne by the Sea" heading in its first cell wrapped onto two lines. */
body.sa-site :where(.et-l, #main-content) table[width="500"] { width: 500px; }

/* 5b. Anchors with no href (live's named anchors, e.g. the gallery's <a id="gallery">) took Divi's link blue; live's own a:link rules never reach
       them, so they inherit the text colour there (invisible either way, but it is the computed style). */
body.sa-site #page-container a:not([href]) { color: inherit; }

/* 5c. /news and /newsletter/unsubscribe put live's fixed 1170px .container inside the 225px-padded .content: 1395px in all, so live scrolls
       sideways from 1394px down. Here it is 1170px wide where there is room (identical from 1395 up) and takes the width that is there below
       that, so the page never scrolls sideways. Only a .content that is not .content.main (live gives those containers width:100%; a
       max-width there would centre them and move every page 8px at 1440). */
body.sa-site #page-container .content:not(.main) > .container { width: auto; max-width: 1170px; }

/* 6. Fancybox's shadow frame (8 Oct checklist, "body-appended widgets"): the port scoped live's ".fancy-bg" base rule under
      #page-container, but fancybox appends #fancybox-wrap to <body>, so the eight shadow pieces would be static and 0px tall.
      Live's rule, unscoped; the per-piece #fancy-bg-* rules (sa-bundle.css, already unscoped) still win on size and position. */
body.sa-site .fancy-bg { position: absolute; padding: 0; margin: 0; border: 0; width: 20px; height: 20px; z-index: 1001; }

/* 7. Contact, review and newsletter forms: the Divi contact-form module dressed as live's table.form (measured on live at 1440):
      th labels 13px Open Sans #444 right-aligned in 37px lines with 5/10/5/5 padding; 236 x 42px white inputs (10px 15px padding,
      1px #e5e5e5 border, 15px Open Sans #444); a 609 x 122px message box; the gold star 7px down at the right edge of each required
      cell; live's blue SUBMIT (#135fb8, hover #00bad7, 1s background transition, 104.8 x 37px); the "Required fields" note
      (11px #979797, star at its right) under it. Live's column widths come from its auto table layout and differ per form, so
      each grid is pinned per page. Live's reCAPTCHA (iLaunch's key) is replaced by Divi's maths question in live's Verification
      cell (DELIBERATE, Stage 3). The grid applies from 1250px; below that sa-mobile.css stacks the form (label over field). */
body.sa-site #page-container .sa-contact-form { margin: 15px 0 0; padding: 0; background: none; }
body.sa-site #page-container .sa-contact-form .et-pb-contact-message:empty { display: none; }
body.sa-site #page-container .sa-contact-form .et_pb_contact { padding: 0; margin: 0; }
body.sa-site #page-container .sa-contact-form form.et_pb_contact_form { margin: 0; padding: 0; }
body.sa-site #page-container .sa-contact-form p.et_pb_contact_field { margin: 0; padding: 0; width: auto; float: none; }
body.sa-site #page-container .sa-contact-form .et_pb_contact_form_label {
  display: block; position: relative; margin: 0; padding: 5px 10px 5px 5px; font: 400 13px/37px 'Open Sans', Arial, Helvetica, sans-serif;
  color: #444444; text-align: right; }
body.sa-site #page-container .sa-contact-form p.et_pb_contact_field .input,
body.sa-site #page-container .sa-contact-form input.et_pb_contact_captcha {
  display: block; box-sizing: border-box; margin: 5px 0 5px 5px; width: 236px; height: 42px; padding: 10px 15px; border: 1px solid #e5e5e5; border-radius: 0; background: #ffffff;
  font: 400 15px/normal 'Open Sans', Arial, Helvetica, sans-serif; color: #444444; box-shadow: none; }
body.sa-site #page-container .sa-contact-form p.et_pb_contact_field textarea.input { width: 609px; height: 122px; min-height: 122px; margin-bottom: 12px; resize: both; }
body.sa-site #page-container .sa-contact-form p.et_pb_contact_field .input::placeholder { color: transparent; }
body.sa-site #page-container .sa-contact-form .input.et_contact_error, body.sa-site #page-container .sa-contact-form .et_pb_contact_captcha.et_contact_error { border-color: #e02b20; }
body.sa-site #page-container .sa-contact-form .et_contact_bottom_container { float: none; margin: 0; padding: 0; }
body.sa-site #page-container .sa-contact-form .et_pb_contact_right { float: none; margin: 0; padding: 0; }
body.sa-site #page-container .sa-contact-form .et_pb_contact_right p.clearfix { margin: 5px 0 0 5px; padding: 0; font: 400 13px/37px 'Open Sans', Arial, Helvetica, sans-serif; color: #444444; float: none; display: flex; gap: 6px; align-items: flex-start; }
body.sa-site #page-container .sa-contact-form .et_pb_contact_captcha_question { font: inherit; color: inherit; }
body.sa-site #page-container .sa-contact-form input.et_pb_contact_captcha { width: 64px; margin: 0; display: inline-block; }
body.sa-site #page-container .et_pb_section .sa-contact-form.et_pb_contact_form_container.et_pb_module .et_pb_button {
  display: inline-block; float: none; width: auto; height: 37px; margin: 5px 20px 0 5px; padding: 0 25px !important; border: 0 !important; border-radius: 0 !important;
  background: #135fb8 !important; color: #ffffff !important; font: 400 15px/37px 'Open Sans', Arial, Helvetica, sans-serif !important;
  letter-spacing: normal !important; text-transform: uppercase; cursor: pointer; transition: background 1s, color 1s; }
body.sa-site #page-container .et_pb_section .sa-contact-form.et_pb_contact_form_container.et_pb_module .et_pb_button:hover { background: #00bad7 !important; padding: 0 25px !important; }
body.sa-site #page-container .et_pb_section .sa-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 in the last row. */
body.sa-site #page-container p.ils-required-note { margin: 0 20px 15px 5px; padding: 0 0 5px; text-align: right; }   /* live: 5px cell padding under the note, then the table's 15px margin */
body.sa-site #page-container .content p.ils-required-note em.required { display: block; text-align: right; padding: 0 20px 0 0; font: normal 400 11px/22px 'Open Sans', Arial, Helvetica, sans-serif;
  color: #979797; background: url(/wp-content/uploads/ilaunch/skin/images/icon-required.png) no-repeat right center; }
/*    After a successful submit Divi replaces the form with its thank-you line; the note then has nothing to annotate. */
body.sa-site #page-container .sa-contact-form:not(:has(form)) + p.ils-required-note { display: none; }

@media (min-width: 1250px) {
  /* /contact (page 1303): Name, Email, Contact Phone / Message, Verification / Submit. Live's auto table layout at 1440 gives the columns
     108.656 / 261 / 114.594 / 261 / 110.734 / 329.016 (the last one held at 329 by the reCAPTCHA box). The grid reproduces them exactly at
     1440: the input columns take their space first (up to 261 / 261 / 329px), the label columns share what is left in live's proportions
     (fr) and never go below their longest word. Narrower than 1440, live's table cannot shrink below about 1110px and the page scrolls
     sideways (89px at 1250); here the labels wrap and the last column gives way first, so nothing leaves the screen. */
  body.sa-site #page-container .sa-contact-form form.et_pb_contact_form { display: grid; column-gap: 0; row-gap: 0;
    grid-template-columns: minmax(min-content, 108.65625fr) minmax(0, 261px) minmax(min-content, 114.59375fr) minmax(0, 261px) minmax(86px, 110.734375fr) minmax(0, 329.015625px); }
  /* /reviews (page 1302): Name, Location, Email / Comments (required), Verification (live 109.547 / 261 / 114.516 / 261 / 109.922 / 329.016) */
  body.sa-site.page-id-1302 #page-container .sa-contact-form form.et_pb_contact_form {
    grid-template-columns: minmax(min-content, 109.546875fr) minmax(0, 261px) minmax(min-content, 114.515625fr) minmax(0, 261px) minmax(86px, 109.921875fr) minmax(0, 329.015625px); }
  body.sa-site #page-container .sa-contact-form p.et_pb_contact_field,
  body.sa-site #page-container .sa-contact-form .et_contact_bottom_container,
  body.sa-site #page-container .sa-contact-form .et_pb_contact_right { display: contents; }
  body.sa-site #page-container .sa-contact-form .et_pb_contact_field_0 > label { grid-area: 1 / 1; }
  body.sa-site #page-container .sa-contact-form .et_pb_contact_field_0 > .input, body.sa-site #page-container .sa-contact-form .et_pb_contact_field_0::after { grid-area: 1 / 2; }
  body.sa-site #page-container .sa-contact-form .et_pb_contact_field_1 > label { grid-area: 1 / 3; }
  body.sa-site #page-container .sa-contact-form .et_pb_contact_field_1 > .input, body.sa-site #page-container .sa-contact-form .et_pb_contact_field_1::after { grid-area: 1 / 4; }
  body.sa-site #page-container .sa-contact-form .et_pb_contact_field_2 > label { grid-area: 1 / 5; }
  body.sa-site #page-container .sa-contact-form .et_pb_contact_field_2 > .input, body.sa-site #page-container .sa-contact-form .et_pb_contact_field_2::after { grid-area: 1 / 6; }
  body.sa-site #page-container .sa-contact-form .et_pb_contact_field_3 > label { grid-area: 2 / 1; }
  body.sa-site #page-container .sa-contact-form .et_pb_contact_field_3 > .input, body.sa-site #page-container .sa-contact-form .et_pb_contact_field_3::after { grid-area: 2 / 2 / 3 / 5; }
  body.sa-site #page-container .sa-contact-form p.et_pb_contact_field textarea.input { width: min(609px, calc(100% - 25px)); }
  body.sa-site #page-container .sa-contact-form p.et_pb_contact_field .input:not(textarea) { width: min(236px, calc(100% - 25px)); }
  /* the gold star: live draws it as the required cell's background at "right 7px"; here the field's own ::after sits in the same grid cell */
  body.sa-site #page-container .sa-contact-form p.et_pb_contact_field:has(> [data-required_mark="required"])::after {
    content: ""; display: block; justify-self: end; align-self: start; width: 16px; height: 16px; margin: 7px 0 0; padding: 0;
    background: url(/wp-content/uploads/ilaunch/skin/images/icon-required.png) no-repeat; pointer-events: none; }
  body.sa-site #page-container .sa-contact-form .et_pb_contact_right p.clearfix { grid-area: 2 / 6; position: relative; }
  body.sa-site #page-container .sa-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 13px/37px 'Open Sans', Arial, Helvetica, sans-serif; color: #444444; text-align: right; display: block; visibility: visible; height: auto; margin-right: 5px; white-space: nowrap; }
  body.sa-site #page-container .et_pb_section .sa-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 (page 1314): one field and the button in live's default 2px cell spacing, no captcha, no note
     (measured on live: label cell 115px, field cell 261px, table 382 x 105px; the button sits under the field). */
  body.sa-site.page-id-1314 #page-container .sa-contact-form form.et_pb_contact_form { grid-template-columns: 115px 261px; column-gap: 2px; row-gap: 2px; padding: 2px; width: max-content; }
  body.sa-site.page-id-1314 #page-container .et_pb_section .sa-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; }
  body.sa-site.page-id-1314 #page-container .sa-contact-form { margin-bottom: 15px; }   /* live's table.form margin 15px 0; this form has no note row after it */
}

/* 7b. From 1451px live's form table has room for its natural width (1196px: every label cell at its declared 115px, the input cells at
       261 / 261 / 329px) and stops growing; the fr columns above would keep growing. Pinned to live's widths there (measured at 1452,
       1600 and 1920: identical). */
@media (min-width: 1451px) {
  body.sa-site #page-container .sa-contact-form form.et_pb_contact_form,
  body.sa-site.page-id-1302 #page-container .sa-contact-form form.et_pb_contact_form { grid-template-columns: 115px 261px 115px 261px 115px 329.015625px; }
  body.sa-site #page-container p.ils-required-note { max-width: 1171px; }   /* live's note sits in the table's last row: 1196 less the cell's 5 + 20px padding */
}

/* ======================= home: TripAdvisor Certificate of Excellence badges ======================= */
/* live prints them as the last line of the 325px scrolling welcome box, so they are hidden until the box is scrolled. They now sit
   outside that box (.sa-awards, straight after .container.main) and show on the hero photo beside the welcome box, above the fold. */
body.sa-site.sa-home #page-container .sa-awards { display: flex; gap: 8px; }
body.sa-site.sa-home #page-container .sa-awards img { display: block; }
@media (min-width: 1170px) {
  /* 1170 to 1249: the welcome text is in the flow under the 800px hero, and its 800px top margin pushes this box's containing block down
     to the hero's bottom edge, so the badges are lifted back up onto the hero (800 - 340 = 460px, clear of the Free Wi-Fi badge) */
  body.sa-site.sa-home #page-container .sa-awards { position: absolute; top: -340px; right: 24px; z-index: 3; }
}
@media (min-width: 1250px) {
  body.sa-site.sa-home #page-container .sa-awards { top: 380px; right: 419px; }   /* welcome box is 395px wide at right:0; 24px clear of it */
}
@media (max-width: 1169px) {
  body.sa-site.sa-home #page-container .sa-awards { background: #ffffff; padding: 0 24px 32px; gap: 12px; }
  body.sa-site.sa-home #page-container .sa-awards img { max-width: calc(50% - 6px); width: 152px !important; height: auto !important; }
}
@media (max-width: 359px) {
  body.sa-site.sa-home #page-container .sa-awards { padding: 0 16px 24px; }
}

/* Search page, desktop: the search box was a 300px field centred under the intro; it now runs left-aligned with the heading and intro, and is wide and tall enough to read as the page's main control. Phone and tablet keep the sa-mobile.css layout. */
@media (min-width: 1170px) {
  body.sa-site #page-container table.form.searchpage { margin: 0; width: 100%; max-width: 820px; }
  body.sa-site #page-container table.form.searchpage tbody, body.sa-site #page-container table.form.searchpage tr { display: block; width: auto; }
  body.sa-site #page-container table.form.searchpage td { display: flex; gap: 10px; width: auto; padding: 5px 0; text-align: left; }
  body.sa-site #page-container .form.searchpage input { float: none; margin: 0; }
  body.sa-site #page-container .form.searchpage input.clicknclear { flex: 1 1 auto; min-width: 0; width: auto; height: 48px; box-sizing: border-box; border: 1px solid #767676; padding: 0 14px; font-size: 16px; }
  body.sa-site #page-container .form.searchpage input.button { flex: 0 0 auto; height: 48px; line-height: 48px; padding: 0 28px; }
}