/* ============================================================
   EASYGRADECALCULATORS.ORG — Grade page styles v2 (colorful)
   Replace the old file with this ONE, site-wide, via:
   Simple Custom CSS and JS plugin -> Add Custom CSS
   (or Appearance -> Customize -> Additional CSS)
   Do NOT paste this into individual pages.

   WHAT'S NEW
   1. Violet hero + grade-band palette (green -> teal -> amber ->
      orange -> red), same "report card stamp" idea as before,
      just louder and more playful.
   2. The 13-row grading table now auto-colors by grade band,
      TOP TO BOTTOM, using nth-child. Zero HTML changes needed
      as long as your rows stay in A+ -> F order.
   3. Optional upgrades (need one small HTML tweak each):

      a) Colorful hero band — wrap eyebrow + h1 + sub:
         <div class="egc-hero">
           <p class="egc-eyebrow">Home > Grade Calculator</p>
           <h1 class="egc-h1">11 out of 30 Test Score</h1>
           <p class="egc-sub">...</p>
         </div>

      b) Colored score panel under the calculator:
         <div class="egc-result egc-result--f">
           <p class="egc-result-headline">36.67% (F)</p>
           <p>You scored 11 out of 30, missing 19 questions...</p>
         </div>
         Swap --f for --a / --b / --c / --d to match the band.

      c) Colored stamp circle — add the same band modifier:
         <div class="egc-stamp egc-stamp--f"> ... </div>
         No modifier = falls back to violet.

   Without (a)/(b)/(c) the page still looks fine — the table
   banding and card styling upgrade on their own.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:wght@500;600;700&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

.egc-grade-page {
  --ink: #241C3D;
  --ink-dark: #150E29;
  --ink-soft: #675F82;
  --gold: #D9A62E;
  --gold-light: #F3D98B;
  --paper: #F5F3FC;
  --paper-line: #E3DEF5;
  --card: #FFFFFF;

  --violet: #5A3FE0;
  --violet-deep: #34208F;
  --violet-light: #8C7CFF;

  --band-a: #1FAE71;  --band-a-bg: #E3F8ED;
  --band-b: #0EA5A0;  --band-b-bg: #E1F7F5;
  --band-c: #D9A62E;  --band-c-bg: #FBF1D6;
  --band-d: #E8752E;  --band-d-bg: #FCE7D6;
  --band-f: #E14F4F;  --band-f-bg: #FBE0DF;
  --fail: var(--band-f);

  font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--ink);
  background: var(--paper);
  max-width: 880px;
  margin: 0 auto;
  padding: 28px 20px 64px;
  line-height: 1.6;
  box-sizing: border-box;
}
.egc-grade-page *, .egc-grade-page *::before, .egc-grade-page *::after { box-sizing: inherit; }
.egc-grade-page h1, .egc-grade-page h2 {
  font-family: 'Fraunces', Georgia, serif;
  color: var(--ink-dark);
  margin: 0 0 8px;
}

/* ---------- Eyebrow / title / sub (default, no hero wrapper) ---------- */
.egc-eyebrow {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
}
.egc-h1 { font-size: clamp(28px, 4vw, 38px); font-weight: 600; }
.egc-sub { color: var(--ink-soft); font-size: 15px; margin: 0 0 28px; }

/* ---------- Optional colorful hero band ---------- */
.egc-hero {
  position: relative;
  overflow: hidden;
  background: radial-gradient(120% 160% at 0% 0%, var(--violet-light) 0%, var(--violet) 42%, var(--violet-deep) 100%);
  border-radius: 18px;
  padding: 32px 28px;
  margin-bottom: 28px;
  isolation: isolate;
}
.egc-hero::before,
.egc-hero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  z-index: 0;
  opacity: 0.55;
  filter: blur(2px);
}
.egc-hero::before {
  width: 180px; height: 180px;
  right: -50px; top: -60px;
  background: radial-gradient(circle at 30% 30%, var(--band-a) 0%, transparent 70%),
              radial-gradient(circle at 70% 70%, var(--band-c) 0%, transparent 70%);
}
.egc-hero::after {
  width: 140px; height: 140px;
  right: 60px; bottom: -70px;
  background: radial-gradient(circle at 40% 40%, var(--band-f) 0%, transparent 70%),
              radial-gradient(circle at 65% 65%, var(--band-b) 0%, transparent 70%);
}
.egc-hero > * { position: relative; z-index: 1; }
.egc-hero .egc-eyebrow { color: var(--gold-light); }
.egc-hero .egc-eyebrow a { color: var(--gold-light); }
.egc-hero .egc-h1 { color: #FFFFFF; }
.egc-hero .egc-sub { color: rgba(255,255,255,0.86); margin-bottom: 4px; }

/* Optional badge cluster inside the hero, e.g.
   <div class="egc-badges">
     <span class="egc-badge egc-badge--a">A</span>
     <span class="egc-badge egc-badge--b">B</span>
     <span class="egc-badge egc-badge--c">C</span>
     <span class="egc-badge egc-badge--d">D</span>
     <span class="egc-badge egc-badge--f">F</span>
   </div> */
.egc-badges {
  position: absolute;
  right: 20px;
  top: 18px;
  z-index: 1;
  display: flex;
  gap: 8px;
}
.egc-badge {
  width: 40px; height: 40px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Fraunces', serif;
  font-weight: 700;
  font-size: 16px;
  color: #fff;
  box-shadow: 0 4px 10px rgba(21,14,41,0.25);
}
.egc-badge--a { background: var(--band-a); transform: translateY(4px) rotate(-6deg); }
.egc-badge--b { background: var(--band-b); transform: translateY(-6px) rotate(4deg); }
.egc-badge--c { background: var(--band-c); transform: translateY(2px) rotate(-3deg); }
.egc-badge--d { background: var(--band-d); transform: translateY(-4px) rotate(6deg); }
.egc-badge--f { background: var(--band-f); transform: translateY(6px) rotate(-4deg); }

/* ---------- Calculator card ---------- */
.egc-calc {
  background: var(--card);
  border: 1px solid var(--paper-line);
  border-radius: 14px;
  padding: 24px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: center;
  margin-bottom: 24px;
  box-shadow: 0 16px 36px -18px rgba(90, 63, 224, 0.28);
}
.egc-inputs { display: grid; gap: 14px; }
.egc-field label {
  display: block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 4px;
}
.egc-field input {
  width: 100%;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 18px;
  padding: 8px 10px;
  border: 1px solid var(--paper-line);
  border-radius: 8px;
  background: var(--paper);
  color: var(--ink-dark);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.egc-field input:focus {
  outline: none;
  border-color: var(--violet);
  box-shadow: 0 0 0 3px rgba(90, 63, 224, 0.18);
}
.egc-incorrect { font-size: 13px; color: var(--ink-soft); }
.egc-incorrect strong { color: var(--ink); font-family: 'IBM Plex Mono', monospace; }

/* ---------- Stamp (default violet, optional band color) ---------- */
.egc-stamp-wrap { display: flex; justify-content: center; }
.egc-stamp {
  width: 138px;
  height: 138px;
  border-radius: 50%;
  border: 3px double var(--violet);
  box-shadow: 0 0 0 4px var(--paper), 0 0 0 5px var(--paper-line);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transform: rotate(-7deg);
  background: var(--card);
}
.egc-stamp-eyebrow {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.16em;
  color: var(--violet);
  margin-bottom: 2px;
}
.egc-stamp-grade {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 34px;
  font-weight: 700;
  color: var(--ink-dark);
  line-height: 1;
}
.egc-stamp-pct {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  color: var(--ink-soft);
  margin-top: 3px;
}
.egc-stamp--a { border-color: var(--band-a); background: var(--band-a-bg); }
.egc-stamp--a .egc-stamp-eyebrow, .egc-stamp--a .egc-stamp-grade { color: var(--band-a); }
.egc-stamp--b { border-color: var(--band-b); background: var(--band-b-bg); }
.egc-stamp--b .egc-stamp-eyebrow, .egc-stamp--b .egc-stamp-grade { color: var(--band-b); }
.egc-stamp--c { border-color: var(--band-c); background: var(--band-c-bg); }
.egc-stamp--c .egc-stamp-eyebrow, .egc-stamp--c .egc-stamp-grade { color: var(--band-c); }
.egc-stamp--d { border-color: var(--band-d); background: var(--band-d-bg); }
.egc-stamp--d .egc-stamp-eyebrow, .egc-stamp--d .egc-stamp-grade { color: var(--band-d); }
.egc-stamp--f { border-color: var(--band-f); background: var(--band-f-bg); }
.egc-stamp--f .egc-stamp-eyebrow, .egc-stamp--f .egc-stamp-grade { color: var(--band-f); }

/* ---------- Optional colored result panel ---------- */
.egc-result {
  border-radius: 12px;
  padding: 18px 20px;
  margin-bottom: 32px;
  background: var(--band-c-bg);
  border-left: 5px solid var(--band-c);
}
.egc-result-headline {
  font-family: 'Fraunces', serif;
  font-weight: 700;
  font-size: 20px;
  color: var(--ink-dark);
  margin: 0 0 6px;
}
.egc-result p { margin: 0; color: var(--ink); font-size: 14px; }
.egc-result--a { background: var(--band-a-bg); border-color: var(--band-a); }
.egc-result--b { background: var(--band-b-bg); border-color: var(--band-b); }
.egc-result--c { background: var(--band-c-bg); border-color: var(--band-c); }
.egc-result--d { background: var(--band-d-bg); border-color: var(--band-d); }
.egc-result--f { background: var(--band-f-bg); border-color: var(--band-f); }

/* ---------- Grading scale table, auto-colored by band ---------- */
.egc-table-wrap { overflow-x: auto; margin-bottom: 36px; border: 1px solid var(--paper-line); border-radius: 12px; }
.egc-table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 480px; }
.egc-table th {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  text-align: left;
  padding: 10px 14px;
  background: var(--violet-deep);
  border-bottom: 1px solid var(--paper-line);
}
.egc-table td {
  padding: 9px 14px;
  border-bottom: 1px solid var(--paper-line);
  font-family: 'IBM Plex Mono', monospace;
}
.egc-table tr:last-child td { border-bottom: none; }
.egc-grade-label { font-family: 'Fraunces', serif; font-weight: 600; }

/* Rows 1-3: A+, A, A- */
.egc-table tbody tr:nth-child(1),
.egc-table tbody tr:nth-child(2),
.egc-table tbody tr:nth-child(3) { background: var(--band-a-bg); }
.egc-table tbody tr:nth-child(1) .egc-grade-label,
.egc-table tbody tr:nth-child(2) .egc-grade-label,
.egc-table tbody tr:nth-child(3) .egc-grade-label { color: var(--band-a); }

/* Rows 4-6: B+, B, B- */
.egc-table tbody tr:nth-child(4),
.egc-table tbody tr:nth-child(5),
.egc-table tbody tr:nth-child(6) { background: var(--band-b-bg); }
.egc-table tbody tr:nth-child(4) .egc-grade-label,
.egc-table tbody tr:nth-child(5) .egc-grade-label,
.egc-table tbody tr:nth-child(6) .egc-grade-label { color: var(--band-b); }

/* Rows 7-9: C+, C, C- */
.egc-table tbody tr:nth-child(7),
.egc-table tbody tr:nth-child(8),
.egc-table tbody tr:nth-child(9) { background: var(--band-c-bg); }
.egc-table tbody tr:nth-child(7) .egc-grade-label,
.egc-table tbody tr:nth-child(8) .egc-grade-label,
.egc-table tbody tr:nth-child(9) .egc-grade-label { color: var(--band-c); }

/* Rows 10-12: D+, D, D- */
.egc-table tbody tr:nth-child(10),
.egc-table tbody tr:nth-child(11),
.egc-table tbody tr:nth-child(12) { background: var(--band-d-bg); }
.egc-table tbody tr:nth-child(10) .egc-grade-label,
.egc-table tbody tr:nth-child(11) .egc-grade-label,
.egc-table tbody tr:nth-child(12) .egc-grade-label { color: var(--band-d); }

/* Row 13: F */
.egc-table tbody tr:nth-child(13) { background: var(--band-f-bg); }
.egc-table tbody tr:nth-child(13) .egc-grade-label { color: var(--band-f); }

/* Score-matching row always wins, on top of band color */
.egc-table tr.egc-current-row td {
  font-weight: 700;
  box-shadow: inset 0 0 0 9999px rgba(255,255,255,0.35);
}
.egc-table tr.egc-current-row td:first-child { border-left: 4px solid var(--ink-dark); }

/* ---------- Similar scores grid: hidden site-wide ---------- */
.egc-similar { display: none; }

/* ---------- Prev/next nav ---------- */
.egc-nav {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid var(--paper-line);
  padding-top: 18px;
  font-size: 14px;
}
.egc-nav a { color: var(--ink); text-decoration: none; font-weight: 600; }
.egc-nav a:hover { color: var(--violet); }
.egc-nav span { display: block; font-size: 11px; color: var(--ink-soft); font-family: 'IBM Plex Mono', monospace; text-transform: uppercase; letter-spacing: 0.06em; }

#article-slot { margin-bottom: 36px; font-size: 15px; }
#article-slot h2 { font-size: 21px; margin-top: 32px; }

@media (max-width: 560px) {
  .egc-calc { grid-template-columns: 1fr; }
  .egc-stamp-wrap { justify-content: flex-start; }
  .egc-badges { position: static; margin-top: 16px; }
  .egc-hero { padding: 24px 20px; }
}