/* ==========================================================================
   CertsPoint — site-wide colour system (midnight navy / teal / soft white, Option A)
   --------------------------------------------------------------------------
   Loaded ONLY on certspoint.com: the shared layouts link
   tenant_asset('css/theme.css'), which resolves to assets/frontend/{theme}/css/theme.css
   and no other tenant has this file. It loads after page <head> styles but before
   inline <style> blocks inside <body> (navbar, footer, some pages), so overrides are
   prefixed with "html body" for a small specificity lift instead of !important.
   !important is used only where the original value is an inline style="" attribute
   or is itself !important (marked "inline" below).

   The homepage hero (cpx-hero / cpx-features) has its own tokens in hero-progress.css.
   Not recoloured on purpose:
   vendor logos, the CERTIFIED shield image, the site logo, semantic success / error /
   warning / disabled colours, practice-engine answer states (correct-answer panel,
   selected options), the green trust stars, and Stripe / PayPal / Google Pay brand marks.

   Rollback: delete this file.
   ========================================================================== */

:root {
    /* Approved palette — Option A: Midnight Navy + Electric Teal + Soft White (2026-10-30) */
    --cp-primary:        #142B45;   /* midnight navy — white text 14.37:1 */
    --cp-primary-dark:   #0D2035;   /* footer */
    --cp-primary-light:  #233F5C;   /* white text 10.84:1 */
    --cp-secondary:      #087E83;   /* deep teal */
    --cp-accent:         #087F8C;   /* CTA teal — white text 4.75:1, on white 4.75:1 */
    --cp-accent-hover:   #066874;   /* white text 6.48:1 */
    --cp-background:     #F8FAFC;
    --cp-surface:        #FFFFFF;
    --cp-surface-muted:  #F1F5F9;
    --cp-heading:        #17283B;   /* 14.97:1 on white */
    --cp-text:           #526174;   /* 6.32:1 on white, 6.04:1 on background */
    --cp-text-muted:     #64748B;   /* 4.76:1 on white, 4.55:1 on background */
    --cp-border:         #E2E8F0;
    --cp-success:        #15803D;
    --cp-warning:        #B45309;
    --cp-error:          #B91C1C;
    --cp-white:          #FFFFFF;

    /* Roles used by the rules below (names kept from the previous system) */
    --cp-brand-primary:        var(--cp-accent);
    --cp-brand-primary-hover:  var(--cp-accent-hover);
    --cp-brand-primary-strong: var(--cp-accent-hover);  /* teal TEXT on tinted chips: 5.64:1 on accent-soft (base teal is only 4.13:1) */
    --cp-brand-primary-rgb:    8, 127, 140;
    --cp-brand-secondary:      var(--cp-primary);
    --cp-brand-secondary-hover:var(--cp-primary-light);
    --cp-text-heading:         var(--cp-heading);
    --cp-text-body:            var(--cp-text);
    --cp-surface-soft:         var(--cp-background);
    --cp-accent-soft:          #E3F2F3;   /* teal tint */
    --cp-accent-soft-border:   #B9DFE2;
    --cp-accent-faint:         #F2F9FA;
    --cp-dark:                 var(--cp-primary-dark);
    --cp-on-dark-text:         #B4C1D0;   /* 9.00:1 on --cp-dark */
    --cp-on-dark-muted:        #93A3B8;   /* 6.41:1 on --cp-dark */
    --cp-focus:                var(--cp-accent);   /* 4.75:1 vs white, 4.13:1 vs tint (>= 3:1 non-text) */
    --cp-focus-on-dark:        #7FD4DB;   /* 9.68:1 vs --cp-dark, 8.45:1 vs navy */

    /* Shared sections already read these (dynamic branding) — no database change. */
    --tenant-primary:          var(--cp-brand-primary);
    --tenant-secondary:        var(--cp-brand-secondary);
}

/* ── Global: content links, form focus, keyboard focus ─────────────────────── */
/* :where() keeps this at (0,0,2): above Bootstrap's bare "a", below any component rule such as ".x a" */
html body :where(a:not([class]))    { color: var(--cp-brand-primary); }
html body :where(a:not([class]):hover, a:not([class]):focus) { color: var(--cp-brand-primary-hover); }

html body .form-control:focus {
    border-color: var(--cp-brand-primary);
    box-shadow: 0 0 0 3px rgba(var(--cp-brand-primary-rgb), .15);
}

html body :focus-visible            { outline: 2px solid var(--cp-focus); outline-offset: 2px; }
html body .cf :focus-visible,
html body .cph-final-cta__inner :focus-visible,
html body .cpv2-cta :focus-visible,
html body .cc-demo-toolbar :focus-visible,
html body .cc-demo-bottom-bar :focus-visible { outline-color: var(--cp-focus-on-dark); }

/* Tailwind utilities used by the policy / about pages */
html body .text-blue-600,
html body .text-blue-700            { color: var(--cp-brand-primary); }
html body .text-blue-800            { color: var(--cp-text-heading); }
/* inline: FAQ page title */
html body h1[style*="color:#1e40af"] { color: var(--cp-text-heading) !important; }

/* Secondary text that was below WCAG AA (values chosen within the neutral palette) */
html body .text-muted               { color: var(--cp-text-muted); }               /* was #777: 4.48:1 → 5.17:1 */
html body .cph-trending__vendor,
html body .cph-review__date,
html body .cph-review__country      { color: var(--cp-text-muted); }               /* was #9ca3af: 2.54:1 → 5.17:1 */
html body .cph-study__line2         { color: #7A8699; }                            /* large heading line: 3.69:1 */
html body .cpp-catalog-about__eyebrow { color: #5B6B7E; }                          /* 5.46:1 */

/* Legacy breadcrumb bar (login, register, contact, catalog): dark slate → light, and the
   catalog's "Home" link was white on a light bar (invisible). */
html body .breadback                { background: var(--cp-surface-soft); border-bottom: 1px solid var(--cp-border); }
html body .breadback .breadcrumb li { color: var(--cp-brand-primary); }
html body .breadback .breadcrumb li a { color: var(--cp-text-body); }
html body .breadback .breadcrumb li a:hover { color: var(--cp-brand-primary); }

/* Legacy buttons (login, register, contact) */
html body .btn-gray,
html body .contact-us-page .btn-submit {
    background-color: var(--cp-brand-primary);
    border-color: var(--cp-brand-primary);
    color: #FFFFFF;
}
html body .btn-gray:hover,
html body .btn-gray:focus,
html body .contact-us-page .btn-submit:hover,
html body .contact-us-page .btn-submit:focus {
    background-color: var(--cp-brand-primary-hover);
    border-color: var(--cp-brand-primary-hover);
    color: #FFFFFF;
}

/* ==========================================================================
   Header (CertsPoint floating pill, #cp-header)
   ========================================================================== */
html body .cp-nav-lnk               { color: #2A3B52; }
html body .cp-nav-lnk:hover,
html body .cp-nav-btn:hover         { background: var(--cp-surface-soft); color: var(--cp-text-heading); }

html body .cp-btn-in                { border-color: var(--cp-brand-primary); color: var(--cp-brand-primary); }
html body .cp-btn-in:hover          { background: var(--cp-accent-soft); color: var(--cp-brand-primary-hover); }
html body .cp-btn-gs                { background: var(--cp-brand-primary); }
html body .cp-btn-gs:hover          { background: var(--cp-brand-primary-hover); }

html body .cp-dd-inner              { border-color: var(--cp-border); box-shadow: 0 14px 35px rgba(13, 32, 53, .12); }
html body .cp-dd-label              { color: var(--cp-text-muted); }
html body .cp-dd-item,
html body .cp-dd-code               { color: var(--cp-text-heading); }
html body .cp-dd-name               { color: var(--cp-text-muted); }
html body .cp-dd-item:hover,
html body .cp-dd-viewall:hover      { background: var(--cp-accent-soft); }
html body .cp-dd-viewall            { color: var(--cp-brand-primary); }
html body .cp-dd-viewall:hover      { color: var(--cp-brand-primary-strong); }

html body .cp-mob-lnk               { color: #2A3B52; }
html body .cp-mob-lnk:hover         { background: var(--cp-surface-soft); }
html body .cp-srch-icon-btn         { color: var(--cp-text-body); }
html body .cp-srch-icon-btn:hover   { background: var(--cp-surface-soft); color: var(--cp-text-heading); }
html body .cp-mob-search            { background: var(--cp-surface-soft); border-color: var(--cp-border); }

/* inline: mobile drawer buttons, "View All Exams", "See all results", search input row */
#cp-header a[style*="background:#2563eb"]          { background: var(--cp-brand-primary) !important; }
#cp-header a[style*="solid #2563eb"]               { border-color: var(--cp-brand-primary) !important; }
#cp-header a[style*="color:#2563eb"]               { color: var(--cp-brand-primary) !important; }
#cp-header [style*="border-color:#2563eb"],
#cp-header [style*="border-color: rgb(37, 99, 235)"] { border-color: var(--cp-brand-primary) !important; }
/* inline: hover tints written by onmouseover handlers */
#cp-header [style*="background: rgb(239, 246, 255)"] { background: var(--cp-accent-soft) !important; }
#cp-header [style*="background: rgb(248, 250, 252)"],
#cp-header [style*="background: rgb(241, 245, 249)"] { background: var(--cp-surface-soft) !important; }

/* ==========================================================================
   Footer (.cf)
   ========================================================================== */
html body .cf                       { background: var(--cp-dark); color: var(--cp-on-dark-text); }
html body .cf a                     { color: var(--cp-on-dark-text); }
html body .cf a:hover               { color: #FFFFFF; }
html body .cf-accent {
    background: linear-gradient(90deg, transparent 0%, rgba(var(--cp-brand-primary-rgb), .55) 25%,
                rgba(127, 212, 219, .45) 50%, rgba(var(--cp-brand-primary-rgb), .55) 75%, transparent 100%);
}
html body .cf-brand-copy,
html body .cf-links a               { color: var(--cp-on-dark-text); }
html body .cf-links a:hover         { color: #FFFFFF; }
html body .cf-stat-lbl,
html body .cf-secure-sub,
html body .cf-copyright,
html body .cf-bottom-nav a          { color: var(--cp-on-dark-muted); }
html body .cf-bottom-nav a:hover    { color: #FFFFFF; }
html body .cf-secure-title          { color: #E8EEF5; }
/* inline: the original hover colour is !important */
html body .cf-social-btn:hover {
    background: rgba(var(--cp-brand-primary-rgb), .28);
    border-color: rgba(127, 212, 219, .35);
    color: var(--cp-accent-soft) !important;
}

/* ==========================================================================
   Homepage sections below the hero (hero tokens: hero-progress.css)
   ========================================================================== */
/* Section backgrounds: soft white instead of the warm #F9F8F6 / neutral #FAFAFA set in home.css */
html body .cph-journey              { background: var(--cp-surface-soft); }
html body .cph-faq                  { background: var(--cp-surface-soft); border-top-color: var(--cp-border); }

/* Four principles */
html body .cph-principles__icon     { background: var(--cp-accent-soft); }
html body .cph-principles__icon svg { color: var(--cp-brand-primary); }

/* Three steps: decorative numerals (01 / 02 / 03) */
html body .cph-journey__step:nth-child(1) .cph-journey__number { color: #E2E8F0; }
html body .cph-journey__step:nth-child(2) .cph-journey__number { color: #B9DFE2; }

/* Vendor grid button */
html body .cph-study__btn           { background: var(--cp-brand-secondary); }
html body .cph-study__btn:hover     { background: var(--cp-brand-secondary-hover); }

/* Most In-Demand Practice Exams */
html body .cph-trending__code       { color: var(--cp-brand-primary); }
html body .cph-trending__item:hover .cph-trending__code { color: var(--cp-brand-primary-hover); }
html body .cph-trending__item:hover { background: var(--cp-surface-soft); }
html body .cph-trending__item:focus-visible { outline-color: var(--cp-focus); }

/* FAQ */
html body .cph-faq__number          { color: var(--cp-brand-primary); }
html body .cph-faq__button:hover .cph-faq__question { color: var(--cp-brand-primary); }
html body .cph-faq__button:focus-visible { outline-color: var(--cp-focus); }
html body .cph-faq__icon--open      { border-color: var(--cp-brand-primary); }
html body .cph-faq__icon--open svg  { color: var(--cp-brand-primary); }

/* Final call to action band */
html body .cph-final-cta__inner     { background: var(--cp-brand-secondary); }
html body .cph-final-cta__accent    { color: #7FD4DB; }               /* 8.45:1 on navy */
html body .cph-final-cta__description { color: #CBD5E1; }             /* 9.68:1 */
html body .cph-final-cta__primary,
html body .cph-final-cta__primary:hover { color: var(--cp-brand-primary); }
html body .cph-final-cta__search    { border-color: rgba(127, 212, 219, .45); }
html body .cph-final-cta__search:focus-within { border-color: rgba(127, 212, 219, .9); }
html body .cph-final-cta__search-icon { color: #B4C1D0; }
html body .cph-final-cta__search-input { color: #F1F5F9; }
html body .cph-final-cta__search-input::placeholder { color: rgba(203, 213, 225, .8); }

/* ==========================================================================
   Catalog: All Certification Vendors (/exams)
   ========================================================================== */
html body .cc-vendor-list-bc        { background: var(--cp-surface-soft); }
html body .cc-vendor-list-count {
    background: var(--cp-accent-soft);
    border-color: var(--cp-accent-soft-border);
    color: var(--cp-brand-primary-strong);
}
html body .cc-vendor-card:hover,
html body .cc-vendor-card:focus {
    border-color: var(--cp-brand-primary);
    box-shadow: 0 4px 16px rgba(var(--cp-brand-primary-rgb), .12);
    color: var(--cp-brand-primary);
}
html body .cc-vendor-card:focus-visible { outline: 2px solid var(--cp-focus); outline-offset: 2px; }
html body .cc-vendor-initials       { background: var(--cp-accent-soft); color: var(--cp-brand-primary-strong); }

/* ==========================================================================
   Vendor page (/exams/{vendor})
   ========================================================================== */
html body .cpp-popular-code,
html body .cpp-all-exams__code      { color: var(--cp-brand-primary); }
html body .cpp-popular-cell:hover,
html body .cpp-popular-cell:focus,
html body .cpp-all-exams__item:hover,
html body .cpp-all-exams__item:focus { background: var(--cp-surface-soft); }
/* Warm taupe secondary text (inline styles in vendor.blade.php) → palette slate */
html body .cpp-popular-hd-sub,
html body .cpp-popular-qcount,
html body .cpp-all-exams__more,
html body .cpp-all-exams__questions { color: var(--cp-text-muted); }                /* 4.76:1 */
html body .cpp-catalog-about__content p { color: var(--cp-text-body); }            /* 6.32:1 */
html body .cpv2-cta                 { background: var(--cp-brand-secondary); }
html body .cpv2-cta-copy p          { color: #CBD5E1; }
html body .cpv2-cta-btn             { background: var(--cp-brand-primary); }
html body .cpv2-cta-btn:hover,
html body .cpv2-cta-btn:focus       { background: var(--cp-brand-primary-hover); }

/* ==========================================================================
   Exam overview page (/exams/{vendor}/{exam})
   ========================================================================== */
html body .cv-breadback             { background: var(--cp-surface-soft); }
html body .cv-hero                  { background: linear-gradient(135deg, #0D2035 0%, #142B45 50%, #10253D 100%); }
html body .cv-hero::before {
    background-image: radial-gradient(circle at 20% 30%, rgba(var(--cp-brand-primary-rgb), .16) 0%, transparent 50%),
                      radial-gradient(circle at 80% 70%, rgba(127, 212, 219, .07) 0%, transparent 50%);
}
html body .cv-card-heading,
html body .cv-why-heading,
html body .cv-feature-title,
html body .cv-table td:first-child,
html body .ec-container h2,
html body .ec-container h3          { color: var(--cp-text-heading); }
html body .cv-table td:first-child  { background: var(--cp-surface-soft); }
html body .cv-table td:last-child   { background: #FCFDFE; }
html body .cv-table-icon,
html body .cv-why-check,
html body .cv-feature-icon          { background: var(--cp-accent-soft); color: var(--cp-brand-primary); }
html body .cv-why                   { background: var(--cp-accent-faint); border-color: var(--cp-brand-primary); }
html body .cv-why-list li           { border-bottom-color: #D5ECEE; }
html body .cv-btn-primary {
    background: var(--cp-brand-primary);
    border-color: var(--cp-brand-primary);
}
html body .cv-btn-primary:hover     { background: var(--cp-brand-primary-hover); border-color: var(--cp-brand-primary-hover); }
html body .cv-btn-outline           { border-color: var(--cp-brand-primary); color: var(--cp-brand-primary); }
html body .cv-btn-outline:hover     { background: var(--cp-accent-soft); color: var(--cp-brand-primary-strong); }
html body .ec-container a           { color: var(--cp-brand-primary); }
/* icon strokes/fills are SVG presentation attributes (stylesheet wins without !important) */
html body .cv-hero [stroke="#2563eb"] { stroke: var(--cp-brand-primary); }
html body .cv-hero [fill="#2563eb"]   { fill: var(--cp-brand-primary); }
html body .cv-hero [fill="#dbeafe"]   { fill: var(--cp-accent-soft); }
/* decorative amber star in the "Why CertsPoint?" heading → teal (the green trust-rating stars stay) */
html body .cv-why [fill="#f59e0b"]    { fill: var(--cp-brand-primary); stroke: var(--cp-brand-primary); }

/* ==========================================================================
   Product page: Choose Your Study Material (/{vendor}/{code}/premium-file)
   Format colours re-mapped inside the palette; the green "included" ticks stay.
   Previous button colours had white text below 4.5:1 (green 2.3, blue 3.7, cyan 2.4).
   ========================================================================== */
html body .csm-wrap                 { background: var(--cp-surface-soft); }
html body .csm-title,
html body .csm-card-title,
html body .csm-price                { color: var(--cp-text-heading); }
html body .csm-subtitle,
html body .csm-card-desc            { color: var(--cp-text-body); }
html body .csm-card--pdf            { border-color: #B9C0CF; }
html body .csm-card--web            { border-color: var(--cp-brand-primary); }
html body .csm-card--bundle         { border-color: var(--cp-accent-soft-border); }
html body .csm-card--featured       { box-shadow: 0 4px 20px rgba(var(--cp-brand-primary-rgb), .14); }
html body .csm-badge--pdf           { background: #E8EBF2; color: var(--cp-brand-secondary); }
html body .csm-badge--web           { background: var(--cp-accent-soft); color: var(--cp-brand-primary-strong); }
html body .csm-badge--bundle        { background: var(--cp-accent-soft); color: var(--cp-brand-primary-hover); }
html body .csm-btn--pdf             { background: var(--cp-brand-secondary); }
html body .csm-btn--pdf:hover       { background: var(--cp-brand-secondary-hover); }
html body .csm-btn--web             { background: var(--cp-brand-primary); }
html body .csm-btn--web:hover       { background: var(--cp-brand-primary-hover); }
html body .csm-btn--bundle          { background: var(--cp-text-heading); }
html body .csm-btn--bundle:hover    { background: var(--cp-primary-light); }
html body .csm-btn--demo            { border-color: var(--cp-brand-primary); color: var(--cp-brand-primary); }
html body .csm-btn--demo:hover      { background: var(--cp-accent-soft); color: var(--cp-brand-primary-hover); }

/* ==========================================================================
   Free demo questions (cc-demo-*): decorative chrome only.
   The green answer panel (correct answer) is semantic and unchanged.
   ========================================================================== */
html body .cc-demo-wrap             { background: var(--cp-surface-soft); }
html body .cc-demo-title-band       { background: var(--cp-accent-soft); border-bottom-color: var(--cp-accent-soft-border); }
html body .cc-demo-title            { color: var(--cp-text-heading); }
html body .cc-demo-toolbar,
html body .cc-demo-bottom-bar       { background: linear-gradient(90deg, var(--cp-primary), var(--cp-primary-light)); }
/* label spans inside the toolbar buttons picked up the legacy global "span" colour
   (dark text on the bar: 1.3:1); make them follow the button's white text */
html body .cc-demo-toolbar-btn span,
html body .cc-demo-toolbar-btn i    { color: inherit; }
html body .cc-demo-question-header  { background: var(--cp-dark); }
html body .cc-demo-option-row       { background: #FCFDFE; border-color: var(--cp-border); }
html body .cc-demo-option-letter    { color: var(--cp-brand-primary); }
html body .cc-demo-btn-reveal       { background: var(--cp-brand-primary); }
html body .cc-demo-btn-reveal:hover { background: var(--cp-brand-primary-hover); }
html body .cc-demo-btn-next         { background: var(--cp-brand-secondary); }
html body .cc-demo-btn-next:hover   { background: var(--cp-brand-secondary-hover); }

/* ==========================================================================
   Customer pages: topics, simulator start, cart, checkout (our page only —
   Stripe / PayPal hosted pages and provider marks are not touched), account.
   ========================================================================== */
html body .topics-hero              { background: var(--cp-brand-secondary); }
/* the legacy global h1/div/strong colour (#2d3e51) beat the hero's inherited white:
   title and stats were dark on navy (about 1.2:1) before this change */
html body .topics-hero h1,
html body .topics-stat-box,
html body .topics-stat-box *        { color: #FFFFFF; }
html body .topic-badge-premium      { color: var(--cp-brand-primary); }

html body .cc-sim-start-badge       { background: var(--cp-accent-soft); color: var(--cp-brand-primary-strong); }
html body .cc-sim-timer-opt:hover   { border-color: var(--cp-accent-soft-border); }
html body .cc-sim-timer-opt.selected { border-color: var(--cp-brand-primary); box-shadow: 0 0 0 3px rgba(var(--cp-brand-primary-rgb), .15); }
html body .cc-sim-start-btn         { background: var(--cp-brand-primary); }
html body .cc-sim-start-btn:hover   { background: var(--cp-brand-primary-hover); }
html body .cc-sim-back:hover        { color: var(--cp-brand-primary); }

html body .cart-checkout-btn,
html body .cart-browse-btn,
html body .mc-step-number,
html body .mc-submit-btn            { background: var(--cp-brand-primary); }
html body .cart-checkout-btn:hover,
html body .cart-checkout-btn:focus,
html body .cart-browse-btn:hover,
html body .cart-browse-btn:focus,
html body .mc-submit-btn:hover,
html body .mc-submit-btn:focus      { background: var(--cp-brand-primary-hover); }
html body .cart-continue-link,
html body .mc-crumbs a,
html body .mc-back-link,
html body #coupon_badge             { color: var(--cp-brand-primary); }
html body .mc-pay-btn:focus-visible { box-shadow: 0 0 0 3px rgba(var(--cp-brand-primary-rgb), .45); }

html body .cc-sim-timer-opt.selected { background: var(--cp-accent-faint); }
/* small secondary text that was below WCAG AA before this change */
html body .cc-sim-timer-unit,
html body .cc-sim-back,
html body .topic-meta,
html body .mc-order-copy p,
html body .mc-pay-note              { color: var(--cp-text-muted); }
/* inline: "Awaiting approval" / "—" in the orders table (#9ca3af, 2.54:1) */
html body .er-acct-table span[style*="color:#9ca3af"],
html body table span[style*="color:#9ca3af"] { color: var(--cp-text-muted) !important; }
/* semantic green kept, one shade darker for AA (3.15:1 → 6.81:1) */
html body .er-acct-action-web       { color: #166534; }

/* My Downloads info note: the shared view styles it red; it is guidance, not an error → palette info box */
html body .er-acct-notice           { background: var(--cp-accent-faint); border-color: var(--cp-accent-soft-border); color: var(--cp-text-heading); }
html body .er-acct-input:focus      { box-shadow: 0 0 0 3px rgba(var(--cp-brand-primary-rgb), .1); }
html body .er-acct-action-pdf:hover { background: var(--cp-accent-soft); color: var(--cp-brand-primary-strong); }

/* Crypto return / cancel pages (crypto checkout is currently disabled) */
html body .cp-btn-primary           { background: var(--cp-brand-primary); }
html body .cp-btn-primary:hover     { background: var(--cp-brand-primary-hover); }
html body .cp-btn-outline           { border-color: var(--cp-brand-primary); color: var(--cp-brand-primary); }

/* Mobile/tablet overflow fixes (desktop >=1024px unchanged)
   - Contact: legacy style.css sets .contact-us-page { padding: 50px 0 }, removing the container
     gutters that the inner .row's -15px margins rely on (+6px at 768, +15px at <=430).
   - Homepage final CTA: home.css uses a plain 1fr track at <=1023px, so the column's 273px
     min-content overflowed the 272px content box at 320px (+1px). */
@media (max-width: 1023px) {
    html body .contact-us-page          { padding-left: 15px; padding-right: 15px; }
    html body .cph-final-cta__inner     { grid-template-columns: minmax(0, 1fr); }
}