/*
Theme Name: GeneratePress Child
Theme URI: https://generatepress.com
Template: generatepress
Author: Tom Usborne
Author URI: https://generatepress.com/about
Description: GeneratePress is a lightweight WordPress theme built with a focus on speed and usability. Performance is important to us, which is why a fresh GeneratePress install adds less than 10kb (gzipped) to your page size. We take full advantage of the block editor (Gutenberg), which gives you more control over creating your content. If you use page builders, GeneratePress is the right theme for you. It is completely compatible with all major page builders, including Beaver Builder and Elementor. Thanks to our emphasis on WordPress coding standards, we can boast full compatibility with all well-coded plugins, including WooCommerce. GeneratePress is fully responsive, uses valid HTML/CSS, and is translated into over 25 languages by our amazing community of users. A few of our many features include 60+ color controls, powerful dynamic typography, 5 navigation locations, 5 sidebar layouts, dropdown menus (click or hover), and 9 widget areas. Learn more and check out our powerful premium version at https://generatepress.com
Tags: two-columns,three-columns,one-column,right-sidebar,left-sidebar,footer-widgets,blog,e-commerce,flexible-header,full-width-template,buddypress,custom-header,custom-background,custom-menu,custom-colors,sticky-post,threaded-comments,translation-ready,rtl-language-support,featured-images,theme-options
Version: 3.6.1.1782375370
Updated: 2026-06-25 08:16:10

*/

@import url('https://fonts.googleapis.com/css2?family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&family=Great+Vibes&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

h1, h2, h3, .site-branding .main-title, p {
    font-family: 'Georgia';
}

h2 {
    font-size: 34px!important;
}

p {
    font-size: 18px!important;
}

/* ==========================================================================
   HEADER CUSTOM - DOTT.SSA GIOVANNA DEL VECCHIO
   ========================================================================== */

/* 1. Stile del Logo Testuale (Site Title e Tagline) */
.site-branding .main-title a {
    font-weight: 700;
    font-size: 26px;
    color: #0f172a !important;
    /* Nero/Ardesia scuro */
    letter-spacing: -0.5px;
    line-height: 1.2;
}

#main, #page {
	background-color:#fff
}

.inside-header {
    padding: 10px 40px 10px!important;
}

.credits {
font-style: italic;
	margin-right: 30px;
	font-size:12px!important;
	text-align: right
}

.disclaimer {
font-style: italic;
	font-size:12px!important;
	text-align: center;
	padding:10px
}

.main-navigation .main-nav ul li[class*="current-menu-"]>a {
    color: #222;
    text-decoration: underline;
    text-decoration-color: purple;
    text-underline-offset: 15px;
}

#page {
	min-height: 100vh
}

a.button.btn-green {
    background-color: #176535;
    font-weight: 600;
    padding: 20px;
}

.site-branding .site-description {
    font-weight: 400;
    font-size: clamp(14px, 1.5vw, 17px);
    text-transform: none;
    margin-top: 4px;
}

.nav-below-header .main-navigation .inside-navigation.grid-container {
    margin-right: 0px
}

	.hero-section {
    display: flex;
}
	
	.grid-text {
		flex:1;
		display:grid;
		align-items:center;
		background-color: #F0F8FF
	}
	
	.grid-img {
		flex:1
	}

.main-navigation {
    margin-top: -10px
}

.main-navigation a {
    font-size: 16px
}

.site-header .header-image {
    width: auto;
    max-height: 60px;
}

	.hero-title {
		font-family: 'Great Vibes';
		font-weight: 400;
		font-size: 70px;
		letter-spacing: 2px;
		text-align:center
	}

.inside-header {
    padding: 20px 40px 0px;
}

.site-branding-container .site-logo {
    margin-right: 0px
}

/* 2. Layout dei Pulsanti CTA */
.header-ctas {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-left: auto;
    /* Spinge i bottoni tutto a destra */
}

/* Stile base dei pulsanti (minimali ed eleganti come da mockup) */
.header-cta-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.25s ease-in-out;
    border: 1px solid transparent;
}

/* Personalizzazione specifica Email (Dettaglio Verde Notarile/Fogliame) */
.header-cta-link.cta-email {
    background-color: #f0fdf4;
    /* Verde chiarissimo di sfondo */
    color: #166534;
    /* Testo verde scuro */
    border-color: #bbf7d0;
}

.header-cta-link.cta-email:hover {
    background-color: #166534;
    /* Inversione al passaggio del mouse */
    color: #ffffff;
    border-color: #166534;
}

/* Personalizzazione specifica WhatsApp (Verde WhatsApp istituzionale) */
.header-cta-link.cta-whatsapp {
    background-color: #f0fdf4;
    color: #15803d;
    border-color: #bbf7d0;
}

.header-cta-link.cta-whatsapp:hover {
    background-color: #15803d;
    color: #ffffff;
    border-color: #15803d;
}

.header-cta-link .cta-icon i {
    font-size: 16px;
}

/* 3. Ottimizzazione Responsive (Mobile) */
@media (max-width: 768px) {

    /* Su mobile, se lo spazio è poco, nascondiamo il testo e lasciamo solo le icone */
    .header-ctas {
        gap: 8px;
    }

    .header-cta-link {
        padding: 8px 10px;
    }

    .header-cta-link .cta-text {
        display: none;
    }
}

/* Allinea logo e testo nell'header di GeneratePress */
.site-branding-container {
    display: flex;
    align-items: center;
    gap: 15px;
    /* Spazio tra il logo e il testo */
}

.site-branding {
    display: flex;
    flex-direction: column;
}

/* Regola le dimensioni del placeholder se dovesse apparire troppo grande */
.site-logo img {
    max-height: 45px;
    width: auto;
}

.site-branding .main-title a {
    font-size: clamp(18px, 2vw, 24px)
}

.site-branding .site-description {
    font-size: 16px;
    color: #0f172a
}

/* ==========================================================================
   HOMEPAGE
   ========================================================================== */

/* Hero text uppercase correction */
.hero-actions .button {
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: 0.5px;
    padding: 12px 24px;
    font-weight: 500
}

.bg-homepage {
    position: relative;
    padding: 40px;
    background-image: url("/wp-content/uploads/2026/07/Panoramica-Baselice.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
	height:400px;
    margin-bottom:0px
}

.hero-section > * {
    position: relative;
    z-index: 1;
}

.bg-homepage::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 70%);
}

.hero-subtitle {
    font-size: 28px!important;
			margin-bottom:0px;
	font-style: italic
}

.hero-text {
	font-size:20px;
	text-transform: uppercase;
	font-weight: 900;
	margin-bottom: 0px
}

.section-title {
    text-align: center
}

.hero-actions .btn-green {
    background-color: #176535;
}

.hero-actions .btn-purple {
    background-color: #800080;
    margin-right: 20px
}

/* 2. SECTION IL MIO METODO */
.method-section {
    padding: 30px 0;
    background-color: #ffffff;
    text-align: center;
}

.method-section h2 {
    font-size: 28px;
    color: #111111;
    margin-bottom: 40px;
}

.method-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    max-width: 1000px;
    margin: 0 auto;
}

.method-item {
    text-align: center;
    padding: 30px;
    border: 2px solid #800080;
    border-radius: 20px;
	width: 580px;
	margin:50px auto;
	letter-spacing: 0.5px;
	line-height: 32px
}

.method-item p {
	font-weight: 900;
	text-transform: uppercase
}

.method-icon {
    color: #929292;
    margin-bottom: 15px;
}

.method-item h3 {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 10px;
    color: #222222;
}

/* 3. QUATTRO COLONNE AREE DI CONSULENZA */
.competences-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr) !important;
    /* Forza le 4 colonne dello screenshot */
    gap: 20px;
}

.competence-card {
    background: #ffffff;
    padding: 30px 20px;
    border-radius: 8px;
    border: 2px solid #f3eef7;
    /* Bordino leggerissimo tendente alle tonalità del mockup */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.01);
    text-align: center;
    /* Allineamento centrale delle card del mockup */
}

.card-icon-svg {
    color: #3b1e54;
    /* Colore viola per le icone delle schede */
    margin-bottom: 15px;
}

.competence-card h3 {
    font-size: 20px;
    font-weight: 600;
    color: #222222;
    margin-bottom: 20px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-list {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: center;
    display: inline-block;
}

.card-list li {
    font-size: 16px;
    color: #444444;
    margin-bottom: 8px;
    position: relative;
}

/* .card-list li::before {
    content: "→";
    color: #999999;
    position: absolute;
    left: -5;
    top: 0;
} */

/* 4. BANNER CTA IN BASSO */
.bottom-cta-section {
    padding: 40px 0;
    background-color: #ffffff;
}

.cta-banner-container {
    max-width: 1000px;
    text-align: center;
    border: 1px solid #F3EEF8;
    background-color: #F7F8F9;
    padding: 20px;
}

.cta-banner-content {
    background-color: #f4f6f3;
    /* Sfondo verdino chiarissimo e morbido del mockup */
    border-radius: 8px;
    padding: 30px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.cta-icon {
    color: #1a3a2a;
}

.cta-icon-title, .cta-text {
    text-align: center
}

.cta-text-block {
    flex-grow: 1;
    text-align: left;
}

.cta-text-block h2 {
    font-size: 22px;
    color: #1a3a2a;
    margin-bottom: 8px;
    font-weight: 600;
}

.cta-text-block p {
    font-size: 14px;
    color: #555555;
    line-height: 1.5;
    margin: 0;
}

.btn-banner-green {
    background-color: #1a3a2a !important;
    color: #ffffff !important;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
    padding: 12px 20px;
    border-radius: 4px;
    text-transform: uppercase;
    display: inline-block;
}

/* 5. CITAZIONE IN BASSO SFONDO VIOLA */
.bottom-quote-section {
    background-color: #3b1e54;
    /* Sfondo viola pieno del mockup */
    padding: 30px 0;
    text-align: center;
}

.citation-text {
    color: #ffffff !important;
    font-size: 18px;
    margin: 0;
    font-style: italic;
    letter-spacing: 0.5px;
}

/* Responsive */
@media (max-width: 992px) {
    .competences-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .hero-content {
        width: 100%
    }

    .inside-header {
    padding: 20px 20px 0px;
}

    .method-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .cta-banner-content {
        flex-direction: column;
        text-align: center;
    }

    .header-ctas {
        margin-left: unset;
        margin: 10px
    }

    .hero-title {
        max-width: 100%;
        font-size:26px;
    }

    .hero-subtitle {
        max-width: 100%;
        text-align: center;
        font-size:18px!important;
    }

    .bg-homepage::before {
        background: rgba(255, 255, 255, 0.7);
    }

    .cta-text-block, .hero-actions {
        text-align: center;
    }

    .hero-section, .method-section, .competence-section {
        padding: 20px
    }

    .hero-actions .btn-purple {
        padding-right: 0px;
        margin-bottom: 20px
    }
	
.hero-section {
			display:grid;
	padding:0
		}

    .hero-actions .button {
        width: 100%
    }
}

@media (max-width: 1200px) {

	
	.hero-title {
		font-size: 38px!important
	}
	
	.menu-toggle, #primary-menu {
		background-color:#fff!important
	}
	
	.hero-subtitle {
		width: 100%!important;
		font-size:22px
	}
	
	    .competences-grid {
        grid-template-columns: 1fr !important;
    }
	
	.grid-text {
		padding-top:30px
	}
	
	.method-item {
		width:100%;
		line-height: 24px;
		margin:30px auto;
		padding:20px
	}
	
	.hero-content p {
		font-size:22px
	}
}