:root{--purple:#6d4a8d;--purple-dark:#45305f;--lavender:#eee3f5;--orange:#e98235;--cream:#fffaf2;--gold:#c99d52;--sage:#6f806f;--text:#3b3340}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--text);background:linear-gradient(180deg,#f7effb,#fffaf2 32%,#f4eaf8);font-family:Montserrat,Arial,sans-serif}.section{min-height:100vh;padding:110px 22px 80px;position:relative;overflow:hidden}.site-header{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:14px 28px;background:rgba(255,250,242,.82);backdrop-filter:blur(14px);border-bottom:1px solid rgba(201,157,82,.35)}.brand{font-family:'Great Vibes',cursive;font-size:34px;color:var(--purple);text-decoration:none}.main-nav{display:flex;gap:16px;align-items:center}.main-nav a{font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:var(--purple-dark);text-decoration:none;font-weight:700}.main-nav a:hover{color:var(--orange)}.menu-toggle{display:none;background:transparent;border:0;font-size:28px;color:var(--purple)}.hero{display:flex;align-items:center;justify-content:center;text-align:center;color:white;padding-top:90px}.hero-slider,.hero-slider span,.hero-overlay{position:absolute;inset:0}.hero-slider span{background-size:cover;background-position:center;opacity:0;animation:fadeSlider 24s infinite;transform:scale(1.08)}.hero-slider span:nth-child(2){animation-delay:6s}.hero-slider span:nth-child(3){animation-delay:12s}.hero-slider span:nth-child(4){animation-delay:18s}@keyframes fadeSlider{0%,100%{opacity:0}8%,25%{opacity:1}33%{opacity:0}}.hero-overlay{background:linear-gradient(135deg,rgba(69,48,95,.72),rgba(233,130,53,.28)),radial-gradient(circle at 50% 48%,rgba(255,250,242,.2),rgba(0,0,0,.28))}.hero-content{position:relative;max-width:980px;padding:52px 24px;border:1px solid rgba(255,255,255,.55);box-shadow:0 24px 70px rgba(33,18,45,.28);background:rgba(255,250,242,.12);backdrop-filter:blur(4px)}.eyebrow,.section-kicker{text-transform:uppercase;letter-spacing:.22em;font-weight:700;color:var(--gold)}.hero h1{font-family:'Great Vibes',cursive;font-size:clamp(68px,11vw,148px);font-weight:400;margin:10px 0;color:#fff}.wedding-date{font-family:'Cormorant Garamond',serif;font-size:clamp(28px,4vw,46px);letter-spacing:.14em;margin:0 0 28px}.countdown{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:30px auto;max-width:760px}.countdown div{background:rgba(255,250,242,.9);color:var(--purple-dark);padding:18px 10px;border-radius:22px;border:1px solid rgba(201,157,82,.55)}.countdown strong{display:block;font-family:'Cormorant Garamond',serif;font-size:42px}.countdown span{text-transform:uppercase;font-size:12px;letter-spacing:.14em}.btn,.copy-btn{display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:999px;background:linear-gradient(135deg,var(--purple),var(--orange));color:#fff;text-decoration:none;font-weight:700;padding:14px 26px;cursor:pointer;box-shadow:0 12px 25px rgba(109,74,141,.26)}.container{max-width:1160px;margin:auto}.narrow{max-width:860px}h2{font-family:'Cormorant Garamond',serif;color:var(--purple-dark);font-size:clamp(42px,6vw,70px);text-align:center;margin:8px 0 34px}h3{font-family:'Cormorant Garamond',serif;color:var(--purple);font-size:30px;margin:8px 0}.lead{font-size:20px;line-height:1.8;text-align:center}.cards{display:grid;gap:24px}.three{grid-template-columns:repeat(3,1fr)}.card,.bank-card,.ornate-box{background:rgba(255,250,242,.88);border:1px solid rgba(201,157,82,.45);border-radius:30px;padding:34px;box-shadow:0 18px 45px rgba(69,48,95,.12);text-align:center}.icon{font-size:42px;color:var(--orange)}.map-wrap{margin-top:34px;border:10px solid #fff;border-radius:30px;overflow:hidden;box-shadow:0 18px 45px rgba(69,48,95,.16)}.map-wrap iframe{width:100%;height:420px;border:0;display:block}.day-section:before,.gift-section:after,.program-section:before{content:"";position:absolute;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,rgba(233,130,53,.25),transparent 68%);filter:blur(3px);z-index:-1}.day-section:before{top:90px;left:-80px}.gift-section:after{right:-90px;bottom:90px;background:radial-gradient(circle,rgba(109,74,141,.22),transparent 68%)}.bank-card{text-align:left;margin-top:30px}.bank-card p{display:flex;gap:14px;align-items:center;flex-wrap:wrap;border-bottom:1px solid rgba(201,157,82,.22);padding:16px 0;margin:0}.bank-card span{min-width:130px;font-weight:700;color:var(--purple)}code{font-size:17px;color:var(--purple-dark);background:#f2e8f7;padding:10px 12px;border-radius:12px}.copy-btn{padding:10px 18px}.ornate-box:before,.ornate-box:after{content:"✽";display:block;color:var(--orange);font-size:36px}.timeline{list-style:none;padding:0;margin:0;position:relative}.timeline li{display:grid;grid-template-columns:110px 1fr;gap:20px;align-items:center;background:rgba(255,250,242,.88);border:1px solid rgba(201,157,82,.35);border-radius:24px;margin:14px 0;padding:20px 24px}.timeline time{font-family:'Cormorant Garamond',serif;font-size:30px;color:var(--orange);font-weight:700}.timeline span{font-size:19px}.gallery-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.gallery-grid img{width:100%;height:340px;object-fit:cover;border-radius:28px;border:8px solid #fff;box-shadow:0 16px 36px rgba(69,48,95,.16)}footer{text-align:center;padding:34px;background:var(--purple-dark);color:#fff;font-family:'Cormorant Garamond',serif;font-size:24px}@media(max-width:920px){.menu-toggle{display:block}.main-nav{position:absolute;top:68px;left:16px;right:16px;display:none;flex-direction:column;align-items:flex-start;padding:18px;background:#fffaf2;border-radius:18px;box-shadow:0 18px 45px rgba(69,48,95,.2)}.main-nav.open{display:flex}.three,.gallery-grid{grid-template-columns:1fr}.countdown{grid-template-columns:repeat(2,1fr)}.hero-content{width:100%}.section{padding-top:95px}.timeline li{grid-template-columns:1fr;text-align:center}.gallery-grid img{height:280px}}@media(max-width:520px){.site-header{padding:12px 16px}.hero h1{font-size:64px}.countdown strong{font-size:32px}.lead{font-size:17px}.bank-card{padding:22px}.iban-row code{font-size:13px;word-break:break-all}}


/* =========================
   Responsive smartphone fix
   ========================= */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    overflow-x: hidden;
}

img,
iframe {
    max-width: 100%;
}

section {
    width: 100%;
}

.navbar,
.menu,
nav {
    width: 100%;
}

@media (max-width: 900px) {
    .navbar,
    nav {
        padding: 12px 16px;
    }

    .nav-links,
    .menu {
        gap: 14px;
        flex-wrap: wrap;
        justify-content: center;
    }

    .hero,
    .presentazione,
    #presentazione,
    #home {
        min-height: 100vh;
        padding: 110px 18px 40px;
    }

    .hero-content,
    .intro-content,
    .content,
    .section-content,
    .container {
        width: min(100%, 760px);
        padding-left: 18px;
        padding-right: 18px;
    }

    h1 {
        font-size: clamp(3rem, 12vw, 5.8rem);
        line-height: 1.05;
    }

    h2 {
        font-size: clamp(2rem, 8vw, 3.2rem);
    }

    .date,
    .event-date,
    .hero-date {
        font-size: clamp(1.1rem, 4.8vw, 1.7rem);
    }

    .countdown {
        display: grid;
        grid-template-columns: repeat(4, minmax(64px, 1fr));
        gap: 10px;
        width: 100%;
        max-width: 620px;
    }

    .countdown-item,
    .time-box {
        min-width: 0;
        padding: 12px 8px;
    }

    .countdown-number,
    .time-box span,
    .time-box .number {
        font-size: clamp(1.4rem, 7vw, 2.4rem);
    }

    .cards,
    .info-grid,
    .day-grid,
    .details-grid {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .bank-details,
    .iban-box,
    .gift-card,
    .rsvp-card,
    .program-card {
        width: 100%;
        overflow-wrap: anywhere;
    }

    iframe,
    .map,
    .google-map {
        width: 100%;
        min-height: 300px;
        border: 0;
    }
}

@media (max-width: 600px) {
    body {
        font-size: 16px;
    }

    .navbar,
    nav {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1000;
        padding: 10px 12px;
        backdrop-filter: blur(10px);
    }

    .nav-links,
    .menu,
    nav ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px 12px;
        padding: 0;
        margin: 0;
    }

    .nav-links a,
    .menu a,
    nav a {
        font-size: 0.78rem;
        line-height: 1.15;
        padding: 6px 4px;
        white-space: nowrap;
    }

    .hero,
    .presentazione,
    #presentazione,
    #home {
        padding: 140px 14px 36px;
        background-position: center;
    }

    .hero-content,
    .intro-content,
    .content,
    .section-content,
    .container {
        width: 100%;
        padding: 0 14px;
    }

    h1,
    .hero-title,
    .main-title {
        font-size: clamp(3.2rem, 18vw, 5rem);
        line-height: 0.95;
        margin-bottom: 16px;
        word-break: keep-all;
    }

    h2,
    .section-title {
        font-size: clamp(2rem, 11vw, 3rem);
        line-height: 1.1;
    }

    p {
        font-size: 1rem;
        line-height: 1.7;
    }

    .hero-date,
    .date,
    .event-date {
        font-size: 1.1rem;
        letter-spacing: 0.08em;
    }

    .countdown {
        grid-template-columns: repeat(2, minmax(120px, 1fr));
        gap: 10px;
        margin: 24px auto;
    }

    .countdown-item,
    .time-box {
        padding: 14px 8px;
        border-radius: 16px;
    }

    .countdown-label,
    .time-box small,
    .time-box label {
        font-size: 0.72rem;
        letter-spacing: 0.08em;
    }

    .btn,
    button,
    .copy-btn {
        width: 100%;
        max-width: 320px;
        min-height: 46px;
        font-size: 1rem;
    }

    section:not(.hero):not(.presentazione) {
        padding: 72px 16px;
    }

    .card,
    .info-card,
    .bank-details,
    .gift-card,
    .rsvp-card,
    .program-card {
        padding: 24px 18px;
        border-radius: 20px;
    }

    .program-list,
    .timeline {
        padding-left: 0;
    }

    .program-list li,
    .timeline li {
        font-size: 1rem;
        padding: 12px 0;
    }

    .iban,
    code {
        font-size: 0.88rem;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    iframe,
    .map,
    .google-map {
        min-height: 260px;
    }
}

@media (max-width: 380px) {
    .nav-links a,
    .menu a,
    nav a {
        font-size: 0.7rem;
    }

    h1,
    .hero-title,
    .main-title {
        font-size: 3rem;
    }

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


/* ===== MENU MOBILE FIX ===== */
@media (max-width: 768px) {

    .navbar,
    nav {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
    }

    .logo,
    .brand,
    .site-logo {
        display: flex !important;
        align-items: center !important;
        white-space: nowrap !important;
        line-height: 1 !important;
    }

    .logo *,
    .brand *,
    .site-logo * {
        white-space: nowrap !important;
    }

    .menu-toggle,
    .hamburger {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
        margin-left: auto !important;
    }

    .nav-links,
    .menu {
        width: 100%;
    }
}


/* ===== MOBILE MENU ALIGNMENT + CLOSE FIX ===== */
@media (max-width: 768px) {
    .navbar,
    nav {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        flex-wrap: nowrap !important;
        position: fixed !important;
    }

    .logo,
    .brand,
    .site-logo {
        flex: 0 0 auto !important;
        white-space: nowrap !important;
        margin-right: auto !important;
    }

    .menu-toggle,
    .hamburger,
    .mobile-menu-toggle,
    .navbar-toggle {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 0 0 auto !important;
        margin-left: auto !important;
        margin-right: 0 !important;
        position: relative !important;
        right: 0 !important;
        z-index: 1100 !important;
        cursor: pointer !important;
    }

    .nav-links,
    .menu,
    nav ul {
        display: none !important;
        position: absolute !important;
        top: 100% !important;
        left: 4% !important;
        right: 4% !important;
        width: 92% !important;
        margin: 0 auto !important;
        padding: 28px 18px !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 24px !important;
        background: #fffaf2 !important;
        border-radius: 28px !important;
        box-shadow: 0 18px 40px rgba(56, 33, 70, 0.18) !important;
        z-index: 1050 !important;
    }

    .nav-links.active,
    .nav-links.open,
    .menu.active,
    .menu.open,
    nav ul.active,
    nav ul.open {
        display: flex !important;
    }

    .nav-links a,
    .menu a,
    nav ul a {
        white-space: normal !important;
        text-align: center !important;
        width: 100% !important;
    }
}


/* ===== FIX DEFINITIVO MENU MOBILE ===== */
@media (max-width: 920px) {
    .site-header {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
        padding: 12px 22px !important;
    }

    .site-header .brand {
        display: block !important;
        flex: 0 0 auto !important;
        white-space: nowrap !important;
        margin-right: auto !important;
        line-height: 1 !important;
    }

    .site-header .menu-toggle {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 0 0 auto !important;
        width: 48px !important;
        height: 48px !important;
        margin-left: auto !important;
        margin-right: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
        color: var(--purple) !important;
        font-size: 34px !important;
        line-height: 1 !important;
        cursor: pointer !important;
        z-index: 1200 !important;
    }

    .site-header .main-nav {
        display: none !important;
        position: absolute !important;
        top: 100% !important;
        left: 4vw !important;
        right: 4vw !important;
        width: auto !important;
        margin: 0 !important;
        padding: 28px 18px !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 24px !important;
        background: #fffaf2 !important;
        border-radius: 0 0 28px 28px !important;
        box-shadow: 0 18px 40px rgba(56, 33, 70, 0.18) !important;
        z-index: 1100 !important;
    }

    .site-header .main-nav.open {
        display: flex !important;
    }

    .site-header .main-nav a {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        white-space: normal !important;
        font-size: 0.95rem !important;
        line-height: 1.3 !important;
        padding: 4px 0 !important;
    }
}

@media (min-width: 921px) {
    .site-header .menu-toggle {
        display: none !important;
    }

    .site-header .main-nav {
        display: flex !important;
    }
}


/* ===== OVERRIDE FINALE MENU MOBILE ===== */
@media (max-width: 920px) {
  .site-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
  }

  .site-header .brand {
    flex: 0 0 auto !important;
    margin-right: auto !important;
    white-space: nowrap !important;
  }

  .site-header .menu-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    position: relative !important;
    z-index: 1200 !important;
    cursor: pointer !important;
  }

  .site-header .main-nav {
    display: none !important;
    position: absolute !important;
    top: 100% !important;
    left: 4vw !important;
    right: 4vw !important;
    width: auto !important;
    flex-direction: column !important;
  }

  .site-header .main-nav.open {
    display: flex !important;
  }
}

@media (min-width: 921px) {
  .site-header .main-nav {
    display: flex !important;
    position: static !important;
  }

  .site-header .menu-toggle {
    display: none !important;
  }
}


/* ===== DESKTOP HEADER FIX ===== */
@media (min-width: 921px) {

    .site-header,
    .navbar,
    nav {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        padding: 18px 40px !important;
        box-sizing: border-box !important;
    }

    .brand,
    .logo,
    .site-logo {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        flex: 0 0 auto !important;
        min-width: max-content !important;
        white-space: nowrap !important;
        line-height: 1 !important;
    }

    .brand *,
    .logo *,
    .site-logo * {
        white-space: nowrap !important;
        display: inline-block !important;
        line-height: 1 !important;
    }

    .main-nav,
    .nav-links,
    .menu,
    nav ul {
        display: flex !important;
        flex-direction: row !important;
        justify-content: flex-end !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        gap: 18px !important;
        margin-left: auto !important;
        width: auto !important;
    }

    .main-nav a,
    .nav-links a,
    .menu a,
    nav ul a {
        white-space: nowrap !important;
        font-size: 0.95rem !important;
    }

    .menu-toggle,
    .hamburger,
    .mobile-menu-toggle {
        display: none !important;
    }
}