/* ==========================================================================
   CASE PAGE THEME — the site turned over (smak-gruzii.html, body.is-dark)
   --------------------------------------------------------------------------
   The main case is the one dark page of the site: ink ground, cream text.
   Only the Hero stays cream, so the page opens like the rest of the site
   and then "turns the light off" for the case itself.
   Everything shared — the header, the menu, the footer — keeps its layout
   and numbers and only swaps colours (Vadim, 23 Oct: «такую же, только
   отзеркаленную по цвету»). Roles map one to one:
     ink → bg            text
     bg → ink            ground
     ink-soft → bg-soft  secondary text, read
     ink-faint → bg-soft markers (on ink the faint tone would fail; bg-soft
                         is 6.49:1 there)
     hairline → line-dark rules
   The accent stays the accent.
   ========================================================================== */

.is-dark {
  /* The one new token of the page: a hairline on ink (bg at ~14 %). */
  --color-line-dark: #2e2d29;

  background: var(--color-ink);
  color: var(--color-bg);
}

/* --- Header ---------------------------------------------------------------
   At the top the burger (phones) sits on the cream Hero: it stays ink.
   Once the bar is called back by scrolling up, the bar is ink and the icon
   cream. With the menu open the cross sits on the ink menu: cream. */
.is-dark .site-header.is-bar {
  background: var(--color-ink);
}

.is-dark .site-header.is-bar .menu-toggle,
.menu-open .is-dark .menu-toggle {
  color: var(--color-bg);
}

/* --- Menu (phones) -------------------------------------------------------- */
.is-dark .menu {
  background: var(--color-ink);
  color: var(--color-bg);
}

.is-dark .menu__items.has-pressed .menu__link[aria-current]:not(.is-pressed) {
  color: var(--color-bg);
}

.is-dark .menu__head {
  color: var(--color-bg-soft);
}

/* --- CTA ------------------------------------------------------------------
   The arrow is drawn in the text colour; on the press the fill is accent
   and the arrow cream on any ground, so only the rest state changes. */
.is-dark .cta {
  color: var(--color-bg);
}

/* --- Footer ---------------------------------------------------------------- */
.is-dark .site-footer__line--muted,
.is-dark .site-footer__head,
.is-dark .site-footer__copy {
  color: var(--color-bg-soft);
}

/* The case thesis, on this page only: the line that used to close the Hero
   now opens the footer, 32 above «Зробимо щось вірусне». */
.site-footer__thesis {
  margin-bottom: var(--space-group);           /* 32 */
  color: var(--color-bg-soft);
}

@media (min-width: 64em) {
  /* The desktop bar. Docked under the Hero (has-hero, css/menu.css) it is
     part of the dark page: cream words, a dark hairline under them. Called
     back by scrolling up it is an ink bar. */
  .is-dark .site-header {
    color: var(--color-bg);
  }

  .is-dark.has-hero .site-header:not(.is-bar) {
    border-bottom-color: var(--color-line-dark);
  }

  .is-dark .site-nav__link {
    color: var(--color-bg-soft);
  }

  .is-dark .site-nav__link[aria-current],
  .is-dark .site-nav__link:hover {
    color: var(--color-bg);
  }

  /* The footer line spans the whole grid on desktop. */
  .site-footer__thesis {
    grid-column: 1 / -1;
    margin-bottom: var(--space-between);       /* 56 */
  }
}