/* ============================================================
   PREMIUM.CSS — visual polish layer, loaded after style-1.css
   Adds: rich multi-column footer, breadcrumbs, trust strip,
   section eyebrows, nicer card elevation, internal link chips.
   Nothing here overrides core layout — additive only.
   ============================================================ */

/* ---- Section eyebrow label (small caps tag above headings) ---- */
.eyebrow {
  display: inline-block;
  background: rgba(232, 111, 44, 0.12);
  color: #e86f2c;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 6px 16px;
  border-radius: 40px;
  margin-bottom: 14px;
}

/* ---- Breadcrumb trail ---- */
.breadcrumb-bar {
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  padding: 14px 0;
  font-size: 0.85rem;
}
.breadcrumb-bar a {
  color: #64748b;
  text-decoration: none;
}
.breadcrumb-bar a:hover { color: #e86f2c; }
.breadcrumb-bar span.sep { margin: 0 8px; color: #cbd5e1; }
.breadcrumb-bar span.current { color: #0a1c3a; font-weight: 600; }

/* ---- Trust strip (badges row used on landing pages) ---- */
.trust-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin: 28px 0;
}
.trust-strip .badge {
  display: flex;
  align-items: center;
  gap: 8px;
  background: white;
  border: 1px solid #e2e8f0;
  padding: 10px 18px;
  border-radius: 40px;
  font-size: 0.88rem;
  font-weight: 600;
  color: #1e293b;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.trust-strip .badge i { color: #e86f2c; }

/* ---- Premium elevated card ---- */
.pro-card {
  background: white;
  border-radius: 18px;
  border: 1px solid #e2e8f0;
  padding: 28px;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.pro-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(10, 28, 58, 0.12);
  border-color: rgba(232, 111, 44, 0.35);
}

/* ---- Internal link chips (used for "nearby areas" / "related services") ---- */
.link-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.link-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #f1f5f9;
  color: #0a1c3a;
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 40px;
  border: 1px solid transparent;
  transition: all 0.2s ease;
}
.link-chip:hover {
  background: rgba(232, 111, 44, 0.1);
  border-color: #e86f2c;
  color: #e86f2c;
}

/* ---- Page hero (used on all sub-pages) ---- */
.subpage-hero {
  background: linear-gradient(135deg, #0a1c3a 0%, #1e3a5f 100%);
  color: white;
  padding: 70px 0 60px;
  text-align: center;
}
.subpage-hero h1 {
  font-size: clamp(1.9rem, 5vw, 3rem);
  font-weight: 800;
  margin-bottom: 14px;
}
.subpage-hero h1 span { color: #e86f2c; }
.subpage-hero p.lead {
  font-size: clamp(1rem, 3vw, 1.2rem);
  max-width: 760px;
  margin: 0 auto;
  opacity: 0.95;
}

/* ---- Rich multi-column footer ---- */
.pro-footer {
  background: #0a1c3a;
  color: #94a3b8;
  padding: 56px 0 0;
  border-top: 3px solid #e86f2c;
}
.pro-footer .footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 32px;
  padding-bottom: 36px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.pro-footer .footer-col h4 {
  color: white;
  font-size: 1rem;
  margin-bottom: 16px;
  font-weight: 700;
}
.pro-footer .footer-col p {
  font-size: 0.9rem;
  line-height: 1.7;
}
.pro-footer .footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.pro-footer .footer-col ul li {
  margin-bottom: 10px;
}
.pro-footer .footer-col a {
  color: #94a3b8;
  text-decoration: none;
  font-size: 0.9rem;
  transition: color 0.2s ease;
}
.pro-footer .footer-col a:hover {
  color: #e86f2c;
}
.pro-footer .footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  margin-right: 8px;
}
.pro-footer .footer-bottom {
  text-align: center;
  padding: 22px 0;
  font-size: 0.82rem;
}
.pro-footer .footer-bottom a {
  color: #94a3b8;
}
.pro-footer .footer-bottom a:hover { color: #e86f2c; }

@media (max-width: 860px) {
  .pro-footer .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 520px) {
  .pro-footer .footer-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   MOBILE NAV (hamburger menu)
   Overrides the older, conflicting .nav-flex/.nav-links mobile
   rules in style-1.css (several duplicated blocks force
   flex-direction:column, which made the fixed navbar grow to an
   unpredictable height and overlap page content). !important is
   used deliberately here to win over those legacy rules without
   having to hunt down and edit every duplicate block.
   ============================================================ */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  color: #f3f4f7;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  padding: 6px;
  z-index: 1200;
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: 26px;
}

.nav-overlay {
  display: none;
}

/* Prevent the legacy .nav-flex { flex-wrap: wrap } rule in style-1.css
   from wrapping the navbar onto two lines on wide screens above the
   hamburger breakpoint - the full nav (2 dropdowns + button) needs a
   guaranteed single row here. */
@media (min-width: 1251px) {
  .nav-flex {
    flex-wrap: nowrap;
  }
}

@media (max-width: 1250px) {
  .nav-flex {
    flex-direction: row !important;
    text-align: left !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
  }

  .nav-toggle {
    display: block;
  }

  .nav-menu {
    position: fixed !important;
    top: 0 !important;
    right: -100% !important;
    left: auto !important;
    width: min(320px, 85vw) !important;
    height: 100vh;
    height: 100dvh;
    background: #0a1c3a !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start;
    padding: 100px 32px 40px;
    gap: 22px;
    transition: right 0.3s ease;
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.3);
    overflow-y: auto;
    z-index: 1100;
  }

  .nav-menu.open {
    right: 0 !important;
  }

  .nav-menu .nav-links {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    gap: 20px !important;
    width: 100%;
  }

  .nav-menu .nav-links a {
    font-size: 1.1rem;
    width: 100%;
  }

  .nav-menu .contact-btn {
    width: 100%;
    text-align: center;
    margin-top: 6px;
  }

  .nav-overlay {
    display: block !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(5, 12, 28, 0.6) !important;
    z-index: 1050 !important;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
  }

  .nav-overlay.open {
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}

/* Fixed navbar is a single predictable-height row on every screen
   size now that nav links collapse into the hamburger panel below
   860px — so a consistent top offset is safe everywhere. */
.breadcrumb-bar {
  margin-top: 78px;
}

@media (max-width: 480px) {
  .breadcrumb-bar {
    margin-top: 74px;
  }
}

/* ---- Services nav dropdown ---- */
.nav-links { align-items: center; }
.nav-item-dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.nav-item-dropdown > a i.fa-chevron-down {
  font-size: 0.65em;
  margin-left: 5px;
}
.nav-dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: white;
  min-width: 220px;
  max-height: 340px;
  overflow-y: auto;
  border-radius: 12px;
  box-shadow: 0 14px 34px rgba(10, 28, 58, 0.18);
  padding: 8px;
  z-index: 500;
}
.nav-item-dropdown:hover .nav-dropdown-menu {
  display: block;
}
.nav-dropdown-menu a {
  display: block;
  padding: 10px 14px;
  border-radius: 8px;
  color: #0a1c3a !important;
  font-size: 0.9rem;
  white-space: nowrap;
}
.nav-dropdown-menu a:hover {
  background: rgba(232, 111, 44, 0.1);
  color: #e86f2c !important;
}
@media (max-width: 1250px) {
  .nav-item-dropdown {
    position: static !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    width: 100%;
  }

  .nav-dropdown-menu {
    display: block !important;
    position: static !important;
    width: 100% !important;
    min-width: 0 !important;
    max-height: none !important;
    max-width: none;
    background: rgba(255, 255, 255, 0.06) !important;
    box-shadow: none !important;
    border-radius: 8px !important;
    padding: 4px 0 4px 16px !important;
    margin: 8px 0 0 0 !important;
    border-left: 2px solid rgba(232, 111, 44, 0.5);
    overflow: visible !important;
  }

  .nav-dropdown-menu a {
    color: #cbd5e1 !important;
    font-size: 1rem !important;
    padding: 10px 8px !important;
    white-space: normal !important;
  }

  .nav-dropdown-menu a:hover {
    background: rgba(232, 111, 44, 0.15) !important;
    color: #e86f2c !important;
  }
}