@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

html {
  scroll-behavior: smooth;
}

body {
  @apply font-sans text-gray-800;
}

/* Custom smooth scrolling */
@supports (scroll-behavior: smooth) {
  html {
    scroll-behavior: smooth;
  }
}

/* Navbar scroll effect */
.navbar {
  @apply transition-all duration-300;
}

.navbar.scrolled {
  @apply bg-gray-700 shadow-lg;
}

/* Card hover effects */
.card {
  @apply transition-transform duration-200 ease-out;
}

.card:hover {
  @apply scale-105;
}

/* Custom link styling */
a {
  @apply text-accent transition-colors duration-200;
}

a:hover {
  @apply text-accent-dark;
}

/* Anchor link smooth scrolling */
[href^="#"] {
  @apply cursor-pointer;
}

/* Fallback profile image styles (when Tailwind isn't compiled on host) */
img[src="/assets/img/profile.jpg"] {
  width: 256px;
  height: 256px;
  border-radius: 9999px;
  object-fit: cover;
  box-shadow: 0 10px 15px rgba(0,0,0,0.1);
}

/* Larger on medium+ screens (matches md:w-80 / md:h-80 in markup) */
@media (min-width: 768px) {
  img[src="/assets/img/profile.jpg"] {
    width: 320px;
    height: 320px;
  }
}

/* Layout and navbar fallbacks when Tailwind isn't available */
.container {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}
.text-center { text-align: center; }
.min-h-screen { min-height: 100vh; }
.flex { display: flex; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.hidden { display: none; }
.md\:flex { display: none; }
@media (min-width: 768px) {
  .md\:flex { display: flex; }
  .md\:grid-cols-2 { grid-template-columns: repeat(2,1fr); }
  .md\:hidden { display: none; }
}

/* Navbar fallback styling */
.navbar {
  background: #1f2937; /* gray-800 */
  color: #ffffff;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  box-shadow: 0 6px 12px rgba(0,0,0,0.12);
}
.navbar .container { display:flex; justify-content:space-between; align-items:center; padding:0.75rem 1rem; }
#burger-btn { background:transparent; border:0; color:inherit; font-size:1.25rem; cursor:pointer; }
#mobile-menu { padding:0.5rem 1rem; background: #111827; }
#mobile-menu a { display:block; padding:0.5rem 0; color:inherit; text-decoration:none; }

/* Hero section fallback */
#home { background: linear-gradient(180deg,#ffffff,#f7fafc); color: #111827; padding-top:4rem; padding-bottom:3rem; }
#home .hero-content { text-align:center; max-width:900px; margin:0 auto; }

/* Profile image in hero */
.profile-img { width:200px; height:200px; border-radius:9999px; object-fit:cover; margin:1rem auto; box-shadow: 0 12px 24px rgba(0,0,0,0.12); display:block; }
@media (min-width:768px) { .profile-img { width:280px; height:280px; } }

/* Site brand/logo */
.site-brand { display:inline-flex; align-items:center; gap:0.5rem; color:inherit; text-decoration:none; }
.site-logo { width:36px; height:36px; }

/* Nav link styling */
.nav-link { color: #e5e7eb; text-decoration:none; padding:0.35rem 0.6rem; border-radius:8px; margin-left:0.25rem; margin-right:0.25rem; display:inline-block; }
.nav-link:hover { background: rgba(255,255,255,0.06); color:#fff; transform: translateY(-1px); text-decoration:none; }

/* Reduce spacing between sections and standardize width */
section { padding-top:1rem; padding-bottom:1rem; }
.container { max-width:1100px; margin-left:auto; margin-right:auto; padding-left:1rem; padding-right:1rem; }

/* Ensure hero fills viewport on mobile (account for navbar height) */
#home { min-height: calc(100vh - 64px); padding-top:2rem; padding-bottom:1rem; }

/* About block spacing inside hero */
.about-block { margin-top:1.25rem; }

/* Card improvements for portfolio and centering on mobile */
.card { padding:1.5rem; border:1px solid rgba(0,0,0,0.06); border-radius:12px; background:#fff; margin-bottom:1rem; max-width:500px; margin-left:auto; margin-right:auto; }
.card + .card { margin-top:1rem; }

/* Utility for max width used in portfolio */
.max-w-4xl { max-width:960px; margin-left:auto; margin-right:auto; }

/* Links inside content */
.container a:not(.nav-link) { color:#2563eb; margin-right:0.5rem; text-decoration:none; }
.container a:not(.nav-link):hover { text-decoration:underline; }

/* Tighter lists and spacing in subsections */
ul, ol { margin-top:0.5rem; margin-bottom:0.5rem; }
h2, h3 { margin-top:0.5rem; margin-bottom:0.75rem; }

/* Ensure experience lists are left-aligned */
.experience-list, .about-block .experience-list, .about-block p { text-align: left; }

/* Make sure grid stacks nicely on small screens */
.grid { display: grid; }
@media (min-width: 768px) { .md\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); } }

/* Ensure container children are centered on mobile */
.container > .grid, .container > .flex { justify-content: center; }

/* CTA button */
.cta-btn { display:inline-block; background:#2563eb; color:#fff; padding:0.6rem 1rem; border-radius:8px; text-decoration:none; margin-left:0.5rem; font-weight:600; }
.cta-btn:hover { background:#1e40af; }