/*
Theme Name: White Tiger Digital — Circuit
Theme URI: https://whitetigerdigital.com
Description: Circuit dark direction — full animation, React-powered, pixel-perfect.
Version: 1.0.0
Author: White Tiger Digital Solutions
*/

html, body {
  margin: 0;
  padding: 0;
  background: #0A0E14;
  color: #E8EEF5;
  overflow-x: hidden;
}

/* Responsive: show desktop on ≥ 768px, mobile on < 768px */
.wt-desktop { display: block; }
.wt-mobile  { display: none; }

@media (max-width: 767px) {
  .wt-desktop { display: none; }
  .wt-mobile  { display: block; }
}

/* Remove WP admin bar interference */
#wpadminbar { position: fixed !important; }
html { scroll-padding-top: 32px; }

/* ===== Marquee (wt-marquee from shared.jsx) ===== */
.wt-marquee { overflow: hidden; position: relative; width: 100%; }
.wt-marquee__track {
  display: flex;
  gap: 80px;
  width: max-content;
  animation: wt-marquee 38s linear infinite;
}
@keyframes wt-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.wt-marquee--slow .wt-marquee__track { animation-duration: 60s; }

/* ===== Browser chrome (BrowserChrome from shared.jsx) ===== */
.wt-browser {
  background: #10151D;
  border-radius: 10px 10px 0 0;
  border-bottom: 1px solid #243042;
  display: flex;
  align-items: center;
  padding: 12px 16px;
  gap: 12px;
  font: 500 12px/1 var(--font-sans);
  color: #5A6578;
}
.wt-browser .lights { display: flex; gap: 6px; }
.wt-browser .lights span { width: 11px; height: 11px; border-radius: 50%; background: #243042; }
.wt-browser .url {
  flex: 1;
  background: #0A0E14;
  padding: 7px 12px;
  border-radius: 100px;
  display: flex; align-items: center; gap: 8px;
  font-size: 11.5px;
  letter-spacing: 0.02em;
  color: #8A95A5;
  border: 1px solid #243042;
}
.wt-browser .url::before {
  content: "";
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #45C8E5;
}

/* ===== Eyebrow (Eyebrow from shared.jsx) ===== */
.wt-eyebrow {
  font: 500 12px/1 var(--font-sans);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #45C8E5;
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.wt-eyebrow::before {
  content: "";
  width: 32px; height: 1px;
  background: currentColor;
  display: inline-block;
}

/* ===== Logo (Logo from shared.jsx) ===== */
.wt-logo {
  display: inline-flex; align-items: center; gap: 10px;
  font: 500 19px/1 var(--font-display);
  letter-spacing: -0.005em;
  color: inherit;
}
.wt-logo .word i { font-style: italic; color: #C8623E; font-weight: 400; }

/* ===== Buttons (Btn from shared.jsx) ===== */
.wt-btn {
  display: inline-flex; align-items: center; gap: 12px;
  font: 500 14px/1 var(--font-sans);
  letter-spacing: 0.01em;
  padding: 18px 26px;
  border-radius: 100px;
  cursor: pointer;
  border: none;
  transition: transform .25s ease, background .25s ease, color .25s ease, box-shadow .25s ease;
  text-decoration: none;
}

/* ===== Dot bullet ===== */
.wt-dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #45C8E5;
  margin-right: 10px;
  vertical-align: middle;
}

/* ===== Selection ===== */
::selection { background: #1E88D5; color: #E8EEF5; }