/* KONUM: CodeAndSystems.Website\wwwroot\css\theme.css
   CODE AND SYSTEMS LTD - light / dark. The light theme is the site as it always was (site.css tokens). The dark one
   redefines the same tokens under html[data-theme="dark"]; each page's own dark rules are at the end of its
   css/pages/*.css. The theme is set in the <head> before anything paints (no white flash), from the visitor's choice
   in this browser, else the device's setting. Loaded last. */

:root {
  color-scheme: light;
  --card: #ffffff;
  --nav-bg: rgba(255,255,255,0.92);
  --nav-bg2: rgba(255,255,255,0.98);
}
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0a0e17;
  --bg2: #0e1422;
  --bg3: #151d2f;
  --border: #1e2840;
  --border2: #2a3654;
  --purple-xl: rgba(124,58,237,0.16);
  --text: #e8edf6;
  --muted: #8e9ab0;
  --muted2: #aab4c6;
  --card: #10172a;
  --nav-bg: rgba(10,14,23,0.82);
  --nav-bg2: rgba(10,14,23,0.96);
}
html[data-theme="dark"] body { background: var(--bg); color: var(--text); }

/* ---- the menu */
/* phone menu: "Book a Call" keeps white text on the gradient (the menu link colour and grey hover won over it) */
.mobile-menu a.btn-primary, .mobile-menu a.btn-primary:hover { color: #fff; background: var(--grad); justify-content: center; font-weight: 600; }
.nav { background: var(--nav-bg); }
.nav.scrolled { background: var(--nav-bg2); }
html[data-theme="dark"] .nav.scrolled { box-shadow: 0 1px 20px rgba(0,0,0,0.5); }
.mobile-menu { background: var(--card); }
html[data-theme="dark"] .hamburger span { background: var(--muted2); }

/* ---- the light / dark button */
.theme-btn { width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--border2); background: transparent; color: var(--muted2); display: grid; place-items: center; cursor: pointer; flex-shrink: 0; transition: color .2s, border-color .2s, background .2s; padding: 0; }
.theme-btn:hover { color: var(--purple-l); border-color: var(--purple-l); background: var(--purple-xl); }
.theme-btn:focus-visible { outline: 2px solid var(--purple-l); outline-offset: 2px; }
.theme-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.theme-btn .sun { display: none; }
html[data-theme="dark"] .theme-btn .sun { display: block; }
html[data-theme="dark"] .theme-btn .moon { display: none; }
@media (max-width: 760px) {
  .nav-inner { gap: 10px; }
  .nav-brand { min-width: 0; flex-shrink: 1; }
  .nav-brand > div { min-width: 0; }
  .theme-btn { margin-left: auto; width: 36px; height: 36px; }
  .hamburger { margin-left: 2px !important; margin-right: -6px; flex-shrink: 0; }
  .brand-sub { white-space: nowrap; }
}
@media (max-width: 400px) {
  .brand-sub { display: none; }
  .brand-name { white-space: nowrap; }
}
@media (max-width: 370px) {
  .brand-name { white-space: normal; }
}

/* ---- the brand: a soft glow behind the logo in the dark */
html[data-theme="dark"] .brand-logo { filter: drop-shadow(0 4px 14px rgba(124,58,237,0.35)) brightness(1.1) contrast(1.15); }

/* ---- skip link (keyboard users) */
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 1000; background: var(--purple); color: #fff; padding: 10px 16px; border-radius: 8px; font-size: 13px; font-weight: 600; text-decoration: none; transition: top .15s; }
.skip-link:focus { top: 12px; }

/* ---- 404 */
.nf { min-height: 62vh; display: grid; place-items: center; text-align: center; padding: 140px 20px 80px; }
.nf-code { font-family: 'Bricolage Grotesque', sans-serif; font-size: 96px; font-weight: 800; line-height: 1; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.nf h1 { font-family: 'Bricolage Grotesque', sans-serif; font-size: 28px; margin: 14px 0 8px; color: var(--text); }
.nf p { color: var(--muted); font-weight: 300; max-width: 460px; margin: 0 auto 24px; }
.nf-acts { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }