/* ============================================================
   Premium Developer Portfolio - Navigation Bar Stylesheet
   ------------------------------------------------------------
   Sections in this file:
     1. Root Variables (colors, fonts, spacing, sizing)
     2. Global Reset (consistent baseline across browsers)
     3. Base Typography (font families and base text styles)
     4. Layout & Header (sticky bar, backdrop blur, max width)
     5. Flexbox Structure (logo left, links/button right)
     6. Logo Styling (Space Grotesk Bold)
     7. Navigation Links (Inter, animated underline, hover)
     8. Hire Me Button (rounded, lift + glow on hover)
     9. Hamburger Menu (visual only, mobile/tablet)
    10. Accessibility (visible focus styles)
    11. Responsive Design (media queries for tablet & mobile)
   ============================================================ */


/* ============================================================
   1. ROOT VARIABLES
   ------------------------------------------------------------
   CSS variables (custom properties) let us reuse values and make
   the theme easy to update. We store the color palette, fonts,
   spacing scale, and sizing here so the whole navbar stays
   consistent. The 8px spacing system is reflected in the
   --space-* variables (8, 16, 24, 32 ...).
   ============================================================ */
:root {
  /* ---- Color Palette ---- */
  --color-bg: #0F172A;        /* Deep navy background */
  --color-bg-transparent: rgba(15, 23, 42, 0.80); /* Same color, slightly transparent for blur */
  --color-surface: #1E293B;   /* Surface/cards */
  --color-primary: #38BDF8;   /* Primary accent (hover/links) */
  --color-accent: #F59E0B;    /* Warm accent (button glow) */
  --color-text: #F8FAFC;      /* Primary text */
  --color-muted: #94A3B8;     /* Muted/secondary text */

  /* ---- Typography ---- */
  --font-heading: "Space Grotesk", sans-serif; /* Logo & headings */
  --font-body: "Inter", sans-serif;            /* Nav links & UI text */

  /* ---- Sizing ---- */
  --navbar-height: 80px;       /* Approximate navbar height */
  --max-width: 1200px;         /* Maximum content width */
  --button-radius: 999px;      /* Fully rounded pill button */

  /* ---- 8px Spacing System ---- */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;

  /* ---- Transitions (smooth 300ms everywhere) ---- */
  --transition-speed: 300ms;
  --transition-ease: cubic-bezier(0.4, 0, 0.2, 1); /* Material-style easing */

  /* ---- Shadows / Glow ---- */
  --shadow-button: 0 4px 14px rgba(56, 189, 248, 0.25);
  --shadow-button-hover: 0 8px 24px rgba(56, 189, 248, 0.45);
}


/* ============================================================
   2. GLOBAL RESET
   ------------------------------------------------------------
   Different browsers apply different default styles (margins,
   paddings, box-sizing). A reset creates a predictable baseline
   so our layout behaves consistently everywhere. We also set
   box-sizing: border-box so padding/borders don't expand widths.
   ============================================================ */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  /* Smooth scrolling when anchor links (#home, #about) are clicked */
  scroll-behavior: smooth;
}


/* ============================================================
   3. BASE TYPOGRAPHY
   ------------------------------------------------------------
   We set the default body font to Inter (UI text) and a base
   color. The logo and headings will override the font-family
   with Space Grotesk where needed.
   ============================================================ */
body {
  font-family: var(--font-body);
  color: var(--color-text);
  background-color: var(--color-bg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;   /* Crisper text on macOS/Windows */
  -moz-osx-font-smoothing: grayscale;
}


/* ============================================================
   4. LAYOUT & HEADER
   ------------------------------------------------------------
   The header is the sticky top bar. "position: sticky" keeps it
   pinned to the top while scrolling. The semi-transparent
   background plus backdrop-filter create the premium frosted
   glass effect. A subtle bottom border separates it from content.
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;

  width: 100%;
  height: var(--navbar-height);

  /* Slight transparency so content blurs behind the bar */
  background-color: var(--color-bg-transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px); /* Safari support */

  /* Thin border to visually separate navbar from page content */
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}


/* ============================================================
   5. FLEXBOX STRUCTURE
   ------------------------------------------------------------
   The .navbar is the inner container. It is centered with
   auto margins and capped at 1200px so large screens stay
   readable. Flexbox aligns items vertically (center) and
   pushes the logo to the left, links + button to the right.
   ============================================================ */
.navbar {
  max-width: var(--max-width);
  height: 100%;
  margin: 0 auto;            /* Center the container horizontally */
  padding: 0 var(--space-4); /* 32px side padding for breathing room */

  display: flex;
  align-items: center;       /* Vertically center all children */
  justify-content: space-between; /* Logo left, links/button right */
  gap: var(--space-4);       /* Consistent gap between flex items */
}


/* ============================================================
   6. LOGO STYLING
   ------------------------------------------------------------
   The logo uses Space Grotesk Bold for a modern, distinctive
   look. It is styled as a link but has no underline. A subtle
   color transition on hover keeps it feeling interactive.
   ============================================================ */
.logo {
  font-family: var(--font-heading);
  font-weight: 700;          /* Space Grotesk Bold */
  font-size: 1.5rem;         /* 24px - prominent but balanced */
  letter-spacing: -0.02em;   /* Slight tightening for a premium feel */
  color: var(--color-text);
  text-decoration: none;     /* Remove default link underline */

  transition: color var(--transition-speed) var(--transition-ease);
}

.logo:hover {
  color: var(--color-primary); /* Subtle brand-colored hover */
}


/* ============================================================
   7. NAVIGATION LINKS
   ------------------------------------------------------------
   The links list is displayed as a horizontal row using Flexbox.
   Each link uses Inter and a muted color by default. On hover
   the color changes to the primary blue and an animated
   underline grows from left to right using a pseudo-element.
   ============================================================ */
.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-4);       /* 32px gap between menu items */
  list-style: none;          /* Remove default bullet points */
}

/* Each navigation link */
.nav-link {
  position: relative;        /* Needed for the underline pseudo-element */
  display: inline-block;

  font-family: var(--font-body);
  font-weight: 500;
  font-size: 1rem;           /* 16px - comfortable reading size */
  color: var(--color-muted);
  text-decoration: none;

  padding: var(--space-1) 0; /* Vertical padding enlarges the click area */
  transition: color var(--transition-speed) var(--transition-ease);
}

/* Hover state: change text color to primary blue */
.nav-link:hover {
  color: var(--color-primary);
}

/*
   Animated Underline
   ------------------------------------------------------------
   We use the ::after pseudo-element as the underline. It starts
   with width: 0 and grows to 100% on hover. The transform-origin
   set to "left" makes it grow from the left edge. The transition
   on width creates the smooth animation.
*/
.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;

  width: 0;                  /* Hidden by default */
  height: 2px;               /* Thin underline */
  background-color: var(--color-primary);
  border-radius: 2px;        /* Slightly rounded ends */

  transition: width var(--transition-speed) var(--transition-ease);
}

/* Grow the underline on hover and keyboard focus */
.nav-link:hover::after,
.nav-link:focus-visible::after {
  width: 100%;
}


/* ============================================================
   8. HIRE ME BUTTON
   ------------------------------------------------------------
   A premium rounded (pill) call-to-action. It has a gradient
   background using the primary color, rounded corners, and a
   soft glow shadow. On hover it lifts up (-2px) and the glow
   intensifies, giving a tactile, premium micro-interaction.
   ============================================================ */
.btn-hire-me {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  color: var(--color-bg);    /* Dark text on bright button for contrast */

  text-decoration: none;
  white-space: nowrap;       /* Prevent the text from wrapping */

  padding: var(--space-1) var(--space-3); /* 8px vertical, 24px horizontal */
  border-radius: var(--button-radius);    /* Fully rounded pill */
  border: none;

  /* Gradient background for a richer, premium look */
  background: linear-gradient(135deg, var(--color-primary), #0EA5E9);

  /* Soft glow shadow */
  box-shadow: var(--shadow-button);

  cursor: pointer;
  transition:
    transform var(--transition-speed) var(--transition-ease),
    box-shadow var(--transition-speed) var(--transition-ease);
}

/* Hover: lift the button up and intensify the glow */
.btn-hire-me:hover {
  transform: translateY(-2px);          /* Subtle lift */
  box-shadow: var(--shadow-button-hover); /* Stronger glow */
}

/* Active/pressed state: button sinks slightly for feedback */
.btn-hire-me:active {
  transform: translateY(0);
}


/* ============================================================
   9. HAMBURGER MENU (Visual Only - Mobile/Tablet)
   ------------------------------------------------------------
   The hamburger is hidden by default on desktop and shown on
   smaller screens via a media query below. It consists of three
   horizontal lines. No JavaScript is used, so it is purely a
   visual placeholder for a future implementation.
   ============================================================ */
.hamburger {
  display: none;             /* Hidden on desktop */
  flex-direction: column;
  justify-content: space-between;

  width: 32px;
  height: 24px;
  padding: 0;
  border: none;
  background: transparent;

  cursor: pointer;
}

/* Each line of the hamburger icon */
.hamburger-line {
  display: block;
  width: 100%;
  height: 3px;
  background-color: var(--color-text);
  border-radius: 3px;        /* Rounded ends for a softer look */
  transition: background-color var(--transition-speed) var(--transition-ease);
}

/* Change icon color on hover for feedback */
.hamburger:hover .hamburger-line {
  background-color: var(--color-primary);
}


/* ============================================================
   10. ACCESSIBILITY - VISIBLE FOCUS STYLES
   ------------------------------------------------------------
   Keyboard users need to see where focus is. We use
   :focus-visible to show a clear outline only for keyboard
   navigation (not for mouse clicks). This keeps the design
   clean for mouse users while staying accessible.
   ============================================================ */
.nav-link:focus-visible,
.logo:focus-visible,
.btn-hire-me:focus-visible,
.hamburger:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 4px;
  border-radius: 4px;
}


/* ============================================================
   11. RESPONSIVE DESIGN - MEDIA QUERIES
   ------------------------------------------------------------
   We use two breakpoints:
     - Tablet  (max-width: 900px): hide the nav links, show
       the hamburger, keep the Hire Me button visible.
     - Mobile  (max-width: 600px): tighten spacing and hide
       the Hire Me button so the bar stays uncluttered. The
       hamburger remains for the mobile menu structure.
   ============================================================ */

/* ---- Tablet and smaller ---- */
@media (max-width: 900px) {
  .navbar {
    padding: 0 var(--space-3); /* 24px side padding on smaller screens */
    gap: var(--space-3);
  }

  /* Hide the horizontal links list; the hamburger takes over */
  .nav-links {
    display: none;
  }

  /* Show the hamburger icon */
  .hamburger {
    display: flex;
  }
}

/* ---- Mobile ---- */
@media (max-width: 600px) {
  .navbar {
    padding: 0 var(--space-2); /* 16px side padding on phones */
  }

  .logo {
    font-size: 1.25rem;        /* Slightly smaller logo on phones */
  }

  /*
     Hide the Hire Me button on small phones to keep the navbar
     clean. In a real app it would appear inside the mobile menu.
  */
  .btn-hire-me {
    display: none;
  }
}


/* ============================================================
   PAGE SPACER (demo only)
   ------------------------------------------------------------
   A placeholder area so the sticky navbar is visible above
   content. In a real portfolio this would be the hero section.
   ============================================================ */
.page-spacer {
  min-height: 120vh;
  background:
    radial-gradient(circle at 20% 20%, rgba(56, 189, 248, 0.08), transparent 40%),
    radial-gradient(circle at 80% 60%, rgba(245, 158, 11, 0.06), transparent 40%),
    var(--color-bg);
}