/* ---- Buju brand tokens (Brand Guidelines 2026) ---- */
:root {
  --bj-blue: #0A5CD1;        /* Science Blue */
  --bj-blue-dark: #084AA7;   /* primary hover */
  --bj-blue-soft: #5C9BE9;
  --bj-blue-pale: #CAE0F8;
  --bj-orange: #F66700;      /* Joy Orange */
  --bj-orange-mid: #FF9F58;
  --bj-orange-pale: #FFD9BD;
  --bj-green: #0BA671;       /* Growth Green */
  --bj-green-mid: #42CDA6;
  --bj-green-pale: #C8ECE2;
  --bj-ink: #0A2A66;         /* headings / dark text */
  --bj-slate: #51617D;       /* body text */
  --bj-muted: #6B7891;
  --bj-cream: #FFFDF7;       /* page background */
  --bj-almond: #FFF3EA;      /* Soft Almond */
  --bj-border: #ECE6D8;
}

/* Buju redesign — index + join.
   Layout/visuals live inline on the elements (matching the design spec).
   This file holds what inline styles can't express: :hover, flip cards,
   input focus, and responsive collapsing. */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; }
::selection { background: var(--bj-blue-pale); color: var(--bj-ink); }

/* ---- Hover states (the reference used a runtime `style-hover` attr) ---- */
.bj-navlink { transition: color .15s; }
.bj-navlink:hover { color: var(--bj-blue) !important; }

.bj-btn-blue { transition: background .15s; }
.bj-btn-blue:hover { background: var(--bj-blue-dark) !important; }

.bj-btn-ghost { transition: border-color .15s, color .15s; }
.bj-btn-ghost:hover { border-color: var(--bj-blue) !important; color: var(--bj-blue) !important; }

.bj-btn-orange { transition: filter .15s; }
.bj-btn-orange:hover { filter: brightness(0.94); }

.bj-footlink { transition: color .15s; }
.bj-footlink:hover { color: #fff !important; }

.bj-anno-link:hover { text-decoration: underline; }

/* ---- Form inputs (join) ---- */
.bj-input { min-width: 0; max-width: 100%; }
.bj-input::placeholder { color: #9AA6BC; }
.bj-input:focus { border-color: var(--bj-blue); box-shadow: 0 0 0 3px rgba(10,92,209,0.12); }

/* Let grid/flex children shrink below their content's intrinsic width
   (otherwise inputs force the column wider than a phone viewport). */
.bj-join-main > *, .bj-form-2col > *, .bj-hero > * { min-width: 0; }

/* ---- Flip cards (developmental-science section) ---- */
.bw-flip { perspective: 1500px; height: 292px; border-radius: 18px; outline: none; cursor: pointer; }
.bw-flip-inner { position: relative; width: 100%; height: 100%; transition: transform .6s cubic-bezier(.4,.2,.2,1); transform-style: preserve-3d; }
.bw-flip:hover .bw-flip-inner,
.bw-flip:focus-within .bw-flip-inner,
.bw-flip:focus .bw-flip-inner { transform: rotateY(180deg); }
.bw-face { position: absolute; inset: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; border-radius: 18px; padding: 24px 22px; display: flex; flex-direction: column; }
.bw-back { transform: rotateY(180deg); }
.bw-flip:focus-visible { box-shadow: 0 0 0 3px rgba(10,92,209,.4); }

/* ---- Mobile nav toggle ---- */
.bj-nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 6px; color: var(--bj-ink); }
.bj-nav-toggle svg { display: block; }

/* ---- Responsive ---- */
@media (max-width: 991px) {
  .bj-nav-toggle { display: inline-flex; }
  .bj-nav-links {
    display: none !important;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch !important;
    gap: 4px !important;
    background: var(--bj-cream);
    border-bottom: 1px solid var(--bj-border);
    padding: 12px 32px 18px !important;
  }
  .bj-nav-links.open { display: flex !important; }
  .bj-nav-links a { padding: 10px 4px; }

  /* collapse the 2- and 3-col grids */
  .bj-hero { grid-template-columns: 1fr !important; gap: 36px !important; padding-top: 48px !important; }
  .bj-grid-3 { grid-template-columns: 1fr !important; }
  .bj-grid-2 { grid-template-columns: 1fr !important; }
  .bj-parents { grid-template-columns: 1fr !important; gap: 40px !important; }
  .bj-about { grid-template-columns: 1fr !important; gap: 36px !important; }
  .bj-join-main { grid-template-columns: 1fr !important; gap: 40px !important; }

  /* let flip cards size to content once stacked */
  .bw-flip, .bw-flip-inner { height: auto !important; min-height: 260px; }
  .bw-face { position: relative; }
  .bw-back { display: none !important; }
}

@media (max-width: 560px) {
  .bj-h1 { font-size: 40px !important; }
  .bj-h2 { font-size: 30px !important; }
  .bj-join-h1 { font-size: 36px !important; }
  .bj-form-2col { grid-template-columns: 1fr !important; }
  .bj-trust-row { flex-wrap: wrap; gap: 12px 18px !important; }
}