/*
=================================================================
Alkauthar Employment Hiring Agency - Master Stylesheet
=================================================================
*/

/* ===== Root Variables (Color Scheme) ===== */
:root {
    --deep-blue: #1C478B;
    --navy: #000081;
    --teal: #367589;
    --silver: #C0C0C0;
    --light-gray: #F3F4F6;
    --white: #FFFFFF;
    --dark-bg: #111827; /* Corresponds to Tailwind's gray-900 */
    --dark-card: #1F2937; /* Corresponds to Tailwind's gray-800 */
}

/* ===== Base & Typography ===== */
body {
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ===== Header & Navigation Styling ===== */
.nav-link {
    @apply text-gray-700 dark:text-gray-300 font-semibold tracking-wide uppercase text-sm relative transition-colors duration-300;
    padding-bottom: 4px;
}
.nav-link:hover {
    @apply text-deep-blue dark:text-teal;
}
.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--teal);
    transition: width 0.3s ease-in-out;
}
.nav-link:hover::after {
    width: 100%;
}

.nav-dropdown-item {
    @apply block px-4 py-3 text-sm text-gray-700 dark:text-gray-200 hover:bg-light-gray dark:hover:bg-gray-600 transition-colors duration-200;
}
.nav-dropdown-item i {
    color: var(--teal);
}

.mobile-nav-link {
    @apply block px-3 py-2 rounded-md text-base font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700;
}

/* Smart Sticky Header */
#header.scrolled {
    @apply shadow-xl bg-white/95 dark:bg-gray-800/95 backdrop-blur-sm;
}
#header.scrolled #header-container {
    height: 5rem; /* 80px -> 64px */
}
#header.scrolled #logo {
    height: 2.5rem; /* 48px -> 40px */
}

/* ===== Button Styles ===== */
.btn {
    @apply inline-block font-bold text-center uppercase tracking-wider text-sm py-3 px-6 rounded-lg shadow-md transition-all duration-300 transform hover:-translate-y-1;
}
.btn-primary {
    @apply bg-deep-blue text-white hover:bg-navy;
}
.btn-secondary {
    @apply bg-teal text-white hover:bg-opacity-90;
}
.btn-lg {
    @apply py-4 px-8 text-base;
}


/* ===== Hero Slider (SwiperJS) ===== */
.hero-slider .swiper-pagination-bullet {
    @apply w-3 h-3 bg-white opacity-70;
}
.hero-slider .swiper-pagination-bullet-active {
    @apply bg-teal scale-125 opacity-100;
}
.hero-slider .swiper-button-next,
.hero-slider .swiper-button-prev {
    @apply text-white w-12 h-12 bg-black bg-opacity-20 rounded-full transition-colors duration-300;
}
.hero-slider .swiper-button-next:hover,
.hero-slider .swiper-button-prev:hover {
    @apply bg-opacity-40;
}
.hero-slider .swiper-button-next::after,
.hero-slider .swiper-button-prev::after {
    font-size: 1.5rem;
}

/* ===== Job Card Styling ===== */
.job-card {
    @apply bg-white dark:bg-dark-card rounded-xl shadow-lg overflow-hidden transition-all duration-300 transform hover:-translate-y-2 hover:shadow-2xl;
    border-left: 4px solid var(--teal);
}
.job-badge {
    @apply text-white text-xs font-bold px-3 py-1 rounded-full uppercase tracking-wider;
}

/* ===== Testimonial Card Styling ===== */
.testimonial-card {
    @apply bg-white dark:bg-dark-card rounded-xl shadow-lg p-8 text-center;
}
.testimonials-slider .swiper-pagination-bullet {
    @apply w-3 h-3 bg-gray-400;
}
.testimonials-slider .swiper-pagination-bullet-active {
    @apply bg-teal scale-125;
}

/* ===== Footer Styling ===== */
.footer-heading {
    @apply text-lg font-bold text-white uppercase tracking-wider;
}
.footer-link {
    @apply text-gray-400 hover:text-teal transition-colors duration-200;
}
.social-icon {
    @apply w-10 h-10 flex items-center justify-center rounded-full bg-gray-700 text-white hover:bg-teal transition-all duration-300 transform hover:scale-110;
}

/* ===== Scroll-triggered Animations ===== */
@keyframes fade-in-up {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.animate-fade-in-up {
    animation: fade-in-up 1s ease-out forwards;
}

/* Add a class for elements to be animated on scroll */
.reveal {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ===== Page-specific Styles ===== */
.page-header {
    @apply relative py-24 md:py-32 bg-deep-blue text-white text-center;
}
.page-header .overlay {
    @apply absolute inset-0 bg-black bg-opacity-50;
}
.page-header-content {
    @apply relative z-10;
}

.content-section {
    @apply py-16 md:py-20;
}

.prose-dark {
    @apply prose-invert;
}
.prose-dark h1, .prose-dark h2, .prose-dark h3 {
    @apply text-white;
}
.prose-dark a {
    @apply text-teal;
}

/* ===== Form Styling ===== */
.form-input {
    @apply w-full px-4 py-3 bg-gray-100 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-teal transition-shadow;
}
.form-label {
    @apply block text-sm font-bold text-gray-700 dark:text-gray-300 mb-2;
}

/* ===== Glassmorphism Example Class ===== */
.glass-card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}