/* ═══════════════════════════════════════════════════════════════
   Traduzioni Polylang Block — v2.0 — CSS
   ═══════════════════════════════════════════════════════════════ */

:root {
    --tpb-text: #333;
    --tpb-bg: #f5f5f5;
    --tpb-border: #ddd;
    --tpb-radius: 4px;
    --tpb-gap: 8px;
    --tpb-padding: 6px 12px;
    --tpb-accent: #2271b1;
    --tpb-separator: #eee;
}

.tpb { box-sizing: border-box; color: var(--tpb-text); }
.tpb a.tpb-link, .tpb a { color: inherit; text-decoration: none; }
.tpb a.tpb-link:hover, .tpb a:hover { text-decoration: underline; }
.tpb-flag { margin-right: 4px; }
.tpb-lang { margin-right: 6px; }
.tpb-empty { color: #bbb; font-style: italic; }

/* DEBUG */
.tpb-debug {
    background: #fff3cd; border: 1px solid #ffc107;
    padding: 12px; border-radius: 6px;
    font-family: monospace; font-size: 12px; line-height: 1.8;
}
.tpb-debug code { background: #fff; padding: 1px 4px; border-radius: 3px; border: 1px solid #ddd; }

/* ───────────────────────────── 1. LIST ─── */
.tpb--list {
    list-style: none;
    margin: 6px 0; padding: 0;
}
.tpb--list .tpb-item {
    display: flex; align-items: center; gap: 6px;
    padding: var(--tpb-padding);
    border-bottom: 1px solid var(--tpb-separator);
}
.tpb--list .tpb-item:last-child { border-bottom: none; }

/* ───────────────────────────── 2. TABLE ─── */
.tpb--table {
    width: 100%; border-collapse: collapse;
    margin: 6px 0;
    border: 1px solid var(--tpb-border);
    border-radius: var(--tpb-radius);
    overflow: hidden;
}
.tpb--table thead tr { background: var(--tpb-accent); }
.tpb--table thead th {
    padding: var(--tpb-padding);
    color: #fff; text-align: left; font-weight: 600;
}
.tpb--table td {
    padding: var(--tpb-padding);
    border-bottom: 1px solid var(--tpb-separator);
}
.tpb--table tr:last-child td { border-bottom: none; }
.tpb--table tr:nth-child(even) { background: var(--tpb-bg); }
.tpb--table a { color: var(--tpb-accent); }

/* ───────────────────────────── 3. BADGE ─── */
.tpb--badge {
    display: flex; flex-wrap: wrap;
    gap: var(--tpb-gap); margin: 6px 0;
}
.tpb-badge {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--tpb-bg);
    border: 1px solid var(--tpb-border);
    border-radius: var(--tpb-radius);
    padding: var(--tpb-padding);
    transition: background 0.15s;
    text-decoration: none !important;
}
a.tpb-badge:hover { background: var(--tpb-border); }

/* ───────────────────────────── 4. CARDS ─── */
.tpb--cards {
    display: flex; flex-wrap: wrap;
    gap: var(--tpb-gap); margin: 6px 0;
}
.tpb--cards .tpb-item, .tpb--cards .tpb-card-link {
    text-decoration: none !important;
}
.tpb-card {
    background: var(--tpb-bg);
    border: 1px solid var(--tpb-border);
    border-top: 3px solid var(--tpb-accent);
    border-radius: var(--tpb-radius);
    padding: var(--tpb-padding);
    min-width: 90px;
    transition: transform 0.15s, box-shadow 0.15s;
}
a.tpb-card-link:hover .tpb-card {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.tpb-card .tpb-lang { display: block; font-weight: 700; margin-bottom: 4px; font-size: 0.8em; text-transform: uppercase; letter-spacing: 0.05em; }
.tpb-card .tpb-title { font-size: 0.85em; color: #555; }
.tpb-card .tpb-flag { font-size: 1.4em; display: block; margin-bottom: 4px; }

/* ───────────────────────────── 5. PILLS ─── */
.tpb--pills {
    display: flex; flex-wrap: wrap;
    gap: var(--tpb-gap); margin: 6px 0;
}
.tpb-pill {
    display: inline-flex; align-items: center; gap: 5px;
    background: var(--tpb-accent); color: #fff !important;
    border-radius: 999px;
    padding: var(--tpb-padding);
    font-size: 0.85em;
    text-decoration: none !important;
    transition: opacity 0.15s;
}
.tpb-pill:hover { opacity: 0.85; }

/* ───────────────────────────── 6. GRID ─── */
.tpb--grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: var(--tpb-gap); margin: 6px 0;
}
.tpb--grid .tpb-item, .tpb--grid a {
    text-decoration: none !important;
}
.tpb-grid-cell {
    border: 1px solid var(--tpb-border);
    border-radius: var(--tpb-radius);
    overflow: hidden;
    transition: box-shadow 0.15s;
}
a:hover .tpb-grid-cell { box-shadow: 0 2px 8px rgba(0,0,0,0.12); }
.tpb-grid-lang {
    background: var(--tpb-accent); color: #fff;
    padding: 6px 10px; font-weight: 700;
    font-size: 0.8em; text-transform: uppercase;
    letter-spacing: 0.05em;
}
.tpb-grid-title {
    padding: 8px 10px; font-size: 0.82em;
    color: #444; background: var(--tpb-bg);
}

/* ───────────────────────────── 7. INLINE ─── */
.tpb--inline {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: 4px; margin: 6px 0;
    font-size: 0.9em;
}
.tpb-inline-sep { color: #bbb; }

/* ───────────────────────────── 8. COMPACT ─── */
.tpb--compact {
    display: flex; flex-wrap: wrap;
    gap: 4px; margin: 6px 0;
}
.tpb-compact-item {
    display: inline-flex;
    text-decoration: none !important;
    transition: opacity 0.15s;
}
.tpb-compact-item:hover { opacity: 0.75; }
.tpb-compact-lang {
    display: inline-block;
    background: var(--tpb-accent); color: #fff;
    border-radius: var(--tpb-radius);
    padding: 2px 7px;
    font-size: 0.78em; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.04em;
}

/* ───────────────────────────── 9. FLAGS ─── */
.tpb--flags {
    display: flex; flex-wrap: wrap;
    gap: var(--tpb-gap); margin: 6px 0;
}
.tpb--flags .tpb-item { text-decoration: none !important; }
.tpb-flag-item {
    display: flex; flex-direction: column; align-items: center;
    background: var(--tpb-bg);
    border: 1px solid var(--tpb-border);
    border-radius: var(--tpb-radius);
    padding: 8px 12px;
    transition: background 0.15s;
    cursor: default;
}
a .tpb-flag-item { cursor: pointer; }
a:hover .tpb-flag-item { background: var(--tpb-border); }
.tpb-flag-emoji { font-size: 1.8em; line-height: 1; }
.tpb-flag-code { font-size: 0.75em; font-weight: 700; text-transform: uppercase; color: #666; margin-top: 3px; }

/* ───────────────────────────── 10. ACCORDION ─── */
.tpb--accordion { margin: 6px 0; }
.tpb-accordion-item {
    border: 1px solid var(--tpb-border);
    border-radius: var(--tpb-radius);
    margin-bottom: 4px;
    overflow: hidden;
}
.tpb-accordion-summary {
    display: flex; align-items: center; gap: 6px;
    padding: var(--tpb-padding);
    cursor: pointer; font-weight: 600;
    background: var(--tpb-bg);
    list-style: none;
    transition: background 0.15s;
}
.tpb-accordion-summary:hover { background: var(--tpb-border); }
.tpb-accordion-summary::after { content: '▸'; margin-left: auto; transition: transform 0.2s; }
details[open] .tpb-accordion-summary::after { transform: rotate(90deg); }
.tpb-accordion-body {
    padding: var(--tpb-padding);
    border-top: 1px solid var(--tpb-separator);
    background: #fff;
}

/* ───────────────────────────── 11. TIMELINE ─── */
.tpb--timeline {
    position: relative; margin: 6px 0 6px 20px;
    border-left: 2px solid var(--tpb-border);
    padding-left: 16px;
}
.tpb-timeline-item {
    position: relative; display: flex;
    align-items: flex-start; gap: 10px;
    margin-bottom: 12px;
}
.tpb-timeline-item:last-child { margin-bottom: 0; }
.tpb-timeline-dot {
    position: absolute; left: -24px; top: 2px;
    width: 22px; height: 22px;
    border-radius: 50%; background: var(--tpb-accent);
    color: #fff; display: flex; align-items: center; justify-content: center;
    font-size: 0.65em; font-weight: 700;
    border: 2px solid #fff;
    box-shadow: 0 0 0 2px var(--tpb-accent);
    flex-shrink: 0;
}
.tpb-timeline-content { flex: 1; }
.tpb-timeline-lang { font-weight: 700; font-size: 0.8em; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 2px; }
.tpb-timeline-title { font-size: 0.9em; color: #444; }

/* ───────────────────────────── 12. MAGAZINE ─── */
.tpb--magazine { margin: 6px 0; }
.tpb-magazine-item {
    display: flex; align-items: center; gap: 12px;
    padding: var(--tpb-padding);
    border-bottom: 1px solid var(--tpb-separator);
}
.tpb-magazine-item:last-child { border-bottom: none; }
.tpb-magazine-thumb img {
    width: 56px; height: 42px;
    object-fit: cover;
    border-radius: calc(var(--tpb-radius) / 2);
}
.tpb-magazine-body { flex: 1; }
.tpb-magazine-lang {
    display: inline-block;
    font-size: 0.72em; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.06em;
    border-left: 3px solid var(--tpb-accent);
    padding-left: 6px; margin-bottom: 3px;
}
.tpb-magazine-title { font-size: 0.9em; color: #333; }
a.tpb-magazine-title { text-decoration: none; color: var(--tpb-accent); }
a.tpb-magazine-title:hover { text-decoration: underline; }