/*
Theme Name: Carpenter Client
Description: Custom theme for the Panowie Stolarze website.
Version: 0.2.0
Text Domain: carpenter-client
*/

:root {
  color-scheme: light;
  --paper: #f2ede4;
  --cream: #fcf9f3;
  --white: #fff;
  --ink: #28251f;
  --muted: #716b62;
  --oak-dark: #734a2b;
  --line: rgb(40 37 31 / 18%);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--cream); }
a { color: inherit; }
img { display: block; max-width: 100%; }
button, input, textarea { font: inherit; }
.site-shell { width: min(100% - 3rem, 76rem); margin-inline: auto; }
.site-main { min-height: 70vh; }
.site-header { position: sticky; z-index: 20; top: 0; border-bottom: 1px solid var(--line); background: rgb(255 255 255 / 94%); backdrop-filter: blur(14px); }
.site-header__inner { display: flex; min-height: 4.75rem; align-items: center; gap: 2rem; }
.site-title { margin: 0; font-size: 1.25rem; font-weight: 800; letter-spacing: -.04em; text-decoration: none; }
.site-title span { color: var(--oak-dark); }
.site-nav { display: flex; gap: 1.5rem; margin-left: auto; }
.site-nav a, .header-phone { font-size: .88rem; font-weight: 700; text-decoration: none; }
.site-nav a:hover, .site-nav a:focus-visible, .header-phone:hover, .header-phone:focus-visible { color: var(--oak-dark); }
.header-phone { border-left: 1px solid var(--line); padding-left: 2rem; }
.menu-toggle { display: none; width: 2.75rem; height: 2.75rem; flex: 0 0 auto; align-content: center; justify-items: center; gap: .3rem; border: 0; padding: .6rem; color: var(--ink); background: transparent; cursor: pointer; }
.menu-toggle span { display: block; width: 1.35rem; height: 2px; background: currentColor; transition: transform .2s ease, opacity .2s ease; }
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(.4rem) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-.4rem) rotate(-45deg); }
.site-footer { border-top: 1px solid var(--line); padding-block: 2rem; background: var(--white); }
.site-footer__grid { display: grid; grid-template-columns: 1fr 2fr 1fr; align-items: center; gap: 2rem; color: var(--muted); font-size: .82rem; }
.site-footer__grid p { margin: 0; }
.site-footer__grid p:last-child { text-align: right; }

h1, h2, h3, blockquote { font-family: Georgia, "Times New Roman", serif; font-weight: 400; }
h1 { max-width: 13ch; margin: 0; font-size: clamp(3rem, 6.6vw, 6.7rem); line-height: .95; letter-spacing: -.058em; }
h2 { margin: 0; font-size: clamp(2.2rem, 4.2vw, 4.4rem); line-height: 1.03; letter-spacing: -.048em; }
h3 { font-size: 1.65rem; }
.eyebrow { margin: 0 0 1rem; color: var(--oak-dark); font-size: .72rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.lead { max-width: 38rem; color: var(--muted); font-size: clamp(1.05rem, 1.5vw, 1.3rem); line-height: 1.65; }
.section { width: min(100% - 3rem, 76rem); margin-inline: auto; padding-block: clamp(4.5rem, 9vw, 8rem); scroll-margin-top: 5rem; }
.section-heading { display: grid; grid-template-columns: minmax(10rem, .6fr) 2fr; gap: 3rem; margin-bottom: 4rem; }
.section-heading .eyebrow { padding-top: .6rem; }
.actions { display: flex; align-items: center; gap: 1.5rem; margin-top: 2rem; flex-wrap: wrap; }
.button { display: inline-flex; min-height: 3.4rem; align-items: center; justify-content: center; border: 0; padding: .9rem 1.4rem; font-weight: 800; text-decoration: none; cursor: pointer; }
.button--dark { color: var(--white); background: var(--ink); }
.button--wood { color: var(--white); background: var(--oak-dark); }
.button:hover, .button:focus-visible { filter: brightness(1.12); }
.text-link { font-weight: 750; text-underline-offset: .3rem; }

.hero, .trust-strip { width: min(100% - 3rem, 76rem); margin-inline: auto; }
.hero { display: grid; min-height: calc(100vh - 4.75rem); grid-template-columns: 1.08fr .92fr; }
.hero__copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(3rem, 7vw, 8rem); background: var(--paper); }
.hero__media { position: relative; display: flex; min-height: 42rem; align-items: flex-end; overflow: hidden; padding: 1.5rem; color: var(--white); background: linear-gradient(140deg, #c1aa86, #6a6256 56%, #343531); }
.hero__media::before, .project-placeholder::before { position: absolute; inset: 0; content: ''; opacity: .32; background: repeating-linear-gradient(90deg, transparent 0 13%, rgb(255 255 255 / 22%) 13% 13.4%); }
.hero__media span, .project-placeholder span { position: relative; z-index: 1; }
.trust-strip { display: grid; grid-template-columns: repeat(4, 1fr); border-block: 1px solid var(--line); background: var(--white); }
.trust-strip span { border-right: 1px solid var(--line); padding: 1.4rem; text-align: center; font-size: .82rem; font-weight: 750; }

.service-list { border-top: 1px solid var(--line); }
.service-list article { display: grid; grid-template-columns: 5rem 1fr 1.3fr; align-items: baseline; gap: 2rem; border-bottom: 1px solid var(--line); padding: 2rem 0; }
.service-list article > span { color: var(--oak-dark); }
.service-list h3, .service-list p { margin: 0; }
.service-list p { color: var(--muted); line-height: 1.7; }

.project-feature { display: grid; width: 100%; grid-template-columns: minmax(0, 1.1fr) minmax(20rem, .75fr); gap: 2rem; margin-inline: 0; padding-inline: max(1.5rem, calc((100vw - 76rem) / 2)); background: var(--white); }
.project-placeholder { position: relative; display: flex; min-height: 38rem; align-items: flex-end; overflow: hidden; padding: 1.25rem; color: var(--white); background: linear-gradient(135deg, #baa17d, #71675b 52%, #373733); }
.project-placeholder--wide { min-height: 24rem; grid-column: 1 / -1; }
.project-feature__copy { align-self: center; padding: 2rem; }
.project-feature__copy p:not(.eyebrow) { color: var(--muted); line-height: 1.7; }

.process-list { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0; border-block: 1px solid var(--line); padding: 0; list-style: none; }
.process-list li { display: grid; min-height: 11rem; align-content: space-between; border-right: 1px solid var(--line); padding: 1.5rem; }
.process-list b { color: var(--oak-dark); }
.testimonial { text-align: center; }
.testimonial blockquote { max-width: 55rem; margin: 0 auto 1.5rem; font-size: clamp(2rem, 3.8vw, 4rem); line-height: 1.14; }
.testimonial p { color: var(--muted); }
.contact { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(3rem, 8vw, 8rem); padding: clamp(4rem, 8vw, 8rem) max(1.5rem, calc((100vw - 76rem) / 2)); scroll-margin-top: 5rem; background: var(--paper); }
.contact__copy h2 { max-width: 35rem; }
.contact__phone { display: inline-block; margin-top: 2rem; font-family: Georgia, serif; font-size: 1.7rem; }
.quote-form { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-trap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.form-notice { grid-column: 1 / -1; margin: 0; border-left: .25rem solid currentColor; padding: .9rem 1rem; background: rgb(255 255 255 / 65%); }
.form-notice--success { color: #315e39; }
.form-notice--error { color: #8a302b; }
.quote-form label { display: grid; gap: .4rem; font-size: .76rem; font-weight: 750; }
.quote-form label:nth-of-type(4), .quote-form .consent, .quote-form .button { grid-column: 1 / -1; }
.quote-form input, .quote-form textarea { width: 100%; border: 1px solid var(--line); border-radius: 0; padding: 1rem; color: var(--ink); background: rgb(255 255 255 / 72%); }
.quote-form .consent { display: flex; align-items: flex-start; font-weight: 400; }
.quote-form .consent input { width: auto; }

@media (max-width: 800px) {
  .site-shell, .section, .hero, .trust-strip { width: min(100% - 2rem, 76rem); }
  .site-header__inner { position: relative; gap: .75rem; }
  .site-nav { position: absolute; top: 100%; right: -1rem; left: -1rem; display: none; margin: 0; border-top: 1px solid var(--line); padding: .5rem 1rem 1rem; background: rgb(255 255 255 / 98%); box-shadow: 0 1rem 2rem rgb(40 37 31 / 12%); }
  .site-nav.is-open { display: grid; }
  .site-nav a { padding: .9rem .25rem; border-bottom: 1px solid var(--line); font-size: 1rem; }
  .header-phone { margin-left: auto; border: 0; padding-left: 0; font-size: .76rem; }
  .menu-toggle { display: grid; }
  .site-footer__grid, .hero, .section-heading, .service-list article, .project-feature, .contact { grid-template-columns: 1fr; }
  .site-footer__grid p:last-child { text-align: left; }
  .hero__copy { min-height: 70vh; padding: 4rem 1rem; }
  .hero__media { min-height: 27rem; }
  .trust-strip { grid-template-columns: 1fr 1fr; }
  .section-heading, .service-list article { gap: 1rem; }
  .project-feature { padding-inline: 1rem; }
  .project-placeholder--wide { grid-column: auto; }
  .process-list { grid-template-columns: 1fr 1fr; }
  .quote-form { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .site-title { font-size: 1.05rem; }
  .header-phone { max-width: 8rem; text-align: right; }
  .trust-strip, .process-list { grid-template-columns: 1fr; }
  .trust-strip span, .process-list li { border-right: 0; border-bottom: 1px solid var(--line); }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .menu-toggle span { transition: none; } }