/**
 * ELS Components CSS
 *
 * Styles that theme.json cannot handle: animations, transitions,
 * complex hover states, flip cards, mobile menu, and utility classes.
 *
 * All color/spacing/typography tokens come from theme.json via
 * var(--wp--preset--*) custom properties. Do NOT duplicate values here.
 *
 * @package ELS_Theme
 * @version 1.0.0
 */

/* =========================================================================
   Header
   ========================================================================= */

.els-header {
	box-shadow: var(--wp--preset--shadow--nav);
	z-index: 999 !important;
	transition: box-shadow 0.3s ease;
}

a.els-header-logo {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
}

a.els-header-logo img {
	height: 50px;
	width: auto;
	display: block;
}

a.els-footer-logo {
	display: inline-block;
	text-decoration: none;
	margin-bottom: 0;
}

a.els-footer-logo img {
	height: 45px;
	width: auto;
	display: block;
}

.els-header .wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--navy);
	padding: 2rem;
}

.els-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a {
	color: var(--wp--preset--color--white);
	font-size: 1.25rem;
	padding: 0.75rem 0;
}

/* Hide CTA button on mobile */
@media (max-width: 768px) {
	.els-header-cta {
		display: none !important;
	}
}

/* =========================================================================
   Section Labels (uppercase eyebrow text)
   ========================================================================= */

.els-section-label {
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-weight: 700;
	font-size: 0.875rem;
}

/* =========================================================================
   Cards — Shared base
   ========================================================================= */

.els-card {
	border-radius: var(--wp--custom--radius--md);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.els-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--wp--preset--shadow--card-hover);
}

/* =========================================================================
   Numbered Cards (01, 02, 03)
   ========================================================================= */

.els-numbered-card {
	text-align: center;
	box-shadow: var(--wp--preset--shadow--card);
	background: var(--wp--preset--color--white);
}

.els-numbered-card .els-card-number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: var(--wp--custom--radius--full);
	background: var(--wp--preset--color--teal);
	color: var(--wp--preset--color--white) !important;
	font-size: 1.25rem;
	font-weight: 800;
	line-height: 1;
	margin-bottom: 0.5rem;
}

/* =========================================================================
   Feature Icon Circles
   ========================================================================= */

.els-icon-circle {
	width: 64px;
	min-width: 64px;
	height: 64px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0;
	flex-shrink: 0;
	position: relative;
}

.els-icon-circle p {
	font-size: 0;
	line-height: 0;
	margin: 0;
	padding: 0;
	width: 0;
	height: 0;
	overflow: hidden;
}

.els-icon-circle.has-orange-color {
	background-color: var(--wp--preset--color--orange) !important;
}

.els-icon-circle.has-teal-color {
	background-color: var(--wp--preset--color--teal) !important;
}

.els-icon-circle::after {
	content: '';
	display: block;
	width: 28px;
	height: 28px;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

/* Icon assignment by class (preferred) */
.els-icon-clock::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='white'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath stroke-linecap='round' d='M12 6v6l4 2'/%3E%3C/svg%3E");
}

.els-icon-target::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='white'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Ccircle cx='12' cy='12' r='6'/%3E%3Ccircle cx='12' cy='12' r='2' fill='white'/%3E%3C/svg%3E");
}

.els-icon-bolt::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='white'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M13 2L3 14h9l-1 8 10-12h-9l1-8z'/%3E%3C/svg%3E");
}

.els-icon-heart::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='white'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z'/%3E%3C/svg%3E");
}

/* Contact page icons — phone and email (line style, work on light backgrounds) */
.els-icon-phone::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='%2300A8B5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z'/%3E%3C/svg%3E");
}

.els-icon-mail::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='%23F9A825'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z'/%3E%3C/svg%3E");
}

/* Contact options: solid teal/orange circles with white icons, 2-col grid, equal cards */
.els-contact-options-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--spacing-3xl, 2rem);
	max-width: 900px;
	margin: 0 auto;
}
.els-contact-options-grid .els-contact-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	background: var(--wp--preset--color--light-bg);
	border-radius: 14px;
	padding: 2.5rem 2rem;
}
.els-contact-options-grid .els-contact-card .els-icon-circle {
	background-color: #00A8B5 !important;
	flex-shrink: 0;
}
.els-contact-options-grid .els-contact-card:last-child .els-icon-circle {
	background-color: #F9A825 !important;
}
.els-contact-options-grid .els-contact-card .els-icon-phone::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='white'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z'/%3E%3C/svg%3E");
}
.els-contact-options-grid .els-contact-card .els-icon-mail::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='white'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z'/%3E%3C/svg%3E");
}
.els-contact-options-grid .els-contact-card .els-contact-btn-wrap {
	margin-top: auto;
	padding-top: 1rem;
}

/* Positional icon fallback: targets the 4-col "How We Deliver Value" section
   Cards are in .has-navy-background-color columns, 1st/3rd orange, 2nd/4th teal */
.has-navy-background-color > .wp-block-columns > .wp-block-column:nth-child(1) .els-icon-circle::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='white'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath stroke-linecap='round' d='M12 6v6l4 2'/%3E%3C/svg%3E");
}

.has-navy-background-color > .wp-block-columns > .wp-block-column:nth-child(2) .els-icon-circle::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='white'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Ccircle cx='12' cy='12' r='6'/%3E%3Ccircle cx='12' cy='12' r='2' fill='white'/%3E%3C/svg%3E");
}

.has-navy-background-color > .wp-block-columns > .wp-block-column:nth-child(3) .els-icon-circle::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='white'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M13 2L3 14h9l-1 8 10-12h-9l1-8z'/%3E%3C/svg%3E");
}

.has-navy-background-color > .wp-block-columns > .wp-block-column:nth-child(4) .els-icon-circle::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='white'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z'/%3E%3C/svg%3E");
}

.els-icon-circle-sm {
	width: 48px;
	min-width: 48px;
	height: 48px;
}

.els-icon-circle-sm::after {
	width: 22px;
	height: 22px;
}

.els-icon-circle-lg {
	width: 80px;
	min-width: 80px;
	height: 80px;
}

.els-icon-circle-lg::after {
	width: 36px;
	height: 36px;
}

/* =========================================================================
   Flip Cards — Self-Contained Grid
   No WordPress column wrappers. The .els-flip-cards-grid container
   owns the layout, and each .els-flip-card is the direct positioning
   context for its badge.
   ========================================================================= */

.els-flip-cards-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 3rem;
	max-width: 1200px;
	margin: 0 auto;
	padding-top: 1.5rem;
}

.els-flip-card-wrapper {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.els-flip-card-badge {
	width: 3.5rem;
	height: 3.5rem;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.25rem;
	font-weight: 800;
	color: #FFFFFF;
	line-height: 1;
	margin-bottom: -1.75rem;
	z-index: 10;
	position: relative;
}

.els-flip-card-badge-teal {
	background: linear-gradient(135deg, #00A8B5, #008A94);
	box-shadow: 0 4px 12px rgba(0, 168, 181, 0.3);
}

.els-flip-card-badge-orange {
	background: linear-gradient(135deg, #F9A825, #D68400);
	box-shadow: 0 4px 12px rgba(249, 168, 37, 0.3);
}

.els-flip-card {
	perspective: 1000px;
	height: 380px;
	cursor: pointer;
	width: 100%;
}

.els-flip-card-inner {
	position: relative;
	width: 100%;
	height: 100%;
	transition: transform 0.7s;
	transform-style: preserve-3d;
}

.els-flip-card:hover .els-flip-card-inner {
	transform: rotateY(180deg);
}

.els-flip-card-front,
.els-flip-card-back {
	position: absolute;
	width: 100%;
	height: 100%;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	border-radius: 16px;
	padding: 3rem 2rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
}

.els-flip-card-front {
	background: #FFFFFF;
	border: 2px solid #E2E8F0;
}

.els-flip-card-back {
	transform: rotateY(180deg);
	color: #FFFFFF;
}

.els-flip-card-back.els-bg-teal {
	background: linear-gradient(135deg, #00A8B5, #008A94);
}

.els-flip-card-back.els-bg-orange {
	background: linear-gradient(135deg, #F9A825, #D68400);
}

.els-flip-card-back.els-bg-navy {
	background: #001E4E;
}

/* Touch device support — tap to flip */
.els-flip-card.is-flipped .els-flip-card-inner {
	transform: rotateY(180deg);
}

/* Responsive: 2 columns on tablet, 1 on mobile */
@media (max-width: 900px) {
	.els-flip-cards-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 2.5rem;
	}
}

@media (max-width: 600px) {
	.els-flip-cards-grid {
		grid-template-columns: 1fr;
		gap: 2.5rem;
		max-width: 400px;
	}
}

/* =========================================================================
   Stat Cards (hero)
   ========================================================================= */

.els-stat-card {
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: var(--wp--custom--radius--md);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	padding: 1.75rem 1.5rem;
	text-align: center;
	transition: transform 0.3s ease, background 0.3s ease;
}

.els-stat-card:hover {
	transform: translateY(-2px);
	background: rgba(255, 255, 255, 0.12);
}

.els-stat-card-orange {
	border-left: 4px solid var(--wp--preset--color--orange);
}

.els-stat-card-teal {
	border-left: 4px solid var(--wp--preset--color--teal);
}

.els-stat-number {
	font-size: 2.5rem;
	font-weight: 800;
	line-height: 1;
}

/* =========================================================================
   Testimonial
   ========================================================================= */

.els-testimonial {
	position: relative;
	padding-left: 2rem;
}

.els-testimonial::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 4px;
	background: var(--wp--preset--color--teal);
	border-radius: 2px;
}

/* =========================================================================
   Experience Cards (alternating borders)
   ========================================================================= */

.els-experience-card {
	border-radius: var(--wp--custom--radius--md);
	border-top: 4px solid transparent;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.els-experience-card:nth-child(odd) {
	border-top-color: var(--wp--preset--color--teal);
}

.els-experience-card:nth-child(even) {
	border-top-color: var(--wp--preset--color--orange);
}

.els-experience-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--wp--preset--shadow--card-hover);
}

/* =========================================================================
   Benefit Cards (alternating left borders)
   ========================================================================= */

.els-benefit-card {
	border-radius: var(--wp--custom--radius--md);
	border-left: 4px solid transparent;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.els-benefit-card:nth-child(odd) {
	border-left-color: var(--wp--preset--color--teal);
}

.els-benefit-card:nth-child(even) {
	border-left-color: var(--wp--preset--color--orange);
}

.els-benefit-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--wp--preset--shadow--card-hover);
}

/* =========================================================================
   Training Category Cards
   ========================================================================= */

.els-training-card {
	border-radius: var(--wp--custom--radius--md);
	border-top: 4px solid transparent;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.els-training-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--wp--preset--shadow--card-hover);
}

/* =========================================================================
   Copy to Clipboard
   ========================================================================= */

.els-copy-btn {
	cursor: pointer;
	position: relative;
}

.els-copy-btn .els-copy-tooltip {
	position: absolute;
	top: -2rem;
	left: 50%;
	transform: translateX(-50%);
	background: var(--wp--preset--color--dark);
	color: var(--wp--preset--color--white);
	font-size: 0.75rem;
	padding: 0.25rem 0.75rem;
	border-radius: 4px;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease;
	white-space: nowrap;
}

.els-copy-btn.copied .els-copy-tooltip {
	opacity: 1;
}

/* =========================================================================
   Project Showcase Cards
   ========================================================================= */

.els-project-card {
	border-radius: var(--wp--custom--radius--md);
	overflow: hidden;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.els-project-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--wp--preset--shadow--card-hover);
}

.els-project-card img {
	transition: transform 0.3s ease;
}

.els-project-card:hover img {
	transform: scale(1.03);
}

/* =========================================================================
   Button Enhancements (beyond theme.json)
   ========================================================================= */

.wp-block-button__link {
	transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.wp-block-button__link:hover {
	transform: translateY(-2px);
}

.wp-block-button.is-style-els-secondary .wp-block-button__link {
	background: transparent;
	border: 2px solid var(--wp--preset--color--white);
	color: var(--wp--preset--color--white);
}

.wp-block-button.is-style-els-secondary .wp-block-button__link:hover {
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--navy);
}

.wp-block-button.is-style-els-white .wp-block-button__link {
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--teal);
}

.wp-block-button.is-style-els-white .wp-block-button__link:hover {
	background: var(--wp--preset--color--teal);
	color: var(--wp--preset--color--white);
}

/* =========================================================================
   Flip Card Numbered Badges — Real HTML Elements
   Using a flex-column wrapper with negative margin overlap instead of
   ::before pseudo-elements, which fail due to perspective/containment.
   ========================================================================= */

/* =========================================================================
   About Story — Floated Photo
   ========================================================================= */

.els-about-story-grid {
	max-width: 1000px;
	margin: 0 auto;
}

.els-about-photo-float {
	float: left;
	width: 300px;
	margin: 0 2rem 1.5rem 0;
	border-radius: var(--wp--custom--radius--md, 14px);
	box-shadow: var(--wp--preset--shadow--card);
}

.els-about-story-content {
	overflow: hidden;
}

.els-about-story-content p {
	color: var(--wp--preset--color--gray-dark);
	font-size: 1.125rem;
	line-height: 1.8;
	margin-bottom: 1.5rem;
}

.els-about-story-content p:last-child {
	margin-bottom: 0;
}

@media (max-width: 768px) {
	.els-about-photo-float {
		float: none;
		width: 100%;
		max-width: 300px;
		display: block;
		margin: 0 auto 1.5rem;
	}
}

/* =========================================================================
   Partner Type Cards (dark background)
   ========================================================================= */

.els-partner-type-card {
	background: rgba(255, 255, 255, 0.05);
	border: 2px solid rgba(255, 255, 255, 0.2);
	border-radius: var(--wp--custom--radius--md, 14px);
	padding: 2rem;
	text-align: center;
	transition: transform 0.3s ease, background 0.3s ease, border-color 0.3s ease;
}

.els-partner-type-card:hover {
	background: rgba(255, 255, 255, 0.1);
	border-color: var(--wp--preset--color--orange);
	transform: translateY(-6px);
}

.els-partner-type-card h3 {
	color: var(--wp--preset--color--white);
	font-size: 1.25rem;
	font-weight: 700;
	margin-bottom: 0.5rem;
}

.els-partner-type-card p {
	color: rgba(255, 255, 255, 0.85);
	font-size: 1rem;
	line-height: 1.7;
	margin-bottom: 0;
}

/* =========================================================================
   Animations — Fade in on scroll
   ========================================================================= */

.els-animate {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}

.els-animate.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* =========================================================================
   Responsive — Tablet (1024px)
   ========================================================================= */

@media (max-width: 1024px) {
	.els-stat-card {
		padding: 1rem;
	}

	.els-stat-number {
		font-size: 2rem;
	}
}

/* =========================================================================
   Responsive — Mobile (768px)
   ========================================================================= */

@media (max-width: 768px) {
	.els-stat-number {
		font-size: 1.75rem;
	}

	.els-testimonial {
		padding-left: 1.5rem;
	}

	.els-icon-circle {
		width: 48px;
		height: 48px;
		font-size: 1.25rem;
	}
}