/* ═══════════════════════════════════════════
   BASE – Variables, Reset, Utilities
   ═══════════════════════════════════════════ */

/* A változók (szín, betű, árnyék, lekerekítés) a tokens.css-ben vannak —
   a bejelentkezési oldal is onnan veszi őket, a base.css nélkül. */

/* ─── RESET ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
body {
    font-family: var(--font);
    color: var(--text);
    background: var(--bg);
    line-height: 1.6;
    overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
img { max-width: 100%; height: auto; display: block; }
ul { list-style: none; }
select { font-family: inherit; }
input[type="text"] { font-family: inherit; }

/* ─── UTILITIES ─── */
.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 24px;
}

/* ─── SHARED KEYFRAMES ─── */
@keyframes fadeIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }
@keyframes cardIn {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes dropIn {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════════════════════════
   IKONOK — alapméret
   Az Elszivo_Icons által kiadott SVG-ken nincs width/height attribútum
   (a demó inline attribútumokat használt). Méret nélkül az SVG a szülő
   teljes szélességét kitöltené, ezért itt van egy biztonságos alapérték.
   A konkrét helyek (mega menü, kiemelt adatok) felülírják.
   ═══════════════════════════════════════════ */
.elszivo-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════
   ÜRES ÁLLAPOT
   Itt van, nem a products.css-ben: a termék listaoldal és a bloglista
   is ugyanezt használja, de a blog nem tölti be a termék modult.
   ═══════════════════════════════════════════ */
.empty-state {
    text-align: center;
    padding: 80px 40px;
    background: var(--bg-card);
    border-radius: var(--radius-md);
    border: 2px dashed var(--border);
}
.empty-state h2,
.empty-state h3 {
    font-family: var(--font-heading);
    margin: 16px 0 8px;
    font-size: 20px;
    font-weight: 700;
    color: var(--dark);
}
.empty-state p {
    color: var(--text-muted);
    font-size: 14px;
    margin-bottom: 20px;
}
.empty-state a { color: var(--primary); }
.empty-state .btn-primary { display: inline-flex; flex: none; }

/* ═══════════════════════════════════════════
   LAPOZÓ
   A demóban nem volt lapozás, ezért ez a téma saját eleme —
   a meglévő tokenekből építve, hogy illeszkedjen a többihez.
   ═══════════════════════════════════════════ */
.pagination {
    display: flex;
    justify-content: center;   /* középen, a lista alatt */
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 40px;
    padding-top: 32px;
    border-top: 1px solid var(--border-light);
}
.pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-card);
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: var(--transition);
}
.pagination a.page-numbers:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--primary-light);
}
.pagination .page-numbers.current {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}
/* A „…" nem kattintható, ezért ne is nézzen ki gombnak. */
.pagination .page-numbers.dots {
    border-color: transparent;
    background: transparent;
    min-width: 24px;
    padding: 0 4px;
    color: var(--text-muted);
}
/* Az Előző/Következő szélesebb, mert szöveget tartalmaz. */
.pagination .prev,
.pagination .next {
    padding: 0 16px;
    font-weight: 500;
}
.pagination a.page-numbers:focus-visible {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-10);
}
/*
 * A `the_posts_pagination()` egy <nav class="navigation pagination"> elemet ad,
 * benne egy <div class="nav-links"> csomagolóval — a lapozó gombok azon belül
 * vannak, ezért a flex-elrendezést oda is le kell vinni.
 */
.navigation.pagination .nav-links {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    width: 100%;
}
.navigation.pagination .screen-reader-text { display: none; }

/*
 * Csak képernyőolvasónak szóló szöveg (a WordPress szabványos osztálya).
 * Eddig a WP blokk-könyvtár vagy az Elementor CSS-e adta — attól függően, melyik
 * töltődött be az oldalon. Ha valamelyiket kikapcsolják, a „tovább a tartalomra"
 * link és a keresőmezők címkéje látható szövegként jelent volna meg.
 */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important;
}
/* A „tovább a tartalomra" link billentyűzetes fókuszra megjelenik. */
.screen-reader-text:focus {
    clip: auto !important;
    clip-path: none;
    height: auto;
    width: auto;
    margin: 0;
    top: 8px;
    left: 8px;
    z-index: 100000;
    display: block;
    padding: 12px 20px;
    background: #fff;
    color: var(--dark);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 4px;
    box-shadow: var(--shadow-lg);
}