/*
 * Adversity Coaching – Homepage Custom Styles
 * Loaded globally; overrides apply only where scoped.
 * Works alongside Tailwind CDN (injected via functions.php on front page).
 */

/* ==========================================================
   Base / Reset
   ========================================================== */

html {
	scroll-behavior: smooth;
}

body {
	background-color: #0a0a0a !important;
	color: #ffffff !important;
	font-family: 'JetBrains Mono', monospace;
	margin: 0;
	padding: 0;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

/* Remove default WP block wrappers padding */
.wp-site-blocks {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	margin: 0 !important;
}

.wp-block-html {
	margin: 0 !important;
	padding: 0 !important;
	display: block;
}

/* Header — single source of truth; Tailwind classes on the element are stripped */
#andover-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	z-index: 9999;
	box-sizing: border-box;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	background: rgba(0, 0, 0, 0.8);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	padding-top: env(safe-area-inset-top);
}

/* Admin bar: push fixed header down */
body.admin-bar #andover-header {
	top: 32px !important;
}

@media screen and (max-width: 782px) {
	body.admin-bar #andover-header {
		top: 46px !important;
	}
}

/* ==========================================================
   Typography helpers (mirror the Variant design)
   ========================================================== */

.heading-font {
	font-family: 'Oswald', sans-serif;
	text-transform: uppercase;
}

.mono-font {
	font-family: 'JetBrains Mono', monospace;
	letter-spacing: 0.1em;
}

/* ==========================================================
   Noise overlay — CSS pseudo-element with repeating tile
   Uses a 200×200 SVG data-URI so the pattern tiles across
   the full viewport on every screen size (no stretching).
   ========================================================== */

#andover-homepage::before {
	content: '';
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 9999;
	opacity: 0.04;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
	background-repeat: repeat;
	background-size: 200px 200px;
}

/* ==========================================================
   "Accepting New Clients" pulsing green dot
   ========================================================== */

.andover-accepting-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background-color: #22c55e;
	box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6);
	animation: andover-pulse-dot 2s ease-in-out infinite;
	flex-shrink: 0;
}

@keyframes andover-pulse-dot {
	0%   { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6); }
	70%  { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
	100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

/* ==========================================================
   "What to Expect" section — ghost watermark micro-detail
   Large Oswald italic outline of "TRAINING" sits in the
   bottom-right corner at near-zero visibility. Only the
   1px text-stroke is drawn — no fill — so it reads as
   architectural texture rather than competing content.
   The dot grid + watermark together create real depth.
   ========================================================== */

#about {
	position: relative;
	overflow: hidden;
}

#about::after {
	content: 'TRAINING';
	position: absolute;
	right: 0;
	bottom: -0.75rem;
	font-family: 'Oswald', sans-serif;
	font-style: italic;
	font-weight: 700;
	font-size: clamp(7rem, 18vw, 18rem);
	text-transform: uppercase;
	color: transparent;
	-webkit-text-stroke: 1.5px rgba(0, 0, 0, 0.055);
	line-height: 1;
	letter-spacing: -0.02em;
	white-space: nowrap;
	pointer-events: none;
	user-select: none;
	z-index: 0;
}

/* On large screens there's enough height to absorb the negative
   offsets, giving the text that slightly-cut-off editorial feel */
@media (min-width: 1024px) {
	#about::after {
		right: -1rem;
		bottom: -1.5rem;
	}
}

/* Keep section content above the pseudo-element */
#about .max-w-7xl {
	position: relative;
	z-index: 1;
}

/* ==========================================================
   Subtle dot grid (used on the white "How it works" section)
   ========================================================== */

.grid-bg {
	background-image: radial-gradient(circle at 1px 1px, rgba(0, 0, 0, 0.1) 1px, transparent 0);
	background-size: 40px 40px;
}

/* ==========================================================
   Hero section – background image with dark overlay + grayscale
   The filter lives on ::before so section content (green dot,
   text etc.) is NOT desaturated — only the photo is.
   isolation: isolate creates a stacking context so z-index: -1
   on ::before stays inside the section, not the page.
   ========================================================== */

.hero-image {
	position: relative;
	isolation: isolate;
}

.hero-image::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(to bottom, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.9) 100%),
		url('https://images.unsplash.com/photo-1534438327276-14e5300c3a48?q=80&w=2070&auto=format&fit=crop');
	background-size: cover;
	background-position: center;
	filter: grayscale(1) contrast(1.2);
	z-index: -1;
}

/* ==========================================================
   Hero fluid typography
   clamp(min, preferred, max) scales smoothly across every
   viewport with zero breakpoint hacks needed in HTML.

   H1  — clamp(3.5rem, 11vw, 9rem)
         390px iPhone 15 Pro  → 56px min    (strong, may sit on 3 lines
                                             at narrowest — intentional)
         800px Galaxy Tab 10  → 88px        (clean 2 lines)
         1440px MacBook Pro   → 144px       (full impact display size)

   Min raised from 2.8rem → 3.5rem (+0.7rem) per user feedback.
   Preferred switched to 11vw so tablet sizes scale more generously.

   Line-height tightens only at large sizes where the display
   treatment is intentional; stays roomier on small screens.

   Description — clamp(0.875rem, 2vw, 1rem)
         Deliberately kept small and subordinate on mobile so the
         H1 is always the dominant element. Scales to 16px at
         800px+ where there's room to breathe.
         Font is JetBrains Mono (inherited from body).
   ========================================================== */

.andover-hero-title {
	font-size: clamp(3.5rem, 11vw, 9rem);
	line-height: 0.92;
	font-style: italic;
	font-weight: 700;
	font-family: 'Oswald', sans-serif;
	text-transform: uppercase;
	margin-bottom: 3.5rem;
}

@media (min-width: 1024px) {
	.andover-hero-title {
		line-height: 0.85;
		margin-bottom: 4rem;
	}
}

.andover-hero-description {
	font-family: 'JetBrains Mono', monospace;
	font-size: clamp(0.875rem, 2vw, 1rem);
	font-weight: 300;
	opacity: 0.8;
	line-height: 1.6;
	border-left: 1px solid rgba(255, 255, 255, 0.2);
	padding-left: 1.5rem;
}

/* ==========================================================
   Scanline animation (runs over the hero)
   ========================================================== */

.scanline {
	width: 100%;
	height: 1px;
	background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.2), transparent);
	position: absolute;
	animation: andover-scan 10s linear infinite;
}

@keyframes andover-scan {
	0%   { top: 0; }
	100% { top: 100%; }
}

/* ==========================================================
   Testimonials Carousel
   ========================================================== */

.andover-tc-viewport {
	overflow: hidden;
	position: relative;
	min-height: 15rem; /* mobile fallback — JS overrides with measured height */
}

@media (min-width: 768px) {
	.andover-tc-viewport { min-height: 10rem; }
}

.andover-tc-slide {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	padding-bottom: 0.5rem;
	/* opacity, transform, and transition managed via JS */
}

.andover-tc-big-quote {
	font-family: 'Oswald', sans-serif;
	font-style: italic;
	font-size: clamp(5rem, 10vw, 9rem);
	line-height: 0.6;
	color: rgba(0, 0, 0, 0.05);
	display: block;
	margin-bottom: 1.25rem;
	user-select: none;
}

.andover-tc-quote {
	font-family: 'JetBrains Mono', monospace;
	font-size: clamp(1.05rem, 2vw, 1.4rem);
	font-weight: 300;
	line-height: 1.75;
	color: rgba(0, 0, 0, 0.75);
	max-width: 54ch;
}

.andover-tc-attr {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	margin-top: 2.5rem;
	transition: opacity 0.5s cubic-bezier(0.25,0.46,0.45,0.94); /* matches slide entry easing exactly */
}

/* Line-style progress dots — active dot doubles as a live 5s progress bar */
.andover-tc-dot {
	display: block;
	height: 2px;
	width: 20px;
	background: rgba(0, 0, 0, 0.18);
	border: none;
	padding: 0;
	cursor: pointer;
	transition: width 0.35s ease;
	position: relative;
	overflow: hidden;
}

.andover-tc-dot.active {
	width: 44px;
	background-color: rgba(0, 0, 0, 0.18); /* unfilled base; ::after animates the fill */
}

/* Fill sweeps across the active dot width — restarts naturally each time .active is toggled */
.andover-tc-dot.active::after {
	content: '';
	position: absolute;
	inset: 0;
	width: 0;
	background: #111111;
	animation: andover-tc-progress-anim 5s linear forwards;
}

/* Prev / next buttons */
.andover-tc-btn {
	width: 44px;
	height: 44px;
	border: 1px solid rgba(0, 0, 0, 0.15);
	background: transparent;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: 'JetBrains Mono', monospace;
	font-size: 0.85rem;
	color: rgba(0, 0, 0, 0.45);
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.andover-tc-btn:hover {
	background-color: #111111;
	color: #ffffff;
	border-color: #111111;
}

/* Keyframe shared by .andover-tc-dot.active::after */
@keyframes andover-tc-progress-anim {
	from { width: 0; }
	to   { width: 100%; }
}

/* ==========================================================
   Contact section — title responsive sizing
   Tablet (768–1023px) gets a larger size since the single-column
   layout gives the title the full width to fill.
   Mobile and desktop are handled by the inline clamp on the element.
   ========================================================== */

@media (min-width: 768px) and (max-width: 1023px) {
	#contact h2 {
		font-size: clamp(8rem, 15vw, 10rem) !important;
	}
}

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

/* Honeypot — visually off-screen, NOT display:none (bots detect that).
   Your anti-spam plugin (ClearTalk etc.) can override/rename this field. */
.andover-hp {
	position: absolute;
	left: -9999px;
	top: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
	opacity: 0;
	pointer-events: none;
}

.andover-contact-form {
	position: relative;
}

.andover-field-group {
	display: flex;
	flex-direction: column;
	position: relative;
}

.andover-label {
	font-family: 'JetBrains Mono', monospace;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	color: rgba(0, 0, 0, 0.6);
	display: block;
	margin-bottom: 0.625rem;
}

/* Base input styles */
.andover-input {
	width: 100%;
	background: transparent;
	border: none;
	border-bottom: 1px solid rgba(0, 0, 0, 0.12);
	color: #111111;
	font-family: 'JetBrains Mono', monospace;
	font-size: 0.875rem;
	padding: 0.75rem 0;
	outline: none;
	border-radius: 0;
	-webkit-appearance: none;
	appearance: none;
	transition: border-color 0.3s ease;
}

.andover-input::placeholder {
	color: rgba(0, 0, 0, 0.25);
}

.andover-input:focus {
	border-bottom-color: rgba(0, 0, 0, 0.65);
}

/* Name / Email / Phone / Service — frosted glass gradient look */
.andover-field-group .andover-input {
	background: linear-gradient(135deg, rgba(255,255,255,0.72) 0%, rgba(240,242,248,0.55) 100%);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 4px;
	padding: 0.75rem 0.875rem;
	box-shadow: 0 2px 12px rgba(0,0,0,0.04), inset 0 1px 0 rgba(255,255,255,0.9);
	transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.andover-field-group .andover-input:focus {
	border-color: rgba(0, 0, 0, 0.28);
	box-shadow: 0 4px 20px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.9);
}

/* Custom select arrow */
.andover-select {
	cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='rgba(0,0,0,0.35)'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.875rem center;
	padding-right: 2rem;
	color: rgba(0, 0, 0, 0.75);
}

.andover-select option {
	background: #ffffff;
	color: #111111;
}

/* Textarea — solid white; higher specificity beats .andover-field-group .andover-input */
.andover-field-group .andover-textarea {
	background: #ffffff;
	border: 1px solid rgba(0, 0, 0, 0.10);
	border-radius: 4px;
	padding: 0.875rem;
	resize: vertical;
	min-height: 130px;
	line-height: 1.7;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

.andover-field-group .andover-textarea:focus {
	border-color: rgba(0, 0, 0, 0.28);
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

/* Custom checkbox */
.andover-checkbox-wrap {
	position: relative;
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	margin-top: 1px;
}

.andover-checkbox-input {
	position: absolute;
	inset: 0;
	opacity: 0;
	cursor: pointer;
	margin: 0;
	z-index: 1;
}

.andover-checkbox-custom {
	position: absolute;
	inset: 0;
	border: 1px solid rgba(0, 0, 0, 0.2);
	background: transparent;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.andover-checkbox-input:checked ~ .andover-checkbox-custom {
	background-color: #111111;
	border-color: #111111;
}

.andover-checkbox-input:checked ~ .andover-checkbox-custom::after {
	content: '';
	position: absolute;
	left: 4px;
	top: 1px;
	width: 5px;
	height: 9px;
	border: 1.5px solid #ffffff;
	border-top: none;
	border-left: none;
	transform: rotate(45deg);
}

/* Submit button — black on light background, inverts on hover */
.andover-submit-btn {
	font-family: 'Oswald', sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: 0.7rem;
	background-color: #111111;
	color: #ffffff;
	border: 1px solid #111111;
	padding: 1rem 2.25rem;
	cursor: pointer;
	white-space: nowrap;
	transition: background-color 0.25s ease, color 0.25s ease;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.andover-submit-btn:hover {
	background-color: transparent;
	color: #111111;
}

/* ==========================================================
   Pricing card hover effect
   ========================================================== */

.card-hover {
	transition: border-color 0.2s ease, transform 0.2s ease;
}

.card-hover:hover {
	border-color: #ffffff;
	transform: translateY(-2px);
}

/* ==========================================================
   Dark section gradients
   Radial "spotlight" glow from top-centre fades to near-black.
   Stays fully monochrome — no hue deviation from design system.
   ========================================================== */

#for-you {
	background: radial-gradient(ellipse 90% 55% at 50% 0%, #1c1c1c 0%, #0a0a0a 70%) !important;
}

#pricing {
	background: radial-gradient(ellipse 90% 55% at 50% 100%, #1a1a1a 0%, #0a0a0a 70%) !important;
}

/* Subtle tonal card stepping — near-blacks shift left-to-right
   creating gentle depth without any colour deviation */
#for-you .card-hover:nth-child(1) { background-color: #0e0e0e; }
#for-you .card-hover:nth-child(2) { background-color: #090909; }
#for-you .card-hover:nth-child(3) { background-color: #050505; }

/* Pricing: only step the dark outer cards; leave middle (white) untouched */
#pricing .card-hover:nth-child(1) { background-color: #0e0e0e; }
#pricing .card-hover:nth-child(3) { background-color: #050505; }