/* ==========================================================================
   glass.css — Grain Overlay, Glass Sections, Glass Cards, Badge Glass
   Part of the Romain Recovery theme stylesheet.
   ========================================================================== */

/* ==========================================================================
   1. Grain / Noise Overlay — Centralized for all glass & dark elements
   ========================================================================== */

/* Grain via ::before (light glass elements + dark cards + tabs) */
.glass-section::before,
.glass-card::before,
.wp-block-group.is-style-glass-card::before,
.badge-glass::before,
.wp-block-paragraph.is-style-badge-glass::before,
.hero-info-banner::before,
.achievement-card::before,
.card-glass-dark::before,
.wp-block-group.is-style-card-glass-dark::before,
.services-tabs::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	opacity: var(--grain-opacity, 0.28);
	mix-blend-mode: overlay;
	background-image: var(--grain-svg);
	background-repeat: repeat;
	background-size: 180px 180px;
	z-index: 0;
}

/* Grain via ::after (dark sections — ::before is used for radial glow) */
.section-dark-energy::after,
.wp-block-group.is-style-section-dark-energy::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0.15;
	mix-blend-mode: overlay;
	background-image: var(--grain-svg);
	background-repeat: repeat;
	background-size: 180px 180px;
	z-index: 0;
}

/* Dark elements use a subtler grain */
.card-glass-dark,
.wp-block-group.is-style-card-glass-dark,
.services-tabs {
	--grain-opacity: 0.18;
}

/* Ensure glass containers are positioned for the overlay */
.glass-section,
.glass-card,
.wp-block-group.is-style-glass-card,
.badge-glass,
.wp-block-paragraph.is-style-badge-glass,
.hero-info-banner,
.achievement-card {
	position: relative;
	overflow: hidden;
}

/* Keep content above the grain */
.glass-section > *,
.glass-card > *,
.wp-block-group.is-style-glass-card > *,
.hero-info-banner > *,
.achievement-card > * {
	position: relative;
	z-index: 1;
}

/* ==========================================================================
   2. Glass Section Background
   ========================================================================== */

.glass-section {
	background: var(--glass-light-strong);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}



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

.glass-card,
.wp-block-group.is-style-glass-card {
	background: var(--glass-light);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border: 1px solid var(--border-light);
	border-top: 1px solid var(--border-glass-top);
	border-radius: var(--radius-card);
	padding: var(--wp--preset--spacing--50);
	transition: var(--transition-card);
}

.glass-card:hover,
.wp-block-group.is-style-glass-card:hover {
	transform: translateY(-2px);
	border-color: var(--accent-50);
}

/* ==========================================================================
   4. Badge Glass (Translucent Badges)
   ========================================================================== */

.badge-glass,
.wp-block-paragraph.is-style-badge-glass {
	display: inline-block;
	background: var(--glass-badge);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1.5px solid var(--accent-mid);
	border-top: 1.5px solid rgba(255, 255, 255, 0.7);
	border-radius: var(--radius-pill);
	padding: 8px 20px;
	font-size: var(--wp--preset--font-size--small);
	font-family: var(--wp--preset--font-family--manrope);
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
	letter-spacing: 0.02em;
	white-space: nowrap;
	transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.badge-glass:hover,
.wp-block-paragraph.is-style-badge-glass:hover {
	background: rgba(255, 255, 255, 0.95);
	border-color: var(--wp--preset--color--accent);
	transform: translateY(-1px);
}

.badge-glass a,
.wp-block-paragraph.is-style-badge-glass a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	font-weight: 600;
}

.badge-glass a:hover,
.wp-block-paragraph.is-style-badge-glass a:hover {
	color: var(--accent-mid);
	text-decoration: none;
}