/* Fixed top navbar. Logo is a CSS mask so its colour follows the section underneath (theme-nav.js sets data-theme-nav on <body>). */
.site-nav { position: fixed; inset: 0 0 auto; z-index: 50; }
.site-nav__inner { max-width: var(--bk-container); margin: 0 auto; padding: var(--bk-space-4) var(--bk-gutter); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--bk-space-4); }
.site-nav__logo { display: block; height: 48px; aspect-ratio: 873 / 447; background-color: var(--nav-logo, var(--bk-accent)); -webkit-mask: url(../img/bekifft-logo.png) center / contain no-repeat; mask: url(../img/bekifft-logo.png) center / contain no-repeat; transition: background-color .3s; }
.site-nav__links { display: flex; flex-wrap: wrap; gap: var(--bk-space-1); align-items: center; }
.site-nav__link { color: var(--nav-link, var(--bk-cream-100)); text-decoration: none; padding: var(--bk-space-3); font-weight: 700; transition: color .3s; }
.site-nav__cta { background: var(--nav-cta-bg, var(--bk-accent)); color: var(--nav-cta-text, var(--bk-on-accent)); text-decoration: none; padding: var(--bk-space-3) var(--bk-space-5); font-weight: 800; border-radius: var(--bk-radius-pill); margin-left: var(--bk-space-2); transition: background-color .3s, color .3s; }
.site-nav a:focus-visible { outline: 3px solid var(--bk-focus, var(--bk-orange-200)); outline-offset: 3px; }

/* Nav theme: section on orange vs. dark sections */
[data-theme-nav="orange"] .site-nav { --nav-logo: var(--bk-brown-800); --nav-link: var(--bk-brown-800); --nav-cta-bg: var(--bk-brown-800); --nav-cta-text: var(--bk-cream-100); }
[data-theme-nav="dark"] .site-nav { --nav-logo: var(--bk-accent); --nav-link: var(--bk-cream-100); --nav-cta-bg: var(--bk-accent); --nav-cta-text: var(--bk-on-accent); }


/* Phones: logo on the first row, links on the second, everything fits into 360px */
@media (max-width: 600px) {
  .site-nav__inner { padding: var(--bk-space-3) var(--bk-gutter); gap: var(--bk-space-2); }
  .site-nav__logo { height: 40px; }
  .site-nav__links { gap: 0; width: 100%; justify-content: space-between; }
  .site-nav__link { padding: var(--bk-space-2); font-size: var(--bk-text-sm); }
  .site-nav__cta { padding: var(--bk-space-2) var(--bk-space-4); margin-left: 0; font-size: var(--bk-text-sm); }
}

/* Sponsor-werden card: less inner padding on phones */
@media (max-width: 600px) { .sponsor-card { padding: var(--bk-space-6) var(--bk-space-5) !important; } }