/* =========================================================
   Brains, Bones and Behavior — shared stylesheet
   Built from the confirmed BBB design system:
   Stage 1 (variables), Stage 2 (type), Stage 3 (components)
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Zen+Antique&family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
  /* Stage 1 — Surface */
  --surface-default: #FFFFFF;
  --surface-subtle: #F4F0FA;
  --surface-accent-subtle: #EFE4FB;
  --surface-warning-subtle: #FBEAE7;

  /* Stage 1 — Border */
  --border-default: #E3DCEE;
  --border-accent: #920EF0;

  /* Stage 1 — Text */
  --text-default: #211A2E;
  --text-secondary: #5C5468;
  --text-accent: #5B1E96;
  --text-on-accent: #FFFFFF;

  /* Stage 1 — Icon */
  --icon-default: #5C5468;
  --icon-accent: #920EF0;
  --icon-warning: #A3352A;

  /* Brand purple (hero overlay strength) */
  --purple: #920EF0;

  /* spacing */
  --sp-2: .5rem; --sp-3: .75rem; --sp-4: 1rem; --sp-5: 1.5rem;
  --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4rem; --sp-9: 6rem;

  --radius: 10px;
  --max: 1140px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--surface-default);
  color: var(--text-default);
  font-family: 'Manrope', sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* Stage 2 — Type scale, named exactly */
.display-hero  { font-family:'Zen Antique',serif; font-weight:700; font-size: 44px; line-height:1.15; }
.display-page  { font-family:'Zen Antique',serif; font-weight:700; font-size: 38px; line-height:1.2; }
.heading-lg    { font-family:'Zen Antique',serif; font-weight:400; font-size: 30px; line-height:1.25; }
.heading-md    { font-family:'Zen Antique',serif; font-weight:400; font-size: 22px; line-height:1.3; }
.heading-sm    { font-family:'Manrope',sans-serif; font-weight:800; font-size: 19px; }
.body-lede     { font-family:'Manrope',sans-serif; font-weight:400; font-size: 17px; }
.body-default  { font-family:'Manrope',sans-serif; font-weight:400; font-size: 15.5px; }
.body-button   { font-family:'Manrope',sans-serif; font-weight:700; font-size: 15px; }
.label-kicker  { font-family:'Manrope',sans-serif; font-weight:700; font-size: 13px; text-transform:uppercase; letter-spacing:.065em; }
.meta-small    { font-family:'Manrope',sans-serif; font-weight:500; font-size: 12px; }

/* Focus visibility — fixes the live site's "outline:none, no replacement" bug */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--border-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

.container { max-width: var(--max); margin: 0 auto; padding: 0 var(--sp-5); }
.section { padding: var(--sp-9) 0; }
.section-subtle { background: var(--surface-subtle); }
.section-head { max-width: 640px; margin-bottom: var(--sp-7); }
.section-head.center { margin-left:auto; margin-right:auto; text-align:center; }

/* ---------- Navbar (Stage 3: real pattern is wrap, not hamburger) ---------- */
.navbar {
  border-bottom: 1px solid var(--border-default);
  background: var(--surface-default);
  position: sticky; top: 0; z-index: 40;
}
.navbar .container {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: var(--sp-4);
  padding-top: var(--sp-3); padding-bottom: var(--sp-3);
}
.navbar-brand img { height: 3.25rem; }
.navbar-links { display:flex; flex-wrap:wrap; gap: var(--sp-6); align-items:center; }
.navbar-links a { font-family:'Manrope'; font-weight:700; font-size:14px; color: var(--text-accent); }
.navbar-links a:hover { color: var(--purple); }
.navbar-links a.current { border-bottom: 2px solid var(--purple); padding-bottom: 4px; }

/* ---------- Buttons ---------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:'Manrope'; font-weight:700; font-size:15px;
  padding: 14px 28px; border-radius: 999px; border: none; cursor:pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn-primary { background: var(--purple); color: var(--text-on-accent); }
.btn-primary:hover { background: var(--text-accent); }
.btn-ghost { background: transparent; color: var(--text-accent); border: 1.5px solid var(--border-default); }
.btn-ghost:hover { border-color: var(--purple); }
.btn-link { background:none; border:none; color: var(--text-accent); font-weight:700; font-size:14px; padding:0; cursor:pointer; }
.btn-link:hover { color: var(--purple); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  background: linear-gradient(rgba(146,14,240,.55), rgba(33,26,46,.55)), var(--hero-img, none);
  background-size: cover; background-position: center;
  color: var(--text-on-accent);
  padding: var(--sp-9) 0;
}
.hero-inner { max-width: 640px; }
.hero .display-hero { color: var(--text-on-accent); margin: 0 0 var(--sp-4); }
.hero .body-lede { color: rgba(255,255,255,.92); margin: 0 0 var(--sp-6); }

/* ---------- Cards (Stage 3 data-display) ---------- */
.card {
  background: var(--surface-default);
  border: 1px solid var(--border-default);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex; flex-direction: column; height: 100%;
}
.card-img { aspect-ratio: 4/3; overflow:hidden; background: var(--surface-subtle); }
.card-img img { width:100%; height:100%; object-fit: cover; }
.card-body { padding: var(--sp-5); display:flex; flex-direction:column; gap: var(--sp-3); flex: 1; }
.card-body .heading-sm { margin:0; }
.card-body .body-default { color: var(--text-secondary); margin:0; flex:1; }

.grid { display:grid; gap: var(--sp-6); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .grid-3, .grid-4 { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 600px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

/* ---------- Badge / kicker ---------- */
.badge {
  display:inline-flex; align-items:center; gap:6px;
  background: var(--surface-accent-subtle); color: var(--text-accent);
  padding: 4px 12px; border-radius: 999px;
  font-family:'Manrope'; font-weight:700; font-size:12px; text-transform:uppercase; letter-spacing:.05em;
  width: fit-content;
}

/* ---------- Price cards ---------- */
.price-card { border: 1px solid var(--border-default); border-radius: var(--radius); padding: var(--sp-6); background: var(--surface-default); }
.price-card .price { font-family:'Zen Antique'; font-size: 30px; color: var(--text-accent); margin: var(--sp-2) 0; }
.price-card ul { margin: var(--sp-4) 0; padding-left: 1.1em; color: var(--text-secondary); font-size: 15.5px; }
.price-card li { margin-bottom: 6px; }

/* ---------- Form (Stage 3 form-elements) ---------- */
.field { margin-bottom: var(--sp-5); }
.field label { display:block; font-weight:700; font-size:13.5px; margin-bottom:8px; }
.field input, .field select, .field textarea {
  width:100%; font-family:inherit; font-size:15px; padding:12px 14px;
  border:1.5px solid var(--border-default); border-radius:8px; background: var(--surface-default); color: var(--text-default);
}
.field .hint { font-size:12px; color: var(--text-secondary); margin-top:6px; }
.form-card { background: var(--surface-subtle); border-radius: var(--radius); padding: var(--sp-7); }

/* ---------- Entry list (discovery flow) ---------- */
.entry-list { display:flex; flex-direction:column; border-top: 1px solid var(--border-default); }
.entry-item {
  display:flex; align-items:center; justify-content:space-between; gap: var(--sp-4);
  padding: var(--sp-5) 0; border-bottom: 1px solid var(--border-default);
  background:none; border-left:none; border-right:none; border-top:none;
  width:100%; text-align:left; cursor:pointer;
}
.entry-item:hover .entry-title { color: var(--purple); }
.entry-title { font-family:'Zen Antique'; font-size:19px; margin-bottom:4px; color: var(--text-default); }
.entry-sub { font-size:13.5px; color: var(--text-secondary); }
.entry-arrow { font-size:20px; color: var(--purple); flex-shrink:0; }

/* ---------- Footer ---------- */
.footer { border-top: 1px solid var(--border-default); padding: var(--sp-6) 0; }
.footer .container { display:flex; flex-wrap:wrap; justify-content:space-between; gap: var(--sp-4); align-items:center; }
.footer-links { display:flex; gap: var(--sp-5); flex-wrap:wrap; }
.footer-links a { color: var(--text-accent); font-size: 13.5px; font-weight:700; }
.footer .meta-small { color: var(--text-secondary); }

/* ---------- Utility ---------- */
.stack { display:flex; flex-direction:column; gap: var(--sp-4); }
.row { display:flex; gap: var(--sp-6); flex-wrap:wrap; }
.mt-0{margin-top:0} .mb-0{margin-bottom:0}
.text-secondary { color: var(--text-secondary); }
.center { text-align:center; }