/* Milnsbridge Header Styles — Theme Level */
/* Moved from inline Elementor widget to child theme (2026-02-21) */

@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&display=swap");

/* ===== GLOBAL FONT OVERRIDE — Outfit everywhere, no Roboto ===== */
body,
body .elementor *,
body .elementor h1,
body .elementor h2,
body .elementor h3,
body .elementor h4,
body .elementor h5,
body .elementor h6,
body .elementor p,
body .elementor a,
body .elementor span,
body .elementor li,
body .elementor button,
body .elementor input,
body .elementor textarea,
body .elementor select,
body .elementor .elementor-heading-title,
body .elementor .elementor-widget-text-editor {
  font-family: Outfit, sans-serif !important;
}

/* ── Base header ── */
.site-header {
  font-family: Outfit, sans-serif;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 10000 !important;
  background: transparent;
  transition: background .25s ease, border-color .25s ease, box-shadow .25s ease;
  transform: none !important;
  will-change: auto !important;
  /* Override Hello Elementor header-footer.css defaults */
  display: block !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  /* Full-width: use left/right stretch (avoids 100vw scrollbar issue) */
  width: auto !important;
  max-width: none !important;
}

.site-header .inner {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
  gap: 32px;
  box-sizing: border-box;
}

/* ── Logo ── */
.site-header .logo {
  width: 220px;
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 0;
}
.site-header .logo-svg {
  width: 54px;
  height: auto;
  flex: 0 0 auto;
}
.site-header .logo-wordmark {
  display: inline-flex;
  align-items: baseline;
  font-family: Outfit, sans-serif;
  font-weight: 700;
  font-size: 1.4rem;
  letter-spacing: -1px;
  line-height: 1;
  white-space: nowrap;
  transition: color .25s ease;
}
.site-header .logo-dot {
  color: #E91C24;
}

/* Default state (transparent header): white logo */
.site-header .logo-mark { fill: #fff; transition: fill .25s ease; }
.site-header .logo-wordmark { color: #fff; }

/* Solid state (white header): red mark, dark text, dot stays red */
.site-header.is-solid .logo-mark { fill: #E91C24; }
.site-header.is-solid .logo-wordmark { color: #2D2E30; }
.site-header.is-solid .logo-dot { color: #E91C24; }

/* ── Navigation ── */
.site-header .nav-wrap { flex: 1; display: flex; justify-content: center; }
.site-header .nav-menu,
.site-header .nav-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 28px;
}
.site-header .nav-menu li a {
  font-size: 0.85rem;
  font-weight: 500;
  color: rgba(255,255,255,0.7);
  text-decoration: none;
  transition: color .2s;
  padding: 4px 0;
}
.site-header .nav-menu li a:hover { color: #fff; }
.site-header .nav-menu li.current-menu-item a { color: #fff; font-weight: 600; }

/* ── CTA group ── */
.site-header .cta-group {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.site-header .phone-btn {
  font-weight: 600;
  color: rgba(255,255,255,0.95);
  font-size: 0.82rem;
  text-decoration: none;
  white-space: nowrap;
  padding: 9px 20px;
  border: 1.5px solid rgba(255,255,255,0.3);
  border-radius: 12px;
  transition: all .3s;
  background: transparent;
  overflow: hidden;
}
.site-header .phone-btn:hover {
  border-color: rgba(255,255,255,0.6);
  background: linear-gradient(110deg, transparent 20%, rgba(255,255,255,0.1) 40%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.1) 60%, transparent 80%);
  background-size: 200% 100%;
  animation: shimmer 1.2s ease-in-out;
}

.site-header .cta-btn {
  background: #E91C24;
  color: #fff !important;
  padding: 9px 20px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 0.82rem;
  text-decoration: none;
  white-space: nowrap;
  transition: all .3s;
  border: 1.5px solid #E91C24;
  overflow: hidden;
}
.site-header .cta-btn:hover {
  background: linear-gradient(110deg, #E91C24 20%, #ff4a52 40%, #ff6b6b 50%, #ff4a52 60%, #E91C24 80%);
  background-size: 200% 100%;
  animation: shimmer 1.2s ease-in-out;
  border-color: #ff4a52;
}

/* ── Hamburger ── */
.site-header .hamburger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  color: rgba(255,255,255,0.95);
  transition: color .25s ease;
}

/* ── Mobile nav overlay ── */
.mobile-nav {
  display: none;
  position: fixed;
  top: 72px;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(160deg, #0F172A 0%, #1e293b 60%, #334155 100%);
  z-index: 9999;
  padding: 24px;
  flex-direction: column;
  overflow-y: auto;
}
.mobile-nav.open { display: flex; }
.mobile-nav .nav-menu,
.mobile-nav .nav-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 16px;
}
@media (max-width: 480px) {
  .mobile-nav .nav-menu,
  .mobile-nav .nav-menu ul {
    grid-template-columns: 1fr 1fr;
  }
}
.mobile-nav .nav-menu li a {
  font-size: 1rem;
  font-weight: 500;
  color: rgba(255,255,255,0.85);
  text-decoration: none;
  padding: 16px 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  display: block;
}
.mobile-nav .nav-menu li a:hover { color: #fff; }
.mobile-nav .mob-cta {
  background: #E91C24;
  color: #fff;
  text-align: center;
  padding: 16px;
  border-radius: 12px;
  font-weight: 700;
  margin-top: 20px;
  text-decoration: none;
  display: block;
}
.mobile-nav .mob-phone {
  border: 1.5px solid rgba(255,255,255,0.3);
  color: rgba(255,255,255,0.95);
  text-align: center;
  padding: 14px;
  border-radius: 12px;
  font-weight: 600;
  margin-top: 12px;
  text-decoration: none;
  display: block;
}

/* ── Responsive (tablet/mobile) ── */
/* Mobile phone icon — hidden on desktop, shown at hamburger breakpoint */
.site-header .mobile-phone,
.site-header .mobile-contact { display: none; }

@media (max-width: 1100px) {
  .site-header .nav-wrap { display: none; }
  .site-header .cta-group { display: none; }
  .site-header .hamburger { display: block; }
  .site-header .mobile-phone,
  .site-header .mobile-contact {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    color: #fff;
    transition: color .25s ease;
  }
  .site-header.is-solid .mobile-phone,
  .site-header.is-solid .mobile-contact { color: #2D2E30; }
  .site-header .inner { padding: 0 20px; }
  .site-header .logo { width: 180px; }
  .site-header .logo-svg { width: 44px; }
  .site-header .logo-wordmark { font-size: 1.2rem; }
}

/* ── Scroll-aware: solid state ── */
.site-header.is-solid {
  background: #fff !important;
  border-bottom: 1px solid rgba(45,46,48,0.08);
  box-shadow: 0 4px 20px rgba(15,23,42,0.06);
}
/* .logo-text removed — now using .logo-wordmark */
.site-header.is-solid .nav-menu li a { color: rgba(45,46,48,0.70); }
.site-header.is-solid .nav-menu li a:hover { color: #2D2E30; }
.site-header.is-solid .nav-menu li.current-menu-item a { color: #2D2E30; }
.site-header.is-solid .phone-btn { color: #2D2E30; border-color: rgba(45,46,48,0.22); }
.site-header.is-solid .phone-btn:hover { border-color: rgba(45,46,48,0.38); }
.site-header.is-solid .hamburger { color: #2D2E30; }

/* ── WP admin bar offset ── */
body.admin-bar .site-header {
  top: var(--wp-admin--admin-bar--height, 32px) !important;
}
@media (max-width: 782px) {
  body.admin-bar .site-header {
    top: var(--wp-admin--admin-bar--height, 46px) !important;
  }
}

/* ── Hero overlap: Elementor content needs top padding/margin to sit under fixed header ── */
body:not(.elementor-editor-active) .elementor-page .elementor {
  margin-top: -72px;
  padding-top: 72px;
}

/* ── Ensure no white gap between header and hero on dark hero pages ── */
body.page-id-593 {
  background: #0F172A;
}

/* ── Hero watermark (homepage only) ── */
.hero-watermark {
  display: none; /* hidden by default */
}
body.page-id-593 .hero-watermark {
  display: block;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40vw;
  height: auto;
  opacity: 0.04;
  fill: #fff;
  pointer-events: none;
  z-index: 1;
  transition: opacity .3s ease;
}

/* ── Hello Elementor main wrapper: remove any default padding/margin ── */
.site-main,
.page-content,
.entry-content,
main#content {
  padding: 0 !important;
  margin: 0 !important;
}

/* Remove Elementor default gaps between top-level containers site-wide */
.elementor .e-con.e-parent { margin-top: 0 !important; margin-bottom: 0 !important; }

/* Neutralise Elementor global red link colour on all content links site-wide.
   CTA buttons use explicit inline styles with display:inline-block so they're excluded.
   Only hover gets a subtle underline. */
/* ── Parallax Hero ── */
.mb-hero-parallax {
  overflow: visible !important;
  position: relative !important;
}
.mb-hero-parallax .mb-hero-bg,
.mb-hero-parallax .mb-hero-overlay {
  position: fixed !important;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  z-index: 0;
}
.mb-hero-parallax .mb-hero-content {
  position: relative;
  z-index: 2;
}
/* Mobile: fixed bg can cause issues — fall back to absolute */
@media (hover: none) and (pointer: coarse) {
  .mb-hero-parallax .mb-hero-bg,
  .mb-hero-parallax .mb-hero-overlay {
    position: absolute !important;
  }
  .mb-hero-parallax {
    overflow: hidden !important;
  }
}
/* Content sections sit above the fixed hero bg */
.elementor-page .elementor > .elementor-element:not(:first-child) {
  position: relative;
  z-index: 3;
  background: #fff;
}
/* Footer sits above too */
.site-footer {
  position: relative;
  z-index: 3;
}
/* ── CF7 Success State ── */
.wpcf7 form.sent .wpcf7-response-output {
  border: none !important;
  padding: 24px 16px !important;
  margin: 16px 0 0 !important;
  text-align: center;
  font-family: Outfit, sans-serif;
  font-size: 1rem;
  color: #2D2E30;
  font-weight: 600;
  background: transparent !important;
}
.wpcf7 form.sent .wpcf7-response-output::before {
  content: "\2713";
  display: block;
  width: 56px;
  height: 56px;
  margin: 0 auto 12px;
  background: #22c55e;
  color: #fff;
  border-radius: 50%;
  font-size: 28px;
  line-height: 56px;
  font-weight: 700;
}

/* Content sections must sit above the fixed hero bg */
.elementor-page .elementor > .elementor-element:not(:first-child) {
  position: relative;
  z-index: 3;
  background: #fff;
}
/* Dark sections override white bg */
.elementor-page .elementor > .elementor-element:not(:first-child) [style*="background:#2D2E30"],
.elementor-page .elementor > .elementor-element:not(:first-child) [style*="background:#E91C24"] {
  background: inherit;
}

.elementor-widget-html a:not([href="#link-popup"]):not([href="#book-consult"]):not([style*="display:inline-block"]):not([style*="display:block"]):not([style*="border-radius"]):not([style*="color:"]) {
  color: inherit !important;
  text-decoration: none !important;
}
.elementor-widget-html a:not([href="#link-popup"]):not([href="#book-consult"]):not([style*="display:inline-block"]):not([style*="display:block"]):not([style*="border-radius"]):hover {
  text-decoration: underline !important;
  text-underline-offset: 3px;
}

/* ===== GLOBAL HEADING TYPOGRAPHY — matches design system ===== */
body .elementor h2,
body .elementor .elementor-heading-title {
  font-family: Outfit, sans-serif !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  font-size: clamp(1.6rem, 3vw, 2.2rem) !important;
}
body .elementor h1 {
  font-family: Outfit, sans-serif !important;
  line-height: 1.1 !important;
}
body .elementor h3 {
  font-family: Outfit, sans-serif !important;
  line-height: 1.3 !important;
}

/* ===== GLOBAL HERO FIXES (2026-02-23) ===== */
/* Prevent hero text overlap */
.mb-hero-parallax h1 {
  line-height: 1.1 !important;
  margin-bottom: 16px !important;
}
.mb-hero-parallax p {
  line-height: 1.5 !important;
}
/* Hero content vertical centering */
.mb-hero-parallax {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
/* CTA buttons on dark hero - never red text/outline on dark bg */
.mb-hero-parallax a[href="#book-consult"] {
  color: #fff !important;
  border-color: rgba(255,255,255,0.5) !important;
  background: transparent !important;
}
.mb-hero-parallax a[href="#link-popup"] {
  background: #E91C24 !important;
  color: #fff !important;
}
/* Hero min-height consistency */
.mb-hero-content {
  position: relative;
  z-index: 2;
}

/* ===== SECTION ALIGNMENT STANDARD (2026-02-25) ===== */
/* 
 * Classes: mb-section-intro, mb-section-cards, mb-section-cta, 
 *          mb-section-stats, mb-section-faq, mb-section-content
 * Add to the inner container div (max-width:960px one).
 * Kickers & H2s always centre. Body text left-aligns in content/cards/faq.
 */

/* --- All sections: kickers and H2s always centred --- */
.mb-section-intro h2,
.mb-section-cards h2,
.mb-section-cta h2,
.mb-section-stats h2,
.mb-section-faq h2,
.mb-section-content h2 {
  text-align: center !important;
}
.mb-section-intro [style*="text-transform:uppercase"],
.mb-section-cards [style*="text-transform:uppercase"],
.mb-section-cta [style*="text-transform:uppercase"],
.mb-section-stats [style*="text-transform:uppercase"],
.mb-section-faq [style*="text-transform:uppercase"],
.mb-section-content [style*="text-transform:uppercase"],
.mb-section-intro span[style*="text-transform:uppercase"],
.mb-section-cards span[style*="text-transform:uppercase"],
.mb-section-content span[style*="text-transform:uppercase"],
.mb-section-faq span[style*="text-transform:uppercase"] {
  text-align: center !important;
  display: block !important;
}

/* --- Intro sections: short text centred --- */
.mb-section-intro {
  text-align: center;
}
.mb-section-intro p {
  margin-left: auto;
  margin-right: auto;
}

/* --- CTA sections: everything centred --- */
.mb-section-cta {
  text-align: center;
}

/* --- Stats sections: everything centred --- */
.mb-section-stats {
  text-align: center;
}

/* --- Cards/grid sections: heading centred, card body left --- */
.mb-section-cards {
  text-align: left;
}

/* --- FAQ sections: heading centred, answers left --- */
.mb-section-faq {
  text-align: left;
}

/* --- Content/deep-text sections: heading centred, body left --- */
.mb-section-content {
  text-align: left;
}

/* Nav dropdown styles */
.site-header .nav-menu>li{position:relative}
.site-header .nav-menu .sub-menu{display:none !important;position:absolute;top:100%;left:50%;transform:translateX(-50%);background:#fff;border:1px solid rgba(0,0,0,0.06);border-radius:12px;box-shadow:0 12px 32px rgba(0,0,0,0.1);padding:12px 0;min-width:220px;z-index:1000;list-style:none;margin:0}
.site-header .nav-menu>li:hover>.sub-menu{display:flex !important;flex-direction:column}
.site-header .nav-menu .sub-menu li{width:100%}
.site-header .nav-menu .sub-menu li a{display:block !important;padding:8px 20px !important;font-size:0.82rem !important;color:#6e6e73 !important;white-space:nowrap;transition:all 0.15s}
.site-header .nav-menu .sub-menu li a:hover{color:#E91C24 !important;background:#F5F5F7}
.site-header .nav-menu>li.menu-item-has-children>a::after{content: 25BE;font-size:0.65em;opacity:0.5;margin-left:3px}
.mobile-nav .sub-menu{display:none !important;list-style:none;padding:0 0 0 16px}
.mobile-nav .menu-item-has-children.mob-open>.sub-menu{display:block !important}
.mobile-nav .sub-menu li a{font-size:0.9rem;padding:12px 0;border-bottom:1px solid #f0f0f0}
.mobile-nav .menu-item-has-children>a::after{content: 25BE;font-size:0.7em;opacity:0.5}
.site-header .nav-menu,.site-header .nav-menu ul{gap:24px}
.site-header .nav-menu .sub-menu,.site-header .nav-menu .sub-menu li{gap:0}

/* Logo swap on scroll — white default (over dark hero), red when solid */
.site-header .logo-white { display:inline-block; }
.site-header .logo-red { display:none; }
.site-header.is-solid .logo-white { display:none; }
.site-header.is-solid .logo-red { display:inline-block !important; }
.site-header.is-solid { background:rgba(255,255,255,0.97); }
/* Nav text also needs to flip */
.site-header .nav-menu li a { color:rgba(255,255,255,0.8); }
.site-header .nav-menu li a:hover { color:#fff; }
.site-header.is-solid .nav-menu li a { color:#6e6e73; }
.site-header.is-solid .nav-menu li a:hover { color:#2D2E30; }
/* Phone link */
.site-header .phone-btn { color:rgba(255,255,255,0.9); }
.site-header.is-solid .phone-btn { color:#2D2E30; }
/* Dropdown caret */
.site-header .nav-menu>li.menu-item-has-children>a::after { opacity:0.5; }
/* Hamburger */
.site-header .hamburger svg { stroke:rgba(255,255,255,0.9); }
.site-header.is-solid .hamburger svg { stroke:#2D2E30; }

/* Align footer logo with column headings */
.site-footer .footer-brand .footer-logo { display:inline-block; margin-top:16px; }

/* Fix invisible links on dark cards (homepage security section etc) */
[style*="background:#2D2E30"] a,
[style*="background: #2D2E30"] a,
[style*="background:#3a3b3d"] a,
[style*="background:rgba(255,255,255,0.06)"] a {
  color: #E91C24 !important;
}
[style*="background:#2D2E30"] a:hover,
[style*="background: #2D2E30"] a:hover,
[style*="background:#3a3b3d"] a:hover,
[style*="background:rgba(255,255,255,0.06)"] a:hover {
  color: #fff !important;
}


/* Zero Elementor container gap — each module has its own padding */
.elementor > .e-con, .elementor { gap: 0 !important; }

/* ===== CTA BUTTON COLOUR FIX (2026-02-28) ===== */
/* Dark-bg link rules turn CTA button text red. Only exempt on dark backgrounds. */
[style*="background:#2D2E30"] a[href="#link-popup"],
[style*="background:#2D2E30"] a[href="#book-consult"],
[style*="background:#2D2E30"] a[href^="tel:"],
[style*="background: #2D2E30"] a[href="#link-popup"],
[style*="background: #2D2E30"] a[href="#book-consult"],
[style*="background: #2D2E30"] a[href^="tel:"] {
  color: #fff !important;
}