/* =============================================================================
 * CREAENERGIA — CSS GENERICI CONDIVISI
 * Classi riutilizzate in più pagine del tema creaenergia.
 * CSS specifico di singola pagina rimane inline nel rispettivo blade.
 * ============================================================================= */


/* =============================================================================
 * COLORI / UTILITIES
 * ============================================================================= */

.primary-color { color: var(--ucue-theme-primary) !important; }
.secondary-color { color: var(--ucue-theme-secondary) !important; }
.tertiary-color { color: var(--ucue-theme-tertiary) !important; }

.bg-primary-color { background-color: var(--ucue-theme-primary); }
.bg-primary-light { background-color: var(--ucue-theme-bg-light); }
.bg-secondary-color { background-color: var(--ucue-theme-secondary); }
.bg-secondary-light { background-color: var(--ucue-theme-bg-light-2); }

.br-16 { border-radius: 16px; }


/* =============================================================================
 * TIPOGRAFIA
 * ============================================================================= */

.title-section {
    color: var(--ucue-theme-primary);
    font-weight: 400;
}

h1.title-section { font-size: 56px; }
h2.title-section { font-size: 45px; }
h3.title-section { font-size: 36px; }
h4.title-section { font-size: 28px; }
h5.title-section { font-size: 20px; }
p.text-12 { font-size: 12px; }
a .title-section { font-size: 14px; }

h3.subtitle-section {
    color: var(--ucue-theme-primary) !important;
    font-weight: 500;
    font-size: 20px;
}

@media (max-width: 991px) {
    h1.title-section { font-size: 48px; }
    h2.title-section { font-size: 36px; }
    h3.title-section { font-size: 28px; }
    h3.subtitle-section { font-size: 16px; }
    h4.title-section { font-size: 22px; }
    h5.title-section { font-size: 18px; }
}

@media (max-width: 767px) {
    h1.title-section { font-size: 34px; }
    h2.title-section { font-size: 28px; }
    h3.title-section { font-size: 22px; }
    h4.title-section { font-size: 18px; }
    h5.title-section { font-size: 16px; }
}


/* =============================================================================
 * BOTTONI
 * ============================================================================= */

/* Bottone primario — sfondo secondario, hover invertito */
.btn-secondary-ucue {
    background-color: var(--ucue-theme-secondary);
    border: 1px solid var(--ucue-theme-secondary);
    color: white !important;
    padding: 8px 20px;
    border-radius: 25px;
    font-weight: 400;
    font-size: 14px;
    cursor: pointer !important;
    display: inline-block;
}

.btn-secondary-ucue:hover {
    background-color: white;
    color: var(--ucue-theme-secondary) !important;
    border: 1px solid var(--ucue-theme-secondary);
}

/* Stato active (pagina corrente nella navbar) */
.btn-secondary-active-ucue {
    background-color: white;
    color: var(--ucue-theme-secondary) !important;
    border: 1px solid var(--ucue-theme-secondary);
}

/* Bottone primario — sfondo primario */
.btn-primary-ucue {
    background-color: var(--ucue-theme-primary) !important;
    border: 1px solid var(--ucue-theme-primary);
    color: white !important;
    padding: 8px 20px;
    border-radius: 25px;
    font-weight: 400;
    font-size: 14px;
    cursor: pointer !important;
}

.btn-primary-ucue:hover {
    background-color: white !important;
    color: var(--ucue-theme-primary) !important;
    border: 1px solid var(--ucue-theme-primary) !important;
}

/* Bottone trasparente */
.btn-secondary-transparent {
    background-color: transparent;
    border: 1px solid var(--ucue-theme-secondary);
    color: var(--ucue-theme-secondary) !important;
    padding: 8px 20px;
    border-radius: 25px;
    font-weight: 400;
    font-size: 14px;
    cursor: pointer !important;
}

.btn-secondary-transparent:hover {
    background-color: var(--ucue-theme-secondary) !important;
    color: white !important;
}


@media (max-width: 767px) {
    .btn-secondary-ucue { font-size: 12px; }
}


/* =============================================================================
 * LISTE CON ICONA
 * ============================================================================= */

.list-icon {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.list-icon .list-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.list-icon .list-item i {
    color: var(--ucue-theme-secondary);
    flex-shrink: 0;
    margin-top: 3px;
}


/* =============================================================================
 * IMMAGINI / BANNER
 * ============================================================================= */

/* Banner immagine a larghezza piena */
.section-img img {
    width: 100%;
    height: 450px;
    object-fit: cover;
}


@media (max-width: 767px) {
    .section-img img { height: 250px; }
}