/*
Theme Name: Kantan
Theme URI: https://trykantan.com/kantan-theme/
Author: Joel Jenkins
Author URI: https://joeljenkins.me
Description: A lightning-fast FSE block theme built for SEO and conversions. Clean semantic HTML, design-token architecture, and tight integration with Kantan Analytics and Kantan SEO.
Version: 0.1.0
Requires at least: 6.4
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: kantan
Tags: full-site-editing, block-patterns, custom-colors, custom-fonts, wide-blocks, editor-style
*/

/* Fix WP utility class specificity: .has-text-color clobbers specific color classes on buttons */
.wp-block-button__link.has-text-color.has-base-color {
	color: var(--wp--preset--color--base) !important;
}
.wp-block-button__link.has-text-color.has-primary-color {
	color: var(--wp--preset--color--primary) !important;
}
.wp-block-button__link.has-text-color.has-secondary-color {
	color: var(--wp--preset--color--secondary) !important;
}

/*
 * Full-bleed sections sit flush inside post-content.
 * Root blockGap provides sensible default spacing everywhere else.
 */
.wp-block-post-content > * + * {
	margin-block-start: 0;
}

/*
 * Mobile breathing room via root padding.
 * useRootPaddingAwareAlignments in theme.json makes alignfull
 * blocks break out with negative margins, staying 100vw.
 */

/*
 * Footer nav: plain list layout on all screens, never a hamburger.
 */
footer .wp-block-navigation__responsive-container {
	display: block !important;
	position: relative !important;
	width: auto !important;
	height: auto !important;
	overflow: visible !important;
	visibility: visible !important;
	opacity: 1 !important;
}
footer .wp-block-navigation__responsive-container-open {
	display: none !important;
}
footer .wp-block-navigation__responsive-container-close {
	display: none !important;
}
footer .wp-block-navigation__responsive-container-content {
	gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
	flex-wrap: nowrap;
	justify-content: flex-end;
}
@media (max-width: 781px) {
	footer .wp-block-navigation__responsive-container-content {
		flex-direction: column;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
	}
}

/*
 * Blog post content: restore spacing and scale down headings
 * for long-form reading. The article wrapper in single.html
 * scopes these styles to blog posts only.
 */
article.wp-block-group .wp-block-post-content > * + * {
	margin-block-start: var(--wp--preset--spacing--40);
}
article.wp-block-group .wp-block-post-content > .wp-block-heading {
	margin-block-start: var(--wp--preset--spacing--60);
}
article.wp-block-group .wp-block-post-content h2 {
	font-size: var(--wp--preset--font-size--2-xl);
}
article.wp-block-group .wp-block-post-content h3 {
	font-size: var(--wp--preset--font-size--xl);
}
article.wp-block-group .wp-block-post-content h4 {
	font-size: var(--wp--preset--font-size--lg);
}

/* Same fix for navigation and any element using preset color classes */
.has-text-color.has-base-color,
.has-text-color.has-base-color a {
	color: var(--wp--preset--color--base) !important;
}

/* ——————————————————————— KANTAN DESIGN TOKENS ——————————————————————— */

:root {
	--ink: #1a1614;
	--ink-soft: #3d362f;
	--ink-mute: #7a6f62;
	--paper: #f6f1e8;
	--paper-warm: #efe7d6;
	--paper-deep: #e4d9c2;
	--persimmon: #c94a1f;
	--persimmon-soft: #e27a52;
	--graphite: #2a221c;
	--graphite-soft: #3d322a;
	--cream: #f9efd8;
	--olive: #5e6b3a;

	--f-display: "Fraunces", Georgia, serif;
	--f-body: "Geist", -apple-system, BlinkMacSystemFont, sans-serif;
	--f-mono: "Geist Mono", ui-monospace, "SF Mono", monospace;

	--rule: 1px solid var(--ink);
	--rule-soft: 1px solid color-mix(in srgb, var(--ink) 15%, transparent);
}

html {
	scroll-behavior: smooth;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body {
	background: var(--paper);
	color: var(--ink);
	font-family: var(--f-body);
	font-size: 17px;
	line-height: 1.55;
	overflow-x: hidden;
}

::selection { background: var(--persimmon); color: var(--cream); }

/* ——————————————————————— LAYOUT UTILITIES ——————————————————————— */

.shell {
	max-width: 1340px;
	margin: 0 auto;
	padding: 0 40px;
}

@media (max-width: 600px) {
	.shell { padding: 0 20px; }
}

.rule     { border-bottom: var(--rule); }
.rule-soft { border-bottom: var(--rule-soft); }

.marginalia {
	font-family: var(--f-mono);
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ink-mute);
}

/* ——————————————————————— NAV ——————————————————————— */

nav.masthead {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 22px 40px;
	border-bottom: var(--rule-soft);
	position: sticky;
	top: 0;
	background: color-mix(in srgb, var(--paper) 92%, transparent);
	backdrop-filter: blur(12px);
	z-index: 100;
}

.mark {
	display: flex;
	align-items: baseline;
	gap: 10px;
	font-family: var(--f-display);
	font-weight: 500;
	font-size: 22px;
	font-variation-settings: "SOFT" 40, "opsz" 48;
	letter-spacing: -0.015em;
	text-decoration: none;
	color: var(--ink);
}

.mark .kana {
	font-family: var(--f-display);
	font-size: 13px;
	font-weight: 400;
	color: var(--persimmon);
	font-style: italic;
}

.mast-nav {
	display: flex;
	gap: 38px;
	align-items: center;
	font-size: 14px;
	font-weight: 400;
	color: var(--ink-soft);
}

.mast-nav a {
	transition: color 180ms ease;
	text-decoration: none;
	color: inherit;
}

.mast-nav a:hover { color: var(--persimmon); }

.mast-nav a.install {
	background: var(--ink);
	color: var(--paper);
	padding: 10px 18px;
	border-radius: 100px;
	font-family: var(--f-mono);
	font-size: 12px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	transition: background 180ms ease;
}

.mast-nav a.install:hover { background: var(--persimmon); color: var(--cream); }

@media (max-width: 780px) {
	nav.masthead { padding: 18px 20px; }
	.mast-nav a:not(.install):not(.pricing) { display: none; }
}

/* ——————————————————————— BUTTONS ——————————————————————— */

.btn-primary {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	background: var(--ink);
	color: var(--paper);
	padding: 18px 28px;
	border-radius: 100px;
	font-family: var(--f-body);
	font-weight: 500;
	font-size: 15px;
	transition: all 220ms ease;
	text-decoration: none;
}

.btn-primary:hover {
	background: var(--persimmon);
	color: var(--cream);
	transform: translateY(-1px);
}

.btn-primary .arrow { transition: transform 220ms ease; }
.btn-primary:hover .arrow { transform: translateX(4px); }

.btn-secondary {
	font-family: var(--f-body);
	font-size: 15px;
	color: var(--ink-soft);
	border-bottom: 1px solid color-mix(in srgb, var(--ink) 30%, transparent);
	padding-bottom: 2px;
	transition: all 180ms ease;
	text-decoration: none;
}

.btn-secondary:hover {
	color: var(--persimmon);
	border-color: var(--persimmon);
}

/* ——————————————————————— FOOTER ——————————————————————— */

footer.kantan-footer {
	border-top: var(--rule);
	padding: 50px 0 38px;
	background: var(--paper);
}

.foot-grid {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	gap: 40px;
	margin-bottom: 48px;
}

@media (max-width: 780px) {
	.foot-grid { grid-template-columns: 1fr 1fr; }
}

.foot-col h4 {
	font-family: var(--f-mono);
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ink-mute);
	margin-bottom: 20px;
	font-weight: 400;
}

.foot-col ul { list-style: none; padding: 0; margin: 0; }

.foot-col li {
	font-size: 14px;
	line-height: 2;
	color: var(--ink-soft);
}

.foot-col a { transition: color 180ms ease; text-decoration: none; color: inherit; }
.foot-col a:hover { color: var(--persimmon); }

.foot-about {
	font-family: var(--f-display);
	font-weight: 400;
	font-size: 20px;
	line-height: 1.4;
	letter-spacing: -0.01em;
	font-variation-settings: "SOFT" 60;
	color: var(--ink);
	max-width: 380px;
	margin: 0;
}

.foot-about em {
	font-style: italic;
	color: var(--persimmon);
}

.foot-bar {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 20px;
	padding-top: 28px;
	border-top: var(--rule-soft);
	font-family: var(--f-mono);
	font-size: 11px;
	color: var(--ink-mute);
	letter-spacing: 0.04em;
}

.foot-bar .kana {
	font-family: var(--f-display);
	font-style: italic;
	font-size: 16px;
	color: var(--persimmon);
	letter-spacing: 0;
}

.foot-legal {
	margin-top: 16px;
	font-family: var(--f-mono);
	font-size: 10px;
	color: color-mix(in srgb, var(--ink-mute) 70%, transparent);
	letter-spacing: 0.03em;
	line-height: 1.6;
}

/* ——————————————————————— LEGAL / POLICY PAGES ——————————————————————— */

.legal-masthead {
	position: relative;
	background: var(--paper);
	border-bottom: var(--rule);
	overflow: hidden;
}

.legal-mark {
	position: absolute;
	right: -5vw;
	top: 50%;
	transform: translateY(-50%);
	font-family: var(--f-display);
	font-style: italic;
	font-weight: 400;
	font-size: clamp(320px, 42vw, 620px);
	color: var(--paper-deep);
	opacity: 0.55;
	z-index: 0;
	line-height: 0.82;
	pointer-events: none;
	user-select: none;
	font-variation-settings: "SOFT" 100, "opsz" 144;
}

.legal-masthead-inner {
	position: relative;
	z-index: 1;
}

.legal-kicker {
	display: flex;
	align-items: center;
	gap: 12px;
	font-family: var(--f-mono);
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ink-mute);
	margin-bottom: 48px;
}

.legal-kicker-mark {
	color: var(--persimmon);
	font-family: var(--f-display);
	font-style: italic;
	font-size: 15px;
	margin-right: 2px;
	font-variation-settings: "SOFT" 100;
}

.legal-kicker-dot {
	color: color-mix(in srgb, var(--ink-mute) 50%, transparent);
}

.legal-title.wp-block-post-title,
.legal-title {
	font-family: var(--f-display) !important;
	font-weight: 400 !important;
	font-style: italic !important;
	font-size: clamp(56px, 10vw, 148px) !important;
	line-height: 0.92 !important;
	letter-spacing: -0.038em !important;
	color: var(--persimmon) !important;
	margin: 0 !important;
	padding: 0 !important;
	font-variation-settings: "SOFT" 80, "opsz" 144;
	max-width: 960px;
}

.legal-rule {
	width: 100%;
	height: 1px;
	background: var(--ink);
	margin-top: 56px;
	position: relative;
}

.legal-rule::before {
	content: "";
	position: absolute;
	top: -4px;
	left: 0;
	width: 120px;
	height: 9px;
	background: var(--persimmon);
}

/* ——— Body ——— */

.legal-body {
	background: var(--paper);
	position: relative;
	padding-top: clamp(60px, 8vw, 120px) !important;
	padding-bottom: clamp(80px, 10vw, 160px) !important;
}

.legal-body-shell {
	position: relative;
}

.legal-body-shell .wp-block-post-content {
	max-width: 680px;
	margin-left: 140px;
	counter-reset: section;
	position: relative;
}

@media (max-width: 900px) {
	.legal-body-shell .wp-block-post-content {
		margin-left: 0;
	}
}

/* Dateline — first paragraph */
.legal-body-shell .wp-block-post-content > p:first-of-type {
	font-family: var(--f-mono) !important;
	font-size: 11px !important;
	letter-spacing: 0.16em !important;
	text-transform: uppercase !important;
	color: var(--ink-mute) !important;
	margin: 0 0 56px !important;
	padding-bottom: 28px !important;
	border-bottom: var(--rule-soft);
	line-height: 1.4 !important;
}

/* Lede — second paragraph */
.legal-body-shell .wp-block-post-content > p:nth-of-type(2) {
	font-family: var(--f-display) !important;
	font-weight: 400;
	font-style: normal;
	font-size: clamp(22px, 2.4vw, 30px);
	line-height: 1.4;
	letter-spacing: -0.012em;
	font-variation-settings: "SOFT" 80, "opsz" 96;
	color: var(--ink) !important;
	margin-bottom: 88px;
}

.legal-body-shell .wp-block-post-content > p:nth-of-type(2)::first-letter {
	float: left;
	font-family: var(--f-display);
	font-style: italic;
	font-weight: 400;
	font-size: 112px;
	line-height: 0.82;
	color: var(--persimmon);
	padding-right: 16px;
	padding-top: 8px;
	font-variation-settings: "SOFT" 100, "opsz" 144;
}

/* Section headings — H2 with Roman numeral */
.legal-body-shell .wp-block-post-content h2 {
	font-family: var(--f-display) !important;
	font-weight: 400 !important;
	font-size: clamp(28px, 3.6vw, 44px) !important;
	line-height: 1.05 !important;
	letter-spacing: -0.022em !important;
	font-variation-settings: "SOFT" 60, "opsz" 120;
	color: var(--ink);
	margin: 112px 0 32px;
	position: relative;
	counter-increment: section;
}

.legal-body-shell .wp-block-post-content h2::before {
	content: counter(section, cjk-ideographic);
	position: absolute;
	right: calc(100% + 24px);
	top: -10px;
	width: 130px;
	text-align: right;
	font-family: var(--f-display);
	font-style: italic;
	font-weight: 400;
	font-size: 56px;
	line-height: 1;
	color: var(--persimmon);
	font-variation-settings: "SOFT" 100, "opsz" 144;
	letter-spacing: 0;
}

@media (max-width: 900px) {
	.legal-body-shell .wp-block-post-content h2 {
		margin-top: 80px;
	}
	.legal-body-shell .wp-block-post-content h2::before {
		position: static;
		display: block;
		width: auto;
		text-align: left;
		font-size: 52px;
		margin-bottom: 14px;
		line-height: 0.9;
	}
}

/* Subheadings — H3 */
.legal-body-shell .wp-block-post-content h3 {
	font-family: var(--f-display) !important;
	font-weight: 500 !important;
	font-size: clamp(19px, 2.2vw, 24px) !important;
	line-height: 1.2 !important;
	letter-spacing: -0.015em !important;
	font-variation-settings: "SOFT" 50, "opsz" 48;
	color: var(--ink);
	margin: 52px 0 18px;
	position: relative;
	padding-left: 22px;
}

.legal-body-shell .wp-block-post-content h3::before {
	content: "§";
	position: absolute;
	left: 0;
	top: 0;
	color: var(--persimmon);
	font-style: italic;
	font-weight: 400;
	font-variation-settings: "SOFT" 100, "opsz" 48;
}

/* Body paragraphs (from the 3rd onward, since :first-of-type and :nth-of-type(2) are special) */
.legal-body-shell .wp-block-post-content p {
	font-family: var(--f-body);
	font-size: 17px;
	line-height: 1.75;
	color: var(--ink-soft);
	margin-bottom: 24px;
}

/* Emphasis inside body */
.legal-body-shell .wp-block-post-content em {
	font-family: var(--f-display);
	font-style: italic;
	font-weight: 500;
	color: var(--ink);
	font-variation-settings: "SOFT" 80;
}

.legal-body-shell .wp-block-post-content strong {
	font-weight: 600;
	color: var(--ink);
}

/* Lists with persimmon § / italic roman markers */
.legal-body-shell .wp-block-post-content ul,
.legal-body-shell .wp-block-post-content ol {
	padding-left: 0;
	margin: 0 0 32px;
	list-style: none;
}

.legal-body-shell .wp-block-post-content li {
	position: relative;
	padding-left: 34px;
	font-family: var(--f-body);
	font-size: 17px;
	line-height: 1.7;
	color: var(--ink-soft);
	margin-bottom: 12px;
}

.legal-body-shell .wp-block-post-content ul > li::before {
	content: "§";
	position: absolute;
	left: 0;
	top: 0;
	color: var(--persimmon);
	font-family: var(--f-display);
	font-style: italic;
	font-weight: 400;
	font-size: 20px;
	line-height: 1.55;
	font-variation-settings: "SOFT" 100;
}

.legal-body-shell .wp-block-post-content ol {
	counter-reset: item;
}

.legal-body-shell .wp-block-post-content ol > li::before {
	counter-increment: item;
	content: counter(item, lower-roman) ".";
	position: absolute;
	left: 0;
	top: 0;
	color: var(--persimmon);
	font-family: var(--f-display);
	font-style: italic;
	font-weight: 500;
	font-size: 17px;
	min-width: 26px;
	font-variation-settings: "SOFT" 80;
}

/* Inline code */
.legal-body-shell .wp-block-post-content code {
	font-family: var(--f-mono);
	font-size: 0.85em;
	background: var(--paper-warm);
	padding: 2px 7px;
	border-radius: 3px;
	color: var(--ink);
	border: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
}

/* Links */
.legal-body-shell .wp-block-post-content a {
	color: var(--ink);
	border-bottom: 1px solid var(--persimmon);
	text-decoration: none;
	transition: all 180ms ease;
}

.legal-body-shell .wp-block-post-content a:hover {
	color: var(--persimmon);
}

/* ——————————————————————— CONTENT PAGES (generic) ——————————————————————— */

.page-masthead {
	border-bottom: var(--rule-soft);
	background: var(--paper);
}

.page-title {
	font-family: var(--f-display) !important;
	font-weight: 400 !important;
	font-size: clamp(36px, 5vw, 64px) !important;
	line-height: 1.0 !important;
	letter-spacing: -0.03em !important;
	font-variation-settings: "SOFT" 60, "opsz" 144;
	color: var(--ink);
}

.page-body {
	background: var(--paper);
}

.page-body .wp-block-post-content {
	font-size: 16px;
	line-height: 1.7;
	color: var(--ink-soft);
}

.page-body .wp-block-post-content h2 {
	font-family: var(--f-display);
	font-weight: 500;
	font-size: clamp(22px, 2.5vw, 30px);
	line-height: 1.1;
	letter-spacing: -0.02em;
	font-variation-settings: "SOFT" 50, "opsz" 48;
	color: var(--ink);
	margin-top: 2.5em;
	margin-bottom: 0.6em;
}

.page-body .wp-block-post-content h3 {
	font-family: var(--f-display);
	font-weight: 500;
	font-size: clamp(18px, 2vw, 22px);
	letter-spacing: -0.01em;
	font-variation-settings: "SOFT" 40;
	color: var(--ink);
	margin-top: 2em;
	margin-bottom: 0.5em;
}

.page-body .wp-block-post-content p { margin-bottom: 1.2em; }

.page-body .wp-block-post-content a:not(.wp-element-button) {
	color: var(--persimmon);
	border-bottom: 1px solid color-mix(in srgb, var(--persimmon) 40%, transparent);
	transition: border-color 180ms ease;
}

.page-body .wp-block-post-content a:not(.wp-element-button):hover {
	border-color: var(--persimmon);
}

.page-body .wp-block-post-content ul,
.page-body .wp-block-post-content ol {
	padding-left: 1.5em;
	margin-bottom: 1.2em;
}

.page-body .wp-block-post-content li { margin-bottom: 0.4em; }

.page-body .wp-block-post-content hr {
	border: none;
	border-top: var(--rule-soft);
	margin: 2.5em 0;
}

/* ——————————————————————— SCROLL REVEAL ——————————————————————— */

.reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 800ms cubic-bezier(.2,.8,.2,1), transform 800ms cubic-bezier(.2,.8,.2,1);
}

.reveal.seen {
	opacity: 1;
	transform: translateY(0);
}

@keyframes riseIn {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}