/* Claude Code Bootcamp — site styles
   Base tokens and global rules carried over from the source design,
   plus the hover/focus rules that replace the design runtime's
   style-hover / style-focus attributes. */

html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: #0B0C0E;
  color: #EDEEF0;
  font-family: 'Inter Tight', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: #EDEEF0; text-decoration: none; }
a:hover { color: #A9C9FF; }
* { box-sizing: border-box; }
::selection { background: #A9C9FF; color: #0B0C0E; }
input::placeholder { color: #5C616B; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Accordion visibility */
.faq-answer[hidden] { display: none; }

/* Hover states (were style-hover) */
.h0:hover { opacity: 0.9; }
.h1:hover { background: rgba(169,201,255,0.10); }
.h2:hover { color: #A9C9FF; }
.h3:hover { border-color: #A9C9FF; color: #A9C9FF; }

/* Focus states (were style-focus) */
.f0:focus { outline: none; border-color: #A9C9FF; }

/* Image placeholder slots (were <image-slot>) */
.image-slot {
  width: 100%;
  height: 100%;
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px;
}
.image-slot span {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #5C616B;
}

/* Instructor headshot fallback (shown if the headshot image is missing) */
.headshot-ph {
  width: 100%;
  aspect-ratio: 4/5;
  border-radius: 8px;
  border: 1px dashed rgba(237,238,240,0.16);
  background: #131519;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  padding: 24px;
}
.headshot-ph strong {
  font-size: 15px;
  font-weight: 600;
  color: #8B9099;
}
.headshot-ph span {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: .08em;
  color: #5C616B;
}