/* CheNotte: colours of the logo (navy, orange moon), Italian tricolour accent, warm neutral background.
   Lexend for headings and Inter for text, as on the leaflets and in the warranty terms (SIL OFL 1.1,
   fonts/OFL.txt), self-hosted Latin subsets. */
@font-face { font-family: "Lexend"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/lexend-400.bbc0bf3c6bfb.woff2") format("woff2"); }
@font-face { font-family: "Lexend"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("fonts/lexend-600.bbcdd99ee8e6.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/inter-400.97d61e2e2fe1.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("fonts/inter-600.f075ce1ce188.woff2") format("woff2"); }

:root {
  --blue: #0f2f51;
  --blue-deep: #0a2340;
  --red: #f39200;
  --orange: #f39200;
  --text: #1b2738;
  --muted: #5a6577;
  --border: #e3ddd2;
  --bg: #f8f6f2;
  --sand: #efe9df;
  --blue-tint: #e7edf4;
  /* Navy on orange: contrast 6:1 (white on this orange would be under 3:1). */
  --button-bg: #f39200;
  --button-text: #0f2f51;
  --header-bg: #0f2f51;
  --header-border: #0f2f51;
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-heading: "Lexend", "Inter", system-ui, sans-serif;
  --green-it: #009246;
  --red-it: #ce2b37;
  --radius: 14px;
}

body { line-height: 1.6; overflow-x: clip; }
h1, h2, h3, legend, .item-title { font-family: var(--font-heading); font-weight: 600; letter-spacing: -0.01em; }
h1 { color: var(--blue); }
.button { font-family: var(--font-heading); font-weight: 600; border-radius: 999px; transition: filter 0.15s, transform 0.15s; }
.button:hover { filter: brightness(1.06); }
.button:active { transform: translateY(1px); }
fieldset, .summary { border-radius: var(--radius); }

/* Header: logo left, menu right; on narrow screens the menu goes under the logo and scrolls sideways. */
.site-header { padding: 0 16px; border-bottom: 0; text-align: left; }
.site-header-inner {
  max-width: 1160px; margin: 0 auto; min-height: 72px;
  display: flex; align-items: center; justify-content: space-between; gap: 8px 28px; flex-wrap: wrap;
}
.site-header .logo { height: 50px; display: block; }
.site-nav { display: flex; gap: 4px 24px; font-family: var(--font-heading); font-size: 0.98rem; }
.site-nav a { color: #fff; text-decoration: none; padding: 6px 0; border-bottom: 2px solid transparent; opacity: 0.88; white-space: nowrap; }
.site-nav a:hover, .site-nav a[aria-current] { opacity: 1; border-bottom-color: var(--orange); }
@media (max-width: 860px) {
  .site-header-inner { padding: 10px 0 0; justify-content: center; }
  .site-nav { width: 100%; justify-content: flex-start; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
  .site-nav::-webkit-scrollbar { display: none; }
}
@media (min-width: 520px) and (max-width: 860px) { .site-nav { justify-content: center; } }
/* "Made in Italy" tricolour under the header, as on the original CheNotte leaflets. */
.tricolore {
  height: 4px;
  background: linear-gradient(90deg, var(--green-it) 0 33.34%, #fff 33.34% 66.67%, var(--red-it) 66.67% 100%);
}

/* Footer. */
.site-footer { background: var(--blue-deep); color: rgba(255, 255, 255, 0.72); text-align: left; padding: 40px 16px 28px; margin-top: 56px; }
.site-footer-inner { max-width: 1160px; margin: 0 auto; display: grid; gap: 24px 48px; }
@media (min-width: 860px) { .site-footer-inner { grid-template-columns: 1fr 1fr; } .footer-legal { grid-column: 1 / -1; } }
.footer-logo { height: 44px; width: auto; display: block; margin-bottom: 8px; }
.footer-brand p { margin: 0; }
.footer-links { display: flex; flex-wrap: wrap; gap: 8px 22px; align-content: start; }
.site-footer a { color: #fff; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.footer-legal { border-top: 1px solid rgba(255, 255, 255, 0.14); padding-top: 18px; font-size: 0.82rem; }
.footer-legal p { margin: 2px 0; }