/* Header styles for PenMarkk */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background-color: var(--color-surface);
  border-bottom: 1px solid var(--gray-200);
  backdrop-filter: saturate(120%) blur(4px);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 64px;
  gap: var(--space-6);
}

/* Brand */
.brand__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-primary);
  letter-spacing: 0.01em;
}

/* Logo image sizing (desktop + mobile) */
.brand__logo,
.footer__logo-img {
  display: inline-block;
  width: 120px;
  height: auto;
}

@media (max-width: 600px) {
  .brand__logo,
  .footer__logo-img {
    width: 80px;
  }
}

/* Navigation */
.primary-nav { display: block; }
.nav__list { 
  list-style: none; 
  margin: 0; 
  padding: 0; 
  display: flex; 
  align-items: center; 
  gap: clamp(var(--space-4), 2vw, var(--space-8));
}

.nav__link {
  color: var(--color-text);
  font-weight: 600;
  padding: 10px 6px;
  border-radius: var(--radius-sm);
}

.nav__link:hover { color: var(--color-primary); text-decoration: none; }
.nav__link:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.nav__link[aria-current="page"] { color: var(--color-primary); }

/* Toggle */
.nav-toggle {
  --size: 44px;
  display: none;
  align-items: center;
  gap: var(--space-2);
  min-width: var(--size);
  min-height: var(--size);
  padding: 0 var(--space-3);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  position: relative;
  z-index: 2;
}
.nav-toggle:hover { background: var(--gray-100); }
.nav-toggle:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.nav-toggle__bars { display: inline-flex; flex-direction: column; justify-content: center; gap: 3px; }
.nav-toggle .bar {
  display: block; width: 18px; height: 2px; background: var(--color-text); border-radius: 2px; transition: transform var(--duration-normal) var(--easing-standard), opacity var(--duration-normal) var(--easing-standard);
}

/* Open state animation */
.site-header.is-open .nav-toggle__bars .bar:nth-child(1) { transform: translateY(5px) rotate(45deg);}
.site-header.is-open .nav-toggle__bars .bar:nth-child(2) { opacity: 0;}
.site-header.is-open .nav-toggle__bars .bar:nth-child(3) { transform: translateY(-5px) rotate(-45deg);}

/* Skip link */
.skip-link {
  position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden;
}
.skip-link:focus { position: fixed; left: var(--space-6); top: var(--space-6); width: auto; height: auto; padding: var(--space-3) var(--space-4); background: var(--color-primary); color: #fff; border-radius: var(--radius-md); z-index: 1100; }

/* Responsive: collapse on small screens only when JS is enabled */
@media (max-width: 768px) {
  .nav-toggle { display: inline-flex; }
  .nav__list { gap: var(--space-6); }

  .js .primary-nav {
    position: fixed;
    inset: 0 0 0 0;
    background: rgba(0, 0, 0, 0.4);
    display: grid;
    grid-template-rows: auto 1fr;
    transform: translateY(-100%);
    opacity: 0;
    visibility: hidden;
    transition: transform var(--duration-slow) var(--easing-standard), opacity var(--duration-slow) var(--easing-standard), visibility 0s linear var(--duration-slow);
  }
  .js .site-header.is-open .primary-nav {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    transition: transform var(--duration-slow) var(--easing-standard), opacity var(--duration-slow) var(--easing-standard);
  }
  .js .primary-nav .nav__list {
    background: var(--color-surface);
    margin: 0;
    padding: var(--space-8);
    display: grid;
    gap: var(--space-4);
    align-content: start;
    box-shadow: var(--shadow-lg);
  }
}

/* Prevent body scroll when menu open */
.nav-open { overflow: hidden; }