/*
Theme Name: LG Houston
Template: bosch-houston-theme
Description: LG Houston child theme of the Houston line. "Orbit" skin: warm stone surfaces, graphite ink, one deep LG-style red, thin lines and full circles. The home page lays every LG category out as three rows of photo panels (kitchen, laundry and care, air) that open on hover or focus, followed by a sign guide.
Version: 1.0.0
Text Domain: lg-houston
*/

/* ---------- 1. Tokens ---------- */
:root{
  --paper:#F2F0EC;
  --paper-2:#E7E3DC;
  --white:#FFFFFF;
  --ink:#1D1E22;
  --ink-2:#3A3C43;
  --muted:#6B6A70;
  --line:#D9D4CC;
  --line-dark:#3A3B41;
  --on-dark:#F4F2EE;
  --on-dark-2:#CFCBC4;
  --on-dark-3:#9C9890;
  --lg-red:var(--signal);
  --lg-rose:#FF8FA8;
  --display:"Sora",system-ui,sans-serif;
  --body:"Sora",system-ui,sans-serif;
  --mono:"Fragment Mono",ui-monospace,monospace;
  --r:8px;
  --tile-r:8px;
}

/* ---------- 2. Base ---------- */
body{background:var(--paper);font-family:var(--body)}
h1,h2,h3,h4{font-family:var(--display);font-weight:600;letter-spacing:-.04em;line-height:1.05;text-transform:none}
h1{font-size:clamp(40px,5vw,76px)}
h2{font-size:clamp(30px,3.4vw,50px)}
h3{font-weight:600;letter-spacing:-.02em}
h2.lede{font-family:var(--body);font-weight:400;font-size:clamp(16.5px,1.35vw,19px);line-height:1.65;letter-spacing:0}
h1 em,h2 em{font-style:normal;color:var(--lg-red)}
.kicker,.sec-num,.ticket-head span,.zip label,.lrow em{font-family:var(--mono);letter-spacing:.05em;text-transform:uppercase}
.kicker::before{width:12px;height:12px;border-radius:50%;background:transparent;border:2px solid var(--lg-red);box-shadow:none}
.dot{background:var(--lg-red);box-shadow:0 0 0 4px rgba(196,0,59,.18)}
.hx-head{background:rgba(242,240,236,.95);border-bottom:1px solid var(--line)}
.btn{border-radius:999px;clip-path:none;font-family:var(--body);font-weight:600;letter-spacing:0}
.btn>i{border-radius:0 999px 999px 0}
.btn-signal,.btn-primary{background:var(--lg-red);--bg:var(--lg-red);color:#fff}
.btn-signal:hover,.btn-primary:hover{filter:brightness(1.1)}
.chips a{border-radius:999px}
.sec-num{display:flex;align-items:center;gap:12px}
.sec-num span:first-child{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:50%;border:1.5px solid var(--lg-red);color:var(--lg-red);font-size:12px;background:transparent}
.is-dark{background:var(--ink)}
.is-dark .sec-num span:first-child{border-color:var(--lg-rose);color:var(--lg-rose)}
.is-sunk{background:var(--paper-2)}
.county-hero{background:var(--ink);background-image:radial-gradient(circle at 88% 20%,rgba(196,0,59,.35) 0 18%,transparent 19%),radial-gradient(circle at 88% 20%,transparent 0 30%,rgba(255,255,255,.06) 30.2% 30.6%,transparent 30.8%)}
.county-hero h1 .hx-red{color:var(--lg-rose)}
.hx-lead{border-left:2px solid var(--lg-red);padding-left:16px}
.ticket{border-radius:14px;border:1px solid var(--line);box-shadow:0 30px 60px -30px rgba(0,0,0,.6);background:#fff;overflow:hidden}
.ticket::before,.ticket::after{display:none}
.ticket-head{background:var(--lg-red);border-bottom:0}
.ticket-head b{color:#fff;font-family:var(--display);font-size:20px}
.ticket-head span{color:#FFD5DF}
#schedule-appointment input,#schedule-appointment select,#schedule-appointment textarea{border-radius:var(--r)}
#schedule-appointment button,#schedule-appointment input[type="submit"]{background:var(--lg-red);border-radius:999px}
.rail-box{border-radius:14px;border:1px solid var(--line)}
.row:hover,.row.on{background:rgba(196,0,59,.05)}
.contact-fab-toggle{background:var(--lg-red);box-shadow:0 0 0 6px rgba(196,0,59,.16)}
.bosch-modal-panel{border-radius:14px;border:1px solid var(--line);box-shadow:0 30px 60px -20px rgba(0,0,0,.5)}
.area-brief-2x2>*{border-radius:14px;border:1px solid var(--line);background:#fff}

/* ---------- 3. Hero: graphite with the orbit ---------- */
.lg-hero{position:relative;background:var(--ink);color:var(--on-dark);overflow:hidden}
.lg-hero-orbit{position:absolute;z-index:0;right:-8vw;top:50%;width:min(70vw,980px);aspect-ratio:1;translate:0 -50%;border-radius:50%;border:1px solid rgba(255,255,255,.12)}
.lg-hero-orbit::before{content:"";position:absolute;inset:-7%;border-radius:50%;border:1px solid rgba(196,0,59,.45)}
.lg-hero-orbit::after{content:"";position:absolute;width:16px;height:16px;border-radius:50%;background:var(--lg-red);top:6%;left:20%;box-shadow:0 0 0 6px rgba(196,0,59,.2)}
.lg-hero-photo{position:absolute;inset:9%;border-radius:50%;overflow:hidden}
.lg-hero-photo img{width:100%;height:100%;object-fit:cover;display:block;opacity:.55;z-index:0}
.lg-hero .wrap{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:56px;align-items:center;padding-top:clamp(48px,7vw,104px);padding-bottom:clamp(48px,7vw,104px)}
.lg-tag{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--on-dark-2);border:1px solid var(--line-dark);border-radius:999px;padding:7px 14px}
.lg-hero h1{color:#fff;margin:18px 0 18px}
.lg-hero h1 em{color:var(--lg-rose)}
.lg-hero .lede{color:var(--on-dark-2);max-width:610px}
.lg-zip{display:flex;max-width:460px;margin-top:26px;border-radius:999px;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.05);padding:5px}
.lg-zip label{display:grid;place-items:center;padding:0 10px 0 16px;color:var(--on-dark-3);font-family:var(--mono);font-size:12px}
.lg-zip input{flex:1;min-width:0;background:transparent;border:0;color:#fff;font:500 19px var(--mono);padding:10px 6px;letter-spacing:.1em}
.lg-zip input::placeholder{color:var(--on-dark-3)}
.lg-zip input:focus{outline:none}
.lg-zip:focus-within{border-color:var(--lg-rose)}
.lg-zip button{background:var(--lg-red);color:#fff;border:0;border-radius:999px;font:600 15px var(--body);padding:0 24px;cursor:pointer}
.lg-hero .zip-note{color:var(--on-dark-3);margin-top:10px;font-size:14px}
.lg-hero .btn-row{margin-top:26px}
.lg-hero .btn-ghost{--fg:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.6)}
.lg-hero .btn-ghost>i{border-left-color:rgba(255,255,255,.4)}
.lg-hero .btn-ghost:hover>i{background:#fff;color:var(--ink)}

/* ---------- 4. Category strips ---------- */
.lg-strips{display:flex;flex-direction:column;gap:14px}
.lg-row{display:grid;grid-template-columns:200px minmax(0,1fr);gap:14px;align-items:stretch}
.lg-row-head{display:flex;flex-direction:column;gap:6px;padding:18px 16px;border-radius:14px;background:#fff;border:1px solid var(--line)}
.lg-row-head b{font-family:var(--display);font-weight:600;font-size:21px;letter-spacing:-.02em}
.lg-row-head span{color:var(--muted);font-size:14px;line-height:1.45}
.lg-row-head em{margin-top:auto;font-style:normal;font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--lg-red)}
.lg-panels{display:flex;gap:10px;height:300px}
.lg-panel{position:relative;isolation:isolate;flex:1 1 0;min-width:0;border-radius:14px;overflow:hidden;color:#fff;text-decoration:none;background:var(--ink);transition:flex-grow .5s cubic-bezier(.2,.8,.2,1)}
.lg-panel.is-open{flex-grow:3.4}
.lg-panels:hover .lg-panel.is-open,.lg-panels:focus-within .lg-panel.is-open{flex-grow:1}
.lg-panels .lg-panel:hover,.lg-panels .lg-panel:focus-visible{flex-grow:3.4}
.lg-panel-ph{position:absolute;inset:0;z-index:-2;display:block}
.lg-panel-ph img.hx-fill{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;transition:transform .6s ease}
.lg-panel::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(29,30,34,.15) 0%,rgba(29,30,34,.55) 55%,rgba(29,30,34,.92) 100%);transition:background .4s}
.lg-panel-ico{position:absolute;top:14px;left:14px;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:rgba(29,30,34,.55);border:1px solid rgba(255,255,255,.4);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:background .3s,border-color .3s}
.lg-panel-ico i{display:block;width:28px;height:28px;background:#fff;-webkit-mask:var(--ico) center/contain no-repeat;mask:var(--ico) center/contain no-repeat}
.lg-panel-name{position:absolute;left:18px;bottom:18px;font-family:var(--display);font-weight:600;font-size:18px;letter-spacing:-.01em;line-height:1.15;writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap;max-height:calc(100% - 90px);overflow:hidden;text-overflow:ellipsis;transition:opacity .25s}
.lg-panel-more{position:absolute;left:18px;right:18px;bottom:18px;display:flex;flex-wrap:wrap;align-items:center;gap:6px;opacity:0;translate:0 8px;transition:opacity .3s,translate .3s;pointer-events:none}
.lg-panel-more em{font-style:normal;font-family:var(--mono);font-size:11.5px;border:1px solid rgba(255,255,255,.4);border-radius:999px;padding:2px 9px}
.lg-panel-more i{font-style:normal;font-weight:600;font-size:14px;margin-left:auto}
.lg-panel-more::before{content:attr(data-name);display:none}
/* Opened panel: the name goes horizontal above the meta line. */
.lg-panel.is-open .lg-panel-name,.lg-panels .lg-panel:hover .lg-panel-name,.lg-panels .lg-panel:focus-visible .lg-panel-name{writing-mode:horizontal-tb;transform:none;bottom:56px;font-size:clamp(22px,2vw,28px);white-space:normal;max-height:none;right:18px}
.lg-panels:hover .lg-panel.is-open:not(:hover) .lg-panel-name,.lg-panels:focus-within .lg-panel.is-open:not(:focus-visible) .lg-panel-name{writing-mode:vertical-rl;transform:rotate(180deg);bottom:18px;font-size:18px;white-space:nowrap;right:auto}
.lg-panel.is-open .lg-panel-more,.lg-panels .lg-panel:hover .lg-panel-more,.lg-panels .lg-panel:focus-visible .lg-panel-more{opacity:1;translate:0 0}
.lg-panels:hover .lg-panel.is-open:not(:hover) .lg-panel-more,.lg-panels:focus-within .lg-panel.is-open:not(:focus-visible) .lg-panel-more{opacity:0}
.lg-panel.is-open .lg-panel-ico,.lg-panels .lg-panel:hover .lg-panel-ico,.lg-panels .lg-panel:focus-visible .lg-panel-ico{background:var(--lg-red);border-color:var(--lg-red)}
.lg-panels:hover .lg-panel.is-open:not(:hover) .lg-panel-ico{background:rgba(29,30,34,.55);border-color:rgba(255,255,255,.4)}
.lg-panel:hover img.hx-fill,.lg-panel:focus-visible img.hx-fill{transform:scale(1.05)}
.lg-panel:focus-visible{outline:3px solid var(--lg-red);outline-offset:3px}
.lg-strips-key{display:flex;flex-wrap:wrap;gap:18px;margin-top:18px;font-family:var(--mono);font-size:12px;color:var(--muted)}
.lg-strips-key b{color:var(--ink)}

/* ---------- 5. Sign guide ---------- */
.lg-signs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.lg-sign{position:relative;background:#fff;border:1px solid var(--line);border-radius:14px;padding:24px 22px 22px;display:flex;flex-direction:column;gap:10px;overflow:hidden}
.lg-sign::after{content:"";position:absolute;right:-34px;top:-34px;width:96px;height:96px;border-radius:50%;border:1px solid rgba(196,0,59,.25)}
.lg-sign-app{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--lg-red)}
.lg-sign h3{font-size:20px;margin:0;color:var(--ink)}
.lg-sign p{margin:0;color:var(--ink-2);line-height:1.6;font-size:15px}
.lg-sign-check{margin-top:auto!important;padding-top:12px;border-top:1px dashed var(--line);font-size:14px!important}
.lg-sign-check b{display:block;font-family:var(--mono);font-weight:400;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:2px}

/* ---------- 6. Houston notes ---------- */
.lg-notes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid var(--ink)}
.lg-note{position:relative;padding:28px 26px 28px 0;border-right:1px solid var(--line)}
.lg-note+.lg-note{padding-left:26px}
.lg-note:last-child{border-right:0}
.lg-note::before{content:"";position:absolute;top:-6px;left:0;width:11px;height:11px;border-radius:50%;background:var(--lg-red)}
.lg-note+.lg-note::before{left:26px}
.lg-note span{font-family:var(--mono);font-size:12px;color:var(--lg-red);letter-spacing:.06em;text-transform:uppercase}
.lg-note h3{font-size:22px;margin:10px 0 10px;color:var(--ink)}
.lg-note p{color:var(--ink-2);margin:0;line-height:1.65}

/* ---------- 7. Code finder ---------- */
.lg-finder{max-width:880px}
.lg-pills{display:flex;flex-wrap:wrap;gap:8px;border:0;margin:0 0 16px;padding:0}
.lg-pills label{cursor:pointer}
.lg-pills input{position:absolute;opacity:0;pointer-events:none}
.lg-pills span{display:inline-block;padding:8px 15px;border-radius:999px;border:1px solid var(--on-dark-3);color:var(--on-dark);font-size:14px}
.lg-pills label:hover span{border-color:var(--lg-rose)}
.lg-pills input:checked+span{background:var(--lg-red);border-color:var(--lg-red);color:#fff}
.lg-pills input:focus-visible+span{outline:2px solid var(--lg-rose);outline-offset:2px}
.lg-finder-row{display:flex;border-bottom:2px solid var(--lg-rose)}
.lg-finder-row input{flex:1;min-width:0;background:transparent;border:0;color:#fff;font:400 34px var(--mono);letter-spacing:.14em;padding:12px 4px}
.lg-finder-row input:focus{outline:none}
.lg-finder-row button{background:transparent;color:var(--lg-rose);border:0;font:600 16px var(--body);padding:0 6px 0 20px;cursor:pointer}
.lg-finder-row button:hover{color:#fff}
.lg-finder-note{color:var(--on-dark-2);margin-top:16px;font-size:14.5px}

/* ---------- 8. Visit steps: an orbit line ---------- */
.lg-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;position:relative}
.lg-steps::before{content:"";position:absolute;left:19px;right:19px;top:19px;height:1px;background:var(--line)}
.lg-steps li{position:relative}
.lg-steps li>span{position:relative;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--paper);border:1.5px solid var(--lg-red);color:var(--lg-red);font:500 12px var(--mono)}
.lg-steps h3{font-size:20px;margin:16px 0 8px}
.lg-steps p{color:var(--ink-2);margin:0;line-height:1.6}

/* ---------- 9. Models ---------- */
.lg-models{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.lg-model{display:grid;grid-template-columns:120px minmax(0,1fr);gap:16px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:14px;padding:10px;text-decoration:none;color:var(--ink);transition:border-color .25s,translate .25s}
.lg-model-ph{position:relative;display:block;aspect-ratio:1;border-radius:50%;overflow:hidden;background:var(--paper-2)}
.lg-model-ph img.hx-fill{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.lg-model-txt{display:flex;flex-direction:column;gap:4px;min-width:0}
.lg-model-txt small{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--lg-red)}
.lg-model-txt b{font-family:var(--mono);font-weight:400;font-size:17px;letter-spacing:.04em;overflow-wrap:anywhere}
.lg-model-txt span{display:flex;flex-direction:column;gap:2px}
.lg-model-txt i{font-style:normal;font-size:13px;color:var(--muted)}
.lg-model:hover,.lg-model:focus-visible{border-color:var(--lg-red);translate:0 -2px}

/* ---------- 10. Map ---------- */
.lg-map{aspect-ratio:600/552;max-width:620px;border-radius:14px;background:#fff;overflow:hidden;border:1px solid var(--line)}
.lg-map .lg-water{fill:#E3E1DC}
.lg-map .lg-sea{font-family:var(--mono);font-size:10px;letter-spacing:.1em;fill:#85817A;pointer-events:none}
.lg-map .lg-county path{stroke:#fff;stroke-width:1.6;stroke-linejoin:round;transition:fill .25s}
.lg-map .lg-t0 path{fill:#F1EFEB}
.lg-map .lg-t1 path{fill:#E9E6E0}
.lg-map .lg-t2 path{fill:#DFDBD3}
.lg-map .lg-county:hover path,.lg-map .lg-county.is-on path{fill:#F4C9D4}
.lg-map .lg-cname{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;fill:#8E8A83;pointer-events:none}
.lg-map .lg-cname.is-on{fill:var(--lg-red)}
.lg-map .lbl{font-family:var(--body);font-weight:500;font-size:9.5px;fill:var(--ink);paint-order:stroke;stroke:rgba(255,255,255,.95);stroke-width:3px;stroke-linejoin:round}
.lg-map .pin{fill:var(--ink);stroke:#fff;stroke-width:1.5}
.lg-map .lg-pin:hover .pin,.lg-map .is-center .pin{fill:var(--lg-red)}
.lg-map .lg-pin:hover .lbl{fill:var(--lg-red)}
.lg-map .is-center .lbl{font-weight:700}
.lg-map .lg-pulse{fill:none;stroke:var(--lg-red);stroke-width:1.5;transform-box:fill-box;transform-origin:center;animation:lg-pulse 2.4s ease-out infinite}
@keyframes lg-pulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(3.6);opacity:0}}
.county.is-on summary b{color:var(--lg-red)}

/* ---------- 11. Reused parent blocks ---------- */
.channel{border-radius:14px}
.voice{border:1px solid var(--line);border-radius:14px;background:#fff}
.county{border-radius:var(--r)}
.hx-faq details{border-radius:var(--r)}
.hx-cover{border-radius:14px}
.hx-cover-1{background:var(--ink);color:#fff}
.hx-cover-2{background:var(--lg-red);color:#fff}
.hx-cover-3{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.hx-cover-3::before{background:var(--lg-red)}
.ledger .lrow em{color:var(--lg-rose)}
.hx-tile{border-radius:14px}

/* Optional section photos (Houston Photos bg-* slots) */
.lg-has-bg[style*="background-image"],#finder[style*="background-image"]{background-size:cover;background-position:center}

/* ---------- 12. Responsive ---------- */
@media (max-width:1060px){
  .lg-hero .wrap{grid-template-columns:1fr;gap:44px}
  .lg-hero-orbit{width:120vw;right:-50vw;opacity:.6}
  .lg-row{grid-template-columns:1fr}
  .lg-row-head{flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:4px 12px;padding:12px 14px}
  .lg-row-head em{margin:0 0 0 auto}
  .lg-signs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lg-notes{grid-template-columns:1fr}
  .lg-note,.lg-note+.lg-note{padding:24px 0;border-right:0;border-bottom:1px solid var(--line)}
  .lg-note+.lg-note::before{left:0}
  .lg-steps{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:28px}
  .lg-steps::before{display:none}
  .lg-models{grid-template-columns:1fr}
}
/* Phones: each row becomes a stack of short horizontal cards, all open. */
@media (max-width:760px){
  .lg-panels{flex-direction:column;height:auto;gap:8px}
  .lg-panel,.lg-panel.is-open{flex:none;height:92px}
  .lg-panel::after{background:linear-gradient(90deg,rgba(29,30,34,.92) 0%,rgba(29,30,34,.6) 60%,rgba(29,30,34,.25) 100%)}
  .lg-panel-ico{top:50%;translate:0 -50%;left:12px;width:42px;height:42px}
  .lg-panel .lg-panel-name,.lg-panels .lg-panel:hover .lg-panel-name,.lg-panel.is-open .lg-panel-name,.lg-panels:hover .lg-panel.is-open:not(:hover) .lg-panel-name,.lg-panels:focus-within .lg-panel.is-open:not(:focus-visible) .lg-panel-name{writing-mode:horizontal-tb;transform:none;left:68px;right:14px;top:18px;bottom:auto;font-size:18px;white-space:normal;max-height:none}
  .lg-panel .lg-panel-more,.lg-panels:hover .lg-panel.is-open:not(:hover) .lg-panel-more,.lg-panels:focus-within .lg-panel.is-open:not(:focus-visible) .lg-panel-more{opacity:1;translate:0 0;left:68px;bottom:14px}
  .lg-signs{grid-template-columns:1fr}
}
@media (max-width:640px){
  .lg-zip{flex-wrap:wrap;border-radius:18px}
  .lg-zip button{width:100%;padding:12px}
  .lg-steps{grid-template-columns:1fr}
  .lg-finder-row{flex-direction:column;border-bottom:0}
  .lg-finder-row input{border-bottom:2px solid var(--lg-rose);font-size:26px}
  .lg-finder-row button{padding:14px 0;text-align:left}
  .lg-model{grid-template-columns:84px minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){
  .lg-panel,.lg-panel img.hx-fill,.lg-panel-more,.lg-model{transition:none}
  .lg-map .lg-pulse{animation:none}
}