/* ==========================================================================
   base.css — reset + page-level base (uses tokens.css variables)
   Scoped under .adacorn-page so it can never affect the client's other pages.
   ========================================================================== */

.adacorn-page *,
.adacorn-page *::before,
.adacorn-page *::after {
	box-sizing: border-box;
}

/* Neutralize browser/theme defaults inside our page (self-contained reset). */
.adacorn-page h1, .adacorn-page h2, .adacorn-page h3,
.adacorn-page h4, .adacorn-page h5, .adacorn-page h6,
.adacorn-page p, .adacorn-page figure, .adacorn-page blockquote {
	margin: 0;
}

/* Type system: headings + big display numbers use the Inter *variable* face;
   paragraph / body copy stays on Inter (via --ada-font on .adacorn-page). */
.adacorn-page h1, .adacorn-page h2, .adacorn-page h3,
.adacorn-page h4, .adacorn-page h5, .adacorn-page h6,
.adacorn-page .ada-plan__amt,
.adacorn-page .ada-statcard__num {
	font-family: var(--ada-font-display);
	font-optical-sizing: auto;
}

.adacorn-page ul, .adacorn-page ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

.adacorn-page button {
	font-family: inherit;
	line-height: inherit;
}

.adacorn-page {
	margin: 0;
	background: var(--ada-bg);
	color: var(--ada-fg);
	font-family: var(--ada-font);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	transition: background-color 0.2s ease, color 0.2s ease;
}

/* Note: no blanket height:auto here — it out-specifies component image sizes
   like .ada-avatars / .ada-logo-img. Responsive images set their own height. */
.adacorn-page img {
	max-width: 100%;
	display: block;
}

/* No blanket link color — each component sets its own, so nothing bleeds green.
   (A bare .adacorn-page a rule with a color would out-specify single-class
   component rules like .ada-cbadge / .ada-cta and override them.) */
.adacorn-page a {
	text-decoration: none;
}

.adacorn-main {
	min-height: 40vh;
	/* Contain any section's horizontal overflow so it can't stretch the page
	   (which on mobile pushed the sticky nav's right-side items off-screen).
	   The header/footer live outside .adacorn-main, so their sticky/position
	   behavior is unaffected. */
	overflow-x: clip;
}

/* ==========================================================================
   Light/dark asset swap — pairs of <img> tagged .ada-only-light / .ada-only-dark
   (logo, HIW illustration). Only the matching theme's image is shown. Default
   = light; the OS preference and the in-page [data-theme] toggle both win.
   ========================================================================== */
.adacorn-page .ada-only-light { display: block; }
.adacorn-page .ada-only-dark  { display: none; }

@media (prefers-color-scheme: dark) {
	.adacorn-page .ada-only-light { display: none; }
	.adacorn-page .ada-only-dark  { display: block; }
}

/* Explicit toggle overrides the OS preference in both directions. */
:root[data-theme="light"] .ada-only-light { display: block; }
:root[data-theme="light"] .ada-only-dark  { display: none; }
:root[data-theme="dark"]  .ada-only-light { display: none; }
:root[data-theme="dark"]  .ada-only-dark  { display: block; }

/* Visually-hidden (accessible) labels */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	white-space: nowrap;
	border: 0;
}

/* Shared container helper */
.adacorn-header__inner,
.adacorn-footer__inner,
.adacorn-hero__inner {
	width: 100%;
	max-width: var(--ada-container);
	margin-inline: auto;
	padding-inline: var(--ada-space-3);
}

/* Buttons */
.adacorn-btn {
	display: inline-block;
	padding: var(--ada-space-2) var(--ada-space-4);
	background: var(--ada-primary);
	color: var(--ada-primary-fg);
	border-radius: var(--ada-radius);
	font-weight: 600;
}

.adacorn-btn:hover {
	background: var(--ada-primary-hover);
	color: var(--ada-primary-fg);
}

/* Example hero (placeholder — restyle from Figma) */
.adacorn-hero {
	padding-block: var(--ada-space-6);
	background: var(--ada-surface);
	text-align: center;
}

.adacorn-hero__title {
	margin: 0 0 var(--ada-space-3);
	font-size: clamp(2rem, 5vw, 3.25rem);
	line-height: 1.15;
}

.adacorn-hero__lead {
	margin: 0 0 var(--ada-space-4);
	color: var(--ada-muted);
	font-size: 1.125rem;
}

/* ==========================================================================
   Section break — faint 766px rule with the atomic icon centered (between
   sections, per the Figma).
   ========================================================================== */
.ada-sbreak {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
	width: 100%;
	max-width: 766px;
	margin-block: clamp( 16px, 2.5vw, 30px );
	margin-inline: auto;
	padding-inline: var(--ada-space-3);
}
.ada-sbreak__line { flex: 1 1 auto; height: 1px; background: var(--ada-divider); }
.ada-sbreak__icon { flex: none; width: 20px; height: 20px; }

/* ---- Media switcher (per-step / per-tab image or video) -----------------
   All panels share one grid cell, so the box keeps the tallest panel's
   height and switching never makes the page jump; shorter media is centred.
   Inactive panels fade out. */
.ada-mswitch { display: grid; }
.ada-mswitch__panel {
	grid-area: 1 / 1;
	align-self: center;
	min-width: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.35s ease, visibility 0s linear 0.35s;
}
.ada-mswitch__panel.is-active {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.35s ease;
}
.ada-mswitch video { display: block; width: 100%; height: auto; object-fit: cover; }
@media (prefers-reduced-motion: reduce) {
	.ada-mswitch__panel,
	.ada-mswitch__panel.is-active { transition: none; }
}