/* App-specific styles — layered on top of the ExperiOps design system */

html { scroll-behavior: smooth; }

/* ── Markdown rendered content ──────────────────────────────────── */
.project-description h1, .project-description h2,
.project-description h3, .project-description h4 {
  margin-top: var(--s-6);
  margin-bottom: var(--s-3);
  line-height: 1.2;
}
.project-description p  { margin-bottom: var(--s-4); color: var(--ink-2); }
.project-description ul,
.project-description ol { margin-bottom: var(--s-4); padding-left: var(--s-6); color: var(--ink-2); }
.project-description li { margin-bottom: var(--s-2); }
.project-description code {
  font-family: var(--f-mono);
  font-size: var(--t-mono);
  background: var(--green-tint);
  padding: 2px 6px;
  border: 1px solid var(--rule);
}
.project-description pre {
  background: var(--green-tint);
  border: var(--rule-mid) solid var(--rule);
  padding: var(--s-5);
  overflow-x: auto;
  margin-bottom: var(--s-4);
}
.project-description a {
  color: var(--green-deep);
  text-decoration: underline;
}

/* ── Responsive grid helpers ────────────────────────────────────── */
@media (max-width: 1024px) {
  .grid12 [style*="grid-column: 1 / 9"],
  .grid12 [style*="grid-column: 1 / 8"],
  .grid12 [style*="grid-column: 1 / 7"] { grid-column: 1 / 13 !important; }

  .grid12 [style*="grid-column: 9 / 13"] { grid-column: 1 / 13 !important; }

  .grid12 [style*="grid-column: span 4"],
  .grid12 [style*="grid-column: span 3"] { grid-column: span 6; }
}

@media (max-width: 640px) {
  .grid12 [style*="grid-column"],
  .grid12 [style*="grid-column: span"] { grid-column: 1 / 13 !important; }

  form [style*="grid-template-columns: 1fr 1fr"],
  form [style*="grid-template-columns: 2fr 1fr"] { grid-template-columns: 1fr !important; }

  .nav__mobile-cta { display: inline-flex; margin-left: auto; }
  .nav__mobile-cta + .nav__burger { margin-left: 15px; }

  /* hamburger replaces inline nav on mobile */
  .nav__burger {
    display: flex; flex-direction: column; justify-content: space-between;
    width: 24px; height: 18px; background: none; border: none; cursor: pointer; padding: 0; margin-left: auto; flex-shrink: 0;
  }
  .nav__burger span {
    display: block; width: 100%; height: 2px; background: var(--ink);
    transition: transform 0.2s, opacity 0.2s;
  }
  .nav__burger--open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .nav__burger--open span:nth-child(2) { opacity: 0; }
  .nav__burger--open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

  /* collapse the menu to a full-width drawer */
  .nav__menu {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch;
    background: var(--bg); border-bottom: var(--rule-mid) solid var(--rule);
    padding: var(--s-4) var(--pad-x) var(--s-6);
    gap: var(--s-2);
  }
  .nav__menu:not([hidden]) { display: flex; }
  .nav__links {
    flex-direction: column; gap: var(--s-3); justify-content: flex-start;
  }
  .nav__links a { font-size: var(--t-body-sm); padding: var(--s-2) 0; border-bottom-color: transparent; }
  .nav__cta {
    flex-direction: column; align-items: stretch; gap: var(--s-2);
    margin-top: var(--s-4); padding-top: var(--s-4); border-top: var(--rule-mid) solid var(--rule);
  }
  .nav__cta .btn { text-align: center; }
  .nav__cta .mono { padding: var(--s-2) 0; }
}