/* ============================================================
   Studio Legale Blasi — Stile Coordinato (Navbar Chiara)
   Palette: Charcoal #2e2b28 | Taupe #a08c72 | Panna #fdfbf7
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;0,700;1,400;1,600&family=Lato:wght@300;400;700&display=swap');

/* ---- Variabili CSS ---- */
:root {
  /* Colori estratti dal logo */
  --charcoal:       #2e2b28; 
  --charcoal-light: #4a4540;
  --taupe:          #a08c72; 
  --taupe-light:    #c4aa8f;
  
  /* Sfondi Panna e Varianti */
  --cream:          #fdfbf7; /* Bianco Panna principale */
  --cream-dark:     #f2ede4; /* Per sezioni alternate */
  --white:          #ffffff;

  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body:    'Lato', sans-serif;

  --shadow-sm: 0 2px 10px rgba(46,43,40,0.08);
  --shadow-md: 0 6px 24px rgba(46,43,40,0.12);
  --radius:    4px;
  --transition: 0.3s ease;

  /* ------------ Bootstrap overrides ------------ */
  /* colour palette (link your custom variables here) */
  /* primary now a light background tone */
  --bs-primary: var(--cream);
  --bs-secondary: var(--charcoal-light);
  --bs-success: var(--taupe-light);
  --bs-danger: var(--charcoal-light);
  --bs-body-bg: var(--cream);
  --bs-body-color: var(--charcoal-light);

  /* typography */
  --bs-body-font-family: var(--font-body);
  --bs-heading-font-family: var(--font-display);
  --bs-font-sans-serif: var(--font-body);
}

/* explicit component overrides to beat caching/undo */
.bg-primary { background-color: var(--bs-primary) !important; }
.text-primary { color: var(--charcoal-light) !important; }
.btn-primary { background-color: var(--charcoal-light) !important; border-color: var(--charcoal-light) !important; color: var(--cream) !important; }
.btn-primary:hover { background-color: var(--taupe) !important; border-color: var(--taupe) !important; }

/* hero uses light background and dark text */
.hero-section { background-color: var(--cream-dark) !important; color: var(--charcoal-light) !important; }

/* dark overlay & text style for image heroes */
.hero-section {
  position: relative;
  color: #fff; /* white text on image */
}
.hero-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 0;
}
.hero-section .container-fluid {
  position: relative;
  z-index: 1;
}
.hero-section h1, .hero-section p {
  text-shadow: 0 2px 6px rgba(0,0,0,0.6);
  color: var(--cream) !important; /* use Bianco Panna for readability */
}


/* photo background helper: cover + soft grayscale/brightness to homogenize */
.bg-photo {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: grayscale(60%) brightness(0.94);
}

/* inline image filter for homogenization */
.img-photo {
  filter: grayscale(60%) brightness(0.94);
}

/* ensure fonts really apply everywhere */
body { font-family: var(--font-body) !important; }
h1,h2,h3,h4,h5,h6 { font-family: var(--font-display) !important; color: var(--charcoal-light) !important; }

/* additional global font rule (redundant but explicit) */
body {
  font-family: var(--bs-body-font-family) !important;
}

h1,h2,h3,h4,h5,h6 {
  font-family: var(--bs-heading-font-family) !important;
}

/* ---- Reset & Base ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  color: var(--charcoal);
  background-color: var(--cream);
  line-height: 1.7;
  font-size: 1rem;
}

/* ---- Tipografia ---- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--charcoal-light); /* dark titles */
  line-height: 1.2;
}

h1 { font-size: clamp(2.2rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.8rem, 3.5vw, 2.6rem); border-bottom: 1px solid var(--cream-dark); padding-bottom: 0.5rem; }

p { color: var(--charcoal-light); margin-bottom: 1rem; }

a { color: var(--taupe); text-decoration: none; transition: var(--transition); }
a:hover { color: var(--charcoal); }

/* ---- Navbar & Logo (Versione Chiara) ---- */
.navbar {
  /* Cambiato in Panna per far risaltare il logo scuro */
  background-color: var(--cream-dark) !important; 
  padding: 0.6rem 1.5rem;
  border-bottom: 1px solid var(--cream-dark);
  /* Una linea sottile Taupe sotto il panna per eleganza */
  box-shadow: 0 2px 0 0 var(--taupe), var(--shadow-sm); 
}

/* hero section uses light background and dark text */
.hero-section {
  background-color: var(--cream-dark) !important;
  color: var(--charcoal-light) !important;
  padding: 5rem 0;
  text-align: center;
}

.hero-section .btn-primary {
  background-color: var(--bs-secondary);
  border-color: var(--bs-secondary);
}

.logo-custom {
  height: 65px; 
  width: auto;
  display: block;
  /* Mix-blend-mode multiply funziona perfettamente su sfondo chiaro */
  mix-blend-mode: multiply; 
  transition: transform var(--transition);
}

.logo-custom:hover {
  transform: scale(1.02);
}

.nav-link {
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.85rem;
  font-weight: 700;
  /* Testo scuro per contrasto con la navbar panna */
  color: var(--charcoal) !important; 
  opacity: 0.8;
}

.nav-link:hover {
  opacity: 1;
  color: var(--taupe) !important;
}

/* ---- Sezioni ---- */
section { padding: 6rem 0; }

.bg-light {
  background-color: var(--cream-dark) !important;
}

/* ---- Cards ---- */
.card {
  border: 1px solid var(--cream-dark);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  background-color: var(--white);
  transition: all var(--transition);
}

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

/* ---- Bottoni ---- */
.btn-primary {
  background-color: var(--taupe);
  border-color: var(--taupe);
  color: var(--white);
  padding: 0.8rem 2.2rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-weight: 700;
  border-radius: 2px;
}

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

/* ---- Footer (Versione Chiara) ---- */
footer {
  /* Utilizziamo il panna più scuro per distinguere il footer dal corpo pagina */
  background-color: var(--cream-dark) !important; 
  color: var(--charcoal);
  border-top: 3px solid var(--taupe); /* Richiamo dorato del logo */
  padding: 4rem 0 2rem;
  box-shadow: 0 -4px 12px rgba(46,43,40,0.05);
}

footer small {
  color: var(--charcoal-light);
  letter-spacing: 0.05em;
  font-weight: 600; /* Leggermente più spesso per la leggibilità su panna */
}

/* Stile per eventuali link nel footer (Privacy, Note Legali, ecc.) */
footer a {
  color: var(--taupe);
  text-decoration: none;
  font-weight: 700;
}

footer a:hover {
  color: var(--charcoal);
}

/* --- Personalizzazione Tasto Menu Mobile --- */

/* 1. Cambia il colore del bordo del quadratino */
.navbar-toggler {
    border-color: var(--charcoal) !important;
}

/* 2. Cambia il colore delle tre lineette interne */
/* Usiamo una versione personalizzata dell'SVG di Bootstrap con il tuo colore Charcoal (#2e2b28) */
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(46, 43, 40, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

/* 3. (Opzionale) Cambia il colore quando il tasto viene cliccato o selezionato */
.navbar-toggler:focus {
    box-shadow: 0 0 0 0.25rem rgba(160, 140, 114, 0.25); /* Un'ombra leggera color Taupe */
}