/*
 * Senigallia Language Exchange
 *
 * VERSIONE MOBILE
 *
 * Questo file viene caricato solamente quando
 * il viewport è largo al massimo 768px.
 *
 * In futuro potremo costruire qui una grafica
 * completamente diversa da quella desktop.
 */

.intro-content {
        width: 96vw;
    }


    .handwriting-welcome {
        font-size: 58px;
    }


    .handwriting-title {
        font-size: 76px;
    }


    .handwriting-aka {
        font-size: 48px;
    }


    .site-content {
        padding:
            25px
            10px;
    }


    /*
     * Su smartphone non riduciamo al 70%:
     * serve quasi tutta la larghezza disponibile.
     */

    .carousel {
        width: 96%;

        border-radius: 20px;
    }


    .carousel-slide img {
        border-radius: 20px;
    }


    .carousel-arrow {
        padding: 10px;

        font-size: 30px;
    }


    .carousel-prev {
        left: 5px;
    }


    .carousel-next {
        right: 5px;
    }


    .carousel-indicators {
        bottom: 12px;
    }


    .carousel-dot {
        width: 10px;
        height: 10px;
    }



/* ========================================================
 * SLE MOBILE NAVIGATION
 * ======================================================== */

.navigation-container {
    width: 100%;

    padding:
        12px
        10px
        8px;

    display: flex;
    flex-direction: column;
    align-items: center;
}


/*
 * Nome del sito centrato nella prima riga.
 */

.site-brand {
    width: 100%;
    max-width: none;

    padding:
        4px
        8px
        11px;

    overflow: visible;

    color: #36506B;

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;

    white-space: nowrap;

    border-bottom:
        1px solid rgba(54, 80, 107, 0.55);
}


.brand-title {

    display: block;

    width: 100%;

    font-size: 27px;

    font-weight: 600;

    line-height: 1.2;

    text-align: center;
}


.brand-subtitle {

    display: block;

    width: 100%;

    margin-top: 2px;

    font-size: 12px;

    font-weight: 400;

    line-height: 1.2;

    text-align: center;
}


/*
 * Su smartphone il menu hamburger non serve:
 * i quattro collegamenti sono sempre visibili.
 */

.mobile-menu-button {
    display: none;
}


/*
 * Seconda riga:
 *
 * Chi siamo | Scrivici | Eventi | Login
 */

.main-navigation,
.main-navigation.menu-open {
    display: flex;

    width: 100%;

    margin:
        7px
        0
        0;

    padding: 0;

    flex-direction: row;

    justify-content: center;
    align-items: center;

    gap: 2px;

    border-top: 0;
}


/*
 * I quattro pulsanti dividono equamente
 * la larghezza disponibile.
 */

.nav-link {
    flex:
        1
        1
        0;

    width: auto;
    min-width: 0;
    min-height: 38px;

    padding:
        7px
        3px;

    justify-content: center;

    border-radius: 10px;

    font-size: 12px;

    line-height: 1.15;

    text-align: center;

    white-space: normal;
}


/*
 * Le pagine interne mantengono lo stesso header.
 */

.internal-page {
    padding:
        35px
        20px;
}


.page-content h1 {
    font-size: 44px;
}


/* ========================================================
 * SLE MOBILE EDITIONS INFO
 * ======================================================== */

.editions-info {
    width: 100%;
    max-width: none;

    margin-top: 18px;
}


.editions-info p {
    font-size: 14px;
    line-height: 1.6;
}


/* ========================================================
 * CONTROLLI CAROUSEL SU HOVER - MOBILE
 * ======================================================== */

.carousel-arrow,
.carousel-indicators {
    opacity: 0;

    transition:
        opacity 0.3s ease;
}


.carousel:hover .carousel-arrow,
.carousel:hover .carousel-indicators,
.carousel:focus-within .carousel-arrow,
.carousel:focus-within .carousel-indicators {
    opacity: 1;
}



/* ========================================================
 * SLE MOBILE EDITIONS TABLE
 * ======================================================== */

/*
 * Su smartphone nascondiamo la frase desktop.
 */

.editions-desktop {
    display: none;
}


/*
 * Le due edizioni vengono mostrate affiancate.
 *
 * Nessun bordo esterno e nessuna griglia.
 */

.editions-mobile {
    display: flex;

    width: 100%;

    justify-content: center;
    align-items: stretch;

    gap: 0;
}


.edition-column,
.edition-column * {

    color: #36506B;

}


.edition-column {
    flex:
        1
        1
        50%;

    min-width: 0;

    padding:
        3px
        3px;

    display: flex;
    flex-direction: column;
    align-items: center;

    text-align: center;

    box-sizing: border-box;
}


/*
 * Unico divisorio visibile:
 * linea verticale celeste centrale.
 */

.edition-column:first-child {
    border-right:
        1px solid
        rgba(54, 80, 107, 0.55);
}


/*
 * Sunset Edition / Moon Edition
 */

.edition-title {
    width: 100%;

    margin-bottom: 7px;

    color: #36506B;

    font-size: 15px;
    font-weight: 600;

    line-height: 1.25;

    text-align: center;
    white-space: nowrap;
}


/*
 * Nome del locale
 */

.edition-place {
    margin-bottom: 3px;

    font-size: 14px;
    font-weight: 600;

    line-height: 1.3;
}


/*
 * Indirizzo
 */

.edition-address {
    width: 100%;

    margin-bottom: 6px;

    font-size: 11px;

    line-height: 1.35;

    text-align: center;
    white-space: nowrap;
}


/*
 * Giorno
 */

.edition-day {
    margin-bottom: 2px;

    font-size: 13px;

    line-height: 1.3;
}


/*
 * Orario
 */

.edition-time {
    color: #36506B;

    font-size: 13px;
    font-weight: 400;

    line-height: 1.3;
}




.edition-day,
.edition-time {

    display: inline;

}


.edition-time::before {

    content: " - ";

}


.edition-schedule {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 5px;

}


.edition-day {

    margin-bottom: 0;

}


.edition-time::before {

    content: "";

}


/* ========================================================
 * SLE MOBILE INTRO FULL WIDTH
 * ======================================================== */

/*
 * Su smartphone utilizziamo praticamente tutta
 * la larghezza disponibile.
 */

.intro-content {
    width: 100vw;
    max-width: none;

    margin: 0;

    padding:
        0
        8px;

    box-sizing: border-box;
}


/*
 * Nascondiamo lo SVG desktop.
 */

#intro-writing {
    display: none;
}


/*
 * Mostriamo lo SVG costruito appositamente
 * per smartphone.
 */

.intro-writing-mobile {
    display: block;

    width: 100%;
    height: auto;

    overflow: visible;
}


/*
 * Tutte le quattro righe utilizzano
 * Dancing Script e sono centrate.
 */

.intro-writing-mobile .handwriting {
    font-family:
        "Dancing Script",
        cursive;

    font-weight: 500;

    font-style: normal;

    letter-spacing: 1px;

    text-anchor: middle;

    stroke: #36506B;

    stroke-width: 1.8;

    stroke-linecap: round;
    stroke-linejoin: round;

    paint-order: stroke;

    fill: transparent;

    stroke-dasharray: 5000;
    stroke-dashoffset: 5000;
}


/*
 * Senigallia
 *
 * È volutamente molto grande:
 * deve sfruttare quasi tutta la larghezza.
 */

.intro-writing-mobile .mobile-write-1 {
    font-size: 190px;
}


/*
 * Language
 */

.intro-writing-mobile .mobile-write-2 {
    font-size: 190px;
}


/*
 * Exchange
 */

.intro-writing-mobile .mobile-write-3 {
    font-size: 190px;
}


/*
 * a.k.a. Caffè delle Lingue
 *
 * Più piccolo per poter rimanere su una riga.
 */

.intro-writing-mobile .mobile-write-4 {
    font-size: 100px;
}


/* ========================================================
 * ANIMAZIONE SCRITTURA MOBILE
 * ======================================================== */

/*
 * Le quattro righe vengono scritte in sequenza.
 *
 * Durata complessiva circa 8,5 secondi,
 * quindi compatibile con il timer dell'intro
 * già presente in app.js.
 */

.intro.font-ready .intro-writing-mobile .mobile-write-1 {
    animation:
        mobile-write
        2.2s
        ease-in-out
        forwards;
}


.intro.font-ready .intro-writing-mobile .mobile-write-2 {
    animation:
        mobile-write
        2.2s
        ease-in-out
        1.9s
        forwards;
}


.intro.font-ready .intro-writing-mobile .mobile-write-3 {
    animation:
        mobile-write
        2.2s
        ease-in-out
        3.8s
        forwards;
}


.intro.font-ready .intro-writing-mobile .mobile-write-4 {
    animation:
        mobile-write
        2.5s
        ease-in-out
        5.7s
        forwards;
}


@keyframes mobile-write {

    0% {
        stroke-dashoffset: 5000;
        fill: transparent;
    }

    82% {
        stroke-dashoffset: 0;
        fill: transparent;
    }

    100% {
        stroke-dashoffset: 0;
        fill: #36506B;
    }
}


/*
 * Accessibilità:
 * con animazioni ridotte mostriamo subito
 * il testo completo.
 */

@media (prefers-reduced-motion: reduce) {

    .intro-writing-mobile .handwriting {
        animation-duration: 0.01ms;
        animation-delay: 0ms;

        stroke-dashoffset: 0;

        fill: #36506B;
    }
}

/* SLE ACCOUNT MOBILE - START */

.account-page {
    width: 92%;

    margin-top: 28px;
}

.account-profile {
    display: block;
}

.account-profile-item {
    padding: 10px 0;
}



.language-row {
    align-items: stretch;
    flex-direction: column;
}

.language-row form,
.account-inline-form {
    align-items: stretch;
    flex-direction: column;
}

.account-page select,
.account-page button {
    width: 100%;
}

/* SLE ACCOUNT MOBILE - END */

/* SLE ACCOUNT LANGUAGES MOBILE - START */

.account-page .account-section h2 {
    font-size: 24px;
}

.language-row {
    display: block;
}

.language-row > form {
    width: 100%;
}

.language-row > form:first-child,
.account-inline-form {
    display: flex;

    flex-direction: column;

    align-items: stretch;

    gap: 10px;
}

.account-page .language-row strong {
    min-width: 0;

    margin-bottom: 4px;
}

.account-page select,
.account-page button {
    width: 100%;
}

.language-row > form + form {
    margin-top: 10px;
}

/* SLE ACCOUNT LANGUAGES MOBILE - END */

/* SLE ACCOUNT TYPOGRAPHY MOBILE - START */

.account-page h1 {
    font-size: 44px;
}

.account-page .account-section > h2 {
    font-size: 32px;
}

.account-page .account-card > h3 {
    font-size: 26px;
}

/* SLE ACCOUNT TYPOGRAPHY MOBILE - END */

/* SLE ACCOUNT FINAL MOBILE - START */

.internal-page.account-page {
    padding:
        22px
        16px
        45px;
}

.account-page h1 {
    margin-bottom: 20px;

    font-size: 44px;
}

.account-page .account-section {
    margin-top: 24px;
}

.account-page .account-section:first-of-type {
    margin-top: 0;
}

.account-page .account-section > h2 {
    margin-bottom: 12px;

    font-size: 32px;
}

.account-page .account-card > h3 {
    font-size: 27px;
}

/* SLE ACCOUNT FINAL MOBILE - END */

/* SLE ACCOUNT DASHBOARD MOBILE - START */


.account-dashboard {
    display: flex;

    flex-direction: column;

    gap: 14px;
}


.account-page .account-panel {
    padding: 16px;

    border-radius: 14px;
}


.account-page .account-panel > h2,
.account-page .account-panel-heading > h2 {
    font-size: 32px;
}


.account-page .language-row {
    align-items: stretch;

    flex-direction: column;

    gap: 8px;
}


.account-page .language-row > form:first-child {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        120px
        auto;

    gap: 8px;

    width: 100%;
}


.account-page .language-row strong {
    min-width: 0;

    align-self: center;
}


.account-page .language-row select {
    width: 120px;
}


.account-page .language-row > form:last-child {
    align-self: flex-end;
}


.account-page .language-add-form {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        120px;

    gap: 8px;
}


.account-page .language-add-form select:first-of-type,
.account-page .language-add-form select:nth-of-type(2) {
    width: 100%;

    min-width: 0;
}


.account-page .language-add-form button {
    grid-column: 1 / -1;
}


/* SLE ACCOUNT DASHBOARD MOBILE - END */

/* SLE ACCOUNT EDIT MOBILE - START */


.account-dashboard {
    display: grid;

    grid-template-columns: 1fr;

    gap: 14px;
}


.account-dashboard-secondary {
    margin-top: 14px;
}


.profile-view {
    grid-template-columns:
        minmax(0, 1fr)
        100px;

    gap: 14px;
}


.profile-photo img,
.profile-photo-placeholder {
    width: 92px;
    height: 92px;

    border-radius: 12px;
}


.profile-photo-placeholder {
    font-size: 38px;
}


.profile-edit-fields {
    grid-template-columns: 1fr;
}


.language-edit-row {
    grid-template-columns: 1fr;

    gap: 8px;
}


.language-save-form {
    grid-template-columns:
        minmax(0, 1fr)
        105px;

    gap: 8px;
}


.language-save-form button {
    grid-column: 1 / -1;
}


.language-save-form select {
    width: 105px;
}


.language-delete-form {
    display: flex;

    justify-content: flex-end;
}


.language-add-form {
    grid-template-columns:
        minmax(0, 1fr)
        105px;
}


.language-add-form button {
    grid-column: 1 / -1;
}


/* SLE ACCOUNT EDIT MOBILE - END */


/* Logout occupa lo stesso spazio degli altri link */
.main-navigation .nav-logout-form {
    display: flex;
    flex: 1 1 0;
    min-width: 0;
}

.main-navigation .nav-logout-button {
    width: 100%;
}


/* ========================================================
 * MOBILE OFF-CANVAS MENU
 * ======================================================== */

@media (max-width: 768px) {

    body {
        overflow-x: hidden;
    }


    .navigation-container {
        position: relative;

        flex-direction: row;
        justify-content: flex-start;
        align-items: center;

        padding: 12px 14px;
    }


    /*
     * Hamburger a sinistra del nome del sito.
     */

    .mobile-menu-button {
        display: block;

        flex: 0 0 44px;

        width: 44px;
        height: 44px;

        margin: 0 10px 0 0;

        padding: 9px;

        border: 0;
        border-radius: 10px;

        background: transparent;

        z-index: 1002;
    }


    .site-brand {
        flex: 1 1 auto;

        min-width: 0;

        align-items: center;
    }


    .brand-title {
        font-size: 25px;

        text-align: center;
    }


    .brand-subtitle {
        font-size: 11px;

        text-align: center;
    }


    /*
     * Menu laterale.
     */

    .main-navigation,
    .main-navigation.menu-open {
        position: fixed;

        top: 0;
        left: 0;

        width: min(78vw, 300px);
        height: 100vh;

        margin: 0;

        padding:
            90px
            18px
            30px;

        display: flex;

        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;

        gap: 8px;

        background: #ffffff;

        border: 0;
        border-right:
            1px solid rgba(54, 80, 107, 0.18);

        box-shadow:
            8px 0 24px rgba(0, 0, 0, 0.10);

        transform: translateX(-105%);

        transition:
            transform 0.28s ease;

        z-index: 1001;
    }


    .main-navigation.menu-open {
        transform: translateX(0);
    }


    .main-navigation .nav-link {
        flex: 0 0 auto;

        width: 100%;
        min-height: 44px;

        padding: 10px 16px;

        justify-content: flex-start;

        border-radius: 22px;

        font-size: 15px;

        text-align: left;
    }


    .main-navigation .nav-logout-form {
        width: 100%;
    }


    .main-navigation .nav-logout-button {
        width: 100%;

        justify-content: flex-start;
    }
}

/* Spostamento della pagina durante l'apertura del menu */

@media (max-width: 768px) {

    #site-content {
        transition:
            transform 0.28s ease;
    }


    body.mobile-menu-open #site-content {
        transform:
            translateX(min(78vw, 300px));
    }
}

/* Titolo Eventi con mese */

.events-page-title h1 {
    font-size: 44px;
}

/* SLE MOBILE HEADER FIX START */
@media (max-width: 768px) {

    /* Rimuove la linea sotto l'intera intestazione */
    #site-header {
        border-bottom: none;
    }

    /* Dispone hamburger e titolo sulla stessa riga */
    #site-header .navigation-container {
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    /* Hamburger a sinistra */
    #mobile-menu-button {
        display: block;
        order: -1;
        flex: 0 0 44px;
        width: 44px;
        height: 44px;
        margin: 0 10px 0 0;
    }

    /* Titolo a destra dell'hamburger */
    #site-header .site-brand {
        order: 0;
        flex: 1 1 auto;
        min-width: 0;
    }
}
/* SLE MOBILE HEADER FIX END */

/* SLE MOBILE STICKY HEADER START */
@media (max-width: 768px) {
    body {
        overflow-x: clip;
    }

    #site-header {
        position: sticky;
        top: 0;
        z-index: 1000;
        background: #ffffff;
    }
}
/* SLE MOBILE STICKY HEADER END */