@charset "UTF-8";
/* ═══════════════════════════════════════════════════════════════
   Current Affairs – Styles
   Matches Competitive Katta branding (navy / gold palette)
═══════════════════════════════════════════════════════════════ */

:root {
  --ca-navy:         #0d1b3e;
  --ca-blue-dark:    #1a3a5c;
  --ca-blue-mid:     #2563a8;
  --ca-gold:         #f5a623;
  --ca-gold-light:   #fff4db;
  --ca-gold-dark:    #b37300;
  --ca-green:        #1a7f4b;
  --ca-green-light:  #e6f5ed;
  --ca-purple:       #6b3fa0;
  --ca-purple-light: #f2eaf9;
  --ca-gray-bg:      #f4f6fa;
  --ca-white:        #ffffff;
  --ca-text-dark:    #1c2330;
  --ca-text-mid:     #4a5568;
  --ca-text-light:   #718096;
  --ca-border:       #e2e8f0;
  --ca-shadow:       0 2px 14px rgba(0,0,0,0.08);
}


/* ═══════════════════════════════════════════════════════════════
   MONTH LIST PAGE
═══════════════════════════════════════════════════════════════ */

.ca-list-page {
  max-width: 1000px;
  margin: 0 auto;
  padding: 32px 24px 72px;
}

/* Hero */
.ca-list-hero {
  background: linear-gradient(135deg, var(--ca-blue-dark) 0%, var(--ca-navy) 100%);
  border-radius: 16px;
  padding: 32px 28px;
  color: #fff;
  margin-bottom: 32px;
}
.ca-list-hero-inner {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.ca-list-hero-icon { font-size: 52px; line-height: 1; }
.ca-list-title     { font-size: 26px; font-weight: 800; margin: 0 0 4px; }
.ca-list-subtitle  { font-size: 14px; color: rgba(255,255,255,0.7); margin: 0; }

.ca-access-info    { display: flex; gap: 10px; flex-wrap: wrap; }
.ca-access-chip    { padding: 6px 16px; border-radius: 20px; font-size: 13px; font-weight: 600; }
.ca-access-chip.free { background: var(--ca-green-light); color: var(--ca-green); }
.ca-access-chip.paid { background: var(--ca-purple-light); color: var(--ca-purple); }

/* Month grid */
.ca-month-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 18px;
}

.ca-month-card {
  background: var(--ca-white);
  border: 2px solid var(--ca-border);
  border-radius: 14px;
  padding: 20px 18px;
  color: var(--ca-text-dark);
  transition: all 0.2s;
}
.ca-month-card:hover        { transform: translateY(-3px); box-shadow: 0 6px 24px rgba(0,0,0,0.10); }
.ca-month-free:hover        { border-color: var(--ca-green); }
.ca-month-locked:hover      { border-color: var(--ca-purple); }

.ca-month-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}
.ca-month-icon  { font-size: 30px; }
.ca-month-badge {
  font-size: 11px; font-weight: 700;
  padding: 3px 11px; border-radius: 12px;
}
.badge-free { background: var(--ca-green-light); color: var(--ca-green); }
.badge-pass { background: var(--ca-purple-light); color: var(--ca-purple); }

.ca-month-name  { font-size: 20px; font-weight: 800; color: var(--ca-blue-dark); margin-bottom: 4px; }
.ca-month-count { font-size: 13px; color: var(--ca-text-light); margin-bottom: 16px; }

/* Read button */
.ca-read-btn {
  display: inline-block;
  padding: 8px 20px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.15s;
}
.ca-read-free         { background: var(--ca-gold); color: var(--ca-navy); }
.ca-read-free:hover   { background: #e8951a; color: var(--ca-navy); }
.ca-read-pass         { background: var(--ca-purple-light); color: var(--ca-purple); border: 1.5px solid var(--ca-purple); }
.ca-read-pass:hover   { background: var(--ca-purple); color: #fff; }

.ca-empty-hero { text-align: center; padding: 60px 20px; color: var(--ca-text-light); }


/* ═══════════════════════════════════════════════════════════════
   CAPSULE DETAIL PAGE
═══════════════════════════════════════════════════════════════ */

.ca-capsule-page    { min-height: 100vh; background: var(--ca-gray-bg); padding-top: 145px; }

/* ── Header ── */
.ca-capsule-header  {
  background: linear-gradient(135deg, var(--ca-blue-dark) 0%, var(--ca-navy) 100%);
  position: fixed;
  top: var(--topbar-h, 64px);
  left: calc(var(--sidebar-w, 240px) + 12px);
  right: 12px;
  width: auto;
  max-width: none;
  border-radius: 0 0 10px 10px;
  z-index: 90;
}
.ca-capsule-header-inner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 24px;
  max-width: 1140px;
  margin: 0 auto;
  flex-wrap: wrap;
}

.ca-back-btn        { color: rgba(255,255,255,0.7); text-decoration: none; font-size: 13px; font-weight: 600; white-space: nowrap; }
.ca-back-btn:hover  { color: #fff; }

.ca-capsule-brand   { display: flex; align-items: center; gap: 10px; color: #fff; flex: 1; }
.ca-capsule-brand-icon {
  width: 42px; height: 42px;
  background: var(--ca-gold);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 900; color: var(--ca-navy);
  flex-shrink: 0; letter-spacing: -0.5px;
}
.ca-capsule-brand-title { font-size: 15px; font-weight: 800; line-height: 1.2; }
.ca-capsule-brand-sub   { font-size: 11px; color: rgba(255,255,255,0.6); }

.ca-header-badges   { display: flex; gap: 7px; flex-wrap: wrap; }
.ca-badge {
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.2);
  color: #fff;
  padding: 5px 13px; border-radius: 20px;
  font-size: 11px; font-weight: 600; white-space: nowrap;
}
.ca-badge-gold   { background: var(--ca-gold); color: var(--ca-navy); border-color: var(--ca-gold); font-weight: 800; }
.ca-badge-green  { background: #22c55e; color: #fff; border-color: #22c55e; }
.ca-badge-purple { background: var(--ca-purple); border-color: var(--ca-purple); }

/* ── Controls bar (search + filters + mode) ── */
.ca-controls {
  background: var(--ca-white);
  border-bottom: 1px solid var(--ca-border);
  border-left: 1px solid var(--ca-border);
  border-right: 1px solid var(--ca-border);
  padding: 7px 24px;
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: nowrap;
  position: fixed;
  top: calc(var(--topbar-h, 64px) + 58px);
  left: calc(var(--sidebar-w, 240px) + 12px);
  right: 12px;
  width: auto;
  max-width: none;
  z-index: 80;
}

.ca-search-wrap         { position: relative; flex: 0 0 auto; min-width: 160px; max-width: 220px; }
.ca-search-wrap input {
  width: 100%;
  padding: 5px 10px 5px 30px;
  border: 1.5px solid var(--ca-border);
  border-radius: 24px;
  font-size: 12px;
  font-family: inherit;
  background: var(--ca-gray-bg);
  color: var(--ca-text-dark);
  outline: none;
  transition: border-color 0.2s;
}
.ca-search-wrap input::placeholder { color: var(--ca-text-light); }
.ca-search-wrap input:focus         { border-color: var(--ca-blue-mid); background: #fff; }
.ca-search-icon {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--ca-text-light); pointer-events: none; font-size: 14px;
}

.ca-filter-btns { display: flex; gap: 6px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.ca-filter-btns::-webkit-scrollbar { display: none; }
.ca-filter-btn {
  padding: 4px 10px;
  border-radius: 20px;
  border: 1.5px solid var(--ca-border);
  background: #fff;
  font-size: 11px; font-weight: 600;
  color: var(--ca-text-mid);
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: all 0.15s;
}
.ca-filter-btn:hover  { border-color: var(--ca-blue-mid); color: var(--ca-blue-mid); }
.ca-filter-btn.active { background: var(--ca-navy); border-color: var(--ca-navy); color: #fff; }

.ca-mode-btns  { display: flex; gap: 6px; margin-left: auto; margin-right: 8px; }
.ca-mode-btn {
  padding: 4px 10px;
  border-radius: 8px;
  border: 1.5px solid var(--ca-border);
  background: #fff;
  font-size: 11px; font-weight: 700;
  color: var(--ca-text-mid);
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: all 0.15s;
}
.ca-mode-btn.active { background: var(--ca-gold); border-color: var(--ca-gold); color: var(--ca-navy); }

/* ── Stats bar ── */
.ca-stats-bar {
  display: flex;
  gap: 6px;
  padding: 5px 24px;
  align-items: center;
  flex-wrap: nowrap;
  background: #f8f9fb;
  border-bottom: 1px solid var(--ca-border);
  border-left: 1px solid var(--ca-border);
  border-right: 1px solid var(--ca-border);
  border-radius: 0 0 8px 8px;
  position: fixed;
  top: calc(var(--topbar-h, 64px) + 58px + 44px);
  left: calc(var(--sidebar-w, 240px) + 12px);
  right: 12px;
  width: auto;
  max-width: none;
  z-index: 79;
}
.ca-stat-chip {
  background: var(--ca-gray-bg);
  border: 1px solid var(--ca-border);
  border-radius: 6px;
  padding: 3px 10px;
  font-size: 11px;
  color: var(--ca-text-mid);
}
.ca-stat-chip strong { color: var(--ca-blue-dark); }
.ca-expand-btn {
  background: none; border: none;
  color: var(--ca-blue-mid);
  font-size: 11px; font-weight: 700;
  cursor: pointer; margin-left: auto;
  font-family: inherit; text-decoration: underline;
}

/* ── Main content area ── */
.ca-main {
  padding: 0px 24px 72px;
  max-width: 1140px;
  margin: 0 auto;
}

/* ── Category sections ── */
.ca-section {
  margin-bottom: 24px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--ca-shadow);
}

.ca-section-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 18px;
  font-size: 15px; font-weight: 800; color: #fff;
}
.ca-sec-icon  { font-size: 18px; }
.ca-sec-count {
  margin-left: auto;
  background: rgba(255,255,255,0.22);
  padding: 3px 11px; border-radius: 12px;
  font-size: 11px; font-weight: 700;
}

/* Section colours matching screenshots */
.ca-cat-national .ca-section-header { background: #1a3a5c; }
.ca-cat-economy  .ca-section-header { background: #1a7f4b; }
.ca-cat-defence  .ca-section-header { background: #7b2d2d; }
.ca-cat-intl     .ca-section-header { background: #6b3fa0; }
.ca-cat-days     .ca-section-header { background: #b35c00; }
.ca-cat-sports   .ca-section-header { background: #1a6b40; }
.ca-cat-appoints .ca-section-header { background: #2a5298; }
.ca-cat-science  .ca-section-header { background: #5a3e8a; }

.ca-section-body {
  background: #fff;
  border: 1px solid var(--ca-border);
  border-top: none;
  border-radius: 0 0 12px 12px;
}

/* ── News items (accordion) ── */
.ca-news-item {
  border-bottom: 1px solid var(--ca-border);
  transition: background 0.15s;
}
.ca-news-item:last-child { border-bottom: none; }
.ca-news-item:hover      { background: #fafbfd; }

.ca-news-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 18px 12px;
  cursor: pointer;
  user-select: none;
}
.ca-news-number {
  min-width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--ca-gold-light);
  color: var(--ca-gold-dark);
  font-size: 10px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; margin-top: 1px;
}
.ca-news-title {
  flex: 1;
  font-size: 14px; font-weight: 700; line-height: 1.5;
  color: var(--ca-blue-mid);
  transition: filter 0.2s;
}
.ca-news-chevron {
  font-size: 11px; color: var(--ca-text-light);
  margin-top: 4px; flex-shrink: 0;
  transition: transform 0.25s;
}
.ca-news-item.open .ca-news-chevron { transform: rotate(180deg); }

/* Bullet points */
.ca-news-points {
  display: none;
  list-style: none;
  margin: 0;
  padding: 4px 18px 16px 54px;
}
.ca-news-item.open .ca-news-points { display: block; }
.ca-news-points li {
  font-size: 13px; color: var(--ca-text-mid); line-height: 1.7;
  padding: 3px 0 3px 16px; position: relative;
}
.ca-news-points li::before {
  content: '\2022'; position: absolute; left: 0;
  color: var(--ca-gold); font-weight: 800;
}

/* ── Quiz mode ── */
body.ca-quiz-mode .ca-news-item.open .ca-news-points { filter: blur(5px); }
body.ca-quiz-mode .ca-news-item.open:hover .ca-news-points { filter: none; }
body.ca-quiz-mode .ca-quiz-hint               { display: flex !important; }
.ca-quiz-hint {
  display: none;
  align-items: center; gap: 6px;
  padding: 4px 18px 6px 54px;
  font-size: 11px; color: var(--ca-text-light); font-style: italic;
}

/* ── No results ── */
.ca-no-results {
  text-align: center; padding: 60px 20px;
  color: var(--ca-text-light); font-size: 15px;
}
.ca-no-results div { font-size: 44px; margin-bottom: 12px; }


/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .ca-mode-btns { margin-left: 0; }
  .ca-header-badges .ca-badge:not(.ca-badge-gold) { display: none; }
  /* Sidebar collapses on mobile — reset fixed bars to full width */
  .ca-capsule-header,
  .ca-controls,
  .ca-stats-bar {
    left: 0;
  }
}

@media (max-width: 640px) {
  .ca-list-page { padding: 16px 12px 48px; }
  .ca-capsule-header-inner,
  .ca-controls,
  .ca-stats-bar,
  .ca-main { padding-left: 12px; padding-right: 12px; }
  .ca-month-grid { grid-template-columns: 1fr 1fr; }
  .ca-list-title { font-size: 20px; }
  .ca-search-wrap { max-width: 100%; }
}

@media (max-width: 420px) {
  .ca-month-grid { grid-template-columns: 1fr; }
}