/* Enhanced Mobile Responsiveness */

/* Root variables for better responsiveness */
:root {
  --content-width: min(1280px, 90%);
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 2rem;
  --spacing-xl: 3rem;
  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --border-radius-lg: 16px;
  --font-size-xs: clamp(0.7rem, 1vw, 0.8rem);
  --font-size-sm: clamp(0.8rem, 1.1vw, 0.95rem);
  --font-size-base: clamp(1rem, 1.2vw, 1.1rem);
  --font-size-md: clamp(1.1rem, 1.5vw, 1.25rem);
  --font-size-lg: clamp(1.3rem, 2vw, 1.5rem);
  --font-size-xl: clamp(1.5rem, 3vw, 2rem);
  --font-size-2xl: clamp(1.8rem, 4vw, 2.5rem);
  --font-size-3xl: clamp(2.5rem, 5vw, 3.5rem);
  --header-height: 70px;
  --footer-height: 80px;
  --bg-primary-rgb: 255, 255, 255;
  --bg-secondary-rgb: 248, 249, 250;
  --text-primary-rgb: 15, 23, 42;
  --text-secondary-rgb: 71, 85, 105;
  --accent-rgb: 59, 130, 246;
  --accent-hover-rgb: 96, 165, 250;
  --border-rgb: 226, 232, 240;
}

[data-theme="dark"] {
  --bg-primary-rgb: 15, 23, 42;
  --bg-secondary-rgb: 30, 41, 59;
  --text-primary-rgb: 248, 250, 252;
  --text-secondary-rgb: 148, 163, 184;
  --border-rgb: 51, 65, 85;
}

/* Better responsive container */
.container {
  width: var(--content-width);
  max-width: 100%;
  margin: 0 auto;
  padding: 0 var(--spacing-md);
}

/* Common spacing classes */
.mt-1 { margin-top: var(--spacing-sm); }
.mt-2 { margin-top: var(--spacing-md); }
.mt-3 { margin-top: var(--spacing-lg); }
.mt-4 { margin-top: var(--spacing-xl); }

.mb-1 { margin-bottom: var(--spacing-sm); }
.mb-2 { margin-bottom: var(--spacing-md); }
.mb-3 { margin-bottom: var(--spacing-lg); }
.mb-4 { margin-bottom: var(--spacing-xl); }

.py-1 { padding-top: var(--spacing-sm); padding-bottom: var(--spacing-sm); }
.py-2 { padding-top: var(--spacing-md); padding-bottom: var(--spacing-md); }
.py-3 { padding-top: var(--spacing-lg); padding-bottom: var(--spacing-lg); }
.py-4 { padding-top: var(--spacing-xl); padding-bottom: var(--spacing-xl); }

.px-1 { padding-left: var(--spacing-sm); padding-right: var(--spacing-sm); }
.px-2 { padding-left: var(--spacing-md); padding-right: var(--spacing-md); }
.px-3 { padding-left: var(--spacing-lg); padding-right: var(--spacing-lg); }
.px-4 { padding-left: var(--spacing-xl); padding-right: var(--spacing-xl); }

/* Responsive typography */
body {
  font-size: var(--font-size-base);
  line-height: 1.6;
}

h1 { font-size: var(--font-size-3xl); }
h2 { font-size: var(--font-size-2xl); }
h3 { font-size: var(--font-size-xl); }
h4 { font-size: var(--font-size-lg); }
h5 { font-size: var(--font-size-md); }
h6 { font-size: var(--font-size-base); }

/* Enhanced Responsive Grid System */
.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--spacing-md);
}

.col-12 { grid-column: span 12; }
.col-11 { grid-column: span 11; }
.col-10 { grid-column: span 10; }
.col-9 { grid-column: span 9; }
.col-8 { grid-column: span 8; }
.col-7 { grid-column: span 7; }
.col-6 { grid-column: span 6; }
.col-5 { grid-column: span 5; }
.col-4 { grid-column: span 4; }
.col-3 { grid-column: span 3; }
.col-2 { grid-column: span 2; }
.col-1 { grid-column: span 1; }

@media (max-width: 1024px) {
  .col-lg-12 { grid-column: span 12; }
  .col-lg-6 { grid-column: span 6; }
  .col-lg-4 { grid-column: span 4; }
  .col-lg-3 { grid-column: span 3; }
}

@media (max-width: 768px) {
  .col-md-12 { grid-column: span 12; }
  .col-md-6 { grid-column: span 6; }
  .col-md-4 { grid-column: span 4; }
  
  .grid {
    gap: var(--spacing-sm);
  }
}

@media (max-width: 480px) {
  .col-sm-12 { grid-column: span 12; }
  .col-sm-6 { grid-column: span 6; }
  
  :root {
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
  }
}

/* Flexible images */
img {
  max-width: 100%;
  height: auto;
}

/* Touch-friendly tap targets */
button, 
.btn,
a.btn,
input[type="button"],
input[type="submit"] {
  min-height: 44px;
  min-width: 44px;
  padding: 0.6rem 1.25rem;
}

/* Mobile-specific enhancements */
@media (max-width: 768px) {
  .hide-md {
    display: none !important;
  }
  
  .hero-content {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }
  
  .hero-stats {
    order: -1;
  }
  
  .contact-container {
    grid-template-columns: 1fr !important;
  }
  
  .section-container {
    padding: 3rem 1.5rem;
  }
  
  .scroll-indicator {
    display: none;
  }
}

@media (max-width: 480px) {
  .hide-sm {
    display: none !important;
  }
  
  .hero-name {
    font-size: clamp(2rem, 8vw, 2.5rem) !important;
    text-align: center;
  }
  
  .hero-title {
    justify-content: center;
    font-size: clamp(1.2rem, 5vw, 1.5rem) !important;
  }
  
  .hero-cta {
    flex-direction: column;
    width: 100%;
  }
  
  .cta-button {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
  
  .skill-tab span {
    display: none;
  }
  
  .skill-tab i {
    font-size: 1.2rem;
    margin: 0;
  }
}

/* Mobile touch improvements */
@media (hover: none) {
  a, button {
    -webkit-tap-highlight-color: rgba(var(--accent-rgb), 0.2);
  }
  
  .nav-links a, .btn-download, .tag, .social-link, .hero-cta a {
    transition: transform 0.15s ease;
  }
  
  .btn:active, .tag:active, .social-link:active, .skill-tab:active {
    transform: scale(0.95);
  }
}

/* Prevent layout shift from font loading */
html {
  font-display: swap;
}

/* Safe areas for modern phones */
@supports (padding: max(0px)) {
  body {
    padding-left: min(1rem, env(safe-area-inset-left));
    padding-right: min(1rem, env(safe-area-inset-right));
  }
}

/* Make "notch" friendly */
@supports (padding-top: env(safe-area-inset-top)) {
  .main-header {
    padding-top: env(safe-area-inset-top);
  }
}