/*
Theme Name:   Sonoita Woodcraft
Theme URI:    https://sonoitawoodcraft.com
Author:       Sonoita Woodcraft
Description:  Custom theme for Sonoita Woodcraft — custom cabinetry & bespoke furniture, Sonoita, Arizona.
Version:      1.0.0
Text Domain:  sonoita-woodcraft
*/

/* ==========================================================================
   Brand tokens — same palette/type system used across the mockups
   ========================================================================== */
:root{
  --ink:#2b241f;
  --rawhide:#8b5a34;
  --ember:#cf7f4c;
  --rust-deep:#6b3a20;
  --parchment:#eee4d2;
  --parchment-soft:#f7f2e6;
  --line:rgba(43,36,31,0.16);
}

*{ box-sizing:border-box; }

body{
  margin:0;
  background:var(--parchment);
  background-image:repeating-linear-gradient(135deg, rgba(43,36,31,0.028) 0px, rgba(43,36,31,0.028) 1px, transparent 1px, transparent 15px);
  color:var(--ink);
  font-family:'Karla', sans-serif;
  -webkit-font-smoothing:antialiased;
}

h1, h2, h3{
  font-family:'Roboto Slab', serif;
  margin:0;
  color:var(--ink);
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }

.wrap{ max-width:1180px; margin:0 auto; padding:0 clamp(1.25rem,4vw,3.5rem); }

/* ==========================================================================
   Site nav — solid on inner pages, transparent overlay on the homepage hero
   ========================================================================== */
.site-nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:1.2rem clamp(1rem,4vw,3rem);
  background:var(--ink);
}
.home .site-nav{
  position:absolute; top:0; left:0; right:0; z-index:20;
  background:transparent;
}
.nav-brand{
  display:flex; align-items:center; gap:0.7rem;
  color:#f5efe2; font-family:'Roboto Slab',serif; font-weight:600;
  text-transform:uppercase; letter-spacing:0.05em; font-size:0.95rem;
  text-decoration:none;
}
.nav-mark-wrap img{
  width:34px; height:34px; border-radius:50%;
  background:var(--parchment-soft); padding:6px; object-fit:contain;
}
.nav-links{ display:flex; gap:2.1rem; }
.nav-links a{
  color:#cfc2a8; font-size:0.82rem; font-weight:600; text-decoration:none;
  letter-spacing:0.04em;
}
.nav-links a:hover{ color:#f5efe2; }
@media (max-width:720px){ .nav-links{ display:none; } }

/* ==========================================================================
   Site footer
   ========================================================================== */
.site-footer{ background:var(--ink); color:#cfc2a8; padding:3rem 0 1.5rem; }
.footer-grid{
  display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:2.5rem;
  padding-bottom:2rem; border-bottom:1px solid rgba(245,239,226,0.14);
}
@media (max-width:760px){ .footer-grid{ grid-template-columns:1fr; } }
.footer-brand{
  display:flex; align-items:center; gap:0.7rem;
  font-family:'Roboto Slab',serif; color:#f5efe2; font-size:1.05rem;
  font-weight:600; letter-spacing:0.04em; text-transform:uppercase; margin-bottom:0.8rem;
}
.footer-brand img{ width:36px; height:36px; border-radius:50%; background:var(--parchment-soft); padding:6px; object-fit:contain; }
.footer-col h4{
  font-family:'Karla',sans-serif; text-transform:uppercase; letter-spacing:0.14em;
  font-size:0.72rem; color:var(--ember); margin-bottom:0.9rem; font-weight:700;
}
.footer-col p, .footer-col a, .footer-grid > div p{ font-size:0.9rem; line-height:1.7; color:#cfc2a8; text-decoration:none; margin:0 0 0.4rem; }
.footer-col a:hover{ color:#f5efe2; }
.footer-bottom{ padding-top:1.4rem; font-size:0.76rem; color:#8c7f66; }

/* ==========================================================================
   Homepage sections
   ========================================================================== */
section{ padding:clamp(3.5rem,7vw,6.5rem) clamp(1.25rem,4vw,3.5rem); }

.seal-ring{
  border-radius:50%; background:var(--parchment-soft);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 0 1px rgba(207,127,76,0.5), 0 0 0 5px rgba(20,16,12,0.55), 0 8px 26px rgba(0,0,0,0.45);
}
.seal-ring img{ object-fit:contain; }

.eyebrow{
  font-family:'Karla',sans-serif; text-transform:uppercase; letter-spacing:0.18em;
  font-size:0.72rem; font-weight:700; color:var(--rawhide);
  position:relative; padding-bottom:0.65rem;
}
.eyebrow::after{ content:''; position:absolute; left:0; bottom:0; width:30px; height:0; border-bottom:2px dashed var(--ember); opacity:0.75; }

/* Hero */
.hero{ position:relative; min-height:100vh; display:flex; align-items:flex-end; background:#1c1712; overflow:hidden; }
.hero-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 22%; opacity:0.92; }
.hero-scrim{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(20,16,12,0.25) 0%, rgba(20,16,12,0.35) 45%, rgba(18,14,10,0.94) 100%); }
.hero-content{ position:relative; z-index:2; width:100%; padding:0 clamp(1.25rem,4vw,3.5rem) clamp(3rem,7vw,5.5rem); color:#f5efe2; }
.hero-eyebrow{ display:flex; align-items:center; gap:0.75rem; font-family:'Karla',sans-serif; color:#f5ead9; font-size:0.85rem; letter-spacing:0.22em; text-transform:uppercase; font-weight:700; margin-bottom:1.3rem; text-shadow:0 1px 3px rgba(0,0,0,0.85), 0 2px 14px rgba(0,0,0,0.5); }
.hero-eyebrow::before{ content:''; width:30px; height:2px; background:var(--ember); flex-shrink:0; box-shadow:0 1px 6px rgba(0,0,0,0.4); }
.hero-title{ font-size:clamp(2.8rem,8vw,6.4rem); line-height:0.96; max-width:14ch; color:#f7f1e4; text-shadow:0 2px 24px rgba(0,0,0,0.35); }
.hero-sub{ margin-top:1.4rem; max-width:46ch; font-size:1.08rem; line-height:1.6; color:#e5d9c3; }
.hero-ctas{ margin-top:2.2rem; display:flex; gap:1rem; flex-wrap:wrap; }
.btn{ display:inline-flex; align-items:center; gap:0.5rem; padding:0.9rem 1.6rem; border-radius:2px; font-size:0.82rem; letter-spacing:0.1em; text-transform:uppercase; font-weight:700; text-decoration:none; border:1.5px solid transparent; }
.btn-primary{ background:var(--ember); color:#231b12; }
.btn-ghost{ border-color:rgba(245,239,226,0.55); color:#f5efe2; }
.hero-scroll{ position:absolute; bottom:1.6rem; right:clamp(1.25rem,4vw,3.5rem); z-index:2; color:rgba(245,239,226,0.7); font-size:0.7rem; letter-spacing:0.18em; text-transform:uppercase; display:flex; align-items:center; gap:0.6rem; }
.hero-scroll::after{ content:''; width:1px; height:34px; background:rgba(245,239,226,0.5); }

/* Intro / What We Build */
.intro{ display:grid; grid-template-columns:1.1fr 1fr; gap:3rem; align-items:start; }
@media (max-width:800px){ .intro{ grid-template-columns:1fr; } }
.intro h2{ font-size:clamp(1.7rem,3vw,2.3rem); line-height:1.2; color:var(--rust-deep); margin-top:0.4rem; }
.intro p{ font-size:1.02rem; line-height:1.7; color:#4a3f34; margin-top:1.1rem; }
.value-pills{ display:flex; flex-direction:column; gap:1.1rem; }
.pill{ display:flex; gap:1rem; padding:1.1rem 1.3rem; background:var(--parchment-soft); border:1px solid var(--line); border-left:3px solid var(--ember); }
.pill b{ display:block; font-family:'Roboto Slab',serif; font-size:0.98rem; margin-bottom:0.2rem; }
.pill span{ font-size:0.9rem; color:#5a4d3f; line-height:1.5; }

/* Divider */
.divider{ display:flex; align-items:center; gap:1rem; max-width:1180px; margin:0 auto; padding:0 clamp(1.25rem,4vw,3.5rem); }
.divider::before, .divider::after{ content:''; flex:1; height:1px; background:var(--line); }
.divider-mark{ width:38px; height:38px; border-radius:50%; background:var(--parchment-soft); padding:6px; object-fit:contain; box-shadow:0 0 0 1px rgba(207,127,76,0.5), 0 0 0 4px rgba(43,36,31,0.16); }

/* The Craft */
.craft-head{ display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:1rem; margin-bottom:2.6rem; }
.craft-head h2{ font-size:clamp(1.9rem,3.4vw,2.6rem); margin-top:0.4rem; }
.craft-head p{ max-width:34ch; font-size:0.95rem; color:#5a4d3f; line-height:1.6; }
.craft-row{ display:grid; grid-template-columns:repeat(5,1fr); gap:1.1rem; }
@media (max-width:980px){ .craft-row{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .craft-row{ grid-template-columns:1fr; } }
.craft-card{ background:#fff; border:1px solid var(--line); position:relative; }
.craft-card figure{ margin:0; aspect-ratio:4/5; overflow:hidden; background:#000; }
.craft-card img{ width:100%; height:100%; object-fit:cover; }
.craft-num{ font-family:'Roboto Slab',serif; font-weight:700; color:var(--ember); font-size:1.4rem; position:absolute; margin-top:-2.6rem; margin-left:0.9rem; text-shadow:0 2px 10px rgba(0,0,0,0.6); }
.craft-body{ padding:1.1rem 1.1rem 1.4rem; }
.craft-body h3{ font-size:1.02rem; margin-bottom:0.4rem; }
.craft-body p{ font-size:0.85rem; line-height:1.5; color:#5a4d3f; margin:0; }

/* Build Yours */
.build-section{ background:var(--ink); color:var(--parchment-soft); }
.build-head{ text-align:center; max-width:640px; margin:0 auto 3.2rem; }
.build-head .eyebrow{ color:var(--ember); }
.build-head h2{ color:#f5efe2; font-size:clamp(1.9rem,3.6vw,2.7rem); margin-top:0.5rem; }
.build-head p{ color:#cfc2a8; font-size:0.98rem; line-height:1.65; margin-top:1rem; }
.trail{ display:flex; justify-content:center; flex-wrap:wrap; gap:0; }
.trail-step{ flex:1; min-width:180px; max-width:250px; text-align:center; padding:0 1rem; position:relative; }
.trail-step + .trail-step::before{ content:'\2192'; position:absolute; left:-0.4rem; top:2.1rem; color:var(--ember); font-size:1.1rem; opacity:0.7; }
@media (max-width:780px){ .trail{ flex-direction:column; align-items:center; } .trail-step{ max-width:320px; } .trail-step + .trail-step::before{ content:'\2193'; left:50%; top:-1.5rem; transform:translateX(-50%); } }
.trail-icon{ width:64px; height:64px; margin:0 auto 1rem; border-radius:50%; background:linear-gradient(160deg,#3a2f24,#241d16); border:1.5px solid rgba(207,127,76,0.4); display:flex; align-items:center; justify-content:center; font-family:'Roboto Slab',serif; font-weight:700; font-size:1.25rem; color:var(--ember); }
.trail-step h3{ font-family:'Roboto Slab',serif; color:#f5efe2; font-size:0.98rem; margin-bottom:0.5rem; }
.trail-step p{ font-size:0.82rem; color:#b6a98c; line-height:1.5; margin:0; }
.build-note{ text-align:center; margin-top:3rem; }

/* Transformation */
.transform-head{ text-align:center; max-width:600px; margin:0 auto 3rem; }
.transform-head h2{ font-size:clamp(1.9rem,3.4vw,2.6rem); margin-top:0.5rem; }
.transform-head p{ font-size:0.98rem; color:#5a4d3f; margin-top:1rem; line-height:1.6; }
.transform-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; align-items:center; }
@media (max-width:760px){ .transform-grid{ grid-template-columns:1fr; } }
.transform-card{ position:relative; }
.transform-card figure{ margin:0; overflow:hidden; aspect-ratio:4/3; }
.transform-card img{ width:100%; height:100%; object-fit:cover; }
.transform-label{ position:absolute; top:0.9rem; left:0.9rem; background:var(--ink); color:#f5efe2; font-size:0.7rem; letter-spacing:0.14em; text-transform:uppercase; font-weight:700; padding:0.4rem 0.8rem; }

/* About */
.about{ position:relative; color:#f5efe2; background:#1c1712; }
.about-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0.5; }
.about-scrim{ position:absolute; inset:0; background:linear-gradient(100deg, rgba(15,12,9,0.92) 0%, rgba(15,12,9,0.75) 55%, rgba(15,12,9,0.4) 100%); }
.about-content{ position:relative; z-index:2; max-width:640px; }
.about h2{ color:#f7f1e4; font-size:clamp(1.9rem,3.6vw,2.7rem); margin-top:0.6rem; }
.about p{ font-size:1.02rem; line-height:1.75; color:#e5d9c3; margin-top:1.2rem; }
.about-sig{ margin-top:2rem; font-family:'Roboto Slab',serif; font-weight:700; font-size:1.1rem; color:var(--ember); }

/* ==========================================================================
   Configurator page
   ========================================================================== */
.config-hero{ position:relative; min-height:46vh; display:flex; align-items:flex-end; overflow:hidden; background:#1c1712; }
.config-hero-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 35%; }
.config-hero-scrim{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(20,16,12,0.2) 0%, rgba(18,14,10,0.88) 100%); }
.config-hero-content{ position:relative; z-index:2; padding:2.4rem clamp(1rem,4vw,3rem) 2.6rem; color:#f5efe2; max-width:720px; }
.config-hero-content h1{ font-size:clamp(2rem,4.5vw,3rem); color:#f7f1e4; line-height:1.05; text-shadow:0 2px 20px rgba(0,0,0,0.4); }
.config-hero-content p{ margin-top:1rem; font-size:1.02rem; line-height:1.6; color:#e5d9c3; max-width:56ch; }

.wizard-wrap{ max-width:820px; margin:0 auto; padding:2.8rem clamp(1rem,4vw,2rem) 5rem; }
.card{ background:#fff; border:1px solid var(--line); border-radius:12px; padding:1.6rem 1.8rem; }

.breadcrumb{ display:flex; flex-wrap:wrap; gap:0.5rem; margin-bottom:1.8rem; }
.crumb{ background:var(--parchment-soft); border:1px solid var(--line); border-radius:20px; padding:0.4rem 0.9rem; font-size:0.8rem; display:flex; align-items:center; gap:0.5rem; }
.crumb b{ color:var(--rust-deep); }
.crumb button{ border:none; background:none; color:var(--rawhide); font-size:0.72rem; font-weight:700; cursor:pointer; text-decoration:underline; }

.step-title{ font-size:0.82rem; text-transform:uppercase; letter-spacing:0.12em; color:var(--rawhide); font-weight:700; margin-bottom:1rem; }
.opt-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:0.9rem; margin-bottom:1.6rem; }
.opt-card{ background:#fff; border:1.5px solid var(--line); border-radius:10px; padding:1.1rem 1.2rem; cursor:pointer; text-align:left; font-family:'Karla',sans-serif; transition:border-color 0.15s ease, transform 0.1s ease; }
.opt-thumb{ width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:6px; margin-bottom:0.8rem; border:1px solid var(--line); }
.opt-card:hover{ border-color:var(--rawhide); transform:translateY(-1px); }
.opt-card b{ display:block; font-size:1rem; margin-bottom:0.35rem; color:var(--ink); }
.opt-card span{ font-size:0.8rem; color:#8c7f66; }

.toggle-chip{ background:#fff; border:1.5px solid var(--line); border-radius:20px; padding:0.65rem 1.2rem; cursor:pointer; font-size:0.88rem; font-weight:600; display:inline-flex; align-items:center; gap:0.5rem; margin:0 0.6rem 0.6rem 0; }
.toggle-chip.on{ border-color:var(--rawhide); background:var(--parchment-soft); color:var(--rust-deep); }
.toggle-chip input{ width:55px; margin-left:0.4rem; font-family:'Karla',sans-serif; padding:0.3rem; border:1px solid var(--line); border-radius:4px; }
.continue-btn{ background:var(--ink); color:#f5efe2; border:none; border-radius:6px; padding:0.7rem 1.4rem; font-size:0.85rem; font-weight:700; cursor:pointer; }

.price-panel{ background:var(--ink); color:#f5efe2; border-radius:12px; padding:1.8rem 2rem; margin-top:0.4rem; }
.price-panel label{ font-size:0.78rem; text-transform:uppercase; letter-spacing:0.1em; color:#cfc2a8; }
.price-panel input{ width:110px; margin-left:0.7rem; font-family:'Karla',sans-serif; padding:0.4rem 0.5rem; border:1px solid rgba(245,239,226,0.3); border-radius:6px; background:rgba(245,239,226,0.08); color:#f5efe2; }
.price-grid{ display:flex; gap:2.2rem; margin-top:1.3rem; flex-wrap:wrap; }
.price-grid div b{ display:block; font-size:1.5rem; font-family:'Roboto Slab',serif; }
.price-grid div span{ font-size:0.74rem; color:#cfc2a8; text-transform:uppercase; letter-spacing:0.07em; }
.price-grid .grand b{ color:var(--ember); font-size:1.9rem; }

.restart{ margin-top:1.5rem; background:none; border:1px solid var(--line); color:#5a4d3f; padding:0.55rem 1.1rem; border-radius:6px; font-size:0.82rem; font-weight:700; cursor:pointer; }
.disclaimer{ text-align:center; font-size:0.78rem; color:#8c7f66; margin-top:1.2rem; }

/* Section-by-section styles (hero, craft cards, configurator teaser, etc.)
   will be added as each template is built, so this file stays in sync with
   what's actually on the page rather than growing speculative CSS up front. */