/* Wander Tears Builder: base styles for builder pages that are NOT built by the configurator engine (the landing page).
   The tokens, header, footer, button and nav rules mirror web-configurator-shared/engine/page/shell.html so the landing
   page and the camper pages look the same. If those rules change in shell.html, change them here too
   (tools/test_site.py compares the header height of both pages). */
:root{
  --ink:#000000;
  --paper:#ffffff;
  --accent:#D64000;
  --accent-hover:#B33600;
  --accent-ink:#ffffff;
  --accent-tint:#FBEDE6;
  --muted:#575757;
  --line:#E4E2DF;
  --soft:#F6F5F3;
  --radius:6px;
  --font:'Poppins', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --bar-h:34px;
  --hdr-h:76px;
  --stick-h:var(--hdr-h);
  color-scheme: light;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-padding-top:calc(var(--stick-h) + 12px)}
body{background:var(--paper);color:var(--ink);font-family:var(--font);font-weight:300;font-size:15px;line-height:1.55;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
button,input,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
[hidden]{display:none!important}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* announcement bar + header (as shell.html) */
.announce{height:var(--bar-h);background:#000;color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:600;letter-spacing:.01em;padding:0 16px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.site-header{position:sticky;top:0;z-index:30;height:var(--hdr-h);display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:0 clamp(16px,3vw,40px);border-bottom:1px solid var(--line);background:var(--paper)}
.hdr-title{margin-right:auto;margin-left:clamp(8px,2vw,28px)}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit;min-width:0}
#brandLogo{height:44px;width:auto;display:block}
.wordmark{font-weight:600;font-size:19px;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.wordmark small{display:block;font-size:9px;letter-spacing:.32em;font-weight:500;color:var(--muted);text-align:center;margin-bottom:-2px}
.hdr-title{font-size:15px;font-weight:400;letter-spacing:.11em;text-transform:uppercase;white-space:nowrap}
.hdr-title span{border-bottom:1px solid currentColor;padding-bottom:2px}
.topnav{display:flex;gap:4px;align-items:center}
.topnav a{padding:8px 12px;border-radius:4px;font-size:13px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);text-decoration:none;white-space:nowrap}
.topnav a:hover{background:var(--soft)}
.topnav a.on{background:var(--ink);color:#fff}
/* a step that is not a link yet (the landing page's "3 · Options") */
.topnav .dim{padding:8px 12px;font-size:13px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:#a8a39c;white-space:nowrap}
@media (max-width:900px){ .topnav .dim{font-size:11.5px;padding:6px 10px} }

/* buttons (as shell.html) */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 24px;border-radius:var(--radius);border:0;
  background:var(--accent);color:var(--accent-ink);font-weight:500;font-size:14px;letter-spacing:.02em;cursor:pointer;transition:background .15s;text-decoration:none}
.btn:hover{background:var(--accent-hover)}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--ink)}
.btn.ghost:hover{background:var(--ink);color:#fff}
.btn:disabled{background:#cfcac4;cursor:not-allowed}

/* site footer (as shell.html) */
.siteFoot{text-align:center;padding:56px 16px 48px;border-top:1px solid var(--line);font-size:16px}
.siteFoot p{margin:0 0 18px}
.siteFoot .vet{font-size:17px}
.siteFoot .social{display:flex;justify-content:center;gap:12px;margin:0 0 20px}
.siteFoot .social a{color:var(--ink);display:inline-flex;padding:4px}
.siteFoot .social svg{width:22px;height:22px}
.siteFoot .social a:hover{color:var(--accent)}
.siteFoot .legal{display:flex;justify-content:center;flex-wrap:wrap;gap:6px 18px}
.siteFoot .legal a{color:var(--accent);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.siteFoot .legal a:hover{color:var(--accent-hover)}
.siteFoot .copy{margin:0}

@media (max-width:1180px){ .hdr-title{display:none} .topnav a{padding:8px 9px;letter-spacing:.05em} }
@media (max-width:900px){
  :root{--hdr-h:56px;--bar-h:30px;--nav-h:42px;--stick-h:calc(var(--hdr-h) + var(--nav-h))}
  .site-header{height:var(--stick-h);flex-wrap:wrap;align-content:flex-start;gap:0 12px;padding:0}
  .brand{height:var(--hdr-h);padding:0 16px}
  .hdr-title{display:block;margin:0 16px 0 auto;line-height:var(--hdr-h)}
  .topnav{flex:0 0 100%;height:var(--nav-h);border-top:1px solid var(--line);overflow-x:auto;scrollbar-width:none;padding:0 10px;gap:2px}
  .topnav::-webkit-scrollbar{display:none}
  .topnav a{font-size:11.5px;padding:6px 10px}
  .announce{font-size:11px}
  #brandLogo{height:34px}
  .wordmark{font-size:16px}
  .hdr-title{font-size:12px}
}
@media (prefers-reduced-motion:reduce){ *{transition:none!important} }