/* ---- Base ---- */
:root{
  --bg:#0e1013; --panel:#151922; --text:#e6e8ee; --muted:#aeb4c2;
  --brand:#5cc8ff; --brand-2:#9cffb0; --line:#242a35;
  --shadow:0 8px 22px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text); background:linear-gradient(180deg, #0c0f12, #0e1013 40% 60%, #0a0c10);
  line-height:1.6; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--brand); text-decoration:none; transition: color 0.2s ease;}
a:hover{text-decoration:underline; color:var(--brand-2);}
code,pre{font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace}

/* ---- Layout ---- */
.content{max-width:1100px; margin:0 auto; padding:48px 20px}
.page-hero{padding:20px 0 8px; border-bottom:1px solid var(--line); margin-bottom:28px}
.grid-4,.grid-3{display:grid; gap:18px}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin:28px 0}
.card{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:18px; box-shadow:var(--shadow); transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;}
.card:hover{transform:translateY(-3px); box-shadow: 0 12px 28px rgba(0,0,0,.4);}
.card h3{margin-top:4px}
.card .link{display:inline-block; margin-top:6px}
.card p{color:var(--muted)}
.card ul{margin:8px 0 0 18px; padding-left: 0;}
.card li{margin:4px 0}
.two-col{display:grid; grid-template-columns:1fr 1fr; gap:24px}

/* ---- Header ---- */
.site-header{position:sticky; top:0; z-index:40; display:flex; align-items:center; background:rgba(14,16,19,.7); backdrop-filter:blur(8px); border-bottom:1px solid var(--line)}
.site-header .brand{display:flex; align-items:center; gap:10px; padding:14px 18px; font-weight:800; letter-spacing:.2px}
.site-header img{width:28px; height:28px}
.site-header .site-nav{display:flex; flex-wrap:wrap; gap:12px; align-items:center; padding:14px 18px}
.site-header .site-nav a{padding:8px 10px; border-radius:8px; color:var(--muted)}
.site-header .site-nav a.is-active{color:var(--text); background:#0c111a}
.site-header .site-nav a.btn{border:1px solid var(--line); color:var(--text)}
.nav-toggle{display:none; z-index: 50; margin-left:auto; margin-right:14px; padding:8px 10px; border:1px solid var(--line); background:transparent; color:var(--text); border-radius:8px}

/* ---- Hero ---- */
.hero{display:grid; grid-template-columns:1.4fr .6fr; gap:22px; align-items:center; padding:36px 20px; max-width:1100px; margin:0 auto}
.hero__content .lead{color:var(--muted)}
.hero__cta{display:flex; gap:10px; margin-top:12px}
.btn{display:inline-block; padding:10px 14px; border-radius:10px; border:1px solid var(--line); transition: all 0.2s ease-in-out;}
.btn--primary{background:linear-gradient(135deg, var(--brand), var(--brand-2)); color:#0b0e12; font-weight:700}
.btn--primary:hover{transform: translateY(-2px); box-shadow: var(--shadow);}
.btn--ghost{background:transparent; color:var(--text)}
.btn--ghost:hover{background:var(--panel); border-color:var(--brand);}

/* ---- Sections ---- */
.pillars, .why, .case, .cta {max-width:1100px; margin:0 auto; padding:20px}
.pillars h2, .why h2, .case h2, .cta h2 {margin-top:0}
.case{background: radial-gradient(800px 300px at 20% 0%, rgba(92,200,255,.08), rgba(0,0,0,0)); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.case__content{max-width:800px}

/* ---- Footer ---- */
.site-footer{margin-top:28px; padding:20px; border-top:1px solid var(--line); background:rgba(10,12,16,.7)}
.site-footer nav{display:flex; flex-wrap:wrap; gap:10px 14px; margin-bottom:10px}
.site-footer p{color:var(--muted); margin:0}

/* ---- Lists ---- */
.link-list{list-style:none; padding:0; margin:8px 0}
.link-list li{margin:6px 0}

/* ---- Forms ---- */
.form-wrap{max-width:760px; margin:0 auto}
.contact-form{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:18px}
.field{display:flex; flex-direction:column; gap:6px; margin:10px 0}
input,textarea{background:#0b0e12; color:var(--text); border:1px solid var(--line); border-radius:8px; padding:10px}
input:focus,textarea:focus{outline:2px solid var(--brand); border-color:transparent}

/* ---- Responsive Design ---- */
@media (max-width: 960px) {
  .grid-4, .grid-3, .cards { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
  .two-col, .hero { grid-template-columns: 1fr; }
  .hero { text-align: center; }
  .hero__cta { justify-content: center; }
}

@media (max-width: 768px) {
  .site-header { flex-wrap: wrap; justify-content: space-between; }
  .nav-toggle { display: block; }
  #site-nav {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0; left: 0;
    width: 100vw;
    height: 100vh;
    background: var(--bg);
    gap: 20px;
  }
  #site-nav.is-open { display: flex; }
}

/* ---- Dropdown Navigation ---- */
.nav-dropdown {
  position: relative;
}

.nav-dropdown-toggle {
  font-family: inherit;
  font-size: 1rem;
  background: none;
  border: none;
  color: var(--muted);
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
}
.nav-dropdown-toggle:hover {
  color: var(--text);
}

/* Arrow icon */
.nav-dropdown-toggle::after {
  content: '';
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  transform: translateY(2px);
  transition: transform 0.2s ease;
}

.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 5px);
  left: 0;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow);
  padding: 8px;
  width: 260px;
  z-index: 100;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

.nav-dropdown-menu a {
  padding: 10px 12px;
  border-radius: 6px;
}
.nav-dropdown-menu a:hover {
  background-color: rgba(255, 255, 255, 0.05);
  text-decoration: none;
}

/* Open state for dropdown */
.nav-dropdown.is-open .nav-dropdown-toggle {
  background: #0c111a;
  color: var(--text);
}
.nav-dropdown.is-open .nav-dropdown-toggle::after {
  transform: rotate(180deg) translateY(2px);
}
.nav-dropdown.is-open .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* ---- Section Frame ---- */
.section-frame {
  background: radial-gradient(800px 300px at 50% 0%, rgba(92,200,255,.05), rgba(0,0,0,0));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 28px 0;
  margin: 40px 0;
}
.section-frame .cards {
  margin: 0; /* Reset margin for cards inside the frame */
}
.section-frame h2 {
  text-align: center;
  margin-bottom: 24px;
}

/* ---- Card Icons ---- */
.card--icon {
  text-align: center;
}
.card--icon .card__icon {
  height: 40px;
  width: 40px;
  margin: 0 auto 12px;
}
.card--icon h3 {
  margin-top: 0;
}

/* ---- Layout Refinements ---- */
.content-narrow {
  max-width: 980px;
  margin: 0 auto;
}

/* Update 'Applied example' section to match the frame style */
.case {
  background: radial-gradient(800px 300px at 50% 100%, rgba(92,200,255,.05), rgba(0,0,0,0));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 28px 20px;
  margin: 40px 0;
  text-align: center;
}
.case__content {
  max-width: 720px; /* Constrain text width for readability */
  margin: 0 auto;
}

/* ---- Toolkit Section Spacing ---- */
.toolkit-section .cards {
  max-width: 980px;
  margin: 0 auto;
}

/* Aligns the 'Applied example' box to the left */
.case {
  max-width: 900px; /* Keeps the box narrower than the full page */
  margin: 40px 0;   /* Aligns the box to the left (removes auto-centering) */
  text-align: left;
}

/* ---- Elegant Footer ---- */
.site-footer {
  padding: 40px 20px 20px; /* Add more top padding */
  max-width: 1100px;
  margin: 40px auto 0;
}
/* Remove the old nav flex styles from the footer */
.site-footer nav {
  display: none;
}
.footer-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 30px;
  text-align: left;
}
.footer-column {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.footer-column h4 {
  margin: 0;
  color: var(--text);
  font-weight: 600;
  letter-spacing: .5px;
}
.footer-column a {
  color: var(--muted);
  text-decoration: none;
}
.footer-column a:hover {
  color: var(--brand);
  text-decoration: underline;
}
.footer-bottom {
  border-top: 1px solid var(--line);
  padding-top: 20px;
  text-align: center;
}

/* Responsive stacking for mobile */
@media (max-width: 768px) {
  .footer-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }
}

/* ---- Citation Details/Summary Styling ---- */
.card details {
  margin-top: 12px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
  min-width: 0;
  overflow: hidden;
}

.card details summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--brand);
  padding: 6px 0;
  user-select: none;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: color 0.2s ease;
}

.card details summary:hover {
  color: var(--brand-2);
}

/* Remove default marker */
.card details summary::-webkit-details-marker {
  display: none;
}

/* Custom arrow icon */
.card details summary::before {
  content: '▶';
  font-size: 0.7em;
  transition: transform 0.3s ease;
  display: inline-block;
}

.card details[open] summary::before {
  transform: rotate(90deg);
}

/* Citation code block styling */
.card details pre {
  margin: 8px 0 0;
  padding: 12px;
  background: #0b0e12;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow-x: auto;
  font-size: 0.85em;
  max-width: 100%;
  white-space: pre;
  word-wrap: normal;
}

.card details code {
  color: var(--text);
  line-height: 1.5;
  display: block;
}

/* Academic writings cards - give them consistent min-height */
#academic-writings .card {
  min-height: 220px;
  min-width: 0;
}