/* Stili condivisi da tutte le pagine: font, tema, reset, header, footer */

@font-face {
  font-family: "ssFont";
  src: url("../fonts/Strisce_stupefacenti-Regular.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root, [data-theme="light"] {
  --bg-image: url('../images/Sfondo-su-bianco.png');
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
  --text-2xl: clamp(2rem, 1.2rem + 2.5vw, 3.5rem);
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem;
  --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem;
  --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem;
  --color-bg: #ececeb;
  --color-surface: #f6f5f2;
  --color-surface-2: #ffffff;
  --color-text: #111111;
  --color-text-muted: #4e4c4a;
  --color-border: rgba(17,17,17,0.14);
  --color-primary: #ff503d;
  --color-primary-hover: #ef412e;
  --color-accent-soft: #f3c6d5;
  --color-footer: #0d0f10;
  --color-footer-text: #f4f0ea;
  --radius-sm: 0.375rem;
  --radius-md: 0.75rem;
  --radius-lg: 1.25rem;
  --radius-xl: 1.75rem;
  --radius-full: 999px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.06);
  --shadow-md: 0 10px 30px rgba(0,0,0,0.08);
  --content-wide: 1200px;
  --font-display: "ssFont", sans-serif;
  --font-body: "ssFont", sans-serif;
  --transition: 180ms cubic-bezier(0.16, 1, 0.3, 1);
}

[data-theme="dark"] {
  --bg-image: url('../images/Sfondo-su-nero.png');
  --color-bg: #161616; --color-surface: #202020; --color-surface-2: #2a2a2a;
  --color-text: #f3efe8; --color-text-muted: #cbc6bf; --color-border: rgba(255,255,255,0.12);
  --color-primary: #ff6d5d; --color-primary-hover: #ff7f71; --color-accent-soft: #e3a8bc;
  --color-footer: #090909; --color-footer-text: #f5f1ec; --shadow-sm: 0 1px 2px rgba(0,0,0,0.25);
  --shadow-md: 0 12px 36px rgba(0,0,0,0.28);
}

*, *::before, *::after { box-sizing: border-box; }

body,
button,
input,
textarea,
select {
  font-family: "ssFont", sans-serif;
}

html { scroll-behavior: smooth; }

body { 
  margin: 0; 
  background-color: var(--color-bg); 
  background-image: var(--bg-image);
  background-repeat: repeat;
  background-attachment: fixed; /* Optional: keeps the pattern in place while scrolling */
  background-size: 400px; /* <--- Aggiungi questa riga per ridimensionare il pattern */
  color: var(--color-text); 
  font-family: var(--font-body); 
  font-size: var(--text-base); 
  line-height: 1.55; 
}


img { display: block; width: 100%; height: auto; }

a { color: inherit; text-decoration: none; }

button, input { font: inherit; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.site-shell { min-height: 100vh; display: flex; flex-direction: column; }

.site-logo {
  width: clamp(360px, 48vw, 720px);
  height: auto;
  display: block;
  margin-top: var(--space-2);
}

.logo-light {
  display: block;
}

.logo-dark{
  display: none;
}

[data-theme="dark"] .logo-light {
  display: none;
}

[data-theme="dark"] .logo-dark {
  display: block;
}

.logo-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.logo-link:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 6px;
  border-radius: var(--radius-md);
}

.container { width: min(calc(100% - 2rem), var(--content-wide)); margin-inline: auto; }

.skip-link { position: absolute; left: 1rem; top: -3rem; background: var(--color-primary); color: white; padding: .75rem 1rem; border-radius: var(--radius-md); z-index: 100; }

.skip-link:focus { top: 1rem; }

.topbar { padding: var(--space-6) 0 var(--space-5); }

.topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }

.brand {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.brand-mark { width: 54px; height: 54px; color: var(--color-text); flex: 0 0 auto; }

.brand-name { font-family: var(--font-body); font-size: clamp(2rem, 1.5rem + 1.5vw, 3.6rem); line-height: .95; font-weight: 600; }

.header-tools { display: flex; align-items: center; gap: var(--space-3); margin-right: clamp(1rem, 3vw, 3rem);}

.icon-link, .theme-toggle { width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: var(--radius-md); transition: background var(--transition), border-color var(--transition), transform var(--transition); background: transparent; color: inherit; }

.icon-link:hover, .theme-toggle:hover, .icon-link:focus-visible, .theme-toggle:focus-visible { background: var(--color-surface); border-color: var(--color-border); transform: translateY(-1px); outline: none; }

.icon-link svg, .theme-toggle svg { width: 32px; height: 32px; }

.main-nav { display: flex; flex-wrap: wrap; gap: var(--space-2); padding-bottom: var(--space-6); }

.nav-button { border: 1px solid var(--color-border); background: var(--color-surface); padding: .8rem 1.1rem; border-radius: var(--radius-full); cursor: pointer; font-size: var(--text-sm); letter-spacing: .02em; transition: background var(--transition), border-color var(--transition), color var(--transition), transform var(--transition); }

.nav-button:hover, .nav-button:focus-visible, .nav-button.active { background: var(--color-text); color: var(--color-bg); border-color: var(--color-text); transform: translateY(-1px); outline: none; }

main { flex: 1; }

.page { padding-bottom: var(--space-16); }

.page-title { font-family: var(--font-display); font-size: var(--text-2xl); margin: 0 0 var(--space-8); letter-spacing: .02em; }

.social-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.social-icon {
  width: 44px;
  height: 44px;
  object-fit: contain;
  display: block;
}

.social-icon-dark {
  display: none;
}

html[data-theme="dark"] .social-icon-light {
  display: none;
}

html[data-theme="dark"] .social-icon-dark {
  display: block;
}

.theme-icon {
  width: 44px;
  height: 44px;
  object-fit: contain;
  display: block;
}

.theme-icon-sun {
  display: none;
}

html[data-theme="dark"] .theme-icon-moon {
  display: none;
}

html[data-theme="dark"] .theme-icon-sun {
  display: block;
}

.footer-email {
  color: var(--color-footer-text);
  font-family: var(--font-display);
  font-size: clamp(1rem, 0.8rem + 0.3vw, 1.3rem);
  text-decoration: none;
  line-height: 1.2;
}

.footer-email:hover,
.footer-email:focus-visible {
  color: var(--color-primary);
  text-decoration: underline;
}

.footer-email:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 4px;
  border-radius: var(--radius-sm);
}

.footer { background: var(--color-footer); color: var(--color-footer-text); margin-top: auto; padding: 1rem 0; }

.footer-inner { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); flex-wrap: wrap; }

.footer-icons { display: flex; gap: var(--space-2); align-items: center; }

.footer-icons .icon-link { color: var(--color-footer-text); }

.footer-copy { font-family: var(--font-display); font-size: clamp(1rem, .8rem + .3vw, 1.3rem); text-align: right; }

.fade-in { opacity: 1; }

@supports (animation-timeline: view()) { .fade-in { opacity: 0; animation: reveal-fade linear both; animation-timeline: view(); animation-range: entry 0% entry 60%; } }

@keyframes reveal-fade { to { opacity: 1; } }

@media (max-width: 680px) {
  .topbar-inner, .footer-inner { flex-direction: column; align-items: flex-start; }
  .header-tools { width: 100%; justify-content: flex-start; }
  .brand-name { font-size: clamp(2.1rem, 7vw, 3rem); }
  .footer-copy { text-align: left; }
  .site-logo { width: min(100%, 360px); }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }