/*
 * Afrobeats Wire brand accents.
 *
 * Kept OUT of pulsebeat.css on purpose: that file is a compiled artifact
 * regenerated from the original theme sources, so anything written into it
 * is lost on the next rebuild. This file is enqueued after it and wins.
 *
 *   lime  #B7E33B  primary accent   (was PulseBeat's #FFEB0C yellow)
 *   mint  #39D98A  secondary accent (hover, dark mode, gradient end)
 *
 * Both are light, high-luminance colours, so the theme's near-black
 * button/label text (--color-text-primary, #141414) keeps strong contrast
 * on either. Do not pair them with white text.
 */

body {
	--afw-lime: #B7E33B;
	--afw-mint: #39D98A;

	/* Primary accent: nav current/hover pill, blockquote rule, tag links,
	   TOC hover, button fills. 15 rules consume var(--color-accent). */
	--ghost-accent-color: #B7E33B;
	--color-accent: #B7E33B;
	--color-background-button: #B7E33B;

	/* Was a dead alias in the original; kept pointing at the primary so any
	   stray reference stays consistent rather than falling back to yellow. */
	--pulsebeat-yellow: #B7E33B;
}

/*
 * Dark mode. The original consumes --dark-mode-accent-color in two rules but
 * never defines it, so --color-accent resolved to an invalid value and every
 * accent silently died in dark mode. Defining it fixes that and is the
 * natural home for the secondary colour: mint reads better than lime on a
 * dark ground.
 *
 * Deliberately NOT wrapped in @media (prefers-color-scheme: dark). This theme
 * does not switch on the OS preference; dark mode is an explicit opt-in via
 * :root[data-user-color-scheme="dark"] / .is-darkModeAdminSetting-enabled.
 * Keying off the media query instead paints the dark accent onto a page that
 * is still light for every visitor whose OS is in dark mode.
 */
:root {
	--dark-mode-accent-color: #39D98A;
}

/* Secondary accent as the hover state, so the two colours read as a pair
   rather than one being decorative. */
.c-btn:hover,
.c-form-group__btn:hover {
	background-color: var(--afw-mint);
}

.c-nav__link:hover {
	background-color: var(--afw-mint);
}

/* Newsletter banner: the original hardcoded the yellow at both stops.
   Runs lime into mint instead, keeping the transparent fade at each edge. */
.c-homepage-newsletter-form {
	background: linear-gradient(
		90deg,
		rgba(183, 227, 59, 0) 0,
		#B7E33B 25%,
		#39D98A 75%,
		rgba(57, 217, 138, 0) 100%
	);
}

/* ------------------------------------------------------------------
 * Directory
 *
 * Built from the existing card and section components so the directory
 * reads as part of the publication. Only the pieces the theme has no
 * equivalent for are defined here: filter chips and the profile fact list.
 * ------------------------------------------------------------------ */

.c-directory__intro {
	max-width: 60ch;
	margin-bottom: var(--space-32);
}

.c-directory__filter {
	display: flex;
	align-items: baseline;
	gap: var(--space-12);
	flex-wrap: wrap;
	margin-bottom: var(--space-16);
}

.c-directory__filter-label {
	font-size: var(--font-size-scale-0);
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--color-text-secondary);
	flex: 0 0 auto;
}

.c-directory__filter-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-8);
}

.c-directory__chip {
	display: inline-flex;
	align-items: center;
	gap: var(--space-8);
	padding: var(--space-4) var(--space-12);
	border: 1px solid var(--color-border, #D9D9D9);
	border-radius: 999px;
	font-size: var(--font-size-scale-0);
	line-height: var(--line-height-scale-2);
	text-decoration: none;
	color: inherit;
	transition: background-color .15s ease, border-color .15s ease;
}

.c-directory__chip:hover,
.c-directory__chip:focus-visible {
	background-color: var(--afw-lime);
	border-color: var(--afw-lime);
}

.c-directory__chip.is-active {
	background-color: var(--afw-lime);
	border-color: var(--afw-lime);
	font-weight: 600;
}

/* The count is secondary information, so it must not compete with the label.
   Tabular figures stop the chips jittering as counts change width. */
.c-directory__count {
	font-size: .85em;
	opacity: .65;
	font-variant-numeric: tabular-nums;
}

.c-company-card__meta {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--space-8);
	justify-content: space-between;
}

.c-company-card__place {
	font-size: var(--font-size-scale-0);
	color: var(--color-text-secondary);
}

.c-company-card__site {
	font-size: var(--font-size-scale-0);
	word-break: break-word;
}

/* Profile facts: a definition list that stays readable when a value wraps. */
.c-company__facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: var(--space-20) var(--space-32);
	margin: var(--space-32) 0;
	padding: var(--space-24) 0;
	border-top: 1px solid var(--color-border, #D9D9D9);
	border-bottom: 1px solid var(--color-border, #D9D9D9);
}

.c-company__fact dt {
	font-size: var(--font-size-scale-0);
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--color-text-secondary);
	margin-bottom: var(--space-4);
}

.c-company__fact dd {
	margin: 0;
	font-size: var(--font-size-scale-2);
	word-break: break-word;
}

/* ------------------------------------------------------------------
 * Logo
 *
 * The supplied wordmark is solid black on transparent, which works on the
 * warm-paper header but would be invisible on the dark footer. Inverting
 * the single asset turns pure black into pure white and preserves the
 * alpha channel, so no second file has to be kept in sync.
 * ------------------------------------------------------------------ */

.c-logo__img,
.custom-logo {
	display: block;
	width: auto;
	max-width: 260px;
	height: auto;
}

.c-footer .c-logo__img,
.c-footer .custom-logo {
	filter: invert(1);
	max-width: 220px;
}

/* Editor's picks runs on a black ground and reuses the footer's treatment
   for any logo that appears inside it. */
.c-section--editors-pick .c-logo__img,
.c-section--editors-pick .custom-logo {
	filter: invert(1);
}

@media (max-width: 600px) {
	.c-logo__img,
	.custom-logo {
		max-width: 190px;
	}
}

/* ------------------------------------------------------------------
 * Sticky footer
 *
 * The theme pins the footer with `position: sticky; top: 100vh`. That
 * technique only works when the footer's containing block is at least a
 * viewport tall: sticky can never move an element outside its container,
 * so on a short page (an empty category, a 404, a thin profile) the footer
 * cannot reach the bottom and the page background shows beneath it as a
 * white band. The original site never hit this because every page was long.
 *
 * Giving body a viewport min-height restores the intended behaviour. dvh
 * first so mobile browser chrome does not cause a jump, with vh as the
 * fallback for engines without dvh.
 * ------------------------------------------------------------------ */

body {
	min-height: 100vh;
	min-height: 100dvh;
}

/* ------------------------------------------------------------------
 * Footer balance
 *
 * The right column stretches to match the left, so with only a copyright
 * line in it the footer showed a tall void. Anchoring that column's last
 * child to the bottom turns the empty space into deliberate alignment.
 * ------------------------------------------------------------------ */

.c-footer .c-footer__copyright {
	margin-top: auto;
	font-size: var(--font-size-scale-1);
	color: var(--color-background-primary);
	opacity: .7;
}

@media (max-width: 600px) {
	.c-footer .c-footer__copyright {
		margin-top: var(--space-32);
	}
}

/* ------------------------------------------------------------------
 * Secondary mark (afro roundel)
 *
 * Square, so it carries the brand where the wide wordmark cannot: the
 * mobile header, and paired with the wordmark in the footer. It is already
 * lime, so unlike the black wordmark it must NOT be inverted on dark.
 * ------------------------------------------------------------------ */

.c-mark {
	display: block;
	width: auto;
	height: auto;
}

/* Header: wordmark on desktop, roundel on mobile. Exactly one is shown. */
.c-logo__mark-link {
	display: none;
}

.c-mark--header {
	max-height: 40px;
	width: auto;
}

@media (max-width: 600px) {
	.c-header .custom-logo,
	.c-header .c-logo__text {
		display: none;
	}

	.c-logo__mark-link {
		display: block;
	}
}

/* Footer: roundel sits above the wordmark. The invert rule targets the
   wordmark only, so the roundel keeps its lime. */
.c-logo--footer {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-16);
}

.c-mark--footer {
	max-height: 56px;
	width: auto;
	filter: none;
}

.c-footer .c-mark {
	filter: none;
}

/* ------------------------------------------------------------------
 * Footer mark (replaces the copyright line in the right column)
 *
 * This asset's facial detail is transparent, so the dark footer reads
 * through it. That means it must never be inverted or placed on a light
 * ground, and the footer's wordmark invert rule is scoped away from it.
 * ------------------------------------------------------------------ */

.c-footer__mark-link {
	display: block;
	margin-left: auto;
	line-height: 0;
}

.c-footer__mark {
	display: block;
	width: auto;
	height: auto;
	max-width: 132px;
	filter: none;
}

/* Hidden on tablet and below. Stacked, the footer columns put the roundel
   directly under the wordmark that already carries the brand, so it reads as
   a duplicate rather than a balance to it. 1024px covers landscape tablets,
   which the theme's own 979px breakpoint would miss. */
@media (max-width: 1024px) {
	.c-footer__mark-link {
		display: none;
	}
}

/* ------------------------------------------------------------------
 * Category label colour
 *
 * --pulsebeat-purple (#6C63C6) coloured exactly three rules:
 *   .c-card__tag a, .c-teaser__tag a, .c-topper__tag a
 * i.e. the NEWS / CULTURE / BUSINESS labels above every headline.
 *
 * Now #7C5CFC. Contrast on the warm-paper card ground (#FFFEF9) measures
 * 4.34:1, just under the 4.5:1 WCAG AA line for text this size but a world
 * away from the 1.48:1 the brand lime scored here, which was why lime was
 * abandoned for these labels. On the black editor's-picks section it is
 * 4.79:1. Keep any future label colour above roughly 4.5:1 on #FFFEF9.
 * ------------------------------------------------------------------ */

body {
	--pulsebeat-purple: #7C5CFC;
}

.c-card__tag a,
.c-teaser__tag a,
.c-topper__tag a {
	color: #7C5CFC;
}

/* ------------------------------------------------------------------
 * Header strapline
 *
 * Sits under the wordmark and above the nav bar. Serif italic to echo the
 * footer description rather than introducing a third voice, and sized down
 * so it reads as a subtitle to the logo, not a second headline.
 * ------------------------------------------------------------------ */

/* The centre block is a flex ROW in the theme, which put the strapline
   beside the wordmark. Stacking it turns it into a subtitle. */
.c-header__top-center {
	flex-direction: column;
	align-items: center;
	justify-content: center;
	/* .c-header__top-block sets a flex gap that resolves to 16px at desktop.
	   Stacked, that gap sat between the wordmark and the strapline and, on top
	   of the strapline's own margin, read as a 24px hole. Spacing is set once,
	   on the strapline, so there is a single number to tune. */
	gap: 0;
}

.c-header__tagline {
	margin: var(--space-4) 0 0;
	/* Inter is already self-hosted by the theme (InterVariable.woff2 with a
	   matching @font-face), so this resolves locally and needs no network
	   request. "Inter Placeholder" is a Framer artifact that resolves to
	   nothing; kept because it was specified, harmless as a middle fallback. */
	font-family: "Inter", "Inter Placeholder", sans-serif;
	font-style: normal;
	font-size: var(--font-size-scale-0);
	line-height: var(--line-height-scale-2);
	color: var(--color-text-primary);
	text-align: center;
	text-wrap: balance;
	/* Caps need tracking to stay readable at this size; without it the
	   letterforms crowd and the line reads as a block. */
	text-transform: uppercase;
	letter-spacing: .08em;
}

@media (max-width: 600px) {
	.c-header__tagline {
		display: none;
	}
}

/* ------------------------------------------------------------------
 * Inter, re-declared with a version query.
 *
 * The Inter files that shipped in the theme download were corrupt: a valid
 * wOF2 header over an unusable payload, so they returned HTTP 200 and passed
 * `file`, fetch() read all 627KB fine, but FontFace.load() failed with a bare
 * NetworkError and the text silently fell back to system sans. The three
 * Instrument faces from the same download loaded fine, which is what isolated
 * it. Replaced with the known-good copies already on the box (help centre).
 *
 * These declarations exist to bust the cache: fonts are served `expires 1y`,
 * so anyone who loaded the site before the fix holds the broken file and
 * would keep failing. Same family and style as the compiled sheet, declared
 * later, so these win.
 * ------------------------------------------------------------------ */

@font-face {
	font-family: Inter;
	font-style: normal;
	font-display: swap;
	font-weight: 100 900;
	src: url(../fonts/InterVariable.woff2?v=2) format("woff2");
}

@font-face {
	font-family: Inter;
	font-style: italic;
	font-display: swap;
	font-weight: 100 900;
	src: url(../fonts/InterVariable-Italic.woff2?v=2) format("woff2");
}

/* ------------------------------------------------------------------
 * Two-row sections (Business, News)
 *
 * Add a section's modifier to both selectors below to give it six instead
 * of three. Kept as an explicit list rather than applied to every section,
 * so which sections are deep is a decision on the page and not a side
 * effect.
 *
 * At >=61.25em the theme caps every section at a single row of three:
 *   grid-template-rows: auto 0            (second row has no height)
 *   ...featured-tag-section article:nth-child(4) { display: none }
 * Both have to be undone for Business to show six, and a row gap has to be
 * put back because the theme sets `grid-gap: 0 <column-gap>` — zero rows
 * gap, which is invisible while there is only one row and would jam the two
 * rows together the moment a second appears.
 * ------------------------------------------------------------------ */

@media (min-width: 61.25em) {
	.c-section--business .o-grid--3-columns.featured-tag-section,
	.c-section--news .o-grid--3-columns.featured-tag-section {
		grid-template-rows: auto auto;
		grid-gap: var(--space-48) calc(var(--grid-gap) * 3);
	}

	/* News runs four across. The theme's .o-grid--3-columns hard-codes three,
	   so the column template has to be replaced, and the column gap is pulled
	   back from 3x to 2x the grid gap: at four columns the 3x gutter eats so
	   much width that the cards turn narrow and the headlines wrap badly. */
	.c-section--news .o-grid--3-columns.featured-tag-section {
		grid-template-columns: repeat(4, 1fr);
		grid-gap: var(--space-48) calc(var(--grid-gap) * 2);
	}

	.c-section--business .o-grid--3-columns.featured-tag-section > article,
	.c-section--news .o-grid--3-columns.featured-tag-section > article {
		display: block;
	}
}

/* ------------------------------------------------------------------
 * Spacing around the Editor's Picks band
 *
 * The dark band carries 64px of its own top and bottom padding AND the
 * standard 64px section margin, so it sat in roughly 128px of space on each
 * side while every other section gap was 64px. Its internal padding already
 * does the separating, so the external margins are halved: the band now
 * reads as part of the same rhythm rather than floating away from the
 * sections either side of it.
 * ------------------------------------------------------------------ */

.c-section--editors-pick,
.c-section--editors-pick + .c-section {
	/*
	 * Zero, not a smaller margin. The band carries 64px of its own padding at
	 * top and bottom, which is exactly the section rhythm used everywhere
	 * else, so any external margin is added ON TOP of it. At 32px the space
	 * after the band measured 96px against 64px between every other pair,
	 * which is what read as a gap. Letting the padding do the work makes the
	 * band sit in the same rhythm as its neighbours.
	 */
	margin-top: 0;
}