/* ==========================================================================
   Youthblazer - Front-End Block Styles
   Bridges Gutenberg block output classes with the theme design
   ========================================================================== */

/* ---------- CSS Variables ---------- */
:root {
	--color-blue: #1E4FBF;
	--color-blue-dark: #153A99;
	--color-blue-light: #E8EFFE;
	--color-yellow: #FFB800;
	--color-yellow-dark: #D99D00;
	--color-yellow-light: #FFF8DE;
	--color-green: #1B7B4A;
	--color-green-dark: #145E38;
	--color-green-light: #E4F5EC;
	--color-white: #FFFFFF;
	--color-cream: #FFFEF5;
	--color-warm: #F5F0E6;
	--color-dark: #07091C;
	--color-slate: #12193A;
	--color-text: #0F1226;
	--color-muted: #5A6080;
}

/* ==========================================================================
   Alignment
   ========================================================================== */

.alignwide {
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
}

.alignfull {
	max-width: none;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* ==========================================================================
   Cover Block
   ========================================================================== */

.wp-block-cover {
	min-height: 340px;
	border-radius: 12px;
	overflow: hidden;
	display: flex;
	align-items: center;
	position: relative;
}

.wp-block-cover.alignfull {
	border-radius: 0;
}

.wp-block-cover .wp-block-cover__inner-container {
	position: relative;
	z-index: 1;
	color: var(--color-white);
	max-width: 900px;
	margin: 0 auto;
	padding: 2rem;
}

.wp-block-cover .wp-block-cover__inner-container h1,
.wp-block-cover .wp-block-cover__inner-container h2,
.wp-block-cover .wp-block-cover__inner-container h3 {
	color: var(--color-white);
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.wp-block-cover .wp-block-cover__inner-container p {
	color: rgba(255, 255, 255, 0.92);
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

/* ==========================================================================
   Group Block
   ========================================================================== */

.wp-block-group {
	padding: 2rem 1.5rem;
}

.wp-block-group.has-background {
	border-radius: 12px;
	margin-top: 1.5rem;
	margin-bottom: 1.5rem;
}

.wp-block-group.alignfull {
	border-radius: 0;
}

.wp-block-group.has-blue-background-color{background:var(--color-blue) !important;}
.wp-block-group.has-blue-background-color *{color:#fff;}
.wp-block-group.has-green-background-color{background:var(--color-green) !important;}
.wp-block-group.has-green-background-color *{color:#fff;}
.wp-block-group.has-yellow-background-color{background:var(--color-yellow) !important;}
.wp-block-group.has-cream-background-color{background:var(--color-cream) !important;}
.wp-block-group.has-warm-background-color{background:var(--color-warm) !important;}

/* ==========================================================================
   Columns Block
   ========================================================================== */

.wp-block-columns {
	gap: 2rem;
}

.wp-block-column {
	flex-basis: 0;
	flex-grow: 1;
}

/* ==========================================================================
   Button Block
   ========================================================================== */

.wp-block-button .wp-block-button__link {
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	font-size: 1rem;
	background-color: var(--color-blue);
	color: var(--color-white);
	border-radius: 50px;
	padding: 0.9rem 2rem;
	text-decoration: none;
	display: inline-block;
	transition: background-color 0.2s ease, transform 0.15s ease;
	border: none;
	cursor: pointer;
	line-height: 1.4;
}

.wp-block-button .wp-block-button__link:hover {
	background-color: var(--color-blue-dark);
	transform: translateY(-1px);
}

.wp-block-button .wp-block-button__link:active {
	transform: translateY(0);
}

/* Yellow variant */
.wp-block-button.is-style-yellow .wp-block-button__link {
	background-color: var(--color-yellow);
	color: var(--color-dark);
}

.wp-block-button.is-style-yellow .wp-block-button__link:hover {
	background-color: var(--color-yellow-dark);
}

/* Green variant */
.wp-block-button.is-style-green .wp-block-button__link {
	background-color: var(--color-green);
	color: var(--color-white);
}

.wp-block-button.is-style-green .wp-block-button__link:hover {
	background-color: var(--color-green-dark);
}

/* Ghost / outline variant */
.wp-block-button.is-style-ghost .wp-block-button__link {
	background-color: transparent;
	color: var(--color-blue);
	border: 2px solid var(--color-blue);
}

.wp-block-button.is-style-ghost .wp-block-button__link:hover {
	background-color: var(--color-blue);
	color: var(--color-white);
}

/* ==========================================================================
   Quote & Pullquote Blocks
   ========================================================================== */

.wp-block-quote {
	border-left: 4px solid var(--color-blue);
	padding: 1rem 1.5rem;
	margin: 1.5rem 0;
	background-color: var(--color-blue-light);
	border-radius: 0 8px 8px 0;
	font-style: italic;
	color: var(--color-slate);
}

.wp-block-quote p {
	font-style: italic;
	color: var(--color-slate);
	font-size: 1.05rem;
	line-height: 1.7;
}

.wp-block-quote cite {
	font-style: normal;
	font-size: 0.88rem;
	color: var(--color-muted);
	display: block;
	margin-top: 0.5rem;
}

.wp-block-pullquote {
	border-top: 3px solid var(--color-yellow);
	border-bottom: 3px solid var(--color-yellow);
	border-left: none;
	border-right: none;
	padding: 1.5rem 0;
	text-align: center;
	margin: 2rem 0;
}

.wp-block-pullquote blockquote p {
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	font-size: 1.25rem;
	color: var(--color-slate);
	font-style: italic;
}

.wp-block-pullquote cite {
	font-style: normal;
	font-size: 0.88rem;
	color: var(--color-muted);
}

/* ==========================================================================
   Gallery Block
   ========================================================================== */

.wp-block-gallery {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
}

.wp-block-gallery .wp-block-image {
	margin: 0;
	overflow: hidden;
	border-radius: 10px;
}

.wp-block-gallery .wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 10px;
	transition: transform 0.3s ease;
}

.wp-block-gallery .wp-block-image img:hover {
	transform: scale(1.03);
}

/* ==========================================================================
   Separator Block
   ========================================================================== */

.wp-block-separator {
	border: none;
	border-top: 2px solid var(--color-warm);
	max-width: 120px;
	margin: 2rem auto;
	opacity: 1;
}

.wp-block-separator.is-style-wide {
	max-width: 100%;
}

.wp-block-separator.is-style-dots {
	border: none;
	max-width: none;
	text-align: center;
	color: var(--color-muted);
}

/* ==========================================================================
   List Block
   ========================================================================== */

.wp-block-list {
	padding-left: 1.5rem;
	line-height: 1.7;
}

.wp-block-list li {
	margin-bottom: 0.35em;
	color: var(--color-text);
}

.wp-block-list li::marker {
	color: var(--color-blue);
}

/* ==========================================================================
   Image Block
   ========================================================================== */

.wp-block-image img {
	border-radius: 10px;
}

.wp-block-image figcaption {
	font-size: 0.88rem;
	color: var(--color-muted);
	text-align: center;
	margin-top: 0.5rem;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 768px) {
	.wp-block-columns {
		flex-direction: column;
		gap: 1.5rem;
	}

	.wp-block-column {
		flex-basis: 100%;
	}

	.wp-block-gallery {
		grid-template-columns: repeat(2, 1fr);
	}

	.wp-block-cover {
		min-height: 260px;
	}

	.wp-block-cover .wp-block-cover__inner-container {
		padding: 1.5rem;
	}

	.wp-block-group {
		padding: 1.5rem 1rem;
	}

	.wp-block-button .wp-block-button__link {
		padding: 0.75rem 1.5rem;
		font-size: 0.95rem;
	}

	.wp-block-pullquote blockquote p {
		font-size: 1.1rem;
	}
}

@media (max-width: 480px) {
	.wp-block-gallery {
		grid-template-columns: 1fr;
	}

	.wp-block-cover {
		min-height: 200px;
	}

	.wp-block-cover .wp-block-cover__inner-container {
		padding: 1rem;
	}

	.wp-block-columns {
		gap: 1rem;
	}
}