/*
Theme Name: EL_CALVADOR Theme
Theme URI: https://el-calvador.it/
Author: EL_CALVADOR
Description: Tema WordPress personalizzato sviluppato per offrire un’identità grafica coerente, moderna e facilmente gestibile. Include un header fisso e completamente personalizzabile, controlli dedicati a colori, spaziature, font, dimensioni e immagini, oltre a elementi interattivi con effetti di zoom, sfocatura e animazioni al passaggio del mouse. La struttura è stata pensata per essere modificabile direttamente dal Site Editor di WordPress, senza necessità di intervenire sul codice.
Version: 1.9.0
Requires at least: 6.5
Requires PHP: 7.4
Text Domain: el-calvador-custom
*/

:root {
    --elc-font: Arial, Helvetica, sans-serif;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
}

.elc-global-header,
.elc-home-layout,
.elc-global-header *,
.elc-home-layout * {
    box-sizing: border-box;
}

.elc-global-header {
    width: 100%;
    font-family: var(--elc-font);
}

.elc-header-inner {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.elc-header-logo-wrap {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
}

.elc-header-logo {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

.elc-header-fallback {
    font-weight: 700;
    color: #111;
    text-decoration: none;
}

.elc-header-nav {
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: nowrap;
}

.elc-header-nav a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-weight: 700;
    white-space: nowrap;
    transition: background-color .18s ease, color .18s ease;
}

.elc-home-layout {
    width: 100%;
    min-height: var(--elc-home-min-height, auto);
    font-family: var(--elc-font);
}

.elc-home-brand {
    display: block;
    height: auto;
    object-fit: contain;
}

.elc-home-brand-placeholder {
    border: 1px dashed currentColor;
    padding: 28px;
    width: min(100%, 520px);
    text-align: center;
    opacity: .55;
}

.elc-home-description {
    margin-left: 0;
    margin-right: auto;
    white-space: normal;
}

.elc-home-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
}

.elc-home-card {
    position: relative;
    display: block;
    overflow: hidden;
    text-decoration: none;
}

.elc-home-card-image,
.elc-home-card-placeholder {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.elc-home-card-image {
    object-fit: cover;
}

.elc-home-card-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #dedede;
    color: #444;
}


/* Effetto hover Home */
.elc-home-layout .elc-home-card {
    overflow: hidden !important;
    isolation: isolate;
    cursor: pointer;
}

.elc-home-layout .elc-home-card > .elc-home-card-image {
    z-index: 1;
    transform: scale(1) !important;
    filter: blur(0) !important;
    transition: transform .38s ease, filter .38s ease !important;
    will-change: transform, filter;
}

.elc-home-layout .elc-home-card > .elc-home-card-overlay {
    z-index: 2;
    pointer-events: none;
}

.elc-home-layout .elc-home-card .elc-home-card-title {
    transform: scale(1) !important;
    transform-origin: left center;
    transition: transform .38s ease !important;
    filter: none !important;
    will-change: transform;
}

.elc-home-layout .elc-home-card:hover > .elc-home-card-image {
    transform: scale(1.10) !important;
    filter: blur(3px) !important;
}

.elc-home-layout .elc-home-card:hover .elc-home-card-title {
    transform: scale(1.08) !important;
    filter: none !important;
}

.elc-home-card-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;      /* verticale: centro */
    justify-content: flex-start; /* orizzontale: sinistra */
}

.elc-home-card-title {
    margin: 0;
    line-height: 1.08;
    font-weight: 700;
    text-decoration: none;
}

.elc-editor-preview-note {
    font-size: 12px;
    opacity: .65;
}

/* La parte mobile verrà rifinita in un secondo passaggio.
   Qui evitiamo solo overflow evidenti. */
@media (max-width: 820px) {

    
    .elc-header-inner {
        gap: 20px;
    }

    .elc-header-nav {
        flex-wrap: wrap;
    }

    .elc-home-card {
        max-width: 100% !important;
        min-width: 0 !important;
    }
}


/* HOME: stessa shell delle pagine LISTA */
.elc-home-layout {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.elc-home-layout > .elc-home-inner {
    width: min(calc(100% - 48px), 1220px) !important;
    max-width: 1220px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.elc-home-layout .elc-home-description {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

@media (max-width: 820px) {
    .elc-home-layout > .elc-home-inner {
        width: min(calc(100% - 32px), 1220px) !important;
    }
}


/* v1.5 - Home: layout orizzontale identico alle pagine lista */
.elc-home-layout.alignfull,
.wp-site-blocks > .elc-home-layout {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.elc-home-layout > .elc-home-inner {
    width: min(calc(100% - 48px), 1220px) !important;
    max-width: 1220px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.elc-home-layout .elc-home-description {
    width: 100% !important;
    max-width: 100% !important;
}

@media (max-width: 820px) {
    .elc-home-layout > .elc-home-inner {
        width: min(calc(100% - 32px), 1220px) !important;
    }
}


/* v1.7 - due riquadri Home affiancati e della stessa larghezza */
.elc-home-layout .elc-home-card {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
}

/* Su mobile li rimettiamo in colonna per evitare riquadri troppo stretti. */
@media (max-width: 820px) {
    .elc-home-cards {
        grid-template-columns: 1fr !important;
    }
}

/* v1.8.1 - header editor isolato dal blocco Home */
.elc-global-header {
    min-height: 40px;
}








/* v1.8.8 - Header fisso reale.
   Il position:fixed è anche inline nel markup PHP per renderlo indipendente
   da cache CSS o wrapper del Site Editor. */
.elc-global-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 999999 !important;
}


/* L'eventuale wrapper del Template Part non deve limitare il fixed. */
header.wp-block-template-part {
    position: static !important;
    overflow: visible !important;
}

/* Barra amministratore WordPress */
body.admin-bar .elc-global-header {
    top: 32px !important;
}

@media (max-width: 782px) {
    body.admin-bar .elc-global-header {
        top: 46px !important;
    }
}


/* v1.8.9 - spazio reale sotto l'header fixed.
   Lo spacer resta nel normale flusso della pagina e ha sempre la stessa
   altezza dell'header, così il primo contenuto non può finire sotto di esso. */
.elc-fixed-header-spacer {
    display: block !important;
    width: 100% !important;
    height: var(--elc-fixed-header-height, 0px) !important;
    min-height: var(--elc-fixed-header-height, 0px) !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
}


/* v1.8.10 - rimozione barra/gap tra header fisso e contenuto.
   WordPress può applicare margin-block-start tra il Template Part e il blocco
   successivo; con un header fixed quel margine diventava una fascia visibile. */
header.wp-block-template-part {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

header.wp-block-template-part + * {
    margin-top: 0 !important;
    margin-block-start: 0 !important;
}

/* Home */
.wp-site-blocks > .elc-home-layout,
header.wp-block-template-part + .elc-home-layout {
    margin-top: 0 !important;
    margin-block-start: 0 !important;
}

/* Evita che il layout a blocchi reintroduca un block-gap tra header e contenuto. */
.wp-site-blocks {
    row-gap: 0 !important;
}

/* Il contenitore di compensazione non deve avere propri margini o sfondi. */
.elc-fixed-header-spacer {
    margin: 0 !important;
    border: 0 !important;
}




/* v1.8.12 - altezza Home calcolata sulla viewport reale.
   Il valore viene calcolato via JS sottraendo sia l'header fisso sia
   l'eventuale WordPress Admin Bar. In questo modo, quando il contenuto
   entra già nello schermo, non viene generato scroll verticale inutile. */
.elc-home-layout {
    min-height: var(--elc-home-min-height, auto) !important;
}


/* v1.8.13 - rettangolo animato sotto il testo dei riquadri Home.
   Parte esattamente dal bordo sinistro dell'immagine e termina
   oltre la fine del testo della stessa distanza presente a sinistra. La larghezza è ottenuta strutturalmente tramite padding simmetrico, non con offset del pseudo-elemento. La durata (.38s) è la stessa dello zoom/sfocatura. */
.elc-home-layout .elc-home-card .elc-home-card-title {
    display: inline-block !important;
    position: relative !important;
    isolation: isolate;
    width: auto !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.elc-home-layout .elc-home-card .elc-home-card-title::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    width: auto;
    top: -8px;
    bottom: -8px;
    background: var(--elc-hover-bar-color, #000000);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .38s ease;
    z-index: -1;
    pointer-events: none;
}

.elc-home-layout .elc-home-card:hover .elc-home-card-title::before {
    transform: scaleX(1);
}


/* v1.8.17 - eliminazione della sottile linea tra Header e Home.
   Sulla Home l'header passa attraverso un wp:template-part; a certe larghezze
   l'altezza frazionaria dell'header poteva lasciare visibile circa 1 px del
   contenitore sottostante. */
header.wp-block-template-part {
    border: 0 !important;
    border-bottom: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}

.elc-fixed-header-spacer {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* Piccola sovrapposizione intenzionale: la Home entra di 1 px sotto l'header
   fixed, rendendo impossibile la comparsa della fessura bianca. */
header.wp-block-template-part + .elc-home-layout,
.wp-site-blocks > .elc-home-layout {
    margin-top: -1px !important;
}