/*
 * Kartalistan 1903 – dark mode.
 *
 * Loaded after every other frontend stylesheet (functions.php, priority 20)
 * so it wins the cascade for all component surfaces. Everything that changes
 * the look of a component is scoped under html[data-theme="dark"]; the only
 * unscoped rules are the theme-toggle button (needed in both themes) and a
 * single restrained body transition.
 *
 * Tokens follow the audit map: the existing WP preset palette (ink, paper,
 * white, line, charcoal, silver, kartal-red) stays untouched in light mode;
 * dark mode introduces semantic surfaces and text levels instead of
 * redefining the presets.
 */

/* ============================================================
   1. Theme toggle – base styles for BOTH themes.
   Mirrors the existing circular icon-button language used by
   .front-hero__thumbs-arrow / .front-opinions__navbtn /
   .kmd-upcoming__arrow (38px, 1px border, currentColor SVG).
   ============================================================ */
.site-header__theme-toggle {
	flex: 0 0 38px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	margin: 0;
	padding: 0;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 50%;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--ink);
	cursor: pointer;
	transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}

.site-header__theme-toggle:hover,
.site-header__theme-toggle:focus-visible {
	border-color: var(--wp--preset--color--kartal-red);
	color: var(--wp--preset--color--kartal-red);
}

.site-header__theme-toggle:focus-visible {
	outline: 2px solid var(--wp--preset--color--kartal-red);
	outline-offset: 2px;
}

.site-header__theme-toggle .theme-toggle__icon {
	width: 17px;
	height: 17px;
	fill: none;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Sun icon (shown when dark, means "switch to light") is hidden by default;
   the moon icon (shown when light, means "switch to dark") is visible. The
   .is-dark class is maintained by theme-toggle.js; the html[data-theme="dark"]
   scopes are the CSS-only fallback so the right icon shows before the script
   runs and after any DOM replacement. */
.site-header__theme-toggle .theme-toggle__icon--sun {
	display: none;
}

.site-header__theme-toggle.is-dark .theme-toggle__icon--sun,
html[data-theme="dark"] .site-header__theme-toggle .theme-toggle__icon--sun {
	display: block;
}

.site-header__theme-toggle.is-dark .theme-toggle__icon--moon,
html[data-theme="dark"] .site-header__theme-toggle .theme-toggle__icon--moon {
	display: none;
}

/* ============================================================
   2. Dark-mode semantic tokens.
   ============================================================ */
html[data-theme="dark"] {
	color-scheme: dark;

	--k-bg: #0d0f11;
	--k-bg-deep: #090b0d;

	--k-surface-1: #15181b;
	--k-surface-2: #1b1f23;
	--k-surface-3: #20252a;
	--k-surface-hover: #252b31;

	--k-text-primary: #f2f3f4;
	--k-text-secondary: #a4aab1;
	--k-text-muted: #777e87;

	--k-border: rgba(255, 255, 255, 0.09);
	--k-border-strong: rgba(255, 255, 255, 0.14);

	--k-shadow-soft: 0 10px 32px rgba(0, 0, 0, 0.24);
	--k-shadow-card: 0 8px 24px rgba(0, 0, 0, 0.18);

	/* Author-profiles plugin variable remap (plugin itself untouched). */
	--kap-red: var(--wp--preset--color--kartal-red);
	--kap-ink: #f2f3f4;
	--kap-charcoal: #1b1f23;
	--kap-paper: #15181b;
	--kap-line: rgba(255, 255, 255, 0.09);
	--kap-muted: #a4aab1;
}

/* ============================================================
   3. Global surfaces, text, forms, media helpers.
   ============================================================ */
body {
	transition: background-color 160ms ease, color 160ms ease;
}

html[data-theme="dark"] body,
html[data-theme="dark"] .wp-site-blocks {
	background-color: var(--k-bg);
	color: var(--k-text-primary);
}

/* One continuous charcoal surface across the whole header strip: the group,
   its inner flex row, the brand cluster and the nav all share the same
   primary background, so no region reads as a separate panel. */
html[data-theme="dark"] .site-header,
html[data-theme="dark"] .site-header__inner,
html[data-theme="dark"] .site-header__brand-group,
html[data-theme="dark"] .site-header__nav {
	background-color: var(--k-surface-1);
}

/* The rendered .site-header carries the preset utility class
   .has-charcoal-background-color. WordPress's generated global-styles rule
   for it ends with !important (verified: .has-charcoal-background-color{
   background-color: var(--wp--preset--color--charcoal) !important;}), so a
   plain specificity win is not enough — match it with !important to paint
   the full-width strip with --k-surface-1 instead of the lighter charcoal
   wings on either side of the centered inner content. */
html[data-theme="dark"] .site-header.has-charcoal-background-color {
	background-color: var(--k-surface-1) !important;
}

html[data-theme="dark"] .site-header__inner {
	gap: clamp(20px, 3vw, 48px);
}

html[data-theme="dark"] .site-header__nav .wp-block-navigation-item__content {
	color: var(--k-text-primary) !important; /* overrides the theme's existing !important white nav-link rule (style.css) */
}

html[data-theme="dark"] .site-header__search .wp-block-search__input {
	background: var(--k-surface-2);
	border-color: var(--k-border-strong);
	color: var(--k-text-primary);
}

html[data-theme="dark"] .site-header__search:hover .wp-block-search__input,
html[data-theme="dark"] .site-header__search:focus-within .wp-block-search__input {
	border-color: var(--k-border-strong);
}

html[data-theme="dark"] .site-header__search .wp-block-search__input::placeholder {
	color: var(--k-text-muted);
}

/* Keep the red search button in both themes; only soften its hover state. */
html[data-theme="dark"] .site-header__search .wp-block-search__button.wp-element-button {
	background-color: var(--wp--preset--color--kartal-red);
	color: var(--wp--preset--color--white);
}

html[data-theme="dark"] .site-header__search .wp-block-search__button.wp-element-button:hover {
	background: var(--k-surface-hover);
	color: var(--k-text-primary);
}

/* Toggle: one step lighter than the header surface so the circle still reads
   as a control, but visually secondary to the red search button beside it. */
html[data-theme="dark"] .site-header__theme-toggle {
	background: var(--k-surface-3);
	border-color: var(--k-border-strong);
	color: var(--k-text-primary);
}

html[data-theme="dark"] .site-header__theme-toggle:hover,
html[data-theme="dark"] .site-header__theme-toggle:focus-visible {
	border-color: var(--wp--preset--color--kartal-red);
	color: var(--wp--preset--color--kartal-red);
}

html[data-theme="dark"] .site-header__theme-toggle:focus-visible {
	outline-color: var(--wp--preset--color--kartal-red);
}

/* Mobile navigation overlay: charcoal in light mode stays a dark surface. */
html[data-theme="dark"] .site-header__nav .wp-block-navigation__responsive-container {
	background: var(--k-surface-1) !important; /* overrides the theme's existing !important charcoal overlay rule (style.css) */
}

/* Generic form controls (covers core search, 404 search, contact inputs). */
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] input[type="tel"],
html[data-theme="dark"] input[type="url"],
html[data-theme="dark"] input[type="search"],
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
	background-color: var(--k-surface-2);
	border-color: var(--k-border);
	color: var(--k-text-primary);
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
	color: var(--k-text-muted);
}

html[data-theme="dark"] .wp-block-search__input,
html[data-theme="dark"] .wp-block-search__button {
	background-color: var(--k-surface-2);
	border-color: var(--k-border);
	color: var(--k-text-primary);
}

/* Separators, tables, captions, blockquotes inside article content. */
html[data-theme="dark"] hr.wp-block-separator {
	border-color: var(--k-border-strong);
}

html[data-theme="dark"] .wp-block-table,
html[data-theme="dark"] .wp-block-table th,
html[data-theme="dark"] .wp-block-table td,
html[data-theme="dark"] .single-post__content table,
html[data-theme="dark"] .single-post__content th,
html[data-theme="dark"] .single-post__content td {
	border-color: var(--k-border);
	color: var(--k-text-primary);
}

html[data-theme="dark"] .wp-block-image figcaption,
html[data-theme="dark"] .wp-element-caption,
html[data-theme="dark"] .single-post__content figcaption {
	color: var(--k-text-secondary);
}

html[data-theme="dark"] .single-post__content blockquote {
	color: var(--k-text-secondary);
}

/* ============================================================
   4. Homepage – hero controls (hero itself stays dark).
   ============================================================ */
html[data-theme="dark"] .front-hero__thumbs-arrow {
	background: var(--k-surface-2);
	border-color: var(--k-border-strong);
	color: var(--k-text-primary);
}

html[data-theme="dark"] .front-hero__thumbs-arrow:hover {
	border-color: var(--wp--preset--color--kartal-red);
	color: var(--wp--preset--color--kartal-red);
}

/* ============================================================
   5. Son Haberler.
   ============================================================ */
html[data-theme="dark"] .front-hero__news {
	background: var(--k-bg-deep);
	transition: background-color 160ms ease;
}

html[data-theme="dark"] .front-hero__news-header {
	background-image: linear-gradient(
		to right,
		var(--wp--preset--color--kartal-red) 0,
		var(--wp--preset--color--kartal-red) 132px,
		var(--k-border-strong) 132px,
		var(--k-border-strong) 100%
	);
}

html[data-theme="dark"] .front-hero__news-title {
	color: var(--k-text-primary);
}

html[data-theme="dark"] .featured-news-card {
	background: var(--k-surface-1);
	box-shadow: var(--k-shadow-card);
	transition: background-color 160ms ease, box-shadow 200ms ease;
}

html[data-theme="dark"] .front-hero__news-card {
	background: var(--k-surface-1);
	box-shadow:
		0 3px 12px rgba(0, 0, 0, 0.24),
		inset 0 0 0 1px var(--k-border);
	transition: background-color 160ms ease, box-shadow 200ms ease;
}

html[data-theme="dark"] .front-hero__news-card:hover {
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.34);
}

html[data-theme="dark"] .front-hero__news-cardtitle {
	color: var(--k-text-primary);
}

html[data-theme="dark"] .front-hero__news-excerpt {
	color: var(--k-text-secondary);
}

html[data-theme="dark"] .front-hero__news-date {
	color: var(--k-text-muted);
}

html[data-theme="dark"] .front-hero__news-more-btn .wp-block-button__link {
	background: var(--k-surface-2);
	color: var(--k-text-primary);
}

html[data-theme="dark"] .front-hero__news-more-btn .wp-block-button__link:hover {
	background: var(--wp--preset--color--kartal-red);
}

/* ============================================================
   6. Match centre (all styling lives in this theme stylesheet;
   the plugin renders class-based markup only).
   ============================================================ */
html[data-theme="dark"] .kmd-card,
html[data-theme="dark"] .kmd-upcoming,
html[data-theme="dark"] .kmd-standings-card,
html[data-theme="dark"] .kmd-columnists-card {
	background: var(--k-surface-1);
	box-shadow: var(--k-shadow-card);
	transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

html[data-theme="dark"] .kmd-card__label,
html[data-theme="dark"] .kmd-upcoming__label,
html[data-theme="dark"] .kmd-standings-card__title,
html[data-theme="dark"] .kmd-columnists-card__header {
	background: var(--k-surface-3);
}

/* The live match label bar must stay red. */
html[data-theme="dark"] .kmd-upcoming--live .kmd-upcoming__label {
	background: var(--wp--preset--color--kartal-red);
}

html[data-theme="dark"] .kmd-card__league,
html[data-theme="dark"] .kmd-card__date {
	color: var(--k-text-muted);
}

html[data-theme="dark"] .kmd-team,
html[data-theme="dark"] .kmd-score {
	color: var(--k-text-primary);
}

html[data-theme="dark"] .kmd-score--time {
	color: var(--wp--preset--color--kartal-red);
}

html[data-theme="dark"] .kmd-score--tbd {
	color: var(--k-text-muted);
}

html[data-theme="dark"] .kmd-europa-bar__label,
html[data-theme="dark"] .kmd-champions-bar__label,
html[data-theme="dark"] .kmd-superlig-bar__label,
html[data-theme="dark"] .kmd-turkcup-bar__label,
html[data-theme="dark"] .kmd-conference-bar__label,
html[data-theme="dark"] .kmd-upcoming__league {
	color: var(--k-text-secondary);
}

html[data-theme="dark"] .kmd-upcoming__date {
	color: var(--k-text-muted);
}

html[data-theme="dark"] .kmd-upcoming__comp-logo--generic {
	color: var(--k-text-secondary);
}

html[data-theme="dark"] .kmd-upcoming__badge--fallback {
	background: var(--k-surface-3);
	border-color: var(--k-border);
	color: var(--k-text-secondary);
}

html[data-theme="dark"] .kmd-upcoming__arrow {
	background: var(--k-surface-2);
	border-color: var(--k-border-strong);
}

html[data-theme="dark"] .kmd-upcoming__arrow:hover,
html[data-theme="dark"] .kmd-upcoming__arrow:focus-visible {
	background: var(--k-surface-hover);
	border-color: var(--wp--preset--color--kartal-red);
}

html[data-theme="dark"] .kmd-upcoming__arrow:focus-visible,
html[data-theme="dark"] .kmd-upcoming__dot:focus-visible {
	outline-color: var(--wp--preset--color--kartal-red);
}

html[data-theme="dark"] .kmd-upcoming__arrow::before {
	border-color: var(--k-text-secondary);
}

html[data-theme="dark"] .kmd-upcoming__dot {
	background: var(--k-border-strong);
}

html[data-theme="dark"] .kmd-upcoming__dot.is-active {
	background: var(--wp--preset--color--kartal-red);
}

/* Live slide gets a restrained red edge (class is emitted by the plugin;
   no rule exists for it yet, so it is safe to define here). */
html[data-theme="dark"] .kmd-upcoming__slide--live {
	box-shadow: inset 0 2px 0 rgba(227, 27, 54, 0.55);
}

html[data-theme="dark"] .kmd-live-status {
	color: var(--wp--preset--color--kartal-red);
}

html[data-theme="dark"] .kmd-standings__table th {
	background: var(--k-surface-1);
	color: var(--k-text-muted);
	border-bottom-color: var(--k-border-strong);
}

html[data-theme="dark"] .kmd-standings__table td {
	color: var(--k-text-primary);
	border-bottom-color: var(--k-border);
}

/* Beşiktaş row: one continuous highlighted band. border-collapse merges the
   per-cell translucent backgrounds, so the row reads as a single dark-red
   strip; the narrow red indicator sits only on the far-left cell (inset
   box-shadow), and the standard row divider (k-border) is kept instead of a
   red line under every cell. */
html[data-theme="dark"] .kmd-row--highlight td {
	background: rgba(227, 27, 54, 0.12);
	border-left: 0;
	border-right: 0;
	border-bottom-color: var(--k-border);
	color: var(--k-text-primary);
}

html[data-theme="dark"] .kmd-row--highlight td:first-child {
	box-shadow: inset 3px 0 0 var(--wp--preset--color--kartal-red);
}

html[data-theme="dark"] .kmd-columnists-card {
	border-color: var(--k-border);
}

html[data-theme="dark"] .kmd-columnist-item {
	border-bottom-color: var(--k-border);
}

html[data-theme="dark"] .kmd-columnist-item__title {
	color: var(--k-text-primary);
}

html[data-theme="dark"] .kmd-columnist-item__author {
	color: var(--wp--preset--color--kartal-red);
}

/* ============================================================
   7. Köşe Yazıları / heritage / media.
   The opinions panel and heritage banner are already dark; only
   the bright media item surfaces are converted.
   ============================================================ */
html[data-theme="dark"] .front-media__header {
	background-image: linear-gradient(
		to right,
		var(--wp--preset--color--kartal-red) 0,
		var(--wp--preset--color--kartal-red) 132px,
		var(--k-border-strong) 132px,
		var(--k-border-strong) 100%
	);
}

html[data-theme="dark"] .front-media__title {
	color: var(--k-text-primary);
}

html[data-theme="dark"] .front-media__item {
	background: var(--k-surface-1);
	box-shadow:
		0 3px 12px rgba(0, 0, 0, 0.22),
		inset 0 0 0 1px var(--k-border);
	transition: background-color 160ms ease, box-shadow 180ms ease, transform 180ms ease;
}

html[data-theme="dark"] .front-media__item:hover {
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}

html[data-theme="dark"] .front-media__item-title {
	color: var(--k-text-primary);
}

html[data-theme="dark"] .front-media__item .front-media__date {
	color: var(--k-text-muted);
}

/* ============================================================
   8. Archives, index, search results, pagination.
   ============================================================ */
html[data-theme="dark"] .archive-page__title {
	color: var(--k-text-primary);
}

html[data-theme="dark"] .archive-page__title::after {
	background: var(--k-border-strong);
}

html[data-theme="dark"] .archive-page__section-title {
	color: var(--k-text-primary);
}

html[data-theme="dark"] .archive-page__section-count {
	color: var(--k-text-muted);
}

html[data-theme="dark"] .archive-page__section-head {
	border-bottom-color: var(--k-border);
}

html[data-theme="dark"] .archive-page__card {
	background: var(--k-surface-1);
	border-color: var(--k-border);
	box-shadow: var(--k-shadow-card);
	transition: background-color 160ms ease, border-color 160ms ease, box-shadow 180ms ease, transform 180ms ease;
}

html[data-theme="dark"] .archive-page__card:hover {
	box-shadow: var(--k-shadow-soft);
}

html[data-theme="dark"] .archive-page__card-title a {
	color: var(--k-text-primary);
}

html[data-theme="dark"] .archive-page__card-excerpt {
	color: var(--k-text-secondary);
}

html[data-theme="dark"] .archive-page__card-date {
	color: var(--k-text-muted);
}

html[data-theme="dark"] .archive-page__pagination .wp-block-query-pagination-previous,
html[data-theme="dark"] .archive-page__pagination .wp-block-query-pagination-next,
html[data-theme="dark"] .archive-page__pagination .page-numbers {
	background: var(--k-surface-2);
	border-color: var(--k-border-strong);
	color: var(--k-text-primary);
}

html[data-theme="dark"] .archive-page__pagination .page-numbers.current {
	background: var(--k-surface-3);
	border-color: var(--k-border-strong);
	color: var(--k-text-primary);
}

/* ============================================================
   9. Single article.
   ============================================================ */
html[data-theme="dark"] main.single-post {
	background: var(--k-bg);
	transition: background-color 160ms ease;
}

html[data-theme="dark"] .single-post__row {
	background: var(--k-surface-1);
	border-color: var(--k-border);
	box-shadow: var(--k-shadow-card);
	transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

html[data-theme="dark"] .single-post__breadcrumb-current {
	color: var(--k-text-secondary);
}

html[data-theme="dark"] .single-post__breadcrumb-sep {
	color: var(--k-border-strong);
}

html[data-theme="dark"] .single-post__title {
	color: var(--k-text-primary);
}

html[data-theme="dark"] .single-post__subtitle {
	color: var(--k-text-secondary);
}

html[data-theme="dark"] .single-post__meta {
	border-bottom-color: var(--k-border);
}

html[data-theme="dark"] .single-post__author {
	color: var(--k-text-primary);
}

html[data-theme="dark"] .single-post__content {
	color: var(--k-text-primary);
}

html[data-theme="dark"] .single-post__content > p:first-child::first-letter {
	color: var(--k-text-primary);
}

html[data-theme="dark"] .single-post__share-icon,
html[data-theme="dark"] .single-post__share-icon--facebook,
html[data-theme="dark"] .single-post__share-icon--x,
html[data-theme="dark"] .single-post__share-icon--whatsapp {
	background: var(--k-surface-2);
	border-color: var(--k-border-strong);
	color: var(--k-text-secondary);
	box-shadow: none;
}

html[data-theme="dark"] .single-post__share-icon:hover {
	background: var(--wp--preset--color--kartal-red);
	border-color: var(--wp--preset--color--kartal-red);
	color: var(--k-text-primary);
}

html[data-theme="dark"] .single-post__author-box,
html[data-theme="dark"] .single-post__author-profile {
	background: var(--k-surface-2);
	border-color: var(--k-border);
	box-shadow: var(--k-shadow-card);
	transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

html[data-theme="dark"] .single-post__author-box-name.wp-block-post-author-name,
html[data-theme="dark"] .single-post__author-profile-name a,
html[data-theme="dark"] .single-post__author-profile-link {
	color: var(--k-text-primary);
}

html[data-theme="dark"] .single-post__author-box-bio,
html[data-theme="dark"] .single-post__author-profile-bio {
	color: var(--k-text-secondary);
}

html[data-theme="dark"] .single-post__related-title {
	color: var(--k-text-primary);
}

html[data-theme="dark"] .single-post__related-card {
	background: var(--k-surface-1);
	border-color: var(--k-border);
	box-shadow: var(--k-shadow-card);
	transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

html[data-theme="dark"] .single-post__related-cardtitle a {
	color: var(--k-text-primary);
}

/* ============================================================
   10. Author / writer surfaces (theme-owned parts).
   ============================================================ */
html[data-theme="dark"] .author-archive__card {
	background: var(--k-surface-1);
	box-shadow: var(--k-shadow-card);
	transition: background-color 160ms ease, box-shadow 0.2s ease, transform 0.2s ease;
}

html[data-theme="dark"] .author-archive__card:hover {
	box-shadow: var(--k-shadow-soft);
}

html[data-theme="dark"] .author-archive__card-title a {
	color: var(--k-text-primary);
}

html[data-theme="dark"] .author-archive__card-date {
	color: var(--k-text-muted);
}

html[data-theme="dark"] .author-archive__pagination .page-numbers,
html[data-theme="dark"] .author-archive__pagination .wp-block-query-pagination-previous,
html[data-theme="dark"] .author-archive__pagination .wp-block-query-pagination-next {
	background: var(--k-surface-2);
	color: var(--k-text-primary);
}

html[data-theme="dark"] .author-archive__pagination .page-numbers.current {
	background: var(--wp--preset--color--kartal-red);
	color: var(--k-text-primary);
}

/* ============================================================
   11. Author-profiles plugin (kartalistan/writer-* blocks).
   Variables are remapped in the token block above; these targeted
   overrides cover only the plugin's hardcoded light colors.
   ============================================================ */
html[data-theme="dark"] .kap-author-profile {
	background: var(--k-surface-1);
	color: var(--k-text-primary);
}

html[data-theme="dark"] .kap-author-hero {
	background: var(--k-surface-2);
	border-bottom-color: var(--k-border);
}

html[data-theme="dark"] .kap-author-hero__name,
html[data-theme="dark"] .kap-writer-index__title,
html[data-theme="dark"] .kap-all-writings__title,
html[data-theme="dark"] .kap-featured-card__title,
html[data-theme="dark"] .kap-post-card__title,
html[data-theme="dark"] .kap-all-card__title {
	color: var(--k-text-primary);
}

html[data-theme="dark"] .kap-author-hero__bio,
html[data-theme="dark"] .kap-featured-card__excerpt {
	color: var(--k-text-secondary);
}

html[data-theme="dark"] .kap-featured-card,
html[data-theme="dark"] .kap-post-card,
html[data-theme="dark"] .kap-all-card {
	background: var(--k-surface-1);
	border-color: var(--k-border);
	box-shadow: var(--k-shadow-card);
}

html[data-theme="dark"] .kap-featured-card {
	transition: background-color 160ms ease, border-color 160ms ease, box-shadow 180ms ease;
}

html[data-theme="dark"] .kap-post-card {
	transition: background-color 160ms ease, border-color 160ms ease, box-shadow 180ms ease, transform 180ms ease;
}

html[data-theme="dark"] .kap-all-card {
	transition: background-color 160ms ease, border-color 160ms ease, box-shadow 180ms ease, transform 180ms ease;
}

html[data-theme="dark"] .kap-pagination a,
html[data-theme="dark"] .kap-pagination span {
	background: var(--k-surface-2);
	border-color: var(--k-border);
	color: var(--k-text-primary);
}

html[data-theme="dark"] .kap-pagination .current,
html[data-theme="dark"] .kap-pagination a:hover {
	background: var(--wp--preset--color--kartal-red);
	border-color: var(--wp--preset--color--kartal-red);
	color: var(--k-text-primary);
}

html[data-theme="dark"] .kap-author-empty {
	background: var(--k-surface-2);
	border-color: var(--k-border);
	color: var(--k-text-secondary);
}

/* ============================================================
   12. Legends plugin surfaces.
   The plugin's single-legend template calls wp_head() and wp_footer(),
   so it receives this stylesheet; no plugin change is needed.
   ============================================================ */
html[data-theme="dark"] .legends-page__title,
html[data-theme="dark"] .legend-single__title {
	color: var(--k-text-primary);
}

html[data-theme="dark"] .legends-page__title::after {
	background: var(--k-border-strong);
}

html[data-theme="dark"] .legends-page__intro,
html[data-theme="dark"] .legend-single__meta {
	color: var(--k-text-secondary);
}

html[data-theme="dark"] .kartalistan-legend-card {
	background: var(--k-surface-1);
	box-shadow: var(--k-shadow-card);
	transition: background-color 160ms ease, box-shadow 180ms ease, transform 180ms ease;
}

html[data-theme="dark"] .kartalistan-legend-card:hover {
	box-shadow: var(--k-shadow-soft);
}

html[data-theme="dark"] .kartalistan-legend-card__title a,
html[data-theme="dark"] .kartalistan-legend-card__more,
html[data-theme="dark"] .legend-single__back {
	color: var(--k-text-primary);
}

html[data-theme="dark"] .kartalistan-legend-card__excerpt {
	color: var(--k-text-secondary);
}

html[data-theme="dark"] .kartalistan-legends__empty {
	background: var(--k-surface-1);
	border-color: var(--k-border);
}

html[data-theme="dark"] .kartalistan-legends__empty p {
	color: var(--k-text-secondary);
}

html[data-theme="dark"] .legend-single__content {
	color: var(--k-text-primary);
}

/* ============================================================
   13. Contact page (contact-page.css loads before this file).
   ============================================================ */
html[data-theme="dark"] .contact-hero__lede {
	color: var(--k-text-secondary);
}

html[data-theme="dark"] .contact-body__form-col form.contact-form {
	background: var(--k-surface-1);
	border-color: var(--k-border);
	box-shadow: var(--k-shadow-card);
	transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

html[data-theme="dark"] .contact-form .grunion-field-label,
html[data-theme="dark"] .contact-form label {
	color: var(--k-text-primary);
}

html[data-theme="dark"] .contact-form .ui-selectmenu-button.ui-button {
	background: var(--k-surface-2);
	border-color: var(--k-border);
	color: var(--k-text-secondary);
}

html[data-theme="dark"] .contact-form .contact-privacy-consent-wrap .grunion-field-label {
	color: var(--k-text-secondary);
}

html[data-theme="dark"] .contact-message-count {
	color: var(--k-text-muted);
}

html[data-theme="dark"] .contact-topic-chip {
	background: var(--k-surface-2);
	border-color: var(--k-border);
	color: var(--k-text-primary);
}

html[data-theme="dark"] .contact-topic-chip[aria-pressed="true"] {
	background: var(--k-surface-3);
	border-color: var(--k-border-strong);
	color: var(--k-text-primary);
}

html[data-theme="dark"] .contact-trust__icon svg {
	stroke: var(--k-text-primary);
}

html[data-theme="dark"] .contact-trust p {
	color: var(--k-text-secondary);
}

/* ============================================================
   14. Responsive toggle adjustments (no new layout breakpoints;
   reuses the theme's existing 781px and 600px cuts).
   ============================================================ */
@media (max-width: 781px) {
	.site-header__theme-toggle {
		order: 2; /* after the brand group, beside the search button */
		width: 38px;
		height: 38px;
		flex: 0 0 38px;
	}
}

@media (max-width: 600px) {
	.site-header__theme-toggle {
		width: 36px;
		height: 36px;
		flex-basis: 36px;
	}
}

/* ============================================================
   15. Reduced motion: no color-fade transitions, no theme animation.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
	body {
		transition: none;
	}

	/* Scoped to dark mode only; kills every transition added above without
	   touching the theme's own reduced-motion handling for light mode. */
	html[data-theme="dark"] *,
	html[data-theme="dark"] *::before,
	html[data-theme="dark"] *::after {
		transition: none !important;
	}
}