/* Phase 7.5: the Junior Sadhaks pages' own header and footer (templates/public/partials/kids-header.php, kids-footer.php).
   Temple Dark by default with the light theme's tokens; 44 px tap targets; phones first (no horizontal scroll at 360). */
.kh { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 8px 16px; padding-top: calc(8px + env(safe-area-inset-top));
  background: var(--c-surface, #161311); border-bottom: 1px solid var(--c-line, rgba(217, 119, 6, .2)); }
.kh__brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--c-ink, #FCFBF7); text-decoration: none; font: 600 1.2rem var(--font-display, "Cormorant Garamond", serif); white-space: nowrap; }
.kh__emblem { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 236, 190, .9) 0 55%, rgba(245, 158, 11, .25) 70%, transparent 72%); }
.kh__emblem img { width: 36px; height: auto; }
.kh__nav { display: flex; gap: 6px; margin-left: auto; }
.kh__nav a, .kh__grown { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; border-radius: 999px; color: var(--c-ink, #FCFBF7); text-decoration: none; font: 600 .98rem var(--font-body, Mukta, system-ui); border: 1px solid transparent; }
.kh__nav a:hover, .kh__nav a:focus-visible, .kh__nav a[aria-current="page"] { border-color: rgba(245, 158, 11, .5); background: rgba(245, 158, 11, .1); }
.kh__grown { color: var(--c-muted, #CBBFAE); font-weight: 500; font-size: .9rem; border-color: var(--c-line, rgba(217, 119, 6, .2)); }
.kf { padding: 24px 16px 32px; text-align: center; background: var(--c-surface, #161311); border-top: 1px solid var(--c-line, rgba(217, 119, 6, .2)); color: var(--c-muted, #CBBFAE); }
.kf__line { margin: 0 auto 6px; max-width: 70ch; font: 500 .95rem/1.5 var(--font-body, Mukta, system-ui); }
.kf__small { font-size: .85rem; }
.kf a { color: var(--c-accent, #F59E0B); }
@media (max-width: 767.98px) {
  .kh { flex-wrap: wrap; row-gap: 4px; padding-left: 12px; padding-right: 12px; }
  .kh__long { display: none; }
  .kh__nav { order: 3; width: 100%; margin-left: 0; justify-content: space-between; }
  .kh__nav a { flex: 1 1 0; justify-content: center; padding: 0 6px; }
  .kh__grown { margin-left: auto; padding: 0 10px; }
}