/* ==========================================================================
   Eric Ayers — block styles (loaded on the site AND inside the editor)
   ========================================================================== */

:root {
	--ea-blue: #2ea3f2;
	--ea-navy: #0054a5;
	--ea-lime: #d9e837;
	--ea-lime-deep: #b6d333;
	--ea-teal: #00abb8;
	--ea-green: #009639;
	--ea-ink: #0b1630;
	--ea-deep-teal: #0e3440;
	--ea-text: #555;
	--ea-radius: 18px;
	--ea-shadow: 0 10px 30px rgba(11, 22, 48, 0.18);
	--ea-section-pad: clamp(3rem, 7vw, 5.5rem);
	/* Segmented color-wheel ring (8 segments, small gaps) */
	--ea-wheel-ring: conic-gradient(
		#8e44ad 0 43deg, transparent 0 45deg,
		#e5007d 0 88deg, transparent 0 90deg,
		#e30613 0 133deg, transparent 0 135deg,
		#f39200 0 178deg, transparent 0 180deg,
		#ffd500 0 223deg, transparent 0 225deg,
		#009639 0 268deg, transparent 0 270deg,
		#00abb8 0 313deg, transparent 0 315deg,
		#2ea3f2 0 358deg, transparent 0 360deg
	);
	/* Rainbow stripe used under banners and above the footer */
	--ea-stripe: linear-gradient(90deg, #8e44ad, #e5007d, #e30613, #f39200, #ffd500, #009639, #00abb8, #2ea3f2);
}

/* --------------------------------------------------------------------------
   Section backgrounds (Group → Styles)
   -------------------------------------------------------------------------- */
.is-style-ea-sky,
.is-style-ea-night,
.is-style-ea-lime-wave,
.ea-section {
	padding-top: var(--ea-section-pad);
	padding-bottom: var(--ea-section-pad);
}

.is-style-ea-sky {
	background: linear-gradient(180deg, #0054a5 0%, #1e86d6 55%, #2ea3f2 100%);
	color: #fff;
}

.is-style-ea-night {
	background: linear-gradient(180deg, #0b1630 0%, #0e3440 100%);
	color: #dbe6ee;
}

.is-style-ea-lime-wave {
	background: linear-gradient(180deg, #d9e837 0%, #8fcb4a 45%, #00abb8 100%);
	color: var(--ea-ink);
}

.is-style-ea-sky :is(h1, h2, h3, h4, h5, h6),
.is-style-ea-night :is(h1, h2, h3, h4, h5, h6) {
	color: var(--ea-lime);
}

.is-style-ea-sky :is(h1, h2) {
	text-shadow: 0 2px 12px rgba(0, 30, 80, 0.35);
}

.is-style-ea-lime-wave :is(h1, h2, h3, h4, h5, h6) {
	color: var(--ea-navy);
}

.is-style-ea-sky a:not(.wp-element-button),
.is-style-ea-night a:not(.wp-element-button) {
	color: var(--ea-lime);
}

.is-style-ea-lime-wave a:not(.wp-element-button) {
	color: var(--ea-ink);
}

.is-style-ea-card {
	background: #fff;
	border-radius: var(--ea-radius);
	box-shadow: var(--ea-shadow);
	padding: clamp(1.25rem, 3vw, 2.25rem);
	color: var(--ea-text);
}

.ea-eyebrow {
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0.9;
	margin-bottom: 0 !important;
}

.ea-hero h1 {
	margin-top: 0.25rem;
}

.ea-lead {
	font-size: 1.2rem;
}

.ea-placeholder-note {
	border: 2px dashed currentColor;
	border-radius: 12px;
	padding: 1rem;
	opacity: 0.75;
}

/* --------------------------------------------------------------------------
   Color Wheel image style + the portfolio button grid
   -------------------------------------------------------------------------- */
.wp-block-image.is-style-color-wheel {
	--ring: 9px;
	--gap: 4px;
	position: relative;
	width: min(100%, var(--wheel-size, 150px));
	margin-left: auto;
	margin-right: auto;
}

.wp-block-image.is-style-color-wheel::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--ea-wheel-ring);
	-webkit-mask: radial-gradient(closest-side, transparent calc(100% - var(--ring)), #000 calc(100% - var(--ring) + 0.5px));
	mask: radial-gradient(closest-side, transparent calc(100% - var(--ring)), #000 calc(100% - var(--ring) + 0.5px));
	pointer-events: none;
	z-index: 1;
	transition: rotate 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.wp-block-image.is-style-color-wheel a {
	display: block;
	line-height: 0;
}

.wp-block-image.is-style-color-wheel img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 50%;
	border: calc(var(--ring) + var(--gap)) solid #fff;
	box-sizing: border-box;
	background: #fff;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}

.wp-block-image.is-style-color-wheel:hover::before,
.wp-block-image.is-style-color-wheel:focus-within::before {
	rotate: 45deg;
}

.ea-wheel-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1.25rem, 3vw, 2rem) clamp(0.75rem, 2vw, 1.5rem);
	max-width: 1100px;
	margin-left: auto !important;
	margin-right: auto !important;
	align-items: start;
}

@media (min-width: 900px) {
	.ea-wheel-grid {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}
}

.ea-wheel-grid > * {
	margin: 0 !important;
}

.ea-wheel-grid .wp-block-image {
	text-align: center;
}

.ea-wheel-grid .wp-block-image:not(.is-style-color-wheel) img {
	width: min(100%, 150px);
	height: auto;
	margin: 0 auto;
	transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.35s;
}

.ea-wheel-grid .wp-block-image:not(.is-style-color-wheel):hover img,
.ea-wheel-grid .wp-block-image:not(.is-style-color-wheel):focus-within img {
	transform: scale(1.06) rotate(-6deg);
	filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.25));
}

.ea-wheel-grid .wp-element-caption {
	margin-top: 0.65rem;
	margin-bottom: 0;
	font-family: var(--wp--preset--font-family--baloo);
	font-weight: 700;
	font-size: clamp(0.95rem, 2.4vw, 1.1rem);
	line-height: 1.2;
	text-align: center;
	color: var(--ea-lime);
}

.ea-wheel-grid .wp-element-caption a {
	color: inherit !important;
	text-decoration: none;
}

.ea-wheel-grid .wp-element-caption a:hover,
.ea-wheel-grid .wp-element-caption a:focus {
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* On light backgrounds the lime captions switch to navy for contrast */
:where(.ea-section, .ea-404, .entry-content > :not([class*="is-style-ea-"])) .ea-wheel-grid .wp-element-caption {
	color: var(--ea-navy);
}

/* --------------------------------------------------------------------------
   Galleries
   -------------------------------------------------------------------------- */
.wp-block-gallery.is-style-ea-portraits .wp-block-image img {
	aspect-ratio: 4 / 5;
	height: auto !important;
	object-fit: cover;
	border-radius: 14px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
	transition: transform 0.35s ease;
}

.wp-block-gallery.is-style-ea-portraits .wp-block-image:hover img {
	transform: translateY(-4px) scale(1.015);
}

.wp-block-gallery.is-cropped:not(.is-style-ea-portraits):not(.is-style-ea-logos) .wp-block-image img {
	border-radius: 10px;
}

.wp-block-gallery.is-style-ea-logos .wp-block-image {
	background: #f5f7f9;
	border: 1px solid #e6ebf0;
	border-radius: 14px;
	padding: clamp(0.5rem, 2vw, 1rem);
	aspect-ratio: 4 / 3;
	display: flex;
	align-items: center;
	justify-content: center;
}

.wp-block-gallery.is-style-ea-logos .wp-block-image img {
	width: 100% !important;
	height: 100% !important;
	object-fit: contain;
}

/* --------------------------------------------------------------------------
   Steps, videos, misc
   -------------------------------------------------------------------------- */
.ea-steps .wp-block-column {
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: var(--ea-radius);
	padding: 1.5rem;
}

.ea-video-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(1.5rem, 4vw, 2.5rem);
}

@media (min-width: 800px) {
	.ea-video-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.ea-video-grid > * {
	margin: 0 !important;
}

.ea-video-card h3 {
	font-size: 1.15rem;
	margin-bottom: 0.6rem;
}

.ea-video-card .wp-block-embed {
	margin: 0;
}

.wp-block-embed.is-type-video iframe {
	border-radius: 14px;
}

.ea-playshops-badge img {
	width: 180px;
	height: auto;
}

.ea-giftcard img {
	border-radius: 14px;
}

/* Buttons: outline variant per background */
.wp-block-button.is-style-outline > .wp-element-button {
	background: transparent;
	color: var(--ea-navy);
	border: 2px solid currentColor;
}

.wp-block-button.is-style-outline > .wp-element-button:hover,
.wp-block-button.is-style-outline > .wp-element-button:focus {
	background: var(--ea-navy);
	border-color: var(--ea-navy);
	color: #fff;
}

:is(.is-style-ea-sky, .is-style-ea-night) .wp-block-button.is-style-outline > .wp-element-button {
	color: var(--ea-lime);
}

:is(.is-style-ea-sky, .is-style-ea-night) .wp-block-button.is-style-outline > .wp-element-button:hover,
:is(.is-style-ea-sky, .is-style-ea-night) .wp-block-button.is-style-outline > .wp-element-button:focus {
	background: var(--ea-lime);
	border-color: var(--ea-lime);
	color: var(--ea-ink);
}

.wp-element-button:focus-visible,
a:focus-visible,
button:focus-visible {
	outline: 3px solid var(--ea-lime);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before {
		transition: none !important;
		animation: none !important;
	}
}

/* Keep the portrait gallery a comfortable size on big screens */
.wp-block-gallery.is-style-ea-portraits {
	max-width: 980px;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* Galleries: a lone last image stays tile-sized and centered instead of stretching */
.wp-block-gallery.has-nested-images {
	justify-content: center;
}

.wp-block-gallery.has-nested-images.wp-block-gallery figure.wp-block-image {
	flex-grow: 0;
}