/*
Theme Name:  Veroschindler - Vite Press
Author:      Tamir Gilany
Author URI:  https://gilany.net
Description: Takes a hybrid approach, using Wordpress to manage and serve initial content. Vue.js takes over all future in-site navigation effectively transforming the site into a SPA. Based on https://github.com/bucky355 by Brandon Shiluk.
Version:     2.0.0
Text Domain: veroschindler
*/

@import url("https://fonts.googleapis.com/css2?family=Syne:wght@400..800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");

/* ==========================================================================
   CSS CUSTOM PROPERTIES - DESIGN SYSTEM
   ========================================================================== */

:root {
	/* Legacy Support */
	--accent: #0cc560;
	--hover-accent: rgba(12, 197, 96, 0.8);

	/* ==========================================================================
     COLOR PALETTE
     ========================================================================== */

	/* Primary Colors */
	--color-dark: #08060c;
	--color-beige: #f0eadd;
	--color-light-green: #0cc560;

	/* Secondary Colors */
	--color-beige-light: #f1f1de;
	--color-beige-warm: #e6dcc5;
	--color-accent-orange: #e6b364;
	--color-teal: #05998b;
	--color-green-gradient-end: #bcca50;

	/* Neutral Colors */
	--color-white: #ffffff;
	--color-black: #000000;
	--color-beige-grey: #c2bdb3;

	/* Semantic Colors */
	--color-background-dark: var(--color-dark);
	--color-background-light: var(--color-beige);
	--color-background-blur: var(--color-beige-light);
	--color-text-primary: var(--color-dark);
	--color-text-inverse: var(--color-beige);
	--color-accent-primary: var(--color-light-green);
	--color-accent-secondary: var(--color-accent-orange);

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

	/* Font Families */
	--font-display: "Syne", sans-serif;
	--font-body: "Inter", sans-serif;

	/* Font Weights */
	--font-weight-regular: 400;
	--font-weight-medium: 500;
	--font-weight-semibold: 600;
	--font-weight-bold: 700;
	--font-weight-extrabold: 800;

	/* Font Sizes */
	--font-size-xs: 1.4rem;
	--font-size-sm: 1.6rem;
	--font-size-base: 1.8rem;
	--font-size-lg: 2.6rem;
	--font-size-xl: 3.5rem;
	--font-size-2xl: 3.8rem;
	--font-size-3xl: 5rem;

	/* Line Heights */
	--line-height-tight: 1;
	--line-height-snug: 1.2;
	--line-height-normal: 1.5;
	--line-height-relaxed: 1.75;

	/* Letter Spacing */
	--letter-spacing-tight: -0.133rem;
	--letter-spacing-normal: -0.05rem;

	/* ==========================================================================
     SPACING & LAYOUT
     ========================================================================== */

	/* Content Width (for inner content constraint only) */
	--content-max-width: 1140px;

	/* Spacing Scale */
	--spacing-xs: 0.8rem;
	--spacing-sm: 1.3rem;
	--spacing-md: 2.4rem;
	--spacing-lg: 3.4rem;
	--spacing-xl: 6rem;
	--spacing-2xl: 10rem;

	/* Section Heights */
	--section-height-hero: 1080px;
	--section-height-projects: 1198px;
	--header-height: 13.8rem;
	--header-height-mobile: 8.2rem;
	--footer-height-top: 206px;
	--footer-height-bottom: 60px;

	/* ==========================================================================
     BORDERS & RADIUS
     ========================================================================== */

	--border-radius-sm: 0.7268rem;
	--border-radius-md: 3.5028rem;
	--border-radius-lg: 31.9226rem;

	/* ==========================================================================
     SHADOWS & EFFECTS
     ========================================================================== */

	/* Box Shadows */
	--shadow-sm: 0 1.5rem 3rem 0 rgba(85, 85, 85, 0.15);
	--shadow-md: 0 2rem 4rem 0 rgba(85, 85, 85, 0.25);
	--shadow-glow-green: 0 0 3.2rem rgba(117, 255, 98, 0.5);

	/* Backdrop Filters */
	--blur-light: blur(3rem);
	--blur-medium: blur(8rem);
	--blur-heavy: blur(11rem);

	/* ==========================================================================
     GRADIENTS
     ========================================================================== */

	/* Background Gradients */
	--gradient-hero-overlay: linear-gradient(
		180deg,
		rgba(0, 0, 0, 0.9) 7.301%,
		rgba(18, 15, 7, 0.02) 100%
	);

	--gradient-hero-base: linear-gradient(180deg, #000000 0%, #120f07 50%);

	/* Text Gradients */
	--gradient-text-primary: linear-gradient(180deg, #ffffff 0%, #c2bdb3 100%);

	--gradient-text-accent: linear-gradient(180deg, #0cc560 0%, #bcca50 100%);

	/* Divider Gradients */
	--gradient-divider: linear-gradient(
		180deg,
		rgba(255, 255, 255, 0) 0%,
		rgba(255, 255, 255, 0) 30%,
		rgba(255, 255, 255, 0.1) 60%,
		rgba(255, 255, 255, 0) 100%
	);

	/* ==========================================================================
     Z-INDEX SCALE
     ========================================================================== */

	--z-index-base: 1;
	--z-index-dropdown: 100;
	--z-index-sticky: 200;
	--z-index-overlay: 300;
	--z-index-modal: 400;
	--z-index-tooltip: 500;

	/* ==========================================================================
     TRANSITIONS & ANIMATIONS
     ========================================================================== */

	--transition-fast: 150ms ease-in-out;
	--transition-base: 250ms ease-in-out;
	--transition-slow: 350ms ease-in-out;

	--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
	--ease-out: cubic-bezier(0, 0, 0.2, 1);
	--ease-in: cubic-bezier(0.4, 0, 1, 1);

	/* ==========================================================================
     BREAKPOINTS (for reference in media queries)
     ========================================================================== */

	--breakpoint-sm: 640px;
	--breakpoint-md: 768px;
	--breakpoint-lg: 1024px;
	--breakpoint-xl: 1280px;
	--breakpoint-2xl: 1536px;

	/* ==========================================================================
     OPACITY SCALE
     ========================================================================== */

	--opacity-0: 0;
	--opacity-10: 0.1;
	--opacity-20: 0.2;
	--opacity-30: 0.3;
	--opacity-40: 0.4;
	--opacity-50: 0.5;
	--opacity-60: 0.6;
	--opacity-70: 0.7;
	--opacity-80: 0.8;
	--opacity-90: 0.9;
	--opacity-100: 1;
}

/* ==========================================================================
   BASE STYLES
   ========================================================================== */

html {
	font-size: 62.5%;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	width: 100%;
}

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

body {
	margin: 0;
	padding: 0;
	font-size: var(--font-size-sm);
	line-height: var(--line-height-normal);
	font-weight: var(--font-weight-regular);
	font-family: var(--font-body);
	color: var(--color-text-primary);
	background-color: var(--color-white);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	width: 100%;
	overflow-x: hidden;
}

main {
	overflow: hidden;
	width: 100%;
	margin: 0;
	padding: 0;
}

/* Ensure all sections and divs take full width */
section,
div {
	box-sizing: border-box;
}

/* Remove any default WordPress or theme margins */
#page,
#content,
.site,
.site-content {
	margin: 0 !important;
	padding: 0 !important;
	width: 100% !important;
}

.container {
	width: 100%;
	margin: 0;
	padding: 0;
}

.container-padded {
	width: 100%;
	padding-left: var(--spacing-md);
	padding-right: var(--spacing-md);
}

.content-container {
	width: 100%;
	max-width: var(--content-max-width);
	margin-left: auto;
	margin-right: auto;
}

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

h1,
.h1 {
	font-family: var(--font-display);
	font-weight: var(--font-weight-bold);
	font-size: var(--font-size-3xl);
	line-height: var(--line-height-tight);
	letter-spacing: var(--letter-spacing-normal);
	margin: 0 0 var(--spacing-md) 0;
}

h2,
.h2 {
	font-family: var(--font-display);
	font-weight: var(--font-weight-bold);
	font-size: var(--font-size-2xl);
	line-height: var(--line-height-snug);
	letter-spacing: var(--letter-spacing-tight);
	margin: 0 0 var(--spacing-md) 0;
}

h3,
.h3 {
	font-family: var(--font-display);
	font-weight: var(--font-weight-bold);
	font-size: var(--font-size-xl);
	line-height: var(--line-height-snug);
	margin: 0 0 var(--spacing-sm) 0;
}

h4,
.h4 {
	font-family: var(--font-display);
	font-weight: var(--font-weight-bold);
	font-size: var(--font-size-lg);
	line-height: var(--line-height-snug);
	margin: 0 0 var(--spacing-sm) 0;
}

p {
	margin: 0 0 var(--spacing-sm) 0;
}

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

a:hover {
	color: var(--hover-accent);
}

.logo-text {
	font-family: var(--font-display);
	font-weight: var(--font-weight-extrabold);
	font-size: var(--font-size-base);
	line-height: 2rem;
}

.body-text {
	font-family: var(--font-body);
	font-weight: var(--font-weight-medium);
	font-size: var(--font-size-sm);
	line-height: var(--line-height-normal);
}

.label-text {
	font-family: var(--font-display);
	font-weight: var(--font-weight-extrabold);
	font-size: var(--font-size-base);
	text-transform: uppercase;
}

/* ==========================================================================
   UTILITY CLASSES
   ========================================================================== */

/* Full Width Utilities */
.full-width {
	width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

.full-width-section {
	width: 100vw !important;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw !important;
	margin-right: -50vw !important;
}

/* Color Utilities */
.green {
	color: var(--accent);
}

.text-dark {
	color: var(--color-dark);
}

.text-beige {
	color: var(--color-beige);
}

.text-accent {
	color: var(--color-accent-primary);
}

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

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

.bg-beige-light {
	background-color: var(--color-beige-light);
}

/* Text Gradients */
.text-gradient-primary {
	background: var(--gradient-text-primary);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.text-gradient-accent {
	background: var(--gradient-text-accent);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

/* Backdrop Blur Effects */
.backdrop-blur-light {
	backdrop-filter: var(--blur-light);
	-webkit-backdrop-filter: var(--blur-light);
}

.backdrop-blur-medium {
	backdrop-filter: var(--blur-medium);
	-webkit-backdrop-filter: var(--blur-medium);
}

.backdrop-blur-heavy {
	backdrop-filter: var(--blur-heavy);
	-webkit-backdrop-filter: var(--blur-heavy);
}

/* ==========================================================================
   COMPONENT STYLES
   ========================================================================== */

/* Buttons */
.btn {
	font-family: var(--font-display);
	font-weight: var(--font-weight-semibold);
	font-size: var(--font-size-lg);
	padding: 2rem 4rem;
	border: none;
	border-radius: 0;
	transition: all var(--transition-base);
	cursor: pointer;
	text-align: center;
	display: inline-block;
	text-decoration: none;
}

.btn-primary {
	background-color: var(--color-dark);
	color: var(--color-beige);
	box-shadow: var(--shadow-sm);
}

.btn-primary:hover {
	transform: translateY(-0.2rem);
	box-shadow: var(--shadow-md);
	color: var(--color-beige);
}

.btn-secondary {
	background-color: var(--color-accent-orange);
	color: var(--color-beige);
}

.btn-secondary:hover {
	background-color: var(--color-teal);
	transform: translateY(-0.2rem);
	color: var(--color-beige);
}

/* Header */
.header {
	background-color: var(--color-dark);
	padding: var(--spacing-lg) 0;
	width: 100%;
	position: sticky;
	top: 0;
	z-index: var(--z-index-sticky);
	margin: 0;
}

.header-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	max-width: var(--content-max-width);
	margin: 0 auto;
	padding: var(--spacing-sm) var(--spacing-md);
	width: 100%;
}

.nav-link {
	font-family: var(--font-display);
	font-weight: var(--font-weight-bold);
	font-size: var(--font-size-base);
	color: var(--color-beige);
	text-decoration: none;
	transition: opacity var(--transition-fast);
	text-transform: uppercase;
}

.nav-link:hover {
	opacity: var(--opacity-80);
	color: var(--color-beige);
}

/* Footer */
.footer {
	backdrop-filter: var(--blur-light);
	background-color: var(--color-beige-warm);
	padding: 6rem 0;
	width: 100%;
	margin: 0;
}

.footer-content {
	max-width: var(--content-max-width);
	margin: 0 auto;
	display: flex;
	gap: var(--spacing-2xl);
	align-items: center;
	justify-content: space-between;
	padding: 0 var(--spacing-md);
}

.footer-bottom {
	backdrop-filter: var(--blur-light);
	background-color: var(--color-dark);
	padding: 2rem 0;
	text-align: center;
	width: 100%;
	margin: 0;
}

.footer-text {
	font-family: var(--font-body);
	font-weight: var(--font-weight-medium);
	font-size: var(--font-size-sm);
	color: var(--color-beige);
	margin: 0;
}

/* Dividers */
.divider-gradient {
	width: 1px;
	height: 100%;
	background: var(--gradient-divider);
}

/* Hero Section */
.hero {
	position: relative;
	height: var(--section-height-hero);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	margin: 0;
	padding: 0;
}

.hero-overlay {
	position: absolute;
	inset: 0;
	background: var(--gradient-hero-base);
}

.hero-overlay::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--gradient-hero-overlay);
	backdrop-filter: var(--blur-heavy);
	-webkit-backdrop-filter: var(--blur-heavy);
}

.hero-content {
	position: relative;
	z-index: var(--z-index-base);
	text-align: center;
	max-width: var(--content-max-width);
}

/* Projects Section */
.projects-section {
	backdrop-filter: var(--blur-medium);
	background-color: var(--color-beige-light);
	padding: var(--spacing-2xl) 0;
	min-height: var(--section-height-projects);
	width: 100%;
	margin: 0;
}

/* Logo Styles */
.logo-container {
	position: relative;
	width: 9.9361rem;
	height: 9.9361rem;
}

.logo-ring {
	border-radius: 50%;
	border: 2px solid var(--color-beige);
}

/* ==========================================================================
   RESPONSIVE DESIGN
   ========================================================================== */

@media (max-width: 768px) {
	:root {
		--font-size-3xl: 3.5rem;
		--font-size-2xl: 3rem;
		--font-size-xl: 2.5rem;
		--section-height-hero: 70vh;
	}

	.header-nav {
		flex-direction: column;
		gap: var(--spacing-sm);
	}

	.footer-content {
		flex-direction: column;
		gap: var(--spacing-md);
	}

	.btn {
		padding: 1.5rem 3rem;
		font-size: var(--font-size-base);
	}
}

@media (max-width: 480px) {
	:root {
		--font-size-3xl: 2.8rem;
		--font-size-2xl: 2.4rem;
		--font-size-xl: 2rem;
	}

	.container-padded {
		padding-left: var(--spacing-sm);
		padding-right: var(--spacing-sm);
	}

	.footer-content {
		padding: 0 var(--spacing-sm);
	}
}

/* ==========================================================================
   PRINT STYLES
   ========================================================================== */

@media print {
	body {
		font-size: 12pt;
		line-height: 1.4;
	}

	.header,
	.footer {
		display: none;
	}
}