/**
 * ETETA Language Switcher — flag icons
 * Uses inline SVG flags (not emoji) so the icons render as real flag
 * graphics on every OS/browser, including Windows, where flag emoji
 * are not supported and would otherwise fall back to plain text.
 */

.lang-flag {
  display: inline-block;
  width: 20px;
  height: 14px;
  border-radius: 2px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
  vertical-align: middle;
  flex-shrink: 0;
}

.lang-switcher .lang-current-code {
  font-size: 13px;
  letter-spacing: 0.03em;
}

.lang-switcher .lang-option {
  gap: 8px;
}

/* Language menus open only through the explicit trigger click. */
.navmenu .dropdown.lang-switcher:hover > ul {
  top: 130%;
  visibility: hidden !important;
  opacity: 0 !important;
}

.navmenu .dropdown.lang-switcher.active > ul {
  top: 100%;
  visibility: visible !important;
  opacity: 1 !important;
}

.lang-switcher-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 18px;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  font-size: 15px;
  font-weight: 500;
}

.lang-switcher-toggle .toggle-dropdown {
  transition: transform 0.25s ease;
}

.lang-switcher.active .lang-switcher-toggle .toggle-dropdown {
  transform: rotate(180deg);
}

.lang-switcher-toggle:focus-visible {
  outline: 2px solid var(--accent-color);
  outline-offset: 2px;
}

.fullscreen-control {
  display: flex;
  align-items: center;
}

.fullscreen-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-left: 0.4rem;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--nav-color), transparent 72%);
  border-radius: 10px;
  background: transparent;
  color: var(--nav-color);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  transition: color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.fullscreen-toggle:hover,
.fullscreen-toggle:focus-visible {
  border-color: var(--accent-color);
  background: color-mix(in srgb, var(--accent-color), transparent 90%);
  color: var(--accent-color);
  transform: translateY(-1px);
}

.fullscreen-toggle:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent-color), white 35%);
  outline-offset: 2px;
}

@media (max-width: 1199px) {
  .navmenu .dropdown.lang-switcher:hover > ul {
    top: auto;
  }

  .navmenu .dropdown.lang-switcher.active > ul {
    top: auto;
  }

  .navmenu .dropdown.lang-switcher > ul {
    visibility: hidden !important;
    opacity: 0 !important;
  }

  .navmenu .dropdown.lang-switcher.active > ul {
    visibility: visible !important;
    opacity: 1 !important;
  }

  .lang-switcher-toggle {
    width: 100%;
    padding: 10px 20px;
    text-align: left;
  }

  .fullscreen-control {
    padding: 0.4rem 1.25rem;
  }

  .fullscreen-toggle {
    width: 42px;
    height: 42px;
    margin-left: 0;
  }
}

.hero-brand-title .hero-brand-word {
  display: inline-block;
  white-space: nowrap;
}

.hero-brand-title .highlight-circle,
.hero-brand-title .highlight-pair {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.35em;
  padding: 0.08em 0.18em;
  border: 2px solid color-mix(in srgb, var(--contrast-color) 82%, var(--accent-color));
  border-radius: 999px;
  box-sizing: border-box;
  line-height: 1;
  vertical-align: 0.02em;
  white-space: nowrap;
}

.hero-brand-title .highlight-circle {
  min-width: 1.35em;
}

.hero-brand-title .highlight-pair {
  min-width: 1.85em;
  padding-right: 0.18em;
  padding-left: 0.18em;
}

@media (min-width: 992px) {
  .hero .hero-content {
    max-width: none;
  }

  .hero h1.hero-brand-title {
    white-space: nowrap;
    font-size: clamp(2.2rem, 3.5vw, 4.5rem);
  }
}

.flag-tz {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 20'%3E%3Crect width='30' height='20' fill='%231eb53a'/%3E%3Cpolygon points='30,20 30,0 0,20' fill='%2300a3dd'/%3E%3Cline x1='0' y1='20' x2='30' y2='0' stroke='%23fcd116' stroke-width='7'/%3E%3Cline x1='0' y1='20' x2='30' y2='0' stroke='%23000000' stroke-width='4'/%3E%3C/svg%3E");
}

.flag-gb {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 20'%3E%3Crect width='30' height='20' fill='%2300247d'/%3E%3Cg stroke='%23ffffff' stroke-width='4'%3E%3Cline x1='0' y1='0' x2='30' y2='20'/%3E%3Cline x1='30' y1='0' x2='0' y2='20'/%3E%3C/g%3E%3Cg stroke='%23cf142b' stroke-width='2'%3E%3Cline x1='0' y1='0' x2='30' y2='20'/%3E%3Cline x1='30' y1='0' x2='0' y2='20'/%3E%3C/g%3E%3Crect x='12' width='6' height='20' fill='%23ffffff'/%3E%3Crect y='7' width='30' height='6' fill='%23ffffff'/%3E%3Crect x='13.5' width='3' height='20' fill='%23cf142b'/%3E%3Crect y='8.5' width='30' height='3' fill='%23cf142b'/%3E%3C/svg%3E");
}

.flag-pl {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 20'%3E%3Crect width='30' height='20' fill='%23ffffff'/%3E%3Crect y='10' width='30' height='10' fill='%23dc143c'/%3E%3C/svg%3E");
}

/* The switcher is the last nav item, so its dropdown must open toward
   the left edge of the toggle instead of the right — otherwise it
   overflows past the viewport on desktop. */
@media (min-width: 1200px) {
  .navmenu .lang-switcher.dropdown > ul {
    left: auto;
    right: 0;
  }
}