/*
Theme Name: Dinamo Molfetta Professional - Sports Lite Customizations
Description: Customizations for Sports Lite theme with Dinamo Molfetta colors
Version: 1.0
Author: Cline AI Assistant
Text Domain: dinamo-molfetta

License: All rights reserved
License URI: https://www.apache.org/licenses/LICENSE-2.0
*/

/* Google Fonts Import - Teko for Score & Sets */
@import url('https://fonts.googleapis.com/css2?family=Teko:wght@400;500;700&display=swap');

/* ===============================================
   CUSTOM POST TYPES - GIOCATORI E SQUADRE
=============================================== */

/* Team Roster Styles */
.dinamo-team-roster {
    margin: var(--section-margin) 0;
}

.dinamo-team-roster h2 {
    color: var(--dinamo-primary);
    font-weight: 800;
    margin-bottom: var(--space-xl);
    text-align: center;
    font-size: var(--text-4xl);
}

.team-description {
    margin-bottom: var(--section-margin);
}

.team-description .card {
    border: none;
    background: linear-gradient(135deg, rgba(255,102,0,0.05), rgba(0,102,204,0.05));
    padding: var(--card-padding);
    border-radius: var(--card-radius);
    box-shadow: 0 var(--card-shadow) var(--card-shadow) rgba(0,0,0,0.1);
}

.role-section {
    margin-bottom: var(--section-margin);
    padding: var(--card-padding);
    background: rgba(255, 255, 255, 0.8);
    border-radius: var(--card-radius);
    box-shadow: 0 var(--card-shadow) var(--card-shadow) rgba(0,0,0,0.1);
    border: 1px solid rgba(255,102,0,0.1);
}

.role-section h3 {
    color: var(--dinamo-primary);
    font-weight: 700;
    margin-bottom: var(--space-lg);
    text-align: center;
    padding-bottom: var(--space-sm);
    border-bottom: 2px solid var(--dinamo-primary);
    font-size: var(--text-2xl);
}

.players-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(clamp(280px, 25vw, 320px), 1fr));
    gap: var(--space-lg);
}

.player-card {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid rgba(255,102,0,0.1);
}

.player-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    border-color: var(--dinamo-primary);
}

.player-photo {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-bottom: 1px solid rgba(0,0,0,0.1);
}

.player-info {
    padding: 20px;
}

.player-info h4 {
    color: var(--dinamo-primary);
    font-weight: 700;
    margin-bottom: 10px;
    font-size: 1.2em;
}

.player-info h4 a {
    text-decoration: none;
    color: inherit;
    transition: color 0.3s ease;
}

.player-info h4 a:hover {
    color: var(--dinamo-secondary);
}

.player-number {
    display: inline-block;
    background: var(--dinamo-primary);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-weight: 600;
    font-size: 0.9em;
    margin-right: 8px;
}

.player-nationality {
    color: var(--text-light);
    font-weight: 500;
}

/* Single Player Page Styles */
.player-photo-large {
    text-align: center;
    margin-bottom: 30px;
}

.player-photo-large img {
    max-width: 250px;
    height: auto;
    border-radius: 50%;
    border: 4px solid var(--dinamo-primary);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.player-meta {
    margin-bottom: 30px;
}

.player-meta .badge {
    font-size: 0.9em;
    margin-right: 10px;
    margin-bottom: 5px;
}

.player-details, .player-career {
    background: linear-gradient(135deg, rgba(255,102,0,0.05), rgba(0,102,204,0.05));
    padding: 25px;
    border-radius: 12px;
    margin-bottom: 30px;
    border-left: 4px solid var(--dinamo-primary);
}

.player-details h3, .player-career h3 {
    color: var(--dinamo-primary);
    font-weight: 700;
    margin-bottom: 20px;
}

.player-sidebar {
    background: rgba(255, 255, 255, 0.8);
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.player-sidebar h4 {
    color: var(--dinamo-primary);
    font-weight: 700;
    margin-bottom: 15px;
}

.player-sidebar .list-group-item {
    border: none;
    padding: 10px 0;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

.player-sidebar .list-group-item:last-child {
    border-bottom: none;
}

.player-sidebar .list-group-item a {
    text-decoration: none;
    color: var(--text-dark);
    font-weight: 500;
    transition: color 0.3s ease;
}

.player-sidebar .list-group-item a:hover {
    color: var(--dinamo-primary);
}

/* Team Page Styles */
.team-logo {
    text-align: center;
    margin-bottom: 30px;
}

.team-logo img {
    max-width: 200px;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.team-category {
    text-align: center;
    margin-bottom: 30px;
}

.team-description {
    margin-bottom: 50px;
}

.team-description .card {
    border: none;
    background: linear-gradient(135deg, rgba(255,102,0,0.05), rgba(0,102,204,0.05));
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
}

.team-roster h2 {
    color: var(--dinamo-primary);
    font-weight: 800;
    margin-bottom: 40px;
    text-align: center;
}

.role-title .badge {
    font-size: 1.2em;
    padding: 12px 25px;
    background: linear-gradient(135deg, var(--dinamo-secondary), var(--dinamo-primary)) !important;
    border: none;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.player-card .card-body {
    padding: 20px;
}

.player-card .card-title {
    font-size: 1.1em;
    font-weight: 600;
    margin-bottom: 10px;
}

.player-card .card-footer {
    background: transparent;
    border-top: 1px solid rgba(0,0,0,0.1);
    padding: 15px 20px;
}

/* ===============================================
   FLUID RESPONSIVE DESIGN - PROPORTIONAL SIZING SYSTEM
=============================================== */

/* Fluid Typography & Spacing System */
:root {
    /* Fluid spacing scale using clamp() */
    --space-xs: clamp(0.25rem, 0.5vw, 0.5rem);
    --space-sm: clamp(0.5rem, 1vw, 1rem);
    --space-md: clamp(1rem, 2vw, 1.5rem);
    --space-lg: clamp(1.5rem, 3vw, 2rem);
    --space-xl: clamp(2rem, 4vw, 3rem);
    --space-2xl: clamp(3rem, 6vw, 4rem);

    /* Fluid font sizes */
    --text-xs: clamp(0.75rem, 1.5vw, 0.875rem);
    --text-sm: clamp(0.875rem, 2vw, 1rem);
    --text-base: clamp(1rem, 2.5vw, 1.125rem);
    --text-lg: clamp(1.125rem, 3vw, 1.25rem);
    --text-xl: clamp(1.25rem, 3.5vw, 1.5rem);
    --text-2xl: clamp(1.5rem, 4vw, 2rem);
    --text-3xl: clamp(2rem, 5vw, 2.5rem);
    --text-4xl: clamp(2.5rem, 6vw, 3rem);
    --text-5xl: clamp(3rem, 7vw, 4rem);
    --text-6xl: clamp(4rem, 8vw, 5rem);

    /* Fluid container widths */
    --container-xs: clamp(320px, 90vw, 480px);
    --container-sm: clamp(480px, 95vw, 768px);
    --container-md: clamp(768px, 95vw, 1024px);
    --container-lg: clamp(1024px, 95vw, 1200px);
    --container-xl: clamp(1200px, 95vw, 1400px);
    --container-2xl: clamp(1400px, 98vw, 1600px);

    /* Fluid dimensions for components */
    --card-padding: clamp(1rem, 3vw, 2rem);
    --card-radius: clamp(12px, 2vw, 20px);
    --card-shadow: clamp(4px, 1vw, 8px);
    --button-padding: clamp(0.75rem, 2vw, 1.25rem);
    --button-radius: clamp(8px, 1.5vw, 12px);
    --section-padding: clamp(3rem, 8vw, 5rem);
    --section-margin: clamp(2rem, 5vw, 4rem);
}

/* Fluid Container System */
.container-fluid {
    width: 100%;
    padding-left: var(--space-md);
    padding-right: var(--space-md);
    margin-left: auto;
    margin-right: auto;
}

.container {
    width: var(--container-lg);
    max-width: 100%;
    padding-left: var(--space-md);
    padding-right: var(--space-md);
    margin-left: auto;
    margin-right: auto;
}

/* ===============================================
   ENHANCED RESPONSIVE DESIGN - COMPLETE MOBILE OPTIMIZATION
=============================================== */

/* Performance optimizations for mobile */
@media (max-width: 768px) {
    /* Reduce animations on mobile for better performance */
    *, *::before, *::after {
        animation-duration: 0.2s !important;
        animation-delay: 0s !important;
        transition-duration: 0.2s !important;
    }

    /* Optimize backdrop-filter usage on mobile */
    .match-card.fantasy-style,
    .social-card,
    .nav-overlay {
        backdrop-filter: blur(8px) !important;
        -webkit-backdrop-filter: blur(8px) !important;
    }

    /* Reduce shadow complexity on mobile */
    .card,
    .match-card,
    .social-card {
        box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
    }

    /* Optimize font loading */
    body {
        font-display: swap;
        text-rendering: optimizeSpeed;
    }
}

/* Bootstrap compatibility fixes */
@media (max-width: 768px) {
    /* Override Bootstrap's container padding */
    .container {
        padding-left: 0px !important;
        padding-right: 0px !important;
    }

    /* Fix Bootstrap grid issues */
    .row {
        margin-left: -7.5px !important;
        margin-right: -7.5px !important;
    }

    .col-md-6,
    .col-lg-4,
    .col-xl-3 {
        padding-left: 7.5px !important;
        padding-right: 7.5px !important;
    }

    /* Fix Bootstrap navbar issues */
    .navbar-collapse {
        border-top: none !important;
        box-shadow: none !important;
    }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
    /* Remove hover effects on touch devices */
    .card:hover,
    .match-card:hover,
    .social-card:hover {
        transform: none !important;
    }

    /* Increase touch targets */
    button,
    .btn,
    a {
        min-height: 44px !important;
        min-width: 44px !important;
    }

    #hamburger-toggle {
        min-height: 1vh!important;
    }

    /* Better focus indicators for accessibility */
    button:focus,
    .btn:focus,
    a:focus {
        outline: 3px solid var(--dinamo-primary) !important;
        outline-offset: 2px !important;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .match-card.fantasy-style,
    .social-card {
        border: 2px solid currentColor !important;
        background: white !important;
    }

    .score-large {
        color: black !important;
        text-shadow: none !important;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Print styles */
@media print {
    .dinamo-header-arancione,
    .week-navigation,
    .nav-overlay,
    .hamburger-btn {
        display: none !important;
    }

    .match-card.fantasy-style,
    .social-card {
        break-inside: avoid;
        box-shadow: none !important;
        border: 1px solid #000 !important;
    }

    body {
        font-size: 12pt !important;
        line-height: 1.4 !important;
    }
}

/* Enhanced Mobile Navigation */
@media (max-width: 768px) {
    /* Better hamburger menu positioning and sizing */
    .hamburger-btn {
        width: 28px !important;
        height: 22px !important;
        margin-right: 15px;
    }

    .hamburger-line {
        height: 2.5px !important;
        width: 100% !important;
        border-radius: 1.5px !important;
    }

    /* Improved nav overlay for mobile */
    .nav-overlay {
        padding-top: 80px; /* Account for header */
    }

    .nav-content {
        padding: 20px;
        max-width: 350px;
    }

    .nav-content li {
        margin: 15px 0;
    }

    .nav-content a {
        padding: 14px 18px !important;
        font-size: 1em !important;
        border-radius: 12px !important;
    }

    /* Better touch targets for navigation */
    .nav-content a::before {
        margin-right: 12px !important;
        font-size: 1.2em !important;
    }

    /* Enhanced week navigation for mobile */
    .week-navigation {
        padding: 15px 10px;
        backdrop-filter: blur(10px);
        border-radius: 15px;
        margin: 15px 0;
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    }

    .week-nav-btn {
        flex: 1;
        min-width: 120px;
        padding: 12px 16px;
        font-size: 0.9em;
        border-radius: 25px;
        margin: 0 5px;
        transition: all 0.3s ease;
    }

    .week-nav-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 15px rgba(255,102,0,0.3);
    }

    .current-week-display {
        flex: 2;
        text-align: center;
        padding: 10px;
    }

    .week-dates {
        font-size: 1em;
        font-weight: 700;
        margin-bottom: 2px;
    }

    .week-label {
        font-size: 0.8em;
        opacity: 0.8;
    }

    /* Mobile-friendly body scroll lock */
    body.menu-open {
        overflow: hidden;
        position: fixed;
        width: 100%;
        height: 100vh;
        top: 0;
        left: 0;
    }

    /* Better mobile header spacing */
    .dinamo-header-arancione {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1000;
        box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    }

    /* Add padding to body when header is fixed */
    body {
        padding-top: 95px; /* Account for fixed header */
    }

    /* Better mobile logo handling */
    .logo-container {
        height: 60px;
    }

    .logo-square {
        width: 120px !important;
        height: 120px !important;
        margin-top: -60px;
    }

    .site-title {
        font-size: 1.4em;
        margin-top: 5px;
    }
}

/* Extra small mobile navigation enhancements */
@media (max-width: 480px) {
    .hamburger-btn {
        width: 24px !important;
        height: 18px !important;
    }

    .hamburger-line {
        height: 2px !important;
    }

    .nav-content {
        padding: 15px;
        max-width: 300px;
    }

    .nav-content li {
        margin: 12px 0;
    }

    .nav-content a {
        padding: 12px 15px !important;
        font-size: 0.95em !important;
    }

    .week-navigation {
        padding: 12px 8px;
        margin: 12px 0;
    }

    .week-nav-btn {
        min-width: 100px;
        padding: 10px 12px;
        font-size: 0.85em;
        margin: 0 3px;
    }

    .current-week-display {
        padding: 4px;
    }

    .week-dates {
        font-size: 0.9em;
    }

    .week-label {
        font-size: 0.75em;
    }

    /* Compact logo for very small screens */
    .logo-square {
        width: 100px !important;
        height: 100px !important;
        margin-top: -50px;
    }

    .site-title {
        font-size: 1.2em;
    }

    .logo-container {
        height: 50px;
    }

    body {
        padding-top: 80px; /* Reduced padding for smaller screens */
    }
}

/* Ultra-small mobile navigation */
@media (max-width: 360px) {
    .nav-content {
        padding: 10px;
        max-width: 280px;
    }

    .nav-content a {
        padding: 10px 12px !important;
        font-size: 0.9em !important;
    }

    .week-navigation {
        padding: 10px 6px;
        margin: 10px 0;
    }

    .week-nav-btn {
        min-width: 80px;
        padding: 8px 10px;
        font-size: 0.8em;
        margin: 0 2px;
    }

    .current-week-display {
        padding: 6px;
    }

    .week-dates {
        font-size: 0.85em;
    }

    .week-label {
        font-size: 0.7em;
    }

    /* Minimal logo */
    .logo-square {
        width: 80px !important;
        height: 80px !important;
        margin-top: -40px;
    }

    .site-title {
        font-size: 1.1em;
        margin-top: 3px;
    }

    .logo-container {
        height: 40px;
    }

    body {
        padding-top: 70px;
    }
}

/* Touch-friendly improvements for mobile */
@media (max-width: 768px) {
    /* Increase touch targets for better mobile usability */
    .player-card,
    .social-card,
    .match-card,
    .date-match-item {
        min-height: 44px; /* iOS recommended minimum touch target */
        margin-bottom: 12px;
    }

    /* Better spacing for touch interactions */
    .player-info {
        padding: 16px;
    }

    .player-info h4 {
        margin-bottom: 12px;
        line-height: 1.3;
    }

    /* Improve readability on small screens */
    .player-number {
        font-size: 0.85em;
        padding: 3px 6px;
        margin-right: 6px;
    }

    .player-nationality {
        font-size: 0.9em;
        margin-top: 4px;
    }
}

/* Enhanced match card responsiveness */
@media (max-width: 600px) {
    .match-card.fantasy-style {
        padding: 16px !important;
        margin-bottom: 16px;
    }

    .match-header-fantasy {
        margin-bottom: 16px !important;
        padding-bottom: 12px !important;
    }

    .championship-name {
        font-size: 1em !important;
        margin-bottom: 4px;
    }

    .match-time {
        font-size: 0.85em !important;
    }

    /* Optimize match center for very small screens */
    .match-center {
        height: 140px !important;
        margin-bottom: 16px !important;
    }

    .team-name-large {
        font-size: 1.1em !important;
        margin-bottom: 6px !important;
        max-width: 120px !important;
    }

    .team-logo-fallback {
        font-size: 2.2em !important;
    }

    /* Better score overlay positioning */
    .score-section-overlay {
        bottom: 12px !important;
        padding: 6px 12px !important;
        min-width: 60px !important;
    }

    .score-large {
        font-size: 1.8em !important;
        letter-spacing: 2px !important;
    }

    /* Optimize sets section */
    .sets-section {
        padding: 16px !important;
        gap: 12px !important;
    }

    .set-box {
        min-width: 65px !important;
        height: 50px !important;
        padding: 8px 10px !important;
    }

    .set-label {
        font-size: 0.8em !important;
        margin-bottom: 2px !important;
    }

    .set-score {
        font-size: 1em !important;
    }

    /* Stats bar optimization */
    .stats-bar {
        padding: 12px !important;
        gap: 8px !important;
    }

    .venue-location {
        font-size: 1em !important;
    }

    .venue-details {
        font-size: 0.75em !important;
    }
}

/* Ultra-compact for very small screens */
@media (max-width: 360px) {
    .match-card.fantasy-style {
        padding: 12px !important;
    }

    .match-center {
        height: 120px !important;
    }

    .team-name-large {
        font-size: 1em !important;
        margin-bottom: 4px !important;
        max-width: 100px !important;
    }

    .team-logo-fallback {
        font-size: 1.8em !important;
    }

    .score-section-overlay {
        bottom: 8px !important;
        padding: 4px 8px !important;
    }

    .score-large {
        font-size: 1.5em !important;
        letter-spacing: 1px !important;
    }

    .sets-section {
        padding: 12px !important;
        gap: 8px !important;
    }

    .set-box {
        min-width: 55px !important;
        height: 45px !important;
        padding: 6px 8px !important;
    }

    .set-label {
        font-size: 0.75em !important;
        margin-bottom: 1px !important;
    }

    .set-score {
        font-size: 0.9em !important;
    }
}

/* Large Desktop (1440px+) */
@media (min-width: 1440px) {
    .container {
        max-width: 1400px;
    }

    .players-grid {
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
        gap: 30px;
    }

    .hero-content h1 {
        font-size: 5em;
    }
}

/* Desktop (1024px - 1439px) */
@media (min-width: 1024px) and (max-width: 1439px) {
    .players-grid {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 25px;
    }

    .hero-content h1 {
        font-size: 4em;
    }

    .section {
        padding: 70px 0;
    }
}

/* Tablet Landscape (769px - 1023px) */
@media (min-width: 769px) and (max-width: 1023px) {
    .players-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 25px;
    }

    .role-section {
        padding: 25px;
        margin-bottom: 35px;
    }

    .hero-content h1 {
        font-size: 3.5em;
    }

    .hero-content .subtitle {
        font-size: 1.4em;
    }

    .section {
        padding: 60px 0;
    }

    .social-cards {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    /* Improve navigation touch targets */
    .week-nav-btn {
        min-width: 160px;
        padding: 12px 20px;
        font-size: 1em;
    }
}

/* Tablet Portrait (601px - 768px) */
@media (max-width: 768px) {
    .players-grid {
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
        gap: 20px;
    }

    .role-section {
        padding: 20px;
        margin-bottom: 30px;
    }

    .player-info {
        padding: 15px;
    }

    .player-photo-large img {
        max-width: 200px;
    }

    .team-logo img {
        max-width: 150px;
    }

    .role-title .badge {
        font-size: 1em;
        padding: 10px 20px;
    }

    .hero-content h1 {
        font-size: 2.8em;
    }

    .hero-content .subtitle {
        font-size: 1.3em;
    }

    .hero-content .description {
        font-size: 1.1em;
    }

    .section {
        padding: 50px 0;
    }

    /* Better mobile navigation */
    .week-nav-btn {
        min-width: 140px;
        padding: 12px 18px;
        font-size: 0.95em;
        border-radius: 40px;
    }

    .current-week-display {
        min-width: 160px;
    }

    .week-dates {
        font-size: 1.2em;
    }

    /* Improve card layouts for tablet */
    .social-cards {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }

    .social-card {
        padding: 25px 20px;
    }
}

/* Large Mobile (481px - 600px) */
@media (max-width: 600px) {
    .players-grid {
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        gap: 18px;
    }

    .role-section {
        padding: 18px;
        margin-bottom: 25px;
    }

    .player-card {
        margin-bottom: 18px;
    }

    .player-info {
        padding: 12px;
    }

    .player-photo-large img {
        max-width: 180px;
    }

    .hero-content h1 {
        font-size: 2.5em;
        line-height: 1.1;
    }

    .hero-content .subtitle {
        font-size: 1.2em;
        margin-bottom: 15px;
    }

    .hero-content .description {
        font-size: 1em;
        margin-bottom: 30px;
    }

    .section {
        padding: 40px 0;
    }

    /* Enhanced mobile navigation */
    .week-navigation {
        gap: 12px;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .week-nav-btn {
        min-width: 120px;
        padding: 10px 16px;
        font-size: 0.9em;
        border-radius: 35px;
    }

    .current-week-display {
        min-width: 140px;
        flex: 1;
        text-align: center;
    }

    .week-dates {
        font-size: 1.1em;
        margin-bottom: 2px;
    }

    .week-label {
        font-size: 0.8em;
    }

    /* Better mobile cards */
    .social-cards {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .social-card {
        padding: 20px 15px;
        margin-bottom: 10px;
    }

    .social-card h4 {
        font-size: 1.3em;
        margin-bottom: 12px;
    }

    .social-card p {
        font-size: 0.95em;
        margin-bottom: 15px;
    }
}

/* Small Mobile (361px - 480px) */
@media (max-width: 480px) {
    .players-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .role-section {
        padding: 15px;
        margin-bottom: 20px;
    }

    .player-card {
        margin-bottom: 15px;
    }

    .player-info {
        padding: 10px;
    }

    .player-info h4 {
        font-size: 1.1em;
    }

    .player-photo-large img {
        max-width: 150px;
    }

    .hero-content h1 {
        font-size: 2.2em;
    }

    .hero-content .subtitle {
        font-size: 1.1em;
    }

    .hero-content .description {
        font-size: 0.95em;
    }

    .section {
        padding: 35px 0;
    }

    /* Compact mobile navigation */
    .week-navigation {
        gap: 8px;
        padding: 0 10px;
    }

    .week-nav-btn {
        min-width: 100px;
        padding: 8px 12px;
        font-size: 0.85em;
        border-radius: 30px;
    }

    .current-week-display {
        min-width: 120px;
    }

    .week-dates {
        font-size: 1em;
    }

    .week-label {
        font-size: 0.75em;
    }

    /* Mobile-optimized cards */
    .social-card {
        padding: 18px 12px;
    }

    .social-card h4 {
        font-size: 1.2em;
        margin-bottom: 10px;
    }

    .social-card p {
        font-size: 0.9em;
        margin-bottom: 12px;
    }

    .social-media-link {
        padding: 8px 16px;
        font-size: 0.9em;
    }
}

/* Extra Small Mobile (up to 360px) */
@media (max-width: 360px) {
    .players-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .role-section {
        padding: 12px;
        margin-bottom: 15px;
    }

    .player-card {
        margin-bottom: 12px;
    }

    .player-info {
        padding: 8px;
    }

    .player-info h4 {
        font-size: 1em;
        margin-bottom: 8px;
    }

    .player-photo-large img {
        max-width: 120px;
    }

    .hero-content h1 {
        font-size: 2em;
    }

    .hero-content .subtitle {
        font-size: 1em;
    }

    .hero-content .description {
        font-size: 0.9em;
    }

    .section {
        padding: 30px 0;
    }

    /* Minimal mobile navigation */
    .week-navigation {
        gap: 6px;
        padding: 0 5px;
    }

    .week-nav-btn {
        min-width: 80px;
        padding: 6px 10px;
        font-size: 0.8em;
        border-radius: 25px;
    }

    .current-week-display {
        min-width: 100px;
    }

    .week-dates {
        font-size: 0.9em;
    }

    .week-label {
        font-size: 0.7em;
    }

    /* Ultra-compact cards */
    .social-card {
        padding: 15px 10px;
    }

    .social-card h4 {
        font-size: 1.1em;
        margin-bottom: 8px;
    }

    .social-card p {
        font-size: 0.85em;
        margin-bottom: 10px;
    }

    .social-media-link {
        padding: 6px 12px;
        font-size: 0.85em;
    }
}

/* ===============================================
   DINAMO MOLFETTA COLORS - Sports Lite Customization
=============================================== */

/* Override Sports Lite colors with Dinamo brand colors */
:root {
    --dinamo-arancione: #FE7200;
    --dinamo-arancione-hover: #e55c00;
    --dinamo-azzurro: #242164;
    --dinamo-azzurro-hover: #1a1549;
    --dinamo-bianco: #FEFEFE;
    --dinamo-nero: #000000;
}

/* Customization - Remove any default Sports Lite red colors */
#sidebar ul li a:hover,
#commentform input#submit:hover,
#sidebar .search-form input.search-submit,
.site-layout-type a:focus {
    color: var(--dinamo-arancione) !important;
    border-color: var(--dinamo-arancione) !important;
    background-color: var(--dinamo-arancione) !important;
}

/* Header logo color - controls: .logo h1 a */
.logo h1 a {
    color: var(--dinamo-bianco) !important;
}

/* Main navigation - accent colors for hover states */
.nav-wrapper ul li a:hover,
.primary-menu li a:hover,
.hdr_sitemenu ul li a:hover {
    color: var(--dinamo-arancione) !important;
}

/* Buttons and CTA elements */
input[type="submit"]:hover,
button:hover,
.btn:hover,
.wp-block-button__link:hover {
    background-color: var(--dinamo-arancione) !important;
    border-color: var(--dinamo-arancione) !important;
    color: white !important;
}

/* Featured sections background colors */
.featured-section,
.section-primary {
    background: linear-gradient(135deg, var(--dinamo-arancione), var(--dinamo-azzurro)) !important;
}

/* Social media icons hover */
.social-nav a:hover,
.social-media-links a:hover {
    color: var(--dinamo-arancione) !important;
}

/* Footer accent colors */
.footer-widgets .widget-title,
.footer-link a:hover {
    color: var(--dinamo-arancione) !important;
}

/* Links with accent color */
a:hover,
.entry-meta a:hover,
.entry-content a:hover {
    color: var(--dinamo-arancione) !important;
}

/* Ensure hero section uses Dinamo colors */
.hero-section h1,
.hero-section h2,
.hero-section h3 {
    color: var(--dinamo-bianco) !important;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.8) !important;
}

/* News section - make it more appealing */
.news-article-card:hover,
.news-item:hover {
    border-color: var(--dinamo-arancione) !important;
    box-shadow: 0 0 15px rgba(255,102,0,0.3) !important;
}

/* Team cards - make gender obvious */
.team-gender-male {
    border-left: 6px solid var(--dinamo-azzurro) !important;
    background: linear-gradient(135deg, rgba(0,102,204,0.9), rgba(0,166,255,0.8)) !important;
}

.team-gender-female {
    border-left: 6px solid #ff66cc !important;
    background: linear-gradient(135deg, rgba(255,102,204,0.9), rgba(255,156,204,0.8)) !important;
}

/* ===============================================
   HOMEPAGE SPECIFIC - Hide page title and add datetime to header
=============================================== */

/* Hide page header (title) and metadata on all pages */
.page-header,
.entry-header,
.page .entry-header,
.single .entry-header {
    display: none !important;
}

/* Hide entry metadata (date, author, categories) on all pages */
.entry-meta,
.post-meta,
.entry-date,
.published,
.entry-author,
.byline,
.posted-on {
    display: none !important;
}

/* Add datetime display to main navbar container */
.navbar-main-container::before {
    content: "<?php echo date('d/m/Y | H:i:s'); ?>";
    position: absolute;
    top: -25px;
    right: 20px;
    font-size: 0.8em;
    color: rgba(255,255,255,0.7);
    font-weight: 300;
    background: rgba(0,0,0,0.3);
    padding: 2px 8px;
    border-radius: 4px;
    border: 1px solid rgba(255,255,255,0.1);
}

/* ===============================================
   HERO SECTIONS - FULL WIDTH CLASSES
=============================================== */

/* Classe da assegnare al blocco cover dell'hero per renderlo full-width */
.hero-full-width-image {
    width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    position: relative;
    max-width: none !important;
}

/* FORZA BLOCHI COVER alignfull A ESSERE FULL-WIDTH */
.wp-block-cover.alignfull,
.wp-block-group.alignfull {
    width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    position: relative !important;
    max-width: none !important;
    /* Forza anche sul container interno */
    margin-right: calc(-50vw + 50%) !important;
}

/* Forza anche sui Gruppi interni del cover */
.wp-block-cover.alignfull .wp-block-cover__inner-container,
.wp-block-group.alignfull .wp-block-group__inner-container {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 40px !important;
}

/* Classe da assegnare ai blocchi testo che devono sovrapporsi all'hero */
.hero-overlay-text {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 15 !important;
    text-align: center !important;
    width: 100% !important;
    max-width: 1200px !important;
    padding: 0 40px !important;
    color: white !important;
    pointer-events: auto !important;
}

/* Classe per l'overlay bicolore arancione/blu */
.hero-bicolor-overlay {
    position: relative;
    overflow: hidden;
}

.hero-bicolor-overlay::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255,102,0,0.4), rgba(0,102,204,0.4)) !important;
    z-index: 5 !important;
}

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

body {
    font-family: 'Open Sans', sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #fff;
}

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

/* ===============================================
   TYPOGRAPHY
=============================================== */

h1, h2, h3, h4, h5, h6 {
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    line-height: 1.3;
}

h1 {
    font-size: 2.5em;
    font-weight: 800;
}

h2 {
    font-size: 2em;
}

h3 {
    font-size: 1.5em;
}

/* ===============================================
   COLORS - DINAMO MOLFETTA
=============================================== */

:root {
    --dinamo-primary: #FE7200;    /* Nuovo arancio/rosso */
    --dinamo-secondary: #242164;  /* Nuovo blu scuro */
    --dinamo-accent: #676593;     /* Nuovo viola/grigio */
    --text-dark: #333;
    --text-light: #666;
    --white: #FEFEFE;             /* Nuovo bianco puro */
    --gray-light: #F0EFF4;        /* Nuovo grigio chiaro */
    --gray-medium: #d1d1d1;
    --shadow: rgba(0,0,0,0.1);
}

/* ===============================================
   HEADER & NAVIGATION CLASSES
=============================================== */

/* Classe principale dell'header arancione dinamo */
.dinamo-header-arancione {
    background: linear-gradient(45deg, var(--dinamo-primary), #cc4a00) !important;
    box-shadow: 0 var(--card-shadow) var(--card-shadow) rgba(0,0,0,0.3);
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: clamp(2px, 0.2vw, 4px) solid var(--dinamo-secondary);
    position: relative; /* Per posizionare la fascia arcobaleno */
}

/* Fascia arcobaleno fluida in basso nella navbar */
.navbar {
    position: relative; /* Per posizionare la fascia arcobaleno */
}

.navbar::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--space-lg);
    background: linear-gradient(
        to bottom,
        #FF0000 0%,   /* Rosso */
        #FF7F00 14%,  /* Arancione */
        #FFFF00 28%,  /* Giallo */
        #00FF00 42%,  /* Verde */
        #0000FF 57%,  /* Blu */
        #4B0082 71%,  /* Indaco */
        #9400D3 85%,  /* Viola */
        #FF0000 100%  /* Rosso (chiusura) */
    );
    z-index: 1000;
}

/* Navbar container principale fluido */
.navbar-main-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-md) var(--space-lg);
    position: relative;
}

/* Logo Container - Layout orizzontale logo + testo con sovrapposizione fluida */
.logo-container {
    display: flex;
    align-items: flex-start; /* Allinea in alto */
    gap: var(--space-md);
    position: relative;
    z-index: 1001;
    height: clamp(60px, 8vw, 60px); /* Altezza ridotta a 60px per fascia più sottile */
}

/* Logo Square - Dimensioni fluide con clamp */
.logo-square {
    width: clamp(120px, 12vw, 180px);
    height: clamp(120px, 12vw, 180px);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 50%;
    transition: all 0.3s ease;
    flex-shrink: 0;
    margin-top: calc(clamp(60px, 8vw, 90px) * -1); /* Sposta il logo verso l'alto proporzionalmente */
    position: relative;
    z-index: 1002;
    margin-top: 0;
}

.logo-square:hover {
    transform: scale(1.05);
    box-shadow: 0 var(--card-shadow) var(--card-shadow) rgba(0,0,0,0.4);
}

/* Site Title - Dimensioni fluide */
.site-title {
    font-weight: 800;
    font-size: var(--text-2xl);
    color: #ffffff !important;
    text-decoration: none !important;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.7);
    z-index: 1001;
    line-height: 1.2;
    white-space: nowrap;
    margin-top: var(--space-sm); /* Allineato in alto nella fascia */
    position: relative;
    z-index: 1001;
}

/* Header Sticky - Ridimensionamento logo quando header diventa sticky */
.header.sticky .logo-square {
    width: 3vh !important; /* Ridotto ulteriormente per header sticky */
    height: 3vh !important;
    margin-top: 1vh !important; /* Ridotto margin per sticky */
    transition: all 0.3s ease;
}

.header.sticky .site-title {
    font-size: 0.9em !important; /* Ridotto ulteriormente per header sticky */
    margin-top: 20px !important; /* Regolato per sticky */
    transition: all 0.3s ease;
}

.header.sticky .logo-container {
    gap: 8px !important; /* Gap ridotto ulteriormente per sticky */
}

/* Responsive per logo quadrato */
@media (max-width: 768px) {
    .logo-square {
        width: 15vh !important; /* Logo 15% del viewport height */
        height: 15vh !important; /* Logo 15% del viewport height */
    }

    .site-title {
        display: block !important; /* Nasconde il testo su mobile */
    }

    .logo-container {
        height: 5vh !important; /* Navbar alta 5% del viewport */
        gap: 15px !important; /* Gap ridotto per mobile */
        justify-content: center !important; /* Centra il logo quando il testo è nascosto */
    }
}

/* ===============================================
   CONSOLIDATED MOBILE RESPONSIVE - max-width: 576px
=============================================== */

@media (max-width: 576px) {
    /* Logo and Header Styles */
    .logo-square {
        width: 12vh !important;
        height: 12vh !important;
        top: 3vh;
    }

    .site-title {
        display: none !important;
    }

    .logo-container {
        gap: 10px !important;
        flex-direction: column !important;
        text-align: center !important;
    }

    .hamburger-btn {
        width: 13vw !important;
        height: 8vw !important;
    }

    .hamburger-line {
        height: 0.3em !important;
    }

    .navbar-brand {
        height: 3vw !important;
        font-size: 1.2em;
    }

    /* Header Sticky Logo */
    .header.sticky .logo-square {
        width: 12vh !important;
        height: 12vh !important;
        margin-top: 1vh !important;
        transition: all 0.5s ease;
    }

    /* Hero Section Styles */
    .hero-section h1 {
        font-size: 2em;
    }

    .hero-title {
        font-size: 2.5em;
    }

    .hero-subtle {
        font-size: 1em;
    }

    /* Match Week Page Styles */
    .match-week-title {
        font-size: 1.8em;
    }

    .week-prev {
        justify-content: end;
    }

    .week-next {
        justify-content: start;
    }

    .week-nav-btn {
        min-width: 180px;
        padding: 10px 15px;
        font-size: 0.9em;
    }

    .current-week-display {
        min-width: 180px;
    }

    .week-dates {
        font-size: 1.1em;
    }

    .league-week-title {
        font-size: 1.5em;
    }

    .stats-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .stat-card {
        padding: 15px 12px;
        margin-bottom: 10px;
    }

    .stat-number {
        font-size: 2em;
        margin-bottom: 8px;
    }

    .stat-label {
        font-size: 0.9em;
        letter-spacing: 0.3px;
    }

    /* Week Matches Container - Responsive Layout */
    .week-matches-container {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 5px !important;
        margin: 0 auto !important;
        box-sizing: border-box !important;
    }

    /* Ensure date sections are full width on mobile */
    .date-section {
        width: 100% !important;
        margin: 15px 0 !important;
        padding: 15px !important;
    }

    /* Single column layout for match items on mobile */
    .date-matches {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }

    /* Compact match cards for mobile */
    .date-match-item {
        width: 100% !important;
        margin: 0 !important;
        padding: 15px !important;
    }
}

/* Hamburger button animato */
.hamburger-dinamo-btn {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 24px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 1001;
    transition: all 0.3s ease;
}

/* Animation delle linee hamburger */
.hamburger-dinamo-lines {
    display: block;
    height: 3px;
    width: 100%;
    background: #ffffff;
    border-radius: 2px;
    transition: all 0.3s ease;
    box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

/* Menu overlay full-screen */
.menu-hamburger-overlay {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100vh;
    background: rgba(255, 102, 0, 0.95);
    backdrop-filter: blur(10px);
    transform: translateX(100%);
    transition: transform 0.3s ease;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ===============================================
   MENU HAMBURGER ITEMS & ICONS
=============================================== */

/* Container dei menu items */
.menu-hamburger-content {
    color: white;
    max-width: 400px;
    width: 90%;
    text-align: left;
}

/* Lista menu items */
.menu-hamburger-list {
    list-style: none !important;
    padding: 0;
    margin: 0;
}

/* Singoli menu items */
.menu-hamburger-item {
    list-style: none !important;
    list-style-type: none !important;
    margin: 20px 0;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.3s ease;
}

/* Links dei menu items */
.menu-hamburger-link {
    color: #ffffff !important;
    text-decoration: none;
    font-size: 1.1em;
    font-weight: 700;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    position: relative;
    padding: 12px 5px;
    border-radius: 8px;
    margin: 3px 0;
}

/* Icone menu specifiche */
.menu-home-icon::before { content: "🏠"; color: #ffeb3b; filter: drop-shadow(0 0 3px rgba(255,235,59,0.5)); margin-right: 15px; }
.menu-seried-icon::before { content: "🏐"; color: #ff5252; filter: drop-shadow(0 0 3px rgba(255,82,82,0.5)); margin-right: 15px; }
.menu-calendar-icon::before { content: "📅"; color: #4fc3f7; filter: drop-shadow(0 0 3px rgba(79,195,247,0.5)); margin-right: 15px; }
.menu-news-icon::before { content: "📰"; color: #81c784; filter: drop-shadow(0 0 3px rgba(129,199,132,0.5)); margin-right: 15px; }
.menu-contact-icon::before { content: "📞"; color: #ffb74d; filter: drop-shadow(0 0 3px rgba(255,183,77,0.5)); margin-right: 15px; }

.header {
    background: linear-gradient(45deg, var(--dinamo-primary), #cc4a00) !important;
    box-shadow: 0 2px 15px rgba(0,0,0,0.3);
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: 3px solid var(--dinamo-secondary);
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 20px;
    position: relative;
    width: 100%;
}

/* Ensure hamburger is properly aligned to the right of the entire header/viewport */
.navbar .nav-container {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    padding-left: max(20px, calc(50vw - 600px + 20px));
    padding-right: max(20px, calc(50vw - 600px + 20px));
    box-sizing: border-box;
}

.navbar-brand,
.navbar-brand:hover,
.navbar-brand:focus,
.navbar-brand:active {
    font-weight: 800;
    font-size: 1.5em;
    color: #ffffff !important;
    text-decoration: none !important;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
    z-index: 1001;
}

/* Hamburger Button - Always Visible, Right Aligned */
.hamburger-btn {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 24px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 1001;
    transition: all 0.3s ease;
}

.hamburger-btn:hover {
    transform: scale(1.1);
}

.hamburger-line {
    display: block;
    height: 3px;
    width: 100%;
    background: #ffffff;
    border-radius: 2px;
    transition: all 0.3s ease;
    box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

/* Hamburger Animation */
.hamburger-btn.active .hamburger-line:nth-child(1) {
    transform: rotate(45deg) translate(6px, 6px);
}

.hamburger-btn.active .hamburger-line:nth-child(2) {
    opacity: 0;
}

.hamburger-btn.active .hamburger-line:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
}

/* Navigation Overlay */
.nav-overlay {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100vh;
    background: rgba(255, 102, 0, 0.95);
    backdrop-filter: blur(10px);
    transform: translateX(100%);
    transition: transform 0.3s ease;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-overlay.active {
    transform: translateX(0);
}

.nav-content {
    color: white;
    max-width: 400px;
    width: 90%;
    text-align: left;
}

.nav-content ul {
    list-style: none !important;
    padding: 0;
    margin: 0;
}

.nav-content li {
    list-style: none !important;
    list-style-type: none !important;
    margin: 20px 0;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.3s ease;
}

.nav-overlay.active .nav-content li {
    opacity: 1;
    transform: translateY(0);
}

.nav-overlay.active .nav-content li:nth-child(1) { transition-delay: 0.1s; }
.nav-overlay.active .nav-content li:nth-child(2) { transition-delay: 0.2s; }
.nav-overlay.active .nav-content li:nth-child(3) { transition-delay: 0.3s; }
.nav-overlay.active .nav-content li:nth-child(4) { transition-delay: 0.4s; }
.nav-overlay.active .nav-content li:nth-child(5) { transition-delay: 0.5s; }

.nav-content a {
    color: #ffffff !important;
    text-decoration: none;
    font-size: 1.1em;
    font-weight: 700;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    position: relative;
    padding: 12px 5px;
    border-radius: 8px;
    margin: 3px 0;
}

.nav-content a:hover {
    color: #ffeb3b !important;
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-1px);
}

/* ===============================================
   HAMBURGER MENU ICONS - CONSISTENT STYLING
=============================================== */

/* Menu Icons - Coherent System */
.nav-content li:nth-child(1) a::before { content: "🏠"; color: #ffeb3b; filter: drop-shadow(0 0 3px rgba(255,235,59,0.5)); margin-right: 15px; }
.nav-content li:nth-child(2) a::before { content: "🏐"; color: #ff5252; filter: drop-shadow(0 0 3px rgba(255,82,82,0.5)); margin-right: 15px; }
.nav-content li:nth-child(3) a::before { content: "📅"; color: #4fc3f7; filter: drop-shadow(0 0 3px rgba(79,195,247,0.5)); margin-right: 15px; }
.nav-content li:nth-child(4) a::before { content: "📰"; color: #81c784; filter: drop-shadow(0 0 3px rgba(129,199,132,0.5)); margin-right: 15px; }
.nav-content li:nth-child(5) a::before { content: "📞"; color: #ffb74d; filter: drop-shadow(0 0 3px rgba(255,183,77,0.5)); margin-right: 15px; }



.nav-content a::before {
    font-size: 1.3em;
    opacity: 0.8;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    transform: scale(1);
}

.nav-content a:hover::before {
    opacity: 1;
    transform: scale(1.2) rotate(5deg);
    animation: bounce 0.6s ease;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: scale(1) rotate(0deg); }
    40% { transform: scale(1.15) rotate(3deg); }
    60% { transform: scale(1.1) rotate(-2deg); }
}

/* Enhanced menu item styling with modern effects */
.nav-content li {
    position: relative;
    margin: 8px 0;
    perspective: 1000px;
    overflow: visible;
}

.nav-content li::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border: 2px solid rgba(255,255,255,0.3);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0;
}

.nav-content li:hover::before {
    width: 120%;
    height: 120%;
    opacity: 0.6;
    border-color: rgba(255,255,255,0.8);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { transform: translate(-50%, -50%) scale(1); opacity: 0.6; }
    50% { transform: translate(-50%, -50%) scale(1.05); opacity: 0.4; }
    100% { transform: translate(-50%, -50%) scale(1); opacity: 0.6; }
}

/* Glassmorphism effect for menu items */
.nav-content li::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg,
        rgba(255,102,0,0.1) 0%,
        rgba(0,102,204,0.1) 50%,
        rgba(255,102,0,0.05) 100%);
    border-radius: 15px;
    box-shadow:
        0 4px 20px rgba(0,0,0,0.2),
        inset 0 1px 0 rgba(255,255,255,0.1);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0;
    transform: scale(0.95);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: -1;
}

.nav-content li:hover::after {
    opacity: 1;
    transform: scale(1.02);
}

/* Menu text enhancement */
.nav-content a {
    position: relative;
    z-index: 2;
    font-weight: 700;
    text-shadow: 2px 2px 8px rgba(0,0,0,0.8);
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.nav-content a:hover {
    color: #ffffff !important;
    text-shadow: 0 0 15px rgba(255,255,255,0.8);
    transform: translateZ(10px) scale(1.02);
}

/* Staggered entrance animation */
.nav-overlay.active .nav-content li {
    animation: staggerIn 0.6s ease forwards;
}

.nav-overlay.active .nav-content li:nth-child(1) { animation-delay: 0.1s; }
.nav-overlay.active .nav-content li:nth-child(2) { animation-delay: 0.2s; }
.nav-overlay.active .nav-content li:nth-child(3) { animation-delay: 0.3s; }
.nav-overlay.active .nav-content li:nth-child(4) { animation-delay: 0.4s; }
.nav-overlay.active .nav-content li:nth-child(5) { animation-delay: 0.5s; }

@keyframes staggerIn {
    from {
        opacity: 0;
        transform: translateY(30px) rotateX(15deg);
    }
    to {
        opacity: 1;
        transform: translateY(0) rotateX(0deg);
    }
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .nav-container {
        padding: 0px 15px;
    }

    .navbar-brand {
        font-size: 1.2em;
    }

    .hamburger-btn {
        width: 15vh;
        height: 15vh;
    }

    .hamburger-line {
        height: 2px;
    }

    /* Limita padding del body su mobile */
    body {
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Limita padding dei container principali su mobile */
    .container,
    .wp-site-blocks,
    .wp-block-group {
        padding-left: 0px !important;
        padding-right: 0px !important;
    }

    /* Limita padding del contenuto principale */
    .entry-content,
    .page-content {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* Body scroll lock when menu is open */
body.menu-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
    height: 100%;
}



/* ===============================================
   EXTENDED HERO SECTION WITH SOCIAL OVERLAY
=============================================== */

.hero-section-extended {
    position: relative;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    color: white;
    overflow: hidden;
}

.hero-background {
    position: relative;
    min-height: 70vh;
    width: 100%;
    background: linear-gradient(135deg, rgba(255,102,0,0.9), rgba(0,102,204,0.8));
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-background::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255,102,0,0.9), rgba(0,102,204,0.8));
    z-index: -1;
}

.hero-section {
    position: relative;
    min-height: 70vh;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(255,102,0,0.9), rgba(0,102,204,0.8));
}

/* Social Cards Overlay positioned at bottom of extended hero */
.social-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 40px 20px 60px;
    background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(0,0,0,0.2) 50%,
        rgba(0,0,0,0.4) 100%
    );
}

.social-overlay h2 {
    color: white !important;
    margin-bottom: 25px;
    text-shadow: 2px 2px 8px rgba(0,0,0,0.7);
}

/* Ensure social cards in overlay have enhanced visibility */
.hero-section-extended .social-overlay .social-card {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(15px) !important;
    color: #333 !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.3) !important;
}

.hero-section-extended .social-overlay .social-card h4,
.hero-section-extended .social-overlay .social-card p {
    color: #333 !important;
}

.hero-section-extended .social-overlay .social-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 12px 35px rgba(0,0,0,0.4) !important;
}

/* Create spacing for content after extended hero */
.main-content-start {
    position: relative;
    z-index: 100;
}

.after-extended-hero {
    margin-top: 200px;
}

/* WordPress Block Cover Overlay - Content sovrapposto SOLO nella hero section */
.hero-section .wp-block-cover__inner-container.is-layout-flow.wp-block-cover-is-layout-flow {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 15 !important;
    text-align: center !important;
    width: 100% !important;
    max-width: 1200px !important;
    padding: 0 40px !important;
    color: white !important;
    pointer-events: auto !important;
}

.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255,102,0,0.9), rgba(0,102,204,0.8));
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
    text-align: center;
}

.hero-content h1 {
    font-size: 4.5em;
    font-weight: 900;
    margin-bottom: 20px;
    text-shadow:
        3px 3px 6px rgba(0,0,0,0.8),
        1px 1px 3px rgba(0,0,0,0.9),
        6px 6px 15px rgba(0,0,0,0.4),
        0px 0px 25px rgba(0,102,204,0.3);
    letter-spacing: -1px;
}

/* Enhanced text shadow for all hero text elements */
.hero-content .subtitle,
.hero-content .description {
    text-shadow:
        2px 2px 8px rgba(0,0,0,0.7),
        1px 1px 3px rgba(0,0,0,0.9),
        4px 4px 12px rgba(0,0,0,0.3);
}

/* WordPress Block Editor Hero Text Shadows */
/* Apply strong shadows to WordPress cover block headings */
.wp-block-cover.alignfull .wp-block-cover__inner-container .wp-block-heading.has-text-align-center.has-white-color.has-text-color {
    text-shadow:
        3px 3px 8px rgba(0,0,0,0.9),
        1px 1px 4px rgba(0,0,0,1),
        6px 6px 16px rgba(0,0,0,0.5),
        0px 0px 30px rgba(0,102,204,0.4) !important;
}

/* Apply medium shadows to paragraphs in cover blocks */
.wp-block-cover.alignfull .wp-block-cover__inner-container p.has-text-align-center.has-white-color.has-text-color,
.wp-block-cover.alignfull .wp-block-cover__inner-container h3.has-text-align-center.has-white-color.has-text-color {
    text-shadow:
        2px 2px 10px rgba(0,0,0,0.8),
        1px 1px 4px rgba(0,0,0,0.95),
        5px 5px 14px rgba(0,0,0,0.4) !important;
}

.hero-content .subtitle {
    font-size: 1.5em;
    margin-bottom: 20px;
    opacity: 0.95;
    font-weight: 400;
}

.hero-content .description {
    font-size: 1.2em;
    max-width: 700px;
    margin: 0 auto 40px;
    opacity: 0.9;
    line-height: 1.6;
}

/* ===============================================
   SECTIONS
=============================================== */

.section {
    padding: 80px 0;
}

.section-white {
    background: transparent;
}

.section-gray {
    background: transparent;
}

.section-primary {
    background: linear-gradient(135deg, rgba(255,102,0,0.1), rgba(0,102,204,0.1));
    color: white;
}

/* Full-width sections beyond container limits */
.full-width-section {
    width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    position: relative;
    left: 50%;
    right: 50%;
    margin-right: -50%;
}

/* Alternative class for sections that extend full width */
.extend-full-width {
    width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    max-width: none !important;
}

/* Only hero blocks are full width - other blocks stay normal container width */
.hero-block-container .wp-block-cover,
.hero-block-container .wp-block-group.has-background {
    width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    position: relative;
    max-width: none !important;
}

/* Force normal container width for all other blocks */
.container .wp-block-group:not(.hero-block-container),
.container .section-primary:not(.hero-section),
.container .wp-block-covers {
    width: 100% !important;
    margin-left: 0 !important;
    max-width: 100% !important;
}

/* ===============================================
   CARDS & COMPONENTS
=============================================== */

.card {
    border: none;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}

.card-header {
    background: var(--dinamo-primary);
    color: white;
    font-weight: 700;
}

.btn-primary {
    background: var(--dinamo-primary);
    border-color: var(--dinamo-primary);
    font-weight: 600;
    padding: 12px 30px;
    border-radius: 8px;
    transition: background 0.3s ease;
}

.btn-primary:hover {
    background: var(--dinamo-secondary);
    border-color: var(--dinamo-secondary);
}

/* ===============================================
   NEWS GRID - NEWS ARTICLES
=============================================== */

/* Classe principale per il grid degli articoli notizie */
.news-articles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin: 40px 0;
}

/* Singoli articoli notizie con glassmorphism */
.news-article-card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 3px 10px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}

/* Thumbnail immagini articoli notizie */
.news-article-thumbnail {
    height: 200px;
    overflow: hidden;
}

/* Classe per il contenuto testuale degli articoli */
.news-article-content {
    padding: 20px;
}

/* Titoli articoli notizie */
.news-article-title {
    margin-bottom: 10px;
    font-size: 1.2em;
    font-weight: 700;
}

/* Estratti articolo notizie */
.news-article-excerpt {
    color: var(--text-light);
    line-height: 1.5;
}

/* Meta informazioni articoli (data, autore) */
.news-article-meta {
    color: var(--text-light);
    font-size: 0.9em;
    margin-bottom: 15px;
}

.news-article-meta span {
    margin-right: 10px;
}

.news-item:hover {
    transform: translateY(-3px);
}

.news-thumbnail {
    height: 200px;
    overflow: hidden;
}

.news-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.news-item:hover .news-thumbnail img {
    transform: scale(1.05);
}

.news-content {
    padding: 20px;
}

.news-title {
    margin-bottom: 10px;
    font-size: 1.2em;
    font-weight: 700;
}

.news-excerpt {
    color: var(--text-light);
    line-height: 1.5;
}

/* ===============================================
   SOCIAL MEDIA COMPONENTS
=============================================== */

/* Container principale delle card social */
.social-media-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    padding: 40px 0;
}

/* Singole card social media */
.social-media-card {
    flex: 1 1 250px;
    max-width: 300px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 15px;
    padding: 30px;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Icone titole delle card social */
.social-media-icon {
    margin-bottom: 15px;
    color: var(--dinamo-primary);
    font-weight: 700;
    font-size: 1.2em;
}

/* Descrizioni delle card social */
.social-media-description {
    margin-bottom: 15px;
    line-height: 1.5;
}

/* Link/pulsanti delle card social */
.social-media-link {
    display: inline-block;
    padding: 10px 20px;
    background: var(--dinamo-primary);
    color: white;
    text-decoration: none;
    border-radius: 25px;
    font-weight: 600;
    transition: background 0.3s ease;
}

.social-media-link:hover {
    background: var(--dinamo-secondary);
    color: white;
}

.social-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}

.social-card {
    flex: 1 1 250px;
    max-width: 300px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 15px;
    padding: 30px;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.social-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

.social-card h4 {
    margin-bottom: 15px;
    color: var(--dinamo-primary);
    font-weight: 700;
}

.social-card p {
    margin-bottom: 10px;
}

/* ===============================================
   DIVISION TEAM CARDS - PRIMA DIVISIONE
=============================================== */

/* Container principale delle card delle squadre */
.division-team-cards {
    display: flex;
    flex-direction: column;
    gap: 30px;
    margin-top: 20px;
}

/* Layout orizzontale per Prima Divisione */
.prima-divisione-horizontal {
    flex-direction: row !important;
    justify-content: space-between;
    gap: 30px !important;
}

.prima-divisione-horizontal .division-team-card {
    flex: 1;
    min-width: 45%;
    max-width: 48%;
}

/* Card principale Serie D centrata - stessa larghezza dei 2 box Prima Divisione */
.serie-d-main {
    width: 95%;
    max-width: 1200px;
    margin: 0 auto;
}

/* Singola card squadra */
.division-team-card {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(20px) !important;
    border-radius: 20px !important;
    padding: 30px !important;
    border: 2px solid rgba(255, 255, 255, 0.8) !important;
    box-shadow:
        0 10px 30px rgba(0,0,0,0.1),
        inset 0 1px 0 rgba(255,255,255,0.6) !important;
    transition: all 0.3s ease !important;
    position: relative;
    overflow: hidden;
}

/* Effetti hover per le card squadra */
.division-team-card:hover {
    transform: translateY(-8px) !important;
    box-shadow:
        0 20px 40px rgba(0,0,0,0.15),
        inset 0 1px 0 rgba(255,255,255,0.8) !important;
}

/* Styling specifico per squadra maschile */
.team-gender-male {
    border-left: 6px solid var(--dinamo-secondary) !important;
    background: linear-gradient(
        135deg,
        rgba(0, 102, 204, 0.9) 0%,
        rgba(0, 166, 255, 0.8) 100%
    ) !important;
}

/* Styling specifico per squadra femminile */
.team-gender-female {
    border-left: 6px solid #ff66cc !important;
    background: linear-gradient(
        135deg,
        rgba(255, 102, 204, 0.9) 0%,
        rgba(255, 156, 204, 0.8) 100%
    ) !important;
}

/* Titoli delle card squadra */
.division-team-card h4 {
    font-size: 1.4em !important;
    margin-bottom: 5px !important;
    color: white !important;
    text-shadow: 2px 2px 8px rgba(0,0,0,0.5) !important;
}

.division-team-card h5 {
    font-size: 1.1em !important;
    margin-bottom: 15px !important;
    color: rgba(255,255,255,0.9) !important;
    font-weight: 500 !important;
}

/* Testo descrizione squadra */
.division-team-card p {
    color: rgba(255,255,255,0.95) !important;
    line-height: 1.6 !important;
    margin-bottom: 25px !important;
}

/* Container statistiche squadra */
.team-stats {
    display: flex !important;
    gap: 20px !important;
    margin-bottom: 25px !important;
    flex-wrap: wrap !important;
}

/* Singole statistiche */
.stat {
    background: rgba(255,255,255,0.2) !important;
    border-radius: 12px !important;
    padding: 15px 12px !important;
    text-align: center !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255,255,255,0.3) !important;
    flex: 1 !important;
    min-width: 80px !important;
}

/* Numero delle statistiche */
.stat-number {
    display: block !important;
    font-size: 2em !important;
    font-weight: 800 !important;
    color: white !important;
    text-shadow: 2px 2px 6px rgba(0,0,0,0.7) !important;
    margin-bottom: 5px !important;
}

/* Etichetta delle statistiche */
.stat-label {
    font-size: 0.9em !important;
    color: rgba(255,255,255,0.8) !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

/* Pulsanti delle card squadra */
.division-team-card .btn-primary {
    background: rgba(255,255,255,0.2) !important;
    border: 2px solid rgba(255,255,255,0.5) !important;
    color: white !important;
    padding: 12px 25px !important;
    font-weight: 600 !important;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5) !important;
    backdrop-filter: blur(10px) !important;
}

.division-team-card .btn-primary:hover {
    background: rgba(255,255,255,0.3) !important;
    border-color: rgba(255,255,255,0.8) !important;
    color: white !important;
    transform: translateY(-2px) !important;
}

/* Responsive per mobile */
@media (max-width: 768px) {
    .division-team-cards {
        gap: 20px;
        margin-top: 15px;
    }

    .division-team-card {
        padding: 25px 20px !important;
    }

    .division-team-card h4 {
        font-size: 1.3em !important;
    }

    .division-team-card h5 {
        font-size: 1em !important;
    }

    .division-team-card p {
        font-size: 0.95em !important;
        margin-bottom: 20px !important;
    }

    .team-stats {
        gap: 15px !important;
        margin-bottom: 20px !important;
    }

    .stat {
        padding: 12px 8px !important;
        min-width: 70px !important;
    }

    .stat-number {
        font-size: 1.8em !important;
    }
}

/* ===============================================
   FOOTER
=============================================== */

.footer {
    background: #001122; /* Blu notte per il footer */
    color: white;
    padding: 50px 0 20px;
}

.footer .footer-section h5 {
    color: var(--dinamo-accent);
    font-weight: 700;
    margin-bottom: 20px;
}

.footer ul {
    list-style: none;
    padding: 0;
}

.footer ul li {
    margin-bottom: 10px;
}

.footer ul li a {
    color: rgba(255,255,255,0.8);
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer ul li a:hover {
    color: var(--dinamo-accent);
}

.footer .copyright {
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 20px;
    margin-top: 30px;
    text-align: center;
    color: rgba(255,255,255,0.6);
}

/* ===============================================
   FIGMA DESIGN RESPONSIVE
=============================================== */

@media (max-width: 768px) {
    /* Figma Hero Section Responsive */
    .figma-hero-background {
        height: 60vh;
        background-attachment: scroll;
    }

    .figma-blog-hero h1 {
        font-size: 2.8em;
    }

    .figma-blog-hero .subtitle {
        font-size: 1.2em;
    }

    .figma-blog-hero .description {
        font-size: 0.95em;
    }

    /* CTA Buttons Responsive */
    .figma-cta-container {
        flex-direction: column;
        gap: 15px;
        padding: 40px 20px;
    }

    .figma-cta-button {
        padding: 15px 25px;
        font-size: 12px;
        letter-spacing: 5%;
    }

    /* Content Background Responsive */
    .figma-content-background {
        background-attachment: scroll;
        padding: 60px 20px;
    }

    /* Team Cards Responsive */
    .division-team-cards {
        gap: 20px;
    }

    .division-team-card {
        padding: 25px 20px !important;
    }

    .division-team-card h4 {
        font-size: 1.3em !important;
    }

    .team-stats {
        gap: 15px !important;
        margin-bottom: 20px !important;
    }

    .social-cards {
        gap: 20px;
    }

    /* Existing responsive rules */
    .hero-section h1 {
        font-size: 2.5em;
    }

    .hero-section .subtitle,
    .hero-section .description {
        font-size: 0.9em;
    }

    .section {
        padding: 50px 0;
    }

    .social-cards {
        flex-direction: column;
        align-items: center;
    }

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

@media (max-width: 576px) {
    .hero-section {
        min-height: 50vh;
        padding: 20px;
    }

    .hero-section h1 {
        font-size: 2em;
    }

    .navbar-brand {
        font-size: 1.2em;
    }
}

/* ===============================================
   ANIMATIONS & EFFECTS
=============================================== */

.fade-in {
    animation: fadeIn 0.6s ease-in;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.slide-up {
    animation: slideUp 0.8s ease-out;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===============================================
   UTILITY CLASSES
=============================================== */

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 1rem; }
.mb-4 { margin-bottom: 1.5rem; }
.mb-5 { margin-bottom: 3rem; }
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 1rem; }
.mt-4 { margin-top: 1.5rem; }
.mt-5 { margin-top: 3rem; }

/* ===============================================
   SWIPER CUSTOMIZATION
=============================================== */

.swiper {
    width: 100%;
    height: 100%;
}

.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

.swiper-pagination-bullet-active {
    background: var(--dinamo-primary) !important;
}

/* ===============================================
   TRANSPARENT BLOCKS FOR SERIE D PAGE
=============================================== */

/* Transparent background sections */
.serie-d-roster-block,
.serie-d-staff-block,
.serie-d-calendar-block,
.serie-d-stats-block {
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 15px;
    padding: 25px;
    margin: 20px 0;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

/* Fallback for browsers that don't support backdrop-filter */
@supports not (backdrop-filter: blur(10px)) {
    .serie-d-roster-block,
    .serie-d-staff-block,
    .serie-d-calendar-block,
    .serie-d-stats-block {
        background: rgba(255, 255, 255, 0.15) !important;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
}

/* Page-specific transparent elements */
.page-id-70 .wp-block-columns,
.page-id-70 .wp-block-group {
    background: transparent !important;
}

/* Make specific divs in Serie D page transparent */
.page-id-70 div[style*="background"] {
    background: transparent !important;
}

/* Table styling for transparent backgrounds */
.page-id-70 table {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    border-radius: 10px;
    border-collapse: collapse;
}

.page-id-70 table th,
.page-id-70 table td {
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 12px;
}

.page-id-70 table th {
    background: rgba(0, 102, 204, 0.3) !important;
    font-weight: bold;
}

/* List items styling for better visibility */
.page-id-70 ul li {
    margin-bottom: 8px;
    padding: 5px 0;
}

.page-id-70 ul li strong {
    color: #ff6600;
}

/* ===============================================
   CAMPIONATI SUMMARY CARDS
=============================================== */

.campionati-summary-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    margin: 40px 0;
}

.campionato-summary-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(0,102,204,0.05));
    border-radius: 20px;
    padding: 30px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    border: 2px solid rgba(255,255,255,0.2);
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.campionato-summary-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.15);
    border-color: var(--dinamo-primary);
}

/* Serie D Card - Più prominente */
.serie-d-card {
    background: linear-gradient(135deg, rgba(255,102,0,0.9), rgba(204,102,0,0.7)) !important;
    color: white !important;
    grid-column: 1/-1;
    text-align: center;
}

.serie-d-card .campionato-title {
    color: white !important;
    text-shadow: 2px 2px 6px rgba(0,0,0,0.5);
}

/* Prima Divisione Cards - Affiancatio su desktop */
.prima-maschile-card,
.prima-femminile-card {
    background: linear-gradient(135deg, rgba(0,102,204,0.9), rgba(0,166,255,0.7)) !important;
}

.prima-maschile-card .campionato-title,
.prima-femminile-card .campionato-title {
    color: white !important;
}

.campionato-header {
    margin-bottom: 25px;
    text-align: center;
}

.campionato-title {
    font-size: 1.8em;
    font-weight: 800;
    margin-bottom: 8px;
    color: var(--dinamo-primary);
}

.campionato-tagline {
    font-size: 1.1em;
    color: var(--text-light);
    font-style: italic;
}

.campionato-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
    margin-bottom: 25px;
}

.last-match,
.next-match {
    text-align: center;
}

.last-match h4,
.next-match h4 {
    font-size: 1.2em;
    font-weight: 700;
    margin-bottom: 15px;
    color: var(--text-dark);
}

.match-summary {
    padding: 15px;
    background: rgba(255,255,255,0.8);
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    border: 1px solid rgba(255,255,255,0.3);
}

.loading-match {
    color: var(--text-light);
    font-style: italic;
}

/* Match visualization */
.match-info {
    font-weight: 600;
    color: var(--text-dark);
}

.match-result.highlight,
.match-result.victory {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.2), rgba(74, 222, 128, 0.1)) !important;
    color: #166534 !important;
    border: 1px solid rgba(34, 197, 94, 0.3) !important;
}

.match-result.defeat {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(248, 113, 113, 0.1)) !important;
    color: #dc2626 !important;
    border: 1px solid rgba(239, 68, 68, 0.3) !important;
}

.campionato-action {
    text-align: center;
}

.view-full-calendar-btn {
    background: linear-gradient(135deg, var(--dinamo-primary), var(--dinamo-secondary));
    color: white !important;
    padding: 12px 30px;
    border-radius: 50px;
    text-decoration: none !important;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(255,102,0,0.4);
    display: inline-block;
    border: 2px solid var(--dinamo-primary);
}

.view-full-calendar-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255,102,0,0.6);
    background: var(--dinamo-secondary);
    border-color: var(--dinamo-secondary);
}

.disclaimer {
    text-align: center;
    font-size: 0.9em;
    color: var(--text-light);
    font-style: italic;
    margin-top: 30px;
}

/* Match summary display styling */
.match-summary-item {
    padding: 15px;
    background: rgba(255,255,255,0.9);
    border-radius: 10px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.1);
    text-align: center;
    font-size: 0.9em;
}

/* Match teams display */
.match-teams {
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 8px;
    font-size: 1em;
    line-height: 1.3;
}

/* Match date display */
.match-date {
    color: var(--text-light);
    font-size: 0.85em;
    margin-bottom: 10px;
    font-style: italic;
}

/* Match status display */
.match-status,
.match-result {
    font-weight: 600;
    font-size: 1em;
}

/* Error message styling */
.error-message {
    color: #dc2626;
    font-style: italic;
    text-align: center;
    padding: 10px;
    background: rgba(220, 38, 38, 0.1);
    border-radius: 5px;
    border: 1px solid rgba(220, 38, 38, 0.2);
}

/* Loading animation for match items */
@keyframes pulse {
    0% { opacity: 0.6; }
    50% { opacity: 1; }
    100% { opacity: 0.6; }
}

.match-summary .loading-match {
    padding: 20px;
    color: var(--text-light);
    font-style: italic;
    animation: pulse 2s infinite;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .campionato-stats {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .campionato-title {
        font-size: 1.5em;
    }

    .campionati-summary-container {
        gap: 25px;
    }

    .prima-maschile-card,
    .prima-femminile-card {
        grid-column: 1/-1;
    }

    .match-summary-item {
        padding: 12px;
        font-size: 0.85em;
    }

    .match-teams {
        font-size: 0.95em;
    }
}

/* ===============================================
   FIGMA SPORTS BLOG DESIGN - NEW COMPONENTS
=============================================== */

/* Main container for Figma-inspired design */
.figma-sports-layout {
    background: #FFFFFF;
    font-family: 'Open Sans', sans-serif;
    min-height: 100vh;
}

/* Hide default Gutenberg content when using Figma layout on front page */
.figma-sports-layout .page-content .wp-block-cover,
.figma-sports-layout .page-content .wp-block-group,
.figma-sports-layout .page-content .wp-block-heading,
.figma-sports-layout .page-content .wp-block-cover__inner-container {
    display: none !important;
}

/* Background images from Figma */
.figma-hero-background {
    position: relative;
    width: 100vw;
    height: 70vh;
    background-image:
        linear-gradient(135deg, rgba(255,102,0,0.7), rgba(0,102,204,0.75)),
        url('images/background-1.png');
    background-size: cover, cover;
    background-position: center center, center center;
    background-repeat: no-repeat, no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: calc(-50vw + 50%);
    overflow: hidden;
}

.figma-content-background {
    position: relative;
    background: url('images/background-2.png') no-repeat center center;
    background-size: cover;
    background-attachment: fixed;
    padding: 80px 20px;
}

/* CTA Buttons from Figma design */
.figma-cta-button {
    display: inline-block;
    background: #FFFFFF;
    color: #DEAA3D;
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 7.142857142857142%;
    padding: 20px 40px;
    border-radius: 50px;
    border: 2px solid #DEAA3D;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.figma-cta-button:hover {
    background: #DEAA3D;
    color: #FFFFFF;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(222,170,61,0.4);
}

.figma-cta-button-green {
    border-color: #53AA51;
    color: #53AA51;
}

.figma-cta-button-green:hover {
    background: #53AA51;
    color: #FFFFFF;
    box-shadow: 0 6px 20px rgba(83,170,81,0.4);
}

/* CTA Container - inspired by Figma positioning */
.figma-cta-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    align-items: center;
    padding: 80px 20px;
    background: linear-gradient(135deg, rgba(255,102,0,0.1), rgba(0,102,204,0.1));
    margin: 40px 0;
}

/* Dinamo Mission CTA Section */
.dinamo-mission-cta {
    max-width: 1200px;
    width: 100%;
    text-align: center;
    color: var(--text-dark);
}

.mission-title {
    font-size: 2.5em;
    font-weight: 800;
    color: var(--dinamo-primary);
    margin-bottom: 20px;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
}

.mission-text {
    font-size: 1.2em;
    line-height: 1.6;
    color: var(--text-dark);
    max-width: 800px;
    margin: 0 auto 50px;
    font-weight: 400;
}

.cta-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 40px;
    margin-bottom: 40px;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

.cta-highlight {
    background: rgba(255, 255, 255, 0.96);
    border-radius: 20px;
    padding: 30px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    border: 2px solid rgba(255,102,0,0.2);
    transition: all 0.3s ease;
}

.cta-highlight:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.2);
    border-color: var(--dinamo-primary);
}

.cta-icon {
    font-size: 3em;
    margin-bottom: 15px;
    display: block;
}

.cta-highlight h4 {
    font-size: 1.4em;
    font-weight: 700;
    color: var(--dinamo-primary);
    margin-bottom: 15px;
}

.cta-highlight p {
    font-size: 1em;
    line-height: 1.6;
    color: var(--text-dark);
    margin-bottom: 20px;
}

.cta-highlight .figma-cta-button {
    margin: 5px 5px 0 0;
    font-size: 0.9em;
    padding: 12px 20px;
}

.cta-primary {
    border-color: var(--dinamo-primary) !important;
    color: var(--dinamo-primary) !important;
}

.cta-social {
    border-color: var(--dinamo-secondary) !important;
    color: var(--dinamo-secondary) !important;
}

.mission-footer {
    margin-top: 50px;
    padding: 30px;
    background: linear-gradient(135deg, rgba(255,102,0,0.15), rgba(0,102,204,0.15));
    border-radius: 15px;
    border: 2px solid rgba(255,102,0,0.3);
}

.feel-good-message {
    font-size: 1.3em;
    font-weight: 600;
    color: var(--text-dark);
    line-height: 1.5;
    margin: 0;
}

/* ===============================================
   SERIE D CALENDAR & RESULTS SECTION
=============================================== */

.serie-d-calendar-container {
    background: linear-gradient(135deg, rgba(255,102,0,0.1), rgba(0,102,204,0.1));
    border-radius: 15px;
    padding: 40px;
    margin: 40px 0;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

/* Calendar loading animation */
.calendar-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 200px;
}

.calendar-loading .spinner-border {
    width: 3rem;
    height: 3rem;
    border: 4px solid #DEAA3D;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Results table styling (simulating .tbl-risultati from FIPAV) */
.calendar-results table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    font-size: 0.9em;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    border-radius: 10px;
    overflow: hidden;
}

.calendar-results table thead {
    background: linear-gradient(135deg, var(--dinamo-primary), var(--dinamo-secondary));
    color: white;
}

.calendar-results table th,
.calendar-results table td {
    padding: 15px 12px;
    text-align: left;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.calendar-results table th {
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.8em;
    letter-spacing: 1px;
}

.calendar-results table tbody tr:hover {
    background: rgba(255,102,0,0.05);
    transition: background-color 0.3s ease;
}

.calendar-results table tbody tr:nth-child(even) {
    background: rgba(0,102,204,0.02);
}

/* Risultato partita styling */
.match-result {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 0.85em;
    text-align: center;
    min-width: 30px;
}

.match-result.win {
    background: rgba(20, 184, 166, 0.2);
    color: #0d9488;
    border: 1px solid rgba(20, 184, 166, 0.3);
}

.match-result.loss {
    background: rgba(239, 68, 68, 0.2);
    color: #dc2626;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.match-result.tie {
    background: rgba(156, 163, 175, 0.2);
    color: #6b7280;
    border: 1px solid rgba(156, 163, 175, 0.3);
}

/* Squadra highlight - evidendra la Dinamo */
.our-team {
    font-weight: 700;
    color: var(--dinamo-primary);
    background: linear-gradient(135deg, rgba(255,102,0,0.1), rgba(255,102,0,0.2));
    padding: 2px 6px;
    border-radius: 4px;
}

/* Calendar filters styling */
.calendar-filters {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.calendar-filters .filter-btn {
    padding: 8px 16px;
    border-radius: 20px;
    border: 2px solid;
    background: transparent;
    font-weight: 600;
    font-size: 0.85em;
    transition: all 0.3s ease;
    cursor: pointer;
}

.calendar-filters .filter-btn.active {
    background: var(--dinamo-primary);
    color: white;
    border-color: var(--dinamo-primary);
}

.calendar-filters .filter-btn:checked,
.calendar-filters .filter-btn:active {
    box-shadow: 0 0 0 2px rgba(255, 102, 0, 0.3);
}

/* Responsive calendar table */
@media (max-width: 768px) {
    .serie-d-calendar-container {
        padding: 20px;
    }

    .calendar-results table {
        font-size: 0.8em;
    }

    .calendar-results table th,
    .calendar-results table td {
        padding: 10px 8px;
    }

    .calendar-loading {
        min-height: 150px;
    }

    .calendar-filters {
        gap: 8px;
        margin-bottom: 15px;
    }

    .calendar-filters .filter-btn {
        padding: 6px 12px;
        font-size: 0.8em;
    }
}

/* Featured blog sections */
.figma-blog-hero {
    color: white;
    text-align: center;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.figma-blog-hero h1 {
    font-size: 4em;
    font-weight: 900;
    margin-bottom: 20px;
    text-shadow: 3px 3px 6px rgba(0,0,0,0.8);
}

.figma-blog-hero .subtitle {
    font-size: 1.5em;
    font-weight: 700;
    margin-bottom: 10px;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.7);
}

.figma-blog-hero .description {
    font-size: 1.2em;
    font-weight: 400;
    margin-bottom: 40px;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.7);
}

/* ===============================================
   INSTAGRAM-STYLE NEWS SECTION
=============================================== */

/* Instagram-style news update box - apply to both new and existing classes */
.update-info,
.instagram-news-update {
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.9) 0%,
        rgba(242, 249, 255, 0.85) 50%,
        rgba(248, 250, 255, 0.9) 100%
    ) !important;
    backdrop-filter: blur(15px) !important;
    border: 2px solid #E1306C !important;
    border-radius: 15px !important;
    padding: 25px !important;
    margin: 20px auto !important;
    box-shadow:
        0 6px 25px rgba(225, 48, 108, 0.15),
        0 2px 10px rgba(225, 48, 108, 0.1),
        inset 0 1px 0 rgba(255,255,255,0.6) !important;
    width: 90% !important;
    max-width: 500px !important;
}

/* Instagram-gradient border left */
.instagram-news-update::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 80%;
    background: linear-gradient(
        180deg,
        #833ab4 0%,
        #fd1d1d 30%,
        #fcb045 70%,
        #ffdc80 100%
    ) !important;
    border-radius: 2px;
    opacity: 0.8;
}

/* Instagram-style title */
.instagram-news-update h3 {
    font-family: 'Permanent Marker', cursive !important;
    font-size: 1.8em !important;
    font-weight: 700 !important;
    color: #E1306C !important;
    text-align: center !important;
    margin-bottom: 15px !important;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.1) !important;
    letter-spacing: 1px !important;
}

/* Instagram-style text */
.instagram-news-update p {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif !important;
    font-size: 1.1em !important;
    font-weight: 400 !important;
    color: #555 !important;
    line-height: 1.6 !important;
    margin-bottom: 20px !important;
}

/* Instagram-style link button */
.instagram-news-update .cta-button {
    text-align: center !important;
}

.instagram-news-update .wp-block-button__link {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif !important;
    font-size: 1em !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: 0.5px !important;
    background: linear-gradient(
        45deg,
        #f09433 0%,
        #e6683c 25%,
        #dc2743 50%,
        #cc2366 75%,
        #bc1888 100%
    ) !important;
    border: none !important;
    padding: 12px 24px !important;
    border-radius: 8px !important;
    color: white !important;
    text-decoration: none !important;
    display: inline-block !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
}

.instagram-news-update .wp-block-button__link:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(193, 53, 132, 0.4) !important;
    background: linear-gradient(
        45deg,
        #f09433 10%,
        #e6683c 30%,
        #dc2743 60%,
        #cc2366 80%,
        #bc1888 100%
    ) !important;
}

/* Instagram-style list items */
.instagram-news-update ul {
    margin: 15px 0 !important;
    padding-left: 20px !important;
}

.instagram-news-update ul li {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif !important;
    font-size: 1em !important;
    font-weight: 500 !important;
    color: #666 !important;
    margin-bottom: 8px !important;
    line-height: 1.5 !important;
    position: relative !important;
}

/* Instagram-style bullet points */
.instagram-news-update ul li::before {
    content: "📸" !important;
    position: absolute !important;
    left: -20px !important;
    top: 0 !important;
    width: 16px !important;
    height: 16px !important;
}

/* Better container styling for Instagram news section */
/* Remove excessive padding and make background more subtle */
.wp-block-group.has-white-background-color.has-background {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
    margin: 30px 0 !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border-radius: 20px !important;
    backdrop-filter: blur(5px) !important;
    border: 1px solid rgba(255, 102, 0, 0.1) !important;
}

/* Make the container more Instagram-like with better spacing */
.wp-block-group.has-white-background-color.has-background > .wp-block-group__inner-container {
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 10px !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .instagram-news-update {
        width: 95% !important;
        padding: 20px !important;
        margin: 15px auto !important;
    }

    .instagram-news-update h3 {
        font-size: 1.6em !important;
    }

    .wp-block-group.has-white-background-color.has-background {
        padding: 15px 0 !important;
        margin: 20px 0 !important;
    }
}

/* ===============================================
   CALENDARIO PARTITE - NUOVO LAYOUT
=============================================== */

/* Serie D Blue Frame - Incornicia tutto il blocco Serie D */
.serie-d-blue-frame {
    background: linear-gradient(135deg, #0066CC 0%, #004499 100%) !important;
    border-radius: 20px !important;
    padding: 30px !important;
    box-shadow: 0 15px 40px rgba(0,102,204,0.3) !important;
    border: 3px solid #0088FF !important;
    position: relative !important;
    overflow: hidden !important;
}

.serie-d-blue-frame::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 50%, rgba(255,255,255,0.1) 100%) !important;
    pointer-events: none !important;
}

/* Prima Divisione Gray Frame - Incornicia tutto il blocco Prima Divisione */
.prima-divisione-gray-frame {
    background: rgba(128, 128, 128, 0.1) !important;
    border-radius: 20px !important;
    padding: 30px !important;
    box-shadow: 0 15px 40px rgba(128,128,128,0.2) !important;
    border: 3px solid #A0A0A0 !important;
    position: relative !important;
    overflow: hidden !important;
    backdrop-filter: blur(5px) !important;
}

.prima-divisione-gray-frame::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 50%, rgba(255,255,255,0.05) 100%) !important;
    pointer-events: none !important;
}

/* Container più grande per le partite */
.match-container-large {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(15px) !important;
    border-radius: 15px !important;
    padding: 25px !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.1) !important;
    border: 2px solid rgba(255,255,255,0.8) !important;
    transition: all 0.3s ease !important;
    margin-bottom: 20px !important;
    position: relative !important;
    z-index: 2 !important;
}

.match-container-large:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 12px 35px rgba(0,0,0,0.15) !important;
    border-color: var(--dinamo-primary) !important;
}

/* Sottotitoli delle sezioni match */
.match-subtitle {
    font-size: 1.2em !important;
    font-weight: 700 !important;
    color: var(--dinamo-primary) !important;
    margin-bottom: 15px !important;
    text-align: center !important;
    border-bottom: 2px solid var(--dinamo-primary) !important;
    padding-bottom: 8px !important;
}

/* Header dei match con titolo e link calendario */
.match-header {
    position: relative !important;
    margin-bottom: 15px !important;
    border-bottom: 2px solid var(--dinamo-primary) !important;
    padding-bottom: 8px !important;
}

/* Titolo allineato a sinistra */
.match-subtitle-left {
    font-size: 1.2em !important;
    font-weight: 700 !important;
    color: var(--dinamo-primary) !important;
    margin: 0 !important;
    text-align: left !important;
    display: inline-block !important;
}

/* Link calendario a destra */
.calendar-link {
    font-size: 1.5em !important;
    color: var(--dinamo-secondary) !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    padding: 5px !important;
    border-radius: 5px !important;
    display: inline-block !important;
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
}

.calendar-link:hover {
    color: var(--dinamo-primary) !important;
    transform: scale(1.1) !important;
    background: rgba(255, 102, 0, 0.1) !important;
}

/* Sezioni Serie D e Prima Divisione */
.serie-d-section,
.prima-divisione-section {
    background: rgba(255, 255, 255, 0.05) !important;
    border-radius: 20px !important;
    padding: 30px !important;
    margin-bottom: 30px !important;
    border: 2px solid rgba(255,255,255,0.1) !important;
    backdrop-filter: blur(10px) !important;
}

/* Box specifici per Prima Divisione */
.prima-divisione-box {
    border-left: 4px solid var(--dinamo-secondary) !important;
    position: relative !important;
}

.prima-divisione-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(0,102,204,0.05), rgba(0,166,255,0.03)) !important;
    border-radius: 13px !important;
    z-index: -1 !important;
}

/* Box specifico per Prima Divisione Femminile - Bordo Rosa */
.prima-divisione-femminile {
    border-left: 4px solid #ff69b4 !important;
}

.prima-divisione-femminile::before {
    background: linear-gradient(135deg, rgba(255,105,180,0.05), rgba(255,182,193,0.03)) !important;
}

/* ===============================================
   GENDER SELECTOR BUTTONS - Prima Divisione
=============================================== */

/* Container for gender selector row */
.gender-selector-row {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    margin-bottom: 20px !important;
}

/* Container for gender buttons */
.gender-buttons {
    display: flex !important;
    gap: 20px !important;
    justify-content: center !important;
    align-items: center !important;
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 25px !important;
    padding: 8px !important;
    border: 2px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
}

/* Individual gender buttons */
.gender-btn {
    background: transparent !important;
    border: none !important;
    padding: 12px 24px !important;
    border-radius: 20px !important;
    font-size: 1.1em !important;
    font-weight: 700 !important;
    color: rgba(255, 255, 255, 0.7) !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    position: relative !important;
    overflow: hidden !important;
    min-width: 140px !important;
}

/* Active state for selected gender */
.gender-btn.active {
    background: linear-gradient(135deg, var(--dinamo-primary), var(--dinamo-secondary)) !important;
    color: white !important;
    box-shadow: 0 4px 15px rgba(255,102,0,0.4) !important;
    transform: translateY(-1px) !important;
}

/* Hover effect for inactive buttons */
.gender-btn:not(.active):hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: rgba(255, 255, 255, 0.9) !important;
    transform: translateY(-1px) !important;
}

/* Maschile button specific styling */
.gender-maschile {
    border-left: 3px solid var(--dinamo-secondary) !important;
}

/* Femminile button specific styling */
.gender-femminile {
    border-right: 3px solid #ff69b4 !important;
}

/* Animation for button transitions */
.gender-btn::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent) !important;
    transition: left 0.5s ease !important;
}

.gender-btn:hover::before {
    left: 100% !important;
}

/* ===============================================
   GENDER VIEW TOGGLE ANIMATIONS
=============================================== */

/* Initially hide femminile box */
.prima-divisione-box.prima-divisione-femminile {
    display: none !important;
    opacity: 0 !important;
    transform: translateX(100%) !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Ensure maschile box is visible by default */
.prima-divisione-box:not(.prima-divisione-femminile) {
    display: block !important;
    opacity: 1 !important;
    transform: translateX(0) !important;
}

/* Show state for boxes */
.prima-divisione-box.show {
    display: block !important;
    opacity: 1 !important;
    transform: translateX(0) !important;
}

/* Hide state for boxes */
.prima-divisione-box.hide {
    display: none !important;
    transform: translateX(-100%) !important;
}

/* Smooth transition for all box changes */
.prima-divisione-box {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Desktop layout - show both carousels side by side without toggler */
@media (min-width: 769px) {
    /* Hide gender selector on desktop */
    .gender-selector-row {
        display: none !important;
    }

    /* Show both Prima Divisione boxes side by side on desktop */
    .prima-divisione-section .row {
        display: flex !important;
        flex-direction: row !important;
        gap: 30px !important;
    }

    .prima-divisione-section .col-md-6 {
        flex: 1 !important;
        max-width: 50% !important;
    }

    /* Ensure both boxes are always visible on desktop */
    .prima-divisione-box.prima-divisione-femminile {
        display: block !important;
        opacity: 1 !important;
        transform: translateX(0) !important;
    }

    .prima-divisione-box:not(.prima-divisione-femminile) {
        display: block !important;
        opacity: 1 !important;
        transform: translateX(0) !important;
    }
}

/* Responsive adjustments for gender selector */
@media (max-width: 768px) {
    .gender-buttons {
        gap: 10px !important;
        padding: 6px !important;
    }

    .gender-btn {
        padding: 10px 16px !important;
        font-size: 1em !important;
        min-width: 120px !important;
    }

    .gender-selector-row {
        margin-bottom: 15px !important;
    }
}

/* ===============================================
   MATCH NAVIGATION - Prima Divisione Boxes
=============================================== */

/* Match Navigation Row */
.match-navigation-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    margin-bottom: 15px !important;
    padding: 10px 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Navigation Buttons */
.nav-btn {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    color: rgba(255, 255, 255, 0.8) !important;
    padding: 8px 16px !important;
    border-radius: 20px !important;
    font-size: 0.9em !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    min-width: 120px !important;
    backdrop-filter: blur(5px) !important;
}

/* Active navigation button */
.nav-btn.active {
    background: linear-gradient(135deg, var(--dinamo-primary), var(--dinamo-secondary)) !important;
    color: white !important;
    border-color: var(--dinamo-primary) !important;
    box-shadow: 0 4px 15px rgba(255, 102, 0, 0.4) !important;
    transform: translateY(-1px) !important;
}

/* Disabled navigation button */
.nav-btn:disabled {
    opacity: 0.4 !important;
    cursor: not-allowed !important;
    background: rgba(128, 128, 128, 0.2) !important;
    border-color: rgba(128, 128, 128, 0.3) !important;
    color: rgba(128, 128, 128, 0.6) !important;
}

/* Hover effect for enabled buttons */
.nav-btn:not(:disabled):hover {
    background: rgba(255, 102, 0, 0.2) !important;
    border-color: var(--dinamo-primary) !important;
    color: white !important;
    transform: translateY(-1px) !important;
}

/* Match Counter */
.match-counter {
    text-align: center !important;
    flex: 1 !important;
    margin: 0 10px !important;
}

.match-counter span {
    background: rgba(255, 255, 255, 0.1) !important;
    color: white !important;
    padding: 6px 12px !important;
    border-radius: 15px !important;
    font-size: 0.85em !important;
    font-weight: 600 !important;
    backdrop-filter: blur(5px) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

/* ===============================================
   MATCH CAROUSEL - Horizontal Scrolling
=============================================== */

/* Carousel Container */
.match-carousel-container {
    position: relative !important;
    width: 100% !important;
    overflow: hidden !important;
    border-radius: 12px !important;
}

/* Carousel Wrapper */
.match-carousel {
    display: flex !important;
    width: 200% !important; /* 2 slides */
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative !important;
}

/* Individual Match Slides */
.match-slide {
    flex: 0 0 50% !important; /* Each slide takes 50% width */
    width: 50% !important;
    opacity: 0 !important;
    transform: scale(0.95) !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative !important;
}

/* Default active slide (last match) */
.match-slide[data-match-type="last"] {
    opacity: 1 !important;
    transform: scale(1) !important;
    z-index: 2 !important;
}

/* Active slide (can override default) */
.match-slide.active {
    opacity: 1 !important;
    transform: scale(1) !important;
    z-index: 2 !important;
}

/* Navigation transforms */
.match-carousel.slide-to-next {
    transform: translateX(-50%) !important;
}

.match-carousel.slide-to-prev {
    transform: translateX(0%) !important;
}

/* ===============================================
   NO MATCH PLACEHOLDER
=============================================== */

/* Placeholder for missing matches */
.match-placeholder {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 40px 20px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border-radius: 12px !important;
    border: 2px dashed rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(5px) !important;
    min-height: 200px !important; /* Maintain same height as match cards */
}

.match-placeholder .placeholder-icon {
    font-size: 3em !important;
    opacity: 0.6 !important;
    margin-bottom: 15px !important;
}

.match-placeholder .placeholder-title {
    font-size: 1.2em !important;
    font-weight: 600 !important;
    color: rgba(255, 255, 255, 0.8) !important;
    margin-bottom: 8px !important;
    text-align: center !important;
}

.match-placeholder .placeholder-text {
    font-size: 0.9em !important;
    color: rgba(255, 255, 255, 0.6) !important;
    text-align: center !important;
    line-height: 1.4 !important;
}

/* ===============================================
   RESPONSIVE MATCH NAVIGATION
=============================================== */

@media (max-width: 768px) {
    .match-navigation-row {
        padding: 8px 0 !important;
        margin-bottom: 12px !important;
    }

    .nav-btn {
        padding: 6px 12px !important;
        font-size: 0.8em !important;
        min-width: 100px !important;
    }

    .match-counter span {
        padding: 4px 8px !important;
        font-size: 0.8em !important;
    }

    .match-carousel-container {
        border-radius: 8px !important;
    }

    .match-placeholder {
        padding: 30px 15px !important;
        min-height: 160px !important; /* Adjusted for mobile */
    }

    .match-placeholder .placeholder-icon {
        font-size: 2.5em !important;
    }

    .match-placeholder .placeholder-title {
        font-size: 1.1em !important;
    }
}

/* ===============================================
   DINAMO MATCH WEEK PAGE STYLES
=============================================== */

/* Match Week Header Section */
.match-week-header-section {
    background: linear-gradient(135deg, var(--dinamo-primary), var(--dinamo-secondary));
    color: white;
    padding: 30px 0 20px; /* Dimezzato: da 60px 0 40px */
    position: relative;
    overflow: hidden;
}

.match-week-header-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="2" fill="rgba(255,255,255,0.1)"/></svg>');
    opacity: 0.1;
}

.match-week-header {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.match-week-title {
    font-size: clamp(2em, 5vw, 3.5em); /* Responsive: da 2em a 3.5em basato sul viewport */
    font-weight: 900;
    margin-bottom: 15px;
    text-shadow: 3px 3px 6px rgba(0,0,0,0.3);
    letter-spacing: -1px;
}

.match-week-subtitle {
    font-size: clamp(1em, 2.5vw, 1.3em); /* Responsive: da 1em a 1.3em */
    opacity: 0.9;
    font-weight: 400;
    margin-bottom: 40px;
}

/* Week Navigation */
.week-navigation {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
    max-width: 800px;
    margin: 0 auto;
}

.week-nav-btn {
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.4);
    color: white;
    padding: 15px 25px;
    border-radius: 50px;
    font-size: 1.1em;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    backdrop-filter: blur(10px);
    min-width: 200px;
}

.week-nav-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.6);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.2);
}

.current-week-display {
    text-align: center;
    min-width: 250px;
}

.week-dates {
    font-size: 1.4em;
    font-weight: 700;
    margin-bottom: 5px;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
}

.week-label {
    font-size: 0.9em;
    opacity: 0.8;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Match Week Content */
.match-week-content {
    padding: 80px 0;
    background: #f8f9fa;
}

.match-week-content .container {
    max-width: 1400px;
}

/* League Week Sections */
.league-week-section {
    margin-bottom: 60px;
    background: white;
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.1);
    border: 2px solid rgba(255,102,0,0.1);
    transition: all 0.3s ease;
}

.league-week-section:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 60px rgba(0,0,0,0.15);
    border-color: var(--dinamo-primary);
}

.league-week-title {
    font-size: clamp(1.5em, 3vw, 2em); /* Responsive: da 1.5em a 2em */
    font-weight: 800;
    color: var(--dinamo-primary);
    margin-bottom: 30px;
    text-align: center;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.1);
}

/* ===============================================
   DATE-BASED MATCH WEEK LAYOUT
=============================================== */

/* Date Section - Main container for each day */
.date-section {
    background: white;
    border-radius: 20px;
    padding: 30px;
    margin-bottom: 40px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.1);
    border: 2px solid rgba(255,102,0,0.1);
    transition: all 0.3s ease;
    overflow: hidden; /* Prevent content overflow during transitions */
}

.date-section:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 60px rgba(0,0,0,0.15);
    border-color: var(--dinamo-primary);
}

/* Collapsed state - only header visible */
.date-section.collapsed {
    padding-bottom: 20px; /* Reduce bottom padding when collapsed */
    cursor: pointer;
}

.date-section.collapsed .date-matches {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transform: scaleY(0);
    transform-origin: top;
}

/* Expanded state - full content visible */
.date-section.expanded .date-matches {
    opacity: 1;
    max-height: 2000px;
    overflow: visible;
    transform: scaleY(1);
    transform-origin: top;
}

/* Smooth transition for content visibility */
.date-matches {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: top;
}

/* Date Header - Shows day info and match count */
.date-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 3px solid var(--dinamo-primary);
    flex-wrap: wrap;
    gap: 15px;
}

.date-info {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.date-day {
    font-size: clamp(1.2em, 2.5vw, 1.8em); /* Responsive: da 1.2em a 1.8em */
    font-weight: 800;
    color: var(--dinamo-primary);
    text-transform: capitalize;
    letter-spacing: 0.5px;
}

.date-full {
    font-size: 1.2em;
    color: var(--text-dark);
    font-weight: 600;
    opacity: 0.9;
}

.date-match-count {
    background: linear-gradient(135deg, var(--dinamo-primary), var(--dinamo-secondary));
    color: white;
    padding: 12px 20px;
    border-radius: 25px;
    font-size: 1.1em;
    font-weight: 700;
    text-align: center;
    min-width: 120px;
    box-shadow: 0 4px 15px rgba(255,102,0,0.3);
}

/* Date Matches Container */
.date-matches {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    align-items: start; /* Allinea le carte in alto */
}

/* Mobile: Card in colonna singola */
@media (max-width: 768px) {
    .date-matches {
        grid-template-columns: 1fr !important; /* Una colonna su mobile */
        gap: 20px !important; /* Gap ridotto su mobile */
    }
}

/* Small screens: Riduci padding e layout ottimizzato per 500px+ */
@media (max-width: 600px) {
    .date-section {
        padding: 15px !important; /* Ridotto da 30px a 15px per viewport 500px */
        margin-bottom: 20px !important; /* Ridotto anche il margine */
    }

    .date-header {
        padding-bottom: 15px !important; /* Ridotto anche il padding dell'header */
        margin-bottom: 20px !important;
    }

    .date-match-count {
        padding: 10px 15px !important; /* Ridotto il padding del contatore */
        font-size: 1em !important; /* Font ridotto */
    }

    .date-day {
        font-size: 1.5em !important; /* Ridotto da 1.8em */
    }

    .date-full {
        font-size: 1em !important; /* Ridotto da 1.2em */
    }
}

/* Medium-small screens: Layout a 2 colonne quando possibile */
@media (min-width: 601px) and (max-width: 900px) {
    .date-matches {
        grid-template-columns: repeat(2, 1fr) !important; /* 2 colonne invece di 3 */
        gap: 20px !important; /* Gap ridotto */
    }
}

/* Tablet/Medium screens: Ottimizzazione set per schermi 770px-1400px */
@media (min-width: 769px) and (max-width: 1400px) {
    /* Riduci dimensioni set per adattarli meglio alle card più strette */
    .sets-within-score {
        gap: 8px !important; /* Gap ridotto da 24px a 8px */
        margin-top: 6px !important;
    }

    .set-square {
        width: 16px !important; /* Ridotto da 25px a 16px */
        height: 16px !important; /* Ridotto da 25px a 16px */
        font-size: 0.9em !important; /* Ridotto da 1.1em a 0.9em */
        padding: 1px !important; /* Padding ridotto */
    }

    .team-sets-group {
        gap: 3px !important; /* Gap ridotto tra gruppi */
    }

    /* Riduci anche dimensioni set-box nella sezione */
    .sets-section {
        gap: 10px !important; /* Gap ridotto */
        padding: 18px !important; /* Padding ridotto */
    }

    .set-box {
        min-width: 70px !important; /* Larghezza minima ridotta */
        height: 55px !important; /* Altezza ridotta */
        padding: 10px 12px !important; /* Padding ridotto */
    }

    .set-label {
        font-size: 0.8em !important; /* Font ridotto */
        margin-bottom: 3px !important; /* Margine ridotto */
    }

    .set-score {
        font-size: 1em !important; /* Font ridotto */
    }
}

/* Individual match item within date section */
.date-match-item {
    max-width: 100%; /* Impedisce alle carte di allargarsi oltre il contenitore */
    width: 100%;
}

/* Individual match item within date section */
.date-match-item {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 15px;
    padding: 20px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
    border: 2px solid rgba(255,102,0,0.08);
    transition: all 0.3s ease;
}

.date-match-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.12);
    border-color: var(--dinamo-primary);
}

/* Legacy League Matches Grid (for compatibility) */
.league-matches-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 30px;
    margin-top: 20px;
}

/* No League Matches */
.no-league-matches {
    text-align: center;
    padding: 40px 20px;
    color: #666;
    font-style: italic;
    background: rgba(0,0,0,0.02);
    border-radius: 15px;
    border: 2px dashed rgba(0,0,0,0.1);
}

/* Loading State */
.week-loading {
    text-align: center;
    padding: 80px 20px;
}

.loading-spinner {
    width: 60px;
    height: 60px;
    border: 4px solid var(--dinamo-primary);
    border-top: 4px solid transparent;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 20px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* No Matches Message */
.no-matches-message {
    text-align: center;
    padding: 80px 20px;
    background: white;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.1);
    max-width: 600px;
    margin: 0 auto;
}

.no-matches-icon {
    font-size: 4em;
    margin-bottom: 20px;
    opacity: 0.6;
}

.no-matches-message h3 {
    color: var(--dinamo-primary);
    font-size: 2em;
    margin-bottom: 15px;
}

.no-matches-message p {
    color: #666;
    font-size: 1.1em;
    line-height: 1.6;
}

/* Week Statistics */
.week-statistics {
    padding: 60px 0;
    background: linear-gradient(135deg, var(--dinamo-primary), var(--dinamo-secondary));
    color: white;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 30px;
    max-width: 1000px;
    margin: 0 auto;
}

.stat-card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(15px);
    border-radius: 15px;
    padding: 30px 20px;
    text-align: center;
    border: 2px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
}

.stat-card:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 15px 30px rgba(0,0,0,0.2);
}

.stat-number {
    font-size: 3em;
    font-weight: 900;
    margin-bottom: 10px;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.stat-label {
    font-size: 1.1em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.9;
}

/* Responsive Design for Match Week */
@media (max-width: 1200px) {
    .league-matches-grid {
        grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
        gap: 25px;
    }
}

@media (max-width: 992px) {
    .match-week-title {
        font-size: 2.8em;
    }

    .week-navigation {
        flex-direction: column;
        gap: 20px;
    }

    .week-nav-btn {
        min-width: 250px;
    }

    .league-week-section {
        padding: 30px 20px;
        margin-bottom: 40px;
    }

    .league-week-title {
        font-size: 1.7em;
    }
}

@media (max-width: 768px) {
    .match-week-title {
        font-size: 2.2em;
    }

    .match-week-subtitle {
        font-size: 1.1em;
    }

    .week-navigation {
        gap: 10px; /* Gap ridotto per mobile */
        flex-direction: row; /* Mantieni allineamento orizzontale */
        flex-wrap: nowrap; /* Non andare a capo */
        justify-content: center; /* Centra tutto */
        align-items: center;
    }

    .week-nav-btn {
        padding: 30px; /* Padding di 30px per i bottoni nel header mobile */
        font-size: 0.8em; /* Font più piccolo */
        min-width: 120px; /* Larghezza minima molto ridotta */
        border-radius: 30px; /* Border radius ridotto */
        position: relative;
    }

    /* Icone centrate nei pulsanti per mobile (solo icone nell'HTML) */
    .week-nav-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .current-week-display {
        min-width: 180px; /* Ridotto per mobile */
        flex-shrink: 0; /* Non rimpicciolire */
    }

    .week-dates {
        font-size: 1.1em; /* Ridotto proporzionalmente */
        margin-bottom: 3px; /* Margine ridotto */
    }

    .week-label {
        font-size: 0.75em; /* Ridotto proporzionalmente */
        opacity: 0.7; /* Opacità leggermente ridotta */
        letter-spacing: 0.5px; /* Spaziatura ridotta */
    }

    .match-week-content {
        padding: 40px 0;
    }

    .league-week-section {
        padding: 20px 15px;
        margin-bottom: 30px;
    }

    .league-matches-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .week-statistics {
        padding: 40px 0;
    }
}

@media (max-width: 576px) {
    .match-week-title {
        font-size: 1.8em;
    }

    .week-prev {
        justify-content: end;
    }

    .week-next {
        justify-content: start;
    }

    .week-nav-btn {
        min-width: 180px;
        padding: 10px 15px;
        font-size: 0.9em;
    }

    .current-week-display {
        min-width: 180px;
    }

    .week-dates {
        font-size: 1.1em;
    }

    .match-week-content .container {
        max-width: 95vw;
    }
    .league-week-title {
        font-size: 1.5em;
    }

    .stats-grid {
        grid-template-columns: 1fr;
        gap: 15px; /* Ridotto da 20px */
    }

    .stat-card {
        padding: 15px 12px; /* Ridotto da 20px 15px */
        margin-bottom: 10px; /* Aggiunto margine tra card */
    }

    .stat-number {
        font-size: 2em; /* Ridotto da 2.5em */
        margin-bottom: 8px; /* Ridotto da 10px */
    }

    .stat-label {
        font-size: 0.9em; /* Ridotto da 1.1em */
        letter-spacing: 0.3px; /* Ridotto */
    }
}

/* ===============================================
   FANTASY SPORTS CARD LAYOUT
=============================================== */

/* Main Fantasy Card Container */
.match-card.fantasy-style {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(248, 250, 255, 0.9)) !important;
    border-radius: 20px !important;
    padding: 24px !important;
    box-shadow:
        0 8px 32px rgba(0,0,0,0.1),
        0 2px 8px rgba(0,0,0,0.05),
        inset 0 1px 0 rgba(255,255,255,0.8) !important;
    border: 2px solid rgba(255,102,0,0.1) !important;
    backdrop-filter: blur(20px) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative !important;
    overflow: hidden !important;
}

/* ===============================================
   SETS WITHIN SCORE - INTEGRATED LAYOUT
=============================================== */

/* Container dei set integrato nella sezione score */
.sets-within-score {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 24px !important; /* Spazio tra i due gruppi */
    margin-top: 8px !important;
    flex-wrap: nowrap !important; /* Forza tutti i sets in un'unica riga */
}

/* Gruppo di set per squadra - trasparente */
.team-sets-group {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: transparent !important; /* Trasparente */
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}

/* Quadrato per ogni punteggio - sfondo semitrasparente */
.set-square {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 25px !important; /* 70% di 36px ≈ 25px */
    height: 25px !important; /* 70% di 36px ≈ 25px */
    background: rgba(255,255,255,0.3) !important; /* Sfondo semitrasparente */
    border: none !important;
    border-radius: 6px !important;
    font-family: 'Share Tech Mono', 'Courier New', monospace !important; /* Universidad alternative font */
    font-size: 1.1em !important;
    font-weight: 900 !important; /* Molto bold */
    color: var(--text-dark) !important;
    transition: all 0.3s ease !important;
    backdrop-filter: blur(5px) !important;
    letter-spacing: 0.5px !important; /* Migliora leggibilità font monospace */
}

.set-square:hover {
    background: rgba(255,102,0,0.2) !important;
    transform: scale(1.05) !important;
}

.match-card.fantasy-style::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--dinamo-primary), var(--dinamo-secondary)) !important;
}

/* Match Header - Compact Info */
.match-header-fantasy {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 20px !important;
    padding-bottom: 16px !important;
    border-bottom: 1px solid rgba(0,0,0,0.1) !important;
}

.championship-info {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

.championship-name {
    font-size: 1.1em !important;
    font-weight: 700 !important;
    color: var(--dinamo-primary) !important;
}

.match-time {
    font-size: 0.9em !important;
    color: var(--dinamo-secondary) !important;
    font-weight: 600 !important;
}

.match-meta {
    font-size: 0.85em !important;
    color: var(--text-light) !important;
    text-align: right !important;
}

/* Match Center - Split in two halves */
.match-center {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0 !important;
    margin-bottom: 20px !important;
    height: 200px !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15) !important;
    position: relative !important; /* Contesto di posizionamento per score-section-overlay */
    width: 100% !important; /* A tutta larghezza del contenitore padre */
}

/* Team Half - Each takes 50% width */
.team-half {
    position: relative !important;
    display: flex !important;
    flex-direction: row !important; /* Loghi in orizzontale */
    align-items: flex-start !important; /* Allinea in alto invece che al centro */
    justify-content: space-between !important; /* Loghi distribuiti ai lati */
    min-height: 200px !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    padding-top: 25% !important; /* Sposta contenuto alla metà superiore */
}

/* Background image with opacity 0.3 - separate from text */
.team-half::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    opacity: 0.3 !important; /* Solo il background ha opacità 0.3 */
    z-index: 1 !important; /* Dietro il contenuto */
}

/* Full overlay for team halves */
.team-overlay-full {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0% !important;
    background: linear-gradient(0deg, rgba(0,0,0,0.2), rgba(0,0,0,0.8)) !important; /* Background più trasparente come le immagini squadre */
    display: flex !important;
    flex-direction: row !important; /* Loghi in orizzontale */
    align-items: center !important;
    justify-content: space-between !important; /* Loghi distribuiti ai lati */
    padding: 20px !important;
    z-index: 2 !important;
}



/* Large team name for halves */
.team-name-large {
    font-size: 1.4em !important;
    font-weight: 800 !important;
    color: white !important;
    text-align: center !important;
    text-shadow:
        0 0 5px rgba(0,0,0,0.8),
        0 0 10px rgba(0,0,0,0.6),
        0 0 15px rgba(0,0,0,0.4),
        2px 2px 8px rgba(0,0,0,0.8) !important; /* Ombra centrata per maggiore leggibilità */
    margin-bottom: 10px !important;
    line-height: 1.2 !important;
    max-width: 180px !important;
    top: 10%;
    position: absolute;
}

/* Fallback logo for teams without logo */
.team-logo-fallback {
    font-size: 3em !important;
    opacity: 0.8 !important;
    filter: drop-shadow(0 0 10px rgba(255,255,255,0.5)) !important;
}

/* Score Section Overlay - Positioned over team logos */
.score-section-overlay {
    position: absolute !important;
    bottom: 20px !important; /* Posizionato 20px dal basso del match-center */
    left: 50% !important; /* Centrato orizzontalmente */
    transform: translateX(-50%) !important; /* Correzione per centraggio perfetto */
    display: flex !important;
    flex-direction: column !important; /* Layout verticale */
    align-items: center !important;
    justify-content: center !important;
    padding: 8px 20px !important; /* Padding ridotto per stabilità */
    background: rgba(255, 255, 255, 0.9) !important; /* Trasparenza leggermente aumentata */
    backdrop-filter: blur(15px) !important;
    border-radius: 12px !important; /* Border radius ridotto */
    border: 2px solid var(--dinamo-primary) !important; /* Bordo ridotto */
    box-shadow: 0 2px 15px rgba(0,0,0,0.2) !important; /* Ombra ridotta */
    z-index: 10 !important;
    transition: none !important; /* Rimosso transition per evitare sfarfallii */
    min-width: 80px !important; /* Larghezza minima per stabilità */
    max-width: 200px !important; /* Larghezza massima per evitare overflow */
}

/* Hide score overlay when no score is available */
.score-section-overlay.score-hidden {
    display: none !important;
}

/* Bordo verde per partite completate */
.match-card.fantasy-style .score-section-overlay {
    border-color: #10B981 !important; /* Verde per partite completate */
}

.score-large {
    font-family: 'Teko', sans-serif !important; /* Teko font for score */
    font-size: 2.7em !important;
    font-weight: 700 !important; /* Bold weight for score */
    color: var(--dinamo-primary) !important;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.1) !important;
    line-height: 1 !important;
    margin: 0 !important;
    letter-spacing: 4px !important;
}

/* Stats Bar - Quick Info */
.stats-bar {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 16px !important;
    background: rgba(0,0,0,0.05) !important;
    border-radius: 12px !important;
    margin-bottom: 16px !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
}

.venue {
    font-size: 0.85em !important;
    color: var(--text-light) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 4px !important;
}

/* Special styling for away matches - dark gray background with white text */
.venue-away {
    background: #333333 !important; /* Dark gray background */
    color: #ffffff !important; /* White text */
    border-radius: 8px !important;
    padding: 8px !important;
    margin: -4px !important; /* Compensate for added padding */
    box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
}

.venue-away .venue-location {
    color: #ffffff !important; /* White text for location */
}

.venue-away .venue-details {
    color: #cccccc !important; /* Light gray for details */
}



.venue-location {
    font-size: 1.17em !important; /* 30% più grande di 0.9em */
    color: var(--text-dark) !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
}

.venue-details {
    font-size: 0.8em !important;
    color: var(--text-light) !important;
    line-height: 1.3 !important;
    opacity: 0.9 !important;
}

/* Detailed Breakdown - Expandable */
.detailed-breakdown {
    border-top: 1px solid rgba(0,0,0,0.1) !important;
    padding-top: 16px !important;
}

.breakdown-toggle {
    width: 100% !important;
    background: rgba(255,102,0,0.1) !important;
    border: none !important;
    padding: 12px 16px !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    color: var(--dinamo-primary) !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
}

.breakdown-toggle:hover {
    background: rgba(255,102,0,0.2) !important;
    transform: translateY(-1px) !important;
}

.breakdown-content {
    max-height: 0 !important;
    overflow: hidden !important;
    transition: max-height 0.4s ease !important;
}

.breakdown-content.expanded {
    max-height: 500px !important;
}

/* Sets Table */
.sets-table {
    margin-top: 16px !important;
    background: rgba(255,255,255,0.8) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
}

.sets-table table {
    width: 100% !important;
    border-collapse: collapse !important;
}

.sets-table th {
    background: linear-gradient(135deg, var(--dinamo-primary), var(--dinamo-secondary)) !important;
    color: white !important;
    padding: 12px 8px !important;
    font-size: 0.8em !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.sets-table td {
    padding: 10px 8px !important;
    text-align: center !important;
    font-weight: 600 !important;
    border-bottom: 1px solid rgba(0,0,0,0.05) !important;
}

.sets-table tr:nth-child(even) {
    background: rgba(0,0,0,0.02) !important;
}

.sets-table tr:hover {
    background: rgba(255,102,0,0.05) !important;
}

/* Match Status Colors */
.match-status.completed { background: linear-gradient(135deg, #10B981, #059669) !important; }
.match-status.live { background: linear-gradient(135deg, #F59E0B, #D97706) !important; }
.match-status.scheduled { background: linear-gradient(135deg, #6B7280, #4B5563) !important; }

/* Responsive per schermi piccoli (< 1200px) - venue e referees in colonna */
@media (max-width: 1199px) {
    .stats-bar {
        flex-direction: column !important;
        gap: 8px !important;
        text-align: center !important;
    }

    .venue, .referees {
        justify-content: center !important;
        min-width: auto !important;
        flex: none !important;
    }
}

/* Responsive per schermi grandi (>= 1200px) - no wrapping automatico */
@media (min-width: 1200px) {
    .stats-bar {
        flex-wrap: nowrap !important;
    }

    .venue {
        flex: 1 !important; /* Occupa tutto lo spazio rimanente */
        flex-shrink: 0 !important;
    }

    .referees {
        flex-shrink: 0 !important;
        width: auto !important;
        align-self: flex-start;
        min-width: fit-content !important; /* Occupa solo lo spazio necessario */
    }
}

/* ===============================================
   EXPANDABLE FRAMES - Collapsible Sections
=============================================== */

/* Expandable frame base styles */
.expandable-frame {
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 15px;
    overflow: hidden;
    margin-bottom: 20px;
}

/* Frame header - clickable area */
.frame-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 30px;
    background: linear-gradient(135deg, rgba(255,102,0,0.1), rgba(0,102,204,0.1));
    border: 2px solid rgba(255,102,0,0.2);
    transition: all 0.3s ease;
}

.expandable-frame:hover .frame-header {
    background: linear-gradient(135deg, rgba(255,102,0,0.15), rgba(0,102,204,0.15));
    border-color: rgba(255,102,0,0.4);
}

/* Expand icon */
.expand-icon {
    font-size: 1.5em;
    font-weight: bold;
    color: var(--dinamo-primary);
    transition: transform 0.3s ease;
}

.expandable-frame:hover .expand-icon {
    transform: scale(1.1);
}

/* Frame content - collapsible area */
.frame-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    background: rgba(255, 255, 255, 0.05);
}

/* Expanded state */
.expandable-frame.expanded .frame-content {
    max-height: 2000px; /* Large enough for content */
}

.expandable-frame.expanded .expand-icon {
    transform: rotate(180deg);
}

/* Collapsed state styling */
.expandable-frame.collapsed .frame-header {
    border-bottom: none;
}

/* Special styling for Serie D frame */
.serie-d-blue-frame.expandable-frame .frame-header {
    background: linear-gradient(135deg, #0066CC, #004499) !important;
    color: white;
    border: none;
    border-color: #0088FF;
}

.serie-d-blue-frame.expandable-frame .frame-header h3 {
    color: white !important;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

.serie-d-blue-frame.expandable-frame .expand-icon {
    color: #FFD700;
}

/* Special styling for Prima Divisione frame */
.prima-divisione-gray-frame.expandable-frame .frame-header {
    background: rgba(128, 128, 128, 0.1) !important;
    border-color: #A0A0A0;
    border: none;

}

.prima-divisione-gray-frame.expandable-frame .frame-header h3 {
    color: var(--dinamo-primary) !important;
}

/* ===============================================
   COMMENTS TEMPLATE - WordPress Comments
=============================================== */

/* Comments area container */
.comments-area {
    margin: var(--section-margin) 0;
    padding: var(--card-padding);
    background: rgba(255, 255, 255, 0.95);
    border-radius: var(--card-radius);
    box-shadow: 0 var(--card-shadow) var(--card-shadow) rgba(0,0,0,0.1);
    border: 2px solid rgba(255,102,0,0.1);
}

/* Comments title */
.comments-title {
    color: var(--dinamo-primary);
    font-weight: 800;
    margin-bottom: var(--space-lg);
    font-size: var(--text-2xl);
    border-bottom: 3px solid var(--dinamo-primary);
    padding-bottom: var(--space-sm);
}

/* Comment list */
.comment-list {
    list-style: none;
    padding: 0;
    margin: var(--space-xl) 0;
}

.comment-list .comment {
    margin-bottom: var(--space-lg);
    padding: var(--card-padding);
    background: rgba(0,102,204,0.05);
    border-radius: 12px;
    border-left: 4px solid var(--dinamo-secondary);
}

.comment-list .comment:last-child {
    margin-bottom: 0;
}

/* Comment author and meta */
.comment-author {
    display: flex;
    align-items: center;
    margin-bottom: var(--space-sm);
    gap: var(--space-sm);
}

.comment-author .avatar {
    border-radius: 50%;
    border: 2px solid var(--dinamo-primary);
}

.comment-author b {
    color: var(--dinamo-primary);
    font-weight: 700;
}

.comment-meta {
    font-size: var(--text-sm);
    color: var(--text-light);
    margin-bottom: var(--space-sm);
}

.comment-meta a {
    color: var(--dinamo-secondary);
    text-decoration: none;
}

.comment-meta a:hover {
    color: var(--dinamo-primary);
}

/* Comment content */
.comment-content {
    line-height: 1.6;
    margin-bottom: var(--space-sm);
}

.comment-content p:last-child {
    margin-bottom: 0;
}

/* Comment reply link */
.reply {
    margin-top: var(--space-sm);
}

.comment-reply-link {
    background: var(--dinamo-primary);
    color: white !important;
    padding: 6px 12px;
    border-radius: 20px;
    text-decoration: none !important;
    font-size: var(--text-sm);
    font-weight: 600;
    transition: all 0.3s ease;
    border: 2px solid var(--dinamo-primary);
}

.comment-reply-link:hover {
    background: white !important;
    color: var(--dinamo-primary) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255,102,0,0.3);
}

/* Nested comments */
.children {
    margin-left: var(--space-xl);
    border-left: 2px solid rgba(255,102,0,0.2);
    padding-left: var(--space-lg);
}

.children .comment {
    background: rgba(255,102,0,0.05);
    border-left-color: var(--dinamo-primary);
}

/* Comment form */
.comment-form {
    margin-top: var(--space-xl);
    padding: var(--card-padding);
    background: rgba(255,102,0,0.05);
    border-radius: 12px;
    border: 2px solid rgba(255,102,0,0.1);
}

.comment-reply-title {
    color: var(--dinamo-primary);
    font-weight: 700;
    margin-bottom: var(--space-lg);
    font-size: var(--text-xl);
}

.comment-form-comment label,
.comment-form-author label,
.comment-form-email label,
.comment-form-url label {
    display: block;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: var(--space-xs);
}

.comment-form textarea,
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"] {
    width: 100%;
    padding: var(--space-sm);
    border: 2px solid rgba(0,0,0,0.1);
    border-radius: 8px;
    font-size: var(--text-base);
    transition: border-color 0.3s ease;
    margin-bottom: var(--space-md);
}

.comment-form textarea:focus,
.comment-form input[type="text"]:focus,
.comment-form input[type="email"]:focus,
.comment-form input[type="url"]:focus {
    outline: none;
    border-color: var(--dinamo-primary);
    box-shadow: 0 0 0 3px rgba(255,102,0,0.1);
}

.comment-form textarea {
    min-height: 120px;
    resize: vertical;
}

.comment-form .form-submit {
    text-align: right;
}

.comment-form .submit {
    background: linear-gradient(135deg, var(--dinamo-primary), var(--dinamo-secondary));
    color: white !important;
    border: none;
    padding: var(--button-padding);
    border-radius: var(--button-radius);
    font-weight: 600;
    font-size: var(--text-base);
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.comment-form .submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(255,102,0,0.4);
    background: var(--dinamo-secondary);
}

/* No comments message */
.no-comments {
    text-align: center;
    color: var(--text-light);
    font-style: italic;
    padding: var(--space-xl);
    background: rgba(0,0,0,0.02);
    border-radius: 8px;
    border: 1px solid rgba(0,0,0,0.05);
}

/* Comments navigation */
.comments-navigation {
    display: flex;
    justify-content: space-between;
    margin: var(--space-xl) 0;
    gap: var(--space-md);
}

.comments-navigation .nav-previous,
.comments-navigation .nav-next {
    flex: 1;
}

.comments-navigation a {
    display: block;
    padding: var(--space-sm) var(--space-md);
    background: rgba(255,102,0,0.1);
    color: var(--dinamo-primary) !important;
    text-decoration: none !important;
    border-radius: 8px;
    text-align: center;
    font-weight: 600;
    transition: all 0.3s ease;
    border: 2px solid rgba(255,102,0,0.2);
}

.comments-navigation a:hover {
    background: var(--dinamo-primary);
    color: white !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255,102,0,0.3);
}

/* Responsive comments */
@media (max-width: 768px) {
    .comments-area {
        margin: var(--space-lg) var(--space-sm);
        padding: var(--space-md);
    }

    .comment-list .comment {
        padding: var(--space-md);
        margin-bottom: var(--space-md);
    }

    .children {
        margin-left: var(--space-lg);
        padding-left: var(--space-md);
    }

    .comment-form {
        padding: var(--space-md);
    }

    .comments-navigation {
        flex-direction: column;
    }

    .comments-navigation .nav-previous,
    .comments-navigation .nav-next {
        margin-bottom: var(--space-sm);
    }
}

/* ===============================================
   INFINITE NIXCAROUSEL - Scrolling HTML Blocks
=============================================== */

/* Main nixcarousel container */
.infinite-nixcarousel {
    width: 100% !important;
    position: relative !important;
    overflow: hidden !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border-radius: 15px !important;
    padding: 20px !important;
    margin: 20px 0 !important;
    backdrop-filter: blur(10px) !important;
    border: 2px solid rgba(255, 102, 0, 0.2) !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1) !important;
    min-height: 200px !important; /* Ensure minimum height */
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
}

/* NixCarousel wrapper - flex container for items */
.nixcarousel-wrapper {
    display: flex;
    align-items: center;
    gap: 20px;
    width: fit-content;
    will-change: transform;
    position: absolute;
    top: 0;
    left: 0;
    min-height: 100px; /* Ensure minimum height */
    padding: 10px 0; /* Add some padding */
}

/* Individual nixcarousel items */
.nixcarousel-item {
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    border: 2px solid rgba(255, 102, 0, 0.1);
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    min-width: 250px;
    max-width: 350px;
    text-align: center;
}

.nixcarousel-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    border-color: var(--dinamo-primary);
}

/* NixCarousel item content */
.nixcarousel-item h4 {
    color: var(--dinamo-primary);
    font-weight: 700;
    margin-bottom: 10px;
    font-size: 1.2em;
}

.nixcarousel-item p {
    color: var(--text-dark);
    line-height: 1.6;
    margin-bottom: 15px;
}

.nixcarousel-item .nixcarousel-icon {
    font-size: 2.5em;
    margin-bottom: 15px;
    display: block;
    opacity: 0.8;
}

/* Post-specific nixcarousel styles */
.nixcarousel-post-thumbnail {
    margin-bottom: 15px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.nixcarousel-post-thumbnail img {
    width: 100%;
    height: auto;
    transition: transform 0.3s ease;
}

.nixcarousel-post-thumbnail:hover img {
    transform: scale(1.05);
}

.nixcarousel-read-more {
    display: inline-block;
    margin-top: 10px;
    padding: 6px 12px;
    background: var(--dinamo-primary);
    color: white !important;
    text-decoration: none !important;
    border-radius: 20px;
    font-size: 0.85em;
    font-weight: 600;
    transition: all 0.3s ease;
    border: 2px solid var(--dinamo-primary);
}

.nixcarousel-read-more:hover {
    background: white !important;
    color: var(--dinamo-primary) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255,102,0,0.3);
}

/* NixCarousel controls */
.nixcarousel-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin-top: 20px;
}

.nixcarousel-btn {
    background: rgba(255, 102, 0, 0.1);
    border: 2px solid var(--dinamo-primary);
    color: var(--dinamo-primary);
    padding: 10px 20px;
    border-radius: 25px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 0.9em;
}

.nixcarousel-btn:hover {
    background: var(--dinamo-primary);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(255, 102, 0, 0.4);
}

.nixcarousel-btn.pause {
    background: rgba(0, 102, 204, 0.1);
    border-color: var(--dinamo-secondary);
    color: var(--dinamo-secondary);
}

.nixcarousel-btn.pause:hover {
    background: var(--dinamo-secondary);
    border-color: var(--dinamo-secondary);
    box-shadow: 0 4px 15px rgba(0, 102, 204, 0.4);
}
div.nixcarousel-wrapper > div > div{
    min-height: 16em!important;
    min-width: 16em!important;
    align-content: center;
    box-shadow: none!important;
}
.sponsor-item.div {
    min-height: 20em!important;
}

/* Responsive carousel */
@media (max-width: 768px) {
    .infinite-carousel {
        padding: 15px !important;
        margin: 15px 0 !important;
    }

    .carousel-item {
        min-width: 200px !important;
        max-width: 280px !important;
        padding: 15px !important;
    }

    .carousel-item h4 {
        font-size: 1.1em !important;
    }

    .carousel-item .carousel-icon {
        font-size: 2em !important;
        margin-bottom: 10px !important;
    }

    .carousel-controls {
        gap: 10px !important;
        margin-top: 15px !important;
    }

    .carousel-btn {
        padding: 8px 16px !important;
        font-size: 0.8em !important;
    }
}

@media (max-width: 480px) {
    .infinite-carousel {
        padding: 10px !important;
        margin: 10px 0 !important;
    }

    .carousel-item {
        min-width: 140px !important;
        max-width: 180px !important;
        padding: 10px !important;
    }

    .carousel-item h4 {
        font-size: 0.9em !important;
    }

    .carousel-item p {
        font-size: 0.8em !important;
        margin-bottom: 8px !important;
    }

    .carousel-item .carousel-icon {
        font-size: 1.5em !important;
        margin-bottom: 6px !important;
    }

    .carousel-controls {
        flex-direction: column !important;
        gap: 6px !important;
        margin-top: 10px !important;
    }

    .carousel-btn {
        padding: 6px 12px !important;
        font-size: 0.7em !important;
        width: 100% !important;
        max-width: 120px !important;
    }

    div.nixcarousel-wrapper > div {
        min-width: 4em!important;
        min-height: 4em!important;
        max-height: 5em!important;
        max-width: 5em!important;
    }

    div.nixcarousel-wrapper > div > div{
        min-height: 3em!important;
        min-width: 3em!important;
        align-content: center;
        box-shadow: none!important;
    }
}

/* Ultra small mobile - iPhone viewport */
@media (max-width: 420px) {
    .infinite-carousel {
        padding: 8px !important;
        margin: 8px 0 !important;
        min-height: 150px !important;
    }

    .carousel-item {
        min-width: 120px !important;
        max-width: 150px !important;
        padding: 8px !important;
        margin-right: 12px !important;
    }

    .carousel-item h4 {
        font-size: 0.8em !important;
        margin-bottom: 6px !important;
    }

    .carousel-item p {
        font-size: 0.75em !important;
        margin-bottom: 6px !important;
        line-height: 1.3 !important;
    }

    .carousel-item .carousel-icon {
        font-size: 1.3em !important;
        margin-bottom: 4px !important;
    }

    .carousel-controls {
        gap: 4px !important;
        margin-top: 8px !important;
    }

    .carousel-btn {
        padding: 5px 10px !important;
        font-size: 0.65em !important;
        max-width: 100px !important;
    }
}

/* ===============================================
   SETS SECTION - Individual Set Boxes with Frame
=============================================== */

.sets-section {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(15px) !important;
    border-radius: 15px !important;
    padding: 20px !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.1) !important;
    border: 2px solid rgba(255,255,255,0.8) !important;
    margin: 15px 0 !important;
    min-height: 60px; /* Altezza fissa per mantenere consistenza */
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}

.sets-scheduled {
    width: 100%;
    text-align: center;
    padding: 10px 0;
    min-height: 60px; /* Stessa altezza minima dei set-box */
    display: flex;
    align-items: center;
    justify-content: center;
}

.scheduled-text {
    font-size: 1.2em;
    font-weight: 700;
    color: var(--dinamo-primary);
    text-transform: uppercase;
    letter-spacing: 2px;
    opacity: 0.8;
}

.set-box {
    background: rgba(255, 255, 255, 0.9);
    border-radius: 12px;
    padding: 12px 16px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    border: 2px solid rgba(255,102,0,0.2);
    text-align: center;
    min-width: 80px;
    height: 60px; /* Altezza fissa per consistenza */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease;
}

.set-box:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.15);
    border-color: var(--dinamo-primary);
}

.set-label {
    font-size: 0.85em;
    font-weight: 700;
    color: var(--dinamo-primary);
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.set-score {
    font-size: 1.1em;
    font-weight: 500; /* Medium weight for sets */
    color: var(--text-dark);
    font-family: 'Teko', sans-serif; /* Teko font for sets */
}

/* Responsive per il nuovo layout */
@media (max-width: 768px) {
    .match-container-large {
        padding: 10px !important; /* Da 15px a 10px */
        margin-bottom: 8px !important; /* Da 12px a 8px */
    }

    .match-subtitle {
        font-size: 0.95em !important; /* Da 1em a 0.95em */
        margin-bottom: 8px !important; /* Da 10px a 8px */
    }

    .serie-d-section,
    .prima-divisione-section {
        padding: 10px !important; /* Da 15px a 10px */
        margin-bottom: 10px !important; /* Da 15px a 10px */
    }

    /* Su mobile i box Prima Divisione vanno uno sotto l'altro */
    .prima-divisione-horizontal {
        flex-direction: column !important;
        gap: 10px !important; /* Da 15px a 10px */
    }

    .prima-divisione-horizontal .division-team-card {
        flex: none !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Fantasy Card Mobile */
    .match-card.fantasy-style {
        padding: 12px !important; /* Da 16px a 12px */
    }

    .match-center {
        grid-template-columns: 1fr 1fr !important; /* Forza sempre 2 colonne anche su mobile */
        gap: 2px !important; /* Da 12px a 8px */
        text-align: center !important;
        height: 160px !important;
    }

    /* Allinea tutto il contenuto delle team-half al centro metà superiore su mobile */
    .team-half {
        align-items: flex-start !important; /* Allinea in alto invece che al centro */
        justify-content: center !important; /* Centra orizzontalmente */
        padding-top: 25% !important; /* Sposta contenuto alla metà superiore */
    }

    .team-overlay-full {
        align-items: center !important; /* Centra contenuto verticalmente nell'overlay */
        justify-content: center !important; /* Centra contenuto orizzontalmente */
    }

    /* Riduci font nomi squadre su mobile */
    .team-name-large {
        font-size: 1.1em !important; /* Da 1.4em a 1.1em su mobile */
        margin-bottom: 5px !important; /* Riduci margine inferiore */
    }

    .score-section {
        order: -1 !important;
        margin-bottom: 8px !important; /* Da 12px a 8px */
    }

    .stats-bar {
        flex-direction: column !important;
        gap: 4px !important; /* Da 6px a 4px */
        text-align: center !important;
        padding: 8px !important; /* Da 12px a 8px */
    }

    .venue, .referees {
        justify-content: center !important;
        min-width: auto !important;
    }

    .team {
        flex-direction: row !important;
        gap: 8px !important; /* Da 12px a 8px */
        padding: 8px !important; /* Da 10px a 8px */
    }

    .team-logo {
        width: 35px !important; /* Da 40px a 35px */
        height: 35px !important; /* Da 40px a 35px */
        font-size: 1.1em !important; /* Da 1.2em a 1.1em */
    }

    .team-name {
        text-align: left !important;
        max-width: none !important;
    }

    /* Ottimizzazioni specifiche per mobile */
    .score-section-overlay {
        padding: 3px 10px 0px 10px !important; /* Da 4px/15px a 3px/10px */
        font-size: 2em;
    }

    .score-large {
        font-size: 1.6em !important; /* Da 1.8em a 1.6em */
        letter-spacing: 0.3px !important; /* Da 0.5px a 0.3px */
    }

    .sets-within-score {
        gap: 12px !important; /* Da 16px a 12px */
        margin-top: 4px !important; /* Da 6px a 4px */
    }

    .set-square {
        width: 18px !important; /* Da 20px a 18px */
        height: 18px !important; /* Da 20px a 18px */
        font-size: 0.8em !important; /* Da 0.9em a 0.8em */
    }

    .team-sets-group {
        gap: 4px !important; /* Da 6px a 4px */
    }

    /* Riduci padding anche per i frame principali */
    .serie-d-blue-frame,
    .prima-divisione-gray-frame {
        padding: 8px !important; /* Padding ulteriormente ridotto per i frame */
        margin-left: 5px !important; /* Margine sinistro ridotto */
        margin-right: 5px !important; /* Margine destro ridotto */
    }

    /* Riduci padding anche per altri container */
    .match-card.fantasy-style {
        padding: 8px !important; /* Da 12px a 8px */
    }

    .team-overlay-full {
        padding: 12px !important; /* Da 20px a 12px */
        flex-direction: row !important; /* Forza loghi orizzontali su mobile */
        justify-content: space-between !important; /* Distribuisci ai lati */
    }

    .team-half {
        flex-direction: row !important; /* Forza loghi orizzontali su mobile */
        justify-content: space-between !important; /* Distribuisci ai lati */
    }
}

/* Ultra-mobile optimization - sotto 447px viewport */
@media (max-width: 447px) {
    /* Forza i set a rimanere in gruppi di 3 anche su schermi molto piccoli */
    .sets-within-score {
        gap: 6px !important; /* Gap ancora più ridotto */
        margin-top: 4px !important;
        flex-wrap: nowrap !important; /* Non andare a capo */
        justify-content: center !important;
    }

    .set-square {
        width: 14px !important; /* Ancora più piccolo: da 18px a 14px */
        height: 14px !important; /* Ancora più piccolo: da 18px a 14px */
        font-size: 0.7em !important; /* Font ancora più piccolo */
        padding: 2px !important; /* Padding ridotto */
    }

    .team-sets-group {
        gap: 2px !important; /* Gap minimo tra gruppi */
        flex-shrink: 0 !important; /* Non rimpicciolire i gruppi */
    }

    /* Assicurati che i set-box non vadano a capo */
    .sets-section {
        gap: 8px !important; /* Gap ridotto nella sezione sets */
        padding: 15px 10px !important; /* Padding ridotto */
    }

    .set-box {
        min-width: 60px !important; /* Larghezza minima ridotta */
        height: 50px !important; /* Altezza ridotta */
        padding: 8px 10px !important; /* Padding ridotto */
    }

    .set-label {
        font-size: 0.75em !important; /* Font più piccolo */
        margin-bottom: 2px !important; /* Margine ridotto */
    }

    .set-score {
        font-size: 0.95em !important; /* Font più piccolo */
    }
}