/*
 * Reader Layout
 * ==============
 * Used by content pages (city risk, storm history, education, legal, marketing).
 * Optimized for long-form reading, not app workflows.
 *
 * Layout:
 *   +------------------------------------------------+
 *   |  topbar (logo + 3 links + sign up)              |
 *   +------------------------------------------------+
 *   |                                                 |
 *   |    article (max 760 px, centered)               |
 *   |                                                 |
 *   |    "On this page" chip floats at the start;     |
 *   |    no sticky sidebar — keeps mobile clean.      |
 *   |                                                 |
 *   +------------------------------------------------+
 */

body.reader { background: var(--bg); color: var(--text); }

/* ---------- Slim top nav ---------- */
/* Reader nav — DELIBERATELY identical to app-shell .topbar (same height,
   same background, same brand size, same icon row) so navigating from an
   app page to a reader page produces zero visual jump in the nav area.
   The only differences are content: app has search + actions, reader has
   Sign Up CTA on the right. */
.reader-nav {
  position: sticky;
  top: 0;
  z-index: var(--z-topbar);
  background: var(--surface-1);
  border-bottom: 1px solid var(--border);
  padding: 0 var(--space-4);
  height: var(--topbar-height);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.reader-nav-brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 700;
  color: var(--text);
  flex-shrink: 0;
}
.reader-nav-brand img {
  height: 48px;        /* matches .topbar-brand img */
  width: auto;
  display: block;
}

/* Use the same .topbar-nav-icons class as the app shell. The selector below
   is just a no-op alias so existing reader templates that use .reader-nav-icons
   continue to work; new templates can use .topbar-nav-icons directly. */
.reader-nav-icons { /* alias of .topbar-nav-icons — see app-shell.css */
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-left: var(--space-3);
}
.reader-nav-icons .icon-item {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted);
  font-size: 18px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
  position: relative;
  text-decoration: none;
}
.reader-nav-icons .icon-item:hover { background: var(--surface-3); color: var(--text); text-decoration: none; }
.reader-nav-icons .icon-item.active { background: var(--accent-soft); color: var(--accent); }
.reader-nav-icons .icon-item.hurricane-active { color: var(--danger); }
.reader-nav-icons .icon-item[data-tip]::after {
  content: attr(data-tip);
  position: absolute; top: calc(100% + 4px); left: 50%; transform: translateX(-50%);
  background: var(--surface-3); color: var(--text);
  padding: 4px 8px; border-radius: var(--radius);
  font-size: var(--fs-xs); white-space: nowrap;
  opacity: 0; pointer-events: none;
  transition: opacity 0.12s;
  box-shadow: var(--shadow);
  z-index: var(--z-tooltip);
}
.reader-nav-icons .icon-item:hover[data-tip]::after { opacity: 1; transition-delay: 0.3s; }

.reader-nav-cta {
  margin-left: auto;
  background: var(--accent);
  color: white !important;
  padding: 8px 18px;
  border-radius: var(--radius);
  font-size: var(--fs-sm);
  font-weight: 500;
  flex-shrink: 0;
}
.reader-nav-cta:hover { background: #4493f8; text-decoration: none !important; }

/* ---------- Article body ---------- */
.reader-article {
  max-width: 760px;
  margin: 0 auto;
  padding: var(--space-7) var(--space-5) var(--space-7);
}
.reader-article h1 {
  font-size: var(--fs-2xl);
  font-weight: 700;
  margin: 0 0 var(--space-3);
  line-height: var(--lh-tight);
}
.reader-article .lede {
  color: var(--text-2);
  font-size: var(--fs-md);
  line-height: var(--lh-loose);
  margin: 0 0 var(--space-6);
}
.reader-article h2 {
  font-size: var(--fs-xl);
  font-weight: 600;
  margin: var(--space-6) 0 var(--space-3);
  scroll-margin-top: 80px;  /* offset for sticky top-nav (64px) + breathing room */
}
.reader-article h3 {
  font-size: var(--fs-lg);
  font-weight: 600;
  margin: var(--space-5) 0 var(--space-2);
}
.reader-article p {
  font-size: var(--fs-md);
  line-height: var(--lh-loose);
  margin: 0 0 var(--space-4);
  color: var(--text);
}
.reader-article ul, .reader-article ol {
  font-size: var(--fs-md);
  line-height: var(--lh-loose);
  margin: 0 0 var(--space-4);
  padding-left: var(--space-5);
}
.reader-article li { margin-bottom: var(--space-2); }
.reader-article strong { color: var(--text); font-weight: 600; }

/* ---------- "On this page" chip (inline TOC) ---------- */
.toc-chip {
  background: var(--surface-1);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
  margin: 0 0 var(--space-6);
}
.toc-chip summary {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  list-style: none;
}
.toc-chip summary::-webkit-details-marker { display: none; }
.toc-chip summary::after {
  content: '▾';
  margin-left: auto;
  font-size: var(--fs-base);
  transition: transform 0.15s ease;
}
.toc-chip[open] summary::after { transform: rotate(180deg); }
.toc-chip ol {
  margin: var(--space-3) 0 0;
  padding-left: var(--space-4);
  font-size: var(--fs-sm);
}
.toc-chip li { margin: var(--space-1) 0; }
.toc-chip a { color: var(--text-2); }
.toc-chip a:hover { color: var(--text); }

/* ---------- Inline signup CTAs ---------- */
.signup-cta {
  background: linear-gradient(135deg, #1e2a4a 0%, var(--surface-2) 100%);
  border: 1px solid var(--accent);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  margin: var(--space-6) 0;
  text-align: center;
}
.signup-cta h4 {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-lg);
}
.signup-cta p {
  color: var(--text-2);
  margin: 0 0 var(--space-3);
}
.signup-cta a.btn-primary {
  background: var(--accent);
  color: white;
  padding: 10px 22px;
  border-radius: var(--radius);
  font-weight: 500;
  display: inline-block;
}
.signup-cta a.btn-primary:hover { background: #4493f8; text-decoration: none; }

/* ---------- Article footer / metadata ---------- */
.reader-footer {
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-soft);
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

/* ---------- Mobile ---------- */
@media (max-width: 700px) {
  .reader-nav { padding: 0 var(--space-3); gap: var(--space-3); }
  .reader-nav-links { display: none; }  /* hide secondary links on phone; CTA remains */
  .reader-article { padding: var(--space-5) var(--space-4); }
  .reader-article h1 { font-size: 22px; }
  .reader-article p, .reader-article li { font-size: var(--fs-base); }
}