/*
 * Librarium Militaris: the masthead.
 *
 * The plate at the top of every listing: the calls to action in the corner, the
 * sigil, the brand, the page's own heading, the counts and the search box.
 */

@layer components {
  /* The space above clears the corner rail. On a phone it leaves more room than
     the rail strictly needs: the sigil below is centred rather than off to one
     side, so it passes close under the button and wants the air. */
  .masthead {
    --masthead-space-above: var(--space-80);
    --masthead-space-inline: var(--space-16);

    position: relative;
    z-index: var(--z-raised);
    padding: var(--masthead-space-above) var(--masthead-space-inline) var(--space-48);
    background-color: var(--color-surface);
    text-align: center;

    @media (min-width: 768px) {
      --masthead-space-above: var(--space-64);
      --masthead-space-inline: var(--space-32);
    }
  }

  /* The calls to action, pinned to the plate's top-right corner. On a phone only
     the sign-up rides up here: the corner has room for one, and submitting a
     report is the footer's business at that width. */
  .masthead__rail {
    position: absolute;
    top: var(--space-16);
    right: var(--space-16);
    z-index: 1;
    display: flex;
    align-items: center;
    gap: var(--space-8);

    & .btn-submit { display: none; }

    @media (min-width: 768px) {
      top: var(--space-24);
      right: var(--space-24);

      & .btn-submit { display: inline-block; }
    }
  }

  /* At the size the report page's own bar uses, so the two headers agree on how
     big the sign-up is. Written the wrong way round because it is the exception
     that needs stating, not the rule. */
  @media (max-width: 767px) {
    .masthead__rail .btn-signup {
      --btn-font-size: var(--text-11);
      --btn-padding: var(--space-6) var(--space-10);
      --btn-icon-size: var(--space-14);
    }
  }

  .masthead__inner {
    max-width: 56rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .masthead__sigil {
    width: var(--space-48);
    height: var(--space-48);
    color: var(--color-accent);
    margin-bottom: var(--space-16);
    opacity: 0.8;
  }

  /* The brand, above the heading rather than as it. Wears what the kicker wore:
     small, spaced and quiet, so the page's own subject is what carries weight. */
  .masthead__wordmark {
    font-family: var(--font-heading);
    font-size: var(--text-14);
    line-height: var(--leading-20);
    letter-spacing: var(--tracking-4xl);
    color: var(--color-ink-soft);
    text-transform: uppercase;
    margin-bottom: var(--space-12);

    @media (min-width: 768px) {
      font-size: var(--text-16);
      line-height: var(--leading-24);
    }
  }

  .masthead__title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--text-36);
    line-height: var(--leading-40);
    color: var(--color-ink-bright);
    letter-spacing: var(--tracking-xl);
    text-transform: uppercase;
    /* Carries the air the kicker used to sit in. On a filtered page the heading
       runs straight into the stat strip; on the archive root the blurb below
       takes the gap instead. */
    margin-bottom: var(--space-20);
    filter: var(--shadow-title);

    @media (min-width: 768px) {
      font-size: var(--text-60);
      line-height: var(--leading-none);
    }
  }

  /* Answers "what is this" on the one page whose subject is the archive itself.
     Set below the heading and above the counts, because a number means nothing
     until you know what is being counted. */
  .masthead__blurb {
    max-width: 40rem;
    margin: calc(var(--space-4) * -1) 0 var(--space-24);
    color: var(--color-ink-soft);
    font-size: var(--text-15);
    line-height: var(--leading-digest);

    @media (min-width: 768px) {
      font-size: var(--text-17);
    }
  }
}