/*
 * Always On features: shared styles (loaded only when odm_always_on_render() prints
 * something, see inc/always-on/class-always-on-render.php). Scoped to .odm-ao so it
 * cannot leak. Plain CSS, no Tailwind compile step, same pattern as fast-track.css
 * and build-wizard.css. Mobile-first (min-width only), logical properties only so
 * Hebrew RTL mirrors, tokens fall back to the theme's own custom properties.
 *
 * Cards carry their own white surface and dark ink, so they read the same on a
 * light page and inside a dark band.
 *
 * Motion follows the Fast Track system (fast-track.css, "motion (section 9)"):
 * same easing and keyframe style, only under prefers-reduced-motion: no-preference,
 * hover lift only where hover exists, and everything off under html.odm-a11y-pause
 * (the accessibility widget's "Pause animations") and prefers-reduced-motion: reduce.
 * Follow-up: the reveal/rise keyframes duplicate fast-track.css; fold both into one
 * shared motion stylesheet when Fast Track is next touched.
 */

.odm-ao {
	--ao-accent: var(--color-brand-600, #4f46e5);
	--ao-accent-soft: var(--color-brand-50, #eef2ff);
	--ao-ink: #17142e;
	--ao-muted: #4a4666;
	--ao-border: #e2ddf0;
	--ao-surface: #fff;
	--ao-dot: #1f9d62;
	color: var(--ao-ink);
}

.odm-ao__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 48rem) {
	.odm-ao__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
}

.odm-ao__card {
	display: flex; flex-direction: column; align-items: flex-start; gap: 0.75rem;
	min-width: 0; padding: clamp(1.25rem, 5vw, 1.75rem);
	border: 1px solid var(--ao-border); border-radius: 1.25rem; background: var(--ao-surface);
	box-shadow: 0 1px 2px rgba(23, 20, 46, .06);
	overflow-wrap: anywhere;
}
.odm-ao--compact .odm-ao__card { gap: 0.5rem; padding: 1.1rem 1.25rem; border-radius: 1rem; }

.odm-ao__icon {
	display: inline-flex; align-items: center; justify-content: center;
	inline-size: 3rem; block-size: 3rem; border-radius: 0.85rem;
	background: var(--ao-accent-soft); color: var(--ao-accent); font-size: 1.25rem;
}
.odm-ao__logo { display: block; max-inline-size: 11rem; block-size: auto; }

.odm-ao__pill {
	display: inline-flex; align-items: center; gap: 0.5rem; margin: 0;
	padding: 0.3rem 0.8rem; border-radius: 999px;
	background: var(--ao-accent-soft); color: var(--ao-accent);
	font-size: 0.8rem; font-weight: 600; letter-spacing: 0.02em;
}
.odm-ao__dot { inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--ao-dot); flex-shrink: 0; }

.odm-ao__name { margin: 0; font-family: var(--font-display, inherit); font-weight: 700; font-size: 1.35rem; line-height: 1.2; color: var(--ao-ink); }
.odm-ao--compact .odm-ao__name { font-size: 1.1rem; }
.odm-ao__tagline { margin: 0; color: var(--ao-muted); font-size: 1rem; line-height: 1.5; }

.odm-ao__chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.odm-ao__chip { padding: 0.2rem 0.65rem; border: 1px solid var(--ao-border); border-radius: 999px; background: #f5f3fa; font-size: 0.8rem; font-weight: 600; color: var(--ao-ink); }

.odm-ao__caps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.95rem; line-height: 1.45; color: var(--ao-muted); }
.odm-ao__caps strong { color: var(--ao-ink); }

.odm-ao__included { margin: 0; padding: 0.25rem 0.7rem; border-radius: 0.5rem; background: #ecfdf3; color: #14532d; font-size: 0.85rem; font-weight: 600; }
.odm-ao__worth { margin: 0; font-size: 0.9rem; color: var(--ao-muted); }

.odm-ao__link {
	display: inline-flex; align-items: center; gap: 0.5rem; min-block-size: 44px; margin-block-start: auto;
	color: var(--ao-accent); font-weight: 600; text-decoration: underline; text-underline-offset: 4px;
}
.odm-ao__link-icon { font-size: 0.75rem; }
.odm-ao__link:focus-visible {
	outline: 3px solid var(--ao-accent); outline-offset: 2px;
	/* inner white ring keeps the focus indicator visible on any surface */
	box-shadow: 0 0 0 2px #fff;
	border-radius: 0.25rem;
}

/* Visually hidden, still read by assistive tech. */
.odm-ao__sr {
	position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; padding: 0; overflow: hidden;
	clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* badge: one inline line, readable on any background */
.odm-ao--badge {
	display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.4rem; margin: 0;
	padding: 0.3rem 0.7rem; border-radius: 0.6rem; background: var(--ao-accent-soft); color: var(--ao-ink);
	font-size: 0.8rem; line-height: 1.35;
}
.odm-ao__badge-lead { font-weight: 600; color: var(--ao-accent); }
.odm-ao__badge-word { color: var(--ao-muted); }
.odm-ao__badge-plus { color: var(--ao-muted); }

/* ---------- motion (same system as fast-track.css section 9) ---------- */
@media (prefers-reduced-motion: no-preference) {
	/* Two cycles (4.8s), then still: an endless decorative pulse is a SC 2.2.2 problem. */
	.odm-ao__dot { animation: odm-ao-pulse 2.4s ease-in-out 2; }
	@keyframes odm-ao-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .55; transform: scale(1.35); } }
	.odm-ao__card { transition: transform .28s cubic-bezier(.2,.7,.2,1), box-shadow .28s ease; }
	@keyframes odm-ao-rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
	@supports (animation-timeline: view()) {
		.odm-ao-reveal { animation: odm-ao-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 45%; }
	}
}
/* Hover lift only where hover exists: on touch it sticks after a tap. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.odm-ao__card:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(22, 18, 58, .12); }
}
@media (prefers-reduced-motion: reduce) {
	.odm-ao *, .odm-ao *::before, .odm-ao *::after { animation: none !important; transition: none !important; }
	.odm-ao-reveal { opacity: 1 !important; transform: none !important; }
}
html.odm-a11y-pause .odm-ao *, html.odm-a11y-pause .odm-ao *::before, html.odm-a11y-pause .odm-ao *::after { animation: none !important; transition: none !important; }
html.odm-a11y-pause .odm-ao-reveal { opacity: 1 !important; transform: none !important; }


/* ---------- Phase 3 page integration (front-page.php, single-service.php, archive-service.php) ---------- */
/* Anchor target clears the sticky site header (the hero chip links to #always-on). */
.odm-ao-section { scroll-margin-top: 6rem; }
/* The hero chip is a link: give it a comfortable target and a visible focus ring. */
.odm-ao-herochip { min-height: 2.75rem; padding-inline: 1rem; text-decoration: none; }
.odm-ao-herochip:hover { background: #e0e7ff; }
.odm-ao-herochip:focus-visible { outline: 3px solid #4338ca; outline-offset: 3px; }
/* Plan names inside the footnote. */
.odm-ao-plan-link { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.odm-ao-plan-link:focus-visible { outline: 3px solid #4338ca; outline-offset: 2px; border-radius: 2px; }
/* W11-012: the ring sits on the page background, which the Dark and High contrast themes turn near-black
   (#4338ca was 2.2 to 2.7:1 there). Pale ring in Dark, white in High: both clear 3:1 on those backgrounds. */
html[data-odm-a11y-contrast="dark"] :is(.odm-ao-herochip, .odm-ao-plan-link):focus-visible { outline-color: #c7d2fe; }
html[data-odm-a11y-contrast="high"] :is(.odm-ao-herochip, .odm-ao-plan-link):focus-visible { outline-color: #fff; }
/* Badge inside a clickable service card: sits under the price row, never wider than the card. */
.odm-card .odm-ao--badge { max-width: 100%; }
/* The CTA arrow mirrors in right-to-left locales (no rtl: utility is compiled into theme.css). */
[dir="rtl"] .odm-ao-cta-arrow { transform: scaleX(-1); }