/*
 * FerventMind App Support: the plugin's pages, inside Minimal Fervent Theme's content column.
 *
 * Text, background and hairlines come from the theme's --fervent-* tokens (with fallbacks, so the
 * pages still read under another theme); the accent and navy are FerventMind's own, from the
 * app's asset catalog. Light and dark follow the visitor's system, as the theme does.
 * Never an <h1> (the theme prints the page title); every grid is auto-fit, so the pages work from
 * 320px up. Check light and dark, at desktop width and ~375px, after any change here.
 */

.fma {
	--fma-accent: #2c398c;
	--fma-navy: #1f2655;
	--fma-text: var(--fervent-text, #1d1d1f);
	--fma-muted: color-mix(in srgb, var(--fma-text) 68%, transparent);
	--fma-border: var(--fervent-border, #e0e0df);
	--fma-subtle: var(--fervent-bg-subtle, #f6f6f8);
	--fma-card: var(--fervent-bg-elevated, #fff);
	--fma-radius: 14px;
	color: var(--fma-text);
	max-width: 46rem;
	/* Flush left under the theme's page title; the landing page (no title) centres instead. */
	margin-inline: 0;
	line-height: 1.6;
}

@media (prefers-color-scheme: dark) {
	.fma {
		--fma-accent: #8e9cf6;
		--fma-subtle: var(--fervent-bg-subtle, #2c2c30);
		--fma-card: var(--fervent-bg-elevated, #232326);
		--fma-border: var(--fervent-border, #3a3a3e);
	}
}

.fma.fma-wide,
.fma-wide .fma { max-width: 72rem; margin-inline: auto; }
/* The theme's Minimal template has no gutter; the landing page brings its own. */
.fma.fma-wide { padding-inline: clamp(16px, 3vw, 24px); box-sizing: content-box; }

.fma a { color: var(--fma-accent); text-underline-offset: 0.15em; }
.fma a:hover { text-decoration-thickness: 2px; }
.fma :focus-visible { outline: 2px solid var(--fma-accent); outline-offset: 2px; border-radius: 4px; }

/* Section bar */
.fma-chrome { margin-bottom: 1.75rem; }
.fma-nav ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem;
	list-style: none;
	margin: 0;
	padding: 0;
}
.fma .fma-nav a {
	display: inline-block;
	padding: 0.35rem 0.85rem;
	border: 1px solid var(--fma-border);
	border-radius: 999px;
	color: var(--fma-text);
	font-size: 0.9375rem;
	text-decoration: none;
}
.fma .fma-nav a:hover { background: var(--fma-subtle); }
.fma .fma-nav .is-current a {
	background: var(--fma-accent);
	border-color: var(--fma-accent);
	color: #fff;
}
@media (prefers-color-scheme: dark) {
	.fma .fma-nav .is-current a { color: #12152e; }
}
.fma .fma-breadcrumb { margin: 0.9rem 0 0; font-size: 0.9375rem; }

/* Text */
.fma-lede { font-size: 1.1875rem; color: var(--fma-muted); margin: 0 0 1.5rem; }
.fma h2, .fma .fma-heading { margin: 2rem 0 0.6rem; line-height: 1.25; }
.fma h3 { margin: 1.5rem 0 0.4rem; }
.fma p { margin: 0 0 1rem; }
.fma ul.fma-bullets { margin: 0 0 1rem; padding-left: 1.25rem; }
.fma ul.fma-bullets li { margin: 0.3rem 0; }
.fma ul.fma-bullets li::marker { color: var(--fma-accent); }
.fma-next { margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid var(--fma-border); }
.fma-error { padding: 1rem; border: 1px solid #c33; border-radius: var(--fma-radius); }

/* Cards: documentation topics, videos, features */
.fma ul.fma-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: 0.75rem;
	list-style: none;
	margin: 0 0 1rem;
	padding: 0;
}
.fma ul.fma-cards--list { grid-template-columns: 1fr; }
.fma ul.fma-cards > li {
	background: var(--fma-card);
	border: 1px solid var(--fma-border);
	border-radius: var(--fma-radius);
	padding: 0.9rem 1rem;
}
.fma ul.fma-cards > li > a { font-weight: 600; text-decoration: none; }
.fma ul.fma-cards > li > p { margin: 0.25rem 0 0; color: var(--fma-muted); font-size: 0.9375rem; }
.fma-group h2 { font-size: 1.25rem; }

/* Landing page */
.fma-hero {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 1.5rem;
	align-items: center;
	padding: clamp(1.5rem, 4vw, 3rem);
	border-radius: 24px;
	background: linear-gradient(160deg, var(--fma-navy), #2a3473);
	color: #fff;
}
.fma-hero img { width: clamp(72px, 12vw, 128px); height: auto; border-radius: 22%; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); }
.fma .fma-hero h2 { margin: 0 0 0.4rem; font-size: clamp(1.75rem, 4vw, 2.75rem); color: #fff; }
.fma-hero p { margin: 0 0 1rem; font-size: 1.125rem; color: rgba(255, 255, 255, 0.86); }
.fma .fma-hero a { color: #fff; }
.fma-buttons { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.fma .fma-button {
	display: inline-block;
	padding: 0.6rem 1.15rem;
	border-radius: 999px;
	background: #fff;
	color: var(--fma-navy);
	font-weight: 600;
	text-decoration: none;
}
.fma .fma-button--quiet { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, 0.55); }
.fma-soon { display: inline-block; padding: 0.6rem 0; font-weight: 600; }
@media (max-width: 560px) {
	.fma-hero { grid-template-columns: 1fr; text-align: left; }
}

.fma-features { margin-top: 2.5rem; }
.fma-features h3 { margin: 0 0 0.25rem; font-size: 1.0625rem; }

/* Screenshots: a Mac window, then a strip of phone and iPad shots; tap to enlarge */
.fma-shots { margin-top: 2.5rem; }
.fma-shots__mac img { width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--fma-border); }
.fma-shots__strip {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
	gap: 0.75rem;
	margin: 1rem 0 0;
	padding: 0;
	list-style: none;
}
.fma-shots__strip img { width: 100%; height: auto; border-radius: 18px; border: 1px solid var(--fma-border); }
/* iPad: four to a row on a wide screen, two on a phone; the screen's corners are rounder than a Mac
   window's and squarer than an iPhone's. */
.fma-shots__strip--ipad { grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
.fma-shots__strip--ipad img { border-radius: 10px; }
.fma-shots figcaption { color: var(--fma-muted); font-size: 0.875rem; margin-top: 0.35rem; }
.fma-shots__toggle { margin-top: 0.75rem; font: inherit; font-size: 0.9375rem; padding: 0.3rem 0.8rem; border-radius: 999px; border: 1px solid var(--fma-border); background: var(--fma-card); color: var(--fma-text); cursor: pointer; }
dialog.fma-lightbox { max-width: min(96vw, 1400px); max-height: 94vh; padding: 0; border: 0; border-radius: 14px; background: transparent; }
dialog.fma-lightbox::backdrop { background: rgba(0, 0, 0, 0.75); }
dialog.fma-lightbox img { display: block; max-width: 100%; max-height: 94vh; height: auto; border-radius: 14px; }

/* Legal and support pages */
.fma-legal h2 { font-size: 1.1875rem; }
.fma-updated { color: var(--fma-muted); font-size: 0.9375rem; }
.fma-contact { padding: 1rem 1.1rem; border-radius: var(--fma-radius); background: var(--fma-subtle); }
.fma-features ul.fma-cards { grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); }
.fma-chrome.fma-wide { padding-top: 1rem; }