/* ==========================================================================
   WEMADE — Header & footer components
   ========================================================================== */

/* ---- Navbar ---- */
/* .navbar just holds the floating gap and is click-through
   (pointer-events:none). .navbar__row lays out several SEPARATE floating
   pills — Kh's reference: distinct capsules with visible gaps between
   them, not one continuous bar. Each .navbar__pill gets its own glass
   background and re-enables pointer-events, so the gaps between pills stay
   click-through to whatever's behind the header — a nice side effect of
   the segmented layout. */
/* Mobile (<1024px): a classic full-width sticky bar — flush to the top and
   sides, no floating gap, no pill shapes (Kh's call: "not like the web").
   Desktop (>=1024px): the floating segmented-pills layout, unchanged. */
.navbar {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 80;
  padding: 0;
  pointer-events: none;
}
@media (min-width: 1024px) { .navbar { padding: var(--nav-float-gap); } }

.navbar__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  max-width: 1400px;
  margin-inline: auto;
  /* Mobile: this row IS the bar — transparent over the hero at the top of
     the page, solid off-white once scrolled (Kh's call). .navbar.is-scrolled
     is toggled by the shared scroll loop in js/components.js. */
  height: var(--nav-h);
  padding-inline: 16px;
  pointer-events: auto;
  background: transparent;
  transition: background-color 0.3s, backdrop-filter 0.3s;
}
@media (max-width: 1023.98px) {
  /* Scoped to mobile — .is-scrolled is a plain scroll-position toggle with
     no viewport check of its own, and this selector's specificity would
     otherwise beat the desktop reset below it. */
  .navbar.is-scrolled .navbar__row {
    background: rgba(242, 242, 242, 0.94);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
  }
}
@media (min-width: 1024px) {
  /* 3-column grid so the links pill sits at the row's true center,
     regardless of how wide the brand/CTA pills end up. justify-self on
     each pill keeps it hugging its own content instead of stretching to
     fill its 1fr track. */
  .navbar__row {
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
    height: auto; padding-inline: 0; pointer-events: none;
    background: none; backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  .navbar__brand-pill { justify-self: start; }
  .navbar__links-pill { justify-self: center; }
  .navbar__cta-pill { justify-self: end; }
}

/* Mobile: no pill shape/background of its own — .navbar__row is the whole
   bar now and already supplies the color/blur (see above), so each item
   here is just a plain flex child. */
.navbar__pill {
  pointer-events: auto;
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
}
@media (min-width: 1024px) {
  /* Desktop: back to individual floating pills, no gloss layer (removed
     per Kh's note — flat, not shiny), more transparent than the first
     pass. */
  .navbar__pill {
    overflow: hidden;
    height: var(--nav-h);
    border-radius: 999px; /* full pill — compact capsules, not a wide bar */
    background: rgba(242, 242, 242, 0.3);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    border: 1px solid rgba(0, 39, 74, 0.08);
    box-shadow: 0 10px 28px rgba(0, 20, 45, 0.12), 0 2px 8px rgba(0, 20, 45, 0.06);
  }
}

.navbar__brand-pill { flex-shrink: 0; padding-inline: 16px; }
@media (min-width: 1024px) { .navbar__brand-pill { padding-inline: 20px; } }
/* Real brand asset — images/wemadetrans-header.png is wemadetrans.png with
   its transparent margins trimmed (same pixels, tighter canvas), so it
   reads at a normal nav size. Not recreated/redrawn. */
.navbar__logo { height: 24px; width: auto; flex-shrink: 0; }
@media (min-width: 768px) { .navbar__logo { height: 28px; } }

.navbar__links-pill {
  display: none;
  gap: 30px;
  padding-inline: 26px;
}
@media (min-width: 1024px) { .navbar__links-pill { display: flex; } }

.navbar__link {
  position: relative;
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  /* Now more transparent, the pill can no longer guarantee a light surface
     on its own, so the text tracks the real section behind the navbar —
     same .navbar--on-light class js/components.js drives for the mobile
     strip (plain geometry, not mix-blend-mode — that broke twice here). */
  color: var(--white);
  opacity: 0.85;
  transition: opacity 0.3s, color 0.3s;
}
.navbar--on-light .navbar__link { color: var(--navy); }
.navbar__link:hover { opacity: 1; }
.navbar__link::after {
  content: "";
  position: absolute;
  left: 0; bottom: -4px;
  width: 0; height: 1px;
  background: var(--teal);
  transition: width 0.3s var(--ease-quart-out);
}
.navbar__link:hover::after { width: 100%; }
.navbar__link.is-active { opacity: 1; }
.navbar__link.is-active::after { width: 100%; }

.navbar__cta-pill {
  display: none;
  gap: 8px;
  padding-inline: 22px;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--white);
  transition: background-color 0.3s, color 0.3s;
}
.navbar--on-light .navbar__cta-pill { color: var(--navy); }
@media (min-width: 1024px) { .navbar__cta-pill { display: inline-flex; align-items: center; } }
.navbar__cta-pill:hover {
  background: var(--steel);
  color: var(--navy);
}

/* ---- Mobile: swipeable "peek" links pill ---- */
/* Replaces the old dots-trigger + full-screen overlay: every link lives
   right on the bar. One link sits centered; native CSS scroll-snap does
   the swipe (no JS/library needed) and a mask-image fades the neighbors'
   edges in on both sides rather than hard-clipping them — a visible cue
   that there's more to swipe to, not just empty cropped text. */
.navbar__mobile-links {
  display: flex;
  align-items: center;
  width: 208px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  mask-image: linear-gradient(90deg, transparent 0, #000 26px, #000 calc(100% - 26px), transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 26px, #000 calc(100% - 26px), transparent 100%);
}
.navbar__mobile-links::-webkit-scrollbar { display: none; }
@media (min-width: 1024px) { .navbar__mobile-links { display: none; } }

.navbar__mobile-links::before,
.navbar__mobile-links::after {
  content: "";
  flex: none;
  scroll-snap-align: start;
  width: calc(50% - 30px); /* centers the first/last word like any other */
}

.navbar__mobile-link {
  flex: none;
  scroll-snap-align: center;
  padding-inline: 18px;
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  /* Transparent-over-hero by default → white text; navy once
     .navbar.is-scrolled makes the bar solid (see .navbar__row above). */
  color: var(--white);
  opacity: 0.85;
  white-space: nowrap;
  transition: opacity 0.25s, color 0.3s;
}
.navbar.is-scrolled .navbar__mobile-link { color: var(--navy); opacity: 0.55; }
.navbar__mobile-link.is-active { opacity: 1; font-weight: 600; }

/* ---- Social icon buttons (footer) ---- */
.social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 999px;
  border: 1px solid var(--navy-200);
  color: var(--navy-600a);
  transition: border-color 0.3s, color 0.3s, background-color 0.3s;
}
.social-icon svg { width: 16px; height: 16px; }
.social-icon:hover { border-color: var(--steel); background: var(--steel); color: var(--navy); }

/* ---- Back-to-top arrow (both breakpoints) ---- */
/* Genuinely transparent — no fill, no border, no blur — just the arrow
   itself, colored to track whichever section it's currently sitting over
   (js/components.js — same plain-geometry mechanism the desktop nav uses,
   not a blend mode). A soft drop-shadow keeps it legible on any backdrop
   without needing a background at all. */
.back-to-top {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 75;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--white);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.3s, transform 0.3s, color 0.3s;
}
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top--on-light { color: var(--navy); }
.back-to-top svg {
  width: 20px;
  height: 20px;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35));
}
.back-to-top--on-light svg { filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.12)); }
.back-to-top:hover { transform: translateY(-3px); }
@media (min-width: 768px) { .back-to-top { right: 28px; bottom: 28px; } }

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: 999px;
  padding: 16px 32px;
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}
.btn--navy { background: var(--navy); color: var(--offwhite); }
.btn--navy:hover { background: var(--teal); color: var(--navy); }
.btn--outline-navy { border: 1px solid var(--navy-200); color: var(--navy); }
.btn--outline-navy:hover { border-color: var(--navy); background: var(--navy); color: var(--offwhite); }
.btn--outline-light { border: 1px solid var(--offwhite-25); color: var(--offwhite); }
.btn--outline-light:hover { border-color: var(--steel); color: var(--steel); }

/* ---- Footer ---- */
/* Off-white now (Kh's call) — was navy. Every child color below is the
   navy-on-light inverse of what it used to be. */
.footer {
  position: relative;
  overflow: hidden;
  background: var(--paper);
  color: var(--navy);
  padding-top: 56px; /* the logo+menu block above the icons is desktop-only
    now, so mobile doesn't need the extra room that used to need */
}
@media (min-width: 1024px) { .footer { padding-top: 96px; } }

/* Logo + Menu — desktop/"web" only (Kh's call): it's already always on
   screen via the fixed header, so repeating it (and the nav) here was just
   eating mobile's limited vertical space. Logo left, Menu grid right. */
.footer__top { display: none; }
@media (min-width: 1024px) {
  .footer__top { display: flex; align-items: center; justify-content: center; gap: 96px; }
}

.footer__brand { display: inline-flex; }
/* Real brand asset (see js/components.js). */
.footer__logo { height: 92px; width: auto; }

.footer__menu-label {
  margin-bottom: 16px;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--navy-450);
}
/* Row-major 2-column grid — Why Us/Services, About/Insights, Contact —
   that's just CSS grid's default fill order for 5 items in 2 columns, no
   explicit ordering needed. */
.footer__menu-grid {
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 10px 40px;
}
.footer__menu-grid a {
  font-size: 14px;
  color: var(--navy-600a);
  transition: color 0.3s;
}
.footer__menu-grid a:hover { color: var(--teal); }

/* One row now — contact icons (WhatsApp/Email/Location) and the social
   platforms beside each other (Kh's call: was two stacked rows). */
.footer__social-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 8px; /* .footer__top above is hidden on mobile, so this doesn't
    need to clear it — .footer's own padding-top already gives it room */
  margin-bottom: 36px; /* breathing room above the bottom bar's divider line */
}
@media (min-width: 1024px) { .footer__social-row { margin-top: 56px; } }

.footer__bottom {
  display: flex;
  flex-direction: column;
  gap: 16px;
  border-top: 1px solid var(--navy-100);
  padding-block: 32px;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--navy-450);
}
@media (min-width: 640px) { .footer__bottom { flex-direction: row; align-items: center; justify-content: space-between; } }
.footer__bottom strong { color: var(--navy-600a); font-weight: 600; }