/**
 * Ultimate-only options (2026-09-01, ultimate-toggles): CSS for the three
 * opt-in, default-OFF options this pack adds on top of the ultimate
 * template -- a phone/address/hours utility bar, a side-by-side image hero
 * (form kept), and a home-page gallery section. Every selector here is
 * scoped under an `.ocf-ultimate-*` class that ONLY ever appears in markup
 * this pack's own PHP renders (header.php's utility bar, and the two new
 * templates/ultimate/parts/home-hero-split.php / home-gallery.php files) --
 * so shipping this stylesheet to every template's CSS bundle (see
 * functions.php's $ocf_components enqueue list) is a no-op for any site
 * that never turns an option on, and it can never bleed onto lightning or
 * any other pack's markup, which carries none of these classes.
 *
 * Design language: OUR OWN take on the concept these options borrow from a
 * competitor's per-skin differentiators, not their pixels -- Inter/
 * Instrument Serif type (via the existing --ocf-font-heading/--ocf-font-body
 * bridge in header.php, so this automatically follows whatever the ultimate
 * pack's own restyle sets those to), 12px-radius hairline cards, and small
 * accent chips driven by --ocf-accent (the tenant's own brand color, never
 * a hardcoded hue).
 */

/* --- utility bar (header.php) -------------------------------------------- */

.ocf-ultimate-utility-bar {
	background: var(--ocf-bg-dark);
	color: var(--ocf-dark-heading);
	font-family: var(--ocf-font-body);
}

.ocf-ultimate-utility-bar__inner {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex-wrap: wrap;
	gap: 0.35rem 1.5rem;
	padding: 0.5rem 0;
	font-size: 0.85rem;
}

.ocf-ultimate-utility-bar__item {
	display: inline-flex;
	align-items: center;
	color: inherit;
	opacity: 0.92;
}

a.ocf-ultimate-utility-bar__item {
	text-decoration: none;
	font-weight: 600;
	opacity: 1;
	border-radius: 12px;
	padding: 0.15rem 0.6rem;
	margin: -0.15rem -0.6rem;
	border: 1px solid transparent;
	transition: border-color 0.15s ease, color 0.15s ease;
}

a.ocf-ultimate-utility-bar__item:hover,
a.ocf-ultimate-utility-bar__item:focus-visible {
	border-color: var(--ocf-accent);
	color: var(--ocf-accent);
}

.ocf-ultimate-utility-bar__hours {
	white-space: nowrap;
}

@media (max-width: 640px) {
	.ocf-ultimate-utility-bar__inner {
		justify-content: center;
		text-align: center;
	}
}

/* --- side-by-side image hero (templates/ultimate/parts/home-hero-split.php) */

.ocf-ultimate-hero-split {
	position: static;
	background: var(--ocf-bg);
	overflow: visible;
}

.ocf-ultimate-hero-split .container-global {
	position: static;
}

.ocf-ultimate-hero-split__grid {
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	gap: clamp(2rem, 4vw, 3.5rem);
	align-items: center;
}

.ocf-ultimate-hero-split__media {
	position: relative;
	border-radius: 12px;
	overflow: hidden;
	border: 1px solid var(--ocf-border);
	aspect-ratio: 4 / 5;
}

.ocf-ultimate-hero-split__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ocf-ultimate-hero-split__content {
	color: var(--ocf-heading);
}

.ocf-ultimate-hero-split__badge {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	border-radius: 100px;
	border: 1px solid var(--ocf-border);
	padding: 0.3rem 0.8rem;
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--ocf-accent);
	margin-bottom: 1rem;
}

/* parts/hero-form.php's own .hero-form-card already draws the card
   (background/border/radius/shadow, assets/components/contact-form.css) --
   this wrapper only adds spacing so the reused form doesn't get a second,
   nested card border around it. */
.ocf-ultimate-hero-split__form {
	margin-top: 2rem;
}

@media (max-width: 900px) {
	.ocf-ultimate-hero-split__grid {
		grid-template-columns: 1fr;
	}
	.ocf-ultimate-hero-split__media {
		aspect-ratio: 16 / 10;
	}
	.ocf-ultimate-hero-split__content {
		text-align: center;
	}
}

/* --- gallery section (templates/ultimate/parts/home-gallery.php) --------- */

.ocf-ultimate-gallery__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: 1rem;
}

.ocf-ultimate-gallery__item {
	display: block;
	border-radius: 12px;
	overflow: hidden;
	border: 1px solid var(--ocf-border);
	aspect-ratio: 4 / 3;
}

.ocf-ultimate-gallery__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.2s ease;
}

.ocf-ultimate-gallery__item:hover img {
	transform: scale(1.03);
}