/* Avia / Enfold static-overrides
 * ================================
 * Substitutes for runtime behavior Avia JS normally provides. Link this file
 * AFTER the captured Avia stylesheets in the rebuilt page. Workflow-owned,
 * not client-specific — do not hand-author per client; lift new entries here
 * if a new Avia/Enfold site needs another rule.
 *
 * Origin: shared/process-memory.md § Run 4 L11 + L15 (thelockfather, 2026-05-22).
 */

/* L11 — Avia JS sets `.js_active` then fades `.container` from opacity 0 → 1.
 * Without JS the container stays invisible forever. */
.js_active .av-minimum-height .container { opacity: 1 !important; }

/* L11 — Avia JS toggles `.av-parallax` visible via `.enabled-parallax`.
 * Without JS the parallax background never paints. */
.av-parallax { display: block !important; }

/* Toggle/accordion padding is gated on `.js_active` (added by Enfold's JS, which
 * the static strip removes) — Enfold ships `.js_active .toggler{padding:9px 3px 9px
 * 35px;position:relative}`. Without it the toggler has padding:0 and the absolutely-
 * positioned +/- icon (`.toggle_icon` at left:10px) lands ON the title text. Re-assert
 * un-gated so accordions look right anywhere `initToggles` reinstates open/close.
 * (Generic: any `.js_active .X` Enfold rule is dead in a static build — port the ones
 * that matter here. hixsonaviation 2026-07-24.) */
.togglecontainer .toggler { padding: 9px 3px 9px 35px; position: relative; }

/* L123 — Avia vertically-centers an `.av-minimum-height` hero via the table
 * mechanism already in the merged CSS: `.container{display:table}` +
 * `.container .content{display:table-cell;vertical-align:middle;height:100%}`.
 * But a table only centers its cell when the table has a real HEIGHT, and Avia
 * ships that height ONLY for the -100 variant (its JS sets the rest at runtime).
 * Statically the -25/-50/… containers collapse to content height, so the
 * heading pins to the top (easytax Run 16: interior "SIMPLE 1040" title
 * top-aligned vs centered on live). Give each variant's container the matching
 * height so the existing table-cell rule centers the content. */
.av-minimum-height-25  .container { height: 25vh; }
.av-minimum-height-50  .container { height: 50vh; }
.av-minimum-height-55  .container { height: 55vh; }
.av-minimum-height-60  .container { height: 60vh; }
.av-minimum-height-65  .container { height: 65vh; }
.av-minimum-height-70  .container { height: 70vh; }
.av-minimum-height-75  .container { height: 75vh; }
.av-minimum-height-80  .container { height: 80vh; }
.av-minimum-height-90  .container { height: 90vh; }

/* L11 — Avia JS computes section min-height from data-av_minimum_height_pc.
 * Reproduce the same values as static CSS so sections size correctly. */
.av-minimum-height-25  { min-height: 25vh; }
.av-minimum-height-50  { min-height: 50vh; }
.av-minimum-height-55  { min-height: 55vh; }
.av-minimum-height-60  { min-height: 60vh; }
.av-minimum-height-65  { min-height: 65vh; }
.av-minimum-height-70  { min-height: 70vh; }
.av-minimum-height-75  { min-height: 75vh; }
.av-minimum-height-80  { min-height: 80vh; }
.av-minimum-height-90  { min-height: 90vh; }
.av-minimum-height-100 { min-height: 100vh; }

/* L11 — toggle (FAQ) content is hidden until Avia JS opens one.
 * Preserve the collapsed-state default. */
.toggle_wrap .toggle_content              { display: none; }
.toggle_wrap.active_tc .toggle_content    { display: block; }

/* L15 — Avia JS measures the section and sizes `.av-section-color-overlay-wrap`
 * to match so the absolutely-positioned overlay covers the full section.
 * Without JS the wrap collapses to content height, leaking the parallax image
 * out the bottom of the section. min-height: inherit pulls the section's own
 * min-height down so the wrap stretches. */
.av-section-color-overlay-wrap { min-height: inherit; }

/* Avia fullwidth image slideshow (hixsonaviation, 2026-07-01).
 * Avia hides the whole slider (`.avia-fullwidth-slider{display:none}`) and every
 * slide (`position:absolute; visibility:hidden; opacity:0`); its JS reveals the
 * container + fades between slides. Stripped JS => blank hero.
 * The functioning slider is driven by avia-static-overrides.js (fade + autoplay
 * + arrows + dots). These rules (a) reveal the container, (b) keep the aspect
 * box the inner <ul>'s inline `padding-bottom` already defines — do NOT force
 * a height or make a slide position:relative (that doubles the box height), and
 * (c) reveal the first slide as a no-JS fallback so at least one image shows if
 * the JS never runs. The slides stay absolutely positioned (Avia's default).
 * Generic Avia pattern — applies to any Enfold site with an av_slideshow_full. */
.avia-fullwidth-slider { display: block !important; }
.avia-slideshow li.avia-slideshow-slide:first-child,
.avia-slideshow li.avia-slideshow-slide.slide-1 {
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 2 !important;
}
.avia-slideshow .avia-slide-wrap img,
.avia-slideshow .avia-slideshow-image { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Video-background slideshow hero (Enfold `av-video-slide` / self-hosted
 * `<video class="avia_video">`): Enfold's runtime sizes the video to cover the
 * slide; statically a `<video>` with an explicit width/height defaults to
 * object-fit:contain, which letterboxes a 16:9 clip inside the shorter hero band
 * (black bars left/right). Force cover so the video full-bleeds like live.
 * (ledger: whitzellex 2026-07-20 — first self-hosted video-bg Avia hero.) */
.avia-slideshow .avia_video,
.av-video-slide .avia_video,
.avia-slideshow video { width: 100%; height: 100%; object-fit: cover; }
/* Slideshow prev/next arrows: hidden at rest, fade in on hover — this is
 * Enfold's own default behavior (its JS fades them in when the slideshow is
 * hovered). Showing them always reads as a static/broken control on a one-slide
 * hero. (petpalacechick, 2026-07-06 — operator asked for hover-only.) */
.avia-slideshow-arrows a.prev-slide,
.avia-slideshow-arrows a.next-slide { opacity: 0 !important; width: 35px !important; transition: opacity 0.3s ease; }
.avia-slideshow:hover .avia-slideshow-arrows a.prev-slide,
.avia-slideshow:hover .avia-slideshow-arrows a.next-slide { opacity: 0.7 !important; }
.avia-slideshow-arrows a.prev-slide:hover,
.avia-slideshow-arrows a.next-slide:hover { opacity: 1 !important; }

/* Single-slide hero, responsive caption (easytax, 2026-07-03).
 * A one-slide av_slideshow_full needs no fade-stack. Enfold pins the slide to a
 * fixed 42%-of-width aspect box and vertically-centers a framed caption inside
 * it; on desktop the box is tall enough, but below it the caption is taller than
 * the box and its lower lines overflow + get covered by the section beneath.
 * avia-static-overrides.js tags such sliders `.ym-single-slide` and, at ≤1024px,
 * strips the slide's inline sizing so it returns to flow. These rules then let
 * the caption define the hero height and float the image behind it as a cover
 * layer, and step the type down. Desktop (>1024px) is untouched. Gated on
 * .ym-single-slide so multi-slide fade sliders are unaffected. */
@media (max-width: 1024px) {
  .avia-slideshow.ym-single-slide .avia-slideshow-inner {
    padding-bottom: 0 !important; height: auto !important;
  }
  .avia-slideshow.ym-single-slide .avia-slideshow-inner li.av-single-slide {
    position: relative !important; top: auto !important; left: auto !important;
    width: auto !important; height: auto !important;
  }
  .avia-slideshow.ym-single-slide .avia-slide-wrap { position: relative; }
  .avia-slideshow.ym-single-slide .avia-slide-wrap > img {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    object-fit: cover; object-position: top left; z-index: 1;
  }
  .avia-slideshow.ym-single-slide .av-slideshow-caption {
    position: relative !important; height: auto !important; z-index: 2;
    display: flex; justify-content: flex-end; padding: 26px 4%;
  }
  .avia-slideshow.ym-single-slide .caption_container { width: auto !important; max-width: none !important; }
  .avia-slideshow.ym-single-slide .slideshow_caption,
  .avia-slideshow.ym-single-slide .slideshow_inner_caption,
  .avia-slideshow.ym-single-slide .slideshow_align_caption {
    position: relative !important; top: auto !important; left: auto !important;
    height: auto !important; width: auto !important; transform: none !important;
  }
  .avia-slideshow.ym-single-slide .slideshow_inner_caption { max-width: 340px; }
  .avia-slideshow.ym-single-slide .avia-caption-title { font-size: 26px !important; line-height: 1.15 !important; }
  .avia-slideshow.ym-single-slide .avia-caption-content { font-size: 15px !important; line-height: 1.35 !important; }
}
@media (max-width: 560px) {
  .avia-slideshow.ym-single-slide .av-slideshow-caption { justify-content: center; padding: 18px 16px; }
  .avia-slideshow.ym-single-slide .slideshow_inner_caption { max-width: none; width: 100%; }
  .avia-slideshow.ym-single-slide .avia-caption-title { font-size: 22px !important; }
  .avia-slideshow.ym-single-slide .avia-caption-content { font-size: 14px !important; }
}

/* Avia masonry gallery static fallback (hixsonaviation, 2026-07-01).
 * The image is ALREADY in the captured markup as an inner
 * `.av-masonry-image-container` background — do NOT paint one on the <a>
 * (that peeks out around the inset inner container = "offset duplicate").
 * Avia JS normally runs isotope layout + reveals entries (base CSS keeps them
 * visibility:hidden;opacity:0 and float-sized). Replace that with a responsive
 * CSS grid of uniform square tiles; the inner image-container fills each tile
 * via its own cover background. Click-to-lightbox is wired in
 * avia-static-overrides.js. Column count follows Avia's av-masonry-col-N class.
 * Generic Avia pattern. */
/* Neutralize Enfold's asymmetric av-large-gap padding (`padding:15px 0 0 15px`)
 * and its `width:calc(100% + 15px)` overflow trick — our grid handles spacing
 * uniformly instead. The masonry's own background (often a brand color) then
 * shows through the container's padding as an EVEN border around the whole grid,
 * matching live. (petpalacechick, 2026-07-06 — operator: even purple borders.) */
.av-masonry, .av-masonry.av-large-gap { padding: 0 !important; width: 100% !important; }
.av-masonry .av-masonry-container { display: grid; gap: 15px; padding: 15px; box-sizing: border-box; float: none; width: 100%; }
.av-masonry-col-2 .av-masonry-container { grid-template-columns: repeat(2, 1fr); }
.av-masonry-col-3 .av-masonry-container { grid-template-columns: repeat(3, 1fr); }
.av-masonry-col-4 .av-masonry-container { grid-template-columns: repeat(4, 1fr); }
.av-masonry-col-5 .av-masonry-container { grid-template-columns: repeat(5, 1fr); }
.av-masonry-col-6 .av-masonry-container { grid-template-columns: repeat(6, 1fr); }
/* Responsive collapse. Enfold authors a column count PER BREAKPOINT and ships it
 * on the gallery as `av-{desktop,medium,small,mini}-columns-N`, driving four real
 * media queries in the captured CSS:
 *     desktop  min-width:990px          medium  768–989px
 *     small    480–767px                mini    max-width:479px
 * Honour those classes so each gallery collapses the way its author said. The
 * blanket "≤767px → 2 columns" below stays as the FALLBACK for galleries with no
 * `-overwrite` classes (petpalacechick, 2026-07-06 — operator: 4→4→2, which a
 * `av-small-columns-2 av-mini-columns-2` gallery still gets from the rules above).
 * (durhamsauto 2026-08-14 — an 18-tile `av-small/mini-columns-4` gallery was
 * forced to 2-across on phones, 9 rows instead of 5: +701px of page.) */
@media (max-width: 767px) {
  .av-masonry-col-3 .av-masonry-container,
  .av-masonry-col-4 .av-masonry-container,
  .av-masonry-col-5 .av-masonry-container,
  .av-masonry-col-6 .av-masonry-container { grid-template-columns: repeat(2, 1fr) !important; }
}
@media only screen and (min-width: 768px) and (max-width: 989px) {
  .av-masonry.av-medium-columns-1 .av-masonry-container { grid-template-columns: repeat(1, 1fr) !important; }
  .av-masonry.av-medium-columns-2 .av-masonry-container { grid-template-columns: repeat(2, 1fr) !important; }
  .av-masonry.av-medium-columns-3 .av-masonry-container { grid-template-columns: repeat(3, 1fr) !important; }
  .av-masonry.av-medium-columns-4 .av-masonry-container { grid-template-columns: repeat(4, 1fr) !important; }
  .av-masonry.av-medium-columns-5 .av-masonry-container { grid-template-columns: repeat(5, 1fr) !important; }
  .av-masonry.av-medium-columns-6 .av-masonry-container { grid-template-columns: repeat(6, 1fr) !important; }
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
  .av-masonry.av-small-columns-1 .av-masonry-container { grid-template-columns: repeat(1, 1fr) !important; }
  .av-masonry.av-small-columns-2 .av-masonry-container { grid-template-columns: repeat(2, 1fr) !important; }
  .av-masonry.av-small-columns-3 .av-masonry-container { grid-template-columns: repeat(3, 1fr) !important; }
  .av-masonry.av-small-columns-4 .av-masonry-container { grid-template-columns: repeat(4, 1fr) !important; }
  .av-masonry.av-small-columns-5 .av-masonry-container { grid-template-columns: repeat(5, 1fr) !important; }
  .av-masonry.av-small-columns-6 .av-masonry-container { grid-template-columns: repeat(6, 1fr) !important; }
}
@media only screen and (max-width: 479px) {
  .av-masonry.av-mini-columns-1 .av-masonry-container { grid-template-columns: repeat(1, 1fr) !important; }
  .av-masonry.av-mini-columns-2 .av-masonry-container { grid-template-columns: repeat(2, 1fr) !important; }
  .av-masonry.av-mini-columns-3 .av-masonry-container { grid-template-columns: repeat(3, 1fr) !important; }
  .av-masonry.av-mini-columns-4 .av-masonry-container { grid-template-columns: repeat(4, 1fr) !important; }
  .av-masonry.av-mini-columns-5 .av-masonry-container { grid-template-columns: repeat(5, 1fr) !important; }
  .av-masonry.av-mini-columns-6 .av-masonry-container { grid-template-columns: repeat(6, 1fr) !important; }
}
.av-masonry .av-masonry-entry {
  visibility: visible !important;
  opacity: 1 !important;
  width: auto !important;
  height: auto !important;
  float: none !important;
  margin: 0 !important;
  position: relative !important;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  cursor: pointer;
  background: none !important;   /* image lives on the inner container */
}
/* `av-fixed-size` galleries already declare their own tile aspect, and the
 * markup ships the element that carries it: every entry contains an empty
 * `.av-inner-masonry-sizer` that the CAPTURED CSS sizes
 * (`.av-fixed-size .av-masonry-entry .av-inner-masonry-sizer{width:100%;padding-bottom:80%}`
 * = 5:4 in current Enfold). Let that element establish the entry height instead
 * of hardcoding a ratio here, so the tile matches whatever the source theme says
 * — and keeps matching if a future Enfold changes the number. This also picks up
 * Enfold's per-entry and per-gallery ratio variants for free (`av-landscape-img`
 * 40%, `av-portrait-img` 160%, `av-orientation-square` 100%, `-portrait` 130%,
 * `-portrait-large` 150%, `-landscape-large` 50%), none of which a single
 * hardcoded number could serve. The 1/1 above stays as the fallback for FLEXIBLE
 * masonry, whose sizer has no padding-bottom.
 * (durhamsauto 2026-08-14 — forcing 1/1 rendered live's 356x285 tiles as 341x341
 * and grew the page 167px; caught by measuring live-vs-local rects at the pre-gate.) */
.av-masonry.av-fixed-size .av-masonry-entry { aspect-ratio: auto; }
.av-masonry.av-fixed-size .av-masonry-entry > .av-inner-masonry-sizer {
  display: block !important; position: static !important; visibility: hidden;
}
/* inner layers fill the square tile; image-container already has cover bg */
.av-masonry .av-masonry-entry .av-inner-masonry,
.av-masonry .av-masonry-entry .av-masonry-outerimage-container,
.av-masonry .av-masonry-entry .av-masonry-image-container {
  position: absolute !important;
  inset: 0 !important;
  width: auto !important; height: auto !important;
  margin: 0 !important;
  animation: none !important;
}
.av-masonry .av-masonry-entry .av-masonry-image-container {
  background-size: cover !important;
  background-position: center center !important;
  /* Avia keeps the image-container at opacity:0 and fades it in via runtime JS
   * (the .av-masonry-animation-active / lazyload reveal). With the WP runtime
   * stripped that reveal never fires, so the whole gallery paints blank even
   * though the entries are laid out and the background image is set. Force it
   * visible. (petpalacechick, 2026-07-06 — WP-Smush lazyload variant.) */
  opacity: 1 !important;
  visibility: visible !important;
}
.av-masonry .av-masonry-entry.av-masonry-item-no-image { display: none !important; }
/* The sizer is dead weight when WE set the ratio (the aspect-ratio:1/1 path) —
 * but it IS the ratio on `av-fixed-size`, so only hide it off that path. */
.av-masonry:not(.av-fixed-size) .av-masonry-entry .av-inner-masonry-sizer { display: none !important; }

/* Masonry lightbox overlay (built by avia-static-overrides.js). */
#ym-lightbox {
  position: fixed; inset: 0; z-index: 99999;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.9);
}
#ym-lightbox[hidden] { display: none; }
#ym-lightbox .ym-lb-img {
  max-width: 90vw; max-height: 88vh; object-fit: contain;
  box-shadow: 0 6px 40px rgba(0,0,0,0.6);
}
#ym-lightbox button {
  position: absolute; background: none; border: 0; color: #fff;
  cursor: pointer; line-height: 1; padding: 10px;
  font-family: Arial, sans-serif;
}
#ym-lightbox .ym-lb-close { top: 14px; right: 22px; font-size: 44px; }
#ym-lightbox .ym-lb-prev,
#ym-lightbox .ym-lb-next { top: 50%; transform: translateY(-50%); font-size: 60px; opacity: 0.8; }
#ym-lightbox .ym-lb-prev { left: 18px; }
#ym-lightbox .ym-lb-next { right: 18px; }
#ym-lightbox button:hover { opacity: 1; }
#ym-lightbox .ym-lb-count {
  position: absolute; bottom: 18px; left: 0; right: 0;
  text-align: center; color: #fff; font-size: 15px; letter-spacing: 0.05em;
  opacity: 0.85; pointer-events: none;
}

/* ------------------------------------------------------------------ *
 * Enfold av-horizontal-gallery — continuous horizontal image strip.
 * The `.av-horizontal-gallery-inner` ships at `opacity:0`; Enfold's
 * (stripped) runtime JS adds `.av-horizontal-gallery-animated` to fade it
 * in and sizes/marquees the strip. Statically the whole hero band renders
 * as the bare section background (onefitchic Run 18 — the pink hero was
 * blank because the images sat under an opacity:0 ancestor while still
 * hit-testing, so every "is it visible" probe lied). Reveal it here; the
 * marquee motion is driven by avia-static-overrides.js.
 * ------------------------------------------------------------------ */
.av-horizontal-gallery-inner { opacity: 1 !important; overflow: hidden; }
.av-horizontal-gallery-slider { will-change: transform; }
/* The strip is an auto-scrolling marquee with dot pagination + a click-to-open
 * lightbox, so its prev/next arrows are non-functional statically. Honour
 * Enfold's own `av-hide-nav-arrows` flag and hide them (the fullwidth-slideshow
 * arrows and the lightbox's own `.ym-lb-*` arrows are unaffected). onefitchic
 * Run 19, operator. */
.av-horizontal-gallery.av-hide-nav-arrows .avia-slideshow-arrows { display: none !important; }

/* ------------------------------------------------------------------ *
 * Mobile hamburger overlay — VISIBILITY ONLY.
 *
 * Enfold's runtime builds the burger overlay on tap and the static export
 * strips it, leaving a dead button. avia-static-overrides.js now rebuilds
 * ENFOLD'S OWN DOM (`.av-burger-overlay > .av-burger-overlay-bg +
 * .av-burger-overlay-inner > .av-burger-overlay-scroll > ul#av-burger-menu-ul`),
 * inserted inside `#wrap_all`, so each site's CAPTURED stylesheet styles its own
 * menu — type scale, alignment, colours, the `.av-menu-button` phone CTA, and
 * whichever mode the site is configured for:
 *     html_av-overlay-full  → full-screen, centred, 35px
 *     html_av-overlay-side  → 350px right-hand drawer, left-aligned
 * The fleet is genuinely split across both, which is why the previous
 * first-party `.ym-mnav-*` skin was wrong: it rendered every site as a drawer.
 * (operator, 2026-08-14: "it should always match the source URL, not a
 * one-size-fits-all".)
 *
 * So the ONLY thing left here is showing/hiding — every presentational property
 * deliberately belongs to the site's own CSS. Enfold ships the overlay as
 * `display:none;opacity:0` for its JS to animate; we drive the same
 * `av-burger-overlay-active` class it uses, which also animates the hamburger
 * into the close X for free (Enfold has no separate close button).
 * ------------------------------------------------------------------ */
html.av-burger-overlay-active .av-burger-overlay {
  display: block;
  opacity: 1;
}
/* Side mode parks the scroller off-canvas at translateX(350px); slide it in. */
html.html_av-overlay-side.av-burger-overlay-active .av-burger-overlay-scroll {
  transform: translateX(0);
}
/* The overlay must not cover the header: the hamburger IS the close button. */
html.av-burger-overlay-active #header { z-index: 501; }

/* av-magazine list thumbnails: fill their square box (cover-crop) instead of
   letterboxing. WordPress sometimes generates a "soft" NxN thumbnail (the full
   image contained inside the square with baked-in bands) and the srcset can
   pull a landscape variant on retina; object-fit:cover makes the square list
   thumbnails fill regardless. Scoped to size-thumbnail so the wide featured
   image (size-magazine) is untouched. (comptonsurveying Run 22, L161) */
.av-magazine-thumbnail img.size-thumbnail,
.av-magazine .av-magazine-entries img.size-thumbnail {
  width: 100%; height: 100%; object-fit: cover;
}

/* Transparent → solid header transition (initTransparentHeaderScroll, L178).
   Smooths the background/opacity change when the JS toggles the
   *_header_transparency classes on scroll. Inert until those classes flip, so
   harmless on solid-header Avia sites. */
#header_main,
#header .header_bg {
  transition: background-color 0.3s ease-in-out, opacity 0.3s ease-in-out;
}
/* Full opacity when solid. Enfold's GLASSY header keeps `.header_bg` at a low
   opacity (~0.37); when the JS strips the transparency/glassy classes on scroll
   the header is supposed to go fully solid, but that low opacity lingers, so the
   "solid" header still reads as a translucent veil. Force the background fully
   opaque whenever the header is NOT in its transparent state — i.e. after scroll,
   and on always-solid interior headers. (bibas 2026-07-17.) */
#header:not(.av_header_transparency) .header_bg { opacity: 1 !important; }

/* "Scroll-down to reveal" header hidden initial state (Enfold
   `av_header_scrolldown` + `av_header_transparency`). Enfold ships the header
   carrying BOTH classes and its JS reveals it at scroll-top (opacity 1,
   margin-top 0) and re-hides on scroll-down. With the runtime JS stripped the
   header stays in its HIDDEN state — the captured CSS pins
   `#top .av_header_scrolldown.av_header_transparency{opacity:0;margin-top:-250px !important}`
   — so the ENTIRE nav + logo park ~250px above the viewport and the site renders
   header-less (no menu, no header logo). Restore the at-top visible transparent
   state; absent scroll JS the header simply stays sticky-visible, a faithful and
   better-UX default than a header that can never reappear. Gated on both classes
   so ordinary transparent or solid Avia headers are untouched.
   (423taco 2026-08-11.) */
#header.av_header_scrolldown.av_header_transparency {
  opacity: 1 !important;
  margin-top: 0 !important;
}

/* Sticky header on mobile. Enfold drops the header to `position:relative` at the
   phone breakpoint (it scrolls away), even when the site is configured sticky
   (`html_header_sticky`). Restore it for those sites so the logo + hamburger stay
   reachable while scrolling. `position:sticky` can't be used — Enfold's #wrap_all
   carries `overflow:hidden` (horizontal-scroll guard), which disables sticky for
   descendants — so use `position:fixed` and reserve the header's height on
   #wrap_all so content isn't hidden beneath it. The height is a CSS var a site
   can tune (`--ym-mobile-header-h`, default 82px). Gated on the sticky class so
   non-sticky Avia sites are untouched. (bibas 2026-07-17.) */
@media only screen and (max-width: 767px) {
  .html_header_sticky #header {
    position: fixed !important;
    top: 0 !important; left: 0 !important; right: 0 !important;
    width: 100% !important;
    z-index: 501 !important;
  }
  .html_header_sticky #wrap_all { padding-top: var(--ym-mobile-header-h, 82px); }
}

/* Footer socket policy links (Privacy / Terms). WP-conversion sockets render the
   copyright line only; the SEO pass appends Privacy Policy + Terms links inside
   the `.copyright` span (`.ym-policy`). Enfold's `a{text-decoration:none}` reset
   + subtle link color can make them invisible on the socket bar — inherit the
   socket text color and underline so they read as links and pass WCAG contrast.
   (petpalacechick 2026-07-21.) */
#socket .copyright a, .ym-policy a {
  color: inherit !important;
  text-decoration: underline !important;
}
.ym-policy { white-space: nowrap; }

/* Native date input (converted avia_datepicker → <input type="date">, ledger
   L140). Enfold styles form fields per colour-section but ENUMERATES the input
   types it targets (text/email/tel/url/number/password/…) and predates native
   date inputs, so `type=date` is omitted — a converted datepicker renders with
   the browser's native chrome (white box, dark border, 13px UA font, blue
   picker) instead of matching its sibling fields. Mirror the type=text treatment
   for the content colour-sections: strip native appearance; apply the section
   fill / border / text colour; inherit the body font-size (controls default to
   ~13px UA font otherwise, which also makes the box shorter); and brand the
   native picker popup (selected day + Today/Clear) via `accent-color` so it
   isn't browser blue. Padding / radius / width come from
   `.avia_ajax_form .text_input`. (hortonhome 2026-07-22.) */
#top .main_color input[type="date"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: var(--enfold-main-color-bg2);
  border: 1px solid var(--enfold-main-color-border);
  color: var(--enfold-main-color-meta);
  font-family: inherit;
  font-size: inherit;
  accent-color: var(--enfold-main-color-primary);
}
#top .alternate_color input[type="date"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: var(--enfold-alternate-color-bg2);
  border: 1px solid var(--enfold-alternate-color-border);
  color: var(--enfold-alternate-color-meta);
  font-family: inherit;
  font-size: inherit;
  accent-color: var(--enfold-alternate-color-primary);
}
/* Fade the format text ("mm/dd/yyyy") of an empty (required → :invalid) date
   field to match the 0.5-opacity ::placeholder of its sibling inputs; once a
   date is chosen the field is :valid and renders at full strength. */
#top .main_color input[type="date"]:invalid::-webkit-datetime-edit,
#top .alternate_color input[type="date"]:invalid::-webkit-datetime-edit {
  opacity: 0.5;
}
/* keep the calendar-picker button visible + clickable after appearance:none */
#top .avia_ajax_form input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.6;
}

/* ── Enfold's av-light-form / av-dark-form ENUMERATE input types, and the list
   stops at `search` — no date/time/datetime-local/month/week/color. The rules
   above cover a date field sitting in a `.main_color`/`.alternate_color`
   section; this covers the other axis: a field inside a *form* that was given
   the light/dark treatment. Without it the input misses the form's 2px border
   and transparent fill and drops through to the theme's fallback
   `.text_input` rule — which resolves to a 1px AMBER border (`#ffb628`, the
   ajax_alert state), so it reads as an error box next to its siblings.
   Symptom: one field in a row is thinner and orange-tinted. (naturalbeauty
   2026-07-28.) */
#top div .av-light-form input[type="date"],
#top div .av-light-form input[type="time"],
#top div .av-light-form input[type="datetime-local"],
#top div .av-light-form input[type="month"],
#top div .av-light-form input[type="week"] {
  color: #fff;
  border-color: #fff;
  border-width: 2px !important;
  background-color: transparent;
}
#top div .av-dark-form input[type="date"],
#top div .av-dark-form input[type="time"],
#top div .av-dark-form input[type="datetime-local"],
#top div .av-dark-form input[type="month"],
#top div .av-dark-form input[type="week"] {
  color: #222;
  border-color: #222;
  border-width: 2px !important;
  background-color: transparent;
}
/* The WebKit calendar/clock button is a BLACK glyph, invisible on a light-form
   (light text on a dark fill). Invert it there only — the .main_color rule
   above already handles the light-background case. */
#top .av-light-form input[type="date"]::-webkit-calendar-picker-indicator,
#top .av-light-form input[type="time"]::-webkit-calendar-picker-indicator,
#top .av-light-form input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
  opacity: 0.85;
}

/* ── Desktop nav: submenu parents ship with NO affordance. Enfold marks them
   server-side (`li.menu-item-has-children`) but paints nothing — on live WP
   `avia.js` injects an EMPTY `<span class="dropdown_available">` at runtime,
   which renders no glyph in most theme configs anyway. So this isn't something
   the static strip loses; Avia desktop navs simply never had a caret, while our
   own mobile overlay used to paint one, leaving the two breakpoints
   disagreeing. Same chevron geometry as the mobile one so a site
   shows ONE icon.
   `currentColor` is load-bearing: Avia nav links are typically #ccc at rest and
   white on hover/active, and the caret tracks them for free.
   `:hover`/`:focus-within` drive the flip because the desktop submenu opens on
   pure CSS hover once Enfold's JS is stripped — there is no state class to hook.
   (naturalbeauty 2026-07-28.) */
#top #header .av-main-nav > li.menu-item-has-children > a .avia-menu-text:after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin: -3px 0 0 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  vertical-align: middle;
  transition: transform 0.2s ease, margin-top 0.2s ease;
}
#top #header .av-main-nav > li.menu-item-has-children:hover > a .avia-menu-text:after,
#top #header .av-main-nav > li.menu-item-has-children:focus-within > a .avia-menu-text:after {
  transform: rotate(-135deg);
  margin-top: 1px;
}