/* an-design.css - Anacapri Apartments DESKTOP parity layer (Stage 4, 1250px and up). Loads after an-live.css (live general.css scoped under
   body.an-site #page-container), an-plugins.css (the body-appended calendar and photo pop-up, unscoped) and an-base.css (Stage 3's structural
   minimum: content-box, no .container cap, no 58px top padding, static header wrappers), and before an-mobile.css (everything below 1250px).
   Every rule sits inside @media (min-width: 1250px), so the phone and tablet design is untouched. Each rule undoes something Divi adds that
   live iLaunch never had, or adds an accessibility behaviour that does not change the look. Started from kit ilaunch-divi-parity.template.css
   (expanded: build/stage4/an-design.kit-expanded.css) and Aruba Surf's as-design.css (same older iLaunch skin); every value below is this
   site's own, read from live general.css and measured on live with design_pairs.js at 1440. */

@media (min-width: 1250px) {

/* ---- 1. Divi's own .container is position:relative; live's .container is static (live's "#header .container" keeps its own rule) ---- */
body.an-site :where(#page-container) .container { position: static; }

/* ---- 2. browser-default type and spacing that live's CSS relies on (one id plus :where, above Divi's class rules and below every scoped
   live rule, so live still wins where it sets its own value) ---- */
/* Divi sets body { font-weight: 500 } and greyscale smoothing; live is 400 with the browser's own smoothing */
body.an-site { font-weight: normal; -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; }
/* Divi's body class et_cover_background stretches the 100px body texture (skin/images/body-bg.png) over the whole page ("cover", top
   centre), which blurs it; live tiles it at its own size from the top left (Divi marks its rule !important) */
body.an-site.et_cover_background { background-size: auto !important; background-position: 0 0 !important; background-repeat: repeat !important; background-attachment: scroll; }
body.an-site #page-container :where(p) { padding-bottom: 0; margin-bottom: 1em; }
body.an-site #page-container :where(ul, ol) { padding: 0 0 0 40px; margin: 1em 0; line-height: inherit; list-style-position: outside; }
body.an-site #page-container :where(ul) { list-style-type: disc; }
body.an-site #page-container :where(ol) { list-style-type: decimal; }
body.an-site #page-container :where(ul, ol) :where(ul, ol) { margin-top: 0; margin-bottom: 0; }
body.an-site #page-container :where(ul ul) { list-style-type: circle; }
body.an-site #page-container :where(ul ul ul) { list-style-type: square; }
body.an-site #page-container :where(li) { line-height: inherit; }
body.an-site #page-container :where(h1, h2, h3, h4, h5, h6) { padding-bottom: 0; line-height: inherit; font-weight: bold; }
body.an-site #page-container :where(h4) { font-size: 1em; }
body.an-site #page-container :where(h1) { margin: 0.67em 0; }
body.an-site #page-container :where(h2) { margin: 0.83em 0; }
body.an-site #page-container :where(h3) { margin: 1em 0; }
body.an-site #page-container :where(h4) { margin: 1.33em 0; }
body.an-site #page-container :where(h5) { font-size: 0.83em; margin: 1.67em 0; color: inherit; line-height: inherit; }
body.an-site #page-container :where(blockquote) { margin: 1em 40px; padding: 0; }
body.an-site #page-container :where(dl) { margin: 1em 0; }
body.an-site #page-container :where(dd) { margin-left: 40px; }
body.an-site #page-container :where(h6) { font-size: 0.67em; margin: 2.33em 0; font-weight: bold; color: inherit; line-height: inherit; }
body.an-site #page-container :where(strong, b) { font-weight: bolder; }
/* Divi colours every <a> #2ea3f2; live colours only a:link, so name anchors (a#top) inherit */
body.an-site :where(#page-container a:not([href])) { color: inherit; }

/* ---- 3. Divi's content-table look is not on live: browser defaults, honouring the width / cellpadding / cellspacing / align attributes ---- */
body.an-site #page-container :where(table) { border: 0; margin: 0; width: auto; text-align: start; border-collapse: separate; border-spacing: 2px; }
body.an-site #page-container :where(table[width="100%"]) { width: 100%; }
body.an-site #page-container :where(table[cellspacing="0"]) { border-spacing: 0; }
body.an-site #page-container :where(table[cellspacing="5"]) { border-spacing: 5px; }
body.an-site #page-container :where(table[align="center"]) { margin-left: auto; margin-right: auto; }
body.an-site #page-container :where(tr td, tr th) { border-top: 0; padding: 1px; text-align: start; }
body.an-site #page-container :where(table[cellpadding="0"] td, table[cellpadding="0"] th) { padding: 0; }
body.an-site #page-container :where(table[cellpadding="5"] td, table[cellpadding="5"] th) { padding: 5px; }

/* ---- 4. images: Divi caps images at max-width 100%; live does not ---- */
body.an-site #page-container #content :where(img) { max-width: none; }
/* the home hero photo is 1501 x 407 (width and height attributes); live draws it at that size, so at 1440 it runs 61px past the window and
   live scrolls sideways (scrollWidth 1501). Same photo size and place here; the overflow is clipped so the page does not scroll sideways
   (DELIBERATE, design-diff.md). */
body.an-site #page-container #homefeature { overflow: hidden; }
body.an-site #page-container #homefeature img { max-width: none; height: 407px; }

/* ---- 4b. live's doctype (XHTML 1.0 Transitional with a system id) puts Chrome in limited-quirks mode, where a line that holds no text gets
   no line-height strut: an image or button alone on a line is exactly its own height. Here (HTML5 doctype) every such line also carries
   the 20px strut, which adds a 4 to 13px gap under lone images and buttons (logo 98 -> 103, offer photo 118 -> 122, booking Book Now row
   23 -> 36, the dead Facebook widgets 0 -> 20). Lone images sit on the line's bottom instead of its baseline (same pixels, no gap), and the
   text-less button rows and dead widgets get no strut. ---- */
body.an-site #page-container :where(img:only-child) { vertical-align: bottom; }
body.an-site #page-container #booking .bookonline div.button { line-height: 0; }
/* a line whose only content is one inline element (a "View More" / "Read More" button link, the "Posted in" line of a blog panel entry): on
   live it is exactly that element's own line box. The button wrappers take the button's own font, so the strut matches it; the blog panel
   entries drop the strut and give their children back the panel's "line-height: normal" (live: .panel li). */
body.an-site #page-container div.button:has(> a.more:only-child) { font-family: 'AdventorMedium', Arial, Helvetica, sans-serif; font-size: 11px; }
body.an-site #page-container .panel li:has(> em) { line-height: 0; }
body.an-site #page-container .panel li:has(> em) > :is(a, em, strong, span) { line-height: normal; }
/* the Facebook Like button and Like box (dead plugins: zero-size iframes on live, nothing drawn): their lines get no strut either, so the
   blocks keep live's size (Like row 11px: padding and rule only; Like box 0px but not empty, so its 15px margins do not collapse) */
body.an-site #page-container :is(.socialwidgets, .socialbadges) { line-height: 0; }
/* the last block of the content area (the map box on /contact and /location) has a 15px bottom margin that, on live, collapses into the
   footer's 20px top margin; here Divi's section wrapper keeps it, so the footer sat 15px lower */
body.an-site #page-container #content > :last-child { margin-bottom: 0; }
/* the hint under a field of live's table forms (VIP register) wraps onto a line of its own: no strut on live */
body.an-site #page-container .form td > em:not(.required) { vertical-align: top; }
/* a "Read More" link alone on its line (blog list entries): on live the line is the link's own box */
body.an-site #page-container .list .entry a.more { vertical-align: top; }

/* ---- 5. booking calendar: appended to <body>, outside #page-container; Divi's global border-box still reaches it (browser defaults, as
   on live) ---- */
body.an-site #datepicker_div, body.an-site #datepicker_div * { box-sizing: revert; }
/* live's general.css "td { color: #333333 }" and "select { padding: 2px 6px; font: 12px Arial }" reach the calendar on live (they were ported
   under #page-container here); the calendar's own class rules still win over these (zero specificity) */
:where(body.an-site #datepicker_div td) { color: #333333; }
body.an-site #datepicker_div select { padding: 2px 6px; font-family: Arial, Helvetica, sans-serif; font-size: 12px; }
/* the month and year lists are alone on their line: no strut on live (limited-quirks, see 4b), so they sit at its top */
body.an-site #datepicker_div .datepicker_header select { vertical-align: top; }
/* the day table: live's cellspacing 0 in the separate border model, so every day cell keeps its own 1px border (Divi collapses them) */
body.an-site #datepicker_div table.datepicker { border-collapse: separate; border-spacing: 0; }
/* the month bar: live's general.css "#004FA7" loads after the plugin's own "#0092ba" on live; here the plugin file loads last */
body.an-site #datepicker_div .datepicker_control { background: #004fa7; }

/* ---- 6. photo pop-up (fancybox): appended to <body> too; live's pieces are content-box ---- */
body.an-site #fancybox-wrap, body.an-site #fancybox-wrap *, body.an-site #fancybox-tmp, body.an-site .fancy-bg { box-sizing: content-box; }
/* live's general.css loads AFTER the fancybox stylesheet and shows the previous / next arrows all the time (not only on hover) and a 14px
   centred caption; here an-plugins.css loads after an-live.css, so the plugin's "left: -9999px" and 12px won. Live's order, from 1250 up. */
body.an-site #fancybox-left-ico { left: 20px; }
body.an-site #fancybox-right-ico { right: 20px; left: auto; }
body.an-site #fancybox-title { text-align: center; font-size: 14px; }
/* live's a:link colour reaches the pop-up's arrow links; the close button has no href and takes the text colour, as on live */
body.an-site #fancybox-wrap a[href] { color: #007ac8; }
body.an-site #fancybox-wrap a:not([href]) { color: inherit; }

/* ---- 7. keyboard focus. Divi ships ":focus { outline: 0 }" and "a, abbr, ... { outline: 0 }", which hides every focus ring; live shows the
   browser's own ring. This gives back exactly that ring (low specificity, so any live "outline: none" still wins). The drop-downs (Local
   Info, Invest/Rent, Contact Us) also open while one of their links has keyboard focus (live opens them on hover only, so keyboard users
   could not reach the sub-pages). ---- */
body.an-site :focus-visible { outline: revert; }
/* the keyless map (an iframe, Stage 3 port; live's broken map was not one) takes keyboard focus as a whole: give it the browser's own ring */
body.an-site #page-container iframe:focus { outline: auto 1px #101010; outline-offset: 0; }
body.an-site #page-container #nav li:focus-within > ul { display: block; }
body.an-site #page-container #nav li:focus-within { z-index: 2; }

/* ---- 8. phone numbers: live shows them as plain text; here they are explicit tel: links (class tel-link, written by the build; the fax
   stays plain) that keep the surrounding text exactly, with no underline, in every state, so 1250 and up is pixel-identical to live ---- */
body.an-site #page-container a.tel-link[href^="tel:"], body.an-site #page-container a.tel-link[href^="tel:"]:is(:link, :visited, :hover, :active, :focus),
body.an-site a[x-apple-data-detectors] { color: inherit !important; text-decoration: none !important; font: inherit; }

/* ---- 8b. the search results pager: live's /search shows the same pager (its own .paging look, #808080 on #efefef) whenever a search
   finds more than 20 results, so the dev pager keeps live's look unchanged (the round 5 AA grey override is gone). ---- */

/* ---- 9. contact and review forms. Live's forms are table.form: a 155px #efefef label column (2px white rule under each label), a field
   column with a 2px #efefef rule under each row, 377 x 28 fields (textarea 377 x 92), the required star 390px into the field cell, a code
   row (77px: picture code, box and two-line hint), the yellow SUBMIT row (35px) and a "Required fields" row (32px); 567px wide, centred.
   Here they are Divi contact-form modules (class an-contact-form) drawn as the same table with no markup change: every row keeps live's
   height and every field live's box. The sum question replaces live's picture code (Stage 3, DELIBERATE); the space of live's two-line hint
   is kept, so everything below sits where live has it. ---- */
body.an-site #page-container .an-contact-form { --an-row: linear-gradient(#efefef, #efefef) no-repeat 0 0 / 155px calc(100% - 2px), linear-gradient(#efefef, #efefef) no-repeat 155px 100% / calc(100% - 155px) 2px;
  --an-star: url(/wp-content/uploads/ilaunch/skin/images/icon-required.png) no-repeat 545px 7px; }
body.an-site #page-container .et_pb_section .an-contact-form.et_pb_contact_form_container.et_pb_module { width: 567px; max-width: none; margin: 15px auto 0 !important; padding: 0; }
body.an-site #page-container .an-contact-form :is(.et_pb_contact, .et_pb_contact_form) { margin: 0 !important; padding: 0 !important; float: none; width: auto; }
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 !important; padding: 5px 30px 7px 160px !important; position: relative; background: var(--an-row); }
body.an-site #page-container .an-contact-form .et_pb_contact_form .et_pb_contact_field:has(> [data-required_mark="required"]) { background: var(--an-star), var(--an-row); }
body.an-site #page-container .an-contact-form .et_pb_contact_field .et_pb_contact_form_label { display: flex !important; align-items: center; position: absolute; left: 0; top: 0; bottom: 2px; box-sizing: content-box; width: 140px; margin: 0; padding: 5px 10px 5px 5px; font: normal 14px/20px Arial, Helvetica, sans-serif; color: #333333; text-align: left; }
body.an-site #page-container .an-contact-form .et_pb_contact_field .input { display: block; box-sizing: border-box; width: 377px; height: 28px; min-height: 0; margin: 0; padding: 5px; border: 1px solid #bbbbbb; border-radius: 0; background: #ffffff; font: 14px Arial, Helvetica, sans-serif; line-height: normal; color: #464646; box-shadow: none; }
body.an-site #page-container .an-contact-form .et_pb_contact_field textarea.input { height: 92px; resize: both; }
body.an-site #page-container .an-contact-form .input::placeholder { color: transparent; opacity: 0; }
/* the sum row (77px, as live's code row) and the SUBMIT row (35px) */
body.an-site #page-container .an-contact-form .et_contact_bottom_container { display: block !important; float: none !important; clear: both; width: auto; margin: 0 !important; padding: 0 !important; text-align: left; background: linear-gradient(#ffffff, #ffffff) no-repeat 0 75px / 155px 2px, var(--an-row); }
body.an-site #page-container .an-contact-form .et_contact_bottom_container .et_pb_contact_right { display: block; float: none; box-sizing: content-box; width: auto; height: 65px; margin: 0; padding: 5px 30px 7px 160px; text-align: left; background: var(--an-row); }
body.an-site #page-container .an-contact-form:has([data-id="comments"]) .et_contact_bottom_container .et_pb_contact_right { background: var(--an-star), var(--an-row); }
body.an-site #page-container .an-contact-form .et_pb_contact_right p { display: flex; align-items: center; column-gap: 4px; height: 28px; margin: 0 !important; padding: 0 !important; font: 14px/20px Arial, Helvetica, sans-serif; color: #333333; }
body.an-site #page-container .an-contact-form .et_pb_contact_right p .et_pb_contact_captcha { display: block; box-sizing: border-box; width: 82px; max-width: none; height: 28px; margin: 0 0 0 6px; padding: 5px; border: 1px solid #bbbbbb; border-radius: 0; background: #ffffff; font: 14px Arial, Helvetica, sans-serif; color: #464646; text-align: left; }
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 {
  display: inline-block; float: none; position: static; box-sizing: border-box; width: auto; height: auto; margin: 5px 0 7px 160px !important; padding: 3px 15px !important;
  border: 1px solid #da9220 !important; border-radius: 0 !important; background: linear-gradient(to bottom, #ffc64a 0%, #ffa925 100%) !important; color: #67490e !important;
  box-shadow: inset 0 0 1px 0 #ffe06e; font-family: 'AdventorMedium', Arial, Helvetica, sans-serif !important; font-size: 12px !important; font-weight: normal !important;
  line-height: normal !important; letter-spacing: normal !important; text-transform: uppercase !important; text-shadow: 1px 1px 0 #ffd944; text-decoration: none; transition: none; cursor: pointer; }
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:hover { background: #ffc64a !important; padding: 3px 15px !important; border: 1px solid #da9220 !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; }
/* "Required fields": its own 32px row with the star; position: relative, or the Divi form box (positioned) paints over it and takes its clicks */
body.an-site #page-container p.ils-required-note { position: relative; box-sizing: content-box; width: 377px; height: 20px; margin: 0 auto 15px; padding: 5px 30px 7px 160px; line-height: 20px; text-align: right;
  background: url(/wp-content/uploads/ilaunch/skin/images/icon-required.png) no-repeat 545px 7px, linear-gradient(#efefef, #efefef) no-repeat 0 0 / 155px calc(100% - 2px), linear-gradient(#efefef, #efefef) no-repeat 155px 100% / calc(100% - 155px) 2px; }
body.an-site #page-container p.ils-required-note em.required { float: right; font-size: 11px; font-style: normal; line-height: 20px; color: #999999; }

}