:root {
  --bg-primary: #f8fafc;
  --card-bg: #ffffff;
  --text-primary: #0f172a;
  --text-secondary: #64748b;
  --border-color: #eef0f3;
  --accent-blue: #2563eb;
  --accent-blue2: #1d4ed8;
  --correct-bg: #dcfce7;
  --correct-border: #16a34a;
  --correct-text: #14532d;
  --wrong-bg: #fee2e2;
  --wrong-border: #dc2626;
  --wrong-text: #7f1d1d;
}

[data-theme="dark"] {
  --bg-primary: #0b0f19;
  --card-bg: #151d2a;
  --text-primary: #f1f5f9;
  --text-secondary: #94a3b8;
  --border-color: #263346;
  --accent-blue: #3b82f6;
  --accent-blue2: #60a5fa;
  --correct-bg: #064e3b;
  --correct-border: #10b981;
  --correct-text: #ecfdf5;
  --wrong-bg: #7f1d1d;
  --wrong-border: #ef4444;
  --wrong-text: #fef2f2;
}

/* ═══ Mobile-first base ═══ */

.enp-practice-container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 14px 14px 40px;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans Devanagari", sans-serif;
}

.enp-utility-bar { display: flex; justify-content: space-between; align-items: center; padding: 10px 0 14px; }
.btn-theme { min-height: 40px; padding: 6px 14px; border-radius: 20px; border: 1px solid var(--border-color); background: var(--card-bg); color: var(--text-primary); cursor: pointer; font-size: 13px; }
.enp-lang-toggle { background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 20px; padding: 3px; }
.lang-btn { min-height: 34px; padding: 4px 14px; border-radius: 16px; border: none; cursor: pointer; background: transparent; color: var(--text-primary); font-size: 13px; font-weight: 600; }
.lang-btn.active { background: var(--accent-blue); color: #fff; }

.enp-breadcrumbs { font-size: 12.5px; margin-bottom: 14px; color: var(--text-secondary); line-height: 1.6; }
.enp-breadcrumbs a { color: var(--accent-blue); text-decoration: none; }
.enp-breadcrumbs a:hover { text-decoration: underline; }

.enp-practice-container h1 { font-size: 22px; font-weight: 850; line-height: 1.25; margin: 0 0 4px; letter-spacing: -.3px; }
.enp-practice-container > .enp-hero-sub { font-size: 12px; line-height: 1.4; font-weight: 600; color: var(--text-secondary); margin: 0 0 18px; }

/* ═══ Backlit hero — the practice widget/card-grid is the actual point of
   the page, so it gets a glowing spotlight treatment and sits right under
   the H1, above the SEO copy/ad — not buried below a wall of text. ═══ */
.enp-practice-hero {
  position: relative;
  padding: 4px;
  margin: 0 0 24px;
  border-radius: 26px;
}
.enp-practice-hero::before {
  content: "";
  position: absolute;
  inset: -30px -14px;
  z-index: -1;
  background:
    radial-gradient(closest-side, rgba(37,99,235,.28), transparent 75%),
    radial-gradient(closest-side, rgba(245,158,11,.18), transparent 70%) 85% 15% / 55% 55% no-repeat;
  filter: blur(30px);
  opacity: .9;
}
[data-theme="dark"] .enp-practice-hero::before {
  background:
    radial-gradient(closest-side, rgba(59,130,246,.35), transparent 75%),
    radial-gradient(closest-side, rgba(245,158,11,.22), transparent 70%) 85% 15% / 55% 55% no-repeat;
}
.enp-practice-hero > * { position: relative; z-index: 1; }

.enp-practice-hero #enp-practice-app,
.enp-practice-hero .enp-hub-links-inner { padding: 0; margin: 0; max-width: none; }

/* The topic-card deliberately carries NO hero-only override here (removed
   2026-10-30 -- it previously gave pSEO pages a different border/radius/
   shadow than practice-mcq.css's base .pmc-topic-card, so the same widget
   looked like two different cards depending on which page it was on). It
   now renders identically everywhere .pmc-topic-card is used. */
.enp-practice-hero .pmc-badges { margin-top: 0; }

/* Level 1 (no widget yet) — the card grid itself becomes the hero. */
.enp-practice-hero.enp-hub-links .enp-card-grid-hero a {
  border: 1.5px solid rgba(37,99,235,.2);
  box-shadow: 0 8px 24px rgba(37,99,235,.14);
  padding: 20px 20px;
  font-size: 16px;
}
.enp-practice-hero.enp-hub-links .enp-card-grid-hero a::before { flex-basis: 48px; height: 48px; }

.enp-seo-intro { background: var(--card-bg); padding: 18px; border-radius: 16px; margin-bottom: 20px; border: 1px solid var(--border-color); box-shadow: 0 4px 16px rgba(15,23,42,.05); }
.enp-seo-intro h2 { font-size: 16px; font-weight: 800; margin: 0 0 8px; }
.enp-seo-intro h3 { font-size: 14px; font-weight: 800; margin: 16px 0 8px; }
.enp-seo-intro p { font-size: 13.5px; line-height: 1.65; color: var(--text-secondary); margin: 0 0 10px; }
.enp-seo-intro ul { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.9; color: var(--text-secondary); }
.enp-seo-intro li strong { color: var(--text-primary); }

.enp-ad-slot { text-align: center; margin: 18px 0; }

/* ═══ Card grid — exam / post / subject hubs (Level 1 & 2) ═══ */

.enp-hub-links h2 { font-size: 17px; font-weight: 800; margin: 4px 0 12px; }

.enp-card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: .8rem;
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
}

.enp-card-grid li { display: contents; }

.enp-card-grid a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  color: var(--text-primary);
  text-decoration: none;
  font-weight: 700;
  font-size: 14.5px;
  box-shadow: 0 4px 14px rgba(15,23,42,.05);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  min-height: 56px;
}
.enp-card-grid a::before {
  content: "";
  flex: 0 0 40px;
  height: 40px;
  border-radius: 11px;
  background: linear-gradient(135deg, var(--accent-blue) 0%, var(--accent-blue2) 100%);
}
.enp-card-grid a::after {
  content: "→";
  margin-left: auto;
  color: var(--accent-blue);
  font-weight: 800;
  font-size: 16px;
}
.enp-card-grid a:hover { transform: translateY(-2px); box-shadow: 0 12px 26px -8px rgba(37,99,235,.25); border-color: var(--accent-blue); }
.enp-card-grid a:active { transform: scale(.98); }

/* ═══ Sample question preview — compact teaser, not a full repeat of the
   interactive widget below it. Question text + options are shown; the
   correct answer is revealed only in JSON-LD (for search engines), not
   visually, so this section reads as a genuine teaser rather than the
   same full Q&A UI duplicated. ═══ */

.enp-sample-intro { font-size: 13px; color: var(--text-secondary); margin: 0 0 14px; }

.enp-sample-card {
  border: 1px solid var(--border-color);
  background: var(--card-bg);
  padding: 16px;
  margin-bottom: 12px;
  border-radius: 14px;
  box-shadow: 0 4px 14px rgba(15,23,42,.05);
}
.enp-sample-card .badge { background: var(--accent-blue); color: #fff; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.enp-q-text { font-weight: 700; font-size: 14px; margin: 10px 0 0; line-height: 1.5; }
.enp-q-hi { color: var(--text-secondary); font-weight: 500; font-size: 13px; }
.sample-options { font-size: 13px; margin: 10px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; color: var(--text-secondary); }

.enp-sample-cta {
  text-align: center;
  padding: 14px;
  margin: 6px 0 24px;
  border-radius: 14px;
  background: linear-gradient(135deg, #eff6ff, #f8fafc);
  border: 1px dashed var(--accent-blue);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--accent-blue2);
}

/* ═══ FAQ ═══ */

.enp-faq { margin: 24px 0; }
.enp-faq h2 { font-size: 16px; font-weight: 800; margin: 0 0 12px; }
.enp-faq-item { border: 1px solid var(--border-color); border-radius: 12px; margin-bottom: 8px; padding: .8rem 1rem; background: var(--card-bg); }
.enp-faq-item summary { cursor: pointer; font-weight: 700; font-size: 13.5px; list-style: none; min-height: 32px; display: flex; align-items: center; }
.enp-faq-item summary::-webkit-details-marker { display: none; }
.enp-faq-item summary::before { content: "▸ "; color: var(--accent-blue); }
.enp-faq-item[open] summary::before { content: "▾ "; }
.enp-faq-item p { margin: .6rem 0 0; font-size: 13px; line-height: 1.65; color: var(--text-secondary); }

/* ═══ Interactive practice widget ═══ */

.enp-interactive-section { margin: 24px 0; }
.enp-interactive-section h2 { font-size: 17px; font-weight: 800; margin: 0 0 12px; }
.enp-loading { color: var(--text-secondary); font-size: 13.5px; }
.enp-progress { font-size: 12.5px; color: var(--text-secondary); margin-bottom: 8px; font-weight: 600; }
.enp-question-text { font-size: 15.5px; font-weight: 700; margin-bottom: 14px; line-height: 1.5; }

.enp-option-btn { width: 100%; min-height: 50px; padding: 12px 16px; margin-bottom: 9px; background: var(--card-bg); border: 1.5px solid var(--border-color); border-radius: 12px; color: var(--text-primary); font-size: 14px; text-align: left; cursor: pointer; transition: all .15s ease; display: block; }
.enp-option-btn:disabled { cursor: default; }
.enp-option-btn.correct { background-color: var(--correct-bg) !important; border-color: var(--correct-border) !important; color: var(--correct-text) !important; }
.enp-option-btn.wrong { background-color: var(--wrong-bg) !important; border-color: var(--wrong-border) !important; color: var(--wrong-text) !important; }

.enp-explanation { margin-top: 12px; padding: 12px 14px; background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 10px; font-size: 13.5px; line-height: 1.6; }
.enp-nav { display: flex; justify-content: space-between; margin-top: 16px; gap: 10px; }
.enp-nav button { min-height: 46px; padding: 10px 18px; border-radius: 12px; border: none; background: var(--accent-blue); color: #fff; cursor: pointer; font-weight: 700; font-size: 13.5px; flex: 1; }
.enp-nav button:disabled { opacity: .4; cursor: default; }

.enp-interlinking-hub { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--border-color); }
.enp-interlinking-hub h3 { font-size: 15px; font-weight: 800; margin: 0 0 12px; }

.enp-infeed-ad-wrapper { margin: 16px 0; }

/* ═══ Tablet and up ═══ */
@media (min-width: 560px) {
  .enp-practice-container { padding: 20px 20px 50px; }
  .enp-practice-container h1 { font-size: 27px; }
  .enp-card-grid { grid-template-columns: 1fr 1fr; }
  .sample-options { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 820px) {
  .enp-card-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
}


/* Keep the pSEO page's useful context, but compress its header so the active
   practice widget and question occupy more of a phone viewport. */
@media (max-width: 640px) {
  /* The site wrapper adds 14px horizontal + 32px top padding.
     Pull this page outward so its final phone gutters are ~8px, not 26px,
     while retaining a small safe breathing space around the content. */
  .enp-practice-container {
    margin: -20px -14px 0;
    padding: 8px 8px 28px;
  }
  .enp-breadcrumbs { margin-bottom: 8px; font-size: 11.5px; line-height: 1.45; }
  .enp-practice-container h1 { font-size: clamp(19px, 5vw, 22px); line-height: 1.2; margin-bottom: 3px; }
  .enp-practice-container > .enp-hero-sub { font-size: 11px; line-height: 1.35; margin-bottom: 8px; }
  .enp-practice-hero { padding: 0; margin-bottom: 12px; border-radius: 16px; }
  .enp-practice-hero::before { inset: -8px; filter: blur(18px); opacity: .5; }
  .enp-practice-hero #enp-practice-app { padding: 0.25rem 0 0.75rem; }
}