/*
 * The Powerpack banner (`shared/_powerpack_banner`): an ink strip across the
 * top of the window, over the masthead — the one place on the site set in
 * paper on ink, so it reads as an aside from the page rather than part of it.
 * "Powerpack" in the serif, the pitch and the price in the UI face, the link
 * in paper with an underline, since the green of `.link` does not read on ink.
 *
 * The long pitch is for 1280px and up; below it the short one, and below
 * 1024px no price, so the strip is one line on a laptop and two on a 375px
 * phone.
 */
@layer components {
  .powerpack-banner {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--gutter);
    background-color: var(--color-ink);
    color: var(--color-ink-inverse);
    font-size: var(--text-ui-sm);
    line-height: var(--leading-ui-sm);

    /* The site's ring is the accent green, which is lost on ink. */
    & :focus-visible {
      outline-color: var(--color-ink-inverse);
    }

    @media (width >= 768px) {
      justify-content: center;
      font-size: var(--text-ui);
      line-height: var(--leading-ui);
    }
  }

  .powerpack-banner__text {
    flex: 1;
    margin: 0;

    @media (width >= 768px) {
      flex: 0 1 auto;
    }

    & > * + * {
      margin-inline-start: var(--space-sm);
    }
  }

  .powerpack-banner__name {
    color: var(--color-accent-line);
    font-family: var(--font-prose);
    font-weight: var(--weight-semibold);

    @media (width >= 768px) {
      padding-inline-end: var(--space-sm);
      border-inline-end: 1px solid var(--color-ink-muted);
      font-size: var(--text-h4);
    }
  }

  .powerpack-banner__pitch {
    display: none;

    @media (width >= 1280px) {
      display: inline;
    }
  }

  .powerpack-banner__pitch--short {
    display: inline;
    margin-inline-start: var(--space-2xs);

    @media (width >= 768px) {
      margin-inline-start: var(--space-sm);
    }

    @media (width >= 1280px) {
      display: none;
    }
  }

  .powerpack-banner__price {
    display: none;
    color: var(--color-accent-tint);

    @media (width >= 1024px) {
      display: inline;
    }
  }

  .powerpack-banner__action {
    color: var(--color-ink-inverse);
    font-weight: var(--weight-semibold);
    text-decoration: underline;
    text-underline-offset: 0.2em;
    white-space: nowrap;

    &:hover {
      color: var(--color-accent-line);
    }
  }

  .powerpack-banner__dismiss {
    flex: none;
    padding: var(--space-2xs) var(--space-xs);
    border: 0;
    background: none;
    color: var(--color-ink-inverse);
    font-size: var(--text-h3);
    line-height: 1;
    cursor: pointer;

    @media (pointer: coarse) {
      min-inline-size: 44px;
      min-block-size: 44px;
    }
  }
}