/* ============================================================
   ASWJ Revesby — overrides on the Ibadah template
   Palette: teal + gold blend
   --theme-colour (gold #fbc50b) kept from template
   green #314e3f  ->  navy #153238 ; add teal #0097a7
   ============================================================ */
:root{
  --aswj-navy:#153238;
  --aswj-navy-2:#1d454d;
  --aswj-teal:#0097a7;
  --aswj-teal-dk:#007d8a;
  --aswj-gold:#fbc50b;
}

/* ---------- SECTION 2: HERO (live flyer display) ---------- */
.aswj-hero{position:relative;width:100%;height:78vh;min-height:460px;background:var(--aswj-navy);overflow:hidden}
.aswj-hero-display{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
@media(max-width:768px){.aswj-hero{height:62vh;min-height:360px}}
.hero-mute{position:absolute;left:18px;bottom:18px;z-index:6;width:50px;height:50px;border-radius:50%;background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.35);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);transition:background var(--t,.2s),transform .2s}
.hero-mute:hover{background:rgba(0,0,0,.78);transform:scale(1.06)}
.hero-mute svg{width:24px;height:24px;fill:#fff}
.hero-mute svg[hidden]{display:none!important}

/* ---------- SECTION 3: PRAYER TIMES BAR ---------- */
.aswj-pb-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.4rem 1rem;margin-bottom:1.4rem;padding-bottom:.9rem;border-bottom:1px solid #eee}
.aswj-pb-method{font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--common-colour)}
.aswj-pb-date{font-size:.95rem;color:#555}
.aswj-pb-date b{color:#111;font-weight:700}
.aswj-pb-date #pb-hijri{color:var(--common-colour);font-weight:600}
/* tighten the time + iqamah lines */
.namaz-time h5 span[id]{display:block}
/* "Full schedule" link — hidden until you hover the prayer-time column.
   Must sit ABOVE the card's white ::before overlay (z-index), and turn white
   on hover because the card background becomes green. */
.namaz-time .pb-link{position:relative;z-index:3;display:inline-block;margin-top:.55rem;font-size:.72rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#fff;text-decoration:none;opacity:0;transition:opacity .2s}
.namaz-time:hover .pb-link,.namaz-time:focus-within .pb-link{opacity:1}
.namaz-time:hover .pb-link:hover{color:var(--theme-colour);text-decoration:underline}
/* Jumu'ah venue lines */
.namaz-time h5 .pb-venue{display:block;font-weight:400}
.namaz-time h5 .pb-yc{font-weight:700;color:#111}

/* ---------- SECTION 6: LIVE STREAM (public + shared player styles) ---------- */
.aswj-live{background:linear-gradient(160deg,#0e3822 0%,#071c11 100%)}
.aswj-live .heading p{color:var(--aswj-gold);font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:.8rem;margin:.4rem 0 .2rem}
.aswj-live .heading h2{color:#fff}
.aswj-live .heading{text-align:center;margin-bottom:2.4rem}
.live-frame{position:relative;max-width:920px;margin:0 auto;aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:#0b2417;box-shadow:0 18px 50px rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.12)}
.live-frame [hidden]{display:none!important}
.live-video{position:absolute;inset:0;width:100%;height:100%;display:block;background:#0b2417;object-fit:contain}
.live-overlay{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;cursor:pointer;text-align:center;padding:1.5rem;background:radial-gradient(circle at 50% 40%,rgba(0,125,58,.30),rgba(7,28,17,.92));transition:background .25s}
.live-overlay:hover{background:radial-gradient(circle at 50% 40%,rgba(0,125,58,.45),rgba(7,28,17,.9))}
.live-overlay.is-hidden{display:none}
.live-badge{display:inline-flex;align-items:center;gap:.45em;background:#e02d2d;color:#fff;font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;padding:.4em .85em;border-radius:100px}
.live-badge::before{content:"";width:8px;height:8px;border-radius:50%;background:#fff;animation:livePulse 1.6s infinite}
@keyframes livePulse{0%,100%{opacity:1}50%{opacity:.25}}
.live-play{width:78px;height:78px;border-radius:50%;background:var(--aswj-gold);display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(0,0,0,.4);transition:transform .25s}
.live-overlay:hover .live-play{transform:scale(1.08)}
.live-play svg{margin-left:5px}
.live-overlay-text{font-family:var(--common-font);font-size:1.45rem;font-weight:700;color:#fff}
.live-overlay-sub{font-size:.9rem;color:rgba(255,255,255,.75);max-width:360px}
.live-loading{position:absolute;inset:0;z-index:3;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.35)}
.live-spinner{width:54px;height:54px;border-radius:50%;border:4px solid rgba(255,255,255,.25);border-top-color:#fff;animation:liveSpin 1s linear infinite}
@keyframes liveSpin{to{transform:rotate(360deg)}}
.live-offline{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.55rem;text-align:center;padding:1.5rem;background:radial-gradient(circle at 50% 40%,rgba(0,125,58,.2),rgba(7,28,17,.96));color:#fff}
.live-offline h3{font-family:var(--common-font);font-size:1.35rem;font-weight:700;margin:0;color:#fff}
.live-offline p{font-size:.9rem;color:rgba(255,255,255,.72);max-width:340px;margin:0}
.live-retry{margin-top:.5rem;background:var(--aswj-gold);color:#0b2417;border:none;border-radius:100px;padding:.55em 1.4em;font-weight:700;cursor:pointer}
.live-retry:hover{background:#ffd64d}
.live-controls{position:absolute;left:0;right:0;bottom:0;z-index:6;display:flex;align-items:center;gap:.4rem;padding:.7rem .85rem;background:linear-gradient(to top,rgba(0,0,0,.78),rgba(0,0,0,0));transition:opacity .25s}
.live-frame.hide-ui .live-controls{opacity:0;pointer-events:none}
.live-frame.hide-ui{cursor:none}
.live-ctrl{background:none;border:none;color:#fff;cursor:pointer;width:38px;height:38px;display:flex;align-items:center;justify-content:center;border-radius:8px;transition:background .2s;padding:0;flex-shrink:0}
.live-ctrl:hover{background:rgba(255,255,255,.16)}
.live-ctrl svg{width:22px;height:22px;fill:#fff}
.live-vol{width:78px;accent-color:#fff;cursor:pointer}
.live-spacer{flex:1}
.live-livebtn{display:inline-flex;align-items:center;gap:.45em;background:rgba(255,255,255,.12);color:#fff;border:none;border-radius:100px;padding:.4em .85em;font-size:.7rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;cursor:pointer;flex-shrink:0}
.live-livebtn .dot{width:8px;height:8px;border-radius:50%;background:#8a9aa0}
.live-livebtn.is-live{background:rgba(224,45,45,.22)}
.live-livebtn.is-live .dot{background:#e02d2d;animation:livePulse 1.6s infinite}
@media(max-width:580px){.live-vol{display:none}}
.live-share{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:.6rem;margin-top:2rem}
.live-share-label{font-size:.8rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.6);margin-right:.3rem}
.live-share-btn{width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.08);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s,transform .2s}
.live-share-btn:hover{background:var(--aswj-gold);color:#0b2417;transform:translateY(-2px)}
.live-share-btn svg{width:20px;height:20px;fill:currentColor}
.live-toast{position:fixed;left:50%;bottom:96px;transform:translateX(-50%) translateY(12px);background:#0b2417;color:#fff;padding:.7em 1.2em;border-radius:100px;font-size:.85rem;font-weight:600;box-shadow:0 8px 28px rgba(0,0,0,.4);opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;z-index:10000}
.live-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
/* Class-login gate (members page) */
.pv-gate{position:absolute;inset:0;z-index:7;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.7rem;text-align:center;padding:1.5rem;background:radial-gradient(circle at 50% 40%,rgba(0,125,58,.25),rgba(7,28,17,.96))}
.pv-gate.is-hidden{display:none}
.pv-gate-title{font-family:var(--common-font);font-size:1.45rem;color:#fff;margin:0}
.pv-gate-sub{font-size:.92rem;color:rgba(255,255,255,.75);max-width:340px;margin:0 0 .3rem}
#pv-form{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center}
.pv-input{padding:.7em 1em;border-radius:8px;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.1);color:#fff;font-size:1rem;min-width:210px}
.pv-input::placeholder{color:rgba(255,255,255,.5)}
.pv-input:focus{outline:none;border-color:var(--aswj-gold)}
.pv-submit{background:var(--aswj-gold);color:#0b2417;border:none;border-radius:8px;padding:.7em 1.4em;font-weight:700;cursor:pointer}
.pv-submit:hover{background:#ffd64d}
.pv-error{color:#ff9a9a;font-size:.86rem;margin:.3rem 0 0}

/* ---------- ALBAYAN RADIO — floating sitewide player ---------- */
#albayan-player{position:fixed;bottom:24px;right:24px;z-index:9999;display:flex;align-items:center;gap:14px;background:linear-gradient(135deg,#cc2a1e 0%,#8e1e14 100%);border-radius:18px;padding:12px 23px 12px 16px;box-shadow:0 8px 32px rgba(0,0,0,.45),0 2px 8px rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.12)}
#albayan-logo-wrap{flex-shrink:0;width:60px;height:60px;border-radius:12px;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.25);display:flex;align-items:center;justify-content:center;padding:5px;box-sizing:border-box}
#albayan-logo{width:100%;height:100%;object-fit:contain;display:block}
#albayan-info{display:flex;flex-direction:column;gap:3px;margin-right:6px}
#albayan-title{color:#fff;font-weight:800;font-size:17px;line-height:1.2;white-space:nowrap}
#albayan-sub{color:#fff;font-weight:700;font-size:13.5px;white-space:nowrap}
#albayan-btn{width:56px;height:56px;border-radius:50%;background:#1a3a6b;border:none;outline:3px solid rgba(255,255,255,.55);outline-offset:4px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .2s,transform .1s;margin:0 0 0 auto}
#albayan-btn:hover{background:#22508a;transform:scale(1.06)}
#albayan-btn:active{transform:scale(.95)}
#albayan-player.playing #albayan-sub{color:#ffd700}
#albayan-player.playing{box-shadow:0 8px 32px rgba(0,0,0,.45),0 0 0 3px rgba(255,215,0,.35)}
@media(max-width:580px){#albayan-player{right:12px;bottom:12px;max-width:calc(100vw - 24px);gap:10px;padding:10px 12px}#albayan-logo-wrap{width:50px;height:50px}#albayan-btn{width:48px;height:48px}#albayan-title{font-size:15px}#albayan-sub{font-size:12.5px}}
/* hide the template scroll-to-top circle — its triangle icon reads as a
   second play button next to the radio player */
#progress{display:none !important}
/* remove the template audio-player's green play circle entirely —
   it reads as a second play button next to the radio player */
.audioplayer-playpause{display:none !important}
/* the plugin also auto-wraps the radio's <audio> in an empty div inside the
   floating card, adding a phantom flex gap — hide it (audio still plays) */
#albayan-player .audioplayer{display:none !important}

/* ---------- SECTION 5: ABOUT ---------- */
.aswj-about .heading{text-align:center;margin-bottom:2.6rem}
.aswj-about .heading p{color:var(--common-colour);font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:.8rem;margin:.4rem 0 .2rem}
.aswj-about-text p{color:#555;line-height:1.85;margin-bottom:1rem}
.aswj-about-text .list{margin:1.3rem 0 1.6rem}
.aswj-about-media{position:relative;padding-bottom:10px;padding-left:10px}
.aswj-about-img{width:100%;border-radius:16px;box-shadow:0 20px 46px rgba(0,0,0,.16);object-fit:cover;display:block}
.aswj-about-badge{position:absolute;left:-26px;bottom:-26px;width:138px;height:138px;background:#fff;border-radius:50%;box-shadow:0 16px 34px rgba(0,0,0,.28);display:flex;align-items:center;justify-content:center}
.aswj-badge-text{position:absolute;inset:0;width:100%;height:100%;animation:aswjSpin 22s linear infinite}
.aswj-badge-text text{font-size:11.5px;font-weight:700;fill:var(--aswj-navy);letter-spacing:.5px;text-transform:uppercase}
.aswj-badge-logo{position:relative;z-index:2;width:52%;height:52%;object-fit:contain;display:block}
@keyframes aswjSpin{to{transform:rotate(360deg)}}
@media(max-width:991px){.aswj-about-media{margin-top:2rem;max-width:520px}.aswj-about-badge{width:112px;height:112px;left:-10px;bottom:-14px}.aswj-badge-text text{font-size:12px}}

/* ---------- SECTION 7: SERVICES ---------- */
.aswj-services .heading{text-align:center;margin-bottom:2.4rem}
.aswj-services .heading p{color:var(--common-colour);font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:.8rem;margin:.4rem 0 .2rem}
.aswj-service{background:#fff;border:1px solid #ececec;border-radius:14px;padding:1.9rem 1.6rem;height:100%;box-shadow:0 6px 24px rgba(0,0,0,.05);transition:transform .25s,box-shadow .25s;text-align:center}
.aswj-service:hover{transform:translateY(-5px);box-shadow:0 16px 36px rgba(0,0,0,.1)}
.aswj-service i{font-size:2rem;color:var(--common-colour);background:rgba(0,125,58,.08);width:72px;height:72px;line-height:72px;border-radius:50%;margin-bottom:1.1rem}
.aswj-service h4{font-family:var(--common-font);color:var(--aswj-navy);font-size:1.25rem;margin:.2rem 0 .6rem}
.aswj-service p{color:#666;font-size:.95rem;line-height:1.7;margin:0}

/* ---------- SECTION 4: EVENTS ---------- */
.aswj-events .heading{text-align:center;margin-bottom:2.6rem}
.aswj-events .heading p{color:var(--common-colour);font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:.8rem;margin:.4rem 0 .2rem}
.aswj-events .row{row-gap:1.6rem}
.aswj-event{border:1px solid #ececec;border-radius:14px;overflow:hidden;box-shadow:0 6px 24px rgba(0,0,0,.05);transition:transform .25s,box-shadow .25s;height:100%;background:#fff}
.aswj-event:hover{transform:translateY(-5px);box-shadow:0 16px 36px rgba(0,0,0,.1)}
.aswj-event-band{background:linear-gradient(135deg,var(--aswj-navy) 0%,var(--common-colour) 100%);padding:1.3rem 1.5rem}
.aswj-event-band span{font-weight:800;letter-spacing:.1em;text-transform:uppercase;font-size:.78rem;color:var(--aswj-gold)}
.aswj-event .upcoming-text{padding:1.4rem 1.5rem}
.aswj-event .upcoming-text h4{margin:0 0 1rem;font-size:1.2rem;line-height:1.25}
.aswj-event .upcoming-text h4 a{color:var(--aswj-navy);text-decoration:none}
.aswj-event .upcoming-text h4 a:hover{color:var(--common-colour)}
.aswj-event .location{display:flex;align-items:center;gap:.55rem;color:#666;font-size:.92rem;margin-bottom:.55rem}
.aswj-event .location i{color:var(--common-colour);width:16px;text-align:center}
.aswj-event-link{display:inline-flex;align-items:center;gap:.45rem;margin-top:.7rem;font-weight:700;color:var(--common-colour);text-decoration:none}
.aswj-event-link:hover{color:var(--theme-colour)}

/* Top bar — today's Iqamah strip */
.aswj-topbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.35rem .9rem}
.aswj-tb-iqamah{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap}
.aswj-tb-label{font-size:.68rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--aswj-gold);white-space:nowrap}
.aswj-tb-times{display:flex;gap:.8rem;flex-wrap:wrap}
.aswj-tb-times > span{color:rgba(255,255,255,.78);font-size:.82rem;white-space:nowrap}
.aswj-tb-times b{color:#fff;font-weight:700;margin-left:.15em}
.aswj-tb-right{display:flex;align-items:center;gap:1rem;margin-left:auto}
.aswj-tb-date{color:rgba(255,255,255,.85);font-size:.82rem;white-space:nowrap}
.aswj-tb-date b{color:#fff;font-weight:700}
.aswj-tb-date #pb-hijri{color:var(--aswj-gold)}
@media(max-width:1200px){.aswj-tb-label{display:none}}
@media(max-width:900px){.aswj-tb-date{display:none}}

/* ---------- SECTION 1: HEADER ---------- */
/* Solid sticky header (was absolute/transparent over the hero) */
header{
  position:sticky;
  top:0;
  background:var(--aswj-navy);
  border-bottom:3px solid var(--aswj-gold);
  box-shadow:0 2px 14px rgba(0,0,0,.18);
}

/* Top bar */
header .top-bar{padding:9px 0;border-bottom:1px solid rgba(255,255,255,.10)}
header .top-bar .content-header h4,
header .top-bar .content-header h4 b,
header .top-bar .location p,
header .top-bar .location a{color:rgba(255,255,255,.85)}
header .top-bar .location a:hover{color:var(--aswj-gold)}
header .top-bar .social-media a .icon,
header .top-bar .social-media a i{color:#fff;transition:.25s}
header .top-bar .social-media a:hover i{color:var(--aswj-gold)}
.top-bar .login .aswj-toplink{color:#fff;font-weight:600;font-size:.9rem;display:inline-flex;align-items:center;gap:.4em}
.top-bar .login .aswj-toplink:hover{color:var(--aswj-gold)}

/* Full-width green header bar: stretch the template's 34px side nubs out to the
   viewport edges so the green reaches the page edges instead of floating. */
header .two-bar:before{width:50vw;left:auto;right:100%;border-radius:0}
header .two-bar:after{width:50vw;left:100%;right:auto;border-radius:0}

/* Logo + brand wordmark lockup */
.logo{margin-left:-18px}
.aswj-brand{display:flex;align-items:center;gap:13px;text-decoration:none}
.logo img{height:56px;width:auto;background:#fff;border-radius:10px;padding:3px;flex-shrink:0}
.aswj-wordmark{display:flex;flex-direction:column;line-height:1}
.aswj-wm-top{font-family:'Sawarabi Mincho',serif;color:#fff;font-size:1.85rem;font-weight:700;letter-spacing:-.02em}
.aswj-wm-sig{font-family:'Great Vibes',cursive;color:var(--aswj-gold);font-size:1.7rem;line-height:.85;margin-top:1px;margin-left:0}
/* Mobile-only Donate button (next to hamburger) */
.aswj-mobile-donate{display:none !important}
@media(max-width:991px){
  .logo{margin-left:0}
  .logo img{height:40px}
  .aswj-wm-top{font-size:1.25rem}
  .aswj-wm-sig{font-size:1.15rem}
  .aswj-mobile-donate{display:inline-flex !important;margin-left:auto;margin-right:14px;padding:.5em 1em}
}
@media(max-width:575px){
  .aswj-wm-top{font-size:1.15rem}
  .aswj-wm-sig{font-size:1.05rem}
  .logo img{height:36px}
  .aswj-mobile-donate{margin-right:10px;padding:.45em .85em;font-size:.82rem}
}

/* Mobile: show a compact "Today's Iqamah" strip (template hides .top-bar <1200px) */
@media(max-width:1200px){
  header .top-bar{display:block !important;padding:7px 0}
  /* full-bleed header bars: drop the Bootstrap container gutter, re-inset content */
  header .container{padding-left:0 !important;padding-right:0 !important}
  header .two-bar{padding-left:14px;padding-right:14px}
  .aswj-topbar{justify-content:center;padding:0 12px}
  .aswj-tb-right{display:none !important}
  .aswj-tb-iqamah{justify-content:center;gap:.5rem;flex-wrap:wrap;width:100%}
  .aswj-tb-times{gap:.55rem;justify-content:center;flex-wrap:wrap}
  /* show the "Today's Iqamah" heading, centred on its own line */
  .aswj-tb-label{display:block !important;width:100%;text-align:center;margin:0 0 3px}
}
@media(max-width:640px){
  .aswj-tb-times > span{font-size:.72rem}
  .aswj-tb-times{gap:.4rem}
}

/* Main nav row */
.menu-inner,.navbar{padding-top:6px;padding-bottom:6px}
.navbar-links li a{color:#eaf0f2 !important;font-weight:600;font-size:.95rem}
.navbar-links li a:hover{color:var(--aswj-gold) !important}
.navbar-dropdown .dropdown{background:var(--aswj-navy-2)}
.navbar-dropdown .dropdown a{color:#eaf0f2 !important}
.navbar-dropdown .dropdown a:hover{color:var(--aswj-gold) !important;background:rgba(255,255,255,.05)}

/* Phone + search in header */
.header-search > a{color:#fff;font-weight:600}
.header-search > a:hover{color:var(--aswj-gold)}
.header-search svg{fill:var(--aswj-gold)}
.search-btn svg{fill:#fff}

/* Donate / Class Login buttons in the header */
.aswj-btn{display:inline-flex;align-items:center;gap:.45em;font-weight:700;font-size:.9rem;
  padding:.6em 1.25em;border-radius:8px;transition:.25s;white-space:nowrap}
.aswj-btn-gold{background:var(--aswj-gold);color:var(--aswj-navy)}
.aswj-btn-gold:hover{background:#ffd64d;color:var(--aswj-navy)}
.aswj-btn-teal{background:var(--aswj-teal);color:#fff}
.aswj-btn-teal:hover{background:var(--aswj-teal-dk);color:#fff}
.aswj-header-cta{display:flex;align-items:center;gap:10px}

/* Mobile menu panel */
.mobile-nav{background:var(--aswj-navy)}
.mobile-nav .menu-box .menu-outer ul li a{color:#eaf0f2}
.mobile-nav .menu-box .menu-outer ul li a:hover{color:var(--aswj-gold)}
.bar-menu span,.bar-menu::before,.bar-menu::after{background:#fff}

/* ---------- FOOTER ---------- */
.aswj-footer{background:var(--aswj-navy);color:rgba(255,255,255,.62);border-top:3px solid var(--aswj-gold);background-image:none}
.aswj-footer-top{display:grid;grid-template-columns:1.15fr 2fr;gap:56px;padding:58px 0 44px;border-bottom:1px solid rgba(255,255,255,.09)}
/* Brand column */
.aswj-foot-logo{display:inline-flex;align-items:center;gap:12px;text-decoration:none;margin-bottom:18px}
.aswj-foot-logo img{height:52px;width:auto;background:#fff;border-radius:10px;padding:3px;flex-shrink:0}
.aswj-foot-wm{display:flex;flex-direction:column;line-height:1}
.aswj-foot-wm b{font-family:'Sawarabi Mincho',serif;color:#fff;font-size:1.55rem;font-weight:700;letter-spacing:-.02em}
.aswj-foot-wm i{font-family:'Great Vibes',cursive;color:var(--aswj-gold);font-size:1.5rem;line-height:.9;font-style:normal}
.aswj-foot-about{font-size:.9rem;line-height:1.7;color:rgba(255,255,255,.5);max-width:300px;margin-bottom:20px}
.aswj-foot-about em{color:var(--aswj-gold);font-style:italic}
.aswj-foot-social{display:flex;gap:10px;padding:0;margin:0;list-style:none}
.aswj-foot-social a{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.08);color:#fff;font-size:.95rem;transition:.25s}
.aswj-foot-social a:hover{background:var(--aswj-gold);color:var(--aswj-navy);transform:translateY(-2px)}
/* Link columns */
.aswj-foot-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.aswj-foot-col h4{font-size:.78rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--aswj-gold);margin-bottom:18px}
.aswj-foot-col ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:11px}
.aswj-foot-col a{font-size:.92rem;color:rgba(255,255,255,.6);text-decoration:none;transition:.2s}
.aswj-foot-col a:hover{color:#fff;padding-left:3px}
.aswj-foot-contact li{display:flex;align-items:flex-start;gap:11px;font-size:.9rem;line-height:1.5;color:rgba(255,255,255,.6)}
.aswj-foot-contact li i{color:var(--aswj-gold);width:16px;text-align:center;margin-top:3px;flex-shrink:0}
.aswj-foot-contact a{color:rgba(255,255,255,.6);text-decoration:none}
.aswj-foot-contact a:hover{color:#fff}
/* Bottom bar */
.aswj-footer-bottom{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;padding:20px 0;font-size:.82rem;color:rgba(255,255,255,.4)}
.aswj-footer-bottom p{margin:0}
.aswj-foot-legal a{color:rgba(255,255,255,.55);text-decoration:none}
.aswj-foot-legal a:hover{color:var(--aswj-gold)}
.aswj-foot-legal span{margin:0 8px;color:rgba(255,255,255,.25)}
@media(max-width:991px){
  .aswj-footer-top{grid-template-columns:1fr;gap:36px;padding:44px 0 34px}
}
@media(max-width:575px){
  .aswj-foot-cols{grid-template-columns:1fr 1fr;gap:26px}
  .aswj-foot-contact{grid-column:1 / -1}
  .aswj-footer-bottom{flex-direction:column;text-align:center;gap:8px}
}

/* ---------- INNER PAGES: shared shell ---------- */
/* Outline button variant */
.aswj-btn-outline{background:transparent;color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.55)}
.aswj-btn-outline:hover{background:#fff;color:var(--aswj-navy);box-shadow:inset 0 0 0 2px #fff}

/* Page hero / breadcrumb banner */
.aswj-page-hero{position:relative;background:linear-gradient(150deg,#0e262b 0%,var(--aswj-navy) 55%,#1d454d 100%);color:#fff;padding:64px 0 58px;text-align:center;overflow:hidden;border-bottom:3px solid var(--aswj-gold)}
.aswj-page-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% -20%,rgba(251,197,11,.16),transparent 60%);pointer-events:none}
.aswj-page-hero .container{position:relative;z-index:2}
.aswj-ph-eyebrow{font-size:.78rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--aswj-gold);margin:0 0 .6rem}
.aswj-page-hero h1{font-family:var(--common-font);font-size:2.9rem;font-weight:700;color:#fff;margin:0 0 1rem;line-height:1.1}
.aswj-breadcrumb{display:inline-flex;align-items:center;gap:.55rem;font-size:.9rem;color:rgba(255,255,255,.65)}
.aswj-breadcrumb a{color:rgba(255,255,255,.65);text-decoration:none;transition:.2s}
.aswj-breadcrumb a:hover{color:var(--aswj-gold)}
.aswj-breadcrumb span[aria-current]{color:#fff;font-weight:600}
.aswj-breadcrumb > span{color:rgba(255,255,255,.4)}
@media(max-width:767px){.aswj-page-hero{padding:44px 0 40px}.aswj-page-hero h1{font-size:2.1rem}}

/* Values / foundation cards */
.aswj-value{background:#fff;border:1px solid #ececec;border-radius:16px;padding:34px 28px;height:100%;text-align:center;box-shadow:0 6px 24px rgba(0,0,0,.05);transition:transform .25s,box-shadow .25s}
.aswj-value:hover{transform:translateY(-6px);box-shadow:0 16px 40px rgba(0,0,0,.1)}
.aswj-value-ico{display:inline-flex;align-items:center;justify-content:center;width:70px;height:70px;border-radius:50%;background:linear-gradient(140deg,var(--aswj-navy),var(--aswj-navy-2));color:var(--aswj-gold);font-size:1.7rem;margin-bottom:20px}
.aswj-value h4{font-family:var(--common-font);font-weight:700;color:var(--aswj-navy);margin-bottom:.6rem;font-size:1.25rem}
.aswj-value p{color:#666;font-size:.95rem;line-height:1.65;margin:0}

/* CTA band */
.aswj-cta-band{background:linear-gradient(120deg,var(--aswj-navy) 0%,#0e2a20 100%);position:relative;overflow:hidden}
.aswj-cta-band::before{content:"";position:absolute;right:-60px;top:-60px;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,rgba(251,197,11,.18),transparent 70%)}
.aswj-cta-inner{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;padding:52px 0}
.aswj-cta-inner h2{font-family:var(--common-font);color:#fff;font-size:2rem;font-weight:700;margin:0 0 .5rem}
.aswj-cta-inner p{color:rgba(255,255,255,.75);margin:0;max-width:520px;font-size:.98rem;line-height:1.6}
.aswj-cta-actions{display:flex;gap:14px;flex-wrap:wrap}
.aswj-cta-actions .aswj-btn{padding:.75em 1.5em;font-size:.95rem}
@media(max-width:767px){.aswj-cta-inner{padding:40px 0}.aswj-cta-inner h2{font-size:1.6rem}}

/* Active nav item */
.navbar-links li a.active{color:var(--aswj-gold) !important}

/* ---------- CONTACT PAGE ---------- */
.aswj-contact-eyebrow{font-size:.78rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--aswj-teal);margin:0 0 .5rem}
.aswj-contact-intro h2{font-family:var(--common-font);color:var(--aswj-navy);font-weight:700;font-size:1.9rem;margin:0 0 .8rem}
.aswj-contact-lead{color:#666;line-height:1.7;margin:0 0 1.8rem}
.aswj-contact-list{list-style:none;padding:0;margin:0 0 1.8rem;display:flex;flex-direction:column;gap:1.15rem}
.aswj-contact-list li{display:flex;align-items:flex-start;gap:1rem}
.aswj-ci-ico{flex-shrink:0;width:48px;height:48px;border-radius:12px;background:linear-gradient(140deg,var(--aswj-navy),var(--aswj-navy-2));color:var(--aswj-gold);display:flex;align-items:center;justify-content:center;font-size:1.15rem}
.aswj-contact-list strong{display:block;font-size:.8rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--aswj-navy);margin-bottom:.2rem}
.aswj-contact-list p{margin:0;color:#666;line-height:1.5;font-size:.95rem}
.aswj-contact-list a{color:#666;text-decoration:none}
.aswj-contact-list a:hover{color:var(--aswj-teal)}
.aswj-contact-social{list-style:none;padding:0;margin:0;display:flex;gap:10px}
.aswj-contact-social a{width:42px;height:42px;border-radius:50%;background:#f2f4f5;color:var(--aswj-navy);display:inline-flex;align-items:center;justify-content:center;transition:.25s}
.aswj-contact-social a:hover{background:var(--aswj-gold);color:var(--aswj-navy);transform:translateY(-2px)}

/* Form card */
.aswj-form-card{background:#fff;border:1px solid #ececec;border-radius:18px;padding:38px 34px;box-shadow:0 12px 40px rgba(0,0,0,.06)}
.aswj-form-card h3{font-family:var(--common-font);color:var(--aswj-navy);font-weight:700;font-size:1.4rem;margin:0 0 1.4rem}
.aswj-form-card label{display:block;font-size:.82rem;font-weight:700;color:var(--aswj-navy);margin-bottom:.4rem}
.aswj-opt{font-weight:400;color:#999;text-transform:none;letter-spacing:0}
.aswj-form-card input,.aswj-form-card textarea{width:100%;border:1px solid #dde1e3;border-radius:10px;padding:.72em .95em;font-size:.95rem;color:#333;background:#fafbfb;transition:border-color .2s,box-shadow .2s;font-family:inherit}
.aswj-form-card input:focus,.aswj-form-card textarea:focus{outline:none;border-color:var(--aswj-teal);box-shadow:0 0 0 3px rgba(0,151,167,.14);background:#fff}
.aswj-form-card textarea{resize:vertical;min-height:130px}
.aswj-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.aswj-form-submit{border:none;cursor:pointer;margin-top:.4rem;padding:.8em 1.8em;font-size:.98rem}
.aswj-form-submit:disabled{opacity:.7;cursor:default}
.aswj-btn-spinner{width:16px;height:16px;border-radius:50%;border:2px solid rgba(0,0,0,.25);border-top-color:var(--aswj-navy);display:inline-block;animation:liveSpin .8s linear infinite;margin-left:.2em}
.aswj-btn-spinner[hidden]{display:none}
.aswj-form-status{margin:1rem 0 0;font-size:.92rem;line-height:1.5;font-weight:600}
.aswj-form-status.is-success{color:#0a7d3a}
.aswj-form-status.is-error{color:#c0392b}

/* Map */
.aswj-map-wrap{line-height:0}
.aswj-map-wrap iframe{width:100%;height:420px;border:0;display:block;filter:grayscale(.15)}
@media(max-width:767px){
  .aswj-form-card{padding:28px 22px}
  .aswj-map-wrap iframe{height:320px}
}

/* Events page — small note line under an event card */
.aswj-event-note{margin:.6rem 0 0;color:#777;font-size:.9rem;line-height:1.5}

/* Neutralise the template's rotated circular "read more" badge on event links */
.aswj-event .aswj-event-link{
  position:static;transform:none;width:auto;height:auto;
  border-radius:0;background:none;box-shadow:none;
  display:inline-flex;align-items:center;gap:.45rem;margin-top:.7rem;
  font-weight:700;color:var(--common-colour);text-decoration:none;
  font-size:.9rem;letter-spacing:normal;line-height:1.4;
}
.aswj-event .aswj-event-link:hover{color:var(--theme-colour);gap:.6rem}
.aswj-event .aswj-event-link i{position:static;transform:none;width:auto;height:auto;background:none;border-radius:0;color:inherit;font-size:.85em}

/* ---------- FOOTER legibility fixes ---------- */
/* Links & text were reading as "greyed out"; template p{color:#555} also bled
   into the copyright line. Use solid, clearly-legible light colours. */
.aswj-foot-col ul a{color:#cdd6d8}
.aswj-foot-col ul a:hover{color:#fff}
.aswj-foot-about{color:#aeb9bb}
.aswj-foot-about em{color:var(--aswj-gold)}
.aswj-foot-contact li{color:#cdd6d8}
.aswj-foot-contact li a{color:#cdd6d8}
.aswj-foot-contact li a:hover{color:#fff}
.aswj-footer-bottom,.aswj-footer-bottom p{color:#95a2a4}
.aswj-foot-legal a{color:#b7c1c3}
.aswj-foot-legal a:hover{color:var(--aswj-gold)}
/* white tile behind the footer logo so it isn't dark on navy (matches header) */
.aswj-foot-logo img{background:#fff;border-radius:10px;padding:4px}

/* Kill the template's dark footer overlay (footer::before, 90% dark-green) that
   was meant to darken a background image — it was dimming all our footer text. */
.aswj-footer::before{content:none !important;display:none !important}

/* ---------- CLASSES PAGE ---------- */
.aswj-classes-lead{max-width:820px;margin:0 auto;text-align:center;color:#555;font-size:1.05rem;line-height:1.75}
.aswj-class-card{text-align:left}
.aswj-class-card .aswj-value-ico{margin-bottom:16px}

/* Enrol / how-it-works */
.aswj-enrol{display:grid;grid-template-columns:1fr 1.1fr;gap:48px;align-items:center;background:#fff;border:1px solid #ececec;border-radius:20px;padding:22px;box-shadow:0 12px 40px rgba(0,0,0,.05)}
.aswj-enrol-media{border-radius:14px;overflow:hidden;height:100%;min-height:320px}
.aswj-enrol-media img{width:100%;height:100%;object-fit:cover;display:block}
.aswj-enrol-body{padding:14px 24px 14px 0}
.aswj-enrol-body h2{font-family:var(--common-font);color:var(--aswj-navy);font-weight:700;font-size:1.9rem;margin:0 0 1.4rem}
.aswj-enrol-steps{list-style:none;padding:0;margin:0 0 1.8rem;display:flex;flex-direction:column;gap:1.1rem}
.aswj-enrol-steps li{display:flex;gap:1rem;align-items:flex-start}
.aswj-step-n{flex-shrink:0;width:38px;height:38px;border-radius:50%;background:var(--aswj-gold);color:var(--aswj-navy);font-weight:800;display:flex;align-items:center;justify-content:center;font-size:1.05rem}
.aswj-enrol-steps strong{display:block;color:var(--aswj-navy);font-size:1.02rem;margin-bottom:.15rem}
.aswj-enrol-steps p{margin:0;color:#666;font-size:.94rem;line-height:1.55}
.aswj-enrol-actions{display:flex;gap:12px;flex-wrap:wrap}
.aswj-enrol-actions .aswj-btn{padding:.7em 1.4em}
@media(max-width:850px){
  .aswj-enrol{grid-template-columns:1fr;gap:24px}
  .aswj-enrol-media{min-height:220px}
  .aswj-enrol-body{padding:6px 10px 14px}
}

/* ---------- DONATE PAGE ---------- */
.aswj-give-card{background:#fff;border:1px solid #ececec;border-radius:16px;padding:34px 28px;height:100%;box-shadow:0 6px 24px rgba(0,0,0,.05);display:flex;flex-direction:column;transition:transform .25s,box-shadow .25s}
.aswj-give-card:hover{transform:translateY(-5px);box-shadow:0 16px 40px rgba(0,0,0,.1)}
.aswj-give-primary{border-color:var(--aswj-gold);box-shadow:0 10px 34px rgba(251,197,11,.18)}
.aswj-give-ico{display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:50%;background:linear-gradient(140deg,var(--aswj-navy),var(--aswj-navy-2));color:var(--aswj-gold);font-size:1.5rem;margin-bottom:18px}
.aswj-give-card h3{font-family:var(--common-font);color:var(--aswj-navy);font-weight:700;font-size:1.3rem;margin:0 0 .6rem}
.aswj-give-card > p{color:#666;font-size:.95rem;line-height:1.6;margin:0 0 1rem}
.aswj-give-btn{align-self:flex-start;margin-top:auto;padding:.7em 1.5em}
.aswj-give-note{font-size:.82rem;color:#999;font-style:italic;margin:.7rem 0 0}
.aswj-bank{list-style:none;padding:0;margin:0 0 .4rem;border-top:1px solid #eee}
.aswj-bank li{display:flex;justify-content:space-between;gap:1rem;padding:.55rem 0;border-bottom:1px solid #eee;font-size:.92rem}
.aswj-bank li span{color:#888}
.aswj-bank li b{color:var(--aswj-navy);font-weight:700;text-align:right}

/* ============================================================
   DESIGN ELEVATION — ui-ux-pro-max pass (v41)
   Minimalism/Swiss: EB Garamond headings + Inter body,
   warmer rhythm, softer depth, refined motion & focus.
   ============================================================ */
:root{
  --common-font:'EB Garamond', Georgia, 'Times New Roman', serif;
  --aswj-ink:#26302f;
  --aswj-ivory:#fbfaf6;
}
html{scroll-behavior:smooth}
body{
  font-family:'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  color:var(--aswj-ink);
  background:var(--aswj-ivory);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
/* Headings → elegant serif (colour left to existing rules so white-on-dark stays safe) */
h1,h2,h3,h4,h5,h6{font-family:var(--common-font);letter-spacing:-.01em}
p{line-height:1.72}

/* Section title (.heading) polish + gold accent rule */
.heading h2{color:var(--aswj-navy);font-weight:600;font-size:clamp(1.9rem,3.4vw,2.7rem);line-height:1.14}
.heading p{font-family:'Inter',sans-serif;font-weight:700;letter-spacing:.16em;font-size:.74rem;text-transform:uppercase}
.heading h2::after{content:"";display:block;width:56px;height:3px;border-radius:3px;background:var(--aswj-gold);margin:1rem auto 0}

/* Cards: rounder, warmer border, layered soft shadow */
.aswj-value,.aswj-service,.aswj-event,.aswj-give-card,.aswj-form-card,.aswj-enrol{
  border-color:#efe8db;
  box-shadow:0 1px 2px rgba(21,50,56,.04),0 12px 34px rgba(21,50,56,.06);
}

/* Buttons: refined weight/tracking + smooth lift */
.aswj-btn{font-weight:700;letter-spacing:.01em;transition:transform .2s ease,box-shadow .2s ease,background .2s ease,color .2s ease}
.aswj-btn-gold:hover,.aswj-btn-teal:hover,.aswj-btn-outline:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(21,50,56,.20)}

/* Accessible keyboard focus ring */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,.aswj-btn:focus-visible{
  outline:3px solid rgba(251,197,11,.7);outline-offset:2px;border-radius:8px;
}

/* Honour reduced-motion */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

/* ============================================================
   BOLDER REDESIGN LAYER (v42) — clearly-visible transformation
   ============================================================ */
/* Islamic 8-point-star geometry in every page banner */
.aswj-page-hero{padding:88px 0 78px;overflow:hidden}
.aswj-page-hero::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.14;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='88'%20height='88'%20viewBox='0%200%2088%2088'%3E%3Cg%20fill='none'%20stroke='%23fbc50b'%20stroke-width='1.1'%3E%3Crect%20x='24'%20y='24'%20width='40'%20height='40'/%3E%3Crect%20x='24'%20y='24'%20width='40'%20height='40'%20transform='rotate(45%2044%2044)'/%3E%3C/g%3E%3C/svg%3E");
  background-size:74px 74px;
}
.aswj-page-hero .container{position:relative;z-index:2}
.aswj-page-hero h1{font-size:clamp(2.5rem,5vw,3.7rem);letter-spacing:-.02em}
.aswj-ph-eyebrow{font-family:'Inter',sans-serif}

/* Bigger, more dramatic section titles */
.heading h2{font-size:clamp(2.1rem,4vw,3rem)}
.heading{margin-bottom:2.6rem}

/* Warm stone band to separate sections (About/Classes/Events/Donate) */
.aswj-values-wrap{background:#f2efe6;padding-top:82px;padding-bottom:82px}

/* Cards: animated gold/teal top accent + stronger lift */
.aswj-value,.aswj-service,.aswj-give-card{position:relative;overflow:hidden}
.aswj-value::before,.aswj-service::before,.aswj-give-card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--aswj-gold),var(--aswj-teal));
  transform:scaleX(0);transform-origin:left;transition:transform .35s ease}
.aswj-value:hover::before,.aswj-service:hover::before,.aswj-give-card:hover::before{transform:scaleX(1)}
.aswj-value:hover,.aswj-service:hover,.aswj-give-card:hover{transform:translateY(-8px)}

/* Service icons: gold-tinted disc for more colour presence */
.aswj-service i{background:linear-gradient(140deg,#fff6d8,#fbe7a6);color:var(--aswj-navy)}