/* Default state: hide EN content elements, but never the root html/body */
[lang="en"]:not(html):not(body) {
  display: none !important;
}

/* When checked, show EN and hide UA content elements */
body:has(#lang-toggle:checked) [lang="uk"]:not(html):not(body) {
  display: none !important;
}

body:has(#lang-toggle:checked) [lang="en"]:not(html):not(body) {
  display: block !important;
}

body:has(#lang-toggle:checked) span[lang="en"],
body:has(#lang-toggle:checked) a[lang="en"] {
  display: inline !important;
}

body:has(#lang-toggle:checked) .lang-switcher .toggle-label::after {
  content: "EN 🇺🇸";
}

header {
  position: sticky;
  top: 0;
  z-index: 100;
  padding-block: var(--spacing-xs);
  transition: all 0.3s ease;

  .nav-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem var(--spacing-s);
  }

  .logo {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--primary);
    display: flex;
    align-items: center;
    gap: 0.4rem;

    img {
      height: 28px;
      width: auto;
    }

    .logo-text {
      display: flex;
      flex-direction: column;
      line-height: 1.2;

      .logo-uni {
        font-size: 0.65rem;
        font-weight: 500;
        color: var(--text-muted);
      }

      .logo-dept {
        font-size: 0.85rem;
        font-weight: 700;

        text-transform: uppercase;
      }
    }
  }

  nav ul {
    display: flex;
    gap: var(--spacing-m);
    list-style: none;

    @media (max-width: 700px) {
      display: none; /* Mobile menu would go here */
    }

    a {
      font-weight: 500;
      color: var(--text);
      transition: color 0.2s;

      &:hover {
        color: var(--primary);
      }
    }
  }

  .lang-switcher {
    #lang-toggle {
      display: none;
    }

    .toggle-label {
      cursor: pointer;
      padding: 0.4rem 0.8rem;
      font-size: 0.85rem;
      display: flex;
      align-items: center;
      gap: 0.4rem;
      background: var(--surface-glass);
      backdrop-filter: blur(var(--blur-standard));
      border: var(--border-glass);
      border-radius: var(--radius-round);
      color: var(--text);
      font-weight: 500;
      transition: all 0.2s ease;

      &::after {
        content: "UA 🇺🇦";
      }

      &:hover {
        background: rgba(255, 255, 255, 0.6);
        transform: translateY(-2px);
      }
    }
  }
}

footer {
  padding-block: var(--spacing-xl);
  border-top: var(--border-glass);
  margin-top: var(--spacing-xl);
  text-align: center;
  color: var(--text-muted);

  .footer-links {
    display: flex;
    justify-content: center;
    gap: var(--spacing-m);
    margin-bottom: var(--spacing-s);
  }
}