/* National Parks & Sanctuaries: the original page had no inline <style> (its styles are css/national_parks_sanctuaries.css, loaded before this file). */

/* In the site style (Home → Territorial Overview): full width inside 5% margins; the figures as the site's deep-green
   cards (like Working Plans): one colour, figure left in Roboto, plain label, fine contour lines, lift and gold figure on hover. */
html body .nps-page .nps-wrap { max-width: none; padding: 0 5%; box-sizing: border-box; }
html body .nps-page .nps-stats-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin: 32px 0 52px; }
html body .nps-page .nps-stat-card { display: flex; flex-direction: column; gap: 8px; padding: 32px; border-radius: 8px; text-align: left; box-shadow: none;
    background: #0a2e1a !important; transition: transform 150ms cubic-bezier(.4, 0, .2, 1), background-color 150ms cubic-bezier(.4, 0, .2, 1); }
html body .nps-page .nps-stat-card::before { inset: 0; top: 0; left: 0; width: auto; height: auto; transform: none; opacity: .5;
    background: repeating-radial-gradient(circle at 100% 0%, transparent 0 22px, rgba(255, 255, 255, .05) 22px 23px); }
html body .nps-page .nps-stat-card:hover { transform: translateY(-4px); background: #123b26 !important; box-shadow: none; }
html body .nps-page .nps-stat-num { position: relative; margin: 0; font-family: 'Roboto', sans-serif; font-variant-numeric: tabular-nums; font-size: clamp(44px, 4.4vw, 64px); font-weight: 500; line-height: 1;
    letter-spacing: -.03em; color: #fff; text-shadow: none; transition: color 150ms; }
html body .nps-page .nps-stat-card:hover .nps-stat-num { color: #f1c40f; }
html body .nps-page .nps-stat-label { position: relative; font-size: 16px; font-weight: 700; letter-spacing: 0; text-transform: none; color: rgba(255, 255, 255, .9) !important; text-shadow: none; }
@media (max-width: 600px) { html body .nps-page .nps-wrap { padding: 0 20px; } html body .nps-page .nps-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } html body .nps-page .nps-stat-card { padding: 20px; } }

/* Protected areas in one row that scrolls sideways: filters left and arrows right above it, three cards in view (two on
   tablets, one and a peek on phones); the wheel, a drag, the arrows or a swipe move it. */
.nps-row-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
html body .nps-page .nps-filters { justify-content: flex-start; margin: 0; flex-wrap: wrap; }
.nps-row-arrows { display: none; gap: 8px; margin-left: auto; }
.nps-row.is-scrollable .nps-row-arrows { display: flex; }
.nps-row-btn { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid rgba(10, 46, 26, .15); border-radius: 50%; background: transparent; color: #0a2e1a; cursor: pointer;
    transition: background-color 150ms cubic-bezier(.4, 0, .2, 1), color 150ms, border-color 150ms, transform 150ms; }
.nps-row-btn:hover:not(:disabled) { background: #0a2e1a; border-color: #0a2e1a; color: #fff; }
.nps-row-btn:active:not(:disabled) { transform: translateY(1px); }
.nps-row-btn:disabled { opacity: .3; cursor: default; }
html body .nps-page .nps-cards-grid { display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: calc((100% - 2 * 20px) / 3); gap: 20px;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; padding: 4px 0 12px; outline: none; }
html body .nps-page .nps-cards-grid::-webkit-scrollbar { display: none; }
html body .nps-page .nps-cards-grid > .nps-card { scroll-snap-align: start; opacity: 1; transform: none; }
.nps-cards-grid.is-free { scroll-snap-type: none; scroll-behavior: auto; }
@media (hover: hover) and (pointer: fine) { .nps-row.is-scrollable .nps-cards-grid { cursor: grab; } }
.nps-cards-grid.is-dragging { cursor: grabbing; user-select: none; }
.nps-cards-grid.is-dragging img { pointer-events: none; }
.nps-cards-grid:focus-visible { box-shadow: 0 0 0 2px #1a472a; border-radius: 8px; }
@media (max-width: 1100px) { html body .nps-page .nps-cards-grid { grid-auto-columns: calc((100% - 20px) / 2.2); } }
@media (max-width: 600px) { html body .nps-page .nps-cards-grid { grid-auto-columns: 84%; gap: 12px; } .nps-row-head { flex-wrap: wrap; } }

/* The Act strip without the comparison table: no empty half. The title on the left (38.2%), the paragraphs side by side
   across the rest; the site's 8px corners, no heavy shadow. */
html body .nps-page .nps-legal-strip { border-radius: 8px; box-shadow: none; }
html body .nps-page .nps-legal-grid.is-solo { display: block; }
html body .nps-page .nps-legal-grid.is-solo .nps-legal-info { display: grid; grid-template-columns: 38.2fr 30.9fr 30.9fr; gap: 20px 52px; align-items: start; max-width: none; }
html body .nps-page .nps-legal-grid.is-solo .nps-legal-info h3 { grid-column: 1; grid-row: 1 / span 4; margin: 0; font-size: clamp(24px, 2.2vw, 32px); line-height: 1.15; letter-spacing: -.02em; }
html body .nps-page .nps-legal-grid.is-solo .nps-legal-info p { margin: 0; font-size: 16px; line-height: 1.7; color: rgba(255, 255, 255, .88); }
@media (max-width: 1000px) {
    html body .nps-page .nps-legal-grid.is-solo .nps-legal-info { grid-template-columns: minmax(0, 1fr); }
    html body .nps-page .nps-legal-grid.is-solo .nps-legal-info h3 { grid-row: auto; }
}
html body .nps-page .nps-legal-strip:has(.is-solo) { padding: 40px 40px; }
@media (max-width: 600px) { html body .nps-page .nps-legal-strip:has(.is-solo) { padding: 24px 20px; } }
@media (min-width: 1001px) { html body .nps-page .nps-legal-grid.is-solo .nps-legal-info h3, html body .nps-page .nps-legal-grid.is-solo .nps-legal-info p { grid-row: 1; } }