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

/* Viewport-safe panel height below 1366px.
   The rule above caps the panel at `100dvh - 8.5rem` (136px), a figure tuned
   when the CNMV banner still fitted on one line and the panel opened ~119px
   below the top of the viewport. Measured here, that banner wraps as the
   viewport narrows and pushes the open panel down: its top is 84.6px at
   >=1366px, 112.6px at 1200-1280px, 138.3px at 1119-1120px and 162.3px at
   1024px (page not scrolled, worst case, identical on every full-nav page).
   With 7 entries the list never reached the cap, so the panel ended well
   above the fold; with 26 it does, and below 1366px the capped panel ran past
   the bottom of the viewport — at 1024x900 it ended at y=926 and Portugal was
   unreachable until the page was scrolled. Subtract the measured worst-case
   top for this band instead, plus a bottom gap: 11.25rem (180px) leaves
   17.7px below the panel at 1024px and more at every wider width in the band.
   Above 1366px the original cap is already correct and is left untouched. */
@media (min-width: 1024px) and (max-width: 1365px) {
  .sitenav__links .bh-network-nav .ndrop__panel {
    max-height: max(12rem, calc(100vh - 11.25rem));
    max-height: max(12rem, calc(100dvh - 11.25rem));
  }
}

/* Two-column countries panel from 1024px.
   At 26 entries a single 19rem column is ~1470px of content inside a panel
   capped near 764px on a 900px-tall window — about two screens of scrolling.
   Measured on this portal at the narrowest desktop width (1024px, the width at
   which the single-row nav replaces the hamburger): the countries trigger ends
   at x=881.9, so a 38rem (608px) panel right-anchored to that trigger opens at
   x=273.9 — 273.9px of clearance from the left edge of the viewport, 30.4px
   from the left edge of .sitenav__links and 38.4px from the right edge of the
   current-portal badge, while occupying 59.4% of the viewport width. The panel
   sits entirely below the nav bar, so it cannot overlap the logo or the badge
   vertically. 1024px is therefore the lowest breakpoint that is demonstrably
   safe here and the two columns apply across the whole desktop range.
   Source order is unchanged, so DOM, reading and tab order stay canonical:
   the grid fills row by row. */
@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;
  }
  /* 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);
  }
}