/* tt-design.css: Stage 4 design match (desktop = live, 768px and up) for the Tropic Towers iLaunch migration.
   Loaded after tt-live.css and before tt-mobile.css (ilaunch-site-config.php 'css'). Source: Coworker folder/Tropic Towers/iLaunch migration/build/. */

/* 1. Live iLaunch CSS assumes the browser default content-box; Divi sets * {box-sizing:border-box}, which shrank every padded
      box (header band 125 -> 91px, booking date field, special-offer text, footer container 195 -> 155px). Divi's own
      contact-form module keeps border-box. */
body.tt-site #page-container, body.tt-site #page-container *, body.tt-site #page-container *::before, body.tt-site #page-container *::after { box-sizing: content-box; }
body.tt-site #page-container .et_pb_contact_form_container, body.tt-site #page-container .et_pb_contact_form_container * { box-sizing: border-box; }

/* 2. Footer: with content-box restored the fixed-height .container (155px + 40px padding) gives live's 195px block and
      live's gap under the copyright, so the build-stage padding-bottom on #footer is no longer needed (live: 0). */
body.tt-site #page-container #footer { padding-bottom: 0; }

/* 3. Browser-default spacing the live CSS relies on, which Divi's reset removes. No ids in these selectors, so every
      live rule (body.tt-site #page-container ...) still wins where live sets its own value. */
body.tt-site :where(.et-l, #main-content) p { padding-bottom: 0; margin-bottom: 1em; }
body.tt-site :where(.et-l, #main-content) ul, body.tt-site :where(.et-l, #main-content) ol { padding: 0 0 0 40px; margin: 1em 0; line-height: inherit; }

/* 4. Divi pads "#main-content .container" 58px at the top (meant for its own header); live's .container has no such padding.
      Hidden while Divi's border-box absorbed it into the fixed 340px #topcontainer; content-box exposed it. */
body.tt-site.tt-site #main-content .container { padding-top: 0; }

/* 5. Live renders a ".socialwidgets" block (Google +1 and Facebook Like, both dead services that now draw nothing) at the
      end of most pages: 36px tall (10px padding + 25px widget + 1px #eee top rule), 15px margins. Not ported as markup;
      reproduced here as an empty block so spacing and the faint rule match. Absent on live /faq, /search and /site-map. Phones skip it (it only adds a gap there). */
@media (min-width: 768px) {
body.tt-site #page-container .socialwidgets-spacer,
body.tt-site.page:not(.page-id-1414):not(.page-id-1422):not(.page-id-1423):not(.page-id-1412):not(.tt-home) #page-container #content .innercontent .inner-wrapper::after,
body.tt-site.tt-home #page-container #content .text-wrapper::after,
body.tt-site.single #page-container #content .entry > .summary::after,
body.tt-site.blog #page-container #content .container > .left::after, body.tt-site.page-id-1412 #page-container #content .container > .left::after,
body.tt-site.archive #page-container #content .container > .left::after {
  content: ""; display: block; height: 25px; margin: 15px 0; padding-top: 10px; border-top: 1px solid #eeeeee; clear: none; }
}

/* 6. Form controls the browser sizes as border-box by default (select, buttons, submit inputs): keep that after rule 1,
      or the booking bar's Duration select and Check Availability button grow by their padding (240 -> 253, 280 -> 310px). */
body.tt-site #page-container select, body.tt-site #page-container button,
body.tt-site #page-container input[type=submit], body.tt-site #page-container input[type=button], body.tt-site #page-container input[type=reset] { box-sizing: border-box; }

/* 7. Divi's content-table look (1px #eee borders, 6px 24px cell padding, width 100%, left align) is not on live. Back to the
      browser defaults, honouring the table's own width="100%" and cellpadding="0" attributes as live does. */
body.tt-site :where(.et-l, #main-content) table:not(.variations) { border: 0; margin: 0; width: auto; text-align: start; }
body.tt-site :where(.et-l, #main-content) table[width="100%"]:not(.variations) { width: 100%; }
body.tt-site :where(.et-l, #main-content) tr td, body.tt-site :where(.et-l, #main-content) tr th { border-top: 0; padding: 1px; }
body.tt-site :where(.et-l, #main-content) table[cellpadding="0"] tr td, body.tt-site :where(.et-l, #main-content) table[cellpadding="0"] tr th { padding: 0; }

/* 8. Divi draws a 5px coloured rule down the left of every blockquote; live has none (reviews). */
body.tt-site :where(.et-l, #main-content) blockquote { border-left: 0; }

/* 9. Contact and review forms: Divi contact-form module dressed as live's boxed table form (table.form): #ebe8e1 panel 1184px
      wide centred (20px 93px margins), 10px row spacing, #f7f4ee 120px label cells (bold 15px #333, 40px line, gold star on
      required fields), white 210 x 40px inputs (11px 15px padding), 570 x 112px message box, a "Verification" cell holding
      Divi's maths captcha (live's reCAPTCHA key is iLaunch's), yellow 220 x 43px SUBMIT, "Required fields" note.
      Field order is the same on both forms: three one-line fields, then the message/comments box.
      Desktop grid from 1250px; the narrower layouts are in tt-mobile.css. */
body.tt-site #page-container .tt-contact-form { margin: 20px auto; padding: 0; background: none; }
body.tt-site #page-container .tt-contact-form .et_pb_contact { padding: 0; }
body.tt-site #page-container .tt-contact-form form.et_pb_contact_form { margin: 0; padding: 10px; background: #ebe8e1; }
body.tt-site #page-container .tt-contact-form p.et_pb_contact_field { margin: 0; padding: 0; width: auto; float: none; }
body.tt-site #page-container .tt-contact-form .et_pb_contact_form_label {
  display: block; margin: 0; padding: 0 10px; background: #f7f4ee; font: 700 15px/40px 'Lato', Arial, Helvetica, sans-serif; color: #333333; text-align: left; }
body.tt-site #page-container .tt-contact-form p.et_pb_contact_field:has(> [data-required_mark="required"]) > .et_pb_contact_form_label {
  background: #f7f4ee url(/wp-content/uploads/ilaunch/skin/icon-required.png) no-repeat right 7px; }
body.tt-site #page-container .tt-contact-form .et_pb_contact_field input.input,
body.tt-site #page-container .tt-contact-form .et_pb_contact_field textarea.input {
  display: block; margin: 0; border: 0; border-radius: 0; background: #ffffff; padding: 11px 15px; height: 40px; width: 100%;
  font: 400 15px/18px 'Lato', Arial, Helvetica, sans-serif; color: #666666; box-shadow: none; }
body.tt-site #page-container .tt-contact-form .et_pb_contact_field textarea.input { height: 112px; min-height: 112px; resize: both; }
body.tt-site #page-container .tt-contact-form .et_pb_contact_field .input::placeholder { color: transparent; }
body.tt-site #page-container .tt-contact-form .et_contact_bottom_container { float: none; margin: 0; text-align: left; }
body.tt-site #page-container .tt-contact-form .et_pb_contact_right { float: none; text-align: left; }
body.tt-site #page-container .tt-contact-form .et_pb_contact_right p.clearfix {
  position: relative; margin: 0; padding: 0 0 0 130px; min-height: 40px; font: 400 15px/40px 'Lato', Arial, Helvetica, sans-serif; color: #444444; text-align: left; float: none; }
body.tt-site #page-container .tt-contact-form .et_pb_contact_right p.clearfix::before {
  content: "Verification"; position: absolute; left: 0; top: 0; bottom: 0; width: 120px; padding: 0 10px; background: #f7f4ee;
  font-weight: 700; color: #333333; box-sizing: border-box; visibility: visible; display: block; height: auto; }
body.tt-site #page-container .tt-contact-form .et_pb_contact_right p.clearfix::after { display: none; }
body.tt-site #page-container .tt-contact-form .et_pb_contact_captcha_question { font: 400 15px/40px 'Lato', Arial, Helvetica, sans-serif; color: #444444; }
body.tt-site #page-container .tt-contact-form input.et_pb_contact_captcha {
  display: inline-block; width: 70px; height: 40px; margin: 0 0 0 10px; padding: 11px 15px; border: 0; border-radius: 0; background: #ffffff;
  font: 400 15px/18px 'Lato', Arial, Helvetica, sans-serif; color: #666666; vertical-align: top; }
body.tt-site #page-container .tt-contact-form .et_pb_contact_submit.et_pb_button,
body #page-container .et_pb_section .tt-contact-form.et_pb_contact_form_container.et_pb_module .et_pb_button {
  display: block; width: 220px; height: 43px; margin: 0; padding: 0 15px !important; border: 0 !important; border-radius: 0 !important;
  background: #edbb0d !important; color: #ffffff !important; font: 700 18px/43px 'Raleway', Arial, Helvetica, sans-serif !important;
  text-transform: uppercase; letter-spacing: 0 !important; cursor: pointer; transition: all 1s; }
body #page-container .et_pb_section .tt-contact-form.et_pb_contact_form_container.et_pb_module .et_pb_button:hover { background: #0a3200 !important; padding: 0 15px !important; }
body #page-container .et_pb_section .tt-contact-form.et_pb_contact_form_container.et_pb_module .et_pb_button::after { display: none !important; }
body.tt-site #page-container .tt-contact-form form.et_pb_contact_form::after {
  content: "Required fields"; display: block; visibility: visible; height: auto; clear: none; font: 400 11px/22px 'Lato', Arial, Helvetica, sans-serif;
  color: #444444; padding-right: 20px; background: url(/wp-content/uploads/ilaunch/skin/icon-required.png) no-repeat right center; }

@media (min-width: 1250px) {
  body.tt-site #page-container .tt-contact-form { width: 1184px; }
  body.tt-site #page-container .tt-contact-form form.et_pb_contact_form {
    display: grid; grid-template-columns: 120px 210px 30px 120px 210px 30px 120px 1fr; grid-template-rows: 40px 112px 43px auto;
    row-gap: 10px; column-gap: 0; }
  body.tt-site #page-container .tt-contact-form p.et_pb_contact_field,
  body.tt-site #page-container .tt-contact-form .et_contact_bottom_container,
  body.tt-site #page-container .tt-contact-form .et_pb_contact_right,
  body.tt-site #page-container .tt-contact-form .et_pb_contact { display: contents; }
  body.tt-site #page-container .tt-contact-form .et_pb_contact_field_0 > label { grid-area: 1 / 1; }
  body.tt-site #page-container .tt-contact-form .et_pb_contact_field_0 > .input { grid-area: 1 / 2; }
  body.tt-site #page-container .tt-contact-form .et_pb_contact_field_1 > label { grid-area: 1 / 4; }
  body.tt-site #page-container .tt-contact-form .et_pb_contact_field_1 > .input { grid-area: 1 / 5; }
  body.tt-site #page-container .tt-contact-form .et_pb_contact_field_2 > label { grid-area: 1 / 7; }
  body.tt-site #page-container .tt-contact-form .et_pb_contact_field.et_pb_contact_field_2 > input.input { grid-area: 1 / 8; width: 210px; }
  body.tt-site #page-container .tt-contact-form .et_pb_contact_field_3 > label { grid-area: 2 / 1; }
  body.tt-site #page-container .tt-contact-form .et_pb_contact_field.et_pb_contact_field_3 > textarea.input { grid-area: 2 / 2 / 3 / 6; width: 570px; }
  body.tt-site #page-container .tt-contact-form .et_pb_contact_right p.clearfix { grid-area: 2 / 7 / 3 / 9; }
  body #page-container .et_pb_section .tt-contact-form.et_pb_contact_form_container.et_pb_module .et_pb_contact_submit { grid-area: 3 / 1 / 4 / 9; justify-self: end; margin: 0 20px 0 0 !important; }
  body.tt-site #page-container .tt-contact-form form.et_pb_contact_form::after { grid-area: 4 / 1 / 5 / 9; justify-self: end; margin: -7px 20px 0 0; }
}
/* nested lists: browser default has no vertical margin (site map) */
body.tt-site :where(.et-l, #main-content) :is(ul, ol) :is(ul, ol) { margin-top: 0; margin-bottom: 0; }

/* 10. Divi forces greyscale font smoothing on body; live uses the browser default (slightly heavier text on macOS). */
body.tt-site { -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; }

/* 11. Divi's right-sidebar layout draws a 1px grey vertical rule (#main-content .container::before) on blog views; not on live. */
body.tt-site #main-content .container::before { display: none; }

/* 12. Phone menu button (added to the header fragment for the mobile design; never shown at desktop widths). */
body.tt-site #page-container .ils-menu-toggle { display: none; }

/* 13. Booking calendar: the date picker is appended to <body>, outside #page-container, so live's calendar theme (scoped
       there by the CSS port) never reached it and it showed the plugin's default blue/grey look; Divi's border-box also
       shifted it 1-2px. Live's rules, scoped to the body. */
body.tt-site #datepicker_div, body.tt-site #datepicker_div * { box-sizing: content-box; }
body.tt-site #datepicker_div { border: 0; }
body.tt-site #datepicker_div td { font-family: Arial, Helvetica, sans-serif; font-size: 13px !important; }
body.tt-site #datepicker_div .datepicker_control { background: #edbb0d; }
body.tt-site #datepicker_div .datepicker_header, body.tt-site #datepicker_div .datepicker_header select { background: #0a3200; font-weight: normal; font-size: 13px; padding: 0; }
body.tt-site #datepicker_div .datepicker_header { padding-bottom: 8px; }
body.tt-site #datepicker_div .datepicker_currentDay { background: #4dccff !important; }
body.tt-site #datepicker_div .datepicker_currentDay a { color: #FFFFFF !important; }
/* Divi's reset collapses every table border; live (and the calendar's day grid) use the browser default, separate. */
body.tt-site #datepicker_div table, body.tt-site :where(.et-l, #main-content) table:not(.variations) { border-collapse: separate; }

/* 10. Home hero slider before slidepark starts (2026-10-06 battery classification round, PSI performance). Live's <img>
      slides become background-image slides only once the footer scripts run; until then the first photo showed stretched
      (fill) with the queued slides spilling below the hero. Show it exactly as the slide will be drawn (cover, centred)
      and clip the queue, so the swap changes no pixels (speed index and LCP) and nothing is ever stretched. The list
      also loses the browser's default margin/padding before the slider starts (they pushed the hero 15px down and 40px
      wide). slidepark sets exactly these values inline when it starts, so the running slider looks exactly as before. */
body.tt-site #page-container ul.featuremain.slidepark { position: relative; overflow: hidden; margin: 0; padding: 0; list-style: none; }
body.tt-site #page-container ul.featuremain.slidepark > li > img { object-fit: cover; object-position: center center; }

/* 11. fix round 2 (3.18 verifier, 2026-10-07) */
/* m1: nested lists: Divi's `.entry-content ul { list-style-type: disc }` hits every level; live (browser default) shows
   hollow circles at the second level and squares at the third (site map) */
body.tt-site :where(.et-l, #main-content) ul ul { list-style-type: circle; }
body.tt-site :where(.et-l, #main-content) ul ul ul { list-style-type: square; }
/* m9: after a successful send Divi replaces the form with its thank-you line; the form's centred 1184px box then
   indented that line to x 128 while the heading and intro above sit at x 35. Without a form the box spans the column. */
body.tt-site #page-container .tt-contact-form:not(:has(form)) { width: auto; max-width: none; margin-left: 0; margin-right: 0; }
/* Home booking button hover (found by the new button-state check, 2026-10-07): live's `.home .bookingbutton .button`
   and `.bookingbutton .button:hover` became equal-specificity rules once both were prefixed, so the later home rule won
   and the button never turned green on hover on the home page. Restore live's hover there. */
body.tt-site.tt-home #page-container .bookingbutton .button:hover { background: #0a3200 url(/wp-content/uploads/ilaunch/skin/bookbutton-bg-hover.png) no-repeat; background-position: 20px center; }
/* M1: site search results (mu-plugin ilaunch-search.php) use live's own markup; nothing else needed at 1250 and up */
/* Phone numbers (Darcie on a real iPhone, 2026-10-07): iOS turned the header number into its own link and painted it
   dark grey on the dark green header. The phone and reservations numbers 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); the fax and any other bare number are left alone by the format-detection meta in ilaunch-site.php. */
body.tt-site #page-container a.tel-link, body.tt-site #page-container a.tel-link:link, body.tt-site #page-container a.tel-link:visited,
body.tt-site #page-container a.tel-link:hover, body.tt-site #page-container a.tel-link:active, body.tt-site #page-container a.tel-link:focus,
body.tt-site a[x-apple-data-detectors] { color: inherit !important; text-decoration: none !important; font: inherit; }

/* 10. Contact page details table (Lucy, 2026-10-08, Clarissa feedback): the ported table is width="100%" so its two cells split
       50/50, leaving labels far from their details and a big empty area on the right. Shrink the table to its content with a
       fixed label column so the labels sit beside their details, as in the rest of the new site. */
body.tt-site.page-id-1413 #page-container #content .inner-wrapper table[width="100%"] { width: auto; max-width: 100%; border-collapse: collapse; }
body.tt-site.page-id-1413 #page-container #content .inner-wrapper table td { vertical-align: top; padding: 4px 0; }
body.tt-site.page-id-1413 #page-container #content .inner-wrapper table td:first-child { width: 150px; min-width: 150px; padding-right: 24px; white-space: nowrap; }
@media (max-width: 767px) {
body.tt-site.page-id-1413 #page-container #content .inner-wrapper table td:first-child { width: 120px; min-width: 120px; padding-right: 12px; }
body.tt-site.page-id-1413 #page-container #content .inner-wrapper table td:last-child { overflow-wrap: anywhere; }
}