/* The header: the black bar and the awning. Phones: the brand and "Cerrar
   sesión" on one row; the sections below, as even tabs. */

@layer components {
  .topbar {
    background: var(--ink);
    color: var(--paper);
  }

  .topbar-inner {
    max-width: var(--page);
    margin: 0 auto;
    padding: 0.85rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 2rem;

    @media (max-width: 860px) { flex-wrap: wrap; gap: 0.75rem; }
    @media (max-width: 640px) {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 0.6rem;
      padding: 0.7rem 1rem 0.6rem;
    }
  }

  .brand {
    font: 400 1.6rem/1 var(--font-display);
    color: var(--paper);
    text-decoration: none;
    white-space: nowrap;

    @media (max-width: 640px) { font-size: 1.2rem; align-self: center; }
  }

  .nav {
    display: flex;
    gap: 0.35rem;
    align-items: center;
    flex: 1;
    flex-wrap: wrap;

    @media (max-width: 640px) {
      grid-column: 1 / -1;
      order: 3;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 0.25rem;
    }

    a {
      color: var(--paper);
      text-decoration: none;
      font-weight: 600;
      padding: 0.35rem 0.9rem;
      border-radius: var(--radius-pill);

      @media (max-width: 640px) {
        text-align: center;
        padding: 0.4rem 0.2rem;
        font-size: 0.92rem;
      }

      &:hover { background: #2a2a2a; }
      &[aria-current="page"] { background: var(--paper); color: var(--ink); }
    }
  }

  .user {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    color: #bdbdbd;
    white-space: nowrap;

    @media (max-width: 640px) { gap: 0.5rem; }

    form { margin: 0; }
    button {
      background: transparent;
      color: var(--paper);
      border: 2px solid #555;
      padding: 0.25rem 0.8rem;
      margin: 0;
      font-size: 0.9rem;

      @media (max-width: 640px) { padding: 0.2rem 0.7rem; font-size: 0.85rem; }

      &:hover { border-color: var(--paper); }
    }
  }
  .user-name {
    color: #bdbdbd;
    text-decoration: none;

    @media (max-width: 640px) { font-size: 0.9rem; }

    &:hover { color: var(--paper); text-decoration: underline; }
  }

  /* Stripes with a scalloped bottom edge, like the facade's awning. The
     wrapper's shadow draws the black edge under the white scallops (a filter
     on the masked element itself would be cut off). */
  .awning-edge { filter: drop-shadow(0 3px 0 var(--ink)); }
  .awning {
    height: 46px;
    background: repeating-linear-gradient(
      90deg, var(--ink) 0 44px, var(--paper) 44px 88px);
    -webkit-mask:
      radial-gradient(22px at 22px 24px, #000 98%, transparent)
        0 0 / 44px 100% repeat-x,
      linear-gradient(#000 0 0) top / 100% 24px no-repeat;
    mask:
      radial-gradient(22px at 22px 24px, #000 98%, transparent)
        0 0 / 44px 100% repeat-x,
      linear-gradient(#000 0 0) top / 100% 24px no-repeat;
  }
}