/* ==========================================================================
   Investing Lens — Main Stylesheet
   Brand: Playfair Display (headings) + Inter (body)
   Palette extracted from investinglens.com
   ========================================================================== */

:root {
	--il-ink: #1A1A1A;
	--il-ink-soft: rgba(26, 26, 26, 0.65);
	--il-ink-faint: rgba(26, 26, 26, 0.45);
	--il-paper: #FFFFFF;
	--il-paper-alt: #FAFAF9;
	--il-accent: #E8362A;
	--il-accent-dark: #C42A1F;
	--il-accent-soft: #FFF3F2;
	--il-secondary: #FFCA3A;
	--il-border: rgba(26, 26, 26, 0.08);
	--il-shadow: 0 12px 32px rgba(26, 26, 26, 0.08);
	--il-shadow-lg: 0 24px 60px rgba(26, 26, 26, 0.14);
	--il-header-bg: rgba(255, 255, 255, 0.92);
	--il-hero-gradient: linear-gradient(180deg, #FFFDF7 0%, #FFFFFF 100%);
	/* Deliberately-dark decorative surfaces (footer, CTA bands, code blocks,
	   the active pill/tab state) — these stay dark in both themes, so they
	   use fixed values instead of --il-ink, which inverts with the theme. */
	--il-ink-surface: #1A1A1A;
	--il-on-ink-surface: #FFFFFF;
	--il-radius-sm: 6px;
	--il-radius: 12px;
	--il-radius-lg: 24px;
	--il-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--il-font-display: 'Playfair Display', Georgia, serif;
	--il-container: 1160px;
}

/* ---------- Dark mode ----------
   Same brand fonts/red/yellow throughout — only surfaces and ink invert.
   Two ways in: an explicit user choice (data-theme, set by the toggle in
   header.php + assets/js/main.js and persisted to localStorage) always wins;
   with no stored choice, the OS-level prefers-color-scheme is honored. */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--il-ink: #EDEAE5;
		--il-ink-soft: rgba(237, 234, 229, 0.68);
		--il-ink-faint: rgba(237, 234, 229, 0.45);
		--il-paper: #15120E;
		--il-paper-alt: #1E1A15;
		--il-accent: #FF5A48;
		--il-accent-dark: #FF7A6A;
		--il-accent-soft: rgba(255, 90, 72, 0.14);
		--il-secondary: #FFCA3A;
		--il-border: rgba(255, 255, 255, 0.1);
		--il-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
		--il-shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.55);
		--il-header-bg: rgba(21, 18, 14, 0.86);
		--il-hero-gradient: linear-gradient(180deg, #1A1611 0%, #15120E 100%);
	}
}
:root[data-theme="dark"] {
	--il-ink: #EDEAE5;
	--il-ink-soft: rgba(237, 234, 229, 0.68);
	--il-ink-faint: rgba(237, 234, 229, 0.45);
	--il-paper: #15120E;
	--il-paper-alt: #1E1A15;
	--il-accent: #FF5A48;
	--il-accent-dark: #FF7A6A;
	--il-accent-soft: rgba(255, 90, 72, 0.14);
	--il-secondary: #FFCA3A;
	--il-border: rgba(255, 255, 255, 0.1);
	--il-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
	--il-shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.55);
	--il-header-bg: rgba(21, 18, 14, 0.86);
	--il-hero-gradient: linear-gradient(180deg, #1A1611 0%, #15120E 100%);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0;
	font-family: var(--il-font-body);
	color: var(--il-ink);
	background: var(--il-paper);
	font-size: 17px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
button { font-family: inherit; cursor: pointer; }
input, textarea { font-family: inherit; }

h1, h2, h3, h4, h5, h6 {
	font-family: var(--il-font-display);
	font-weight: 700;
	line-height: 1.2;
	margin: 0 0 0.5em;
	color: var(--il-ink);
}
p { margin: 0 0 1em; }

.container {
	max-width: var(--il-container);
	margin: 0 auto;
	padding: 0 24px;
}

.screen-reader-text, .skip-link {
	position: absolute;
	left: -9999px;
}
.skip-link:focus {
	left: 24px;
	top: 24px;
	z-index: 9999;
	background: var(--il-ink-surface);
	color: var(--il-on-ink-surface);
	padding: 10px 18px;
	border-radius: var(--il-radius-sm);
}

/* ---------- Buttons ---------- */
.btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 14px 28px;
	border-radius: var(--il-radius-sm);
	font-weight: 600;
	font-size: 15px;
	transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
	border: 2px solid transparent;
}
.btn-primary {
	background: var(--il-accent);
	color: #fff;
	box-shadow: 0 8px 20px rgba(232, 54, 42, 0.28);
}
.btn-primary:hover {
	background: var(--il-accent-dark);
	transform: translateY(-2px);
	box-shadow: 0 12px 26px rgba(232, 54, 42, 0.34);
}
.btn-ghost {
	background: transparent;
	color: var(--il-ink);
	border-color: var(--il-border);
}
.btn-ghost:hover {
	border-color: var(--il-ink);
	transform: translateY(-2px);
}

/* ---------- Header ---------- */
.site-header {
	background: var(--il-header-bg);
	border-bottom: 1px solid var(--il-border);
	position: sticky;
	top: 0;
	z-index: 100;
	backdrop-filter: saturate(180%) blur(8px);
}
.header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	padding-top: 16px;
	padding-bottom: 16px;
}
.site-branding, .custom-logo-link { display: flex; align-items: center; }
.site-logo-link, .footer-logo-link {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: var(--il-font-display);
	font-weight: 700;
	font-size: 20px;
}
.site-logo-img { border-radius: 8px; }
.custom-logo { max-height: 46px; width: auto; border-radius: 8px; }

/* Dark-mode logo swap — same artwork, recolored copy shown/hidden by theme.
   See investinglens_add_dark_logo_variant() (functions.php) for the custom-logo
   case and header.php for the static-fallback case. */
.custom-logo-dark,
.site-logo-img-dark { display: none; }
html[data-theme="dark"] .custom-logo:not(.custom-logo-dark),
html[data-theme="dark"] .site-logo-img-light { display: none; }
html[data-theme="dark"] .custom-logo-dark,
html[data-theme="dark"] .site-logo-img-dark { display: block; }

.main-navigation { flex: 1; display: flex; justify-content: center; }
.nav-menu { display: flex; align-items: center; gap: 8px; }
.nav-menu li a {
	display: block;
	padding: 10px 16px;
	font-weight: 500;
	font-size: 15px;
	border-radius: var(--il-radius-sm);
	transition: background 0.15s ease, color 0.15s ease;
}
.nav-menu li a:hover,
.nav-menu li.current-menu-item > a {
	background: var(--il-accent-soft);
	color: var(--il-accent);
}

.header-actions { display: flex; align-items: center; gap: 12px; }

/* Theme toggle — cycles Auto (time-of-day based) -> Light -> Dark -> Auto.
   Only the icon matching the current mode is shown; state comes from
   data-theme-mode on <html>, set by the no-FOUC bootstrap script in
   header.php and updated by assets/js/main.js on click. */
.theme-toggle-icon { display: none; }
:root[data-theme-mode="auto"] .theme-toggle-icon-auto,
:root[data-theme-mode="light"] .theme-toggle-icon-light,
:root[data-theme-mode="dark"] .theme-toggle-icon-dark { display: block; }
.icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--il-paper-alt);
	color: var(--il-ink);
	transition: background 0.15s ease, color 0.15s ease;
}
.icon-btn:hover { background: var(--il-accent-soft); color: var(--il-accent); }
.icon-btn { border: none; cursor: pointer; }

.header-search-panel {
	border-top: 1px solid var(--il-border);
	background: var(--il-paper);
	padding: 16px 0;
	box-shadow: var(--il-shadow);
}
.header-search-panel .search-form { max-width: 480px; margin: 0; }

.menu-toggle {
	display: none;
	flex-direction: column;
	gap: 5px;
	background: none;
	border: none;
	width: 40px;
	height: 40px;
	align-items: center;
	justify-content: center;
}
.menu-toggle span {
	display: block;
	width: 22px;
	height: 2px;
	background: var(--il-ink);
	border-radius: 2px;
}

/* ---------- Hero ---------- */
.hero {
	position: relative;
	overflow: hidden;
	padding: 90px 0 70px;
	background: var(--il-hero-gradient);
}
/* A decorative chart-line SVG background for .hero was added separately via
   WordPress's own Additional CSS field (Appearance -> Customize -> Additional
   CSS — outside this theme's files, loads after every enqueued stylesheet).
   Its colors are baked into the image itself for a light page, so it can't
   adapt to dark mode. The bootstrap script in header.php always resolves
   data-theme to a concrete "light" or "dark" before paint, so targeting the
   dark case directly is enough — no prefers-color-scheme fallback needed
   here. Higher specificity (not source order) is what lets this win
   regardless of where Additional CSS is injected. */
html[data-theme="dark"] body .hero.hero {
	background-image: none;
	background-color: var(--il-paper);
}
.hero-inner {
	position: relative;
	z-index: 2;
	max-width: 860px;
	text-align: center;
	margin: 0 auto;
}
.eyebrow {
	display: inline-block;
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--il-accent);
	background: var(--il-accent-soft);
	padding: 6px 16px;
	border-radius: 999px;
	margin-bottom: 20px;
}
.hero-title {
	font-size: clamp(34px, 6.2vw, 68px);
	font-weight: 800;
	line-height: 1.08;
	margin-bottom: 22px;
	letter-spacing: -0.02em;
}
.hero-subtext {
	font-size: 18px;
	color: var(--il-ink-soft);
	max-width: 640px;
	margin: 0 auto 32px;
}
.hero-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.hero-blob {
	position: absolute;
	top: -120px;
	right: -120px;
	width: 420px;
	height: 420px;
	background: radial-gradient(circle, var(--il-secondary) 0%, transparent 70%);
	opacity: 0.35;
	border-radius: 50%;
	z-index: 1;
}

/* ---------- Category strip ---------- */
.category-strip { border-bottom: 1px solid var(--il-border); padding: 18px 0; }
.category-pills {
	display: flex;
	gap: 10px;
	overflow-x: auto;
	scrollbar-width: none;
}
.category-pills::-webkit-scrollbar { display: none; }
.pill {
	white-space: nowrap;
	padding: 8px 18px;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 600;
	background: var(--il-paper-alt);
	color: var(--il-ink-soft);
	transition: background 0.15s ease, color 0.15s ease;
}
.pill:hover { background: var(--il-accent-soft); color: var(--il-accent); }
.pill-active { background: var(--il-ink-surface); color: var(--il-on-ink-surface); }
.pill-active:hover { background: var(--il-ink-surface); color: var(--il-on-ink-surface); }

/* ---------- Bento grid (shared: homepage categories + calculators hub) ----------
   Uneven modular tiles — the "wide" tile spans 2 columns for visual rhythm.
   Works for either a <button> (calculators, JS-driven tab jump) or an <a>
   (category links, real navigation) since neither element type is assumed. */
.category-bento { padding: 50px 0 10px; }
.il-bento-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
}
.il-bento-tile {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 10px;
	text-align: left;
	background: var(--il-paper);
	border: 1px solid var(--il-border);
	border-radius: var(--il-radius-lg);
	padding: 24px;
	font-family: inherit;
	color: inherit;
	cursor: pointer;
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.il-bento-tile:hover {
	transform: translateY(-4px);
	box-shadow: var(--il-shadow-lg);
	border-color: transparent;
}
.il-bento-tile-wide { grid-column: span 2; }
.il-bento-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--il-accent-soft);
	color: var(--il-accent);
	flex-shrink: 0;
}
.il-bento-tile-wide .il-bento-icon { width: 54px; height: 54px; }
.il-bento-monogram { font-family: var(--il-font-display); font-size: 19px; font-weight: 700; }
.il-bento-tile-wide .il-bento-monogram { font-size: 23px; }
.il-bento-title { font-family: var(--il-font-display); font-size: 17px; font-weight: 700; }
.il-bento-tile-wide .il-bento-title { font-size: 21px; }
.il-bento-desc { font-size: 14px; line-height: 1.5; color: var(--il-ink-soft); }
.il-bento-meta { margin-top: auto; padding-top: 4px; font-size: 13px; font-weight: 700; color: var(--il-accent); }

@media (max-width: 780px) {
	.il-bento-grid { grid-template-columns: 1fr 1fr; }
	.il-bento-tile-wide { grid-column: span 2; }
}
@media (max-width: 560px) {
	.il-bento-grid { grid-template-columns: 1fr; }
	.il-bento-tile-wide { grid-column: span 1; }
}

/* ---------- Section headings ---------- */
.section-label {
	display: block;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--il-accent);
	margin-bottom: 10px;
}
.section-heading {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 32px;
	flex-wrap: wrap;
}
.section-heading h2 { margin: 0; font-size: 30px; }
.view-all-link {
	font-weight: 600;
	color: var(--il-accent);
	white-space: nowrap;
}
.view-all-link:hover { text-decoration: underline; }

/* ---------- Featured article ---------- */
.featured-article { padding: 60px 0 20px; }
.featured-card {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: 40px;
	align-items: center;
	background: var(--il-paper-alt);
	border-radius: var(--il-radius-lg);
	overflow: hidden;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.featured-card:hover { box-shadow: var(--il-shadow-lg); transform: translateY(-2px); }
.featured-media { aspect-ratio: 4/3; overflow: hidden; }
.featured-media img { width: 100%; height: 100%; object-fit: cover; }
.featured-media-placeholder,
.card-media-placeholder {
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, var(--il-accent-soft), var(--il-secondary));
	opacity: 0.5;
}
.featured-content { padding: 24px 40px 24px 0; }
.post-cat {
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--il-accent);
	background: var(--il-accent-soft);
	padding: 5px 12px;
	border-radius: 999px;
	margin-bottom: 14px;
}
.featured-title { font-size: 32px; margin-bottom: 14px; }
.featured-excerpt { color: var(--il-ink-soft); margin-bottom: 18px; }
.post-meta { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--il-ink-faint); }

/* ---------- Article grid / cards ---------- */
.recent-articles { padding: 50px 0 80px; }
.article-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
}
.article-card {
	background: var(--il-paper);
	border: 1px solid var(--il-border);
	border-radius: var(--il-radius);
	overflow: hidden;
	transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
.article-card:hover {
	box-shadow: var(--il-shadow);
	transform: translateY(-4px);
	border-color: transparent;
}
.card-media { position: relative; display: block; aspect-ratio: 16/10; overflow: hidden; }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.article-card:hover .card-media img { transform: scale(1.05); }
.card-cat {
	position: absolute;
	top: 12px;
	left: 12px;
	background: rgba(255, 255, 255, 0.92);
	color: var(--il-accent);
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 5px 10px;
	border-radius: 999px;
}
.card-body { padding: 20px; }
.card-title { font-size: 19px; margin-bottom: 8px; }
.card-title a:hover { color: var(--il-accent); }
.card-excerpt { font-size: 14.5px; color: var(--il-ink-soft); margin-bottom: 14px; }

.empty-state, .empty-state-block { text-align: center; color: var(--il-ink-soft); padding: 40px 0; }

/* ---------- Newsletter CTA ---------- */
.newsletter-cta {
	background: var(--il-ink-surface);
	color: var(--il-on-ink-surface);
	padding: 70px 0;
	text-align: center;
}
.newsletter-inner { max-width: 560px; margin: 0 auto; }
.newsletter-cta h2 { color: #fff; font-size: 30px; }
.newsletter-cta p { color: rgba(255, 255, 255, 0.7); margin-bottom: 28px; }

/* ---------- Newsletter form (used on homepage CTA + [il_newsletter_form] shortcode) ---------- */
.il-newsletter-form { max-width: 440px; margin: 0 auto; }
.il-newsletter-row {
	display: flex;
	gap: 10px;
	background: #fff;
	padding: 6px;
	border-radius: 999px;
}
.il-newsletter-row input[type="email"] {
	flex: 1;
	border: none;
	background: none;
	padding: 12px 16px;
	font-size: 15px;
	color: var(--il-ink-surface);
	outline: none;
	min-width: 0;
}
.il-newsletter-row .btn { padding: 12px 22px; white-space: nowrap; }
.il-newsletter-message { margin: 10px 0 0; font-size: 13.5px; min-height: 1.2em; color: rgba(255, 255, 255, 0.75); }
.il-newsletter-message.is-success { color: var(--il-secondary); }
.il-newsletter-message.is-error { color: #FF8A80; }

/* Light-background context (e.g. sidebar widget, in-post shortcode) */
.widget .il-newsletter-form,
.single-content .il-newsletter-form {
	max-width: none;
}
.widget .il-newsletter-message,
.single-content .il-newsletter-message { color: var(--il-ink-soft); }
.widget .il-newsletter-message.is-error,
.single-content .il-newsletter-message.is-error { color: var(--il-accent); }
.widget .il-newsletter-message.is-success,
.single-content .il-newsletter-message.is-success { color: #2E7D32; }

@media (max-width: 560px) {
	.il-newsletter-row { flex-direction: column; border-radius: var(--il-radius); background: transparent; padding: 0; gap: 10px; }
	.il-newsletter-row input[type="email"] { background: #fff; border-radius: var(--il-radius-sm); }
	.il-newsletter-row .btn { width: 100%; justify-content: center; }
}

/* ---------- Archive / listing pages ---------- */
/* Gradient-mesh header band, shared language with the homepage hero — used
   by archive.php, index.php, search.php, and page.php's default header. */
.archive-header, .single-header.page-header {
	position: relative;
	overflow: hidden;
	padding: 76px 0 44px;
	text-align: center;
	background: var(--il-hero-gradient);
}
.archive-header::before, .single-header.page-header::before {
	content: '';
	position: absolute;
	top: -140px;
	right: -110px;
	width: 380px;
	height: 380px;
	border-radius: 50%;
	background: radial-gradient(circle, var(--il-secondary) 0%, transparent 70%);
	opacity: 0.32;
	pointer-events: none;
}
.archive-header::after, .single-header.page-header::after {
	content: '';
	position: absolute;
	bottom: -170px;
	left: -130px;
	width: 340px;
	height: 340px;
	border-radius: 50%;
	background: radial-gradient(circle, var(--il-accent) 0%, transparent 70%);
	opacity: 0.14;
	pointer-events: none;
}
.archive-header > *, .single-header.page-header > * { position: relative; z-index: 1; }
.archive-header h1 { font-size: 40px; }
.archive-description { color: var(--il-ink-soft); max-width: 600px; margin: 0 auto; }
.archive-content { padding: 20px 0 80px; }
.archive-layout { display: grid; grid-template-columns: 2.4fr 1fr; gap: 48px; align-items: start; }
.archive-main { min-width: 0; }
.archive-main .article-grid { grid-template-columns: repeat(2, 1fr); }

.pagination { display: flex; justify-content: center; gap: 10px; margin-top: 40px; }
.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border-radius: var(--il-radius-sm);
	background: var(--il-paper-alt);
	font-weight: 600;
	font-size: 14px;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.pagination .page-numbers.current { background: var(--il-accent); color: #fff; box-shadow: 0 6px 16px rgba(232, 54, 42, 0.3); }
.pagination .page-numbers:hover:not(.current) { background: var(--il-accent-soft); color: var(--il-accent); transform: translateY(-2px); }

/* ---------- Sidebar / widgets ---------- */
.widget-area { display: flex; flex-direction: column; gap: 28px; }
.widget {
	position: relative;
	background: var(--il-paper-alt);
	border-radius: var(--il-radius);
	padding: 24px;
	overflow: hidden;
}
.widget::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--il-accent), var(--il-secondary));
	opacity: 0.7;
}
.widget-title {
	font-size: 16px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin-bottom: 16px;
}
.widget ul li { padding: 8px 0; border-bottom: 1px solid var(--il-border); }
.widget ul li:last-child { border-bottom: none; }
.widget a:hover { color: var(--il-accent); }

/* Native Gutenberg "Search" block, when dropped into a widget area — its own
   markup (wp-block-search__*) is unrelated to get_search_form()'s .search-form
   above, so it rendered completely unstyled (a bare label butted up against a
   bare button) until now. */
.widget.widget_block.widget_search .wp-block-search__label {
	display: block;
	font-size: 16px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-weight: 700;
	margin-bottom: 12px;
}
.widget.widget_block.widget_search .wp-block-search__inside-wrapper {
	display: flex;
	align-items: center;
	gap: 8px;
	background: var(--il-paper);
	border: 1px solid var(--il-border);
	border-radius: 999px;
	padding: 4px 4px 4px 16px;
}
.widget.widget_block.widget_search .wp-block-search__input {
	flex: 1;
	min-width: 0;
	border: none;
	background: none;
	color: var(--il-ink);
	font-size: 15px;
	font-family: var(--il-font-body);
	outline: none;
	padding: 8px 0;
}
.widget.widget_block.widget_search .wp-block-search__button {
	flex-shrink: 0;
	border: none;
	border-radius: 999px;
	background: var(--il-accent);
	color: #fff;
	font-weight: 600;
	font-size: 14px;
	padding: 10px 18px;
	cursor: pointer;
	transition: background 0.15s ease;
}
.widget.widget_block.widget_search .wp-block-search__button:hover { background: var(--il-accent-dark); }

/* ---------- Search form ---------- */
.search-form {
	display: flex;
	align-items: center;
	gap: 10px;
	background: var(--il-paper-alt);
	border: 1px solid var(--il-border);
	border-radius: 999px;
	padding: 6px 6px 6px 20px;
	max-width: 420px;
	margin: 20px auto 0;
}
.search-field { flex: 1; border: none; background: none; color: var(--il-ink); font-size: 15px; outline: none; padding: 8px 0; }
.search-submit {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--il-accent);
	color: #fff;
	border: none;
}

/* ---------- Reading progress bar ---------- */
.reading-progress {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	z-index: 300;
	background: transparent;
	pointer-events: none;
}
.reading-progress-fill {
	height: 100%;
	width: 0%;
	background: linear-gradient(90deg, var(--il-accent), var(--il-secondary));
	box-shadow: 0 0 12px rgba(232, 54, 42, 0.5);
}

/* ---------- Single post: header (no featured image) ---------- */
.single-header { padding: 60px 0 30px; text-align: center; }
.single-header-inner { max-width: 760px; margin: 0 auto; }
.single-title { font-size: clamp(28px, 4vw, 44px); margin: 14px 0 18px; }
.single-meta { display: flex; gap: 8px; justify-content: center; align-items: center; font-size: 14px; color: var(--il-ink-faint); flex-wrap: wrap; }
.single-featured-image { border-radius: var(--il-radius-lg); overflow: hidden; margin-bottom: 40px; max-width: var(--il-container); }
.single-featured-image img { width: 100%; }

/* ---------- Single post: full-bleed hero ---------- */
.single-hero {
	position: relative;
	height: 58vh;
	min-height: 380px;
	max-height: 640px;
	overflow: hidden;
}
.single-hero-media,
.single-hero-media img { width: 100%; height: 100%; object-fit: cover; }
.single-hero-media img { animation: il-hero-zoom 16s ease-out forwards; }
@keyframes il-hero-zoom {
	from { transform: scale(1.08); }
	to { transform: scale(1); }
}
.single-hero-scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(26, 26, 26, 0.05) 0%, rgba(26, 26, 26, 0.15) 45%, rgba(26, 26, 26, 0.92) 100%);
}
.single-hero-content {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding-bottom: 96px;
	color: #fff;
}
.post-cat-on-hero {
	background: rgba(255, 255, 255, 0.14);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.28);
}
.single-title-on-hero {
	color: #fff;
	font-size: clamp(28px, 4.8vw, 50px);
	text-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
	max-width: 820px;
}
.single-meta-on-hero { color: rgba(255, 255, 255, 0.85); justify-content: flex-start; }

/* ---------- Single post: layout ---------- */
.single-layout { display: grid; grid-template-columns: 2.4fr 1fr; gap: 48px; align-items: start; padding-bottom: 60px; }
.single-layout.has-hero { margin-top: -64px; position: relative; z-index: 5; padding-bottom: 60px; }
.single-layout.has-hero .single-content {
	background: var(--il-paper);
	border-radius: 28px 28px 0 0;
	padding: 44px 44px 0;
	box-shadow: 0 -30px 60px rgba(26, 26, 26, 0.07);
}
.single-layout.has-hero .widget-area { margin-top: 64px; }
/* Sits above the hero image, never inside it — avoids the hero's absolutely
   positioned title/meta overlay entirely, so there's no overlap risk at any
   viewport size regardless of how far the content card below is pulled up. */
.breadcrumb-wrap-above-hero { padding: 14px 0; }
.breadcrumb-wrap-above-hero .breadcrumbs ol { justify-content: center; }

/* min-width: 0 overrides the grid item default of min-width: auto — without
   it, one wide child (a table, code block, long URL) forces the whole 1fr
   track wider than the viewport instead of shrinking and letting that child
   scroll/wrap internally. Same fix applied to .archive-main below. */
.single-content { font-size: 18px; line-height: 1.8; max-width: 720px; min-width: 0; }
.single-prose h2 { font-size: 28px; margin-top: 1.6em; }
.single-prose h3 { font-size: 22px; margin-top: 1.4em; }
.single-prose h4 { font-size: 19px; margin-top: 1.3em; }
.single-prose h5 { font-size: 17px; margin-top: 1.2em; }
.single-prose h6 {
	font-size: 14.5px;
	margin-top: 1.1em;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--il-ink-soft);
}
.single-prose p { margin-bottom: 1.2em; }
.single-prose ul, .single-prose ol { margin: 0 0 1.2em 1.4em; }
.single-prose li { margin-bottom: 0.5em; }
.single-prose a { color: var(--il-accent); text-decoration: underline; text-underline-offset: 2px; }
.single-prose img { border-radius: var(--il-radius); margin: 1.5em 0; box-shadow: var(--il-shadow); }

/* Drop cap on the first paragraph that actually has text — tagged by
   investinglens_polish_post_content() so it never targets an empty
   leading spacer paragraph. */
.single-prose > p.il-dropcap::first-letter {
	float: left;
	font-family: var(--il-font-display);
	font-size: 76px;
	line-height: 0.78;
	font-weight: 700;
	color: var(--il-accent);
	padding: 6px 12px 0 0;
}

/* "Key Takeaways"-style checklist callout — auto-wrapped around runs of
   consecutive ✅ paragraphs by investinglens_polish_post_content(). */
.il-callout-checklist {
	background: var(--il-accent-soft);
	border: 1px solid rgba(232, 54, 42, 0.14);
	border-radius: var(--il-radius);
	padding: 26px 30px;
	margin: 2em 0;
}
.il-callout-checklist p { margin: 0 0 10px; font-size: 15.5px; font-weight: 500; }
.il-callout-checklist p:last-child { margin-bottom: 0; }

/* ---------- Leaf TOC plugin — on-brand restyle ----------
   Leaf TOC (wp-content/plugins/leaf-toc) already builds a solid table of
   contents — sticky mode, collapsible, scroll-spy active link, reading time,
   presets — entirely through CSS custom properties scoped to its own
   .leaf-toc-wrapper. investinglens_leaf_toc_brand_classes() (functions.php)
   adds the class below via the plugin's own `leaf_toc_wrapper_classes`
   filter; everything else here just re-points its variables at the site's
   palette instead of the plugin's default teal. No plugin files touched.
   Selector is scoped under .single-content so it always wins the cascade
   regardless of stylesheet load order between the theme and the plugin. */
.single-content .leaf-toc-preset-investinglens {
	--ltoc-bg: var(--il-paper-alt);
	--ltoc-border: var(--il-border);
	--ltoc-shadow: var(--il-shadow);
	--ltoc-title-color: var(--il-ink);
	--ltoc-link-color: var(--il-ink);
	--ltoc-link-hover: var(--il-accent);
	--ltoc-link-active: var(--il-accent);
	--ltoc-active-bg: var(--il-accent-soft);
	--ltoc-active-bar: var(--il-accent);
	--ltoc-radius: var(--il-radius);
	--ltoc-divider: var(--il-border);
	--ltoc-header-bg: transparent;
	max-width: 100%;
	margin: 0 0 2.4em;
	border: none;
	box-shadow: none;
	background: linear-gradient(135deg, var(--il-paper-alt) 0%, var(--il-accent-soft) 100%);
}
.single-content .leaf-toc-preset-investinglens .leaf-toc-header {
	padding: 16px 22px;
	border-bottom: 1px solid rgba(232, 54, 42, 0.12);
}
.single-content .leaf-toc-preset-investinglens .leaf-toc-title {
	color: var(--il-accent);
	font-size: 12px;
	letter-spacing: 0.07em;
}
.single-content .leaf-toc-preset-investinglens .leaf-toc-content { padding: 14px 22px 18px; }
.single-content .leaf-toc-preset-investinglens .leaf-toc-link { font-weight: 500; }
.single-content .leaf-toc-preset-investinglens .leaf-toc-link.is-active { font-weight: 700; }
.single-content .leaf-toc-preset-investinglens .leaf-toc-sticky { top: 96px; }

/* No separate dark-mode block needed here — every value above is one of the
   theme's own --il-* tokens, which already flip with the site's real dark
   mode (see the :root dark-mode block near the top of this file). This
   deliberately overrides Leaf TOC's own auto-dark-mode (triggered by
   .leaf-toc-auto-dark on <body>) so the TOC always follows the site's actual
   theme state rather than the visitor's OS preference in isolation. */
.leaf-toc-auto-dark .single-content .leaf-toc-preset-investinglens {
	--ltoc-bg: var(--il-paper-alt);
	--ltoc-border: var(--il-border);
	--ltoc-shadow: var(--il-shadow);
	--ltoc-title-color: var(--il-ink);
	--ltoc-link-color: var(--il-ink);
	--ltoc-link-hover: var(--il-accent);
	--ltoc-link-active: var(--il-accent);
	--ltoc-active-bg: var(--il-accent-soft);
	--ltoc-active-bar: var(--il-accent);
	--ltoc-divider: var(--il-border);
}

/* Pull-quote blockquote with a decorative mark */
.single-prose blockquote {
	position: relative;
	border-left: 4px solid var(--il-accent);
	background: var(--il-accent-soft);
	padding: 28px 32px 28px 64px;
	margin: 2em 0;
	border-radius: 0 var(--il-radius) var(--il-radius) 0;
	font-family: var(--il-font-display);
	font-size: 21px;
	font-style: italic;
	color: var(--il-ink);
}
.single-prose blockquote::before {
	content: '\201C';
	position: absolute;
	top: 6px;
	left: 20px;
	font-family: var(--il-font-display);
	font-size: 56px;
	font-style: normal;
	font-weight: 700;
	color: var(--il-accent);
	opacity: 0.5;
	line-height: 1;
}
.single-prose pre {
	background: var(--il-ink-surface);
	color: var(--il-on-ink-surface);
	padding: 20px;
	border-radius: var(--il-radius);
	overflow-x: auto;
}
.single-prose table { width: 100%; border-collapse: collapse; margin: 1.5em 0; }
.single-prose th, .single-prose td { border: 1px solid var(--il-border); padding: 10px 14px; text-align: left; }
.single-prose th { background: var(--il-paper-alt); }
.single-prose hr { border: none; border-top: 1px solid var(--il-border); margin: 2.5em 0; }

.page-links { margin-top: 24px; font-weight: 600; }

/* ---------- Share row ---------- */
.share-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 14px;
	margin: 44px 0;
	padding: 20px 24px;
	background: var(--il-paper-alt);
	border-radius: var(--il-radius);
}
.share-row-label { font-weight: 600; font-size: 14.5px; color: var(--il-ink-soft); }
.share-buttons { display: flex; gap: 10px; }
.share-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--il-paper);
	color: var(--il-ink-soft);
	border: 1px solid var(--il-border);
	transition: transform 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.share-btn:hover { transform: translateY(-3px); }
.share-x:hover { color: var(--il-ink); border-color: var(--il-ink); }
.share-fb:hover { color: #1877F2; border-color: #1877F2; }
.share-li:hover { color: #0A66C2; border-color: #0A66C2; }
.share-wa:hover { color: #25D366; border-color: #25D366; }
.share-copy:hover { color: var(--il-accent); border-color: var(--il-accent); }
.share-copy.is-copied { color: #2E7D32; border-color: #2E7D32; }

/* ---------- Back to top ---------- */
.back-to-top {
	position: fixed;
	right: 24px;
	bottom: 24px;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--il-ink-surface);
	color: var(--il-on-ink-surface);
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: var(--il-shadow-lg);
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity 0.2s ease, transform 0.2s ease, background 0.2s ease;
	z-index: 90;
}
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { background: var(--il-accent); }

/* ---------- Tags ---------- */
.post-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 32px 0; }
.tag-pill {
	background: var(--il-paper-alt);
	padding: 6px 14px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 500;
}
.tag-pill:hover { background: var(--il-accent-soft); color: var(--il-accent); }

/* ---------- Author card ---------- */
.author-box {
	display: flex;
	gap: 20px;
	align-items: center;
	background: linear-gradient(135deg, var(--il-paper-alt) 0%, var(--il-accent-soft) 100%);
	border-radius: var(--il-radius-lg);
	padding: 28px;
	margin: 40px 0;
}
.author-box img { border-radius: 50%; box-shadow: 0 0 0 4px var(--il-paper); }
.author-box-label { display: block; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--il-accent); margin-bottom: 4px; }
.author-box h3 { font-size: 18px; margin-bottom: 6px; }
.author-box p { margin: 0; color: var(--il-ink-soft); font-size: 14.5px; }

.related-articles { padding: 40px 0 80px; text-align: center; }
.related-articles .section-label { display: block; }
.related-articles h2 { margin-bottom: 32px; }
.related-articles .article-grid { text-align: left; }

/* ---------- Comments ---------- */
.comments-area { margin-top: 40px; }
.comments-title { font-size: 22px; margin-bottom: 24px; }
.comment-list { margin-bottom: 32px; }
.comment-list .comment {
	background: var(--il-paper-alt);
	border-radius: var(--il-radius);
	padding: 20px;
	margin-bottom: 16px;
}
.comment-respond input[type="text"],
.comment-respond input[type="email"],
.comment-respond input[type="url"],
.comment-respond textarea {
	width: 100%;
	padding: 12px 16px;
	border: 1px solid var(--il-border);
	border-radius: var(--il-radius-sm);
	margin-bottom: 14px;
	font-size: 15px;
	color: var(--il-ink);
	background: var(--il-paper-alt);
}
.comment-respond textarea { min-height: 140px; }

/* ---------- 404 ---------- */
.error-404 { position: relative; text-align: center; padding: 120px 0; overflow: hidden; }
.error-404-inner { position: relative; z-index: 1; }
.error-404-blob { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(10px); }
.error-404-blob-1 {
	top: -120px;
	left: -100px;
	width: 340px;
	height: 340px;
	background: radial-gradient(circle, var(--il-secondary) 0%, transparent 70%);
	opacity: 0.35;
	animation: il-float 9s ease-in-out infinite;
}
.error-404-blob-2 {
	bottom: -140px;
	right: -110px;
	width: 380px;
	height: 380px;
	background: radial-gradient(circle, var(--il-accent) 0%, transparent 70%);
	opacity: 0.16;
	animation: il-float 11s ease-in-out infinite reverse;
}
@keyframes il-float {
	0%, 100% { transform: translate(0, 0); }
	50% { transform: translate(20px, -20px); }
}
.error-code {
	font-family: var(--il-font-display);
	font-size: 140px;
	font-weight: 800;
	line-height: 1;
	display: block;
	margin-bottom: 8px;
	background: linear-gradient(135deg, var(--il-accent) 0%, var(--il-secondary) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.error-404 h1 { font-size: 28px; max-width: 560px; margin: 0 auto 12px; }
.error-404 p { color: var(--il-ink-soft); margin-bottom: 8px; }
.error-404 .search-form { margin-bottom: 8px; }
.error-404-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 28px; }
.error-404-categories { margin-top: 48px; }
.error-404-categories-label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: var(--il-ink-faint);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: 14px;
}
.error-404-categories .category-pills { justify-content: center; }

/* ---------- Footer ---------- */
.site-footer { position: relative; background: var(--il-ink-surface); color: rgba(255, 255, 255, 0.6); padding: 80px 0 30px; overflow: hidden; }
.footer-glow {
	position: absolute;
	top: -180px;
	left: 50%;
	transform: translateX(-50%);
	width: 700px;
	height: 360px;
	background: radial-gradient(ellipse, var(--il-accent) 0%, transparent 70%);
	opacity: 0.14;
	pointer-events: none;
}
.footer-inner { position: relative; z-index: 1; }

.footer-top { display: grid; grid-template-columns: 1.3fr 0.85fr 0.85fr 0.85fr 1.2fr; gap: 36px; margin-bottom: 52px; }

/* Typographic footer logo — no image, no box. Sits directly on the dark
   background using the same brand fonts as everywhere else on the site. */
.footer-logotype {
	display: inline-flex;
	align-items: baseline;
	font-family: var(--il-font-display);
	font-size: 26px;
	font-weight: 700;
	letter-spacing: -0.01em;
	margin-bottom: 18px;
}
.footer-logotype-mark {
	color: var(--il-accent);
	font-style: italic;
	margin-right: 1px;
}
.footer-logotype-text { color: #fff; text-transform: capitalize; }
.footer-logotype-accent { color: var(--il-secondary); }
.footer-tagline { max-width: 260px; font-size: 14.5px; }

.footer-col .widget-title { color: #fff; font-size: 13.5px; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 18px; }
.footer-col ul li, .footer-menu li { padding: 7px 0; font-size: 14.5px; }
.footer-col a, .footer-menu a { color: rgba(255, 255, 255, 0.65); transition: color 0.15s ease; }
.footer-col a:hover, .footer-menu a:hover { color: var(--il-secondary); }
.footer-legal-pending { color: rgba(255, 255, 255, 0.35); font-size: 13.5px; font-style: italic; }

.footer-newsletter-text { font-size: 13.5px; margin-bottom: 16px; }
.footer-newsletter-col .il-newsletter-form { max-width: none; }

.footer-social { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.footer-social .social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.08);
	color: rgba(255, 255, 255, 0.75);
	border: 1px solid rgba(255, 255, 255, 0.12);
	transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.footer-social .social-link:hover { background: var(--il-accent); color: #fff; border-color: var(--il-accent); transform: translateY(-2px); }

.footer-bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	padding-top: 24px;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 8px;
	font-size: 13.5px;
}

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
	.featured-card { grid-template-columns: 1fr; }
	.featured-content { padding: 0 28px 28px; }
	.archive-layout, .single-layout { grid-template-columns: 1fr; }
	.footer-top { grid-template-columns: repeat(2, 1fr); gap: 32px 24px; }
	.footer-brand, .footer-newsletter-col { grid-column: 1 / -1; }
	.single-hero { height: 46vh; min-height: 320px; }
	.single-layout.has-hero { margin-top: -40px; }
	.single-layout.has-hero .single-content { padding: 32px 28px 0; border-radius: 22px 22px 0 0; }
	.single-layout.has-hero .widget-area { margin-top: 0; }
}

@media (max-width: 780px) {
	.main-navigation { display: none; }
	.menu-toggle { display: inline-flex; }
	.article-grid, .archive-main .article-grid { grid-template-columns: 1fr; }
	.footer-top { grid-template-columns: 1fr; }
	.footer-brand, .footer-newsletter-col { grid-column: auto; }
	.hero { padding: 60px 0 50px; }
	.single-hero-content { padding-bottom: 40px; }
	.share-row { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 560px) {
	body { font-size: 16px; }
	.container { padding: 0 18px; }
	.hero-actions { flex-direction: column; align-items: stretch; }
	.hero-actions .btn { justify-content: center; }
	.footer-bottom { flex-direction: column; text-align: center; }
	.header-inner { gap: 12px; }
	.site-logo-link .site-title { font-size: 17px; }
	.footer-logotype { font-size: 21px; }
	.featured-title { font-size: 24px; }
	.single-title { font-size: 26px; }
	.newsletter-cta h2 { font-size: 24px; }
	.section-heading h2 { font-size: 24px; }
	.author-box { flex-direction: column; text-align: center; }
	.card-media, .featured-media { aspect-ratio: 16/10; }
	.single-hero { height: 42vh; min-height: 280px; }
	.single-layout.has-hero .single-content { padding: 26px 18px 0; }
	.single-prose > p:first-of-type::first-letter { font-size: 52px; padding: 4px 8px 0 0; }
	.back-to-top { right: 16px; bottom: 16px; width: 42px; height: 42px; }
}

/* ---------- Page-builder content (Elementor / WPBakery) ----------
   Deliberately NOT nested under .container or .single-content: those cap
   width at 1160px/720px respectively, which would crush full-width builder
   sections. Global typography (body font, h1-h6, links, buttons) still
   applies since those rules aren't scoped to a container class. */
.builder-page { width: 100%; }
.builder-content { max-width: none; }
.builder-content > .elementor,
.builder-content > .vc_row:first-child { margin-top: 0; }

/* ---------- Breadcrumbs ---------- */
.breadcrumb-wrap { padding-top: 20px; }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 6px; font-size: 13px; color: var(--il-ink-faint); }
.breadcrumbs li:not(:last-child)::after { content: '/'; margin-left: 6px; color: var(--il-ink-faint); }
.breadcrumbs a:hover { color: var(--il-accent); }
.breadcrumbs li[aria-current="page"] { color: var(--il-ink-soft); }

/* The Leaf SEO plugin auto-injects its own breadcrumb nav at the top of
   post content ("Home/Category/Post Title" as one unbroken string). It
   duplicates the theme's own breadcrumb above the hero, is unstyled, and its
   long unbroken text was forcing horizontal overflow on mobile — hide it. */
.single-prose .leaf-breadcrumbs,
.single-content > .leaf-breadcrumbs,
nav.leaf-breadcrumbs { display: none !important; }

/* Safety net: no single run of text/inline content should ever be able to
   force the article column wider than its container, on any viewport. */
.single-prose, .single-content, .page-content { overflow-wrap: break-word; word-wrap: break-word; }

/* ---------- Ad slots ---------- */
.ad-slot {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	margin: 28px auto;
	max-width: 100%;
	overflow-x: auto;
}
.ad-slot .ad-label {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--il-ink-faint);
}
.ad-slot-header, .ad-slot-footer { text-align: center; padding: 16px 24px; }
.ad-slot-in-content { padding: 8px 0; }
.ad-slot-sidebar_top { margin-top: 0; }

/* ---------- Affiliate disclosure ---------- */
.affiliate-disclosure {
	background: var(--il-paper-alt);
	border-left: 4px solid var(--il-secondary);
	padding: 14px 18px;
	border-radius: 0 var(--il-radius-sm) var(--il-radius-sm) 0;
	font-size: 13.5px;
	color: var(--il-ink-soft);
	margin-bottom: 28px;
}

/* ---------- Footer social ---------- */
.footer-social { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 16px; }
.footer-social .social-link {
	font-size: 13px;
	font-weight: 600;
	padding: 6px 12px;
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 999px;
	color: rgba(255, 255, 255, 0.8);
}
.footer-social .social-link:hover { border-color: var(--il-secondary); color: var(--il-secondary); }

/* ---------- Responsive tables (wide comparison tables in post content) ---------- */
.table-scroll-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 1.5em 0; }
.table-scroll-wrap table { margin: 0; min-width: 480px; }

/* ---------- Submenu dropdowns (desktop) ---------- */
.nav-menu { position: relative; }
.nav-menu > li { position: relative; }
.nav-menu li ul {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 200px;
	background: var(--il-paper);
	border: 1px solid var(--il-border);
	border-radius: var(--il-radius-sm);
	box-shadow: var(--il-shadow);
	padding: 8px;
	z-index: 50;
}
.nav-menu li:hover > ul,
.nav-menu li.focus > ul { display: block; }
.nav-menu li ul li a { padding: 8px 12px; font-size: 14px; }
.nav-menu li ul ul { top: 0; left: 100%; }

/* ---------- Mobile nav (JS toggled) ---------- */
.site-header.nav-open .main-navigation {
	display: block;
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	background: var(--il-paper);
	border-bottom: 1px solid var(--il-border);
	box-shadow: var(--il-shadow);
	padding: 12px;
}
.site-header.nav-open .nav-menu { flex-direction: column; align-items: stretch; }
.site-header.nav-open .nav-menu li ul {
	display: none;
	position: static;
	box-shadow: none;
	border: none;
	padding-left: 12px;
}
.site-header.nav-open .nav-menu li.submenu-open > ul { display: block; }
.site-header.nav-open .nav-menu li.menu-item-has-children > a {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

/* ==========================================================================
   About Us / Contact Us — custom page templates
   ========================================================================== */

.btn-ghost-on-dark { color: #fff; border-color: rgba(255, 255, 255, 0.35); }
.btn-ghost-on-dark:hover { border-color: #fff; }

/* ---------- Shared hero band (About + Contact) ---------- */
.about-hero-inner { max-width: 760px; margin: 0 auto; text-align: center; }
.about-hero-lede { font-size: 19px; color: var(--il-ink); font-weight: 500; max-width: 680px; margin: 0 auto 14px; }
.about-hero-sub { font-size: 16.5px; color: var(--il-ink-soft); max-width: 680px; margin: 0 auto; }

.about-section { padding: 64px 0; }
.about-section:nth-of-type(even) { background: var(--il-paper-alt); }
.about-section-intro { font-size: 17px; color: var(--il-ink-soft); max-width: 720px; margin: -8px 0 28px; }
.about-section-outro { font-size: 15.5px; color: var(--il-ink-soft); max-width: 720px; margin: 28px 0 0; }

/* ---------- Icon feature grid (Who We Are / Commitment) ---------- */
.about-feature-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}
.commitment-grid { grid-template-columns: repeat(3, 1fr); }
.about-feature-card {
	background: var(--il-paper);
	border: 1px solid var(--il-border);
	border-radius: var(--il-radius);
	padding: 26px 22px;
	transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
.about-section:nth-of-type(even) .about-feature-card { background: var(--il-paper); }
.about-feature-card:hover { box-shadow: var(--il-shadow); transform: translateY(-3px); border-color: transparent; }
.about-feature-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--il-accent-soft);
	color: var(--il-accent);
	margin-bottom: 16px;
}
.about-feature-card h3 { font-size: 16.5px; margin: 0; }

/* ---------- Pillar grid (What We Do) ---------- */
.pillar-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}
.pillar-card {
	position: relative;
	background: var(--il-paper);
	border-radius: var(--il-radius);
	padding: 28px 24px 24px;
	border: 1px solid var(--il-border);
	transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
.pillar-card:hover { box-shadow: var(--il-shadow); transform: translateY(-3px); border-color: transparent; }
.pillar-index {
	display: block;
	font-family: var(--il-font-display);
	font-size: 15px;
	font-weight: 700;
	color: var(--il-secondary);
	-webkit-text-stroke: 1px var(--il-accent);
	margin-bottom: 10px;
}
.pillar-card h3 { font-size: 17px; margin-bottom: 8px; }
.pillar-card p { font-size: 14.5px; color: var(--il-ink-soft); margin: 0; }

/* ---------- Approach split (copy + checklist) ---------- */
.approach-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: center;
}
.approach-copy p { color: var(--il-ink-soft); font-size: 16.5px; }
.checklist { display: flex; flex-direction: column; gap: 14px; }
.checklist li {
	display: flex;
	align-items: center;
	gap: 14px;
	background: var(--il-paper-alt);
	border-radius: var(--il-radius-sm);
	padding: 14px 18px;
	font-weight: 600;
	font-size: 15px;
}
.about-section:nth-of-type(even) .checklist li { background: var(--il-paper); }
.checklist-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	min-width: 26px;
	border-radius: 50%;
	background: var(--il-accent);
	color: #fff;
}

/* ---------- Why Exists (centered statement block) ---------- */
.why-exists-inner { max-width: 720px; margin: 0 auto; text-align: center; }
.why-exists-inner h2 { margin-bottom: 18px; }
.why-exists-inner p { color: var(--il-ink-soft); font-size: 17px; }

/* ---------- Mission / Vision ---------- */
.mission-vision-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.mv-card {
	background: linear-gradient(135deg, var(--il-paper-alt) 0%, var(--il-accent-soft) 100%);
	border-radius: var(--il-radius-lg);
	padding: 36px 32px;
}
.mv-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--il-paper);
	color: var(--il-accent);
	box-shadow: var(--il-shadow);
	margin-bottom: 18px;
}
.mv-card h3 { font-size: 21px; margin-bottom: 10px; }
.mv-card p { color: var(--il-ink-soft); margin: 0; }

/* ---------- About final CTA ---------- */
.about-cta {
	background: linear-gradient(135deg, var(--il-ink-surface) 0%, #2a1210 100%);
	color: var(--il-on-ink-surface);
	padding: 70px 0;
	text-align: center;
}
.about-cta-inner { max-width: 620px; margin: 0 auto; }
.about-cta h2 { color: #fff; font-size: 32px; }
.about-cta p { color: rgba(255, 255, 255, 0.72); margin-bottom: 28px; font-size: 16.5px; }

/* ---------- Contact page ---------- */
.contact-section { padding: 60px 0 90px; }
.contact-layout { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 48px; align-items: start; }

.contact-info-list { display: flex; flex-direction: column; gap: 18px; margin: 24px 0 28px; }
.contact-info-item { display: flex; gap: 16px; align-items: flex-start; }
.contact-info-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	min-width: 44px;
	border-radius: 50%;
	background: var(--il-accent-soft);
	color: var(--il-accent);
}
.contact-info-label { display: block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--il-ink-faint); margin-bottom: 3px; }
.contact-info-item p { margin: 0; font-weight: 600; }
.contact-info-item a:hover { color: var(--il-accent); }

.contact-social-block { padding-top: 24px; border-top: 1px solid var(--il-border); }
.contact-social { margin-top: 12px; }
.contact-social .social-link {
	background: var(--il-paper-alt);
	color: var(--il-ink-soft);
	border: 1px solid var(--il-border);
}
.contact-social .social-link:hover { background: var(--il-accent-soft); color: var(--il-accent); border-color: transparent; }

.contact-form-card {
	background: var(--il-paper);
	border: 1px solid var(--il-border);
	border-radius: var(--il-radius-lg);
	box-shadow: var(--il-shadow);
	padding: 40px;
}
.contact-form-card h2 { font-size: 24px; margin-bottom: 8px; }
.contact-form-sub { color: var(--il-ink-soft); margin-bottom: 26px; }

/* Contact Form 7 field styling — generic CF7 markup, no plugin-side changes */
.contact-form-card .wpcf7-form p { margin-bottom: 18px; }
.contact-form-card .wpcf7-form label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 6px; }
.contact-form-card .wpcf7-form-control {
	width: 100%;
	padding: 13px 16px;
	border: 1px solid var(--il-border);
	border-radius: var(--il-radius-sm);
	font-size: 15px;
	font-family: var(--il-font-body);
	color: var(--il-ink);
	background: var(--il-paper-alt);
	transition: border-color 0.15s ease, background 0.15s ease;
}
.contact-form-card .wpcf7-form-control:focus {
	outline: none;
	border-color: var(--il-accent);
	background: var(--il-paper);
}
.contact-form-card textarea.wpcf7-form-control { min-height: 150px; resize: vertical; }
.contact-form-card input[type="submit"].wpcf7-form-control {
	width: auto;
	background: var(--il-accent);
	color: #fff;
	border: none;
	font-weight: 600;
	padding: 14px 32px;
	cursor: pointer;
	box-shadow: 0 8px 20px rgba(232, 54, 42, 0.28);
	transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.contact-form-card input[type="submit"].wpcf7-form-control:hover {
	background: var(--il-accent-dark);
	transform: translateY(-2px);
	box-shadow: 0 12px 26px rgba(232, 54, 42, 0.34);
}
.contact-form-card .wpcf7-not-valid-tip { color: var(--il-accent); font-size: 13px; margin-top: 4px; }
.contact-form-card .wpcf7-response-output {
	margin-top: 18px;
	padding: 12px 16px;
	border-radius: var(--il-radius-sm);
	font-size: 14px;
	border: 1px solid var(--il-border);
}
.contact-form-card form.sent .wpcf7-response-output { border-color: #2E7D32; color: #2E7D32; }
.contact-form-card form.invalid .wpcf7-response-output,
.contact-form-card form.failed .wpcf7-response-output { border-color: var(--il-accent); color: var(--il-accent); }
.contact-form-card .wpcf7-spinner { margin-left: 10px; }

/* ---------- About / Contact responsive ---------- */
@media (max-width: 960px) {
	.about-feature-grid { grid-template-columns: repeat(2, 1fr); }
	.commitment-grid { grid-template-columns: 1fr 1fr; }
	.pillar-grid { grid-template-columns: 1fr 1fr; }
	.approach-split { grid-template-columns: 1fr; gap: 28px; }
	.mission-vision-grid { grid-template-columns: 1fr; }
	.contact-layout { grid-template-columns: 1fr; }
	.contact-form-card { padding: 30px 24px; }
}

@media (max-width: 560px) {
	.about-feature-grid, .commitment-grid, .pillar-grid { grid-template-columns: 1fr; }
	.about-section { padding: 48px 0; }
	.about-cta h2 { font-size: 26px; }
	.mv-card { padding: 28px 24px; }
	.contact-form-card { padding: 24px 18px; }
}