/*
 * Verejné stránky: úvodná stránka, konto a dokumenty.
 *
 * Používa tie isté tokeny ako administrácia (tokens.css) a jej komponenty (app.css) — karty,
 * tlačidlá a formuláre sú rovnaké. Tu je len to, čo administrácia nemá: široké pásy sekcií,
 * veľký nadpis, cenník a lišta cookies.
 */

.public { background: var(--bg); color: var(--text); }

.public-wrap { width: min(72rem, 100% - 2 * var(--space-5)); margin-inline: auto; }

/* ---------- hlavička a päta ---------- */

.public-head { position: sticky; top: 0; z-index: 20; border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(8px); }
.public-head-inner { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; justify-content: space-between; padding-block: var(--space-4); }
.public-brand { display: inline-flex; gap: var(--space-3); align-items: center; font-weight: 600; color: var(--text); text-decoration: none; }
.public-nav { display: flex; flex-wrap: wrap; gap: var(--space-5); align-items: center; font-size: var(--text-sm); }
.public-nav a { color: var(--text-muted); text-decoration: none; }
.public-nav a:hover { color: var(--text); }
.public-nav .btn-primary { color: var(--on-accent); }
.public-nav .btn-secondary { color: var(--text); }

.public-foot { margin-top: var(--space-16); border-top: 1px solid var(--border); padding-block: var(--space-6); color: var(--text-subtle); font-size: var(--text-sm); }
.public-foot-inner { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; justify-content: space-between; }
.public-foot nav { display: flex; flex-wrap: wrap; gap: var(--space-5); }
.public-foot a { color: var(--text-muted); text-decoration: none; }
.public-foot a:hover { color: var(--text); }

.public-flash { padding-top: var(--space-5); }

/* ---------- úvodný pás ---------- */

.hero { position: relative; padding-block: var(--space-16) var(--space-12); overflow: hidden; }
/* Zelená žiara za nadpisom — tá istá, aká svieti pod chatom asistenta. */
.hero::before {
    content: ""; position: absolute; z-index: 0; left: 50%; top: -12rem; width: min(64rem, 120%); height: 40rem;
    transform: translateX(-50%); pointer-events: none;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 16%, transparent), transparent);
}
.hero > * { position: relative; z-index: 1; }
.hero h1 { max-width: 20ch; margin: 0 0 var(--space-5); font-size: clamp(2.25rem, 6vw, 3.75rem); line-height: 1.05; letter-spacing: -0.02em; }
.hero-lead { max-width: 60ch; margin: 0 0 var(--space-6); color: var(--text-muted); font-size: var(--text-lg); }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }

/* Úvod v strede: logo nad nadpisom, pod ním text a tlačidlá. Body pod úvodom ostávajú v mriežke. */
.hero-intro { display: flex; flex-direction: column; align-items: center; text-align: center; }
.hero-intro h1, .hero-intro .hero-lead { margin-inline: auto; }
.hero-intro .hero-actions { justify-content: center; }
/* Celá šírka a stred cez flex: pri zmrštenom odseku by sa percentá max-width počítali z neho a logo by uhlo. */
.hero-logo { display: flex; justify-content: center; align-self: stretch; margin: 0 0 var(--space-8); }
/* Široké logo najviac 96 px vysoké a v šírke stránky; pomer strán ostáva (width/height v img). */
.hero-logo img { display: block; height: auto; }
.hero-logo img:not([data-sized]) { width: auto; max-width: min(20rem, 100%); max-height: var(--space-24); }
/* Šírka nastavená v Nastaveniach: platí atribút width — žiadne CSS width, to by ho prebilo. Výška
   z pomeru strán; na úzkom displeji sa logo zmenší na šírku stránky. */
.hero-logo img[data-sized] { max-width: 100%; }
.hero-logo .hero-logo-icon { width: var(--space-20); height: var(--space-20); border-radius: var(--radius-2xl); object-fit: contain; }
.hero-logo-mark { width: var(--space-20); height: var(--space-20); border-radius: var(--radius-2xl); font-size: var(--text-2xl); }
.hero-note { margin-top: var(--space-4); color: var(--text-subtle); font-size: var(--text-sm); }

.hero-points { display: grid; gap: var(--space-4); margin-top: var(--space-10); grid-template-columns: 1fr; }
@media (min-width: 48rem) { .hero-points { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.hero-point { padding: var(--space-5); border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--surface); }
.hero-point h2 { margin: 0 0 var(--space-2); font-size: var(--text-base); }
.hero-point p { margin: 0; color: var(--text-muted); font-size: var(--text-sm); }

/* ---------- sekcie ---------- */

.section { padding-block: var(--space-12); }
.section-head { max-width: 60ch; margin-bottom: var(--space-8); }
.section-head h2 { margin: 0 0 var(--space-3); font-size: clamp(1.5rem, 3vw, 2rem); }
.section-head p { margin: 0; color: var(--text-muted); }

/* Kroky registrácie: číslo, nadpis, veta. Zámerne len tri — dlhší návod nikto nečíta. */
.steps { display: grid; gap: var(--space-5); grid-template-columns: 1fr; counter-reset: step; }
@media (min-width: 48rem) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.step { padding: var(--space-5); border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--surface); }
.step::before {
    counter-increment: step; content: counter(step);
    display: inline-flex; align-items: center; justify-content: center; width: var(--space-8); height: var(--space-8);
    margin-bottom: var(--space-3); border-radius: var(--radius-full); background: var(--accent); color: var(--on-accent); font-weight: 600;
}
.step h3 { margin: 0 0 var(--space-2); font-size: var(--text-base); }
.step p { margin: 0; color: var(--text-muted); font-size: var(--text-sm); }

/* ---------- cenník ---------- */

.pricing { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); align-items: start; }
.price-card { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-6); border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--surface); }
.price-card.is-recommended { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.price-card h3 { margin: 0; font-size: var(--text-lg); }
.price-card .price { font-size: var(--text-3xl); font-weight: 600; line-height: 1.1; }
.price-card .price span { color: var(--text-subtle); font-size: var(--text-sm); font-weight: 400; }
.price-card .desc { margin: 0; color: var(--text-muted); font-size: var(--text-sm); }
.price-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); font-size: var(--text-sm); }
.price-list li { display: flex; gap: var(--space-2); align-items: baseline; justify-content: space-between; }
.price-list dt, .price-list .key { color: var(--text-muted); }
/* Bežiaca tarifa je stlmená: nie je to ponuka, len pripomenutie, čo zákazník má. */
.price-card.is-current { border-style: dashed; background: var(--surface-muted); }
.price-card .price-note { margin: 0; color: var(--text-muted); font-size: var(--text-sm); }
.price-card .btn { margin-top: auto; }

/* Krátky formulár do riadka (zľavový kód); pod 30rem sa zloží pod seba. */
.form-inline { display: flex; gap: var(--space-3); align-items: flex-end; flex-wrap: wrap; }
.form-inline .field { flex: 1 1 12rem; margin: 0; }
.form-inline .btn { flex: 0 0 auto; }

/* ---------- spotreba ---------- */

.meters { display: grid; gap: var(--space-5); }
/* Riadok merača (popis + hodnota + pásik). Vlastný názov, nie .meter — ten patrí jednoduchému pásiku v administrácii a prepísal by popisky na zelené bloky. */
.meter-row { display: block; }
.meter-head { display: flex; gap: var(--space-3); align-items: baseline; justify-content: space-between; margin: 0 0 var(--space-2); }
.meter-label { font-weight: 500; }
.meter-value { color: var(--text-muted); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.meter-track { height: var(--space-2); border-radius: var(--radius-full); background: var(--surface-muted); overflow: hidden; }
.meter-fill { height: 100%; border-radius: var(--radius-full); background: var(--accent); transition: width var(--duration) var(--ease-out); }
.meter-fill.is-high { background: var(--warning-text); }
.meter-unlimited { margin: 0; color: var(--text-muted); font-size: var(--text-sm); }
.meter-row .hint { margin-top: var(--space-1); }

/* ---------- verejné dokumenty ---------- */

/* Dlhý právny text: väčšie písmo než v administrácii a nadpisy oddelené vzduchom, aby sa dal čítať. */
.prose-document { max-width: 68ch; }
.prose-document p, .prose-document li { color: var(--text-muted); font-size: var(--text-base); line-height: var(--leading-relaxed); }
.prose-document h3 { margin-top: var(--space-8); font-size: var(--text-lg); color: var(--text); }
.prose-document h4 { margin-top: var(--space-6); font-size: var(--text-base); color: var(--text); }
.prose-document > h3:first-child, .prose-document > h4:first-child { margin-top: 0; }
.prose-document .doc-updated { margin-top: var(--space-8); color: var(--text-subtle); font-size: var(--text-sm); }

/* ---------- cookies ---------- */

.cookie-bar { position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; border-top: 1px solid var(--border-strong); background: var(--surface); box-shadow: var(--shadow-lg); }
.cookie-bar-inner { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; justify-content: space-between; padding-block: var(--space-4); }
.cookie-bar h2 { margin: 0 0 var(--space-1); font-size: var(--text-base); }
.cookie-bar p { margin: 0; max-width: 70ch; color: var(--text-muted); font-size: var(--text-sm); }
.cookie-bar-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
/* Lišta prekrýva spodok stránky, preto sa obsahu pridá miesto, kým je vidieť. */
.has-cookie-bar .public-foot { padding-bottom: var(--space-16); }

.cookie-badge {
    position: fixed; z-index: 30; left: var(--space-4); bottom: var(--space-4);
    width: var(--space-12); height: var(--space-12); padding: 0;
    border: 1px solid var(--border-strong); border-radius: var(--radius-full);
    background: var(--surface); color: var(--text); font-size: var(--text-lg); line-height: 1; cursor: pointer;
}
.cookie-badge:hover { border-color: var(--accent); }
.cookie-badge:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }