/* Befora Marketing Header — scoped via data-component-id.
   Menus are reached via `> nav > ul` (the block plugin's own wrapper) which
   sidesteps Drupal's contextual-link UL that lives at `> nav > div.contextual
   > ul.contextual-links`. The branding-block template emits `.befora-brand`
   on the logo anchor and `.befora-brand-name` on the site-name link — both
   reach down into here intentionally. */

[data-component-id="befora:marketing-header"] {
  background: var(--bef-canvas);
  border-bottom: 1px solid var(--bef-hairline);

  .befora-inner {
    display: flex;
    align-items: center;
    gap: var(--s-5);
    max-width: 1280px;
    margin: 0 auto;
    padding: var(--s-3) var(--s-5);
  }

  /* --- Brand --- */

  .befora-branding {
    flex: 0 0 auto;

    .befora-brand {
      display: inline-flex;
      align-items: center;
      text-decoration: none;
      color: var(--bef-ink);
      line-height: 0;

      svg {
        height: 32px;
        width: auto;
        display: block;
      }
    }

    /* Visually-hide the duplicate site-name link (the wordmark already lives
       in the SVG); keep it in the DOM for screen readers / SEO. */
    .befora-brand-name {
      position: absolute;
      width: 1px;
      height: 1px;
      margin: -1px;
      padding: 0;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }
  }

  /* --- Main menu --- */

  .befora-nav {
    flex: 1 1 auto;
    display: flex;
    justify-content: center;

    > nav > ul {
      display: flex;
      align-items: center;
      gap: var(--s-5);
      margin: 0;
      padding: 0;
      list-style: none;

      a {
        font-family: var(--bef-body);
        font-size: var(--fs-14);
        font-weight: 500;
        letter-spacing: 0.005em;
        color: var(--bef-graphite);
        text-decoration: none;
        padding: var(--s-2) 0;
        transition: color var(--dur-2) var(--ease-quiet);

        &:hover,
        &.is-active {
          color: var(--bef-ink);
        }
      }
    }
  }

  /* --- Utility (account menu + theme toggle) --- */

  .befora-utility {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: var(--s-3);
  }

  .befora-account > nav > ul {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    margin: 0;
    padding: 0;
    list-style: none;

    a {
      font-family: var(--bef-body);
      font-size: var(--fs-14);
      font-weight: 500;
      letter-spacing: 0.005em;
      text-decoration: none;
      color: var(--bef-graphite);
      padding: var(--s-2) var(--s-3);
      border-radius: var(--r-2);
      transition:
        color var(--dur-2) var(--ease-quiet),
        background var(--dur-2) var(--ease-quiet),
        border-color var(--dur-2) var(--ease-quiet);

      &:hover {
        color: var(--bef-ink);
        background: var(--bef-canvas-raised);
      }
    }

    /* The last item in the account menu is styled as the primary CTA (e.g.
       "Start a project"). Editors control this by reordering the menu at
       /admin/structure/menu/manage/account. The :not(:only-child) guard
       keeps the lone "Sign in" link from rendering as a heavy button when
       it's the only item. */
    > li:not(:only-child):last-child a {
      background: var(--bef-ember);
      color: #FBF8F1;
      border: 1px solid var(--bef-ember);
      padding: var(--s-2) var(--s-4);

      &:hover {
        background: var(--bef-ember-deep);
        border-color: var(--bef-ember-deep);
        color: #FBF8F1;
      }
    }
  }

  /* --- Responsive --- */

  @media (width <= 768px) {
    .befora-inner {
      flex-wrap: wrap;
      gap: var(--s-3);
      padding: var(--s-3);
    }

    .befora-nav {
      order: 3;
      width: 100%;
      justify-content: flex-start;
      border-top: 1px solid var(--bef-hairline);
      padding-top: var(--s-3);
    }

    .befora-nav > nav > ul {
      flex-wrap: wrap;
      gap: var(--s-3) var(--s-5);
    }
  }
}