/* Harden Asset Advisors — Training Manual Library */
/* Shared styles used by all manuals and the hub page. */

:root {
    --charcoal-900: #0f172a;
    --charcoal-800: #1e293b;
    --charcoal-700: #334155;
    --charcoal-500: #64748b;
    --charcoal-200: #e2e8f0;
    --charcoal-100: #f1f5f9;
    --accent-700: #1d4ed8;
    --accent-600: #2563eb;
    --accent-500: #3b82f6;
    --accent-50: #eff6ff;
  }
  html, body { font-family: 'Inter', system-ui, sans-serif; color: var(--charcoal-800); }
  h1, h2, h3, .serif { font-family: 'Source Serif Pro', Georgia, serif; }
  .nav-link { transition: all 0.15s ease; }
  .nav-link.active { background: var(--accent-50); color: var(--accent-700); border-left-color: var(--accent-600); font-weight: 600; }
  .nav-link:not(.active):hover { background: #f8fafc; color: var(--charcoal-900); }
  .page { display: none; }
  .page.active { display: block; }
  .kpi-card { transition: transform 0.2s ease, box-shadow 0.2s ease; }
  .kpi-card:hover { transform: translateY(-2px); box-shadow: 0 10px 25px -5px rgba(0,0,0,0.08); }
  .benchmark-good { background: #d1fae5; color: #065f46; }
  .benchmark-warn { background: #fef3c7; color: #92400e; }
  .benchmark-bad { background: #fee2e2; color: #991b1b; }
  .pillar-num { font-family: 'Source Serif Pro', serif; font-weight: 700; }
  .accent-bar { background: linear-gradient(90deg, var(--accent-600), var(--accent-500)); }
  details > summary { list-style: none; cursor: pointer; }
  details > summary::-webkit-details-marker { display: none; }
  details[open] .summary-arrow { transform: rotate(90deg); }
  .summary-arrow { transition: transform 0.2s ease; }
  .question-list li { padding-left: 1.25rem; position: relative; margin-bottom: 0.5rem; }
  .question-list li::before { content: "›"; position: absolute; left: 0; color: var(--accent-600); font-weight: 700; }
  .red-flag-list li { padding-left: 1.5rem; position: relative; margin-bottom: 0.5rem; }
  .red-flag-list li::before { content: "▲"; position: absolute; left: 0; color: #dc2626; font-size: 0.65rem; top: 0.4rem; }
  .funnel-stage { transition: all 0.3s ease; }
  input[type="number"]:focus, input[type="text"]:focus, textarea:focus, select:focus { outline: 2px solid var(--accent-500); outline-offset: 1px; }
  @media print {
    .no-print { display: none !important; }
    .page { display: block !important; page-break-after: always; }
    body { background: white !important; }
  }
  .scrollbar-thin::-webkit-scrollbar { width: 6px; }
  .scrollbar-thin::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
  .check-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.75rem; align-items: end; }
  @media (max-width: 768px) { .check-row { grid-template-columns: 1fr; } }

  /* Edit mode */
  body.edit-mode main [contenteditable="true"]:hover {
    outline: 1px dashed #93c5fd;
    outline-offset: 2px;
    background-color: rgba(239, 246, 255, 0.4);
  }
  body.edit-mode main [contenteditable="true"]:focus {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
    background-color: #eff6ff;
  }
  #edit-banner {
    position: fixed; top: 73px; left: 0; right: 0; z-index: 30;
    background: #fef3c7; border-bottom: 1px solid #fbbf24;
    color: #92400e; padding: 8px 16px; font-size: 13px; font-weight: 500;
    text-align: center; display: none;
  }
  body.edit-mode #edit-banner { display: block; }
  body.edit-mode main { padding-top: 50px; }
  #edit-save.active, #edit-cancel.active { display: inline-flex; }
  body.edit-mode #edit-toggle { display: none; }

  /* Live mode: hide the Edit copy button from public visitors.
     To re-enable for yourself, add ?edit to any URL (e.g., ownershipmindset.com/?edit).
     The URL parameter adds the .edit-mode-available class to body via app.js. */
  #edit-toggle { display: none; }
  body.edit-mode-available #edit-toggle { display: inline-flex; }

  /* ============ ACCESSIBILITY ============ */

  /* Skip-to-content link. Hidden until keyboard-focused, then becomes
     a prominent jump target at the top-left of the page. */
  .skip-to-content {
    position: absolute; left: -9999px; top: 0;
    background: #1d4ed8; color: #ffffff;
    padding: 12px 20px; font-weight: 600; font-size: 0.95rem;
    text-decoration: none; border-radius: 0 0 8px 0;
    z-index: 100;
  }
  .skip-to-content:focus {
    left: 0; top: 0;
    outline: 3px solid #fbbf24; outline-offset: 2px;
  }

  /* Visible, high-contrast focus ring on every interactive element when
     reached via keyboard. Uses :focus-visible so mouse clicks don't
     trigger the ring (cleaner visual). */
  a:focus-visible,
  button:focus-visible,
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible,
  [tabindex]:focus-visible {
    outline: 3px solid #2563eb;
    outline-offset: 2px;
    border-radius: 4px;
  }
  /* On dark backgrounds (header, hero), use a brighter ring */
  .bg-slate-900 a:focus-visible,
  .bg-slate-950 a:focus-visible,
  .bg-slate-900 button:focus-visible,
  header a:focus-visible,
  header button:focus-visible,
  footer a:focus-visible {
    outline-color: #fbbf24;
  }

  /* Respect prefers-reduced-motion: disable smooth scroll and any
     transform-based hover lifts for users who request it. */
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
    .module-card:hover,
    .kpi-card:hover,
    .track-card:hover,
    .quote-card:hover {
      transform: none;
    }
  }

  /* Screen-reader-only utility: visually hidden but still announced. */
  .sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0);
    white-space: nowrap; border: 0;
  }