@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@600;700&family=Inter:wght@400;500;600;700&family=Outfit:wght@400;500;600;700&display=swap');

:root{--bg:#0b0b0d;--surface:#0f1720;--muted:#9ca3af;--text:#e6eef8;--accent:#5b21b6;--accent-2:#2563eb}

/* Light mode */
body.light-mode{--bg:#f5f5f7;--surface:#ffffff;--muted:#6b7280;--text:#1f2937;--accent:#5b21b6;--accent-2:#2563eb}
*{box-sizing:border-box}
body{margin:0;font-family:'Inter',sans-serif;background:var(--bg);color:var(--text);line-height:1.6;transition:background-color 0.4s ease,color 0.4s ease}

.top-nav{background:rgba(15,23,32,0.95);border-bottom:1px solid rgba(91,33,182,0.3);padding:0.75rem 0;position:sticky;top:0;z-index:100;transition:background-color 0.4s ease,border-color 0.4s ease}
.top-nav ul{list-style:none;margin:0;padding:0 2rem;display:flex;gap:2rem;max-width:1100px;margin:0 auto;align-items:center;justify-content:center}
.top-nav li a{color:var(--text);text-decoration:none;font-weight:500;padding:0.5rem 0;border-bottom:2px solid transparent;transition:all .2s ease}

/* Gradient underline directly under the top bar */
.top-nav {
  position: sticky;
}

.top-nav::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 4px;
  background: linear-gradient(90deg, #4facfe 0%, #8f6bff 50%, #ff7ab6 100%);
  background-size: 200% 100%;
  animation: topbarGradientShift 12s linear infinite;
  opacity: 0.9;
  pointer-events: none;
}

@keyframes topbarGradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  .top-nav::after {
    animation: none;
  }
  .site-header h1 {
    animation: none;
  }
}

/* Tag chips */
/* Welcome card colored accents */
.welcome-card {
  position: relative;
  border-left: 4px solid transparent;
  border-image: linear-gradient(180deg, #4facfe 0%, #8f6bff 100%) 1;
  background: linear-gradient(135deg, rgba(79,172,254,0.02) 0%, rgba(143,107,255,0.03) 100%);
}

.welcome-card:hover {
  border-image: linear-gradient(180deg, #4facfe 0%, #8f6bff 50%, #b084ff 100%) 1;
  background: linear-gradient(135deg, rgba(79,172,254,0.04) 0%, rgba(143,107,255,0.06) 100%);
  box-shadow: 0 8px 20px rgba(0,0,0,0.3), -4px 0 15px rgba(111,127,255,0.15);
}

/* Reference number badge */
.section-card {
  position: relative;
}

.card-ref {
  min-width: 32px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  border-radius: 6px;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.12), rgba(168, 85, 247, 0.08));
  border: 1px solid rgba(139, 92, 246, 0.25);
  font-size: 0.65rem;
  font-weight: 600;
  font-family: 'Space Grotesk', sans-serif;
  letter-spacing: 0.02em;
  color: #c4b5fd;
  margin-left: auto;
  backdrop-filter: blur(4px);
  transition: all 0.2s ease;
}

.card-ref:hover {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.18), rgba(168, 85, 247, 0.12));
  border-color: rgba(139, 92, 246, 0.35);
}

.light-mode .card-ref {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.08), rgba(168, 85, 247, 0.05));
  border-color: rgba(139, 92, 246, 0.2);
  color: #7c3aed;
}

.light-mode .card-ref:hover {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.12), rgba(168, 85, 247, 0.08));
  border-color: rgba(139, 92, 246, 0.3);
}

/* Search bar */
.search-container {
  position: relative;
}

.search-bar {
  padding: 6px 12px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 6px;
  color: var(--text);
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  width: 200px;
  transition: all 0.3s ease;
}

.search-bar:focus {
  outline: none;
  background: rgba(255,255,255,0.12);
  border-color: var(--accent);
  width: 250px;
}

.search-bar::placeholder {
  color: var(--muted);
  opacity: 0.7;
}

.light-mode .search-bar {
  background: rgba(0,0,0,0.05);
  border-color: rgba(0,0,0,0.12);
}

.light-mode .search-bar:focus {
  background: rgba(0,0,0,0.08);
}

.search-results {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 280px;
  background: rgba(15,23,32,0.98);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 8px;
  max-height: 400px;
  overflow-y: auto;
  display: none;
  z-index: 1000;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}

.search-results.active {
  display: block;
}

.light-mode .search-results {
  background: rgba(255,255,255,0.98);
  border-color: rgba(0,0,0,0.12);
}

.search-result-item {
  padding: 10px 12px;
  cursor: pointer;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  transition: background 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.search-result-content {
  flex: 1;
  min-width: 0;
}

.search-result-item:last-child {
  border-bottom: none;
}

.search-result-item:hover {
  background: rgba(255,255,255,0.08);
}

.light-mode .search-result-item {
  border-bottom-color: rgba(0,0,0,0.06);
}

.light-mode .search-result-item:hover {
  background: rgba(0,0,0,0.05);
}

.search-ref {
  min-width: 32px;
  height: 24px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.12), rgba(168, 85, 247, 0.08));
  border: 1px solid rgba(139, 92, 246, 0.25);
  border-radius: 6px;
  font-size: 0.65rem;
  font-weight: 600;
  font-family: 'Space Grotesk', sans-serif;
  letter-spacing: 0.02em;
  color: #c4b5fd;
  flex-shrink: 0;
  backdrop-filter: blur(4px);
}

.light-mode .search-ref {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.08), rgba(168, 85, 247, 0.05));
  border-color: rgba(139, 92, 246, 0.2);
  color: #7c3aed;
}

.search-result-title {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text);
  margin-bottom: 2px;
}

.search-result-path {
  font-size: 0.75rem;
  color: var(--muted);
  opacity: 0.8;
}

@media (max-width: 768px) {
  .search-container {
    width: 100%;
    margin: 0.5rem 0;
  }
  
  .search-bar {
    width: 100%;
    max-width: 100%;
    font-size: 16px; /* Prevents zoom on iOS */
  }
  
  .search-bar:focus {
    width: 100%;
  }
  
  .search-results {
    left: 0;
    right: 0;
    min-width: auto;
    width: 100%;
  }
}


/* Theme toggle button — match top-nav links with faint box */
.theme-toggle{background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.12);color:var(--text);padding:0.35rem 0.6rem;border-radius:8px;cursor:pointer;font-size:0.95rem;transition:all .2s ease;display:inline-flex;align-items:center;gap:0.5rem;font-weight:500;font-family:'Inter',sans-serif;margin-left:0}
.theme-toggle:hover{background:rgba(255,255,255,0.09);border-color:rgba(255,255,255,0.18);color:var(--accent-2)}

/* Dark mode: faint grey box */
:root:not(.light-mode) .theme-toggle{background:rgba(148,163,184,0.10); /* slate-400 */ border-color:rgba(148,163,184,0.25)}
:root:not(.light-mode) .theme-toggle:hover{background:rgba(148,163,184,0.18); border-color:rgba(148,163,184,0.35)}

/* Light mode: softer light box */
body.light-mode .theme-toggle{background:rgba(0,0,0,0.04); border-color:rgba(0,0,0,0.08); color:var(--text)}
body.light-mode .theme-toggle:hover{background:rgba(0,0,0,0.06); border-color:rgba(0,0,0,0.12)}

body.light-mode .top-nav{background:rgba(255,255,255,0.95);border-bottom:1px solid rgba(91,33,182,0.2)}

/* Headings with Space Grotesk font */
h1,h2,h3,h4,h5,h6{font-family:'Space Grotesk',sans-serif}
.top-nav li a:hover{color:var(--accent-2);border-bottom-color:var(--accent-2)}
.top-nav li a.active{color:var(--accent-2);border-bottom-color:var(--accent)}

.site-header{display:flex;justify-content:space-between;align-items:center;padding:1rem 2rem;background:var(--surface);border-bottom:1px solid rgba(255,255,255,0.04);transition:background-color 0.4s ease,border-color 0.4s ease}
.site-header h1{margin:0;font-size:1.1rem;background:linear-gradient(90deg,#4facfe,#8f6bff,#ff7ab6,#4facfe);background-size:200% 100%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:titleGradientShift 8s ease-in-out infinite}

@keyframes titleGradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.main-nav{list-style:none;margin:0;padding:0;display:flex;gap:1rem}
.main-nav li a{text-decoration:none;color:var(--text);padding:.25rem .5rem;border-radius:4px;transition:all 0.3s ease}
.main-nav li a:hover{background:rgba(255,255,255,0.02)}

.container{max-width:1100px;margin:1.5rem auto;padding:0 2rem}
.hero{padding:2.4rem;background:linear-gradient(90deg,rgba(255,255,255,0.02),rgba(255,255,255,0.01));border-radius:8px;border:1px solid rgba(255,255,255,0.03)}
.updates-list{display:flex;flex-direction:column;gap:0.75rem;margin-top:0.75rem}
.update-item{padding:1rem;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);border-radius:8px}
.update-meta{display:flex;gap:0.75rem;align-items:center;margin-bottom:0.5rem}
.update-tag{display:inline-block;padding:0.2rem 0.5rem;border-radius:6px;background:rgba(91,33,182,0.18);color:var(--text);font-size:0.8rem}
.update-date{color:var(--muted);font-size:0.85rem}

/* Welcome section */
.welcome-subtitle{font-size:1.2rem;color:var(--accent-2);font-weight:500;margin:.5rem 0 1rem}
.welcome-description{font-size:1rem;color:var(--text);line-height:1.8;margin:1rem 0 2rem}
.welcome-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin:2rem 0}
.welcome-card{padding:1.5rem;background:linear-gradient(135deg,rgba(91,33,182,0.1),rgba(37,99,235,0.1));border:1px solid rgba(91,33,182,0.2);border-radius:8px;transition:all .3s ease;display:flex;flex-direction:column;text-decoration:none;color:inherit;cursor:pointer}
.card-icon{width:60px;height:60px;margin:0 0 1rem 0;color:var(--accent-2);transition:all 0.3s ease}
.welcome-card:hover .card-icon{transform:scale(1.1)}
.welcome-card:hover{background:linear-gradient(135deg,rgba(91,33,182,0.15),rgba(37,99,235,0.15));transform:translateY(-4px);border-color:var(--accent)}
.welcome-card h4{margin:0 0 .5rem;color:var(--accent-2);font-size:1.1rem}
.welcome-card p{margin:0;color:var(--muted);font-size:0.95rem;line-height:1.6}

/* Buttons / cards for sections */
.section-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;margin-top:1rem}
.section-card{display:flex;flex-direction:column;align-items:flex-start;gap:.6rem;padding:1.25rem;background:linear-gradient(180deg,rgba(255,255,255,0.01),rgba(255,255,255,0.00));border:1px solid rgba(255,255,255,0.04);border-radius:10px;box-shadow:0 8px 24px rgba(2,6,23,0.6);transition:transform .14s ease,box-shadow .14s ease;text-decoration:none;color:inherit;min-height:180px}
.section-card:hover{transform:translateY(-6px);box-shadow:0 24px 60px rgba(2,6,23,0.75)}
.section-card h3{margin:0;font-size:1.05rem;color:var(--text)}
.section-card p{margin:0;color:var(--muted);font-size:.95rem}

/* Headings spacing and article padding to avoid edge contact */
h1,h2,h3{margin:0 0 .6rem;padding-left:0;font-family:'Space Grotesk',sans-serif}
article{padding:0.6rem 0 1rem}
.section-actions{margin-top:auto;display:flex;align-items:center;gap:.5rem;width:100%}
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.45rem .75rem;border-radius:8px;border:none;background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#fff;text-decoration:none;font-weight:600;cursor:pointer;font-family:'Outfit',sans-serif;transition:all 0.3s ease}
.btn.secondary{background:transparent;color:var(--text);border:1px solid rgba(255,255,255,0.06);transition:all 0.3s ease}

/* Breadcrumb / back link */
.back-link{display:inline-block;color:var(--accent);text-decoration:none;margin-bottom:.75rem;transition:all 0.3s ease}

/* Header brand / logo */
.brand{display:flex;align-items:center;gap:0.75rem}
.logo{width:52px;height:52px;display:block;object-fit:cover;border-radius:8px}
@media(max-width:600px){.logo{width:40px;height:40px}}

/* responsive */
@media(max-width:900px){
  .site-header{padding:.9rem 1rem}
  .container{padding:0 1rem}
}
@media(max-width:600px){
  .site-header{padding:.75rem 0.75rem}
  .section-grid{grid-template-columns:1fr}
  
  .top-nav ul {
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    justify-content: center;
  }
  
  .top-nav li {
    flex-shrink: 0;
  }
  
  .top-nav li:not(.search-container) {
    font-size: 0.85rem;
  }
  
  .top-nav li a {
    font-size: 0.85rem;
  }
  
  .theme-toggle {
    display: inline-flex !important;
    font-size: 0.85rem;
    padding: 0.5rem 0.65rem;
    white-space: nowrap;
    min-height: 44px;
    min-width: 44px;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 1000;
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(0,0,0,0.1);
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
  }
  
  .search-container {
    order: 10;
    flex-basis: 100%;
  }
}

/* small form and general controls */
form input,form textarea{width:100%;padding:.85rem;margin:.6rem 0;border:1px solid rgba(255,255,255,0.06);border-radius:8px;background:rgba(255,255,255,0.01);color:var(--text);font-family:'Inter',sans-serif;transition:all 0.3s ease}
form textarea{min-height:140px;resize:vertical}
button{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#fff;border:none;padding:.6rem 1rem;border-radius:6px;cursor:pointer;font-family:'Outfit',sans-serif;transition:all 0.3s ease}

/* Date created */
.date-created{display:inline-block;padding:.4rem .75rem;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);border-radius:6px;color:var(--muted);font-size:0.85rem;margin-top:1rem;transition:all 0.3s ease}

/* Feature list styling */
.feature-list{list-style:none;padding:0;margin:1rem 0}
.feature-list li{padding:0.75rem 0 0.75rem 1.5rem;position:relative;color:var(--text);line-height:1.7}
.feature-list li:before{content:"●";position:absolute;left:0;color:var(--accent);font-weight:bold}
.feature-list li strong{color:var(--accent-2)}

/* Toggle button and content */
.toggle-btn{display:flex;align-items:center;gap:.5rem;padding:.75rem 0;margin:.5rem 0;background:none;border:none;color:var(--text);cursor:pointer;font-weight:600;transition:all 0.3s ease;font-family:'Space Grotesk', sans-serif;font-size:1.3rem;text-align:left;width:100%;letter-spacing:0.01em}
.toggle-btn:hover{color:var(--accent);transform:translateX(4px)}
.toggle-btn::before{content:"›";transition:transform .3s ease;font-size:1.5rem;flex-shrink:0;color:var(--accent);font-weight:700;display:inline-block}
.toggle-btn.expanded::before{transform:rotate(90deg)}
.toggle-content{display:none}
.toggle-content.expanded{display:block;margin:.75rem 0;padding:1.5rem;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.12);border-radius:8px}
.light-mode .toggle-content.expanded{background:rgba(255,255,255,0.8);border-color:rgba(0,0,0,0.1)}

/* Footer */
footer{margin-top:3rem;padding:2rem;background:var(--surface);border-top:1px solid rgba(255,255,255,0.04);text-align:center;color:var(--muted);font-size:0.9rem;transition:background-color 0.4s ease,border-color 0.4s ease}