/*
Theme Name: Kontext
Theme URI: https://kontextmedia.africa
Author: Kontext Media Initiative Uganda Limited
Author URI: https://kontextmedia.africa
Description: Studio Dark — a block theme for Kontext Media Africa. Built around three program areas: the broadcast studio, the digital newsroom and Kontext Media Academy. Plum-black ground, pale-blue signal, plum and sage bands. Archivo and Source Serif 4.
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 7.4
Version: 2.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kontext
Tags: full-site-editing, block-patterns, news, video, dark, custom-colors, custom-menu, editor-style, featured-images, wide-blocks
*/

/* ---------------------------------------------------------------
   1. Base
   --------------------------------------------------------------- */

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

::selection { background: var(--wp--preset--color--signal); color: var(--wp--preset--color--ground); }

:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--signal);
	outline-offset: 3px;
	border-radius: 2px;
}

.skip-link:focus { background: var(--wp--preset--color--signal); color: var(--wp--preset--color--ground); }

img, video, iframe { max-width: 100%; }

/* Numerals line up in columns wherever we set figures */
.kx-figure, .wp-block-post-date, .kx-meta { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------
   2. Typographic utilities
   --------------------------------------------------------------- */

/* Mono uppercase label — the theme's recurring structural marker */
.kx-label {
	font-family: var(--wp--preset--font-family--ibm-plex-mono);
	font-size: var(--wp--preset--font-size--tiny);
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--letter-spacing--label);
	color: var(--wp--preset--color--muted);
	margin: 0;
}

.kx-label--signal { color: var(--wp--preset--color--signal); }

/* Label with a rule running off to the right */
.kx-label--rule {
	display: flex;
	align-items: center;
	gap: 1rem;
	width: 100%;
}
.kx-label--rule::after {
	content: "";
	flex: 1 1 auto;
	height: 1px;
	background: var(--wp--preset--color--line);
}

/* Display type: Archivo's width axis, used only on true display sizes */
.kx-display {
	font-family: var(--wp--preset--font-family--archivo);
	font-weight: 700;
	line-height: var(--wp--custom--line-height--tight);
	letter-spacing: var(--wp--custom--letter-spacing--display);
	font-stretch: 112%;
	text-wrap: balance;
}

.kx-standfirst {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.5;
	color: var(--wp--preset--color--paper-dim);
	max-width: 56ch;
}

.kx-measure { max-width: 68ch; }

/* Keep running prose off the full 1240px */
.entry-content > p,
.entry-content > ul,
.entry-content > ol { max-width: 68ch; }

/* ---------------------------------------------------------------
   3. Header
   --------------------------------------------------------------- */

.kx-header {
	position: sticky;
	top: 0;
	z-index: 40;
	background: color-mix(in srgb, var(--wp--preset--color--ground) 92%, transparent);
	backdrop-filter: saturate(140%) blur(10px);
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.kx-header .wp-block-navigation__container { gap: clamp(1rem, 2.2vw, 2rem); }

.kx-header .wp-block-navigation-item__content {
	padding-block: 4px;
	border-bottom: 1px solid transparent;
	transition: border-color .18s ease, color .18s ease;
}
.kx-header .wp-block-navigation-item__content:hover,
.kx-header .current-menu-item > .wp-block-navigation-item__content {
	border-bottom-color: var(--wp--preset--color--signal);
	color: var(--wp--preset--color--paper);
	text-decoration: none;
}

.kx-header .wp-block-site-logo img { display: block; }

/* The small channel switch that sits at the right of the header */
.kx-channel-switch {
	font-family: var(--wp--preset--font-family--ibm-plex-mono);
	font-size: var(--wp--preset--font-size--tiny);
	letter-spacing: .08em;
	text-transform: uppercase;
	display: inline-flex;
	gap: .5rem;
	align-items: center;
}
.kx-channel-switch a { color: var(--wp--preset--color--muted); }
.kx-channel-switch a:hover { color: var(--wp--preset--color--signal); text-decoration: none; }

/* ---------------------------------------------------------------
   4. Sections
   --------------------------------------------------------------- */

/* Light sections, for the Academy and for long reads. Everything inside
   flips to ink-on-paper without needing per-block colours. Three grounds:
   paper, sage and plum — every one of them a logo colourway. */
/* Light bands. Sage carries the same text rules on its own, so a section that
   is given only .kx-section-sage never ends up with pale text on a pale ground. */
.kx-section-light { background: var(--wp--preset--color--paper); }
.kx-section-sage  { background: var(--wp--preset--color--sage); }

:is(.kx-section-light, .kx-section-sage) { color: var(--wp--preset--color--ink); }
:is(.kx-section-light, .kx-section-sage) :where(h1, h2, h3, h4, h5, h6, p, li, dt, dd, figcaption) { color: var(--wp--preset--color--ink); }
:is(.kx-section-light, .kx-section-sage) .kx-label { color: color-mix(in srgb, var(--wp--preset--color--ink) 62%, transparent); }
:is(.kx-section-light, .kx-section-sage) a:where(:not(.wp-element-button)) { color: var(--wp--preset--color--plum); }
:is(.kx-section-light, .kx-section-sage) .kx-rule { background: color-mix(in srgb, var(--wp--preset--color--ink) 15%, transparent); }
:is(.kx-section-light, .kx-section-sage) .wp-element-button { background: var(--wp--preset--color--ink); color: var(--wp--preset--color--paper); }
:is(.kx-section-light, .kx-section-sage) .wp-element-button:hover { background: var(--wp--preset--color--plum); color: var(--wp--preset--color--paper); }
:is(.kx-section-light, .kx-section-sage) .kx-ticks li::before { color: var(--wp--preset--color--plum); }
:is(.kx-section-light, .kx-section-sage) .kx-metrics__asat { color: color-mix(in srgb, var(--wp--preset--color--ink) 58%, transparent); }

/* Plum band — the loud one. Pale blue on plum, straight off the logo. */
.kx-section-plum {
	background: var(--wp--preset--color--plum);
	color: var(--wp--preset--color--sky);
}
.kx-section-plum :where(h1, h2, h3, h4, h5, h6, p, li, dt, dd, figcaption) { color: var(--wp--preset--color--sky); }
.kx-section-plum .kx-label { color: color-mix(in srgb, var(--wp--preset--color--sky) 72%, transparent); }
.kx-section-plum a:where(:not(.wp-element-button)) { color: var(--wp--preset--color--paper); }
.kx-section-plum .wp-element-button { background: var(--wp--preset--color--sky); color: var(--wp--preset--color--plum); }
.kx-section-plum .wp-element-button:hover { background: var(--wp--preset--color--paper); }
.kx-section-plum .kx-facts dt { color: color-mix(in srgb, var(--wp--preset--color--sky) 70%, transparent); }

.kx-rule { height: 1px; background: var(--wp--preset--color--line); border: 0; margin: 0; }

/* ---------------------------------------------------------------
   5. Cards and grids
   --------------------------------------------------------------- */

/* Programme card — used for the three program areas */
.kx-card {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	padding: clamp(1.5rem, 2.6vw, 2.25rem);
	height: 100%;
	display: flex;
	flex-direction: column;
	gap: .75rem;
	transition: border-color .2s ease, transform .2s ease;
}
.kx-card:hover { border-color: color-mix(in srgb, var(--wp--preset--color--signal) 55%, var(--wp--preset--color--line)); }
.kx-card h3 { margin: 0; overflow-wrap: anywhere; }
/* An address heading is longer than its card and must not set the column width. */
.kx-card h3 a[href^="mailto:"] { font-size: var(--wp--preset--font-size--medium); letter-spacing: -.01em; }
.kx-card p { margin: 0; color: var(--wp--preset--color--paper-dim); }
.kx-card .kx-card__foot { margin-top: auto; padding-top: 1rem; }

/* The numeral that marks each program area — a real sequence: 01 studio, 02 newsroom, 03 academy */
.kx-card__num {
	font-family: var(--wp--preset--font-family--ibm-plex-mono);
	font-size: var(--wp--preset--font-size--tiny);
	letter-spacing: .12em;
	color: var(--wp--preset--color--signal);
}

/* Episode cards: thumbnail-led, 16:9, no rounded corners — broadcast, not app */
.kx-episode .wp-block-post-featured-image img,
.kx-thumb img {
	aspect-ratio: 16 / 9;
	object-fit: cover;
	width: 100%;
	display: block;
}

.kx-episode {
	display: flex;
	flex-direction: column;
	gap: .7rem;
}
.kx-episode .wp-block-post-featured-image {
	margin: 0;
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--line);
	background: var(--wp--preset--color--surface);
}
.kx-episode .wp-block-post-featured-image img { transition: transform .5s cubic-bezier(.2,.7,.3,1); }
.kx-episode:hover .wp-block-post-featured-image img { transform: scale(1.03); }
.kx-episode .wp-block-post-title {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.2;
	margin: 0;
}
.kx-episode .wp-block-post-title a:hover { color: var(--wp--preset--color--signal); text-decoration: none; }
.kx-episode .wp-block-post-excerpt__excerpt { color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--small); }

/* Runtime / language / date strip under an episode title */
.kx-meta {
	font-family: var(--wp--preset--font-family--ibm-plex-mono);
	font-size: var(--wp--preset--font-size--tiny);
	letter-spacing: .06em;
	color: var(--wp--preset--color--muted);
	display: flex;
	flex-wrap: wrap;
	gap: .4rem .9rem;
	text-transform: uppercase;
}
.kx-meta .wp-block-post-date,
.kx-meta .wp-block-post-terms { font-size: inherit; color: inherit; }

/* A play affordance over the lead thumbnail */
.kx-play {
	position: relative;
	display: block;
}
.kx-play::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: clamp(54px, 6vw, 76px);
	height: clamp(54px, 6vw, 76px);
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: var(--wp--preset--color--signal);
	box-shadow: 0 10px 30px -10px rgba(0,0,0,.8);
	transition: transform .25s ease;
}
.kx-play::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: 2;
	transform: translate(-42%, -50%);
	border-style: solid;
	border-width: clamp(9px,1.1vw,13px) 0 clamp(9px,1.1vw,13px) clamp(15px,1.8vw,21px);
	border-color: transparent transparent transparent var(--wp--preset--color--ground);
}
.kx-play:hover::after { transform: translate(-50%, -50%) scale(1.07); }

/* Team member */
.kx-person img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; display: block; filter: grayscale(1) contrast(1.05); transition: filter .35s ease; }
.kx-person:hover img { filter: grayscale(0) contrast(1); }
.kx-person__role { font-family: var(--wp--preset--font-family--ibm-plex-mono); font-size: var(--wp--preset--font-size--tiny); text-transform: uppercase; letter-spacing: .1em; color: var(--wp--preset--color--signal); margin: .3rem 0 0; }

/* Team roster */
.kx-people {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: clamp(1.5rem, 2.6vw, 2.5rem);
	margin-top: var(--wp--preset--spacing--50);
}
.kx-person { margin: 0; }
.kx-person figcaption { padding-top: 1rem; }
.kx-person__name {
	font-family: var(--wp--preset--font-family--archivo);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.2;
	margin: 0;
	color: var(--wp--preset--color--paper);
}
.kx-person__bio {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
	line-height: 1.5;
	margin: .6rem 0 0;
}
.kx-person__role { margin: .3rem 0 0; }

/* Definition-style fact rows, used on About and Contact */
.kx-facts { display: grid; grid-template-columns: max-content 1fr; gap: .5rem 1.75rem; margin: 0; }
.kx-facts dt { font-family: var(--wp--preset--font-family--ibm-plex-mono); font-size: var(--wp--preset--font-size--tiny); text-transform: uppercase; letter-spacing: .1em; color: var(--wp--preset--color--muted); padding-top: .35rem; }
.kx-facts dd { margin: 0; }
@media (max-width: 600px) { .kx-facts { grid-template-columns: 1fr; gap: .15rem 0; } .kx-facts dd { margin-bottom: .9rem; } }

/* ---------------------------------------------------------------
   5b. Audience figures — a KPI row, never a chart
   A handful of headline numbers is a stat-tile row. Values use the
   sans at display size with PROPORTIONAL figures (tabular-nums would
   make them gappy); only columns of numbers get tabular figures.
   --------------------------------------------------------------- */

.kx-metrics {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: 1px;
	background: var(--wp--preset--color--line);
	border: 1px solid var(--wp--preset--color--line);
}
.kx-metric {
	background: var(--wp--preset--color--ground);
	padding: clamp(1.35rem, 2.4vw, 2rem);
	display: flex;
	flex-direction: column;
	gap: .35rem;
}
.kx-metric__value {
	font-family: var(--wp--preset--font-family--archivo);
	font-weight: 600;
	font-size: clamp(2.4rem, 5.2vw, 3.5rem);
	line-height: 1;
	letter-spacing: -.03em;
	font-variant-numeric: proportional-nums;
	color: var(--wp--preset--color--sky);
	margin: 0;
}
.kx-metric__plus { color: var(--wp--preset--color--signal); font-size: .55em; vertical-align: .55em; margin-left: .06em; }
.kx-metric__label {
	font-family: var(--wp--preset--font-family--archivo);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	margin: .3rem 0 0;
	color: var(--wp--preset--color--paper);
}
.kx-metric__note {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
	margin: 0;
	line-height: 1.45;
}
/* The as-at line is not fine print — it is what makes the figures usable. */
.kx-metrics__asat {
	font-family: var(--wp--preset--font-family--ibm-plex-mono);
	font-size: var(--wp--preset--font-size--tiny);
	line-height: 1.6;
	color: var(--wp--preset--color--muted);
	margin: 1rem 0 0;
	max-width: 80ch;
}
.kx-section-plum .kx-metric { background: var(--wp--preset--color--plum); }
.kx-section-plum .kx-metric__value { color: var(--wp--preset--color--sky); }
.kx-section-light .kx-metric { background: var(--wp--preset--color--sage); }
.kx-section-light .kx-metric__value { color: var(--wp--preset--color--plum); }
.kx-section-light .kx-metric__label { color: var(--wp--preset--color--ink); }


/* ---------------------------------------------------------------
   5c. Page components — Studio and Academy
   --------------------------------------------------------------- */

.kx-grid-3,
.kx-grid-4 {
	display: grid;
	gap: 1.5rem;
	margin-top: var(--wp--preset--spacing--50);
}
.kx-grid-3 { grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.kx-grid-4 { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }

.kx-programme .kx-facts { margin-top: auto; padding-top: 1.25rem; border-top: 1px solid var(--wp--preset--color--line); }
.kx-facts--tight { gap: .35rem 1.25rem; font-size: var(--wp--preset--font-size--small); }

/* Pillars — label + line, no card chrome, so they read as a list not a menu */
.kx-pillars { display: flex; flex-direction: column; gap: 1.5rem; }
.kx-pillars > div { padding-left: 1.25rem; border-left: 2px solid var(--wp--preset--color--line); }
.kx-pillars p:last-child { margin: .5rem 0 0; color: var(--wp--preset--color--paper-dim); }

/* Numbered steps — a real sequence, so the numerals earn their place */
.kx-steps {
	list-style: none;
	counter-reset: kxstep;
	padding: 0;
	margin: var(--wp--preset--spacing--50) 0 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: 1px;
	background: var(--wp--preset--color--line);
	border-block: 1px solid var(--wp--preset--color--line);
}
.kx-steps li {
	counter-increment: kxstep;
	background: var(--wp--preset--color--ground);
	padding: 1.6rem clamp(1.1rem, 1.8vw, 1.6rem) 1.8rem;
}
.kx-steps li::before {
	content: counter(kxstep, decimal-leading-zero);
	display: block;
	font-family: var(--wp--preset--font-family--ibm-plex-mono);
	font-size: var(--wp--preset--font-size--tiny);
	letter-spacing: .12em;
	color: var(--wp--preset--color--signal);
	margin-bottom: .9rem;
}
.kx-steps h3 { font-size: var(--wp--preset--font-size--large); margin: 0 0 .5rem; }
.kx-steps p { margin: 0; font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--paper-dim); }
.kx-section-plum .kx-steps li { background: var(--wp--preset--color--plum); }
.kx-section-light .kx-steps li { background: var(--wp--preset--color--sage); }

/* Rate and schedule tables */
.kx-tablewrap { overflow-x: auto; margin-top: var(--wp--preset--spacing--40); }
.kx-table {
	width: 100%;
	min-width: 34rem;
	border-collapse: collapse;
	font-size: var(--wp--preset--font-size--small);
	font-variant-numeric: tabular-nums;
}
.kx-table th,
.kx-table td { text-align: left; padding: .95rem 1.1rem; border-bottom: 1px solid color-mix(in srgb, currentColor 18%, transparent); vertical-align: top; }
.kx-table thead th {
	font-family: var(--wp--preset--font-family--ibm-plex-mono);
	font-size: var(--wp--preset--font-size--tiny);
	text-transform: uppercase;
	letter-spacing: .1em;
	font-weight: 400;
	opacity: .72;
}
.kx-table tbody th {
	font-family: var(--wp--preset--font-family--archivo);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--medium);
}
.kx-table__sub { display: block; font-family: var(--wp--preset--font-family--ibm-plex-mono); font-size: var(--wp--preset--font-size--tiny); font-weight: 400; opacity: .66; margin-top: .2rem; letter-spacing: .04em; }
.kx-table tbody tr:last-child th,
.kx-table tbody tr:last-child td { border-bottom: 0; }

.kx-pill {
	display: inline-block;
	font-family: var(--wp--preset--font-family--ibm-plex-mono);
	font-size: var(--wp--preset--font-size--tiny);
	letter-spacing: .08em;
	text-transform: uppercase;
	padding: .2rem .55rem;
	border: 1px solid currentColor;
	border-radius: 2px;
	opacity: .7;
}
.kx-pill--open { color: var(--wp--preset--color--open); opacity: 1; }

/* Status line under a hero — applications open or closed */
.kx-status {
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	font-family: var(--wp--preset--font-family--ibm-plex-mono);
	font-size: var(--wp--preset--font-size--small);
	margin: 2rem 0 0;
}
.kx-status__dot { width: .6rem; height: .6rem; border-radius: 50%; background: var(--wp--preset--color--open); flex: 0 0 auto; }
.kx-status--inline { margin-top: 0; }
.kx-status--closed { color: var(--wp--preset--color--muted); }
.kx-status--closed .kx-status__dot { background: var(--wp--preset--color--muted); }

/* Two lists side by side — what's included, what costs extra */
.kx-two-lists { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 2rem; margin-top: var(--wp--preset--spacing--50); }
.kx-ticks { list-style: none; padding: 0; margin: .9rem 0 0; display: flex; flex-direction: column; gap: .55rem; font-size: var(--wp--preset--font-size--small); }
.kx-ticks li { padding-left: 1.35rem; position: relative; }
.kx-ticks li::before { content: "—"; position: absolute; left: 0; opacity: .55; }

/* FAQ */
.kx-faq { margin-top: var(--wp--preset--spacing--40); border-top: 1px solid var(--wp--preset--color--line); }
.kx-faq details { border-bottom: 1px solid var(--wp--preset--color--line); }
.kx-faq summary {
	cursor: pointer;
	list-style: none;
	padding: 1.15rem 2.5rem 1.15rem 0;
	position: relative;
	font-family: var(--wp--preset--font-family--archivo);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--medium);
}
.kx-faq summary::-webkit-details-marker { display: none; }
.kx-faq summary::after {
	content: "+";
	position: absolute;
	right: .25rem;
	top: 50%;
	transform: translateY(-50%);
	font-family: var(--wp--preset--font-family--ibm-plex-mono);
	color: var(--wp--preset--color--signal);
	font-size: 1.1rem;
	line-height: 1;
}
.kx-faq details[open] summary::after { content: "–"; }
.kx-faq details p { margin: 0 0 1.35rem; max-width: 68ch; color: var(--wp--preset--color--paper-dim); }

/* Caption under a photograph slot */
.kx-caption {
	font-family: var(--wp--preset--font-family--ibm-plex-mono);
	font-size: var(--wp--preset--font-size--tiny);
	color: var(--wp--preset--color--muted);
	margin: .75rem 0 0;
	line-height: 1.5;
}

/* A slot where a form block belongs */
.kx-formslot {
	border: 1px dashed var(--wp--preset--color--line);
	background: var(--wp--preset--color--surface);
	padding: clamp(1.4rem, 2.4vw, 2rem);
}
.kx-formslot p:last-child { margin: .75rem 0 0; font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--muted); max-width: 64ch; }

/* ---------------------------------------------------------------
   6. Footer
   --------------------------------------------------------------- */

.kx-footer {
	border-top: 1px solid var(--wp--preset--color--line);
	background: var(--wp--preset--color--surface);
}
.kx-footer .kx-label { margin-bottom: .75rem; }
.kx-footer a { color: var(--wp--preset--color--paper-dim); }
.kx-footer a:hover { color: var(--wp--preset--color--signal); text-decoration: none; }
.kx-footer .kx-colophon {
	border-top: 1px solid var(--wp--preset--color--line);
	font-family: var(--wp--preset--font-family--ibm-plex-mono);
	font-size: var(--wp--preset--font-size--tiny);
	color: var(--wp--preset--color--muted);
}

/* ---------------------------------------------------------------
   7. Forms (WPForms and core search)
   --------------------------------------------------------------- */

.wp-block-search__input,
.wpforms-field input[type="text"],
.wpforms-field input[type="email"],
.wpforms-field input[type="tel"],
.wpforms-field input[type="url"],
.wpforms-field select,
.wpforms-field textarea {
	background: var(--wp--preset--color--ground);
	border: 1px solid var(--wp--preset--color--line);
	color: var(--wp--preset--color--paper);
	border-radius: 2px;
	padding: .7rem .85rem;
	font-family: var(--wp--preset--font-family--source-serif-4);
	font-size: 1rem;
	width: 100%;
}
.wpforms-field-label,
.wp-block-search__label {
	font-family: var(--wp--preset--font-family--ibm-plex-mono) !important;
	font-size: var(--wp--preset--font-size--tiny) !important;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--wp--preset--color--muted) !important;
	font-weight: 400 !important;
}
.wpforms-submit,
.wp-block-search__button {
	background: var(--wp--preset--color--signal) !important;
	color: var(--wp--preset--color--ground) !important;
	border: 0 !important;
	border-radius: 2px !important;
	font-family: var(--wp--preset--font-family--archivo) !important;
	font-weight: 600 !important;
	letter-spacing: .02em;
	padding: .8rem 1.5rem !important;
	cursor: pointer;
}
.wpforms-submit:hover,
.wp-block-search__button:hover { background: var(--wp--preset--color--paper) !important; }
.kx-section-light .wpforms-field input,
.kx-section-light .wpforms-field textarea {
	background: #fff;
	border-color: color-mix(in srgb, var(--wp--preset--color--ink) 22%, transparent);
	color: var(--wp--preset--color--ink);
}

/* ---------------------------------------------------------------
   8. Embeds
   --------------------------------------------------------------- */

.wp-block-embed__wrapper iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; display: block; border: 1px solid var(--wp--preset--color--line); }

/* ---------------------------------------------------------------
   9. Placeholder slots — visible while real assets are missing.
   Delete nothing: they disappear on their own once an image exists.
   --------------------------------------------------------------- */

.kx-slot {
	display: grid;
	place-content: center;
	text-align: center;
	gap: .35rem;
	background: repeating-linear-gradient(135deg, #1F2325 0 12px, #1B1F1C 12px 24px);
	border: 1px dashed var(--wp--preset--color--line);
	color: var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--ibm-plex-mono);
	font-size: var(--wp--preset--font-size--tiny);
	letter-spacing: .08em;
	text-transform: uppercase;
	aspect-ratio: 16 / 9;
	padding: 1rem;
}
.kx-slot--portrait { aspect-ratio: 4 / 5; }
.kx-slot small { text-transform: none; letter-spacing: 0; opacity: .7; }

/* ---------------------------------------------------------------
   10. Academy application — the modal and the form inside it
   --------------------------------------------------------------- */

.kx-apply-buttons { margin-top: 2.25rem; }

/* The dialog. Sits above everything, scrolls internally on a phone. */
.kx-modal {
	padding: 0;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 3px;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--paper);
	width: min(52rem, calc(100vw - 2rem));
	max-width: none;
	max-height: 88vh;
	max-height: 88dvh;
	overflow: auto;
	overscroll-behavior: contain;
}
.kx-modal::backdrop { background: rgba(12, 8, 11, .72); backdrop-filter: blur(3px); }
.kx-modal__inner { padding: clamp(1.5rem, 4vw, 3rem); position: relative; }
.kx-modal__close {
	position: absolute;
	top: .6rem;
	right: .75rem;
	background: none;
	border: 0;
	color: var(--wp--preset--color--muted);
	font-size: 1.9rem;
	line-height: 1;
	padding: .2rem .5rem;
	cursor: pointer;
	border-radius: 2px;
}
.kx-modal__close:hover { color: var(--wp--preset--color--paper); }
.kx-modal h2 { font-size: var(--wp--preset--font-size--xx-large); font-weight: 600; }

/* Without JavaScript the dialog becomes an ordinary section of the page,
   so the form still works. */
.no-js .kx-modal,
.kx-modal[open] { display: block; }

/* The form grid: two columns on a desktop, one on a phone. */
.kx-form {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.4rem 1.6rem;
	margin-top: 2rem;
}
.kx-field { margin: 0; display: flex; flex-direction: column; gap: .45rem; }
.kx-field--wide { grid-column: 1 / -1; }

.kx-field label {
	font-family: var(--wp--preset--font-family--ibm-plex-mono);
	font-size: var(--wp--preset--font-size--tiny);
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--wp--preset--color--paper-dim);
}
.kx-field__opt { text-transform: none; letter-spacing: 0; color: var(--wp--preset--color--muted); margin-left: .5rem; }
.kx-field__note {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
	line-height: 1.45;
}

.kx-form input[type="text"],
.kx-form input[type="email"],
.kx-form input[type="tel"],
.kx-form input[type="url"],
.kx-form select,
.kx-form textarea {
	background: var(--wp--preset--color--ground);
	border: 1px solid var(--wp--preset--color--line);
	color: var(--wp--preset--color--paper);
	border-radius: 2px;
	padding: .7rem .85rem;
	font-family: var(--wp--preset--font-family--source-serif-4);
	font-size: 1rem;
	width: 100%;
}
.kx-form textarea { resize: vertical; min-height: 7rem; }
.kx-form :is(input, select, textarea):focus-visible {
	outline: 2px solid var(--wp--preset--color--signal);
	outline-offset: 1px;
	border-color: var(--wp--preset--color--signal);
}
.kx-field.is-invalid :is(input, select, textarea) { border-color: #E8796A; }

/* The consent line reads as a sentence, not a field. */
.kx-field--check label {
	display: grid;
	grid-template-columns: 1.1rem 1fr;
	gap: .7rem;
	align-items: start;
	text-transform: none;
	letter-spacing: 0;
	font-family: var(--wp--preset--font-family--source-serif-4);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--paper-dim);
	line-height: 1.5;
	cursor: pointer;
}
.kx-field--check input { margin-top: .22rem; accent-color: var(--wp--preset--color--signal); width: 1.1rem; height: 1.1rem; }

.kx-form__actions {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	gap: 1.25rem;
	flex-wrap: wrap;
	margin-top: .5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--wp--preset--color--line);
}
.kx-form__cancel {
	background: none;
	border: 0;
	color: var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--ibm-plex-mono);
	font-size: var(--wp--preset--font-size--tiny);
	text-transform: uppercase;
	letter-spacing: .1em;
	cursor: pointer;
	padding: .4rem;
}
.kx-form__cancel:hover { color: var(--wp--preset--color--paper); }

/* A group of checkboxes reads as one question with several answers. */
.kx-field__legend {
	font-family: var(--wp--preset--font-family--ibm-plex-mono);
	font-size: var(--wp--preset--font-size--tiny);
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--wp--preset--color--paper-dim);
}
.kx-checks { display: grid; gap: .55rem; margin-top: .2rem; }
.kx-checks label {
	display: grid;
	grid-template-columns: 1.1rem 1fr;
	gap: .7rem;
	align-items: start;
	text-transform: none;
	letter-spacing: 0;
	font-family: var(--wp--preset--font-family--source-serif-4);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--paper-dim);
	line-height: 1.5;
	cursor: pointer;
}
.kx-checks input { margin-top: .22rem; accent-color: var(--wp--preset--color--signal); width: 1.1rem; height: 1.1rem; }

/* Date and number inputs: the browser's own picker, in the theme's colours. */
.kx-form input[type="date"],
.kx-form input[type="number"] {
	background: var(--wp--preset--color--ground);
	border: 1px solid var(--wp--preset--color--line);
	color: var(--wp--preset--color--paper);
	border-radius: 2px;
	padding: .7rem .85rem;
	font-family: var(--wp--preset--font-family--source-serif-4);
	font-size: 1rem;
	width: 100%;
}
.kx-form input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1) opacity(.6); cursor: pointer; }
.kx-form input[type="date"]:hover::-webkit-calendar-picker-indicator { filter: invert(1) opacity(1); }

/* The honeypot: present for a bot, gone for everyone else. */
.kx-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.kx-formerror {
	border-left: 2px solid #E8796A;
	background: var(--wp--preset--color--raised);
	padding: 1rem 1.25rem;
	margin-top: 1.75rem;
}
.kx-formerror ul { margin: .5rem 0 0; padding-left: 1.1rem; }
.kx-formerror li { color: var(--wp--preset--color--paper-dim); font-size: var(--wp--preset--font-size--small); }

@media (max-width: 640px) {
	.kx-form { grid-template-columns: 1fr; }
	.kx-modal { width: 100vw; max-width: 100vw; max-height: 100dvh; height: 100dvh; border: 0; border-radius: 0; }
}

/* ---------------------------------------------------------------
   11. The click-to-load player
   --------------------------------------------------------------- */

.kx-player {
	position: relative;
	aspect-ratio: 16 / 9;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	overflow: hidden;
	display: grid;
	place-items: center;
}
.kx-player__still {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* YouTube stills are bright; knock them back so the play button reads. */
	filter: saturate(.92) brightness(.88);
	transition: filter .25s ease, transform .4s ease;
}
.kx-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.kx-player__play {
	position: relative;
	z-index: 2;
	width: clamp(3.6rem, 7vw, 5.2rem);
	aspect-ratio: 1;
	border-radius: 50%;
	border: 0;
	background: var(--wp--preset--color--sky);
	display: grid;
	place-items: center;
	cursor: pointer;
	transition: transform .18s ease, background .18s ease;
	box-shadow: 0 6px 28px rgba(12, 8, 11, .45);
}
.kx-player__icon {
	width: 0;
	height: 0;
	border-style: solid;
	border-width: .62rem 0 .62rem 1.05rem;
	border-color: transparent transparent transparent var(--wp--preset--color--ink);
	margin-left: .22rem;
}
.kx-player:hover .kx-player__play { transform: scale(1.06); background: var(--wp--preset--color--paper); }
.kx-player:hover .kx-player__still { filter: saturate(1) brightness(.98); transform: scale(1.015); }
.kx-player__play:focus-visible { outline: 3px solid var(--wp--preset--color--signal); outline-offset: 4px; }

.kx-player__time {
	position: absolute;
	right: .6rem;
	bottom: .6rem;
	z-index: 2;
	font-family: var(--wp--preset--font-family--ibm-plex-mono);
	font-size: var(--wp--preset--font-size--tiny);
	background: rgba(12, 8, 11, .82);
	color: var(--wp--preset--color--paper);
	padding: .18rem .45rem;
	border-radius: 2px;
	font-variant-numeric: tabular-nums;
}
.kx-player__fallback {
	position: relative;
	z-index: 2;
	background: var(--wp--preset--color--sky);
	color: var(--wp--preset--color--ink);
	padding: .7rem 1.2rem;
	border-radius: 2px;
	text-decoration: none;
}
.kx-player__note {
	font-family: var(--wp--preset--font-family--ibm-plex-mono);
	font-size: var(--wp--preset--font-size--tiny);
	color: var(--wp--preset--color--muted);
	margin: .7rem 0 0;
}

/* Episode cards carry the same still, so give them the same treatment. */
.kx-episode .wp-post-image,
.kx-episode .kx-thumb { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; height: auto; filter: saturate(.92) brightness(.9); transition: filter .25s ease; }
.kx-episode:hover .wp-post-image,
.kx-episode:hover .kx-thumb { filter: saturate(1) brightness(1); }

/* ---------------------------------------------------------------
   12. Watch filters
   --------------------------------------------------------------- */

.kx-filters {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin-top: var(--wp--preset--spacing--50);
}
.kx-filter {
	font-family: var(--wp--preset--font-family--ibm-plex-mono);
	font-size: var(--wp--preset--font-size--tiny);
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--wp--preset--color--paper-dim);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 2px;
	padding: .45rem .8rem;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	transition: border-color .18s ease, color .18s ease;
}
.kx-filter:hover { border-color: var(--wp--preset--color--signal); color: var(--wp--preset--color--paper); text-decoration: none; }
.kx-filter.is-on { background: var(--wp--preset--color--sky); border-color: var(--wp--preset--color--sky); color: var(--wp--preset--color--ink); }
.kx-filter--lang { border-style: dashed; }
.kx-filter__n { font-variant-numeric: tabular-nums; opacity: .6; }
.kx-filter.is-on .kx-filter__n { opacity: .75; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}