/* =========================================================
   SÜDFLORA DESIGN SYSTEM
   Version 1
   ========================================================= */

:root {
    /* Brand */
    --sf-green: #9aca7f;
    --sf-green-hover: #add795;
    --sf-green-dark: #18351f;
    --sf-green-text: #374521;

    /* Surfaces */
    --sf-green-soft: #f4f8f1;
    --sf-green-soft-2: #f6f8f4;
    --sf-white: #ffffff;

    /* Text */
    --sf-text: #404040;
    --sf-text-muted: #666666;

    /* Lines */
    --sf-border: #e3e7df;

    /* Existing conversion accent */
    --sf-yellow: #ffcf2f;

    /* Geometry */
    --sf-radius-sm: 6px;
    --sf-radius-md: 10px;
    --sf-radius-lg: 16px;

    /* Shadows */
    --sf-shadow-soft:
        0 8px 24px rgba(24, 53, 31, 0.06);

    /* Content widths */
    --sf-content-width: 1100px;
    --sf-reading-width: 900px;
}


/* =========================================================
   COMMON
   ========================================================= */

.sf-guide-page,
.sf-guide-page * {
    box-sizing: border-box;
}

.sf-guide-page {
    padding-top: 120px;
    color: var(--sf-text);
}

.sf-guide-page #page-wrapper {
    padding-top: 0;
}

.sf-guide-page [id] {
    scroll-margin-top: 140px;
}

.sf-guide-page img {
    max-width: 100%;
    height: auto;
}


/* =========================================================
   GUIDE HERO
   ========================================================= */

.sf-guide-hero {
    position: relative;
    overflow: hidden;
    margin-bottom: 32px;
    border-radius: var(--sf-radius-lg);
    background: var(--sf-green-dark);
}

.sf-guide-hero__image {
    position: relative;
    display: flex;
    align-items: center;

    min-height: 430px;
    padding: 32px 0;

    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.sf-guide-hero__image::before {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(18, 42, 24, 0.80) 0%,
            rgba(18, 42, 24, 0.56) 42%,
            rgba(18, 42, 24, 0.12) 76%,
            rgba(18, 42, 24, 0.02) 100%
        );
}

.sf-guide-hero__content {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 700px;

    padding: 32px 48px;

    color: var(--sf-white);
}

.sf-guide-eyebrow {
    display: block;

    margin-bottom: 12px;

    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.sf-guide-hero h1 {
    margin: 0 0 18px;

    color: var(--sf-white);

    font-size: clamp(36px, 4.5vw, 58px);
    font-weight: 500;
    line-height: 1.08;
}

.sf-guide-hero p {
    max-width: 600px;
    margin: 0 0 25px;

    color: var(--sf-white);

    font-size: 18px;
    line-height: 1.6;
}


/* =========================================================
   BUTTONS
   ========================================================= */

.sf-button,
.sf-guide-page a.sf-button,
.sf-service-page a.sf-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 44px;
    padding: 11px 20px;

    border: 0;
    border-radius: var(--sf-radius-sm);

    background: var(--sf-green);
    color: var(--sf-green-dark);

    font-weight: 700;
    line-height: 1.35;
    text-decoration: none;

    transition:
        background-color .2s ease,
        transform .2s ease;
}

.sf-button:hover,
.sf-button:focus,
.sf-guide-page a.sf-button:hover,
.sf-guide-page a.sf-button:focus,
.sf-service-page a.sf-button:hover,
.sf-service-page a.sf-button:focus {
    background: var(--sf-green-hover);
    color: var(--sf-green-dark);
    text-decoration: none;
    transform: translateY(-1px);
}

/* =========================================================
   GUIDE FEATURES
   ========================================================= */

.sf-guide-features {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;

    margin: 0 0 56px;
}

.sf-guide-feature {
    min-width: 0;
    padding: 21px 20px;

    border: 1px solid transparent;
    border-radius: var(--sf-radius-md);

    background: var(--sf-green-soft-2);
}

.sf-guide-feature strong {
    display: block;

    margin-bottom: 7px;

    color: var(--sf-green-dark);

    font-size: 16px;
    line-height: 1.35;
}

.sf-guide-feature span {
    display: block;

    color: var(--sf-text-muted);

    font-size: 14px;
    line-height: 1.55;
}


/* =========================================================
   CONTENT SECTIONS
   ========================================================= */

.sf-guide-section {
    margin-top: 64px;
    margin-bottom: 64px;
}

.sf-guide-section--narrow {
    max-width: var(--sf-reading-width);
    margin-right: auto;
    margin-left: auto;
}

.sf-guide-section h2 {
    margin: 0 0 18px;

    color: var(--sf-text);

    font-size: clamp(28px, 3vw, 38px);
    line-height: 1.18;
}

.sf-guide-section h3 {
    margin: 0 0 12px;

    color: var(--sf-text);

    font-size: 22px;
    line-height: 1.3;
}

.sf-guide-section p {
    margin-top: 0;
    margin-bottom: 18px;

    line-height: 1.7;
}

.sf-guide-lead {
    font-size: 18px;
    line-height: 1.7;
}


/* =========================================================
   CHECKS
   ========================================================= */

.sf-guide-checks {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 18px;

    margin-top: 26px;
}

.sf-guide-check {
    position: relative;

    min-width: 0;
    padding: 14px 16px 14px 45px;

    border-radius: 8px;

    background: var(--sf-green-soft-2);

    line-height: 1.5;
}

.sf-guide-check::before {
    content: "✓";

    position: absolute;
    top: 13px;
    left: 17px;

    color: var(--sf-green);
    font-weight: 700;
}


/* =========================================================
   ADVICE CARDS
   ========================================================= */

.sf-guide-advice {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;

    margin-top: 30px;
}

.sf-guide-card {
    min-width: 0;
    padding: 27px;

    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius-md);

    background: var(--sf-white);

    box-shadow: var(--sf-shadow-soft);
}

.sf-guide-card h3 {
    color: var(--sf-green-dark);
}


/* =========================================================
   PRODUCT SECTION / SLIDER
   ========================================================= */

.sf-guide-products {
    margin-top: 64px;
    margin-bottom: 70px;
}

.sf-guide-products__intro {
    max-width: var(--sf-reading-width);
    margin: 0 auto 28px;
}

.sf-guide-products .wp-block-shortcode {
    width: 100%;
    margin: 0;
}


/* =========================================================
   SEASON LINKS
   ========================================================= */

.sf-guide-season-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;

    margin-top: 24px;
}

.sf-guide-season-links a {
    display: inline-flex;

    padding: 8px 15px;

    border: 1px solid var(--sf-green);
    border-radius: 999px;

    color: var(--sf-green-text);
    text-decoration: none;

    transition:
        background-color .2s ease,
        color .2s ease;
}

.sf-guide-season-links a:hover,
.sf-guide-season-links a:focus {
    background: var(--sf-green-soft);
    color: var(--sf-green-dark);
    text-decoration: none;
}


/* =========================================================
   FAQ
   ========================================================= */

.sf-faq {
    border-top: 1px solid var(--sf-border);
}

.sf-faq details {
    border-bottom: 1px solid var(--sf-border);
}

.sf-faq summary {
    padding: 18px 4px;

    cursor: pointer;

    color: var(--sf-text);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.45;
}

.sf-faq details p {
    margin: 0;
    padding: 0 4px 20px;

    color: var(--sf-text-muted);
}


/* =========================================================
   FINAL CTA
   ========================================================= */

.sf-guide-cta {
    padding: 42px 45px;

    border-radius: var(--sf-radius-lg);

    background: var(--sf-green-soft);

    text-align: center;
}

.sf-guide-cta h2 {
    color: var(--sf-green-dark);
}

.sf-guide-cta p {
    max-width: 700px;
    margin-right: auto;
    margin-left: auto;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 991.98px) {

    .sf-guide-features {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sf-guide-advice {
        grid-template-columns: 1fr;
    }
}


@media (max-width: 767.98px) {

    .sf-guide-page {
        padding-top: 90px;
    }

    .sf-guide-page [id] {
        scroll-margin-top: 105px;
    }

    .sf-guide-hero__image {
        min-height: 480px;
        align-items: flex-end;
        padding: 20px 0;
    }
	
    .sf-guide-hero__image::before {
        background:
            linear-gradient(
                0deg,
                rgba(18, 42, 24, .88) 0%,
                rgba(18, 42, 24, .55) 55%,
                rgba(18, 42, 24, .12) 100%
            );
    }

    .sf-guide-hero__content {
        padding: 28px 24px;
    }

    .sf-guide-hero h1 {
        font-size: 36px;
    }

    .sf-guide-hero p {
        font-size: 16px;
    }

    .sf-guide-features,
    .sf-guide-checks {
        grid-template-columns: 1fr;
    }

    .sf-guide-section,
    .sf-guide-products {
        margin-top: 45px;
        margin-bottom: 45px;
    }

    .sf-guide-cta {
        padding: 30px 22px;
    }
}

/* =========================================================
   SERVICE & TRUST PAGES
   ========================================================= */

.sf-service-page,
.sf-service-page * {
    box-sizing: border-box;
}

.sf-service-page {
    padding-top: 120px;
    color: var(--sf-text);
}

.sf-service-page #page-wrapper {
    padding-top: 0;
}

.sf-service-page [id] {
    scroll-margin-top: 140px;
}

.sf-service-page img {
    max-width: 100%;
    height: auto;
}


/* =========================================================
   SERVICE HERO
   ========================================================= */

.sf-service-hero {
    position: relative;
    overflow: hidden;

    margin-bottom: 34px;

    border-radius: var(--sf-radius-lg);

    background: var(--sf-green-dark);
}

.sf-service-hero__image {
    position: relative;

    display: flex;
    align-items: center;

    min-height: 440px;
    padding: 32px 0;

    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.sf-service-hero__image::before {
    content: "";

    position: absolute;
    z-index: 1;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(18, 42, 24, .86) 0%,
            rgba(18, 42, 24, .67) 42%,
            rgba(18, 42, 24, .24) 72%,
            rgba(18, 42, 24, .06) 100%
        );
}

.sf-service-hero__content {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 720px;

    padding: 32px 48px;

    color: var(--sf-white);
}

.sf-service-eyebrow {
    display: block;

    margin-bottom: 12px;

    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.sf-service-hero h1 {
    margin: 0 0 18px;

    color: var(--sf-white);

    font-size: clamp(36px, 4.5vw, 58px);
    font-weight: 500;
    line-height: 1.08;
}

.sf-service-hero p {
    max-width: 620px;
    margin: 0 0 25px;

    color: var(--sf-white);

    font-size: 18px;
    line-height: 1.6;
}


/* =========================================================
   TRUST FACTS
   ========================================================= */

.sf-service-facts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;

    margin-bottom: 64px;
}

.sf-service-fact {
    min-width: 0;
    padding: 22px 20px;

    border-radius: var(--sf-radius-md);

    background: var(--sf-green-soft-2);
}

.sf-service-fact strong {
    display: block;

    margin-bottom: 7px;

    color: var(--sf-green-dark);

    font-size: 16px;
    line-height: 1.35;
}

.sf-service-fact span {
    display: block;

    color: var(--sf-text-muted);

    font-size: 14px;
    line-height: 1.55;
}


/* =========================================================
   SERVICE CONTENT
   ========================================================= */

.sf-service-section {
    margin-top: 68px;
    margin-bottom: 68px;
}

.sf-service-section--narrow {
    max-width: var(--sf-reading-width);
    margin-right: auto;
    margin-left: auto;
}

.sf-service-section h2 {
    margin: 0 0 18px;

    color: var(--sf-text);

    font-size: clamp(28px, 3vw, 38px);
    line-height: 1.18;
}

.sf-service-section h3 {
    margin: 0 0 12px;

    color: var(--sf-green-dark);

    font-size: 22px;
    line-height: 1.3;
}

.sf-service-section p {
    margin-top: 0;
    margin-bottom: 18px;

    line-height: 1.72;
}

.sf-service-lead {
    font-size: 18px;
    line-height: 1.72;
}


/* =========================================================
   SERVICE CARDS
   ========================================================= */

.sf-service-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;

    margin-top: 30px;
}

.sf-service-card {
    min-width: 0;
    padding: 28px;

    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius-md);

    background: var(--sf-white);

    box-shadow: var(--sf-shadow-soft);
}


/* =========================================================
   AUDIENCE / TRUST LIST
   ========================================================= */

.sf-service-audience {
    padding: 34px;

    border-radius: var(--sf-radius-lg);

    background: var(--sf-green-soft);
}

.sf-service-audience-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px 18px;

    margin-top: 24px;
}

.sf-service-audience-item {
    position: relative;

    padding-left: 27px;

    line-height: 1.5;
}

.sf-service-audience-item::before {
    content: "✓";

    position: absolute;
    top: 0;
    left: 0;

    color: var(--sf-green-text);
    font-weight: 700;
}


/* =========================================================
   MEDIA / PRESS
   ========================================================= */

.sf-service-media {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
    gap: 40px;

    align-items: center;
}

.sf-service-media__image img {
    display: block;

    width: 100%;

    border-radius: var(--sf-radius-md);

    box-shadow: var(--sf-shadow-soft);
}


/* =========================================================
   FINAL CTA
   ========================================================= */

.sf-service-cta {
    padding: 42px 45px;

    border-radius: var(--sf-radius-lg);

    background: var(--sf-green-dark);
    color: var(--sf-white);

    text-align: center;
}

.sf-service-cta h2 {
    color: var(--sf-white);
}

.sf-service-cta p {
    max-width: 700px;

    margin-right: auto;
    margin-left: auto;

    color: rgba(255, 255, 255, .9);
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 991.98px) {

    .sf-service-facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sf-service-card-grid {
        grid-template-columns: 1fr;
    }

    .sf-service-audience-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sf-service-media {
        grid-template-columns: 1fr;
    }
}


@media (max-width: 767.98px) {

    .sf-service-page {
        padding-top: 90px;
    }

    .sf-service-page [id] {
        scroll-margin-top: 105px;
    }

    .sf-service-hero__image {
        min-height: 480px;
        align-items: flex-end;
        padding: 20px 0;
    }

    .sf-service-hero__image::before {
        background:
            linear-gradient(
                0deg,
                rgba(18, 42, 24, .90) 0%,
                rgba(18, 42, 24, .62) 55%,
                rgba(18, 42, 24, .16) 100%
            );
    }

    .sf-service-hero__content {
        padding: 28px 24px;
    }

    .sf-service-hero h1 {
        font-size: 36px;
    }

    .sf-service-hero p {
        font-size: 16px;
    }

    .sf-service-facts,
    .sf-service-audience-grid {
        grid-template-columns: 1fr;
    }

    .sf-service-section {
        margin-top: 48px;
        margin-bottom: 48px;
    }

    .sf-service-audience {
        padding: 26px 22px;
    }

    .sf-service-cta {
        padding: 32px 22px;
    }
}