/* ZFC audit remediations — loaded last to override the theme.
   Scope kept tight so the pixel-perfect design is preserved. */

/* P1-3: sticky navigation overlap — mask content sliding under the header.
   The pill nav has no backdrop, so page headings collide with it on scroll.
   A subtle top gradient + blur masks the area without changing the nav itself. */
#ms-header.main-header::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:110px;
  pointer-events:none;
  z-index:-1;
  background:linear-gradient(to bottom,
     rgba(10,30,40,.94) 0%,
     rgba(10,30,40,.80) 55%,
     rgba(10,30,40,0) 100%);
  -webkit-backdrop-filter:blur(5px);
  backdrop-filter:blur(5px);
  -webkit-mask-image:linear-gradient(to bottom,#000 55%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 55%,transparent 100%);
}
#ms-header.main-header{position:relative;}

/* P1-2: true H1 for pages whose visible title is a decorative marquee/graphic.
   Present to SEO + assistive tech, invisible on screen (no layout shift). */
.zfc-visually-hidden{
  position:absolute !important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);
  white-space:nowrap;border:0;
}

/* C4/P1-4/P1-5/P2-6: real-text footer blocks replacing text-as-image */
.zfc-hide{display:none !important;}
.zfc-footer-cta{
  text-align:center;color:#fff;font-weight:700;font-size:40px;line-height:1.18;
  letter-spacing:-.015em;padding:6px 20px 2px;
}
.zfc-footer-cta strong{color:#fff;font-weight:700;}
.zfc-footer-cta span{
  display:block;margin-top:14px;font-weight:400;font-size:19px;color:rgba(255,255,255,.65);
}
@media (max-width:767px){
  .zfc-footer-cta{font-size:28px;}
  .zfc-footer-cta span{font-size:16px;}
}
.zfc-footer-cta span a{
  color:#28b8a6 !important;text-decoration:none;
  font-size:inherit !important;font-weight:400 !important;line-height:inherit !important;
}
.zfc-footer-cta span a:hover{text-decoration:underline;}
.zfc-footer-legal{
  display:flex;align-items:center;gap:14px;
}
.zfc-footer-legal img{flex:0 0 auto;}
.zfc-footer-legal span{
  font-size:13px;line-height:1.4;letter-spacing:.02em;color:rgba(255,255,255,.6);
}
.zfc-footer-legal .zfc-credit{
  display:inline-block;margin-top:5px;font-size:11px;letter-spacing:.03em;
  color:rgba(255,255,255,.4);
}

/* ===== HERO (home): the video background used a Vimeo embed (broken by the
   video-stack removal + CSP). Replace with a stable, self-hosted ZFC image so
   the hero never renders as an empty black box, on any device. ===== */
.home .ms-hero,
body.page-id-913 .ms-hero{position:relative;overflow:hidden;}
.home .ms-hero .ms-parallax,
body.page-id-913 .ms-hero .ms-parallax{position:absolute;inset:0;width:100%;height:100%;}
.home .ms-hero .jarallax-img,
body.page-id-913 .ms-hero .jarallax-img{
  position:absolute;inset:0;width:100%;height:100%;
  background:url('/wp-content/uploads/zfc-hero.jpg') center/cover no-repeat;
}

/* ===== MOBILE (≤767px): the theme is a desktop-first Elementor build that
   positions body copy with a 15em (240px) top padding on content columns, which
   collapses into huge empty bands on phones. Neutralise the desktop-only offsets
   and tighten section spacing. Desktop is untouched (media-scoped). ===== */
/* Catalogue product-slider "next/prev preview" images stay unpopulated on phones
   (JS only fills them on desktop) — hide the empty ones so they don't render as
   broken boxes. Populated (desktop) ones are unaffected. */
img.pv-img-next:not([src]), img.pv-img-next[src=""],
img.pv-img-prev:not([src]), img.pv-img-prev[src=""]{display:none !important;}

@media (max-width:767px){
  html,body{overflow-x:hidden;}
  /* unpopulated slider slides render as broken boxes on phones — hide the empty ones */
  img[src=""]{display:none !important;}
  /* kill the desktop overlap offsets on content columns + add comfortable side
     gutters (text was flush ~10px from the edge). Backgrounds stay full-bleed. */
  .e-con.e-child{
    --padding-top:1.4em !important;
    --padding-bottom:0.4em !important;
    padding-left:22px !important;
    padding-right:22px !important;
  }
  /* big display headings are standalone text-editor widgets sitting full-width —
     give them side breathing room so they don't touch the screen edges */
  .e-con-full > .elementor-widget-text-editor,
  .e-con > .elementor-widget-text-editor{
    padding-left:18px !important;padding-right:18px !important;
  }
  .elementor-widget-heading:not([class*="marquee"]) .elementor-heading-title{
    padding-left:16px;padding-right:16px;
  }
  /* reduce the 10em section gaps between major blocks */
  .e-con.e-parent,
  .elementor-section{
    --margin-top:2.2em !important;
    --margin-bottom:0 !important;
  }
  /* hero a touch taller so the image reads on phones */
  .home .ms-hero,
  body.page-id-913 .ms-hero{min-height:300px;}
}

/* C5: contact form + page styling (on-brand, matches the dark theme) */
.zfc-contact-section{padding:160px 0 100px;color:#fff;min-height:70vh;}
.zfc-contact-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:56px;
  max-width:1180px;margin:0 auto;padding:0 24px;
}
@media (max-width:900px){.zfc-contact-grid{grid-template-columns:1fr;gap:36px;}}
.zfc-contact-info h2{font-size:34px;line-height:1.1;margin:0 0 18px;font-weight:700;}
.zfc-contact-info p{color:rgba(255,255,255,.75);line-height:1.6;margin:0 0 22px;max-width:44ch;}
.zfc-contact-info .zfc-detail{margin:0 0 16px;}
.zfc-contact-info .zfc-detail span{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:#28b8a6;margin-bottom:4px;}
.zfc-contact-info .zfc-detail a,.zfc-contact-info .zfc-detail div{color:#fff;text-decoration:none;font-size:16px;}
.zfc-form{display:flex;flex-direction:column;gap:16px;}
.zfc-form label{font-size:13px;color:rgba(255,255,255,.7);margin-bottom:6px;display:block;}
.zfc-form input,.zfc-form select,.zfc-form textarea{
  width:100%;background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.18);border-radius:10px;
  padding:13px 15px;color:#fff;font-size:15px;font-family:inherit;
  transition:border-color .2s,background .2s;
}
.zfc-form input:focus,.zfc-form select:focus,.zfc-form textarea:focus{
  outline:none;border-color:#28b8a6;background:rgba(40,184,166,.06);
}
.zfc-form textarea{min-height:130px;resize:vertical;}
.zfc-form .zfc-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
@media (max-width:600px){.zfc-form .zfc-row{grid-template-columns:1fr;}}
.zfc-form button{
  align-self:flex-start;margin-top:6px;
  background:#28b8a6;color:#04252a;border:0;border-radius:999px;
  padding:14px 34px;font-size:15px;font-weight:600;cursor:pointer;
  transition:transform .15s,background .2s;
}
.zfc-form button:hover{background:#33cfba;transform:translateY(-1px);}
.zfc-form-status{font-size:14px;margin-top:6px;min-height:20px;}
.zfc-form-status.ok{color:#33cfba;}
.zfc-form-status.err{color:#ff8f8f;}
/* CF7 status output (careers form) routed through zfc-forms.js */
.wpcf7-response-output.zfc-form-status{
  display:block;border:0;padding:8px 0 0;margin:10px 0 0;font-size:14px;color:rgba(255,255,255,.75);
}
.wpcf7-response-output.zfc-form-status.ok{color:#33cfba;}
.wpcf7-response-output.zfc-form-status.err{color:#ff8f8f;}