/* ================================================================
   TARABA BizComm — Shared layout stylesheet
   css/layout.css | Loaded second, by all 5 pages (after base.css).
   Contains: nav, mobile drawer, footer, the WhatsApp float button,
   and the .bottom-cta section shared by about.html/services.html/
   work.html.

   Split out of the old css/style.css during the CSS-architecture
   refactor (Task 7). .bottom-cta was previously pasted independently
   into 3 pages' inline <style> blocks (identical in about.html and
   services.html; work.html used a 640px inner width instead of
   680px) — consolidated here to the about/services value, with
   work.html keeping its 640px as a small override in its own
   css/pages/work.css, loaded after this file.
================================================================ */

/* ─────────────────────────────────────────────
       NAVIGATION
    ───────────────────────────────────────────── */
.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 1000;
  height: 70px;
  display: flex;
  align-items: center;
  background: #ffffff;
  border-bottom: 1px solid transparent;
  transition:
    border-color var(--tr),
    box-shadow var(--tr);
}
.nav.scrolled {
  border-color: var(--border);
  box-shadow: 0 2px 16px rgba(13, 27, 62, 0.07);
}
.nav__logo-img--scrolled {
  display: none;
}
.nav.scrolled .nav__logo-img--default {
  display: block !important;
}
.nav.scrolled .nav__logo-img--scrolled {
  display: none !important;
}
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--pad-x);
}
.nav .nav__inner {
  max-width: 1480px;
  padding-right: 16px;
}
.nav__logo {
  line-height: 1.1;
}
.nav__links {
  display: flex;
  align-items: center;
  gap: 44px;
  list-style: none;
  margin-left: 60px;
}
.nav__links a {
  font-size: 16.5px;
  font-weight: 500;
  color: var(--text-body);
  transition: color var(--tr);
  position: relative;
}
.nav__links a::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--orange);
  border-radius: 2px;
  transform: scaleX(0);
  transition: transform var(--tr);
}
.nav__links a:hover {
  color: var(--navy);
}
.nav__links a:hover::after {
  transform: scaleX(1);
}
/* Current-page link (Task 8: js/main.js adds .active + aria-current
   to the matching link). Previously only services.html styled this
   (in a per-page duplicate of .nav), so every other page's nav never
   highlighted the current link — moved here as the one shared rule. */
.nav__links a:hover::after,
.nav__links a.active::after {
  transform: scaleX(1);
}
.nav__links a.active {
  color: var(--navy);
  font-weight: 600;
}

/* Mobile */
.nav__burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  /* .nav__burger is a <button> now (was a clickable <div>) — reset
     default button chrome so it looks identical, and give it a real
     44×44 tap target instead of just the 22px icon. */
  width: 44px;
  height: 44px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
}
.nav__burger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--navy);
  border-radius: 2px;
}
.drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 280px;
  background: var(--bg-white);
  z-index: 999;
  padding: 88px 32px 40px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transform: translateX(100%);
  transition: transform var(--tr);
  box-shadow: -8px 0 40px rgba(13, 27, 62, 0.12);
}
.drawer.open {
  transform: translateX(0);
}
.drawer a {
  font-family: var(--f-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--navy);
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  display: block;
}
.drawer a:hover {
  color: var(--orange);
}
.drawer .btn {
  margin-top: 24px;
  justify-content: center;
}
.overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(13, 27, 62, 0.25);
  z-index: 998;
}
.overlay.open {
  display: block;
}

/* ─────────────────────────────────────────────
       FOOTER
    ───────────────────────────────────────────── */
.footer {
  background: var(--navy-deep);
  padding: 64px 0 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.footer__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--pad-x);
}
.footer__top {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 52px;
}
.footer__logo-name {
  font-family: var(--f-display);
  font-size: 22px;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.1em;
}
.footer__logo-sub {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--slate-light);
  text-transform: uppercase;
  margin-bottom: 14px;
}
.footer__tagline {
  font-size: 13.5px;
  /* Task 8: bumped from 0.42 → 0.6 opacity — 0.42 measured 4.06:1
     against --navy-deep, failing WCAG AA's 4.5:1 minimum for normal
     text (Lighthouse color-contrast audit). 0.6 measures ~7:1. */
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.7;
  max-width: 250px;
  margin-bottom: 22px;
}
.footer__social {
  display: flex;
  gap: 10px;
}
.footer__sl {
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  /* Task 8: bumped from 0.42 → 0.6 (same contrast fix as .footer__tagline) */
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
  transition: all var(--tr);
}
.footer__sl:hover {
  border-color: var(--orange);
  color: var(--orange);
}
.footer__col-title {
  font-family: var(--f-display);
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.footer__links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.footer__links a {
  font-size: 14px;
  /* Task 8: bumped from 0.45 → 0.6 — 0.45 measured 4.48:1, just under
     the 4.5:1 AA minimum (Lighthouse color-contrast audit). */
  color: rgba(255, 255, 255, 0.6);
  transition: color var(--tr);
}
.footer__links a:hover {
  color: #fff;
}
.footer__ci {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-bottom: 11px;
}
.footer__ci-icon {
  color: var(--orange);
  font-size: 13px;
  flex-shrink: 0;
  margin-top: 2px;
}
.footer__ci-text {
  font-size: 13.5px;
  /* Task 8: bumped from 0.45 → 0.6, same contrast fix as .footer__links a */
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.5;
}
.footer__ci-text a {
  color: rgba(255, 255, 255, 0.6);
  transition: color var(--tr);
}
.footer__ci-text a:hover {
  color: #fff;
}
.footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.footer__copy {
  font-size: 12.5px;
  /* Task 8: bumped from 0.28 → 0.6 — 0.28 measured ~2.49:1 against
     --navy-deep, well under the 4.5:1 AA minimum (Lighthouse
     color-contrast audit). */
  color: rgba(255, 255, 255, 0.6);
}
.footer__nashik {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.6);
  font-style: italic;
}

/* WhatsApp float */
.wa {
  position: fixed;
  bottom: 26px;
  right: 26px;
  z-index: 900;
  width: 52px;
  height: 52px;
  background: #25d366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 18px rgba(37, 211, 102, 0.45);
  transition: all var(--tr);
  opacity: 0;
  pointer-events: none;
}
.wa.visible {
  opacity: 1;
  pointer-events: auto;
}
.wa:hover {
  transform: scale(1.08);
}
.wa svg {
  width: 26px;
  height: 26px;
  fill: white;
}

/* ─────────────────────────────────────────────
   BOTTOM CTA — shared by about.html, services.html
   and work.html (work.html overrides the inner
   max-width in its own css/pages/work.css)
   ───────────────────────────────────────────── */
.bottom-cta {
  background: linear-gradient(140deg, #0d1b3e 0%, #1a3060 100%);
  padding: var(--sec-y) 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* ─────────────────────────────────────────────
       RESPONSIVE — TABLET
    ───────────────────────────────────────────── */
@media (max-width: 1023px) {
  .footer__top {
    grid-template-columns: repeat(2, 1fr);
    gap: 36px;
  }
}

/* ─────────────────────────────────────────────
       RESPONSIVE — MOBILE
    ───────────────────────────────────────────── */
/* The full link row + CTA needs ~960px; below that (incl. 768px
   tablets, where "Contact" ran into the CTA) use the drawer. */
@media (max-width: 959px) {
  .nav__links,
  .nav__cta-btn {
    display: none;
  }
  .nav__burger {
    display: flex;
  }
}

@media (max-width: 767px) {
  .footer__top {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .footer__bottom {
    flex-direction: column;
    text-align: center;
  }
  /* Task 8: 44×44 minimum tap target for the footer social icons on
     mobile — they're 34×34 at every width otherwise, fine with a
     mouse but too small to reliably tap. This does make the circles
     themselves a little bigger on mobile; that's the intended,
     requested change here (unlike Task 7, this task explicitly asks
     for bigger tap targets). */
  .footer__sl {
    width: 44px;
    height: 44px;
  }
}

/* ─────────────────────────────────────────────
   MOBILE TAP TARGETS (min ~44px touch height)
───────────────────────────────────────────── */
@media (max-width: 767px) {
  .footer__links {
    gap: 0;
  }
  .footer__links a,
  .footer__ci-text a,
  .dc-text-value a,
  .map-note__address-text a,
  .team-card__link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .footer__ci {
    align-items: center;
    margin-bottom: 0;
  }
  .footer__ci-icon {
    margin-top: 0;
  }
  .footer__sl {
    width: 44px;
    height: 44px;
  }
  .nav__logo {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .modal__close {
    min-width: 44px;
    min-height: 44px;
  }
}

/* Closed drawer: no shadow bleeding into the right edge of the page */
.drawer {
  box-shadow: none;
  visibility: hidden;
  transition: transform var(--tr), visibility 0s linear 220ms;
}
.drawer.open {
  box-shadow: -8px 0 40px rgba(13, 27, 62, 0.12);
  visibility: visible;
  transition: transform var(--tr), visibility 0s;
}