/* ─────────────────────────────────────────
   DobryPrompt.cz – vlastní CSS (doplněk k Tailwindu)
───────────────────────────────────────── */

:root {
  --color-bg:         #F5F2EE;
  --color-bg-card:    #FFFFFF;
  --color-surface:    #EDE9E3;
  --color-text:       #1A1A2E;
  --color-text-muted: #6B6B80;
  --color-accent:     #5C3D8F;
  --color-accent-2:   #E8703A;
  --color-border:     #D5D0C8;
  --color-prompt-bg:  #1A1A2E;
}

/* Fonty */
body         { font-family: 'Lora', Georgia, serif; }
h1,h2,h3,h4,
nav, button,
.font-sans   { font-family: 'Plus Jakarta Sans', sans-serif; }
pre, code,
.font-mono   { font-family: 'JetBrains Mono', monospace; }

/* Plynulé skrolování + odsazení kotev pod sticky navbarem (h-16 = 64px) */
html { scroll-behavior: smooth; }
:target,
[id] { scroll-margin-top: 88px; }

/* Scrollbar jemný */
::-webkit-scrollbar       { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--color-surface); }
::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-text-muted); }

/* Mobilní menu */
#mobileMenu { transition: max-height .3s ease, opacity .2s ease; }
#mobileMenu.hidden { max-height: 0; opacity: 0; overflow: hidden; }
#mobileMenu:not(.hidden) { max-height: 80vh; opacity: 1; }

/* Navbar scroll shadow */
.navbar { transition: box-shadow .2s; }
.navbar.scrolled { box-shadow: 0 4px 16px rgba(26,26,46,.09); }

/* Aktivní nav link */
.nav-link.active {
  color: var(--color-accent) !important;
  background: rgba(92,61,143,.07) !important;
}

/* Animace fade-up při načtení */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
.animate-fade-up             { animation: fadeUp .45s ease both; }
.animate-fade-up.delay-1     { animation-delay: .07s; }
.animate-fade-up.delay-2     { animation-delay: .14s; }
.animate-fade-up.delay-3     { animation-delay: .21s; }
.animate-fade-up.delay-4     { animation-delay: .28s; }

/* Prompt blok – zvýraznění placeholderů v [] */
.prompt-placeholder {
  background: rgba(232,112,58,.15);
  color: #B8470F;
  border-radius: 4px;
  padding: 1px 5px;
  font-weight: 600;
}

/* Flash zprávy */
.flash-success { background:#f0fdf4; color:#166534; border:1px solid #bbf7d0; }
.flash-error   { background:#fef2f2; color:#991b1b; border:1px solid #fecaca; }

/* Tabulky na statických stránkách */
.prose table  { width:100%; border-collapse:collapse; font-size:14px; margin:20px 0; }
.prose th     { background:var(--color-surface); padding:10px 14px; text-align:left; font-weight:700; border:1px solid var(--color-border); font-family:'Plus Jakarta Sans',sans-serif; }
.prose td     { padding:10px 14px; border:1px solid var(--color-border); color:var(--color-text-muted); }
.prose tr:hover td { background:rgba(245,242,238,.5); }

/* Cookie banner */
#cookieBanner.visible { display: flex !important; }

/* ───── Homepage hero – pozadí ───── */

/* Tečkovaná mřížka s radiálním fade-out (na okrajích zmizí) */
.hero-dots {
  background-image: radial-gradient(circle, #C9C2B6 1px, transparent 1.5px);
  background-size: 26px 26px;
  opacity: .55;
  mask-image: radial-gradient(ellipse 70% 60% at center, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at center, #000 30%, transparent 80%);
}

/* Gradientní orby – ne plné kruhy, ale jemné měkké přechody */
.hero-orb-purple {
  background: radial-gradient(circle at 30% 30%, #C4B5FD 0%, #E5DAF9 35%, transparent 70%);
}
.hero-orb-orange {
  background: radial-gradient(circle at 70% 30%, #FDC299 0%, #FDE2D0 45%, transparent 75%);
}

/* Plovoucí prompt čipy – jemná float animace */
@keyframes heroFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}
.hero-chip { animation: heroFloat 6s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .hero-chip { animation: none; }
}