/* CallLegend canonical nav + footer — W1 governing stylesheet
 * Scoped namespaces: .cln-* (nav) · .clf-* (footer) — zero collision with
 * legacy per-page nav/footer CSS, which stays unused (outside W0-5 wall).
 *
 * W1 TOKEN REGISTRY (effective 2026-07-22):
 *   bg nav  -> #FFFFFF (border-bottom 1px #E2E8F0, no blur)
 *   text    -> #111827 · links hover -> #0F766E
 *   gold CTA-> #D97706 (hover #B45309)
 *   footer  -> #FAFBFC bg, #111827 text, #E2E8F0 borders
 */
:root {
  --cln-bg: #FFFFFF;
  --cln-border: #E2E8F0;
  --cln-text: #111827;
  --cln-text-dim: #4B5563;
  --cln-teal: #0F766E;
  --cln-teal-hover: #0D5F59;
  --cln-teal-soft: #ECFDF8;
  --cln-gold: #D97706;
  --cln-gold-hover: #B45309;
  --cln-gold-text: #0F172A;
  --clf-bg: #FAFBFC;
  --clf-text: #111827;
  --clf-title: #0F766E;
  --clf-border: #E2E8F0;
  --clf-muted: #4B5563;
  --clf-light: #6B7280;
  --card-shadow: 0 1px 3px rgba(17, 24, 39, 0.06), 0 8px 24px -12px rgba(17, 24, 39, 0.1);
}

/* ============ NAV (.cln) ============ */
.cln {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  background: var(--cln-bg);
  border-bottom: 1px solid var(--cln-border);
  font-family: 'DM Sans', system-ui, sans-serif;
}
.cln-inner {
  max-width: 1200px; margin: 0 auto; padding: 0 20px;
  height: 68px;
  display: flex; align-items: center; gap: 24px;
}
.cln-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; flex: none; min-height: 44px; /* Higher Law tap target (Dave 2026-07-22) */ }
.cln-logo-mark {
  width: 42px; height: 42px; border-radius: 10px;
  background: var(--cln-teal); color: #FFFFFF;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1.05rem;
}
.cln-wordmark { color: var(--cln-text); font-weight: 800; font-size: 1.15rem; letter-spacing: -0.02em; }

.cln-links {
  display: flex; align-items: center; gap: 4px;
  list-style: none; margin: 0 auto; padding: 0;
}
.cln-links > li > a,
.cln-dropdown-toggle {
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 0 12px;
  color: var(--cln-text-dim); text-decoration: none;
  font-size: .95rem; font-weight: 500;
  background: none; border: none; font-family: inherit; cursor: pointer;
  border-radius: 8px;
}
.cln-links > li > a:hover,
.cln-dropdown-toggle:hover { color: var(--cln-teal); }

.cln-dropdown { position: relative; }
.cln-dropdown-menu {
  display: none;
  position: absolute; top: 100%; left: 0;
  min-width: 460px;
  background: var(--cln-bg);
  border: 1px solid var(--cln-border);
  border-radius: 12px;
  padding: 16px;
  gap: 24px;
  box-shadow: var(--card-shadow);
}
.cln-dropdown:hover .cln-dropdown-menu,
.cln-dropdown:focus-within .cln-dropdown-menu,
.cln-dropdown.cln-open .cln-dropdown-menu { display: flex; }
.cln-dropdown-section { flex: 1; }
.cln-dropdown-title {
  font-family: 'DM Mono', monospace; font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em;
  color: var(--cln-teal); margin: 4px 0 10px;
}
.cln-dropdown-menu a {
  display: flex; align-items: center; min-height: 44px;
  padding: 0 10px; color: var(--cln-text);
  text-decoration: none; font-size: .95rem; border-radius: 8px;
}
.cln-dropdown-menu a:hover { color: var(--cln-teal); background: var(--cln-teal-soft); }

.cln-ctas { display: flex; align-items: center; gap: 10px; flex: none; }
.cln-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 20px;
  border-radius: 999px; font-weight: 700; font-size: .95rem;
  text-decoration: none; white-space: nowrap;
  transition: transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
}
.cln-btn-gold {
  background: var(--cln-gold); color: var(--cln-gold-text);
  box-shadow: 0 1px 2px rgba(217, 119, 6, 0.25), 0 4px 12px -2px rgba(217, 119, 6, 0.35);
}
.cln-btn-gold:hover { background: var(--cln-gold-hover); color: #FFFFFF; transform: translateY(-1px); }
.cln-btn-outline {
  background: transparent; color: var(--cln-teal);
  border: 1.5px solid var(--cln-teal);
}
.cln-btn-outline:hover { background: var(--cln-teal-soft); }

.cln-mobile-toggle {
  display: none;
  width: 44px; height: 44px;
  background: none; border: none;
  color: var(--cln-text); font-size: 1.5rem; cursor: pointer;
}
.cln-drawer { display: none; }

@media (max-width: 1024px) {
  .cln-links, .cln-ctas { display: none; }
  .cln-mobile-toggle { display: block; margin-left: auto; }
  .cln-drawer.cln-open {
    display: flex; flex-direction: column;
    padding: 12px 20px 20px;
    border-top: 1px solid var(--cln-border);
    background: var(--cln-bg);
    max-height: calc(100vh - 68px); overflow-y: auto;
  }
  .cln-drawer a {
    display: flex; align-items: center; min-height: 44px;
    color: var(--cln-text); text-decoration: none;
    font-size: 1rem; font-weight: 500;
    border-bottom: 1px solid var(--clf-border);
  }
  .cln-drawer a:hover { color: var(--cln-teal); }
  .cln-drawer .cln-drawer-title {
    font-family: 'DM Mono', monospace; font-size: .72rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .12em;
    color: var(--cln-teal); margin: 14px 0 4px; border: none;
  }
  .cln-drawer .cln-btn { margin-top: 12px; border-bottom: none; }
}

/* ============ FOOTER (.clf) ============ */
.clf {
  background: var(--clf-bg);
  color: var(--clf-text);
  font-family: 'DM Sans', system-ui, sans-serif;
  border-top: 1px solid var(--clf-border);
  padding: 3rem 0 1.5rem;
}
.clf-inner { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.clf-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 32px; margin-bottom: 2rem;
}
.clf-col-title {
  font-family: 'DM Mono', monospace; font-size: .68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--clf-title); margin-bottom: 0.85rem;
}
.clf-links { list-style: none; margin: 0; padding: 0; }
.clf-links li { margin-bottom: 0.5rem; }
.clf-links a {
  display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; /* Higher Law tap target (Dave 2026-07-22) */
  color: var(--clf-muted); text-decoration: none; font-size: .88rem;
}
.clf-links a:hover { color: var(--cln-teal); }
.clf-bottom {
  border-top: 1px solid var(--clf-border);
  padding-top: 1.25rem;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem 1.25rem;
  font-size: .78rem; color: var(--clf-light);
}
.clf-bottom a { color: var(--clf-light); text-decoration: underline; }
.clf-bottom a:hover { color: var(--cln-teal); }