/* CSS Document */

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

/* ============ 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); }

.sp-page-title {
	background: var(--brand-brown);text-align: center;
}
/* 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-heading);
  font-weight: 400;
}
.sp-megamenu-parent > li:hover > a,
.sp-megamenu-parent > li.active > a {
  color: var(--brand-orange);
}
.sp-megamenu-parent > li > a, .sp-megamenu-parent > li > span, .sp-megamenu-parent .sp-dropdown li.sp-menu-item > a {
  font-family: var(--font-heading) !important;
}
.sp-megamenu-parent>li>a, .sp-megamenu-parent>li>span {
    font-size: 22px !important;
}

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

/* ============ 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); }


.costa-footer {
  background-color: var(--brand-brown-dark, #331a0c);
  color: var(--brand-beige, #f8f0e3);
  padding: 48px 20px;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
}
.costa-footer__inner {
  max-width: 1140px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: stretch;          /* era: center */
}
.costa-footer__col {
  padding: 0 32px;
  text-align: center;
  display: flex;                 /* nuovo: centra il contenuto in verticale */
  flex-direction: column;
  justify-content: center;
}
.costa-footer__col + .costa-footer__col {
  border-left: 1px solid rgba(248, 240, 227, .35);   /* linea divisoria */
}
.costa-footer__col p { margin: 0 0 12px; }
.costa-footer__col p:last-child { margin-bottom: 0; }
.costa-footer__col img { max-width: 100%; height: auto; }

.costa-footer a {
  color: var(--brand-beige, #f8f0e3);
  text-decoration: none;
}
.costa-footer a:hover { color: var(--brand-orange, #db5803); }
.costa-footer__tel {
  font-family: var(--font-heading, 'Caprasimo', serif);
  font-size: 1.6rem;
  color: var(--brand-orange, #db5803) !important;
}
.costa-footer__tel:hover { color: #fff !important; }
.costa-footer__col img { margin: 0 auto; display: block; }
/* Mobile: colonne impilate, linea orizzontale */
@media (max-width: 767px) {
  .costa-footer__inner { grid-template-columns: 1fr; }
  .costa-footer__col { padding: 24px 0; }
  .costa-footer__col + .costa-footer__col {
    border-left: 0;
    border-top: 1px solid rgba(248, 240, 227, .35);
  }
}

/* ===== Aggiunte per la pagina Chi siamo ===== */
.photo { margin: 0; }
.photo img { display: block; width: 100%; height: auto; aspect-ratio: 400 / 321; object-fit: cover; border-radius: 12px; }
.photo p { margin-top: 10px; color: var(--muted); font-size: 0.9rem; }
.steps.gen { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: start; }
.steps.gen li { background: var(--white); padding: 24px 22px; }
.steps.gen p { font-size: 1rem; color: var(--text); }
.steps.gen img { display: block; width: 100%; height: auto; aspect-ratio: 400 / 321; object-fit: cover; border-radius: 10px; margin-top: 16px; }
@media (max-width: 980px) { .steps.gen { grid-template-columns: minmax(0, 1fr); } }
.sec-red .cta { margin-top: 28px; }
.steps.gen .ph { display: grid; place-items: center; width: 100%; aspect-ratio: 400 / 321; margin-top: 16px; border-radius: 10px; border: 2px dashed var(--muted); background: var(--beige); color: var(--muted); font: 700 0.9rem var(--body); text-align: center; padding: 12px; box-sizing: border-box; }


/* ===== Aggiunte per la pagina Prosciutto crudo ===== */
.wide { margin-top: 32px; }
.wide img { display: block; width: 100%; height: auto; border-radius: 12px; }
.tbl.slim { min-width: 0; }
.sec-orange .addr { margin-top: 8px; color: var(--white); font-weight: 700; }
.sec-orange .cta { margin-top: 20px; }


/* ===== Aggiunte per la pagina Contatti ===== */
.contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; padding-block: 56px; align-items: start; }
.contact .info h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
.contact .info h3 { margin-top: 32px; font-size: 1.3rem; }
.contact .addr { margin-top: 10px; font-size: 1.15rem; line-height: 1.5; }
.contact .rows { margin-top: 14px; }
.contact .rows > div { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: 12px; padding: 12px 0; border-top: 1px solid var(--beige-alt); line-height: 1.4; }
.contact .rows > div:first-child { border-top: 0; }
.contact .rows b { font: 800 0.74rem var(--body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); padding-top: 3px; }
.contact .rows span { font-weight: 700; }
.contact .rows a { color: inherit; }
.map { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; background: var(--beige-alt) repeating-linear-gradient(45deg, transparent 0 18px, rgba(74, 37, 17, 0.06) 18px 19px); text-decoration: none; }
.map img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.map .pin { position: absolute; left: 50%; top: 45%; width: 28px; height: 28px; margin: -28px 0 0 -14px; background: var(--red); border-radius: 50% 50% 50% 0; transform: rotate(-45deg); }
.map .go { position: absolute; left: 16px; bottom: 16px; background: var(--red); color: var(--white); font: 700 0.95rem var(--body); padding: 10px 16px; border-radius: 8px; }
.map:hover .go { background: var(--brown); }
@media (max-width: 860px) { .contact { grid-template-columns: minmax(0, 1fr); gap: 32px; padding-block: 36px; } .contact .rows > div { grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr); } }

/* ===== Aggiunte per la Home ===== */
.home-hero { padding-block: 48px 8px; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.6fr) minmax(0, 0.7fr); gap: 16px; align-items: center; }
.animal { margin: 0; text-align: center; }
.animal img { display: block; width: 100%; height: auto; mix-blend-mode: multiply; }
.animal figcaption { margin-top: 10px; font: 700 0.95rem var(--body); }
.animal figcaption a { color: var(--brown); text-decoration: none; border-bottom: 2px solid var(--red); }
.animal figcaption a:hover { color: var(--red); }
.hero-logo { display: grid; place-items: center; }
.hero-logo img { display: block; width: 100%; max-width: 400px; height: auto; }
@media (max-width: 860px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .hero-logo { order: -1; }
  .hero-logo img { max-width: 500px; }
}
.home-slogan { text-align: center; padding-block: 40px 8px; }
.home-slogan h1 { font-size: clamp(1.9rem, 4.4vw, 3.2rem); max-width: 20ch; margin-inline: auto; }
.home-slogan p { margin-top: 14px; color: var(--muted); font-size: 1.1rem; }
.home-slogan .cta { justify-content: center; }
.home-disc { padding-block: 40px 64px; }
.disc-grid { display: grid; grid-template-columns: auto; }
.disc .brace { height: 22px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 22' preserveAspectRatio='none'%3E%3Cpath d='M1 21 Q1 11 21 11 H176 Q196 11 200 1 Q204 11 224 11 H379 Q399 11 399 21' fill='none' stroke='%234a2511' stroke-width='2' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.disc p { margin: 12px 0 0; text-align: center; color: var(--muted); font-size: 0.95rem; line-height: 1.5; }
@media (max-width: 860px) { .disc-grid { grid-template-columns: auto; } }

 .mod-custom::before {
  content: "";
  display: block;
  height: 22px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 22' preserveAspectRatio='none'%3E%3Cpath d='M1 21 Q1 11 21 11 H176 Q196 11 200 1 Q204 11 224 11 H379 Q399 11 399 21' fill='none' stroke='%234a2511' stroke-width='2' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.mod-custom p {
  margin: 12px 0 0;
  text-align: center;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.5;
}