/**
 * BluTruth Books background colors and ornament graphics.
 *
 * Color system:
 *   White   : #FFFFFF  (default page bg — majority of sections)
 *   Dark    : #22307A  (brand forest teal — footer, CTA, newsletter, hero bands)
 *   Accent  : #EEF4FC  (reserved — light teal tint, use sparingly)
 *
 * Ornament language: ornament-concentric.png (neutral gray, no color filter)
 *   used on all decorative background positions to match the approved hero design.
 *
 * @package MadUnicow_Author_Template
 */

/* ==========================================================================
   Site-wide base
   ========================================================================== */
body.madunicow-classic,
body {
	background-color: #FFFFFF;
}

/* Make the Gutenverse wrapper transparent so the body cream shows through */
.site-main--full,
.site-main--full .entry-content {
	background: transparent;
}

/* ==========================================================================
   Section color utilities
   (Apply as additional class in the block editor or via theme patterns)
   ========================================================================== */

/* Brand dark teal — hero bands, CTA, newsletter, and featured sections */
.guten-section.section-dark,
.wp-block-gutenverse-section.section-dark {
	background-color: #22307A !important;
	position: relative;
	overflow: hidden;
}
.guten-section.section-dark .guten-background-overlay {
	background: transparent !important;
}
/* Ornament on dark sections */
.guten-section.section-dark::after {
	content: "";
	display: block;
	position: absolute;
	bottom: -20px;
	right: -20px;
	width: min(360px, 34vw);
	height: min(360px, 34vw);
	background-image: url("../img/ornaments/ornament-concentric.png");
	background-repeat: no-repeat;
	background-position: bottom right;
	background-size: contain;
	pointer-events: none;
	opacity: 0.12;
	z-index: 0;
}

/* Newsletter / accent strip — brand teal, white text */
.guten-section.section-newsletter,
.wp-block-gutenverse-section.section-newsletter {
	background-color: #22307A !important;
	position: relative;
	overflow: hidden;
}
.guten-section.section-newsletter .guten-background-overlay {
	background: transparent !important;
}
/* Ornament on newsletter sections */
.guten-section.section-newsletter::before {
	content: "";
	display: block;
	position: absolute;
	bottom: -20px;
	left: -20px;
	width: min(380px, 36vw);
	height: min(380px, 36vw);
	background-image: url("../img/ornaments/ornament-concentric.png");
	background-repeat: no-repeat;
	background-position: bottom left;
	background-size: contain;
	pointer-events: none;
	opacity: 0.15;
	z-index: 0;
}

/* Light teal tint — reserved accent (keep for legacy, avoid new use) */
.guten-section.section-cream,
.wp-block-gutenverse-section.section-cream {
	background-color: #EEF4FC !important;
}

/* White card surface */
.guten-section.section-white,
.wp-block-gutenverse-section.section-white {
	background-color: #FFFFFF !important;
}

/* ==========================================================================
   Ornament backgrounds
   ornament-hero-2 — top-right flourish, used on opening hero section
   ornament-6     — bottom-left vine, used on mid-page feature sections
   ornament-7     — full-bleed pattern, used on dark/CTA sections
   ========================================================================== */

/*
 * Hero ornament: applied to the FIRST full-width section on full-page layouts.
 * Uses a pseudo-element so the ornament sits behind all content.
 */
.site-main--full .entry-content > .section-wrapper:first-child > section.guten-section {
	position: relative;
	overflow: hidden;
}
.site-main--full .entry-content > .section-wrapper:first-child > section.guten-section::after {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	width: min(480px, 45vw);
	height: 100%;
	background-image: url("../img/ornaments/ornament-hero-2.png");
	background-repeat: no-repeat;
	background-position: top right;
	background-size: contain;
	pointer-events: none;
	opacity: 0.18;
	z-index: 0;
}
@media (max-width: 767px) {
	.site-main--full .entry-content > .section-wrapper:first-child > section.guten-section::after {
		width: min(260px, 60vw);
		opacity: 0.14;
	}
}

/* Opt-in ornament class: bottom-left concentric circles */
.guten-section.ornament-left,
.wp-block-gutenverse-section.ornament-left {
	position: relative;
	overflow: hidden;
}
.guten-section.ornament-left::before,
.wp-block-gutenverse-section.ornament-left::before {
	content: "";
	display: block;
	position: absolute;
	bottom: -20px;
	left: -20px;
	width: min(380px, 36vw);
	height: min(380px, 36vw);
	background-image: url("../img/ornaments/ornament-concentric.png");
	background-repeat: no-repeat;
	background-position: bottom left;
	background-size: contain;
	pointer-events: none;
	opacity: 0.18;
	z-index: 0;
}

/* Opt-in ornament-7 class: full-bleed pattern overlay */
.guten-section.ornament-full,
.wp-block-gutenverse-section.ornament-full {
	position: relative;
}
.guten-section.ornament-full::before,
.wp-block-gutenverse-section.ornament-full::before {
	content: "";
	display: block;
	position: absolute;
	inset: 0;
	background-image: url("../img/ornaments/ornament-7.png");
	background-repeat: repeat;
	background-size: 520px auto;
	pointer-events: none;
	opacity: 0.06;
	z-index: 0;
}

/* Ensure section content stays above pseudo-element overlays */
.guten-section.ornament-left > .guten-container,
.guten-section.ornament-full > .guten-container,
.guten-section.section-dark > .guten-container,
.guten-section.section-newsletter > .guten-container,
.site-main--full .entry-content > .section-wrapper:first-child > section.guten-section > .guten-container {
	position: relative;
	z-index: 1;
}

/* ==========================================================================
   Litza-style alternating section rhythm
   Even-indexed content sections get the white card look; odd get cream.
   Only kicks in when no explicit section-* class is set.
   ========================================================================== */
.site-main--full .section-wrapper:nth-child(even) > section.guten-section:not([class*="section-"]) {
	background-color: #FFFFFF;
}