/* ===========================================================
   "Night lab" (2026-11-07, Gur picked it on the design canvas): trusted, scientific, innovative, friendly.
   Loaded after theme.css and pages.css. Parts:
   1. Site header: a navy band with a glass bar inside; white logo mark and wordmark; a journey chip (theme.js).
   2. Page title blocks (.int-hero, .sgl-hero): navy with a soft blue and green glow and a dot grid; white text;
      no blog details (author, date, read time) and no breadcrumbs.
   3. Article side card (.sgl-widget-cta): a small navy card.
   Design canvas: https://claude.ai/artifact/D6sRnVb7191tJ2yEdxDCpi
   =========================================================== */

:root {
  --night: #0A1630;
  --night-ink: #FFFFFF;
  --night-ink-2: #CBD5E1;
  --night-accent: #8FB4FF;
  --night-chip: #A7C4FF;
  --night-glass: rgba(255, 255, 255, 0.06);
  --night-line: rgba(255, 255, 255, 0.10);
}

/* --- shared night surface --- */
.int-hero,
.sgl-hero,
.sgl-widget-cta {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(620px 360px at 82% 20%, rgba(85, 140, 238, 0.34), transparent 70%),
    radial-gradient(480px 320px at 6% 110%, rgba(84, 199, 155, 0.16), transparent 70%),
    var(--night);
  color: var(--night-ink);
}
.int-hero::before,
.sgl-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.6;
  background-image: radial-gradient(rgba(255, 255, 255, 0.10) 1px, transparent 1px);
  background-size: 22px 22px;
}
.int-hero > *,
.sgl-hero > * { position: relative; }

/* --- 1. Site header --- */
.site-header {
  background: var(--night);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  padding: 12px 0 0;
}
.site-header.is-scrolled { box-shadow: 0 8px 24px -12px rgba(10, 22, 48, 0.6); padding-bottom: 12px; }
.hdr-shell {
  max-width: 1312px; margin: 0 64px; padding: 8px 10px 8px 18px; gap: 16px;
  border-radius: 16px; background: var(--night-glass); border: 1px solid var(--night-line);
}
@media (min-width: 1441px) { .hdr-shell { margin: 0 auto; } }
.hdr-brand { display: flex; align-items: center; gap: 10px; color: #fff; font-size: 20px; font-weight: 600; letter-spacing: -0.02em; }
.hdr-brand .hdr-mark { width: 30px; height: 30px; display: block; }
.hdr-brand img.hdr-mark { height: 30px; }
.hdr-nav .hdr-menu { gap: 4px; }
.hdr-nav .hdr-menu li a { display: block; padding: 7px 14px; border-radius: 10px; font-size: 14.5px; font-weight: 500; color: var(--night-ink-2); }
.hdr-nav .hdr-menu li a:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
.hdr-nav .hdr-menu li.current-menu-item a,
.hdr-nav .hdr-menu li.current-menu-ancestor a,
.hdr-nav .hdr-menu li.current-page-ancestor a { color: #fff; background: rgba(255, 255, 255, 0.12); }
.hdr-actions { display: flex; align-items: center; gap: 10px; }
.hdr-cta {
  background: #fff; color: var(--night); border-radius: 11px; padding: 10px 18px; font-size: 14px;
}
.hdr-cta:hover { color: var(--night); box-shadow: 0 6px 18px rgba(143, 180, 255, 0.35); }
.nav-toggle__line { background: #fff; }

/* Journey chip (theme.js fills it from the browser: test results, the web app plan). */
.hdr-chip {
  display: inline-flex; align-items: center; gap: 9px; white-space: nowrap;
  background: rgba(255, 255, 255, 0.10); border-radius: 999px; padding: 7px 13px;
  font-size: 13.5px; color: #fff;
}
.hdr-chip[hidden] { display: none; }
.hdr-chip:hover { background: rgba(255, 255, 255, 0.16); color: #fff; }
.hdr-chip-dot { width: 7px; height: 7px; border-radius: 7px; background: #54C79B; flex: none; }
.hdr-chip--trial .hdr-chip-dot { background: #F5C26B; }
.hdr-chip--premium .hdr-chip-dot { background: var(--night-accent); }
.hdr-chip-bar { width: 36px; height: 5px; border-radius: 5px; background: rgba(255, 255, 255, 0.2); flex: none; overflow: hidden; }
.hdr-chip-bar > span { display: block; height: 5px; border-radius: 5px; background: var(--night-accent); }

@media (max-width: 1100px) { .hdr-chip-long { display: none; } }
@media (max-width: 840px) {
  .site-header { padding-top: 10px; }
  .hdr-shell { margin: 0 12px; padding: 6px 6px 6px 12px; }
  .hdr-brand { font-size: 18px; }
  .hdr-brand .hdr-mark, .hdr-brand img.hdr-mark { width: 26px; height: 26px; }
  .hdr-cta { padding: 9px 14px; font-size: 13.5px; }
  /* Row 1: brand, CTA, menu button. Row 2: the chip. Then the menu drawer. */
  .hdr-actions { display: contents; }
  .hdr-brand { order: 1; }
  .hdr-cta { order: 5; margin-left: auto; }
  /* WordPress Additional CSS (wp-custom-css) has ".nav-toggle { display: none; }", so phones had no menu.
     This rule is more specific, so the menu button shows again (2026-11-07). */
  .site-header .nav-toggle { display: flex; order: 6; width: 44px; height: 44px; }
  .hdr-chip { order: 20; flex-basis: 100%; justify-content: flex-start; margin: 4px 0 2px; padding: 9px 14px; font-size: 13px; }
  .hdr-nav { order: 30; }
  /* While reading, the bar stays short: the chip shows only at the top of the page (and with the menu open). */
  .site-header.chip-away:not(.nav-open) .hdr-chip { display: none; }
  .hdr-chip-long { display: inline; }
  .hdr-nav .hdr-menu li a { color: #fff; border-bottom-color: var(--night-line); padding: 12px 6px; border-radius: 0; background: none; }
  .hdr-nav .hdr-menu li.current-menu-item a { background: none; color: var(--night-accent); }
}

/* --- 2. Page title blocks --- */
.int-hero { padding: 72px 0 64px; }
.sgl-hero { padding: 56px 0 52px; }
.int-hero h1,
.sgl-title { color: #fff; letter-spacing: -0.03em; font-family: var(--font); }
.int-hero h1 { font-size: 54px; line-height: 1.05; }
.sgl-title { font-size: 50px; line-height: 1.06; max-width: 980px; margin-bottom: 0; }
.int-hero-desc { color: var(--night-ink-2); font-size: 18px; }
.int-breadcrumb, .sgl-breadcrumb, .sgl-meta { display: none; }
/* The category becomes an outlined chip above the title. */
.sgl-cat-badge {
  background: transparent; color: var(--night-chip);
  border: 1px solid rgba(167, 196, 255, 0.35); border-radius: 999px;
  font-size: 13px; font-weight: 500; padding: 5px 11px; margin-bottom: 18px;
}
@media (max-width: 840px) {
  .int-hero { padding: 40px 0 36px; }
  .int-hero h1 { font-size: 32px; }
  .sgl-hero { padding: 28px 0 28px; }
  .sgl-title { font-size: 31px; line-height: 1.08; }
  .sgl-cat-badge { margin-bottom: 12px; font-size: 12px; }
  /* Test pages: the test comes first (2026-11-07): no chip either. */
  .sgl-page--test .sgl-cat-badge { display: none; }
}

/* --- 3. Article side card --- */
.sgl-widget-cta { border-radius: 22px; padding: 22px; align-items: flex-start; text-align: left; gap: 12px; }
.sgl-widget-icon { font-size: 20px; color: var(--night-chip); }
.sgl-widget-cta h3 { color: #fff; font-size: 20px; letter-spacing: -0.015em; line-height: 1.25; }
.sgl-widget-cta p { color: var(--night-ink-2); font-size: 13.5px; }
.sgl-widget-btn { background: #fff; color: var(--night); border-radius: 12px; padding: 12px; }
.sgl-widget-btn:hover { opacity: 1; box-shadow: 0 6px 18px rgba(143, 180, 255, 0.35); }
.sgl-widget-note { color: rgba(203, 213, 225, 0.75); }