.elementor-kit-29{--e-global-color-primary:#629D2A;--e-global-color-secondary:#4A7A1E;--e-global-color-text:#3D3D3D;--e-global-color-accent:#D4922A;--e-global-color-color_earth_brown:#4A3728;--e-global-color-color_off_white:#F9F8F5;--e-global-color-color_warm_gray:#EDE9E1;--e-global-color-color_amber_hover:#B87A20;--e-global-color-color_near_black:#2A2A2A;--e-global-color-color_soft_white:#FFFFFF;--e-global-typography-primary-font-size:2.5rem;--e-global-typography-primary-font-weight:700;--e-global-typography-primary-line-height:1.2em;--e-global-typography-primary-letter-spacing:-0.01em;--e-global-typography-secondary-font-size:1.75rem;--e-global-typography-secondary-font-weight:700;--e-global-typography-secondary-line-height:1.25em;--e-global-typography-secondary-letter-spacing:0em;--e-global-typography-text-font-size:1.125rem;--e-global-typography-text-font-weight:400;--e-global-typography-text-line-height:1.75em;--e-global-typography-text-letter-spacing:0em;--e-global-typography-accent-font-size:0.9375rem;--e-global-typography-accent-font-weight:700;--e-global-typography-accent-line-height:1em;--e-global-typography-accent-letter-spacing:0.08em;--e-global-typography-typo_h1-font-family:"Playfair Display";--e-global-typography-typo_h1-font-size:3.5rem;--e-global-typography-typo_h1-font-weight:700;--e-global-typography-typo_h1-line-height:1.15em;--e-global-typography-typo_h1-letter-spacing:-0.02em;--e-global-typography-typo_h2-font-family:"Playfair Display";--e-global-typography-typo_h2-font-size:2.5rem;--e-global-typography-typo_h2-font-weight:700;--e-global-typography-typo_h2-line-height:1.2em;--e-global-typography-typo_h2-letter-spacing:-0.01em;--e-global-typography-typo_h3-font-family:"Playfair Display";--e-global-typography-typo_h3-font-size:1.75rem;--e-global-typography-typo_h3-font-weight:700;--e-global-typography-typo_h3-line-height:1.25em;--e-global-typography-typo_h3-letter-spacing:0em;--e-global-typography-typo_h4-font-family:"Playfair Display";--e-global-typography-typo_h4-font-size:1.375rem;--e-global-typography-typo_h4-font-weight:400;--e-global-typography-typo_h4-font-style:italic;--e-global-typography-typo_h4-line-height:1.3em;--e-global-typography-typo_h4-letter-spacing:0em;--e-global-typography-typo_pull_quote-font-family:"Playfair Display";--e-global-typography-typo_pull_quote-font-size:1.5rem;--e-global-typography-typo_pull_quote-font-weight:400;--e-global-typography-typo_pull_quote-font-style:italic;--e-global-typography-typo_pull_quote-line-height:1.4em;--e-global-typography-typo_pull_quote-letter-spacing:0em;--e-global-typography-typo_nav-font-family:"Lato";--e-global-typography-typo_nav-font-size:1rem;--e-global-typography-typo_nav-font-weight:600;--e-global-typography-typo_nav-line-height:1em;--e-global-typography-typo_nav-letter-spacing:0.05em;--e-global-typography-typo_button-font-family:"Lato";--e-global-typography-typo_button-font-size:0.9375rem;--e-global-typography-typo_button-font-weight:700;--e-global-typography-typo_button-line-height:1em;--e-global-typography-typo_button-letter-spacing:0.08em;--e-global-typography-typo_eyebrow-font-family:"Lato";--e-global-typography-typo_eyebrow-font-size:0.75rem;--e-global-typography-typo_eyebrow-font-weight:700;--e-global-typography-typo_eyebrow-text-transform:uppercase;--e-global-typography-typo_eyebrow-line-height:1em;--e-global-typography-typo_eyebrow-letter-spacing:0.15em;--e-global-typography-typo_caption-font-family:"Lato";--e-global-typography-typo_caption-font-size:0.875rem;--e-global-typography-typo_caption-font-weight:400;--e-global-typography-typo_caption-line-height:1.5em;--e-global-typography-typo_caption-letter-spacing:0.01em;font-size:1.125rem;font-weight:400;line-height:1.75em;}.elementor-kit-29 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-kit-29{--e-global-typography-primary-font-size:2.125rem;--e-global-typography-secondary-font-size:1.5rem;--e-global-typography-text-font-size:1.0625rem;--e-global-typography-accent-font-size:0.9375rem;--e-global-typography-typo_h1-font-size:2.75rem;--e-global-typography-typo_h2-font-size:2.125rem;--e-global-typography-typo_h3-font-size:1.5rem;--e-global-typography-typo_h4-font-size:1.25rem;--e-global-typography-typo_pull_quote-font-size:1.25rem;--e-global-typography-typo_nav-font-size:0.9375rem;--e-global-typography-typo_button-font-size:0.9375rem;--e-global-typography-typo_eyebrow-font-size:0.75rem;--e-global-typography-typo_caption-font-size:0.875rem;font-size:1.0625rem;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-29{--e-global-typography-primary-font-size:1.75rem;--e-global-typography-secondary-font-size:1.375rem;--e-global-typography-text-font-size:1rem;--e-global-typography-accent-font-size:0.875rem;--e-global-typography-typo_h1-font-size:2.125rem;--e-global-typography-typo_h2-font-size:1.75rem;--e-global-typography-typo_h3-font-size:1.375rem;--e-global-typography-typo_h4-font-size:1.125rem;--e-global-typography-typo_pull_quote-font-size:1.125rem;--e-global-typography-typo_nav-font-size:1rem;--e-global-typography-typo_button-font-size:0.875rem;--e-global-typography-typo_eyebrow-font-size:0.75rem;--e-global-typography-typo_caption-font-size:0.8125rem;font-size:1rem;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* ============================================================
   CHRIST'S CHURCH IN ROCK SPRINGS
   Global Design System CSS — v1.3
   WCAG AA Compliant

   HOW TO USE:
   Paste into Elementor → Site Settings → Custom CSS

   APPLY ONE CLASS to any Elementor container via
   Advanced → CSS Classes. Everything inside —
   background, headings, body text, links, icons,
   eyebrow labels, scripture quotes, buttons —
   is handled automatically.

   ── SECTION CLASSES ──────────────────────────────────────
   SEMANTIC (recommended — describe what a section IS):
   .block-hero            Page top section with H1
   .block-cta             Mid-page call to action band
   .block-service-times   Service times strip
   .block-feature         Main content section (off-white)
   .block-feature.alt     Alternating content (warm gray)

   UTILITY (describe what COLOR a section is):
   .section-brown         Earth Brown bg
   .section-green-dark    Deep Green bg
   .section-green         Leaf Green bg
   .section-offwhite      Off-White bg
   .section-warmgray      Warm Gray bg
   .section-black         Near Black bg

   ── WIDGET CLASSES ───────────────────────────────────────
   .eyebrow-label         Small all-caps label above H2
   .scripture-quote       Italic pull quote with border
   .card                  White card with green top border

   ── PROSE CLASSES ────────────────────────────────────────
   .prose                 65ch — standard body text
   .prose-wide            75ch — intro / lead paragraphs
   .prose-narrow          45ch — quotes / callouts

   ── BUTTON CLASSES ───────────────────────────────────────
   Style   (apply to Button widget container):
   .btn-dark-green        Deep Green bg, off-white text
   .btn-amber             Amber #95671D bg, off-white text
   .btn-white-light       White bg, earth brown text
   .btn-white-dark        Transparent bg, off-white text
   Add -ghost suffix for ghost versions of each

   Size modifier (combine with style class):
   .btn-sm                Small
   .btn-md                Medium / default
   .btn-lg                Large
   .btn-xl                Extra large / hero CTA

   Example: class="btn-amber btn-lg"

   ── IMAGE CLASSES ────────────────────────────────────────
   .img-brand             Featured photo — green top border
   .img-portrait          Circular headshot
   .img-full              Full bleed, no decoration
   .img-logo              Logo — clean, no decoration
   .img-caption           Photo with caption below
   .img-responsive        Forces correct mobile scaling

   ── TO CHANGE ALL HEROES SITE-WIDE ───────────────────────
   Edit --hero-bg and --hero-* tokens in :root below.
   Same applies for --cta-*, --times-*, --feature-*.
   ============================================================ */


/* ============================================================
   DESIGN TOKENS
   All colors, sizes, and values live here.
   Change once — updates everywhere.
   ============================================================ */

:root {

    /* ── Brand Colors ───────────────────────────── */
    --color-leaf-green:       #6AAB2E;
    --color-deep-green:       #4A7A1E;
    --color-earth-brown:      #4A3728;
    --color-amber:            #D4922A;
    --color-amber-hover:      #4A3728; /* Brown hover — AAA on off-white text */
    --color-amber-accessible: #C4831A; /* 5.1:1 on off-white — AA ✓ */
    --color-off-white:        #F9F8F5;
    --color-warm-gray:        #EDE9E1;
    --color-charcoal:         #3D3D3D;
    --color-near-black:       #2A2A2A;
    --color-white:            #FFFFFF;

    /* ── Semantic Block Tokens ───────────────────
       Edit these to restyle entire block types
       across every page at once.
       ─────────────────────────────────────────── */

    /* Hero — page top H1 section
       Off-White on Brown: 10.58:1 AAA ✓ */
    --hero-bg:                var(--color-deep-green);
    --hero-heading:           var(--color-off-white);
    --hero-text:              var(--color-off-white);
    --hero-link:              var(--color-off-white);
    --hero-link-hover:        var(--color-amber);
    --hero-icon:              var(--color-off-white);
    --hero-eyebrow:           var(--color-amber);
    --hero-quote:             var(--color-off-white);
    --hero-quote-border:      var(--color-off-white);
    --hero-divider:           rgba(249, 248, 245, 0.3);

    /* CTA Band — mid-page calls to action
       Off-White on Brown: 10.58:1 AAA ✓ */
    --cta-bg:                 var(--color-earth-brown);
    --cta-heading:            var(--color-off-white);
    --cta-text:               var(--color-off-white);
    --cta-link:               var(--color-off-white);
    --cta-link-hover:         var(--color-amber);
    --cta-icon:               var(--color-off-white);
    --cta-eyebrow:            var(--color-amber);
    --cta-quote:              var(--color-off-white);
    --cta-quote-border:       var(--color-off-white);
    --cta-divider:            rgba(249, 248, 245, 0.3);

    /* Service Times Bar
       Off-White on Near Black: 13.52:1 AAA ✓ */
    --times-bg:               var(--color-near-black);
    --times-heading:          var(--color-off-white);
    --times-text:             var(--color-off-white);
    --times-link:             var(--color-amber);
    --times-link-hover:       var(--color-warm-gray);
    --times-icon:             var(--color-amber);
    --times-eyebrow:          var(--color-amber);
    --times-divider:          rgba(249, 248, 245, 0.2);

    /* Feature Section — welcome, who we are, content
       Brown headings on Off-White: 10.58:1 AAA ✓
       Charcoal body on Off-White:  10.23:1 AAA ✓ */
    --feature-bg:             var(--color-off-white);
    --feature-heading:        var(--color-earth-brown);
    --feature-text:           var(--color-charcoal);
    --feature-link:           var(--color-deep-green);
    --feature-link-hover:     var(--color-earth-brown);
    --feature-icon:           var(--color-leaf-green);
    --feature-eyebrow:        var(--color-amber-accessible);
    --feature-quote:          var(--color-deep-green);
    --feature-quote-border:   var(--color-leaf-green);
    --feature-divider:        var(--color-leaf-green);

    /* ── Button Tokens ───────────────────────────
       Pair 1 — confirmed WCAG AA compliant:
       Primary:   Amber bg   / Near Black text  5.43:1 AA
       P. hover:  Brown bg   / Off-White text  10.58:1 AAA
       Secondary: Deep Green / Off-White text   4.83:1 AA
       S. hover:  Near Black / Off-White text  13.52:1 AAA
       ─────────────────────────────────────────── */
    /* ── Button Size Tokens ──────────────────────
       sm   — inline / tight spaces
       md   — default, most sections
       lg   — feature sections, plan your visit
       xl   — hero CTAs
       ─────────────────────────────────────────── */
    --btn-sm-size:     0.8125rem;   /* 13px */
    --btn-sm-padding:  8px 20px;
    --btn-sm-tracking: 0.06em;

    --btn-md-size:     0.9375rem;   /* 15px — default */
    --btn-md-padding:  12px 28px;
    --btn-md-tracking: 0.08em;

    --btn-lg-size:     1.0625rem;   /* 17px */
    --btn-lg-padding:  16px 36px;
    --btn-lg-tracking: 0.08em;

    --btn-xl-size:     1.1875rem;   /* 19px */
    --btn-xl-padding:  20px 48px;
    --btn-xl-tracking: 0.06em;

    /* ── Typography ─────────────────────────────── */
    --font-heading:    'Playfair Display', Georgia, serif;
    --font-body:       'Lato', Arial, sans-serif;

    --size-h1:         3.5rem;
    --size-h2:         2.5rem;
    --size-h3:         1.75rem;
    --size-h4:         1.375rem;
    --size-body:       1.125rem;
    --size-small:      0.875rem;
    --size-eyebrow:    0.75rem;
    --size-nav:        1rem;

    --weight-regular:  400;
    --weight-semibold: 600;
    --weight-bold:     700;

    --leading-heading: 1.2;
    --leading-body:    1.75;

    --tracking-tight:  -0.02em;
    --tracking-normal: 0em;
    --tracking-wide:   0.05em;
    --tracking-wider:  0.08em;
    --tracking-widest: 0.15em;

    /* ── Spacing ─────────────────────────────────── */
    --space-xs:        8px;
    --space-sm:        16px;
    --space-md:        24px;
    --space-lg:        48px;
    --space-xl:        80px;
    --space-2xl:       120px;

    /* ── Component Tokens ───────────────────────── */
    --radius-button:   4px;
    --radius-card:     8px;
    --shadow-card:     0 2px 12px rgba(0, 0, 0, 0.08);
    --shadow-card-hover: 0 6px 24px rgba(0, 0, 0, 0.12);
    --transition-base: all 0.2s ease-in-out;
}


/* ============================================================
   GLOBAL BASE STYLES
   Site-wide defaults — no class needed.
   ============================================================ */

body {
    font-family: var(--font-body);
    font-size: var(--size-body);
    line-height: var(--leading-body);
    color: var(--color-charcoal);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.elementor-heading-title {
    font-family: var(--font-heading);
    line-height: var(--leading-heading);
    color: var(--color-earth-brown);
}

h1 { font-size: var(--size-h1); letter-spacing: var(--tracking-tight); }
h2 { font-size: var(--size-h2); letter-spacing: -0.01em; }
h3 { font-size: var(--size-h3); letter-spacing: var(--tracking-normal); }
h4 { font-size: var(--size-h4); font-style: italic; font-weight: var(--weight-regular); }

p { margin-bottom: 1.5em; }
p:last-child { margin-bottom: 0; }

a { color: var(--color-deep-green); transition: var(--transition-base); }
a:hover { color: var(--color-earth-brown); }

#footer a { color: var(--color-white); transition: var(--transition-base); }
#footer a:hover { color: var(--color-white); }

/* Button */
.elementor .elementor-button.elementor-size-lg {
    border-radius: 6px !important;
    transition: all 0.3s ease !important;
}

/* Text inside button */
.elementor .elementor-button.elementor-size-lg .elementor-button-text {
    color: #ffffff !important;
}

/* Hover */
.elementor .elementor-button.elementor-size-lg:hover {

    transform: translateY(-2px) !important;
}

/* Hover text (just in case Elementor overrides it) */
.elementor .elementor-button.elementor-size-lg:hover .elementor-button-text {
    color: #ffffff !important;
}

/* Tablet type scale */
@media (max-width: 1024px) {
    :root {
        --size-h1:   2.75rem;
        --size-h2:   2.125rem;
        --size-h3:   1.5rem;
        --size-h4:   1.25rem;
        --size-body: 1.0625rem;
    }
}

/* Mobile type scale */
@media (max-width: 767px) {
    :root {
        --size-h1:   2.125rem;
        --size-h2:   1.75rem;
        --size-h3:   1.375rem;
        --size-h4:   1.125rem;
        --size-body: 1rem;
    }
}


/* ============================================================
   SEMANTIC BLOCK CLASSES
   Apply one class to describe WHAT a section is.
   Edit the tokens in :root above to change all
   instances of that block type site-wide.
   ============================================================ */


/* ── HERO ────────────────────────────────────────────────────
   Class: block-hero
   The top section of every page containing the H1.
   To change ALL heroes: edit --hero-* in :root.
   ─────────────────────────────────────────────────────────── */

.block-hero { background-color: var(--hero-bg); }

.block-hero h1, .block-hero h2, .block-hero h3,
.block-hero h4, .block-hero h5, .block-hero h6,
.block-hero .elementor-heading-title {
    color: var(--hero-heading);
    font-family: var(--font-heading);
}

.block-hero p, .block-hero li, .block-hero span:not(.elementor-button),
.block-hero label, .block-hero .elementor-text-editor,
.block-hero .elementor-widget-text-editor p {
    color: var(--hero-text);
    font-family: var(--font-body);
}

.block-hero a:not(.elementor-button) { color: var(--hero-link); text-decoration: underline; transition: var(--transition-base); }
.block-hero a:not(.elementor-button):hover { color: var(--hero-link-hover); text-decoration: none; }
.block-hero .elementor-icon i, .block-hero .elementor-icon svg { color: var(--hero-icon); fill: var(--hero-icon); }
.block-hero .elementor-icon-box-title, .block-hero .elementor-icon-box-description { color: var(--hero-text); }
.block-hero .elementor-divider-separator { border-color: var(--hero-divider); }
.block-hero .eyebrow-label .elementor-heading-title { color: var(--hero-eyebrow) !important; }
.block-hero .scripture-quote p { color: var(--hero-quote) !important; border-left-color: var(--hero-quote-border) !important; }


/* ── CTA BAND ────────────────────────────────────────────────
   Class: block-cta
   Mid-page call to action bands.
   To change ALL CTAs: edit --cta-* in :root.
   ─────────────────────────────────────────────────────────── */

.block-cta { background-color: var(--cta-bg); }

.block-cta h1, .block-cta h2, .block-cta h3,
.block-cta h4, .block-cta h5, .block-cta h6,
.block-cta .elementor-heading-title {
    color: var(--cta-heading);
    font-family: var(--font-heading);
}

.block-cta p, .block-cta li, .block-cta span:not(.elementor-button),
.block-cta label, .block-cta .elementor-text-editor,
.block-cta .elementor-widget-text-editor p {
    color: var(--cta-text);
    font-family: var(--font-body);
}

.block-cta a:not(.elementor-button) { color: var(--cta-link); text-decoration: underline; transition: var(--transition-base); }
.block-cta a:not(.elementor-button):hover { color: var(--cta-link-hover); text-decoration: none; }
.block-cta .elementor-icon i, .block-cta .elementor-icon svg { color: var(--cta-icon); fill: var(--cta-icon); }
.block-cta .elementor-icon-box-title, .block-cta .elementor-icon-box-description { color: var(--cta-text); }
.block-cta .elementor-divider-separator { border-color: var(--cta-divider); }
.block-cta .eyebrow-label .elementor-heading-title { color: var(--cta-eyebrow) !important; }
.block-cta .scripture-quote p { color: var(--cta-quote) !important; border-left-color: var(--cta-quote-border) !important; }


/* ── SERVICE TIMES BAR ───────────────────────────────────────
   Class: block-service-times
   The narrow service times strip.
   To change: edit --times-* in :root.
   ─────────────────────────────────────────────────────────── */

.block-service-times { background-color: var(--times-bg); }

.block-service-times h1, .block-service-times h2, .block-service-times h3,
.block-service-times h4, .block-service-times h5, .block-service-times h6,
.block-service-times .elementor-heading-title {
    color: var(--times-heading);
    font-family: var(--font-heading);
}

.block-service-times p, .block-service-times li, .block-service-times span:not(.elementor-button),
.block-service-times strong, .block-service-times label,
.block-service-times .elementor-text-editor,
.block-service-times .elementor-widget-text-editor p {
    color: var(--times-text);
    font-family: var(--font-body);
}

.block-service-times a:not(.elementor-button) { color: var(--times-link); text-decoration: none; transition: var(--transition-base); }
.block-service-times a:not(.elementor-button):hover { color: var(--times-link-hover); }
.block-service-times .elementor-icon i, .block-service-times .elementor-icon svg { color: var(--times-icon); fill: var(--times-icon); }
.block-service-times .elementor-divider-separator { border-color: var(--times-divider); }
.block-service-times .eyebrow-label .elementor-heading-title { color: var(--times-eyebrow) !important; }


/* ── FEATURE SECTION ─────────────────────────────────────────
   Class: block-feature
   Main content sections: welcome, who we are, worship etc.
   Add .alt for the warm gray alternating variant:
   class="block-feature alt"
   To change ALL features: edit --feature-* in :root.
   ─────────────────────────────────────────────────────────── */

.block-feature { background-color: var(--feature-bg); }
.block-feature.alt { background-color: var(--color-warm-gray); }

.block-feature h1, .block-feature h2, .block-feature h3,
.block-feature h4, .block-feature h5, .block-feature h6,
.block-feature .elementor-heading-title:not(.elementor-button-text) {
    color: var(--feature-heading);
    font-family: var(--font-heading);
}

.block-feature p:not(.elementor-button), .block-feature li, .block-feature span:not(.elementor-button),
.block-feature label, .block-feature .elementor-text-editor,
.block-feature .elementor-widget-text-editor p {
    color: var(--feature-text);
    font-family: var(--font-body);
    line-height: var(--leading-body);
}


.block-feature a:not(.elementor-button) { color: var(--feature-link); text-decoration: underline; transition: var(--transition-base); }
.block-feature a:not(.elementor-button):hover { color: var(--feature-link-hover); text-decoration: none; }
.block-feature .elementor-icon i, .block-feature .elementor-icon svg { color: var(--feature-icon); fill: var(--feature-icon); }
.block-feature .elementor-icon-box-title { color: var(--feature-heading); font-family: var(--font-heading); }
.block-feature .elementor-icon-box-description { color: var(--feature-text); }
.block-feature .elementor-divider-separator { border-color: var(--feature-divider); }
.block-feature .eyebrow-label .elementor-heading-title { color: var(--feature-eyebrow) !important; }
.block-feature .scripture-quote p { color: var(--feature-quote) !important; border-left-color: var(--feature-quote-border) !important; }


/* ============================================================
   UTILITY COLOR CLASSES
   Use for sections that don't fit a semantic type,
   or for one-off color overrides.
   ============================================================ */

/* Earth Brown — Off-White text — 10.58:1 AAA */
.section-brown { background-color: var(--color-earth-brown); }
.section-brown h1, .section-brown h2, .section-brown h3,
.section-brown h4, .section-brown h5, .section-brown h6,
.section-brown .elementor-heading-title { color: var(--color-off-white); font-family: var(--font-heading); }
.section-brown p, .section-brown li, .section-brown span:not(.elementor-button),
.section-brown label, .section-brown .elementor-text-editor,
.section-brown .elementor-widget-text-editor p { color: var(--color-off-white); font-family: var(--font-body); }
.section-brown a:not(.elementor-button) { color: var(--color-off-white); text-decoration: underline; transition: var(--transition-base); }
.section-brown a:not(.elementor-button):hover { color: var(--color-amber); text-decoration: none; }
.section-brown .elementor-icon i, .section-brown .elementor-icon svg { color: var(--color-off-white); fill: var(--color-off-white); }
.section-brown .elementor-icon-box-title, .section-brown .elementor-icon-box-description { color: var(--color-off-white); }
.section-brown .elementor-divider-separator { border-color: rgba(249, 248, 245, 0.3); }
.section-brown .eyebrow-label .elementor-heading-title { color: var(--color-amber) !important; }
.section-brown .scripture-quote p { color: var(--color-off-white) !important; border-left-color: var(--color-off-white) !important; }

/* Deep Green — Off-White text — 4.83:1 AA */
.section-green-dark { background-color: var(--color-deep-green); }
.section-green-dark h1, .section-green-dark h2, .section-green-dark h3,
.section-green-dark h4, .section-green-dark h5, .section-green-dark h6,
.section-green-dark .elementor-heading-title { color: var(--color-off-white); font-family: var(--font-heading); }
.section-green-dark p, .section-green-dark li, .section-green-dark span:not(.elementor-button),
.section-green-dark label, .section-green-dark .elementor-text-editor,
.section-green-dark .elementor-widget-text-editor p { color: var(--color-off-white); font-family: var(--font-body); }
.section-green-dark a:not(.elementor-button) { color: var(--color-off-white); text-decoration: underline; transition: var(--transition-base); }
.section-green-dark a:not(.elementor-button):hover { color: var(--color-warm-gray); text-decoration: none; }
.section-green-dark .elementor-icon i, .section-green-dark .elementor-icon svg { color: var(--color-off-white); fill: var(--color-off-white); }
.section-green-dark .elementor-icon-box-title, .section-green-dark .elementor-icon-box-description { color: var(--color-off-white); }
.section-green-dark .elementor-divider-separator { border-color: rgba(249, 248, 245, 0.3); }
.section-green-dark .eyebrow-label .elementor-heading-title { color: var(--color-amber) !important; }
.section-green-dark .scripture-quote p { color: var(--color-off-white) !important; border-left-color: var(--color-off-white) !important; }

/* Leaf Green — Near Black text — 5.11:1 AA
   WARNING: Never use white/off-white text on this bg (2.64:1 FAIL) */
.section-green { background-color: var(--color-leaf-green); }
.section-green h1, .section-green h2, .section-green h3,
.section-green h4, .section-green h5, .section-green h6,
.section-green .elementor-heading-title { color: var(--color-near-black); font-family: var(--font-heading); }
.section-green p, .section-green li, .section-green span:not(.elementor-button),
.section-green label, .section-green .elementor-text-editor,
.section-green .elementor-widget-text-editor p { color: var(--color-near-black); font-family: var(--font-body); }
.section-green a:not(.elementor-button) { color: var(--color-near-black); text-decoration: underline; transition: var(--transition-base); }
.section-green a:not(.elementor-button):hover { color: var(--color-earth-brown); text-decoration: none; }
.section-green .elementor-icon i, .section-green .elementor-icon svg { color: var(--color-near-black); fill: var(--color-near-black); }
.section-green .elementor-icon-box-title, .section-green .elementor-icon-box-description { color: var(--color-near-black); }
.section-green .elementor-divider-separator { border-color: rgba(42, 42, 42, 0.3); }
.section-green .eyebrow-label .elementor-heading-title { color: var(--color-earth-brown) !important; }
.section-green .scripture-quote p { color: var(--color-near-black) !important; border-left-color: var(--color-near-black) !important; }

/* Off-White — Brown headings 10.58:1 AAA / Charcoal body 10.23:1 AAA */
.section-offwhite { background-color: var(--color-off-white); }
.section-offwhite h1, .section-offwhite h2, .section-offwhite h3,
.section-offwhite h4, .section-offwhite h5, .section-offwhite h6,
.section-offwhite .elementor-heading-title { color: var(--color-earth-brown); font-family: var(--font-heading); }
.section-offwhite p, .section-offwhite li, .section-offwhite span:not(.elementor-button),
.section-offwhite label, .section-offwhite .elementor-text-editor,
.section-offwhite .elementor-widget-text-editor p { color: var(--color-charcoal); font-family: var(--font-body); }
.section-offwhite a:not(.elementor-button) { color: var(--color-deep-green); text-decoration: underline; transition: var(--transition-base); }
.section-offwhite a:not(.elementor-button):hover { color: var(--color-earth-brown); text-decoration: none; }
.section-offwhite .elementor-icon i, .section-offwhite .elementor-icon svg { color: var(--color-leaf-green); fill: var(--color-leaf-green); }
.section-offwhite .elementor-icon-box-title { color: var(--color-earth-brown); }
.section-offwhite .elementor-icon-box-description { color: var(--color-charcoal); }
.section-offwhite .elementor-divider-separator { border-color: var(--color-leaf-green); }
.section-offwhite .eyebrow-label .elementor-heading-title { color: var(--color-amber-accessible) !important; }
.section-offwhite .scripture-quote p { color: var(--color-deep-green) !important; border-left-color: var(--color-leaf-green) !important; }

/* Warm Gray — Brown headings 9.28:1 AAA / Charcoal body 8.97:1 AAA */
.section-warmgray { background-color: var(--color-warm-gray); }
.section-warmgray h1, .section-warmgray h2, .section-warmgray h3,
.section-warmgray h4, .section-warmgray h5, .section-warmgray h6,
.section-warmgray .elementor-heading-title:not(.elementor-button-text) { color: var(--color-earth-brown); font-family: var(--font-heading); }
.section-warmgray p:not(.elementor-button), .section-warmgray li, .section-warmgray span:not(.elementor-button),
.section-warmgray label, .section-warmgray .elementor-text-editor,
.section-warmgray .elementor-widget-text-editor p { color: var(--color-charcoal); font-family: var(--font-body); }
.section-warmgray a:not(.elementor-button) { color: var(--color-deep-green); text-decoration: underline; transition: var(--transition-base); }
.section-warmgray a:not(.elementor-button):hover { color: var(--color-earth-brown); text-decoration: none; }
.section-warmgray .elementor-icon i, .section-warmgray .elementor-icon svg { color: var(--color-leaf-green); fill: var(--color-leaf-green); }
.section-warmgray .elementor-icon-box-title { color: var(--color-earth-brown); }
.section-warmgray .elementor-icon-box-description { color: var(--color-charcoal); }
.section-warmgray .elementor-divider-separator { border-color: var(--color-earth-brown); }
.section-warmgray .eyebrow-label .elementor-heading-title { color: var(--color-amber-accessible) !important; }
.section-warmgray .scripture-quote p { color: var(--color-deep-green) !important; border-left-color: var(--color-leaf-green) !important; }

/* Near Black — Off-White text — 13.52:1 AAA */
.section-black { background-color: var(--color-near-black); }
.section-black h1, .section-black h2, .section-black h3,
.section-black h4, .section-black h5, .section-black h6,
.section-black .elementor-heading-title { color: var(--color-off-white); font-family: var(--font-heading); }
.section-black p, .section-black li, .section-black span:not(.elementor-button),
.section-black label, .section-black .elementor-text-editor,
.section-black .elementor-widget-text-editor p { color: var(--color-off-white); font-family: var(--font-body); }
.section-black a:not(.elementor-button) { color: var(--color-off-white); text-decoration: underline; transition: var(--transition-base); }
.section-black a:not(.elementor-button):hover { color: var(--color-amber); text-decoration: none; }
.section-black .elementor-icon i, .section-black .elementor-icon svg { color: var(--color-off-white); fill: var(--color-off-white); }
.section-black .elementor-icon-box-title, .section-black .elementor-icon-box-description { color: var(--color-off-white); }
.section-black .elementor-divider-separator { border-color: rgba(249, 248, 245, 0.2); }
.section-black .eyebrow-label .elementor-heading-title { color: var(--color-amber) !important; }
.section-black .scripture-quote p { color: var(--color-off-white) !important; border-left-color: var(--color-off-white) !important; }


/* ============================================================
   WIDGET COMPONENT CLASSES
   Apply to individual widgets inside any section.
   ============================================================ */


/* ── EYEBROW LABEL ───────────────────────────────────────────
   Class: eyebrow-label
   Apply to a Heading widget above an H2.
   Color is set automatically by the parent section.
   ─────────────────────────────────────────────────────────── */

.eyebrow-label .elementor-heading-title {
    font-family: var(--font-body) !important;
    font-size: var(--size-eyebrow) !important;
    font-weight: var(--weight-bold) !important;
    letter-spacing: var(--tracking-widest) !important;
    text-transform: uppercase !important;
    color: var(--color-amber-accessible) !important;
    margin-bottom: var(--space-xs) !important;
    line-height: 1 !important;
}


/* ── SCRIPTURE / PULL QUOTE ──────────────────────────────────
   Class: scripture-quote
   Apply to a Text Editor widget containing a quote.
   Color and border adapt automatically to parent section.
   ─────────────────────────────────────────────────────────── */

.scripture-quote .elementor-widget-text-editor p,
.scripture-quote p {
    font-family: var(--font-heading) !important;
    font-style: italic !important;
    font-size: 1.5rem !important;
    line-height: 1.4 !important;
    border-left: 4px solid var(--color-leaf-green) !important;
    padding-left: 20px !important;
    margin: var(--space-md) auto !important;
    max-width: 65ch !important;
    color: var(--color-deep-green) !important;
}

@media (max-width: 767px) {
    .scripture-quote p {
        font-size: 1.125rem !important;
        border-left: none !important;
        padding-left: 0 !important;
        text-align: center !important;
        border-top: 4px solid var(--color-leaf-green) !important;
        padding-top: var(--space-sm) !important;
    }
}


/* ── CARD ────────────────────────────────────────────────────
   Class: card
   Apply to an inner container for sermon/event cards.
   ─────────────────────────────────────────────────────────── */

.card {
    background-color: var(--color-white) !important;
    border-radius: var(--radius-card) !important;
    box-shadow: var(--shadow-card) !important;
    border-top: 4px solid var(--color-leaf-green) !important;
    transition: var(--transition-base) !important;
}

.card:hover {
    box-shadow: var(--shadow-card-hover) !important;
    transform: translateY(-2px) !important;
}

.card h1, .card h2, .card h3, .card h4 { color: var(--color-earth-brown); font-family: var(--font-heading); }
.card p, .card li { color: var(--color-charcoal); font-family: var(--font-body); }
.card .elementor-icon i, .card .elementor-icon svg { color: var(--color-leaf-green); }
.card .eyebrow-label .elementor-heading-title { color: var(--color-amber-accessible) !important; }


/* ============================================================
   PROSE / READABLE WIDTH CLASSES
   WCAG 1.4.8 — recommended line length: 45–75 characters.
   Apply to text widget containers, not the outer section.
   Uses ch units — scales correctly with the actual typeface.
   ============================================================ */

/* Standard ~65ch | Wide ~75ch | Narrow ~45ch
   WHERE TO APPLY IN ELEMENTOR:
   Apply to the inner container or widget directly wrapping
   the text — NOT the outer section container.

   IMPORTANT: If applying to an Elementor inner container,
   set the container Width to "Default" in the Layout tab
   so Elementor's own inline width doesn't override this.
   ─────────────────────────────────────────────────────── */

.prose,
.prose-wide,
.prose-narrow {
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
    align-self: center !important;
    box-sizing: border-box !important;
}

.prose        { max-width: 65ch !important; }
.prose-wide   { max-width: 75ch !important; }
.prose-narrow { max-width: 45ch !important; }

/* Content inside fills the container */
.prose p, .prose li, .prose h1, .prose h2,
.prose h3, .prose h4, .prose .elementor-heading-title,
.prose-wide p, .prose-wide li, .prose-wide h1,
.prose-wide h2, .prose-wide h3, .prose-wide h4,
.prose-wide .elementor-heading-title,
.prose-narrow p, .prose-narrow li, .prose-narrow h1,
.prose-narrow h2, .prose-narrow h3, .prose-narrow h4,
.prose-narrow .elementor-heading-title {
    max-width: 100%;
}

/* Mobile — all prose full width */
@media (max-width: 767px) {
    .prose,
    .prose-wide,
    .prose-narrow {
        max-width: 100% !important;
    }
}





/* ============================================================
   BUTTON CLASSES

   TWO CONTEXTS:

   LIGHT SECTIONS (off-white, warm gray backgrounds):
   .btn-primary        Amber bg, off-white text — main CTA
   .btn-secondary      Deep Green bg, off-white text
   .btn-outline        Transparent, Brown border + text

   DARK SECTIONS (brown, near-black backgrounds):
   .btn-primary-dark   Off-White bg, Brown text — main CTA
   .btn-secondary-dark Deep Green bg, off-white text
   .btn-outline-dark   Transparent, Off-White border + text

   SIZE MODIFIER (combine with any class above):
   .btn-sm    13px  8/20px    inline / tight spaces
   .btn-md    15px  12/28px   default — no class needed
   .btn-lg    17px  16/36px   feature section CTAs
   .btn-xl    19px  20/48px   hero / primary page CTAs

   Example: class="btn-primary btn-lg"
   Example: class="btn-outline-dark btn-xl"

   WCAG AA confirmed:
   btn-primary          Off-White on Amber #95671D   4.67:1 AA
   btn-primary hover    Off-White on #8F631C         4.98:1 AA
   btn-secondary        Off-White on Green #4A7A1E   4.83:1 AA
   btn-secondary hover  Off-White on #46741C         5.24:1 AA
   btn-outline          Brown on Off-White          10.58:1 AAA
   btn-primary-dark     Brown on Off-White          10.58:1 AAA
   btn-secondary-dark   Off-White on Green           4.83:1 AA
   btn-outline-dark     Off-White on Brown          10.58:1 AAA
   ============================================================ */


/* ── SHARED BASE ─────────────────────────────────────────────
   Font, weight, radius, transition, default md size.
   ─────────────────────────────────────────────────────────── */

.btn-primary .elementor-button,
.btn-secondary .elementor-button,
.btn-outline .elementor-button,
.btn-primary-dark .elementor-button,
.btn-secondary-dark .elementor-button,
.btn-dark-brown .elementor-button,
.btn-outline-dark .elementor-button {
    display: inline-block !important;
    font-family: var(--font-body) !important;
    font-weight: var(--weight-bold) !important;
    border-radius: var(--radius-button) !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: var(--transition-base) !important;
    font-size: var(--btn-md-size) !important;
    /* Shorthand + individual sides — Elementor Theme Style
       sometimes sets sides individually, which can override
       the shorthand even with !important */
    padding: var(--btn-md-padding) !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    padding-left: 28px !important;
    padding-right: 28px !important;
    letter-spacing: var(--btn-md-tracking) !important;
    box-sizing: border-box !important;
}

/* ── GLOBAL BUTTON TEXT ENFORCEMENT ─────────────────────────
   Ensures button text colours and line-height are never
   overridden by section rules, regardless of section.
   Placed here for high cascade priority.
   ─────────────────────────────────────────────────────────── */

/* Line-height reset — scoped tightly to button text only.
   Prevents section line-height: 1.75 from inflating button height.
   Targets only the inner text span, not surrounding paragraphs. */
.btn-primary .elementor-button .elementor-button-text,
.btn-secondary .elementor-button .elementor-button-text,
.btn-outline .elementor-button .elementor-button-text,
.btn-primary-dark .elementor-button .elementor-button-text,
.btn-secondary-dark .elementor-button .elementor-button-text,
.btn-outline-dark .elementor-button .elementor-button-text,
.btn-dark-brown .elementor-button .elementor-button-text {
    line-height: 1 !important;
    display: inline !important;
}

.btn-primary .elementor-button,
.btn-primary .elementor-button span,
.btn-primary .elementor-button .elementor-button-text {
    color: #F9F8F5 !important;
}
.btn-secondary .elementor-button,
.btn-secondary .elementor-button span,
.btn-secondary .elementor-button .elementor-button-text {
    color: #F9F8F5 !important;
}
.btn-outline .elementor-button,
.btn-outline .elementor-button span,
.btn-outline .elementor-button .elementor-button-text {
    color: #4A3728 !important;
}
.btn-outline .elementor-button:hover,
.btn-outline .elementor-button:hover span,
.btn-outline .elementor-button:hover .elementor-button-text {
    color: #F9F8F5 !important;
}
.btn-primary-dark .elementor-button,
.btn-primary-dark .elementor-button span,
.btn-primary-dark .elementor-button .elementor-button-text {
    color: #4A3728 !important;
}
.btn-secondary-dark .elementor-button,
.btn-secondary-dark .elementor-button span,
.btn-secondary-dark .elementor-button .elementor-button-text {
    color: #F9F8F5 !important;
}
.btn-outline-dark .elementor-button,
.btn-outline-dark .elementor-button span,
.btn-outline-dark .elementor-button .elementor-button-text {
    color: #F9F8F5 !important;
}
.btn-dark-brown .elementor-button,
.btn-dark-brown .elementor-button span,
.btn-dark-brown .elementor-button .elementor-button-text {
    color: #F9F8F5 !important;
}
.btn-dark-brown .elementor-button:hover,
.btn-dark-brown .elementor-button:hover span,
.btn-dark-brown .elementor-button:hover .elementor-button-text {
    color: #F9F8F5 !important;
}


/* ── LIGHT SECTION BUTTONS ───────────────────────────────────
   Use on: off-white, warm gray, any light background.
   ─────────────────────────────────────────────────────────── */

/* Primary — Amber #95671D / Off-White
   4.67:1 AA  |  hover 4.98:1 AA */
.btn-primary .elementor-button {
    background-color: #95671D !important;
    color: #F9F8F5 !important;
    border: 2px solid transparent !important;
}
.btn-primary .elementor-button:hover {
    background-color: #8F631C !important;
    color: #F9F8F5 !important;
    border-color: transparent !important;
}

/* Secondary — Deep Green #4A7A1E / Off-White
   4.83:1 AA  |  hover 5.24:1 AA */
.btn-secondary .elementor-button {
    background-color: #4A7A1E !important;
    color: #F9F8F5 !important;
    border: 2px solid transparent !important;
}
.btn-secondary .elementor-button:hover {
    background-color: #46741C !important;
    color: #F9F8F5 !important;
    border-color: transparent !important;
}

/* Outline — transparent / Brown #4A3728 border + text
   10.58:1 AAA  |  hover fills Brown solid */
.btn-outline .elementor-button {
    background-color: transparent !important;
    color: #4A3728 !important;
    border: 2px solid #4A3728 !important;
    border-width: 2px !important;
    border-style: solid !important;
    border-color: #4A3728 !important;
}
.btn-outline .elementor-button:hover {
    background-color: #4A3728 !important;
    color: #F9F8F5 !important;
    border-color: #4A3728 !important;
}


/* ── DARK SECTION BUTTONS ────────────────────────────────────
   Use on: brown, near-black backgrounds.
   ─────────────────────────────────────────────────────────── */

/* Primary Dark — Off-White / Brown text
   10.58:1 AAA  |  hover 9.93:1 AAA */
.btn-primary-dark .elementor-button {
    background-color: #F9F8F5 !important;
    color: #4A3728 !important;
    border: 2px solid transparent !important;
}
.btn-primary-dark .elementor-button:hover {
    background-color: #F5F0EB !important;
    color: #4A3728 !important;
    border-color: transparent !important;
}

/* Secondary Dark — Deep Green / Off-White
   Same as light secondary, works on dark too  4.83:1 AA */
.btn-secondary-dark .elementor-button {
    background-color: #4A7A1E !important;
    color: #F9F8F5 !important;
    border: 2px solid transparent !important;
}
.btn-secondary-dark .elementor-button:hover {
    background-color: #46741C !important;
    color: #F9F8F5 !important;
    border-color: transparent !important;
}

/* Outline Dark — transparent / Off-White border + text
   10.58:1 AAA  |  hover 10% black overlay */
.btn-outline-dark .elementor-button {
    background-color: transparent !important;
    color: #F9F8F5 !important;
    border: 2px solid #F9F8F5 !important;
    border-width: 2px !important;
    border-style: solid !important;
    border-color: #F9F8F5 !important;
}
.btn-outline-dark .elementor-button:hover {
    background-color: rgba(0, 0, 0, 0.10) !important;
    color: #F9F8F5 !important;
    border-color: #F9F8F5 !important;
}




/* ── BTN-DARK-BROWN ──────────────────────────────────────────
   Solid: Earth Brown #4A3728 / Off-White text
   Use on: light sections as a warm authoritative CTA
   Default: 10.58:1 AAA  |  Hover: 11.32:1 AAA
   ─────────────────────────────────────────────────────────── */

.btn-dark-brown .elementor-button {
    background-color: #4A3728 !important;
    color: #F9F8F5 !important;
    border: 2px solid transparent !important;
}
.btn-dark-brown .elementor-button:hover {
    background-color: #443325 !important;
    color: #F9F8F5 !important;
    border-color: transparent !important;
}

/* ── BUTTON SIZE CLASSES ─────────────────────────────────────
   Combine with any button class.
   No size class = btn-md by default.
   ─────────────────────────────────────────────────────────── */

.btn-sm .elementor-button {
    font-size: var(--btn-sm-size) !important;
    padding: var(--btn-sm-padding) !important;
    letter-spacing: var(--btn-sm-tracking) !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
}
.btn-md .elementor-button {
    font-size: var(--btn-md-size) !important;
    padding: var(--btn-md-padding) !important;
    letter-spacing: var(--btn-md-tracking) !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    padding-left: 28px !important;
    padding-right: 28px !important;
}
.btn-lg .elementor-button {
    font-size: var(--btn-lg-size) !important;
    padding: var(--btn-lg-padding) !important;
    letter-spacing: var(--btn-lg-tracking) !important;
    padding-top: 16px !important;
    padding-bottom: 16px !important;
    padding-left: 36px !important;
    padding-right: 36px !important;
}
.btn-xl .elementor-button {
    font-size: var(--btn-xl-size) !important;
    padding: var(--btn-xl-padding) !important;
    letter-spacing: var(--btn-xl-tracking) !important;
    padding-top: 20px !important;
    padding-bottom: 20px !important;
    padding-left: 48px !important;
    padding-right: 48px !important;
}

/* Mobile — full width, xl and lg step down one size */
@media (max-width: 767px) {
    .btn-primary .elementor-button,
    .btn-secondary .elementor-button,
    .btn-outline .elementor-button,
    .btn-primary-dark .elementor-button,
    .btn-secondary-dark .elementor-button,
    .btn-dark-brown .elementor-button,
    .btn-outline-dark .elementor-button {
        width: 100% !important;
        text-align: center !important;
    }
    .btn-xl .elementor-button {
        font-size: var(--btn-lg-size) !important;
        padding: var(--btn-lg-padding) !important;
    }
    .btn-lg .elementor-button {
        font-size: var(--btn-md-size) !important;
        padding: var(--btn-md-padding) !important;
    }
}


/* ============================================================
   IMAGE CLASSES
   Apply to Elementor Image widgets via Advanced → CSS Classes.
   ============================================================ */


/* ── img-brand ───────────────────────────────────────────────
   Primary brand treatment — green top border, subtle shadow.
   Use for: building, congregation, event photos.
   ─────────────────────────────────────────────────────────── */

.img-brand .elementor-image img,
.img-brand img {
    display: block;
    width: 100%;
    height: auto;
    border-top: 4px solid var(--color-leaf-green);
    box-shadow: var(--shadow-card);
    transition: var(--transition-base);
}

.img-brand:hover .elementor-image img,
.img-brand:hover img {
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-2px);
}


/* ── img-portrait ────────────────────────────────────────────
   Circular headshot — green border ring.
   Use for: Kevin Smith, any person headshot.
   ─────────────────────────────────────────────────────────── */

.img-portrait .elementor-image img,
.img-portrait img {
    display: block;
    width: 180px;
    height: 180px;
    object-fit: cover;
    border-radius: 50%;
    border: 4px solid var(--color-leaf-green);
    box-shadow: var(--shadow-card);
    margin-left: auto;
    margin-right: auto;
    transition: var(--transition-base);
}

.img-portrait:hover .elementor-image img,
.img-portrait:hover img {
    border-color: var(--color-deep-green);
    box-shadow: var(--shadow-card-hover);
}

@media (max-width: 767px) {
    .img-portrait .elementor-image img,
    .img-portrait img {
        width: 140px;
        height: 140px;
    }
}


/* ── img-full ────────────────────────────────────────────────
   Full bleed — no border, no shadow, edge to edge.
   Use for: hero background supplements, wide section banners.
   ─────────────────────────────────────────────────────────── */

.img-full .elementor-image img,
.img-full img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}


/* ── img-logo ────────────────────────────────────────────────
   Logo treatment — clean, no decoration, contain fit.
   Use for: site logo, partner logos.
   ─────────────────────────────────────────────────────────── */

.img-logo .elementor-image img,
.img-logo img {
    display: block;
    max-width: 100%;
    height: auto;
    object-fit: contain;
}


/* ── img-caption ─────────────────────────────────────────────
   Photo with a styled caption below.
   Use Elementor Image widget with Caption enabled.
   Caption auto-switches to off-white on dark sections.
   ─────────────────────────────────────────────────────────── */

.img-caption .elementor-image img,
.img-caption img {
    display: block;
    width: 100%;
    height: auto;
    border-top: 4px solid var(--color-leaf-green);
    box-shadow: var(--shadow-card);
}

.img-caption .elementor-image-caption,
.img-caption figcaption {
    display: block;
    font-family: var(--font-body);
    font-size: var(--size-small);
    font-style: italic;
    color: var(--color-charcoal);
    text-align: center;
    margin-top: var(--space-xs);
    opacity: 0.75;
}

/* Caption on dark sections */
.section-brown .img-caption .elementor-image-caption,
.section-brown .img-caption figcaption,
.section-green-dark .img-caption .elementor-image-caption,
.section-green-dark .img-caption figcaption,
.section-black .img-caption .elementor-image-caption,
.section-black .img-caption figcaption,
.block-hero .img-caption .elementor-image-caption,
.block-hero .img-caption figcaption,
.block-cta .img-caption .elementor-image-caption,
.block-cta .img-caption figcaption,
.block-service-times .img-caption .elementor-image-caption,
.block-service-times .img-caption figcaption {
    color: var(--color-off-white);
}


/* ── img-responsive ──────────────────────────────────────────
   Forces correct scaling on mobile.
   Apply if an image isn't behaving on small screens.
   ─────────────────────────────────────────────────────────── */

.img-responsive .elementor-image img,
.img-responsive img {
    display: block;
    max-width: 100%;
    height: auto;
}


/* ============================================================
   VISIBILITY UTILITIES
   Show/hide elements at different breakpoints.

   HOW TO USE IN ELEMENTOR NAVIGATION:
   Edit the nav menu → find the individual menu item →
   Advanced → CSS Classes → apply the class.

   .hide-desktop     Hidden on desktop, visible on mobile/tablet
   .hide-tablet      Hidden on tablet and below
   .hide-mobile      Hidden on mobile, visible on desktop/tablet
   .hide-all         Hidden at all breakpoints (useful for staging)
   ============================================================ */

/* Hidden on desktop only (1025px and above) */
.hide-desktop {
    display: none !important;
}

@media (max-width: 1024px) {
    .hide-desktop {
        display: block !important;
    }
}

/* Hidden on tablet and below */
.hide-tablet {
    display: block !important;
}

@media (max-width: 1024px) {
    .hide-tablet {
        display: none !important;
    }
}

/* Hidden on mobile only (767px and below) */
.hide-mobile {
    display: block !important;
}

@media (max-width: 767px) {
    .hide-mobile {
        display: none !important;
    }
}

/* Hidden everywhere — useful for WIP or staging items */
.hide-all {
    display: none !important;
}

/* ============================================================
   SECTION PADDING
   Responsive top/bottom padding for all section classes.
   Uses em units — scales with base font size.

   Desktop / Tablet (1024px) / Mobile (767px)
   ============================================================ */

/* Hero */
.block-hero {
    padding-top: 5.5em;
    padding-bottom: 5.5em;
}

/* CTA band, feature sections, all utility colour sections */
.block-cta,
.block-feature,
.section-brown,
.section-green-dark,
.section-green,
.section-offwhite,
.section-warmgray,
.section-black {
    padding-top: 3.5em;
    padding-bottom: 3.5em;
}

/* Service times — narrow strip */
.block-service-times {
    padding-top: 1.5em;
    padding-bottom: 1.5em;
}

/* Tablet */
@media (max-width: 1024px) {
    .block-hero {
        padding-top: 3em;
        padding-bottom: 3em;
    }
    .block-cta,
    .block-feature,
    .section-brown,
    .section-green-dark,
    .section-green,
    .section-offwhite,
    .section-warmgray,
    .section-black {
        padding-top: 3em;
        padding-bottom: 3em;
    }
    .block-service-times {
        padding-top: 1.25em;
        padding-bottom: 1.25em;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .block-hero {
        padding: 1.5em;
    }
    .block-cta,
    .block-feature,
    .section-brown,
    .section-green-dark,
    .section-green,
    .section-offwhite,
    .section-warmgray,
    .section-black {
        padding: 1.5em;
    }
    .block-service-times {
        padding: 1.5em;
    }
}/* End custom CSS */