/* ==========================================================================
   Chicken4Free – Language Switcher
   Drop-in styles for the top-right language selector.
   Palette matches the site's earthy tones (beige / black / white + red accent).
   Adjust the CSS variables below to match your exact brand colors.
   ========================================================================== */

:root {
  --c4f-accent: #c1272d;      /* red accent used on the site's CTA button */
  --c4f-dark: #2b2620;        /* near-black text */
  --c4f-beige: #f4ece0;       /* light beige background */
  --c4f-border: #e2d6c3;
}

.c4f-lang-switcher {
  position: relative;
  display: inline-block;
  font-family: inherit;
  z-index: 1000;
}

/* If your header is a flex row, this pins the switcher to the far right */
.c4f-lang-switcher--header-slot {
  margin-left: auto;
}

/* Hero pages (index.html, chicken4real.html): the <header class="hero"> is
   position:relative, so this mirrors the .brand element on the opposite
   (top-right) corner. */
.c4f-lang-switcher--hero {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 3;
}

/* Pages with no header row (e.g. drei-wuensche.html): float top-right of
   the viewport instead. */
.c4f-lang-switcher--floating {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 1000;
}

.c4f-lang-switcher__button {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: rgba(253, 252, 248, 0.94);
  border: 1px solid var(--c4f-border);
  border-radius: 999px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: var(--c4f-dark);
  line-height: 1;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(4px);
  transition: background 0.15s ease, border-color 0.15s ease;
}

.c4f-lang-switcher__button:hover,
.c4f-lang-switcher__button:focus-visible {
  background: #ffffff;
  border-color: var(--c4f-accent);
  outline: none;
}

.c4f-lang-switcher__flag {
  font-size: 16px;
  line-height: 1;
}

.c4f-lang-switcher__caret {
  width: 10px;
  height: 10px;
  transition: transform 0.15s ease;
}

.c4f-lang-switcher[data-open="true"] .c4f-lang-switcher__caret {
  transform: rotate(180deg);
}

.c4f-lang-switcher__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 180px;
  background: #ffffff;
  border: 1px solid var(--c4f-border);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(43, 38, 32, 0.15);
  padding: 6px;
  display: none;
  flex-direction: column;
  gap: 2px;
}

.c4f-lang-switcher[data-open="true"] .c4f-lang-switcher__menu {
  display: flex;
}

.c4f-lang-switcher__option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 14px;
  color: var(--c4f-dark);
  text-align: left;
  width: 100%;
}

.c4f-lang-switcher__option:hover,
.c4f-lang-switcher__option:focus-visible {
  background: var(--c4f-beige);
  outline: none;
}

.c4f-lang-switcher__option[aria-current="true"] {
  font-weight: 700;
  color: var(--c4f-accent);
}

.c4f-lang-switcher__option-flag {
  font-size: 18px;
  line-height: 1;
}

/* Mobile: shrink the label, keep the flag+caret tappable */
@media (max-width: 640px) {
  .c4f-lang-switcher__button-label {
    display: none;
  }
  .c4f-lang-switcher__button {
    padding: 8px 10px;
  }
}