/* ==========================================================================
   Zac Veneris Builder — stylesheet
   Claude-Design-based static build. Most layout/appearance is carried by the
   inline styles in index.html (preserved verbatim from the source design).
   This file adds only what inline styles can't do:
     - global base styles (reset, fonts, colours)
     - :hover rules ported from the design's style-hover attributes
     - reveal-on-scroll transitions (driven by js/main.js)
     - the lightbox show/hide + thumbnail active states
     - the mobile-nav base (the paint is driven by js/main.js)
   ========================================================================== */

/* ---- Base (from the design's global <style>) ---- */
* { box-sizing: border-box; }
body {
  margin: 0;
  background: #f4f0e7;
  color: #2c2f31;
  font-family: "Figtree", system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
h1, h2, h3, h4 {
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -.025em;
  margin: 0;
}
p { text-wrap: pretty; }
a { color: #834f2b; text-decoration: none; }
a:hover { color: #5f7168; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid #3f7fb0; outline-offset: 3px; }

/* ---- Hover states (ported from style-hover="...") ---- */
.zv-cta:hover { background: #9d5d38; border-color: #9d5d38; }
.zv-hero-primary:hover { background: #e9e3d6; border-color: #e9e3d6; }
.zv-hero-ghost:hover { background: rgba(244, 240, 231, .14); }
.zv-open:hover .zv-cover-img { transform: scale(1.035); }
.zv-viewgallery:hover { background: #2c2f31; color: #f4f0e7; }
.zv-viewgallery-dark:hover { background: rgba(244, 240, 231, .14); }
.zv-open:hover .zv-thumb-img { transform: scale(1.06); opacity: 1; }
.zv-open:hover .zv-figimg { transform: scale(1.05); }
.zv-contact-link:hover { color: #e0b894; }
.zv-contact-link:hover span { color: #e0b894; }
.zv-submit:hover { background: #834f2b; border-color: #834f2b; }
.zv-lb-close:hover { background: rgba(244, 240, 231, .14); }
.zv-lb-arrow:hover { background: rgba(168, 106, 58, .9); }

/* ---- Reveal on scroll (js/main.js toggles .zv-hide) ---- */
[data-reveal] {
  transition: opacity .9s cubic-bezier(.22, .61, .36, 1),
              transform .9s cubic-bezier(.22, .61, .36, 1);
}
[data-reveal].zv-hide { opacity: 0; transform: translateY(22px); }

/* ---- Lightbox show / hide ---- */
#zv-lightbox[hidden] { display: none; }
#zv-lightbox:not([hidden]) { display: flex; }
.zv-lb-thumb {
  flex: 0 0 auto;
  width: 84px;
  height: 60px;
  padding: 0;
  border: 1px solid rgba(244, 240, 231, .2);
  background: #2c2f31;
  overflow: hidden;
  cursor: pointer;
  border-radius: 2px;
  opacity: .45;
  transition: opacity .2s ease;
}
.zv-lb-thumb.is-active { opacity: 1; }
.zv-lb-thumb img { width: 100%; height: 100%; object-fit: cover; }

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  [data-reveal].zv-hide { opacity: 1; transform: none; }
}

/* ---- Enquiry form: keep the project <select> from overflowing its grid cell ---- */
#zv-form label { min-width: 0; }
#zv-form select { width: 100%; min-width: 0; max-width: 100%; }