/*
 * LFM Brand CSS
 * Tokens + shared component styles for Local Food Marketplace
 * Loaded sitewide via lfm-blocks plugin — do NOT duplicate in Custom HTML blocks
 *
 * Teal:  #104D5B  |  Green: #89B334
 * Cream: #FCF6DA  |  Font:  Super Clarendon / Zilla Slab
 *
 * Last updated: 2026-05-14
 */

/* ============================================================
   1. GOOGLE FONTS
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Zilla+Slab:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap');

/* ============================================================
   2. BRAND TOKENS
   ============================================================ */
:root {
    --lfm-teal:          #104D5B;
    --lfm-teal-dark:     #0d3d49;
    --lfm-teal-mid:      #1a6678;
    --lfm-teal-light:    rgba(16, 77, 91, 0.08);
    --lfm-green:         #89B334;
    --lfm-green-dark:    #79a22a;
    --lfm-green-light:   #f0f7e0;
    --lfm-green-border:  #c8de80;
    --lfm-cream:         #FCF6DA;
    --lfm-white:         #ffffff;
    --lfm-border:        #e2e2e2;
    --lfm-border-soft:   #d8e8c8;
    --lfm-bg-alt:        #f7f7f7;
    --lfm-text-dark:     #1a1a1a;
    --lfm-text-mid:      #4a4a4a;
    --lfm-text-light:    #7a7a7a;
    --lfm-font:          'Super Clarendon', 'Zilla Slab', Georgia, serif;
    --lfm-radius:        14px;
    --lfm-radius-sm:     8px;
    --lfm-radius-pill:   40px;
}

/* ============================================================
   3. BASE RESETS (scoped — only affects .lfm- namespaced elements)
   ============================================================ */
.lfm-block *,
.lfm-block *::before,
.lfm-block *::after {
    box-sizing: border-box;
}

.lfm-block {
    font-family: var(--lfm-font);
    color: var(--lfm-text-dark);
    -webkit-font-smoothing: antialiased;
    line-height: 1.65;
}

.lfm-block a {
    color: var(--lfm-teal);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.lfm-block a:hover {
    color: var(--lfm-teal-dark);
}

/* ============================================================
   4. SHARED TYPOGRAPHY UTILITIES
   ============================================================ */
.lfm-eyebrow {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--lfm-green);
    margin-bottom: 8px;
}

.lfm-eyebrow--pill {
    background: var(--lfm-green);
    color: #fff;
    padding: 5px 16px;
    border-radius: 20px;
}

.lfm-eyebrow--teal {
    color: var(--lfm-teal);
}

/* ============================================================
   5. SHARED BUTTON STYLES
   ============================================================ */
.lfm-btn {
    display: inline-block;
    font-family: var(--lfm-font);
    font-weight: 700;
    font-size: 14px;
    padding: 12px 26px;
    border-radius: var(--lfm-radius-sm);
    text-decoration: none;
    cursor: pointer;
    border: none;
    transition: background 0.2s;
    white-space: nowrap;
    line-height: 1;
}

.lfm-btn--primary {
    background: var(--lfm-green);
    color: #fff;
}
.lfm-btn--primary:hover {
    background: var(--lfm-green-dark);
    color: #fff;
    text-decoration: none;
}

.lfm-btn--secondary {
    background: #fff;
    color: var(--lfm-teal);
    border: 1px solid #fff;
}
.lfm-btn--secondary:hover {
    background: var(--lfm-cream);
    color: var(--lfm-teal);
    text-decoration: none;
}

.lfm-btn--teal {
    background: var(--lfm-teal);
    color: #fff;
    border-radius: var(--lfm-radius-pill);
}
.lfm-btn--teal:hover {
    background: var(--lfm-teal-mid);
    color: #fff;
    text-decoration: none;
}

.lfm-btn--outline-white {
    background: transparent;
    color: #fff;
    border: 2px solid rgba(255,255,255,0.6);
}
.lfm-btn--outline-white:hover {
    background: rgba(255,255,255,0.1);
    color: #fff;
    text-decoration: none;
}

/* ============================================================
   6. COMPONENT: CALLOUT BOX
   ============================================================ */
.lfm-callout {
    background: var(--lfm-green-light);
    border: 1px solid var(--lfm-green-border);
    border-left: 5px solid var(--lfm-green);
    border-radius: var(--lfm-radius);
    padding: 28px 30px;
    margin: 36px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.lfm-callout--teal {
    background: var(--lfm-teal-light);
    border-color: var(--lfm-teal);
    border-left-color: var(--lfm-teal);
}

.lfm-callout--white {
    background: var(--lfm-white);
    border: 1px solid var(--lfm-border);
    border-left: 5px solid var(--lfm-green);
}

/* White variant button — green bg, white text */
.lfm-callout--white .lfm-btn--primary {
    background: var(--lfm-green);
    color: #fff;
}
.lfm-callout--white .lfm-btn--primary:hover {
    background: var(--lfm-green-dark);
    color: #fff;
    text-decoration: none;
}

.lfm-callout__body {
    flex: 1;
    min-width: 200px;
}

.lfm-callout__title {
    font-size: 18px;
    font-weight: 700;
    color: var(--lfm-teal);
    margin: 0 0 6px;
    font-family: var(--lfm-font);
}

.lfm-callout__text {
    font-size: 15px;
    color: var(--lfm-text-mid);
    margin: 0;
    line-height: 1.6;
}

/* ============================================================
   7. COMPONENT: CTA SECTION
   ============================================================ */
.lfm-cta-section {
    background: var(--lfm-teal);
    border-radius: var(--lfm-radius);
    padding: 48px 40px;
    text-align: center;
    margin: 56px 0;
}

/* ── Cream variant ── */
.lfm-cta-section--cream {
    background: var(--lfm-cream);
}

.lfm-cta-section--cream .lfm-cta-section__heading {
    color: var(--lfm-teal);
}

.lfm-cta-section--cream .lfm-cta-section__subtext {
    color: var(--lfm-text-mid);
}

/* Cream: primary button — teal bg, green text, 9px radius */
.lfm-cta-section--cream .lfm-cta-section__buttons .lfm-btn--primary {
    background: var(--lfm-teal);
    color: var(--lfm-green);
    border-radius: 9px;
}
.lfm-cta-section--cream .lfm-cta-section__buttons .lfm-btn--primary:hover {
    background: var(--lfm-teal-dark);
    color: var(--lfm-green);
    text-decoration: none;
}

/* Cream: secondary button — white bg, teal border, green text, 9px radius */
.lfm-cta-section--cream .lfm-cta-section__buttons .lfm-btn--secondary {
    background: var(--lfm-white);
    color: var(--lfm-green);
    border: 2px solid var(--lfm-teal);
    border-radius: 9px;
}
.lfm-cta-section--cream .lfm-cta-section__buttons .lfm-btn--secondary:hover {
    background: var(--lfm-cream);
    color: var(--lfm-green);
    text-decoration: none;
}

/* ── Teal variant buttons — pill shape, explicit colors ── */
.lfm-cta-section:not(.lfm-cta-section--cream) .lfm-cta-section__buttons .lfm-btn--primary {
    background: var(--lfm-green);
    color: #fff;
    border-radius: 50px;
}
.lfm-cta-section:not(.lfm-cta-section--cream) .lfm-cta-section__buttons .lfm-btn--primary:hover {
    background: var(--lfm-green-dark);
    color: #fff;
    text-decoration: none;
}

.lfm-cta-section:not(.lfm-cta-section--cream) .lfm-cta-section__buttons .lfm-btn--secondary {
    background: var(--lfm-white);
    color: var(--lfm-green);
    border: 2px solid var(--lfm-white);
    border-radius: 50px;
}
.lfm-cta-section:not(.lfm-cta-section--cream) .lfm-cta-section__buttons .lfm-btn--secondary:hover {
    background: var(--lfm-cream);
    color: var(--lfm-green);
    text-decoration: none;
}

/* Optional image at top of CTA section */
.lfm-cta-section__image {
    width: 100%;
    border-radius: var(--lfm-radius);
    display: block;
    margin-bottom: 24px;
}

.lfm-cta-section__eyebrow {
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--lfm-green);
    font-weight: 700;
    margin-bottom: 14px;
    display: block;
}

.lfm-cta-section__heading {
    font-family: var(--lfm-font);
    font-size: clamp(22px, 3.5vw, 30px);
    font-weight: 700;
    color: #fff;
    margin: 0 0 14px;
    line-height: 1.3;
}

.lfm-cta-section__subtext {
    color: rgba(255, 255, 255, 0.72);
    font-size: 16px;
    max-width: 640px;
    margin: 0 auto 32px;
    line-height: 1.7;
}

.lfm-cta-section__buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

/* Below-buttons text */
.lfm-cta-section__below {
    margin-top: 20px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.72);
    line-height: 1.7;
}

.lfm-cta-section--cream .lfm-cta-section__below {
    color: var(--lfm-text-mid);
}

.lfm-cta-section__below strong {
    font-weight: 700;
    color: #fff;
}

.lfm-cta-section--cream .lfm-cta-section__below strong {
    color: var(--lfm-teal);
}

/* ============================================================
   8. COMPONENT: PULLQUOTE
   ============================================================ */
.lfm-pullquote {
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    color: #fff;
    background: var(--lfm-teal-mid);
    border-left: 4px solid var(--lfm-green);
    border-radius: var(--lfm-radius-sm);
    padding: 28px 32px;
    margin: 48px 0;
    line-height: 1.55;
    font-family: var(--lfm-font);
}

.lfm-pullquote::before {
    display: none;
}

.lfm-pullquote__text {
    margin: 0 0 12px;
}

.lfm-pullquote__attribution {
    display: block;
    margin-top: 12px;
    font-size: 14px;
    font-style: normal;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.60);
}

.lfm-pullquote__name {
    font-weight: 500;
}

/* Light variant */
.lfm-pullquote--light {
    background: var(--lfm-white);
    border-left: 4px solid var(--lfm-green);
    border-radius: 0 var(--lfm-radius-sm) var(--lfm-radius-sm) 0;
    padding: 24px 28px 20px 28px;
    margin: 48px 0;
    font-style: normal;
    color: var(--lfm-text-dark);
}

.lfm-pullquote--light::before {
    display: none;
}

.lfm-pullquote--light .lfm-pullquote__text {
    font-size: 17px;
    font-style: italic;
    color: var(--lfm-text-dark);
    line-height: 1.75;
    margin: 0 0 10px;
    font-family: var(--lfm-font);
}

.lfm-pullquote--light .lfm-pullquote__attribution {
    font-size: 14px;
    font-style: normal;
    color: var(--lfm-text-light);
}

.lfm-pullquote--light .lfm-pullquote__name {
    font-weight: 600;
    color: var(--lfm-text-mid);
}

/* ============================================================
   9. COMPONENT: FEATURE CARD GRID
   ============================================================ */
.lfm-feature-card-grid {
    background: var(--lfm-cream);
    border-radius: var(--lfm-radius);
    padding: 48px 40px;
    margin: 56px 0;
}

.lfm-feature-card-grid__intro {
    margin-bottom: 36px;
}

.lfm-feature-card-grid__heading {
    font-family: var(--lfm-font);
    font-size: clamp(22px, 3vw, 34px);
    font-weight: 700;
    color: var(--lfm-teal);
    margin: 8px 0 16px;
    line-height: 1.25;
}

.lfm-feature-card-grid__body {
    font-size: 16px;
    color: var(--lfm-text-mid);
    line-height: 1.75;
    margin: 0;
}

.lfm-feature-card-grid__body p {
    margin: 0 0 14px;
}

.lfm-feature-card-grid__body p:last-child {
    margin-bottom: 0;
}

.lfm-feature-card-grid__cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 20px;
    margin-top: 32px;
}

/* ── Individual card ── */
.lfm-feature-card {
    background: var(--lfm-white);
    border-radius: var(--lfm-radius);
    padding: 28px 24px;
    border: 1px solid var(--lfm-border-soft);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Icon — rounded square, green-light bg */
.lfm-feature-card__icon {
    width: 48px;
    height: 48px;
    background: var(--lfm-green-light);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--lfm-green);
    font-size: 20px;
    flex-shrink: 0;
}

.lfm-feature-card__title {
    font-size: 16px;
    font-weight: 700;
    color: var(--lfm-teal);
    margin: 0;
    line-height: 1.35;
    font-family: var(--lfm-font);
}

.lfm-feature-card__text {
    font-size: 14px;
    color: var(--lfm-text-mid);
    line-height: 1.65;
    margin: 0;
}

.lfm-feature-card__text p {
    margin: 0 0 8px;
}

.lfm-feature-card__text p:last-child {
    margin-bottom: 0;
}

/* Responsive — stack to 2 cols on mobile */
@media (max-width: 640px) {
    .lfm-feature-card-grid {
        padding: 32px 20px;
    }
    .lfm-feature-card-grid__cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ============================================================
   10. COMPONENT: FIX BOX
   ============================================================ */
.lfm-fix-box {
    background: var(--lfm-cream);
    border-left: 3px solid var(--lfm-green);
    padding: 20px 24px;
    border-radius: 0 var(--lfm-radius-sm) var(--lfm-radius-sm) 0;
    margin-top: 24px;
    margin-bottom: 24px;
}

.lfm-fix-box__label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--lfm-green-dark);
    font-weight: 700;
    margin-bottom: 8px;
}

.lfm-fix-box__text {
    font-size: 15px;
    color: var(--lfm-text-dark);
    margin: 0;
    line-height: 1.75;
}

.lfm-fix-box__text p {
    margin: 0 0 12px;
}

.lfm-fix-box__text p:last-child {
    margin-bottom: 0;
}

/* ============================================================
   11. COMPONENT: FEATURE HIGHLIGHT
   ============================================================ */
.lfm-feature-highlight {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    background: var(--lfm-teal);
    border-radius: var(--lfm-radius-sm);
    padding: 20px 24px;
    margin-top: 20px;
    margin-bottom: 24px;
}

.lfm-feature-highlight__icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    background: rgba(137, 179, 52, 0.22);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
    color: var(--lfm-green);
    font-size: 16px;
}

.lfm-feature-highlight__content {
    flex: 1;
}

.lfm-feature-highlight__label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--lfm-green);
    font-weight: 700;
    margin-bottom: 4px;
}

.lfm-feature-highlight__title {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 6px;
    line-height: 1.3;
    font-family: var(--lfm-font);
}

.lfm-feature-highlight__text {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.70);
    margin: 0;
    font-style: italic;
    line-height: 1.6;
}

/* ============================================================
   12. BLOG POST GUTTERS
   Add class "lfm-post" to the post body via Highend metabox
   Custom CSS Class field — isolates gutters to new LFM posts
   only, leaving WPBakery posts untouched.
   ============================================================ */
.lfm-post .entry-content > * {
    max-width: 740px;
    margin-left: auto;
    margin-right: auto;
}

/* ACF blocks inside blog posts — match Highend's paragraph margins */
.lfm-post .entry-content .lfm-callout,
.lfm-post .entry-content .lfm-fix-box,
.lfm-post .entry-content .lfm-feature-highlight,
.lfm-post .entry-content .lfm-pullquote,
.lfm-post .entry-content .lfm-numbered-heading,
.lfm-post .entry-content .lfm-accordion-block,
.lfm-post .entry-content .lfm-cta-section,
.lfm-post .entry-content .lfm-qa-list {
    margin-left: 63px;
    margin-right: 63px;
}

/* Feature card grid — full width of post column, no extra margins */
.lfm-post .entry-content .lfm-feature-card-grid {
    margin-left: 0;
    margin-right: 0;
}

/* ============================================================
   13. COMPONENT: ARTICLE BODY (manual wrapper — legacy)
   ============================================================ */
.lfm-article {
    max-width: 740px;
    margin: 0 auto;
    padding: 40px 0 80px;
    font-family: var(--lfm-font);
}

.lfm-article__intro {
    font-size: 19px;
    color: var(--lfm-text-mid);
    line-height: 1.8;
    margin-bottom: 32px;
    font-style: italic;
    font-weight: 300;
}

.lfm-article p {
    font-size: 17px;
    color: var(--lfm-text-mid);
    margin: 0 0 20px;
    line-height: 1.8;
    font-weight: 300;
}

.lfm-article__divider {
    border: none;
    border-top: 1px solid rgba(16, 77, 91, 0.18);
    margin: 44px 0;
}

/* ============================================================
   14. COMPONENT: SCREENSHOT + CAPTION
   ============================================================ */
.lfm-screenshot {
    width: 100%;
    border-radius: var(--lfm-radius-sm);
    border: 1px solid var(--lfm-border-soft);
    display: block;
    margin: 28px 0 4px;
}

.lfm-screenshot-caption {
    font-size: 13px;
    color: var(--lfm-text-light);
    font-style: italic;
    font-weight: 300;
    margin-bottom: 24px;
    text-align: center;
}

/* ============================================================
   15. RESPONSIVE
   ============================================================ */
@media (max-width: 640px) {
    .lfm-cta-section {
        padding: 36px 24px;
    }

    .lfm-callout {
        flex-direction: column;
        align-items: flex-start;
    }

    .lfm-pullquote {
        font-size: 18px;
    }

    .lfm-article {
        padding: 40px 18px 60px;
    }

    .lfm-feature-highlight {
        flex-direction: column;
    }
}

/* ============================================================
   16. COMPONENT: NUMBERED HEADING
   ============================================================ */
.lfm-numbered-heading {
    display: flex;
    align-items: center;
    gap: 20px;
    margin: 48px 0 20px;
}

.lfm-numbered-heading__num {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    background: var(--lfm-cream);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--lfm-font);
    font-size: 20px;
    font-weight: 700;
    color: var(--lfm-teal);
    line-height: 1;
}

.lfm-numbered-heading__text {
    font-family: var(--lfm-font);
    font-size: clamp(22px, 3vw, 30px);
    font-weight: 700;
    color: var(--lfm-teal);
    margin: 0;
    line-height: 1.25;
}

/* ============================================================
   17. COMPONENT: ACCORDION
   ============================================================ */
.lfm-accordion-block {
    margin: 48px auto;
    max-width: 720px;
}

.lfm-accordion-block__header {
    text-align: center;
    margin-bottom: 40px;
}

.lfm-accordion-block__heading {
    font-family: var(--lfm-font);
    font-size: clamp(24px, 3vw, 36px);
    font-weight: 700;
    color: var(--lfm-teal);
    margin: 8px 0;
    line-height: 1.25;
}

.lfm-accordion-block__subtext {
    font-size: 15px;
    color: var(--lfm-text-light);
    margin-top: 8px;
    line-height: 1.6;
}

.lfm-accordion-block__subtext a {
    color: var(--lfm-green);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ── Items ── */
.lfm-accordion__item {
    border-bottom: 1px solid #e8e8e8;
}

.lfm-accordion__item:first-child {
    border-top: 1px solid #e8e8e8;
}

/* Remove default details marker */
.lfm-accordion__item summary::-webkit-details-marker { display: none; }
.lfm-accordion__item summary::marker { display: none; }

.lfm-accordion__summary {
    list-style: none;
    cursor: pointer;
    padding: 20px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    font-family: var(--lfm-font);
    font-size: 16px;
    font-weight: 700;
    color: var(--lfm-teal);
    line-height: 1.4;
    transition: color 0.2s;
}

.lfm-accordion__summary:hover {
    color: var(--lfm-green);
}

.lfm-accordion__title {
    flex: 1;
}

/* ── Icons ── */
.lfm-accordion__icon {
    flex-shrink: 0;
    color: var(--lfm-green);
    font-size: 20px;
    line-height: 1;
    transition: transform 0.22s ease;
}

/* Plus icon — rotates to × when open */
.lfm-accordion__item[open] .lfm-accordion__icon--plus {
    transform: rotate(45deg);
    display: inline-block;
}

/* FA chevron — rotates down to up when open */
.lfm-accordion__item[open] .fa-chevron-down {
    transform: rotate(180deg);
}

/* FA plus — rotates to × when open */
.lfm-accordion__item[open] .fa-plus {
    transform: rotate(45deg);
}

/* ── Answer body ── */
.lfm-accordion__body {
    padding: 0 0 22px;
    font-size: 15px;
    color: var(--lfm-text-mid);
    line-height: 1.72;
    max-width: 680px;
}

.lfm-accordion__body a {
    color: var(--lfm-teal);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.lfm-accordion__body p { margin: 0 0 12px; }
.lfm-accordion__body p:last-child { margin-bottom: 0; }

/* ============================================================
   18. COMPONENT: Q&A LIST
   ============================================================ */
.lfm-qa-list {
    margin: 48px 0;
}

.lfm-qa-list__header {
    margin-bottom: 32px;
}

.lfm-qa-list__heading {
    font-family: var(--lfm-font);
    font-size: clamp(24px, 3vw, 36px);
    font-weight: 700;
    color: var(--lfm-teal);
    margin: 8px 0 0;
    line-height: 1.25;
}

.lfm-qa-list__items {
    border-top: 1px solid #e8e8e8;
}

.lfm-qa-list__item {
    padding: 24px 0;
    border-bottom: 1px solid #e8e8e8;
}

.lfm-qa-list__question {
    font-family: var(--lfm-font);
    font-size: 17px;
    font-weight: 700;
    color: var(--lfm-teal);
    margin: 0 0 12px;
    line-height: 1.4;
}

.lfm-qa-list__answer {
    font-size: 15px;
    color: var(--lfm-text-mid);
    line-height: 1.75;
    margin: 0;
}

.lfm-qa-list__answer p {
    margin: 0 0 12px;
}

.lfm-qa-list__answer p:last-child {
    margin-bottom: 0;
}

.lfm-qa-list__answer a {
    color: var(--lfm-teal);
    text-decoration: underline;
    text-underline-offset: 2px;
}