/* ============================================================
   FILE: css/header.css
   Top bar and navigation styles.
   EDIT colors and sizes here.
============================================================ */

/* =====================
   TOP BAR
   (The thin bar at the very top with phone and email)
===================== */
.topbar {
  background-color: var(--dark-green);
  padding: 0.45rem 0;
  font-size: 0.8rem;
  border-bottom: 1px solid rgba(181, 229, 80, 0.12);
}

.topbar__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.topbar__left,
.topbar__right {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.topbar a {
  color: rgba(244, 240, 230, 0.7);
  display: flex;
  align-items: center;
  gap: 0.35rem;
  transition: color 0.2s;
}
.topbar a:hover       { color: var(--lime); }
.topbar .topbar__wa   { color: var(--whatsapp) !important; }

/* =====================
   MAIN HEADER
===================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(26, 71, 49, 0.97);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(181, 229, 80, 0.12);
  transition: box-shadow 0.3s;
}

/* Shadow added when user scrolls down — done by JavaScript */
.site-header--scrolled {
  box-shadow: 0 4px 32px rgba(13, 40, 24, 0.3);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
  gap: 1.5rem;
}

/* =====================
   LOGO
   EDIT logo colors and size here
===================== */
.logo {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  text-decoration: none;
  flex-shrink: 0;
}

/* The green square with S+ */
.logo__mark {
  width: 38px;
  height: 38px;
  background-color: var(--lime);
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--dark-green);
  flex-shrink: 0;
}

/* Company name text */
.logo__name {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.25rem;
  color: var(--cream);
  letter-spacing: -0.01em;
  line-height: 1;
  display: block;
}
.logo__name span { color: var(--lime); } /* "plus" part in lime */

/* Tagline below logo name */
.logo__tag {
  font-size: 0.63rem;
  font-weight: 500;
  color: rgba(244, 240, 230, 0.45);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  display: block;
}

/* =====================
   NAVIGATION LINKS
===================== */
.nav__links {
  display: flex;
  align-items: center;
  gap: 0.1rem;
}

.nav__links a {
  padding: 0.45rem 0.78rem;
  font-family: var(--font-heading);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(244, 240, 230, 0.82);
  border-radius: 6px;
  transition: all 0.2s;
  white-space: nowrap;
  text-decoration: none;
}

.nav__links a:hover,
.nav__links a.active {
  color: var(--lime);
  background: rgba(181, 229, 80, 0.1);
}

/* CTA button in nav */
.nav__cta {
  margin-left: 0.75rem;
}

/* =====================
   HAMBURGER (Mobile Menu Button)
===================== */
.nav__toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
  cursor: pointer;
  background: none;
  border: none;
}

.nav__toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background-color: var(--cream);
  border-radius: 2px;
  transition: all 0.3s;
}

/* =====================
   PAGE HERO
   (The green banner at top of inner pages)
===================== */
.page-hero {
  background: linear-gradient(135deg, #0d2818 0%, #1a4731 55%, #2d6a4f 100%);
  padding: 5rem 0 4rem;
  position: relative;
  overflow: hidden;
}

/* Grid pattern overlay */
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(181, 229, 80, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(181, 229, 80, 0.03) 1px, transparent 1px);
  background-size: 64px 64px;
  pointer-events: none;
}

.page-hero__content {
  position: relative;
  z-index: 1;
  max-width: 760px;
}

.page-hero h1 { color: var(--cream); margin-bottom: 1rem; }
.page-hero p  { font-size: 1.0625rem; color: rgba(244, 240, 230, 0.75); margin-bottom: 2rem; }

.page-hero__ctas {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

/* Breadcrumb navigation */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  color: rgba(244, 240, 230, 0.5);
  margin-bottom: 1.5rem;
}
.breadcrumb a    { color: rgba(244, 240, 230, 0.6); transition: color 0.2s; }
.breadcrumb a:hover { color: var(--lime); }
.breadcrumb span { color: var(--lime); }

/* =====================
   RESPONSIVE — MOBILE
===================== */
@media (max-width: 768px) {

  /* Prevent long tagline from pushing hamburger off-screen */
  .nav__inner {
    gap: 0.5rem;
  }

  .logo {
    flex-shrink: 1;
    min-width: 0;
    gap: 0.45rem;
  }

  .logo > div {
    min-width: 0;
    overflow: hidden;
  }

  .logo__name {
    font-size: 1.05rem;
  }

  .logo__tag {
    font-size: 0.52rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }

  .nav__toggle {
    flex-shrink: 0;
  }

  /* Hide nav links on mobile */
  .nav__links {
    display: none;
  }

  /* Mobile menu — shown when hamburger is clicked */
  .nav__links.open {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 68px;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--dark-green);
    padding: 1.5rem;
    overflow-y: auto;
    z-index: 999;
    gap: 0;
  }

  .nav__links.open a {
    padding: 0.875rem 0.75rem;
    font-size: 0.9375rem;
    border-bottom: 1px solid rgba(181, 229, 80, 0.08);
  }

  /* Show hamburger on mobile */
  .nav__toggle {
    display: flex;
  }

  /* Hide CTA button on mobile */
  .nav__cta {
    display: none;
  }

  .page-hero {
    padding: 3.5rem 0 2.5rem;
  }
}


/* FINAL MOBILE FORM FIX */
@media (max-width:768px){

.hero__inner,
.hero-grid,
.lead__grid{
display:flex !important;
flex-direction:column !important;
}

.hero__content,
.hero__form,
.form-card,
.lead-form{
width:100% !important;
max-width:100% !important;
flex:0 0 100% !important;
}

.form-card,
.hero__form{
margin-top:20px !important;
padding:20px !important;
}

.sp-form,
.sp-form .form-field,
.sp-form input,
.sp-form select,
.sp-form button{
width:100% !important;
max-width:100% !important;
box-sizing:border-box !important;
}

h1{
font-size:42px !important;
line-height:1.1 !important;
word-break:break-word !important;
}

body,html{
overflow-x:hidden !important;
}
}