/*
Theme Name: CBL-MADRASHA
Theme URI: https://github.com/
Author: CBL
Author URI: https://github.com/
Description: WordPress theme for Shardar Moslem Uddin Atimkhana Madrasha — a charitable Islamic residential madrasa in Tangail, Bangladesh. Built with ACF Pro for full content management.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: cbl-madrasha
Tags: islamic, madrasa, charity, education, acf
*/

/* =============================================
   CSS VARIABLES & DESIGN TOKENS
============================================= */
:root {
  --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;
  --spacing: 0.25rem;
  --container-sm: 24rem;
  --container-2xl: 42rem;
  --container-3xl: 48rem;
  --container-4xl: 56rem;
  --container-5xl: 64rem;
  --container-6xl: 72rem;
  --container-7xl: 80rem;
  --text-xs: 12px;
  --text-sm: 14px;
  --text-lg: 18px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 30px;
  --text-4xl: 36px;
  --text-5xl: 3rem;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --tracking-wide: 0.025em;
  --leading-tight: 1.25;
  --leading-relaxed: 1.625;
  --radius-sm: 4px;
  --radius-lg: 12px;
  --radius-xl: 24px;
  --radius-2xl: 1rem;
  --aspect-video: 16 / 9;
  --radius: var(--radius-sm);
  --color-background: #ffffff;
  --color-foreground: #1f2937;
  --color-border: #e5e7eb;
  --color-primary: #0f5132;
  --color-primary-foreground: #ffffff;
  --color-secondary: #198754;
  --color-secondary-foreground: #ffffff;
  --color-accent: #D97706;
  --color-accent-foreground: #ffffff;
  --color-muted: #f8f9fa;
  --color-muted-foreground: #6b7280;
  --color-gray-400: #9ca3af;
  --color-gray-500: #6b7280;
  --color-gray-800: #1f2937;
  --color-white: #ffffff;
  --font-body: "Inter", sans-serif;
  --font-headings: "Inter", sans-serif;
}

/* =============================================
   RESET & BASE
============================================= */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  min-height: 100%;
  line-height: 1.5;
  font-family: var(--font-body);
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* =============================================
   LAYOUT WRAPPERS
============================================= */
.export-wrapper {
  width: 100%;
  min-height: 812px;
  position: relative;
  margin: 0 auto;
  font-family: var(--font-body);
  background-color: var(--color-background);
}

.desktop-screen {
  width: 100%;
}

.nav-full,
.footer-full {
  width: 100%;
  margin-left: 0;
}

.nav-full > .cbl-nav-inner,
.nav-full > .max-w-7xl,
.footer-full > .max-w-7xl {
  width: 100%;
  padding-inline: 2rem;
}

/* =============================================
   NAV MENU (WordPress wp_nav_menu output)
============================================= */
.cbl-nav-menu {
  display: flex;
  align-items: center;
  gap: 2rem;
  list-style: none;
}

.cbl-nav-menu li {
  list-style: none;
}

.cbl-nav-menu li a {
  color: var(--color-muted-foreground);
  font-family: var(--font-body);
  font-size: 1rem;
  text-decoration: none;
}

.cbl-nav-menu li.current-menu-item > a,
.cbl-nav-menu li.current-page-ancestor > a,
.cbl-nav-menu li.current-menu-ancestor > a {
  color: var(--color-foreground);
  font-weight: var(--font-weight-medium);
}

.footer-nav-menu {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  list-style: none;
}

.footer-nav-menu li {
  list-style: none;
}

.footer-nav-menu li a {
  color: var(--color-gray-400);
  text-decoration: none;
}

/* =============================================
   NAV LOGO (header)
============================================= */
.cbl-nav-logo {
  max-width: 200px;
  height: auto;
  display: block;
  object-fit: contain;
}

/* Placeholder when no custom logo is set */
.cbl-nav-logo-fallback {
  width: 150px;
  max-width: 100%;
  min-height: 48px;
}

/* =============================================
   CUSTOM LOGO
============================================= */
.custom-logo-link img {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
  object-fit: cover;
}

/* =============================================
   UTILITY CLASSES — POSITIONING
============================================= */
.absolute { position: absolute; }
.relative { position: relative; }
.sticky { position: sticky; }
.inset-0 { inset: 0; }
.-top-8 { top: -2rem; }
.top-0 { top: 0; }
.-left-8 { left: -2rem; }
.left-\[-9px\] { left: -9px; }
.z-0 { z-index: 0; }
.z-10 { z-index: 10; }
.z-20 { z-index: 20; }
.z-50 { z-index: 50; }

/* =============================================
   UTILITY CLASSES — GRID
============================================= */
.col-span-2 { grid-column: span 2 / span 2; }
.row-span-2 { grid-row: span 2 / span 2; }

/* =============================================
   UTILITY CLASSES — MARGINS
============================================= */
.mx-auto { margin-inline: auto; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 0.75rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }
.mb-10 { margin-bottom: 2.5rem; }
.mb-12 { margin-bottom: 3rem; }
.mb-16 { margin-bottom: 4rem; }
.ml-4 { margin-left: 1rem; }
.ml-8 { margin-left: 2rem; }

/* =============================================
   UTILITY CLASSES — DISPLAY
============================================= */
.block { display: block; }
.flex { display: flex; }
.grid { display: grid; }
.inline-block { display: inline-block; }
.inline-flex { display: inline-flex; }

/* =============================================
   UTILITY CLASSES — ASPECT RATIOS
============================================= */
.aspect-\[4\/3\] { aspect-ratio: 4 / 3; }
.aspect-\[4\/5\] { aspect-ratio: 4 / 5; }
.aspect-video { aspect-ratio: var(--aspect-video); }

/* =============================================
   UTILITY CLASSES — SIZES
============================================= */
.size-4 { width: 1rem; height: 1rem; }
.size-6 { width: 1.5rem; height: 1.5rem; }
.size-8 { width: 2rem; height: 2rem; }
.size-10 { width: 2.5rem; height: 2.5rem; }
.size-12 { width: 3rem; height: 3rem; }
.size-16 { width: 4rem; height: 4rem; }
.size-24 { width: 6rem; height: 6rem; }
.size-32 { width: 8rem; height: 8rem; }
.size-\[14px\] { width: 14px; height: 14px; }
.size-\[16px\] { width: 16px; height: 16px; }
.size-\[18px\] { width: 18px; height: 18px; }
.size-\[20px\] { width: 20px; height: 20px; }
.size-\[24px\] { width: 24px; height: 24px; }
.size-\[32px\] { width: 32px; height: 32px; }

/* =============================================
   UTILITY CLASSES — HEIGHTS
============================================= */
.h-10 { height: 2.5rem; }
.h-20 { height: 5rem; }
.h-\[300px\] { height: 300px; }

.min-h-\[250px\] { min-height: 250px; }
.min-h-\[300px\] { min-height: 300px; }
.min-h-\[400px\] { min-height: 400px; }
.min-h-\[500px\] { min-height: 500px; }
.min-h-\[600px\] { min-height: 600px; }
.min-h-\[700px\] { min-height: 700px; }

/* =============================================
   UTILITY CLASSES — WIDTHS
============================================= */
.w-\[90\%\] { width: 90%; }
.w-\[480px\] { width: 480px; }
.w-full { width: 100%; }

.max-w-2xl { max-width: var(--container-2xl); }
.max-w-3xl { max-width: var(--container-3xl); }
.max-w-5xl { max-width: var(--container-5xl); }
.max-w-6xl { max-width: var(--container-6xl); }
.max-w-7xl { max-width: var(--container-7xl); }
.max-w-sm { max-width: var(--container-sm); }

/* =============================================
   UTILITY CLASSES — FLEX
============================================= */
.flex-1 { flex: 1; }
.shrink-0 { flex-shrink: 0; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }

/* =============================================
   UTILITY CLASSES — GRID COLUMNS
============================================= */
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* =============================================
   UTILITY CLASSES — GAP / SPACE
============================================= */
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.gap-6 { gap: 1.5rem; }
.gap-8 { gap: 2rem; }
.gap-12 { gap: 3rem; }
.gap-16 { gap: 4rem; }

.space-y-4 > :not(:last-child) { margin-bottom: 1rem; }
.space-y-6 > :not(:last-child) { margin-bottom: 1.5rem; }
.space-y-12 > :not(:last-child) { margin-bottom: 3rem; }

/* =============================================
   UTILITY CLASSES — OVERFLOW / BORDER RADIUS
============================================= */
.overflow-hidden { overflow: hidden; }
.rounded { border-radius: var(--radius); }
.rounded-2xl { border-radius: var(--radius-2xl); }
.rounded-\[20px\] { border-radius: 20px; }
.rounded-\[24px\] { border-radius: 24px; }
.rounded-\[32px\] { border-radius: 32px; }
.rounded-full { border-radius: 9999px; }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: var(--radius-xl); }

/* =============================================
   UTILITY CLASSES — BORDERS
============================================= */
.border { border: 1px solid; }
.border-2 { border: 2px solid; }
.border-4 { border: 4px solid; }
.border-l-2 { border-left: 2px solid; }
.border-r-2 { border-right: 2px solid; }
.border-t { border-top: 1px solid; }
.border-b { border-bottom: 1px solid; }
.border-border { border-color: var(--color-border); }
.border-gray-800 { border-color: var(--color-gray-800); }
.border-white { border-color: var(--color-white); }
.border-secondary\/30 { border-color: rgba(25, 135, 84, 0.3); }

/* =============================================
   UTILITY CLASSES — BACKGROUNDS
============================================= */
.bg-accent { background-color: var(--color-accent); }
.bg-background { background-color: var(--color-background); }
.bg-foreground { background-color: var(--color-foreground); }
.bg-muted { background-color: var(--color-muted); }
.bg-primary { background-color: var(--color-primary); }
.bg-primary\/10 { background-color: rgba(15, 81, 50, 0.1); }
.bg-primary\/90 { background-color: rgba(15, 81, 50, 0.9); }
.bg-secondary { background-color: var(--color-secondary); }
.bg-secondary\/10 { background-color: rgba(25, 135, 84, 0.1); }
.bg-secondary\/20 { background-color: rgba(25, 135, 84, 0.2); }
.bg-secondary-yellow { background-color: #D97706; }
.bg-muted\/50 { background-color: rgba(248, 249, 250, 0.5); }
.bg-transparent { background-color: transparent; }
.bg-white { background-color: var(--color-white); }
.bg-gradient-to-br {
  background-image: linear-gradient(to bottom right, var(--tw-gradient-from), var(--tw-gradient-to));
}
.from-muted { --tw-gradient-from: var(--color-muted); }
.to-white { --tw-gradient-to: var(--color-white); }
.bg-cover { background-size: cover; }
.bg-center { background-position: center; }

/* =============================================
   UTILITY CLASSES — PADDING
============================================= */
.p-4 { padding: 1rem; }
.p-6 { padding: 1.5rem; }
.p-8 { padding: 2rem; }
.p-10 { padding: 2.5rem; }
.p-12 { padding: 3rem; }
.p-\[24px\] { padding: 24px; }

.px-3 { padding-inline: 0.75rem; }
.px-4 { padding-inline: 1rem; }
.px-5 { padding-inline: 1.25rem; }
.px-6 { padding-inline: 1.5rem; }
.px-8 { padding-inline: 2rem; }
.px-10 { padding-inline: 2.5rem; }
.px-16 { padding-inline: 4rem; }

.py-1 { padding-block: 0.25rem; }
.py-2 { padding-block: 0.5rem; }
.py-2\.5 { padding-block: 0.625rem; }
.py-3 { padding-block: 0.75rem; }
.py-4 { padding-block: 1rem; }
.py-5 { padding-block: 1.25rem; }
.py-16 { padding-block: 4rem; }
.py-20 { padding-block: 5rem; }
.py-\[80px\] { padding-block: 80px; }
.py-\[100px\] { padding-block: 100px; }
.pt-8 { padding-top: 2rem; }
.pr-4 { padding-right: 1rem; }
.pr-8 { padding-right: 2rem; }
.pr-12 { padding-right: 3rem; }
.pl-12 { padding-left: 3rem; }

/* =============================================
   UTILITY CLASSES — TEXT ALIGNMENT
============================================= */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

/* =============================================
   UTILITY CLASSES — FONT FAMILY
============================================= */
.font-body { font-family: var(--font-body); }
.font-headings { font-family: var(--font-headings); }
.font-mono { font-family: var(--font-mono); }

/* =============================================
   UTILITY CLASSES — FONT SIZE
============================================= */
.text-xs { font-size: var(--text-xs); }
.text-sm { font-size: var(--text-sm); }
.text-lg { font-size: var(--text-lg); }
.text-xl { font-size: var(--text-xl); }
.text-2xl { font-size: var(--text-2xl); }
.text-3xl { font-size: var(--text-3xl); }
.text-4xl { font-size: var(--text-4xl); }
.text-5xl { font-size: var(--text-5xl); }

/* =============================================
   UTILITY CLASSES — LINE HEIGHT / LETTER SPACING
============================================= */
.leading-\[1\.2\] { line-height: 1.2; }
.leading-relaxed { line-height: var(--leading-relaxed); }
.leading-tight { line-height: var(--leading-tight); }

/* =============================================
   UTILITY CLASSES — FONT WEIGHT / TRACKING
============================================= */
.font-bold { font-weight: var(--font-weight-bold); }
.font-medium { font-weight: var(--font-weight-medium); }
.tracking-wide { letter-spacing: var(--tracking-wide); }

/* =============================================
   UTILITY CLASSES — TEXT COLORS
============================================= */
.text-accent { color: var(--color-accent); }
.text-accent-foreground { color: var(--color-accent-foreground); }
.text-foreground { color: var(--color-foreground); }
.text-gray-400 { color: var(--color-gray-400); }
.text-gray-500 { color: var(--color-gray-500); }
.text-muted-foreground { color: var(--color-muted-foreground); }
.text-orange-600 { color: #ea580c; }
.text-pink-600 { color: #db2777; }
.text-primary { color: var(--color-primary); }
.text-primary-foreground { color: var(--color-primary-foreground); }
.text-primary-foreground\/80 { color: rgba(255, 255, 255, 0.8); }
.text-secondary { color: var(--color-secondary); }
.text-secondary-foreground { color: var(--color-secondary-foreground); }
.text-secondary\/20 { color: rgba(25, 135, 84, 0.2); }
.text-white { color: var(--color-white); }

/* =============================================
   UTILITY CLASSES — SHADOWS / RINGS
============================================= */
.shadow-sm { box-shadow: 0 1px 3px rgb(0 0 0 / 0.1), 0 1px 2px rgb(0 0 0 / 0.06); }
.shadow-lg { box-shadow: 0 10px 15px rgb(0 0 0 / 0.1), 0 4px 6px rgb(0 0 0 / 0.05); }
.shadow-2xl { box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25); }
.shadow-xl { box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); }
.ring-4 { box-shadow: 0 0 0 4px var(--color-muted); }
.ring-muted { box-shadow: 0 0 0 4px var(--color-muted); }

/* =============================================
   RESPONSIVE BREAKPOINT — 768px
============================================= */
@media (min-width: 768px) {
  .md\:left-1\/2 { left: 50%; }
  .md\:ml-0 { margin-left: 0; }
  .md\:w-1\/2 { width: 50%; }
  .md\:-translate-x-1\/2 { transform: translateX(-50%); }
  .md\:-translate-x-px { transform: translateX(-1px); }
  .md\:flex-row-reverse { flex-direction: row-reverse; }
  .md\:pr-12 { padding-right: 3rem; }
  .md\:pl-12 { padding-left: 3rem; }
}

/* =============================================
   MOBILE NAV — HAMBURGER BUTTON
   Hidden on desktop, shown on mobile
============================================= */
.cbl-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  padding: 6px 2px;
  background: transparent;
  border: none;
  cursor: pointer;
  border-radius: 4px;
  flex-shrink: 0;
}
.cbl-hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background-color: var(--color-foreground);
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.cbl-hamburger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.cbl-hamburger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.cbl-hamburger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}


/* =============================================
   BREAKPOINT 1024px — Large tablet / landscape
============================================= */
@media (max-width: 1024px) {
  .px-16 { padding-inline: 2rem; }
  .py-\[100px\] { padding-block: 72px; }
  .py-\[80px\] { padding-block: 60px; }
  .gap-16 { gap: 3rem; }
  .text-5xl { font-size: 2.5rem; }
  .grid-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .min-h-\[700px\] { min-height: 560px; }
}


/* =============================================
   BREAKPOINT 768px — Tablet portrait
============================================= */
@media (max-width: 768px) {
  /* Spacing */
  .px-16 { padding-inline: 1.5rem; }
  .px-10 { padding-inline: 1.5rem; }
  .px-8  { padding-inline: 1.25rem; }
  .py-\[100px\] { padding-block: 64px; }
  .py-\[80px\]  { padding-block: 52px; }
  .py-20        { padding-block: 3.5rem; }
  .gap-16       { gap: 2rem; }
  .gap-12       { gap: 1.5rem; }

  /* Min-heights release */
  .min-h-\[700px\],
  .min-h-\[600px\],
  .min-h-\[500px\],
  .min-h-\[400px\],
  .min-h-\[300px\],
  .min-h-\[250px\] { min-height: auto; }

  /* Typography */
  .text-5xl { font-size: 2rem; }
  .text-4xl { font-size: 1.75rem; }
  .text-3xl { font-size: 1.5rem; }
  .text-2xl { font-size: 1.25rem; }

  /* Grids */
  .grid-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-cols-2 { grid-template-columns: 1fr; }

  /* Stack two-column content sections (not navigation) */
  section.flex { flex-direction: column; }
  .cbl-stack-mobile {
    flex-direction: column;
    align-items: stretch;
  }
  .cbl-stack-mobile .flex-1 {
    flex: none;
    width: 100%;
    max-width: 100%;
  }
  .cbl-stack-mobile .flex-1.pr-12 { padding-right: 0; }
  .cbl-stack-mobile .flex-1.pr-8  { padding-right: 0; }
  .cbl-stack-mobile .flex-1.flex.justify-end { justify-content: flex-start; }

  /* Fixed-width donation box → full width */
  .w-\[480px\] { width: 100%; }
  .w-\[90\%\]  { width: 100%; }

  /* Tall portrait image → shorter on tablet */
  .aspect-\[4\/5\] { aspect-ratio: 4 / 3; }
  .h-\[300px\]     { height: auto; min-height: 200px; }

}


/* =============================================
   BREAKPOINT 480px — Mobile (phones)
============================================= */
@media (max-width: 480px) {

  /* ── Navigation ─────────────────────────── */
  .cbl-hamburger { display: flex; }

  /* Nav bar: logo + hamburger row, menu panel below */
  .nav-full > .cbl-nav-inner {
    flex-wrap: wrap;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding-inline: 1rem;
    padding-block: 0.625rem;
    gap: 0;
    position: relative;
  }

  /* Nav-links panel: hidden by default, shown when .is-open */
  #cbl-nav-links {
    display: none;
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding-top: 0.75rem;
    margin-top: 0.625rem;
    border-top: 1px solid var(--color-border);
    /* reset desktop row-layout classes */
    width: 100%;
    height: auto;
  }
  #cbl-nav-links.is-open { display: flex; }

  /* Individual nav links inside the panel */
  #cbl-nav-links > a {
    display: block;
    width: 100%;
    padding: 0.75rem 0;
    font-size: 0.9375rem;
    color: var(--color-foreground);
    font-weight: normal;
    border-bottom: 1px solid var(--color-border);
    text-decoration: none;
  }
  /* Donate button at the end of the nav links */
    #cbl-nav-links a {
      display: block !important;
      width: 100% !important;
      margin-top: 12px;
      padding: 12px 20px;
      border-radius: 10px;
      text-align: center;
      box-sizing: border-box;

      color: white !important;
        /* text white */
        font-weight: 700 !important;
        /* bold */
    }

  /* ── Spacing ─────────────────────────────── */
  .px-16,
  .px-10,
  .px-8,
  .px-6 { padding-inline: 1rem; }

  .p-12,
  .p-10,
  .p-8   { padding: 1.25rem; }
  .p-6   { padding: 1rem; }
  .p-\[24px\] { padding: 1rem; }

  .py-\[100px\] { padding-block: 48px; }
  .py-\[80px\]  { padding-block: 40px; }
  .py-20        { padding-block: 2.5rem; }
  .py-16        { padding-block: 2rem; }

  .gap-16 { gap: 1.5rem; }
  .gap-12 { gap: 1.25rem; }
  .gap-8  { gap: 1rem; }
  .gap-6  { gap: 0.75rem; }

  .mb-16  { margin-bottom: 2.5rem; }
  .mb-12  { margin-bottom: 2rem; }

  /* ── Typography ──────────────────────────── */
  .text-5xl { font-size: 1.75rem; }
  .text-4xl { font-size: 1.5rem; }
  .text-3xl { font-size: 1.25rem; }
  .text-2xl { font-size: 1.125rem; }
  .text-xl  { font-size: 1rem; }
  .text-lg  { font-size: 0.9375rem; }

  /* ── Grids → single column ───────────────── */
    .grid-cols-4 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  
    .grid-cols-3 { 
    grid-template-columns: repeat(2, minmax(0, 1fr)); 
  }
    .grid-cols-2 {
      grid-template-columns: 1fr;
    }

  /* Reset gallery span so images stack 1-per-row */
  .col-span-2 { grid-column: auto; }
  .row-span-2 { grid-row: auto; }

  /* ── Two-column flex sections stack ─────── */
  section.flex { flex-direction: column; }
  .cbl-stack-mobile {
    flex-direction: column;
    align-items: stretch;
  }
  .cbl-stack-mobile .flex-1 {
    flex: none;
    width: 100%;
    max-width: 100%;
    padding-right: 0;
  }
  .cbl-stack-mobile .flex-1.flex.justify-end { justify-content: flex-start; }

  /* Fixed-width blocks → fluid */
  .w-\[480px\] { width: 100%; }
  .w-\[90\%\]  { width: 100%; }

  /* ── Fixed / min heights → release ──────── */
  .min-h-\[700px\],
  .min-h-\[600px\],
  .min-h-\[500px\],
  .min-h-\[400px\],
  .min-h-\[300px\],
  .min-h-\[250px\] { min-height: auto; }
  .h-\[300px\]     { height: 220px; }

  /* Hero tall portrait image */
  .aspect-\[4\/5\] { aspect-ratio: 4 / 3; }
  .aspect-video    { aspect-ratio: 4 / 3; }

  /* ── CTA button groups → stacked ────────── */
  .flex.items-center.gap-4 {
    flex-direction: column;
    align-items: stretch;
  }
  .flex.items-center.gap-4 > a {
    text-align: center;
    justify-content: center;
    width: 100%;
  }
  .flex.items-center.justify-center.gap-6 {
    flex-direction: column;
    align-items: stretch;
  }
  .flex.items-center.justify-center.gap-6 > a {
    text-align: center;
    justify-content: center;
    width: 100%;
  }

  /* ── Hero stat badges → wrap on one line ── */
  .flex.items-center.gap-8.text-sm {
    flex-wrap: wrap;
    gap: 0.75rem;
  }

  /* ── Timeline ────────────────────────────── */
  .space-y-12 > :not(:last-child) { margin-bottom: 1.5rem; }
  .ml-8       { margin-left: 1rem; }
  .left-\[-9px\] { left: -5px; }

  /* ── Stats strip numbers ─────────────────── */
  .text-5xl.font-bold.text-accent { font-size: 2rem; }

  /* ── Footer columns stack ─────────────────── */
  .footer-full > div { padding-inline: 1rem; }
  .footer-nav-menu   { gap: 0.5rem; }
}

/* =============================================
   HOME — HERO
============================================= */
.cbl-hero {
  width: 100%;
  overflow: hidden;
  background: var(--color-muted);
}

.cbl-hero__container {
  box-sizing: border-box;
}

.cbl-hero__media {
  min-height: 420px;
}

.cbl-hero__image {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

@media (max-width: 768px) {
  .cbl-hero {
    overflow: visible;
  }

  .cbl-hero__container {
    flex-direction: column;
    align-items: stretch;
    min-height: auto;
    padding-inline: 1rem;
    padding-block: 2.5rem;
    gap: 1.5rem;
  }

  .cbl-hero__content {
    flex: none;
    width: 100%;
    max-width: 100%;
    padding-right: 0;
    order: 0;
    position: relative;
    z-index: 2;
  }

  .cbl-hero__media {
    order: 1;
    width: 100%;
    flex: none;
    align-self: auto;
    min-height: 260px;
    height: auto;
  }

  .cbl-hero__image {
    position: relative;
    inset: auto;
    width: 100%;
    min-height: 260px;
    height: 260px;
    border-radius: 1.25rem;
  }

  /* Achievements page hero banner only */
  .cbl-achievements-hero {
    min-height: 250px;
  }
}

/* =============================================
   HOME — DAILY TIMELINE (mobile only, max 767px)
   Desktop (768px+) keeps md: zigzag layout unchanged
============================================= */
@media (max-width: 767px) {
  .cbl-day-timeline .cbl-day-timeline__track {
    margin-left: 0;
    transform: none;
  }

  /* Vertical spine + cards stacked full-width, left-aligned */
  .cbl-day-timeline .cbl-day-timeline__track > .relative {
    padding-left: 1.125rem;
    border-left: 3px solid rgba(217, 119, 6, 0.42);
    margin-left: 0.35rem;
  }

  .cbl-day-timeline .cbl-day-timeline__track > .relative > .absolute {
    left: -10px !important;
    top: 1.35rem;
    transform: none !important;
  }

  .cbl-day-timeline .cbl-day-timeline__track > .relative > div:not(.absolute) {
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-align: left !important;
    border-left: none !important;
    border-right: none !important;
  }

  .cbl-day-timeline .cbl-day-timeline__track .text-right {
    text-align: left !important;
  }

  .cbl-day-timeline .cbl-day-timeline__track .justify-end {
    justify-content: flex-start !important;
  }

  .cbl-day-timeline .cbl-day-timeline__track .inline-block.w-full.max-w-sm {
    display: block;
    max-width: none !important;
  }

  .cbl-day-timeline .cbl-day-timeline__track .bg-white.border-border {
    padding: 1rem 1.125rem;
    border-radius: 1rem;
    box-shadow: 0 4px 16px rgb(15 81 50 / 0.08);
  }

  .cbl-day-timeline h2.mb-16 {
    margin-bottom: 1.75rem;
  }
}

/*-----------15-06-26------------*/










/* ======================
   FULLSCREEN VIEWER
====================== */

.cbl-viewer-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .95);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  /* pointer-events: none; */
  transition: opacity 0.28s ease, visibility 0.28s ease;
}

.cbl-viewer-modal.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

#cblViewerContent {
  width: 90vw;
  height: 85vh;

  display: flex;
  align-items: center;
  justify-content: center;
}

.cbl-viewer-image {
  width: auto;
  max-width: 90vw;
  max-height: 85vh;
  object-fit: contain;
  border-radius: 12px;
}

.cbl-viewer-video {
  width: 900px;
  max-width: 100%;
  max-height: 80vh;
}



/* PREV NEXT */

.cbl-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #D97706;
  color: white;
  font-size: 24px;
}

.cbl-prev {
  left: 30px;
}

.cbl-next {
  right: 30px;
}
.cbl-close-btn {
  position: absolute;
  top: 40px;
  right: 40px;

  background: #D97706;
  color: white;

  width: 52px;
  height: 52px;

  border-radius: 50%;
  font-size: 22px;
  z-index: 100;
}


/* MOBILE */

@media(max-width:768px) {

  .cbl-modal-box {
    padding: 20px;
  }

  .cbl-nav-btn {
    width: 42px;
    height: 42px;
    font-size: 18px;
  }

  .cbl-prev {
    left: 10px;
  }

  .cbl-next {
    right: 10px;
  }

}

/* =============================================
   GALLERY LOADER (SECTION ONLY)
============================================= */

.cbl-gallery-loader {

  width: 100%;
  display: none;

  justify-content: center;
  align-items: center;

  padding: 35px 0;

  opacity: 0;
  transition: opacity .4s ease;

}

.cbl-gallery-loader.active {

  display: flex;
  opacity: 1;

}


/* =============================================
   SMOOTH MEDIA REVEAL
============================================= */

.cbl-hidden-media {

  display: none !important;
  opacity: 0;
  transform: translateY(40px);

}

.cbl-show-media {

  display: block !important;
  animation: cblMediaReveal .8s ease forwards;

}

@keyframes cblMediaReveal {

  0% {
    opacity: 0;
    transform: translateY(35px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }

}


/* =============================================
   NEW LOADER ANIMATION
============================================= */

.loader {
  width: 15px;
  aspect-ratio: 1;
  border-radius: 50%;
  animation: l5 1s infinite linear alternate;
}

@keyframes l5 {

  0% {
    box-shadow: 20px 0 #000, -20px 0 #0002;
    background: #000;
  }

  33% {
    box-shadow: 20px 0 #000, -20px 0 #0002;
    background: #0002;
  }

  66% {
    box-shadow: 20px 0 #0002, -20px 0 #000;
    background: #0002;
  }

  100% {
    box-shadow: 20px 0 #0002, -20px 0 #000;
    background: #000;
  }

}

/* =============================================
   DESKTOP TIMELINE VERTICAL LINE
============================================= */

.cbl-day-timeline__track {
  position: relative;
}


/* dont remove from this line to botton */
/* center vertical line */
.cbl-day-timeline__track::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
  background: none;
  /* green line */
  z-index: 0;
}

/* cards above line */
.cbl-day-timeline__track>div {
  position: relative;
  z-index: 2;
}

.cbl-gallery-video-preview {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

.cbl-media-card {
  cursor: pointer;
}

.cbl-video-card {
  background: #1a1d2e;
}

.cbl-video-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.18);
  transition: background 0.25s ease;
}

.cbl-video-overlay:hover {
  background: rgba(0, 0, 0, 0.28);
}

.cbl-video-overlay-icon {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.12);
  border: 2px solid rgba(255, 255, 255, 0.92);
  position: relative;
  box-shadow: 0 18px 40px rgba(15, 31, 55, 0.12);
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.cbl-video-overlay-icon::before {
  content: "";
  position: absolute;
  left: 52%;
  top: 50%;
  transform: translate(-45%, -50%);
  width: 0;
  height: 0;
  border-top: 0.55rem solid transparent;
  border-bottom: 0.55rem solid transparent;
  border-left: 0.9rem solid #ffffff;
}

.cbl-video-overlay:hover .cbl-video-overlay-icon {
  transform: scale(1.05);
}




/* PRAYER SECTION */

.cbl-prayer-badge {

  display: inline-flex;
  align-items: center;
  gap: 10px;

  background: #eef9f3;
  padding: 12px 26px;
  border-radius: 40px;

  font-weight: 600;
  color: #0b8d55;

  margin-bottom: 30px;

}

.cbl-prayer-title {

  font-size: 56px;
  font-weight: 800;

  color: #005b35;
  margin-bottom: 25px;

}

.cbl-prayer-desc {

  max-width: 720px;
  margin: auto;

  font-size: 22px;
  line-height: 1.7;

  color: #777;
  margin-bottom: 30px;

}

.cbl-prayer-divider {

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;

  margin-bottom: 24px;             /* divider gap */


}

.cbl-prayer-divider span {

  width: 60px;
  height: 2px;
  background: #19a56d;

}

.cbl-prayer-divider div {

  width: 14px;
  height: 14px;

  background: #f8aa28;
  transform: rotate(45deg);

}


.cbl-prayer-grid {

  display: grid;
  grid-template-columns: repeat(5, 1fr);

  gap: 28px;

}


.cbl-prayer-card {
  background: white;
  padding: 38px 20px 38px 20px;
  /* top right-left bottom */
  border-radius: 18px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .06);
  transition: .3s ease;
}

.cbl-prayer-card:hover {

  transform: translateY(-6px);

}


.cbl-prayer-icon-wrap {

  width: 90px;
  height: 90px;

  border-radius: 50%;

  display: flex;
  align-items: center;
  justify-content: center;

  margin: auto;
  margin-bottom: 22px;

  font-size: 40px;

}

.card-divider {
  margin-top: 22px;
  margin-bottom: 0 !important;
}


.cbl-prayer-card h3 {

  font-size: 32px;
  font-weight: 700;

  margin-bottom: 20px;

  color: #005b35;

}

@media (max-width: 1024px) {
  .cbl-prayer-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .cbl-prayer-title {
    font-size: 44px;
  }

  .cbl-prayer-desc {
    max-width: 100%;
    font-size: 20px;
  }
}

@media (max-width: 768px) {

  /* 2 cards per row */
  .cbl-prayer-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  /* compact cards */
  .cbl-prayer-card {
    padding: 20px 12px;
  }

  /* icon smaller */
  .cbl-prayer-icon-wrap {
    width: 60px;
    height: 60px;
    font-size: 28px;
    margin-bottom: 14px;
  }

  /* prayer title */
  .cbl-prayer-card h3 {
    font-size: 18px;
    margin-bottom: 12px;
  }

  /* description */
  .cbl-prayer-desc {
    font-size: 18px;
    line-height: 1.6;
  }

  /* hide only top divider */
  .cbl-prayer-section>div>.cbl-prayer-divider {
    display: none;
  }

  /* card divider smaller */
  .card-divider span {
    width: 35px;
  }

  .card-divider {
    margin-top: 12px;
  }

  /* badge */
  .cbl-prayer-badge {
    padding: 10px 20px;
    font-size: 14px;
  }

  /* section side spacing */
  .cbl-prayer-section {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}




.cbl-card-divider {

  width: 70%;
  margin: auto;

  border-bottom: 2px dashed #ddd;

  margin-bottom: 20px;

}


/* prayer status */

.cbl-prayer-performed {

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  margin-top: 14px;

  color: #999;

  font-size: 16px;
  font-weight: 500;

}


/* small mosque icon */

.cbl-mini-mosque {

  font-size: 18px;

  opacity: .7;

}



/* card divider little better */

.cbl-card-divider {

  width: 65%;

  margin: auto;

  border-bottom: 2px dashed #ddd;

  margin-top: 12px;
  margin-bottom: 16px;

}




/* COLORS */

.green {

  border-bottom: 5px solid #13a36b;

}

.green .cbl-prayer-icon-wrap {

  background: #edf9f4;
  color: #13a36b;

}



.orange {

  border-bottom: 5px solid #f8931f;

}

.orange .cbl-prayer-icon-wrap {

  background: #fff4e8;
  color: #f8931f;

}



.purple {

  border-bottom: 5px solid #8f55d9;

}

.purple .cbl-prayer-icon-wrap {

  background: #f7efff;
  color: #8f55d9;

}

/* Donation procedure list force below heading */

#donate-methods .bg-muted\/80 {
  display: block !important;
}

#donate-methods .bg-muted\/80>div {
  display: block !important;
  width: 100% !important;
}

#donate-methods .bg-muted\/80 h4 {
  display: block !important;
  margin-bottom: 14px !important;
}

#donate-methods .bg-muted\/80 ol {
  display: block !important;
  width: 100% !important;
  clear: both !important;
  margin-top: 12px !important;
  padding-left: 24px !important;
  line-height: 1.8 !important;
}

/* ===============================
   MANAGEMENT COMMITTEE SECTION
================================= */

.management-section {
  padding: 100px 64px;
  background: var(--color-muted);
}

.management-container {
  max-width: 1280px;
  margin: 0 auto;
}

.management-title {
  font-size: 40px;
  font-weight: 700;
  color: var(--primary);
  text-align: center;
  margin-bottom: 64px;
}

.management-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 32px;
}

.management-card {
  width: 420px;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 24px;
  text-align: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);

  display: flex;
  flex-direction: column;
  align-items: center;
}

.management-image {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  margin-bottom: 16px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.management-name {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 6px;
  color: #1f2937;
}

.management-role {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 16px;
}

.management-description {
  font-size: 18px;
  line-height: 1.6;
  color: rgb(107, 114, 128);
 
}

/* Mobile */

@media (max-width: 768px) {
  .management-section {
    padding: 60px 20px;
  }

  .management-card {
    width: 100%;
  }

  .management-title {
    font-size: 30px;
  }
}

/* donate page — methods section spacing fix */
.donation-method {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.donation-method-icon {
  transform: translateY(4px);
  margin-bottom: 10px !important;
  line-height: 1;
}

@media (max-width: 768px) {
  .hero-icons{
    justify-content: center;
  }
}

/* Mission & Vision mobile spacing fix only */
@media (max-width: 768px) {

  /* mission + vision card */
  .grid.grid-cols-2>div {
    padding: 24px !important;
  }

  /* icon */
  .grid.grid-cols-2>div .size-16 {
    width: 3.2rem;
    height: 3.2rem;
    margin-bottom: 16px !important;
  }

  /* title */
  .grid.grid-cols-2>div h3 {
    font-size: 1.35rem !important;
    line-height: 1.35;
    margin-bottom: 12px !important;
  }

  /* paragraph */
  .grid.grid-cols-2>div p {
    font-size: 0.95rem !important;
    line-height: 1.65;
  }
}

/*---18-06-26---*/


/* INTERNATIONAL DONATION */

.intl-donation-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
}

/* only 1 card → center but keep same width */
.intl-donation-grid>div:only-child {
  grid-column: 1 / -1;
  /* full row */
  max-width: calc(50% - 16px);
  /* same width as before */
  width: 100%;
  margin: 0 auto;
}

/* mobile */
@media (max-width:768px) {
  .intl-donation-grid {
    grid-template-columns: 1fr;
  }

  .intl-donation-grid>div:only-child {
    max-width: 100%;
  }
}

/* Footer mobile fix */
@media (max-width: 768px) {

  /* footer -> single column */
  .footer-full .grid-cols-4 {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
    /* 28 → 36 */
  }

  /* logo wrapper */
  .footer-full .mb-6 {
    max-width: 120px !important;
    /* 140 → 120 */
    margin-bottom: 16px !important;
  }

  /* logo image */
  .footer-full img {
    max-width: 120px !important;
    height: auto;
  }

  /* footer text */
  .footer-full p,
  .footer-full span {
    font-size: 15px;
    line-height: 1.6;
  }

  /* tagline spacing */
  .footer-full p {
    margin-top: 8px;
  }

  /* remove desktop right padding */
  .footer-full .pr-4 {
    padding-right: 0 !important;
  }

  /* donate button */
  .footer-full a.bg-secondary-yellow {
    padding: 14px 20px !important;
    font-size: 15px;
  }

  /* hide empty footer menu */
  .footer-nav-menu:empty {
    display: none;
  }
}


/* =============================================
     GLOBAL HOVER FOR ALL BOXES)
============================================= */

.ui-card-hover {
  transition: 0.25s ease;
  cursor: pointer;
}

.ui-card-hover:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

@media (max-width:480px){

  #donate-help .grid-cols-3{
    grid-template-columns: 1fr;
  }

  #donate-help a{
    display:block;
    word-break: break-all;
    overflow-wrap: break-word;
  }

  

}
.contact-email{
  display:block;
  word-break: break-all;
}

@media(max-width:480px){
  #contact-info .grid-cols-3{
      grid-template-columns:1fr;
  }
}

/* International donation mobile fix */
@media (max-width:480px){

  #intl-donation .grid-cols-3{
      grid-template-columns: repeat(3, 1fr) !important;
      gap: 6px !important;
  }

  #intl-donation .p-5{
      padding: 8px !important;
  }

  #intl-donation .py-3{
      padding-top: 8px !important;
      padding-bottom: 8px !important;
  }

  #intl-donation .text-sm{
      font-size: 12px !important;
  }

}

/* International donation mobile */

#intl-donation .grid-cols-3 > div{
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media(max-width:480px){

  #intl-donation .text-sm{
      font-size: 12px !important;
      line-height: 1.3;
  }

}
#intl-donation .grid-cols-3 span,
#intl-donation .grid-cols-3 .font-headings{
   white-space: nowrap;
}

@media (max-width: 480px) {
    #cbl-nav-links a:not(:last-child) {
        display: block !important;
        width: 100% !important;
        margin-top: 12px;
        padding: 12px 20px;
        border-radius: 10px;
        text-align: center;
        box-sizing: border-box;
        color: black !important;
        font-weight: 700 !important;
    }
}