/* =========================================================
   KOTO GLOBAL (layout primitives)
========================================================= */
:root {
  --header-h: 64px;
  --sticky-z: 1045;
}

/* =========================================================
   HEADER / NAVBAR (layout + alignment)
========================================================= */

/* Sticky header with mild glass */
.koto-header {
  position: sticky;
  top: 0;
  z-index: var(--sticky-z);
  backdrop-filter: saturate(1.2) blur(4px);
}

/* Container padding (slightly tighter on mobile) */
.koto-header-container {
  padding-left: 8px;
  padding-right: 8px;
}

@media (min-width: 992px) {
  .koto-header-container {
    padding-left: 12px;
    padding-right: 12px;
  }
}

/* Reduce brand padding so logo sits closer */
.navbar .navbar-brand {
  padding-left: 0;
  margin-left: 0;
}

/* Brand sizing (mobile-safe base) */
.koto-logo {
  border-radius: 10px;
  width: 70px;
  height: 70px;
  object-fit: contain;
  margin-left: 2px;
}

/* Center nav: keep single-line as long as possible */
.koto-main-nav {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: .75rem;
  flex-wrap: nowrap;
  min-width: 0;
}

.koto-main-nav .nav-link {
  white-space: nowrap;
}

/* Centered dropdowns (center anchor) */
.koto-dropdown-center {
  position: relative;
}

.koto-dropdown-center > .dropdown-menu {
  left: 50%;
  transform: translateX(-50%);
}

/* “Start menu” style left-aligned content */
.koto-dropdown-menu-start {
  min-width: 260px;
}

/* =========================================================
   AUTH ICONS (login/logout) + HOVER + MOTION
========================================================= */

.koto-auth-area {
  margin-right: 2px;
}

.koto-auth-area .koto-icon-btn {
  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
}

/* Base icon sizing */
.koto-auth-icon {
  width: 48px;
  height: 48px;
  object-fit: contain;
  display: block;
  transition: transform 0.15s ease-out;
}

.koto-auth-icon:hover {
  transform: scale(1.12);
}

/* Double ONLY login/logout */
#auth-login-icon,
#auth-logout-icon {
  width: 64px;
  height: 64px;
}

/* Animated login icon */
.koto-login-icon {
  transform-origin: 50% 50%;
  will-change: transform;
  animation: kotoLoginTwistPulse 2.5s ease-in-out infinite;
}

@keyframes kotoLoginTwistPulse {
  0%   { transform: rotate(0deg); }
  6%   { transform: rotate(-7deg); }
  12%  { transform: rotate(7deg); }
  18%  { transform: rotate(-5deg); }
  24%  { transform: rotate(4deg); }
  30%  { transform: rotate(0deg); }
  100% { transform: rotate(0deg); }
}

@media (prefers-reduced-motion: reduce) {
  .koto-login-icon { animation: none !important; }
}

/* =========================================================
   ACCESSIBILITY OPTIONS
========================================================= */

body.koto-a11y-text-lg {
  font-size: 1.05rem;
}

body.koto-a11y-high-contrast {
  filter: contrast(1.08) saturate(1.04);
}

body.koto-a11y-reduce-motion *,
body.koto-a11y-reduce-motion *::before,
body.koto-a11y-reduce-motion *::after {
  animation: none !important;
  transition: none !important;
}

/* =========================================================
   RESPONSIVE NAV (burger visibility controlled by body class)
========================================================= */

.koto-burger-wrap { display: none; }

body.koto-burger-needed #authIconsInline > a,
body.koto-burger-needed #authIconsInline > button {
  display: none !important;
}

body.koto-burger-needed .koto-burger-wrap {
  display: block;
}

/* Mobile: shrink logo/icons to avoid wrap */
@media (max-width: 767.98px) {
  /* Logo scales down */
  .koto-logo {
    width: clamp(30px, 10vw, 56px);
    height: clamp(30px, 10vw, 56px);
  }

  /* Auth icons scale down */
  .koto-auth-icon {
    width: 32px;
    height: 32px;
  }

  .koto-auth-icon:hover {
    transform: scale(1.05);
  }

  /* Nav links scale down */
  .koto-main-nav .nav-link {
    font-size: clamp(0.8rem, 3.4vw, 1rem);
    line-height: 1.15;
  }

  /* Keep login/logout large enough on mobile */
  #auth-login-icon,
  #auth-logout-icon {
    width: 64px;
    height: 64px;
  }
}

/* =========================================================
   FOOTER
========================================================= */

.koto-footer {
  border-top: 1px solid color-mix(in srgb, var(--border-1, rgba(0,0,0,.2)) 70%, transparent);
}