/* Applying Inter as the default font */
body {
    font-family: 'Inter', 'sans-serif';
    padding-top: 80px; 
}

/* Transition for navbar colors and SVG fill */
nav, nav a, #search-input {
    transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out, border-color 0.3s ease-in-out, width 0.3s ease-in-out;
}
nav svg {
    transition: color 0.3s ease-in-out, fill 0.3s ease-in-out;
}

/* Style for the scrolled navbar state */
nav.scrolled {
    background-color: rgba(30, 35, 40, 0.9); /* custom-bg-dark (#1e2328) with opacity */
    color: #f5f5f4; /* custom-fg-dark */
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}
nav.scrolled .nav-icon { color: #f5f5f4; } /* custom-fg-dark */
nav.scrolled .logo-svg .logo-bg { fill: #f5f5f4; } /* custom-fg-dark */
nav.scrolled .logo-svg .logo-fg { fill: #1e2328; } /* custom-bg-dark */
body.menu-open { overflow: hidden; }
@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-15px); }
    to { opacity: 1; transform: translateY(0); }
}
.logo-animate { animation: fadeInDown 0.8s ease-out 0.2s forwards; }

/* Honeypot field styling to hide it from human users */
.honeypot-field {
    position: absolute;
    left: -9999px; /* Move it far off-screen */
    opacity: 0; /* Make it completely transparent */
}

/* Headline Slider Styles */
#headline-slider {
    position: relative;
    /* A min-height helps prevent layout shift before JS runs. 
    The value is based on the smallest font-size and line-height. */
    min-height: 2.7rem; 
}

.headline-slide {
    /* Base styles from old .headline class */
    grid-column: span 12 / span 12;
    font-size: clamp(3rem, 10vw, 8rem);
    line-height: 0.9;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -0.05em;
    /* Slider animation styles */
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    transition: opacity 0.8s ease-in-out;
    pointer-events: none;
}

.headline-slide.is-active {
    opacity: 1;
    position: relative; /* Takes up space to give parent height */
    pointer-events: auto;
}

@media (min-width: 768px) {
    .headline-slide {
        grid-column: span 8 / span 8;
        grid-column-start: 2;
    }
}

/* Ken Burns Animation for Featured Section */
@keyframes kenburns {
  0%, 100% {
    transform: scale(1.05) translate(0, 0);
    transform-origin: center;
  }
  50% {
    transform: scale(1.2) translate(-4%, 4%);
    transform-origin: center;
  }
}
.ken-burns-animation {
  animation: kenburns 40s ease-in-out infinite;
}