/*
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.1
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/*
 * Breakpoint (allineati al layout Elementor)
 *
 * Desktop ........ stili base + @media (min-width: 1169px)
 * Tablet e sotto . @media (max-width: 1168px)
 * Mobile ......... @media (max-width: 767px)
 *
 * 1168px deve coincidere col breakpoint custom impostato in
 * Elementor → Impostazioni sito → Layout. Se lo cambi lì, aggiorna anche qui.
 */


/* ==========================================================================
   1. Base e accessibilità
   ========================================================================== */

/* Elementor imposta strong a 700; qui resta semibold */
b,
strong {
    font-weight: 600 !important;
}

/*
 * Toglie l'outline al click del mouse, lo lascia alla tastiera
 * (:focus-visible). Non rimuovere: è per l'accessibilità.
 */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
.elementor-button:focus:not(:focus-visible) {
    outline: none;
}

@media (hover: none) and (pointer: coarse) {

    a:focus,
    a:focus-visible,
    button:focus,
    button:focus-visible,
    .elementor-button:focus,
    .elementor-button:focus-visible,
    input[type="submit"]:focus,
    input[type="button"]:focus {
        outline: none !important;
        box-shadow: none !important;
    }
}

/* Niente flash grigio al tap su iOS */
a,
button,
.elementor-button,
input[type="submit"],
input[type="button"] {
    -webkit-tap-highlight-color: transparent;
}

/*
 * Skip link WP: di default è ritagliato fuori schermo (clip).
 * Al focus da tastiera deve tornare visibile in cima alla pagina.
 */
a.screen-reader-text.skip-link:focus {
    position: relative !important;
    width: auto;
    height: auto;
    margin: 0 !important;
    clip: auto;
    clip-path: none;
    overflow: visible;
}


/* ==========================================================================
   2. Header e navigazione
   ========================================================================== */

/* La classe .is-sticky la aggiunge il JS del child theme */
.header-menu {
    transition: transform 0.25s ease, opacity 0.25s ease;
}

.header-menu.is-sticky {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background: #fff;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

.header-menu.is-hidden {
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
}

/* Ultima voce = CTA: bordo sinistro + uppercase (header e footer) */
.header-nav li:last-child a,
.footer-nav li:last-child a {
    border-left: 1px solid var(--e-global-color-6b675ac);
    text-transform: uppercase;
}

.header-nav li:last-child a {
    font-size: 13px !important;
    line-height: 1 !important;
    /* compact: evita extra altezza sul CTA header */
}

.footer-nav li:last-child a {
    font-size: 15px !important;
    line-height: 1 !important;
    padding-left: 30px !important;
}

/* Nel popup mobile la CTA è sotto, separata da un bordo superiore */
.popup-nav li:last-child a {
    margin-top: 10px;
    padding-top: 20px !important;
    border-top: 1px solid var(--e-global-color-6b675ac);
    text-transform: uppercase;
    font-size: 15px !important;
}


/* ==========================================================================
   3. Reading bar (progresso di lettura)
   ========================================================================== */

/*
 * pointer-events: none → la barra è sopra l'header (z-index altissimo)
 * ma non deve rubare i click al menu.
 */
.reading-bar-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999999;
    width: 100%;
    height: 3px;
    pointer-events: none;
}

.reading-bar {
    width: 0;
    /* la larghezza la aggiorna il JS (0–100%) */
    height: 100%;
    background: var(--e-global-color-primary);
}


/* ==========================================================================
   4. Pagina Competition Manager (ID WP 2756)
   Se ricrei la pagina l'ID cambia: aggiorna questi selettori
   o meglio aggiungi una classe body in Elementor (es. .page-cm).
   ========================================================================== */

.page-id-2756 .reading-bar {
    background: var(--e-global-color-secondary);
}

.page-id-2756 .elementor-mark-required .elementor-field-label::after {
    color: var(--e-global-color-secondary);
}

.page-id-2756 .elementor-field-type-acceptance a {
    color: var(--e-global-color-secondary);
}


/* ==========================================================================
   5. Form Elementor
   ========================================================================== */

.elementor-field-type-acceptance label {
    font-size: 13px !important;
}


/* ==========================================================================
   6. Accordion Features
   Le immagini affiancate all'accordion sono solo desktop:
   vedi @media (min-width: 1169px) in fondo al file.
   ========================================================================== */

.features-accordion details:not(:last-child) {
    border-bottom: 1px solid var(--e-global-color-6b675ac);
}

.features-accordion .e-n-accordion-item[open] .e-n-accordion-item-title-text {
    color: var(--e-global-color-primary) !important;
}


/* ==========================================================================
   7. Card, media, excerpt, TOC
   ========================================================================== */

.standard-aspect-ratio img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.card-content-wrapper {
    height: 100%;
    /* allinea le card di un loop alla stessa altezza */
}

/* Punti di sospensione solo sull'ultimo paragrafo dell'excerpt */
.elementor-post__excerpt p:last-child::after {
    content: " ...";
}

.elementor-toc__list-item-text-wrapper {
    align-items: baseline !important;
}


/* ==========================================================================
   8. Paginazione loop Elementor
   Selettori limitati a .elementor-pagination per non toccare
   altre paginazioni WordPress (commenti, blog classico, ecc.).
   ========================================================================== */

.elementor-pagination .page-numbers {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 10px;
    border: 1px solid var(--e-global-color-6b675ac);
    border-radius: 6px;
}

.elementor-pagination span.page-numbers.current {
    background: var(--e-global-color-primary);
    border-color: var(--e-global-color-primary);
}

/* "dots" e altri span non correnti (es. …) */
.elementor-pagination span.page-numbers:not(.current) {
    color: #77777742 !important;
}

.elementor-widget-loop-grid nav.elementor-pagination {
    display: flex;
    justify-content: flex-end;
}


/* ==========================================================================
   9. Contenuto post / club (widget Theme Post Content)
   ========================================================================== */

/* Tabelle larghe: scroll orizzontale su mobile invece di sforare */
.elementor-widget-theme-post-content table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

.elementor-widget-theme-post-content h2 {
    color: var(--e-global-color-primary);
    font-size: var(--e-global-typography-4ccdb8d-font-size);
    font-weight: var(--e-global-typography-4ccdb8d-font-weight);
    line-height: var(--e-global-typography-4ccdb8d-line-height);
}

.elementor-widget-theme-post-content .elementor-widget-container>h2 {
    margin: 0 0 20px;
}

.elementor-widget-theme-post-content .elementor-widget-container>h2:not(:first-child) {
    margin-top: 40px;
}

.elementor-widget-theme-post-content h3 {
    margin: 15px 0 10px;
    color: var(--e-global-color-text);
    font-size: var(--e-global-typography-13a5dc1-font-size);
    font-weight: var(--e-global-typography-13a5dc1-font-weight);
    line-height: var(--e-global-typography-13a5dc1-line-height);
}

.elementor-widget-theme-post-content ul {
    margin-bottom: 10px;
}

/*
 * Ancore TOC: offset negativo per non farle coprire dallo sticky header.
 * Se cambi l'altezza dell'header, aggiorna questo valore.
 */
.elementor-widget-theme-post-content .elementor-menu-anchor {
    position: relative;
    top: -75px;
}


/* ==========================================================================
   10. SCF chips (campi sportivi)
   ========================================================================== */

.scf-chips-campi {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.scf-chip-campi {
    margin: 0;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: var(--e-global-color-0736c01);
    color: var(--e-global-color-text);
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
}


/* ==========================================================================
   11. FAQ homepage e Competition Manager
   Due colonne su desktop; una colonna da tablet in giù (vedi media query).
   ========================================================================== */

.hp-faq-section .e-n-accordion,
.cm-faq-section .e-n-accordion {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px 45px;
}

.hp-faq-section details,
.cm-faq-section details {
    height: max-content;
    /* evita che la card si allunghi sulla riga più alta */
    border-radius: 10px;
}

.hp-faq-section details {
    background: var(--e-global-color-accent);
}

.cm-faq-section details {
    background: var(--e-global-color-0736c01);
}


/* ==========================================================================
   MEDIA QUERY
   Ordine: desktop-only → tablet → mobile
   ========================================================================== */

/* --------------------------------------------------------------------------
   Desktop only (≥ 1169px)
   Immagini dell'accordion Features posizionate a lato del pannello aperto.
   -------------------------------------------------------------------------- */
@media (min-width: 1169px) {

    .features-accordion,
    .features-accordion details,
    .features-accordion details .e-con {
        position: static !important;
        /* riferimento di posizionamento per l'immagine */
    }

    .features-accordion details .elementor-widget-image {
        position: absolute;
        top: 60px;
        left: -100%;
    }

    /* Variante specchiata (immagine a sinistra) */
    /* .features-accordion.reverse details .elementor-widget-image {
        right: auto;
        left: -128%;
    } */
}

/* --------------------------------------------------------------------------
   Tablet e sotto (≤ 1168px)
   Sfondi card, FAQ a 1 colonna, lista club a 2 colonne, footer in colonna.
   -------------------------------------------------------------------------- */
@media (max-width: 1168px) {

    /* Carousel recensioni HP + correlati post/club: sfondo wrapper */
    .hp-reviews-wrapper,
    .single-post-related-wrapper>div,
    .single-club-related-wrapper>div {
        background-color: var(--e-global-color-0736c01) !important;
    }

    .hp-reviews-wrapper .customer-review-text-wrapper,
    .hp-feature-card-wrapper {
        background-color: var(--e-global-color-accent) !important;
    }

    .three-start-step-icon {
        width: 45px !important;
        height: 45px !important;
    }

    .hp-faq-section .e-n-accordion,
    .cm-faq-section .e-n-accordion {
        grid-template-columns: 100%;
        gap: 10px;
    }

    /* Lista club per città: 2 colonne CSS (su mobile diventa 1, sotto) */
    .hp-club-list-wrapper>div {
        display: block !important;
        columns: 2;
    }

    .hp-club-list-wrapper .e-con-inner .e-con {
        margin-bottom: 20px;
        break-inside: avoid;
        /* non spezzare una card a metà colonna */
    }

    .footer-navigation-wrapper ul {
        flex-direction: column;
        gap: 8px;
    }

    .footer-nav ul {
        flex-direction: column;
    }

    /* CTA footer: da bordo laterale a bottone a tutta larghezza */
    .footer-nav li:last-child a {
        margin-top: 20px;
        padding: 10px !important;
        border: 1px solid var(--e-global-color-6b675ac);
        border-radius: 6px;
    }
}

/* --------------------------------------------------------------------------
   Mobile (≤ 767px)
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {

    .hp-club-list-wrapper>div {
        columns: 1 !important;
    }

    /* Recensione: avatar + nome/club in riga */
    .cm-reviews-wrapper .elementor-image-box-wrapper,
    .hp-reviews-wrapper .elementor-image-box-wrapper {
        display: flex;
        align-items: center;
        gap: 16px;
    }

    .elementor-widget-theme-post-content .elementor-widget-container>h2:not(:first-child) {
        margin-top: 30px !important;
    }

    /* Archive club: stack verticale, niente griglia affiancata */
    .elementor-location-archive .elementor-loop-container {
        display: flex;
        flex-direction: column;
    }

    .elementor-location-archive .elementor-loop-container .e-loop-item a>div {
        display: block;
    }

    .elementor-widget-loop-grid nav.elementor-pagination {
        justify-content: center;
    }

    .elementor-pagination .page-numbers {
        width: 36px;
        height: 36px;
    }



    /* Footer nav links gdpr separetor dot on mobile */
    .footer-privacy-nav .elementor-icon-list-item:not(:last-child):after {
        border-inline-start-width: 3px !important;
        border-radius: 100px;
        height: 3px !important;

    }
}