/* ==========================================================================
   ACXPA Supplier Directory — home page (2026 design)
   File:     public/assets/css/acxpa-home-2026.css
   Version:  1.1.0 (7 October 2026) — live; featured-suppliers block removed at Justin's request
   Owns:     The home page body only (resources/views/home.blade.php).
             Every selector is scoped under .cxh, so nothing here can leak
             onto other pages. The sitewide chrome lives in acxpa-brand-2026.css.
   Rules:    No hex, rgb() or font name — every value is a --acxpa-ds-* token
             from acxpa-tokens.css (loaded by layouts/master.blade.php).
   Surfaces: Teal 900 hero -> Cloud -> white -> Sand -> white -> Cloud,
             so neighbouring sections never share a ground.
   ========================================================================== */

.cxh { color: var(--acxpa-ds-ink); font-family: var(--acxpa-ds-font); }
.cxh h1, .cxh h2, .cxh h3 {
    border: 0;
    padding: 0;
    font-family: var(--acxpa-ds-font);
    color: var(--acxpa-ds-ink);
    letter-spacing: -0.01em;
}
.cxh p { font-size: var(--acxpa-ds-text-body); line-height: var(--acxpa-ds-leading-body); }

/* Eyebrow ------------------------------------------------------------------ */
.cxh-eyebrow {
    margin: 0 0 var(--acxpa-ds-space-xs);
    font-size: var(--acxpa-ds-text-eyebrow) !important;
    line-height: var(--acxpa-ds-leading-eyebrow) !important;
    letter-spacing: var(--acxpa-ds-tracking-eyebrow);
    text-transform: uppercase;
    font-weight: 700;
    color: var(--acxpa-ds-gold-deep);
}
.cxh-eyebrow--on-dark { color: var(--acxpa-ds-gold); }

/* Section bands ------------------------------------------------------------ */
.cxh-band { padding: var(--acxpa-ds-space-3xl) 0; background: var(--acxpa-ds-white); }
.cxh-band--cloud { background: var(--acxpa-ds-cloud); }
.cxh-band--sand  { background: var(--acxpa-ds-sand); }

.cxh-head { max-width: 760px; margin: 0 auto var(--acxpa-ds-space-2xl); text-align: center; }
.cxh-head h2 {
    margin: 0 0 var(--acxpa-ds-space-sm);
    font-size: var(--acxpa-ds-text-h2);
    line-height: var(--acxpa-ds-leading-tight);
    font-weight: 700;
}
.cxh-head p { margin: 0 0 var(--acxpa-ds-space-xs); color: var(--acxpa-ds-slate); }

/* ============ HERO ============ */
.cxh-hero {
    position: relative;
    padding: var(--acxpa-ds-space-3xl) 0 0;
    background:
        radial-gradient(1200px 520px at 85% 0%, var(--acxpa-ds-teal-700), transparent 70%),
        var(--acxpa-ds-teal-900);
    color: var(--acxpa-ds-white);
}
.cxh-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: var(--acxpa-ds-space-2xl);
    align-items: center;
}
.cxh-hero h1 {
    margin: 0 0 var(--acxpa-ds-space-md);
    color: var(--acxpa-ds-white);
    font-size: var(--acxpa-ds-text-display);
    line-height: var(--acxpa-ds-leading-tight);
    font-weight: 800;
}
.cxh-lead {
    margin: 0 0 var(--acxpa-ds-space-lg);
    max-width: 34em;
    color: var(--acxpa-ds-teal-100);
    font-size: var(--acxpa-ds-text-lead) !important;
    line-height: var(--acxpa-ds-leading-snug) !important;
}
.cxh-chips { display: flex; flex-wrap: wrap; gap: var(--acxpa-ds-space-xs); margin: 0; padding: 0; list-style: none; }
.cxh-chips a {
    display: inline-block;
    padding: var(--acxpa-ds-space-2xs) var(--acxpa-ds-space-sm);
    border: 1px solid var(--acxpa-ds-border-on-dark);
    border-radius: var(--acxpa-ds-radius-pill);
    color: var(--acxpa-ds-white);
    font-size: var(--acxpa-ds-text-small);
    font-weight: 500;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.cxh-chips a:hover,
.cxh-chips a:focus {
    background: var(--acxpa-ds-gold);
    border-color: var(--acxpa-ds-gold);
    color: var(--acxpa-ds-ink) !important; /* style.css a:hover is !important */
}

/* Search card */
.cxh-search-card {
    position: relative;
    z-index: 2;
    padding: var(--acxpa-ds-space-xl);
    background: var(--acxpa-ds-white);
    border-radius: var(--acxpa-ds-radius-xl);
    box-shadow: var(--acxpa-ds-shadow-lg);
    color: var(--acxpa-ds-ink);
}
.cxh .cxh-search-title { margin: 0 0 var(--acxpa-ds-space-2xs); font-size: var(--acxpa-ds-text-h3); font-weight: 700; }
.cxh-search-hint { margin: 0 0 var(--acxpa-ds-space-md); color: var(--acxpa-ds-slate); font-size: var(--acxpa-ds-text-small) !important; }
.cxh-search-card .form-search { margin: 0; padding: 0; background: transparent; }
.cxh-search-card .row { margin: 0; }
.cxh-search-card .col-md-12 { padding: 0; }
.cxh-search-card .form-group { margin-bottom: var(--acxpa-ds-space-sm); }
.cxh-search-card input[type="text"] {
    width: 100%;
    min-height: 48px;
    padding: 0 var(--acxpa-ds-space-sm);
    background: var(--acxpa-ds-cloud) !important; /* style.css forces search inputs white/navy with !important */
    border: 1px solid var(--acxpa-ds-teal-200);
    border-radius: var(--acxpa-ds-radius-md);
    color: var(--acxpa-ds-ink);
    font-size: var(--acxpa-ds-text-body);
}
.cxh-search-card .bootstrap-select > .btn { min-height: 48px; border-radius: var(--acxpa-ds-radius-md); font-size: var(--acxpa-ds-text-body); }
.cxh-search-card button[type="submit"] {
    width: 100%;
    min-height: 52px;
    font-size: var(--acxpa-ds-text-body);
    border-radius: var(--acxpa-ds-radius-md);
}

/* Stats strip */
.cxh-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin: var(--acxpa-ds-space-2xl) 0 0;
    border-top: 1px solid var(--acxpa-ds-teal-700);
}
.cxh-stats > div {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    padding: var(--acxpa-ds-space-lg) var(--acxpa-ds-space-md);
}
.cxh-stats > div + div { border-left: 1px solid var(--acxpa-ds-teal-700); }
.cxh-stats dt { text-align: center; color: var(--acxpa-ds-text-muted-on-dark); font-size: var(--acxpa-ds-text-small); font-weight: 500; }
.cxh-stats dd { margin: 0; color: var(--acxpa-ds-gold); font-size: var(--acxpa-ds-text-h2); font-weight: 700; line-height: 1.1; }

/* ============ WHY ============ */
.cxh-why { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--acxpa-ds-space-lg); }
.cxh-why-card {
    padding: var(--acxpa-ds-space-xl);
    background: var(--acxpa-ds-white);
    border: 1px solid var(--acxpa-ds-teal-100);
    border-radius: var(--acxpa-ds-radius-lg);
    box-shadow: var(--acxpa-ds-shadow-sm);
}
.cxh-why-card h3 { margin: var(--acxpa-ds-space-md) 0 var(--acxpa-ds-space-xs); font-size: var(--acxpa-ds-text-h4); font-weight: 700; }
.cxh-why-card p { margin: 0; color: var(--acxpa-ds-slate); }
.cxh-why-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 52px; height: 52px;
    border-radius: var(--acxpa-ds-radius-pill);
    background: var(--acxpa-ds-teal-50);
}
.cxh-why-icon svg, .cxh-cat-icon svg {
    width: 26px; height: 26px;
    fill: none; stroke: var(--acxpa-ds-teal-700); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}

/* ============ CATEGORIES ============ */
.cxh-cats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--acxpa-ds-space-lg); }
.cxh-cat {
    display: flex; flex-direction: column;
    padding: var(--acxpa-ds-space-lg);
    background: var(--acxpa-ds-white);
    border: 1px solid var(--acxpa-ds-teal-100);
    border-radius: var(--acxpa-ds-radius-lg);
    box-shadow: var(--acxpa-ds-shadow-sm);
    color: var(--acxpa-ds-ink);
    text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.cxh-cat:hover, .cxh-cat:focus {
    transform: translateY(-3px);
    border-color: var(--acxpa-ds-gold);
    box-shadow: var(--acxpa-ds-shadow-lg);
    color: var(--acxpa-ds-ink) !important;
}
.cxh-cat-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 48px; height: 48px;
    margin-bottom: var(--acxpa-ds-space-md);
    border-radius: var(--acxpa-ds-radius-md);
    background: var(--acxpa-ds-teal-50);
}
/* Vary the icon chip so the grid isn't one colour */
.cxh-cat:nth-child(4n+2) .cxh-cat-icon { background: var(--acxpa-ds-gold-tint); }
.cxh-cat:nth-child(4n+2) .cxh-cat-icon svg { stroke: var(--acxpa-ds-ink); }
.cxh-cat:nth-child(4n+3) .cxh-cat-icon { background: var(--acxpa-ds-harbour-tint); }
.cxh-cat:nth-child(4n+3) .cxh-cat-icon svg { stroke: var(--acxpa-ds-harbour); }
.cxh-cat:nth-child(4n+4) .cxh-cat-icon { background: var(--acxpa-ds-cloud); }
.cxh-cat-name { font-size: var(--acxpa-ds-text-h4); font-weight: 700; line-height: var(--acxpa-ds-leading-snug); }
.cxh-cat-desc { flex: 1; margin: var(--acxpa-ds-space-xs) 0 var(--acxpa-ds-space-md); color: var(--acxpa-ds-slate); font-size: var(--acxpa-ds-text-small); line-height: var(--acxpa-ds-leading-body); }
.cxh-cat-go { color: var(--acxpa-ds-teal-600); font-size: var(--acxpa-ds-text-small); font-weight: 600; }
.cxh-cat:hover .cxh-cat-go { color: var(--acxpa-ds-teal-800); }

/* ============ HOW IT WORKS ============ */
.cxh-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--acxpa-ds-space-lg); margin: 0; padding: 0; list-style: none; counter-reset: none; }
.cxh-steps li {
    padding: var(--acxpa-ds-space-xl);
    background: var(--acxpa-ds-white);
    border-radius: var(--acxpa-ds-radius-lg);
    border: 1px solid var(--acxpa-ds-stone);
}
.cxh-step-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px;
    border-radius: var(--acxpa-ds-radius-pill);
    background: var(--acxpa-ds-teal-700);
    color: var(--acxpa-ds-white);
    font-weight: 700;
    font-size: var(--acxpa-ds-text-body);
}
.cxh-steps h3 { margin: var(--acxpa-ds-space-md) 0 var(--acxpa-ds-space-xs); font-size: var(--acxpa-ds-text-h4); font-weight: 700; }
.cxh-steps p { margin: 0; color: var(--acxpa-ds-slate); }

/* ============ FOR SUPPLIERS ============ */
.cxh-offers { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--acxpa-ds-space-lg); }
.cxh-offer {
    display: flex; flex-direction: column; align-items: flex-start;
    padding: var(--acxpa-ds-space-2xl) var(--acxpa-ds-space-xl);
    border-radius: var(--acxpa-ds-radius-xl);
}
.cxh-offer h3 { margin: 0 0 var(--acxpa-ds-space-sm); font-size: var(--acxpa-ds-text-h3); font-weight: 700; }
.cxh-offer p { margin: 0 0 var(--acxpa-ds-space-xs); }
.cxh-offer .cxh-btn { margin-top: auto; }
.cxh-offer p:last-of-type { margin-bottom: var(--acxpa-ds-space-lg); }
.cxh-offer--gold { background: var(--acxpa-ds-gold-tint); color: var(--acxpa-ds-ink); }            /* Ink on Gold Tint 13.50:1 (R-B22) */
.cxh-offer--teal { background: var(--acxpa-ds-teal-700); color: var(--acxpa-ds-white); }           /* white on Teal 700 9.16:1 */
.cxh .cxh-offer--teal h3 { color: var(--acxpa-ds-white); }
.cxh-offer--teal p { color: var(--acxpa-ds-teal-100); }

.cxh-btn {
    display: inline-block;
    padding: var(--acxpa-ds-space-sm) var(--acxpa-ds-space-lg);
    border-radius: var(--acxpa-ds-radius-md);
    font-weight: 700;
    font-size: var(--acxpa-ds-text-body);
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
}
.cxh-btn--ink  { background: var(--acxpa-ds-ink);  color: var(--acxpa-ds-white); }
.cxh-btn--ink:hover, .cxh-btn--ink:focus { background: var(--acxpa-ds-teal-800); color: var(--acxpa-ds-white) !important; }
.cxh-btn--gold { background: var(--acxpa-ds-gold); color: var(--acxpa-ds-ink); }
.cxh-btn--gold:hover, .cxh-btn--gold:focus { background: var(--acxpa-ds-white); color: var(--acxpa-ds-teal-800) !important; }

/* ============ ALL CATEGORIES ============ */
.cxh-all { column-count: 4; column-gap: var(--acxpa-ds-space-xl); }
.cxh-all-group { break-inside: avoid; margin-bottom: var(--acxpa-ds-space-lg); }
.cxh-all-group h3 { margin: 0 0 var(--acxpa-ds-space-xs); font-size: var(--acxpa-ds-text-body); font-weight: 700; }
.cxh-all-group h3 a { color: var(--acxpa-ds-teal-700); }
.cxh-all-group ul { margin: 0; padding: 0; list-style: none; }
.cxh-all-group li { margin: 0; padding: 3px 0; font-size: var(--acxpa-ds-text-small); line-height: var(--acxpa-ds-leading-snug); }
.cxh-all-group li a { color: var(--acxpa-ds-slate); }
.cxh-all-group li a:hover { color: var(--acxpa-ds-teal-700) !important; }

/* ============ RESPONSIVE ============ */
@media (max-width: 1199px) {
    .cxh-cats { grid-template-columns: repeat(3, 1fr); }
    .cxh-all { column-count: 3; }
}
@media (max-width: 991px) {
    .cxh-hero-grid { grid-template-columns: 1fr; gap: var(--acxpa-ds-space-xl); }
    .cxh-cats { grid-template-columns: repeat(2, 1fr); }
    .cxh-why, .cxh-steps { grid-template-columns: 1fr; }
    .cxh-offers { grid-template-columns: 1fr; }
    .cxh-all { column-count: 2; }
}
@media (max-width: 575px) {
    .cxh-hero { padding-top: var(--acxpa-ds-space-xl); }
    .cxh-band { padding: var(--acxpa-ds-space-2xl) 0; }
    .cxh-search-card { padding: var(--acxpa-ds-space-lg); }
    .cxh-cats { grid-template-columns: 1fr; gap: var(--acxpa-ds-space-sm); }
    /* Compact row cards on phones: icon left, text right */
    .cxh-cat {
        display: grid;
        grid-template-columns: 48px 1fr;
        column-gap: var(--acxpa-ds-space-md);
        padding: var(--acxpa-ds-space-md);
    }
    .cxh-cat-icon { grid-row: span 2; margin-bottom: 0; }
    .cxh-cat-desc { margin: var(--acxpa-ds-space-2xs) 0 0; }
    .cxh-cat-go { display: none; }
    .cxh-stats dd { font-size: var(--acxpa-ds-text-h3); }
    .cxh-stats > div { padding: var(--acxpa-ds-space-md) var(--acxpa-ds-space-2xs); }
    .cxh-all { column-count: 1; }
}