/* Atlanta theme: the logo's navy and red across every public page. Loaded after the built CSS. */
html:root { --brand-accent: var(--brand-button); --brand-on-accent: #fff; }

section.bg-primary-dark {
    --color-primary-dark: var(--brand-secondary);
    background-color: var(--brand-secondary);
}
.bg-primary-dark\/45 { background-color: color-mix(in srgb, var(--brand-secondary) 45%, transparent); }
.group:hover .bg-primary-dark\/45 { background-color: color-mix(in srgb, var(--brand-secondary) 25%, transparent); }
section.bg-primary-dark .bg-gradient-to-t { background: none; }

/* Login and error pages. */
.bg-primary-dark.isolate { background-color: var(--brand-secondary); }
body.from-primary-soft { background: color-mix(in srgb, var(--brand-secondary) 6%, white); }

/* Red text can't be read on navy. */
.bg-secondary .text-accent,
.text-white .text-accent,
.hero-overlay ~ .container-site .text-accent,
.home-sections section.text-white .text-accent { color: #fff; }

/* Heroes: navy, with the photo left clear on the right. */
.hero-overlay {
    background:
        linear-gradient(90deg,
            color-mix(in srgb, var(--brand-secondary) 96%, transparent) 0%,
            color-mix(in srgb, var(--brand-secondary) 86%, transparent) 42%,
            color-mix(in srgb, var(--brand-secondary) 30%, transparent) 75%,
            color-mix(in srgb, var(--brand-secondary) 12%, transparent) 100%),
        linear-gradient(0deg, color-mix(in srgb, var(--brand-secondary) 70%, transparent) 0%, transparent 40%);
}
.hero-blob,
section > svg.text-page { display: none; }

.hero-overlay ~ .container-site h1::before {
    content: "";
    display: block;
    width: 3.5rem;
    height: .375rem;
    margin-bottom: 1.25rem;
    border-radius: 999px;
    background: var(--brand-primary);
}
.eyebrow-light svg { color: #fff; }

/* Home hero: the tagline is already in the top bar; the airport code is a red tag. */
.home-hero .eyebrow-light,
.home-hero h1 svg { display: none; }
.home-hero h1 .text-accent {
    display: inline-block;
    padding: .02em .22em .06em;
    border-radius: .16em;
    background: var(--brand-primary);
    color: #fff;
}

/* Blog header. */
section.from-primary-soft.via-white { background: var(--brand-secondary); border-color: transparent; }
section.from-primary-soft.via-white h1 { color: #fff; }
section.from-primary-soft.via-white .text-muted { color: rgb(255 255 255 / .8); }

/* Full-width image band. */
.from-primary\/90.via-primary\/80 {
    background: linear-gradient(135deg, color-mix(in srgb, var(--brand-secondary) 94%, transparent), color-mix(in srgb, var(--brand-secondary) 80%, transparent));
}
.bg-primary.w-screen { background-color: var(--brand-secondary); }

/* Soft frame behind content photos. */
.-inset-3.from-primary-soft { background: color-mix(in srgb, var(--brand-secondary) 8%, white); }

/* Newsletter and footer. */
footer .bg-gradient-to-br.from-primary-dark {
    background: linear-gradient(120deg, var(--brand-primary), color-mix(in srgb, var(--brand-primary) 82%, black));
}
footer .bg-gradient-to-br.from-primary-dark .btn-accent { --brand-accent: var(--brand-secondary); }
footer .bg-gradient-to-br.from-primary-dark .eyebrow-light { background: rgb(255 255 255 / .16); }
footer h4 + .bg-accent { background: var(--brand-primary); }
footer .text-accent,
footer a svg { color: rgb(255 255 255 / .7); }

@media (max-width: 767px) {
    .hero-overlay {
        background: linear-gradient(180deg,
            color-mix(in srgb, var(--brand-secondary) 92%, transparent) 0%,
            color-mix(in srgb, var(--brand-secondary) 82%, transparent) 100%);
    }
}