/*
    File: stylecss.css
    Responsabilità: definire il design system globale del sito.
    In questo file si trovano:
    - variabili CSS (colori, font e tokens di design)
    - reset base e standardizzazione degli elementi semantici
    - layout del header/footer e nav condivisi
    - breakpoint responsivi per mobile/tablet
*/
:root {
	--blue-brass: #234d59;
	--blue-brass-dark: #183b45;
	--wood: #b98962;
	--wood-light: #d8b696;
	--white: #fffdf9;
	--ink: #172f36;
	--border: rgba(35, 77, 89, .22);
	--display-font: Georgia, 'Times New Roman', serif;
	--body-font: 'Trebuchet MS', Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--white); color: var(--ink); font-family: var(--body-font); }
a { color: inherit; text-decoration: none; }
button { font: inherit; }

/*
    Sezione header e footer condivisi.
    Questa parte definisce la struttura di navigazione globale e i componenti di brand.
    Alcuni dettagli importanti:
    - .site-nav usa CSS Grid per centrare brand e azioni mantenendo il menu assoluto.
    - .main-menu è posizionato in assoluto rispetto al .site-nav per sovrapporsi al contenuto.
    - il toggle mobile è gestito da .is-open e da aria-expanded nello script JS.
*/
.site-header { position: relative; z-index: 10; background: var(--white); border-bottom: 1px solid var(--border); }
.site-nav { position: relative; display: grid; min-height: 118px; grid-template-columns: 1fr auto 1fr; align-items: center; width: min(1280px, calc(100% - 80px)); margin: auto; }
.logo { display: inline-flex; grid-column: 2; align-items: center; justify-self: center; color: var(--blue-brass); }
.logo img { display: block; width: 180px; height: 72px; object-fit: contain; }
.logo-label { color: var(--blue-brass); font-family: var(--display-font); font-size: 22px; line-height: 1.1; white-space: nowrap; }
.logo-label-short { display: none; }
.logo-symbol { display: grid; width: 48px; height: 48px; place-items: center; border: 2px solid var(--blue-brass); border-radius: 50%; font-size: 13px; font-weight: 700; letter-spacing: -.1em; }
.logo-text { font-family: var(--display-font); font-size: 22px; }.logo-text strong { color: var(--wood); font-weight: 400; }
.header-actions { display: flex; grid-column: 3; align-items: center; justify-self: end; gap: 22px; }
.login-link, .menu-toggle { display: grid; width: 40px; height: 40px; place-items: center; color: var(--blue-brass); }
.login-link svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.login-link:hover, .menu-toggle:hover { color: var(--wood); }
.menu-toggle { padding: 8px; border: 0; background: none; cursor: pointer; }.menu-toggle span { display: block; width: 24px; height: 2px; margin: 3px 0; background: currentColor; transition: transform .2s ease, opacity .2s ease; }
.menu-toggle.is-open span:first-child { transform: translateY(5px) rotate(45deg); }.menu-toggle.is-open span:nth-child(2) { opacity: 0; }.menu-toggle.is-open span:last-child { transform: translateY(-5px) rotate(-45deg); }
.main-menu { position: absolute; top: calc(100% + 1px); right: 0; display: grid; width: 255px; padding: 14px; background: var(--white); border: 1px solid var(--border); box-shadow: 0 15px 35px rgba(24, 59, 69, .12); opacity: 0; pointer-events: none; transform: translateY(-8px); transition: opacity .2s ease, transform .2s ease; }
.main-menu.is-open { opacity: 1; pointer-events: auto; transform: translateY(0); }.main-menu a { padding: 14px 16px; border-bottom: 1px solid var(--border); color: var(--blue-brass); font-size: 13px; font-weight: 700; }.main-menu a:last-child { border-bottom: 0; }.main-menu a:hover { background: var(--wood-light); color: var(--blue-brass-dark); }

.site-footer { padding: 48px 20px 44px; background: var(--blue-brass); color: var(--white); text-align: center; }.venue-name { margin: 0; font-family: var(--display-font); font-size: clamp(22px, 3vw, 30px); }.company-name { margin: 20px 0 0; color: rgba(255, 253, 249, .72); font-size: 12px; }.social-links { display: flex; justify-content: center; gap: 18px; margin-top: 25px; }.social-links a { display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid rgba(255, 253, 249, .6); border-radius: 50%; transition: background .2s ease, color .2s ease; }.social-links a:hover { background: var(--wood-light); color: var(--blue-brass-dark); }.social-links svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.6; }.social-links .fill-dot { fill: currentColor; stroke: none; }

@media (max-width: 700px) { .site-nav { min-height: 76px; width: calc(100% - 32px); grid-template-columns: 1fr auto; }.logo { grid-column: 1; justify-self: start; gap: 8px; }.logo img { width: 105px; height: 52px; }.logo-label { font-size: 17px; }.logo-label-short { display: inline; }.logo-label-full { display: none; }.header-actions { grid-column: 2; gap: 8px; }.main-menu { top: calc(100% + 1px); right: -1px; left: -1px; width: auto; }.site-footer { padding-top: 38px; padding-bottom: 36px; } }