/*
Theme Name: XYBERU Blog
Description: Blog theme matching the XYBERU (xyberu.com) design system, meant to be installed so this WordPress site is reachable at xyberu.com/blogs (a folder path, not a subdomain). Ports the same header/footer, colors, fonts, and interactive nav (mega-menus, dark/light toggle, mobile nav) as the main React site, using the same xyberu-theme localStorage key so a visitor's dark/light choice carries over between the two. Uses Google Translate for language, since this install's own blog content isn't stored in multiple languages the way the React site's page copy is.
Author: XYBERU
Version: 1.0.0
Text Domain: xyberu-blog
*/

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700;800&family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  background: var(--bg-page);
  color: var(--text-primary);
  transition: background-color 0.25s ease, color 0.2s ease;
  overflow-x: hidden;
}
a { text-decoration: none; color: inherit; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
ul, ol { list-style: none; }
img { max-width: 100%; display: block; }

:root {
  --accent-blue: #1C7ED6;
  --accent-cyber: #BA5A5A;
  --accent-comply: #6F5CE0;
  --sp-gap: 12px;
}

[data-theme='dark'] {
  color-scheme: dark;
  --bg-page: #0A0E14;
  --bg-card: #12161D;
  --bg-raised: #1A1F28;
  --border: #22262E;
  --text-primary: #FFFFFF;
  --text-secondary: rgba(255,255,255,0.55);
  --text-tertiary: rgba(255,255,255,0.30);
  --logo-color: #FFFFFF;
  --nav-bg: rgba(10,14,20,0.97);
  --input-bg: rgba(255,255,255,0.04);
}

[data-theme='light'] {
  color-scheme: light;
  --bg-page: #FFFFFF;
  --bg-card: #F5F6F8;
  --bg-raised: #EAECEF;
  --border: #E3E5E8;
  --text-primary: #0A0E14;
  --text-secondary: rgba(10,14,20,0.58);
  --text-tertiary: rgba(10,14,20,0.34);
  --logo-color: #0A0E14;
  --nav-bg: rgba(255,255,255,0.97);
  --input-bg: #FFFFFF;
}

@keyframes fadeDown { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

::selection { background: var(--accent-blue); color: #fff; }