/* ─────────────────────────────────────────────────────────────────
   SE Theme — Article: Single Post · Content · Course Elements
   ───────────────────────────────────────────────────────────────── */

/* ── Article header ──────────────────────────────────────────── */
.se-post-header {
  margin-bottom: var(--s7);
}
.se-post-header .se-breadcrumb { margin-bottom: var(--s4); }

.se-post-category {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--clr-neon);
  margin-bottom: var(--s3);
  text-decoration: none;
  transition: color var(--t-fast);
}
.se-post-category:hover { color: var(--text-bright); }

.se-post-title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 4vw, 2.8rem);
  color: var(--text-bright);
  line-height: 1.15;
  margin-bottom: var(--s4);
}

.se-post-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s3);
  font-family: var(--font-ui);
  font-size: .8rem;
  color: var(--text-dim);
  margin-bottom: var(--s5);
}
.se-post-meta-item {
  display: flex;
  align-items: center;
  gap: 4px;
}
.se-post-meta-sep { color: var(--border-strong); }
.se-post-xp-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(0,255,231,.08);
  border: 1px solid rgba(0,255,231,.2);
  border-radius: 20px;
  padding: 2px 10px;
  font-family: var(--font-mono);
  font-size: .7rem;
  color: var(--clr-neon);
}

/* ── Featured image ───────────────────────────────────────────
   Hero shows the full uploaded image at its natural aspect ratio.
   No forced ratio, no cropping. The container sizes itself to fit
   whatever image is uploaded. This is the right behavior for hand-
   curated infographics where every part of the image is the message. */
.se-post-thumbnail {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  margin-bottom: var(--s6);
  display: block;
}

/* ── Article body content ────────────────────────────────────── */
.entry-content {
  font-size: 1rem;
  line-height: 1.8;
  max-width: 720px;
}
.entry-content > * + * { margin-top: var(--s4); }
.entry-content h2 { margin-top: var(--s7); }
.entry-content h3 { margin-top: var(--s6); }
.entry-content h4 { margin-top: var(--s5); }

/* Scroll anchor offset for sticky header */
.entry-content h2[id],
.entry-content h3[id] {
  scroll-margin-top: calc(var(--header-h) + 32px + var(--s4));
}

/* Heading marker lines */
.entry-content h2 {
  position: relative;
  padding-bottom: var(--s3);
}
.entry-content h2::after {
  content: '';
  display: block;
  height: 1px;
  background: linear-gradient(90deg, var(--clr-neon), transparent);
  margin-top: var(--s3);
  opacity: .4;
}

/* ── Callout / tip / warning boxes (native WP blocks) ─────────── */
.se-callout,
.wp-block-notice,
.notice {
  border-radius: var(--radius);
  padding: var(--s4) var(--s5);
  margin: var(--s5) 0;
  font-size: .9rem;
  border-left: 3px solid;
}
.se-callout--info {
  background: rgba(0,255,231,.04);
  border-color: var(--clr-neon);
  color: var(--text);
}
.se-callout--warn {
  background: rgba(255,230,0,.04);
  border-color: var(--clr-neon3);
}
.se-callout--danger {
  background: rgba(255,45,120,.04);
  border-color: var(--clr-neon2);
}
.se-callout--success {
  background: rgba(0,255,136,.04);
  border-color: var(--clr-green);
}
.se-callout-label {
  font-family: var(--font-ui);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: var(--s2);
}
.se-callout--info .se-callout-label    { color: var(--clr-neon); }
.se-callout--warn .se-callout-label    { color: var(--clr-neon3); }
.se-callout--danger .se-callout-label  { color: var(--clr-neon2); }
.se-callout--success .se-callout-label { color: var(--clr-green); }

/* ── Exercise blocks (the 3 per article: Browser / Hacker) ─────── */
.se-exercise {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--s5);
  margin: var(--s6) 0;
}
.se-exercise-header {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin-bottom: var(--s4);
  padding-bottom: var(--s3);
  border-bottom: 1px solid var(--border);
}
.se-exercise-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.se-exercise--browser .se-exercise-icon { background: rgba(59,158,255,.15); }
.se-exercise--hacker  .se-exercise-icon { background: rgba(0,255,136,.12); }
.se-exercise--think   .se-exercise-icon { background: rgba(255,230,0,.1); }
.se-exercise-title {
  font-family: var(--font-ui);
  font-size: .8rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 700;
}
.se-exercise--browser .se-exercise-title { color: var(--clr-blue); }
.se-exercise--hacker  .se-exercise-title { color: var(--clr-green); }
.se-exercise--think   .se-exercise-title { color: var(--clr-neon3); }
.se-exercise-body { font-size: .9rem; color: var(--text); }
.se-exercise-body ol { margin: var(--s3) 0; }

/* ── Course progress header ──────────────────────────────────── */
.se-course-progress-bar {
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  padding: var(--s3) 0;
  position: sticky;
  top: calc(var(--header-h) + 32px);
  z-index: calc(var(--z-header) - 2);
  backdrop-filter: blur(8px);
}
.se-course-progress-inner {
  display: flex;
  align-items: center;
  gap: var(--s4);
}
.se-course-progress-label {
  font-family: var(--font-ui);
  font-size: .7rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-dim);
  white-space: nowrap;
  flex-shrink: 0;
}
.se-course-progress-track {
  flex: 1;
  height: 4px;
  background: var(--bg3);
  border-radius: 2px;
}
.se-course-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--clr-neon), var(--clr-neon4));
  border-radius: 2px;
  transition: width .8s ease;
  box-shadow: 0 0 10px rgba(0,255,231,.3);
}
.se-course-progress-pct {
  font-family: var(--font-mono);
  font-size: .7rem;
  color: var(--clr-neon);
  flex-shrink: 0;
}

/* ── Author box ──────────────────────────────────────────────── */
.se-author {
  display: flex;
  gap: var(--s5);
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--s5);
  margin-top: var(--s7);
}
.se-av {
  flex-shrink: 0;
}
.se-av img {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 2px solid var(--border);
  object-fit: cover;
}
.se-ai { flex: 1; }
.se-an {
  font-family: var(--font-display);
  font-size: .85rem;
  color: var(--text-bright);
  letter-spacing: 1px;
  margin-bottom: 2px;
}
.se-at {
  font-family: var(--font-ui);
  font-size: .7rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--clr-neon);
  margin-bottom: var(--s3);
}
.se-ab {
  font-size: .875rem;
  color: var(--text-dim);
  line-height: 1.6;
}

/* ── Related / Next lesson nav ───────────────────────────────── */
.se-post-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s4);
  margin-top: var(--s7);
  padding-top: var(--s5);
  border-top: 1px solid var(--border);
}
.se-post-nav-item {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--s4);
  text-decoration: none;
  transition: border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
  display: flex;
  flex-direction: column;
  gap: var(--s1);
}
.se-post-nav-item:hover {
  border-color: var(--border-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
}
.se-post-nav-dir {
  font-family: var(--font-ui);
  font-size: .65rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--text-dim);
  display: flex;
  align-items: center;
  gap: var(--s1);
}
.se-post-nav-dir .arrow { color: var(--clr-neon); }
.se-post-nav-title {
  font-size: .9rem;
  color: var(--text-bright);
  font-family: var(--font-ui);
  font-weight: 600;
}
.se-post-nav-item--next { text-align: right; }

/* ── Social share ────────────────────────────────────────────── */
.se-social-share {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin-top: var(--s6);
  padding-top: var(--s5);
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}
.se-share-label {
  font-family: var(--font-ui);
  font-size: .7rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-right: var(--s2);
}
.se-share-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  padding: 5px 12px;
  border-radius: 20px;
  font-family: var(--font-ui);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .5px;
  text-decoration: none;
  border: 1px solid var(--border);
  background: var(--bg2);
  color: var(--text-dim);
  transition: all var(--t-fast);
  cursor: pointer;
}
.se-share-btn:hover { border-color: var(--border-hover); color: var(--text-bright); }
.se-share-btn--xp {
  border-color: rgba(0,255,231,.2);
  color: var(--clr-neon);
  background: rgba(0,255,231,.06);
}
.se-share-btn--xp:hover { background: rgba(0,255,231,.12); }

/* ── Top-position variant: under featured image, before article body ── */
/* Different spacing than the bottom-of-article variant — no separator    */
/* line needed (image already provides visual break above it), tighter    */
/* to the image, comfortable distance before article body begins.         */
.se-social-share--top {
  margin-top: var(--s3);
  margin-bottom: var(--s5);
  padding-top: 0;
  border-top: 0;
}

/* ── Reading progress bar (top of viewport) ──────────────────── */
.se-reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  background: var(--clr-neon);
  z-index: calc(var(--z-modal) + 1);
  box-shadow: 0 0 8px var(--clr-neon);
  transition: width .1s linear;
  pointer-events: none;
}

/* ══════════════════════════════════════════════════════════════
   ARTICLE REGISTER CTA (logged-out users)
   ══════════════════════════════════════════════════════════════ */
.se-article-reg-cta {
  margin: var(--s7, 40px) 0;
  background: linear-gradient(135deg, rgba(0,255,231,.06) 0%, rgba(123,47,255,.06) 100%);
  border: 1px solid rgba(0,255,231,.2);
  border-radius: var(--radius-lg, 8px);
  padding: var(--s5, 24px) var(--s6, 32px);
}
.se-article-reg-inner {
  display: flex;
  align-items: center;
  gap: var(--s4, 16px);
  flex-wrap: wrap;
}
.se-article-reg-icon {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 256 256%22 width=%22256%22 height=%22256%22%3E%3Cdefs%3E%3ClinearGradient id=%22g%22 x1=%220%22 y1=%220%22 x2=%221%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%2300ffe7%22/%3E%3Cstop offset=%221%22 stop-color=%22%237b2fff%22/%3E%3C/linearGradient%3E%3Cfilter id=%22glow%22 x=%22-30%25%22 y=%22-30%25%22 width=%22160%25%22 height=%22160%25%22%3E%3CfeGaussianBlur stdDeviation=%225%22 result=%22b%22/%3E%3CfeMerge%3E%3CfeMergeNode in=%22b%22/%3E%3CfeMergeNode in=%22SourceGraphic%22/%3E%3C/feMerge%3E%3C/filter%3E%3C/defs%3E%3Cpath d=%22M128 18 L222 52 V126 C222 182 184 222 128 240 C72 222 34 182 34 126 V52 Z%22 fill=%22%2307101a%22 stroke=%22url(%23g)%22 stroke-width=%2212%22 stroke-linejoin=%22round%22 filter=%22url(%23glow)%22/%3E%3Cpath d=%22M128 40 L202 66 V126 C202 170 172 202 128 218%22 fill=%22none%22 stroke=%22%2300ffe7%22 stroke-opacity=%22.18%22 stroke-width=%223%22/%3E%3Cpath d=%22M82 96 L124 128 L82 160%22 fill=%22none%22 stroke=%22%2300ffe7%22 stroke-width=%2217%22 stroke-linecap=%22square%22 stroke-linejoin=%22miter%22 filter=%22url(%23glow)%22/%3E%3Crect x=%22134%22 y=%22148%22 width=%2246%22 height=%2215%22 fill=%22%23ff2d78%22 filter=%22url(%23glow)%22/%3E%3C/svg%3E") center / contain no-repeat;
  font-size: 0;            /* hides the old emoji, shows the brand shield */
  color: transparent;
  filter: drop-shadow(0 0 8px rgba(0,255,231,.45));
}
.se-article-reg-icon > * { display: none; }
.se-article-reg-text {
  flex: 1;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.se-article-reg-text strong {
  font: 700 .95rem/1.3 var(--font-ui, monospace);
  color: var(--text-bright, #e8f4f8);
}
.se-article-reg-text span {
  font: 400 .8rem/1.4 var(--font-ui, monospace);
  color: var(--text-dim, #8899aa);
}
.se-article-reg-btn { white-space: nowrap; flex-shrink: 0; }

@media (max-width: 600px) {
  .se-article-reg-inner { flex-direction: column; text-align: center; }
  .se-article-reg-btn { width: 100%; text-align: center; justify-content: center; }
  .se-article-reg-icon { margin: 0 auto; }
}

/* Phones: the game bar is 24px tall (not 32px), so the sticky course
   bar sits flush under it instead of leaving a see-through gap. */
@media (max-width: 767px) {
  .se-course-progress-bar { top: calc(var(--header-h) + 24px); }
}