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

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("../fonts/inter-latin-400-900-3100e775e861.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC,
    U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
    U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

: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;

  /* WordPress layout tokens needed by static pages that do not embed global styles. */
  --wp--preset--spacing--small: 20px;
  --wp--preset--spacing--medium: 32px;
  --wp--preset--spacing--large: 48px;
  --wp--preset--spacing--xxx-large: 128px;
  --wp--preset--font-size--small-plus: clamp(14px, calc(14px + 0.074vw), 17px);
  --wp--preset--font-size--xx-large: clamp(14px, calc(14px + 0.887vw), 30px);
  --wp--style--global--content-size: 1600px;
  --wp--style--global--wide-size: 1920px;
  --wp--style--root--padding-top: 0px;
  --wp--style--root--padding-right: var(--wp--preset--spacing--medium);
  --wp--style--root--padding-bottom: 0px;
  --wp--style--root--padding-left: var(--wp--preset--spacing--medium);
  --wp--style--block-gap: 2rem;

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

.wp-site-blocks {
  padding-top: var(--wp--style--root--padding-top);
  padding-bottom: var(--wp--style--root--padding-bottom);
}
.has-global-padding {
  padding-right: var(--wp--style--root--padding-right);
  padding-left: var(--wp--style--root--padding-left);
}
.has-global-padding > .alignfull {
  margin-right: calc(var(--wp--style--root--padding-right) * -1);
  margin-left: calc(var(--wp--style--root--padding-left) * -1);
}
.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
  max-width: var(--wp--style--global--content-size);
  margin-left: auto !important;
  margin-right: auto !important;
}
.is-layout-constrained > .alignwide {
  max-width: var(--wp--style--global--wide-size);
}
body .is-layout-flex {
  display: flex;
}
.is-layout-flex {
  flex-wrap: wrap;
  align-items: center;
}
.is-layout-flex > :is(*, div) {
  margin: 0;
}

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

/* Header layout: replica il layout flex dei blocchi WordPress anche nel sito statico. */
header .wp-block-group.is-layout-flex,
header .wp-block-navigation.is-layout-flex {
  display: flex;
  align-items: center;
  gap: var(--wp--style--block-gap, 24px);
}
header .wp-block-group.is-nowrap,
header .wp-block-navigation.is-nowrap {
  flex-wrap: nowrap;
}
header .wp-block-group.is-content-justification-space-between {
  justify-content: space-between;
}
header .wp-block-group.alignwide.is-layout-flex {
  width: 100%;
  max-width: var(--wp--style--global--wide-size, 1200px);
  margin-left: auto;
  margin-right: auto;
}
header .wp-container-core-group-is-layout-6c531013 {
  margin-left: auto;
  justify-content: flex-end;
}
body.has-banner header .polylang-switcher-inline,
body.has-banner header .polylang-switcher-inline a,
body.has-banner header .polylang-switcher-inline .divider,
body.has-banner header .wp-block-navigation__responsive-container-open {
  color: #fff !important;
}

/* 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 .has-light-pink-background-color > .wp-block-group {
  width: min(100%, var(--wp--style--global--wide-size, 1200px));
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
  padding-left: var(--wp--style--root--padding-left, 40px);
  padding-right: var(--wp--style--root--padding-right, 40px);
}
footer .wp-block-columns {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(24px, 5vw, 72px);
}
footer .wp-block-columns > .wp-block-column {
  flex: 1 1 0;
  min-width: 0;
}
footer .wp-block-column.float-right,
footer .wp-block-column.is-content-justification-right {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  text-align: right;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
footer .wp-block-column.float-right > .wp-block-group,
footer .wp-block-column.is-content-justification-right > .wp-block-group {
  margin-left: auto !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
footer .float-right * {
  float: none !important;
}
footer .wp-block-column.float-right p,
footer .wp-block-column.is-content-justification-right p {
  margin-left: auto !important;
  margin-right: 0 !important;
  text-align: right !important;
}
footer p,
footer figure {
  margin-top: 0;
  margin-bottom: 0;
}

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

/* Mobile: gli orari restano un touch target evidente, senza sottolineatura. */
@media (max-width: 767.98px) {
  footer a[href="/opening-hours"],
  footer a[href="/orari-apertura"] {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    text-decoration: none !important;
    border-bottom: 0 !important;
  }

  footer a[href="/opening-hours"]:focus-visible,
  footer a[href="/orari-apertura"]:focus-visible {
    outline: 3px solid currentColor;
    outline-offset: 4px;
    border-radius: 2px;
  }
}

/* Temporarily hidden home band. Keep the HTML in place for future reuse. */
.home-local-tips-band.is-hidden-for-now {
  display: none !important;
}

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

/* Hide social/review links only when they are inside the primary navigation. */
.wp-block-navigation
  > .wp-block-navigation__responsive-container
  .wp-block-navigation__responsive-container-content
  .wp-block-navigation__container
  > .wp-block-navigation-item
  > .wp-block-social-links {
  display: none !important;
}

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