/*
Theme Name: Rose to the Rescue
Theme URI: https://rosetotherescue.example
Author: Canopytech
Description: Bespoke block theme for Rose to the Rescue. Exact reproduction of the client's mockups; design tokens live in theme.json, section styling lives here. No page builder, no framework.
Version: 0.1.0
Requires at least: 6.6
Tested up to: 7.0
Requires PHP: 8.1
License: Proprietary — client work, all rights reserved.
Text Domain: rose-to-the-rescue
*/

/* ==========================================================================
   0. Design notes
   --------------------------------------------------------------------------
   The multi-stop brand gradient is layered CSS, not an exported image:
   a base linear ramp (teal → orchid → amber → gold) with radial "blooms"
   over it so the colour appears to pool the way it does in the mockups.
   Retune from the custom properties below — nothing else needs touching.

   Contrast: the cream-on-blue and cream-on-gold pairs fail WCAG AA (~1.4:1).
   That is DELIBERATE — client signed off on exact-as-drawn reproduction
   (PLAN.md §4, written risk acceptance). The accessible variant is one
   token away: set --rtr-card-title to #8A6D1F and enable .rtr-scrim.
   ========================================================================== */

:root {
	--rtr-teal:    var(--wp--preset--color--gradient-teal, #1D7BA8);
	--rtr-orchid:  var(--wp--preset--color--gradient-orchid, #C64FC8);
	--rtr-amber:   var(--wp--preset--color--gradient-amber, #F5A623);
	--rtr-gold:    var(--wp--preset--color--gradient-gold, #FBBF24);
	--rtr-blue:    var(--wp--preset--color--card-blue, #8FBBD5);
	--rtr-cream:   var(--wp--preset--color--heading-cream, #EAE3B0);
	--rtr-white:   var(--wp--preset--color--body-white, #FFFFFF);
	--rtr-rose:    var(--wp--preset--color--rose-button, #c88b9e);
	--rtr-ink:     var(--wp--preset--color--ink, #2C3E50);

	/* Card title colour — the exact-as-drawn cream. Accessible variant: #8A6D1F */
	--rtr-card-title: var(--rtr-cream);

	--rtr-radius-card: 22px;
	--rtr-radius-photo: 26px;
	--rtr-radius-panel: 44px;

	--rtr-shadow-soft: 0 10px 34px rgba(29, 60, 90, 0.18);
}

/* ==========================================================================
   1. Gradient engine
   --------------------------------------------------------------------------
   .rtr-gradient        — the shared engine (base ramp + blooms)
   variant classes tune angle and bloom positions per section, matching how
   each mockup panel leans a slightly different way.
   ========================================================================== */

.rtr-gradient {
	--g-angle: 108deg;
	--g-teal-x: 8%;   --g-teal-y: 88%;
	--g-orchid-x: 46%; --g-orchid-y: 38%;
	--g-gold-x: 96%;  --g-gold-y: 6%;
	background-color: var(--rtr-orchid); /* paint-before-gradient fallback */
	background-image:
		radial-gradient(ellipse 72% 85% at var(--g-gold-x) var(--g-gold-y),
			var(--rtr-gold) 0%, rgba(251, 191, 36, 0.55) 38%, rgba(251, 191, 36, 0) 68%),
		radial-gradient(ellipse 70% 80% at var(--g-teal-x) var(--g-teal-y),
			var(--rtr-teal) 0%, rgba(29, 123, 168, 0.6) 40%, rgba(29, 123, 168, 0) 72%),
		radial-gradient(ellipse 85% 95% at var(--g-orchid-x) var(--g-orchid-y),
			rgba(198, 79, 200, 0.9) 0%, rgba(230, 121, 178, 0.55) 45%, rgba(230, 121, 178, 0) 78%),
		linear-gradient(var(--g-angle),
			var(--rtr-teal) 0%, #7A64B8 26%, var(--rtr-orchid) 48%,
			#E5799A 66%, var(--rtr-amber) 86%, var(--rtr-gold) 100%);
}

/* Hero panel: teal pools lower-left, gold floods the upper right corner */
.rtr-gradient--hero {
	--g-angle: 102deg;
	--g-teal-x: 4%;  --g-teal-y: 92%;
	--g-orchid-x: 62%; --g-orchid-y: 40%;
	--g-gold-x: 98%; --g-gold-y: 4%;
}

/* About panel: warmer — gold upper-right, orchid centred, teal left edge */
.rtr-gradient--about {
	--g-angle: 94deg;
	--g-teal-x: 0%;  --g-teal-y: 45%;
	--g-orchid-x: 42%; --g-orchid-y: 68%;
	--g-gold-x: 100%; --g-gold-y: 0%;
}
.rtr-gradient--about.rtr-about-panel {
	background-image:
		radial-gradient(ellipse 58% 75% at var(--g-gold-x) var(--g-gold-y),
			var(--rtr-gold) 0%, rgba(251, 191, 36, 0.5) 42%, rgba(251, 191, 36, 0) 70%),
		radial-gradient(ellipse 55% 110% at var(--g-teal-x) var(--g-teal-y),
			var(--rtr-teal) 0%, rgba(29, 123, 168, 0.55) 45%, rgba(29, 123, 168, 0) 75%),
		radial-gradient(ellipse 75% 90% at var(--g-orchid-x) var(--g-orchid-y),
			rgba(198, 79, 200, 0.85) 0%, rgba(230, 121, 178, 0.5) 48%, rgba(230, 121, 178, 0) 80%),
		linear-gradient(var(--g-angle),
			var(--rtr-teal) 0%, #8A5FB8 24%, var(--rtr-orchid) 46%,
			#E5799A 64%, var(--rtr-amber) 84%, var(--rtr-gold) 100%);
}

/* Release panel: blue leans harder left, pink centre, gold right column */
.rtr-gradient--release {
	--g-angle: 100deg;
	--g-teal-x: 6%;  --g-teal-y: 40%;
	--g-orchid-x: 44%; --g-orchid-y: 50%;
	--g-gold-x: 97%; --g-gold-y: 20%;
}

/* Quote panel (right half of the checkerboard): gold top → pink bottom */
.rtr-gradient--quote {
	--g-angle: 175deg;
	--g-teal-x: -20%; --g-teal-y: 120%;
	--g-orchid-x: 55%; --g-orchid-y: 95%;
	--g-gold-x: 60%; --g-gold-y: 0%;
}

/* Optional legibility scrim — OFF by design (exact-as-drawn). */
.rtr-scrim {
	background-color: rgba(30, 40, 60, 0.35);
	border-radius: 12px;
	padding: 0.15em 0.5em;
}

/* ==========================================================================
   2. Type treatment
   ========================================================================== */

/* Cream headings via the explicit .rtr-display class only. Every gradient-panel
   heading carries it. Deliberately NOT a descendant selector like
   `.rtr-section h2` (would clobber .rtr-card__title and white-section headings)
   or `.rtr-gradient h2` (would clobber card titles inside gradient panels). */
.rtr-display {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	color: var(--rtr-cream);
	letter-spacing: 0.01em;
	line-height: 1.08;
}

.rtr-tagline {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	color: var(--rtr-white);
	letter-spacing: 0.02em;
}

/* Script placeholder for the logo until the real vector arrives */
.rtr-logo-script {
	font-family: var(--wp--preset--font-family--display);
	font-style: italic;
	font-weight: 400;
	color: var(--rtr-white);
	letter-spacing: 0.04em;
}

/* ==========================================================================
   3. Cards
   ========================================================================== */

.rtr-card {
	background: var(--rtr-blue);
	border-radius: var(--rtr-radius-card);
	box-shadow: var(--rtr-shadow-soft);
	padding: 1.6rem 2rem 1.8rem;
}

.rtr-card__title {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--large);
	color: var(--rtr-card-title);
	text-align: center;
	margin: 0 0 0.65rem;
}

.rtr-card__body {
	color: var(--rtr-white);
	text-align: center;
	font-size: var(--wp--preset--font-size--medium);
	margin: 0;
}

.rtr-card a { color: inherit; text-decoration: none; }
.rtr-card a:hover { text-decoration: underline; }

/* Review cards: left-aligned, quote up top, name in serif below */
.rtr-review-card { text-align: left; padding: 1.5rem 1.8rem 1.6rem; }
.rtr-review-card .rtr-review-quote {
	color: var(--rtr-white);
	font-size: var(--wp--preset--font-size--small);
	margin: 0 0 2.4rem;
}
.rtr-review-card .rtr-review-name {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.5rem;
	color: var(--rtr-card-title);
	margin: 0;
}

/* Contact cards: label serif-cream, value white sans */
.rtr-contact-card { text-align: left; padding: 0.9rem 1.6rem 1.1rem; max-width: 430px; }
.rtr-contact-card .rtr-contact-label {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.6rem;
	color: var(--rtr-card-title);
	margin: 0;
}
.rtr-contact-card .rtr-contact-value {
	color: var(--rtr-white);
	font-size: var(--wp--preset--font-size--medium);
	margin: 0.1rem 0 0;
	overflow-wrap: anywhere;
}

/* ==========================================================================
   4. Section shells
   ========================================================================== */

.rtr-section { padding: clamp(3rem, 7vw, 5.5rem) clamp(1.25rem, 5vw, 4.5rem); }

/* Rounded photo / imagery */
.rtr-photo img,
.rtr-photo {
	border-radius: var(--rtr-radius-photo);
	overflow: hidden;
}
.rtr-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Fixed aspect boxes so a wrong-shaped upload cannot warp layout */
.rtr-aspect-square   { aspect-ratio: 1 / 1; }
.rtr-aspect-portrait { aspect-ratio: 4 / 5; }
.rtr-aspect-tall     { aspect-ratio: 3 / 4; }
.rtr-aspect-cover    { aspect-ratio: 2 / 3; }

/* About: light-blue band around a big rounded gradient panel */
.rtr-about-band { background: var(--rtr-blue); }
.rtr-about-panel {
	border-radius: var(--rtr-radius-panel);
	box-shadow: var(--rtr-shadow-soft);
	padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 7vw, 7rem);
}
.rtr-about-panel p { color: var(--rtr-cream); }
.rtr-about-panel .rtr-about-highlight { color: var(--rtr-white); font-weight: 600; }

/* Buy now pill */
.rtr-buy-btn .wp-block-button__link,
.rtr-buy-btn a {
	background: var(--rtr-rose);
	color: var(--rtr-cream);
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.5rem;
	border-radius: 999px;
	padding: 0.85rem 3.4rem;
	box-shadow: inset 0 -6px 12px rgba(0,0,0,0.18), 0 8px 18px rgba(0,0,0,0.22);
	text-decoration: none;
	display: inline-block;
}
.rtr-buy-btn a:hover { filter: brightness(1.05); }

/* Reviews section (white background per mockup 3) */
.rtr-reviews-heading {
	color: var(--rtr-blue);
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
}

/* Contact: full-bleed photo background with content over it */
.rtr-contact-band {
	position: relative;
	background-size: cover;
	background-position: center right;
	min-height: 640px;
	display: flex;
	align-items: center;
}
.rtr-contact-band::before {
	/* left-side darkening so the cards & heading sit on the moody sky side —
	   present in the source photo itself; kept subtle */
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(90deg, rgba(20,30,50,0.35) 0%, rgba(20,30,50,0.05) 55%, rgba(20,30,50,0) 75%);
	pointer-events: none;
}
.rtr-contact-band > * { position: relative; }

/* ==========================================================================
   5. Header / footer (interpretation — not in mockups; flagged for approval)
   ========================================================================== */

.rtr-header {
	background: var(--rtr-teal);
	padding: 0.65rem clamp(1.25rem, 5vw, 4.5rem);
}
.rtr-header a { color: var(--rtr-cream); text-decoration: none; }
.rtr-header .rtr-logo-script { font-size: 1.45rem; }
.rtr-header nav a {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 400;
	font-size: 0.95rem;
	color: var(--rtr-white);
}
.rtr-header nav a:hover { color: var(--rtr-cream); }

.rtr-footer {
	background: var(--rtr-ink);
	color: rgba(255,255,255,0.75);
	padding: 2rem clamp(1.25rem, 5vw, 4.5rem);
	font-size: 0.85rem;
}
.rtr-footer a { color: rgba(255,255,255,0.85); }

/* ==========================================================================
   6. Blog (interpretation — needs Rose approval; brand-consistent)
   ========================================================================== */

.rtr-blog-hero { padding: clamp(2.5rem, 6vw, 4rem) clamp(1.25rem, 5vw, 4.5rem); }
.rtr-post-card {
	border: 1px solid rgba(44, 62, 80, 0.12);
	border-radius: var(--rtr-radius-card);
	overflow: hidden;
	box-shadow: 0 6px 22px rgba(29, 60, 90, 0.08);
	height: 100%;
}
.rtr-post-card h3 a { color: var(--rtr-ink); text-decoration: none; font-weight: 500; }
.rtr-post-card h3 a:hover { color: var(--rtr-teal); }

.rtr-prose h1, .rtr-prose h2, .rtr-prose h3 { color: var(--rtr-ink); }
.rtr-prose a { color: var(--rtr-teal); }

/* ==========================================================================
   7. Responsive — approved plan from PLAN.md §4; mobile mockups pending
   ========================================================================== */

@media (max-width: 781px) {
	.rtr-contact-band { min-height: 520px; }
	.rtr-card__title { font-size: 1.5rem; }
}

/* Motion restraint for users who ask for it */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ==========================================================================
   8. Checkerboard tiles (quote + reviews sections)
   ========================================================================== */

/* Edge-to-edge photos in the checkerboards: no radius, fill the tile */
.rtr-flush-photo, .rtr-flush-photo img { border-radius: 0; height: 100%; }
.rtr-flush-photo img { width: 100%; object-fit: cover; display: block; }
.wp-block-column > .rtr-flush-photo { margin: 0; }

/* The quote card floats centred in its gradient half */
.rtr-quote-card { max-width: 520px; margin-left: auto; margin-right: auto; }

/* ==========================================================================
   9. Inner-page section headings on white
   These are NOT from the mockup (the mockup's only on-white heading is the
   signed-off pale-blue "Rescue Reviews"). New content headings use brand teal,
   which passes WCAG AA on white — legibility where we're not bound to as-drawn.
   ========================================================================== */
.rtr-page-heading {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	color: var(--rtr-teal);
}

/* ==========================================================================
   10. Hero photo — fill the column height so it lines up with the 3 cards
   The branded photo (wordmark baked into the TOP) fills the right column to
   match the height of the stacked cards on the left. object-position keeps the
   wordmark anchored near the top; only the lower foreground crops if needed.
   ========================================================================== */
/* The right column stretches to the row height (set by the cards on the left);
   the figure is a flex child that stretches to fill it — no percentage-height
   chain, so it can't transiently collapse while the image loads. .rtr-photo
   already supplies border-radius, overflow, and img { width/height:100%; cover }. */
.rtr-hero-col { display: flex; }
.rtr-hero-col .rtr-hero-photo { margin: 0; width: 100%; }
.rtr-hero-photo img {
	object-position: center 22%;   /* keep the wordmark; crop lower foreground */
}

/* Mobile (stacked): show the whole branded image, no crop */
@media (max-width: 781px) {
	.rtr-hero-col { display: block; }
	.rtr-hero-photo, .rtr-hero-photo img { height: auto; }
	.rtr-hero-photo img { object-fit: contain; }
}