/* Branded page header — Heroku logo (student) or icon (admin) above the page
 * content. The student logo SVG is the full wordmark and is wider, so we cap
 * its rendered height to keep the header compact; the admin icon is square
 * and stays small. */

.page-header {
  @apply w-full border-b border-slate-200 bg-white;

  & .inner {
    @apply container mx-auto flex w-full max-w-6xl items-center justify-between gap-4 px-4 py-4 sm:px-6 lg:px-8;

    /* Student-side variant: brand centered, no nav alongside. */
    &.centered {
      @apply justify-center;
    }
  }

  & .brand {
    @apply flex items-center;

    /* Student lockup — bound by max-h so the SVG's intrinsic aspect ratio
     * scales width down on small screens. */
    & .logo {
      @apply h-12 w-auto;
    }

    /* Admin square icon. */
    & .icon {
      @apply h-8 w-auto;
    }

    & .name {
      @apply ml-3 block font-semibold text-slate-900;

      & .suffix {
        @apply font-normal text-slate-500;
      }
    }
  }

  & .nav {
    @apply flex items-center gap-3 text-sm;

    & a {
      @apply text-slate-700 hover:text-slate-900;
    }

    & .separator {
      @apply text-slate-300;
    }

    & .email {
      @apply text-slate-600;
    }
  }
}