/**
 * Site-footer surface — block-specific styling for the Drupal-rendered
 * descendants of `.page-footer`. The SDC's outer layout (3 columns,
 * stacked privacy + copyright bands) is on site-footer.twig as inline
 * Tailwind utilities; this file styles the blocks that Drupal injects
 * into the regions (block titles, link hover-slide, language switcher
 * dropdown, social icons, EU funding strip, copyright menu).
 */

.page-footer {
  a {
    color: var(--color-white);
  }

  /* Block titles — brand-blue, regular case. */
  .block-title {
    margin: 0 0 1rem;
    color: var(--color-brand);
    font-weight: 500;
    font-size: 1rem;

    @media (max-width: 37.5rem) {
      margin: 15px 0 20px;
    }
  }

  .menu li,
  .views-row {
    margin: 10px 0;
  }

  /* Link hover-slide: 3px brand-blue indicator slides in from the left
     while the link nudges right. Excludes social icons (they have their
     own SVG-based hover). */
  a:not(.social-icon) {
    display: inline-block;
    position: relative;
    margin-bottom: 0;
    padding-right: 12px;
    padding-left: 0;
    color: var(--color-text-muted);
    font-weight: 300;
    font-size: 0.857rem;
    line-height: 1.286rem;
    letter-spacing: 0.0143em;
    transition: all 0.3s ease-in-out;

    &:before {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      z-index: -1;
      width: 3px;
      background: var(--color-brand);
      content: "";
      opacity: 0;
      transition: all 0.3s ease-in-out;
    }

    &:hover {
      padding-right: 0;
      padding-left: 12px;
      color: var(--color-slate-900);

      &:before {
        z-index: 10;
        opacity: 1;
      }
    }
  }

  /* Tag pills (used by payment-methods / currencies-supported blocks). */
  p .tag {
    display: inline-block;
    margin: 0 5px 10px 0;
    padding: 5px 8px;
    border-radius: 5px;
    background: var(--color-white);
    color: var(--color-text-muted);
    font-weight: 300;
    font-size: 0.857rem;
    line-height: 1.286rem;
    letter-spacing: 0.0071em;
  }

  /* Copyright menu + social icons + language switcher all live inside the
     .footer-privacy band per the Drupal block placement; .footer-copyright
     carries only the "© all rights reserved" text block. Scoping these to
     `.page-footer` (not the specific band) so they match wherever admin
     places them. */
  :is(#block-copyrightfooter, .block-copyrightfooter) .menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0;

    li {
      margin-right: 15px;
    }

    a {
      color: var(--color-slate-800);
      font-weight: 500;
    }
  }

  :is(#block-socialicons, .block-socialicons) {
    @media (min-width: 48rem) {
      margin-left: auto;
    }

    .field {
      margin: 0;
    }

    .field--name-field-icons .field--items {
      display: flex;
      justify-content: center;

      > .field--item {
        width: 20px;
        height: 20px;
        margin-right: 20px;

        &:last-child {
          margin-right: 0;
        }
      }

      a {
        display: block;
        width: 20px;
        height: 20px;
        padding: 0;

        &:hover {
          padding-left: 0;

          &:after,
          &:before {
            display: none;
          }
        }
      }

      /* The icons ship as 60×60 .svgs with explicit HTML width/height —
         force-constrain them to the 20×20 container so the social row
         stays compact regardless of source asset size. */
      img {
        width: 20px;
        height: 20px;
        object-fit: contain;
      }
    }
  }

  p {
    margin: 0;
    color: var(--color-slate-500);
    font-weight: 300;
    font-size: 0.857rem;
    line-height: 1.286rem;
    letter-spacing: 0.0071em;
  }
}

/* Payment / currency blocks — header + tag row inline at md+. */
@media (min-width: 48rem) {
  :is(#block-paymentmethods, .block-paymentmethods) .col,
  :is(#block-currenciessupported, .block-currenciessupported) .col {
    display: flex;
    flex: 100%;
    align-items: center;
    max-width: 100%;
  }
  :is(#block-paymentmethods, .block-paymentmethods) h2,
  :is(#block-currenciessupported, .block-currenciessupported) h2 {
    margin: 16px 30px 16px 0;
  }
  :is(#block-paymentmethods, .block-paymentmethods) .tag,
  :is(#block-currenciessupported, .block-currenciessupported) .tag {
    margin-bottom: 0;
  }
}

/* EU funding strip. The block is placed in the `gallery` region (above
   the footer SDC), not inside `.page-footer` — so no ancestor scope.
   `:is(#id, .class)` gets ID-level specificity (1,3,1) which beats the
   unlayered, unscoped `body-content-shim.css` `.bg .image-wrapper img`
   width: 50px rule (0,2,1). Aligned left to line up with the footer
   block links below, not centred. */
:is(#block-menutecheufooter, .block-menutecheufooter) {
  background-color: var(--color-gray-50);

  .field {
    /* Match the footer SDC's `max-w-screen-xl mx-auto px-4` container so the
       EU strip's content aligns with the footer block links below. */
    max-width: 80rem;
    margin: 0 auto;
    padding: 0 1rem;

    .bg {
      display: flex;
      flex-wrap: wrap;
      gap: 10px 0;
      /* Override the unscoped `body-content-shim.css` rules that squeeze
         (`max-width: 50%`) and over-pad (`padding: 7px 5px`) the strip. */
      max-width: none;
      padding: 16px 0;

      @media (min-width: 40rem) {
        flex-wrap: nowrap;
      }

      .image-wrapper {
        width: 100%;
        margin-right: 20px;
        text-align: center;

        img {
          display: inline-block;
          width: 75px;
        }

        @media (min-width: 40rem) {
          width: auto;
          text-align: left;
        }
      }

      .text-wrapper {
        width: 100%;
        color: var(--color-text-muted);
        font-size: 0.857rem;
        text-align: center;

        @media (min-width: 40rem) {
          width: auto;
          text-align: left;
        }
      }
    }
  }
}

/* Privacy band — the Drupal-emitted .region-privacy is the flex container
   that lays out copyright-footer + language-switcher + social-icons in
   a row at md+. Same pattern for the copyright band's .region-copy
   (only "© all rights reserved" lives there, but the flex centring
   keeps it aligned with everything else). */
.page-footer .footer-privacy .region-privacy,
.page-footer .footer-copyright .region-copy {
  display: flex;
  flex-direction: column;
  align-items: center;

  @media (min-width: 48rem) {
    flex-direction: row;
  }
}

/* Privacy band — language switcher. A `<button popovertarget>` opens the
   `<ul popover="auto">` in the browser's top layer with native light-dismiss
   (outside click + Esc), keyboard navigation, and accessibility. The trigger
   sits inline in the privacy band's flex row; the popover overlays above. */
.page-footer .footer-privacy :is(#block-languageswitcher, .block-languageswitcher) {
  margin: 20px 30px;
  /* Match the footer block link sizing. */
  font-size: 0.857rem;
  line-height: 1.286rem;

  .lang-switcher__trigger {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-slate-800);
    font-weight: 500;
    font-size: inherit;
    line-height: inherit;
    cursor: pointer;
    anchor-name: --lang-switcher;
  }

  /* Globe icon (Material) before the current language label. */
  .lang-switcher__current::before {
    display: inline-block;
    margin-right: 5px;
    content: "\e894";
    font-family: var(--font-icon);
    font-size: 18px;
    line-height: 0;
    vertical-align: -4px;
  }

  /* Down-caret after the label; rotates when the popover is open. */
  .lang-switcher__caret::before {
    display: inline-block;
    content: "\e5cf";
    font-family: var(--font-icon);
    font-size: 19px;
    line-height: 0;
    vertical-align: -4px;
    transition: transform 0.2s linear;
  }

  .lang-switcher__trigger:has(+ [popover]:popover-open) .lang-switcher__caret::before {
    transform: rotate(180deg);
  }

  /* The popover itself — anchored to the trigger, opening upward. */
  .lang-switcher__menu[popover] {
    margin: 0;
    padding: 10px 0;
    border: 0;
    background: #efefef;
    box-shadow: 0 6px 5.7px 0.3px rgba(140, 143, 144, 0.5);
    list-style: none;
    font-size: 0.857rem;
    line-height: 1.286rem;
    /* Anchor to the trigger button via CSS anchor positioning; fallback to
       a sensible default for browsers without anchor-positioning support. */
    position-anchor: --lang-switcher;
    inset: auto;
    bottom: anchor(top);
    left: anchor(center);
    translate: -50% 0;
  }

  .lang-switcher__menu[popover] li {
    position: relative;
    margin: 0;
    padding: 10px 50px;
    text-align: center;
    white-space: nowrap;

    /* Left-edge brand-blue indicator on hover — replaces the inline-slide
       indicator inherited from `.page-footer a:not(.social-icon)::before`. */
    &::before {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      width: 3px;
      background: var(--color-brand);
      content: "";
      opacity: 0;
      transition: opacity 0.2s ease-in-out;
    }

    &:hover::before {
      opacity: 1;
    }
  }

  /* Disable the inherited `.page-footer a:not(.social-icon)` hover-slide
     (left-padding shift + own ::before bar) inside the popover; the li
     handles the indicator instead. */
  .lang-switcher__menu[popover] a {
    padding: 0;
    color: var(--color-slate-800);
    font-weight: 500;

    &::before {
      display: none;
    }

    &:hover {
      padding: 0;
    }
  }

  .lang-switcher__menu[popover] li.is-active a {
    color: var(--color-brand);
  }
}

/* Intentionally unlayered — see site-header.css mega-menu block: when
   the SDC's CSS targets Drupal-rendered descendants that aren't carrying
   our utility classes, unlayered wins over base/components reliably. */