/*
 * KTECH Fire & Safety – Additional Component Styles (main.css)
 * Loaded after style.css; handles animations, component polish,
 * and page-specific overrides.
 */

/* ============================================================
   KEYFRAME ANIMATIONS
   ============================================================ */
@keyframes ktechFadeUp {
	from { opacity: 0; transform: translateY(32px); }
	to   { opacity: 1; transform: translateY(0); }
}
@keyframes ktechFadeIn {
	from { opacity: 0; }
	to   { opacity: 1; }
}
@keyframes ktechSlideInLeft {
	from { opacity: 0; transform: translateX(-32px); }
	to   { opacity: 1; transform: translateX(0); }
}
@keyframes ktechSlideInRight {
	from { opacity: 0; transform: translateX(32px); }
	to   { opacity: 1; transform: translateX(0); }
}
@keyframes ktechPulse {
	0%, 100% { opacity: 1; }
	50%       { opacity: .6; }
}
@keyframes ktechSpin {
	from { transform: rotate(0deg); }
	to   { transform: rotate(360deg); }
}

/* Spinning loading indicator on submit button */
.btn-loading {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}
.btn-loading::before {
	content: '';
	display: inline-block;
	width: 14px;
	height: 14px;
	border: 2px solid rgba(255,255,255,.4);
	border-top-color: #fff;
	border-radius: 50%;
	animation: ktechSpin .7s linear infinite;
}

/* ============================================================
   HERO SECTION ENHANCEMENTS
   ============================================================ */
.hero__content {
	animation: ktechFadeUp .9s ease both;
}

/* Floating fire-flicker accent element */
.hero::after {
	content: '';
	position: absolute;
	right: 8%;
	top: 15%;
	width: 320px;
	height: 320px;
	background: radial-gradient(circle, rgba(230,51,41,.18) 0%, transparent 70%);
	border-radius: 50%;
	animation: ktechPulse 4s ease-in-out infinite;
	pointer-events: none;
	z-index: 1;
}

@media (max-width: 768px) {
	.hero::after { display: none; }
}

/* ============================================================
   HEADER LOGO HOVER EFFECT
   ============================================================ */
.site-logo .logo-icon {
	transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}
.site-logo:hover .logo-icon {
	transform: scale(1.08) rotate(-3deg);
	box-shadow: 0 4px 16px rgba(230,51,41,.5);
}

/* ============================================================
   NAVIGATION – ACTIVE INDICATOR
   ============================================================ */
.primary-nav ul li.current-menu-item > a,
.primary-nav ul li.current_page_item > a,
.primary-nav ul li.current_page_ancestor > a {
	background-color: rgba(255,255,255,.12) !important;
	color: var(--color-white) !important;
	position: relative;
}
.primary-nav ul li.current-menu-item > a::after,
.primary-nav ul li.current_page_item > a::after {
	content: '';
	position: absolute;
	bottom: -2px;
	left: 50%;
	transform: translateX(-50%);
	width: 20px;
	height: 2px;
	background: var(--color-accent);
	border-radius: 2px;
}

/* ============================================================
   SERVICE CARD — ICON ANIMATIONS
   ============================================================ */
.service-card__icon {
	transition: transform var(--transition-normal);
}
.service-card:hover .service-card__icon {
	transform: scale(1.1) rotate(-5deg);
}

/* ============================================================
   FEATURE CARD ENHANCEMENTS
   ============================================================ */
.feature-card {
	position: relative;
	overflow: hidden;
}
.feature-card::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--color-accent), var(--color-accent-dark));
	transform: scaleX(0);
	transition: transform var(--transition-normal);
	transform-origin: left;
}
.feature-card:hover::after {
	transform: scaleX(1);
}

/* ============================================================
   PROJECT CARD THUMB ICON
   ============================================================ */
.project-card__thumb span:first-child {
	font-size: 52px;
	filter: drop-shadow(0 4px 8px rgba(0,0,0,.4));
	position: relative;
	z-index: 1;
	transition: transform var(--transition-normal);
}
.project-card:hover .project-card__thumb span:first-child {
	transform: scale(1.15);
}

/* ============================================================
   ACCREDITATION BADGE HOVER
   ============================================================ */
.accreditation-badge .badge-icon {
	transition: transform var(--transition-normal), background var(--transition-normal);
}
.accreditation-badge:hover .badge-icon {
	background: rgba(230,51,41,.1);
	border-color: var(--color-accent);
	transform: scale(1.1);
}

/* ============================================================
   PRICING TABLE — HOVER HIGHLIGHT
   ============================================================ */
.pricing-table {
	transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}
.pricing-table:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-xl);
}
.pricing-table__header {
	position: relative;
	overflow: hidden;
}
.pricing-table__header::before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	width: 60px;
	height: 60px;
	background: rgba(255,255,255,.04);
	border-radius: 50%;
	transform: translate(20px, -20px);
}

/* ============================================================
   TRAINING CARD PRICE BADGE
   ============================================================ */
.training-card .training-price {
	background: rgba(230,51,41,.06);
	border: 1px solid rgba(230,51,41,.15);
	border-radius: var(--radius-md);
	padding: var(--spacing-3) var(--spacing-4);
	display: inline-flex;
	align-items: baseline;
	gap: var(--spacing-2);
}

/* ============================================================
   CONTACT FORM – INPUT FOCUS ANIMATION
   ============================================================ */
.form-control {
	position: relative;
}
.form-control:focus {
	transform: none;
}

/* Select dropdown arrow */
select.form-control {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23808080' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1rem center;
	padding-right: 2.5rem;
}

/* ============================================================
   FOOTER LOGO ADJUSTMENT
   ============================================================ */
.footer-top .site-logo .logo-main {
	color: var(--color-white);
}

/* ============================================================
   BACK-TO-TOP BUTTON
   ============================================================ */
.back-to-top {
	position: fixed;
	bottom: 2rem;
	right: 2rem;
	width: 44px;
	height: 44px;
	background: var(--color-accent);
	color: var(--color-white);
	border: none;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.2rem;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(16px);
	transition: all var(--transition-normal);
	box-shadow: var(--shadow-accent);
	z-index: 900;
}
.back-to-top.visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.back-to-top:hover {
	background: var(--color-accent-dark);
	transform: translateY(-2px);
}

/* ============================================================
   WORDPRESS CORE COMPATIBILITY
   ============================================================ */

/* Alignments */
.alignleft  { float: left; margin-right: var(--spacing-6); }
.alignright { float: right; margin-left: var(--spacing-6); }
.aligncenter { text-align: center; margin-inline: auto; display: block; }
.alignwide  { width: calc(100% + 4rem); margin-inline: -2rem; }
.alignfull  { width: 100vw; margin-inline: calc(50% - 50vw); }

/* WP Captions */
.wp-caption {
	max-width: 100%;
}
.wp-caption-text {
	font-size: var(--font-size-sm);
	color: var(--color-text-muted);
	text-align: center;
	margin-top: var(--spacing-2);
}

/* Gutenberg Blocks */
.wp-block-button__link {
	border-radius: var(--radius-md) !important;
}
.wp-block-separator {
	border-color: var(--color-border) !important;
}

/* ============================================================
   PRINT STYLES
   ============================================================ */
@media print {
	.site-header,
	.hamburger-btn,
	.mobile-nav,
	.cta-banner,
	.back-to-top,
	.footer-bottom {
		display: none !important;
	}
	body {
		font-size: 12pt;
		color: #000;
	}
	a { color: #000; text-decoration: underline; }
	.hero {
		min-height: auto;
		padding: 2rem 0;
	}
	.section { padding-block: 1.5rem; }
}

/* ============================================================
   HIGH CONTRAST / REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
	.fade-in { opacity: 1 !important; transform: none !important; }
}

@media (prefers-color-scheme: dark) {
	/* Intentionally minimal — brand is dark-first */
}