/* Tailwind Base Layers */
@tailwind base;
@tailwind components;
@tailwind utilities;

body {
    /* Example custom rule */
    transition: background-color 0.3s ease;
}

/* Header styles */
.logo-gradient{
    background: linear-gradient(135deg,#06b6d4,#7c3aed,#3b82f6);
    background-size: 200% 200%;
    animation: logoShift 4s ease-in-out infinite;
}

@keyframes logoShift{
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}

.nav-link{
    position:relative;
    color:inherit;
}
.nav-link::after{
    content:'';
    position:absolute;
    left:0;
    bottom:-6px;
    width:0;
    height:3px;
    background:linear-gradient(90deg,#06b6d4,#7c3aed);
    border-radius:6px;
    transition:width .28s ease;
}
.nav-link:hover::after{width:100%;}

/* ensure content isn't hidden under fixed header */
/* adjust top padding so content sits below the two-row header */
main{padding-top:110px}

/* spacing between top brand row and navigation */
.header-top{padding-bottom:0.9rem}
.header-nav{padding-top:0.6rem}

/* Services dropdown styling */
.services-dropdown a{display:block}
.services-dropdown a:hover{background-color:#f8fafc}

/* highlight brand when services open/hover */
.logo-gradient.highlight-brand{
    box-shadow:0 10px 30px rgba(99,102,241,0.18),0 6px 18px rgba(59,130,246,0.12);
    transform:scale(1.06);
    transition:transform .25s ease, box-shadow .25s ease;
}

/* ensure dropdown is accessible on small touch devices when toggled via JS */
.services-dropdown.show{display:block}