/*
Theme Name: Wolf Houston
Template: bosch-houston-theme
Description: Wolf Houston child theme of the Houston line. "Black Glass" skin: black glass, brushed stainless, Wolf red knob accents, condensed pro-kitchen type. Loaded after the parent stylesheet.
Version: 1.0.0
Text Domain: wolf-houston
*/

/* ---------- 1. Tokens: Wolf brand palette ---------- */
:root{
  --paper:#F7F7F5;
  --paper-2:#EDEDEA;
  --white:#FFFFFF;
  --ink:#111111;
  --ink-2:#444444;
  --muted:#6E6E6B;
  --line:#D4D4D2;
  --line-dark:#333333;
  --on-dark:#F7F7F5;
  --on-dark-2:#D4D4D2;
  --on-dark-3:#B8B8B6;
  --amber:#C8102E;
  --wf-red:#C8102E;
  --wf-red-deep:#8F0D1B;
  --wf-charcoal:#252525;
  --wf-graphite:#444444;
  --wf-steel:#B8B8B6;
  --wf-steel-2:#D4D4D2;
  --wf-glass:linear-gradient(160deg,#1c1c1c 0%,#111111 55%,#0b0b0b 100%);
  --wf-brushed:repeating-linear-gradient(90deg,#d9d9d7 0 1px,#cfcfcd 1px 2px,#d6d6d4 2px 4px);
  --wf-red-grad:linear-gradient(135deg,#C8102E 0%,#8F0D1B 100%);
  --display:"Barlow Condensed","Arial Narrow",system-ui,sans-serif;
  --body:"Barlow",system-ui,sans-serif;
  --mono:"Barlow Condensed","Arial Narrow",ui-monospace,monospace;
  --r:6px;
}

/* ---------- 2. Base type and geometry: condensed, uppercase labels, crisp corners ---------- */
body{background:var(--paper);font-family:var(--body)}
h1,h2,h3,h4{font-family:var(--display);font-stretch:100%;font-weight:700;letter-spacing:-.005em;line-height:1;text-transform:none}
h1{font-size:clamp(46px,6vw,92px)}
h2{font-size:clamp(36px,4.6vw,64px)}
.kicker,.sec-num,.ticket-head span,.chips a,.zip label,.lrow em{font-family:var(--mono);letter-spacing:.14em;text-transform:uppercase}
.kicker::before{border-radius:50%;box-shadow:inset 0 0 0 4px var(--paper),inset 0 0 0 9px var(--wf-red)}
.dot{background:var(--wf-red);box-shadow:0 0 0 3px rgba(200,16,46,.25)}
.hx-head{background:rgba(255,255,255,.96);border-bottom:1px solid var(--line)}
.btn{border-radius:var(--r);clip-path:none;font-family:var(--display);font-size:17px;letter-spacing:.04em;text-transform:uppercase}
.btn-signal,.btn-primary{background:var(--wf-red-grad);--bg:transparent;color:#fff}
.btn-signal:hover,.btn-primary:hover{filter:brightness(1.08)}
.chips a{border-radius:var(--r)}
.sec-num{border-top:0;position:relative;padding-top:14px}
.sec-num::before{content:"";position:absolute;left:0;top:0;width:100%;height:3px;background:linear-gradient(90deg,var(--wf-red) 0 18%,var(--ink) 18% 100%)}
.is-dark .sec-num::before{background:linear-gradient(90deg,var(--wf-red) 0 18%,var(--wf-graphite) 18% 100%)}
.is-dark{background:var(--wf-glass)}
.county-hero h1 .hx-red{color:var(--wf-red)}
.hx-lead{border-left:3px solid var(--wf-red);padding-left:16px}
.close-band h2{text-transform:none}
.ticket{border-radius:var(--r);border:0;box-shadow:0 30px 70px -30px rgba(0,0,0,.65);overflow:hidden}
.ticket::before,.ticket::after{display:none}
.ticket-head{background:var(--wf-charcoal);border-bottom:3px solid var(--wf-red)}
.ticket-head b{color:#fff;font-family:var(--display);text-transform:uppercase;letter-spacing:.04em}
.ticket-head span{color:var(--wf-steel)}
#schedule-appointment input,#schedule-appointment select,#schedule-appointment textarea{border-radius:var(--r)}
#schedule-appointment button,#schedule-appointment input[type="submit"]{background:var(--wf-red-grad);border-radius:var(--r);text-transform:uppercase;letter-spacing:.06em}
.rail-box{border-radius:var(--r)}
.row:hover,.row.on{background:linear-gradient(90deg,transparent,rgba(200,16,46,.06))}
.contact-fab-toggle{background:var(--wf-red-grad);box-shadow:0 0 0 6px rgba(200,16,46,.18)}

/* ---------- 3. Hero: black glass panel over the kitchen photo ---------- */
.wf-hero{position:relative;color:#fff;background:#111 center/cover no-repeat;border-bottom:4px solid var(--wf-red)}
.wf-hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;padding-top:72px;padding-bottom:72px;align-items:center}
.wf-hero .wrap>*{min-width:0}
.wf-tag{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);letter-spacing:.14em;text-transform:uppercase;font-size:13px;color:var(--wf-steel-2)}
.wf-led{width:9px;height:9px;border-radius:50%;background:var(--wf-red);box-shadow:0 0 12px 2px rgba(200,16,46,.8)}
.wf-hero h1{color:#fff;margin:20px 0 22px}
.wf-hero h1 em{font-style:normal;color:var(--wf-red)}
.wf-hero .lede{color:var(--wf-steel-2);font-family:var(--body);font-weight:400;font-size:19px;line-height:1.55;letter-spacing:0;max-width:560px}
.wf-zip{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.25);border-radius:var(--r);max-width:520px}
.wf-zip label{color:var(--wf-steel);border-right-color:rgba(255,255,255,.2)}
.wf-zip input{color:#fff}
.wf-zip button{background:var(--wf-red-grad);color:#fff;font-family:var(--display);text-transform:uppercase;letter-spacing:.06em}
.wf-hero .zip-note{color:var(--wf-steel)}
.wf-hero .btn-row{margin-top:26px}
.wf-hero .btn-ghost{--fg:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.7)}

/* ---------- 4. NEW: knob panel (categories as control knobs on a stainless range front) ---------- */
.wf-panel{display:grid;grid-template-columns:repeat(3,auto);justify-content:space-between;gap:28px;padding:34px 34px 30px;border-radius:var(--r);background:var(--wf-brushed);box-shadow:inset 0 1px 0 #fff,inset 0 -2px 0 rgba(0,0,0,.08),0 24px 50px -30px rgba(0,0,0,.45);border:1px solid #c4c4c2}
.wf-group{display:grid;gap:16px;align-content:start}
.wf-group-name{font-family:var(--mono);font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2);padding-bottom:8px;border-bottom:1px solid rgba(0,0,0,.18)}
.wf-knobs{display:flex;gap:22px;flex-wrap:wrap}
.wf-knob{display:grid;justify-items:center;gap:8px;width:108px;text-align:center;text-decoration:none;color:var(--ink)}
.wf-knob .dial{width:74px;height:74px;border-radius:50%;position:relative;background:radial-gradient(circle at 35% 30%,#f4f4f2 0,#c9c9c7 45%,#8d8d8b 100%);box-shadow:0 6px 12px -4px rgba(0,0,0,.45),inset 0 -3px 6px rgba(0,0,0,.25),0 0 0 6px rgba(0,0,0,.06);transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.wf-knob .dial::before{content:"";position:absolute;inset:14px;border-radius:50%;background:var(--wf-red-grad);box-shadow:inset 0 2px 4px rgba(255,255,255,.35),inset 0 -2px 4px rgba(0,0,0,.35)}
.wf-knob .dial i{position:absolute;left:50%;top:6px;width:4px;height:16px;margin-left:-2px;border-radius:2px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.2);z-index:1}
.wf-knob b{font-family:var(--display);font-size:18px;font-weight:600;line-height:1.05;text-transform:uppercase;letter-spacing:.03em}
.wf-knob small{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--ink-2)}
.wf-knob:hover .dial,.wf-knob:focus-visible .dial{transform:rotate(135deg)}
.wf-knob:hover b{color:var(--wf-red)}

/* ---------- 5. NEW: fuel and power check ---------- */
.wf-fuel{background-size:cover;background-position:center}
.wf-fuel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.wf-fuel-card{padding:28px 26px;border-radius:var(--r);background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);border-top:3px solid var(--wf-red)}
.wf-fuel-ic{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--wf-red-grad);color:#fff;font-size:22px}
.wf-fuel-card h3{color:#fff;font-size:26px;margin:16px 0 12px;text-transform:uppercase;letter-spacing:.02em}
.wf-fuel-card ul{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.wf-fuel-card li{padding-left:20px;position:relative;color:var(--wf-steel-2);font-size:15.5px}
.wf-fuel-card li::before{content:"";position:absolute;left:0;top:.55em;width:8px;height:8px;border-radius:50%;border:2px solid var(--wf-red)}
.wf-call{margin-top:16px;padding-top:14px;border-top:1px dashed rgba(255,255,255,.2);color:#fff;font-size:15px}

/* ---------- 6. NEW: glass cooktop code lookup ---------- */
.wf-glass{padding:30px;border-radius:var(--r);background:var(--wf-glass);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 30px 60px -36px rgba(0,0,0,.7);position:relative;overflow:hidden}
.wf-glass::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,.07) 0,transparent 28%);pointer-events:none}
.wf-glass-form{display:grid;grid-template-columns:auto 1fr auto;border:1px solid rgba(255,255,255,.22);border-radius:var(--r);overflow:hidden;position:relative;z-index:1}
.wf-glass-form label{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--wf-steel);display:grid;place-items:center;padding:0 16px;border-right:1px solid rgba(255,255,255,.18)}
.wf-glass-form input{background:transparent;border:0;outline:none;color:#fff;font-family:var(--display);font-size:22px;letter-spacing:.06em;padding:14px 16px;min-width:0}
.wf-glass-form button{border:0;background:var(--wf-red-grad);color:#fff;font-family:var(--display);font-size:17px;letter-spacing:.06em;text-transform:uppercase;padding:0 26px}
.wf-burners{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:30px;position:relative;z-index:1}
.wf-burner{aspect-ratio:1;border-radius:50%;display:grid;place-content:center;text-align:center;gap:4px;padding:18%;text-decoration:none;color:#fff;border:2px solid rgba(255,255,255,.18);box-shadow:inset 0 0 0 10px rgba(255,255,255,.03),inset 0 0 0 12px rgba(255,255,255,.12);transition:box-shadow .3s,border-color .3s}
.wf-burner b{font-family:var(--display);font-size:clamp(22px,2.4vw,32px);letter-spacing:.04em}
.wf-burner span{font-size:12.5px;color:var(--wf-steel);line-height:1.3}
.wf-burner:hover{border-color:var(--wf-red);box-shadow:inset 0 0 0 10px rgba(200,16,46,.18),inset 0 0 0 12px var(--wf-red),0 0 30px -6px rgba(200,16,46,.7)}
.wf-all{display:inline-block;margin-top:24px;color:#fff;position:relative;z-index:1}

/* ---------- 7. Visit steps as oven-dial numbers ---------- */
.wf-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:20px;counter-reset:s}
.wf-steps li{padding:24px;border-radius:var(--r);background:#fff;border:1px solid var(--line);position:relative}
.wf-step-dial{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;font-family:var(--display);font-size:24px;color:#fff;background:var(--wf-red-grad);box-shadow:0 0 0 5px var(--wf-steel-2)}
.wf-steps h3{font-size:24px;margin:16px 0 8px;text-transform:uppercase;letter-spacing:.02em}
.wf-steps p{font-size:15.5px;color:var(--ink-2)}

/* ---------- 8. Reused parent blocks, re-skinned ---------- */
.support-desk h2{text-transform:none}
.channel{border-radius:var(--r)}
.models{border:0;background:transparent;gap:18px}
.model{border:1px solid var(--line);border-radius:var(--r);background:#fff}
.voice{border-top:3px solid var(--wf-red)}
.lrow b{font-family:var(--display);font-size:22px;letter-spacing:.02em}
.county{border-radius:var(--r)}
.area-brief-2x2>*{border-radius:var(--r)}
.county-hero{background:var(--wf-glass)}
.hx-cover{border-radius:var(--r)}
.hx-cover-1{background:var(--wf-red-grad);color:#fff}
.hx-cover-2{background:var(--wf-glass);color:#fff}
.hx-cover-3{background:var(--wf-brushed);color:var(--ink);box-shadow:none}
.hx-cover-3::before{background:var(--wf-red)}
.hx-cover .hx-cover-title{font-family:var(--display);text-transform:uppercase;letter-spacing:.02em;font-size:clamp(22px,2vw,28px)}

/* ---------- 9. Responsive ---------- */
@media (max-width:1060px){
  .wf-hero .wrap{grid-template-columns:1fr}
  .wf-panel{grid-template-columns:1fr;justify-content:stretch}
  .wf-fuel-grid,.wf-steps{grid-template-columns:1fr 1fr}
  .wf-burners{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .wf-hero .wrap{padding-top:40px;padding-bottom:44px;gap:32px}
  .wf-panel{padding:22px 16px}
  .wf-knobs{gap:12px}
  .wf-knob{width:92px}
  .wf-knob .dial{width:62px;height:62px}
  .wf-fuel-grid,.wf-steps{grid-template-columns:1fr}
  .wf-glass{padding:20px}
  .wf-glass-form{grid-template-columns:1fr auto}
  .wf-glass-form label{display:none}
  .wf-burners{gap:12px}
}