/* Stolnica Ljubljana — PWA
   Paleta: parchment #F3EEE2, ink #2B241C, vinsko rdeča (Srce Jezusovo) #6E2430,
   marijansko modra (Srce Marijino) #35586B, oksidirana bakrena zelena (kupola) #4B6C5C,
   pozlata #B8893E */

/* Pisave so samo-gostene lokalno (assets/fonts/) — NE prek Google Fonts CDN,
   da se izognemo nedovoljenemu prenosu IP naslova obiskovalca tretji osebi
   pred privolitvijo (to je razlog za "unclassified tracker" pri GDPR skenerjih). */
@font-face{
  font-family:'Fraunces'; font-style:normal; font-weight:400; font-display:swap;
  src:url('/assets/fonts/fraunces-400.woff2') format('woff2');
}
@font-face{
  font-family:'Fraunces'; font-style:normal; font-weight:600; font-display:swap;
  src:url('/assets/fonts/fraunces-600.woff2') format('woff2');
}
@font-face{
  font-family:'Fraunces'; font-style:normal; font-weight:700; font-display:swap;
  src:url('/assets/fonts/fraunces-700.woff2') format('woff2');
}
@font-face{
  font-family:'Public Sans'; font-style:normal; font-weight:400; font-display:swap;
  src:url('/assets/fonts/public-sans-400.woff2') format('woff2');
}
@font-face{
  font-family:'Public Sans'; font-style:normal; font-weight:500; font-display:swap;
  src:url('/assets/fonts/public-sans-500.woff2') format('woff2');
}
@font-face{
  font-family:'Public Sans'; font-style:normal; font-weight:600; font-display:swap;
  src:url('/assets/fonts/public-sans-600.woff2') format('woff2');
}
@font-face{
  font-family:'Public Sans'; font-style:normal; font-weight:700; font-display:swap;
  src:url('/assets/fonts/public-sans-700.woff2') format('woff2');
}

:root{
  --ink:#2B241C;
  --parchment:#F3EEE2;
  --parchment-2:#EAE2D0;
  --vinska:#6E2430;
  --vinska-svetla:#8C2F39;
  --marijanska:#35586B;
  --bakrena:#4B6C5C;
  --zlata:#B8893E;
  --card-shadow: 0 1px 2px rgba(43,36,28,.06), 0 8px 24px rgba(43,36,28,.08);
  --radius: 14px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--parchment);
  color:var(--ink);
  font-family:'Public Sans', system-ui, sans-serif;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.display{
  font-family:'Fraunces', Georgia, serif;
  font-weight:600;
  letter-spacing:-.01em;
  margin:0 0 .4em;
}
a{color:var(--vinska);}

.wrap{max-width:640px;margin:0 auto;padding:0 20px 64px;}

/* ── Ilustracija dveh src (Jezusovo in Marijino) ─────── */
.dve-srci{
  display:block; width:min(280px, 78%); height:auto; margin:8px auto 4px;
}

/* ── Hero: naslednja pobožnost (znotraj zaslona "Opomniki") ── */
.hero{
  background:var(--parchment-2);
  border-radius:var(--radius);
  padding:22px 20px 26px;
  text-align:center;
  margin-bottom:22px;
}
.hero .stevec{
  font-family:'Fraunces', serif; font-weight:700; font-size:2.6rem;
  color:var(--vinska);
}
.hero .label{ font-size:.95rem; opacity:.8; margin-top:2px;}

/* ── Stalen vrh: naslov + meni vseh funkcij (vedno viden) ─── */
.app-top{
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:var(--ink); padding-top:env(safe-area-inset-top);
  box-shadow:0 2px 10px rgba(0,0,0,.15);
}
.app-top-naslov{
  color:var(--zlata); font-size:.7rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; text-align:center; padding:8px 12px 4px;
}
.app-menu{
  display:flex; gap:6px; overflow-x:auto; scroll-snap-type:x proximity;
  padding:2px 10px 10px; -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.app-menu::-webkit-scrollbar{ display:none; }
.am-gumb{
  scroll-snap-align:start; flex:0 0 auto; width:64px;
  display:flex; flex-direction:column; align-items:center; gap:3px;
  text-decoration:none; color:var(--parchment); background:none; border:none;
  font-family:inherit; cursor:pointer; padding:6px 2px; border-radius:12px;
}
.am-ikona{ font-size:1.35rem; line-height:1; }
.am-oznaka{ font-size:.62rem; font-weight:600; text-align:center; line-height:1.15; opacity:.85;}
.am-gumb.aktiven{ background:rgba(255,255,255,.12); }
.am-gumb.aktiven .am-oznaka{ opacity:1; color:var(--zlata); }

.app-vsebina{ padding-top:104px; }
.app-zaslon{ display:none; }
.app-zaslon.aktiven{ display:block; animation:zz-fadeIn .2s ease; }
@keyframes zz-fadeIn{ from{opacity:0;} to{opacity:1;} }

/* Zaslon "zunanja vsebina" (Opomniki/Maše/Kontakt uporabljajo .wrap padding,
   ta zaslon pa gre čez celo širino/višino, zato je izvzet iz .wrap odmika) */
.app-zaslon.zaslon-zunanja.aktiven{ display:flex; flex-direction:column; }
.zaslon-zunanja{ margin:0 -20px; }
.zz-glava{
  display:flex; align-items:center; gap:10px;
  background:var(--parchment-2); border-bottom:1px solid rgba(43,36,28,.1);
  padding:10px 14px;
}
.zz-nazaj{
  background:none; border:none; font:inherit; font-weight:600; font-size:.85rem;
  color:var(--vinska); cursor:pointer; padding:4px 2px; flex:0 0 auto;
}
.zz-naslov{ flex:1 1 auto; font-weight:700; font-size:.9rem; text-align:center; }
.zz-odpri{
  flex:0 0 auto; font-size:.78rem; font-weight:600; color:var(--marijanska);
  text-decoration:none;
}
.zz-iframe-wrap{
  flex:1 1 auto; position:relative;
  height:calc(100vh - 104px - 46px - env(safe-area-inset-top));
  min-height:360px;
}
.zz-iframe-wrap iframe{ width:100%; height:100%; border:0; display:block; }
.zz-nadomestilo{
  flex:1 1 auto; display:flex; flex-direction:column; align-items:center;
  justify-content:center; text-align:center; gap:14px; padding:40px 30px;
  min-height:360px;
}
.zz-nadomestilo-ikona{ font-size:2.4rem; }
.zz-nadomestilo p{ max-width:320px; opacity:.85; font-size:.92rem; }

.skrito{ display:none !important; }

/* ── Namesti aplikacijo / posodobitev ─────── */
.update-banner{
  display:none; position:fixed; top:0; left:0; right:0; z-index:300;
  background:var(--bakrena); color:#fff; padding:12px 16px; text-align:center;
  font-size:.85rem; font-weight:600; cursor:pointer;
  box-shadow:0 2px 8px rgba(0,0,0,.2);
}
.install-banner{
  display:none; position:fixed; bottom:0; left:0; right:0; z-index:200;
  background:var(--ink); color:var(--parchment);
  padding:20px 20px calc(28px + env(safe-area-inset-bottom));
  text-align:center; box-shadow:0 -4px 20px rgba(0,0,0,.3);
  animation:zz-slideUp .3s ease; border-radius:20px 20px 0 0;
}
@keyframes zz-slideUp{ from{transform:translateY(100%);} to{transform:translateY(0);} }
.install-banner strong{ display:block; font-family:'Fraunces',serif; font-size:1.1rem; margin-bottom:6px; color:#fff;}
.install-banner p{ font-size:.85rem; opacity:.85; margin-bottom:14px; line-height:1.5;}
.install-banner-btns{ display:flex; gap:10px; justify-content:center;}
.gumb.obrobljen-belo{
  background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,.5);
}

/* ── Kroglice sledilca (znamenje devocije) ─── */
.beads{ display:flex; justify-content:center; gap:8px; margin:14px 0 2px; flex-wrap:wrap;}
.bead{
  width:15px; height:15px; border-radius:50%;
  border:2px solid var(--vinska);
  background:transparent;
  transition:background .15s ease;
  cursor:pointer;
}
.bead.sobota{ border-color:var(--marijanska);}
.bead.on{ background:var(--vinska);}
.bead.sobota.on{ background:var(--marijanska);}
.beads-caption{ font-size:.78rem; opacity:.65; margin-top:6px; display:flex; align-items:center; gap:6px;}
.info-ikona{
  flex:0 0 auto; width:18px; height:18px; border-radius:50%;
  background:none; border:1px solid currentColor; color:inherit;
  font-size:.7rem; line-height:1; cursor:pointer; padding:0;
  display:inline-flex; align-items:center; justify-content:center;
  opacity:.8;
}
.info-ikona[aria-expanded="true"]{ background:var(--ink); color:#fff; opacity:1; border-color:var(--ink); }
.pojasnilo{
  font-size:.82rem; opacity:.85; background:var(--parchment);
  border-left:3px solid var(--bakrena); border-radius:0 8px 8px 0;
  padding:10px 12px; margin-top:8px;
}

/* ── Kartice pobožnosti ───────────────────── */
.card{
  background:#fff;
  border-radius:var(--radius);
  box-shadow:var(--card-shadow);
  margin:22px 0;
  overflow:hidden;
  border-top:4px solid var(--vinska);
}
.card.marijanska{ border-top-color:var(--marijanska);}
.card.nevtralna{ border-top-color:var(--bakrena);}
.card.nevtralna h2 .barva{ background:var(--bakrena);}
.card.nevtralna .gumb.obrobljen{ margin-right:8px; margin-top:8px; }

.card .card-body{ padding:20px 22px;}
.card h2{ font-size:1.25rem; display:flex; align-items:center; gap:8px;}
.card h2 .barva{ width:10px;height:10px;border-radius:50%; background:var(--vinska); display:inline-block;}
.card.marijanska h2 .barva{ background:var(--marijanska);}
.card ol,.card ul{ padding-left:1.2em; margin:.6em 0;}
.card li{ margin:.35em 0;}
.card p{ margin:.6em 0;}

/* ── Naročanje na obvestila ───────────────── */
.narocnina-sekcija{
  background:var(--ink); color:var(--parchment);
  border-radius:var(--radius); padding:22px;
  margin:28px 0;
}
.narocnina-sekcija h2{ color:#fff; font-size:1.15rem;}
.narocnina-sekcija p{ opacity:.8; font-size:.9rem;}
.tema-vrstica{
  display:flex; align-items:flex-start; gap:12px;
  padding:12px 0; border-top:1px solid rgba(243,238,226,.14);
}
.tema-vrstica:first-of-type{ border-top:none; }
.tema-vrstica .info strong{ display:block; font-size:.98rem;}
.tema-vrstica .info span{ font-size:.82rem; opacity:.7;}

.stikalo{
  position:relative; width:44px; height:26px; flex:0 0 auto; margin-top:2px;
}
.stikalo input{ opacity:0; width:0; height:0;}
.stikalo .drsnik{
  position:absolute; inset:0; background:#5c5344; border-radius:999px; cursor:pointer; transition:.2s;
}
.stikalo .drsnik::before{
  content:""; position:absolute; width:20px;height:20px; left:3px; top:3px;
  background:var(--parchment); border-radius:50%; transition:.2s;
}
.stikalo input:checked + .drsnik{ background:var(--zlata);}
.stikalo input:checked + .drsnik::before{ transform:translateX(18px);}

.status-vrstica{ font-size:.78rem; opacity:.7; margin-top:10px;}

/* ── Gumbi ─────────────────────────────────── */
.gumb{
  display:inline-block; padding:10px 18px; border-radius:999px;
  background:var(--vinska); color:#fff; text-decoration:none;
  font-weight:600; font-size:.9rem; border:none; cursor:pointer;
}
.gumb.obrobljen{ background:transparent; border:1.5px solid var(--ink); color:var(--ink);}
.gumb:disabled{ opacity:.5; cursor:default;}

/* ── GDPR pasica soglasja ─────────────────── */
.soglasje{
  position:fixed; left:0; right:0; bottom:0; z-index:500;
  background:#fff; border-top:1px solid rgba(43,36,28,.12);
  box-shadow:0 -6px 24px rgba(43,36,28,.12);
  padding:18px 20px calc(18px + env(safe-area-inset-bottom));
  transform:translateY(0); transition:transform .25s ease;
}
.soglasje.skrito{ transform:translateY(110%);}
.soglasje h3{ font-size:1.02rem; margin-bottom:6px;}
.soglasje p{ font-size:.86rem; margin:0 0 12px; opacity:.85;}
.soglasje .izbire{ display:flex; flex-wrap:wrap; gap:8px 18px; margin-bottom:14px;}
.soglasje label{ font-size:.82rem; display:flex; align-items:center; gap:6px;}
.soglasje .gumbi{ display:flex; gap:10px; flex-wrap:wrap;}

/* ── Noga ──────────────────────────────────── */
footer{ text-align:center; font-size:.8rem; opacity:.6; margin-top:40px;}
footer a{ color:inherit;}

.skrito-vizualno{ position:absolute; width:1px;height:1px; overflow:hidden; clip:rect(0 0 0 0);}

@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; scroll-behavior:auto !important;}
}