/* MS Digital Asset Academy — bitcoinhyper.eu
 * Current-portal badge: non-interactive portal marker for the EU portal.
 * Not a selector, not a link, not focusable. The network selector is unchanged.
 * Visual model carried over unchanged from the closed LI portal; this file
 * carries the badge only and introduces no network-selector styling.
 */

.current-portal-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .14rem;
  flex: 0 0 auto;
  line-height: 1;
  -webkit-user-select: none;
  user-select: none;
}

.current-portal-badge__flag {
  display: block;
  width: 27px;
  height: auto;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(247, 244, 236, .22);
}

.current-portal-badge__label {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .015em;
  color: rgba(247, 244, 236, .74);
  white-space: nowrap;
}

/* Tablet / mobile — hamburger layout below 1024px */
@media (max-width: 1023px) {
  .current-portal-badge__flag { width: 24px; }
  .current-portal-badge__label { font-size: 9.5px; }
}

/* Desktop 1024–1399px — the single-row nav is tight at these widths, so the
   badge is paid for by shrinking the flag, the label and the row spacing only.
   No structural change to the header. */
@media (min-width: 1024px) and (max-width: 1399px) {
  .sitenav__bar { gap: .5rem; }
  .current-portal-badge { gap: .1rem; }
  .current-portal-badge__flag { width: 22px; }
  .current-portal-badge__label { font-size: 9px; letter-spacing: 0; }
  .sitenav__links { gap: 0; }
  .sitenav__links .nlink { padding: .4rem .3rem; font-size: .76rem; letter-spacing: -.01em; }
  .sitenav__links .nlink--active::after { left: .3rem; right: .3rem; }
  .sitenav__actions .nav-btn-cta { padding: .38rem .55rem; font-size: .74rem; gap: .28rem; }
}

/* 1024–1099px is the tightest single-row case (the desktop menu has just
   switched on). Only the nav-item padding is reduced further; the label stays
   at 9px for legibility. */
@media (min-width: 1024px) and (max-width: 1099px) {
  .sitenav__links .nlink { padding: .4rem .2rem; }
  .sitenav__links .nlink--active::after { left: .2rem; right: .2rem; }
}

/* Narrow phones — moderate reduction of flag, type and spacing only */
@media (max-width: 430px) {
  .sitenav__bar { gap: .5rem; }
  .current-portal-badge__flag { width: 21px; }
  .current-portal-badge__label { font-size: 9px; letter-spacing: 0; }
}

@media (max-width: 380px) {
  .sitenav__inner { padding: 0 1rem; }
  .sitenav__bar { gap: .4rem; }
  .sitenav__actions { gap: .35rem; }
  .sitenav__actions .nav-btn-cta { padding: .32rem .5rem; font-size: .72rem; gap: .25rem; }
}

/* ── Countries selector — 26-portal network (UI-NET-26) ─────────────────────
   Everything below styles the international selector only. Contents, order,
   labels, links and the badge above are unchanged.

   The countries dropdown is the last item of the desktop row and its 19rem
   panel is centred on its own trigger, so a wider panel would reach past the
   right edge of the viewport and create horizontal scroll. Anchor that single
   panel to the right of its trigger and cap its height at the space actually
   available below it. Measured on this portal the panel opens 90.6px below the
   top of the viewport in the worst case (CNMV banner visible, page not
   scrolled), so 8.5rem leaves ~45px of clearance at the bottom at every
   measured width; the floor keeps the panel usable on very short windows. */
@media (min-width: 1024px) {
  .sitenav__links .bh-network-nav .ndrop__panel {
    left: auto;
    right: 0;
    transform: translateX(0) translateY(-6px);
    max-height: max(12rem, calc(100vh - 8.5rem));
    max-height: max(12rem, calc(100dvh - 8.5rem));
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .sitenav__links .bh-network-nav:hover .ndrop__panel,
  .sitenav__links .bh-network-nav:focus-within .ndrop__panel,
  .sitenav__links .bh-network-nav.ndrop--open .ndrop__panel {
    transform: translateX(0) translateY(0);
  }
  .sitenav__links .bh-network-nav.ndrop.ndrop--closed .ndrop__panel {
    transform: translateX(0) translateY(-6px);
  }
}

/* Two-column countries panel from 1024px — the width at which this portal's
   desktop navigation itself appears, and therefore the lowest breakpoint the
   selector can use at all. At 26 entries a single 19rem column is ~1650px of
   content inside a panel capped near 764px: two full screens of scrolling.
   Two columns halve that. Measured on this portal at 1024px the trigger's
   right edge sits 651.9px from the left edge of .sitenav__links, so the 38rem
   (608px) panel is anchored with 43.9px to spare, its left edge lands at
   272.7px — clear of the badge (ends at 220.8px) and the logo (ends at 182px)
   — and its right edge never leaves the viewport. A classic 15px scrollbar
   shifts the whole row left by the same amount and keeps that clearance.
   `auto-fit` + `minmax` is the fallback rather than a second breakpoint: if
   the panel is ever clamped by `max-width` (very narrow desktop viewport,
   large root font-size) the track count drops back to one on its own. Source
   order is unchanged, so DOM, reading and tab order stay canonical — the grid
   fills row by row, left to right. */
@media (min-width: 1024px) {
  .sitenav__links .bh-network-nav .ndrop__panel {
    width: 38rem;
    max-width: calc(100vw - 2rem);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    align-content: start;
    column-gap: .25rem;
  }
  /* The group label is the only non-anchor child: keep it on its own row. */
  .sitenav__links .bh-network-nav .ndrop__panel > :not(a) {
    grid-column: 1 / -1;
  }
}

/* Mobile menu — viewport-safe scrolling.
   The baseline opens the panel with a fixed `max-height: 28rem` and
   `overflow: hidden`. That already clipped the five-portal list (823px of
   content at 360px wide against 448px of panel); with 26 portals the lower
   part of the list — Portugal included — is unreachable by swipe. Cap the
   OPEN panel to the height actually available below the nav bar and let the
   whole panel scroll vertically: no nested scroller inside the countries
   grid. Worst case measured here the panel starts 183px down (wrapped CNMV
   banner + nav bar at 360px), so 13.5rem leaves the panel clear of the bottom
   edge. The closed state keeps `max-height: 0` + `overflow: hidden`, so the
   collapse animation is unchanged. */
@media (max-width: 1023px) {
  .nav-mobile--open {
    max-height: max(14rem, calc(100vh - 13.5rem));
    max-height: max(14rem, calc(100dvh - 13.5rem));
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .nav-mobile--open .nav-mobile__inner {
    min-height: 0;
    padding-bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
  }
}

/* Hover bridge for the countries dropdown — required, measured.
   The baseline bridge is `.ndrop__panel::before`, drawn inside the panel and
   reaching up into the 14px gap between trigger and panel. It works for every
   other dropdown, but the countries panel is now a scroll container
   (`overflow-y: auto`, set above) and that clips the pseudo-element. Measured
   A/B at 1440px: crossing the gap in ~480ms keeps the panel open on the
   baseline and closes it on this build, because the pointer leaves the
   component and the 220ms close timer in the navigation script expires
   mid-gap; once closed the panel is `visibility: hidden`, so re-entering it
   cannot reopen it. Replace the clipped bridge with one owned by the dropdown
   container, which is not clipped, and match its geometry to the
   right-anchored two-column panel. It is inert while the menu is closed — the
   same contract the baseline bridge had, where `pointer-events` was inherited
   from the hidden panel. CSS only: no timers, no script, no synthetic clicks. */
@media (min-width: 1024px) {
  .sitenav__links .bh-network-nav .ndrop__panel::before { content: none; }

  .sitenav__links .bh-network-nav::after {
    content: '';
    position: absolute;
    top: 100%;
    right: 0;
    width: 38rem;
    max-width: calc(100vw - 2rem);
    height: calc(.875rem + 1px);
    pointer-events: none;
  }
  .sitenav__links .bh-network-nav:hover::after,
  .sitenav__links .bh-network-nav:focus-within::after,
  .sitenav__links .bh-network-nav.ndrop--open::after {
    pointer-events: auto;
  }
  .sitenav__links .bh-network-nav.ndrop.ndrop--closed::after {
    pointer-events: none;
  }
}

/* Footer country network — mobile <768px: one portal per row, separators
   hidden. The page stylesheet states this as nth-of-type positions, which only
   ever described the five-portal list: with 26 portals the anchors that were
   not pinned no longer start a row and the separators that were not hidden are
   left stranded at the end of one. Restate the same intent once, for every
   anchor and every separator; the page rules resolve to the same values where
   they overlap, so nothing below 380px changes. Structural layout only
   (flex-basis + display): no negative margins, no translateX, no position
   hacks. Loaded after the page stylesheet, so this file is the only place the
   selector's CSS changes. */
@media (max-width: 767px) {
  .bh-network-footer > div > a { flex-basis: 100%; }
  .bh-network-footer > div > span { display: none; }
}