/*
Theme Name: Zot Kone
Theme URI: https://zotkone.com
Author: Waleed Jhumka
Description: Explanatory journalism for Mauritius — simple questions answered with data. Bold headlines, highlighter marks, card grids, and data callouts, à la sauce mauricienne. Strictly non-partisan.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: zotkone
Tags: news, blog, one-column, custom-menu, custom-logo, featured-images, translation-ready
*/

/* ---------------------------------------------------------------------------
   Tokens
--------------------------------------------------------------------------- */
:root {
	/* Paper & ink */
	--zk-paper: #ffffff;
	--zk-paper-soft: #f7f5f0;
	--zk-ink: #131313;
	--zk-ink-soft: #55524c;
	--zk-line: #e4e1da;

	/* The one accent: flag yellow. Kickers and marks are black-on-yellow only —
	   no party-coded colours anywhere in the chrome. */
	--zk-yellow: #ffd500;

	/* The quadricolore appears only as the national flag stripe. */
	--zk-flag-red: #ea2839;
	--zk-flag-blue: #1a206d;
	--zk-flag-yellow: #ffd500;
	--zk-flag-green: #00a551;

	/* Data-viz series colours, for charts inside articles (neutral, colourblind-safe-ish) */
	--zk-data-1: #1f6f8b;
	--zk-data-2: #99582a;
	--zk-data-3: #52796f;
	--zk-data-4: #6d597a;
	--zk-data-5: #bc9b23;

	--zk-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
	--zk-body: "Source Serif 4", Georgia, "Times New Roman", serif;
	--zk-mono: "SF Mono", "Menlo", "Consolas", monospace;

	--zk-max: 1160px;
	--zk-prose: 680px;
}

/* ---------------------------------------------------------------------------
   Base
--------------------------------------------------------------------------- */
* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--zk-paper);
	color: var(--zk-ink);
	font-family: var(--zk-body);
	font-size: 1.125rem;
	line-height: 1.65;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

h1, h2, h3, h4, h5, h6 {
	font-family: var(--zk-display);
	line-height: 1.12;
	letter-spacing: -0.015em;
	margin: 0 0 0.5em;
}

:focus-visible { outline: 3px solid var(--zk-yellow); outline-offset: 2px; }

.screen-reader-text {
	border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
	height: 1px; width: 1px; margin: -1px; overflow: hidden;
	padding: 0; position: absolute; word-wrap: normal;
}

.zk-wrap { max-width: var(--zk-max); margin: 0 auto; padding: 0 20px; }

/* ---------------------------------------------------------------------------
   The quadricolore — the national flag stripe. Rouge, bleu, jaune, vert.
--------------------------------------------------------------------------- */
.zk-flag {
	height: 6px;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
}
.zk-flag span:nth-child(1) { background: var(--zk-flag-red); }
.zk-flag span:nth-child(2) { background: var(--zk-flag-blue); }
.zk-flag span:nth-child(3) { background: var(--zk-flag-yellow); }
.zk-flag span:nth-child(4) { background: var(--zk-flag-green); }

/* ---------------------------------------------------------------------------
   Masthead
--------------------------------------------------------------------------- */
.zk-masthead { border-bottom: 3px solid var(--zk-ink); }

.zk-masthead-inner {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 24px;
	padding: 22px 0 16px;
	flex-wrap: wrap;
}

.zk-brand { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }

.zk-logo a {
	font-family: var(--zk-display);
	font-weight: 900;
	font-size: 2rem;
	letter-spacing: -0.03em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
}

.zk-logo .kone {
	background: var(--zk-yellow);
	padding: 0 0.14em;
}

.zk-logo img { max-height: 52px; width: auto; }

.zk-tagline {
	font-family: var(--zk-display);
	font-size: 0.8rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--zk-ink-soft);
}

.zk-nav ul {
	list-style: none;
	margin: 0; padding: 0;
	display: flex;
	gap: 4px;
	flex-wrap: wrap;
}

.zk-nav a {
	display: inline-block;
	font-family: var(--zk-display);
	font-weight: 700;
	font-size: 0.9rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	text-decoration: none;
	padding: 6px 10px;
}

.zk-nav a:hover,
.zk-nav .current-menu-item > a,
.zk-nav .current_page_item > a {
	background: var(--zk-yellow);
}

/* ---------------------------------------------------------------------------
   Kickers & marks
--------------------------------------------------------------------------- */
.zk-kicker {
	display: inline-block;
	font-family: var(--zk-display);
	font-weight: 800;
	font-size: 0.78rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	background: var(--zk-yellow);
	color: var(--zk-ink);
	padding: 3px 8px;
	text-decoration: none;
}

a.zk-kicker:hover { background: var(--zk-ink); color: var(--zk-yellow); }

mark, .zk-mark {
	background: linear-gradient(transparent 55%, var(--zk-yellow) 55%);
	color: inherit;
	padding: 0 0.05em;
}

/* ---------------------------------------------------------------------------
   Home: la une + card grid
--------------------------------------------------------------------------- */
.zk-section-label {
	font-family: var(--zk-display);
	font-weight: 900;
	font-size: 1rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	border-bottom: 3px solid var(--zk-ink);
	padding-bottom: 8px;
	margin: 44px 0 24px;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
}

.zk-section-label .fr {
	font-weight: 500;
	font-size: 0.75rem;
	color: var(--zk-ink-soft);
	letter-spacing: 0.08em;
}

.zk-lead {
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	gap: 36px;
	align-items: center;
	padding: 36px 0;
}

.zk-lead-media img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }

.zk-lead h2 {
	font-size: clamp(1.8rem, 4.4vw, 3rem);
	font-weight: 900;
	margin: 12px 0 14px;
}

.zk-lead h2 a { text-decoration: none; }
.zk-lead h2 a:hover { background: linear-gradient(transparent 60%, var(--zk-yellow) 60%); }

.zk-lead .dek {
	font-size: 1.15rem;
	color: var(--zk-ink-soft);
	margin: 0 0 14px;
}

.zk-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px 28px;
	padding-bottom: 56px;
}

.zk-card { display: flex; flex-direction: column; }

.zk-card-media { margin-bottom: 14px; }
.zk-card-media img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }

.zk-card h3 {
	font-size: 1.3rem;
	font-weight: 800;
	margin: 10px 0 8px;
}

.zk-card h3 a { text-decoration: none; }
.zk-card h3 a:hover { background: linear-gradient(transparent 60%, var(--zk-yellow) 60%); }

.zk-card .dek {
	font-size: 0.98rem;
	color: var(--zk-ink-soft);
	margin: 0 0 10px;
}

.zk-byline {
	font-family: var(--zk-display);
	font-size: 0.78rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--zk-ink-soft);
	margin-top: auto;
}

.zk-byline b { font-weight: 800; color: var(--zk-ink); }

/* ---------------------------------------------------------------------------
   Single article
--------------------------------------------------------------------------- */
.zk-article-header {
	max-width: 860px;
	margin: 0 auto;
	padding: 48px 20px 8px;
	text-align: left;
}

.zk-article-header h1 {
	font-size: clamp(2rem, 5.5vw, 3.4rem);
	font-weight: 900;
	margin: 16px 0 18px;
}

.zk-article-header .dek {
	font-size: 1.3rem;
	line-height: 1.5;
	color: var(--zk-ink-soft);
	margin: 0 0 22px;
}

.zk-article-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
	font-family: var(--zk-display);
	font-size: 0.82rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--zk-ink-soft);
	border-top: 3px solid var(--zk-ink);
	padding-top: 12px;
}

.zk-article-meta b { font-weight: 800; color: var(--zk-ink); }

.zk-feature-figure { max-width: 980px; margin: 28px auto 0; padding: 0 20px; }
.zk-feature-figure figcaption,
.entry-content figcaption {
	font-family: var(--zk-display);
	font-size: 0.78rem;
	color: var(--zk-ink-soft);
	padding-top: 8px;
	letter-spacing: 0.02em;
}

.entry-content {
	max-width: var(--zk-prose);
	margin: 0 auto;
	padding: 32px 20px 40px;
}

.entry-content > * { margin-top: 0; margin-bottom: 1.35em; }

.entry-content h2 { font-size: 1.7rem; font-weight: 800; margin-top: 1.6em; }
.entry-content h3 { font-size: 1.3rem; font-weight: 800; margin-top: 1.4em; }

.entry-content a { text-decoration-color: var(--zk-yellow); text-decoration-thickness: 2px; }
.entry-content a:hover { background: var(--zk-yellow); text-decoration: none; }

.entry-content blockquote {
	margin: 1.6em 0;
	padding: 0 0 0 22px;
	border-left: 6px solid var(--zk-yellow);
	font-family: var(--zk-display);
	font-weight: 600;
	font-size: 1.25rem;
	line-height: 1.4;
}

.entry-content blockquote cite {
	display: block;
	margin-top: 0.6em;
	font-size: 0.8rem;
	font-weight: 500;
	font-style: normal;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--zk-ink-soft);
}

.entry-content figure { margin-left: 0; margin-right: 0; }

/* Wide charts & images can break out of the prose column a little. */
.entry-content .alignwide { margin-left: -80px; margin-right: -80px; max-width: none; }
.entry-content .alignfull { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); max-width: none; }

.entry-content table {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--zk-display);
	font-size: 0.92rem;
}

.entry-content th, .entry-content td {
	text-align: left;
	padding: 9px 10px;
	border-bottom: 1px solid var(--zk-line);
}

.entry-content th {
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	border-bottom: 3px solid var(--zk-ink);
}

.entry-content code {
	font-family: var(--zk-mono);
	font-size: 0.85em;
	background: var(--zk-paper-soft);
	padding: 0.1em 0.35em;
}

/* ---------------------------------------------------------------------------
   Data callouts — the sauce. Used by the bundled block patterns.
--------------------------------------------------------------------------- */

/* "An bref" — key takeaways box at the top of an explainer. */
.zk-anbref {
	background: var(--zk-paper-soft);
	border-top: 6px solid var(--zk-yellow);
	padding: 22px 26px 10px;
	margin: 1.8em 0;
}

.zk-anbref .zk-anbref-title {
	font-family: var(--zk-display);
	font-weight: 900;
	font-size: 0.85rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	margin: 0 0 10px;
}

.zk-anbref ul { margin: 0; padding-left: 1.2em; }
.zk-anbref li { margin-bottom: 0.6em; font-size: 1rem; }

/* Big stat — one number that carries the story. */
.zk-stat {
	text-align: center;
	margin: 2em 0;
	padding: 10px 0;
}

.zk-stat .zk-stat-number {
	font-family: var(--zk-display);
	font-weight: 900;
	font-size: clamp(3rem, 9vw, 5rem);
	line-height: 1;
	letter-spacing: -0.03em;
	display: inline-block;
	background: linear-gradient(transparent 62%, var(--zk-yellow) 62%);
	padding: 0 0.08em;
	margin: 0;
}

.zk-stat .zk-stat-label {
	font-family: var(--zk-display);
	font-weight: 600;
	font-size: 1rem;
	color: var(--zk-ink-soft);
	margin: 12px auto 0;
	max-width: 420px;
	line-height: 1.4;
}

/* Data source note — every claim carries its receipts. */
.zk-source {
	font-family: var(--zk-display);
	font-size: 0.8rem;
	color: var(--zk-ink-soft);
	border-top: 1px solid var(--zk-line);
	padding-top: 10px;
	letter-spacing: 0.02em;
}

.zk-source b {
	font-weight: 800;
	text-transform: uppercase;
	font-size: 0.72rem;
	letter-spacing: 0.1em;
	color: var(--zk-ink);
}

/* The question block — Vox-style framing device for section breaks. */
.zk-question {
	font-family: var(--zk-display);
	font-weight: 900;
	font-size: 1.6rem;
	line-height: 1.25;
	margin: 1.8em 0 0.9em;
}

.zk-question .zk-mark { padding: 0 0.1em; }

/* ---------------------------------------------------------------------------
   Author box & post footer
--------------------------------------------------------------------------- */
.zk-postfoot {
	max-width: var(--zk-prose);
	margin: 0 auto;
	padding: 0 20px 48px;
}

.zk-tags { margin-bottom: 26px; display: flex; flex-wrap: wrap; gap: 8px; }

.zk-tags a {
	font-family: var(--zk-display);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	border: 2px solid var(--zk-ink);
	padding: 4px 10px;
}

.zk-tags a:hover { background: var(--zk-yellow); }

.zk-authorbox {
	display: flex;
	gap: 18px;
	align-items: flex-start;
	border-top: 3px solid var(--zk-ink);
	padding-top: 20px;
}

.zk-authorbox img { border-radius: 50%; flex-shrink: 0; }

.zk-authorbox .who {
	font-family: var(--zk-display);
	font-weight: 800;
	font-size: 1rem;
	margin: 0 0 4px;
}

.zk-authorbox .bio {
	font-size: 0.95rem;
	color: var(--zk-ink-soft);
	margin: 0;
}

/* ---------------------------------------------------------------------------
   Archives, search, 404
--------------------------------------------------------------------------- */
.zk-archive-header { padding: 44px 0 6px; }

.zk-archive-header h1 {
	font-size: clamp(1.8rem, 4.5vw, 2.6rem);
	font-weight: 900;
}

.zk-archive-header .desc { color: var(--zk-ink-soft); max-width: 640px; margin-top: 6px; }

.zk-none { padding: 60px 0 80px; max-width: 640px; }

.zk-search-form { display: flex; gap: 0; max-width: 520px; margin-top: 20px; }

.zk-search-form input[type="search"] {
	flex: 1;
	font-family: var(--zk-display);
	font-size: 1rem;
	padding: 12px 14px;
	border: 3px solid var(--zk-ink);
	border-right: none;
	background: var(--zk-paper);
	color: var(--zk-ink);
}

.zk-search-form button {
	font-family: var(--zk-display);
	font-weight: 800;
	font-size: 0.9rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	background: var(--zk-yellow);
	color: var(--zk-ink);
	border: 3px solid var(--zk-ink);
	padding: 12px 18px;
	cursor: pointer;
}

.zk-search-form button:hover { background: var(--zk-ink); color: var(--zk-yellow); }

/* ---------------------------------------------------------------------------
   Pagination
--------------------------------------------------------------------------- */
.zk-pagination {
	display: flex;
	justify-content: center;
	gap: 6px;
	padding: 8px 0 64px;
	font-family: var(--zk-display);
	font-weight: 700;
}

.zk-pagination .page-numbers {
	text-decoration: none;
	padding: 8px 14px;
	border: 2px solid var(--zk-ink);
}

.zk-pagination .page-numbers.current,
.zk-pagination a.page-numbers:hover { background: var(--zk-yellow); }

.zk-pagination .dots { border: none; }

/* ---------------------------------------------------------------------------
   Comments
--------------------------------------------------------------------------- */
.zk-comments { max-width: var(--zk-prose); margin: 0 auto; padding: 0 20px 64px; }

.zk-comments .comments-title {
	font-size: 1.2rem;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	border-top: 3px solid var(--zk-ink);
	padding-top: 18px;
}

.zk-comments ol.comment-list { list-style: none; margin: 0; padding: 0; }

.zk-comments .comment { border-bottom: 1px solid var(--zk-line); padding: 18px 0; }
.zk-comments .comment .children { list-style: none; padding-left: 26px; }

.zk-comments .comment-author { font-family: var(--zk-display); font-weight: 800; font-size: 0.95rem; }
.zk-comments .comment-metadata { font-family: var(--zk-display); font-size: 0.75rem; color: var(--zk-ink-soft); }
.zk-comments .comment-metadata a { text-decoration: none; }
.zk-comments .comment-content { font-size: 1rem; }

.comment-form label { display: block; font-family: var(--zk-display); font-weight: 700; font-size: 0.85rem; margin-bottom: 4px; }

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	width: 100%;
	font-family: var(--zk-body);
	font-size: 1rem;
	padding: 10px 12px;
	border: 2px solid var(--zk-ink);
	background: var(--zk-paper);
	margin-bottom: 14px;
}

.comment-form .submit {
	font-family: var(--zk-display);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	background: var(--zk-yellow);
	border: 3px solid var(--zk-ink);
	padding: 12px 22px;
	cursor: pointer;
}

.comment-form .submit:hover { background: var(--zk-ink); color: var(--zk-yellow); }

/* ---------------------------------------------------------------------------
   Footer
--------------------------------------------------------------------------- */
.zk-footer {
	margin-top: 40px;
	border-top: 3px solid var(--zk-ink);
	background: var(--zk-ink);
	color: var(--zk-paper-soft);
}

.zk-footer-inner {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 40px;
	padding: 44px 0;
}

.zk-footer .zk-logo a { color: var(--zk-paper); font-size: 1.5rem; }
.zk-footer .zk-logo .kone { color: var(--zk-ink); }

.zk-footer .mission {
	font-size: 0.95rem;
	color: #b9b5ad;
	max-width: 480px;
	margin: 12px 0 0;
}

.zk-footer .disclaimer {
	font-family: var(--zk-display);
	font-size: 0.78rem;
	letter-spacing: 0.04em;
	color: var(--zk-yellow);
	margin-top: 16px;
}

.zk-footer nav ul { list-style: none; margin: 0; padding: 0; }

.zk-footer nav a {
	font-family: var(--zk-display);
	font-weight: 700;
	font-size: 0.9rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	text-decoration: none;
	display: inline-block;
	padding: 4px 0;
	color: var(--zk-paper-soft);
}

.zk-footer nav a:hover { color: var(--zk-yellow); }

.zk-colophon {
	border-top: 1px solid #2c2c2c;
	padding: 16px 0 20px;
	font-family: var(--zk-display);
	font-size: 0.75rem;
	color: #8f8b84;
	display: flex;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}

/* ---------------------------------------------------------------------------
   Responsive
--------------------------------------------------------------------------- */
@media (max-width: 900px) {
	.zk-lead { grid-template-columns: 1fr; gap: 20px; padding-top: 28px; }
	.zk-grid { grid-template-columns: repeat(2, 1fr); }
	.entry-content .alignwide { margin-left: 0; margin-right: 0; }
	.zk-footer-inner { grid-template-columns: 1fr; gap: 28px; }
}

@media (max-width: 560px) {
	.zk-grid { grid-template-columns: 1fr; }
	.zk-masthead-inner { padding-top: 16px; }
	.zk-logo a { font-size: 1.6rem; }
	body { font-size: 1.05rem; }
}

@media print {
	.zk-masthead, .zk-footer, .zk-comments, .zk-nav { display: none; }
}