/* ═════════════════════════════════════════════════════════════════ */
/* MODERN OCEAN PALETTE — Master Color Variables */
/* ═════════════════════════════════════════════════════════════════ */

:root {
  /* ─── PRIMARY PALETTE (navy anchor, ocean blue, + one real accent) ─── */
  --primary: #0066CC;         /* Ocean Blue — Main brand color, buttons on light sections */
  --secondary: #3FA9F5;       /* Sky Blue — hover states, contrast against navy */
  --light: #F5F8FC;           /* Off-white — Light backgrounds */
  --dark: #0A2A4D;            /* Deep Navy — header/hero/footer/CTA bands */

  /* ─── LEGACY VARIABLE MAPPING (for backward compatibility) ─── */
  --navy: #0A2A4D;            /* True navy for background/border uses (text uses --text-dark instead) */
  --ocean: #3FA9F5;           /* Replaces old teal */
  --orange: #3FA9F5;          /* Real accent — badges, numbered circles, tags, eyebrow labels.
                                  Matches the approved style direction; used only on dark backgrounds,
                                  as a solid badge/button fill with white or dark text, or as an icon/number
                                  color — never as small text on a light background (contrast). */
  --orange-dark: #1B74C4;     /* Deeper accent for hover states */
  --steel: #F5F7FA;           /* Light gray - backgrounds */
  --white: #FFFFFF;
  --text-dark: #0A2A4D;       /* Dark text — same navy tone, used wherever --navy was a TEXT color (not background) */
  --text-light: #999999;      /* Light text */
  --border: #E2E8F0;          /* Borders */

  /* ─── SEMANTIC COLORS ─── */
  --success: #1B74C4;         /* Blue for success/positive (no green in this palette) */
  --warning: #7C6FD1;         /* Violet for warnings (no orange in this palette) */
  --danger: #EF4444;          /* Red for errors/critical */
  --info: #0066CC;            /* Blue for info (same as primary) */

  /* ─── NEUTRAL PALETTE ─── */
  --gray-50: #F9FAFB;
  --gray-100: #F3F4F6;
  --gray-200: #E5E7EB;
  --gray-300: #D1D5DB;
  --gray-400: #9CA3AF;
  --gray-500: #6B7280;
  --gray-600: #4B5563;
  --gray-700: #374151;
  --gray-800: #1F2937;
  --gray-900: #111827;
}

/* Dark-mode overrides removed: they lightened text colours while page backgrounds stayed white, making copy unreadable on dark-mode phones. */

/* ═════════════════════════════════════════════════════════════════ */
/* COMPONENT-SPECIFIC OVERRIDES */
/*
   NOTE ON SELECTORS: every rule below lists real component classes by name
   instead of a wildcard attribute selector like [class*="card"]. A wildcard
   matches any class that merely CONTAINS the word, which silently caught
   unrelated components (photo-overlay tiles, frosted-glass cards on dark
   sections, decorative shapes) and flattened their intended styling. Add
   new component classes to the explicit lists below rather than reaching
   for a wildcard again.
════════════════════════════════════════════════════════════════════ */

/* Navigation & Header */
header {
  background: var(--white) !important;
  border-color: var(--border) !important;
}

header a,
nav a {
  color: var(--text-dark) !important;
}

header a:hover,
nav a:hover {
  color: var(--primary) !important;
}

/* CTA Buttons (real buttons only — NOT section wrappers like .cta-v2/.cta-strip/.capabilities-strip, which get the navy-anchor treatment below) */
.btn,
button,
a.button,
.header-cta,
.nav-cta,
.mobile-nav-cta {
  background: var(--primary) !important;
  color: white !important;
  border-color: var(--primary) !important;
}

.btn:hover,
button:hover,
a.button:hover {
  background: var(--orange-dark) !important;
  border-color: var(--orange-dark) !important;
}

/* Navy-anchor CTA / promo bands — full sections, not buttons. Buttons inside them use white/sky-blue for contrast. */
.cta-v2,
.cta-strip,
.cta-section,
.capabilities-strip,
.hero,
.page-hero,
.hero-v2,
.article-hero,
.legal-hero {
  background: linear-gradient(135deg, var(--dark) 0%, var(--primary) 100%) !important;
  color: white !important;
}

/* hero-v2's own photo + overlay children stay untouched by the rule above —
   just deepen its existing overlay tint to match the navy anchor */
.hero-v2-overlay {
  background: linear-gradient(105deg, rgba(10,42,77,.95) 0%, rgba(10,42,77,.85) 45%, rgba(10,42,77,.35) 100%) !important;
}

.cta-v2 .btn,
.cta-strip .btn,
.cta-section .btn,
.hero .btn,
.page-hero .btn,
.hero-v2 .btn,
.btn-white {
  background: #fff !important;
  color: var(--dark) !important;
  border-color: #fff !important;
}

.cta-v2 .btn:hover,
.cta-strip .btn:hover,
.hero .btn:hover,
.hero-v2 .btn:hover,
.btn-white:hover {
  background: var(--secondary) !important;
  color: #fff !important;
  border-color: var(--secondary) !important;
}

.btn-outline-white {
  background: transparent !important;
  color: #fff !important;
  border-color: rgba(255,255,255,.6) !important;
}

.btn-outline-white:hover {
  background: rgba(255,255,255,.12) !important;
  border-color: #fff !important;
}

/* Secondary Buttons */
.btn-secondary,
.btn-outline {
  background: transparent !important;
  color: var(--primary) !important;
  border-color: var(--primary) !important;
}

.btn-secondary:hover,
.btn-outline:hover {
  background: var(--light) !important;
  border-color: var(--primary) !important;
}

/* Plain light cards — generic content cards with a flat light background.
   Photo-overlay tiles (.service-card-v2 and its -bg/-overlay children) and
   frosted-glass cards on dark sections (.testi-v2-card, .estimator-card)
   manage their own background and are intentionally left out here. */
.card,
.service-card,
.industry-card,
.insight-v2-card,
.office-v2-card,
[style*="background:var(--steel)"] {
  background: var(--light) !important;
  border-left-color: var(--primary) !important;
}

.card:hover,
.service-card:hover,
.industry-card:hover {
  border-color: var(--secondary) !important;
}

/* Links */
a,
[role="link"] {
  color: var(--primary) !important;
}

a:hover {
  color: var(--secondary) !important;
}

/* Forms & Inputs */
input,
textarea,
select {
  border-color: var(--border) !important;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1) !important;
}

/* Footer */
footer {
  background: var(--dark) !important;
  color: white !important;
}

footer a {
  color: var(--secondary) !important;
}

footer a:hover {
  color: var(--light) !important;
}

/* Process Steps */
.step-number,
.step-num {
  background: #1B74C4 !important;
  color: #fff !important;
}
.process-step {
  background: transparent !important;
  color: inherit !important;
}

/* Badges & Tags — the site's own component CSS (.hero-v2-img-badge, .about-exp-badge,
   .nhava-v2-badge, .testi-v2-tag, .insight-v2-tag, .office-v2-badge-text, etc.) already
   sets background: var(--orange) directly, so no override is needed here; this just
   covers any element using the bare utility classes below. */
.badge,
.tag {
  background: var(--light) !important;
  color: var(--primary) !important;
  border-color: var(--primary) !important;
}

/* ─── STATUS COLORS ─── */
.success,
.alert-success {
  background: rgba(27, 116, 196, 0.1) !important;
  color: var(--success) !important;
  border-color: var(--success) !important;
}

.warning,
.alert-warning {
  background: rgba(124, 111, 209, 0.1) !important;
  color: var(--warning) !important;
  border-color: var(--warning) !important;
}

.danger,
.error,
.alert-danger {
  background: rgba(239, 68, 68, 0.1) !important;
  color: var(--danger) !important;
  border-color: var(--danger) !important;
}

/* "Our Biggest Edge" badges — white text on a deeper blue for clear visibility */
.nhava-badge,
.nhava-v2-badge {
  background: #1B74C4 !important;
  color: #fff !important;
}
.nhava-badge:hover,
.nhava-v2-badge:hover {
  background: #3FA9F5 !important;
  color: #0A2A4D !important;
}

/* Service "Learn More" buttons — keep white text on blue (beats the global link colour) */
a.service-link,
a.service-link:visited {
  color: #fff !important;
}
a.service-link:hover {
  color: #fff !important;
  background: #0A2A4D !important;
}


/* ================================================================
   FIXES (Oct 2026) — FAQ hover + footer/top-bar social icons
   Root cause: global `button` / `button:hover` / `footer a` rules above
   (all !important) turned the FAQ question and the social letters blue
   on a blue hover background. These rules sit last and are more specific.
   ================================================================ */

/* FAQ question buttons: never take the global blue button fill; keep readable text on hover/open */
.faq-v2-q,
.faq-v2-q:hover,
.faq-v2-q:focus,
.faq-v2-q:active {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.faq-v2-q:hover,
.faq-v2-item.open .faq-v2-q {
  color: var(--primary) !important;
}
.faq-v2-q:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}

/* Social icons (footer + top info bar): white SVG glyphs instead of the letters "in" / "W" */
.footer-social,
.info-bar-social a {
  color: #fff !important;
  font-size: 0 !important;
  line-height: 0 !important;
}
.footer-social::before,
.info-bar-social a::before {
  content: "";
  display: block;
  width: 54%;
  height: 54%;
  background-color: currentColor;
  -webkit-mask: var(--social-icon) center / contain no-repeat;
          mask: var(--social-icon) center / contain no-repeat;
}
.footer-social[aria-label="LinkedIn"],
.info-bar-social a[aria-label="LinkedIn"] { --social-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z'/%3E%3C/svg%3E"); }
.footer-social[aria-label="WhatsApp"],
.info-bar-social a[aria-label="WhatsApp"] { --social-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z'/%3E%3C/svg%3E"); }
.footer-social:hover,
.footer-social:focus-visible,
.info-bar-social a:hover,
.info-bar-social a:focus-visible {
  background: var(--secondary) !important;
  border-color: var(--secondary) !important;
  color: var(--dark) !important;
}

/* FAQ grid: an opened answer must not stretch the neighbouring card in the same row */
.faq-v2-grid { align-items: start; }