/* Overview of Wildlife in the site style (Home → Territorial Overview): full width inside 5% margins, left headings,
   sand cards with 8px corners and 150ms motion. The green Organizational Structure and State Board cards keep their
   design; they are only aligned (golden split, tops level, the structure card stays beside the long text). */
html body .wa-page .wa-wrap { max-width: none; padding: 0 5%; box-sizing: border-box; }
.wa-page .wa-section { padding: 42px 0; }
.wa-page .wa-section-title { text-align: left !important; }
.wa-page .wa-section-subtitle { margin: 0 0 32px !important; max-width: 62ch; }   /* justified like all body text (body_text.css) */

/* Section 1: structure card (38.2%) beside the words (61.8%), tops level; on wide screens the card stays in view */
@media (min-width: 1101px) {
    html body .wa-page .wa-intro-grid { grid-template-columns: 38.2fr 61.8fr; gap: 52px; align-items: start; }
    .wa-page .wa-intro-grid > .wa-reveal:first-child { margin-top: 0 !important; position: sticky !important; top: 104px; }
}
.wa-page .wa-intro-grid .wa-section-title { margin-top: 0; }
.wa-page .wa-board-card { margin-top: 32px !important; }

/* Section 2: the divisions as four sand cards */
.wa-div-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.wa-div-card { display: flex; flex-direction: column; gap: 8px; padding: 32px 20px 20px; border-radius: 8px; background: #f2ede1;
    transition: transform 150ms cubic-bezier(.4, 0, .2, 1), background-color 150ms cubic-bezier(.4, 0, .2, 1); }
.wa-div-card:hover { transform: translateY(-2px); background: #ece5d3; }
.wa-div-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.wa-div-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(26, 71, 42, .1); color: #1a472a;
    transition: background-color 150ms, color 150ms, transform 300ms cubic-bezier(.34, 1.56, .64, 1); }
.wa-div-card:hover .wa-div-icon { background: #f1c40f; color: #0a2e1a; transform: rotate(-8deg); }
.wa-div-no { font: 700 13px/1 Roboto, sans-serif; font-variant-numeric: tabular-nums; color: rgba(10, 46, 26, .4); }
.wa-div-role { font-size: 13px; font-weight: 600; color: #5b6b60; }
.wa-div-name { margin: 0; font-size: 20px; font-weight: 800; line-height: 1.25; letter-spacing: -.01em; color: #0a2e1a; }
.wa-div-town { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: #1a472a; }
.wa-div-area { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(10, 46, 26, .1); }
.wa-div-label { display: block; margin-bottom: 4px; font-size: 12px; font-weight: 700; letter-spacing: .02em; color: #5b6b60; }
.wa-div-area p { margin: 0; font-size: 15px; line-height: 1.55; color: #1f2a22; }
.wa-div-contact { list-style: none; margin: auto 0 0; padding: 12px 0 0; border-top: 1px solid rgba(10, 46, 26, .1); display: flex; flex-direction: column; gap: 8px; }
.wa-div-contact li { display: flex; align-items: flex-start; gap: 8px; min-width: 0; font-size: 14px; color: #1f2a22; }
.wa-div-contact svg { flex: none; margin-top: 2px; color: #1a472a; }
.wa-div-contact a { color: #0a2e1a; text-decoration: none; font-weight: 600; overflow-wrap: anywhere; transition: color 150ms; }
.wa-div-contact a:hover { color: #1a472a; text-decoration: underline; text-decoration-color: #f1c40f; text-underline-offset: 3px; }

/* Section 4: Core Focus as sand cards side by side */
.wa-core-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: 20px; }
.wa-core-card { position: relative; padding: 32px; border-radius: 8px; background: #f2ede1; transition: transform 150ms cubic-bezier(.4, 0, .2, 1), background-color 150ms cubic-bezier(.4, 0, .2, 1); }
.wa-core-card:hover { transform: translateY(-2px); background: #ece5d3; }
.wa-core-icon { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 20px; border-radius: 50%; background: rgba(26, 71, 42, .1); color: #1a472a;
    transition: background-color 150ms, color 150ms, transform 300ms cubic-bezier(.34, 1.56, .64, 1); }
.wa-core-card:hover .wa-core-icon { background: #f1c40f; color: #0a2e1a; transform: rotate(-8deg); }
.wa-core-no { position: absolute; top: 32px; right: 32px; font: 700 13px/1 Roboto, sans-serif; font-variant-numeric: tabular-nums; color: rgba(10, 46, 26, .4); }
.wa-core-card h3 { margin: 0 0 8px; font-size: 22px; font-weight: 800; letter-spacing: -.01em; color: #0a2e1a; }
.wa-core-card p { margin: 0 0 8px; font-size: 16px; line-height: 1.65; color: #1f2a22; }
.wa-core-card p:last-child { margin-bottom: 0; }

@media (max-width: 1100px) { .wa-div-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .wa-div-grid { grid-template-columns: minmax(0, 1fr); } html body .wa-page .wa-wrap { padding: 0 20px; } .wa-core-card { padding: 20px; } .wa-core-no { top: 20px; right: 20px; } }

/* Headings in the site style (as on Home → Territorial Overview): Plus Jakarta Sans 800, up to 52px, tight, left, no gold bar */
html body .wa-page .wa-section-title { margin: 0 0 12px; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: clamp(28px, 2.5vw, 38px); line-height: 1.02;
    letter-spacing: -.035em; color: #0a2e1a; text-wrap: balance; }
html body .wa-page .wa-title-bar { display: none; }
html body .wa-page .wa-section-subtitle { margin-top: 12px !important; font-size: 17px; line-height: 1.6; color: #4b5563; }

/* Organizational Structure, full height: the card runs the height of the words beside it; inside, every level sits on one
   left edge, joined by one continuous line through the icons, the levels spread evenly down the card. The card's look
   (deep green, glow, icons) is unchanged. */
@media (min-width: 1101px) {
    html body .wa-page .wa-intro-grid { align-items: stretch; }
    html body .wa-page .wa-intro-grid > .wa-reveal:first-child { position: relative !important; top: 0; display: flex; }
    html body .wa-page .wa-intro-grid .wa-org-card { flex: 1; display: flex; flex-direction: column; }
    html body .wa-page .wa-intro-grid .wa-org-tree { flex: 1; justify-content: space-between; }
}
html body .wa-page .wa-org-card { padding: 40px 32px; }
html body .wa-page .wa-org-tree { position: relative; gap: 20px; }
html body .wa-page .wa-org-tree::before { content: ''; position: absolute; left: 33px; top: 30px; bottom: 30px; width: 2px; border-radius: 2px; background: #0b5a40; }
html body .wa-page .wa-org-connector { display: none; }
html body .wa-page .wa-org-node, html body .wa-page .wa-org-node.level-2 { position: relative; padding: 12px 14px !important; gap: 16px; border-radius: 8px; transition: background-color 150ms cubic-bezier(.4, 0, .2, 1); }
html body .wa-page .wa-org-node-icon { width: 40px; height: 40px; border-radius: 50%; }
html body .wa-page .wa-org-node.level-1 .wa-org-node-icon { background: #0b4a36; }
html body .wa-page .wa-org-node.level-2 .wa-org-node-icon { background: #12382f; }
html body .wa-page .wa-org-node-label { font-size: 15px; }
html body .wa-page .wa-org-node.level-0 .wa-org-node-label { font-size: 16px; }
html body .wa-page .wa-org-node-sub { font-size: 13px; line-height: 1.45; opacity: .7; }
html body .wa-page .wa-org-node:hover .wa-org-node-icon { transform: scale(1.06); }
html body .wa-page .wa-org-node-icon { transition: transform 300ms cubic-bezier(.34, 1.56, .64, 1); }

/* Section 1 swapped: the words first (61.8%), the structure card on the right (38.2%) */
@media (min-width: 1101px) {
    html body .wa-page .wa-intro-grid { grid-template-columns: 61.8fr 38.2fr; }
    html body .wa-page .wa-intro-grid > .wa-reveal:first-child { order: 2; }
}

/* The State Board card, now after the divisions: full width */
.wa-page .wa-board-after .wa-board-card { margin-top: 32px !important; padding: 40px; }
.wa-page .wa-board-after .wa-board-card p { max-width: 110ch; }

/* The structure card as tall as the words beside it: tighter padding and steps (wide screens) */
@media (min-width: 1101px) {
    html body .wa-page .wa-intro-grid .wa-org-card { padding: 28px 28px 24px; }
    html body .wa-page .wa-intro-grid .wa-org-title { margin-bottom: 12px; }
    html body .wa-page .wa-intro-grid .wa-org-tree { gap: 4px; }
    html body .wa-page .wa-intro-grid .wa-org-node, html body .wa-page .wa-intro-grid .wa-org-node.level-2 { padding: 8px 12px !important; }
    html body .wa-page .wa-intro-grid .wa-org-tree::before { left: 31px; top: 28px; bottom: 28px; }
}

/* The "Organizational Structure" label in gold */
html body .wa-page .wa-org-title { color: #f1c40f; }

/* Functions & Strategic Mandates: sand cards, two to a row. A large Roboto number with the card title beside it, an
   icon on the right, then the mandate. Pointing at a card lifts it, turns the number gold, draws a gold line along
   its top and a soft light follows the pointer (--gx/--gy from js/designs/wl_activities.js). */
html body .wa-page .wa-mandates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.wa-mandate { position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; gap: 20px; padding: 32px; border-radius: 8px; background: #f2ede1;
    transition: transform 150ms cubic-bezier(.4, 0, .2, 1), background-color 150ms cubic-bezier(.4, 0, .2, 1); }
.wa-mandate.span-2 { grid-column: 1 / -1; }
.wa-mandate::before { content: ''; position: absolute; left: 0; top: 0; height: 3px; width: 0; background: #f1c40f; transition: width 400ms cubic-bezier(.16, 1, .3, 1); }
.wa-mandate::after { content: ''; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity 200ms;
    background: radial-gradient(320px circle at var(--gx, 50%) var(--gy, 50%), rgba(26, 71, 42, .1), transparent 60%); }
.wa-mandate:hover { transform: translateY(-2px); background: #ece5d3; }
.wa-mandate:hover::before { width: 100%; }
.wa-mandate:hover::after { opacity: 1; }
.wa-mandate-head { display: flex; align-items: center; gap: 12px; padding-bottom: 20px; border-bottom: 1px solid rgba(10, 46, 26, .1); }
.wa-mandate-no { font-family: 'Roboto', sans-serif; font-variant-numeric: tabular-nums; font-size: 44px; font-weight: 500; line-height: 1; letter-spacing: -.04em; color: #0a2e1a; transition: color 150ms; }
.wa-mandate:hover .wa-mandate-no { color: #b8860b; }
.wa-mandate-kicker { font-size: 13px; font-weight: 700; color: #5b6b60; }
.wa-mandate-icon { margin-left: auto; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(26, 71, 42, .1); color: #1a472a;
    transition: background-color 150ms, color 150ms, transform 300ms cubic-bezier(.34, 1.56, .64, 1); }
.wa-mandate:hover .wa-mandate-icon { background: #f1c40f; color: #0a2e1a; transform: rotate(-8deg) scale(1.05); }
.wa-mandate-text { margin: 0; font-size: 17px; font-weight: 600; line-height: 1.6; color: #0a2e1a; }
@media (max-width: 900px) { html body .wa-page .wa-mandates { grid-template-columns: minmax(0, 1fr); } .wa-mandate { padding: 20px; } .wa-mandate-no { font-size: 36px; } }
@media (prefers-reduced-motion: reduce) { .wa-mandate, .wa-mandate::before { transition: none; } }

/* Mandate cards, compact: four to a row on wide screens (three, two, one as the screen narrows), smaller number and icon,
   tighter padding, 15px words */
html body .wa-page .wa-mandates { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
html body .wa-page .wa-mandate.span-2 { grid-column: auto; }
.wa-page .wa-mandate { gap: 12px; padding: 20px; }
.wa-page .wa-mandate-head { gap: 8px; padding-bottom: 12px; }
.wa-page .wa-mandate-no { font-size: 32px; }
.wa-page .wa-mandate-kicker { font-size: 12px; }
.wa-page .wa-mandate-icon { width: 36px; height: 36px; }
.wa-page .wa-mandate-icon svg { width: 16px; height: 16px; }
.wa-page .wa-mandate-text { font-size: 15px; line-height: 1.55; }
@media (max-width: 1400px) { html body .wa-page .wa-mandates { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1100px) { html body .wa-page .wa-mandates { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { html body .wa-page .wa-mandates { grid-template-columns: minmax(0, 1fr); } }

/* Core Focus cards in soft sage (apart from the sand mandate and division cards): white icon circle, darker sage on hover */
.wa-page .wa-core-card { background: #e4ece2; }
.wa-page .wa-core-card:hover { background: #d9e4d6; }
.wa-page .wa-core-icon { background: #fff; color: #1a472a; }
.wa-page .wa-core-no { color: rgba(26, 71, 42, .5); }

/* Organizational structure and divisions use Territorial Overview's design (css/designs/forest_reserved.css). Here only
   what that page does not have: a division's phones and e-mail side by side in the big panel (all as yellow buttons),
   and the four cards only as tall as their text (they sit level with the foot of the panel). */
.tx-feat-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.tx-feat-actions .tx-feat-call { margin-top: 0; }
.wa-page .tx-divs .tx-div-grid { grid-auto-rows: auto; align-content: end; }
.wa-board-after { margin-top: 32px; }
/* the big panel only as tall as its longest division: the divisions share one grid cell (instead of being laid over
   each other at a fixed height), so the panel takes the height of the tallest and no space is left empty above it */
.wa-page .tx-div-feature { display: grid; min-height: 0; }
.wa-page .tx-feat { position: relative; inset: auto; grid-area: 1 / 1; }
/* Core Focus: every card alike, three to a row (two on tablets, one on phones); a card left alone on the last row spans it */
html body .wa-page .wa-core-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
html body .wa-page .wa-core-grid:has(> .wa-core-card:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
html body .wa-page .wa-core-grid > .wa-core-card:last-child:nth-child(3n + 1) { grid-column: 1 / -1; }
.wa-core-text p { margin: 0 0 8px; font-size: 16px; line-height: 1.65; color: #1f2a22; }
.wa-core-text p:last-child { margin-bottom: 0; }
@media (max-width: 1100px) { html body .wa-page .wa-core-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } html body .wa-page .wa-core-grid > .wa-core-card:last-child:nth-child(3n + 1) { grid-column: auto; } html body .wa-page .wa-core-grid > .wa-core-card:last-child:nth-child(2n + 1) { grid-column: 1 / -1; } }
@media (max-width: 700px) { html body .wa-page .wa-core-grid { grid-template-columns: minmax(0, 1fr); } }

/* State Level Policy Making (an Accordion section, wing_design.css): on this page a dark green card like the panels above,
   its heading in gold and its words in white */
.wa-page .dz-acc-row { background: #0a2e1a; overflow: hidden; }   /* the heading's hover shade keeps the rounded corners */
.wa-page .dz-acc-row summary { color: #f1c40f; }
.wa-page .dz-acc-row summary:hover { background: rgba(255, 255, 255, .06); }
.wa-page .dz-acc-row summary svg { color: #f1c40f; }
.wa-page .dz-acc-row summary:focus-visible { outline-color: #f1c40f; }
.wa-page .dz-acc-body p, .wa-page .dz-acc-body .ps-text-list { color: rgba(255, 255, 255, .9); }
.wa-page .dz-acc-body .ps-text-list li::marker { color: #f1c40f; }

/* State Level Policy Making: the cards stay open (no dropdown) - no arrow, nothing to click; each heading larger and dark */
html body .wa-page #section-1342 .dz-acc-row summary { pointer-events: none; cursor: default; font-size: 22px; font-weight: 800; color: #f1c40f !important; }
html body .wa-page #section-1342 .dz-acc-row summary:hover { background: transparent; }
html body .wa-page #section-1342 .dz-acc-row summary svg { display: none; }
html body .wa-page #section-1342 .dz-acc-body { max-width: none; }