/* Import Tailwind CSS for compilation using Tailwind CLI */
@import "tailwindcss";

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

:root {
  /* Slate Color Scale */
  --slate-50: #f8fafc;
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-300: #cbd5e1;
  --slate-400: #94a3b8;
  --slate-500: #64748b;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1e293b;
  --slate-900: #0f172a;

  /* Rose Color Scale */
  --rose-50: #fff1f2;
  --rose-100: #ffe4e6;
  --rose-200: #fecaca;
  --rose-300: #fca5a5;
  --rose-400: #f87171;
  --rose-500: #ef4444;
  --rose-600: #dc2626;
  --rose-700: #b91c1c;
  --rose-800: #991b1b;
  --rose-900: #7f1d1d;

  /* Semantic Color Variables */
  --color-primary: var(--rose-600);
  --color-primary-hover: var(--rose-700);
  --color-primary-light: var(--rose-50);
  --color-primary-gradient: linear-gradient(135deg, var(--rose-600), var(--rose-700));
  
  --color-text-primary: var(--slate-900);
  --color-text-secondary: var(--slate-600);
  --color-text-muted: var(--slate-500);
  --color-text-light: var(--slate-400);
  
  --color-background: #ffffff;
  --color-background-muted: var(--slate-50);
  --color-background-subtle: var(--slate-100);
  
  --color-border: var(--slate-200);
  --color-border-light: var(--slate-300);
  
  --color-success: #059669;
  --color-success-light: #ecfdf5;
  --color-success-border: #6ee7b7;
  
  --color-error: #ef4444;
  --color-error-light: #fff1f2;
  --color-error-border: #fecaca;
  
  /* Spacing Variables */
  --spacing-section: 4rem;
  --spacing-padding-xs: 1rem;    /* 16px */
  --spacing-padding-sm: 1.5rem;  /* 24px */
  --spacing-padding-md: 2rem;    /* 32px */
  --spacing-padding-lg: 3rem;    /* 48px */
  --spacing-padding-xl: 4rem;    /* 64px */
  
  /* Container Variables */
  --container-padding: 1rem;     /* Mobile default */
  --container-max-width: 1200px;
  --container-gap: 2rem;         /* Mobile default */
}

/* ========================================
   Style Guide & Design System
   ======================================== */

/* Breakpoints (Tailwind defaults) */
/* Mobile: 0px and up (default) */
/* sm: 640px and up */
/* md: 768px and up */
/* lg: 1024px and up */
/* xl: 1280px and up */
/* 2xl: 1536px and up */

/* Container System - Mobile First */
.page-container {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

.page-main {
  display: flex;
  flex-direction: column;
  gap: var(--container-gap);
  margin-bottom: var(--spacing-section);
  background: var(--color-background);
}

/* Responsive Container Updates */
@media (min-width: 640px) {
  :root {
    --container-padding: 1.5rem;
    --container-gap: 2.5rem;
  }
}

@media (min-width: 768px) {
  :root {
    --container-padding: 2rem;
    --container-gap: 3rem;
  }
}

@media (min-width: 1024px) {
  :root {
    --container-gap: 4rem;
  }
}

/* ========================================
   Page Content Formatting Style Guide
   ======================================== */

/* Page Structure Guide:
   1. Hero Section: margin: var(--spacing-section) 0 (no padding)
   2. Main Container: .page-main .page-container with flex gap
   3. Content Sections: padding only (no margins), background white
   4. Bottom spacing: .page-main handles with margin-bottom
*/

/* Section Header Component */
.section-header {
  text-align: center;
  margin-bottom: var(--spacing-padding-xl);
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.section-header__label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--spacing-padding-xs);
  display: block;
}

.section-header__title {
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-padding-xs);
  line-height: 1.2;
}

.section-header__subtitle {
  font-size: 1.125rem;
  color: var(--color-text-secondary);
  line-height: 1.6;
  margin: 0;
}

/* Responsive Section Header */
@media (min-width: 768px) {
  .section-header__title {
    font-size: 2.5rem;
  }
}

@media (max-width: 768px) {
  .section-header__title {
    font-size: 1.75rem;
  }
}

/* Content Block Base Styles */
.content-block {
  background: var(--color-background);
  padding: var(--spacing-padding-md);
  border-radius: 1rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  border: 1px solid var(--color-border);
}

.content-block__title {
  font-size: 1.5rem;
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-padding-sm);
  font-weight: 700;
}

.content-block__subtitle {
  font-size: 1rem;
  color: var(--color-text-muted);
  margin-bottom: var(--spacing-padding-xs);
  font-weight: 600;
}

.content-block__text {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  line-height: 1.6;
  margin-bottom: var(--spacing-padding-sm);
}

.content-block__text:last-child {
  margin-bottom: 0;
}

/* Grid Layouts */
.content-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--container-gap);
}

.content-grid--two-cols {
  grid-template-columns: 1fr 2fr;
}

.content-grid--three-cols {
  grid-template-columns: repeat(3, 1fr);
}

.content-grid--equal {
  grid-template-columns: 1fr 1fr;
}

/* Typography Hierarchy */
.heading-xl {
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-padding-md);
  line-height: 1.2;
}

.heading-lg {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-padding-sm);
  line-height: 1.3;
}

.heading-md {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-padding-sm);
  line-height: 1.3;
}

.heading-sm {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-padding-xs);
  line-height: 1.4;
}

.body-lg {
  font-size: 1.125rem;
  color: var(--color-text-secondary);
  line-height: 1.6;
  margin-bottom: var(--spacing-padding-sm);
}

.body-md {
  font-size: 1rem;
  color: var(--color-text-secondary);
  line-height: 1.6;
  margin-bottom: var(--spacing-padding-sm);
}

.body-sm {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  line-height: 1.6;
  margin-bottom: var(--spacing-padding-xs);
}

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

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

/* Button Guide:
   Use component-specific button classes in individual CSS files
   Primary: background: var(--color-primary-gradient)
   Secondary: background: var(--color-background), border: var(--color-border-light)
   
   Form Guide:
   Use component-specific form classes in individual CSS files
   Field wrapper: display: flex, flex-direction: column
   Label: font-size: 0.875rem, color: var(--color-text-secondary)
   Input: padding: 0.75rem 1rem, border: var(--color-border-light)
   Focus: border-color: var(--color-primary), box-shadow with color-mix
   
   Spacing Guide:
   Use spacing variables directly in component CSS:
   --spacing-padding-xs: 1rem (16px)
   --spacing-padding-sm: 1.5rem (24px) 
   --spacing-padding-md: 2rem (32px)
   --spacing-padding-lg: 3rem (48px)
   --spacing-padding-xl: 4rem (64px)
*/

/* Responsive Guide:
   Mobile First approach - start with mobile styles, then enhance with media queries
   
   Breakpoints (Tailwind defaults):
   sm: 640px+, md: 768px+, lg: 1024px+, xl: 1280px+
   
   Content blocks: 
   Mobile: padding: var(--spacing-padding-md)
   Desktop: padding: var(--spacing-padding-lg)
   
   Typography scaling:
   Mobile: heading-xl: 2rem, heading-lg: 1.75rem
   Desktop: heading-xl: 2.5rem, heading-lg: 2rem
   
   Grid layouts:
   Mobile: All grids collapse to 1 column
   Desktop: Use specified column layouts (1fr 2fr, etc.)
*/

/* Inter font */
@font-face {
  font-display: swap;
  font-family: "Inter";
  font-style: normal;
  font-weight: 300;
  src: url("../webfonts/inter-v19-latin-300.woff2") format("woff2");
}
@font-face {
  font-display: swap;
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  src: url("../webfonts/inter-v19-latin-regular.woff2") format("woff2");
}
@font-face {
  font-display: swap;
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  src: url("../webfonts/inter-v19-latin-500.woff2") format("woff2");
}
@font-face {
  font-display: swap;
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  src: url("../webfonts/inter-v19-latin-600.woff2") format("woff2");
}
@font-face {
  font-display: swap;
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  src: url("../webfonts/inter-v19-latin-700.woff2") format("woff2");
}

/* Montserrat font */
@font-face {
  font-display: swap;
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400;
  src: url("../webfonts/montserrat-v30-latin-regular.woff2") format("woff2");
}
@font-face {
  font-display: swap;
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 500;
  src: url("../webfonts/montserrat-v30-latin-500.woff2") format("woff2");
}
@font-face {
  font-display: swap;
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 600;
  src: url("../webfonts/montserrat-v30-latin-600.woff2") format("woff2");
}
@font-face {
  font-display: swap;
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 700;
  src: url("../webfonts/montserrat-v30-latin-700.woff2") format("woff2");
}
@font-face {
  font-display: swap;
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 800;
  src: url("../webfonts/montserrat-v30-latin-800.woff2") format("woff2");
}
@font-face {
  font-display: swap;
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 900;
  src: url("../webfonts/montserrat-v30-latin-900.woff2") format("woff2");
}

/* Base font assignments */
body {
  font-family: "Inter", sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Montserrat", sans-serif;
}

/* Utility classes for special scenarios */
.font-inter {
  font-family: "Inter", sans-serif;
}

.font-montserrat {
  font-family: "Montserrat", sans-serif;
}

/* Animation Keyframes */
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

/* Animation Utility Classes */
.animate-fade-in {
  animation: fade-in 0.6s ease-out forwards;
}

.animate-fade-in-up {
  animation: fade-in-up 0.6s ease-out forwards;
}

.animate-float {
  animation: float 3s ease-in-out infinite;
}

/* Smooth Scrolling */
html {
  scroll-behavior: smooth;
}

/* Prevent horizontal scroll on all screens */
html,
body {
  overflow-x: hidden;
}

/* Simple Fixed Header */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: #ffffff;
  z-index: 1000;
  transition: box-shadow 0.2s ease, border-bottom 0.2s ease;
  border-bottom: 1px solid transparent;
}

.site-header.scrolled {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid rgba(226, 232, 240, 0.6);
}

/* Add space for fixed header */
body {
  padding-top: 4rem;
}

body.loading {
  visibility: hidden;
}

body.loading .intro-overlay {
  visibility: visible;
}

/* ========================================
   Move to Top Button
   ======================================== */

.move-to-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 3.5rem;
  height: 3.5rem;
  background: #f43f5e;
  color: #ffffff;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  z-index: 100;
  box-shadow: 0 4px 12px rgba(244, 63, 94, 0.3);
  transition: all 300ms ease;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px) scale(0.8);
  display: flex;
  align-items: center;
  justify-content: center;
}

.move-to-top:hover {
  background: #e11d48;
  transform: translateY(-2px) scale(1);
  box-shadow: 0 8px 20px rgba(244, 63, 94, 0.4);
}

.move-to-top:active {
  transform: translateY(0) scale(0.95);
}

.move-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.move-to-top svg {
  width: 1.25rem;
  height: 1.25rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .move-to-top {
    /* Adjust position for mobile viewport */
    bottom: 1.5rem;
    right: 1.5rem;
    width: 3rem;
    height: 3rem;
  }

  .move-to-top svg {
    width: 1rem;
    height: 1rem;
  }
}