/* =============================================================
   RESPONSIVE OVERRIDES
   Mobile-first: base styles in style.css target small screens.
   Breakpoints below progressively enhance the layout for larger
   viewports. The hamburger menu is the default nav below 768px.
   ============================================================= */

/* -------------------------------------------------------------
   BASE (MOBILE, < 768px) — hamburger nav + stacked hero
   ------------------------------------------------------------- */

/* Header: hide the desktop contact row + nav list, show hamburger */
.header-topbar,
.main-nav {
  display: none;
}

.header-inner {
  min-height: 88px;
}

.header-navbar {
  gap: var(--space-sm);
}

.btn-quote {
  padding: 0.55rem 1rem;
  font-size: 0.8rem;
}

.nav-toggle {
  display: flex;
}

/* 52px mobile resting size — final value, proportionally smaller than
   desktop's 76px (mobile header width is far more constrained) but
   still a real, deliberate jump from the previous 44px. See
   CLAUDE.md §5 — don't keep bumping this incrementally either. */
.logo-mark {
  height: 52px;
}

/* Mobile slide-in panel */
.mobile-menu {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: min(80vw, 320px);
  background: var(--color-white);
  padding: calc(var(--space-lg) + 1rem) var(--space-md) var(--space-lg);
  box-shadow: -4px 0 24px rgba(11, 31, 58, 0.15);
  transform: translateX(100%);
  transition: transform var(--transition-fast);
  z-index: 200;
  overflow-y: auto;
}

.mobile-menu.is-open {
  transform: translateX(0);
}

/* Dedicated close button, positioned top-right inside the panel
   itself — not the header's .nav-toggle. .mobile-menu is a fixed,
   z-index:200 layer that sits above .site-header's own stacking
   context (z-index:100); a descendant of the header can never
   out-z-index a sibling stacking context regardless of its own
   z-index value, so .nav-toggle's X-morph state was rendering
   invisibly underneath this panel once open (see the HTML comment
   on .nav-toggle and CLAUDE.md §5). Living inside .mobile-menu
   sidesteps that entirely — no stacking-context fight, always on
   top of the panel's own content by DOM order. .mobile-menu's
   padding-top (var(--space-lg) + 1rem) already reserves room for
   this up top. */
.mobile-menu-close {
  position: absolute;
  /* top(12px) + height(44px) = 56px, exactly matching .mobile-menu's
     padding-top (var(--space-lg) + 1rem) so the button's bottom edge
     lands flush with the nav list's own top edge — no overlap. 44px
     is the min recommended touch-target size; the visible icon inside
     stays smaller (20px) so the button doesn't read as oversized. */
  top: 12px;
  right: var(--space-md);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  /* Full reset — a bare <button> otherwise keeps native browser
     chrome (background/border/shadow) in some browsers even with
     background/border set individually below; appearance: none is
     the reliable way to actually remove it. box-shadow: none guards
     the same native-chrome case. Deliberately NOT setting
     outline: none — every other :focus-visible rule on this page
     keeps the native focus outline and layers additional styling on
     top rather than replacing it (see .whatsapp-fab's rule for the
     same convention), so this button does too. */
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 50%;
  color: var(--color-navy);
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.mobile-menu-close .icon {
  width: 20px;
  height: 20px;
}

/* Light green tint fills the circular tap area on hover/focus, same
   "icon -> green" color shift used elsewhere (Design Polish
   Principle #3) plus a background tint (this button has no card/
   badge surface of its own to shift against, unlike e.g. the service
   icons, so the tint stands in for that same "something visibly
   responded" feedback). */
.mobile-menu-close:hover,
.mobile-menu-close:focus-visible {
  background: var(--color-green-light);
  color: var(--color-green);
}

.mobile-menu-backdrop {
  display: block;
  position: fixed;
  inset: 0;
  background: rgba(11, 31, 58, 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-fast);
  z-index: 150;
}

.mobile-menu-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

.mobile-nav-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.mobile-nav-link {
  display: block;
  padding: 0.5rem 0;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 1.05rem;
  color: var(--color-navy);
  border-bottom: 1px solid var(--color-border);
}

.mobile-nav-link.active {
  color: var(--color-green);
}

.mobile-menu-contact {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

/* Hero: min-height is a floor, not a forced height — mobile's
   stacked content (label/heading/desc/buttons/trust) is tall enough
   on most phones that this rarely even binds; it just guarantees
   some presence on short-content edge cases. */
.hero-inner {
  padding-block: var(--space-lg);
  min-height: 70vh;
}

/* Flat tint instead of the centered desktop gradient: below 992px,
   .hero-content's 820px max-width doesn't actually bind (the
   container itself is narrower than that), so the centered content
   still spans close to the full width — there's no reliable "narrow
   column with visible flanking image" the way there is once real
   margins appear at 992px+. A uniform tint keeps contrast even
   across the whole width regardless of exactly how text wraps.
   Restored to the real gradient at 992px — see that breakpoint. */
.hero-overlay {
  background: rgba(11, 31, 58, 0.68);
}

.hero-heading {
  font-size: 1.9rem;
}

.hero-trust {
  flex-direction: column;
  /* Without this, each stacked item would stretch to the width of
     the widest one (the default cross-axis behavior for a column
     flex container) and its icon+text would sit left-aligned inside
     that stretched box — centered as a block but visually lopsided
     item-by-item. align-items: center sizes each to its own content
     instead. */
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

/* -------------------------------------------------------------
   >= 576px — small tablets: allow hero actions/trust to breathe
   ------------------------------------------------------------- */
@media (min-width: 576px) {
  .hero-trust {
    flex-direction: row;
  }

  /* Services: 2 columns from small tablets up */
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Leadership: 2 cards side by side from small tablets up */
  .team-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Footer: 2 columns from small tablets up */
  .footer-inner {
    grid-template-columns: repeat(2, 1fr);
  }

  /* About badge: overlap further out past the image edge once there's room */
  .about-badge {
    left: calc(-1 * var(--space-lg));
  }

  /* Contact form: pair up short fields (Name/Email, Phone/Company) */
  .contact-form-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* -------------------------------------------------------------
   >= 768px — TABLET / DESKTOP NAV BREAKPOINT
   Restore full header row layout and horizontal nav.
   ------------------------------------------------------------- */
@media (min-width: 768px) {
  :root {
    /* Matches the desktop --header-height (116px) + breathing room */
    --scroll-offset: 132px;
  }

  .header-topbar,
  .main-nav {
    display: flex;
  }

  .header-inner {
    min-height: var(--header-height);
  }

  .nav-toggle {
    display: none;
  }

  .mobile-menu,
  .mobile-menu-backdrop {
    display: none !important;
  }

  /* Floating WhatsApp button: slightly larger + more inset from the
     corner now that there's more screen to spare (58px within the
     brief's 56-60px desktop range, up from 50px mobile). */
  .whatsapp-fab {
    right: var(--space-lg);
    bottom: var(--space-lg);
    width: 58px;
    height: 58px;
  }

  .whatsapp-fab svg {
    width: 30px;
    height: 30px;
  }

  /* 76px — final desktop resting size, see the base rule in style.css */
  .logo-mark {
    height: 76px;
  }

  /* Compact sticky state at desktop widths — a shade less aggressive
     than the mobile .is-scrolled values since there's more room to
     spare, but still noticeably tighter than the resting header. */
  .site-header.is-scrolled .header-inner {
    min-height: 92px;
  }

  .site-header.is-scrolled .logo-mark {
    height: 60px;
  }

  .btn-quote {
    padding: 0.7rem 1.5rem;
    font-size: 0.9rem;
  }

  .hero-inner {
    padding-block: var(--space-xl);
    min-height: 80vh;
  }

  /* Enough width per item now to wrap into a real grid (4 across,
     2 rows) instead of the mobile horizontal-scroll strip — reset the
     flex/scroll setup from style.css's base rule. */
  .hero-services {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    max-width: 640px;
    overflow-x: visible;
    padding-bottom: 0;
  }

  .hero-service-item {
    flex-basis: auto;
  }

  .section-title {
    font-size: 2.1rem;
  }

  /* Careers: 2 columns from tablet up */
  .careers-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Leadership photo: a bit larger now there's more room to spare */
  .team-photo {
    width: 160px;
    height: 160px;
  }

  /* About: image+content side by side, highlights card spans below.
     minmax(0, 1fr) rather than bare 1fr — an explicit floor at the
     track level (belt-and-suspenders with the children's own
     min-width: 0 in style.css) so neither column's content can push
     past its track width. */
  .about-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "media content"
      "highlights highlights";
  }

  .about-highlights-list {
    flex-direction: row;
  }

  .about-highlight-item {
    flex: 1;
    flex-direction: column;
    align-items: center;
    text-align: center;
    border-bottom: none;
    border-right: 1px solid rgba(11, 31, 58, 0.08);
    padding-bottom: 0;
    padding-right: var(--space-md);
  }

  .about-highlight-item:last-child {
    border-right: none;
    padding-right: 0;
  }

  /* Stats: 4 columns from tablet up */
  .stats-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  /* Industries: 4 icons per row from tablet up */
  .industries-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  /* Footer bottom bar: copyright left, legal links right */
  .footer-bottom-inner {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
}

/* -------------------------------------------------------------
   >= 992px — DESKTOP: larger hero type, wider nav gaps
   ------------------------------------------------------------- */
@media (min-width: 992px) {
  .hero-heading {
    font-size: 2.5rem;
  }

  /* Full resting height — see style.css's .hero-inner for why 88vh
     (not 100vh: it would push Services awkwardly far below the
     fold) and CLAUDE.md §5 for the per-breakpoint values. */
  .hero-inner {
    min-height: 88vh;
  }

  /* Restore the centered gradient (defined in style.css) now that
     .hero-content's 820px max-width actually creates flanking
     margins around the centered column at this width. */
  .hero-overlay {
    background: linear-gradient(
      90deg,
      rgba(11, 31, 58, 0.45) 0%,
      rgba(11, 31, 58, 0.72) 30%,
      rgba(11, 31, 58, 0.72) 70%,
      rgba(11, 31, 58, 0.45) 100%
    );
  }

  .nav-list {
    gap: var(--space-lg);
  }

  /* Services: 4 columns on desktop */
  .services-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  /* Careers: 4 columns on desktop */
  .careers-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  /* About: media, content and highlights card side by side in one row.
     Explicit tracks: minmax(0, 1.1fr)/minmax(0, 1fr) keep the same
     asymmetric editorial ratio as before (Design Polish Principle #9)
     but with an explicit zero floor instead of a bare fr value, and
     the highlights card gets a fixed 320px track rather than a
     fraction — a mission/vision/values card doesn't need to grow with
     the row, and a fixed width is one less auto-sizing unknown.
     align-items: start (not stretch) — stretch forced a definite
     height onto .about-media while it also declares aspect-ratio,
     an ambiguous combination across browsers and the likely cause of
     the image column overlapping content. Each column now just sizes
     to its own natural height. */
  .about-grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) 320px;
    grid-template-areas: "media content highlights";
    align-items: start;
  }

  .about-heading {
    font-size: 2rem;
  }

  .about-highlights-list {
    flex-direction: column;
  }

  .about-highlight-item {
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
    border-right: none;
    border-bottom: 1px solid rgba(11, 31, 58, 0.08);
    padding-right: 0;
    padding-bottom: var(--space-md);
  }

  .about-highlight-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }

  /* Footer: brand column gets extra width alongside the 3 link columns */
  .footer-inner {
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
  }

  /* Contact: info column beside the form card */
  .contact-grid {
    grid-template-columns: 0.85fr 1.15fr;
    gap: var(--space-xl);
  }
}

/* -------------------------------------------------------------
   >= 1200px — LARGE DESKTOP
   ------------------------------------------------------------- */
@media (min-width: 1200px) {
  .hero-heading {
    font-size: 2.85rem;
  }

  /* Left-side callout badge — only shown from here up. At this width
     .hero-content's centered 820px column leaves real flanking margin
     (container ~1168px minus 820px, split both sides), enough room for
     this to sit beside it without crowding; below 1200px that margin
     is too tight (see the .hero-tag base rule in style.css §5 and
     CLAUDE.md §5). Positioned absolute within .hero-inner, vertically
     centered, independent of the flex-centered content column. */
  .hero-tag {
    display: block;
    position: absolute;
    left: var(--space-lg);
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    max-width: 170px;
    padding: var(--space-sm) var(--space-md);
    background: rgba(11, 31, 58, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-mid);
  }

  /* Service icon strip: enough width now for all 8 in a single row
     (mirrors .industries-grid's identical 4-at-768px/8-at-1200px
     pattern below) — tighter gap and slightly smaller badges to fit
     comfortably. */
  .hero-services {
    grid-template-columns: repeat(8, 1fr);
    max-width: 1100px;
    gap: var(--space-xs);
  }

  .hero-service-icon {
    width: 34px;
    height: 34px;
  }

  .hero-service-label {
    font-size: 0.68rem;
  }

  /* Industries: all 8 icons in a single row on large desktop */
  .industries-grid {
    grid-template-columns: repeat(8, 1fr);
  }
}