/* Feminine navigation styles for PinkPantyShow
   - soft pink palette
   - rounded pill links
   - subtle hover transitions and underline animation
   - submenu fade/slide
*/
html, body {
  margin: 0;
  padding: 0;
}

:root{
  --nav-bg: #fff; /* keep page background */
  --nav-accent: #e7548b; /* primary pink */
  --nav-accent-2: #ff9acb;
  --nav-text: #333;
  --nav-muted: #666;
}

.navigation {
  padding: 8px 15px;
  margin: 0;
  line-height: 1;
  background: linear-gradient(135deg, #ff69b4, #ffb6c1);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--nav-z);
  overflow: visible;
}

.navigation h2 {
  font-family: 'Dancing Script', 'Parisienne', cursive;
  color: white;
  font-size: 2.8rem;
  margin: 0;
  padding: 2px 0;
  text-align: center;
  line-height: 1;
}

.nav-menu {
  display: flex;
  gap: 8px;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.nav-menu > a,
.nav-item > a,
.login-indicator {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0.7em 1.3em;
  border-radius: 15px;
  /* Modern feminine design: gradient background */
  background: linear-gradient(135deg, #ff198c 0%, #fb9dc3 100%);
  color: #e75480;
  text-decoration: none;
  font-weight: 600;
  border: 2px solid #ffb6d5;
  box-shadow: 0 4px 12px rgba(231, 84, 128, 0.1);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  font-size: 0.95rem;
  letter-spacing: 0.03em;
}

/* Don't apply nav-menu styles to language switcher buttons - use .lang-flag instead */

.navigation .nav-menu > a:hover,
.navigation .nav-item > a:hover,
.navigation .nav-menu > a:focus,
.navigation .nav-item > a:focus {
  transform: translateY(-4px) scale(1.05);
  color: #000000;
  background: linear-gradient(135deg, #e75480 0%, #ff69b4 100%);
  border-color: #c94170;
  box-shadow: 0 8px 20px rgba(231, 84, 128, 0.25);
}

/* small subtle underline animation for links */
.nav-menu > a::after,
.nav-item > a::after {
  content: '';
  display: block;
  height: 2px;
  width: 0;
  background: linear-gradient(90deg, rgba(231, 84, 128, 0.3), rgba(255, 105, 180, 0.5));
  border-radius: 15px;
  transition: width 220ms ease;
  margin-top: 3px;
}
.nav-menu > a:hover::after,
.nav-item > a:hover::after {
  width: 70%;
}

/* Submenu styles - modern and feminine */
.nav-item.has-submenu {
  position: relative;
}
.nav-item .submenu {
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  min-width: 240px;
  background: linear-gradient(180deg, #fff 0%, #fff5fa 100%);
  border-radius: 15px;
  border: 2px solid #ffb6d5;
  box-shadow: 0 12px 40px rgba(231, 84, 128, 0.15);
  padding: 14px 10px 10px 10px; /* top padding creates visual gap without physical gap */
  display: none;
  opacity: 0;
  pointer-events: none;
  transition: opacity 150ms ease;
  z-index: 10001;
}
.nav-item.submenu-open .submenu {
  display: block;
  opacity: 1;
  pointer-events: auto;
}

/* No gap between button and submenu — padding-top inside submenu creates visual spacing. */
.nav-item.has-submenu {
  position: relative;
}

.nav-item .submenu a {
  display: block;
  padding: 0.7em 1em;
  margin: 4px 0;
  border-radius: 15px;
  color: #e75480;
  background: transparent;
  text-decoration: none;
  font-weight: 600;
  transition: all 160ms ease;
}
.nav-item .submenu a:hover {
  background: linear-gradient(135deg, #e75480 0%, #ff69b4 100%);
  color: #fff;
  transform: translateY(-2px) translateX(4px);
  box-shadow: 0 4px 12px rgba(231, 84, 128, 0.2);
}

/* decorative caret (small triangle) above the submenu */
.nav-item .submenu::before {
  content: '';
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 14px;
  background: linear-gradient(180deg, #fff 0%, #fff5fa 100%);
  border-left: 2px solid #ffb6d5;
  border-top: 2px solid #ffb6d5;
  transform: translateX(-50%) rotate(45deg);
  box-shadow: 0 4px 10px rgba(231, 84, 128, 0.08);
}

/* Login indicator special styling */
.login-indicator {
  background: linear-gradient(90deg, rgba(231,84,139,0.06), rgba(255,154,191,0.03));
  color: var(--nav-accent);
  border: 1px solid rgba(231,84,139,0.08);
}


/* Language flag buttons - Trendy, Feminine, Hip Design */
.nav-language {
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
}

/* Language switcher container - part of nav-menu flex flow */
.language-switcher {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
  background: transparent;
}

/* Strong reset: ensure language selector buttons are not affected by
   generic `button` or `button[type="submit"]` rules in other stylesheets.
   We unset inherited properties and re-apply only the small set needed
   for the language flags. This guarantees all styling that affects the
   language selector originates from `style.navigation.css`.
*/
.navigation .language-switcher .lang-form .lang-flag,
.navigation .lang-flag {
  all: unset;
  box-sizing: border-box;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 8px;
  margin: 0;
  background: transparent;
  border: 2px solid #fd5a9e;
  border-radius: 15px;
  font-size: 1rem;
  font-weight: 600;
  color: #e75480;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  overflow: visible;
  min-width: 48px;
  min-height: 48px;
}

.lang-form {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
}

.lang-flag {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 8px;
  margin: 0;
  background: transparent;
  border: 2px solid #fd5a9e;
  border-radius: 15px;
  font-size: 1rem;
  font-weight: 600;
  color: #e75480;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  overflow: visible;
  min-width: 48px;
  min-height: 48px;
}
.lang-flag::before {
  content: '';
  position: absolute;
  inset: -6px;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  border-radius: 15px;
  z-index: -1;
}

.lang-flag:hover::before {
  opacity: 1;
}

.lang-emoji {
  display: block;
  font-size: 2rem;
  line-height: 1;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  width: 100%;
  text-align: center;
}

/* Ensure flags render using platform emoji fonts when available. Some
   site-wide font-family rules can prevent emoji glyphs from displaying;
   this explicit fallback increases the chance the flag emoji appears. */
.lang-emoji {
  font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', 'Segoe UI Symbol', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.lang-label {
  display: none;
  visibility: hidden;
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  margin: 0;
  padding: 0;
}

.lang-indicator {
  display: none;
  font-size: 0.9em;
  position: absolute;
  top: 2px;
  right: 2px;
}

/* Trendy hover effect */
.lang-flag:hover {
  border-color: #ff69b4;
  color: #c94170;
  transform: translateY(-2px) scale(1.06);
}

.lang-flag:hover .lang-emoji {
  transform: scale(1.15) rotate(10deg);
}

/* Current language - Stylish active state */
.lang-flag.current {
  color: #c94170;
  border-color: #ff69b4;
  font-weight: 800;
}

.lang-flag.current .lang-emoji {
  transform: scale(1.2);
}

.lang-flag.current .lang-indicator {
  display: block;
}

/* Keyboard focus - accessible */
.lang-flag:focus,
.lang-flag:focus-visible {
  outline: 2px solid #ff69b4;
  outline-offset: 2px;
  border-color: #ff69b4;
}

/* Active state - fun feedback */
.lang-flag:active {
  transform: scale(0.95);
}
/* Show the ISO label when hovering a language flag. Keeps the label hidden
   for screen readers by default but provides a visible tooltip on hover for
   sighted users. On small screens the label remains hidden to save space. */
.lang-flag:hover .lang-label,
.navigation .language-switcher .lang-flag:hover .lang-label {
  display: block;
  visibility: visible;
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  background: rgba(255,255,255,0.98);
  color: #c94170;
  padding: 6px 8px;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(231,84,128,0.12);
  font-size: 0.85rem;
  z-index: 20;
}

@media (max-width: 600px) {
  .lang-flag:hover .lang-label,
  .navigation .language-switcher .lang-flag:hover .lang-label {
    display: none;
    visibility: hidden;
  }
}

/* Responsive adjustments */
@media (max-width: 600px) {
  .lang-flag {
    padding: 5px 8px;
    font-size: 0.65rem;
  }

  .lang-label {
    display: none;
    visibility: hidden;
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    margin: 0;
    padding: 0;
  }

  .lang-emoji {
    font-size: 1.1em;
  }
}
.nav-menu > a[data-no-animation],
.nav-item > a[data-no-animation] {
  transition: none;
}

.nav-menu > a[data-no-animation]::after,
.nav-item > a[data-no-animation]::after {
  transition: none;
}

.nav-menu > a[data-no-animation]:hover,
.nav-item > a[data-no-animation]:hover,
.nav-menu > a[data-no-animation]:focus,
.nav-item > a[data-no-animation]:focus {
  transform: none;
}

.nav-menu > a[data-no-animation]:hover::after,
.nav-item > a[data-no-animation]:hover::after {
  width: 0;
}

/* ======================================================================
   Scoped language-switcher rules (best-practice):
   - Ensure global "button" rules do not unintentionally style the
     language switcher. These more-specific selectors live under
     `.navigation` so they win over generic rules while remaining
     non-invasive and easy to maintain.
   ======================================================================
*/
.navigation .language-switcher,
.navigation .language-switcher .lang-form {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
  background: transparent;
  padding: 0;
  margin: 0;
  border: none;
  /* ensure emoji glyphs aren't overridden by site-wide webfonts */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Force platform emoji fonts for language flags when other site fonts
   might prevent color emoji rendering. This rule is scoped under
   `.navigation` to avoid affecting other UI. Use specificity instead
   of many !important rules; if your browser still hides flags, add
   a single `!important` on `font-family` as needed. */
.navigation .language-switcher .lang-emoji,
.navigation .lang-flag .lang-emoji {
  font-family: "Segoe UI Emoji", "Noto Color Emoji", "Apple Color Emoji", "Twemoji Mozilla", "EmojiOne Mozilla", sans-serif;
  color: inherit;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 2rem;
  line-height: 1;
}

.navigation .language-switcher .lang-flag {
  /* Re-assert button primitives that generic rules may set */
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px;
  background: transparent;
  border: 2px solid #fd5a9e;
  border-radius: 15px;
  font-size: 1rem;
  font-weight: 600;
  color: #e75480;
  cursor: pointer;
  min-width: 48px;
  min-height: 48px;
  box-shadow: none;
  position: relative;
}

.navigation .language-switcher .lang-flag .lang-emoji {
  font-size: 2rem;
  line-height: 1;
  text-align: center;
}

.navigation .language-switcher .lang-flag.current {
  color: #c94170;
  border-color: #ff69b4;
  font-weight: 800;
}

/* Apply the measured nav height only to page content wrappers so the
   fixed navigation remains flush to the top of the viewport and there
   is never visual space above it. This targets common container classes
   used across the site; add more selectors if your pages use different
   wrappers. */
.nav-offset-target,
body > .container,
.contests-container,
.contest-results-container,
.contest-submit-container,
.contest-vote-container,
.contest-details-container {
  padding-top: var(--nav-height, 0);
.navigation .language-switcher .lang-flag .lang-emoji,
.navigation .lang-flag .lang-emoji {
  color: initial !important;
  -webkit-text-fill-color: initial !important;
  opacity: 1 !important;
  visibility: visible !important;
  display: inline-block !important;
  mix-blend-mode: normal !important;
  filter: none !important;
  background-clip: initial !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}
}

/* Helper utility: add this class to any top-level content wrapper where
   you want automatic offset applied. Keeps behavior explicit and
   prevents global body padding. */
.nav-offset-target {
  box-sizing: border-box;
}