/* dm-mobile.css: Darra Motel designed tablet and phone bands (Stage 4, skill Rule 2). Loaded LAST (after dm-design.css). Nothing here applies
   at 1250px and up, where the site is a pixel copy of live.
   Live is a responsive Bootstrap 3 site (viewport meta, a menu button and a "Book Now" peel below 768px, the booking bar behind the peel below 1200px),
   so its own layout is the starting point at every width below 1250. This layer fixes what Divi's wrappers broke (the home hero height chain), what
   live itself gets wrong on a phone and tablet (a screen-high photo with nothing on it, a 100px slider strip on the slider pages), and makes every
   width below 1250 WCAG AA: 14px text floor, 16px form fields, 24px tap targets, AA colours in every state (rest, hover, focus, active).
   Started from the kit's ilaunch-responsive.template.css (expanded for reference in build/stage4/dm-responsive.from-kit.css: button and link states,
   form layout, calendar, tel links); every selector rewritten for this bootstrap-era template (nav.navbar, #feature, #booking, .container-main-wrapper,
   footer.base), and its AA palette recomputed for this site's brown:
     #98653f  live's brown (headings, buttons, active menu item): white on it 4.92:1, it on white 4.92:1, so it passes as live has it
     #7a4f30  the footer below 1250 (live #98653f under #f4d693 links, 3.49:1): white 7.0:1, #f4d693 5.0:1
     #666666  live's #777 greys (review footers, page-size labels): 5.7:1 on white
   $P = body.dm-site #page-container, $H = body.dm-site.dm-home #page-container. */

/* =========================================================================================================
   1. Hero below 1250. Home, below 768: live makes the slider exactly one screen high and puts nothing on it but
      the Book Now peel (and Divi's wrappers broke that height chain anyway: a 100px strip over an empty 650px
      box). On a phone the slider is now 60% of the screen (300px at least), so the page's heading shows below it.
      The slider pages (privacy, specials, seo, unsubscribe) show live's 100px strip of the photo at every width;
      below 1250 they get the banner pages' proportion (1450 x 350) instead.
   ========================================================================================================= */
@media (max-width: 767px) {
  body.dm-site.dm-home #page-container #feature { height: 60vh; height: 60svh; min-height: 300px; }
  body.dm-site.dm-home #page-container #feature > .featuremain { height: 100% !important; min-height: 300px !important; }
}
@media (max-width: 1249px) {
  body.dm-site:not(.dm-home) #page-container #feature:has(> .featuremain) { height: 24.14vw; min-height: 100px; }
  body.dm-site:not(.dm-home) #page-container #feature > .featuremain { height: 100% !important; }
}

/* =========================================================================================================
   2. AA colours below 1250
   ========================================================================================================= */
@media (max-width: 1249px) {
  /* footer: live's #f4d693 links on the #98653f band are 3.49:1; the band darkens (white text 7.0:1, links 5.0:1) */
  body.dm-site #page-container footer.base { background-color: #7a4f30; }
  /* review list greys (#777, 4.48:1) and the page-size labels (white on #777) */
  body.dm-site #page-container blockquote :is(footer, small, .small, cite, .details) { color: #666666; }
  body.dm-site #page-container .label-default[href]:is(:link, :visited) { background-color: #666666; }
  body.dm-site #page-container .label-default[href]:is(:hover, :focus, :active) { background-color: #333333; color: #ffffff; }
  /* form field hints (#999 on white, 2.8:1) */
  body.dm-site #page-container .dm-contact-form .et_pb_contact .input::placeholder,
  body.dm-site #page-container .form-control::placeholder { color: #6b6b6b; opacity: 1; }
  /* home: the mailing-list SUBSCRIBE button is white on orange (#de9200, 2.6:1): dark text on the same orange (8.2:1); hover, focus and pressed white on #1b1b1b */
  body.dm-site #page-container .subscribe-panel-wrapper #sp_subscribe { color: #000000; }
  body.dm-site #page-container .subscribe-panel-wrapper #sp_subscribe:is(:hover, :focus, :active) { color: #ffffff; background-color: #1b1b1b; border-color: #1b1b1b; }
  /* buttons that are not .btn-primary (the home View Location): Bootstrap's hover and focus turn their label #333 on live's brown (2.6:1, live the
     same); below 1250 every such state is white on #1b1b1b, as live's own .btn-primary hover */
  body.dm-site #page-container a.btn:not(.btn-primary):is(:hover, :focus, :active) { color: #ffffff; background-color: #1b1b1b; }
  /* home: the FAQ panel is white text on #a26f45 (4.3:1): live's own brown (#98653f, 4.9:1) */
  body.dm-site.dm-home #page-container .faq-banner { background-color: #98653f; }
}

/* =========================================================================================================
   3. Type floor, fields and tap targets below 1250
   ========================================================================================================= */
@media (max-width: 1249px) {
  /* the menu button's name now comes from its aria-label (same words); its 1px Bootstrap screen-reader span read as 8px text that overflows its
     box to every audit, so it is dropped (the button itself only shows below 768) */
  body.dm-site #page-container .navbar-toggle .sr-only { display: none; }
  /* footer: 14px floor (live 13px) */
  body.dm-site #page-container footer.base :is(.copyright, .footer-tags, .footer-tags p, .footer-tags a, .footermenu a) { font-size: 14px; }
  /* the 14px floor sits the last footer line 1px closer to the page bottom than live's 13px (7px, live 8px; the battery's floor is 8): the copyright box gets the pixel back */
  body.dm-site #page-container footer.base .copyright { padding-bottom: 6px; }
  /* footer contact lines and menu, header phone: 24px tap height without moving the lines (inline padding grows the hit area only) */
  body.dm-site #page-container footer.base .vcard a { display: inline-block; padding: 4px 0; margin: -4px 0; }
  body.dm-site #page-container footer.base .footermenu a { display: inline-block; padding: 5px 0; margin: -5px 0; }
  body.dm-site #page-container footer.base .footer-tags a { display: inline-block; padding: 3px 0; margin: -3px 0; }
  body.dm-site #page-container nav.navbar .phone a { display: inline-block; padding: 2px 0; margin: -2px 0; }
  /* forms: 16px fields */
  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,
  body.dm-site #page-container .dm-contact-form .et_pb_contact p input.input.et_pb_contact_captcha,
  body.dm-site #page-container .page-content table input[type="text"],
  body.dm-site #page-container .subscribe-panel-wrapper .form-control,
  body.dm-site #page-container #booking .form-control { font-size: 16px; }
  /* booking bar labels (live 13px) */
  body.dm-site #page-container #booking label { font-size: 14px; line-height: 16px; }
  /* room amenities (live 11px, 13px from 768): 14px, the fixed 30px row grows for a label that wraps, and each pair starts a new row so the
     two-across list never staggers (floats) */
  body.dm-site #page-container ul.room-icons li.room-icon { font-size: 14px; height: auto; min-height: 30px; line-height: 18px; padding-top: 6px; padding-bottom: 6px; margin-bottom: 14px; }
  body.dm-site #page-container ul.room-icons li.room-icon:nth-child(2n+1) { clear: left; }
  /* map card text (Google's 12px) */
  body.dm-site #page-container .map-wrapper .map-info { font-size: 14px; line-height: 20px; }
  body.dm-site #page-container .map-wrapper .map-info a { display: inline-block; padding: 2px 0; }
  /* reviews: page-size labels (live 11.25px) and the pager digits as 32px targets */
  body.dm-site #page-container .page-content span.options a.label { display: inline-block; min-width: 32px; padding: 4px 8px; font-size: 14px; line-height: 16px; }
  body.dm-site #page-container .page-content .paging a { display: inline-block; min-width: 32px; padding: 4px 0; text-align: center; }
  /* blog sidebar category links and the site map's lists: 24px+ hit area, list links stay inline (a wrapped item keeps its bullet on line 1) */
  body.dm-site #page-container .well .title a { display: inline-block; padding: 3px 0; margin: -3px 0; }
  body.dm-site.page-id-1150 #page-container .page-content li a { display: inline; padding: 4px 0; }
  /* contact details table links (never the Get Directions button in the same table: it keeps its own padding) */
  body.dm-site #page-container .page-content td a:not(.btn), body.dm-site #page-container .page-content span.tel a { display: inline-block; padding: 3px 0; margin: -3px 0; }
  /* search results: the result titles (inline, so a long title wraps as before; the padding grows the hit area) */
  body.dm-site #page-container .page-content strong > a { padding: 4px 0; }
  /* room photo strips: the thumbnail links were 19px line boxes around their 90px pictures */
  body.dm-site #page-container .thumb > a.gallery-item { display: inline-block; vertical-align: top; }
}

/* =========================================================================================================
   4. Phone (below 768): header, menu, booking panel, forms, footer
   ========================================================================================================= */
@media (max-width: 767px) {
  /* menu button: bars dark enough to see (live #ccc on white, 1.6:1), 44 x 48 */
  body.dm-site #page-container .navbar-custom .navbar-toggle { width: 48px; height: 44px; padding: 10px 12px; margin-top: 0; margin-bottom: 0; border: 1px solid #8a8a8a; border-radius: 4px; background-color: #ffffff; }
  /* live's Book Now peel is a fixed 75px sticker under the header's right edge, so it slid over the right end of every text line as the page
     scrolled (contact form intro, review text). It now sits IN the fixed header, in the gap between the logo and the phone number (centred there,
     as live's own tablet header centres it), so it is always one tap away and never covers the page */
  body.dm-site #page-container #booking_peel { position: absolute; top: 1px; right: auto; left: calc(66.6667% - 86px - 37.5px); margin: 0; width: 75px; height: 75px; background-size: contain; }
  body.dm-site #page-container .navbar-custom .navbar-toggle .icon-bar { width: 22px; height: 2px; background-color: #333333; }
  body.dm-site #page-container .navbar-custom .navbar-toggle:is(:hover, :focus, :active) { background-color: #e6e6e6; }
  /* the open menu: tall rows that fit the screen and scroll inside it if the screen is short */
  body.dm-site #page-container nav.navbar .navbar-collapse { max-height: calc(100vh - 78px); max-height: calc(100svh - 78px); overflow-y: auto; }
  body.dm-site #page-container .navbar-custom .navbar-nav > li > a { line-height: 44px; }

  /* booking panel (opened by the Book Now peel): inside the screen at 320, 16px fields, 40px controls */
  body.dm-site #page-container #booking { width: auto; left: 12px; right: 12px; margin: 0 auto; max-width: 360px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3); }
  body.dm-site #page-container #booking .form-control { height: 40px; line-height: 40px; }
  body.dm-site #page-container #booking .form-group { margin-bottom: 8px; }
  body.dm-site #page-container #booking .datepicker_trigger { top: 12px; }
  body.dm-site #page-container #booking .btn { height: 44px; line-height: 44px; font-size: 16px !important; }

  /* forms: label over a full-width 48px field, the maths question and its field on one row, a full-width SUBMIT */
  body.dm-site #page-container .dm-contact-form .et_pb_contact p input.input { height: 48px; padding: 10px 12px; }
  body.dm-site #page-container .dm-contact-form .et_pb_contact p textarea.input { height: 140px; padding: 10px 12px; }
  body.dm-site #page-container .dm-contact-form .et_pb_contact_right p.clearfix { display: flex; flex-wrap: wrap; align-items: center; column-gap: 8px; height: auto; padding: 0; line-height: 48px; }
  body.dm-site #page-container .dm-contact-form .et_pb_contact_right p.clearfix::before { flex: 0 0 100%; margin: 0 0 5px; }
  body.dm-site #page-container .dm-contact-form .et_pb_contact_captcha_question { line-height: 48px; }
  body.dm-site #page-container .dm-contact-form .et_pb_contact p input.input.et_pb_contact_captcha { width: 120px; height: 48px; margin: 0; padding: 10px 12px; }
  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: block; width: 100%; height: 48px; line-height: 48px !important; padding: 0 20px !important; }
  body.dm-site.page-id-1140 #page-container .dm-contact-form form.et_pb_contact_form { padding: 12px; }

  /* footer menu: centred rows with room to tap */
  body.dm-site #page-container footer.base .footermenu ul { display: flex; flex-wrap: wrap; justify-content: center; column-gap: 6px; row-gap: 8px; }

  /* the contact details table (width 500 on live) fits the phone */
  body.dm-site :where(.et-l, #main-content) table[width="500"]:not(.variations) { width: 100%; max-width: 500px; }

  /* phones: the 78px header is fixed, so an in-page jump (the FAQ groups, the form anchors) would land under it; jumps stop below it instead
     (an ARRIVAL from another page is scrolled by Divi's own script, which dm-sitewide.php gives the same offset) */
  html:has(body.dm-site) { scroll-padding-top: 94px; }
}

/* =========================================================================================================
   5. Booking calendar (#datepicker_div, appended to <body>) below 1250: 14px text, 16px month/year pickers,
      AA colours (live: Clear/Close #eee on #888 3.1:1, day names #eee on #777 4.0:1, the picked day white on
      orange 2.0:1), 24px+ taps; on a phone it spans the screen with 40px day rows
   ========================================================================================================= */
@media (max-width: 1249px) {
  body.dm-site #datepicker_div .datepicker_control { background: #595959; }
  body.dm-site #datepicker_div .datepicker_control, body.dm-site #datepicker_div .datepicker_links { font-size: 14px; }
  body.dm-site #datepicker_div .datepicker_titleRow, body.dm-site #datepicker_div .datepicker_titleRow .datepicker_weekEndCell { background: #595959; }
  body.dm-site #datepicker_div .datepicker_titleRow a { color: #ffffff !important; font-size: 14px; }
  body.dm-site #datepicker_div .datepicker_currentDay a { color: #000000 !important; }
  body.dm-site #datepicker_div .datepicker_header, body.dm-site #datepicker_div .datepicker_header select { font-size: 16px; }
  body.dm-site #datepicker_div .datepicker_header select { height: 28px; }
  /* the month/year row has a fixed 1.3em height on live: with 16px pickers it now grows with them instead of running under the day names */
  body.dm-site #datepicker_div .datepicker_header { height: auto; padding: 4px 0 6px; }
  body.dm-site #datepicker_div .datepicker_control a, body.dm-site #datepicker_div .datepicker_links a, body.dm-site #datepicker_div .datepicker_links label { display: block; line-height: 24px; }
  /* day and day-name links: 24px tall (live 22px) */
  body.dm-site #datepicker_div td a { line-height: 24px; }
}
@media (max-width: 767px) {
  body.dm-site #datepicker_div { width: calc(100vw - 32px) !important; max-width: 400px; left: 16px !important; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35); }
  body.dm-site #datepicker_div .datepicker_oneMonth { width: 100%; }
  body.dm-site #datepicker_div .datepicker_control a, body.dm-site #datepicker_div .datepicker_links a, body.dm-site #datepicker_div .datepicker_links label { display: block; line-height: 36px; }
  body.dm-site #datepicker_div td a { line-height: 40px; }
}

/* a phone number is never split over two lines */
@media (max-width: 1249px) {
  body.dm-site #page-container a.tel-link, body.dm-site #page-container a[href^="tel:"] { white-space: nowrap; }
}

/* live content's inline justified text leaves wide word gaps on a phone column */
@media (max-width: 767px) {
  body.dm-site #page-container [style*="justify"] { text-align: left !important; }
}

/* narrow phones: a 36px page title ("DARRA ACCOMMODATION") has words wider than a 320px screen (overlap_check OFFSCREEN-R at 320; live the same) */
@media (max-width: 479px) {
  body.dm-site #page-container :is(.page-header h1, .container.content h1) { font-size: 30px; line-height: 36px; overflow-wrap: break-word; }
}

/* narrow phones (below 380): the contact details table (an 80px label column beside the values) no longer fits the email address, so label and
   value stack, each label above its value (overflowed the screen at 320) */
@media (max-width: 379px) {
  body.dm-site.page-id-1142 #page-container .page-content table[width="500"] :is(tr, td) { display: block; width: auto; }
  body.dm-site.page-id-1142 #page-container .page-content table[width="500"] td + td { margin-bottom: 6px; }
  /* the Get Directions row's empty first cell would stack as a blank line */
  body.dm-site.page-id-1142 #page-container .page-content table[width="500"] tr:last-child > td:first-child { display: none; }
}

/* the Book Now peel in the phone header (section 4): from 480 the phone number block is 177px wide (24px number), so the gap's centre moves; below
   360 the gap between logo and number is about 71px, so the peel is 60px there */
@media (min-width: 480px) and (max-width: 767px) {
  body.dm-site #page-container #booking_peel { left: calc(66.6667% - 103.5px - 37.5px); }
}
@media (max-width: 359px) {
  body.dm-site #page-container #booking_peel { top: 9px; width: 60px; height: 60px; left: calc(66.6667% - 86px - 30px); }
}

/* buttons: a 14px floor for the two that live sets at 12px, only in the bands where live does (live's home-page rules out-rank a plain one, hence
   !important): the home Check Availability below 480 (16px from 480) and the mailing-list SUBSCRIBE below 640 (15px and 160px wide from 640). At 14px
   SUBSCRIBE no longer fits live's fixed 82px button (the word ran 6px past it, seen in the WebKit render), so it takes its own width there */
@media (max-width: 479px) {
  body.dm-site.dm-home #page-container div.text a.btn { font-size: 14px !important; }
}
@media (max-width: 639px) {
  body.dm-site #page-container .subscribe-panel-wrapper .pgl-form-newsletter #sp_subscribe { font-size: 14px !important; width: auto; padding: 0 12px; }
}

/* 3.18 fix round 1 (L2), 13 Oct 2026: on /search below 480 the keyword field and the SEARCH button wrap onto two lines and touched (field bottom edge on the button's top edge). Stack them
   as blocks with 8px between. From 480 they sit side by side (a few px apart) as before; 1250 and up is live's own layout. */
@media (max-width: 479px) {
  body.dm-site #page-container .page-content input.clicknclear { display: block; margin-bottom: 8px; }
  /* the markup has a no-break space between the two (4px); on its own line it would indent the button, so pull the button back by it */
  body.dm-site #page-container .page-content input.clicknclear + input.btn { margin-left: -4px; }
}

/* 3.18 fix round 1 (L3), 13 Oct 2026: on /contact and /location the "Location Map" heading and the address line under it sat 5px left of the page text above (live's 10px side
   padding on the map block against the 15px gutter of the page text). Below 1250 they take the page gutter; 1250 and up keeps live's 10px. Page body only (the footer map has its own layout). */
@media (max-width: 1249px) {
  body.dm-site #page-container .et_pb_code_inner .map-wrapper > :is(h3, p) { padding-left: 15px; padding-right: 15px; }
}