/* gvm additions: pinned intro card + "diario di bordo" post log, on top of the
   base stylesheet, kept separate so it's easy to tell apart. */

/* Sticky footer: a short page (e.g. Chi sono) used to leave the footer
   floating right under the two-sentence content, with a dead gap of blank
   viewport below it. #page becomes a full-height flex column so #content
   grows to fill the gap and the footer always lands at the bottom of the
   screen at minimum - on longer pages (the home log) content already
   exceeds one viewport, so this has no effect there, it just sits after the
   content as before. Pure flexbox, no fixed heights, so it holds up at any
   viewport size including mobile. */
#page.site {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
#content.site-content {
  flex: 1 0 auto;
}
#colophon.site-footer {
  flex-shrink: 0;
}

/* The bundled theme CSS hides the whole nav below 1024px
   (@media screen and (max-width:64em) .navbar-collapse{display:none}),
   expecting a hamburger button + slide-out drawer driven by the original
   theme's JS, which the engine doesn't ship. With no toggle button rendered
   at all, that left phones and tablets with literally no way to navigate.
   We only have 2 links, so the simplest robust fix is to just always show
   them (no JS involved) and let the header wrap onto its own row instead of
   squeezing next to the logo. */
.navbar-collapse.collapse {
  display: block;
}
/* The theme's drawer-mode rules (uppercase, bold, cyan current-page color,
   block-stacked <li>s meant for a dark sidebar) are scoped to the same
   max-width:1024px range where it used to hide the nav entirely. Now that
   the nav is forced visible across that whole range, these corrections need
   to cover that same range, not just phone widths, or the tablet-width gap
   between "phone fix" and "desktop CSS" shows the broken drawer styling. */
@media (max-width: 1024px) {
  #menu-main-menu-1 {
    display: flex;
    gap: 1.5em;
    justify-content: flex-end;
  }
  .navbar-nav li {
    display: inline-block;
    float: none;
    margin: 0;
    padding: 0;
    border-bottom: none;
  }
  .navbar-nav li a {
    padding: 0.3em 0;
    margin: 0;
    color: #fff;
    font-weight: 500;
    text-transform: none;
    border-bottom: 1px solid transparent;
  }
  .navbar-nav li.current-menu-item a {
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.6);
  }
}
@media (max-width: 680px) {
  .header-inner {
    flex-wrap: wrap;
    row-gap: 0.5em;
  }
  .header-logo-wrapper {
    max-width: 100%;
  }
  .custom-logo-text {
    max-width: none;
  }
  /* matches the bundled rule's specificity (body:not(.x) a.custom-logo-text)
     so this actually wins instead of being silently outranked by it */
  body:not(.wp-custom-logo) a.custom-logo-text {
    font-size: 17px;
    font-size: 1.0625rem;
  }
  .header-navigation-wrapper {
    flex-basis: 100%;
    flex: 1 1 100%;
  }
  #menu-main-menu-1 {
    justify-content: flex-start;
  }
}

@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url(fonts/Bricolage-variable.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 {
  --gvm-paper: #f5f0e6;
  --gvm-ink: #2c2620;
  --gvm-muted: #6b6152;
  --gvm-rule: #cabfa8;
  --gvm-accent: #4f6f6a;
  --gvm-sans: -apple-system, "Segoe UI", Inter, sans-serif;
  --gvm-title: "Bricolage Grotesque", -apple-system, "Segoe UI", Inter,
    sans-serif;
  --gvm-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

/* ---- pinned intro (the "Here we go" landing card) ---- */
/* The bundled theme centers `.site-main article` text whenever the body has
   the "blog" class (home page only) - matches with higher specificity than
   a plain .gvm-pinned rule would, so it silently wins under 1024px. Match
   its selector shape to actually override it. */
body:not(.page-layout-sidebar-right).blog .site-main article.gvm-pinned {
  text-align: left;
}
.gvm-pinned {
  max-width: var(--container-width-narrow);
  margin: 0 auto 3.5em;
  padding: 2.25em 2.5em;
  background: var(--gvm-paper);
  border-left: 3px solid var(--gvm-accent);
}
.gvm-pinned-label {
  margin: 0 0 0.7em;
  font-family: var(--gvm-sans);
  font-size: 0.75em;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gvm-muted);
}
.gvm-pinned-body {
  font-family: var(--gvm-sans);
  color: var(--gvm-ink);
  font-size: 1.1em;
  line-height: 1.75;
}
.gvm-pinned-body p:last-child {
  margin-bottom: 0;
}

/* ---- diario di bordo: the post log ---- */
.gvm-log {
  max-width: var(--container-width-narrow);
  margin: 0 auto;
  list-style: none;
  padding: 0 0 0 1.75em;
  border-left: 2px solid var(--gvm-rule);
}
.gvm-entry {
  position: relative;
  padding-bottom: 2.25em;
}
.gvm-entry:last-child {
  padding-bottom: 0;
}
/* A definitive close to the log, so reaching the end of 36 posts reads as
   "that's everything" rather than "did this break?" */
.gvm-log-end {
  max-width: var(--container-width-narrow);
  margin: 2.5em auto 0;
  padding-top: 1.75em;
  border-top: 1px solid var(--gvm-rule);
  text-align: center;
  font-family: -apple-system, "Segoe UI", Inter, sans-serif;
  font-size: 0.8em;
  letter-spacing: 0.04em;
  color: var(--gvm-muted);
}
.gvm-entry::before {
  content: "";
  position: absolute;
  left: calc(-1.75em - 5px);
  top: 0.5em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gvm-accent);
}
.gvm-entry-date {
  display: block;
  font-family: var(--gvm-mono);
  font-size: 0.78em;
  letter-spacing: 0.02em;
  color: var(--gvm-accent);
}
.gvm-entry-title {
  display: block;
  font-family: var(--gvm-title);
  font-weight: 700;
  letter-spacing: -0.01em;
  font-size: 1.65em;
  line-height: 1.25;
  color: var(--gvm-ink);
  text-decoration: none;
  margin: 0.15em 0 0.35em;
  text-wrap: balance;
}
.gvm-entry-title:hover {
  color: var(--gvm-accent);
}
.gvm-entry-excerpt {
  font-size: 0.98em;
  color: var(--gvm-muted);
  line-height: 1.65;
  max-width: 58ch;
  margin: 0;
}

@media (max-width: 640px) {
  .gvm-entry-title {
    font-size: 1.35em;
  }
}

/* One display face for every title-scale element on the site: the hero
   name, single post/page titles, tag-archive headings, and log entries.
   Everything else - tagline, pinned intro text, nav, labels, meta - stays on
   Inter. Titles vs. text is the whole system, instead of ad hoc treatments. */
.site-title,
.hentry .entry-title,
.page-title {
  font-family: var(--gvm-title);
  font-weight: 700;
  letter-spacing: -0.01em;
}
.site-description {
  font-family: var(--gvm-sans);
  font-style: normal;
}

/* A static page can be just a couple of sentences (Contatti). Give it its
   own comfortable, narrower reading column and more vertical room instead of
   sitting thin in the full-width container. */
.type-page .entry-header .inner-wrap,
.type-page .entry-content {
  max-width: var(--container-width-narrow);
  margin-left: auto;
  margin-right: auto;
}
body.page .content-area {
  padding-top: 4em;
  padding-bottom: 7em;
}
.type-page .entry-title {
  margin-bottom: 0.9em;
}