/* ICAI Journal — HTML/Bootstrap port. Mirrors the React version's design tokens. */
:root {
  --icai-bg: #ffffff;
  --icai-fg: #1f1f1f;
  --icai-muted: #f3f4f6;
  --icai-muted-fg: #4a5568;
  --icai-border: #e4e7ec;
  --icai-primary: #061a40;        /* deep navy */
  --icai-primary-fg: #ffffff;
  --icai-secondary: #9b1b24;      /* ICAI institutional red */
  --icai-secondary-fg: #ffffff;
  --icai-accent: #c9a24b;          /* Garuda gold */
  --icai-accent-fg: #061a40;
  --icai-saffron: #ff8f1c;
  --icai-india-green: #137333;
  --icai-card: #ffffff;
  --bs-body-font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  --bs-body-color: var(--icai-fg);
  --bs-body-bg: var(--icai-bg);
  --bs-border-color: var(--icai-border);
}
[data-theme="dark"] {
  --icai-bg: #0d1426;
  --icai-fg: #ececec;
  --icai-muted: #18213a;
  --icai-muted-fg: #b6c0d0;
  --icai-border: #2a3553;
  --icai-card: #131c33;
  --icai-primary: #c9a24b;
  --icai-primary-fg: #061a40;
  --icai-secondary: #cf5b65;
  --bs-body-color: var(--icai-fg);
  --bs-body-bg: var(--icai-bg);
  --bs-border-color: var(--icai-border);
}
html, body { font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; background: var(--icai-bg); color: var(--icai-fg); }
h1, h2, h3, h4, h5 { font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-weight: 700; letter-spacing: -0.01em; }
.font-serif { font-family: "Times New Roman", Times, "Liberation Serif", serif; }
.font-sanskrit { font-family: 'Tiro Devanagari Sanskrit', 'Noto Serif Devanagari', serif; font-style: italic; }
.font-mono { font-family: ui-monospace, "Courier New", monospace; }

/* Devanagari import */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+Devanagari:wght@500;600;700&family=Tiro+Devanagari+Sanskrit:ital@0;1&display=swap');

/* Color utilities */
.text-icai-primary { color: var(--icai-primary) !important; }
.text-icai-secondary { color: var(--icai-secondary) !important; }
.text-icai-accent { color: var(--icai-accent) !important; }
.text-icai-muted { color: var(--icai-muted-fg) !important; }
.bg-icai-primary { background: var(--icai-primary) !important; color: var(--icai-primary-fg) !important; }
.bg-icai-secondary { background: var(--icai-secondary) !important; color: var(--icai-secondary-fg) !important; }
.bg-icai-accent { background: var(--icai-accent) !important; color: var(--icai-accent-fg) !important; }
.bg-icai-muted { background: var(--icai-muted) !important; }
.bg-icai-card { background: var(--icai-card) !important; }
.border-icai { border-color: var(--icai-border) !important; }

/* Buttons */
.btn-icai-primary { background: var(--icai-primary); color: #fff; border-color: var(--icai-primary); }
.btn-icai-primary:hover { background: #04122e; color: #fff; }
.btn-icai-outline { background: transparent; color: var(--icai-fg); border: 1px solid var(--icai-border); }
.btn-icai-outline:hover { background: var(--icai-muted); color: var(--icai-fg); }
.btn-accent { background: var(--icai-accent); color: var(--icai-accent-fg); border-color: var(--icai-accent); }
.btn-accent:hover { background: #b48e3a; color: var(--icai-accent-fg); }
.btn-rounded { border-radius: 999px !important; padding-left: 1.1rem; padding-right: 1.1rem; }

/* Tricolour strip */
.tricolour-bar {
  height: 3px;
  background: linear-gradient(to right, var(--icai-saffron) 0% 33.33%, #fff 33.33% 66.66%, var(--icai-india-green) 66.66% 100%);
}
.tricolour-edge {
  height: 3px; width: 96px;
  background: linear-gradient(to right, var(--icai-saffron) 0 32px, #fff 32px 64px, var(--icai-india-green) 64px 96px);
}

/* Label kicker (uppercase tracking) */
.label-kicker { text-transform: uppercase; letter-spacing: 0.18em; font-weight: 700; font-size: .7rem; color: var(--icai-secondary); }

/* Editorial card */
.icai-card { background: var(--icai-card); border: 1px solid var(--icai-border); border-radius: .25rem; }
.editorial-rule { height: 1px; background: var(--icai-border); flex: 1; }
.gold-rule { height: 2px; width: 28px; background: var(--icai-accent); display: inline-block; }

/* Header */
.icai-header { background: rgba(255,255,255,.94); backdrop-filter: blur(10px); border-bottom: 1px solid var(--icai-border); position: sticky; top: 0; z-index: 1040; }
[data-theme="dark"] .icai-header { background: rgba(13,20,38,.92); }
.brand-emblem { height: 44px; width: 44px; background: var(--icai-primary); border-radius: 3px; display: grid; place-items: center; padding: 6px; }
.brand-emblem img { height: 100%; width: 100%; object-fit: contain; }
.brand-title { font-weight: 700; font-size: 17px; color: var(--icai-fg); line-height: 1.2; }
.brand-sub { color: var(--icai-secondary); font-weight: 700; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; }
.nav-link.icai { color: var(--icai-fg); padding: 8px 12px; font-size: 14px; }
.nav-link.icai:hover { color: var(--icai-secondary); }
.icai-input { background: var(--icai-muted); border: 0; border-radius: 999px; padding: 6px 14px; font-size: 14px; }
.icai-input:focus { outline: 2px solid var(--icai-accent); }

/* Issue cover */
.issue-cover { aspect-ratio: 3 / 4; border-radius: 3px; overflow: hidden; position: relative; box-shadow: 0 12px 24px -18px rgba(6,26,64,.3); }
.issue-cover .meta { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 18px; color: inherit; }
.issue-cover .meta .top { display: flex; justify-content: space-between; text-transform: uppercase; letter-spacing: .25em; font-size: 10px; opacity: .8; }
.issue-cover .meta .ttl { font-family: "Times New Roman", serif; font-size: 28px; line-height: 1.05; margin-top: auto; }
.issue-cover .meta .kicker { text-transform: uppercase; letter-spacing: .3em; font-size: 10px; opacity: .8; margin-bottom: 6px; }

/* Article card */
.article-card .thumb { aspect-ratio: 5/3; background: var(--icai-muted); overflow: hidden; border-radius: 3px; }
.article-card .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.article-card:hover .thumb img { transform: scale(1.04); }
.article-card .title { font-family: "Times New Roman", serif; font-size: 18px; line-height: 1.3; color: var(--icai-fg); }
.article-card:hover .title { color: var(--icai-secondary); }
.article-card a { text-decoration: none; }

/* Hero article */
.hero-article { position: relative; aspect-ratio: 16/10; overflow: hidden; border-radius: 3px; background: var(--icai-muted); }
.hero-article img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-article .overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(6,26,64,.85), transparent 60%); color: #fff; padding: 24px; display: flex; flex-direction: column; justify-content: flex-end; }
.hero-article .overlay h3 { font-family: "Times New Roman", serif; font-size: 28px; line-height: 1.15; }

/* Drop cap for article reader */
.dropcap::first-letter { font-family: "Times New Roman", serif; font-size: 4em; float: left; line-height: .85; margin-right: 8px; color: var(--icai-secondary); }

/* Footer */
.icai-footer { background: var(--icai-primary); color: var(--icai-primary-fg); margin-top: 5rem; }
.icai-footer a { color: rgba(255,255,255,.78); text-decoration: none; }
.icai-footer a:hover { color: var(--icai-accent); }
.icai-footer .kicker { color: var(--icai-accent); }

/* Mega menu */
.mega-menu { width: min(92vw, 860px); padding: 24px; }

/* Reading progress */
.reading-progress { position: sticky; top: 64px; height: 3px; background: var(--icai-border); z-index: 1030; }
.reading-progress > i { display:block; height: 100%; background: var(--icai-accent); width: 0%; transition: width .15s; }

/* Animations */
.anim-fade { animation: fade .5s ease both; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Tabs (custom) */
.icai-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--icai-border); overflow-x: auto; }
.icai-tabs button { background: transparent; border: 0; border-bottom: 2px solid transparent; padding: 12px 16px; font-size: 14px; color: var(--icai-muted-fg); white-space: nowrap; }
.icai-tabs button.active { color: var(--icai-secondary); border-bottom-color: var(--icai-secondary); }

/* Flipbook viewer */
.flipbook-stage { position: relative; background: #1a2745; padding: 36px 0; border-radius: 3px; overflow: hidden; }
.flipbook-stage::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(to right, var(--icai-saffron) 0 33.33%, #fff 33.33% 66.66%, var(--icai-india-green) 66.66% 100%); opacity: .8; }
.flipbook-controls { display: flex; gap: 10px; justify-content: center; align-items: center; margin-top: 18px; flex-wrap: wrap; }
.flipbook-ctrl-btn { background: rgba(255,255,255,.08); color: #fff; border: 1px solid rgba(255,255,255,.25); border-radius: 999px; padding: 6px 10px; }
.flipbook-ctrl-btn:hover { background: rgba(255,255,255,.18); }
.flipbook-indicator { background: rgba(255,255,255,.12); color: #fff; padding: 6px 14px; border-radius: 999px; font-size: 14px; font-family: ui-monospace, monospace; }

/* Status badges */
.status-published { background: var(--icai-accent); color: var(--icai-accent-fg); }
.status-scheduled { background: var(--icai-primary); color: #fff; }
.status-review { background: var(--icai-secondary); color: #fff; }
.status-draft { background: var(--icai-muted); color: var(--icai-fg); }
.status-hidden { background: #20242c; color: #fff; }
.status-archived { background: #e5e7eb; color: #1f2937; }

/* Dark mode tweaks for Bootstrap */
[data-theme="dark"] .bg-light { background: var(--icai-muted) !important; color: var(--icai-fg) !important; }
[data-theme="dark"] .card { background: var(--icai-card); color: var(--icai-fg); border-color: var(--icai-border); }
[data-theme="dark"] .btn-icai-outline { color: var(--icai-fg); }
[data-theme="dark"] .icai-input { background: var(--icai-muted); color: var(--icai-fg); }
[data-theme="dark"] .table { color: var(--icai-fg); }

/* Misc */
.grain { position: relative; }
.grain::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .06; mix-blend-mode: multiply; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.7'/></svg>"); }
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.breadcrumb-icai { font-size: 12px; color: var(--icai-muted-fg); }
.breadcrumb-icai a { color: var(--icai-muted-fg); text-decoration: none; }
.breadcrumb-icai a:hover { color: var(--icai-fg); }