/*
Theme Name: Success Era
Theme URI: https://toptut.com
Author: TopTut / WordPress Wizards
Author URI: https://toptut.com
Description: Editorial theme for TopTut. Warm paper, hairline rules, Archivo display with Literata prose, a single purple accent, tinted featured images that clear on hover, and headlines that tumble into place on scroll. No page builder, no framework: three CSS files and one deferred script.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.8
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: toptut
Tags: blog, news, editorial, two-columns, right-sidebar, custom-logo, custom-menu, featured-images, rtl-language-support, translation-ready, block-styles, wide-blocks
*/

/* ============================================================
   SUCCESS ERA - TOKENS, RESET, CHROME, LAYOUT
   ============================================================ */

:root {
	/* Substrate + ink */
	--paper:      oklch(97.8% 0.006 85);
	--paper-2:    oklch(96.6% 0.008 85);
	--paper-3:    oklch(99.4% 0.003 85);
	--ink:        oklch(21% 0.012 60);
	--ink-2:      oklch(32% 0.012 60);
	--body:       oklch(24% 0.012 60);
	--muted:      oklch(48% 0.01 70);

	/* Single accent */
	--accent:     oklch(46% 0.19 285);
	--accent-ink: oklch(30% 0.12 285);
	--accent-lo:  oklch(96.8% 0.018 285);
	--accent-br:  oklch(89% 0.04 285);
	--accent-up:  oklch(72% 0.09 292);

	/* Rules */
	--rule:       oklch(87% 0.008 80);
	--rule-2:     oklch(91% 0.008 80);
	--rule-hard:  oklch(21% 0.012 60);

	/* Plates (image placeholders / generated thumbs) */
	--plate:      oklch(92% 0.012 80);
	--plate-2:    oklch(88% 0.014 80);

	/* Type */
	--font-display: Archivo, "Helvetica Neue", Helvetica, sans-serif;
	--font-body:    Archivo, "Helvetica Neue", Helvetica, sans-serif;
	--font-prose:   Literata, Georgia, "Times New Roman", serif;
	--font-mono:    ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	/* Metrics */
	--shell:   1240px;
	--gutter:  48px;
	--measure: 68ch;
	--rail:    296px;
	--head-h:  72px;

	/* Motion */
	--ease: cubic-bezier(0.2, 0, 0, 1);

	/* Legacy aliases so older content/blocks keep working */
	--navy: var(--ink);
	--grad-brand: var(--accent);
}

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

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

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-display);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.1;
	margin: 0;
	text-wrap: pretty;
}

p { margin: 0; }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-ink); }

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

button, input, select, textarea { font: inherit; color: inherit; }

::selection { background: oklch(46% 0.19 285 / 0.16); }

:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

/* First words of a title, in the brand accent. Class name kept from v1
   so any existing content or plugin output still renders correctly. */
.grad-text {
	color: var(--accent);
	background: none;
	-webkit-background-clip: initial;
	-webkit-text-fill-color: currentColor;
}

/* ---------- Utility ---------- */
.wrap { max-width: var(--shell); margin: 0 auto; padding: 0 var(--gutter); }

.eyebrow, .mono {
	font-family: var(--font-mono);
	font-size: 10.5px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--muted);
}

.section-title {
	display: flex;
	align-items: baseline;
	gap: 16px;
	border-top: 2px solid var(--rule-hard);
	padding-top: 14px;
	margin: 0 0 32px;
	font-family: var(--font-display);
	font-size: 22px;
	font-weight: 700;
	letter-spacing: -0.03em;
	overflow: hidden;
}
.section-title .st-note {
	margin-left: auto;
	font-family: var(--font-mono);
	font-size: 10.5px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--muted);
	font-weight: 400;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	background: var(--ink);
	color: var(--paper);
	padding: 12px 18px;
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}
.skip-link:focus { left: 8px; top: 8px; color: var(--paper); }

/* Paper grain — one fixed layer, no repaint cost */
.paper-grain {
	position: fixed;
	inset: 0;
	z-index: 80;
	pointer-events: none;
	opacity: 0.035;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* ---------- Buttons ---------- */
.btn-primary, .btn-ghost, .btn-on-grad {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-family: var(--font-display);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: -0.005em;
	padding: 14px 24px;
	border: 1px solid var(--ink);
	transition: background 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
	cursor: pointer;
}
.btn-primary { background: var(--ink); color: var(--paper); }
.btn-primary:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-ghost { background: transparent; color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--paper); }
.btn-on-grad { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.btn-on-grad:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn-lg { padding: 16px 28px; font-size: 15px; }
.btn-primary svg, .btn-ghost svg, .btn-on-grad svg { width: 15px; height: 15px; flex: none; }

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
	position: sticky;
	top: 0;
	z-index: 200;
	background: var(--paper);
	border-bottom: 1px solid var(--rule);
}

.nav-inner {
	max-width: var(--shell);
	margin: 0 auto;
	padding: 0 var(--gutter);
	height: var(--head-h);
	display: flex;
	align-items: center;
	gap: 32px;
}

.brand-logo {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: none;
	color: var(--ink);
}
.brand-logo:hover { color: var(--ink); }
.brand-img {
	height: 30px;
	width: auto;
	display: block;
	transition: opacity 0.25s var(--ease);
}
.brand-logo:hover .brand-img { opacity: 0.7; }
.brand-mark {
	width: 26px;
	height: 26px;
	background: var(--accent);
	display: grid;
	place-items: center;
	flex: none;
	transition: background 0.3s var(--ease);
}
.brand-logo:hover .brand-mark { background: var(--ink); }
.brand-mark-ring { display: none; }
.brand-mark-glyph { display: grid; place-items: center; }
.brand-mark-glyph img,
.brand-mark-glyph svg { width: 16px; height: 16px; filter: invert(1) brightness(2); }
.brand-word {
	font-family: var(--font-display);
	font-size: 20px;
	font-weight: 800;
	letter-spacing: -0.035em;
	white-space: nowrap;
}
.brand-word::first-letter { color: inherit; }

/* Primary nav */
.nav-primary { margin-right: auto; }
.nav-links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: 28px;
}
.nav-item { position: relative; }
.nav-item > a {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 13.5px;
	font-weight: 500;
	color: var(--ink);
	padding: 4px 0;
	border-bottom: 1px solid transparent;
	transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
	white-space: nowrap;
}
.nav-item > a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.nav-item.current > a { border-bottom-color: var(--accent); }
.nav-caret svg { width: 11px; height: 11px; opacity: 0.5; transition: transform 0.25s var(--ease); }
.nav-item.open .nav-caret svg { transform: rotate(180deg); }

.nav-right { display: flex; align-items: center; gap: 10px; flex: none; }
.nav-search-toggle {
	width: 36px;
	height: 36px;
	border: 1px solid var(--rule);
	background: transparent;
	display: grid;
	place-items: center;
	cursor: pointer;
	color: var(--ink);
	transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.nav-search-toggle:hover { border-color: var(--accent); color: var(--accent); }
.nav-search-toggle svg { width: 16px; height: 16px; }
.nav-cta {
	background: var(--ink);
	color: var(--paper);
	font-size: 13px;
	font-weight: 600;
	padding: 11px 18px;
	white-space: nowrap;
	transition: background 0.25s var(--ease);
}
.nav-cta:hover { background: var(--accent); color: #fff; }

.nav-toggle {
	display: none;
	width: 36px;
	height: 36px;
	border: 1px solid var(--rule);
	background: transparent;
	cursor: pointer;
	padding: 0;
	position: relative;
}
.nav-toggle span {
	display: block;
	width: 16px;
	height: 1.5px;
	background: var(--ink);
	margin: 3px auto;
	transition: transform 0.25s var(--ease), opacity 0.2s;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(4.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-4.5px) rotate(-45deg); }

/* Search panel */
.nav-search-panel {
	display: none;
	border-top: 1px solid var(--rule);
	background: var(--paper-3);
}
.nav-search-panel.open { display: block; }
.nav-search-panel form {
	max-width: var(--shell);
	margin: 0 auto;
	padding: 16px var(--gutter);
	display: flex;
	align-items: center;
	gap: 12px;
}
.nav-search-panel svg { width: 16px; height: 16px; color: var(--muted); flex: none; }
.nav-search-panel input {
	flex: 1;
	min-width: 0;
	border: none;
	border-bottom: 1px solid var(--rule);
	background: transparent;
	padding: 10px 0;
	font-size: 17px;
	outline: none;
}
.nav-search-panel input:focus { border-bottom-color: var(--accent); }

/* ---------- Mega menu ---------- */
.mega {
	position: absolute;
	top: calc(100% + 12px);
	left: -24px;
	width: 720px;
	max-width: calc(100vw - 48px);
	background: var(--paper-3);
	border: 1px solid var(--rule);
	padding: 24px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity 0.22s var(--ease), transform 0.28s var(--ease), visibility 0.22s;
	z-index: 220;
}
.nav-item.has-mega:hover .mega,
.nav-item.has-mega.open .mega,
.nav-item.has-mega:focus-within .mega {
	opacity: 1;
	visibility: visible;
	transform: none;
}
.mega-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	border-bottom: 1px solid var(--rule);
	padding-bottom: 12px;
	margin-bottom: 6px;
}
.mega-eyebrow {
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--muted);
}
.mega-all {
	font-family: var(--font-mono);
	font-size: 10.5px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.mega-all svg { width: 13px; height: 13px; }
.mega-grid { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 32px; }
.mega-card {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 11px 0;
	border-bottom: 1px solid var(--rule-2);
	color: var(--ink);
	transition: color 0.2s var(--ease);
}
.mega-card:hover { color: var(--accent); }
.mega-card.is-active { color: var(--accent); }
.mega-grid .mega-card:nth-last-child(-n+2) { border-bottom: none; }
.mega-ic {
	width: 9px;
	height: 9px;
	flex: none;
	background: var(--ic-a, var(--accent));
}
.mega-ic svg { display: none; }
.mega-tx { display: flex; align-items: baseline; gap: 8px; flex: 1; min-width: 0; }
.mega-name { font-size: 14.5px; font-weight: 600; letter-spacing: -0.015em; }
.mega-count {
	margin-left: auto;
	font-family: var(--font-mono);
	font-size: 10px;
	color: var(--muted);
	white-space: nowrap;
}
.mega-promo {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-top: 20px;
	background: var(--ink);
	color: var(--paper);
	padding: 16px 18px;
	transition: background 0.25s var(--ease);
}
.mega-promo:hover { background: var(--accent); color: #fff; }
.mega-promo-ic { display: none; }
.mega-promo-tx { flex: 1; }
.mega-promo-title { display: block; font-size: 15px; font-weight: 700; letter-spacing: -0.02em; }
.mega-promo-sub { display: block; font-family: var(--font-prose); font-size: 13px; opacity: 0.8; margin-top: 3px; }
.mega-promo-cta {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
}
.mega-promo-cta svg { width: 13px; height: 13px; }

/* ---------- Category sub-nav ---------- */
.cat-nav { border-bottom: 1px solid var(--rule); background: var(--paper); }
.cat-nav-inner {
	max-width: var(--shell);
	margin: 0 auto;
	padding: 0 var(--gutter);
	display: flex;
	flex-wrap: wrap;
	gap: 0 24px;
}
.cat-nav-link {
	font-family: var(--font-mono);
	font-size: 10.5px;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--muted);
	padding: 12px 0;
	border-bottom: 2px solid transparent;
	transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
	white-space: nowrap;
}
.cat-nav-link:hover { color: var(--ink); }
.cat-nav-link.active { color: var(--accent); border-bottom-color: var(--accent); }

/* ---------- Reading progress ---------- */
.reading-progress {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 2px;
	background: var(--accent);
	transform: scaleX(0);
	transform-origin: left;
	z-index: 400;
	will-change: transform;
}

/* ============================================================
   LAYOUT — feed + rail
   ============================================================ */
.home-main {
	max-width: var(--shell);
	margin: 0 auto;
	padding: 44px var(--gutter) 90px;
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--rail);
	gap: 60px;
	align-items: start;
}
.home-feed { min-width: 0; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer-outer {
	border-top: 2px solid var(--rule-hard);
	background: var(--paper-2);
}
.site-footer {
	max-width: var(--shell);
	margin: 0 auto;
	padding: 64px var(--gutter) 34px;
}
.footer-brand {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	padding-bottom: 30px;
}
.footer-brand-name {
	display: flex;
	align-items: center;
	gap: 14px;
	font-family: var(--font-display);
	font-size: 44px;
	font-weight: 800;
	letter-spacing: -0.04em;
	line-height: 1;
	color: var(--ink);
}
.footer-brand-name:hover { color: var(--ink); }
.footer-brand-img {
	height: 42px;
	width: auto;
	display: block;
}
.footer-brand-medallion {
	width: 34px;
	height: 34px;
	background: var(--accent);
	display: grid;
	place-items: center;
	flex: none;
}
.footer-brand-medallion img,
.footer-brand-medallion svg { width: 20px; height: 20px; filter: invert(1) brightness(2); }
.footer-tagline {
	font-family: var(--font-prose);
	font-size: 16px;
	line-height: 1.6;
	color: var(--ink-2);
	max-width: 44ch;
}

.footer-nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 24px;
	flex-wrap: wrap;
	border-top: 1px solid var(--rule);
	border-bottom: 1px solid var(--rule);
	padding: 20px 0;
}
.footer-links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 24px;
	flex-wrap: wrap;
}
.footer-links a {
	font-family: var(--font-mono);
	font-size: 10.5px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ink-2);
}
.footer-links a:hover { color: var(--accent); }

.footer-socials { display: flex; gap: 8px; }
.social-icon {
	width: 38px;
	height: 38px;
	border: 1px solid var(--rule);
	display: grid;
	place-items: center;
	color: var(--ink);
	transition: background 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.social-icon:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.social-icon svg { width: 15px; height: 15px; fill: currentColor; }

.footer-bottom { padding-top: 20px; }
.footer-copy {
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 0.06em;
	color: var(--muted);
}

/* ============================================================
   MOTION — reveals are opt-in and JS-gated (see main.js)
   ============================================================ */
@keyframes tt-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes tt-mask { from { opacity: 0; transform: translateY(105%); } to { opacity: 1; transform: none; } }

/* Only elements the script has explicitly armed are hidden, so a JS
   failure or a frozen animation clock can never blank the page. */
.reveal[data-armed="1"],
.reveal-mask[data-armed="1"] { opacity: 0; }
.reveal[data-played="1"] { animation: tt-rise 0.7s var(--ease) both; }
.reveal-mask[data-armed="1"] { display: inline-block; }
.reveal-mask[data-played="1"] { display: inline-block; animation: tt-mask 0.85s var(--ease) both; }

.plate-parallax { will-change: transform; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition-duration: 0.001ms !important; }
	.reveal[data-armed="1"],
	.reveal-mask[data-armed="1"] { opacity: 1; }
	.reading-progress { display: none; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1180px) {
	:root { --gutter: 32px; --rail: 264px; }
	.home-main { gap: 40px; }
}

@media (max-width: 1000px) {
	:root { --gutter: 24px; }
	.nav-primary {
		position: fixed;
		inset: var(--head-h) 0 auto 0;
		background: var(--paper);
		border-bottom: 1px solid var(--rule);
		display: none;
		max-height: calc(100vh - var(--head-h));
		overflow-y: auto;
	}
	.nav-primary.open { display: block; }
	.nav-links { flex-direction: column; align-items: stretch; gap: 0; padding: 8px var(--gutter) 20px; }
	.nav-item > a { padding: 14px 0; border-bottom: 1px solid var(--rule-2); font-size: 16px; }
	.nav-toggle { display: block; }
	.nav-cta { display: none; }
	.mega {
		position: static;
		width: auto;
		max-width: none;
		border: none;
		padding: 4px 0 16px;
		opacity: 1;
		visibility: visible;
		transform: none;
		display: none;
		background: transparent;
	}
	.nav-item.has-mega.open .mega { display: block; }
	.mega-grid { grid-template-columns: 1fr; column-gap: 0; }
	.mega-grid .mega-card:nth-last-child(-n+2) { border-bottom: 1px solid var(--rule-2); }

	.home-main {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
		padding-bottom: 60px;
	}
	.sidebar {
		border-left: none !important;
		border-top: 2px solid var(--rule-hard);
		padding-left: 0 !important;
		padding-top: 34px;
		margin-top: 50px;
		position: static !important;
	}
}

@media (max-width: 640px) {
	:root { --gutter: 18px; }
	.footer-brand-name { font-size: 34px; }
	.brand-img { height: 24px; }
	.footer-brand-img { height: 34px; }
	.footer-nav { flex-direction: column; align-items: flex-start; }
	.section-title { font-size: 19px; }
}