/*
Theme Name: Sunndal Beitelag
Theme URI: https://sunndalbeitelag.no
Author: Sunndal Beitelag
Description: Custom tema for Sunndal Beitelag - fellesbeite for alle beitedyrene i Sunndal kommune.
Version: 1.0.0
Requires PHP: 7.4
Text Domain: sunndal-beitelag
*/

:root {
    --color-bg: #FFFFFF;
    --color-bg-alt: #EAF1E4;
    --color-bg-soft: #F1F5EC;
    --color-deep: #1B3518;
    --color-btn: #1B3518;
    --color-link: #4A5740;
    --color-accent: #3F6B3F;
    --color-muted: #7C8873;
    --color-text: #2B2A26;

    --color-earth: #6B5342;
    --color-live-dot: #8FB07A;
    --color-status-dot: #6B8F52;

    --color-footer-text: #D9E3D2;
    --color-footer-desc: #C9D6C0;
    --color-footer-meta: #A9B8A0;
    --color-cta-text: #E3ECDB;

    --font-display: 'Big Shoulders Display', sans-serif;
    --font-body: 'Work Sans', sans-serif;
    --font-mono: 'IBM Plex Mono', monospace;

    --breakpoint-desktop: 681px;
    --max-width: 1180px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--font-body);
    color: var(--color-text);
    background: var(--color-bg);
    line-height: 1.5;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

button { font-family: inherit; }

.sb-inner {
    padding: 0 16px;
}

.sb-eyebrow {
    font-family: var(--font-mono);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-accent);
    display: flex;
    align-items: center;
    gap: 0.5em;
    margin: 0;
    font-size: 0.66rem;
}

.sb-eyebrow-bar {
    width: 14px;
    height: 1px;
    background: var(--color-accent);
    display: inline-block;
}

.sb-h1 {
    font-family: var(--font-display);
    text-transform: uppercase;
    font-weight: 800;
    line-height: 1.0;
    margin: 14px 0 16px;
    color: var(--color-deep);
    font-size: 2rem;
}

.sb-h2 {
    font-family: var(--font-display);
    text-transform: uppercase;
    font-weight: 800;
    line-height: 1.0;
    margin: 8px 0 14px;
    color: var(--color-deep);
    font-size: 1.4rem;
}

.sb-section-pad {
    padding: 40px 16px;
}

.sb-hero-pad {
    padding: 22px 16px 0;
}

.sb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 22px;
    font-weight: 600;
    font-size: 0.92rem;
    text-decoration: none;
    border-radius: 3px;
    border: 1px solid var(--color-text);
    background: var(--color-bg);
    color: var(--color-text);
    box-shadow: 0 2px 6px rgba(43,42,38,0.1);
    min-height: 44px;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.sb-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 20px -10px rgba(43,42,38,0.3); }

.sb-btn-primary {
    border: 1px solid var(--color-btn);
    background: var(--color-btn);
    color: #FFFFFF;
    box-shadow: 0 6px 18px -4px rgba(74,87,64,0.55), 0 2px 4px rgba(74,87,64,0.3), 0 0 0 0 rgba(143,176,122,0.45);
    animation: sb-cta-glow 2.6s ease-in-out infinite;
}

.sb-btn-primary:hover { animation-play-state: paused; }

@keyframes sb-cta-glow {
    0%, 100% { box-shadow: 0 6px 18px -4px rgba(74,87,64,0.55), 0 2px 4px rgba(74,87,64,0.3), 0 0 0 0 rgba(143,176,122,0.45); }
    50% { box-shadow: 0 6px 18px -4px rgba(74,87,64,0.55), 0 2px 4px rgba(74,87,64,0.3), 0 0 0 9px rgba(143,176,122,0); }
}

.sb-card {
    /* Light sage, not white - this section sits on a plain white page background,
       so a white card only showed up as a faint shadow with no real contrast. */
    background: var(--color-bg-alt);
    border-radius: 6px;
    padding: 18px;
    box-shadow: 0 2px 8px rgba(43,42,38,0.08);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.sb-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 28px -12px rgba(43,42,38,0.28);
}

.sb-placeholder {
    background: var(--color-bg-soft);
    border: 1px dashed var(--color-muted);
    border-radius: 3px;
    padding: 14px 18px;
    font-size: 0.86rem;
    color: var(--color-accent);
}

.sb-pill {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    padding: 9px 16px;
    border-radius: 20px;
    cursor: pointer;
    background: var(--color-bg);
    color: var(--color-text);
    border: 1px solid rgba(43,42,38,0.3);
}

.sb-pill.is-active {
    background: var(--color-deep);
    color: #FFFFFF;
    border-color: var(--color-deep);
}

.sb-datarow {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px 0;
    border-top: 1px solid rgba(43,42,38,0.16);
}

.sb-2col {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.sb-steps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
    gap: 18px;
}

.sb-cta-box {
    background: var(--color-deep);
    color: #FFFFFF;
    border-radius: 8px;
    box-shadow: 0 20px 40px -20px rgba(20,26,16,0.55), 0 6px 14px rgba(20,26,16,0.35);
    padding: 26px 22px;
    /* position:relative so .sb-cta-dog-icon (absolute) anchors to this box's
       own edges, not the page; overflow:hidden keeps the icon's corners from
       ever poking past this box's own rounded corners. */
    position: relative;
    overflow: hidden;
}

.sb-cta-icon {
    flex: none;
    width: 44px;
    height: 44px;
    background: #FFFFFF;
    color: var(--color-deep);
    display: flex;
    align-items: center;
    justify-content: center;
    clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
    font-family: var(--font-display);
    font-weight: 900;
    padding-top: 8px;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.25));
}

/* Beiteovervåking's own animated radar mark (matches the logo on that page's
   tabbar - see rovdyrkart.css's .rk-radar-o) reused here on the "Rovdyr &
   varsling" page's CTA to that same page, instead of the plain "!" warning
   triangle every other .sb-cta-icon still uses - this page/site doesn't load
   rovdyrkart.css at all, so the ring+sweep is reimplemented here in this
   site's own white-on-dark-green palette rather than Beiteovervåking's gold.
   Only this one CTA gets it (front-page.php/page-sunndal-sau-og-geit.php's
   own "!" icons are untouched) - overrides .sb-cta-icon's triangle/glyph
   properties without touching the base rule other pages still rely on. */
.sb-cta-icon--radar {
    background: transparent;
    clip-path: none;
    border-radius: 50%;
    border: 2px solid #FFFFFF;
    padding-top: 0;
    position: relative;
    overflow: hidden;
}
.sb-cta-icon-radar-sweep {
    position: absolute;
    inset: -10%;
    background: conic-gradient(from 0deg, #FFFFFF 0deg, transparent 65deg, transparent 360deg);
    opacity: .85;
    animation: sb-cta-radar-spin 3s linear infinite;
}
@keyframes sb-cta-radar-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* ---------- Mobile (default) ---------- */
.sb-desktop-nav { display: none; }
.sb-burger-wrap { display: flex; }
.sb-hero-eyebrow-label { display: none; }
.sb-btn-row { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; }
.sb-btn-row .sb-btn { width: 100%; }
.sb-ticker { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.sb-ticker .sb-sep { display: none; }
/* overflow:hidden is required here, not just cosmetic - Leaflet pans/zooms by
   transforming an internal pane larger than the visible container, and relies on
   *some* ancestor clipping that pane back down to the container's own box. Changing
   this to overflow:visible (tried briefly to fix a popup-clipping bug - see the
   maxHeight comment in leaflet-map.js for the real fix instead) broke that assumption
   on a real phone: dragging the map showed content rendering outside the box's own
   bounds instead of properly panning. Never remove overflow:hidden here again. */
.sb-map-box { margin: 22px -16px 0; border-radius: 0; aspect-ratio: 1 / 1.02; position: relative; background: var(--color-bg-soft); overflow: hidden; box-shadow: 0 14px 30px -16px rgba(43,42,38,0.35), 0 4px 10px rgba(43,42,38,0.12); }
.sb-yearwheel-grid { display: flex; flex-direction: column; text-align: center; gap: 22px; align-items: center; }
.sb-yearwheel-grid .sb-wheel { width: 180px; }
.sb-yearwheel-list { text-align: left; width: 100%; list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.sb-contact-grid { display: flex; flex-direction: column; gap: 20px; margin-top: 32px; padding: 20px 18px; background: #FFFFFF; border-radius: 8px; box-shadow: 0 10px 22px -14px rgba(43,42,38,0.25); }
.sb-footer-grid { display: flex; flex-direction: column; gap: 24px; padding-bottom: 22px; border-bottom: 1px solid rgba(244,241,234,0.15); }
.sb-cta-head { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }

/* ---------- Hero grid (stacked on mobile, side-by-side on desktop) ----------
   Used on Rovdyr & varsling for .sb-hero-predator-icons - generic 2-column
   hero layout, right-column content varies by page. Front page no longer
   uses this - see .sb-hero--photo below instead. */
.sb-hero-grid { display: flex; flex-direction: column; gap: 26px; }

/* ---------- Front-page hero: blurred landscape photo as full-bleed
   background instead of a boxed side image, so the eyebrow/heading/intro/
   buttons sit directly over it. .sb-hero-bg is absolutely positioned against
   .sb-hero--photo (position:relative) and filled with the photo at
   object-fit:cover. transform:scale hides the soft, unblurred-looking edge
   that CSS blur() would otherwise leave right at the image's own boundary.

   Legibility: two earlier approaches were tried and dropped - a white
   text-outline (looked like a sticker/label) and a translucent "plate"
   behind just the eyebrow/intro lines (still looked boxy/patchy). Both were
   fighting the same problem: dark text has unpredictable contrast against a
   photo whose brightness varies a lot (dark mountain vs bright sky). Instead
   of protecting dark text, the scrim now darkens the photo evenly enough
   that LIGHT text reads reliably everywhere on it - the same light-on-dark
   pattern already used for the CTA boxes elsewhere on this page (var(--color-
   cta-text) on a dark green background), just with a photo instead of a flat
   fill. Desktop uses a left-to-right gradient instead of a flat tint, since
   the text only ever sits in the left ~60% of the box there - the right side
   stays brighter/more colourful where there's no text to protect. */
/* min-height 360 here (not 420) - taller was tried, but a portrait-ish mobile
   box crops the (landscape-shaped) photo's left/right harder the taller it
   gets, so shorter actually shows *more* of the picture, not less. A second,
   sharp object-fit:contain image layer was also tried on top of this blurred
   one, to show the whole uncropped photo letterboxed on mobile - dropped
   again, because the hard sharp/blur transition itself reads as a visible
   seam/glitch across the photo regardless of how well the two crops are
   aligned. Simplest fix that doesn't introduce that artifact: one image,
   sized to show as much of the frame as the layout allows. */
/* padding-bottom matches .sb-hero-pad's own top padding (22px) - without it,
   the flex-centred content on mobile fills the box almost exactly, so the
   bottom button sits flush against the section's own edge with no breathing
   room, unlike desktop where the taller min-height leaves a natural gap. */
.sb-hero--photo { position: relative; overflow: hidden; min-height: 360px; display: flex; align-items: center; padding-bottom: 22px; }
.sb-hero-bg { position: absolute; inset: 0; z-index: 0; }
.sb-hero-bg-blur {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 25% (not 50%) horizontally here - mobile-only, shifts the crop left so
       more of the snow-capped mountain peak on the left side of the source
       photo shows. Desktop keeps the original 50% (centred) crop, frozen via
       an override below - it was already showing mountain + lake together
       and wasn't part of this request. */
    object-position: 25% 12%;
    filter: blur(2px);
    transform: scale(1.02);
}
.sb-hero-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(15,26,12,0.48);
}
.sb-hero--photo > .sb-inner { position: relative; z-index: 1; width: 100%; }

.sb-hero--photo .sb-eyebrow,
.sb-hero--photo .sb-hero-intro { color: var(--color-cta-text); }
.sb-hero--photo .sb-eyebrow-bar { background: var(--color-cta-text); }
.sb-hero--photo .sb-h1 { color: var(--color-live-dot); }

/* ---------- Predator silhouette icons (Rovdyr & varsling hero) ----------
   Each source PNG (bjørn/ulv/gaupe/jerv) is a real transparent silhouette -
   CSS mask-image lets these be tinted in the site's own --color-deep instead
   of staying generic black clip-art, using each icon's own URL as a
   per-element custom property (--sb-icon-url) so one shared rule covers all
   four rather than four near-duplicate classes. */
.sb-hero-predator-icons { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.sb-predator-icon {
    display: block;
    width: 100%;
    height: 100px;
    background-color: var(--color-deep);
    -webkit-mask-image: var(--sb-icon-url);
    mask-image: var(--sb-icon-url);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

/* ---------- Hiker CTA dog icon ----------
   Mobile: sits in-flow, centered, right after the language pills (last thing
   in .sb-cta-body) - a narrow mobile box has no real "empty" space beside
   the text to float it in without overlapping, so it gets its own row there
   instead of being hidden entirely. Desktop: switches to absolute, floating
   in the actual empty space to the right of the title/bullets/pills, not a
   separate boxed photo beside it (DOM position stays the same either way -
   position:absolute takes it out of flow regardless of where it sits in the
   markup, so placing it last works cleanly for both breakpoints).

   Source is the full physical båndtvang-plakat photo (1176x1678, with its
   own light-gray photo-margin around a black poster card) - object-fit:cover
   + a flat aspect-ratio crops that down to just the dog+leash graphic on
   near-black. mix-blend-mode:screen then removes that remaining near-black
   background (screen treats black as contributing nothing, so it drops out
   against the CTA box's own dark green) - only works because the crop is
   genuinely near-black; would need a real transparent PNG for anything
   lighter.

   The extra transform:scale crops out the source's thin light-gray edge
   slivers too (screen blend removes near-black, not gray, so they wouldn't
   disappear on their own at 100% scale).

   NB: an attempt to fix desktop pixelation here by resizing the img itself
   (122% width/height + position:absolute centring) instead of using
   transform:scale was reverted - growing the box changes what "object-
   position: 50% 8%" is measured against, so it silently cropped the wrong
   part of the source image as well as still looking wrong. Back to the
   original transform:scale approach.

   The pixelation itself turned out to be neither a CSS artifact nor JPEG
   compression noise - checked by actually cropping the exact source pixels
   this box displays (via PHP/GD) and looking at them directly: the source
   crop itself is clean, but rendered down to a 130x78 box on a standard
   (1x pixel-density) desktop screen, that's genuinely only 130x78 real
   pixels to draw a curved silhouette (tail curl, ear points, a thin diagonal
   leash line) in - not enough to look smooth, no matter how good the source
   is. A phone screen gets 2-3x that many real pixels for the same 130x78
   CSS box, which is why only desktop ever showed it. The only real fix is
   more physical pixels to draw into, i.e. a bigger box - see the desktop
   width override below (mobile is untouched, it already looked fine). */
.sb-cta-dog-icon {
    display: block;
    width: 130px;
    aspect-ratio: 5 / 3;
    overflow: hidden;
    margin: 20px auto 0;
    pointer-events: none;
}
.sb-cta-dog-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 8%;
    display: block;
    mix-blend-mode: screen;
    opacity: .95;
    transform: scale(1.22);
}

@media (min-width: 681px) {
    .sb-cta-dog-icon {
        position: absolute;
        top: 26px;
        right: 32px;
        width: 170px;
        margin: 0;
    }
}

/* ---------- Desktop ---------- */
@media (min-width: 681px) {
    /* flex-wrap so that once there are enough nav items to outgrow one row (8 items
       as of "Sunndal Sau og Geit"/"For medlemmer"), whole items drop to a second row
       instead of the row staying single-line and squeezing each item's own text into
       breaking mid-phrase (see mobil visuellfeil screenshot - "Om"/"beitelaget" and
       "Sunndal Sau"/"og Geit" splitting across two lines). white-space:nowrap on
       .sb-navlink below is what actually stops that mid-item text wrap; flex-wrap here
       is what gives the now-nowrap items somewhere to go if they don't all fit. */
    .sb-desktop-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 26px; }
    .sb-burger-wrap { display: none; }
    .sb-hero-eyebrow-label { display: inline; }
    .sb-btn-row { flex-direction: row; flex-wrap: wrap; }
    .sb-btn-row .sb-btn { width: auto; }
    .sb-ticker { flex-direction: row; align-items: center; gap: 22px; }
    .sb-ticker .sb-sep { display: inline; }
    .sb-map-box { margin: 34px 0 0; border-radius: 8px; aspect-ratio: 16 / 6.4; }
    .sb-yearwheel-grid { flex-direction: row; display: grid; grid-template-columns: 240px 1fr; gap: 56px; align-items: center; text-align: left; }
    .sb-yearwheel-grid .sb-wheel { width: 100%; }
    .sb-hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 48px; align-items: center; }
    .sb-hero--photo { min-height: 560px; }
    .sb-hero-bg-blur { object-position: 50% 12%; }
    .sb-hero-bg::after { background: linear-gradient(100deg, rgba(15,26,12,0.6) 15%, rgba(15,26,12,0.32) 45%, rgba(15,26,12,0.08) 75%); }
    .sb-yearwheel-list { flex-direction: row; flex-wrap: wrap; gap: 10px 26px; }
    .sb-contact-grid { flex-direction: row; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
    .sb-footer-grid { flex-direction: row; display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 32px; }
    /* Explicit grid placement, not auto-flow: with only icon+title relying on
       auto-placement, a 3rd item (the hiker-list body) wrapped to column 1 and
       stretched that column's "auto" track to fit its full width, squeezing the
       title into what was left (~110px - one word per line). Naming every piece
       and placing it explicitly avoids that regardless of markup order. */
    .sb-cta-box { padding: 44px; display: grid; grid-template-columns: auto 1fr; column-gap: 30px; row-gap: 18px; align-items: start; }
    .sb-cta-head { display: contents; }
    .sb-cta-icon { grid-column: 1; grid-row: 1; width: 52px; height: 52px; font-size: 1.4rem; padding-top: 10px; }
    .sb-cta-title { grid-column: 2; grid-row: 1; }
    .sb-cta-body { grid-column: 2; grid-row: 2; }
    .sb-h1 { font-size: clamp(2.6rem, 4.8vw, 4rem); }
    .sb-h2 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); }
    .sb-section-pad { padding: 88px 0; }
    .sb-section-pad > .sb-inner, .sb-hero-pad > .sb-inner, .sb-medlem-nav > .sb-inner { max-width: var(--max-width); margin: 0 auto; padding: 0 20px; }
    .sb-hero-pad { padding: 64px 0 0; }
    .sb-2col { display: grid; grid-template-columns: 220px 1fr; gap: 48px; }
    .sb-datarow { display: grid; align-items: baseline; gap: 16px; }
}