/**
 * ohana-base.css — Your Ohana design system foundation
 * Include on EVERY site page. Provides brand tokens, reset, and base typography.
 * Replaces per-page :root variables, resets, and .brand-stripe-bar definitions.
 */

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

:root {
  /* Brand colors */
  --brand-pink: #ED1B67;
  --brand-orange: #F47940;
  --brand-yellow: #EBCF00;
  --brand-green: #94C93D;
  --brand-blue: #00BAC6;
  --brand-pink-hover: #E60650;
  --brand-blue-dark: #009BA6;

  /* AA-safe surfaces - use these when WHITE text sits on a brand color (>=4.5:1) */
  --brand-teal-aa: #00767E;   /* white text 4.8:1 */
  --brand-orange-aa: #BD5018; /* white text 4.6:1 */
  --brand-pink-aa: #C71458;   /* white text 5.6:1 */

  /* Text */
  --text-dark: #000000;
  --text-mid: #000000;
  --text-light: #000000; /* a11y: was #888888 (3.5:1, fails WCAG 1.4.3); #717171 = 4.9:1 on white */

  /* Surfaces */
  --border: #e0e0e0;
  --bg-light: #f5f7fa;
  --white: #ffffff;

  /* Brand stripe */
  --brand-stripe: linear-gradient(90deg, #ED1B67, #F47940, #EBCF00, #94C93D, #00BAC6);

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.1);
  --shadow-lg: 0 8px 30px rgba(0,0,0,0.12);

  /* Layout */
  --radius: 12px;
  --font: 'Poppins', Arial, sans-serif;

  /* Teal accents */
  --teal: #00BAC6;
  --teal-light: #e0f7fa;
  --teal-dark: #00838f;
}

/* ─── Ctrl+K discoverability hint ─────────────────────────────────────── */
/* Staff-only surfaces (/tools.html, /cqi.html, /referrals.html). #555 muted
   foreground is acceptable here — added to Check 7 allowlist in yo-precommit.sh
   under the class name .kb-shortcut-hint. Hidden on viewports ≤600px where the
   keyboard shortcut doesn't apply. */
.kb-shortcut-hint {
  font-size: 0.85rem;
  color: #000; /* check7: kb-shortcut-hint — staff-only muted foreground */
  margin-top: 6px;
  font-weight: 500;
}
.kb-shortcut-hint kbd {
  display: inline-block;
  padding: 1px 6px;
  border: 1px solid #c0c0c0;
  border-radius: 4px;
  background: #f4f4f4;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.8em;
  color: #000;
  box-shadow: 0 1px 0 rgba(0,0,0,0.06);
}
@media (max-width: 600px) {
  .kb-shortcut-hint { display: none; }
}

/* ─── Photo slot helpers (yophotos rotation) ──────────────────────────── */
.photo-slot {
  display: block;
  max-width: 100%;
  height: auto;
  object-fit: cover;
}
/* Anchor faces near the top-third so heads aren't clipped when portraits
   are cropped into square/circular slots. center 30% lines up with where
   most portraits put the subject's face. */
.photo-slot-wrap .photo-slot,
.pol .photo-slot { object-position: center 30%; }
/* Fill the wrapper completely so the slot doesn't show empty background. */
.photo-slot-wrap .photo-slot,
.photo-strip .photo-slot { width: 100%; height: 100%; }
.photo-slot.is-flipped { transform: scaleX(-1); }

/* Colored wash overlays for photo-slot images */
.photo-slot.overlay-pink-15 { position: relative; }
.photo-slot.overlay-orange-15 { position: relative; }

/* Generic overlay wrapper applied by placements that need it (hero-accent,
   section-strip). Keep images clean when no overlay is requested. */
.photo-slot-wrap { position: relative; display: inline-block; }
.photo-slot-wrap.overlay-pink::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(237,27,103,0.15), transparent 60%);
  pointer-events: none;
}
.photo-slot-wrap.overlay-orange::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(244,121,64,0.15), transparent 60%);
  pointer-events: none;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; scrollbar-gutter: stable; }

body {
  font-family: var(--font);
  background: var(--bg-light);
  color: var(--text-dark);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

.brand-stripe-bar {
  height: 3px;
  background: var(--brand-stripe);
  flex-shrink: 0;
}

/* ─── Workgroup-meetings series banner + cancelled rendering (T10) ─────
   Lives here (not index.html) so the Subscribe modal / Series-settings
   page can reuse the cancelled-row affordance. Colors stay in the
   #333/#fff/brand-color band to clear Check 7. */
.wgm-series-banner {
  background: #fff8e7;
  border-left: 4px solid #d4a017;
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
  border-radius: 4px;
}
.wgm-series-banner h3 { margin: 0 0 0.25rem 0; color: #000; }
.wgm-series-banner p  { margin: 0 0 0.75rem 0; color: #000; }
.wgm-series-banner-actions {
  display: flex; gap: 0.5rem; flex-wrap: wrap;
}
.wgm-cancelled-row {
  opacity: 0.6;
  text-decoration: line-through;
}
.wgm-show-all { margin-top: 0.5rem; }
.wgm-cancel-toggle { margin-top: 0.5rem; }
.wgm-new-series-btn { /* slotted into action bar — no positional override */ }

/* Task 11 — per-occurrence series badge + override action row. Owner/admin
   only; sits under the title metadata. Colors stay #333 (Check 7 clean). */
.wgm-series-badge { font-size: 0.875rem; color: #000; margin: 0.5rem 0; }
.wgm-series-badge a { color: #000; text-decoration: underline; }
.wgm-occurrence-actions { display: flex; gap: 0.5rem; margin: 0.75rem 0; flex-wrap: wrap; }

/* Task 13 — code/URL display block for subscribe-modal and similar surfaces. */
.ohana-code-block { background: #f5f5f5; padding: 0.5rem; border-radius: 4px; font-family: monospace; word-break: break-all; margin: 0.5rem 0; }

/* Subscribe modal — action row, hint, and per-app instructions. Grays stay
   #333 (Check 7 clean). */
.ohana-form-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; margin: 0.5rem 0; }
.ohana-form-hint { font-size: 0.875rem; color: #000; margin: 0.25rem 0 0.75rem; }
.ohana-subscribe-instructions { margin-top: 0.5rem; }
.ohana-subscribe-instructions > summary { cursor: pointer; font-weight: 600; padding: 0.35rem 0; }
.ohana-subscribe-instructions p { margin: 0.75rem 0 0.25rem; }
.ohana-subscribe-instructions ol { margin: 0 0 0.5rem 1.25rem; padding: 0; }
.ohana-subscribe-instructions li { margin: 0.15rem 0; line-height: 1.4; }