/* ==========================================================================
   DROP DRIP — shared header stylesheet
   Extracted from the main site's style.css so the header can be loaded
   standalone (e.g. on WordPress) without needing the rest of the site's
   CSS. Uses the exact same class names and design tokens as the main
   site for a pixel-accurate match — edit style.css's own header rules
   AND this file together if either changes, or they'll drift apart.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Space+Grotesk:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap');

:root{
  --bg: #0a0a0b;
  --line: rgba(244,240,232,.14);
  --ink: #f4f0e8;
  --ink-dim: #b3b0aa;
  --ink-faint: #6a6864;

  --orange: #ff4d15;
  --orange-2: #ffb020;
  --acid: #ccff33;

  --font-display: 'Bebas Neue', Impact, sans-serif;
  --font-mono: 'Space Mono', monospace;

  --edge: clamp(20px, 6vw, 64px);
  --ease: cubic-bezier(.22,1,.36,1);
}

@media (prefers-reduced-motion: reduce){
  .site-nav, .site-nav *, .mobile-menu, .mobile-menu *{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}
.site-nav a:focus-visible, .site-nav button:focus-visible,
.mobile-menu a:focus-visible, .mobile-menu button:focus-visible{
  outline: 2px solid var(--acid); outline-offset: 3px;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.6em;
  font-family: var(--font-mono);
  font-size: .82rem;
  letter-spacing:.08em;
  text-transform: uppercase;
  padding: 1.05em 1.7em;
  border: 2px solid var(--orange);
  color: var(--ink);
  position: relative;
  overflow:hidden;
  transition: color .35s var(--ease), border-color .35s;
  will-change: transform;
  background:none;
}
.btn::before{
  content:"";
  position:absolute; inset:0;
  background: var(--orange);
  transform: translateY(101%);
  transition: transform .38s var(--ease);
  z-index:-1;
}

.btn:hover::before, .btn:focus-visible::before{ transform: translateY(0); }
.btn:hover, .btn:focus-visible{ color: var(--bg); }
.btn .arrow{ transition: transform .3s var(--ease); position:relative; }
.btn:hover .arrow{ transform: translateX(4px); }
.magnetic-wrap{ display:inline-block; }

/* solid, permanently-filled orange button — distinct from the outline
   .btn (which only fills orange on hover); used by the Explore Designs
   trigger */
.btn-solid{
  display:inline-flex; align-items:center; gap:.6em;
  font-family: var(--font-mono);
  font-size:.82rem;
  letter-spacing:.08em;
  text-transform: uppercase;
  padding: 1.05em 1.7em;
  border: 2px solid var(--orange);
  background: var(--orange);
  color: var(--bg);
  border-radius: 2px;
  transition: background .25s var(--ease), border-color .25s, transform .2s;
}
.btn-solid:hover, .btn-solid:focus-visible{
  background: var(--orange-2);
  border-color: var(--orange-2);
  transform: translateY(-2px);
}

/* ---------- nav ---------- */
.site-nav{
  position: sticky; top:0; z-index: 500;
  display:flex; align-items:center; justify-content:space-between;
  padding: 16px var(--edge);
  background: rgba(10,10,11,.6);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s, background .3s;
}
.site-nav.is-scrolled{ background: rgba(10,10,11,.92); border-color: var(--line); }

.logo-link{ display:inline-flex; align-items:center; position:relative; }
.logo-svg{ width: clamp(128px, 22vw, 168px); height:auto; display:block; }

.nav-links{
  display:none;
  font-family: var(--font-mono);
  font-size:.8rem;
  letter-spacing:.06em;
  text-transform: uppercase;
  gap: 2rem;
}
.nav-links a{ position:relative; padding-block:.2em; }
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:0; height:2px; width:0;
  background: var(--acid); transition: width .3s var(--ease);
}
.nav-links a:hover::after{ width:100%; }

.nav-cta{ display:none; }

.burger{ width: 34px; height: 22px; position: relative; z-index: 600; background:none; border:none; padding:0; cursor:pointer; }
.burger span{
  position:absolute; left:0; right:0; height:2px; background: var(--ink);
  transition: transform .3s var(--ease), opacity .2s, top .3s var(--ease);
}
.burger span:nth-child(1){ top:0; }
.burger span:nth-child(2){ top:10px; }
.burger span:nth-child(3){ top:20px; }
.nav-open .burger span:nth-child(1){ top:10px; transform: rotate(45deg); background: var(--orange); }
.nav-open .burger span:nth-child(2){ opacity:0; }
.nav-open .burger span:nth-child(3){ top:10px; transform: rotate(-45deg); background: var(--orange); }

.mobile-menu{
  position: fixed; inset:0; z-index: 400;
  background: var(--bg);
  display:flex; flex-direction:column; justify-content:center;
  padding: var(--edge);
  transform: translateY(-100%);
  transition: transform .5s var(--ease);
}
.nav-open .mobile-menu{ transform: translateY(0); }
.mobile-menu ul{ display:flex; flex-direction:column; gap: .2em; list-style:none; margin:0; padding:0; }
.mobile-menu a{
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 12vw, 3.6rem);
  text-transform: uppercase;
  color: var(--ink-dim);
  transition: color .25s, transform .25s;
  display:inline-block;
  text-decoration:none;
}
.mobile-menu a:hover{ color: var(--orange); transform: translateX(.12em); }
.mobile-menu .mobile-foot{
  margin-top: 2.2em;
  font-family: var(--font-mono);
  font-size:.76rem; color: var(--ink-faint); letter-spacing:.08em;
}

@media (min-width: 860px){
  .nav-links{ display:flex; align-items:center; }
  .nav-cta{ display:inline-flex; }
  .burger{ display:none; }
  .mobile-menu{ display:none; }
}

/* ---------- "Explore Designs" mega menu (desktop) ----------
   .nav-explore is just a plain flex item inside .nav-links now, so its
   trigger link (.nav-explore-trigger) is styled identically to every
   other nav link via the existing ".nav-links a" rules above — no
   separate button styling. Only the hover-triggered image panel below
   needs its own rules. */
.nav-explore{ position:relative; display:inline-flex; align-items:center; }
.nav-explore-trigger{ cursor:pointer; }

/* the panel sits flush against the trigger (top:100%, no real gap) and
   uses its own padding-top to create the visual gap instead — so the
   whole padded area stays part of the hoverable box and the cursor
   never crosses a "dead zone" between trigger and panel that would
   drop the :hover state before it reaches the visible panel */
.nav-explore-panel{
  position:absolute;
  top:100%;
  left:50%;
  transform: translateX(-50%);
  width: min(720px, 86vw);
  padding-top: 20px;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition: opacity .25s var(--ease), visibility .25s;
  z-index: 600;
}
.nav-explore:hover .nav-explore-panel,
.nav-explore:focus-within .nav-explore-panel{
  opacity:1; visibility:visible; pointer-events:auto;
}
.nav-explore-panel-inner{
  background: rgba(10,10,11,.97);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 20px;
}
.nav-explore-row{
  display:flex; gap:14px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  padding-bottom:8px;
  scrollbar-width: thin;
  scrollbar-color: var(--orange) transparent;
}
.nav-explore-row::-webkit-scrollbar{ height:6px; }
.nav-explore-row::-webkit-scrollbar-thumb{ background:var(--orange); border-radius:3px; }
.nav-explore-item{
  flex:0 0 auto;
  width:150px; height:190px;
  scroll-snap-align:start;
  border-radius:3px;
  overflow:hidden;
  border:1px solid var(--line);
  transition: border-color .2s, transform .2s;
  display:block;
}
.nav-explore-item:hover{ border-color:var(--orange); transform:translateY(-3px); }
.nav-explore-item img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ---------- "Explore Designs" accordion (mobile menu) ---------- */
.mobile-explore-trigger{
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 12vw, 3.6rem);
  text-transform: uppercase;
  color: var(--ink-dim);
  background:none; border:none; padding:0;
  display:flex; align-items:center; gap:.25em;
  cursor:pointer;
  transition: color .25s;
}
.mobile-explore-trigger:hover{ color: var(--orange); }
.mobile-explore-trigger::after{
  content:"+";
  font-size:.5em;
  transition: transform .3s var(--ease);
}
.mobile-explore.is-open .mobile-explore-trigger::after{ transform: rotate(45deg); }

.mobile-explore-panel{
  max-height:0;
  overflow:hidden;
  transition: max-height .4s var(--ease);
}
.mobile-explore.is-open .mobile-explore-panel{ max-height:220px; }

.mobile-explore-row{
  display:flex; gap:10px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  padding: 14px 2px 6px;
}
.mobile-explore-item{
  flex:0 0 auto;
  width:120px; height:150px;
  scroll-snap-align:start;
  border-radius:3px;
  overflow:hidden;
  border:1px solid var(--line);
  display:block;
}
.mobile-explore-item img{ width:100%; height:100%; object-fit:cover; display:block; }