/* ============================================================
   TEMPLE STORM v2 — full color system from Obsidian manifest
   Replaces temple-storm.css
   ============================================================

   COLOR TOKENS
   ─────────────────────────────────────────────────────────────
   Primary background:       #171311
   Secondary bg / panels:    #26211d
   Body text:                #e9dcc6
   Muted / secondary text:   #bba892
   Headings:                 #cdae7a
   Bold:                     #c46b4a
   Italic:                   #7c6d85
   Bold + italic combined:   #458c8c
   External links:           #c4646e  hover #d4757f
   Internal / nav links:     #458c8c  hover #4fa0a0
   Tags / labels:            #4a7fa8  hover #5a8fb8
   ──────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@600&display=swap');

:root {
  --ts-bg:          #171311;
  --ts-bg-panel:    #26211d;
  --ts-text:        #e9dcc6;
  --ts-text-muted:  #bba892;
  --ts-heading:     #cdae7a;
  --ts-bold:        #c46b4a;
  --ts-italic:      #7c6d85;
  --ts-bold-italic: #458c8c;
  --ts-link-ext:    #c4646e;
  --ts-link-ext-hv: #d4757f;
  --ts-link-nav:    #458c8c;
  --ts-link-nav-hv: #4fa0a0;
  --ts-tag:         #4a7fa8;
  --ts-tag-hv:      #5a8fb8;
  --ts-body-font:   ui-sans-serif, -apple-system, BlinkMacSystemFont,
                    "Segoe UI", "Google Sans Flex", Roboto,
                    "Inter Variable", Inter, sans-serif;
  --ts-head-font:   'Sora', sans-serif;
}


/* ── 1. PAGE BACKGROUND ─────────────────────────────────────
   Warm brownish-black on post and page templates only.
   Homepage keeps its existing dark background.
   ──────────────────────────────────────────────────────────── */

body.page-template,
body.post-template {
  background: var(--ts-bg) !important;
}


/* ── 2. CONTENT AREA BASE ────────────────────────────────────
   .g-post-content is the shared wrapper for posts and pages.
   ──────────────────────────────────────────────────────────── */

.g-post-content {
  color: var(--ts-text);
  font-family: var(--ts-body-font);
  font-size: 1.125rem;
  line-height: 1.7;
}

.g-post-content p {
  color: var(--ts-text);
  font-family: var(--ts-body-font);
  font-size: 1.125rem;
  line-height: 1.7;
}

/* Drop cap — gold to match headings */
.g-post-content > p:first-of-type::first-letter {
  color: var(--ts-heading);
}


/* ── 3. HEADINGS ─────────────────────────────────────────────
   Sora 600, gold, subtle tracking.
   ──────────────────────────────────────────────────────────── */

.g-post-content h1,
.g-post-content h2,
.g-post-content h3,
.g-post-content h4,
.g-post-content h5,
.g-post-content h6 {
  font-family: var(--ts-head-font);
  font-weight: 600;
  letter-spacing: 0.015em;
  color: var(--ts-heading);
}


/* ── 4. EMPHASIS ─────────────────────────────────────────────
   Bold = rust. Italic = muted purple. Bold+italic = teal.
   ──────────────────────────────────────────────────────────── */

.g-post-content b,
.g-post-content strong {
  color: var(--ts-bold);
  font-weight: 700;
}

.g-post-content em,
.g-post-content i {
  color: var(--ts-italic);
}

/* Bold + italic combined */
.g-post-content em strong,
.g-post-content strong em,
.g-post-content b i,
.g-post-content i b {
  color: var(--ts-bold-italic);
  font-style: italic;
  font-weight: 700;
}


/* ── 5. LINKS ────────────────────────────────────────────────
   External links: warm red. No underline; underline on hover.
   ──────────────────────────────────────────────────────────── */

.g-post-content a:not(.g-button) {
  color: var(--ts-link-ext);
  text-decoration: none;
  transition: color 0.2s linear;
}

.g-post-content a:not(.g-button):hover {
  color: var(--ts-link-ext-hv);
  text-decoration: underline;
}


/* ── 6. LISTS ────────────────────────────────────────────────
   Inherit parchment body color.
   ──────────────────────────────────────────────────────────── */

.g-post-content ul,
.g-post-content ol {
  color: var(--ts-text);
}


/* ── 7. BLOCKQUOTE ───────────────────────────────────────────
   Secondary panel bg, warm left border. No curly-quote marks.
   ──────────────────────────────────────────────────────────── */

.g-post-content blockquote {
  border-left: 3px solid #3b312b;
  background: var(--ts-bg-panel);
  padding: 0.9rem 1.5rem;
  margin: 0 0 var(--spacing-m);
  color: var(--ts-text);
  font-style: italic;
}

.g-post-content blockquote::before,
.g-post-content blockquote::after {
  content: none;
}

.g-post-content blockquote em {
  color: var(--ts-italic);
}

.g-post-content blockquote strong {
  color: var(--ts-bold);
}


/* ── 8. HORIZONTAL RULE ──────────────────────────────────────
   Gradient fade: transparent → panel dark → transparent.
   ──────────────────────────────────────────────────────────── */

.g-post-content hr::before {
  background: linear-gradient(
    to right,
    transparent,
    #3a322c,
    transparent
  ) !important;
}

.g-post-content hr::after {
  display: none !important;
}


/* ── 9. CODE ─────────────────────────────────────────────────
   Secondary panel bg for inline and block code.
   ──────────────────────────────────────────────────────────── */

.g-post-content code {
  background: var(--ts-bg-panel);
  color: var(--ts-text);
  border: 1px solid rgba(59, 49, 43, 0.6);
}

.g-post-content pre {
  background: var(--ts-bg-panel);
  border: 1px solid rgba(59, 49, 43, 0.6);
}

.g-post-content pre > code {
  border: none;
  background: transparent;
}


/* ── 10. MUTED / SECONDARY TEXT ─────────────────────────────
   Figcaptions, post metadata, excerpts, secondary labels.
   ──────────────────────────────────────────────────────────── */

.g-post-content figure figcaption {
  color: var(--ts-text-muted) !important;
  opacity: 1 !important;
}

/* Post header metadata (date, read time, author) */
.g-post-header__time__item,
.g-post-header__excerpt,
.g-post-header__tags {
  color: var(--ts-text-muted) !important;
  opacity: 1 !important;
}

/* Post body — general muted helper class if needed */
.g-post-content .muted,
.g-post-content small {
  color: var(--ts-text-muted);
}


/* ── 11. TAGS / LABELS ───────────────────────────────────────
   Blue, pill shape, subtle fill, no border.
   Applies to: post header primary tag, tag list links.
   ──────────────────────────────────────────────────────────── */

.g-post-header__primary-tag,
.g-post-header__tags a,
.g-post-card__tag {
  color: var(--ts-tag) !important;
  background: rgba(74, 127, 168, 0.12);
  border-radius: 999px;
  padding: 0.15em 0.65em;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  opacity: 1 !important;
  text-decoration: none;
  transition: color 0.2s linear, background 0.2s linear;
  display: inline-block;
}

.g-post-header__primary-tag:hover,
.g-post-header__tags a:hover,
.g-post-card__tag:hover {
  color: var(--ts-tag-hv) !important;
  background: rgba(74, 127, 168, 0.2);
  opacity: 1 !important;
}


/* ── 12. CALLOUT / CARD PANELS ───────────────────────────────
   Ghost KG callout cards use secondary bg.
   ──────────────────────────────────────────────────────────── */

.g-post-content .kg-callout-card {
  background: var(--ts-bg-panel);
  border-left: 3px solid #3b312b;
}

.g-post-content .kg-callout-card .kg-callout-text {
  color: var(--ts-text);
}


/* ============================================================
   SIGNAL CORRIDOR HUB — /signal/ page layout
   Used by page-signal.hbs
   ============================================================ */

/* ── Hero wrapper (full-viewport banner) ─────────────────── */

.sp-signal-hero {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

.sp-signal-hero .g-hero-image {
  position: absolute;
  inset: 0;
  height: 100%;
}

.sp-signal-hero .g-hero-image__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* ── Hub content wrapper ─────────────────────────────────── */

.sp-signal-hub {
  max-width: var(--max-width-post-container);
  margin: 0 auto;
  padding: var(--spacing-l) var(--spacing-s);
  color: var(--ts-text);
}

@media only screen and (min-width: 45rem) {
  .sp-signal-hub {
    padding: 6.25rem var(--spacing-m);
  }
}

@media only screen and (min-width: 64rem) {
  .sp-signal-hub {
    padding-left: var(--spacing-s);
    padding-right: var(--spacing-s);
  }
}


/* ── Section layout ──────────────────────────────────────── */

.sp-signal-section {
  margin-bottom: 2rem;
}

.sp-signal-eyebrow {
  display: block;
  font-family: var(--ts-head-font);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ts-italic);
  margin: 0 0 0.35rem;
}

.sp-signal-heading {
  font-family: var(--ts-head-font);
  font-weight: 600;
  letter-spacing: 0.015em;
  color: var(--ts-heading);
  font-size: clamp(1.5rem, 2.8vw, 2.1rem);
  line-height: 1.2;
  margin: 0 0 0.6rem;
}

.sp-signal-lead {
  font-family: var(--ts-body-font);
  color: var(--ts-text-muted);
  font-size: 1.05rem;
  line-height: 1.65;
  margin: 0 0 1.4rem;
  max-width: 52ch;
}


/* ── Divider ─────────────────────────────────────────────── */

.sp-signal-divider {
  border: none;
  height: 1px;
  background: linear-gradient(to right, transparent, #3a322c, transparent);
  margin: 3rem 0;
}


/* ── Pointers list ───────────────────────────────────────── */

.sp-pointers-list {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
}

.sp-pointer-link {
  display: grid;
  grid-template-columns: 1.75rem 1fr;
  grid-template-rows: auto auto;
  column-gap: 0.85rem;
  row-gap: 0.1rem;
  padding: 1rem 0;
  border-bottom: 1px solid rgba(59, 49, 43, 0.55);
  text-decoration: none;
  transition: opacity 0.2s linear;
}

.sp-pointer-link:hover {
  opacity: 0.75;
}

.sp-pointer-icon {
  grid-row: 1 / 3;
  grid-column: 1;
  font-size: 1.2rem;
  color: var(--ts-link-nav);
  align-self: center;
  text-align: center;
}

.sp-pointer-label {
  font-family: var(--ts-head-font);
  font-weight: 600;
  font-size: 1rem;
  color: var(--ts-text);
  letter-spacing: 0.01em;
  align-self: end;
}

.sp-pointer-desc {
  font-family: var(--ts-body-font);
  font-size: 1rem;
  color: var(--ts-text-muted);
  line-height: 1.4;
  align-self: start;
}


/* ── Enter links (Library / Archive) ────────────────────── */

.sp-signal-enter {
  display: inline-block;
  font-family: var(--ts-body-font);
  font-size: 1.05rem;
  color: var(--ts-link-nav);
  text-decoration: none;
  transition: color 0.2s linear;
}

.sp-signal-enter:hover {
  color: var(--ts-link-nav-hv);
  text-decoration: underline;
}


/* ── Ghost editor content appended below hub sections ────── */

.sp-signal-hub .g-post-content {
  padding: 0;
  max-width: 100%;
}