/*
Theme Name: DirettaSport24
Theme URI: https://direttasport24.com
Author: DirettaSport24 Team
Author URI: https://direttasport24.com
Description: Tema professionale per livescore calcio e scommesse sportive. Design moderno e responsive per DirettaSport24.com
Version: 2.1.5
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: direttasport24
Tags: sports, livescore, football, responsive, dark-theme
*/

/* =============================================
   CSS Variables & Reset
============================================= */
:root {
    --primary-bg: #0d0d0d;
    --secondary-bg: #1a1a1a;
    --card-bg: #242424;
    --accent-green: #00c853;
    --accent-green-hover: #00e676;
    --text-white: #ffffff;
    --text-gray: #b0b0b0;
    --text-light-gray: #888888;
    --border-color: #333333;
    --shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    --transition: all 0.3s ease;
    --max-width: 1200px;
    --header-height: 80px;
}

*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    background-color: var(--primary-bg);
    color: var(--text-white);
    line-height: 1.6;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    color: var(--accent-green);
    text-decoration: none;
    transition: var(--transition);
}

a:hover {
    color: var(--accent-green-hover);
}

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

ul, ol {
    list-style: none;
}

.container {
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 20px;
}

/* =============================================
   Header Styles
============================================= */
.site-header {
    background-color: var(--secondary-bg);
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: 1px solid var(--border-color);
}

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

.site-logo {
    flex-shrink: 0;
}

.site-logo img {
    height: 45px;
    width: auto;
}

.main-navigation {
    display: flex;
    align-items: center;
}

.main-navigation ul {
    display: flex;
    gap: 8px;
}

.main-navigation li a {
    display: block;
    padding: 12px 20px;
    color: var(--text-white);
    font-weight: 500;
    font-size: 15px;
    border-radius: 8px;
    transition: var(--transition);
    white-space: nowrap;
}

.main-navigation li a:hover,
.main-navigation li.current-menu-item a {
    background-color: var(--accent-green);
    color: var(--primary-bg);
}

/* Mobile Menu Toggle */
.menu-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    z-index: 1001;
}

.menu-toggle span {
    display: block;
    width: 28px;
    height: 3px;
    background-color: var(--text-white);
    margin: 5px 0;
    border-radius: 2px;
    transition: var(--transition);
}

.menu-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.menu-toggle.active span:nth-child(2) {
    opacity: 0;
}

.menu-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -7px);
}

/* =============================================
   Hero / Intro Section
============================================= */
.hero-section {
    padding: 50px 0 20px;
    background: linear-gradient(180deg, var(--secondary-bg) 0%, var(--primary-bg) 100%);
}

.hero-content {
    max-width: 900px;
}

.hero-content h1 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 20px;
    color: var(--text-white);
}

.hero-content h1 span {
    color: var(--accent-green);
}

.intro-text {
    color: var(--text-gray);
    font-size: 1.1rem;
    line-height: 1.8;
}

.intro-text p {
    margin-bottom: 15px;
}

.collapsible-text {
    display: none;
}

.collapsible-text.active {
    display: block;
}

.read-more-toggle {
    background: none;
    border: none;
    color: var(--accent-green);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    padding: 10px 0;
    transition: var(--transition);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.read-more-toggle:hover {
    color: var(--accent-green-hover);
}

.read-more-toggle svg {
    transition: transform 0.3s ease;
}

.read-more-toggle.active svg {
    transform: rotate(180deg);
}

/* =============================================
   Livescore Section
============================================= */
.livescore-section {
    padding: 25px 0 40px;
}

.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 25px;
    flex-wrap: wrap;
    gap: 15px;
}

.section-title {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--text-white);
    display: flex;
    align-items: center;
    gap: 12px;
}

.section-title .icon {
    width: 32px;
    height: 32px;
    background-color: var(--accent-green);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.livescore-wrapper {
    background-color: var(--card-bg);
    border-radius: 16px;
    padding: 25px;
    border: 1px solid var(--border-color);
}

/* =============================================
   News Section
============================================= */
.news-section {
    padding: 50px 0;
}

.news-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
}

.news-card {
    background-color: var(--card-bg);
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    transition: var(--transition);
    display: flex;
    flex-direction: column;
}

.news-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow);
    border-color: var(--accent-green);
}

.news-card-image {
    position: relative;
    height: 180px;
    overflow: hidden;
}

.news-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.news-card:hover .news-card-image img {
    transform: scale(1.05);
}

.news-card-category {
    position: absolute;
    top: 12px;
    left: 12px;
    background-color: var(--accent-green);
    color: var(--primary-bg);
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
}

.news-card-content {
    padding: 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.news-card-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 12px;
    color: var(--text-white);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.news-card-excerpt {
    color: var(--text-gray);
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 20px;
    flex-grow: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.news-card-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: transparent;
    border: 2px solid var(--accent-green);
    color: var(--accent-green);
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    transition: var(--transition);
    align-self: flex-start;
}

.news-card-btn:hover {
    background-color: var(--accent-green);
    color: var(--primary-bg);
}

/* =============================================
   Footer Styles
============================================= */
.site-footer {
    background-color: var(--secondary-bg);
    border-top: 1px solid var(--border-color);
    padding: 50px 0 30px;
    margin-top: 60px;
}

.footer-inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 40px;
}

.footer-brand {
    max-width: 350px;
}

.footer-logo {
    margin-bottom: 20px;
}

.footer-logo img {
    height: 40px;
}

.footer-description {
    color: var(--text-gray);
    font-size: 0.95rem;
    line-height: 1.7;
}

.footer-nav ul {
    display: flex;
    /* v2.1.3: was nowrap — with the 9-item footer menu the row grew to
       ~780px, widening the whole page on phones (horizontal scroll, footer
       text hanging past the right edge, and Google's "content wider than
       screen" mobile flag). Wrapping keeps it inside the container at any
       item count. */
    flex-wrap: wrap;
    gap: 10px 30px;
}

.footer-nav a {
    color: var(--text-white);
    font-weight: 500;
    padding: 8px 0;
}

.footer-nav a:hover {
    color: var(--accent-green);
}

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

.copyright {
    color: var(--text-light-gray);
    font-size: 0.9rem;
}

.footer-disclaimer {
    color: var(--text-light-gray);
    font-size: 0.8rem;
    max-width: 600px;
    text-align: right;
    line-height: 1.5;
}

/* =============================================
   Page Styles
============================================= */
.page-header {
    padding: 60px 0 25px;
    background: linear-gradient(180deg, var(--secondary-bg) 0%, var(--primary-bg) 100%);
    text-align: center;
}

.page-title {
    font-size: 2.8rem;
    font-weight: 700;
    margin-bottom: 15px;
}

.page-subtitle {
    color: var(--text-gray);
    font-size: 1.2rem;
    max-width: 700px;
    margin: 0 auto;
}

.page-content {
    padding: 20px 0 50px;
}

.content-wrapper {
    max-width: 800px;
    margin: 0 auto;
}

.content-wrapper h2 {
    font-size: 1.8rem;
    margin: 40px 0 20px;
    color: var(--text-white);
}

.content-wrapper h3 {
    font-size: 1.4rem;
    margin: 30px 0 15px;
    color: var(--text-white);
}

.content-wrapper p {
    color: var(--text-gray);
    margin-bottom: 20px;
    line-height: 1.8;
}

.content-wrapper ul {
    margin: 20px 0;
    padding-left: 25px;
}

.content-wrapper li {
    color: var(--text-gray);
    margin-bottom: 10px;
    position: relative;
    list-style: disc;
}

/* Bookmaker Cards */
.bookmaker-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
    margin: 40px 0;
}

.bookmaker-card {
    background-color: var(--card-bg);
    border-radius: 16px;
    padding: 30px;
    border: 1px solid var(--border-color);
    transition: var(--transition);
    text-align: center;
}

.bookmaker-card:hover {
    border-color: var(--accent-green);
    transform: translateY(-3px);
}

.bookmaker-card h3 {
    margin: 0 0 15px;
    font-size: 1.5rem;
}

.bookmaker-rating {
    display: flex;
    justify-content: center;
    gap: 4px;
    margin-bottom: 15px;
}

.bookmaker-rating .star {
    color: #ffc107;
    font-size: 20px;
}

.bookmaker-bonus {
    background-color: var(--accent-green);
    color: var(--primary-bg);
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 700;
    margin-bottom: 15px;
    display: inline-block;
}

.bookmaker-features {
    text-align: left;
    margin: 20px 0;
}

.bookmaker-features li {
    color: var(--text-gray);
    padding: 5px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.bookmaker-features li::before {
    content: "✓";
    color: var(--accent-green);
    font-weight: bold;
}

.bookmaker-btn {
    display: inline-block;
    background-color: var(--accent-green);
    color: var(--primary-bg);
    padding: 14px 30px;
    border-radius: 8px;
    font-weight: 600;
    transition: var(--transition);
    width: 100%;
}

.bookmaker-btn:hover {
    background-color: var(--accent-green-hover);
    color: var(--primary-bg);
}

/* Casino Cards */
.casino-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    margin: 40px 0;
}

.casino-card {
    background-color: var(--card-bg);
    border-radius: 16px;
    padding: 25px;
    border: 1px solid var(--border-color);
    transition: var(--transition);
    text-align: center;
}

.casino-card:hover {
    border-color: var(--accent-green);
    transform: translateY(-3px);
}

.casino-card h3 {
    margin: 0 0 10px;
    font-size: 1.3rem;
}

.casino-bonus-text {
    color: var(--accent-green);
    font-weight: 600;
    font-size: 1.1rem;
    margin-bottom: 15px;
}

/* Contact Form */
.contact-form {
    background-color: var(--card-bg);
    border-radius: 16px;
    padding: 40px;
    border: 1px solid var(--border-color);
    margin-top: 30px;
}

.form-group {
    margin-bottom: 25px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: var(--text-white);
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 15px;
    background-color: var(--secondary-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-white);
    font-size: 1rem;
    transition: var(--transition);
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--accent-green);
}

.form-group textarea {
    min-height: 150px;
    resize: vertical;
}

.submit-btn {
    background-color: var(--accent-green);
    color: var(--primary-bg);
    padding: 15px 40px;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}

.submit-btn:hover {
    background-color: var(--accent-green-hover);
}

/* About Page Styles */
.team-values {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    margin: 40px 0;
}

.value-card {
    background-color: var(--card-bg);
    border-radius: 16px;
    padding: 30px;
    text-align: center;
    border: 1px solid var(--border-color);
}

.value-icon {
    font-size: 3rem;
    margin-bottom: 15px;
}

.value-card h3 {
    margin: 0 0 10px;
}

.value-card p {
    color: var(--text-gray);
    font-size: 0.95rem;
}

/* =============================================
   Pronostici Page
============================================= */
.pronostici-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
    margin: 40px 0;
}

.pronostico-card {
    background-color: var(--card-bg);
    border-radius: 16px;
    padding: 25px;
    border: 1px solid var(--border-color);
    transition: var(--transition);
}

.pronostico-card:hover {
    border-color: var(--accent-green);
}

.pronostico-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.pronostico-league {
    background-color: var(--accent-green);
    color: var(--primary-bg);
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.pronostico-date {
    color: var(--text-light-gray);
    font-size: 0.9rem;
}

.pronostico-match {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 15px;
    color: var(--text-white);
}

.pronostico-tip {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--secondary-bg);
    padding: 15px;
    border-radius: 8px;
}

.tip-label {
    color: var(--text-gray);
    font-size: 0.9rem;
}

.tip-value {
    color: var(--accent-green);
    font-weight: 700;
    font-size: 1.1rem;
}

.tip-odds {
    background-color: var(--accent-green);
    color: var(--primary-bg);
    padding: 8px 15px;
    border-radius: 6px;
    font-weight: 700;
}

/* =============================================
   Enhanced Pronostici Page Styles
============================================= */
.pronostici-intro {
    margin-bottom: 40px;
}

.pronostici-section {
    margin-top: 30px;
}

.update-badge {
    background-color: rgba(0, 200, 83, 0.15);
    color: var(--accent-green);
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.pronostici-grid-full {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
    margin-top: 25px;
}

.pronostico-card-enhanced {
    background-color: var(--card-bg);
    border-radius: 16px;
    padding: 25px;
    border: 1px solid var(--border-color);
    transition: var(--transition);
    display: flex;
    flex-direction: column;
}

.pronostico-card-enhanced:hover {
    border-color: var(--accent-green);
    transform: translateY(-3px);
    box-shadow: var(--shadow);
}

.pronostico-card-enhanced .pronostico-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.pronostico-matchday {
    color: var(--text-light-gray);
    font-size: 0.85rem;
}

.pronostico-datetime {
    display: flex;
    gap: 20px;
    margin-bottom: 15px;
    color: var(--text-gray);
    font-size: 0.9rem;
}

.pronostico-date-full,
.pronostico-time {
    display: flex;
    align-items: center;
    gap: 6px;
}

.pronostico-date-full svg,
.pronostico-time svg {
    opacity: 0.7;
}

.pronostico-card-enhanced .pronostico-match {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 12px;
    color: var(--text-white);
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.pronostico-match .team {
    flex: 1;
    min-width: 80px;
}

.pronostico-match .team.home {
    text-align: right;
}

.pronostico-match .team.away {
    text-align: left;
}

.pronostico-match .vs {
    color: var(--text-light-gray);
    font-size: 0.9rem;
    font-weight: 400;
    padding: 4px 10px;
    background-color: var(--secondary-bg);
    border-radius: 4px;
}

.pronostico-analysis {
    color: var(--text-gray);
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 15px;
    flex-grow: 1;
}

.pronostico-confidence {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 15px;
}

.confidence-label {
    color: var(--text-light-gray);
    font-size: 0.8rem;
    white-space: nowrap;
}

.confidence-bar {
    flex-grow: 1;
    height: 6px;
    background-color: var(--secondary-bg);
    border-radius: 3px;
    overflow: hidden;
}

.confidence-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent-green), #00e676);
    border-radius: 3px;
    transition: width 0.5s ease;
}

.confidence-value {
    color: var(--accent-green);
    font-weight: 600;
    font-size: 0.85rem;
    min-width: 35px;
}

.pronostico-tip-link {
    display: block;
    text-decoration: none;
    background-color: var(--secondary-bg);
    border-radius: 10px;
    padding: 15px;
    transition: var(--transition);
    border: 1px solid transparent;
}

.pronostico-tip-link:hover {
    border-color: var(--accent-green);
    background-color: rgba(0, 200, 83, 0.08);
}

.pronostico-tip-link .pronostico-tip {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: none;
    padding: 0;
    margin-bottom: 10px;
}

.tip-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tip-info .tip-label {
    font-size: 0.8rem;
}

.tip-info .tip-value {
    font-size: 1.2rem;
}

.bet-cta {
    display: block;
    text-align: center;
    color: var(--accent-green);
    font-weight: 600;
    font-size: 0.9rem;
    padding-top: 10px;
    border-top: 1px solid var(--border-color);
}

/* League-specific colors */
.pronostico-league.league-premier-league {
    background-color: #3d195b;
    color: #fff;
}

.pronostico-league.league-champions-league {
    background-color: #0a1128;
    color: #fff;
}

.pronostico-league.league-la-liga {
    background-color: #ee8707;
    color: #fff;
}

.pronostico-league.league-bundesliga {
    background-color: #d20515;
    color: #fff;
}

.pronostico-league.league-ligue-1 {
    background-color: #091c3e;
    color: #fff;
}

/* Pronostici Disclaimer */
.pronostici-disclaimer {
    margin-top: 50px;
    padding: 25px;
    background-color: var(--secondary-bg);
    border-radius: 12px;
    border-left: 4px solid #ffc107;
}

.pronostici-disclaimer p {
    color: var(--text-gray);
    font-size: 0.9rem;
    line-height: 1.7;
    margin: 0;
}

.pronostici-disclaimer strong {
    color: #ffc107;
}

/* =============================================
   Landing Page Styles (Siti Scommesse & Casino)
============================================= */

/* Hero Section - Full impact */
.landing-hero {
    padding: 100px 0 80px;
    background: linear-gradient(135deg, var(--secondary-bg) 0%, var(--primary-bg) 40%, #0a2810 100%);
    border-bottom: 2px solid var(--accent-green);
    position: relative;
    overflow: hidden;
}

.landing-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(circle at 20% 80%, rgba(0, 200, 83, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(0, 200, 83, 0.08) 0%, transparent 40%);
    pointer-events: none;
}

.landing-hero-content {
    max-width: 850px;
    text-align: center;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.landing-badge {
    display: inline-block;
    background: linear-gradient(90deg, var(--accent-green), #00e676);
    color: var(--primary-bg);
    padding: 10px 24px;
    border-radius: 30px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 30px;
    box-shadow: 0 4px 15px rgba(0, 200, 83, 0.4);
    animation: pulse-glow 2s ease-in-out infinite;
}

@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 4px 15px rgba(0, 200, 83, 0.4); }
    50% { box-shadow: 0 4px 25px rgba(0, 200, 83, 0.6); }
}

.landing-title {
    font-size: 3.2rem;
    font-weight: 800;
    line-height: 1.15;
    margin-bottom: 28px;
    color: var(--text-white);
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
}

.landing-subtitle {
    font-size: 1.3rem;
    color: var(--text-gray);
    line-height: 1.8;
    margin-bottom: 40px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.landing-cta-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}

.landing-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(90deg, var(--accent-green), #00e676);
    color: var(--primary-bg);
    padding: 20px 45px;
    border-radius: 14px;
    font-size: 1.15rem;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 6px 25px rgba(0, 200, 83, 0.35);
    position: relative;
    overflow: hidden;
}

.landing-cta-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s ease;
}

.landing-cta-btn:hover::before {
    left: 100%;
}

.landing-cta-btn:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 35px rgba(0, 200, 83, 0.45);
    color: var(--primary-bg);
}

.landing-cta-btn-large {
    padding: 24px 55px;
    font-size: 1.25rem;
}

.landing-cta-note {
    color: var(--text-light-gray);
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.landing-cta-note::before {
    content: '✓';
    color: var(--accent-green);
    font-weight: bold;
}

/* Intro Section - Editorial style */
.landing-intro {
    padding: 70px 0;
    background-color: var(--primary-bg);
    position: relative;
}

.landing-intro::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    width: 60px;
    height: 4px;
    background: var(--accent-green);
    border-radius: 2px;
}

.landing-intro .content-wrapper {
    position: relative;
    padding-left: 30px;
    border-left: 3px solid var(--accent-green);
}

.landing-intro .content-wrapper p {
    font-size: 1.15rem;
    line-height: 1.9;
    color: var(--text-gray);
}

.landing-intro .content-wrapper p:first-child::first-letter {
    font-size: 3.5rem;
    font-weight: 700;
    color: var(--accent-green);
    float: left;
    line-height: 1;
    margin-right: 12px;
    margin-top: 5px;
}

/* Features Section */
.landing-features {
    padding: 80px 0;
    background-color: var(--secondary-bg);
    position: relative;
}

.landing-features::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent-green), transparent);
}

.section-title-center {
    text-align: center;
    font-size: 2.4rem;
    font-weight: 700;
    margin-bottom: 20px;
    color: var(--text-white);
    position: relative;
}

.section-title-center::after {
    content: '';
    display: block;
    width: 80px;
    height: 4px;
    background: var(--accent-green);
    margin: 20px auto 0;
    border-radius: 2px;
}

.section-subtitle-center {
    text-align: center;
    color: var(--text-gray);
    font-size: 1.1rem;
    margin-top: 15px;
    margin-bottom: 50px;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

.feature-card {
    background: linear-gradient(145deg, var(--card-bg), rgba(30, 30, 30, 0.8));
    border-radius: 20px;
    padding: 40px;
    border: 1px solid var(--border-color);
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
}

.feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 0;
    background: var(--accent-green);
    transition: height 0.4s ease;
}

.feature-card:hover::before {
    height: 100%;
}

.feature-card:hover {
    border-color: var(--accent-green);
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.feature-icon {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, rgba(0, 200, 83, 0.25), rgba(0, 200, 83, 0.05));
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
    color: var(--accent-green);
    border: 1px solid rgba(0, 200, 83, 0.2);
}

.feature-card h3 {
    font-size: 1.35rem;
    margin-bottom: 15px;
    color: var(--text-white);
}

.feature-card p {
    color: var(--text-gray);
    line-height: 1.8;
    font-size: 0.95rem;
}

/* Stake Highlight Section */
.landing-stake-highlight {
    padding: 80px 0;
    background: linear-gradient(180deg, var(--primary-bg) 0%, var(--secondary-bg) 100%);
}

.stake-highlight-box {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 50px;
    align-items: center;
    background: linear-gradient(145deg, var(--card-bg), rgba(20, 20, 20, 0.95));
    border-radius: 24px;
    padding: 55px;
    border: 2px solid var(--accent-green);
    box-shadow: 0 25px 50px rgba(0, 200, 83, 0.15), 0 0 0 1px rgba(0, 200, 83, 0.1);
    position: relative;
    overflow: hidden;
}

.stake-highlight-box::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(0, 200, 83, 0.08) 0%, transparent 70%);
    pointer-events: none;
}

.stake-highlight-content {
    position: relative;
    z-index: 1;
}

.stake-highlight-content h2 {
    font-size: 2rem;
    margin-bottom: 25px;
    color: var(--text-white);
    display: flex;
    align-items: center;
    gap: 15px;
}

.stake-highlight-content h2::before {
    content: '';
    width: 5px;
    height: 35px;
    background: var(--accent-green);
    border-radius: 3px;
}

.stake-highlight-content p {
    color: var(--text-gray);
    line-height: 1.85;
    margin-bottom: 18px;
    font-size: 1.02rem;
}

.stake-highlight-cta {
    text-align: center;
    padding: 45px 35px;
    background: linear-gradient(145deg, var(--secondary-bg), rgba(25, 25, 25, 0.98));
    border-radius: 20px;
    border: 1px solid var(--border-color);
    position: relative;
    z-index: 1;
}

.stake-logo-placeholder {
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--accent-green);
    margin-bottom: 18px;
    letter-spacing: 3px;
    text-shadow: 0 0 30px rgba(0, 200, 83, 0.3);
}

.stake-rating {
    margin-bottom: 28px;
}

.rating-stars {
    display: block;
    font-size: 2rem;
    color: #ffc107;
    margin-bottom: 10px;
    letter-spacing: 3px;
}

.rating-text {
    color: var(--text-gray);
    font-size: 0.95rem;
    font-weight: 500;
}

/* Casino Hero Variant */
.casino-hero {
    background: linear-gradient(135deg, var(--secondary-bg) 0%, var(--primary-bg) 40%, #1a0a2e 100%);
}

.casino-hero::before {
    background:
        radial-gradient(circle at 20% 80%, rgba(138, 43, 226, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(138, 43, 226, 0.08) 0%, transparent 40%);
}

/* Casino Games Section */
.casino-games-section {
    padding: 80px 0;
    background-color: var(--primary-bg);
    position: relative;
}

.casino-games-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--border-color), transparent);
}

.games-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
}

.game-card {
    background: linear-gradient(145deg, var(--card-bg), rgba(25, 25, 25, 0.95));
    border-radius: 20px;
    padding: 35px 25px;
    text-align: center;
    border: 1px solid var(--border-color);
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
}

.game-card::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--accent-green), #00e676);
    transform: scaleX(0);
    transition: transform 0.4s ease;
}

.game-card:hover::before {
    transform: scaleX(1);
}

.game-card:hover {
    border-color: var(--accent-green);
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.game-icon {
    font-size: 3.5rem;
    margin-bottom: 22px;
    display: block;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}

.game-card h3 {
    font-size: 1.25rem;
    margin-bottom: 15px;
    color: var(--text-white);
}

.game-card p {
    color: var(--text-gray);
    line-height: 1.7;
    font-size: 0.9rem;
    margin-bottom: 22px;
}

.game-count {
    display: inline-block;
    background: linear-gradient(90deg, rgba(0, 200, 83, 0.25), rgba(0, 200, 83, 0.08));
    color: var(--accent-green);
    padding: 10px 20px;
    border-radius: 25px;
    font-size: 0.85rem;
    font-weight: 700;
    border: 1px solid rgba(0, 200, 83, 0.2);
}

/* Comparison Section */
.landing-comparison {
    padding: 80px 0;
    background-color: var(--secondary-bg);
    position: relative;
}

.comparison-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
}

.comparison-card {
    background: linear-gradient(145deg, var(--card-bg), rgba(30, 30, 30, 0.9));
    border-radius: 18px;
    padding: 35px;
    border: 1px solid var(--border-color);
    transition: all 0.3s ease;
    position: relative;
}

.comparison-card::after {
    content: '';
    position: absolute;
    top: 15px;
    right: 15px;
    width: 30px;
    height: 30px;
    background-color: rgba(255, 193, 7, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.comparison-card:hover {
    transform: translateY(-5px);
    border-color: rgba(255, 193, 7, 0.3);
}

.comparison-card h3 {
    font-size: 1.5rem;
    margin-bottom: 18px;
    color: var(--text-white);
    padding-bottom: 15px;
    border-bottom: 1px solid var(--border-color);
}

.comparison-card p {
    color: var(--text-gray);
    line-height: 1.75;
    margin-bottom: 22px;
    font-size: 0.95rem;
}

.comparison-verdict {
    display: inline-block;
    background-color: rgba(255, 193, 7, 0.15);
    color: #ffc107;
    padding: 10px 20px;
    border-radius: 25px;
    font-size: 0.85rem;
    font-weight: 600;
    border: 1px solid rgba(255, 193, 7, 0.2);
}

/* FAQ Section */
.landing-faq {
    padding: 80px 0;
    background-color: var(--primary-bg);
    position: relative;
}

.landing-faq::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--border-color), transparent);
}

.faq-list {
    max-width: 850px;
    margin: 0 auto;
}

.faq-item {
    background: linear-gradient(145deg, var(--card-bg), rgba(25, 25, 25, 0.95));
    border-radius: 14px;
    padding: 28px 35px;
    margin-bottom: 18px;
    border: 1px solid var(--border-color);
    transition: all 0.3s ease;
}

.faq-item:hover {
    border-color: var(--accent-green);
    transform: translateX(5px);
}

.faq-item h3 {
    font-size: 1.15rem;
    margin-bottom: 14px;
    color: var(--text-white);
    display: flex;
    align-items: center;
    gap: 12px;
}

.faq-item h3::before {
    content: '?';
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: linear-gradient(135deg, var(--accent-green), #00e676);
    color: var(--primary-bg);
    border-radius: 50%;
    font-size: 0.9rem;
    font-weight: 700;
    flex-shrink: 0;
}

.faq-item p {
    color: var(--text-gray);
    line-height: 1.75;
    margin: 0;
    padding-left: 40px;
}

/* Final CTA */
.landing-final-cta {
    padding: 100px 0;
    background: linear-gradient(135deg, #0a2810 0%, var(--secondary-bg) 50%, var(--primary-bg) 100%);
    position: relative;
    overflow: hidden;
}

.landing-final-cta::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(0, 200, 83, 0.1) 0%, transparent 60%);
    pointer-events: none;
}

.final-cta-box {
    text-align: center;
    max-width: 650px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.final-cta-box h2 {
    font-size: 2.8rem;
    margin-bottom: 25px;
    color: var(--text-white);
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
}

.final-cta-box p {
    color: var(--text-gray);
    font-size: 1.15rem;
    line-height: 1.85;
    margin-bottom: 40px;
}

/* Landing Disclaimer */
.landing-disclaimer {
    padding: 35px 0;
    background-color: var(--secondary-bg);
    border-top: 1px solid var(--border-color);
}

.landing-disclaimer p {
    color: var(--text-light-gray);
    font-size: 0.85rem;
    line-height: 1.7;
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
}

.landing-disclaimer strong {
    color: #ffc107;
}

.landing-disclaimer a {
    color: var(--accent-green);
}

/* =============================================
   Responsive Design
============================================= */
@media (max-width: 1024px) {
    .news-grid {
        grid-template-columns: repeat(2, 1fr);
    }

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

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

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

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

    .pronostici-grid-full {
        grid-template-columns: 1fr;
    }

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

    .stake-highlight-box {
        grid-template-columns: 1fr;
    }

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

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

@media (max-width: 768px) {
    :root {
        --header-height: 70px;
    }

    .menu-toggle {
        display: block;
    }

    .main-navigation {
        position: fixed;
        top: var(--header-height);
        left: 0;
        right: 0;
        background-color: var(--secondary-bg);
        padding: 20px;
        transform: translateY(-100%);
        opacity: 0;
        visibility: hidden;
        transition: var(--transition);
        border-bottom: 1px solid var(--border-color);
    }

    .main-navigation.active {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
    }

    .main-navigation ul {
        flex-direction: column;
        gap: 5px;
    }

    .main-navigation li a {
        display: block;
        text-align: center;
        padding: 15px;
    }

    .hero-content h1 {
        font-size: 1.8rem;
    }

    .intro-text {
        font-size: 1rem;
    }

    .section-title {
        font-size: 1.4rem;
    }

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

    .news-card-image {
        height: 200px;
    }

    .footer-inner {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .footer-brand {
        max-width: 100%;
    }

    .footer-nav ul {
        justify-content: center;
        gap: 8px 22px;
    }

    .footer-bottom {
        flex-direction: column;
        text-align: center;
    }

    .footer-disclaimer {
        text-align: center;
    }

    .page-title {
        font-size: 2rem;
    }

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

    .team-values {
        grid-template-columns: 1fr;
    }

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

    .game-card {
        padding: 25px;
    }

    .game-icon {
        font-size: 2.5rem;
    }

    .pronostico-card-enhanced .pronostico-match {
        font-size: 1.1rem;
        justify-content: center;
        text-align: center;
    }

    .pronostico-match .team.home,
    .pronostico-match .team.away {
        text-align: center;
    }

    .pronostico-datetime {
        justify-content: center;
    }

    .pronostico-confidence {
        flex-wrap: wrap;
        justify-content: center;
    }

    .section-header {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }

    .contact-form {
        padding: 25px;
    }

    .livescore-wrapper {
        padding: 15px;
    }

    /* Landing page mobile */
    .landing-hero {
        padding: 60px 0 50px;
    }

    .landing-hero::before {
        display: none;
    }

    .landing-title {
        font-size: 1.9rem;
        line-height: 1.25;
    }

    .landing-subtitle {
        font-size: 1.05rem;
    }

    .landing-badge {
        font-size: 11px;
        padding: 8px 18px;
    }

    .landing-cta-btn {
        padding: 16px 30px;
        font-size: 1rem;
        width: 100%;
        justify-content: center;
    }

    .landing-cta-note::before {
        display: none;
    }

    .landing-intro .content-wrapper {
        padding-left: 20px;
        border-left-width: 2px;
    }

    .landing-intro .content-wrapper p:first-child::first-letter {
        font-size: 2.5rem;
    }

    .section-title-center {
        font-size: 1.6rem;
    }

    .section-title-center::after {
        width: 60px;
        height: 3px;
    }

    .feature-card {
        padding: 30px;
    }

    .feature-icon {
        width: 55px;
        height: 55px;
    }

    .stake-highlight-box {
        padding: 30px 25px;
        gap: 30px;
    }

    .stake-highlight-content h2::before {
        display: none;
    }

    .stake-highlight-cta {
        padding: 30px 20px;
    }

    .stake-logo-placeholder {
        font-size: 1.8rem;
    }

    .comparison-card {
        padding: 28px;
    }

    .faq-item {
        padding: 22px 25px;
    }

    .faq-item h3::before {
        width: 24px;
        height: 24px;
        font-size: 0.8rem;
    }

    .faq-item p {
        padding-left: 36px;
    }

    .landing-final-cta {
        padding: 70px 0;
    }

    .final-cta-box h2 {
        font-size: 1.8rem;
    }

    .final-cta-box p {
        font-size: 1rem;
    }

    .faq-item {
        padding: 20px;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 15px;
    }

    .site-logo img {
        height: 35px;
    }

    .hero-section {
        padding: 30px 0;
    }

    .hero-content h1 {
        font-size: 1.5rem;
    }

    .news-section {
        padding: 30px 0;
    }

    .bookmaker-card,
    .casino-card,
    .value-card {
        padding: 20px;
    }
}

/* =============================================
   Utility Classes
============================================= */
.text-center {
    text-align: center;
}

.text-accent {
    color: var(--accent-green);
}

.mb-20 {
    margin-bottom: 20px;
}

.mb-40 {
    margin-bottom: 40px;
}

.mt-40 {
    margin-top: 40px;
}

/* Loading animation for livescores */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

.loading {
    animation: pulse 1.5s ease-in-out infinite;
}

/* Live indicator */
.live-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background-color: #dc3545;
    color: white;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
}

.live-badge::before {
    content: "";
    width: 8px;
    height: 8px;
    background-color: white;
    border-radius: 50%;
    animation: pulse 1s ease-in-out infinite;
}
/* =============================================
   v1.1 — Editorial content fixes
   ============================================= */

/* Restore list bullets inside article/page content (the global reset removed
   them from every editorial list). */
.content-wrapper ul,
.post-content ul,
.entry-content ul {
    list-style: disc;
    padding-left: 1.4rem;
}

.content-wrapper ol,
.post-content ol,
.entry-content ol {
    list-style: decimal;
    padding-left: 1.4rem;
}

/* Real-post news cards: image link block + title link inherit card colors. */
.news-card-image {
    display: block;
    background: var(--secondary-bg);
    min-height: 160px;
}

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

.news-card-title a {
    color: inherit;
    text-decoration: none;
}

.news-card-title a:hover {
    color: var(--accent-green);
}

/* Pagination (Notizie) */
.pagination-nav {
    margin: 24px 0 8px;
    text-align: center;
}

.pagination-nav .page-numbers {
    display: inline-block;
    padding: 8px 14px;
    margin: 0 3px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-white);
    text-decoration: none;
    font-weight: 600;
}

.pagination-nav .page-numbers.current,
.pagination-nav .page-numbers:hover {
    background: var(--accent-green);
    color: #06210f;
    border-color: var(--accent-green);
}

/* =====================================================================
   v2.0 — "Stadio Notturno" redesign.
   Cinematic hero with generated night-stadium art (73KB webp; the
   optional ambient video loads only after window.load on desktop, so
   LCP/CLS never pay for it) + the sport-verticals strip that funnels
   homepage link equity to the four money pages.
   All selectors are new — nothing below overrides the v1 cascade.
   ===================================================================== */

.hero-v2 {
    position: relative;
    overflow: hidden;
    padding: 5.5rem 0 4rem;
    background: var(--primary-bg);
}

.hero-v2 .hero-media {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.hero-v2 .hero-media img,
.hero-v2 .hero-media video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 40%;
}

.hero-v2 .hero-media video {
    opacity: 0;
    transition: opacity 1.2s ease;
}

.hero-v2 .hero-media video.is-on {
    opacity: 1;
}

/* Readability first: the art stays atmosphere, never competition. */
.hero-v2 .hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(180deg, rgba(13, 13, 13, 0.55) 0%, rgba(13, 13, 13, 0.78) 55%, var(--primary-bg) 100%),
        radial-gradient(120% 80% at 15% 20%, rgba(0, 200, 83, 0.12) 0%, transparent 55%);
}

.hero-v2 .container {
    position: relative;
    z-index: 2;
}

.hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent-green);
    background: rgba(0, 200, 83, 0.08);
    border: 1px solid rgba(0, 200, 83, 0.35);
    border-radius: 999px;
    padding: 0.35rem 0.9rem;
    margin: 0 0 1.1rem;
    backdrop-filter: blur(4px);
}

.hero-live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-green);
    box-shadow: 0 0 0 0 rgba(0, 200, 83, 0.6);
    animation: ds24-live-pulse 2s infinite;
}

@keyframes ds24-live-pulse {
    70% { box-shadow: 0 0 0 9px rgba(0, 200, 83, 0); }
    100% { box-shadow: 0 0 0 0 rgba(0, 200, 83, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .hero-live-dot { animation: none; }
}

.hero-v2 .hero-content h1 {
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.55);
    letter-spacing: -0.02em;
}

.hero-v2 .hero-content h1 span {
    background: linear-gradient(90deg, var(--accent-green) 0%, var(--accent-green-hover) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-v2 .intro-text p {
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6);
}

.hero-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    margin-top: 1.6rem;
}

.hero-cta {
    display: inline-block;
    padding: 0.7rem 1.4rem;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
    color: var(--text-white);
    border: 1px solid var(--border-color);
    background: rgba(26, 26, 26, 0.7);
    backdrop-filter: blur(6px);
    transition: var(--transition);
}

.hero-cta:hover {
    border-color: var(--accent-green);
    color: var(--accent-green);
    transform: translateY(-1px);
}

.hero-cta-primary {
    background: linear-gradient(90deg, var(--accent-green) 0%, var(--accent-green-hover) 100%);
    border-color: transparent;
    color: #06210f;
}

.hero-cta-primary:hover {
    color: #06210f;
    box-shadow: 0 6px 24px rgba(0, 200, 83, 0.35);
}

/* ------------------------------------------------ sport verticals strip. */

.sport-cards-section {
    padding: 0 0 1rem;
    background: var(--primary-bg);
}

.sport-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-top: -1.5rem;
    position: relative;
    z-index: 3;
}

.sport-card {
    display: flex;
    flex-direction: column;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    transition: var(--transition);
    box-shadow: var(--shadow);
}

.sport-card:hover {
    transform: translateY(-4px);
    border-color: var(--accent-green);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(0, 200, 83, 0.25);
}

.sport-card-media {
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.sport-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.sport-card:hover .sport-card-media img {
    transform: scale(1.06);
}

.sport-card-body {
    display: block;
    padding: 0.85rem 1rem 1rem;
}

.sport-card-title {
    display: block;
    font-weight: 700;
    font-size: 1.02rem;
    color: var(--text-white);
    margin-bottom: 0.25rem;
}

.sport-card:hover .sport-card-title {
    color: var(--accent-green);
}

.sport-card-desc {
    display: block;
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--text-gray);
}

@media (max-width: 991px) {
    .sport-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 560px) {
    /* Phones: compact 2-col strip. Full-size stacked cards pushed the
       livescore — the page's actual answer — four screens down. */
    .sport-cards {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.6rem;
        margin-top: -0.5rem;
    }

    .sport-card-media {
        aspect-ratio: 21 / 9;
    }

    .sport-card-body {
        padding: 0.55rem 0.7rem 0.65rem;
    }

    .sport-card-title {
        font-size: 0.88rem;
        margin-bottom: 0;
    }

    .sport-card-desc {
        display: none;
    }

    .hero-v2 {
        padding: 3rem 0 2.2rem;
    }

    .hero-v2 .intro-text {
        font-size: 0.95rem;
    }
}

/* =====================================================================
   v2.0.1 — Stadio Notturno on EVERY page.
   All inner templates share .page-header; the banner art is set per page
   as --ds24-banner from functions.php (tennis pages get the tennis art,
   basket the arena, pronostici the tactical board, articles the pitch).
   Content, H1s and metas are untouched — this is presentation only.
   ===================================================================== */

.page-header {
    position: relative;
    overflow: hidden;
    padding: 72px 0 38px;
    background: var(--primary-bg);
}

.page-header::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--ds24-banner, none);
    background-size: cover;
    background-position: center 35%;
    opacity: 0.55;
}

.page-header::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(13, 13, 13, 0.5) 0%, rgba(13, 13, 13, 0.75) 55%, var(--primary-bg) 100%),
        radial-gradient(120% 90% at 12% 15%, rgba(0, 200, 83, 0.10) 0%, transparent 55%);
}

.page-header .container {
    position: relative;
    z-index: 1;
}

.page-header .page-title {
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.6);
    letter-spacing: -0.02em;
}

.page-header .page-subtitle {
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6);
}

@media (max-width: 640px) {
    .page-header {
        padding: 48px 0 28px;
    }
}


/* =====================================================================
   v2.0.3 — real dropdown navigation.
   The flex rule on .main-navigation ul flattened sub-menus INTO the bar
   (that is why the menu overflowed). Sub-menus are now proper dark
   dropdown panels on desktop and stacked groups in the mobile drawer.
   ===================================================================== */

.main-navigation .menu > li {
    position: relative;
}

.main-navigation .menu .sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 250px;
    flex-direction: column;
    gap: 2px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 8px;
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.55);
    z-index: 300;
}

.main-navigation .menu > li:hover > .sub-menu,
.main-navigation .menu > li:focus-within > .sub-menu {
    display: flex;
}

.main-navigation .sub-menu li a {
    padding: 10px 14px;
    font-size: 14px;
    border-radius: 6px;
}

.main-navigation .menu > li.menu-item-has-children > a::after {
    content: ' \25BE';
    font-size: 10px;
    color: var(--text-gray);
}

.main-navigation .menu > li.menu-item-has-children:hover > a::after {
    color: inherit;
}

@media (max-width: 768px) {
    /* v2.1.2: the drawer content is taller than small phones (menu ~825px
       vs 667-812px viewports) and the body is scroll-locked while open —
       without its own scrolling, the last items were unreachable. */
    .main-navigation {
        max-height: calc(100vh - var(--header-height));
        max-height: calc(100dvh - var(--header-height));
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    }

    /* v2.1.2: items without children rendered centered while grouped items
       sat left — one alignment for every row. */
    .main-navigation li a {
        text-align: left;
    }

    /* v2.1.2: the ▾ caret promises a dropdown, but on mobile the children
       are already expanded — drop the noise. */
    .main-navigation .menu > li.menu-item-has-children > a::after {
        content: '';
    }

    .main-navigation .menu .sub-menu {
        display: flex;
        position: static;
        min-width: 0;
        background: transparent;
        border: none;
        border-left: 2px solid var(--border-color);
        border-radius: 0;
        box-shadow: none;
        padding: 0 0 6px 10px;
        margin: 0 0 4px;
    }

    .main-navigation .sub-menu li a {
        text-align: left;
        padding: 10px 14px;
        font-size: 14px;
        color: var(--text-gray);
    }

    .main-navigation .menu > li.menu-item-has-children > a {
        text-align: left;
    }
}

/* =====================================================================
   v2.1.0 — UX pass (Refero-grounded, mobile-first): tighter hero on
   phones, branded default covers, article reading layout, author box,
   related posts, breadcrumb. SEO text never removed — only clamped.
   ===================================================================== */

/* Phones: the hero's SEO paragraph shows 3 lines until "Leggi di più" —
   the full text stays in the DOM for crawlers. */
@media (max-width: 560px) {
    .hero-v2 .intro-text > p:first-of-type {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .hero-v2 .intro-text:has(.collapsible-text.active) > p:first-of-type {
        display: block;
        -webkit-line-clamp: unset;
        overflow: visible;
    }

    .hero-v2 h1 {
        font-size: 1.75rem;
    }
}

/* News cards: identical media geometry whether the image is a real
   featured image or a branded default cover. */
.news-card-image img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

/* Breadcrumb (posts) */
.ds24-breadcrumb {
    margin-bottom: 12px;
    font-size: 0.8rem;
    color: var(--text-gray);
}

.ds24-breadcrumb a {
    color: var(--text-gray);
    text-decoration: none;
}

.ds24-breadcrumb a:hover {
    color: var(--accent-green);
}

.ds24-breadcrumb span {
    margin: 0 6px;
    opacity: 0.6;
}

/* Article reading layout: measure, rhythm, headings */
.single-post .content-wrapper {
    max-width: 720px;
    margin: 0 auto;
    font-size: 1.02rem;
    line-height: 1.75;
}

.single-post .content-wrapper h2 {
    margin: 2rem 0 0.8rem;
    font-size: 1.35rem;
    line-height: 1.3;
}

.single-post .content-wrapper h3 {
    margin: 1.5rem 0 0.6rem;
    font-size: 1.1rem;
}

.single-post .content-wrapper p {
    margin: 0 0 1.1rem;
}

.single-post .content-wrapper table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.single-post .content-wrapper table th,
.single-post .content-wrapper table td {
    padding: 0.5rem 0.6rem;
    border-bottom: 1px solid var(--border-color);
    text-align: left;
}

/* Author box (E-E-A-T) */
.ds24-author-box {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    margin-top: 28px;
    padding: 16px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--card-bg);
}

.ds24-author-avatar img {
    border-radius: 50%;
    display: block;
}

.ds24-author-name {
    margin: 0 0 4px;
    font-weight: 700;
}

.ds24-author-bio {
    margin: 0 0 6px;
    font-size: 0.88rem;
    color: var(--text-gray);
    line-height: 1.5;
}

.ds24-author-link {
    font-size: 0.82rem;
    color: var(--accent-green);
    text-decoration: none;
}

/* Related articles */
.ds24-related {
    margin-top: 48px;
}

.ds24-related-title {
    font-size: 1.25rem;
    margin-bottom: 18px;
}

/* v2.1.4 — pronostico cards: per-pairing two-tone tint over the rotated
   artwork (same hue-from-team-name formula as the match band). */
.news-card-tint {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(115deg, hsl(var(--h1, 145) 55% 30% / 0.42) 0%, transparent 55%),
        linear-gradient(245deg, hsl(var(--h2, 210) 55% 30% / 0.42) 0%, transparent 55%);
}

/* v2.1.5 — crest VS crest over the pronostico card artwork. */
.news-card-vs {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    pointer-events: none;
}

.news-card-vs .vs-crest {
    width: 68px;
    height: 68px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(10, 14, 12, 0.72);
    border: 1px solid rgba(0, 200, 83, 0.35);
    border-radius: 50%;
    backdrop-filter: blur(2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
}

.news-card-vs .vs-crest img {
    width: 48px;
    height: 48px;
    object-fit: contain;
}

.news-card-vs em {
    font-style: italic;
    font-weight: 800;
    font-size: 0.95rem;
    letter-spacing: 0.06em;
    color: var(--accent-green);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
}