/* =========================================================
   LiveFitFlow (LFF)
   Global Foundation
   ========================================================= */

:root {

    /* -----------------------------------------
       LFF Brand Colors
       ----------------------------------------- */

    --lff-green: #16845f;
    --lff-green-dark: #116b4d;
    --lff-green-light: #eef7f2;

    /* -----------------------------------------
       Text
       ----------------------------------------- */

    --lff-text: #17201d;
    --lff-muted: #66716d;

    /* -----------------------------------------
       Borders / Backgrounds
       ----------------------------------------- */

    --lff-border: #dfe8e3;

    --lff-bg: #ffffff;

    --lff-soft-bg: #f5f7f6;

    --lff-section-green: #eef7f2;

    --lff-section-soft: #f5f7f6;

    --lff-section-dark: #18221f;

    /* -----------------------------------------
       Layout
       ----------------------------------------- */

    --lff-container: 1180px;

    --lff-gutter: 32px;

    /* -----------------------------------------
       Section System
       ----------------------------------------- */

    --lff-section-radius: 22px;

    --lff-section-gap: 28px;

}


/* =========================================================
   Base
   ========================================================= */

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--lff-bg);
    color: var(--lff-text);

    overflow-x: clip;
}


/* =========================================================
   Typography / Form Elements
   ========================================================= */

button,
input,
textarea,
select {
    font: inherit;
}


/* =========================================================
   Images
   ========================================================= */

img {
    max-width: 100%;
    height: auto;
}


/* =========================================================
   Links
   ========================================================= */

a {
    text-underline-offset: 3px;
}


/* =========================================================
   LFF Main Container
   ========================================================= */

.lff-container {
    width: min(
        calc(100% - var(--lff-gutter)),
        var(--lff-container)
    );

    margin-inline: auto;
}


/* =========================================================
   LFF Section Foundation
   ---------------------------------------------------------
   Major homepage sections will use these classes.
   Individual section CSS can override the background.
   ========================================================= */

.lff-section {
    width: min(
        calc(100% - var(--lff-gutter)),
        var(--lff-container)
    );

    margin-inline: auto;

    border-radius: var(--lff-section-radius);

    overflow: hidden;
}


/* =========================================================
   Section Background Variants
   ========================================================= */

.lff-section--green {
    background: var(--lff-section-green);
}

.lff-section--soft {
    background: var(--lff-section-soft);
}

.lff-section--dark {
    background: var(--lff-section-dark);
}


/* =========================================================
   Section Spacing
   ========================================================= */

.lff-section + .lff-section {
    margin-top: var(--lff-section-gap);
}


/* =========================================================
   Cards
   ---------------------------------------------------------
   White cards intentionally remain white so they stand
   out from the colored section backgrounds.
   ========================================================= */

.lff-card {
    background: #ffffff;

    border: 1px solid var(--lff-border);

    border-radius: 14px;

    box-shadow:
        0 5px 18px rgba(20, 50, 40, 0.04);
}


/* =========================================================
   Accessibility
   ========================================================= */

.screen-reader-text {
    position: absolute;

    width: 1px;
    height: 1px;

    padding: 0;
    margin: -1px;

    overflow: hidden;

    clip: rect(0, 0, 0, 0);

    white-space: nowrap;

    border: 0;
}


/* =========================================================
   Tablet
   ========================================================= */

@media (max-width: 900px) {

    :root {
        --lff-gutter: 24px;

        --lff-section-radius: 18px;

        --lff-section-gap: 22px;
    }

}


/* =========================================================
   Mobile
   ========================================================= */

@media (max-width: 600px) {

    :root {
        --lff-gutter: 12px;

        --lff-section-radius: 16px;

        --lff-section-gap: 18px;
    }

    .lff-container {
        width: min(
            calc(100% - var(--lff-gutter)),
            var(--lff-container)
        );
    }

    .lff-section {
        width: min(
            calc(100% - var(--lff-gutter)),
            var(--lff-container)
        );
    }

}