/* ==========================================================================
   AutoShift — Main Stylesheet
   Design system: tokens → reset → typography → layout → components → utilities
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design Tokens (CSS Custom Properties)
   -------------------------------------------------------------------------- */

:root {
	/* Colors */
	--color-bg:         #07090D;
	--color-surface:    #111827;
	--color-surface-2:  #1a2236;
	--color-border:     rgba(255, 255, 255, 0.08);
	--color-gold:       #D4AF37;
	--color-gold-light: #e8c84b;
	--color-gold-dim:   rgba(212, 175, 55, 0.12);
	--color-blue:       #2563EB;
	--color-blue-light: #3b82f6;
	--color-text:        #F8FAFC;
	--color-text-muted:  #94a3b8;
	--color-text-subtle: #7c8fa8;
	--color-text-dim:    #64748b;
	--color-white:      #ffffff;
	--color-error:      #ef4444;
	--color-success:    #22c55e;

	/* Typography */
	--font-heading: 'Montserrat', sans-serif;
	--font-body:    'Inter', sans-serif;

	--text-xs:   clamp(0.70rem, 1.5vw, 0.75rem);
	--text-sm:   clamp(0.82rem, 1.8vw, 0.875rem);
	--text-base: clamp(0.9rem,  2vw,   1rem);
	--text-lg:   clamp(1rem,    2.2vw, 1.125rem);
	--text-xl:   clamp(1.1rem,  2.5vw, 1.25rem);
	--text-2xl:  clamp(1.25rem, 3vw,   1.5rem);
	--text-3xl:  clamp(1.5rem,  4vw,   1.875rem);
	--text-4xl:  clamp(1.875rem, 5vw,  2.25rem);
	--text-5xl:  clamp(2.25rem, 6vw,   3rem);
	--text-6xl:  clamp(2.75rem, 7vw,   3.75rem);
	--text-7xl:  clamp(3rem,    8vw,   4.5rem);

	--fw-light:      300;
	--fw-regular:    400;
	--fw-medium:     500;
	--fw-semibold:   600;
	--fw-bold:       700;
	--fw-extrabold:  800;
	--fw-black:      900;

	--leading-tight:  1.1;
	--leading-snug:   1.3;
	--leading-normal: 1.6;
	--leading-relaxed:1.8;

	--tracking-tight:  -0.04em;
	--tracking-normal:  0;
	--tracking-wide:    0.05em;
	--tracking-wider:   0.1em;
	--tracking-widest:  0.2em;

	/* Spacing */
	--space-1:  0.25rem;
	--space-2:  0.5rem;
	--space-3:  0.75rem;
	--space-4:  1rem;
	--space-5:  1.25rem;
	--space-6:  1.5rem;
	--space-8:  2rem;
	--space-10: 2.5rem;
	--space-12: 3rem;
	--space-16: 4rem;
	--space-20: 5rem;
	--space-24: 6rem;
	--space-32: 8rem;

	/* Layout */
	--container-sm:   640px;
	--container-md:   768px;
	--container-lg:   1024px;
	--container-xl:   1200px;
	--container-2xl:  1440px;
	--container-pad:  clamp(1rem, 5vw, 2rem);

	/* Borders & Radii */
	--radius-sm:   8px;
	--radius-md:   12px;
	--radius-lg:   16px;
	--radius-xl:   20px;
	--radius-full: 9999px;

	/* Shadows */
	--shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.4);
	--shadow-md:  0 4px 16px rgba(0, 0, 0, 0.5);
	--shadow-lg:  0 8px 32px rgba(0, 0, 0, 0.6);
	--shadow-xl:  0 16px 64px rgba(0, 0, 0, 0.7);
	--shadow-gold: 0 0 32px rgba(212, 175, 55, 0.15);

	/* Transitions */
	--transition-fast:   150ms ease;
	--transition-base:   250ms ease;
	--transition-slow:   400ms ease;
	--transition-spring: 400ms cubic-bezier(0.34, 1.56, 0.64, 1);

	/* Z-index layers */
	--z-below:    -1;
	--z-base:      0;
	--z-raised:    10;
	--z-dropdown:  100;
	--z-sticky:    200;
	--z-overlay:   300;
	--z-modal:     400;
	--z-toast:     500;
}

/* --------------------------------------------------------------------------
   2. Modern CSS Reset
   -------------------------------------------------------------------------- */

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

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

body {
	font-family: var(--font-body);
	font-size: var(--text-base);
	font-weight: var(--fw-regular);
	line-height: var(--leading-normal);
	color: var(--color-text);
	background-color: var(--color-bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

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

img {
	height: auto;
}

input, button, textarea, select {
	font: inherit;
}

button {
	cursor: pointer;
	border: none;
	background: none;
}

a {
	color: inherit;
	text-decoration: none;
}

ul, ol {
	list-style: none;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-heading);
	font-weight: var(--fw-extrabold);
	line-height: var(--leading-tight);
	letter-spacing: var(--tracking-tight);
	color: var(--color-text);
}

p {
	line-height: var(--leading-relaxed);
}

/* Accessible focus styles */
:focus-visible {
	outline: 2px solid var(--color-gold);
	outline-offset: 3px;
	border-radius: 2px;
}

/* Skip to content */
.skip-link {
	position: absolute;
	top: -100%;
	left: var(--space-4);
	padding: var(--space-2) var(--space-4);
	background: var(--color-gold);
	color: var(--color-bg);
	font-weight: var(--fw-bold);
	border-radius: var(--radius-sm);
	z-index: var(--z-toast);
	transition: top var(--transition-base);
}
.skip-link:focus {
	top: var(--space-4);
}

/* Screen reader only */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* --------------------------------------------------------------------------
   3. Typography Scale
   -------------------------------------------------------------------------- */

h1 { font-size: var(--text-5xl); }
h2 { font-size: var(--text-4xl); }
h3 { font-size: var(--text-3xl); }
h4 { font-size: var(--text-2xl); }
h5 { font-size: var(--text-xl); }
h6 { font-size: var(--text-lg); }

.text-display {
	font-size: var(--text-7xl);
	font-family: var(--font-heading);
	font-weight: var(--fw-black);
	letter-spacing: var(--tracking-tight);
	line-height: 1;
}

.text-eyebrow {
	font-size: var(--text-xs);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--tracking-widest);
	text-transform: uppercase;
	color: var(--color-gold);
}

.text-lead {
	font-size: var(--text-xl);
	font-weight: var(--fw-light);
	line-height: var(--leading-relaxed);
	color: var(--color-text-muted);
}

.text-muted  { color: var(--color-text-muted); }
.text-dim    { color: var(--color-text-dim); }
.text-gold   { color: var(--color-gold); }
.text-blue   { color: var(--color-blue); }

/* --------------------------------------------------------------------------
   4. Layout Primitives
   -------------------------------------------------------------------------- */

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

.container--wide {
	max-width: var(--container-2xl);
}

.container--narrow {
	max-width: var(--container-md);
}

.section {
	padding-block: clamp(var(--space-16), 8vw, var(--space-32));
}

.section--sm {
	padding-block: clamp(var(--space-10), 5vw, var(--space-20));
}

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

.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: 1023px) {
	.grid--4 { grid-template-columns: repeat(2, 1fr); }
}

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

.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }
.gap-8 { gap: var(--space-8); }

/* --------------------------------------------------------------------------
   5. Section Headers
   -------------------------------------------------------------------------- */

.section-header {
	text-align: center;
	margin-bottom: clamp(var(--space-10), 5vw, var(--space-16));
}

.section-header .text-eyebrow {
	margin-bottom: var(--space-3);
}

.section-header h2 {
	margin-bottom: var(--space-4);
}

.section-header .text-lead {
	max-width: 60ch;
	margin-inline: auto;
}

/* Decorative gold underline on section headings */
.section-header h2::after {
	content: '';
	display: block;
	width: 48px;
	height: 2px;
	background: var(--color-gold);
	margin: var(--space-4) auto 0;
}

/* Left-aligned variant */
.section-header--left {
	text-align: left;
}

.section-header--left .text-lead  { margin-inline: 0; }
.section-header--left h2::after   { margin-inline: 0; }

/* --------------------------------------------------------------------------
   6. Buttons
   -------------------------------------------------------------------------- */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	padding: var(--space-3) var(--space-8);
	font-family: var(--font-heading);
	font-size: var(--text-sm);
	font-weight: var(--fw-bold);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	border-radius: var(--radius-full);
	border: 2px solid transparent;
	cursor: pointer;
	transition: all var(--transition-base);
	white-space: nowrap;
	min-height: 44px; /* Accessibility: touch target */
	min-width: 44px;
}

/* Primary — gold fill */
.btn--primary {
	background: var(--color-gold);
	color: var(--color-bg);
	border-color: var(--color-gold);
}

.btn--primary:hover,
.btn--primary:focus-visible {
	background: var(--color-gold-light);
	border-color: var(--color-gold-light);
	box-shadow: 0 0 24px rgba(212, 175, 55, 0.35);
	transform: translateY(-1px);
}

.btn--primary:active {
	transform: translateY(0);
}

/* Secondary — ghost with gold border */
.btn--secondary {
	background: transparent;
	color: var(--color-text);
	border-color: rgba(255, 255, 255, 0.25);
}

.btn--secondary:hover,
.btn--secondary:focus-visible {
	border-color: var(--color-gold);
	color: var(--color-gold);
	background: var(--color-gold-dim);
}

/* Ghost — minimal */
.btn--ghost {
	background: transparent;
	color: var(--color-text-muted);
	padding-inline: var(--space-4);
}

.btn--ghost:hover {
	color: var(--color-text);
}

.btn--sm {
	padding: var(--space-2) var(--space-5);
	font-size: var(--text-xs);
}

.btn--lg {
	padding: var(--space-4) var(--space-10);
	font-size: var(--text-base);
}

/* --------------------------------------------------------------------------
   7. Cards
   -------------------------------------------------------------------------- */

.card {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-xl);
	overflow: hidden;
	transition: border-color var(--transition-base),
	            box-shadow var(--transition-base),
	            transform var(--transition-base);
}

.card:hover {
	border-color: rgba(212, 175, 55, 0.2);
	box-shadow: var(--shadow-gold);
	transform: translateY(-4px);
}

.card__body {
	padding: var(--space-6);
}

.card__icon {
	width: 48px;
	height: 48px;
	margin-bottom: var(--space-4);
	color: var(--color-gold);
}

.card__title {
	font-size: var(--text-xl);
	margin-bottom: var(--space-3);
}

.card__text {
	color: var(--color-text-muted);
	font-size: var(--text-sm);
}

/* --------------------------------------------------------------------------
   8. Badges & Tags
   -------------------------------------------------------------------------- */

.badge {
	display: inline-flex;
	align-items: center;
	padding: var(--space-1) var(--space-3);
	font-size: var(--text-xs);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	border-radius: var(--radius-full);
}

.badge--gold {
	background: var(--color-gold-dim);
	color: var(--color-gold);
	border: 1px solid rgba(212, 175, 55, 0.2);
}

.badge--surface {
	background: var(--color-surface-2);
	color: var(--color-text-muted);
	border: 1px solid var(--color-border);
}

/* --------------------------------------------------------------------------
   9. Forms
   -------------------------------------------------------------------------- */

.form-group {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.form-label {
	font-size: var(--text-sm);
	font-weight: var(--fw-medium);
	color: var(--color-text-muted);
}

.form-control {
	width: 100%;
	padding: var(--space-3) var(--space-4);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	color: var(--color-text);
	font-size: var(--text-base);
	transition: border-color var(--transition-base),
	            box-shadow var(--transition-base);
	min-height: 44px;
}

.form-control::placeholder {
	color: var(--color-text-dim);
}

.form-control:focus {
	outline: none;
	border-color: var(--color-gold);
	box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1);
}

.form-control.is-error {
	border-color: var(--color-error);
}

textarea.form-control {
	resize: vertical;
	min-height: 140px;
}

select.form-control {
	appearance: none;
	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='%2394a3b8' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right var(--space-4) center;
	padding-right: var(--space-10);
}

.form-message {
	font-size: var(--text-sm);
	padding: var(--space-3) var(--space-4);
	border-radius: var(--radius-md);
	display: none;
}

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

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

/* --------------------------------------------------------------------------
   10. Divider / Separator
   -------------------------------------------------------------------------- */

.divider {
	width: 100%;
	height: 1px;
	background: var(--color-border);
}

.divider--gold {
	background: linear-gradient(to right, transparent, var(--color-gold), transparent);
	height: 1px;
	border: none;
}

/* --------------------------------------------------------------------------
   11. Scroll-reveal animation base
   -------------------------------------------------------------------------- */

[data-reveal] {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity var(--transition-slow),
	            transform var(--transition-slow);
}

[data-reveal].is-visible {
	opacity: 1;
	transform: translateY(0);
}

[data-reveal="fade"] {
	transform: none;
}

[data-reveal-delay="100"] { transition-delay: 100ms; }
[data-reveal-delay="200"] { transition-delay: 200ms; }
[data-reveal-delay="300"] { transition-delay: 300ms; }
[data-reveal-delay="400"] { transition-delay: 400ms; }
[data-reveal-delay="500"] { transition-delay: 500ms; }

/* --------------------------------------------------------------------------
   12. WordPress Core Alignment Classes
   -------------------------------------------------------------------------- */

.alignleft  { float: left; margin: 0 var(--space-6) var(--space-4) 0; }
.alignright { float: right; margin: 0 0 var(--space-4) var(--space-6); }
.aligncenter { display: block; margin-inline: auto; }
.alignwide  { max-width: 1200px; margin-inline: auto; }
.alignfull  { width: 100vw; margin-left: calc(50% - 50vw); }

/* --------------------------------------------------------------------------
   13. Utilities
   -------------------------------------------------------------------------- */

.text-center  { text-align: center; }
.text-left    { text-align: left; }
.text-right   { text-align: right; }

.mt-auto  { margin-top: auto; }
.mb-0     { margin-bottom: 0; }
.mb-4     { margin-bottom: var(--space-4); }
.mb-6     { margin-bottom: var(--space-6); }
.mb-8     { margin-bottom: var(--space-8); }

.hidden   { display: none; }
.block    { display: block; }
.relative { position: relative; }
.overflow-hidden { overflow: hidden; }

.bg-surface  { background: var(--color-surface); }
.bg-surface-2 { background: var(--color-surface-2); }

.border-top    { border-top: 1px solid var(--color-border); }
.border-bottom { border-bottom: 1px solid var(--color-border); }

/* Responsive visibility */
@media (max-width: 767px) {
	.hide-mobile { display: none !important; }
}

@media (min-width: 768px) {
	.hide-desktop { display: none !important; }
}

/* --------------------------------------------------------------------------
   14. Print
   -------------------------------------------------------------------------- */

@media print {
	body { background: white; color: black; }
	.no-print { display: none; }
}

/* --------------------------------------------------------------------------
   15. Reduced Motion — CSS safety net (JS in animations.js also handles this)
   -------------------------------------------------------------------------- */

@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;
	}

	/* Show scroll-reveal elements immediately without animation */
	[data-reveal] {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}