/**
 * Desìa — site chrome (header + footer).
 *
 * Global, site-wide. Header: fixed, transparent over a full-bleed hero, solid otherwise
 * (toggled by desia-reveal.js via the hero's visibility; defaults to solid so pages
 * without a hero are legible). Footer: the full Marchio (pictogram above logotype) +
 * claim + columns + colophon.
 *
 * Consumes tokens from tokens.css.
 *
 * @package DesiaTheme
 */

:root { --header-h: 4.5rem; }

/* clear the fixed header on pages that are NOT a full-bleed builder/home hero */
body:not(.page-template-page-builder):not(.home) #main { padding-top: var(--header-h); }

/* =========================================================================
   Header
   ========================================================================= */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--gutter, clamp(1.5rem, 6vw, 8rem));
  color: var(--color-surface);
  transition: background-color .4s ease, color .4s ease, padding .4s ease;
}
.site-header[data-solid="true"] {
  background: var(--color-background);
  color: var(--color-foreground);
  padding-block: var(--space-3);
  box-shadow: 0 1px 0 rgba(26, 26, 24, 0.08);
}
.site-header__brand { display: inline-flex; }
.site-header__logotype {
  display: block;
  width: 124px;
  aspect-ratio: 1038.6962 / 434.4901;
  background-color: currentColor;
  -webkit-mask: url("../img/01-logo-system__logo-horizontal.svg") no-repeat left center / contain;
          mask: url("../img/01-logo-system__logo-horizontal.svg") no-repeat left center / contain;
}
.site-header:not([data-solid="true"]) .site-header__logotype { filter: drop-shadow(0 1px 4px rgba(26, 26, 24, 0.55)); }
.site-header:not([data-solid="true"]) .site-nav { text-shadow: 0 1px 4px rgba(26, 26, 24, 0.55); }

.site-nav, .site-nav ul {
  display: flex;
  gap: var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-caption-size);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.site-nav a { color: inherit; text-decoration: none; padding-block: var(--space-1); }
.site-nav a:hover { text-decoration: underline; text-underline-offset: 0.3em; }
@media (max-width: 720px) { .site-nav { display: none; } }

/* =========================================================================
   Footer — full Marchio (pictogram above logotype)
   ========================================================================= */
.site-footer {
  background: var(--color-background);
  color: var(--color-foreground);
  padding: var(--section-y, clamp(4rem, 11vw, 12rem)) var(--gutter, clamp(1.5rem, 6vw, 8rem)) var(--space-6);
  display: grid;
  gap: var(--space-6);
  font-family: var(--font-body);
}
.site-footer__top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-6); }
.site-footer__marchio { display: inline-flex; flex-direction: column; align-items: center; gap: 0.6em; }
.site-footer__pictogram { display: block; width: 52px; height: auto; }
.site-footer__logotype { display: block; width: 188px; height: auto; }
.site-footer__claim { margin-top: var(--space-4); font-family: var(--font-display); font-size: 1.375rem; }
.site-footer__cols { display: flex; flex-wrap: wrap; gap: var(--space-6); font-size: var(--text-caption-size); line-height: 2; }
.site-footer__cols ul { margin: 0; padding: 0; list-style: none; }
.site-footer__cols strong { font-weight: var(--seed-weight-medium); letter-spacing: 0.08em; text-transform: uppercase; }
.site-footer__cols a { color: inherit; text-decoration: none; }
.site-footer__cols a:hover { text-decoration: underline; text-underline-offset: 0.25em; }
.site-footer__colophon {
  border-top: 1px solid rgba(26, 26, 24, 0.14);
  padding-top: var(--space-4);
  font-size: var(--text-note-size);
  letter-spacing: 0.04em;
  opacity: 0.7;
}