/**
 * Contact Page Styles
 * Elegant Dark Ocean Gradient design - Completely redesigned
 *
 * @package Techtronic_Learning
 * @since 1.0.0 (Redesigned Nov 2025)
 */

/* ==========================================================================
   Contact Page Layout
   ========================================================================== */

.contact-page,
.faq-page {
	background: var(--surface-0);
}

/* ==========================================================================
   Page Hero
   ========================================================================== */

.page-hero {
	position: relative;
	padding: var(--spacing-6xl) 0 var(--spacing-4xl);
	background: var(--surface-0);
	overflow: hidden;
}

.page-hero__title {
	font-family: var(--font-display);
	font-size: var(--text-5xl);
	font-weight: var(--weight-bold);
	line-height: var(--leading-tight);
	color: var(--gray-50);
	margin-bottom: var(--spacing-md);
	text-align: center;
	text-shadow: 0 0 30px rgba(34, 211, 238, 0.15);
}

.page-hero__excerpt {
	font-family: var(--font-body);
	font-size: var(--text-lg);
	line-height: var(--leading-relaxed);
	color: var(--gray-300);
	text-align: center;
	max-width: 700px;
	margin: 0 auto;
}

/* Responsive Hero */
@media (max-width: 991px) {
	.page-hero {
		padding: var(--spacing-5xl) 0 var(--spacing-3xl);
	}

	.page-hero__title {
		font-size: var(--text-4xl);
	}

	.page-hero__excerpt {
		font-size: var(--text-base);
	}
}

@media (max-width: 767px) {
	.page-hero {
		padding: var(--spacing-4xl) 0 var(--spacing-3xl);
	}

	.page-hero__title {
		font-size: var(--text-3xl);
	}
}

/* ==========================================================================
   Contact Info Grid
   ========================================================================== */

.contact-content {
	padding: var(--spacing-5xl) 0;
	background: var(--surface-0);
}

.contact-info-grid {
	margin-bottom: var(--spacing-4xl);
}

/* Contact Info Card - Dark Glassmorphic */
.contact-info-card {
	/* Dark glassmorphic background */
	background: rgba(30, 41, 59, 0.5);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border: 1px solid rgba(148, 163, 184, 0.2);
	border-radius: var(--radius-lg);
	padding: var(--spacing-3xl);
	text-align: center;

	box-shadow:
		var(--shadow-base),
		0 0 0 1px rgba(6, 182, 212, 0.05),
		inset 0 1px 0 0 rgba(255, 255, 255, 0.05);

	transition: all var(--duration-slow) var(--ease-out);
	position: relative;
	overflow: hidden;
}

.contact-info-card:hover {
	background: rgba(30, 41, 59, 0.7);
	border-color: rgba(6, 182, 212, 0.4);
	box-shadow:
		var(--shadow-lg),
		0 0 0 1px rgba(6, 182, 212, 0.3),
		0 0 24px rgba(6, 182, 212, 0.15),
		inset 0 1px 0 0 rgba(255, 255, 255, 0.1);
	transform: translateY(-4px);
}

/* Shimmer effect */
.contact-info-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(
		90deg,
		transparent 0%,
		rgba(6, 182, 212, 0.08) 50%,
		transparent 100%
	);
	transition: left 0.6s ease;
	pointer-events: none;
}

.contact-info-card:hover::before {
	left: 100%;
}

.contact-info-card__icon {
	width: 64px;
	height: 64px;
	margin: 0 auto var(--spacing-lg);
	display: flex;
	align-items: center;
	justify-content: center;

	/* Ocean gradient background */
	background: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-600) 100%);
	border: 2px solid var(--primary-400);
	border-radius: var(--radius-md);
	color: #ffffff;

	box-shadow: 0 4px 16px rgba(6, 182, 212, 0.3);
	transition: all var(--duration-slow) var(--ease-out);
}

.contact-info-card:hover .contact-info-card__icon {
	background: linear-gradient(135deg, var(--primary-400) 0%, var(--primary-500) 100%);
	box-shadow: 0 8px 24px rgba(6, 182, 212, 0.5);
	transform: scale(1.1) rotate(5deg);
}

.contact-info-card__icon svg {
	width: 32px;
	height: 32px;
}

.contact-info-card__title {
	font-family: var(--font-display);
	font-size: var(--text-xl);
	font-weight: var(--weight-semibold);
	color: var(--gray-50);
	margin-bottom: var(--spacing-sm);
	position: relative;
	z-index: 1;
}

.contact-info-card__description {
	font-family: var(--font-body);
	font-size: var(--text-base);
	color: var(--gray-300);
	position: relative;
	z-index: 1;
}

.contact-info-card__description a {
	color: var(--primary-400);
	text-decoration: none;
	transition: color var(--duration-base) var(--ease-out);
}

.contact-info-card__description a:hover {
	color: var(--primary-300);
	text-decoration: underline;
}

/* Responsive Contact Info */
@media (max-width: 991px) {
	.contact-content {
		padding: var(--spacing-4xl) 0;
	}

	.contact-info-grid {
		margin-bottom: var(--spacing-3xl);
	}

	.contact-info-card {
		padding: var(--spacing-2xl);
	}

	.contact-info-card__icon {
		width: 56px;
		height: 56px;
	}

	.contact-info-card__icon svg {
		width: 28px;
		height: 28px;
	}
}

@media (max-width: 767px) {
	.contact-content {
		padding: var(--spacing-3xl) 0;
	}

	.contact-info-card {
		padding: var(--spacing-lg);
	}

	.contact-info-card__title {
		font-size: var(--text-lg);
	}

	.contact-info-card__description {
		font-size: var(--text-sm);
	}
}

/* ==========================================================================
   Contact Form
   ========================================================================== */

.contact-form-wrapper {
	max-width: 800px;
	margin: 0 auto;
}

.contact-form__title {
	font-family: var(--font-display);
	font-size: var(--text-3xl);
	font-weight: var(--weight-bold);
	line-height: var(--leading-tight);
	color: var(--gray-50);
	margin-bottom: var(--spacing-2xl);
	text-align: center;
}

/* Contact Form - Dark Glassmorphic Container */
.contact-form {
	/* Dark glassmorphic background */
	background: rgba(30, 41, 59, 0.4);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border: 1px solid rgba(148, 163, 184, 0.2);
	border-radius: var(--radius-lg);
	padding: var(--spacing-4xl);

	box-shadow:
		var(--shadow-lg),
		0 0 0 1px rgba(6, 182, 212, 0.05),
		inset 0 1px 0 0 rgba(255, 255, 255, 0.05);
}

.contact-form .form-field {
	margin-bottom: var(--spacing-xl);
}

.contact-form .form-field:last-child {
	margin-bottom: 0;
	margin-top: var(--spacing-2xl);
}

.contact-form .form-label {
	display: block;
	font-family: var(--font-display);
	font-size: var(--text-sm);
	font-weight: var(--weight-semibold);
	color: var(--gray-200);
	margin-bottom: var(--spacing-sm);
}

.contact-form .form-label--required::after {
	content: ' *';
	color: var(--primary-400);
}

.contact-form .form-input,
.contact-form .form-textarea {
	width: 100%;
	padding: var(--spacing-md-) var(--spacing-md);

	/* Light background for contrast */
	background: rgba(248, 249, 251, 0.95);
	border: 1px solid rgba(203, 213, 224, 0.3);
	border-radius: var(--radius-base);

	font-family: var(--font-body);
	font-size: var(--text-base);
	color: var(--gray-900);
	line-height: var(--leading-normal);

	transition: all var(--duration-base) var(--ease-out);
}

.contact-form .form-input::placeholder,
.contact-form .form-textarea::placeholder {
	color: var(--gray-400);
}

.contact-form .form-input:focus,
.contact-form .form-textarea:focus {
	outline: none;
	background: #ffffff;
	border-color: var(--primary-500);
	box-shadow:
		var(--shadow-md),
		0 0 0 3px rgba(6, 182, 212, 0.15);
}

.contact-form .form-textarea {
	min-height: 160px;
	resize: vertical;
}

.contact-form .form-helper {
	display: block;
	font-family: var(--font-body);
	font-size: var(--text-xs);
	color: var(--gray-400);
	margin-top: var(--spacing-xs);
}

.contact-form .btn-primary {
	width: 100%;
}

/* Responsive Form */
@media (max-width: 991px) {
	.contact-form {
		padding: var(--spacing-3xl);
	}

	.contact-form__title {
		font-size: var(--text-2xl);
	}
}

@media (max-width: 767px) {
	.contact-form {
		padding: var(--spacing-lg);
	}

	.contact-form__title {
		font-size: var(--text-xl);
		margin-bottom: var(--spacing-lg);
	}

	.contact-form .form-field {
		margin-bottom: var(--spacing-lg);
	}

	.contact-form .form-field:last-child {
		margin-top: var(--spacing-lg);
	}
}

/* ==========================================================================
   Entry Content (page content before form)
   ========================================================================== */

.entry-content {
	font-family: var(--font-body);
	font-size: var(--text-base);
	line-height: var(--leading-relaxed);
	color: var(--gray-300);
	margin-bottom: var(--spacing-4xl);
}

.entry-content p {
	margin-bottom: var(--spacing-md);
}

.entry-content p:last-child {
	margin-bottom: 0;
}

.entry-content a {
	color: var(--primary-400);
	text-decoration: underline;
	transition: color var(--duration-base) var(--ease-out);
}

.entry-content a:hover {
	color: var(--primary-300);
}

/* ===========================================================================
   CONTACT FORM: DARK THEME FIELD POLISH
   =========================================================================== */

.contact-form {
	border-radius: var(--radius-xl);
	padding: clamp(var(--spacing-6), 5vw, var(--spacing-4xl));
	background: linear-gradient(145deg, rgba(30, 41, 59, 0.82), rgba(15, 23, 42, 0.9));
	border-color: rgba(148, 163, 184, 0.26);
}

.contact-form .form-input,
.contact-form .form-textarea {
	min-height: 52px;
	padding: var(--spacing-3) var(--spacing-4);
	background: rgba(15, 23, 42, 0.82);
	border: 1px solid rgba(148, 163, 184, 0.32);
	border-radius: var(--radius-md);
	color: var(--gray-50);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.contact-form .form-textarea {
	min-height: 168px;
}

.contact-form .form-input::placeholder,
.contact-form .form-textarea::placeholder {
	color: var(--gray-400);
	opacity: 1;
}

.contact-form .form-input:hover,
.contact-form .form-textarea:hover {
	border-color: rgba(34, 211, 238, 0.5);
}

.contact-form .form-input:focus,
.contact-form .form-textarea:focus {
	background: rgba(15, 23, 42, 0.96);
	border-color: var(--primary-400);
	box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.18);
}

.contact-form .form-helper {
	color: var(--gray-300);
}