/* ==========================================================================
   VinylWrapCalculator.com — site chrome
   Palette + type deliberately match the calculator widgets so the page and
   the tool read as one product rather than a tool bolted into a theme.
   ========================================================================== */

:root {
  --bg: #0e0e0e;
  --surface: #161616;
  --surface-2: #1c1c1c;
  --line: rgba(255, 255, 255, 0.09);
  --line-strong: rgba(255, 255, 255, 0.16);
  --text: #f0f0f0;
  --muted: #9a9a9a;
  --muted-2: #6f6f6f;
  --accent: #f07020;
  --accent-soft: rgba(240, 112, 32, 0.12);
  --accent-line: rgba(240, 112, 32, 0.35);
  --radius: 14px;
  --maxw: 1180px;
  --readw: 760px;
  --sans: 'DM Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --display: 'Syne', var(--sans);
  --mono: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.7;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  /* Long unbreakable tokens — "VinylWrapCalculator.com", URLs, model codes —
     must wrap rather than push the whole page sideways on phones. */
  overflow-wrap: break-word;
}

h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }

/* Faint technical grid, same motif the calculators use */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(240, 112, 32, 0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(240, 112, 32, 0.022) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
  z-index: 0;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 22px; position: relative; z-index: 1; }
.skip {
  position: absolute; left: -9999px; top: 0; background: var(--accent); color: #0e0e0e;
  padding: 10px 16px; z-index: 999; font-weight: 600; border-radius: 0 0 8px 0;
}
.skip:focus { left: 0; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(14, 14, 14, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.hdr { display: flex; align-items: center; justify-content: space-between; height: 68px; gap: 20px; }

/* min-width:0 lets the wordmark shrink instead of pushing the menu button
   off the right edge on narrow phones. */
.brand { display: flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 800;
  font-size: 18px; color: var(--text); letter-spacing: -0.02em; text-decoration: none;
  min-width: 0; white-space: nowrap; }
.brand:hover { text-decoration: none; }
/* The real site badge is a circular logo, so crop it round. */
.brand-mark {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  display: block; object-fit: cover; background: transparent;
}
.brand span { color: var(--accent); }

/* ---------- Nav ---------- */
.nav { display: flex; align-items: center; gap: 2px; }
.nav > li { list-style: none; position: relative; }
.nav a, .nav .navbtn {
  display: flex; align-items: center; gap: 5px;
  padding: 9px 13px; border-radius: 9px;
  color: var(--muted); font-size: 14.5px; font-weight: 400;
  background: none; border: 0; cursor: pointer; font-family: var(--sans);
  white-space: nowrap; text-decoration: none;
}
.nav a:hover, .nav .navbtn:hover, .nav li:hover > .navbtn, .nav a[aria-current="page"] {
  color: var(--text); background: var(--surface-2); text-decoration: none;
}
.nav a[aria-current="page"] { color: var(--accent); }
.caret { width: 9px; height: 9px; fill: none; stroke: currentColor; stroke-width: 2.2; transition: transform .18s; }
.nav li:hover .caret, .nav li:focus-within .caret { transform: rotate(180deg); }

.submenu {
  position: absolute; top: calc(100% + 8px); left: 0; min-width: 268px;
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: 12px; padding: 7px; margin: 0;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.6);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .17s, transform .17s, visibility .17s;
}
.nav li:hover > .submenu, .nav li:focus-within > .submenu { opacity: 1; visibility: visible; transform: translateY(0); }
.submenu li { list-style: none; }
.submenu a { padding: 10px 12px; border-radius: 8px; font-size: 14px; color: var(--muted); display: block; }
.submenu a:hover { color: var(--text); background: var(--surface-2); }

.navtoggle {
  display: none; background: none; border: 1px solid var(--line-strong); border-radius: 9px;
  width: 40px; height: 40px; cursor: pointer; color: var(--text); padding: 0;
  align-items: center; justify-content: center;
}
.navtoggle svg { width: 19px; height: 19px; stroke: currentColor; stroke-width: 2; fill: none; }

@media (max-width: 980px) {
  .navtoggle { display: flex; }
  .nav {
    position: fixed; inset: 68px 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--bg); border-bottom: 1px solid var(--line);
    padding: 12px 18px 26px; margin: 0;
    max-height: calc(100vh - 68px); overflow-y: auto;
    display: none;
  }
  .nav.open { display: flex; }
  .nav a, .nav .navbtn { width: 100%; padding: 13px 12px; font-size: 15.5px; }
  .caret { display: none; }
  .submenu {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: 0; border-left: 2px solid var(--accent-line);
    border-radius: 0; margin: 0 0 6px 12px; padding: 0 0 0 8px; min-width: 0;
    background: none;
  }
}

/* ---------- Hero ---------- */
.hero { padding: 62px 0 34px; text-align: center; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent); background: var(--accent-soft); border: 1px solid var(--accent-line);
  padding: 6px 13px; border-radius: 100px; margin-bottom: 20px;
}
h1 {
  font-family: var(--display); font-weight: 800; letter-spacing: -0.03em; line-height: 1.08;
  font-size: clamp(2rem, 5.4vw, 3.4rem); margin: 0 0 18px;
}
.hero p { color: var(--muted); font-size: 1.08rem; max-width: 660px; margin: 0 auto; }

/* ---------- Page shell ---------- */
main { position: relative; z-index: 1; }
.page-head { padding: 52px 0 26px; border-bottom: 1px solid var(--line); margin-bottom: 40px; }
.page-head h1 { font-size: clamp(1.8rem, 4.2vw, 2.7rem); margin-bottom: 12px; }
.page-head .lede { color: var(--muted); max-width: var(--readw); font-size: 1.05rem; margin: 0; }

.crumbs { font-family: var(--mono); font-size: 12px; color: var(--muted-2); margin-bottom: 18px; letter-spacing: .02em; }
.crumbs a { color: var(--muted); }
.crumbs span { margin: 0 7px; opacity: .5; }

/* ---------- Article typography ---------- */
.article { max-width: var(--readw); margin: 0 auto 70px; }
.article > * { margin-left: auto; margin-right: auto; }
.article h2 {
  font-family: var(--display); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2;
  font-size: clamp(1.45rem, 3vw, 1.95rem); margin: 52px 0 16px; padding-top: 8px;
}
.article h3 {
  font-family: var(--display); font-weight: 600; letter-spacing: -0.01em;
  font-size: clamp(1.18rem, 2.3vw, 1.4rem); margin: 36px 0 12px;
}
.article h4 { font-family: var(--display); font-weight: 600; font-size: 1.08rem; margin: 28px 0 10px; }
.article p { margin: 0 0 20px; color: #ddd; }
.article ul, .article ol { margin: 0 0 22px; padding-left: 24px; color: #ddd; }
.article li { margin-bottom: 9px; }
.article li::marker { color: var(--accent); }
.article strong { color: var(--text); font-weight: 600; }
.article a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.article hr { border: 0; border-top: 1px solid var(--line); margin: 42px 0; }
.article img, .article figure { border-radius: var(--radius); margin: 30px auto; }
.article figcaption { font-size: 13.5px; color: var(--muted-2); text-align: center; margin-top: 10px; font-family: var(--mono); }

.article blockquote, .wp-block-quote {
  margin: 30px 0; padding: 18px 24px;
  border-left: 3px solid var(--accent); background: var(--surface);
  border-radius: 0 var(--radius) var(--radius) 0; color: var(--muted);
}
.article blockquote p:last-child { margin-bottom: 0; }

/* Tables — the cost tables are the most-read content on the site */
.article table, .wp-block-table table {
  width: 100%; border-collapse: collapse; margin: 0; font-size: 15px;
  background: var(--surface); border-radius: var(--radius); overflow: hidden;
}
.table-scroll, .wp-block-table { overflow-x: auto; margin: 30px 0; border-radius: var(--radius); border: 1px solid var(--line); }
.article th {
  background: var(--surface-2); color: var(--text); font-weight: 600;
  text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--line-strong);
  font-family: var(--mono); font-size: 12.5px; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap;
}
.article td { padding: 13px 16px; border-bottom: 1px solid var(--line); color: #ddd; }
.article tr:last-child td { border-bottom: 0; }
.article tbody tr:hover { background: rgba(255, 255, 255, 0.022); }

/* ---------- Cards / blog index ---------- */
.grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(272px, 1fr)); margin-bottom: 70px; }
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px; display: flex; flex-direction: column; gap: 10px;
  transition: border-color .18s, transform .18s, background .18s;
}
.card:hover { border-color: var(--accent-line); transform: translateY(-2px); background: var(--surface-2); }
.card h3 { font-family: var(--display); font-weight: 600; font-size: 1.08rem; line-height: 1.32; margin: 0; letter-spacing: -0.01em; }
.card h3 a { color: var(--text); }
.card h3 a:hover { color: var(--accent); text-decoration: none; }
.card p { color: var(--muted); font-size: 14.5px; margin: 0; flex: 1; line-height: 1.6; }
.card .meta { font-family: var(--mono); font-size: 11.5px; color: var(--muted-2); letter-spacing: .05em; text-transform: uppercase; }

/* Tool cards on the homepage */
.tools { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); margin: 0 0 70px; }
.tool {
  display: flex; flex-direction: column; gap: 8px; padding: 22px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  transition: border-color .18s, transform .18s;
}
.tool:hover { border-color: var(--accent-line); transform: translateY(-2px); text-decoration: none; }
.tool .ico { font-size: 22px; margin-bottom: 2px; }
.tool strong { font-family: var(--display); font-weight: 600; font-size: 1.02rem; color: var(--text); letter-spacing: -0.01em; }
.tool span { color: var(--muted); font-size: 14px; line-height: 1.55; }

.section-head { margin: 0 0 24px; }
.section-head h2 {
  font-family: var(--display); font-weight: 700; letter-spacing: -0.02em;
  font-size: clamp(1.5rem, 3.2vw, 2rem); margin: 0 0 8px;
}
.section-head p { color: var(--muted); margin: 0; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--accent); color: #0e0e0e; font-weight: 600; font-size: 15px;
  padding: 12px 22px; border-radius: 10px; border: 0; cursor: pointer; font-family: var(--sans);
}
.btn:hover { background: #ff8a3d; text-decoration: none; }
.btn-ghost { background: none; color: var(--text); border: 1px solid var(--line-strong); }
.btn-ghost:hover { background: var(--surface-2); border-color: var(--accent-line); }

/* ---------- Contact form ---------- */
.form { max-width: 620px; margin: 0 auto 70px; }
.field { margin-bottom: 18px; }
.field label { display: block; font-family: var(--mono); font-size: 12px; letter-spacing: .07em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.field input, .field textarea {
  width: 100%; background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: 10px; padding: 13px 15px; color: var(--text);
  font-family: var(--sans); font-size: 15.5px; transition: border-color .16s;
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--accent); }
.field textarea { min-height: 165px; resize: vertical; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.note { padding: 14px 17px; border-radius: 10px; margin-bottom: 22px; font-size: 15px; }
.note-ok { background: rgba(60, 200, 120, 0.1); border: 1px solid rgba(60, 200, 120, 0.35); color: #7ee2a8; }
.note-err { background: rgba(240, 80, 60, 0.1); border: 1px solid rgba(240, 80, 60, 0.35); color: #ff9b8a; }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--line); background: #0b0b0b; margin-top: 60px; padding: 52px 0 30px; position: relative; z-index: 1; }
.fgrid { display: grid; gap: 34px; grid-template-columns: 1.6fr 1fr 1fr 1fr; margin-bottom: 38px; }
@media (max-width: 860px) { .fgrid { grid-template-columns: 1fr 1fr; gap: 28px; } }
@media (max-width: 480px) { .fgrid { grid-template-columns: 1fr; } }
.fcol h4 {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--muted-2); margin: 0 0 14px; font-weight: 400;
}
.fcol ul { list-style: none; padding: 0; margin: 0; }
.fcol li { margin-bottom: 9px; }
.fcol a { color: var(--muted); font-size: 14.5px; }
.fcol a:hover { color: var(--accent); text-decoration: none; }
.fabout p { color: var(--muted); font-size: 14.5px; max-width: 320px; margin: 12px 0 0; line-height: 1.65; }
.fbot {
  border-top: 1px solid var(--line); padding-top: 24px;
  display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  font-size: 13.5px; color: var(--muted-2);
}
.fbot a { color: var(--muted-2); }

/* ---------- Misc ---------- */
/* The calculator widget itself is full-bleed and manages its own inner width.
   calc-host sits directly under <main>, not inside .wrap, so it needs no
   negative margin — adding one just pushes it past the viewport edge.
   No overflow clipping here: it silently slices content instead of surfacing
   the real problem. */
.calc-host { margin: 0 0 60px; width: 100%; }

/* The imported pages also carry prose blocks that the old theme's container
   used to constrain. Standalone they span the entire screen with no padding,
   so text touches both edges and line length becomes unreadable. */
.calc-host .vwc-seo,
.calc-host .vbs-wrap {
  max-width: 1080px;
  margin-inline: auto;
  padding-inline: 24px;
}

.notfound { text-align: center; padding: 100px 0 90px; }
.notfound .code { font-family: var(--mono); font-size: 68px; color: var(--accent); line-height: 1; margin-bottom: 14px; }

.toc {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px 24px; margin: 0 0 36px;
}
.toc h2 { font-family: var(--mono); font-size: 11.5px !important; letter-spacing: .13em; text-transform: uppercase;
  color: var(--muted-2); margin: 0 0 12px !important; font-weight: 400; padding: 0 !important; }
.toc ul { margin: 0; padding-left: 19px; }
.toc li { margin-bottom: 6px; font-size: 14.5px; }
.toc a { color: var(--muted); text-decoration: none; }
.toc a:hover { color: var(--accent); }

/* ---------- Narrow phones ---------- */
@media (max-width: 430px) {
  .wrap { padding: 0 16px; }
  .hdr { gap: 10px; height: 62px; }
  .brand { font-size: 15px; gap: 8px; }
  .brand-mark { width: 26px; height: 26px; }
  .nav { inset-block-start: 62px; }
  body { font-size: 16px; }
  .hero { padding: 42px 0 26px; }
  .page-head { padding: 34px 0 20px; margin-bottom: 30px; }
  .article h2 { margin-top: 38px; }
  .card, .tool { padding: 18px; }
  .calc-host .vwc-seo, .calc-host .vbs-wrap { padding-inline: 16px; }
}

/* Nothing in the article may force the page sideways; wide tables and any
   stray fixed-width block scroll within their own box instead. */
.article table { min-width: 0; }
.article pre, .article iframe, .article video { max-width: 100%; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}