/* ============================================================
   Taylor Dollarhide Portfolio — Shared Styles
   dollarhide.design
   ============================================================ */

@font-face {
  font-family: 'Geist';
  src: url('https://cdn.jsdelivr.net/npm/geist@1.3.0/dist/fonts/geist-sans/Geist-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Geist';
  src: url('https://cdn.jsdelivr.net/npm/geist@1.3.0/dist/fonts/geist-sans/Geist-Light.woff2') format('woff2');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Geist';
  src: url('https://cdn.jsdelivr.net/npm/geist@1.3.0/dist/fonts/geist-sans/Geist-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Geist';
  src: url('https://cdn.jsdelivr.net/npm/geist@1.3.0/dist/fonts/geist-sans/Geist-SemiBold.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Geist Mono';
  src: url('https://cdn.jsdelivr.net/npm/geist@1.3.0/dist/fonts/geist-mono/GeistMono-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Geist Mono';
  src: url('https://cdn.jsdelivr.net/npm/geist@1.3.0/dist/fonts/geist-mono/GeistMono-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Geist Mono';
  src: url('https://cdn.jsdelivr.net/npm/geist@1.3.0/dist/fonts/geist-mono/GeistMono-SemiBold.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}

/* ── NAV (shared across all pages) ── */
#site-nav {
  position: sticky; top: 0; z-index: 200;
  display: flex; align-items: center; justify-content: space-between;
  height: 56px; padding: 0 40px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
#site-nav.nav-dark {
  background: rgba(12,12,16,0.88);
  border-bottom: 1px solid rgba(240,239,240,0.1);
}
#site-nav.nav-light {
  background: rgba(245,245,248,0.92);
  border-bottom: 1px solid #E0E0EC;
}

.nav-logo-link { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; }
.nav-logo-link img { height: 40px; width: auto; display: block; }
.nav-dark  .nav-logo-link img { filter: invert(0); }
.nav-light .nav-logo-link img { filter: invert(1); }

.nav-links-list {
  display: flex; align-items: center; gap: 28px;
  list-style: none; margin: 0; padding: 0;
}
.nav-links-list a {
  font-family: 'Geist', system-ui, sans-serif;
  font-size: 13px; font-weight: 400; text-decoration: none;
  letter-spacing: 0.01em; transition: color 0.18s;
}
.nav-dark  .nav-links-list a { color: rgba(240,239,240,0.55); }
.nav-dark  .nav-links-list a:hover { color: #F0EFF0; }
.nav-light .nav-links-list a { color: #42425A; }
.nav-light .nav-links-list a:hover { color: #0A0A0F; }

.nav-links-list a.nav-active {
  font-weight: 500;
}
.nav-dark  .nav-links-list a.nav-active { color: #F0EFF0; }
.nav-light .nav-links-list a.nav-active { color: #0A0A0F; }

/* CTA button */
.nav-cta-btn {
  font-size: 13px !important; font-weight: 500 !important;
  padding: 7px 16px; border-radius: 5px;
  transition: opacity 0.15s !important;
}
.nav-dark  .nav-cta-btn { background: #F0EFF0; color: #0A0A0F !important; }
.nav-dark  .nav-cta-btn:hover { opacity: 0.85 !important; }
.nav-light .nav-cta-btn { background: #0A0A0F; color: #F5F5F8 !important; }
.nav-light .nav-cta-btn:hover { opacity: 0.8 !important; }

/* Dropdown */
.nav-dropdown { position: relative; }
.nav-dropdown > a::after { content: ' ↓'; font-size: 10px; opacity: 0.5; }
.nav-dropdown-panel {
  position: absolute; top: calc(100% + 10px); left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 240px; padding: 6px; border-radius: 8px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.18s, transform 0.18s;
  z-index: 300;
}
.nav-dark .nav-dropdown-panel {
  background: #18181F;
  border: 1px solid rgba(240,239,240,0.12);
  box-shadow: 0 20px 48px rgba(0,0,0,0.4);
}
.nav-light .nav-dropdown-panel {
  background: #FFFFFF;
  border: 1px solid #E0E0EC;
  box-shadow: 0 16px 40px rgba(0,0,0,0.1);
}
.nav-dropdown:hover .nav-dropdown-panel,
.nav-dropdown:focus-within .nav-dropdown-panel {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.nav-dropdown-panel a {
  display: flex !important; align-items: center;
  justify-content: space-between; padding: 9px 12px;
  border-radius: 5px; gap: 12px;
}
.nav-dark  .nav-dropdown-panel a { color: rgba(240,239,240,0.55) !important; }
.nav-dark  .nav-dropdown-panel a:hover { background: rgba(255,255,255,0.06); color: #F0EFF0 !important; }
.nav-light .nav-dropdown-panel a { color: #42425A !important; }
.nav-light .nav-dropdown-panel a:hover { background: #F5F5F8; color: #0A0A0F !important; }
.nav-dropdown-panel a .meta {
  font-size: 11px; opacity: 0.4; white-space: nowrap;
  font-family: 'Geist', system-ui, sans-serif;
}
.nav-dropdown-panel hr {
  border: none; border-top: 1px solid;
  margin: 4px 0;
}
.nav-dark  .nav-dropdown-panel hr { border-color: rgba(240,239,240,0.08); }
.nav-light .nav-dropdown-panel hr { border-color: #E8E8F0; }

/* Mobile nav toggle */
.nav-mobile-toggle {
  display: none; background: none; border: none;
  cursor: pointer; padding: 6px; color: inherit;
}
.nav-mobile-panel {
  display: none; position: absolute; top: 56px; left: 0; right: 0;
  padding: 12px 20px 20px; flex-direction: column; gap: 2px; z-index: 199;
}
.nav-dark  .nav-mobile-panel { background: #0C0C10; border-bottom: 1px solid rgba(240,239,240,0.1); }
.nav-light .nav-mobile-panel { background: #F5F5F8; border-bottom: 1px solid #E0E0EC; }
.nav-mobile-panel a {
  font-family: 'Geist', system-ui, sans-serif;
  font-size: 15px; padding: 10px 8px; text-decoration: none;
  border-radius: 5px; display: block;
}
.nav-dark  .nav-mobile-panel a { color: rgba(240,239,240,0.7); }
.nav-dark  .nav-mobile-panel a:hover { background: rgba(255,255,255,0.06); color: #F0EFF0; }
.nav-light .nav-mobile-panel a { color: #42425A; }
.nav-light .nav-mobile-panel a:hover { background: #EEEEF5; color: #0A0A0F; }
.nav-mobile-panel .mobile-section-label {
  font-size: 10px; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; padding: 12px 8px 4px;
  font-family: 'Geist', system-ui, sans-serif;
}
.nav-dark  .nav-mobile-panel .mobile-section-label { color: rgba(240,239,240,0.25); }
.nav-light .nav-mobile-panel .mobile-section-label { color: #9090A8; }
.nav-mobile-panel.open { display: flex; }

@media (max-width: 720px) {
  #site-nav { padding: 0 20px; position: relative; }
  .nav-links-list { display: none; }
  .nav-mobile-toggle { display: flex; align-items: center; justify-content: center; }
  .nav-dark  .nav-mobile-toggle { color: rgba(240,239,240,0.7); }
  .nav-light .nav-mobile-toggle { color: #42425A; }
}