/* 
 * Stile sito matrimonio Elda e Giuseppe
 * Modifica le variabili qui sotto per cambiare facilmente i colori del tema
 */

:root {
    /* Colori principali - Modifica questi valori per cambiare il tema */
    --colore-primario: #424F6A;        /* Colore principale (oro/beige) */
    --colore-secondario: #292552;      /* Colore secondario (marrone chiaro) */
    --colore-accento: #f5e6d3;         /* Colore accento (beige chiaro) */
    --colore-testo: #333333;           /* Colore testo principale */
    --colore-testo-chiaro: #666666;    /* Colore testo secondario */
    --colore-sfondo: #ffffff;           /* Colore sfondo */
    --colore-sfondo-sezione: #fafafa;  /* Colore sfondo sezioni */
    --colore-bordo: #e0e0e0;           /* Colore bordi */
    
    /* Colori interattivi */
    --colore-hover: #c49564;           /* Colore hover */
    --colore-bottone: var(--colore-primario);
    --colore-bottone-hover: var(--colore-secondario);
    --colore-link: var(--colore-secondario);
    
    /* Font */
    /* --font-principale: 'Playfair Display', 'Georgia', serif;
    --font-secondario: 'Poppins', 'Arial', sans-serif; */

    /* --font-principale: 'Montserrat', sans-serif; */
    --font-principale: "Cormorant Upright", serif;

    /* --font-secondario: 'Open Sans', sans-serif; */
    --font-grazie: "Monsieur La Doulaise", cursive;
    
    /* Spaziature */
    --spazio-piccolo: 1rem;
    --spazio-medio: 2rem;
    --spazio-grande: 4rem;

    --gradiente: linear-gradient(90deg, var(--colore-primario) 0%, var(--colore-secondario) 100%);
}

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

body {
    font-family: var(--font-principale);
    font-weight: 300;
    color: var(--colore-testo);
    background-color: var(--colore-sfondo);
    line-height: 1.8;
    letter-spacing: 0.3px;
}

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

.text-large {
    font-size: 1.4rem;
    line-height: 1.8;
}

b, strong {
    font-weight: 700;
}


.header-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}
.header-logo {
    padding: 0 var(--spazio-piccolo);
    width: 100%;
    max-width: 100px;
    max-height: 150px;
}
.header-logo a{ display: flex; justify-content: center; align-items: center; }
.header-logo img {
    width: 100%;
    height: auto;
    object-fit: contain;
}
.header-nav{ width: auto;} 

/* Header e Navigazione */
header {
    background: var(--gradiente);
    color: white;
    padding: var(--spazio-piccolo) 0;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    height: 105px;
}

nav {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spazio-piccolo);
}

nav ul {
    list-style: none;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--spazio-medio);
}

nav a {
    color: white;
    text-decoration: none;
    font-weight: 300;
    font-size: 0.9rem;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    padding: 0.5rem 1rem;
    border-radius: 0;
    transition: all 0.3s ease;
}

nav a:hover {
    background-color: rgba(255,255,255,0.2);
}

/* Container principale */
.container {
    margin: 0 auto;
    width: 100%;
    /* max-width: 1200px;
    margin: 0 auto;
    padding: var(--spazio-medio) var(--spazio-piccolo); */
}

/* Hero Section - Homepage */
.hero {
    position: relative;
    min-height: calc(100vh - 105px);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: linear-gradient(rgba(31, 26, 68, 0.3), rgba(31, 26, 68, 0.3)), url('/assets/sfondo-elda-peppe.jpg') center/cover;
    /* background: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url('/assets/sfondo-elda-peppe.jpg') center/cover; */
    color: white;
    margin-bottom: var(--spazio-grande);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.hero-content {
    z-index: 2;
    padding: var(--spazio-medio);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.hero h1 {
    font-family: var(--font-grazie);
    font-size: 3.5rem;
    font-weight: 300;
    margin-bottom: var(--spazio-piccolo);
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
    letter-spacing: 2px;
}
.hero h1 {
    max-width: 100%;
    height: auto;
}

.hero h1 img {
    max-width: 100%;
    height: auto;
    height: 15vh;
        object-fit: contain;
}

@media (min-width: 1024px) {
    .hero {
        min-height: calc(100vh - 105px);
    }
   
    .hero h1 img {
        height: 25vh;
        object-fit: contain;
    }
}

.hero .sottotitolo {
    font-family: var(--font-principale);
    font-size: 1.7rem;
    text-transform: uppercase;
    margin-bottom: var(--spazio-medio);
    /* font-style: italic; */
}

/* Countdown */
.countdown {
    background: rgba(255,255,255,0.5);
    color: var(--colore-testo);
    padding: var(--spazio-medio);
    border-radius: 0;
    border: 1px solid rgba(255,255,255,0.3);
    display: inline-block;
    margin: 0;
    /* margin: var(--spazio-medio) 0; */
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    backdrop-filter: blur(10px);
    line-height: 1;
}

.countdown-title {
    font-size: 2.3rem;
    margin: 0;
    color: var(--colore-secondario);
    font-weight: bold;
}

.countdown-container {
    display: flex;
    gap: var(--spazio-piccolo);
    justify-content: center;
    flex-wrap: wrap;
}

.countdown-item {
    text-align: center;
    padding: var(--spazio-piccolo);
    min-width: 80px;
    line-height: 1.5;
}

.countdown-number {
    font-size: 2.5rem;
    font-weight: 300;
    color: var(--colore-primario);
    display: block;
    font-family: var(--font-principale);
    letter-spacing: 1px;
}

.countdown-label {
    font-size: 0.9rem;
    color: var(--colore-testo-chiaro);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Timeline */
.timeline {
    width: 100%;
    height: auto;
}
.timeline-desktop {
    display: block;
}
.timeline-mobile {
    display: none;
}

.timeline-wrapper{
    width: 100%;
    height: auto;
    overflow-x: auto;
}
.timeline-content{
    width: 100%;
    height: auto;
    overflow-x: auto;
}
.timeline-content img{
    width: 100%;
    height: auto;
}


.blocco_storia {
    padding: var(--spazio-medio) 0;
}

.storia-container .blocco_storia:nth-child(even) {
    background-color: var(--colore-sfondo-sezione);
}

.storia-container .blocco_storia:nth-child(odd) {
    background-color: var(--colore-sfondo);
}


.anno_storia {
    font-size: 1.1rem; line-height: 1; font-family: "Helvetica Neue", sans-serif;
    font-weight: 700; letter-spacing: 0.5px;
    margin: 0;
}


.anno_storia::before {
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    background: var(--colore-primario);
    border-radius: 50%;
    margin-right: 10px;
}
.anno_storia::after {
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    background: var(--colore-primario);
    border-radius: 50%;
    margin-left: 10px;
}


.blocco_storia h3 {
    font-size: 1.9rem; line-height: 1;
    font-weight: 300;
    letter-spacing: 0.5px;
    padding: .3em 0 .6em 0;
    margin: 0;
}

.blocco_storia p {
    font-size: 1.4rem; line-height: 1.4; font-weight: 300; letter-spacing: 0.5px; padding: .1em 0 .3em; margin: 0; color: var(--colore-testo-chiaro); 
}

@media (max-width: 768px) {
    .timeline-desktop {
        display: none;
    }
    .timeline-mobile {
        display: block;
    }
}

/* Sezioni */
section {
    padding: var(--spazio-medio) 0;
}

section:nth-child(even) {
    background-color: var(--colore-sfondo-sezione);
}

section.section-cosa-faremo{
    background: var(--gradiente);
    color: white;
    padding: var(--spazio-medio) 0;
}
section.section-cosa-faremo h2, section.section-cosa-faremo h3, 
section.section-cosa-faremo h4, section.section-cosa-faremo h5,
section.section-cosa-faremo h6, section.section-cosa-faremo p,
section.section-cosa-faremo a, section.section-cosa-faremo a:hover{
    color: white;
}


.inner-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--spazio-medio) var(--spazio-piccolo);
}

.section-title {
    font-family: var(--font-principale);
    font-size: 2.5rem;
    font-weight: 300;
    text-align: center;
    color: var(--colore-secondario);
    margin-bottom: var(--spazio-medio);
    position: relative;
    padding-bottom: var(--spazio-piccolo);
    letter-spacing: 1px;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 1px;
    background: var(--colore-primario);
}

/* Cards */
.card, .card-location {
    padding: 0;
}
.card-location h2{
    font-size: 2.3rem; line-height: 1;
    font-weight: 500;
    margin: 0;
    letter-spacing: 0.5px;
    padding: .3em 0;
}
.card-location h3{
    font-size: 1.6rem; line-height: 1;
    font-weight: 300;
    letter-spacing: 0.5px;
    padding: .3em 0 .6em 0;
    margin: 0;
}
.card-location h5{
    font-size: 1rem; line-height: 1;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: .3em 0;
    margin: 0;
    text-transform: uppercase;
}

.card-location p{ font-size: 18px; line-height: 1.5; font-weight: 300; letter-spacing: 0.5px; padding: .3em 0 .6em; margin: 0; color: var(--colore-testo-chiaro); }



.card h3 {
    color: var(--colore-secondario);
    font-family: var(--font-principale);
    font-size: 1.8rem;
    font-weight: 300;
    margin-bottom: var(--spazio-piccolo);
    letter-spacing: 0.5px;
}

.card p {
    margin: 0.5rem 0;
    color: var(--colore-testo-chiaro);
}

.card strong {
    color: var(--colore-testo);
}

.iban-code{
    background: white; padding: 0.25rem 0.5rem; border-radius: 3px; font-size: 1.1rem; font-family: monospace;
}


.note-di-noi-text {
    font-size: 1rem;
    line-height: 1.8;
    color: var(--colore-testo);
    font-family: var(--font-principale);
    font-weight: 300;
    letter-spacing: 0.3px;
}

.note-di-noi-text h2 { font-size: .77rem; }
.note-di-noi-text h3 { font-size: 1.6rem;  font-style: italic; font-family: var(--font-grazie); }
.note-di-noi-text p {
    font-size: 1rem;
    margin: 0.5rem 0;
    color: var(--colore-testo);
    font-family: var(--font-principale);
    font-weight: 300;
    letter-spacing: 0.3px;
}

/* Form */
.form-container {
    max-width: 600px;
    margin: 0 auto;
    background: white;
    padding: var(--spazio-medio);
    border-radius: 0;
    border: 1px solid rgba(0,0,0,0.08);
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.form-group {
    margin-bottom: var(--spazio-piccolo);
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--colore-secondario);
    font-weight: 300;
    font-size: 0.9rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--colore-bordo);
    border-radius: 0;
    font-family: var(--font-principale);
    font-size: 1rem;
    font-weight: 300;
    transition: border-color 0.3s ease;
    background-color: white;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--colore-primario);
}

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

.checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 0.5rem;
}

.checkbox-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.checkbox-item input[type="checkbox"] {
    width: auto;
}

/* Bottoni */
.btn {
    background-color: transparent;
    color: var(--colore-secondario);
    padding: 0.6rem 2.5rem;
    border: 1px solid var(--colore-secondario);
    border-radius: 0;
    font-size: 0.95rem;
    font-weight: 300;
    font-family: var(--font-principale);
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
    margin: 0.5rem;
}

.btn:hover {
    background-color: var(--colore-secondario);
    color: white;
    border-color: var(--colore-secondario);
}

.btn-secondary {
    background-color: transparent;
    color: var(--colore-testo-chiaro);
    border-color: var(--colore-bordo);
}

.btn-secondary:hover {
    background-color: var(--colore-testo-chiaro);
    color: white;
    border-color: var(--colore-testo-chiaro);
}

/* Ospite aggiuntivo */
.ospite-aggiuntivo {
    background: var(--colore-sfondo-sezione);
    padding: var(--spazio-piccolo);
    border-radius: 5px;
    margin: var(--spazio-piccolo) 0;
    border-left: 4px solid var(--colore-primario);
}

.btn-rimuovi {
    background-color: transparent;
    color: #dc3545;
    border: 1px solid #dc3545;
    padding: 0.5rem 1.5rem;
    font-size: 0.85rem;
    font-weight: 300;
    letter-spacing: 0.5px;
}

.btn-rimuovi:hover {
    background-color: #dc3545;
    color: white;
}

/* Info box */
.info-box {
    background: var(--colore-accento);
    border-left: 1px solid var(--colore-primario);
    padding: var(--spazio-piccolo);
    margin: var(--spazio-piccolo) 0;
    border-radius: 0;
}

.info-box h4 {
    color: var(--colore-secondario);
    margin-bottom: 0.5rem;
}

/* Messaggi */
.messaggio {
    padding: var(--spazio-piccolo);
    border-radius: 5px;
    margin: var(--spazio-piccolo) 0;
}

.messaggio-successo {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.messaggio-errore {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* Footer */
footer {
    background: var(--gradiente);
    color: white;
    text-align: center;
    padding: var(--spazio-medio);
    margin-top: var(--spazio-grande);
}

/* Responsive */
@media (max-width: 768px) {

    header { height: 90px; padding: 10px 0; }

    .countdown-item-secondi { display: none; }
    .hero  {
        min-height: calc(100vh - 90px); margin-bottom: 0 !important;
    }
    .hero h1 {
        font-size: 2.5rem;
    }
    
    .hero .sottotitolo {
        font-size: 1.2rem;
    }
    
    .countdown-container {
        gap: 0.5rem;
    }
    
    .countdown-item {
        min-width: 60px;
    }
    
    .countdown-number {
        font-size: 1.4rem;
    }
    .countdown-label {
        font-size: 0.8rem;
        color: var(--colore-testo-chiaro);
        text-transform: uppercase;
        letter-spacing: 0;
    }
    
    .section-title {
        font-size: 1.5rem;
    }
    
    nav { padding: 0; font-size: 0.8rem; }
    nav ul {
        gap: .5rem;
    }

    .iban-code{ 
        overflow-x: auto; max-width: 100%; display: block;
    }
}

/* Hamburger menu */
@media screen and (max-width: 960px) {
    .hamburger-menu {
        display: block;
        position: relative; z-index: 93;
        padding: var(--spazio-piccolo);
    }
    .hamburger-menu-line {
        width: 20px;
        height: 2px;
        background: white;
        margin: 5px 0;
    }
    .hamburger-menu:hover {
        cursor: pointer;
    }

    header.show-nav  .hamburger-menu .hamburger-menu-line:first-child { transform: rotate(45deg) translate(5px, 5px); }
    header.show-nav  .hamburger-menu .hamburger-menu-line:nth-child(2) { opacity: 0; }
    header.show-nav  .hamburger-menu .hamburger-menu-line:last-child { transform: rotate(-45deg) translate(5px, -5px); }



    .header-content{ position: relative; }
    .header-nav{
        display: none;
        
    }
    header.show-nav .header-nav{
        display: flex;
    }
    .header-nav{
        position: absolute;
        top:0; left:0;
        right:0; bottom:0;
        width: 100%;
        z-index: 1  ;
        background: var(--gradiente);
        height: 100vh;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .header-content{ position: relative; z-index: 90; }
    .header-logo{ position: relative; z-index: 91; max-width: 90px; max-height: 70px; height: 70px; display: flex; justify-content: center; align-items: center; }
    .header-logo img{ position: relative; z-index: 92; }
    .header-nav nav ul{
        display: flex;
        flex-direction: column;
        gap: var(--spazio-piccolo);
        justify-content: center;
        align-items: center;
        vertical-align: middle;
        z-index: 80;

    }
    .header-nav nav ul li{
        list-style: none;
        margin: 0; padding: var(--spazio-piccolo);
    }
    .header-nav nav ul li a{
        text-decoration: none;
        color: white;
        font-size: 1.2rem;
        font-weight: 300;
        letter-spacing: 1px;
        text-transform: uppercase;
        padding: var(--spazio-piccolo);
        border-radius: 0;
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }
    .header-nav nav ul li a:hover{
        color: var(--colore-hover);
    }
}