/* =========================================================================
   Alain Dacier Fotografie — header & footer chrome
   ========================================================================= */

/* ---- Wordmark ---- */
.wordmark { display: inline-flex; flex-direction: column; line-height: 1; }
.wm-name {
  font-family: var(--font-serif); font-weight: 500;
  font-size: 26px; letter-spacing: 0.01em; color: var(--fg-1);
  white-space: nowrap;
}
.wm-sub {
  font-family: var(--font-sans); font-weight: 600;
  font-size: 10px; letter-spacing: 0.42em; color: var(--amber);
  margin-top: 3px; padding-left: 2px;
}

/* ---- Header ---- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), backdrop-filter var(--dur-base);
  border-bottom: 1px solid transparent;
}
.site-header.scrolled {
  background: rgba(11,11,12,0.78);
  backdrop-filter: saturate(1.3) blur(14px);
  border-bottom-color: var(--line);
}
.header-inner {
  height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-8);
}
.site-nav { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.nav-link {
  font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 500;
  color: var(--fg-2); padding: 9px 14px; border-radius: var(--radius-sm);
  position: relative; transition: color var(--dur-fast) var(--ease-out);
}
.nav-link:hover { color: var(--fg-1); }
.nav-link.active { color: var(--fg-1); }
.nav-link.active::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 2px;
  height: 1px; background: var(--amber);
}
.header-cta { margin-left: var(--space-4); }

.nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 8px; }
.nav-toggle span { width: 24px; height: 2px; background: var(--fg-1); transition: all var(--dur-base) var(--ease-out); }
.site-header.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-header.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
.site-header.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-nav {
  display: none; flex-direction: column; gap: 4px;
  padding: 0 var(--container-pad) 0;
  background: rgba(11,11,12,0.97); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  max-height: 0; overflow: hidden; transition: max-height var(--dur-base) var(--ease-out), padding var(--dur-base);
}
.mobile-nav a { padding: 14px 4px; font-size: var(--text-md); color: var(--fg-1); border-bottom: 1px solid var(--line); }

@media (max-width: 940px) {
  .site-nav, .header-cta { display: none; }
  .nav-toggle { display: flex; }
  .mobile-nav { display: flex; }
  .site-header.nav-open { background: rgba(11,11,12,0.97); backdrop-filter: blur(14px); }
  .site-header.nav-open .mobile-nav { max-height: 460px; padding: 8px var(--container-pad) 24px; }
}

/* ---- Footer ---- */
.site-footer { border-top: 1px solid var(--line); background: var(--panel); padding: var(--space-24) 0 var(--space-8); margin-top: var(--space-12); }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1.2fr; gap: var(--space-12); }
.footer-brand .wm-name { font-size: 30px; }
.footer-col { display: flex; flex-direction: column; gap: 12px; }
.footer-col h5 { font-family: var(--font-sans); font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--amber); margin: 0 0 6px; }
.footer-col a { color: var(--fg-2); font-size: var(--text-sm); transition: color var(--dur-fast); }
.footer-col a:hover { color: var(--amber); }
.footer-social { display: flex; gap: 16px; margin-top: 10px; }
.footer-base { display: flex; justify-content: space-between; align-items: center; padding-top: var(--space-8); margin-top: var(--space-16); border-top: 1px solid var(--line); font-size: var(--text-xs); color: var(--fg-3); }
@media (max-width: 820px) {
  .footer-grid { grid-template-columns: 1fr; gap: var(--space-10); }
  .footer-base { flex-direction: column; gap: 10px; text-align: center; }
}