/*
Theme Name: Alt Text Meta
Theme URI: https://alttextmeta.com
Author: Seventy Four Ltd
Description: Marketing site theme for Alt Text Meta, matching the app's design system (Sora + Manrope, teal primary). The app itself stays on its own domain; set its address under Appearance → App connection.
Version: 1.0.2
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: alttextmeta
*/

/* Fonts are SIL OFL 1.1 (Manrope, Sora). */

:root {
	--atm-radius: var(--wp--custom--radius--lg, 0.75rem);
}

body { -webkit-font-smoothing: antialiased; }

:where(.wp-site-blocks) > * { margin-block-start: 0; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
.wp-element-button:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

/* ---------- Header ---------- */
.atm-header {
	position: sticky;
	top: 0;
	z-index: 30;
	background: rgba(252, 253, 255, 0.85);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--wp--preset--color--border);
}
.admin-bar .atm-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .atm-header { top: 46px; } }

.atm-header__inner { min-height: 4rem; }
.atm-logo img { height: 2rem; width: auto; display: block; }

.atm-header .wp-block-navigation a,
.atm-header .wp-block-navigation .wp-block-navigation-item__content {
	color: var(--wp--preset--color--muted-foreground);
	text-decoration: none;
	border-radius: 0.375rem;
	padding: 0.25rem 0.5rem;
}
.atm-header .wp-block-navigation .wp-block-navigation-item__content:hover,
.atm-header .wp-block-navigation a:hover,
.atm-header .wp-block-navigation .current-menu-item > a {
	color: var(--wp--preset--color--foreground);
}
.atm-header .wp-block-navigation__responsive-container.is-menu-open {
	padding: 1.5rem;
}
.atm-header .wp-block-navigation__responsive-container.is-menu-open a {
	font-size: 1rem;
	padding: 0.75rem 0.5rem;
}

/* ---------- Buttons ---------- */
.wp-element-button,
.wp-block-button__link { transition: background-color 0.15s ease, color 0.15s ease; text-decoration: none; }

.is-style-outline > .wp-block-button__link,
.wp-block-button__link.is-style-outline {
	background: var(--wp--preset--color--card);
	color: var(--wp--preset--color--foreground);
	border: 1px solid var(--wp--preset--color--border);
}
.is-style-outline > .wp-block-button__link:hover { background: var(--wp--preset--color--muted); color: var(--wp--preset--color--foreground); }

.atm-btn-small .wp-block-button__link { padding: 0.5rem 1rem; font-size: 0.875rem; }

/* On-primary buttons inside the CTA band */
.atm-cta .wp-block-button__link { background: var(--wp--preset--color--background); color: var(--wp--preset--color--foreground); }
.atm-cta .wp-block-button__link:hover { background: rgba(252, 253, 255, 0.9); }
.atm-cta .is-style-outline > .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--primary-foreground);
	border-color: rgba(252, 253, 255, 0.4);
}
.atm-cta .is-style-outline > .wp-block-button__link:hover { background: rgba(252, 253, 255, 0.1); }

/* ---------- Chips and eyebrows ---------- */
.atm-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; }
.atm-chip a,
.atm-chip {
	display: inline-block;
	border-radius: 9999px;
	background: var(--wp--preset--color--highlight);
	color: var(--wp--preset--color--foreground);
	padding: 0.25rem 0.75rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-decoration: none;
	line-height: 1.5;
}
.atm-chip a:hover { background: #fde27a; }

.atm-eyebrow {
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary);
}

.atm-highlight-word { color: var(--wp--preset--color--primary); }

/* ---------- Cards ---------- */
.atm-card {
	background: var(--wp--preset--color--card);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--2xl, 1.25rem);
	padding: 1.5rem;
}
.atm-card h3 { margin-top: 0; }
.atm-card p { margin-bottom: 0; }
.atm-card__bar {
	width: 2.5rem;
	height: 0.5rem;
	border-radius: 9999px;
	background: var(--wp--preset--color--primary);
	margin: 0 0 1rem;
}

.atm-stat {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 800;
	font-size: 2.25rem;
	line-height: 1.1;
	color: var(--wp--preset--color--primary);
	margin: 0;
}
.atm-step-number {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 800;
	font-size: 3rem;
	line-height: 1;
	color: rgba(2, 142, 166, 0.3);
	margin: 0;
}

/* ---------- Hero demo mockup ---------- */
.atm-demo { position: relative; }
.atm-demo__label { display: flex; justify-content: flex-end; margin-bottom: 0.5rem; }
.atm-demo__card {
	background: var(--wp--preset--color--card);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--2xl, 1.25rem);
	padding: 1.25rem;
	box-shadow: var(--wp--preset--shadow--card);
}
.atm-demo__tabs {
	display: inline-flex;
	background: var(--wp--preset--color--muted);
	border-radius: 0.5rem;
	padding: 0.25rem;
	font-size: 0.875rem;
	font-weight: 600;
	margin-bottom: 1rem;
}
.atm-demo__tabs span { padding: 0.375rem 1rem; border-radius: 0.375rem; color: var(--wp--preset--color--muted-foreground); }
.atm-demo__tabs span.is-active { background: var(--wp--preset--color--card); color: var(--wp--preset--color--foreground); box-shadow: 0 1px 2px rgba(17, 22, 31, 0.08); }
.atm-demo__image { border-radius: 0.75rem; overflow: hidden; display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; }
.atm-demo__fields { margin: 1rem 0 0; display: grid; gap: 0.625rem; }
.atm-demo__field {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 0.5rem;
	padding: 0.5rem 0.75rem;
	background: var(--wp--preset--color--background);
}
.atm-demo__field dt { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--wp--preset--color--muted-foreground); }
.atm-demo__field dd { margin: 0.125rem 0 0; font-size: 0.875rem; }
.atm-demo__note { margin: 0.75rem 0 0; text-align: center; font-size: 0.6875rem; color: var(--wp--preset--color--muted-foreground); }

/* ---------- Health check ---------- */
.atm-meter { display: flex; height: 0.75rem; overflow: hidden; border-radius: 9999px; background: var(--wp--preset--color--muted); margin: 0.75rem 0; }
.atm-meter__bad { background: var(--wp--preset--color--destructive); width: 32.6%; }
.atm-meter__good { background: var(--wp--preset--color--primary); width: 67.4%; }
.atm-inset {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 0.5rem;
	background: var(--wp--preset--color--background);
	padding: 1.25rem;
}
.atm-form { margin-top: 1.5rem; }
.atm-form label { font-weight: 600; display: block; }
.atm-form__hint { margin: 0.25rem 0 0.75rem; font-size: 0.875rem; color: var(--wp--preset--color--muted-foreground); }
.atm-form__row { display: flex; flex-direction: column; gap: 0.5rem; }
@media (min-width: 640px) { .atm-form__row { flex-direction: row; } }
.atm-input {
	width: 100%;
	box-sizing: border-box;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 0.5rem;
	background: var(--wp--preset--color--background);
	padding: 0.5rem 0.75rem;
	font: inherit;
	font-size: 0.875rem;
	color: var(--wp--preset--color--foreground);
}
.atm-submit {
	border: 0;
	border-radius: 0.5rem;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary-foreground);
	padding: 0.5rem 1rem;
	font: inherit;
	font-size: 0.875rem;
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
}
.atm-submit:hover { background: #0b7f93; }

/* ---------- Text helpers ---------- */
.atm-muted { color: var(--wp--preset--color--muted-foreground); }
.atm-small { font-size: 0.875rem; }
.atm-xs { font-size: 0.75rem; }
.atm-red { color: var(--wp--preset--color--destructive); font-weight: 600; }
.atm-teal { color: var(--wp--preset--color--primary); font-weight: 600; }

/* ---------- Footer ---------- */
.atm-footer a { color: var(--wp--preset--color--muted-foreground); text-decoration: none; }
.atm-footer a:hover { color: var(--wp--preset--color--foreground); }
.atm-footer__links { display: flex; flex-direction: column; gap: 0.5rem; list-style: none; padding: 0; margin: 0; font-size: 0.875rem; }
.atm-footer__legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.25rem 1rem; font-size: 0.75rem; color: var(--wp--preset--color--muted-foreground); }

/* ---------- Long-form pages (matches the app's prose-page) ---------- */
.atm-prose h2 { font-size: 1.6rem; margin-top: 2.5rem; margin-bottom: 0.75rem; }
.atm-prose h3 { font-size: 1.2rem; margin-top: 1.75rem; margin-bottom: 0.5rem; }
.atm-prose p,
.atm-prose li { color: var(--wp--preset--color--muted-foreground); line-height: 1.75; }
.atm-prose strong { color: var(--wp--preset--color--foreground); }
.atm-prose code { background: var(--wp--preset--color--muted); padding: 0.1rem 0.35rem; border-radius: 0.3rem; font-size: 0.9em; }

/* ---------- FAQ (details block) ---------- */
.wp-block-details {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 0.75rem;
	background: var(--wp--preset--color--card);
	padding: 1rem 1.25rem;
}
.wp-block-details summary { font-weight: 600; cursor: pointer; }
.wp-block-details[open] summary { margin-bottom: 0.5rem; }
.wp-block-details p { color: var(--wp--preset--color--muted-foreground); margin: 0; }

@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; animation: none !important; }
}

/* ---------- Responsive 3-column grids ---------- */
@media (max-width: 960px) {
	.atm-grid-3.is-layout-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 640px) {
	.atm-grid-3.is-layout-grid { grid-template-columns: minmax(0, 1fr) !important; }
}

/* ---------- Starter page sections ---------- */
.atm-prose .atm-section { margin-top: 2.5rem; }
.atm-prose .atm-section > * + * { margin-top: 1rem; }
.atm-prose .atm-card { margin-top: 1rem; }
.atm-prose .atm-card .wp-block-heading { margin-top: 0.25rem; margin-bottom: 0.5rem; }
.atm-prose .atm-grid-3 .atm-card { margin-top: 0; }
.atm-prose .atm-card p { margin-bottom: 0.5rem; }
.atm-prose .wp-block-table { margin-top: 1rem; overflow-x: auto; }
.atm-prose .wp-block-table table { border-collapse: collapse; width: 100%; font-size: 0.875rem; }
.atm-prose .wp-block-table th,
.atm-prose .wp-block-table td { border: 1px solid var(--wp--preset--color--border); padding: 0.75rem 1rem; text-align: left; color: var(--wp--preset--color--foreground); }
.atm-prose .wp-block-table thead { background: var(--wp--preset--color--muted); }
.atm-prose .wp-block-code { background: var(--wp--preset--color--muted); border: 1px solid var(--wp--preset--color--border); border-radius: 0.5rem; padding: 1rem; font-size: 0.8125rem; overflow-x: auto; }
.atm-prose .wp-block-buttons { margin-top: 1.25rem; }

/* ---------- Interactive demo (assets/js/demo.js) ---------- */
.atm-demo {
	--primary: #028ea6; --card: #ffffff; --muted-foreground: #5d646f; --accent-foreground: #006071;
	--highlight: #fbd530; --destructive: #e40016;
	--chart-teal: #009b8f; --chart-coral: #ef6856; --chart-violet: #7c54cd; --chart-amber: #f2a618;
	--chart-green: #409d48; --chart-pink: #e24ea0; --chart-navy: #234e82; --chart-sky: #43b2e1;
}
.atm-demo__bar { display: flex; flex-wrap: nowrap; align-items: center; gap: 0.5rem; margin-bottom: 1rem; }
.atm-demo__bar .atm-demo__tabs { margin-bottom: 0; flex-shrink: 0; }
.atm-demo__tabs button { border: 0; background: none; font: inherit; padding: 0.375rem 1rem; border-radius: 0.375rem; color: var(--wp--preset--color--muted-foreground); cursor: pointer; }
.atm-demo__tabs button.is-active { background: var(--wp--preset--color--card); color: var(--wp--preset--color--foreground); box-shadow: 0 1px 2px rgba(17, 22, 31, 0.08); }
.atm-demo__controls { margin-left: auto; display: flex; gap: 0.5rem; min-height: 2.25rem; align-items: center; }
.atm-demo__next,
.atm-demo__sr,
.atm-demo__pills button,
.atm-sr button {
	font: inherit; font-size: 0.875rem; font-weight: 600; cursor: pointer;
	border: 1px solid var(--wp--preset--color--border); background: var(--wp--preset--color--card);
	color: var(--wp--preset--color--foreground); border-radius: 0.5rem; padding: 0.375rem 0.75rem; white-space: nowrap;
}
.atm-demo__next:hover, .atm-demo__sr:hover, .atm-demo__pills button:hover { background: var(--wp--preset--color--muted); }
.atm-demo__next.is-primary { background: var(--wp--preset--color--primary); border-color: var(--wp--preset--color--primary); color: #fff; }
.atm-demo button:disabled { opacity: 0.5; cursor: not-allowed; }
.atm-demo__panels { display: grid; }
.atm-demo__panel { grid-area: 1 / 1; min-width: 0; }
.atm-demo__panel.is-hidden { visibility: hidden; }
.atm-demo__stage { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 0.75rem; background: var(--wp--preset--color--muted); }
.atm-demo__stage--chart { background: var(--wp--preset--color--card); border: 1px solid var(--wp--preset--color--border); margin-top: 0.75rem; color: var(--wp--preset--color--foreground); }
.atm-demo__stage img, .atm-demo__stage svg { display: block; width: 100%; height: 100%; object-fit: cover; }
.atm-demo__loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 0.875rem; color: var(--wp--preset--color--muted-foreground); }
.atm-demo__go {
	position: absolute; inset: 0; margin: auto; height: fit-content; width: fit-content;
	border: 0; border-radius: 9999px; background: var(--wp--preset--color--highlight); color: var(--wp--preset--color--foreground);
	padding: 0.75rem 1.5rem; font: inherit; font-size: 0.875rem; font-weight: 700; cursor: pointer;
	box-shadow: 0 10px 15px -3px rgba(17, 22, 31, 0.2), 0 0 0 4px rgba(252, 253, 255, 0.4); transition: transform 0.15s ease;
}
.atm-demo__go:hover { transform: scale(1.05); }
.atm-demo__working { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(252, 253, 255, 0.6); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.atm-demo__working span { border-radius: 9999px; background: var(--wp--preset--color--primary); color: #fff; padding: 0.5rem 1rem; font-size: 0.875rem; font-weight: 600; }
.atm-demo__error { position: absolute; left: 0.75rem; right: 0.75rem; bottom: 0.75rem; margin: 0; border: 1px solid rgba(228, 0, 22, 0.4); border-radius: 0.5rem; background: rgba(252, 253, 255, 0.9); color: var(--wp--preset--color--destructive); padding: 0.5rem 0.75rem; font-size: 0.875rem; }
.atm-demo__panel .atm-demo__fields { margin-top: 0.75rem; display: grid; gap: 0.5rem; font-size: 0.875rem; }
.atm-demo__panel .atm-demo__field { border: 0; border-radius: 0.5rem; background: var(--wp--preset--color--muted); padding: 0.375rem 0.75rem; }
.atm-demo__label-sm { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--wp--preset--color--primary); }
.atm-demo__value { line-height: 1.25rem; }
.atm-lines-1 { min-height: 1.25rem; } .atm-lines-2 { min-height: 2.5rem; } .atm-lines-3 { min-height: 3.75rem; }
.atm-demo__dash { color: rgba(93, 100, 111, 0.6); }
.atm-demo__pair { display: grid; gap: 0.5rem; }
@media (min-width: 640px) { .atm-demo__pair { grid-template-columns: 1fr 1fr; } }
.atm-demo__sr { justify-self: start; }
.atm-demo__pills { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.atm-demo__pills button { border-radius: 9999px; padding: 0.125rem 0.625rem; font-size: 0.75rem; }
.atm-demo__pills button[aria-pressed="true"] { background: var(--wp--preset--color--primary); border-color: var(--wp--preset--color--primary); color: #fff; }
.atm-demo__more { border: 1px dashed var(--wp--preset--color--border); border-radius: 9999px; padding: 0.125rem 0.625rem; font-size: 0.75rem; font-weight: 600; color: var(--wp--preset--color--muted-foreground); }
.atm-demo__table { min-height: 9.5rem; border-radius: 0.5rem; background: var(--wp--preset--color--muted); padding: 0.5rem 0.75rem; }
.atm-demo__table-empty { margin-top: 0.25rem; height: 7.5rem; display: flex; align-items: center; justify-content: center; border: 1px dashed var(--wp--preset--color--border); border-radius: 0.375rem; text-align: center; font-size: 0.75rem; color: var(--wp--preset--color--muted-foreground); padding: 0 1rem; }
.atm-demo__table-grid { margin-top: 0.25rem; display: grid; gap: 0.75rem; }
@media (min-width: 640px) { .atm-demo__table-grid { grid-template-columns: 1fr auto; } }
.atm-demo__table-scroll { height: 7.5rem; overflow: auto; padding-right: 0.25rem; }
.atm-demo__table table { width: 100%; border-collapse: collapse; text-align: left; font-size: 0.75rem; }
.atm-demo__table thead th { position: sticky; top: 0; background: var(--wp--preset--color--muted); border-bottom: 1px solid var(--wp--preset--color--border); padding-bottom: 0.125rem; font-weight: 600; }
.atm-demo__table tbody th { font-weight: 500; }
.atm-demo__table .num { text-align: right; font-variant-numeric: tabular-nums; }
.atm-demo__insights { margin: 0; padding-left: 1rem; font-size: 0.75rem; color: var(--wp--preset--color--muted-foreground); }
@media (min-width: 640px) { .atm-demo__insights { max-width: 11rem; } }
.atm-demo__foot { margin: 0.75rem 0 0; font-size: 0.75rem; color: var(--wp--preset--color--muted-foreground); }

/* Screen reader preview dialog */
.atm-sr { width: min(32rem, calc(100vw - 2rem)); border: 1px solid var(--wp--preset--color--border); border-radius: 0.75rem; padding: 1.5rem; color: var(--wp--preset--color--foreground); background: var(--wp--preset--color--card); }
.atm-sr::backdrop { background: rgba(17, 22, 31, 0.5); }
.atm-sr__head { display: flex; align-items: center; justify-content: space-between; }
.atm-sr__head h2 { font-size: 1.125rem; margin: 0; }
.atm-sr__close { border: 0 !important; font-size: 1.25rem !important; padding: 0 0.5rem !important; }
.atm-sr__desc { font-size: 0.875rem; color: var(--wp--preset--color--muted-foreground); margin: 0.5rem 0 1rem; }
.atm-sr__controls { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.atm-sr .atm-sr__play { background: var(--wp--preset--color--primary); border-color: var(--wp--preset--color--primary); color: #fff; padding: 0.5rem 1rem; }
.atm-sr__rates { display: inline-flex; background: var(--wp--preset--color--muted); border-radius: 0.5rem; padding: 0.25rem; }
.atm-sr__rates button { border: 0 !important; background: none !important; font-size: 0.75rem !important; padding: 0.25rem 0.625rem !important; }
.atm-sr__rates button[aria-pressed="true"] { background: var(--wp--preset--color--card) !important; box-shadow: 0 1px 2px rgba(17, 22, 31, 0.1); }
.atm-sr__copy { margin-left: auto; font-size: 0.75rem !important; }
.atm-sr__list { list-style: none; margin: 1rem 0 0; padding: 0.5rem; max-height: 20rem; overflow: auto; border-radius: 0.5rem; background: var(--wp--preset--color--muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.75rem; }
.atm-sr__list button { display: block; width: 100%; text-align: left; border: 0 !important; background: none !important; font: inherit !important; font-weight: 400 !important; padding: 0.25rem 0.5rem !important; white-space: normal !important; }
.atm-sr__list button:hover { background: var(--wp--preset--color--card) !important; }
.atm-sr__list button.is-active { background: var(--wp--preset--color--highlight) !important; }
.atm-sr__kind { margin-right: 0.5rem; font-weight: 600; color: var(--wp--preset--color--primary); }
.atm-sr__note { margin: 0.75rem 0 0; font-size: 0.6875rem; color: var(--wp--preset--color--muted-foreground); }
.atm-prose .atm-teal { color: var(--wp--preset--color--primary); }
.atm-prose .atm-eyebrow { color: var(--wp--preset--color--primary); }