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

/* Countries panel — two columns on desktop (UI-NET-26).
   With 26 portals a single 19rem column is ~1470px tall, so the list always
   scrolls and the last entries sit far below the fold. Two columns halve the
   height and bring the whole network into view at ordinary desktop sizes.
   The panel is laid out as a grid: the anchors are the grid items and the
   group label spans the full width. DOM order is unchanged — the grid flows
   row by row, so the canonical order still reads left-to-right, top-down.
   `auto-fit` + `minmax` is the fallback: if the panel is ever clamped by
   `max-width` (very narrow desktop viewport, large root font-size) the track
   count drops to one on its own, with no second breakpoint to maintain.
   The viewport-safe max-height, the internal scroll and the right anchoring
   above are unchanged and still apply. Measured safe from 1024px up, which is
   also the width at which the desktop navigation itself appears. */
@media (min-width: 1024px) {
  .sitenav__links .bh-network-nav .ndrop__panel {
    width: 37rem;
    max-width: calc(100vw - 2rem);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    align-content: start;
    column-gap: .25rem;
    /* The baseline viewport-safe cap above subtracts 8.5rem, which assumes the
       panel opens at most 136px below the top of the viewport. Measured, the
       CNMV banner wraps to two lines under 1200px and to three at 1024px, so
       the panel actually starts at 118.6px and 144.3px there. With five
       destinations the panel never reached the cap and the discrepancy was
       invisible; with 26 it does, and the last row fell ~8px below the fold at
       1024x900. Subtract 10rem instead: 160px clears the worst measured start
       and still leaves the panel scrolling its own overflow. */
    max-height: max(12rem, calc(100vh - 10rem));
    max-height: max(12rem, calc(100dvh - 10rem));
  }
  /* 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`, 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));
  }
}