/* Anagram Scrabble MTC front-end styles.
   Design tokens mirror theme.json; declared here as CSS custom properties so
   non-block markup (solver widget, ad slots, etc.) can consume them. */

:root {
	/* Surfaces */
	--color-ink: #141822;
	--color-slate: #1E2333;
	--color-cream: #F4EEDF;
	--color-paper: #FBF7EC;
	/* Accents */
	--color-amber: #D68A2E;
	--color-ember: #B47121;
	/* Semantic */
	--color-sage: #4A8560;
	--color-rust: #B95A3A;
	/* Text */
	--color-bone: #F5EFE0;
	--color-coal: #0E1119;
	--color-ash: #7A8296;
	/* Hairlines */
	--color-dust: #28303F;
	--color-sand: #E4DBC6;

	--font-display: 'Fraunces', Georgia, serif;
	--font-body: 'Inter', system-ui, -apple-system, sans-serif;
	--font-mono: 'JetBrains Mono', 'Courier New', monospace;

	--space-1: 0.5rem;
	--space-2: 1rem;
	--space-3: 1.5rem;
	--space-4: 2rem;
	--space-6: 3rem;
	--space-8: 4rem;
	--space-12: 6rem;

	--radius-sm: 4px;
	--radius-md: 8px;
	--radius-lg: 12px;
	--radius-pill: 999px;

	--container: 80rem;
	--content: 45rem;
	--focus-ring: 0 0 0 2px var(--color-cream), 0 0 0 4px var(--color-amber);
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-family: var(--font-body); background: var(--color-cream); color: var(--color-coal); }
a { color: var(--color-amber); text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: var(--color-ember); }

.skip-link {
	position: absolute; left: -9999px; top: 0; background: var(--color-amber); color: var(--color-coal);
	padding: 0.75rem 1rem; z-index: 999; font-weight: 600;
}
.skip-link:focus { left: 0; }

.visually-hidden {
	position: absolute !important; height: 1px; width: 1px; overflow: hidden;
	clip: rect(1px,1px,1px,1px); white-space: nowrap;
}

/* ---------- Header ---------- */
.site-header {
	background: var(--color-ink); color: var(--color-bone);
	position: sticky; top: 0; z-index: 40;
}
.site-header__inner {
	max-width: var(--container); margin: 0 auto; padding: 0 1.5rem;
	display: flex; align-items: center; gap: 1.5rem; height: 72px;
}
.site-header__nav { display: flex; gap: 1.25rem; margin-left: auto; }
.site-header__nav a { color: var(--color-bone); text-decoration: none; font-weight: 500; }
.site-header__nav a:hover { color: var(--color-amber); }
.site-header__cta {
	background: var(--color-amber); color: var(--color-coal); font-weight: 600;
	padding: 0.5rem 1rem; border-radius: var(--radius-md); text-decoration: none;
}
.site-header__cta:hover { background: var(--color-ember); color: var(--color-bone); }

.wordmark { font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; color: var(--color-bone); text-decoration: none; }
.wordmark__accent { color: var(--color-amber); }

@media (max-width: 720px) {
	.site-header__nav { display: none; }
	.site-header__inner { height: 56px; }
}

/* ---------- Hero bands ---------- */
.hero {
	padding: clamp(3rem, 8vw, 6rem) 1.5rem;
	text-align: center;
}
.hero--cream { background: var(--color-cream); color: var(--color-coal); }
.hero--ink { background: var(--color-ink); color: var(--color-bone); }
.hero__eyebrow { font-family: var(--font-body); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.875rem; color: var(--color-ash); }
.hero--ink .hero__eyebrow { color: var(--color-amber); }
.hero__title { font-family: var(--font-display); font-weight: 800; line-height: 1.05; font-size: clamp(2.5rem, 6vw, 5.5rem); margin: 0.5rem auto 1rem; max-width: 20ch; }
.hero__sub { font-size: 1.25rem; line-height: 1.5; max-width: 45rem; margin: 0 auto 1.5rem; }
.hero--ink .hero__sub { color: var(--color-bone); }

.trust-strip { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; margin-top: 1.5rem; }
.trust-strip__pill { background: var(--color-slate); color: var(--color-bone); padding: 0.5rem 1rem; border-radius: var(--radius-pill); font-size: 0.875rem; }
.trust-strip__pill::before { content: "\2713 "; color: var(--color-amber); font-weight: 700; }

/* ---------- Sections ---------- */
.section { padding: clamp(3rem, 6vw, 5rem) 1.5rem; }
.section--paper { background: var(--color-paper); }
.section--ink { background: var(--color-ink); color: var(--color-bone); }
.section__inner { max-width: var(--container); margin: 0 auto; }
.section__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(2rem, 4vw, 3rem); margin: 0 0 2rem; }
.section--ink .section__title { color: var(--color-bone); }

/* ---------- Cards / grids ---------- */
.grid { display: grid; gap: 1.5rem; }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px) { .grid--4, .grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .grid--4, .grid--3, .grid--2 { grid-template-columns: 1fr; } }

.card {
	background: var(--color-paper); border: 1px solid var(--color-sand);
	border-radius: var(--radius-md); padding: 1.5rem;
	transition: transform 150ms ease-out;
}
.card:hover { transform: translateY(-2px); }
.section--ink .card { background: var(--color-slate); border-color: var(--color-dust); color: var(--color-bone); }
.card__eyebrow { font-family: var(--font-body); text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.75rem; font-weight: 600; color: var(--color-amber); }
.card__title { font-family: var(--font-display); font-weight: 700; font-size: 1.375rem; margin: 0.5rem 0 0.75rem; }
.card__body { font-size: 1rem; line-height: 1.6; margin: 0 0 1rem; }
.card__cta { color: var(--color-amber); font-weight: 600; text-decoration: none; }
.card__cta::after { content: " \2192"; }
.card__cta:hover { text-decoration: underline; }

/* ---------- Solver widget ---------- */
.solver-widget {
	max-width: 720px; margin: 0 auto; padding: 0 1.5rem;
	display: flex; flex-direction: column; gap: 1rem;
}
.solver-widget__input-row { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.solver-widget__input {
	flex: 1; min-width: 220px; height: 56px;
	font-family: var(--font-display); font-weight: 700; font-size: 1.5rem;
	letter-spacing: 0.08em; text-transform: uppercase;
	padding: 0 1rem; border: 2px solid var(--color-dust); border-radius: var(--radius-md);
	background: var(--color-paper); color: var(--color-coal);
}
.solver-widget__input:focus { outline: none; box-shadow: var(--focus-ring); }
.solver-widget__submit {
	height: 56px; min-width: 200px;
	background: var(--color-amber); color: var(--color-coal);
	border: none; border-radius: var(--radius-md);
	font-family: var(--font-body); font-weight: 600; font-size: 1rem;
	cursor: pointer; padding: 0 1.5rem;
	transition: background 100ms ease-out;
}
.solver-widget__submit:hover { background: var(--color-ember); color: var(--color-bone); }
.solver-widget__filters-row { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: end; }
.solver-widget__filters-row label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.875rem; font-weight: 600; color: var(--color-coal); }
.solver-widget__filters-row select,
.solver-widget__filters-row input {
	height: 40px; padding: 0 0.75rem; border: 1px solid var(--color-sand); border-radius: var(--radius-sm);
	background: var(--color-paper); font-family: var(--font-body); font-size: 0.9375rem;
}
.solver-widget__dictionary-toggle {
	display: flex; flex-wrap: wrap; gap: 1rem; align-items: center;
	border: 1px solid var(--color-sand); border-radius: var(--radius-md); padding: 0.75rem 1rem;
	background: var(--color-paper);
}
.solver-widget__dictionary-toggle legend { font-weight: 600; padding: 0 0.5rem; }
.solver-widget__dictionary-toggle label { display: inline-flex; gap: 0.25rem; align-items: center; font-size: 0.9375rem; }

.solver-results {
	max-width: 1080px; margin: 2rem auto 0; padding: 0 1.5rem;
}
.solver-results__heading { font-family: var(--font-display); font-weight: 700; font-size: 1.75rem; margin: 0 0 0.5rem; }
.solver-results__count { color: var(--color-ash); margin: 0 0 1rem; }
.solver-results__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.solver-results__item {
	display: flex; align-items: center; gap: 0.75rem;
	padding: 0.625rem 0.875rem; background: var(--color-paper);
	border: 1px solid var(--color-sand); border-radius: var(--radius-sm);
}
.solver-results__item .word { font-family: var(--font-display); font-weight: 600; font-size: 1.125rem; color: var(--color-coal); }
.solver-results__item .score { font-family: var(--font-mono); color: var(--color-ash); font-size: 0.875rem; margin-left: auto; }
.solver-results__grouped { margin-top: 1.5rem; }
.solver-results__group-heading { font-family: var(--font-display); font-weight: 600; font-size: 1.125rem; margin: 1.25rem 0 0.5rem; color: var(--color-coal); }
.solver-results__empty-state { padding: 1.5rem; background: var(--color-paper); border-radius: var(--radius-md); text-align: center; color: var(--color-ash); }

/* ---------- Word count strip ---------- */
.word-count-strip { display: flex; gap: 0.75rem; align-items: baseline; justify-content: center; margin: 1rem 0; }
.word-count-strip__count { font-family: var(--font-display); font-weight: 700; color: var(--color-amber); font-size: 2rem; }
.word-count-strip__label { font-size: 0.9375rem; color: var(--color-coal); }

/* ---------- Dictionary flag pill ---------- */
.flag { display: inline-flex; align-items: center; gap: 0.25rem; font-family: var(--font-body); font-weight: 600; font-size: 0.75rem; padding: 0.125rem 0.5rem; border: 1px solid var(--color-amber); border-radius: var(--radius-pill); text-transform: uppercase; letter-spacing: 0.04em; }
.flag--valid { color: var(--color-sage); border-color: var(--color-sage); }
.flag--valid::after { content: " \2713"; }
.flag--invalid { color: var(--color-rust); border-color: var(--color-rust); }
.flag--invalid::after { content: " \2717"; }

/* ---------- Ad slots (pre-sized to prevent CLS) ---------- */
.ad-slot {
	background: var(--color-paper); border: 1px dashed var(--color-sand);
	display: flex; align-items: center; justify-content: center;
	color: var(--color-ash); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase;
	margin: 2rem auto; max-width: 100%;
}
.ad-slot::before { content: "advertisement"; }
.ad-slot--hero-below { min-height: 90px; max-width: 728px; }
@media (max-width: 720px) { .ad-slot--hero-below { min-height: 250px; max-width: 300px; } }
.ad-slot--in-content-1, .ad-slot--in-content-2 { min-height: 250px; max-width: 300px; }
.ad-slot--sidebar { min-height: 600px; max-width: 300px; }
@media (max-width: 900px) { .ad-slot--sidebar { display: none; } }
.ad-slot--sticky-mobile { display: none; }
@media (max-width: 720px) { .ad-slot--sticky-mobile { display: flex; min-height: 50px; max-width: 320px; position: sticky; bottom: 0; z-index: 30; margin: 0 auto; } }

/* ---------- Trademark disclosure ---------- */
.trademark-disclosure {
	background: var(--color-cream);
	padding: 3rem 1.5rem;
	color: var(--color-ash); font-size: 0.875rem; line-height: 1.6;
	text-align: center; max-width: 60rem; margin: 0 auto;
}
.trademark-disclosure a { color: var(--color-amber); }

/* ---------- Footer ---------- */
.site-footer {
	background: var(--color-ink); color: var(--color-bone);
	padding: 4rem 1.5rem 2rem;
}
.site-footer__inner { max-width: var(--container); margin: 0 auto; }
.site-footer__cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; margin-bottom: 3rem; }
@media (max-width: 720px) { .site-footer__cols { grid-template-columns: repeat(2, 1fr); } }
.site-footer__col h4 { font-family: var(--font-display); font-weight: 600; font-size: 1rem; margin: 0 0 1rem; color: var(--color-bone); }
.site-footer__col ul { list-style: none; padding: 0; margin: 0; }
.site-footer__col li { margin-bottom: 0.5rem; }
.site-footer__col a { color: var(--color-ash); text-decoration: none; font-size: 0.9375rem; }
.site-footer__col a:hover { color: var(--color-amber); }
.site-footer__hairline { height: 1px; background: var(--color-dust); margin: 0 0 1.5rem; }
.site-footer__hairline--amber { background: var(--color-amber); }
.site-footer__legal { color: var(--color-ash); font-size: 0.8125rem; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; }

/* ---------- Body copy on Paper ---------- */
.prose { max-width: var(--content); margin: 0 auto; padding: 0 1.5rem; }
.prose p { font-size: 1.0625rem; line-height: 1.7; margin: 0 0 1.25rem; }
.prose h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.75rem, 3vw, 2.25rem); margin: 2.5rem 0 1rem; }
.prose h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.375rem; margin: 2rem 0 0.75rem; }
.prose ol, .prose ul { padding-left: 1.5rem; margin: 0 0 1.5rem; }
.prose li { margin-bottom: 0.5rem; line-height: 1.65; }
.prose code, .prose kbd { font-family: var(--font-mono); background: var(--color-paper); padding: 0.125rem 0.375rem; border-radius: var(--radius-sm); font-size: 0.9em; }

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