/* ============================================================
   Calculator landing pages — surviving rules only
   Trimmed 2026-08-30.
   ------------------------------------------------------------
   This file used to carry an entire .calc-* / .gpa-hero-* design system,
   ~460 lines of it. Coverage testing on 2026-08-30 found only 4 of its 93
   rules matched anything on the page, and a sweep of all six calculator
   landing pages found ZERO .calc-* classes anywhere on the site — that design
   was superseded by the rx-* system in gpa-design-tokens.css. Everything that
   matched nothing was removed; what follows is what was still doing work.
   ============================================================ */

/* #root holds the external React calculator. Measured mounted height on the
   calculator pages is roughly 707px desktop / 732px mobile; reserved slightly
   above that to absorb variance and avoid layout shift. Skeleton/spinner
   styling lives in gpa-design-tokens.css. */
#root { min-height: 720px; }

/* Trusted badge under the calculator card sits on white, not on the hero
   gradient, so it needs the same blue as the active College / High School tab
   (bg-blue-600) rather than the light-on-dark colour the bundle ships. */
.gpa-embed .text-center.mt-8 > .inline-flex.items-center.text-blue-100 {
    color: #2563eb;
}

@media (max-width: 768px) {
    #root { min-height: 745px; }

    /* Rank Math FAQ blocks are still in use on High School, Middle School and
       Cumulative CGPA — the calculators not yet rebuilt on the rx-* structure.
       Remove this once those pages move to rx-faq details blocks. */
    .rank-math-faq-item { padding: 20px !important; }

    .inside-footer-widgets > div { flex: 0 0 48% !important; }
}


/* ============================================================
   Calculator design system — moved here 2026-09-03
   ------------------------------------------------------------
   These rules previously lived in gpa-design-tokens.css, which loads on every
   page of the site. They are all scoped to .page-template-template-calculator,
   so they could only ever match a calculator page — meaning ~34 KB was being
   shipped to roughly 2,000 pages that could never use it.
   calc_page_styles() loads this file on calculator pages only.
   Moved byte-for-byte with source order preserved; nothing was rewritten.
   ============================================================ */


/* COLLEGE GPA CALCULATOR STYLE BEGIN */
/* ============================================================
   GPA Calculator — content section styles  (v2)
   ------------------------------------------------------------
   SCOPE
     .page-template-template-calculator .entry-content

   WHY !important IS BACK (and where)
     The calculator template stylesheet declares
       .content-page .entry-content h2 { font-size / margin-top /
         margin-bottom / color / font-weight … !important }
     and the same for h1, h3, h4, p, a, ul, ol, li, li::before.
     !important cannot be beaten by specificity, so any property
     those rules claim must be re-declared !important here.
     Everything else is left clean.

   TYPE SCALE
     All sizes are bound to the template's own --gpa-* tokens, so
     these sections resize with the rest of the page instead of
     drifting away from it:
       12  --rx-fs-label   (uppercase micro labels, badges)
       14  --gpa-small-size
       16  --gpa-body-size
       17  --gpa-h4-size   (card titles)
       20  --gpa-h3-size
       24  --gpa-h2-size-m
       28  --gpa-h2-size   (section headings, 24 on mobile)
       36  --gpa-h1-size-m (step numerals)

   VERTICAL RHYTHM
     Section spacing comes from .rx-sec only. Every heading and
     paragraph inside a section has its theme margins zeroed, so
     the badge → heading gap is one value (--rx-gap-2) in every
     section, not 48px inherited from the theme h2 rule.
   ============================================================ */


/* ---------- 0. Local tokens ---------- */

.page-template-template-calculator .entry-content {
  --rx-fs-label: 12px;
  --rx-fs-small: var(--gpa-small-size, 14px);
  --rx-fs-body: var(--gpa-body-size, 16px);
    --rx-fs-title:  var(--gpa-h3-size, 24px);
  --rx-fs-lg: var(--gpa-h3-size, 20px);
  --rx-fs-xl: var(--gpa-h2-size-m, 24px);
    --rx-fs-h2:     var(--gpa-h2-size, 36px);
  --rx-fs-num: var(--gpa-h1-size-m, 36px);

  --rx-lh-body: var(--gpa-body-line, 1.7);
  --rx-lh-tight: var(--gpa-h4-line, 1.4);
  --rx-lh-head: var(--gpa-h2-line, 1.3);

  --rx-gap-1: 8px;
  --rx-gap-2: 12px;
  --rx-gap-3: 16px;
  --rx-gap-4: 24px;

  --rx-accent: var(--gpa-purple, #9333ea);
  --rx-accent-2: #8b5cf6;
  --rx-accent-ink: #7c3aed;
  --rx-accent-bg: #ede9fe;
  --rx-accent-bg-soft: #f5f3ff;
  --rx-ink: var(--gpa-text-heading, #111827);
  --rx-body: var(--gpa-text-body, #374151);
  --rx-muted: var(--gpa-text-muted, #6b7280);
  --rx-light: var(--gpa-text-light, #9ca3af);
  --rx-line: var(--gpa-border, #e5e7eb);
  --rx-surface: var(--gpa-bg-white, #fff);
  --rx-surface-2: var(--gpa-bg-gray-50, #f9fafb);
  --rx-surface-3: var(--gpa-bg-gray-100, #f3f4f6);
  --rx-radius: var(--gpa-radius-lg, 16px);
  --rx-radius-sm: var(--gpa-radius-md, 12px);
  --rx-shadow: 0 1px 2px rgba(0, 0, 0, .05);
  --rx-shadow-hover: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1);
}


/* ---------- 1. Section shell ---------- */

.page-template-template-calculator .entry-content .rx-sec { margin-top: 64px; }
.page-template-template-calculator .entry-content .rx-sec.rx-first { margin-top: 56px; }
.page-template-template-calculator .entry-content .rx-sec.rx-related { margin-top: 80px; }

/* Uniform header rhythm — identical in every section regardless of whether
   the editor placed a Spacer block or a .rx-sub paragraph:
      badge → heading   12px
      heading → sub     12px
      header → content  40px
   Editor Spacer blocks inside a section are collapsed so the gap is owned
   by this stylesheet alone. Remove the .wp-block-spacer rule if you would
   rather control that height from the block editor. */
.page-template-template-calculator .entry-content .rx-sec > .wp-block-spacer {
  height: 0 !important;
  margin: 0 !important;
}
.page-template-template-calculator .entry-content .rx-sec > .rx-sub { margin-top: 0 !important; }
.page-template-template-calculator .entry-content .rx-sec > .rx-sub + *:not(.wp-block-spacer),
.page-template-template-calculator .entry-content .rx-sec > .rx-sub + .wp-block-spacer + *,
.page-template-template-calculator .entry-content .rx-sec > .rx-h2 + *:not(.rx-sub):not(.wp-block-spacer),
.page-template-template-calculator .entry-content .rx-sec > .rx-h2 + .wp-block-spacer + * {
  margin-top: 40px !important;
}
.page-template-template-calculator .entry-content .rx-sec > .rx-note { margin-top: 18px !important; }

/* Badge — the gap below it is the ONLY thing between badge and heading */
.page-template-template-calculator .entry-content .rx-eyebrow {
  display: table !important;
  margin: 0 auto var(--rx-gap-2) !important;
  border-radius: var(--gpa-radius-pill, 9999px);
  background: var(--rx-accent-bg);
  padding: 5px 17px;
  font-size: var(--rx-fs-small) !important;
  font-weight: 600 !important;
  color: var(--rx-accent-ink) !important;
  line-height: 1.45 !important;
}
.page-template-template-calculator .entry-content .rx-eyebrow a {
  color: #2563eb;
  font-weight: 600;
  text-decoration: none;
}

/* Section heading — theme's 48px top / 16px bottom margins removed */
.page-template-template-calculator .entry-content .rx-h2 {
  font-size: var(--rx-fs-h2) !important;
    font-weight: 800 !important;
    color: #1E3A8A !important;
    letter-spacing: -0.02em !important;
  line-height: var(--rx-lh-head) !important;
  margin-top: 0 !important;
  margin-bottom: var(--rx-gap-2) !important;
}
.page-template-template-calculator .entry-content .rx-h2 mark{
	background:transparent !important;
}

.page-template-template-calculator .entry-content .rx-sub {
  max-width: 44rem;
  margin: 0 auto !important;
  font-size: var(--rx-fs-body) !important;
  color: var(--rx-muted) !important;
  line-height: var(--rx-lh-body) !important;
}

.page-template-template-calculator .entry-content .rx-note {
  max-width: 44rem;
  margin: 18px auto 0 !important;
  font-size: var(--rx-fs-small) !important;
  font-style: italic;
  color: var(--rx-light) !important;
  line-height: 1.6 !important;
}


/* ---------- 2. Cards & grids ---------- */

.page-template-template-calculator .entry-content .rx-card {
  border: 1px solid var(--rx-line);
  background: var(--rx-surface);
  border-radius: var(--rx-radius);
  padding: var(--rx-gap-4);
  box-shadow: var(--rx-shadow);
}

/* Card title — theme h3 is 20px/600 with 32px top margin; reset to the h4 token */
.page-template-template-calculator .entry-content .rx-card-t {
  font-size: var(--rx-fs-title) !important;
  font-weight: var(--gpa-h4-weight, 700) !important;
  color: var(--rx-ink) !important;
  line-height: var(--rx-lh-tight) !important;
  margin-top: 0 !important;
  margin-bottom: var(--rx-gap-1) !important;
}

/* Card body — theme p carries a 20px bottom margin that pooled at card feet */
.page-template-template-calculator .entry-content .rx-card-b {
  font-size: var(--rx-fs-body) !important;
  color: var(--rx-body) !important;
  line-height: var(--rx-lh-body) !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.page-template-template-calculator .entry-content .rx-card-b + .rx-card-b {
  margin-top: var(--rx-gap-2) !important;
}

.page-template-template-calculator .entry-content .rx-cards {
  gap: var(--rx-gap-4) !important;
  counter-reset: rxstep;
}
.page-template-template-calculator .entry-content .rx-cards .wp-block-column,
.page-template-template-calculator .entry-content .rx-grid2 .wp-block-column {
  flex-basis: 0;
  flex-grow: 1;
}
.page-template-template-calculator .entry-content .rx-grid2 {
  gap: var(--rx-gap-3) !important;
  margin-bottom: var(--rx-gap-3) !important;
}


/* ---------- 3. Numbered steps ---------- */

.page-template-template-calculator .entry-content .rx-step {
  position: relative;
  padding-top: 86px;
  counter-increment: rxstep;
  transition: box-shadow .2s;
}
.page-template-template-calculator .entry-content .rx-step:hover { box-shadow: var(--rx-shadow-hover); }
.page-template-template-calculator .entry-content .rx-step::before {
  content: "";
  position: absolute;
  top: var(--rx-gap-4);
  left: var(--rx-gap-4);
  width: 44px;
  height: 44px;
  border-radius: var(--rx-radius-sm);
  background: var(--rx-ico) center / 22px no-repeat,
              linear-gradient(135deg, var(--rx-accent-2), var(--rx-accent));
  box-shadow: 0 1px 2px rgba(139, 92, 246, .25);
}
.page-template-template-calculator .entry-content .rx-step::after {
  content: counter(rxstep);
  position: absolute;
  top: 21px;
  left: 82px;
  font-size: var(--rx-fs-num);
  font-weight: 700;
  color: var(--rx-surface-3);
  line-height: 1.2;
  transition: color .2s;
}
.page-template-template-calculator .entry-content .rx-step:hover::after { color: var(--rx-accent-bg); }


/* ---------- 4. Feature / exception cards ---------- *
   Icon is 40px tall at 24px from the top → its centre sits at 44px.
   The title line box is 17px × 1.4 = 23.8px, so an 8px top margin
   centres the title against the icon instead of dropping it below.  */

.page-template-template-calculator .entry-content .rx-feat {
  position: relative;
  padding-left: 74px;
  transition: box-shadow .2s;
}
.page-template-template-calculator .entry-content .rx-feat:hover { box-shadow: var(--rx-shadow-hover); }
.page-template-template-calculator .entry-content .rx-feat::before {
  content: "";
  position: absolute;
  top: var(--rx-gap-4);
  left: var(--rx-gap-4);
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: var(--rx-ico) center / 20px no-repeat, var(--rx-accent-bg-soft);
}
.page-template-template-calculator .entry-content .rx-feat > .rx-card-t {
  margin-top: var(--rx-gap-1) !important;
}
.page-template-template-calculator .entry-content .rx-exc::before {
  background: var(--rx-ico) center / 20px no-repeat, #fffbeb;
}


/* ---------- 5. Tables ---------- */

.page-template-template-calculator .entry-content .rx-table {
  border: 1px solid var(--rx-line);
  border-radius: var(--rx-radius);
  /* 2026-08-30: was `overflow: hidden`, which clipped the 5-column sample
     table (474px wide) inside its 292px container on phones — the Grade Points
     and Quality Points columns were unreachable, with no way to scroll to them.
     overflow-x:auto lets it scroll; overflow-y:hidden keeps the rounded corners
     clipped exactly as before. */
  overflow-x: auto;
  overflow-y: hidden;
  box-shadow: var(--rx-shadow);
  margin: 0;
}
.page-template-template-calculator .entry-content .rx-table table {
  border-collapse: collapse;
  width: 100%;
  background: var(--rx-surface);
  margin: 0;
}
.page-template-template-calculator .entry-content .rx-table table,
.page-template-template-calculator .entry-content .rx-table thead,
.page-template-template-calculator .entry-content .rx-table tbody,
.page-template-template-calculator .entry-content .rx-table tr {
  border: none !important;
  box-shadow: none !important;
}
.page-template-template-calculator .entry-content .rx-table thead th {
  background: var(--rx-surface-2) !important;
    color: #6B7280 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
  line-height: var(--rx-lh-tight) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.7px !important;
  text-align: left !important;
  padding: 14px var(--rx-gap-3) !important;
  border: none !important;
}
.page-template-template-calculator .entry-content .rx-table thead th:not(:first-child) {
  text-align: center !important;
}
.page-template-template-calculator .entry-content .rx-table td {
  padding: 13px var(--rx-gap-3) !important;
  border: none !important;
  border-top: 1px solid var(--rx-surface-3) !important;
  color: var(--rx-body) !important;
  font-size: var(--rx-fs-body) !important;
  line-height: var(--rx-lh-tight) !important;
  text-align: center !important;
}
.page-template-template-calculator .entry-content .rx-table td:first-child {
  text-align: left !important;
  font-weight: 500 !important;
  color: var(--rx-ink) !important;
}
.page-template-template-calculator .entry-content .rx-table tbody tr:last-child td {
  background: var(--rx-surface-2) !important;
  font-weight: 700 !important;
  color: var(--rx-ink) !important;
}
.page-template-template-calculator .entry-content .rx-scale td:first-child {
  text-align: center !important;
  font-weight: 700 !important;
  color: var(--rx-ink) !important;
}
.page-template-template-calculator .entry-content .rx-table mark {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 6px;
  font-size: var(--rx-fs-small) !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
}


/* ---------- 6. Formula block & result ---------- */

.page-template-template-calculator .entry-content .rx-formula {
  border: 1px solid var(--rx-line);
  border-radius: var(--rx-radius);
  background: linear-gradient(135deg, var(--rx-surface), var(--rx-surface-2));
  padding: 32px !important;
  text-align: center;
  box-shadow: var(--rx-shadow);
}
.page-template-template-calculator .entry-content .rx-formula .rx-h2 { margin-bottom: 0 !important; }

.page-template-template-calculator .entry-content .rx-pill {
  display: table !important;
  margin: var(--rx-gap-3) auto var(--rx-gap-4) !important;
  background: var(--gpa-bg-dark, #111827);
  color: #fff !important;
  border-radius: var(--rx-radius-sm);
  padding: var(--rx-gap-3) var(--rx-gap-4);
  font-size: var(--rx-fs-lg) !important;
  font-weight: 700 !important;
  line-height: var(--rx-lh-tight) !important;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .12);
}

.page-template-template-calculator .entry-content .rx-defs { gap: var(--rx-gap-2) !important; }
.page-template-template-calculator .entry-content .rx-def {
  border: 1px solid var(--rx-line);
  border-radius: var(--rx-radius-sm);
  background: var(--rx-surface);
  padding: var(--rx-gap-3);
  text-align: left;
}
.page-template-template-calculator .entry-content .rx-def-t {
  font-size: var(--rx-fs-label) !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--rx-accent-ink) !important;
  line-height: 1.5 !important;
  margin: 0 0 4px !important;
}
.page-template-template-calculator .entry-content .rx-def-b {
  font-size: var(--rx-fs-body) !important;
  color: var(--rx-body) !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}

.page-template-template-calculator .entry-content .rx-result {
  display: table !important;
  margin: 20px auto 0 !important;
  background: linear-gradient(90deg, var(--rx-accent-2), var(--rx-accent));
  color: #fff !important;
  border-radius: var(--rx-radius-sm);
  padding: 14px 22px;
  text-align: center;
  box-shadow: 0 1px 3px rgba(139, 92, 246, .3);
  font-size: var(--rx-fs-label) !important;
  font-weight: 500 !important;
  text-transform: uppercase;
  letter-spacing: .03em;
  line-height: 1.5 !important;
  opacity: .95;
}
.page-template-template-calculator .entry-content .rx-result strong {
  display: block;
  font-size: var(--rx-fs-xl) !important;
  font-weight: 700 !important;
  line-height: var(--rx-lh-head) !important;
  color: #fff !important;
  text-transform: none;
  letter-spacing: normal;
  opacity: 1;
}


/* ---------- 7. GPA meaning rows ---------- */

.page-template-template-calculator .entry-content .rx-meaning {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--rx-gap-3) !important;
  border: 1px solid var(--rx-line);
  border-radius: var(--rx-radius-sm);
  background: var(--rx-surface);
  padding: var(--rx-gap-3) 20px !important;
  box-shadow: var(--rx-shadow);
  margin-bottom: var(--rx-gap-2) !important;
}
.page-template-template-calculator .entry-content .rx-meaning > .wp-block-group__inner-container {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--rx-gap-3);
  flex: 1;
  padding: 0;
}
.page-template-template-calculator .entry-content .rx-meaning .rx-mrange {
  flex: 0 0 224px;
  margin: 0 !important;
}
.page-template-template-calculator .entry-content .rx-meaning .rx-mdesc {
  flex: 1 1 0;
  min-width: 0;
  margin: 0 !important;
  font-size: var(--rx-fs-body) !important;
  color: var(--rx-body) !important;
  line-height: var(--rx-lh-body) !important;
}
.page-template-template-calculator .entry-content .rx-mrange mark {
  display: inline-block;
  padding: 4px 10px;
  border-radius: var(--rx-gap-1);
  font-size: var(--rx-fs-body) !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
}


/* ---------- 8. FAQ accordion ---------- */

.page-template-template-calculator .entry-content .rx-faqwrap {
  max-width: 48rem;
  margin: 0 auto;
}
.page-template-template-calculator .entry-content .rx-faq {
  border: 1px solid var(--rx-line);
  border-radius: var(--rx-radius-sm);
  background: var(--rx-surface);
  box-shadow: var(--rx-shadow);
  margin: 0 0 var(--rx-gap-2);
  overflow: hidden;
}
.page-template-template-calculator .entry-content .rx-faq summary {
  cursor: pointer;
  list-style: none;
  padding: var(--rx-gap-3) 48px var(--rx-gap-3) 50px;
  font-size: var(--rx-fs-body);
  font-weight: 600;
  color: var(--rx-ink);
  line-height: 1.6;
  position: relative;
  transition: background-color .2s;
}
.page-template-template-calculator .entry-content .rx-faq summary:hover { background: var(--rx-surface-2); }
.page-template-template-calculator .entry-content .rx-faq summary::-webkit-details-marker { display: none; }
.page-template-template-calculator .entry-content .rx-faq summary::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 18px;
  width: 20px;
  height: 20px;
  background: var(--rx-q) center / contain no-repeat;
  opacity: .3;
  transition: opacity .2s;
}
.page-template-template-calculator .entry-content .rx-faq[open] summary::before { opacity: 1; }
.page-template-template-calculator .entry-content .rx-faq summary::after {
  content: "";
  position: absolute;
  right: 18px;
  top: 19px;
  width: 18px;
  height: 18px;
  background: var(--rx-chev) center / contain no-repeat;
  transition: transform .3s;
}
.page-template-template-calculator .entry-content .rx-faq[open] summary::after { transform: rotate(180deg); }
.page-template-template-calculator .entry-content .rx-faq > *:not(summary) {
  margin: 0 !important;
  padding: 0 20px 18px 50px;
  font-size: var(--rx-fs-body) !important;
  color: var(--rx-body) !important;
  line-height: var(--rx-lh-body) !important;
}


/* ---------- 9. Related links ---------- */

.page-template-template-calculator .entry-content .rx-rel { gap: var(--rx-gap-4) !important; }
.page-template-template-calculator .entry-content .rx-relcard {
  border: 1px solid var(--rx-line);
  border-radius: var(--rx-radius);
  background: var(--rx-surface);
  padding: var(--rx-gap-4);
  box-shadow: var(--rx-shadow);
}
.page-template-template-calculator .entry-content .rx-relcard h3 {
  font-size: var(--rx-fs-title) !important;
  font-weight: var(--gpa-h4-weight, 700) !important;
  color: var(--rx-ink) !important;
  line-height: var(--rx-lh-tight) !important;
  margin-top: 0 !important;
  margin-bottom: 4px !important;
  padding-left: 52px;
  position: relative;
  min-height: 40px;
  display: flex;
  align-items: center;
}
.page-template-template-calculator .entry-content .rx-relcard h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 40px;
  height: 40px;
  border-radius: var(--rx-radius-sm);
  background: var(--rx-ico) center / 20px no-repeat, var(--rx-accent-bg-soft);
}
.page-template-template-calculator .entry-content .rx-relsub {
  font-size: var(--rx-fs-small) !important;
  color: var(--rx-light) !important;
  line-height: 1.5 !important;
  margin: 0 0 var(--rx-gap-1) !important;
  padding-left: 52px;
}

.page-template-template-calculator .entry-content .rx-rellist {
  list-style: disc outside;
  margin: 0;
  padding-left: 1.5rem;
}
.page-template-template-calculator .entry-content .rx-rellist li {
  display: list-item;
  margin: 0 0 8px;
  padding: 0;
}
.page-template-template-calculator .entry-content .rx-rellist li:first-child {
  border-top: 0;
}
.page-template-template-calculator .entry-content .rx-rellist li::before,
.page-template-template-calculator .entry-content .rx-rellist li::marker {
  content: normal;
}
.page-template-template-calculator .entry-content .rx-rellist a {
  display: inline;
  font-size: 17px;
  font-weight: 500;
  color: #2563eb;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.page-template-template-calculator .entry-content .rx-rellist a:hover {
  color: #1d4ed8;
}
.page-template-template-calculator .entry-content .rx-rellist a::after {
  content: "";
  width: var(--rx-gap-3);
  height: var(--rx-gap-3);
  flex: 0 0 var(--rx-gap-3);
  background: var(--rx-ext) center / contain no-repeat;
  opacity: .45;
  transition: opacity .2s, transform .2s;
}
.page-template-template-calculator .entry-content .rx-rellist a:hover::after {
  opacity: 1;
  transform: translateX(2px);
}

/* Related-tools rows for calculators that do not exist yet: rendered as
   plain text (no <a>) so nothing 404s. Match the linked rows’ metrics so both
   columns keep the same rhythm and the badge stays right-aligned. */
.page-template-template-calculator .entry-content .rx-rellist li:not(:has(a)) {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 13px 0 !important;
  font-size: var(--rx-fs-body) !important;
  font-weight: 500 !important;
  color: var(--rx-body) !important;
}
.page-template-template-calculator .entry-content .rx-rellist mark,
.page-template-template-calculator .entry-content .rx-tag {
  margin-left: auto;
  white-space: nowrap;
  font-size: var(--rx-fs-label) !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: .05em;
  line-height: 1.6 !important;
  border-radius: 6px;
  padding: 2px 8px;
}
.page-template-template-calculator .entry-content .rx-tag {
  color: var(--rx-accent-ink);
  background: var(--rx-accent-bg);
}


/* ---------- 10. About block ---------- */

.page-template-template-calculator .entry-content .rx-about h2 {
    font-size: var(--rx-fs-h2) !important;
    font-weight: 800 !important;
    color: #1E3A8A !important;
    letter-spacing: -0.02em !important;
  line-height: var(--rx-lh-head) !important;
  margin-top: 0 !important;
  margin-bottom: var(--rx-gap-3) !important;
  padding-left: 53px;
  position: relative;
  min-height: 40px;
  display: flex;
  align-items: center;
}
.page-template-template-calculator .entry-content .rx-about h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 40px;
  height: 40px;
  border-radius: var(--rx-radius-sm);
  background: var(--rx-ico) center / 24px no-repeat, var(--rx-accent-bg-soft);
}


/* ---------- 11. Icon tokens (inline SVG data URIs) ---------- */

.page-template-template-calculator .entry-content .rx-i-cap {
  --rx-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237c3aed' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.42 10.92a1 1 0 0 0-.02-1.84L12.83 5.18a2 2 0 0 0-1.66 0L2.6 9.08a1 1 0 0 0 0 1.83l8.57 3.91a2 2 0 0 0 1.66 0z'/%3E%3Cpath d='M22 10v6'/%3E%3Cpath d='M6 12.5V16a6 3 0 0 0 12 0v-3.5'/%3E%3C/svg%3E");
}
.page-template-template-calculator .entry-content .rx-i-pen {
  --rx-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4z'/%3E%3C/svg%3E");
}
.page-template-template-calculator .entry-content .rx-i-card {
  --rx-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='5' width='20' height='14' rx='2'/%3E%3Cpath d='M2 10h20'/%3E%3C/svg%3E");
}
.page-template-template-calculator .entry-content .rx-i-calc {
  --rx-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='2' width='16' height='20' rx='2'/%3E%3Cpath d='M8 6h8'/%3E%3Cpath d='M8 10h.01'/%3E%3Cpath d='M12 10h.01'/%3E%3Cpath d='M16 10h.01'/%3E%3Cpath d='M8 14h.01'/%3E%3Cpath d='M12 14h.01'/%3E%3Cpath d='M16 14v4'/%3E%3Cpath d='M8 18h.01'/%3E%3Cpath d='M12 18h.01'/%3E%3C/svg%3E");
}
.page-template-template-calculator .entry-content .rx-i-trophy {
  --rx-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b5cf6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9H4.5a2.5 2.5 0 0 1 0-5H6'/%3E%3Cpath d='M18 9h1.5a2.5 2.5 0 0 0 0-5H18'/%3E%3Cpath d='M4 22h16'/%3E%3Cpath d='M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22'/%3E%3Cpath d='M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22'/%3E%3Cpath d='M18 2H6v7a6 6 0 0 0 12 0V2z'/%3E%3C/svg%3E");
}
.page-template-template-calculator .entry-content .rx-i-brief {
  --rx-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b5cf6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 20V4a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16'/%3E%3Crect x='2' y='6' width='20' height='14' rx='2'/%3E%3C/svg%3E");
}
.page-template-template-calculator .entry-content .rx-i-flask {
  --rx-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b5cf6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 2v7.31'/%3E%3Cpath d='M14 9.3V1.99'/%3E%3Cpath d='M8.5 2h7'/%3E%3Cpath d='M14 9.3a6.5 6.5 0 1 1-4 0'/%3E%3Cpath d='M5.52 16h12.96'/%3E%3C/svg%3E");
}
.page-template-template-calculator .entry-content .rx-i-flaskv {
  --rx-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237c3aed' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 2v7.31'/%3E%3Cpath d='M14 9.3V1.99'/%3E%3Cpath d='M8.5 2h7'/%3E%3Cpath d='M14 9.3a6.5 6.5 0 1 1-4 0'/%3E%3Cpath d='M5.52 16h12.96'/%3E%3C/svg%3E");
}
.page-template-template-calculator .entry-content .rx-i-info {
  --rx-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f59e0b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E");
}
.page-template-template-calculator .entry-content .rx-faq {
  --rx-q: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237c3aed' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
  --rx-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
.page-template-template-calculator .entry-content .rx-rellist a {
  display: inline;
  font-size: 17px;
  font-weight: 500;
  color: #2563eb;
  text-decoration: underline;
  text-underline-offset: 2px;
}


/* ---------- 12. Responsive ---------- */

@media (max-width: 768px) {
  .page-template-template-calculator .entry-content .rx-h2 {
    font-size: var(--gpa-h2-size-m, 24px) !important;
  }
  .page-template-template-calculator .entry-content .rx-about h2 {
    font-size: var(--gpa-h3-size-m, 18px) !important;
  }
}

@media (max-width: 781px) {
  .page-template-template-calculator .entry-content .rx-sec { margin-top: 48px; }
  .page-template-template-calculator .entry-content .rx-sec.rx-related { margin-top: 56px; }
  .page-template-template-calculator .entry-content .rx-meaning .rx-mrange { flex: 1 1 100%; }
}

.page-template-template-calculator :is(.site-content,.container.hfeed){
	max-width:100% !important;
	width:100% !important;
}

.page-template-template-calculator .site-main article .inside-article .entry-header h1.entry-title{
	text-align:center !important;
	color:#fff !important;
}

.page-template-template-calculator   .site-main{
	margin:0 !important;
}
/* ---------- 13. Paragraph body size — design guide body scale ---------- */
/* ---------- 13. Paragraph body size — 0.875rem ---------- */
 
.page-template-template-calculator.page-template-template-calculator p.rx-card-b,
.page-template-template-calculator.page-template-template-calculator p.rx-sub,
.page-template-template-calculator.page-template-template-calculator p.rx-mdesc,
.page-template-template-calculator.page-template-template-calculator p.rx-def-b,
.page-template-template-calculator.page-template-template-calculator .rx-relsub,
.page-template-template-calculator.page-template-template-calculator .rx-faq p {
    font-size: var(--rx-fs-body) !important;
}

 
/* ============================================================
   14. HERO BAND
   ------------------------------------------------------------
   Tailwind source:
     relative overflow-hidden bg-gradient-to-br
     from-violet-600 via-purple-600 to-indigo-700
     pb-28 pt-14 sm:pb-32 sm:pt-20
 
   The page's Tailwind classes are inert — no Tailwind build is
   loaded — and the template deliberately neutralises the React
   hero (.gpa-embed .gpa-chrome { display:none !important } and
   .gpa-embed .gpa-hero-band { background-image:none !important }).
   So the band is rebuilt here around the elements that are
   actually visible: the theme's h1.entry-title and the first
   centred paragraph of .entry-content.
 
   The badge is generated with .entry-header::before — no markup
   change needed. Edit the `content` string to change its text.
 
   BAND HEIGHT
     .entry-header::after is the band. Its height is
       header height (badge + h1, auto — survives h1 wrapping)
       + --rx-hero-tail  (subtitle height + the pb-28/32 padding)
     Only the tail is a fixed number. If the subtitle is edited to
     a very different length, adjust --rx-hero-tail.
   ============================================================ */
 
.page-template-template-calculator.page-template-template-calculator .inside-article {
  position: relative;
  overflow: hidden;
  padding-top: 0 !important;
}
 
.page-template-template-calculator.page-template-template-calculator .entry-header {
  position: relative;
  z-index: 0;
  padding: 80px 20px 0;          /* sm:pt-20 */
  margin-bottom: 0;
}
 
/* The gradient band + the white wave that closes it */
.page-template-template-calculator.page-template-template-calculator .entry-header::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: calc(100% + var(--rx-hero-tail));
  z-index: 0;
  pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0 80V40C240 10 480 10 720 30C960 50 1200 50 1440 30V80H0Z' fill='%23ffffff'/%3E%3C/svg%3E")
      bottom center / 100% 88px no-repeat,
    linear-gradient(to bottom right, #7c3aed 0%, #9333ea 50%, #4338ca 100%);
}
 
/* Badge above the heading */
.page-template-template-calculator.page-template-template-calculator .entry-header::before {
 counter-reset: updated-year var(--updated-year, 2026);
  content: "Updated for " counter(updated-year);
  position: relative;
  z-index: 1;
  display: table;
  margin: 0 auto 20px;
  padding: 5px 18px 5px 42px;
  border-radius: 9999px; 
  background: rgba(255, 255, 255, .16)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.42 10.92a1 1 0 0 0-.02-1.84L12.83 5.18a2 2 0 0 0-1.66 0L2.6 9.08a1 1 0 0 0 0 1.83l8.57 3.91a2 2 0 0 0 1.66 0z'/%3E%3Cpath d='M22 10v6'/%3E%3Cpath d='M6 12.5V16a6 3 0 0 0 12 0v-3.5'/%3E%3C/svg%3E")
    no-repeat 18px center / 16px;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 20px;
  white-space: nowrap;
}
 
/* Heading — beats body:not(.home):not(.single-colleges) h1.entry-title (0,3,2) */
.page-template-template-calculator.page-template-template-calculator .inside-article h1.entry-title {
  position: relative;
  z-index: 1;
  color: #fff !important;
  margin-bottom: 20px !important;
}
 
.page-template-template-calculator.page-template-template-calculator .entry-content {
  position: relative;
  z-index: 1;
  margin-top: 0 !important;
}
 
/* Sub-heading, and the 60px that lets the calculator card overlap the wave */
.page-template-template-calculator.page-template-template-calculator .entry-content > p.has-text-align-center:first-child {
  max-width: 640px;
  margin: 0 auto 60px !important;
  font-size: var(--gpa-body-lg-size, 18px) !important;
  color: rgba(255, 255, 255, .85) !important;
  line-height: 1.6 !important;
}
 
@media (max-width: 768px) {
  .page-template-template-calculator.page-template-template-calculator .entry-header {
    padding-top: 56px;           /* pt-14 */
  }
}
.page-template-template-calculator.page-template-template-calculator article .inside-article .entry-content{
    max-width:900px !important;
    margin-left:auto !important;
    margin-right:auto !important;
}
.page-template-template-calculator .gpa-embed .max-w-4xl {
    max-width:56rem !important;
    width:100% !important;
    margin-left:auto !important;
    margin-right:auto !important;
}
.page-template-template-calculator .entry-content .rx-meaning .rx-mdesc{
	font-size: 0.875rem !important
}

.page-template-template-calculator .entry-content .rx-table thead th{
	text-align:center !important;
}
.page-template-template-calculator .gpa-embed .text-center.mt-8 > .inline-flex.items-center.text-blue-100 {
    color: #2563eb;
}
.page-template-template-calculator.page-template-template-calculator .entry-content > p.has-text-align-center:first-child{
	margin-bottom:50px !important;
	    max-width: 36rem;
}

.page-template-template-calculator.page-template-template-calculator #root{
	margin-top: calc(var(--rx-hero-tail) - var(--rx-card-overlap));
}

/* ============================================================
   HERO TOKENS AND THE CARD OVERLAP
   ------------------------------------------------------------
   --rx-hero-tail     how far the purple carries on below the hero
                      content, measured from the bottom of the intro
   --rx-card-overlap  how far the calculator card sits into that tail

   Both live on the body so #root can read them as well. The intro
   paragraph now renders inside .entry-header (see functions.php), so
   the band is header height + tail and grows with the copy. The card
   stays in normal flow and only ever overlaps the tail, never the
   text above it. On phones the overlap is zero.
   ============================================================ */
.page-template-template-calculator.page-template-template-calculator {
    --rx-hero-tail: 104px;
    --rx-card-overlap: 64px;
}

.page-template-template-calculator.page-template-template-calculator .entry-header .rx-hero-intro {
    position: relative;
    z-index: 1;
    max-width: 56rem;
    margin: 16px auto 0;
    text-align: center;
}
.page-template-template-calculator.page-template-template-calculator .entry-header .rx-hero-intro p {
    margin: 0 !important;
    color: #EDE9FE !important;
    font-size: 18px !important;
    line-height: 1.6 !important;
}
.page-template-template-calculator.page-template-template-calculator .entry-header .rx-hero-intro a {
    color: #ffffff !important;
    text-decoration: underline !important;
}
.page-template-template-calculator.page-template-template-calculator .entry-header .rx-hero-intro strong {
    color: #ffffff !important;
}

@media (max-width: 768px) {
    .page-template-template-calculator.page-template-template-calculator {
        --rx-hero-tail: 72px;
        --rx-card-overlap: 0px;
    }
    .page-template-template-calculator.page-template-template-calculator .entry-header .rx-hero-intro {
        margin-top: 12px;
    }
    .page-template-template-calculator.page-template-template-calculator .entry-header .rx-hero-intro p {
        font-size: 16px !important;
    }
}


/* ---------- 20. rx-* mobile type scale (design guide) ---------- */
@media (max-width: 781px) {
    .page-template-template-calculator .entry-content .rx-h2,
    .page-template-template-calculator .entry-content .rx-about h2 {
        font-size: 30px !important;
    }
    .page-template-template-calculator .entry-content .rx-card-t,
    .page-template-template-calculator .entry-content .rx-relcard h3 {
        font-size: 22px !important;
    }
    .page-template-template-calculator.page-template-template-calculator p.rx-card-b,
    .page-template-template-calculator.page-template-template-calculator p.rx-sub,
    .page-template-template-calculator.page-template-template-calculator p.rx-mdesc,
    .page-template-template-calculator.page-template-template-calculator p.rx-def-b,
    .page-template-template-calculator.page-template-template-calculator .rx-relsub,
    .page-template-template-calculator.page-template-template-calculator .rx-faq p {
        font-size: 16px !important;
    }
    .page-template-template-calculator .entry-content .rx-table thead th {
        font-size: 12px !important;
    }
    .page-template-template-calculator .entry-content .rx-table td,
    .page-template-template-calculator .entry-content .rx-rellist li {
        font-size: 16px !important;
    }
}

/* ------------------------------------------------------------------
   About section - title alignment
   Section title is centred to match the other rx-sec headings; the
   body copy underneath stays left aligned and the cap icon is hidden.
   ------------------------------------------------------------------ */
.page-template-template-calculator .entry-content .rx-about h2 {
  justify-content: center;
  padding-left: 0;
}

.page-template-template-calculator .entry-content .rx-about h2::before {
  display: none;
}

/* NATIVE RELLIST + default blue links applied */

/* ------------------------------------------------------------------
   Related Tools list - native semantics + default blue links
   Overrides the later row-card rules further up this file.
   ------------------------------------------------------------------ */
.page-template-template-calculator .entry-content .rx-rellist {
  list-style: disc outside;
  padding-left: 1.5rem;
  margin: 0;
}

.page-template-template-calculator .entry-content .rx-rellist li {
  display: list-item;
  border-top: 0;
  padding: 0;
  margin: 0 0 8px;
  background: none;
}

.page-template-template-calculator .entry-content .rx-rellist li::before,
.page-template-template-calculator .entry-content .rx-rellist li::marker {
  content: normal;
}

.page-template-template-calculator .entry-content .rx-rellist li a {
  display: inline;
  color: #2563eb;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.page-template-template-calculator .entry-content .rx-rellist li a:hover,
.page-template-template-calculator .entry-content .rx-rellist li a:focus-visible {
  color: #1d4ed8;
}

/* ------------------------------------------------------------------
   Card icon boxes and step numerals removed
   Drops the decorative icon boxes on step / feature / exception /
   related cards and the CSS-counter numerals on the step cards, then
   reclaims the padding that was reserved for them.
   ------------------------------------------------------------------ */
.page-template-template-calculator .entry-content .rx-step::before,
.page-template-template-calculator .entry-content .rx-step::after,
.page-template-template-calculator .entry-content .rx-feat::before,
.page-template-template-calculator .entry-content .rx-exc::before,
.page-template-template-calculator .entry-content .rx-relcard h3::before {
  content: none;
  display: none;
}

.page-template-template-calculator .entry-content .rx-step {
  padding-top: 24px;
  counter-increment: none;
}

.page-template-template-calculator .entry-content .rx-cards {
  counter-reset: none;
}

.page-template-template-calculator .entry-content .rx-feat,
.page-template-template-calculator .entry-content .rx-exc {
  padding-left: 24px;
}

.page-template-template-calculator .entry-content .rx-relcard h3 {
  padding-left: 0;
}

/* ==== Calculator pages: layout overrides for prerendered calculators ==== */

/* Same width as the homepage calculator, and no blank space reserved under it (the calculator is prerendered, so nothing needs to be held open) */
body.gpa-calc-tool #root { max-width: 750px !important; margin-left: auto; margin-right: auto; min-height: 0 !important; }

/* Grade-style calculators: full width, and keep the reserved height (they aren't prerendered, so the page would jump while they load) */
body.page-id-296 #root,
body.page-id-26308 #root,
body.page-id-26311 #root,
body.page-id-26313 #root,
body.page-id-28758 #root { max-width: none !important; min-height: 720px !important; }

/* College calculator has 16px less built-in side padding: give it 16px less width to line up */
body.page-id-22 #root { max-width: 734px !important; }

/* High school calculator: 16px less side padding below 1024px wide, and no full-screen minimum height */
@media (max-width: 1023px) { body.page-id-77 #root { max-width: 734px !important; } }
body.page-id-77 #root .min-h-screen { min-height: 0 !important; }

/* Tighter space above the badge and title (leave this rule out if you haven't decided to tighten the hero) */
body.gpa-calc-tool .entry-header { padding-top: 40px !important; }

/* All calculator-template pages: same width as the homepage calculator, and no reserved blank space under it */
body.gpa-calc-tool #root { max-width: 750px !important; margin-left: auto; margin-right: auto; min-height: 0 !important; }

/* Grade-style calculators: full width, and keep the reserved height (they aren't prerendered, so the page would jump while they load) */
body.page-id-296 #root,
body.page-id-26308 #root,
body.page-id-26311 #root,
body.page-id-26313 #root,
body.page-id-28758 #root { max-width: none !important; min-height: 720px !important; }

/* College calculator has 16px less built-in side padding, so give it 16px less to land on the same width */
body.page-id-22 #root { max-width: 734px !important; }

/* High school calculator has 16px less side padding below 1024px wide, so give it 16px less there too */
@media (max-width: 1023px) { body.page-id-77 #root { max-width: 734px !important; } }

/* High school calculator: remove its built-in "at least a full screen tall" setting */
body.page-id-77 #root .min-h-screen { min-height: 0 !important; }
/* Section headings on calculator pages: pill, title and subtitle type and spacing */
#primary #main .entry-content .rx-sec { margin-bottom: 64px !important; }
#primary #main .entry-content .rx-sec + .rx-sec { margin-top: 64px !important; }
#primary #main .entry-content p.rx-eyebrow { font-size: 14px !important; font-weight: 600 !important; line-height: 1.45 !important; color: #6D28D9 !important; margin-bottom: 12px !important; }
#primary #main .entry-content p.rx-eyebrow + h2.rx-h2 { margin-top: 0 !important; }
#primary #main .entry-content h2.rx-h2 { margin-bottom: 12px !important; }
#primary #main .entry-content p.rx-sub { font-size: 18px !important; line-height: 1.6 !important; color: #6B7280 !important; max-width: 700px !important; margin-left: auto !important; margin-right: auto !important; margin-bottom: 24px !important; }