/* ============================================================
   CHAOS AGENCY — Shared Components CSS
   Styles for elements that appear on every page:
   navigation bar, work link, and footer.
   ============================================================ */


/* ============================================================
   1. NAVIGATION BAR
   Fixed at top of every page. Transparent initially,
   transitions to solid dark with red border on scroll.
   Layout: CHAOS wordmark (left) | MENU trigger (right)
   ============================================================ */

.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 24px 24px;                     /* 24px all sides — logo and MENU sit near edges */
  background: transparent;
  z-index: 1000;                          /* Always above all page content */
  transition: background 0.4s ease,
              padding 0.4s ease,
              border-color 0.4s ease;
}

/* --- Scrolled state ---
   Added by nav.js via ScrollTrigger after scrolling 80px.
   Gives the nav a solid dark background with blur and a subtle red line. */
.site-nav.nav-scrolled {
  background: rgba(13, 13, 13, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);    /* Safari support */
  padding: 16px 24px;                     /* Tighter padding when scrolled */
  border-bottom: 1px solid var(--color-border-red);
}

/* --- Inner layout ---
   Flexbox row: logo left, menu trigger right, vertically centred.
   No max-width — logo and MENU sit at the far screen edges. */
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

/* Logo link gets will-change for smooth GSAP animation between
   centred (hero) and left-aligned (other sections) positions */
.nav-logo-link {
  will-change: transform;
}

/* When logo is centred on hero: flexbox centres the logo,
   nav-right is hidden so it doesn't offset the centering */
.nav-inner.logo-centered {
  justify-content: center;
}
.nav-inner.logo-centered .nav-right {
  position: absolute;
  visibility: hidden;
}


/* ============================================================
   2. NAV LOGO (left side)
   SVG logo image (logo-white.svg) at 40px height.
   Displayed as a block image inside a link.
   ============================================================ */

.nav-logo-link {
  display: block;
  text-decoration: none;
  line-height: 0;                         /* Remove any line-height gap below img */
}

/* Logo SVG image — fixed height, auto width */
.nav-logo-img {
  height: 40px;
  width: auto;
  display: block;
}


/* ============================================================
   3. NAV RIGHT CONTAINER
   Holds the sticky CTA button and MENU trigger.
   CTA is hidden by default, fades in when .nav-scrolled is active.
   ============================================================ */

.nav-right {
  display: flex;
  align-items: center;
  gap: 24px;
}


/* ============================================================
   9. MOBILE RESPONSIVE — NAVIGATION
   On mobile (max-width 768px):
   - Tighter nav padding
   - Slightly smaller logo
   ============================================================ */

@media (max-width: 768px) {

  /* Tighter nav bar padding on mobile */
  .site-nav {
    padding: 20px 16px;                       /* 20px top/bottom, 16px sides */
  }

  .site-nav.nav-scrolled {
    padding: 14px 16px;
  }

  /* Slightly smaller logo on mobile */
  .nav-logo-img {
    height: 32px;
  }

}


/* ============================================================
   10. FOOTER
   Dark background with red top border.
   Three-column grid: brand | nav links | contact.
   Bottom bar with copyright and "Work that works." sign-off.
   ============================================================ */

.site-footer {
  background: var(--color-bg);            /* #0D0D0D */
  padding: 80px 0 48px;
  border-top: 1px solid var(--color-border-red);  /* Subtle red top border */
}


/* --- Footer grid ---
   Three equal columns on desktop, single column stacked on mobile */
.footer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 48px;
}


/* ---- LEFT COLUMN: Logo + tagline ---- */

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.footer-logo-link {
  display: block;
  line-height: 0;                         /* Remove gap below img */
}

/* Footer logo — slightly larger than nav (48px vs 40px) */
.footer-logo-img {
  height: 48px;
  width: auto;
  display: block;
}

/* "Work that works." tagline under logo */
.footer-tagline {
  font-family: var(--font-body);
  font-size: var(--type-small);           /* 13px */
  color: var(--color-text-muted);         /* #999999 */
  line-height: 1.4;
}


/* ---- CENTRE COLUMN: Navigation links ---- */

.footer-nav {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Individual footer links — white, turn red on hover */
.footer-link {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 400;
  color: var(--color-white);
  text-decoration: none;
  transition: color 0.25s ease;
}

.footer-link:hover {
  color: var(--color-red);                /* #E2002B on hover */
}


/* ---- RIGHT COLUMN: Email + location ---- */

.footer-contact {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Email link — same style as other footer links */
.footer-email {
  word-break: break-all;                  /* Prevent long email from overflowing */
}

/* Nairobi, Kenya — muted text */
.footer-location {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--color-text-muted);         /* #999999 */
}


/* ---- BOTTOM BAR: Copyright + sign-off ---- */

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);  /* Subtle white line */
}

/* Copyright text — small, muted */
.footer-copyright {
  font-family: var(--font-body);
  font-size: var(--type-small);           /* 13px */
  color: var(--color-text-muted);         /* #999999 */
}

/* "Work that works." sign-off — small, red */
.footer-signoff {
  font-family: var(--font-body);
  font-size: var(--type-small);           /* 13px */
  color: var(--color-red);                /* #E2002B */
  font-style: italic;
}


/* ============================================================
   11. FOOTER — MOBILE RESPONSIVE
   On mobile: single column stack, centred text,
   bottom bar stacks vertically.
   ============================================================ */

@media (max-width: 768px) {

  .site-footer {
    padding: 56px 0 32px;
  }

  /* Stack to single column on mobile */
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 40px;
    text-align: center;
  }

  /* Centre the logo on mobile */
  .footer-brand {
    align-items: center;
  }

  /* Centre nav links on mobile */
  .footer-nav {
    align-items: center;
  }

  /* Centre contact info on mobile */
  .footer-contact {
    align-items: center;
  }

  /* Bottom bar: stack vertically, centre text */
  .footer-bottom {
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }
}