@import './custom.css';

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    :root {
        /* Base brand */
        --brand-blue: #0096D6;
        --brand-green: #6DBE45;
        --gold-tint: #d4af37;

        /* Derived tones */
        --blue-900: #0a5a7a;
        --blue-800: #0478a8;
        --blue-700: #028ac4;
        --blue-600: #0096D6;
        --blue-200: #9edcf3;
        --blue-100: #e6f6fc;

        --green-900: #2d5f17;
        --green-800: #3f7c23;
        --green-700: #4f9a2f;
        --green-600: #6DBE45;
        --green-300: #a6e684;
        --green-100: #ebf9e2;

        /* Button brand hues */
        --red-600: #e53935;
        --red-500: #ff3b3b;
        --sky-600: #0284c7;
        --sky-400: #38bdf8;
        --emerald-600: #059669;
        --emerald-400: #34d399;

        /* Neutrals */
        --surface: #ffffff;
        --surface-2: #f9fbfd;
        --border: #e5edf4;
        --text: #2a2f36;
        --muted: #546173;

        /* Accents */
        --focus: #60a5fa;

        /* Brand combos */
        --brand-gradient: linear-gradient(135deg, var(--brand-blue) 0%, #00a9e8 35%, #36c35e 70%, var(--brand-green) 100%);
        --nav-gradient: linear-gradient(90deg, var(--blue-800), var(--green-700));

        /* Component tokens */
        --heading: var(--blue-800);
        --link: #0e7490;
        --link-hover: #075985;
        --chip-bg: #eef7ff;
        --chip-text: var(--blue-800);
        --shadow-sm: 0 2px 10px rgba(16, 24, 40, .06);
        --shadow-md: 0 8px 24px rgba(16, 24, 40, .10);
    }

    html {
        scrollbar-gutter: stable;
        /* Prevents layout shift when scrollbar appears/disappears */
        scroll-behavior: smooth;
    }

    body {
        background:
            radial-gradient(800px 500px at -10% 0%, rgba(0, 150, 214, .10) 0%, transparent 60%),
            radial-gradient(900px 550px at 110% 10%, rgba(109, 190, 69, .10) 0%, transparent 60%),
            linear-gradient(120deg, #f0fbff 0%, #f7fff2 100%);
        color: var(--text);
        line-height: 1.6;
        font-family: 'Inter', sans-serif;
        overflow-y: scroll;
        /* Fallback for older browsers to keep scrollbar track visible */
    }

    [x-cloak] {
        display: none !important;
    }
}

@layer components {

    /* Gradient text for logo */
    .gradient-text {
        background: linear-gradient(135deg, var(--brand-blue) 0%, var(--brand-green) 100%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        font-weight: 900;
    }

    /* Thin animated brand bar */
    .site-bar {
        height: 3px;
        background: linear-gradient(90deg, #0096D6, #00b4d8, #6DBE45, #a6e684);
        background-size: 400% 100%;
        animation: beamMove 8s linear infinite;
        border: 0;
    }

    @keyframes beamMove {
        0% {
            background-position: 0% 50%;
        }

        100% {
            background-position: 100% 50%;
        }
    }

    /* Colorful buttons */
    .btn {
        border: none;
        border-radius: 7px;
        padding: 10px 16px;
        font-weight: 800;
        font-size: 15px;
        cursor: pointer;
        color: #fff;
        box-shadow: 0 4px 14px rgba(0, 0, 0, .12);
        transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
    }

    .btn:hover {
        transform: translateY(-2px);
        filter: brightness(1.05);
    }

    .btn:active {
        transform: translateY(0);
    }

    .btn-donate {
        background: linear-gradient(135deg, var(--red-600), var(--red-500));
        box-shadow: 0 10px 26px rgba(229, 57, 53, .35);
    }

    .btn-register {
        background: linear-gradient(135deg, var(--sky-600), var(--sky-400));
    }

    .btn-login {
        background: linear-gradient(135deg, var(--emerald-600), var(--emerald-400));
    }

    .btn-appointment {
        background: linear-gradient(135deg, #6366f1, #8b5cf6);
        box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);
    }

    /* Navigation Styles */
    .nav-container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 20px;
        position: relative;
    }

    .navigation {
        display: flex;
        justify-content: space-between;
        list-style: none;
        position: relative;
    }

    .navigation>li {
        position: relative;
    }

    .navigation a,
    .navigation button.nav-link {
        display: block;
        text-decoration: none;
        color: white;
        background: none;
        border: 0;
        font: inherit;
        font-weight: 600;
        font-size: 15px;
        padding: 14px 12px;
        position: relative;
        white-space: nowrap;
        transition: color .2s ease, transform .2s ease;
        cursor: pointer;
    }

    .navigation a::after,
    .navigation button.nav-link::after {
        content: '';
        position: absolute;
        left: 12px;
        right: 12px;
        bottom: 6px;
        height: 3px;
        border-radius: 999px;
        background: linear-gradient(90deg, var(--brand-blue), var(--brand-green));
        transform: scaleX(0);
        transform-origin: left;
        transition: transform .25s ease;
    }

    .navigation a:hover,
    .navigation button.nav-link:hover {
        color: white;
        transform: translateY(-1px);
    }

    .navigation a:hover::after,
    .navigation button.nav-link:hover::after {
        transform: scaleX(1);
    }

    /* Dropdown styles */
    .has-dropdown:hover>.dropdown,
    .has-dropdown:focus-within>.dropdown {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .dropdown {
        position: absolute;
        left: 0;
        top: 100%;
        margin-top: 8px;
        width: 220px;
        background: #fff;
        border: 1px solid var(--border);
        border-radius: 10px;
        box-shadow: 0 12px 40px rgba(16, 24, 40, .15);
        padding: 12px 0;
        opacity: 0;
        visibility: hidden;
        transition: .18s ease;
        z-index: 1000;
    }

    .dropdown ul {
        list-style: none;
    }

    .dropdown a {
        display: block;
        padding: 10px 16px;
        margin: 0;
        border-radius: 0;
        font-size: 14px;
        color: #0f172a;
        text-decoration: none;
        transition: background .15s ease, color .15s ease;
        border-left: 3px solid transparent;
    }

    .dropdown a:hover {
        background: #f0f9ff;
        color: #075985;
        border-left-color: var(--brand-blue);
    }

    /* Mega panel */
    .has-mega:hover>.mega,
    .has-mega:focus-within>.mega {
        opacity: 1;
        visibility: visible;
        transform: translateX(-50%);
    }

    .mega {
        position: absolute;
        left: 50%;
        transform: translateX(-50%) translateY(10px);
        top: 100%;
        margin-top: 8px;
        width: min(800px, 90vw);
        max-width: calc(100vw - 40px);
        background: #fff;
        border: 1px solid var(--border);
        border-radius: 14px;
        box-shadow: 0 20px 60px rgba(16, 24, 40, .18);
        padding: 24px;
        opacity: 0;
        visibility: hidden;
        transition: .18s ease;
        z-index: 1000;
    }

    .has-mega:last-child .mega {
        left: auto;
        right: 0;
        transform: translateX(0) translateY(10px);
    }

    .has-mega:last-child .mega::before {
        content: '';
        position: absolute;
        top: -8px;
        right: 20px;
        width: 0;
        height: 0;
        border-left: 8px solid transparent;
        border-right: 8px solid transparent;
        border-bottom: 8px solid white;
    }

    .mega-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }

    .mega-col {
        display: flex;
        flex-direction: column;
    }

    .mega h4 {
        color: var(--blue-800);
        font-weight: 900;
        margin: 0 0 12px 0;
        font-size: 16px;
        padding-bottom: 8px;
        border-bottom: 2px solid var(--blue-100);
        position: relative;
    }

    .mega h4::after {
        content: '';
        position: absolute;
        bottom: -2px;
        left: 0;
        width: 40px;
        height: 2px;
        background: linear-gradient(90deg, var(--brand-blue), var(--brand-green));
    }

    .mega ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .mega a {
        display: block;
        padding: 10px 12px;
        margin: 4px 0;
        border-radius: 8px;
        font-size: 14px;
        color: #0f172a;
        text-decoration: none;
        transition: all .2s ease;
        border-left: 3px solid transparent;
    }

    .mega a:hover {
        background: #f0f9ff;
        color: #075985;
        transform: translateX(4px);
        border-left-color: var(--brand-blue);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    }

    /* Mobile Menu Button */
    .mobile-menu-btn {
        display: none;
        background: none;
        border: none;
        font-size: 24px;
        cursor: pointer;
        color: white;
        padding: 10px;
        margin: 0 auto;
    }

    /* ===== Mobile Language Sheet ===== */
    .mi-sheet-dim {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1001;
        opacity: 0;
        animation: fadeIn 0.2s forwards;
    }

    .mi-lang-sheet {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        background: white;
        border-radius: 16px 16px 0 0;
        padding: 20px;
        z-index: 1002;
        transform: translateY(100%);
        transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        max-height: 80vh;
        display: flex;
        flex-direction: column;
    }

    .mi-lang-sheet-open {
        transform: translateY(0);
    }

    @keyframes fadeIn {
        to {
            opacity: 1;
        }
    }

    /* ===== Responsive ===== */
    /* Tablet & Mobile (iPad Landscape/Portrait and below) */
    @media (max-width: 1024px) {
        .navigation {
            display: none;
            flex-direction: column;
            width: 100%;
            flex-wrap: nowrap;
        }

        .navigation.active {
            display: flex;
        }

        .mobile-menu-btn {
            display: block;
        }

        .masthead-container {
            justify-content: center;
        }

        /* Mobile: dropdowns open under item when toggled */
        .has-dropdown .dropdown,
        .has-mega .mega {
            position: static;
            transform: none;
            width: 100%;
            margin-top: 4px;
            opacity: 1;
            visibility: visible;
            display: none;
            box-shadow: none;
            border-radius: 8px;
        }

        .has-dropdown.open .dropdown,
        .has-mega.open .mega {
            display: block;
        }

        .mega-grid {
            grid-template-columns: 1fr;
        }

        .mega-col {
            grid-column: span 1;
        }

        .masthead-right {
            display: none;
        }

        .mobile-buttons {
            display: none;
            flex-direction: column;
            gap: 10px;
            padding: 20px;
            background: var(--surface-2);
        }

        .mobile-buttons.active {
            display: flex;
        }

        /* Remove special positioning for mobile */
        .has-mega:last-child .mega {
            right: auto;
            left: 0;
        }

        .has-mega:last-child .mega::before {
            display: none;
        }

        .navigation a,
        .navigation button.nav-link {
            padding: 12px 10px;
            font-size: 15px;
        }

        .masthead-center {
            order: 3;
            width: 100%;
            justify-content: stretch;
        }

        .search {
            width: 100%;
        }

        /* Fix mega menu for tablet */
        .mega {
            width: min(700px, 90vw);
        }

        .has-mega:last-child .mega {
            right: 10px;
            left: auto;
        }

        /* Add padding for fixed bottom bar on mobile */
        @media (max-width: 768px) {
            body {
                padding-bottom: 80px;
            }
        }
    }
}