/* ==========================================================================
   1. DESIGN TOKENS & SYSTEM VARIABLES
   ========================================================================== */
:root {

    /* Color Palette - High Contrast Light Theme */
    --bg-primary: #ffffff;       /* Pure White Background */
    --bg-secondary: #f5f3ff;     /* Very Light Lavender Tint */
    --text-main: #090514;        /* Rich Obsidian Black Text */
    --text-muted: #6b7280;       /* Cool Neutral Gray Text */
    --accent-color: #6d28d9;     /* Deep Security Purple */
    --accent-hover: #5b21b6;     /* Dark Purple Hover */
    --border-color: #ddd6fe;     /* Pastel Lavender Border */
    --logo-hover-fill-color: #ff0000; /* Dynamic Logo Fill on Hover */

    /* Typography & Layout Spacing */
    --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
    --max-width: 1200px;
    --sidebar-width: 280px;
    --transition-smooth: all 0.2s ease-in-out;
}


/* ==========================================================================
   2. PRODUCTION-READY RESET & BASICS
   ========================================================================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: var(--font-sans);
  background-color: var(--bg-primary);
  color: var(--text-main);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  min-height: 100svh; /* Modern small viewport height option for mobile safety */
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

ul {
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
  transition: var(--transition-smooth);
}

/* Screen Reader Optimization */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   3. MOBILE LAYOUT (Default: Mobile-First Strategy)
   ========================================================================== */

.portfolio-container {
  display: grid;
  grid-template-columns: 1fr;
  padding: 1.5rem;
  gap: 2rem;
  /* Defining precise mobile layout matrix stack based on requirements */
  grid-template-areas:
    "logo-area"
    "hero-name"
    "main-nav"
    "hero-role"
    "main-content"
    "global-footer";
}

/* Explicit layout slot mapping for mobile flattening */
.logo-area { grid-area: logo-area; }
.hero-name { grid-area: hero-name; }
.main-nav  { grid-area: main-nav; }
.hero-role { grid-area: hero-role; }
.main-content-area { grid-area: main-content; }
.global-footer     { grid-area: global-footer; }

/* Sub-containers flattened behavior on mobile */
.left-sidebar,
.sidebar-content,
.right-content-area,
.hero-header {
  display: contents; /* Dissolves wrappers safely to respect outer Grid areas */
}

/* --- Navigation Links Styles (Mobile) --- */
.main-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
}

.main-nav a {
  font-weight: 500;
  color: var(--text-muted);
  font-size: 1rem;
  outline: none;
  transition: var(--transition-smooth)
}

.main-nav a:hover,
.main-nav a:focus {
  color: var(--accent-color);
}

.main-nav a.active {
  color: var(--accent-color);
  font-weight: 600;
}

/* Focus indicator for keyboard navigators */
.main-nav a:focus-visible {
  outline: 2px solid var(--accent-color);
  outline-offset: 4px;
  border-radius: 4px;
}

/* --- Content Elements Styles --- */
.hero-name {
  font-size: 2.25rem;
  font-weight: 800;
  letter-spacing: -0.025em;
}

.hero-role {
  font-size: 1.25rem;
  color: var(--accent-color);
  font-weight: 600;
  margin-top: -0.5rem;
}

.bio-summary p {
  color: var(--text-muted);
  margin-bottom: 1.25rem;
}

.bio-summary strong {
  color: var(--text-main);
}

.bio-summary u {
  text-decoration-color: var(--accent-color);
  text-underline-offset: 4px;
}

/* --- Global Footer Area (Mobile) --- */
.global-footer {
  border-top: 1px solid var(--border-color);
  padding-top: 1.5rem;
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
}

.global-footer p {
  font-size: 0.875rem;
  color: var(--text-muted);
}

.social-links {
  display: flex;
  gap: 1.5rem;
}

.social-links a {
  color: var(--text-muted); /* Sets the static icon color to gray on load */
  display: inline-block;
  transition: var(--transition-smooth);
  outline: none;
}

.social-links a:hover,
.social-links a:focus {
  color: var(--accent-color); /* Swaps color directly to Purple on hover */
  transform: translateY(-2px); /* Smooth lift behavior */
}

.social-links a:focus-visible {
  outline: 2px solid var(--accent-color);
  outline-offset: 4px;
  border-radius: 4px;
}

.social-icon {
  display: block;
  width: 24px;
  height: 24px;
}




/* ==========================================================================
   4. DESKTOP LAYOUT (Media Query: Width 768px and Up)
   ========================================================================== */

@media (min-width: 768px) {
  .portfolio-container {
    display: grid;
    grid-template-columns: var(--sidebar-width) 1fr;
    grid-template-areas: none; /* Disables standard area mappings */
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 4rem 2rem;
    gap: 4rem;
  }
  /* --- Sidebar Left Column (Sticky Integration) --- */
  .left-sidebar {
    display: block; /* Overrides display: contents from mobile */
    width: var(--sidebar-width);
    flex-shrink: 0;
  }
  .sidebar-content {
    display: flex; /* Overrides display: contents from mobile */
    flex-direction: column;
    position: sticky;
    top: 5rem; /* Anchor padding distance from top window line */
    height: fit-content;
  }

  .logo-area {
    display: block; /* Overrides display: contents from mobile */
    margin-bottom: 2rem;
    padding-bottom: 1rem;
  }

  .logo-area a {
    display: inline-block;
    outline: none;
    /* The transform properties below are set to ensure that the logo animation is smooth and does not cause any rendering issues. The translateZ(0) and rotate(0.01deg) are common techniques to trigger GPU acceleration, which can help with performance during animations. The preserve-3d and backface-visibility properties ensure that the logo maintains its 3D appearance and does not show any unwanted artifacts during transformations. */
    transform: translateZ(0) rotate(0.01deg); 
    /* The above line is a common trick to trigger GPU acceleration for smoother animations and to prevent subpixel rendering issues during transforms.*/
    transform-style: preserve-3d;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    /* The transition is applied to the transform property, which includes scaling and translation. The cubic-bezier function creates a custom easing curve for a more dynamic animation effect. */
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    will-change: transform; /* Optimizes browser rendering for animations */
  }

  .logo-link {
    display: block;
    transition: var(--transition-smooth);
  }

  .hero-logo {
    /* The fill transition allows the logo's color to change smoothly on hover/focus without affecting the transform animation. */
    transition: fill 0.4s ease, filter 0.4s ease;
    will-change: fill, filter;
    
    /* The properties below ensure that the SVG logo maintains crisp edges and does not distort during scaling or transformations. */
    shape-rendering: geometricPrecision; /* Forces Chrome to re-draw clean vector edges */
    vector-effect: non-scaling-stroke;    /* Prevents lines from thickening during scaling transitions */

    max-width: 100%;
    height: auto;
    display: block;
    width: 100px;
    height: 100px;
  }

  /* Hover and Keyboard Focus states */
.logo-area a:hover,
.logo-area a:focus-visible {
  /* The transform combines scaling up the logo, lifting it slightly, and a very subtle rotation to create a dynamic and engaging hover effect. The scale(1.1) makes the logo 10% larger, translateY(-4px) lifts it up by 4 pixels, and rotate(0.01deg) adds a tiny rotation to enhance the visual interest without causing any noticeable distortion. */
    transform: scale(1.1) translateY(-4px) rotate(0.01deg);
    
}

.logo-area a:hover .hero-logo,
.logo-area a:focus-visible .hero-logo {
  /* The SVG path simply changes color in place without moving */
  fill: var(--logo-hover-fill-color); /* Dynamic color change on hover/focus */
}

/* Keyboard accessibility */
.logo-area a:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 4px;
    border-radius: 4px;
}

  .main-nav {
    display: block; /* Overrides display: contents from mobile */
  }

  .main-nav ul {
    flex-direction: column;
    gap: 1rem;
  }

  .main-nav a {
    font-size: 1.125rem;
    letter-spacing: 0.05em;
  }

  /* --- Right Main Column Block --- */
  .right-content-area {
    display: flex; /* Overrides display: contents from mobile */
    flex-direction: column;
    flex-grow: 1;
    min-width: 0; /* Prevents text overflow blowouts */
  }

  .hero-header {
    display: block; /* Overrides display: contents from mobile */
    margin-bottom: 2rem;
  }

  .hero-name {
    font-size: 3.5rem;
  }

  .hero-role {
    font-size: 1.5rem;
    margin-top: 0.25rem;
  }

  .bio-summary p {
    font-size: 1.125rem;
    line-height: 1.75;
    margin-bottom: 1.5rem;
  }

  /* --- Global Footer Area (Desktop) --- */
  .global-footer {
    flex-direction: row;
    justify-content: space-between;
    margin-top: 5rem;
    padding-top: 2rem;
  }
}