/*
  turing.css — site-wide design system for turing.london
  Dark, silver-on-black, derived from the Turing AI OS boot orb.

  Loaded on every page from base.html, after the legacy stylesheets so it wins.
  Page-specific styles (turingos.css, computers.css) build on these tokens.
*/

:root {
  --t-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --t-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Light. The names are unchanged from the dark scheme they replace, so the
     whole site turns over on this block: --t-black is the page's ground
     whatever colour that ground is, and every sheet that asks for it follows.
     Reverting is this block and the sweeps that went with it, in one commit.

     The accents are darkened from their dark-theme values. #4c8dff is a
     comfortable blue on near-black and washes out on white — text set in it
     fails contrast at body sizes — so each hue keeps its identity and loses
     some lightness. */
  --t-black: #ffffff;
  --t-ink: #f6f7f9;
  --t-surface: #ffffff;
  --t-surface-2: #f1f3f7;
  --t-line: rgba(9, 12, 20, 0.10);
  --t-line-strong: rgba(9, 12, 20, 0.20);

  --t-text: #0b0e14;
  --t-muted: #59616f;
  --t-dim: #838b99;

  --t-blue: #1f6bff;
  --t-violet: #7c46ef;
  --t-teal: #0f9e88;
  --t-warm: #c26a25;
  --t-red: #d63b3b;
  --t-arc: linear-gradient(90deg, #0f9e88, #1f6bff, #7c46ef, #c26a25);
  /* The display gradient runs dark-to-mid now. On black it went white to grey;
     the same idea the other way up, or the big type disappears. */
  --t-silver: linear-gradient(180deg, #0b0e14 0%, #333b4a 55%, #6b7386 100%);

  --t-radius: 14px;
  --t-radius-lg: 22px;
  /* A blue glow on white reads as a smudge rather than light, so what was a
     glow is a soft shadow. */
  --t-glow: 0 18px 60px rgba(9, 12, 20, 0.10);

  --t-nav-h: 74px;
}

/* ── Shell ─────────────────────────────────────────────── */

html {
  height: auto !important;
  background: var(--t-black);
  scroll-behavior: smooth;
}

/* Column flex keeps the footer at the bottom of short pages. */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0 !important;
  background: var(--t-black);
  color: var(--t-text);
  font-family: var(--t-font);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body > .content-wrapper { flex: 1 0 auto; }
body > .site-footer { flex-shrink: 0; }

::selection {
  background: rgba(31, 107, 255, 0.20);
  color: var(--t-text);
}

/* height:auto keeps intrinsic ratio when markup carries width/height attributes */
img { max-width: 100%; height: auto; }

a { color: var(--t-blue); }
a:hover { color: #0a4fd6; }

code, kbd, samp { font-family: var(--t-mono); font-size: 0.92em; }

h1, h2, h3, h4 {
  letter-spacing: -0.025em;
  color: var(--t-text);
}

/* ── Navbar ────────────────────────────────────────────── */

.navbar-wrapper {
  position: sticky !important;
  top: 0;
  z-index: 2000;
  background: rgba(255, 255, 255, 0.86) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--t-line);
  transition: background 0.3s ease;
}

.top-nav,
.top-nav.scrolled,
.top-nav .container-fluid {
  position: static !important;
  min-height: var(--t-nav-h);
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  font-family: var(--t-font) !important;
}

.top-nav .container-fluid {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.nav-logo {
  width: 30px;
  height: 30px;
  object-fit: contain;
}

.nav-logo-link { text-decoration: none; }
.nav-logo-link:hover { text-decoration: none; }

.brand-lockup {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

/* .top-nav prefix needed to outrank navbar.css, which paints these black */
.top-nav .brand-text-cultural {
  font-family: var(--t-font) !important;
  font-size: 1rem !important;
  font-weight: 650 !important;
  font-style: normal !important;
  letter-spacing: -0.015em;
  color: var(--t-text) !important;
  text-transform: none !important;
}

.top-nav .brand-subtitle-cultural {
  font-family: var(--t-font) !important;
  font-size: 0.7rem !important;
  font-weight: 400 !important;
  font-style: normal !important;
  letter-spacing: 0.04em;
  color: var(--t-dim) !important;
  text-transform: none !important;
}

.nav-logo-link:hover .brand-text-cultural,
.nav-logo-link:hover .brand-subtitle-cultural {
  color: var(--t-text) !important;
}

.nav-links { gap: 0.25rem; }

.nav-link-cultural,
.top-nav a,
.top-nav span {
  font-family: var(--t-font) !important;
  font-size: 0.92rem !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--t-muted) !important;
  text-decoration: none;
  transition: color 0.2s ease;
}

.top-nav .nav-links a {
  padding: 0.45rem 0.15rem;
  position: relative;
}

.top-nav .nav-links a::after {
  content: "";
  position: absolute;
  left: 0.15rem;
  right: 0.15rem;
  bottom: 0.1rem;
  height: 1.5px;
  background: var(--t-arc);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.top-nav .nav-links a:hover::after,
.top-nav .nav-links a.is-current::after { transform: scaleX(1); }

.top-nav a:hover,
.nav-link-cultural:hover { color: var(--t-text) !important; }

.top-nav .nav-links a.is-current { color: var(--t-text) !important; }

.top-nav .dropdown-menu {
  background: var(--t-surface);
  border: 1px solid var(--t-line-strong);
  border-radius: var(--t-radius);
}

.top-nav .dropdown-item {
  color: var(--t-muted) !important;
}

.top-nav .dropdown-item:hover {
  background: rgba(9, 12, 20, 0.06);
  color: var(--t-text) !important;
}

/* Cart chip */
.nav-cart {
  display: inline-flex !important;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.95rem !important;
  border: 1px solid var(--t-line-strong);
  border-radius: 999px;
  color: var(--t-text) !important;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.nav-cart:hover {
  background: rgba(9, 12, 20, 0.08);
  border-color: rgba(9, 12, 20, 0.32);
}

.nav-cart-count {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--t-blue);
  color: var(--t-text) !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  line-height: 1;
}

/* ── Layout primitives ─────────────────────────────────── */

.t-wrap {
  width: min(1180px, 100% - 3rem);
  margin-inline: auto;
}

.t-narrow {
  width: min(760px, 100% - 3rem);
  margin-inline: auto;
}

.t-section {
  padding-block: clamp(4rem, 8vw, 7rem);
  position: relative;
}

.t-section + .t-section { border-top: 1px solid var(--t-line); }

.t-eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--t-dim);
  margin: 0 0 1rem;
}

.t-h1 {
  font-size: clamp(2.4rem, 6vw, 4.2rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.02;
  margin: 0 0 1.25rem;
}

.t-h2 {
  font-size: clamp(1.9rem, 4vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin: 0 0 1rem;
}

.t-h3 {
  font-size: clamp(1.3rem, 2.4vw, 1.75rem);
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0 0 0.75rem;
}

.t-lead {
  font-size: clamp(1.02rem, 1.6vw, 1.2rem);
  line-height: 1.65;
  color: var(--t-muted);
  margin: 0;
}

.t-head {
  max-width: 720px;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.t-head-center { text-align: center; margin-inline: auto; }

.t-silver {
  background: var(--t-silver);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.t-gradient {
  background: var(--t-arc);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.t-grid { display: grid; gap: 1.25rem; }
.t-grid-2 { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.t-grid-3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.t-grid-4 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

/* ── Buttons ───────────────────────────────────────────── */

.t-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1.6rem;
  border-radius: 999px;
  font-family: var(--t-font);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.t-btn:hover { transform: translateY(-2px); text-decoration: none; }

.t-btn-primary { background: var(--t-text); color: #ffffff; }
.t-btn-primary:hover { background: #22262f; color: #ffffff; box-shadow: 0 12px 34px rgba(9, 12, 20, 0.18); }

.t-btn-ghost {
  background: rgba(9, 12, 20, 0.04);
  border-color: var(--t-line-strong);
  color: var(--t-text);
}

.t-btn-ghost:hover {
  background: rgba(9, 12, 20, 0.09);
  color: var(--t-text);
  border-color: rgba(9, 12, 20, 0.35);
}

.t-btn-blue {
  background: linear-gradient(180deg, var(--t-blue), #2f6fe0);
  color: #fff;
  box-shadow: 0 10px 28px rgba(31, 107, 255, 0.3);
}

.t-btn-blue:hover { color: #fff; filter: brightness(1.07); }

.t-btn-lg { padding: 1rem 2rem; font-size: 1rem; }
.t-btn-block { width: 100%; }

.t-actions { display: flex; flex-wrap: wrap; gap: 0.85rem; align-items: center; }

.t-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--t-text);
  text-decoration: none;
}

.t-link span { transition: transform 0.2s ease; }
.t-link:hover { color: var(--t-text); text-decoration: none; }
.t-link:hover span { transform: translateX(4px); }

.t-note { font-size: 0.85rem; color: var(--t-dim); margin: 1rem 0 0; }

/* ── Cards ─────────────────────────────────────────────── */

.t-card {
  background: linear-gradient(180deg, rgba(9, 12, 20, 0.045), rgba(9, 12, 20, 0.015));
  border: 1px solid var(--t-line);
  border-radius: var(--t-radius-lg);
  padding: clamp(1.5rem, 2.5vw, 2rem);
  transition: border-color 0.25s ease, transform 0.25s ease;
}

.t-card:hover { border-color: var(--t-line-strong); transform: translateY(-3px); }

.t-card h3 { font-size: 1.15rem; font-weight: 650; margin: 0 0 0.6rem; }
.t-card p { font-size: 0.95rem; line-height: 1.6; color: var(--t-muted); margin: 0; }

/* ── Forms ─────────────────────────────────────────────── */

label { color: var(--t-muted); font-size: 0.88rem; font-weight: 500; }

input[type="text"], input[type="email"], input[type="password"],
input[type="tel"], input[type="number"], input[type="search"],
select, textarea, .form-control, .form-select {
  width: 100%;
  padding: 0.8rem 1.1rem;
  border-radius: var(--t-radius);
  border: 1px solid var(--t-line-strong);
  background: rgba(9, 12, 20, 0.045) !important;
  color: var(--t-text) !important;
  font-family: var(--t-font);
  font-size: 0.95rem;
  outline: none;
  transition: border-color 0.2s ease, background 0.2s ease;
}

input::placeholder, textarea::placeholder { color: var(--t-dim); }

input:focus, select:focus, textarea:focus,
.form-control:focus, .form-select:focus {
  border-color: var(--t-blue) !important;
  background: rgba(9, 12, 20, 0.075) !important;
  box-shadow: 0 0 0 3px rgba(31, 107, 255, 0.16) !important;
  color: var(--t-text) !important;
}

select option { background: var(--t-surface); color: var(--t-text); }

fieldset { border: 0; padding: 0; margin: 0; }

/* ── Flash messages ───────────────────────────────────── */

.alert {
  border-radius: var(--t-radius);
  border: 1px solid var(--t-line-strong);
  background: var(--t-surface);
  color: var(--t-text);
  font-size: 0.92rem;
}

.alert-success { border-color: rgba(15, 158, 136, 0.4); background: rgba(15, 158, 136, 0.08); }
.alert-warning { border-color: rgba(194, 106, 37, 0.4); background: rgba(194, 106, 37, 0.08); }
.alert-danger, .alert-error { border-color: rgba(255, 107, 107, 0.4); background: rgba(255, 107, 107, 0.08); }
.alert-info { border-color: rgba(31, 107, 255, 0.4); background: rgba(31, 107, 255, 0.08); }

.alert .btn-close { filter: invert(1) grayscale(1) brightness(2); opacity: 0.6; }

/* ── Tables ────────────────────────────────────────────── */

.table, .table > :not(caption) > * > * {
  color: var(--t-text) !important;
  background: transparent !important;
  border-color: var(--t-line) !important;
}

.table thead th {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--t-dim) !important;
  border-bottom: 1px solid var(--t-line-strong) !important;
}

.table tbody tr:hover > * { background: rgba(9, 12, 20, 0.035) !important; }

/* ── Legal / long-form copy ────────────────────────────── */

/* The translated copy ships wrapped in .legal-box, and live.css paints both
   that and .legal-content for a white page — override the lot. */
.legal-content {
  width: min(820px, 100% - 3rem);
  margin: 0 auto;
  padding-block: clamp(3rem, 7vw, 5.5rem);
  background: transparent !important;
  color: var(--t-muted);
  font-size: 1rem;
  line-height: 1.75;
}

.legal-content .legal-box {
  max-width: none;
  padding: 0;
  color: var(--t-muted);
  line-height: 1.75;
}

.legal-content .legal-box h1 {
  font-size: clamp(2rem, 4.5vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  margin: 0 0 1.5rem;
  color: var(--t-text);
}

.legal-content .legal-box h2,
.legal-content .legal-box h3 {
  font-size: 1.15rem;
  font-weight: 650;
  margin: 2.75rem 0 0.85rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--t-line);
  color: var(--t-text);
}

.legal-content .legal-box p i {
  display: block;
  color: var(--t-dim);
  font-style: normal;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 2.5rem;
}

.legal-content h1 {
  font-size: clamp(2rem, 4.5vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  margin: 0 0 1.5rem;
  color: var(--t-text);
}

.legal-content h2 {
  font-size: 1.35rem;
  font-weight: 650;
  margin: 2.75rem 0 0.85rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--t-line);
  color: var(--t-text);
}

.legal-content h3 {
  font-size: 1.08rem;
  font-weight: 650;
  margin: 1.85rem 0 0.6rem;
  color: var(--t-text);
}

.legal-content p, .legal-content li { margin-bottom: 1rem; }
.legal-content ul, .legal-content ol { padding-left: 1.35rem; }
.legal-content strong, .legal-content b { color: var(--t-text); font-weight: 600; }
.legal-content a { color: var(--t-blue); text-decoration: underline; text-underline-offset: 3px; }
.legal-content hr { border-color: var(--t-line); margin: 2.5rem 0; }

.legal-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  font-size: 0.92rem;
}

.legal-content th, .legal-content td {
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--t-line);
  text-align: left;
}

.legal-content th { color: var(--t-text); background: rgba(9, 12, 20, 0.03); }

/* ── Footer ────────────────────────────────────────────── */

.site-footer {
  background: var(--t-black);
  border-top: 1px solid var(--t-line);
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
  margin-top: 0;
}

.footer-content {
  width: min(1180px, 100% - 3rem);
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
}

.footer-content p {
  margin: 0;
  font-size: 0.82rem;
  color: var(--t-dim);
}

.footer-links {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.4rem;
  margin: 0;
  padding: 0;
  justify-content: flex-end;
}

/* li needed to outrank live.css, which sets these near-black and uppercase */
.footer-links li a {
  font-size: 0.82rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--t-muted);
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-links li a:hover { color: var(--t-text); }

/* ── Cookie banner ─────────────────────────────────────── */

#cookie-consent {
  background: rgba(255, 255, 255, 0.96) !important;
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--t-line);
  color: var(--t-muted) !important;
  box-shadow: 0 -10px 30px rgba(9, 12, 20, 0.06);
  font-size: 0.85rem;
  padding: 1rem 1.5rem !important;
}

#cookie-consent .btn {
  border-radius: 999px;
  border: 1px solid var(--t-line-strong);
  color: var(--t-text);
  font-size: 0.82rem;
  padding: 0.35rem 1.1rem;
}

#cookie-consent .btn:hover { background: rgba(9, 12, 20, 0.08); color: var(--t-text); }

/* ── Scroll reveal ─────────────────────────────────────── */

.t-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.t-reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .t-reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ── Responsive ────────────────────────────────────────── */

@media (max-width: 900px) {
  .top-nav .container-fluid { flex-wrap: wrap; row-gap: 0.5rem; padding-block: 0.7rem; }
  .navbar-center { order: 3; width: 100%; }
  .nav-links { justify-content: flex-start !important; overflow-x: auto; padding-bottom: 0.25rem; }
  .brand-subtitle-cultural { display: none !important; }
}

@media (max-width: 560px) {
  .t-wrap, .t-narrow { width: calc(100% - 2.5rem); }
  .footer-content { flex-direction: column; align-items: flex-start; }
  .footer-links { justify-content: flex-start; }
}