/* ---------- Livefeed bar ---------- */
.sb-livebar {
    background: var(--color-bg-soft);
    border-bottom: 1px solid rgba(43,42,38,0.08);
}

.sb-ticker {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--color-link);
    gap: 10px;
    padding-top: 9px;
    padding-bottom: 9px;
}

.sb-live-line { display: flex; align-items: center; gap: 12px; }

.sb-live-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--color-live-dot);
    display: inline-block;
    flex: none;
    box-shadow: 0 0 0 4px rgba(143,176,122,0.25);
    animation: sb-live-pulse 2s ease-in-out infinite;
}

@keyframes sb-live-pulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(143,176,122,0.28); }
    50% { box-shadow: 0 0 0 9px rgba(143,176,122,0.06); }
}

.sb-sep { color: rgba(43,42,38,0.3); }

/* Same pulsing-dot pattern as .sb-live-dot (the "I dag" indicator), but red - marks
   the rovdyrstatus link as something worth actually checking, not just static text. */
.sb-rovdyr-wrap { display: flex; flex-direction: column; gap: 2px; }

.sb-rovdyr-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.sb-rovdyr-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;
}

@keyframes sb-rovdyr-pulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(192,57,43,0.28); }
    50% { box-shadow: 0 0 0 9px rgba(192,57,43,0.06); }
}

.sb-ticker a { color: var(--color-link); text-decoration: none; }

/* ---------- Sticky header ---------- */
.sb-site-header {
    position: sticky;
    top: 0;
    /* Must outrank Leaflet's control container (.leaflet-top/.leaflet-bottom -
       zoom buttons + attribution), which is hardcoded to z-index 1000 - on desktop,
       scrolling a page with an embedded map (Beiteomradet/Forside) down past the
       map's top edge let those controls render on top of this sticky header instead
       of staying behind it, since 60 is far below 1000. Kept below .sb-drawer (1100)
       so the mobile drawer still opens on top of the header as before. */
    z-index: 1050;
    background: rgba(255,255,255,0.9);
    backdrop-filter: blur(10px) saturate(1.4);
    -webkit-backdrop-filter: blur(10px) saturate(1.4);
    box-shadow: 0 1px 0 rgba(43,42,38,0.08), 0 6px 16px -8px rgba(43,42,38,0.18);
}

/* WordPress's own admin toolbar is also fixed to the very top (32px tall, 46px on
   screens <=782px - WP core's own breakpoint/heights, not a guess) - with no offset
   here, our sticky header's top:0 slides underneath it on scroll, hiding the header's
   own top ~32px behind the admin bar. Only visible to logged-in staff, not ordinary
   visitors, but worth fixing so editing the site doesn't look broken. */
body.admin-bar .sb-site-header {
    top: 32px;
}

@media screen and (max-width: 782px) {
    body.admin-bar .sb-site-header {
        top: 46px;
    }
}

.sb-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 16px;
}

/* flex:none, desktop only - .sb-header-inner is a flex row sharing space between the
   brand block and the nav, and without this the brand block was the one getting
   squeezed below its own content's natural width (min-width:0 below exists
   specifically to allow that shrinking), truncating "Fellesbeite i Sunndalsfjella"
   with an ellipsis even on viewports with plenty of room to spare. The desktop nav
   already has its own flex-wrap mechanism to absorb space pressure, so it should be
   the one yielding there, not the brand text. Kept mobile-width shrinkable still (no
   override below 681px) - on a narrow phone the brand block's own natural width can
   get close to the full screen width with nothing else to give way, so the shrink+
   ellipsis fallback stays available there as a safety net against real horizontal
   overflow, same as it's always been. */
@media (min-width: 681px) {
    .sb-brand { flex: none; }
}

.sb-brand-link {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    text-decoration: none;
}

.sb-logo-img, .custom-logo {
    height: 58px;
    width: auto;
    border-radius: 4px;
    box-shadow: 0 3px 8px rgba(43,42,38,0.22);
    flex: none;
}

/* Sunndal Sau og Geit's logo is a 500x500 square with the icon+wordmark filling only
   the top ~45% and a lot of empty white space below - showing it at width:auto like
   the Beitelag logo above would shrink the actual content to a sliver inside a mostly-
   blank box. Fixed width (~2.1:1, the icon+wordmark's own aspect ratio) + object-fit:
   cover + object-position:top instead crops away just that empty space. */
.sb-logo-img--sauoggeit { width: 122px; object-fit: cover; object-position: top; }

.sb-brand-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }

.sb-brandname {
    font-family: var(--font-display);
    text-transform: uppercase;
    font-weight: 800;
    line-height: 0.95;
    color: var(--color-text);
    white-space: nowrap;
    font-size: 1.24rem;
}

.sb-header-subtitle {
    font-family: var(--font-mono);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-muted);
    font-size: 0.72rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
}

/* English's machine-translated subtitle ("Common pasture in Sunndalsfjella") is
   measurably longer than the Norwegian original and was truncating with an
   ellipsis on real mobile widths where Norwegian mostly fit - measured on a
   390px-wide viewport: Norwegian already overflowed slightly (213px content in
   a 189px box) but English overflowed much further (243px) since English
   sentences of the same meaning tend to run longer. Shrinking the font here
   (mobile-only, the ellipsis/ min-width:0 safety net from the desktop-brand
   -width fix stays in place for anything still too long to fit) lets both
   languages display in full at realistic mobile widths instead of relying on
   the ellipsis fallback by default.
   0.625rem (10px) was chosen over a smaller size for legibility - fits both
   languages in full at ~414px-wide phones (iPhone 12/13/14 etc., measured with
   0px overflow); only genuinely narrow phones (~390px and below, e.g. iPhone
   SE) may still show a trailing ellipsis on the English version specifically,
   which is an acceptable trade-off for readability on the common case. */
@media (max-width: 680px) {
    .sb-header-subtitle { font-size: 0.625rem; }
}

.sb-desktop-nav-wrap { display: none; }

.sb-desktop-nav, .sb-drawer-nav {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sb-navlink {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    font-weight: 600;
    color: var(--color-text);
    padding-bottom: 4px;
    border-bottom: 2px solid transparent;
    display: inline-block;
    white-space: nowrap;
}

/* Classic flexbox "force a line break here" trick: a zero-size, 100%-flex-basis item
   always starts a new flex line, pushing everything after it (Sunndal Sau og Geit +
   Kontakt) onto their own row regardless of how much room happens to be left in the
   row above - see sb_nav_menu_items() in template-tags.php for why that "how much
   room is left" was inconsistent between pages in the first place. */
.sb-nav-break { flex-basis: 100%; width: 0; height: 0; margin: 0; padding: 0; list-style: none; }

/* Sunndal Sau og Geit is a separate, related organisation, not another section of
   Sunndal Beitelag itself - a colour change alone still read as "one more item in the
   same list", so it also gets a divider line pulling it away from the Beitelaget
   pages, and a pill/badge treatment (border + rounded background) instead of the
   plain underlined-text style every other nav link uses, so it reads as its own
   distinct thing rather than a themed list item. Black text on white with a black
   border, matching Sunndal Sau og Geit's own logo (a black-line sheep illustration +
   black uppercase wordmark on white) rather than any colour from Sunndal Beitelag's
   own palette - pure #000 rather than the site's usual off-black --color-text, since
   this is deliberately matching the logo's true black, not this site's own text colour.
   In the mobile drawer (stacked vertically) the divider runs above it as a
   border-top; the desktop override right below switches it to a border-left instead
   (a top border in a horizontal flex row just shifts that item down out of line with
   its row siblings rather than reading as a separator). Both live in this one file so
   the desktop rule can't lose the cascade to the base rule that follows it - keeping
   them split across style.css/layout.css caused exactly that bug once before,
   since layout.css loads after style.css and an unconditional rule there always
   wins the tie over an earlier, equally-specific media-query rule. */
.sb-nav-external {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(0,0,0,0.25);
}
/* Always the solid black-fill/white-text treatment - not just when this happens to be
   the current page - since the user specifically liked how that looked and wanted it
   site-wide rather than only appearing on the Sunndal Sau og Geit page itself. */
.sb-nav-external .sb-navlink {
    color: #FFFFFF;
    background: #000000;
    border: 1px solid #000000;
    padding: 6px 14px;
}
/* In the mobile drawer, every plain .sb-navlink also carries its own generic
   border-bottom divider + full-width sizing (see .sb-drawer-nav .sb-navlink
   below) - that rule has the exact same specificity as the pill rule just
   above, so source order alone decided the tie and the generic rule (declared
   later in this file) was winning: the pill rendered full-width with a plain
   grey underline instead of a compact rounded pill, AND the preceding item's
   own border-bottom plus this item's separate margin/padding/border-top divider
   stacked into two separate lines with a blank gap between them - looking like
   an empty extra row. Extra ancestor context here (.sb-drawer-nav) makes this
   selector unambiguously more specific, so it wins regardless of order, and
   removing this item's own border-bottom leaves exactly one visible divider
   (this item's border-top) rather than two. */
.sb-drawer-nav .sb-nav-external .sb-navlink {
    width: auto;
    padding: 6px 14px;
    border-bottom: none;
}
/* The item immediately before the pill still has its own normal border-bottom
   divider (every plain drawer item does) - that's the second line contributing
   to the "empty row" gap above. Drop it via :has() rather than hardcoding which
   item currently precedes the pill, so this stays correct if the menu is ever
   reordered. */
.sb-drawer-nav > li:has(+ .sb-nav-external) .sb-navlink {
    border-bottom: none;
}
/* The pill used to be the last drawer item, so it never needed a divider after
   itself - now the language links (English/Norsk) follow it, and without this
   they'd butt straight up against the pill with no breathing room, unlike the
   clear gap the pill already gets from the border-left on desktop. Mirrors the
   existing border-top treatment above the pill. */
.sb-drawer-nav .sb-nav-external {
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(0,0,0,0.25);
}

/* Real TranslatePress quirk, not caused by renaming "Norwegian" to "Norsk": the
   CURRENTLY ACTIVE language's menu item renders its flag inside a plain <span>,
   while every other (switchable) language wraps its flag in <span class="trp-menu-ls-label">
   - only the latter matches TranslatePress's own CSS rule that gives the flag a
   3px right margin, so whichever language happens to be active renders with its
   flag jammed against the text (measured: 0px margin vs 3px). Since the "active"
   language differs depending on which page you're viewing, this would otherwise
   swap between English/Norsk rather than consistently affecting one - fixed by
   forcing the margin on the shared, always-present .trp-language-switcher-container
   class instead of relying on TranslatePress's own inconsistent wrapper markup. */
.trp-language-switcher-container .trp-flag-image {
    margin: -2px 3px !important;
}

@media (min-width: 681px) {
    .sb-nav-external {
        margin-top: 0; padding-top: 0; border-top: none;
        margin-left: 4px; padding-left: 20px; border-left: 1px solid rgba(0,0,0,0.25);
    }
}

.menu-item.current-menu-item .sb-navlink,
.current_page_item .sb-navlink {
    border-bottom-color: var(--color-accent);
}

.sb-burger-wrap {
    width: 44px; height: 44px;
    flex: none;
    align-items: center;
    justify-content: center;
    color: var(--color-text);
    cursor: pointer;
}

.sb-nav-toggle { display: none; }

.sb-drawer {
    position: fixed;
    inset: 0;
    /* Must outrank Leaflet's own internal panes (markerPane 600, tooltipPane 650,
       popupPane 700), this theme's own map legend/Kilden-link chips (620, see
       components.css), AND Leaflet's control container (.leaflet-top/.leaflet-bottom,
       which holds the zoom buttons and attribution text) - that one is Leaflet's
       own hardcoded 1000, higher than all the panes, and was still bleeding the
       attribution text through on top of the drawer even after raising this to 900. */
    z-index: 1100;
    background: rgba(20,26,16,0.35);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

/* input, burger label and drawer are siblings inside .sb-header-inner */
.sb-nav-toggle:checked ~ .sb-drawer {
    opacity: 1;
    pointer-events: auto;
}

.sb-drawer-panel {
    position: absolute;
    top: 0; right: 0;
    height: 100%;
    width: min(320px, 84vw);
    background: #FFFFFF;
    box-shadow: -10px 0 30px rgba(20,26,16,0.3);
    padding: 16px 24px;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.2s ease;
}

.sb-nav-toggle:checked ~ .sb-drawer .sb-drawer-panel {
    transform: translateX(0);
}

.sb-drawer-close-row { display: flex; justify-content: flex-end; margin-bottom: 10px; }

.sb-drawer-close {
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    color: var(--color-accent);
    font-size: 1.3rem;
    cursor: pointer;
}

.sb-drawer-nav .sb-navlink { padding: 10px 0; border-bottom: 1px solid rgba(43,42,38,0.1); width: 100%; }

@media (min-width: 681px) {
    /* flex-wrap + the nav-wrap's own flex-basis:100% puts the nav on its own full-
       width row below the brand, rather than sharing one row with it. Needed once the
       bigger logo/brand text (below) + a full, untruncated subtitle + all 8 nav items
       (including the wide Sunndal Sau og Geit pill) turned out to be too much to fit
       in one row at ordinary desktop widths - the nav's "6 links + pill on row 1,
       Kontakt alone on row 2" layout (forced via sb-nav-break, see template-tags.php)
       kept losing more of its own row to the brand than it had room for. Giving nav
       the *entire* header width on its own row makes that pattern reliable regardless
       of how wide the brand block is. */
    .sb-header-inner { padding: 16px 20px; gap: 12px 24px; flex-wrap: wrap; max-width: var(--max-width); margin: 0 auto; }
    .sb-desktop-nav-wrap { display: block; flex-basis: 100%; }
    .sb-logo-img, .custom-logo { height: 82px; }
    .sb-logo-img--sauoggeit { width: 172px; }
    .sb-brandname { font-size: 1.72rem; }
    .sb-header-subtitle { font-size: 0.8rem; }
}

/* ---------- Footer ---------- */
.sb-site-footer {
    background: var(--color-deep);
    color: var(--color-footer-text);
    padding: 36px 16px 24px;
    box-shadow: 0 -10px 20px -18px rgba(0,0,0,0.4) inset;
}

.sb-footer-inner { max-width: var(--max-width); margin: 0 auto; padding: 0 4px; }

.sb-footer-heading {
    font-family: var(--font-display);
    text-transform: uppercase;
    font-weight: 800;
    color: #FFFFFF;
    font-size: 0.9rem;
    letter-spacing: 0.05em;
    margin: 0 0 8px;
}

.sb-footer-heading-lg { font-size: 1.15rem; letter-spacing: normal; }

.sb-footer-desc { max-width: 34ch; font-size: 0.86rem; color: var(--color-footer-desc); margin: 0; }

.sb-footer-link {
    display: block;
    text-decoration: none;
    color: var(--color-footer-text);
    font-size: 0.86rem;
    padding: 5px 0;
}

.sb-footer-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 6px;
    padding-top: 16px;
    font-family: var(--font-mono);
    font-size: 0.66rem;
    color: var(--color-footer-meta);
}