/* ============================================================
   Fly GACA — Guides (guides/*.html)
   Long-form licensing guides + the guides hub. Dark, to match the
   legal pages and the rest of the site.
   Load order: tokens.css -> base.css -> guides.css
   ============================================================ */

/* --- Article shell --- */
.guide-wrap {
  width: 100%;
  max-width: 820px;
  margin-inline: auto;
  padding: var(--space-6) var(--space-5) var(--space-12);
}

/* --- Breadcrumb --- */
.breadcrumb {
  font-family: var(--font-mono); font-size: var(--fs-xs);
  letter-spacing: 0.04em; color: var(--text-dim);
  margin-block-end: var(--space-5);
}
.breadcrumb a { color: var(--text-dim); }
.breadcrumb a:hover { color: var(--text); }
.breadcrumb-sep, .breadcrumb .sep { margin-inline: var(--space-2); color: var(--border-bright); }

/* --- Article header --- */
.guide-eyebrow {
  font-family: var(--font-mono); font-size: var(--fs-xs);
  font-weight: var(--fw-medium); letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--text-dim);
  display: inline-flex; align-items: center; gap: var(--space-2);
}
.guide-eyebrow::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold); flex: none;
}
.guide-title {
  font-size: var(--fs-h1); font-weight: var(--fw-black);
  letter-spacing: -0.02em; line-height: var(--lh-tight);
  margin-block: var(--space-3) var(--space-3);
}
.guide-deck {
  font-size: var(--fs-lg); color: var(--text-muted);
  line-height: var(--lh-snug); margin-block-end: var(--space-4);
}
.guide-meta {
  font-family: var(--font-mono); font-size: var(--fs-xs);
  color: var(--text-dim); letter-spacing: 0.04em;
  padding-block: var(--space-3);
  border-block: 1px solid var(--border);
  margin-block-end: var(--space-6);
  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4);
}

/* --- Article body typography --- */
.guide-body { font-size: var(--fs-base); line-height: var(--lh-body); }
.guide-body > h2 {
  font-size: var(--fs-h3); font-weight: var(--fw-bold);
  letter-spacing: -0.01em; color: var(--text);
  margin-block: var(--space-8) var(--space-3);
  padding-block-end: var(--space-2);
  border-block-end: 1px solid var(--border);
}
.guide-body > h3 {
  font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--text);
  margin-block: var(--space-5) var(--space-2);
}
.guide-body h4 {
  font-size: var(--fs-base); font-weight: var(--fw-bold); color: var(--text);
  margin-block: var(--space-4) var(--space-2);
}
.guide-body p { color: var(--text-muted); margin-block-end: var(--space-4); }
.guide-body strong { color: var(--text); font-weight: var(--fw-semibold); }
.guide-body a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; }
.guide-body a:hover { color: var(--accent-bright); }
.guide-body ul, .guide-body ol {
  margin-block: var(--space-3) var(--space-4);
  padding-inline-start: 1.4em;
  display: flex; flex-direction: column; gap: var(--space-2);
  color: var(--text-muted);
}
.guide-body ul { list-style: disc; }
.guide-body ol { list-style: decimal; }
.guide-body li::marker { color: var(--falcon-sage); }
.guide-body li { line-height: var(--lh-snug); }

/* --- Tables --- */
.guide-body table {
  width: 100%; border-collapse: collapse;
  font-size: var(--fs-sm); margin-block: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-md);
  overflow: hidden;
}
.guide-body th, .guide-body td {
  padding: var(--space-3) var(--space-4); text-align: start; vertical-align: top;
  border-block-start: 1px solid var(--border);
}
.guide-body thead th {
  background: var(--falcon-deep); color: var(--text);
  font-size: var(--fs-xs); letter-spacing: 0.04em; text-transform: uppercase;
  border-block-start: none;
}
.guide-body td { color: var(--text-muted); }
.guide-body tbody tr:hover { background: var(--surface-raised); }

/* --- TL;DR box --- */
.tldr {
  background: var(--surface);
  border: 1px solid var(--border-bright);
  border-inline-start: 3px solid var(--falcon-teal);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  margin-block: var(--space-5) var(--space-6);
}
.tldr-label {
  font-family: var(--font-mono); font-size: var(--fs-xs);
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--teal-bright); font-weight: var(--fw-bold);
  display: block; margin-block-end: var(--space-2);
}
.tldr p { margin-block-end: var(--space-2); color: var(--text); }
.tldr p:last-child { margin-block-end: 0; }
.tldr ul, .tldr ol { margin-block: var(--space-2) 0; }

/* --- Callout --- */
.callout {
  background: var(--surface);
  border: 1px solid var(--border-bright);
  border-inline-start: 3px solid var(--gold);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  margin-block: var(--space-5);
  color: var(--text-muted); font-size: var(--fs-sm);
}
.callout strong { color: var(--text); }
.callout p:last-child { margin-block-end: 0; }

/* --- To-do / checklist marker --- */
.todo-marker {
  display: inline-grid; place-items: center;
  width: 18px; height: 18px; flex: none;
  border: 1.5px solid var(--falcon-sage);
  border-radius: var(--radius-sm);
  color: var(--falcon-sage); margin-inline-end: var(--space-2);
}

/* --- FAQ --- */
.guide-faq {
  max-width: 820px; margin-inline: auto;
  margin-block-start: var(--space-8);
}
.guide-faq > h2 {
  font-size: var(--fs-h3); font-weight: var(--fw-bold);
  margin-block-end: var(--space-4);
}
.faq-q {
  font-weight: var(--fw-bold); color: var(--text);
  font-size: var(--fs-base);
  margin-block-start: var(--space-4); margin-block-end: var(--space-2);
}
.faq-a { color: var(--text-muted); font-size: var(--fs-sm); line-height: var(--lh-body); }
.faq-a p { margin-block-end: var(--space-2); }

/* --- Related / cluster cards --- */
.related, .cluster-grid-wrap { margin-block-start: var(--space-8); }
.related > h2 {
  font-size: var(--fs-h3); font-weight: var(--fw-bold);
  margin-block-end: var(--space-4);
}
.related-grid, .cluster-grid {
  display: grid; gap: var(--space-4);
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.related-card, .cluster-card {
  display: flex; flex-direction: column; gap: var(--space-2);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease),
              background var(--dur) var(--ease);
}
a.related-card:hover, a.cluster-card:hover {
  border-color: var(--teal-bright); transform: translateY(-3px);
  background: var(--surface-raised); color: inherit;
}
.related-card-title, .cluster-card-title {
  font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--text);
}
.related-card-desc, .cluster-card-desc {
  font-size: var(--fs-sm); color: var(--text-muted); line-height: var(--lh-snug);
}
.cluster-card-eyebrow {
  font-family: var(--font-mono); font-size: var(--fs-xs);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim);
}

/* --- Bilingual blocks: English by default, Arabic when html[lang=ar] --- */
.lang-ar { display: none; }
html[lang="ar"] .lang-en { display: none; }
html[lang="ar"] .lang-ar { display: block; }
html[lang="ar"] .guide-wrap { text-align: start; }

@media (max-width: 600px) {
  .guide-title { font-size: var(--fs-h2); }
  .guide-wrap { padding-inline: var(--space-4); }
}

/* --- Printable study-sheet download link --- */
.guide-download { margin-block: var(--space-5) 0; }
.guide-download a {
  display: inline-flex; align-items: center; gap: var(--space-2);
  background: rgba(45, 110, 138, 0.10);
  border: 1px solid rgba(74, 156, 184, 0.30);
  border-radius: var(--radius-pill);
  padding: 0.5rem 1.05rem;
  color: var(--link); font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.guide-download a:hover { border-color: var(--teal-bright); color: var(--accent-bright); }
.guide-download svg { flex: none; }