/* ============================================================
   Camillo a Piazza Navona — Brand override
   Sostituisce i font WordPress originali con Inter
   e adegua tipografia/colori al logo.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

:root {
  /* ─── Override font-family WordPress presets ───────────────── */
  /* Era "Displace 2.0" (display font lettering) → Inter Black */
  --wp--preset--font-family--displace-2-0: "Inter", system-ui, -apple-system, sans-serif;
  /* Era "TitlingGothicFB Wide" (nav + heading) → Inter */
  --wp--preset--font-family--titlinggothicfb-wide: "Inter", system-ui, -apple-system, sans-serif;
  /* Era "TitlingGothicFB Normal" (body/UI) → Inter */
  --wp--preset--font-family--titlinggothicfb-normal: "Inter", system-ui, -apple-system, sans-serif;

  /* ─── Brand tokens espliciti (dal logo PDF) ────────────────── */
  --camillo-pink:        #faa8b5;  /* logo pink reale */
  --camillo-pink-deep:   #e3869b;  /* WP intense-pink, già definito */
  --camillo-pink-light:  #f5c1cd;  /* WP light-pink, già definito */
  --camillo-cream:       #fff6e8;  /* WP cream, già definito */
  --camillo-dark:        #2c2e35;  /* logo dark reale */
  --camillo-ink:         #1a1a1a;  /* per body text */

  /* ─── Tipografia ───────────────────────────────────────────── */
  --font-display: "Inter", system-ui, -apple-system, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, sans-serif;
}

/* ============================================================
   TIPOGRAFIA — peso per ruolo
   Inter Black (900) era "Displace 2.0" (lettering wordmark)
   Inter Bold (700) era "TitlingGothicFB Wide" (nav/heading)
   Inter Medium (500) era "TitlingGothicFB Normal" (UI)
   ============================================================ */

body {
  font-family: var(--font-body);
  font-weight: 400;
  font-feature-settings: "ss01", "cv11";  /* alt 'a' e '1' più moderni */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Tutto ciò che era "Displace 2.0" → Inter Black, condensato visivamente */
.has-displace-2-0-font-family,
[class*="displace"] {
  font-family: var(--font-display) !important;
  font-weight: 900 !important;
  letter-spacing: -0.04em !important;
  line-height: 0.92 !important;
}

/* Tutto ciò che era "TitlingGothicFB Wide" (nav, titoli secondari) */
.has-titlinggothicfb-wide-font-family,
.wp-block-navigation,
.wp-block-site-title {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
}

.has-titlinggothicfb-normal-font-family {
  font-family: var(--font-body) !important;
  font-weight: 500 !important;
}

/* Headings di default → Inter Black */
h1, h2, h3,
.wp-block-heading {
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 0.95;
}

h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

/* ============================================================
   COLORE — allinea i preset WP al palette del logo
   ============================================================ */

/* Il "dark" del logo è leggermente più caldo del nero puro */
.has-black-color { color: var(--camillo-ink) !important; }
.has-black-background-color { background-color: var(--camillo-ink) !important; }

/* ============================================================
   LOGO SVG — colorabile via currentColor
   ============================================================ */

/* Il theme converte gli <img> con .svg in <svg> inline (vedi app.js).
   Il nostro SVG canonico ha solo viewBox, niente width/height intrinseco
   → forziamo il dimensionamento via CSS in ogni contesto in cui appare. */

/* Header — site logo principale */
.wp-block-site-logo .custom-logo-link img,
.wp-block-site-logo .custom-logo-link svg,
.wp-block-site-logo a img,
.wp-block-site-logo a svg,
body.has-banner header .wp-block-site-logo svg,
body.has-banner header .wp-block-site-logo img {
  display: block;
  width: clamp(180px, 18vw, 260px);
  height: auto;
  color: var(--camillo-pink) !important;
}

/* Forza i path dell'SVG inline a usare currentColor
   (l'app.js converte img→svg ma non preserva fill=currentColor) */
.wp-block-site-logo svg path,
.wp-block-site-logo svg.custom-logo path {
  fill: currentColor;
}
.wp-block-site-logo svg path[fill="none"],
.wp-block-site-logo svg.custom-logo path[fill="none"] {
  fill: none;
}

/* Header con logo grande: aggiungi un po' più di respiro tra header e hero */
.wp-block-cover.alignfull > .wp-block-cover__inner-container .wp-block-group {
  margin-top: 0;
}

/* Mobile header — logo bianco su sfondo scuro */
#logo-bianco img,
#logo-bianco svg {
  display: block;
  width: 160px;
  height: auto;
  color: #fff;
}

/* Footer — logo nero, dimensione più contenuta */
#logo-nero img,
#logo-nero svg {
  display: block;
  width: 220px;
  height: auto;
  color: var(--camillo-ink);
}

/* Favicon link tags non sono interessati; quelli usano il file SVG raw */

/* ============================================================
   SITE TITLE — nascondere il testo accanto al logo
   Il logo SVG già contiene "CAMILLO A PIAZZA NAVONA" come wordmark,
   quindi l'<h1> testuale è ridondante. Lo manteniamo accessibile
   per screen reader e SEO, ma lo nascondiamo visivamente.
   ============================================================ */

.wp-block-site-title {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   COVER BLOCK STACKING FIX
   Stripping srcset/sizes dagli <img> dei cover via build-step risolve
   il rendering. Qui forziamo solo lo z-index per il proper layering:
   img (sfondo) < span overlay < contenuto.
   ============================================================ */

.wp-block-cover > .wp-block-cover__image-background,
.wp-block-cover > .wp-block-cover__video-background,
.wp-block-cover-image > .wp-block-cover__image-background,
.wp-block-cover-image > .wp-block-cover__video-background {
  z-index: 0;
}

.wp-block-cover > .wp-block-cover__background,
.wp-block-cover > .wp-block-cover__gradient-background,
.wp-block-cover-image > .wp-block-cover__background,
.wp-block-cover-image > .wp-block-cover__gradient-background {
  z-index: 1;
}

.wp-block-cover > .wp-block-cover__inner-container,
.wp-block-cover-image > .wp-block-cover__inner-container {
  z-index: 2;
}

/* ============================================================
   FOOTER — restyle
   Sfondo light-pink. Link social puliti, orari prominenti,
   striscia nera in fondo che diventa una micro-bar copyright.
   ============================================================ */

footer .has-light-pink-background-color {
  background-color: var(--camillo-pink) !important;
  color: var(--camillo-ink);
}

/* Footer logo — colorabile su sfondo rosa */
footer #logo-nero svg,
footer #logo-nero img,
body footer #logo-nero svg path,
footer .wp-image-329 {
  color: var(--camillo-ink) !important;
}
footer #logo-nero svg path:not([fill="none"]) {
  fill: currentColor !important;
}

/* Cintura nera in fondo: trasforma da blocco "vuoto" a copyright */
footer .wp-block-group.has-black-background-color {
  min-height: auto !important;
  padding: 16px var(--wp--preset--spacing--large) !important;
}
footer .footer-copy {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  text-align: center;
}

/* Riduci lo spacer enorme tra le righe del footer */
footer .wp-block-spacer[style*="149px"] {
  height: 56px !important;
}
footer .wp-block-spacer[style*="75px"] {
  height: 32px !important;
}

/* Social link row — pulito, no underline blu di default */
footer p a {
  color: var(--camillo-ink);
  text-decoration: none;
  font-weight: 700;
  letter-spacing: 0.04em;
  transition: color .2s ease, transform .2s ease;
  display: inline-block;
}
footer p a:hover {
  color: var(--camillo-pink-deep);
  transform: translateY(-1px);
}

/* Orari nel footer — accent bold con possibilità di hover sui contatti */
footer .has-displace-2-0-font-family {
  line-height: 1.05;
}

/* ============================================================
   BUTTONS — restyle dei wp-block-button outline
   Il default è grigio (#979797). Allineiamo al brand.
   ============================================================ */

.wp-block-button.is-style-outline .wp-block-button__link,
.wp-block-button.is-style-outline--3 .wp-block-button__link,
.wp-block-button.is-style-outline--4 .wp-block-button__link {
  border-color: currentColor !important;
  border-width: 2px !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  padding: 0.95em 1.6em !important;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .15s ease;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-outline--3 .wp-block-button__link:hover,
.wp-block-button.is-style-outline--4 .wp-block-button__link:hover {
  background-color: var(--camillo-pink) !important;
  border-color: var(--camillo-pink) !important;
  color: var(--camillo-ink) !important;
  transform: translateY(-1px);
}

/* ============================================================
   CROP IMMAGINI — object-position
   ============================================================ */

/* Home hero: crop leggermente a destra */
.banner .wp-block-cover__image-background.wp-post-image {
  object-position: 62% 50%;
}

/* Home drink (terza immagine): crop leggermente in alto */
.wp-image-212.wp-block-cover__image-background {
  object-position: 50% 35%;
}

/* ============================================================
   HERO BANNER — primo cover delle pagine interne
   Il <main> ha margin-top negativo (~-150px) per far entrare il
   banner sotto l'header trasparente. Sulla home il "Welcome to
   Camillo" è centrato e non interferisce, ma su pagine interne
   con titolo grande in cima al cover (MADE IN CAMILLO, ecc.)
   il testo finisce nascosto sotto il logo. Aggiungiamo padding-top
   compensativo SOLO al primo cover banner.
   ============================================================ */

main .banner > .wp-block-cover.alignfull:first-child,
main > .entry-content > .banner:first-child .wp-block-cover.alignfull {
  padding-top: clamp(120px, 18vh, 200px);
}

/* ============================================================
   NAVIGATION OVERLAY — quando il menu è aperto
   Il CSS WP usa background-color:inherit, che eredita "transparent"
   dal nav parent. Forziamo bg scuro come l'originale.
   ============================================================ */

.wp-block-navigation__responsive-container.is-menu-open {
  background-color: var(--camillo-ink) !important;
  color: #fff !important;
  z-index: 100000 !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
  font-family: var(--font-display) !important;
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1.05;
  gap: 0.4em;
  font-size: clamp(2rem, 7vw, 5rem) !important;
}

.wp-block-navigation__responsive-container.is-menu-open a {
  color: #fff !important;
  text-decoration: none;
  transition: color .2s ease, transform .2s ease;
  display: inline-block;
}
.wp-block-navigation__responsive-container.is-menu-open a:hover {
  color: var(--camillo-pink) !important;
  transform: translateX(8px);
}
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item.current-menu-item a {
  color: var(--camillo-pink) !important;
}

/* Pulsante chiudi più visibile */
.wp-block-navigation__responsive-container-close {
  color: #fff !important;
  padding: 1.5rem !important;
}
.wp-block-navigation__responsive-container-close:hover {
  color: var(--camillo-pink) !important;
}

/* Social links nel menu — riga inline più piccola in fondo */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-social-links {
  margin-top: 2rem;
  font-size: 1rem;
  gap: 0.5rem;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-social-link {
  background: transparent !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-social-link-label {
  display: inline !important;
  position: static !important;
  clip: auto !important;
  height: auto !important;
  width: auto !important;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.05em;
  font-size: 0.9rem;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-social-link svg {
  display: none;
}

/* Body lock quando menu aperto */
html.has-modal-open,
html.has-modal-open body {
  overflow: hidden;
}