/* HandBuiltPCs.ca - public site styles
   Copyright (c) 2026 HandBuiltPCs.ca. All rights reserved.
   Proprietary work. No part of this file, its scripts, code or configuration may be used, copied, modified,
   merged, published or distributed, in whole or in part, without prior written permission. */
/* HandBuiltPCs.ca: Neon Arcade look, loaded after styles.css. It changes colours, fonts and shapes only.
   To go back to the old look, remove the neon.css and Google Fonts lines in build-parts/build.sh and rebuild. */
:root {
  --bg: #0b0614;
  --bg-2: #140b24;
  --bg-3: #1f1236;
  --text: #f3eaff;
  --muted: #a99bc4;
  --soft: #d6c9ee;
  --line: #2e1d4a;
  --orange: #ff7a18;
  --red: #ff2fb3;
  --pink: #ff2fb3;
  --cyan: #2ff3ff;
  --grad: linear-gradient(90deg, var(--orange), var(--pink));
  --radius: 0px;
  --font: Rajdhani, "Segoe UI", system-ui, sans-serif;
  --display: Orbitron, "Segoe UI", system-ui, sans-serif;
  --cut: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
  --slant: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
}
body {
  font-weight: 500; font-size: 18px; line-height: 1.55;
  background:
    radial-gradient(ellipse 900px 600px at 15% 0%, rgba(110, 30, 180, .35), transparent 70%),
    radial-gradient(ellipse 800px 600px at 95% 25%, rgba(140, 20, 100, .28), transparent 70%),
    var(--bg);
  background-attachment: fixed;
}
a { color: var(--cyan); }
h1, h2, h3, .section-title, .svc-h, .price, .pc-price, .price-big, .product-price, .service-price, .live-price,
.q-block legend, .specs-title, .parts-title { font-family: var(--display); letter-spacing: .02em; }
h1, h2, .section-title { text-transform: uppercase; }
h1 { font-weight: 900; }
h2, .section-title { font-weight: 800; }
h3 { font-weight: 700; font-size: .95em; }
strong, b { font-weight: 700; }

/* Text that was grey-blue on the old look */
.card p, .steps p, .split p, .pc-specs, .pc-desc, .service p, .note, .option p, .product p, .price-list span,
.check-list, .faq details p, .listing-empty p, .class-specs, .lead, .pc-price-note, .advice-box p { color: var(--soft); }
.lead { color: var(--muted); }
.pc-specs dd { color: var(--text); }

/* Buttons: slanted, neon */
.btn {
  font-family: var(--display); font-weight: 800; font-size: 13px; letter-spacing: .14em; text-transform: uppercase;
  color: #12061f; border-radius: 0; padding: 15px 28px; clip-path: var(--slant);
  box-shadow: none; filter: drop-shadow(0 0 14px rgba(255, 47, 179, .45));
}
.btn:hover { box-shadow: none; filter: drop-shadow(0 0 20px rgba(255, 47, 179, .7)); }
.btn-small { padding: 11px 20px; font-size: 12px; }
.btn-ghost { background: transparent; color: var(--cyan); border: 0; box-shadow: inset 0 0 0 2px var(--cyan); filter: none; }
.btn-ghost:hover { background: rgba(47, 243, 255, .08); box-shadow: inset 0 0 0 2px var(--cyan); filter: drop-shadow(0 0 12px rgba(47, 243, 255, .5)); }
.link-arrow { color: var(--cyan); font-family: var(--display); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; }

/* Header */
.site-header { background: rgba(11, 6, 20, .88); border-bottom: 1px solid rgba(255, 47, 179, .3); box-shadow: 0 0 30px rgba(255, 47, 179, .08); }
.brand img { filter: drop-shadow(0 0 10px rgba(255, 122, 24, .45)); }
.site-nav a { font-weight: 700; font-size: 14px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.site-nav a:not(.btn):hover, .site-nav a[aria-current="page"] { color: var(--cyan); text-shadow: 0 0 10px var(--cyan); }
.site-nav a.btn { color: #12061f; }
.menu-toggle { background: transparent; color: var(--cyan); border: 0; box-shadow: inset 0 0 0 2px var(--cyan); border-radius: 0; font-family: var(--display); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; clip-path: var(--slant); padding: 10px 18px; }
.eyebrow { color: var(--cyan); text-shadow: 0 0 12px var(--cyan); letter-spacing: .3em; font-weight: 700; }
.grad { filter: drop-shadow(0 0 18px rgba(255, 47, 179, .45)); }

/* Hero (home page) */
.hero { border-bottom: 0; padding: 56px 0 40px; }
.hero-bg { display: none; }
.hero-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center; }
.hero-grid .hero-inner { margin: 0; max-width: none; }
.hero h1 { font-size: clamp(36px, 5.4vw, 72px); line-height: 1.04; }
.screen { position: relative; border: 2px solid rgba(47, 243, 255, .5); box-shadow: 0 0 40px rgba(47, 243, 255, .25); clip-path: polygon(24px 0, 100% 0, 100% calc(100% - 24px), calc(100% - 24px) 100%, 0 100%, 0 24px); background: #000; }
.screen img { width: 100%; height: 500px; object-fit: cover; }
.hud { position: absolute; left: 14px; top: 14px; font: 600 11px var(--display); letter-spacing: .14em; color: var(--cyan); background: rgba(11, 6, 20, .75); padding: 6px 10px; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 40px; }
.stat { background: rgba(20, 11, 36, .85); border-left: 3px solid var(--pink); padding: 18px 20px; }
.stat b { display: block; font: 800 22px var(--display); color: var(--orange); text-shadow: 0 0 14px rgba(255, 122, 24, .5); }
.stat span { color: var(--muted); }

/* Cards and panels: cut corners */
.card, .steps li, .service, .option, .product, .q-block, .price-box, .parts-box, .class-card, .pc-card, .shot, .faq details, .note, .advice-box, .listing-empty {
  border-radius: 0; background: rgba(20, 11, 36, .85); border: 1px solid var(--line);
}
.card, .service, .option, .class-card, .pc-card, .shot, .price-box, .q-block { clip-path: var(--cut); }
.card, .service { border-top: 3px solid var(--pink); }
.card-icon { border-radius: 0; background: rgba(47, 243, 255, .08); border: 1px solid rgba(47, 243, 255, .45); clip-path: var(--slant); }
.card-icon svg { fill: var(--cyan); filter: drop-shadow(0 0 6px var(--cyan)); }
.band { background: rgba(20, 11, 36, .55); border-block: 1px solid var(--line); }
.steps li { background: rgba(11, 6, 20, .7); border-left: 3px solid var(--cyan); }
.step-num { border-radius: 0; clip-path: var(--slant); width: 46px; color: #12061f; font-family: var(--display); }
.parts-box, .note { border-left: 3px solid var(--cyan); }
.advice-box { background: linear-gradient(90deg, rgba(255, 122, 24, .12), rgba(255, 47, 179, .12)); border-color: rgba(255, 47, 179, .4); }
.listing-empty { border: 2px dashed rgba(255, 47, 179, .35); }
.service-strip li { border-radius: 0; background: rgba(11, 6, 20, .7); border: 0; border-left: 3px solid var(--orange); font-weight: 700; }
.service-price, .live-price, .reply-time, .option-tag, .class-range { color: var(--orange) !important; text-shadow: 0 0 12px rgba(255, 122, 24, .4); }
.check-list li::before { color: var(--cyan); }
.pc-specs li::before { color: var(--pink); }
.option.is-pick { border-color: var(--cyan); box-shadow: 0 0 0 1px var(--cyan) inset; }

/* CTA band */
.cta-band { background: linear-gradient(90deg, rgba(255, 122, 24, .16), rgba(255, 47, 179, .16)); border-block: 1px solid rgba(255, 47, 179, .4); }
.cta-band .btn { background: var(--grad); }

/* Inner page heads */
.page-head { border-bottom: 1px solid var(--line); background: radial-gradient(600px 300px at 90% 0%, rgba(255, 47, 179, .18), transparent 70%); }
.page-head h1 { font-size: clamp(30px, 4.4vw, 50px); }
.link-back { color: var(--cyan); }

/* PC cards and the single PC page */
.pc-card, .shot { box-shadow: 0 0 40px rgba(255, 47, 179, .08); }
.pc-card:hover, .shot:hover { border-color: rgba(255, 47, 179, .6); box-shadow: 0 0 40px rgba(255, 47, 179, .2); }
.badge, .badge-inline { border-radius: 0; font-family: var(--display); font-size: 11px; letter-spacing: .14em; }
.badge-sale, .badge-inline.badge-sale { background: transparent; color: #3dff9a; box-shadow: inset 0 0 0 2px #3dff9a; }
.pc-photo .badge-sale { background: rgba(11, 6, 20, .8); }
.badge-sold, .badge-inline.badge-sold { background: #2a2238; color: #cfc4e4; }
.badge-reserved, .badge-inline.badge-reserved { background: #ffc93c; color: #12061f; }
.badge-sample, .badge-inline.badge-sample { background: rgba(11, 6, 20, .85); color: #ffc93c; border: 0; box-shadow: inset 0 0 0 2px #ffc93c; }
.price, .pc-price { text-shadow: 0 0 20px rgba(255, 122, 24, .45); }
.pc-main-photo { border-radius: 0; border: 2px solid rgba(47, 243, 255, .4); box-shadow: 0 0 30px rgba(47, 243, 255, .15); }
.thumb { border-radius: 0; }
.thumb.active { border-color: var(--cyan); }

/* Classes: Spark, Flare, Scorch, Wildfire */
.class-badge { border-radius: 0; font-family: var(--display); font-size: 11px; letter-spacing: .14em; clip-path: var(--slant); padding: 4px 14px; }
.class-spark { background: #ffc93c; color: #12061f; }
.class-flare { background: var(--orange); color: #12061f; }
.class-scorch { background: #ff3d3d; color: #12061f; }
.class-wildfire { background: var(--pink); color: #12061f; box-shadow: none; }
.class-card { border-top: 3px solid var(--line); background: rgba(20, 11, 36, .85); }
.class-card-spark { border-top-color: #ffc93c; } .class-card-flare { border-top-color: var(--orange); }
.class-card-scorch { border-top-color: #ff3d3d; } .class-card-wildfire { border-top-color: var(--pink); }
.class-lvl { font: 600 11px var(--display); letter-spacing: .2em; color: var(--muted); margin-bottom: 6px; }
.class-filter button { border-radius: 0; clip-path: var(--slant); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: 14px; padding: 7px 18px; }
.class-filter button[aria-pressed="true"] { border-color: var(--cyan); background: rgba(47, 243, 255, .12); color: var(--cyan); }

/* Forms */
.quote-form input[type="text"], .quote-form input[type="email"], .quote-form input[type="tel"], .quote-form input[type="url"],
.quote-form input[type="number"], .quote-form select, .quote-form textarea { border-radius: 0; background: rgba(11, 6, 20, .8); font-family: var(--font); font-size: 17px; }
.quote-form input:focus, .quote-form select:focus, .quote-form textarea:focus { outline-color: var(--cyan); }
.job span { border-radius: 0; background: rgba(11, 6, 20, .7); }
.job input:checked + span { border-color: var(--cyan); background: rgba(47, 243, 255, .08); }
.job input:focus-visible + span { outline-color: var(--cyan); }
.checks input, .agree input { accent-color: var(--pink); }
.q-hint { border-radius: 0; }

/* FAQ and terms */
.faq details { clip-path: none; }
.faq details[open] { border-color: rgba(255, 47, 179, .55); }
.faq summary::after { color: var(--cyan); }
.terms-toc a { border-radius: 0; clip-path: var(--slant); padding: 6px 18px; }
.terms-toc a:hover { border-color: var(--cyan); color: var(--cyan); }

/* Footer */
.site-footer { border-top: 1px solid rgba(255, 47, 179, .3); letter-spacing: .03em; }
.footer-nav a:hover { color: var(--cyan); }
.email-reveal { border-radius: 0; color: var(--cyan); border-color: rgba(47, 243, 255, .45); }
.skip-link { border-radius: 0; color: #12061f; }

@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; }
  .screen img { height: 360px; }
  .stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .site-nav { background: var(--bg-2); border-bottom: 1px solid rgba(255, 47, 179, .3); }
  .site-nav a { letter-spacing: .1em; }
  .screen img { height: 260px; }
  .stats { gap: 10px; }
  .stat { padding: 14px; }
  .stat b { font-size: 17px; }
  .btn { padding: 14px 22px; }
}

/* The menu words are wider in this font, so the phone menu button takes over sooner */
.site-nav a { white-space: nowrap; }
@media (max-width: 1080px) {
  .menu-toggle { display: block; }
  .site-nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--bg-2); border-bottom: 1px solid rgba(255, 47, 179, .3); padding: 8px 16px 16px;
  }
  .site-nav.open { display: flex; }
  .site-nav a { padding: 12px 0; border-bottom: 1px solid var(--line); }
  .site-nav a.btn { margin-top: 12px; text-align: center; border: 0; padding: 15px 28px; }
}
/* PC titles are long, so the single PC page keeps them smaller */
.pc-info h1 { font-size: clamp(22px, 2.6vw, 30px); line-height: 1.2; }
.service h2 { font-size: 16px; }
/* Sale prices and free-extra deals */
.was-price { color: var(--muted); text-decoration-color: var(--pink); text-decoration-thickness: 2px; }
.sale-tag { font-family: var(--display); font-size: 11px; letter-spacing: .14em; color: #3dff9a; text-shadow: 0 0 10px rgba(61, 255, 154, .5); }
.promo-tag { border-color: rgba(47, 243, 255, .55); color: var(--cyan); background: rgba(47, 243, 255, .06); clip-path: var(--slant); padding: 8px 18px; }
.part-cat { font-family: var(--display); font-size: 11px; letter-spacing: .16em; color: var(--cyan); }
.part-desc, .part-facts { color: var(--soft); }
.custom-tag { border-radius: 0; font-family: var(--display); font-size: 11px; letter-spacing: .14em; color: var(--cyan); border-color: rgba(47, 243, 255, .6); clip-path: var(--slant); padding: 4px 14px; }
.mini-part { border-radius: 0; background: rgba(20, 11, 36, .85); clip-path: var(--cut); border-top: 3px solid var(--cyan); }
.mini-part.is-featured { border-top-color: #ffc93c; box-shadow: 0 0 40px rgba(255, 201, 60, .12); }
.mini-body h3 { font-size: 15px; }
.feature-tag { border-radius: 0; font-family: var(--display); font-size: 11px; letter-spacing: .14em; background: #ffc93c; color: #12061f; clip-path: var(--slant); padding: 5px 14px; }
.hero-link { display: block; }
.part-extras-title { font-family: var(--display); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--cyan); }
.part-extras { color: var(--soft); }
.part-extras li::before { color: var(--pink); }
.screen .hud:empty { display: none; }
.screen img:not([src]) { visibility: hidden; }