/* Layout Structure - Split Screen Design */

/* Mobile Header - REMOVED: Using top-nav exclusively for navigation */
/* All mobile navigation now handled by .top-nav */

.logo-text {
  width: 40px;
  height: 40px;
  background: var(--primary-color);
  color: white;
  border-radius: var(--radius-base);
  display: -webkit-flex; /* Safari flexbox prefix */
  display: flex;
  -webkit-align-items: center; /* Safari align-items prefix */
  align-items: center;
  -webkit-justify-content: center; /* Safari justify-content prefix */
  justify-content: center;
  font-size: var(--text-lg);
}

/* Hamburger Menu */
.hamburger {
  display: -webkit-flex; /* Safari flexbox prefix */
  display: flex;
  -webkit-flex-direction: column; /* Safari flex-direction prefix */
  flex-direction: column;
  -webkit-justify-content: space-around; /* Safari justify-content prefix */
  justify-content: space-around;
  width: 21px; /* Reduced by 30% from 30px */
  height: 21px; /* Reduced by 30% from 30px */
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  z-index: 10005; /* Above sidebar, top-nav, overlay */
  margin-right: 4px; /* Fixed 4px from right edge for all screen sizes */
  position: relative;
  /* Mobile touch optimization */
  pointer-events: auto;
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
}

.hamburger * {
  pointer-events: auto;
  touch-action: manipulation;
}

.hamburger span {
  width: 4px; /* Reduced by 30% from 6px - three vertical dots */
  height: 4px; /* Reduced by 30% from 6px */
  background-color: var(--text-primary);
  border-radius: 50%;
  transition: transform var(--transition-hover), box-shadow var(--transition-hover), color var(--transition-hover), background-color var(--transition-hover), border-color var(--transition-hover);
  transform-origin: center;
}

.hamburger.active span:nth-child(1) {
  -webkit-transform: none; /* Dots do not morph */
  transform: none;
}

.hamburger.active span:nth-child(2) {
  opacity: 1; /* Keep middle dot visible */
}

.hamburger.active span:nth-child(3) {
  -webkit-transform: none;
  transform: none;
}

/* Mobile Overlay */
.mobile-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-hover), visibility var(--transition-hover);
  z-index: 9998;
  /* Critical: Always disable pointer events by default to prevent blocking interactions */
  pointer-events: none !important;
  /* On desktop, completely hide it */
  display: none;
}

.mobile-overlay.active {
  opacity: 1;
  visibility: visible;
  /* Enable pointer events only when active AND on mobile */
  pointer-events: auto;
  display: block;
}

/* Top-nav must be clickable even when overlay is active */
@media (max-width: 767px) {
  .top-nav {
    pointer-events: auto !important;
    z-index: 10001 !important; /* Above overlay (9998) */
    display: flex !important;
    visibility: visible !important;
  }
  
  .top-nav-item {
    pointer-events: auto;
    touch-action: manipulation;
  }
}

/* On desktop, overlay should never exist or block interactions */
@media (min-width: 768px) {
  .mobile-overlay {
    /* Completely disable overlay on desktop - no interference at all */
    display: none !important;
    pointer-events: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    z-index: -1 !important; /* Push it behind everything */
  }
  
  .mobile-overlay.active {
    /* Even if accidentally active, disable on desktop */
    display: none !important;
    pointer-events: none !important;
  }
}

/* Main Layout Container */
.main-layout {
  display: flex;
  min-height: 100vh;
}

/* Sidebar */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: 30%;
  max-width: 400px;
  min-width: 300px;
  height: 100vh;
  background-color: var(--bg-secondary);
  border-right: 1px solid var(--border-color);
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 100;
  transition: transform var(--transition-base);
  /* Ensure sidebar scrolls independently and smoothly */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain; /* Prevent scroll chaining to body */
  /* Smooth scrolling for simultaneous scroll sync */
  will-change: scroll-position;
  /* Prevent layout shifts during scroll */
  contain: layout style paint;
  /* Ensure smooth pointer interactions */
  pointer-events: auto;
}

.sidebar-inner {
  padding: var(--space-8) var(--space-6);
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch; /* Ensure children take full width */
}

/* Main Content */
.main-content {
  margin-left: 30%;
  max-width: calc(100% - 30%);
  background-color: var(--bg-primary);
  padding-left: var(--space-8);
  padding-right: var(--space-8); /* Add right padding to balance left padding */
  position: relative;
  z-index: 1; /* Ensure content is above overlay when inactive */
  /* Ensure interactions work immediately - critical for hover effects */
  pointer-events: auto !important;
  /* Fix: Allow visible overflow to show full puppy circle */
  overflow-x: visible; /* Allow horizontal overflow for puppy circle */
  overflow-y: auto; /* Allow vertical scrolling */
}

/* Ensure main content respects sidebar max-width */
@media (min-width: 1334px) {
  .main-content {
    margin-left: 400px; /* Match sidebar max-width */
    max-width: calc(100% - 400px);
    padding-left: var(--space-8);
    padding-right: var(--space-8); /* Maintain balanced padding */
  }
  
  .footer {
    margin-left: 400px; /* Match sidebar max-width */
    max-width: calc(100% - 400px);
    padding-left: var(--space-8);
    padding-right: var(--space-8); /* Maintain balanced padding */
  }
}

/* Profile Photo */
.profile-photo {
  text-align: center;
  margin-bottom: var(--space-6);
  z-index: 10002; /* Always in front */
  position: relative;
}

.profile-photo img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid var(--primary-color);
  transition: transform var(--transition-base);
  margin: 0 auto;
  position: relative;
  z-index: 10002; /* Always in front */
}

.profile-photo img:hover {
  transform: scale(1.05);
  box-shadow: var(--shadow-lg);
}

/* Profile Header */
.profile-header {
  text-align: center;
  margin-bottom: var(--space-8);
}

.profile-name {
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}

.profile-title {
  font-size: var(--text-base);
  color: var(--text-secondary);
  font-weight: var(--font-medium);
}

/* Contact Info */
.contact-info {
  margin-bottom: var(--space-8);
}

.contact-item {
  display: -webkit-flex; /* Safari flexbox prefix */
  display: flex;
  -webkit-align-items: center; /* Safari align-items prefix */
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  color: var(--text-secondary);
  text-decoration: none;
  -webkit-transition: color var(--transition-fast); /* Safari transition prefix */
  transition: color var(--transition-fast);
  border-bottom: 1px solid var(--border-color);
}

.contact-item:last-child {
  border-bottom: none;
}

/* Removed hover effect - contact items stay static on hover */
.contact-item:hover {
  color: var(--text-secondary) !important; /* Keep original color - no hover effect */
  text-decoration: none !important; /* No underline or decoration change */
}

.contact-item .icon {
  color: var(--primary-color);
  flex-shrink: 0;
}

/* Sidebar Navigation */
.sidebar-nav {
  margin-bottom: var(--space-8);
}

.nav-item {
  display: block;
  padding: var(--space-3) var(--space-4);
  color: var(--text-secondary);
  text-decoration: none;
  border-radius: var(--radius-base);
  transition: all var(--transition-fast);
  margin-bottom: var(--space-2);
  font-weight: var(--font-medium);
}

.nav-item:hover {
  background-color: var(--primary-light);
  color: var(--primary-color);
}

.nav-item.active {
  background-color: var(--primary-color);
  color: white;
}

/* Skills Preview */
.skills-preview {
  margin-bottom: var(--space-8);
}

.skills-preview h3 {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  margin-bottom: var(--space-4);
  color: var(--text-primary);
}

.skill-bar {
  margin-bottom: var(--space-4);
}

.skill-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-2);
}

.skill-info span:first-child {
  font-weight: var(--font-medium);
  color: var(--text-primary);
}

.skill-info span:last-child {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.skill-progress {
  height: 6px;
  background-color: var(--bg-tertiary);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.skill-fill {
  height: 100%;
  background: linear-gradient(to right, var(--primary-color), var(--accent-color));
  border-radius: var(--radius-full);
  width: 0%;
  transition: width 1s ease-out;
}

/* Social Links */
.social-links {
  display: flex;
  justify-content: center;
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}

.social-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background-color: var(--bg-tertiary);
  color: var(--text-secondary);
  border-radius: 50%;
  transition: transform var(--transition-hover), box-shadow var(--transition-hover), color var(--transition-hover), background-color var(--transition-hover), border-color var(--transition-hover);
}

.social-links a:hover {
  background-color: var(--primary-color);
  color: white;
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* Download CV Button */
.download-cv {
  margin-top: auto;
}

/* Footer Availability Section */
.footer-availability {
  display: -webkit-grid; /* Safari grid prefix */
  display: grid;
  -webkit-grid-template-columns: 1fr 1fr; /* Safari grid-template-columns prefix */
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  margin-bottom: var(--space-8);
  padding-top: var(--space-6);
  padding-bottom: var(--space-6);
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}

.availability-info,
.preferred-roles {
  text-align: center;
}

.availability-info h3,
.preferred-roles h3 {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin-bottom: var(--space-3);
}

.availability-text {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.6;
}

.role-tags {
  display: -webkit-flex; /* Safari flexbox prefix */
  display: flex;
  -webkit-flex-wrap: wrap; /* Safari flex-wrap prefix */
  flex-wrap: wrap;
  -webkit-justify-content: center; /* Safari justify-content prefix */
  justify-content: center;
  gap: var(--space-2);
}

.role-tag {
  padding: var(--space-1) var(--space-3);
  background: var(--primary-color);
  color: white;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.role-tag:hover {
  background: var(--primary-hover);
  -webkit-transform: translateY(-1px); /* Safari transform prefix */
  transform: translateY(-1px);
}

/* Responsive Design for Footer Availability */
@media (max-width: 1023px) {
  .footer-availability {
    padding-left: var(--space-2);
    padding-right: var(--space-2);
  }
}

@media (max-width: 768px) {
  .footer {
    margin-left: 0; /* Full width on mobile */
    max-width: 100%;
    /* Padding removed - handled by responsive.css to avoid conflicts */
    margin-top: calc(var(--space-12) * 0.8); /* 20% reduced top margin on mobile */
  }
  
  .footer-availability {
    -webkit-grid-template-columns: 1fr; /* Safari grid-template-columns prefix */
    grid-template-columns: 1fr;
    gap: var(--space-6);
    padding-left: var(--space-2);
    padding-right: var(--space-2);
  }
  
  .role-tags {
    gap: var(--space-1);
  }
  
  .role-tag {
    padding: var(--space-1) var(--space-2);
    font-size: var(--text-xs);
  }
  
  .footer-content {
    -webkit-grid-template-columns: 1fr; /* Safari grid-template-columns prefix */
    grid-template-columns: 1fr;
    gap: var(--space-6);
    text-align: center;
    padding: 0; /* Remove padding on mobile */
  }
  
  .footer-right {
    -webkit-align-items: center; /* Safari align-items prefix */
    align-items: center;
    text-align: center;
  }
}

@media (max-width: 480px) {
  .footer {
    padding: calc(var(--space-6) * 0.8) var(--space-3); /* 20% reduced top/bottom padding on very small screens */
    margin-top: calc(var(--space-8) * 0.8); /* 20% reduced top margin on very small screens */
  }
  
  .footer-content {
    gap: var(--space-4); /* Smaller gap on very small screens */
  }
}

/* Footer */
.footer {
  background-color: var(--bg-primary); /* Match main content background */
  /* Removed border-top to avoid double line above Availability section */
  /* border-top: 1px solid var(--border-color); */
  padding: 0 var(--space-8) var(--space-8) var(--space-8); /* Remove gap above divider */
  margin-left: 30%;
  max-width: calc(100% - 30%);
  position: relative;
  z-index: 10;
  margin-bottom: 0; /* Ensure no bottom margin */
  margin-top: calc(var(--space-16) * 0.8); /* 20% reduced top margin for separation */
}

.footer-content {
  display: -webkit-grid; /* Safari grid prefix */
  display: grid;
  -webkit-grid-template-columns: 1fr 1fr 1fr; /* Safari grid-template-columns prefix */
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--space-8);
  align-items: start;
  max-width: 100%;
  padding: 0 var(--space-4);
  margin: 0 auto;
}

.footer-left {
  text-align: left;
  padding-left: var(--space-2);
}

.footer-center {
  text-align: center;
}

.footer-right {
  text-align: right;
  display: -webkit-flex; /* Safari flexbox prefix */
  display: flex;
  -webkit-flex-direction: column; /* Safari flex-direction prefix */
  flex-direction: column;
  -webkit-align-items: flex-end; /* Safari align-items prefix */
  align-items: flex-end;
  gap: var(--space-4);
  padding-right: var(--space-2);
}

.footer-name {
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}

.footer-tagline {
  color: var(--text-secondary);
  margin-bottom: var(--space-4);
}

.footer-copyright {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
}

.footer-nav {
  display: -webkit-flex; /* Safari flexbox prefix */
  display: flex;
  -webkit-flex-direction: column; /* Safari flex-direction prefix */
  flex-direction: column;
  gap: var(--space-2);
}

.footer-nav a {
  color: var(--text-secondary);
  text-decoration: none;
  -webkit-transition: color var(--transition-fast); /* Safari transition prefix */
  transition: color var(--transition-fast);
}

.footer-nav a:hover {
  color: var(--primary-color);
}

.footer-social {
  display: -webkit-flex; /* Safari flexbox prefix */
  display: flex;
  gap: var(--space-3);
}

.footer-social a {
  display: -webkit-flex; /* Safari flexbox prefix */
  display: flex;
  -webkit-align-items: center; /* Safari align-items prefix */
  align-items: center;
  -webkit-justify-content: center; /* Safari justify-content prefix */
  justify-content: center;
  width: 36px;
  height: 36px;
  background-color: var(--bg-tertiary);
  color: var(--text-secondary);
  border-radius: 50%;
  transition: transform var(--transition-hover), box-shadow var(--transition-hover), color var(--transition-hover), background-color var(--transition-hover), border-color var(--transition-hover);
}

.footer-social a:hover {
  background-color: var(--primary-color);
  color: white;
  transform: translateY(-2px);
}

/* Two Column Layout */
.two-column-layout {
  display: -webkit-grid; /* Safari grid prefix */
  display: grid;
  -webkit-grid-template-columns: 1fr 1fr; /* Safari grid-template-columns prefix */
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: start;
}

/* Grid Layouts */
.projects-grid {
  display: -webkit-grid; /* Safari grid prefix */
  display: grid;
  -webkit-grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); /* Safari grid-template-columns prefix */
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: var(--space-8);
}

.experience-timeline {
  display: -webkit-flex; /* Safari flexbox prefix */
  display: flex;
  -webkit-flex-direction: column; /* Safari flex-direction prefix */
  flex-direction: column;
  gap: var(--space-8);
}

.contact-grid {
  display: -webkit-grid; /* Safari grid prefix */
  display: grid;
  -webkit-grid-template-columns: 1fr 1fr; /* Safari grid-template-columns prefix */
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: start;
}

/* Responsive Adjustments */
@media (max-width: 1023px) {
  .sidebar {
    width: 280px;
  }
  
  .main-content {
    margin-left: 280px;
    max-width: calc(100% - 280px);
    padding-left: var(--space-6);
    padding-right: var(--space-6); /* Add right padding to balance */
  }
  
  .footer {
    margin-left: 280px;
    max-width: calc(100% - 280px);
    padding-left: var(--space-6);
    padding-right: var(--space-6); /* Add right padding to balance */
  }
  
  .projects-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .footer-content {
    grid-template-columns: 1fr;
    text-align: center;
    gap: var(--space-6);
    padding: 0 var(--space-2);
  }
  
  .footer-left,
  .footer-right {
    padding-left: 0;
    padding-right: 0;
  }
  
  .footer-right {
    align-items: center;
  }
}

@media (max-width: 767px) {
  /* Mobile header removed - top-nav handles all navigation */
  
  /* Top nav z-index above overlay - keep minimal override */
  .top-nav {
    z-index: 10001 !important; /* Above overlay (9998) */
    pointer-events: auto !important;
  }
  
  .top-nav-item {
    pointer-events: auto;
    touch-action: manipulation;
  }
  
  /* Footer name/text - Mobile: BASE */
  footer,
  .footer {
    font-size: var(--text-base) !important;
  }
  
  /* Sidebar - Mobile drawer */
  .sidebar {
    position: fixed;
    top: 0;
    left: -60vw !important; /* Force hide by default */
    width: 60vw;
    height: 100vh;
    height: 100dvh;
    z-index: 10004 !important; /* Above top-nav (10001) when open */
    transition: left 0.3s ease-in-out, visibility 0.1s ease-in-out;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    touch-action: pan-y; /* Allow vertical scroll */
    visibility: hidden; /* Hide completely when closed */
    pointer-events: none; /* Don't block clicks when hidden */
  }
  
  .sidebar.active {
    left: 0 !important; /* Force show when active */
    visibility: visible !important; /* Show when active */
    top: 0 !important; /* Start from top */
    z-index: 10004 !important; /* Above top-nav (10001) - ensure it's in front */
    pointer-events: auto; /* Enable clicks when visible */
  }
  
  /* CRITICAL: When sidebar is NOT active, ensure it doesn't block anything */
  .sidebar:not(.active) {
    pointer-events: none !important;
    visibility: hidden !important;
    z-index: -1 !important; /* Push behind everything when closed */
  }
  
  /* Main content - ALLOW SCROLLING ALWAYS */
  .main-content {
    margin-left: 0;
    max-width: 100%;
    padding-top: 66px !important; /* Increased by 10% from 60px - moves all content down */
    padding-left: var(--space-4);
    padding-right: var(--space-4);
    transition: none !important; /* Prevent any movement */
    transform: none !important;
    /* CRITICAL: Allow proper scrolling on mobile */
    overflow-x: hidden !important; /* Prevent horizontal scroll */
    overflow-y: auto !important; /* Enable vertical scrolling */
    min-height: 100vh; /* Ensure content is scrollable */
  }
  
  /* Body - ALWAYS scrollable on mobile */
  body {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    position: relative;
    height: auto !important;
    min-height: 100vh;
  }
  
  /* When sidebar is open - body remains scrollable */
  body.sidebar-open {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    position: relative;
    height: auto !important;
  }
  
  /* Allow content to remain scrollable when sidebar is open */
  body.sidebar-open .main-content,
  body.sidebar-open footer,
  body.sidebar-open .hero,
  body.sidebar-open .section {
    transform: none !important;
    transition: none !important;
  }
  
  /* Show overlay when active */
  .mobile-overlay.active {
    opacity: 1;
    visibility: visible;
  }
  
  /* Single column layouts */
  .two-column-layout {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
  
  .contact-grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
  
  .projects-grid {
    grid-template-columns: 1fr;
  }
  
  .footer-content {
    grid-template-columns: 1fr;
    text-align: center;
    gap: var(--space-6);
    padding: 0 var(--space-2);
  }
  
  .footer-left,
  .footer-right {
    padding-left: 0;
    padding-right: 0;
  }
  
  .footer-right {
    align-items: center;
  }
}

@media (max-width: 479px) {
  .container {
    padding: 0 var(--space-4);
  }
  
  .sidebar-inner {
    padding: var(--space-6) var(--space-4);
  }
  
  /* Mobile header removed - top-nav handles all navigation */
  
  /* Small Mobile Font Sizes */
  .top-nav-item {
    font-size: var(--text-xs) !important; /* Small Mobile: XS */
  }
}

/* Extra small screens - increase sidebar width */
@media (max-width: 380px) {
  .sidebar {
    width: 75vw !important;
    left: -75vw;
  }
}

/* Ultra Small Screens (≤360px) - Extra Small Font Sizes (XSS) */
@media (max-width: 360px) {
  /* Top Nav Items - Fixed 8px */
  .top-nav-item {
    font-size: 8px !important; /* Fixed 8px for ultra small screens */
  }
  
  /* Profile - Extra Small */
  .profile-name {
    font-size: var(--text-sm) !important; /* 12-14px */
  }
  
  .profile-title {
    font-size: var(--text-xss) !important; /* 8-10px */
  }
  
  /* Contact Items */
  .contact-item {
    font-size: var(--text-xs) !important; /* 10-12px */
  }
  
  /* Footer */
  .footer,
  footer {
    font-size: var(--text-xs) !important; /* 10-12px */
  }
}