/* Shared styles for nikhiljivan.com (replaces Tailwind CDN + Font Awesome) */

:root{
  --paper:#f5e8c7; --ink:#8b4513; --amber:#d2a679;
  --nav-h: 4.25rem;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
}

/* ---------- Minimal reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body,h1,h2,p,ul{ margin:0; }
ul{ padding:0; list-style:none; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
svg{ display:block; }

body{
  font-family:'VT323', ui-monospace, Menlo, monospace;
  background:#000;
  color:var(--paper);
  letter-spacing:1px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  -webkit-tap-highlight-color:transparent;
}

/* ---------- Full-bleed background sections ---------- */
.scene{
  position:relative;
  min-height:100vh;      /* fallback */
  min-height:100svh;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  padding:
    calc(var(--nav-h) + var(--safe-top) + 1rem)
    calc(1.25rem + var(--safe-right))
    calc(2rem + var(--safe-bottom))
    calc(1.25rem + var(--safe-left));
}
.scene::before,
.scene::after{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; }
.scene::before{
  background-color:#111;
  background-size:cover; background-position:center; background-repeat:no-repeat;
}
.scene > *{ position:relative; z-index:1; }

/* ---------- Nav ---------- */
#navbar{
  position:fixed; top:0; left:0; right:0; z-index:30;
  padding-top:var(--safe-top);
}
.nav-bar{
  width:100%; max-width:1280px; margin:0 auto;
  min-height:var(--nav-h);
  padding:0 calc(1rem + var(--safe-right)) 0 calc(1rem + var(--safe-left));
  display:flex; justify-content:space-between; align-items:center;
}
.brand{ font-size:1.875rem; line-height:1; font-weight:700; }
.blend-text{ text-shadow:0 2px 6px rgba(0,0,0,.45); }

.nav-links{ display:none; gap:1.5rem; }
.nav-link{
  position:relative; font-size:1.25rem; line-height:1.75rem;
  transition: color .2s ease, transform .2s ease, text-shadow .2s ease;
}
.nav-link[aria-current="page"]{ color:var(--amber); }

#menu-btn{
  width:44px; height:44px; margin-right:-10px;
  display:flex; align-items:center; justify-content:center;
}
#menu-btn svg{ width:30px; height:30px; filter:drop-shadow(0 2px 4px rgba(0,0,0,.5)); }
#menu-btn .icon-close{ display:none; }
#menu-btn[aria-expanded="true"] .icon-open{ display:none; }
#menu-btn[aria-expanded="true"] .icon-close{ display:block; }

#mobile-menu{
  background:rgba(12,9,6,.97);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  padding:.5rem calc(1.25rem + var(--safe-right)) 1.25rem calc(1.25rem + var(--safe-left));
}
#mobile-menu[hidden]{ display:none; }
#mobile-menu .nav-link{ display:block; padding:.6rem 0; font-size:1.5rem; }
#mobile-menu .socials{
  justify-content:center; gap:1.75rem;
  padding-top:1rem; margin-top:.5rem;
  border-top:1px solid rgba(255,255,255,.15);
}

@media (min-width:768px){
  .nav-links{ display:flex; }
  #menu-btn, #mobile-menu{ display:none !important; }

  .nav-link::after{
    content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px;
    background:var(--amber); border-radius:999px; opacity:.9;
    transform:scaleX(0); transform-origin:left; transition:transform .25s ease;
  }
  .nav-link[aria-current="page"]::after{ transform:scaleX(1); }
}
@media (hover:hover) and (min-width:768px){
  .nav-link:hover{
    transform:translateY(-1px) scale(1.08);
    color:var(--paper);
    text-shadow:0 0 10px rgba(245,232,199,.45);
  }
  .nav-link:hover::after{ transform:scaleX(1); }
}
.nav-link:active{ color:var(--amber); }

/* ---------- Social icons ---------- */
.socials{ display:flex; flex-wrap:wrap; align-items:center; gap:1.25rem; }
.social-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; margin:-10px;   /* big tap target, same visual spacing */
  transition: transform .25s ease, color .25s ease;
}
.social-icon svg{ width:24px; height:24px; fill:currentColor; }
@media (hover:hover){ .social-icon:hover{ transform:scale(1.15); color:var(--amber); } }

/* ---------- Shared headings ---------- */
.bar{ width:84px; height:3px; margin:.6rem 0 1.25rem; background:var(--amber); border-radius:999px; opacity:.9; }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ transition:none !important; animation:none !important; }
}