/* =====================================================================
 * ICGM — Islamic Center of Greater Miami
 * main.css — the entire compiled stylesheet
 * Mobile-first. Only palette tokens for color. WCAG AA.
 * ===================================================================== */

/* ---------------------------------------------------------------------
 * 1. DESIGN TOKENS  (verbatim from BUILD-CONTRACT §1)
 * ------------------------------------------------------------------- */
:root{
  /* Brand — primary green (from logo dome) */
  --color-primary:        #004D2E;
  --color-primary-light:  #0A6B43;
  --color-primary-lighter:#E6F0EA;
  --color-primary-dark:   #00351F;
  --color-primary-darker: #00271700; /* unused alpha guard — do NOT use; kept for reference */

  /* Brand — secondary gold (from logo ring) */
  --color-secondary:        #DBA22F;
  --color-secondary-light:  #E8BC5E;
  --color-secondary-lighter:#FBF3E2;
  --color-secondary-dark:   #B5821C;
  --color-gold-text:        #8A6310; /* AA-safe gold for TEXT (>=4.5:1 on white); decorative gold stays --color-secondary */

  /* Neutrals — warm-tinted to complement green/gold */
  --color-white:    #FFFFFF;
  --color-off-white:#FCFBF7;  /* main page background */
  --color-cream:    #F7F3EA;  /* alternating warm sections */
  --color-gray-100: #F2F1ED;
  --color-gray-200: #E6E4DD;
  --color-gray-300: #D4D1C7;
  --color-gray-500: #8C887C;
  --color-gray-700: #514E45;
  --color-gray-900: #211F1A;

  /* Semantic */
  --color-text:           #2A2A24;
  --color-text-secondary: #514E45;
  --color-text-muted:     #6B675C;
  --color-heading:        #00351F;
  --color-link:           var(--color-primary);
  --color-link-hover:     var(--color-primary-dark);
  --color-cta:            var(--color-primary);
  --color-cta-hover:      var(--color-primary-dark);
  --color-cta-text:       #FFFFFF;
  --color-accent:         var(--color-secondary);
  --color-border:         #E8E5DC;
  --color-success:        #1E7A4D;
  --color-error:          #B23A2E;

  /* Layout / motion tokens */
  --container:   1200px;
  --container-narrow: 880px;
  --radius-sm: 8px;
  --radius:    12px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.05), 0 1px 2px rgba(0,0,0,.03);
  --shadow:    0 4px 16px rgba(0,0,0,.06), 0 2px 6px rgba(0,0,0,.04);
  --shadow-lg: 0 18px 40px rgba(0,0,0,.10), 0 8px 16px rgba(0,0,0,.05);
  --ease:      cubic-bezier(.25,.1,.25,1);
  --t-fast: .2s var(--ease);
  --t:      .3s var(--ease);
  --t-slow: .6s var(--ease);
  --space-section: clamp(3.5rem, 7vw, 6.5rem); /* vertical section padding */
}

/* ---------------------------------------------------------------------
 * 2. @font-face  (self-hosted woff2 in ../fonts/, font-display: swap)
 * ------------------------------------------------------------------- */
@font-face{
  font-family:"DM Sans";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("../fonts/dm-sans-latin-400-normal.woff2") format("woff2");
}
@font-face{
  font-family:"DM Sans";
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url("../fonts/dm-sans-latin-500-normal.woff2") format("woff2");
}
@font-face{
  font-family:"DM Sans";
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url("../fonts/dm-sans-latin-600-normal.woff2") format("woff2");
}
@font-face{
  font-family:"DM Sans";
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url("../fonts/dm-sans-latin-700-normal.woff2") format("woff2");
}
@font-face{
  font-family:"Cormorant Garamond";
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url("../fonts/cormorant-garamond-latin-600-normal.woff2") format("woff2");
}
@font-face{
  font-family:"Cormorant Garamond";
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url("../fonts/cormorant-garamond-latin-700-normal.woff2") format("woff2");
}
@font-face{
  font-family:"Amiri";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("../fonts/amiri-arabic-400-normal.woff2") format("woff2");
}
@font-face{
  font-family:"Amiri";
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url("../fonts/amiri-arabic-700-normal.woff2") format("woff2");
}

/* ---------------------------------------------------------------------
 * 3. BASE / RESET
 * ------------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  scroll-behavior:smooth;
}

body{
  margin:0;
  font-family:"DM Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-weight:400;
  color:var(--color-text);
  line-height:1.7;
  background:var(--color-off-white);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden; /* belt-and-braces: never horizontal scroll */
}

img,picture,video,canvas,svg{ display:block; max-width:100%; height:auto; }
img{ border-style:none; }

ul,ol{ margin:0; padding:0; }
li{ list-style:none; }

a{
  color:var(--color-link);
  text-decoration:none;
  transition:color var(--t-fast);
}
a:hover{ color:var(--color-link-hover); }

button{ font:inherit; cursor:pointer; }

input,textarea,select,button{ font-family:inherit; }

hr{
  border:0;
  border-top:1px solid var(--color-border);
  margin:2rem 0;
}

::selection{ background:var(--color-secondary-light); color:var(--color-gray-900); }

:focus-visible{
  outline:3px solid var(--color-secondary);
  outline-offset:2px;
  border-radius:2px;
}

/* Body scroll lock while mobile drawer is open */
body.is-drawer-open{ overflow:hidden; }

/* ---------------------------------------------------------------------
 * 4. TYPOGRAPHY
 * ------------------------------------------------------------------- */
h1,h2,h3,.font-display{
  font-family:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  font-weight:700;
  color:var(--color-heading);
  line-height:1.15;
  letter-spacing:.2px;
  margin:0 0 .5em;
}
h4,h5,h6{
  font-family:"DM Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-weight:600;
  color:var(--color-heading);
  line-height:1.3;
  margin:0 0 .5em;
}

h1{ font-size:clamp(2.25rem, 5.2vw, 3.75rem); }
h2{ font-size:clamp(1.9rem, 4vw, 3rem); }
h3{ font-size:clamp(1.45rem, 2.6vw, 2.1rem); }
h4{ font-size:clamp(1.15rem, 1.8vw, 1.4rem); }
h5{ font-size:1.05rem; }
h6{ font-size:.95rem; }

p{ margin:0 0 1.15rem; }
p:last-child{ margin-bottom:0; }

body,p,li,a,button,input,textarea,select{
  font-family:"DM Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}

.text-arabic,.arabic{
  font-family:"Amiri","Noto Naskh Arabic",serif;
  direction:rtl;
  line-height:1.9;
}

.lead{
  font-size:clamp(1.1rem, 1.5vw, 1.3rem);
  color:var(--color-text-secondary);
  line-height:1.75;
}

strong,b{ font-weight:600; }

/* ---------------------------------------------------------------------
 * 5. LAYOUT — container, section, grid
 * ------------------------------------------------------------------- */
.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:clamp(1.1rem, 4vw, 2rem);
}
.container--narrow{ max-width:var(--container-narrow); }

.section{
  padding-block:var(--space-section);
  position:relative;
}
.section--cream{ background:var(--color-cream); }
.section--dark{
  background:var(--color-primary-dark);
  color:var(--color-white);
}
.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4{ color:var(--color-white); }
.section--dark p,
.section--dark li{ color:rgba(255,255,255,.86); }
.section--dark a{ color:var(--color-secondary-light); }
.section--dark a:hover{ color:var(--color-white); }

.section--tight{ padding-block:clamp(2.25rem, 4vw, 3.5rem); }

/* Patterned section — Islamic tile at ~4% opacity, decorative only */
.section--patterned{ position:relative; }
.section--patterned::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:url("../images/patterns/islamic-pattern.svg");
  background-repeat:repeat;
  background-size:240px 240px;
  opacity:.04;
  pointer-events:none;
  z-index:0;
}
.section--patterned > .container{ position:relative; z-index:1; }
.section--dark.section--patterned::before{ opacity:.06; }

/* Grid */
.grid{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(1.25rem, 3vw, 2rem);
}
/* below 768px every grid is a single column (no horizontal scroll) */
@media (min-width:769px){
  .grid--2{ grid-template-columns:repeat(2,1fr); }
  .grid--3{ grid-template-columns:repeat(3,1fr); }
  .grid--4{ grid-template-columns:repeat(2,1fr); }
}
@media (min-width:1024px){
  .grid--4{ grid-template-columns:repeat(4,1fr); }
}

/* ---------------------------------------------------------------------
 * 6. BUTTONS
 * ------------------------------------------------------------------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5em;
  min-height:48px;
  padding:.7rem 1.6rem;
  border:2px solid transparent;
  border-radius:var(--radius-pill);
  font-family:"DM Sans",system-ui,sans-serif;
  font-size:1rem;
  font-weight:600;
  line-height:1.2;
  text-align:center;
  cursor:pointer;
  transition:var(--t);
  -webkit-appearance:none;
  appearance:none;
}
.btn:focus-visible{ outline:3px solid var(--color-secondary); outline-offset:3px; }
.btn svg{ width:1.1em; height:1.1em; flex:none; }

.btn--primary{
  background:var(--color-cta);
  color:var(--color-cta-text);
  border-color:var(--color-cta);
}
.btn--primary:hover{
  background:var(--color-cta-hover);
  border-color:var(--color-cta-hover);
  color:var(--color-cta-text);
  transform:translateY(-2px);
  box-shadow:var(--shadow);
}

.btn--secondary{
  background:var(--color-secondary);
  color:var(--color-gray-900);
  border-color:var(--color-secondary);
}
.btn--secondary:hover{
  background:var(--color-secondary-dark);
  border-color:var(--color-secondary-dark);
  color:var(--color-white);
  transform:translateY(-2px);
  box-shadow:var(--shadow);
}

.btn--outline{
  background:transparent;
  color:var(--color-primary);
  border-color:var(--color-primary);
}
.btn--outline:hover{
  background:var(--color-primary);
  color:var(--color-white);
  transform:translateY(-2px);
}

.btn--ghost-light{
  background:transparent;
  color:var(--color-white);
  border-color:rgba(255,255,255,.7);
}
.btn--ghost-light:hover{
  background:var(--color-white);
  color:var(--color-primary-dark);
  border-color:var(--color-white);
  transform:translateY(-2px);
}

.btn--donate{
  background:var(--color-secondary);
  color:var(--color-gray-900);
  border-color:var(--color-secondary);
  font-weight:700;
}
.btn--donate:hover{
  background:var(--color-secondary-dark);
  border-color:var(--color-secondary-dark);
  color:var(--color-white);
  transform:translateY(-2px);
  box-shadow:var(--shadow);
}

.btn--lg{
  min-height:54px;
  padding:.95rem 2.2rem;
  font-size:1.075rem;
}
.btn--block{
  display:flex;
  width:100%;
}
.btn[disabled],
.btn:disabled,
.btn.is-loading{
  opacity:.65;
  cursor:not-allowed;
  transform:none;
  box-shadow:none;
}

/* ---------------------------------------------------------------------
 * 7. SECTION HEADING
 * ------------------------------------------------------------------- */
.section-heading{
  margin-bottom:clamp(2rem, 4vw, 3rem);
  max-width:60ch;
}
.section-heading__eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  font-family:"DM Sans",sans-serif;
  font-size:.8rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--color-gold-text);
  margin:0 0 .85rem;
}
.section-heading__eyebrow::before{
  content:"";
  width:32px;
  height:2px;
  background:var(--color-secondary);
  display:inline-block;
}
.section-heading__title{
  margin:0 0 .5rem;
  font-size:clamp(1.9rem, 4vw, 3rem);
}
.section-heading__subtitle{
  margin:0;
  color:var(--color-text-secondary);
  font-size:clamp(1.02rem, 1.4vw, 1.18rem);
  line-height:1.65;
}

/* center modifier */
.section-heading--center{
  margin-inline:auto;
  text-align:center;
}
.section-heading--center .section-heading__eyebrow{ justify-content:center; }

/* light modifier (on dark bg) */
.section-heading--light .section-heading__title{ color:var(--color-white); }
.section-heading--light .section-heading__subtitle{ color:rgba(255,255,255,.82); }
.section-heading--light .section-heading__eyebrow{ color:var(--color-secondary-light); }

/* ---------------------------------------------------------------------
 * 8. CARDS
 * ------------------------------------------------------------------- */
.card{
  display:flex;
  flex-direction:column;
  background:var(--color-white);
  border:1px solid var(--color-border);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  overflow:hidden;
  transition:transform var(--t), box-shadow var(--t);
  height:100%;
}
.card:hover,
.card:focus-within{
  box-shadow:var(--shadow-lg);
  transform:translateY(-6px);
}
.card__media{
  width:100%;
  aspect-ratio:16/10;
  object-fit:cover;
  background:var(--color-gray-100);
}
.card__body{
  display:flex;
  flex-direction:column;
  gap:.6rem;
  padding:clamp(1.25rem, 2.5vw, 1.75rem);
  flex:1 1 auto;
}
.card__icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:56px;
  height:56px;
  border-radius:var(--radius-pill);
  background:var(--color-secondary-lighter);
  color:var(--color-gold-text);
  margin-bottom:.4rem;
}
.card__icon svg{ width:26px; height:26px; }
.card__title{
  margin:0;
  font-size:1.3rem;
}
.card__text{
  margin:0;
  color:var(--color-text-secondary);
  font-size:1rem;
}
.card__link{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  margin-top:auto;
  padding-top:.5rem;
  font-weight:600;
  color:var(--color-gold-text);
}
.card__link svg{ width:1em; height:1em; transition:transform var(--t-fast); }
.card__link:hover{ color:var(--color-primary); }
.card__link:hover svg{ transform:translateX(4px); }

/* ---------------------------------------------------------------------
 * 9. PAGE HERO (inner banner) + BREADCRUMBS
 * ------------------------------------------------------------------- */
.page-hero{
  position:relative;
  background:var(--color-primary-dark);
  color:var(--color-white);
  padding-block:clamp(3rem, 8vw, 5.5rem);
  overflow:hidden;
}
.page-hero__bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:0;
}
.page-hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(115deg, rgba(0,53,31,.92) 0%, rgba(0,53,31,.72) 100%);
  z-index:1;
}
.page-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:url("../images/patterns/islamic-pattern.svg");
  background-size:240px 240px;
  background-repeat:repeat;
  opacity:.06;
  z-index:2;
  pointer-events:none;
}
.page-hero__inner{
  position:relative;
  z-index:3;
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:clamp(1.1rem, 4vw, 2rem);
}
.page-hero__title{
  color:var(--color-white);
  margin:0 0 .4rem;
  font-size:clamp(2.1rem, 5vw, 3.4rem);
}
.page-hero__subtitle{
  margin:.25rem 0 0;
  color:rgba(255,255,255,.85);
  font-size:clamp(1.02rem, 1.6vw, 1.25rem);
  max-width:60ch;
}

/* Breadcrumbs */
.breadcrumbs{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.45rem;
  margin-bottom:1rem;
  font-size:.9rem;
}
.page-hero .breadcrumbs{ color:rgba(255,255,255,.8); }
.breadcrumbs__item{ color:inherit; }
.page-hero .breadcrumbs__item a{ color:var(--color-secondary-light); }
.page-hero .breadcrumbs__item a:hover{ color:var(--color-white); }
.breadcrumbs__sep{
  color:currentColor;
  opacity:.55;
  user-select:none;
}
.breadcrumbs__current{
  color:inherit;
  font-weight:600;
  opacity:.95;
}
.page-hero .breadcrumbs__current{ color:var(--color-white); }

/* ---------------------------------------------------------------------
 * 10. RAWDAH WIDGET
 * ------------------------------------------------------------------- */
.rawdah-widget-container{
  background:var(--color-white);
  border:1px solid var(--color-border);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  overflow:hidden;
}
.rawdah-widget-container iframe{
  display:block;
  width:100%;
  border:none;
}
.rawdah-widget-placeholder{
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--color-cream);
  border:2px dashed var(--color-gray-300);
  border-radius:var(--radius);
  padding:2rem 1.5rem;
  text-align:center;
}
.rawdah-widget-placeholder__inner{ max-width:36ch; }
.rawdah-widget-placeholder__inner p{ margin:.25rem 0; color:var(--color-text-secondary); }
.rawdah-widget-placeholder__inner p:first-child{ font-size:2.5rem; line-height:1; margin-bottom:.5rem; }
.small{ font-size:.85rem; color:var(--color-text-muted); }

/* ---------------------------------------------------------------------
 * 11. HEADER
 * ------------------------------------------------------------------- */
.site-header{
  position:relative;
  z-index:100;
  background:var(--color-white);
  border-bottom:1px solid var(--color-border);
}

/* App banner */
.app-banner{
  background:var(--color-primary-dark);
  color:var(--color-white);
  transition:opacity var(--t), transform var(--t);
}
.app-banner.is-hidden{
  opacity:0;
  transform:translateY(-100%);
  pointer-events:none;
}
.app-banner > .container{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.75rem 1rem;
  flex-wrap:wrap;
  padding-block:.55rem;
  text-align:center;
}
.app-banner__text{
  margin:0;
  font-size:.9rem;
  color:rgba(255,255,255,.92);
}
.app-banner__btn{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  min-height:36px;
  padding:.3rem 1rem;
  border-radius:var(--radius-pill);
  background:var(--color-secondary);
  color:var(--color-gray-900);
  font-size:.85rem;
  font-weight:600;
  transition:var(--t-fast);
}
.app-banner__btn:hover{
  background:var(--color-secondary-dark);
  color:var(--color-white);
}
.app-banner__close{
  position:absolute;
  right:.75rem;
  top:50%;
  transform:translateY(-50%);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  border:0;
  border-radius:var(--radius-pill);
  background:transparent;
  color:rgba(255,255,255,.85);
  line-height:1;
}
.app-banner > .container{ position:relative; }
.app-banner__close:hover{ background:rgba(255,255,255,.15); color:var(--color-white); }
.app-banner__close svg{ width:16px; height:16px; }

/* Top bar */
.top-bar{
  background:var(--color-primary);
  color:var(--color-white);
  font-size:.875rem;
}
.top-bar > .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
  padding-block:.45rem;
}
.top-bar a{ color:rgba(255,255,255,.9); }
.top-bar a:hover{ color:var(--color-secondary-light); }
.top-bar__email{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
}
.top-bar__email svg{ width:1em; height:1em; }
.top-bar__links{
  display:flex;
  align-items:center;
  gap:1.1rem;
  flex-wrap:wrap;
}
.top-bar__links > *{ display:inline-flex; align-items:center; gap:.4rem; }
.top-bar__social{
  display:inline-flex;
  align-items:center;
  gap:.65rem;
}
.top-bar__social a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:30px;
  height:30px;
  border-radius:var(--radius-pill);
  background:rgba(255,255,255,.12);
}
.top-bar__social a:hover{ background:var(--color-secondary); color:var(--color-gray-900); }
.top-bar__social svg{ width:15px; height:15px; }

/* hide top-bar on small screens to save vertical space */
@media (max-width:768px){
  .top-bar > .container{ justify-content:center; }
  /* Keep the click-to-call phone visible on phones; hide the rest of the cluster. */
  .top-bar__links > a:not(.top-bar__phone),
  .top-bar__links > .top-bar__social{ display:none; }
  /* Reserve room so the absolutely-positioned close button never overlaps wrapped text. */
  .app-banner > .container{ padding-right:2.75rem; }
}

/* Main nav */
.main-nav{
  position:relative;
}
.main-nav > .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding-block:.6rem;
}
.main-nav__logo{
  display:inline-flex;
  align-items:center;
  flex:none;
}
.main-nav__logo img{
  height:clamp(48px, 7vw, 64px);
  width:auto;
  transition:height var(--t);
}
.main-nav__menu{
  display:none; /* desktop nav shown ≥1025px */
  align-items:center;
  gap:.25rem;
}
.main-nav__actions{
  display:flex;
  align-items:center;
  gap:.6rem;
}

.nav-item{
  position:relative;
}
.nav-item > a,
.nav-item__trigger{
  display:inline-flex;
  align-items:center;
  gap:.3rem;
  min-height:44px;
  padding:.5rem .8rem;
  border:0;
  background:transparent;
  color:var(--color-text);
  font-size:.95rem;
  font-weight:500;
  border-radius:var(--radius-sm);
  white-space:nowrap;
}
.nav-item > a:hover,
.nav-item__trigger:hover,
.nav-item.is-open > .nav-item__trigger,
.nav-item.current-menu-item > a{
  color:var(--color-primary);
  background:var(--color-primary-lighter);
}
.nav-item__trigger svg{
  width:.7em;
  height:.7em;
  transition:transform var(--t-fast);
}
.nav-item.is-open .nav-item__trigger svg{ transform:rotate(180deg); }

/* Mega menu */
.mega-menu{
  position:absolute;
  top:calc(100% + 8px);
  left:0;
  min-width:280px;
  background:var(--color-white);
  border:1px solid var(--color-border);
  border-radius:var(--radius);
  box-shadow:var(--shadow-lg);
  padding:1rem;
  opacity:0;
  visibility:hidden;
  transform:translateY(8px);
  transition:opacity var(--t-fast), transform var(--t-fast), visibility var(--t-fast);
  z-index:60;
}
.nav-item--has-mega.is-open .mega-menu{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}
.mega-menu__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:.15rem;
}
.mega-menu--cols-2 .mega-menu__grid{ grid-template-columns:repeat(2,minmax(180px,1fr)); }
.mega-menu__link{
  display:flex;
  align-items:center;
  gap:.6rem;
  padding:.55rem .7rem;
  border-radius:var(--radius-sm);
  color:var(--color-text);
  font-size:.92rem;
  font-weight:500;
}
.mega-menu__link:hover{
  background:var(--color-primary-lighter);
  color:var(--color-primary);
}

/* Hamburger toggle (≤1024px) */
.menu-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:48px;
  height:48px;
  border:1px solid var(--color-border);
  border-radius:var(--radius-sm);
  background:var(--color-white);
  color:var(--color-primary);
}
.menu-toggle svg{ width:24px; height:24px; }
.menu-toggle:hover{ background:var(--color-primary-lighter); }

@media (min-width:1025px){
  .main-nav__menu{ display:flex; }
  .menu-toggle{ display:none; }
}

/* Sticky / stuck header */
.site-header.is-stuck{
  position:fixed;
  top:0;
  left:0;
  right:0;
  background:var(--color-white);
  box-shadow:var(--shadow);
  border-bottom-color:transparent;
}
.site-header.is-stuck .app-banner,
.site-header.is-stuck .top-bar{ display:none; }
.site-header.is-stuck .main-nav > .container{ padding-block:.35rem; }
.site-header.is-stuck .main-nav__logo img{ height:clamp(40px, 6vw, 50px); }
/* spacer added by header.php (.header-spacer) prevents content jump */
.header-spacer{ display:none; }
.site-header.is-stuck + .header-spacer{ display:block; }

/* Mobile drawer */
.mobile-drawer{
  position:fixed;
  inset:0;
  z-index:200;
  visibility:hidden;
  pointer-events:none;
}
.mobile-drawer.is-open{
  visibility:visible;
  pointer-events:auto;
}
.mobile-drawer__overlay{
  position:absolute;
  inset:0;
  background:rgba(0,39,23,.55);
  opacity:0;
  transition:opacity var(--t);
}
.mobile-drawer.is-open .mobile-drawer__overlay{ opacity:1; }
.mobile-drawer__panel{
  position:absolute;
  top:0;
  right:0;
  height:100%;
  width:min(86vw, 360px);
  background:var(--color-white);
  box-shadow:var(--shadow-lg);
  transform:translateX(100%);
  transition:transform var(--t);
  display:flex;
  flex-direction:column;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
.mobile-drawer.is-open .mobile-drawer__panel{ transform:translateX(0); }
.mobile-drawer__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:1rem 1.25rem;
  border-bottom:1px solid var(--color-border);
}
.mobile-drawer__header img{ height:48px; width:auto; }
.mobile-drawer__close{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border:1px solid var(--color-border);
  border-radius:var(--radius-sm);
  background:var(--color-white);
  color:var(--color-primary);
}
.mobile-drawer__close svg{ width:22px; height:22px; }
.mobile-drawer__nav{ padding:.5rem .75rem 1.25rem; }
.mobile-drawer__nav a,
.mobile-drawer__nav .drawer-submenu-toggle{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.5rem;
  width:100%;
  min-height:48px;
  padding:.65rem .9rem;
  border:0;
  background:transparent;
  color:var(--color-text);
  font-size:1rem;
  font-weight:500;
  text-align:left;
  border-radius:var(--radius-sm);
}
.mobile-drawer__nav a:hover,
.mobile-drawer__nav .drawer-submenu-toggle:hover{
  background:var(--color-primary-lighter);
  color:var(--color-primary);
}
.mobile-drawer__nav .drawer-submenu-toggle svg{ width:.85em; height:.85em; transition:transform var(--t-fast); }
.mobile-drawer__nav .drawer-submenu-toggle[aria-expanded="true"] svg{ transform:rotate(180deg); }
.mobile-drawer__submenu{ padding-left:.75rem; margin:.1rem 0 .35rem; }
.mobile-drawer__submenu a{ font-size:.92rem; color:var(--color-text-secondary); min-height:44px; }
.mobile-drawer__cta{ margin:.75rem .25rem 0; }

@media (min-width:1025px){
  .mobile-drawer{ display:none; }
}

/* ---------------------------------------------------------------------
 * 12. FOOTER
 * ------------------------------------------------------------------- */
.site-footer{
  background:var(--color-primary-dark);
  color:rgba(255,255,255,.82);
}
.site-footer a{ color:rgba(255,255,255,.82); }
.site-footer a:hover{ color:var(--color-secondary-light); }

/* Newsletter strip */
.newsletter{
  background:var(--color-primary);
  border-bottom:1px solid rgba(255,255,255,.1);
}
.newsletter > .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
  flex-wrap:wrap;
  padding-block:clamp(1.75rem, 4vw, 2.5rem);
}
.newsletter__intro{ max-width:40ch; }
.newsletter__intro h3{ color:var(--color-white); margin:0 0 .25rem; }
.newsletter__intro p{ margin:0; color:rgba(255,255,255,.8); }
.newsletter__form{
  display:flex;
  gap:.6rem;
  flex-wrap:wrap;
  flex:1 1 320px;
  max-width:460px;
}
.newsletter__input{
  flex:1 1 200px;
  min-height:48px;
  padding:.6rem 1rem;
  border:1px solid rgba(255,255,255,.25);
  border-radius:var(--radius-pill);
  background:rgba(255,255,255,.95);
  color:var(--color-text);
  font-size:1rem;
}
.newsletter__input::placeholder{ color:var(--color-text-muted); }
.newsletter__input:focus-visible{ outline:3px solid var(--color-secondary); outline-offset:2px; }

/* Footer main columns */
.footer-main{ padding-block:clamp(2.5rem, 5vw, 4rem); }
.footer-main > .container{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(1.75rem, 4vw, 2.5rem);
}
@media (min-width:600px){
  .footer-main > .container{ grid-template-columns:repeat(2,1fr); }
}
@media (min-width:1000px){
  .footer-main > .container{ grid-template-columns:1.4fr 1fr 1fr 1.3fr; }
}
.footer-col__title{
  color:var(--color-white);
  font-family:"DM Sans",sans-serif;
  font-size:1rem;
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
  margin:0 0 1rem;
  padding-bottom:.6rem;
  position:relative;
}
.footer-col__title::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:36px;
  height:2px;
  background:var(--color-secondary);
}
.footer-col img.footer-logo{ height:64px; width:auto; margin-bottom:1rem; }
.footer-col p{ font-size:.95rem; }
.footer-col .text-arabic{ color:var(--color-secondary-light); font-size:1.25rem; }
.footer-links{ display:flex; flex-direction:column; gap:.6rem; }
.footer-links a{ display:inline-flex; align-items:center; gap:.5rem; font-size:.95rem; }
.footer-links a svg{ width:.85em; height:.85em; color:var(--color-secondary); flex:none; }
.footer-col .app-stores{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1rem; }
.footer-col .app-stores a{
  display:inline-flex; align-items:center; gap:.45rem;
  min-height:44px; padding:.45rem 1rem;
  border:1px solid rgba(255,255,255,.25); border-radius:var(--radius-sm);
  font-size:.85rem;
}
.footer-col .app-stores a:hover{ border-color:var(--color-secondary); }
.footer-col .footer-contact{ display:flex; flex-direction:column; gap:1rem; }
.footer-col .footer-contact > div{ display:flex; gap:.6rem; }
.footer-col .footer-contact svg{ width:1.05em; height:1.05em; color:var(--color-secondary); flex:none; margin-top:.2rem; }
.footer-col .footer-contact strong{ color:var(--color-white); display:block; font-size:.95rem; }
.footer-col .footer-contact span{ font-size:.9rem; }

/* Verse strip */
.verse-strip{
  border-top:1px solid rgba(255,255,255,.1);
  border-bottom:1px solid rgba(255,255,255,.1);
  text-align:center;
  padding-block:clamp(2rem, 4vw, 2.75rem);
}
.verse-strip__arabic{
  font-family:"Amiri","Noto Naskh Arabic",serif;
  direction:rtl;
  color:var(--color-secondary-light);
  font-size:clamp(1.4rem, 3vw, 2rem);
  line-height:1.9;
  margin:0 auto .75rem;
  max-width:48ch;
}
.verse-strip__translation{
  color:rgba(255,255,255,.8);
  font-style:italic;
  max-width:60ch;
  margin:0 auto;
  font-size:1rem;
}

/* Footer bottom */
.footer-bottom{ padding-block:1.5rem; }
.footer-bottom > .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
}
.footer-bottom__legal{
  font-size:.85rem;
  color:rgba(255,255,255,.65);
  margin:0;
}
.footer-bottom__links{ display:flex; gap:1.25rem; flex-wrap:wrap; }
.footer-bottom__links a{ font-size:.85rem; }
@media (max-width:600px){
  .footer-bottom > .container{ justify-content:center; text-align:center; }
}

/* ---------------------------------------------------------------------
 * 13. HERO (home) — Ken Burns
 * ------------------------------------------------------------------- */
.hero{
  position:relative;
  min-height:84vh;
  display:flex;
  align-items:center;
  overflow:hidden;
  color:var(--color-white);
  background:var(--color-primary-dark);
}
.hero__bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:0;
  transform:scale(1.04);
  animation:ken-burns 22s var(--ease) infinite alternate;
  will-change:transform;
}
@keyframes ken-burns{
  from{ transform:scale(1.04) translate3d(0,0,0); }
  to{ transform:scale(1.16) translate3d(-1.5%, -2%, 0); }
}
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(100deg, rgba(0,39,23,.86) 0%, rgba(0,53,31,.66) 55%, rgba(0,53,31,.4) 100%);
  z-index:1;
}
.hero__content{
  position:relative;
  z-index:2;
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:clamp(1.1rem, 4vw, 2rem);
  padding-block:clamp(3rem, 8vw, 5rem);
  max-width:760px;
}
.hero__content.container{ max-width:760px; margin-left:auto; margin-right:auto; }
.hero__eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  font-size:.85rem;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--color-secondary-light);
  margin-bottom:1rem;
}
.hero__eyebrow::before{
  content:"";
  width:36px; height:2px;
  background:var(--color-secondary);
}
.hero__title{
  color:var(--color-white);
  font-size:clamp(2.6rem, 7vw, 4.75rem);
  line-height:1.05;
  margin:0 0 1rem;
}
.hero__subtitle{
  color:rgba(255,255,255,.9);
  font-size:clamp(1.05rem, 1.8vw, 1.35rem);
  line-height:1.65;
  max-width:60ch;
  margin:0 0 2rem;
}
.hero__actions{
  display:flex;
  flex-wrap:wrap;
  gap:.85rem;
}

/* ---------------------------------------------------------------------
 * 14. FORMS
 * ------------------------------------------------------------------- */
.form{
  background:var(--color-white);
  border:1px solid var(--color-border);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  padding:clamp(1.5rem, 4vw, 2.5rem);
}
.form__row{
  display:grid;
  grid-template-columns:1fr;
  gap:1rem 1.25rem;
}
@media (min-width:600px){
  .form__row{ grid-template-columns:repeat(2,1fr); }
}
.form__group{
  display:flex;
  flex-direction:column;
  gap:.4rem;
  margin-bottom:1.1rem;
}
.form__label{
  font-size:.9rem;
  font-weight:600;
  color:var(--color-heading);
}
.form__label .req{ color:var(--color-error); }
.form__input,
.form__textarea,
.form__select{
  width:100%;
  min-height:48px;
  padding:.7rem .9rem;
  border:1px solid var(--color-gray-300);
  border-radius:var(--radius-sm);
  background:var(--color-white);
  color:var(--color-text);
  font-size:1rem;
  line-height:1.5;
  transition:border-color var(--t-fast), box-shadow var(--t-fast);
}
.form__textarea{ min-height:140px; resize:vertical; }
.form__select{
  appearance:none;
  -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23514E45' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 1rem center;
  padding-right:2.5rem;
}
.form__input:focus,
.form__textarea:focus,
.form__select:focus{
  outline:none;
  border-color:var(--color-primary);
  box-shadow:0 0 0 3px rgba(219,162,47,.35);
}
.form__input.is-invalid,
.form__textarea.is-invalid,
.form__select.is-invalid{
  border-color:var(--color-error);
  box-shadow:0 0 0 3px rgba(178,58,46,.18);
}
.form__hint{
  font-size:.85rem;
  color:var(--color-text-muted);
}
.form__error{
  display:block;
  font-size:.85rem;
  color:var(--color-error);
  font-weight:500;
  min-height:1em;
}
.form__consent{
  display:flex;
  align-items:flex-start;
  gap:.6rem;
  font-size:.9rem;
  color:var(--color-text-secondary);
  margin-bottom:1.25rem;
}
.form__consent input[type="checkbox"]{
  width:20px;
  height:20px;
  margin-top:.15rem;
  flex:none;
  accent-color:var(--color-primary);
}
.form__consent.is-invalid{ color:var(--color-error); }
.form__submit{ margin-top:.25rem; }

/* Inline search bar (searchform.php) */
.form__row--inline{ display:flex; flex-wrap:wrap; gap:.6rem; align-items:stretch; }
.search-form__input{ flex:1 1 220px; }
.search-form__submit{ flex:none; }

/* Honeypot — visually & programmatically removed from flow but present */
.form__honeypot{
  position:absolute !important;
  left:-9999px !important;
  width:1px;
  height:1px;
  overflow:hidden;
}

/* Form-level messages */
.form-message{
  padding:.9rem 1.1rem;
  border-radius:var(--radius-sm);
  font-size:.95rem;
  margin-bottom:1.25rem;
  border:1px solid transparent;
}
.form-message--ok{
  background:var(--color-primary-lighter);
  border-color:var(--color-success);
  color:var(--color-success);
}
.form-message--err{
  background:rgba(178,58,46,.08); /* translucent --color-error tint */
  border-color:var(--color-error);
  color:var(--color-error);
}

/* ---------------------------------------------------------------------
 * 15. QUICK LINKS
 * ------------------------------------------------------------------- */
.quick-links{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:clamp(.75rem, 2vw, 1.25rem);
}
@media (min-width:600px){ .quick-links{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:1000px){ .quick-links{ grid-template-columns:repeat(6,1fr); } }
.quick-link{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.65rem;
  text-align:center;
  padding:1.5rem 1rem;
  min-height:120px;
  background:var(--color-white);
  border:1px solid var(--color-border);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  color:var(--color-heading);
  font-weight:600;
  font-size:.95rem;
  transition:transform var(--t), box-shadow var(--t), border-color var(--t);
}
.quick-link:hover,
.quick-link:focus-visible{
  transform:translateY(-5px);
  box-shadow:var(--shadow-lg);
  border-color:var(--color-secondary);
  color:var(--color-primary);
}
.quick-link__icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:54px;
  height:54px;
  border-radius:var(--radius-pill);
  background:var(--color-primary-lighter);
  color:var(--color-primary);
  transition:background var(--t), color var(--t);
}
.quick-link:hover .quick-link__icon{
  background:var(--color-secondary);
  color:var(--color-gray-900);
}
.quick-link__icon svg{ width:26px; height:26px; }

/* ---------------------------------------------------------------------
 * 16. BOARD GRID (About)
 * ------------------------------------------------------------------- */
.board-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:clamp(1rem, 3vw, 1.75rem);
}
@media (min-width:700px){ .board-grid{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:1024px){ .board-grid{ grid-template-columns:repeat(4,1fr); } }
.board-card{
  background:var(--color-white);
  border:1px solid var(--color-border);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  overflow:hidden;
  text-align:center;
  transition:transform var(--t), box-shadow var(--t);
}
.board-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-lg); }
.board-card__photo{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  background:var(--color-primary-lighter);
}
.board-card__name{
  margin:.9rem 1rem .15rem;
  font-size:1.1rem;
  color:var(--color-heading);
}
.board-card__role{
  margin:0 1rem 1.1rem;
  font-size:.85rem;
  color:var(--color-gold-text);
  font-weight:600;
  letter-spacing:.02em;
}

/* ---------------------------------------------------------------------
 * 17. PROFILE (Imam Corner)
 * ------------------------------------------------------------------- */
.profile{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(1.5rem, 4vw, 3rem);
  align-items:center;
}
@media (min-width:768px){
  .profile{ grid-template-columns:280px 1fr; }
}
@media (min-width:1024px){
  .profile{ grid-template-columns:340px 1fr; }
}
.profile__photo{
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
  background:var(--color-primary-lighter);
}
.profile__body h2,
.profile__body h3{ margin-top:0; }
.profile__body .profile__role{
  color:var(--color-gold-text);
  font-weight:600;
  margin-bottom:1.1rem;
}

/* ---------------------------------------------------------------------
 * 18. INFO CARDS (Contact)
 * ------------------------------------------------------------------- */
.info-cards{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(1.25rem, 3vw, 2rem);
}
@media (min-width:768px){ .info-cards{ grid-template-columns:repeat(2,1fr); } }
.info-card{
  display:flex;
  flex-direction:column;
  gap:.5rem;
  background:var(--color-white);
  border:1px solid var(--color-border);
  border-left:4px solid var(--color-secondary);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  padding:clamp(1.25rem, 3vw, 1.75rem);
}
.info-card h3{ margin:0 0 .4rem; }
.info-card__icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:48px;
  height:48px;
  border-radius:var(--radius-pill);
  background:var(--color-primary-lighter);
  color:var(--color-primary);
  margin-bottom:.5rem;
}
.info-card__icon svg{ width:24px; height:24px; }
.info-card p{ display:flex; gap:.55rem; align-items:flex-start; margin:0; color:var(--color-text-secondary); }
.info-card p svg{ width:1.05em; height:1.05em; color:var(--color-secondary-dark); flex:none; margin-top:.3rem; }
.info-card a{ color:var(--color-primary); font-weight:500; }

/* Generic info-card / icon-card variant used for fund categories etc. */
.info-cards--3{ grid-template-columns:1fr; }
@media (min-width:600px){ .info-cards--3{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1000px){ .info-cards--3{ grid-template-columns:repeat(3,1fr); } }

/* ---------------------------------------------------------------------
 * 19. COUNTERS / STATS
 * ------------------------------------------------------------------- */
.stats-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:clamp(1rem, 3vw, 2rem);
  text-align:center;
}
@media (min-width:768px){ .stats-grid{ grid-template-columns:repeat(4,1fr); } }
.stat{ padding:1rem; }
.stat__num{
  font-family:"Cormorant Garamond",Georgia,serif;
  font-weight:700;
  color:var(--color-primary);
  font-size:clamp(2.5rem, 6vw, 3.75rem);
  line-height:1;
  display:inline-flex;
  align-items:baseline;
}
.section--dark .stat__num{ color:var(--color-secondary-light); }
.stat__label{
  margin-top:.5rem;
  font-size:.95rem;
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--color-text-secondary);
}
.section--dark .stat__label{ color:rgba(255,255,255,.82); }
.counter{ font-variant-numeric:tabular-nums; }

/* ---------------------------------------------------------------------
 * 20. GALLERY GRID
 * ------------------------------------------------------------------- */
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:clamp(.6rem, 2vw, 1rem);
}
@media (min-width:700px){ .gallery-grid{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:1024px){ .gallery-grid{ grid-template-columns:repeat(4,1fr); } }
.gallery-grid__item{
  position:relative;
  display:block;
  overflow:hidden;
  border-radius:var(--radius);
  background:var(--color-gray-100);
  aspect-ratio:1/1;
}
.gallery-grid__item img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform var(--t-slow);
}
.gallery-grid__item:hover img,
.gallery-grid__item:focus-visible img{ transform:scale(1.07); }

/* alternating media/text rows (Programs page) */
.media-row{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(1.5rem, 4vw, 3rem);
  align-items:center;
}
@media (min-width:768px){
  .media-row{ grid-template-columns:1fr 1fr; }
  .media-row--reverse .media-row__media{ order:2; }
}
.media-row__media img{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
}

/* Plans (membership) */
.plans-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(1.25rem, 3vw, 2rem);
  max-width:760px;
}
@media (min-width:600px){ .plans-grid{ grid-template-columns:repeat(2,1fr); } }
.plan-card{
  background:var(--color-white);
  border:1px solid var(--color-border);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  padding:clamp(1.5rem, 3vw, 2rem);
  text-align:center;
}
.plan-card--featured{ border-color:var(--color-secondary); border-width:2px; }
.plan-card__name{ font-size:1.25rem; color:var(--color-heading); margin:0 0 .35rem; }
.plan-card__price{
  font-family:"Cormorant Garamond",Georgia,serif;
  font-weight:700;
  font-size:clamp(2rem, 5vw, 2.75rem);
  color:var(--color-primary);
  line-height:1.1;
}
.plan-card__price span{ font-size:1rem; color:var(--color-text-muted); font-family:"DM Sans",sans-serif; font-weight:500; }

/* ---------------------------------------------------------------------
 * 21. UTILITIES
 * ------------------------------------------------------------------- */
.visually-hidden{
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
.skip-link{
  position:absolute;
  left:.5rem;
  top:-100px;
  z-index:1000;
  padding:.7rem 1.1rem;
  background:var(--color-primary);
  color:var(--color-white);
  border-radius:var(--radius-sm);
  font-weight:600;
  transition:top var(--t-fast);
}
.skip-link:focus{ top:.5rem; color:var(--color-white); }
.u-center{ text-align:center; }
.u-mt-0{ margin-top:0 !important; }
.is-hidden{ display:none !important; }

/* small composable spacing helpers used by markup */
.u-mb-0{ margin-bottom:0 !important; }
.u-mx-auto{ margin-inline:auto; }
.u-flex-center{ display:flex; align-items:center; justify-content:center; gap:.85rem; flex-wrap:wrap; }

/* Styled objective / ordered list used on About + Programs */
.styled-list{ display:flex; flex-direction:column; gap:1rem; counter-reset:icgm-li; }
.styled-list li{
  position:relative;
  display:flex;
  gap:.9rem;
  padding-left:0;
  color:var(--color-text-secondary);
}
.styled-list li::before{
  counter-increment:icgm-li;
  content:counter(icgm-li);
  flex:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  border-radius:var(--radius-pill);
  background:var(--color-primary-lighter);
  color:var(--color-primary);
  font-weight:700;
  font-size:.9rem;
  font-family:"DM Sans",sans-serif;
}
.styled-list--check li::before{
  content:"";
  counter-increment:none;
  background:var(--color-secondary-lighter)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23B5821C' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")
    center/14px no-repeat;
}

/* ---------------------------------------------------------------------
 * 22. REVEAL ANIMATION SYSTEM
 * ------------------------------------------------------------------- */
.reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity var(--t-slow), transform var(--t-slow);
  transition-delay:var(--d, 0s);
  will-change:opacity, transform;
}
.reveal--left{ transform:translateX(-24px); }
.reveal--right{ transform:translateX(24px); }
.reveal--scale{ transform:scale(.94); }
.reveal.is-visible{
  opacity:1;
  transform:translateY(0) translateX(0) scale(1);
}

/* ---------------------------------------------------------------------
 * 23. REDUCED MOTION — full off-switch
 * ------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  *,
  *::before,
  *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  html{ scroll-behavior:auto; }
  .hero__bg{ animation:none; transform:scale(1.04); }
  .reveal{
    opacity:1 !important;
    transform:none !important;
  }
  .card:hover,
  .quick-link:hover,
  .board-card:hover,
  .btn:hover,
  .gallery-grid__item:hover img{
    transform:none !important;
  }
}

/* ---------------------------------------------------------------------
 * 24. PRINT (lightweight)
 * ------------------------------------------------------------------- */
@media print{
  .site-header,
  .site-footer,
  .app-banner,
  .mobile-drawer,
  .menu-toggle,
  .rawdah-widget-container iframe{ display:none !important; }
  body{ background:#fff; color:#000; }
}