/* 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));
  }
}

/* ── Two-column countries panel from 1024px ──────────────────────────────
   UI-NET-26: the selector carries 26 destinations. In one 19rem column the
   panel content is 1492px tall against a viewport-capped client height of
   ~762px — 1.96 screens of scrolling, i.e. the second half of the network
   (and Portugal, the last entry) is only reachable after a full extra screen.

   Measured on the CH header, at the narrowest desktop width the nav switches
   on (1024px), the right-anchored panel's right edge sits at x=887.8. A
   two-column panel of 38rem (608px) therefore starts at x=279.8, while the
   header logo ends at x=182.0 and the current-portal badge at x=226.8 — a
   53px clearance to the nearest header element and 279.8px to the viewport's
   left edge. So 1024px is the lowest safe breakpoint on this portal and the
   Berlin 1120px value is not needed here.

   Source order is unchanged: the grid fills row by row, so DOM order, reading
   order and tab order stay canonical. */
@media (min-width: 1024px) {
  .sitenav__links .bh-network-nav .ndrop__panel {
    width: 38rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 .25rem;
    align-content: start;
  }
  /* The "Länder" group heading spans both columns and stays pinned while the
     panel scrolls, so the list keeps its label at every scroll position. */
  .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);
  }
}