/* Shared CSS variables and styles used across landing.html and index.html */

:root {
  /* Band color system — aligned to SGDS palette */
  --band-l5: #0A8217;
  --band-l4: #1f69ff;
  --band-l3: #0F71BB;
  --band-l2: #F79009;
  --band-l1: #D7260F;
  --band-u: #667085;

  /* Semantic UI colors — Stitch palette override */
  --color-primary: #6d0dfd;
  --color-success: #0A8217;
  --color-warning: #F79009;
  --color-danger: #D7260F;
  --color-muted: #667085;
  --bg-main: #f7f5f8;
  --bg-card: #ffffff;
  --color-border: #dee2e6;

  /* Border radius tokens */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-pill: 9999px;

  /* Typography — Public Sans (Stitch design system) */
  --font-stack: 'Public Sans', 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;

  /* SGDS primary color override */
  --sgds-primary: #6d0dfd;
  --sgds-primary-rgb: 109, 13, 253;
  --bs-primary: #6d0dfd;
  --bs-primary-rgb: 109, 13, 253;
  --bs-link-color: #6d0dfd;
}

/* App header — used on index.html (not landing) */
.app-header {
  background: #fff;
  border-bottom: 1px solid var(--color-border);
  padding: 0.625rem 0;
  position: sticky;
  top: 0;
  z-index: 100;
}

.app-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.app-header-logo {
  font-weight: 700;
  font-size: 1.1rem;
  color: #212529;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.app-header-logo:hover {
  color: var(--color-primary);
}

/* Band badge utility classes */
.band-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25em 0.65em;
  border-radius: 50rem;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
  color: #fff;
}

.band-l5 { background-color: var(--band-l5); }
.band-l4 { background-color: var(--band-l4); }
.band-l3 { background-color: var(--band-l3); }
.band-l2 { background-color: var(--band-l2); }
.band-l1 { background-color: var(--band-l1); }
.band-u  { background-color: var(--band-u); }

/* App footer */
.app-footer {
  padding: 1.25rem 0;
  border-top: 1px solid var(--color-border);
}

body.conversation-active .app-footer {
  display: none;
}

/* Bootstrap 5.3 utilities (not in SGDS / Bootstrap 5.1) */
.fw-semibold { font-weight: 600; }
.bg-primary-subtle { background-color: #ede5fb !important; }
.bg-info-subtle { background-color: #d6edf8 !important; }
.bg-success-subtle { background-color: #d4f5d7 !important; }
.bg-warning-subtle { background-color: #fef0d4 !important; }
.bg-danger-subtle { background-color: #fcdad6 !important; }

/* SGDS / Bootstrap primary color overrides */
.btn-primary {
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: #5a0ad4 !important;
  border-color: #5a0ad4 !important;
}

.btn-outline-primary {
  color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: #fff !important;
}

.text-primary {
  color: var(--color-primary) !important;
}

.bg-primary {
  background-color: var(--color-primary) !important;
}

a {
  color: var(--color-primary);
}

/* ===== Bottom Tab Navigation ===== */
.bottom-tabs {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: calc(56px + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: #fff;
  border-top: 1px solid var(--color-border);
  display: flex;
  align-items: stretch;
  justify-content: space-around;
  z-index: 1020;
}

.bottom-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  text-decoration: none;
  color: #667085;
  font-size: 0.68rem;
  font-weight: 500;
  padding: 6px 0;
  transition: color 0.15s;
}

.bottom-tab .material-symbols-outlined {
  font-size: 24px;
}

.bottom-tab.active {
  color: var(--color-primary);
}

.bottom-tab:hover {
  color: var(--color-primary);
  text-decoration: none;
}

body.conversation-active .bottom-tabs {
  display: none;
}

/* Desktop: hide bottom tabs, show header nav */
@media (min-width: 992px) {
  .bottom-tabs {
    display: none;
  }
}

/* ===== Desktop Header Navigation ===== */
.header-nav {
  display: none;
  align-items: center;
  gap: 0.25rem;
}

.header-nav-link {
  padding: 0.4rem 0.75rem;
  color: #495057;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  border-radius: var(--radius-md);
  transition: background 0.15s, color 0.15s;
}

.header-nav-link:hover {
  background: var(--bg-main);
  color: #212529;
  text-decoration: none;
}

.header-nav-link.active {
  color: var(--color-primary);
  font-weight: 600;
}

@media (min-width: 992px) {
  .header-nav {
    display: flex;
  }
}

/* Add padding to body for bottom tabs on mobile */
@media (max-width: 991px) {
  body:not(.conversation-active) {
    padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
  }
}

/* Prevent horizontal overflow */
html, body {
  overflow-x: hidden;
}

/* ===== Child Picker Screen ===== */
.child-picker-container {
  min-height: 60vh;
  padding-top: 2rem;
  max-width: 520px;
  margin: 0 auto;
}

.child-picker-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  width: 100%;
  max-width: 400px;
}

@media (min-width: 768px) {
  .child-picker-grid {
    grid-template-columns: repeat(3, 1fr);
    max-width: 480px;
  }
}

.child-picker-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1.25rem 0.75rem;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.1s;
  min-height: 64px;
}

.child-picker-card:hover,
.child-picker-card:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(109, 13, 253, 0.12);
  transform: translateY(-2px);
}

.child-picker-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: 700;
  color: #fff;
}

.child-picker-name {
  font-weight: 600;
  font-size: 0.95rem;
  color: #212529;
}

.child-picker-add-form {
  width: 100%;
  max-width: 360px;
}

.child-picker-color-row {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.child-color-option {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 3px solid transparent;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.1s;
  padding: 0;
}

.child-color-option:hover {
  transform: scale(1.1);
}

.child-color-option.selected {
  border-color: #212529;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #212529;
}

/* ===== Header Child Avatar ===== */
.header-child-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}

/* ===== Home Child Indicator ===== */
.home-child-indicator {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: var(--bg-main);
  border-radius: var(--radius-lg);
  margin-bottom: 1rem;
}

.home-child-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}

/* ===== Home Sign-Up CTA ===== */
.home-signup-cta {
  border-top: 1px solid var(--color-border);
  padding-top: 1rem;
}