/* CSS Document */

/* ============ FONT ============ */
@import url('https://fonts.googleapis.com/css2?family=Caprasimo&family=Nunito:wght@400;500;600;700&display=swap');

/* ============ PALETTE ============ */
:root {
  --brand-red:        #e41e01;
  --brand-red-dark:   #b81700;
  --brand-orange:     #db5803;
  --brand-orange-dark:#b34602;
  --brand-brown:      #4a2511;   /* menu e sottomenu */
  --brand-brown-dark: #331a0c;   /* hover / bordi */
  --brand-beige:      #f8f0e3;   /* sfondo pagina */
  --brand-beige-alt:  #efe3cf;   /* beige un po' più scuro (card, bordi) */
  --brand-text:       #2b1a12;
  --brand-white:      #ffffff;

  --font-heading: 'Caprasimo', serif;
  --font-body:    'Nunito', sans-serif;

  /* variabili Bootstrap 5 / Helix */
  --bs-body-bg: var(--brand-beige);
  --bs-body-color: var(--brand-text);
  --bs-body-font-family: var(--font-body);
  --bs-link-color: var(--brand-red);
  --bs-link-hover-color: var(--brand-red-dark);
}

/* ============ BASE ============ */
body {
  background-color: var(--brand-beige);
  color: var(--brand-text);
  font-family: var(--font-body);
}

h1, h2, h3, h4, h5, h6,
.sppb-addon-title, .sppb-section-title,
.sp-page-title h2, .article-header h1, .article-header h2 {
  font-family: var(--font-heading);
  font-weight: 400;            /* Caprasimo esiste solo in regular */
  color: var(--brand-text);
}

a { color: var(--brand-red); }
a:hover { color: var(--brand-red-dark); }

/* ============ HEADER ============ */
/* Fascia alta rossa (logo / top bar) */
#sp-top-bar,
#sp-header {
  background-color: var(--brand-red);
  color: var(--brand-white);
}
#sp-top-bar a, #sp-header a { color: var(--brand-white); }

/* Fascia menu marrone: assegna alla sezione menu l'ID/classe "sp-menu-bar"
   (Layout Builder > impostazioni riga > Custom class) */
.sp-menu-bar,
#sp-menu {
  background-color: var(--brand-brown);
}
.sp-megamenu-parent > li > a,
.sp-megamenu-parent > li > span {
  color: var(--brand-white);
  font-family: var(--font-body);
  font-weight: 600;
}
.sp-megamenu-parent > li:hover > a,
.sp-megamenu-parent > li.active > a {
  color: var(--brand-orange);
}

/* Sottomenu */
.sp-megamenu-parent .sp-dropdown .sp-dropdown-inner {
  background-color: var(--brand-brown);
  border-top: 3px solid var(--brand-orange);
}
.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a {
  color: var(--brand-white);
}
.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a:hover {
  background-color: var(--brand-brown-dark);
  color: var(--brand-orange);
}

/* ============ SEZIONI WIDE (classi da assegnare alla riga in SP Page Builder) ============ */
.sec-beige  { background-color: var(--brand-beige); color: var(--brand-text); }
.sec-red    { background-color: var(--brand-red);    color: var(--brand-white); }
.sec-orange { background-color: var(--brand-orange); color: var(--brand-white); }

.sec-red h1, .sec-red h2, .sec-red h3, .sec-red h4,
.sec-orange h1, .sec-orange h2, .sec-orange h3, .sec-orange h4,
.sec-red a, .sec-orange a { color: var(--brand-white); }

/* ============ BOTTONI ============ */
.sppb-btn-primary, .btn-primary {
  background-color: var(--brand-red);
  border-color: var(--brand-red);
  color: var(--brand-white);
}
.sppb-btn-primary:hover, .btn-primary:hover {
  background-color: var(--brand-brown);
  border-color: var(--brand-brown);
}
/* Sui fondi rosso/arancio il bottone si inverte */
.sec-red .sppb-btn, .sec-orange .sppb-btn {
  background-color: var(--brand-beige);
  border-color: var(--brand-beige);
  color: var(--brand-brown);
}
.sec-red .sppb-btn:hover, .sec-orange .sppb-btn:hover {
  background-color: var(--brand-brown);
  border-color: var(--brand-brown);
  color: var(--brand-white);
}

/* ============ FOOTER ============ */
#sp-footer, #sp-bottom {
  background-color: var(--brand-brown-dark);
  color: var(--brand-beige);
}
#sp-footer a { color: var(--brand-orange); }