/*
Theme Name: Listicle Engine Theme
Theme URI: https://example.com/listicle-engine-theme
Author: Listicle Engine
Description: A fast, JS-light theme purpose-built for law firm "Top N Lawyers" listicle sites. Pairs with the Listicle Engine plugin, which owns the data (listicles, firms, AI generation, schema) — this theme owns the site shell, homepage, and typography/visual system. Works standalone too (falls back gracefully if the plugin isn't active).
Version: 1.1.0
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: listicle-engine-theme
*/

/* ==========================================================================
   Design tokens — "Verdict": warm parchment ground, forest-green accent,
   brass-gold for rank numerals, bold serif display. Single source of
   truth for color/type across the theme — the companion plugin's
   frontend.css uses matching literal values for its own components
   (firm cards, FAQ, etc.) so the two always look like one system
   without the plugin needing to depend on the theme being active.
   ========================================================================== */

:root {
	--let-color-primary: #1f4d3a;
	--let-color-primary-dark: #16382a;
	--let-color-gold: #a67c2e;
	--let-color-ink: #241d12;
	--let-color-body: #40371f;
	--let-color-muted: #6b5f47;
	--let-color-border: #d9cbab;
	--let-color-surface: #f6f1e6;
	--let-color-surface-alt: #ece3d0;
	--let-color-success-bg: #e8f0ea;
	--let-color-success-ink: #1f4d3a;
	--let-color-warn-bg: #f6ecd2;
	--let-color-warn-ink: #8a5a00;

	--let-font-sans: "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--let-font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;

	--let-radius: 0px;
	--let-max-width: 1120px;
}

/* Source Serif 4 (display/rank numerals) + Work Sans (body/UI) are
   loaded once in header.php via Google Fonts — the one webfont
   dependency this theme takes on, deliberately, because no system
   font stand-in reads as "Verdict"'s bold editorial serif. Both are
   loaded with font-display: swap so text is never invisible while
   they load. */

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

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

body {
	margin: 0;
	font-family: var(--let-font-sans);
	color: var(--let-color-body);
	background: var(--let-color-surface-alt);
	line-height: 1.5;
}

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

a { color: var(--let-color-primary); }
a:hover { color: var(--let-color-primary-dark); }

h1, h2, h3, h4 { font-family: var(--let-font-serif); color: var(--let-color-ink); line-height: 1.15; font-weight: 700; margin: 0 0 .6em; text-wrap: balance; }
h1 { font-size: clamp(1.9rem, 1.5rem + 1.5vw, 2.75rem); }
h2 { font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.9rem); }
h3 { font-size: 1.2rem; }

.let-container { max-width: var(--let-max-width); margin: 0 auto; padding: 0 1.25rem; }

/* Standard WordPress screen-reader-only utility — several core
   template tags (comment_form, the_posts_pagination, etc.) and the
   companion plugin's markup assume the active theme provides this. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}
.screen-reader-text.skip-link {
	clip: auto !important;
	clip-path: none;
	height: auto;
	width: auto;
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--let-color-ink);
	color: #fdf9ef;
	padding: .75rem 1rem;
	z-index: 1000;
}
.screen-reader-text.skip-link:focus {
	left: 1rem;
	top: 1rem;
}

/* ---- Site header ---- */
.let-site-header {
	border-bottom: 2px solid var(--let-color-ink);
	background: var(--let-color-surface-alt);
	padding: 1.1rem 0;
}
.let-site-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.let-site-branding { display: flex; align-items: center; gap: .6rem; text-decoration: none; }
.let-site-branding img { max-height: 40px; width: auto; }
.let-site-title { font-family: var(--let-font-serif); font-size: 1.3rem; font-weight: 700; color: var(--let-color-ink); margin: 0; }
.let-site-tagline { font-size: .8rem; color: var(--let-color-muted); margin: 0; }

.let-primary-nav ul { list-style: none; display: flex; flex-wrap: wrap; gap: 1.5rem; margin: 0; padding: 0; }
.let-primary-nav a { text-decoration: none; color: var(--let-color-ink); font-weight: 600; font-size: .88rem; text-transform: uppercase; letter-spacing: .03em; }
.let-primary-nav a:hover { color: var(--let-color-primary); }

/* ---- Mobile nav toggle (progressive enhancement: the checkbox input
   is the state, so the menu still opens with CSS-only if JS is ever
   stripped; functions.php just wires up the label's aria-expanded). ---- */
.let-nav-toggle { display: none; }
.let-nav-toggle-label {
	display: none;
	align-items: center;
	justify-content: center;
	width: 2.4rem;
	height: 2.4rem;
	border: 1.5px solid var(--let-color-ink);
	cursor: pointer;
	background: transparent;
}
.let-nav-toggle-label .bar,
.let-nav-toggle-label .bar::before,
.let-nav-toggle-label .bar::after {
	display: block;
	width: 1.1rem;
	height: 2px;
	background: var(--let-color-ink);
	position: relative;
}
.let-nav-toggle-label .bar::before { content: ""; position: absolute; top: -6px; }
.let-nav-toggle-label .bar::after { content: ""; position: absolute; top: 6px; }

/* ---- Homepage ---- */
.let-hero {
	background: var(--let-color-surface-alt);
	padding: 3.5rem 0;
	text-align: center;
}
.let-hero .let-kicker { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--let-color-primary); margin: 0 0 .9rem; }
.let-hero p.let-hero-sub { max-width: 640px; margin: 0 auto 1.5rem; font-size: 1.1rem; color: var(--let-color-muted); }
.let-hero-trust-strip { display: flex; justify-content: center; flex-wrap: wrap; gap: .5rem 1.5rem; margin-top: 1.5rem; font-size: .85rem; color: var(--let-color-muted); }
.let-hero-trust-strip li { list-style: none; display: inline-flex; align-items: center; gap: .35rem; }

.let-section { padding: 3rem 0; }
.let-section-alt { background: var(--let-color-surface); }
.let-section-head { text-align: center; max-width: 640px; margin: 0 auto 2rem; }
.let-section-head p { color: var(--let-color-muted); }

.let-browse-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; }
.let-browse-card {
	display: block;
	padding: 1.25rem 1rem;
	border: 1px solid var(--let-color-border);
	border-left: 4px solid var(--let-color-primary);
	text-decoration: none;
	color: var(--let-color-ink);
	background: var(--let-color-surface);
	transition: border-left-color .15s ease, transform .15s ease;
}
.let-browse-card:hover { border-left-color: var(--let-color-gold); transform: translateX(2px); }
.let-browse-card strong { display: block; font-family: var(--let-font-serif); font-weight: 700; font-size: 1.1rem; margin-bottom: .25rem; color: var(--let-color-ink); }
.let-browse-card span { font-size: .8rem; color: var(--let-color-muted); }

.let-eeat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.5rem; margin-top: 2rem; }
.let-eeat-item { padding: 1.5rem; background: var(--let-color-surface); border: 1px solid var(--let-color-border); }
.let-eeat-item h3 { font-size: 1.05rem; margin-bottom: .4rem; }
.let-eeat-item p { font-size: .9rem; color: var(--let-color-muted); margin: 0; }

.let-listicle-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.5rem; }
.let-listicle-tile { border: 1px solid var(--let-color-border); overflow: hidden; background: var(--let-color-surface); }
.let-listicle-tile a { text-decoration: none; color: inherit; display: block; }
.let-listicle-tile .let-tile-body { padding: 1rem; }
.let-listicle-tile h3 { font-size: 1.1rem; margin: 0 0 .35rem; }
.let-listicle-tile p { font-size: .85rem; color: var(--let-color-muted); margin: 0; }
.let-tile-meta { font-size: .75rem; color: var(--let-color-muted); margin-top: .5rem; }

.let-cta-banner {
	background: var(--let-color-ink);
	color: #fdf9ef;
	text-align: center;
	padding: 3rem 1rem;
	margin: 0 1.25rem;
}
.let-cta-banner h2 { color: #fdf9ef; }
.let-cta-banner p { color: #cbc1a8; max-width: 560px; margin: 0 auto 1.5rem; }

/* Real buttons — filled primary / outlined secondary, never a bare
   underlined link standing in for a call to action. */
.let-btn {
	display: inline-block;
	padding: .7rem 1.4rem;
	font-family: var(--let-font-sans);
	font-weight: 600;
	font-size: .92rem;
	text-decoration: none;
	background: var(--let-color-primary);
	border: 1.5px solid var(--let-color-primary);
	color: #fdf9ef;
}
.let-btn:hover { background: var(--let-color-primary-dark); border-color: var(--let-color-primary-dark); color: #fdf9ef; }
.let-btn-outline { background: transparent; border: 1.5px solid #fdf9ef; color: #fdf9ef; }
.let-btn-outline:hover { background: rgba(253, 249, 239, .1); color: #fdf9ef; }

/* ---- Footer ---- */
.let-site-footer { border-top: 2px solid var(--let-color-ink); padding: 3rem 0 2rem; margin-top: 3rem; background: var(--let-color-surface-alt); }
.let-footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 2rem; margin-bottom: 2rem; }
.let-footer-grid h4 { font-family: var(--let-font-sans); font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--let-color-muted); margin-bottom: .75rem; }
.let-footer-grid ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.let-footer-grid a { color: var(--let-color-body); text-decoration: none; font-size: .9rem; }
.let-footer-grid a:hover { color: var(--let-color-primary); }

.let-footer-social a { display: inline-flex; align-items: center; gap: .55rem; }
.let-footer-social svg { flex-shrink: 0; color: var(--let-color-muted); transition: color .15s ease; }
.let-footer-social a:hover svg { color: var(--let-color-primary); }
.let-footer-disclaimer { font-size: .78rem; color: var(--let-color-muted); border-top: 1px solid var(--let-color-border); padding-top: 1.5rem; }
.let-footer-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; font-size: .8rem; color: var(--let-color-muted); }

/* ---- Generic content templates (page/single/404/archive fallbacks) ---- */
.let-page-content, .let-single-content { max-width: 760px; margin: 0 auto; padding: 2.5rem 1.25rem; }
.let-page-content h1, .let-single-content h1 { margin-bottom: 1rem; }
.let-404 { text-align: center; padding: 4rem 1.25rem; }

@media (max-width: 640px) {
	.let-site-header-inner { flex-wrap: nowrap; }
	.let-nav-toggle-label { display: inline-flex; }
	.let-primary-nav {
		flex-basis: 100%;
		order: 3;
		max-height: 0;
		overflow: hidden;
		transition: max-height .2s ease;
	}
	.let-nav-toggle:checked ~ .let-primary-nav { max-height: 20rem; }
	.let-primary-nav ul { flex-direction: column; gap: 0; padding-top: 1rem; }
	.let-primary-nav li { border-top: 1px solid var(--let-color-border); }
	.let-primary-nav a { display: block; padding: .75rem 0; }
	.let-cta-banner { margin: 0 1rem; }
}