/**
 * KopiKatts brand tokens (E-BRAND, 2026-06-07).
 *
 * One site-wide design-token layer so the GeneratePress public pages and the
 * kopikatts-show-entry plugin pages feel like ONE product. Enqueued on EVERY
 * front-end page (not just plugin routes). CSS-only and fully reversible —
 * removing the enqueue restores the previous look.
 *
 * Canonical accent #A85828 (sampled from the logo wordmark) retires the three
 * earlier terracotta variants (plugin #B25A3E, the GP "Login Button CSS"
 * element's #B25A3E, and #c47a3a). The plugin's own --ks-accent now points at
 * --kk-accent, so every plugin tab/button/badge inherits the canonical colour.
 *
 * No @import (no remote fetch) — static tokens + a thin theme-button alignment.
 */

:root {
	--kk-accent: #A85828;
	--kk-accent-hover: #8E4820;
	--kk-text: #4A4540;
	--kk-heading: #1F2733;
	--kk-card: #fff;
	--kk-bg: #F5F3F1;
	--kk-radius: 8px;
	--kk-shadow: 0 1px 3px rgba(0, 0, 0, .08);
}

/* -------------------------------------------------------------------------
 * Theme buttons / links / nav accents → the canonical accent. Targeted at the
 * GeneratePress + GenerateBlocks button and link classes plus the header Login
 * button. Defensive: only colour/background are touched, never layout. This
 * folds in (and supersedes) the GP "Login Button CSS" element's #B25A3E rule —
 * see the hand-back: Cowork can unpublish that element once this is live.
 * ------------------------------------------------------------------------- */
.gb-button,
.wp-block-button__link,
.button,
button.menu-link,
.main-navigation .menu-item-btn > a,
a.ks-login-button,
.ks-login-button {
	background-color: var(--kk-accent);
	border-color: var(--kk-accent);
	color: #fff;
}

.gb-button:hover,
.gb-button:focus,
.wp-block-button__link:hover,
.wp-block-button__link:focus,
.button:hover,
.button:focus,
button.menu-link:hover,
.main-navigation .menu-item-btn > a:hover,
a.ks-login-button:hover,
.ks-login-button:hover {
	background-color: var(--kk-accent-hover);
	border-color: var(--kk-accent-hover);
	color: #fff;
}

/* Inline text links inside the main content adopt the accent (not nav, not
 * buttons — those are handled above). */
.entry-content a:not(.gb-button):not(.wp-block-button__link):not(.button) {
	color: var(--kk-accent);
}

.entry-content a:not(.gb-button):not(.wp-block-button__link):not(.button):hover {
	color: var(--kk-accent-hover);
}

/* -------------------------------------------------------------------------
 * Public-page card treatment. Echo the plugin's clean white-card / radius /
 * shadow look on the Home / Services / About GenerateBlocks content containers.
 * GenerateBlocks markup varies per page, so this is intentionally conservative:
 * it only styles containers that opt in via the `.kk-card` class added in the
 * page content (or a container already carrying the GB class below). Expect a
 * little per-section tuning by Cowork after the visual check.
 * ------------------------------------------------------------------------- */
.kk-card,
.gb-container.kk-card {
	background: var(--kk-card);
	border-radius: var(--kk-radius);
	box-shadow: var(--kk-shadow);
	padding: clamp(1.25rem, 3vw, 2rem);
}

/* ===========================================================================
 * E1 — floating dark/light theme toggle (admin / my-account / show-team).
 * Rendered only on the logged-in shells. Honours prefers-reduced-motion.
 * ======================================================================== */
.ks-theme-toggle {
	position: fixed;
	right: 18px;
	bottom: 18px;
	z-index: 9999;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid rgba(0, 0, 0, 0.18);
	background: var(--kk-accent, #A85828);
	color: #FFFFFF;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
}
.ks-theme-toggle:hover {
	background: var(--kk-accent-hover, #8E4820);
}
.ks-theme-toggle:focus-visible {
	outline: 3px solid #FFFFFF;
	outline-offset: 2px;
}
.ks-theme-toggle__icon {
	font-size: 22px;
	width: 22px;
	height: 22px;
	line-height: 22px;
}
[data-ks-theme="dark"] .ks-theme-toggle {
	background: #B5623E;
	border-color: rgba(255, 255, 255, 0.22);
}

/* No-flash + reduced-motion: theme changes are instant unless the user is happy
 * with motion, in which case surfaces ease between palettes. */
@media (prefers-reduced-motion: no-preference) {
	[data-ks-theme] .ks-admin,
	[data-ks-theme] .ks-account,
	[data-ks-theme] .ks-admin__btn,
	[data-ks-theme] .ks-account__btn {
		transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
	}
}

/* ===========================================================================
 * A#10 — extend the dark surface to the WHOLE viewport on the plugin shells.
 *
 * Dark mode only themed the .ks-admin / .ks-account panel, leaving the
 * GeneratePress header + page background a light island around it. Ross's
 * 2026-06-09 decision: fill the viewport. Every rule below is double-scoped —
 * `[data-ks-theme="dark"]` (html) AND a shell body class (ks-admin-shell-page /
 * ks-account-page) — so the public site (Home / About / Blog) is NEVER touched.
 * ======================================================================== */
[data-ks-theme="dark"] body.ks-admin-shell-page,
[data-ks-theme="dark"] body.ks-account-page,
[data-ks-theme="dark"] body.ks-admin-shell-page .site,
[data-ks-theme="dark"] body.ks-account-page .site,
[data-ks-theme="dark"] body.ks-admin-shell-page #page,
[data-ks-theme="dark"] body.ks-account-page #page,
[data-ks-theme="dark"] body.ks-admin-shell-page .site-content,
[data-ks-theme="dark"] body.ks-account-page .site-content {
	background-color: #14181F;
}

/* GeneratePress header bar + its inner wrapper. */
[data-ks-theme="dark"] body.ks-admin-shell-page .site-header,
[data-ks-theme="dark"] body.ks-account-page .site-header,
[data-ks-theme="dark"] body.ks-admin-shell-page .inside-header,
[data-ks-theme="dark"] body.ks-account-page .inside-header,
[data-ks-theme="dark"] body.ks-admin-shell-page .site-footer,
[data-ks-theme="dark"] body.ks-account-page .site-footer {
	background-color: #1A1F27 !important;
	border-color: #333C49 !important;
}

/* Header nav links + site title lift to light (AA on #1A1F27). */
[data-ks-theme="dark"] body.ks-admin-shell-page .main-navigation,
[data-ks-theme="dark"] body.ks-account-page .main-navigation,
[data-ks-theme="dark"] body.ks-admin-shell-page .main-navigation .main-nav ul li a,
[data-ks-theme="dark"] body.ks-account-page .main-navigation .main-nav ul li a,
[data-ks-theme="dark"] body.ks-admin-shell-page .site-title a,
[data-ks-theme="dark"] body.ks-account-page .site-title a,
[data-ks-theme="dark"] body.ks-admin-shell-page .menu-toggle,
[data-ks-theme="dark"] body.ks-account-page .menu-toggle,
[data-ks-theme="dark"] body.ks-admin-shell-page .site-footer,
[data-ks-theme="dark"] body.ks-account-page .site-footer {
	background-color: transparent !important;
	color: #E6E9EE !important;
}

/* Header logo swap: the JS (ks-theme.js) sets src to the light asset and adds
 * .ks-logo--dark. Belt-and-braces — keep the logo crisp on the dark bar. */
[data-ks-theme="dark"] body.ks-admin-shell-page .site-logo img,
[data-ks-theme="dark"] body.ks-account-page .site-logo img,
[data-ks-theme="dark"] body.ks-admin-shell-page img.header-image,
[data-ks-theme="dark"] body.ks-account-page img.header-image {
	background: transparent;
}

/* ===========================================================================
 * Part C — full-screen / wide-view toggle (independent of dark mode).
 *
 * The shells already force the GeneratePress content wrappers to full width
 * (see kopikatts-admin.css / kopikatts-account.css); the panel itself is then
 * capped at a readable max-width and centred. Full-screen lifts that cap so the
 * panel uses the whole viewport — ideal for the wide data grids. State lives on
 * <html data-ks-fullscreen="on">, persisted per-user (mirrors the theme pref).
 * ======================================================================== */
[data-ks-fullscreen="on"] .ks-admin,
[data-ks-fullscreen="on"] .ks-account {
	max-width: none;
}

/* The full-screen toggle: a second floating control stacked above the theme
 * toggle. Hidden on narrow viewports — the shell is already edge-to-edge on a
 * phone, so the control would be a no-op (Part C requirement). */
.ks-fullscreen-toggle {
	position: fixed;
	right: 18px;
	bottom: 70px;
	z-index: 9999;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid rgba(0, 0, 0, 0.18);
	background: var(--kk-accent, #A85828);
	color: #FFFFFF;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
}
.ks-fullscreen-toggle:hover {
	background: var(--kk-accent-hover, #8E4820);
}
.ks-fullscreen-toggle:focus-visible {
	outline: 3px solid #FFFFFF;
	outline-offset: 2px;
}
.ks-fullscreen-toggle__icon {
	font-size: 22px;
	width: 22px;
	height: 22px;
	line-height: 22px;
}
[data-ks-theme="dark"] .ks-fullscreen-toggle {
	background: #B5623E;
	border-color: rgba(255, 255, 255, 0.22);
}
/* Pressed (full-screen on) cue. */
.ks-fullscreen-toggle[aria-pressed="true"] {
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28), inset 0 0 0 2px rgba(255, 255, 255, 0.65);
}
@media (max-width: 768px) {
	.ks-fullscreen-toggle {
		display: none;
	}
}