/* =====================================================================
   Noor (نور · "Light") — a theme for Islamic religious schools & madrasahs
   on the Biddaloy platform.
   CakePHP 2 theme · Bootstrap 5.3 · jQuery 3.7 · Bootstrap Icons
   ---------------------------------------------------------------------
   layout.css — chrome, the Bismillah bar, the mihrab hero with an
   engraved mosque + Qur'anic supplication, girih ornament, and the
   nested side-menu fly-out. CMS body typography lives in content.css.
   ===================================================================== */

/* ---------- Design tokens ------------------------------------------ */
:root{
  --nr-green:     #0e6b4e;   /* emerald — primary */
  --nr-green-700: #0a563f;
  --nr-green-900: #083a2b;
  --nr-teal:      #1f8a7a;   /* turquoise accent */
  --nr-gold:      #c9a233;   /* gold — accent */
  --nr-gold-soft: #e6c86a;
  --nr-gold-deep: #9a7c22;
  --nr-cream:     #f6f1e4;   /* parchment — background */
  --nr-cream-2:   #efe7d3;
  --nr-ink:       #17352a;   /* deep green-black text */
  --nr-muted:     #6f6a58;
  --nr-line:      #e0d6bd;   /* warm hairline */

  --nr-display: "Amiri", "Marcellus", Georgia, serif;   /* EN display + AR calligraphy */
  --nr-body:    "Mulish", system-ui, -apple-system, "Segoe UI", sans-serif;
  --nr-bn:      "Tiro Bangla", "Noto Serif Bengali", Georgia, serif;
  --nr-ar:      "Amiri", "Scheherazade New", serif;     /* calligraphic Arabic */
  --nr-kufi:    "Reem Kufi", "Amiri", sans-serif;       /* geometric Arabic */

  --nr-radius:   10px;
  --nr-radius-sm:7px;
  --nr-shadow:   0 3px 6px rgba(8,58,43,.07), 0 26px 50px -30px rgba(8,58,43,.5);
  --nr-shadow-sm:0 2px 4px rgba(8,58,43,.06), 0 14px 28px -22px rgba(8,58,43,.45);
  --nr-container:1200px;
  --nr-pattern:  url('../img/pattern.svg');
}

/* ---------- Base --------------------------------------------------- */
*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; font-family:var(--nr-body); color:var(--nr-ink);
  background-color:var(--nr-cream);
  background-image:radial-gradient(circle at 1px 1px, rgba(201,162,51,.09) 1px, transparent 1.7px);
  background-size:24px 24px; line-height:1.7; font-size:16px;
}
:lang(bn), .language-bn, [lang="bn"]{ font-family:var(--nr-bn); }
:lang(ar), .language-ar, [lang="ar"]{ font-family:var(--nr-ar); direction:rtl; }

a{ color:var(--nr-green-700); text-decoration:none; transition:color .18s ease; }
a:hover{ color:var(--nr-gold-deep); }
img{ max-width:100%; height:auto; }
h1,h2,h3,h4,h5{ font-family:var(--nr-display); color:var(--nr-green-900); line-height:1.2; font-weight:700; }
h1:lang(bn),h2:lang(bn),h3:lang(bn),h4:lang(bn),h5:lang(bn){ font-family:var(--nr-bn); font-weight:600; }

#divBoxed.container{ max-width:var(--nr-container); width:100%; padding:0 20px; margin:0 auto; }

/* ---------- Editorial devices -------------------------------------- */
.nr-eyebrow{ font-family:var(--nr-body); font-weight:700; font-size:12px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--nr-gold-deep); }
.nr-rule{ display:flex; align-items:center; justify-content:center; gap:14px; margin:16px 0; }
.nr-rule::before, .nr-rule::after{ content:""; height:1px; width:64px; background:var(--nr-gold); opacity:.7; }
.nr-rule i{ color:var(--nr-gold); font-size:12px; }

/* ---------- Skip link & focus -------------------------------------- */
.nr-skip{ position:absolute; left:-999px; top:0; z-index:2000; background:var(--nr-green);
  color:var(--nr-gold-soft); padding:10px 16px; letter-spacing:.06em; }
.nr-skip:focus{ left:0; }
a:focus-visible, button:focus-visible, input:focus-visible, .btn:focus-visible{
  outline:2px solid var(--nr-gold); outline-offset:3px; }

/* ---------- Bismillah bar ------------------------------------------ */
.nr-bismillah{ background:var(--nr-green-900); color:var(--nr-gold-soft); text-align:center;
  padding:8px 16px; font-family:var(--nr-ar); direction:rtl; font-size:19px; letter-spacing:.01em;
  border-bottom:1px solid rgba(201,162,51,.35); }

/* ---------- Top utility strip -------------------------------------- */
.nr-utility{ background:var(--nr-green); color:#d9ede4; font-size:12.5px; }
.nr-utility .nr-container{ max-width:var(--nr-container); margin:0 auto; padding:8px 20px;
  display:flex; flex-wrap:wrap; gap:6px 26px; align-items:center; justify-content:space-between; }
.nr-utility a{ color:#eaf6f0; }
.nr-utility a:hover{ color:var(--nr-gold-soft); }
.nr-utility .nr-util-group{ display:flex; flex-wrap:wrap; gap:6px 22px; align-items:center; }
.nr-utility i{ color:var(--nr-gold-soft); margin-right:7px; }

/* ---------- Header / brand lockup ---------------------------------- */
.nr-header{ background:var(--nr-cream); border-bottom:1px solid var(--nr-line); position:relative; }
.nr-header::after{ content:""; position:absolute; left:0; right:0; bottom:-4px; height:3px;
  background:linear-gradient(90deg, transparent, var(--nr-gold) 18%, var(--nr-gold) 82%, transparent); opacity:.4; }
.nr-header .nr-container{ max-width:var(--nr-container); margin:0 auto; padding:16px 20px; display:flex; align-items:center; gap:18px; }
.nr-brand{ display:flex; align-items:center; gap:16px; min-width:0; }
.nr-brand__logo{ width:66px; height:66px; flex:0 0 66px; object-fit:contain; }
.nr-brand__text{ min-width:0; display:flex; flex-direction:column; gap:1px; }
.nr-brand__ar{ font-family:var(--nr-kufi); direction:rtl; color:var(--nr-green); font-size:19px; line-height:1.35; font-weight:700; }
.nr-brand__en{ font-family:var(--nr-display); font-weight:700; font-size:25px; color:var(--nr-green-900); line-height:1.05; }
.nr-brand__bn{ font-family:var(--nr-bn); color:var(--nr-green-700); font-size:16px; font-weight:600; line-height:1.3; }
.nr-header__spacer{ margin-left:auto; }
.nr-est{ text-align:right; white-space:nowrap; }
.nr-est__label{ display:block; font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--nr-muted); }
.nr-est__year{ font-family:var(--nr-display); font-weight:700; font-size:25px; color:var(--nr-gold-deep); line-height:1; }

/* ---------- Primary navigation (styles injected $dropDownTopMenu) --- */
.nr-nav{ background:var(--nr-green); border-top:1px solid rgba(201,162,51,.4); border-bottom:3px solid var(--nr-gold); }
.nr-nav .nr-container{ max-width:var(--nr-container); margin:0 auto; padding:0 20px; }
.nr-nav__row{ display:flex; align-items:center; gap:14px; min-height:50px; }
.nr-nav__toggle{ display:none; background:transparent; border:1px solid rgba(230,200,106,.5); color:var(--nr-gold-soft);
  border-radius:5px; padding:7px 10px; font-size:18px; line-height:1; }

#topmenuUL{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; align-items:stretch; }
#topmenuUL > li{ position:relative; }
#topmenuUL > li > a{ display:flex; align-items:center; gap:7px; height:100%; padding:14px 16px;
  color:#e6f2ec; font-family:var(--nr-body); font-weight:600; font-size:13px; letter-spacing:.1em;
  text-transform:uppercase; position:relative; }
#topmenuUL > li > a::after{ content:""; position:absolute; left:16px; right:16px; bottom:8px; height:2px;
  background:var(--nr-gold-soft); transform:scaleX(0); transform-origin:center; transition:transform .22s ease; }
#topmenuUL > li > a:hover, #topmenuUL > li.active > a, #topmenuUL > li.open > a{ color:#fff; }
#topmenuUL > li > a:hover::after, #topmenuUL > li.active > a::after, #topmenuUL > li.open > a::after{ transform:scaleX(1); }
#topmenuUL .caret{ display:inline-block; width:0; height:0; margin-left:3px;
  border-left:4px solid transparent; border-right:4px solid transparent; border-top:5px solid currentColor; opacity:.85; }

#topmenuUL .dropdown-menu{ position:absolute; top:100%; left:0; z-index:1000; display:none; min-width:230px; margin:0;
  padding:8px 0; list-style:none; background:var(--nr-cream); border:1px solid var(--nr-line);
  border-top:3px solid var(--nr-gold); border-radius:0 0 var(--nr-radius-sm) var(--nr-radius-sm); box-shadow:var(--nr-shadow); }
#topmenuUL li:hover > .dropdown-menu, #topmenuUL li.open > .dropdown-menu, #topmenuUL .dropdown-menu.show{ display:block; }
#topmenuUL .dropdown-menu > li > a{ display:block; padding:9px 18px; color:var(--nr-ink);
  font-family:var(--nr-body); font-weight:600; font-size:14px; }
#topmenuUL .dropdown-menu > li > a:hover{ background:var(--nr-cream-2); color:var(--nr-green-700); }
#topmenuUL .divider{ height:1px; margin:6px 14px; background:var(--nr-line); }

/* ---------- Search widget (IDs kept for the inline script) --------- */
.nr-search{ margin-left:auto; display:flex; align-items:center; }
.nr-search .btnSearchDD{ background:transparent; color:var(--nr-gold-soft); border:1px solid rgba(230,200,106,.5);
  border-right:0; border-radius:5px 0 0 5px; padding:7px 12px; font-family:var(--nr-body); font-weight:600; font-size:12px; }
.nr-search .btnSearchDD:hover{ color:#fff; }
.nr-search #appendedPrependedDropdownButton{ width:130px; border:1px solid rgba(230,200,106,.5); border-left:0; border-right:0;
  padding:8px 12px; font:inherit; font-size:13px; background:rgba(255,255,255,.08); color:#fff; outline:none; }
.nr-search #appendedPrependedDropdownButton::placeholder{ color:#a9c6ba; }
.nr-search .btnSearchGo{ background:var(--nr-gold); color:var(--nr-green-900); border:1px solid var(--nr-gold);
  border-radius:0 5px 5px 0; padding:8px 15px; font-family:var(--nr-body); font-weight:700; font-size:12px; letter-spacing:.06em; cursor:pointer; }
.nr-search .btnSearchGo:hover{ background:var(--nr-gold-soft); }
.nr-search .dropdown-menu{ font-size:14px; }
.nr-search .dropdown-menu a{ display:flex; gap:8px; align-items:center; }

/* ---------- Hero (mihrab arch + ayah + mosque = the signature) ----- */
.nr-hero{ position:relative; overflow:hidden; margin:26px 0 20px; color:#eef6f1;
  background:radial-gradient(130% 120% at 50% -10%, var(--nr-teal) 0%, var(--nr-green) 42%, var(--nr-green-900) 100%);
  border-radius:var(--nr-radius); border:1px solid rgba(201,162,51,.4); }
.nr-hero__pattern{ position:absolute; inset:0; background-image:var(--nr-pattern); background-size:80px 80px;
  opacity:.10; z-index:0; }
.nr-hero__arch{ position:absolute; top:18px; left:50%; transform:translateX(-50%); height:calc(100% - 18px);
  width:auto; opacity:.5; z-index:1; pointer-events:none; }
.nr-hero__mosque{ position:absolute; left:50%; bottom:0; transform:translateX(-50%); width:min(760px,94%);
  opacity:.32; z-index:1; pointer-events:none; }
.nr-hero__inner{ position:relative; z-index:2; text-align:center; padding:30px 26px 44px; }
.nr-hero__crest{ width:78px; margin:0 auto 12px; display:block; filter:drop-shadow(0 8px 16px rgba(0,0,0,.4)); }
.nr-hero__eyebrow{ color:var(--nr-gold-soft); letter-spacing:.24em; }
.nr-hero__ayah{ font-family:var(--nr-ar); direction:rtl; color:#fff; font-size:clamp(34px,6vw,58px);
  line-height:1.5; margin:10px 0 2px; text-shadow:0 2px 18px rgba(0,0,0,.35); }
.nr-hero__ayah-tr{ font-family:var(--nr-display); font-style:italic; color:#d8ebe1; font-size:clamp(15px,2vw,18px); }
.nr-hero__ayah-ref{ color:var(--nr-gold-soft); font-size:12px; letter-spacing:.14em; text-transform:uppercase; margin-top:2px; }
.nr-hero .nr-rule::before, .nr-hero .nr-rule::after{ background:var(--nr-gold-soft); opacity:.75; }
.nr-hero .nr-rule i{ color:var(--nr-gold-soft); }
.nr-hero__ar{ font-family:var(--nr-kufi); direction:rtl; color:var(--nr-gold-soft); font-size:22px; }
.nr-hero__en{ font-family:var(--nr-display); font-weight:700; font-size:clamp(26px,3.6vw,40px); color:#fff; margin:4px 0 2px; line-height:1.05; }
.nr-hero__bn{ font-family:var(--nr-bn); font-weight:600; font-size:clamp(17px,2.2vw,22px); color:#e7ddc4; }
.nr-hero__slogan{ max-width:58ch; margin:12px auto 0; color:#cfe4da; }

/* ---------- Values triptych (core ethics) -------------------------- */
.nr-values{ position:relative; z-index:2; margin:0 0 30px; display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.nr-value{ background:var(--nr-cream); border:1px solid var(--nr-line); border-top:3px solid var(--nr-gold);
  border-radius:var(--nr-radius-sm); padding:18px 16px; text-align:center; box-shadow:var(--nr-shadow-sm); }
.nr-value i{ font-size:26px; color:var(--nr-green); }
.nr-value__ar{ font-family:var(--nr-ar); direction:rtl; color:var(--nr-gold-deep); font-size:22px; margin:6px 0 0; }
.nr-value__en{ font-family:var(--nr-display); font-weight:700; font-size:19px; color:var(--nr-green-900); }
.nr-value__desc{ color:var(--nr-muted); font-size:13.5px; margin-top:2px; }

/* ---------- Cards / panels ----------------------------------------- */
.nr-card{ background:var(--nr-cream); border:1px solid var(--nr-line); border-radius:var(--nr-radius);
  box-shadow:var(--nr-shadow-sm); overflow:hidden; }
.nr-card + .nr-card{ margin-top:22px; }
.nr-card__head{ display:flex; align-items:center; gap:10px; padding:13px 18px; background:var(--nr-green);
  border-bottom:1px solid var(--nr-line); }
.nr-card__head h5{ margin:0; font-family:var(--nr-display); font-weight:700; font-size:19px; color:#fff; }
.nr-card__head i{ color:var(--nr-gold-soft); }
.nr-card__body{ padding:16px 18px; }

/* ---------- Left menu (styles injected $dropDownLeftMenu) ----------
   Outer <ul.dropdown-menu> = always-visible panel; li.dropdown-submenu >
   a.dropdown-toggle + nested <ul.dropdown-menu> hidden until hover, flies
   out right (right caret). */
.nr-side-menu > .dropdown-menu{ position:static; display:block; float:none; width:100%; margin:0; padding:6px; list-style:none;
  background:var(--nr-cream); border:1px solid var(--nr-line); border-top:3px solid var(--nr-gold);
  border-radius:var(--nr-radius-sm); box-shadow:var(--nr-shadow-sm); }
.nr-side-menu > .dropdown-menu > li{ position:relative; list-style:none; border-bottom:1px solid var(--nr-line); }
.nr-side-menu > .dropdown-menu > li:last-child{ border-bottom:0; }
.nr-side-menu > .dropdown-menu > li > a,
.nr-side-menu > .dropdown-menu > li > a:link{ display:flex; align-items:center; gap:11px; padding:12px 14px;
  color:var(--nr-green-900); font-family:var(--nr-body); font-weight:600; font-size:14.5px; text-decoration:none;
  transition:padding .18s ease, background .18s ease; }
.nr-side-menu > .dropdown-menu > li > a::before{ content:""; flex:0 0 8px; width:8px; height:8px;
  border:1.5px solid var(--nr-gold); transform:rotate(45deg); }
.nr-side-menu > .dropdown-menu > li > a:hover{ background:var(--nr-cream-2); color:var(--nr-green-700); padding-left:18px; }
.nr-side-menu > .dropdown-menu > li.active > a{ background:var(--nr-green); color:#fff; }
.nr-side-menu > .dropdown-menu > li.active > a::before{ border-color:var(--nr-gold-soft); background:var(--nr-gold-soft); }

.nr-side-menu .dropdown-submenu > a.dropdown-toggle::after{ content:""; display:inline-block; margin-left:auto;
  vertical-align:middle; width:0; height:0; border-top:4px solid transparent; border-bottom:4px solid transparent;
  border-left:5px solid currentColor; border-right:0; opacity:.8; transition:transform .18s ease; }
.nr-side-menu .dropdown-submenu:hover > a.dropdown-toggle::after,
.nr-side-menu .dropdown-submenu > a.dropdown-toggle.open::after{ transform:rotate(90deg); }

.nr-side-menu .dropdown-submenu > .dropdown-menu{ position:absolute; top:-1px; left:100%; z-index:1200; display:none;
  min-width:230px; margin:0; padding:6px; list-style:none; background:var(--nr-cream); border:1px solid var(--nr-line);
  border-top:3px solid var(--nr-gold); border-radius:var(--nr-radius-sm); box-shadow:var(--nr-shadow); }
.nr-side-menu .dropdown-submenu:hover > .dropdown-menu,
.nr-side-menu .dropdown-submenu > .dropdown-menu.show{ display:block; }
.nr-side-menu .dropdown-submenu > .dropdown-menu > li{ list-style:none; }
.nr-side-menu .dropdown-submenu > .dropdown-menu > li > a{ display:block; padding:9px 13px; color:var(--nr-ink);
  font-family:var(--nr-body); font-weight:600; font-size:13.5px; text-decoration:none; }
.nr-side-menu .dropdown-submenu > .dropdown-menu > li > a:hover{ background:var(--nr-cream-2); color:var(--nr-green-700); }
.nr-side-menu .nav-header{ padding:9px 12px 5px; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--nr-muted); }
.nr-side-menu .divider{ height:1px; margin:0; background:var(--nr-line); }

@media (max-width:991px){
  .nr-side-menu .dropdown-submenu > .dropdown-menu{ position:static; display:block; left:auto; min-width:0;
    margin:0 0 6px 22px; padding:2px 0 2px 8px; border:0; border-left:2px solid var(--nr-gold); border-radius:0; box-shadow:none; }
  .nr-side-menu .dropdown-submenu > a.dropdown-toggle::after{ transform:rotate(90deg); }
}

/* ---------- Notice board ------------------------------------------- */
.nr-notice{ padding:0; }
.nr-notice .sidebar-notice-board, .nr-notice ul{ list-style:none; margin:0; padding:0; }
.nr-notice li{ position:relative; padding:13px 4px 13px 20px; border-bottom:1px solid var(--nr-line); font-size:14px; line-height:1.55; }
.nr-notice li:last-child{ border-bottom:0; }
.nr-notice li::before{ content:""; position:absolute; left:2px; top:18px; width:8px; height:8px;
  border:1.5px solid var(--nr-gold); transform:rotate(45deg); }
.nr-notice a{ color:var(--nr-green-900); font-weight:700; }
.nr-notice a:hover{ color:var(--nr-gold-deep); }
.nr-notice .date, .nr-notice small{ display:block; font-family:var(--nr-display); font-style:italic;
  color:var(--nr-muted); font-size:13px; margin-top:3px; }
.nr-notice .bs-docs-sidenav{ box-shadow:none; margin:0; }

/* ---------- Gallery frame ------------------------------------------ */
.nr-gallery{ position:relative; margin-bottom:24px; border-radius:var(--nr-radius); overflow:hidden;
  border:1px solid var(--nr-line); box-shadow:var(--nr-shadow-sm); background:var(--nr-green-900); padding:6px; }
.nr-gallery::after{ content:""; position:absolute; inset:10px; border:1px solid rgba(230,200,106,.45); pointer-events:none; z-index:2; }
.nr-gallery img{ display:block; width:100%; }
.nr-gallery .cycle-slideshow{ width:100%; }

/* ---------- Content wrapper ---------------------------------------- */
.nr-content{ background:var(--nr-cream); border:1px solid var(--nr-line); border-radius:var(--nr-radius);
  box-shadow:var(--nr-shadow-sm); padding:30px 34px; min-height:320px; }
.nr-content .message, .message{ border-radius:6px; padding:12px 16px; margin:0 0 20px; font-weight:600;
  border:1px solid var(--nr-line); border-left:3px solid var(--nr-gold); background:var(--nr-cream-2); color:var(--nr-ink); }
.message.success, .flash-success{ background:#e8f5ee; border-left-color:var(--nr-green); color:var(--nr-green-700); }
.message.error, .cake-error, .flash-error{ background:#f7ecec; border-left-color:#a4443a; color:#8a2f28; }

/* ---------- Footer ------------------------------------------------- */
.nr-footer{ position:relative; margin-top:44px; color:#cfe4da; background:var(--nr-green-900); border-top:3px solid var(--nr-gold); }
.nr-footer__pattern{ position:absolute; inset:0; background-image:var(--nr-pattern); background-size:80px 80px; opacity:.07; }
.nr-footer .nr-container{ position:relative; z-index:1; max-width:var(--nr-container); margin:0 auto; padding:34px 20px 26px; text-align:center; }
.nr-footer__crest{ width:52px; margin:0 auto 12px; display:block; }
.nr-footer__name{ font-family:var(--nr-display); font-weight:700; color:#fff; font-size:22px; margin-bottom:4px; }
.nr-footer__dua{ font-family:var(--nr-ar); direction:rtl; color:var(--nr-gold-soft); font-size:20px; margin-bottom:8px; }
.nr-footer p{ margin:4px 0; font-size:14px; }
.nr-footer a{ color:var(--nr-gold-soft); }
.nr-footer a:hover{ color:#fff; }
.nr-footer small{ display:block; color:#8fb3a4; margin-top:10px; font-size:12px; }

/* ---------- Responsive --------------------------------------------- */
@media (max-width:991px){
  .nr-nav__toggle{ display:inline-block; }
  .nr-nav__row{ flex-wrap:wrap; align-items:stretch; }
  #topmenuUL{ flex-direction:column; width:100%; }
  #topmenuUL > li > a{ padding:13px 4px; border-bottom:1px solid rgba(230,200,106,.15); }
  #topmenuUL > li > a::after{ display:none; }
  #topmenuUL .dropdown-menu{ position:static; box-shadow:none; border:0; border-left:2px solid var(--nr-gold);
    background:rgba(255,255,255,.06); border-radius:0; }
  #topmenuUL .dropdown-menu > li > a{ color:#e6f2ec; }
  #topmenuUL .dropdown-menu > li > a:hover{ background:rgba(255,255,255,.08); color:#fff; }
  .nr-search{ width:100%; margin:0 0 12px; }
  .nr-search #appendedPrependedDropdownButton{ flex:1; width:auto; }
  .nr-nav__collapse{ display:none; width:100%; }
  .nr-nav__collapse.open{ display:block; }
  .nr-values{ grid-template-columns:1fr; }
}
@media (max-width:575px){
  .nr-hero__inner{ padding:24px 16px 34px; }
  .nr-header__spacer, .nr-est{ display:none; }
  .nr-brand__logo{ width:54px; height:54px; flex-basis:54px; }
  .nr-content{ padding:22px 18px; }
}

/* ---------- Motion preferences ------------------------------------- */
@media (prefers-reduced-motion:reduce){ *{ animation-duration:.001ms !important; transition-duration:.001ms !important; } }

/* ---------- Print -------------------------------------------------- */
@media print{
  .nr-utility, .nr-nav, .nr-search, .nr-footer, .nr-hero__mosque, .nr-hero__arch{ display:none !important; }
  body{ background:#fff; }
  .nr-card, .nr-content, .nr-hero, .nr-value{ box-shadow:none; border-color:#ccc; }
}