/* Global Styles */
body {
    font-family: 'Inter', sans-serif;
    background-color: #faf9f9;
    color: #1a1c1c;
}

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    display: inline-block;
    line-height: 1;
}

/* Common project interactions */
.project-card:hover .project-overlay {
    opacity: 1;
}

.project-card:hover img {
    filter: grayscale(100%);
}

.architectural-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 24px;
}

/* Animations */
@keyframes marquee {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

.animate-marquee {
    animation: marquee 20s linear infinite;
}

/* Active Navigation State & Hover Mask Effect */
.main-nav a {
    position: relative;
    overflow: hidden;
    padding: 8px 10px;
    /* Extra padding for the box effect */
    margin: -4px 0;
    /* Offset padding */
    transition: color 0.3s ease;
    z-index: 1;
}

/* The black box mask */
.main-nav a::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.2s ease-in-out;
    z-index: -1;
}

.main-nav a:hover::before {
    transform: scaleX(1);
    transform-origin: left;
}

.main-nav a:hover {
    color: #fff !important;
}

/* For dark mode */
.dark .main-nav a::before {
    background-color: #fff;
}

.dark .main-nav a:hover {
    color: #000 !important;
}

/* Ensure active tab looks good */
.main-nav a.border-b-2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: currentColor;
}

.main-nav a.border-b-2 {
    border-color: transparent !important;
    /* Hide original border */
}

/* Hide scrollbar for nested tabs */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}

.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Form inputs reset */
input:focus {
    outline: none !important;
    box-shadow: none !important;
    border-color: inherit !important;
}

/* Responsive adjustments (No Frameworks requirement) */
@media screen and (max-width: 768px) {

    /* Stack layout vertically on smaller screens */
    .grid,
    .architectural-grid {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .col-span-12,
    .col-span-10,
    .col-span-8,
    .col-span-6,
    .col-span-4,
    .col-span-3,
    .col-span-2 {
        width: 100% !important;
    }

    /* Reduce padding and font sizes for mobile */
    body,
    main,
    section,
    header,
    footer {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    .px-16 {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    .py-24,
    .py-32 {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }

    /* Font size reductions */
    .text-\[12vw\] {
        font-size: 15vw !important;
        line-height: 1 !important;
    }

    .text-6xl,
    .font-headline-xl {
        font-size: 36px !important;
    }

    .text-4xl,
    .font-headline-lg {
        font-size: 28px !important;
    }

    .text-2xl,
    .font-headline-md {
        font-size: 20px !important;
    }

    /* Mobile Menu Toggle */
    .main-nav {
        display: none !important;
        /* Hide desktop nav */
    }

    .md\:hidden {
        display: block !important;
    }
}

.cursor {
  display: inline-block;
  width: 6px;
  height: 16px;
  margin-left: 4px;
  background: black;
  animation: blink 1s infinite;
}

.dark .cursor {
  background: white;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}