/**
 * The footer's language and currency MENUS, styled to match the Next.js site exactly (2026-09-18).
 *
 * Ported rule for rule from site/src/components/layout/Footer.tsx's <style> block (.sf-menus / .sf-menu /
 * .sf-menu-btn / .sf-menu-list / .sf-menu-item / .sf-menu-caret). Markup comes from sf_currency_switcher() in
 * mu-plugins/sf-currency.php — if the site's footer menus change, change both in the same pass.
 *
 * A sibling of header-parity.css rather than part of it: the header renders on four templates, while the FOOTER
 * renders on every page, so this file is enqueued unconditionally and carries no header tokens.
 *
 * Two deliberate differences from the site's copy, both forced by the shop:
 *  - `var(--ink)` is written out as #1a1a1a. That is what --ink resolves to, and it is exactly the colour
 *    #sf-footer already paints (footer-shop.php), so the open list sits flush on the footer in both themes.
 *  - `color` and `text-decoration` carry !important. The theme styles footer links globally; the old pill
 *    switcher needed the same escape hatch.
 */
.sf-menus { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sf-menu { position: relative; flex-shrink: 0; }
.sf-menu > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace; font-size: 10px; letter-spacing: .08em;
  text-transform: uppercase; padding: 6px 12px; border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 6px; opacity: 0.78; color: inherit !important;
}
.sf-menu > summary::-webkit-details-marker { display: none; }
.sf-menu > summary::marker { content: ''; }
.sf-menu > summary:hover, .sf-menu[open] > summary { opacity: 1; border-color: rgba(255, 255, 255, 0.5); }
.sf-menu[open] .sf-menu-caret { transform: rotate(180deg); }
.sf-menu-caret { transition: transform .15s; }

/* Scrolls, so the menu stays the same size whether there are 3 languages or 20. z-index sits just above the
   cookie banner: on a phone the open list would otherwise disappear behind it, and choosing a language must
   not depend on answering the banner first. */
.sf-menu-list {
  position: absolute; bottom: calc(100% + 8px); left: 0; z-index: 9992; min-width: 100%;
  display: flex; flex-direction: column; padding: 6px; gap: 2px; background: #1a1a1a;
  border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 8px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  max-height: min(320px, 55vh); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
}
.sf-menu-item {
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace; font-size: 10px; letter-spacing: .08em;
  text-transform: uppercase; white-space: nowrap; padding: 7px 12px; border-radius: 5px;
  color: inherit !important; text-decoration: none !important; opacity: 0.75;
}
.sf-menu-item:hover { background: rgba(255, 255, 255, 0.1); opacity: 1; }
.sf-menu-item[aria-current] { opacity: 1; box-shadow: inset 2px 0 0 #a0153a; }
html[data-theme='dark'] .sf-menu-item[aria-current] { box-shadow: inset 2px 0 0 #ef7093; }
@media (prefers-reduced-motion: reduce) { .sf-menu-caret { transition: none; } }

/**
 * Two inherited values had to be pinned, or the shop's rows came out 11px taller than the site's and in the
 * wrong face: #sf-footer (an id) sets its own family, the footer inherits a 24px line-height, and on shop
 * pages product-page.css carries `body.woocommerce-shop * { font-family: … !important }` — a universal
 * !important rule that no specificity can beat, hence the !important here. Result matches the site's measured
 * geometry: button 27px tall, a three-entry list 99px.
 *
 * ⚠️ The same universal rule also silently overrides the CE/RoHS/RED badges next to these menus (.sf-cert
 * declares the mono face without !important), so they render in Inter Tight on shop pages while the site
 * renders them in mono. Fixed here too, since it is the same footer bar.
 */
#sf-footer .sf-menu > summary,
#sf-footer .sf-menu-item,
#sf-footer .sf-cert {
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace !important;
  line-height: normal;
}