/* ═══════════════════════════════════════════════════════════════
   Bartlett Electronics — theme layer
   Loaded LAST on every page so it has the final say.
   Brings the marketing site in line with apps. and checkin.
   bartlettelectronics.com: system type, blue/white/grey, white cards
   with soft shadows, no neon glows. Tokens live in site.css.
═══════════════════════════════════════════════════════════════ */

/* ── Base ─────────────────────────────────────────────────────── */
body { font: 15px/1.6 var(--body); background: var(--bg); color: var(--ink); }
a { color: var(--blue); }
::selection { background: var(--blueSoft); color: var(--ink); }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 4px; }

#circuit-canvas { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: 1; }

/* ── Typography: system font, tighter display sizes ───────────── */
h1, h2, h3, h4,
.page-hero h1, .hero-h1, .device-hero h1, .section-h2, .cta-h2,
.card-title, .why-title, .step-title, .repair-card-name, .related-card-name,
.footer-col-title, .quote-modal-title, .mobile-nav-link, .form-title {
  font-family: var(--body) !important;
}
.page-hero h1, .device-hero h1 { font-weight: 750; letter-spacing: -0.025em; line-height: 1.08; }
.hero-h1 { font-weight: 800 !important; letter-spacing: -0.03em !important; line-height: 1.04 !important; }
.section-h2, .cta-h2 { font-weight: 750; letter-spacing: -0.02em; line-height: 1.15; }
.card-title, .why-title, .step-title, .repair-card-name { font-weight: 650; letter-spacing: -0.01em; }
.page-hero h1 .accent, .section-h2 .accent, .hero-h1 .accent, .device-hero h1 .accent, .accent { color: var(--blue); }
.hero-h1 .dim { color: var(--ink3) !important; }

/* Eyebrows and small labels: small caps-style sans, like the apps site */
.section-label, .page-hero-eyebrow, .device-hero-eyebrow,
.info-item-label, .device-trust-label, .quote-modal-sub, .hero-meta-label, .badge {
  font-family: var(--body) !important;
  font-weight: 650;
  letter-spacing: 0.08em;
}
.section-label, .page-hero-eyebrow, .device-hero-eyebrow { font-size: 12px; color: var(--blue); }
.section-label::before, .page-hero-eyebrow::before, .device-hero-eyebrow::before { background: var(--blueLine); }
.info-item-label, .device-trust-label { color: var(--ink3); font-size: 11.5px; }
.footer-copy, .footer-legal a, .header-phone { font-family: var(--body) !important; letter-spacing: 0.01em; }

/* Prices, ticket numbers and the like stay monospace */
code, kbd, .mono { font-family: var(--mono); }

/* ── Header ───────────────────────────────────────────────────── */
.site-header {
  background: var(--header-bg) !important;
  border-bottom: 1px solid var(--line);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
}
.logo-img { height: 44px !important; width: auto; filter: none !important; }
.footer-logo-img { height: 54px !important; width: auto; filter: none !important; }
:root[data-theme="dark"] .logo-img,
:root[data-theme="dark"] .footer-logo-img { filter: brightness(0) invert(1) !important; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo-img,
  :root:not([data-theme="light"]) .footer-logo-img { filter: brightness(0) invert(1) !important; }
}
.main-nav a { color: var(--ink2); font-size: 14px; font-weight: 500; padding: 7px 11px; border-radius: 8px; }
.main-nav a:hover { color: var(--ink); background: var(--bg2); }
.main-nav a.active { color: var(--blue); background: var(--blueSoft); font-weight: 600; }
.header-phone { color: var(--ink2); border-color: var(--line); border-radius: 8px; font-size: 13px; }
.header-phone:hover { color: var(--blue); border-color: var(--blue); }
.hamburger span { background: var(--ink2); }
.main-nav a, .nav-cta .btn, .header-phone { white-space: nowrap; }
/* Between tablet and laptop widths, drop the extras before anything wraps */
@media (max-width: 1320px) { .header-phone { display: none; } .main-nav a { padding: 7px 9px; } }
@media (max-width: 1140px) { .nav-cta .btn-ghost { display: none; } }
@media (max-width: 1000px) { .main-nav a { padding: 7px 6px; font-size: 14px; } }

.theme-toggle {
  display: grid; place-items: center; flex: none;
  width: 36px; height: 36px; padding: 0;
  border-radius: 9px; border: 1px solid var(--line);
  background: var(--card); color: var(--ink2); cursor: pointer;
}
.theme-toggle:hover { border-color: var(--blue); color: var(--blue); }
.theme-toggle svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.mobile-nav { background: rgba(10, 18, 30, 0.45); }
.mobile-nav-drawer { background: var(--card); border-left: 1px solid var(--line); box-shadow: var(--shadow-lg); }
.mobile-nav-link { font-size: 16px; font-weight: 600; color: var(--ink2); }
.mobile-nav-link:hover, .mobile-nav-link.active { color: var(--blue); background: var(--blueSoft); }
.mobile-nav-close { background: var(--bg2); border-color: var(--line); color: var(--ink2); }

/* ── Buttons ──────────────────────────────────────────────────── */
.btn { font-family: var(--body); font-weight: 600; border-radius: 10px; letter-spacing: 0; transition: background .15s, border-color .15s, color .15s, transform .05s; }
.btn:active { transform: translateY(1px); }
.btn-primary, .btn.primary {
  background: var(--blue) !important; border: 1px solid var(--blue) !important;
  color: #fff !important; box-shadow: none !important;
}
.btn-primary:hover, .btn.primary:hover {
  background: var(--blue2) !important; border-color: var(--blue2) !important;
  color: #fff !important; box-shadow: none !important; transform: none;
}
.btn-ghost {
  background: var(--card) !important; color: var(--ink) !important;
  border: 1px solid var(--line) !important; box-shadow: none !important;
}
.btn-ghost:hover { border-color: var(--blue) !important; color: var(--blue) !important; background: var(--card) !important; }
.btn-lg { padding: 13px 24px; font-size: 15px; border-radius: 12px; }

/* ── Sections and dividers ────────────────────────────────────── */
.glow-divider { height: 1px; background: var(--line) !important; opacity: 1 !important; }
.page-hero, .device-hero { background: transparent !important; border-bottom: 1px solid var(--line); }
.surface-section { background: color-mix(in srgb, var(--card) 72%, transparent); border-color: var(--line); }
.page-hero-sub, .section-sub, .device-hero-sub, .hero-sub { color: var(--ink2); }

/* ── Cards: white, hairline border, soft shadow, no glow ──────── */
.card, .svc-card, .why-card, .value-card, .stat-card, .stat-box, .platform-card, .use-case-card,
.repair-card, .repair-tile, .review-card, .review-tile, .related-card, .contact-block,
.mail-form-card, .contact-form-card, .quote-card, .cta-card, .cta-review-band, .search-card,
.device-hero-card, .faq-item, .device-faq-item, .timeline-item, .highlight-strip, .info-strip,
.quote-iframe-wrap, .pricing-table, .hours-table, .step, .ticket-card {
  border-color: var(--line) !important;
}
.card, .svc-card, .why-card, .value-card, .stat-card, .stat-box, .platform-card, .use-case-card,
.repair-card, .repair-tile, .review-card, .review-tile, .related-card, .contact-block,
.mail-form-card, .contact-form-card, .quote-card, .cta-card, .cta-review-band, .search-card,
.device-hero-card, .ticket-card {
  background: var(--card) !important;
  border-radius: var(--r) !important;
  box-shadow: var(--shadow) !important;
}
.card::before, .svc-card::before, .stat-card::before, .stat-box::before, .use-case-card::before,
.repair-card::before, .repair-tile::before, .review-tile::before, .cta-glow, .cta-review-glow {
  display: none !important;
}
.card:hover, .svc-card:hover, .why-card:hover, .value-card:hover, .platform-card:hover,
.use-case-card:hover, .repair-card:hover, .repair-tile:hover, .review-tile:hover,
.related-card:hover, .contact-block:hover {
  border-color: var(--blueLine) !important;
  box-shadow: var(--shadow-lg) !important;
  transform: translateY(-2px);
}

/* Icon tiles inside cards */
.card-icon, .why-icon, .info-item-icon, .repair-card-icon, .related-card-icon, .use-case-icon,
.device-trust-icon, .contact-block-icon, .step-num, .orbit-icon {
  background: var(--blueSoft) !important;
  border: 1px solid transparent !important;
  color: var(--blue);
  box-shadow: none !important;
}
.repair-card-icon, .related-card-icon, .use-case-icon {
  display: grid !important; place-items: center;
  width: 46px; height: 46px; border-radius: 12px; font-size: 22px;
}
.repair-card-icon svg, .related-card-icon svg, .use-case-icon svg { width: 24px; height: 24px; }
.orbit-icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; font-size: 15px; }
.step-num { color: var(--blue) !important; font-family: var(--body) !important; font-weight: 750; }

/* Badges and pills */
.badge-accent { background: var(--blueSoft); border-color: var(--blueLine); color: var(--blue); }
.badge-green { background: var(--okSoft); border-color: transparent; color: var(--ok); }
.badge-amber { background: var(--warnSoft); border-color: transparent; color: var(--warn); }
.filter-btn { font-family: var(--body) !important; border-radius: 99px !important; }
.filter-btn.active { background: var(--blue) !important; border-color: var(--blue) !important; color: #fff !important; }

/* Review stars read better in the shop's warm gold than in blue */
.review-stars, .review-tile-stars, .platform-stars { color: #e3a008 !important; }

/* Ticker on the homepage */
.ticker-bar { background: var(--card) !important; border-color: var(--line) !important; }
.ticker-item { color: var(--ink2) !important; font-family: var(--body) !important; }

/* ── Forms (shared with checkin) ──────────────────────────────── */
.form-label { font-family: var(--body) !important; font-size: 13px !important; font-weight: 600; letter-spacing: 0 !important; text-transform: none !important; color: var(--ink2) !important; }
.form-input, .form-select, .form-textarea, .search-input {
  font: 16px var(--body) !important;
  background: var(--card) !important; color: var(--ink) !important;
  border: 1px solid var(--line) !important; border-radius: var(--r-sm) !important;
  padding: 11px 12px !important;
}
.form-input:focus, .form-select:focus, .form-textarea:focus, .search-input:focus {
  border-color: var(--blue) !important; box-shadow: 0 0 0 3px var(--blueSoft) !important; outline: none;
}

/* ── FAQ accordions ───────────────────────────────────────────── */
.device-faq-q, .faq-q { font-family: var(--body) !important; font-weight: 650; }
.device-faq-icon, .faq-icon { color: var(--blue); }

/* ── Quote modal ──────────────────────────────────────────────── */
.quote-modal-overlay { background: rgba(10, 18, 30, 0.5) !important; backdrop-filter: blur(3px); }
.quote-modal { background: var(--card) !important; border: 1px solid var(--line) !important; border-radius: 16px !important; box-shadow: var(--shadow-lg) !important; }
.quote-modal-close { background: var(--bg2) !important; border-color: var(--line) !important; }

/* ── Info strip + footer ──────────────────────────────────────── */
.info-strip { background: var(--card) !important; }
.info-divider { background: var(--line) !important; }
.site-footer { background: var(--card) !important; border-top: 1px solid var(--line) !important; }
.footer-col-title { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; color: var(--ink); }
.footer-links a { color: var(--ink2); }
.footer-links a:hover { color: var(--blue); }
.footer-social a { background: var(--bg2) !important; border-color: var(--line) !important; color: var(--ink2) !important; font-family: var(--body) !important; }
.footer-social a:hover { background: var(--blueSoft) !important; border-color: var(--blueLine) !important; color: var(--blue) !important; }
.footer-bottom { border-color: var(--line) !important; }
.footer-copy, .footer-legal a { color: var(--ink3); font-size: 12.5px; }

/* ── Homepage hero stats ──────────────────────────────────────── */
.hero-meta-num { font-family: var(--body) !important; color: var(--ink) !important; font-weight: 750; }

/* ── Touch behaviour ──────────────────────────────────────────────
   Older pages forced touch-action:pan-y everywhere (blocks pinch-zoom)
   and overscroll containment (blocks pull-to-refresh). Restore both. */
html, body { overscroll-behavior-y: auto !important; }
*, *::before, *::after { touch-action: manipulation !important; }

/* Device pages: hero image and trust card */
.device-hero-img { filter: drop-shadow(0 16px 30px rgba(15, 28, 46, 0.22)) !important; }

/* ── Reduced motion ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* ── Device-page hero: let the photo shrink; move the trust card below on mid widths ── */
.device-hero-inner { grid-template-columns: minmax(0, 1fr) auto auto; }
.device-hero-img { max-width: min(100%, 30vw) !important; height: auto !important; object-fit: contain; }
@media (max-width: 900px) {
  .device-hero-inner { grid-template-columns: minmax(0, 1fr); }
  .device-hero-img { max-width: min(100%, 300px) !important; max-height: 260px !important; }
}
@media (max-width: 1180px) and (min-width: 901px) {
  .device-hero-inner { grid-template-columns: minmax(0, 1fr) auto; row-gap: 28px; }
  .device-hero-card { grid-column: 1 / -1; flex-direction: row !important; flex-wrap: wrap; justify-content: space-between; min-width: 0 !important; padding: 20px 24px !important; }
}