/*
 * Link styles for V4 (atomic) paragraphs and headings. Elementor's atomic elements reset links
 * (`.e-paragraph-base a, .e-heading-base a { all: unset }`), and atomic custom CSS is licence-gated, so the
 * V3 link look lives here: kit link colour, underline, focus ring. Specificity is raised with `.elementor`
 * so it beats the reset. Declarations match the V3 text-editor links (see
 * audit/03-elementor/convert-reports/CUSTOM-CSS.md).
 */
.elementor .e-paragraph-base a:not(.e-paragraph-link-base):not(.e-heading-link-base),
.elementor .e-heading-base a:not(.e-paragraph-link-base):not(.e-heading-link-base) {
	/* Inline links only. Whole-element links (a.e-heading-link-base / a.e-paragraph-link-base: badges, card titles,
	   trail names) keep the element's own colour, as on the live site (visual audit 2026-11-06). */
	color: var(--e-global-color-6115d92, #a85430);
	/* Visual audit 2026-11-05: the live site's V3 text links are NOT underlined (colour only). */
	text-decoration: none;
	cursor: pointer;
}
.elementor .e-paragraph-base a:focus-visible,
.elementor .e-heading-base a:focus-visible {
	box-shadow: 0 0 0 4px #fff;
	outline: 2px solid #000;
	outline-offset: 2px;
}
/* Links inside headings that are the whole heading (card titles) keep the heading colour. */
.elementor a.e-heading-link-base,
.elementor a.e-paragraph-link-base {
	cursor: pointer;
}

/* Loop Item cards (Explore listings): the V3 heading and icon-list widgets keep a line height equal to their font size;
   give them the design system's heading (1.15) and label (1.3) line heights (Decision 12). */
body .elementor.e-loop-item .elementor-element.elementor-widget-heading .elementor-heading-title { line-height: 1.15; }
body .elementor.e-loop-item .elementor-element.elementor-widget .elementor-icon-list-item > * { line-height: 1.3; }
body .elementor.e-loop-item span.e-paragraph-base { line-height: 1.3; }

/* Links on dark bands (white text, footer): the rust link colour is unreadable on olive; use the accent (gold). */
.elementor .elementor-location-footer .e-paragraph-base a,
.elementor .elementor-location-footer .e-heading-base a,
.elementor .text-white.e-paragraph-base a:not(.e-paragraph-link-base):not(.e-heading-link-base),
.elementor .text-white.e-heading-base a:not(.e-paragraph-link-base):not(.e-heading-link-base) { color: var(--e-global-color-accent, #ffaf56); }

/* Mobile menu popup 196: the open accordion item's title turns gold (V3 `active_title_color` = accent). */
.elementor-196 details[open] > summary,
.elementor-196 details[open] > summary * { color: var(--e-global-color-accent, #ffaf56); }
/* ... and its plus icon becomes a minus while the item is open (V3 accordion icon pair). */
.elementor-196 details[open] > summary [class*="accordion-item-icon"] > * { display: none; }
.elementor-196 details[open] > summary [class*="accordion-item-icon"]::after {
	content: "\2212";
	color: var(--e-global-color-accent, #ffaf56);
	font-size: 2.75rem;
	line-height: 1;
}

/* Linked containers (an atomic box that is an <a>): the kit's link colour (rust) is inherited by everything inside, including
   V3 lists and text widgets; the live site keeps the surrounding text colour (visual audit 2026-11-06). */
.elementor a.e-con,
.elementor a.e-atomic-element { color: inherit; }

/* Mobile menu popup: the summary row text colour is white on live. */
.elementor-196 summary { color: #fff; }

/* FAQ accordions (Explore pages, Lodging, Hunting & Fishing): the live site's own arrow icon pair (Accordion-Icon.svg closed,
   Accordion-Icon-1.svg open, 25 x 26), owner sign-off 2026-11-06. The closed icon is the e-svg in the slot (class faq-icon). */
.elementor .faq-icon { width: 25px; height: 26px; flex: 0 0 25px; }
.elementor .faq-icon svg, .elementor .faq-icon img { width: 25px; height: 26px; }
.elementor details[open] > summary .faq-icon > * { display: none; }
.elementor details[open] > summary .faq-icon {
	background: url("/wp-content/uploads/2025/06/Accordion-Icon-1.svg") center / 25px 26px no-repeat;
}

/* Torn-edge dividers (Rough-Edge-Bottom_*.svg). In V3 the image sat inline in a 24px line box, so the picture ended ~2-7px above the
   box bottom and its negative margin moved that whole box. The atomic image is block level and carries the margin itself, which left
   the picture 7/10/13px (desktop/tablet/phone) too high with a strip of the section behind showing under the torn edge. Restore the
   24px box and the offset. */
.elementor .e-div-block-base:has(> img[src*="Rough-Edge-Bottom"]) { padding-bottom: 9px; } /* box 24px like the V3 line box; a section's own min-height (the 300px green band) is unaffected */
.elementor .e-div-block-base > img[src*="Rough-Edge-Bottom"] { position: relative; top: 7px; }
@media (max-width: 1024px) { .elementor .e-div-block-base > img[src*="Rough-Edge-Bottom"] { top: 10px; } }
@media (max-width: 767px)  { .elementor .e-div-block-base > img[src*="Rough-Edge-Bottom"] { top: 13px; } }

/* Elementor's background/motion layers are absolutely positioned and paint over the non-positioned logo link in the phone header, so
   the logo could not be clicked. They carry no content: never let them take the pointer. */
.elementor-motion-effects-container,
.elementor-motion-effects-layer { pointer-events: none; }

/* Laptop widths: a boxed V3 container is exactly as wide as the screen between ~1280 and ~1330px, so its text touched the screen edge
   (the live site does too). Keep a 24px (1.5rem) floor: the padding is the part of 24px the side gutter does not already provide.
   Only between 1025 and 1340px: above that the page is wider than any boxed content and nothing changes (a container set wider than the
   screen, like the header at 1480px, must keep its signed-off layout at 1440px). */
@media (min-width: 1025px) and (max-width: 1340px) {
  .elementor .e-con-boxed > .e-con-inner {
    padding-inline: max(0px, calc(24px - (100vw - min(100%, var(--content-width, 1280px))) / 2));
  }
}

/* Home: two owner-built full-width sections are 1280px wide with no (or 10px) side padding, so at ~1280px the text sat on the screen
   edge. Same 24px floor as above, only between 1200 and 1340px; above that the elements keep their own padding (08a9fa1 has 10px on its
   inline end), so nothing changes at 1440px. */
@media (min-width: 1200px) and (max-width: 1340px) {
  .elementor .elementor-element.elementor-element-08a9fa1,
  .elementor .elementor-element.elementor-element-e73ac1b {
    padding-inline: max(0px, calc(24px - (100% - min(100%, 1280px)) / 2));
  }
  .elementor .elementor-element.elementor-element-08a9fa1 {
    padding-inline-end: max(10px, calc(24px - (100% - min(100%, 1280px)) / 2));
  }
}

/* Home video block (b67d465) is a true 16:9 at every width. The dark Field Notes band under it (af3d805) tucks up behind the block's
   lower part by 250px, which is about 35% of the block's height on a desktop (709px tall). On narrower screens the block is shorter
   (208px at 390px), so a fixed 250px would cover the "Condition" row above it. Keep the overlap proportional: 19.5vw equals 250px at
   1280px and above (no change on desktop) and shrinks with the block below that. The band ends at the video's bottom edge (its height
   is the overlap minus the 10px bottom padding of the video's container): the Field Notes section under it is the same dark green, so
   any more height only adds empty space under the video (audit 3d, F1). */
.elementor .elementor-element.elementor-element-af3d805 {
	margin-top: calc(-1 * min(15.625rem, 19.5vw));
	min-height: calc(min(15.625rem, 19.5vw) - 10px);
}

/* Pages without a featured image (static pages such as Privacy Policy; audit 3d, F6). They render through the single-post template, whose
   dark title banner (2499bf2) has a 600px minimum height and 200px bottom padding so that a post's featured image can be pulled up over
   it (23a5683, margin-top -80). When that image container is empty there is nothing to overlap, so the banner would only be empty green:
   drop the minimum height and bottom padding. Posts with a featured image keep the original banner (the rule needs the container to
   contain no img). */
.elementor-location-single [data-id="2499bf2"]:has(+ [data-id="23a5683"]):not(:has(+ [data-id="23a5683"] img)) {
	padding-bottom: 4rem;
	min-height: 0;
}
@media (max-width: 767px) {
	.elementor-location-single [data-id="2499bf2"]:has(+ [data-id="23a5683"]):not(:has(+ [data-id="23a5683"] img)) { padding-bottom: 2.5rem; }
	/* keep the first content badge clear of the banner edge on a phone */
	.elementor-location-single [data-id="2499bf2"]:has(+ [data-id="23a5683"]):not(:has(+ [data-id="23a5683"] img)) + [data-id="23a5683"] { margin-top: -3rem; }
}

/* Photo tiles (home category tiles, the "Check out other things" tiles on POI pages, the tiles on Explore pages and Lodging).
   The tile is a container whose photo is its background; its dark overlay is the container's ::before, which is absolutely
   positioned. In the old editor the title sat in a positioned widget and so painted above the overlay; the new editor's heading
   is not positioned, so the overlay painted over it and dimmed it (a washed-out title; it was already in the first local capture
   and was reported by the owner on 2026-11-06). Positioning the heading puts it back above the overlay. The tile's gold bar
   (::after, z-index 2) and the button (already positioned) are unaffected. */
.elementor-9 .elementor-element:is(.elementor-element-0e1a792, .elementor-element-a92d342, .elementor-element-628f477, .elementor-element-a6565c9, .elementor-element-b7b73d8) > .e-heading-base,
.elementor-57736 .elementor-element:is(.elementor-element-a497303, .elementor-element-03e3a21) > .e-heading-base,
.elementor-59978 .elementor-element:is(.elementor-element-b9e15c7, .elementor-element-36d4a10) > .e-heading-base { position: relative; }

/* Highlight event card on phones (calendar page): the photo is height:auto, so at 350px wide it is only ~233px tall and the
   absolutely positioned content block (date, title, place) filled it, putting the date line under the "View event" button.
   A fixed photo height gives the content block room; the card's mobile min-height in the template matches it. */
@media (max-width: 767px) {
	.elementor-element-1f2c174 .elementor-shortcode img { height: 320px !important; }
}

/* Current Weather on the home page (PLAN.md centring and weather, Decision 1): the line is filled in by assets/js/weather.js
   from /wp-json/harney/v1/weather; it stays hidden (keeping its space) until a reading arrives. */
.elementor-9 [data-id="528fca8"]:not(.is-ready) { visibility: hidden; }

/* Mobile header (inc/header.php, assets/js/header-mobile.js): the phone header (template 45, element af44177) is fixed at the top,
   hides when scrolling down and returns when scrolling up, like the desktop header. The header element keeps its 90px so the
   page does not move. Solid olive once the page has scrolled, as the desktop header does when it returns. */
@media (max-width: 720px) {
	body:not(.elementor-editor-active) .elementor-location-header { min-height: 90px; }
	body:not(.elementor-editor-active) .elementor-location-header [data-id="af44177"] {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		width: 100%;
		z-index: 99;
		transition: transform .3s ease, background-color .3s ease;
	}
	body:not(.elementor-editor-active) .elementor-location-header [data-id="af44177"].hm-stuck { background-color: #4c4d35; }
	body:not(.elementor-editor-active) .elementor-location-header [data-id="af44177"].hm-hide { transform: translateY(-100%); }
}
@media (max-width: 720px) and (prefers-reduced-motion: reduce) {
	body:not(.elementor-editor-active) .elementor-location-header [data-id="af44177"] { transition: none; }
}

/* Header logo and menu above the scroll-fade background layer: Elementor's motion-effects layer (the header's fading olive
   background, absolutely positioned) painted over the unpositioned logo and dimmed it as the layer's opacity changed with the
   scroll. Positioning the inner container lifts the content above the layer (same fix as the photo-tile titles). */
.elementor-location-header [data-id="af44177"] > .e-con-inner,
.elementor-location-header [data-id="f5454b6"] > .e-con-inner { position: relative; z-index: 1; }

/* Live hotfix 2026-11-12 (PLAN.md): the two photos in the header's Local Events drop-down were sized from their height (width auto)
   and left 51px of their 246px frame empty; make them fill the frame (height and object-fit cover stay as designed). */
.elementor-location-header .e-n-menu-content a.e-image-link-base > img.e-image-base:is([data-id="e0f4301"], [data-id="9fddacf"]) {
	width: 100%;
	align-self: stretch;
}

/* Live hotfix 2026-11-12 (PLAN.md): Home "View the current air quality": the icon and the text were bottom-aligned and the icon's box was
   taller than its glyph, so the icon sat 6.7px high on desktop and 5.7px low on phones. Centre them; the icon's box is the glyph's height;
   the row keeps its 38px minimum so the page does not move. */
.elementor-9 .elementor-element-433101c[data-id="433101c"] { align-items: center; min-height: 38px; }
.elementor-9 [data-id="4101efc"] .elementor-icon-wrapper { line-height: 0; }
.elementor-9 [data-id="4101efc"] .elementor-icon { display: flex; }

/* Live hotfix 2026-11-12 (PLAN.md Decision 9): desktop header logo was 0px wide in Firefox until the page was scrolled back to the top.
   The logo image is `width: 100%` of its link, and Elementor makes that link `display: inline-block` (shrink-to-fit), so the width was
   circular; Chrome resolves it from the SVG's intrinsic size, Firefox to 0. A block link fills the 167px widget, so 100% has a real value. */
.elementor-location-header .elementor-element-6efba28 a { display: block; }