/**
 * Per-section footer styles — shipped as standalone CSS (not in the gulp
 * SCSS bundle yet) so the layout changes for the new section footers don't
 * require an SCSS rebuild. Same pattern as area-switcher.css and the
 * block-* stylesheets.
 *
 * Scope: only the new structures introduced by the footer reshuffle —
 *   - `.site-footer--root`       : the Hub two-company grid layout
 *   - `.site-footer__social`     : the in-column social icons (moved here
 *                                  from the old below-the-row position)
 * The existing `.site-footer__*` BEM rules in src-assets/sass-global
 * /layout/_footer.scss continue to handle the shared shell (background,
 * padding, copyright bar, link styles).
 */


/* ---- shared: in-column social icons --------------------------------- */
/* The section footers now render the social-icons block inside the first
 * column (with the company info). Add a small top margin so it isn't
 * crammed against the licenses list above. The icon list itself reuses
 * the global `.social-icons` rules in _footer.scss. */
.site-footer__social {
  margin-top: 32px;
}


/* ============================================================================
 * ROOT FOOTER — two-company grid
 * ============================================================================ */

.site-footer--root .root-footer {
  /* mobile-first: a single column. Source order in the partial already
   * matches the desired mobile order:
   *   logo, crypto address+licenses, europe address+licenses, social, menus
   * No grid magic needed; default block flow does the job. */
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.site-footer--root .root-footer__logo {
  max-width: 200px;
}

.site-footer--root .root-footer__menus {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* Drop the per-menu-block top margin that .site-footer__links applies
 * — inside the menus column we control spacing via the gap above. */
.site-footer--root .root-footer__menu-block {
  margin-top: 0;
}


/* ---- desktop: 3 columns, named grid areas ---------------------------- */
/* The grid places elements explicitly via grid-area, so the source order
 * (= mobile order) is decoupled from the visual position. The two
 * address blocks share a row → they line up horizontally regardless of
 * how many lines each address has. Same for the two licenses blocks.
 *
 * Column sizing: `auto auto 1fr` — the two company columns shrink to
 * their content (so the gap between Crypto and Europe is just the
 * 48px column-gap, not 1/3 of the container as `1fr 1fr 1fr` produced).
 * The menus column takes all remaining space; `justify-self: end` on
 * `.root-footer__menus` then pulls the menus block to the right edge
 * while keeping its text left-aligned. */
@media (min-width: 768px) {
  .site-footer--root .root-footer {
    display: grid;
    grid-template-columns: auto auto 1fr;
    grid-template-rows: auto auto auto auto;
    grid-template-areas:
      "logo    .         menus"
      "addr-c  addr-e    menus"
      "lic-c   lic-e     menus"
      "social  social    menus";
    /* 8rem column-gap matches the spacing requested between the two
     * company columns. Per-feedback-batch design tweak. */
    column-gap: 8rem;
    row-gap: 24px;
  }

  .site-footer--root .root-footer__logo                 { grid-area: logo; }
  .site-footer--root .root-footer__address--crypto      { grid-area: addr-c; }
  .site-footer--root .root-footer__address--europe      { grid-area: addr-e; }
  .site-footer--root .root-footer__licenses--crypto     { grid-area: lic-c; }
  .site-footer--root .root-footer__licenses--europe     { grid-area: lic-e; }
  .site-footer--root .root-footer__social-wrap          { grid-area: social; }
  .site-footer--root .root-footer__menus {
    grid-area: menus;
    justify-self: end;
  }
}


/* ============================================================================
 * SECTION FOOTERS (crypto / europe) — menu layout
 * ============================================================================ */
/* The section footers split into two top-level columns: a left column
 * with the company info, and a right `.site-footer__menus` column that
 * contains a Bootstrap d-flex of two menu sub-columns:
 *   col 1: Company menu
 *   col 2: Explore the markets   ↳ stacked vertically (one column)
 *          Legal
 * The d-flex utility handles row vs column direction across breakpoints
 * via Bootstrap's flex-lg-row / justify-content-lg-end. We just need
 * inner spacing for the stacked menu blocks. */

.site-footer__menu-col {
  /* Vertical stacking of two menu blocks (Explore + Legal) in the same
   * column. The first child's top margin is reset because the heading
   * already provides its own spacing; the second child gets a top margin
   * so Legal sits cleanly under Explore. */
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* Horizontal spacing between the Company menu column and the Explore +
 * Legal column on the section footers (/crypto and /europe). Override
 * Bootstrap's `gap-lg-5` (3rem) with 8rem so the visual gap matches the
 * spacing between the two company columns on the root footer. */
@media (min-width: 992px) {
  .site-footer__menus-inner.gap-lg-5 {
    gap: 8rem !important;
  }
}

/* The .site-footer__links rule in _footer.scss applies `margin-top: 8px`
 * to every links block — fine when each block is its own grid cell, but
 * inside a stacked column we control spacing via `gap` above, so kill
 * the top margin. */
.site-footer__menu-col .site-footer__links {
  margin-top: 0;
}