/* -------------------------------------------------------------------
   DEFINIZIONE FONT CUSTOM (@font-face)
   I percorsi devono essere relativi alla cartella STATIC che serve il file CSS.
   Esempio: static/css/styles.css cerca i font in static/fonts/
------------------------------------------------------------------- */

@font-face {
    font-family: 'Garet';
    /* Percorso assoluto da root static: /static/fonts/garet-regular.ttf */
    src: url('../fonts/Garet-Book.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Pierson';
    /* Percorso assoluto da root static: /static/fonts/pierson-regular.ttf */
    src: url('../fonts/pierson-regular.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* -------------------------------------------------------------------
   STILI GLOBALI E UTILITÀ PERSONALIZZATE
------------------------------------------------------------------- */

body {
    /* Font principale (usato come fallback per le classi Tailwind sans-modern) */
    font-family: 'Garet', sans-serif;
    background-image: url('../img/background.jpg');
    background-size: cover;
    background-attachment: fixed;
    background-position: center center;
}

/* I titoli usano Pierson (usato come fallback per le classi Tailwind serif-elegant) */
h1, h2, h3 {
    font-family: 'Pierson', serif;
    color: #575656;
}

/* Stile per la sezione Hero */
.hero-section {
    background-color: #DCDCDC; /* wedding-primary-light */
}

.custom-button-style {
    /* inline-block */
    display: inline-block;

    /* py-4 px-10 */
    padding: 1rem 2.5rem; /* 1rem = 16px. py-4 = 16px, px-10 = 40px */

    /* bg-pink-600 (convertito in #575656) */
    background-color: #575656;

    /* text-white */
    color: #ffffff;

    /* text-xl */
    font-size: 1.25rem; /* ~20px */

    /* font-bold */
    font-weight: 700;

    /* uppercase */
    text-transform: uppercase;

    /* tracking-wider */
    letter-spacing: 0.05em; /* Equivalente a 'wider' */

    /* rounded-full */
    border-radius: 9999px; /* Massima curvatura per forma 'pill' */

    /* shadow-xl */
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

    /* transition duration-300 ease-in-out */
    transition: background-color 0.3s ease-in-out, transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;

    /* Rimuove la decorazione del testo */
    text-decoration: none;

    /* Assicura che la trasformazione sia pronta */
    transform: scale(1);
}

.custom-button-style:hover {
    /* hover:bg-pink-700 (convertito in un colore più scuro) */
    background-color: #4a4949; /* Variante più scura di #575656 */

    /* transform hover:scale-105 */
    transform: scale(1.05);

    /* Aggiorna leggermente l'ombra al passaggio del mouse */
    box-shadow: 0 25px 30px -5px rgba(0, 0, 0, 0.2), 0 15px 15px -5px rgba(0, 0, 0, 0.1);

    cursor: pointer;
}

/* Stile per la card di RSVP */

.card {
background-color: transparent !important;
    border-block-color: black;
    border: double;
}

.rsvp-card {
    background-color: #EEEEEE; /* wedding-primary-lighter */
    border-color: #DCDCDC; /* wedding-primary-light */
}

@media screen and (min-width: 1200px) {
  .title-pierson {
    font-family:'Pierson';
    color: #575656;
    font-size: 85px;
    }

    .subtitle-pierson {
        font-family:'Pierson';
        color: #575656;
        font-size: 25px;
    }

    .title {
        font-family:'Garet';
        color: #575656;
        font-size: 85px;
    }

    .subtitle {
        font-family:'Garet';
        color: #575656;
        font-size: 25px;
    }

    .ampersand-fix {
        /* Spostiamo l'elemento leggermente a destra. Puoi regolare questo valore. */
        margin-right: 0.6em;

        /* Aumentiamo leggermente la dimensione (opzionale, ma può aiutare l'estetica) */
        font-size: 1.1em;

        /* Impedisce salti di layout se ci sono altre trasformazioni */
        display: inline-block;
    }
}


@media screen and (min-width: 300px) {
  .title-pierson {
    font-family:'Pierson';
    color: #575656;
    font-size: 60px;
  }

    .subtitle-pierson {
        font-family:'Pierson';
        color: #575656;
        font-size: 20px;
    }

    .title {
        font-family:'Garet';
        color: #575656;
        font-size: 60px;
    }

    .subtitle {
        font-family:'Garet';
        color: #575656;
        font-size: 20px;
    }

    .ampersand-fix {
        /* Spostiamo l'elemento leggermente a destra. Puoi regolare questo valore. */
        margin-right: 0.6em;

        /* Aumentiamo leggermente la dimensione (opzionale, ma può aiutare l'estetica) */
        font-size: 1.1em;

        /* Impedisce salti di layout se ci sono altre trasformazioni */
        display: inline-block;
    }
}