/*
Theme Name: TGKWORLD
Theme URI: https://tgkworld.it
Author: Nawal Bourrai
Description: Tema WordPress personalizzato per TGKWORLD, il portale italiano su K-pop, K-drama e cultura coreana.
Version: 1.0
Text Domain: tgkworld
*/

/* ==========================================
   1. VARIABLES & THEMES
   ========================================== */
:root, 
html[data-theme="light"] {
    --color-bg: #f5f4f0;
    --color-surface: #f9f8f5;
    --color-surface-2: #ffffff;
    --color-surface-offset: #eeece7;
    --color-surface-dynamic: #e5e2dc;
    --color-divider: #dcdad4;
    --color-border: #d3d0c8;
    --color-text: #1a1713;
    --color-text-muted: #6b6963;
    --color-text-faint: #b0ada6;
    --color-text-inverse: #f5f4f0;
    --color-primary: #176ebf;
    --color-primary-hover: #1b82e2;
    --color-primary-active: #8f1515;
    --color-primary-highlight: #f5d5d5;
    
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.12);
    
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-full: 9999px;
    
    --transition-interactive: 180ms cubic-bezier(.16, 1, .3, 1);
    
    --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
    --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
    --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
    --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
    --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
    --text-2xl: clamp(2rem, 1.2rem + 2.5vw, 3.5rem);
    --text-hero: clamp(3rem, 0.5rem + 7vw, 8rem);
    
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;
    
    --content-default: 960px;
    --content-wide: 1200px;
    
--font-heading: 'Cabinet Grotesk', 'Playfair Display', serif;
    --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

html[data-theme="dark"] {
    --color-bg: #0f0e0c;
    --color-surface: #141310;
    --color-surface-2: #1a1815;
    --color-surface-offset: #1e1c19;
    --color-surface-dynamic: #252320;
    --color-divider: #2a2825;
    --color-border: #343230;
    --color-text: #e8e6e2;
    --color-text-muted: #7a7875;
    --color-text-faint: #4a4845;
    --color-text-inverse: #0f0e0c;
    --color-primary: #17bfbf;
    --color-primary-hover: #139c9c;
    --color-primary-active: #c42a2a;
    --color-primary-highlight: #841f1f;
    
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5);
}

/* ==========================================
   2. BASE & RESET
   ========================================== */
*, *::before, *::after { 
    box-sizing: border-box; 
    margin: 0; 
    padding: 0; 
}

html { 
    -webkit-font-smoothing: antialiased; 
    text-rendering: optimizeLegibility; 
    scroll-behavior: smooth; 
}

body { 
    min-height: 100dvh; 
    line-height: 1.6; 
    font-family: var(--font-body); 
    font-size: var(--text-base); 
    color: var(--color-text); 
    background-color: var(--color-bg); 
}

img, svg { 
    display: block; 
    max-width: 100%; 
    height: auto; 
}

a, button { 
    transition: all var(--transition-interactive); 
}

button { 
    cursor: pointer; 
    background: none; 
    border: none; 
}

/* Layout Containers */
.container, 
.container--wide { 
    margin-inline: auto; 
    padding-inline: var(--space-6); 
}

.container { max-width: var(--content-default); }
.container--wide { max-width: var(--content-wide); }

/* ==========================================
   3. LOGO
   ========================================== */
.site-logo { 
    display: flex; 
    align-items: center; 
    gap: var(--space-2); 
    text-decoration: none; 
    color: var(--color-text); 
}

.site-logo svg { width: 120px; }
.site-logo img { max-height: 70px; width: auto; display: block; align-content: right }

.logo-dark { display: none !important; }
.logo-light { display: inline-block !important; }

body.dark .logo-light, 
html[data-theme="dark"] .logo-light { 
    display: none !important; 
}

body.dark .logo-dark, 
html[data-theme="dark"] .logo-dark { 
    display: inline-block !important; 
}

/* ==========================================
   4. TICKER BAR
   ========================================== */
.ticker-bar { 
    width: 100%; 
    position: sticky; 
    top: 0; 
    z-index: 1002; 
    background: var(--color-primary); 
    color: #ffffff; 
    font-size: var(--text-xs); 
    font-weight: 600; 
    letter-spacing: .03em; 
    padding: var(--space-2) 0; 
    overflow: hidden; 
    white-space: nowrap; 
}

body.admin-bar .ticker-bar { top: 0px; }

@media screen and (max-width: 782px) { 
    body.admin-bar .ticker-bar { top: 45px; } 
}
@media screen and (max-width: 600px) { 
    body.admin-bar .ticker-bar { top: 0; } 
}

.ticker-inner { 
    display: inline-flex; 
    width: max-content; 
    gap: 0; 
    animation: ticker 45s linear infinite; 
    will-change: transform; 
    backface-visibility: hidden; 
    -webkit-backface-visibility: hidden; 
    transform: translateZ(0); 
}

.ticker-inner:hover { animation-play-state: paused; }

.ticker-inner a { 
    color: inherit; 
    text-decoration: none; 
    transition: opacity 0.2s ease, color 0.2s ease; 
    margin-right: 4px;
}

.ticker-inner a:hover { 
    color: var(--color-primary-hover); 
    text-decoration: underline; 
}

.ticker-item { 
    display: inline-flex; 
    align-items: center; 
    flex-shrink: 0;
}

.ticker-label { 
    color: #dadd11; 
    background: rgba(0, 0, 0, 0.25); 
    padding: 2px var(--space-3); 
    border-radius: var(--radius-md); 
    margin-right: 5px; 
    margin-left: 0; 
}

.ticker-sep { 
    margin-right: 5px; 
    display: inline-block; 
}

@keyframes ticker { 
    0% { transform: translate3d(0, 0, 0); } 
    100% { transform: translate3d(-50%, 0, 0); } 
}

/* ==========================================
   5. HEADER & NAVIGATION
   ========================================== */
.site-header { 
    position: sticky; 
    top: 37.5px; 
    width: 100%;
    z-index: 1000; 
    background: rgba(245, 244, 240, 0.88); 
    backdrop-filter: blur(12px); 
    border-bottom: 1px solid var(--color-divider); 
}

html[data-theme="dark"] .site-header {
    background: rgba(15, 14, 12, 0.88);
}

body.admin-bar .site-header { top: 40px; }

@media screen and (max-width: 782px) { body.admin-bar .site-header { top: 38px; } }
@media screen and (max-width: 600px) { body.admin-bar .site-header { top: 35px; } }

.header-inner { 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    height: 3.5rem; 
    gap: var(--space-8); 
}

.site-nav { 
    display: flex; 
    align-items: center; 
    gap: var(--space-1); 
}

.nav-link { 
    font-size: var(--text-sm); 
    font-weight: 500; 
    color: var(--color-text-muted); 
    text-decoration: none; 
    padding: var(--space-2) var(--space-3); 
    border-radius: var(--radius-md); 
}

.nav-link:hover { 
    color: var(--color-text); 
    background: var(--color-surface-offset); 
}

.nav-link--active { color: var(--color-primary); }

.header-actions { 
    display: flex; 
    align-items: center; 
    gap: 4px; 
}

/* Search Form in Header */
.header-search-form { 
    display: flex; 
    align-items: center; 
    background-color: rgba(255, 255, 255, 0.1); 
    border: 1px solid rgba(0, 0, 0, 0.15); 
    border-radius: 20px; 
    padding: 2px 6px; 
    transition: all 0.3s ease; 
    position: relative; 
}

.header-search-input { 
    border: none; 
    background: transparent; 
    padding: 6px 10px; 
    font-size: 14px; 
    outline: none; 
    color: inherit; 
    width: 140px; 
    transition: width 0.3s ease, opacity 0.3s ease; 
}

.header-search-btn { 
    font-size: 17px !important; 
    width: 20px; 
    height: 20px; 
    padding: 0 !important; 
    line-height: 1 !important; 
    display: flex !important; 
    align-items: center !important; 
    justify-content: center !important; 
    background: none; 
    border: none; 
    cursor: pointer; 
    flex-shrink: 0; 
}

.btn-theme { 
    padding: var(--space-2); 
    border-radius: var(--radius-md); 
    color: var(--color-text-muted); 
}

.btn-primary-sm, 
a.btn-primary-sm { 
    display: inline-block;
    font-size: var(--text-sm); 
    font-weight: 600; 
    padding: var(--space-2) var(--space-4); 
    background-color: var(--color-primary); 
    color: #ffffff !important; 
    border-radius: var(--radius-full); 
    text-decoration: none; 
}

a.btn-primary-sm:hover, 
.btn-primary-sm:hover, 
a.btn-primary-sm:focus, 
.btn-primary-sm:focus { 
    background-color: var(--color-primary-hover); 
    color: #ffffff !important; 
}

.menu-toggle { 
    display: none; 
    padding: var(--space-2); 
    color: var(--color-text); 
}

/* Header Responsive Styles */
@media (max-width: 768px) {
    .site-nav { 
        display: none; 
        flex-direction: column; 
        align-items: stretch; 
        gap: 0; 
        position: absolute; 
        top: 3.5rem; 
        left: 0; 
        right: 0; 
        background: var(--color-surface); 
        border-bottom: 1px solid var(--color-divider); 
        padding: var(--space-4); 
    }
    
    .site-nav.open { 
        display: flex; 
        padding: 2px; 
    }
    
    .menu-toggle { display: flex; }
    .btn-primary-sm { display: none; }
    .header-inner { position: relative; }

    .header-search-form { 
        background: transparent; 
        border: 1px solid transparent; 
        display: flex; 
        align-items: center; 
        padding: 0; 
        margin: 0; 
    }

    .header-search-btn { 
        font-size: 26px !important; 
        padding: 6px 10px; 
        line-height: 1; 
        display: flex; 
        align-items: center; 
        justify-content: center; 
        background: none; 
        border: none; 
        cursor: pointer;
    }

    .header-search-input { 
        width: 0; 
        opacity: 0; 
        padding: 0; 
        border: none; 
        pointer-events: none; 
        font-size: 16px; 
        transition: width 0.3s ease, opacity 0.3s ease; 
    }

    .header-search-form.search-active { 
        background-color: #ffffff; 
        border: 1px solid #ccc; 
        border-radius: 20px; 
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); 
        padding: 2px 6px; 
    }

    .header-search-form.search-active .header-search-input { 
        width: 140px; 
        opacity: 1; 
        padding: 6px 10px; 
        pointer-events: auto; 
        color: #000000; 
    }
}

/* ==========================================
   6. HERO SECTION
   ========================================== */
.hero { 
    padding-block: clamp(var(--space-8), 6vw, var(--space-16)); 
    border-bottom: 1px solid var(--color-divider); 
}

/* Contenitore estern del badge */
.hero-category-wrapper {
    margin-bottom: 12px;
}

/* Stile principale del link/badge */
.hero-category-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 20px; /* Bordi arrotondati (effetto pillola) */
    background-color: rgba(153, 153, 153, 0.1); /* Sfondo leggero/semitrasparente */
    color: var(--color-primary-text);
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 1px solid rgba(84, 84, 84, 0.2);
}

/* Effetto al passaggio del mouse (Hover) */
.hero-category-badge:hover {
    background-color: #ffffff;
    color: #000000;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Personalizzazione specifica se la categoria è "Attualità" */
.hero-category-badge.category-attualita {
    background-color: var(--color-primary);
    color: #ffffff;
    border: none;
}

.hero-category-badge.category-attualita:hover {
    background-color: var(--color-primary-hover);
    color: #ffffff;
}

.hero-grid { 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: var(--space-12); 
    align-items: center; 
}

.hero-eyebrow { 
    font-size: var(--text-xs); 
    font-weight: 700; 
    letter-spacing: .12em; 
    text-transform: uppercase; 
    color: var(--color-primary); 
    margin-bottom: var(--space-4); 
}

.hero-title { 
    font-size: var(--text-2xl); 
    font-family: var(--font-display); 
    font-weight: 800; 
    line-height: 1.05; 
    margin-bottom: var(--space-4); 
}

.hero-title em { 
    font-style: italic; 
    color: var(--color-primary); 
}

.hero-desc { 
    font-size: var(--text-base); 
    color: var(--color-text-muted); 
    margin-bottom: var(--space-8); 
    max-width: 52ch; 
}

.hero-meta { 
    display: flex; 
    align-items: center; 
    gap: var(--space-4); 
    flex-wrap: wrap; 
}

.author-avatar { 
    width: 36px; 
    height: 36px; 
    border-radius: var(--radius-full); 
    background: var(--color-primary-highlight); 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-size: var(--text-xs); 
    font-weight: 700; 
    color: var(--color-primary); 
}

.hero-author { 
    display: flex; 
    align-items: center; 
    gap: var(--space-2); 
}

.author-name { 
    font-size: var(--text-sm); 
    font-weight: 600; 
}

.author-date { 
    font-size: var(--text-xs); 
    color: var(--color-text-muted); 
}

.hero-image-wrap { 
    border-radius: var(--radius-xl); 
    overflow: hidden; 
    box-shadow: var(--shadow-lg); 
    aspect-ratio: 4/3; 
    position: relative; 
}

.hero-image-wrap img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
}

.hero-image-badge { 
    position: absolute; 
    top: var(--space-4); 
    left: var(--space-4); 
    background: rgba(0, 0, 0, 0.25); 
    color: #ffffff; 
    font-size: var(--text-xs); 
    font-weight: 700; 
    letter-spacing: .1em; 
    text-transform: uppercase; 
    padding: var(--space-1) var(--space-3); 
    border-radius: var(--radius-full); 
}

.read-more-btn { 
    display: inline-flex; 
    align-items: center; 
    gap: var(--space-2); 
    font-size: var(--text-sm); 
    font-weight: 600; 
    color: var(--color-primary); 
    text-decoration: none; 
}

@media (max-width: 768px) {
    .hero-grid { 
        grid-template-columns: 1fr; 
        gap: var(--space-8); 
    }
    .hero-image-wrap { order: -1; }
}

/* ==========================================
   7. CATEGORIES STRIP & DROPDOWN (DESKTOP + MOBILE)
   ========================================== */
.categories-strip { 
    padding-block: var(--space-1); 
    border-block: 1px solid var(--color-divider); 
    /* Evita che il contenitore tagli i menu che escono dai bordi */
    overflow: visible !important; 
}

.cat-grid { 
    display: flex !important; 
    gap: var(--space-1); 
    flex-wrap: wrap; 
    align-items: center;
    overflow: visible !important;
}

.cat-dropdown-item {
    position: relative !important;
    display: inline-block;
}

/* Stile badge/pillola principale */
.cat-pill { 
    display: inline-flex; 
    align-items: center; 
    gap: var(--space-1); 
    font-size: var(--text-xs); 
    font-weight: 700; 
    padding: var(--space-1) var(--space-2); 
    border-radius: var(--radius-full); 
    background: var(--color-surface); 
    border: 1px solid var(--color-border); 
    text-decoration: none; 
    color: var(--color-text-muted); 
    cursor: pointer;
    user-select: none;
    transition: all 0.2s ease;
}

.cat-pill--active, 
.cat-pill:hover { 
    background: var(--color-primary); 
    color: #ffffff; 
    border-color: var(--color-primary); 
}

/* Freccetta toggle */
.cat-pill-toggle::-webkit-details-marker,
.cat-pill-toggle::marker {
    display: none !important;
}

.cat-arrow {
    font-size: 0.8em;
    transition: transform 0.2s ease;
}

.cat-details[open] .cat-arrow {
    transform: rotate(180deg);
}

/* ------------------------------------------
   7.1 DESKTOP: STRUTTURA MENU A TENDINA
   ------------------------------------------ */
.cat-details {
    position: relative;
}

.cat-sub-menu {
    display: none; /* Nascosto di default */
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    margin-top: 6px;
    background: var(--color-surface, #1e1e1e) !important;
    border: 1px solid var(--color-border, #333) !important;
    border-radius: var(--radius-md, 8px);
    min-width: 180px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3) !important;
    z-index: 99999 !important; /* Forza la sovrapposizione sopra altri elementi */
    overflow: hidden;
    flex-direction: column;
}

/* MOSTRA IL MENU QUANDO IL TAG DETAILS È APERTO (CLICK SU DESKTOP) */
.cat-details[open] .cat-sub-menu {
    display: flex !important;
}

.cat-sub-link {
    display: block !important;
    padding: 8px 14px !important;
    font-size: var(--text-xs, 0.8rem);
    color: var(--color-text-muted, #ccc) !important;
    text-decoration: none !important;
    transition: background 0.2s ease, color 0.2s ease;
    white-space: nowrap;
}

.cat-sub-link:hover {
    background: var(--color-primary, #176ebf) !important;
    color: #ffffff !important;
}

.cat-sub-link.main-cat-link {
    font-weight: bold;
    border-bottom: 1px solid var(--color-divider, #333);
    color: var(--color-primary, #176ebf) !important;
}

.cat-sub-link.main-cat-link:hover {
    color: #ffffff !important;
}


/* ------------------------------------------
   7.2 MOBILE RESPONSIVE (max-width: 768px)
   ------------------------------------------ */
@media (max-width: 768px) {
    #main-nav .categories-strip {
        display: block !important;
        width: 100%;
        margin-top: var(--space-2);
        padding-top: var(--space-2);
        border-top: 1px solid var(--color-divider);
        border-bottom: none;
    }
    
    #main-nav .cat-grid {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: var(--space-1);
    }
    
    #main-nav .cat-pill {
        font-size: clamp(0.65rem, 0.6rem + 0.2vw, 0.75rem);
        padding: 4px 10px;
    }

    .cat-details[open] {
        display: flex;
        align-items: center;
        gap: var(--space-1);
        flex-wrap: wrap;
    }

    .cat-sub-menu {
        position: static !important;
        display: inline-flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 4px;
        box-shadow: none !important;
        border: none !important;
        background: transparent !important;
        margin-top: 0 !important;
        padding: 0 !important;
    }

    .cat-sub-link {
        padding: 3px 8px !important;
        font-size: 0.7rem !important;
        background: rgba(255, 255, 255, 0.05) !important;
        border: 1px dashed var(--color-border) !important;
        border-radius: var(--radius-full) !important;
        white-space: nowrap;
    }

    .cat-sub-link.main-cat-link {
        border-bottom: 1px dashed var(--color-border) !important;
    }
}

/* ==========================================
   8. NEWS & SPOTLIGHT SECTIONS
   ========================================== */
.news-section, 
.spotlight-section { 
    padding-block: clamp(var(--space-4), 6vw, var(--space-8)); 
}

.section-header { 
    display: flex; 
    align-items: baseline; 
    justify-content: space-between; 
    margin-bottom: var(--space-8); 
}

.section-title { 
    font-size: var(--text-xl); 
    font-family: var(--font-display); 
    font-weight: 800; 
}

.section-title span { color: var(--color-primary); }

.section-link { 
    font-size: var(--text-sm); 
    font-weight: 600; 
    color: var(--color-primary); 
    text-decoration: none; 
}

.news-grid { 
    display: grid; 
    grid-template-columns: repeat(3, 1fr); 
    gap: var(--space-6); 
}

.news-grid--featured { 
    display: grid; 
    grid-template-columns: 2fr 1fr; 
    gap: var(--space-6); 
}

@media (max-width: 900px) {
    .news-grid { grid-template-columns: repeat(2, 1fr); }
    .news-grid--featured { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
    .news-grid { grid-template-columns: 1fr; }
}

/* ==========================================
   9. CARDS & MINI CARDS
   ========================================== */
.news-card { 
    background: var(--color-surface); 
    border-radius: var(--radius-xl); 
    overflow: hidden; 
    box-shadow: var(--shadow-sm); 
    display: flex; 
    flex-direction: column; 
    border: 1px solid rgba(0, 0, 0, 0.06); 
}

.news-card--featured { flex-direction: row; }

.card-image-wrap { 
    aspect-ratio: 16/9; 
    overflow: hidden; 
    flex-shrink: 0; 
}

.news-card--featured .card-image-wrap { 
    aspect-ratio: auto; 
    width: 55%; 
}

.card-image-wrap img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
}

.card-body { 
    padding: var(--space-5); 
    display: flex; 
    flex-direction: column; 
    flex: 1; 
}

.card-category, 
.mini-card-cat { 
    font-size: var(--text-xs); 
    font-weight: 700; 
    letter-spacing: .1em; 
    text-transform: uppercase; 
    color: var(--color-primary); 
    margin-bottom: var(--space-2); 
}

.card-category a, 
.mini-card-cat a { 
    color: var(--color-primary); 
}

.card-title { 
    font-size: var(--text-lg); 
    font-family: var(--font-display); 
    font-weight: 700; 
    line-height: 1.2; 
    margin-bottom: var(--space-3); 
}

.card-title a { 
    color: var(--color-text); 
    text-decoration: none !important; 
    transition: color 0.2s ease; 
}

.card-title a:hover { color: var(--color-primary); }

a.temporary-visited { 
    text-decoration: none !important; 
    color: var(--color-primary-hover); 
}

.card-excerpt { 
    font-size: var(--text-sm); 
    color: var(--color-text-muted); 
    flex: 1; 
    margin-bottom: var(--space-4); 
}

.card-footer { 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    padding-top: var(--space-3); 
    border-top: 1px solid var(--color-divider); 
}

.card-date { 
    font-size: var(--text-xs); 
    color: var(--color-text-faint); 
}

.card-tag { display: none !important; }

/* Sidebar & Mini Cards */
.news-sidebar { 
    display: flex; 
    flex-direction: column; 
    gap: var(--space-4); 
}

.mini-card { 
    display: flex; 
    gap: var(--space-4); 
    align-items: flex-start; 
    background: var(--color-surface); 
    border-radius: var(--radius-lg); 
    padding: var(--space-4); 
    box-shadow: var(--shadow-sm); 
    border: 1px solid rgba(0, 0, 0, 0.06); 
    width: 100%; 
}

.mini-card-image { 
    width: 110px; 
    height: 90px; 
    border-radius: var(--radius-md); 
    overflow: hidden; 
    flex-shrink: 0; 
}

.mini-card-image img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
}

.mini-card-title { 
    font-size: var(--text-base); 
    font-weight: 600; 
    line-height: 1.3; 
}

.mini-card-title a { 
    color: var(--color-text); 
    text-decoration: none !important; 
    transition: color 0.2s ease; 
}

.mini-card-title a:hover { color: var(--color-primary); }

.mini-card-date { 
    font-size: var(--text-xs); 
    color: var(--color-text-faint); 
    margin-top: var(--space-1); 
}

/* ==========================================
   10. SPOTLIGHT
   ========================================== */
.spotlight-grid { 
    display: grid; 
    grid-template-columns: repeat(4, 1fr); 
    gap: var(--space-5); 
}

@media (max-width: 900px) { .spotlight-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .spotlight-grid { grid-template-columns: 1fr; } }

.artist-card { 
    border-radius: var(--radius-xl); 
    overflow: hidden; 
    position: relative; 
    aspect-ratio: 3/4; 
    box-shadow: var(--shadow-md); 
}

.artist-card img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
}

.artist-overlay { 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.6) 60%, transparent 100%); 
    padding: var(--space-6) var(--space-4) var(--space-4); 
}

.artist-name { 
    font-family: var(--font-display); 
    font-size: var(--text-lg); 
    font-weight: 800; 
    color: #ffffff; 
}

.artist-label { 
    font-size: var(--text-xs); 
    color: rgba(255, 255, 255, .65); 
    margin-top: var(--space-1); 
}

.artist-tag { 
    display: inline-block; 
    margin-top: var(--space-2); 
    font-size: var(--text-xs); 
    font-weight: 700; 
    text-transform: uppercase; 
    background: var(--color-primary); 
    color: #ffffff; 
    padding: 2px var(--space-2); 
    border-radius: var(--radius-sm); 
}

/* ==========================================
   11. ABOUT STRIP
   ========================================== */
.about-strip { 
    padding-block: clamp(var(--space-12), 6vw, var(--space-16)); 
    background: rgba(23, 110, 191, 0.05); 
    border-bottom: 1px solid var(--color-divider); 
}

.about-grid { 
    display: grid; 
    grid-template-columns: 1fr 2fr; 
    gap: var(--space-16); 
    align-items: center; 
}

@media (max-width: 768px) {
    .about-grid { 
        grid-template-columns: 1fr; 
        gap: var(--space-8); 
    }
    .news-card--featured { flex-direction: column; }
    .news-card--featured .card-image-wrap { 
        width: 100%; 
        aspect-ratio: 16/9; 
    }
}

.about-label { 
    font-size: var(--text-xs); 
    font-weight: 700; 
    letter-spacing: .12em; 
    text-transform: uppercase; 
    color: var(--color-primary); 
    margin-bottom: var(--space-3); 
}

.about-title { 
    font-size: var(--text-xl); 
    font-family: var(--font-display); 
    font-weight: 800; 
    margin-bottom: var(--space-4); 
}

.about-text { 
    font-size: var(--text-base); 
    color: var(--color-text-muted); 
    line-height: 1.7; 
    max-width: 65ch; 
}

.stats-row { 
    display: flex; 
    gap: var(--space-10); 
    flex-wrap: wrap; 
}

.stat-num { 
    font-size: var(--text-2xl); 
    font-family: var(--font-display); 
    font-weight: 800; 
    color: var(--color-primary); 
    line-height: 1; 
}

.stat-label { 
    font-size: var(--text-xs); 
    color: var(--color-text-muted); 
    margin-top: var(--space-1); 
    font-weight: 500; 
    text-transform: uppercase; 
    letter-spacing: .08em; 
}

/* ==========================================
   12. NEWSLETTER SECTION
   ========================================== */
.newsletter-section { 
    padding-block: clamp(var(--space-16), 8vw, var(--space-24)); 
    background: var(--color-surface-offset); 
    border-block: 1px solid var(--color-divider); 
}

.newsletter-inner { 
    max-width: 520px; 
    margin-inline: auto; 
    text-align: center; 
}

.newsletter-title { 
    font-size: var(--text-2xl); 
    font-family: var(--font-display); 
    font-weight: 800; 
    margin-bottom: var(--space-3); 
}

.newsletter-desc { 
    font-size: var(--text-base); 
    color: var(--color-text-muted); 
    margin-bottom: var(--space-8); 
}

.newsletter-form { 
    display: flex; 
    gap: var(--space-3); 
}

.newsletter-input { 
    flex: 1; 
    padding: var(--space-3) var(--space-5); 
    border-radius: var(--radius-full); 
    border: 1px solid var(--color-border); 
    background: var(--color-surface); 
    font-size: var(--text-sm); 
    outline: none; 
}

.btn-subscribe { 
    padding: var(--space-3) var(--space-6); 
    border-radius: var(--radius-full); 
    background: var(--color-primary); 
    color: #ffffff; 
    font-size: var(--text-sm); 
    font-weight: 700; 
    white-space: nowrap; 
}

@media (max-width: 500px) { 
    .newsletter-form { flex-direction: column; } 
}

/* ==========================================
   13. FOOTER
   ========================================== */
.site-footer { 
    background: var(--color-surface); 
    border-top: 1px solid var(--color-divider); 
    padding-block: var(--space-12) var(--space-8); 
}

.footer-grid { 
    display: grid; 
    grid-template-columns: 2fr 1fr 1fr 1fr; 
    gap: var(--space-10); 
    margin-bottom: var(--space-10); 
}

@media (max-width: 768px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } }

.footer-desc { 
    font-size: var(--text-xs); 
    color: var(--color-text-muted); 
    margin-top: var(--space-3); 
    white-space: normal; 
    overflow: hidden; 
    text-overflow: ellipsis;
}

.footer-col-title { 
    font-size: var(--text-xs); 
    font-weight: 700; 
    text-transform: uppercase; 
    letter-spacing: .12em; 
    color: var(--color-text-faint); 
    margin-bottom: var(--space-4); 
}

.footer-links { 
    list-style: none; 
    display: flex; 
    flex-direction: column; 
    gap: var(--space-2); 
}

.footer-links a { 
    font-size: var(--text-sm); 
    color: var(--color-text-muted); 
    text-decoration: none; 
}

.footer-bottom { 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    padding-top: var(--space-6); 
    border-top: 1px solid var(--color-divider); 
    gap: var(--space-4); 
    flex-wrap: wrap; 
}

.footer-copy { 
    font-size: var(--text-xs); 
    color: var(--color-text-faint); 
}

/* ==========================================
   14. SINGLE POST PAGE
   ========================================== */
.single-content img, 
.single-content figure, 
.single-content .wp-block-image { 
    margin-top: 1.5rem; 
    margin-bottom: 1.5rem; 
    display: block; 
}

.single-content p, 
.single-content h1, 
.single-content h2, 
.single-content h3, 
.single-content blockquote, 
.single-content ul, 
.single-content ol { 
    margin-bottom: 1.5rem; 
}

.single-content > *:last-child { margin-bottom: 0; }

.single-content, 
.entry-content p { 
    font-family: 'Poppins', 'Roboto', sans-serif; 
    font-size: 18px; 
    line-height: 1.7; 
    color: var(--color-text); 
}

.single-content h1 { 
    text-transform: uppercase; 
    font-family: 'Poppins', 'Roboto', sans-serif; 
    font-weight: 700; 
    color: var(--color-primary); 
}

.single-content h3 { 
    font-weight: bold; 
    font-style: italic; 
}

.single-image-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 20px 0; /* Regola i margini verticali */
}

.single-image-wrap img {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 8px; /* Facoltativo: angoli arrotondati */
}

/* Interazioni Articolo (Like & Social) */
.article-interactions-wrap { 
    margin-top: 2.5rem; 
    margin-bottom: 3rem; 
    padding-top: 1.5rem; 
    border-top: 1px solid var(--color-divider); 
}

.article-actions-bar { 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    flex-wrap: wrap; 
    gap: 1rem; 
    padding: 1rem; 
    background: var(--color-surface); 
    border-radius: 12px; 
    margin-bottom: 2rem; 
}

.action-btn.btn-like { 
    display: flex; 
    align-items: center; 
    gap: 0.5rem; 
    background: #ffffff; 
    border: 1px solid #ddd; 
    border-radius: 20px; 
    padding: 8px 16px; 
    cursor: pointer; 
    font-size: 14px; 
    font-weight: 600; 
    transition: all 0.2s ease; 
}

.action-btn.btn-like:hover { 
    border-color: #ff4757; 
    background: #fff0f1; 
}

.action-btn.btn-like.liked { 
    background: #ff4757; 
    color: #ffffff; 
    border-color: #ff4757; 
}

.share-buttons { 
    display: flex; 
    align-items: center; 
    gap: 0.5rem; 
}

.share-label { 
    font-size: 14px; 
    font-weight: 600; 
    margin-right: 4px; 
}

.share-btn { 
    display: inline-flex; 
    align-items: center; 
    justify-content: center; 
    width: 36px; 
    height: 36px; 
    background: #ffffff; 
    border: 1px solid #ddd; 
    border-radius: 50%; 
    text-decoration: none; 
    font-size: 16px; 
    cursor: pointer; 
    transition: transform 0.2s ease, border-color 0.2s ease; 
}

.share-btn:hover { 
    transform: translateY(-2px); 
    border-color: #999999; 
}

@media (max-width: 600px) {
    .article-actions-bar { 
        flex-direction: column; 
        align-items: stretch; 
        text-align: center; 
    }
    .share-buttons { justify-content: center; }
}

/* ==========================================
   15. TGKWORLD - Categories Strip + Lang Switcher
   ========================================== */

/* Previene alterazioni di layout e zoom forzati da Google Translate */
html, body {
    -webkit-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
    position: static !important;
    top: 0px !important;
}

/* Nasconde l'eventuale banner o iframe di Google in cima alla pagina su mobile */
.goog-te-banner-frame,
#goog-gt-tt,
.goog-te-balloon-frame {
    display: none !important;
}

body {
    top: 0px !important;
}

/* Contenitore principale della barra */
.categories-strip {
    position: relative;
    z-index: 9999; /* Garantisce che la tendina stia sopra il contenuto sotto */
    width: 100%;
    max-width: 100vw;
    box-sizing: border-box;
    overflow: visible; /* Necessario per far uscire la tendina senza tagliarla */
}

/* Layout Flex per affiancare categorie e selettore lingua */
.strip-flex-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding-top: 8px;
    padding-bottom: 8px;
    width: 100%;
    box-sizing: border-box;
}

/* La griglia/scroll delle categorie occupa lo spazio rimanente */
.cat-grid {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow-x: auto; /* Permette lo scroll orizzontale su mobile */
    white-space: nowrap;
    scrollbar-width: none; /* Nasconde la scrollbar su Firefox */
    -ms-overflow-style: none; /* Nasconde la scrollbar su IE/Edge */
    flex-grow: 1;
    min-width: 0; /* Impedisce al flex-item di spingere fuori il layout */
}

.cat-grid::-webkit-scrollbar {
    display: none; /* Nasconde la scrollbar su Chrome/Safari */
}

/* Evita che i tag <font> inseriti da Google cambino la dimensione dei testi delle pillole */
.cat-grid font,
.cat-pill font {
    vertical-align: baseline !important;
    font-size: inherit !important;
}

/* Contenitore Selettore Lingua */
.strip-lang-switcher {
    flex-shrink: 0; /* Impedisce al selettore di rimpicciolirsi o deformarsi */
    position: relative;
    z-index: 10000;
}

/* Stile e apertura verso il basso del Globo/Dropdown */
.strip-lang-switcher .gt_switcher {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* Forza la tendina ad aprirsi verso il basso */
.strip-lang-switcher .gt_option {
    top: 100% !important;
    bottom: auto !important;
    right: 0 !important;
    left: auto !important;
    margin-top: 10px !important;
    position: absolute !important;
    z-index: 100001 !important;
}

/* REGOLAZIONI SPECIFICHE MOBILE */
@media (max-width: 768px) {
    .strip-flex-container {
        padding-left: 12px;
        padding-right: 12px;
    }

    /* Mantiene rigida la dimensione dei testi traducibili */
    .strip-lang-switcher .gt_switcher .gt_selected a,
    .strip-lang-switcher .gt_switcher .gt_option a {
        font-size: 15px !important;
    }

    /* Impedisce ai link con bordo/contatti di allargare l'header se la parola tradotta è più lunga */
    header a, 
    .cat-pill,
    .contact-btn {
        white-space: nowrap !important;
        box-sizing: border-box !important;
    }
}

/* ==========================================
   16. TGKWORLD - Layout Impaginazione (Pagination)
   ========================================== */

.pagination-container {
    margin-top: 50px;
    display: flex;
    justify-content: center;
}

/* Struttura generata da the_posts_pagination */
.pagination-container .nav-links {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* Stile base per tutti i numeri di pagina e frecce */
.pagination-container .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    font-size: 0.9rem;
    font-weight: 600;
    color: #1a1a1a;
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
}

/* Hover sui pulsanti */
.pagination-container a.page-numbers:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 42, 109, 0.12);
}

/* Pagina Attuale */
.pagination-container .page-numbers.current {
    background-color: var(--color-primary); /* Colore d'accento del sito */
    color: #ffffff;
    border-color: var(--color-primary);
}

/* Punti di sospensione (...) */
.pagination-container .page-numbers.dots {
    border: none;
    background: transparent;
}

/* Responsive per cellulari */
@media (max-width: 768px) {
    .pagination-container .page-numbers {
        min-width: 36px;
        height: 36px;
        padding: 0 10px;
        font-size: 0.85rem;
    }
}

/* ==========================================
   17. STILI COMUNI (Header & Footer Dropdown)
   ========================================== */

/* HEADER: Apertura verso il BASSO e ancoraggio a DESTRA */
.header-dropdown .footer-dropdown-menu {
    top: 100%;
    bottom: auto;
    left: auto;       /* Annulla l'allineamento a sinistra */
    right: 0;         /* Aggancia il menu al bordo destro del pulsante Contatti */
    margin-top: 8px;
    z-index: 99999;
}

/* Permette agli elementi dell'header di uscire dai propri confini */
header, 
.site-header, 
.header-navigation, 
.header-dropdown details {
    overflow: visible !important;
}

.header-dropdown,
.footer-dropdown { 
    position: relative; 
    list-style: none; 
}

/* Gestione Summary / Toggle */
.header-dropdown summary,
.footer-dropdown summary { 
    list-style: none; 
    cursor: pointer; 
    user-select: none; 
    display: inline-flex; 
    align-items: center; 
    gap: 4px; 
    color: var(--color-text-muted, #ccc); 
    transition: color 0.2s ease; 
}

.header-dropdown summary::-webkit-details-marker,
.footer-dropdown summary::-webkit-details-marker { display: none; }

.header-dropdown summary:hover,
.footer-dropdown summary:hover { color: var(--color-primary); }

.header-dropdown details[open] .arrow,
.footer-dropdown details[open] .arrow { transform: rotate(180deg); }

.header-dropdown .arrow,
.footer-dropdown .arrow { 
    display: inline-block; 
    transition: transform 0.2s ease; 
    font-size: 0.8em; 
}

.footer-dropdown-toggle { 
    color: var(--color-text-muted, #ccc); 
    transition: color 0.2s ease; 
}

.footer-dropdown-toggle:hover { color: #ffffff; }

/* Contenitore Menu Dropdown (Condiviso) */
.footer-dropdown-menu { 
    position: absolute; 
    left: 0; 
    background: #1e1e1e; 
    border: 1px solid rgba(255, 255, 255, 0.1); 
    border-radius: 12px; /* Angoli più arrotondati */
    padding: 0; /* Rimosso padding per far coprire l'hover interamente */
    min-width: 210px; 
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4); 
    z-index: 100; 
    list-style: none; 
    overflow: hidden; /* Taglia lo sfondo dell'hover agli angoli arrotondati */
}

/* Voci di menu e Hover (A tutta altezza) */
.footer-dropdown-menu li a {
    display: block; 
    padding: 10px 16px; 
    font-size: var(--text-xs, 12px); 
    color: #eee; 
    text-decoration: none; 
    white-space: nowrap; 
    transition: background 0.2s ease, color 0.2s ease; 
}

.footer-dropdown-menu li a:hover { 
    background: var(--color-primary, #176ebf); 
    color: #ffffff; 
}

.header-dropdown:hover .footer-dropdown-menu,
.footer-dropdown:hover .footer-dropdown-menu { display: block; }


/* ==========================================
   17.1. DIFFERENZIAZIONE HEADER VS FOOTER
   ========================================== */

/* HEADER: Apertura verso il BASSO */
.header-dropdown .footer-dropdown-menu {
    top: 100%;
    bottom: auto;
    margin-top: 8px;
}

/* FOOTER: Apertura verso l'ALTO */
.footer-dropdown .footer-dropdown-menu {
    bottom: 100%;
    top: auto;
    margin-bottom: 8px;
}