/* Multifab Inc — Homepage Scaffold (Dark Theme) */
:root{
  --bg:#0B0F17;
  --surface:#111725;
  --text:#E6ECF2;
  --muted:#9AA8BA;
  --accent:#4D86FF;
  --wash:#0E1524;
  --card:#111826;
  --border:#1E2A40;

  /* === Hero overlay tuning === */
  --hero-overlay-opacity: 0.22; /* lower = brighter video (was ~0.55 equivalent) */
  --hero-fade-strength:   0.38; /* bottom gradient opacity at 100% */
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--text);background:var(--bg);line-height:1.55}
img{max-width:100%;display:block}

.container{width:min(1120px,92%);margin-inline:auto}
.section{padding:72px 0}
.section.alt{background:var(--wash)}

/* Header (transparent + blur + hide on scroll) */
.site-header{
  position: sticky; top: 0; z-index: 30;
  background: rgba(11,15,23,.10);
  backdrop-filter: saturate(120%) blur(6px);
  -webkit-backdrop-filter: saturate(120%) blur(6px);
  transition: transform .28s ease, opacity .28s ease, background-color .28s ease, backdrop-filter .28s ease;
}
.site-header:not(.hdr-is-top){ background: rgba(11,15,23,.14); }
.site-header.hdr-is-hidden{ transform: translateY(-100%); opacity: 0; }
.nav-wrap{display:flex;align-items:center;justify-content:space-between;min-height:64px}

.nav-toggle{display:none;} /* hide "Menu" on desktop */
@media (max-width: 720px){
  .nav-toggle{display:inline-block;border:1px solid var(--border);padding:8px 10px;border-radius:8px;background:transparent;color:var(--text)}
}

.nav-menu{display:flex;gap:24px;list-style:none;margin:0;padding:0;align-items:center}
@media (max-width: 720px){
  .nav-menu{display:none;flex-direction:column;gap:12px;padding:12px 0}
  .nav-menu.open{display:flex}
}

.nav a{color:var(--text);text-decoration:none}
.nav a:hover{color:#fff}

/* ===== Current page highlight (strong) ===== */
.nav a.is-current,
.nav a[aria-current="page"]{
  font-weight:800 !important;
  text-decoration: underline !important;
  text-underline-offset: 6px;
  text-decoration-thickness: 2px;
}

/* Visual marker for Capabilities submenu current item */
.nav .submenu a.is-current,
.nav .submenu a[aria-current="page"]{
  color:#DCE8FF !important;
}
.nav .submenu a.is-current::after,
.nav .submenu a[aria-current="page"]::after{
  content:"•";
  margin-left:.45em;
  font-weight:800;
  color:#AFC6FF;
}

/* Temporary debug outline to prove matching (remove later) */
.current-force{
  outline:2px dashed #7CA1FF;
  outline-offset:3px;
}

.btn{background:var(--accent);color:#fff;padding:12px 18px;border-radius:10px;text-decoration:none;display:inline-block;font-weight:600;box-shadow:0 6px 24px rgba(77,134,255,.25)}
.btn:hover{filter:brightness(1.08)}
.btn-outline{background:transparent;color:#C6D8FF;border:1.5px solid var(--accent)}
.btn-small{padding:8px 12px;border-radius:8px}
.btn-large{padding:14px 22px;font-size:1.1rem;border-radius:12px}

.skip-link{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{left:8px;top:8px;width:auto;height:auto;background:#000;color:#fff;padding:8px 12px;border-radius:6px;z-index:999}

/* ===== HERO (exact same space as old slide4.jpg) ===== */
.hero{
  position:relative;
  isolation:isolate;
  overflow:hidden;       /* clips the media strictly to the hero box */
  height:720px;          /* adjust this if you want a taller/shorter hero */
}

/* Certification buttons (AS9100 / ISO9001) */
.btn-cert {
  background: linear-gradient(135deg, #D4AF37, #F1D36B);
  color: #1a1a1a;
  border: none;
  font-weight: 700;
}

.btn-cert:hover {
  background: linear-gradient(135deg, #C9A52F, #E6C85F);
  color: #000;
}

/* Certification badges (base) */
.badge-link{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 10px 14px;
  border-radius: 999px;

  text-decoration: none;
  font-weight: 700;
  line-height: 1;

  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.18);
  color: #E6ECF2;
}

.badge-link:hover{
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.26);
  color: #fff;
}

/* Gold certification badges */
.badge-link.badge-gold{
  background: linear-gradient(135deg, #D4AF37, #F1D36B);
  border: none;
  color: #1a1a1a;
}

.badge-link.badge-gold:hover{
  background: linear-gradient(135deg, #C9A52F, #E6C85F);
  border: none;
  color: #000;
}


/* Video wrapper that we offset on scroll to look stationary */
.hero-media{
  position:absolute; inset:0;
  z-index:0;
  will-change: transform;
}
.hero-video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  pointer-events:none;

  /* Subtle lift so video reads brighter without washing out */
  filter: brightness(1.06) contrast(1.02);
}

/* Overlay above video — softened */
.hero-overlay{
  position:absolute; inset:0; z-index:1;
  /* Use a gentle uniform dim instead of heavy gradient */
  background: rgba(8,12,22,var(--hero-overlay-opacity));
  /* Prevent extra darkening from blend modes if set elsewhere */
  mix-blend-mode: normal !important;
}

/* Content above overlay (badges guaranteed visible) */
.hero-inner{
  position:relative; z-index:2; color:#EAF1FF;
  display:flex; flex-direction:column; justify-content:flex-end;
  min-height:520px; padding-bottom:24px;
}
.hero h1{font-size:clamp(1.8rem,3.2vw,3rem);max-width:880px;margin:0 0 10px}
.hero .accent{color:#87A9FF}
.hero .subhead{max-width:760px;color:#C9D9F9;margin:0 0 18px}
.cta-row{display:flex;gap:14px;flex-wrap:wrap}
.badges{display:flex;gap:10px;list-style:none;padding:0;margin:16px 0 0}
.badges li{background:transparent;border:none;padding:6px 10px;border-radius:8px;color:#EAF1FF;font-weight:700}

/* ===== Layout / cards ===== */
.grid{display:grid;gap:20px}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}

.card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:18px;box-shadow:0 6px 20px rgba(0,0,0,.25)}
.icon-card{display:flex;flex-direction:column;gap:10px;align-items:flex-start}

.project img{border-radius:12px}
.card-body{padding-top:10px}
.text-link{color:#AFC6FF;text-decoration:none;font-weight:600}
.text-link:hover{color:#D5E3FF}

.split{display:grid;grid-template-columns:1.2fr .8fr;gap:28px;align-items:center}
.checklist{padding-left:18px;color:var(--text)}
.certs{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-start}

/* make cert badges look great as links */
.cert-badge{
  border:1px dashed #7CA1FF;
  color:#CFE0FF;
  padding:10px 12px;
  border-radius:10px;
  background:#0F1930;
  font-weight:700;
  text-decoration:none;         /* keep link styling consistent */
  display:inline-block;         /* ensure clickable area is the whole pill */
}
.cert-badge:hover{
  filter:brightness(1.08);
  border-color:#9ABBFF;
}

.cta-band{background:linear-gradient(135deg,#0b1f53,#2b66ff);color:#fff}
.cta-inner{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:38px 0}
.cta-inner h2{margin:0;font-size:clamp(1.4rem,2.5vw,2rem)}

.site-footer{border-top:1px solid var(--border);padding:36px 0;background:#0A111E;color:#9AA8BA}
.site-footer h3{color:#E6ECF2}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1.2fr;gap:24px}
.footer-links{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.footer-links a{text-decoration:none;color:#A6B5C9}
.footer-links a:hover{color:#D9E6FF}
.center{text-align:center}

/* Cap cards with photo backgrounds */
.cap-card{
  position: relative; overflow: hidden; min-height: 220px;
  display: flex; flex-direction: column; gap: 10px; justify-content: flex-end;
  background:
    linear-gradient(180deg, rgba(10,16,28,0.10), rgba(10,16,28,0.55) 45%, rgba(10,16,28,0.88) 100%),
    var(--cap-img, url('assets/cap-placeholder.jpg')) center/cover no-repeat;
}
.cap-card h3{ color:#EAF1FF; margin-top:auto; }
.cap-card p { color:#C6D8FF; }
.cap-thermoforming { --cap-img: url('assets/cap-thermoforming.webp'); }
.cap-tooling       { --cap-img: url('assets/cap-tooling.webp'); }
.cap-assembly      { --cap-img: url('assets/cap-assembly.webp'); }
.cap-quality       { --cap-img: url('assets/cap-quality.webp'); }

/* Smooth visual transition from hero to next section — lighten a bit */
.hero-fade{
  position:absolute;
  left:0; right:0; bottom:-1px;       /* overlap by 1px to avoid a seam */
  height:120px;                        /* tweak height if you want a longer fade */
  z-index:1;                           /* above video, below text (same layer as overlay) */
  pointer-events:none;
  background: linear-gradient(
    to bottom,
    rgba(11,15,23,0) 0%,
    rgba(11,15,23, calc(var(--hero-fade-strength) * 0.22)) 40%,
    rgba(11,15,23, calc(var(--hero-fade-strength) * 0.58)) 70%,
    var(--bg) 100%
  );
}
/* Ensure hero text stays above the fade */
.hero-inner{ position:relative; z-index:2; }

/* --- Shared submenu styles (Capabilities dropdown) --- */
.nav .has-sub { position: relative; }
.nav .has-sub > .submenu {
  list-style: none; margin: 0; padding: 8px 0;
  position: absolute; left: 0; top: 100%;
  min-width: 240px;
  background: rgba(15,20,32,.98);
  border: 1px solid var(--border, #1E2A40);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  display: none; z-index: 20;
}
.nav .has-sub:hover > .submenu,
.nav .has-sub:focus-within > .submenu { display: block; }
.nav .has-sub > .submenu a {
  display: block; padding: 10px 14px; text-decoration: none;
  color: var(--text, #E6ECF2);
}
.nav .has-sub > .submenu a:hover { background: rgba(77,134,255,.12); }
@media (max-width: 960px){
  .nav .has-sub { position: static; }
  .nav .has-sub > .submenu {
    position: static; display: none; padding: 6px 0;
    box-shadow: none; background: transparent; border: 0;
  }
  .nav .has-sub.open > .submenu { display: block; }
  .nav .has-sub > .submenu a { padding: 8px 0 8px 16px; }
}

/* Responsive */
@media (max-width: 960px){
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .split{grid-template-columns:1fr}
  .cta-inner{flex-direction:column;text-align:center}
}
@media (max-width: 720px){
  .grid-3{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
}

/* tighten gap between Capabilities and Featured Projects */
#capabilities { padding-bottom: 36px; }  /* was 72px via .section */
#projects { padding-top: 36px; }         /* was 72px via .section */

/* optional: slightly tighter on small screens */
@media (max-width: 720px){
  #capabilities { padding-bottom: 28px; }
  #projects { padding-top: 28px; }
}

/* === Overlay fine-tuning by viewport === */
/* Desktop: slightly lighter overlay/fade */
@media (min-width: 900px){
  :root{
    --hero-overlay-opacity: 0.18;
    --hero-fade-strength:   0.40;
  }
}

/* Mobile: keep a hair more contrast for white text */
@media (max-width: 720px){
  :root{
    --hero-overlay-opacity: 0.24;
    --hero-fade-strength:   0.42;
  }
}