/*
Theme Name: DMARC Manager Knowledge Base
Theme URI: https://dmarcmanager.app/
Author: Jeroen Verschoor
Description: Knowledge Base theme for DMARC Manager, styled to match the eu-developer.dmarcmanager.app/guides/ documentation site (Inter + JetBrains Mono, slate/persianred design system), built around a per-screen article structure with Polylang-ready multilingual support.
Version: 1.0.2
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: dmarc-kb
Tags: custom-colors, custom-menu, translation-ready, docs, knowledge-base
*/

/* ==========================================================================
   Design tokens
   Captured live from https://eu-developer.dmarcmanager.app/guides/
   (Tailwind's default slate scale + a custom "persianred" brand accent)
   ========================================================================== */

:root {
	--kb-font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
	--kb-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

	/* Slate scale */
	--kb-slate-50: #f8fafc;
	--kb-slate-100: #f1f5f9;
	--kb-slate-200: #e2e8f0;
	--kb-slate-300: #cbd5e1;
	--kb-slate-400: #94a3b8;
	--kb-slate-500: #64748b;
	--kb-slate-600: #475569;
	--kb-slate-700: #334155;
	--kb-slate-800: #1e293b;
	--kb-slate-900: #0f172a;

	/* Brand accent ("persianred" in the reference site's own Tailwind config) */
	--kb-brand-50: #fdf1f1;
	--kb-brand-100: #fbe1e1;
	--kb-brand-600: #b82c2c;
	--kb-brand-700: #9a2424;

	/* Callout colors (GitHub-style markdown alerts) */
	--kb-note: #3b82f6;
	--kb-tip: #16a34a;
	--kb-warning: #d97706;
	--kb-important: #b82c2c;

	--kb-radius: 6px;
	--kb-header-h: 64px;
	--kb-sidebar-w: 256px;
	--kb-toc-w: 224px;
	--kb-maxw: 1600px;
}

/* ==========================================================================
   Base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

/* overflow-y: scroll (not auto) — always reserves the scrollbar's track,
   even on a page short enough to never need it. Without this, the
   centered .kb-layout (max-width + margin: 0 auto) sits a few pixels
   further right on a short page (Home, "Using the platform", Guidelines —
   no scrollbar) than on a taller one (an article with the "On this page"
   sidebar, tall enough to scroll) — confirmed live: the scrollbar itself
   measured 15px, and centered content shifted by exactly that behavior
   appearing/disappearing. Reserving it unconditionally keeps every page's
   available width identical, so nothing ever shifts when navigating
   between them. */
html { scroll-behavior: smooth; overflow-y: scroll; }

body {
	margin: 0;
	background: var(--kb-slate-50);
	color: var(--kb-slate-800);
	font-family: var(--kb-font-sans);
	font-size: 16px;
	line-height: 24px;
	-webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; }

.kb-container {
	max-width: var(--kb-maxw);
	margin: 0 auto;
}

/* ==========================================================================
   Header
   ========================================================================== */

.kb-header {
	position: sticky;
	top: 0;
	z-index: 30;
	height: var(--kb-header-h);
	background: rgba(255, 255, 255, 0.9);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--kb-slate-200);
}

.kb-header__inner {
	display: flex;
	align-items: center;
	gap: 32px;
	height: 100%;
	max-width: 1600px;
	margin: 0 auto;
	padding: 0 24px;
}
@media (min-width: 768px) {
	.kb-header__inner { padding: 0 40px; }
}

.kb-header__logo {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 700;
	font-size: 18px;
	color: var(--kb-slate-900);
	white-space: nowrap;
}
.kb-header__logo a {
	display: flex;
	align-items: center;
}
.kb-header__logo img {
	display: block;
	height: 28px;
	max-height: 28px;
	width: auto;
}

.kb-header__nav {
	display: flex;
	align-items: flex-end;
	gap: 24px;
	font-size: 14px;
	font-weight: 500;
	color: var(--kb-slate-600);
	flex: 1;
	height: 100%;
}
.kb-header__nav a {
	display: flex;
	align-items: center;
	padding-bottom: 10px;
	margin-bottom: 10px;
	border-bottom: 2px solid transparent;
}
.kb-header__nav a:hover { color: var(--kb-slate-900); }
.kb-header__nav a.is-active {
	color: var(--kb-brand-600);
	border-bottom-color: var(--kb-brand-600);
}

/* Terminology's own nav link (see header.php): lighter and lighter-weight
   than the main items above by default, since it's reference material to
   dip into rather than a primary section — still reads normally on hover,
   and gets the same active-state color as every other item once you're
   actually on that page. */
.kb-header__nav a.kb-header__nav-item--muted { color: var(--kb-slate-400); font-weight: 400; }
.kb-header__nav a.kb-header__nav-item--muted:hover { color: var(--kb-slate-600); }
.kb-header__nav a.kb-header__nav-item--muted.is-active {
	color: var(--kb-brand-600);
	font-weight: 500;
	border-bottom-color: var(--kb-brand-600);
}

.kb-header__actions {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-left: auto;
}

.kb-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 16px;
	border-radius: var(--kb-radius);
	background: var(--kb-brand-600);
	color: #fff;
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
	border: none;
	cursor: pointer;
}
.kb-btn:hover { background: var(--kb-brand-700); color: #fff; }

/* Language switcher */
.kb-lang {
	position: relative;
}
.kb-lang__toggle {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	font-weight: 500;
	color: var(--kb-slate-600);
	background: none;
	border: none;
	cursor: pointer;
	padding: 6px 10px;
	border-radius: var(--kb-radius);
}
.kb-lang__toggle:hover { background: var(--kb-slate-100); color: var(--kb-slate-900); }
.kb-lang__menu {
	display: none;
	position: absolute;
	right: 0;
	top: calc(100% + 4px);
	background: #fff;
	border: 1px solid var(--kb-slate-200);
	border-radius: var(--kb-radius);
	box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
	min-width: 160px;
	padding: 4px;
	z-index: 40;
}
.kb-lang.is-open .kb-lang__menu { display: block; }
.kb-lang__menu a {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 10px;
	border-radius: 4px;
	font-size: 14px;
	color: var(--kb-slate-700);
}
.kb-lang__menu a:hover { background: var(--kb-slate-100); }
.kb-lang__menu a.is-current { color: var(--kb-brand-700); font-weight: 500; background: var(--kb-brand-50); }
.kb-lang__flag { width: 18px; height: 13px; object-fit: cover; border-radius: 2px; flex-shrink: 0; }

/* Header search box */
.kb-search {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 6px 10px;
	border-radius: var(--kb-radius);
	background: var(--kb-slate-100);
}
.kb-search__icon { color: var(--kb-slate-400); flex-shrink: 0; }
.kb-search__input {
	border: none;
	background: none;
	outline: none;
	font-size: 14px;
	font-family: inherit;
	color: var(--kb-slate-800);
	width: 160px;
}
.kb-search__input::placeholder { color: var(--kb-slate-400); }
.kb-search__input::-webkit-search-cancel-button { cursor: pointer; }
@media (max-width: 900px) {
	.kb-search__input { width: 110px; }
}

.kb-mobile-toggle {
	display: none;
	background: none;
	border: none;
	cursor: pointer;
	padding: 8px;
	color: var(--kb-slate-700);
}

/* ==========================================================================
   Layout: sidebar / main / toc
   ========================================================================== */

.kb-layout {
	display: flex;
	/* stretch (not flex-start): the sidebar's own content is often much
	   shorter than the main column's (or vice versa on a short landing
	   page) — stretch keeps every column exactly as tall as the row
	   itself, so the sidebar's vertical border-right always reaches all
	   the way down to the horizontal rule below, instead of stopping
	   wherever its own last menu item happens to end. */
	align-items: stretch;
	max-width: var(--kb-maxw);
	margin: 0 auto;
}

.kb-sidebar {
	width: var(--kb-sidebar-w);
	flex-shrink: 0;
	border-right: 1px solid var(--kb-slate-200);
	padding: 32px 16px;
	position: sticky;
	top: var(--kb-header-h);
	max-height: calc(100vh - var(--kb-header-h));
	overflow-y: auto;
}

.kb-sidebar__label {
	padding: 0 12px;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.6px;
	color: var(--kb-slate-400);
	margin: 0 0 8px;
}
.kb-sidebar__section + .kb-sidebar__section { margin-top: 24px; }

.kb-sidebar__list { list-style: none; margin: 0; padding: 0; }
.kb-sidebar__list a {
	display: block;
	padding: 6px 12px;
	border-radius: var(--kb-radius);
	font-size: 14px;
	color: var(--kb-slate-600);
}
.kb-sidebar__list a:hover { background: var(--kb-slate-100); color: var(--kb-slate-900); }
.kb-sidebar__list a.is-active {
	background: var(--kb-brand-50);
	color: var(--kb-brand-700);
	font-weight: 500;
}

.kb-main {
	flex: 1 1 auto;
	min-width: 0;
	padding: 40px;
}
@media (max-width: 1024px) {
	.kb-main { padding: 32px 24px; }
}

.kb-toc {
	width: var(--kb-toc-w);
	flex-shrink: 0;
	padding: 32px 16px;
	position: sticky;
	top: var(--kb-header-h);
	max-height: calc(100vh - var(--kb-header-h));
	overflow-y: auto;
}
.kb-toc__list { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--kb-slate-200); }
.kb-toc__list a {
	display: block;
	padding: 4px 16px;
	font-size: 13px;
	color: var(--kb-slate-500);
	border-left: 2px solid transparent;
	margin-left: -1px;
}
.kb-toc__list a:hover { color: var(--kb-slate-900); }
.kb-toc__list a.is-active { color: var(--kb-brand-700); border-left-color: var(--kb-brand-600); font-weight: 500; }
.kb-toc__list--sub a { padding-left: 28px; font-size: 12.5px; }

@media (max-width: 1279px) {
	.kb-toc { display: none; }
}
@media (max-width: 767px) {
	.kb-sidebar { display: none; }
	.kb-sidebar.is-open {
		display: block;
		position: fixed;
		inset: var(--kb-header-h) 0 0 0;
		z-index: 25;
		background: #fff;
		width: 100%;
		max-height: none;
	}
	.kb-mobile-toggle { display: inline-flex; }
}

/* ==========================================================================
   Article / prose content
   ========================================================================== */

.kb-article { max-width: 768px; }

.kb-eyebrow {
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.6px;
	color: var(--kb-brand-600);
	margin: 0 0 8px;
}

.kb-article h1 {
	font-size: 36px;
	line-height: 40px;
	font-weight: 600;
	color: var(--kb-slate-900);
	margin: 0 0 32px;
}
.kb-article h2 {
	font-size: 24px;
	line-height: 32px;
	font-weight: 600;
	color: var(--kb-slate-900);
	margin: 48px 0 24px;
	scroll-margin-top: calc(var(--kb-header-h) + 16px);
}
.kb-article h3 {
	font-size: 19px;
	line-height: 28px;
	font-weight: 600;
	color: var(--kb-slate-900);
	margin: 32px 0 16px;
	scroll-margin-top: calc(var(--kb-header-h) + 16px);
}
.kb-article p {
	font-size: 16px;
	line-height: 28px;
	color: var(--kb-slate-700);
	margin: 20px 0;
}
.kb-article a { color: var(--kb-brand-600); text-decoration: underline; text-underline-offset: 2px; }
.kb-article a:hover { color: var(--kb-brand-700); }

.kb-article ul, .kb-article ol {
	color: var(--kb-slate-700);
	font-size: 16px;
	line-height: 28px;
	padding-left: 1.6em;
	margin: 20px 0;
}
.kb-article li { margin: 6px 0; }
.kb-article li > p { margin: 8px 0; }

.kb-article strong { color: var(--kb-slate-900); font-weight: 600; }

.kb-article code {
	font-family: var(--kb-font-mono);
	font-size: 14px;
	font-weight: 500;
	color: var(--kb-brand-600);
	background: var(--kb-brand-50);
	border-radius: 5.6px;
	padding: 2.4px 6.4px;
}
.kb-article pre {
	background: var(--kb-slate-900);
	color: #e2e8f0;
	border-radius: 8px;
	padding: 16px 20px;
	overflow-x: auto;
	font-family: var(--kb-font-mono);
	font-size: 13.5px;
	line-height: 1.7;
	margin: 24px 0;
}
.kb-article pre code {
	background: none;
	color: inherit;
	padding: 0;
	font-weight: 400;
}

.kb-article table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
	margin: 28px 0;
}
.kb-article th {
	text-align: left;
	color: var(--kb-slate-900);
	font-weight: 600;
	padding: 8px 8px 8px 0;
	border-bottom: 1px solid var(--kb-slate-300);
}
.kb-article td {
	color: var(--kb-slate-700);
	padding: 8px 8px 8px 0;
	border-bottom: 1px solid var(--kb-slate-200);
	vertical-align: top;
}

.kb-article img, .kb-article .wp-block-image {
	border: 1px solid var(--kb-slate-200);
	border-radius: 8px;
	margin: 24px 0;
}

.kb-article blockquote {
	margin: 20px 0;
	padding-left: 16px;
	border-left: 3px solid var(--kb-slate-300);
	color: var(--kb-slate-600);
	font-style: italic;
}

/* GitHub-style markdown alert callouts */
.kb-alert {
	background: var(--kb-slate-50);
	border-left: 3px solid var(--kb-slate-400);
	border-radius: var(--kb-radius);
	padding: 12px 16px;
	margin: 16px 0;
	font-size: 15px;
	color: var(--kb-slate-700);
}
.kb-alert__title {
	display: flex;
	align-items: center;
	gap: 6px;
	font-weight: 600;
	margin: 0 0 4px;
}
.kb-alert--note { border-left-color: var(--kb-note); }
.kb-alert--note .kb-alert__title { color: var(--kb-note); }
.kb-alert--tip { border-left-color: var(--kb-tip); }
.kb-alert--tip .kb-alert__title { color: var(--kb-tip); }
.kb-alert--warning { border-left-color: var(--kb-warning); }
.kb-alert--warning .kb-alert__title { color: var(--kb-warning); }
.kb-alert--important { border-left-color: var(--kb-important); }
.kb-alert--important .kb-alert__title { color: var(--kb-important); }

/* Inline glossary term reference ([kb_term] shortcode — see
   dmarc_kb_term_shortcode() in functions.php). Deliberately NOT styled like
   a link (no color change) so a paragraph with several of these doesn't
   read as a wall of blue underlines — the dotted underline alone signals
   "an explanation is available here", handled by assets/js/kb-term-tooltip.js. */
.kb-term-ref {
	border-bottom: 1px dotted var(--kb-slate-400);
	cursor: help;
	text-decoration: none;
}
.kb-term-ref:hover,
.kb-term-ref[aria-expanded="true"] {
	border-bottom-color: var(--kb-brand-600);
}

/* The popup card assets/js/kb-term-tooltip.js shows above/below a
   .kb-term-ref — one shared element, repositioned per term (see position()
   in that file), not one per reference in the DOM. */
.kb-term-popup {
	position: absolute;
	z-index: 60;
	width: 280px;
	max-width: calc(100vw - 24px);
	background: #fff;
	border: 1px solid var(--kb-slate-200);
	border-radius: 8px;
	box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
	padding: 14px 16px;
	font-size: 13.5px;
	line-height: 20px;
	color: var(--kb-slate-700);
}
.kb-term-popup__title {
	margin: 0 0 4px;
	font-size: 14px;
	font-weight: 600;
	color: var(--kb-slate-900);
}
.kb-term-popup__body p { margin: 0 0 8px; }
.kb-term-popup__body p:last-child { margin-bottom: 0; }
.kb-term-popup__body a { color: var(--kb-brand-600); }
.kb-term-popup__body a:hover { text-decoration: underline; }
.kb-term-popup__more {
	display: inline-block;
	margin-top: 8px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--kb-brand-600);
}
.kb-term-popup__more:hover { text-decoration: underline; }

/* Badges used inline (e.g. status words in draft copy) */
.kb-badge {
	display: inline-block;
	font-size: 12.5px;
	font-weight: 500;
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--kb-slate-100);
	color: var(--kb-slate-700);
}

/* Prev / next article footer navigation */
.kb-pagenav {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	margin-top: 56px;
	padding-top: 24px;
	border-top: 1px solid var(--kb-slate-200);
}
.kb-pagenav__link {
	flex: 1;
	max-width: 48%;
	padding: 12px 16px;
	border: 1px solid var(--kb-slate-200);
	border-radius: 8px;
}
.kb-pagenav__link:hover { border-color: var(--kb-slate-300); background: var(--kb-slate-50); }
.kb-pagenav__link--next { text-align: right; margin-left: auto; }
.kb-pagenav__dir {
	display: block;
	font-size: 12px;
	color: var(--kb-slate-400);
	margin-bottom: 2px;
}
.kb-pagenav__title { font-size: 14px; font-weight: 500; color: var(--kb-slate-900); }

/* ==========================================================================
   Index / landing (archive of all sections)
   ========================================================================== */

.kb-index__intro h1 { font-size: 36px; font-weight: 600; color: var(--kb-slate-900); margin: 0 0 12px; }
.kb-index__intro p { font-size: 17px; color: var(--kb-slate-600); max-width: 640px; }

.kb-index__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 20px;
	margin-top: 40px;
}
.kb-card {
	display: block;
	border: 1px solid var(--kb-slate-200);
	border-radius: 10px;
	padding: 20px;
	background: #fff;
}
.kb-card:hover { border-color: var(--kb-brand-600); box-shadow: 0 1px 2px rgba(0,0,0,0.04); }
.kb-card__title { display: block; font-size: 16px; font-weight: 600; color: var(--kb-slate-900); margin: 0 0 6px; }
/* Margin (not the space characters around the <span> in the markup) is
   what creates the gap either side of the pipe — see dmarc_kb_title_html()
   in functions.php for why. */
.kb-title-pipe { color: var(--kb-slate-300); font-weight: 400; margin: 0 0.35em; }
.kb-card__title:hover { color: var(--kb-brand-600); }
.kb-card__desc { font-size: 14px; color: var(--kb-slate-500); margin: 0 0 12px; }
.kb-card__list { list-style: none; margin: 0; padding: 0; font-size: 13.5px; }
.kb-card__list li { padding: 3px 0; color: var(--kb-slate-600); }
.kb-card__list a:hover { color: var(--kb-brand-600); }

/* Search results — one stacked result per match (title, section, snippet,
   then links to that article's own headings) instead of the boxed card
   grid above; see search.php. */
.kb-results {
	list-style: none;
	margin: 32px 0 0;
	padding: 0;
	max-width: 680px;
}
.kb-result { padding: 20px 0; }
.kb-result + .kb-result { border-top: 1px solid var(--kb-slate-200); }
.kb-result__title {
	display: inline-block;
	font-size: 19px;
	font-weight: 600;
	color: var(--kb-slate-900);
}
.kb-result__title:hover { color: var(--kb-brand-600); text-decoration: underline; }
.kb-result__breadcrumb {
	font-size: 12.5px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	color: var(--kb-brand-600);
	margin: 4px 0 0;
}
.kb-result__desc { font-size: 15px; line-height: 24px; color: var(--kb-slate-600); margin: 8px 0 0; }
.kb-result__sections {
	list-style: none;
	margin: 12px 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px 20px;
}
.kb-result__sections a {
	font-size: 13.5px;
	color: var(--kb-brand-600);
}
.kb-result__sections a:hover { text-decoration: underline; }

/* "Popular" pills under a landing page's intro text (Home, "Using the
   platform", Guidelines) — see dmarc_kb_popular_pills() in functions.php. */
.kb-popular { margin: 28px 0 0; }
.kb-popular__label {
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.6px;
	color: var(--kb-slate-400);
	margin: 0 0 10px;
}
.kb-popular__list { display: flex; flex-wrap: wrap; gap: 8px; }
.kb-pill {
	display: inline-flex;
	align-items: center;
	padding: 6px 14px;
	border-radius: 999px;
	background: var(--kb-slate-100);
	border: 1px solid var(--kb-slate-200);
	color: var(--kb-slate-700);
	font-size: 13.5px;
	font-weight: 500;
}
.kb-pill:hover { background: var(--kb-brand-50); border-color: var(--kb-brand-100); color: var(--kb-brand-700); }

/* ==========================================================================
   Terminology (glossary index — archive-kb_term.php)
   ========================================================================== */

.kb-terms-list {
	list-style: none;
	margin: 40px 0 0;
	padding: 0;
	max-width: 720px;
	border-top: 1px solid var(--kb-slate-200);
}
.kb-term-entry {
	padding: 20px 0;
	border-bottom: 1px solid var(--kb-slate-200);
	scroll-margin-top: calc(var(--kb-header-h) + 16px);
}
.kb-term-entry__name {
	margin: 0 0 6px;
	font-size: 18px;
	font-weight: 600;
	color: var(--kb-slate-900);
}
.kb-term-entry__def { font-size: 15px; line-height: 24px; color: var(--kb-slate-600); }
.kb-term-entry__def p { margin: 0 0 10px; }
.kb-term-entry__def p:last-child { margin-bottom: 0; }
.kb-term-entry__def a { color: var(--kb-brand-600); }
.kb-term-entry__def a:hover { text-decoration: underline; }

/* ==========================================================================
   Footer
   ========================================================================== */

.kb-footer {
	border-top: 1px solid var(--kb-slate-200);
	padding: 24px 40px;
	text-align: center;
	font-size: 13px;
	color: var(--kb-slate-400);
}

/* build: 1790676371 */
/* retry-bust: 1790679441 */