/* ---------------------------------------------------------------
 * Out.cc per-site overrides. Loaded via config 'custom_css'.
 * Scoped to this site only — shared assets/style.css is untouched.
 * --------------------------------------------------------------- */

/* HERO —
 * The photo (DC's rainbow crosswalk at 17th & Church NW, outside JR's)
 * IS the hero. An earlier build washed it under a heavy full-bleed
 * purple scrim to force text contrast, which killed the picture.
 * Instead: keep the image vivid, tint only lightly for brand cohesion,
 * and give the TEXT its own contained scrim so legibility comes from a
 * local panel rather than from destroying the photograph.
 * The crosswalk sits in the lower third — the gradient is deliberately
 * LIGHTEST at the bottom so the rainbow keeps its colour. */
.hero-photo::before {
    background: linear-gradient(180deg,
        rgba(var(--c-primary-rgb), 0.52) 0%,
        rgba(var(--c-primary-rgb), 0.34) 38%,
        rgba(var(--c-primary-rgb), 0.16) 72%,
        rgba(var(--c-primary-rgb), 0.30) 100%);
}
.hero-photo { background-position: center 62%; }

/* Contained scrim behind the headline + subhead only. */
.hero-inner h1,
.hero-inner > p {
    text-shadow: 0 2px 14px rgba(20,8,30,0.75), 0 1px 3px rgba(20,8,30,0.6);
}
.hero-inner > p { opacity: 1; }

.hero-stats {
    background: rgba(20, 8, 30, 0.42);
    border-radius: 999px;
    padding: 8px 20px;
    display: inline-flex;
    gap: 18px;
}

/* VERIFICATION BADGES — the differentiator.
 * Everyone is welcome on Out.cc; the badge says what a listing IS, so
 * nothing is blurred and nothing is hidden. Colour carries the tier at
 * a glance, but the words carry it too — never colour alone (colour-blind
 * readers and screen readers both need the label to stand on its own).
 *   Rainbow-edged gold ...... LGBTQ-Owned, NGLCC certified
 *   Solid violet ............ LGBTQ-Owned, self-attested (free, no cert)
 *   Outlined teal ........... Ally business
 *   Muted slate ............. Community organization
 */
.cf-verification, [data-field="verification"] {
    display: inline-block;
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-radius: 999px;
    padding: 3px 12px;
    line-height: 1.4;
    border: 1.5px solid transparent;
    background: #EFE7F3;
    color: #3B1E54;
}

/* Certified LGBTQ-owned — the only badge that gets the rainbow edge.
   Earned via NGLCC certification; visually the strongest signal. */
.v-certified {
    background: linear-gradient(#FFF8E7, #FFF8E7) padding-box,
                linear-gradient(90deg, #E24B4B, #E8913C, #E5C544, #4FA05B, #3F7BC4, #7B4FA8) border-box;
    border: 2px solid transparent;
    color: #5A3A12;
}
/* Self-attested LGBTQ-owned — equal standing, no paywall. */
.v-attested { background: #3B1E54; color: #FFFFFF; border-color: #3B1E54; }
/* Ally business. */
.v-ally { background: #FFFFFF; color: #1C6B6B; border-color: #1C6B6B; }
/* Community organization / nonprofit. */
.v-org { background: #EDEEF2; color: #4A5164; border-color: #C3C8D4; }
/* LGBT chamber member — the weakest claim on the site, and it must LOOK
   weaker. The business joined and paid dues to an LGBT chamber of commerce
   (self-identification), but never stated its ownership, so we do not know
   whether it is LGBTQ-owned or an ally. The dashed border is deliberate:
   it reads as "outline not filled in" without relying on colour, so the
   distinction survives greyscale and colour-blindness. */
.v-member { background: #FFFFFF; color: #6B5B7B; border: 1.5px dashed #A292B2; }

/* Legend on the homepage / category pages */
.v-legend { display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
    margin: 18px 0 4px; font-size: 0.86rem; }