/* MS Digital Asset Academy — bitcoinhyper.fr
 * Current-portal badge: non-interactive national marker for the FR portal.
 * Not a selector, not a link, not focusable.
 * The file also carries the viewport-safe overrides for the network selector
 * (right-anchored dropdown, two-column desktop panel, desktop and mobile
 * scroll containment) for the 26-portal network.
 */

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

/* ── UI-NET-26 · two-column desktop country panel ─────────────────────────
   With 26 destinations a single 19rem column is ~1300px tall, so on every
   desktop height the list is mostly behind the internal scroll. The 26
   anchors are wrapped in `.bh-network-grid`; that wrapper is a plain block
   (i.e. the BASE single-column layout) everywhere except the breakpoint
   below, where it becomes two equal columns and the panel is widened to
   match. The panel stays right-anchored, so the extra width grows leftwards
   and never reaches past the right edge of the viewport. Order, labels,
   links, `lang`, `aria-current` and hover behaviour are unchanged; the
   canonical sequence simply reads down column 1 then down column 2.
   Breakpoint measured on FR at 1920/1600/1440/1366/1280/1200/1120/1119/1024
   (the widths below 1024 are the hamburger layout, so 1024 is the desktop
   floor): at 1024 the 38rem panel still opens at x=304 with the logo ending
   at x=182, no viewport clipping and no title wrapping, so the two-column
   layout is applied across the whole desktop range. */
@media (min-width: 1024px) {
  .sitenav__links .bh-network-nav .ndrop__panel {
    width: 38rem;
  }
  .sitenav__links .bh-network-nav .bh-network-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: start;
    column-gap: .25rem;
  }
}

/* ── UI-NET-26 R2 · 1024–1099px vertical containment ──────────────────────
   The general >=1024px rule above caps the panel at `100vh - 8.5rem`. In the
   tightest desktop band the header stack above the panel is taller than that
   reserve allows: measured at 1024x768 the panel opens at y=144.25 with a
   632px cap, so it ends at 776.25 and overshoots the viewport by 8.25px.
   Reserve 9.25rem instead (620px at 768px tall), which keeps the naturally
   opened panel inside the viewport and leaves the internal scroll to handle
   the rest. Only the cap changes — width, columns, right anchoring,
   transforms and overflow are inherited from the general rule unchanged.
   This block must stay AFTER that rule: the two selectors have equal
   specificity, so source order is what makes the narrower cap win. */
@media (min-width: 1024px) and (max-width: 1099px) {
  .sitenav__links .bh-network-nav .ndrop__panel {
    max-height: max(12rem, calc(100vh - 9.25rem));
    max-height: max(12rem, calc(100dvh - 9.25rem));
  }
}