/* Client-specific overrides — chitwoods (Chitwood & Chitwood)
 * Loaded AFTER the captured Avia CSS and the shared static-overrides.css.
 * Only site-specific tweaks live here; general Avia fixes go in the shared template.
 */

/* Home "Specialized Services" — standalone full-width section (operator 2026-07-06).
 * Operator: treat it as a completely new section that does NOT collide with the
 * gold "Let Us Do The Work!" band and fills full page width to the gutters.
 *
 * The captured Enfold layout builds a floating white card that straddles two
 * sections via negative margins (post-406 CSS):
 *   - #services section          margin-top:-50px; margin-bottom:-50px
 *   - inner heading column        margin-top:-60px  (pulls the card up into gold)
 *   - inner list column           margin-top:-20px
 * and the section background is #f9f9f9, so the white content columns read as a
 * narrow card with a grey gutter around them.
 *
 * Fix: (a) zero every negative margin so nothing collides, (b) paint the whole
 * section white so it is a clean full-bleed block with content at the container
 * gutters. */
#services.avia-section.av-5lei26-cac53c7799ce1578b9aaa6efbb0d39f5 {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  background-color: #ffffff !important;
}
/* the id class sits on BOTH .flex_column and its inner .flex_column_table; the
 * -60px/-20px lands on the _table, so match the id class unscoped by element. */
#services .av-5exrz2-89302f9e2532331bbd87f67839e73df5,
#services .av-5exrz2-4-19e9724e6dbcb90650a1a4e43b3e38b5,
#services .av-3oqopy-66fecef145d7176f8266a18bd4d9b4cf {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* ym:reviews — Trustindex review slider band (home, SEO pass 2026-07-21).
   Operator pastes the Trustindex loader in place of the placeholder box.
   Top padding raised 64→110px to match the operator's mockup (2026-07-27): the heading needed more
   breathing room below the busy hero above it. Measured from the mockup (heading shifted +76 img px at
   1.616 img/CSS scale ⇒ +47 CSS px); bottom stays 64px (footer moved down by the same amount, i.e. only
   top padding changed). */
/* `clear:both` is load-bearing (2026-07-28): every Enfold `.avia-section` is
   float:left and clears via `.container_wrap{clear:both}`. This band is a plain
   injected <div> with no container_wrap, so it never cleared the section above —
   its box started level with that section and the heading was pushed down by the
   float, swallowing the top padding whole. That is why raising 64→110px looked
   like it did nothing on the live site. Same bug the blog list had. */
.ym-reviews{background:#f7f4ec;padding:110px 24px 64px !important;text-align:center;clear:both;}
.ym-reviews-inner{max-width:1100px;margin:0 auto;}
.ym-reviews-eyebrow{text-transform:uppercase;letter-spacing:.15em;font-size:13px;color:#b08602;margin:0 0 8px;font-weight:700;}
.ym-reviews-h2{font-family:'Heebo',Helvetica,Arial,sans-serif;font-size:32px;line-height:1.2;color:#2c2c2c;margin:0 0 32px;font-weight:700;}
.ym-reviews-placeholder{border:2px dashed #d29e03;border-radius:8px;padding:48px 24px;color:#8a7a3a;background:#fffdf7;font-style:italic;}

/* WCAG AA contrast on the shared contact-form placeholders (SEO/a11y pass 2026-07-21).
   Enfold default placeholder #919191 is 3.15:1 on white; #6b6b6b is ~4.8:1. */
.ym-contact-form .text_input::placeholder,
.ym-contact-form .text_area::placeholder{color:#6b6b6b;opacity:1;}

/* Qualifying-question <select>s (2026-07-28). A select has no ::placeholder, so
   its first option (value="") IS the visible label — but it would render in the
   normal text colour and read as an answered field. `:has()` lets us grey it
   only while that empty option is the selected one, matching the inputs above at
   the same 4.8:1 contrast. Progressive: a browser without :has() just shows the
   label in the default colour, which is still legible and still correct. */
.ym-contact-form select.select:has(option[value=""]:checked){color:#6b6b6b;}
/* Enfold sizes .select only under `#top`; these forms also sit inside CTA bands,
   so pin the box here too and keep it the same height as the text inputs. */
/* padding-right clears Enfold's background-image dropdown arrow (pinned centre-
   right). Without it the longest labels run under the arrow and clip — caught in
   05-review/form-update/ at both 1440 and 390. */
.ym-contact-form select.select{width:100%;padding:13px 34px 13px 13px;border-radius:2px;}

/* Terms + Privacy static content — match the blog's centered container width and
   gutters site-wide (2026-07-24). The .ym-privacy block was unconstrained and
   overflowed the 1130 Enfold grid (smaller side gutters than every other page);
   pin it to the same 1130 centered column + 30px side gutters as .ym-blog. */
.ym-privacy{max-width:1130px;margin:0 auto;padding:60px 30px 80px}

/* Interior page hero banners — darken the overlay to match LIVE production (2026-07-27).
   The captured Avia CSS shipped a stale brown overlay (opacity:0.4; #995915) that washed
   the hero photos out (text hard to read). Live production now renders these heroes with a
   black overlay at 0.666 (see chitwoods.com devtools: `.av-section-color-overlay
   {opacity:.666;background-color:#000}`). Target the top hero by id (#av_section_1) so this
   is hash-independent and re-capture-proof, and only hits the banner — NOT the bottom
   av_section_3 CTA bands. #top prefix guarantees we out-specify the per-section captured rule. */
#top #av_section_1.av-section-color-overlay-active .av-section-color-overlay{
  opacity:0.666 !important;
  background-color:#000 !important;
}

/* Home "Let Us Do The Work!" gold band (operator 2026-07-27).
   (a) Invisible Enfold spacer <div class="hr hr-invisible av-5p4tpi-…"> (height:45px) below the button
       → removed. (b) The section's `.content` wrapper shipped symmetric 50px top/bottom padding, which
       (with the button being the tallest element) left the band top-heavy — balance it with equal 30px
       top+bottom so the content is vertically centered without the big empty gold gap. Button's own
       padding is untouched. Scope by the section's UNIQUE hash (av-6lyzku-…), NOT #av_section_2 (that id
       repeats on other pages); `.content.av-content-full` is a generic Enfold wrapper. */
#top .hr.hr-invisible.av-5p4tpi-5276124824615d9aac22a42b776060a5{ display:none !important; }
#top .avia-section.av-6lyzku-1892d4d5246776c824132af69d158a15 .content.av-content-full{
  padding-top:30px !important;
  padding-bottom:30px !important;
}
/* (c) Mobile (≤767px, where Enfold stacks the two columns): the heading was left-aligned
       (text-align:start) while the button wrap is already centered — center the heading to match. */
@media (max-width: 767px){
  #top .avia-section.av-6lyzku-1892d4d5246776c824132af69d158a15 .av-special-heading,
  #top .avia-section.av-6lyzku-1892d4d5246776c824132af69d158a15 .av-special-heading .av-special-heading-tag{
    text-align:center !important;
  }
}

/* Kill the 34px white gap between the fixed header and the first section (operator 2026-07-27).
   Enfold emits an inline header-clearance rule `.html_header_top.html_header_sticky #main
   {padding-top:192px}`, but our built header renders 158px tall at ≥990px (shrinking disabled), so
   34px of white #main background shows above the first section on EVERY page — on the home that reads
   as an empty white band above the light-grey hero section. Match the clearance to the real header
   height so the first section sits flush under the header. Desktop-only (≥990px); at ≤989px the header
   is in normal flow and Enfold already sets padding-top:0, so we must NOT touch it there. */
@media (min-width: 990px){
  #top #main.all_colors{ padding-top:158px !important; }
}

/* ============ Blog hero (2026-07-28) ============
   /blog and /blog/<slug> shipped with no hero — header straight into grey.
   Same photo + framing the other interior heroes use; the black .666 overlay
   comes from the existing `#av_section_1` rule further down. Background lives
   here (not on an Avia hash) because the blog pages don't load any post-N.css.
   Markup: 08-blog-migration/build-blog-widget.py HERO.                      */
.ym-blog-hero{
  /* cross-on-bible.jpg is what /faq/, /reviews/, /philosophy/ and /contact/ all
     use — the blog shipped with the SERVICES-page photo instead. */
  background-image:url("../../assets/images/cross-on-bible.jpg");
  background-position:50% 50%; background-repeat:no-repeat; background-size:cover;
}
/* `#top #wrap_all` is required — Avia's own 3-selector rule sets 17px and beats
   a single-class selector, which left the hero title at body size. */
#top #wrap_all .ym-blog-hero .av-special-heading-tag{ color:#fff; font-size:50px; }
/* font-size must sit on the WRAPPER, not just the tag: Avia's mobile rule is
   `font-size:0.8em`, which resolves against the wrapper. The captured pages set
   the wrapper to 50px (→ 40px on mobile); we only set the tag, so the wrapper
   stayed at the 17px default and "BLOG" rendered at 13.6px on a phone. */
#top .ym-blog-hero .av-special-heading{ padding-bottom:0; color:#fff; font-size:50px; }
.ym-blog-hero .special-heading-inner-border{ border-color:#fff; }
/* the short centred rule under the title, matching the other interior heroes */
#top .ym-blog-hero-hr{ margin-top:30px; margin-bottom:30px; }
.ym-blog-hero-hr .hr-inner{ width:20%; max-width:45%; border-color:rgba(255,255,255,.76); }
.ym-blog-hero-hr .av-seperator-icon{ color:#fff; }
@media only screen and (max-width:767px){
  #top #wrap_all .ym-blog-hero .av-special-heading-tag{ font-size:0.8em; }
}

/* ============ Black contact CTA band (2026-07-28) ============
   The original on /faq/ takes its black background + white 40px heading from
   post-503.css, which ONLY /faq/ loads — so cloning the markup to the SERVICES
   pages rendered a WHITE band. These rules re-express the same look keyed on
   `.ym-cta-black` (set by _partials/cta-section.html), so the band is
   self-contained wherever inject-fixes drops it, and survives a re-capture. */
.ym-cta-black{ background-color:#000 !important; background-image:none !important; }
.ym-cta-black .flex_column{ padding:0 !important; }
#top .ym-cta-black .av-special-heading{ padding-bottom:0; color:#fff; font-size:40px; }
#top #wrap_all .ym-cta-black .av-special-heading .av-special-heading-tag{
  font-size:40px; color:#fff;
  /* Own the capitalization instead of inheriting Avia's
     `.all_colors h4{text-transform:uppercase}` — the band does not sit inside
     #main.all_colors on every page (the captured pages disagree about where
     #main closes), so relying on that rule made /church-bookkeeping/ render
     sentence-case while the others were uppercase. */
  text-transform:uppercase;
}
.ym-cta-black .special-heading-inner-border{ border-color:#fff; }
@media only screen and (max-width:767px){
  #top #wrap_all .ym-cta-black .av-special-heading .av-special-heading-tag{ font-size:0.8em; }
}

/* ============ FAQ accordion — native <details> cards (2026-07-28) ============
   Operator: match hortonhome's accordion, chitwoods brand + typography, and run
   the full page content width. Markup is built by inject-fixes.fix_faq_accordion
   (replaces the Enfold `av_three_fifth` column trio, so the 637px cap is gone —
   `.ym-faq` now fills the same 1150px box the reviews video uses).
   Brand: gold #d29e03, Heebo for questions, Open Sans for answers.            */
/* White block, like the one the /reviews/ video sits in (operator 2026-07-28).
   That card is the captured Enfold column: white background, 30px padding, and
   a -60px top margin so it laps over the hero above. Reproduced here — the
   original column carried it via post-503.css, which we lifted out along with
   the Enfold layout. 1150px = exactly the box the /reviews/ video occupies. */
.ym-faq{
  max-width:1150px; margin:-60px auto 0; background:#fff; padding:30px;
  position:relative; z-index:1;
}
/* "Frequently Asked Questions" now lives inside the card (see fix_faq_accordion) */
#top .ym-faq .av-special-heading{ padding-bottom:0; margin-bottom:22px; }
/* `#top` is REQUIRED on the border rules: Avia's element reset carries
   `.main_color details, … summary { border-color:#e1e1e1 }` (specificity 0,1,1),
   which silently beat a plain `.ym-faq-item` (0,1,0) and greyed out the gold
   left edge — it rendered fine to the eye, so only a computed-style check on
   the deployed page caught it. */
#top .ym-faq-item{
  background:#fff; border:1px solid rgba(0,0,0,.08); border-left:4px solid #d29e03;
  border-radius:6px; margin-bottom:12px; transition:box-shadow .15s ease;
}
#top .ym-faq-item[open]{ box-shadow:0 3px 16px rgba(0,0,0,.09); }
.ym-faq-q{
  cursor:pointer; padding:18px 68px 18px 22px; list-style:none; position:relative;
  font-family:'Heebo',Helvetica,Arial,sans-serif; font-weight:600; font-size:18px;
  line-height:1.4; color:#1a1a1a;
}
.ym-faq-q::-webkit-details-marker{ display:none; }   /* Safari's default triangle */
.ym-faq-q:hover,
.ym-faq-item[open] .ym-faq-q{ color:#a87d05; }
.ym-faq-q::after{
  content:'+'; position:absolute; right:18px; top:50%; transform:translateY(-50%);
  width:26px; height:26px; line-height:26px; text-align:center; font-size:20px;
  font-weight:400; color:#fff; background:#d29e03; border-radius:50%;
}
.ym-faq-item[open] .ym-faq-q::after{ content:'\2212'; }   /* − */
.ym-faq-a{ padding:0 22px 20px; }
.ym-faq-a p{
  font-family:'Open Sans',Helvetica,Arial,sans-serif; font-size:15px; line-height:1.8;
  color:#4a4a4a; margin:0 0 12px;
}
.ym-faq-a p:last-child{ margin-bottom:0; }
@media (max-width:767px){
  .ym-faq-q{ font-size:16px; padding:16px 56px 16px 18px; }
  .ym-faq-a{ padding:0 18px 18px; }
}

/* ============ NAV — clean SERVICES dropdown + working mobile hamburger (2026-07-24) ============ */

/* ---- Desktop (>=990px): clean branded SERVICES dropdown (Enfold mega-menu was broken) ---- */
/* NOTE: selectors carry `#top #header` (2 IDs) so they out-specify Avia's own
   mega-menu rules in the merged CSS (which also use `#top #header …`); with only
   `#top` the earlier version silently lost and the dropdown rendered raw Avia
   defaults (17px, bold, narrow, wrapping). !important on the key props for safety. */
@media (min-width: 990px){
  #top #header .av-main-nav li.menu-item-mega-parent{ position:relative; }
  #top #header .av-main-nav .avia_mega_div{
    display:block !important;   /* Avia defaults this to display:none — force it visible-capable so opacity/visibility can drive it */
    position:absolute !important; top:100% !important; left:0 !important; margin:0 !important;
    width:max-content !important; min-width:220px !important; max-width:480px !important;
    opacity:0; visibility:hidden; transform:translateY(6px); pointer-events:none;
    transition:opacity .16s ease, transform .16s ease, visibility .16s;
    background:#ffffff !important; border-top:3px solid #d29e03; box-shadow:0 12px 32px rgba(38,33,23,.18);
    padding:6px 0 !important; z-index:300; text-align:left;
  }
  /* Open on CLICK via .ym-nav-open (toggled by the shared JS when the chevron/label is
     clicked). Hover-open was removed so a hover-shown dropdown can't fight the click
     toggle. A down chevron sits next to "Services" and flips up while open. */
  #top #header .av-main-nav li.menu-item-mega-parent.ym-nav-open > .avia_mega_div{
    opacity:1 !important; visibility:visible !important; transform:translateY(0) !important; pointer-events:auto !important;
  }
  /* chevron only on items that ACTUALLY have a submenu (Services) — several other
     top-level items carry `menu-item-mega-parent` but have no dropdown, so key off
     `menu-item-has-children`. */
  #top #header .av-main-nav li.menu-item-has-children > a .avia-menu-text::after{
    content:""; display:inline-block; vertical-align:middle; margin:-2px 0 0 8px;
    width:7px; height:7px; border-right:2px solid currentColor; border-bottom:2px solid currentColor;
    transform:rotate(45deg); transition:transform .2s ease;
  }
  #top #header .av-main-nav li.menu-item-has-children.ym-nav-open > a .avia-menu-text::after{
    transform:translateY(3px) rotate(-135deg);
  }
  #top #header .av-main-nav .avia_mega_div .sub-menu{ display:block !important; margin:0 !important; padding:0 !important; width:auto !important; box-shadow:none !important; }
  #top #header .av-main-nav .avia_mega_div .sub-menu > li{
    display:block !important; float:none !important; width:auto !important; min-height:0 !important;
    margin:0 !important; padding:0 !important; border:0 !important; background:none !important; vertical-align:top;
  }
  #top #header .av-main-nav .avia_mega_div .mega_menu_title{ display:block !important; margin:0 !important; padding:0 !important; }
  /* not bold + one line per item (nowrap; the box grows to the widest).
     Size matched to the operator's reference (2026-07-28): 17px/28px — the site's
     body-copy metrics — up from the 13px/20px this shipped with. */
  #top #header .av-main-nav .avia_mega_div .mega_menu_title > a{
    display:block !important; padding:9px 22px !important; color:#3a2f1a !important;
    font-family:'Heebo',Helvetica,Arial,sans-serif !important; font-weight:400 !important;
    font-size:17px !important; line-height:28px !important; letter-spacing:0 !important;
    white-space:nowrap !important; text-decoration:none !important; border-left:3px solid transparent;
  }
  #top #header .av-main-nav .avia_mega_div .mega_menu_title > a:hover{
    background:#f6efda !important; color:#a87d05 !important; border-left-color:#d29e03;
  }
  /* keep it a tidy link list — hide any Enfold mega blurb/description/content rows */
  #top #header .av-main-nav .avia_mega_div .avia_mega_menu_sub_content,
  #top #header .av-main-nav .avia_mega_div .mega_menu_content,
  #top #header .av-main-nav .avia_mega_div p{ display:none !important; }
}

/* ---- Mobile (<=989px): Enfold hides the whole menu row (#header_main_alternate) and relies
        on its stripped runtime to build a toggle -> nothing shows. Re-reveal the row, pinned
        top-right in the logo band, and show ONLY the hamburger. The shared JS drawer already
        opens from `.av-burger-menu-main > a`. ---- */
@media (max-width: 989px){
  #top #header{ position:relative; }
  #top #header_main_alternate{
    display:block !important; position:absolute; top:0; right:16px; height:100%;
    width:auto; min-height:0; background:none !important; border:0 !important; box-shadow:none !important; z-index:40;
  }
  #top #header_main_alternate > .container{
    width:auto !important; max-width:none !important; height:100%; margin:0; padding:0;
    display:flex; align-items:center;
  }
  #top #header_main_alternate .main_menu,
  #top #header_main_alternate .av-main-nav-wrap{ height:100%; width:auto; display:flex; align-items:center; }
  #top .av-main-nav{ display:flex !important; align-items:center; height:auto; width:auto; margin:0; }
  #top .av-main-nav > li:not(.av-burger-menu-main){ display:none !important; }
  #top .av-main-nav > li.av-burger-menu-main{ display:block !important; margin:0; padding:0; }
  /* the burger <li> can carry current-menu-item (gold fill) — kill it so the icon shows */
  #top #header .av-burger-menu-main,
  #top #header .av-burger-menu-main.current-menu-item,
  #top #header .av-burger-menu-main.current_page_item{ background:transparent !important; background-color:transparent !important; }
  #top #header .av-burger-menu-main > a,
  #top #header .av-burger-menu-main.current-menu-item > a,
  #top #header .av-burger-menu-main.current_page_item > a{
    display:flex !important; align-items:center; justify-content:center; width:48px !important; height:48px !important;
    padding:0 !important; margin:0; background:transparent !important; background-color:transparent !important;
    border:0 !important; box-shadow:none !important;
  }
  /* Use Enfold's OWN 3-bar hamburger — identical to the LIVE site (rounded bars,
     evenly spaced 3px), just recoloured to the brand gold. (An earlier build hid it
     and hand-drew a gradient icon, which rendered the bars unevenly.) Un-clip the box
     so all three bars show statically without Enfold's JS. */
  #top #header .av-burger-menu-main > a .av-hamburger{ display:inline-block !important; padding:0 !important; }
  #top .av-hamburger-box{
    width:26px !important; height:22px !important; position:relative !important;
    overflow:visible !important; display:inline-block !important;
  }
  #top .av-hamburger-inner,
  #top .av-hamburger-inner::before,
  #top .av-hamburger-inner::after{
    width:26px !important; height:3px !important; border-radius:3px !important;
    background-color:#d29e03 !important;
  }
  #top .av-hamburger-inner{ top:50% !important; margin-top:-1.5px !important; }
  #top .av-hamburger-inner::before{ top:-9px !important; }
  #top .av-hamburger-inner::after{ top:auto !important; bottom:-9px !important; }
  #top .av-burger-menu-main strong{ display:none !important; }
  /* kill Enfold's gold fill/underline effect + bullet on the burger (shows if the item is active) */
  #top .av-burger-menu-main .avia-menu-fx,
  #top .av-burger-menu-main .avia-bullet,
  #top .av-burger-menu-main .avia-arrow-wrap{ display:none !important; }
}

/* ============ HEADER polish — logo/nav spacing + mobile logo & hamburger (operator 2026-07-27) ============ */

/* ---- Desktop (>=990px): tighten the gap between the logo band and the nav bar.
        The captured inline Enfold CSS pins the logo container to height/line-height 140px
        (`#top #header_main > .container` + `.html_top_nav_header .av-logo-container`), while
        the logo image is only ~77px tall and `div .logo` adds a 20px top pad — leaving ~43px
        of dead space above the nav. Shrink the band to a snug ~108px and trim the top pad so
        the nav sits close under the logo (matches LIVE). Scoped to desktop so the mobile band
        (handled below) is untouched. ---- */
@media (min-width: 990px){
  #top #header_main > .container.av-logo-container,
  #top.html_top_nav_header .av-logo-container,
  .html_top_nav_header #top .av-logo-container{
    height:108px !important; line-height:108px !important;
  }
  #top div .logo{ padding-top:16px !important; }
}

/* ---- Mobile (<=989px): scale the logo down, enlarge the hamburger, and vertically
        centre both in a snug band. Enfold ships a ~83px band with the logo pinned to
        top:20px (not centred) and a small 28px burger icon. Compact the band, drop the
        logo's top pad and flex-centre it, cap its size, and grow the burger icon so it
        reads as the primary control (matches Image 2). The burger's absolute+flex
        centring (in the NAV block above) already keeps it mid-band, so both align. ---- */
@media (max-width: 989px){
  #top #header_main > .container.av-logo-container{ height:68px !important; line-height:68px !important; }
  #top div .logo{ padding-top:0 !important; }
  #top .logo, #top .logo a{ display:flex !important; align-items:center !important; height:100% !important; }
  /* Both dimensions must be auto with MAX bounds, not a fixed height + a width
     cap: `height:50px` + `max-width:60vw` clamps the width once 60vw < 50*5.19,
     i.e. on any viewport under ~433px, and the logo renders SQUASHED (Lighthouse
     measured 247x50 = 4.94 against the file's true 5.19). Verified 2026-07-28. */
  #top .logo img{ height:auto !important; width:auto !important;
                  max-height:50px !important; max-width:60vw !important; }
  /* slightly larger tap box for the hamburger (icon itself styled in the NAV block) */
  #top #header .av-burger-menu-main > a{ width:52px !important; height:52px !important; }
}

/* ---- Mobile drawer — match the LIVE Enfold off-canvas (operator 2026-07-27):
        near-full-width white panel, full-width rows separated by 1px #e1e1e1 dividers,
        left-aligned #333 links, a subtle grey row hover, and a collapsible SERVICES
        submenu opened by a chevron (built generically by the shared drawer JS). The
        link FONT-SIZE is deliberately kept at our current size (NOT shrunk to Enfold's
        17px) per operator. ---- */
@media (max-width: 989px){
  /* near-full-width white panel, content top-aligned (live leaves a ~34px page strip) */
  .ym-mnav-overlay .ym-mnav-panel{
    width:calc(100% - 34px) !important; max-width:none !important;
    background:#ffffff !important; box-shadow:-8px 0 30px rgba(0,0,0,.18) !important;
    justify-content:center !important;   /* live vertically centres the menu block */
    padding:64px 0 40px !important;
  }
  .ym-mnav-overlay .ym-mnav-list{ padding:0 !important; }
  .ym-mnav-overlay .ym-mnav-list > li{ position:relative; margin:0; }
  .ym-mnav-overlay .ym-mnav-row{ display:block !important; position:relative; }
  /* full-width rows with dividers; keep current font-size (inherited, not overridden).
     Targets `.ym-mnav-link`, not `a` — a submenu parent is rendered as a <button>
     by the shared drawer JS, so an `a`-only rule would leave SERVICES unstyled. */
  .ym-mnav-overlay .ym-mnav-link{
    display:block !important; width:100% !important; text-align:left !important;
    color:#333 !important; background:none !important; border:0 !important;
    font:inherit !important; cursor:pointer !important;
    padding:15px 50px !important; line-height:1.3 !important; text-decoration:none !important;
    border-bottom:1px solid #e1e1e1 !important; opacity:1 !important;
  }
  .ym-mnav-overlay .ym-mnav-link:hover,
  .ym-mnav-overlay .ym-mnav-link:focus{ background:#f7f7f7 !important; opacity:1 !important; }
  /* chevron toggle for submenu parents (Services): › collapsed, ⌄ open */
  .ym-mnav-overlay .ym-mnav-toggle{
    position:absolute; top:0; right:0; width:64px; height:53px;
    background:transparent; border:0; padding:0; cursor:pointer; z-index:2;
  }
  .ym-mnav-overlay .ym-mnav-chevron{ display:none; }   /* we draw our own below */
  .ym-mnav-overlay .ym-mnav-toggle::before{
    content:""; position:absolute; top:50%; left:50%;
    width:9px; height:9px; margin:-7px 0 0 -6px;
    border-right:2px solid #9a9a9a; border-bottom:2px solid #9a9a9a;
    transform:rotate(-45deg); transition:transform .2s ease;
  }
  .ym-mnav-overlay .ym-mnav-has-children.ym-mnav-expanded > .ym-mnav-row .ym-mnav-toggle::before{
    transform:rotate(45deg); margin-top:-3px;
  }
  /* collapsible submenu — indented children, hidden until opened (the shared JS
     drives the `hidden` attribute; don't set `display` here or it defeats it) */
  .ym-mnav-overlay .ym-mnav-sublist{ list-style:none; margin:0 !important; padding:0 !important; width:100%; }
  .ym-mnav-overlay .ym-mnav-sublist .ym-mnav-link{ padding-left:70px !important; font-size:inherit !important; }
  /* close X — thin dark, near the top-right (matches live) */
  .ym-mnav-overlay .ym-mnav-close{ color:#333 !important; font-size:34px !important; top:18px !important; right:22px !important; }
}

/* ============ FOOTER — black text on the gold footer band (operator 2026-07-27) ============
   The footer_color section (#footer-page) renders its copyright line, business name and
   Privacy/Terms links in white (Avia default), which is hard to read on the gold texture.
   Force black — but SCOPED to the code-block text only (`.avia_codeblock`), so the social
   icon buttons (separate `.avia-button`, black box + white icon) keep their white glyphs. */
#top #footer-page .avia_codeblock,
#top #footer-page .avia_codeblock p,
#top #footer-page .avia_codeblock a{ color:#000000 !important; }

/* ============ Footer social buttons — page-independent (2026-07-28) ============
   Enfold styles these black via an INLINE rule scoped `#top #wrap_all .avia-button.<hash>`.
   On /terms/ and /privacy-policy/ the hand-built shell emits two stray `</div>`,
   closing #wrap_all BEFORE the footer — so that selector silently missed and the
   buttons fell back to Avia's default `.avia-button{background:#f8f8f8;color:#777}`:
   white boxes with pale glyphs, while every other page showed black/white.
   Re-express it scoped to the footer itself so it holds wherever the footer lands
   (and after a re-capture). `av-button-notext` = the icon-only social buttons, so
   this can't leak onto a future labelled footer button.
   NB the shell over-close is still there — see 06-history 2026-07-28. */
#top #footer-page a.avia-button.av-button-notext{
  background-color:#000 !important;
  border-color:#000 !important;
  color:#fff !important;
}
#top #footer-page a.avia-button.av-button-notext .avia_button_icon{ color:#fff !important; }

/* ============ Mobile a11y: body copy >=16px + real tap targets (2026-07-28) ====
   SEO checklist section 3. A raw 48x48 measurement flags 122 elements, but most
   are inline links inside prose, which WCAG 2.5.5 explicitly exempts and which
   Lighthouse's own tap-target audit passes. Fixed here are the real CONTROLS
   that were genuinely short. */

/* FAQ answers shipped at 15px — under the 16px body-copy floor. Ours, not Avia's. */
.ym-faq-a p{ font-size:16px; }

@media (max-width:989px){
  /* Burger measured 54x31 — the primary mobile control and the smallest thing on
     the site. Enfold wraps it in `#top .av-small-burger-icon{transform:scale(0.6)}`,
     so the ANCHOR's own 48px box renders at 31px. The icon's look was tuned against
     that scale, so don't cancel it — size the anchor to 48/0.6 = 80px, which renders
     as a 48px hit area while leaving the drawn bars exactly as they are. */
  #top #header .av-burger-menu-main > a,
  #top #header .av-burger-menu-main.current-menu-item > a,
  #top #header .av-burger-menu-main.current_page_item > a{
    width:80px !important; height:80px !important;
  }

  /* Phone CTA (operator-approved 2026-07-28). Measured 137x23 at 390px on home,
     church-compliance and church-ministry: it's an INLINE <a> inside an <h3>, so
     its box is only the 23px line box no matter how large the type is. Padding the
     anchor would grow the heading and push its siblings around on a fidelity-locked
     layout, so extend the HIT AREA instead — a transparent ::after centred on the
     text yields a full 48px touch target with zero visual or layout change.
     Scoped to the element itself (not an ancestor) per the ancestor-selector
     lesson; `inline-block` is what gives ::after a box to resolve against. */
  #top a.av-heading-link[href^="tel:"]{ position:relative; display:inline-block; }
  #top a.av-heading-link[href^="tel:"]::after{
    content:""; position:absolute; left:0; right:0; top:50%;
    transform:translateY(-50%); height:48px;
  }
}
/* 989px, not 767px (widened 2026-07-28): 767 misses iPad portrait (exactly 768)
   by one pixel, so tablets — touch devices — kept the 19px socket links. 989 is
   this build's real touch boundary: it's where Enfold swaps to the burger nav,
   and it's already what the burger tap-target rule above uses. */
@media (max-width:989px){
  /* Footer social buttons measured 67x45 — three pixels short. */
  #top #footer-page a.avia-button.av-button-notext{
    min-height:48px !important; display:inline-flex !important;
    align-items:center !important; justify-content:center !important;
  }
  /* Footer legal links (23px tall) and the 404/thank-you socket links (19px):
     pad vertically instead of changing type size, so desktop is untouched. */
  #top #footer-page .avia_codeblock a:not(.avia-button){ display:inline-block; padding:12px 4px; }
  /* 12px/6px got these to 41x52 — tall enough but 3px short on WIDTH for the
     short labels ("FAQ", "Blog"). Widen the horizontal padding to clear 44px
     on the narrowest label rather than setting a min-width, so the row keeps
     its natural spacing. (operator-approved 2026-07-28) */
  #top .socket a{ display:inline-block; padding:12px 10px; }
}

/* ============ LCP: serve the gold polygon texture as WebP (2026-07-28) ========
   The measured LCP element on the home page is the gold "Let Us Do The Work!"
   band (`.alternate_color`), whose texture the captured Avia CSS loads as a
   38.6 KB PNG — while optimize-images.py had already produced a 9.5 KB WebP of
   the same 500x500 image that nothing referenced. `image-set()` serves WebP
   where supported and falls back to the original PNG everywhere else, so this
   is additive: no browser can end up with no texture. The same rule covers
   `.footer_color` (the gold footer band), which uses the identical texture. */
.alternate_color,
.alternate_color .header_bg,
.footer_color,
.footer_color .header_bg{
  background-image:image-set(
    url("../../assets/images/chitwoods-com-wp-content-themes-enfold-images-background-images-polygon-png.webp") type("image/webp"),
    url("../../assets/images/chitwoods-com-wp-content-themes-enfold-images-background-images-polygon-png.png") type("image/png")
  );
}

/* ============ WCAG AA text contrast (operator-approved 2026-07-28) ==========
   A site-wide sweep (shared/scripts/contrast-sweep.mjs, 26 URLs x 2 breakpoints)
   found 5 real failing colour pairs / ~516 nodes. The prior "contrast verified"
   note in seo-config.md was written from per-URL Lighthouse runs and was wrong.
   Raw data: 05-review/contrast-sweep.json · summary: contrast-findings-2026-07-28.md

   Operator decision: fix the nav + gold used as TEXT; keep the true brand gold
   #d29e03 for buttons, bands and large display type.

   Colours were computed, not eyeballed (WCAG relative luminance):
     #737373 — lightest neutral grey clearing 4.5:1 on BOTH #fff (4.74) and #f9f9f9 (4.50)
     #926d02 — #d29e03 with lightness reduced, HUE PRESERVED; 4.76 on #fff, 4.52 on #f9f9f9
   Every rule is scoped to the element that carries the colour, not to an
   ancestor chain — three defects this build came from ancestor-scoped styling. */

/* 1. Main nav default state. Source rule:
      .header_color .main_menu ul:first-child > li > a{color:#808080}  (3.95:1)
   The active state (#fff, ours) and hover (#333, 12.6:1) are more specific and
   are deliberately untouched — this only moves the resting colour. 26 pages. */
#top .header_color .main_menu ul:first-child > li > a{ color:#737373; }

/* 2. /reviews/ testimonials — Enfold styles blockquote copy #919191 (3.15:1). */
#top blockquote p{ color:#737373; }

/* 3. Gold used as BODY TEXT on light backgrounds (2.43:1 on white, 2.31:1 on
   #f9f9f9). Inline text elements + content links only.

   TWO exclusions, both found by re-measuring after the first attempt:
   (a) Buttons — excluded by selector, so .avia-button keeps white-on-brand-gold.
   (b) HEADING DESCENDANTS — Enfold wraps display headings in <strong>, and some
       of those headings sit ON the gold band. The first version of this rule
       darkened them to #926d02 on #d29e03 = 1.96:1, WORSE than the 2.43:1 it
       replaced ("GET STARTED TODAY!" on compliance/ministry). A heading's
       emphasis must inherit the heading's own colour, never the link colour. */
#top .main_color :is(strong, b, em, i, time, .required):not(h1 *, h2 *, h3 *, h4 *, h5 *, h6 *),
#top .ym-blog :is(strong, b, em, i, time):not(h1 *, h2 *, h3 *, h4 *, h5 *, h6 *),
#top .ym-privacy :is(strong, b, em, i, time):not(h1 *, h2 *, h3 *, h4 *, h5 *, h6 *){
  color:#926d02;
}

#top .main_color a:not([class*="button"]):not(h1 *, h2 *, h3 *, h4 *, h5 *, h6 *),
#top .ym-blog a:not([class*="button"]):not(h1 *, h2 *, h3 *, h4 *, h5 *, h6 *),
#top .ym-privacy a:not([class*="button"]):not(h1 *, h2 *, h3 *, h4 *, h5 *, h6 *),
#top a.ym-back{ color:#926d02; }

/* 3b. RESTORE brand gold for body text inside the black CTA band. That section
   also carries Enfold's `main_color` class, so rule 3 would catch it — but its
   background is black, where darkening gold makes contrast WORSE (#d29e03 on
   #000 = 7.6:1, #926d02 on #000 = 4.0:1). Light-background fix, dark-background
   regression.
   NOTE `.required` is deliberately NOT restored here: the form's asterisks sit
   inside `av-form-labels-hidden` labels over the WHITE form fields, not on the
   black band, so they need the darkened gold like every other light-bg element. */
#top .ym-cta-black :is(strong, b, em, i, time):not(h1 *, h2 *, h3 *, h4 *, h5 *, h6 *),
#top .ym-cta-black a:not([class*="button"]):not(h1 *, h2 *, h3 *, h4 *, h5 *, h6 *){
  color:#d29e03;
}

/* ============ Contact-form layout fixes (operator 2026-07-28) ===============

   (A) HOME "GET STARTED TODAY!" box — fill to the site's normal gutters.
   The captured Enfold markup wraps the form column (av_three_fifth, 697px) in
   TWO EMPTY av_one_fifth spacer columns (184px each, height:1px) — the same
   pattern that squeezed the FAQ accordion. The box therefore sat ~513px narrower
   than every other section's content. Hide the empty spacers and let the form
   column run the full 1210px content width, so its gutters match the rest of the
   site. Scoped by the column's UNIQUE hash — the sibling service pages use a
   different hash for the same class name, so this cannot leak onto them. */
#top .flex_column.av-14grzi-4bdd65f266f702ecb6aa640261ab058d,
#top .flex_column.av-b44mu-435fff664823255e23f36ae7d18ce977{ display:none !important; }
#top .flex_column.av-kkgwbztw-5b348be7233c58b464740ede5b081572{
  width:100% !important; margin-left:0 !important;
}

/* (B) /contact/ — map fills down to the bottom of the black form column.
   The two columns are an Enfold equal-height pair (`display:table` row with
   `table-cell` children), so they already end level — but the Google Map is a
   fixed 220px iframe sitting in normal flow, leaving ~157px of dead white space
   below it. A table-cell cannot hand its leftover height to a child, so convert
   THIS ROW ONLY to flexbox: flex's default `align-items:stretch` reproduces the
   equal-height behaviour exactly, and it lets the map absorb whatever height is
   left after the phone/e-mail/address block. Height then stays correct at any
   viewport instead of being pinned to one measurement. */
#top .flex_column_table.av-87xxm-579bb6aed70130852a62dd09e0a85ae1{
  display:flex !important;
}
#top .flex_column_table.av-87xxm-579bb6aed70130852a62dd09e0a85ae1 > .flex_column{
  display:flex !important; flex-direction:column;
}
#top .flex_column_table.av-87xxm-579bb6aed70130852a62dd09e0a85ae1 .avia_codeblock_section,
#top .flex_column_table.av-87xxm-579bb6aed70130852a62dd09e0a85ae1 .avia_codeblock{
  flex:1 1 auto; display:flex; flex-direction:column; min-height:220px;
}
#top .flex_column_table.av-87xxm-579bb6aed70130852a62dd09e0a85ae1 .avia_codeblock iframe{
  flex:1 1 auto; height:100% !important; min-height:220px;
}
/* Below Enfold's column breakpoint the columns stack, so the stretch is
   meaningless and a tall map would dominate the page — hand it back a fixed height. */
@media (max-width:989px){
  #top .flex_column_table.av-87xxm-579bb6aed70130852a62dd09e0a85ae1{ display:block !important; }
  #top .flex_column_table.av-87xxm-579bb6aed70130852a62dd09e0a85ae1 > .flex_column{ display:block !important; }
  #top .flex_column_table.av-87xxm-579bb6aed70130852a62dd09e0a85ae1 .avia_codeblock iframe{ height:300px !important; }
}

/* ============ Contact-form grid (operator layout spec 2026-07-28) ===========
       Name*      | E-Mail*   | Phone*
       Ministry   | Your Role | Who Handles Bookkeeping?
       Attendance | How Can We Help?*
       Message*                                  (full)
       How Did You Hear?                         (full)

   Enfold's native float grid lays this out correctly, but it CANNOT reflow: the
   same form renders 1210px wide on the home page and only 545px inside the
   /contact/ black column, where a third is just 178px and "Who Handles
   Bookkeeping?" clips under the select arrow. A viewport media query can't tell
   those apart — same viewport, different form width — so this uses CSS Grid
   sized by CONTAINER queries on the form itself.

   6-column track: third = span 2, half = span 3, full = span 6. */
.ym-contact-form{ container-type:inline-size; }
.ym-contact-form fieldset{
  display:grid; grid-template-columns:repeat(6,1fr); gap:14px; border:0; padding:0; margin:0;
}
/* Neutralise Enfold's float/width/margin — grid owns placement now. */
.ym-contact-form fieldset > p{
  float:none !important; width:auto !important; margin:0 !important; padding:0 !important;
  grid-column:span 6;
}
.ym-contact-form fieldset > p.form_element_third{ grid-column:span 2; }
.ym-contact-form fieldset > p.form_element_half{ grid-column:span 3; }

/* Narrow container (the /contact/ black column, CTA bands): 3-up becomes 2-up so
   the long select labels have room. Measured: at 545px form width a half is
   270px, which fits "Who Handles Bookkeeping?" comfortably. */
@container (max-width: 700px){
  .ym-contact-form fieldset > p.form_element_third{ grid-column:span 3; }
}
/* Very narrow (mobile, stacked columns): everything full width. */
@container (max-width: 420px){
  .ym-contact-form fieldset > p.form_element_third,
  .ym-contact-form fieldset > p.form_element_half{ grid-column:span 6; }
}
/* Fallback for browsers without container queries: stack below Enfold's own
   column breakpoint, where the form is always narrow. */
@supports not (container-type: inline-size){
  @media (max-width: 989px){
    .ym-contact-form fieldset > p.form_element_third,
    .ym-contact-form fieldset > p.form_element_half{ grid-column:span 6; }
  }
}