/* ==========================================================
   GEKOS — CORE SYSTEM STYLES
   Authority through restraint
   Status: AUDITED / HARDENED / SIMPLIFIED
========================================================== */


/* ==========================================================
   SYSTEM ROOT VARIABLES (SINGLE SOURCE OF TRUTH)
   🔧 SAFE ADJUSTMENT ZONE
========================================================== */

:root {
  /* ================= HEADER ================= */
  --header-height: 64px;               /* CHANGE if header height changes */
  --header-geko-width: 96px;
  --header-geko-opacity: 0.35;

  /* ================= HERO ================= */
  --hero-visual-offset: 64px;          /* 🔧 MOVE HEROGLOBE DOWN / UP */

  /* ================= FOOTER ================= */
  --footer-geko-width: 180px;
  --footer-geko-opacity: 0.85;
  --footer-geko-x: 2rem;
  --footer-geko-y: 1.5rem;

  /* ================= FOOTER NAV ================= */
  --nav-gap: 28px;
  --nav-padding-mobile: 14px;
  --nav-padding-desktop: 24px;
  --nav-opacity-idle: 0.75;
  --nav-opacity-active: 1;
}


/* ==========================================================
   GEKOS — HEADER SYSTEM
========================================================== */

#gekos-header {
  position: fixed;
  top: 0;
  inset-inline: 0;
  height: var(--header-height);
  z-index: 50;

  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.95),
    rgba(0,0,0,0.75)
  );

  overflow: hidden;
}

.header-floor {
  display: flex;
  align-items: center;
  justify-content: space-between;

  height: 100%;
  padding-inline: 24px;
}

/* Brand */
.header-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  text-decoration: none;
}

.header-title {
  font-size: 14px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.9;
}

/* Right cluster (nav + CTA) */
.header-right {
  display: flex;
  align-items: center;
  gap: 18px;
}

/* Primary nav */
.header-nav {
  display: flex;
  gap: 22px;
}

.header-nav a {
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  text-decoration: none;
  opacity: 0.8;
}

.header-nav a:hover {
  opacity: 1;
}

/* CTA */
.header-cta {
  background: #7bb13c;
  color: #000;
  padding: 8px 14px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}

/* Inline cinematic geko */
.header-geko {
  width: var(--header-geko-width);
  height: auto;
  opacity: var(--header-geko-opacity);
  pointer-events: none;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.6));
}

@media (prefers-reduced-motion: reduce) {
  .header-geko {
    opacity: 0.15;
    filter: none;
  }
}


/* ==========================================================
   HERO OFFSET (HEADER-AWARE LAYOUT)
========================================================== */

body.home .hero {
  padding-top: var(--header-height);
}


/* ==========================================================
   HERO VISUAL FRAMING (CRITICAL FIX)
   🔧 THIS IS WHAT MOVES HEROGLOBE.MP4 DOWN
========================================================== */

.hero-bg,
.hero-video,
.geko-video {
  position: absolute;

  /* 🔧 MAIN CONTROL */
  top: calc(-6vh + var(--hero-visual-offset));

  right: -6vh;
  bottom: -6vh;
  left: -6vh;

  width: calc(100% + 12vh);
  height: calc(100% + 12vh);

  object-fit: cover;
  object-position: center top;

  z-index: 0;
  pointer-events: none;
}


/* ==========================================================
   GEKOS — FOOTER NAVIGATION (BOTTOM BAR)
========================================================== */

#gekos-nav {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 20;

  display: flex;
  justify-content: center;
  gap: var(--nav-gap);

  padding:
    var(--nav-padding-mobile)
    20px
    calc(var(--nav-padding-mobile) + env(safe-area-inset-bottom, 0px));

  background: linear-gradient(
    to top,
    rgba(0,0,0,0.85),
    rgba(0,0,0,0.45) 60%,
    rgba(0,0,0,0)
  );

  -webkit-backdrop-filter: saturate(1.1) blur(2px);
  backdrop-filter: saturate(1.1) blur(2px);
}

#gekos-nav a {
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;

  color: rgba(230,230,230,0.85);
  text-decoration: none;
  opacity: var(--nav-opacity-idle);

  transition: opacity 0.2s ease-out;
}

#gekos-nav a:hover,
#gekos-nav a:focus-visible,
#gekos-nav a[aria-current="page"] {
  opacity: var(--nav-opacity-active);
  outline: none;
}

@media (hover: hover) and (pointer: fine) {
  #gekos-nav {
    justify-content: flex-end;
    padding: var(--nav-padding-desktop) 40px;
    background: none;
    backdrop-filter: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  #gekos-nav a {
    transition: none;
  }
}


/* ==========================================================
   GEKOS — FOOTER STRUCTURE & CINEMATIC SIGNATURE
========================================================== */

#gekos-footer {
  position: relative;
  overflow: hidden;
}

.footer-floor {
  position: relative;
  z-index: 2;
}

.footer-cinematic {
  position: absolute;
  right: var(--footer-geko-x);
  bottom: var(--footer-geko-y);
  pointer-events: none;
}

.footer-geko {
  width: var(--footer-geko-width);
  height: auto;
  opacity: var(--footer-geko-opacity);

  filter:
    drop-shadow(0 6px 20px rgba(0,0,0,0.6))
    saturate(0.95)
    contrast(1.05);
}

@media (prefers-reduced-motion: reduce) {
  .footer-geko {
    opacity: 0.6;
    filter: none;
  }
}


/* ==========================================================
   END — GEKOS CORE SYSTEMS
========================================================== */