/* custom.css - cleaned and fixed (replace your current file) */

/* -------------------------
   Theme variables
   ------------------------- */
:root{
  --brand:#083049;
  --accent:#ffd21f;
  --muted:#6b7280;
  --card-border:#e6eef5;
  --max-width:1100px;
  --header-z:10000;
}

/* -------------------------
   Base reset & layout
   ------------------------- */
*{box-sizing:border-box;margin:0;padding:0;font-family:Inter,Arial,Helvetica,sans-serif}
html,body{height:100%}
body{
  background:#f8fafc;
  color:var(--brand);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  display:flex;
  flex-direction:column;
  min-height:100vh;
}
.container{max-width:var(--max-width);margin:0 auto;padding:18px;width:100%;box-sizing:border-box}

/* -------------------------
   Header
   ------------------------- */
.header{background:var(--brand);padding:12px 0;position:relative;z-index:var(--header-z)}
.header .container{display:flex;align-items:center;justify-content:space-between;gap:12px}
.header .brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit}
.header .brand img{height:64px;width:auto;display:block;object-fit:contain}
.header .brand .brand-name{color:#fff;font-weight:700;font-size:16px;white-space:nowrap}

/* Desktop nav */
.header .main-nav{display:block}
.header .main-nav ul{display:flex;gap:18px;align-items:center;margin:0;padding:0;list-style:none}
.header .main-nav a{color:#fff;font-weight:600;padding:6px 4px;text-decoration:none}

/* Mobile toggle */
.mobile-menu-toggle{display:none;background:transparent;border:none;color:#fff;font-size:24px;cursor:pointer;padding:8px}

/* -------------------------
   Hero sections
   ------------------------- */
.hero{
  padding:60px 0;
  color:#fff;
  display:flex;
  align-items:center;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  position:relative;
  z-index:0;
  min-height:320px;
  background-color:var(--brand); /* fallback */
}
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.32);
  z-index:0;
  pointer-events:none;
}
.hero .container{position:relative;z-index:1}
.hero .content{max-width:720px}
.hero .content h1{margin-bottom:8px;color:#fff}
.hero .content p{margin-bottom:6px;color:#f1f5f9}

/* Home vs subpage sizes */
.hero.home-hero{min-height:600px}
.hero.page-hero{min-height:400px}
.hero.small-hero{min-height:220px}

/* Buttons */
.hero .hero-buttons{margin-top:10px;display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-block;padding:10px 14px;border-radius:8px;text-decoration:none;background:var(--accent);color:var(--brand);font-weight:700}

/* -------------------------
   Services grid / cards
   ------------------------- */
.services-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin-top:12px}
.service-card{background:#fff;border:1px solid var(--card-border);border-radius:8px;padding:18px;text-align:center;box-shadow:0 6px 18px rgba(12,44,68,0.04);display:flex;flex-direction:column;align-items:center;transition:transform 180ms ease}
.service-card:hover{transform:translateY(-4px)}
.service-icon{width:48px;height:48px;object-fit:contain;margin-bottom:12px;display:block}
.service-card h3{margin:6px 0 8px;color:var(--brand);font-size:18px}
.service-card p.lead{color:var(--muted);font-size:14px;line-height:1.5}

/* -------------------------
   Footer (one-line)
   ------------------------- */
/* ensure footer is positioned so absolute children are relative to it */
.site-footer{background:var(--brand);color:#ddd;text-align:center;padding:16px 8px;font-size:14px;margin-top:auto;position:relative}
.site-footer p{margin:0}
.site-footer .accent{color:var(--accent);font-weight:700}

/* small mobile tweak for footer text */
@media (max-width: 767px) {
  .site-footer p {
    font-size: 12.5px;
    line-height: 1.4;
    word-break: break-word;
    padding: 0 10px;
  }
}

/* -------------------------
   WhatsApp icon (footer desktop / floating mobile)
   ------------------------- */
/* Desktop: inside footer, right side */
.footer-whatsapp{
  position:absolute;
  right:16px;
  top:50%;
  transform:translateY(-50%);
  display:inline-block;
  text-decoration:none;
}
.footer-whatsapp img{width:28px;height:28px;display:block;border:0}

/* Mobile: make it a floating circular button bottom-right */
@media (max-width:767px){
  .footer-whatsapp{
    position:fixed !important;
    right:16px !important;
    bottom:16px !important;
    top:auto !important;
    transform:none !important;
    z-index:12000 !important;
    background:#25D366;
    border-radius:50%;
    padding:10px;
    box-shadow:0 4px 12px rgba(0,0,0,0.25);
  }
  .footer-whatsapp img{width:32px;height:32px}
}

/* -------------------------
   Utilities
   ------------------------- */
a{color:inherit}

/* remove underline specifically for header nav with high specificity */
.header .main-nav a,
.header .main-nav a:link,
.header .main-nav a:visited{
  text-decoration:none !important;
}
.header .main-nav a:hover{color:var(--accent) !important;text-decoration:none !important}

/* -------------------------
   Responsive: Tablet / Mobile
   ------------------------- */
@media (max-width:1199px){
  .hero.home-hero{min-height:560px}
  .hero.page-hero{min-height:360px}
  .hero{padding:48px 0}
  .container{padding:16px}
}

@media (max-width:767px){
  .container{padding:12px}

  /* Header layout: keep logo left, toggle right */
  .header .container{flex-direction:row;align-items:center;justify-content:space-between;gap:8px;padding:8px 12px}
  .header .brand{justify-content:flex-start}
  .header .brand .brand-name{display:inline-block}

  /* show mobile toggle and hide desktop nav */
  .mobile-menu-toggle{display:block}
  .header .main-nav{display:none !important}

  /* hero smaller and center content */
  .hero.home-hero{min-height:650px;padding:18px 0;display:flex;align-items:center;justify-content:center}
  .hero.page-hero{min-height:180px;padding:18px 0}
  .hero .content{text-align:center;padding:12px 6px}

  /* services grid single column on small screens */
  .services-grid{grid-template-columns:1fr}
}

/* -------------------------
   MOBILE NAV OVERLAY (uses .is-open on nav)
   JS should toggle nav.is-open and body.mobile-nav-open
   ------------------------- */
@media (max-width:767px){
  .header{position:relative;z-index:var(--header-z)}
  .header nav.is-open{
    display:block !important;
    position:fixed !important;
    left:12px !important;
    right:12px !important;
    top:var(--header-overlay-top,72px) !important;
    background:var(--brand) !important;
    border-radius:8px !important;
    padding:12px !important;
    z-index:99999 !important;
    box-shadow:0 8px 30px rgba(0,0,0,0.45) !important;
    max-height:calc(100vh - var(--header-overlay-top,72px) - 12px) !important;
    overflow-y:auto !important;
  }
  .header nav.is-open ul{flex-direction:column !important;gap:14px !important;align-items:center !important;margin:0 !important;padding:6px 0 !important}
  body.mobile-nav-open{overflow:hidden;touch-action:none}
}

/* -------------------------
   Final hero helpers (ensure visibility)
   ------------------------- */
.hero{background-size:cover !important;background-position:center center !important}

/* FORCE: remove any link underline in header/nav */
.header a,
.header nav a,
.header .main-nav a,
.header .main-nav a:link,
.header .main-nav a:visited,
.header .main-nav a:hover,
.header .main-nav a:active {
  text-decoration: none !important;
  text-decoration-color: transparent !important;
  -webkit-text-decoration-color: transparent !important;
  text-underline-offset: 0 !important;
}
/* FORCE: WhatsApp button floating on mobile */
@media (max-width: 767px) {
  .footer-whatsapp {
    position: fixed !important;
    right: 16px !important;
    bottom: 16px !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    z-index: 99999 !important;

    background: #25D366;
    border-radius: 50%;
    padding: 12px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.25);

    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
  }

  .footer-whatsapp img {
    width: 32px !important;
    height: 32px !important;
  }
}
/* =========================
   Final page hero alignment
   ========================= */
.hero.page-hero {
  display: flex !important;
  align-items: flex-end !important;   /* push text down */
  justify-content: flex-start !important;
}
.hero.page-hero .content {
  padding: 40px 20px 60px !important; /* top | sides | bottom */
  text-align: left !important;
}

/* Subpage hero: bottom-aligned on desktop, centered on mobile */
.hero.page-hero {
  display: flex !important;
  align-items: flex-end !important;   /* desktop: push content to bottom */
  justify-content: flex-start !important;
}
.hero.page-hero .content {
  padding: 40px 20px 60px !important;
  text-align: left !important;
}

/* Mobile: center subpage hero content for better balance */
@media (max-width: 767px) {
  .hero.page-hero {
    align-items: center !important;
    justify-content: center !important;
  }
  .hero.page-hero .content {
    padding: 18px 12px !important;
    text-align: center !important;
  }
}
/* ===== Fix hero bottom seam (remove white patch) ===== */

/* 1) ensure there's no accidental bottom margin on hero or the following container */
.hero { margin-bottom: 0 !important; }
.hero + .container { margin-top: 0 !important; }

/* 2) optional: reduce extra top gap of the cards area if present */
.container.cards, .cards { margin-top: 12px !important; }

/* 3) visual smooth fade between hero and page background
   makes the hero image blend into the page (adjust height & color as needed) */
.hero::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;                 /* overlaps 1px to avoid hard seam */
  height: 56px;                 /* fade height - increase to make smoother */
  pointer-events: none;
  z-index: 1;                    /* sits above hero's image but below text */
  /* fade from transparent (top) to page background (bottom) */
  background: linear-gradient(to bottom, rgba(0,0,0,0.06), rgba(0,0,0,0.02) 40%, #f8fafc 100%);
}

/* 4) ensure hero content stays above the fade */
.hero .container { position: relative; z-index: 2; }

/* 5) small tweak: if cards have a top border/shadow causing contrast, remove for a cleaner join */
.cards .card:first-child, .cards { border-top: none !important; }

/* If you prefer a hard join with no fade at all, use this instead of the ::after block:
.hero, .hero + .container { background: none; } 
*/

.hero { margin-bottom: 0 !important; }
.hero + .container { margin-top: 0 !important; }

.hero::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 28px; /* smaller fade */
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(to bottom,
    rgba(0,0,0,0.04) 0%,
    rgba(0,0,0,0.02) 40%,
    rgba(248,250,252,0.6) 100%); /* 0.6 of page bg to blend gently */
}
.hero .container { position: relative; z-index: 2; }

/* Make entire service card clickable while preserving card styles */
.service-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.service-link .service-card { 
  transition: transform 160ms ease, box-shadow 160ms ease;
}

/* hover / focus affordance on the whole card */
.service-link:hover .service-card,
.service-link:focus .service-card {
  transform: translateY(-6px);
  box-shadow: 0 12px 30px rgba(12,44,68,0.08);
}

/* ensure keyboard focus is visible for accessibility */
.service-link:focus {
  outline: 3px solid rgba(255,210,31,0.18);
  outline-offset: 6px;
  border-radius: 8px;
}
/* ===== Mobile header + hero tightening (paste at end of custom.css) ===== */

/* 1) Slightly reduce header height on small screens and scale the logo */
@media (max-width: 767px) {
  .header {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }
  .header .brand img,
  .header img {
    height: 48px !important;    /* smaller logo on phones */
    max-height: 48px !important;
  }
}

/* 2) Remove any accidental top gap on the hero and keep text readable */
.hero {
  margin-top: 0 !important;
  /* reduce top padding on mobile so hero content sits closer under header */
}
@media (max-width: 767px) {
  .hero.home-hero,
  .hero.page-hero {
    padding-top: 12px !important;    /* reduce large top padding on phones */
    padding-bottom: 18px !important; /* keep some bottom breathing room */
    min-height: auto !important;     /* allow content to size naturally */
  }
  .hero .container.content {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

/* 3) If header is overlapping content (rare), ensure hero starts after header */
.header {
  position: relative; /* default, safe */
  z-index: 1000;
}

/* 4) Final safety: remove inline style interference for hero background positioning on mobile */
@media (max-width: 767px) {
  .hero { background-position: center top !important; background-size: cover !important; }
}

/* ========== Fix mobile nav overlay ========== */
/* Paste at end of custom.css so it overrides earlier rules */

:root {
  --header-height-mobile: 64px; /* adjust if your header is taller/shorter on phones */
}

/* Make sure header has fixed stacking and a known height on mobile */
@media (max-width: 767px) {
  .header {
    position: relative;
    z-index: 11000; /* above the nav overlay */
  }
  /* ensure the header inner container uses the expected height */
  .header .container {
    min-height: var(--header-height-mobile);
    align-items: center;
  }
}

/* Position nav.is-open *below* the header, full width and flush to edges */
@media (max-width: 767px) {
  .header nav.is-open {
    display: block !important;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: var(--header-height-mobile) !important;    /* sits directly under header */
    background: var(--brand) !important;
    border-radius: 0 !important;                     /* no rounded popup edges */
    padding: 12px 8px !important;
    z-index: 10500 !important;                        /* below header, above content */
    max-height: calc(100vh - var(--header-height-mobile) - 8px) !important;
    overflow-y: auto !important;
    box-shadow: none !important;
  }

  /* Make the menu items stack and be easy to tap */
  .header nav.is-open ul {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    align-items: stretch !important;
    margin: 0 !important;
    padding: 6px 12px !important;
  }

  .header nav.is-open ul li {
    width: 100% !important;
  }

  .header nav.is-open ul li a {
    display: block !important;
    padding: 10px 12px !important;
    color: #fff !important;
    text-decoration: none !important;
    font-weight: 600 !important;
  }

  /* if you use a separate .main-nav class, make sure it's hidden by default and shown when open */
  .header .main-nav { display: none !important; }
  .header nav.is-open { display:block !important; }
}

/* small tweak: if header height is different, change --header-height-mobile value at top */
/* Force brand text to remain visible if accidentally hidden */
.header .brand .brand-name,
.header .brand span {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
}
/* ===== Hero / header mobile fixes — paste at end of custom.css ===== */

/* 1) Ensure header sits above hero and has a consistent mobile height */
:root { --header-height-mobile: 64px; } /* adjust if your header is taller */
.header {
  position: relative;
  z-index: 11000; /* header above hero always */
}

/* make header container use the same height on mobile for consistent layout */
@media (max-width: 767px) {
  .header .container { min-height: var(--header-height-mobile); align-items: center; }
  .header .brand img { height: 48px !important; max-height:48px; } /* keeps logo small on phones */
}

/* 2) Keep brand text visible if present */
.header .brand span,
.header .brand .brand-name {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 11001; /* above header content */
}

/* 3) Make hero start below header and avoid large sudden shifts on mobile */
.hero {
  margin-top: 0 !important;
  /* ensure hero content stays above possible pseudo-elements */
  position: relative;
  z-index: 1;
  background-position: center top !important; /* keep focal area visible on phones */
}

/* On mobile: reduce large fixed min-heights and top padding so hero doesn't push header */
@media (max-width: 767px) {
  .hero.home-hero, .hero.page-hero {
    min-height: auto !important;        /* allow hero to size naturally on phones */
    padding-top: calc(var(--header-height-mobile) + 8px) !important; /* leave space under header */
    padding-bottom: 18px !important;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .hero .container.content { padding-left: 12px !important; padding-right: 12px !important; }
}

/* 4) Safety: ensure no pseudo-element covers header area */
.hero::before,
.hero::after {
  pointer-events: none;
  z-index: 0;
}

/* 5) If something else still hides the span, force it visible after a short delay
   (this is harmless CSS fallback to avoid a paint-flash: no JS required) */
@media (max-width: 767px) {
  .header .brand span {
    -webkit-animation: keepVisible 0.12s linear 0s 1;
    animation: keepVisible 0.12s linear 0s 1;
  }
  @keyframes keepVisible {
    from { opacity: 1; }
    to { opacity: 1; }
  }
}
/* If body has a single-service class, visually hide the services grid but keep content in DOM for SEO */
body.single-service .services-grid {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition: max-height .28s ease, opacity .18s ease;
  pointer-events: none;
}

/* Optional: reveal a small CTA in place */
body.single-service .services-grid + .single-service-cta {
  display: block;
}
/* Services dropdown — always positioned as a dropdown (prevents horizontal flow) */
.header .has-submenu { position: relative; }
.header .has-submenu .submenu {
  display: none;                 /* hidden by default */
  position: absolute;            /* removes it from document flow */
  top: 100%;                     /* directly below header item */
  left: 0;
  min-width: 220px;
  background: var(--brand, #083049);
  border-radius: 6px;
  padding: 6px 0;
  box-shadow: 0 8px 20px rgba(0,0,0,0.18);
  z-index: 20000;
  white-space: nowrap;           /* prevent wrapping into multiple lines */
}

/* submenu item styling */
.header .has-submenu .submenu li { list-style:none; }
.header .has-submenu .submenu a {
  display:block;
  padding:10px 16px;
  color:#fff;
  font-weight:600;
  text-decoration:none;
}
.header .has-submenu .submenu a:hover,
.header .has-submenu .submenu a:focus { background: rgba(255,255,255,0.04); }

/* show dropdown on hover (desktop) or when .submenu-open class added (mobile toggle) */
@media (min-width:768px) {
  .header .has-submenu:hover > .submenu { display:block; }
}
.header .has-submenu.submenu-open > .submenu { display:block; }

/* Mobile: if nav is a full-screen overlay, ensure submenu becomes stacked under the parent */
@media (max-width:767px) {
  .header .has-submenu .submenu {
    position: static;    /* flow inside mobile nav overlay */
    box-shadow: none;
    background: transparent;
    padding: 6px 0;
  }
  .header .has-submenu .submenu a { color: #fff; background: transparent; padding: 12px; border-radius: 6px; }
}
/* ---- Fix submenu clipping in header ---- */
.header .container {
  overflow: visible !important;
}

.header .has-submenu {
  position: relative !important;
}

.header .has-submenu .submenu {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  z-index: 2000 !important;
}

/* --- Submenu Fixes --- */

/* Let submenu escape clipping */
.header .container {
  overflow: visible !important;
}

/* Position submenu absolutely under parent */
.header .has-submenu {
  position: relative !important;
}
.header .has-submenu .submenu {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  z-index: 2000 !important;
}

/* Hide submenu toggle on desktop (>=768px) */
@media (min-width: 768px) {
  .header .has-submenu > .submenu-toggle {
    display: none !important;
    width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
  }
}
/* ============================
   Mobile + Desktop nav fixes
   Paste this at the end of css/custom.css
   ============================ */

/* 1) Desktop: make submenu escape clipping and be absolute (no layout shifts) */
.header .container { overflow: visible !important; }
.header .has-submenu { position: relative !important; }
.header .has-submenu .submenu {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  margin-top: 0 !important;
  z-index: 2000 !important;
  display: none !important; /* default hidden on desktop */
}

/* hide the small triangle toggle on desktop */
@media (min-width: 768px) {
  .header .has-submenu > .submenu-toggle {
    display: none !important;
    width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
  }
  .header .has-submenu:hover > .submenu,
  .header .has-submenu.submenu-open > .submenu {
    display: block !important;
  }
}

/* 2) MOBILE: STACKED overlay & accordion submenu (<= 880px)
   Ensures there is no overlap and submenu flows as a normal block
*/
@media (max-width: 880px) {
  /* ensure header overlay (opened nav) covers content and sits under header */
  :root { --header-height-mobile: 64px; }

  .header nav.is-open,
  .header .main-nav.is-open {
    display: block !important;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: var(--header-height-mobile) !important;
    background: var(--brand, #083049) !important;
    padding: 12px 8px !important;
    border-radius: 0 !important;
    max-height: calc(100vh - var(--header-height-mobile) - 8px) !important;
    overflow-y: auto !important;
    z-index: 10500 !important;
    box-shadow: none !important;
  }

  /* stacked vertical list for menu items */
  .header nav.is-open ul, .header nav.is-open .navlist {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    align-items: stretch !important;
    margin: 0 !important;
    padding: 8px !important;
  }

  .header nav.is-open ul li {
    width: 100% !important;
  }

  .header nav.is-open ul li a {
    display: block !important;
    padding: 10px 12px !important;
    color: #fff !important;
    text-decoration: none !important;
    font-weight: 600 !important;
  }

  /* Submenu becomes static (in-flow) on mobile: accordion behavior */
  .header .has-submenu .submenu {
    position: static !important;
    display: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding-left: 8px !important; /* visual indent */
    margin-top: 4px !important;
  }
  .header .has-submenu.submenu-open > .submenu {
    display: block !important;
  }

  /* ensure submenu children are full-width and readable */
  .header .has-submenu .submenu li { width: 100% !important; }
  .header .has-submenu .submenu a {
    display:block !important;
    padding: 8px 12px !important;
    color: #fff !important;
    font-weight:500 !important;
    text-decoration:none !important;
  }

  /* keep toggle visible and usable on mobile */
  .header .has-submenu > .submenu-toggle {
    display: inline-block !important;
    background: transparent !important;
    color: #fff !important;
    border: 0 !important;
    padding: 6px 10px !important;
  }

  /* prevent page underneath from scrolling while menu open */
  body.mobile-nav-open { overflow: hidden !important; touch-action: none !important; }
}

/* ====== Mobile nav overlay / header overlap fix (paste at end of custom.css) ====== */

/* make sure header z-index variable exists (adjust if you want a different base) */
:root { --header-z: 11000; }

/* keep header at known stacking level */
.header { z-index: var(--header-z) !important; }

/* when mobile nav is opened, disable header pointer events so header doesn't intercept clicks */
body.mobile-nav-open header,
body.mobile-nav-open .header {
  pointer-events: none !important;
}

/* allow the nav itself to receive pointer events and place it above header */
body.mobile-nav-open #main-menu,
body.mobile-nav-open .header nav.is-open {
  pointer-events: auto !important;
  z-index: calc(var(--header-z) + 10) !important;
}

/* ensure nav.is-open is placed below header visually (top below header) but above header for pointer events */
.header nav.is-open {
  top: var(--header-height-mobile, 64px) !important;
  z-index: calc(var(--header-z) + 10) !important;
}

/* safety: ensure nav uses full width in mobile overlay */
@media (max-width: 880px) {
  .header nav.is-open { left: 0 !important; right: 0 !important; }
  body.mobile-nav-open { overflow: hidden !important; }
}
/* --- Navigation Fix Overrides --- */

/* Default: hide submenu */
.has-submenu .submenu {
  display: none;
}

/* Show when open (JS adds .submenu-open) */
.has-submenu.submenu-open > .submenu {
  display: block;
}

/* Desktop hover also works */
@media (min-width: 768px) {
  .has-submenu:hover > .submenu {
    display: block;
  }
}

/* Mobile submenu look */
@media (max-width: 767px) {
  .submenu {
    position: static;
    background: #fff;
    border-radius: 6px;
    padding: 0;
    box-shadow: none;
    margin-top: 6px;
  }
  .submenu a {
    display: block;
    padding: 12px 14px;
    text-decoration: none;
    color: var(--brand, #083049);
    border-radius: 4px;
  }
  .submenu a:hover {
    background: rgba(8,48,73,0.08);
  }
}
/* ======== Mobile nav overlay: z-index + pointer-events fix ======== */
/* Paste this at the very end of custom.css to override previous rules */

/* base header z-index (adjust only if you intentionally changed it elsewhere) */
:root {
  --header-z: 11000;
  --header-height-mobile: 64px; /* adjust to match header height on phones if needed */
}

/* keep header on top visually but let nav get pointer events when open */
.header {
  position: relative;
  z-index: var(--header-z) !important;
}

/* When mobile nav is open, allow nav to accept clicks and ensure it sits above header for pointer events */
body.mobile-nav-open {
  overflow: hidden !important;
  touch-action: none !important;
}

/* Do NOT completely disable header pointer-events globally — only make header inert visually but keep nav interactive */
body.mobile-nav-open header,
body.mobile-nav-open .header {
  /* keep header visible but allow nav to receive pointer events */
  pointer-events: none !important;
}

/* Ensure nav itself receives pointer-events and is above header for interaction */
body.mobile-nav-open #main-menu,
body.mobile-nav-open .header nav.is-open,
body.mobile-nav-open .main-nav.is-open {
  pointer-events: auto !important;
  z-index: calc(var(--header-z) + 20) !important;
}

/* place the open nav directly under the header and full width */
@media (max-width: 880px) {
  .header nav.is-open,
  .header .main-nav.is-open {
    display: block !important;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: var(--header-height-mobile) !important;
    background: var(--brand, #083049) !important;
    padding: 12px 8px !important;
    border-radius: 0 !important;
    max-height: calc(100vh - var(--header-height-mobile) - 8px) !important;
    overflow-y: auto !important;
    z-index: calc(var(--header-z) + 20) !important; /* above header for interaction */
    box-shadow: none !important;
  }

  .header nav.is-open ul,
  .header nav.is-open .navlist,
  .header .main-nav.is-open ul {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    align-items: stretch !important;
    margin: 0 !important;
    padding: 8px !important;
  }

  /* Submenu becomes in-flow accordion on mobile */
  .header .has-submenu .submenu {
    position: static !important;
    display: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding-left: 8px !important;
    margin-top: 4px !important;
    z-index: calc(var(--header-z) + 21) !important; /* above nav area */
  }
  .header .has-submenu.submenu-open > .submenu {
    display: block !important;
  }

  .header .has-submenu .submenu a {
    display: block !important;
    padding: 10px 12px !important;
    color: #fff !important;
    text-decoration: none !important;
  }

  /* keep submenu-toggle usable */
  .header .has-submenu > .submenu-toggle {
    display: inline-block !important;
    background: transparent !important;
    color: #fff !important;
    border: 0 !important;
    padding: 6px 10px !important;
  }
}

/* Safety: if something else is putting a pointer-blocking overlay, ensure nav has higher stacking for pointer events */
body.mobile-nav-open .header nav.is-open,
body.mobile-nav-open #main-menu {
  pointer-events: auto !important;
  z-index: calc(var(--header-z) + 20) !important;
}

/* ===== Optional debug outlines (temporary) =====
   Uncomment only while testing to see which element is covering area.
*/
/*
header { outline: 2px dashed rgba(255,0,0,0.12); }
.header nav.is-open { outline: 2px dashed rgba(0,128,255,0.10); }
.header .has-submenu .submenu { outline: 2px dashed rgba(0,255,0,0.08); }
*/
/* ===== Nav vs Header pointer fix ===== */
body.mobile-nav-open .header {
  pointer-events: none !important; /* header cannot block taps */
}
body.mobile-nav-open .main-nav,
body.mobile-nav-open #main-menu {
  pointer-events: auto !important; /* nav stays usable */
  z-index: 12000 !important;       /* nav above header */
}
/* ===== Mobile nav pointer fix ===== */
body.mobile-nav-open .header {
  pointer-events: none !important; /* disable header blocking */
}
body.mobile-nav-open #main-menu,
body.mobile-nav-open .main-nav {
  pointer-events: auto !important; /* allow nav itself to be clickable */
  z-index: 12000 !important;       /* nav stays above header */
}
/* --- Restore hamburger toggle & service link --- */

/* When mobile nav is open, header must not block taps */
body.mobile-nav-open .header {
  pointer-events: none !important;
}

/* But allow nav to stay clickable */
body.mobile-nav-open #main-menu,
body.mobile-nav-open .main-nav {
  pointer-events: auto !important;
  z-index: 12000 !important;
}

/* Ensure submenu is hidden by default, shown only when .submenu-open is present */
.has-submenu .submenu {
  display: none;
}
.has-submenu.submenu-open > .submenu {
  display: block;
}
/* --- Restore hamburger toggle & service link --- */

/* When mobile nav is open, header must not block taps */
body.mobile-nav-open .header {
  pointer-events: none !important;
}

/* But allow nav to stay clickable */
body.mobile-nav-open #main-menu,
body.mobile-nav-open .main-nav {
  pointer-events: auto !important;
  z-index: 12000 !important;
}

/* Ensure submenu is hidden by default, shown only when .submenu-open is present */
.has-submenu .submenu {
  display: none;
}
.has-submenu.submenu-open > .submenu {
  display: block;
}
/* --- Fix: allow nav above header on mobile --- */
body.mobile-nav-open .header {
  pointer-events: none !important;
}
body.mobile-nav-open #main-menu,
body.mobile-nav-open .main-nav {
  pointer-events: auto !important;
  z-index: 12000 !important;
}

/* --- Mobile nav pointer fix (place at end of custom.css) --- */
.has-submenu .submenu { display: none; }
.has-submenu.submenu-open > .submenu { display: block; }

body.mobile-nav-open .header {
  pointer-events: none !important;
}
body.mobile-nav-open #main-menu,
body.mobile-nav-open .main-nav {
  pointer-events: auto !important;
  z-index: 12000 !important;
}
/* --- Fix testimonials layout --- */

/* Two-column layout for home page testimonials */
.testimonials-grid.two-cols {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  justify-content: center;
}

.testimonials-grid.two-cols .testimonial {
  box-sizing: border-box;
  flex: 0 0 calc(50% - 9px);   /* exactly 2 columns */
  max-width: calc(50% - 9px);
  min-width: 0;                /* prevents forced stacking */
  background: #fff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(10,20,30,0.06);
  text-align: left;            /* change to center if you prefer */
}

.testi-quote {
  display: block;
  font-size: 1rem;
  line-height: 1.5;
  margin-bottom: 12px;
  color: #223;
}

.testi-name {
  display: block;
  font-size: 0.9rem;
  color: #555;
}

/* On small screens, stack them full-width */
@media (max-width: 767px) {
  .testimonials-grid.two-cols .testimonial {
    flex: 0 0 100%;
    max-width: 100%;
  }
}
/* --- Force two testimonials side by side on home --- */
.testimonials-grid.two-cols {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  justify-content: center;
}

.testimonials-grid.two-cols .testimonial {
  flex: 0 0 calc(50% - 9px);  /* take half width minus gap */
  max-width: calc(50% - 9px);
  min-width: 0 !important;    /* override the old min-width */
  box-sizing: border-box;
}
/* Force WhatsApp button to right edge */
.whatsapp-testimonial {
  display: flex;
  justify-content: flex-end;   /* push to far right */
  margin-right: 20px;
}

/* On desktop, keep it inline with testimonials */
.whatsapp-testimonial.home-services,
.whatsapp-testimonial.other-pages {
  width: 100%;                 /* span full container width */
}

/* Mobile: floating bottom-right */
@media (max-width: 767px) {
  .whatsapp-testimonial {
    position: fixed;
    right: 18px;
    bottom: 18px;
    margin: 0;
    z-index: 12000;
    width: auto;               /* remove the full-width so it floats */
  }
}
.btn-yellow {
  background: #ffc107 !important;   /* Force yellow */
  color: #000 !important;           /* Black text */
  padding: 10px 20px;
  border-radius: 6px;
  font-weight: 600;
  text-decoration: none;
  display: inline-block;
}
.btn-yellow:hover {
  background: #e0a800 !important;   /* Darker yellow on hover */
  color: #000 !important;
}
.teaser {
  font-weight: 400; /* normal */
  color: #333;      /* optional, ensures good contrast */
}