/* Signal hero banner + matching nav/footer/menu-search restyle.
   Ported from the approved standalone demo (digital-billboard hero, cyan accent).
   Scope: homepage hero + shared nav/footer/mobile-menu chrome. No other page markup changes. */

:root {
  --sh-ink: #f4f7f8;
  --sh-muted: rgba(244, 247, 248, .74);
  --sh-muted-dim: rgba(244, 247, 248, .5);
  --sh-accent: #26c2dc;
  --sh-accent-soft: #aeeaf3;
  --sh-accent-ink: #04222a;
  --sh-accent-line: rgba(38, 194, 220, .44);
  --sh-line: rgba(244, 247, 248, .16);
  --sh-line-soft: rgba(244, 247, 248, .09);
}

/* ---- nav: everything collapses into the hamburger, at every width ---- */
.menu-btn { display: inline-flex !important; }
.nav-links { display: none !important; }

.nav-actions { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.nav-actions .icon-btn { -webkit-tap-highlight-color: transparent; }

body:has(#signalHero) .site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  background: rgba(7, 11, 20, .14);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
}

/* ---- hero stage ---- */
.signal-hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  isolation: isolate;
  background: var(--bg);
}
@media (max-height: 520px) {
  .signal-hero { min-height: 150vw; }
}

.sh-bg { position: absolute; inset: 0; z-index: 0; background: var(--bg); overflow: hidden; }
.sh-cover {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 18%;
  filter: saturate(1.04) brightness(.97);
  opacity: 0;
  transform: scale(1.03);
  transition: opacity .6s ease, transform .6s ease;
}
/* Both layers cross-fade at once — the incoming one ramping up while the
   outgoing one ramps down, so something is always fully in view and it
   never dips through a blank/dark frame like a toggled light. */
.sh-cover.is-visible { z-index: 2; opacity: 1; transform: scale(1); }
.signal-hero .sh-content {
  transition: opacity .3s ease;
  will-change: opacity;
}
.signal-hero.is-morphing .sh-content { opacity: .45; }
@media (prefers-reduced-motion: reduce) {
  .sh-cover,
  .signal-hero .sh-content { transition: none; }
}

.sh-scrim { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.sh-scrim::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, transparent 76%, rgba(7, 11, 20, .65) 90%, var(--bg) 100%),
    linear-gradient(90deg, rgba(7, 11, 20, .86) 0%, rgba(7, 11, 20, .76) 26%, rgba(7, 11, 20, .5) 52%, rgba(7, 11, 20, .18) 78%, rgba(7, 11, 20, 0) 100%);
}
.sh-scrim::before {
  content: "";
  position: absolute; inset: 0;
  background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .035) 0px, rgba(255, 255, 255, .035) 1px, transparent 1px, transparent 3px);
  mix-blend-mode: overlay;
}

.sh-content {
  position: relative; z-index: 5; flex: 1;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 0 20px calc(env(safe-area-inset-bottom, 0px) + 22px);
  max-width: 560px;
  text-shadow: 0 2px 20px rgba(0, 0, 0, .65), 0 1px 3px rgba(0, 0, 0, .75);
}
@media (min-width: 640px) {
  .sh-content { padding-bottom: 56px; }
}

/* min-height reserves room for up to two wrapped rows of tags, and
   align-content keeps a single-row slide's tags pinned to the BOTTOM of
   that reserved space — otherwise a slide with fewer/shorter tags (one
   line) sizes shorter than one with more/longer tags (two lines), and
   because .sh-content is bottom-anchored (justify-content: flex-end),
   that height difference shifts every block above it up/down as slides
   change. Bottom-pinned (not top, like before removing .sh-overline)
   so the tag row itself sits right above the title — any slack from a
   single-row slide collapses upward against the cover image instead of
   opening a gap between the tags and the title. */
.sh-tags { display: flex; flex-wrap: wrap; align-content: flex-end; gap: 8px; min-height: 70px; margin-bottom: 18px; }
.sh-tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'JetBrains Mono', monospace; font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 600;
  padding: 7px 12px; border-radius: 8px; border: 1px solid var(--sh-line); color: var(--sh-muted);
  background: rgba(7, 11, 20, .32);
}
.sh-tag--accent { color: var(--sh-accent-soft); border-color: var(--sh-accent-line); background: rgba(38, 194, 220, .22); }
.sh-tag-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--sh-accent); animation: shPulse 1.6s ease-in-out infinite; }
@keyframes shPulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .sh-tag-dot { animation: none; } }
.sh-tag svg { width: 12px; height: 12px; }

h1.sh-title {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: var(--sh-title-size, 3.6rem); line-height: .98; font-weight: 700;
  letter-spacing: -.01em; margin: 0 0 14px; color: var(--sh-ink);
  /* Box height is a fixed reserve (room for 2 lines at max font) so the
     carousel doesn't jump as slides with different title lengths rotate
     through — but the box is near-always taller than the actual text
     (1 line, or 2 lines at a smaller font for long titles that
     headlineSize() scales down), so slack between the box edge and the
     real text shows up as a gap somewhere. Centering splits that slack
     evenly above (eyebrow/tags → title) and below (title → "Tác giả")
     instead of dumping all of it on one side — reads more balanced than
     either edge-anchored option. Same rule for 1-line and 2-line titles. */
  height: 7.3rem; display: flex; flex-direction: column; justify-content: center;
  overflow: hidden;
}
h1.sh-title em { font-style: normal; color: var(--sh-accent-soft); }
h1.sh-title span { display: block; white-space: nowrap; }
.sh-author {
  font-size: .95rem; color: var(--sh-muted); margin: 0 0 22px; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sh-author b { color: var(--sh-ink); font-weight: 700; }

.sh-stats { display: flex; gap: 26px; padding: 18px 0; margin-bottom: 22px; }
.sh-stat-num { font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; color: var(--sh-ink); white-space: nowrap; }
.sh-stat-label { font-family: 'JetBrains Mono', monospace; font-size: .6rem; letter-spacing: .14em; color: var(--sh-muted-dim); text-transform: uppercase; margin-top: 6px; white-space: nowrap; }

.sh-ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.sh-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 20px; border-radius: 12px; font-weight: 700; font-size: .9rem;
  text-decoration: none; cursor: pointer; border: 1px solid transparent;
}
.sh-btn--primary { background: var(--sh-accent); color: var(--sh-accent-ink); text-shadow: none; }
.sh-btn--primary svg { width: 15px; height: 15px; transform: rotate(45deg); }
.sh-btn--ghost { border-color: var(--sh-line); color: var(--sh-ink); background: rgba(7, 11, 20, .35); }

/* Always exactly one line: a long latest-chapter title used to wrap the
   bare "Chương mới nhất —" text to 2–3 lines, and since .sh-content is
   bottom-anchored every block above (tags, title, buttons) jumped up and
   down as slides changed. The chapter name now ellipsizes instead. */
.sh-trust {
  display: flex; align-items: center; gap: 8px;
  font-family: 'JetBrains Mono', monospace; font-size: .72rem; line-height: 1.4; color: var(--sh-muted); margin: 0;
  min-width: 0; white-space: nowrap; overflow: hidden; height: 1.4em;
}
.sh-trust svg { width: 13px; height: 13px; color: var(--sh-accent-soft); flex-shrink: 0; }
.sh-trust b {
  color: var(--sh-ink); font-weight: 600; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---- search moved inside the hamburger drawer ---- */
.mm-search {
  position: relative;
  display: flex; align-items: center; gap: .6rem;
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--line, var(--sh-line));
  border-radius: .75rem;
  padding: .65rem .8rem;
  margin-bottom: .5rem;
}
.mm-search-ico { width: 18px; height: 18px; flex: 0 0 auto; color: var(--sh-muted); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mm-search input {
  flex: 1; min-width: 0; background: transparent; border: 0; outline: 0;
  color: var(--sh-ink); font: 500 .95rem/1.2 'Plus Jakarta Sans', system-ui, sans-serif;
}
.mm-search input::placeholder { color: var(--sh-muted); }
#mobileMenu .search-panel {
  position: static;
  width: 100%;
  margin: -.2rem 0 .5rem;
  top: auto; right: auto;
  background: rgba(255, 255, 255, .03);
  max-height: 50vh;
  overflow-y: auto;
}

/* ---- footer: same tokens/fonts as the banner ---- */
.foot2-body::before { background: radial-gradient(closest-side, rgba(38, 194, 220, .38), transparent 72%); }
.foot2-body::after { background: radial-gradient(closest-side, rgba(174, 234, 243, .3), transparent 72%); }
.foot2-kicker {
  background: none; -webkit-background-clip: initial; background-clip: initial; color: var(--sh-accent);
  font-family: 'JetBrains Mono', monospace; letter-spacing: .3em;
}
.foot2-section h4 { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-size: .68rem; font-weight: 700; letter-spacing: .24em; color: var(--sh-accent); text-transform: uppercase; margin: 0 0 10px; }

.foot2-row {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 9px 0; border: 0;
  background: none; text-align: left; cursor: pointer; appearance: none; -webkit-appearance: none;
}
.foot2-row svg { width: 17px; height: 17px; flex-shrink: 0; stroke: var(--sh-accent-soft); }
.foot2-row-t { display: flex; flex-direction: column; gap: 2px; }
.foot2-row-t small { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-size: .62rem; font-weight: 600; letter-spacing: .1em; color: var(--sh-muted-dim); }
.foot2-row-t b { font-size: .9rem; font-weight: 600; color: var(--sh-ink); }

.foot2-cols { display: flex; gap: 40px; flex-wrap: wrap; margin-top: 2.3rem; }
.foot2-cols .foot2-section { flex: 1; min-width: 180px; margin-top: 0; }

.foot2-section a {
  display: block; padding: 8px 0;
  font-family: 'JetBrains Mono', monospace; font-size: .82rem; font-weight: 500;
  color: var(--sh-muted); text-decoration: none;
}
.foot2-section a::before { content: "// "; color: var(--sh-accent); }
.foot2-social-youtube, .foot2-social-tiktok, .foot2-social-facebook, .foot2-social-wattpad { color: var(--sh-muted); }
.foot2-rule-top { background: linear-gradient(90deg, transparent, rgba(38, 194, 220, .7) 20%, rgba(38, 194, 220, .9) 50%, rgba(38, 194, 220, .7) 80%, transparent); }
.foot2-copy { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; }