/* an-mobile.css - Anacapri Apartments: the DESIGNED tablet and phone layer (Stage 4, skill Rule 2). Loads LAST, after an-design.css.
   Nothing in this file applies from 1250px up: every rule sits inside a max-width 1249px (or narrower) media query, so the 1:1 copy
   of live (an-live.css + an-design.css) is untouched there.
   Started from the kit's responsive template (expanded into build/mobile/an-responsive.starter.css; its variant blocks match nothing
   on this older skin) and from the previous family A phone layer, then
   written for THIS site's markup: #container-outer-bg holding the hero (home #homefeature img, 15 .featureimage banners, 19 .noimage
   bands), #header (absolute on live), #booking (one 998px background picture: the white Book Online box and the orange Special
   Offers box), #content .left/.right (or a full-width .content on rooms and reviews), table.gallery and table.rooms, the blue footer.
   WIDTH BANDS
     1250 and up    live's exact look (an-live.css, an-design.css; nothing here).
     1170 to 1249   live's layout (its fixed 998px column fits), the header row widened so the 14px menu fits, plus the AA layer.
     768 to 1169    a reflow: the menu behind a button, the booking box and the offer as two cards under the photo, content and
                    sidebar stacked (the sidebar panels two across), fluid photo grids. Plus the AA layer.
     below 768      the phone design: compact header, stacked booking block, one column, 2-up photo grids.
   AA LAYER (below 1250, every state: rest, hover, focus, active): text 14px or more, inputs 16px, tap targets 24px or more.
   Ratios from build/mobile/aa_an.py (exit 0).
     Live colour (ratio)                                   below 1250 (ratio)
     link and h2 #007ac8 on white (4.6), on #f0efeb (4.0)  #006bb0 (5.6 / 4.9)
     yellow button label #67490e on #ffa925 (4.3)          #3d2a05 on a flat #ffb43c (7.7); hover #ffc64a (8.8)
     grey "more" white on #909090 (3.2), hover on #f79b0c  white on #5b5b5b (6.8); hover/focus/active #2b1b00 on #f7a12a (8.0)
     menu Book Now white on #007ac8, hover #ffc344 (2.9)   white on #006bb0 (5.6), hover white on #00508a (8.4)
     sub-menu white on #989898 (2.9), hover #6f6f6f (1.7)  white on #006bb0 (5.6), hover white on #00508a (8.4)
     footer links white on the light band #0f88ce (3.9)    white on #00609e (6.6); separators and copyright #bfe3f7 (4.9 / 5.8)
     footer hover #ffa721 (2.0 on the band)                #ffd27a (4.7 or more)
     offer text white on orange #f79b0c (2.2)              #2b1b00 (7.7)
     greys #999 / #7b7b7b / #808080 (2.9 to 4.2)           #666666 (5.7), pager #555555 on #efefef (6.5)
     review name #ffb42e (1.8)                             #995c00 (5.4)
     calendar day names white on #777 (4.5), past days #888 on #eee (3.1)   white on #595959 (7.0), #555555 (6.4)
   Focus: a dark 3px ring with a 2px white halo, visible on white, blue, orange and photo grounds.
   Round 10 (12 Oct 2026, the 3.18c fix pass): rules marked "3.18c C1" to "C7" (search highlight, map link, numbered lists, room rows,
   VIP and search forms, footer link rows, the stacked sidebar). */

/* =================== below 1250: the AA layer =================== */
@media (max-width: 1249px) {
  /* ---- text floor: live's booking bar (12px), panels (12px, em 11px), menu (12px), footer (11px), pager (11px), details (12px), small
     text and form notes (11px), gallery captions (11px) ---- */
  body.an-site #page-container :is(#booking, #booking p, #booking td, #booking strong, .special .text, .special .text p, .panel, .panel li, .panel em, .panel .summary,
    .entry .details, .paging, .paging a, .paging em, span.options, span.result-count, .smalltext, .breadcrumbs, blockquote .details, .form td em,
    #footer, #footer p, #footer a, #footer em, #footer .tags, .vcard, .comment, .gallery td, .gallery strong, .rooms td, p.ils-required-note, p.ils-required-note em) {
    font-size: 14px; line-height: 1.5; }
  body.an-site #page-container #menu { font-size: 14px; }
  body.an-site #page-container #menu li li { font-size: 14px; }
  /* pasted page and post text with small inline sizes */
  body.an-site #page-container #content :is([style*="font-size: 10px"], [style*="font-size:10px"], [style*="font-size: 11px"], [style*="font-size:11px"], [style*="font-size: 12px"], [style*="font-size:12px"], [style*="font-size: 13px"], [style*="font-size:13px"], [style*="font-size: 13.6px"], [style*="font-size:13.6px"], [style*="font-size: x-small"], [style*="font-size: small"], [style*="font-size: 8pt"], [style*="font-size: 9pt"], [style*="font-size: 10pt"]) { font-size: 14px !important; line-height: 1.5 !important; }
  body.an-site #page-container #content font[size="1"], body.an-site #page-container #content font[size="2"] { font-size: 14px; }
  /* form controls 16px (also stops iOS zooming on focus) */
  body.an-site #page-container :is(input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="image"]), select, textarea) { font-size: 16px; }
  body.an-site #page-container :is(input.button, input[type="submit"], button) { font-size: 14px; }
  /* tap targets 24px: inline vertical padding on list and running-text links (no change to how a line wraps) */
  body.an-site #page-container :is(#footer a, .panel a:not(.button):not(.more), .entry .details a, #content p a:not(.button), #content td a:not(.button), #content li a:not(.button), blockquote a, .special .text a, .breadcrumbs a) {
    padding-top: 5px; padding-bottom: 5px; }
  body.an-site #page-container #footer a.tag { padding-top: 0; padding-bottom: 0; }
  body.an-site #page-container :is(.paging a, .paging em, span.options a) { display: inline-block; min-width: 24px; min-height: 24px; line-height: 24px; box-sizing: border-box; text-align: center; vertical-align: middle; }
  body.an-site #page-container :is(a.more, .panel a.more) { display: inline-block; min-height: 24px; line-height: 24px; padding-top: 0; padding-bottom: 0; box-sizing: border-box; }
  body.an-site #page-container .socialmedia a { display: inline-block; min-width: 24px; min-height: 24px; text-align: center; }
  body.an-site #page-container #header .left a { display: block; width: fit-content; }
  /* title links stay inline: an inline-block title too long to sit beside a floated photo drops below the photo */
  body.an-site #page-container .entry h2 > a, body.an-site #page-container .panel li > a { display: inline; padding-top: 4px; padding-bottom: 4px; }
  /* live's grey "more" buttons are 11px under a :link rule that out-ranks the floor above; the map info box (12px) */
  body.an-site #page-container a.more:is(:link, :visited, :active, :hover), body.an-site #page-container a.button.alt:is(:link, :visited, :active, :hover) { font-size: 14px; padding-left: 12px; padding-right: 12px; }
  body.an-site #page-container :is(.map-info-window, .map-info-window strong, .map-info-window a) { font-size: 14px; line-height: 1.5; }
  /* live's sidebar tables (the contact details box) are a fixed 300px: the column's width */
  body.an-site #page-container #content .right .side table[style*="width"] { width: 100% !important; box-sizing: border-box; }

  /* ---- colours, every state ---- */
  body.an-site #page-container a:is(:link, :visited, :active, :hover) { color: #006bb0; }
  body.an-site #page-container a.link:is(:link, :visited, :active, :hover) { color: #333333; }
  body.an-site #page-container :is(h2, .bookonline h3) { color: #006bb0; }
  body.an-site #page-container h2 a:is(:link, :visited, :active, :hover) { color: #006bb0; }
  body.an-site #page-container h3 a:is(:link, :visited, :active, :hover) { color: #06437e; }
  /* yellow buttons: a flat yellow with a dark label at rest; the lighter yellow with the same label in every active state */
  body.an-site #page-container :is(a.button:not(.alt), input.button:not(.alt)),
  body.an-site #page-container :is(a.button:not(.alt), input.button:not(.alt)):is(:link, :visited, :active, :hover, :focus, :focus-visible) {
    background: #ffb43c; color: #3d2a05; text-shadow: none; text-decoration: none; border-color: #c98a1e; }
  body.an-site #page-container :is(a.button:not(.alt), input.button:not(.alt)):is(:hover, :focus, :focus-visible, :active) { background: #ffc64a; }
  /* grey "more" buttons (Read More, View More, Go): white on the dark end of live's grey at rest; live's orange hover with a dark label */
  body.an-site #page-container :is(a.more, a.button.alt, input.button.alt),
  body.an-site #page-container :is(a.more, a.button.alt, input.button.alt):is(:link, :visited, :active) { background: #5b5b5b; color: #ffffff; text-shadow: none; text-decoration: none; }
  body.an-site #page-container :is(a.more, a.button.alt, input.button.alt):is(:hover, :focus, :focus-visible, :active) { background: #f7a12a; color: #2b1b00; }
  /* the Divi contact and review form button, drawn as live's yellow button */
  body.an-site #page-container .et_pb_section .an-contact-form.et_pb_contact_form_container.et_pb_module .et_pb_button,
  body.an-site #page-container .et_pb_section .an-contact-form.et_pb_contact_form_container.et_pb_module .et_pb_button:is(:hover, :focus, :focus-visible, :active) {
    color: #3d2a05 !important; text-shadow: none !important; background: #ffb43c !important; }
  body.an-site #page-container .et_pb_section .an-contact-form.et_pb_contact_form_container.et_pb_module .et_pb_button:is(:hover, :focus, :focus-visible, :active) { background: #ffc64a !important; }
  /* keyboard focus: dark ring + white halo (Divi removes every ring) */
  body.an-site #page-container :is(a, input, select, textarea, button):focus-visible,
  body.an-site :is(#datepicker_div, #fancybox-wrap, #fancybox-outer) :is(a, select, button):focus-visible {
    outline: 3px solid #111111 !important; outline-offset: 2px; box-shadow: 0 0 0 2px #ffffff; }
  /* links whose only child is an image: ring the image too (a floated image leaves the link a 0 x 0 box) */
  body.an-site #page-container a:focus-visible > img { outline: 3px solid #111111; outline-offset: 2px; box-shadow: 0 0 0 2px #ffffff; }
  /* menu */
  body.an-site #page-container #menu a:is(:link, :visited, :active) { color: #555555; }
  body.an-site #page-container #menu a:hover, body.an-site #page-container #menu li.active > a:is(:link, :visited, :active, :hover) { color: #006bb0; }
  body.an-site #page-container #menu li:hover > a:is(:link, :visited, :active, :hover), body.an-site #page-container #menu li.sfhover > a:is(:link, :visited, :active, :hover) { color: #ffffff; background-color: #006bb0; }
  body.an-site #page-container #menu li ul { background-color: #006bb0; }
  body.an-site #page-container #menu li ul a:is(:link, :visited, :active), body.an-site #page-container #menu li:hover ul a:is(:link, :visited, :active) { color: #ffffff; background-color: transparent; }
  body.an-site #page-container #menu li ul a:is(:hover, :focus), body.an-site #page-container #menu li:hover ul a:is(:hover, :focus) { color: #ffffff; background-color: #00508a; }
  body.an-site #page-container #menu li.alt { background: #006bb0; }
  body.an-site #page-container #menu li.alt > a:is(:link, :visited, :active, :hover), body.an-site #page-container #menu li.alt:hover > a:is(:link, :visited, :active, :hover) { color: #ffffff; background: none; }
  body.an-site #page-container #menu li.alt:hover, body.an-site #page-container #menu li.alt:focus-within { background: #00508a; }
  /* header phone */
  body.an-site #page-container #header .phone em, body.an-site #page-container #header .phone a.tel-link { color: #333333; }
  /* booking box */
  body.an-site #page-container .bookonline strong { color: #333333; }
  body.an-site #page-container #res-booking-form select option { color: #333333; background: #ffffff; }
  /* offer box: dark text on live's orange */
  body.an-site #page-container .special :is(.text, .text p, h3) { color: #2b1b00; }
  body.an-site #page-container .special a:is(:link, :visited, :active, :hover) { color: #2b1b00; }
  /* panels, details, pager, quotes, small text, forms */
  body.an-site #page-container :is(.panel em, .entry .details, blockquote .details, .smalltext, .breadcrumbs, .form td) { color: #666666; }
  body.an-site #page-container :is(.breadcrumbs a, .smalltext a):is(:link, :visited, :active, :hover) { color: #555555; }
  body.an-site #page-container blockquote .highlight { color: #995c00; }
  body.an-site #page-container .paging { color: #555555; }
  body.an-site #page-container .paging a:is(:link, :visited, :active) { color: #444444; }
  body.an-site #page-container :is(.paging a:hover, .paging a:focus, .paging em, .paging em a:is(:link, :visited, :active, :hover)) { color: #ffffff; background-color: #555555; }
  body.an-site #page-container span.options a:is(:link, :visited, :active, :hover) { color: #006bb0; }
  body.an-site #page-container .panel.search h3 { color: #5a5a5a; }
  body.an-site #page-container .panel.search input.clicknclear { color: #595959; }
  body.an-site #page-container .gallery strong a:is(:link, :visited, :active, :hover) { color: #ffffff; }
  /* gallery captions: live draws them on a 70% black PNG over the photo; an opaque strip is AA on any photo (white on #262626, 15:1) */
  body.an-site #page-container .gallery strong { background: #262626; }
  /* footer: live's light blue band behind the link rows is 3.9:1 under white: a deeper blue the full width of the window */
  body.an-site #page-container #footer { background: #004fa7; }
  body.an-site #page-container #footer .linksmenu { background: #00609e; box-shadow: 0 0 0 100vmax #00609e; clip-path: inset(0 -100vmax); }
  body.an-site #page-container #footer a:is(:link, :visited, :active) { color: #ffffff; }
  body.an-site #page-container #footer a:is(:hover, :focus) { color: #ffd27a; }
  body.an-site #page-container #footer em, body.an-site #page-container #footer .tags { color: #bfe3f7; }
  body.an-site #page-container #footer .tags a:is(:link, :visited, :active) { color: #bfe3f7; }
  body.an-site #page-container #footer .tags a:is(:hover, :focus) { color: #ffd27a; }
  body.an-site #page-container #footer a.tel-link:is(:link, :visited, :active) { color: #ffffff; }
  body.an-site #page-container #footer a.tel-link:is(:hover, :focus) { color: #ffd27a; }
  /* a phone number never breaks across two lines (one tap target, read as one number) */
  body.an-site #page-container a.tel-link { white-space: nowrap; }
  /* text that would break out of a narrow column */
  body.an-site #page-container #content :is(h1, h2, h3, h4, p, li, td, blockquote, a) { overflow-wrap: break-word; }
  /* the Facebook like button (kept as live): never wider than its column */
  body.an-site #page-container :is(.fb-like, .fb-like > span, .fb-like iframe, .fb-like-box, .fb-like-box > span, .fb-like-box iframe) { max-width: 100% !important; }
  /* the blog sidebar's Tag Cloud holds only live's empty 10px link (no text, nothing to read or tap, but a focus stop): hidden below 1250 */
  body.an-site #page-container .panel a:empty { display: none; }
  body.an-site #page-container .panel.blog:has(> h3 + a:empty:last-child) { display: none; }
  /* the logo box is reserved before the image arrives (no layout shift) */
  body.an-site #page-container #header .left img { aspect-ratio: 189 / 89; height: auto; }
  /* 3.18c C1: the search term highlight, live's white on #e5a31a (2.2:1): dark text on the same orange (7.3:1) */
  body.an-site #page-container em.highlight { color: #222222; }
  /* 3.18c C2: the map box's Get Directions link (89 x 16) a 24px tap target */
  body.an-site #page-container .map-info-window a { display: inline-block; min-height: 24px; padding: 4px 0; box-sizing: border-box; }
  /* 3.18c C3: numbered lists (the terms clauses): Divi's "inside" numbers sat alone on a line above each clause's block paragraph;
     outside numbers sit beside the clause as at 1250 and up */
  body.an-site #page-container #content ol { list-style-position: outside; padding-left: 2em; }
  /* 3.18c C6: the footer link rows: live's "|" separators wrapped with the links (a line starting with "|"); hidden, as on phones, the
     links spaced by a margin and each kept on one line */
  body.an-site #page-container #footer .linksmenu em { display: none; }
  body.an-site #page-container #footer .linksmenu a { white-space: nowrap; margin: 0 8px; }
}

/* =================== 1170 to 1249: live's layout, the header row widened for the 14px menu =================== */
@media (min-width: 1170px) and (max-width: 1249px) {
  /* live's header is a 960px row with a 750px menu; at 14px the nine items need about 830px: the header row takes 1150px */
  body.an-site #page-container #header .container { width: 1150px; }
  body.an-site #page-container #header .right { width: calc(100% - 207px - 12px); }
  body.an-site #page-container .socialmedia { width: auto; float: right; padding-left: 14px; padding-right: 0; }
  body.an-site #page-container #header .phone { float: right; width: auto; padding-left: 20px; }
  body.an-site #page-container #menu ul { float: right; }
  body.an-site #page-container #menu a:is(:visited, :active, :link) { padding-left: 9px; padding-right: 9px; }
  body.an-site #page-container #menu a.parent:is(:visited, :active, :link) { padding-right: 17px; }
  body.an-site #page-container #menu li ul { width: 230px; }
  /* touch tablets: the first tap on a parent item opens its drop-down (header script adds .ils-sub-open and holds that tap) */
  body.an-site #page-container #menu li.ils-sub-open > ul, body.an-site #page-container #menu li:focus-within > ul { display: block; }
  body.an-site #page-container #menu li.ils-sub-open > a:is(:link, :visited, :active, :hover), body.an-site #page-container #menu li:focus-within > a:is(:link, :visited, :active, :hover) { color: #ffffff; background-color: #006bb0; }
  body.an-site #page-container #menu li ul a:is(:link, :visited, :active) { padding-top: 6px; padding-bottom: 6px; }
  /* booking bar: live's single 998px picture stays; the 14px labels and 16px fields fitted on its line */
  body.an-site #page-container .bookonline strong { width: auto !important; padding-right: 4px; }
  body.an-site #page-container .bookonline input.selectdate { width: 142px; height: 26px; box-sizing: border-box; padding: 2px 4px; vertical-align: middle; }
  body.an-site #page-container #bp_num_of_nights { height: 26px; vertical-align: middle; }
  body.an-site #page-container .special .text { padding-top: 12px; }
  body.an-site #page-container .special .text p { line-height: 18px; margin-top: 4px; }
  /* tap heights in live's layout: the header phone, the sidebar search field and Go, every input button */
  body.an-site #page-container #header .phone a.tel-link { display: inline-block; padding: 3px 0; }
  body.an-site #page-container #header .phone { padding-top: 4px; }
  body.an-site #page-container .panel.search input.clicknclear { height: 28px; box-sizing: border-box; vertical-align: middle; }
  body.an-site #page-container .panel.search input.button { height: 28px; vertical-align: middle; }
  body.an-site #page-container #content input.button { min-height: 28px; }
  body.an-site.an-landing #page-container #header .banner a.tel-link { display: inline-block; padding: 2px 0; }
  /* 3.18c C4: room rows as at 1440: no Divi side borders or cell rule (live has none), and the text and BOOK NOW kept in their own
     column right of the 353px photo (live's 15px gap), however tall the 14px text runs */
  body.an-site #page-container table.rooms { border-left: 0; border-right: 0; }
  body.an-site #page-container table.rooms > tbody > tr > td { border-top: 0; padding: 0 0 20px 368px; }
  body.an-site #page-container .rooms .image { margin: 20px 0 0 -368px; }
}

/* =================== below 1170: the reflow (tablet and phone) =================== */
@media (max-width: 1169px) {
  body.an-site #page-container :is(#container, .container, #content .left, #content .right, #content .content) { width: auto; min-width: 0; }
  body.an-site #page-container .container { max-width: none; }

  /* ---- the hero holder: header first, then the photo, then the booking block, all in the flow ---- */
  body.an-site #page-container #container-outer-bg { display: flex; flex-direction: column; }
  body.an-site #page-container #header { order: -1; position: relative; top: auto; padding: 0; background: #ffffff; border-bottom: 4px solid #007ac8; z-index: 20; }
  body.an-site #page-container #header .container { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: "logo phone social toggle" "menu menu menu menu";
    align-items: center; column-gap: 18px; padding: 10px 24px; }
  body.an-site #page-container #header .container > .clearboth { display: none; }
  body.an-site #page-container #header .left { grid-area: logo; float: none; width: auto; padding: 0; background: none; }
  body.an-site #page-container #header .left img { display: block; width: 160px; }
  body.an-site #page-container #header .right { display: contents; }
  body.an-site #page-container #header .phone { grid-area: phone; justify-self: end; float: none; width: auto; padding: 0; font-size: 16px; line-height: 24px; white-space: nowrap; }
  body.an-site #page-container #header .phone em { font-size: 20px; }
  body.an-site #page-container #header .phone a.tel-link { display: inline-block; padding: 6px 0; }
  body.an-site #page-container #header .socialmedia { grid-area: social; float: none; width: auto; height: auto; padding: 0; display: flex; gap: 6px; }
  body.an-site #page-container #header .socialmedia a { display: block; padding: 1px; }
  body.an-site #page-container #header .socialmedia img { display: block; margin: 0; }
  body.an-site #page-container .ils-menu-toggle { grid-area: toggle; display: inline-flex; align-items: center; gap: 10px; height: 44px; margin: 0; padding: 0 16px; border: 0; border-radius: 4px;
    background: #006bb0; color: #ffffff; font: 16px/44px 'AdventorMedium', Arial, Helvetica, sans-serif; text-transform: uppercase; letter-spacing: 1px; cursor: pointer; }
  body.an-site #page-container .ils-menu-toggle span, body.an-site #page-container .ils-menu-toggle span::before, body.an-site #page-container .ils-menu-toggle span::after {
    display: block; position: relative; width: 18px; height: 2px; background: #ffffff; content: ""; }
  body.an-site #page-container .ils-menu-toggle span::before { position: absolute; top: -6px; }
  body.an-site #page-container .ils-menu-toggle span::after { position: absolute; top: 6px; }
  body.an-site #page-container .ils-menu-toggle:is(:hover, :focus-visible), body.an-site #page-container #header.ils-menu-open .ils-menu-toggle { background: #00508a; color: #ffffff; }
  /* the menu panel (in the flow, so nothing is drawn over the photo or the booking block) */
  body.an-site #page-container #menu { grid-area: menu; display: none; clear: none; margin: 10px -24px -10px; padding: 0; font-size: 17px; text-align: left; background: #006bb0; }
  body.an-site #page-container #header.ils-menu-open #menu { display: block; }
  body.an-site #page-container #menu > ul { float: none; display: block; padding: 0; }
  body.an-site #page-container #menu > .clearleft { display: none; }
  body.an-site #page-container #menu li { float: none; display: block; margin: 0; padding: 0; border-top: 1px solid rgba(255, 255, 255, 0.22); }
  body.an-site #page-container #menu li a:is(:link, :visited, :active, :hover), body.an-site #page-container #menu li:hover > a:is(:link, :visited, :active, :hover),
  body.an-site #page-container #menu li a.parent:is(:link, :visited, :active, :hover), body.an-site #page-container #menu li:hover a.parent:is(:link, :visited, :active, :hover) {
    display: block; padding: 0 24px; line-height: 50px; font-size: 17px; color: #ffffff; background: none; }
  body.an-site #page-container #menu li a:focus-visible { outline-offset: -4px; box-shadow: none; }
  body.an-site #page-container #menu li > a:is(:hover, :focus), body.an-site #page-container #menu li.active > a:is(:link, :visited, :active, :hover) { background: #00508a !important; color: #ffffff; }
  /* live's "#menu ul { float: left; display: inline }" also hits the sub-menus: floated, they shrink to their text and escape their item */
  body.an-site #page-container #menu li ul { position: static; float: none; display: block; width: auto; padding: 0; margin: 0; background: none; }
  body.an-site #page-container #menu li li { border-top: 1px solid rgba(255, 255, 255, 0.14); font-size: 16px; }
  body.an-site #page-container #menu li ul a:is(:link, :visited, :active, :hover), body.an-site #page-container #menu li:hover ul a:is(:link, :visited, :active, :hover) {
    padding: 0 24px 0 44px; line-height: 46px; font-size: 16px; color: #ffffff; background: none; }
  body.an-site #page-container #menu li.alt { background: none; }
  body.an-site #page-container #menu li.alt > a:is(:link, :visited, :active, :hover), body.an-site #page-container #menu li.alt:hover > a:is(:link, :visited, :active, :hover) { background: #ffb43c; color: #3d2a05; }
  body.an-site #page-container #menu li.alt > a:is(:hover, :focus) { background: #ffc64a !important; color: #3d2a05; }

  /* ---- the photo: live's 1680px banner (inner pages) or 1501px home picture, cropped to the window ---- */
  body.an-site #page-container .featureimage { height: 300px; margin-top: 0; background-size: cover !important; background-position: center !important; overflow: hidden; }
  body.an-site #page-container #homefeature img { display: block; width: 100%; height: 100%; object-fit: cover; }
  body.an-site #page-container .noimage { display: none; }

  /* ---- booking block: the Book Online box and the offer as two cards on live's grey ---- */
  body.an-site #page-container #booking { position: static; width: auto; margin: 0; padding: 20px 0; background: #e2e2e2; }
  body.an-site #page-container #booking .container { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); column-gap: 20px; align-items: stretch; height: auto; padding: 0 24px; background: none; }
  body.an-site #page-container #booking .container > .clearboth { display: none; }
  body.an-site #page-container .bookonline { float: none; width: auto; padding: 14px 20px 20px; line-height: normal; background: #ffffff; border-top: 6px solid #007ac8; border-radius: 6px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18); }
  body.an-site #page-container .bookonline h3 { padding: 0; margin: 0 0 12px; text-align: center; font-size: 26px; line-height: 32px; }
  body.an-site #page-container #res-booking-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "l1 l2" "f1 f2" "b b"; column-gap: 14px; row-gap: 6px; }
  body.an-site #page-container #res-booking-form > strong { width: auto !important; padding: 0; text-align: left; font-size: 15px; line-height: 20px; }
  body.an-site #page-container #res-booking-form > strong:first-of-type { grid-area: l1; }
  body.an-site #page-container #res-booking-form > strong:nth-of-type(2) { grid-area: l2; }
  body.an-site #page-container #res-booking-form .datepicker_wrap { grid-area: f1; display: flex; align-items: center; gap: 8px; min-width: 0; }
  body.an-site #page-container #res-booking-form .datepicker_wrap > input, body.an-site #page-container #res-booking-form > input.selectdate { flex: 1 1 auto; width: auto; min-width: 0; height: 46px; margin: 0; padding: 0 12px; box-sizing: border-box; border: 1px solid #767676; border-radius: 3px; color: #333333; background: #ffffff; }
  body.an-site #page-container #res-booking-form > input.selectdate { grid-area: f1; width: 100%; }
  body.an-site #page-container #res-booking-form .datepicker_wrap > img.datepicker_trigger { flex: 0 0 auto; width: 19px; height: 20px; margin: 0; padding: 12px; box-sizing: content-box; border: 1px solid #767676; border-radius: 3px; background: #f4f4f4; cursor: pointer; }
  body.an-site #page-container #bp_num_of_nights { grid-area: f2; width: 100%; height: 46px; margin: 0; padding: 0 36px 0 12px; box-sizing: border-box; border: 1px solid #767676; border-radius: 3px; color: #333333; -webkit-appearance: none; appearance: none;
    background: #ffffff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23333333' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 14px center; }
  body.an-site #page-container .bookonline div.button { grid-area: b; margin: 8px 0 0; }
  body.an-site #page-container .bookonline input.button { display: block; width: 100%; height: 50px; margin: 0; padding: 0 20px; font-size: 20px; line-height: 48px; border: 1px solid #c98a1e; border-radius: 3px; }
  /* the offer card */
  body.an-site #page-container .special { float: none; width: auto; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 18px; align-content: center; padding: 18px 20px; line-height: normal;
    background: #f79b0c; border-top: 6px solid #007ac8; border-radius: 6px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18); }
  body.an-site #page-container .special .image { float: none; width: 175px; align-self: start; box-shadow: 0 0 5px 1px #b06e09; }
  body.an-site #page-container .special .image img { display: block; width: 100%; height: auto; }
  body.an-site #page-container .special .text { float: none; width: auto; padding: 0; }
  body.an-site #page-container .special h3 { margin: 0 0 6px; font-size: 26px; line-height: 30px; }
  body.an-site #page-container .special .text p { margin: 0; line-height: 21px; }

  /* ---- content: the white box, then the sidebar panels two across ---- */
  body.an-site #page-container #container-outer { margin-top: 0; }
  body.an-site.an-landing #page-container #container-outer { margin-top: 0; }
  body.an-site #page-container #content { padding: 24px 24px 0; background: none; }
  body.an-site.an-landing #page-container #content { padding-top: 24px; }
  body.an-site #page-container #content :is(.left, .content, .fullcontent) { float: none; min-height: 0; padding: 20px 24px 24px; }
  body.an-site #page-container #content .right { float: none; margin-top: 24px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; align-items: start; }
  body.an-site #page-container #content .right > * { min-width: 0; margin-top: 0; }
  body.an-site #page-container #content .right > .side:has(> p:only-child > a:only-child > img) { text-align: center; }
  body.an-site #page-container #content :is(img, table, iframe, video, object, embed) { max-width: 100%; }
  body.an-site #page-container #content img[height] { height: auto; }
  body.an-site #page-container #content img[style*="height"] { height: auto !important; }
  body.an-site #page-container #content table[style*="width"] { width: auto !important; }
  body.an-site #page-container #content iframe[width="580"], body.an-site #page-container #content iframe[src*="youtube"] { width: 100%; height: auto; aspect-ratio: 16 / 9; }
  body.an-site #page-container #content h1 { font-size: 28px; line-height: 34px; }
  body.an-site #page-container #content h2 { font-size: 21px; line-height: 27px; }
  /* the search panel (beside nothing on a narrow screen): its own size */
  body.an-site #page-container .panel.search { float: none; width: auto; height: auto; padding: 12px 14px 16px; }
  body.an-site #page-container .panel.search form { display: flex; align-items: center; gap: 10px; }
  body.an-site #page-container .panel.search input.clicknclear { flex: 1 1 auto; min-width: 0; width: auto; height: 44px; margin: 0; padding: 0 12px; box-sizing: border-box; }
  body.an-site #page-container .panel.search input.button { flex: 0 0 auto; height: 44px; padding: 0 20px; font-size: 16px; }
  body.an-site #page-container .panel { padding: 12px 14px; }
  body.an-site #page-container .panel h3 { font-size: 20px; line-height: 24px; }
  body.an-site #page-container .socialwidgets { overflow: hidden; }
  body.an-site #page-container .socialbadges { max-width: 100%; overflow: hidden; }

  /* ---- room list: photo left, text right (3.18c C4: inner padding inside the card's light border) ---- */
  body.an-site #page-container table.rooms, body.an-site #page-container table.rooms > tbody, body.an-site #page-container table.rooms > tbody > tr, body.an-site #page-container table.rooms > tbody > tr > td { display: block; width: auto; }
  body.an-site #page-container table.rooms > tbody > tr > td { display: flow-root; padding: 0 16px 20px; }
  body.an-site #page-container .rooms .image { max-width: 45%; }
  body.an-site #page-container .rooms .image img { width: 100%; height: auto; }

  /* ---- photo galleries (live's 3-across 164px table): a grid of thumbnails at their own size ---- */
  body.an-site #page-container table.gallery, body.an-site #page-container table.gallery > tbody { display: block; width: auto; }
  body.an-site #page-container table.gallery > tbody { display: grid; grid-template-columns: repeat(auto-fill, minmax(172px, 1fr)); gap: 10px; }
  body.an-site #page-container table.gallery > tbody > tr { display: contents; }
  body.an-site #page-container table.gallery td { display: block; width: auto; border: 0; padding: 4px; }
  body.an-site #page-container table.gallery td.none, body.an-site #page-container table.gallery td:empty { display: none; }
  body.an-site #page-container .gallery .gallery-image { width: fit-content; max-width: 100%; margin: 0 auto; }
  body.an-site #page-container .gallery .gallery-image > a.gallery-item { display: block; }
  body.an-site #page-container .gallery .gallery-image img { display: block; max-width: 100%; height: auto; }
  body.an-site #page-container .gallery strong { left: 0; right: 0; width: auto; padding: 3px 6px; box-sizing: border-box; }
  body.an-site #page-container .gallery strong a { display: block; padding: 0; }

  /* ---- forms: live's label tables (search, VIP login, register, reset password): see "VIP and search forms below 1250" ---- */

  /* ---- quotes (reviews), pager ---- */
  body.an-site #page-container blockquote { padding-left: 52px; background-size: 40px auto; }
  body.an-site #page-container .paging .options { margin: 0 16px; }

  /* ---- map ---- */
  body.an-site #page-container .map-wrapper { margin: 24px 0 0; padding: 4px 24px 24px; }
  body.an-site #page-container .map-container { height: 420px; }

  /* ---- footer: link rows as a centred wrap, copyright, then the address lines ---- */
  body.an-site #page-container #footer { margin-top: 24px; padding: 0 0 18px; }
  body.an-site #page-container #footer .container { width: auto; padding: 0 24px; }
  body.an-site #page-container #footer .linksmenu { padding: 14px 0; line-height: 24px; }
  body.an-site #page-container #footer .linksmenu a { display: inline-block; padding: 4px 2px; }
  body.an-site #page-container #footer .tags { padding: 16px 0 6px; line-height: 22px; }
  body.an-site #page-container #footer a.tag, body.an-site #page-container #footer .linksmenu a.tag { display: inline-block; width: 58px; height: 19px; margin: 0 0 0 4px; padding: 0; vertical-align: middle; background-position: center; }
  body.an-site #page-container .vcard { padding: 6px 0 0; line-height: 26px; }
}

/* the hidden landing page (/special/): logo and phone banner on one row, its one-item menu (Home) shown as a bar under them; it has no menu button */
@media (max-width: 1169px) {
  body.an-site.an-landing #page-container #header .container { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "logo banner" "menu menu"; }
  body.an-site.an-landing #page-container #header .banner { grid-area: banner; justify-self: end; text-align: right; }
  body.an-site.an-landing #page-container #header .banner p { padding: 0; }
  body.an-site.an-landing #page-container #header .banner a.tel-link { display: inline-block; padding: 6px 0; }
  body.an-site.an-landing #page-container #menu { display: block; }
}

/* =================== 768 to 1169: tablet details =================== */
@media (min-width: 768px) and (max-width: 1169px) {
  /* 3.18c C4: the room photo 300px in the left 320px of the card; the text and BOOK NOW in their own column beside it */
  body.an-site #page-container table.rooms > tbody > tr > td { padding-left: 336px; }
  body.an-site #page-container .rooms .image { float: left; box-sizing: border-box; width: 300px; max-width: none; margin: 20px 0 4px -320px; }
  /* booking box and offer: two equal cards; the offer photo a little smaller so its text has room */
  body.an-site #page-container #booking .container { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  body.an-site #page-container .special .image { width: 150px; }
  /* 3.18c C7: the sidebar below the content: panels two across, a lone panel the full width, empty boxes gone, and live's 300px
     sidebar photos side by side, centred, in a full-width row */
  body.an-site #page-container #content .right { display: flex; flex-wrap: wrap; align-items: flex-start; column-gap: 24px; }
  body.an-site #page-container #content .right > * { flex: 1 1 calc(50% - 12px); }
  body.an-site #page-container #content .right > .side:not(:has(*)) { display: none; }
  body.an-site #page-container #content .right > :is(.side:has(img), .socialbadges) { flex-basis: 100%; }
  body.an-site #page-container #content .right > .side:has(img) { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; column-gap: 24px; }
}
/* 768 to 959: the two booking cards one above the other (side by side the offer text had about 40px) */
@media (min-width: 768px) and (max-width: 959px) {
  body.an-site #page-container #booking .container { grid-template-columns: minmax(0, 1fr); row-gap: 16px; }
  body.an-site #page-container #res-booking-form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.9fr); grid-template-areas: "l1 l2 ." "f1 f2 b"; align-items: end; }
  body.an-site #page-container .bookonline div.button { margin: 0; }
  body.an-site #page-container .bookonline input.button { height: 46px; line-height: 44px; font-size: 18px; }
  body.an-site #page-container .special { grid-template-columns: 175px minmax(0, 1fr); }
  body.an-site #page-container .special .image { width: 175px; }
}

/* =================== phone: below 768 =================== */
@media (max-width: 767px) {
  body.an-site #page-container #header .container { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "logo toggle" "phone social" "menu menu"; column-gap: 12px; row-gap: 4px; padding: 8px 16px 6px; }
  body.an-site #page-container #header .left img { width: 128px; }
  body.an-site #page-container #header .phone { justify-self: start; font-size: 15px; }
  body.an-site #page-container #header .phone em { font-size: 19px; }
  body.an-site #page-container #header .socialmedia { justify-self: end; }
  body.an-site #page-container #menu { margin: 6px -16px -6px; }
  body.an-site #page-container #menu li a:is(:link, :visited, :active, :hover), body.an-site #page-container #menu li:hover > a:is(:link, :visited, :active, :hover),
  body.an-site #page-container #menu li a.parent:is(:link, :visited, :active, :hover), body.an-site #page-container #menu li:hover a.parent:is(:link, :visited, :active, :hover) { padding: 0 16px; }
  body.an-site #page-container #menu li ul a:is(:link, :visited, :active, :hover), body.an-site #page-container #menu li:hover ul a:is(:link, :visited, :active, :hover) { padding: 0 16px 0 36px; }

  body.an-site #page-container .featureimage { height: 190px; }
  body.an-site #page-container #homefeature { height: 220px; }

  body.an-site #page-container #booking { padding: 14px 0 16px; }
  body.an-site #page-container #booking .container { grid-template-columns: minmax(0, 1fr); row-gap: 14px; padding: 0 16px; }
  body.an-site #page-container .bookonline { padding: 10px 16px 18px; }
  body.an-site #page-container .bookonline h3 { font-size: 24px; line-height: 30px; margin-bottom: 10px; }
  body.an-site #page-container #res-booking-form { grid-template-columns: minmax(0, 1fr); grid-template-areas: "l1" "f1" "l2" "f2" "b"; }
  body.an-site #page-container #res-booking-form > strong:nth-of-type(2) { margin-top: 8px; }
  body.an-site #page-container .bookonline input.button { height: 52px; }
  body.an-site #page-container .special { grid-template-columns: 120px minmax(0, 1fr); column-gap: 14px; padding: 14px 14px 16px; }
  body.an-site #page-container .special .image { width: 114px; }
  body.an-site #page-container .special h3 { font-size: 21px; line-height: 26px; }

  body.an-site #page-container #content { padding: 16px 16px 0; }
  body.an-site #page-container #content :is(.left, .content, .fullcontent) { padding: 16px 16px 20px; }
  body.an-site #page-container #content .right { grid-template-columns: minmax(0, 1fr); margin-top: 16px; }
  body.an-site #page-container #content h1 { font-size: 25px; line-height: 31px; }
  body.an-site #page-container #content h2 { font-size: 20px; line-height: 26px; }
  body.an-site #page-container #content :is(p, h1, h2, h3, h4, li, td) { text-align: left !important; }
  /* 3.18c C7: live's 300px sidebar photos centred in the column (they sat left with a strip at the right) */
  body.an-site #page-container #content .right .side p:is(:has(> img), :has(> a > img)) { text-align: center !important; }

  /* room cards: the room title first, then its photo, text and Book Now (the section heading stays directly above the first title) */
  body.an-site #page-container table.rooms > tbody > tr > td { display: flex; flex-direction: column; align-items: flex-start; padding: 0 12px 20px; }
  body.an-site #page-container table.rooms > tbody > tr > td > h2 { order: -1; margin: 22px 0 10px; }
  body.an-site #page-container table.rooms > tbody > tr > td > * { max-width: 100%; }
  body.an-site #page-container .rooms .image { float: none; max-width: 100%; width: fit-content; margin: 0 0 6px; box-sizing: border-box; }
  body.an-site #page-container table.gallery > tbody { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  body.an-site #page-container table.gallery td { padding: 3px; }

  /* blog list and post photos */
  body.an-site #page-container .list .entry > a > img.image, body.an-site #page-container .list .entry img.image { float: left; width: 110px; height: auto; margin: 4px 14px 8px 0; }
  body.an-site.single-post #page-container .entry > a.gallery-item img.image { float: none; display: block; width: auto; max-width: 100%; margin: 4px 0 14px; }

  body.an-site #page-container blockquote { padding-left: 42px; background-size: 32px auto; }
  body.an-site #page-container .paging { text-align: left; }

  body.an-site #page-container .map-wrapper { padding: 4px 16px 18px; }
  body.an-site #page-container .map-container { height: 320px; }
  /* the map's info box (300px plus padding, centred over the map) narrower than the screen at 320 */
  body.an-site #page-container .map-info { width: auto; max-width: calc(100% - 40px); box-sizing: border-box; }
  body.an-site #page-container .map-info-window { width: auto; min-height: 0; }

  body.an-site #page-container #footer .container { padding: 0 16px; }
  body.an-site #page-container #footer .linksmenu em { display: none; }
  body.an-site #page-container #footer .linksmenu br { display: none; }
  body.an-site #page-container #footer .linksmenu a { margin: 0 8px; }
  /* the address: one item per line (the   spacers between them shrink to nothing) */
  body.an-site #page-container .vcard { font-size: 0; }
  body.an-site #page-container .vcard > :is(span, a) { display: block; width: fit-content; margin: 0 auto; font-size: 14px; }
  body.an-site #page-container .vcard .org { font-weight: bold; }
}

/* =================== narrow phones (320 to 379) =================== */
@media (max-width: 379px) {
  body.an-site #page-container #header .socialmedia { gap: 2px; }
  body.an-site #page-container .special { grid-template-columns: 96px minmax(0, 1fr); }
  body.an-site #page-container .special .image { width: 90px; }
}

/* =================== contact and review forms below 1250 ===================
   One column: a visible label over each full-width field (the placeholders, the only labels on live, are hidden), a dark asterisk on
   required fields and before "Required fields", 48px fields with a 4.5:1 border, the sum question and its box on one line, then
   Submit (full width below 768). Divi's button arrow and its hover padding jump are switched off. */
@media (max-width: 1249px) {
  body.an-site #page-container .an-contact-form :is(.et_pb_contact, .et_pb_contact_form) { float: none; width: auto; margin: 0 !important; padding: 0 !important; }
  body.an-site #page-container .an-contact-form .et_pb_contact_form .et_pb_contact_field { float: none !important; clear: both; width: auto !important; margin: 0 0 14px !important; padding: 0 !important; }
  body.an-site #page-container .an-contact-form .et_pb_contact_field .et_pb_contact_form_label { display: block !important; position: static; margin: 0 0 5px; padding: 0; font: bold 15px/20px Arial, Helvetica, sans-serif; letter-spacing: 0; color: #333333; text-align: left; }
  body.an-site #page-container .an-contact-form .et_pb_contact_field:has(> [data-required_mark="required"]) .et_pb_contact_form_label::after { content: " *"; color: #995c00; }
  body.an-site #page-container p.ils-required-note em.required::before { content: "* "; color: #995c00; font-style: normal; }
  body.an-site #page-container .an-contact-form .et_pb_contact_field .input { display: block; box-sizing: border-box; width: 100% !important; max-width: none; height: 48px; min-height: 0; margin: 0;
    padding: 0 12px; font: 16px/22px Arial, Helvetica, sans-serif; color: #333333; background: #ffffff; border: 1px solid #767676; border-radius: 0; }
  body.an-site #page-container .an-contact-form .et_pb_contact_field textarea.input { height: 150px; padding: 10px 12px; resize: vertical; }
  body.an-site #page-container .an-contact-form .input::placeholder { color: transparent; opacity: 0; }
  body.an-site #page-container .an-contact-form .et_contact_bottom_container { display: flex !important; flex-wrap: wrap; align-items: center; gap: 14px 20px; float: none !important; clear: both;
    width: auto; margin: 4px 0 0 !important; padding: 0 !important; text-align: left; }
  body.an-site #page-container .an-contact-form .et_contact_bottom_container .et_pb_contact_right { display: block; float: none; width: auto; min-width: 0; height: auto; margin: 0; padding: 0; text-align: left; background: none; }
  body.an-site #page-container .an-contact-form .et_pb_contact_right p { display: flex; align-items: center; column-gap: 8px; margin: 0 !important; padding: 0 !important; font: 16px/22px Arial, Helvetica, sans-serif; color: #333333; white-space: nowrap; }
  body.an-site #page-container .an-contact-form .et_pb_contact_right p .et_pb_contact_captcha { display: block; box-sizing: border-box; flex: 0 0 auto; width: 76px; max-width: none; height: 48px; margin: 0; padding: 0 10px;
    font-size: 16px; color: #333333; background: #ffffff; border: 1px solid #767676; border-radius: 0; }
  body.an-site #page-container .et_pb_section .an-contact-form.et_pb_contact_form_container.et_pb_module .et_pb_button.et_pb_contact_submit,
  body.an-site #page-container .et_pb_section .an-contact-form.et_pb_contact_form_container.et_pb_module .et_pb_button.et_pb_contact_submit:is(:hover, :focus, :active) {
    display: block; box-sizing: border-box; height: 48px; min-width: 140px; margin: 0 !important; padding: 0 28px !important; font-family: 'AdventorMedium', Arial, Helvetica, sans-serif !important;
    font-size: 18px !important; font-weight: normal !important; line-height: 46px !important; text-transform: uppercase; letter-spacing: 0 !important; border: 1px solid #c98a1e !important; border-radius: 3px !important; }
  body.an-site #page-container .et_pb_section .an-contact-form.et_pb_contact_form_container.et_pb_module .et_pb_button.et_pb_contact_submit::after { display: none !important; content: none !important; }
  body.an-site #page-container .an-contact-form .et_contact_error { border-color: #c40000 !important; }
  body.an-site #page-container .an-contact-form .et-pb-contact-message { font-size: 16px; line-height: 1.5; }
  /* 3.18c C5: the unsubscribe form sat 0px under its intro paragraph */
  body.an-site #page-container #content p + .an-contact-form.et_pb_module { margin-top: 16px; }
}
@media (max-width: 767px) {
  body.an-site #page-container .et_pb_section .an-contact-form.et_pb_contact_form_container.et_pb_module .et_pb_button.et_pb_contact_submit,
  body.an-site #page-container .et_pb_section .an-contact-form.et_pb_contact_form_container.et_pb_module .et_pb_button.et_pb_contact_submit:is(:hover, :focus, :active) { flex: 1 0 100%; width: 100%; height: 52px; font-size: 20px !important; line-height: 50px !important; }
}

/* =================== VIP and search forms below 1250 (3.18c C5) ===================
   Live's label tables (table.form: /search, /vip/login, /vip/register, /vip/resetpass) drawn like the contact form: a bold label over
   each full-width 48px field, the dark asterisk after required labels (live's pale star picture dropped, so every field is the same
   width), hint lines under their field, the button on its own line (full width on phones) and "* Required fields" under it. */
@media (max-width: 1249px) {
  body.an-site #page-container #content table.form, body.an-site #page-container #content table.form > tbody, body.an-site #page-container #content table.form > tbody > tr,
  body.an-site #page-container #content table.form > tbody > tr > :is(th, td) { display: block; width: auto; }
  body.an-site #page-container #content table.form { margin: 16px 0 8px; border: 0; }
  body.an-site #page-container #content table.form > tbody > tr > th { margin: 0 0 5px; padding: 0; background: none; border: 0; font: bold 15px/20px Arial, Helvetica, sans-serif; color: #333333; text-align: left; }
  body.an-site #page-container #content table.form > tbody > tr > td { padding: 0 0 14px; border: 0; background: none; text-align: left; }
  body.an-site #page-container #content table.form > tbody > tr:has(> td.required input:is([type="text"], [type="password"], [type="email"])) > th::after { content: " *"; color: #995c00; }
  body.an-site #page-container #content table.form > tbody > tr:not(:has(> td :is(input:is([type="text"], [type="password"], [type="email"]), textarea, select))) > th { display: none; }
  body.an-site #page-container #content table.form :is(input:is([type="text"], [type="password"], [type="email"]), textarea, select) { display: block; box-sizing: border-box; width: 100%; height: 48px; margin: 0;
    padding: 0 12px; font: 16px/22px Arial, Helvetica, sans-serif; font-style: normal; color: #333333; background: #ffffff; border: 1px solid #767676; border-radius: 0; }
  body.an-site #page-container #content table.form textarea { height: 140px; padding: 10px 12px; }
  body.an-site #page-container #content table.form > tbody > tr > td > em { display: block; float: none; margin: 6px 0 0; font-style: normal; color: #555555; }
  body.an-site #page-container #content table.form :is(em.required, td[align="right"] > em)::before { content: "* "; color: #995c00; }
  body.an-site #page-container #content table.form > tbody > tr > td > em.required { margin-top: 12px; }
  body.an-site #page-container #content table.form :is(em.required, td[align="right"] > em) { font-style: italic; }
  body.an-site #page-container #content table.form > tbody > tr > td > input.button { display: block; box-sizing: border-box; height: 48px; min-width: 140px; margin: 0; padding: 0 28px;
    font-size: 18px; line-height: 46px; text-transform: uppercase; border: 1px solid #c98a1e; border-radius: 3px; }
  /* the search form: its field and Search button on one line */
  body.an-site #page-container #content table.form table, body.an-site #page-container #content table.form table > tbody { display: block; width: 100%; border: 0; }
  body.an-site #page-container #content table.form table tr { display: flex; align-items: center; gap: 10px; }
  body.an-site #page-container #content table.form table td { display: block; padding: 0; border: 0; }
  body.an-site #page-container #content table.form table td:first-child { flex: 1 1 auto; min-width: 0; }
  body.an-site #page-container #content table.form table input.button { height: 48px; padding: 0 22px; font-size: 16px; }
}
@media (max-width: 767px) {
  body.an-site #page-container #content table.form > tbody > tr > td > input.button { width: 100%; height: 52px; font-size: 20px; line-height: 50px; }
}

/* =================== body-appended widgets below 1250: the booking calendar and the photo pop-up =================== */
@media (max-width: 1249px) {
  /* live: white on #777 day names (4.5:1), #888 past days on #eee (3.1:1), 11px control text */
  body.an-site #datepicker_div { width: 252px !important; z-index: 100001 !important; }
  body.an-site #datepicker_div .datepicker_oneMonth { width: 100%; }
  /* the Clear / Close row: white on live's #0092ba is 3.6:1; the footer blue #004fa7 (7.9:1) */
  body.an-site #datepicker_div .datepicker_control { background: #004fa7; }
  body.an-site #datepicker_div :is(.datepicker_control, .datepicker_links, .datepicker_header) { font-size: 14px; }
  body.an-site #datepicker_div :is(.datepicker_control, .datepicker_links) a { display: inline-block; line-height: 24px; cursor: pointer; }
  body.an-site #datepicker_div .datepicker_header { height: auto; background: #333333; }
  body.an-site #datepicker_div .datepicker_header select { font-size: 16px; color: #ffffff; -webkit-appearance: none; appearance: none; border: 0; border-radius: 0;
    background: #333333 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23ffffff' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 4px center; padding-right: 20px; }
  body.an-site #datepicker_div .datepicker_header select { height: 28px; }
  body.an-site #datepicker_div .datepicker_header select option { color: #333333; background: #ffffff; }
  body.an-site #datepicker_div :is(.datepicker_titleRow, .datepicker_titleRow .datepicker_weekEndCell, .datepicker_weekCol) { background: #595959; }
  body.an-site #datepicker_div td { font-size: 15px; }
  body.an-site #datepicker_div td a { line-height: 28px; cursor: pointer; }
  body.an-site #datepicker_div .datepicker_daysRow { color: #555555; }
  body.an-site #datepicker_div .datepicker_unselectable { color: #555555; }
  body.an-site #datepicker_div .datepicker_daysCell a:is(:hover, :focus) { color: #000000; }
  body.an-site #datepicker_div .datepicker_status { font-size: 14px; color: #333333; }
}
@media (max-width: 767px) {
  body.an-site #datepicker_div { width: calc(100vw - 32px) !important; left: 16px !important; font-size: 16px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35); }
  body.an-site #datepicker_div .datepicker_control a, body.an-site #datepicker_div .datepicker_links a { display: block; padding: 0 12px !important; line-height: 42px; font-size: 15px; }
  body.an-site #datepicker_div .datepicker_control, body.an-site #datepicker_div .datepicker_links { padding: 0; }
  body.an-site #datepicker_div .datepicker_header select { height: 36px; padding: 0 20px 0 6px; }
  body.an-site #datepicker_div td { font-size: 16px !important; height: 42px; line-height: 42px; }
  body.an-site #datepicker_div td a { line-height: 42px; }
}

/* =================== blog post body lists below 1250 (3.18c recheck R1) =================== */
/* Posts have no .et-l--body wrapper, so Divi's "ol, ul { list-style: none }" left their lists without bullets or numbers below 1250. */
@media (max-width: 1249px) {
  body.an-site #page-container #content .entry .summary :is(ul, ol) { padding-left: 2em; margin: 0 0 1em; }
  body.an-site #page-container #content .entry .summary ul { list-style: disc outside; }
  body.an-site #page-container #content .entry .summary ol { list-style: decimal outside; }
  body.an-site #page-container #content .entry .summary li { margin-bottom: 6px; }
}