@font-face {
  font-family: "Italiana";
  src: url("/fonts/Italiana-Regular.woff2") format('woff');
}

/* Didact Gothic - self hosted */
@font-face {
  font-family: 'Didact Gothic';
  src:
    local('Didact Gothic Regular'),
    local('DidactGothic-Regular'),
    url('/fonts/DidactGothic-Regular.woff2') format('woff2'),
    url('/fonts/DidactGothic-Regular.woff') format('woff'); /* opzionale fallback */
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
font-family: 'Belleza';
font-style: normal;
font-weight: normal;
src: local('Belleza'), url('/fonts/Belleza-Regular.woff') format('woff');
}

@font-face {
font-family: 'Impact';
font-style: normal;
font-weight: normal;
src: local('Impact'), url('/fonts/Impact.woff') format('woff');
}


body {
    background-color: #000;
    color: #ccf;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
    font-weight: 400;
	font-size: 16px;
	line-height: 1.6;
}
body a {
  font-family: 'Didact Gothic';
  font-weight: 400;
  text-decoration: none;
  font-size: 1em;
  line-height: 1.5;
}

html, body {
  height: 100%;
}

main {
  display: block;
}

.skip-link {
  position: absolute;
  top: -48px;
  left: 16px;
  z-index: 4000;
  padding: 10px 14px;
  background: #f6f100;
  color: #000;
  border-radius: 8px;
  transition: top .2s ease;
}

.skip-link:focus {
  top: 16px;
}

:focus-visible {
  outline: 2px solid #f6f100;
  outline-offset: 2px;
}

h1, h2 {
    color: #9cf;
}
.box {
    display: flex;
    align-items: center;
    margin: 2rem 0;
    border-bottom: 1px solid #444;
    padding-bottom: 1rem;
}
.box img {
    width: 150px;
    height: auto;
    margin-right: 1rem;
}
.box p {
    margin: 0;
    color: #cceeff;
}
footer {
    margin-top: 4rem;
    text-align: center;
    font-size: 0.9rem;
    color: #888;
    padding-bottom: 1.5rem;
}

.container-main {
	margin-top: 30px;
}
@media (min-width: 992px) {
	.container-main {
		margin-top: 50px;
	}
}

/* ------------------
	Navbar base 
   ------------------ */

/* NAVBAR: transizioni colore come WP */
#mainNav {
  transition: background-color .5s ease, box-shadow .5s ease, color .5s ease;
}

/* Stato iniziale sopra l'hero */
#mainNav.bg-transparent {
  background-color: black !important;
  box-shadow: none;
}

/* Stato dopo scroll */
#mainNav.navbar-scrolled {
  background-color: #fff !important;
  box-shadow: 0 8px 20px rgba(0,0,0,.08);
}
#mainNav.navbar-scrolled .nav-link,
#mainNav.navbar-scrolled .navbar-brand { color:#111 !important; }
#mainNav.navbar-scrolled .nav-link:hover,
#mainNav.navbar-scrolled .nav-link:focus { color:#000 !important; }

/* Brand tipografico */
.navbar-brand {
  font-family: 'Impact', serif !important;
  /* font-weight: 400; */
  font-style: normal;
  font-size: 1.5rem;
  color: #f8f9fa;                  /* chiaro sull'hero scuro */
  letter-spacing: .02em;
  /* letter-spacing: .15em; */
  text-transform: uppercase;
  transition: color .5s ease;
  padding-top: 0 !important;       /* niente padding sul brand */
  padding-bottom: 0 !important;
}

.impact-font {
  font-family: 'Impact', serif !important;
  font-style: normal;
  font-size: 1.5rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.impact-font-titles {
  font-family: 'Impact', serif !important;
  font-style: normal;
  font-size: 1.8rem;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.impact-font-bigger {
	font-size: 2.5rem !important;
}

.color-yellow {
	color: #F6F100 !important;
}

.color-white {
	color: #FFF !important;
}

.image-border {
  border: 1px solid rgba(255, 255, 255, 0.9);
}

.image-border-sfocato {
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.6),
    0 0 10px rgba(255, 255, 255, 0.35);
}

/* --- Altezza stile WordPress: solo padding sulla navbar --- */
/* Reset padding Bootstrap e centra verticalmente */
#mainNav.navbar {
  --bs-navbar-padding-y: 0;        /* azzera padding y di Bootstrap */
  padding-top: 14px;               /* mobile compatta */
  padding-bottom: 14px;
  display: flex;
  align-items: center;
}

/* Desktop: porta l’altezza ~165px (64+64 + ~36 di riga) */
@media (min-width: 992px) {
  #mainNav.navbar {
    padding-top: 26px;
    padding-bottom: 26px;
  }
}

/* Link: niente padding verticale, niente line-height forzato */
#mainNav .nav-link{
  line-height: normal !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  	font-family: 'Didact Gothic';
    font-weight: 400;
}

/* Toggler: nessun extra verticale */
#mainNav .navbar-toggler{
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

#mainNav .nav-item {
	text-transform: uppercase;
	margin-right: 15px; 
	font-size: 16px;
	letter-spacing: .15em;
}

.navbar .nav-link.active:hover { color: var(--bs-warning)!important; }

/* Accent globale */
:root { --nj-accent: #ffc107; /* giallo bootstrap-like */ }

/* Stato attivo SEMPRE giallo + bold, sia dark che light */
#mainNav .nav-link.active,
#mainNav .nav-link[aria-current="page"] {
  color: var(--nj-accent) !important;
  font-weight: 700;
}

/* Hover/focus coerenti */
#mainNav .nav-link:hover,
#mainNav .nav-link:focus {
  color: var(--nj-accent);
}

/* Piccolo indicatore sotto l’attivo (aiuta su bianco) */
#mainNav .nav-link.active::after,
#mainNav .nav-link[aria-current="page"]::after {
  content: "";
  display: block;
  height: 2px;
  margin: 2px auto 0;
  width: 24px;
  background: var(--nj-accent);
  border-radius: 2px;
}

/* Stato NAVBAR quando scorre: sfondo bianco, testo scuro */
#mainNav.scrolled {
  background: #fff !important;
}
#mainNav.scrolled.navbar-dark {
  /* Evita testo pallido: forziamo modalità chiara */
  color: #212529;
}
#mainNav.scrolled .navbar-brand,
#mainNav.scrolled .nav-link {
  color: #212529;
}

/* Ombra leggera quando entra lo sfondo */
#mainNav.scrolled {
  box-shadow: 0 2px 10px rgba(0,0,0,.08);
}

/* Toggler icona: visibile su bianco */
#mainNav.scrolled .navbar-toggler {
  border-color: rgba(0,0,0,.15);
}
#mainNav.scrolled .navbar-toggler-icon {
  filter: invert(1) grayscale(1);
}


#show-only-mobile {
  display: none; /* di default nascosto */
}

/* display only on mobile */

@media (max-width: 767.98px) {  /* sotto i 768px = mobile */
  #show-only-mobile {
    display: block;
    font-size: 1.2rem;  /* opzionale */
    margin: 1rem 0;
  }
}

/* support classes */
.black {
	color: black;
}

.green-matrix {
	color: #91FEB7;
}

.image { border: 2px solid #A5445A; }
.image-inner { border: 2px solid #A5445A; width: 150px; height:auto}
.image-inner-noborder {  width: 150px; height:auto}
.image-medium-noborder {  width: 250px; height:auto}

/* base + visited */
a.link-icons-home:link,
a.link-icons-home:visited {
  color: #ccc;
  text-decoration: none;
  display: block;            /* rende cliccabile tutta la “card” */
  transition: color .2s ease;
}

/* hover + focus (accessibilità) */
a.link-icons-home:hover,
a.link-icons-home:focus {
  color: #ffffff;            /* bianco al passaggio */
  text-decoration: none;
}

/* active (durante il click) */
a.link-icons-home:active {
  color: #cccccc;
  text-decoration: none;
}

/* assicura che i testi interni ereditino il colore del link */
a.link-icons-home h3,
a.link-icons-home p {
  color: inherit;
}


/* nascosto di default (mobile/tablet) */
.only-desktop { display: none; }

/* mostra da desktop in su */
@media (min-width: 992px) {
  .only-desktop { display: block; }
}

/* cintura & bretelle: su Safari iOS non mostrarlo comunque */
@supports (-webkit-touch-callout: none) and (not (hover: hover)) {
  .only-desktop { display: none !important; }
}


/* debug stuff */
.noshow {
	display: none;
}


/* Stile generale "macchina da scrivere" */
.typewriter {
	padding:8px;
  font-family: "Courier New", Courier, monospace;
  font-size: 1.0srem;
  letter-spacing: 0.05em;
  line-height: 1.4;
  color: #111111;
  background: white;
  /* leggero effetto inchiostro */
  text-shadow: 0.02em 0.02em 0 rgba(0, 0, 0, 0.25);
}

.legal-copy h1,
.legal-copy h2 {
  color: #ccc;
}

.legal-copy p {
  color: #fff;
}

.legal-copy a,
.legal-copy a:link,
.legal-copy a:visited {
  color: #ccc;
}

.btn-compact-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.45rem 0.95rem;
  border-radius: 999px;
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.btn-compact-cta:hover,
.btn-compact-cta:focus {
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
  filter: saturate(1.06);
}

.btn-compact-cta-amazon {
  color: #1b1200 !important;
  background: linear-gradient(135deg, #ffd86b 0%, #ffbe4d 55%, #d58400 100%);
  border-color: rgba(125, 78, 0, 0.42);
}

.book-cta-mini {
  width: min(100%, 18rem);
  padding: 0.95rem 1rem;
  background: linear-gradient(180deg, rgba(8, 8, 8, 0.98), rgba(18, 18, 18, 0.94));
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 1rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 18px 34px rgba(0, 0, 0, 0.34);
}

.book-cta-mini-centered {
  margin-left: auto;
  margin-right: auto;
}

.book-cta-mini-topline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
  margin-bottom: 0.75rem;
}

.book-cta-mini-stamp {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  background: #b63a3a;
  color: #ffffff;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: 0 6px 14px rgba(182, 58, 58, 0.25);
}

.book-cta-mini-stamp-outline {
  background: transparent;
  color: #d9b160;
  border: 1px solid rgba(217, 177, 96, 0.85);
  box-shadow: none;
}

.book-cta-mini-copy {
  margin: 0 0 0.8rem;
  font-size: 0.9rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.82);
}

.book-cta-mini-button {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.62rem 0.95rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #ffd86b 0%, #ffbe4d 55%, #d58400 100%);
  border: 1px solid rgba(125, 78, 0, 0.42);
  color: #1b1200 !important;
  font-size: 0.92rem;
  font-weight: 800;
  line-height: 1.2;
  text-decoration: none;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.book-cta-mini-button:hover,
.book-cta-mini-button:focus {
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.34);
  filter: saturate(1.05);
  text-decoration: none;
}

.book-cta-inline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  flex-wrap: nowrap;
  width: auto;
  max-width: 100%;
  padding: 0.7rem 0.9rem;
}

.book-cta-inline .book-cta-mini-topline {
  margin-bottom: 0;
  flex-wrap: nowrap;
}

.book-cta-inline .book-cta-mini-copy {
  margin: 0;
  font-size: 0.88rem;
  white-space: nowrap;
}

.book-cta-inline .book-cta-mini-button {
  width: auto;
  white-space: nowrap;
}

@media (max-width: 767.98px) {
  .book-cta-inline {
    flex-wrap: wrap;
  }

  .book-cta-inline .book-cta-mini-topline {
    flex-wrap: wrap;
    justify-content: center;
  }

  .book-cta-inline .book-cta-mini-copy {
    white-space: normal;
  }
}

/* Effetti neon disponibili solo su desktop */
@media (min-width: 769px) {

  /* buttons overlay */
  .btn-neon-noir {
      position: relative;
      padding: 6px 13px;
      font-weight: 600;
      border-radius: 10px;
      color: white !important;

      background: linear-gradient(
          to bottom right,
          rgba(255, 255, 255, 0.20),
          rgba(0, 0, 0, 0.15)
      ) !important;

      background-blend-mode: overlay;
      opacity: 0.95;
      backdrop-filter: blur(7px) saturate(130%);
      border: 1px solid rgba(255, 255, 255, 0.25);

      box-shadow:
          0 0 8px rgba(255, 255, 255, 0.12),
          0 4px 14px rgba(0, 0, 0, 0.45);

      transition: all 0.25s ease;
  }

  .btn-neon-noir:hover {
      opacity: 1;
      background: linear-gradient(
          to bottom right,
          rgba(255, 255, 255, 0.30),
          rgba(0, 0, 0, 0.25)
      ) !important;

      border-color: rgba(255, 255, 255, 0.35);

      box-shadow:
          0 0 10px rgba(255, 255, 255, 0.18),
          0 6px 18px rgba(0, 0, 0, 0.55);

      transform: translateY(-1px);
  }

  /* glow del testo */
  .btn-neon-noir,
  .btn-neon-noir span {
      text-shadow: 0 0 4px rgba(0,0,0,0.45);
  }

  /* Varianti colore */
  .btn-neon-noir-maroon {
    background: linear-gradient(
      to bottom right,
      rgba(255, 128, 0, 0.60),
      rgba(255, 100, 100, 0.25)
    ) !important;
  }

  .btn-neon-noir-green {
    background: linear-gradient(
      to bottom right,
      rgba(0, 255, 140, 0.60),
      rgba(0, 180, 120, 0.25)
    ) !important;
  }

  .btn-neon-noir-lightgray {
    background: linear-gradient(
      to bottom right,
      rgba(180, 180, 180, 0.60),
      rgba(150, 150, 150, 0.25)
    ) !important;
  }

  .btn-neon-noir-lightblue {
    background: linear-gradient(
      to bottom right,
      rgba(120, 200, 255, 0.60),
      rgba(100, 160, 220, 0.25)
    ) !important;
  }
  
  .btn-neon-noir-bluenavy {
  background: linear-gradient(
    to bottom right,
    rgba(20, 40, 80, 0.75),
    rgba(10, 25, 55, 0.35)
  ) !important;
}
	 .btn-neon-noir-blue {
	  background: linear-gradient(
		to bottom right,
		rgba(15, 30, 60, 0.85),
		rgba(5, 15, 35, 0.45)
	  ) !important;
	}

.carousel-buttons {
  position: absolute;
  bottom: -120px;            /* dove vuoi */
  left: 20%;
  z-index: 9999;           /* più alto di qualunque freccia */
  text-align: left;
  width: 200%;
  pointer-events: auto;    /* i click passano correttamente */
  border: 0px solid yellow;
}

}