/* VNTRO.NET – Core Styles */
/* Theme tokens - Dark mode (default) */
:root{
  --bg:#0a0a10;
  --panel:#11111a;
  --ink:#ECECF3;
  --muted:#9aa0b3;
  --accent:#FF8C42;
  --accent-2:#FF6B35;
  --success:#00d68f;
  --warning:#ffb020;
  --danger:#ff4d4d;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}

/* Light mode via prefers-color-scheme (if no data-theme set) */
@media (prefers-color-scheme: light){
  html:not([data-theme]) {
    --bg:#fbfbfd;
    --panel:#ffffff;
    --ink:#0b0b12;
    --muted:#4a4f61;
    --accent:#FF6600;
    --accent-2:#FF8C00;
  }
}

/* Light mode via data-theme attribute (highest priority) */
html[data-theme="light"] {
  --bg:#fbfbfd;
  --panel:#ffffff;
  --ink:#0b0b12;
  --muted:#4a4f61;
  --accent:#FF6600;
  --accent-2:#FF8C00;
}

/* Dark mode via data-theme attribute */
html[data-theme="dark"] {
  --bg:#0a0a10;
  --panel:#11111a;
  --ink:#ECECF3;
  --muted:#9aa0b3;
  --accent:#FF8C42;
  --accent-2:#FF6B35;
}

html{ box-sizing: border-box; scroll-behavior: smooth }
*,*:before,*:after{ box-sizing:inherit }
body{
  margin:0; 
  font: 16px/1.6 "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color:var(--ink); 
  background:radial-gradient(1200px 800px at 10% -10%, #0f0f18 0%, transparent 60%), var(--bg);
  background-attachment: fixed;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Light mode background adjustment */
html[data-theme="light"] body {
  background:radial-gradient(1200px 800px at 10% -10%, rgba(251,251,253,0.5) 0%, transparent 60%), var(--bg);
}

@media (prefers-color-scheme: light) {
  html:not([data-theme]) body {
    background:radial-gradient(1200px 800px at 10% -10%, rgba(251,251,253,0.5) 0%, transparent 60%), var(--bg);
  }
}

/* Layout helpers */
.container{ 
  width:min(1120px, 92vw); 
  margin:0 auto; 
  padding: clamp(16px, 2.5vw, 32px);
}

.flex-between{ 
  display:flex; 
  align-items:center; 
  justify-content:space-between; 
  gap:16px;
  position: relative;
}

.grid-2{ 
  display:grid; 
  grid-template-columns: 1.1fr 1fr; 
  gap: clamp(16px, 3vw, 36px);
  align-items: start;
}

.grid-3{ 
  display:grid; 
  grid-template-columns: repeat(3,1fr); 
  gap:20px;
}

.grid-4{ 
  display:grid; 
  grid-template-columns: repeat(4,1fr); 
  gap:20px;
}

/* Responsive grid breakpoints */
@media (max-width: 900px){ 
  .grid-2,.grid-3,.grid-4{ 
    grid-template-columns:1fr;
  }
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .container {
    padding: 1rem;
  }
  
  .grid-2 {
    gap: 1.5rem;
  }
  
  section {
    padding: clamp(24px, 4vw, 48px) 0;
  }
}

/* Header */
.site-header{
  position:sticky; top:0; inset-inline:0; backdrop-filter: blur(10px);
  background: color-mix(in oklab, var(--bg), transparent 20%);
  border-bottom:1px solid color-mix(in oklab, var(--ink), transparent 85%);
  z-index:50;
}
.logo-wrap{ display:flex; align-items:center; gap:.75rem }
.logo-wrap img{ 
  width:36px; 
  height:36px;
  display: block;
  /* Remove any borders or backgrounds that might cause boxes */
  border: none;
  background: none;
  outline: none;
  /* Ensure SVG doesn't have extra spacing */
  vertical-align: middle;
  /* Remove any default image styling */
  padding: 0;
  margin: 0;
  /* Logo SVG is black by default - invert for dark mode (default) */
  filter: invert(1);
}

/* Light mode via prefers-color-scheme - no inversion (logo stays black) */
@media (prefers-color-scheme: light){
  html:not([data-theme]) .logo-wrap img{ filter: invert(0); }
}

/* Theme toggle - when data-theme is explicitly set, use that (highest priority) */
html[data-theme="light"] .logo-wrap img{ filter: invert(0); }
html[data-theme="dark"] .logo-wrap img{ filter: invert(1); }
.brand{ font-weight:700; letter-spacing:.06em }
.brand .dot{ color:var(--accent) }

nav ul{ list-style:none; display:flex; gap:18px; padding:0; margin:0 }
nav a{ 
  text-decoration:none; 
  color:var(--ink); 
  opacity:.85;
  /* Ensure navigation links are accessible */
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
}
nav a[aria-current="page"]{ color:var(--accent); font-weight: 600; }
nav a:hover,
nav a:focus-visible{ 
  color:var(--accent);
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Desktop navigation - always visible */
#primary-nav {
  display: block;
}

#primary-nav ul {
  display: flex;
}

/* Mobile menu button - hidden on desktop */
#menu-btn {
  display: none;
}

/* Mobile navigation */
@media (max-width: 768px) {
  #menu-btn {
    display: inline-flex;
  }
  
  #primary-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--panel);
    border-bottom: 1px solid color-mix(in oklab, var(--ink), transparent 85%);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    display: block;
  }
  
  #primary-nav[data-open="true"] {
    max-height: 500px;
  }
  
  #primary-nav[data-open="false"] {
    max-height: 0;
  }
  
  #primary-nav ul {
    flex-direction: column;
    padding: 1rem;
    gap: 0.5rem;
  }
  
  #primary-nav li {
    width: 100%;
  }
  
  #primary-nav a {
    display: block;
    padding: 0.75rem;
    border-radius: 8px;
  }
  
  #primary-nav a:hover {
    background: color-mix(in oklab, var(--ink), transparent 90%);
  }
}

/* Tablet adjustments */
@media (min-width: 769px) and (max-width: 1024px) {
  .grid-2 {
    grid-template-columns: 1fr;
  }
}

#theme-toggle{
  border:1px solid color-mix(in oklab, var(--ink), transparent 80%);
  background: linear-gradient(180deg, color-mix(in oklab,var(--panel),#1a1a28 30%), var(--panel));
  color:var(--ink); border-radius:10px; padding:.5rem .75rem; cursor:pointer;
}

/* Hero */
.hero{ 
  position:relative; 
  overflow:hidden; 
  border-bottom:1px solid #141426;
  min-height: clamp(300px, 40vw, 500px);
}

.hero .glow{
  position:absolute; inset:auto -20% -40% -20%;
  height:420px; background:radial-gradient(closest-side,#151530 20%, transparent 70%);
  filter: blur(40px); opacity:.8; pointer-events:none;
}
.hero h1{ 
  font-size: clamp(2rem, 5vw, 3.5rem); 
  line-height:1.12; 
  margin:.25em 0;
  min-height: clamp(2.5rem, 6vw, 4.5rem);
  /* Prevent layout shift by containing the typewriter */
  display: block;
  max-width: 100%;
}
/* Typewriter span - fixed width to prevent layout shift */
.hero h1 #tw {
  display: inline-block;
  text-align: left;
  vertical-align: baseline;
  white-space: nowrap;
  /* Prevent overflow from affecting layout */
  overflow: hidden;
  max-width: 100%;
}
.hero p.lede{ font-size: clamp(1.05rem, 2.2vw, 1.25rem); color:var(--muted) }
.btn{
  display:inline-flex; align-items:center; gap:.5rem; border-radius:12px;
  padding:.75rem 1rem; font-weight:600; text-decoration:none;
  /* Button text color - white for orange gradient (both modes for accessibility) */
  color: #ffffff;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  box-shadow: var(--shadow);
}
.btn.secondary{ background: none; border:1px solid color-mix(in oklab, var(--ink), transparent 80%); color:var(--ink) }

/* Sections */
section{ padding: clamp(36px, 6vw, 72px) 0; border-bottom:1px solid color-mix(in oklab, var(--ink), transparent 90%) }
.section-title{ font-size: clamp(1.25rem, 3vw, 1.75rem); margin: 0 0 12px }
.section-sub{ color:var(--muted); margin: 0 0 24px }

.card{
  background:linear-gradient(180deg, color-mix(in oklab, var(--panel), #0b0b16 10%), var(--panel));
  border:1px solid color-mix(in oklab, var(--ink), transparent 88%);
  border-radius:16px; padding:16px 18px; box-shadow: var(--shadow);
}
.card h3{ margin:.25rem 0 .5rem }
.card p{ color:var(--muted) }
.card .tiny{ font-size:.85rem; color:var(--muted) }

/* Form styling */
form.card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

form.card label {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  color: var(--ink);
}

form.card input,
form.card textarea {
  padding: 0.75rem;
  border: 1px solid color-mix(in oklab, var(--ink), transparent 70%);
  border-radius: 8px;
  background: var(--panel);
  color: var(--ink);
  font-family: inherit;
  font-size: 1rem;
  transition: border-color 0.2s ease;
}

form.card input:focus,
form.card textarea:focus {
  outline: none;
  border-color: var(--accent);
}

form.card textarea {
  min-height: 120px;
  resize: vertical;
}

form.card button[type="submit"] {
  align-self: flex-start;
  margin-top: 0.5rem;
}

.badge{ display:inline-block; padding:.15rem .5rem; border-radius:999px; border:1px solid color-mix(in oklab, var(--ink), transparent 75%); color:var(--muted); font-size:.75rem }
kbd.konami{ padding:.15rem .35rem; border-radius:6px; border:1px solid #3b3b55; background:#0b0b16; color:#b8c0ff; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace }

/* Footer */
.site-footer{ color:var(--muted) }
.site-footer a{ color:var(--muted) }
small.legal{ display:block; margin-top:8px; font-size:.8rem; opacity:.8 }

/* Cyber Mode – Konami Easter egg */
body[data-mode="cyber"]{
  --bg:#05050a;
  --panel:#070711;
  --ink:#e3f5ff;
  --muted:#9ad0ff;
  --accent:#1affd5;
  --accent-2:#a855f7;
  background-image:
   radial-gradient(600px 400px at 80% -10%, rgba(26,255,213,.08), transparent 60%),
   radial-gradient(800px 600px at -10% 120%, rgba(168,85,247,.08), transparent 60%),
   linear-gradient(180deg, #05050a, #070711);
}
.cyber-banner{ display:none; position:fixed; inset:auto 16px 16px 16px; z-index:999; padding:12px 16px; border-radius:12px; background:#0b1520; border:1px solid #1f2c3a; color:#bfe9ff; box-shadow: var(--shadow) }
body[data-mode="cyber"] .cyber-banner{ display:block }

/* Skip link - hidden by default, visible on focus */
.skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  z-index: 100;
  padding: 1rem 1.5rem;
  background: var(--accent);
  color: #ffffff;
  text-decoration: none;
  font-weight: 600;
  border-radius: 0 0 8px 0;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  transition: top 0.2s ease;
}

.skip-link:focus {
  top: 0;
  outline: 3px solid var(--accent-2);
  outline-offset: 2px;
}

/* Additional skip links for major sections */
.skip-to-section {
  position: absolute;
  top: -100px;
  left: 0;
  z-index: 100;
  padding: 0.75rem 1.25rem;
  background: var(--panel);
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  border: 2px solid var(--accent);
  border-radius: 0 0 8px 0;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  transition: top 0.2s ease;
}

.skip-to-section:focus {
  top: 0;
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* Improved focus indicators for keyboard navigation */
*:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Remove outline for mouse users */
*:focus:not(:focus-visible) {
  outline: none;
}

/* Enhanced focus styles for interactive elements */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

/* Ensure main content is focusable when skip link is used */
main:focus {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Better heading hierarchy - ensure proper semantic structure */
h1 { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 800; }
h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 700; }
h3 { font-size: clamp(1.25rem, 2.5vw, 1.75rem); font-weight: 600; }

/* Improve link accessibility - but exclude buttons and navigation */
a:not(.btn):not(.skip-link):not(.skip-to-section):not(nav a) {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

a:not(.btn):not(.skip-link):not(.skip-to-section):not(nav a):hover,
a:not(.btn):not(.skip-link):not(.skip-to-section):not(nav a):focus-visible {
  text-decoration-thickness: 2px;
  color: var(--accent);
}

/* Buttons and skip links don't need underlines */
.btn,
.skip-link,
.skip-to-section {
  text-decoration: none;
}

/* Ensure buttons are keyboard accessible */
button {
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

/* Improve form accessibility */
label {
  font-weight: 500;
  margin-bottom: 0.5rem;
}

input[type="text"],
input[type="email"],
input[type="password"],
textarea {
  font-size: 1rem;
  line-height: 1.5;
}

/* Landmark regions for screen readers */
header[role="banner"],
nav[role="navigation"],
main[role="main"],
footer[role="contentinfo"],
section[aria-labelledby],
section[aria-label] {
  position: relative;
}

/* Screen reader only text */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.sr-only-focusable:focus {
  position: static;
  width: auto;
  height: auto;
  padding: inherit;
  margin: inherit;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important }
  .skip-link,
  .skip-to-section {
    transition: none;
  }
}