/*
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.
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
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
*/


/* =========================================================
   LINK ACTION - STILE GLOBALE
   ========================================================= */

/*
 * La classe viene assegnata al widget Paragrafo V4.
 * Il vero link è l'elemento <a> interno generato da Elementor.
 */
.link-action {
    display: inline-block;
    width: fit-content;
}

/*
 * Link testuale con linea inferiore animata.
 * Colore e tipografia restano gestiti da Elementor.
 */
.link-action > .e-paragraph-link-base {
    position: relative;
    display: inline-block;
    width: fit-content;
    text-decoration: none;
    transition: color 0.35s ease;
}


/* =========================================================
   LINK ACTION - LINEA INFERIORE
   ========================================================= */

/*
 * La linea parte visibile per tutta la larghezza del link.
 * currentColor segue automaticamente il colore del testo.
 */
.link-action > .e-paragraph-link-base::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -5px;
    width: 100%;
    height: 1px;
    background: currentColor;
    transform: scaleX(1);
    transform-origin: left center;
    transition: transform 0.4s ease;
}


/* =========================================================
   LINK ACTION - HOVER
   ========================================================= */

@media (hover: hover) and (pointer: fine) {

    /*
     * All'hover la linea si accorcia verso destra.
     * Il lato sinistro resta fermo.
     */
    .link-action > .e-paragraph-link-base:hover::after {
        transform: scaleX(0.35);
        transform-origin: left center;
    }
}


/* =========================================================
   LINK OUTLINE ANIMATED - STILE GLOBALE
   Widget Paragrafo V4 con link interno cliccabile
   ========================================================= */

/*
 * La classe viene assegnata al widget <p>.
 * Il vero elemento cliccabile è il link <a> interno.
 */
.link-outline-animated {
    display: inline-block;
    width: fit-content;
    margin: 0;
    padding: 0;
}


/* =========================================================
   LINK OUTLINE ANIMATED - LINK INTERNO
   ========================================================= */

/*
 * Il link interno diventa il vero elemento "pulsante".
 * Tutta l'area delimitata dal bordo è cliccabile.
 *
 * Colore e tipografia restano gestiti da Elementor.
 */
.link-outline-animated > .e-paragraph-link-base {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    padding: 12px 24px;
    border: 1px solid currentColor;
    border-radius: 0;
    color: inherit;
    text-decoration: none;
    overflow: hidden;
    cursor: pointer;
}


/* =========================================================
   LINK OUTLINE ANIMATED - HOVER
   ========================================================= */

@media (hover: hover) and (pointer: fine) {

    /*
     * Il bordo statico diventa trasparente
     * mentre parte l'animazione.
     */
    .link-outline-animated > .e-paragraph-link-base:hover {
        border-color: transparent;
    }
}


/* =========================================================
   LINK OUTLINE ANIMATED - ALTO + DESTRA
   ========================================================= */

.link-outline-animated > .e-paragraph-link-base::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;

    /*
     * Primo gradiente:
     * linea superiore da sinistra verso destra.
     *
     * Secondo gradiente:
     * linea destra dall'alto verso il basso.
     */
    background:
        linear-gradient(currentColor, currentColor)
        top left / 0 1px no-repeat,

        linear-gradient(currentColor, currentColor)
        top right / 1px 0 no-repeat;
}


/* =========================================================
   LINK OUTLINE ANIMATED - BASSO + SINISTRA
   ========================================================= */

.link-outline-animated > .e-paragraph-link-base::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;

    /*
     * Primo gradiente:
     * linea inferiore da destra verso sinistra.
     *
     * Secondo gradiente:
     * linea sinistra dal basso verso l'alto.
     */
    background:
        linear-gradient(currentColor, currentColor)
        bottom right / 0 1px no-repeat,

        linear-gradient(currentColor, currentColor)
        bottom left / 1px 0 no-repeat;
}


/* =========================================================
   LINK OUTLINE ANIMATED - ANIMAZIONE HOVER
   ========================================================= */

@media (hover: hover) and (pointer: fine) {

    .link-outline-animated > .e-paragraph-link-base:hover::before {
        animation:
            agriflora-outline-top-right
            0.7s
            linear
            forwards;
    }

    .link-outline-animated > .e-paragraph-link-base:hover::after {
        animation:
            agriflora-outline-bottom-left
            0.7s
            linear
            forwards;
    }
}


/* =========================================================
   ANIMAZIONE BORDO - ALTO + DESTRA
   ========================================================= */

@keyframes agriflora-outline-top-right {

    0% {
        background-size:
            0 1px,
            1px 0;
    }

    50% {
        background-size:
            100% 1px,
            1px 0;
    }

    100% {
        background-size:
            100% 1px,
            1px 100%;
    }
}


/* =========================================================
   ANIMAZIONE BORDO - BASSO + SINISTRA
   ========================================================= */

@keyframes agriflora-outline-bottom-left {

    0% {
        background-size:
            0 1px,
            1px 0;
    }

    50% {
        background-size:
            0 1px,
            1px 0;
    }

    75% {
        background-size:
            100% 1px,
            1px 0;
    }

    100% {
        background-size:
            100% 1px,
            1px 100%;
    }
}


/* =========================================================
   TYPOGRAPHY - DESKTOP CON ALTEZZA RIDOTTA
   Riduce titoli e testi su schermi larghi
   ma relativamente bassi.
   ========================================================= */

@media (min-width: 1025px) and (max-height: 1100px) {

    .heading-hero {
        font-size: clamp(
            64px,
            4.8vw,
            88px
        ) !important;
    }

    .heading-section {
        font-size: clamp(
            34px,
            min(3vw, 5.2dvh),
            56px
        ) !important;
    }

    .heading-minor {
        font-size: clamp(
            30px,
            2.2vw,
            42px
        ) !important;
    }

    /*
     * Testi che devono ridursi sui desktop/notebook
     * con viewport relativamente bassa.
     */
    .text-low-height {
        font-size: 16px !important;
    }
}


/* =========================================================
   AGRIFLORA - OFFSET ANCORE ARTICOLI
   Lascia spazio sopra il contenuto raggiunto tramite ancora,
   evitando che finisca sotto l'header fisso.
========================================================= */

html {
    scroll-padding-top: 110px;
}