/*
 * Certs4All — Phase A Global Design System Foundation
 *
 * Loaded LAST via tenant_asset('css/theme.css') in the shared frontend layout,
 * after Bootstrap 3, Font Awesome, legacy style.css, and Vite/Tailwind.
 * This file therefore wins specificity over all earlier sheets.
 *
 * Scope: Certs4All PUBLIC FRONTEND only (certs4all.com / website_id=1).
 * Admin panel uses AdminLTE and is completely separate — do NOT apply c4a-*
 * classes or variables inside admin Blade files.
 *
 * Conventions:
 *   CSS custom properties : --c4a-*
 *   Component classes     : .c4a-*
 *   No !important abuse   : specificity wins by load order
 *   No Tailwind added     : Tailwind already compiled via Vite
 */


/* ═══════════════════════════════════════════════════════════════════
   1. DESIGN TOKENS  (CSS Custom Properties)
   ═══════════════════════════════════════════════════════════════════ */

:root {

    /* ── Brand (synced to tenant DB values at runtime) ──────────── */
    --c4a-color-primary:         var(--tenant-primary,   #16a34a);
    --c4a-color-secondary:       var(--tenant-secondary, #15803d);
    /* Tinted variants computed at paint time; no JS needed */
    --c4a-color-primary-light:   color-mix(in srgb, var(--c4a-color-primary) 15%, #ffffff);
    --c4a-color-primary-dark:    color-mix(in srgb, var(--c4a-color-primary) 85%, #000000);

    /* ── Navy / Dark palette (hero, CTA, dark sections) ────────── */
    --c4a-navy-950: #060e1c;
    --c4a-navy-900: #0c1a2e;
    --c4a-navy-800: #0f2744;
    --c4a-navy-700: #1e3a5f;
    --c4a-navy-600: #2c4f7c;

    /* ── Slate / Neutral palette (text, borders, surfaces) ──────── */
    --c4a-slate-950: #020617;
    --c4a-slate-900: #0f172a;
    --c4a-slate-800: #1e293b;
    --c4a-slate-700: #334155;
    --c4a-slate-600: #475569;
    --c4a-slate-500: #64748b;
    --c4a-slate-400: #94a3b8;
    --c4a-slate-300: #cbd5e1;
    --c4a-slate-200: #e2e8f0;
    --c4a-slate-100: #f1f5f9;
    --c4a-slate-50:  #f8fafc;

    /* ── Surface tokens ─────────────────────────────────────────── */
    --c4a-surface-white:  #ffffff;
    --c4a-surface-light:  var(--c4a-slate-50);
    --c4a-surface-dark:   var(--c4a-navy-900);
    --c4a-surface-card:   #ffffff;

    /* ── Typography ─────────────────────────────────────────────── */
    --c4a-font:           'Inter', ui-sans-serif, system-ui, sans-serif;
    --c4a-font-size-xs:   11px;
    --c4a-font-size-sm:   13px;
    --c4a-font-size-base: 15px;
    --c4a-font-size-md:   17px;
    --c4a-font-size-lg:   20px;
    --c4a-font-size-xl:   26px;
    --c4a-font-size-2xl:  clamp(28px, 4vw, 46px);
    --c4a-font-size-3xl:  clamp(32px, 5vw, 56px);

    /* ── Spacing scale (4-point grid) ───────────────────────────── */
    --c4a-sp-1:  4px;
    --c4a-sp-2:  8px;
    --c4a-sp-3:  12px;
    --c4a-sp-4:  16px;
    --c4a-sp-5:  20px;
    --c4a-sp-6:  24px;
    --c4a-sp-8:  32px;
    --c4a-sp-10: 40px;
    --c4a-sp-12: 48px;
    --c4a-sp-14: 56px;
    --c4a-sp-16: 64px;

    /* ── Container widths ───────────────────────────────────────── */
    --c4a-w-sm:  640px;
    --c4a-w-md:  860px;
    --c4a-w-lg:  960px;
    --c4a-w-xl:  1200px;

    /* ── Border & radius ────────────────────────────────────────── */
    --c4a-border-color:   var(--c4a-slate-200);
    --c4a-border:         1.5px solid var(--c4a-border-color);
    --c4a-radius-sm:      6px;
    --c4a-radius-md:      8px;
    --c4a-radius-lg:      12px;
    --c4a-radius-xl:      16px;
    --c4a-radius-2xl:     24px;
    --c4a-radius-full:    9999px;

    /* ── Shadows ────────────────────────────────────────────────── */
    --c4a-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.06);
    --c4a-shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.08);
    --c4a-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --c4a-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
    --c4a-shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16);

    /* ── Transitions ────────────────────────────────────────────── */
    --c4a-transition-fast:   150ms ease;
    --c4a-transition-base:   200ms ease;
    --c4a-transition-slow:   300ms ease;

    /* ── Section vertical rhythm ────────────────────────────────── */
    --c4a-section-py:    var(--c4a-sp-14);
    --c4a-section-py-sm: var(--c4a-sp-10);

    /* ── Z-index scale ──────────────────────────────────────────── */
    --c4a-z-dropdown: 200;
    --c4a-z-sticky:   300;
    --c4a-z-modal:    400;
    --c4a-z-toast:    500;
}


/* ═══════════════════════════════════════════════════════════════════
   2. GLOBAL RESET / BASELINE  (c4a-scoped)
   ═══════════════════════════════════════════════════════════════════ */

/*
 * Apply baseline resets only inside .c4a-reset wrappers so we never
 * collide with Bootstrap 3 element selectors on quiz/exam views.
 */
.c4a-reset,
.c4a-reset * {
    box-sizing: border-box;
    font-family: var(--c4a-font);
    color: inherit;
}

.c4a-reset h1,
.c4a-reset h2,
.c4a-reset h3,
.c4a-reset h4,
.c4a-reset h5,
.c4a-reset h6 {
    font-weight: inherit;
    line-height: inherit;
    margin: 0;
}

.c4a-reset p  { margin: 0; }
.c4a-reset a  { text-decoration: none; color: inherit; }
.c4a-reset ul { list-style: none; margin: 0; padding: 0; }
.c4a-reset img { max-width: 100%; display: block; }


/* ═══════════════════════════════════════════════════════════════════
   3. LAYOUT — Containers & Sections
   ═══════════════════════════════════════════════════════════════════ */

.c4a-container {
    max-width: var(--c4a-w-xl);
    margin-left:  auto;
    margin-right: auto;
    padding-left:  var(--c4a-sp-6);
    padding-right: var(--c4a-sp-6);
}

.c4a-container--lg {
    max-width: var(--c4a-w-lg);
    margin-left:  auto;
    margin-right: auto;
    padding-left:  var(--c4a-sp-6);
    padding-right: var(--c4a-sp-6);
}

.c4a-container--md {
    max-width: var(--c4a-w-md);
    margin-left:  auto;
    margin-right: auto;
    padding-left:  var(--c4a-sp-6);
    padding-right: var(--c4a-sp-6);
}

.c4a-container--sm {
    max-width: var(--c4a-w-sm);
    margin-left:  auto;
    margin-right: auto;
    padding-left:  var(--c4a-sp-6);
    padding-right: var(--c4a-sp-6);
}

/* Sections */
.c4a-section {
    padding-top:    var(--c4a-section-py);
    padding-bottom: var(--c4a-section-py);
}

.c4a-section--sm {
    padding-top:    var(--c4a-section-py-sm);
    padding-bottom: var(--c4a-section-py-sm);
}

.c4a-section--white  { background: var(--c4a-surface-white); }
.c4a-section--light  { background: var(--c4a-surface-light); border-bottom: 1px solid var(--c4a-border-color); }
.c4a-section--navy   { background: linear-gradient(135deg, var(--c4a-navy-900) 0%, var(--c4a-navy-800) 100%); }
.c4a-section--dark   { background: var(--c4a-navy-900); }


/* ═══════════════════════════════════════════════════════════════════
   4. TYPOGRAPHY
   ═══════════════════════════════════════════════════════════════════ */

.c4a-heading-hero {
    font-size:      var(--c4a-font-size-2xl);
    font-weight:    900;
    letter-spacing: -0.03em;
    line-height:    1.1;
    color:          #ffffff;
    margin:         0 0 var(--c4a-sp-4);
}

.c4a-heading-xl {
    font-size:      var(--c4a-font-size-xl);
    font-weight:    800;
    letter-spacing: -0.02em;
    line-height:    1.25;
    color:          var(--c4a-slate-900);
    margin:         0 0 var(--c4a-sp-2);
}

.c4a-heading-lg {
    font-size:      var(--c4a-font-size-lg);
    font-weight:    700;
    letter-spacing: -0.02em;
    line-height:    1.3;
    color:          var(--c4a-slate-900);
    margin:         0 0 var(--c4a-sp-2);
}

.c4a-heading-md {
    font-size:      var(--c4a-font-size-md);
    font-weight:    700;
    letter-spacing: -0.01em;
    line-height:    1.4;
    color:          var(--c4a-slate-900);
    margin:         0 0 var(--c4a-sp-2);
}

/* Subtitles / descriptions */
.c4a-lead {
    font-size:   var(--c4a-font-size-base);
    line-height: 1.65;
    color:       var(--c4a-slate-500);
    margin:      0 0 var(--c4a-sp-8);
}

.c4a-lead--hero {
    font-size:   clamp(15px, 2.2vw, 18px);
    line-height: 1.6;
    color:       var(--c4a-slate-400);
    margin:      0 auto var(--c4a-sp-8);
    max-width:   var(--c4a-w-sm);
}

.c4a-section-label {
    font-size:      var(--c4a-font-size-xs);
    font-weight:    800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color:          var(--c4a-color-primary);
    margin:         0 0 var(--c4a-sp-3);
    display:        block;
}

.c4a-text-center { text-align: center; }
.c4a-text-muted  { color: var(--c4a-slate-500); }
.c4a-text-dark   { color: var(--c4a-slate-900); }
.c4a-text-white  { color: #ffffff; }


/* ═══════════════════════════════════════════════════════════════════
   5. BUTTONS
   ═══════════════════════════════════════════════════════════════════ */

.c4a-btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             var(--c4a-sp-2);
    padding:         13px 28px;
    border:          0;
    border-radius:   var(--c4a-radius-md);
    font-family:     var(--c4a-font);
    font-size:       var(--c4a-font-size-base);
    font-weight:     700;
    line-height:     1;
    cursor:          pointer;
    text-decoration: none;
    white-space:     nowrap;
    transition:      background var(--c4a-transition-fast),
                     box-shadow  var(--c4a-transition-fast),
                     transform   var(--c4a-transition-fast),
                     border-color var(--c4a-transition-fast),
                     color        var(--c4a-transition-fast);
    -webkit-font-smoothing: antialiased;
}

.c4a-btn:focus-visible {
    outline: 3px solid var(--c4a-color-primary);
    outline-offset: 2px;
}

/* Primary */
.c4a-btn--primary {
    background: var(--c4a-color-primary);
    color:      #ffffff;
}

.c4a-btn--primary:hover {
    background: var(--c4a-color-primary-dark);
    color:      #ffffff;
    box-shadow: var(--c4a-shadow-md);
}

/* Outline */
.c4a-btn--outline {
    background:   transparent;
    color:        var(--c4a-color-primary);
    border:       2px solid var(--c4a-color-primary);
}

.c4a-btn--outline:hover {
    background: var(--c4a-color-primary-light);
    color:      var(--c4a-color-primary-dark);
}

/* Ghost (dark bg) */
.c4a-btn--ghost {
    background:  transparent;
    color:       rgba(255,255,255,0.80);
    border:      1.5px solid rgba(255,255,255,0.20);
}

.c4a-btn--ghost:hover {
    background:  rgba(255,255,255,0.08);
    color:       #ffffff;
    border-color: rgba(255,255,255,0.40);
}

/* Sizes */
.c4a-btn--sm   { padding: 9px 18px; font-size: var(--c4a-font-size-sm); border-radius: var(--c4a-radius-sm); }
.c4a-btn--lg   { padding: 17px 40px; font-size: 17px; }
.c4a-btn--pill { border-radius: var(--c4a-radius-full); }
.c4a-btn--wide { width: 100%; }


/* ═══════════════════════════════════════════════════════════════════
   6. CARDS
   ═══════════════════════════════════════════════════════════════════ */

.c4a-card {
    background:    var(--c4a-surface-card);
    border:        var(--c4a-border);
    border-radius: var(--c4a-radius-lg);
    padding:       var(--c4a-sp-8) var(--c4a-sp-6);
    position:      relative;
}

/* Hover card — for vendor cards, exam cards, etc. */
.c4a-card--hover {
    transition: border-color var(--c4a-transition-base),
                box-shadow   var(--c4a-transition-base),
                transform    var(--c4a-transition-base);
    cursor: pointer;
}

.c4a-card--hover:hover {
    border-color: var(--c4a-color-primary);
    box-shadow:   var(--c4a-shadow-md);
    transform:    translateY(-2px);
}

/* Compact card */
.c4a-card--sm { padding: var(--c4a-sp-5) var(--c4a-sp-5); }

/* Dark-glass card (for dark section backgrounds) */
.c4a-card--glass {
    background:   rgba(255, 255, 255, 0.05);
    border:       1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--c4a-radius-lg);
    padding:      var(--c4a-sp-8) var(--c4a-sp-6);
    backdrop-filter: blur(8px);
}

/* Vendor / icon card layout helper */
.c4a-icon-card {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    text-align:     center;
    gap:            var(--c4a-sp-2);
    padding:        var(--c4a-sp-5) var(--c4a-sp-3);
    background:     var(--c4a-surface-card);
    border:         var(--c4a-border);
    border-radius:  var(--c4a-radius-lg);
    transition:     border-color var(--c4a-transition-base),
                    box-shadow   var(--c4a-transition-base);
    text-decoration: none;
    color:          var(--c4a-slate-800);
    font-size:      var(--c4a-font-size-sm);
    font-weight:    600;
}

.c4a-icon-card:hover {
    border-color: var(--c4a-color-primary);
    box-shadow:   var(--c4a-shadow-md);
    color:        var(--c4a-slate-800);
    text-decoration: none;
}

.c4a-icon-card__logo {
    height:     36px;
    max-width:  100px;
    object-fit: contain;
}

.c4a-icon-card__initials {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:   40px;
    height:  40px;
    border-radius: var(--c4a-radius-md);
    background:    var(--c4a-color-primary-light);
    color:         var(--c4a-color-primary);
    font-size:     18px;
    font-weight:   900;
    line-height:   1;
}


/* ═══════════════════════════════════════════════════════════════════
   7. FORMS & SEARCH
   ═══════════════════════════════════════════════════════════════════ */

.c4a-search-bar {
    display:     flex;
    gap:         var(--c4a-sp-2);
    flex-wrap:   wrap;
    align-items: center;
}

.c4a-input {
    appearance:  none;
    background:  #ffffff;
    border:      1.5px solid var(--c4a-border-color);
    border-radius: var(--c4a-radius-md);
    color:       var(--c4a-slate-800);
    font-family: var(--c4a-font);
    font-size:   var(--c4a-font-size-base);
    outline:     none;
    padding:     12px 18px;
    transition:  border-color var(--c4a-transition-fast),
                 box-shadow   var(--c4a-transition-fast);
    width:       100%;
}

.c4a-input::placeholder { color: var(--c4a-slate-400); }

.c4a-input:focus {
    border-color: var(--c4a-color-primary);
    box-shadow:   0 0 0 3px var(--c4a-color-primary-light);
    outline:      none;
}

/* Search input variant (white on dark bg) */
.c4a-input--hero {
    background: #ffffff;
    border:     0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    flex:       1;
    min-width:  220px;
    max-width:  400px;
}

.c4a-input--hero:focus {
    box-shadow: 0 0 0 3px var(--c4a-color-primary-light),
                0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Label */
.c4a-label {
    display:       block;
    font-size:     var(--c4a-font-size-sm);
    font-weight:   600;
    color:         var(--c4a-slate-700);
    margin-bottom: var(--c4a-sp-1);
}

/* Field group */
.c4a-field { margin-bottom: var(--c4a-sp-5); }


/* ═══════════════════════════════════════════════════════════════════
   8. BADGES
   ═══════════════════════════════════════════════════════════════════ */

.c4a-badge {
    display:        inline-flex;
    align-items:    center;
    gap:            var(--c4a-sp-1);
    padding:        3px 9px;
    border-radius:  var(--c4a-radius-full);
    font-size:      var(--c4a-font-size-xs);
    font-weight:    700;
    letter-spacing: 0.03em;
    line-height:    1;
    white-space:    nowrap;
    text-transform: uppercase;
}

.c4a-badge--primary  { background: var(--c4a-color-primary-light); color: var(--c4a-color-primary-dark); }
.c4a-badge--navy     { background: rgba(12,26,46,0.08); color: var(--c4a-navy-800); }
.c4a-badge--green    { background: #dcfce7; color: #15803d; }
.c4a-badge--blue     { background: #dbeafe; color: #1d4ed8; }
.c4a-badge--orange   { background: #ffedd5; color: #c2410c; }
.c4a-badge--slate    { background: var(--c4a-slate-100); color: var(--c4a-slate-600); }
.c4a-badge--demo     { background: #f0fdf4; color: #16a34a; border: 1px solid #bbf7d0; }
.c4a-badge--real     { background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; }


/* ═══════════════════════════════════════════════════════════════════
   9. STAT DISPLAY
   ═══════════════════════════════════════════════════════════════════ */

.c4a-stat {
    text-align: center;
    padding:    var(--c4a-sp-5) var(--c4a-sp-6);
}

.c4a-stat__value {
    display:        block;
    font-size:      28px;
    font-weight:    900;
    letter-spacing: -0.02em;
    line-height:    1;
    color:          var(--c4a-color-primary);
}

.c4a-stat__label {
    display:        block;
    font-size:      var(--c4a-font-size-xs);
    font-weight:    700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color:          var(--c4a-slate-500);
    margin-top:     var(--c4a-sp-1);
}

/* Stats row */
.c4a-stats-row {
    display:         flex;
    flex-wrap:       wrap;
    justify-content: center;
}

.c4a-stats-row .c4a-stat + .c4a-stat {
    border-left: 1px solid var(--c4a-border-color);
}


/* ═══════════════════════════════════════════════════════════════════
   10. GRID UTILITIES
   ═══════════════════════════════════════════════════════════════════ */

.c4a-grid {
    display: grid;
    gap:     var(--c4a-sp-4);
}

.c4a-grid--vendor {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: var(--c4a-sp-3);
}

.c4a-grid--3col {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--c4a-sp-6);
}

.c4a-grid--2col {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--c4a-sp-5);
}

.c4a-grid--4col {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--c4a-sp-5);
}

/* Feature steps row */
.c4a-steps {
    display:     flex;
    flex-wrap:   wrap;
    gap:         var(--c4a-sp-4);
    counter-reset: c4a-step;
}

.c4a-step {
    flex:        1;
    min-width:   200px;
    position:    relative;
    padding-top: var(--c4a-sp-10);
    counter-increment: c4a-step;
}

.c4a-step__number {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:   40px;
    height:  40px;
    border-radius: var(--c4a-radius-full);
    background: var(--c4a-color-primary-light);
    color:      var(--c4a-color-primary);
    font-size:  18px;
    font-weight: 900;
    margin-bottom: var(--c4a-sp-4);
}


/* ═══════════════════════════════════════════════════════════════════
   11. SECTION HEADERS (reusable pattern)
   ═══════════════════════════════════════════════════════════════════ */

.c4a-section-header {
    text-align:    center;
    margin-bottom: var(--c4a-sp-10);
}

.c4a-section-header .c4a-heading-xl { margin-bottom: var(--c4a-sp-2); }

.c4a-section-header p {
    font-size:  var(--c4a-font-size-base);
    color:      var(--c4a-slate-500);
    margin:     0;
    max-width:  560px;
    margin-left:  auto;
    margin-right: auto;
}

/* Inline separator line under a heading */
.c4a-heading-line {
    display:    block;
    width:      40px;
    height:     3px;
    background: var(--c4a-color-primary);
    border-radius: var(--c4a-radius-full);
    margin:     var(--c4a-sp-3) auto 0;
}


/* ═══════════════════════════════════════════════════════════════════
   12. DIVIDERS & SEPARATORS
   ═══════════════════════════════════════════════════════════════════ */

.c4a-divider {
    height:     1px;
    background: var(--c4a-border-color);
    border:     none;
    margin:     0;
}

.c4a-divider--accent {
    height:     2px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--c4a-color-primary) 50%,
        transparent 100%
    );
    border: none;
    margin: 0;
}


/* ═══════════════════════════════════════════════════════════════════
   13. ANNOUNCEMENT / NOTICE BAR
   ═══════════════════════════════════════════════════════════════════ */

.c4a-notice {
    background: var(--c4a-color-primary);
    color:      #ffffff;
    font-size:  var(--c4a-font-size-sm);
    font-weight: 600;
    text-align: center;
    padding:    10px var(--c4a-sp-6);
    line-height: 1.4;
}

.c4a-notice a {
    color:           #ffffff;
    text-decoration: underline;
    font-weight:     700;
}


/* ═══════════════════════════════════════════════════════════════════
   14. RESPONSIVE UTILITIES
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .c4a-section     { padding-top: var(--c4a-sp-10); padding-bottom: var(--c4a-sp-10); }
    .c4a-section--sm { padding-top: var(--c4a-sp-8);  padding-bottom: var(--c4a-sp-8); }

    .c4a-container,
    .c4a-container--lg,
    .c4a-container--md,
    .c4a-container--sm {
        padding-left:  var(--c4a-sp-4);
        padding-right: var(--c4a-sp-4);
    }

    .c4a-search-bar { flex-direction: column; }
    .c4a-input--hero { max-width: 100%; }

    .c4a-grid--vendor  { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
    .c4a-stats-row .c4a-stat + .c4a-stat { border-left: none; border-top: 1px solid var(--c4a-border-color); }

    .c4a-heading-hero { font-size: clamp(24px, 8vw, 36px); }

    .c4a-btn--lg { padding: 14px 28px; font-size: var(--c4a-font-size-base); }
}

@media (max-width: 480px) {
    .c4a-container,
    .c4a-container--lg,
    .c4a-container--md,
    .c4a-container--sm {
        padding-left:  var(--c4a-sp-4);
        padding-right: var(--c4a-sp-4);
    }

    .c4a-grid--3col,
    .c4a-grid--4col  { grid-template-columns: 1fr; }

    .c4a-grid--vendor { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }

    .c4a-section-header { margin-bottom: var(--c4a-sp-8); }
}


/* ═══════════════════════════════════════════════════════════════════
   15. LOADING STATE
   ═══════════════════════════════════════════════════════════════════ */

.c4a-skeleton {
    background: linear-gradient(
        90deg,
        var(--c4a-slate-100) 25%,
        var(--c4a-slate-50)  50%,
        var(--c4a-slate-100) 75%
    );
    background-size: 200% 100%;
    animation: c4a-shimmer 1.5s infinite;
    border-radius: var(--c4a-radius-sm);
}

@keyframes c4a-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ── End of Certs4All Phase A Design System ─────────────────────── */


/* ═══════════════════════════════════════════════════════════════════
   PHASE B1 — SITE HEADER
   Compact 53px centered-logo navigation bar.
   Applies ONLY on Certs4All (theme_key=certs4all / wid=1).
   Namespace: .c4a-site-header, .c4a-header-*, .c4a-drawer-*
   ═══════════════════════════════════════════════════════════════════ */

.c4a-site-header {
    position:   sticky;
    top:        0;
    z-index:    var(--c4a-z-sticky);
    background: #ffffff;
    /* Very subtle separator — no heavy border like Bootstrap or AdminLTE */
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.07);
}

.c4a-site-header__inner {
    position:   relative;        /* anchor for absolute children */
    height:     53px;
    max-width:  1200px;
    margin:     0 auto;
    padding:    0 22px;
}

/* ── Left nav (absolutely positioned at left edge) ── */
.c4a-site-header__nav {
    position:    absolute;
    left:        22px;
    top:         50%;
    transform:   translateY(-50%);
    display:     flex;
    align-items: center;
    gap:         28px;
}

.c4a-header-link {
    color:           #111827;
    font-family:     var(--c4a-font);
    font-size:       16px;
    font-weight:     400;
    line-height:     1;
    text-decoration: none;
    white-space:     nowrap;
    transition:      color var(--c4a-transition-fast);
}

.c4a-header-link:hover {
    color:           var(--c4a-color-primary);
    text-decoration: none;
}

/* ── Brand logo (mathematically centered in the inner container) ── */
.c4a-site-header__brand {
    position:        absolute;
    left:            50%;
    top:             50%;
    transform:       translate(-50%, -50%);
    display:         inline-flex;
    align-items:     center;
    gap:             8px;
    text-decoration: none;
    white-space:     nowrap;
}

.c4a-site-header__wordmark {
    color:           #111827;
    font-family:     var(--c4a-font);
    font-size:       17px;
    font-weight:     700;
    letter-spacing:  -0.025em;
    line-height:     1;
    text-decoration: none;
}

/* ── Right: hamburger button ── */
.c4a-site-header__actions {
    position:    absolute;
    right:       22px;
    top:         50%;
    transform:   translateY(-50%);
    display:     flex;
    align-items: center;
}

.c4a-site-header__menu-btn {
    display:         flex;
    align-items:     center;
    justify-content: center;
    background:      none;
    border:          0;
    cursor:          pointer;
    padding:         4px;
    color:           #111827;
    line-height:     1;
    transition:      opacity var(--c4a-transition-fast);
}

.c4a-site-header__menu-btn:hover  { opacity: 0.70; }
.c4a-site-header__menu-btn:focus-visible {
    outline:        2px solid var(--c4a-color-primary);
    outline-offset: 2px;
    border-radius:  4px;
}

/* ── Mobile drawer ── */
.c4a-site-header__drawer {
    position:      sticky;
    top:           53px;
    background:    #ffffff;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow:    0 6px 18px rgba(0, 0, 0, 0.07);
    z-index:       290;
    padding:       10px 22px 14px;
}

.c4a-site-header__drawer-nav {
    display:        flex;
    flex-direction: column;
    gap:            2px;
    margin-bottom:  8px;
}

.c4a-drawer-link {
    display:         block;
    padding:         10px 12px;
    border-radius:   8px;
    color:           #111827;
    font-family:     var(--c4a-font);
    font-size:       15px;
    font-weight:     500;
    text-decoration: none;
    transition:      background var(--c4a-transition-fast);
}

.c4a-drawer-link:hover {
    background:      var(--c4a-slate-50);
    text-decoration: none;
    color:           #111827;
}

.c4a-site-header__drawer-auth {
    border-top:     1px solid var(--c4a-border-color);
    padding-top:    10px;
    display:        flex;
    flex-direction: column;
    gap:            7px;
}

.c4a-drawer-auth-link {
    display:         block;
    padding:         11px;
    text-align:      center;
    border-radius:   7px;
    font-family:     var(--c4a-font);
    font-size:       14px;
    font-weight:     600;
    text-decoration: none;
    color:           #374151;
    border:          1.5px solid var(--c4a-border-color);
    transition:      background var(--c4a-transition-fast), border-color var(--c4a-transition-fast);
}

.c4a-drawer-auth-link:hover {
    background: var(--c4a-slate-50);
    color:      #111827;
    text-decoration: none;
}

.c4a-drawer-auth-link--primary {
    background:  var(--c4a-color-primary);
    border-color: var(--c4a-color-primary);
    color:       #ffffff;
}

.c4a-drawer-auth-link--primary:hover {
    background:  var(--c4a-color-primary-dark);
    border-color: var(--c4a-color-primary-dark);
    color:       #ffffff;
}

/* ── Responsive: hide left nav on mobile, logo stays centered ── */
@media (max-width: 767px) {
    .c4a-site-header__nav { display: none; }
}


/* ═══════════════════════════════════════════════════════════════════
   PHASE B1 — HERO
   Two-column hero: left (text/CTA) + right (globe visual).
   Applies ONLY on Certs4All homepage.
   Namespace: .c4a-hero, .c4a-hero__*
   ═══════════════════════════════════════════════════════════════════ */

.c4a-hero {
    background:  linear-gradient(145deg, #eef1ff 0%, #f5f7fd 50%, #eef3ff 100%);
    min-height:  530px;
    display:     flex;
    align-items: stretch;
    /* All top breathing room lives here — above the grid, nothing can absorb it */
    padding-top: 112px;
}

.c4a-hero__inner {
    max-width:   1200px;
    margin:      0 auto;
    /* 55px from left, 24px from right — matches reference x-offset */
    padding:     0 24px 0 55px;
    display:     grid;
    grid-template-columns: 54% 46%;
    align-items: start;
    min-height:  390px;
    width:       100%;
}

/* ── Left: text content ── */
.c4a-hero__content {
    /* Top spacing handled by .c4a-hero padding-top — do not add extra here */
    padding:      0 32px 56px 0;
}

.c4a-hero__title {
    font-family:     var(--c4a-font);
    font-size:       47px;
    font-weight:     800;
    line-height:     1.02;
    letter-spacing:  -0.025em;
    color:           #111827;
    margin:          0;
}

.c4a-hero__gradient-title {
    font-family:     var(--c4a-font);
    font-size:       47px;
    font-weight:     800;
    line-height:     1.02;
    letter-spacing:  -0.025em;
    /* Multi-color gradient: teal → orange → magenta → gold */
    background:      linear-gradient(90deg,
                       #06b6a0  0%,
                       #f97316 35%,
                       #db2777 65%,
                       #d97706 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color:           transparent;
    display:         block;
    margin-top:      5px;
}

.c4a-hero__description {
    font-family: var(--c4a-font);
    font-size:   21px;
    font-weight: 400;
    line-height: 1.18;
    color:       #111827;
    margin:      16px 0 0;
    max-width:   470px;
}

.c4a-hero__cta {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    margin-top:      20px;
    height:          44px;
    padding:         0 22px;
    min-width:       198px;
    background:      #2563eb;
    border-radius:   10px;
    color:           #ffffff;
    font-family:     var(--c4a-font);
    font-size:       16px;
    font-weight:     500;
    text-decoration: none;
    box-shadow:      0 4px 14px rgba(37, 99, 235, 0.35);
    white-space:     nowrap;
    transition:      background var(--c4a-transition-fast), box-shadow var(--c4a-transition-fast);
}

.c4a-hero__cta:hover {
    background:      #1d4ed8;
    box-shadow:      0 6px 20px rgba(37, 99, 235, 0.45);
    color:           #ffffff;
    text-decoration: none;
}

/* ── Right: reserved image slot (empty until owner uploads image) ── */
.c4a-hero__visual {
    position:        relative;
    display:         flex;
    align-items:     center;
    justify-content: center;
    /* Reserve ~360px square for the owner-provided image.
       Future image: width/height 100%, object-fit: contain. */
    min-height:      360px;
}

.c4a-hero__visual > img {
    width:      100%;
    height:     100%;
    object-fit: contain;
    display:    block;
}

/* ── Responsive: tablet — single column, hide empty visual slot ── */
@media (max-width: 900px) {
    .c4a-hero__inner {
        grid-template-columns: 1fr;
        padding:    0 32px;
        min-height: auto;
    }
    .c4a-hero {
        min-height:  auto;
        padding-top: 76px;   /* 76px gap at tablet (~768px) */
    }
    .c4a-hero__content {
        padding:    0 0 40px;
        text-align: center;
    }
    .c4a-hero__title,
    .c4a-hero__gradient-title { font-size: 38px; }
    .c4a-hero__description {
        font-size: 18px;
        max-width: 100%;
    }
    /* Hide the empty visual slot on tablet/mobile to avoid blank space */
    .c4a-hero__visual { display: none; }
    .c4a-hero__cta { margin: 20px auto 0; display: flex; }
}

/* ── Responsive: mobile ── */
@media (max-width: 500px) {
    .c4a-hero        { padding-top: 52px; }   /* 52px gap at mobile */
    .c4a-hero__inner { padding: 0 20px; }
    .c4a-hero__content  { padding: 0 0 32px; }
    .c4a-hero__title,
    .c4a-hero__gradient-title { font-size: clamp(30px, 9vw, 40px); letter-spacing: -0.02em; }
    .c4a-hero__description { font-size: 17px; line-height: 1.25; }
}

/* ── End of Certs4All Phase B1 Header + Hero ────────────────────── */


/* ═══════════════════════════════════════════════════════════════════
   PHASE B2 — VENDOR STRIP + CERTIFICATION BROWSE SECTION
   Second homepage block (replaces Stats + Vendor Grid).
   Applies ONLY on Certs4All homepage (views-c4a).
   Namespaces: .c4a-home-vendor-*, .c4a-cert-*
   ═══════════════════════════════════════════════════════════════════ */

/* ── Phase B2A: Auto-scrolling Vendor Marquee ── */
@keyframes c4a-marquee-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.c4a-vendor-marquee {
    position:      relative;
    display:       flex;
    align-items:   center;
    background:    #ffffff;
    border-top:    1px solid #eef0f4;
    border-bottom: 1px solid #eef0f4;
    height:        88px;
    overflow:      hidden;
}

.c4a-vendor-marquee__viewport {
    flex:     1;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 6%, #000 88%, transparent 100%);
    mask-image:         linear-gradient(to right, transparent 0%, #000 6%, #000 88%, transparent 100%);
}

.c4a-vendor-marquee__track {
    display:   flex;
    width:     max-content;
    animation: c4a-marquee-scroll 32s linear infinite;
}

.c4a-vendor-marquee:hover .c4a-vendor-marquee__track,
.c4a-vendor-marquee:focus-within .c4a-vendor-marquee__track {
    animation-play-state: paused;
}

.c4a-vendor-marquee__group {
    display:     flex;
    align-items: center;
    gap:         12px;
    padding:     0 6px;
}

.c4a-vendor-marquee__chip {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
    height:          54px;
    padding:         0 22px;
    background:      #ffffff;
    border:          1.5px solid #e2e8f0;
    border-radius:   14px;
    box-shadow:      0 1px 4px rgba(0, 0, 0, 0.05);
    white-space:     nowrap;
    text-decoration: none;
    transition:      box-shadow 150ms, border-color 150ms;
}

.c4a-vendor-marquee__chip:hover {
    box-shadow:      0 3px 10px rgba(0, 0, 0, 0.09);
    border-color:    #c7d3e0;
    text-decoration: none;
}

.c4a-vendor-marquee__chip:focus-visible {
    outline:        2px solid var(--c4a-color-primary);
    outline-offset: 2px;
}

.c4a-vendor-marquee__chip-logo {
    height:     30px;
    max-width:  72px;
    object-fit: contain;
    display:    block;
}

.c4a-vendor-marquee__chip-name {
    color:       #1e293b;
    font-family: var(--c4a-font);
    font-size:   14px;
    font-weight: 600;
    line-height: 1;
}

/* View All CTA — fixed at far right, does not scroll */
.c4a-vendor-marquee__view-all {
    flex-shrink:     0;
    display:         inline-flex;
    align-items:     center;
    gap:             6px;
    height:          100%;
    padding:         0 22px;
    background:      linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
    color:           #ffffff;
    font-family:     var(--c4a-font);
    font-size:       14px;
    font-weight:     700;
    white-space:     nowrap;
    text-decoration: none;
    letter-spacing:  0.01em;
    transition:      opacity 150ms;
    z-index:         2;
}

.c4a-vendor-marquee__view-all:hover {
    opacity:         0.92;
    text-decoration: none;
    color:           #ffffff;
}

.c4a-vendor-marquee__view-all:focus-visible {
    outline:        2px solid #ffffff;
    outline-offset: -3px;
}

@media (prefers-reduced-motion: reduce) {
    .c4a-vendor-marquee__track { animation: none; }
}

/* ── Certification Browse Section ── */
.c4a-cert-browse {
    background: #f4f8ff;
    padding:    64px 24px 88px;
}

.c4a-cert-browse__header {
    text-align:   center;
    max-width:    860px;
    margin:       0 auto 50px;
}

.c4a-cert-browse__title {
    font-family:    var(--c4a-font);
    font-size:      40px;
    font-weight:    800;
    line-height:    1.12;
    letter-spacing: -0.025em;
    color:          #0f172a;
    margin:         0 0 16px;
}

.c4a-cert-browse__description {
    font-family:  var(--c4a-font);
    font-size:    18px;
    font-weight:  400;
    line-height:  1.52;
    color:        #334155;
    margin:       0 auto;
    max-width:    760px;
}

/* ── Two-column provider grid ── */
.c4a-cert-browse__grid {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   16px;
    max-width:             900px;
    margin:                0 auto;
}

/* ── Individual provider card ── */
.c4a-cert-provider {
    display:         flex;
    align-items:     center;
    gap:             18px;
    height:          72px;
    padding:         0 26px;
    background:      #ffffff;
    border:          1.5px solid #dde8f8;
    border-radius:   20px;
    box-shadow:      0 2px 8px rgba(96, 130, 190, 0.07);
    text-decoration: none;
    transition:      box-shadow 150ms, border-color 150ms, transform 150ms;
}

.c4a-cert-provider:hover {
    box-shadow:      0 6px 18px rgba(96, 130, 190, 0.14);
    border-color:    #b8cef0;
    transform:       translateY(-1px);
    text-decoration: none;
}

.c4a-cert-provider:focus-visible {
    outline:        2px solid var(--c4a-color-primary);
    outline-offset: 2px;
}

.c4a-cert-provider__icon {
    width:           38px;
    height:          38px;
    border-radius:   10px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
    font-size:       18px;
}

.c4a-cert-provider__name {
    flex:        1;
    font-family: var(--c4a-font);
    font-size:   16px;
    font-weight: 600;
    color:       #0f172a;
    line-height: 1;
}

.c4a-cert-provider__chevron {
    color:       #94a3b8;
    font-size:   12px;
    flex-shrink: 0;
}

/* ── B2 Responsive: tablet ── */
@media (max-width: 900px) {
    .c4a-cert-browse         { padding: 52px 24px 72px; }
    .c4a-cert-browse__title  { font-size: 32px; }
    .c4a-cert-browse__grid   { max-width: 580px; }
}

/* ── B2 Responsive: single column ── */
@media (max-width: 768px) {
    .c4a-cert-browse__grid  { grid-template-columns: 1fr; }
    .c4a-cert-browse__title { font-size: 28px; }
}

/* ── B2 Responsive: mobile ── */
@media (max-width: 500px) {
    .c4a-cert-browse                { padding: 40px 16px 56px; }
    .c4a-cert-browse__header        { margin-bottom: 36px; }
    .c4a-cert-browse__title         { font-size: clamp(22px, 6vw, 28px); letter-spacing: -0.02em; }
    .c4a-cert-browse__description   { font-size: 16px; }
    .c4a-cert-provider              { height: 66px; border-radius: 16px; padding: 0 20px; }
    .c4a-cert-provider__name        { font-size: 15px; }
    /* Marquee mobile tweaks */
    .c4a-vendor-marquee             { height: 76px; }
    .c4a-vendor-marquee__chip       { height: 48px; padding: 0 16px; }
    .c4a-vendor-marquee__view-all   { padding: 0 16px; font-size: 13px; }
    .c4a-vendor-marquee__viewport {
        -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 4%, #000 92%, transparent 100%);
        mask-image:         linear-gradient(to right, transparent 0%, #000 4%, #000 92%, transparent 100%);
    }
}

/* ── End of Certs4All Phase B2 Vendor Strip + Cert Browse ────────── */