/* css/header.css — Sticky header, navigation, hamburger menu, account button */

/* ========================================
   HEADER / NAVIGATION
   ======================================== */

/* ===== Header / Nav ===== */
header.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  will-change: transform;
  background: var(--bg-transparent);
  border-bottom: 3px solid var(--ink);
  color: var(--ink);
}

/* Content-anchored tiled background */
header.site-header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; /* stretch relative to body's total height */
  background: url("https://cdn.wolfbard.art/cdn-cgi/image/width=360,quality=50,format=auto/layout/header_background.jpg")
    repeat;
  background-size: 360px auto;
  opacity: 0.2; /* make partially transparent */
  background-blend-mode: multiply;
  pointer-events: none;
  z-index: -1; /* keep behind content */
}

.inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0.8rem 1rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}

@media (max-width: 480px) {
  .inner {
    font-size: 0.9rem;
  }
}

.logo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: inherit;
  transition: transform var(--transition-medium);
}

.logo:hover {
  animation: wiggle 0.6s ease-in-out;
}

.logo img {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-circle);
  border: 3px solid var(--ink);
  box-shadow: 0 4px 0 var(--ink);
  object-fit: cover;
}

.logo b {
  font-family: "Grandstander";
}

.nav-links {
  margin-left: auto;
  display: flex;
  gap: 0.4rem;
  flex-wrap: nowrap;
}

.nav-links a {
  text-decoration: none;
  color: inherit;
  font-weight: 700;
  padding: 0.4rem 0.8rem;
  border: 3px solid var(--ink);
  border-radius: var(--radius-pill);
  background: var(--light-peach);
  box-shadow: 0 6px 0 var(--ink);
  transform: translateY(0);
  transition: transform var(--transition-fast);
  user-select: none !important;
  -webkit-user-drag: none !important;
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
}

/* Hide " Viewer" suffix when nav is tight, before hamburger at 800px */
@media (max-width: 960px) and (min-width: 801px) {
  .viewer-suffix {
    display: none;
  }
}

/* Tint nav buttons on hover */
.nav-links a:hover {
  background: var(--accent);
  color: var(--offwhite);
  transform: translateY(-2px);
  box-shadow: 0 8px 0 var(--ink), 0 8px 18px rgba(0, 0, 0, 0.25);
}

.nav-links a:active {
  transform: translateY(4px);
  box-shadow: 0 2px 0 var(--ink);
}

/* Account button in header */
.account-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 42px;
  height: 42px;
  min-width: 42px;
  min-height: 42px;
  border: 3px solid var(--ink);
  border-radius: var(--radius-circle);
  background: var(--light-peach);
  box-shadow: 0 4px 0 var(--ink);
  text-decoration: none;
  color: inherit;
  flex-shrink: 0;
  overflow: hidden;
  /* No transition on base — prevents slide animation when crossing breakpoints */
  cursor: var(--cursor-pointer);
}

.account-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 0 var(--ink), 0 6px 14px rgba(0, 0, 0, 0.2);
  background: var(--accent);
  color: var(--offwhite);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}

.account-btn:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 var(--ink);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.account-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  line-height: 1;
}

.account-avatar {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: var(--radius-circle);
  object-fit: cover;
  display: block;
}

@media (max-width: 800px), (max-height: 500px) and (orientation: landscape) {
  .account-btn {
    position: absolute;
    right: 4.5rem;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
  }

  .account-btn:hover {
    transform: translateY(-50%) translateY(-2px);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
  }

  .account-btn:active {
    transform: translateY(-50%) translateY(2px);
  }
}

/* Header base */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  width: 100%;
}

.site-header .inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  position: relative;
}

/* Toggle button */
.nav-toggle {
  display: none;
  /* hidden on desktop */
  margin-left: auto;
  border: 3px solid var(--ink);
  background: var(--light-peach);
  border-radius: var(--radius-md);
  padding: 0.35rem 0.5rem;
  box-shadow: 0 4px 0 var(--ink);
}

.nav-toggle .nav-toggle-bar {
  display: block;
  width: 22px;
  height: 3px;
  background: var(--ink);
  margin: 4px 0;
  border-radius: 2px;
}

.nav-toggle:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 var(--ink);
}

/* Desktop nav */
.nav-links {
  margin-left: auto;
  display: flex;
  gap: 0.4rem;
  flex-wrap: nowrap;
}

/* Account link — only visible inside mobile dropdown */
.nav-links .nav-account-link {
  display: none;
}

/* Keep header height stable */
.site-header .inner {
  display: flex;
  align-items: center;
  height: 4.5rem;
  /* fixed height row (match your logo height + padding) 64px */
}

/* Ensure the hamburger button area doesn't introduce a different bg */
.site-header .nav-toggle,
.site-header .nav-toggle:focus-visible {
  background: var(--light-peach);
}

.site-header .nav-toggle:hover {
  background: var(--accent);
  color: var(--offwhite);
}

/* Show toggle & style bars on small screens + landscape phones */
@media (max-width: 800px), (max-height: 500px) and (orientation: landscape) {
  .nav-toggle {
    display: inline-flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    padding: 0.6rem 1rem;
    border: 3px solid var(--ink);
    border-radius: var(--radius-md);
    background: var(--light-peach);
    cursor: var(--cursor-pointer);
    box-shadow: 0 4px 0 var(--ink);
    z-index: 1002;
    /* above dropdown */
  }

  /* Navigation background menu */
  .nav-links {
    position: absolute;
    top: calc(100% + 6px);
    right: 1rem;
    display: none;
    /* hidden until opened */
    flex-direction: column;
    background: var(--bg);
    border: 3px solid var(--ink);
    box-shadow: 0 12px 0 var(--ink), 0 12px 24px rgba(0, 0, 0, 0.25);
    border-radius: 16px;
    padding: 0.5rem 0.5rem 1rem;
    min-width: 220px;
    z-index: 1001;
    gap: 0.75rem;
    will-change: transform;
    background-color: var(--bg);
  }

  .nav-links.is-open {
    display: flex !important;
  }

  /* force open even if other rules exist */

  .nav-links.open {
    display: flex !important;
  }

  /* Show account link in mobile dropdown */
  .nav-links .nav-account-link {
    display: flex;
    align-items: center;
  }

  /* The bars */
  .nav-toggle span {
    display: block !important;
    /* defeat any resets */
    width: 6rem !important;
    /* visible length */
    height: 3px !important;
    /* visible thickness */
    background-color: var(--ink) !important;
    /* visible color */
    border-radius: var(--radius-xs);
  }
}

/* Animate .updates into view once the header is ready */
.header-ready body > .updates {
  opacity: 1;
  transform: translateY(0);
  transition: opacity var(--transition-slow), transform var(--transition-slow);
}

/* Placeholder images for special hosts */
body.placeholder-images::before {
  background: url("https://cdn.wolfbard.art/cdn-cgi/image/width=1080,quality=50,format=auto/layout/background.jpg") repeat !important;
}

body.placeholder-images header.site-header::before {
  background: url("https://cdn.wolfbard.art/cdn-cgi/image/width=360,quality=50,format=auto/layout/header_background.jpg") repeat !important;
}

/* ========================================
   DARK MODE — Header overrides
   ======================================== */
html.dark-mode header.site-header {
  background: rgba(41, 48, 70, 0.98);
  border-bottom-color: var(--dm-border);
  color: var(--dm-text);
}

html.dark-mode header.site-header::before {
  opacity: 0.06;
}

html.dark-mode .nav-links a {
  background: var(--dm-accent-dim);
  border-color: var(--dm-border);
  color: var(--dm-text);
  box-shadow: 0 6px 0 var(--dm-border);
}

html.dark-mode .nav-links a:hover {
  background: var(--dm-accent);
  color: var(--dm-white);
  box-shadow: 0 8px 0 var(--dm-border), 0 8px 18px rgba(0, 0, 0, 0.35);
}

html.dark-mode .nav-links a:active {
  box-shadow: 0 2px 0 var(--dm-border);
}

html.dark-mode .logo img {
  border-color: var(--dm-border);
  box-shadow: 0 4px 0 var(--dm-border);
}

html.dark-mode .account-btn {
  background: var(--dm-accent-dim);
  border-color: var(--dm-border);
  box-shadow: 0 4px 0 var(--dm-border);
  color: var(--dm-text);
}

html.dark-mode .account-btn:hover {
  background: var(--dm-accent);
  color: var(--dm-white);
  box-shadow: 0 6px 0 var(--dm-border), 0 6px 14px rgba(0, 0, 0, 0.3);
}

html.dark-mode .nav-toggle {
  background: var(--dm-accent-dim);
  border-color: var(--dm-border);
  box-shadow: 0 4px 0 var(--dm-border);
}

html.dark-mode .nav-toggle span {
  background-color: var(--dm-text) !important;
}

html.dark-mode .site-header .nav-toggle,
html.dark-mode .site-header .nav-toggle:focus-visible {
  background: var(--dm-accent-dim);
}

html.dark-mode .site-header .nav-toggle:hover {
  background: var(--dm-accent);
}

html.dark-mode .pegbar-decor .peg {
  background: var(--dm-border);
}

html.dark-mode .dark-mode-toggle {
  color: var(--dm-text);
}

@media (max-width: 800px), (max-height: 500px) and (orientation: landscape) {
  html.dark-mode .nav-links {
    background: rgba(41, 48, 70, 0.98);
    border-color: var(--dm-border);
    box-shadow: 0 12px 0 var(--dm-border), 0 12px 24px rgba(0, 0, 0, 0.4);
    background-color: rgba(41, 48, 70, 0.98);
  }

  html.dark-mode .nav-links .dark-mode-toggle {
    background: var(--dm-accent-dim);
    border-color: var(--dm-border);
    color: var(--dm-text);
    box-shadow: 0 6px 0 var(--dm-border);
  }

  html.dark-mode .nav-links .dark-mode-toggle:hover {
    background: var(--dm-accent);
    color: var(--dm-white);
    box-shadow: 0 8px 0 var(--dm-border), 0 8px 18px rgba(0, 0, 0, 0.35);
  }
}