/* ==========================================================================
   RABBANI — Premium scholarly layer
   A restrained “digital dar al-'ilm”: deep ink-green, parchment, brass detail,
   stronger hierarchy, generous reading measure, and certificate tiers.
   ========================================================================== */

:root {
  --premium-ink: #10271f;
  --premium-emerald: #0b4a38;
  --premium-emerald-2: #13664e;
  --premium-brass: #b58a3b;
  --premium-brass-light: #e7d4a7;
  --premium-paper: #fbf8f0;
  --premium-paper-raised: #fffdf8;
  --premium-shadow: 0 18px 55px rgba(12, 55, 42, .10), 0 2px 10px rgba(12, 55, 42, .05);
}

html[data-rabbani-premium="true"] body {
  background:
    radial-gradient(circle at 12% 3%, rgba(181,138,59,.07), transparent 26rem),
    radial-gradient(circle at 92% 12%, rgba(11,74,56,.045), transparent 30rem),
    var(--ivory);
}

html[data-rabbani-premium="true"] .topnav {
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--gold-300) 45%, var(--line-hair));
  box-shadow: 0 8px 32px rgba(12, 55, 42, .035);
  backdrop-filter: blur(18px) saturate(125%);
}

html[data-rabbani-premium="true"] .brand-mark {
  color: var(--green-900);
  text-shadow: 0 1px 0 rgba(255,255,255,.32);
}

html[data-rabbani-premium="true"] .brand-rule {
  background: linear-gradient(90deg, transparent, var(--gold-500), transparent);
}

html[data-rabbani-premium="true"] .page-header {
  margin-block-end: var(--s-8);
}

html[data-rabbani-premium="true"] .page-header h1 {
  font-family: var(--font-display);
  font-size: clamp(2.05rem, 4vw, 3.1rem);
  font-weight: 700;
  color: var(--green-900);
  letter-spacing: -.02em;
}

html[data-rabbani-premium="true"] .page-header .lead {
  max-width: 44rem;
  color: var(--ink-500);
  font-size: 1.02rem;
}

/* Scientific identity appears before the mechanics of the level system. */
.rabbani-science-identity {
  position: relative;
  overflow: hidden;
  padding: clamp(1.7rem, 4vw, 3.4rem);
  margin-block: var(--s-4) var(--s-10);
  border: 1px solid color-mix(in srgb, var(--gold-500) 42%, var(--line));
  border-radius: clamp(18px, 3vw, 30px);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--green-900) 96%, #000), color-mix(in srgb, var(--green-700) 88%, #10271f));
  color: #f8f3e7;
  box-shadow: 0 24px 70px rgba(7, 48, 36, .18);
}

.rabbani-science-identity::before,
.rabbani-science-identity::after {
  content: '';
  position: absolute;
  width: 17rem;
  height: 17rem;
  border: 1px solid rgba(231,212,167,.18);
  transform: rotate(45deg);
  border-radius: 28%;
  pointer-events: none;
}
.rabbani-science-identity::before { inset-inline-start: -9rem; top: -9rem; }
.rabbani-science-identity::after  { inset-inline-end: -11rem; bottom: -11rem; }

.rabbani-science-identity h2 {
  position: relative;
  z-index: 1;
  margin: .35rem 0 .55rem;
  max-width: 48rem;
  font-family: var(--font-display);
  font-size: clamp(1.65rem, 3vw, 2.45rem);
  line-height: 1.45;
  color: #fffaf0;
}
.rabbani-science-identity p {
  position: relative;
  z-index: 1;
  max-width: 50rem;
  margin: 0;
  color: rgba(255,250,240,.78);
  line-height: 1.9;
}
.premium-kicker,
.premium-cta-eyebrow {
  display: block;
  color: var(--gold-300);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
}

/* Science sections feel like shelves of a serious curriculum, not SaaS tiles. */
html[data-rabbani-premium="true"] .scholarly-card {
  border: 1px solid color-mix(in srgb, var(--gold-300) 24%, var(--line-hair));
  border-radius: 20px;
  background: color-mix(in srgb, var(--surface) 97%, var(--gold-50));
  box-shadow: 0 1px 0 rgba(255,255,255,.6), 0 10px 28px rgba(11,50,39,.035);
}

html[data-rabbani-premium="true"] .scholarly-card > h2 {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.2vw, 1.85rem);
  color: var(--green-900);
}

html[data-rabbani-premium="true"] .learn-science-grid {
  gap: clamp(.7rem, 1.5vw, 1rem);
}

html[data-rabbani-premium="true"] .learn-science-card {
  position: relative;
  overflow: hidden;
  min-height: 7.5rem;
  border: 1px solid color-mix(in srgb, var(--line) 82%, var(--gold-300));
  border-radius: 16px;
  background: linear-gradient(155deg, var(--surface-raised), color-mix(in srgb, var(--surface) 94%, var(--gold-50)));
  box-shadow: 0 6px 18px rgba(11,50,39,.045);
  transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
}
html[data-rabbani-premium="true"] .learn-science-card::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--gold-500), var(--green-600));
  opacity: .62;
}
html[data-rabbani-premium="true"] .learn-science-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--gold-500) 55%, var(--line));
  box-shadow: var(--premium-shadow);
}
html[data-rabbani-premium="true"] .learn-science-title {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--green-900);
}

/* The thirteen levels become secondary disclosure, after the sciences. */
.rabbani-level-overview {
  margin-block-start: var(--s-10);
  background: color-mix(in srgb, var(--surface) 96%, var(--green-50));
}
.rabbani-level-overview > h2 { margin-block-end: .25rem; }
.level-track-disclosure {
  margin-block-start: 1rem;
  border-top: 1px solid var(--line-hair);
  padding-block-start: .75rem;
}
.level-track-disclosure > summary {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 2.75rem;
  color: var(--green-700);
  font-weight: 700;
  list-style: none;
}
.level-track-disclosure > summary::after { content: '⌄'; color: var(--gold-600); }
.level-track-disclosure[open] > summary::after { content: '⌃'; }
.level-track-disclosure .level-track { margin-block-start: 1rem; }

/* Credentials are a first-class learner destination. */
.credentials-premium-cta {
  display: grid;
  gap: .35rem;
  padding: 1.35rem 1.55rem;
  margin-block: 0 var(--s-8);
  color: #fff8e9;
  text-decoration: none;
  border-radius: 18px;
  border: 1px solid rgba(231,212,167,.44);
  background:
    linear-gradient(120deg, rgba(181,138,59,.16), transparent 38%),
    linear-gradient(135deg, #123d31, #0b2f27);
  box-shadow: 0 14px 38px rgba(11,50,39,.15);
}
.credentials-premium-cta strong {
  font-family: var(--font-display);
  font-size: 1.45rem;
  color: #fffaf0;
}
.credentials-premium-cta .premium-cta-detail { color: rgba(255,250,240,.74); }
.credentials-premium-cta:hover { box-shadow: 0 20px 52px rgba(11,50,39,.21); }
.credentials-nav-link::after {
  content: '✦';
  margin-inline-start: .28rem;
  color: var(--gold-500);
  font-size: .7rem;
}

/* Locks and mastery need to be visually unmistakable. */
html[data-rabbani-premium="true"] .learn-node.locked {
  opacity: .78;
}
html[data-rabbani-premium="true"] .learn-node-badge.locked {
  border: 1px solid color-mix(in srgb, var(--locked) 40%, var(--line));
  background: var(--locked-bg);
  box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--surface) 70%, transparent);
}
html[data-rabbani-premium="true"] .learn-node-lock {
  display: block;
  margin-block-start: .35rem;
  color: var(--locked);
  font-size: .82rem;
  line-height: 1.65;
}
html[data-rabbani-premium="true"] .learn-node.mastered .learn-node-badge {
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ok-bg) 75%, transparent);
}

/* Evidence is visually distinct from author prose without looking like admin metadata. */
html[data-rabbani-premium="true"] .learn-step:has(.learn-subhead) .learn-subhead {
  font-family: var(--font-display);
  color: var(--green-800);
}
html[data-rabbani-premium="true"] .learn-step-body {
  font-size: 1.02rem;
}

/* Credential gallery and escalating visual rank. */
.credential-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: 1rem;
}
.credential-card {
  position: relative;
  overflow: hidden;
  min-height: 15rem;
  padding: clamp(1.25rem, 3vw, 2rem);
  border-radius: 20px;
  isolation: isolate;
}
.credential-card::before,
.credential-card::after {
  content: '';
  position: absolute;
  z-index: -1;
  pointer-events: none;
}
.credential-card::before {
  inset: 8px;
  border: 1px solid color-mix(in srgb, var(--gold-500) 38%, transparent);
  border-radius: 14px;
}
.credential-card::after {
  width: 10rem;
  height: 10rem;
  inset-inline-end: -5rem;
  top: -5rem;
  transform: rotate(45deg);
  border: 1px solid color-mix(in srgb, var(--gold-500) 22%, transparent);
}
.credential-card .eyebrow { color: var(--gold-600); font-weight: 800; }
.credential-card h3 { font-family: var(--font-display); color: var(--green-900); }

.credential-tier-classic {
  background: linear-gradient(150deg, #fffdf7, #f7f0df);
  border-color: #dfcfaa;
}
.credential-tier-elevated {
  background:
    linear-gradient(135deg, rgba(181,138,59,.08), transparent 45%),
    linear-gradient(150deg, #fffdf7, #f2ead7);
  border-color: #cbb074;
  box-shadow: 0 12px 34px rgba(105,79,30,.10);
}
.credential-tier-distinction {
  background:
    radial-gradient(circle at 15% 10%, rgba(231,212,167,.28), transparent 36%),
    linear-gradient(145deg, #173e32, #0d2c24);
  border-color: #b58a3b;
  box-shadow: 0 18px 46px rgba(11,50,39,.22);
  color: #f4eddf;
}
.credential-tier-distinction h3,
.credential-tier-distinction .eyebrow { color: #f3dba4; }
.credential-tier-distinction .caption { color: rgba(250,245,232,.76); }

.credential-tier-pinnacle {
  background:
    radial-gradient(circle at 15% 12%, rgba(229,196,119,.26), transparent 32%),
    linear-gradient(140deg, #071d18, #0d4a37 65%, #092a22);
  border: 1px solid #d1aa5d;
  box-shadow: 0 24px 65px rgba(5,35,27,.32), inset 0 0 0 1px rgba(255,241,201,.08);
  color: #fbf4e5;
}
.credential-tier-pinnacle::before { border-width: 2px; border-color: rgba(226,190,111,.62); }
.credential-tier-pinnacle h3 { color: #ffe8ad; font-size: 1.65rem; }
.credential-tier-pinnacle .eyebrow { color: #e8c675; }
.credential-tier-pinnacle .caption { color: rgba(251,244,229,.78); }

.credential-tier-ijazah,
.credential-card.is-ijazah {
  min-height: 18rem;
  background:
    radial-gradient(circle at 50% -10%, rgba(231,201,126,.28), transparent 42%),
    repeating-linear-gradient(45deg, rgba(255,255,255,.018) 0 1px, transparent 1px 12px),
    linear-gradient(140deg, #081a17, #153a30 52%, #261f12);
  border: 1px solid #d8b76e;
  box-shadow: 0 28px 80px rgba(8,31,25,.38), inset 0 0 0 1px rgba(255,235,183,.10);
  color: #fff6e1;
}
.credential-tier-ijazah::before,
.credential-card.is-ijazah::before {
  inset: 10px;
  border: 2px double rgba(232,198,115,.74);
}
.credential-tier-ijazah h3,
.credential-card.is-ijazah h3 { color: #ffe6a8; font-size: 1.75rem; }
.credential-tier-ijazah .eyebrow,
.credential-card.is-ijazah .eyebrow { color: #e6c171; }
.credential-tier-ijazah .caption,
.credential-card.is-ijazah .caption { color: rgba(255,246,225,.78); }

/* Mobile: keep the scientific identity first and the certificate destination
   visible without turning the bottom bar into six cramped items. */
@media (max-width: 760px) {
  .credentials-nav-link { display: none !important; }
  .rabbani-science-identity { padding: 1.45rem; border-radius: 20px; }
  .rabbani-science-identity h2 { font-size: 1.65rem; }
  html[data-rabbani-premium="true"] .learn-science-card { min-height: 6.3rem; }
  .credential-card { min-height: 13.5rem; }
}

/* Dark mode keeps brass warm and backgrounds genuinely dark. */
:root[data-theme="dark"] .credential-tier-classic,
:root[data-theme="dark"] .credential-tier-elevated {
  background: linear-gradient(150deg, #1d2924, #17211d);
  color: var(--ink-700);
}

@media (prefers-reduced-motion: reduce) {
  .learn-science-card,
  .credentials-premium-cta { transition: none !important; transform: none !important; }
}