/* ===== WRC — Wadi Al Rehan Carpentry =====
   Implemented from Claude Design: WRC.dc.html
   Fonts: Archivo (headings) + Hanken Grotesk (body). Warm wood-tone palette. */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  margin: 0;
  font-family: "Hanken Grotesk", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  color: #20180f;
  background: #fffdf9;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, iframe { display: block; max-width: 100%; }
a { text-decoration: none; }
::selection { background: #d98a2b; color: #fff; }
input:focus, select:focus, textarea:focus { outline: 2px solid #d98a2b; outline-offset: 1px; border-color: #d98a2b !important; }

/* ===== Animations ===== */
@keyframes wrcHeroZoom { from { transform: scale(1.1); } to { transform: scale(1); } }
@keyframes wrcWaPulse { 0% { transform: scale(1); opacity: .55; } 70% { transform: scale(1.7); opacity: 0; } 100% { opacity: 0; } }

/* ===== Hover effects ===== */
[data-wafab]:hover { transform: scale(1.07); }
.product-card:hover .product-img { transform: scale(1.06); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-hero-img] { animation: none !important; }
  [data-wafab] span[data-pulse] { animation: none !important; }
}

/* ===== Mobile (≤880px) ===== */
@media (max-width: 880px) {
  [data-utilbar] { display: none !important; }
  [data-nav] {
    position: fixed; top: 64px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0 !important;
    background: #fffdf9; border-bottom: 1px solid #e4d8c7;
    padding: 8px 0; box-shadow: 0 24px 48px rgba(20,15,9,.16);
    transform: translateY(-135%); transition: transform .26s ease; pointer-events: none;
  }
  [data-nav][data-open="true"] { transform: none; pointer-events: auto; }
  [data-nav] > a { padding: 15px 24px !important; border-top: 1px solid #efe6d8; }
  [data-nav] > a:first-child { border-top: none; }
  [data-navcta] { margin: 10px 24px 6px !important; text-align: center; }
  [data-navtoggle] { display: inline-flex !important; }
  [data-stack] { grid-template-columns: 1fr !important; }
  [data-mobilebar] { display: grid !important; }
  [data-wafab] { display: none !important; }
  body { padding-bottom: 56px; }
}