/* ============================================================================
   Shared site layout — topbar, navbar & footer (home "JDB" design).
   Loaded AFTER style.css on every page so the header/footer look identical
   everywhere, while inner-page bodies keep their own style.css rules.
   ========================================================================== */
:root { --jdb-navy: #0c2340; --jdb-orange: #1f9b8e; --jdb-orange-2: #34a86a; }

body { font-family: 'Poppins', system-ui, -apple-system, sans-serif; }

/* Brand accent text utility (replaces Bootstrap's yellow .text-warning) */
.text-accent { color: var(--jdb-orange) !important; }

/* ===== TOP BAR ===== */
.topbar { background: var(--jdb-navy); color: #cdd6e4; font-size: .82rem; padding: .5rem 0; }
.topbar a { color: #cdd6e4; text-decoration: none; }
.topbar a:hover { color: #fff; }
.topbar .soc a {
    width: 26px; height: 26px; display: inline-flex; align-items: center;
    justify-content: center; border-radius: 50%; background: rgba(255,255,255,.1); margin-left: 6px;
}
.topbar .soc a:hover { background: var(--jdb-orange); color: #fff; }
/* Never break a phone number / email across lines */
.topbar a, .topbar span { white-space: nowrap; }
/* Tablet & down: center the bar and let the contact group wrap as a unit */
@media (max-width: 767.98px) {
    .topbar .container { justify-content: center !important; gap: .35rem 1rem !important; }
    .topbar > .container > div { flex-wrap: wrap; justify-content: center; gap: .25rem 1rem !important; }
}
/* Phones: drop the long email to keep one tidy row of location + phone + socials */
@media (max-width: 575.98px) {
    .topbar { font-size: .78rem; }
    .topbar a[href^="mailto:"] { display: none; }
    .topbar .soc a { width: 24px; height: 24px; }
}

/* ===== NAVBAR ===== */
.site-nav { background: #fff; box-shadow: 0 2px 14px rgba(12,35,64,.06); z-index: 1030; }
.site-nav .brand-img { height: 80px; width: auto; }
.site-nav .navbar-nav .nav-link { color: #1f2a44; font-weight: 500; font-size: .95rem; padding: .5rem .85rem; }
.site-nav .navbar-nav .nav-link:hover,
.site-nav .navbar-nav .nav-link.active { color: var(--jdb-orange); }
.btn-call { background: var(--jdb-orange); color: #fff; border-radius: 30px; padding: .55rem 1.3rem; font-weight: 600; }
.btn-call:hover { background: var(--jdb-orange-2); color: #fff; }

/* Dropdowns + Service→City fly-out submenu */
.site-nav .dropdown-menu { border: none; box-shadow: 0 10px 30px rgba(15,29,74,.12); border-radius: 12px; padding: .4rem 0; }
.site-nav .dropdown-item { font-size: .9rem; padding: .45rem 1rem; }
.site-nav .dropdown-item:active, .site-nav .dropdown-item.active { background: var(--jdb-orange); }
@media (min-width: 992px) {
    .site-nav .navbar-nav .dropdown:hover > .dropdown-menu { display: block; }
    .site-nav .navbar-nav .dropdown > .dropdown-menu { margin-top: 0; }
    .dropdown-submenu { position: relative; }
    .dropdown-submenu > .dropdown-menu { top: 0; left: 100%; margin: -.45rem 0 0 .25rem; }
    .dropdown-submenu:hover > .dropdown-menu { display: block; }
    .dropdown-submenu > .dropdown-toggle { display: flex; align-items: center; justify-content: space-between; }
    .dropdown-submenu > .dropdown-toggle::after {
        border: none; content: "\F285"; font-family: "bootstrap-icons";
        font-size: .7rem; margin-left: .5rem; vertical-align: 0;
    }
}
@media (max-width: 991.98px) {
    .dropdown-submenu > .dropdown-menu { display: block; border: none; box-shadow: none; padding: 0 0 .25rem 1.25rem; margin: 0; }
    .dropdown-submenu > .dropdown-toggle::after { display: none; }
}

/* ===== FOOTER (overrides style.css footer) ===== */
.site-footer { background: var(--jdb-navy); color: #b9c4d4; padding: 3.5rem 0 0; font-size: .9rem; }
.site-footer h6 { color: #fff; font-weight: 600; margin-bottom: 1.1rem; }
.site-footer a { color: #b9c4d4; text-decoration: none; }
.site-footer a:hover { color: var(--jdb-orange); }
.foot-logo { height: 100px; width: auto; background: #fff; border-radius: 8px; padding: 4px 8px; }
.foot-links { padding: 0; margin: 0; }
.foot-links li { margin-bottom: .55rem; list-style: none; }
.foot-soc a {
    width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,.1);
    display: inline-flex; align-items: center; justify-content: center; margin-right: 6px;
}
.foot-soc a:hover { background: var(--jdb-orange); color: #fff; }
.foot-contact ul { padding: 0; margin: 0; }
.foot-contact li { display: flex; gap: .6rem; margin-bottom: .7rem; list-style: none; }
.foot-contact i { color: var(--jdb-orange); margin-top: 3px; }
.quote-form input {
    width: 100%; border: none; border-radius: 6px; padding: .65rem .9rem;
    margin-bottom: .7rem; background: rgba(255,255,255,.1); color: #fff;
}
.quote-form input::placeholder { color: #95a3b8; }
.site-footer .footer-bottom {
    border-top: 1px solid rgba(255,255,255,.1); margin-top: 2.5rem; padding: 1.1rem 0; font-size: .82rem;
}
.btn-orange { background: var(--jdb-orange); color: #fff; border: none; border-radius: 6px; padding: .7rem 1.5rem; font-weight: 600; }
.btn-orange:hover { background: var(--jdb-orange-2); color: #fff; }

/* Location-wise footer links (site-wide crawl paths) */
.footer-locations { margin-top: 30px; padding-top: 26px; border-top: 1px solid rgba(255,255,255,.12); }
.footer-locations .fl-city { display: inline-flex; align-items: center; gap: .4rem; color: #fff; font-weight: 600; font-size: .9rem; margin-bottom: .6rem; }
.footer-locations .fl-city i { color: var(--jdb-orange); }
.footer-locations .fl-list { padding: 0; margin: 0; }
.footer-locations .fl-list li { margin-bottom: .4rem; list-style: none; }
.footer-locations .fl-list li a { font-size: .82rem; }

/* ===== FLOATING CONTACT (Call + WhatsApp) ===== */
.float-contact {
    position: fixed; right: 20px; bottom: 20px; z-index: 999;
    display: flex; flex-direction: column; gap: 12px;
}
.float-btn {
    width: 52px; height: 52px; border-radius: 50%;
    color: #fff; display: flex; align-items: center; justify-content: center;
    font-size: 1.6rem; box-shadow: 0 8px 20px rgba(0,0,0,.25);
    transition: transform .2s ease, box-shadow .2s ease;
}
.float-btn:hover { color: #fff; transform: scale(1.06); box-shadow: 0 12px 26px rgba(0,0,0,.3); }
.float-wa { background: #25d366; }
.float-call { background: var(--jdb-navy); }
@media (max-width: 575.98px) {
    .float-contact { right: 16px; bottom: 16px; gap: 10px; }
    .float-btn { width: 48px; height: 48px; font-size: 1.45rem; }
}

/* Service-card "Read More" link */
.service-readmore { display: inline-flex; align-items: center; gap: .35rem; margin-top: .7rem; font-size: .82rem; font-weight: 600; color: var(--jdb-orange); text-decoration: none; }
.service-readmore i { transition: transform .2s ease; }
.service-card:hover .service-readmore i { transform: translateX(4px); }

/* ============================================================================
   INNER-PAGE RECOLOR — map the blue theme onto the JBD navy/teal palette so
   every page matches the home page. style.css drives accents from --blue and
   dark sections from --navy, so remapping those does most of the work; the big
   banners are forced to navy (teal stays an accent, never a full-bleed block).
   ========================================================================== */
:root {
    --blue: #1f9b8e;        /* accent: teal (logo) */
    --blue-dark: #157268;   /* darker teal for gradients */
    --blue-deep: #0a1d36;
    --navy: #0c2340;        /* match home navy */
}

/* Large banners & dark sections → navy (mirrors the home layout) */
.page-hero,
.why-section,
.sidebar-cta { background: linear-gradient(135deg, #0c2340, #0a1d36) !important; }
.cta-band { background: #0c2340 !important; }

/* Soft "pastel blue" chips & fills → light teal so nothing reads as blue */
.stat-ico,
.city-ico,
.contact-ico,
.area-group-title i { background: #dcf2ef !important; color: var(--blue) !important; }
.sidebar-links li a:hover,
.sidebar-links li.active a { background: #dcf2ef !important; color: var(--blue) !important; }
.offer-pill { background: #ecfaf7; border-color: #bce5dd; }
.area-link:hover { background: #ecfaf7; border-color: var(--blue); }
.mission-box { background: #ecfaf7; }
.all-areas-box,
.satisfaction-box { background: #f5f7fb; }

/* Buttons keep the teal accent (matches "Call Now" / "Get Free Quote") */
.btn-primary-blue { background: linear-gradient(135deg, #1f9b8e, #34a86a); }
.btn-primary-blue:hover { opacity: .92; color: #fff; }