/* =====================================================================
   Oitijhya (ঐতিহ্য · "Heritage") — a distinguished theme for senior
   schools & colleges on the Biddaloy platform.
   CakePHP 2 theme · Bootstrap 5.3 · jQuery 3.7 · Bootstrap Icons
   ---------------------------------------------------------------------
   layout.css — chrome, the crested hero with an engraved façade,
   editorial rules, and the nested side-menu fly-out.
   CMS body typography lives in content.css.
   ===================================================================== */

/* ---------- Design tokens ------------------------------------------ */
:root{
  --oj-navy:     #12234a;   /* midnight navy — primary */
  --oj-navy-700: #1c356b;
  --oj-navy-900: #0c1830;
  --oj-gold:     #c8a24a;   /* antique gold — accent */
  --oj-gold-soft:#e3c983;
  --oj-gold-deep:#9a7c34;
  --oj-wine:     #7a2d3a;   /* deep burgundy — secondary accent */
  --oj-ivory:    #f7f3ea;   /* warm ivory — background */
  --oj-ivory-2:  #efe8d8;
  --oj-ink:      #1e2431;   /* text on ivory */
  --oj-muted:    #6b6656;
  --oj-line:     #ddd2b8;   /* gold-tinted hairline */

  --oj-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --oj-body:    "Libre Franklin", system-ui, -apple-system, "Segoe UI", sans-serif;
  --oj-bn:      "Noto Serif Bengali", Georgia, serif;
  --oj-ar:      "Amiri", "Scheherazade New", serif;

  --oj-radius:   8px;
  --oj-radius-sm:6px;
  --oj-shadow:   0 2px 4px rgba(12,24,48,.06), 0 24px 48px -30px rgba(12,24,48,.45);
  --oj-shadow-sm:0 1px 2px rgba(12,24,48,.05), 0 12px 26px -20px rgba(12,24,48,.40);
  --oj-container: 1200px;
}

/* ---------- Base --------------------------------------------------- */
*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--oj-body);
  color:var(--oj-ink);
  background-color:var(--oj-ivory);
  background-image:
    radial-gradient(circle at 1px 1px, rgba(200,162,74,.10) 1px, transparent 1.6px);
  background-size:22px 22px;
  line-height:1.65;
  font-size:16px;
}
:lang(bn), .language-bn, [lang="bn"]{ font-family:var(--oj-bn); }
:lang(ar), .language-ar, [lang="ar"]{ font-family:var(--oj-ar); direction:rtl; }

a{ color:var(--oj-navy-700); text-decoration:none; transition:color .18s ease; }
a:hover{ color:var(--oj-gold-deep); }
img{ max-width:100%; height:auto; }
h1,h2,h3,h4,h5{ font-family:var(--oj-display); color:var(--oj-navy); line-height:1.15; font-weight:600; letter-spacing:.005em; }
h1:lang(bn),h2:lang(bn),h3:lang(bn),h4:lang(bn),h5:lang(bn){ font-family:var(--oj-bn); font-weight:600; }

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

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

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

/* ---------- Top utility strip -------------------------------------- */
.oj-utility{ background:var(--oj-navy-900); color:#cdd6e6; font-size:12.5px; letter-spacing:.03em;
  border-bottom:1px solid rgba(200,162,74,.25); }
.oj-utility .oj-container{ max-width:var(--oj-container); margin:0 auto; padding:8px 20px;
  display:flex; flex-wrap:wrap; gap:6px 26px; align-items:center; justify-content:space-between; }
.oj-utility a{ color:#e6ddca; }
.oj-utility a:hover{ color:var(--oj-gold-soft); }
.oj-utility .oj-util-group{ display:flex; flex-wrap:wrap; gap:6px 22px; align-items:center; }
.oj-utility i{ color:var(--oj-gold); margin-right:7px; }
.oj-utility .oj-motto{ font-family:var(--oj-display); font-style:italic; font-size:14px; color:var(--oj-gold-soft); letter-spacing:.01em; }

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

/* ---------- Primary navigation (styles injected $dropDownTopMenu) --- */
.oj-nav{ background:var(--oj-navy); border-top:1px solid rgba(200,162,74,.35); border-bottom:1px solid rgba(200,162,74,.35); }
.oj-nav .oj-container{ max-width:var(--oj-container); margin:0 auto; padding:0 20px; }
.oj-nav__row{ display:flex; align-items:center; gap:14px; min-height:50px; }
.oj-nav__toggle{ display:none; background:transparent; border:1px solid rgba(200,162,74,.5); color:var(--oj-gold-soft);
  border-radius:4px; 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:15px 16px;
  color:#dfe6f2; font-family:var(--oj-body); font-weight:600; font-size:12.5px;
  letter-spacing:.14em; text-transform:uppercase; position:relative;
}
#topmenuUL > li > a::after{ content:""; position:absolute; left:16px; right:16px; bottom:9px; height:2px;
  background:var(--oj-gold); transform:scaleX(0); transform-origin:left; 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(--oj-ivory); border:1px solid var(--oj-line); border-top:2px solid var(--oj-gold);
  border-radius:0 0 var(--oj-radius-sm) var(--oj-radius-sm); box-shadow:var(--oj-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(--oj-ink);
  font-family:var(--oj-body); font-weight:500; font-size:14px; letter-spacing:.02em; }
#topmenuUL .dropdown-menu > li > a:hover{ background:var(--oj-ivory-2); color:var(--oj-navy); }
#topmenuUL .divider{ height:1px; margin:6px 14px; background:var(--oj-line); }

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

/* ---------- Hero (crest + engraved façade = the signature) --------- */
.oj-hero{ position:relative; overflow:hidden; margin:26px 0 30px; color:#eef2f8;
  background:radial-gradient(120% 120% at 50% -20%, var(--oj-navy-700), var(--oj-navy) 55%, var(--oj-navy-900));
  border-radius:var(--oj-radius); }
.oj-hero__building{ position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  width:min(860px,96%); opacity:.28; pointer-events:none; z-index:0; }
.oj-hero__frame{ position:relative; z-index:1; margin:16px; padding:34px 28px 40px; text-align:center;
  border:1px solid rgba(200,162,74,.5); }
.oj-hero__frame::before{ content:""; position:absolute; inset:6px; border:1px solid rgba(200,162,74,.22); pointer-events:none; }
.oj-hero__crest{ width:92px; margin:0 auto 12px; display:block; filter:drop-shadow(0 8px 18px rgba(0,0,0,.45)); }
.oj-hero__eyebrow{ color:var(--oj-gold-soft); letter-spacing:.28em; }
.oj-hero__ar{ font-family:var(--oj-ar); direction:rtl; color:var(--oj-gold-soft); font-size:24px; margin:14px 0 2px; }
.oj-hero__en{ font-family:var(--oj-display); font-weight:600; font-size:clamp(32px,5vw,54px);
  color:#fff; margin:6px 0 2px; line-height:1.02; letter-spacing:.01em; }
.oj-hero__bn{ font-family:var(--oj-bn); font-weight:600; font-size:clamp(18px,2.4vw,26px); color:#e7ddca; }
.oj-hero .oj-rule::before, .oj-hero .oj-rule::after{ background:var(--oj-gold-soft); opacity:.7; }
.oj-hero .oj-rule i{ color:var(--oj-gold-soft); }
.oj-hero__slogan{ max-width:60ch; margin:0 auto; color:#cfd8e8; font-family:var(--oj-display);
  font-style:italic; font-size:clamp(17px,2vw,21px); }
.oj-hero__meta{ margin-top:18px; display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.oj-hero__meta .chip{ display:inline-flex; align-items:center; gap:8px; font-size:12.5px; letter-spacing:.04em;
  color:#e7ddca; border:1px solid rgba(200,162,74,.45); padding:7px 14px; border-radius:2px; }
.oj-hero__meta .chip i{ color:var(--oj-gold-soft); }

/* ---------- Cards / panels ----------------------------------------- */
.oj-card{ background:var(--oj-ivory); border:1px solid var(--oj-line); border-radius:var(--oj-radius);
  box-shadow:var(--oj-shadow-sm); overflow:hidden; }
.oj-card + .oj-card{ margin-top:22px; }
.oj-card__head{ display:flex; align-items:center; gap:10px; padding:13px 18px;
  border-bottom:1px solid var(--oj-line); background:var(--oj-navy); }
.oj-card__head h5{ margin:0; font-family:var(--oj-display); font-weight:600; font-size:18px; color:#fff; letter-spacing:.02em; }
.oj-card__head i{ color:var(--oj-gold-soft); }
.oj-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> that
   is hidden until hover and flies out to the right (right caret). */
.oj-side-menu > .dropdown-menu{
  position:static; display:block; float:none; width:100%; margin:0; padding:6px; list-style:none;
  background:var(--oj-ivory); border:1px solid var(--oj-line); border-top:3px solid var(--oj-gold);
  border-radius:var(--oj-radius-sm); box-shadow:var(--oj-shadow-sm); }
.oj-side-menu > .dropdown-menu > li{ position:relative; list-style:none; border-bottom:1px solid var(--oj-line); }
.oj-side-menu > .dropdown-menu > li:last-child{ border-bottom:0; }
.oj-side-menu > .dropdown-menu > li > a,
.oj-side-menu > .dropdown-menu > li > a:link{
  display:flex; align-items:center; gap:10px; padding:12px 14px; color:var(--oj-navy);
  font-family:var(--oj-body); font-weight:600; font-size:14px; letter-spacing:.02em; text-decoration:none;
  transition:padding .18s ease, background .18s ease; }
.oj-side-menu > .dropdown-menu > li > a::before{
  content:""; flex:0 0 6px; width:6px; height:6px; background:var(--oj-gold); transform:rotate(45deg); }
.oj-side-menu > .dropdown-menu > li > a:hover{ background:var(--oj-ivory-2); color:var(--oj-navy-700); padding-left:18px; }
.oj-side-menu > .dropdown-menu > li.active > a{ background:var(--oj-navy); color:#fff; }
.oj-side-menu > .dropdown-menu > li.active > a::before{ background:var(--oj-gold-soft); }

/* right-pointing caret for entries that own a submenu (overrides BS5 down caret) */
.oj-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; }
.oj-side-menu .dropdown-submenu:hover > a.dropdown-toggle::after,
.oj-side-menu .dropdown-submenu > a.dropdown-toggle.open::after{ transform:rotate(90deg); }

/* nested submenu — hidden, flies out to the right on hover */
.oj-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(--oj-ivory); border:1px solid var(--oj-line); border-top:3px solid var(--oj-gold);
  border-radius:var(--oj-radius-sm); box-shadow:var(--oj-shadow); }
.oj-side-menu .dropdown-submenu:hover > .dropdown-menu,
.oj-side-menu .dropdown-submenu > .dropdown-menu.show{ display:block; }
.oj-side-menu .dropdown-submenu > .dropdown-menu > li{ list-style:none; }
.oj-side-menu .dropdown-submenu > .dropdown-menu > li > a{
  display:block; padding:9px 13px; color:var(--oj-ink); font-family:var(--oj-body);
  font-weight:500; font-size:13.5px; text-decoration:none; }
.oj-side-menu .dropdown-submenu > .dropdown-menu > li > a:hover{ background:var(--oj-ivory-2); color:var(--oj-navy-700); }
.oj-side-menu .nav-header{ padding:9px 12px 5px; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--oj-muted); }
.oj-side-menu .divider{ height:1px; margin:0; background:var(--oj-line); }

@media (max-width:991px){
  .oj-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(--oj-gold); border-radius:0; box-shadow:none; }
  .oj-side-menu .dropdown-submenu > a.dropdown-toggle::after{ transform:rotate(90deg); }
}

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

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

/* ---------- Content wrapper ---------------------------------------- */
.oj-content{ background:var(--oj-ivory); border:1px solid var(--oj-line); border-radius:var(--oj-radius);
  box-shadow:var(--oj-shadow-sm); padding:30px 34px; min-height:320px; }
.oj-content .message, .message{ border-radius:4px; padding:12px 16px; margin:0 0 20px; font-weight:500;
  border:1px solid var(--oj-line); border-left:3px solid var(--oj-gold); background:var(--oj-ivory-2); color:var(--oj-ink); }
.message.success, .flash-success{ background:#eef4ee; border-left-color:#4a7a52; color:#2f5a3a; }
.message.error, .cake-error, .flash-error{ background:#f7ecec; border-left-color:var(--oj-wine); color:#7a2d3a; }

/* ---------- Footer ------------------------------------------------- */
.oj-footer{ margin-top:44px; color:#c8d2e4; background:var(--oj-navy-900); border-top:3px solid var(--oj-gold); }
.oj-footer .oj-container{ max-width:var(--oj-container); margin:0 auto; padding:34px 20px 26px; text-align:center; }
.oj-footer__crest{ width:52px; margin:0 auto 12px; display:block; opacity:.95; }
.oj-footer__name{ font-family:var(--oj-display); font-weight:600; color:#fff; font-size:22px; margin-bottom:4px; letter-spacing:.02em; }
.oj-footer__motto{ font-family:var(--oj-display); font-style:italic; color:var(--oj-gold-soft); margin-bottom:12px; }
.oj-footer p{ margin:4px 0; font-size:14px; }
.oj-footer a{ color:var(--oj-gold-soft); }
.oj-footer a:hover{ color:#fff; }
.oj-footer small{ display:block; color:#8fa0bd; margin-top:10px; font-size:12px; letter-spacing:.02em; }

/* ---------- Responsive --------------------------------------------- */
@media (max-width:991px){
  .oj-nav__toggle{ display:inline-block; }
  .oj-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(200,162,74,.15); }
  #topmenuUL > li > a::after{ display:none; }
  #topmenuUL .dropdown-menu{ position:static; box-shadow:none; border:0; border-left:2px solid var(--oj-gold);
    background:rgba(255,255,255,.05); border-radius:0; }
  #topmenuUL .dropdown-menu > li > a{ color:#dfe6f2; }
  #topmenuUL .dropdown-menu > li > a:hover{ background:rgba(255,255,255,.08); color:#fff; }
  .oj-search{ width:100%; margin:0 0 12px; }
  .oj-search #appendedPrependedDropdownButton{ flex:1; width:auto; }
  .oj-nav__collapse{ display:none; width:100%; }
  .oj-nav__collapse.open{ display:block; }
}
@media (max-width:575px){
  .oj-hero__frame{ padding:26px 16px 30px; }
  .oj-header__spacer, .oj-est{ display:none; }
  .oj-brand__logo{ width:54px; height:54px; flex-basis:54px; }
  .oj-content{ padding:22px 18px; }
}

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

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