/*------------------------------------*\

    Flexible Content — shared foundation

    Design tokens mirror the site's Avada global options so the flexible
    layouts inherit the same brand as the Fusion Builder pages:

      Theme Options -> Color Palette   colors 1-8 (green #3d6f42 / #1e3120)
      Theme Options -> Typography      Trocchi headings, Work Sans body
      Theme Options -> Buttons         flat, pill radius, green fill

    Avada's compiled stylesheet loads *after* this file, so component rules
    are scoped under .fx-flexible-page to win on specificity rather than
    source order. Buttons use template-owned classes and do not depend on
    Fusion button markup.

\*------------------------------------*/

:root {
    /* Brand palette (Avada color palette) */
    --fx-dark-green: #1e3120;
    --fx-green: #3d6f42;
    --fx-green-hover: #345e39;
    --fx-heading-green: #496e46;
    --fx-cream: #f8f5f2;
    --fx-light-gray: #f1f1f1;
    --fx-gray: #f2f3f5;
    --fx-white: #ffffff;
    --fx-text: #212934;
    --fx-muted: #5c6660;
    --fx-border: #e2e2e2;
    --fx-border-soft: rgba(30, 49, 32, 0.1);
    --fx-gold: #c89b3c;

    /* Brand mark (RAW-Tree-Icon, attachment 2601) used as a decorative
       ::before on headings. Its white ring reads fine unmodified on both
       light and dark (#1E3120) section backgrounds, so no separate
       dark-background variant/filter is needed. */
    --fx-heading-mark: url("/wp-content/uploads/2023/06/RAW-Tree-Icon_200_2.png");

    /* Typography — inherits Avada's global sets */
    --fx-font-display: var(--awb-typography1-font-family, "Trocchi", Georgia, serif);
    --fx-font-body: var(--awb-typography4-font-family, "Work Sans", Arial, Helvetica, sans-serif);

    /* Fluid heading scale (Avada's static 30px h2 is small for section heads) */
    --fx-h2-size: clamp(1.875rem, 1.35rem + 2.1vw, 2.625rem);
    --fx-h3-size: clamp(1.375rem, 1.16rem + 0.85vw, 1.75rem);

    /* Surfaces */
    --fx-radius-sm: 0.375rem;
    --fx-radius: 0.75rem;
    --fx-radius-lg: 1.25rem;
    --fx-radius-pill: 62.4375rem;
    --fx-shadow-sm: 0 0.0625rem 0.125rem rgba(30, 49, 32, 0.05), 0 0.125rem 0.5rem rgba(30, 49, 32, 0.04);
    --fx-shadow: 0 0.5rem 1.75rem rgba(30, 49, 32, 0.09);
    --fx-shadow-lg: 0 1.25rem 3rem rgba(30, 49, 32, 0.16);

    --fx-section-space: 3.5rem;
    --fx-content-width: 75rem;
    --fx-transition: 0.2s ease;
    --fx-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

.fx-flexible-page .post-content {
    margin: 0;
}

.page-template-template-flexible-content #main {
    padding: 0 !important;
}

.page-template-template-flexible-content #main > .fusion-row {
    max-width: none;
    width: 100%;
}

.page-template-template-flexible-content #main #content.fx-flexible-page {
    float: none;
    margin: 0;
    max-width: none;
    width: 100%;
}

.fx-flexible-page .container {
    box-sizing: border-box;
    margin-inline: auto;
    max-width: var(--fx-content-width);
    padding-inline: 1.25rem;
    width: 100%;
}

.fx-flexible-page .section-padding {
    padding-block: var(--fx-section-space);
}

.fx-flexible-page .section-margins {
    margin-block: var(--fx-section-space);
}

/* Keep anchored sections clear of the sticky header */
.fx-flexible-page > section[id] {
    scroll-margin-top: 6rem;
}


/*------------------------------------*\
    Backgrounds
\*------------------------------------*/

.fx-flexible-page .bg-white {
    background: var(--fx-white);
    color: var(--fx-text);
}

.fx-flexible-page .bg-green {
    background: var(--fx-dark-green);
    color: rgba(255, 255, 255, 0.88);
}

.fx-flexible-page .bg-light-gray {
    background: var(--fx-light-gray);
    color: var(--fx-text);
}

.fx-flexible-page .bg-cream {
    background: var(--fx-cream);
    color: var(--fx-text);
}


/*------------------------------------*\
    Typography
\*------------------------------------*/

.fx-flexible-page .fx-section-heading h2,
.fx-flexible-page .image-text__text h2,
.fx-flexible-page .contact-block__text h2,
.fx-flexible-page .wysiwyg__wrapper h2,
.fx-flexible-page .cta__content h2 {
    font-family: var(--fx-font-display);
    font-size: var(--fx-h2-size);
    letter-spacing: -0.01em;
    line-height: 1.2;
    margin-block: 0 0.6em;
}

.fx-flexible-page .fx-section-heading h2,
.fx-flexible-page .image-text__text h2,
.fx-flexible-page .contact-block__text h2,
.fx-flexible-page .wysiwyg__wrapper h2 {
    color: var(--fx-dark-green);
}

.fx-flexible-page .fx-section-heading h3,
.fx-flexible-page .image-text__text h3,
.fx-flexible-page .contact-block__text h3,
.fx-flexible-page .wysiwyg__wrapper h3 {
    font-size: var(--fx-h3-size);
    line-height: 1.35;
    margin-block: 1.25em 0.5em;
}

/* Same brand mark as the section heading (see .fx-section-heading below).
   The mark and line fill the available heading width so the line responds
   to the content width instead of relying on a fixed measurement. */
.fx-flexible-page .image-text__text h2:first-of-type::before,
.fx-flexible-page .contact-block__text h2:first-of-type::before,
.fx-flexible-page .wysiwyg__wrapper h2:first-of-type::before {
    background:
        var(--fx-heading-mark) no-repeat left center / 2rem 2rem,
        linear-gradient(var(--fx-heading-line, rgba(73, 110, 70, 0.35)), var(--fx-heading-line, rgba(73, 110, 70, 0.35))) no-repeat left 2.75rem center / 3rem 0.1875rem;
    content: "";
    display: block;
    height: 2rem;
    margin-bottom: 1.25rem;
    width: 100%;
}

/* Keep editor-selected heading alignment and its decoration in sync. */
.fx-flexible-page :is(.image-text__text, .contact-block__text, .wysiwyg__wrapper) h2:first-of-type:is(.aligncenter, .has-text-align-center, [style*="text-align: center"], [style*="text-align:center"])::before {
    background:
        var(--fx-heading-mark) no-repeat center / 2rem 2rem,
        linear-gradient(
            to right,
            transparent calc(50% - 5rem),
            var(--fx-heading-line, rgba(73, 110, 70, 0.35)) calc(50% - 5rem) calc(50% - 2rem),
            transparent calc(50% - 2rem) calc(50% + 2rem),
            var(--fx-heading-line, rgba(73, 110, 70, 0.35)) calc(50% + 2rem) calc(50% + 5rem),
            transparent calc(50% + 5rem)
        ) no-repeat center / 100% 0.1875rem;
}

.fx-flexible-page :is(.image-text__text, .contact-block__text, .wysiwyg__wrapper) h2:first-of-type:is(.alignright, .has-text-align-right, [style*="text-align: right"], [style*="text-align:right"])::before {
    background:
        var(--fx-heading-mark) no-repeat right center / 2rem 2rem,
        linear-gradient(var(--fx-heading-line, rgba(73, 110, 70, 0.35)), var(--fx-heading-line, rgba(73, 110, 70, 0.35))) no-repeat right 2.75rem center / 3rem 0.1875rem;
}

/* Optional editor utility: the site's "Subheadings" type set as an eyebrow */
.fx-flexible-page .fx-eyebrow {
    color: var(--fx-green);
    display: block;
    font-family: var(--awb-typography2-font-family, var(--fx-font-body));
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    line-height: 1.2;
    margin: 0 0 0.9375rem;
    text-transform: uppercase;
}

/* Body links inside editor-controlled content */
.fx-flexible-page .wysiwyg__wrapper a:not(.fusion-button):not(.btn),
.fx-flexible-page .image-text__text a:not(.fusion-button):not(.btn),
.fx-flexible-page .contact-block__text a:not(.fusion-button):not(.btn),
.fx-flexible-page .fx-section-heading a:not(.fusion-button):not(.btn),
.fx-flexible-page .fx-accordion__panel__content a:not(.fusion-button):not(.btn),
.fx-flexible-page .tab-accordion__panel__content a:not(.fusion-button):not(.btn) {
    color: var(--fx-green);
    text-decoration: underline;
    text-decoration-thickness: 0.0625rem;
    text-underline-offset: 0.1875rem;
    transition: color var(--fx-transition);
}

.fx-flexible-page .wysiwyg__wrapper a:not(.fusion-button):not(.btn):hover,
.fx-flexible-page .image-text__text a:not(.fusion-button):not(.btn):hover,
.fx-flexible-page .contact-block__text a:not(.fusion-button):not(.btn):hover,
.fx-flexible-page .fx-section-heading a:not(.fusion-button):not(.btn):hover,
.fx-flexible-page .fx-accordion__panel__content a:not(.fusion-button):not(.btn):hover,
.fx-flexible-page .tab-accordion__panel__content a:not(.fusion-button):not(.btn):hover {
    color: var(--fx-dark-green);
}


/*------------------------------------*\
    Dark green surface text

    Background Color = Green / Dark Green paints #1E3120. Brand green
    (#3D6F42) and dark-green heading ink fail WCAG on that surface, and
    the content-area h2 rule above matches .bg-green h2 on specificity
    while winning on source order. These selectors are deliberately one
    class deeper so light-surface typography never leaks onto dark blocks.
\*------------------------------------*/

.fx-flexible-page .bg-green :is(.wysiwyg__wrapper, .image-text__text, .fx-section-heading, .contact-block__text) {
    color: rgba(255, 255, 255, 0.88);
}

.fx-flexible-page .bg-green :is(.wysiwyg__wrapper, .image-text__text, .fx-section-heading, .contact-block__text) :is(h1, h2, h3, h4, h5, h6),
.fx-flexible-page .bg-green :is(.wysiwyg__wrapper, .image-text__text, .fx-section-heading, .contact-block__text) :is(strong, b) {
    color: var(--fx-white);
}

.fx-flexible-page .bg-green .fx-eyebrow,
.fx-flexible-page .cta .fx-eyebrow {
    color: rgba(255, 255, 255, 0.72);
}

.fx-flexible-page .bg-green :is(.wysiwyg__wrapper, .image-text__text, .fx-section-heading, .contact-block__text) a:not(.fusion-button):not(.btn) {
    color: var(--fx-white);
}

.fx-flexible-page .bg-green :is(.wysiwyg__wrapper, .image-text__text, .fx-section-heading, .contact-block__text) a:not(.fusion-button):not(.btn):hover {
    color: rgba(255, 255, 255, 0.75);
}

.fx-flexible-page .bg-green .fx-section-heading h2 + p {
    color: rgba(255, 255, 255, 0.82);
}


/*------------------------------------*\
    Section heading
\*------------------------------------*/

.fx-flexible-page .fx-section-heading {
    margin: 0 auto 3rem;
    max-width: 48rem;
    text-align: center;
}

/* Brand mark above the section title. Anchored to the first h2 itself
   rather than the wrapper: accordion/tabs/image-cards render this from a
   WYSIWYG field where the admin picks the heading level (or skips it).
   Centered marks get a fluid line on both sides. */
.fx-flexible-page .fx-section-heading h2:first-of-type::before {
    background:
        var(--fx-heading-mark) no-repeat center / 2rem 2rem,
        linear-gradient(
            to right,
            transparent calc(50% - 5rem),
            var(--fx-heading-line, rgba(73, 110, 70, 0.35)) calc(50% - 5rem) calc(50% - 2rem),
            transparent calc(50% - 2rem) calc(50% + 2rem),
            var(--fx-heading-line, rgba(73, 110, 70, 0.35)) calc(50% + 2rem) calc(50% + 5rem),
            transparent calc(50% + 5rem)
        ) no-repeat center / 100% 0.1875rem;
    content: "";
    display: block;
    height: 2rem;
    margin: 0 auto 1.25rem;
    width: 100%;
}

.fx-flexible-page .bg-green h2:first-of-type::before {
    --fx-heading-line: rgba(255, 255, 255, 0.35);
}

/* "Show Heading Icon" ACF toggle, in each layout's Settings tab */
.fx-flexible-page .fx-section-heading.fx-no-heading-icon h2:first-of-type::before,
.fx-flexible-page .image-text__text.fx-no-heading-icon h2:first-of-type::before,
.fx-flexible-page .contact-block__text.fx-no-heading-icon h2:first-of-type::before,
.fx-flexible-page .wysiwyg__wrapper.fx-no-heading-icon h2:first-of-type::before {
    display: none;
}

.fx-flexible-page .fx-section-heading > :first-child {
    margin-top: 0;
}

.fx-flexible-page .fx-section-heading > :last-child {
    margin-bottom: 0;
}

/* Intro copy under a section title reads as a lead paragraph */
.fx-flexible-page .fx-section-heading h2 + p {
    color: var(--fx-muted);
    font-size: 1.0625rem;
    margin-inline: auto;
    max-width: 40em;
}


/*------------------------------------*\
    Buttons

    Template-owned button system. Every variant is paired with .btn.
\*------------------------------------*/

.fx-flexible-page .btn {
    align-items: center;
    border: 0.125rem solid transparent;
    border-radius: var(--fx-radius-pill);
    box-sizing: border-box;
    cursor: pointer;
    display: inline-flex;
    font-family: var(--fx-font-body);
    font-size: 0.875rem;
    font-weight: 700;
    justify-content: center;
    line-height: 1.2;
    min-height: 2.75rem;
    padding: 0.75rem 1.75rem;
    text-align: center;
    text-decoration: none;
    transition: background-color var(--fx-transition), border-color var(--fx-transition), color var(--fx-transition), transform var(--fx-transition);
}

.fx-flexible-page .btn:hover {
    text-decoration: none;
    transform: translateY(-0.09375rem);
}

.fx-flexible-page .btn:focus-visible {
    outline: 0.1875rem solid var(--fx-green);
    outline-offset: 0.1875rem;
}

.fx-flexible-page .btn-primary {
    background: var(--fx-green);
    border-color: var(--fx-green);
    color: var(--fx-white);
}

.fx-flexible-page .btn-primary:hover {
    background: var(--fx-green-hover);
    border-color: var(--fx-green-hover);
    color: var(--fx-white);
}

.fx-flexible-page .btn-secondary {
    background: transparent;
    border-color: var(--fx-green);
    color: var(--fx-green);
}

.fx-flexible-page .btn-secondary:hover {
    background: var(--fx-green);
    border-color: var(--fx-green);
    color: var(--fx-white);
}

.fx-flexible-page .btn-tertiary {
    background: transparent;
    border-color: transparent;
    color: var(--fx-green);
    padding-inline: 0.5rem;
    text-decoration: underline;
    text-decoration-thickness: 0.0625rem;
    text-underline-offset: 0.25rem;
}

.fx-flexible-page .btn-tertiary:hover {
    color: var(--fx-dark-green);
    text-decoration: underline;
}

/* Invert the variants on dark sections to maintain clear contrast. */
.fx-flexible-page .bg-green .btn-primary,
.fx-flexible-page .cta .btn-primary {
    background: var(--fx-white);
    border-color: var(--fx-white);
    color: var(--fx-dark-green);
}

.fx-flexible-page .bg-green .btn-primary:hover,
.fx-flexible-page .cta .btn-primary:hover {
    background: var(--fx-cream);
    border-color: var(--fx-cream);
    color: var(--fx-dark-green);
}

.fx-flexible-page .bg-green .btn-secondary,
.fx-flexible-page .cta .btn-secondary {
    border-color: var(--fx-white);
    color: var(--fx-white);
}

.fx-flexible-page .bg-green .btn-secondary:hover,
.fx-flexible-page .cta .btn-secondary:hover {
    background: var(--fx-white);
    color: var(--fx-dark-green);
}

.fx-flexible-page .bg-green .btn-tertiary,
.fx-flexible-page .cta .btn-tertiary {
    color: var(--fx-white);
}

.fx-flexible-page .bg-green .btn-tertiary:hover,
.fx-flexible-page .cta .btn-tertiary:hover {
    color: var(--fx-cream);
}

.fx-flexible-page .bg-green .btn:focus-visible,
.fx-flexible-page .cta .btn:focus-visible {
    outline-color: var(--fx-white);
}

.fx-flexible-page .btn-group,
.fx-flexible-page .fx-button-group {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    margin-top: 1.5625rem;
}

.fx-flexible-page .btn-group .btn + .btn {
    margin: 0;
}

.fx-flexible-page .text-center .btn-group,
.fx-flexible-page .fx-button-group--center {
    justify-content: center;
}

/* WYSIWYG-authored buttons (the editor's own "Button" toolbar, used inside
   any of this system's WYSIWYG fields — e.g. the CTA banner's button)
   render as Fusion's .fusion-button, not .btn: the template doesn't
   control that markup, so it can't be switched to the class-based system
   above. Restyled the same way as the rest of this theme's Fusion
   buttons — through Avada's own --button_* custom properties — so it
   still inverts to white on dark backgrounds instead of green-on-green. */
.fx-flexible-page .bg-green,
.fx-flexible-page .cta {
    --button_gradient_top_color: var(--fx-white);
    --button_gradient_bottom_color: var(--fx-white);
    --button_gradient_top_color_hover: var(--fx-cream);
    --button_gradient_bottom_color_hover: var(--fx-cream);
    --button_accent_color: var(--fx-dark-green);
    --button_accent_hover_color: var(--fx-dark-green);
    --button_border_color: var(--fx-white);
    --button_border_hover_color: var(--fx-cream);
}

.fx-flexible-page .fusion-button {
    transition: background-color var(--fx-transition), color var(--fx-transition), transform var(--fx-transition);
}

.fx-flexible-page .fusion-button:hover {
    transform: translateY(-0.09375rem);
}

.fx-flexible-page .fusion-button:focus-visible {
    outline: 0.1875rem solid var(--fx-green);
    outline-offset: 0.1875rem;
}

.fx-flexible-page .bg-green .fusion-button:focus-visible,
.fx-flexible-page .cta .fusion-button:focus-visible {
    outline-color: var(--fx-white);
}


/*------------------------------------*\
    Utilities
\*------------------------------------*/

.fx-flexible-page .text-center {
    text-align: center;
}

.fx-flexible-page .object-fit {
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.fx-flexible-page .fx-visually-hidden {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 0.0625rem;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 0.0625rem;
}


/*------------------------------------*\
    Slider navigation (arrows + dots)
\*------------------------------------*/

/* Slick appends the arrows and the dots here, so order puts the dots between
   the two buttons no matter which one Slick builds first. */
.fx-flexible-page .fx-slider-nav {
    align-items: center;
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    margin-top: 1.25rem;
}

/* Nothing appended (slider not initialised, e.g. the image cards grid) */
.fx-flexible-page .fx-slider-nav:empty {
    display: none;
}

/* Both arrows disabled means every slide already fits on screen, so the row
   would only offer dead controls (three testimonials in a three-up track). */
.fx-flexible-page .fx-slider-nav:has(.slick-prev.slick-disabled):has(.slick-next.slick-disabled) {
    display: none;
}

.fx-flexible-page .fx-slider-nav .slick-prev {
    order: -1;
}

.fx-flexible-page .fx-slider-nav .slick-dots {
    margin-block: 0;
    order: 0;
}

.fx-flexible-page .fx-slider-nav .slick-next {
    order: 1;
}

.fx-flexible-page .slick-dots {
    align-items: center;
    display: flex;
    gap: 0.25rem;
    justify-content: center;
    list-style: none;
    margin-inline: 0;
    padding: 0;
}

.fx-flexible-page .slick-dots li {
    display: block;
    margin: 0;
}

.fx-flexible-page .slick-dots li button {
    background: transparent;
    border: 0;
    color: transparent;
    font-size: 0;
    height: 2.75rem;
    padding: 0;
    position: relative;
    width: 1.75rem;
}

.fx-flexible-page .slick-dots li button::before {
    background: rgba(30, 49, 32, 0.22);
    border-radius: var(--fx-radius-pill);
    content: "";
    height: 0.375rem;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: background-color var(--fx-transition), width var(--fx-transition);
    width: 0.375rem;
}

.fx-flexible-page .slick-dots li button:hover::before {
    background: var(--fx-green);
}

/* Active dot stretches into a small capsule instead of just filling in */
.fx-flexible-page .slick-dots li.slick-active button::before {
    background: var(--fx-green);
    width: 1.125rem;
}

.fx-flexible-page .slick-dots li button:focus-visible {
    outline: 0.1875rem solid var(--fx-green) !important;
    outline-offset: -0.25rem;
}


/*------------------------------------*\
    Motion
\*------------------------------------*/

@media (prefers-reduced-motion: reduce) {
    .fx-flexible-page *,
    .fx-flexible-page *::before,
    .fx-flexible-page *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }

    .fx-flexible-page .btn:hover,
    .fx-flexible-page .fusion-button:hover,
    .fx-flexible-page .image-card--link:hover,
    .fx-flexible-page .fx-accordion__panel:hover {
        transform: none;
    }
}


/*------------------------------------*\
    Breakpoints
\*------------------------------------*/

@media (min-width: 768px) {
    :root {
        --fx-section-space: 5rem;
    }

    .fx-flexible-page .container {
        padding-inline: 2rem;
    }

    .fx-flexible-page .fx-section-heading h2 + p {
        font-size: 1.125rem;
    }
}

@media (min-width: 1200px) {
    :root {
        --fx-section-space: 7rem;
    }

    .fx-flexible-page .container {
        padding-inline: 1.5rem;
    }

    .fx-flexible-page .btn-group,
    .fx-flexible-page .fx-button-group {
        gap: 1.25rem 1.5625rem;
        margin-top: 1.25rem;
    }
}