/* dm-design.css: Darra Motel desktop parity layer (Stage 4). Replaces the content build's dm-base.css. Loads after the ported live CSS
   (dm-bundle.css, dm-live.css) and before dm-mobile.css (the designed bands below 1250px).
   Every rule here either undoes something Divi adds that live (Bootstrap 3 + iLaunch general.css) never had, or puts back a live rule that the
   CSS port scoped under #page-container although its element lives outside it (the booking calendar and the photo pop-up are appended to <body>).
   Measured against live with build/stage4/design_pairs_dm.js + design_diff.py at 1440. $B = body.dm-site, $P = body.dm-site #page-container.
   Bootstrap 3 sizes everything border-box, like Divi, so no content-box restore is needed on this template. */

/* ---------- 1. Divi neutralisers (were dm-base.css) ---------- */
/* Divi caps .container at 80% / 1080px; live's bootstrap container is 1170px (the width comes from the ported bootstrap rules at 768, 992, 1200) */
body.dm-site #page-container .container { max-width: none; }
/* below 768 bootstrap leaves .container at auto width; Divi's 80% made every phone column 78px narrower than live */
@media (max-width: 767px) {
  body.dm-site #page-container .container { width: auto; }
}
/* Divi's text rhythm: p padding, ul/ol padding and 26px line height, heading padding, greyscale smoothing; live uses the browser defaults + bootstrap.
   (The body weight stays live's 300 from the port: Divi's 500, and the build's earlier 400, made every inheriting box heavier than live.) */
body.dm-site { -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; }
body.dm-site :where(.et-l, #main-content) p { padding-bottom: 0; }
body.dm-site :where(.et-l, #main-content) ul, body.dm-site :where(.et-l, #main-content) ol { padding: 0 0 0 40px; line-height: inherit; }
body.dm-site :where(.et-l, #main-content) :is(h1, h2, h3, h4, h5, h6) { padding-bottom: 0; }
/* Divi's content-table look is not on live */
body.dm-site :where(.et-l, #main-content) table:not(.variations) { border: 0; margin: 0; width: auto; text-align: start; }
body.dm-site :where(.et-l, #main-content) table[width="100%"]:not(.variations) { width: 100%; }
/* the contact details table carries width="500" on live; any author rule beats an HTML width attribute, so it is restated */
body.dm-site :where(.et-l, #main-content) table[width="500"]:not(.variations) { width: 500px; }
body.dm-site :where(.et-l, #main-content) :is(td, th) { padding: 1px; border: 0; text-align: start; }
/* Divi pads "#main-content .container" at the top and draws a rule on sidebar views */
html body.dm-site #main-content .container { padding-top: 0; }
body.dm-site #main-content .container::before { display: none; }
/* Divi gives every image max-width:100%; live's images (the 2000px room slides, banners) render at their own width, bootstrap's .img-responsive opts in where wanted */
body.dm-site img { max-width: none; }
/* live's body{overflow-x:hidden} stops sideways scrolling. With Divi's wrappers that clip no longer reaches the viewport; overflow-x on html/body would
   break fancybox (it saves and restores the page scroll when it opens), so the page wrapper clips instead (clip creates no scroll container). */
body.dm-site #page-container { overflow-x: clip; }
/* the blog views (category, month) load Divi's own nav stylesheet, whose `.nav li { line-height: 1em }` shrank the menu items' line boxes */
body.dm-site #page-container #navbar .nav li { line-height: inherit; }

/* ---------- 2. Search form: live's keyword field is an unstyled input (the browser's 2px inset border); Divi restyles bare inputs ---------- */
/* (revert, not the computed 2px inset values: an author-set border makes Chrome drop the native field look that live shows) */
body.dm-site #page-container .page-content table input[type="text"] { -webkit-appearance: revert; appearance: revert; padding: revert; border: revert; border-radius: revert; background: revert; color: #333333; }

/* ---------- 3. Booking calendar (#datepicker_div, appended to <body>): the port scoped the calendar's table class (.datepicker) and live's generic td,
   label and select rules under #page-container, so on dev the calendar opened 125px wide with Arial 14px days (live: 185px, Montserrat 15px cells).
   Live's rules, put back on the calendar itself. ---------- */
/* (element-level rules wrapped in :where(#datepicker_div) so the calendar's own class rules, e.g. the grey unselectable days, still win as on live) */
body.dm-site :where(#datepicker_div) table { border-collapse: collapse; border-spacing: 0; background-color: transparent; }
body.dm-site :where(#datepicker_div) :is(td, th) { padding: 0; font-family: 'Montserrat', Arial, Helvetica, sans-serif; font-size: 15px; line-height: 22px; color: #000000; font-weight: 300; }
body.dm-site :where(#datepicker_div) label { display: inline-block; max-width: 100%; margin-bottom: 5px; font-weight: 700; }
body.dm-site :where(#datepicker_div) select { font-family: inherit; font-size: inherit; line-height: inherit; text-transform: none; margin: 0; }
body.dm-site #datepicker_div .datepicker { clear: both; float: left; width: 100%; color: #ffffff; background: #cccccc; text-align: center; font-size: 100%; }
body.dm-site #datepicker_div .datepicker a { display: block; width: 100%; }

/* ---------- 4. Photo pop-up (fancybox 1.3.4, appended to <body>): its frame and shadow pieces carry the class .fancy-bg, which the port scoped under
   #page-container, so they lost their 20px size and absolute position (grey bands instead of the soft frame). Live's rule, unscoped. ---------- */
body.dm-site .fancy-bg { position: absolute; padding: 0; margin: 0; border: 0; width: 20px; height: 20px; z-index: 1001; }

/* ---------- 5. Contact, review and unsubscribe forms: Divi contact-form modules dressed as live's Bootstrap 3 forms (measured at 1440):
   label 15px bold above a 34px field (6px 12px padding, 14px Montserrat 300, 1px #ccc border, faint inset shadow), 15px between groups, a 74px
   message box, the Verification row (its label, then a 78px block where live shows Google's reCAPTCHA box), and live's brown SUBMIT (.btn-primary:
   15px, 40px tall, 50px side padding, 1px letter spacing). Divi's maths question stands in for live's reCAPTCHA, whose key is dead on live itself
   ("Invalid site key" since January 2025, so live's forms stopped delivering): a DELIBERATE row. ---------- */
body.dm-site #page-container .dm-contact-form { margin: 0; padding: 0; background: none; }
body.dm-site #page-container .dm-contact-form .et_pb_contact { padding: 0; margin: 0; }
body.dm-site #page-container .dm-contact-form form.et_pb_contact_form { display: block; margin: 0; padding: 0; }
body.dm-site #page-container .dm-contact-form p.et_pb_contact_field { float: none; clear: both; width: auto; margin: 0 0 15px; padding: 0; }
body.dm-site #page-container .dm-contact-form .et_pb_contact_form_label { display: inline-block; margin: 0 0 5px; padding: 0; font: 700 15px/22px 'Montserrat', Arial, Helvetica, sans-serif; color: #000000; text-transform: none; }
body.dm-site #page-container .dm-contact-form .et_pb_contact p input.input,
body.dm-site #page-container .dm-contact-form .et_pb_contact p textarea.input {
  display: block; width: 100%; height: 34px; margin: 0; padding: 6px 12px; border: 1px solid #cccccc; border-radius: 0; background-color: #ffffff;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); font: 300 14px/20px 'Montserrat', Arial, Helvetica, sans-serif; color: #333333; }
body.dm-site #page-container .dm-contact-form .et_pb_contact p input.input[data-field_type="email"],
body.dm-site #page-container .dm-contact-form .et_pb_contact p textarea.input { color: #555555; }
body.dm-site #page-container .dm-contact-form .et_pb_contact p textarea.input { height: 74px; min-height: 0; resize: vertical; }
body.dm-site #page-container .dm-contact-form .et_pb_contact .input::placeholder { color: #999999; opacity: 1; }
body.dm-site #page-container .dm-contact-form .et_pb_contact .input:focus { border-color: #66afe9; outline: 0; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6); }
/* Verification group: the label line (22px + 5px) and a 78px block, 15px below (105px, as live's group with the reCAPTCHA box). The maths question and
   its field sit at the top of that block; the field is a Bootstrap-style 34px box like the others */
body.dm-site #page-container .dm-contact-form .et_contact_bottom_container { display: block; float: none; clear: both; margin: 0; padding: 0; text-align: left; }
body.dm-site #page-container .dm-contact-form .et_pb_contact_right { display: block; float: none; margin: 0 0 15px; padding: 0; text-align: left; }
body.dm-site #page-container .dm-contact-form .et_pb_contact_right p.clearfix { display: block; float: none; height: 105px; margin: 0; padding: 0; font: 300 15px/34px 'Montserrat', Arial, Helvetica, sans-serif; color: #000000; text-align: left; }
body.dm-site #page-container .dm-contact-form .et_pb_contact_right p.clearfix::before { content: "Verification"; display: block; visibility: visible; height: 22px; margin: 0 0 5px; font: 700 15px/22px 'Montserrat', Arial, Helvetica, sans-serif; color: #000000; }
body.dm-site #page-container .dm-contact-form .et_pb_contact_right p.clearfix::after { display: none; }
body.dm-site #page-container .dm-contact-form .et_pb_contact_captcha_question { font: 300 15px/34px 'Montserrat', Arial, Helvetica, sans-serif; color: #000000; }
body.dm-site #page-container .dm-contact-form .et_pb_contact p input.input.et_pb_contact_captcha {
  display: inline-block; width: 80px; max-width: none; height: 34px; margin: 0 0 0 4px; padding: 6px 12px; vertical-align: top; text-align: left; }
/* SUBMIT: live's .btn.btn-primary (rest #98653f; hover and pressed #1b1b1b; keyboard focus Bootstrap's #286090, as live) */
body #page-container .et_pb_section .dm-contact-form.et_pb_contact_form_container.et_pb_module .et_pb_button.et_pb_contact_submit {
  display: inline-block; float: none; height: 40px; margin: 0 !important; padding: 0 50px !important; border: 0 !important; border-radius: 0 !important;
  background: #98653f !important; color: #ffffff !important; font: 400 15px/40px 'Montserrat', Arial, Helvetica, sans-serif !important; letter-spacing: 1px !important;
  text-transform: uppercase; cursor: pointer; transition: none; }
body #page-container .et_pb_section .dm-contact-form.et_pb_contact_form_container.et_pb_module .et_pb_button.et_pb_contact_submit:focus { background: #286090 !important; padding: 0 50px !important; }
body #page-container .et_pb_section .dm-contact-form.et_pb_contact_form_container.et_pb_module .et_pb_button.et_pb_contact_submit:hover,
body #page-container .et_pb_section .dm-contact-form.et_pb_contact_form_container.et_pb_module .et_pb_button.et_pb_contact_submit:active { background: #1b1b1b !important; padding: 0 50px !important; }
body #page-container .et_pb_section .dm-contact-form.et_pb_contact_form_container.et_pb_module .et_pb_button.et_pb_contact_submit::after { display: none !important; }
/* the success line (Divi replaces the form with it) and the error list keep live's body text */
body.dm-site #page-container .dm-contact-form .et-pb-contact-message { font: 300 15px/22px 'Montserrat', Arial, Helvetica, sans-serif; color: #000000; margin: 0; }
body.dm-site #page-container .dm-contact-form .et-pb-contact-message > * { margin: 0 0 15px; }
body.dm-site #page-container .dm-contact-form .et-pb-contact-message ul { padding: 0 0 0 20px; }
/* Reviews (page 1140): live's form is the boxed .form-standard (1px #eee border, 15px padding, 25px margin; 200px side margins from 1200px) */
/* (the margin sits on the module so it collapses with the intro paragraph's margin, as live's form margin does) */
body.dm-site.page-id-1140 #page-container .dm-contact-form { margin: 25px 0; }
body.dm-site.page-id-1140 #page-container .dm-contact-form form.et_pb_contact_form { border: 1px solid #eeeeee; padding: 15px; }
@media (min-width: 1200px) {
  body.dm-site.page-id-1140 #page-container .dm-contact-form { margin: 25px 200px; }
}
/* Unsubscribe (page 1149): live's .form-horizontal (label in a 25% column, field in a 58.33% column, verification and button under the field) from 768px */
@media (min-width: 768px) {
  /* bootstrap columns of the 30px-wider row: label at 25% of (form + 30px), field 58.33% of (form + 30px) - 30px wide */
  body.dm-site.page-id-1149 #page-container .dm-contact-form form.et_pb_contact_form { display: grid; grid-template-columns: calc(25% + 7.5px) calc(58.3333% - 12.5px) 1fr; margin: 0; }
  body.dm-site.page-id-1149 #page-container .dm-contact-form p.et_pb_contact_field { display: contents; }
  body.dm-site.page-id-1149 #page-container .dm-contact-form p.et_pb_contact_field > .et_pb_contact_form_label { grid-column: 1; grid-row: 1; align-self: start; margin: 0 0 15px; }
  body.dm-site.page-id-1149 #page-container .dm-contact-form .et_pb_contact p.et_pb_contact_field > input.input { grid-column: 2; grid-row: 1; margin: 0 0 15px; }
  body.dm-site.page-id-1149 #page-container .dm-contact-form .et_contact_bottom_container { grid-column: 2 / 4; grid-row: 2; }
  /* live's verification group has no label here: the 78px block only */
  body.dm-site.page-id-1149 #page-container .dm-contact-form .et_pb_contact_right p.clearfix { height: 78px; }
  body.dm-site.page-id-1149 #page-container .dm-contact-form .et_pb_contact_right p.clearfix::before { content: none; display: none; }
  /* live's button sits in its own .form-group (15px margin below) */
  body.dm-site.page-id-1149 #page-container .dm-contact-form .et_contact_bottom_container { padding-bottom: 15px; }
}

/* ---------- 6. Keyboard focus: Divi's reset removes every outline (`:focus { outline: 0 }`), live shows the browser's ring (and Bootstrap's ring on
   links and buttons). Low specificity so live's own outline rules still decide where they exist. ---------- */
body.dm-site :focus-visible { outline: revert; }
/* controls whose own CSS removes the ring on live too (slider arrows, the phone menu button, the maths-question field, the booking peel): a ring only
   while focused from the keyboard, so nothing changes for a mouse or a finger */
body.dm-site #page-container #feature .sp-arrow:focus-visible { outline: 2px solid #ffffff !important; outline-offset: 2px; box-shadow: 0 0 0 4px #6e4527 !important; }
body.dm-site #page-container .navbar-toggle:focus-visible { outline: 2px solid #6e4527 !important; outline-offset: 2px; }
body.dm-site #page-container #booking_peel:focus-visible { outline: 2px solid #6e4527 !important; outline-offset: -4px; }
body.dm-site #page-container .dm-contact-form .et_pb_contact p input.input:focus-visible { outline: revert; }

/* ---------- 7. Phone numbers: explicit tel: links that keep the surrounding text's colour and look in every state (live shows plain text there) ---------- */
body.dm-site #page-container a.tel-link, body.dm-site #page-container a.tel-link:link, body.dm-site #page-container a.tel-link:visited,
body.dm-site #page-container a.tel-link:hover, body.dm-site #page-container a.tel-link:active, body.dm-site #page-container a.tel-link:focus,
body.dm-site a[x-apple-data-detectors] { color: inherit !important; text-decoration: none !important; font: inherit; }

/* ---------- 8. Keyless map card (/location, /contact): live's Maps JavaScript map (a referrer-locked key on iLaunch's account) opens an info window
   over the pin; the keyless embed cannot, so the same lines (and the Get Directions link) sit in a card drawn like Google's info window, just above
   the embed's own pin (DELIBERATE, the map row). ---------- */
body.dm-site #page-container .map-wrapper { position: relative; }
body.dm-site #page-container .map-container { position: relative; height: 400px; }
body.dm-site #page-container .map-container iframe.ils-map { display: block; width: 100%; height: 100%; min-height: 300px; border: 0; }
body.dm-site #page-container .map-wrapper .map-info { display: block; position: absolute; left: 50%; bottom: 251px; transform: translateX(-50%); z-index: 3; width: max-content; max-width: min(300px, calc(100% - 32px));
  padding: 12px 14px; background: #ffffff; border-radius: 8px; box-shadow: 0 2px 7px 1px rgba(0, 0, 0, 0.3); font: 400 12px/16px Roboto, Arial, Helvetica, sans-serif; color: #000000; text-align: left; }
body.dm-site #page-container .map-wrapper .map-info::after { content: ""; position: absolute; left: 50%; bottom: -8px; margin-left: -8px; border: 8px solid transparent; border-bottom: 0; border-top-color: #ffffff; }
body.dm-site #page-container .map-wrapper .map-info strong { font-weight: 700; }
body.dm-site #page-container .map-wrapper .map-info a { color: #000000; text-decoration: underline; }

/* ---------- 9. Staff feedback 15 Oct 2026 (Jake) ---------- */
/* /reviews: the guest's words are italic (name, place and date stay upright); the pager marks the page you are on (the old <em> was invisible) */
body.dm-site #page-container .page-content blockquote > p { font-style: italic; }
body.dm-site #page-container .page-content .paging em { font-style: normal; }
body.dm-site #page-container .page-content .paging em a { display: inline-block; min-width: 28px; padding: 2px 8px; background: #98653f; color: #ffffff; font-weight: 700; text-align: center; text-decoration: none; cursor: default; pointer-events: none; }
/* /search: a wider keyword box on desktop (215px was the live width) */
@media (min-width: 1250px) {
  body.dm-site #page-container .page-content table.searchpage input.clicknclear { width: 360px; }
}
/* /location: the nearby places list is a three-column table (place, drive time, distance) */
body.dm-site #page-container .page-content table.distances { width: 100%; max-width: 760px; border-collapse: collapse; margin: 0 0 20px; }
body.dm-site #page-container .page-content table.distances :is(th, td) { padding: 7px 12px; border-bottom: 1px solid #e3d9d2; text-align: left; font-size: 15px; line-height: 1.4; vertical-align: top; }
body.dm-site #page-container .page-content table.distances thead th { background: #98653f; color: #ffffff; font-weight: 700; border-bottom: 0; }
body.dm-site #page-container .page-content table.distances tbody th { font-weight: inherit; }
body.dm-site #page-container .page-content table.distances tbody tr:nth-child(even) { background: #f7f2ee; }
body.dm-site #page-container .page-content table.distances :is(td, thead th:not(:first-child)) { white-space: nowrap; }
@media (max-width: 480px) {
  body.dm-site #page-container .page-content table.distances :is(th, td) { padding: 6px 8px; font-size: 14px; }
}