/* --- layout.css --- */

/* Navbar — fixed top, blur backdrop, border appears on scroll */
.navbar{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:100;
  background:var(--clr-nav-bg);
  backdrop-filter:blur(12px);
  border-bottom:1px solid transparent;
  transition:border-color .25s ease,box-shadow .25s ease;
}

/* Scrolled state — reveal bottom border + shadow */
.navbar.is-scrolled{
  border-bottom-color:var(--clr-border);
  box-shadow:0 4px 20px rgba(0,0,0,.3);
}

/* Navbar inner — flex row, constrained height */
.navbar__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:4.5rem;
}

/* Logo — mono, accent, glow on hover */
.navbar__logo{
  font-family:var(--font-mono);
  font-weight:700;
  font-size:1.1rem;
  color:var(--clr-accent);
  position:relative;
  transition:text-shadow .3s ease;
}

.navbar__logo:hover{
  text-shadow:0 0 20px var(--clr-accent-soft);
}

/* Logo prompt segment — normal text colour */
.navbar__logo-prompt{
  color:var(--clr-text);
}

/* Nav links — horizontal list, gap scales with viewport */
.navbar__menu{
  display:flex;
  gap:clamp(.8rem,2vw,1.6rem);
}

/* Link — muted, underline grows on hover/active */
.navbar__link{
  color:var(--clr-muted);
  font-size:.85rem;
  padding:.5rem 0;
  position:relative;
  transition:color .25s ease;
}

/* Accent underline pseudo-element */
.navbar__link::after{
  content:'';
  position:absolute;
  bottom:2px;
  left:0;
  right:0;
  height:2px;
  background:var(--clr-accent);
  transform:scaleX(0);
  transition:transform .25s ease;
  border-radius:2px;
}

.navbar__link:hover{
  color:var(--clr-text);
}

.navbar__link:hover::after{
  transform:scaleX(.5);
}

.navbar__link.is-active{
  color:var(--clr-accent);
}

.navbar__link.is-active::after{
  transform:scaleX(1);
}

/* Hamburger toggle — hidden on desktop, 3-line animation */
.navbar__toggle{
  display:none;
  flex-direction:column;
  gap:5px;
  padding:.5rem;
  z-index:110;
  position:relative;
}

.navbar__toggle span{
  width:24px;
  height:2px;
  background:var(--clr-text);
  border-radius:2px;
  transition:transform .3s ease,opacity .3s ease;
}

/* Open state — top/bottom bars form X, middle fades */
.navbar__toggle.is-open span:nth-child(1){
  transform:translateY(7px) rotate(45deg);
}

.navbar__toggle.is-open span:nth-child(2){
  opacity:0;
}

.navbar__toggle.is-open span:nth-child(3){
  transform:translateY(-7px) rotate(-45deg);
}

/* Navbar right actions (theme toggle, etc.) */
.navbar__actions{
  display:flex;
  align-items:center;
  gap:.8rem;
}

/* Theme toggle — circular button, rotates on hover */
.theme-toggle{
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  border:1px solid var(--clr-border);
  border-radius:50%;
  color:var(--clr-muted);
  transition:color .25s ease,border-color .25s ease,transform .25s ease;
}

.theme-toggle:hover{
  color:var(--clr-accent);
  border-color:var(--clr-accent);
  transform:rotate(25deg);
}

.theme-toggle svg{
  width:17px;
  height:17px;
}

/* Show/hide sun/moon icons based on theme */
[data-theme="dark"] .theme-toggle__moon{
  display:none;
}

[data-theme="light"] .theme-toggle__sun{
  display:none;
}

/* Mobile nav backdrop — dark overlay with blur */
.nav-backdrop{
  position:fixed;
  inset:0;
  z-index:98;
  background:rgba(0,0,0,.55);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  animation:fadeIn .25s ease;
}

@keyframes fadeIn{
  from{opacity:0}
  to{opacity:1}
}

/* Mobile menu — slide-in from right, full-height drawer */
@media (max-width:768px){
  .navbar__toggle{
    display:flex;
  }

  .navbar__menu{
    position:fixed;
    top:0;
    right:0;
    bottom:0;
    height:100dvh;
    width:min(82%,360px);
    flex-direction:column;
    gap:.4rem;
    padding:5.5rem 2.5rem 2rem;
    background:rgba(10,14,23,.92);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    border-left:1px solid var(--clr-border);
    transform:translateX(100%);
    opacity:0;
    transition:transform .4s cubic-bezier(.22,1,.36,1),opacity .35s ease;
    z-index:99;
    box-shadow:-10px 0 50px rgba(0,0,0,.5);
    overflow-y:auto;
  }

  /* Light theme overrides for mobile menu */
  [data-theme="light"] .navbar__menu{
    background:rgba(255,255,255,.95);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    box-shadow:-10px 0 40px rgba(0,0,0,.12);
  }

  /* Terminal-style prompt in mobile menu header */
  .navbar__menu::before{
    content:'danial@choopan:~$';
    position:absolute;
    top:1.8rem;
    left:2.5rem;
    font-family:var(--font-mono);
    font-size:.8rem;
    color:var(--clr-accent);
    opacity:.6;
  }

  /* Open state — slide in */
  .navbar__menu.is-open{
    transform:none;
    opacity:1;
  }

  .navbar__menu li{
    width:100%;
    list-style:none;
  }

  /* Mobile link — full-width, staggered entrance via --i delay */
  .navbar__menu .navbar__link{
    font-size:1.15rem;
    padding:.7rem 1rem;
    display:block;
    width:100%;
    border-radius:var(--radius-sm);
    color:var(--clr-muted);
    opacity:0;
    transform:translateX(20px);
    transition:opacity .35s ease,transform .35s ease,color .25s ease,background .25s ease;
    transition-delay:calc(.05s * var(--i,1));
    --i:1;
  }

  .navbar__menu.is-open .navbar__link{
    opacity:1;
    transform:none;
  }

  .navbar__menu .navbar__link:hover{
    background:var(--clr-bg-alt);
    color:var(--clr-text);
  }

  .navbar__menu .navbar__link.is-active{
    background:var(--clr-accent-soft);
    color:var(--clr-accent);
  }

  /* Hide accent underline on mobile */
  .navbar__menu .navbar__link::after{
    display:none;
  }

  /* Tighter spacing on mobile */
  .navbar__actions{
    gap:.5rem;
  }

  .theme-toggle{
    width:36px;
    height:36px;
  }
}

/* Page hero — gradient glows, top padding for fixed navbar */
.page-hero{
  padding:9rem 0 3.5rem;
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(ellipse at 70% 20%, var(--glow-a), transparent 55%),
    radial-gradient(ellipse at 20% 80%, var(--glow-b), transparent 50%),
    radial-gradient(ellipse at 95% 85%, rgba(168,85,247,.10), transparent 50%);
}

/* Hero tag — mono, accent */
.page-hero__tag{
  font-family:var(--font-mono);
  color:var(--clr-accent);
  font-size:.9rem;
  margin-bottom:.8rem;
}

/* Hero title — responsive clamp */
.page-hero__title{
  font-size:clamp(2rem,5vw,3rem);
  margin-bottom:.6rem;
}

/* Hero description — muted, constrained width */
.page-hero__desc{
  color:var(--clr-muted);
  max-width:600px;
}

/* Footer — top border, mono text, muted colour */
.footer{
  border-top:1px solid var(--clr-border);
  padding:3.5rem 0 0;
  color:var(--clr-muted);
  font-family:var(--font-mono);
  font-size:.82rem;
}

/* Footer grid — brand column wider */
.footer__grid{
  display:grid;
  grid-template-columns:2fr 1fr 1fr;
  gap:2rem;
  padding-bottom:2rem;
}

/* Brand column — logo + tagline stack */
.footer__brand{
  display:flex;
  flex-direction:column;
  gap:.6rem;
}

.footer__logo{
  font-weight:700;
  font-size:1.05rem;
  color:var(--clr-accent);
}

.footer__tagline{
  font-family:var(--font-body);
  font-size:.88rem;
  max-width:320px;
  line-height:1.6;
}

/* Column heading — uppercase, small */
.footer__col-title{
  color:var(--clr-text);
  font-size:.8rem;
  margin-bottom:.8rem;
  text-transform:uppercase;
  letter-spacing:.05em;
}

/* Link column — vertical stack */
.footer__col{
  display:flex;
  flex-direction:column;
  gap:.6rem;
}

.footer__col a{
  color:var(--clr-muted);
  transition:color .25s ease;
  width:fit-content;
}

.footer__col a:hover{
  color:var(--clr-accent);
}

/* Footer bottom bar — copyright, back-to-top */
.footer__bottom{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
  flex-wrap:wrap;
  padding:1.5rem 0;
  border-top:1px solid var(--clr-border);
}

/* Accent highlight in footer text */
.footer__accent{
  color:var(--clr-accent);
}

/* Back-to-top button — border pill, lifts on hover */
.back-top{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.4rem 1rem;
  border:1px solid var(--clr-border);
  border-radius:var(--radius-sm);
  color:var(--clr-muted);
  transition:color .25s ease,border-color .25s ease,transform .25s ease;
  cursor:pointer;
  background:none;
  font-family:var(--font-mono);
  font-size:.78rem;
}

.back-top:hover{
  color:var(--clr-accent);
  border-color:var(--clr-accent);
  transform:translateY(-3px);
}

/* Single-column footer on small screens */
@media (max-width:720px){
  .footer__grid{
    grid-template-columns:1fr;
    gap:1.5rem;
  }
}