/* ========================================================================
   COMPONENTS.CSS
   Componenti riutilizzabili: navbar, mobile menu, bottoni, CTA,
   footer e animazioni condivise.
======================================================================= */


/* ==========================================================================
   NAVBAR
========================================================================== */

.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--nav-h);
  background: rgba(255, 255, 255, 0.97);
  border-bottom: 1px solid rgba(15, 36, 64, 0.14);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  transition: box-shadow var(--transition-base);
}

.site-nav.scrolled {
  box-shadow: 0 2px 24px rgba(15, 36, 64, 0.07);
}

/* La barra usa tutta la larghezza dello schermo: cosi il nome sta vicino al
   bordo sinistro e il menu al bordo destro, invece di stringersi al centro. */
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  padding: 0 var(--pad-x);
  gap: 24px;
}

/* Il nome parte dove parte il testo della pagina sotto, come la fine del
   menu cade dove finisce il testo a destra. Il marchio della banca resta
   fuori, nel margine: i 134 pixel tolti sono la sua larghezza piu lo stacco. */
.nav-logo {
  margin-left: max(0px, calc((100vw - var(--max)) / 2 - 134px));
  display: flex;
  align-items: center;
  /* Piu aria fra il marchio della banca e il nome: sono due collegamenti
     diversi, uno porta al sito Fideuram e l'altro alla home. */
  gap: 26px;
  flex-shrink: 0;
}

.nav-company-link,
.nav-logo-text {
  display: flex;
  align-items: center;
  min-height: 44px;
}

.nav-company-logo {
  width: 108px;
  height: 26px;
  flex-shrink: 0;
  object-fit: contain;
  transition: opacity var(--transition-fast);
}

.nav-company-link:hover .nav-company-logo,
.nav-company-link:focus-visible .nav-company-logo {
  opacity: 0.7;
}

.nav-logo-text {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 400;
  color: var(--navy);
  letter-spacing: 0.03em;
  line-height: 1.2;
}

.nav-logo-text span {
  display: block;
  font-family: var(--font-ui);
  font-size: 0.76rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-mid);
}

/* Il menu finisce esattamente dove finisce il contenuto della pagina sotto:
   la fine di "Articoli" cade in linea con il bordo destro dei testi. */
.nav-links {
  display: flex;
  align-items: center;
  gap: 30px;
  margin-right: max(0px, calc((100vw - var(--max)) / 2));
  list-style: none;
}


.nav-links a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-bottom: 3px;
  white-space: nowrap;
  font-family: var(--font-ui);
  font-size: 0.86rem;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-mid);
  transition: color var(--transition-fast);
}

.nav-links a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--navy);
}

.nav-links a:hover::after,
.nav-links a.active::after {
  transform: scaleX(1);
}

.nav-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  flex-shrink: 0;
  white-space: nowrap;
  font-family: var(--font-ui);
  font-size: 0.84rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 10px 22px;
  background: var(--navy);
  color: var(--white);
  border: 1px solid var(--navy);
  transition: color var(--transition-fast),
              background var(--transition-fast),
              border-color var(--transition-fast);
}

.nav-cta:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--navy);
}

/* ==========================================================================
   HAMBURGER + MOBILE MENU
========================================================================== */

.hamburger {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 44px;
  min-height: 44px;
  padding: 8px;
  cursor: pointer;
  background: none;
  border: none;
}

.hamburger span {
  display: block;
  width: 22px;
  height: 1px;
  background: var(--navy);
  transition: transform var(--transition-fast),
              opacity var(--transition-fast);
}

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  background: var(--navy);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--transition-base),
              visibility 0s linear var(--transition-base);
}

.mobile-menu.open {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
  transition-delay: 0s;
}

.mobile-menu a {
  font-family: var(--font-serif);
  font-size: 1.85rem;
  font-weight: 300;
  line-height: 1.2;
  color: rgba(255, 255, 255, 0.80);
  transition: color var(--transition-fast);
}

.mobile-menu a:hover,
.mobile-menu a.active {
  color: var(--gold);
}

.mobile-menu .mobile-cta-mob {
  margin-top: 10px;
  padding: 12px 30px;
  border: 1px solid rgba(201, 169, 110, 0.45);
  font-family: var(--font-ui);
  font-size: 0.86rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--gold);
}

.mobile-close {
  position: absolute;
  top: 22px;
  right: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  cursor: pointer;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.35);
  font-size: 1.4rem;
  transition: color var(--transition-fast);
}

.mobile-close:hover {
  color: var(--gold);
}


/* ==========================================================================
   BUTTONS
========================================================================== */

.btn-primary,
.btn-ghost,
.btn-ghost-gold {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  font-family: var(--font-ui);
  font-size: 0.86rem;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--transition-fast),
              color var(--transition-fast),
              border-color var(--transition-fast);
}

.btn-primary {
  padding: 14px 36px;
  background: var(--gold);
  color: var(--navy);
  border: 1px solid var(--gold);
}

.btn-primary:hover {
  background: var(--gold-light);
  border-color: var(--gold-light);
}

.btn-ghost {
  padding: 14px 36px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.65);
}

.btn-ghost:hover {
  border-color: rgba(201, 169, 110, 0.55);
  color: var(--gold);
}

.btn-ghost-gold {
  min-height: 46px;
  padding: 12px 28px;
  border: 1px solid rgba(201, 169, 110, 0.40);
  color: var(--gold);
  background: transparent;
  white-space: nowrap;
}

.btn-ghost-gold:hover {
  border-color: var(--gold);
  background: rgba(201, 169, 110, 0.08);
}

/* ==========================================================================
   HERO DECORATIONS SHARED
========================================================================== */

.hero-atmosphere,
.page-hero-deco {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 55% 80% at 80% 45%, rgba(201, 169, 110, 0.11) 0%, transparent 60%),
    radial-gradient(ellipse 35% 60% at 10% 90%, rgba(255, 255, 255, 0.025) 0%, transparent 55%);
}

.hero-grid,
.page-hero-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.028;
  background-image:
    linear-gradient(rgba(255, 255, 255, 1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 1) 1px, transparent 1px);
  background-size: 80px 80px;
}


/* ==========================================================================
   FOOTER
========================================================================== */

.site-footer {
  /* Deve restare sopra le sezioni della home che si sovrappongono fra loro */
  position: relative;
  z-index: 1;
  background: var(--navy-dark);
  /* Piu stretto di prima: ora la fascia ospita due righe per colonna e
     l'altezza complessiva deve restare quella di prima. */
  padding: 16px 0 calc(16px + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.footer-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad-x);
}

.footer-legal a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--font-ui);
  font-size: 0.84rem;
  color: rgba(255, 255, 255, 0.78);
  transition: color var(--transition-fast);
}

.footer-legal a:hover {
  color: var(--gold);
}

/* Le due colonne partono dalla stessa riga: cosi i cerchi a sinistra e il
   sigillo a destra stanno alla stessa altezza. */
.footer-bottom {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px 32px;
  flex-wrap: wrap;
}

/* Due colonne: a sinistra i due marchi sopra la partita IVA, a destra il
   diploma sopra i collegamenti. La colonna di sinistra e allineata al bordo
   sinistro della pagina, quella di destra al bordo destro. */
.footer-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  max-width: 100%;
}

.footer-col--destra {
  align-items: flex-end;
}

/* Stessa altezza della fascia del sigillo: e quello che li tiene in riga.
   Il rientro negativo recupera il bordo trasparente del primo bersaglio da
   44 pixel, cosi il marchio parte a filo della partita IVA sotto. */
.footer-albi {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 50px;
  gap: 8px;
  margin-left: -5px;
}

/* I due posti dove Edoardo si trova davvero: LinkedIn e la sua pagina in
   banca. Prima qui c'erano tre cerchi con le sigle OCF, EFPA e IVASS, che
   non dicono niente a chi legge — le qualifiche ora sono scritte per esteso
   in "Chi sono". Bersaglio da 44 pixel, come tutti gli altri del sito. */
.footer-profilo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: rgba(255, 255, 255, 0.78);
  transition: color var(--transition-fast), opacity var(--transition-fast);
}

.footer-profilo:hover,
.footer-profilo:focus-visible {
  color: var(--gold);
}

/* Il marchio della banca ha i suoi colori: non si ricolora, si accende. */
.footer-profilo--marchio img {
  width: 34px;
  height: 34px;
  object-fit: contain;
  opacity: 0.86;
  transition: opacity var(--transition-fast);
}

.footer-profilo--marchio:hover img,
.footer-profilo--marchio:focus-visible img {
  opacity: 1;
}

/* Il sigillo e piu grande dei cerchi, quindi sporgeva in alto: sceso di 4
   pixel il suo bordo alto va a pari con quello dei cerchi. E uno spostamento
   solo visivo, la fascia blu non si alza di un pixel. */
.footer-bbs {
  position: relative;
  top: 4px;
  width: 50px;
  height: 50px;
  object-fit: contain;
}

.footer-copy {
  max-width: 100%;
  font-family: var(--font-ui);
  font-size: 0.82rem;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.70);
  text-align: left;
}

.footer-legal {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* Sul telefono le due colonne si incolonnano: si stringono e si centrano,
   perche a mezza larghezza i due bordi opposti non si leggono piu come
   due colonne ma come due righe storte. */
@media (max-width: 768px) {
  .footer-bottom {
    justify-content: center;
    gap: 18px;
  }

  .footer-col,
  .footer-col--destra {
    align-items: center;
  }

  .footer-albi {
    justify-content: center;
    margin-left: 0;
  }

  .footer-copy {
    text-align: center;
  }

  .footer-legal {
    justify-content: center;
  }
}


/* ==========================================================================
   ANIMATIONS
========================================================================== */

@keyframes scrollPulse {
  0%,
  100% {
    opacity: 0.3;
  }

  50% {
    opacity: 0.85;
  }
}

/* ==========================================================================
   RESPONSIVE COMPONENTS
========================================================================== */

@media (max-width: 960px) {
  .nav-links,
  .nav-cta {
    display: none;
  }

  .hamburger {
    display: flex;
  }

  .nav-logo {
    min-width: 0;
    flex: 1;
  }
}

@media (max-width: 768px) {

  .footer-bottom {
    flex-direction: column;
    align-items: center;
  }
}

@media (max-width: 480px) {
  /* Il marchio della banca resta anche sul telefono: e la prima cosa che
     dice al visitatore con chi ha a che fare. Si stringe, non sparisce. */
  .nav-logo {
    gap: 14px;
  }

  .nav-company-logo {
    width: 88px;
    height: 21px;
  }

  .nav-logo-text span {
    display: none;
  }

  .mobile-menu a {
    font-size: 1.65rem;
  }

  .btn-primary,
  .btn-ghost,
  .btn-ghost-gold {
    width: 100%;
  }

  .footer-legal {
    gap: 14px;
  }
}

/* Sui telefoni piu stretti (iPhone SE e simili) il marchio della banca e il
   nome non ci stanno insieme: resta il nome, che porta alla home.
   Stessa cosa nelle pagine senza menu, dove al posto del pulsante-hamburger
   c'e "Torna alla home", che di larghezza ne prende molta di piu. */
@media (max-width: 359px) {
  .nav-company-link {
    display: none;
  }
}

@media (max-width: 560px) {
  .nav-inner:has(.nav-cta) .nav-company-link {
    display: none;
  }
}