/* 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; }

/* 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; }
/* arrows always visible on the static build (Avia fades them in via JS) */
.avia-slideshow-arrows a.prev-slide,
.avia-slideshow-arrows a.next-slide { opacity: 0.7 !important; width: 35px !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. */
.av-masonry .av-masonry-container { display: grid; gap: 10px; 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); }
@media (max-width: 989px) { .av-masonry .av-masonry-container { grid-template-columns: repeat(3, 1fr) !important; } }
@media (max-width: 640px) { .av-masonry .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);
}
.ym-mnav-list { list-style: none; margin: 0; padding: 0 30px; width: 100%; }
.ym-mnav-list li { margin: 0; padding: 0; }
.ym-mnav-list a {
  display: inline-block; padding: 14px 0; text-decoration: none;
  color: var(--ym-mnav-fg); font-family: var(--ym-mnav-font);
  font-size: 20px; line-height: 1.3;
}
.ym-mnav-list a:hover, .ym-mnav-list a:focus { opacity: 0.75; }
/* Enfold "button" menu items → pill, matching the desktop CTA. */
.ym-mnav-list li.ym-mnav-btn a {
  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 a: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-list a { 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;
}
