/*
Theme Name: My Insta Portfolio
Theme URI: https://example.com/my-insta-portfolio
Author: Your Name (Based on Kirtan Parmar's profile)
Author URI: https://example.com/your-website
Description: A responsive profile theme for Kirtan Parmar, converted from static HTML, featuring a sticky header and smooth scrolling.
Version: 1.0.0
Text Domain: my-insta-portfolio
*/

/* Custom CSS from beta.html */
.header-sticky {
  position: sticky;
  top: 0;
  z-index: 100;
  width: 100%;
  background-color: #f3f4f6;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  padding: 16px 0;
  transition: background-color 0.3s ease;
}
.header-hidden {
  display: none;
}
.header-visible {
  display: block;
}
.header-scrolled {
  background-color: rgba(255, 255, 255, 0.9);
  padding: 12px 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}
.icon {
  width: 24px;
  height: 24px;
}
#about {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  text-align: center;
}

/* Base Tailwind classes from body tag */
body {
    background-color: #f3f4f6; /* bg-gray-100 */
    font-family: 'Inter', sans-serif; /* font-inter */
}

/* Basic styling for nav links (if no WP menu is set up) */
.main-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex; /* Adjust as needed for desktop/mobile */
}

.main-navigation li {
    margin-right: 15px; /* Adjust spacing */
}

.main-navigation a {
    text-decoration: none;
    color: #333; /* Adjust color */
    padding: 5px 10px;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.main-navigation a:hover {
    background-color: #eee;
}

/* Active navigation link styling (from your JS) */
.active {
    font-weight: bold;
    color: #3b82f6; /* A shade of blue, adjust as needed for active link */
}

/* Basic styling for mobile menu */
#mobile-menu {
    /* Existing styles handled by Tailwind classes in HTML */
    background-color: rgba(17, 24, 39, 0.9); /* bg-gray-900 bg-opacity-90 */
}

#mobile-menu .bg-gray-800 {
    background-color: #1f2937; /* bg-gray-800 */
}

#mobile-menu a {
    color: #fff;
}

#mobile-menu a:hover {
    color: #60a5fa; /* hover:text-blue-400 */
}

/* WordPress specific adjustments */
.screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
    word-wrap: normal !important;
}

/* If you use the WordPress loop for posts, add styling for post elements */
.entry-title {
    font-size: 1.5em; /* Tailwind text-3xl could be used directly, but for blog posts, this might be better */
    color: #1f2937; /* text-gray-800 */
    margin-bottom: 0.5em;
}

.entry-title a {
    text-decoration: none;
    color: inherit;
}

.site-title {
    font-size: 1.875rem; /* text-xl */
    font-weight: 600; /* font-semibold */
    color: #1f2937; /* text-gray-800 */
}

.site-title a {
    text-decoration: none;
    color: inherit;
}

.site-description {
    font-size: 0.875rem; /* text-sm */
    color: #4b5563; /* text-gray-600 */
}

/* Projects section styling (repurposed for blog cards on homepage) */
.project-card {
    background-color: #ffffff; /* bg-white */
    border-radius: 0.5rem; /* rounded-lg */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-md */
    padding: 1.5rem; /* p-6 */
}

.project-card h3 {
    font-size: 1.25rem; /* text-xl */
    font-weight: 600; /* font-semibold */
    color: #1f2937; /* text-gray-800 */
    margin-bottom: 0.5rem; /* mb-2 */
}

.project-card p {
    color: #4b5563; /* text-gray-600 */
    margin-bottom: 1rem; /* mb-4 */
}

.project-card a {
    color: #3b82f6; /* text-blue-500 */
    text-decoration: none;
    transition: color 0.2s ease-in-out; /* transition-colors duration-200 */
}

.project-card a:hover {
    color: #2563eb; /* hover:text-blue-700 */
}

/* Footer styling */
footer {
    background-color: #e5e7eb; /* bg-gray-200 */
    padding: 1rem; /* py-4 */
    text-align: center; /* text-center */
    color: #4b5563; /* text-gray-600 */
}

/* Global container and padding */
.container {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.5rem; /* px-6 */
    padding-right: 1.5rem; /* px-6 */
}

@media (min-width: 768px) { /* md:px-10 */
    .container {
        padding-left: 2.5rem;
        padding-right: 2.5rem;
    }
}

@media (min-width: 1024px) { /* lg:px-20 */
    .container {
        padding-left: 5rem;
        padding-right: 5rem;
    }
}

/* "You must be logged in" message */
.must-log-in {
    padding: 1rem;
    background-color: #fef3c7; /* yellow-100 */
    border: 1px solid #fcd34d; /* yellow-300 */
    border-radius: 0.375rem;
    color: #92400e; /* yellow-900 */
    text-align: center;
}