/* Befora Marketing Footer — scoped via data-component-id.
   Menus reached via `> nav > ul` to sidestep Drupal contextual-link markup.
   Brand anchors come from the branding-block template (`.befora-brand` /
   `.befora-brand-name`); we keep those names so the override stays the single
   source of truth for the wordmark markup. */

[data-component-id="befora:marketing-footer"] {
  background: var(--bef-canvas);
  color: var(--bef-stone);

  /* --- Main 3-column grid --- */

  .befora-inner {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: var(--s-7);
    max-width: 1280px;
    margin: 0 auto;
    padding: var(--s-8) var(--s-5) var(--s-6);
  }

  .befora-brand-col {
    display: flex;
    flex-direction: column;
    gap: var(--s-3);

    .befora-brand {
      text-decoration: none;
      color: var(--bef-ink);
      line-height: 0;

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

    /* Hide the duplicate site-name link (the wordmark already lives in the SVG). */
    .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;
    }
  }

  .befora-tagline {
    font-family: var(--bef-display);
    font-style: italic;
    font-size: var(--fs-18);
    line-height: 1.4;
    color: var(--bef-graphite);
    margin: 0;
    max-width: 22ch;
  }

  /* --- Columns + headings --- */

  .befora-col {
    display: flex;
    flex-direction: column;
    gap: var(--s-5);
  }

  .befora-heading {
    font-family: var(--bef-mono);
    font-size: var(--fs-11);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--bef-graphite);
    margin: 0 0 var(--s-3);
  }

  /* --- Menu lists in footer columns --- */

  .befora-col > nav > ul,
  .befora-social > nav > ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
  }

  .befora-col > nav > ul a {
    font-family: var(--bef-body);
    font-size: var(--fs-14);
    color: var(--bef-stone);
    text-decoration: none;
    transition: color var(--dur-2) var(--ease-quiet);

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

  /* Social row goes horizontal with pill borders. */
  .befora-social > nav > ul {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--s-3);

    a {
      display: inline-flex;
      align-items: center;
      padding: var(--s-2) var(--s-3);
      border: 1px solid var(--bef-hairline-strong);
      border-radius: var(--r-2);
      color: var(--bef-graphite);
      text-decoration: none;
      font-family: var(--bef-body);
      font-size: var(--fs-14);
      transition:
        color var(--dur-2) var(--ease-quiet),
        border-color var(--dur-2) var(--ease-quiet),
        background var(--dur-2) var(--ease-quiet);

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

  /* --- Bottom strip --- */

  .befora-base {
    border-top: 1px solid var(--bef-hairline);
    padding: var(--s-4) var(--s-5);
    text-align: center;
  }

  .befora-copyright {
    font-family: var(--bef-mono);
    font-size: var(--fs-12);
    color: var(--bef-stone);
    margin: 0 auto;
    max-width: 1280px;
  }

  /* --- Responsive --- */

  @media (width <= 900px) {
    .befora-inner {
      grid-template-columns: 1fr 1fr;
      gap: var(--s-6);
    }

    .befora-brand-col {
      grid-column: 1 / -1;
    }
  }

  @media (width <= 560px) {
    .befora-inner {
      grid-template-columns: 1fr;
      padding: var(--s-6) var(--s-4);
    }
  }
}