@font-face {
  font-family: 'Playfair Display';
  src: url('../fonts/PlayfairDisplay-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}

:root {
  --cassiopeia-font-family-body: "Playfair Display", serif;
  --cassiopeia-font-family-headings: "Playfair Display", serif;
  --cassiopeia-font-weight-headings: 400;
  --cassiopeia-font-weight-normal: 400;
}



html {
  background-color: #F0F0F0;
}

body::before {
  content: "";
  display: block;
  width: 100%;
  height: 30px;
  background-color: #F0F0F0;
}

body { font-family: "Playfair Display", serif; font-size: 1.1rem; line-height: 1.7; }
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6 {
  font-family: "Playfair Display", serif; font-weight: 400;
}

@media (min-width: 992px) {
  body {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
  }
}

.site-grid {
  margin-bottom: 0px;
}

/* header: modification - put a small padding around the logo */
.personal-site-logo {
  padding: 10px;
  padding-left: 20px;
}

.personal-site-title {
  padding-left: 20px;
}

/* remove any space below the front logo */
.container-topbar {
  margin: 0;
  padding: 0;
}

.container-topbar * {
  margin-bottom: 0;
}

/* make the background colour around menu golden */
.container-header .grid-child {
  background-color: #d4ab19;
  padding: 0em; /* already set — keep or adjust */
  margin-bottom: 0;
}

/* remove any space below the banner */
.container-below-top {
  margin: 0;
  padding: 0;
}

.container-below-top * {
  margin-bottom: 0;
}

/* get the banner image right */
.container-below-top.grid-child {
   width: 100%;
   height: auto;
   display: block;
   padding: 0px;
}

.container-below-top img {
  width: 100%;
  height: auto;
}

/* MENU STAFF - colore standard nero */
.container-header .mod-menu {
    color: #000 !important;
}

.container-header .mod-menu > li > a,
.container-header .mod-menu > li > span {
    color: #000 !important;
}

/* linea attiva / hover standard nera */
.container-header .mod-menu > li.active:after,
.container-header .mod-menu > li:hover:after {
    background: #000 !important;
}

/* mobile */
@media (width <= 991.98px) {
    .container-header .mod-menu .mod-menu__sub a,
    .container-header .mod-menu .mod-menu__sub span {
        color: #000 !important;
    }
}
/* =========================
   GALAVERNI - MENU BIANCO
   ========================= */

.container-header nav[aria-label="Galaverni Menu"] .mod-menu > li > a,
.container-header nav[aria-label="Galaverni Menu"] .mod-menu > li > span {
    color: #fff !important;
}

/* linea attiva / hover bianca */
.container-header nav[aria-label="Galaverni Menu"] .mod-menu > li.active:after,
.container-header nav[aria-label="Galaverni Menu"] .mod-menu > li:hover:after {
    background: #fff !important;
}

/* Two-column footer grid */
.footer .grid-child {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: center;
  padding: 2.5rem 1rem;
}

/* Image column styling */
.footer .mod-footer-image {
  display: flex;
  justify-content: center; /* change to flex-start or flex-end to align image differently */
}

.footer .mod-footer-image img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: auto auto; /* centers the image itself if flex isn't fully controlling it */
}