/* ==========================================================
   Tunza Esports — Global CSS (works on ALL pages)
   ========================================================== */

/* ---------------- Base / Reset ---------------- */
* { margin:0; padding:0; box-sizing:border-box; }
html, body { height:100%; overflow-x:hidden; }
body {
  font-family:'Oxanium',system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,sans-serif;
  color:#FCFCFD; background:#0A0A1A;
}
h1,h2,h3,h4 { font-family:'Syne',ui-sans-serif,system-ui,sans-serif; color:#FCFCFD; line-height:1.2; }
a { color:#FCFCFD; text-decoration:none; transition:color .25s ease; }
a:hover { color:#00E5FF; }
.wrap,.container { width:min(1200px,92vw); margin-inline:auto; padding-inline:16px; }
.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}

/* Kill any legacy mobile drawer still in the DOM */
#mobile-drawer { display:none !important; }

/* ==========================================================
   HEADER — Canonical fixed overlay (same on ALL pages)
   ========================================================== */
.header nav{
  position:fixed !important; top:0 !important; left:0; right:0; z-index:1000;
  display:flex; align-items:center; gap:24px;
  padding:6px 75px;
  background:linear-gradient(to bottom, rgba(26,26,48,1) 0%, rgba(26,26,48,0) 100%);
  transform:translateZ(0);
}
.header .logo img{width:90px;height:90px;object-fit:contain;display:block}

/* Desktop links row */
.nav-toggle{display:none;background:transparent;color:#fff;border:1px solid #2a2f3a;padding:.6rem .75rem;border-radius:10px}
.nav-links{margin-left:auto;display:flex;align-items:center;gap:32px}
.nav-links>ul{list-style:none;display:flex;gap:40px;align-items:center;margin:0}
.nav-links>ul>li{position:relative}
.nav-links>ul>li>a{display:block;padding:10px 0;font-size:16px}

/* Dropdowns (stable, no flicker; includes a hover “bridge”) */
.has-dropdown { position:relative; }
.has-dropdown>a{padding-right:18px}
.has-dropdown>a::after{
  content:'\25BE'; font-size:.7em; position:absolute; right:-12px; top:50%;
  transform:translateY(-50%); color:#FCFCFD;
}
/* Invisible hover bridge so the menu doesn’t close while moving the mouse */
.has-dropdown::after{
  content:""; position:absolute; left:-8px; right:-8px; top:100%; height:12px;
}
.dropdown-menu{
  display:none; position:absolute; left:50%; top:100%; transform:translateX(-50%);
  list-style:none; padding:10px 12px; margin:0; min-width:260px;
  border-radius:12px; border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg,#1a1a36 0%, #11112a 100%);
  box-shadow:0 10px 24px rgba(0,0,0,.35);
}
.dropdown-menu li a{display:block;padding:12px 12px;border-radius:8px;font-size:16px;color:#19D2EA}
.dropdown-menu li a:hover{background:#0d0d21;color:#FCFCFD}
/* Keep open on hover/focus */
.has-dropdown:hover>.dropdown-menu,
.has-dropdown:focus-within>.dropdown-menu{display:block}

/* CTA (hover should turn blue) */
.shop-button{
  display:inline-block;font-weight:700;font-size:16px;color:#fff!important;
  background:#B425EC;padding:10px 22px;border-radius:8px;transition:background .25s, color .2s, transform .2s;
}
.shop-button:hover{background:#00E5FF;color:#0A0A1A!important;transform:translateY(-2px)}

/* Push content below the fixed header (heroes manage themselves) */
.header + *:not(.home-hero-section):not(.about-hero-section):not(.service-hero-section):not(.esports-broadcasting-hero-section):not(.events-bootcamps-hero-section):not(.video-gaming-events-hero-section):not(.kuer-hero-section):not(.news-hero-section):not(.consultation-hero-section):not(.products-coming-soon-hero-section):not(.coming-soon-hero-section){
  margin-top:96px;
}

/* ==========================================================
   MOBILE NAV (overlay menu; CTA centered)
   ========================================================== */
@media (max-width:1024px){
  .nav-toggle{display:inline-flex;margin-left:auto}
  .nav-links{
    position:fixed; left:0; right:0; top:96px; bottom:0; display:none;
    flex-direction:column; align-items:center; gap:18px;
    padding:24px 22px 32px; background:linear-gradient(180deg,#0b0b16 0%, rgba(11,11,22,.98) 100%);
  }
  .nav-links.is-open{display:flex}
  .nav-links>ul{flex-direction:column; gap:16px}
  .nav-links .has-dropdown.open>.dropdown-menu{
    display:block; position:static; transform:none; margin:0; padding:0; border:0; box-shadow:none; background:transparent;
  }
  .nav-links .dropdown-menu li a{padding:10px 0}
  .nav-links .shop-button{display:block; margin:24px auto 0}
}

/* ==========================================================
   HOME — Hero (kept minimal to avoid conflicts)
   ========================================================== */
.home-hero-section{
  min-height:962px;width:100%;
  background-image:linear-gradient(rgba(4,9,30,.7), rgba(4,9,30,.7)), url(/images/TunzaEsportsBackground.png);
  background-size:cover;background-position:center;position:relative;
}
.home-hero-section .hero-content{position:absolute;left:438px;top:426px;max-width:700px}
.home-hero-section .hero-content h1{font-size:64px;font-weight:700}
@media (max-width:768px){
  .home-hero-section .hero-content{left:50%;transform:translateX(-50%);top:240px;text-align:center}
  .home-hero-section .hero-content h1{font-size:40px}
}

/* ==========================================================
   ABOUT — Hero + Intro + Lists (shared look)
   ========================================================== */
.about-hero-section{
  position:relative;width:100%;min-height:520px;
  display:flex;align-items:center;justify-content:center;text-align:center;
  padding-top:140px;
  background-image:
    linear-gradient(180deg, rgba(6,10,30,.70) 0%, rgba(6,10,30,.55) 50%, rgba(6,10,30,.35) 100%),
    url('/images/About%20Us.jpg');
  background-size:cover;background-position:center;
}
.about-hero-inner{max-width:1000px;padding:0 16px}
.about-hero-title{font-size:64px;line-height:1.1;letter-spacing:.4px;margin-bottom:0}
@media (max-width:768px){ .about-hero-section{min-height:420px;padding-top:120px} .about-hero-title{font-size:40px} }

.about-intro-section{background:#0A0A1A;padding:72px 16px;text-align:center}
.about-intro-section .intro-heading{font-family:'Syne';font-size:42px;margin:0 0 16px}
.about-intro-section .intro-text{width:min(900px,92vw);margin:0 auto;color:rgba(252,252,253,.8);line-height:1.7}
.intro-boxes-container{width:min(1200px,92vw);margin:34px auto 0;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.intro-box .box-image{width:100%;height:420px;object-fit:cover;border-radius:8px;display:block}
@media (max-width:900px){ .intro-boxes-container{grid-template-columns:1fr;gap:14px} .intro-box .box-image{height:300px} }

/* Two-column bullet list */
.list-section{padding:48px 16px 70px;background:#0A0A1A}
.list-container{width:min(1000px,92vw);margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:26px}
.list-column{list-style:disc;padding-left:22px;color:rgba(252,252,253,.9);line-height:1.8}
@media (max-width:800px){ .list-container{grid-template-columns:1fr} }

/* ==========================================================
   DIRECTORS — responsive grid (works on any page)
   ========================================================== */
.directors-section{
  padding:80px 16px;background:#0A0A1A;color:#FCFCFD;text-align:center;
}
.directors-heading{font-family:'Syne',sans-serif;font-size:40px;margin:0 0 10px}
.directors-subheading{font-family:'Oxanium',sans-serif;font-size:16px;color:rgba(252,252,253,.75);line-height:1.7;max-width:900px;margin:0 auto 28px}
.director-cards-container{
  width:min(1100px,92vw);margin:0 auto;display:grid;grid-template-columns:repeat(5,1fr);gap:18px;
}
@media (max-width:1100px){ .director-cards-container{grid-template-columns:repeat(3,1fr)} }
@media (max-width:700px){  .director-cards-container{grid-template-columns:repeat(2,1fr)} }
@media (max-width:520px){  .director-cards-container{grid-template-columns:1fr} }

.director-card{
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);
  border-radius:14px;overflow:hidden;display:flex;flex-direction:column;align-items:stretch;padding:0;
  transition:transform .2s ease, box-shadow .2s ease;
}
.director-card:hover{ transform:translateY(-3px); box-shadow:0 10px 28px rgba(0,0,0,.35); }

/* Image (4:5 ratio for consistency) */
.director-photo,.director-image-placeholder{width:100%;aspect-ratio:4/5;background:linear-gradient(180deg,#17172a 0%, #101020 100%);display:block;overflow:hidden}
.director-photo img{width:100%;height:100%;object-fit:cover;display:block}
img.director-image{width:100%;height:100%;aspect-ratio:4/5;object-fit:cover;display:block}

/* Text */
.director-info{padding:14px 12px 18px;text-align:center}
.director-name{font-family:'Syne',sans-serif;font-size:20px;font-weight:700;color:#9B8AFB;margin:0 0 4px}
.director-title{font-family:'Oxanium',sans-serif;font-size:14px;color:rgba(252,252,253,.6);margin:0}

/* ==========================================================
   NEWS (home/news cards)
   ========================================================== */
.news-section{padding:80px 75px;text-align:center;background:#0A0A1A}
.news-heading{font-size:48px;margin-bottom:50px}
.news-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:30px;justify-content:center}
.news-card{background:transparent;padding:30px;border-radius:12px;transition:transform .3s,box-shadow .3s;text-align:left}
.news-card:hover{transform:translateY(-5px);box-shadow:0 8px 25px rgba(0,0,0,.3)}
.news-image-placeholder{width:100%;height:180px;background:#333;border-radius:8px;margin-bottom:10px}
.news-card-title{font-size:24px;margin-bottom:6px}
.news-card-text{font-size:16px;line-height:1.6;color:rgba(252,252,253,.7);margin-bottom:10px}
.news-card-date{font-size:14px;color:#00E5FF}
@media (max-width:992px){.news-section{padding:60px 30px}.news-heading{font-size:38px}}
@media (max-width:768px){.news-section{padding:40px 15px}.news-heading{font-size:32px}}

/* ==========================================================
   NEWSLETTER (shared)
   ========================================================== */
.newsletter-outer{background:#0A0A1A;padding:80px 75px;text-align:center}
.newsletter-pre-heading{font-size:18px;color:rgba(252,252,253,.8);margin-bottom:10px}
.newsletter-main-heading{font-family:'Syne';font-size:48px;margin-bottom:50px}
.newsletter-card{max-width:800px;margin:0 auto;padding:40px;border-radius:16px;color:#FCFCFD;background:linear-gradient(135deg,#19D2EA 0%,#B425EC 100%);box-shadow:0 10px 30px rgba(0,0,0,.5)}
.newsletter-card h3{font-size:24px;font-weight:700;margin-bottom:30px}
.newsletter-form-container{display:flex;gap:15px;justify-content:center;flex-wrap:wrap;margin-bottom:25px}
.email-input{width:60%;max-width:400px;padding:15px 20px;border:0;border-radius:8px;background:rgba(255,255,255,.15);color:#fff;font-size:16px;outline:0}
.email-input::placeholder{color:rgba(252,252,253,.6)}
.subscribe-button{padding:15px 30px;border:0;border-radius:8px;font-weight:700;font-size:16px;background:#be00e5;color:#FCFCFD;cursor:pointer;transition:background .25s,transform .2s}
.subscribe-button:hover{background:#a000c0;transform:translateY(-2px)}
.newsletter-card-disclaimer{font-size:14px;color:rgba(252,252,253,.8);max-width:600px;margin:20px auto 0}
@media (max-width:600px){
  .newsletter-outer{padding:60px 20px}
  .newsletter-main-heading{font-size:34px}
  .newsletter-form-container{flex-direction:column;align-items:stretch}
  .email-input,.subscribe-button{width:100%}
}

/* ==========================================================
   PARTNERS carousel (CSS only; JS scroll optional)
   ========================================================== */
.partners-section{padding:60px 0;text-align:center;background:#0A0A1A}
.partners-section h2{font-size:40px;margin:0 0 20px}
.partners-carousel-track{
  display:flex;gap:18px;overflow:hidden;padding:0 16px 4px;
  -webkit-mask-image:linear-gradient(to right, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%);
          mask-image:linear-gradient(to right, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%);
}
.partner-logo{flex:0 0 auto;width:clamp(160px,22vw,240px);height:clamp(80px,12vw,110px);display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.06);border-radius:16px;padding:10px 14px;background:transparent;box-shadow:0 6px 16px rgba(0,0,0,.25);transition:transform .25s,box-shadow .25s}
.partner-logo img{max-width:200px;max-height:120px;object-fit:contain;display:block}
.partner-logo:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(0,0,0,.35)}

/* ==========================================================
   FOOTER
   ========================================================== */
footer{background:#0A0A1A;color:#FCFCFD}
.footer-content{display:flex;justify-content:space-between;flex-wrap:wrap;gap:40px;padding:80px 75px 40px;border-bottom:1px solid rgba(252,252,253,.1)}
.footer-column{flex-basis:200px;flex-grow:1;text-align:left}
.footer-column h4{font-size:24px;margin-bottom:25px}
.footer-column ul{list-style:none}
.footer-column li{margin-bottom:10px}
.footer-column a{color:rgba(252,252,253,.7)}
.footer-column a:hover{color:#00E5FF}
.footer-logo-column{flex-basis:280px;text-align:right;flex-grow:1}
.footer-logo-column img{width:100px;display:block;margin-left:auto;margin-bottom:15px}
.footer-logo-column p{font-size:16px;line-height:1.5;color:rgba(252,252,253,.7);margin-bottom:5px}
.footer-bottom{text-align:left;padding:30px 75px}
.copyright-text{font-size:14px;color:rgba(252,252,253,.6)}
@media (max-width:992px){
  .footer-content{justify-content:center;gap:30px;padding:60px 30px 30px}
  .footer-column{flex-basis:calc(50% - 15px);max-width:300px}
  .footer-logo-column{flex-basis:100%;text-align:center}
  .footer-logo-column img{margin-inline:auto}
  .footer-bottom{padding:25px 30px;text-align:center}
}
@media (max-width:768px){
  .footer-content{flex-direction:column;align-items:center;gap:25px}
  .footer-column,.footer-logo-column{flex-basis:100%;text-align:center}
  .footer-column h4{margin-bottom:15px}
  .footer-bottom{padding:25px 15px}
}

/* ==========================================================
   SERVICE / PRODUCT / NEWS heroes (keep offsets consistent)
   ========================================================== */
.service-hero-section,
.esports-broadcasting-hero-section,
.events-bootcamps-hero-section,
.video-gaming-events-hero-section,
.kuer-hero-section,
.news-hero-section,
.consultation-hero-section,
.products-coming-soon-hero-section,
.coming-soon-hero-section{
  min-height:450px;width:100%;
  background-size:cover;background-position:center;
  display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;
  padding:0 75px; position:relative;
}
@media (max-width:768px){
  .service-hero-section,
  .esports-broadcasting-hero-section,
  .events-bootcamps-hero-section,
  .video-gaming-events-hero-section,
  .kuer-hero-section,
  .news-hero-section,
  .consultation-hero-section{ min-height:350px; padding:0 15px; }
}
@media (max-width:480px){
  .service-hero-section,
  .esports-broadcasting-hero-section,
  .events-bootcamps-hero-section,
  .video-gaming-events-hero-section,
  .kuer-hero-section,
  .news-hero-section,
  .consultation-hero-section{ min-height:300px; }
}