/*
Theme Name: SO
Theme URI:
Author: Giorgio Di Raimondo
Author URI: https://www.linkedin.com/in/giorgio-di-raimondo-675626ab/
Description: Starter Theme with Font Awesome and Bootstrap 5
Version: 1.10
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: one-column, two-columns, right-sidebar, custom-header, custom-menu, editor-style, featured-images, sticky-post, translation-ready
Text Domain: so

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you ve learned with others.
*/

/* ==========================================================================
   1. CSS CUSTOM PROPERTIES
   ========================================================================== */

:root {
--color-primary:   #F27E63;
--color-bg:        #f2f0ec;
--color-bg-light:  #faeee7;
--color-text:      #594a4e;
--color-heading:   #33272a;
--color-dark:      #524d4d;
--color-border:    rgba(82, 77, 77, 0.2);
--font-main:       'Neue Montreal', sans-serif;
}

/* ==========================================================================
   2. FONTS
   ========================================================================== */

@font-face {
font-family: 'Neue Montreal';
font-style:  normal;
font-weight: 700;
src: url('css/fonts/NeueMontreal-Bold.woff');
}

@font-face {
font-family: 'Neue Montreal';
font-style:  normal;
font-weight: 400;
src: url('css/fonts/NeueMontreal-Regular.woff');
}

/* ==========================================================================
   3. RESET / BASE
   ========================================================================== */

html { scroll-behavior: smooth; }

body {
display: flex;
min-height: 100vh;
flex-direction: column;
background-color: var(--color-bg);
font-family: var(--font-main);
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: 100%;
overflow-x: hidden;
font-size: 18px;
font-weight: 300;
line-height: 1.375;
margin: 0;
color: var(--color-text);
letter-spacing: 1px;
}

img {
border: none;
max-width: 100% !important;
height: auto !important;
}

p { margin: 0 0 1em 0; }

/* ==========================================================================
   4. TYPOGRAPHY
   ========================================================================== */

h1 { font-size: 42px; line-height: 1.05; font-weight: 700; color: var(--color-heading); letter-spacing: -1px; }
h2 { font-size: 33px; line-height: 1.25; font-weight: 700; color: var(--color-heading); }
h3 { font-size: 28px; line-height: 1.25; }
h4 { font-size: 18px; line-height: 1.22; }
h5 { font-size: 16px; line-height: 1.3;  }
h6, small { font-size: 14px; }

p, ul, ol, a {
letter-spacing: 0.01rem;
font-weight: 400;
font-size: 20px;
line-height: 32.18px;
}

.bold  { font-weight: 700; }
.black { font-weight: 900; }
.thin  { font-weight: 400; }

/* Stile Blockquote Moderno ed Editoriale (Allineato a sinistra) */
blockquote { background-color: var(--color-bg-light); padding: 30px 30px 30px 45px; border-left: 5px solid var(--color-primary); border-radius: 0 12px 12px 0; margin: 40px 0 !important; position: relative; font-size: 1.25rem; font-style: italic; color: var(--color-heading); box-shadow: 0 5px 20px rgba(0,0,0,0.03); z-index: 1; overflow: hidden; }

/* Maxi-virgoletta decorativa in sottofondo e Stile paragrafi */
blockquote::before { content: "“"; font-family: Georgia, serif; font-size: 8rem; line-height: 1; position: absolute; top: -10px; left: 10px; color: var(--color-primary); opacity: 0.12; z-index: -1; }
blockquote p { margin-bottom: 0; line-height: 1.7; position: relative; z-index: 2; }

/* Ottimizzazione Mobile per Blockquote */
@media (max-width: 768px) {
    blockquote { padding: 20px 15px 20px 25px; font-size: 1.1rem; margin: 30px 0 !important; }
    blockquote::before { font-size: 6rem; top: -5px; left: 5px; }
}

/* ==========================================================================
   OTTIMIZZAZIONE MOBILE PER BLOCKQUOTE (max-width: 768px)
   ========================================================================== */
@media (max-width: 768px) {
    blockquote {
        padding: 20px 15px 20px 25px; /* Riduce drasticamente i bordi interni per salvare spazio */
        font-size: 1.1rem; /* Riduce appena la grandezza del testo per migliorarne la leggibilità */
        margin: 30px 0 !important; /* Mantiene lo zero margin laterale */
    }
    
    blockquote::before {
        font-size: 6rem; /* Rimpicciolisce proporzionalmente la virgoletta sullo sfondo */
        top: -5px;
        left: 5px;
    }
}

/* ==========================================================================
   5. LINKS
   ========================================================================== */

a       { color: var(--color-dark); letter-spacing: 1px; }
a:hover { color: #444; }
a:link  { text-decoration: none; }

.interrassanti-content a       { color: var(--color-dark) !important; letter-spacing: 1px !important; }
.interrassanti-content a:hover { color: #444 !important; }
.interrassanti-content a:link  { text-decoration: none !important; }

.content-article a       { color: #3182d3; letter-spacing: 1px; }
.content-article a:hover { color: #5ba9f7; }
.content-article a:link  { text-decoration: none; }

/* ==========================================================================
   6. LAYOUT UTILITIES
   ========================================================================== */

.wrap        { max-width: 1250px; }
.main-content { flex: 1; }
.no          { display: none; }
.none        { display: none; }
.nopadding   { padding: 0 !important; margin: 0 !important; }
.seo-title   { position: absolute; top: -1000px; }

/* Spacers */
.spacer-home   { height: 120px; }
.spacer-single { height: 80px; }
.spacer-page   { height: 140px; }
.mt-10         { margin-top: 110px; }
.spacer-side   { margin-top: 30px; }

/* Trattino decorativo */
.trattino { position: relative; margin-bottom: 110px; z-index: 0; }
.trattino-sottile { position: relative; margin-bottom: 110px; z-index: 0; }
.trattino-sottile:after {
content: '';
background: var(--color-primary);
height: 6px;
width: 250px;
position: absolute;
bottom: -32px;
left: 51px;
margin-left: -50px;
}

/* Admin bar offset */
.admin-bar .navbar { top: 32px; }

/* Nav top bar */
.nav-top { min-height: 63px; background-color: #dab13e; color: #000; }

/* Navbar transparent body */
body.navbar-transparent { padding-top: 0; }

/* Lazy-load images */
img[data-src]      { opacity: 0; transition: opacity .25s ease-in-out; will-change: opacity; }
img[data-src][src] { opacity: 1; }

/* Video embed */
.video-container { position: relative; padding-bottom: 52%; height: 0; margin-bottom: 20px; overflow: hidden; }
.video-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/* ==========================================================================
   7. ANIMATIONS
   ========================================================================== */

.animate {
-webkit-transition: all 0.4s ease-in-out;
-moz-transition:    all 0.4s ease-in-out;
-o-transition:      all 0.4s ease-in-out;
transition:         all 0.4s ease-in-out;
}

.ball { animation: bounce 1s infinite alternate; -webkit-animation: bounce 1s infinite alternate; }

@keyframes bounce {
from { transform: translateY(0px); }
to   { transform: translateY(-20px); }
}

.infinite .item { animation: fadein 1s; -webkit-animation: fadein 1s; -moz-animation: fadein 1s; -o-animation: fadein 1s; }

@keyframes fadein {
from { opacity: 0; }
to   { opacity: 1; }
}

/* ==========================================================================
   8. NAVIGATION / MENU
   ========================================================================== */

.bg-primary {
background: var(--color-bg-light) !important;
box-shadow: 0 5px 20px rgba(0, 0, 0, .23);
}

.navbar-transparent .bg-primary,
.navbar-transparent-none .bg-primary,
.is-scrolled .bg-primary { background: var(--color-bg-light) !important; }

.navbar        { padding: 0 !important; }
.navbar > .container-fluid { align-items: center; }
.navbar-brand  { height: 50px; width: 360px; }

.navbar-nav .active a { color: var(--color-primary) !important; }

.nav-link            { text-transform: uppercase; font-size: 15px; font-weight: bold; color: var(--color-dark) !important; }
.nav-link:hover      { color: var(--color-primary) !important; }
.navbar-nav > li > a { padding: 22px; }

.social-networks a       { display: inline-block; color: #928d8ddd; font-size: 20px; padding: 8px; }
.social-networks a:hover { text-decoration: none; }
.facebook:hover { color: #0077e2; }
.google:hover   { color: #ef1a1a; }
.linkedin:hover { color: #00aced; }

.dropdown-menu { background: var(--color-bg-light); border: none !important; padding: 0 !important; }
.dropdown-menu a {
border-left: 1px solid #ddd; border-right: 1px solid #ddd; border-bottom: 1px solid #ddd;
padding: 13px 8px; color: var(--color-dark); background: #fff !important;
font-size: 14px; text-transform: capitalize;
}
.dropdown-menu a:hover               { background: #eee !important; }
.dropdown-item:hover                 { color: var(--color-primary) !important; }
.dropdown-item.active,
.dropdown-item:active a              { color: var(--color-primary) !important; }

.dropdown > .dropdown-menu           { transition: 0.3s all ease-in-out; }
.dropdown:hover > .dropdown-menu     { display: block; top: 97%; z-index: 200; }
.dropdown > .dropdown-toggle:active  { pointer-events: none; }

/* Burger menu */
.navbar-toggler:focus,
.navbar-toggler:active              { outline: none; box-shadow: none; }
.navbar-toggler .top-bar            { transform: rotate(45deg);  transform-origin: 10% 10%; }
.navbar-toggler .middle-bar         { opacity: 0; }
.navbar-toggler .bottom-bar         { transform: rotate(-45deg); transform-origin: 10% 90%; }
.navbar-toggler.collapsed .top-bar  { transform: rotate(0); }
.navbar-toggler.collapsed .middle-bar { opacity: 1; }
.navbar-toggler.collapsed .bottom-bar { transform: rotate(0); }
.icon-bar       { width: 39px; height: 3px; background-color: #000; display: block; transition: all 0.2s; margin-top: 8px; }
.navbar-toggler { border: none; background: transparent !important; }

/* Search overlay */
.openBtn { background: #f1f1f1; border: none; padding: 10px 15px; font-size: 20px; cursor: pointer; margin-top: 20px; }
.openBtn:hover { background: #bbb; }
.overlay { height: 100%; width: 100%; display: none; position: fixed; z-index: 9999; top: 0; left: 0; background-color: rgba(0,0,0,0.7); transition: 0.3s; }
.overlay-content { position: relative; top: 46%; width: 80%; text-align: center; margin: auto; transition: 0.3s; }
.overlay .closebtn { position: absolute; top: 20px; right: 45px; font-size: 60px; cursor: pointer; color: white; }
.overlay .closebtn:hover { color: #ccc; }
.overlay input[type=text] { padding: 15px; font-size: 17px; border: none; width: 60%; background: white; }
.overlay input[type=text]:hover { background: #f1f1f1; transition: 0.3s; }
.overlay button { width: 30%; padding: 15px; background: var(--color-primary); font-size: 17px; border: none; cursor: pointer; transition: 0.3s; }
.overlay button:hover { background: var(--color-primary); }
.search-overlay-btn { color: #fff; }
.search-overlay-btn:hover { color: #fff !important; }
.icon-search { color: #a19c9c !important; background: transparent; border: none; font-size: 23px; margin-right: 10px; }
.icon-search:hover { color: var(--color-primary) !important; }

::placeholder               { color: var(--color-dark) !important; }
::-webkit-input-placeholder { color: var(--color-dark) !important; }
::-moz-placeholder          { color: var(--color-dark) !important; }
:-ms-input-placeholder      { color: var(--color-dark) !important; }

/* ==========================================================================
   9. BUTTONS
   ========================================================================== */

.button {
background: var(--color-primary);
color: #fffffe;
padding: 12px 25px;
font-weight: bold;
text-transform: uppercase;
font-size: 14px;
letter-spacing: 0;
border: none;
border-radius: 4px;
text-decoration: none;
cursor: pointer;
display: inline-block;
text-shadow: none;
}
.button:hover { background: var(--color-primary); color: #fffffe; }

.btn-newsletter { display: inline-flex; align-items: center; gap: 8px; }

/* Category / tag badges */
.post-category a {
display: inline-block; background: var(--color-primary); color: #fff; padding: 0 10px;
font-weight: bold; text-transform: uppercase; font-size: 12px; text-decoration: none;
border-radius: 4px; opacity: 0.8; line-height: 26px; margin-top: 10px;
}
.post-category a:hover { color: #fff !important; }

.post-time {
color: var(--color-dark); padding: 0 0.1em; font-size: 16px;
display: inline-block; text-transform: uppercase; font-weight: bold; text-decoration: none;
}

.post-tag a {
color: #fff; padding: 5px; font-size: 16px; line-height: 19px;
display: inline-block; text-transform: uppercase; background-color: var(--color-dark);
font-weight: bold; text-decoration: none;
}

/* ==========================================================================
   10. CARD COMPONENTS
   ========================================================================== */

.card-news {
border: none !important; background: #fff; border-radius: 8px;
box-shadow: 0 5px 15px rgba(0,0,0,0.05); transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card-news:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0,0,0,0.15); }
.card-news img   { border-radius: 4px; }

.card-news .card-title a{
font-size: 20px; line-height: 27px; text-align: left; color: var(--color-heading);
font-weight: 700; margin-bottom: 12px !important; letter-spacing: -1px;
}
.card-news a:hover      { text-decoration: none; }
.card-excerpt-link      { color: inherit; text-decoration: none; display: block; font-size: inherit; line-height: inherit; }
.card-excerpt-link:hover { color: inherit; text-decoration: none; }
.card-news .card-text p { font-weight: 400; color: var(--color-text); font-size: 16px; line-height: 23px; text-align: left; margin: 0; }
.card-news .card-meta   { text-align: left; }
.card-news .card-meta a { text-transform: uppercase; font-weight: bold; color: #858585; font-size: 16px; }

.post-img-cover { height: 220px; width: 100%; object-fit: cover; border-radius: 8px 8px 0 0; display: block; }

.post-title-link    { color: var(--color-heading); text-decoration: none; font-weight: 800; }
.card-title-tight   { font-size: 1.3rem; line-height: 1.3; }
.card-text-compact  { font-size: 16px; line-height: 1.5; }
.card-meta-small    { font-size: 12px; text-transform: uppercase; font-weight: 700; color: #858585; }
.custom-card-footer { border-color: rgba(0,0,0,0.05) !important; }
.custom-card-footer .post-category a { margin-top: 0 !important; margin-bottom: 0 !important; }

.featured-card { background-color: #fff; overflow: hidden; box-shadow: 0 20px 40px rgba(0,0,0,0.08) !important; }
.featured-card .post-img-cover { height: 260px; min-height: unset; border-radius: 0; object-fit: cover; width: 100%; }
.post-img-cover-hero { height: 260px; min-height: unset; border-radius: 0; object-fit: cover; width: 100%; }
.featured-card .card-title { font-size: 1.6rem !important; }

.badge-featured {
display: inline-block; padding: 4px 14px; background: var(--color-bg-light);
color: var(--color-primary); font-weight: 700; text-transform: uppercase; font-size: 10px;
letter-spacing: 1px; border-radius: 4px; margin-bottom: 15px;
border: 1px solid rgba(242, 126, 99, 0.2);
}

/* ==========================================================================
   11. HOME / INDEX
   ========================================================================== */

.info-box h1 { font-size: 60px; color: #272424; letter-spacing: 0; line-height: 1.05; font-weight: bold; text-transform: uppercase; }

.home-author-intro {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 24px;
    padding: 36px 40px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.06);
    border-left: 4px solid var(--color-primary);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.home-author-intro:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0,0,0,0.15); }
.home-author-social { justify-content: center; }
.home-author-photo { flex-shrink: 0; }
.home-author-avatar {
    width: 160px !important;
    height: 160px !important;
    object-fit: cover;
    border-radius: 50% !important;
    display: block;
    box-shadow: 0 10px 30px rgba(242, 126, 99, 0.35);
    border: 4px solid var(--color-bg-light);
}
.home-author-bio { flex: 1; }
.home-author-name {
    font-size: 1.9rem;
    font-weight: 800;
    color: var(--color-heading);
    letter-spacing: -0.5px;
    margin-bottom: 12px;
}
.home-author-desc {
    font-size: 17px;
    line-height: 1.7;
    color: var(--color-text);
    margin: 0;
    max-width: 680px;
}

/* ==========================================================================
   12. SINGLE / ARTICLE
   ========================================================================== */

.content-article { padding: 30px 0 20px; float: left; width: 100%; }
.reading-time { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--color-primary); margin: 0 0 16px; }
.reading-time-icon { font-style: normal; }
.content-inside  { background: #fff; padding: 15px 20px; font-size: 20px; box-shadow: 0 5px 20px rgba(0,0,0,0.26); overflow: hidden; }
.container-image-single { position: relative; padding: 0; box-shadow: 0 5px 20px rgba(0,0,0,.15); border-radius: 4px; }

.interrassanti-content .heading-large {
border-bottom: 2px solid var(--color-dark); color: var(--color-dark);
line-height: 1.25; text-transform: uppercase; font-weight: bold;
}

.top-single-bkg { display: block; overflow: hidden; position: relative; width: 100%; height: 50vh; }
.top-single-bkg .inner-desc { position: absolute; z-index: 4; width: 100%; top: 40%; text-align: center; }
.top-single-bkg .link-gen { display: inline-block; padding: 5px 13px; font-style: italic; transform: skewy(-3deg); background-color: var(--color-primary); color: white; }
.top-single-bkg h2 { font-size: 49px; font-weight: 700; line-height: 61px; }
.top-single-bkg h1 { color: #fff; font-size: 25px; }
.top-single-bkg .carousel-text p { color: #fff; letter-spacing: -1px; font-weight: bold; font-size: 55px; line-height: 66px; margin-bottom: 5px; max-width: 900px; margin-left: auto; margin-right: auto; padding-top: 15px; }
.top-single-bkg .carousel-text-h1 h1 { color: #fff; letter-spacing: -1px; font-weight: bold; font-size: 55px; line-height: 66px; margin-bottom: 5px; max-width: 900px; margin-left: auto; margin-right: auto; padding-top: 15px; }

/* ==========================================================================
   13. PAGE TEMPLATES
   ========================================================================== */

.content-page { margin-bottom: 20px; margin-top: 30px; }
.content-page hr { margin-top: 2rem; margin-bottom: 2rem; border: 0; border-top: 2px solid #ccc; width: 450px !important; }
.mail p { line-height: 40px; text-align: center; }

.conte-title-page { padding-top: 142px; }
.conte-title-page h2 { font-size: 44px; line-height: 1.3; text-align: left; font-weight: 700; letter-spacing: 0; margin-bottom: 10px; margin-top: 7px; }
.conte-title-page .carousel-text { font-size: 26px; line-height: 1.5; text-align: left; margin-bottom: 27px; color: #5a6772; }

.border-jumbotron { border-bottom: 5px solid var(--color-primary); }

/* ==========================================================================
   14. ABOUT PAGE
   ========================================================================== */

.hero-about { background-color: var(--color-bg-light); padding: 160px 0 0; position: relative; }

.title-massive { font-size: 3rem; font-weight: 900; line-height: 1.2; color: var(--color-heading); letter-spacing: -2px; }

.text-outline { color: transparent; -webkit-text-stroke: 2px var(--color-heading); display: block; }

.img-offset-shadow {
border-radius: 4px; box-shadow: -20px 20px 0 var(--color-primary);
width: 100%; height: 500px; object-fit: cover; transition: transform 0.3s ease;
}
.img-offset-shadow:hover { transform: translate(5px, -5px); box-shadow: -25px 25px 0 var(--color-primary); }

.social-btn-pro {
width: 50px; height: 50px; display: inline-flex; align-items: center; justify-content: center;
background: #fff; color: var(--color-heading); border-radius: 50%; font-size: 20px;
box-shadow: 0 4px 10px rgba(0,0,0,0.1); transition: all 0.3s ease; margin-right: 15px;
}
.social-btn-pro:hover { background: var(--color-primary); color: #fff; transform: translateY(-5px); text-decoration: none; }

/* Stile Elenchi Puntati Globale (Articoli, Pagine, About) */
.custom-content-box ul, .content-inside ul { list-style: none; padding: 0; margin-bottom: 30px; }
.custom-content-box ul li, .content-inside ul li { position: relative; padding-left: 35px; margin-bottom: 20px; line-height: 1.6; color: var(--color-text); }
.custom-content-box ul li::before, .content-inside ul li::before { content: "✦"; position: absolute; left: 0; top: 2px; color: var(--color-primary); font-size: 1.3rem; }

/* Stile Elenchi Numerati Globale (Articoli, Pagine, About) */
.custom-content-box ol, .content-inside ol { list-style: none; padding: 0; margin-bottom: 30px; counter-reset: my-custom-counter; }
.custom-content-box ol li, .content-inside ol li { position: relative; padding-left: 35px; margin-bottom: 20px; line-height: 1.6; color: var(--color-text); counter-increment: my-custom-counter; }
.custom-content-box ol li::before, .content-inside ol li::before { content: counter(my-custom-counter) "."; position: absolute; left: 0; top: 0; color: var(--color-primary); font-size: 1.2rem; font-weight: 800; }

.about-intro-text  { font-size: 20px; color: var(--color-text); font-weight: 300; }
.about-author-name { color: var(--color-heading); font-size: 1.3rem; letter-spacing: 1px; margin-top: 40px; margin-bottom: 0; }
.about-content-card { border-radius: 12px; border-top: 5px solid var(--color-primary); }
.about-blog-link   { color: var(--color-primary); font-weight: 700; text-transform: uppercase; font-size: 14px; }

/* ==========================================================================
   15. NEWSLETTER
   ========================================================================== */

.newsletter {
padding: 60px 40px;
background: linear-gradient(-45deg, #E4C3AD, #faeee7, #FAE1DF);
animation: gradient 15s ease infinite;
background-size: 400% 400%;
border-radius: 4px;
}

@keyframes gradient {
0%   { background-position: 0%   50%; }
50%  { background-position: 100% 50%; }
100% { background-position: 0%   50%; }
}

.newsletter a{color:#ffff}

.newsletter .parent { display: flex; flex-direction: row; align-items: stretch; max-width: 650px; height: 55px; margin: 0 auto; text-align: center; position: relative; z-index: 2; }
.newsletter .parent h2  { color: #243c4f; margin-bottom: 40px; }
.newsletter .children-1 { width: 82.6%; }
.newsletter .children-2 { width: 17.4%; }

.newsletter .children-1 .form-control       { height: 50px; border-color: #fff; border-radius: 0; }
.newsletter .children-1 .form-control:focus { box-shadow: none; border: 2px solid #243c4f; }
.newsletter .children-2 .btn                { min-height: 50px; border-radius: 0; background: #a18c7f; color: #fff; font-weight: 600; }

.newsletter-heading { color: var(--color-heading); margin-top: 0; }
.newsletter-icon    { vertical-align: text-top; }
.newsletter-desc    { color: var(--color-dark); font-size: 1.15rem; line-height: 1.6; margin-bottom: 0; max-width: 500px; }

/* ==========================================================================
   16. SHARE BUTTONS
   ========================================================================== */

.share-buttons svg  { fill: #fff; width: 16px; height: 16px; }
.share-twitter, .share-linkedin, .share-print, .share-copy,
.share-email, .share-facebook, .share-whatsapp, .share-telegram {
    float: left; padding: 0 20px; text-align: center;
    display: inline-flex; align-items: center; justify-content: center;
    height: 40px; line-height: 1; font-size: 16px;
}
.share-twitter    { background: #000; }
.share-linkedin   { background: #1da1f2; color: #fff !important; }
.share-print      { background: #FF8C20; color: #fff !important; }
.share-copy       { background: #3182d3; color: #fff !important; }
.share-copy input[type=text] { display: none; }
.share-email      { background: #848282; color: #fff !important; }
.share-facebook   { background: #3b5998; }
.share-whatsapp   { background: #25d366; }
.share-telegram   { background: #229ed9; }
.share-twitter:hover  { background: #333; }
.share-linkedin:hover { background: #73b0f2; }
.share-facebook:hover { background: #6886c6; }
.share-whatsapp:hover { background: #1ebe57; }
.share-telegram:hover { background: #1a8bbf; }
.share-print:hover    { background: #f7a960; }
.share-email:hover    { background: #999; }
.share-copy:hover     { background: #216fbe; }

/* ==========================================================================
   17. FOOTER
   ========================================================================== */

#myFooter { background-color: var(--color-bg-light); color: var(--color-heading); text-align: right; margin-top: 40px; border-top: 1px solid var(--color-border); }
#myFooter .footer-top              { padding: 100px 15px 70px; }
#myFooter .navbar-brand-footer img { width: 35%; }
#myFooter .footer-copyright        { padding: 30px 0; text-align: center; }
#myFooter .border-top-tran         { border-top: 1px solid var(--color-border); }
#myFooter .footer-copyright p      { margin: 5px; color: var(--color-heading); font-weight: 400; font-size: 14px; }
#myFooter .footer-copyright a      { font-size: 14px; color: rgba(51,39,42,0.72); }
#myFooter .footer-copyright a:hover { color: var(--color-primary); }
#myFooter .row           { margin-bottom: 60px; }
#myFooter .navbar-brand  { height: 65px; }
#myFooter ul             { list-style-type: none; padding-left: 0; line-height: 1.7; }
#myFooter h5             { margin-top: 10px; margin-bottom: 25px; font-size: 18px; color: var(--color-heading); font-weight: 700; }
#myFooter h2 a           { font-size: 50px; text-align: center; color: #fff; }
#myFooter a              { color: var(--color-heading); text-decoration: none; font-size: 18px; padding-bottom: 10px; }
#myFooter a:hover        { text-decoration: none; color: var(--color-primary); }
#myFooter p              { letter-spacing: 0.01rem; font-weight: 400; font-size: 18px; line-height: 26px; }
#myFooter .social-networks         { text-align: right; padding-top: 30px; padding-bottom: 16px; }
#myFooter .social-networks a       { font-size: 32px; color: #928d8ddd; padding: 10px; transition: 0.2s; }
#myFooter .social-networks a:hover { text-decoration: none; }
#myFooter .facebook:hover { color: #0077e2; }
#myFooter .google:hover   { color: #ef1a1a; }
#myFooter .linkedin:hover { color: #ff0000; }
#myFooter .btn {
color: #fff; background-color: var(--color-primary); text-transform: uppercase;
border-radius: 20px; border: none; width: 150px; display: block; margin: 10px auto 0; line-height: 25px;
}
#myFooter .btn:hover { background-color: #11e7b6; color: #fff !important; }

/* ==========================================================================
   18. COMMENTS
   ========================================================================== */

.comment-body hr  { margin-bottom: 20px; }
.comment-body ol  { margin-bottom: 0 !important; list-style: decimal inside; }
.comment-body ul  { list-style: disc inside; }
.comment-body ul ul, .comment-body ol ol,
.comment-body ul ul ul, .comment-body ol ol ol { margin-left: 0; }
.comment-body pre h2 { margin-left: 0; }

.reply          { border-bottom: 1px solid #ccc; margin-left: 104px; padding-bottom: 20px; }
.reply a::before { content: "\f112"; font-family: FontAwesome; font-style: normal; font-weight: normal; text-decoration: inherit; color: var(--color-primary); }
.reply a        { color: #222 !important; display: inline-block; padding: 5px 12px; border: 1px solid #ccc; letter-spacing: 0.3em !important; }
.reply a:hover  { border-color: var(--color-primary); }

.comment-author.vcard { float: left; width: 50%; }
.comment-meta { display: block; min-height: 74px; }
.comment-meta::after { clear: both; }
.comment-metadata { float: left; height: 74px; width: 50%; text-align: right; }
.comment-metadata a > time,
.comment-metadata a.comment-edit-link { color: #ccc; }

.fn  { font-style: normal; color: #999 !important; text-transform: uppercase; font-size: 12px; font-weight: 400; letter-spacing: 1px; float: left; padding-top: 4px; }
.says { display: none; }
.comment-author.vcard img { border-radius: 50%; float: left; margin-right: 30px; }

.comment-respond label,
.page label { color: #222; text-transform: uppercase; font-size: 12px; font-weight: 400; letter-spacing: 0; margin-bottom: 5px; display: inline-block; }
.page label { display: block; }

p.logged-in-as, p.comment-notes { margin-bottom: 20px; }

.blog-post-comments input,
.blog-post-comments textarea { margin-bottom: 30px; }

p.comment-notes, .comment-body a, .comment-respond a { color: #999; text-transform: uppercase; font-size: 12px; letter-spacing: 1px; text-decoration: none; }
.comment-body a, .comment-respond a { transition: 0.3s; }
.comment-body a:hover, .comment-respond a:hover,
.comment-metadata a:hover > time { color: #39f; }

.comment-navigation { margin-bottom: 30px; }
.comment-navigation a { text-decoration: none; color: #39f; font-size: 14px; font-weight: 300; text-transform: uppercase; transition: 0.3s; }
.comment-navigation a:hover { color: #222; }
.comment-navigation .nav-previous,
.comment-navigation .nav-next { display: inline-block; }

#comment                  { width: 100%; }
input[type=text]          { width: 100%; }
#comments #submit         { margin-top: 10px; border: none; background: var(--color-primary); color: #fff; text-transform: uppercase; padding: 15px 20px; }
#comments #submit:hover   { background: #f3c5ab; }
#wp-comment-cookies-consent { margin-right: -1px; }
.post-comments            { color: #fff; display: inline-block; padding: 10px 15px; background: var(--color-primary); }
.border-bottom-title      { border-bottom: 3px solid var(--color-primary); }

/* ==========================================================================
   19. SIDEBAR & WIDGETS
   ========================================================================== */

aside .widget h3::before {
background: linear-gradient(45deg, #F2C4D0 0%, #F27E63 100%);
content: "\020"; display: block; height: 2px; margin: 0 0 1rem; width: 1em;
}
aside .widget p { font-size: 16px; line-height: 24px; font-weight: 400; }

.wp-block-group__inner-container h3 { font-size: 18px; text-transform: uppercase; font-weight: 600; }

.widget span { display: inline-block; text-transform: uppercase; font-weight: 700; font-size: 13px; color: #fff; padding: 10px 15px; background: #3ed1a2; }

.widget        { float: left; margin-bottom: 40px; width: 100%; }
.widget h3     { margin: 0 0 10px; }
.widget a      { padding: 0 0 5px; font-size: 14px; text-decoration: none; font-weight: 400; line-height: 28px; color: #222; }
.widget a:hover { color: var(--color-primary); }
.widget ul     { padding: 0; list-style-type: none; }
.widget ul li  { font-size: 14px; line-height: 1.3; display: block; padding-bottom: 10px; text-transform: uppercase; font-weight: bold; list-style-type: none; }
.widget ul li a { padding-left: 0; }
.widget .post-date { background: none; color: var(--color-dark); font-size: 13px; padding: 0; }
.widget .border-bottom-title { border-bottom: 3px solid #3ed1a2; }
.widget img    { border-radius: 10px; }

.widget_search .screen-reader-text { display: block; }
.widget_search #s { width: 60%; float: left; }
.widget_search #searchsubmit { width: 40%; float: left; background: #fff; }

.screen-reader-text { text-align: left; color: #000; padding-bottom: 10px; font-size: 13px; text-transform: uppercase; font-weight: 700; display: none; }

.wp-block-image .wp-caption { padding: 0; border: none; font-size: 14px; }
.wp-block-image .wp-caption-text { text-align: left; line-height: 22px !important; }
.wp-block-image img { box-shadow: 0 7px 8px rgba(0,0,0,0.1); }
.wp-block-image.is-style-circle-mask img,
.wp-block-image.is-style-rounded img { border-radius: 6px; }

/* Sidebar card styling – circular coral-shadow photo */
.spacer-side .widget {
background: #fff; padding: 35px 25px; border-radius: 12px;
box-shadow: 0 5px 15px rgba(0,0,0,0.05); margin-bottom: 40px; text-align: center; border: none;
}
.spacer-side .widget h3 {
font-size: 1.1rem; font-weight: 800; color: var(--color-heading);
margin-bottom: 25px; text-transform: uppercase; letter-spacing: 1px;
}
.spacer-side .widget h3::before { display: none !important; }

.spacer-side .widget img {
max-width: 160px !important; height: 160px !important; object-fit: cover;
border-radius: 50% !important; margin: 0 auto 20px; display: block;
box-shadow: 0 10px 25px rgba(242, 126, 99, 0.2);
border: 4px solid var(--color-bg-light);
}
.spacer-side .widget p { font-size: 16px; line-height: 1.6; color: var(--color-dark); margin-bottom: 20px; }
.spacer-side .widget ul { text-align: left; padding: 0; }
.spacer-side .widget ul li { border-bottom: 1px solid rgba(0,0,0,0.05); padding: 10px 0; margin: 0; }
.spacer-side .widget ul li:last-child { border-bottom: none; }

/* ==========================================================================
   20. CALENDAR WIDGET
   ========================================================================== */

.calendar_wrap table { width: 100%; }
#wp-calendar        { width: 100%; }
#wp-calendar a      { padding: 0; border: none; }
#wp-calendar caption { padding-bottom: 10px; color: #000; text-align: left; text-transform: uppercase; font-weight: 700; font-size: 14px; }
#wp-calendar thead  { font-size: 10px; }
#wp-calendar thead th { padding-bottom: 10px; }
#wp-calendar tbody  { color: #aaa; }
#wp-calendar tbody td { padding: 8px; border: 1px solid #fff; background: #f5f5f5; text-align: center; }
#wp-calendar tbody td:hover { background: #fff; }
#wp-calendar tbody .pad { background: none; }
#wp-calendar tfoot #next { text-align: right; text-transform: uppercase; font-size: 10px; }
#wp-calendar tfoot #prev { padding-top: 10px; text-transform: uppercase; font-size: 10px; }

/* ==========================================================================
   21. PAGINATION
   ========================================================================== */

.pagination { margin: 20px 0 60px; padding: 0; width: 100%; display: block !important; }
.pagination span,
.pagination a  { margin: 0 10px 10px 0; padding: 14px 19px; border: 1px solid #ddd; font-size: 16px; font-weight: 400; }
.pagination a       { color: var(--color-primary); text-decoration: none; }
.pagination a:hover { color: var(--color-primary); }

/* ==========================================================================
   22. AUTHOR BOX
   ========================================================================== */

.author { margin: 20px auto 10px; padding: 40px 30px; background: #191c1d; color: #fff; }
.author img { border-radius: 50%; }
.post-author-name { margin-top: 0; font-size: 20px; padding: 0 0 2px; text-transform: uppercase; color: #f8b147; }
.post-author-text { font-size: 16px; line-height: 22px; }

/* ==========================================================================
   23. GUTENBERG / BLOCKS
   ========================================================================== */

.max-width h1, .max-width h2, .max-width h3, .max-width h4, .max-width h5, .max-width h6,
.max-width p, .max-width ol, .max-width ul,
.max-width .wp-block-embed__wrapper, .max-width .wp-block-media-text,
.max-width .wp-block-image, .max-width .wp-block-cover, .max-width .wp-block-table,
.max-width .share-buttons, .max-width .wp-block-file {
max-width: 1350px; margin: 0 auto 20px;
}

.wp-block-image figcaption { font-size: 9px; color: #000; margin-top: 8px; text-transform: uppercase; text-align: center; font-weight: 700; }

.wp-block-table { width: 100%; min-width: 240px; border-collapse: collapse; }
.wp-block-table table { display: table; border-spacing: 2px; border-color: grey; }
.wp-block-table td, .wp-block-table th { padding: .5em; border: 1px solid var(--color-dark); word-break: break-all; }

.wp-block-file { padding-bottom: 15px; }
.wp-block-file a { color: #1990ff; }
.wp-block-file a:hover { color: var(--color-primary); }
.wp-block-file::before { content: "\f1c1"; font-family: FontAwesome; font-style: normal; font-weight: normal; text-decoration: inherit; color: red; margin-right: 6px; }
.wp-block-file .wp-block-file__button { background: none; border-radius: 0; color: #1990ff !important; display: inline-block; padding: 10px 15px; border: 1px solid #1990ff; letter-spacing: 0.3em !important; }
.wp-block-file .wp-block-file__button:hover { color: var(--color-primary) !important; }

.post img { max-width: 100%; height: auto; }

/* ==========================================================================
   24. BREADCRUMBS
   ========================================================================== */

.content-article #breadcrumbs span,
.content-article #breadcrumbs a { font-size: 14px !important; }

/* ==========================================================================
   25. CONTACT FORM 7
   ========================================================================== */

.wpcf7         { color: var(--color-dark); }
.wpcf7 a       { color: var(--color-primary); font-weight: bold; font-size: 14px; }
.wpcf7 a:hover { color: var(--color-primary); font-weight: bold; }
.wpcf7-list-item { margin-left: 0 !important; }

/* ==========================================================================
   26. MISC
   ========================================================================== */

.grecaptcha-badge { display: none !important; }

/* ==========================================================================
   27. RESPONSIVE — MOBILE (max-width: 702px)
   ========================================================================== */

@media only screen and (max-width: 702px) {

body { background-color: #ffffff; }

.navbar-brand  { width: auto; max-width: 200px; }

h1 { font-size: 30px; line-height: 1.1; }
h2 { font-size: 26px; line-height: 1.15; }
h3 { font-size: 22px; line-height: 1.14; }
h4 { font-size: 18px; line-height: 1.11; }
p, ul, ol, a { font-size: 18px; line-height: 28.18px; }

.spacer-home   { height: 80px; }
.spacer-single { height: 90px; }
.spacer-page   { height: 110px; }
.mt-10         { margin-top: 100px; }
.trattino      { margin-bottom: 70px; }

.info-box h1 { font-size: 35px; }

.home-author-intro { flex-direction: row; align-items: center; text-align: left; gap: 20px; padding: 20px 16px; }
.home-author-social { justify-content: flex-start; }
.home-author-avatar { width: 80px !important; height: 80px !important; }
.home-author-name  { font-size: 1.2rem; margin-bottom: 6px; }
.home-author-desc  { max-width: 100%; }

/* Ottimizzazione Hero Image (Immagine in evidenza) */
.top-single-bkg { height: 45vh; min-height: 280px; }
.top-single-bkg h2 { font-size: 18px; line-height: 22px; }
.top-single-bkg h1 { font-size: 27px; }
.top-single-bkg .inner-desc { top: 50%; transform: translateY(-50%); }
.top-single-bkg .carousel-text p { font-size: 30px; letter-spacing: 0; line-height: 38px; }
.top-single-bkg .carousel-text-h1 h1 { font-size: 27px; letter-spacing: 0; line-height: 30px; padding-top: 0; }

/* -------------------------------------------------------------
   UX LETTURA MOBILE (Articoli e Pagine)
------------------------------------------------------------- */
.content-article { padding: 0; }

.content-inside { 
    box-shadow: none; 
    padding: 20px 20px 40px 20px !important; /* Margini laterali applicati SOLO al testo */
    background: transparent;
}

.content-inside p {
    font-size: 18px; 
    line-height: 1.7; /* Interlinea aumentata */
    margin-bottom: 28px; /* Respiro tra i paragrafi */
    color: var(--color-text);
}

.content-article h1.entry-title {
    font-size: 32px; 
    line-height: 1.2;
    margin-bottom: 15px;
    letter-spacing: -0.5px;
    /* Nessun padding forzato: segue l'allineamento della griglia standard */
}

.content-article p.card-meta, 
.reading-time {
    margin-bottom: 20px;
    /* Nessun padding forzato: segue l'allineamento della griglia standard */
}

.content-inside img {
    border-radius: 8px; 
    margin: 30px 0; 
    box-shadow: 0 5px 15px rgba(0,0,0,0.05); 
}
/* ------------------------------------------------------------- */

.hero-about       { padding: 120px 0 80px; }
.title-massive    { font-size: 3rem; }
.img-offset-shadow { height: 350px; margin-top: 40px; box-shadow: -10px 10px 0 var(--color-primary); }
.newsletter-box-pro { padding: 40px 20px; text-align: center; }

.newsletter .children-1 { width: 64.6%; }

.navbar-transparent .bg-primary,
.navbar-transparent-none .bg-primary,
.navbar-transparent.is-scrolled .bg-primary { background: var(--color-bg-light) !important; }
.navbar-transparent .nav-link       { color: var(--color-dark) !important; }
.navbar-transparent .nav-link:hover { color: var(--color-primary) !important; }
.navbar-brand { height: auto; width: 249px; }
.social-networks { flex-direction: row; margin-left: 0; }
.dropdown-menu { margin: 2px; }
.dropdown-menu a { border: none; padding: 10px 3px; }
.navbar-nav > li > a { padding: 8px; text-align: center; }
.navbar     { padding: 8px 16px !important; }
.navbar-nav { margin-right: 0; }

.icon-search     { margin-right: 0; }
.overlay-content { width: 100%; }

.author h2, .author p { text-align: center; }
.author img           { display: block; margin: 0 auto; }

input[type=text] { width: 100%; }
}

/* ==========================================================================
   28. RESPONSIVE — TABLET (703px – 998px)
   ========================================================================== */

@media only screen and (min-width: 703px) and (max-width: 998px) {

body { background-color: #ffffff; }

h1 { font-size: 36px; }
h2 { font-size: 26px; line-height: 1.15; }
h3 { font-size: 22px; line-height: 1.14; }
h4 { font-size: 18px; line-height: 1.11; }

.none { display: block !important; }
.spacer-single { height: 70px; }

.top-single-bkg { height: 55vh; }
.top-single-bkg h2 { font-size: 40px; line-height: 50px; }
.top-single-bkg .inner-desc { top: 40%; }
.top-single-bkg .carousel-text p { font-size: 30px; line-height: 40px; letter-spacing: 0; }
.top-single-bkg .carousel-text-h1 h1 { font-size: 30px; line-height: 40px; letter-spacing: 0; padding-top: 0; }

.navbar-transparent .bg-primary,
.navbar-transparent-none .bg-primary,
.navbar-transparent.is-scrolled .bg-primary { background: var(--color-bg-light) !important; }
.navbar-transparent .nav-link       { color: var(--color-dark) !important; }
.navbar-transparent .nav-link:hover { color: var(--color-primary) !important; }
.navbar-brand        { height: 40px; width: 350px; }
.social-networks     { flex-direction: row; }
.navbar-nav          { padding-left: 12px; margin-right: 0; }
.dropdown-menu       { margin: 2px; }
.dropdown-menu a     { border: none; padding: 10px 3px; }
.navbar-nav > li > a { padding: 8px; text-align: center; }
.navbar              { padding: 8px 16px !important; }

.author h2, .author p { text-align: center; }
.author img           { display: block; margin: 0 auto; }
}

/* ==========================================================================
   29. RESPONSIVE — LARGE DESKTOP (1024px – 1400px)
   ========================================================================== */

@media screen and (min-width: 1024px) and (max-width: 1400px) {
.wrap { max-width: 1110px; }
}

/* ==========================================================================
   30. RESPONSIVE — COOKIE BANNER & MISC (max-width: 768px)
   ========================================================================== */

@media (max-width: 768px) {
.cmplz-cookiebanner .cmplz-buttons { flex-direction: row !important; }
.spacer-single { height: 70px; }
}

/* ==========================================================================
   31. RESPONSIVE — FEATURED CARD (max-width: 991px)
   ========================================================================== */

@media (max-width: 991px) {
.featured-card .post-img-cover { height: 250px; min-height: auto; }
.post-img-cover-hero { height: 220px !important; }
}