/*
Theme Name: Onoranze Funebri Facelli (Child)
Theme URI: https://www.onoranzeafunebrifacelli.it
Template: nextawards
Author: Onoranze Funebri Facelli
Author URI: https://www.onoranzeafunebrifacelli.it
Description: Child theme minimalista per Onoranze Funebri Facelli basato su Nextawards. Stile elegante e raffinato ispirato al design del prototipo con palette bianco/crema, bordeaux e oro bronzo.
Version: 2.1.0
Text Domain: facelli-child
*/

/* PALETTE BRAND FACELLI  */
:root {
  /* Colori principali */
  --facelli-dark:         #1A1714; /* Quasi nero — intestazioni, testo scuro */
  --facelli-emergency:    #8B1A1A; /* Bordeaux — bottoni primari, barra emergenza */
  --facelli-emergency-h:  #6d1010; /* Bordeaux hover */
  --facelli-accent:       #8B6F47; /* Bronzo — link, eyebrow, dettagli */
  --facelli-gold:         #B8965A; /* Oro — numeri, prezzi, accenti secondari */

  /* Sfondi */
  --facelli-bg-warm:      #F9F6F1; /* Crema calda — sfondo sito */
  --facelli-bg-light:     #F0EBE1; /* Crema chiara — card, sezioni alternate */
  --facelli-white:        #FFFFFF;

  /* Testo */
  --facelli-text:         #2C2925; /* Testo corpo */
  --facelli-muted:        #7A736A; /* Testo secondario */
  --facelli-border:       #DDD5C7; /* Bordi e divisori */

  /* Font */
  --facelli-font-heading: 'Lora', Georgia, serif;
  --facelli-font-body:    'Source Sans 3', system-ui, sans-serif;

  /* Effetti */
  --facelli-transition:   0.28s cubic-bezier(0.4, 0, 0.2, 1);
  --facelli-shadow-sm:    0 2px 12px rgba(0, 0, 0, 0.07);
  --facelli-shadow-md:    0 6px 28px rgba(0, 0, 0, 0.12);
  --facelli-radius:       3px;

  /* Override variabili tema padre Nextawards */
  --link-color:       #8B6F47;
  --link-color-hover: #1A1714;
  --site-bg:          #F9F6F1;
  --site-text-color:  #2C2925;
}

/* ════════════════════════════════════════════════════════════
   TIPOGRAFIA
════════════════════════════════════════════════════════════ */
body {
  font-family: var(--facelli-font-body);
  color: var(--facelli-text);
  background-color: var(--facelli-bg-warm);
  font-size: 1.05rem;
  line-height: 1.78;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--facelli-font-heading);
  color: var(--facelli-dark);
  line-height: 1.25;
}

h2 { font-size: clamp(1.9rem, 3.5vw, 2.6rem); font-weight: 500; }
h3 { font-size: 1.35rem; font-weight: 500; }
h4 { font-size: 1.1rem; font-weight: 600; }

a {
  color: var(--facelli-accent);
  transition: color var(--facelli-transition);
}
a:hover { color: var(--facelli-dark); }

/* ════════════════════════════════════════════════════════════
   HEADER — bianco pulito con bordo sottile (come il prototipo)
   Il menu hamburger mobile è gestito nativamente dal padre.
════════════════════════════════════════════════════════════ */
.header {
  background-color: var(--facelli-white) !important;
  border-bottom: 1px solid var(--facelli-border) !important;
  box-shadow: var(--facelli-shadow-sm);
}

.header__content {
  border-color: var(--facelli-border) !important;
}

/* Logo */
.header__logo,
.header__logo a,
.header__logo-text,
.site-title {
  color: var(--facelli-dark) !important;
  font-family: var(--facelli-font-heading) !important;
  font-size: clamp(1.1rem, 2vw, 1.35rem) !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  white-space: nowrap !important;
}

/* Tagline sotto il logo, se presente */
.header__logo .tagline,
.site-tagline {
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--facelli-accent);
  font-weight: 600;
  display: block;
  margin-top: 1px;
  font-family: var(--facelli-font-body);
}

/* Voci menu desktop — testo scuro su header bianco */
.menu > li > a {
  color: var(--facelli-text) !important;
  font-size: 0.75rem !important;
  padding: 14px 10px !important;
  letter-spacing: 0.03em !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  opacity: 1 !important;
}

.menu > li > a:hover,
.menu > li.current-menu-item > a {
  color: var(--facelli-accent) !important;
  opacity: 1 !important;
}

/* Dropdown */
.menu > li > ul {
  background: var(--facelli-white) !important;
  border: 1px solid var(--facelli-border) !important;
  border-radius: 4px !important;
  box-shadow: var(--facelli-shadow-md) !important;
}

.menu li ul > li > a {
  color: var(--facelli-text) !important;
  font-family: var(--facelli-font-body) !important;
  font-size: 0.9rem !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

.menu li ul > li > a:hover {
  background: var(--facelli-bg-light) !important;
  color: var(--facelli-accent) !important;
}

/* Freccia dropdown — nascosta come richiesto */
.menu > li.menu-item-has-children > a {
  padding-right: 10px !important;
}

.menu > li.menu-item-has-children > a::after {
  display: none !important;
}

/* Quick menu (es. numero di telefono in alto a destra) */
.header__quick a {
  color: var(--facelli-text) !important;
  font-weight: 600;
}

.header__quick a:hover {
  color: var(--facelli-emergency);
}

/* Hamburger — linee scure su header bianco */
.icon-hamburger span {
  background: var(--facelli-dark) !important;
}

/* Menu mobile aperto — sfondo bianco, testo scuro */
@media (max-width: 1190px) {
  .menu {
    background-color: var(--facelli-white) !important;
    border-top: 2px solid var(--facelli-emergency) !important;
  }

  .menu li {
    border-color: var(--facelli-border) !important;
  }

  .menu li a {
    color: var(--facelli-text) !important;
  }

  .menu li a:hover {
    color: var(--facelli-accent) !important;
  }
}

/* ════════════════════════════════════════════════════════════
   BARRA EMERGENZA — bordeaux in cima alla pagina
════════════════════════════════════════════════════════════ */
.header__topbar,
.emergency-bar,
.facelli-emergency-bar {
  background-color: var(--facelli-emergency) !important;
  color: var(--facelli-white) !important;
  text-align: center;
  padding: 9px 24px;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 16px;
}

.header__topbar a,
.emergency-bar a,
.facelli-emergency-bar a {
  color: var(--facelli-white) !important;
  font-weight: 700;
  text-decoration: none;
}

/* ════════════════════════════════════════════════════════════
   FOOTER — sfondo scuro/charcoal
════════════════════════════════════════════════════════════ */
.footer-content {
  background-color: var(--facelli-dark) !important;
  color: rgba(255, 255, 255, 0.55) !important;
}

.footer-content h1,
.footer-content h2,
.footer-content h3,
.footer-content h4,
.footer-content h5,
.footer-content h6 {
  color: var(--facelli-white);
  font-family: var(--facelli-font-heading);
}

.footer-content a {
  color: rgba(255, 255, 255, 0.55);
}

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

.footer-content hr {
  border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Footer Liste (Pagine, Categorie, ecc) */
.footer-content ul {
  list-style: none !important;
  padding-left: 0 !important;
  margin-top: 15px;
}

.footer-content li {
  font-size: 0.95rem;
  margin-bottom: 10px;
  position: relative;
  padding-left: 20px;
}

.footer-content li::before {
  content: "—";
  color: var(--facelli-accent);
  position: absolute;
  left: 0;
  top: 0;
}

/* ════════════════════════════════════════════════════════════
   BOTTONI GUTENBERG
   - Fill (primario) → bordeaux #8B1A1A
   - Outline (ghost) → bordo bronzo trasparente
   - Accent (secondario) → bronzo #8B6F47
   - Emergency → bordeaux (alias del primario)
════════════════════════════════════════════════════════════ */

/* Bottone Fill / primario */
.wp-block-button__link:not(.is-style-outline .wp-block-button__link):not(.is-style-outline-dark .wp-block-button__link):not(.is-style-secondary-button .wp-block-button__link) {
  background-color: var(--facelli-emergency) !important;
  color: var(--facelli-white) !important;
  border-radius: var(--facelli-radius) !important;
  font-family: var(--facelli-font-body);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.88rem;
  border: 2px solid var(--facelli-emergency) !important;
  transition: all var(--facelli-transition) !important;
}

.wp-block-button__link:hover:not(.is-style-outline .wp-block-button__link):not(.is-style-outline-dark .wp-block-button__link):not(.is-style-secondary-button .wp-block-button__link) {
  background-color: var(--facelli-emergency-h) !important;
  border-color: var(--facelli-emergency-h) !important;
  color: var(--facelli-white) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(139, 26, 26, 0.3) !important;
}

/* Bottone Outline / ghost */
.is-style-outline .wp-block-button__link {
  background: transparent !important;
  color: var(--facelli-white) !important;
  border: 2px solid rgba(255, 255, 255, 0.55) !important;
  border-radius: var(--facelli-radius) !important;
}

.is-style-outline .wp-block-button__link:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: var(--facelli-white) !important;
  color: var(--facelli-white) !important;
}

/* Outline su sfondo chiaro — bordo bronzo */
.has-cream-background-color .is-style-outline .wp-block-button__link,
.has-white-background-color .is-style-outline .wp-block-button__link {
  color: var(--facelli-accent) !important;
  border-color: var(--facelli-accent) !important;
}

.has-cream-background-color .is-style-outline .wp-block-button__link:hover,
.has-white-background-color .is-style-outline .wp-block-button__link:hover {
  background: var(--facelli-accent) !important;
  color: var(--facelli-white) !important;
}

/* Bottone Accent / bronzo (stile secondario del padre) */
.wp-block-button.is-style-secondary-button .wp-block-button__link {
  background-color: var(--facelli-accent) !important;
  color: var(--facelli-white) !important;
  border: 2px solid var(--facelli-accent) !important;
  border-radius: var(--facelli-radius) !important;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.88rem;
}

.wp-block-button.is-style-secondary-button .wp-block-button__link:hover {
  background-color: #7a6038 !important;
  border-color: #7a6038 !important;
  color: var(--facelli-white) !important;
  transform: translateY(-1px);
}

/* ══ NUOVO: Stile Contorno Scuro (outline-dark) ══ */
.is-style-outline-dark .wp-block-button__link {
  background: transparent !important;
  color: var(--facelli-dark) !important;
  border: 2px solid var(--facelli-dark) !important;
  border-radius: var(--facelli-radius) !important;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.88rem;
}

.is-style-outline-dark .wp-block-button__link:hover {
  background: var(--facelli-dark) !important;
  color: var(--facelli-white) !important;
}

/* Override globale border-radius bottoni (dal Customizer del padre) */
.wp-block-button .wp-block-button__link,
.evi a { border-radius: var(--facelli-radius) !important; }


/* ════════════════════════════════════════════════════════════
   BLOCCHI COVER / HERO
════════════════════════════════════════════════════════════ */
.wp-block-cover p:not(.hero-eyebrow) {
  font-size: 1.15rem !important;
  line-height: 1.6 !important;
  max-width: 900px !important;
}

.wp-block-cover p strong,
.wp-block-cover p b {
  color: var(--facelli-gold) !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
}

/* Classe hero-h1 applicabile al titolo dell'hero */
.hero-h1,
.wp-block-cover h1 {
  font-family: var(--facelli-font-heading) !important;
  font-size: clamp(2.4rem, 6vw, 4rem) !important;
  font-weight: 500 !important;
  line-height: 1.18 !important;
  letter-spacing: -0.01em !important;
  max-width: 1000px;
  margin-bottom: 20px;
}

/* Padding per far respirare il testo nella Cover e allinearlo al logo */
.wp-block-cover__inner-container {
  width: 100% !important;
  max-width: none !important; /* Nessun blocco alla larghezza su desktop grandi, si espande col tema */
  margin: 0 auto !important;
  padding-left: 3% !important;
  padding-right: 3% !important;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .wp-block-cover__inner-container {
    padding-left: 5% !important; /* Margine identico al contenuto base su mobile */
    padding-right: 5% !important;
  }
}

.hero-h1 em {
  font-weight: 400;
  font-style: italic;
  color: rgba(255, 255, 255, 0.82);
}

.hero-eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--facelli-gold) !important;
  font-weight: 600;
  margin-bottom: 16px;
  font-family: var(--facelli-font-body);
}

/* ════════════════════════════════════════════════════════════
   CLASSI UTILITÀ SEZIONI
   Da applicare ai blocchi Gutenberg via "Classi CSS aggiuntive"
════════════════════════════════════════════════════════════ */

/* Sfondi */
.facelli-bg-dark       { background-color: var(--facelli-dark) !important; }
.facelli-bg-emergency  { background-color: var(--facelli-emergency) !important; }
.facelli-bg-accent     { background-color: var(--facelli-accent) !important; }
.facelli-bg-gold       { background-color: var(--facelli-gold) !important; }
.facelli-bg-cream      { background-color: var(--facelli-bg-warm) !important; }
.facelli-bg-cream-lt   { background-color: var(--facelli-bg-light) !important; }
.facelli-bg-white      { background-color: var(--facelli-white) !important; }

/* Rimozione margini bianchi tra i gruppi Gutenberg di primo livello */
.alignfull, 
.wp-block-group.alignfull,
.wp-block-cover.alignfull,
.wp-site-blocks > .alignfull,
.wp-site-blocks > .wp-block-group,
.wp-site-blocks > .wp-block-cover,
.is-layout-flow > .wp-block-group,
.is-layout-flow > .wp-block-cover,
.is-layout-flow > .alignfull {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.wp-site-blocks > .alignfull + .alignfull,
.wp-site-blocks > * + .alignfull,
.wp-site-blocks > .wp-block-group + .wp-block-group,
.is-layout-flow > * + .wp-block-group,
.is-layout-flow > * + .wp-block-cover {
  margin-top: 0 !important;
}

/* Nasconde eventuali paragrafi vuoti (spesso creati per errore) che causano stacchi bianchi */
.wp-site-blocks > p:empty,
.is-layout-flow > p:empty {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Se usi un gruppo full width, aggiungi un po' di padding interno verticale */
.wp-block-group.alignfull {
  padding-top: 60px;
  padding-bottom: 60px;
}
.wp-block-cover.alignfull {
  padding-top: 0;
  padding-bottom: 0;
}

/* Testo su sfondi scuri */
.facelli-bg-dark h1, .facelli-bg-dark h2, .facelli-bg-dark h3,
.facelli-bg-dark h4, .facelli-bg-dark h5, .facelli-bg-dark p,
.facelli-bg-dark li,
.facelli-bg-emergency h1, .facelli-bg-emergency h2,
.facelli-bg-emergency h3, .facelli-bg-emergency p {
  color: var(--facelli-white) !important;
}

.facelli-bg-dark a,
.facelli-bg-emergency a { color: var(--facelli-gold); }

/* Counter strip (numeri statistiche su sfondo scuro) */
.facelli-counter-gold {
  font-family: var(--facelli-font-heading);
  font-size: 3.4rem;
  font-weight: 600;
  color: var(--facelli-gold);
  line-height: 1;
}

/* Eyebrow / etichetta sezione */
.section-eyebrow,
.facelli-eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--facelli-accent);
  font-weight: 700;
  margin-bottom: 12px;
  display: block;
  font-family: var(--facelli-font-body);
}

.facelli-eyebrow-light,
.section-eyebrow.light {
  color: var(--facelli-gold);
}

/* Separatore elegante */
.facelli-divider {
  border: none;
  border-top: 1px solid var(--facelli-border);
  margin: 0;
  opacity: 1;
}

/* Blocco necrologi */
.facelli-necrologi {
  text-align: center;
  padding: 64px 24px;
  position: relative;
  overflow: hidden;
}

/* Card servizi con hover */
.facelli-service-card {
  background: var(--facelli-white);
  border: 1px solid var(--facelli-border);
  border-radius: 4px;
  overflow: hidden;
  transition: all var(--facelli-transition);
}

.facelli-service-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--facelli-shadow-md);
  border-color: var(--facelli-accent);
}

/* Badge / etichetta card */
.facelli-badge {
  display: inline-block;
  background: var(--facelli-bg-light);
  color: var(--facelli-accent);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 2px;
  margin-bottom: 12px;
}

/* Pill zone servite */
.facelli-pill {
  display: inline-flex;
  background: var(--facelli-white);
  border: 1px solid var(--facelli-border);
  color: var(--facelli-text);
  padding: 8px 18px;
  border-radius: 50px;
  font-size: 0.84rem;
  font-weight: 500;
}

.facelli-pill.featured {
  background: var(--facelli-dark);
  color: var(--facelli-white);
  border-color: var(--facelli-dark);
}

/* Citazione / Pullquote */
.wp-block-pullquote blockquote p {
  font-family: var(--facelli-font-heading);
  font-style: italic;
  font-size: clamp(1.3rem, 2.5vw, 1.7rem);
  line-height: 1.55;
}

.wp-block-pullquote cite {
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--facelli-gold);
  font-style: normal;
  font-weight: 600;
}

/* Separatore */
.wp-block-separator {
  border-color: var(--facelli-border) !important;
}

/* ════════════════════════════════════════════════════════════
   TITOLI DI PAGINA — nascosti con template Contained No Title
════════════════════════════════════════════════════════════ */
.page-template-contained-no-title .entry-header,
.page-template-contained-no-title .entry-title,
.page-template-contained-no-title .page-title {
  display: none !important;
}

/* ════════════════════════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .hero-h1,
  .wp-block-cover h1 {
    font-size: 2.2rem !important;
  }

  /* Padding minimo per contenuto nel template Contained */
  .col-70, .tab-90 {
    padding-left: 16px;
    padding-right: 16px;
    box-sizing: border-box;
  }
}

/* ════════════════════════════════════════════════════════════
   FLOATING CTA (se usato tramite blocco HTML personalizzato)
════════════════════════════════════════════════════════════ */
.floating-cta {
  position: fixed;
  bottom: 24px;
  right: 20px;
  z-index: 8999;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.floating-cta-label {
  background: var(--facelli-dark);
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 50px;
  font-family: var(--facelli-font-body);
}

.floating-cta-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--facelli-emergency);
  color: var(--facelli-white) !important;
  padding: 13px 20px;
  border-radius: 50px;
  font-weight: 700;
  font-size: 0.92rem;
  box-shadow: 0 6px 24px rgba(139, 26, 26, 0.38);
  white-space: nowrap;
  text-decoration: none;
  transition: all var(--facelli-transition);
}

.floating-cta-btn:hover {
  background: var(--facelli-emergency-h);
  color: var(--facelli-white) !important;
  transform: translateY(-2px);
}

@media (max-width: 640px) {
  .floating-cta-btn .phone-text {
    display: none;
  }
}

/* CORREZIONI MOBILE: Allineamento Hero e Spaziatura Blocchi */
@media (max-width: 768px) {
  
  /* 1. Allineamento testo nelle Hero a sinistra come il resto del sito */
  .wp-block-cover .wp-block-cover__inner-container,
  .hero-h1,
  .wp-block-cover p {
    text-align: left !important;
  }
  
  /* Per assicurarci che anche i bottoni dentro la hero siano allineati a sinistra */
  .wp-block-cover .wp-block-buttons {
    justify-content: flex-start !important;
  }

  /* 2. Risoluzione bottoni e blocchi incollati (ripristina spazi verticali) */
  /* Aggiunge gap quando i bottoni vanno a capo su mobile */
  .wp-block-buttons {
    gap: 16px !important;
    row-gap: 16px !important; 
  }

  /* I bottoni specifici che vanno a capo e si attaccano */
  .wp-block-button {
    margin-bottom: 12px !important;
  }
  
  /* Colonne di Gutenberg che collassano e si attaccano su mobile */
  .wp-block-columns {
    gap: 24px !important;
  }
  
  .wp-block-column {
    margin-bottom: 24px !important;
  }
  
  /* Evita che l'ultima colonna abbia troppo margine in basso */
  .wp-block-column:last-child {
    margin-bottom: 0 !important;
  }
}