@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;900&family=DM+Sans:wght@400;500;600&display=swap');

/* ── COLOUR PALETTE ─────────────────────────────────────────────────── */
:root{
  --gold:#c8993a;
  --gold-lt:#fef3c7;
  --ink:#0d1117;
  --cream:#faf7f2;
  --paper:#f3ede3;
  --line:#e5ddd0;
  --mid:#6b7280;
  --blue:#1e3a8a;
  --blue-lt:#dbeafe;
  --green:#166534;
  --green-lt:#dcfce7;
  --red:#9f1239;
  --red-lt:#ffe4e6;
  --purple:#6d28d9;
  --purple-lt:#ede9fe;
  --teal:#0f766e;
  --teal-lt:#ccfbf1;
  --orange:#c2410c;
  --orange-lt:#ffedd5;
}

/* ── BASE ───────────────────────────────────────────────────────────── */
*{box-sizing:border-box}
body{font-family:'DM Sans',sans-serif!important;background:#f8f4ee!important;color:var(--ink)!important;line-height:1.7!important}

/* ── HERO GRADIENT BANNER (top of every page) ───────────────────────── */
body::before{
  content:'';display:block;
  height:6px;
  background:linear-gradient(90deg,#c8993a,#e85d75,#6d28d9,#0f766e,#1e3a8a);
  position:fixed;top:0;left:0;right:0;z-index:9999;
}

/* ── NAVIGATION ─────────────────────────────────────────────────────── */
nav.navbar,.navbar,#wrapper_nav{
  background:#fff!important;
  border-bottom:1px solid var(--line)!important;
  box-shadow:0 2px 16px rgba(0,0,0,.07)!important;
  position:sticky!important;top:6px!important;z-index:998!important;
  padding:0 2%!important;
}
.navbar-brand,.site-title a{
  font-family:'Playfair Display',serif!important;
  font-weight:900!important;color:var(--ink)!important;
  font-size:1.4rem!important;text-decoration:none!important;
}
.navbar-brand::after{
  content:'JAIIB · CAIIB';
  display:inline-block;
  background:linear-gradient(135deg,var(--gold),#e85d75);
  color:#fff!important;font-family:'DM Sans',sans-serif!important;
  font-size:.6rem!important;font-weight:700!important;
  padding:2px 8px;border-radius:4px;
  margin-left:8px;letter-spacing:.06em;
  vertical-align:middle;
}
.navbar-nav .nav-link,#main-menu a{
  font-size:.88rem!important;font-weight:500!important;
  color:var(--mid)!important;border-radius:6px!important;
  transition:all .2s!important;text-decoration:none!important;
  padding:6px 12px!important;
}
.navbar-nav .nav-link:hover,#main-menu a:hover{
  color:#fff!important;
  background:linear-gradient(135deg,var(--gold),#e85d75)!important;
}

/* ── TOPIC COLOUR MAP (for article cards) ───────────────────────────── */
/* Each category gets its own colour — rotates via nth-child */
.blog article:nth-child(6n+1),article.item:nth-child(6n+1){border-left-color:#c8993a!important}
.blog article:nth-child(6n+2),article.item:nth-child(6n+2){border-left-color:#e85d75!important}
.blog article:nth-child(6n+3),article.item:nth-child(6n+3){border-left-color:#6d28d9!important}
.blog article:nth-child(6n+4),article.item:nth-child(6n+4){border-left-color:#0f766e!important}
.blog article:nth-child(6n+5),article.item:nth-child(6n+5){border-left-color:#1e3a8a!important}
.blog article:nth-child(6n+6),article.item:nth-child(6n+6){border-left-color:#c2410c!important}

/* ── ARTICLE CARDS ──────────────────────────────────────────────────── */
.blog article,article.item{
  background:#fff!important;
  border:1px solid var(--line)!important;
  border-left:5px solid var(--gold)!important;
  border-radius:14px!important;
  padding:26px!important;
  margin-bottom:22px!important;
  box-shadow:0 4px 20px rgba(0,0,0,.06)!important;
  transition:transform .25s,box-shadow .25s!important;
  position:relative;overflow:hidden;
}
.blog article::before,article.item::before{
  content:'';position:absolute;
  top:0;right:0;width:80px;height:80px;
  background:radial-gradient(circle at top right,rgba(200,153,58,.08),transparent 70%);
}
.blog article:hover,article.item:hover{
  transform:translateY(-4px)!important;
  box-shadow:0 20px 48px rgba(0,0,0,.12)!important;
}
.blog h2 a,.item-title a,h2.item-title a{
  font-family:'Playfair Display',serif!important;
  font-size:1.2rem!important;font-weight:700!important;
  color:var(--ink)!important;text-decoration:none!important;
  transition:color .2s!important;
}
.blog h2 a:hover,.item-title a:hover{color:var(--gold)!important}

/* ── CATEGORY BADGE ─────────────────────────────────────────────────── */
.article-info dd.category-name a,
.item-category a{
  display:inline-block!important;
  background:var(--gold-lt)!important;
  color:var(--orange)!important;
  font-size:.7rem!important;font-weight:700!important;
  padding:2px 10px!important;border-radius:20px!important;
  text-decoration:none!important;letter-spacing:.04em!important;
  text-transform:uppercase!important;
}

/* ── READ MORE BUTTON ───────────────────────────────────────────────── */
a.readmore,.readmore a{
  display:inline-flex!important;align-items:center!important;gap:6px!important;
  background:linear-gradient(135deg,var(--ink),#1e3a5f)!important;
  color:#fff!important;border:none!important;
  border-radius:8px!important;padding:9px 20px!important;
  font-size:.82rem!important;font-weight:600!important;
  text-decoration:none!important;margin-top:12px!important;
  transition:all .2s!important;
}
a.readmore:hover,.readmore a:hover{
  background:linear-gradient(135deg,var(--gold),#e85d75)!important;
  transform:translateX(4px)!important;
}
a.readmore::after,.readmore a::after{content:'→'!important}

/* ── FULL ARTICLE PAGE ──────────────────────────────────────────────── */
.item-page{
  background:#fff!important;
  border-radius:16px!important;
  border:1px solid var(--line)!important;
  padding:40px 48px!important;
  box-shadow:0 4px 24px rgba(0,0,0,.08)!important;
}
.item-page h1,.page-header h1{
  font-family:'Playfair Display',serif!important;
  font-size:2.2rem!important;font-weight:900!important;color:var(--ink)!important;
  border-bottom:4px solid transparent!important;
  border-image:linear-gradient(90deg,var(--gold),#e85d75,var(--purple)) 1!important;
  padding-bottom:14px!important;margin-bottom:24px!important;
}
.item-page h2{
  font-family:'Playfair Display',serif!important;
  font-size:1.5rem!important;font-weight:700!important;
  color:var(--blue)!important;margin-top:32px!important;
  padding-left:14px!important;
  border-left:4px solid var(--gold)!important;
}
.item-page h3{
  font-family:'Playfair Display',serif!important;
  font-size:1.15rem!important;font-weight:700!important;
  color:var(--teal)!important;margin-top:24px!important;
}
.item-page p{font-size:.95rem!important;line-height:1.85!important;color:#374151!important}

/* ── TABLES ─────────────────────────────────────────────────────────── */
.item-page table{
  width:100%!important;border-collapse:collapse!important;
  font-size:.87rem!important;margin:20px 0!important;
  border-radius:10px!important;overflow:hidden!important;
  box-shadow:0 4px 16px rgba(0,0,0,.08)!important;
}
.item-page table thead{
  background:linear-gradient(135deg,var(--ink),#1e3a5f)!important;
  color:#fff!important;
}
.item-page table th{
  padding:13px 16px!important;font-size:.77rem!important;
  letter-spacing:.06em!important;text-transform:uppercase!important;
}
.item-page table td{padding:10px 16px!important;border-bottom:1px solid var(--line)!important}
.item-page table tr:nth-child(even) td{background:#fafaf8!important}
.item-page table tr:hover td{background:var(--gold-lt)!important}

/* ── BLOCKQUOTE ─────────────────────────────────────────────────────── */
.item-page blockquote{
  border-left:5px solid var(--gold)!important;
  background:linear-gradient(135deg,var(--gold-lt),#fff)!important;
  padding:16px 20px!important;border-radius:0 10px 10px 0!important;
  font-style:italic!important;color:#4b5563!important;margin:20px 0!important;
  box-shadow:0 2px 8px rgba(200,153,58,.12)!important;
}

/* ── SIDEBAR MODULES ────────────────────────────────────────────────── */
.moduletable{
  background:#fff!important;
  border:1px solid var(--line)!important;
  border-radius:14px!important;
  padding:20px!important;margin-bottom:20px!important;
  box-shadow:0 4px 16px rgba(0,0,0,.06)!important;
  overflow:hidden!important;
  position:relative!important;
}
.moduletable::before{
  content:'';position:absolute;
  top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--gold),#e85d75,var(--purple));
}
.moduletable h3{
  font-family:'Playfair Display',serif!important;
  font-size:1rem!important;font-weight:700!important;
  color:var(--ink)!important;margin:8px 0 14px!important;
  padding-bottom:10px!important;
  border-bottom:1px solid var(--line)!important;
}
.moduletable ul.nav{list-style:none!important;padding:0!important;margin:0!important}
.moduletable ul.nav li a{
  display:flex!important;align-items:center!important;gap:8px!important;
  padding:8px 10px!important;border-radius:8px!important;
  font-size:.84rem!important;font-weight:500!important;
  color:var(--mid)!important;text-decoration:none!important;
  transition:all .2s!important;
}
.moduletable ul.nav li a::before{
  content:'›'!important;color:var(--gold)!important;font-weight:700!important;
}
.moduletable ul.nav li a:hover{
  background:var(--gold-lt)!important;color:var(--ink)!important;padding-left:14px!important;
}

/* ── BREADCRUMB ─────────────────────────────────────────────────────── */
.breadcrumb{
  background:transparent!important;padding:12px 0!important;
  font-size:.78rem!important;display:flex!important;flex-wrap:wrap!important;gap:4px!important;
}
.breadcrumb-item a{color:var(--mid)!important;text-decoration:none!important}
.breadcrumb-item a:hover{color:var(--gold)!important}
.breadcrumb-item.active{color:var(--ink)!important;font-weight:600!important}
.breadcrumb-item+.breadcrumb-item::before{color:var(--gold)!important;content:'›'!important}

/* ── PAGINATION ─────────────────────────────────────────────────────── */
ul.pagination{display:flex!important;gap:6px!important;justify-content:center!important;list-style:none!important;padding:0!important;margin:28px 0!important}
ul.pagination .page-link{
  display:flex!important;align-items:center!important;justify-content:center!important;
  width:38px!important;height:38px!important;border-radius:10px!important;
  border:1.5px solid var(--line)!important;font-size:.85rem!important;
  font-weight:600!important;color:var(--mid)!important;
  text-decoration:none!important;transition:all .2s!important;
  background:#fff!important;
}
ul.pagination .page-item.active .page-link,ul.pagination .page-link:hover{
  background:linear-gradient(135deg,var(--gold),#e85d75)!important;
  border-color:transparent!important;color:#fff!important;
}

/* ── TOPIC COLOUR CHIPS (categories list) ───────────────────────────── */
.categories-list li a,.category-list a{
  display:inline-flex!important;align-items:center!important;gap:6px!important;
  border-radius:20px!important;padding:5px 14px!important;
  font-size:.8rem!important;font-weight:600!important;
  text-decoration:none!important;margin:4px!important;
  transition:all .2s!important;
}
.categories-list li:nth-child(6n+1) a{background:var(--gold-lt)!important;color:var(--orange)!important}
.categories-list li:nth-child(6n+2) a{background:var(--red-lt)!important;color:var(--red)!important}
.categories-list li:nth-child(6n+3) a{background:var(--purple-lt)!important;color:var(--purple)!important}
.categories-list li:nth-child(6n+4) a{background:var(--teal-lt)!important;color:var(--teal)!important}
.categories-list li:nth-child(6n+5) a{background:var(--blue-lt)!important;color:var(--blue)!important}
.categories-list li:nth-child(6n+6) a{background:var(--green-lt)!important;color:var(--green)!important}
.categories-list li a:hover{transform:scale(1.05)!important;box-shadow:0 4px 12px rgba(0,0,0,.1)!important}

/* ── BUTTONS ────────────────────────────────────────────────────────── */
.btn-primary{
  background:linear-gradient(135deg,var(--ink),#1e3a5f)!important;
  border:none!important;border-radius:8px!important;
  padding:10px 22px!important;font-weight:600!important;
  transition:all .2s!important;
}
.btn-primary:hover{
  background:linear-gradient(135deg,var(--gold),#e85d75)!important;
  transform:translateY(-2px)!important;box-shadow:0 8px 20px rgba(200,153,58,.3)!important;
}

/* ── SEARCH BOX ─────────────────────────────────────────────────────── */
input[type="text"],input[type="search"]{
  font-family:'DM Sans',sans-serif!important;
  border:2px solid var(--line)!important;border-radius:50px!important;
  padding:10px 18px!important;font-size:.9rem!important;
  background:#fff!important;color:var(--ink)!important;
  transition:border-color .2s,box-shadow .2s!important;
  width:100%!important;
}
input[type="text"]:focus,input[type="search"]:focus{
  border-color:var(--gold)!important;
  box-shadow:0 0 0 4px rgba(200,153,58,.12)!important;
  outline:none!important;
}

/* ── FOOTER ─────────────────────────────────────────────────────────── */
footer,#sp-footer,.footer-wrapper{
  background:linear-gradient(135deg,#0d1117,#1e3a5f)!important;
  color:rgba(255,255,255,.5)!important;
  padding:40px 5% 20px!important;
  border-top:4px solid transparent!important;
  border-image:linear-gradient(90deg,var(--gold),#e85d75,var(--purple)) 1!important;
}
footer a,#sp-footer a{color:var(--gold)!important;text-decoration:none!important;transition:color .2s!important}
footer a:hover,#sp-footer a:hover{color:var(--gold-lt)!important}

/* ── HIGHLIGHT BOXES ────────────────────────────────────────────────── */
.alert-info,.notice{
  background:var(--blue-lt)!important;border:1px solid #93c5fd!important;
  border-radius:10px!important;padding:14px 18px!important;color:var(--blue)!important;
}
.alert-success{
  background:var(--green-lt)!important;border:1px solid #86efac!important;
  border-radius:10px!important;padding:14px 18px!important;color:var(--green)!important;
}
.alert-warning{
  background:var(--gold-lt)!important;border:1px solid #fcd34d!important;
  border-radius:10px!important;padding:14px 18px!important;color:var(--orange)!important;
}

/* ── SELECTION & SCROLLBAR ──────────────────────────────────────────── */
::selection{background:var(--gold)!important;color:#fff!important}
::-webkit-scrollbar{width:8px}
::-webkit-scrollbar-track{background:#f3ede3}
::-webkit-scrollbar-thumb{background:linear-gradient(var(--gold),#e85d75);border-radius:4px}

/* ── RESPONSIVE ─────────────────────────────────────────────────────── */
@media(max-width:768px){
  .item-page{padding:20px 16px!important}
  .item-page h1{font-size:1.6rem!important}
  .blog article{padding:18px!important}
  .navbar-brand::after{display:none!important}
}