/* ===================================================================
   Kdovolal.sk — vizuálna identita
   Paleta: atramentová (ink) tmavá báza, jantárový akcent, tlmená teal/red
   Typografia: Fraunces (display) / Inter (telo) / JetBrains Mono (čísla)
   =================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
    --ink:        #12141C;
    --ink-card:   #1A1E29;
    --ink-card-2: #212637;
    --line:       #2B3142;
    --text:       #E7E9EE;
    --text-dim:   #9AA1B2;
    --amber:      #E8A33D;
    --amber-dim:  #7A5A22;
    --teal:       #3FA796;
    --red:        #D9645A;
    --slate:      #8891A5;

    --radius: 10px;
    --font-display: 'Fraunces', Georgia, serif;
    --font-body: 'Inter', -apple-system, sans-serif;
    --font-mono: 'JetBrains Mono', 'Courier New', monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--ink);
    color: var(--text);
    font-family: var(--font-body);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible, input:focus-visible {
    outline: 2px solid var(--amber);
    outline-offset: 2px;
}

.wrap {
    max-width: 760px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ---------- Header ---------- */

.site-header {
    padding: 28px 0 0;
    border-bottom: 1px solid var(--line);
}

.site-header .wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 20px;
}

.logo {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 22px;
    letter-spacing: -0.02em;
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.logo .dot { color: var(--amber); }

.site-nav {
    display: flex;
    gap: 22px;
    font-size: 14px;
    color: var(--text-dim);
}

.site-nav a:hover { color: var(--text); }

/* ---------- Hero + ripple signature ---------- */

.hero {
    position: relative;
    padding: 64px 0 56px;
    text-align: center;
    overflow: hidden;
}

.ripple-field {
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    width: 520px;
    height: 520px;
    pointer-events: none;
    z-index: 0;
}

.ripple-field span {
    position: absolute;
    inset: 0;
    margin: auto;
    border: 1px solid var(--amber-dim);
    border-radius: 50%;
    opacity: 0;
    animation: ripple 4.5s ease-out infinite;
}

.ripple-field span:nth-child(1) { width: 120px; height: 120px; animation-delay: 0s; }
.ripple-field span:nth-child(2) { width: 120px; height: 120px; animation-delay: 1.1s; }
.ripple-field span:nth-child(3) { width: 120px; height: 120px; animation-delay: 2.2s; }
.ripple-field span:nth-child(4) { width: 120px; height: 120px; animation-delay: 3.3s; }

@keyframes ripple {
    0%   { width: 100px; height: 100px; opacity: 0.55; }
    100% { width: 520px; height: 520px; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .ripple-field span { animation: none; display: none; }
}

.hero-inner { position: relative; z-index: 1; }

.eyebrow {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--amber);
    margin-bottom: 14px;
}

.hero h1 {
    font-family: var(--font-display);
    font-size: clamp(30px, 5vw, 44px);
    font-weight: 600;
    line-height: 1.15;
    margin: 0 0 12px;
    letter-spacing: -0.01em;
}

.hero p.sub {
    color: var(--text-dim);
    font-size: 16px;
    margin: 0 0 32px;
}

/* ---------- Search ---------- */

.search-form {
    display: flex;
    gap: 8px;
    max-width: 460px;
    margin: 0 auto;
}

.search-form input[type="text"] {
    flex: 1;
    padding: 15px 18px;
    background: var(--ink-card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--text);
    font-family: var(--font-mono);
    font-size: 16px;
}

.search-form input[type="text"]::placeholder {
    color: var(--slate);
    font-family: var(--font-body);
}

.search-form input[type="text"]:focus {
    border-color: var(--amber-dim);
}

.btn {
    padding: 15px 22px;
    background: var(--amber);
    color: #1A1400;
    border: none;
    border-radius: var(--radius);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    transition: filter 0.15s ease;
}

.btn:hover { filter: brightness(1.08); }

.btn-ghost {
    background: transparent;
    border: 1px solid var(--line);
    color: var(--text);
}

.btn-ghost:hover { border-color: var(--amber-dim); }

.form-hint {
    margin-top: 10px;
    font-size: 13px;
    color: var(--slate);
}

/* ---------- Sections ---------- */

.section {
    padding: 44px 0;
    border-top: 1px solid var(--line);
}

.section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 20px;
}

.section-head h2 {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 600;
    margin: 0;
}

.section-head a {
    font-size: 13px;
    color: var(--slate);
}

.section-head a:hover { color: var(--amber); }

/* ---------- Rating card ---------- */

.rating-card {
    display: block;
    padding: 16px 18px;
    background: var(--ink-card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    margin-bottom: 10px;
    transition: border-color 0.15s ease;
}

.rating-card:hover { border-color: var(--amber-dim); }

.rating-top {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

.tag {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: 100px;
}

.tag-bezpecne { background: rgba(63,167,150,0.15); color: var(--teal); }
.tag-nezname  { background: rgba(136,145,165,0.18); color: var(--slate); }
.tag-otravne  { background: rgba(217,100,90,0.15); color: var(--red); }

.rating-number {
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 15px;
}

.rating-time {
    margin-left: auto;
    font-size: 12px;
    color: var(--slate);
}

.rating-comment {
    color: var(--text-dim);
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* ---------- Chips (posledne hladania) ---------- */

.chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.chip {
    font-family: var(--font-mono);
    font-size: 13px;
    padding: 7px 12px;
    background: var(--ink-card);
    border: 1px solid var(--line);
    border-radius: 100px;
    color: var(--text-dim);
}

.chip:hover { border-color: var(--amber-dim); color: var(--text); }

/* ---------- Number detail page ---------- */

.number-hero {
    padding: 40px 0 28px;
    text-align: center;
}

.number-big {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: clamp(28px, 6vw, 40px);
    letter-spacing: 0.02em;
}

.number-meta {
    margin-top: 10px;
    color: var(--slate);
    font-size: 14px;
}

.verdict-bar {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-top: 22px;
    flex-wrap: wrap;
}

.verdict-pill {
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 100px;
    border: 1px solid var(--line);
    font-size: 13px;
}

.verdict-pill .n {
    font-family: var(--font-mono);
    font-weight: 700;
}

/* ---------- Comment form ---------- */

.comment-form {
    background: var(--ink-card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 22px;
    margin: 28px 0;
}

.comment-form h3 {
    font-family: var(--font-display);
    font-size: 17px;
    margin: 0 0 16px;
}

.radio-group {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.radio-group label {
    flex: 1;
    min-width: 100px;
    text-align: center;
    padding: 11px 8px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.radio-group input { display: none; }

.radio-group label.opt-bezpecne:has(input:checked) { background: rgba(63,167,150,0.15); border-color: var(--teal); color: var(--teal); }
.radio-group label.opt-nezname:has(input:checked)  { background: rgba(136,145,165,0.18); border-color: var(--slate); color: var(--text); }
.radio-group label.opt-otravne:has(input:checked)  { background: rgba(217,100,90,0.15); border-color: var(--red); color: var(--red); }

.field { margin-bottom: 14px; }

.field label.field-label {
    display: block;
    font-size: 13px;
    color: var(--text-dim);
    margin-bottom: 6px;
}

.field input[type="text"],
.field textarea {
    width: 100%;
    padding: 12px 14px;
    background: var(--ink);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 14px;
    resize: vertical;
}

.field textarea { min-height: 90px; }

.field input:focus, .field textarea:focus { border-color: var(--amber-dim); }

/* honeypot - skryte pole proti botom */
.hp-field { position: absolute; left: -9999px; opacity: 0; }

.privacy-note {
    font-size: 12px;
    color: var(--slate);
    margin-top: 10px;
}

/* ---------- Alerts ---------- */

.alert {
    padding: 12px 16px;
    border-radius: var(--radius);
    font-size: 14px;
    margin-bottom: 18px;
}

.alert-error {
    background: rgba(217,100,90,0.12);
    border: 1px solid rgba(217,100,90,0.35);
    color: #F0AFA9;
}

.alert-success {
    background: rgba(63,167,150,0.12);
    border: 1px solid rgba(63,167,150,0.35);
    color: #9FD8CC;
}

/* ---------- Empty state ---------- */

.empty {
    padding: 30px 0;
    text-align: center;
    color: var(--slate);
    font-size: 14px;
}

/* ---------- Footer ---------- */

.site-footer {
    border-top: 1px solid var(--line);
    padding: 30px 0 40px;
    margin-top: 20px;
}

.site-footer .wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
}

.footer-links {
    display: flex;
    gap: 18px;
    font-size: 13px;
    color: var(--slate);
}

.footer-links a:hover { color: var(--text); }

.footer-note {
    font-size: 12px;
    color: var(--slate);
    max-width: 100%;
}

/* ---------- Static page ---------- */

.static-page h1 {
    font-family: var(--font-display);
    font-size: 28px;
    margin-top: 40px;
}

.static-page h2 {
    font-family: var(--font-display);
    font-size: 18px;
    margin-top: 28px;
}

.static-page p, .static-page li {
    color: var(--text-dim);
    font-size: 15px;
}

/* ---------- Štatistické tabuľky (top rebríčky) ---------- */

.stat-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.stat-table th {
    text-align: left;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--slate);
    font-weight: 600;
    padding: 8px 10px;
    border-bottom: 1px solid var(--line);
}

.stat-table td {
    padding: 10px;
    border-bottom: 1px solid var(--line);
}

.stat-table tr:last-child td { border-bottom: none; }

.stat-table td.num {
    font-family: var(--font-mono);
}

.stat-table td.count {
    text-align: right;
    color: var(--text-dim);
    font-family: var(--font-mono);
    white-space: nowrap;
}

.stat-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 16px;
}

.stat-tab {
    padding: 7px 14px;
    border: 1px solid var(--line);
    border-radius: 100px;
    font-size: 13px;
    color: var(--text-dim);
    cursor: pointer;
    background: transparent;
    font-family: var(--font-body);
}

.stat-tab.active {
    border-color: var(--amber-dim);
    color: var(--amber);
    background: rgba(232,163,61,0.08);
}

/* ---------- Admin layout ---------- */

.admin-body {
    background: var(--ink);
}

.admin-header {
    border-bottom: 1px solid var(--line);
    padding: 16px 0;
}

.admin-header .wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.admin-badge {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--amber);
    border: 1px solid var(--amber-dim);
    padding: 2px 8px;
    border-radius: 100px;
    margin-left: 8px;
}

.admin-nav {
    display: flex;
    gap: 18px;
    font-size: 14px;
    color: var(--text-dim);
}

.admin-nav a.active { color: var(--amber); }
.admin-nav a:hover { color: var(--text); }

.admin-wrap {
    max-width: 920px;
    margin: 0 auto;
    padding: 30px 20px 60px;
}

.admin-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
    margin-bottom: 30px;
}

.admin-stat-card {
    background: var(--ink-card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 16px 18px;
}

.admin-stat-card .n {
    font-family: var(--font-mono);
    font-size: 26px;
    font-weight: 700;
    color: var(--amber);
}

.admin-stat-card .l {
    font-size: 13px;
    color: var(--text-dim);
    margin-top: 4px;
}

.mod-card {
    background: var(--ink-card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 16px 18px;
    margin-bottom: 12px;
}

.mod-card .rating-comment { -webkit-line-clamp: unset; color: var(--text); }

.mod-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

.mod-actions form { display: inline; }

.btn-sm {
    padding: 8px 14px;
    font-size: 13px;
    border-radius: 8px;
}

.btn-approve { background: var(--teal); color: #06231F; border: none; font-weight: 600; cursor: pointer; }
.btn-reject  { background: transparent; border: 1px solid var(--red); color: var(--red); cursor: pointer; }
.btn-delete  { background: transparent; border: 1px solid var(--line); color: var(--slate); cursor: pointer; }

.login-box {
    max-width: 360px;
    margin: 100px auto;
    background: var(--ink-card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 30px 26px;
}

.login-box h1 {
    font-family: var(--font-display);
    font-size: 22px;
    margin: 0 0 20px;
    text-align: center;
}

@media (max-width: 520px) {
    .search-form { flex-direction: column; }
    .site-nav { display: none; }
    .admin-nav { font-size: 13px; gap: 12px; }
}