/* The site's one table design (templates/core/designs/_table.html and _table_section.html; js/std_tables.js) — the same as
   the table tabs on Man-Animal Conflict (css/wing_design.css .dz-table, .dz-ttab): white on the cream page, a sand heading
   row in sentence case, quiet 14px rows, figures right-aligned in Roboto, the Total row in bold on sand; five rows then a
   scroll inside the table ("Showing 5 of 19 · scroll the table for the rest"), a search once long; tables side by side
   become one block with a tab per table (sand pills with their number of rows) and one search on the right. On phones
   each row is a small card. Loaded after every page's own styles, so this one look wins everywhere. */
:root { --st-ink: #1f2a22; --st-muted: #4b5563; --st-deep: #0a2e1a; --st-green: #1a472a; --st-sand: #f2ede1; --st-line: rgba(15, 28, 16, .06); }

.st-sec { padding: 84px 0; background: #f9f6ef; }
.st-sec + .st-sec { padding-top: 0; }
.st-wrap { margin: 0 auto; padding: 0 5%; box-sizing: border-box; }
html body .st-h2 { margin: 0; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: clamp(28px, 2.5vw, 38px); line-height: 1.08;
    letter-spacing: -.035em; color: var(--st-deep); text-align: left; text-transform: none; text-wrap: balance; }
html body .st-h3 { margin: 40px 0 0; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 20px; line-height: 1.3; color: var(--st-deep); text-align: left; text-transform: none; }
.st-lead { margin: 12px 0 0; max-width: 78ch; }
html body .st-lead p, html body .st-lead .ps-text-list { margin: 0 0 12px; font-size: 16px; line-height: 1.65; color: var(--st-muted); text-align: left; }
html body .st-lead p:last-child { margin-bottom: 0; }
html body .st-lead strong { color: var(--st-deep); }
/* The text under a section heading runs the full width of its block on every page (one line when it fits), in the
   shared kit (.st-lead) and in each page's own design; it still wraps on smaller screens. So does the text inside a
   card or panel (accordion bodies, dialogue and rail panels, banners): it fills the card instead of leaving its right
   side empty. */
html body :is(.st-lead, .dz-lead, .wk-sub, .arc-sub, .tx-sub, .fx-sub, .mp-sub, .mzp-section-subtitle, .wa-section-subtitle,
    .ec-section-subtitle, .mac-section-subtitle, .mp-section-subtitle, .eszt-lead, .cr-sub, .ffp-intro, .sfa-acts-sub, .pk-lead,
    .fx-ov-body, .sv-lead p, .dz-acc-body, .ec-dialogue-text, .campa-law-desc p, .k-rail-panel p, .k-banner p) { max-width: none !important; }
html body .ec-page .ec-dialogue-head .ec-dialogue-text { max-width: none !important; }   /* wl_elephant.css holds it at 80ch more specifically */

/* the table */
.st-table { margin-top: 28px; }
.st-scroll { overflow-x: auto; border-radius: 8px; background: #fff; }
.st-scroll.is-capped { overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(26, 71, 42, .35) transparent; }
html body .dz-page .st-table table, html body .st-table table { width: 100%; margin: 0; border-collapse: collapse; border: 0; border-radius: 0; background: #fff;
    font-family: 'Plus Jakarta Sans', sans-serif; font-size: 14px; }
html body .dz-page .st-table th, html body .st-table th {
    position: sticky; top: 0; z-index: 1; padding: 12px 20px !important; border: 0 !important; background: var(--st-sand) !important; background-image: none !important;
    color: var(--st-muted) !important; font-size: 13px !important; font-weight: 600 !important; line-height: 1.35; letter-spacing: 0 !important; text-transform: none !important;
    text-align: left !important; vertical-align: bottom; }
html body .dz-page .st-table td, html body .st-table td {
    padding: 12px 20px !important; border: 0 !important; border-top: 1px solid var(--st-line) !important; background: transparent !important;
    color: var(--st-ink) !important; font-size: 14px !important; font-weight: 400; line-height: 1.5; text-align: left !important; vertical-align: top; }
html body .st-table tbody tr { transition: background-color 150ms cubic-bezier(.4, 0, .2, 1); }
html body .st-table tbody tr:hover td { background: #f9f6ef !important; }
html body .st-table td.st-long { min-width: 220px; }
html body .st-table td.st-num, html body .st-table th.st-num { text-align: right !important; }
html body .st-table td.st-num { font-family: 'Roboto', sans-serif; font-variant-numeric: tabular-nums; font-weight: 500; white-space: nowrap; }
html body .st-table th.st-num { min-width: 96px; }
html body .st-table td.st-sl, html body .st-table th.st-sl { width: 56px; min-width: 0; }
html body .st-table td.st-sl { font-family: 'Roboto', sans-serif; font-variant-numeric: tabular-nums; color: var(--st-muted) !important; }
html body .st-table td em { color: inherit; }
html body .st-table .st-sub { font-size: 13px; color: var(--st-muted); }
html body .st-table td strong { color: var(--st-deep); font-weight: 700; }
/* a division's first row: its first cells in bold, so each division reads as one block */
html body .st-table tr.st-group td:first-child, html body .st-table tr.st-group td:nth-child(2) { font-weight: 600; color: var(--st-deep) !important; }
/* totals: bold on sand (the GRAND TOTAL the same, a shade deeper) */
html body .st-table :is(tr.st-total, tr.st-grand) td { background: var(--st-sand) !important; font-weight: 700 !important; color: var(--st-deep) !important; }
html body .st-table tr.st-grand td { background: #e9e1cd !important; }
/* two heading rows: a group heading centred over its columns, with a hairline under it */
html body .st-table th.st-group-head { text-align: center !important; padding-bottom: 8px !important; box-shadow: inset 0 -1px 0 rgba(15, 28, 16, .1); }
html body .st-table thead tr + tr th { padding-top: 8px !important; position: static; }
/* a cell typed as a list (villages, places): small chips that wrap */
html body .st-table .st-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
html body .st-table .st-chips li { margin: 0; padding: 3px 10px; border-radius: 999px; background: var(--st-sand); font-size: 13px; line-height: 1.4; color: var(--st-ink); }
/* a percentage also drawn as a slim bar under the figure */
html body .st-table .st-meter { display: block; width: 100%; min-width: 80px; height: 4px; margin-top: 6px; border-radius: 999px; background: rgba(10, 46, 26, .08); overflow: hidden; }
html body .st-table .st-meter i { display: block; height: 100%; border-radius: 999px; background: var(--st-green); }
.st-table-more { margin: 0; padding: 12px 0 0; font-size: 13px; color: var(--st-muted); }
.st-table-more b { font-family: 'Roboto', sans-serif; font-variant-numeric: tabular-nums; font-weight: 500; color: var(--st-deep); }
.st-none { margin: 0; padding: 20px; font-size: 14px; color: var(--st-muted); }

/* the search box: on the right, above the table (in a tab block: beside the tabs) */
.st-search { box-sizing: border-box; display: flex; align-items: center; gap: 8px; flex: none; width: min(320px, 100%); height: 44px; padding: 0 12px; margin: 24px 0 -12px auto;
    border: 1px solid rgba(15, 28, 16, .14); border-radius: 8px; background: #fff; color: var(--st-muted); transition: border-color 150ms cubic-bezier(.4, 0, .2, 1); }
.st-search:focus-within { border-color: var(--st-green); }
.st-search input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; font: 400 14px 'Plus Jakarta Sans', sans-serif; color: #0f1c10; }

/* tables side by side as tabs ("table swap"): sand pills with their number of rows, one search on the right */
.st-tabblock { padding: 84px 0; background: #f9f6ef; }
.st-thead { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.st-thead .st-search { margin: 0; }
.st-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.st-tab { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border: 0; border-radius: 999px; background: var(--st-sand); color: var(--st-green);
    font: 600 14px 'Plus Jakarta Sans', sans-serif; cursor: pointer; transition: background-color 150ms cubic-bezier(.4, 0, .2, 1), transform 150ms cubic-bezier(.4, 0, .2, 1); }
.st-tab-n { font-family: 'Roboto', sans-serif; font-variant-numeric: tabular-nums; font-size: 12px; font-weight: 500; opacity: .7; }
/* a tab's number of rows, in brackets: "2023-2024 (1)" — in this kit's tabs and the Man-Animal Conflict style ones (wing_design) */
:is(.st-tab-n, .dz-ttab > span)::before { content: '('; }
:is(.st-tab-n, .dz-ttab > span)::after { content: ')'; }
.st-tab:hover { background: #e6dfcd; }
.st-tab:active { transform: translateY(1px); }
.st-tab.is-on { background: var(--st-green); color: #fff; }
.st-tab:focus-visible { outline: 2px solid var(--st-green); outline-offset: 2px; }
.st-tabblock .st-sec { padding: 0 !important; background: transparent; }
.st-tabblock .st-sec > .st-wrap { padding: 0; }
.st-tabblock .st-sec[hidden] { display: none; }
/* inside a tab the tab is the title; the table's own text sits small above it */
.st-tabblock .st-panel > .st-wrap > .st-h2 { display: none; }
.st-tabblock .st-panel .st-lead { margin: 0 0 12px; max-width: none; }
html body .st-tabblock .st-panel .st-lead p, html body .st-tabblock .st-panel .st-lead .ps-text-list { font-size: 14px; }
.st-tabblock .st-panel .st-table { margin-top: 0; }
.st-tabblock .st-panel .st-lead + .st-table { margin-top: 16px; }
html body .st-tabblock .st-panel .st-h3 { margin-top: 28px; font-size: 16px; }
/* a revamped page already holds its blocks on the 5% edge (revamp.css): no second margin */
html body .dz-page.rv > :is(.st-sec, .st-tabblock) { padding-left: 0 !important; padding-right: 0 !important; }
/* tables inside a block that has its own heading (Territorial directories): no second page margin */
.st-embed-tables { margin-top: 32px; }
.st-embed .st-tabblock, .st-embed .st-sec { padding: 0 !important; background: transparent; }
.st-embed .st-tabblock > .st-wrap, .st-embed .st-sec > .st-wrap { padding: 0; }
.st-embed .st-sec + .st-sec { margin-top: 48px; }
html body .st-embed .st-h2 { font-size: 22px; letter-spacing: -.02em; }
/* tables (or their tab block) right after a heading card: close under it, not a full section gap away */
html body .dz-page > :is(.bs-wrap, [class*="-wrap"]) + .st-tabblock, html body .dz-page > :is(.bs-wrap, [class*="-wrap"]) + .st-sec { padding-top: 12px !important; }

/* pages with tables of their own (Services, Notifications, Publications, Tenders, Who's Who): their older decorations off,
   so this design shows through (their own filters and paging keep working; data-st-plain) */
html body .st-table thead tr::before, html body .st-table thead tr::after { content: none !important; display: none !important; }
html body .st-table thead tr, html body .st-table tbody tr { background: transparent !important; border: 0 !important; box-shadow: none !important; transform: none !important; animation: none !important; opacity: 1 !important; }
html body .st-table table { table-layout: auto !important; min-width: 0 !important; border-spacing: 0 !important; }
html body .st-table td a { color: var(--st-green); font-weight: 600; }

/* phones: each row a small card of "heading: value" lines (.st-table twice: above the desktop cell rules) */
@media (max-width: 700px) {
    .st-sec, .st-tabblock { padding: 52px 0; }
    .st-wrap { padding: 0 20px; }
    .st-thead { flex-direction: column; align-items: stretch; }
    .st-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -20px; padding: 0 20px; }
    .st-tabs::-webkit-scrollbar { display: none; }
    .st-tab { flex: none; white-space: nowrap; }
    .st-search { width: 100%; margin: 20px 0 -8px; }
    .st-thead .st-search { margin: 0; }
    .st-scroll { background: none; overflow: visible; max-height: none !important; }
    html body .st-table.st-table :is(table, tbody, tr, td) { display: block; width: auto; min-width: 0; max-width: none; }
    html body .st-table.st-table thead { display: none; }
    html body .st-table.st-table tr { margin-bottom: 8px; padding: 12px 16px; border-radius: 8px; background: #fff !important; }
    html body .st-table.st-table tr[hidden] { display: none; }
    html body .st-table.st-table td { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 12px; align-items: start;
        padding: 4px 0 !important; border: 0 !important; background: transparent !important; text-align: left !important; white-space: normal; }
    html body .st-table.st-table td::before { content: attr(data-label); font-family: 'Plus Jakarta Sans', sans-serif; font-size: 12px; font-weight: 600; line-height: 1.4; color: var(--st-muted); overflow-wrap: anywhere; }
    html body .st-table.st-table td[data-label=""] { grid-template-columns: minmax(0, 1fr); }
    html body .st-table.st-table td[data-label=""]::before { display: none; }
    html body .st-table.st-table td.st-empty { display: none; }
    html body .st-table.st-table :is(tr.st-total, tr.st-grand) { background: var(--st-sand) !important; }
    .st-table-more { display: none; }
}
@media (prefers-reduced-motion: reduce) { .st-tab, html body .st-table tbody tr { transition: none; } }