/* ===========================================================
   Povezujemo Štepanjsko — standalone content pages
   (/o-festivalu/, /program/, /sodelujoci/, /utrinki/, /stepanjsko-naselje/)
   Loaded after shared.css. Page typography is scoped to .wrap so the
   popups mounted by shared.js keep their own styles.
   =========================================================== */
:root{
  --orange:#EE7B1C; --orange-deep:#D2560A; --sun:#F6C13F; --green:#2BA39A; --blue:#2E73B8;
  --font-title:"Bricolage Grotesque", system-ui, sans-serif;
  --font-display:"Bricolage Grotesque", system-ui, sans-serif;
  --font-hand:"Hanken Grotesk", system-ui, sans-serif;
  --font-ui:"Hanken Grotesk", system-ui, sans-serif;
  --font-body:"Hanken Grotesk", system-ui, sans-serif;
}
/* pages scroll — shared.css locks the body for the full-screen hero */
html, body{ height:auto; overflow:auto; }
body{ background:var(--paper); background-image:url("/noise.svg"); background-size:200px 200px;
  color:var(--ink); font-family:var(--font-body); line-height:1.6; }

/* ---- top bar + navigation ---- */
.topbar{ position:sticky; top:0; z-index:20; background:var(--orange);
  box-shadow:0 4px 18px rgba(0,0,0,.18); }
.topbar .inner{ max-width:1040px; margin:0 auto; padding:.75rem clamp(16px,4vw,28px);
  display:flex; align-items:center; justify-content:space-between; gap:.6rem 1.2rem; flex-wrap:wrap; }
.topbar .brand{ font-family:var(--font-display); font-weight:700; font-size:1.1rem; color:#fff;
  display:flex; align-items:center; gap:.5rem; text-decoration:none; white-space:nowrap; }
.topbar .brand .mk{ height:30px; width:auto; padding:3px 6px; background:#fff; border-radius:9px;
  box-shadow:0 1px 4px rgba(0,0,0,.18); }
.pnav{ display:flex; gap:.4rem; flex-wrap:wrap; }
.pnav a{ font-family:var(--font-ui); font-weight:700; font-size:.88rem; color:#fff; text-decoration:none;
  border:1.5px solid rgba(255,255,255,.55); border-radius:999px; padding:.32rem .85rem;
  white-space:nowrap; transition:.16s; }
.pnav a:hover{ background:rgba(255,255,255,.18); border-color:#fff; }
.pnav a[aria-current="page"]{ background:#fff; color:var(--orange-deep); border-color:#fff; }
.pnav a.cta{ background:var(--ink); border-color:var(--ink); }
.pnav a.cta:hover{ background:#000; }
@media (max-width:720px){
  .pnav{ flex-wrap:nowrap; overflow-x:auto; width:100%; padding-bottom:.2rem;
    scrollbar-width:none; -webkit-overflow-scrolling:touch; }
  .pnav::-webkit-scrollbar{ display:none; }
}

/* ---- content ---- */
.wrap{ max-width:820px; margin:0 auto; padding:clamp(22px,4vw,44px) clamp(16px,4vw,28px) 64px; }
.wrap.wide{ max-width:1040px; }
.crumbs{ font-family:var(--font-ui); font-size:.84rem; color:var(--ink-soft); margin:0 0 1.4rem; }
.crumbs a{ color:var(--ink-soft); font-weight:600; }
.crumbs span[aria-hidden]{ margin:0 .35rem; }
.wrap .kick{ font-family:var(--font-ui); font-weight:700; font-size:.85rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--orange-deep); margin-bottom:.4rem; }
.wrap h1{ font-family:var(--font-display); font-weight:700; line-height:1.04; margin:0 0 .8rem;
  font-size:clamp(2.1rem,5.4vw,3.3rem); letter-spacing:-.02em; color:var(--ink); }
.wrap h2{ font-family:var(--font-display); font-weight:700; font-size:clamp(1.3rem,2.6vw,1.7rem);
  letter-spacing:-.01em; line-height:1.15; margin:2.2rem 0 .6rem; color:var(--ink); }
.wrap p{ margin:.55rem 0; font-size:1.02rem; }
.wrap .lead{ font-size:clamp(1.08rem,1.8vw,1.22rem); line-height:1.55; }
.wrap ul{ margin:.5rem 0 .5rem 1.15rem; padding:0; }
.wrap li{ margin:.35rem 0; }
.wrap a{ color:var(--orange-deep); font-weight:600; }
.wrap .muted{ color:var(--ink-soft); font-size:.95rem; }

.facts{ display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:12px; margin:1.4rem 0 .6rem; }
.facts div{ background:#fff; border-radius:14px; padding:.8rem 1rem;
  box-shadow:0 10px 26px rgba(0,0,0,.07), inset 0 0 0 1px rgba(44,33,26,.08); }
.facts dt{ font-family:var(--font-ui); font-weight:800; font-size:.7rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-soft); }
.facts dd{ margin:.15rem 0 0; font-family:var(--font-display); font-weight:700; font-size:1.12rem; line-height:1.2; }

/* line-up + time pill reuse shared.css; give the pill room on a page */
.wrap .lineup-time{ margin:.4rem 0 1.4rem; }
.wrap .lineup .act-name{ margin:0; }   /* act names are <h2> on the page */

/* gallery page: figures are links to the full photo; shared.js opens the lightbox */
.wrap .gal-grid{ margin-top:1.2rem; }
.wrap .gal-grid a{ display:block; color:inherit; text-decoration:none; }

/* "next" cards at the end of each page */
.next{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px; margin:2.6rem 0 0; }
.next a{ display:block; background:#fff; border:2.5px solid var(--ink); border-radius:16px;
  padding:.85rem 1rem; text-decoration:none; color:var(--ink); box-shadow:3px 3px 0 rgba(44,33,26,.14);
  transition:transform .14s ease, box-shadow .14s ease; }
.next a:hover{ transform:translateY(-2px); box-shadow:5px 5px 0 var(--ink); }
.next b{ display:block; font-family:var(--font-display); font-size:1.08rem; }
.next span{ font-size:.9rem; color:var(--ink-soft); font-weight:500; }

.sources{ margin-top:2.4rem; font-size:.88rem; color:var(--ink-soft); }
.sources ol{ margin:.4rem 0 0 1.2rem; padding:0; }

footer.pfoot{ max-width:1040px; margin:0 auto; padding:0 clamp(16px,4vw,28px) 56px; }
footer.pfoot .line{ border-top:2px dashed rgba(44,33,26,.2); padding-top:1.1rem; font-size:.88rem;
  color:var(--ink-soft); display:flex; flex-wrap:wrap; gap:.5rem 1.2rem; align-items:center;
  justify-content:space-between; }
footer.pfoot a{ color:var(--ink-soft); }