/* ════════════════════════════════════════
   FANTABET — MAPPA DEL SITO
   ════════════════════════════════════════ */

.sitemap-hero {
    background: var(--nav-bg, #12100e);
    padding: 72px 32px 44px;
    border-bottom: 3px solid;
    border-image: linear-gradient(90deg, #c8410a, #e8a020) 1;
}

.sitemap-hero-inner {
    max-width: 1200px;
    margin: 0 auto;
}

.sitemap-title {
    font-family: var(--font-display, serif);
    font-size: 38px;
    font-weight: 900;
    color: #f5f2eb;
    margin: 8px 0 10px;
}

.sitemap-subtitle {
    font-size: 15px;
    color: rgba(245,242,235,0.5);
    max-width: 560px;
    line-height: 1.55;
    margin: 0;
}

/* ─── LAYOUT ─── */
.sitemap-layout { padding: 40px 0 60px; }

.sitemap-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 32px;
    display: flex;
    flex-direction: column;
    gap: 48px;
}

/* ─── SECTION ─── */
.sitemap-section {}

.sitemap-section--xml {
    background: none;
    padding: 0;
}

.sitemap-section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--border);
}

.sitemap-section-icon { font-size: 22px; }

.sitemap-section-title {
    font-family: var(--font-display, serif);
    font-size: 22px;
    font-weight: 900;
    color: var(--ink);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.sitemap-section-link {
    font-size: 13px;
    font-weight: 700;
    color: var(--red-accent, #c8410a);
    text-decoration: none;
    margin-left: auto;
    font-family: var(--font-body, sans-serif);
}
.sitemap-section-link:hover { opacity: 0.75; }

/* ─── GRIDS ─── */
.sitemap-grid {
    display: grid;
    gap: 16px;
}

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

/* ─── CARDS ─── */
.sitemap-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 18px 20px;
}

.sitemap-card--wide { /* takes remaining cols */ }

.sitemap-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
}

.sitemap-card-icon { font-size: 16px; }

.sitemap-card-title {
    font-family: var(--font-display, serif);
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ─── LISTS ─── */
.sitemap-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.sitemap-list li {
    font-size: 13px;
    line-height: 1.5;
}

.sitemap-list a {
    color: var(--ink2);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 6px;
    border-radius: 4px;
    transition: all 0.15s;
}
.sitemap-list a:hover {
    color: var(--red-accent, #c8410a);
    background: rgba(200,65,10,0.05);
}

/* 2-column list */
.sitemap-list--cols {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px 16px;
}

/* Inline list for articles */
.sitemap-list--inline {
    gap: 0;
}

.sitemap-list--inline li {
    border-bottom: 1px solid var(--border);
}
.sitemap-list--inline li:last-child { border-bottom: none; }

.sitemap-list--inline a {
    padding: 5px 6px;
    justify-content: space-between;
}

/* ─── COUNT BADGE ─── */
.sitemap-count {
    font-size: 11px;
    font-weight: 600;
    background: rgba(200,65,10,0.1);
    color: var(--red-accent, #c8410a);
    padding: 2px 7px;
    border-radius: 10px;
    font-family: var(--font-body, sans-serif);
}

.sitemap-count-sm {
    font-size: 11px;
    color: var(--muted);
    font-weight: 400;
}

/* ─── DATE ─── */
.sitemap-date {
    font-size: 11px;
    color: var(--muted);
    white-space: nowrap;
    font-weight: 400;
}

/* ─── SUB SECTIONS (per categoria blog) ─── */
.sitemap-sub-section {
    margin-bottom: 24px;
    padding: 16px 20px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
}

.sitemap-sub-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.sitemap-sub-title a {
    color: var(--red-accent, #c8410a);
    text-decoration: none;
}
.sitemap-sub-title a:hover { text-decoration: underline; }

/* ─── XML BOX ─── */
.sitemap-xml-box {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 20px 24px;
    flex-wrap: wrap;
}

.sitemap-xml-icon { font-size: 28px; flex-shrink: 0; }

.sitemap-xml-box strong { display: block; font-size: 14px; color: var(--ink); margin-bottom: 3px; }
.sitemap-xml-box p { font-size: 12px; color: var(--muted); margin: 0; }

.sitemap-xml-btn {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    padding: 10px 20px;
    background: var(--red-accent, #c8410a);
    color: white !important;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.15s;
    white-space: nowrap;
}
.sitemap-xml-btn:hover { background: #a33508; transform: translateY(-1px); }

/* ─── DARK MODE ─── */
[data-theme="dark"] .sitemap-card,
[data-theme="dark"] .sitemap-sub-section,
[data-theme="dark"] .sitemap-xml-box { background: var(--surface2, #141b2a); }

/* ─── RESPONSIVE ─── */
@media (max-width: 1024px) {
    .sitemap-grid--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .sitemap-hero { padding: 64px 20px 32px; }
    .sitemap-title { font-size: 28px; }
    .sitemap-inner { padding: 0 20px; gap: 36px; }
    .sitemap-grid--3 { grid-template-columns: 1fr; }
    .sitemap-list--cols { grid-template-columns: 1fr; }
    .sitemap-xml-box { flex-direction: column; align-items: flex-start; }
    .sitemap-xml-btn { margin-left: 0; }
}

@media (max-width: 560px) {
    .sitemap-grid--4 { grid-template-columns: 1fr; }
    .sitemap-hero { padding: 60px 16px 24px; }
    .sitemap-inner { padding: 0 16px; }
    .sitemap-title { font-size: 24px; }
}