/* =====================================================
   Gigglezen — Frontend fixes overlay
   Loaded LAST. Surgical fixes for reported issues:
   - Dark vignette + overlay flickering on scroll
   - Image aspect-ratio inconsistencies
   - Contact / careers form mobile polish
   - Service detail card alignment
   - Defensive z-index ordering
   ===================================================== */

/* ============================ BACKDROP DARK OVERLAY ============================
   The .vignette was rgba(0,0,0,.5) at the edges — too dark, contributes to the
   "black overlay flickering" complaint. Lighten it dramatically. Also tame the
   .spotlight follow-mouse effect so it doesn't pulse the screen.
   ============================================================================ */
.vignette {
  background: radial-gradient(ellipse at center,
              transparent 60%,
              rgba(184,147,45,.05) 90%,
              rgba(10,6,6,.12) 100%) !important;
}

/* Disable the JS-driven letterbox bars entirely. They were the main source
   of the "dark overlay flickering on scroll" complaint. The JS now sets
   --letterbox: 0 always, but belt-and-braces here too. */
.letterbox .lb {
  display: none !important;
}

/* Cap focus-blur to never exceed 0.5px regardless of JS state.
   Full-page CSS blur is expensive AND was visually disturbing. */
.bg-field {
  filter: blur(min(var(--focus-blur, 0px), 0.5px)) !important;
}

/* Tone down the .spotlight cursor-follower on smaller screens
   where it adds compositing cost with no visual win. */
@media (max-width: 1100px) {
  .spotlight { display: none !important; }
}

/* Tone down the grain texture — was opacity:.10 which is fine on dark
   but reads as visible noise on the cream light theme. */
.grain { opacity: .04 !important; }

/* ============================ Z-INDEX SANITY ============================
   Document the layering hierarchy and enforce it so the popup system,
   chatbot widget, custom cursor and loader don't collide.
   ============================================================================ */
.bg-field    { z-index: -1 !important; }
.letterbox   { z-index: 5 !important; }
.scroll-progress { z-index: 200 !important; }
.nav-wrap    { z-index: 100 !important; }
.cookie      { z-index: 200 !important; }
.gz-popup-host { z-index: 9990 !important; }  /* dynamic-popups.php */
#gz-chatbot, .gz-chatbot-launcher { z-index: 9991; } /* leave room above popups */
.cursor      { z-index: 9998 !important; }
.loader      { z-index: 9999 !important; }

/* ============================ IMAGE SYSTEM =========================
   Standardize aspect ratios + object-fit so images never stretch
   regardless of source dimensions.
   ============================================================================ */
img { max-width: 100%; height: auto; }
img[loading="lazy"] { content-visibility: auto; }

/* Director / team avatars — already CSS-only (initials), but if photo is set
   it goes inside .avatar — keep it perfectly square. */
.avatar img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  border-radius: inherit;
}

/* Service detail page feature cards — keep heights uniform within a row */
.feature-grid > .feature,
.services-grid > .service,
.pricing-grid > .price-card {
  display: flex;
  flex-direction: column;
}
.feature-grid > .feature > *:last-child,
.services-grid > .service .svc-inner > *:last-child {
  margin-top: auto;
}

/* Showcase / portfolio cards — preserve 4:3 aspect so the art block at
   the bottom doesn't get crushed on narrow viewports. */
.show-card { min-height: 340px; }
.port-tile { aspect-ratio: 4 / 3; min-height: 280px; }
.port-tile.tall-tile { aspect-ratio: 4 / 5; }

/* Gallery tiles (careers, employee gallery) — strict squares */
.gallery-tile {
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.gallery-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s cubic-bezier(.2,.7,.2,1);
}
.gallery-tile:hover img { transform: scale(1.04); }

/* Blog card cover thumbnails — consistent 16:9 */
.blog-thumb {
  aspect-ratio: 16 / 9;
  height: auto !important; /* override the 200px in extensions */
  overflow: hidden;
}
.blog-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ============================ CONTACT / CAREERS / NEWSLETTER FORMS ============================
   Fix oversized icons, mobile spacing, button sizing. The contact form's
   submit button was reportedly oversized; the SVG icons on input fields
   ran outside the cinematic palette.
   ============================================================================ */

/* Force form icons (search, send, etc.) to never exceed 16px */
.contact-form svg,
.contact-form .field svg,
.newsletter-form svg,
.news-form svg,
.field svg,
.field-wide svg {
  max-width: 16px;
  max-height: 16px;
  flex-shrink: 0;
}

/* Contact form button — was potentially too tall on mobile */
.contact-form .btn,
form.contact-form button[type="submit"] {
  min-height: 48px;
  max-height: 56px;
  padding: 12px 22px !important;
  font-size: 15px;
}

/* Field padding consistency across all form fields */
.field input,
.field select,
.field textarea {
  padding: 12px 14px !important;
  font-size: 15px;
  line-height: 1.4;
}

/* Mobile: stack contact form fields full-width, comfortable spacing */
@media (max-width: 720px) {
  .contact-form {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .contact-form .field,
  .contact-form .field-wide {
    grid-column: 1 / -1 !important;
  }
  .contact-form .btn {
    width: 100%;
    justify-content: center;
  }
}

/* Newsletter signup in footer — keep button text aligned, icon size sane */
.news input { padding: 10px 14px; font-size: 14px; }
.news button { padding: 10px 18px; font-size: 13px; white-space: nowrap; min-height: 40px; }
.news button svg { max-width: 14px; max-height: 14px; }

/* Honeypot — must stay invisible regardless of stylesheet load order */
input[name*="hp_"],
input[data-honeypot],
.gz-hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Field validation feedback */
.field input:invalid:not(:placeholder-shown),
.field select:invalid:not(:placeholder-shown),
.field textarea:invalid:not(:placeholder-shown) {
  border-color: var(--red);
}
.field input.invalid,
.field select.invalid,
.field textarea.invalid {
  border-color: var(--red) !important;
  background: rgba(194,16,43,.04);
}
.field-error {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  font-family: var(--font-m);
  letter-spacing: .03em;
  color: var(--red);
  min-height: 14px;
}

/* ============================ POPUP / MODAL FIXES ============================
   Ensure popups don't get clipped by overflow:hidden ancestors and stay
   centered on small viewports.
   ============================================================================ */
.gz-popup-host {
  position: fixed !important;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  pointer-events: none;
}
.gz-popup-host[hidden] { display: none !important; }
.gz-popup-host > * { pointer-events: auto; }

@media (max-width: 720px) {
  .gz-popup-host { padding: 12px; align-items: flex-end; }
  .gz-popup-card,
  .gz-popup-host > * { max-width: 100% !important; max-height: 85vh; overflow-y: auto; }
}

/* ============================ SECTION RHYTHM ON MOBILE ============================
   The cinematic section padding (140px top) was excessive on phones —
   gives the impression of "empty space, missing content."
   ============================================================================ */
@media (max-width: 720px) {
  .section { padding-top: 70px !important; padding-bottom: 20px !important; }
  .page-hero { padding: 110px 18px 40px !important; }
  .hero { padding: 110px 18px 30px !important; min-height: auto !important; }
  .contact-sec { padding: 60px 18px !important; }
  .marquee-wrap { padding: 20px 0 50px !important; }

  /* Hero stats — tighter on mobile */
  .hero-stats { gap: 10px !important; margin-top: 30px !important; }
  .hero-stats .stat-card { padding: 14px 14px 12px !important; }
  .hero-stats .num { font-size: 36px !important; }

  /* Contact card padding */
  .contact-card { padding: 24px 18px !important; gap: 24px !important; }
}

/* Phone (very narrow) */
@media (max-width: 380px) {
  .section { padding-top: 56px !important; }
  .hero-title { font-size: clamp(34px, 14vw, 64px) !important; line-height: .98 !important; }
  .hero-eyebrow { font-size: 11px !important; padding: 6px 10px !important; }
}

/* ============================ ABOUT-US: DIRECTORS PHOTO HANDLING ============================
   When admins set a photo for a director, the photo replaces initials.
   Make sure it actually displays properly without breaking the cinematic
   gradient avatar background.
   ============================================================================ */
.leader .avatar {
  position: relative;
  overflow: hidden;
}
.leader .avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

/* ============================ KILL HORIZONTAL OVERFLOW ============================
   Final safety net. Some user-pasted HTML in CMS content (blog body,
   service features) could include wide tables / pre blocks that push
   beyond the viewport. Force these to scroll inside their container.
   ============================================================================ */
.blog-card *, .feature *, .service * {
  max-width: 100%;
}
.blog-body table,
.feature table,
.service table {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.blog-body pre,
.feature pre,
.service pre {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  white-space: pre-wrap;
}

/* ============================ PROCESS RAIL FIX ============================
   Phase numbers were occasionally rendering as transparent text on very
   light backgrounds. Force solid fallback color.
   ============================================================================ */
.phase-num {
  -webkit-text-fill-color: transparent;
}
@supports not (background-clip: text) {
  .phase-num {
    -webkit-text-fill-color: var(--red);
    color: var(--red);
    background: none;
  }
}

/* ============================ SCROLL-PROGRESS REFINEMENT ============================
   The bar at the top of the page should be 2px max and not flicker.
   ============================================================================ */
.scroll-progress {
  height: 2px !important;
  background: linear-gradient(90deg, var(--red), var(--gold));
  box-shadow: none !important;  /* the existing glow was contributing to scroll-jank perception */
}

/* ============================ DEFENSIVE: PRINT ============================
   The site shouldn't print as cinematic dark. Force a clean print sheet.
   ============================================================================ */
@media print {
  .nav-wrap, .footer, .loader, .cursor, .scroll-progress,
  .bg-field, .letterbox, .cookie, .scroll-cue, .gz-popup-host {
    display: none !important;
  }
  body { background: white !important; color: black !important; }
  .glass { background: white !important; border: 1px solid #ddd !important; box-shadow: none !important; }
  .chroma, .em.chroma { color: black !important; -webkit-text-fill-color: black !important; background: none !important; }
}