/*
Theme Name: Regenique
Theme URI: https://regenique.ru
Author: T-Helper Cellular Technologies
Author URI: https://regenique.ru
Description: Custom block theme for REGENIQUE, a quiet-luxury editorial cosmeceutical brand. theme.json-driven Global Styles, no page builder. Built with the wordpressr R package.
Requires at least: 6.6
Tested up to: 7.0
Requires PHP: 8.0
Version: 0.5.3
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: regenique
Tags: full-site-editing, block-patterns, e-commerce, custom-colors, custom-logo
*/

/* -------------------------------------------------------------------------
   Supplemental CSS. Design tokens (color, type, spacing) live in theme.json;
   this file only holds the artful bits theme.json can't express: the
   skin-line texture, blend-mode logo grids, sticky nav, hero composition.
   ------------------------------------------------------------------------- */

/* Eyebrow label */
.rgq-eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.22em;
	font-weight: 500;
}

/* Lede: comfortable measure */
.rgq-lede { max-width: 56ch; }

/* Italic emphasis inside Playfair headings */
.wp-block-heading em { font-style: italic; }

/* Sticky translucent header */
.rgq-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(244, 234, 216, 0.94);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--wp--preset--color--maroon);
}

/* Hero: image bleeds and fills its column */
.rgq-hero-img img {
	width: 100%;
	height: 100%;
	min-height: 540px;
	object-fit: cover;
	object-position: center;
	display: block;
}

/* Monochrome logo grids (clinics, press): blend into the cream paper */
.rgq-logo-grid img {
	filter: grayscale(1);
	mix-blend-mode: multiply;
	opacity: 0.65;
	transition: opacity 200ms ease, filter 200ms ease;
}
.rgq-logo-grid img:hover {
	filter: grayscale(0);
	opacity: 1;
}

/* Bordered square stat cells */
.rgq-stat {
	border: 1px solid var(--wp--preset--color--maroon);
	aspect-ratio: 1 / 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: var(--wp--preset--spacing--40);
}

/* Mobile: stack hero, soften the giant display sizes already handled by fluid type */
@media (max-width: 781px) {
	.rgq-hero-img img { min-height: 360px; }
}