/* ==============================
   TAILWIND IMPORT (v4)
============================== */
@import "tailwindcss";
@plugin "@tailwindcss/typography";

/* ==============================
   SOURCE PATHS (v4)
============================== */
@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';
@source '../**/*.blade.php';
@source '../**/*.js';

/* ==============================
   THEME
============================== */
@theme {
    --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif,
        'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
}

/* ==============================
   BASE FIXES (IMPORTANT)
   Fix dark border issue in Tailwind v4
============================== */
@layer base {

    html {
        scroll-behavior: smooth;
    }

    body {
        @apply font-sans bg-slate-50 text-slate-800 antialiased;
    }

    /* 🔥 Fix Tailwind v4 dark border issue */
    *, ::before, ::after {
        border-color: rgb(226 232 240); /* slate-200 */
    }

    hr {
        border-color: rgb(226 232 240);
    }
}

/* ==============================
   COMPONENTS
============================== */
@layer components {

    /* BUTTON PRIMARY */
    .btn {
        @apply bg-blue-600 text-white font-semibold px-6 py-3 rounded-xl transition-all duration-200;
    }

    .btn:hover {
        @apply bg-blue-700 shadow-lg -translate-y-0.5;
    }

    /* BUTTON SECONDARY */
    .btn-outline {
        @apply px-6 py-3 rounded-xl border border-slate-300 font-semibold transition;
    }

    .btn-outline:hover {
        @apply bg-white border-blue-500 text-blue-700;
    }

    /* CARD */
    .card {
        @apply bg-white border border-slate-200 rounded-2xl transition-all duration-200;
    }

    .card:hover {
        @apply shadow-lg -translate-y-1;
    }

    /* INPUT */
    .input {
        @apply w-full border border-slate-300 rounded-xl px-4 py-2 text-sm
               focus:outline-none focus:ring-2 focus:ring-blue-200
               focus:border-blue-600 transition;
    }

    /* FOOTER LINKS */
    .footer-link {
        @apply block hover:text-blue-700 transition;
    }

    /* SEO LINKS */
    .seo-link {
        @apply hover:text-blue-700 transition;
    }

    .seo-title {
        @apply font-semibold text-slate-900;
    }

    /* SOCIAL ICON */
    .social-icon {
        @apply h-10 w-10 flex items-center justify-center rounded-xl
               border border-slate-200 bg-white text-sm font-semibold
               hover:text-blue-700 hover:border-blue-200 hover:bg-blue-50
               transition;
    }

}