/* --------------------------------------------------------------
# CUSTOM FONT LOADING (Sauna Pro)
-------------------------------------------------------------- */
@font-face {
    font-family: 'Sauna Pro';
    /* Make sure this path matches exactly where you put the file */
    src: url('/assets/fonts/SaunaPro-BoldItalicSwash.otf');
    font-weight: 1500; /* Adjust this if you are using the Regular or Bold version */
    font-style: normal;
    font-display: swap;
}

/* --------------------------------------------------------------
# AERIAS DESIGN SYSTEM (Poppins + Space Mono)
-------------------------------------------------------------- */

:root {
  /* Fonts */
  --font-main:    'Poppins', sans-serif; 
  --font-tech:    'Space Mono', monospace; /* Kept for "Style Codes" / Data */
  --font-brand:   'Sauna Pro', serif;

/* --- UPDATED PALETTE --- */
  /* The "Deep" Dark (Not pure black, slightly cool) */
  --color-text-main: #0a0a0a; 
  --color-text-muted: #555555;
  
/* THE MIST COLORS (Ultra-Subtle) */
  /* Top: Pure Clean White */
  --color-mist-start: #ffffff; 
  /* Bottom: A very faint, cool violet-grey (Morning Twilight) */
  --color-mist-end:   #f3f4f8;
  
  /* The Accent (Updated from Teal to the Brand's "Silly Goose" Energy) */
  /* Use a sharp Electric Blue or Deep Violet for buttons/links */
  --color-accent-pop: #468f92;
  
  /* Spacing */
  --section-padding: 80px 0;
}

/* --------------------------------------------------------------
# UTILITY CLASS FOR SAUNA PRO
-------------------------------------------------------------- */
.font-sauna {
  font-family: var(--font-brand) !important;
  font-weight: normal; /* Let the font file dictate the weight */
  letter-spacing: 0px; /* Custom fonts often need a reset */
}


/* --------------------------------------------------------------
# BASE TYPOGRAPHY
-------------------------------------------------------------- */
body {
  background-color: var(--color-bg);
  color: var(--color-text-main);
  font-family: var(--font-main);
  font-weight: 400; /* Body = Regular */
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* HEADERS: SemiBold (600) */
h1, h2, h3, h4, h5 {
  font-family: var(--font-main);
  font-weight: 600; 
  color: var(--color-text-main);
  letter-spacing: -0.03em; /* Poppins looks better tighter */
  text-transform: none; 
}

/* SUB-HEADINGS: Medium (500) */
h6, .sub-heading {
  font-family: var(--font-main);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* BODY TEXT: Regular (400) */
p {
  font-family: var(--font-main);
  font-weight: 400;
  color: var(--color-text-muted);
}

/* SECONDARY TEXT: ExtraLight (200) */
.text-secondary, .small, small, .caption {
  font-family: var(--font-main);
  font-weight: 200;
  opacity: 0.9; 
}

.nav-link{
  font-family: var(--font-main);
  font-weight: 200;
  opacity: 0.9; 
}


/* --------------------------------------------------------------
# THE ENGINEERING EXCEPTIONS (Space Mono)
-------------------------------------------------------------- */
/* We keep Space Mono for anything that looks like "Data" or "UI" */

.spec-table, .spec-key {
  font-family: var(--font-tech) !important;
  font-size: 0.85rem;
}

.tech-label {
  font-family: var(--font-tech) !important;
  font-weight: 400;
  letter-spacing: 1px;
}

.btn, button, input, select, textarea {
  font-family: var(--font-tech) !important; /* Buttons look better in Mono */
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.85rem;
}

/* --------------------------------------------------------------
# SPECIFIC HERO OVERRIDES
-------------------------------------------------------------- */
.hero-animated h2 {
  font-family: var(--font-main);
  font-weight: 600; /* SemiBold */
  font-size: 5rem;
  line-height: 1.1;
  text-shadow: 0 2px 10px rgba(255,255,255,0.5);
}

/* --------------------------------------------------------------
# LAYOUT UTILITIES
-------------------------------------------------------------- */
.hero-animated h2 {
  font-family: var(--font-main);
  font-weight: 600; 
  font-size: 5rem;
  line-height: 1.1;
  text-shadow: 0 2px 10px rgba(255,255,255,0.5);
}

/* Footer Styling */
.nav-bot {
  background-color: rgba(255, 255, 255, 0.95) !important; 
  border-top: 1px solid #eee; 
  padding: 1rem 3rem; 
  display: flex;
  justify-content: space-between; 
  align-items: center;
}

/* --------------------------------------------------------------
# NAVIGATION (Clean & Minimal)
-------------------------------------------------------------- */
.navbar {
  background-color: rgba(255, 255, 255, 0.95) !important; /* Frosted look */
  border-bottom: 1px solid #eee;
  padding: 1rem 2rem;
}

.nav-link {
  color: var(--color-text-main) !important;
  font-weight: 400;
  margin: 0 10px;
  position: relative;
}

.nav-link:after {
  content: '';
  display: block;
  width: 0;
  height: 2px;
  background: var(--color-accent-pop);
  transition: width .3s;
}

.nav-link:hover:after {
  width: 100%;
}

/* --- GLOBAL BACKGROUND --- */
body {
  /* This creates the "Studio Mist" effect */
  background: radial-gradient(circle at 50% 0%, #ffffff 0%, var(--color-mist-start) 60%, var(--color-mist-end) 100%);
  background-attachment: fixed; /* Keeps the mist in place while scrolling */
  color: var(--color-text-main);
  
  /* Standard Setup */
  font-family: var(--font-main);
  font-weight: 400; 
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* --------------------------------------------------------------
# HERO SECTION (Fixed Layout)
-------------------------------------------------------------- */
.hero-animated {
  width: 100%;
  /* Calculate height: 100% of screen minus the header height (approx 100px) */
  min-height: calc(100vh - 100px); 
  
  /* MARGIN pushes the box down, so image starts AFTER navbar */
  margin-top: 100px; 
  padding-bottom: 60px;
  
  /* Background Image Setup */
  background: 
    linear-gradient(to bottom, rgba(255, 255, 255, 0.2) 0%, rgba(220, 232, 255, 0.9) 100%),
    url('/assets/images/BlurryVest.png');
    
  background-size: cover;
  background-position: center top; /* Focus on top of image */
  /* background-attachment: fixed; <--- REMOVE THIS line if image feels jumpy */
  
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* --------------------------------------------------------------
# "THE PRODUCT" TEASER SECTION (New styling)
-------------------------------------------------------------- */
.product-card {
  border: 1px solid #eee;
  padding: 40px;
  text-align: left;
  transition: 0.3s;
}

.product-card:hover {
  border-color: var(--color-text-main);
  background-color: var(--color-accent-light);
}

.spec-table {
  width: 100%;
  font-family: var(--font-tech);
  font-size: 0.8rem;
  margin-top: 20px;
  margin-bottom: 40px; /* Added this line for spacing */
  border-top: 2px solid var(--color-text-main);
}

.spec-table td {
  padding: 10px 0;
  border-bottom: 1px solid #ddd;
}

.spec-key {
  font-weight: 700;
  color: var(--color-text-main);
}

/* --------------------------------------------------------------
# FOOTER (Fixed/Sticky + Two-Line Center)
-------------------------------------------------------------- */
.nav-bot {
  position: fixed !important;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 1030;
  
  background: transparent !important;
  background-color: rgba(255, 255, 255, 0.95) !important; 
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  padding: 0.5rem 3rem;
  
  /* Essential for absolute centering */
  position: relative; 
  display: flex;
  justify-content: space-between; 
  align-items: center;
}

/* 1. Brand Name (Left) */
.nav-bot .navbar-brand {
  color: var(--color-text-main) !important;
  font-family: var(--font-brand);
  font-size: 2.0rem; 
  font-weight: normal !important;
  z-index: 2; /* Ensures logo stays on top */
}

/* 2. The Center Container (Holds both lines) */
/* This replaces the old ".nav-bot span" rule */
.footer-center {
  position: absolute;  
  left: 50%;           
  transform: translateX(-50%); /* Dead Center */
  
  display: flex;       
  flex-direction: column; /* Stack them vertically */
  align-items: center;    /* Center align text */
  justify-content: center;
  z-index: 1;
}

/* Line 1: Engineered in Cape Town */
.footer-center span {
  font-family: 'Space Mono';
  font-size: 0.7rem;
  letter-spacing: 1px;
  opacity: 0.7;
  color: var(--color-text-main);
  white-space: nowrap;
  line-height: 1.2;
}

/* Line 2: Legal & Shipping */
.footer-center a {
  font-family: 'Space Mono';
  font-size: 0.65rem;
  color: #999 !important; /* Muted grey */
  text-decoration: none;
  margin-top: 2px;
  letter-spacing: 0.5px;
  transition: 0.3s;
}

.footer-center a:hover {
  color: var(--color-accent-pop) !important;
  text-decoration: underline;
}

/* 3. Social Icons (Right) */
.nav-bot .navbar-nav {
  flex-direction: row;
  gap: 25px;
  margin: 0;
  z-index: 2;
}

.nav-bot .navbar-nav li {
  list-style: none;
}

.nav-bot .navbar-nav a {
  color: #2A2A2A !important; 
  transition: 0.3s;
  font-size: 1.1rem;
}

.nav-bot .navbar-nav a:hover {
  color: var(--color-accent-pop) !important;
  transform: translateY(-3px);
}

/* Mobile Adjustments */
@media (max-width: 768px) {
  .nav-bot {
    padding: 10px 20px;
  }
  
  /* Hide the center text on mobile so it doesn't overlap the logo */
  .footer-center {
    display: none;
  }
}
/* --------------------------------------------------------------
# MOBILE RESPONSIVENESS
-------------------------------------------------------------- */
@media (max-width: 768px) {
  /* 1. Shrink the huge headings */
  h1 {
    font-size: 3rem !important; /* Overrides inline styles */
    line-height: 1.1 !important;
  }
  
  h2 {
    font-size: 2.5rem !important;
  }

  /* 2. Fix Hero Spacing */
  .hero-animated {
    min-height: auto; /* Let content determine height on mobile */
    padding-top: 140px;
    padding-bottom: 40px;
  }

  /* 3. Fix About Us Image Height */
  /* This targets the specific image in About Us so it's not too tall on phones */
  section img[alt="Cape Town Running Culture"] {
    height: 40vh !important;
  }
  
  /* 4. Ensure the container doesn't overflow */
  .container, .container-fluid {
    overflow-x: hidden;
  }
}

/* Add to aerias-theme.css */
.form-clean input {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--color-text-main);
  border-radius: 0;
  padding: 15px 0;
  color: var(--color-text-main);
  font-family: 'Space Mono';
}
.form-clean input:focus {
  outline: none;
  box-shadow: none;
  border-bottom: 2px solid var(--color-accent-pop);
  background: transparent;
}
.form-clean input::placeholder {
  color: rgba(15,47,48, 0.5);
  font-size: 0.85rem;
}