:root {
  --color-bg: #f3f3f3;
  --color-white: #ffffff;
  --color-black: #000000;

  --color-primary: #95a390;
  --color-primary-light: #e3eae1;
  --color-primary-title: #444d41;

  --color-overlay: rgba(255,255,255,0.85);
  --color-muted: #666;
  --color-muted-2: #999;

  --font-body: "Bona Nova", serif;
  --font-heading: the-seasons, sans-serif;
  --font-alt: "bouba-round-variable", sans-serif;

  --clamp-logo-header: clamp(8rem, 15vw, 14rem);
  --clamp-byline-header: clamp(2.375rem, 4.425vw, 4.125rem);

  --fs-logo-header: var(--clamp-logo-header);
  --fs-byline-header: var(--clamp-byline-header);

  --fs-logo-footer: 6rem;
  --fs-byline-footer: 1.8rem;

  --clamp-h1: clamp(2.5rem, 5vw, 4rem);
  --clamp-h2: clamp(1.8rem, 3.5vw, 2.5rem);
  --clamp-h3: var(--clamp-body);
  --clamp-body: clamp(1.5rem, 2vw, 1.8rem);
  --clamp-breadcrumb: 1rem;

  --clamp-cta: var(--clamp-body);
  --clamp-menu-thumb: var(--clamp-body);

  --clamp-logo-spacing: clamp(3rem, 10vw, 10rem);
  --clamp-column-spacing: clamp(2rem, 7vw, 8rem);

  --fs-h1: var(--clamp-h1);
  --fs-h2: var(--clamp-h2);
  --fs-h3: var(--clamp-h3);
  --fs-body: var(--clamp-body);

  --fs-breadcrumb: var(--clamp-breadcrumb);
  --fs-cta: var(--clamp-cta);
  --fs-menu-thumb: var(--clamp-menu-thumb);

  --fw-body: 400;
  --fw-heading-light: 400;
  --fw-heading-bold: 500;

  --lh-body: 1;
  --lh-p: 1.25;
  --lh-nav: 1.5;

  --page-width-min: 25rem;
  --page-width-max: 60rem;
  --menu-gap: 3vw;
  --margin-auto: auto;

  --logo-margin: 20vh; /* var(--clamp-logo-spacing); */
  --section-margin: var(--clamp-column-spacing);
  --menu-padding: var(--clamp-column-spacing);

  --radius-small: 0;
  --radius-rounded: 999px;
  --radius-menu: 0;

  --mw-post-image: 512px;

  /* Le portate dei menù */
  --clamp-width-food: clamp(20rem, 50vw, 30rem);
  --width-food: var(--clamp-width-food);
  
  /* Larghezza della colonna principale */
  --clamp-width-menu-section: clamp(var(--page-width-min), 80vw, var(--page-width-max));
  --width-menu-section: clamp(100%, 50vw, var(--page-width-max));

  --ratio-square: 1 / 1;
  --ratio-rect: 16 / 9;
  --image-size: clamp(6.4rem, 12vw, 11.2rem);

  /* Example: responsive columns from 2 to 5 */
  --columns: clamp(2, calc(2 + (100vw - 320px) / (1200 - 320) * 3), 5);

  --wp-menu-bar: 46px;
}

* {
  box-sizing: border-box;
}

html, body {
  min-height: 100%;
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

body {
  line-height: var(--lh-body);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-body);
  text-align: center;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  background-color: var(--color-bg);
  font-variant-ligatures: normal;
  margin: 0;
  min-height: 100%;
}





.logo {
  margin: var(--logo-margin) 0;
}
.logo a {
  text-decoration: none;
  user-select: none;
  cursor: pointer;
}
.logo a:active {
  color: red !important;
}

.logo .logotype {
  font-family: var(--font-heading);
  font-size: var(--fs-logo-header);
  margin: 0 auto;
  width: max-content;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: var(--lh-body);
  color: var(--color-primary-title);
}

.logo .letter {
  display: inline-block;
}


.logo-o {
  /* Set viewport size from CSS variable */
  width: var(--image-size); 
  height: var(--image-size);
  aspect-ratio: 1 / 1;
  display: block;
  overflow: hidden;
  position: relative;
}

.reel {
  /* Initial position (1 image down) is maintained here */
  transform: translateY(calc(-1 * var(--image-size)));
  will-change: transform, filter;
}

.reel img {
  width: 100%;
  height: var(--image-size);
  display: block;
  object-fit: contain;
}

/* ---------------------------------------------------- */
/* CSS ANIMATION LOGIC */
/* ---------------------------------------------------- */

/* Staggered Delay: NOW CORRECTLY COUPLED WITH .spinning CLASS */
.logo-o.spinning.o2 .reel {
  animation-delay: 0.125s; 
}

/* Spinning Class (toggled by JavaScript) */
.logo-o.spinning .reel {
  /* animation: 
    scroll 3s cubic-bezier(.5,0,.5,1) 1 forwards, 
    blur 3s cubic-bezier(.5,0,.5,1) 1; */
  animation:
    scroll 3s cubic-bezier(.31,-0.09,.61,1.11) 1 forwards,
    blur 3s cubic-bezier(.41,-0.18,.7,1.24) 1;
}

@keyframes scroll {
  /* Start position (1 image down) */
  0% {transform: translateY(calc(-1 * var(--image-size)));}
  
  /* Final stop position (31 steps down) */
  100% {transform: translateY(calc(-31 * var(--image-size)));}
}

/* Blur Keyframes */
@keyframes blur {
  0% {filter: blur(0);}
  10% {filter: blur(0);}
  30% {filter: blur(2px);}
  60% {filter: blur(2px);}
  80% {filter: blur(0);}
  100% {filter: blur(0);} 
}






.byline {
  font-size: var(--fs-byline-header);
  font-family: var(--font-heading);
  font-weight: var(--fw-heading-light);
  margin: 0;
  color: var(--color-black);
}

.title-menus {
  font-family: var(--font-heading);
  font-size: var(--fs-h1);
  font-weight: var(--fw-body);
  margin-bottom: var(--section-margin);
}

.section-menus {
  margin: var(--menu-gap) var(--margin-auto);
  width: 100%;
  max-width: var(--page-width-max);
}

.menus {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--min-thumb-width, 20rem), 1fr));
  gap: var(--menu-gap);
  padding: 0;
  margin: var(--menu-gap) 0;
}

.menus li {
  display: contents;
}

.menus a.menu-thumb {
  background-color: var(--color-white);
  position: relative;
  aspect-ratio: var(--ratio-square);
  display: flex;
  padding: var(--padding-medium);
  border-radius: var(--radius-small);
}
.menus a.menu-thumb:hover {
  box-shadow: 0 0 0 4px var(--color-primary) inset;
}

.menus a.menu-thumb h2 {
  position: absolute;
  font-size: var(--fs-menu-thumb);
  bottom: 10%;
  width: 80%;
  padding: 1rem 0;
  margin: 0;
  background-color: var(--color-overlay);
  color: var(--color-black);
  font-weight: var(--fw-body);
  left: 10%;
}
.menus a.menu-thumb .wp-post-image {
  margin: auto;
  max-width: 80%;
  object-fit: cover;
}
.section-menus {
  margin: var(--menu-gap) var(--margin-auto);
  width: 100%;
  max-width: var(--page-width-max);
}

/* --- Horizontal scroll on small viewports --- */
@media (max-width: 768px) {
  .menus {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: var(--menu-gap);
  }

  .menus a.menu-thumb {
    flex: 0 0 auto;
    scroll-snap-align: start;
    width: 70%;
    max-width: 18rem;
  }
}

h1.page-title {
  font-family: var(--font-heading);
  font-size: var(--fs-h1);
  font-weight: var(--fw-heading-light);
  max-width: var(--page-width-max);
  margin: 0 auto;
  margin-bottom: var(--section-margin);
  /* padding: 0 var(--menu-padding); */
  color: var(--color-primary-title);
}

article {
  display: block;
  width: 100%;
  max-width: var(--page-width-max);
  padding: var(--menu-padding);
  margin: var(--menu-gap) var(--margin-auto);
  background-color: var(--color-white);
  border-radius: var(--radius-small);
  position: relative;
  color: var(--color-muted);
}
article.cta-box {
  padding: calc( var(--menu-padding) / 2);
  background-color: var(--color-primary-light);
  color: var(--color-primary-title);
}
article.cta-box + article {
  margin-top: calc( var(--section-margin) * 2);
}
article p {
  line-height: var(--lh-p);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-body);
  text-align: left;
}
article.cta-box p {
  margin: 0;
}
article h2 {
  font-family: var(--font-heading);
  font-size: var(--fs-h2);
  font-weight: var(--fw-heading-light);
  margin: 0 auto;
  margin-bottom: var(--section-margin);
  color: var(--color-primary-title);
  max-width: 30rem;
  line-height: 1.3;
}
article p + h2 {
  margin-top: var(--section-margin);
}

article h3 {
  font-size: var(--fs-h3);
  font-weight: var(--fw-heading-bold);
  color: var(--color-black);
  margin: 0;
  margin-bottom: 1rem;
}

article.menu h3 + .wp-block-list,
article.menu h3 + p {
  font-style: italic;
  text-align: center;
  width: var(--width-food);
  margin: var(--margin-auto);
  margin-bottom: 3rem;
}

.wp-block-list {
  font-style: italic;
  list-style-type: none;
  padding: 0;
  line-height: var(--lh-p);
}

article .drinks-included {
  margin-top: var(--section-margin);
  text-align: center;
  font-size: 80%;
}

.logos {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  justify-content: space-around;
  padding: var(--padding-section);
}

.wp-post-image {
  width: 100%;
  display: block;
  margin: auto;
  object-fit: cover;
}
.wp-post-image.square {
  /* max-width: var(--mw-post-image); */
  height: auto !important;
  aspect-ratio: var(--ratio-square);
  object-fit: contain;
}
.menu-thumb .wp-post-image.square.is_menu {
  object-fit: contain;
}
.wp-post-image.landscape {
  width: 100%;
  max-width: unset;
  height: auto !important;
  aspect-ratio: var(--ratio-rect);
  border-radius: var(--radius-menu);
  margin-left: calc( -0.5 * var(--section-margin));
  margin-top: calc( -0.5 * var(--section-margin));
  width: calc( 100% + var(--section-margin) );
}
figure.wp-block-image {
  margin: 0;
  margin-bottom: var(--section-margin);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 50vh;
  position: relative;
}
figure.wp-block-image.square {
  height: 100%;
}
figure.wp-block-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: unset !important;
}
p + figure.wp-block-image {
  margin-top: var(--section-margin); 
}
figcaption {
  font-family: var(--font-alt);
  font-size: var(--fs-breadcrumb);
  line-height: var(--fs-breadcrumb);
  position: absolute;
  bottom: 5rem;
  color: var(--color-muted-2);
  background-color: white;
  padding: .66rem;
  border-radius: 2px;
  max-width: 20rem;
  box-shadow: 0 2px 4px 0 rgba(0,0,0,.25);
}

.language-switcher,
.breadcrumb {
  font-family: var(--font-alt);
  margin: var(--section-margin) var(--margin-auto);
}

.breadcrumb {
  width: var(--width-menu-section);
  margin: 0 0 var(--section-margin);
}

.language-switcher {
  width: unset;
  text-align: left;
  margin: 0;
}

.language-switcher ul,
.breadcrumb ul {
  list-style-type: none;
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  gap: 1rem;
}
.language-switcher ul {
  flex-direction:column;
  gap: 0;
}
.language-switcher li,
.breadcrumb li {
  display: contents;
}

.language-switcher a {
  color: var(--color-white);
}
.current-lang-text {
  font-weight: var(--fw-heading-bold);
}
.breadcrumb li:not(:first-child):before {
  display: block;
  content: " > ";
}

.breadcrumb a,
.breadcrumb li {
  color: var(--color-muted-2);
  font-size: var(--fs-breadcrumb);
}

h2.siblings-title {
  font-weight: var(--fw-heading-light);
  margin: var(--section-margin) 0;
}

footer {
  background-color: var(--color-primary);
  color: var(--color-white);
  flex-grow: 1;
  padding: var(--section-margin) 0;
  margin-top: var(--section-margin);
}

.navigation-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  margin: 0 var(--margin-auto);
  width: calc( 100% - calc( 2 * var(--menu-gap)) );
  max-width: var(--page-width-max);
  font-family: var(--font-alt);
  font-size: var(--fs-breadcrumb);
  line-height: var(--lh-nav);
  gap: 2rem;
}
.navigation-wrapper ul {
  flex-shrink: 0;
}

.navigation {
  list-style-type: none;
  text-align: left;
  padding: 0;
  margin: 0;
}

.navigation a {
  color: var(--color-white);
}

.navigation a:hover {
  text-decoration: underline;
}
.wpforms-submit,
.cta {
  all: unset;
  display: block;
  padding: .5rem 1.5rem;;
  background-color: var(--color-primary-title);
  border-radius: var(--radius-rounded);
  width: max-content;
  font-family: var(--font-alt);
  font-size: var(--fs-cta);
  line-height: var(--lh-nav);
  color: var(--color-white);
  margin: var(--section-margin) auto 0;
  user-select: none;
}
.cta-box .cta {
  margin-top: calc( var(--section-margin) / 2 );
}
.wpforms-submit {
  margin: calc(var(--section-margin) / 2) auto;
}
.wpforms-submit:hover,
.cta:hover {
  color: var(--color-white);
  background-color: var(--color-black);
}

.logo-footer {
  margin-top: var(--section-margin);
}
.logo-footer .logotype {
  font-size: var(--fs-logo-footer);
  color: var(--color-white);
}

.logo-footer .byline {
  font-size: var(--fs-byline-footer);
  color: var(--color-white);
}

s {
  display: block;
  margin: 1rem;
  text-decoration: none;
}

blockquote {
  font-style: italic;
  margin-top: var(--section-margin);
  margin-left: 0;
  padding-left: 2rem;
  border-left: 4px solid var(--color-primary);
}
cite {
  text-align: left;
}
.map-embed {
  position: relative;
  width: 100%;
  aspect-ratio: var(--ratio-rect);
  margin-top: var(--section-margin);
}

.map-embed iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  border: 0;
}
.wpforms-container {
  max-width: 500px;
  margin: 0 auto;
  margin-top: var(--section-margin);
}
.wpforms-form {
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  font-family: var(--font-alt);
  font-size: calc( var(--fs-body) * .75);
  padding: 3vw;
  background-color: #f5eeee;
  border-radius: 3vw;
  margin-bottom: var(--section-margin);
}
.wpforms-field {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: calc( var(--section-margin) / 2);
}
.wpforms-field:last-child {
  margin-bottom: 0;
}
.wpforms-field label {
  color: var(--color-black);  
}
.wpforms-field input,
.wpforms-field textarea {
  padding:  calc( var(--fs-body) * .375);
  font-family: var(--font-alt);
  font-size: calc( var(--fs-body) * .75);
  border-radius: 4px;
  border: 2px solid var(--color-primary);
}
.wpforms-field textarea {
  field-sizing: content;
  min-height: calc( var(--fs-body) * 6 );
}
.wpforms-error {
  color: red;
}

.blocks-gallery-item img {
  display: block;
  border: 4px solid white;
}


html :where(img[class*="wp-image-"]) {
  height: auto;
  max-width: 100%;
}
ul.filebird-block-filebird-gallery {
  margin:auto!important;
  padding:0!important;
  width:100%
}
ul.filebird-block-filebird-gallery.layout-grid {
  display:grid;
  grid-gap:20px;
  align-items:stretch;
  grid-template-columns:repeat(var(--columns),1fr);
  justify-items:stretch
}
ul.filebird-block-filebird-gallery.layout-grid li img {
  border:1px solid #ccc;
  box-shadow:2px 2px 6px 0 rgba(0,0,0,.3);
  height:100%;
  max-width:100%;
  -o-object-fit:cover;
  object-fit:cover;
  width:100%
}
ul.filebird-block-filebird-gallery.layout-masonry {
  -moz-column-count:var(--columns);
  -moz-column-gap:var(--space);
  column-gap:var(--space);
  -moz-column-width:var(--min-width);
  columns:var(--min-width) var(--columns);
  display:block;
  overflow:auto;
  width: calc( 100% + var(--section-margin));
  margin-left: calc( var(--section-margin) / -2 ) !important;
}
ul.filebird-block-filebird-gallery.layout-masonry li {
  margin-bottom:var(--space)
}
ul.filebird-block-filebird-gallery li {
  list-style:none
}
ul.filebird-block-filebird-gallery li figure {
  height:100%;
  margin:0;
  padding:0;
  position:relative;
  width:100%
}
ul.filebird-block-filebird-gallery li figure figcaption {
  background:linear-gradient(0deg,rgba(0,0,0,.7),rgba(0,0,0,.3) 70%,transparent);
  bottom:0;
  box-sizing:border-box;
  color:#fff;
  font-size:.8em;
  margin:0;
  max-height:100%;
  overflow:auto;
  padding:3em .77em .7em;
  position:absolute;
  text-align:center;
  width:100%;
  z-index:2
}
ul.filebird-block-filebird-gallery li figure figcaption a {
  color:inherit
}
.filebird-block-filebird-gallery {
  --columns: 2 !important;
}

@media (min-width: 768px) {
  .filebird-block-filebird-gallery {
    --columns: 3 !important;
  }
}

@media (min-width: 1024px) {
  .filebird-block-filebird-gallery {
    --columns: 4 !important;
  }
}

.nav-menu {
  position: absolute;
  width: 100%;
  top: 0;
  bottom: 0;
  background-color: rgba(255,255,255,.8);
  backdrop-filter: blur(6px);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  line-height: 2;
  user-select: none;
  /* -webkit-user-select: none;
  pointer-events: none; */
}
/* .nav-menu_expanded .nav-menu {
  pointer-events: all;
} */
.nav-menu[hidden] {
  display: none;
}
.nav-menu ul {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 3rem;
  width: 100%;
  height: 100vh;
  max-width: var(--page-width-max);
  margin: 0 auto;
}

.nav-menu li {
  display: contents;
}
.nav-menu a {
  color: var(--color-primary);
}
.nav-menu .home a {
  font-size: 1.5rem;
  font-family: var(--font-heading);
}
.nav-menu .current_page_item a {
  color: var(--color-black);
}

.nav-menu-close {
  position: absolute;
  top: 0;
  right: 0;
  width: 4rem;
  padding: 1rem;
  text-align: center;
  background: none;
  border: none;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  color: var(--color-primary);
  user-select: none;
  -webkit-user-select: none;
}
.nav-menu-close:hover {
  color: var(--color-black);
}
.admin-bar .nav-menu-close {
  top: var(--wp-menu-bar);
}

@media (min-width: 768px) {
  .nav-menu {
    position: fixed;
    align-self: flex-start; /* key */
    top: 0;
    padding: 1rem;
    margin: 0;
    font-family: var(--font-alt);
    font-size: var(--fs-breadcrumb);
    border-bottom: 4px solid var(--color-bg);
  }
  .admin-bar .nav-menu {
    top: var(--wp-admin--admin-bar--height);
  }
  .nav-menu ul {
    height: unset !important;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
  }

  .nav-menu-close {
    display: none;
  }
}

.nav-menu-toggle {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  text-align: center;
  padding: 1rem;
  padding-left: calc( 100vw - 3rem);
  background-color: rgba(255,255,255,.8);
  backdrop-filter: blur(6px);
  z-index: 999;
  border: none;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  color: var(--color-primary);
  user-select: none;
  -webkit-user-select: none;
}
.nav-menu-toggle:after {
  content: 'FOHO';
  font-family: var(--font-heading);
  font-weight: 400;
  position: absolute;
  left: 1rem;
}
.admin-bar .nav-menu-toggle {
  top: var(--wp-menu-bar);
}
.nav-menu-toggle:hover {
  color: var(--color-black);
}
@media (min-width: 768px) {
  .nav-menu[hidden] {
    display: block;
  }
  .nav-menu-toggle {
    display: none;
  }
}
body.nav-menu_expanded {
  overflow: hidden;
}
body.nav-menu_expanded {
  background-color: white;
}
body.nav-menu_expanded :not(.nav-menu):not(.nav-menu *) {
  display: none;
}

.emoji {
  width: 16px;
  display: inline-block;
  vertical-align: bottom;
}