/**
 * Area switcher — a small dropdown that sits in a top row above the
 * primary nav in the Crypto and Europe section headers.
 *
 * Visually: a thin dark bar spanning the header's full width; on the
 * right inside the .container, a button shows the current area's label
 * with a chevron. Clicking opens a dropdown menu with the other area(s);
 * selecting one navigates to that area's landing page.
 *
 * Design is intentionally minimal — placeholder until the proper visual
 * design lands.
 */

/* ---- top bar host ------------------------------------------------------ */

.site-header__top {
  background: #0E1A2E;                        /* Rulematch dark blue */
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 8px 0;
}

.site-header__top > .container {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

/* ---- switcher container ------------------------------------------------ */

.area-switcher {
  position: relative;
}

/* ---- "current" button -------------------------------------------------- */

.area-switcher__current {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #ffffff;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.25;
  cursor: pointer;
}

.area-switcher__current:hover,
.area-switcher__current:focus-visible {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.5);
  outline: none;
}

.area-switcher__chevron {
  display: inline-flex;
  transition: transform 0.18s ease;
}

.area-switcher__current[aria-expanded="true"] .area-switcher__chevron {
  transform: rotate(180deg);
}

/* ---- dropdown menu ----------------------------------------------------- */

.area-switcher__menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  margin: 0;
  padding: 4px 0;
  list-style: none;
  min-width: 240px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
  z-index: 100;
}

.area-switcher__item {
  display: block;
  padding: 10px 14px;
  color: #0E1A2E;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  line-height: 1.25;
}

.area-switcher__item:hover,
.area-switcher__item:focus-visible {
  background: rgba(66, 119, 204, 0.10);
  color: #0E1A2E;
  outline: none;
}