/*
Theme Name:  Tudománytörténet
Author:      Digital Footprint
Description: Egyedi blog theme – tudomanytortenet.hu
Version:     1.0.0
License:     Proprietary
Text Domain: tudomanytortenet
*/

/* =============================================
   CSS Custom Properties
   ============================================= */
:root {
    --white:   #fafafa;
    --black:   #0d0d0d;
    --yellow:  #ede8de;
    --border:  #0d0d0d1a;
    --muted:   #0d0d0d99;
    --transparent: #0d0d0d00;
    --primary: #0d0d0d;  /* GDPR plugin brand-szín */
}

/* =============================================
   Reset & Base
   ============================================= */
*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
    background-color: var(--white);
    color: var(--black);
    font-family: 'Space Grotesk', sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.14px;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-family: 'Space Mono', monospace;
    font-weight: 400;
    text-transform: uppercase;
    line-height: 1;
}

h1 { font-size: 72px; letter-spacing: -2.88px; }
h2 { font-size: 48px; letter-spacing: -1.92px; }
h3 { font-size: 40px; letter-spacing: -1.6px; }

p { margin: 0; }

a {
    color: var(--black);
    text-decoration: none;
}

img {
    max-width: 100%;
    display: block;
    user-select: none;
}

/* =============================================
   Container
   ============================================= */
.tdt-container {
    width: 100%;
    max-width: 1496px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 24px;
    padding-right: 24px;
}

/* =============================================
   HERO
   ============================================= */
.tdt-hero {
    background-color: var(--yellow);
    border-top: 2px solid var(--black);
    padding-top: 16px;
    padding-bottom: 16px;
}

.tdt-hero-inner {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 24px;
}

.tdt-hero-name {
    font-family: 'Space Mono', monospace;
    font-size: 20px;
    font-weight: 400;
    letter-spacing: -0.4px;
    text-transform: uppercase;
    line-height: 1;
    color: var(--black);
}

.tdt-hero-desc {
    max-width: 480px;
    padding-left: 12px;
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 500;
    color: var(--black);
}

/* =============================================
   CATEGORY NAVIGATION (sticky tabs)
   ============================================= */
.cat-nav {
    background-color: var(--black);
    position: sticky;
    top: 0;
    z-index: 100;
    padding-top: 20px;
    padding-bottom: 20px;
}

.cat-nav-scroll-wrap {
    position: relative;
}

.cat-nav-inner {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-right: 64px;
    scrollbar-width: none;
}

.cat-nav-inner::-webkit-scrollbar { display: none; }

.cat-nav-fade {
    pointer-events: none;
    width: 64px;
    position: absolute;
    top: 0; right: 0; bottom: 0;
    background: linear-gradient(90deg, transparent, var(--black) 80%);
    z-index: 2;
}

.cat-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    border: 1px solid var(--white);
    background-color: transparent;
    color: var(--white);
    padding: 4px 8px;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.12px;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
    white-space: nowrap;
}

.cat-tab:hover,
.cat-tab:focus {
    background-color: var(--white);
    color: var(--black);
}

.cat-tab.is-active {
    border-color: transparent;
    background-color: var(--white);
    color: var(--black);
}

/* =============================================
   SECTIONS WRAPPER
   ============================================= */
.sections-wrapper {
    display: flex;
    flex-direction: column;
    gap: 104px;
    padding-top: 104px;
    padding-bottom: 104px;
}

/* =============================================
   ARTICLES SECTION (per category)
   ============================================= */
.articles-section {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.articles-section + .articles-section {
    margin-top: 80px;
}

/* Kategória sor: chip bal + explore link jobb */
.kat-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}


/* Category heading chip */
.kat-chip {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--black);
    padding: 4px 8px 4px 8px;
    user-select: none;
}

.kat-chip-bullet {
    flex: none;
    width: 3px;
    height: 3px;
    background-color: var(--black);
}

.kat-chip-name {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.14px;
    color: var(--black);
    text-decoration: none;
}

.kat-chip-name:hover { text-decoration: underline; }

/* =============================================
   LARGE ARTICLE (első kategória szekció)
   ============================================= */
.large-articles-wrapper {
    border-top: 1px solid var(--border);
    padding-top: 40px;
    padding-bottom: 40px;
}

.large-article {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: start;
}

.large-art-img {
    display: block;
    position: relative;
    width: 100%;
    height: 400px;
    border: 1px solid var(--border);
    overflow: hidden;
    flex: none;
}

.large-art-img img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.large-art-img:hover img { transform: scale(1.03); }

.large-art-content {
    display: flex;
    flex-direction: column;
    gap: 24px;
    justify-content: space-between;
    height: 400px;
}

.large-art-text {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.large-art-meta {
    display: flex;
    align-items: center;
    gap: 6px;
}

.large-art-title {
    display: block;
    font-family: 'Space Mono', monospace;
    font-size: 40px;
    font-weight: 400;
    letter-spacing: -1.6px;
    text-transform: uppercase;
    line-height: 1;
    color: var(--black);
    max-width: 448px;
    transition: opacity 0.2s ease;
}

.large-art-title:hover { text-decoration: underline; }

.large-art-excerpt {
    font-size: 14px;
    font-weight: 500;
    color: var(--muted);
    line-height: 1.5;
    max-width: 448px;
}

/* =============================================
   ARTICLES LIST (4-col grid)
   ============================================= */
/* Fekete gomb — újrafelhasználható */
.tdt-btn-black {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    background-color: var(--black);
    color: var(--white);
    font-family: 'Space Grotesk', sans-serif;
    font-size: 13px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-decoration: none;
    padding: 10px 20px;
    transition: opacity 0.2s ease;
}

.tdt-btn-black:hover {
    background-color: var(--white);
    color: var(--black);
    outline: 1px solid var(--black);
}

.articles-list-wrapper {
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding-top: 40px;
    padding-bottom: 40px;
}

.articles-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 16px;
    row-gap: 40px;
}

.article {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.art-img {
    display: block;
    position: relative;
    width: 100%;
    height: 440px;
    border: 1px solid var(--border);
    overflow: hidden;
    flex: none;
}

.art-img img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.art-img:hover img { transform: scale(1.03); }

.article {
    display: flex;
    flex-direction: column;
}

.art-img {
    display: block;
    position: relative;
    width: 100%;
    height: 440px;
    overflow: hidden;
    flex-shrink: 0;
}

.art-img img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.art-img:hover img { transform: scale(1.03); }

/* Tartalom közvetlenül a kép alatt */
.art-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 10px;
    padding-top: 16px;
}

.art-meta-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.art-cat {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    text-decoration: none;
}

.art-cat:hover { color: var(--black); }

.art-read-time {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.art-meta-dot {
    font-size: 10px;
    color: var(--muted);
    line-height: 1;
}

.art-title {
    display: block;
    font-family: 'Space Mono', monospace;
    font-size: 24px;
    font-weight: 400;
    letter-spacing: -0.96px;
    text-transform: uppercase;
    line-height: 1.1;
    color: var(--black);
    transition: opacity 0.2s ease;
}

.art-title:hover { text-decoration: underline; }

/* =============================================
   FOOTER
   ============================================= */
.tdt-footer {
    background-color: var(--black);
    color: var(--white);
    padding-top: 24px;
    padding-bottom: 24px;
    user-select: none;
    overflow: hidden;
}

.tdt-footer-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: end;
    overflow: hidden;
}

.footer-headline {
    font-family: 'Space Mono', monospace;
    font-size: 20px;
    font-weight: 400;
    letter-spacing: -0.4px;
    text-transform: uppercase;
    line-height: 1;
    color: var(--white);
}

.footer-right {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 24px;
    padding-top: 8px;
    padding-bottom: 0;
}

.footer-links {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.footer-link {
    color: var(--white);
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.12px;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.footer-link:hover { opacity: 0.6; }

.footer-copy {
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.12px;
    color: rgba(250,250,250,0.6);
}

/* =============================================
   ARCHIVE
   ============================================= */
.archive-header {
    background-color: var(--yellow);
    border-top: 2px solid var(--black);
    padding-top: 48px;
    padding-bottom: 48px;
}

.archive-title {
    font-family: 'Space Mono', monospace;
    font-size: 48px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: -1.92px;
    color: var(--black);
}

.archive-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    padding-top: 64px;
    padding-bottom: 80px;
}

.archive-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.archive-img {
    display: block;
    position: relative;
    width: 100%;
    height: 280px;
    border: 1px solid var(--border);
    overflow: hidden;
}

.archive-img img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.archive-img:hover img { transform: scale(1.03); }

.archive-card-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.archive-card-title {
    display: block;
    font-family: 'Space Mono', monospace;
    font-size: 20px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: -0.8px;
    color: var(--black);
    line-height: 1;
}

.archive-card-title:hover { text-decoration: underline; }

.archive-card-excerpt {
    font-size: 13px;
    color: var(--muted);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.archive-pagination {
    padding-bottom: 64px;
}

/* =============================================
   SINGLE — Referencia: adrian-kingsley
   hero (yellow): meta + cím + excerpt | kis thumb
   → fekete share sáv
   → fehér tartalom box sárga bg-on
   ============================================= */

/* ── HERO (yellow bg) ── */
.single-hero {
    background-color: var(--yellow);
    border-top: 1px solid var(--border);
    padding-top: 56px;
    padding-bottom: 56px;
}

.single-hero-grid {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 48px;
    align-items: start;
}

.single-hero-left {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Meta sor */
.single-meta {
    display: flex;
    align-items: center;
    gap: 8px;
}

.single-meta-dot {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 13px;
    color: var(--muted);
}

.single-meta-date,
.single-meta-read {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Cím */
.single-title {
    font-family: 'Space Mono', monospace;
    font-size: clamp(28px, 3.8vw, 50px);
    font-weight: 400;
    letter-spacing: -1.5px;
    text-transform: uppercase;
    color: var(--black);
    line-height: 1.05;
}

/* Excerpt */
.single-excerpt {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--muted);
    max-width: 500px;
}

/* Kis thumbnail (jobb oldal) */
.single-hero-thumb {
    position: relative;
    width: 100%;
    height: 220px;
    overflow: hidden;
    border: 1px solid var(--border);
    flex-shrink: 0;
}

.single-hero-thumb img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ── SHARE SÁV (fekete) ── */
.single-share-bar {
    background-color: var(--black);
    padding-top: 16px;
    padding-bottom: 16px;
}

.single-share {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.single-share-label {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #fff;
    margin-right: 4px;
}

.single-share-btn {
    display: inline-flex;
    align-items: center;
    border: 1px solid rgba(255,255,255,0.5);
    padding: 5px 14px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #fff;
    text-decoration: none;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.single-share-btn:hover {
    border-color: #fff;
    background-color: rgba(255,255,255,0.1);
}

/* ── TARTALOM (fehér box, sárga bg-on) ── */
.single-content-outer {
    background-color: var(--yellow);
    padding-top: 56px;
    padding-bottom: 72px;
}

.single-content-box {
    background-color: var(--white);
    max-width: 720px;
    margin: 0 auto;
    padding: 56px 64px 48px;
}

.entry-content {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.75;
    color: var(--black);
}

.entry-content p  { margin-bottom: 24px; }
.entry-content h2 { font-size: 28px; letter-spacing: -1.12px; margin: 40px 0 16px; }
.entry-content h3 { font-size: 22px; letter-spacing: -0.88px; margin: 32px 0 12px; }

.entry-content img {
    width: 100%;
    height: auto;
    border: 1px solid var(--border);
    margin: 32px 0;
}

.entry-content a { text-decoration: underline; }
.entry-content ul, .entry-content ol { padding-left: 24px; margin-bottom: 24px; }
.entry-content li { margin-bottom: 8px; }

/* Share sáv a fehér box alján */
.single-share-bar-bottom {
    border-top: 1px solid var(--border);
    padding-top: 24px;
    margin-top: 40px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.single-share-bar-bottom .single-share-label {
    color: var(--black);
}

.single-share-bar-bottom .single-share-btn {
    border-color: rgba(0,0,0,0.3);
    color: var(--black);
}

.single-share-bar-bottom .single-share-btn:hover {
    border-color: var(--black);
    background-color: transparent;
}

/* =============================================
   RELATED POSTS — Style C (accent bg, 2-col)
   ============================================= */
.related-section {
    background-color: var(--yellow);
    padding-top: 64px;
    padding-bottom: 64px;
}

.related-heading {
    font-family: 'Space Mono', monospace;
    font-size: 24px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: -0.96px;
    color: var(--black);
    margin-bottom: 32px;
}

.related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.related-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    background-color: var(--white);
    border: 1px solid var(--border);
}

.related-img {
    display: block;
    position: relative;
    width: 100%;
    height: 220px;
    overflow: hidden;
    flex: none;
}

.related-img img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.related-img:hover img { transform: scale(1.03); }

.related-card-content {
    padding: 0 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.related-cat {
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.11px;
    color: var(--muted);
    text-decoration: none;
}

.related-cat:hover { color: var(--black); }

.related-title {
    display: block;
    font-family: 'Space Mono', monospace;
    font-size: 18px;
    font-weight: 400;
    letter-spacing: -0.72px;
    text-transform: uppercase;
    line-height: 1;
    color: var(--black);
}

.related-title:hover { text-decoration: underline; }

/* =============================================
   PAGE & 404
   ============================================= */
.page-header {
    background-color: var(--yellow);
    border-top: 2px solid var(--black);
    padding-top: 48px;
    padding-bottom: 48px;
}

.page-title {
    font-family: 'Space Mono', monospace;
    font-size: 48px;
    font-weight: 400;
    letter-spacing: -1.92px;
    text-transform: uppercase;
    color: var(--black);
}

.page-content-wrap {
    padding-top: 64px;
    padding-bottom: 80px;
    max-width: 800px;
}

.error-section {
    background-color: var(--yellow);
    border-top: 2px solid var(--black);
    min-height: 60vh;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding-top: 80px;
    padding-bottom: 80px;
}

.error-code {
    font-family: 'Space Mono', monospace;
    font-size: clamp(80px, 10vw, 140px);
    font-weight: 400;
    letter-spacing: -5px;
    text-transform: uppercase;
    color: var(--black);
    line-height: 1;
}

.error-msg {
    font-family: 'Space Mono', monospace;
    font-size: 24px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: -0.96px;
    color: var(--black);
    margin-top: 16px;
    margin-bottom: 32px;
}

.error-back {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--black);
    background-color: var(--black);
    color: var(--white);
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.12px;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.error-back:hover {
    background-color: transparent;
    color: var(--black);
}

/* =============================================
   PAGINATION
   ============================================= */
.pagination-wrap {
    padding-top: 48px;
}

.pagination {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.pagination a,
.pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--black);
    padding: 4px 8px;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.12px;
    color: var(--black);
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
    min-width: 32px;
}

.pagination .current {
    background-color: var(--black);
    color: var(--white);
}

.pagination a:hover {
    background-color: var(--black);
    color: var(--white);
}

/* =============================================
   MOBILE NAV HAMBURGER (placeholder, nincs hamburger
   ezen a template-en — a sticky tabs a navigáció)
   ============================================= */
.tdt-mobile-nav { display: none; }

/* =============================================
   GDPR Cookie Compliance border-radius override
   (a referencia szögletes gombokat mutat)
   ============================================= */
#cookie-notice-accept-button,
.cn-button,
.cli-plugin-button,
.moove-gdpr-infobar-allow-btn,
.moove-gdpr-modal-allow-all,
.cmplz-btn,
.cc-btn {
    border-radius: 0 !important;
}

/* =============================================
   RESPONSIVE — 991px
   ============================================= */
@media (max-width: 991px) {
    h1 { font-size: 56px; letter-spacing: -2.24px; }
    h2 { font-size: 40px; letter-spacing: -1.6px; }
    h3 { font-size: 32px; letter-spacing: -1.28px; }

    .articles-list { grid-template-columns: repeat(2, 1fr); }

    .large-article {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .large-art-content {
        height: auto;
        gap: 16px;
    }

    .archive-grid { grid-template-columns: repeat(2, 1fr); }

    .single-hero-grid { grid-template-columns: 1fr; gap: 24px; }
    .single-hero-thumb { height: 220px; }

    .tdt-footer-inner {
        grid-template-columns: 1fr;
        gap: 24px;
    }

}

/* =============================================
   RESPONSIVE — 767px
   ============================================= */
@media (max-width: 767px) {
    h1, h2 { font-size: 36px; letter-spacing: -1.44px; }
    h3      { font-size: 28px; letter-spacing: -1.12px; }

    .tdt-container { padding-left: 20px; padding-right: 20px; }

    .tdt-hero { padding-top: 16px; padding-bottom: 16px; }

    .sections-wrapper { gap: 64px; padding-top: 64px; padding-bottom: 64px; }

    .articles-section { gap: 24px; }

    .articles-list {
        grid-template-columns: 1fr;
        row-gap: 24px;
    }

    /* Egységes mobil kép-magasság: 300px (sorsolva) */
    .large-art-img,
    .art-img,
    .archive-img,
    .related-img {
        height: 300px;
    }

    .large-articles-wrapper { padding-top: 24px; padding-bottom: 24px; }
    .articles-list-wrapper  { padding-top: 24px; padding-bottom: 24px; }

    .archive-grid { grid-template-columns: 1fr; }

    .related-grid { grid-template-columns: 1fr; }

    .single-content-box { padding: 32px 24px 32px; }


    .archive-title { font-size: 36px; letter-spacing: -1.44px; }

    .page-title { font-size: 36px; letter-spacing: -1.44px; }
}

/* =============================================
   RESPONSIVE — 479px
   ============================================= */
@media (max-width: 479px) {
}