/*
 * KIFA brand theme — Navy · Signal Red · Mist
 * Loaded after the original compiled stylesheet (kifa.css) and re-skins it;
 * layout components (header, footer, home sections) live in sections.css.
 *
 * Roles
 *   Navy        #283B8F  headings, links, key numbers
 *   Navy deep   #242F71  tiles, photo overlays, featured cards
 *   Night       #161A3D  top banner, footer
 *   Mid blue    #45579C  secondary tiles
 *   Mist        #E9ECF5  alternate sections
 *   White       #FFFFFF  canvas and cards
 *   Signal red  #E3181F  buttons (pill), eyebrows, active states, rules
 *   Red text    #D0141B  red used as text (AA on white)
 */

:root {
    --font: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --wrap: 1350px;
    --gutter: clamp(1rem, 4vw, 2.5rem);
    --banner-h: 2.125rem;
    --header-h: 4.5rem;
    --site-top: calc(var(--banner-h) + var(--header-h));

    --white: #ffffff;
    --mist: #e9ecf5;
    --mist-soft: #f4f6fb;
    --line: #d9deec;
    --line-strong: #bcc4dd;

    --navy: #283b8f;
    --navy-deep: #242f71;
    --night: #161a3d;
    --blue-mid: #45579c;

    --red: #e3181f;
    --red-deep: #b91218;
    --red-text: #d0141b;
    --red-soft: #ff6b5e;

    --ink: #111322;
    --ink-soft: #2e3247;
    --ink-muted: #4e5470;
    --ink-subtle: #6b7190;

    --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E");
    --check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");

    /* Design tokens consumed by kifa.css (HSL triplets) */
    --background: 0 0% 100%;
    --foreground: 233 33% 10%;
    --card: 0 0% 100%;
    --card-foreground: 233 33% 10%;
    --popover: 0 0% 100%;
    --popover-foreground: 233 33% 10%;
    --primary: 229 56% 36%;
    --primary-foreground: 0 0% 100%;
    --secondary: 226 38% 94%;
    --secondary-foreground: 229 56% 36%;
    --accent: 358 81% 49%;
    --accent-foreground: 0 0% 100%;
    --muted: 226 38% 94%;
    --muted-foreground: 230 18% 37%;
    --border: 226 33% 89%;
    --input: 226 25% 80%;
    --ring: 229 56% 36%;
    --kifa-green: 226 38% 94%;
    --kifa-green-foreground: 233 33% 10%;
    --kifa-orange: 0 0% 100%;
    --kifa-orange-foreground: 233 33% 10%;
}
@media (min-width: 1240px) { :root { --banner-h: 2.25rem; --header-h: 5.75rem; } }

html { scroll-padding-top: 6rem; }
::selection { background: var(--navy); color: var(--white); }
body { font-family: var(--font); background-color: var(--white); color: var(--ink); -webkit-font-smoothing: antialiased; }
#root { position: relative; overflow-x: clip; }

/* ================================================================ typography */
h1, h2, h3, h4, h5, h6 { font-family: var(--font); }
main h1, main h2 { font-weight: 500; letter-spacing: -.03em; color: var(--navy); }
main h1 { line-height: 1.06; }
main h2 { line-height: 1.12; }
main h3 { letter-spacing: -.025em; font-weight: 500; }
:is(h1, h2, h3).font-extrabold, :is(h1, h2, h3).font-black, :is(h1, h2, h3).font-bold { font-weight: 500; }
@media (min-width: 768px) { main h2:not([class*='text-']):not([class*='sc-']), main h2.text-4xl { font-size: clamp(2rem, 3.6vw, 3.25rem); line-height: 1.1; } }

/* Small uppercase eyebrow labels: red with a short rule */
p.uppercase.tracking-widest.text-primary,
p.uppercase.tracking-wider.text-primary { display: inline-flex; align-items: center; gap: .7rem; color: var(--red-text); }
p.uppercase.tracking-widest.text-primary::before,
p.uppercase.tracking-wider.text-primary::before { content: ''; width: 1.75rem; height: 2px; background: currentColor; }

/* ================================================================ surfaces */
.bg-white, .bg-card, .bg-\[\#ffffff\], .bg-background { background-color: var(--white); }
.bg-slate-50, main section.bg-slate-50 { background-color: var(--mist-soft); }
.bg-slate-100, .hover\:bg-slate-100:hover, .hover\:bg-slate-50:hover { background-color: var(--mist); }
.bg-slate-200 { background-color: var(--line); }
.bg-muted { background-color: var(--mist); }
.bg-kifa-green, .bg-kifa-orange { background-image: none !important; animation: none !important; }
.bg-kifa-green { background-color: var(--mist); color: var(--ink); }
.bg-kifa-orange { background-color: var(--white); color: var(--ink); }
.bg-kifa-orange + .bg-white, .bg-white + .bg-kifa-orange { border-top: 1px solid var(--line); }
.bg-slate-950, .bg-slate-900 { background-color: var(--navy-deep); }

/* Decorative full-bleed layers that used the old metallic finish become navy */
:is(div, section, aside).metallic-black,
:is(div, section, aside).metallic-ghost,
:is(div, section, aside).metallic-pink {
    background: linear-gradient(135deg, var(--night), var(--navy-deep) 60%, var(--navy)) !important;
    animation: none !important;
    border: 0 !important;
}
section.metallic-pink { color: var(--white); }
section.metallic-pink :is(h2, p) { color: var(--white) !important; }
section.metallic-pink svg.lucide-heart { color: var(--red-soft) !important; }

/* ================================================================ text on light grounds */
.text-slate-900, .hover\:text-slate-900:hover, .text-foreground, .text-card-foreground { color: var(--ink); }
.text-slate-800 { color: var(--ink); }
.text-slate-700 { color: var(--ink-soft); }
.text-slate-600 { color: var(--ink-muted); }
.text-slate-500, .text-slate-400, .text-muted-foreground { color: var(--ink-subtle); }
.text-slate-300 { color: var(--ink-muted); }
main :is(h1, h2):is(.text-slate-900, .text-white, .text-foreground, .text-kifa-green-foreground, .text-kifa-orange-foreground), main h3.text-kifa-green-foreground { color: var(--navy); }

.text-primary, .hover\:text-primary:hover, .group:hover .group-hover\:text-primary, .focus\:text-primary:focus { color: var(--navy); }
.text-primary\/10 { color: rgb(40 59 143 / .12); }
.text-kifa-green, .text-kifa-orange { color: var(--navy); }

/* Sections that were dark on the original site are light now, so their white text turns ink */
.text-white { color: var(--ink); }
:is(.text-white\/90, .text-white\/85, .text-white\/80) { color: var(--ink-soft); }
:is(.text-white\/70, .text-white\/60, .text-white\/30) { color: var(--ink-subtle); }
:is(.text-kifa-green-foreground\/90, .text-kifa-green-foreground\/80, .text-kifa-orange-foreground\/90, .text-kifa-orange-foreground\/80) { color: var(--ink-muted); }
.text-kifa-green-foreground, .text-kifa-orange-foreground { color: var(--ink); }

/* ...except on dark grounds: page heroes, photographs, navy layers and cards */
:is(main > :is(section, header):first-child, main > [data-pledge-mode] > section:first-child, section.metallic-pink, .bg-gradient-to-br.from-slate-900, [class*='from-black'], [class*='from-slate-900\/'], .metallic-black ~ *, .program-hero-overlay ~ *)
    :is(.text-white, .text-kifa-green-foreground, .text-kifa-orange-foreground, h1, h2, h3, h4) { color: var(--white); }
:is(main > :is(section, header):first-child, main > [data-pledge-mode] > section:first-child, section.metallic-pink, .bg-gradient-to-br.from-slate-900, [class*='from-black'], [class*='from-slate-900\/'], .metallic-black ~ *, .program-hero-overlay ~ *)
    :is(.text-white\/90, .text-white\/85, .text-white\/80, .text-kifa-green-foreground\/90, .text-kifa-green-foreground\/80) { color: rgb(255 255 255 / .88); }
:is(main > :is(section, header):first-child, main > [data-pledge-mode] > section:first-child, section.metallic-pink, .bg-gradient-to-br.from-slate-900, [class*='from-black'], [class*='from-slate-900\/'], .metallic-black ~ *, .program-hero-overlay ~ *)
    :is(.text-white\/70, .text-white\/60, .text-white\/30, .text-slate-300, .text-slate-400) { color: rgb(255 255 255 / .72); }
:is([class*='from-black'], [class*='from-slate-900\/']) ~ :is(.text-white, .text-white\/90, .text-white\/80, *) :is(.text-white, h3, h4),
:has(> [class*='from-black']) ~ * :is(.text-white, .text-white\/90, .text-white\/85, .text-white\/80, .text-white\/70),
:is([class*='from-black'], [class*='from-slate-900\/']) ~ * :is(.text-white, .text-white\/90, .text-white\/85, .text-white\/80, .text-white\/70),
:is([class*='from-black'], [class*='from-slate-900\/']) ~ :is(.text-white, .text-white\/90, .text-white\/80) { color: var(--white); }
.text-pink-200, .text-pink-200\/90 { color: var(--red-soft); }

/* ================================================================ page heroes (first block of every page) */
:is(main > :is(section, header):first-child, main > [data-pledge-mode] > section:first-child) {
    position: relative; isolation: isolate; overflow: hidden;
    padding-top: calc(var(--site-top) + clamp(2.5rem, 6vw, 4.5rem)) !important;
    padding-bottom: clamp(3rem, 7vw, 5.5rem) !important;
    background-color: var(--night);
    color: var(--white);
}
:is(main > :is(section, header):first-child, main > [data-pledge-mode] > section:first-child) h1 {
    color: var(--white); font-weight: 400; letter-spacing: -.025em; line-height: 1.06;
    font-size: clamp(2.4rem, 5.6vw, 4.5rem); text-wrap: balance;
}
:is(main > :is(section, header):first-child, main > [data-pledge-mode] > section:first-child) h1 + p { font-size: clamp(1.05rem, 1.5vw, 1.25rem); line-height: 1.65; font-weight: 400; }
:is(main > :is(section, header):first-child, main > [data-pledge-mode] > section:first-child) p.uppercase { color: var(--white) !important; display: inline-flex; align-items: center; gap: .7rem; }
:is(main > :is(section, header):first-child, main > [data-pledge-mode] > section:first-child) p.uppercase::before { content: ''; width: 2rem; height: 2px; background: var(--red); }
:is(main > :is(section, header):first-child, main > [data-pledge-mode] > section:first-child) .drop-shadow-md, :is(main > :is(section, header):first-child, main > [data-pledge-mode] > section:first-child) .drop-shadow-sm { filter: none; }

/* a) Split heroes (text + photo): the photo fills the whole hero under a navy veil */
main > section.bg-slate-950:first-child {
    display: grid; grid-template: 1fr / 1fr; min-height: max(34rem, 76svh); align-items: end;
    padding: 0 !important;
}
main > section.bg-slate-950:first-child > * { grid-area: 1 / 1; }
main > section.bg-slate-950:first-child > .order-2 { position: absolute; inset: 0; height: auto; min-height: 0; max-height: none; z-index: -2; }
main > section.bg-slate-950:first-child::before {
    content: ''; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(90deg, rgb(20 24 64 / .9) 0%, rgb(36 47 113 / .66) 50%, rgb(36 47 113 / .2) 100%),
                linear-gradient(0deg, rgb(15 18 46 / .6), transparent 50%);
}
main > section.bg-slate-950:first-child > .order-1 {
    width: 100%; max-width: var(--wrap); margin-inline: auto;
    padding: calc(var(--site-top) + 3rem) var(--gutter) clamp(3rem, 7vw, 5.5rem) !important;
}
main > section.bg-slate-950:first-child > .order-1 > div { max-width: 46rem; }
main > section.bg-slate-950:first-child [data-hero-slider] [data-slide-dot] { display: none; }

/* b) Programme heroes and the Impact hero: photo with navy veil */
.program-hero { min-height: max(32rem, 72svh); display: flex; align-items: flex-end; }
.program-hero > img, main > section:first-child > .absolute.inset-0 > img { z-index: -2; }
.program-hero-overlay { position: absolute; inset: 0; z-index: -1; }
.program-hero-overlay, main > section:first-child [class*='from-black'] {
    background: linear-gradient(90deg, rgb(20 24 64 / .9) 0%, rgb(36 47 113 / .62) 55%, rgb(36 47 113 / .2) 100%),
                linear-gradient(0deg, rgb(15 18 46 / .6), transparent 50%) !important;
}
.program-hero > .container, main > section:first-child > .container { max-width: var(--wrap); padding-inline: var(--gutter); }
.program-hero > .container { padding-block: 0 !important; }
main > section:first-child.min-h-\[60dvh\] { min-height: max(32rem, 70svh); align-items: flex-end; justify-content: flex-start; }
main > section:first-child.min-h-\[60dvh\] > .absolute { z-index: -2; }
main > section:first-child.min-h-\[60dvh\] .text-center { text-align: left; }
main > section:first-child.min-h-\[60dvh\] .max-w-3xl.mx-auto { margin-left: 0; }
main > section:first-child .bg-primary\/80, main > section:first-child .bg-red-600\/90 {
    background: transparent !important; border: 1px solid rgb(255 255 255 / .55); color: var(--white) !important;
    text-transform: uppercase; letter-spacing: .12em; font-size: .75rem; font-weight: 600; box-shadow: none !important;
}

/* c) Plain title bands (Gallery, News, legal pages, articles): navy over a soft photograph */
main > :is(section, header).bg-kifa-green:first-child {
    background-color: var(--night) !important;
    background-image: linear-gradient(90deg, rgb(20 24 64 / .94), rgb(36 47 113 / .8) 60%, rgb(36 47 113 / .55)),
                      url('/images/featured/community-engagement.webp') !important;
    background-size: cover !important; background-position: center 40% !important; background-repeat: no-repeat !important;
    min-height: 26rem; display: flex; align-items: flex-end;
}
main > :is(section, header).bg-kifa-green:first-child > .container { width: 100%; max-width: var(--wrap); padding-inline: var(--gutter); }

/* d) Pledge hero */
[data-pledge-mode] > section:first-child > .metallic-black { z-index: -2; }
[data-pledge-mode] > section:first-child > [style*='radial-gradient'] { z-index: -1; opacity: .9 !important; background: radial-gradient(60% 70% at 0% 100%, rgb(227 24 31 / .45), transparent 60%), radial-gradient(50% 50% at 100% 0%, rgb(69 87 156 / .5), transparent 60%) !important; }

/* Hero buttons sit on dark: secondary buttons turn white-outline */
:is(main > :is(section, header):first-child, main > [data-pledge-mode] > section:first-child) :is(a, button):is(.metallic-silver, .metallic-ghost, .metallic-black:not(.metallic-pink)) {
    border-color: rgb(255 255 255 / .85) !important; color: var(--white) !important;
}
:is(main > :is(section, header):first-child, main > [data-pledge-mode] > section:first-child) :is(a, button):is(.metallic-silver, .metallic-ghost, .metallic-black:not(.metallic-pink)) * { color: var(--white) !important; }
:is(main > :is(section, header):first-child, main > [data-pledge-mode] > section:first-child) :is(a, button):is(.metallic-silver, .metallic-ghost, .metallic-black:not(.metallic-pink)):hover { background: var(--white) !important; color: var(--navy) !important; }
:is(main > :is(section, header):first-child, main > [data-pledge-mode] > section:first-child) :is(a, button):is(.metallic-silver, .metallic-ghost, .metallic-black:not(.metallic-pink)):hover * { color: var(--navy) !important; }

/* ================================================================ sections, cards, images */
.program-section { padding-block: clamp(4rem, 8vw, 7rem); }
main .container { max-width: var(--wrap); }
main :is(.rounded-xl, .rounded-2xl, .rounded-3xl, .rounded-lg):not(img):not(button):not(a):not(input):not(textarea):not(select):not(.rounded-full) { border-radius: 0; }
main :is(.rounded-xl, .rounded-2xl, .rounded-3xl).overflow-hidden:has(> img:first-child),
main .relative.overflow-hidden:has(> img.object-cover):not(:first-child):not(section),
main img:is(.rounded-xl, .rounded-2xl, .rounded-3xl) { border-radius: 0 3.5rem 0 0; }
main :is(.border-2) { border-width: 1px; }
.border-slate-100 { border-color: var(--mist); }
.border-slate-200, .border-border, .border { border-color: var(--line); }
.border-slate-300 { border-color: var(--line-strong); }
.border-slate-400 { border-color: var(--line-strong); }
.border-slate-700, .border-slate-800 { border-color: var(--line); }
.border-primary, .border-kifa-orange { border-color: var(--navy) !important; }
:is(.border-white\/20, .border-white\/30, .border-white\/40) { border-color: var(--line); }
:is(main > :is(section, header):first-child, main > [data-pledge-mode] > section:first-child) :is(.border-white\/20, .border-white\/30, .border-white\/40) { border-color: rgb(255 255 255 / .3); }
.shadow-md, .shadow-lg, .shadow-xl, .shadow-2xl { box-shadow: 0 24px 48px -32px rgb(23 27 64 / .45) !important; }
.shadow, .shadow-sm { box-shadow: none !important; }
.bg-white\/10, .bg-white\/20, .hover\:bg-white\/20:hover, .hover\:bg-white\/80:hover { background-color: var(--white); }
.bg-kifa-green .bg-white\/10, .bg-kifa-green .bg-white\/20 { background-color: var(--white); }
.bg-kifa-green .hover\:bg-white\/20:hover { background-color: var(--white); box-shadow: inset 0 -3px 0 var(--red) !important; }
.bg-white\/50 { background-color: rgb(255 255 255 / .75); }
:is(main > :is(section, header):first-child, main > [data-pledge-mode] > section:first-child) :is(.bg-white\/10, .bg-white\/20) { background-color: rgb(255 255 255 / .12); }

/* Icon tiles and badges: navy squares with white icons */
.bg-primary:not(a):not(button), .bg-primary\/80 { background-color: var(--navy) !important; color: var(--white) !important; }
:is(.bg-primary:not(a):not(button), .bg-primary\/80) * { color: var(--white) !important; }
.bg-red-600, .bg-red-600\/90 { background-color: var(--red) !important; color: var(--white) !important; }
.bg-red-600 *, .bg-red-600\/90 * { color: var(--white) !important; }
.bg-primary\/10, .bg-primary\/5, .program-card-icon { background-color: var(--mist) !important; color: var(--navy); }
.hover\:bg-primary\/10:hover, .focus\:bg-primary\/10:focus { background-color: var(--mist) !important; }
.program-card-icon { border-radius: 0 !important; color: var(--navy); }
.ring-primary { --tw-ring-color: var(--navy); }
.text-red-700, .text-red-300 { color: var(--red-text); }
.border-red-200, .ring-red-200 { border-color: #f6c7c9; --tw-ring-color: #f6c7c9; }
.data-\[state\=active\]\:bg-red-600[data-state='active'] { background-color: var(--white) !important; color: var(--navy) !important; box-shadow: inset 0 -3px 0 var(--red) !important; }

/* Selected pledge amount */
[data-pledge-amount].bg-primary\/5 { background-color: var(--mist) !important; box-shadow: inset 0 0 0 2px var(--navy) !important; }

/* Leftover pink / gradient accents */
.text-pink-400\/30 { color: rgb(227 24 31 / .3); }
.border-pink-400\/70 { border-color: var(--red); }
.bg-pink-300 { background-color: var(--red); }
.bg-gradient-to-r.from-pink-200 { background: none !important; -webkit-text-fill-color: var(--red-soft); color: var(--red-soft); }
.from-pink-200\/80 { --tw-gradient-from: rgb(255 107 94 / .8) var(--tw-gradient-from-position); --tw-gradient-to: rgb(255 107 94 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.from-pink-400\/50 { --tw-gradient-from: rgb(40 59 143 / .12) var(--tw-gradient-from-position); --tw-gradient-to: rgb(40 59 143 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.via-pink-500\/40 { --tw-gradient-to: rgb(227 24 31 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), rgb(227 24 31 / .5) var(--tw-gradient-via-position), var(--tw-gradient-to); }
.via-fuchsia-500\/10 { --tw-gradient-to: transparent var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), transparent var(--tw-gradient-via-position), var(--tw-gradient-to); }
.to-pink-300, .to-pink-300\/80 { --tw-gradient-to: var(--red) var(--tw-gradient-to-position); }
.to-slate-700\/60 { --tw-gradient-to: var(--red) var(--tw-gradient-to-position); }
[class*='from-black'] { --tw-gradient-from: rgb(20 24 64 / .9) var(--tw-gradient-from-position); --tw-gradient-to: rgb(20 24 64 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.via-black\/40, .via-black\/50, .via-black\/60 { --tw-gradient-stops: var(--tw-gradient-from), rgb(36 47 113 / .5) var(--tw-gradient-via-position), var(--tw-gradient-to); }

/* Featured (Ebola) card: navy with a red edge */
.bg-gradient-to-br.from-slate-900 {
    background-image: linear-gradient(135deg, var(--night), var(--navy-deep) 60%, var(--navy)) !important;
    border-color: transparent !important;
    box-shadow: inset 4px 0 0 var(--red), 0 24px 48px -32px rgb(23 27 64 / .6) !important;
}

/* ================================================================ impact numbers */
.impact-stat-card { align-items: flex-start; text-align: left; border-radius: 0; padding: .5rem 0 0 1.75rem; border-left: 1px solid var(--line); }
.impact-stat-card:hover { transform: none; }
.impact-stat-card:after { display: none; }
.impact-number { color: var(--navy) !important; font-weight: 500; letter-spacing: -.04em; }
.impact-stat-card:hover .impact-number { transform: none; filter: none; }
.impact-label { color: var(--navy); text-transform: none; letter-spacing: -.01em; font-weight: 500; opacity: 1; }
.impact-desc { color: var(--ink-muted); opacity: 1; }
.tracking-tight.text-3xl.font-bold.text-primary { color: var(--navy); font-weight: 500; letter-spacing: -.03em; }

/* ================================================================ legacy buttons → pills */
:is(a, button):is(.metallic-pink, .metallic-black, .metallic-silver, .metallic-ghost) {
    border-radius: 999px !important; text-transform: uppercase; letter-spacing: .04em; font-size: .8125rem !important;
    font-weight: 600; animation: none !important; background-image: none !important; filter: none !important;
    transform: none !important; transition: background-color .25s, color .25s, border-color .25s !important;
}
:is(a, button):is(.metallic-pink, .metallic-black, .metallic-silver, .metallic-ghost):not(:has(svg))::after {
    content: ''; width: 1.05em; height: 1.05em; background: currentColor;
    -webkit-mask: var(--arrow) center / contain no-repeat; mask: var(--arrow) center / contain no-repeat;
}
:is(a, button):is(.metallic-pink, .metallic-black, .metallic-silver, .metallic-ghost).h-10.w-10::after { display: none; }

/* Primary: solid signal red, white text */
:is(a, button).metallic-pink:not(.border-white\/30) {
    background: var(--red) !important; color: var(--white) !important; border: 1px solid var(--red) !important; box-shadow: none !important;
}
:is(a, button).metallic-pink:not(.border-white\/30) * { color: var(--white) !important; }
:is(a, button).metallic-pink:not(.border-white\/30):hover { background: var(--red-deep) !important; border-color: var(--red-deep) !important; }

/* Secondary: red outline, fills on hover */
:is(a, button).metallic-black:not(.metallic-pink),
:is(a, button).metallic-silver,
:is(a, button).metallic-ghost,
:is(a, button).metallic-pink.border-white\/30 {
    background: transparent !important; color: var(--red-text) !important; border: 1px solid var(--red) !important; box-shadow: none !important;
}
:is(a, button):is(.metallic-black:not(.metallic-pink), .metallic-silver, .metallic-ghost, .metallic-pink.border-white\/30) * { color: inherit !important; }
:is(a, button):is(.metallic-black:not(.metallic-pink), .metallic-silver, .metallic-ghost, .metallic-pink.border-white\/30):hover {
    background: var(--red) !important; color: var(--white) !important;
}
/* Outline buttons on photographs and navy cards stay white */
:is([class*='from-black'] ~ *, .bg-gradient-to-br.from-slate-900, section.metallic-pink) :is(a, button):is(.metallic-black:not(.metallic-pink), .metallic-silver, .metallic-ghost, .metallic-pink.border-white\/30) {
    color: var(--white) !important; border-color: rgb(255 255 255 / .8) !important;
}
section.metallic-pink :is(a, button).metallic-pink:not(.border-white\/30) { background: var(--white) !important; color: var(--navy) !important; border-color: var(--white) !important; }
section.metallic-pink :is(a, button).metallic-pink:not(.border-white\/30) * { color: var(--navy) !important; }

/* ================================================================ links */
main a.text-primary:not([class*='metallic']):not([class*='bg-']) {
    color: var(--red-text) !important; font-weight: 600; text-decoration: none;
    background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .25s;
}
main a.text-primary:not([class*='metallic']):not([class*='bg-']):hover { background-size: 100% 1px; }
main a.text-primary svg { color: currentColor; }

/* ================================================================ forms, tabs, misc */
input, textarea, select { accent-color: var(--navy); }
main :is(input, textarea, select):not([type='checkbox']):not([type='radio']) { border-radius: 0 !important; }
:is(input, textarea, select):focus-visible { border-color: var(--navy) !important; }
.focus-visible\:ring-primary\/30:focus-visible, .focus\:ring-primary\/30:focus { --tw-ring-color: rgb(40 59 143 / .25); }
input.bg-slate-50, textarea.bg-slate-50, select.bg-slate-50 { background-color: var(--white); }
::placeholder { color: var(--ink-subtle); }

[role='tablist'].bg-muted { background-color: transparent; border-bottom: 1px solid var(--line-strong); border-radius: 0; padding: 0; }
[role='tablist'].bg-muted [role='tab'] { border-radius: 0; color: var(--navy); opacity: .7; }
[role='tab'][data-state='active'] { background-color: transparent !important; color: var(--navy) !important; opacity: 1 !important; box-shadow: inset 0 -3px 0 var(--red) !important; }

:where(.news-article-body) a:not([class]) { color: var(--red-text); text-decoration-thickness: 1px; text-underline-offset: 4px; }
:where(.news-article-body) a:not([class]):hover { color: var(--red-deep); }
:where(.news-article-body) blockquote:not([class]) { border-left: 3px solid var(--red); background: var(--mist); border-radius: 0; color: var(--navy); }
:where(.news-article-body) h2:not([class]), :where(.news-article-body) h3:not([class]) { color: var(--navy); }
:where(.news-article-body) img:not([class]) { border-radius: 0 3.5rem 0 0; box-shadow: none; }
.kifa-pagination a { color: var(--red-text); }

/* Accordion (FAQ) */
main [data-orientation='vertical'] > button[aria-expanded] { color: var(--navy); font-weight: 500; }
main [data-orientation='vertical'] > button[aria-expanded='true'] { color: var(--red-text); }

[data-lightbox-overlay] { background-color: rgb(15 18 46 / .96) !important; }
[data-lightbox-img] { border-radius: 0 !important; }

p.shadow-sm { box-shadow: none !important; }