/*
Theme Name: Experiences Srl
Theme URI: https://www.naplesexperiences.com
Author: Experiences Srl
Author URI: https://www.naplesexperiences.com
Description: Tema WordPress professionale per Experiences Srl – Soluzioni Digitali per il Turismo. v2.3.1: due postille esplicite sotto i piani (commissione legata al volume di clienti annuali; Channel Manager a scelta del cliente e a suo carico). v2.3.0: cookie banner GDPR + booking modal Cal.com + pagine legali auto-create.
Version: 2.3.1
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: Proprietary
License URI: https://www.naplesexperiences.com
Text Domain: experiences-srl
Tags: tourism, business, one-page, responsive, custom-menu, custom-logo
*/

/* ===================================================
   RESET & BASE
   =================================================== */

        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Montserrat:wght@400;500;600;700;800&display=swap');
        
        * { margin: 0; padding: 0; box-sizing: border-box; }

        .hero-gradient {
            background: linear-gradient(135deg, #0A1628 0%, #0B3D61 50%, #0D7C7C 100%);
        }

        .text-gradient {
            background: linear-gradient(135deg, #14A3A3, #0D7C7C, #4ADEDE);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        /* ========= ENHANCED HERO ANIMATIONS ========= */
        @keyframes float {
            0%, 100% { transform: translateY(0px) rotate(0deg); }
            33% { transform: translateY(-15px) rotate(1deg); }
            66% { transform: translateY(-8px) rotate(-1deg); }
        }

        @keyframes float-delayed {
            0%, 100% { transform: translateY(0px) rotate(0deg); }
            33% { transform: translateY(-20px) rotate(-1.5deg); }
            66% { transform: translateY(-10px) rotate(1.5deg); }
        }

        @keyframes orbit {
            0% { transform: rotate(0deg) translateX(130px) rotate(0deg); }
            100% { transform: rotate(360deg) translateX(130px) rotate(-360deg); }
        }

        @keyframes orbit-reverse {
            0% { transform: rotate(0deg) translateX(160px) rotate(0deg); }
            100% { transform: rotate(-360deg) translateX(160px) rotate(360deg); }
        }

        @keyframes rotate-slow {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }

        @keyframes rotate-reverse {
            from { transform: rotate(360deg); }
            to { transform: rotate(0deg); }
        }

        @keyframes pulse-ring {
            0%, 100% { transform: scale(1); opacity: 1; box-shadow: 0 0 0 0 rgba(20, 163, 163, 0.4); }
            50% { transform: scale(1.04); opacity: 0.9; box-shadow: 0 0 30px 10px rgba(20, 163, 163, 0.15); }
        }

        @keyframes particle-float {
            0% { transform: translateY(100vh) translateX(0) scale(0); opacity: 0; }
            10% { opacity: 1; }
            90% { opacity: 1; }
            100% { transform: translateY(-20px) translateX(var(--drift, 30px)) scale(1); opacity: 0; }
        }

        @keyframes shimmer {
            0% { background-position: -200% center; }
            100% { background-position: 200% center; }
        }

        @keyframes data-flow {
            0% { stroke-dashoffset: 200; opacity: 0; }
            20% { opacity: 1; }
            80% { opacity: 1; }
            100% { stroke-dashoffset: 0; opacity: 0; }
        }

        @keyframes blink {
            50% { opacity: 0; }
        }

        @keyframes bounce-question {
            0%, 100% { transform: translateY(0) scale(1); }
            50% { transform: translateY(-10px) scale(1.1); }
        }

        @keyframes scroll-bounce {
            0%, 100% { transform: translateY(0) translateX(-50%); }
            50% { transform: translateY(10px) translateX(-50%); }
        }

        @keyframes whatsapp-pulse {
            0%, 100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.4); }
            50% { box-shadow: 0 0 0 15px rgba(37, 211, 102, 0); }
        }

        @keyframes grid-pulse {
            0%, 100% { opacity: 0.03; }
            50% { opacity: 0.07; }
        }

        @keyframes aurora {
            0%, 100% { transform: translate(0%, 0%) scale(1); opacity: 0.15; }
            25% { transform: translate(5%, -5%) scale(1.1); opacity: 0.2; }
            50% { transform: translate(-3%, 3%) scale(0.95); opacity: 0.12; }
            75% { transform: translate(-6%, -3%) scale(1.05); opacity: 0.18; }
        }

        @keyframes counter-glow {
            0%, 100% { text-shadow: 0 0 10px rgba(20,163,163,0.3); }
            50% { text-shadow: 0 0 25px rgba(20,163,163,0.8), 0 0 50px rgba(20,163,163,0.4); }
        }

        .floating { animation: float 7s ease-in-out infinite; }
        .floating-delayed { animation: float-delayed 8s ease-in-out 2s infinite; }
        .rotate-slow { animation: rotate-slow 25s linear infinite; }
        .rotate-reverse { animation: rotate-reverse 18s linear infinite; }
        .pulse-ring { animation: pulse-ring 3s ease-in-out infinite; }
        .question-mark { animation: bounce-question 2s ease-in-out infinite; }

        /* GRID OVERLAY */
        .hero-grid {
            background-image: 
                linear-gradient(rgba(20,163,163,0.05) 1px, transparent 1px),
                linear-gradient(90deg, rgba(20,163,163,0.05) 1px, transparent 1px);
            background-size: 60px 60px;
            animation: grid-pulse 4s ease-in-out infinite;
        }

        /* AURORA BLOBS */
        .aurora-1 {
            animation: aurora 12s ease-in-out infinite;
        }
        .aurora-2 {
            animation: aurora 15s ease-in-out 3s infinite reverse;
        }
        .aurora-3 {
            animation: aurora 10s ease-in-out 6s infinite;
        }

        /* ORBIT BADGES */
        .orbit-badge {
            position: absolute;
            top: 50%;
            left: 50%;
            transform-origin: center;
            z-index: 10;
        }
        .orbit-1 { animation: orbit 8s linear infinite; }
        .orbit-2 { animation: orbit-reverse 12s linear infinite; margin-top: -20px; }
        .orbit-3 { animation: orbit 15s linear infinite 2s; margin-top: 10px; }
        .orbit-4 { animation: orbit-reverse 10s linear infinite 4s; }

        /* STAT CARDS */
        .stat-card {
            backdrop-filter: blur(10px);
            background: rgba(255,255,255,0.05);
            border: 1px solid rgba(255,255,255,0.1);
            transition: all 0.4s ease;
        }
        .stat-card:hover {
            background: rgba(20,163,163,0.1);
            border-color: rgba(20,163,163,0.3);
            transform: translateY(-4px);
        }
        .stat-number {
            animation: counter-glow 3s ease-in-out infinite;
        }

        /* SCROLL INDICATOR - MOBILE FIX */
        .scroll-indicator {
            position: absolute;
            bottom: 2rem;
            left: 50%;
            transform: translateX(-50%);
            animation: scroll-bounce 2s ease-in-out infinite;
        }

        /* TYPING */
        .typing-cursor {
            display: inline-block;
            width: 3px;
            height: 1em;
            background: #14A3A3;
            margin-left: 4px;
            animation: blink 1s step-end infinite;
        }

        /* SHIMMER BUTTON */
        .shimmer-btn {
            background: linear-gradient(90deg, #14A3A3 0%, #0D7C7C 40%, #14A3A3 60%, #4ADEDE 80%, #14A3A3 100%);
            background-size: 200% auto;
            animation: shimmer 3s linear infinite;
        }

        /* CARDS */
        .card-hover {
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .card-hover:hover {
            transform: translateY(-12px);
            box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
        }

        .service-icon {
            background: linear-gradient(135deg, rgba(13,124,124,0.1), rgba(20,163,163,0.1));
            transition: all 0.3s ease;
        }
        .card-hover:hover .service-icon {
            background: linear-gradient(135deg, #0D7C7C, #14A3A3);
            color: white;
        }

        /* PORTFOLIO */
        .portfolio-item { overflow: hidden; position: relative; }
        .portfolio-item::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(to top, rgba(10,22,40,0.95), transparent 60%);
            z-index: 1;
            opacity: 0;
            transition: opacity 0.4s ease;
        }
        .portfolio-item:hover::before { opacity: 1; }
        .portfolio-item img { transition: transform 0.6s cubic-bezier(0.4,0,0.2,1); }
        .portfolio-item:hover img { transform: scale(1.1); }
        .portfolio-content {
            position: absolute; bottom: 0; left: 0; right: 0; z-index: 2;
            transform: translateY(30px); opacity: 0; transition: all 0.4s ease;
        }
        .portfolio-item:hover .portfolio-content { transform: translateY(0); opacity: 1; }

        /* PRICING */
        .pricing-card { transition: all 0.4s cubic-bezier(0.4,0,0.2,1); position: relative; overflow: hidden; }
        .pricing-card::before {
            content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
            background: linear-gradient(90deg, #0D7C7C, #14A3A3, #4ADEDE);
            transform: scaleX(0); transition: transform 0.4s ease;
        }
        .pricing-card:hover::before { transform: scaleX(1); }
        .pricing-card:hover { transform: translateY(-8px); }
        .pricing-card.featured { background: linear-gradient(135deg, #0B3D61, #0D7C7C); color: white; }
        .pricing-card.featured::before { transform: scaleX(1); }

        /* MOBILE MENU */
        .mobile-menu { transform: translateX(100%); transition: transform 0.3s ease; }
        .mobile-menu.active { transform: translateX(0); }

        /* WHATSAPP */
        .whatsapp-float {
            position: fixed; bottom: 30px; right: 30px; z-index: 1000;
            animation: whatsapp-pulse 2s ease-in-out infinite;
        }

        /* PARTICLE */
        .particle { position: absolute; border-radius: 50%; pointer-events: none; }

        /* CONNECTION LINE SVG */
        .connection-line {
            stroke-dasharray: 200;
            animation: data-flow 3s ease-in-out infinite;
        }

        /* GLOBE RING */
        .globe-container { position: relative; }

        /* Logo styles */
        .logo-img { 
            height: 48px; 
            width: auto; 
            object-fit: contain;
        }
        .logo-img-lg {
            height: 56px;
            width: auto;
            object-fit: contain;
        }
        .logo-center {
            width: 130px;
            height: 130px;
            object-fit: contain;
        }
    


/* ── Portfolio card image fix ───────────────────────────────── */
.portfolio-item .portfolio-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.portfolio-item:hover .portfolio-img-wrap img {
    transform: scale(1.08);
}

.portfolio-item .portfolio-img-wrap {
    overflow: hidden;
}


/* ==========================================================================
   Blog Styles - Single Post & Archive
   ========================================================================== */

/* Prose styles per il contenuto degli articoli */
.prose-blog {
    font-size: 1.0625rem;
    line-height: 1.75;
    color: #374151;
}

.prose-blog > * + * {
    margin-top: 1.25em;
}

.prose-blog h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.875rem;
    font-weight: 700;
    color: #0B3D61;
    margin-top: 2.5em;
    margin-bottom: 0.75em;
    line-height: 1.3;
    border-bottom: 3px solid #14A3A3;
    padding-bottom: 0.5em;
    display: inline-block;
}

.prose-blog h3 {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: #0B3D61;
    margin-top: 2em;
    margin-bottom: 0.5em;
    line-height: 1.3;
}

.prose-blog h4 {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.25rem;
    font-weight: 600;
    color: #0D7C7C;
    margin-top: 1.5em;
    margin-bottom: 0.5em;
}

.prose-blog p {
    margin-bottom: 1.25em;
}

.prose-blog a {
    color: #0D7C7C;
    text-decoration: underline;
    text-decoration-color: rgba(20, 163, 163, 0.3);
    text-underline-offset: 3px;
    font-weight: 500;
    transition: color 0.2s;
}

.prose-blog a:hover {
    color: #14A3A3;
    text-decoration-color: #14A3A3;
}

.prose-blog strong {
    color: #0B3D61;
    font-weight: 700;
}

.prose-blog em {
    color: #0D7C7C;
}

.prose-blog ul, .prose-blog ol {
    padding-left: 1.5em;
    margin: 1.5em 0;
}

.prose-blog ul {
    list-style: none;
}

.prose-blog ul > li {
    position: relative;
    padding-left: 1.5em;
    margin-bottom: 0.5em;
}

.prose-blog ul > li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.6em;
    width: 8px;
    height: 8px;
    background: #14A3A3;
    border-radius: 50%;
}

.prose-blog ol {
    list-style-type: decimal;
    list-style-position: outside;
}

.prose-blog ol > li {
    margin-bottom: 0.5em;
    padding-left: 0.5em;
}

.prose-blog ol > li::marker {
    color: #14A3A3;
    font-weight: 700;
}

.prose-blog blockquote {
    border-left: 4px solid #14A3A3;
    background: linear-gradient(to right, #E8F4F4, transparent);
    padding: 1.5em 2em;
    margin: 2em 0;
    border-radius: 0 12px 12px 0;
    font-style: italic;
    color: #0B3D61;
    font-size: 1.125rem;
    position: relative;
}

.prose-blog blockquote::before {
    content: '"';
    position: absolute;
    top: -10px;
    left: 20px;
    font-size: 4rem;
    color: #14A3A3;
    opacity: 0.3;
    font-family: serif;
    line-height: 1;
}

.prose-blog blockquote p {
    margin: 0;
}

.prose-blog code {
    background: #E8F4F4;
    color: #0B3D61;
    padding: 0.2em 0.4em;
    border-radius: 4px;
    font-size: 0.9em;
    font-family: 'Monaco', 'Menlo', monospace;
}

.prose-blog pre {
    background: #0A1628;
    color: #E8F4F4;
    padding: 1.5em;
    border-radius: 12px;
    overflow-x: auto;
    margin: 1.5em 0;
    font-size: 0.9em;
    line-height: 1.6;
}

.prose-blog pre code {
    background: transparent;
    color: inherit;
    padding: 0;
}

.prose-blog img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    margin: 2em auto;
    display: block;
    box-shadow: 0 10px 30px rgba(11, 61, 97, 0.1);
}

.prose-blog figure {
    margin: 2em 0;
}

.prose-blog figure figcaption {
    text-align: center;
    color: #6B7280;
    font-size: 0.875rem;
    margin-top: 0.75em;
    font-style: italic;
}

.prose-blog table {
    width: 100%;
    border-collapse: collapse;
    margin: 2em 0;
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(11, 61, 97, 0.08);
}

.prose-blog table th {
    background: #0B3D61;
    color: white;
    font-weight: 600;
    text-align: left;
    padding: 1em;
    font-size: 0.95em;
}

.prose-blog table td {
    padding: 0.875em 1em;
    border-bottom: 1px solid #E5E7EB;
    font-size: 0.95em;
}

.prose-blog table tr:last-child td {
    border-bottom: none;
}

.prose-blog table tr:nth-child(even) {
    background: #F9FAFB;
}

.prose-blog hr {
    border: none;
    height: 1px;
    background: linear-gradient(to right, transparent, #14A3A3, transparent);
    margin: 3em 0;
}

/* Callouts personalizzati con sintassi blockquote class */
.prose-blog .callout-tip,
.prose-blog .callout-warning,
.prose-blog .callout-info {
    border-radius: 12px;
    padding: 1.5em;
    margin: 2em 0;
    border-left: 4px solid;
}

.prose-blog .callout-tip {
    background: #ECFDF5;
    border-color: #10B981;
}

.prose-blog .callout-warning {
    background: #FEF3C7;
    border-color: #F59E0B;
}

.prose-blog .callout-info {
    background: #E8F4F4;
    border-color: #14A3A3;
}

/* Drop cap sulla prima lettera del primo paragrafo */
.prose-blog > p:first-of-type::first-letter {
    font-size: 3.5em;
    font-weight: 700;
    float: left;
    line-height: 0.85;
    margin: 0.1em 0.15em 0 0;
    color: #14A3A3;
    font-family: 'Montserrat', sans-serif;
}

/* Desktop: colonna articolo più larga (v2.2.0) → font leggermente più
   grande per mantenere una misura di lettura confortevole */
@media (min-width: 1024px) {
    .prose-blog {
        font-size: 1.125rem;
    }
}

/* Mobile responsive */
@media (max-width: 768px) {
    .prose-blog {
        font-size: 1rem;
    }

    .prose-blog h2 {
        font-size: 1.5rem;
    }

    .prose-blog h3 {
        font-size: 1.25rem;
    }

    .prose-blog blockquote {
        padding: 1em 1.5em;
        font-size: 1rem;
    }

    .prose-blog > p:first-of-type::first-letter {
        font-size: 2.5em;
    }
}

/* Blog Card hover effect */
.blog-card {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.blog-card:hover {
    transform: translateY(-4px);
}

/* ==========================================================================
   Cookie consent (banner + modal)
   ========================================================================== */
.exp-cookie-banner {
    box-shadow: 0 -10px 40px rgba(11, 61, 97, 0.15);
}

.exp-cookie-modal.flex { display: flex; }

/* Toggle switch (input checkbox → track + thumb) */
.exp-toggle {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 26px;
    cursor: pointer;
    flex-shrink: 0;
}
.exp-toggle-track {
    position: absolute;
    inset: 0;
    background: #D1D5DB;
    border-radius: 9999px;
    transition: background-color 0.2s ease;
}
.exp-toggle-track::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
    transition: transform 0.2s ease;
}
.exp-toggle input:checked + .exp-toggle-track {
    background: #14A3A3;
}
.exp-toggle input:checked + .exp-toggle-track::after {
    transform: translateX(22px);
}
.exp-toggle input:focus-visible + .exp-toggle-track {
    box-shadow: 0 0 0 3px rgba(20,163,163,0.3);
}

/* ==========================================================================
   Booking modal (Cal.com / Calendly embed)
   ========================================================================== */
.exp-booking-modal.flex { display: flex; }

@media (max-width: 640px) {
    /* Su mobile il modal occupa l'intera viewport per max area utile */
    .exp-booking-modal > div:last-child {
        border-radius: 0;
    }
}

/* Scrollbar hide per filtri categoria */
.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Pagination styles */
.blog-pagination .page-numbers,
.nav-links .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    padding: 0 1em;
    margin: 0 0.25em;
    background: white;
    color: #0D7C7C;
    border: 2px solid #E5E7EB;
    border-radius: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s;
}

.blog-pagination .page-numbers:hover,
.nav-links .page-numbers:hover {
    background: #14A3A3;
    color: white;
    border-color: #14A3A3;
    transform: translateY(-2px);
}

.blog-pagination .page-numbers.current,
.nav-links .page-numbers.current {
    background: #0B3D61;
    color: white;
    border-color: #0B3D61;
}

.blog-pagination .page-numbers.dots,
.nav-links .page-numbers.dots {
    border: none;
    background: transparent;
}