/*
Theme Name: California House Works
Author: SloughHand
Description: Custom theme for California House Works.
Version: 0.0.1
Text Domain: ca-house-works
*/

@font-face {
  font-family: "Neutraface 2 Display";
  src: url("fonts/Neutra2Display-Bold.woff2") format("woff2"),
       url("fonts/Neutra2Display-Bold.woff")  format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Neutraface 2 Text";
  src: url("fonts/Neutra2Text_book.woff2") format("woff2"),
       url("fontsNeutra2Text_book.woff")  format("woff");
  font-weight: 400;   /* Text Book — body */
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Neutraface 2 Text";
  src: url("fonts/Neutra2TextTT-Demi.woff2") format("woff2"),
       url("fonts/Neutra2TextTT-Demi.woff")  format("woff");
  font-weight: 600;   /* Text Demi — UI */
  font-style: normal;
  font-display: swap;
}

:root {
  /* Canvas */
  --cream: #F4EFE3;

  /* Walnut / Brown — STRUCTURE */
  --walnut-100: #966E67; --walnut-300: #714E48; --walnut-500: #4E322D;
  --walnut-700: #35211D; --walnut-900: #1F120F;
  /* Sage / Green — CLIMATE */
  --sage-100: #C5CEA8; --sage-300: #A7B47F; --sage-500: #8A9A5B;
  --sage-700: #647240; --sage-900: #414D27;
  /* Peacock / Teal — WATER */
  --peacock-100: #72B1B6; --peacock-300: #388C92; --peacock-500: #006A71;
  --peacock-700: #004B51; --peacock-900: #002D31;
  /* Copper — ELECTRICAL */
  --copper-100: #E3A380; --copper-300: #D17C4D; --copper-500: #C05A22;
  --copper-700: #8C4016; --copper-900: #5E2A0D;
  /* Brass / Gold */
  --brass-100: #EAD99D; --brass-300: #DFC46A; --brass-500: #D4AF37;
  --brass-700: #9E8224; --brass-900: #6B5716;

  /* Working ink roles */
  --ink: var(--walnut-500);       
  --ink-deep: var(--walnut-700);  
  --header-ink: var(--peacock-500);
  --accent: var(--copper-500);    

  /* Signature dark ground */
  --coffee: var(--walnut-900);    

  /* Line & form */
  --stroke: 3px;                  
  --rule: 1px;                    

  /* Radius scale */
  --radius-frame: 2px;            
  --radius-control: 6px;          

  /* Datum / keyline colors */
  --datum: var(--walnut-300);     
  --datum-dark: var(--brass-700); 

  /* Type */
	--display: "Neutraface 2 Display", "Century Gothic", "Futura", "Twentieth Century", "URW Geometric", "Avenir Next", system-ui, sans-serif;
	--text: "Neutraface 2 Text", "Avenir Next", "Avenir", "Segoe UI", system-ui, sans-serif;

  /* Spacing scale */
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 40px; --s5: 64px; --s6: 96px;

  /* Layout */
  --maxw: 1120px;
}

/* RESET / BASE */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--cream); color: var(--ink);
  font-family: var(--text); font-size: 17px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 {
  font-family: var(--display); font-weight: 700; line-height: 1.1;
  margin: 0 0 var(--s2); letter-spacing: .01em;
}
p { margin: 0 0 var(--s2); }
a { color: var(--header-ink); text-underline-offset: 3px; }
img { max-width: 100%; display: block; }

/* FOCUS STATES */
a:focus-visible, button:focus-visible, .btn:focus-visible {
  outline: 2px solid var(--header-ink);
  outline-offset: 2px;
  border-radius: var(--radius-frame);
}
.chw-header :focus-visible, .chw-footer :focus-visible {
  outline-color: var(--brass-500);
}

/* TYPE SCALE */
.display-hero { font-size: clamp(2.6rem, 6vw, 4.4rem); letter-spacing: .02em; }
.eyebrow {
  font-family: var(--text); font-weight: 600; text-transform: uppercase;
  letter-spacing: .18em; font-size: .72rem; color: var(--header-ink);
  margin: 0 0 var(--s1);
}
.lede { font-size: 1.2rem; color: var(--ink-deep); max-width: 60ch; }

/* HEADER */
.chw-header {
  position: sticky; top: 0; z-index: 40; background: var(--coffee); color: var(--cream);
}
.chw-header .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--s4); }
.chw-lockup { height: 60px; width: auto; display: block; }
.h-top { display: flex; align-items: center; justify-content: space-between; padding: var(--s3) 0; }
.phone-cta {
  font-family: var(--text); font-weight: 700; font-size: .95rem;
  background: var(--copper-500); color: var(--cream); text-decoration: none;
  padding: 12px 22px; border-radius: var(--radius-control); letter-spacing: .02em;
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  transition: background .12s ease, transform .12s ease;
}
.phone-cta:hover { background: var(--copper-700); transform: translateY(-1px); }
.h-datum { height: var(--rule); background: var(--brass-700); width: 100%; }

/* HERO SECTION */
.section-inner { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--s3); }
.hero { padding: var(--s6) 0 var(--s5); border-top: var(--rule) solid var(--datum); }
.hero h1 { max-width: 16ch; color: var(--ink); }

/* FOOTER */
.chw-footer {
  background: var(--coffee); color: var(--cream);
  padding: var(--s5) var(--s3) var(--s4); border-top: var(--rule) solid var(--datum-dark);
}
.chw-footer .grid {
  max-width: var(--maxw); margin: 0 auto; display: grid;
  grid-template-columns: 1.5fr 1fr 1fr; gap: 0;
}
.chw-footer .grid > * { padding: 0 var(--s4); }
.chw-footer .grid > * + * { border-left: var(--rule) solid var(--datum-dark); }
.chw-footer .grid > *:first-child { padding-left: 0; }
.chw-footer h4 {
  color: var(--brass-500); font-size: .78rem; text-transform: uppercase;
  letter-spacing: .16em; margin-bottom: var(--s2);
}
.chw-footer a {
  color: var(--cream); text-decoration: none; display: block;
  margin-bottom: 8px; font-size: .92rem;
}
.chw-footer a:hover { color: var(--brass-300); }
.chw-footer .area { font-size: .92rem; line-height: 1.8; }
.chw-footer .lic { margin-top: var(--s3); font-size: .78rem; color: var(--sage-300); letter-spacing: .04em; }
.chw-footer .foot-lockup { height: 64px; width: auto; margin-bottom: var(--s3); }

/* RESPONSIVE */
@media(max-width: 820px) {
  .chw-footer .grid { grid-template-columns: 1fr; }
  .chw-footer .grid > * + * { border-left: none; border-top: var(--rule) solid var(--datum-dark); padding-top: var(--s3); }
  .chw-footer .grid > * { padding: 0; }
  .chw-header .wrap { padding: 0 var(--s2); }
}

/* ==== PLACEHOLDER ADDITIONS (v1.0 landing) ==== */

/* Phone CTA arrow glyph (header + hero) */
.phone-cta .arrow::after { content: "\2192"; }

/* Hero button — copper CTA on cream (brief §5: Burnt Copper is CTAs only) */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--text); font-weight: 700; letter-spacing: .02em;
  text-decoration: none; padding: 14px 26px; border-radius: var(--radius-control);
  transition: background .12s ease, transform .12s ease; white-space: nowrap;
}
.btn-primary { background: var(--copper-500); color: var(--cream); }
.btn-primary:hover { background: var(--copper-700); transform: translateY(-1px); }

/* Hero: give the single section real vertical loft so the page doesn't collapse */
.hero { padding-bottom: calc(var(--s6) + var(--s4)); }
.hero .lede { margin-top: var(--s3); }
.hero-actions { margin-top: var(--s4); display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.hero-note { font-size: .95rem; color: var(--walnut-300); margin: 0; max-width: 46ch; }

/* Chrome has no mobile header here — stack lockup over the phone CTA on narrow screens */
@media(max-width: 560px) {
  .h-top { flex-direction: column; align-items: flex-start; gap: var(--s2); }
  .chw-lockup { height: 46px; }
  .hero-actions { gap: var(--s2); }
}