/* ========================================
   STEK TRAININGEN - MINIMAL CSS
   Most styles now handled by Tailwind CSS
   ======================================== */

/* Font Declarations */
@font-face {
  font-family: 'Haskoy';
  src: url('fonts/Haskoy-variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Haskoy';
  src: url('fonts/Haskoy-variable.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Haskoy';
  src: url('fonts/Haskoy-variable.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Haskoy';
  src: url('fonts/Haskoy-variable.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Haskoy';
  src: url('fonts/Haskoy-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Haskoy';
  src: url('fonts/Haskoy-ExtraBold.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Kegger';
  src: url('fonts/Kegger W01 Reg.otf') format('opentype'),
       url('fonts/Kegger W01 Reg.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Karelle';
  src: url('fonts/Karelle.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ========================================
   COLOR PALETTE - CSS Custom Properties
   ======================================== */
:root {
  /* Brand Colors */
  --eerie-black: #2a2e22;              /* softer warm dark - not as harsh as pure black */
  --dark-green: #4e7576;
  --beige: #e4ead7;
  --baby-powder: #f6f8f2;

  /* Background Colors */
  --color-bg: #f6f8f2;              /* baby-powder - lightest background */
  --color-bg-secondary: #e4ead7;    /* beige - secondary background */
  --color-bg-light: #f6f8f2;        /* baby-powder */
  --color-bg-white: #f6f8f2;
  --color-bg-dark: #2a2e22;         /* softer warm dark - dark backgrounds */

  /* Foreground/Text Colors */
  --color-fg: #2a2e22;              /* softer warm dark - main text */
  --color-fg-light: #3a3d33;        /* lighter variant */
  --color-fg-lighter: #5c5f54;      /* even lighter */

  /* Primary Colors (Teal) */
  --color-primary: #26aa8f;         /* teal - main brand color */
  --color-primary-dark: #1f8a74;    /* darker teal */
  --color-primary-darker: #186b5a;  /* even darker teal */
  --color-primary-light: #3fc4a7;   /* lighter teal */
  --color-nav-link: #219a81;         /* slightly darker teal for navbar links */

  /* Accent Colors */
  --color-accent: #1f8a74;          /* darker teal for accents */
  --color-accent-dark: #186b5a;     /* darkest teal */
  --color-accent-yellow: #eab308;   /* keep yellow for CTAs */
  --color-accent-yellow-dark: #ca8a04;

  /* Border Colors */
  --color-border: #3fc4a7;          /* light teal for borders */
  --color-border-light: #e4ead7;    /* beige for subtle borders */

  /* Navbar Scrolled Background */
  --color-nav-scrolled: rgba(246, 248, 242, 0.85);  /* baby-powder with opacity */

  /* White with opacity variants - using baby powder */
  --color-white: #f6f8f2;
  --color-white-80: rgba(246, 248, 242, 0.8);
  --color-white-70: rgba(246, 248, 242, 0.7);
  --color-white-10: rgba(246, 248, 242, 0.1);
  --color-white-20: rgba(246, 248, 242, 0.2);

  /* Black with opacity variants */
  --color-black-5: rgba(42, 46, 34, 0.05);   /* softer warm dark based */
  --color-black-8: rgba(42, 46, 34, 0.08);
  --color-black-10: rgba(42, 46, 34, 0.1);
  --color-black-20: rgba(42, 46, 34, 0.2);

  /* Gray Scale (using sage tones) */
  --color-gray-600: #5c5f54;
  --color-gray-700: #3a3d33;
  --color-gray-200: #e4ead7;        /* beige */

  /* Layout measurements */
  --navbar-height: 102px;             /* logo (70px) + padding (2rem = 32px) */
}

/* Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

/* Navigation scroll behavior (used by JavaScript) */
.nav-hidden {
  opacity: 0;
  transform: translateY(-100%);
  pointer-events: none;
}

/* Compact header when scrolling */
.header {
  background: var(--color-bg);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

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

.header .nav {
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
  transition: padding 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.header.header-scrolled .nav {
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
}

.header .logo-img {
  height: 70px !important;
  transition: height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.header.header-scrolled .logo-img {
  height: 70px !important;
}

/* Logo - always show horizontal logo */
.logo-liggend {
  display: block;
  opacity: 1;
  transition: opacity 0.3s ease, height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Nav link color transitions */
.nav-link {
  transition: color 0.3s ease;
}

.header.header-scrolled .nav-link {
  color: var(--color-fg) !important;
}

.header.header-scrolled .nav-link:hover {
  color: var(--color-nav-link) !important;
}

.header.header-scrolled .nav-link::after {
  background: var(--color-nav-link) !important;
}

.nav-dropdown {
  position: relative;
}

.nav-dropdown-menu {
  min-width: 220px;
  z-index: 999;
  display: none;
  top: calc(100% + 0.35rem);
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
  display: flex !important;
}

.nav-dropdown-menu::before {
  content: '';
  position: absolute;
  top: -12px;
  left: 0;
  right: 0;
  height: 12px;
}

.mobile-nav-toggle {
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: color 0.3s ease;
}

.mobile-nav-toggle:hover {
  color: var(--color-primary);
}

.mobile-submenu {
  transition: all 0.3s ease;
}

/* Hero Background Slideshow - Required for JavaScript slideshow */
.hero-bg-layer {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 1.5rem;
  right: 1.5rem;
  background: var(--color-bg);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: 1rem 1rem 0 0;
}

.hero-bg-layer::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.2) 40%, transparent 60%);
  z-index: 1;
  border-radius: 1rem 1rem 0 0;
}

.hero-overlay {
  top: 0;
  bottom: 0;
  left: 1.5rem;
  right: 1.5rem;
  width: autoc;
  height: 100%;
}

.hero-bg-layer.hidden {
  display: none;
}

/* Section animations removed */
.section {
  opacity: 1;
  transform: none;
}

.section.animate-in {
  opacity: 1;
  transform: none;
}

.belofte {
  opacity: 1 !important;
  transform: none !important;
}

/* Hero section height: full viewport on desktop, auto on mobile */
@media (min-width: 768px) {
  .belofte.hero {
    height: calc(100vh - var(--navbar-height)) !important;
  }
}

@media (max-width: 767px) {
  .belofte.hero {
    height: auto !important;
    min-height: auto !important;
    position: relative !important;
    overflow: visible !important;
  }

  /* Ensure mobile content is visible and not covered */
  .belofte.hero .hero-overlay {
    display: none !important;
  }

  .belofte.hero .hero-bg-layer {
    display: none !important;
  }
}

.inline-cta a .cta-arrow {
  display: inline-block;
  transition: transform 0.2s ease;
}

.inline-cta a:hover .cta-arrow {
  transform: translateX(4px);
}

/* Mobile Menu Styles */
#mobile-menu-button svg {
  transition: color 0.3s ease;
}

.header.header-scrolled #mobile-menu-button {
  color: var(--color-nav-link) !important;
}

#mobile-menu.active {
  opacity: 1;
  pointer-events: auto;
}

/* Responsive adjustments for mobile */
@media (max-width: 768px) {
  .nav-menu {
    display: none;
  }
}

@media (max-width: 640px) {
  .logo-liggend {
    height: 70px !important;
  }

  .header.header-scrolled .logo-liggend {
    height: 65px !important;
  }

  .hero .hero-overlay {
    padding: 1.5rem !important;
    align-items: flex-end !important;
    justify-content: flex-start !important;
  }

  .hero .hero-content {
    max-width: none !important;
    text-align: left !important;
    margin-bottom: 1rem !important;
  }

  .hero .hero-content h2 {
    font-size: 2.5rem !important;
  }

  .hero .hero-content p {
    font-size: 1rem !important;
  }
}

@media (max-width: 768px) {
  .cta-buttons {
    flex-direction: column !important;
    align-items: center !important;
  }

  .cta-buttons .cta-button {
    width: 100% !important;
    max-width: 300px !important;
  }

  .inline-cta-right {
    text-align: center !important;
  }

  .footer-logo-img {
    max-width: 200px !important;
  }

  .nav-menu {
    display: none !important;
  }
}