/**
 * Refonte V2 — footer alignment overrides (#760).
 *
 * Reference stylesheet that locks the visual contract of the V2 site
 * footer against the prototype and repairs the z-index of the Legal /
 * Realisons dropdown panels. Loaded last so it overrides the values in
 * assets/css/realisons-v2.css.
 *
 * Three failure modes from #760 are addressed here:
 *   1. The footer creates a stacking context that competes with sticky
 *      right-rail modules. We promote it via isolation + an explicit z.
 *   2. The dropdown panels open upward and used to be clipped by page
 *      surfaces with a comparable z-index. We raise them to the skip
 *      layer so they sit above any neighbouring chrome.
 *   3. The launch banner row and the dropdown bar drift apart on
 *      narrow viewports. We re-anchor padding + gaps to the section
 *      gap token so the proportions match the prototype.
 */

.et-boc > .et-l--footer {
  isolation: isolate;
  z-index: var(--r-z-nav);
}

.et-boc > .et-l--footer[data-r-v2-dropdown-open="true"] {
  z-index: var(--r-z-skip);
}

.et-boc > .et-l--footer:has(.r-footer__dropdown-panel:not([hidden])) {
  z-index: var(--r-z-skip);
}

.r-footer.r-footer--v2 {
  position: relative;
  z-index: var(--r-z-nav);
  isolation: isolate;
  display: flex;
  flex-direction: column;
}

.r-footer__launch {
  position: relative;
  display: flex;
  align-items: center;
  gap: calc(var(--r-section-gap) / 2);
  padding-block: calc(var(--r-section-gap) / 4);
  padding-inline: var(--r-gutter-sm);
  background: color-mix(in srgb, var(--r-bg) 72%, var(--r-teal-light));
  z-index: var(--r-z-nav);
}

body.r-v2--landing-page #page-container #et-boc .et-l.et-l--footer .r-footer__launch,
body.r-no-launch-banner #page-container #et-boc .et-l.et-l--footer .r-footer__launch {
  display: none;
}

.r-footer__bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--r-section-gap);
  padding-block: calc(var(--r-section-gap) / 2);
  padding-inline: var(--r-gutter-sm);
}

.r-footer__bar-left,
.r-footer__bar-right {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: calc(var(--r-section-gap) * 0.85);
}

.r-footer__bar-left {
  justify-self: start;
}

.r-footer__bar-right {
  justify-self: end;
}

.r-footer__menus {
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: calc(var(--r-section-gap) * 0.85);
}

.r-footer__dropdown-label {
  white-space: nowrap;
}

.r-footer__dropdown-trigger {
  gap: calc(var(--r-section-gap) * 0.375);
  box-shadow: none;
  font-size: 13px;
  letter-spacing: 0.01em;
}

/* Keep the wrapper as the positioning anchor only. A resting isolation
 * context traps the open panel below promoted page surfaces. */
.r-footer__dropdown {
  position: relative;
}

/* Lift the panel to the skip layer so the menus are never clipped by
 * page surfaces that promote themselves to z-index var(--r-z-nav). */
.r-footer__dropdown-panel {
  z-index: var(--r-z-skip);
  box-shadow: none;
}

.r-footer__dropdown[data-r-v2-dropdown-open="true"] {
  z-index: var(--r-z-skip);
}

.r-footer__dropdown[data-r-v2-dropdown-open="true"] .r-footer__dropdown-panel {
  z-index: calc(var(--r-z-skip) + 1);
}

/* When any dropdown is open, raise the footer above all neighbouring
 * chrome so the panel can extend upward into the page area. */
.r-footer--v2:has(.r-footer__dropdown-panel:not([hidden])) {
  z-index: var(--r-z-skip);
}

.r-footer--v2:has(.r-footer__dropdown[aria-expanded="true"]),
.r-footer--v2:has([data-r-v2-dropdown-trigger][aria-expanded="true"]) {
  z-index: var(--r-z-skip);
}

.r-footer.r-footer--v2[data-r-v2-dropdown-open="true"] {
  z-index: var(--r-z-skip);
}

/* Tablet — keep the bar inline but tighten gaps. */
@media (max-width: 1024px) {
  .r-footer__bar {
    display: flex;
    grid-template-columns: none;
    align-items: center;
    justify-content: center;
    justify-items: initial;
    flex-wrap: nowrap;
    gap: calc(var(--r-section-gap) / 5);
    padding-block: calc(var(--r-section-gap) / 4);
    padding-inline: calc(var(--r-gutter-sm) / 2);
  }

  .r-footer__bar-left,
  .r-footer__bar-right {
    flex: 0 1 auto;
    justify-self: initial;
    flex-wrap: nowrap;
    justify-content: center;
    min-width: 0;
    gap: calc(var(--r-section-gap) / 5);
  }

  .r-footer__menus {
    min-width: 0;
    flex: 0 1 auto;
    flex-wrap: nowrap;
    justify-content: center;
    gap: calc(var(--r-section-gap) / 5);
  }

  .r-footer__dropdown-label {
    white-space: nowrap;
  }

  .r-footer__copyright,
  .r-footer__quick-actions {
    display: none;
  }

  .r-footer__dropdown--space {
    display: block;
  }

  .r-footer__dropdown-trigger {
    min-height: calc(var(--r-section-gap) * 1.75);
    padding-inline: calc(var(--r-section-gap) / 4);
    font-size: 11px;
    letter-spacing: 0;
  }
}

/* Mobile — keep the legal/action/language/account controls on one row. */
@media (max-width: 768px) {
  .r-footer__launch {
    flex-wrap: wrap;
    row-gap: calc(var(--r-section-gap) / 2);
  }

  .r-footer__bar {
    display: flex;
    grid-template-columns: none;
    align-items: center;
    justify-content: center;
    justify-items: initial;
    flex-wrap: nowrap;
    gap: calc(var(--r-section-gap) / 6);
    padding-block: calc(var(--r-section-gap) / 4);
    padding-inline: calc(var(--r-gutter-sm) / 2);
  }

  .r-footer__bar-left,
  .r-footer__bar-right {
    flex: 0 1 auto;
    justify-self: initial;
    flex-wrap: nowrap;
    justify-content: center;
    min-width: 0;
    gap: calc(var(--r-section-gap) / 6);
  }

  .r-footer__menus {
    min-width: 0;
    flex-wrap: nowrap;
    justify-content: center;
    gap: calc(var(--r-section-gap) / 6);
  }

  .r-footer__copyright,
  .r-footer__quick-actions {
    display: none;
  }

  .r-footer__dropdown-trigger {
    min-height: calc(var(--r-section-gap) * 1.5);
    padding-inline: calc(var(--r-section-gap) / 5);
    font-size: 11px;
    letter-spacing: 0;
  }

  /* Footer mobile dropdown viewport contract (#1132). */
  .r-footer__dropdown-panel {
    left: 0;
    right: auto;
    width: 100vw;
    min-width: 100vw;
    max-width: 100vw;
    height: auto;
    max-height: none;
    overflow-y: visible;
    transform: none;
  }
}