/*
Theme Name: KARF
Theme URI: https://karf.co.uk
Author: Khalid Fazeli
Author URI: https://khalidfazeli.com
Description: A refined editorial block theme for K.A.R.F - fractional CIO, IT Director and vCISO advisory. High-contrast, senior, distraction-free, with a teal-and-brass palette on warm paper. Built for long-term editing in the WordPress Site Editor.
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 7.4
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: karf
*/

/* ============================================================
   KARF - bespoke layer over theme.json tokens
   ============================================================ */

:root {
	--karf-ink: #16140f;
	--karf-ink-soft: #2b2820;
	--karf-paper: #f5f2ea;
	--karf-panel: #ece7da;
	--karf-muted: #6b665c;
	--karf-line: #d8d2c4;
	--karf-accent: #0f4d45;
	--karf-accent-bright: #16857a;
	--karf-brass: #b88a3d;
	--karf-brass-soft: #d9b876;
	--karf-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
	--karf-display: "Fraunces", Georgia, serif;
}

html { scroll-behavior: smooth; }

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	position: relative;
}

/* Fine paper grain over the whole page - adds atmosphere without weight */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 9999;
	pointer-events: none;
	opacity: 0.035;
	mix-blend-mode: multiply;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

::selection { background: var(--karf-accent); color: var(--karf-paper); }

/* ---------- Mono eyebrow / kicker ---------- */
.karf-eyebrow {
	font-family: var(--karf-mono);
	font-size: 0.78rem;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--karf-accent);
	display: inline-flex;
	align-items: center;
	gap: 0.8em;
	margin: 0;
}
.karf-eyebrow::before {
	content: "";
	width: 34px;
	height: 1px;
	background: currentColor;
	display: inline-block;
	flex: none;
}

/* ---------- Header ---------- */
.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: color-mix(in srgb, var(--karf-paper) 86%, transparent);
	backdrop-filter: saturate(160%) blur(12px);
	-webkit-backdrop-filter: saturate(160%) blur(12px);
	border-bottom: 1px solid var(--karf-line);
}
.site-header .wp-block-site-title a { text-decoration: none; color: var(--karf-ink); }
.site-header .wp-block-site-tagline {
	font-family: var(--karf-mono);
	font-size: 0.7rem;
	letter-spacing: 0.06em;
	color: var(--karf-muted);
	margin: 0;
	text-transform: none;
}
.site-header .wp-block-navigation {
	font-family: var(--karf-mono);
	font-size: 0.82rem;
	letter-spacing: 0.03em;
}
.site-header .wp-block-navigation a {
	color: var(--karf-ink);
	position: relative;
	padding-bottom: 3px;
}
.site-header .wp-block-navigation a::after {
	content: "";
	position: absolute;
	left: 0; bottom: 0;
	width: 100%; height: 1px;
	background: var(--karf-accent);
	transform: scaleX(0);
	transform-origin: right;
	transition: transform 0.4s cubic-bezier(0.2,0.7,0.2,1);
}
.site-header .wp-block-navigation a:hover { color: var(--karf-accent); }
.site-header .wp-block-navigation a:hover::after { transform: scaleX(1); transform-origin: left; }

/* ---------- Hero ---------- */
.karf-hero { position: relative; overflow: clip; border-bottom: 1px solid var(--karf-line); }

/* Oversized ghost letterform behind the hero */
.karf-hero .karf-ghost {
	position: absolute;
	right: -2vw; top: 50%;
	transform: translateY(-50%);
	font-family: var(--karf-display);
	font-weight: 400;
	font-size: clamp(20rem, 46vw, 56rem);
	line-height: 0.7;
	color: var(--karf-accent);
	opacity: 0.05;
	pointer-events: none;
	user-select: none;
	z-index: 0;
}
.karf-hero > .wp-block-group__inner-container,
.karf-hero > * { position: relative; z-index: 1; }

.karf-hero h1 { max-width: 17ch; }
.karf-hero .karf-lede {
	max-width: 48ch;
	font-size: clamp(1.15rem, 1.7vw, 1.45rem);
	line-height: 1.5;
	color: var(--karf-ink-soft);
}

/* Staggered reveal on load */
@keyframes karf-rise {
	from { opacity: 0; transform: translateY(20px); filter: blur(2px); }
	to   { opacity: 1; transform: translateY(0); filter: blur(0); }
}
.karf-stagger > * { animation: karf-rise 0.9s cubic-bezier(0.2,0.7,0.2,1) both; }
.karf-stagger > *:nth-child(1) { animation-delay: 0.05s; }
.karf-stagger > *:nth-child(2) { animation-delay: 0.16s; }
.karf-stagger > *:nth-child(3) { animation-delay: 0.28s; }
.karf-stagger > *:nth-child(4) { animation-delay: 0.40s; }
.karf-stagger > *:nth-child(5) { animation-delay: 0.52s; }
.karf-stagger > *:nth-child(6) { animation-delay: 0.64s; }

/* Scroll reveal (JS adds .is-in) */
.karf-reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.9s cubic-bezier(0.2,0.7,0.2,1), transform 0.9s cubic-bezier(0.2,0.7,0.2,1); }
.karf-reveal.is-in { opacity: 1; transform: none; }

/* ---------- Capability marquee ---------- */
.karf-marquee {
	border-block: 1px solid var(--karf-line);
	overflow: hidden;
	white-space: nowrap;
	background: var(--karf-panel);
}
.karf-marquee__track {
	display: inline-flex;
	gap: 3.5rem;
	padding-block: 0.9rem;
	animation: karf-scroll 38s linear infinite;
	font-family: var(--karf-mono);
	font-size: 0.8rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--karf-ink-soft);
}
.karf-marquee__track span { display: inline-flex; align-items: center; gap: 3.5rem; }
.karf-marquee__track span::after { content: "\2736"; color: var(--karf-brass); }
@keyframes karf-scroll { to { transform: translateX(-50%); } }
.karf-marquee:hover .karf-marquee__track { animation-play-state: paused; }

/* ---------- Section divider numbers ---------- */
.karf-rule { border: 0; border-top: 1px solid var(--karf-line); margin: 0; }

/* ---------- Service cards ---------- */
.karf-card {
	border: 1px solid var(--karf-line);
	border-radius: 3px;
	background: var(--karf-paper);
	position: relative;
	overflow: hidden;
	transition: transform 0.4s cubic-bezier(0.2,0.7,0.2,1), border-color 0.4s, box-shadow 0.4s;
}
.karf-card::after {
	content: "";
	position: absolute;
	left: 0; top: 0;
	width: 100%; height: 3px;
	background: linear-gradient(90deg, var(--karf-accent), var(--karf-brass));
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.5s cubic-bezier(0.2,0.7,0.2,1);
}
.karf-card:hover {
	transform: translateY(-6px);
	border-color: color-mix(in srgb, var(--karf-accent) 50%, var(--karf-line));
	box-shadow: 0 28px 50px -34px rgba(15,77,69,0.55);
}
.karf-card:hover::after { transform: scaleX(1); }
.karf-card .karf-card-no {
	font-family: var(--karf-mono);
	font-size: 0.78rem;
	letter-spacing: 0.14em;
	color: var(--karf-brass);
}
.karf-card h3 { font-size: 1.45rem; margin-block: 0.5rem 0.6rem; }
.karf-card p { color: var(--karf-muted); font-size: 1rem; line-height: 1.6; }

/* ---------- Insight rows ---------- */
.karf-insight {
	display: block;
	border-top: 1px solid var(--karf-line);
	text-decoration: none;
	color: inherit;
	transition: padding-left 0.4s cubic-bezier(0.2,0.7,0.2,1), background 0.3s;
}
.karf-insight:last-of-type { border-bottom: 1px solid var(--karf-line); }
.karf-insight:hover { background: var(--karf-panel); padding-left: 1rem; }
.karf-insight .karf-cat {
	font-family: var(--karf-mono);
	font-size: 0.72rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--karf-brass);
}
.karf-insight h3 {
	font-size: clamp(1.3rem, 2.4vw, 1.85rem);
	margin: 0.35rem 0 0;
	transition: color 0.3s;
}
.karf-insight:hover h3 { color: var(--karf-accent); }
.karf-insight .karf-arrow { font-family: var(--karf-mono); color: var(--karf-accent); transition: transform 0.4s; display: inline-block; }
.karf-insight:hover .karf-arrow { transform: translateX(8px); }

/* ---------- Buttons ---------- */
.wp-block-button__link {
	transition: background 0.35s, color 0.35s, transform 0.35s;
}
.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover { transform: translateY(-2px); }
.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent !important;
	color: var(--karf-ink) !important;
	border: 1px solid var(--karf-ink) !important;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--karf-ink) !important;
	color: var(--karf-paper) !important;
	transform: translateY(-2px);
}

/* ---------- Dark sections ---------- */
.karf-dark { background: var(--karf-ink); color: var(--karf-paper); position: relative; overflow: clip; }
.karf-dark :where(h1,h2,h3,h4,p,li) { color: var(--karf-paper); }
.karf-dark .karf-eyebrow { color: var(--karf-brass-soft); }
.karf-dark a:not(.wp-block-button__link) { color: var(--karf-brass-soft); }
.karf-dark .karf-rule { border-top-color: rgba(245,242,234,0.16); }
.karf-dark .wp-block-button.is-style-outline .wp-block-button__link {
	color: var(--karf-paper) !important;
	border-color: rgba(245,242,234,0.5) !important;
}
.karf-dark .wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--karf-paper) !important;
	color: var(--karf-ink) !important;
}

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid rgba(245,242,234,0.16); }
.site-footer .karf-footer-mark {
	font-family: var(--karf-display);
	font-size: clamp(3rem, 10vw, 7rem);
	line-height: 0.9;
	letter-spacing: -0.02em;
	color: var(--karf-paper);
	opacity: 0.96;
}
.site-footer .wp-block-navigation { font-family: var(--karf-mono); font-size: 0.8rem; letter-spacing: 0.04em; }
.site-footer .wp-block-navigation a { color: var(--karf-brass-soft); }

/* ---------- Prose / single post ---------- */
.karf-prose { font-size: 1.12rem; line-height: 1.75; }
.karf-prose p, .karf-prose li { max-width: 66ch; }
.karf-prose > p:first-of-type::first-letter {
	font-family: var(--karf-display);
	font-size: 3.6em;
	line-height: 0.72;
	float: left;
	margin: 0.05em 0.12em 0 0;
	color: var(--karf-accent);
	font-weight: 500;
}
.karf-prose a { background-image: linear-gradient(var(--karf-accent), var(--karf-accent)); background-size: 100% 1px; background-position: 0 1.15em; background-repeat: no-repeat; }
.karf-prose blockquote {
	border-left: 2px solid var(--karf-brass);
	margin-left: 0; padding-left: 1.4rem;
	font-family: var(--karf-display);
	font-style: italic;
	font-size: 1.4rem;
	color: var(--karf-ink-soft);
}
.entry-content figure img { border-radius: 3px; }

/* ---------- Meta ---------- */
.karf-meta {
	font-family: var(--karf-mono);
	font-size: 0.76rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--karf-muted);
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.karf-stagger > *, .karf-reveal { animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important; }
	.karf-marquee__track { animation: none; }
}