/* =========================================================
   Kegljanje.com – style.css (posodobljeno, delo 2)
   ========================================================= */

/* ---------- Reset / Base ---------- */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: #222;
  background: #f7f7f7;
  line-height: 1.6;
}
img { max-width: 100%; height: auto; display: block; }
a { color: #0a66c2; text-decoration: none; }
a:hover { text-decoration: underline; }
ul { padding-left: 1.2rem; }
pre, code { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }
pre { background:#0e1116; color:#e6edf3; padding:1rem; border-radius:.6rem; overflow:auto; }

/* ---------- Header & Nav ---------- */
header { background: #111; color: #fff; }
.site-nav{
  width:min(1200px,92vw);
  margin:0 auto;
  padding:.6rem 0;
  display:flex;
  align-items:center;
  gap:1rem;
  justify-content:space-between;
}
.site-nav .brand img{ height:40px; width:auto; display:block; }
.site-nav ul{
  display:flex; flex-wrap:wrap; gap:.6rem;
  list-style:none; margin:0; padding:0;
}
.site-nav li a{
  display:inline-block;
  padding:.55rem .9rem;
  color:#fff;
  border-radius:.5rem;
  background:transparent;
  border:1px solid transparent;
  transition:background .2s, border-color .2s;
}
.site-nav li a:hover,
.site-nav li a:focus{
  background:#1e1e1e;
  border-color:#2a2a2a;
  text-decoration:none;
}
nav a[aria-current="page"]{
  background:#1e1e1e; border-color:#2a2a2a;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 44vh;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(135deg,#223 0%,#335 40%,#112 100%);
  overflow: hidden;
}
.hero::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 70% 20%, rgba(255,255,255,.08), transparent 60%);
}
.hero .hero-content {
  position: relative;
  text-align: center;
  padding: 4rem 1rem;
  z-index: 1;
}
.hero .hero-content h1 {
  margin: 0 0 .5rem;
  font-size: clamp(1.9rem, 3vw + 1rem, 3rem);
  line-height: 1.15;
  text-shadow: 0 2px 10px rgba(0,0,0,.35);
}
.hero .hero-content p { margin: 0 0 1rem; opacity:.95; }
.hero .hero-btn {
  display:inline-block; padding:.8rem 1.2rem; background:#0a66c2; color:#fff;
  border-radius:.65rem; font-weight:700; border:1px solid #0a5ab0;
}
.hero .hero-btn:hover { background:#094f9d; text-decoration:none; }
/* (če v <section class="hero" style="background:url(...)"> dodaš sliko) */
.hero[style*="background:"]{ background-position:center; background-size:cover; }
.hero .overlay {
  position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,.25));
}
/* Podpora za .hero__inner (index delo 2) */
.hero .hero__inner{ position: relative; text-align: center; padding: 4rem 1rem; z-index: 1; }
.hero .hero__inner h1{ margin:0 0 .5rem; font-size: clamp(1.9rem, 3vw + 1rem, 3rem); line-height:1.15; text-shadow:0 2px 10px rgba(0,0,0,.35); }
.hero .hero__inner p{ margin:0 0 1rem; opacity:.95; }

/* ---------- Container ---------- */
.container {
  width:min(1200px,92vw);
  margin:0 auto;
  padding: 2rem 0 3rem;
}

/* ---------- Blocks (stari sistem kartic) ---------- */
.blocks {
  display:grid; gap:1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.blocks.second-row { margin-top: 1.25rem; }

.block {
  position: relative;
  background: #fff;
  border: 1px solid #e7e7e7;
  border-radius: .9rem;
  overflow: hidden;
  box-shadow: 0 6px 16px rgba(0,0,0,.04);
}
.block > img {
  width: 100%; height: 220px; object-fit: cover; display:block;
}
.block .info { padding: 1rem 1.1rem 1.2rem; }
.block .info h2 {
  margin:.25rem 0 .35rem; font-size:1.35rem; line-height:1.25;
}
.block .info p { margin:0 0 .85rem; color:#444; }

/* barvne variante robov */
.block--red   { border-left: 6px solid #e23d3d; }
.block--blue  { border-left: 6px solid #2d7fe5; }
.block--green { border-left: 6px solid #22a06b; }

/* Gumbi (skupni) */
.small-btn, .btn, .block .info button {
  display:inline-block; padding:.55rem .9rem; border-radius:.55rem;
  background:#0a66c2; color:#fff; border:1px solid #0a5ab0; font-weight:700; cursor:pointer;
}
.small-btn.alt, .btn.alt { background:#fff; color:#223; border:1px solid #cfd6e2; }
.small-btn:hover, .btn:hover, .block .info button:hover { background:#094f9d; text-decoration:none; }
.btn-row { display:flex; flex-wrap:wrap; gap:.5rem; }

/* ---------- Opozorila / poudarki ---------- */
.opozorilo-obutev{
  display:flex; gap:.6rem; align-items:flex-start;
  padding:1rem 1.25rem; margin:1.5rem 0;
  border:2px solid #f3c969; border-left:8px solid #e09f3e;
  background:#fff7d6; border-radius:.75rem;
  font-size:1rem; line-height:1.5;
}
.opozorilo-obutev::before{
  content:"👟"; font-size:1.25rem; line-height:1.2; flex:0 0 auto;
}
.opozorilo-obutev .glavna{
  font-weight:800; text-transform:uppercase; letter-spacing:.2px;
}
.poudarek-obutev{
  font-weight:800; text-decoration:underline;
  text-decoration-thickness:2px; text-underline-offset:3px;
}
.posebno{
  display:block; margin:2rem 0; padding:1rem 1.5rem;
  background:#eaf4ff; border-left:6px solid #3399ff; border-radius:.5rem;
  font-size:clamp(1.05rem,.6vw + 1rem,1.25rem);
  font-weight:800; color:#003366; text-align:center;
  animation:poudarekUtrip 2s infinite;
}
@keyframes poudarekUtrip{ 0%,100%{background:#eaf4ff} 50%{background:#d0e9ff} }

/* ---------- Live embed (YouTube) ---------- */
.block.live-wrapper{
  position: relative; background:#000;
  border:1px solid #e7e7e7; border-radius:.9rem; overflow:hidden; box-shadow:0 6px 16px rgba(0,0,0,.04);
}
.live-embed{ position:relative; aspect-ratio:16/9; width:100%; background:#000; }
.live-embed iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; }
.block.live-wrapper::before{
  content:"● LIVE"; position:absolute; top:10px; left:10px; z-index:2;
  font-size:.85rem; font-weight:800; letter-spacing:.3px; color:#fff; background:#e10600;
  padding:.25rem .55rem; border-radius:.5rem; box-shadow:0 2px 8px rgba(0,0,0,.25);
}

/* ---------- FAQ namig (Kuglček) + tooltip ---------- */
.inline-help { display:inline-flex; align-items:center; gap:.35rem; }
.faq-hint { display:inline-block; position:relative; }
.faq-hint-btn{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.35rem .55rem; border-radius:.7rem;
  background:#fff; border:1px solid #e7e7e7; cursor:pointer;
  box-shadow:0 6px 16px rgba(0,0,0,.04);
}
.faq-hint-btn:hover, .faq-hint-btn:focus-visible{
  border-color:#d7d7d7; background:#fcfcfc;
}
.faq-hint .mascot{ width:42px; height:42px; pointer-events:none; }
.faq-hint .bulb{
  width:16px; height:16px; border-radius:50%; background:#777; display:inline-block;
  transition: background .2s, box-shadow .2s, transform .2s;
}
.faq-hint:hover .bulb, .faq-hint:focus-within .bulb{
  background:#ffd84d; box-shadow:0 0 10px 3px rgba(255,216,77,.8); transform: translateY(-1px);
}
.faq-hint .label{ font-weight:700; color:#222; font-size:.95rem; }
.faq-tip{
  position:absolute; left:50%; top:100%; transform: translate(-50%, .4rem);
  background:#111; color:#fff; font-size:.85rem; line-height:1.3;
  padding:.4rem .6rem; border-radius:.5rem; box-shadow:0 8px 20px rgba(0,0,0,.25);
  white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .15s, transform .15s;
}
.faq-tip::after{
  content:""; position:absolute; top:-6px; left:50%; transform:translateX(-50%);
  border:6px solid transparent; border-bottom-color:#111;
}
.faq-tip.show{ opacity:1; transform: translate(-50%, .2rem); }

/* ---------- Footer (nov) ---------- */
footer {
  background:#111;
  color:#bbb;
  margin-top: 2rem;
  padding: 2rem 0;
}
.footer-inner {
  width:min(1200px,92vw);
  margin:0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:1rem;
}
.footer-logo { height:40px; margin-bottom:.5rem; }
.slogan {
  display:block;
  font-weight:700;
  color:#fff;
  font-size:1rem;
}
.footer-mascot { width:80px; opacity:.85; }
.copy {
  font-size:.9rem;
  color:#888;
  margin-top:1rem;
}

/* ---------- Responsivnost ---------- */
@media (max-width: 900px){
  .blocks { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
}
@media (max-width: 720px){
  .site-nav .brand img{ height:32px; }
  .site-nav ul{ gap:.4rem; }
  .site-nav li a{ padding:.5rem .7rem; }
}

/* ======================
   KUGLČEK PODIRALEC & VITEZ
   ====================== */
.block--blue img[src$="kuglcek-podiralec-anim.svg"],
.block--blue img[src$="kuglcek-vitez.svg"],
.block--blue img[src$="kuglcek-vitez-uv.svg"] {
  width: 60%;
  margin: 0 auto;
  display: block;
}
/* Podpora tudi za .card--blue */
.card--blue img[src$="kuglcek-podiralec-anim.svg"],
.card--blue img[src$="kuglcek-vitez.svg"],
.card--blue img[src$="kuglcek-vitez-uv.svg"] {
  width: 60%;
  margin: 0 auto;
  display: block;
}

/* ======================
   VIDEO MODAL & SLIDESHOW
   ====================== */
.vs-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.85);
  z-index: 9999;
  justify-content: center;
  align-items: center;
  padding: 1rem;
}
.vs-modal[aria-hidden="false"] { display: flex; }

/* zakleni scroll, ko je modal odprt */
body.modal-open { overflow: hidden; }

.vs-modal-content {
  width: 100%;
  max-width: 1000px;
  position: relative;
  animation: zoomIn .4s ease;
}
@keyframes zoomIn {
  from { transform: scale(.9); opacity:0; }
  to   { transform: scale(1); opacity:1; }
}
.vs-close {
  position: absolute;
  top: -40px;
  right: 0;
  font-size: 32px;
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
}

.vs-container {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  background: #000;
}
.vs-container::before {
  content: "";
  display: block;
  aspect-ratio: 16 / 9;
}
.vs-track { position: absolute; inset: 0; }

.vs-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 600ms ease;
  display: grid;
  place-items: center;
}
.vs-slide.is-active { opacity: 1; }
.vs-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vs-prev, .vs-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: rgba(0,0,0,.45);
  color: #fff;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.vs-prev { left: 10px; }
.vs-next { right: 10px; }
.vs-prev:focus-visible, .vs-next:focus-visible {
  outline: 2px solid #fff; outline-offset: 2px;
}

.vs-dots {
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
}
.vs-dots button {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 0;
  background: rgba(255,255,255,.5);
  cursor: pointer;
}
.vs-dots button.is-active { background: #fff; }

/* =========================================================
   Delo 2 – NOV SISTEM KARTIC (.cards/.card) + COVER + UTIL
   (pusti obstoječi .blocks/.block nedotaknjen)
   ========================================================= */
:root{
  --gap: clamp(12px, 2.2vw, 22px);
  --radius: 16px;
  --shadow: 0 6px 18px rgba(0,0,0,.12);
  --overlay: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.55) 80%);
}

/* Grid za nove kartice */
.cards{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap);align-items:stretch}
.card{position:relative;background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column;min-height:180px}
.card__body{padding:18px;display:flex;flex-direction:column;gap:12px}
.card__title{font-size:clamp(18px,2.4vw,24px);line-height:1.15;margin:0}
.card__text{margin:0;opacity:.9}
.card__actions{margin-top:auto;display:flex;flex-wrap:wrap;gap:10px}

/* Modifikatorji gumbov za novi sistem */
.btn--primary{background:#cc0000;border-color:#cc0000;color:#fff}
.btn--ghost{background:transparent;color:#111;border:1px solid #e5e7eb}
.btn[aria-disabled="true"]{opacity:.6;pointer-events:none}

/* Kolone util */
.col-3{grid-column:span 3}
.col-4{grid-column:span 4}
.col-6{grid-column:span 6}
.col-8{grid-column:span 8}
.col-12{grid-column:span 12}
@media (max-width: 960px){
  .col-md-6{grid-column:span 6}
  .col-md-12{grid-column:span 12}
}
@media (max-width: 720px){
  .cards{grid-template-columns:repeat(6,1fr)}
  .col-sm-6{grid-column:span 6}
  .col, .col-3, .col-4, .col-6, .col-8, .col-12{grid-column:span 6}
}

/* Kartica 5 (modra) + maskota fallback */
.card--blue{background:#e8f1ff}
.card--blue .card__title{color:#0b3b8f}
.card--blue figure{margin:0;display:flex;align-items:center;justify-content:center;min-height:160px;background:#f6f9ff;border-bottom:1px solid #dde6ff}
.card--blue img{max-width:min(380px, 80%);height:auto}

/* COVER slog za kartice 7–9 */
.card--cover{color:#fff}
.card--cover::before{
  content:"";position:absolute;inset:0;
  background:var(--overlay), var(--bg, #222);
  background-position:center;background-size:cover
}
.card--cover .card__body{position:relative;color:#fff}
.card--cover .btn{border-color:rgba(255,255,255,.65);color:#fff}
.card--cover .btn--primary{background:#cc0000;border-color:#cc0000;color:#fff}
.card--pill{position:absolute;top:12px;left:12px;background:rgba(0,0,0,.55);color:#fff;padding:.3rem .6rem;border-radius:999px;font-weight:700;font-size:.8rem}

/* Višina cover kartic */
.card--xl{min-height:260px}
@media (max-width:720px){.card--xl{min-height:220px}}

/* Majhen polish za berljivost */
.card--cover .card__title, .card--cover .card__text{ text-shadow: 0 1px 2px rgba(0,0,0,.45) }

/* =========================================================
   Pattern presets za --bg (brez fotografij)
   Uporaba na cover karticah: class="card card--cover ... bg-grid|bg-stripes|bg-dots|bg-solid|bg-uv"
   ========================================================= */
.bg-solid{ --bg: #1f2937; }

.bg-stripes{
  --bg: repeating-linear-gradient(45deg, #1f2937 0 12px, #202a38 12px 24px);
}

.bg-dots{
  --bg:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.08) 1px, transparent 1px) 0 0/16px 16px,
    #1f2937;
}

.bg-grid{
  --bg:
    linear-gradient(#ffffff14 1px, transparent 1px) 0 0/20px 20px,
    linear-gradient(90deg, #ffffff10 1px, transparent 1px) 0 0/20px 20px,
    #111827;
}

.bg-uv{
  --bg:
    radial-gradient(120% 100% at 10% 0%, #7c3aed33, transparent 60%),
    radial-gradient(120% 100% at 90% 100%, #db277733, transparent 60%),
    #1a1a2e;
}

/* Enak mrežast vzorec kot .bg-grid, za površine (npr. LIVE blok) */
.pattern-grid-surface{
  background:
    linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.55)),
    linear-gradient(#ffffff14 1px, transparent 1px) 0 0/20px 20px,
    linear-gradient(90deg, #ffffff10 1px, transparent 1px) 0 0/20px 20px,
    #111827;
  color:#fff;
}

/* ========== VITEZ THEME =================================================== */
:root[data-theme="vitez"]{
  --brand:#C20E2A;        /* CTA, linki */
  --brand-600:#9A0B21;    /* hover/border */
  --bg:#0B0E13;           /* stran */
  --surface:#111827;      /* kartice/header/footer */
  --text:#E5E7EB;         /* besedilo */
  --overlay: linear-gradient(180deg, rgba(7,10,18,.55) 0%, rgba(7,10,18,.78) 78%);
}
/* površi­ne, header/footer, hero */
:root[data-theme="vitez"] body{ background:var(--bg); color:var(--text); }
:root[data-theme="vitez"] header,
:root[data-theme="vitez"] footer{ background:var(--surface); color:#cbd5e1; }
:root[data-theme="vitez"] .hero{
  background: linear-gradient(135deg,#121826 0%,#0F172A 40%,#0B0E13 100%);
}
:root[data-theme="vitez"] .hero .hero-btn{ background:var(--brand); border-color:var(--brand-600); }
:root[data-theme="vitez"] .hero .hero-btn:hover{ background:var(--brand-600); }
/* linki & fokus */
:root[data-theme="vitez"] a{ color:var(--brand); }
:root[data-theme="vitez"] a:hover{ color:#ff506a; text-decoration:underline; }
:root[data-theme="vitez"] :focus-visible{ outline:2px solid #F0B429; outline-offset:2px; }
/* kartice & gumbi */
:root[data-theme="vitez"] .block{ background:var(--surface); border-color:#1f2937; }
:root[data-theme="vitez"] .small-btn,
:root[data-theme="vitez"] .btn,
:root[data-theme="vitez"] .block .info button{ background:var(--brand); border-color:var(--brand-600); }
:root[data-theme="vitez"] .small-btn:hover,
:root[data-theme="vitez"] .btn:hover,
:root[data-theme="vitez"] .block .info button:hover{ background:var(--brand-600); }
:root[data-theme="vitez"] .small-btn.alt,
:root[data-theme="vitez"] .btn.alt{ background:#0f172a; color:#e5e7eb; border:1px solid #303949; }
/* cover kartice */
:root[data-theme="vitez"] .card--cover::before{ background:var(--overlay), var(--bg, #0B0E13); }
:root[data-theme="vitez"] .card--cover .card__title,
:root[data-theme="vitez"] .card--cover .card__text{ text-shadow:0 1px 2px rgba(0,0,0,.6); }
/* LIVE badge */
:root[data-theme="vitez"] .block.live-wrapper::before,
:root[data-theme="vitez"] .card--pill{ background:#F0B429; color:#111; text-shadow:none; }
:root[data-theme="vitez"] .pattern-grid-surface{ color:#e5e7eb; }
/* VITEZ vzorci */
.bg-grid-vitez{
  --bg:
    linear-gradient(#ffffff10 1px, transparent 1px) 0 0/20px 20px,
    linear-gradient(90deg, #ffffff0c 1px, transparent 1px) 0 0/20px 20px,
    #0B0E13;
}
.bg-stripes-vitez{ --bg: repeating-linear-gradient(45deg, #0E1624 0 12px, #101a2b 12px 24px); }
.bg-dots-vitez{
  --bg:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.12) 1px, transparent 1px) 0 0/16px 16px,
    #0B0E13;
}

/* =========================================================
   KEGELČEK — LAHKA TEMA (svetla, igriva, brez fotk)
   ========================================================= */
:root[data-theme="kegelcek"]{
  --brand:#2D7FE5;       --brand-600:#2468BA;
  --accent:#22A06B;      --badge:#F5C542;
  --bg:#F9FAFB;          --surface:#FFFFFF;
  --text:#1F2937;        --text-sub:#475569;
  --border:#E5E7EB;      --shadow:0 4px 12px rgba(17,24,39,.06);
  --overlay: linear-gradient(180deg, rgba(255,255,255,.72) 0%, rgba(249,250,251,.72) 90%);
}
/* površine & tipografija */
:root[data-theme="kegelcek"] body{ background:var(--bg); color:var(--text); }
:root[data-theme="kegelcek"] .block{ background:var(--surface); border-color:var(--border); box-shadow:var(--shadow); }
:root[data-theme="kegelcek"] .block .info p{ color:var(--text-sub); }
/* hero */
:root[data-theme="kegelcek"] .hero{ background: linear-gradient(135deg, #e8f1ff 0%, #eafaf5 60%, #ffffff 100%); color:#0b1a33; }
:root[data-theme="kegelcek"] .hero .overlay{ background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.35)); }
:root[data-theme="kegelcek"] .hero .hero-btn{ background:var(--brand); border-color:var(--brand-600); }
:root[data-theme="kegelcek"] .hero .hero-btn:hover{ background:var(--brand-600); }
/* linki & fokus */
:root[data-theme="kegelcek"] a{ color:var(--brand); }
:root[data-theme="kegelcek"] a:hover{ color:#1851a6; }
:root[data-theme="kegelcek"] :focus-visible{ outline:2px solid var(--brand); outline-offset:2px; }
/* gumbi */
:root[data-theme="kegelcek"] .small-btn,
:root[data-theme="kegelcek"] .btn,
:root[data-theme="kegelcek"] .block .info button{ background:var(--brand); border-color:var(--brand-600); color:#fff; }
:root[data-theme="kegelcek"] .small-btn:hover,
:root[data-theme="kegelcek"] .btn:hover,
:root[data-theme="kegelcek"] .block .info button:hover{ background:var(--brand-600); }
:root[data-theme="kegelcek"] .small-btn.alt,
:root[data-theme="kegelcek"] .btn.alt{ background:#fff; color:var(--text); border:1px solid var(--border); }
.btn--pill{ border-radius:999px !important; padding-left:1.1rem !important; padding-right:1.1rem !important; }
/* badge */
:root[data-theme="kegelcek"] .card--pill,
:root[data-theme="kegelcek"] .block.live-wrapper::before{ background:var(--badge); color:#1F2937; text-shadow:none; }
/* cover */
:root[data-theme="kegelcek"] .card--cover{ color:var(--text); }
:root[data-theme="kegelcek"] .card--cover::before{ background:var(--overlay), var(--bg, #F9FAFB); }
:root[data-theme="kegelcek"] .card--cover .btn{ border-color:#d1d5db; color:var(--text); }
:root[data-theme="kegelcek"] .card--cover .btn--primary{ background:var(--brand); border-color:var(--brand-600); color:#fff; }
:root[data-theme="kegelcek"] .card--cover .card__text{ color:var(--text-sub); text-shadow:none; }
/* vzorci za kegelček */
.bg-dots-kegelcek{
  --bg:
    radial-gradient(circle at 1px 1px, rgba(31,41,55,.12) 1px, transparent 1px) 0 0/16px 16px,
    #F9FAFB;
}
.bg-stripes-kegelcek{ --bg: repeating-linear-gradient(45deg, #f2f6ff 0 12px, #e9eef9 12px 24px); }
.bg-grid-kegelcek{
  --bg:
    linear-gradient(#1f29370e 1px, transparent 1px) 0 0/20px 20px,
    linear-gradient(90deg, #1f29370a 1px, transparent 1px) 0 0/20px 20px,
    #FFFFFF;
}
/* vzorci – površina (stari .block) */
.pattern-dots-surface{
  background:
    radial-gradient(circle at 1px 1px, rgba(31,41,55,.12) 1px, transparent 1px) 0 0/16px 16px,
    #FFFFFF;
}
.pattern-stripes-surface{ background: repeating-linear-gradient(45deg, #f2f6ff 0 12px, #e9eef9 12px 24px); }
.pattern-grid-surface-light{
  background:
    linear-gradient(#1f29370e 1px, transparent 1px) 0 0/20px 20px,
    linear-gradient(90deg, #1f29370a 1px, transparent 1px) 0 0/20px 20px,
    #FFFFFF;
}
/* Sekundarni poudarek (zelena) – po želji */
.btn--accent{ background:#22A06B !important; border-color:#1A7E55 !important; color:#fff !important; }

/* ========= Theme toolbar (gumbi pod menijem) ========= */
.theme-toolbar{
  width:min(1200px,92vw);
  margin:.25rem auto .75rem;
  display:flex; gap:.5rem; flex-wrap:wrap; align-items:center;
}
.theme-btn[aria-pressed="true"]{
  background:var(--brand);
  border-color:var(--brand-600);
  color:#fff;
}

/* ========= MODRA LIGA (svetla, informativna) ========= */
:root[data-theme="modra"]{
  --brand:#0A66C2; --brand-600:#094F9D;
  --bg:#F6F9FF; --surface:#FFFFFF;
  --text:#0F172A; --text-sub:#334155;
  --border:#E5E7EB;
  --overlay: linear-gradient(180deg, rgba(255,255,255,.68) 0%, rgba(246,249,255,.68) 90%);
}
:root[data-theme="modra"] body{ background:var(--bg); color:var(--text); }
:root[data-theme="modra"] header, :root[data-theme="modra"] footer{ background:var(--surface); color:var(--text); }
:root[data-theme="modra"] .site-nav li a{ color:var(--text); }
:root[data-theme="modra"] .site-nav li a:hover{ background:#f3f6fb; border-color:#e5e7eb; }
:root[data-theme="modra"] .small-btn, :root[data-theme="modra"] .btn{ background:var(--brand); border-color:var(--brand-600); color:#fff; }
:root[data-theme="modra"] .small-btn:hover, :root[data-theme="modra"] .btn:hover{ background:var(--brand-600); }
:root[data-theme="modra"] .card--cover{ color:var(--text); }
:root[data-theme="modra"] .card--cover::before{ background:var(--overlay), var(--bg, #F6F9FF); }

/* ========= FOREST (svetla, rekreativna) ========= */
:root[data-theme="forest"]{
  --brand:#22A06B; --brand-600:#1A7E55;
  --bg:#F7FAF8; --surface:#FFFFFF;
  --text:#122016; --text-sub:#3F4F45;
  --border:#E6EEE7;
  --overlay: linear-gradient(180deg, rgba(255,255,255,.70) 0%, rgba(247,250,248,.70) 90%);
}
:root[data-theme="forest"] body{ background:var(--bg); color:var(--text); }
:root[data-theme="forest"] header, :root[data-theme="forest"] footer{ background:var(--surface); color:var(--text); }
:root[data-theme="forest"] .site-nav li a{ color:var(--text); }
:root[data-theme="forest"] .site-nav li a:hover{ background:#f1f7f3; border-color:#e6eee7; }
:root[data-theme="forest"] .small-btn, :root[data-theme="forest"] .btn{ background:var(--brand); border-color:var(--brand-600); color:#fff; }
:root[data-theme="forest"] .small-btn:hover, :root[data-theme="forest"] .btn:hover{ background:var(--brand-600); }
:root[data-theme="forest"] .card--cover{ color:var(--text); }
:root[data-theme="forest"] .card--cover::before{ background:var(--overlay), var(--bg, #F7FAF8); }

/* =========================
   KUGL — rdeča prevladuje + gradienti
   ========================= */
:root[data-theme="kugl"]{
  --brand:#E10600;           /* glavna rdeča */
  --brand-600:#B30600;       /* hover/darker */
  --accent:#0A66C2;          /* linki/modra */
  --bg:#F6F7F9;              /* svetlo sivo ozadje strani */
  --surface:#FFFFFF;
  --text:#121417;
  --text-sub:#475569;
  --border:#E5E7EB;
  --shadow:0 6px 18px rgba(225,6,0,.12);

  /* GRADIENTI (uporabljeni spodaj) */
  --grad-hero: linear-gradient(135deg, #FF4D3F 0%, #E10600 55%, #8B0200 100%);
  --grad-cta:  linear-gradient(180deg, #FF3B2F 0%, #E10600 70%);
  --glow: 0 8px 18px rgba(225,6,0,.28);
}

:root[data-theme="kugl"] body{ background:var(--bg); color:var(--text); }
:root[data-theme="kugl"] .block{ background:var(--surface); border-color:var(--border); box-shadow:var(--shadow); }
:root[data-theme="kugl"] .block .info p{ color:var(--text-sub); }

/* HERO – močan rdeč gradient */
:root[data-theme="kugl"] .hero{
  background: var(--grad-hero);
  color:#fff;
}
:root[data-theme="kugl"] .hero .overlay{ background: linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.25)); }

/* GUMBI – rdeč gradient + glow na hover */
:root[data-theme="kugl"] .small-btn,
:root[data-theme="kugl"] .btn,
:root[data-theme="kugl"] .block .info button{
  background: var(--grad-cta);
  border-color: var(--brand-600);
  color:#fff;
  transition: box-shadow .2s ease, transform .08s ease;
}
:root[data-theme="kugl"] .small-btn:hover,
:root[data-theme="kugl"] .btn:hover,
:root[data-theme="kugl"] .block .info button:hover{
  box-shadow: var(--glow);
  transform: translateY(-1px);
}
/* Ghost varianta (npr. alt gumbi) */
:root[data-theme="kugl"] .small-btn.alt,
:root[data-theme="kugl"] .btn.alt{
  background:transparent; color:var(--brand);
  border:1px solid var(--brand);
}
:root[data-theme="kugl"] .small-btn.alt:hover,
:root[data-theme="kugl"] .btn.alt:hover{
  background:#FFE7E6;
}

/* NAV – podčrtaj/indikator v rdeči */
:root[data-theme="kugl"] header .site-nav li a:hover,
:root[data-theme="kugl"] header .site-nav li a:focus{
  background: rgba(225,6,0,.08);
  border-color: rgba(225,6,0,.22);
}
:root[data-theme="kugl"] nav a[aria-current="page"]{
  background: rgba(225,6,0,.12);
  border-color: rgba(225,6,0,.3);
}

/* Cover kartice (7–9) – svetlejši overlay, da besedilo ostane berljivo */
:root[data-theme="kugl"] .card--cover{ color:#111; }
:root[data-theme="kugl"] .card--cover::before{
  background: linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.78)), var(--bg, #F6F7F9);
}
:root[data-theme="kugl"] .card--cover .btn{ border-color:#d1d5db; color:#111; }
:root[data-theme="kugl"] .card--cover .btn--primary{
  background: var(--grad-cta); border-color:var(--brand-600); color:#fff;
}

/* =========================
   BARONČEK — svetlo sivo ozadje, črni gumbi z rdečim robom, hover rdeče "zažari"
   ========================= */
:root[data-theme="baroncek"]{
  --brand:#E10600;          /* rdeča za rob/hover */
  --brand-600:#B30600;
  --bg:#F2F4F6;             /* svetlo sivo ozadje */
  --surface:#FFFFFF;
  --text:#1D1F22;
  --text-sub:#4B5563;
  --border:#E5E7EB;
  --shadow:0 6px 16px rgba(0,0,0,.06);

  --grad-hero: linear-gradient(135deg, #FFFFFF 0%, #F6F7F9 60%, #ECEFF3 100%);
  --glow-red: 0 0 0 3px rgba(225,6,0,.18), 0 10px 20px rgba(225,6,0,.20);
}

:root[data-theme="baroncek"] body{ background:var(--bg); color:var(--text); }
:root[data-theme="baroncek"] .block{ background:var(--surface); border-color:var(--border); box-shadow:var(--shadow); }
:root[data-theme="baroncek"] .block .info p{ color:var(--text-sub); }

/* HERO – nežen sivkast gradient */
:root[data-theme="baroncek"] .hero{
  background: var(--grad-hero);
  color:#111;
}
:root[data-theme="baroncek"] .hero .overlay{
  background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.35));
}

/* GUMBI – črni s rdečim robom; hover rdeče zažari */
:root[data-theme="baroncek"] .small-btn,
:root[data-theme="baroncek"] .btn,
:root[data-theme="baroncek"] .block .info button{
  background:#111; color:#fff;
  border:1px solid var(--brand);
  transition: box-shadow .2s ease, background .15s ease, transform .08s ease;
}
:root[data-theme="baroncek"] .small-btn:hover,
:root[data-theme="baroncek"] .btn:hover,
:root[data-theme="baroncek"] .block .info button:hover{
  background: var(--brand);
  box-shadow: var(--glow-red);
  transform: translateY(-1px);
}
/* Ghost varianta (črna obroba + črn tekst) */
:root[data-theme="baroncek"] .small-btn.alt,
:root[data-theme="baroncek"] .btn.alt{
  background:#fff; color:#111; border:1px solid #111;
}
:root[data-theme="baroncek"] .small-btn.alt:hover,
:root[data-theme="baroncek"] .btn.alt:hover{
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(225,6,0,.12);
}

/* NAV – minimalističen hover */
:root[data-theme="baroncek"] header .site-nav li a:hover,
:root[data-theme="baroncek"] header .site-nav li a:focus{
  background:#f7f7f7;
  border-color:#e5e7eb;
}
:root[data-theme="baroncek"] nav a[aria-current="page"]{
  background:#f2f4f6; border-color:#dfe3e8;
}

/* Cover kartice – svetel overlay, temen tekst */
:root[data-theme="baroncek"] .card--cover{ color:#111; }
:root[data-theme="baroncek"] .card--cover::before{
  background: linear-gradient(180deg, rgba(255,255,255,.8), rgba(255,255,255,.8)), var(--bg, #F2F4F6);
}
:root[data-theme="baroncek"] .card--cover .btn{ border-color:#d1d5db; color:#111; }
:root[data-theme="baroncek"] .card--cover .btn--primary{
  background:#111; border-color:var(--brand); color:#fff;
}