/* ============================================================
   A2Z Salesforce — theme tokens
   Palette, typography and surfaces adopted from the inderap
   project (htdocs/inderap/public_html/assets/css/main.css) so the
   two sites share one visual language.
   Loaded AFTER style.css, so these values win.
   ============================================================ */
:root,
:root[data-theme="light"],
:root[data-theme="dark"] {
  /* --- inderap source tokens --- */
  --clr-primary:       #6C63FF;
  --clr-primary-dark:  #574FCC;
  --clr-primary-light: #EEF0FF;
  --clr-bg:            #F4F6FB;
  --clr-surface:       #FFFFFF;
  --clr-text:          #212529;
  --clr-muted:         #6B7280;
  --clr-border:        #DEE2E6;
  --clr-success:       #198754;
  --clr-danger:        #DC3545;
  --clr-warning:       #FFC107;
  --clr-footer-bg:     #0f172a;

  --radius-sm:   8px;
  --radius-md:  12px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-pill: 999px;

  --shadow-sm:   0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md:   0 4px 16px rgba(108,99,255,.10), 0 2px 6px rgba(0,0,0,.06);
  --shadow-lg:   0 12px 40px rgba(108,99,255,.15), 0 4px 12px rgba(0,0,0,.08);
  --shadow-card: 0 2px 12px rgba(0,0,0,.07);

  --nav-height: 72px;
  --transition: .22s cubic-bezier(.4,0,.2,1);
  --font-sans:  'Inter', system-ui, -apple-system, sans-serif;

  /* Headings and card titles. Uses the darker ramp step, not --clr-primary:
     #6C63FF on white is 4.32:1, which fails WCAG AA for the smaller H2s
     (e.g. 16px section headings on company pages). #574FCC is 6.18:1, so it
     passes at every size. Swap to var(--clr-primary) for the brighter purple. */
  --heading-color: var(--clr-primary-dark);

  /* Footer: light purple gradient, dark purple text. */
  --footer-bg:     linear-gradient(135deg, #F5F3FF 0%, #E9E5FF 55%, #DDD8FF 100%);
  --footer-text:   #2E2873;
  --footer-muted:  #4E4796;
  --footer-border: rgba(87, 79, 204, .18);

  /* --- map the existing a2z variable names onto the above so every
         current rule picks up the new palette without being rewritten --- */
  --primary:       var(--clr-primary);
  --primary-dark:  var(--clr-primary-dark);
  --primary-light: var(--clr-primary-light);
  --primary-rgb:   108, 99, 255;
  --accent:        var(--clr-primary);
  --accent-dark:   var(--clr-primary-dark);
  --secondary:     var(--clr-primary-dark);
  --secondary-h:   var(--clr-primary);
  --success:       var(--clr-success);
  --danger:        var(--clr-danger);
  --warning:       var(--clr-warning);

  --white:      var(--clr-surface);
  --off-white:  var(--clr-bg);
  --light-gray: var(--clr-border);
  --mid-gray:   var(--clr-muted);
  --border:     var(--clr-border);
  --text-dark:  var(--clr-text);
  --text-body:  var(--clr-text);
  --text-muted: var(--clr-muted);

  --dark-900: var(--clr-footer-bg);
  --dark-800: #16213b;
  --dark-700: #1f2a44;
  --dark-600: var(--clr-border);
  --dark-500: var(--clr-muted);
}

html { font-size: 16px; scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  background-color: var(--clr-bg);
  color: var(--clr-text);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 { font-weight: 700; line-height: 1.2; color: var(--clr-text); }
/* Every H1 and H2 is purple. !important is deliberate: Bootstrap sets
   color: var(--bs-heading-color) (= inherit) on all headings, and page-level
   <style> blocks colour specific ones by class (.auth-title, .error-heading),
   either of which outranks a bare type selector. Consequence: to give a single
   heading a different colour in future, that rule also needs !important. */
h1, h2 { color: var(--heading-color) !important; }
a { color: var(--clr-primary-dark); transition: color var(--transition); }
a:hover { color: var(--clr-primary); }


.site-footer { background-color: var(--clr-footer-bg); }
.navbar { background-color: var(--clr-surface); border-bottom: 1px solid var(--clr-border); }
.btn-primary { background-color: var(--clr-primary); border-color: var(--clr-primary); color: #fff; }
.btn-primary:hover { background-color: var(--clr-primary-dark); border-color: var(--clr-primary-dark); color: #fff; }

/* ------------------------------------------------------------
   Site-wide consistency pass
   Brings every page in line with the certification test pages.
   ------------------------------------------------------------ */

/* Brand wordmark — bold everywhere it appears (nav, footer, mobile). */
.brand-name,
.nav-brand .brand-name,
.footer-brand .brand-name,
.brand-name span {
  font-weight: 800 !important;
  letter-spacing: -0.01em;
}
.brand-icon,
.sb-brand-mark {
  background-color: var(--clr-primary) !important;
  color: #fff !important;
  font-weight: 800;
}

/* The old teal ramp (#00C9A7 / #00A98B / rgba(0,201,167,…)) has been replaced
   at source across style.css, responsive.css, portal.css, admin.css and every
   inline style, so no compatibility shim is needed here. */

/* ── Hero / page headers ──────────────────────────────────────
   Light surface, not a purple fill. Purple stays as an accent on
   buttons, links and icons.
   The old heroes were dark, so ~50 pages carry inline color:#fff and
   SVG stroke="#fff" inside them; on a light background those would be
   invisible. The rules below neutralise both:
     - inline style="color:#fff"  needs !important to be overridden
     - stroke="#fff" is a presentation attribute, so plain CSS wins
   ------------------------------------------------------------ */
.hero, .page-hero, .iq-page-header, .blog-hero, .test-hero, .hub-hero,
.co-profile-hero, .job-hero, .cta-banner {
  /* longhand, not the `background:` shorthand — shorthand resets every
     background-* sub-property and resolves less predictably */
  background-color: var(--clr-surface) !important;
  background-image: none !important;
  color: var(--clr-text) !important;
  border-bottom: 1px solid var(--clr-border);
}
/* Hero descendants inherited white text from the dark design, set in three
   different places: style.css (.blog-hero p), page-level <style> blocks
   (.hero-eco-text strong on index.html) and inline style attributes. Listing
   element selectors misses most of them, so force readable text on every plain
   descendant. Elements that carry their own background — buttons, badges, cloud
   chips — are excluded so they keep their own colour, as are SVG shapes. */
:is(.hero, .page-hero, .iq-page-header, .blog-hero, .test-hero, .hub-hero,
    .co-profile-hero, .job-hero, .cta-banner)
  *:where(:not([class*="btn"]):not([class*="badge"]):not([class*="cloud-"]):not(svg):not(path):not(circle):not(rect):not(line):not(polyline)) {
  color: var(--clr-text) !important;
}

/* Hero headings are purple, including everything inside them (the homepage
   H1 wraps "Salesforce" in an <em>). (0,1,1) beats the catch-all's (0,1,0). */
:is(.hero, .page-hero, .iq-page-header, .blog-hero, .test-hero, .hub-hero,
    .co-profile-hero, .job-hero, .cta-banner) :is(h1, h2),
:is(.hero, .page-hero, .iq-page-header, .blog-hero, .test-hero, .hub-hero,
    .co-profile-hero, .job-hero, .cta-banner) :is(h1, h2) *,
.co-hero-name, .job-hero-title {
  color: var(--heading-color) !important;
}
.hero p, .page-hero p, .iq-page-header p, .blog-hero p, .test-hero p,
.hub-hero p, .co-profile-hero p, .job-hero p,
.co-hero-meta, .co-hero-meta span, .job-hero-meta, .job-hero-meta span,
.hero-desc, .test-meta {
  color: var(--clr-muted) !important;
}
/* Elements that hard-code white inline, inherited from the dark design.
   Both notations occur in the markup — hex (#fff) and rgba(255,255,255,.7),
   the latter on breadcrumb links — so both are matched. Written out rather
   than with :is() so the selector works in older engines too. */
.hero [style*="#fff"],
.hero [style*="#FFF"],
.hero [style*="255,255,255"],
.hero [style*="255, 255, 255"],
.hero [style*="color:white"],
.hero [style*="color: white"],
.page-hero [style*="#fff"],
.page-hero [style*="#FFF"],
.page-hero [style*="255,255,255"],
.page-hero [style*="255, 255, 255"],
.page-hero [style*="color:white"],
.page-hero [style*="color: white"],
.iq-page-header [style*="#fff"],
.iq-page-header [style*="#FFF"],
.iq-page-header [style*="255,255,255"],
.iq-page-header [style*="255, 255, 255"],
.iq-page-header [style*="color:white"],
.iq-page-header [style*="color: white"],
.blog-hero [style*="#fff"],
.blog-hero [style*="#FFF"],
.blog-hero [style*="255,255,255"],
.blog-hero [style*="255, 255, 255"],
.blog-hero [style*="color:white"],
.blog-hero [style*="color: white"],
.test-hero [style*="#fff"],
.test-hero [style*="#FFF"],
.test-hero [style*="255,255,255"],
.test-hero [style*="255, 255, 255"],
.test-hero [style*="color:white"],
.test-hero [style*="color: white"],
.hub-hero [style*="#fff"],
.hub-hero [style*="#FFF"],
.hub-hero [style*="255,255,255"],
.hub-hero [style*="255, 255, 255"],
.hub-hero [style*="color:white"],
.hub-hero [style*="color: white"],
.co-profile-hero [style*="#fff"],
.co-profile-hero [style*="#FFF"],
.co-profile-hero [style*="255,255,255"],
.co-profile-hero [style*="255, 255, 255"],
.co-profile-hero [style*="color:white"],
.co-profile-hero [style*="color: white"],
.job-hero [style*="#fff"],
.job-hero [style*="#FFF"],
.job-hero [style*="255,255,255"],
.job-hero [style*="255, 255, 255"],
.job-hero [style*="color:white"],
.job-hero [style*="color: white"],
.cta-banner [style*="#fff"],
.cta-banner [style*="#FFF"],
.cta-banner [style*="255,255,255"],
.cta-banner [style*="255, 255, 255"],
.cta-banner [style*="color:white"],
.cta-banner [style*="color: white"] {
  color: var(--clr-text) !important;
}

/* SVG icons drawn with stroke="#fff" */
.hero svg, .page-hero svg, .iq-page-header svg, .blog-hero svg, .test-hero svg,
.hub-hero svg, .co-profile-hero svg, .job-hero svg {
  stroke: var(--clr-primary);
  color: var(--clr-primary);
}
.hero a:not(.btn), .page-hero a:not(.btn), .test-hero a:not(.btn),
.hub-hero a:not(.btn), .breadcrumb a {
  color: var(--clr-primary-dark) !important;
  text-decoration: none;
}
/* Logo tiles used a translucent white wash that disappears on light. */
.co-hero-avatar, .job-co-logo {
  background-color: var(--clr-primary-light) !important;
  border: 1px solid var(--clr-border) !important;
}
/* The outline button was white-on-dark; make it purple-on-light. */
.btn-hero-outline {
  border: 2px solid var(--clr-primary) !important;
  color: var(--clr-primary) !important;
  background: transparent !important;
  font-family: inherit;
  cursor: pointer;
  appearance: none;
}
.btn-hero-outline:hover {
  background-color: var(--clr-primary) !important;
  color: #fff !important;
}
/* Admin topbar keeps its own treatment. */
.admin-topbar { background-color: var(--clr-surface) !important; color: var(--clr-text) !important; }

/* Buttons */
/* White on --clr-primary (#6C63FF) is 4.32:1 — just under the 4.5:1 WCAG AA
   threshold for normal text. Filled buttons use the darker ramp value, which
   measures 6.1:1, so button labels pass AA at any size. */
.btn-primary, .btn-apply, .jo-apply, .pr-link, .co-link, .jo-details {
  background-color: var(--clr-primary-dark) !important;
  border-color: var(--clr-primary-dark) !important;
  color: #fff !important;
}
.btn-primary:hover, .btn-apply:hover {
  background-color: #443CA8 !important;
  border-color: #443CA8 !important;
}
.btn-outline, .btn-secondary {
  border-color: var(--clr-primary) !important;
  color: var(--clr-primary) !important;
  background: transparent !important;
}
.btn-outline:hover, .btn-secondary:hover {
  background-color: var(--clr-primary) !important;
  color: #fff !important;
}

/* Cards and surfaces */
.feature-card, .cert-card, .cert-index-card, .iq-card, .eco-card, .blog-card,
.blog-featured-card, .hub-cert-card, .contact-reason-card, .quick-card,
.stat-card, .item-card, .section-block, .sidebar-info, .question-card,
.co-card, .jo-card, .pr-card, .accordion-group {
  background-color: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

/* Accents that were teal */
.cloud-badge, .badge-sm-type, .jo-badge-type, .tab-count {
  background-color: var(--clr-primary-light) !important;
  color: var(--clr-primary-dark) !important;
}
.accordion-icon { color: var(--clr-primary) !important; }
/* Number sits in a filled purple circle — the digit must be white. */
.question-num { background: var(--clr-primary-dark) !important; color: #fff !important; }
.nav-link.active, .nav-link:hover, .filter-btn.active, .iq-tab-btn.active {
  color: var(--clr-primary) !important;
}
.filter-btn.active, .iq-tab-btn.active { border-color: var(--clr-primary) !important; }

/* Quiz review states */
.option-label.option-correct { background: #E8F5EC !important; border-color: var(--clr-success) !important; }
.option-label.option-wrong   { background: #FDECEE !important; border-color: var(--clr-danger)  !important; }
.option-label { border: 1px solid var(--clr-border); border-radius: var(--radius-sm); }
.option-letter {
  background-color: var(--clr-primary-light);
  color: var(--clr-primary-dark);
  font-weight: 700;
}

/* Footer */
.site-footer { background-color: var(--clr-footer-bg) !important; }

/* Hero eyebrow label: was white on the primary purple at 3.57:1. */
[data-theme="light"] .hero-label, [data-theme="dark"] .hero-label,
.hero-label, .hero-label * {
  background-color: var(--clr-primary-light) !important;
  color: var(--clr-primary-dark) !important;
}

/* ── Cards: no underlined text ──────────────────────────────────
   Bootstrap underlines every <a> by default, so any card that is a link,
   or contains one, showed underlined titles and body text. Covers every
   card family on the site (matched by "card" in the class name) plus the
   link-style card rows that don't carry that word. Hover gets a colour
   change instead, so the link affordance is not lost. Keyboard focus is
   unaffected — that is signalled by the outline, not the underline. */
[class*="card"],
[class*="card"] a, [class*="card"] a:hover, [class*="card"] a:focus,
a[class*="card"], a[class*="card"]:hover, a[class*="card"]:focus,
.hero-eco-link, .hero-eco-link:hover, .hero-eco-link *,
.about-eco-link, .about-eco-link:hover, .about-eco-link *,
.quick-link, .quick-link:hover,
.blog-title-link, .blog-title-link:hover,
.mini-link, .mini-link:hover, .detail-btn-sm, .detail-btn-sm:hover,
.apply-btn-sm, .apply-btn-sm:hover, .pr-ext-link, .pr-ext-link:hover,
.sb-view-link, .sb-view-link:hover, .hub-back-link, .hub-back-link:hover,
.job-mini a, .job-mini a:hover, .section-block a, .section-block a:hover,
.accordion-item a, .accordion-item a:hover,
/* listing rows on companies/jobs/products are cards without "card" in the name */
.company-row, .company-row a, .company-row a:hover,
.job-row, .job-row a, .job-row a:hover,
.product-row, .product-row a, .product-row a:hover,
.co-link, .jo-apply, .jo-details, .pr-link {
  text-decoration: none !important;
}
.blog-title-link:hover, .hero-eco-link:hover strong, .about-eco-link:hover strong,
.quick-link:hover, .mini-link:hover, .detail-btn-sm:hover {
  color: var(--clr-primary-dark) !important;
}

/* ── Card headers: purple ───────────────────────────────────────
   "List Your Business" (.hero-card-title), the other *-card-title /
   *-card-header classes, the heading inside every card family, and the
   title line of the companies/jobs/products listing rows. */
.hero-card-title, .form-card-title,
[class*="card"] :is(h2, h3, h4), [class*="card"] :is(h2, h3, h4) a,
[class*="card-title"], .co-name, .jo-title, .pr-name, .mini-name, .job-mini-title,
:is(.hero, .page-hero) .hero-card-title,
/* titles of the three link-cards inside "List Your Business" (<strong>, not headings) */
.hero-eco-text strong, .hero-eco-link strong, .about-eco-link strong,
.action-title {
  color: var(--heading-color) !important;
}

/* ── Navigation ────────────────────────────────────────────────
   Theme toggle removed; the menu sits hard right. */
.theme-btn { display: none !important; }
/* Desktop only — below 993px the menu is a vertical drop-down (the breakpoint
   include.js uses), where these would act on the wrong axis. */
@media (min-width: 993px) {
  .nav-links { margin-left: auto; justify-content: flex-end; }
}

/* ── Page-load flash ───────────────────────────────────────────
   The preloader overlay was var(--dark-900) = #0f172a, so every page opened
   on a dark slate screen until include.js finished. White instead, so the
   load is seamless with the white navbar underneath. */
body::before { background: var(--clr-surface) !important; }

/* ── Footer: light purple gradient, dark purple text ──────────── */
.site-footer {
  background: var(--footer-bg) !important;
  color: var(--footer-text) !important;
  border-top: 1px solid var(--footer-border);
}
.site-footer h4,
.site-footer .footer-col h4 { color: var(--footer-text) !important; }
.site-footer p,
.site-footer .footer-disclaimer,
.site-footer .footer-bottom p { color: var(--footer-muted) !important; }
.site-footer a,
.site-footer .footer-links a,
.site-footer .footer-bottom a { color: var(--footer-text) !important; }
.site-footer a:hover,
.site-footer .footer-links a:hover,
.site-footer .footer-bottom a:hover { color: var(--clr-primary-dark) !important; }
.site-footer .footer-links a::before { color: var(--clr-primary) !important; }
.site-footer .footer-bottom { border-top: 1px solid var(--footer-border) !important; }
.footer-disclaimer { font-size: .8rem; margin-bottom: 10px; }

/* Certification track cards ("Choose Your Certification Track"): the header
   strip is a purple gradient, so its title and subtitle stay white. Excluded
   from the purple card-header rule above; (0,2,1) + !important also beats the
   generic [class*="card"] :is(h2,h3,h4) rule. */
.cert-card .cert-card-header h3,
.cert-card .cert-card-header p,
.cert-card .cert-card-header .cert-num,
.cert-card-header h3, .cert-card-header p {
  color: #fff !important;
}
/* The strip ran into #6C63FF (plus a white ::after wash), where the 14px white
   subtitles measured 3.8–4.1:1 — below AA's 4.5. One step deeper on both ends
   keeps it clearly purple and puts every line comfortably above 4.5. */
.cert-card-header {
  background: linear-gradient(135deg, #3F3799 0%, var(--clr-primary-dark) 100%) !important;
}

/* ── Interview pages: full width ─────────────────────────────── */
.test-wrapper.iq-wrapper { max-width: none; padding-left: 0; padding-right: 0; }
.test-wrapper.iq-wrapper > .container-xl { max-width: none; width: 100%; padding-left: 24px; padding-right: 24px; }

/* ── Quiz feedback (instant mode + results) ───────────────────── */
.q-feedback { min-height: 0; margin-top: 10px; }
.q-fb { display: inline-block; font-size: .85rem; font-weight: 600; padding: 6px 12px; border-radius: 8px; }
.q-fb-ok  { background: #E8F5EC; color: #146C3A; }
.q-fb-bad { background: #FDECEE; color: #9B1C2C; }
.question-card.is-checking { opacity: .7; }
.mode-active-badge { margin: 0 0 20px; padding: 10px 16px; border-radius: 10px; font-size: .88rem; font-weight: 600;
                     background: var(--clr-primary-light); color: var(--clr-primary-dark); }
.quiz-score-card { text-align: center; padding: 26px; border-radius: var(--radius-lg); background: var(--clr-surface);
                   box-shadow: var(--shadow-card); margin-top: 8px; }
.quiz-score-pct { font-size: 2.2rem; font-weight: 800; margin: 6px 0; }
.quiz-score-pct.is-pass { color: #146C3A; }  .quiz-score-pct.is-fail { color: #9B1C2C; }
.quiz-score-meta { color: var(--clr-muted); margin-bottom: 14px; }

/* ── Blog post header ─────────────────────────────────────────
   Left-aligned, full-width text. Scoped to .blog-post-hero so the shared
   .page-hero (about, companies, jobs, products, contact) stays centred.
   style.css capped hero paragraphs at 560px and centred them. */
.blog-post-hero { text-align: left !important; }
.blog-post-hero .breadcrumb { justify-content: flex-start; }
.blog-post-hero h1 { text-align: left !important; }
.blog-post-hero p { max-width: none !important; width: 100%; margin: 0 !important; text-align: left !important; }

/* Category tag on blog posts: white on grey was overridden to dark-on-grey
   (≈2.9:1) by the hero text rule. Use the purple pair instead. */
/* (0,2,0) and later in the file, so it beats the hero rule that turns inline
   white text dark ( .page-hero [style*="#fff"] ), which also sits at (0,2,0). */
.page-hero .blog-tag, .blog-post-hero .blog-tag, .blog-card .blog-tag, .blog-tag {
  background: var(--clr-primary-dark) !important; color: #fff !important;
}

/* Interview accordion: the question button sits inside an <h3> (accessible
   accordion pattern, and a real heading for crawlers). Neutralise heading styles
   so it looks exactly as before. */
.accordion-title { margin: 0; font-size: inherit; font-weight: inherit; line-height: inherit; color: inherit; }
.test-crosslink { margin-top: 10px; font-size: .92rem; }
.test-crosslink a { color: var(--clr-primary-dark); font-weight: 600; }
.test-hero .breadcrumb { display: flex; flex-wrap: wrap; gap: 6px; font-size: .82rem; margin-bottom: 14px; }