/* 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: keep the authored column count on desktop/tablet, then
 * drop straight to 2 columns on phones. Matches Enfold's own masonry breakpoints
 * (a 4-col gallery stays 4 across desktop+tablet, → 2 on mobile — NOT an
 * intermediate 3-col step). (petpalacechick, 2026-07-06 — operator: 4→4→2.) */
@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; }
}
.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 */
}
/* 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,
.av-masonry .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 drawer — Enfold's runtime builds a slide-in overlay on
 * tap; it is stripped on the static export, leaving a dead button (onefitchic
 * Run 19). avia-static-overrides.js builds `.ym-mnav-overlay` from the desktop
 * menu and toggles it, mirroring Enfold's own right-side drawer. First-party
 * styling so it renders predictably on every Avia site rather than depending on
 * Enfold's fragile JS-built overlay DOM. Colours are themeable via `--ym-mnav-*`
 * custom properties; the panel background also auto-reads the site's Enfold
 * burger colour at runtime (see the JS). Defaults below are a neutral dark
 * drawer for sites that set nothing.
 * ------------------------------------------------------------------ */
.ym-mnav-overlay {
  --ym-mnav-bg: #17141b;                 /* panel background (auto-read/overridable) */
  --ym-mnav-fg: #ffffff;                 /* link colour */
  --ym-mnav-accent: var(--ym-mnav-fg);   /* pill / close colour */
  --ym-mnav-accent-fg: #000000;          /* pill text colour */
  --ym-mnav-font: inherit;               /* link font (onefitchic → Comfortaa) */
  --ym-mnav-full-opacity: 0.9;           /* full-overlay scrim opacity (page shows through) */
  position: fixed; inset: 0; z-index: 100000;
}
.ym-mnav-overlay[hidden] { display: none; }
.ym-mnav-backdrop {
  position: absolute; inset: 0; background: rgba(0, 0, 0, 0.45);
  opacity: 0; transition: opacity 0.25s ease;
}
.ym-mnav-overlay.ym-mnav-open .ym-mnav-backdrop { opacity: 1; }
.ym-mnav-panel {
  position: absolute; top: 0; right: 0; height: 100%;
  width: min(80vw, 340px);
  background: var(--ym-mnav-bg);
  box-shadow: -8px 0 30px rgba(0, 0, 0, 0.25);
  transform: translateX(100%); transition: transform 0.28s ease;
  display: flex; flex-direction: column; justify-content: center;
  padding: 64px 0 40px; overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.ym-mnav-overlay.ym-mnav-open .ym-mnav-panel { transform: translateX(0); }
.ym-mnav-close {
  position: absolute; top: 14px; right: 20px;
  background: none; border: 0; cursor: pointer; padding: 0;
  font-size: 40px; line-height: 1; color: var(--ym-mnav-accent);
}
/* `margin: auto 0` centres a short menu in the drawer yet lets a tall one
   (many items + expanded sub-menus) scroll without the top clipping — the
   flexbox auto-margins collapse once the list overflows. */
.ym-mnav-list { list-style: none; margin: auto 0; padding: 0 30px; width: 100%; }
.ym-mnav-list li, .ym-mnav-sublist li { margin: 0; padding: 0; }
/* One menu row = label (link or parent-toggle) + optional disclosure chevron. */
.ym-mnav-row { display: flex; align-items: center; }
.ym-mnav-link {
  flex: 1 1 auto; display: block; padding: 14px 0; margin: 0;
  text-align: left; text-decoration: none;
  color: var(--ym-mnav-fg); font-family: var(--ym-mnav-font);
  font-size: 20px; line-height: 1.3;
  background: none; border: 0; cursor: pointer; font-family: var(--ym-mnav-font);
}
.ym-mnav-link:hover, .ym-mnav-link:focus { opacity: 0.75; }
/* Disclosure toggle for a parent item — chevron rotates when its row expands. */
.ym-mnav-toggle {
  flex: 0 0 auto; width: 44px; height: 44px; margin-left: 4px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 0; cursor: pointer; color: var(--ym-mnav-fg);
}
.ym-mnav-chevron {
  display: block; width: 9px; height: 9px; margin-top: -3px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); transition: transform 0.2s ease;
}
.ym-mnav-has-children.ym-mnav-expanded > .ym-mnav-row .ym-mnav-chevron {
  transform: rotate(-135deg); margin-top: 3px;
}
/* Nested sub-menu — indented, hairline-separated, collapsed until expanded. */
.ym-mnav-sublist { list-style: none; margin: 0; padding: 2px 0 8px 14px; width: 100%; }
.ym-mnav-sublist[hidden] { display: none; }
.ym-mnav-sublist .ym-mnav-link { font-size: 17px; padding: 10px 0; opacity: 0.9; }
.ym-mnav-sublist .ym-mnav-link:hover, .ym-mnav-sublist .ym-mnav-link:focus { opacity: 1; }
.ym-mnav-sublist .ym-mnav-sublist {
  margin-left: 2px; padding-left: 14px; border-left: 1px solid rgba(127, 127, 127, 0.35);
}
/* Enfold "button" menu items → pill, matching the desktop CTA. */
.ym-mnav-list li.ym-mnav-btn .ym-mnav-link {
  flex: 0 0 auto; display: inline-block;
  background: var(--ym-mnav-accent); color: var(--ym-mnav-accent-fg);
  border-radius: 40px; padding: 12px 34px; margin: 6px 0;
}
.ym-mnav-list li.ym-mnav-btn .ym-mnav-link:hover { opacity: 0.9; }

/* Full-screen overlay skin (Enfold `html_av-overlay-full`) — a centered
 * full-width overlay instead of the right drawer, fading in over the page. The
 * JS adds `.ym-mnav-full` when the site is configured this way; the X stays
 * top-right. Matches Enfold's own full-overlay mobile menu. */
.ym-mnav-overlay.ym-mnav-full .ym-mnav-backdrop { background: var(--ym-mnav-bg); }
/* Semi-transparent scrim so the page shows through (backdrop is a separate layer
   from the panel, so the centered links + X stay fully opaque). */
.ym-mnav-overlay.ym-mnav-full.ym-mnav-open .ym-mnav-backdrop { opacity: var(--ym-mnav-full-opacity); }
.ym-mnav-overlay.ym-mnav-full .ym-mnav-panel {
  position: absolute; inset: 0; width: 100%; height: 100%;
  transform: none !important; box-shadow: none; background: transparent;
  align-items: center;                 /* centre the list horizontally */
  padding: 72px 20px 40px;
  opacity: 0; transition: opacity 0.28s ease;
}
.ym-mnav-overlay.ym-mnav-full.ym-mnav-open .ym-mnav-panel { opacity: 1; }
.ym-mnav-overlay.ym-mnav-full .ym-mnav-list { text-align: center; padding: 0 20px; }
.ym-mnav-overlay.ym-mnav-full .ym-mnav-row { justify-content: center; }
.ym-mnav-overlay.ym-mnav-full .ym-mnav-list > li > .ym-mnav-row .ym-mnav-link { font-size: 24px; padding: 16px 0; }

/* 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 (`.ym-mnav-chevron`) always has, 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;
}