/**
 * Styles for the Accredify IRT Explainer page.
 * Scoped entirely under .irt-explainer so it never leaks into the rest of
 * the xtrax theme's layout (see the ".container is page-level" lesson --
 * everything here targets its own namespaced wrapper instead).
 */

/*
 * The site theme paints a full-bleed background photo behind the main
 * content region on every page. Any text here that doesn't have its own
 * solid background sits directly on top of that photo and becomes
 * unreadable. Rather than fight the theme's markup (which this module has
 * no visibility into), the whole article is wrapped in one opaque "content
 * card" - this is robust to whatever the theme does above/behind it.
 */
.irt-explainer {
  /* Fluid width at every breakpoint per Vivek's call - no fixed max-width
     ceiling. A very large ceiling is kept only as an ultra-wide-monitor
     safety net so lines don't stretch to unreadable lengths on a 32"+
     display; it will never engage on normal laptop/desktop screens. */
  width: 90%;
  max-width: 1600px;
  box-sizing: border-box;
  margin: 2.5rem auto 4rem;
  padding: 0 3rem 3.5rem;
  background: #ffffff;
  border-radius: 20px;
  box-shadow: 0 15px 50px rgba(20, 10, 60, 0.18);
  font-family: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: #2b2b2b;
  line-height: 1.65;
  font-size: 1.05rem;
  overflow: hidden;
}

@media (max-width: 620px) {
  .irt-explainer {
    width: 94%;
    margin: 1rem auto 3rem;
    padding: 0 1.25rem 2.5rem;
    border-radius: 14px;
  }
}

.irt-explainer h1,
.irt-explainer h2,
.irt-explainer h3 {
  font-family: 'DM Serif Display', Georgia, serif;
  font-weight: 400;
  color: #1a1a2e;
}

/* Explicit sup styling (don't rely on the theme's reset leaving the
   browser default sub/sup rule intact) so the (R) mark reads as a proper
   trademark symbol wherever "PMP" appears. Body-copy contexts get a
   larger mark (it was unreadably small before) aligned to the bottom of
   the line; the banner eyebrow needs a smaller mark vertically centered
   instead, since it sits in much larger serif text. */
.irt-explainer sup {
  font-size: 1.1em;
  vertical-align: bottom;
  line-height: 1;
}

.irt-banner .irt-eyebrow sup,
.irt-explainer h1 sup,
.irt-explainer h2 sup,
.irt-explainer h3 sup {
  font-size: 0.55em;
  vertical-align: middle;
}

/*
 * Solid blue banner, matching the site's existing "Modules" admin/learner
 * page header treatment (see the Modules screen for reference) instead of
 * the earlier photo-hero look. Negative left/right margins bleed it out to
 * the edges of the .irt-explainer card; the card's own border-radius +
 * overflow:hidden takes care of rounding the top corners, so this block
 * doesn't need its own border-radius.
 */
.irt-banner {
  margin: 0 -3rem 2rem;
  padding: 2.5rem 3rem 2.25rem;
  background: linear-gradient(135deg, #185fa5 0%, #2a7bc4 100%);
  text-align: center;
}

.irt-banner-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: #fac775;
  color: #412402;
  margin-bottom: 0.9rem;
}

.irt-banner-icon svg {
  width: 22px;
  height: 22px;
}

.irt-eyebrow {
  /* Same typeface/weight as the section headings (not the uppercase,
     letter-spaced label style used elsewhere) - and sized with clamp() so
     it scales down on narrower viewports rather than wrapping to a second
     line. white-space:nowrap enforces the single-line requirement. This
     is now the only line of text in the banner itself, since the old h1
     moved down into the "short answer" callout's heading. */
  font-family: 'DM Serif Display', Georgia, serif;
  font-weight: 400;
  font-size: clamp(1rem, 4vw, 2.1rem);
  white-space: nowrap;
  color: #ffffff;
  margin: 0 0 0.75rem;
}

.irt-hero-sub {
  font-size: 1.1rem;
  color: #e6f1fb;
  max-width: 680px;
  margin: 0 auto;
}

@media (max-width: 620px) {
  .irt-banner {
    margin: 0 -1.25rem 1.75rem;
    padding: 2rem 1.5rem 1.75rem;
  }
}

/* Callout boxes ---------------------------------------------------- */

.irt-callout {
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
  margin: 1.5rem 0 2.25rem;
}

.irt-callout h2,
.irt-callout h3 {
  margin-top: 0;
}

.irt-callout-answer {
  background: #e6f1fb;
  border: 1px solid #38bdf8;
  border-left: 5px solid #185fa5;
  box-shadow: 0 4px 14px rgba(24, 95, 165, 0.1);
}

.irt-callout-answer h2 {
  font-size: 1.55rem;
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0.6rem;
}

.irt-callout-compare {
  background: #e6f1fb;
  border: 1px solid #38bdf8;
  border-left: 5px solid #185fa5;
  box-shadow: 0 4px 14px rgba(24, 95, 165, 0.1);
}

.irt-note {
  background: #e6f1fb;
  border-left: 4px solid #38bdf8;
  border-radius: 6px;
  padding: 0.9rem 1.1rem;
  font-size: 0.95rem;
  margin: 1.25rem 0;
  box-shadow: 0 4px 14px rgba(24, 95, 165, 0.1);
}

/* Sections ------------------------------------------------------------ */

.irt-section {
  margin-bottom: 3rem;
}

.irt-section h2 {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 1.55rem;
  border-bottom: 2px solid #38bdf8;
  padding-bottom: 0.5rem;
  margin-bottom: 1.1rem;
}

/* Small sky-blue rectangle standing in for the old plain "1." prefix -
   using flex + align-items:center on the h2 (above) keeps the badge and
   the heading text vertically centered on the same line, regardless of
   the serif font's own metrics. */
.irt-heading-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-width: 1.9rem;
  height: 1.9rem;
  padding: 0 0.4rem;
  border-radius: 6px;
  background: #38bdf8;
  color: #ffffff;
  font-family: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 2px 6px rgba(56, 189, 248, 0.4);
}

.irt-section h3 {
  font-size: 1.15rem;
  margin-bottom: 0.4rem;
}

.irt-caption {
  font-size: 0.9rem;
  color: #777;
  text-align: center;
  margin-top: 0.5rem;
}

/* Compare cards --------------------------------------------------- */

.irt-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: 1.25rem 0;
}

.irt-compare-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-left: 4px solid #38bdf8;
  border-radius: 10px;
  padding: 1rem 1.1rem;
  box-shadow: 0 2px 10px rgba(24, 95, 165, 0.08);
}

.irt-compare-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  background: #e6f1fb;
  color: #185fa5;
  font-weight: 700;
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
}

.irt-compare-card h3 {
  margin-top: 0;
  font-size: 1rem;
  color: #185fa5;
}

/* Ingredient blocks -------------------------------------------------- */

.irt-ingredients-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.25rem;
  margin: 1.25rem 0;
}

.irt-ingredient {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-left: 4px solid #38bdf8;
  border-radius: 10px;
  padding: 1.1rem 1.25rem;
  box-shadow: 0 2px 10px rgba(24, 95, 165, 0.08);
}

.irt-ingredients-grid .irt-ingredient:nth-child(1) { border-left-color: #f0ad4e; }
.irt-ingredients-grid .irt-ingredient:nth-child(2) { border-left-color: #7c5cff; }
.irt-ingredients-grid .irt-ingredient:nth-child(3) { border-left-color: #0d9488; }

/* Small pill labeling which formula variable (a/b/c) this ingredient
   corresponds to - reuses the same pastel background/text pairs as the
   worked-example table's value pills (.irt-var-value-a/b/c) so the same
   variable reads as the same color everywhere on the page. */
.irt-variable-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.2rem 0.5rem 0.2rem 0.6rem;
  border-radius: 999px;
  margin-bottom: 0.6rem;
}

.irt-ingredients-grid .irt-ingredient:nth-child(1) .irt-variable-badge { background: #fff4d9; color: #93690a; }
.irt-ingredients-grid .irt-ingredient:nth-child(2) .irt-variable-badge { background: #ede9fe; color: #6d28d9; }
.irt-ingredients-grid .irt-ingredient:nth-child(3) .irt-variable-badge { background: #ccfbf1; color: #0f766e; }

/* Shared color-coding for the three IRT parameters, used both as a
   lettered circle (ingredient badges, table header) and as a plain
   colored dot (table row values, where the letter is already established
   by the header). Colors are deliberately distinct from the site's
   semantic colors elsewhere (correct/incorrect green-red, difficulty
   tag green/amber/red) so they don't get misread as status indicators.
   "b" reuses the same amber as the Medium difficulty tag/Below-Target
   band, since b is literally the difficulty parameter. */
.irt-var-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.3em;
  height: 1.3em;
  border-radius: 50%;
  color: #ffffff;
  font-size: 0.85em;
  font-weight: 700;
  line-height: 1;
  text-transform: none;
}

.irt-var-circle-a { background: #7c5cff; }
.irt-var-circle-b { background: #f0ad4e; }
.irt-var-circle-c { background: #0d9488; }

/* Table row values: the number itself sits inside a pastel pill (same
   visual language as the Difficulty column's Easy/Medium/Hard tags)
   rather than a colored dot in front of it. Each pill gets a fixed width
   regardless of digit count - "-1.60" and "0.25" occupy the same
   footprint - so the three values line up in a clean vertical column
   from row to row instead of drifting based on how many characters each
   number happens to have. */
.irt-var-value {
  display: inline-block;
  width: 3.4em;
  text-align: center;
  padding: 0.1rem 0;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.85em;
}

.irt-var-value-a { background: #ede9fe; color: #6d28d9; }
.irt-var-value-b { background: #fff4d9; color: #93690a; }
.irt-var-value-c { background: #ccfbf1; color: #0f766e; }

.irt-ingredient h3 {
  margin: 0 0 0.35rem;
}

.irt-ingredient-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.98rem;
  color: #3a3a3a;
}

.irt-ingredient-list li {
  padding: 0.55rem 0;
  border-bottom: 1px solid #38bdf8;
}

.irt-ingredient-list li:first-child {
  padding-top: 0;
}

.irt-ingredient-list li:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

/* Skill thermometer ---------------------------------------------------- */

.irt-thermometer {
  position: relative;
  margin: 3.5rem 0 2.75rem;
}

/* Callout row sits above the track. Using a 3-column grid with different
   justify-self per callout (start/center/end) instead of hand-computed
   pixel offsets - keeps each label roughly over its corresponding point
   on the track without fragile absolute-position math. */
.irt-thermometer-callouts {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: end;
  margin: 0 1rem 0.6rem;
  min-height: 2.1rem;
}

.irt-thermometer-callout {
  position: relative;
  display: inline-block;
  justify-self: center;
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
  padding: 0.35rem 0.7rem;
  border-radius: 6px;
}

/* Each callout is colored to match the gradient at the point on the
   track it's labeling (red end / neutral midpoint / sky-blue end), with
   text color chosen for contrast against that specific background. The
   arrow beneath each box is recolored to match via its own ::after rule
   so it reads as a single connected shape rather than three generic dark
   tooltips. */
.irt-thermometer-callout-low {
  justify-self: start;
  background: #d9534f;
  color: #ffffff;
}

.irt-thermometer-callout-avg {
  background: #f2f2f2;
  color: #1a1a2e;
  border: 1px solid #d0d0d0;
}

.irt-thermometer-callout-high {
  justify-self: end;
  background: #38bdf8;
  color: #ffffff;
}

/* Small downward-pointing arrow under each callout box, recolored to
   match its own box (see the three rules below). */
.irt-thermometer-callout::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -6px;
  transform: translateX(-50%);
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid currentColor;
}

.irt-thermometer-callout-low::after {
  border-top-color: #d9534f;
}

.irt-thermometer-callout-avg::after {
  border-top-color: #f2f2f2;
}

.irt-thermometer-callout-high::after {
  border-top-color: #38bdf8;
}

.irt-thermometer-track {
  position: relative;
  height: 10px;
  border-radius: 6px;
  /* Red gets stronger toward the negative (left) end, sky blue gets
     stronger toward the positive (right) end, meeting at a neutral
     midpoint for the average score. */
  background: linear-gradient(90deg, #d9534f 0%, #f2f2f2 50%, #38bdf8 100%);
  margin: 0 1rem;
}

.irt-thermometer-tick {
  position: absolute;
  top: 18px;
  transform: translateX(-50%);
  font-size: 0.85rem;
  font-weight: 700;
  color: #444;
  text-align: center;
  white-space: nowrap;
}

@media (max-width: 480px) {
  .irt-thermometer-callout {
    font-size: 0.7rem;
    padding: 0.3rem 0.5rem;
  }
}

/* Steps grid -------------------------------------------------------- */

/* Four cards in a row on wide screens (matching the ingredients-card
   style: white background, sky-blue border), collapsing to 2 then 1
   column as space runs out - same responsive pattern used elsewhere on
   this page. */
.irt-steps {
  counter-reset: irt-step;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  padding: 0;
  margin: 1.25rem 0;
}

@media (max-width: 900px) {
  .irt-steps {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .irt-steps {
    grid-template-columns: 1fr;
  }
}

.irt-steps li {
  counter-increment: irt-step;
  position: relative;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 2.5rem 1.1rem 1.1rem;
  box-shadow: 0 2px 10px rgba(24, 95, 165, 0.08);
}

.irt-steps li::before {
  content: counter(irt-step);
  position: absolute;
  left: 1.1rem;
  top: 1.1rem;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  background: #38bdf8;
  color: #fff;
  font-weight: 700;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Optional math details --------------------------------------------- */

.irt-optional-math {
  background: #e6f1fb;
  border: 1px dashed #38bdf8;
  border-radius: 10px;
  padding: 1rem 1.25rem;
  margin-top: 1.5rem;
  box-shadow: 0 4px 14px rgba(24, 95, 165, 0.08);
}

.irt-optional-math summary {
  cursor: pointer;
  font-weight: 700;
  color: #185fa5;
}

.irt-formula {
  font-family: 'Courier New', monospace;
  background: #1a1a2e;
  color: #f5f5f5;
  padding: 0.85rem 1rem;
  border-radius: 8px;
  overflow-x: auto;
  text-align: center;
}

.irt-worked-mini {
  font-size: 0.95rem;
}

/* Table ------------------------------------------------------------- */

.irt-table-wrap {
  overflow-x: auto;
  margin: 1.25rem 0;
  border: 1px solid #38bdf8;
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(24, 95, 165, 0.08);
}

.irt-table {
  width: 100%;
  border-collapse: collapse;
  background: #ffffff;
}

.irt-table tbody tr:nth-child(even) {
  background: #e6f1fb;
}

.irt-table th,
.irt-table td {
  padding: 0.6rem 0.9rem;
  text-align: left;
  border-bottom: 1px solid #bae6fd;
}

.irt-table th {
  background: #b5d4f4;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #0c447c;
  border-bottom: 2px solid #38bdf8;
}

.irt-table tbody tr:last-child td {
  border-bottom: none;
}

/* Vertical dividers frame each column so they read as clearly separated
   segments, per Vivek's screenshot markup. */
.irt-table th:not(:last-child),
.irt-table td:not(:last-child) {
  border-right: 1px solid #38bdf8;
}

/* The a/b/c parameter column - supplementary detail, so it's styled a
   notch quieter (smaller, muted color) than the Result column, which is
   the actual headline data point of each row. The colored pills (see
   .irt-var-value above) tie each number back to the same b/a/c
   color-coding used on the ingredient cards and this table's header. */
.irt-table-vars {
  font-family: 'Courier New', monospace;
  font-size: 0.85rem;
  color: #555;
  white-space: nowrap;
}

.irt-tag {
  display: inline-block;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 700;
}

.irt-tag-easy { background: #e3f6e5; color: #1e7d32; }
.irt-tag-med { background: #fff4d9; color: #93690a; }
.irt-tag-hard { background: #ffe4e1; color: #b3261e; }

.irt-correct { color: #1e7d32; font-weight: 700; }
.irt-incorrect { color: #b3261e; font-weight: 700; }

/* Rating bands --------------------------------------------------------- */

/* Nested "score box" treatment - a dark header bar sitting above the
   colored rating segments, styled after the boxed score-range diagrams
   in official test-prep scoring guides (a single bordered block, flat
   sections butted against each other, rather than a freestanding rounded
   chart). */
.irt-score-box {
  border: 1px solid #38bdf8;
  border-radius: 10px;
  overflow: hidden;
  margin: 1.75rem 0 0.25rem;
}

.irt-score-box-header {
  background: #1a1a2e;
  color: #ffffff;
  text-align: center;
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.6rem;
}

.irt-bands-chart {
  display: flex;
  height: 70px;
}

.irt-band {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.irt-band-label {
  color: #fff;
  font-weight: 700;
  font-size: 0.85rem;
  line-height: 1.25;
}

.irt-band-ni { background: #d9534f; }
.irt-band-bt { background: #f0ad4e; }
.irt-band-t { background: #7bc47f; }
.irt-band-at { background: #2e8b45; }

/* Checklist ----------------------------------------------------------- */

/* Single column, not a 2-column grid: with items of uneven length, a
   2-column grid produces rows of different heights per column, which
   makes the vertical spacing between items look inconsistent even though
   each item's own margin is identical. A single column keeps the rhythm
   uniform regardless of how long any one bullet runs. */
.irt-check-list {
  list-style: none;
  padding: 0;
  margin: 1.25rem 0;
  /* Match the surrounding paragraph text exactly - this list shouldn't
     read as a visually distinct, larger-feeling component. */
  font-size: 1em;
  line-height: inherit;
}

.irt-check-list li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: 0.85rem;
}

.irt-check-list li:last-child {
  margin-bottom: 0;
}

.irt-check-list li::before {
  content: '\2713';
  position: absolute;
  left: 0;
  top: 0.1em;
  /* Smaller than the body text so the glyph doesn't visually dominate the
     line the way a full-size checkmark does. */
  font-size: 0.8em;
  color: #2e8b45;
  font-weight: 700;
}

/* FAQ -------------------------------------------------------------- */

.irt-faq {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1rem;
}

.irt-faq-item {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-left: 4px solid #38bdf8;
  border-radius: 10px;
  padding: 1.1rem 1.3rem;
  margin: 0;
  box-shadow: 0 2px 10px rgba(24, 95, 165, 0.08);
}

.irt-faq-item h3 {
  margin: 0 0 0.4rem;
  font-size: 1.05rem;
  color: #1a1a2e;
}

.irt-faq-item p {
  margin: 0;
}

/* Takeaways + footer -------------------------------------------------- */

.irt-takeaways {
  background: #e6f1fb;
  border-radius: 14px;
  padding: 1.75rem 2rem;
  box-shadow: 0 4px 14px rgba(24, 95, 165, 0.1);
}

.irt-footer {
  border-top: 1px solid #38bdf8;
  padding-top: 1.25rem;
  font-size: 0.85rem;
  color: #888;
}

/* Small screens ------------------------------------------------------ */

@media (max-width: 560px) {
  .irt-compare { grid-template-columns: 1fr; }
  .irt-ingredients-grid { grid-template-columns: 1fr; }
  .irt-faq { grid-template-columns: 1fr; }
}