/* ==== Bibleone-ish dark theme ==== */
:root[data-theme="dark"]{
--link: var(--accent);
--link-hover: #ffd27a;
  --bg:#0d1117;          /* tmavě modro-černé pozadí */
--bg1:#232f3d;          /* tmavě modro-černé pozadí světlejší */
  --bg-img: url('/public/img/moon.jpg');
  --card:#1b2230;        /* karty s lehce modrým tónem */
  --line:#2c3445;        /* linky/bordery šedě-modré */
  --fg:#e6eaf0;          /* světle šedý text */
  --muted:#a0a9b8;       /* tlumený modro-šedý text */
  --accent:#e7c888;      /* zlatý akcent */
  --accent-weak:#c9b07a; /* tlumenější zlatá */
  --focus:#4a90e2;       /* jasně modrý focus */
  --radius:12px;         /* univerzální zaoblení */
}
/* světlý motiv */
:root[data-theme="light"]{
--link: #362310;
--link-hover: #bda56a;
  --bg:#f7f7f9;
--bg1:rgba(255, 244, 220, 0.88);          /* světle krémové pozadí světlejší */
  --bg-img: url('/public/img/cim12.jpg');
  --card:rgba(255,255,255,.75);
  --line:#dcdfe4;
  --fg:#2C3E50;
  --muted:#5c6573;
  --accent:#333333;       /* tlumená “zlatá” pro světlo */
  --accent-weak:#bda56a;
  --focus:#265dbe;
 --radius:12px;         /* univerzální zaoblení */
}
/* barva skla podle tématu */
:root[data-theme="light"] { --glass-bg: rgba(255,255,255,.4); }
:root[data-theme="dark"]  { --glass-bg: rgba(27,34,48,.4); }
:root[data-theme="light"] .pray-btn{
  background:
    url('/img/ruce-dark.svg') calc(50% + 3px) center/22px no-repeat,
    var(--card);
}
:root[data-theme="dark"] .pray-btn{
  background:
    url('/img/ruce-white.svg') calc(50% + 3px)  center/22px no-repeat,
    var(--card);
}
:root[data-theme="light"] .btn:hover{
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.15);
}
:root[data-theme="dark"] .btn:hover{
  box-shadow: inset 0 1px 3px rgba(255,255,255,0.08);
}
/* ========== ZÁKLAD ========== */
html,body{ 
  color:var(--fg); 
  background: var(--bg) fixed;
  background-image: var(--bg-img);
  background-size: cover;
  background-position: center;
 }
html { scroll-padding-top: 24px; }
.footer-center{text-align:center};
/* Aby i formulářová karta měla stejnou šířku a zarovnání */


.theme-toggle {
  position: absolute;
  top: 5px;
  right: 5px;
  z-index: 1000;
  margin-bottom: 10px;
}

.theme-toggle .theme-btn{
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 14px;
  color: var(--fg);
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
}

.theme-toggle .theme-btn:hover{
  filter: brightness(.97);
}

.theme-toggle .theme-icon{
  font-size: 1.1rem;
  line-height: 1;
}

.theme-toggle .theme-text{
  font-size: 13px;
  color: var(--muted);
  white-space: nowrap;
}

.theme-toggle button {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
}
/* samotná .content = jen rozměry a centrování */
.content{
  max-width: 960px;
  margin: 5px auto;
  padding: 12px;
  position: relative;      /* kvůli ::before */
}

/* skleněná vrstva za obsahem */
.content::before{
  content:"";
  position: absolute;
  inset: 0;                /* top:0;right:0;bottom:0;left:0 */
  background: var(--glass-bg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: var(--radius);
  z-index: 0;              /* pod obsahem */
  pointer-events: none;    /* nebrání klikům */
}

/* ať je skutečný obsah nad sklem */
.content > *{
  position: relative;
  z-index: 1;
}



/* ====== Mřížka karet ====== */
.cards{
  display:grid;
  grid-template-columns:1fr; /* jeden sloupec */
  row-gap:16px;
  overflow-x: hidden;              /* mezera mezi kartami */
}

/* ====== Vzhled karty (obecně) ====== */
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:16px;
  min-height:0;
  height:auto;
  overflow-x: hidden;
}

/* ====== Horní karta s formulářem ====== */
.card--form{
  padding:12px;        /* o trochu menší vnitřní okraj */
  margin-bottom:16px;  /* stejná mezera jako mezi kartami */
}


.link, a {
  color: var(--link);
  text-decoration: none;
  border-bottom: none;
  transition: color .15s ease;
}

.link:hover,
a:hover {
  color: var(--link-hover);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* Nikdy nepodtrhávat „ikonový“ odkaz se šipkou » */
.row.prosba .vers-go a {
  text-decoration: none !important;
  border-bottom: none !important;
}
.row.prosba .vers-go a:hover {
  text-decoration: none !important;
  border-bottom: none !important;
}

/* Nepodtrhávat tlačítkově vypadající odkazy a stránkování */
a.btn,
.pager-scroll a {
  text-decoration: none;
  border-bottom: none;
}
a.btn:hover,
.pager-scroll a:hover {
  text-decoration: none;
}

/* uvozovky pro text prosby 
.prosba .text i::before{ content:"„"; color:var(--muted); margin-right:2px; font-size:110%; }
.prosba .text i::after { content:"“"; color:var(--muted); margin-left:2px;  font-size:110%; }
*/
.prosba .text i::before{ content:" "; color:var(--muted); margin-right:2px; font-size:110%; }
.prosba .text i::after { content:" "; color:var(--muted); margin-left:2px;  font-size:110%; }
/*jednotný button*/
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:8px 12px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--card);
  color:var(--fg);
  cursor:pointer;
  transition:.15s ease;
  text-decoration:none;
}

.btn:hover{
  filter:brightness(.97);
color:var(--muted); 
box-shadow:
    inset 0 1px 3px rgba(0,0,0,0.12),
    0 1px 2px rgba(0,0,0,0.05);
}

.btn:focus-visible{
  outline:2px solid var(--focus);
  outline-offset:2px;
}
/* formulářová pole */
input, textarea, select{
  background:var(--bg1); color:var(--fg);
  border:1px solid var(--line);
  border-radius:calc(var(--radius) - 4px);
  padding:8px 10px;
  outline:none;
  width:100%;
  box-sizing:border-box;
  font:inherit;
}
.form-row, .note-form{ gap:12px; }
.form-row{
  display:grid;
  grid-template-columns:1fr; /* mobil */
  row-gap:12px;
}
.form-row label{ display:block; }
.form-row .btn{ justify-self:start; }

/* Výchozí stav – formulář skrytý */
.prosba-form { display: none; margin-top: 6px; }

/* Když je otevřený */
.prosba-form.show { display: grid; gap: 8px; }

/* ========== KARTA PROSBY ========== */
/* řádek prosby – rezervace místa pro tlačítko vpravo nahoře */
.row.prosba{ position:relative; padding-right:56px; }
.meta-line{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.meta-line .meta small{ color:var(--muted); }
.meta-line .author{ color:var(--fg); }
.row.prosba .text{ margin-top:4px; }
/* akce (tlačítko/placeholder) ukotvit v pravém horním rohu */
.row.prosba .akce{
  position:absolute; top:0; right:0;
  display:flex; align-items:flex-start;
}

/* druhý řádek – srdíčka */
.row.actions{ display:flex; align-items:center; justify-content:space-between; gap:4px; }
.modlitby{ display:flex; flex-wrap:wrap; gap:2px; max-width:100%; min-height:22px; }
.akce{ flex:0 0 auto; display:flex; align-items:center; justify-content:flex-end; margin-left:auto; padding-right:4px; }

/* tlačítko „pomodlil jsem se“ + placeholder */
.pray-btn, .pray-placeholder{
  width:44px; height:44px; border-radius:50%; flex-shrink:0;
}
.pray-btn{
  border:1px solid var(--line);
  background:var(--background);
  display:flex;
  align-items:center;
  justify-content:center;
  transition:.15s ease;
  cursor:pointer;
}
.pray-btn:hover{ background:var(--card); transform:translateY(-1px); filter:brightness(.9); }
.pray-btn img{ width:24px; height:24px; display:block; pointer-events:none; }
.pray-btn::before {
  /*content: "🙏";*/
content: none;
  font-size: 20px;
}
.pray-placeholder{ border:1px dashed #3a3f46; var(--card); }

/* odstupy mezi řádky v kartě */
.card .row{ margin-bottom:5px; }
.card .row:last-child{ margin-bottom:0; }

/* SRDÍČKA: 1× růžová, 10× červená – jako text, ne emoji */
.modlitby .heart1::before,
.modlitby .heart10::before{
  /* U+2764 + U+FE0E = srdce s textovou prezentací (dá se barvit) */
 
  display:inline-block;
  line-height:1;
  vertical-align:middle;
  margin-right:0px;
  /* žádné emoji fonty → ať to vezme obyč. řez, který jde barvit */
  font-family: system-ui, "Segoe UI", Arial, sans-serif;
}

/* 1× */
.modlitby .heart1::before{
  color:#fc77b7;      /* jemná růžová */
  font-size:10px;
/*content: "\2661"; */ /* jemné */
content:"💖";
text-shadow: 0 0 2px rgba(230,57,70,0.3);

}

/* 10× */
.modlitby .heart10::before{
  color:#e63946;      /* sytější červená */ 
/*content: "\2764\FE0E";*/
content:"💗";
  font-size:14px;
}

/* ŘÁDEK POZNÁMEK: seznam | tlačítko vpravo | formulář přes oba sloupce */
.row.notes{
  display:grid; grid-template-columns:1fr auto; gap:8px 12px; align-items:start;background:var(--bg);
border: 1px solid rgba(0,0,0,0.08); padding:4px;text-decoration: none;
}
.btn-ghost{
  background:transparent; color:var(--accent);
  border:1px solid var(--line); border-radius:calc(var(--radius) - 6px);
  padding:6px 10px; line-height:1.2; cursor:pointer;
}
.btn-ghost:hover{ border-color:var(--accent); color:var(--link-hover); }
.note-form{ display:none; grid-column:1 / -1; margin-top:6px; }
.note-form.show{ display:grid; grid-template-columns: 180px 1fr auto; gap:8px; }
.note-form label{ display:block; }
.note-form input, .note-form textarea{ width:100%; }
.note-form .btn{ align-self:end; }
.header-img {
  text-align: center;   /* zarovná obsah divu doprostřed */
  overflow: hidden;     /* jistota, že nic nepřeteče */
}

.header-img img {
  width: 90%; 
 max-width: 100%;   /* nikdy nepřesáhne 100 % rodiče */
  height: auto;          /* obrázek bude mít max. 90 % šířky, zachová proporce*/
  border-radius: 8px;   /* volitelné zaoblení rohů */
  margin: 1% 5%;        /* nahoře+dole 1%, vlevo+vpravo 5% */
  display: none;       /* aby text-align fungoval spolehlivě */
  margin-left: auto;    /* středování blokového obrázku */
  margin-right: auto;
box-shadow: 0 0px 5px rgba(0, 0, 0, 0.3);
}
/* ========== ANIMACE PROSBY/VERŠE ========== */
@keyframes flyFadeOut{
  0%   { opacity: 1; transform: translate(0,0) scale(1); }
  100% { opacity: 0; transform: translate(-20px,-20px) scale(.98); }
}

.prosba-fly-out{
  animation: flyFadeOut 3s ease forwards;
  will-change: transform, opacity;
}

@keyframes verseIn{
  0%   { opacity: 0; transform: translateY(-28px);  letter-spacing: 1px;}
  100% { opacity: 1; transform: translateY(0); letter-spacing: 0.6px; }
}

.vers-show{
  display: block !important; 
  animation: verseIn .45s ease-out forwards;
  font-family: 'Cinzel', Georgia, serif;
  will-change: transform, opacity;
}
.vers-show a{
  color: inherit;                 /* nepřebírat barvu odkazu */
  text-decoration: none;          /* žádné podtržení */
  font-family: inherit;           /* Cinzel */
}

.vers-show a:hover{
  color: var(--accent);           /* jemné zvýraznění při hover */
  text-decoration: underline;
}

/* Tvrdé lámání dlouhých slov/URL i uvnitř <i>, <a> atd. */
.row.prosba .text,
.row.prosba .vers,
.row.prosba .text * ,
.row.prosba .vers * {
  overflow-wrap:anywhere;
  word-break:break-word;
  hyphens:auto;
}
/* Slot (držák) pro prosbu/vers – min-height nastavíme JSkem */
.pv{
  --lh: 1.4;
  line-height: var(--lh);
  min-height: calc(5em * var(--lh));  /* ~5 řádků */
/*border: 1px solid var(--line);*/
border: 1px solid rgba(0,0,0,0.08);
margin-bottom:4px;
padding: 6px;
 background: var(--bg1) ;
}
.pager {
  margin-top: 16px;
  text-align: center;
}
.pager-nav {
  margin-bottom: 8px;
}
.pager-scroll {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px;
  scrollbar-width: thin;
}
.pager-scroll a, .pager-scroll span {
  display: inline-block;
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  text-decoration: none;
  color: var(--fg);
  white-space: nowrap;
}
.pager-scroll span.curr {
  background: var(--accent);
  color: #000;
  font-weight: bold;
}
.pager-scroll a:hover {
  background: #20242a;
}
.switch-version{
  margin: 8px 0;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--bg);
  border: 1px solid rgba(0,0,0,0.05);
  font-size: 13px;
  color: var(--muted);
}
.help { display:block; margin-top:4px; color: var(--muted); }
.help.count-warning { color: #e63946; } /* zčervená nad 280 znaků */
/* ========== RESPONSIVE ========== */

/* Mobil je default (už máš 1 sloupec v .form-row) */

@media (min-width: 900px){
  .content{ padding:20px; }
  .cards{ row-gap:24px; }
  .card{ padding:20px; }

  /* Desktop: 2 sloupce pro formulář nové prosby */
  .form-row{
    grid-template-columns: 220px 1fr;
    align-items: start;
  }
  .form-row .btn{
    grid-column: 1 / -1;  /* tlačítko přes oba sloupce */
    margin-top: 6px;
  }
  /* Poznámkový formulář může zůstat třísloupcový jen na desktopu */
  .note-form.show{
    grid-template-columns: 180px 1fr auto;
  }
}

/* Telefony – jistota, že je vše pod sebou */
@media (max-width: 600px){
  .note-form.show{ grid-template-columns: 1fr; }
  .note-form .btn{ justify-self: start; }
  .akce{ padding-right: 10px; }
  .header-img img{
    display: block;
    text-align: center; /* zachová středování */
  }
   }