/* 
  Custom Premium Stylesheet for Muhammad Israr Ahmad Portfolio
  Built on top of Bootstrap 5 with Dark Mode & Interactivity Extensions
*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,700;1,400&display=swap');

:root {
  --font-sans: 'Inter', sans-serif;
  --font-serif: 'Playfair Display', serif;
  
  /* Modern HSL Color Palette (Zinc/Noir Accents) - LIGHT MODE */
  --bg-color: #ffffff;
  --bg-color-alt: #f4f4f5; /* zinc-100 */
  --text-color: #27272a; /* zinc-800 */
  --text-muted: #71717a; /* zinc-500 */
  
  --primary-accent: #18181b; /* zinc-900 */
  --primary-hover: #09090b; /* zinc-950 */
  --btn-text: #ffffff;
  
  --card-bg: #ffffff;
  --card-border: #e4e4e7; /* zinc-200 */
  --section-bg-alt: #f4f4f5; /* zinc-100 */
  
  --badge-bg: #e4e4e7;
  --badge-text: #27272a;
  
  --accent-highlight: #0d9488; /* Teal-600 */
  --accent-glow: rgba(13, 148, 136, 0.1);
  --ambient-color: rgba(24, 24, 27, 0.02);
  
  --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --border-radius-custom: 1.25rem; /* 20px */
}

/* DARK MODE OVERRIDES */
[data-theme="dark"] {
  --bg-color: #09090b; /* zinc-950 */
  --bg-color-alt: #18181b; /* zinc-900 */
  --text-color: #f4f4f5; /* zinc-100 */
  --text-muted: #a1a1aa; /* zinc-400 */
  
  --primary-accent: #f4f4f5; /* zinc-100 */
  --primary-hover: #e4e4e7; /* zinc-200 */
  --btn-text: #09090b;
  
  --card-bg: #18181b; /* zinc-900 */
  --card-border: #27272a; /* zinc-800 */
  --section-bg-alt: #18181b; /* zinc-900 */
  
  --badge-bg: #27272a;
  --badge-text: #f4f4f5;
  
  --accent-highlight: #2dd4bf; /* Teal-400 */
  --accent-glow: rgba(45, 212, 191, 0.15);
  --ambient-color: rgba(45, 212, 191, 0.04);
}

/* Base Body Styles */
body {
  font-family: var(--font-sans);
  color: var(--text-color);
  background-color: var(--bg-color);
  overflow-x: hidden;
  line-height: 1.6;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Bootstrap class overrides in dark theme */
[data-theme="dark"] .bg-white,
[data-theme="dark"] .bg-body {
  background-color: var(--bg-color) !important;
}

[data-theme="dark"] .bg-light {
  background-color: var(--bg-color-alt) !important;
}

[data-theme="dark"] .text-dark,
[data-theme="dark"] .text-body {
  color: var(--text-color) !important;
}

[data-theme="dark"] .text-muted,
[data-theme="dark"] .text-muted-custom {
  color: var(--text-muted) !important;
}

[data-theme="dark"] .card {
  background-color: var(--card-bg) !important;
  border-color: var(--card-border) !important;
}

[data-theme="dark"] hr,
[data-theme="dark"] .border-light {
  border-color: var(--card-border) !important;
}

/* Offcanvas & Modals in Dark Mode */
[data-theme="dark"] .offcanvas {
  background-color: var(--bg-color) !important;
  color: var(--text-color) !important;
}

[data-theme="dark"] .offcanvas-header {
  border-bottom: 1px solid var(--card-border);
}

[data-theme="dark"] .modal-content {
  background-color: var(--card-bg) !important;
  color: var(--text-color) !important;
  border: 1px solid var(--card-border);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer {
  border-color: var(--card-border) !important;
}

[data-theme="dark"] .btn-close {
  filter: invert(1);
}

/* Form Controls in Dark Mode */
[data-theme="dark"] .form-control-custom {
  background-color: #09090b !important;
  border-color: var(--card-border) !important;
  color: var(--text-color) !important;
}

[data-theme="dark"] .form-control-custom:focus {
  border-color: var(--accent-highlight) !important;
}

/* Serif Headings */
h1, h2, h3, .font-serif {
  font-family: var(--font-serif);
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: var(--section-bg-alt);
}
::-webkit-scrollbar-thumb {
  background: var(--text-muted);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--accent-highlight);
}

/* Helper utilities */
.text-muted-custom {
  color: var(--text-muted);
}
.italic-header {
  font-style: italic;
  font-weight: 400;
  color: var(--text-muted);
}

/* Ambient Radial Glow */
.ambient-bg-glow {
  position: absolute;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, var(--accent-glow) 0%, rgba(0,0,0,0) 70%);
  z-index: -1;
  pointer-events: none;
  filter: blur(40px);
  border-radius: 50%;
  opacity: 0.8;
}

/* Header & Glassmorphism Navbar */
header.custom-navbar {
  transition: var(--transition-smooth);
}
header.custom-navbar.scrolled {
  background-color: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--card-border);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.03);
}
[data-theme="dark"] header.custom-navbar.scrolled {
  background-color: rgba(9, 9, 11, 0.85) !important;
  border-bottom: 1px solid var(--card-border);
}

.nav-link-custom {
  position: relative;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-color) !important;
  transition: var(--transition-smooth);
}
.nav-link-custom::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: -4px;
  left: 0;
  background-color: var(--accent-highlight);
  transition: var(--transition-smooth);
}
.nav-link-custom:hover::after,
.nav-link-custom.active::after {
  width: 100%;
}

/* Theme Switcher Button */
.theme-toggle-btn {
  background: transparent;
  border: 1px solid var(--card-border);
  color: var(--text-color);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition-smooth);
}
.theme-toggle-btn:hover {
  background-color: var(--section-bg-alt);
  transform: scale(1.05);
}

/* Typing text animation */
.typing-cursor {
  border-right: 2.5px solid var(--accent-highlight);
  animation: blink-cursor 0.75s step-end infinite;
}
@keyframes blink-cursor {
  from, to { border-color: transparent }
  50% { border-color: var(--accent-highlight) }
}

/* Hero Section Image & Rotate Frame */
.hero-image-container {
  position: relative;
  display: inline-block;
}
.hero-frame-bg {
  position: absolute;
  inset: 0;
  background-color: var(--primary-accent);
  border-radius: 2.5rem;
  transform: rotate(3deg);
  z-index: -1;
  transition: var(--transition-smooth);
}
.hero-frame-border {
  position: absolute;
  inset: 0;
  border: 2px solid var(--card-border);
  border-radius: 2.5rem;
  transform: rotate(-3deg);
  z-index: -2;
  transition: var(--transition-smooth);
}
[data-theme="dark"] .hero-frame-bg {
  background-color: var(--accent-highlight);
}
.hero-image-container:hover .hero-frame-bg {
  transform: rotate(5deg);
}
.hero-image-container:hover .hero-frame-border {
  transform: rotate(-5deg);
}

.hero-profile-img {
  border-radius: 2.5rem;
  border: 8px solid var(--bg-color);
  box-shadow: 0 20px 40px rgba(0,0,0,0.1);
  transition: var(--transition-smooth);
  filter: grayscale(80%);
}
[data-theme="dark"] .hero-profile-img {
  border-color: var(--card-bg);
}
.hero-image-container:hover .hero-profile-img {
  filter: grayscale(0%);
}

/* Floating Badges */
.floating-badge-bottom {
  position: absolute;
  bottom: -1.5rem;
  right: -1.5rem;
  background: var(--bg-color);
  padding: 1rem;
  border-radius: 1.25rem;
  box-shadow: 0 10px 25px rgba(0,0,0,0.08);
  border: 1px solid var(--card-border);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  animation: float-badge 4s ease-in-out infinite alternate;
}
.floating-badge-top {
  position: absolute;
  top: 2.5rem;
  left: -2.5rem;
  background: var(--bg-color);
  padding: 0.5rem 1rem;
  border-radius: 2rem;
  box-shadow: 0 10px 20px rgba(0,0,0,0.05);
  border: 1px solid var(--card-border);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  animation: float-badge 4s ease-in-out infinite alternate-reverse;
}
@keyframes float-badge {
  0% { transform: translateY(0px); }
  100% { transform: translateY(-8px); }
}

/* Recruiter Sandbox Widget styles */
.sandbox-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--border-radius-custom);
  padding: 2.5rem;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.02);
  position: relative;
  overflow: hidden;
  transition: var(--transition-smooth);
}
[data-theme="dark"] .sandbox-card {
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
}
.role-btn {
  background: transparent;
  border: 1px solid var(--card-border);
  color: var(--text-color);
  padding: 0.85rem 1.25rem;
  border-radius: 1rem;
  font-weight: 600;
  text-align: left;
  transition: var(--transition-smooth);
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.role-btn:hover {
  background-color: var(--section-bg-alt);
}
.role-btn.active {
  background-color: var(--primary-accent);
  color: var(--btn-text);
  border-color: var(--primary-accent);
}
[data-theme="dark"] .role-btn.active {
  background-color: var(--accent-highlight);
  color: #09090b;
  border-color: var(--accent-highlight);
}

.stat-item {
  text-align: center;
  padding: 1rem;
  background: var(--section-bg-alt);
  border-radius: 1rem;
  border: 1px solid var(--card-border);
}
.stat-number {
  font-size: 2rem;
  font-weight: 700;
  color: var(--accent-highlight);
  line-height: 1.1;
  margin-bottom: 0.25rem;
}

.sandbox-pitch-preview {
  background-color: var(--bg-color-alt);
  border: 1px dashed var(--card-border);
  border-radius: 1rem;
  padding: 1.5rem;
  transition: var(--transition-smooth);
  height: 100%;
}
.sandbox-highlight-glow {
  animation: glow-pulse 1.5s ease;
}
@keyframes glow-pulse {
  0% { box-shadow: 0 0 0 0 var(--accent-highlight); }
  100% { box-shadow: 0 0 0 10px transparent; }
}

.progress-bar-custom {
  background-color: var(--card-border);
  height: 6px;
  border-radius: 3px;
  overflow: hidden;
  margin-top: 5px;
}
.progress-fill {
  background-color: var(--accent-highlight);
  height: 100%;
  width: 0;
  transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Custom Buttons */
.btn-zinc-dark {
  background-color: var(--primary-accent);
  color: var(--btn-text);
  border-radius: var(--border-radius-custom);
  padding: 0.75rem 1.75rem;
  font-weight: 500;
  transition: var(--transition-smooth);
  border: 1px solid var(--primary-accent);
}
.btn-zinc-dark:hover {
  background-color: var(--primary-hover);
  color: var(--btn-text);
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.15);
}

.btn-zinc-outline {
  background-color: transparent;
  color: var(--text-color);
  border: 1px solid var(--card-border);
  border-radius: var(--border-radius-custom);
  padding: 0.75rem 1.75rem;
  font-weight: 500;
  transition: var(--transition-smooth);
}
.btn-zinc-outline:hover {
  background-color: var(--section-bg-alt);
  color: var(--text-color);
  transform: translateY(-2px);
}

/* Skills/Expertise Section Card styling & Filter states */
.btn-filter {
  background-color: transparent;
  border: 1px solid var(--card-border);
  color: var(--text-color);
  border-radius: 2rem;
  padding: 0.5rem 1.25rem;
  font-size: 0.85rem;
  font-weight: 500;
  transition: var(--transition-smooth);
}
.btn-filter:hover {
  background-color: var(--section-bg-alt);
}
.btn-filter.active {
  background-color: var(--primary-accent);
  color: var(--btn-text);
  border-color: var(--primary-accent);
}
[data-theme="dark"] .btn-filter.active {
  background-color: var(--accent-highlight);
  color: #09090b;
  border-color: var(--accent-highlight);
}

.skill-card-wrapper {
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.skill-card-wrapper.filtered-out {
  display: none;
  opacity: 0;
  transform: scale(0.9);
}

.skill-card {
  background-color: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--border-radius-custom);
  padding: 2rem;
  box-shadow: 0 4px 6px rgba(0,0,0,0.01);
  transition: var(--transition-smooth);
  height: 100%;
}
.skill-card.highlighted {
  border-color: var(--accent-highlight) !important;
  box-shadow: 0 10px 25px var(--accent-glow) !important;
  transform: scale(1.02);
}
.skill-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(0,0,0,0.05);
}
.icon-container {
  background-color: var(--primary-accent);
  color: var(--btn-text);
  width: 44px;
  height: 44px;
  border-radius: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
[data-theme="dark"] .icon-container {
  background-color: var(--accent-highlight);
  color: #09090b;
}

/* Experience Journey Timeline */
.timeline-row {
  border-bottom: 1px solid var(--card-border);
  transition: var(--transition-smooth);
}
.timeline-row:last-child {
  border-bottom: none;
}
.timeline-row.highlighted {
  background-color: var(--accent-glow);
  border-left: 4px solid var(--accent-highlight);
  padding-left: 1rem !important;
}
.timeline-period {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text-muted);
}
.achievement-badge {
  background-color: var(--badge-bg);
  color: var(--badge-text);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  border-radius: 2rem;
  padding: 0.35rem 0.85rem;
  text-transform: uppercase;
}

/* Project Cards */
.project-card {
  background-color: var(--section-bg-alt);
  border: 1px solid var(--card-border);
  border-radius: 2rem;
  padding: 2.5rem;
  transition: var(--transition-smooth);
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
.project-card:hover {
  background-color: var(--primary-accent);
  color: var(--btn-text);
  border-color: var(--primary-accent);
}
[data-theme="dark"] .project-card:hover {
  background-color: var(--accent-highlight);
  color: #09090b;
  border-color: var(--accent-highlight);
}
.project-icon-box {
  background-color: var(--bg-color);
  color: var(--text-color);
  padding: 1rem;
  border-radius: 1rem;
  box-shadow: 0 4px 10px rgba(0,0,0,0.02);
  transition: var(--transition-smooth);
}
.project-card:hover .project-icon-box {
  background-color: rgba(255,255,255,0.1);
  color: var(--btn-text);
}
[data-theme="dark"] .project-card:hover .project-icon-box {
  background-color: rgba(0,0,0,0.1);
  color: #09090b;
}

.project-arrow-box {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--card-border);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-smooth);
}
.project-card:hover .project-arrow-box {
  color: var(--btn-text);
  border-color: rgba(255,255,255,0.2);
  transform: translate(2px, -2px);
}
[data-theme="dark"] .project-card:hover .project-arrow-box {
  color: #09090b;
  border-color: rgba(0,0,0,0.2);
}

.project-card:hover h3, .project-card:hover p, .project-card:hover span {
  color: var(--btn-text) !important;
}
[data-theme="dark"] .project-card:hover h3, 
[data-theme="dark"] .project-card:hover p, 
[data-theme="dark"] .project-card:hover span {
  color: #09090b !important;
}

.project-tag {
  background-color: var(--bg-color);
  color: var(--text-muted);
  border: 1px solid var(--card-border);
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: 2rem;
  padding: 0.35rem 0.85rem;
  transition: var(--transition-smooth);
}
.project-card:hover .project-tag {
  background-color: rgba(255,255,255,0.1);
  color: var(--btn-text) !important;
  border-color: rgba(255,255,255,0.2);
}
[data-theme="dark"] .project-card:hover .project-tag {
  background-color: rgba(0,0,0,0.05);
  color: #09090b !important;
  border-color: rgba(0,0,0,0.1);
}

/* Service Box Cards */
.service-card {
  border: none;
  background-color: var(--card-bg);
  border-radius: var(--border-radius-custom);
  padding: 2.5rem 2rem;
  box-shadow: 0 10px 30px rgba(0,0,0,0.02);
  transition: var(--transition-smooth);
  height: 100%;
}
.service-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(0,0,0,0.06);
}

/* Blog Cards */
.blog-card {
  background: transparent;
  border: none;
  cursor: pointer;
}
.blog-image-wrapper {
  overflow: hidden;
  border-radius: 1.25rem;
  margin-bottom: 1.5rem;
}
.blog-image-wrapper img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  transition: var(--transition-smooth);
}
.blog-card:hover img {
  transform: scale(1.05);
}
.blog-card:hover h3 {
  color: var(--text-muted);
}
.blog-link {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-color);
  transition: var(--transition-smooth);
}
.blog-card:hover .blog-link {
  color: var(--accent-highlight);
  padding-left: 5px;
}

/* Form Styles */
.form-control-custom {
  background-color: var(--section-bg-alt);
  border: 1px solid transparent;
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
  transition: var(--transition-smooth);
  color: var(--text-color);
}
.form-control-custom:focus {
  background-color: var(--bg-color);
  border-color: var(--accent-highlight);
  box-shadow: none;
  outline: none;
}
textarea.form-control-custom {
  min-height: 150px;
}

/* Footer Links */
.footer-link {
  color: var(--text-muted);
  transition: var(--transition-smooth);
}
.footer-link:hover {
  color: var(--accent-highlight);
}

/* Custom Scroll Animation Helper */
.aos-custom {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.aos-custom.aos-animate {
  opacity: 1;
  transform: translateY(0);
}

/* PRINT-OPTIMIZED STYLES FOR GENERATED PITCH SHEET */
@media print {
  body {
    background-color: #fff !important;
    color: #000 !important;
    font-size: 12pt;
  }
  body * {
    visibility: hidden;
  }
  /* Only show the print pitch modal content */
  #pitchModalPrintArea, #pitchModalPrintArea * {
    visibility: visible;
  }
  #pitchModalPrintArea {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    margin: 0;
    padding: 20px;
    background: #fff !important;
  }
  /* Prevent layout issues in bootstrap grid when printing */
  .col-12, .col-md-6 {
    width: 100% !important;
    float: none !important;
  }
  .no-print {
    display: none !important;
  }
}