/* Main CSS - styles/main.css */
 
:root{
 /* 90s Color Palette - Enhanced for WCAG AA Contrast */
 --neon-pink:#ff006e;
 --electric-blue:#00f5ff;
 --lime-green:#39ff14;
 --hot-purple:#8a2be2;
 --sunshine-yellow:#ffff00;
 --radical-orange:#ff4500;
 
 /* Accessible variants for text (7:1 contrast ratio minimum) */
 --neon-pink-bright:#ff3d96;
 --electric-blue-bright:#5dffff;
 --lime-green-bright:#80ff6e;
 --hot-purple-bright:#b26fff;
 
 /* Dark Theme Colors */
 --bg-primary:#1a1a2e;
 --bg-secondary:#16213e;
 --bg-tertiary:#0f3460;
 --text-primary:#ffffff;
 --text-secondary:#d4d0e0;
 --text-muted:#a49ab5;
 --border-color:#2d1b69;
 --text-on-primary:#ffffff;
 
 /* Gradients */
 --gradient-primary:linear-gradient(45deg, var(--neon-pink), var(--electric-blue));
 --gradient-secondary:linear-gradient(135deg, var(--lime-green), var(--hot-purple));
 --gradient-tertiary:linear-gradient(90deg, var(--sunshine-yellow), var(--radical-orange));
 
 /* Background Pattern */
 --pattern-bg:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="20" cy="20" r="1" fill="%23ff006e" opacity="0.1"/><rect x="40" y="10" width="2" height="2" fill="%2300f5ff" opacity="0.1"/><polygon points="70,15 72,20 68,20" fill="%2339ff14" opacity="0.1"/></svg>');
}
 
 *{
 margin:0;
 padding:0;
 box-sizing:border-box;
}
 
 /* Disable tap highlights and audio feedback */
 *{
 -webkit-tap-highlight-color:transparent;
}
 
 /* Enable touch for interactive elements */
 button, .hamburger, .nav-link, a{
 -webkit-tap-highlight-color:transparent;
 -webkit-touch-callout:none;
 -webkit-user-select:none;
 user-select:none;
 cursor:pointer;
 touch-action:manipulation;
}
 
 body{
 font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
 font-size:16px;
 line-height:1.7;
 background:var(--bg-primary);
 background-image:var(--pattern-bg);
 background-size:200px 200px;
 color:var(--text-primary);
 min-height:100vh;
 overflow-x:hidden;
 transition:background-color 0.3s ease, color 0.3s ease;
}
 
 /* Respect user's motion preferences */
 @media (prefers-reduced-motion:reduce){
 *,
 *::before,
 *::after{
 animation-duration:0.01ms !important;
 animation-iteration-count:1 !important;
 transition-duration:0.01ms !important;
 scroll-behavior:auto !important;
}
}
 
 /* Site is now permanently dark themed */
 
 /* Skip to main content link for accessibility */
 .skip-link{
 position:absolute;
 top:0;
 left:-9999px;
 background:var(--electric-blue-bright);
 color:var(--bg-primary);
 padding:12px 20px;
 text-decoration:none;
 font-weight:700;
 z-index:10000;
 border-radius:4px;
}
 
 .skip-link:focus{
 left:10px;
 top:10px;
 outline:3px solid var(--sunshine-yellow);
 outline-offset:2px;
}
 
 /* Focus indicators for all interactive elements */
 a:focus,
 button:focus,
 .hamburger:focus,
 .nav-link:focus,
 .service-card:focus{
 outline:3px solid var(--electric-blue-bright);
 outline-offset:3px;
 border-radius:4px;
}
 
 /* High contrast focus for keyboard navigation */
 a:focus-visible,
 button:focus-visible,
 .hamburger:focus-visible,
 .nav-link:focus-visible,
 .service-card:focus-visible{
 outline:3px solid var(--sunshine-yellow);
 outline-offset:3px;
 box-shadow:0 0 0 6px rgba(255, 255, 0, 0.3);
}
 
 /* Remove focus outline for mouse users only */
 a:focus:not(:focus-visible),
 button:focus:not(:focus-visible),
 .hamburger:focus:not(:focus-visible){
 outline:none;
}
 
 /* Visually hidden class for screen readers */
 .visually-hidden{
 position:absolute;
 width:1px;
 height:1px;
 padding:0;
 margin:-1px;
 overflow:hidden;
 clip:rect(0, 0, 0, 0);
 white-space:nowrap;
 border-width:0;
}
 
 /* Use Orbitron only for headings */
 h1, h2, h3, h4, h5, h6,
 .hero-title,
 .section-title,
 .glitch{
 font-family:'Orbitron', monospace;
 line-height:1.3;
}
 
 /* Improve text readability */
 p{
 margin-bottom:1.5rem;
 max-width:75ch;
}
 
 p, span, div, a, li{
 text-shadow:0 1px 2px rgba(0,0,0,0.1);
}
 
 /* Better content readability with optimal line length */
 .lead{
 font-size:1.25rem;
 line-height:1.8;
 font-weight:400;
}
 
 strong{
 font-weight:700;
 color:var(--text-primary);
}
 
 /* Container with better readability */
 .container{
 max-width:1200px;
 margin:20px auto;
 padding:20px;
 background:var(--bg-secondary);
 border:1px solid var(--border-color);
 border-radius:10px;
 transition:background-color 0.3s ease, border-color 0.3s ease;
}
 
 /* Logo + Productions styling */
 .logo-container{
 display:flex;
 align-items:center;
 gap:8px;
 text-decoration:none;
 color:inherit;
 transition:all 0.3s ease;
}
 
 .logo-container:hover{
 transform:scale(1.05);
}
 
 .logo-text{
 font-family:'Orbitron', monospace;
 font-weight:700;
 font-size:1.2rem;
 color:var(--electric-blue-bright);
 text-shadow:0 0 10px var(--electric-blue);
}
 
 /* Footer logo styling */
 .footer-logo-container{
 display:flex;
 align-items:center;
 justify-content:center;
 gap:6px;
 margin-bottom:10px;
}
 
 .footer-logo-text{
 font-family:'Orbitron', monospace;
 font-weight:600;
 font-size:1rem;
 color:var(--electric-blue-bright);
 text-shadow:0 0 8px var(--electric-blue);
}
 
 /* Home page hero logo styling */
 .hero-logo{
 max-width:300px;
 height:auto;
 filter:invert(1) drop-shadow(0 0 20px var(--electric-blue));
}
 
 /* Theme toggle removed - site is now permanently dark themed */
 
 /* Navigation Improvements */
 .nav-container{
 background:var(--bg-secondary);
 border-bottom:2px solid var(--border-color);
 position:fixed;
 top:0;
 width:100%;
 z-index:999;
 transition:background-color 0.3s ease, border-color 0.3s ease;
 padding:0 20px;
}
 
 /* Compact hero sections for non-home pages */
 .contact-hero,
 .events-hero,
 .clothing-hero,
 .about-hero{
 height:30vh !important;
 min-height:250px !important;
 max-height:400px !important;
 padding:40px 0 !important;
}
 
 .contact-hero .hero-content,
 .events-hero .hero-content,
 .clothing-hero .hero-content,
 .about-hero .hero-content{
 padding:40px 20px !important;
}
 
 .contact-hero .hero-title,
 .events-hero .hero-title,
 .clothing-hero .hero-title,
 .about-hero .hero-title{
 font-size:3rem !important;
 margin-bottom:1rem !important;
}
 
 .contact-hero .hero-subtitle,
 .events-hero .hero-subtitle,
 .clothing-hero .hero-subtitle,
 .about-hero .hero-subtitle{
 font-size:1.2rem !important;
 margin-bottom:1rem !important;
}
 
 /* Mobile Navigation */
 .nav-menu{
 display:flex;
 list-style:none;
 margin:0;
 padding:0;
 align-items:center;
}
 
 .nav-link{
 color:var(--text-primary);
 text-decoration:none;
 /* Minimum touch target size 44x44px */
 padding:15px 20px;
 min-height:44px;
 display:inline-flex;
 align-items:center;
 transition:all 0.3s ease;
 border-bottom:2px solid transparent;
}
 
 .nav-link:hover,
 .nav-link.active{
 color:var(--electric-blue-bright);
 border-bottom-color:var(--electric-blue-bright);
 text-shadow:0 0 10px var(--electric-blue);
}
 
 /* Hamburger Menu - Improved for accessibility and touch */
 .hamburger{
 display:none;
 flex-direction:column;
 justify-content:center;
 align-items:center;
 cursor:pointer;
 /* 44x44px minimum touch target */
 min-width:44px;
 min-height:44px;
 padding:12px;
 z-index:1001;
 background:transparent;
 border:none;
 border-radius:4px;
 position:relative;
}
 
 .hamburger span{
 width:25px;
 height:4px;
 background:var(--text-primary);
 margin:3px 0;
 transition:all 0.3s ease;
 border-radius:3px;
 display:block;
}
 
 .hamburger.active span:nth-child(1){
 transform:rotate(45deg) translate(7px, 7px);
}
 
 .hamburger.active span:nth-child(2){
 opacity:0;
}
 
 .hamburger.active span:nth-child(3){
 transform:rotate(-45deg) translate(7px, -7px);
}
 
 /* Mobile Responsive - Improved touch targets and readability */
 @media (max-width:768px){
 .nav-container{
 padding:0 15px;
}
 
 .hamburger{
 display:flex;
}
 
 .nav-menu{
 position:fixed;
 top:0;
 right:-100%;
 width:80%;
 max-width:320px;
 height:100vh;
 background:var(--bg-primary);
 flex-direction:column;
 justify-content:center;
 align-items:center;
 transition:right 0.3s ease;
 border-left:2px solid var(--border-color);
 box-shadow:-4px 0 8px rgba(0, 0, 0, 0.3);
}
 
 .nav-menu.active{
 right:0;
}
 
 .nav-menu li{
 margin:10px 0;
 width:100%;
 text-align:center;
}
 
 .nav-link{
 font-size:1.5rem;
 /* Ensure 44x44px minimum touch target */
 padding:20px;
 min-height:60px;
 width:100%;
 justify-content:center;
}
 
 .hero-logo{
 max-width:250px;
}
 
 .container{
 margin:10px;
 padding:20px 15px;
}
 
 .hero-content{
 padding:20px 15px;
}
 
 /* Adjust hero sections for mobile */
 .contact-hero,
 .events-hero,
 .clothing-hero,
 .about-hero{
 height:40vh !important;
 min-height:200px !important;
}
 
 /* Add top margin for fixed nav */
 .hero,
 .contact-hero,
 .events-hero,
 .clothing-hero,
 .about-hero{
 margin-top:70px;
}
 
 
 /* Improve readability on mobile */
 body{
 font-size:16px;
 line-height:1.8;
}
 
 h1, .hero-title{
 font-size:clamp(2rem, 8vw, 3rem) !important;
 line-height:1.2;
}
 
 h2, .section-title{
 font-size:clamp(1.5rem, 6vw, 2rem) !important;
 line-height:1.3;
}
 
 h3{
 font-size:clamp(1.25rem, 5vw, 1.75rem);
 line-height:1.4;
}
 
 p{
 font-size:1rem;
 line-height:1.8;
 margin-bottom:1.5rem;
}
 
 /* Ensure service cards are touch-friendly */
 .service-card{
 min-height:150px;
 padding:30px 20px;
}
 
 .service-card h3{
 font-size:1.5rem;
}
 
 .service-card p{
 font-size:1rem;
}
}
 
 /* Navigation */
 .nav-container{
 position:fixed;
 top:0;
 width:100%;
 background:rgba(26, 26, 46, 0.95);
 backdrop-filter:blur(10px);
 border-bottom:3px solid var(--neon-pink);
 z-index:1000;
 padding:10px 20px;
 display:flex;
 justify-content:space-between;
 align-items:center;
}
 
 .logo-container .logo{
 height:50px;
 width:auto;
 filter:invert(1) drop-shadow(0 0 10px var(--electric-blue));
}
 
 .nav-menu{
 display:flex;
 list-style:none;
 gap:20px;
}
 
 .nav-link{
 text-decoration:none;
 color:var(--text-primary);
 font-weight:700;
 font-size:16px;
 padding:8px 15px;
 border-radius:20px;
 transition:all 0.3s ease;
 text-transform:uppercase;
 letter-spacing:1px;
}
 
 .nav-link:hover,
 .nav-link.active{
 background:var(--gradient-primary);
 color:var(--text-on-primary);
 transform:scale(1.1);
}
 
 .hamburger{
 display:none;
 flex-direction:column;
 cursor:pointer;
}
 
 .hamburger span{
 width:25px;
 height:3px;
 background:var(--hot-purple);
 margin:3px 0;
 transition:0.3s;
}
 
 /* Hero Section */
 .hero{
 height:100vh;
 display:flex;
 align-items:center;
 justify-content:center;
 position:relative;
 overflow:hidden;
}
 
 .hero-bg{
 position:absolute;
 top:0;
 left:0;
 width:100%;
 height:100%;
 background:var(--gradient-primary);
 opacity:0.8;
}
 
 .floating-shapes{
 position:absolute;
 width:100%;
 height:100%;
}
 
 .shape{
 position:absolute;
 animation:float 6s ease-in-out infinite;
}
 
 .triangle{
 width:0;
 height:0;
 border-left:25px solid transparent;
 border-right:25px solid transparent;
 border-bottom:40px solid var(--lime-green);
 top:20%;
 left:10%;
 animation-delay:-2s;
}
 
 .square{
 width:30px;
 height:30px;
 background:var(--sunshine-yellow);
 top:60%;
 right:15%;
 animation-delay:-4s;
}
 
 .circle{
 width:40px;
 height:40px;
 border-radius:50%;
 background:var(--radical-orange);
 top:30%;
 right:25%;
 animation-delay:-1s;
}
 
 .squiggle{
 width:50px;
 height:20px;
 border:4px solid var(--electric-blue);
 border-radius:20px;
 top:70%;
 left:20%;
 animation-delay:-3s;
}
 
 .hero-content{
 text-align:center;
 z-index:2;
 color:white;
}
 
 .hero-title{
 font-family:'Orbitron', monospace;
 font-size:clamp(2rem, 5vw, 3.5rem);
 font-weight:900;
 margin-bottom:20px;
 text-shadow:4px 4px 0px var(--hot-purple);
}
 
 .hero-subtitle{
 font-size:clamp(1.2rem, 3vw, 1.5rem);
 margin-bottom:30px;
 line-height:1.6;
 max-width:800px;
 margin-left:auto;
 margin-right:auto;
}
 
 .hero-buttons{
 display:flex;
 gap:20px;
 justify-content:center;
 flex-wrap:wrap;
}
 
 .btn{
 padding:15px 30px;
 border:none;
 border-radius:50px;
 font-family:'Comic Neue', cursive;
 font-size:18px;
 font-weight:700;
 cursor:pointer;
 transition:all 0.3s ease;
 text-transform:uppercase;
 letter-spacing:1px;
}
 
 .btn-primary{
 background:var(--gradient-secondary);
 color:white;
 box-shadow:0 5px 15px rgba(0,0,0,0.3);
}
 
 .btn-secondary{
 background:var(--bg-secondary);
 color:var(--text-primary);
 border:2px solid var(--hot-purple);
 box-shadow:0 5px 15px rgba(0,0,0,0.3);
}
 
 .btn:hover{
 transform:translateY(-3px) scale(1.05);
 box-shadow:0 8px 25px rgba(0,0,0,0.4);
}
 
 .scroll-indicator{
 position:absolute;
 bottom:30px;
 left:0;
 right:0;
 margin:0 auto;
 text-align:center;
 color:white;
 animation:bounce 2s infinite;
 width:fit-content;
}
 
 .mouse{
 width:25px;
 height:40px;
 border:2px solid white;
 border-radius:15px;
 margin:0 auto 10px;
 position:relative;
}
 
 .wheel{
 width:3px;
 height:6px;
 background:var(--text-primary);
 border-radius:2px;
 position:absolute;
 top:8px;
 left:50%;
 transform:translateX(-50%);
 animation:scroll 2s infinite;
}
 
 /* Services Section */
 .services{
 padding:100px 0;
 background:var(--bg-primary);
}
 
 .section-title{
 font-family:'Orbitron', monospace;
 font-size:clamp(1.75rem, 4vw, 2.5rem);
 text-align:center;
 margin-bottom:40px;
 color:var(--electric-blue-bright);
 text-shadow:0 0 15px var(--electric-blue);
}
 
 .services-grid{
 display:grid;
 grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
 gap:40px;
}
 
 .service-card{
 display:block;
 background:var(--bg-secondary);
 padding:40px 30px;
 border-radius:20px;
 text-align:center;
 box-shadow:0 10px 30px rgba(0,0,0,0.3);
 transition:all 0.3s ease;
 position:relative;
 overflow:hidden;
 text-decoration:none;
 color:inherit;
}
 
 .service-card::before{
 content:'';
 position:absolute;
 top:-50%;
 left:-50%;
 width:200%;
 height:200%;
 background:var(--gradient-primary);
 opacity:0;
 transform:rotate(45deg);
 transition:all 0.5s ease;
}
 
 .service-card:hover::before{
 opacity:0.1;
}
 
 .service-card:hover,
 .service-card:focus,
 .service-card:active{
 transform:translateY(-10px) rotate(2deg);
 box-shadow:0 20px 40px rgba(0,0,0,0.2);
}
 
 /* Touch-friendly mobile interactions */
 @media (max-width:768px){
 .service-card{
 cursor:pointer;
 -webkit-tap-highlight-color:rgba(255, 255, 255, 0.1);
 touch-action:manipulation;
}
 
 .service-card:active{
 transform:translateY(-5px) scale(0.98);
 transition:transform 0.1s ease;
}
}
 
 .service-icon{
 font-size:4rem;
 margin-bottom:20px;
}
 
 .service-card h3{
 font-family:'Orbitron', monospace;
 font-size:2rem;
 color:var(--hot-purple-bright);
 margin-bottom:15px;
}
 
 .service-card p{
 font-size:1.1rem;
 line-height:1.6;
 color:var(--text-secondary);
 margin-bottom:25px;
}
 
 .service-link{
 display:inline-block;
 color:var(--neon-pink-bright);
 text-decoration:none;
 font-weight:700;
 font-size:1.1rem;
 transition:all 0.3s ease;
}
 
 .service-link:hover{
 color:var(--electric-blue-bright);
 transform:scale(1.1);
}
 
 /* Updates Section */
 .updates{
 padding:100px 0;
 background:var(--gradient-secondary);
}
 
 .updates .section-title{
 color:white;
 -webkit-text-fill-color:white;
}
 
 .updates-grid{
 display:grid;
 grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
 gap:30px;
}
 
 .update-card{
 background:rgba(255, 255, 255, 0.95);
 padding:30px;
 border-radius:15px;
 backdrop-filter:blur(10px);
 transition:all 0.3s ease;
}
 
 .update-card:hover{
 transform:translateY(-5px);
 box-shadow:0 15px 35px rgba(0,0,0,0.2);
}
 
 .update-date{
 background:var(--neon-pink);
 color:white;
 padding:5px 15px;
 border-radius:20px;
 font-size:0.9rem;
 font-weight:700;
 display:inline-block;
 margin-bottom:15px;
}
 
 .update-card h3{
 color:var(--hot-purple);
 font-size:1.4rem;
 margin-bottom:10px;
}
 
 .update-card p{
 color:var(--text-secondary);
 line-height:1.6;
}
 
 /* Footer */
 .footer{
 background:var(--hot-purple);
 color:white;
 padding:60px 0 30px;
}
 
 .footer-content{
 text-align:center;
 margin-bottom:40px;
}
 
 .footer-logo{
 height:60px;
 width:auto;
 margin-bottom:15px;
 filter:invert(1) drop-shadow(0 0 8px var(--electric-blue));
}
 
 .footer-section h4{
 font-family:'Orbitron', monospace;
 font-size:1.3rem;
 margin-bottom:20px;
 color:var(--lime-green);
}
 
 .footer-section ul{
 list-style:none;
}
 
 .footer-section ul li{
 margin-bottom:10px;
}
 
 .footer-section a{
 color:white;
 text-decoration:none;
 transition:color 0.3s ease;
}
 
 .footer-section a:hover{
 color:var(--electric-blue-bright);
}
 
 .social-links{
 display:flex;
 flex-direction:column;
 gap:10px;
}
 
 .social-link{
 font-size:1.1rem;
}
 
 .footer-bottom{
 text-align:center;
 padding-top:30px;
 border-top:2px solid rgba(255,255,255,0.2);
 color:rgba(255,255,255,0.8);
}
 
 .footer-bottom p{
 margin:0 auto;
 text-align:center;
 max-width:none;
}
 
 /* Contact Email Styling */
 .contact-email{
 font-size:2.5rem;
 color:var(--electric-blue-bright);
 text-decoration:none;
 font-weight:700;
 text-shadow:0 0 20px var(--electric-blue);
 transition:all 0.3s ease;
 display:inline-block;
 padding:1rem;
 border-radius:8px;
}
 
 .contact-email:hover,
 .contact-email:focus{
 color:var(--neon-pink-bright);
 text-shadow:0 0 30px var(--neon-pink);
 transform:scale(1.05);
}
 
 @media (max-width:768px){
 .contact-email{
 font-size:1.75rem;
 word-break:break-all;
}
}
 
 /* Responsive Design */
 @media (max-width:768px){
 .nav-menu{
 position:fixed;
 top:0;
 right:-100%;
 width:80%;
 height:100vh;
 background:var(--bg-primary);
 flex-direction:column;
 justify-content:center;
 align-items:center;
 transition:right 0.3s ease;
 border-left:2px solid var(--border-color);
 display:flex;
}
 
 .nav-menu.active{
 right:0;
}
 
 .hamburger{
 display:flex;
}
 
 .hero-buttons{
 flex-direction:column;
 align-items:center;
}
 
 .services-grid{
 grid-template-columns:1fr;
}
 
 .updates-grid{
 grid-template-columns:1fr;
}
}