/*
 * TASK-121: purely decorative brand-illustration layer for Home. See
 * includes/Frontend/BrandVisualAssets.php's docblock for why this is a
 * separate file/class instead of folded into home.css/HomeExperience.php
 * — short version: removability. Every selector below is an EXISTING
 * `.rrc-home-*` class from templates/frontend/home.php (TASK-100),
 * touched only additively (background-image, ::before/::after, color
 * overrides on native Listeo markup) — no new HTML anywhere, so deleting
 * this file changes nothing else about Home.
 *
 * Reuses `.rrc-home`'s own existing custom properties (`--rr-teal-deep`,
 * `--rr-orange`, `--rr-cream`, etc. — defined in home.css) instead of
 * declaring a competing set: `wp_enqueue_style()` in BrandVisualAssets.php
 * lists `rrc-home` as a hard dependency, so those variables are always
 * defined before this file's rules read them.
 *
 * Mobile-first: every rule with no media query below targets the smallest
 * screen and is the complete, safe experience on its own; `@media
 * (min-width: ...)` blocks only ADD or resize decoration for wider
 * viewports, a narrow screen never has to override or undo anything a base
 * rule already did. TASK-121 originally shipped the hiker silhouette and
 * lapa accent as tablet/desktop-only ("small/no illustrations" on phones);
 * TASK-151 brought both to phones too, per explicit developer request.
 * Checked in a real 390px viewport (an iframe, since `resize_window` on
 * this session's browser tooling doesn't reliably resize the real window —
 * same limitation TASK-119/121 already hit): the lapa was fine at a smaller
 * size next to the search card, but the hiker's original bottom-left
 * anchor sat entirely underneath the search card on a phone (the card runs
 * near full-width there and its top edge reaches further up into the hero
 * than it does on desktop) — moved to top-left, behind the title/subtitle,
 * for phones only; desktop keeps the original bottom-left anchor.
 */

/* ---------------------------------------------------------------------
 * Hero — warm glow, coral/orange search CTA, hiker silhouette and lapa
 * accent, all sizes (TASK-151: developer asked to bring both illustrations
 * to mobile too, reversing TASK-121's original mobile-first "small/no
 * illustrations" call — smaller footprint on phones, full size from
 * tablet up).
 * ------------------------------------------------------------------- */

.rrc-home-hero {
	position: relative;
	overflow: hidden; /* any decorative background below must never cause horizontal scroll */
	background:
		radial-gradient(ellipse 70% 55% at 50% 0%, rgba(240, 169, 60, 0.32) 0%, transparent 70%),
		linear-gradient(135deg, var(--rr-teal-deep) 0%, var(--rr-teal) 100%);
}

/* Hiker silhouette, low opacity — "background or silhouette" per
 * docs/BRAND_VISUAL_ELEMENTS_STRATEGY.md, never a loud full-color
 * illustration competing with the title/search card. On phones the search
 * card runs nearly full-width and its top edge sits well up into the
 * hero, so a bottom-anchored silhouette (the desktop position, see the
 * media query below) ends up painted over by that opaque white card —
 * confirmed by comparing their actual bounding boxes in a real 390px
 * viewport. Anchored top-left instead on phones, behind the title/subtitle
 * text (a low-opacity silhouette, never solid, so it doesn't fight the
 * white text for legibility) and above where the card begins.
 * `.rrc-home-hero`'s own `overflow: hidden` keeps it from ever causing
 * horizontal scroll at any size. */
.rrc-home-hero::before {
	content: "";
	position: absolute;
	left: -24px;
	top: 6px;
	width: 130px;
	height: 130px;
	background-image: url("images/brand/rr-hiker-sunset.webp");
	background-repeat: no-repeat;
	background-size: contain;
	background-position: top left;
	opacity: 0.16;
	pointer-events: none;
}

/* Lapa accent floats just above the search card's top-right corner —
 * never inside/over the input fields or the button. Closer to the edge
 * and slightly smaller on phones (44px, `right: 12px`) to clear the
 * narrower card without spilling past the viewport. */
.rrc-home-hero-search {
	position: relative;
}

.rrc-home-hero-search::after {
	content: "";
	position: absolute;
	top: -22px;
	right: 12px;
	width: 44px;
	height: 44px;
	background-image: url("images/brand/rr-lapa-flight.webp");
	background-repeat: no-repeat;
	background-size: contain;
	pointer-events: none;
}

/* Listeo's own search form ships a plain red submit button
 * (`.rrc-home-hero-search button.button`) — recolored to the same warm
 * orange family already used for the provider CTA elsewhere on this same
 * page, so the whole page reads as one deliberate palette instead of
 * "Roots teal/cream" interrupted by one stock-red button. Scoped strictly
 * to this one button, never touching Listeo's button styles anywhere else.
 *
 * `--rr-orange-dark` (not the lighter `--rr-orange`) as the RESTING state
 * on purpose: this button's real text is 18px/600 — right at WCAG's
 * "large text" boundary, not safely past it — and white-on-`--rr-orange`
 * measures ~3.56:1, short of the 4.5:1 AA threshold a normal-text reading
 * would require. White-on-`--rr-orange-dark` measures ~4.68:1, clearing
 * AA outright regardless of which text-size rule applies, so the darker
 * tone is the safe default rather than only a hover state. */
.rrc-home-hero-search button.button {
	background-color: var(--rr-orange-dark) !important;
	border-color: var(--rr-orange-dark) !important;
}

.rrc-home-hero-search button.button:hover,
.rrc-home-hero-search button.button:focus-visible {
	background-color: #a93d1c !important; /* one step further than --rr-orange-dark for a visible hover state; still white-text-safe (contrast only increases as the background darkens) */
	border-color: #a93d1c !important;
}

@media (min-width: 768px) {
	/* Same two illustrations as the base rules above, just bigger, further
	 * off the edge, and — for the hiker — back to bottom-anchored: from
	 * this width up the search card no longer runs full-bleed, so it never
	 * reaches far enough left to cover a bottom-left silhouette the way it
	 * does on a phone. */
	.rrc-home-hero::before {
		left: -30px;
		top: auto;
		bottom: -20px;
		width: 260px;
		height: 260px;
		background-position: bottom left;
	}

	.rrc-home-hero-search::after {
		top: -30px;
		right: 22px;
		width: 56px;
		height: 56px;
	}
}

/* ---------------------------------------------------------------------
 * Categories — soft colored circle behind each emoji icon (all sizes,
 * cheap: no image request, just a background color already in the
 * existing token set).
 * ------------------------------------------------------------------- */

.rrc-home-category-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--rr-cream);
}

/* ---------------------------------------------------------------------
 * How it works — dotted "route" connecting the 3 steps. Only meaningful
 * once the steps actually sit in one row (the existing grid is
 * `auto-fit, minmax(220px, 1fr)` — three columns only once there is room
 * for all three at 220px+, comfortably true well before desktop widths),
 * so this is desktop-only rather than trying to reshape it per breakpoint.
 * ------------------------------------------------------------------- */

@media (min-width: 1024px) {
	.rrc-home-how-steps {
		position: relative;
	}

	.rrc-home-how-steps::before {
		content: "";
		position: absolute;
		top: 46px; /* vertical center of the numbered circle: 28px step padding + 18px (half of the 36px circle) */
		left: 8%;
		right: 8%;
		border-top: 3px dashed var(--rr-teal);
		opacity: 0.35;
		z-index: 0;
	}

	.rrc-home-how-steps li {
		position: relative;
		z-index: 1;
		background: var(--rr-card-bg); /* opaque, so the dashed line disappears behind each card instead of cutting through its text */
	}
}

/* ---------------------------------------------------------------------
 * Provider CTA — sun/waves emblem as a subtle watermark, all sizes
 * (small/cheap enough on mobile too — a single 220px background image,
 * no layout impact either way).
 * ------------------------------------------------------------------- */

.rrc-home-provider-cta {
	position: relative;
	overflow: hidden;
	background-image: url("images/brand/rr-sun-waves-emblem.webp");
	background-repeat: no-repeat;
	background-position: right -30px bottom -30px;
	background-size: 160px 160px;
}

@media (min-width: 768px) {
	.rrc-home-provider-cta {
		background-size: 220px 220px;
		background-position: right -20px bottom -40px;
	}
}