/* Cold Email Critic — loaded after assets/css/ax.css (the house CMS stylesheet, kept
   unmodified so it can be diffed against upstream). Two parts:
   1. --ax-* token values: navy / coral / teal-grey palette from theme/*.html, light + dark.
   2. Site chrome: navy header and brand mark from the same mockup, Inter instead of
      ax.css's Archivo / Source Serif 4.
   Light tokens are scoped :root:not([data-theme='dark']) — a bare :root here would tie
   ax.css's [data-theme='dark'] block on specificity and, loading later, mask dark mode
   (bug found on bookbinding 2026-09-21). */

/* Inter, self-hosted (SEO audit 2026-09-26: no Google Fonts request). Variable weight 100-900, Fontsource
   @fontsource-variable/inter 5.3.0 files, SIL Open Font License: assets/fonts/Inter-OFL.txt. latin-ext only
   downloads when such characters appear (e.g. accented names in a pasted email). */
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-display: swap;
	font-weight: 100 900;
	src: url('assets/fonts/inter-latin-ext-wght-normal.woff2') format('woff2-variations');
	unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-display: swap;
	font-weight: 100 900;
	src: url('assets/fonts/inter-latin-wght-normal.woff2') format('woff2-variations');
	unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root:not([data-theme='dark']) {
	--ax-bg: #f3f5f4;
	--ax-surface: #ffffff;
	--ax-surface-2: #eff4f2;
	--ax-ink: #142338;
	--ax-ink-2: #415762;
	--ax-ink-3: #5c6f77;
	--ax-line: #dce3e3;
	--ax-line-strong: #c7d3d4;
	--ax-accent: #eb765b;
	--ax-accent-text: #b24a33;
	--ax-accent-soft: #fdf0ec;
	--ax-on-accent: #182332;
	--ax-on-accent-2: #101c2a;
	--ax-shadow: 0 16px 45px rgba(20, 35, 56, 0.06);
}

[data-theme='dark'] {
	--ax-bg: #0b141e;
	--ax-surface: #121f2d;
	--ax-surface-2: #172636;
	--ax-ink: #e6eef0;
	--ax-ink-2: #b7c7ce;
	--ax-ink-3: #8a9ba3;
	--ax-line: #24364a;
	--ax-line-strong: #2c4054;
	--ax-accent: #eb765b;
	--ax-accent-text: #f1957b;
	--ax-accent-soft: #3a2320;
	--ax-on-accent: #182332;
	--ax-on-accent-2: #101c2a;
	--ax-shadow: 0 16px 45px rgba(0, 0, 0, 0.35);
}

/* Site-only values ax.css has no token for (header is navy in both modes) */
:root {
	--cec-navy: #101c2a;
	--cec-navy-line: #304253;
	--cec-on-navy: #ffffff;
	--cec-on-navy-2: #b7c7ce;
	--cec-coral: #eb765b;
}

body {
	margin: 0; /* ax.css leaves the UA 8px margin; the navy header must be full-bleed */
}
main a:not(.button),
.cookie-banner a {
	color: var(--ax-accent-text);
	text-underline-offset: 2px;
}
.cookie-settings-trigger {
	border: 1px solid var(--ax-line-strong);
	background: var(--ax-surface);
	color: var(--ax-ink-2);
	border-radius: 100px;
	padding: 6px 12px;
	font-size: 13px;
}

/* Fonts: Inter everywhere, no serif accent (the mockup uses coral for emphasis instead) */
body,
.testimonial-quote,
.process-step-number,
.hero-heading-accent,
.cta-banner-heading-accent {
	font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.hero-heading-accent,
.cta-banner-heading-accent {
	font-style: normal;
	color: var(--ax-accent-text);
}

.button {
	border-radius: 9px;
	font-weight: 800;
}
.button-primary {
	box-shadow: 0 4px 0 #bd5c47;
}

/* ── Header (navy bar from the mockup) ── */
.topnav {
	background: var(--cec-navy);
	border-bottom: 1px solid var(--cec-navy-line);
}
.topnav-inner {
	max-width: 1440px;
	padding: 0 32px;
	height: 76px;
}
.topnav .brand {
	color: var(--cec-on-navy);
	font-size: 21px;
	font-weight: 800;
	letter-spacing: -0.04em;
	gap: 11px;
}
.topnav .brand::after,
.site-footer .brand::after {
	content: '.';
	color: var(--cec-coral);
	margin-left: -11px; /* cancel the flex gap so the dot sits on the wordmark */
}
.brand-logo {
	width: 35px;
	height: 35px;
}
.topnav .navmenu {
	gap: 26px;
	font-size: 14px;
}
.topnav .navmenu a {
	color: var(--cec-on-navy-2);
	padding: 4px 0;
	border-bottom: 1px solid transparent;
}
.topnav .navmenu a:hover,
.topnav .navmenu a[aria-current='page'] {
	color: var(--cec-on-navy);
	border-bottom-color: var(--cec-coral);
}
.topnav .theme-toggle {
	background: transparent;
	border: 1px solid var(--cec-navy-line);
	border-radius: 100px;
	width: 40px;
	height: 40px;
}
.topnav .theme-toggle:hover {
	background: #1a2a3b;
}
.topnav .theme-toggle-icon {
	color: #e5f4f4;
}
.topnav-toggle {
	background: transparent;
	border-color: var(--cec-navy-line);
	border-radius: 9px;
}
.topnav-toggle-icon,
.topnav-toggle-icon::before,
.topnav-toggle-icon::after {
	background: var(--cec-on-navy);
}
a:focus-visible,
button:focus-visible {
	outline: 3px solid #f2967b;
	outline-offset: 3px;
}

@media (max-width: 780px) {
	.topnav-inner {
		padding: 0 16px;
		height: 66px;
	}
	.topnav .brand {
		font-size: 18px;
	}
	.topnav-right {
		top: 66px;
		background: var(--cec-navy);
		border-bottom: 1px solid var(--cec-navy-line);
		padding: 16px;
	}
	.topnav-right .navmenu {
		flex-direction: column;
		align-items: flex-start;
		gap: 6px;
		font-size: 16px;
	}
}

/* ── Footer ── */
.site-footer {
	background: var(--ax-surface-2);
}
.site-footer .brand {
	font-size: 19px;
	font-weight: 800;
	letter-spacing: -0.04em;
	gap: 11px;
}
.site-footer-grid,
.site-footer-bottom {
	max-width: 1440px;
	padding-left: 32px;
	padding-right: 32px;
}
.site-footer .navmenu a:hover {
	color: var(--ax-accent-text);
}
/* Blog column uses a plain <a> (not a navmenu), so give it the same footer-link look */
.site-footer-blog a {
	color: var(--ax-ink-2);
	text-decoration: none;
	font-size: 15px;
	line-height: 1.5;
	display: block;
	margin-bottom: 6px;
}
.site-footer-blog a:hover {
	color: var(--ax-accent-text);
}
@media (max-width: 600px) {
	.site-footer-grid,
	.site-footer-bottom {
		padding-left: 16px;
		padding-right: 16px;
	}
}

/* ── Content pages (step 5): readable prose for legal pages, About, FAQ, blog posts ── */
.prose { max-width: 760px; font-size: 16px; line-height: 1.7; color: var(--ax-ink-2); }
.prose h2 { font-size: 22px; line-height: 1.3; letter-spacing: -0.02em; color: var(--ax-ink); margin: 40px 0 12px; }
.prose h3 { font-size: 18px; color: var(--ax-ink); margin: 28px 0 8px; }
.prose p, .prose ul, .prose ol { margin: 0 0 16px; }
.prose ul, .prose ol { padding-left: 22px; }
.prose li { margin-bottom: 6px; }
.prose strong { color: var(--ax-ink); }
.prose img { max-width: 100%; height: auto; }
.legal-title { font-size: clamp(32px, 4vw, 44px); letter-spacing: -0.04em; margin: 0 0 20px; color: var(--ax-ink); }
.legal-draft-note { background: var(--ax-accent-soft); border-left: 3px solid var(--ax-accent); padding: 12px 16px; border-radius: 0 8px 8px 0; }
mark.placeholder { background: #fff3c4; color: #6b4d00; font-size: 12px; font-weight: 700; padding: 1px 6px; border-radius: 4px; white-space: nowrap; }
[data-theme='dark'] mark.placeholder { background: #4a3a0c; color: #ffe08a; }
.legal-table { width: 100%; border-collapse: collapse; font-size: 14px; margin: 8px 0 20px; display: block; overflow-x: auto; }
.legal-table th, .legal-table td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--ax-line); }
.legal-table th { color: var(--ax-ink); font-weight: 700; white-space: nowrap; }
#ax-consent-log-table { border-collapse: collapse; font-size: 14px; }
#ax-consent-log-table th, #ax-consent-log-table td { padding: 8px 12px; border-bottom: 1px solid var(--ax-line); text-align: left; }

/* FAQ accordion */
.accordion-item { border-top: 1px solid var(--ax-line); padding: 18px 0; }
.accordion-question { font-size: 17px; color: var(--ax-ink); }
.accordion-answer { color: var(--ax-ink-2); margin: 12px 0 0; }

/* Contact */
.contact-layout { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(260px, .7fr); gap: 40px; align-items: start; }
.contact-panel { background: var(--ax-surface); border: 1px solid var(--ax-line); border-radius: 17px; padding: 28px; box-shadow: var(--ax-shadow); }
.contact-aside p { color: var(--ax-ink-2); line-height: 1.6; margin: 0 0 18px; }
.contact-aside .site-footer-label { margin-bottom: 6px; }
.form-success { background: var(--ax-accent-soft); border-left: 3px solid var(--ax-accent); padding: 16px 18px; border-radius: 0 8px 8px 0; }
.form-success p { margin: 0 0 6px; }
.form-field input, .form-field textarea, .form-field select { border-radius: 9px; border-color: var(--ax-line-strong); background: var(--ax-bg); color: var(--ax-ink); font: inherit; }
@media (max-width: 800px) { .contact-layout { grid-template-columns: 1fr; } }

/* Blog post */
.prose-page { max-width: 820px; padding-top: 44px; }
.back-link a { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ax-ink-3); text-decoration: none; }
.post-single-title { font-size: clamp(32px, 4.4vw, 48px); line-height: 1.1; letter-spacing: -0.04em; color: var(--ax-ink); margin: 12px 0 10px; }
.post-single-meta { color: var(--ax-ink-3); font-size: 14px; margin: 0 0 32px; }
.post-single-related { margin-top: 56px; border-top: 1px solid var(--ax-line); padding-top: 28px; }
.post-single-related h2 { font-size: 20px; color: var(--ax-ink); }
/* ax.css gives .button display:inline-block, which beats the [hidden] attribute (house CMS lesson 2026-09-16); hidden must win */
[hidden] { display: none !important; }
.contact-panel .form-field input, .contact-panel .form-field textarea, .contact-panel .form-field select { width: 100%; max-width: none; }
/* Blog list cards: rounded like the theme's panels; "Read more" at its natural width */
.post-list .card { border-radius: 17px; box-shadow: var(--ax-shadow); }
.post-list .card .button { align-self: flex-start; width: auto; }