@charset "windows-1250";
/* Font – bezpečné pro češtinu */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap');

/* ========== Reset & Variables ========== */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --primary:#0a66c2;      /* modrá LinkedIn vibe */
  --accent:#ff6a00;       /* oranž CTA */
  --surface:#ffffff;
  --bg:#f6f8fb;
  --text:#222;
  --text-2:#566070;
  --muted:#8a93a5;
  --radius:12px;
  --shadow:0 10px 30px rgba(0,0,0,.06);
  --ring:0 0 0 4px rgba(13,110,253,.14);
  --t:.25s ease;
  color-scheme: light;
}
@media (prefers-color-scheme: dark){
  :root{
    --primary:#7fb3ff;
    --accent:#ff8a3d;
    --surface:#12161e;
    --bg:#0c1118;
    --text:#e8edf5;
    --text-2:#b9c0cc;
    --muted:#8f99ab;
    --shadow:0 10px 30px rgba(0,0,0,.45);
    --ring:0 0 0 4px rgba(127,179,255,.18);
    color-scheme: dark;
  }
}

/* ========== Base ========== */
html{scroll-behavior:smooth}
body{
  font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.65;
  max-width:1200px;
  margin:0 auto;
  padding:1rem;
  -webkit-text-size-adjust:100%;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none;text-underline-offset:3px}
a:hover{text-decoration:underline}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.container{width:min(1200px,100%);margin-inline:auto}
.muted{color:var(--muted)}
.hide{display:none!important}
/* JISTOTA: prvky s atributem hidden jsou vždy schované */
[hidden]{display:none !important}

/* ========== Header (moderní hero) ========== */
header{
  position:relative;
  background:linear-gradient(135deg,var(--primary),#0b3f7a);
  color:#fff;
  padding:2.6rem 1.2rem;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
}
header::after{
  content:"";position:absolute;inset:-20% -10% auto auto;height:180px;width:420px;
  background:radial-gradient(closest-side, rgba(255,255,255,.18), transparent 60%);
  transform:rotate(12deg);
}
header h1{font-size:2.15rem;letter-spacing:.2px}
header p{opacity:.9;margin-top:.35rem}

/* ========== Nav (jemný underline indikátor) ========== */
nav{
  display:flex;flex-wrap:wrap;gap:.25rem .5rem;
  background:var(--surface);
  padding:.5rem .6rem;
  margin:.9rem 0 1.3rem;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
nav a{
  position:relative;display:inline-block;padding:.65rem .85rem;
  border-radius:9px;color:var(--text);transition: background var(--t), color var(--t);
}
nav a::after{
  content:"";position:absolute;left:.9rem;right:.9rem;bottom:.45rem;height:2px;
  background:currentColor;opacity:0;transform:scaleX(.4);transform-origin:left;
  transition:transform var(--t),opacity var(--t);
}
nav a:hover{background:color-mix(in srgb, var(--primary) 12%, transparent);color:#fff}
nav a:hover::after{opacity:1;transform:scaleX(1)}
nav a.active, nav a[aria-current="page"]{background:var(--primary);color:#fff}
@media (max-width:780px){ nav{justify-content:center} }

/* ========== Cards (sekce) ========== */
section{
  background:var(--surface);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:2rem;
  margin-bottom:1.6rem;
}
section h2{
  color:var(--primary);font-size:1.75rem;margin:0 0 .85rem
}

/* ========== Grid utility (pro reference apod.) ========== */
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
@media (max-width:900px){ .grid-3{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .grid-2,.grid-3{grid-template-columns:1fr} }

/* ========== Buttons & badges ========== */
.btn, button[type="submit"], input[type="submit"]{
  display:inline-block;background:var(--accent);color:#fff;border:0;
  padding:.7rem 1.15rem;border-radius:12px;font-weight:600;cursor:pointer;
  transition:transform var(--t), box-shadow var(--t), filter var(--t);
  box-shadow:0 12px 24px rgba(255,106,0,.22);
}
.btn:hover, button[type="submit"]:hover, input[type="submit"]:hover{
  filter:brightness(.98)
}
.btn:active, button[type="submit"]:active, input[type="submit"]:active{
  transform:translateY(1px)
}
.btn-outline{
  background:transparent;color:var(--primary);border:2px solid currentColor;box-shadow:none
}
.btn-outline:hover{background:color-mix(in srgb, var(--primary) 12%, transparent);color:#fff}
.btn-ghost{background:transparent;color:var(--text);box-shadow:none}
.badge{
  display:inline-block;padding:.25rem .5rem;border-radius:999px;
  background:color-mix(in srgb, var(--primary) 12%, transparent);
  color:var(--primary);font-size:.82rem
}

/* ========== Forms (sjednocené) ========== */
form{width:100%}
form label{display:block;margin:.65rem 0 .3rem;color:var(--text)}
form input,form textarea,form select{
  width:100%;padding:.75rem .85rem;border:1px solid color-mix(in srgb, var(--text-2) 22%, transparent);
  border-radius:12px;font:inherit;background:var(--surface);
  transition:border-color var(--t), box-shadow var(--t), background var(--t);
}
form input:focus,form textarea:focus,form select:focus{
  border-color:color-mix(in srgb, var(--primary) 55%, transparent);
  box-shadow:var(--ring)
}
form small{color:var(--muted)}
.notice{padding:.9rem 1rem;border-radius:12px;margin:1rem 0;display:none}
/* DŮLEŽITÉ: Zrušeno display:block u .notice.ok/.err, ať se neukazují samy od sebe */
.notice.ok{background:color-mix(in srgb,#22c55e 18%, var(--surface));border:1px solid #9ae6b4;color:#064e3b}
.notice.err{background:color-mix(in srgb,#ef4444 14%, var(--surface));border:1px solid #fecaca;color:#7f1d1d}
/* Pokud bys chtěl místo atributu hidden používat třídu: */
.notice.show{display:block}

/* ========== FAQ Accordion (ikonky z proužků, bez znaků) ========== */
.accordion{
  position:relative;display:block;width:100%;text-align:left;cursor:pointer;
  background:color-mix(in srgb,var(--surface) 85%, transparent);
  border:1px solid color-mix(in srgb, var(--text-2) 18%, transparent);
  border-radius:12px;font-weight:600;line-height:1.4;
  padding:1rem 2.6rem 1rem 1rem;transition: background var(--t), border-color var(--t), box-shadow var(--t)
}
.accordion:hover{background:var(--surface)}
.accordion.expanded{
  background:var(--surface);border-color:var(--accent);
  border-bottom-left-radius:0;border-bottom-right-radius:0
}
.accordion::before,.accordion::after{
  content:"";position:absolute;right:1rem;top:50%;background:currentColor;transform:translateY(-50%);border-radius:2px
}
.accordion::before{width:16px;height:2px}  /* minus */
.accordion::after{width:2px;height:16px;transition:opacity var(--t)} /* plus */
.accordion.expanded::after{opacity:0}
.panel{
  overflow:hidden;max-height:0;border:1px solid color-mix(in srgb, var(--text-2) 14%, transparent);
  border-top:0;border-radius:0 0 12px 12px;background:var(--surface);
  padding:0 1rem;transition:max-height var(--t), padding var(--t);color:var(--text-2)
}
.panel.show{padding:.9rem 1rem 1.1rem}
.panel p{margin:.25rem 0 1rem;line-height:1.7}
.panel p:last-child{margin-bottom:0}

/* ========== Tables (pokud někde máš) ========== */
table{width:100%;border-collapse:separate;border-spacing:0;background:var(--surface);border-radius:12px;overflow:hidden;box-shadow:var(--shadow)}
th,td{padding:.85rem .9rem;border-bottom:1px solid color-mix(in srgb,var(--text-2) 14%, transparent)}
thead th{background:color-mix(in srgb,var(--primary) 12%, transparent);color:var(--text)}
tbody tr:hover{background:color-mix(in srgb,var(--primary) 7%, transparent)}

/* ========== Footer ========== */
footer{text-align:center;color:var(--muted);padding:1.8rem .8rem 2.2rem}

/* ========== Helpers ========== */
@media (max-width:520px){
  header h1{font-size:1.85rem}
  section{padding:1.3rem}
  .accordion{padding:1rem 2.2rem 1rem .95rem}
}
@media (prefers-reduced-motion: reduce){
  *{transition:none!important;animation:none!important}
}