/*
Theme Name: Evaton Child - Puzzle Agency
Theme URI: https://puzzleagency.it
Description: Child theme di Evaton con palette colori Puzzle Agency
Author: Puzzle Agency
Template: evaton
Version: 1.2.1
Text Domain: evaton-child
*/

/* =============================================================
   PALETTE PUZZLE AGENCY
   Primary:   #E8751A (arancione)
   Secondary: #4A8C2A (verde)
   Accent:    #8DC63F (verde chiaro)
   Text:      #4A4A4A
   Dark bg:   #1A1A1A
   ============================================================= */

/* -------------------------------------------------------------
   0. HEADER — nasconde solo il default header duplicato sulle
      pagine portfolio. Usa > (figlio diretto di #evaton-page)
      per non toccare il nav dentro il contenitore Elementor.
   ------------------------------------------------------------- */
body.post-type-archive-portfolio #evaton-page > .main-header.menu-absolute,
body.single-portfolio #evaton-page > .main-header.menu-absolute {
  display: none !important;
}

/* -------------------------------------------------------------
   1. OVERRIDE VARIABILI CSS GLOBALI
   ------------------------------------------------------------- */
:root {
  --evaton-primary-color: #E8751A !important;
  --evaton-secondary-color: #4A8C2A !important;
  --evaton-primary-rgb: 232, 117, 26 !important;
  --evaton-secondary-rgb: 74, 140, 42 !important;
  --evaton-heading-color: #1A1A1A !important;
  --evaton-base-color: #4A4A4A !important;
  --puzzle-primary: #E8751A;
  --puzzle-secondary: #4A8C2A;
  --puzzle-accent: #8DC63F;
  --puzzle-text: #4A4A4A;
  --puzzle-dark: #1A1A1A;
}

/* Override locale per pricing-plan-item.style-two che sovrascrive la variabile con #FF2883 */
.pricing-plan-item.style-two {
  --evaton-primary-color: #4A8C2A !important;
}

/* -------------------------------------------------------------
   2. GRADIENTE PAGE BANNER
   Originale: linear-gradient(90deg, #2A07F9 15%, #0D0648 48%, #2A14E9 87%)
   ------------------------------------------------------------- */
.page-banner-area:before {
  background: -webkit-gradient(linear, left top, right top,
    color-stop(15%, #E8751A),
    color-stop(48.16%, #1A1A1A),
    color-stop(86.84%, #C85A0A)) !important;
  background: -webkit-linear-gradient(left,
    #E8751A 15%, #1A1A1A 48.16%, #C85A0A 86.84%) !important;
  background: -o-linear-gradient(left,
    #E8751A 15%, #1A1A1A 48.16%, #C85A0A 86.84%) !important;
  background: linear-gradient(90deg,
    #E8751A 15%, #1A1A1A 48.16%, #C85A0A 86.84%) !important;
}

/* -------------------------------------------------------------
   3. GRADIENTE COUNTDOWN (count-down li b)
   Originale: linear-gradient(180deg, rgba(255,40,131,0.56) 0%, rgba(67,97,238,0.56) 100%)
   ------------------------------------------------------------- */
.count-down li b {
  background: -webkit-gradient(linear, left top, left bottom,
    from(rgba(232, 117, 26, 0.56)),
    to(rgba(74, 140, 42, 0.56))) !important;
  background: -webkit-linear-gradient(top,
    rgba(232, 117, 26, 0.56) 0%, rgba(74, 140, 42, 0.56) 100%) !important;
  background: -o-linear-gradient(top,
    rgba(232, 117, 26, 0.56) 0%, rgba(74, 140, 42, 0.56) 100%) !important;
  background: linear-gradient(180deg,
    rgba(232, 117, 26, 0.56) 0%, rgba(74, 140, 42, 0.56) 100%) !important;
}

/* -------------------------------------------------------------
   4. GRADIENTE TEAM MEMBER SOCIAL OVERLAY
   Originale: linear-gradient(180deg, rgba(42,7,249,0) 0%, #2A07F9 80%)
   ------------------------------------------------------------- */
.team-member-two-item .image .social-style-one {
  background: -webkit-gradient(linear, left top, left bottom,
    from(rgba(232, 117, 26, 0)),
    color-stop(80%, #E8751A)) !important;
  background: -webkit-linear-gradient(top,
    rgba(232, 117, 26, 0) 0%, #E8751A 80%) !important;
  background: -o-linear-gradient(top,
    rgba(232, 117, 26, 0) 0%, #E8751A 80%) !important;
  background: linear-gradient(180deg,
    rgba(232, 117, 26, 0) 0%, #E8751A 80%) !important;
}

/* -------------------------------------------------------------
   5. GRADIENTE WIDGET ORGANIZER CONTENT
   Originale: linear-gradient(180deg, rgba(42,7,249,0) 0%, #2A07F9 100%)
   ------------------------------------------------------------- */
.widget-organizer .content {
  background: -webkit-gradient(linear, left top, left bottom,
    from(rgba(232, 117, 26, 0)),
    to(#E8751A)) !important;
  background: -webkit-linear-gradient(top,
    rgba(232, 117, 26, 0) 0%, #E8751A 100%) !important;
  background: -o-linear-gradient(top,
    rgba(232, 117, 26, 0) 0%, #E8751A 100%) !important;
  background: linear-gradient(180deg,
    rgba(232, 117, 26, 0) 0%, #E8751A 100%) !important;
}

/* -------------------------------------------------------------
   6. OVERLAY WIDGET GALLERY (icona hover)
   Originale: background: rgba(42, 7, 249, 0.65)
   ------------------------------------------------------------- */
.widget-gallery .gallery a > i {
  background: rgba(232, 117, 26, 0.65) !important;
}

/* -------------------------------------------------------------
   7. PROJECT SHAPES (sfere colorate decorative)
   Originale: linear-gradient(180deg, rgba(255,40,131,0.56) 0%, rgba(67,97,238,0.56) 100%)
   ------------------------------------------------------------- */
.project-shapes .shape.four,
.project-shapes .shape.five,
.project-shapes .shape.three {
  background: -webkit-gradient(linear, left top, left bottom,
    from(rgba(232, 117, 26, 0.56)),
    to(rgba(74, 140, 42, 0.56))) !important;
  background: -webkit-linear-gradient(top,
    rgba(232, 117, 26, 0.56) 0%, rgba(74, 140, 42, 0.56) 100%) !important;
  background: -o-linear-gradient(top,
    rgba(232, 117, 26, 0.56) 0%, rgba(74, 140, 42, 0.56) 100%) !important;
  background: linear-gradient(180deg,
    rgba(232, 117, 26, 0.56) 0%, rgba(74, 140, 42, 0.56) 100%) !important;
}

/* -------------------------------------------------------------
   8. PROJECT ITEM HOVER OVERLAY
   Originale: linear-gradient(180deg, rgba(42,7,249,0) 0%, #2A07F9 100%)
   ------------------------------------------------------------- */
.project-item.style-two.hover-content .content:after {
  background: -webkit-gradient(linear, left top, left bottom,
    from(rgba(232, 117, 26, 0)),
    to(#E8751A)) !important;
  background: -webkit-linear-gradient(top,
    rgba(232, 117, 26, 0) 0%, #E8751A 100%) !important;
  background: -o-linear-gradient(top,
    rgba(232, 117, 26, 0) 0%, #E8751A 100%) !important;
  background: linear-gradient(180deg,
    rgba(232, 117, 26, 0) 0%, #E8751A 100%) !important;
}

/* -------------------------------------------------------------
   9. SKILLBAR BACKGROUND
   Originale: background: rgba(42, 7, 249, 0.2)
   ------------------------------------------------------------- */
.skillbar {
  background: rgba(232, 117, 26, 0.2) !important;
}

/* -------------------------------------------------------------
   10. BOX SHADOW (header sticky e mobile menu)
   Originale: rgba(87, 95, 245, 0.1)
   ------------------------------------------------------------- */
.main-header.fixed-header .header-upper {
  -webkit-box-shadow: 0px 0px 30px 0px rgba(232, 117, 26, 0.1) !important;
  box-shadow: 0px 0px 30px 0px rgba(232, 117, 26, 0.1) !important;
}

.main-menu .navbar-collapse > ul {
  -webkit-box-shadow: inset 0px 0px 30px 0px rgba(232, 117, 26, 0.1) !important;
  box-shadow: inset 0px 0px 30px 0px rgba(232, 117, 26, 0.1) !important;
}

/* -------------------------------------------------------------
   11. COLORI PRIMARI — BOTTONI E LINK
   ------------------------------------------------------------- */

/* Bottoni primari */
.theme-btn,
.btn-primary,
.wpcf7 input[type="submit"],
input[type="submit"],
button[type="submit"],
.evaton-btn,
[class*="btn-style"],
.submit-btn,
.evaton-btn-one {
  background-color: #E8751A !important;
  border-color: #E8751A !important;
  color: #ffffff !important;
}

.theme-btn:hover,
.btn-primary:hover,
.wpcf7 input[type="submit"]:hover,
input[type="submit"]:hover,
button[type="submit"]:hover,
.evaton-btn:hover,
[class*="btn-style"]:hover,
.submit-btn:hover,
.evaton-btn-one:hover {
  background-color: #4A8C2A !important;
  border-color: #4A8C2A !important;
  color: #ffffff !important;
}

/* Bottoni secondari */
.btn-secondary,
.evaton-btn-two,
.btn-outline-primary {
  background-color: #4A8C2A !important;
  border-color: #4A8C2A !important;
  color: #ffffff !important;
}

.btn-secondary:hover,
.evaton-btn-two:hover,
.btn-outline-primary:hover {
  background-color: #E8751A !important;
  border-color: #E8751A !important;
  color: #ffffff !important;
}

/* -------------------------------------------------------------
   12. HEADER E NAVIGAZIONE
   ------------------------------------------------------------- */

/* Link menu attivi e hover */
.main-menu .navbar-collapse li.current > a,
.main-menu .navbar-collapse li.current-menu-item > a,
.main-menu .navbar-collapse li a:hover {
  color: #E8751A !important;
}

/* Dropdown menu attivi */
.main-menu .navbar-collapse li ul li a:hover,
.main-menu .navbar-collapse li ul li.current > a,
.main-menu .navbar-collapse li ul li.current-menu-item > a {
  color: #E8751A !important;
}

/* Dropdown button (freccia) */
.main-menu .navbar-collapse li.dropdown .dropdown-btn {
  color: #E8751A !important;
}

/* Hamburger mobile button */
.mobile-nav-toggler,
.navbars-toggle-btn {
  color: #E8751A !important;
  border-color: #E8751A !important;
}

/* Search button nell'header */
.search-btn,
.header-search-btn {
  color: #E8751A !important;
}

/* Header superiore con sfondo */
.header-top {
  background-color: #1A1A1A !important;
}

/* -------------------------------------------------------------
   13. HERO / SLIDER AREA
   ------------------------------------------------------------- */

.hero-area,
.slider-area,
[class*="hero-"],
[class*="slider-"] {
  --evaton-primary-color: #E8751A;
  --evaton-secondary-color: #4A8C2A;
}

/* Overlay hero */
.hero-overlay,
.slider-overlay,
[class*="-overlay"] {
  background-color: rgba(232, 117, 26, 0.7) !important;
}

/* Badge/label colorati */
.badge-primary,
.label-primary,
[class*="badge-"][class*="primary"],
.hero-area .tag,
.slider-area .tag {
  background-color: #E8751A !important;
  color: #ffffff !important;
}

/* -------------------------------------------------------------
   14. SEZIONI COLORATE (about, speakers, features, ecc.)
   ------------------------------------------------------------- */

/* Background primario */
[class*="-area"].bg-primary,
[class*="-section"].bg-primary,
.bg-primary {
  background-color: #E8751A !important;
}

/* Background secondario */
[class*="-area"].bg-secondary,
[class*="-section"].bg-secondary,
.bg-secondary {
  background-color: #4A8C2A !important;
}

/* Background scuro */
.bg-black,
.bg-dark,
[class*="-area"].bg-black,
[class*="-section"].bg-black {
  background-color: #1A1A1A !important;
}

/* Sezioni con classi tema specifiche */
.about-area,
.speakers-area,
.features-area,
.contact-area,
.events-area,
.counter-area,
.pricing-area,
.team-area,
.faqs-area {
  --evaton-primary-color: #E8751A;
  --evaton-secondary-color: #4A8C2A;
}

/* -------------------------------------------------------------
   15. ICONE E DECORATIVI
   ------------------------------------------------------------- */

/* Icone con colore primario */
.icon-primary,
[class*="-icon"].primary,
.fa-primary,
i.primary,
.flat-icon,
[class*="flaticon-"] {
  color: #E8751A !important;
}

/* Icone con background */
.icon-box,
.icon-box-two,
[class*="icon-box"] {
  --evaton-primary-color: #E8751A;
  --evaton-secondary-color: #4A8C2A;
}

.icon-box:hover .icon,
[class*="icon-box"]:hover .icon {
  background-color: #E8751A !important;
  color: #ffffff !important;
}

/* Cerchi decorativi e shapes */
.circle-shape,
.shape-primary,
[class*="-shape"].primary {
  background-color: #E8751A !important;
}

/* Linee decorative */
.divider-primary,
hr.primary,
.section-divider {
  background-color: #E8751A !important;
  border-color: #E8751A !important;
}

/* Widget title underline */
.widget-title:after {
  background: #E8751A !important;
}

/* -------------------------------------------------------------
   16. CARD ED ELEMENTI HOVER
   ------------------------------------------------------------- */

/* Card speaker / team */
.speaker-card:hover,
.team-card:hover,
.speaker-item:hover,
.team-item:hover,
[class*="-card"]:hover,
[class*="-item"]:hover {
  --evaton-primary-color: #E8751A;
  border-color: #E8751A !important;
}

/* Card con top border colorata */
[class*="-card"].style-border,
[class*="-item"].style-border {
  border-top-color: #E8751A !important;
}

/* Overlay su hover card */
[class*="-item"]:hover [class*="-overlay"],
[class*="-card"]:hover [class*="-overlay"] {
  background-color: rgba(232, 117, 26, 0.85) !important;
}

/* Numero contatore */
.counter-item .count,
.fact-item .count,
[class*="-counter"] .number,
[class*="-fact"] .number {
  color: #E8751A !important;
}

/* -------------------------------------------------------------
   17. BLOG E CATEGORIE
   ------------------------------------------------------------- */

/* Tag / categoria articoli */
.post-tag,
.post-category,
.blog-tag,
.blog-category,
.cat-item a:hover,
.widget_categories ul li a:hover,
[class*="post-cat"],
[class*="entry-cat"] {
  color: #E8751A !important;
}

/* Tag con background */
.post-tag.filled,
.tag-filled,
[class*="tag-"].bg {
  background-color: #E8751A !important;
  color: #ffffff !important;
}

/* Data articoli */
.post-date a:hover,
.entry-date a:hover {
  color: #E8751A !important;
}

/* "Leggi di più" */
.read-more,
.more-link,
[class*="read-more"] {
  color: #E8751A !important;
}

.read-more:hover,
.more-link:hover,
[class*="read-more"]:hover {
  color: #4A8C2A !important;
}

/* -------------------------------------------------------------
   18. FORM E INPUT
   ------------------------------------------------------------- */

input:focus,
select:focus,
textarea:focus,
.form-control:focus,
.nice-select:focus {
  border-color: #E8751A !important;
  -webkit-box-shadow: 0 0 0 2px rgba(232, 117, 26, 0.2) !important;
  box-shadow: 0 0 0 2px rgba(232, 117, 26, 0.2) !important;
}

/* Checkbox e radio */
input[type="checkbox"]:checked,
input[type="radio"]:checked {
  accent-color: #E8751A !important;
}

/* -------------------------------------------------------------
   19. FOOTER
   ------------------------------------------------------------- */

.main-footer,
.evaton-site-footer,
.site-footer {
  background-color: #1A1A1A !important;
  color: #ffffff;
}

/* Link footer */
.main-footer a,
.evaton-site-footer a,
.site-footer a {
  color: rgba(255, 255, 255, 0.8);
}

.main-footer a:hover,
.evaton-site-footer a:hover,
.site-footer a:hover {
  color: #E8751A !important;
}

/* Widget title nel footer */
.main-footer .widget-title,
.site-footer .widget-title,
.footer-widget .widget-title {
  color: #ffffff !important;
}

/* Footer bottom border */
.footer-bottom,
.main-footer .footer-bottom {
  border-top-color: rgba(232, 117, 26, 0.3) !important;
}

/* Social icons footer */
.footer-social a:hover,
.social-links a:hover,
[class*="social"] a:hover {
  background-color: #E8751A !important;
  color: #ffffff !important;
  border-color: #E8751A !important;
}

/* -------------------------------------------------------------
   20. PAGINATION
   ------------------------------------------------------------- */

.pagination li.active a,
.pagination li span:not(.dots),
.pagination li:hover:not(.disabled) a,
.wp-block-query-pagination-numbers .current,
.wp-block-query-pagination-numbers a:hover {
  background: #E8751A !important;
  border-color: #E8751A !important;
  color: #ffffff !important;
}

/* -------------------------------------------------------------
   21. SCROLL TOP BUTTON
   ------------------------------------------------------------- */

.scroll-to-top,
.back-to-top,
#scroll-top,
.scrolltop {
  background-color: #E8751A !important;
  border-color: #E8751A !important;
  color: #ffffff !important;
}

.scroll-to-top:hover,
.back-to-top:hover,
#scroll-top:hover,
.scrolltop:hover {
  background-color: #4A8C2A !important;
  border-color: #4A8C2A !important;
}

/* -------------------------------------------------------------
   22. BREADCRUMB
   ------------------------------------------------------------- */

.breadcrumb-item.active,
.breadcrumb-item a:hover,
nav[aria-label="breadcrumb"] a:hover {
  color: #E8751A !important;
}

/* -------------------------------------------------------------
   23. TABS E ACCORDION
   ------------------------------------------------------------- */

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link,
.nav-pills .nav-link.active {
  background-color: #E8751A !important;
  border-color: #E8751A !important;
  color: #ffffff !important;
}

.nav-tabs .nav-link:hover,
.nav-pills .nav-link:hover {
  color: #E8751A !important;
}

.accordion-button:not(.collapsed) {
  color: #E8751A !important;
  border-color: #E8751A !important;
  background-color: rgba(232, 117, 26, 0.05) !important;
}

/* -------------------------------------------------------------
   24. PRELOADER
   ------------------------------------------------------------- */

.preloader,
.loader,
#preloader {
  background-color: #1A1A1A !important;
}

.preloader-inner,
.loader-inner,
[class*="preloader-"] span,
[class*="loader-"] span {
  background-color: #E8751A !important;
  border-color: #E8751A transparent transparent transparent !important;
}

/* -------------------------------------------------------------
   25. PROGRESS BAR / SKILLBAR FILL
   ------------------------------------------------------------- */

.skillbar-bar,
.progress-bar,
[class*="progress-"] .fill,
.bar-fill {
  background-color: #E8751A !important;
}

/* -------------------------------------------------------------
   26. TOOLTIP E POPOVER
   ------------------------------------------------------------- */

.tooltip.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before,
.tooltip.bs-tooltip-top .tooltip-arrow::before {
  border-top-color: #E8751A !important;
}

/* -------------------------------------------------------------
   27. TESTO COLORE PRIMARIO
   ------------------------------------------------------------- */

.text-primary,
.text-color-primary,
[class*="text-primary"] {
  color: #E8751A !important;
}

.text-secondary,
.text-color-secondary,
[class*="text-secondary"] {
  color: #4A8C2A !important;
}

/* mark/highlight */
mark {
  color: #E8751A !important;
}

/* -------------------------------------------------------------
   28. BORDI CON COLORE PRIMARIO
   ------------------------------------------------------------- */

.border-primary,
[class*="border-primary"] {
  border-color: #E8751A !important;
}

.border-secondary,
[class*="border-secondary"] {
  border-color: #4A8C2A !important;
}

/* -------------------------------------------------------------
   29. LIST STYLE (icone elenco puntato)
   ------------------------------------------------------------- */

.list-style-one li::before,
.list-style-two li i,
.list-check li::before,
[class*="list-style"] li i,
[class*="list-style"] li::before {
  color: #E8751A !important;
}

/* -------------------------------------------------------------
   30. SPEAKER / EVENTI SPECIFICI
   ------------------------------------------------------------- */

/* Card speaker - badge sessione */
.speaker-card .session,
.speaker-item .session,
[class*="speaker"] .session {
  background-color: #E8751A !important;
  color: #ffffff !important;
}

/* Card evento - badge data */
.event-card .date,
.event-item .date,
[class*="event"] .date,
.events-area .date {
  background-color: #E8751A !important;
  color: #ffffff !important;
}

/* Ticket / pricing highlight */
.pricing-plan-item:hover,
.pricing-plan-item.active {
  background-color: #E8751A !important;
}

/* -------------------------------------------------------------
   31. WOOCOMMERCE (se attivo)
   ------------------------------------------------------------- */

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce .cart .button,
.woocommerce .wc-proceed-to-checkout .checkout-button {
  background-color: #E8751A !important;
  color: #ffffff !important;
  border-color: #E8751A !important;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
  background-color: #4A8C2A !important;
  border-color: #4A8C2A !important;
}

.woocommerce span.onsale,
.woocommerce .price ins,
.woocommerce .widget_price_filter .ui-slider .ui-slider-range {
  background-color: #E8751A !important;
  color: #ffffff !important;
}

/* =============================================================
   MAIN SLIDER — CORREZIONI
   Overlay nero 50% RIMOSSO su richiesta cliente: dava una patina
   scura sull'immagine dell'hero. La leggibilita' del testo e'
   garantita dalla foto dedicata (chiara) + testo hero scuro.
   ============================================================= */

/* Garantisce che il contenuto testo rimanga sopra l'immagine */
.single-slide .slider-content {
  position: relative;
  z-index: 1;
}

/* =============================================================
   PORTFOLIO — VARIABILI & RESET
   ============================================================= */
:root {
  --p-primary:    #E8751A;
  --p-secondary:  #4A8C2A;
  --p-accent:     #8DC63F;
  --p-text:       #2D2D2D;
  --p-bg-light:   #f8f8f8;
  --p-white:      #ffffff;
  --p-radius:     10px;
  --p-transition: 0.3s ease;
}

/* =============================================================
   HERO SINGLE
   ============================================================= */
.portfolio-hero {
  position: relative;
  min-height: 420px;
  display: flex;
  align-items: flex-end;
  background-size: cover;
  background-position: center;
  background-color: var(--p-text);
  padding: 80px 0 48px;
}

.portfolio-hero__overlay {
  /* Patina scura su tutto l'hero RIMOSSA: la leggibilita' del testo e'
     garantita dallo scrim dietro .portfolio-hero__text. */
  display: none;
}

.portfolio-hero .container {
  position: relative;
  z-index: 1;
}

/* Scrim semi-trasparente dietro al testo dell'hero: rende il titolo
   leggibile su qualsiasi foto (chiara o scura). */
.portfolio-hero__text {
  display: inline-block;
  max-width: 100%;
  background: rgba(0, 0, 0, 0.30);
  padding: 22px 30px;
  border-radius: 12px;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

.portfolio-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: 18px;
}

.portfolio-breadcrumb a {
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  transition: color var(--p-transition);
}
.portfolio-breadcrumb a:hover { color: var(--p-primary); }
.portfolio-breadcrumb .sep { color: rgba(255, 255, 255, 0.5); }

.portfolio-hero__title {
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 700 !important;      /* leggibilita' sull'immagine (vince sul grigio globale) */
  color: #ffffff !important;        /* bianco: leggibile sullo scrim su qualsiasi foto */
  margin: 0 0 16px;
  line-height: 1.2;
  max-width: 760px;
}

.portfolio-hero__badge {
  display: inline-block;
  background: var(--p-primary);
  color: var(--p-white);
  font-size: 13px;
  font-weight: 600;
  padding: 5px 16px;
  border-radius: 50px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* =============================================================
   INTRO BAR
   ============================================================= */
.portfolio-intro-bar {
  background: var(--p-bg-light);
  border-bottom: 1px solid #e8e8e8;
  padding: 28px 0;
}

.portfolio-intro-bar__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

@media (max-width: 640px) {
  .portfolio-intro-bar__grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

.portfolio-intro-bar__item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 20px;
  border-left: 3px solid var(--p-primary);
}

.portfolio-intro-bar__label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--p-primary);
}

.portfolio-intro-bar__value {
  font-size: 16px;
  font-weight: 600;
  color: var(--p-text);
}

.portfolio-intro-bar__value a {
  color: var(--p-secondary);
  text-decoration: none;
  transition: color var(--p-transition);
}
.portfolio-intro-bar__value a:hover { color: var(--p-primary); }

/* =============================================================
   CORPO: DESCRIZIONE + ATTIVITÀ
   ============================================================= */
.portfolio-body {
  padding: 72px 0;
}

.portfolio-body__grid {
  display: grid;
  grid-template-columns: 60% 1fr;
  gap: 40px;
  align-items: start;
}

@media (max-width: 900px) {
  .portfolio-body__grid {
    grid-template-columns: 1fr;
  }
}

.portfolio-wysiwyg {
  font-size: 16px;
  line-height: 1.8;
  color: var(--p-text);
}
.portfolio-wysiwyg h2,
.portfolio-wysiwyg h3 {
  color: var(--p-text);
  margin-top: 1.5em;
  margin-bottom: 0.5em;
}
.portfolio-wysiwyg p { margin-bottom: 1.2em; }
.portfolio-wysiwyg ul,
.portfolio-wysiwyg ol {
  padding-left: 1.5rem;
  margin-bottom: 1.2em;
}
.portfolio-wysiwyg a {
  color: var(--p-primary);
  text-decoration: underline;
}

/* Box attività (verde) */
.portfolio-activities-box {
  background: var(--p-secondary);
  border-radius: var(--p-radius);
  padding: 32px 28px;
  position: sticky;
  top: 100px;
}

.portfolio-activities-box__title {
  font-size: 1.1rem;
  font-weight: 700 !important;   /* bold, vince sul peso 500 globale */
  color: #ffffff !important;     /* bianco sul verde (vince sul grigio globale) */
  margin: 0 0 20px;
  padding-bottom: 12px;
  border-bottom: 2px solid rgba(255, 255, 255, 0.25);
}

.portfolio-activities-box__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.portfolio-activities-box__list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.92);
}

.portfolio-check-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 2px;
}

/* =============================================================
   GALLERIA
   ============================================================= */
.portfolio-gallery {
  background: var(--p-bg-light);
  padding: 72px 0;
}

.portfolio-section-title {
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  font-weight: 700;
  color: var(--p-text);
  margin: 0 0 36px;
  padding-bottom: 14px;
  border-bottom: 3px solid var(--p-primary);
  display: inline-block;
}

.portfolio-gallery__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

@media (max-width: 768px) {
  .portfolio-gallery__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .portfolio-gallery__grid {
    grid-template-columns: 1fr;
  }
}

.portfolio-gallery__item {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: var(--p-radius);
  aspect-ratio: 4 / 3;
  background: #111;
}

.portfolio-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
  filter: none !important;
  mix-blend-mode: normal !important;
  opacity: 1 !important;
}

.portfolio-gallery__item:hover img {
  transform: scale(1.06);
}

.portfolio-gallery__item-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--p-transition);
  color: var(--p-white);
}

.portfolio-gallery__item-overlay svg {
  width: 32px;
  height: 32px;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.portfolio-gallery__item:hover .portfolio-gallery__item-overlay {
  background: rgba(0, 0, 0, 0.35) !important;
}

.portfolio-gallery__item:hover .portfolio-gallery__item-overlay svg {
  opacity: 1;
  transform: scale(1);
}

/* =============================================================
   RISULTATI
   ============================================================= */
.portfolio-results {
  background: var(--p-bg-light);
  padding: 72px 0;
}

.portfolio-results__content {
  max-width: 820px;
}

/* Risultati "inline" nella colonna sinistra del corpo (sotto la descrizione),
   per riempire lo spazio accanto al box Attivita. */
.portfolio-results-inline {
  margin-top: 32px;
  padding-top: 28px;
  border-top: 1px solid #e8e8e8;
}
.portfolio-results-inline__title {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--p-text);
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 3px solid var(--p-primary);
  display: inline-block;
}

/* =============================================================
   CARD PORTFOLIO (usata sia in archivio che correlati)
   ============================================================= */
.portfolio-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

@media (max-width: 900px) {
  .portfolio-cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .portfolio-cards-grid {
    grid-template-columns: 1fr;
  }
}

.portfolio-card {
  background: var(--p-white);
  border-radius: var(--p-radius);
  overflow: hidden;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06);
  transition: transform var(--p-transition), box-shadow var(--p-transition);
}

.portfolio-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

.portfolio-card__link {
  display: block;
  text-decoration: none;
  color: inherit;
  height: 100%;
}

.portfolio-card__image-wrap {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: #e0e0e0;
}

.portfolio-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
  display: block;
}

.portfolio-card:hover .portfolio-card__image {
  transform: scale(1.05);
}

.portfolio-card__image--placeholder {
  background: linear-gradient(135deg, var(--p-secondary) 0%, var(--p-primary) 100%);
  width: 100%;
  height: 100%;
}

.portfolio-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    transparent 40%,
    rgba(0, 0, 0, 0.45) 100%
  );
  transition: background var(--p-transition);
}

.portfolio-card:hover .portfolio-card__overlay {
  background: linear-gradient(
    180deg,
    transparent 20%,
    rgba(0, 0, 0, 0.6) 100%
  );
}

.portfolio-card__category {
  position: absolute;
  top: 14px;
  left: 14px;
  background: var(--p-primary);
  color: var(--p-white);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 4px 12px;
  border-radius: 50px;
  z-index: 1;
}

.portfolio-card__year {
  position: absolute;
  top: 14px;
  right: 14px;
  background: rgba(0, 0, 0, 0.55);
  color: var(--p-white);
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 50px;
  z-index: 1;
}

.portfolio-card__content {
  padding: 22px 20px 20px;
}

.portfolio-card__title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--p-text);
  margin: 0 0 8px;
  line-height: 1.3;
  transition: color var(--p-transition);
}

.portfolio-card:hover .portfolio-card__title {
  color: var(--p-primary);
}

.portfolio-card__subtitle {
  font-size: 14px;
  color: #666;
  line-height: 1.5;
  margin: 0 0 14px;
}

.portfolio-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--p-primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: gap var(--p-transition);
}

.portfolio-card:hover .portfolio-card__cta { gap: 10px; }

.portfolio-card__cta svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* =============================================================
   CORRELATI
   ============================================================= */
.portfolio-related {
  padding: 72px 0;
}

/* =============================================================
   FOOTER CTA (banda arancione)
   ============================================================= */
.portfolio-footer-cta {
  background: var(--p-primary);
  padding: 64px 0;
  text-align: center;
}

.portfolio-footer-cta__inner {
  max-width: 600px;
  margin: 0 auto;
}

.portfolio-footer-cta__title {
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  font-weight: 700;
  color: var(--p-white);
  margin: 0 0 12px;
}

.portfolio-footer-cta__text {
  color: rgba(255, 255, 255, 0.85);
  font-size: 16px;
  margin: 0 0 28px;
}

.portfolio-footer-cta__btn {
  display: inline-block;
  background: var(--p-white);
  color: var(--p-primary) !important;
  font-weight: 700;
  padding: 14px 36px;
  border-radius: 50px;
  text-decoration: none;
  font-size: 16px;
  transition: background var(--p-transition), color var(--p-transition);
}

.portfolio-footer-cta__btn:hover {
  background: var(--p-text);
  color: var(--p-white) !important;
}

/* =============================================================
   ARCHIVIO: HEADER
   ============================================================= */
.portfolio-archive-header {
  position: relative;
  background-color: #2D2D2D;
  background-size: cover;
  background-position: center;
  padding: 120px 0 64px;
  text-align: center;
}

.portfolio-archive-header__overlay {
  position: absolute;
  inset: 0;
  background: rgba(26, 26, 26, 0.72);
  z-index: 0;
}

.portfolio-archive-header__title {
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 700;
  color: var(--p-white);
  margin: 0 0 16px;
}

.portfolio-archive-header__subtitle {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.75);
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
}

/* =============================================================
   ARCHIVIO: FILTRI
   ============================================================= */
.portfolio-filters {
  background: var(--p-white);
  border-bottom: 1px solid #e8e8e8;
  padding: 20px 0;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.portfolio-filters__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.portfolio-filter-btn {
  display: inline-block;
  padding: 8px 20px;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  color: var(--p-text);
  border: 2px solid #ddd;
  transition: all var(--p-transition);
  background: var(--p-white);
}

.portfolio-filter-btn:hover,
.portfolio-filter-btn--active {
  background: var(--p-primary);
  border-color: var(--p-primary);
  color: var(--p-white) !important;
}

/* =============================================================
   ARCHIVIO: GRIGLIA
   ============================================================= */
.portfolio-archive-grid-section {
  padding: 64px 0 80px;
  background: var(--p-bg-light);
}

/* =============================================================
   PAGINAZIONE
   ============================================================= */
.portfolio-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 56px;
}

.portfolio-pagination .page-numbers {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  color: var(--p-text);
  border: 2px solid #ddd;
  background: var(--p-white);
  transition: all var(--p-transition);
}

.portfolio-pagination .page-numbers.current,
.portfolio-pagination .page-numbers:hover {
  background: var(--p-primary);
  border-color: var(--p-primary);
  color: var(--p-white);
}

.portfolio-pagination .page-numbers svg {
  width: 18px;
  height: 18px;
}

/* =============================================================
   VUOTO
   ============================================================= */
.portfolio-empty {
  text-align: center;
  padding: 80px 20px;
  color: #888;
  font-size: 18px;
}

.portfolio-empty .theme-btn {
  display: inline-block;
  margin-top: 24px;
  background: var(--p-primary);
  color: var(--p-white);
  padding: 12px 32px;
  border-radius: 50px;
  text-decoration: none;
  font-weight: 600;
  transition: background var(--p-transition);
}

.portfolio-empty .theme-btn:hover {
  background: var(--p-secondary);
}

/* =============================================================
   FIX HOMEPAGE — pz-services cards
   Il widget pz-portfolio ha CSS: .pz-card { opacity:0 } per
   le sue animazioni JS. Siccome entrambe le sezioni usano
   .pz-card, il rule bleeding nasconde anche le service card.
   ============================================================= */
.pz-services .pz-card {
  opacity: 1 !important;
  transform: none !important;
}

/* =============================================================
   ALLEGGERIMENTO TIPOGRAFICO HOMEPAGE — livello "medio"
   Richiesta cliente: home ancora troppo carica.
   - pesi heading 700 -> 500 (medium)
   - dimensioni ridotte ~30%
   - rimosso il MAIUSCOLO da hero e conf-text
   - piu' "aria": line-height e letter-spacing
   Tutto override del child: reversibile, nessun impatto su Elementor.
   ============================================================= */

/* Heading globali: da bold 700 a medium 500 */
h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6,
.event-two-item .date b,
.event-three-item .date b,
.tab-style-one li a,
blockquote,
.counting-part,
.marquee-wrap {
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
}

/* h1 / h2 / h3: dimensioni ridotte con clamp responsivo */
h1, .h1 {
  font-size: clamp(2.2rem, 5vw, 4rem) !important;    /* 96px -> ~64px max */
  line-height: 1.2 !important;
}
h2, .h2,
.event-two-item .date b,
.event-three-item .date b {
  font-size: clamp(1.6rem, 3vw, 2.2rem) !important;  /* 52px -> ~35px max */
  line-height: 1.25 !important;
}
h3, .h3 {
  font-size: clamp(1.3rem, 2.2vw, 1.7rem) !important; /* 36px -> ~27px max */
  line-height: 1.3 !important;
}

/* Titolo grande dello slider hero: 140px -> ~72px, niente maiuscolo */
.single-slide .slider-content-inner .title {
  font-weight: 500 !important;
  line-height: 1.15 !important;
  text-transform: none !important;
  letter-spacing: -0.015em !important;
}
@media only screen and (min-width: 1400px) {
  .single-slide .slider-content-inner .title {
    font-size: 72px !important;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .single-slide .slider-content-inner .title {
    font-size: 64px !important;
  }
}
@media only screen and (max-width: 1199px) {
  .single-slide .slider-content-inner .title {
    font-size: 52px !important;
  }
}
@media only screen and (max-width: 767px) {
  .single-slide .slider-content-inner .title {
    font-size: 38px !important;
  }
}

/* Testo "conf" ruotato nell'hero: piu' contenuto, niente maiuscolo */
.single-slide .slider-content-inner .conf-text {
  font-weight: 500 !important;
  text-transform: none !important;
}

/* Sottotitoli/eyebrow: peso ridotto */
.subtitle,
.section-title .subtitle {
  font-weight: 500 !important;
}

/* Titoli di sezione (.section-title .title) coerenti con gli heading */
.section-title .title {
  font-weight: 500 !important;
}

/* Pulsanti: meno "grassi" */
.theme-btn,
a.theme-btn {
  font-weight: 500 !important;
}

/* =============================================================
   ALLEGGERIMENTO SFONDI HOMEPAGE — OPZIONE A
   Richiesta cliente: il fondo nero e' troppo pesante.
   Converte la sezione "Event" (.our-event-area, template event-one)
   da fondo nero (#1A1A1A) a chiaro, con testo scuro.
   L'hero slider resta scuro come unico accento (vedi Opzione C
   se in futuro si vuole schiarire anche quello).
   Le card .event-item hanno gia' fondo bianco proprio: invariate.
   ============================================================= */

/* Fondo sezione: da nero a panna chiaro (coerente con le altre sezioni) */
.our-event-area.bgc-black,
.our-event-area {
  background-color: #f8f8f8 !important;
}

/* Header sezione: ripristina testo scuro (prima era .text-white) */
.our-event-area .text-white,
.our-event-area .text-white * {
  color: var(--puzzle-text) !important;   /* #4A4A4A */
}
.our-event-area .text-white h1,
.our-event-area .text-white h2,
.our-event-area .text-white h3,
.our-event-area .text-white h4,
.our-event-area .text-white h5,
.our-event-area .text-white h6,
.our-event-area .text-white .title,
.our-event-area .section-title .title {
  color: #6C6F74 !important;   /* grigio della "P" del logo */
}

/* Sottotitolo/eyebrow: accento arancione brand invece del bianco */
.our-event-area .section-title .subtitle {
  color: var(--puzzle-primary) !important; /* #E8751A */
}

/* =============================================================
   ALLEGGERIMENTO SFONDI HOMEPAGE — OPZIONE C
   Schiarisce l'HERO slider (.main-slider-area, era bgc-black +
   text-white). L'immagine copre la slide, quindi non basta
   cambiare lo sfondo: si sovrappone un OVERLAY CHIARO (gradiente
   piu' denso a sinistra, sotto il testo; piu' tenue a destra, per
   lasciar intravedere le tessere colorate) e si porta il testo
   dell'hero a scuro. Colori impostati in modo esplicito.
   NB: si applica a TUTTE le slide, incluse le demo residue da
   rimuovere (slide 1-3 puntano a immagini esterne).
   ============================================================= */

/* Base non piu' nera (comunque coperta dall'immagine) */
.main-slider-area.bgc-black {
  background-color: #f8f8f8 !important;
}

/* NB: velo chiaro (overlay) RIMOSSO su richiesta cliente — la
   leggibilita' sara' garantita dalla foto dedicata che fornira'
   il cliente. Le regole di testo scuro qui sotto restano valide
   solo se la nuova foto e' chiara; altrimenti vanno riportate a
   bianco. */

/* Il contenuto resta sopra l'immagine */
.main-slider-area .single-slide .slider-content-inner {
  z-index: 2;
}

/* Neutralizza l'effetto "coverflow" di Swiper sull'hero: sulle slide
   non-frontali Swiper aggiunge ombre nere (.swiper-slide-shadow-*) e
   riduce opacita'/applica transform -> davano una PATINA SCURA sulle
   slide 2/3/4 (stessa foto della slide 1 ma piu' scura). */
.main-slider-area .swiper-slide {
  opacity: 1 !important;
  transform: none !important;
}
.main-slider-area .swiper-slide-shadow-left,
.main-slider-area .swiper-slide-shadow-right,
.main-slider-area .swiper-slide-shadow-top,
.main-slider-area .swiper-slide-shadow-bottom,
.main-slider-area .swiper-slide [class*="swiper-slide-shadow"] {
  display: none !important;
  background: none !important;
  opacity: 0 !important;
}

/* --- CARD panna dietro il testo (leggibilita' su foto colorata) ---
   Pannello semi-trasparente dietro sottotitolo+titolo+bottoni.
   position:static: cosi' il badge .conf-text (assoluto) si ancora a
   .slider-content (full width) e resta sulla foto a destra, fuori dalla card. */
.main-slider-area .single-slide .slider-content-inner {
  position: static !important;
  max-width: 880px;
  padding: 52px 58px !important;   /* annulla i 100px/30px del tema, card piu' ampia/orizzontale */
  background: rgba(248, 248, 248, 0.72);
  border-radius: 16px;
  -webkit-box-shadow: 0 12px 40px rgba(0, 0, 0, 0.14);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.14);
  /* NB: niente backdrop-filter/filter/transform qui: creerebbero un
     containing block e intrappolerebbero il badge .conf-text assoluto. */
}
@media only screen and (max-width: 575px) {
  .main-slider-area .single-slide .slider-content-inner {
    padding: 30px 28px !important;
    border-radius: 12px;
  }
}

/* --- Testo hero: da bianco a scuro (esplicito) --- */
.main-slider-area .single-slide .slider-content-inner .title {
  color: #6C6F74 !important;    /* grigio della "P" del logo */
}
.main-slider-area .single-slide .slider-content-inner .subtitle {
  color: var(--puzzle-primary) !important; /* accento arancione */
  opacity: 1 !important;
}
.main-slider-area .single-slide .slider-content-inner .video-play-text,
.main-slider-area .single-slide .slider-content-inner .video-play-text span {
  color: var(--puzzle-dark) !important;
}

/* Conf-text (badge ruotato con doppia cornice): mostrato a DESTRA sulla foto.
   Ora che la card non ha piu' backdrop-filter, .slider-content-inner (static)
   non e' containing block: il badge assoluto si ancora a .slider-content
   (full width) e resta sulla foto a destra, fuori dalla card. Stile bianco. */
.main-slider-area .single-slide .conf-text {
  display: block !important;
  right: 7% !important;
  bottom: 22% !important;
  color: #ffffff !important;
}
.main-slider-area .single-slide .conf-text:before,
.main-slider-area .single-slide .conf-text:after {
  border-color: #ffffff !important;
}
/* Badge nascosto su tablet e mobile (<= 991px) */
@media only screen and (max-width: 991px) {
  .main-slider-area .single-slide .conf-text {
    display: none !important;
  }
}

/* Contatore/progress dello slider: reso scuro per leggibilita' sul chiaro */
.main-slider-area .slider-object,
.main-slider-area .slider-object .total-slide,
.main-slider-area .slider-object .swiper-counter-wrap {
  color: var(--puzzle-dark) !important;
}

/* =============================================================
   HEADER PIU' ARIOSO — da nero a panna chiaro
   Richiesta cliente: header nero troppo pesante.
   L'header home e' `.main-header.white-menu.menu-absolute` con
   sfondo gradiente nero e testo bianco. Lo portiamo a fondo panna
   #F8F8F8 (coerente con hero/Event) e testo scuro.
   NB: il logo e' un'immagine caricata: se la versione attuale e'
   pensata per fondo scuro, valutare un logo adatto al chiaro.
   ============================================================= */

/* Sfondo header: da gradiente nero a panna chiaro + separatore */
.main-header.white-menu .header-upper {
  background: #F8F8F8 !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
}

/* Stato sticky (scroll): resta chiaro con leggera ombra */
.main-header.white-menu.fixed-header .header-upper {
  background: #F8F8F8 !important;
  -webkit-box-shadow: 0 2px 20px rgba(0, 0, 0, 0.06) !important;
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.06) !important;
}

/* Link menu: da bianco a scuro, hover arancione brand
   (stessa specificita' della regola padre, ma caricata dopo -> vince) */
@media only screen and (min-width: 992px) {
  .main-header.white-menu .navbar-collapse > ul > li > a,
  .main-header.white-menu .navbar-collapse > ul > li > .dropdown-btn {
    color: #6C6F74 !important; /* grigio della "P" del logo */
  }
  .main-header.white-menu .navbar-collapse > ul > li > a:hover,
  .main-header.white-menu .navbar-collapse > ul > li.current-menu-item > a {
    color: var(--puzzle-primary) !important;
  }
}

/* Numero di telefono: testo scuro (il cerchio verde resta invariato) */
.main-header .header-number {
  color: var(--puzzle-dark) !important;
}

/* Toggle mobile: barre scure su fondo chiaro */
.main-header.white-menu .navbar-toggle .icon-bar {
  background: var(--puzzle-dark) !important;
}

/* =============================================================
   COLORE TITOLI (h1-h6) -> grigio della "P" del logo (#6C6F74)
   Solo dove il titolo e' scuro/nero: nelle sezioni a fondo scuro
   del tema (.text-white, es. FOOTER) i titoli restano chiari.
   Hero ed Event hanno la classe .text-white ma sfondo chiaro:
   i loro titoli sono gia' forzati a #6C6F74 con selettori piu'
   specifici (vedi Opzione A/C sopra), quindi restano grigi.
   ============================================================= */
h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
  color: #6C6F74 !important;
}

/* Sezioni scure: i titoli restano chiari (footer, banner scuri, ecc.) */
.text-white h1, .text-white .h1,
.text-white h2, .text-white .h2,
.text-white h3, .text-white .h3,
.text-white h4, .text-white .h4,
.text-white h5, .text-white .h5,
.text-white h6, .text-white .h6 {
  color: #ffffff !important;
}