/*
 * LFF public frontend — brand tokens, self-hosted font, and a few custom styles.
 * FlyonUI/Tailwind utilities do the heavy lifting; this only sets brand colours
 * and the couple of things utilities can't express cleanly.
 *
 * WCAG note (CLAUDE.md §9): #79B2E1 (blue) is too light for white text — use it
 * for fills/accents behind dark text. For primary CTAs we use a darkened brand
 * blue (#2f5c8a) so white label text passes AA. #7B6A58 (brown) passes for text.
 */

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('../fonts/Inter-Variable.woff2') format('woff2');
}

:root,
[data-theme='light'] {
	--color-primary: oklch(from #79B2E1 l c h);
	--color-primary-content: oklch(from #ffffff l c h);
	--color-secondary: oklch(from #7B6A58 l c h);
	--color-secondary-content: oklch(from #ffffff l c h);
}

/* Brand CTA button — darkened blue keeps white label text at AA contrast. */
.lff-cta {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	background-color: #2f5c8a;
	color: #fff;
	font-weight: 600;
	line-height: 1.2;
	padding: 0.8rem 1.6rem;
	border-radius: 9999px;
	text-decoration: none;
	border: 2px solid transparent;
	transition: background-color 0.15s ease, color 0.15s ease;
}
.lff-cta:hover,
.lff-cta:focus-visible { background-color: #244966; color: #fff; }

.lff-cta--ghost { background-color: transparent; color: #2f5c8a; border-color: #2f5c8a; }
.lff-cta--ghost:hover,
.lff-cta--ghost:focus-visible { background-color: #2f5c8a; color: #fff; }

/* White CTA for use on the brown (secondary) band — brown label on white passes AA. */
.lff-cta--light { background-color: #fff; color: #7B6A58; }
.lff-cta--light:hover,
.lff-cta--light:focus-visible { background-color: #f1ece6; color: #5f5246; }

/* Visible focus for keyboard users on all interactive frontend elements. */
.lff-front a:focus-visible,
.lff-front button:focus-visible,
.lff-cta:focus-visible {
	outline: 3px solid #2f5c8a;
	outline-offset: 2px;
}

/*
 * Content typography for the_content() (pages, posts, the privacy verklaring).
 * Element rules use :where() so they carry no specificity — component CSS such
 * as the member directory's own classes always wins.
 */
.lff-prose { color: var(--color-base-content); line-height: 1.7; }
.lff-prose :where(h1) { font-size: 2rem; font-weight: 700; margin: 1.5rem 0 0.75rem; }
.lff-prose :where(h2) { font-size: 1.5rem; font-weight: 600; margin: 1.75rem 0 0.5rem; }
.lff-prose :where(h3) { font-size: 1.25rem; font-weight: 600; margin: 1.5rem 0 0.5rem; }
.lff-prose :where(p) { margin: 0 0 1rem; }
.lff-prose :where(ul) { list-style: disc; margin: 0 0 1rem 1.25rem; }
.lff-prose :where(ol) { list-style: decimal; margin: 0 0 1rem 1.25rem; }
.lff-prose :where(li) { margin: 0.25rem 0; }
.lff-prose :where(a) { color: #2f5c8a; text-decoration: underline; }
.lff-prose :where(strong) { font-weight: 600; }
.lff-prose :where(table) { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: 0.95em; }
.lff-prose :where(th, td) { border: 1px solid #e3e0db; padding: 0.5rem 0.75rem; text-align: left; vertical-align: top; }
.lff-prose :where(th) { background: #f4f2ee; }
.lff-prose :where(blockquote) { border-left: 4px solid var(--color-primary); padding-left: 1rem; margin: 1rem 0; }

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