/**
 * Základná typografia a layout, spoločné pre eshop aj portál.
 * Sekciové štýly patria do eshop.css a portal.css.
 */

body {
    font-family: var(--tk-font);
    font-size: var(--tk-fs-body);
    font-weight: var(--tk-fw-body);
    color: var(--tk-text-body);
    background: var(--tk-bg);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    color: var(--tk-text);
    font-weight: var(--tk-fw-black);
    letter-spacing: -.02em;
    line-height: 1.15;
}

h1 { font-size: var(--tk-fs-h1); }
h2 { font-size: var(--tk-fs-h2); }
h3 { font-size: var(--tk-fs-h3); font-weight: var(--tk-fw-bold); }

/* Eyebrow a labely — 800, verzálky, výrazný prestrk. */
.tk-label,
.tk-eyebrow {
    font-size: var(--tk-fs-label);
    font-weight: var(--tk-fw-heavy);
    letter-spacing: var(--tk-ls-label);
    text-transform: uppercase;
    color: var(--tk-text-faint);
}

.tk-wrap {
    width: 100%;
    max-width: var(--tk-max);
    margin-inline: auto;
    padding-inline: 32px;
}

.tk-wrap--narrow { max-width: var(--tk-max-narrow); }

.tk-section { padding-block: var(--tk-section-y); }
.tk-section--alt { background: var(--tk-bg-alt); }

/* --- Tlačidlá --- */
.tk-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 0;
    border-radius: var(--tk-r-button);
    padding: 14px 22px;
    font-family: inherit;
    font-size: 14px;
    font-weight: var(--tk-fw-bold);
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
    transition: background-color .15s ease, transform .15s ease, box-shadow .15s ease;
}

.tk-btn--primary {
    background: var(--tk-indigo);
    color: #fff;
    box-shadow: var(--tk-shadow-cta);
}

.tk-btn--primary:hover { background: var(--tk-indigo-hover); }

/* Viditeľný fokus pre klávesnicu na svetlom aj tmavom podklade. */
.tk-btn:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

.tk-btn--ghost {
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .28);
}

.tk-btn:disabled,
.tk-btn[aria-disabled="true"] {
    background: var(--tk-border-muted);
    box-shadow: none;
    cursor: not-allowed;
}

/* --- Karty --- */
.tk-card {
    background: var(--tk-bg);
    border: 1px solid var(--tk-border);
    border-radius: var(--tk-r-card);
    transition: box-shadow .18s ease, transform .18s ease;
}

.tk-card:hover {
    box-shadow: var(--tk-shadow-lift);
}

/* --- Pilulky a odznaky --- */
.tk-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: var(--tk-r-pill);
    padding: 6px 14px;
    font-size: var(--tk-fs-small);
    font-weight: var(--tk-fw-semi);
}

/* Zelená patrí ľudským kliknutiam naprieč celou aplikáciou. */
.tk-pill--human {
    background: var(--tk-green-bg);
    color: var(--tk-green);
}

/* --- Formuláre --- */
.tk-input,
.tk-select,
.tk-textarea {
    width: 100%;
    border: 1px solid var(--tk-border-strong);
    border-radius: var(--tk-r-input);
    padding: 13px 15px;
    font-family: inherit;
    font-size: 14px;
    color: var(--tk-text);
    background: var(--tk-bg);
}

.tk-input:focus,
.tk-select:focus,
.tk-textarea:focus {
    outline: 2px solid var(--tk-indigo);
    outline-offset: -1px;
    border-color: var(--tk-indigo);
}

/* Kód tabuľky monospace — znaky ako 0/O a 1/l sa tak prepisujú bez omylov. */
.tk-input--code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: .08em;
    /* Zámerne BEZ text-transform: cesty v Short.io rozlišujú veľkosť písmen
       (f43XjD nie je to isté ako F43XJD) a veľké písmená by kód zneplatnili. */
}

/*
 * Popisky polí. Dizajn používa nad vstupmi krátky verzálkový popisok,
 * ktorý sa opakuje v eshope, v účte aj vo všetkých sekciách portálu.
 */
.tk-field-label {
    display: block;
    font-size: 11px;
    font-weight: var(--tk-fw-heavy);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--tk-text-faint);
    margin-bottom: 8px;
}

/*
 * Dizajn používa iba placeholdery bez viditeľných popiskov. Popisky ale
 * v kóde ostávajú kvôli čítačkám obrazovky — len ich vizuálne skryjeme.
 */
.tk-form__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

/*
 * Odosielacie tlačidlo formulára. Bolo v eshop.css, ale používa ho deväť
 * šablón portálu — a ten eshopové štýly nenačítava, takže tam tlačidlá
 * strácali odsadenie aj veľkosť písma.
 */
.tk-form__submit {
    margin-top: 6px;
    padding: 16px;
    font-size: 14px;
}

/*
 * Vysvetlivka pod poľom. Bola v portal-menu.css, ktorý sa načíta len na
 * ponukovom lístku — v SMS kampani teda zostávala bez štýlu.
 */
.tk-field-hint { margin: 4px 0 0; font-size: 12px; color: var(--tk-muted, #64748B); }

/* --- Hlásenia --- */
/*
 * Musia byť v base.css, nie v eshop.css. Portál eshopové štýly nenačítava
 * a hlásenia v ňom používa osem sekcií — bez týchto pravidiel by z nich
 * zostal holý farebný text bez rámu a bez odsadenia. Rovnaká chyba už raz
 * bola v prihlasovacej zóne, tak ju nedržíme na troch miestach.
 */
.tk-notice {
    border-radius: var(--tk-r-input);
    padding: 14px 16px;
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 16px;
}

.tk-notice--success {
    background: var(--tk-green-bg);
    color: var(--tk-green);
}

.tk-notice--error {
    background: #FEF2F2;
    color: var(--tk-danger);
}

.tk-notice--info {
    background: var(--tk-indigo-tint);
    color: var(--tk-indigo);
}

/* --- Responzívne --- */
@media (max-width: 980px) {
    .tk-wrap { padding-inline: 24px; }
}

@media (max-width: 640px) {
    .tk-wrap { padding-inline: 18px; }
    .tk-section { padding-block: 52px; }
}

/* Dotykové ciele musia mať aspoň 44 px, viď handoff (krokovače množstva). */
@media (max-width: 640px) {
    .tk-btn { min-height: 44px; }
}

/* Nadpis stránky tam, kde ho šablóna vypisuje sama (viď tabky_hide_page_title). */
.tk-no-page-title .entry-title,
.tk-no-page-title .ast-archive-title,
.tk-no-page-title .page-title {
    display: none;
}

/* ------------------------------------------------------------------ */
/*  Preskočiť na obsah                                                 */
/* ------------------------------------------------------------------ */

.tk-skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    padding: 12px 18px;
    background: var(--tk-indigo);
    color: #fff;
    font-weight: var(--tk-fw-bold);
    border-radius: 0 0 var(--tk-r-input) 0;
}

.tk-skip-link:focus {
    left: 0;
}

/* Musí byť v base.css, nie v eshop.css — portál eshopové štýly nenačítava
   a nezaštýlovaný odkaz by na ňom trčal navrchu stránky. */