/*
 * TVYAL.COM — NEWSLETTER STYLES
 * newsletter-styles.css
 *
 * All tokens inherited from homepage-styles.css.
 * This file only adds newsletter-specific layout and typography.
 */

/* ── Map homepage token names to the --color-* aliases used in this file ───── */
:root {
  --color-accent:    var(--accent);
  --color-body:      var(--text-secondary);
  --color-heading:   var(--heading-color);
  --color-muted:     var(--text-tertiary);
  --color-rule:      var(--border);
  --color-surface-2: var(--surface-elevated);
}

/* ── Light mode: explicit token overrides (prevents stale :root cascade) ────── */
body:not(.dark-mode) {
  --color-heading:   #1a1a1a;
  --color-body:      #5a5a5a;
  --color-muted:     #9a9a9a;
  --color-rule:      #e2ddd6;
  --color-surface-2: #faf9f7;
}

/* ── Article layout ────────────────────────────────────────────────────────── */

.newsletter-single {
  max-width: 800px;
  margin: 0 auto;
  padding: var(--space-6) var(--space-4);
}

.newsletter-article {
  padding-top: var(--space-6);
}

/* ── Header ─────────────────────────────────────────────────────────────────── */

.newsletter-header {
  margin-bottom: var(--space-6);
  border-bottom: 1px solid var(--color-rule);
  padding-bottom: var(--space-4);
  text-align: left;
}

.newsletter-meta {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.newsletter-meta time {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--color-muted);
  letter-spacing: 0.04em;
}

.newsletter-title {
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  line-height: 1.25;
  color: var(--color-heading);
  margin: 0 0 var(--space-3);
}

.newsletter-tags,
.newsletter-cats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-2);
}

.nl-read-time {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--color-muted);
  white-space: nowrap;
  margin-left: auto;
}

/* ── Tags — plain clickable text ────────────────────────────────────────────── */

.tag-pill {
  display: inline;
  font-size: 0.78rem;
  font-family: var(--font-sans);
  font-weight: 500;
  color: var(--color-muted);
  text-decoration: none;
  transition: color 0.15s;
}

.tag-pill:hover {
  color: var(--color-accent);
}

/* Separate tags with a light divider */
.newsletter-tags .tag-pill + .tag-pill::before,
.card-tags .tag-pill + .tag-pill::before {
  content: "·";
  margin: 0 4px;
  color: var(--color-muted);
  opacity: 0.4;
}

/* ── Categories — subtle accent highlight ───────────────────────────────────── */

.cat-pill {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 0.72rem;
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--accent-subtle);
  color: var(--color-accent);
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}

.cat-pill:hover {
  background: var(--color-accent);
  color: #fff;
}

/* ── Article body ────────────────────────────────────────────────────────────── */

.newsletter-body {
  font-family: var(--font-sans);
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--color-body);
}

.newsletter-body h2 {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  color: var(--color-heading);
  margin: var(--space-6) 0 var(--space-2);
  border-bottom: 1px solid var(--color-rule);
  padding-bottom: var(--space-2);
}

.newsletter-body h3 {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  color: var(--color-heading);
  margin: var(--space-5) 0 var(--space-2);
}

.newsletter-body h4 {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin: var(--space-5) 0 var(--space-2);
}

.newsletter-body p { margin: 0 0 var(--space-3); }

.newsletter-body img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  display: block;
  margin: var(--space-4) auto;
}

.newsletter-body a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.newsletter-body ul,
.newsletter-body ol {
  padding-left: var(--space-5);
  margin: 0 0 var(--space-3);
}

.newsletter-body li { margin-bottom: var(--space-1); }

.newsletter-body strong { font-weight: 700; color: var(--color-heading); }

.newsletter-body blockquote {
  border-left: 3px solid var(--color-accent);
  margin: var(--space-4) 0;
  padding: var(--space-2) var(--space-4);
  color: var(--color-muted);
  font-style: italic;
}

/* ── Related articles ────────────────────────────────────────────────────────── */

.newsletter-related {
  margin-top: var(--space-7);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-rule);
}

.related-heading {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin: 0 0 var(--space-3);
}

.related-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.related-list a {
  color: var(--color-body);
  text-decoration: none;
  font-weight: 600;
}

.related-list a:hover { color: var(--color-accent); }

.related-date {
  font-size: 0.8rem;
  color: var(--color-muted);
  margin-left: var(--space-2);
}

/* ── List / index page ───────────────────────────────────────────────────────── */

.newsletter-list {
  max-width: 960px;
  margin: 0 auto;
  padding: var(--space-6) var(--space-4);
}

.list-header {
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-rule);
}

.list-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-2);
}

.list-title {
  font-family: var(--font-serif);
  font-size: clamp(1.8rem, 5vw, 3rem);
  color: var(--color-heading);
  margin: 0 0 var(--space-2);
}

.list-desc {
  color: var(--color-muted);
  font-size: 1rem;
  margin: 0;
}

/* ── Newsletter cards ────────────────────────────────────────────────────────── */

.newsletter-cards {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.newsletter-card {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-rule);
}

.card-thumb {
  width: 120px;
  height: 80px;
  object-fit: cover;
  border-radius: var(--radius-md);
  flex-shrink: 0;
}

.card-img-link { display: contents; }

.card-body { flex: 1; min-width: 0; }

.card-date {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-muted);
  letter-spacing: 0.04em;
  display: block;
  margin-bottom: var(--space-1);
}

.card-title {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  line-height: 1.3;
  margin: 0 0 var(--space-2);
}

.card-title a {
  color: var(--color-heading);
  text-decoration: none;
}

.card-title a:hover { color: var(--color-accent); }

.card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

/* ── Hero image ──────────────────────────────────────────────────────────────── */

.newsletter-hero {
  width: 100%;
  min-height: 200px;
  max-height: 420px;
  overflow: hidden;
  background: var(--color-surface-2);
}

.newsletter-hero-img {
  display: block;
  width: 100%;
  max-height: 420px;
  object-fit: cover;
  object-position: center center;
  margin: 0 auto;
  display: block;
}

/* ── Bottom bar: citation + animation ───────────────────────────────────────── */

.newsletter-bottom-bar {
  display: flex;
  align-items: flex-start;
  gap: var(--space-6);
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 2px solid var(--color-rule);
}

.newsletter-citation {
  flex: 1;
  min-width: 0;
}

.citation-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin: 0 0 var(--space-2);
}

.citation-text {
  font-family: var(--font-sans);
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--color-muted);
  margin: 0;
}

.citation-text em {
  font-style: italic;
  color: var(--color-body);
}

.citation-url {
  color: var(--color-accent);
  word-break: break-all;
  text-decoration: none;
}

.citation-url:hover { text-decoration: underline; }

.newsletter-anim {
  flex-shrink: 0;
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nl-anim-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ── Author span in article header ──────────────────────────────────────────── */

.newsletter-author {
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-accent);     /* orange in dark mode */
  letter-spacing: 0.02em;
}

/* In light mode the accent reads better as a muted body tone */
body:not(.dark-mode) .newsletter-author {
  color: var(--color-body);
}

/* ── PhotoSwipe figure wrapper ───────────────────────────────────────────────── */

.nl-figure {
  margin: var(--space-5) 0;
  text-align: center;
}

.nl-figure .nl-img-link {
  display: inline-block;
  cursor: zoom-in;
}

.nl-figure img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  transition: opacity 0.15s;
}

.nl-figure .nl-img-link:hover img {
  opacity: 0.9;
}

.nl-figcaption {
  margin-top: var(--space-2);
  font-size: 0.8rem;
  color: var(--color-muted);
  font-style: italic;
}

/* ── CTA bar (subscribe + consultation) ─────────────────────────────────────── */

.nl-cta-bar {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-rule);
  flex-wrap: wrap;
}

/* Layout shell only — visual styles come from .demo-btn or .nl-cta-subscribe */
.nl-cta-btn {
  flex: 1 1 200px;
  text-align: center;
  justify-content: center;
}

/* Subscribe button — mirrors .demo-btn look but outlined */
.nl-cta-subscribe {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 28px;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  background: transparent;
  color: var(--accent);
  border: 2px solid var(--accent);
  border-radius: 0;
  cursor: not-allowed;
  opacity: 0.45;
  transition: all 200ms ease;
}

/* ── Filter bar (home list page) ─────────────────────────────────────────────── */

.nl-filter-bar {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin: var(--space-4) 0 var(--space-5);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-rule);
}

.nl-year-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.nl-year-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  padding: 3px var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--color-muted);
  background: var(--color-surface-2);
  transition: background 0.15s, color 0.15s;
}
.nl-year-btn:hover,
.nl-year-btn.active {
  background: var(--color-accent);
  color: #fff;
}

.nl-search-wrap {
  flex: 1 1 220px;
}

.nl-search-input {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-rule);
  background: var(--color-surface-2);
  color: var(--color-body);
  font-family: var(--font-sans);
  font-size: 0.9rem;
  outline: none;
  transition: border-color 0.15s;
}
.nl-search-input:focus {
  border-color: var(--color-accent);
}
.nl-search-input::placeholder {
  color: var(--color-muted);
}

/* ── No-results message ──────────────────────────────────────────────────────── */

.nl-no-results {
  text-align: center;
  padding: var(--space-8) 0;
  color: var(--color-muted);
  font-size: 1rem;
}

/* ── Custom pagination ───────────────────────────────────────────────────────── */

.nl-pagination {
  margin: var(--space-6) 0 var(--space-4);
  display: flex;
  justify-content: center;
}

.nl-pag-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.nl-pag-btn {
  background: var(--color-surface-2);
  border: 1px solid var(--color-rule);
  color: var(--color-body);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  min-width: 36px;
  text-align: center;
}
.nl-pag-btn:hover:not([disabled]) {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
}
.nl-pag-item.active .nl-pag-btn {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
  font-weight: 700;
}
.nl-pag-btn[disabled] {
  opacity: 0.35;
  cursor: default;
}
.nl-pag-ellipsis span {
  padding: var(--space-2) var(--space-2);
  color: var(--color-muted);
  font-size: 0.85rem;
}

/* Back link on year/taxonomy pages */
.list-back {
  color: var(--color-muted);
  text-decoration: none;
  font-size: 0.85rem;
  transition: color 0.15s;
}
.list-back:hover { color: var(--color-accent); }

/* Taxonomy type label (Tags / Categories) shown next to back link */
.taxonomy-type-label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-left: var(--space-3);
}

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

@media (max-width: 600px) {
  .newsletter-single,
  .newsletter-list {
    padding: var(--space-4) var(--space-3);
  }

  .newsletter-card {
    flex-direction: column;
  }

  .card-thumb {
    width: 100%;
    height: 180px;
  }

  .newsletter-bottom-bar {
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
  }

  .newsletter-anim {
    width: 100px;
    height: 100px;
  }
}

/* ── Table of Contents ───────────────────────────────────────────────────────── */

/* Content wrapper — grid layout when ToC is present */
.nl-content-wrap {
  /* default: no grid */
}

.nl-with-toc {
  max-width: 1140px;
}

.nl-with-toc .nl-content-wrap {
  display: grid;
  grid-template-columns: 1fr 240px;
  gap: var(--space-7);
  align-items: start;
}

/* ── Right sidebar (ToC + Related) ─────────────────────────────────────────── */

.nl-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  align-self: start;           /* required for sticky in CSS Grid */
  position: sticky;
  top: 80px;                   /* sticks 80px below viewport top (below nav) */
  padding-top: var(--space-6); /* aligns with newsletter-article padding-top */
  /* No overflow — viewport scrolls, sidebar sticks in place */
}

.nl-toc {
  padding: 0 0 0 var(--space-4);
  border-left: 2px solid var(--color-rule);
}

.nl-toc-title {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin: 0 0 var(--space-3);
}

.nl-toc nav ul,
.nl-toc > ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.nl-toc nav ul ul,
.nl-toc > ul ul {
  padding-left: var(--space-3);
  margin-top: var(--space-1);
}

.nl-toc a {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--color-muted);
  text-decoration: none;
  padding: var(--space-1) 0;
  transition: color 0.15s;
}

.nl-toc a:hover {
  color: var(--color-accent);
}

/* ── Related sidebar ─────────────────────────────────────────────────────────── */

.nl-related-sidebar {
  padding-left: var(--space-4);
  border-left: 2px solid var(--color-rule);
}

.nl-related-title {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin: 0 0 var(--space-3);
}

/* Full-width column card: image spans sidebar, text+date below */
.nl-related-card {
  display: block;
  text-decoration: none;
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-rule);
  padding-bottom: var(--space-4);
  transition: opacity 0.15s;
}

.nl-related-card:last-child {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}

.nl-related-card:hover { opacity: 0.75; }

.nl-related-thumb {
  width: 100%;
  height: 130px;
  object-fit: cover;
  border-radius: var(--radius-md);
  display: block;
  margin-bottom: var(--space-2);
}

.nl-related-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.nl-related-name {
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-heading);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.nl-related-date {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--color-muted);
}

/* Hide ToC + sidebar entirely on mobile */
@media (max-width: 900px) {
  .nl-sidebar { display: none; }
  .nl-with-toc { max-width: 800px; }
  .nl-with-toc .nl-content-wrap { display: block; }
}

/* ── Code blocks ─────────────────────────────────────────────────────────── */

/* Inline code */
.newsletter-body code {
  font-family: var(--font-mono);
  font-size: 0.82em;
  background: var(--color-surface-2);
  color: var(--color-heading);
  padding: 0.1em 0.35em;
  border-radius: var(--radius-sm);
}

/* Fenced code blocks — Hugo wraps in <div class="highlight"><pre> */
.newsletter-body pre,
.newsletter-body .highlight pre {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  line-height: 1.55;
  overflow-x: auto;
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  margin: var(--space-5) 0;
  /* background + color come from Chroma inline styles (nord theme) */
}

/* Undo the inline code style when inside a pre block */
.newsletter-body pre code {
  background: none;
  padding: 0;
  border-radius: 0;
  font-size: inherit;
  color: inherit;
}