/* -----------------------------------------------------------
   Homepage Trust Bar — credibility strip
   Brand: DM Sans, navy #324B72, red #C91C1F, gold stars.

   Placement: inside the header (desktop/tablet) + above the hero
   headline (mobile fallback). Colors adapt to the transparent vs
   scrolled (solid white) header states.
------------------------------------------------------------ */

.ccd-trustbar {
    /* color tokens (overridden per variant / header state) */
    --tb-stat:  #324B72;
    --tb-label: #6B7280;
    --tb-icon:  #C91C1F;
    --tb-gold:  #F5A623;
    --tb-div:   #E2E5EC;
    font-family: "DM Sans", Arial, sans-serif;
}

.ccd-trustbar-inner {
    display: flex;
    align-items: stretch;
    justify-content: center;
}

.ccd-trust-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-width: 0;
}

.ccd-trust-icon {
    flex: none;
    display: grid;
    place-items: center;
    color: var(--tb-icon);
}
.ccd-trust-icon svg { width: 100%; height: 100%; }

.ccd-trust-text {
    display: flex;
    flex-direction: column;
    line-height: 1.05;
    min-width: 0;
}

.ccd-trust-stat {
    font-weight: 800;
    color: var(--tb-stat);
    letter-spacing: -.01em;
    white-space: nowrap;
}

.ccd-trust-label {
    font-weight: 700;
    text-transform: uppercase;
    color: var(--tb-label);
    white-space: nowrap;
}

.ccd-trust-stars { display: inline-flex; gap: 2px; }
.ccd-trust-stars svg { fill: var(--tb-gold); }

.ccd-trust-div {
    flex: none;
    width: 1px;
    align-self: stretch;
    background: var(--tb-div);
}

/* ===========================================================
   HEADER VARIANT — centered in the empty middle of #top.
   Visible on desktop/tablet (>=768px), hidden on mobile.
=========================================================== */
.ccd-trustbar--header { display: none; }

/* Header has room only while the nav is collapsed to a hamburger (<=1510px).
   At >=1515px Salient shows the full horizontal menu, so the bar moves to the
   hero (see the >=1511px block below). */
@media (min-width: 768px) and (max-width: 1510px) {
    /* establish a positioning context in the main header row */
    #header-outer #top { position: relative; }

    .ccd-trustbar--header {
        display: block;
        position: absolute;
        top: 50%;
        z-index: 1;
        pointer-events: none;        /* never block header controls */
        width: auto;
    }
    .ccd-trustbar--header .ccd-trustbar-inner { padding: 0; justify-content: center; }
    .ccd-trustbar--header .ccd-trust-stars    { margin-top: 4px; }
    .ccd-trustbar--header .ccd-trust-div      { margin: 4px 0; }

    /* default = transparent header (over dark hero) -> light text */
    .ccd-trustbar--header {
        --tb-stat:  #ffffff;
        --tb-label: rgba(255, 255, 255, .82);
        --tb-icon:  #ffffff;
        --tb-div:   rgba(255, 255, 255, .28);
    }
    /* solid header on scroll -> brand colors */
    #header-outer.scrolled-down .ccd-trustbar--header,
    #header-outer:not(.transparent) .ccd-trustbar--header {
        --tb-stat:  #324B72;
        --tb-label: #6B7280;
        --tb-icon:  #C91C1F;
        --tb-div:   #E2E5EC;
    }
}

/* Desktop (>=1000): phone button sits in the LEFT cluster (after the logo),
   with search + menu far right. Anchor the bar into the gap to the right of
   the phone button, capping width so it never reaches the right cluster. */
@media (min-width: 1000px) and (max-width: 1510px) {
    .ccd-trustbar--header {
        left: 392px;                              /* clear logo + phone button */
        transform: translateY(-50%);
        max-width: calc(100vw - 392px - 200px);   /* reserve right search/menu */
    }
    .ccd-trustbar--header .ccd-trust-item     { gap: 8px; padding: 0 10px; }
    .ccd-trustbar--header .ccd-trust-icon     { width: 24px; height: 24px; }
    .ccd-trustbar--header .ccd-trust-stat     { font-size: .95rem; }
    .ccd-trustbar--header .ccd-trust-label    { margin-top: 2px; font-size: .52rem; letter-spacing: .3px; }
    .ccd-trustbar--header .ccd-trust-stars svg{ width: 10px; height: 10px; }
}

/* Wide desktop (still hamburger): ample room -> larger, more prominent. */
@media (min-width: 1200px) and (max-width: 1510px) {
    .ccd-trustbar--header .ccd-trust-item     { gap: 11px; padding: 0 20px; }
    .ccd-trustbar--header .ccd-trust-icon     { width: 32px; height: 32px; }
    .ccd-trustbar--header .ccd-trust-stat     { font-size: 1.28rem; }
    .ccd-trustbar--header .ccd-trust-label    { margin-top: 3px; font-size: .64rem; letter-spacing: .7px; }
    .ccd-trustbar--header .ccd-trust-stars svg{ width: 13px; height: 13px; }
}

/* Tablet (768-999): phone joins the right cluster, so the only clean room is
   the gap between the logo (left) and the phone/search/menu cluster (right).
   Anchor the bar into that gap and cap its width so it never overlaps. */
@media (min-width: 768px) and (max-width: 999px) {
    .ccd-trustbar--header {
        left: 122px;
        transform: translateY(-50%);
        max-width: calc(100vw - 122px - 288px); /* reserve logo (left) + cluster (right) */
    }
    .ccd-trustbar--header .ccd-trust-item     { gap: 7px; padding: 0 9px; }
    .ccd-trustbar--header .ccd-trust-icon     { width: 22px; height: 22px; }
    .ccd-trustbar--header .ccd-trust-stat     { font-size: .92rem; }
    .ccd-trustbar--header .ccd-trust-label    { margin-top: 2px; font-size: .5rem; letter-spacing: .2px; }
    .ccd-trustbar--header .ccd-trust-stars svg{ width: 9px; height: 9px; }
}

/* ===========================================================
   HERO VARIANT — above the H1, mobile only, light on dark hero.
=========================================================== */
.ccd-trustbar--hero { display: none; }

@media (max-width: 767px) {
    .ccd-trustbar--hero {
        display: block;
        position: relative;
        z-index: 2;
        margin: 0 0 18px;
        padding-bottom: 16px;
        border-bottom: 1px solid rgba(255, 255, 255, .18);
        --tb-stat:  #ffffff;
        --tb-label: rgba(255, 255, 255, .8);
        --tb-icon:  #ffffff;
        --tb-div:   rgba(255, 255, 255, .22);
    }
    .ccd-trustbar--hero .ccd-trustbar-inner { justify-content: flex-start; gap: 0; }
    .ccd-trustbar--hero .ccd-trust-item {
        flex: 1 1 0;
        flex-direction: column;
        text-align: center;
        gap: 6px;
        padding: 0 4px;
    }
    .ccd-trustbar--hero .ccd-trust-text  { align-items: center; }
    .ccd-trustbar--hero .ccd-trust-icon  { width: 26px; height: 26px; }
    .ccd-trustbar--hero .ccd-trust-stat  { font-size: 1.02rem; }
    .ccd-trustbar--hero .ccd-trust-label { margin-top: 3px; font-size: .56rem; letter-spacing: .4px; }
    .ccd-trustbar--hero .ccd-trust-stars { margin-top: 3px; }
    .ccd-trustbar--hero .ccd-trust-stars svg { width: 11px; height: 11px; }
    .ccd-trustbar--hero .ccd-trust-div   { margin: 4px 0; }
}

@media (max-width: 360px) {
    .ccd-trustbar--hero .ccd-trust-div  { display: none; }
    .ccd-trustbar--hero .ccd-trust-stat { font-size: .92rem; }
}

/* Full desktop (>=1511px): the horizontal nav menu fills the header, so the
   bar lives above the hero headline instead — a horizontal strip, left-aligned
   to match the hero text, white on the dark hero. */
@media (min-width: 1511px) {
    .ccd-trustbar--hero {
        display: inline-block;
        position: relative;
        z-index: 2;
        margin: 0 0 26px;
        padding-bottom: 18px;
        border-bottom: 1px solid rgba(255, 255, 255, .2);
        --tb-stat:  #ffffff;
        --tb-label: rgba(255, 255, 255, .8);
        --tb-icon:  #ffffff;
        --tb-div:   rgba(255, 255, 255, .25);
    }
    .ccd-trustbar--hero .ccd-trustbar-inner { justify-content: flex-start; }
    .ccd-trustbar--hero .ccd-trust-item     { gap: 12px; padding: 0 26px; }
    .ccd-trustbar--hero .ccd-trust-item:first-child { padding-left: 0; }
    .ccd-trustbar--hero .ccd-trust-icon     { width: 34px; height: 34px; }
    .ccd-trustbar--hero .ccd-trust-stat     { font-size: 1.3rem; }
    .ccd-trustbar--hero .ccd-trust-label    { margin-top: 3px; font-size: .68rem; letter-spacing: .8px; }
    .ccd-trustbar--hero .ccd-trust-stars    { margin-top: 4px; }
    .ccd-trustbar--hero .ccd-trust-stars svg{ width: 14px; height: 14px; }
    .ccd-trustbar--hero .ccd-trust-div      { margin: 4px 0; }
}

/* ===========================================================
   STANDALONE VARIANT — white card for manual [ccd_trust_bar] use.
=========================================================== */
.ccd-trustbar--standalone {
    background: #fff;
    border-top: 3px solid var(--tb-icon);
    border-bottom: 1px solid var(--tb-div);
    box-shadow: 0 10px 30px rgba(16, 24, 40, .07);
}
.ccd-trustbar--standalone .ccd-trustbar-inner { max-width: 1200px; margin: 0 auto; padding: 20px 24px; }
.ccd-trustbar--standalone .ccd-trust-item  { flex: 1 1 0; padding: 6px 24px; gap: 16px; }
.ccd-trustbar--standalone .ccd-trust-icon  { width: 44px; height: 44px; }
.ccd-trustbar--standalone .ccd-trust-stat  { font-size: 1.9rem; }
.ccd-trustbar--standalone .ccd-trust-label { margin-top: 5px; font-size: .8rem; letter-spacing: 1.2px; }
.ccd-trustbar--standalone .ccd-trust-stars { margin-top: 5px; }
.ccd-trustbar--standalone .ccd-trust-stars svg { width: 15px; height: 15px; }
.ccd-trustbar--standalone .ccd-trust-div { margin: 6px 0; }