/* static/css/site.css */
:root {
  --bg:#0f172a;
  --panel:#111827;
  --ink:#e5e7eb;
  --muted:#9ca3af;
  --up:#16a34a;
  --down:#dc2626;
}

*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:400 16px/1.6 system-ui,Segoe UI,Roboto,Arial,sans-serif;
}

/* =========================
   Layout containers
   ========================= */

.top{
  background:#0b1220;
}

.wrap{
  max-width:1100px;
  margin:1.2rem auto;
  padding:0 1rem;
}

.card{
  background:var(--panel);
  padding:1rem;
  border-radius:14px;
  box-shadow:0 4px 24px rgba(0,0,0,.35);
  margin-bottom:1rem;
}

/* =========================
   Tables
   ========================= */

.table{
  width:100%;
  overflow-x:auto;           /* 🔹 allows horizontal scroll on mobile */
}

.table table{
  width:100%;
  border-collapse:collapse;
}

.table th,
.table td{
  padding:.6rem .5rem;
  border-bottom:1px solid #1f2937;
  text-align:left;
}

.up{color:var(--up)}
.down{color:var(--down)}

/* =========================
   Charts
   ========================= */

canvas{
  width:100%;
  height:48vh;
}

.chart-container {
  height: 22rem;      /* adjust if you want a taller/shorter chart */
  position: relative;
}

.chart-container canvas {
  width: 100%;
  height: 100% !important;
  display: block;
}

/* Highlight active market / forecast row in tables */
.table tr.mk-row-active td,
.table tr.fc-row-active td {
  background-color: rgba(56, 189, 248, 0.14);  /* soft cyan */
  font-weight: 600;
}

/* =========================
   Navigation (3-row shell + mobile drawer)
   ========================= */

/* Header shell */
.nav-shell {
  padding-top:0.6rem;
  padding-bottom:0.6rem;
}

.nav-rows {
  display:flex;
  flex-direction:column;
  gap:0.25rem;
}

/* Each nav row */
.nav-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
}

/* Row 1: global nav with inner flex wrapper */
.nav-global-inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  width:100%;
}

/* Row 2: breadcrumb (optional) */
.nav-row-secondary{
  font-size:0.9rem;
  color:var(--muted);
  min-height:1.2rem;    /* small height so no big empty gap */
}

/* Horizontal navs */
.nav-main,
.subnav {
  display:flex;
  flex-wrap:wrap;
  gap:5rem;
}

/* Links */
.nav-link {
  color:var(--muted);
  text-decoration:none;
  font-size:0.95rem;
}

.nav-link:hover {
  color:var(--ink);
}

/* Active link (highlight current) */
.nav-link-active {
  color:var(--ink);
  font-weight:600;
  border-bottom:2px solid var(--ink);
  padding-bottom:0.05rem;
}

/* Optional breadcrumb helper */
.breadcrumb{
  font-size:0.9rem;
  color:var(--muted);
}

/* =========================
   Project screenshot gallery
   ========================= */

.screenshot-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:1rem;
  margin-top:1.2rem;
}

.screenshot-grid img {
  width:100%;
  border-radius:10px;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease;
  box-shadow:0 4px 18px rgba(0,0,0,.45);
  object-fit:cover;
}

/* subtle zoom on hover */
.screenshot-grid img:hover {
  transform:scale(1.03);
  box-shadow:0 8px 26px rgba(0,0,0,.6);
}

/* fullscreen modal */
.screenshot-modal {
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.9);
  justify-content:center;
  align-items:center;
  z-index:9999;
}

.screenshot-modal img {
  max-width:92vw;
  max-height:92vh;
  border-radius:10px;
  box-shadow:0 10px 40px rgba(0,0,0,.85);
}

/* ===== Project CTA Buttons ===== */
.project-cta {
  display:inline-block;
  padding:0.55rem 1.25rem;
  border-radius:10px;
  font-size:0.93rem;
  font-weight:600;
  text-decoration:none;
  color:#ffffff;
  background:#3b82f6; /* blue */
  box-shadow:0 4px 14px rgba(59,130,246,0.35);
  transition:background .18s ease, transform .18s ease, box-shadow .18s ease;
}

.project-cta:hover {
  background:#60a5fa;
  transform:translateY(-2px);
  box-shadow:0 6px 18px rgba(59,130,246,0.55);
}

/* Secondary version – Streamlit style */
.project-cta-secondary {
  background:#16a34a;               /* green */
  color:#f9fafb;
  box-shadow:0 4px 14px rgba(22,163,74,0.45);
}

.project-cta-secondary:hover {
  background:#22c55e;
  transform:translateY(-2px);
  box-shadow:0 6px 18px rgba(22,163,74,0.65);
}

/* Tertiary version – Forecast (yellow) */
.project-cta.project-cta-tertiary {
  background:#facc15 !important;              /* yellow */
  color:#111827;                               /* dark text for contrast */
  box-shadow:0 4px 14px rgba(250,204,21,0.45); /* yellow shadow */
}

.project-cta.project-cta-tertiary:hover {
  background:#fde047 !important;               /* lighter yellow on hover */
  transform:translateY(-2px);
  box-shadow:0 6px 18px rgba(250,204,21,0.65);
}






/* =========================
   Mobile hamburger + drawer
   ========================= */

/* Hamburger button */
.hamburger {
  display:none;           /* hidden on desktop */
  flex-direction:column;
  justify-content:center;
  gap:0.24rem;
  width:2.1rem;
  height:2.1rem;
  border:none;
  background:transparent;
  cursor:pointer;
}

.hamburger span {
  height:2px;
  width:100%;
  background:var(--ink);
  border-radius:999px;
}

/* Mobile overlay */
.mobile-nav {
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.25);   /* lighter overlay */
  display:none;
  justify-content:flex-start;
  align-items:stretch;
  z-index:9999;
}

.mobile-nav.open {
  display:flex;
}

/* Sidebar panel */
.mobile-nav-panel {
  width:75%;
  max-width:310px;
  background:#1e293b;          /* lighter, more visible panel */
  padding:1.2rem 1rem 2rem;
  box-shadow:4px 0 24px rgba(0,0,0,.5);
  color:var(--ink);
  overflow-y:auto;
}

.mobile-nav-links {
  display:flex;
  flex-direction:column;
  gap:.8rem;
}

.mobile-nav-links .nav-link {
  display:block;
  text-decoration:none;
  color:var(--ink);
}

/* Collapsible groups */
.mobile-collapsible {
  margin-top:0.2rem;
}

.mobile-collapse-btn {
  background:none;
  border:none;
  color:var(--ink);
  font-size:1rem;
  text-align:left;
  width:100%;
  padding:0.4rem 0;
  cursor:pointer;
}

/* Submenus (Projects, FX sections) */
.mobile-submenu {
  display:none;
  padding-left:1rem;
  margin-top:0.4rem;
  border-left:2px solid rgba(255,255,255,0.15);
}

.mobile-submenu.open {
  display:flex;
  flex-direction:column;
  gap:0.6rem;
}

/* Inner nested submenu (FX sections) */
.inner-level {
  margin-left:1rem;
}

.inner-btn {
  font-size:0.9rem;
}

.inner-submenu {
  padding-left:0.8rem;
  border-left:1px dashed rgba(255,255,255,0.2);
}

/* =========================
   Responsive tweaks
   ========================= */

/* Tablets / small laptops */
@media (max-width:768px) {

  body{
    font-size:14px;
  }

  .wrap{
    margin:.8rem auto;
    padding:0 .5rem;
  }

  .card{
    padding:.75rem;
    margin-bottom:.75rem;
  }

  .card h2{
    font-size:1rem;
  }

  .table th,
  .table td{
    padding:.4rem .25rem;
    font-size:.85rem;
  }

  /* Hide desktop nav, show hamburger */
  .nav-main{
    display:none;
  }
  .hamburger{
    display:flex;
  }

  .subnav{
    gap:0.75rem;
    font-size:0.9rem;
  }

  /* Chart a bit taller on mobile so it’s readable */
  canvas{
    height:40vh;
  }
}

/* Very small phones */
@media (max-width:480px) {

  body{
    font-size:13px;
  }

  .card h2{
    font-size:.95rem;
  }

  .table th,
  .table td{
    font-size:.8rem;
  }

  .subnav{
    gap:0.5rem;
  }
}


/* ===== Hero ===== */
.hero{
  position:relative;
  border-radius:14px;
  overflow:hidden;
  min-height:260px;
  margin-bottom:1.2rem;
  background-size:cover;
  background-position:center;
}
.hero-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,rgba(15,23,42,.88),rgba(15,23,42,.6));
}
.hero-inner{
  position:relative;
  padding:3rem 2.5rem;
}
.hero-inner h1{
  margin:0 0 .6rem;
  font-size:1.9rem;
}
.hero-inner p{
  margin:0 0 1.4rem;
  max-width:36rem;
  color:var(--muted);
}
.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
}

/* Buttons */
.btn-primary,
.btn-secondary{
  display:inline-block;
  padding:.55rem 1.2rem;
  border-radius:999px;
  font-size:.95rem;
  text-decoration:none;
}
.btn-primary{
  background:#4f46e5;
  color:var(--ink);
}
.btn-primary:hover{background:#6366f1;}
.btn-secondary{
  border:1px solid #4b5563;
  color:var(--ink);
}
.btn-secondary:hover{background:#111827;}

/* ===== Featured projects grid ===== */
.project-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:1rem;
}

.project-thumb{
  text-decoration:none;
  color:inherit;
}

.project-thumb figure{
  margin:0;
}

.project-thumb img{
  width:100%;
  height:160px;              /* fixed height for ALL thumbnails  */
  object-fit:cover;          /* crop edges to fill the area      */
  border-radius:12px;
  display:block;
}

.project-thumb figcaption{
  margin-top:.4rem;
  font-weight:500;
  text-align:center;
}

.hero-bg {
  background-image: url("/static/images/hero_ml.png");
  background-repeat: no-repeat;
}



.download-list {
  list-style: none;
  padding-left: 0;
  margin-top: 0.5rem;
}

.download-list li {
  margin: 0.25rem 0;
}

.download-list a {
  color: #7ab0ff;
  text-decoration: none;
  font-weight: 500;
}

.download-list a:hover {
  text-decoration: underline;
}


.code-block {
  white-space: pre-wrap;
  background:#1e293b;
  padding:1rem;
  border-radius:8px;
  font-size:0.9rem;
  line-height:1.5;
  margin-top:0.75rem;
}


/* =========================
   White outer glow for project thumbnails
   ========================= */
.project-thumb img {
    width: 100%;
    height: 160px;
    object-fit: cover;
    border-radius: 12px;
    display: block;
    
    /* Existing shadow + new white glow */
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.4),           /* original dark shadow (depth) */
        0 0 30px rgba(255, 255, 255, 0.18),      /* soft white glow */
        0 0 60px rgba(255, 255, 255, 0.10);      /* wider subtle glow */
    
    transition: all 0.25s ease;
}

/* Stronger glow on hover – feels premium */
.project-thumb img:hover {
    box-shadow: 
        0 12px 40px rgba(0, 0, 0, 0.5),
        0 0 40px rgba(255, 255, 255, 0.28),
        0 0 80px rgba(255, 255, 255, 0.16);
    transform: translateY(-4px);
}


.nav-main {
    display: flex;
    justify-content: center; /* centers Home + About */
    gap: 3rem;               /* space between them */
    width: 100%;
}