/*
Theme Name:  QR Heaven (Astra Child)
Theme URI:   https://www.qrheaven.co.uk
Description: QR Heaven design system and block patterns for the Astra theme. Elegant, compassionate styling for memorial QR plaques — navy, ivory and warm gold, with locally hosted Fraunces and Inter fonts. Requires the free Astra theme.
Author:      QR Heaven
Template:    astra
Version:     1.0.0
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 7.4
License:     GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: qr-heaven-astra-child
*/

/* =====================================================================
   1. LOCALLY HOSTED FONTS  (no external requests)
   ===================================================================== */
@font-face {
	font-family: 'Fraunces';
	src: url('assets/fonts/fraunces-variable.woff2') format('woff2');
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Fraunces';
	src: url('assets/fonts/fraunces-variable-italic.woff2') format('woff2');
	font-weight: 100 900;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: 'Inter';
	src: url('assets/fonts/inter-variable.woff2') format('woff2');
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

/* =====================================================================
   2. DESIGN TOKENS
   ===================================================================== */
:root {
	--qrh-navy:     #172733;
	--qrh-ivory:    #F7F3EC;
	--qrh-white:    #FFFFFF;
	--qrh-sage:     #728176;
	--qrh-gold:     #B49465;
	--qrh-charcoal: #283138;
	--qrh-border:   #E5DED4;

	--qrh-font-heading: 'Fraunces', Georgia, 'Times New Roman', serif;
	--qrh-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

	--qrh-radius: 14px;
	--qrh-radius-pill: 999px;
	--qrh-shadow-soft: 0 6px 24px rgba(23, 39, 51, 0.07);
	--qrh-shadow-lift: 0 10px 32px rgba(23, 39, 51, 0.12);

	--qrh-space-1: 0.5rem;
	--qrh-space-2: 1rem;
	--qrh-space-3: 1.5rem;
	--qrh-space-4: 2.5rem;
	--qrh-space-5: 4rem;
	--qrh-space-6: 6rem;
}

/* =====================================================================
   3. BASE TYPOGRAPHY  (layered over Astra)
   ===================================================================== */
body.qrh,
body.qrh button,
body.qrh input,
body.qrh select,
body.qrh textarea {
	font-family: var(--qrh-font-body);
}
body.qrh {
	color: var(--qrh-charcoal);
	font-size: 1.0625rem;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
}
body.qrh h1, body.qrh h2, body.qrh h3,
body.qrh h4, body.qrh h5, body.qrh h6,
body.qrh .site-title {
	font-family: var(--qrh-font-heading);
	font-weight: 560;
	color: var(--qrh-navy);
	line-height: 1.18;
	letter-spacing: -0.01em;
}
body.qrh h1 { font-size: clamp(2.1rem, 1.4rem + 3vw, 3.4rem); }
body.qrh h2 { font-size: clamp(1.7rem, 1.25rem + 2vw, 2.5rem); }
body.qrh h3 { font-size: clamp(1.25rem, 1.1rem + 0.8vw, 1.55rem); }
body.qrh a { color: var(--qrh-navy); text-underline-offset: 0.15em; }
body.qrh a:hover { color: var(--qrh-gold); }

/* Eyebrow label above headings */
.qrh-eyebrow {
	font-family: var(--qrh-font-body);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--qrh-sage);
	margin-bottom: 0.5rem;
}

/* Signature element: the gold thread — a fine rule that recurs through the site */
.is-style-qrh-thread {
	border: none;
	background: linear-gradient(90deg, var(--qrh-gold), rgba(180, 148, 101, 0.25));
	height: 2px !important;
	width: 64px !important;
	margin-top: 0.75rem;
	margin-bottom: 1.25rem;
}
body.qrh .has-text-align-center + .is-style-qrh-thread,
.is-style-qrh-thread.aligncenter {
	margin-left: auto;
	margin-right: auto;
}

/* =====================================================================
   4. LAYOUT BANDS + CONTAINER
   ===================================================================== */
.qrh-band {
	padding-top: clamp(3rem, 2rem + 4vw, 5.5rem);
	padding-bottom: clamp(3rem, 2rem + 4vw, 5.5rem);
}
.qrh-container {
	max-width: 1200px;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: clamp(1rem, 4vw, 2rem);
	padding-right: clamp(1rem, 4vw, 2rem);
}
.has-navy-background-color,
.has-navy-background-color h1,
.has-navy-background-color h2,
.has-navy-background-color h3,
.has-navy-background-color p,
.has-navy-background-color a {
	color: var(--qrh-ivory);
}
.has-navy-background-color .qrh-eyebrow { color: var(--qrh-gold); }

/* =====================================================================
   5. BUTTONS
   ===================================================================== */
.wp-block-button__link,
.wp-element-button,
body.qrh .ast-button,
body.qrh button[type="submit"],
body.qrh input[type="submit"] {
	font-family: var(--qrh-font-body);
	font-weight: 600;
	font-size: 1rem;
	letter-spacing: 0.01em;
	background-color: var(--qrh-navy);
	color: var(--qrh-white);
	border: 2px solid var(--qrh-navy);
	border-radius: var(--qrh-radius-pill);
	padding: 0.8rem 1.9rem;
	min-height: 48px;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.wp-block-button__link:hover,
.wp-element-button:hover,
body.qrh .ast-button:hover,
body.qrh button[type="submit"]:hover,
body.qrh input[type="submit"]:hover {
	background-color: var(--qrh-gold);
	border-color: var(--qrh-gold);
	color: var(--qrh-white);
}
/* Gold button style (selectable in the editor: Styles → Gold) */
.is-style-qrh-gold .wp-block-button__link {
	background-color: var(--qrh-gold);
	border-color: var(--qrh-gold);
	color: var(--qrh-white);
}
.is-style-qrh-gold .wp-block-button__link:hover {
	background-color: var(--qrh-navy);
	border-color: var(--qrh-navy);
}
/* Outline button style (core "Outline" style, tuned) */
.is-style-outline .wp-block-button__link {
	background-color: transparent;
	color: var(--qrh-navy);
	border: 2px solid var(--qrh-gold);
}
.is-style-outline .wp-block-button__link:hover {
	background-color: var(--qrh-gold);
	color: var(--qrh-white);
}
.has-navy-background-color .is-style-outline .wp-block-button__link {
	color: var(--qrh-ivory);
}

/* =====================================================================
   6. CARDS
   ===================================================================== */
.is-style-qrh-card {
	background-color: var(--qrh-white);
	border: 1px solid var(--qrh-border);
	border-radius: var(--qrh-radius);
	box-shadow: var(--qrh-shadow-soft);
	padding: 1.75rem !important;
	height: 100%;
	transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.is-style-qrh-card:hover {
	box-shadow: var(--qrh-shadow-lift);
}
.is-style-qrh-card h3 { margin-top: 0; font-size: 1.25rem; }
.qrh-card-icon {
	font-size: 1.6rem;
	line-height: 1;
	color: var(--qrh-gold);
	margin-bottom: 0.75rem;
}

/* =====================================================================
   7. HOW-IT-WORKS STEPS  (numbers joined by the gold thread)
   ===================================================================== */
.qrh-step { position: relative; padding-top: 0.25rem; }
.qrh-step-number {
	font-family: var(--qrh-font-heading);
	font-size: 2.4rem;
	font-weight: 500;
	color: var(--qrh-gold);
	line-height: 1;
	margin-bottom: 0.35rem;
}
.qrh-step::after {
	content: "";
	position: absolute;
	top: 1.45rem;
	left: 3.4rem;
	right: 0;
	height: 1px;
	background: linear-gradient(90deg, rgba(180,148,101,0.55), rgba(180,148,101,0.08));
}
.qrh-steps > .wp-block-column:last-child .qrh-step::after { display: none; }
@media (max-width: 781px) {
	.qrh-step::after { display: none; }
}

/* =====================================================================
   8. TRUST STRIP
   ===================================================================== */
.qrh-trust-strip {
	border-top: 1px solid var(--qrh-border);
	border-bottom: 1px solid var(--qrh-border);
	background: var(--qrh-white);
}
.qrh-trust-strip p {
	font-size: 0.95rem;
	font-weight: 500;
	color: var(--qrh-charcoal);
	margin: 0;
}
.qrh-trust-strip .qrh-tick { color: var(--qrh-gold); font-weight: 700; }

/* =====================================================================
   9. FAQ ACCORDIONS  (core Details block, no JavaScript required)
   ===================================================================== */
details.wp-block-details {
	background: var(--qrh-white);
	border: 1px solid var(--qrh-border);
	border-radius: var(--qrh-radius);
	padding: 1.1rem 1.4rem;
	margin-bottom: 0.9rem;
	box-shadow: var(--qrh-shadow-soft);
}
details.wp-block-details summary {
	font-family: var(--qrh-font-heading);
	font-size: 1.15rem;
	font-weight: 560;
	color: var(--qrh-navy);
	cursor: pointer;
	list-style-position: outside;
	padding: 0.15rem 0;
}
details.wp-block-details summary::marker { color: var(--qrh-gold); }
details.wp-block-details[open] summary { margin-bottom: 0.6rem; }
details.wp-block-details summary:focus-visible {
	outline: 2px solid var(--qrh-gold);
	outline-offset: 4px;
	border-radius: 4px;
}

/* =====================================================================
   10. TESTIMONIALS
   ===================================================================== */
.qrh-testimonial blockquote,
.qrh-testimonial .wp-block-quote {
	border: none;
	margin: 0;
	padding: 0;
	font-family: var(--qrh-font-heading);
	font-style: italic;
	font-size: 1.1rem;
	color: var(--qrh-navy);
}
.qrh-testimonial cite {
	display: block;
	margin-top: 0.9rem;
	font-family: var(--qrh-font-body);
	font-style: normal;
	font-size: 0.9rem;
	color: var(--qrh-sage);
}
.qrh-demo-note {
	font-size: 0.8rem;
	color: var(--qrh-sage);
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

/* =====================================================================
   11. IMAGERY
   ===================================================================== */
.qrh-photo img,
.is-style-qrh-photo img {
	border-radius: var(--qrh-radius);
	box-shadow: var(--qrh-shadow-lift);
}
.wp-block-cover.qrh-memories {
	border-radius: var(--qrh-radius);
	overflow: hidden;
	min-height: 460px;
}

/* =====================================================================
   12. WOOCOMMERCE POLISH  (applies when WooCommerce is active)
   ===================================================================== */
body.qrh .woocommerce ul.products li.product {
	background: var(--qrh-white);
	border: 1px solid var(--qrh-border);
	border-radius: var(--qrh-radius);
	box-shadow: var(--qrh-shadow-soft);
	padding: 1rem;
	transition: box-shadow 0.25s ease;
}
body.qrh .woocommerce ul.products li.product:hover { box-shadow: var(--qrh-shadow-lift); }
body.qrh .woocommerce ul.products li.product img { border-radius: 10px; }
body.qrh .woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--qrh-font-heading);
	font-size: 1.15rem;
	color: var(--qrh-navy);
}
body.qrh .woocommerce .price,
body.qrh .woocommerce ul.products li.product .price {
	color: var(--qrh-gold);
	font-weight: 600;
}
body.qrh .woocommerce span.onsale {
	background: var(--qrh-gold);
	border-radius: var(--qrh-radius-pill);
}

/* =====================================================================
   13. ACCESSIBILITY + MOTION
   ===================================================================== */
body.qrh a:focus-visible,
body.qrh button:focus-visible,
.wp-block-button__link:focus-visible,
body.qrh input:focus-visible,
body.qrh select:focus-visible,
body.qrh textarea:focus-visible {
	outline: 2px solid var(--qrh-gold);
	outline-offset: 3px;
	border-radius: 4px;
}
.has-navy-background-color a:focus-visible,
.has-navy-background-color .wp-block-button__link:focus-visible {
	outline-color: var(--qrh-ivory);
}
@media (prefers-reduced-motion: reduce) {
	body.qrh *,
	body.qrh *::before,
	body.qrh *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
	}
}

/* =====================================================================
   14. SMALL SCREENS
   ===================================================================== */
@media (max-width: 781px) {
	.qrh-band {
		padding-top: 2.75rem;
		padding-bottom: 2.75rem;
	}
	.qrh-hero-buttons .wp-block-button { width: 100%; }
	.qrh-hero-buttons .wp-block-button__link {
		width: 100%;
		text-align: center;
	}
}