/* Social Forestry Activities: the page's original inline styles (from templates/core/social_forestry/activities.html), unchanged; its stylesheet css/social_forestry_activities.css is loaded before this. */
    #sfa-origins-card {
        background: linear-gradient(135deg, #0a2e1a, #064e3b, #1e3a8a) !important;
        background-size: 200% 200% !important;
        animation: sfaGradientShift 8s ease infinite;
        border-radius: 20px;
        padding: 40px;
        box-shadow: 0 15px 40px rgba(6, 78, 59, 0.4);
        margin-bottom: 40px;
        border: 2px solid #34d399 !important;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    #sfa-origins-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 20px 50px rgba(6, 78, 59, 0.6);
    }
    @keyframes sfaGradientShift {
        0% { background-position: 0% 50%; }
        50% { background-position: 100% 50%; }
        100% { background-position: 0% 50%; }
    }
    #sfa-origins-card h3 {
        color: #fde047 !important; /* bright yellow */
    }
    #sfa-origins-card h3 i {
        color: #6ee7b7 !important; /* soft green icon */
        animation: sfaGentleBounce 2s ease-in-out infinite;
    }
    @keyframes sfaGentleBounce {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-3px); }
    }
    #sfa-origins-card p, #sfa-origins-card span, #sfa-origins-card div, #sfa-origins-card {
        color: #f1f5f9 !important;
    }
    #sfa-origins-card p:last-child {
        border-left-color: #38bdf8 !important; /* bright blue */
        color: #e0f2fe !important;
        background: rgba(255,255,255,0.05);
        border-radius: 0 10px 10px 0;
    }

/* Frame glue (not in the original): every block sits in its own .sfa-wrap, so the original single wrapper's
   40px top/bottom padding is kept only at the page's top and bottom; lists written as "- " lines keep plain markers. */
.sfa-page > .sfa-wrap + .sfa-wrap { padding-top: 0; }
.sfa-page > .sfa-wrap:has(+ .sfa-wrap) { padding-bottom: 0; }
.sfa-reveal-content .ps-text-list li::marker { color: inherit; }

/* The organisational structure and the directory use Territorial Overview's design (css/designs/forest_reserved.css);
   the activity tiles, no longer beside the structure, take the full width. */
.sfa-org-act-section.sfa-act-alone { grid-template-columns: minmax(0, 1fr); }
/* the directory as on Overview of Wildlife: a division's phones and e-mail side by side in the big panel (all yellow
   buttons), the panel only as tall as its longest division (the divisions share one grid cell), the cards as tall as their text */
.sfa-dir-band .tx-feat-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.sfa-dir-band .tx-feat-actions .tx-feat-call { margin-top: 0; }
.sfa-dir-band .tx-div-feature { display: grid; min-height: 0; }
.sfa-dir-band .tx-feat { position: relative; inset: auto; grid-area: 1 / 1; }
.sfa-dir-band .tx-divs .tx-div-grid { grid-auto-rows: auto; align-content: end; }

/* ── Full width page in the site style: content within 5% side margins (20px on phones), headings left-aligned in
   Plus Jakarta Sans 800 without the bar under them. ── */
.sfa-page .sfa-wrap { max-width: none; padding-left: 5%; padding-right: 5%; box-sizing: border-box; }
.sfa-page .sfa-section-title, .sfa-page .sfa-h2 { margin: 0; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: clamp(28px, 2.5vw, 38px);
    line-height: 1.1; letter-spacing: -.035em; color: #0a2e1a; text-align: left; }
.sfa-page .sfa-section-title + .wa-title-bar, .sfa-page .wa-title-bar { display: none; }
.sfa-page .sfa-section-subtitle { margin: 20px 0 32px; font-size: 16px; line-height: 1.6; color: #4b5563; }
@media (max-width: 900px) { .sfa-page .sfa-wrap { padding-left: 20px; padding-right: 20px; } }

/* ── Overview: no card. The golden split: heading and first paragraph (38.2%) | the paragraphs after it (61.8%), then
   the last one across the full width as a closing statement on a gold rule. One text size for all paragraphs; bold
   phrases carry a soft gold marker, and pointing at a paragraph deepens it. ── */
.sfa-page .sfa-ov { padding: 84px 5% !important; background: #f9f6ef; }   /* !important: a site-wide rule pads every <section> 25px 0 !important */
.sfa-ov-grid { display: grid; grid-template-columns: minmax(0, 38.2fr) minmax(0, 61.8fr); gap: 32px 52px; align-items: start; }
.sfa-ov-first { margin: 20px 0 0; font-size: 17px; line-height: 1.75; color: #1f2a22; }
.sfa-ov-body p { margin: 0 0 20px; font-size: 17px; line-height: 1.75; color: #1f2a22; }   /* each block's text fills its column */
.sfa-ov-body > p:first-child { margin-top: 4px; }
.sfa-ov-body > p:last-child { margin-bottom: 0; }
.sfa-ov strong { font-weight: 700; color: #0a2e1a; padding: 0 2px; -webkit-box-decoration-break: clone; box-decoration-break: clone;
    background: linear-gradient(180deg, transparent 62%, rgba(241, 196, 15, .38) 62%); transition: background-size 250ms cubic-bezier(.4, 0, .2, 1), background-color 250ms; }
.sfa-ov p:hover strong { background: linear-gradient(180deg, transparent 38%, rgba(241, 196, 15, .45) 38%); }
.sfa-ov-close { grid-column: 1 / -1; margin: 0; padding: 4px 0 4px 20px; border-left: 3px solid #f1c40f; }   /* the full width, from the left margin */
.sfa-ov-close p { margin: 0; font-size: 19px; font-weight: 600; line-height: 1.6; color: #1a472a; }
@media (max-width: 900px) { .sfa-page .sfa-ov { padding: 52px 20px !important; } .sfa-ov-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; } }

/* ── Core Focus & Activities: no cards. Two equal halves: the activities as numbered rows | the chosen activity's
   text, large, filling its half. The row in view has a green bar along its edge, a gold icon and an arrow; the text
   slides in when it changes. .is-live is added by the script (sf_activities.js, "activity picker"); without it every
   row shows its own text. On phones the chosen row opens its text under it. ── */
.sfa-acts { padding: 32px 0 52px; }
.sfa-acts-sub { margin-top: 20px; max-width: 66ch; font-size: 16px; line-height: 1.6; color: #4b5563; }
.sfa-acts-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; margin-top: 32px; align-items: stretch; }   /* list | panel, two equal halves */
.sfa-acts-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(15, 28, 16, .12); }
.sfa-acts-list li { border-bottom: 1px solid rgba(15, 28, 16, .12); }
.sfa-act { position: relative; display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: 16px; width: 100%;
    padding: 20px 12px 20px 20px; border: 0; background: transparent; text-align: left; font: inherit; color: #1f2a22; cursor: pointer;
    transition: background-color 150ms cubic-bezier(.4, 0, .2, 1); }
.sfa-act::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 3px; background: #1a472a;
    transform: scaleY(0); transition: transform 250ms cubic-bezier(.16, 1, .3, 1); }
.sfa-act:hover { background: rgba(26, 71, 42, .04); }
.sfa-act.is-on::before { transform: scaleY(1); }
.sfa-act:focus-visible { outline: 2px solid #1a472a; outline-offset: -2px; }
.sfa-act-no { font: 600 13px/1 Roboto, sans-serif; font-variant-numeric: tabular-nums; color: rgba(15, 28, 16, .4); }
.sfa-act-ico { width: 20px; text-align: center; font-size: 17px; color: #2d6a4f; transition: color 150ms cubic-bezier(.4, 0, .2, 1), transform 250ms cubic-bezier(.16, 1, .3, 1); }
.sfa-act-name { font-size: 17px; font-weight: 600; line-height: 1.35; }
.sfa-act-arrow { color: #0a2e1a; opacity: 0; transform: translateX(-6px); transition: opacity 150ms cubic-bezier(.4, 0, .2, 1), transform 150ms cubic-bezier(.4, 0, .2, 1); }
.sfa-act:hover .sfa-act-ico { transform: translateY(-2px); }
.sfa-act.is-on .sfa-act-no { color: #1a472a; }
.sfa-act.is-on .sfa-act-ico { color: #c9a227; }
.sfa-act.is-on .sfa-act-name { font-weight: 700; color: #0a2e1a; }
.sfa-act.is-on .sfa-act-arrow, .sfa-act:hover .sfa-act-arrow { opacity: 1; transform: none; }
.sfa-act-inline { padding: 0 20px 20px 72px; }
.sfa-act-inline p, .sfa-act-panel-text p { margin: 0 0 12px; }
.sfa-acts-stage { display: none; }
.sfa-act-panel-top { display: flex; align-items: center; gap: 12px; font-size: 28px; color: #c9a227; }
.sfa-act-panel-no { font: 600 14px/1 Roboto, sans-serif; font-variant-numeric: tabular-nums; color: rgba(15, 28, 16, .45); }
.sfa-act-panel-title { margin: 20px 0 0; font-family: 'Plus Jakarta Sans', sans-serif; font-size: clamp(26px, 2.2vw, 34px); font-weight: 800;
    line-height: 1.15; letter-spacing: -.03em; color: #0a2e1a; }
.sfa-act-panel-text { margin-top: 20px; font-size: 18px; line-height: 1.75; color: #1f2a22; }   /* the text fills the panel */
.sfa-act-panel-text strong { color: #0a2e1a; background: linear-gradient(180deg, transparent 62%, rgba(241, 196, 15, .38) 62%); }
/* with the script: the list beside the stage, one panel at a time */
.sfa-acts.is-live .sfa-act-inline { display: none; }
.sfa-acts.is-live .sfa-acts-stage { display: block; position: relative; padding: 12px 0 0 52px; border-left: 1px solid rgba(15, 28, 16, .12); box-sizing: border-box; }
.sfa-acts.is-live .sfa-act-panel { display: none; }
.sfa-acts.is-live .sfa-act-panel.is-on { display: block; animation: sfaActIn 450ms cubic-bezier(.16, 1, .3, 1) both; }
@keyframes sfaActIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (max-width: 900px) {
    .sfa-acts-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .sfa-acts.is-live .sfa-acts-stage { display: none; }
    .sfa-acts.is-live li:has(.sfa-act.is-on) .sfa-act-inline { display: block; animation: sfaActIn 350ms cubic-bezier(.16, 1, .3, 1) both; }
    .sfa-act-inline { padding: 0 12px 20px 20px; font-size: 16px; line-height: 1.7; }
}
@media (prefers-reduced-motion: reduce) {
    .sfa-act, .sfa-act::before, .sfa-act-ico, .sfa-act-arrow { transition: none; }
    .sfa-acts.is-live .sfa-act-panel.is-on, .sfa-acts.is-live li:has(.sfa-act.is-on) .sfa-act-inline { animation: none; }
}

/* ── Divisional Directory on phones and small tablets: no big panel and no picking. Each division is one plain card
   with everything at once (division, town, jurisdiction, call and mail buttons), sized to its content. ── */
@media (max-width: 900px) {
    .sfa-dir-band .tx-div-feature { display: none !important; }
    .sfa-dir-band .tx-divs .tx-div-grid { margin-top: 20px; grid-auto-rows: auto; gap: 8px; }
    .sfa-dir-band .tx-div, .sfa-dir-band .tx-div.is-on { padding: 16px; gap: 4px; cursor: default; background: #f2ede1; box-shadow: none; transform: none; }
    .sfa-dir-band .tx-divs.is-live .tx-div-name { display: block; }
    .sfa-dir-band .tx-divs.is-live .tx-div-tel { display: inline-flex; }
    .sfa-dir-band .tx-div-arrow { display: none; }
    .sfa-dir-band .tx-div-tel { margin-top: 8px; padding: 8px 14px; font-size: 14px; }
}
/* Overview: the Organizational Structure card runs the full height of the text beside it (as on Territorial Overview) */
.sfa-org-band .tx-split > div > .tx-chain { height: 100%; box-sizing: border-box; }