/* Splash page: province selector with interactive map of the Netherlands. */

.splash-intro {
    max-width: 720px;
    margin: 0 auto 1.5rem;
    text-align: center;
}

.splash-intro h2 {
    margin: 0 0 .5rem;
    font-size: 1.5rem;
}

.splash-intro p {
    margin: 0;
    color: #4a5663;
    line-height: 1.5;
}

.splash-layout {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-width: 900px;
    margin: 0 auto;
}

/* --- Map (full width, stacked above sidebar) --- */
.splash-map-wrap {
    background: #fff;
    border: 1px solid #d8e1ea;
    border-radius: 10px;
    padding: 1rem;
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    box-sizing: border-box;
}

.nl-map {
    display: block;
    width: 100%;
    height: auto;
}

/* Decorative layers (rivers/lakes, sea) sit underneath the provinces. */
.nl-map .nl-map-decor {
    pointer-events: none;
}
.nl-map .nl-map-decor path {
    fill: #d6e7ee;
    stroke: none;
}

/* Each province is a <g id="province-<slug>"> wrapping a single <path>.
   Apply default fill to every province path so the SVG looks correct even
   before JS runs (no FOUC). JS later adds the .province-shape class to the
   <g> to toggle active/inactive states.
   Stroke widths and font sizes are in SVG units (viewBox is ~274×322). */
.nl-map g[id^="province-"] > path {
    fill: #d9e3ec;
    stroke: #ffffff;
    stroke-width: 0.7;
    stroke-linejoin: round;
    transition: fill 120ms ease-out, stroke 120ms ease-out;
}
.nl-map .province-shape {
    cursor: not-allowed;
}

.nl-map .province-shape-active,
.nl-map .province-shape-active > path {
    fill: #2e7c46;          /* available: brand green */
}
.nl-map .province-shape-active {
    cursor: pointer;
}

.nl-map .province-shape-active:hover,
.nl-map .province-shape-active.is-hover,
.nl-map .province-shape-active:focus {
    outline: none;
}
.nl-map .province-shape-active:hover > path,
.nl-map .province-shape-active.is-hover > path,
.nl-map .province-shape-active:focus > path {
    fill: #1f5a31;
}

.nl-map .province-shape-active:focus > path {
    /* visible focus ring for keyboard users */
    stroke: #ffd23f;
    stroke-width: 1.5;
}

.nl-map .province-shape-inactive:hover > path,
.nl-map .province-shape-inactive.is-hover > path {
    fill: #c5d2dd;
}

.nl-map .province-labels text {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    font-size: 6px;
    font-weight: 600;
    fill: #2f3a47;
    text-anchor: middle;
    dominant-baseline: middle;
    pointer-events: none;       /* clicks pass through to the polygon */
    paint-order: stroke fill;
    stroke: rgba(255,255,255,0.85);
    stroke-width: 1.5;
}

/* When a province is active (brand green), recolour its label white.
   Splash JS adds `province-label-active` to the matching label element. */
.nl-map .province-labels text.province-label-active {
    fill: #ffffff;
    stroke: rgba(31, 90, 49, 0.6);
}

/* --- Sidebar (stacked below the map, laid out as a compact grid) --- */
.splash-sidebar {
    background: #fff;
    border: 1px solid #d8e1ea;
    border-radius: 10px;
    padding: 1.25rem;
    width: 100%;
    box-sizing: border-box;
}

.splash-sidebar h3 {
    margin: 0 0 .75rem;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #4a5663;
}

.province-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.25rem 0.75rem;
}

.province-list-item {
    border-radius: 6px;
    transition: background 120ms ease-out;
}

.province-list-item.is-hover {
    background: #f1f6fb;
}

.province-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .55rem .75rem;
    color: #2f3a47;
    text-decoration: none;
    border-radius: 6px;
}

.province-link:focus-visible {
    outline: 2px solid #2e7c46;
    outline-offset: 2px;
}

.province-name {
    font-weight: 600;
}

.province-status {
    font-size: .85rem;
    color: #6c7a89;
}

.province-active .province-link {
    color: #2e7c46;
}

.province-active .province-status {
    color: #2e7c46;
    font-weight: 600;
}

.province-inactive .province-link-disabled {
    color: #95a2b0;
    cursor: not-allowed;
}

.province-inactive .province-status {
    color: #b8c2cc;
}

/* The province header shown on province pages (e.g. "KRW Actieplan Tool — Noord-Brabant") */
.header-province {
    color: #6c7a89;
    font-weight: 400;
    font-size: 0.9em;
}