/* Matrix Font */
@font-face {
  font-family: 'Matrix';
  src: url('/static/app/fonts/Matrix.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

/* Base Styles */
:root { 
  --bg:#0a0a0a; 
  --card:rgba(20,20,20,.6); 
  --accent:#22c55e; 
  --accent-strong:#16a34a; 
}

html,body{
  height:100%; 
  margin:0; 
  padding:0;
}

body{ 
  display:flex; 
  flex-direction:column; 
  min-height:100vh; 
  background-color:var(--bg); 
  color:#fff; 
  font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; 
  overflow-x:hidden; 
  width:100%; 
  max-width:100vw;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

main{ 
  flex:1; 
  width:100%; 
}

* { 
  box-sizing: border-box; 
}

/* Accessibility */
.skip-link{
  position:absolute;
  left:-9999px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden
}

.skip-link:focus{
  left:1rem;
  top:1rem;
  width:auto;
  height:auto;
  background:#000;
  color:#fff;
  padding:.5rem 1rem;
  border:1px solid #333;
  border-radius:.5rem;
  z-index:50
}

/* Matrix Canvas */
#matrixCanvas{ 
  position:fixed; 
  inset:0; 
  width:100vw; 
  height:100vh; 
  z-index:-1; 
  opacity:.28; 
  background:#000; 
  display:block; 
}

/* Header */
header{ 
  position:relative; 
  overflow:hidden; 
  z-index:100 !important; 
}

header::before{ 
  content:""; 
  position:absolute; 
  inset:0; 
  background: radial-gradient(circle at 50% 0%, rgba(34,197,94,.22), transparent 70%); 
  z-index:-1; 
}

/* Logo/Brand Styling with Matrix Font */
header a[href="/"] {
  font-family: 'Matrix', monospace, cursive;
  letter-spacing: 0.08em;
  text-shadow: 0 0 10px rgba(34, 197, 94, 0.8), 2px 2px 4px rgba(0, 0, 0, 0.5);
  font-weight: normal;
  color: #22c55e;
  text-transform: uppercase;
}

/* Navigation Links with Matrix Font */
header nav a {
  font-family: 'Matrix', monospace, cursive;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* Hero Section */
.hero{ 
  position:relative; 
  overflow:hidden; 
}

.hero::before{ 
  content:""; 
  position:absolute; 
  inset:0; 
  background: radial-gradient(circle at 50% 25%, rgba(34,197,94,.15), transparent 75%); 
  z-index:-1; 
}

/* Cards */
.card{ 
  background:var(--card); 
  -webkit-backdrop-filter: blur(6px); 
  backdrop-filter: blur(6px); 
  border:1px solid #333; 
  border-radius:12px; 
  padding:1.25rem; 
  transition: box-shadow .25s ease, transform .2s ease; 
  overflow: hidden; 
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-word;
  display: flex; 
  flex-direction: column;
  max-width: 100%;
}

.card * {
  max-width: 100%;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.card:hover{ 
  box-shadow:0 0 15px #0f0; 
  transform: translateY(-2px); 
}

/* Responsive improvements */
@media (max-width: 640px) {
  .card { 
    padding: 1rem; 
  }
  .hero { 
    padding-top: 2rem !important; 
    padding-bottom: 2rem !important; 
  }
  
  body {
    font-size: 14px;
  }
  
  h1 {
    font-size: 1.75rem !important;
  }
  
  h2 {
    font-size: 1.5rem !important;
  }
  
  h3 {
    font-size: 1.25rem !important;
  }
  
  /* Matrix Font Mobile Optimization */
  header a[href="/"] {
    font-size: 1.25rem;
    letter-spacing: 0.06em;
  }
  
  header nav a {
    font-size: 0.875rem;
    letter-spacing: 0.04em;
  }
}

@media (max-width: 768px) {
  .card {
    padding: 1.125rem;
  }
}

/* Ensure all text content wraps properly */
p, div, span, a, li, td, th {
  word-wrap: break-word;
  overflow-wrap: break-word;
  max-width: 100%;
}

/* Prevent horizontal overflow */
img, video, iframe {
  max-width: 100%;
  height: auto;
}

pre, code {
  max-width: 100%;
  overflow-x: auto;
}

/* Category Badge */
.category{ 
  background:var(--accent); 
  color:#f0fdf4; 
  padding:.25rem .75rem; 
  border-radius:9999px; 
  font-size:.75rem; 
  font-weight:700; 
  display:inline-block; 
  margin-bottom:.75rem; 
}

/* Buttons */
.button{ 
  color:var(--accent); 
  font-weight:700; 
  text-decoration:none; 
}

.button:hover{ 
  color:var(--accent-strong); 
}

/* Mobile trigger button */
.mobile-trigger { 
  background: rgba(20,20,20,0.9); 
  border: 1px solid #333; 
  border-radius: 10px; 
  padding: .5rem .9rem; 
  color: #22c55e; 
  font-weight: 700; 
  display: inline-flex; 
  align-items: center; 
  gap:.5rem; 
  box-shadow: 0 0 0 #22c55e; 
  transition: box-shadow .35s ease, transform .2s ease; 
}

.mobile-trigger:hover { 
  box-shadow: 0 0 12px #22c55e; 
  transform: translateY(-1px); 
}

/* Matrix Popup (Modal) */
.matrix-modal { 
  position: fixed; 
  inset: 0; 
  display: none; 
  align-items: center; 
  justify-content: center; 
  padding: 1.25rem; 
  background: rgba(0,0,0,0.65); 
  backdrop-filter: blur(6px); 
  z-index: 50; 
}

.matrix-modal[open] { 
  display: flex; 
  animation: modalFade .25s ease-out; 
}

.matrix-card { 
  position: relative; 
  width: 100%; 
  max-width: 420px; 
  border-radius: 16px; 
  border: 1px solid #14532d; 
  background: linear-gradient(180deg, rgba(10,10,10,.95), rgba(12,12,12,.85)); 
  overflow:hidden; 
}

.matrix-card::before { 
  content:""; 
  position:absolute; 
  inset:-2px; 
  background: conic-gradient(from 180deg, rgba(34,197,94,0.35), transparent 30%, rgba(34,197,94,0.35) 60%, transparent 80%, rgba(34,197,94,0.35)); 
  filter: blur(10px); 
  z-index:0; 
  opacity:.35; 
  animation: sweep 4s linear infinite; 
}

.matrix-card-inner { 
  position: relative; 
  z-index: 1; 
  padding: 1rem; 
}

.matrix-title { 
  display:flex; 
  align-items:center; 
  justify-content:space-between; 
  padding:.5rem .75rem 0 .75rem; 
}

.matrix-title h3 { 
  font-size: 1.1rem; 
  font-weight: 800; 
  color:#22c55e; 
  letter-spacing:.02em; 
}

.matrix-close { 
  background: transparent; 
  border:1px solid #2f2f2f; 
  color:#a3e635; 
  border-radius:8px; 
  padding:.35rem .55rem; 
  line-height:1; 
  display:inline-flex; 
  align-items:center; 
  gap:.35rem; 
  cursor:pointer; 
}

.matrix-close:hover { 
  border-color:#22c55e; 
  box-shadow: 0 0 10px #22c55e; 
}

.matrix-menu { 
  display:grid; 
  gap:.5rem; 
  padding: .75rem; 
}

.matrix-link { 
  display:flex; 
  align-items:center; 
  justify-content:space-between; 
  padding:.85rem 1rem; 
  border-radius:12px; 
  border:1px solid #1f2937; 
  background: rgba(20,20,20,0.75); 
  color:#e5ffe6; 
  text-decoration:none; 
  font-weight:700; 
}

.matrix-link:hover { 
  border-color:#22c55e; 
  box-shadow: 0 0 12px rgba(34,197,94,.6); 
}

.matrix-hint { 
  font-size:.75rem; 
  color:#86efac; 
  opacity:.9; 
  padding:.25rem 1rem 1rem; 
}

/* Animations */
@keyframes modalFade { 
  from { opacity:0 } 
  to { opacity:1 } 
}

@keyframes sweep { 
  to { transform: rotate(1turn); } 
}