:root{
  --bg:#f0f2f5; --card:#fff; --text:#1d2129; --muted:#72777c; --line:#e5e7eb; --accent:#0ea5e9;
}
@media (prefers-color-scheme: dark){
  :root{ --bg:#0b1220; --card:#0f172a; --text:#e5e7eb; --muted:#94a3b8; --line:#1f2937; --accent:#38bdf8; }
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif;
}
.wrap{max-width:980px;margin:0 auto;padding:0 16px}
.site-header{background:var(--card);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:12px;padding:14px 0}
.avatar{width:44px;height:44px;border-radius:999px;display:grid;place-items:center;background:#e5e7eb;font-size:20px}
@media (prefers-color-scheme: dark){.avatar{background:#111827}}
.titles h1{margin:0;font-size:clamp(20px,2.6vw,26px)}
.titles .tagline{margin:2px 0 0;color:var(--muted);font-size:14px}

.feed{max-width:680px;margin:18px auto;display:grid;gap:16px}
.post{background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:0 8px 26px rgba(0,0,0,.05)}
.post-head{display:flex;align-items:center;gap:10px;padding:12px 14px 8px}
.post-avatar{width:36px;height:36px;border-radius:999px;display:grid;place-items:center;background:#e5e7eb;font-size:16px}
@media (prefers-color-scheme: dark){.post-avatar{background:#111827}}
.post-meta .name{font-weight:600;line-height:1.2}
.post-meta .time{font-size:12px;color:var(--muted)}
.post-text{padding:0 14px 10px;line-height:1.5}
.post-text p{margin:0}
.post-media{margin:0;border-top:1px solid var(--line);background:#000}
.post-media img{display:block;width:100%;height:auto}
.post-actions{display:flex;gap:10px;padding:10px 14px 14px;border-top:1px solid var(--line)}
.btn{appearance:none;border:0;border-radius:999px;padding:10px 14px;cursor:pointer;background:var(--accent);color:#fff;font-weight:600;text-decoration:none;display:inline-block;box-shadow:0 6px 18px rgba(14,165,233,.3);transition:transform .05s ease}
.btn:active{transform:translateY(1px)}
.ghost{background:transparent;color:var(--accent);border:2px solid var(--accent);box-shadow:none}
.ghost:hover{background:var(--accent);color:#fff}
.fb-embed{max-width:680px;margin:36px auto;padding:12px;background:var(--card);border:1px solid var(--line);border-radius:12px}
.fb-embed h2{font-size:18px;margin:0 0 10px 2px}
.note{margin:8px 2px 0;font-size:14px;color:var(--muted)}
.site-footer{margin-top:36px;padding:18px 0;color:var(--muted);font-size:14px;text-align:center;border-top:1px solid var(--line)}

@media (max-width:520px){
  .feed{gap:12px}
  .post-head{padding:10px 12px 6px}
  .post-text{padding:0 12px 10px}
  .post-actions{padding:10px 12px 12px}
  .fb-embed{margin:28px auto}
}

/* plynulý posun na kotvu #postXX */
html{scroll-behavior:smooth}



/* --- Brand barvy a velikosti --- */
:root{
  --brand-blue:#0b3b8f;
}

/* Hlavní nadpis: tmavě modrý a o něco větší */
.titles h1{
  margin:0;
  color:var(--brand-blue);
  font-size:clamp(22px,3.2vw,32px);
  line-height:1.15;
}

/* Avatar a post-avatar s logem vevnitř */
.avatar,
.post-avatar{
  display:grid;
  place-items:center;
  overflow:hidden;
}

.avatar img,
.post-avatar img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  /* jemný vnitřní padding, aby logo „nedřelo“ o okraj kruhu */
  padding:4px;
}

/* --- Fixní pozadí s krajinou --- */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,.25), rgba(0,0,0,.25)),
    url("img/bg-krajina.jpg");
  background-size:cover;
  background-position:center;
  background-attachment:fixed;
  /* v dark módu méně stmavovat, barvy už jsou tlumené */
}
@media (prefers-color-scheme: dark){
  body::before{
    background-image:
      linear-gradient(to bottom, rgba(0,0,0,.35), rgba(0,0,0,.35)),
      url("img/bg-krajina.jpg");
  }
}

/* Karty příspěvků zůstávají čitelné */
.post{
  background:color-mix(in oklab, var(--card) 92%, transparent);
  backdrop-filter:saturate(1.05);
}

/* Malá úprava prostoru, ať pozadí víc „dýchá“ */
.feed{margin:22px auto}








/* zruš šedé pozadí v kolečku */
.avatar,
.post-avatar{ background: transparent; }

/* ať logo vyplní kruh úplně */
.avatar img,
.post-avatar img{
  padding: 0;           /* dřív bylo 4px → dělalo šedý okraj */
  width: 100%;
  height: 100%;
  object-fit: cover;    /* vyplní celý kruh */
  display: block;       /* bez baseline mezery */
}











/* umožní přehazovat pořadí jen pomocí třídy na <article> */
/*.post{display:flex;flex-direction:column}
*/

/* když dáš na článek třídu .image-first, půjde obrázek před text */
/*.image-first .post-media{order:2}
.image-first .post-text{order:3}
*/

/* volitelné: jen na mobilu (do 520px) obrázek napřed */
/*@media (max-width:520px){
  .image-first-mobile .post-media{order:2}
  .image-first-mobile .post-text{order:3}
}
*/





/* základ – respektuje DOM pořadí */
.post{display:flex;flex-direction:column}
.post-head{order:1}
.post-media{order:2}
.post-text{order:3}
.post-actions{order:4}

/* když někdy budeš chtít text před obrázek, jen přidej třídu .text-first */
.post.text-first .post-text{order:2}
.post.text-first .post-media{order:3}

/* varianta: text před obrázek jen na mobilu */
@media (max-width:520px){
  .post.text-first-mobile .post-text{order:2}
  .post.text-first-mobile .post-media{order:3}
}

/* drobnost: když je obrázek první, ať má nahoře jemnou linku jako oddělovač */
.post-media{border-top:1px solid var(--line)}








/* Jemnější rozlišení tlačítek */
.post-actions .btn.copy{opacity:.9}
.post-actions .btn.copy:hover{opacity:1}

/* Toast (potvrzení "zkopírováno") */
.toast{
  position:fixed; left:50%; bottom:20px;
  transform:translateX(-50%) translateY(8px);
  background:var(--card); color:var(--text);
  border:1px solid var(--line); border-radius:999px;
  padding:10px 14px; box-shadow:0 10px 30px rgba(0,0,0,.15);
  opacity:0; pointer-events:none; transition:.18s ease;
  font-size:14px; z-index:9999;
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0)}


@media (max-width:520px){ body::before{ background-attachment:scroll } }



.back-to-top{
  position:fixed; right:16px; bottom:20px; z-index:9998;
  width:44px; height:44px; border:0; border-radius:999px;
  background:var(--accent); color:#fff; font-size:20px; line-height:44px;
  box-shadow:0 10px 30px rgba(0,0,0,.2);
  opacity:0; transform:translateY(12px); pointer-events:none;
  transition:opacity .18s, transform .18s;
}
.back-to-top.show{ opacity:1; transform:translateY(0); pointer-events:auto; }
.back-to-top:focus-visible{ outline:3px solid color-mix(in oklab, var(--accent) 50%, white); }
@media (max-width:520px){ .back-to-top{ bottom:72px; } } /* ať nekoliduje s toastem */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .back-to-top{ transition:none; }
}



/* větší nádech mezi obrázkem a textem v kartě */
.post-media + .post-text{ padding-top: 16px; }

/* volitelně na mobilech o fous víc */
@media (max-width:520px){
  .post-media + .post-text{ padding-top: 18px; }
}





/* příjemnější mezera mezi obrázkem a textem */
.post-media + .post-text{ padding-top: 16px; }
@media (max-width:520px){
  .post-media + .post-text{ padding-top: 18px; }
}

/* malý komfort při „přistání“ na kotvu */
.post{ scroll-margin-top: 10px; }
@media (max-width:520px){ .post{ scroll-margin-top: 12px; } }



 /* globálně */
/* .post{ scroll-margin-top: 8px; }         
@media (max-width:520px){ .post{ scroll-margin-top: 12px; } } */



/* .post-media img{ width:100%; height:auto; display:block; } */



/* Letterbox varianta: fixní poměr, obrázek 'contain' → prázdné boky místo ořezu */
.post.letterbox .post-media{ aspect-ratio: 16 / 9; }
.post.letterbox .post-media img{
  width:100%; height:100%; object-fit: contain;
  background: var(--card); /* nebo transparent, nebo #000 pro černé pruhy */
}
/* na mobilu klidně zruš restrikci poměru */
@media (max-width:520px){
  .post.letterbox .post-media{ aspect-ratio: auto; }
}
/* v html <article id="post23" class="post letterbox"> … </article>
 */




 .cookiebar{
  position:fixed; left:0; right:0; bottom:0; z-index:9999;
  background:var(--card); border-top:1px solid var(--line);
  box-shadow:0 -10px 30px rgba(0,0,0,.1);
}
.cookiebar[hidden]{ display:none; }
.cookiebar__inner{ max-width:980px; margin:0 auto; padding:12px 16px; }
.cookiebar p{ margin:6px 0; }
.cookiebar__actions{ display:flex; gap:8px; margin-top:8px; }
@media (max-width:520px){ .cookiebar__inner{ padding:10px 12px; } }





/* Dark mode: bílý obrys kolem hlavního nadpisu */
@media (prefers-color-scheme: dark){
  .titles h1{
    color:var(--brand-blue);                 /* zachováme modrou výplň */
    -webkit-text-stroke:1px rgba(255,255,255,.9);  /* outline pro Chrome/Safari/Edge */
    /* Fallback pro prohlížeče bez text-stroke (např. Firefox) */
    text-shadow:
      0  1px 0 rgba(255,255,255,.9),
      0 -1px 0 rgba(255,255,255,.9),
      1px  0  0 rgba(255,255,255,.9),
     -1px  0  0 rgba(255,255,255,.9);
  }
}
/* Tipy na doladění (kdyby to bylo moc silné/slabé): */
/* zmenši/zvětši obrys: -webkit-text-stroke: 0.8px nebo 1.2px */
/* zjemni obrys: změň průhlednost na .7 nebo .6 v rgba(255,255,255,.7). */



/* Dark mode: zviditelni tagline pod nadpisem */
@media (prefers-color-scheme: dark){
  .titles .tagline{
    color:#e5e7eb;                 /* světle šedá s dobrým kontrastem */
    text-shadow:0 1px 2px rgba(0,0,0,.45); /* jemné orámování pro čitelnost */
  }
}


/* A kdyby to pořád nebylo ono (třeba u fotek s hodně světlou oblohou), můžeš přitvrdit „bublinkou“ jen pro dark mode: */
/* @media (prefers-color-scheme: dark){
  .titles .tagline{
    color:#eaf2ff;
    background:rgba(0,0,0,.25);
    padding:2px 6px;
    border-radius:8px;
  }
} */



/* Drobné info v patičce */
.fix-note{
  margin-top:8px;
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
}

/* Zmenšená verze tlačítka */
.btn.tiny{
  padding:6px 10px;
  font-size:12px;
  box-shadow:none;
}



/* Plovoucí mini tlačítka vpravo dole */
.float-cta{
  position:fixed; right:16px; bottom:20px; z-index:9999;
  display:grid; gap:10px;
}

/* Když je viditelná cookie lišta, posuň tlačítka výš (třídu přepínáme v JS) */
.cookiebar-open .float-cta{ bottom:86px; }

.fab{
  width:44px; height:44px; border:0; border-radius:999px; cursor:pointer;
  display:grid; place-items:center;
  background:var(--accent); color:#fff;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
  transition:transform .12s ease, box-shadow .12s ease, opacity .2s ease;
}
.fab:hover{ transform:translateY(-1px); box-shadow:0 12px 32px rgba(0,0,0,.28); }
.fab:active{ transform:translateY(0); }

.fab.fb{
  background:#1877f2;  /* Facebook modrá */
}

.fab svg{ display:block; }

@media (prefers-reduced-motion: reduce){
  .fab{ transition:none; }
}



/* ať není pod novými plovoucími tlačítky */
.back-to-top{
  right: 72px;           /* dřív 16px – posuneme doleva od sloupku .float-cta */
  bottom: 20px;
  z-index: 10000;        /* nad .float-cta (ta má 9999) */
}
.cookiebar-open .back-to-top{ bottom: 86px; } /* když je cookie lišta, posuň výš stejně jako .float-cta */



/* backTop jako mini kulaté tlačítko ve sloupku */
#backTop.fab{ opacity:0; transform:translateY(12px); pointer-events:none; }
#backTop.fab.show{ opacity:1; transform:translateY(0); pointer-events:auto; }






/* --- FIX pro plovoucí akce: základ + reset defaultního vzhledu tlačítek --- */
.float-cta{
  position:fixed; right:16px; bottom:16px;
  z-index:2147483647;
  display:grid; gap:10px;
}
.cookiebar-open .float-cta{ bottom:86px; }

/* reset pro chrome/ios/samsung (někdy se drží default button vzhled) */
.fab{
  appearance:none; -webkit-appearance:none; /* zruš defaultní bílý button */
  width:44px; height:44px; border:0; border-radius:9999px;
  cursor:pointer; display:grid; place-items:center;
  background:var(--accent); color:#fff;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
  transition:transform .12s ease, box-shadow .12s ease, opacity .2s ease;
}
.fab:hover{ transform:translateY(-1px); box-shadow:0 12px 32px rgba(0,0,0,.28); }
.fab:active{ transform:translateY(0); }
.fab svg{ display:block; }
.fab.fb{ background:#1877f2; }

/* back-to-top jako kulaté FAB (varianta B) – ukázat až po scrollu */
#backTop.fab{ opacity:0; transform:translateY(12px); pointer-events:none; }
#backTop.fab.show{ opacity:1; transform:translateY(0); pointer-events:auto; }

/* safe-area (iOS) */
@supports (bottom: env(safe-area-inset-bottom)){
  .float-cta{ bottom: calc(16px + env(safe-area-inset-bottom)); }
  .cookiebar-open .float-cta{ bottom: calc(86px + env(safe-area-inset-bottom)); }
}

/* pro jistotu: ať <a class="fab"> nevypadá jako odkaz */
a.fab{ text-decoration:none; }