/* accredify_landing_page */

:root {
  --alp-navy: #143c64;
  --alp-gradient: linear-gradient(135deg, #0d3c6e 0%, #1565c0 100%);
  --alp-grey: #f4f6f8;
  --alp-gold: #b4913c;
  --alp-radius: 8px;
  --alp-shadow: 0 4px 20px rgba(0,0,0,.10);
  --alp-divider: 1px solid #e2e6ea;
}

/* Full-bleed: zero padding on every edge, so .alp-layout runs edge to
   edge with no page background visible around it (left/right/bottom).
   Previously this had 28px side padding and 60px bottom padding, which
   is exactly what left the "poster on a background" look — a card
   floating with the theme's own background peeking out around it. */
.alp-page { max-width: 100%; margin: 0; padding: 0; color: #000; position: relative; background: #fff; flex: 1 1 auto; display: flex; flex-direction: column; }
.alp-page * { color: #000; box-sizing: border-box; }

/* Loosen the theme's Bootstrap .container width on this route — same
   confirmed-safe technique used in accredify_practice_exam_runtime and
   accredify_exam_analytics: scoped to the specific section that wraps
   page content, not a bare .container selector, so it structurally
   cannot reach the site header's own separate .container. Also zeroing
   the container's own left/right padding here — Bootstrap's .container
   carries a 15px gutter on each side by default, which is what was
   still showing as a side margin even after .alp-page's own padding
   was zeroed out. */
body.alp-flow section.vivek-shift-footer-to-bottom > .container {
  max-width: none !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
/* Same section carries a large top padding/margin from the theme —
   collapse it so page content starts right at the top, flush with the
   site header/nav above it. Bottom padding/margin collapsed too, for
   the same reason on the footer side. */
body.alp-flow section.vivek-shift-footer-to-bottom {
  padding-top: 0 !important;
  margin-top: 0 !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

/* This section's own job — per its name — is to flex-grow and fill
   any leftover viewport height so the footer stays pinned to the
   bottom. At higher browser zoom the page content is naturally tall
   enough to reach the footer on its own; at lower zoom the CSS
   viewport height grows (zooming out fits more CSS pixels on the same
   screen) without our content growing to match, and the section's own
   flex-grown space becomes a visible gap between our panels and the
   footer.
   Chaining flex:1 down through .container → .alp-page → .alp-layout
   lets OUR content claim that same leftover space — painted white
   (matching the panels) — instead of leaving it as a gap.
   This assumes section.vivek-shift-footer-to-bottom is itself the
   flex-grow element in the theme's sticky-footer layout and that
   .container sits directly inside it — both true for the other
   confirmed-safe uses of this technique elsewhere in the codebase, but
   worth a visual check across a couple of zoom levels after deploying,
   since a theme change could shift that structure. */
body.alp-flow section.vivek-shift-footer-to-bottom {
  display: flex;
  flex-direction: column;
}
body.alp-flow section.vivek-shift-footer-to-bottom > .container {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

/* Filter bar, top right */
.alp-filter-bar { display: flex; justify-content: flex-end; margin-bottom: 10px; }
.alp-filter-dropdown { position: relative; }
.alp-filter-toggle {
  background: #fff; border: 1px solid #ccc; border-radius: 6px; padding: 8px 16px;
  font-size: 13px; font-weight: 700; cursor: pointer; color: var(--alp-navy) !important;
}
.alp-filter-menu {
  display: none; position: absolute; top: 100%; right: 0; margin-top: 6px;
  background: #fff; border: 1px solid #ddd; border-radius: 6px; box-shadow: var(--alp-shadow);
  padding: 12px 16px; z-index: 50; min-width: 200px;
}
.alp-filter-menu.alp-open { display: block; }
.alp-filter-option { display: block; font-size: 13px; padding: 4px 0; cursor: pointer; }

/* .alp-layout — TWO INDEPENDENT flex columns, not one shared grid.
   That's the key structural change: the hero (in .alp-col-main) is now
   double-height while the Leaderboard next to it (in .alp-col-side)
   keeps its original height — they can no longer share row tracks the
   way the old CSS Grid version forced them to, since that would have
   made them match. Each column just stacks its own content at its own
   natural height; align-items:stretch (default for a flex row) then
   stretches BOTH columns to match whichever is taller — .alp-col-main
   (hero + news/ivy row) vs .alp-col-side (leaderboard + discuss) — with
   the shorter column's own white background (below) filling the
   leftover space rather than visibly growing its actual content.
   Still edge-to-edge (no side/bottom padding on .alp-page above), no
   border/radius/shadow of its own — divider borders on each area do
   the separating instead. */
.alp-layout {
  display: flex;
  background: #fff;
  flex: 1 1 auto;
  overflow: hidden;
}
.alp-col-main {
  flex: 2 1 0; min-width: 0; display: flex; flex-direction: column;
  background: #fff; border-right: var(--alp-divider);
}
.alp-col-side {
  flex: 1 1 0; min-width: 0; display: flex; flex-direction: column;
  background: #fff;
}

.alp-hero.alp-area-hero { border-bottom: var(--alp-divider); }

/* News + Ivy sit side by side under the hero, inside .alp-col-main. */
.alp-row-secondary { display: flex; }
.alp-row-secondary > .alp-area-news { flex: 1 1 0; min-width: 0; border-right: var(--alp-divider); }
.alp-row-secondary > .alp-area-ivy { flex: 1 1 0; min-width: 0; }

.alp-area-leaderboard { border-bottom: var(--alp-divider); min-height: 340px; box-sizing: border-box; }
.alp-area-discuss { min-width: 0; }

@media (max-width: 960px) {
  /* Below 960px, unwrap the two columns (display:contents removes
     their own box but keeps their children in the DOM) so .alp-layout
     itself becomes the single flex column doing the stacking, and use
     `order` to reproduce the same visual order the old grid-template-areas
     stack used: hero, leaderboard, discuss, news, ivy. */
  .alp-layout { flex-direction: column; }
  .alp-col-main, .alp-col-side { display: contents; }

  .alp-hero.alp-area-hero { order: 1; min-height: 0; }
  .alp-area-leaderboard { order: 2; min-height: 0; }
  .alp-area-discuss { order: 3; }
  .alp-row-secondary { order: 4; flex-direction: column; }
  /* BUG FIX: the desktop rule gives News/Ivy `flex: 1 1 0` (basis 0) so
     they split .alp-row-secondary's width evenly side by side. Carried
     unchanged into the mobile column stack, basis:0 with nothing
     forcing growth collapsed both panels to near-zero height (only
     their h2 banner stayed visible, since that's unaffected by flex
     sizing) — which is why Industry News / Free Resources from Ivies
     were disappearing on mobile. Overriding to flex-basis:auto here
     makes each panel size to its own actual content height instead. */
  .alp-row-secondary > .alp-area-news,
  .alp-row-secondary > .alp-area-ivy {
    flex: 1 1 auto;
  }

  .alp-col-main, .alp-col-side { border-right: none; }
  /* Single-column stack: dividers move to horizontal lines instead of
     vertical lines between columns. */
  .alp-hero.alp-area-hero, .alp-area-leaderboard, .alp-area-discuss,
  .alp-row-secondary > .alp-area-news, .alp-row-secondary > .alp-area-ivy {
    border-right: none;
    border-bottom: var(--alp-divider);
  }
  .alp-row-secondary > .alp-area-ivy { border-bottom: none; }
}

/* Hero — background video instead of a static image, with the gradient
   and text layered on top. video is absolutely positioned to fill the
   box (object-fit:cover mirrors what background-size:cover did for the
   image), and pointer-events:none keeps it from intercepting clicks
   meant for the text/page above it. min-height doubled (340px → 680px)
   per request — the Leaderboard beside it deliberately does NOT follow
   (see .alp-area-leaderboard below, still 340px): they're independent
   flex columns now specifically so one can grow without the other
   having to match.
   .alp-hero-content stretches to the hero's full height (flex:1 1 auto)
   so it can distribute space between its own two children
   independently: .alp-hero-heading-wrap (flex:1, internally centers the
   heading/subtext within whatever space is left above the stats) and
   .alp-hero-stats (sized to its own content, naturally pushed toward
   the bottom since the heading-wrap above it consumes the rest). That
   split is what lets the heading sit vertically centered in the panel
   while the stat boxes settle toward the lower end, rather than the
   two being forced to move together as one centered block. */
.alp-hero {
  position: relative; padding: 44px 40px; color: #fff;
  min-height: 680px; display: flex; flex-direction: column;
  overflow: hidden; box-sizing: border-box; background: #0d3c6e;
}
.alp-hero-video {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0; pointer-events: none;
}
.alp-hero::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(135deg, rgba(13, 60, 110, .82) 0%, rgb(21 101 192 / 32%) 100%);
}
/* NASA credit + Discovery facts — only rendered (see the .html.twig)
   when the hero video actually is the Discovery launch clip. No boxed
   background — plain text with a text-shadow for legibility against
   the video instead, on both desktop and mobile. Small text throughout
   (this is metadata about the footage, not a headline figure) — see
   the individual font-sizes below.
   Lives inside .alp-hero-content now (see the .html.twig note) —
   position:absolute here is relative to .alp-hero-content, which is
   itself position:relative and fills the hero's full content box, so
   this still visually anchors to the corner exactly as before.
   Anchored to the upper-right corner on desktop; the consolidated
   mobile block further down (after ALL of this section's base rules —
   see the note there on why placement matters) moves it into a
   two-column row next to the heading instead.
   max-width:none (no left+width set either) lets this box shrink-to-
   fit its content — specifically so the credit link below can render
   as one line at its natural width instead of being force-wrapped by
   an arbitrary cap. */
.alp-hero-nasa-info {
  /* top:64px (was 0) — clears .alp-hero-cta-row above it with a gap,
     and matches .alp-hero-heading-wrap's margin-top below so the two
     text blocks start at the same y position instead of one being
     flush to the top while the other sits vertically centered. Keep
     these two values in sync if either changes. */
  position: absolute; top: 64px; right: 0; z-index: 3;
  display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
  max-width: none;
}
.alp-hero-video-credit {
  display: block; color: #fff !important;
  font-size: 10px; line-height: 1.35; text-align: right;
  text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .5);
  text-shadow: 0 1px 3px rgba(0, 0, 0, .7);
}

/* Discovery mission facts — small plain text. */
.alp-discovery-facts {
  display: flex; flex-direction: column; gap: 3px;
  font-size: 10px; text-align: right; text-shadow: 0 1px 3px rgba(0, 0, 0, .7);
}
.alp-discovery-fact { display: flex; justify-content: flex-end; gap: 6px; white-space: nowrap; }
.alp-discovery-fact-label { opacity: .8; }
/* .alp-discovery-fact-number shares the .alp-stat-number class (so it
   gets the same count-up animation as the other counters — see
   js/landing.js), but .alp-stat-number's own 26px is sized for the
   big Accredify/PM figures. Same specificity (one class each), so this
   needs to be the LATER of the two in the file to actually win — it
   is, since .alp-stat-number is declared further down.
   6px (half the previous 11px, per request) — worth knowing this is
   below what's generally considered a legible minimum for body text
   (most guidance puts that floor around 9-10px); flagged in the chat
   this was requested in in case it reads as too small once live. */
.alp-discovery-fact-number { font-weight: 700; font-size: 6px; }

/* .alp-hero-content's own position:relative;z-index:2 is what keeps
   ALL of the hero's text (heading, stats, and now the NASA info too,
   nested inside it) painted above the video and gradient overlay. This
   property is never touched by the mobile override further down —
   only its `display` (flex → grid) changes there — specifically to
   avoid the display:contents trap described in the .html.twig. */
.alp-hero-content {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; flex: 1 1 auto;
}
.alp-hero-heading-wrap {
  /* justify-content: flex-start (was center) + margin-top: 64px (was
     none) — was vertically centered in the remaining space below the
     video, which put it well below where .alp-hero-nasa-info sits
     (top-anchored). Now both start at the same y position (64px,
     matching .alp-hero-nasa-info's top value above), and 64px also
     clears .alp-hero-cta-row so there's visible breathing room below
     the buttons. flex:1 1 auto is unchanged — .alp-hero-stats below
     this still gets pushed toward the bottom of .alp-hero-content the
     same way it did before; only the heading TEXT's position within
     its own box changed, not the box's size. */
  flex: 1 1 auto; display: flex; flex-direction: column; justify-content: flex-start;
  margin-top: 64px;
}
.alp-hero * { color: #fff; }
.alp-hero h1 { font-size: 30px; font-weight: 800; margin: 0 0 12px; line-height: 1.3; }
/* opacity removed (was .9) — the subtext was reading as a dimmer gray
   than the Discovery info text next to it; full-opacity white now,
   matching. */
.alp-hero-subtext { font-size: 17px; max-width: 560px; }

/* Hero stat counters — two groups (platform-wide, then Project
   Management), stacked vertically — same on desktop and mobile, no
   breakpoint-specific layout change (per request: no changes to these
   two blocks). Semi-transparent panels so they read clearly against
   the video regardless of what's playing behind them at that moment.
   flex:0 0 auto on .alp-hero-stats itself keeps it sized to its own
   content within .alp-hero-content's column — see the note above on
   why it settles toward the bottom of the panel. */
.alp-hero-stats { flex: 0 0 auto; margin-top: 24px; display: flex; flex-direction: column; gap: 14px; max-width: 480px; }
.alp-stats-group {
  background: rgba(255, 255, 255, .10); border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 8px; padding: 14px 18px;
}
.alp-stats-group-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  opacity: .8; font-weight: 700; margin-bottom: 10px;
}
.alp-stats-row { display: flex; gap: 22px; }
.alp-stat { display: flex; flex-direction: column; min-width: 0; }
.alp-stat-number { font-size: 26px; font-weight: 800; line-height: 1; }
.alp-stat-label { font-size: 11px; opacity: .85; margin-top: 4px; max-width: 130px; }

/* Mobile hero layout — deliberately ONE consolidated block, placed
   after every base rule it touches (.alp-hero, .alp-hero-content,
   .alp-hero-heading-wrap, .alp-hero-nasa-info, .alp-discovery-fact
   all get overridden here). Same selectors, same specificity as their
   base declarations — cascade order is what decides the winner, and a
   prior version of this file had some of these overrides positioned
   BEFORE their base rule, which silently made the base rule win
   regardless of screen size. Keeping every mobile override for this
   component in one place, after all its base rules, is what actually
   prevents that class of bug going forward — not a specificity hack.

   Layout: CSS Grid, now on .alp-hero-content itself (NOT .alp-hero,
   and critically NOT via display:contents on anything) — two rows:
     "heading discovery"  (top: heading/subtext left, Discovery credit
                            + facts right, side by side)
     "stats   stats"      (Accredify/PM counter boxes, full width,
                            underneath)
   .alp-hero-nasa-info now lives as a genuine child of .alp-hero-content
   (see the .html.twig), so it participates directly as a grid item —
   no unwrapping trick needed, and .alp-hero-content's own
   position:relative;z-index:2 (set once, above, never touched here)
   stays intact the whole time. That's the actual fix for the heading
   disappearing on mobile: display:contents previously discarded that
   property entirely, letting the video paint over the text. */
@media (max-width: 960px) {
  .alp-hero-content {
    display: grid;
    grid-template-columns: 1fr 112px;
    grid-template-areas:
      "heading   discovery"
      "stats     stats";
    column-gap: 14px; row-gap: 16px; align-items: start;
    /* Clears .alp-hero-cta-row (the Modules Offered / Login-Create
       Account buttons), which is absolutely positioned near the top
       of .alp-hero and otherwise overlaps/crowds this grid's first
       row. Applied here (on the container) rather than on
       .alp-hero-heading-wrap alone so BOTH the heading and the
       Discovery-facts cell shift down together, keeping them aligned
       with each other — padding on just one of the two grid items
       would only push that item's own content down, throwing the two
       out of alignment with each other again. */
    padding-top: 72px;
  }

  .alp-hero-heading-wrap { grid-area: heading; flex: none; justify-content: flex-start; margin-top: 0; }

  .alp-hero-nasa-info {
    grid-area: discovery; position: static; max-width: none;
  }

  /* Numbers under labels (not beside them) to fit the narrow 112px
     column — the whole reason for this stacked layout is saving
     horizontal space here. Slightly smaller again than the desktop
     sizes above, given how little width there is here. */
  .alp-discovery-fact { flex-direction: column; align-items: flex-end; gap: 0; white-space: normal; }
  .alp-discovery-fact-label { font-size: 9px; }
  .alp-discovery-fact-number { font-size: 5px; }

  .alp-hero-stats { grid-area: stats; max-width: none; }
}
@media (max-width: 480px) {
  .alp-stats-row { gap: 14px; }
  .alp-stat-number { font-size: 21px; }
  .alp-stat-label { max-width: 90px; }
}

/* Sections / sidebar blocks — no border/shadow/radius/margin of their
   own anymore (that all lives on .alp-layout, the single shared card —
   see above). Each still keeps its own internal padding so its content
   doesn't crowd the divider lines. */
.alp-section, .alp-sidebar-block {
  background: transparent; padding: 24px; overflow: hidden; box-sizing: border-box;
}
.alp-section h2, .alp-sidebar-block h2 {
  background: #3a7eed;
  color: #fff !important; font-size: 16px; margin: -24px -24px 16px; padding: 14px 24px;
}
/* Panel header WITH a note underneath it, both sharing one blue
   gradient box — used by all four data panels now (Leaderboard,
   Industry News, Free Resources from Ivies, Discuss & Learn). The
   wrapper takes over the background/negative-margin bleed that
   .alp-section h2 / .alp-sidebar-block h2 normally does on their own,
   and h2 itself gets reset to plain (no background/margin/padding of
   its own) so the two rules don't stack two gradients. Needs to come
   AFTER the base h2 rule above to win the cascade (same specificity —
   see the note further up in this file on why source order matters
   for that). */
.alp-panel-header-blue {
  background: #3a7eed;
  margin: -24px -24px 16px; padding: 14px 24px 16px;
}
.alp-panel-header-blue h2 { background: none; margin: 0 0 8px; padding: 0; }
.alp-panel-header-blue .alp-panel-note { color: rgba(255, 255, 255, .82) !important; margin: 0; }
/* Short explanatory blurb under a panel heading — small and muted so
   it reads as a footnote, not competing with the actual data below it.
   Default (dark-on-light) styling for any future use OUTSIDE a
   .alp-panel-header-blue wrapper; the rule above overrides this to
   light-on-blue when it's inside one. */
.alp-panel-note {
  font-size: 12px; line-height: 1.5; color: rgba(0, 0, 0, .6) !important;
  margin: 0 0 16px;
}

/* Industry News / Ivy League / Discuss & Learn / Leaderboard panels
   all share this: a fixed max-height body with overflow HIDDEN (no
   scrollbar) — once a panel's certification blocks no longer fit,
   updateAllPanelOverflow() in js/landing.js reveals that panel's
   .alp-panel-more-btn instead of letting the panel grow or scroll.
   That's what keeps a panel's size constant no matter how many
   certifications get checked in the header filter. */
.alp-equal-height-panel { display: flex; flex-direction: column; }
.alp-panel-body { flex: 1 1 auto; max-height: 420px; overflow: hidden; min-height: 0; }
.alp-panel-more-btn {
  flex: 0 0 auto; align-self: center; margin-top: 10px;
  background: var(--alp-grey); border: none; border-radius: 4px; padding: 8px 18px;
  font-size: 12px; font-weight: 700; color: var(--alp-navy) !important; cursor: pointer;
}
.alp-cert-block { margin-bottom: 8px; }
.alp-cert-toggle {
  width: 100%; display: flex; justify-content: space-between; align-items: center;
  background: var(--alp-grey); border: none; border-radius: 4px; padding: 10px 14px;
  font-size: 13px; font-weight: 700; cursor: pointer; text-align: left; color: #000 !important;
}
.alp-cert-count { background: var(--alp-navy); color: #fff !important; border-radius: 10px; padding: 1px 8px; font-size: 11px; }
.alp-cert-content { display: none; padding: 10px 4px; }
.alp-cert-block[data-expanded="true"] .alp-cert-content { display: block; }
.alp-cert-block[data-hidden-by-filter="true"] { display: none; }

.alp-show-more-btn {
  background: none; border: none; color: var(--alp-navy); font-size: 12px; font-weight: 700;
  cursor: pointer; padding: 6px 4px; text-decoration: underline;
}

.alp-item-meta { font-size: 11px; opacity: .7; }

/* Domain filter — inline with each certification's own row (one per
   certification, not a single global control), since domain tags differ
   by certification and filtering only makes sense scoped to the cert
   you're actually looking at. */
.alp-cert-toggle-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.alp-cert-toggle-row .alp-cert-toggle { flex: 1; margin-bottom: 0; }
.alp-domain-filter-dropdown { flex-shrink: 0; }
.alp-domain-filter-toggle-btn { padding: 10px 14px; font-size: 12px; white-space: nowrap; }
.alp-domain-filter-dropdown .alp-filter-menu { right: 0; left: auto; min-width: 180px; }

/* Item 2/3: ONE table style shared by Leaderboard, Industry News, Free
   Resource by Ivies, and Discuss & Learn. Every certification block
   renders exactly 5 row-slots (padded with .alp-filler-row when there's
   less real data), so the panels line up with each other regardless of
   which certifications are selected. */
.alp-data-table { width: 100%; border-collapse: collapse; font-size: 13px; table-layout: fixed; }
.alp-data-table th, .alp-data-table td {
  padding: 8px 10px; border-bottom: 1px solid #eee; text-align: left;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.alp-data-table th { font-size: 10px; text-transform: uppercase; opacity: .6; font-weight: 700; }
.alp-data-table td a { color: var(--alp-navy) !important; text-decoration: none; font-weight: 700; }
.alp-data-table td a:hover { text-decoration: underline; }
.alp-data-table tbody tr.alp-data-row:hover { background: var(--alp-grey); }
.alp-data-table tr.alp-hidden-extra { display: none; }
.alp-data-table tr[data-hidden-by-domain-filter="true"] { display: none; }
/* Blank filler rows — same row height as a real row, no visible content,
   purely to hold the panel's height steady at 5 rows. */
.alp-data-table tr.alp-filler-row td { color: transparent; border-bottom-color: #f3f3f3; }
/* "No data yet" row — spans all columns, softer styling than a real row. */
.alp-data-table tr.alp-empty-row td { opacity: .6; font-style: italic; white-space: normal; }
/* Leaderboard's #1 row gets the same pink highlight the rest of the
   leaderboard's values use (below), just bolded to stand out as #1. */
.alp-data-table tr.alp-rank-first td { font-weight: 700; color: #e971e9 !important; }

/* Leaderboard values (rank, score, exam month, name, country, ID) all
   in #e971e9, per request — real .alp-data-row cells only. Lower
   specificity than the filler/empty-row rules above, so those keep
   their own transparent/faded styling regardless of table. */
.alp-leaderboard-table tbody tr.alp-data-row td { color: #e971e9; }

/* Industry News / Free Resources from Ivies / Discuss & Learn all share
   this 3-column shape: a wide primary content column on the left
   (Content / Discussion), and two compact metadata columns pushed
   right and right-aligned — Institution/Posted for the first two,
   Posts/Started for Discuss & Learn. */
.alp-3col-table th:nth-child(1), .alp-3col-table td:nth-child(1) { width: 62%; }
.alp-3col-table th:nth-child(2), .alp-3col-table td:nth-child(2),
.alp-3col-table th:nth-child(3), .alp-3col-table td:nth-child(3) {
  width: 19%; text-align: right;
}

/* Leaderboard: Rank # stays narrow (half a normal column); Theta and
   Score both get fixed character widths instead of a percentage — a
   percentage of this fairly narrow sidebar table wasn't wide enough to
   show Theta's full value (e.g. "-1.23") without it getting clipped by
   the shared text-overflow:ellipsis rule, same reasoning now applied to
   Score (up to 4 digits, "1600" max — SAT's 4-module scaled-score sum —
   or "N/A" for certifications with no scaled-total equivalent).
   table-layout:fixed is fine mixing fixed units (ch) with percentages on
   the other columns — the browser just allocates Theta's and Score's ch
   widths first, then splits the remaining width among the % columns.
   Exam Month gets a modest fixed slice; the remaining four columns
   (First Name, Last Name, Country, Accredify User-ID) split the rest
   evenly. */
.alp-leaderboard-table th:nth-child(1), .alp-leaderboard-table td:nth-child(1) {
  width: 6%;
}
.alp-leaderboard-table th:nth-child(2), .alp-leaderboard-table td:nth-child(2) {
  width: 10ch; min-width: 10ch;
}
.alp-leaderboard-table th:nth-child(3), .alp-leaderboard-table td:nth-child(3) {
  width: 7ch; min-width: 7ch;
}
.alp-leaderboard-table th:nth-child(4), .alp-leaderboard-table td:nth-child(4) {
  width: 12%;
}
.alp-leaderboard-table th:nth-child(5), .alp-leaderboard-table td:nth-child(5),
.alp-leaderboard-table th:nth-child(6), .alp-leaderboard-table td:nth-child(6),
.alp-leaderboard-table th:nth-child(7), .alp-leaderboard-table td:nth-child(7) {
  width: 15%;
}
.alp-leaderboard-table th:nth-child(8), .alp-leaderboard-table td:nth-child(8) {
  width: 16%;
}

/* "Psychometrics" link next to the Leaderboard heading — only rendered
   (see the .html.twig) for certifications flagged
   show_psychometrics_link, currently just PMP. Sits in the same
   .alp-cert-toggle-row flex layout Discuss & Learn already uses for
   its domain filter, so it lines up the same way. */
.alp-psychometrics-link {
  flex-shrink: 0; font-size: 12px; font-weight: 700; color: var(--alp-navy) !important;
  text-decoration: underline; white-space: nowrap; padding: 10px 4px;
}

/* "More" popup — a single reusable modal built once by js/landing.js and
   populated per click. Sized to roughly half the viewport per the
   request (not a cramped small window, not full-screen either), with
   its own scroll for the row list and page-by-page navigation in the
   footer. */
.alp-modal-overlay {
  display: none; position: fixed; inset: 0; z-index: 1000;
  background: rgba(10, 20, 35, .55);
  align-items: center; justify-content: center; padding: 24px;
}
.alp-modal-overlay.alp-open { display: flex; }
body.alp-modal-locked { overflow: hidden; }

.alp-modal-box {
  background: #fff; border-radius: var(--alp-radius); box-shadow: 0 20px 60px rgba(0,0,0,.35);
  width: 50vw; min-width: 420px; max-width: 900px;
  height: 70vh; max-height: 720px;
  display: flex; flex-direction: column; overflow: hidden;
}
@media (max-width: 720px) {
  .alp-modal-box { width: 100%; min-width: 0; height: 85vh; }
}

.alp-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; background: linear-gradient(135deg, rgba(13,60,110,.88) 0%, rgba(21,101,192,.88) 100%);
  flex: 0 0 auto;
}
.alp-modal-title { color: #fff !important; font-size: 16px; margin: 0; }
.alp-modal-close {
  background: none; border: none; color: #fff !important; font-size: 24px; line-height: 1;
  cursor: pointer; padding: 0 4px;
}

.alp-modal-body { flex: 1 1 auto; overflow-y: auto; padding: 8px 20px; }
.alp-modal-table { table-layout: auto; }
.alp-modal-table th, .alp-modal-table td { white-space: normal; color: #000; opacity: 1; font-weight: 400; }
/* Column headers inherit .alp-data-table th's opacity:.6 (deliberately
   faded in the compact main panels, to sit quietly above the data) —
   full opacity and solid black here, since the popup has room to just
   read like a normal table. */
.alp-modal-thead th { opacity: 1; color: #000; }
/* "Nothing here yet." placeholder rows (.alp-empty-row) fade/italicize
   in the compact main panels — reset to plain, full-contrast black
   here. This is the actual fix for "still looks grayed out": opacity
   is a separate property from color, so a faded pink is still visually
   a faded/gray pink — it needed opacity:1, not a different color. */
.alp-modal-tbody tr.alp-empty-row td {
  opacity: 1; font-style: normal; color: #000;
}
/* Section divider between certifications when the modal was opened
   from a panel-level "More certifications" click (multiple groups of
   rows in one popup) — not shown for a single-certification "More". */
.alp-modal-table tr.alp-modal-group-row td {
  background: var(--alp-grey); font-weight: 700; font-size: 12px; color: #000;
  text-transform: uppercase; letter-spacing: .02em; padding-top: 10px; padding-bottom: 10px;
}
/* Leaderboard popup only (js/landing.js toggles .alp-modal-leaderboard
   on the shared overlay based on which panel's "More certifications"
   was clicked) — real score rows in a darker, higher-contrast pink
   than the main table's #e971e9, for better readability against the
   popup's plain white background. :not(.alp-empty-row) is what keeps
   this from also tinting "Nothing here yet." rows (which carry both
   .alp-data-row and .alp-empty-row) — those stay solid black via the
   rule above instead. */
.alp-modal-overlay.alp-modal-leaderboard .alp-modal-tbody tr.alp-data-row:not(.alp-empty-row) td {
  color: #b3159e;
  font-weight: 400;
}

.alp-modal-footer {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center; gap: 16px;
  padding: 12px 20px; border-top: 1px solid #eee;
}
.alp-modal-prev, .alp-modal-next {
  background: var(--alp-grey); border: none; border-radius: 4px; padding: 8px 16px;
  font-size: 13px; font-weight: 700; color: var(--alp-navy) !important; cursor: pointer;
}
.alp-modal-prev:disabled, .alp-modal-next:disabled { opacity: .4; cursor: default; }
.alp-modal-page-indicator { font-size: 12px; opacity: .7; }

/* Hero CTA row (Explore / Modules Offered / Login-Create Account) —
   matches the sky-blue-tinted, Filter-Certifications-style buttons used
   on the global Slider-video content block. Absolutely positioned in
   the top-right corner of .alp-hero (which is already position:relative
   — see the rule near the top of this file), on one line at every
   breakpoint per request (wraps only if truly out of room on very
   narrow phones, rather than always stacking). z-index:3 keeps it above
   both .alp-hero-video (z-index:0) and the gradient overlay
   .alp-hero::before (z-index:1); .alp-hero-nasa-info also sits at
   z-index:3 in the same top-right corner, but the two never render
   together in practice (NASA info only shows for the Discovery launch
   clip) — if that ever changes, one of the two needs to move. */
.alp-hero-cta-row {
  position: absolute; top: 20px; left: 24px; z-index: 3;
  display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; gap: 12px;
  opacity: 1; transform: translateY(0);
  transition: opacity .2s ease, transform .2s ease;
}
.alp-hero-cta-btn {
  min-width: 150px; box-sizing: border-box;
  background: #3a7eed;
  border: 1px solid rgba(255, 255, 255, .35); border-radius: 4px;
  padding: 12px 16px; color: #fff !important;
  font-weight: 700; font-size: 15px; text-decoration: none !important;
  text-align: center; text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
  white-space: nowrap;
  transition: border-color .15s ease, background .15s ease;
}
.alp-hero-cta-btn:hover {
  background: #316bc9;
  border-color: rgba(255, 255, 255, .6);
}
@media (max-width: 900px) {
  .alp-hero-cta-row { top: 12px; left: 16px; gap: 8px; }
  .alp-hero-cta-btn { min-width: 110px; padding: 10px 10px; font-size: 13px; }
}
@media (max-width: 480px) {
  .alp-hero-cta-row { top: 8px; left: 0; right: 0; justify-content: center; gap: 6px; }
  .alp-hero-cta-btn { min-width: 0; padding: 8px 8px; font-size: 11px; white-space: normal; }
  /* Mobile-only scroll toggle — see js/landing.js
     (alp-hero-cta-scroll-toggle). Class is only ever added below this
     480px breakpoint, so this rule never affects desktop/tablet even
     if something added the class there unexpectedly. */
  .alp-hero-cta-row.alp-hero-cta-scrolled {
    opacity: 0; transform: translateY(-10px); pointer-events: none;
  }
}