/**
 * AI Photo Restoration landing page
 *
 * Three background bands. The page's own tone is --bg-900 and carries most of
 * the sections; the "Built for the Photos You Can't Take Again" band is the one
 * step up to --bg-800; and the ON1 Guarantee band that partials/footer.php
 * appends is the light section.
 *
 * The hero and #restore-today are the exception: both sit on the same dark
 * photographic plate, so they are pinned data-theme="dark" in the markup and
 * set their own colors here. Pinning the attribute alone is not enough - the
 * copy inside inherits `color` from body, which still resolves from the live
 * theme - so every text rule in those two bands is explicit.
 *
 * @copyright   2026, ON1
 */

/* !- Buttons
   House sizing, same as the blog index. */
#site-main .btn {
	font-size: var(--text-sm);
	padding: 0.75rem 1.25rem;
}

/* !- Section rhythm
   .section-intro's spacing comes from base.css. */
#site-main > section {
	padding: 4.5rem 0;
}

/* !- Hero */
#hero {
	background: url(https://ononesoft.cachefly.net/images/home/v2/hero-slides/RestoreAI-bg-20260319@2x.jpg) center bottom no-repeat;
	background-size: cover;
	padding: 5rem 0 !important;
}

#hero h2,
#hero .hero-edition {
	color: var(--white);
}

#hero h2 {
	font-size: var(--text-4xl);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.12;
	text-wrap: balance;
}

#hero .hero-rule {
	background: linear-gradient(to right, rgba(255, 170, 59, 1), rgba(255, 205, 68, 0));
	border: none;
	height: 0.625rem;
	margin: 1.5rem 0;
	opacity: 1;
}

#hero .hero-edition {
	font-size: var(--text-2xl);
	font-weight: 400;
	margin-bottom: 2rem;
}

#hero .hero-edition .edition-max {
	color: #ffcd44;
	font-weight: 900;
}

#hero .hero-icon {
	margin-bottom: 2rem;
}

#hero .hero-sub {
	color: var(--white);
	font-size: var(--text-lg);
	font-weight: 500;
	line-height: 1.4;
	margin-bottom: 0;
	margin-top: 1.5rem;
}

@media (min-width: 992px) {
	#hero h2 {
		font-size: var(--text-6xl);
	}
}

/* !- Intro
   Size and weight come from base.css, same as every other page. */
#intro h1 {
	margin-bottom: 1.5rem;
	text-wrap: balance;
}

/* !- Section headings */
#site-main section h2 {
	text-wrap: balance;
}

/* !- Restore AI tabs */
#restore-ai .nav-link {
	border: 2px solid transparent;
	border-radius: 1rem;
	color: var(--text-300);
	margin-bottom: 0.75rem;
	padding: 1rem;
	text-align: left;
}

#restore-ai .nav-link:last-child {
	margin-bottom: 0;
}

#restore-ai .nav-link:hover,
#restore-ai .nav-link:focus {
	color: var(--text-50);
}

#restore-ai .nav-link.active {
	background: var(--bg-800);
	border-color: var(--blue-500);
	color: var(--text-50);
}

#restore-ai .nav-link .panel-title {
	font-size: var(--text-base);
	margin-bottom: 0;
}

#restore-ai .nav-link.active .panel-title {
	font-weight: 900;
	margin-bottom: 0.5rem;
}

#restore-ai .nav-link .panel-info {
	color: var(--text-300);
	font-size: var(--text-sm);
	margin-bottom: 0;
}

/* The blurb only shows on the open tab, so the closed ones stay scannable. */
#restore-ai .nav-link .panel-info {
	display: none;
}

#restore-ai .nav-link.active .panel-info {
	display: block;
}

/* !- Cards
   Shared by the feature, detail, colorize, album and workflow grids. */
.restore-card {
	background: var(--bg-800);
	border-radius: var(--border-radius);
	padding: 1.5rem;
}

.restore-card h3 {
	font-size: var(--text-lg);
	font-weight: 700;
	margin-bottom: 0.75rem;
}

.restore-card p:last-child {
	margin-bottom: 0;
}

.restore-card .card-copy {
	color: var(--text-300);
	font-size: var(--text-sm);
	line-height: 1.5;
}

.restore-card .card-img {
	border-radius: var(--border-radius);
	margin-bottom: 1.25rem;
}

.restore-card .card-icon {
	color: var(--blue-500);
	font-size: 2.5rem;
	margin-bottom: 1.25rem;
}

/* !- The step up from the page's own tone
   Only the bands with no card grid of their own. The card sections in between
   are left on the page tone deliberately: their cards already carry --bg-800
   against it, and stepping the band too only swaps those same two greys round,
   which buys no separation and makes the cards read lighter than what they sit
   on in one section and darker in the next. */
#intro,
#restore-damaged-photos,
#why-different,
#enhance-more {
	background: var(--bg-800);
}

#why-different .restore-card {
	background: var(--bg-900);
}

/* !- Restore Your Family Photos Today */
#restore-today {
	background: url(https://ononesoft.cachefly.net/images/home/v2/hero-slides/RestoreAI-bg-20260319@2x.jpg) center bottom no-repeat;
	background-size: cover;
	padding: 6rem 0 !important;
}

#restore-today h2,
#restore-today p {
	color: var(--white);
}

/* !- FAQs */
#faqs {
	padding: 6rem 0 !important;
}