/* Header USP bar ("reasons to buy"), desktop + mobile. Deliberately its own file, linked from
   _Layout: the legacy .services styles live in css bundled by the VS Bundler extension, which
   dotnet build does not regenerate, so this must not depend on that pipeline. */

.usp-bar {
    background: #fff;
    border-top: 1px solid #f0e9df;
    border-bottom: 1px solid #f0e9df;
}

.usp-bar__inner {
    display: flex;
    align-items: stretch;
    /* Fill the container so the row spans the same width as the nav above (Bootstrap .container,
       max-width 1320px). Centring left a tight cluster floating in ~200px of dead space each side. */
    max-width: 1320px;
    margin: 0 auto;
    padding: 10px 16px;
}

/* Equal-width cells with the lockup centred in each. The dividers are drawn on the item's left
   edge, so with unequal widths (space-between) they hugged the following item and the spacing
   read as arbitrary; equal cells put every divider the same distance apart. */
.usp-bar__item {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 4px 16px;
    color: inherit;
    text-decoration: none;
}

/* Trustpilot: their official stars + logo, stacked. Self-contained so it survives the mobile
   rules that hide the subline — the score and the logo must appear together. */
.usp-bar__tp {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.usp-bar__tp-stars {
    display: block;
    width: 92px;
    height: auto;
}

.usp-bar__tp-logo {
    display: block;
    width: 74px;
    height: auto;
}

.usp-bar__item + .usp-bar__item {
    border-left: 1px solid #eee6da;
}

a.usp-bar__item:hover .usp-bar__title {
    color: #c63f86;
}

.usp-bar__icon {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 15px;
}

.usp-bar__icon--pink {
    background: #fdeef6;
    color: #d93d87;
}

.usp-bar__icon--teal {
    background: #e8f5f4;
    color: #1ea199;
}

.usp-bar__text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    text-align: left;
}

.usp-bar__title {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #3d2c1e;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.25;
    white-space: nowrap;
    transition: color 0.15s ease;
}

.usp-bar__copy {
    color: #6a5f53;
    font-size: 12.5px;
    line-height: 1.3;
    white-space: nowrap;
}

.usp-bar__new {
    display: inline-flex;
    align-items: center;
    padding: 2px 7px;
    border-radius: 999px;
    background: #1ea199;
    color: #fff;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

@media only screen and (max-width: 1199px) {
    .usp-bar__item {
        padding: 4px 16px;
    }
}

/* Mobile: 2x2 grid, titles only. All four messages are visible with no interaction — trust
   messaging that needs a swipe or a rotation cycle to be discovered reassures nobody. */
@media only screen and (max-width: 767px) {
    .usp-bar__inner {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 2px 0;
        padding: 8px 10px;
    }

    .usp-bar__item {
        /* Centre the icon+text lockup within the half-width cell; the text itself stays
           left-aligned — centring multi-line lockup text reads worse, not better. */
        justify-content: center;
        padding: 6px 8px;
        gap: 8px;
        min-width: 0;
    }

    .usp-bar__tp-stars {
        width: 78px;
    }

    .usp-bar__tp-logo {
        width: 62px;
    }

    .usp-bar__item + .usp-bar__item {
        border-left: none;
    }

    .usp-bar__item:nth-child(even) {
        border-left: 1px solid #eee6da;
    }

    .usp-bar__icon {
        flex-basis: 30px;
        width: 30px;
        height: 30px;
        font-size: 12px;
    }

    .usp-bar__title {
        font-size: 12px;
        white-space: normal;
        line-height: 1.2;
    }

    .usp-bar__copy {
        display: none;
    }

    .usp-bar__new {
        font-size: 8.5px;
        padding: 1px 5px;
    }
}