/* =========================================================
   AL ARQAM ISLAMIC CENTRE — DESIGN SYSTEM STYLESHEET
   Shared by every page. Edit tokens in :root to re-theme.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Source+Serif+4:opsz,wght@8..60,400;8..60,500;8..60,600;8..60,700&display=swap');

:root{
  /* --- Brand colours (sampled from logo) --- */
  --green-900:#09403a;   /* primary deep green */
  --green-800:#0e4d45;   /* hover / depth */
  --green-700:#145a50;   /* links on light bg */
  --green-100:#e8f0ee;   /* pale green tint */
  --green-50:#f4f8f7;    /* faint green section bg */

  --cream:#faf7f1;       /* soft neutral background */
  --white:#ffffff;
  --charcoal:#262626;    /* primary text */
  --grey-600:#5b5f5e;    /* secondary text */
  --grey-300:#d8d8d3;    /* borders */
  --grey-100:#f1f1ee;    /* card backgrounds on white */

  --gold:#b08d4f;        /* muted accent — use sparingly (backgrounds/borders/icons only) */
  --gold-tint:#f6efe2;
  --gold-text:#7b6337;   /* darker gold for small text on light backgrounds — meets WCAG AA (4.5:1) */

  --success:#2e7d4f;
  --error:#b3261e;

  /* spacing scale */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px; --space-9:96px;

  /* radii */
  --radius-s:8px; --radius-m:14px; --radius-l:20px; --radius-arch:20px 20px 0 0;

  /* shadow — used sparingly, never heavy */
  --shadow-card:0 1px 3px rgba(9,64,58,0.08), 0 1px 2px rgba(9,64,58,0.06);
  --shadow-hover:0 6px 16px rgba(9,64,58,0.12);

  --font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-serif:'Source Serif 4','Georgia',serif;

  --container:1160px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-sans);
  color:var(--charcoal);
  background:var(--white);
  line-height:1.6;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:var(--green-700);}
h1,h2,h3,h4{line-height:1.25;margin:0 0 var(--space-3);color:var(--green-900);}
h1{font-size:clamp(28px,5vw,42px);}
h2{font-size:clamp(22px,3.6vw,30px);}
h3{font-size:20px;}
p{margin:0 0 var(--space-4);color:var(--grey-600);}
.serif{font-family:var(--font-serif);font-weight:500;font-optical-sizing:auto;font-style:normal;}
.container{max-width:var(--container);margin:0 auto;padding:0 var(--space-5);}
section{padding:var(--space-8) 0;}
@media (max-width:640px){
  section{padding:var(--space-6) 0;}
  .container{padding:0 var(--space-4);}
}
.eyebrow{
  text-transform:uppercase;letter-spacing:.08em;font-size:12px;font-weight:700;
  color:var(--gold-text);margin-bottom:var(--space-2);display:block;
}
.section-head{max-width:640px;margin-bottom:var(--space-6);}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center;}
.bg-cream{background:var(--cream);}
.bg-green-50{background:var(--green-50);}
.bg-green-900{background:var(--green-900);color:var(--white);}
.bg-green-900 h2, .bg-green-900 h3, .bg-green-900 p{color:var(--white);}
.bg-green-900 p{opacity:.85;}

/* focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible{
  outline:3px solid var(--gold); outline-offset:2px;
}

/* skip link */
.skip-link{position:absolute;left:-999px;top:0;background:var(--green-900);color:#fff;padding:10px 16px;z-index:200;border-radius:0 0 8px 0;}
.skip-link:focus{left:0;}

/* honeypot spam-trap field — hidden from all users (sighted and assistive tech alike);
   left blank by real visitors, often auto-filled by spam bots so the submission can be silently ignored */
.hp-field{position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;overflow:hidden;}

/* visually hidden but available to screen readers — used to keep heading levels
   in a valid order without adding a visible heading where the design doesn't call for one */
.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;}

/* =============== BUTTONS =============== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font-sans);font-weight:600;font-size:15px;
  padding:13px 22px;border-radius:var(--radius-s);border:2px solid transparent;
  cursor:pointer;text-decoration:none;transition:background .15s ease, color .15s ease, border-color .15s ease;
  min-height:48px;
}
.btn-primary{background:var(--green-900);color:var(--white);}
.btn-primary:hover{background:var(--green-800);}
.btn-secondary{background:var(--white);color:var(--green-900);border-color:var(--green-900);}
.btn-secondary:hover{background:var(--green-50);}
.btn-gold{background:var(--gold);color:var(--charcoal);}
.btn-gold:hover{background:#b89861;}
.btn-ghost{background:transparent;color:var(--green-900);border-color:var(--grey-300);}
.btn-ghost:hover{border-color:var(--green-900);}
.btn-on-green{background:var(--white);color:var(--green-900);}
.btn-on-green:hover{background:var(--gold-tint);}
.btn-block{width:100%;}
.btn-sm{padding:9px 16px;font-size:14px;min-height:40px;}

/* =============== HEADER =============== */
.announcement-bar{
  background:var(--gold-tint);color:var(--green-900);font-size:14px;font-weight:600;
  text-align:center;padding:8px var(--space-4);
}
.announcement-bar a{color:var(--green-900);text-decoration:underline;}
header.site-header{
  position:sticky;top:0;z-index:100;background:var(--white);
  border-bottom:1px solid var(--grey-300);
}
.header-inner{
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);
  padding:10px var(--space-5);max-width:1320px;margin:0 auto;
}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0;}
.brand img{height:48px;width:48px;border-radius:10px;object-fit:cover;flex-shrink:0;}
.brand-text{font-family:var(--font-serif);font-weight:600;color:var(--green-900);font-size:18px;line-height:1.1;white-space:nowrap;}
.brand-text span{display:block;font-family:var(--font-sans);font-weight:600;font-size:11px;letter-spacing:.05em;color:var(--grey-600);text-transform:uppercase;white-space:nowrap;}

nav.main-nav{display:none;min-width:0;flex:1 1 auto;}
nav.main-nav ul{display:flex;gap:var(--space-4);list-style:none;margin:0;padding:0;justify-content:center;}
nav.main-nav a{color:var(--charcoal);text-decoration:none;font-weight:600;font-size:14px;padding:8px 2px;border-bottom:2px solid transparent;white-space:nowrap;}
nav.main-nav a:hover, nav.main-nav a.active{color:var(--green-900);border-bottom-color:var(--gold);}
.header-actions{display:flex;align-items:center;gap:10px;flex-shrink:0;}
.menu-toggle{display:inline-flex;background:none;border:2px solid var(--grey-300);border-radius:var(--radius-s);padding:9px;min-height:44px;min-width:44px;align-items:center;justify-content:center;}

@media (min-width:900px){
  nav.main-nav{display:block;}
  .menu-toggle{display:none;}
}

/* mobile drawer */
.mobile-nav{
  position:fixed;inset:0 0 0 auto;width:min(88vw,360px);background:var(--white);
  transform:translateX(100%);transition:transform .25s ease;z-index:200;
  box-shadow:-8px 0 24px rgba(0,0,0,.15);overflow-y:auto;
}
.mobile-nav.open{transform:translateX(0);}
.mobile-nav-header{display:flex;justify-content:space-between;align-items:center;padding:var(--space-4) var(--space-5);border-bottom:1px solid var(--grey-300);}
.mobile-nav ul{list-style:none;margin:0;padding:var(--space-3) 0;}
.mobile-nav a{display:block;padding:14px var(--space-5);color:var(--charcoal);text-decoration:none;font-weight:600;font-size:16px;border-bottom:1px solid var(--grey-100);}
.mobile-nav .actions{padding:var(--space-4) var(--space-5);display:flex;flex-direction:column;gap:10px;}
.scrim{position:fixed;inset:0;background:rgba(9,64,58,.35);opacity:0;pointer-events:none;transition:opacity .25s ease;z-index:199;}
.scrim.open{opacity:1;pointer-events:auto;}
@media (min-width:900px){.mobile-nav,.scrim{display:none;}}

/* sticky mobile action bar */
.mobile-action-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:150;background:var(--white);
  border-top:1px solid var(--grey-300);display:flex;box-shadow:0 -4px 14px rgba(0,0,0,.08);
}
.mobile-action-bar a{
  flex:1;text-align:center;padding:10px 4px 8px;text-decoration:none;color:var(--green-900);
  font-size:11px;font-weight:700;display:flex;flex-direction:column;align-items:center;gap:4px;
}
.mobile-action-bar a.primary{background:var(--green-900);color:#fff;}
@media (min-width:900px){.mobile-action-bar{display:none;}}
body{padding-bottom:64px;}
@media (min-width:900px){body{padding-bottom:0;}}

/* =============== HERO =============== */
.hero{position:relative;background:var(--green-900);color:var(--white);}
.hero-grid{display:grid;gap:var(--space-6);align-items:center;padding:var(--space-7) 0;}
.hero-media{
  border-radius:var(--radius-m);overflow:hidden;aspect-ratio:4/3;
  background:linear-gradient(135deg,var(--green-800),var(--green-900));
  display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.6);
  font-size:14px;text-align:center;border:1px solid rgba(255,255,255,.15);
}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;border-radius:inherit;}
.hero h1{color:var(--white);font-family:var(--font-serif);font-weight:500;font-optical-sizing:auto;font-style:normal;}
.hero p.lead{color:rgba(255,255,255,.85);font-size:18px;max-width:46ch;}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:var(--space-5);}
@media (min-width:900px){
  .hero-grid{grid-template-columns:1.1fr 1fr;}
}

/* =============== IMAGE PLACEHOLDER =============== */
.img-placeholder{
  background:repeating-linear-gradient(135deg,var(--grey-100),var(--grey-100) 10px,var(--grey-300) 10px,var(--grey-300) 11px);
  border:1px dashed var(--grey-300);border-radius:var(--radius-m);
  display:flex;align-items:center;justify-content:center;color:var(--grey-600);
  font-size:13px;text-align:center;padding:var(--space-4);min-height:160px;
}

/* =============== PRAYER TIMES =============== */
.prayer-panel{background:var(--green-900);border-radius:var(--radius-l);color:var(--white);padding:var(--space-6);}
.prayer-panel-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:var(--space-5);}
.prayer-panel-head h2{color:var(--white);margin:0;}
.next-prayer-pill{background:rgba(255,255,255,.12);border-radius:999px;padding:8px 18px;font-weight:700;font-size:14px;}
.next-prayer-pill b{color:var(--gold-tint);}
.prayer-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
@media (min-width:700px){.prayer-grid{grid-template-columns:repeat(6,1fr);}}
.prayer-card{background:rgba(255,255,255,.08);border-radius:var(--radius-s);padding:14px 8px;text-align:center;border:1px solid rgba(255,255,255,.12);}
.prayer-card.active{background:var(--gold);border-color:var(--gold);color:var(--charcoal);}
.prayer-card.active .iqamah{opacity:1;}
.prayer-card .name{font-size:13px;font-weight:700;letter-spacing:.02em;}
.prayer-card .adhan{font-size:19px;font-weight:700;margin:6px 0 2px;}
.prayer-card .iqamah{font-size:12px;opacity:.8;}
.prayer-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin-top:var(--space-5);padding-top:var(--space-4);border-top:1px solid rgba(255,255,255,.15);font-size:14px;}

/* =============== TABS (Community Hub) =============== */
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:var(--space-5);border-bottom:1px solid var(--grey-300);}
.tab-btn{background:none;border:none;padding:10px 4px;margin-right:var(--space-5);font-weight:600;color:var(--grey-600);cursor:pointer;border-bottom:3px solid transparent;font-size:15px;min-height:44px;}
.tab-btn[aria-selected="true"]{color:var(--green-900);border-bottom-color:var(--gold);}
.tab-panel{display:none;}
.tab-panel.active{display:block;}

/* =============== CARDS =============== */
.card-grid{display:grid;gap:var(--space-5);grid-template-columns:1fr;}
@media (min-width:640px){.card-grid.cols-2{grid-template-columns:repeat(2,1fr);}}
@media (min-width:900px){
  .card-grid.cols-3{grid-template-columns:repeat(3,1fr);}
  .card-grid.cols-4{grid-template-columns:repeat(4,1fr);}
  .card-grid.cols-2{grid-template-columns:repeat(2,1fr);}
}

.card{
  background:var(--white);border:1px solid var(--grey-300);border-radius:var(--radius-m);
  overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .15s ease, transform .15s ease;
}
.card:hover{box-shadow:var(--shadow-hover);}
.card-media{aspect-ratio:16/10;}
.card-body{padding:var(--space-5);display:flex;flex-direction:column;gap:8px;flex:1;}
.card-tag{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--green-700);background:var(--green-100);display:inline-block;padding:4px 10px;border-radius:999px;width:fit-content;}
.card-title{font-size:18px;font-weight:700;color:var(--green-900);margin:0;}
.card-meta{font-size:13px;color:var(--grey-600);display:flex;flex-wrap:wrap;gap:4px 14px;}
.card-actions{display:flex;gap:10px;margin-top:auto;padding-top:8px;flex-wrap:wrap;}
.card-status{font-size:12px;font-weight:700;padding:3px 10px;border-radius:999px;}
.card-status.open{background:#e6f4ea;color:var(--success);}
.card-status.closing{background:var(--gold-tint);color:var(--gold-text);}
.card-status.closed{background:#f1e7e6;color:var(--error);}

/* announcement / news list */
.news-item{display:flex;gap:var(--space-4);padding:var(--space-4) 0;border-bottom:1px solid var(--grey-300);}
.news-date{flex-shrink:0;width:64px;text-align:center;}
.news-date .d{font-size:22px;font-weight:800;color:var(--green-900);line-height:1;}
.news-date .m{font-size:12px;text-transform:uppercase;color:var(--grey-600);font-weight:700;}
.news-tag{font-size:11px;font-weight:700;color:var(--gold-text);text-transform:uppercase;letter-spacing:.05em;}

/* donation panel */
.donate-panel{background:var(--white);border:1px solid var(--grey-300);border-radius:var(--radius-l);padding:var(--space-6);}
.donate-options{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:var(--space-4) 0;}
@media (min-width:640px){.donate-options{grid-template-columns:repeat(4,1fr);}}
.donate-option{border:2px solid var(--grey-300);border-radius:var(--radius-s);padding:12px;text-align:center;background:none;font-weight:700;cursor:pointer;min-height:48px;}
.donate-option.selected, .donate-option:hover{border-color:var(--green-900);color:var(--green-900);background:var(--green-50);}

/* progress bar */
.progress{background:var(--grey-100);border-radius:999px;height:14px;overflow:hidden;}
.progress-bar{background:var(--gold);height:100%;border-radius:999px 0 0 999px;}
.progress-labels{display:flex;justify-content:space-between;font-size:14px;font-weight:700;color:var(--green-900);margin-top:8px;}

/* FAQ accordion */
.faq-item{border-bottom:1px solid var(--grey-300);}
.faq-item summary{padding:16px 4px;font-weight:700;cursor:pointer;color:var(--green-900);list-style:none;display:flex;justify-content:space-between;align-items:center;min-height:44px;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:"+";font-size:22px;font-weight:400;color:var(--gold);}
.faq-item[open] summary::after{content:"–";}
.faq-item p{padding-bottom:16px;}

/* quote / testimonial */
.quote-card{background:var(--green-50);border-left:4px solid var(--gold);border-radius:var(--radius-s);padding:var(--space-5);}
.quote-card p{color:var(--charcoal);font-style:italic;font-size:17px;}
.quote-card .who{font-weight:700;color:var(--green-900);font-style:normal;font-size:14px;margin:0;}

/* gallery */
.gallery-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;}
@media (min-width:640px){.gallery-grid{grid-template-columns:repeat(4,1fr);}}
.gallery-grid .img-placeholder{aspect-ratio:1/1;min-height:0;border-radius:var(--radius-s);}

/* download card */
.download-card{display:flex;align-items:center;gap:14px;border:1px solid var(--grey-300);border-radius:var(--radius-s);padding:var(--space-4);background:var(--white);}
.download-card .icon{width:40px;height:40px;border-radius:var(--radius-s);background:var(--green-100);color:var(--green-900);display:flex;align-items:center;justify-content:center;font-weight:800;flex-shrink:0;}
.download-card .grow{flex:1;}
.download-card .grow strong{display:block;color:var(--green-900);}
.download-card .grow span{font-size:13px;color:var(--grey-600);}

/* contact block */
.contact-block{display:flex;gap:12px;align-items:flex-start;margin-bottom:var(--space-4);}
.contact-block .icon{width:36px;height:36px;border-radius:50%;background:var(--green-100);color:var(--green-900);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-weight:800;font-size:14px;}
.contact-block strong{display:block;color:var(--green-900);}

/* =============== FORMS =============== */
.form-section{background:var(--white);border:1px solid var(--grey-300);border-radius:var(--radius-l);padding:var(--space-6);}
fieldset{border:none;padding:0;margin:0 0 var(--space-5);}
legend{font-weight:700;color:var(--green-900);font-size:16px;padding:0 0 8px;border-bottom:2px solid var(--green-100);width:100%;margin-bottom:var(--space-4);}
.form-row{display:grid;gap:var(--space-4);margin-bottom:var(--space-4);grid-template-columns:1fr;}
@media (min-width:640px){.form-row.cols-2{grid-template-columns:1fr 1fr;}}
label{display:block;font-weight:600;font-size:14px;margin-bottom:6px;color:var(--charcoal);}
.hint{font-size:13px;color:var(--grey-600);margin-top:4px;}
input[type=text],input[type=email],input[type=tel],input[type=date],input[type=number],select,textarea{
  width:100%;padding:13px 14px;border:1px solid var(--grey-300);border-radius:var(--radius-s);
  font-family:var(--font-sans);font-size:16px;background:var(--white);color:var(--charcoal);min-height:48px;
}
textarea{min-height:110px;}
.radio-row, .check-row{display:flex;align-items:flex-start;gap:10px;margin-bottom:10px;font-size:14px;}
.radio-row input, .check-row input{margin-top:3px;width:20px;height:20px;flex-shrink:0;}
.required::after{content:" *";color:var(--error);}
.form-confirm{background:#e6f4ea;border:1px solid #bfe3cb;border-radius:var(--radius-s);padding:var(--space-4);color:var(--success);font-weight:600;}

/* =============== FOOTER =============== */
footer.site-footer{background:var(--green-900);color:rgba(255,255,255,.85);padding-top:var(--space-8);}
.footer-grid{display:grid;gap:var(--space-6);grid-template-columns:1fr;}
@media (min-width:768px){.footer-grid{grid-template-columns:1.4fr 1fr 1fr 1fr;}}
.footer-grid h4{color:var(--white);font-size:14px;text-transform:uppercase;letter-spacing:.06em;margin-bottom:var(--space-4);}
.footer-grid ul{list-style:none;padding:0;margin:0;}
.footer-grid li{margin-bottom:10px;}
.footer-grid a{color:rgba(255,255,255,.8);text-decoration:none;font-size:15px;}
.footer-grid a:hover{color:var(--white);text-decoration:underline;}
.footer-brand{display:flex;align-items:center;gap:10px;margin-bottom:var(--space-4);}
.footer-brand img{height:44px;width:44px;border-radius:9px;}
.footer-bottom{border-top:1px solid rgba(255,255,255,.15);margin-top:var(--space-7);padding:var(--space-5) 0;display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;font-size:13px;color:rgba(255,255,255,.6);}
.footer-bottom a{color:rgba(255,255,255,.6);}
.social-row{display:flex;gap:10px;margin-top:var(--space-3);}
.social-row a{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;color:#fff;text-decoration:none;font-size:14px;transition:background .15s ease;}
.social-row a:hover,.social-row a:focus-visible{background:rgba(255,255,255,.22);}
.social-row.on-light a{background:var(--green-50);color:var(--green-900);}
.social-row.on-light a:hover,.social-row.on-light a:focus-visible{background:var(--green-100);}

/* Header social icons — desktop only; mobile users get the same links in the mobile-nav drawer */
.header-social{display:none;margin:0;}
@media (min-width:1200px){.header-social{display:flex;}}

/* Larger labelled variant for "Follow Us" sections (Contact / Community Hub) */
.social-follow{display:flex;flex-wrap:wrap;gap:12px;margin-top:var(--space-3);}
.social-follow a{display:inline-flex;align-items:center;gap:10px;background:var(--green-50);color:var(--green-900);border:1px solid var(--green-100);border-radius:var(--radius-s);padding:10px 16px;text-decoration:none;font-weight:600;font-size:14px;min-height:44px;transition:background .15s ease;}
.social-follow a:hover,.social-follow a:focus-visible{background:var(--green-100);}
.social-follow svg{flex-shrink:0;}

/* page header (internal pages) */
.page-header{background:var(--green-50);padding:var(--space-7) 0 var(--space-6);border-bottom:1px solid var(--grey-300);}
.breadcrumb{font-size:13px;color:var(--grey-600);margin-bottom:var(--space-3);}
.breadcrumb a{color:var(--grey-600);}

/* util */
.flex{display:flex;} .items-center{align-items:center;} .justify-between{justify-content:space-between;}
.gap-2{gap:8px;} .gap-3{gap:12px;} .gap-4{gap:16px;} .wrap{flex-wrap:wrap;}
.mt-0{margin-top:0;} .mb-0{margin-bottom:0;}
.text-center{text-align:center;}
.small{font-size:13px;color:var(--grey-600);}
.pill{display:inline-block;padding:4px 12px;border-radius:999px;font-size:12px;font-weight:700;}
.pill-green{background:var(--green-100);color:var(--green-700);}
.pill-gold{background:var(--gold-tint);color:var(--gold-text);}
.divider{height:1px;background:var(--grey-300);border:none;margin:var(--space-6) 0;}
.two-col{display:grid;gap:var(--space-6);grid-template-columns:1fr;}
@media (min-width:900px){.two-col{grid-template-columns:1fr 1fr;} .two-col.reverse{direction:rtl;} .two-col.reverse > *{direction:ltr;}}