/*
Theme Name: Famaway Lite
Description: Minimal theme for famaway.app. Same header, footer and look as the homepage; everything else comes from the Famaway Portal plugin.
Version: 1.0.1
Requires at least: 6.3
Requires PHP: 7.4
Author: Famaway
License: GPL-2.0-or-later
Text Domain: famaway-lite
*/

body.fw-theme {
	--cream: #F7F5ED; --stone: #E9E6DD; --ink: #14213D; --blue: #1461FC; --blue-text: #1461FC; --mute: #5B6475;
	margin: 0;
	background: var(--cream);
	color: var(--ink);
	font: 400 16px/1.6 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
@media (prefers-color-scheme: dark) {
	body.fw-theme { --cream: #101624; --stone: #1A2236; --ink: #EEF0F6; --mute: #9AA3B5; --blue-text: #6D9BFF; }
}
body.fw-theme * { box-sizing: border-box; }

.fw-skip { position: absolute; left: -9999px; }
.fw-skip:focus { left: 16px; top: 16px; z-index: 1000; background: #fff; color: #14213D; padding: 8px 12px; }

/* header/footer reuse the homepage classes (assets/home.css in the plugin); this keeps them flush */
.fw-site-header, .fw-site-footer { background: var(--cream); }
.fw-site-header { border-bottom: 1px solid var(--stone); }
.fw-site-header .fw-navlinks a.fw-login { color: var(--blue-text); font-weight: 600; }
@media (max-width: 760px) {
	.fw-home .fw-navlinks a.fw-login { display: inline-block; margin-left: 12px; }
}

/* content */
.fw-main { max-width: 760px; margin: 0 auto; padding: 56px 20px 88px; }
.fw-main--wide { max-width: 1120px; }
.fw-main h1, .fw-main h2, .fw-main h3 { font-family: Georgia, 'Times New Roman', serif; font-weight: 400; line-height: 1.15; letter-spacing: -.01em; color: var(--ink); }
.fw-main h1 { font-size: clamp(34px, 5vw, 52px); margin: 0 0 24px; }
.fw-main h2 { font-size: clamp(24px, 3vw, 32px); margin: 40px 0 12px; }
.fw-main h3 { font-size: 21px; margin: 28px 0 8px; }
.fw-main p, .fw-main ul, .fw-main ol { margin: 0 0 16px; }
.fw-main ul, .fw-main ol { padding-left: 24px; }
.fw-main li { margin: 4px 0; }
.fw-main a { color: var(--blue-text); }
.fw-main hr { border: 0; border-top: 1px solid var(--stone); margin: 40px 0; }
.fw-main img { max-width: 100%; height: auto; }
.fw-main blockquote, .fw-main .wp-block-quote { margin: 24px 0; padding: 14px 20px; border-left: 3px solid var(--blue); background: var(--stone); }
.fw-main table { border-collapse: collapse; width: 100%; margin: 0 0 16px; }
.fw-main th, .fw-main td { border: 1px solid var(--stone); padding: 8px 10px; text-align: left; }
.fw-main .wp-block-button__link { background: var(--blue); color: #fff; border-radius: 999px; padding: 12px 22px; text-decoration: none; }

/* member dashboard: let the portal set its own width */
.fw-main--app { max-width: 920px; }
.fw-main--app .fwp { --fwp-accent: #1461FC; --fwp-ink: var(--ink); --fwp-muted: var(--mute); --fwp-line: var(--stone); }
@media (prefers-color-scheme: dark) {
	.fw-main--app .fwp { --fwp-bg: #1A2236; --fwp-soft: #1A2236; }
}

/* 404 */
.fw-404 { text-align: center; padding-top: 96px; }
.fw-404 .fw-btn { display: inline-block; background: var(--blue); color: #fff; text-decoration: none; padding: 13px 24px; border-radius: 999px; font-weight: 600; margin-top: 12px; }

@media (max-width: 760px) {
	.fw-site-footer .fw-foot a:first-child { margin-left: 0; padding-left: 0; }
}

/* Old Privacy page markup (.fam-privacy-root) brings fixed dark colours; make it follow the theme, incl. dark mode */
.fw-main .fam-privacy-root { max-width: none; padding: 0; color: var(--ink); font-family: inherit; }
.fw-main .fam-privacy-root h1, .fw-main .fam-privacy-root h2, .fw-main .fam-privacy-root h3 { color: var(--ink); font-family: Georgia, 'Times New Roman', serif; font-weight: 400; }
.fw-main .fam-privacy-root h1 { font-size: clamp(34px, 5vw, 52px); }
.fw-main .fam-privacy-root p, .fw-main .fam-privacy-root li, .fw-main .fam-privacy-root td, .fw-main .fam-privacy-root th, .fw-main .fam-privacy-root strong { color: var(--ink); }
.fw-main .fam-privacy-root .fam-meta { color: var(--mute); }
.fw-main .fam-privacy-root a { color: var(--blue-text); }
.fw-main .fam-privacy-root .fam-callout { background: var(--stone); border-left-color: var(--blue); }