/**
 * shared.css — Rehearse Management web design system
 *
 * Hosted at https://rehearse.management/shared.css
 * Referenced by all subdomains so token and component changes propagate everywhere.
 *
 * Contents
 *   1. CSS custom properties (light + dark)
 *   2. Reset & base
 *   3. Layout archetypes  — .rm-page-doc  (wide column docs)
 *                         — .rm-page-card (centred card pages)
 *   4. Site header        — .rm-header
 *   5. Site footer        — .rm-footer
 *   6. Shared components  — .rm-card, .rm-not-found, .rm-callout
 */

/* ─── 1. Tokens ─────────────────────────────────────────────────────────────── */

:root {
  --rm-bg:             #F5F5F3;
  --rm-surface:        #EAEAE8;
  --rm-border:         #D0D0CC;
  --rm-text:           #111113;
  --rm-text-secondary: #4A4A4A;
  --rm-text-muted:     #888888;
  --rm-primary:        #00CC55;
  --rm-primary-dark:   #00AA44;

  --rm-font-sans: 'Open Sans', -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
  --rm-font-mono: 'Roboto Mono', 'SF Mono', 'Fira Code', Consolas, Monaco, 'Courier New', monospace;

  --rm-max-doc:  780px;
  --rm-max-card: 420px;
  --rm-pad-h:    28px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --rm-bg:             #111113;
    --rm-surface:        #1C1C1F;
    --rm-border:         #2A2A2F;
    --rm-text:           #F2F2F0;
    --rm-text-secondary: #AEAEB2;
    --rm-text-muted:     #636366;
    --rm-primary:        #00CC55;
    --rm-primary-dark:   #00AA44;
  }
}

/* ─── 2. Reset & base ────────────────────────────────────────────────────────── */

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

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  background-color: var(--rm-bg);
  color: var(--rm-text);
  font-family: var(--rm-font-sans);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

a {
  color: var(--rm-primary);
  text-decoration: none;
}

a:hover { text-decoration: underline; }

/* ─── 3. Layout archetypes ───────────────────────────────────────────────────── */

/*
 * .rm-page-doc
 * Full-width document layout (docs, legal pages).
 * Provides the outer column and vertical padding between header and footer.
 */
.rm-page-doc {
  max-width: var(--rm-max-doc);
  margin: 0 auto;
  padding: 0 var(--rm-pad-h);
}

/*
 * .rm-page-card
 * Centred card layout (join, auditions fallback, future landing pages).
 * Full-viewport flex column that centres its single .rm-card child.
 */
.rm-page-card {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px var(--rm-pad-h);
}

.rm-page-card .rm-card {
  width: 100%;
  max-width: var(--rm-max-card);
}

/* ─── 4. Site header ─────────────────────────────────────────────────────────── */

/*
 * .rm-header
 * Logo on the left, optional <nav> on the right.
 * Wrap both in a .rm-page-doc column.
 *
 * Markup:
 *   <header class="rm-header-wrap">
 *     <div class="rm-page-doc rm-header">
 *       <a href="https://rehearse.management" class="rm-header-logo">
 *         <picture>…</picture>
 *       </a>
 *       <nav class="rm-header-nav">          ← optional
 *         <a href="…">…</a>
 *       </nav>
 *     </div>
 *   </header>
 */

.rm-header-wrap {
  border-bottom: 1px solid var(--rm-border);
  background-color: var(--rm-bg);
}

.rm-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 24px;
  padding-bottom: 24px;
  gap: 16px;
  flex-wrap: wrap;
}

.rm-header-logo {
  display: inline-flex;
  line-height: 0;
  text-decoration: none;
}

.rm-header-logo img {
  height: 36px;
  width: auto;
  display: block;
}

.rm-header-nav {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
}

.rm-header-nav a {
  font-family: var(--rm-font-mono);
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--rm-text-secondary);
  text-decoration: none;
  text-transform: uppercase;
  transition: color 0.15s;
}

.rm-header-nav a:hover  { color: var(--rm-text); }
.rm-header-nav a.active {
  color: var(--rm-primary);
  border-bottom: 2px solid var(--rm-primary);
  padding-bottom: 2px;
}

/* Card-layout pages: logo above the card, no full-width header bar */
.rm-card-logo {
  height: 40px;
  width: auto;
  display: block;
  margin-bottom: 24px;
}

/* ─── 5. Site footer ─────────────────────────────────────────────────────────── */

/*
 * .rm-footer
 * Copyright left, links right.
 * Doc pages: wrap in .rm-page-doc. Card pages: placed below .rm-page-card.
 *
 * Markup:
 *   <footer class="rm-footer-wrap">
 *     <div class="rm-page-doc rm-footer">
 *       <span class="rm-footer-copy">© 2026 Everett Anton</span>
 *       <nav class="rm-footer-nav">
 *         <a href="…">Privacy Policy</a>
 *         <a href="…">Terms of Use</a>
 *       </nav>
 *     </div>
 *   </footer>
 *
 * Card pages use .rm-footer-card instead of .rm-footer-wrap + .rm-page-doc:
 *   <footer class="rm-footer-card">…same inner markup…</footer>
 */

.rm-footer-wrap {
  border-top: 1px solid var(--rm-border);
  margin-top: 80px;
}

.rm-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 32px;
  padding-bottom: 48px;
}

.rm-footer-copy,
.rm-footer-nav a {
  font-family: var(--rm-font-mono);
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--rm-text-muted);
  text-decoration: none;
}

.rm-footer-nav {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.rm-footer-nav a:hover { color: var(--rm-text); text-decoration: none; }

/* Card-page footer: sits below the card, narrower, no top border on the wrap */
.rm-footer-card {
  width: 100%;
  max-width: var(--rm-max-card);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 20px;
  margin-top: 8px;
  border-top: 1px solid var(--rm-border);
}

.rm-footer-card .rm-footer-copy,
.rm-footer-card .rm-footer-nav a {
  font-family: var(--rm-font-mono);
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--rm-text-muted);
  text-decoration: none;
}

.rm-footer-card .rm-footer-nav { gap: 14px; }
.rm-footer-card .rm-footer-nav a:hover { color: var(--rm-text); }

/* ─── 6. Shared components ───────────────────────────────────────────────────── */

/* Surface card (used by join, auditions, etc.) */
.rm-card {
  /* intentionally unstyled — a layout container only */
}

/* Not-found / error message box */
.rm-not-found {
  border: 1px solid var(--rm-border);
  background-color: var(--rm-surface);
  padding: 20px;
  margin-top: 8px;
}

.rm-not-found-title {
  font-family: var(--rm-font-sans);
  font-weight: 700;
  font-size: 15px;
  color: var(--rm-text);
  margin-bottom: 6px;
}

.rm-not-found-text {
  font-family: var(--rm-font-sans);
  font-size: 13px;
  color: var(--rm-text-secondary);
  line-height: 1.6;
}

/* Callout block (used in legal docs) */
.rm-callout {
  background: var(--rm-surface);
  border-left: 3px solid var(--rm-primary);
  padding: 16px 20px;
  margin: 20px 0;
}

.rm-callout p {
  font-size: 14px;
  color: var(--rm-text-secondary);
  line-height: 1.7;
  margin-bottom: 0;
}

/* ─── Responsive ─────────────────────────────────────────────────────────────── */

@media (max-width: 600px) {
  :root { --rm-pad-h: 20px; }

  .rm-header { flex-direction: column; align-items: flex-start; }
  .rm-header-nav { gap: 16px; }

  .rm-footer { flex-direction: column; align-items: flex-start; }
  .rm-footer-card { flex-direction: column; align-items: flex-start; }
}