/* ===========================================================
   SHARED NAVIGATION / FOOTER / PROJECT-BADGE STYLES
   La Nobleza Studio — loaded on every page alongside the
   page-local <style> block. Relies on the :root custom
   properties (--gold, --gold-light, --cyan, --black, --black2,
   --white, --muted, --border) already defined inline per page.
   =========================================================== */

/* ---- Diensten dropdown (desktop) ---- */
.nav-dropdown { position: relative; display: flex; align-items: center; }
.nav-dropdown-menu {
    position: absolute; top: calc(100% + 18px); left: 50%; transform: translateX(-50%) translateY(8px);
    min-width: 240px; background: rgba(15, 15, 15, .97); backdrop-filter: blur(16px);
    border: 1px solid var(--border); border-radius: 4px; padding: 10px;
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .22s ease, transform .22s ease, visibility .22s ease;
    z-index: 1100;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu,
.nav-dropdown.open .nav-dropdown-menu {
    opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0);
}
.nav-dropdown-menu a {
    display: block; padding: 11px 16px; font-family: 'Inter', sans-serif; font-size: 12.5px;
    font-weight: 500; letter-spacing: .06em; text-transform: none; color: var(--white); opacity: .82;
    border-radius: 3px; transition: background .2s, opacity .2s, color .2s; white-space: nowrap;
}
.nav-dropdown-menu a:hover, .nav-dropdown-menu a:focus-visible {
    background: rgba(201, 168, 76, .1); opacity: 1; color: var(--gold-light);
}
.nav-dropdown-caret { display: inline-block; margin-left: 6px; font-size: 9px; transition: transform .25s; opacity: .6; }
.nav-dropdown:hover .nav-dropdown-caret, .nav-dropdown.open .nav-dropdown-caret { transform: rotate(180deg); }
@media (max-width: 860px) { .nav-dropdown-menu { display: none } }

/* ---- Mobile submenu (Diensten sub-items + Labs) ---- */
.mobile-menu .mob-sub {
    display: flex; flex-direction: column; gap: 14px; align-items: center;
    font-family: 'Inter', sans-serif; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase;
    margin-top: -14px; opacity: .75;
}
.mobile-menu .mob-sub a { color: var(--muted, #8a8a86); }
.mobile-menu .mob-sub a:hover { color: var(--gold-light); }

/* ---- Focus states (keyboard accessibility) ---- */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
    outline: 2px solid var(--gold-light, #f5c76b); outline-offset: 3px; border-radius: 2px;
}
.nav-links a:focus-visible, .mobile-menu a:focus-visible { outline-offset: 4px; }

/* ---- Project status badges (klantproject / concept / live product / prototype) ---- */
.proj-badge {
    display: inline-flex; align-items: center; gap: 6px; font-family: 'Inter', sans-serif; font-size: 10.5px;
    font-weight: 600; letter-spacing: .14em; text-transform: uppercase; padding: 5px 11px; border-radius: 2px;
    border: 1px solid var(--border); color: var(--muted, #8a8a86); background: rgba(0,0,0,.35);
}
.proj-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.proj-badge.badge-client { color: #b7e6c4; border-color: rgba(122, 214, 148, .35); }
.proj-badge.badge-client::before { background: #6fd694; box-shadow: 0 0 8px rgba(111,214,148,.7); }
.proj-badge.badge-concept { color: var(--gold-light, #f5c76b); border-color: rgba(201,168,76,.35); }
.proj-badge.badge-concept::before { background: var(--gold, #c9a84c); }
.proj-badge.badge-product { color: #9fdcec; border-color: rgba(34,211,238,.35); }
.proj-badge.badge-product::before { background: var(--cyan, #22d3ee); box-shadow: 0 0 8px rgba(34,211,238,.7); }
.proj-badge.badge-proto { color: #c9c4d8; border-color: rgba(180,170,210,.3); }
.proj-badge.badge-proto::before { background: #a99fd6; }

/* ---- Live screenshot thumbs (portfolio.io microlink pattern) ---- */
.shot-thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .6s ease, opacity .3s ease; }
.shot-fallback { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }

/* ---- WhatsApp sticky CTA (mobile) ---- */
.wa-sticky {
    position: fixed; right: 18px; bottom: 18px; z-index: 900;
    width: 54px; height: 54px; border-radius: 50%; display: none; align-items: center; justify-content: center;
    background: #25D366; box-shadow: 0 10px 26px rgba(0,0,0,.4); transition: transform .25s ease;
}
.wa-sticky:hover { transform: translateY(-3px) scale(1.04); }
.wa-sticky svg { width: 26px; height: 26px; fill: #fff; }
@media (max-width: 860px) { .wa-sticky { display: flex } }

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
    .reveal { opacity: 1 !important; transform: none !important; }
}