/* MS Digital Asset Academy — bitcoinhyper.li
 * Current-portal badge: non-interactive national marker for the LI portal.
 * Not a selector, not a link, not focusable. The network selector is unchanged.
 * The file also carries the viewport-safe overrides for the network selector
 * (right-anchored dropdown, desktop and mobile scroll containment) already
 * validated for PL: those rules are unchanged.
 */

.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; }
}

/* The countries dropdown is the last item of the row and its 19rem panel is
   centred on its trigger, so on narrow desktops it reaches past the right edge
   of the viewport and creates horizontal scroll. Anchor that single panel to
   the right of its own trigger. Contents, order, labels and links of the
   network selector are unchanged. */
@media (min-width: 1024px) {
  .sitenav__links .bh-network-nav .ndrop__panel {
    left: auto;
    right: 0;
    transform: translateX(0) translateY(-6px);
    /* Viewport-safe height: the panel opens ~119px below the top of the
       viewport in the worst case (CNMV banner visible, page not scrolled),
       so cap it at the space actually left below that point and scroll the
       overflow instead of letting the last country fall off-screen. The
       floor keeps the panel usable on very short windows. Width, typography,
       hover, links, order and overlay are unchanged. */
    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);
  }
}

/* Mobile menu — viewport-safe scrolling.
   The baseline opens the panel with a fixed `max-height: 28rem` and
   `overflow: hidden`, so with 18 national portals the lower part of the list
   (and the last country) is clipped and 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.
   The closed state keeps `max-height: 0` + `overflow: hidden`, so the collapse
   animation is unchanged. */
@media (max-width: 1023px) {
  .nav-mobile--open {
    /* Worst case the panel starts ~201px down (wrapped CNMV banner + nav bar
       on a narrow screen); subtract that plus a bottom gap. */
    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.
   The baseline bridge is `.ndrop__panel::before`, drawn inside the panel and
   reaching up into the .875rem gap between trigger and panel. It works for
   every other dropdown, but the countries panel is a scroll container
   (`overflow-y: auto`, set above), which clips that pseudo-element: crossing
   the gap drops :hover and closes the menu before the pointer arrives.
   Replace it with a bridge owned by the dropdown container, which is not
   clipped. 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: 19rem;
    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;
  }
}

/* Two-column countries panel from 1120px.
   At 26 entries one 19rem column is ~1473px of content inside a panel capped
   near 764px — about two screens of scrolling, against ~1.2 at the previous
   8 entries. Measured on this portal, a 38rem panel is right-anchored to its
   own trigger and needs 608px of the 713px available between the left edge of
   .sitenav__links and that trigger at 1120px: a full column-gutter of lateral
   tolerance, and the whole list then fits in roughly one screen. The panel
   still clears the viewport at 1024px (652px available, 44px of tolerance),
   but that is under one gutter and 59% of the viewport width, so 1024–1119px
   keeps the single column. Source order is unchanged, so DOM, reading and tab
   order stay canonical: the grid fills row by row. */
@media (min-width: 1120px) {
  .sitenav__links .bh-network-nav .ndrop__panel {
    width: 38rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 .25rem;
    align-content: start;
  }
  /* Group heading spans both columns and stays put while scrolling. */
  .sitenav__links .bh-network-nav .ndrop__panel > div:first-child {
    grid-column: 1 / -1;
    position: sticky;
    top: -.5rem;
    z-index: 1;
    background: var(--ink-2, #111119);
  }
  .sitenav__links .bh-network-nav::after { width: 38rem; }
}