/* ============================================================
   nav-v2.css — Premium navigation system for SRT.
   Link this file with <link rel="stylesheet" href="nav-v2.css">
   AFTER styles.css on every page that uses the new header block.
   Can be merged into styles.css later; kept separate for now so
   it's easy to add/remove per page during rollout.
   ============================================================ */
:root{ --hdr-h:90px; --hdr-h-shrunk:72px; }
body{ padding-top:var(--hdr-h); }

.site-header-v2{
  position:fixed; top:0; left:0; right:0; z-index:500;
  height:var(--hdr-h);
  background:rgba(255,255,255,0.92);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  box-shadow:0 1px 0 rgba(19,41,75,.06);
  transition:height .35s cubic-bezier(.4,0,.2,1), box-shadow .35s ease;
}
.site-header-v2.scrolled{
  height:var(--hdr-h-shrunk);
  box-shadow:0 8px 24px rgba(19,41,75,.10);
}
.header-inner{
  height:100%; display:flex; align-items:center; justify-content:space-between; gap:28px;
}
.logo-v2{ display:flex; align-items:center; gap:12px; text-decoration:none; flex:0 0 auto; }
.logo-v2-img{ height:52px; width:auto; transition:height .35s cubic-bezier(.4,0,.2,1); }
.site-header-v2.scrolled .logo-v2-img{ height:40px; }
.logo-v2-sub{ display:none; font-size:11px; font-weight:700; letter-spacing:.06em; color:var(--navy); white-space:nowrap; }

.nav-v2{ flex:1 1 auto; display:flex; justify-content:center; min-width:0; }
.nav-v2-list{ display:flex; align-items:center; gap:0; list-style:none; margin:0; padding:0; }
.nav-v2-list > li{ position:relative; }
.nav-v2-list > li > a, .nav-v2-trigger{
  display:inline-flex; align-items:center; gap:4px; white-space:nowrap;
  background:none; border:none; cursor:pointer;
  font-family:var(--font-display,inherit); font-weight:600; font-size:13.5px; letter-spacing:.01em;
  color:var(--navy); text-decoration:none; padding:10px 11px; position:relative;
}
.nav-v2-trigger::after{ content:'▾'; font-size:9px; opacity:.7; transition:transform .25s ease; }
.has-mega.open .nav-v2-trigger::after{ transform:rotate(180deg); }
.nav-v2-list > li > a::before, .nav-v2-trigger::before{
  content:''; position:absolute; left:14px; right:14px; bottom:4px; height:2px;
  background:var(--orange); transform:scaleX(0); transform-origin:left; transition:transform .25s ease;
}
.nav-v2-list > li > a:hover::before, .nav-v2-trigger:hover::before, .has-mega.open .nav-v2-trigger::before{ transform:scaleX(1); }
.nav-v2-list > li > a.active{ color:var(--orange); }

/* Mega panels */
.mega-panel{
  position:absolute; top:calc(100% + 14px); left:50%; transform:translateX(-50%) translateY(6px);
  background:#fff; border-radius:12px; box-shadow:0 20px 50px rgba(19,41,75,.16); border:1px solid var(--line);
  padding:26px; opacity:0; pointer-events:none; transition:opacity .22s ease, transform .22s ease;
  display:flex; gap:28px; z-index:10;
}
.has-mega.open .mega-panel{ opacity:1; pointer-events:auto; transform:translateX(-50%) translateY(0); }
.mega-panel-narrow{ width:360px; }
.mega-panel-wide{ width:1050px; flex-direction:column; }
.mega-links{ display:flex; flex-direction:column; gap:2px; min-width:260px; }
.mega-link{ display:flex; flex-direction:column; gap:2px; padding:10px 12px; border-radius:8px; text-decoration:none; transition:background .15s ease; }
.mega-link:hover{ background:var(--bg); }
.mega-link-title{ font-size:14px; font-weight:700; color:var(--navy); }
.mega-link-desc{ font-size:12px; color:var(--gray-light); }
.mega-feature{ width:220px; flex:0 0 auto; border-left:1px solid var(--line); padding-left:24px; }
.mega-feature-img{ width:100%; border-radius:8px; margin-bottom:12px; background:#0A1B33; }
.mega-feature-kicker{ font-size:10.5px; font-weight:700; letter-spacing:.05em; color:var(--orange); margin:0 0 6px; }
.mega-feature-text{ font-size:12.5px; color:var(--gray); margin:0 0 12px; line-height:1.5; }
.mega-feature-cta{ font-size:12.5px; font-weight:700; color:var(--navy); text-decoration:none; }

.mega-cs-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.mega-cs-card{ display:flex; flex-direction:column; gap:6px; padding:14px; border:1px solid var(--line); border-radius:8px; text-decoration:none; transition:border-color .15s ease, transform .15s ease; }
.mega-cs-card:hover{ border-color:var(--orange); transform:translateY(-2px); }
.mega-cs-tag{ font-size:10px; font-weight:700; letter-spacing:.03em; color:var(--orange); }
.mega-cs-title{ font-size:13px; font-weight:700; color:var(--navy); line-height:1.35; }
.mega-cs-viewall{ align-self:flex-start; margin-top:16px; font-size:13px; font-weight:700; color:var(--navy); text-decoration:none; }

.mega-kc-cols{ display:grid; grid-template-columns:repeat(6,1fr); gap:14px; }
.mega-kc-heading{ font-size:11px; font-weight:700; letter-spacing:.04em; color:var(--gray-light); text-transform:uppercase; margin:0 0 10px; }
.mega-kc-col a{ display:block; font-size:13px; font-weight:600; color:var(--navy); text-decoration:none; padding:6px 0; }
.mega-kc-col a:hover{ color:var(--orange); }
.mega-kc-roadmap{ background:var(--bg); border-radius:8px; padding:14px 16px; margin:-14px 0; }
.mega-kc-roadmap-item{ display:block; font-size:13px; font-weight:600; color:var(--gray-light); padding:5px 0; }
.mega-kc-roadmap-item::before{ content:'○ '; }
.mega-kc-roadmap-note{ font-size:11px; color:var(--gray-light); font-style:italic; margin:10px 0 0; }

.header-actions{ display:flex; align-items:center; gap:14px; flex:0 0 auto; }
.icon-btn{ background:none; border:none; cursor:pointer; color:var(--navy); padding:6px; display:flex; }
.lang-switch-v2{ display:flex; align-items:center; gap:6px; font-size:12.5px; font-weight:700; }
.lang-switch-opt{ color:var(--gray-light); text-decoration:none; }
.lang-switch-opt.active, .lang-switch-opt:hover{ color:var(--navy); }
.lang-switch-sep{ color:var(--line); }
.nav-cta-v2{
  background:var(--orange); color:#fff; font-size:13px; font-weight:700; letter-spacing:.02em;
  padding:12px 22px; border-radius:6px; text-decoration:none; white-space:nowrap;
  transition:transform .18s ease, box-shadow .18s ease;
}
.nav-cta-v2:hover{ transform:translateY(-1px); box-shadow:0 8px 18px rgba(240,124,29,.35); }

.search-panel{
  position:absolute; top:100%; left:0; right:0; background:#fff; border-top:1px solid var(--line);
  box-shadow:0 12px 24px rgba(19,41,75,.08);
  max-height:0; overflow:hidden; transition:max-height .3s ease;
}
.search-panel.open{ max-height:90px; }
.search-panel-inner{ padding:18px 0; }
#searchForm{ display:flex; align-items:center; gap:12px; border:1px solid var(--line); border-radius:8px; padding:10px 16px; }
#searchForm svg{ color:var(--gray-light); flex:0 0 auto; }
#searchInput{ flex:1; border:none; outline:none; font-size:15px; color:var(--navy); }
.search-close{ background:none; border:none; cursor:pointer; color:var(--gray-light); font-size:16px; }

.mobile-toggle{ display:none; }
.mobile-toggle.hidden{ visibility:hidden; }
.mobile-close{
  position:fixed; top:22px; right:24px; z-index:610;
  background:none; border:none; font-size:22px; color:var(--navy); cursor:pointer; padding:8px;
}

.mobile-overlay{
  position:fixed; inset:0; background:#fff; z-index:600;
  transform:translateX(100%); transition:transform .35s cubic-bezier(.4,0,.2,1);
  overflow-y:auto;
}
.mobile-overlay.open{ transform:translateX(0); }
.mobile-overlay-inner{ padding:90px 24px 24px; min-height:100%; display:flex; flex-direction:column; }
.mobile-top-link{ display:block; font-size:20px; font-weight:700; color:var(--navy); text-decoration:none; padding:16px 0; border-bottom:1px solid var(--line); }
.mobile-acc-item{ border-bottom:1px solid var(--line); }
.mobile-acc-trigger{
  width:100%; text-align:left; background:none; border:none; cursor:pointer;
  font-size:20px; font-weight:700; color:var(--navy); padding:16px 0; display:flex; justify-content:space-between; align-items:center;
}
.mobile-acc-panel{ max-height:0; overflow:hidden; transition:max-height .3s ease; }
.mobile-acc-item.open .mobile-acc-panel{ max-height:400px; padding-bottom:12px; }
.mobile-acc-panel a{ display:block; font-size:15px; color:var(--gray); text-decoration:none; padding:9px 0 9px 12px; }
.mobile-acc-subheading{ font-size:11px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:var(--gray-light); margin:14px 0 2px 12px; }
.mobile-acc-panel button.mobile-acc-ai-btn{ display:block; width:100%; text-align:left; font-size:15px; color:var(--gray); background:none; border:none; padding:9px 0 9px 12px; font-family:inherit; cursor:pointer; }
.mobile-sticky-cta{
  margin-top:auto; position:sticky; bottom:0; background:var(--orange); color:#fff; text-align:center;
  font-weight:700; padding:16px; border-radius:8px; text-decoration:none; margin-top:24px;
}

@media (max-width:1100px){
  .nav-v2{ display:none; }
  .header-actions .lang-switch-v2{ display:none; }
  .mobile-toggle{
    display:flex; flex-direction:column; justify-content:center; gap:5px;
    width:26px; height:20px; background:none; border:none; cursor:pointer; padding:0;
  }
  .mobile-toggle span{ display:block; height:2px; background:var(--navy); border-radius:1px; }
}
@media (max-width:640px){
  .nav-cta-v2{ display:none; }
  :root{ --hdr-h:76px; --hdr-h-shrunk:64px; }
  .logo-v2-sub{ display:none; }
}

/* ============================================================
   STICKY MOBILE CTA BAR — quick emergency contact access.
   Mobile-only (phone-width specifically, not tablet). Sitewide,
   since a client in an emergency could land on any page.
   ============================================================ */
.mobile-sticky-bar{ display:none; }
@media (max-width:768px){
  .mobile-sticky-bar{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:190;
    box-shadow:0 -4px 16px rgba(0,0,0,.18);
    padding-bottom:env(safe-area-inset-bottom, 0);
  }
  .mobile-sticky-btn{
    flex:1; display:flex; align-items:center; justify-content:center; gap:7px;
    padding:14px 8px; font-size:13px; font-weight:700; text-decoration:none; color:#fff;
    line-height:1.2; text-align:center;
  }
  .mobile-sticky-btn svg{ flex:0 0 auto; width:17px; height:17px; }
  .mobile-sticky-btn-wa{ background:#1EBE57; }
  .mobile-sticky-btn-cta{ background:var(--orange); }
  /* the standalone floating WhatsApp circle is redundant with the bar above on phone widths */
  a[href^="https://wa.me/"]:not(.mobile-sticky-btn){ display:none !important; }
  /* reserve space so the fixed bar never covers the last bit of page content */
  body{ padding-bottom:58px; }
}

/* ============================================================
   ENGINEERING MEGA MENU (Phase EOS-2) — replaces the old narrow
   "Engineering Methodology" panel. Same visual language as the
   existing Knowledge Center mega-menu (colors, fonts, spacing) —
   no new visual language, only a new internal layout.
   ============================================================ */
.mega-panel-eng{ width:980px; flex-direction:column; padding:20px; }

/* Featured Framework Suite card — the visual focal point */
.mega-eng-featured{
  display:flex; align-items:center; gap:18px; padding:18px 22px; border-radius:10px;
  background:var(--navy); color:#fff; text-decoration:none; margin-bottom:18px;
  transition:background .15s;
}
.mega-eng-featured:hover{ background:var(--navy-deep, #0d2547); }
.mega-eng-featured-icon{ flex:0 0 auto; width:44px; height:44px; border-radius:8px; background:rgba(255,255,255,.12); display:flex; align-items:center; justify-content:center; }
.mega-eng-featured-text{ flex:1; min-width:0; }
.mega-eng-featured-title{ font-family:var(--font-display); font-weight:800; font-size:15px; color:#fff; margin-bottom:3px; }
.mega-eng-featured-desc{ font-size:12px; color:#C9D3DE; line-height:1.45; max-width:520px; }
.mega-eng-featured-btn{ flex:0 0 auto; background:var(--orange); color:#fff; font-size:12px; font-weight:700; padding:10px 16px; border-radius:6px; white-space:nowrap; }

/* 4-column category grid below the featured card */
.mega-eng-cols{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.mega-eng-heading{ font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--gray-light); margin:0 0 10px; }
.mega-eng-col .mega-link{ display:block; text-decoration:none; padding:7px 0; }
.mega-eng-col .mega-link-title{ display:block; font-size:12.5px; font-weight:700; color:var(--navy); }
.mega-eng-col .mega-link-desc{ display:block; font-size:11px; color:var(--gray-light); line-height:1.35; margin-top:1px; }
.mega-eng-col button.mega-link{ background:none; border:none; text-align:left; width:100%; cursor:pointer; font-family:inherit; }

@media (max-width:1100px){
  .mega-panel-eng{ width:820px; }
  .mega-eng-cols{ grid-template-columns:repeat(2,1fr); gap:16px 20px; }
}