/**
 * Shared Styles - Angelo Allocca
 * Stili condivisi tra tutte le pagine
 */

/* === RESET & BASE === */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --yellow:#FFE135;
  --yellow-light:#FEF08A;
  --yellow-dark:#ca8a04;
  --black:#111827;
  --gray-900:#1f2937;
  --gray-800:#374151;
  --gray-700:#4b5563;
  --gray-600:#4b5563;
  --gray-500:#6b7280;
  --gray-400:#9ca3af;
  --gray-200:#e5e7eb;
  --gray-100:#f3f4f6;
  --gray-50:#f9fafb;
  --white:#fff;
  --green:#22c55e
}
html{scroll-behavior:smooth}
body{font-family:'Space Grotesk',sans-serif;background:var(--white);color:var(--black);line-height:1.6;overflow-x:hidden}
.font-mono{font-family:'JetBrains Mono',monospace}
::selection{background:var(--yellow);color:var(--black)}
a{text-decoration:none;color:inherit;transition:color .3s}
img{max-width:100%;height:auto}

/* === CONTAINER === */
.container{max-width:1280px;margin:0 auto;padding-left:20px;padding-right:20px}
@media(min-width:640px){.container{padding-left:32px;padding-right:32px}}
@media(min-width:1024px){.container{padding-left:48px;padding-right:48px}}

/* === UTILITIES === */
.highlight{background:linear-gradient(180deg,transparent 60%,var(--yellow) 60%);padding:0 4px}
.geometric-border{clip-path:polygon(0 0,calc(100% - 30px) 0,100% 30px,100% 100%,30px 100%,0 calc(100% - 30px))}
.btn-geometric{clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px))}
.section-tag{display:inline-block;padding:.5rem 1rem;background:var(--yellow);color:var(--black);font-family:'JetBrains Mono',monospace;font-size:.75rem;font-weight:700;margin-bottom:1.5rem}
@media(min-width:640px){.section-tag{font-size:.875rem}}

/* === NAVBAR === */
.navbar{position:fixed;top:0;left:0;right:0;z-index:50;transition:all .3s;background:transparent}
.navbar.scrolled{background:rgba(255,255,255,.95);backdrop-filter:blur(10px);box-shadow:0 1px 3px rgba(0,0,0,.1)}
.navbar-inner{display:flex;align-items:center;justify-content:space-between;padding:1rem 0}
.logo{display:flex;align-items:center;gap:.75rem}
.logo-icon{width:40px;height:40px;background:var(--yellow);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.25rem;transition:all .3s}
.logo:hover .logo-icon{background:var(--gray-900);color:var(--yellow)}
.logo-text{font-weight:700;font-size:1rem;display:none}
@media(min-width:640px){.logo-text{display:block;font-size:1.125rem}}
.nav-menu{display:none;align-items:center;gap:2rem}
@media(min-width:768px){.nav-menu{display:flex}}
.nav-link{font-size:.875rem;font-weight:500}
.nav-link:hover{color:var(--yellow-dark)}
.nav-cta{background:var(--gray-900);color:var(--white);padding:.75rem 1.5rem;font-size:.875rem;font-weight:700;transition:all .3s}
.nav-cta:hover{background:var(--yellow);color:var(--gray-900)}

/* Mobile Menu Button */
.menu-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;width:40px;height:40px;background:none;border:none;cursor:pointer}
@media(min-width:768px){.menu-btn{display:none}}
.menu-line{width:24px;height:2px;background:var(--gray-900);transition:all .3s}
.menu-btn.active .menu-line:nth-child(1){transform:rotate(45deg) translateY(8px)}
.menu-btn.active .menu-line:nth-child(2){opacity:0}
.menu-btn.active .menu-line:nth-child(3){transform:rotate(-45deg) translateY(-8px)}

/* Mobile Menu */
.mobile-menu{position:absolute;top:100%;left:0;right:0;background:var(--white);box-shadow:0 10px 40px rgba(0,0,0,.1);opacity:0;visibility:hidden;transition:all .3s}
.mobile-menu.active{opacity:1;visibility:visible}
.mobile-menu-inner{padding:1.5rem;display:flex;flex-direction:column;gap:1rem}
.mobile-link{padding:.5rem 0;font-weight:500}
.mobile-cta{background:var(--yellow);color:var(--gray-900);padding:.75rem 1.5rem;text-align:center;font-weight:700}

/* === FOOTER === */
.footer{background:var(--gray-900);color:var(--white);padding:2rem 0;border-top:1px solid var(--gray-800)}
@media(min-width:768px){.footer{padding:3rem 0}}
.footer-inner{display:flex;flex-direction:column;align-items:center;gap:1.5rem;text-align:center}
@media(min-width:768px){.footer-inner{flex-direction:row;flex-wrap:wrap;justify-content:space-between;gap:2rem;text-align:left}}
.footer-logo{display:flex;align-items:center;gap:.75rem}
.footer-logo-icon{width:40px;height:40px;background:var(--yellow);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.25rem;color:var(--gray-900)}
.footer-logo-text{font-weight:700}
.footer-info{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:1rem;font-size:.75rem;color:var(--gray-500)}
@media(min-width:768px){.footer-info{gap:2rem;font-size:.875rem}}
.footer-info a{color:var(--gray-500);transition:color .3s}
.footer-info a:hover{color:var(--yellow)}
.footer-social{display:flex;align-items:center;gap:.75rem}
@media(min-width:768px){.footer-social{gap:1rem}}
.social-link{width:36px;height:36px;background:var(--gray-800);display:flex;align-items:center;justify-content:center;transition:all .3s}
@media(min-width:768px){.social-link{width:40px;height:40px}}
.social-link:hover{background:var(--yellow);color:var(--gray-900)}
.social-icon{width:18px;height:18px;fill:currentColor}
@media(min-width:768px){.social-icon{width:20px;height:20px}}

/* === PAGE HEADER (per pagine interne) === */
.page-header{padding:8rem 0 4rem;background:var(--gray-50)}
.page-title{font-size:2rem;font-weight:700;margin-bottom:1rem}
@media(min-width:768px){.page-title{font-size:3rem}}
.page-subtitle{font-size:1rem;color:var(--gray-600);max-width:600px}
@media(min-width:768px){.page-subtitle{font-size:1.125rem}}

/* === PROSE (per contenuti testuali) === */
.prose{max-width:720px}
.prose p{margin-bottom:1.5rem;font-size:1.125rem;line-height:1.8}
.prose h2{font-size:1.5rem;font-weight:700;margin:3rem 0 1.5rem;color:var(--gray-900)}
.prose h3{font-size:1.25rem;font-weight:600;margin:2rem 0 1rem}
.prose ul,.prose ol{margin-bottom:1.5rem;padding-left:1.5rem}
.prose li{margin-bottom:.75rem;font-size:1.125rem}
.prose a{color:var(--yellow-dark)}
.prose a:hover{color:var(--gray-900)}
.prose strong{color:var(--gray-900)}

/* === LOADING STATE === */
#site-header,#site-footer{min-height:72px}