/* ---------- Hero ---------- */
.sb-hero {
    background: radial-gradient(140% 90% at 20% 0%, #FFFFFF 0%, #FFFFFF 46%, var(--color-bg-soft) 100%);
    border-bottom: 1px solid rgba(43,42,38,0.14);
}

.sb-hero-content { max-width: 56ch; }

.sb-hero-intro { max-width: 50ch; font-size: 1.02rem; color: var(--color-link); margin: 0; }

/* ---------- Topo map ---------- */
.sb-map-box { position: relative; }

.sb-leaflet-map { width: 100%; height: 100%; background: var(--color-bg-soft); }

/* No explicit z-index here on purpose (position:absolute is still needed so Leaflet's
   own internal panes lay out correctly) - giving this its own z-index would make the
   WHOLE map (all of Leaflet's internal panes, tiles through popups) act as a single
   opaque stacking unit from the outside. That's what caused the Kilden-link button
   (below, z-index in the 600s) to render on TOP of an open popup instead of behind
   it: Leaflet's own popupPane (z-index 700) only outranks things *inside* this
   container, not siblings outside it once this container has its own z-index. Without
   one, Leaflet's internal 200-700 pane values compare directly against the chips'
   z-index in the shared .sb-map-box stacking context instead. */
/* Leaflet's own default stylesheet sets overflow:hidden on this element, which was
   silently clipping the bottom off tall parcel popups (photo + title + info + stats)
   on mobile, where the square map box is often shorter than the popup's content -
   autopan can only re-center the map's geographic view, it can't make a popup taller
   than the box actually fit inside it. Popups floating slightly outside the map's own
   frame on a short mobile box is the normal, expected trade-off (used by most sites
   embedding rich Leaflet popups); tiles are unaffected since they're already sized to
   exactly fill the visible area, not reliant on clipping to look correct. */
.sb-map-box .leaflet-container { position: absolute; inset: 0; overflow: visible; font-family: var(--font-body); }

/* Keeps Leaflet's attribution strip compact and single-line-ish on narrow phones,
   on top of shortening the credit text itself in leaflet-map.js. */
.sb-map-box .leaflet-control-attribution { font-size: 0.65rem; max-width: 75%; line-height: 1.3; opacity: 1; transition: opacity 0.15s ease; }

/* Leaflet's own controls (this attribution strip included) always render above
   popupPane regardless of any z-index set elsewhere - that's Leaflet's own hardcoded
   control-container stacking, not something our CSS can out-rank. It was still
   covering the tail end of open popups' text the same way the legend/Kilden-link
   chips were, so it fades out right alongside them (see the .sb-popup-open rule
   below and the popupopen/popupclose handlers in leaflet-map.js). */
.sb-map-box.sb-popup-open .leaflet-control-attribution {
    opacity: 0;
    pointer-events: none;
}

.sb-map-popup-img {
    display: block;
    width: 100%;
    height: 130px;
    object-fit: cover;
    border-radius: 3px;
    margin: -4px -4px 8px;
    width: calc(100% + 8px);
}

.sb-map-popup-info {
    color: var(--color-link) !important;
}

.sb-map-popup h4 {
    font-family: var(--font-display);
    text-transform: uppercase;
    font-weight: 800;
    font-size: 1rem;
    margin: 0 0 6px;
    color: var(--color-deep);
}

.sb-map-popup p {
    margin: 0 0 6px;
    font-size: 0.86rem;
    color: var(--color-text);
}

.sb-map-popup-placeholder {
    border-top: 1px dashed var(--color-muted);
    padding-top: 6px;
    margin-top: 8px !important;
    color: var(--color-muted) !important;
    font-size: 0.76rem !important;
    font-style: italic;
}

.sb-parcel-label-icon span {
    display: inline-block;
    white-space: nowrap;
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.03em;
    color: #FFFFFF;
    text-shadow: 0 1px 2px rgba(0,0,0,0.85), 0 0 4px rgba(0,0,0,0.6);
    transform: translate(-50%, -50%);
}

.sb-reference-label-icon span {
    display: inline-block;
    white-space: nowrap;
    font-family: var(--font-mono);
    font-size: 10px;
    font-style: italic;
    color: #FFFFFF;
    text-shadow: 0 1px 2px rgba(0,0,0,0.85), 0 0 4px rgba(0,0,0,0.6);
}

.sb-map-box--square { aspect-ratio: 1 / 1; border: 1px solid rgba(43,42,38,0.14); }

/* On a short mobile map box a popup can end up sharing the same corner as this chip,
   with its opaque background painting over the tail end of the popup's own text.
   Fading it out for as long as a popup is open (see leaflet-map.js's
   popupopen/popupclose handlers) is simpler and more robust than trying to
   out-position every possible popup size/location with z-index alone. */
.sb-map-box.sb-popup-open .sb-map-kilden-link {
    opacity: 0;
    pointer-events: none;
}

/* Moved from bottom-right to top-right: it used to share the exact same corner as
   Leaflet's attribution control, which on narrow phones wraps onto 2-3 lines and ran
   straight through this button (see mobil visuellfeil/markup_170.png,
   markup_173.png). Top-right is clear of both the attribution (bottom-right) and the
   zoom control (top-left). */
.sb-map-kilden-link {
    position: absolute;
    z-index: 620;
    right: 12px; top: 10px;
    padding: 10px 16px;
    font-weight: 600;
    font-size: 0.8rem;
    background: #FFFFFF;
    border: 1px solid var(--color-text);
    border-radius: 3px;
    text-decoration: none;
    color: var(--color-text);
    opacity: 1;
    transition: opacity 0.15s ease;
}

/* Sits below the map as normal page content (not another corner chip - all four
   corners are already taken by the zoom control, Kilden-link, legend, and Leaflet's
   own attribution) so the position status text has room to say something real
   ("du er i Nedre Grødal", "du er ca 4.2 km fra nærmeste beiteområde") without being
   squeezed into a small chip. */
.sb-locate-wrap { margin-top: 14px; }

.sb-locate-status {
    margin: 10px 0 0;
    font-size: 0.92rem;
    color: var(--color-link);
}

.sb-locate-status.is-inside { color: var(--color-accent); font-weight: 600; }
.sb-locate-status.is-error { color: #B2662E; }

/* ---------- Year wheel ---------- */
.sb-wheel {
    border-radius: 50%;
    box-shadow: 0 14px 28px -14px rgba(42,51,36,0.35), 0 3px 6px rgba(42,51,36,0.15);
    background: #FFFFFF;
}

.sb-wheel-svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 3px 4px rgba(43,42,38,0.15)); }

.sb-yearwheel-list li { display: flex; align-items: center; gap: 10px; font-size: 0.86rem; }

.sb-phase-swatch {
    width: 11px; height: 11px;
    border-radius: 2px;
    display: inline-block;
    flex: none;
    box-shadow: 0 1px 3px rgba(43,42,38,0.3);
}

.sb-callout-box {
    padding: 14px 16px;
    background: var(--color-bg-alt);
    border-radius: 6px;
    font-size: 0.88rem;
    font-family: var(--font-mono);
    color: var(--color-text);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 6px 14px -8px rgba(43,42,38,0.25);
}

/* ---------- Contact cards ---------- */
.sb-contact-kicker {
    font-family: var(--font-mono);
    font-size: 0.64rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-earth);
    margin: 0 0 8px;
}

.sb-contact-line { margin: 0 0 4px; font-size: 0.92rem; }
.sb-contact-line a { text-decoration: none; color: var(--color-text); display: inline-block; padding: 4px 0; }

.sb-status-line { display: flex; align-items: center; gap: 9px; margin: 16px 0 8px; }

/* Red and pulsing, same pattern as the livebar's Rovdyrstatus dot (.sb-rovdyr-dot
   in layout.css) - this is the same status, just repeated here under the "Meld fra"
   heading, so it should read as the same kind of thing. */
.sb-status-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #C0392B;
    display: inline-block;
    flex: none;
    box-shadow: 0 0 0 4px rgba(192,57,43,0.28);
    animation: sb-rovdyr-pulse 2s ease-in-out infinite;
}

.sb-status-updated { font-family: var(--font-mono); font-size: 0.7rem; color: var(--color-muted); margin: 0 0 12px; }

/* ---------- Turgåer / hiker CTA banner ---------- */
.sb-hiker-list { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.sb-hiker-list li { padding-left: 18px; position: relative; font-size: 0.92rem; color: var(--color-cta-text); }
.sb-hiker-list li::before { content: "—"; position: absolute; left: 0; color: var(--color-accent); }

.sb-lang-pills { display: flex; flex-wrap: wrap; gap: 8px 9px; }

.sb-lang-pill {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--color-cta-text);
    background: rgba(244,241,234,0.08);
    border: 1px solid rgba(244,241,234,0.2);
    border-radius: 20px;
    padding: 6px 11px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}

/* ---------- Steps / cards ---------- */
.sb-step-card { background: var(--color-bg-alt); border: 1px solid rgba(43,42,38,0.14); border-radius: 3px; padding: 20px; }
.sb-step-label { font-family: var(--font-mono); font-size: 0.72rem; color: var(--color-accent); margin: 0 0 10px; }
.sb-step-title { font-weight: 700; margin: 0 0 8px; color: var(--color-deep); }
.sb-step-body { font-size: 0.88rem; color: var(--color-link); margin: 0; }

/* ---------- Forms ---------- */
.sb-form-row { display: grid; gap: 16px; margin-bottom: 16px; }
@media (min-width: 681px) { .sb-form-row { grid-template-columns: 1fr 1fr; } }

.sb-form-field { display: flex; flex-direction: column; gap: 6px; font-size: 0.86rem; font-weight: 600; color: var(--color-deep); margin-bottom: 16px; }

/* CF7 wraps every field in this span, default display is inline-block with no set
   width - forcing it to block/100% avoids the same auto-sizing issue as the inputs
   themselves, and removes any ambiguity in how a child's 100% resolves against it. */
.wpcf7-form-control-wrap { display: block; width: 100%; }

.sb-form-field input,
.sb-form-field textarea,
.wpcf7-form input[type="text"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="date"],
.wpcf7-form textarea {
    /* CF7's default shortcode output adds a `size="40"`/`cols="40"` HTML attribute to
       every field, which gives it a browser-computed intrinsic width based on ~40
       characters - with padding/border added on top of that (box-sizing:border-box
       only redistributes width when a CSS width is actually specified, not for
       auto-sized elements). Without an explicit width here, that intrinsic size ran
       wider than the mobile viewport and caused page-wide horizontal scroll. */
    width: 100%;
    max-width: 100%;
    font-family: var(--font-body);
    font-size: 0.94rem;
    padding: 11px 12px;
    border: 1px solid rgba(43,42,38,0.3);
    border-radius: 3px;
    background: #FFFFFF;
    color: var(--color-text);
}

.sb-form-dropzone {
    border: 1px dashed var(--color-muted);
    border-radius: 3px;
    padding: 26px;
    text-align: center;
    font-size: 0.86rem;
    color: var(--color-accent);
    background: var(--color-bg-alt);
}