
/* ZEYA E ASDAQUE FOUNDATION — Luxury Gold Premium UI */
:root{--lux-gold:#d4af37;--lux-light:#f5df8a;--lux-deep:#9d7b20;--lux-black:#080808;--lux-glow:rgba(212,175,55,.28)}
html{scroll-behavior:smooth}
body{background:#fbfaf5;color:#10352b}
::selection{background:var(--lux-gold);color:#080808}
.site-header nav{background:transparent!important}
h1,h2,h3{text-shadow:0 2px 20px rgba(212,175,55,.10)}
h2::after{content:"";display:block;width:58px;height:2px;margin:12px auto 0;background:linear-gradient(90deg,transparent,var(--lux-light),transparent);box-shadow:0 0 14px var(--lux-glow)}
.card,.service-card,.member-card,.gallery-item,.news-card,.result-card,.wing-card,.sponsor-card,.youtube-card,.contact-card{background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.018))!important;border:1px solid rgba(212,175,55,.22)!important;box-shadow:0 18px 50px rgba(0,0,0,.28),inset 0 1px rgba(255,255,255,.055);backdrop-filter:blur(10px);transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease,border-color .35s ease}
.card:hover,.service-card:hover,.member-card:hover,.gallery-item:hover,.news-card:hover,.result-card:hover,.wing-card:hover,.sponsor-card:hover,.youtube-card:hover,.contact-card:hover{transform:translateY(-7px);border-color:rgba(212,175,55,.55)!important;box-shadow:0 24px 65px rgba(0,0,0,.38),0 0 30px rgba(212,175,55,.08)}
button,.btn,.button,[role="button"]{border:1px solid rgba(212,175,55,.55)!important;background:linear-gradient(135deg,#f3d875,#b48a22)!important;color:#111!important;box-shadow:0 8px 25px rgba(212,175,55,.16),inset 0 1px rgba(255,255,255,.45);transition:transform .25s ease,box-shadow .25s ease,filter .25s ease}
button:hover,.btn:hover,.button:hover,[role="button"]:hover{transform:translateY(-2px);filter:brightness(1.06);box-shadow:0 12px 32px rgba(212,175,55,.27)}
.hero,.hero-section{overflow:hidden;isolation:isolate}
.hero::after,.hero-section::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(115deg,rgba(0,0,0,.86),rgba(0,0,0,.38) 52%,rgba(212,175,55,.1)),radial-gradient(circle at 70% 40%,rgba(212,175,55,.15),transparent 35%);pointer-events:none}
.hero h1,.hero-section h1{background:linear-gradient(100deg,#fff,#f5df8a 48%,#b9912c);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none}
.gold,.text-gold{color:var(--lux-light)!important}
.badge,.tag,.category{border:1px solid rgba(212,175,55,.35)!important;color:var(--lux-light)!important;background:rgba(212,175,55,.08)!important}
input,textarea,select{background:rgba(255,255,255,.045)!important;border:1px solid rgba(212,175,55,.22)!important;color:#fff!important}
input:focus,textarea:focus,select:focus{outline:none!important;border-color:var(--lux-gold)!important;box-shadow:0 0 0 3px rgba(212,175,55,.1),0 0 22px rgba(212,175,55,.08)}
footer{background:linear-gradient(180deg,#0d0d0d,#050505)!important;border-top:1px solid rgba(212,175,55,.22)!important}
footer::before{content:"";display:block;height:1px;width:100%;background:linear-gradient(90deg,transparent,var(--lux-gold),transparent);opacity:.65}
@keyframes luxFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.luxury-float{animation:luxFloat 5s ease-in-out infinite}
@media(max-width:768px){h1{letter-spacing:0}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* V20 — Readability & Multi-page UX */
:root{
  --reading-max:1180px;
  --body-size:17px;
  --body-leading:1.75;
}
body{
  font-size:var(--body-size);
  line-height:var(--body-leading);
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
p,li,dd,dt,label,small,figcaption{
  overflow-wrap:anywhere;
  word-break:normal;
}
p{max-width:75ch}
h1,h2,h3,h4,h5,h6{
  line-height:1.18;
  overflow-wrap:anywhere;
}
button,a{font-size:inherit}
.section-page{
  width:min(var(--reading-max),calc(100% - 32px));
  margin:0 auto;
  padding:clamp(28px,5vw,64px) 0 72px;
}
.section-page .page-heading{
  text-align:center;
  margin:12px auto 34px;
}
.section-page .page-heading .eyebrow{
  color:var(--lux-light);
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-size:.78rem;
  margin-bottom:10px;
}
.section-page .page-heading h1{
  font-size:clamp(2rem,5vw,3.6rem);
  margin:0 0 12px;
}
.section-page .page-heading p{
  margin:0 auto;
  color:#ddd7ca;
  max-width:70ch;
}
.page-content{
  min-width:0;
}
.page-content > section{
  margin:0!important;
  padding-top:0!important;
  padding-bottom:0!important;
}
.page-content > section::before{display:none!important}
.page-content img{max-width:100%;height:auto}
.page-content a:not(.btn):not(.button){
  text-underline-offset:3px;
}
.page-content .grid,
.page-content .cards,
.page-content .card-grid{
  align-items:stretch;
}
.site-footer-space{height:8px}
@media(max-width:768px){
  :root{--body-size:16px}
  .section-page{width:min(100% - 22px,1180px);padding-top:22px}
  .section-page .page-heading h1{font-size:clamp(1.8rem,9vw,2.6rem)}
  p{max-width:none}
  .section-page .page-heading p{font-size:.98rem}
}
@media(max-width:430px){
  :root{--body-size:15.5px}
  .section-page{width:calc(100% - 18px)}
}

/* V24 FINAL — Reference-inspired green / cream / gold interface */
:root{--green:#004b36;--green2:#0b6b4f;--green3:#003a2b;--gold:#d3a12b;--gold2:#f1cf72;--cream:#fbfaf5;--ink:#16342b;--muted:#5e6d67;--line:#e8e3d7;--white:#fff;--shadow:0 12px 32px rgba(0,52,38,.10)}
body{background:var(--cream)!important;color:var(--ink)!important;font-size:16px!important;line-height:1.65!important}
.topbar{background:var(--green3)!important;color:#fff!important;min-height:42px!important}
.top-inner{min-height:42px!important;padding:0 clamp(16px,4.2vw,70px)!important}
.site-header{position:sticky!important;top:0!important;height:90px!important;min-height:90px!important;padding:0 clamp(16px,4vw,55px)!important;background:rgba(255,255,255,.97)!important;border-bottom:1px solid rgba(0,75,54,.09)!important;box-shadow:0 5px 20px rgba(0,0,0,.06)!important;backdrop-filter:blur(14px)!important}
.site-header .brand{min-width:300px!important;gap:12px!important}
.site-header .brand img{width:70px!important;height:70px!important;top:0!important;border-radius:12px!important;object-fit:contain!important;filter:none!important}
.site-header .brand strong{font-size:17px!important;line-height:1.12!important;letter-spacing:.04em!important;color:var(--green)!important}
.site-header .brand small{font-size:8px!important;color:#8d6b22!important;letter-spacing:.03em!important}
.site-header nav{gap:clamp(10px,1.55vw,22px)!important}
.site-header nav a{font-size:12px!important;font-weight:700!important;padding:34px 0 30px!important;color:#33463f!important}
.site-header nav a:after{bottom:20px!important;background:var(--gold)!important}
.site-header nav a.active,.site-header nav a:hover{color:var(--green)!important}
.site-header nav a.active{background:linear-gradient(#f5d46e,#d09b25)!important;color:#18362c!important;border-radius:9px!important;padding-left:13px!important;padding-right:13px!important}
.header-actions{display:none!important}
.menu-toggle{display:none;border:1px solid rgba(0,75,54,.12)!important;background:#fff!important;color:var(--green)!important;border-radius:12px!important}
.hero{height:calc(100vh - 132px)!important;min-height:470px!important;max-height:620px!important;padding:0 4.2vw!important;color:var(--ink)!important;background:#fff!important;border-radius:0!important}
.hero-bg{background-image:url('assets/images/hero-campus.svg')!important;background-size:cover!important;background-position:center!important}
.hero-overlay{background:linear-gradient(90deg,rgba(251,250,245,.98) 0%,rgba(251,250,245,.94) 38%,rgba(251,250,245,.25) 57%,rgba(0,44,32,.08) 100%)!important}
.hero-content{max-width:760px!important;padding:20px 0!important;text-align:left!important}
.welcome-script{font-size:24px!important;color:#a7791e!important;letter-spacing:.16em!important;text-transform:uppercase!important;font-style:normal!important;font-weight:800!important}
.hero h1{font-family:'Playfair Display',serif!important;color:var(--green)!important;background:none!important;-webkit-text-fill-color:initial!important;font-size:clamp(40px,5vw,66px)!important;line-height:1.02!important;margin:0 0 13px!important;text-shadow:none!important}
.hero h3{color:var(--green)!important;font-size:20px!important;line-height:1.35!important}
.hero-rule{background:var(--gold)!important;width:210px!important;margin:19px 0!important}
.hero p{color:#29443b!important;max-width:600px!important;font-size:16px!important;line-height:1.7!important}
.primary-btn,.outline-btn{border-radius:999px!important;padding:13px 22px!important;font-size:13px!important;min-height:44px!important}
.primary-btn{background:linear-gradient(135deg,#e0b43c,#c48c17)!important;color:#fff!important;box-shadow:0 8px 22px rgba(192,137,23,.2)!important}
.outline-btn{border:1.5px solid var(--green)!important;color:var(--green)!important;background:rgba(255,255,255,.75)!important}
.gold-curve{right:-250px!important;bottom:-300px!important;width:760px!important;height:520px!important;border:2px solid rgba(211,161,43,.7)!important;opacity:.8}
.below-hero{background:#fff!important;padding:0 3.5vw 24px!important}
.update-card{background:var(--green)!important;border-radius:0 0 14px 14px!important}
.wings-wrap{background:#fff!important;padding:34px 0 46px!important}
.wings-wrap h2,.about-section h2,.departments h2,.events-section h2,.gallery h2,.contact h2,.support h2,.news-section h2{font-family:'Playfair Display',serif!important;color:var(--green)!important;font-size:clamp(30px,3.4vw,46px)!important}
.wings-wrap h2:after,.about-section h2:after,.departments h2:after,.events-section h2:after,.gallery h2:after,.contact h2:after,.support h2:after,.news-section h2:after{background:linear-gradient(90deg,transparent,var(--gold),transparent)!important}
.wing-grid{gap:14px!important;margin-top:18px!important}
.wing-card{border:1px solid #e3ded2!important;border-radius:16px!important;min-height:300px!important;padding:18px 13px 15px!important;background:#fff!important;box-shadow:0 8px 22px rgba(0,0,0,.07)!important}
.wing-card img{width:96px!important;height:96px!important}
.wing-card h3{font-size:14px!important;line-height:1.2!important;color:var(--green)!important}
.wing-card p{font-size:12px!important;line-height:1.55!important;color:#4f625b!important}
.wing-card a{background:linear-gradient(135deg,#dfb13c,#c58d18)!important;border-radius:9px!important;padding:9px 15px!important;font-size:11px!important}
.home-wings{padding:58px 0!important;background:#fff!important}
.home-wings-inner{width:min(1200px,calc(100% - 28px))!important}
.home-wings .section-kicker{color:#ad7c1c!important}
.home-wings h2{font-family:'Playfair Display',serif!important;color:var(--green)!important;font-size:clamp(34px,4vw,48px)!important}
.home-wings h2 span{color:var(--green)!important}
.home-wings-intro{color:#50615b!important}
.home-wings-grid{gap:14px!important}
.home-wing-card{border:1px solid #e2ddd1!important;border-radius:16px!important;background:#fff!important;box-shadow:0 9px 25px rgba(0,0,0,.07)!important}
.home-wing-card:hover{border-color:#e0bb55!important;box-shadow:0 16px 35px rgba(0,0,0,.10)!important}
.home-wing-visual{background:#fff!important}
.home-wing-body h3{color:var(--green)!important}
.home-wing-body p{color:#50615b!important}
.home-wing-more{color:#a87816!important}
.gallery{background:#f6f5ef!important}
.gallery-slider-section,.youtube-section{background:#fff!important}
.gallery-viewport,.youtube-frame{box-shadow:0 16px 38px rgba(0,0,0,.11)!important}
.youtube-channel-banner{background:linear-gradient(135deg,#004b36,#087052)!important;border-radius:20px!important}
.youtube-channel-btn{background:linear-gradient(135deg,#e8bd4b,#c9921e)!important;border-radius:999px!important}
.support{background:linear-gradient(135deg,#f1e7ce,#fff)!important}
.support .primary-btn{background:var(--green)!important}
footer{background:var(--green3)!important;border-top:3px solid var(--gold)!important}
footer::before{display:none!important}
footer a:hover{color:var(--gold2)!important}
.social-btn{border-color:rgba(241,207,114,.6)!important}
.social-btn:hover{background:var(--gold)!important;color:var(--green3)!important}
@media(max-width:1200px){.site-header .brand{min-width:250px!important}.site-header nav{gap:10px!important}.site-header nav a{font-size:11px!important}.hero h1{font-size:clamp(38px,5vw,58px)!important}}
@media(max-width:950px){.site-header{height:76px!important;min-height:76px!important}.site-header .brand{min-width:0!important}.site-header .brand img{width:52px!important;height:52px!important}.site-header .brand strong{font-size:13px!important}.site-header nav{display:none!important}.site-header .menu-toggle{display:flex!important;margin-left:auto!important;width:46px!important;height:46px!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:5px!important}.site-header .menu-toggle span{display:block!important;width:24px!important;height:3px!important;background:var(--green)!important;border-radius:5px!important}.hero{height:auto!important;min-height:0!important;max-height:none!important;padding:0!important}.hero-bg{position:absolute!important;inset:0!important}.hero-overlay{position:absolute!important;inset:0!important;background:linear-gradient(90deg,rgba(251,250,245,.98),rgba(251,250,245,.84) 65%,rgba(251,250,245,.30))!important}.hero-content{min-height:calc(100svh - 76px)!important;padding:56px 7vw 64px!important;max-width:700px!important}.hero h1{font-size:clamp(38px,9vw,58px)!important}.hero h3{font-size:17px!important}.hero p{font-size:15px!important}.hero-buttons{flex-direction:column!important;align-items:stretch!important;max-width:430px}.hero-buttons a{justify-content:space-between!important}.home-wings-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.wing-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:500px){.topbar{display:none!important}.site-header .brand strong{font-size:11px!important}.hero-content{padding:42px 18px 52px!important}.welcome-script{font-size:17px!important}.hero h1{font-size:clamp(35px,12vw,49px)!important}.hero h3{font-size:15px!important}.hero p{font-size:14px!important}.home-wings-grid,.wing-grid{grid-template-columns:1fr!important}.home-wing-visual{min-height:125px!important}.wing-card{min-height:270px!important}}

/* =========================================================
   V27 — Mobile navigation fix (applies to every page)
   The rule above hides nav on mobile with !important, which also
   blocked the opened state. These restore a readable slide-down menu.
   ========================================================= */
@media(max-width:950px){
  .site-header{position:relative!important}
  .site-header.nav-open nav,
  .site-header.nav-open #main-navigation{
    display:flex!important;
    flex-direction:column!important;
    position:absolute!important;
    left:12px!important;
    right:12px!important;
    top:100%!important;
    width:auto!important;
    max-height:calc(100svh - 90px)!important;
    overflow:auto!important;
    gap:0!important;
    padding:8px!important;
    background:#fff!important;
    border:1px solid rgba(0,75,54,.12)!important;
    border-radius:0 0 18px 18px!important;
    box-shadow:0 18px 38px rgba(0,0,0,.16)!important;
    z-index:300!important;
  }
  .site-header.nav-open nav a,
  .site-header.nav-open #main-navigation a{
    display:flex!important;
    align-items:center!important;
    width:100%!important;
    min-height:48px!important;
    padding:12px 14px!important;
    margin:0!important;
    border:0!important;
    border-bottom:1px solid #eee9df!important;
    border-radius:0!important;
    font-size:14px!important;
    font-weight:700!important;
    color:#004b36!important;
    background:transparent!important;
    white-space:normal!important;
    text-align:left!important;
  }
  .site-header.nav-open nav a:last-child,
  .site-header.nav-open #main-navigation a:last-child{border-bottom:0!important}
  .site-header.nav-open nav a:hover{background:#faf7ef!important}
  .site-header.nav-open nav .mobile-support-link,
  .site-header.nav-open #main-navigation .mobile-support-link{
    display:flex!important;
    justify-content:center!important;
    margin-top:8px!important;
    border-radius:10px!important;
    background:var(--gold,#d4a126)!important;
    color:#fff!important;
    font-weight:800!important;
  }
}
