.elementor-widget-breadcrumbs{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-270 .elementor-element.elementor-element-67c47245{font-family:"Outfit", Sans-serif;font-size:13px;font-weight:500;}.elementor-theme-builder-content-area{height:400px;}.elementor-location-header:before, .elementor-location-footer:before{content:"";display:table;clear:both;}/* Start custom CSS *//* =========================================================
   RAOUL RUSSO — HEADER
   Elementor v4 Atomic / Custom CSS
   Ambiti coperti: stato scrolled, crossfade logo, colore icone
   social (currentColor), colori link in base allo stato, e le due
   varianti responsive reali (Home vs pagine interne) tramite le
   classi body di WordPress.
   ========================================================= */

/* ---- Header: gradient verticale di protezione (stato iniziale) ----
   Distinto dal gradient orizzontale della Hero. Non serializzabile
   come proprieta Atomic nativa nello schema 4.2.4, gestito qui. ---- */
header[data-rr-header] {
  background:
    linear-gradient(
      180deg,
      color-mix(in oklch, #0B2742 68%, transparent) 0%,
      color-mix(in oklch, #0B2742 30%, transparent) 55%,
      transparent 100%
    );

  transition:
    background 280ms ease,
    backdrop-filter 280ms ease;
}

/* ---- Stato scrolled ---- */
header[data-rr-header].is-scrolled {
  background: color-mix(in oklch, #FFFFFF 94%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* ---- Logo: crossfade bianco -> navy ---- */
[data-rr-logo] { transition: opacity 220ms ease; }
[data-rr-logo="navy"] { opacity: 0; }
[data-rr-header].is-scrolled [data-rr-logo="white"] { opacity: 0; }
[data-rr-header].is-scrolled [data-rr-logo="navy"] { opacity: 1; }

/* ---- Nav / Contatti: colore in base allo stato ---- */
[data-rr-nav-link], [data-rr-header-contact] {
  color: color-mix(in oklch, #FFFFFF 92%, transparent);
  transition: color 200ms ease;
}
[data-rr-nav-link]:hover, [data-rr-nav-link]:focus-visible,
[data-rr-header-contact]:hover, [data-rr-header-contact]:focus-visible {
  color: #FFFFFF;
}
[data-rr-header].is-scrolled [data-rr-nav-link],
[data-rr-header].is-scrolled [data-rr-header-contact] {
  color: #5A6B7D;
}
[data-rr-header].is-scrolled [data-rr-nav-link]:hover,
[data-rr-header].is-scrolled [data-rr-nav-link]:focus-visible,
[data-rr-header].is-scrolled [data-rr-header-contact]:hover,
[data-rr-header].is-scrolled [data-rr-header-contact]:focus-visible {
  color: #0B2742;
}

[data-rr-header-contact] {
  border-bottom: 1px solid color-mix(in oklch, #FFFFFF 92%, transparent);
  transition: border-color 200ms ease, border-bottom-width 120ms ease, color 200ms ease;
}
[data-rr-header-contact]:hover { border-bottom-width: 3px; }
[data-rr-header].is-scrolled [data-rr-header-contact] { border-bottom-color: #0B2742; }

/* ---- Social: un solo SVG per icona (currentColor).
   Il colore viene controllato dal wrapper e propagato anche agli
   elementi interni dell'SVG, così Facebook e Instagram seguono
   correttamente lo stato iniziale e lo stato scrolled. ---- */
[data-rr-social-icon] {
  color: #FFFFFF;
  transition: color 180ms ease;
}

[data-rr-social-icon] svg {
  color: inherit;
  fill: currentColor !important;
}

/* Mantiene intatti gli elementi volutamente "none", ma neutralizza
   eventuali fill/stroke hardcoded presenti nell'SVG Instagram. */
[data-rr-social-icon] svg [fill]:not([fill="none"]) {
  fill: currentColor !important;
}
[data-rr-social-icon] svg [stroke]:not([stroke="none"]) {
  stroke: currentColor !important;
}

[data-rr-header-social-link]:hover [data-rr-social-icon],
[data-rr-header-social-link]:focus-visible [data-rr-social-icon] {
  color: #FFFFFF;
}

[data-rr-header].is-scrolled [data-rr-social-icon] {
  color: #5A6B7D;
}

[data-rr-header].is-scrolled [data-rr-header-social-link]:hover [data-rr-social-icon],
[data-rr-header].is-scrolled [data-rr-header-social-link]:focus-visible [data-rr-social-icon] {
  color: #0B2742;
}

[data-rr-header-social-link] { transition: background 180ms ease; }
[data-rr-header-social-link]:hover { background: color-mix(in oklch, #FFFFFF 16%, transparent); }
[data-rr-header].is-scrolled [data-rr-header-social-link]:hover { background: #E7F0F8; }

/* ---- Hamburger: e-svg Atomic unico, currentColor ---- */
[data-rr-menu-trigger] { transition: background 200ms ease, color 200ms ease; }
[data-rr-menu-trigger]:hover, [data-rr-menu-trigger]:focus-visible {
  background: color-mix(in oklch, #FFFFFF 16%, transparent);
}
[data-rr-header].is-scrolled [data-rr-menu-trigger] { color: #0B2742; }
[data-rr-header].is-scrolled [data-rr-menu-trigger]:hover,
[data-rr-header].is-scrolled [data-rr-menu-trigger]:focus-visible {
  background: #E7F0F8;
}

/* =========================================================
   RESPONSIVE — Header Theme Builder unico, due varianti reali
   distinte tramite le classi body di WordPress, come negli HTML
   Design Lock approvati (homepage vs pagine interne).
   ========================================================= */

/* ---- HOME (body.home): collasso unico a 1120px ---- */
@media (max-width: 1120px) {
  body.home [data-rr-header-inner] { min-height: 74px; grid-template-columns: 1fr auto; gap: 32px; }
  body.home [data-rr-header-logo] { width: 210px; }
  body.home [data-rr-nav] { display: none; }
  body.home [data-rr-header-contact] { display: none; }
  body.home [data-rr-header-social] { display: none; }
  body.home [data-rr-menu-trigger] { display: inline-flex; }
}
@media (max-width: 767px) {
  body.home [data-rr-header-inner] { min-height: 66px; gap: 12px; }
  body.home [data-rr-header-logo] { width: 172px; }
}

/* ---- Gutter Home: valori del suo Design Lock; pagine interne nei Local Styles ---- */
@media (min-width: 768px) and (max-width: 1024px) {
  body.home [data-rr-header-inner] { padding-inline: 40px; }
}
@media (max-width: 767px) {
  body.home [data-rr-header-inner] { padding-inline: 22px; }
  body.home [data-rr-header-actions] { gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  [data-rr-header],
  [data-rr-logo],
  [data-rr-social-icon],
  [data-rr-menu-trigger],
  [data-rr-header-contact],
  [data-rr-header-social-link] {
    transition: none;
  }
}


/* ---- Internal Page Hero — Yoast SEO Breadcrumbs ----
   Yoast gestisce gerarchia, URL e current item.
   Elementor gestisce soltanto la presentazione. */
[data-rr-breadcrumb] {
  width: 100%;
  min-width: 0;
}
[data-rr-breadcrumb] .elementor-widget-breadcrumbs {
  width: 100%;
  min-width: 0;
  margin: 0;
}
[data-rr-breadcrumb] .elementor-widget-breadcrumbs .elementor-widget-container {
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  color: rgba(255,255,255,.62);
  font-family: "Outfit", "Segoe UI", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.6;
  white-space: nowrap;
  text-overflow: ellipsis;
}
[data-rr-breadcrumb] .elementor-widget-breadcrumbs p {
  margin: 0;
  padding: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
[data-rr-breadcrumb] .elementor-widget-breadcrumbs a {
  color: inherit;
  text-decoration: none;
  transition: color 180ms ease;
}
[data-rr-breadcrumb] .elementor-widget-breadcrumbs a:hover,
[data-rr-breadcrumb] .elementor-widget-breadcrumbs a:focus-visible {
  color: #FFFFFF;
}
[data-rr-breadcrumb] .elementor-widget-breadcrumbs .breadcrumb_last,
[data-rr-breadcrumb] .elementor-widget-breadcrumbs [aria-current="page"] {
  color: rgba(255,255,255,.88);
}
@media (max-width: 767px) {
  [data-rr-breadcrumb] .elementor-widget-breadcrumbs .elementor-widget-container {
    font-size: 12px;
  }
}

/* =========================================================
   INTERNAL PAGE HERO — Bio / Contatti / Foto / Links / Video
   Dimensioni, clamp/calc e responsive nei Local Styles Atomic.
   CSS riservato a visibilita contestuale, decorazioni e motion.
   size/custom: schema e Size_Transformer ufficiali Elementor 4.2.4.
   Archivi e single futuri richiedono una gestione dedicata.
   ========================================================= */

/* Nessuno spazio Home frontend; Hero modificabile nel canvas Elementor.
   !important protegge la condizione dal display dei Local Styles. */
[data-rr-internal-hero] { display: none !important; }
body.page:not(.home):not(.front-page) [data-rr-internal-hero],
body.elementor-editor-active [data-rr-internal-hero] { display: flex !important; }

[data-rr-internal-hero] {
  isolation: isolate;
  background:
    radial-gradient(ellipse 68% 118% at 82% 38%, color-mix(in oklch, oklch(0.95069 0.01446 244.72) 17%, transparent) 0, transparent 62%),
    radial-gradient(ellipse 46% 76% at 96% 94%, color-mix(in oklch, #E1C54A 9%, transparent) 0, transparent 70%),
    #0B2742;
}
[data-rr-internal-hero]::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: -260px;
  right: -420px;
  width: 680px;
  height: 560px;
  border: 1px solid color-mix(in oklch, oklch(0.95069 0.01446 244.72) 20%, transparent);
  outline: 1px solid color-mix(in oklch, oklch(0.95069 0.01446 244.72) 13%, transparent);
  outline-offset: 28px;
  border-radius: 50%;
  opacity: 0.42;
  transform: rotate(-8deg);
  pointer-events: none;
}
[data-rr-internal-hero]::after {
  content: "";
  position: absolute;
  z-index: 0;
  right: -8%;
  bottom: 64px;
  width: 54%;
  height: 78px;
  background: #E1C54A;
  opacity: 0.075;
  clip-path: polygon(1% 34%, 16% 18%, 38% 29%, 61% 12%, 84% 25%, 100% 15%, 98% 70%, 76% 84%, 51% 70%, 25% 88%, 3% 72%);
  transform: rotate(-3deg) skewX(-8deg);
  pointer-events: none;
}
[data-rr-page-hero-photo-wrapper] { pointer-events: none; }
[data-rr-page-hero-photo] { filter: saturate(1.03) contrast(1.03); }
[data-rr-hero-h1] { text-wrap: balance; }
[data-rr-hero-lead] { text-wrap: pretty; }

@media (min-width: 768px) and (max-width: 1024px) {
  [data-rr-internal-hero]::before { top: -230px; right: -280px; width: 500px; height: 400px; opacity: 0.35; outline-offset: 20px; }
  [data-rr-internal-hero]::after { right: -10%; bottom: 54px; width: 48%; height: 58px; opacity: 0.055; }
}
@media (max-width: 767px) {
  [data-rr-internal-hero] {
    background:
      radial-gradient(ellipse 92% 60% at 88% 78%, color-mix(in oklch, oklch(0.95069 0.01446 244.72) 12%, transparent) 0, transparent 64%),
      radial-gradient(ellipse 60% 34% at 100% 96%, color-mix(in oklch, #E1C54A 6%, transparent) 0, transparent 72%),
      #0B2742;
  }
  [data-rr-internal-hero]::before { top: -60px; right: -110px; bottom: auto; width: 260px; height: 220px; opacity: 0.3; outline-offset: 14px; }
  [data-rr-internal-hero]::after { right: -20%; bottom: 46px; width: 66%; height: 42px; opacity: 0.04; }
}

@keyframes rr-internal-hero-fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
[data-rr-breadcrumb], [data-rr-hero-h1], [data-rr-hero-lead] {
  opacity: 0;
  animation: rr-internal-hero-fade-up 600ms cubic-bezier(.22, .61, .36, 1) forwards;
}
[data-rr-breadcrumb] { animation-delay: 80ms; }
[data-rr-hero-h1] { animation-delay: 200ms; }
[data-rr-hero-lead] { animation-delay: 320ms; }
@media (prefers-reduced-motion: reduce) {
  [data-rr-breadcrumb], [data-rr-hero-h1], [data-rr-hero-lead] { animation: none; opacity: 1; transform: none; }
}/* End custom CSS */