/**
 * HeiMed Custom Stylesheet
 *
 * Design tokens are defined in /design/design-tokens.md
 * This file implements those tokens as CSS custom properties and component styles.
 *
 * @package HeiMed_Child
 * @since 1.0.0
 */

/* ==========================================================================
   CSS Custom Properties (Design Tokens)
   ========================================================================== */

:root {
	/* Primary palette (green corporate identity) */
	--heimed-primary:       #00935C;
	--heimed-primary-light: #00A86B;
	--heimed-primary-dark:  #007A4C;

	/* Dark tones for text and headings */
	--heimed-dark:          #1B2A4A;
	--heimed-dark-light:    #2A3F6E;
	--heimed-dark-deep:     #111D35;

	/* CTA (same as primary for mono-colour identity) */
	--heimed-cta:           #00935C;
	--heimed-cta-hover:     #007A4C;

	/* Neutrals */
	--heimed-white:       #FFFFFF;
	--heimed-gray-50:     #F8F9FA;
	--heimed-gray-100:    #E9ECEF;
	--heimed-gray-200:    #DEE2E6;
	--heimed-gray-600:    #6C757D;
	--heimed-gray-800:    #343A40;
	--heimed-gray-900:    #212529;

	/* Semantic */
	--heimed-success:     #28A745;
	--heimed-text:        var(--heimed-gray-900);
	--heimed-text-muted:  var(--heimed-gray-600);
	--heimed-bg:          var(--heimed-white);
	--heimed-bg-alt:      var(--heimed-gray-50);

	/* Typography */
	--heimed-font-primary:   'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--heimed-font-heading:   'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--heimed-font-mono:      'JetBrains Mono', 'Fira Code', monospace;

	/* Font sizes (fluid) */
	--heimed-text-sm:    0.875rem;
	--heimed-text-base:  1rem;
	--heimed-text-lg:    1.125rem;
	--heimed-text-xl:    1.25rem;
	--heimed-text-2xl:   1.5rem;
	--heimed-text-3xl:   1.875rem;
	--heimed-text-4xl:   2.25rem;
	--heimed-text-5xl:   3rem;

	/* Spacing (8px grid) */
	--heimed-space-1:    0.25rem;   /* 4px */
	--heimed-space-2:    0.5rem;    /* 8px */
	--heimed-space-3:    0.75rem;   /* 12px */
	--heimed-space-4:    1rem;      /* 16px */
	--heimed-space-6:    1.5rem;    /* 24px */
	--heimed-space-8:    2rem;      /* 32px */
	--heimed-space-10:   2.5rem;    /* 40px */
	--heimed-space-12:   3rem;      /* 48px */
	--heimed-space-16:   4rem;      /* 64px */
	--heimed-space-20:   5rem;      /* 80px */
	--heimed-space-24:   6rem;      /* 96px */

	/* Layout */
	--heimed-max-width:  1200px;
	--heimed-radius:     4px;
	--heimed-radius-lg:  8px;
	--heimed-shadow:     0 2px 4px rgba(0, 0, 0, 0.08);
	--heimed-shadow-md:  0 4px 8px rgba(0, 0, 0, 0.1);
	--heimed-shadow-lg:  0 8px 24px rgba(0, 0, 0, 0.12);

	/* Transitions */
	--heimed-transition: 200ms ease;
}

/* ==========================================================================
   Base Styles
   ========================================================================== */

body {
	font-family: var(--heimed-font-primary);
	color: var(--heimed-text);
	line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--heimed-font-heading);
	font-weight: 700;
	line-height: 1.3;
	color: var(--heimed-dark);
}

a {
	color: var(--heimed-primary);
	transition: color var(--heimed-transition);
}

a:hover {
	color: var(--heimed-primary-dark);
}

/* ==========================================================================
   Components
   ========================================================================== */

/* --- CTA Button --- */
.heimed-btn-cta {
	display: inline-block;
	padding: var(--heimed-space-4) var(--heimed-space-8);
	background-color: var(--heimed-cta);
	color: var(--heimed-white);
	font-size: var(--heimed-text-lg);
	font-weight: 600;
	text-decoration: none;
	border: none;
	border-radius: var(--heimed-radius);
	cursor: pointer;
	transition: background-color var(--heimed-transition), transform var(--heimed-transition), box-shadow var(--heimed-transition);
}

.heimed-btn-cta:hover,
.heimed-btn-cta:focus {
	background-color: var(--heimed-cta-hover);
	color: var(--heimed-white);
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 147, 92, 0.3);
}

/* --- Secondary Button --- */
.heimed-btn-secondary {
	display: inline-block;
	padding: var(--heimed-space-3) var(--heimed-space-6);
	background-color: transparent;
	color: var(--heimed-primary);
	font-size: var(--heimed-text-base);
	font-weight: 600;
	text-decoration: none;
	border: 2px solid var(--heimed-primary);
	border-radius: var(--heimed-radius);
	cursor: pointer;
	transition: all var(--heimed-transition);
}

.heimed-btn-secondary:hover,
.heimed-btn-secondary:focus {
	background-color: var(--heimed-primary);
	color: var(--heimed-white);
}

/* --- Hero Section --- */
.heimed-hero {
	position: relative;
	padding: var(--heimed-space-24) var(--heimed-space-4);
	background-color: var(--heimed-dark);
	color: var(--heimed-white);
	text-align: center;
	overflow: hidden;
	min-height: 480px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.heimed-hero--has-image {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.heimed-hero--has-image::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		rgba(27, 42, 74, 0.40) 0%,
		rgba(27, 42, 74, 0.55) 100%
	);
	z-index: 1;
}

.heimed-hero .heimed-section__inner {
	position: relative;
	z-index: 2;
}

.heimed-hero h1 {
	color: var(--heimed-white);
	font-size: var(--heimed-text-5xl);
	margin-bottom: var(--heimed-space-6);
	max-width: 900px;
	margin-left: auto;
	margin-right: auto;
}

.heimed-hero p {
	font-size: var(--heimed-text-xl);
	color: var(--heimed-gray-200);
	max-width: 700px;
	margin: 0 auto var(--heimed-space-8);
	line-height: 1.6;
}

.heimed-hero .heimed-btn-cta {
	font-size: var(--heimed-text-xl);
	padding: var(--heimed-space-4) var(--heimed-space-10);
}

/* Green accent bar under hero */
.heimed-hero::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: var(--heimed-primary);
	z-index: 3;
}

/* --- Section --- */
.heimed-section {
	padding: var(--heimed-space-20) var(--heimed-space-4);
}

.heimed-section--alt {
	background-color: var(--heimed-bg-alt);
}

.heimed-section--green {
	background-color: var(--heimed-primary);
	color: var(--heimed-white);
}

.heimed-section--green h2,
.heimed-section--green h3 {
	color: var(--heimed-white);
}

.heimed-section__inner {
	max-width: var(--heimed-max-width);
	margin: 0 auto;
}

.heimed-section__header {
	text-align: center;
	margin-bottom: var(--heimed-space-12);
}

.heimed-section__header h2 {
	font-size: var(--heimed-text-3xl);
	margin-bottom: var(--heimed-space-4);
}

.heimed-section__header p {
	font-size: var(--heimed-text-lg);
	color: var(--heimed-text-muted);
	max-width: 600px;
	margin: 0 auto;
}

/* --- Services Grid --- */
.heimed-services-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: var(--heimed-space-8);
	margin-top: var(--heimed-space-8);
}

.heimed-service-card {
	background: var(--heimed-white);
	border-radius: var(--heimed-radius-lg);
	box-shadow: var(--heimed-shadow);
	transition: box-shadow var(--heimed-transition), transform var(--heimed-transition);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.heimed-service-card:hover {
	box-shadow: var(--heimed-shadow-lg);
	transform: translateY(-4px);
}

.heimed-service-card__image {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	display: block;
}

.heimed-service-card__content {
	padding: var(--heimed-space-6) var(--heimed-space-6) var(--heimed-space-8);
	flex: 1;
	display: flex;
	flex-direction: column;
}

.heimed-service-card h3 {
	font-size: var(--heimed-text-2xl);
	margin-bottom: var(--heimed-space-3);
}

.heimed-service-card p {
	color: var(--heimed-text-muted);
	margin-bottom: var(--heimed-space-6);
	flex: 1;
}

.heimed-service-card .heimed-btn-secondary {
	align-self: flex-start;
}

/* Clickable card wrapper */
a.heimed-service-card {
	text-decoration: none;
	color: inherit;
}

a.heimed-service-card:hover h3 {
	color: var(--heimed-primary);
}

/* --- Differentiators / Features Grid --- */
.heimed-features-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--heimed-space-8);
}

.heimed-feature {
	display: flex;
	gap: var(--heimed-space-4);
	align-items: flex-start;
}

.heimed-feature__icon {
	flex-shrink: 0;
	width: 56px;
	height: 56px;
	background: rgba(0, 147, 92, 0.1);
	border-radius: var(--heimed-radius-lg);
	display: flex;
	align-items: center;
	justify-content: center;
}

.heimed-feature__icon svg {
	width: 28px;
	height: 28px;
	color: var(--heimed-primary);
}

.heimed-section--green .heimed-feature__icon {
	background: rgba(255, 255, 255, 0.15);
}

.heimed-section--green .heimed-feature__icon svg {
	color: var(--heimed-white);
}

.heimed-feature__text h3 {
	font-size: var(--heimed-text-lg);
	margin-bottom: var(--heimed-space-2);
}

.heimed-feature__text p {
	color: var(--heimed-text-muted);
	font-size: var(--heimed-text-base);
	line-height: 1.6;
}

.heimed-section--green .heimed-feature__text p {
	color: rgba(255, 255, 255, 0.85);
}

/* --- CTA Block --- */
.heimed-cta-block {
	text-align: center;
	padding: var(--heimed-space-16) var(--heimed-space-4);
	background-color: var(--heimed-primary);
	color: var(--heimed-white);
}

.heimed-cta-block h2 {
	color: var(--heimed-white);
	font-size: var(--heimed-text-3xl);
	margin-bottom: var(--heimed-space-4);
}

.heimed-cta-block p {
	color: rgba(255, 255, 255, 0.9);
	margin-bottom: var(--heimed-space-8);
	max-width: 600px;
	margin-left: auto;
	margin-right: auto;
	font-size: var(--heimed-text-lg);
}

.heimed-cta-block .heimed-btn-cta {
	background-color: var(--heimed-white);
	color: var(--heimed-primary);
	font-size: var(--heimed-text-lg);
}

.heimed-cta-block .heimed-btn-cta:hover {
	background-color: var(--heimed-gray-100);
	color: var(--heimed-primary-dark);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* --- About Layout --- */
.heimed-about-intro {
	display: grid;
	grid-template-columns: 300px 1fr;
	gap: var(--heimed-space-12);
	align-items: start;
}

.heimed-about-portrait {
	width: 100%;
	border-radius: var(--heimed-radius-lg);
	box-shadow: var(--heimed-shadow-lg);
	aspect-ratio: 3 / 4;
	object-fit: cover;
}

.heimed-about-text h2:first-child {
	margin-top: 0;
}

/* --- Process Steps --- */
.heimed-process {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--heimed-space-8);
	counter-reset: process-counter;
}

.heimed-process__step {
	text-align: center;
	padding: var(--heimed-space-8) var(--heimed-space-4);
	counter-increment: process-counter;
}

.heimed-process__step::before {
	content: counter(process-counter);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	background: var(--heimed-primary);
	color: var(--heimed-white);
	border-radius: 50%;
	font-size: var(--heimed-text-2xl);
	font-weight: 700;
	margin: 0 auto var(--heimed-space-4);
}

.heimed-process__step h3 {
	font-size: var(--heimed-text-lg);
	margin-bottom: var(--heimed-space-2);
}

.heimed-process__step p {
	color: var(--heimed-text-muted);
	font-size: var(--heimed-text-base);
}

/* --- Contact Page --- */
.heimed-contact-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--heimed-space-12);
}

.heimed-contact-info h3 {
	color: var(--heimed-primary);
	margin-bottom: var(--heimed-space-4);
}

/* --- WPForms Styling --- */
.wpforms-container {
	margin-bottom: var(--heimed-space-12);
}

.wpforms-container .wpforms-form .wpforms-field-label {
	font-family: var(--heimed-font-primary);
	font-weight: 600;
	font-size: var(--heimed-text-base);
	color: var(--heimed-dark);
	margin-bottom: var(--heimed-space-2);
}

.wpforms-container .wpforms-form .wpforms-field-sublabel {
	font-size: var(--heimed-text-sm);
	color: var(--heimed-text-muted);
}

.wpforms-container .wpforms-form .wpforms-required-label {
	color: var(--heimed-primary);
}

.wpforms-container .wpforms-form input[type="text"],
.wpforms-container .wpforms-form input[type="email"],
.wpforms-container .wpforms-form textarea {
	width: 100%;
	padding: var(--heimed-space-3) var(--heimed-space-4);
	font-family: var(--heimed-font-primary);
	font-size: var(--heimed-text-base);
	color: var(--heimed-text);
	background-color: var(--heimed-white);
	border: 1px solid var(--heimed-gray-200);
	border-radius: var(--heimed-radius);
	transition: border-color var(--heimed-transition), box-shadow var(--heimed-transition);
}

.wpforms-container .wpforms-form input[type="text"]:focus,
.wpforms-container .wpforms-form input[type="email"]:focus,
.wpforms-container .wpforms-form textarea:focus {
	border-color: var(--heimed-primary);
	box-shadow: 0 0 0 3px rgba(0, 147, 92, 0.15);
	outline: none;
}

.wpforms-container .wpforms-form textarea {
	min-height: 150px;
	resize: vertical;
}

.wpforms-container .wpforms-form .wpforms-field {
	margin-bottom: var(--heimed-space-6);
}

.wpforms-container .wpforms-form button[type="submit"],
.wpforms-container .wpforms-form .wpforms-submit {
	display: inline-block;
	padding: var(--heimed-space-4) var(--heimed-space-8);
	background-color: var(--heimed-cta);
	color: var(--heimed-white);
	font-family: var(--heimed-font-primary);
	font-size: var(--heimed-text-lg);
	font-weight: 600;
	text-decoration: none;
	border: none;
	border-radius: var(--heimed-radius);
	cursor: pointer;
	transition: background-color var(--heimed-transition), transform var(--heimed-transition), box-shadow var(--heimed-transition);
}

.wpforms-container .wpforms-form button[type="submit"]:hover,
.wpforms-container .wpforms-form .wpforms-submit:hover {
	background-color: var(--heimed-cta-hover);
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 147, 92, 0.3);
}

.wpforms-container .wpforms-confirmation-container-full {
	background-color: rgba(0, 147, 92, 0.08);
	border: 1px solid var(--heimed-primary);
	border-radius: var(--heimed-radius);
	padding: var(--heimed-space-6);
	color: var(--heimed-dark);
}

/* --- FAQ Accordion --- */
.heimed-faq {
	max-width: 800px;
	margin: 0 auto;
}

.heimed-faq__item {
	border-bottom: 1px solid var(--heimed-gray-200);
}

.heimed-faq__item:first-child {
	border-top: 1px solid var(--heimed-gray-200);
}

.heimed-faq__question {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	padding: var(--heimed-space-6) 0;
	background: none;
	border: none;
	cursor: pointer;
	font-family: var(--heimed-font-heading);
	font-size: var(--heimed-text-lg);
	font-weight: 600;
	color: var(--heimed-dark);
	text-align: left;
	line-height: 1.4;
	transition: color var(--heimed-transition);
}

.heimed-faq__question:hover,
.heimed-faq__question:focus {
	color: var(--heimed-primary);
	background-color: transparent;
	outline: none;
}

.heimed-faq__question:focus-visible {
	outline: 2px solid var(--heimed-primary);
	outline-offset: 2px;
	border-radius: var(--heimed-radius);
}

.heimed-faq__question::after {
	content: '';
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	margin-left: var(--heimed-space-4);
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform var(--heimed-transition);
}

.heimed-faq__question[aria-expanded="true"]::after {
	transform: rotate(-135deg);
}

.heimed-faq__answer {
	overflow: hidden;
}

.heimed-faq__answer p {
	padding: 0 0 var(--heimed-space-6);
	color: var(--heimed-text-muted);
	font-size: var(--heimed-text-base);
	line-height: 1.7;
	margin: 0;
}

/* --- Language switcher in navigation --- */
.heimed-lang-switcher a {
	font-weight: 700;
	font-size: 0.8125rem;
	letter-spacing: 0.05em;
	color: var(--heimed-primary) !important;
	padding: 4px 10px;
	border: 2px solid var(--heimed-primary);
	border-radius: 4px;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.heimed-lang-switcher a:hover {
	background-color: var(--heimed-primary);
	color: #fff !important;
}

/* --- Contact Links with Icons --- */
.heimed-contact-links {
	display: flex;
	flex-direction: column;
	gap: var(--heimed-space-4);
	margin: var(--heimed-space-6) 0;
}

.heimed-contact-link {
	display: flex;
	align-items: center;
	gap: var(--heimed-space-3);
	text-decoration: none;
	color: var(--heimed-text);
	padding: var(--heimed-space-3) var(--heimed-space-4);
	border-radius: var(--heimed-radius);
	transition: background-color var(--heimed-transition), color var(--heimed-transition);
}

.heimed-contact-link:hover {
	background-color: var(--heimed-bg-alt);
	color: var(--heimed-primary);
}

.heimed-contact-icon {
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	color: var(--heimed-primary);
}

/* --- Green top border for sections --- */
.heimed-section--border-top {
	border-top: 3px solid var(--heimed-primary);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 768px) {
	.heimed-hero {
		min-height: 400px;
		padding: var(--heimed-space-16) var(--heimed-space-4);
	}

	.heimed-hero h1 {
		font-size: var(--heimed-text-3xl);
	}

	.heimed-hero p {
		font-size: var(--heimed-text-lg);
	}

	.heimed-hero .heimed-btn-cta {
		font-size: var(--heimed-text-lg);
		padding: var(--heimed-space-3) var(--heimed-space-6);
	}

	.heimed-section {
		padding: var(--heimed-space-12) var(--heimed-space-4);
	}

	.heimed-features-grid {
		grid-template-columns: 1fr;
		gap: var(--heimed-space-6);
	}

	.heimed-services-grid {
		grid-template-columns: 1fr;
	}

	.heimed-about-intro {
		grid-template-columns: 1fr;
		text-align: center;
	}

	.heimed-about-portrait {
		max-width: 250px;
		margin: 0 auto;
	}

	.heimed-process {
		grid-template-columns: 1fr;
		gap: var(--heimed-space-4);
	}

	.heimed-contact-grid {
		grid-template-columns: 1fr;
	}

	.heimed-section__header h2 {
		font-size: var(--heimed-text-2xl);
	}

	.heimed-faq__question {
		font-size: var(--heimed-text-base);
		padding: var(--heimed-space-4) 0;
	}

	.heimed-faq__question::after {
		width: 16px;
		height: 16px;
	}
}