/* ============================================================
   CodingEasily — Visual Enhancement Layer  (v1.0)
   Loads AFTER style.css. Only enhances tutorial pages so they
   are more attractive & eye-catching for students and teachers.
   Nothing here removes existing behaviour — it layers on top.
   ============================================================ */

/* ---- 1. Eye-catching page title with gradient accent ---- */
.content-header{
  position:relative;
  background:
    radial-gradient(1200px 200px at 0% 0%, rgba(22,163,74,.08), transparent 60%),
    #fff;
  overflow:hidden;
}
.content-header::before{
  content:"";
  position:absolute; left:0; top:0; bottom:0; width:6px;
  background:linear-gradient(180deg,var(--green),var(--gold));
}
.content-title{
  background:linear-gradient(90deg,#0f7a35,#16a34a 55%,#ca8a04);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
.content-level-badge{
  background:linear-gradient(135deg,var(--green),var(--green-dark));
  color:#fff;
  box-shadow:0 6px 16px rgba(22,163,74,.28);
}

/* ---- 2. Numbered, colourful section headings (H2) ---- */
.tutorial-content{counter-reset:h2c;}
.tutorial-content h2{
  position:relative;
  border-bottom:none;
  padding:14px 16px 14px 58px;
  margin:34px 0 16px;
  background:linear-gradient(135deg,var(--green-soft),#ffffff);
  border:1px solid var(--border);
  border-left:5px solid var(--green);
  border-radius:14px;
  box-shadow:var(--shadow-sm);
}
.tutorial-content h2::before{
  counter-increment:h2c;
  content:counter(h2c);
  position:absolute; left:12px; top:50%; transform:translateY(-50%);
  width:34px; height:34px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--green),var(--green-dark));
  color:#fff; font-size:1rem; font-weight:900;
  border-radius:10px;
  box-shadow:0 6px 14px rgba(22,163,74,.3);
}
/* Summary / FAQ headings get a gold accent instead of a number look */
.tutorial-content h2[id^="summary"],
.tutorial-content h2[id^="intro"]{
  border-left-color:var(--gold);
}

/* ---- 3. H3 with a small marker ---- */
.tutorial-content h3{
  position:relative; padding-left:18px;
}
.tutorial-content h3::before{
  content:""; position:absolute; left:0; top:.35em;
  width:8px; height:8px; border-radius:3px;
  background:linear-gradient(135deg,var(--green),var(--gold));
}

/* ---- 4. Code block glow + smoother look ---- */
.code-block-wrap{
  box-shadow:0 14px 34px rgba(15,23,42,.22);
  transition:transform .2s, box-shadow .2s;
}
.code-block-wrap:hover{
  transform:translateY(-2px);
  box-shadow:0 20px 46px rgba(15,23,42,.30);
}
.copy-btn{transition:.18s;}
.copy-btn:active{transform:scale(.94);}

/* ---- 5. Output block — friendlier "terminal" vibe ---- */
.output-block{
  box-shadow:var(--shadow-sm);
}

/* ---- 6. Tables — zebra + hover highlight ---- */
.tutorial-content tbody tr{transition:background .15s;}
.tutorial-content tbody tr:hover td{background:var(--green-soft)!important;}

/* ---- 7. Info boxes — icon pop + lift ---- */
.info-box{
  box-shadow:var(--shadow-sm);
  transition:transform .18s, box-shadow .18s;
}
.info-box:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);}
.info-box .box-title{font-size:1rem;letter-spacing:-.01em;}

/* ---- 8. Practice / tip box highlighted for students ---- */
.info-box.tip{
  background:linear-gradient(135deg,#ecfdf5,#f0fff4);
  border-color:#8fe3ab;
}

/* ---- 9. Links inside content — clearer, underlined on hover ---- */
.tutorial-content a{
  color:var(--green-dark); font-weight:700;
  text-decoration:none; border-bottom:1.5px dotted var(--green);
}
.tutorial-content a:hover{
  color:#0b5f28; border-bottom-style:solid;
}

/* ---- 10. Inline code — slightly bolder for readability ---- */
.tutorial-content code{font-weight:600;}

/* ---- 11. First paragraph after H1 — lead style ---- */
.tutorial-content > p:first-of-type{
  font-size:1.05rem; color:var(--text-primary); font-weight:500;
}

/* ---- 12. Nice focus ring for accessibility (teachers/students on keyboard) ---- */
.tutorial-content a:focus-visible,
.copy-btn:focus-visible,
.lang-tab:focus-visible{
  outline:3px solid var(--gold); outline-offset:2px; border-radius:8px;
}

/* ---- 13. Language tabs — pill highlight ---- */
.lang-tab.active{
  background:linear-gradient(135deg,var(--green),var(--green-dark));
  color:#fff!important; box-shadow:0 4px 12px rgba(22,163,74,.28);
}

/* ---- 14. Smooth scrolling for TOC anchor jumps ---- */
html{scroll-behavior:smooth;}
.tutorial-content h2,.tutorial-content h3{scroll-margin-top:96px;}

/* ---- 15. Mobile: keep numbered headings tidy ---- */
@media(max-width:520px){
  .tutorial-content h2{padding:12px 12px 12px 50px;font-size:1.18rem;}
  .tutorial-content h2::before{width:28px;height:28px;font-size:.85rem;left:10px;}
}

/* ============================================================
   DRY RUN styling — step-by-step execution tables
   Makes "kaunsa step kaise chalega" visual and eye-catching.
   ============================================================ */
.dry-run{
  margin:22px 0;
  border:1px solid var(--border);
  border-radius:16px;
  overflow:hidden;
  box-shadow:var(--shadow-sm);
}
.dry-run-title{
  display:flex; align-items:center; gap:8px;
  background:linear-gradient(135deg,#7c3aed,#a855f7);
  color:#fff; font-weight:900; font-size:.95rem;
  padding:11px 16px;
}
.dry-run-title::before{content:"🔍"; font-size:1.05rem;}
.dry-run table{margin:0!important;border:0!important;border-radius:0!important;width:100%;font-size:.86rem;}
.dry-run th{
  background:#f3e8ff!important;
  color:#6b21a8!important;
  font-weight:900; padding:9px 12px; text-align:center;
  border-bottom:2px solid #e9d5ff;
}
.dry-run td{
  padding:8px 12px; text-align:center;
  border-bottom:1px solid var(--border);
  font-family:var(--font-mono); font-size:.84rem;
  color:var(--text-secondary);
}
.dry-run tr:nth-child(even) td{background:#faf5ff;}
.dry-run tr:hover td{background:#f3e8ff!important;}
.dry-run .di-note{
  background:#faf5ff; color:#6b21a8; font-weight:700;
  font-family:var(--font-body); text-align:left; font-size:.82rem;
}
/* highlight the changing value */
.dry-run .chg{color:#7c3aed;font-weight:900;background:#f3e8ff;border-radius:4px;padding:1px 5px;}
/* the "output so far" cell */
.dry-run .out{color:var(--green-dark);font-weight:800;}

/* Step-by-step vertical explainer (for logic that isn't a loop) */
.steps-flow{margin:22px 0;counter-reset:sf;}
.steps-flow .step{
  position:relative; padding:12px 14px 12px 52px; margin:10px 0;
  background:#fff; border:1px solid var(--border);
  border-left:4px solid var(--green); border-radius:12px;
  box-shadow:var(--shadow-sm);
}
.steps-flow .step::before{
  counter-increment:sf; content:counter(sf);
  position:absolute; left:12px; top:50%; transform:translateY(-50%);
  width:28px; height:28px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--green),var(--green-dark));
  color:#fff; font-weight:900; border-radius:8px; font-size:.85rem;
}
.steps-flow .step b{color:#111827;}

/* ============================================================
   FIX: Code inside code-blocks must NOT get the yellow inline-code
   highlight. Yellow background is only for inline <code> in text.
   Keeps the dark code box clean and premium.
   ============================================================ */
.code-block-wrap pre code,
.code-block-wrap code,
pre code,
.tutorial-content pre code{
  background:transparent!important;
  border:0!important;
  padding:0!important;
  color:inherit!important;
  border-radius:0!important;
  font-weight:400!important;
  box-shadow:none!important;
}
/* Ensure the code box text stays light on dark bg */
.code-block-wrap pre,
.code-block-wrap pre code{
  color:#e2e8f0!important;
}
/* If a lesson uses <pre> without our wrapper, still make it a premium dark box */
.tutorial-content pre:not(.no-box){
  background:var(--bg-code,#0f172a);
  color:#e2e8f0;
  border-radius:14px;
  padding:18px 20px;
  overflow-x:auto;
  box-shadow:0 12px 28px rgba(15,23,42,.18);
  font-family:var(--font-mono);
  font-size:.9rem;
  line-height:1.7;
}
/* selection colour inside code — subtle, not full yellow lines */
.code-block-wrap pre ::selection,
.tutorial-content pre ::selection{background:rgba(250,204,21,.25);}