/*
Theme Name: Kindling
Theme URI: https://github.com/matchboxdesigngroup/kindling
Author: Matchbox Design Group
Author URI: https://matchboxdesigngroup.com
Description: A modern, responsive, and accessible block theme for WordPress.
Version: 4.0.0
Requires at least: 6.7
Tested up to: 6.7.2
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kindling

Kindling WordPress Theme, (C) 2025 Matchbox Design Group, LLC.
Kindling is distributed under the terms of the GNU GPL.
*/

/**
 * 1.0 CSS Reset
 *
 * Resetting the CSS to a more sane starting point.
 */

/* Use a more-intuitive box-sizing model. */
*,
*::before,
*::after {
	box-sizing: border-box;
}

/* Allow percentage-based heights in the application. */
html,
body,
.wp-site-blocks {
	min-height: 100%;
}

/* Remove height from the admin bar of the overall height. */
html {
	height: calc(100% - var(--wp-admin--admin-bar--height, 0px));
}

/* Ensure the best type rendering. */
:root {
	font-feature-settings: 'kern';
	font-kerning: normal;
	text-rendering: optimizeLegibility;
}

/* Improve text rendering. */
body {
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
}

/* Improve media defaults. */
img,
picture,
video,
canvas,
svg {
	display: block;
	height: auto;
	max-width: 100%;
}

/* Remove built-in form typography styles. */
input,
button,
textarea,
select {
	font: inherit;
}

/* Avoid text overflows. */
p,
h1,
h2,
h3,
h4,
h5,
h6 {
	overflow-wrap: break-word;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	text-wrap: balance;
	text-wrap: pretty; /* pretty is the nicer result but it isn't supported as well. So balance is here as a fallback */
}

p {
	text-wrap: pretty;
}

/* Reduce the spacing between headings, paragraphs, and lists. */
:is(.wp-block-heading) + :is(p, ol, ul) {
	margin-block-start: 0.5rem;
}

/* Reduce the spacing between stacked headings. */
:is(.wp-block-heading) + .wp-block-heading {
	margin-block-start: 1.25rem;
}

/* Create a root stacking context. */
.wp-site-blocks {
	isolation: isolate;
}

/* Ensure the alt text is visible when an image is missing. */
img {
	font-size: 1rem;
	font-style: italic;
	line-height: 1.5;
}

/* Set the scroll behavior to smooth. */
html {
	scroll-behavior: smooth;
}

/* Enable view transitions. */
@view-transition {
	navigation: auto;
}

.has-text-gradient {
	background: var(--wp--preset--gradient--gradient-01);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.has-quote-icon {
	&:before {
		content: '';
		display: inline-block;
		width: 96px;
		height: 75px;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='75' viewBox='0 0 96 75' fill='none'%3E%3Cpath d='M43.2846 0.186035L23.4559 33.1828C28.937 33.5062 33.4509 35.6898 36.9975 39.7336C40.7053 43.6155 42.5592 48.3062 42.5592 53.8057C42.5592 59.6287 40.5441 64.4811 36.5139 68.3631C32.4836 72.245 27.4861 74.186 21.5214 74.186C15.5567 74.186 10.4786 72.245 6.28715 68.3631C2.09572 64.4811 0 59.2243 0 52.5926C0 49.0341 0.88665 45.0713 2.65995 40.7041C4.43325 36.3369 7.25441 31.1609 11.1234 25.1762C15.1537 19.0298 20.3123 11.5893 26.5995 2.85488L28.2922 0.186035H43.2846ZM96 0.186035L75.9295 33.1828C81.5718 33.5062 86.1662 35.6898 89.7129 39.7336C93.2595 43.6155 95.0328 48.3062 95.0328 53.8057C95.0328 59.6287 93.0176 64.4811 88.9874 68.3631C85.1184 72.245 80.2015 74.186 74.2368 74.186C68.1108 74.186 62.9521 72.245 58.7607 68.3631C54.7305 64.4811 52.7154 59.2243 52.7154 52.5926C52.7154 49.0341 53.602 45.0713 55.3753 40.7041C57.1486 36.3369 59.9698 31.1609 63.8388 25.1762C67.7078 19.0298 72.7859 11.5893 79.0731 2.85488L81.0076 0.186035H96Z' fill='%23B8CAF7'/%3E%3C/svg%3E");
		background-repeat: no-repeat;
		background-size: contain;
		position: absolute;
		left: -60px;
		top: -30px;
		z-index: -1;
	}
}

/* Yoast FAQ block styles */
.wp-block-yoast-faq-block {
	.schema-faq-section {
		padding: var(--wp--preset--spacing--40) 0;

		.schema-faq-question {
			color: #fff;
			font-size: var(--wp--preset--font-size--large);

			strong {
				font-weight: 500;
			}
		}

		.schema-faq-answer {
			color: var(--wp--preset--color--theme-01);
			margin-top: var(--wp--preset--spacing--30);
		}
	}

	:not(:last-of-type)::before {
		background-color: rgba(255, 255, 255, 0.2);
	}
}

/* Hero Animation */
.hero {
	position: relative;
	overflow: hidden;
	background: #000000;
}

/* 1) Stripes */
.hero .stripes {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: repeating-linear-gradient(
		120deg,
		rgba(255, 255, 255, 0.3) 0,
		rgba(255, 255, 255, 0.3) 1px,
		transparent 1px,
		transparent 16px
	);
	pointer-events: none;
}

/* 2) Aurora layers */
.hero .aurora {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background-repeat: no-repeat;
	background-size: 150% 150%;
	margin-block-start: 0;
}

/* Individual auroras with unique colors, speeds, and directions */
.aurora-pink {
	background: radial-gradient(
		circle at left,
		#d57eb2 25%,
		rgba(213, 126, 178, 0) 50%
	);
	animation: moveDiagonal1 7s ease-in-out infinite alternate;
	mix-blend-mode: color;
}
.aurora-coral {
	background: radial-gradient(
		circle at 50% 100%,
		#eb6c5b 25%,
		rgba(235, 108, 91, 0) 50%
	);
	animation: moveDiagonal2 15s ease-in-out infinite alternate;
	mix-blend-mode: color;
}
.aurora-hotpink {
	background: radial-gradient(
		circle at 40% 40%,
		#ea4b81 25%,
		rgba(234, 75, 129, 0) 50%
	);
	animation: moveVertical 15s ease-in-out infinite alternate;
	mix-blend-mode: color;
}
.aurora-purple {
	background: radial-gradient(
		circle at top-left,
		#d03fc6 25%,
		rgba(208, 63, 198, 0) 50%
	);
	animation: moveHorizontal 15s ease-in-out infinite alternate;
	mix-blend-mode: color;
}
.aurora-violet {
	background: radial-gradient(
		circle at 20% 10%,
		#7832f3 25%,
		rgba(120, 50, 243, 0) 50%
	);
	animation: moveDiagonal3 10s ease-in-out infinite alternate;
	mix-blend-mode: color;
}
.aurora-periwinkle {
	background: radial-gradient(
		circle at 50% 25%,
		#736ef5 25%,
		rgba(115, 110, 245, 0) 50%
	);
	animation: moveDiagonal4 7s ease-in-out infinite alternate;
	mix-blend-mode: color;
}
.aurora-blue {
	background: radial-gradient(
		circle at 100% 30%,
		#5296f7 30%,
		rgba(82, 150, 247, 0) 50%
	);
	animation: moveDiagonal5 7s ease-in-out infinite alternate;
	mix-blend-mode: color;
}
.aurora-sky {
	background: radial-gradient(
		circle at 60% 40%,
		#5296f7 0,
		rgba(135, 219, 250, 0) 30%
	);
	animation: moveDiagonal6 10s ease-in-out infinite alternate;
	mix-blend-mode: color-dodge;
}

/* 3) Vignette */
.hero .vignette {
	background: linear-gradient(20deg, #000000 10%, rgba(27, 22, 29, 0) 40%),
		linear-gradient(183deg, #000000 0%, rgba(27, 22, 29, 0) 25%);
	inset: 0;
	margin-block-start: 0;
	pointer-events: none;
	position: absolute;
	z-index: 3;
}

/* 4) Content */
.hero-content {
	position: relative;
	z-index: 4;
	background-color: rgba(46, 35, 84, 0.3);

	h1 {
		font-size: clamp(3.5rem, 2.3261rem + 5.8696vw, 6.875rem);
		line-height: 1.05;
	}
}

/* 5) Animations with unique movement patterns */
@keyframes moveDiagonal1 {
	0% {
		background-position: 0% 0%;
	}
	100% {
		background-position: 100% 100%;
	}
}
@keyframes moveDiagonal2 {
	0% {
		background-position: 100% 0%;
	}
	100% {
		background-position: 0% 100%;
	}
}
@keyframes moveDiagonal3 {
	0% {
		background-position: 0% 100%;
	}
	100% {
		background-position: 100% 0%;
	}
}
@keyframes moveDiagonal4 {
	0% {
		background-position: 50% 0%;
	}
	100% {
		background-position: 50% 100%;
	}
}
@keyframes moveDiagonal5 {
	0% {
		background-position: 0% 50%;
	}
	100% {
		background-position: 100% 50%;
	}
}
@keyframes moveDiagonal6 {
	0% {
		background-position: 25% 25%;
	}
	100% {
		background-position: 75% 75%;
	}
}
@keyframes moveVertical {
	0% {
		background-position: 0% 0%;
	}
	100% {
		background-position: 0% 100%;
	}
}
@keyframes moveHorizontal {
	0% {
		background-position: 0% 0%;
	}
	100% {
		background-position: 100% 0%;
	}
}