/* ═══════════════════════════════════════════════════════════════════════════
   HAJDUK THEME „Зора над Балкана" — SHARED FOUNDATION
   ───────────────────────────────────────────────────────────────────────────
   Production port of the owner-approved mockups:
     prototype/hajduk-zora.html · hajduk-profil.html · hajduk-ranitsa.html ·
     hajduk-vreme.html
   Full element→object map + gotchas: memory/project_hajduk_theme_zora.md
   Port spec: docs/superpowers/specs/2026-07-04-hajduk-production-port-spec.md

   SCOPING CONTRACT — read before editing:
     The mockups use bare generic class names (.icon-btn, .tab, .nav-item, …)
     that WOULD collide with the 40 other stylesheets this app loads. Instead of
     prefixing every class (as fw-/sunwell- do), we wrap each hajduk surface in
     <div class="haj-scope"> and scope EVERY selector here under `.haj-scope …`.
     Nothing leaks out; and because no element carries `.haj-scope` until a page
     is ported, this whole file is INERT — that is the "invisible deploy" of
     Phase 0. Keep it that way: never write a bare (unscoped) selector here.

   WHAT LIVES HERE (byte-identical across the mockups that use it):
     · tokens + fonts + base/reset
     · .icon-btn  — ковани копчета (identical ×4)
     · силяхлък bottom nav (.bottom-nav/.nav-*) — identical on home/раница/време
     · .section-head/.shev-line/.section-title — identical on home/профил
   WHAT DOES NOT (kept per-page because it drifts or is page-specific):
     · .tab/.tabs-rail — механски табели differ (home = row, профил = 3-up column)
     · every scene, teskere, card, widget — belongs to its page's CSS
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Tokens: the palette is identical in all four mockups; page-specific tokens
   (--wool-*, --earth-*, --plank-* …) stay in each page's own CSS. ────────────*/
.haj-scope {
    --haj-night:     #0e150f;
    --haj-pine:      #142018;
    --haj-moss:      #1b2a1e;
    --haj-felt:      #26422f;
    --haj-felt-hi:   #33573c;
    --haj-brass:     #cfa62d;
    --haj-brass-dim: #93803a;
    --haj-ember:     #e2662a;
    --haj-ember-hi:  #f5924e;
    --haj-blood:     #93312b;
    --haj-bone:      #f0e5cc;
    --haj-smoke:     #a8b39a;
    --haj-leather:   #261c11;
    --haj-leather-hi:#3d2f1d;
    --haj-walnut:    #221910;
    --haj-parchment: #ecdfc0;
    --ink:           #3a2a18;

    --font-display: 'Oranienbaum', serif;
    --font-body:    'Alegreya', serif;
    --font-hand:    'Caveat', cursive;

    /* base surface — the mockups set these on html/body */
    font-family: var(--font-body);
    color: var(--haj-bone);
    background: var(--haj-night);
    overflow-x: hidden;
}

/* scoped reset — resets only what is inside a hajduk surface, never the app */
.haj-scope *,
.haj-scope *::before,
.haj-scope *::after { margin: 0; padding: 0; box-sizing: border-box; }

/* ═══ ХЕДЪР — ковани копчета от носия ═══
   Bright-brass dome, double forged rim, engraved dark icon, red-enamel badge.
   (identical in all four mockups) */
.haj-scope .icon-btn {
    position: relative;
    width: 42px; height: 42px;
    border-radius: 50%;
    border: none;
    background:
        radial-gradient(circle at 68% 74%, rgba(255,235,170,0.18), transparent 42%),
        radial-gradient(circle at 33% 27%, #f6e29b, #dcb84a 38%, #b98f24 62%, #8a6a1a 88%, #6b5313);
    box-shadow:
        inset 0 1px 1px rgba(255,246,210,0.85),
        inset 0 -2px 3px rgba(60,40,8,0.55),
        inset 0 0 0 1px rgba(92,71,15,0.55),
        0 3px 7px rgba(0,0,0,0.5);
    color: #3a2508;
    font-size: 18px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
}
/* двоен кован кант по ръба */
.haj-scope .icon-btn::before {
    content: '';
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    pointer-events: none;
    box-shadow:
        inset 0 0 0 1px rgba(60,40,8,0.4),
        inset 0 1px 0 rgba(255,246,210,0.55);
}
.haj-scope .icon-btn:active { transform: translateY(1px); }
.haj-scope .icon-btn i { text-shadow: 0 1px 0 rgba(255,240,190,0.55); }
/* хаберите: червено емайлово топче */
.haj-scope .icon-btn .badge {
    position: absolute;
    top: -4px; right: -4px;
    min-width: 18px; height: 18px;
    padding: 0 4px;
    border-radius: 9px;
    background: radial-gradient(circle at 35% 30%, #c4534a, #93312b 60%, #6e2822);
    border: 1px solid #a5821f;
    color: var(--haj-bone);
    font-family: var(--font-body);
    font-size: 11px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    box-shadow: inset 0 1px 1px rgba(255,200,180,0.4), 0 2px 3px rgba(0,0,0,0.5);
}

/* ═══ АВАТАР-СНИМКА — качена снимка вместо емоджи ═══
   Uploaded photos come through as image URLs (see window.avatarHTML in ui.js).
   Round, cover the slot, inherit the container's radius. (shared: teskere + класация) */
.haj-scope .haj-av {
    width: 100%; height: 100%;
    object-fit: cover;
    border-radius: inherit;
    display: block;
}

/* ═══ СЕКЦИОННО ДЕЛЕНЕ — двуредна шевица ═══
   .shev-line is populated by an inline <svg> per section (the woven cross-stitch
   pattern lives in the HTML, not here). (identical on home + профил) */
.haj-scope .section-head {
    display: flex; align-items: center; gap: 12px;
    margin: 26px 2px 12px;
}
.haj-scope .section-head .shev-line { flex: 1; height: 12px; }
.haj-scope .section-title {
    font-family: var(--font-display);
    font-size: 19px;
    font-weight: 400;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--haj-brass);
    white-space: nowrap;
    text-shadow: 0 1px 2px rgba(10,12,8,0.95), 0 2px 6px rgba(10,12,8,0.8), 0 0 18px rgba(10,12,8,0.6);
}
/* Defensive: `.section-head`/`.section-title` are generic names shared with other
   app stylesheets (mission-table.css gives .section-title a gold border-left +
   glass bg + a `◆◇◆` ::after; others add their own). Those decorations leak into
   our scoped heading because foundation only overrides font/colour. Neutralise the
   leak so the шевица heading renders exactly as the mockup. */
.haj-scope .section-head { background: none; border: none; box-shadow: none; }
.haj-scope .section-title {
    background: none;
    border: none;
    border-radius: 0;
    padding: 0;
    margin: 0;
    display: block;
}
.haj-scope .section-title::before,
.haj-scope .section-title::after { content: none; }

/* ═══ ДОЛНА НАВИГАЦИЯ — силяхлък: коланът със сечивата ═══
   Fixed leather tool-belt, folded top welt, brass rivets/seams between pockets,
   active pocket = solid brass plate with dark engraved icon.
   (identical on home/раница/време; профил renders no bottom nav) */
.haj-scope .bottom-nav {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 2;
    background:
        repeating-linear-gradient(94deg, rgba(0,0,0,0.05) 0 2px, transparent 2px 7px),
        radial-gradient(130% 100% at 50% -40%, rgba(240,205,130,0.07), transparent 60%),
        linear-gradient(180deg, #382a17, #281d10 55%, #1f1608);
    box-shadow: 0 -10px 30px rgba(0,0,0,0.5);
    padding: 0 8px calc(4px + env(safe-area-inset-bottom));
}
/* прегънатият горен ръб на кожата */
.haj-scope .bottom-nav::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 5px;
    background: linear-gradient(180deg, #4c3a20, #2c2110);
    box-shadow: inset 0 1px 0 rgba(240,220,170,0.20), 0 1px 2px rgba(0,0,0,0.55);
}
.haj-scope .nav-items {
    max-width: 430px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
}
.haj-scope .nav-item {
    position: relative;
    flex: 1;
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    background: none; border: none;
    padding: 12px 0 9px;
    color: rgba(200,186,155,0.72);
    cursor: pointer;
    font-family: inherit;
}
/* шев между джобовете */
.haj-scope .nav-item:not(:first-child)::before {
    content: '';
    position: absolute;
    left: -1px; top: 14px; bottom: 10px;
    width: 2px;
    background: linear-gradient(180deg, transparent, rgba(0,0,0,0.4) 25% 75%, transparent);
    box-shadow: 1px 0 0 rgba(240,220,170,0.05);
}
/* месингов гвоздей на ръба, над всеки шев */
.haj-scope .nav-item:not(:first-child)::after {
    content: '';
    position: absolute;
    left: -3.5px; top: 0.5px;
    width: 5px; height: 5px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #e9c754, #8d711d 75%);
    box-shadow: 0 1px 1px rgba(0,0,0,0.6);
}
.haj-scope .nav-icon {
    width: 44px; height: 30px;
    display: flex; align-items: center; justify-content: center;
    font-size: 21px;
    border-radius: 6px;
}
/* активният джоб — обкован с месингова плочка */
.haj-scope .nav-item.active { color: var(--haj-brass); }
.haj-scope .nav-item.active .nav-icon {
    background: linear-gradient(180deg, #e9c754, #cfa62d 55%, #8d711d);
    color: #2a1c0a;
    box-shadow:
        inset 0 1px 0 rgba(255,240,190,0.7),
        inset 0 -1px 0 rgba(0,0,0,0.35),
        0 0 10px rgba(207,166,45,0.35),
        0 2px 4px rgba(0,0,0,0.5);
}
.haj-scope .nav-label {
    display: block;
    font-size: 9.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 700;
}
.haj-scope .nav-item.active .nav-label::after {
    content: '';
    display: block;
    width: 14px; height: 2px;
    border-radius: 1px;
    margin: 3px auto 0;
    background: var(--haj-brass);
    box-shadow: 0 0 5px rgba(207,166,45,0.6);
}

/* ── reduced motion: hajduk scenes must fall back to a static frame; scene JS
   also checks this, but kill any CSS ember/ambient animation here too. ────────*/
@media (prefers-reduced-motion: reduce) {
    .haj-scope *,
    .haj-scope *::before,
    .haj-scope *::after { animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════════
   🎭 МЕМАРНИЦАТА — „строи се" placeholder (Снимки е пенсиониранъ).
   Малъкъ изгледъ безъ данни: табела + чертежъ + щемпелъ СКОРО.
   ═══════════════════════════════════════════════════════════════ */
.haj-scope.haj-memes {
    min-height: 100dvh;
    background: linear-gradient(180deg, #16291b, #101b12 60%, #0e150f);

    & .mm-wrap {
        max-width: 430px; margin: 0 auto; padding: 64px 22px 120px;
        display: flex; flex-direction: column; align-items: center; gap: 26px;
    }
    & .mm-sign {
        position: relative;
        padding: 13px 34px;
        font-family: var(--font-display); font-size: 23px; letter-spacing: 2.5px;
        color: #d9bd7e;
        text-shadow: 0 -1px 0 rgba(0,0,0,0.85), 0 1px 0 rgba(255,230,160,0.16);
        background:
            repeating-linear-gradient(91deg, transparent 0 9px, rgba(0,0,0,0.10) 9px 11px, transparent 11px 23px),
            linear-gradient(94deg, #2c1f12, #3a2a17 30%, #2b1e10 55%, #3b2b18 80%, #241809);
        border-radius: 7px;
        border: 1px solid #100a04;
        box-shadow: inset 0 2px 0 rgba(214,178,110,0.14), inset 0 -4px 8px rgba(0,0,0,0.55), 0 10px 18px rgba(0,0,0,0.5);
        transform: rotate(-1deg);
    }
    & .mm-nail {
        position: absolute; top: 50%; width: 7px; height: 7px; border-radius: 50%;
        transform: translateY(-50%);
        background: radial-gradient(circle at 35% 30%, #e8cd76, #93752a 60%, #4a3810);
        box-shadow: 0 1px 2px rgba(0,0,0,0.7);
    }
    & .mm-nail.l { left: 10px; }
    & .mm-nail.r { right: 10px; }
    & .mm-scroll {
        position: relative;
        width: 100%; max-width: 330px;
        padding: 16px 14px 12px;
        transform: rotate(1.2deg);
        background:
            repeating-linear-gradient(180deg, transparent 0 33px, rgba(58,42,24,0.10) 33px 34px),
            linear-gradient(172deg, #f0e4c6, #ecdfc0 55%, #ddcaa0);
        border-radius: 5px;
        border: 1px solid rgba(90,66,30,0.35);
        box-shadow: inset 0 0 24px rgba(120,90,40,0.14), 0 12px 26px rgba(0,0,0,0.5);
    }
    & .mm-bp-head {
        text-align: center; font-family: var(--font-body); font-weight: 700;
        font-size: 11px; letter-spacing: 2.6px; color: #8a6d3a; margin-bottom: 6px;
    }
    & .mm-bp { display: block; width: 100%; height: auto; opacity: 0.9; }
    & .mm-soon {
        position: absolute; right: 14px; top: 44%;
        transform: rotate(-9deg);
        font-family: 'Ruslan Display', var(--font-display), serif;
        font-size: 27px; letter-spacing: 3px;
        color: rgba(147,49,43,0.85);
        border: 2.5px solid rgba(147,49,43,0.65);
        border-radius: 6px;
        padding: 3px 12px;
    }
    & .mm-note {
        text-align: center;
        font-family: var(--font-hand); font-size: 20px; line-height: 1.45;
        color: var(--haj-smoke);
        text-shadow: 0 2px 6px rgba(0,0,0,0.7);
    }
}