/* ===========================
   Kopca.eu — Responsive Styles
   =========================== */

/* Design tokens */
:root{
  --bg:#f2f2f7; --surface:#ffffffcc; --surface-strong:#fff;
  --text:#1c1c1e; --muted:#555; --border:#e2e2e7;
  --primary:#0a84ff; --primary-strong:#007aff; --focus:#0a84ff;
  --shadow:0 6px 16px rgba(0,0,0,.06);
  --radius-lg:16px; --radius-md:12px; --radius-sm:10px;
  --space:2rem;
  color-scheme: light;
}

/* Dark mode (AUTO) */
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0b0b0d; --surface:#1c1c1ecc; --surface-strong:#1c1c1e;
    --text:#f5f5f7; --muted:#b9b9c0; --border:#2a2a2e;
    --primary:#0a84ff; --primary-strong:#2f8cff;
    --shadow:0 6px 16px rgba(0,0,0,.4);
    color-scheme: dark;
  }
}

/* RUČNÍ přepnutí (přebíjí media query) */
:root[data-theme="light"]{
  --bg:#f2f2f7; --surface:#ffffffcc; --surface-strong:#fff;
  --text:#1c1c1e; --muted:#555; --border:#e2e2e7;
  --primary:#0a84ff; --primary-strong:#007aff;
  --shadow:0 6px 16px rgba(0,0,0,.06);
  color-scheme: light;
}
:root[data-theme="dark"]{
  --bg:#0b0b0d; --surface:#1c1c1ecc; --surface-strong:#1c1c1e;
  --text:#f5f5f7; --muted:#b9b9c0; --border:#2a2a2e;
  --primary:#0a84ff; --primary-strong:#2f8cff;
  --shadow:0 6px 16px rgba(0,0,0,.4);
  color-scheme: dark;
}

/* Reset */
*{ box-sizing:border-box; }
html,body{ height:100%; margin:0; }
body{
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  background:var(--bg); color:var(--text); line-height:1.5;
}

/* Layout */
.wrapper{ display:flex; flex-direction:column; min-height:100vh; }
.main-content{
  padding: clamp(1rem, 2vw, 2rem);
  flex:1;
  max-width: 1200px;
  margin: 0 auto;
}

/* Header */
.header{
  background:var(--surface-strong);
  padding: 1rem clamp(1rem, 2vw, var(--space));
  display:flex; align-items:center; gap:1rem;
  border-bottom:1px solid var(--border); width:100%;
}
.logo{ height:100px; max-width:100%; pointer-events:none; user-select:none; }
@media (max-width: 640px){ .logo{ height:72px; } }

/* Přepínač témat (nenápadný, V JEDNOM ŘÁDKU) */
.theme-toggle{
  margin-left:auto;
  display:flex; align-items:center; gap:.4rem;
  white-space:nowrap;
  font-size:.92rem; color:var(--muted);
  user-select:none;
}
.theme-toggle .theme-link{
  background:none; border:none; padding:.1rem .25rem;
  color:inherit; font:inherit; cursor:pointer;
}
.theme-toggle .theme-link:hover{ text-decoration:underline; color:var(--text); }
.theme-toggle .theme-link.active{
  text-decoration:underline; font-weight:600; color:var(--text);
}
.theme-toggle .theme-sep{ opacity:.5; }

/* Nadpisy */
h1{
  text-align:center;
  font-size: clamp(1.4rem, 1rem + 1.6vw, 2rem);
  font-weight:700;
  margin: clamp(1.2rem, 2vw, 3rem) 0 1rem;
}

/* GRID pro karty */
.container{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: clamp(1rem, 2vw, 2rem);
  align-items: stretch;
  width: 100%;
}

/* Karty */
.card{
  background:var(--surface);
  border-radius:var(--radius-lg);
  padding: 1.5rem clamp(1rem, 2vw, 2rem);
  box-shadow:var(--shadow);
  border:1px solid var(--border);
  display:flex; flex-direction:column;
  text-align:center;
  transition: transform .2s ease, box-shadow .2s ease;
  min-height: 220px;
}
.card:hover{ transform: translateY(-3px); box-shadow:0 10px 24px rgba(0,0,0,.08); }

/* Velká karta (password generator) */
.full-width{
  grid-column: 1 / -1;
  max-width: 900px;
  width: 100%;
  margin-inline: auto;
}

/* Obsah v kartách */
.title{ font-size:1.1rem; font-weight:700; margin-bottom:.5rem; }
.description{
  font-size:.98rem; color:var(--muted); margin-bottom:1rem;
  word-wrap: break-word; overflow-wrap:anywhere;
}
code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  font-size:.95em; background:rgba(0,0,0,.06);
  border-radius:.5rem; padding:0 .35rem;
}
@media (prefers-color-scheme: dark){ code{ background:rgba(255,255,255,.06); } }

/* ===== Details blok (Instructions/Fingerprint) ===== */
.fp{
  font-size:.9rem;
  color:var(--muted);
  text-align:left;
  margin-top:auto;
  margin-bottom:.9rem;
}
.fp summary{
  cursor:pointer; list-style:none; user-select:none;
  font-weight:600;
  margin-bottom:.35rem;
}
.fp summary::-webkit-details-marker{ display:none; }
.fp summary::after{
  content:"›"; display:inline-block; margin-left:6px;
  transform:rotate(90deg); transition:transform .15s ease; opacity:.6;
}
.fp[open] summary::after{ transform:rotate(270deg); }
.fp code{
  display:block; margin-top:.5rem; word-break:break-word;
  background:rgba(0,0,0,.06); padding:.45rem .55rem; border-radius:.5rem;
}
@media (prefers-color-scheme: dark){
  .fp code{ background:rgba(255,255,255,.06); }
}

/* Copy button */
.fp .copy{
  display:inline-block;
  margin-top:.6rem;
  margin-bottom:.8rem;
  padding:.45rem .8rem;
  font-size:.85rem;
  border-radius:var(--radius-sm);
  background:var(--primary-strong);
  color:#fff; border:none; cursor:pointer;
  transition: background .2s ease, transform .02s ease;
  width:auto;
}
.fp .copy:hover{ background:var(--primary); }
.fp .copy:active{ transform: translateY(1px); }
.fp .copy:focus-visible{
  outline:3px solid color-mix(in srgb, var(--focus) 70%, transparent);
  outline-offset:2px;
}

/* Tlačítka */
.button, button{
  display:inline-block; width:100%; text-align:center;
  background:var(--primary-strong); color:#fff;
  padding:.7rem 1.2rem; border-radius:var(--radius-sm);
  text-decoration:none; font-weight:600; font-size:.95rem;
  border:none; cursor:pointer; user-select:none;
  transition: background .2s ease, transform .02s ease;
  margin-top:1rem;
}
.button:hover, button:hover{ background:var(--primary); }
.button:active, button:active{ transform: translateY(1px); }
.button:focus-visible, button:focus-visible{
  outline:3px solid color-mix(in srgb, var(--focus) 70%, transparent);
  outline-offset:2px;
}

/* Tlačítko na dně karty */
.card .push-bottom{ margin-top:auto; }

/* Form prvky (password generator) */
input[type="number"]{
  width:100%; padding:.6rem .8rem; border:1px solid var(--border);
  border-radius:var(--radius-md); font-size:1rem;
  background:var(--surface-strong); color:var(--text);
  outline:none; transition:border-color .2s ease, box-shadow .2s ease;
  margin-bottom:1rem;
}
input[type="number"]:focus{
  border-color:var(--focus);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--focus) 15%, transparent);
}
.result{
  margin-top:1rem; word-break:break-word; font-size:1.1rem; text-align:center;
  background:rgba(0,0,0,.06); padding:.6rem .8rem; border-radius:var(--radius-md);
}
@media (prefers-color-scheme: dark){ .result{ background:rgba(255,255,255,.06); } }

/* Footer */
.footer{
  margin-top:auto; text-align:center; font-size:.9rem; color:var(--muted);
  padding:1rem 0 2rem; border-top:1px solid var(--border);
  display:flex; justify-content:center; gap:.5rem; flex-wrap:wrap;
}
.footer a{ color:inherit; text-decoration:none; }
.footer a:hover{ text-decoration:underline; }

/* Breakpointy */
@media (max-width: 1100px){
  .container{ grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
}
@media (max-width: 880px){
  .container{ grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
}
@media (max-width: 640px){
  .container{ grid-template-columns: 1fr; }
  h1{ margin: 1.5rem 0 1rem; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ animation:none!important; transition:none!important; }
}