/*
Theme Name: A1 Pro Physiotherapy
Theme URI: https://a1prophysiotherapy.com
Author: Suraj Digital
Author URI: https://surajdigital.com
Description: Premium, performance-first, accessible custom WordPress theme built for A1 Pro Physiotherapy Clinic, Najafgarh, New Delhi. Hand-coded with vanilla HTML5, CSS3, PHP 8+ and no page builders. Optimized for Core Web Vitals, Local SEO, and AI Search.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.6
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: a1pro
Tags: healthcare, medical, custom-theme, block-styles, translation-ready, accessible

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

===========================================================================
TABLE OF CONTENTS
===========================================================================
1.0 CSS Reset & Base
2.0 CSS Custom Properties (Design Tokens)
3.0 Typography
4.0 Layout / Containers / Grid Utilities
5.0 Accessibility (Skip Links, Focus States, Screen Reader Text)
6.0 Buttons
7.0 Cards
8.0 Forms
9.0 Header / Navigation
10.0 Footer
11.0 WordPress Core Block / Alignment Classes
12.0 Utilities
13.0 Animations
14.0 Responsive Breakpoints
===========================================================================

NOTE: This file intentionally contains only global, cross-site styles.
Component-specific styles (hero, services, testimonials, etc.) are split
into separate files under /assets/css/ and enqueued conditionally in
inc/enqueue.php to keep the critical rendering path small and to keep
per-page CSS payload as low as possible for Core Web Vitals.
*/

/* ==========================================================================
   1.0 CSS RESET & BASE
   ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

body {
	margin: 0;
	padding: 0;
	font-family: var(--font-body);
	font-size: var(--fs-body);
	line-height: 1.65;
	color: var(--color-dark);
	background-color: var(--color-bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

img,
picture,
svg,
video {
	max-width: 100%;
	height: auto;
	display: block;
}

figure {
	margin: 0;
}

ul,
ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

a {
	color: var(--color-primary);
	text-decoration: none;
	transition: color var(--transition-fast);
}

a:hover,
a:focus {
	color: var(--color-secondary);
}

button {
	font-family: inherit;
	cursor: pointer;
}

input,
textarea,
select,
button {
	font-family: inherit;
	font-size: inherit;
}

table {
	border-collapse: collapse;
	width: 100%;
}

/* ==========================================================================
   2.0 CSS CUSTOM PROPERTIES (DESIGN TOKENS)
   ========================================================================== */

:root {
	/* Brand Colors */
	--color-primary: #0F766E;
	--color-primary-rgb: 15, 118, 110;
	--color-secondary: #14B8A6;
	--color-secondary-rgb: 20, 184, 166;
	--color-accent: #0EA5E9;
	--color-accent-rgb: 14, 165, 233;
	--color-dark: #0F172A;
	--color-gray: #64748B;
	--color-bg: #F8FAFC;
	--color-white: #FFFFFF;
	--color-success: #22C55E;
	--color-warning: #F59E0B;
	--color-danger: #EF4444;

	/* Gradients */
	--gradient-primary: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
	--gradient-soft: linear-gradient(135deg, rgba(15, 118, 110, 0.08) 0%, rgba(14, 165, 233, 0.08) 100%);
	--gradient-glass: linear-gradient(135deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.2) 100%);

	/* Typography */
	--font-heading: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
	--font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
	--font-button: 'Poppins', sans-serif;

	--fs-body: clamp(1rem, 0.95rem + 0.15vw, 1.125rem);
	--fs-h1: clamp(2.25rem, 1.75rem + 2.5vw, 3.75rem);
	--fs-h2: clamp(1.875rem, 1.5rem + 1.5vw, 2.75rem);
	--fs-h3: clamp(1.5rem, 1.3rem + 1vw, 2rem);
	--fs-h4: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
	--fs-small: 0.875rem;

	--fw-regular: 400;
	--fw-medium: 500;
	--fw-semibold: 600;
	--fw-bold: 700;

	/* Spacing Scale */
	--space-xs: 0.5rem;
	--space-sm: 1rem;
	--space-md: 1.5rem;
	--space-lg: 2.5rem;
	--space-xl: 4rem;
	--space-2xl: 6rem;

	/* Radius */
	--radius-sm: 8px;
	--radius-md: 16px;
	--radius-lg: 24px;
	--radius-full: 999px;

	/* Shadows */
	--shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.06);
	--shadow-md: 0 8px 24px rgba(15, 23, 42, 0.08);
	--shadow-lg: 0 16px 48px rgba(15, 23, 42, 0.12);
	--shadow-glow: 0 8px 32px rgba(var(--color-primary-rgb), 0.25);

	/* Glass Effect */
	--glass-bg: rgba(255, 255, 255, 0.7);
	--glass-border: rgba(255, 255, 255, 0.4);
	--glass-blur: 16px;

	/* Layout */
	--container-width: 1280px;
	--container-padding: clamp(1.25rem, 4vw, 3rem);
	--header-height: 84px;

	/* Transitions */
	--transition-fast: 0.2s ease;
	--transition-base: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
	--transition-slow: 0.6s cubic-bezier(0.4, 0, 0.2, 1);

	/* Z-Index Scale */
	--z-header: 1000;
	--z-overlay: 1100;
	--z-modal: 1200;
	--z-toast: 1300;
	--z-floating: 900;
}

/* Dark Mode Ready (toggled via [data-theme="dark"] on <html>) */
[data-theme="dark"] {
	--color-bg: #0B1220;
	--color-dark: #F1F5F9;
	--color-white: #111827;
	--glass-bg: rgba(17, 24, 39, 0.7);
	--glass-border: rgba(255, 255, 255, 0.08);
}

/* ==========================================================================
   3.0 TYPOGRAPHY
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-heading);
	font-weight: var(--fw-semibold);
	color: var(--color-dark);
	line-height: 1.25;
	margin: 0 0 var(--space-sm);
}

h1 { font-size: var(--fs-h1); font-weight: var(--fw-bold); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }

p {
	margin: 0 0 var(--space-sm);
	color: var(--color-gray);
}

.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--font-button);
	font-size: var(--fs-small);
	font-weight: var(--fw-semibold);
	color: var(--color-primary);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin-bottom: var(--space-xs);
}

.section-title {
	max-width: 720px;
	margin-inline: auto;
	text-align: center;
	margin-bottom: var(--space-lg);
}

/* ==========================================================================
   4.0 LAYOUT / CONTAINERS / GRID UTILITIES
   ========================================================================== */

.container {
	width: 100%;
	max-width: var(--container-width);
	margin-inline: auto;
	padding-inline: var(--container-padding);
}

.section {
	padding-block: var(--space-2xl);
	position: relative;
}

.section--tight {
	padding-block: var(--space-xl);
}

.grid {
	display: grid;
	gap: var(--space-md);
}

.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 992px) {
	.grid--4 { grid-template-columns: repeat(2, 1fr); }
	.grid--3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
	.grid--2,
	.grid--3,
	.grid--4 {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   5.0 ACCESSIBILITY
   ========================================================================== */

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: var(--z-toast);
	background: var(--color-primary);
	color: var(--color-white);
	padding: 0.75rem 1.25rem;
	border-radius: 0 0 var(--radius-sm) 0;
	font-weight: var(--fw-semibold);
}

.skip-link:focus {
	left: 0;
}

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

:focus-visible {
	outline: 3px solid var(--color-accent);
	outline-offset: 3px;
	border-radius: var(--radius-sm);
}

/* ==========================================================================
   6.0 BUTTONS
   ========================================================================== */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	font-family: var(--font-button);
	font-weight: var(--fw-semibold);
	font-size: 1rem;
	padding: 0.9rem 1.75rem;
	border-radius: var(--radius-full);
	border: 2px solid transparent;
	cursor: pointer;
	transition: transform var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast);
	min-height: 44px;
	min-width: 44px;
	line-height: 1.2;
	white-space: nowrap;
}

.btn:hover,
.btn:focus-visible {
	transform: translateY(-2px);
}

.btn--primary {
	background: var(--gradient-primary);
	color: var(--color-white);
	box-shadow: var(--shadow-glow);
}

.btn--primary:hover {
	box-shadow: 0 12px 40px rgba(var(--color-primary-rgb), 0.35);
	color: var(--color-white);
}

.btn--outline {
	background: transparent;
	border-color: var(--color-primary);
	color: var(--color-primary);
}

.btn--outline:hover {
	background: var(--color-primary);
	color: var(--color-white);
}

.btn--whatsapp {
	background: #25D366;
	color: var(--color-white);
}

.btn--sm {
	padding: 0.6rem 1.25rem;
	font-size: var(--fs-small);
}

/* ==========================================================================
   7.0 CARDS
   ========================================================================== */

.card {
	background: var(--color-white);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-md);
	padding: var(--space-md);
	transition: transform var(--transition-base), box-shadow var(--transition-base);
}

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

.card--glass {
	background: var(--glass-bg);
	border: 1px solid var(--glass-border);
	-webkit-backdrop-filter: blur(var(--glass-blur));
	backdrop-filter: blur(var(--glass-blur));
}

/* ==========================================================================
   8.0 FORMS
   ========================================================================== */

.form-field {
	margin-bottom: var(--space-sm);
	text-align: left;
}

.form-field label {
	display: block;
	font-weight: var(--fw-medium);
	font-size: var(--fs-small);
	color: var(--color-dark);
	margin-bottom: 0.4rem;
}

.form-field input,
.form-field select,
.form-field textarea {
	width: 100%;
	padding: 0.85rem 1rem;
	border: 1.5px solid #E2E8F0;
	border-radius: var(--radius-sm);
	background: var(--color-white);
	color: var(--color-dark);
	transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
	min-height: 44px;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
	outline: none;
	border-color: var(--color-secondary);
	box-shadow: 0 0 0 4px rgba(var(--color-secondary-rgb), 0.15);
}

.form-field .field-error {
	color: var(--color-danger);
	font-size: var(--fs-small);
	margin-top: 0.3rem;
	display: none;
}

.form-field.has-error input,
.form-field.has-error select,
.form-field.has-error textarea {
	border-color: var(--color-danger);
}

.form-field.has-error .field-error {
	display: block;
}

.form-message {
	padding: var(--space-sm);
	border-radius: var(--radius-sm);
	margin-bottom: var(--space-sm);
	font-weight: var(--fw-medium);
	display: none;
}

.form-message.is-success {
	display: block;
	background: rgba(34, 197, 94, 0.1);
	color: #15803D;
	border: 1px solid rgba(34, 197, 94, 0.3);
}

.form-message.is-error {
	display: block;
	background: rgba(239, 68, 68, 0.1);
	color: #B91C1C;
	border: 1px solid rgba(239, 68, 68, 0.3);
}

/* ---- Search Form ---- */

.search-form {
	display: flex;
	gap: 0.5rem;
	width: 100%;
}

.search-form-wrapper {
	margin-block: var(--space-md);
}

.search-form__input {
	flex-grow: 1;
	padding: 0.85rem 1.1rem;
	border: 1.5px solid #E2E8F0;
	border-radius: var(--radius-full);
	background: var(--color-white);
	color: var(--color-dark);
	min-height: 44px;
	transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.search-form__input:focus {
	outline: none;
	border-color: var(--color-secondary);
	box-shadow: 0 0 0 4px rgba(var(--color-secondary-rgb), 0.15);
}

.search-form__submit {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	flex-shrink: 0;
	border: none;
	border-radius: 50%;
	background: var(--gradient-primary);
	color: var(--color-white);
	transition: transform var(--transition-fast);
}

.search-form__submit:hover {
	transform: scale(1.06);
}

/* ---- Generic Fallback Content Card (template-parts/content.php) ---- */

.content-card {
	display: flex;
	flex-direction: column;
}

.content-card__image-link {
	display: block;
	border-radius: var(--radius-sm);
	overflow: hidden;
	margin-bottom: var(--space-sm);
	aspect-ratio: 4 / 3;
}

.content-card__image-link img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.content-card__title {
	font-size: 1.1rem;
	margin-bottom: 0.4rem;
}

.content-card__title a {
	color: var(--color-dark);
}

.content-card__excerpt {
	font-size: var(--fs-small);
	flex-grow: 1;
}

.content-card__link {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	font-weight: var(--fw-semibold);
	color: var(--color-primary);
	font-size: var(--fs-small);
	margin-top: auto;
}

/* ==========================================================================
   9.0 HEADER / NAVIGATION (base structure — visual detail in header.css)
   ========================================================================== */

.site-header {
	position: sticky;
	top: 0;
	z-index: var(--z-header);
	width: 100%;
	background: var(--glass-bg);
	-webkit-backdrop-filter: blur(var(--glass-blur));
	backdrop-filter: blur(var(--glass-blur));
	border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}

.main-navigation ul {
	display: flex;
	align-items: center;
	gap: var(--space-md);
}

.main-navigation a {
	color: var(--color-dark);
	font-weight: var(--fw-medium);
}

.main-navigation a:hover {
	color: var(--color-primary);
}

/* ==========================================================================
   10.0 FOOTER
   ========================================================================== */

.site-footer {
	background: var(--color-dark);
	color: #CBD5E1;
	padding-block: var(--space-2xl) var(--space-lg);
}

.site-footer a {
	color: #CBD5E1;
}

.site-footer a:hover {
	color: var(--color-secondary);
}

/* ==========================================================================
   11.0 WORDPRESS CORE BLOCK / ALIGNMENT CLASSES
   ========================================================================== */

.alignleft { float: left; margin-right: var(--space-sm); }
.alignright { float: right; margin-left: var(--space-sm); }
.aligncenter { display: block; margin-inline: auto; }
.alignwide { max-width: calc(var(--container-width) * 1.15); margin-inline: auto; }
.alignfull { width: 100%; max-width: none; }

.wp-caption,
.wp-block-image figcaption {
	font-size: var(--fs-small);
	color: var(--color-gray);
	text-align: center;
	margin-top: 0.5rem;
}

.gallery {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: var(--space-sm);
}

/* ==========================================================================
   ICONS (a1pro_icon() sprite output — see inc/helpers.php)
   ==========================================================================
   CRITICAL: every <svg> printed by a1pro_icon() gets class="icon {size}".
   Without explicit width/height, a bare inline SVG falls back to the
   browser default intrinsic size (300x150px), which blows up every
   header, button, and card across the entire site. These rules are the
   single source of truth for icon sizing — do not remove.
   ========================================================================== */

.icon {
	display: inline-block;
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	vertical-align: middle;
	fill: none;
	stroke: currentColor;
}

.icon--xs { width: 14px; height: 14px; }
.icon--sm { width: 18px; height: 18px; }
.icon--md { width: 28px; height: 28px; }
.icon--lg { width: 40px; height: 40px; }
.icon--xl { width: 64px; height: 64px; }

/* ==========================================================================
   12.0 UTILITIES
   ========================================================================== */

.text-center { text-align: center; }
.text-primary { color: var(--color-primary); }
.text-white { color: var(--color-white); }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.container--narrow { max-width: 860px; }

/* ==========================================================================
   13.0 ANIMATIONS
   ========================================================================== */

@keyframes fadeInUp {
	from { opacity: 0; transform: translateY(24px); }
	to { opacity: 1; transform: translateY(0); }
}

.reveal {
	opacity: 0;
}

.reveal.is-visible {
	animation: fadeInUp 0.7s ease forwards;
}

/* ==========================================================================
   14.0 RESPONSIVE BREAKPOINTS (global adjustments)
   ========================================================================== */

@media (max-width: 1200px) {
	:root { --header-height: 76px; }
}

@media (max-width: 768px) {
	.section { padding-block: var(--space-xl); }
}

@media (max-width: 480px) {
	.btn { width: 100%; }
}