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

/* ==========================================================
   ROOT VARIABLES
========================================================== */

:root {
    --muhsoft-brand-50: #f3f8f9;
    --muhsoft-brand-100: #e3eef0;
    --muhsoft-brand-200: #c5dfe3;
    --muhsoft-brand-300: #9bc8ce;
    --muhsoft-brand-400: #6faab4;
    --muhsoft-brand-500: #508b97;
    --muhsoft-brand-600: #3f707c;
    --muhsoft-brand-700: #345b65;
    --muhsoft-brand-800: #294852;
    --muhsoft-brand-900: #203b44;
    --muhsoft-brand-950: #10262e;
    --muhsoft-accent-50: #f8fbea;
    --muhsoft-accent-100: #eef6ce;
    --muhsoft-accent-200: #ddec9d;
    --muhsoft-accent-300: #c8df69;
    --muhsoft-accent-400: #b3d13e;
    --muhsoft-accent-500: #9fbd29;
    --muhsoft-accent-600: #7e981d;
    --muhsoft-accent-700: #627419;
    --muhsoft-accent-800: #4f5d1a;
    --muhsoft-accent-900: #424e1b;
    --muhsoft-header-height: 4.5rem;
    --muhsoft-header-height-lg: 5rem;
    --muhsoft-radius-sm: 0.625rem;
    --muhsoft-radius-md: 0.875rem;
    --muhsoft-radius-lg: 1rem;
    --muhsoft-radius-xl: 1.25rem;
    --muhsoft-shadow-sm: 0 1px 2px rgb(15 23 42 / 0.04), 0 1px 3px rgb(15 23 42 / 0.06);
    --muhsoft-shadow-md: 0 10px 30px rgb(15 23 42 / 0.08);
    --muhsoft-shadow-lg: 0 22px 60px rgb(15 23 42 / 0.14);
    --muhsoft-transition: 180ms cubic-bezier(0.2, 0, 0, 1);
}

/* ==========================================================
   BASE
========================================================== */

@layer base {
    html {
        min-width: 320px;
        scroll-behavior: smooth;
        scroll-padding-top: 6rem;
    }

    body {
        margin: 0;
        min-width: 320px;
        overflow-x: hidden;
        background-color: #f8fafc;
        color: #1e293b;
        font-family: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        text-rendering: optimizeLegibility;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    body,
    button,
    input,
    textarea,
    select {
        font-family: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }

    img,
    svg,
    video,
    canvas {
        display: block;
        max-width: 100%;
    }

    img {
        height: auto;
    }

    button,
    a {
        -webkit-tap-highlight-color: transparent;
    }

    button {
        font: inherit;
    }

    a {
        color: inherit;
        text-decoration: none;
    }

    ::selection {
        background-color: rgb(179 209 62 / 0.38);
        color: var(--muhsoft-brand-950);
    }

    :focus-visible {
        outline: 3px solid rgb(179 209 62 / 0.72);
        outline-offset: 3px;
    }
}

/* ==========================================================
   ACCESSIBILITY
========================================================== */

@layer components {
    .skip-link {
        position: fixed;
        top: 1rem;
        left: 1rem;
        z-index: 9999;
        transform: translateY(-180%);
        border-radius: 0.75rem;
        background-color: #ffffff;
        padding: 0.75rem 1rem;
        color: #0f172a;
        font-size: 0.875rem;
        font-weight: 700;
        box-shadow: var(--muhsoft-shadow-lg);
        transition: transform var(--muhsoft-transition);
    }

        .skip-link:focus {
            transform: translateY(0);
        }
}

/* ==========================================================
   HEADER
========================================================== */

@layer components {
    .site-header {
        position: sticky;
        top: 0;
        z-index: 50;
        width: 100%;
        border-bottom: 1px solid rgb(226 232 240 / 0.85);
        background-color: rgb(255 255 255 / 0.92);
        box-shadow: var(--muhsoft-shadow-sm);
        -webkit-backdrop-filter: blur(18px);
        backdrop-filter: blur(18px);
        transition: background-color var(--muhsoft-transition), box-shadow var(--muhsoft-transition), border-color var(--muhsoft-transition);
    }

        .site-header.is-scrolled {
            border-bottom-color: rgb(203 213 225 / 0.9);
            background-color: rgb(255 255 255 / 0.97);
            box-shadow: var(--muhsoft-shadow-md);
        }
}

/* ==========================================================
   DESKTOP NAVIGATION
========================================================== */

@layer components {
    .nav-link {
        position: relative;
        display: inline-flex;
        min-height: 2.75rem;
        align-items: center;
        justify-content: center;
        border: 0;
        border-radius: 0.75rem;
        background: transparent;
        padding: 0.625rem 1rem;
        color: #475569;
        font-size: 0.875rem;
        font-weight: 650;
        line-height: 1.25rem;
        white-space: nowrap;
        cursor: pointer;
        transition: color var(--muhsoft-transition), background-color var(--muhsoft-transition), transform var(--muhsoft-transition);
    }

        .nav-link::after {
            position: absolute;
            right: 1rem;
            bottom: -0.0625rem;
            left: 1rem;
            height: 0.125rem;
            content: "";
            border-radius: 9999px;
            background-color: var(--muhsoft-accent-500);
            transform: scaleX(0);
            transform-origin: center;
            transition: transform var(--muhsoft-transition);
        }

        .nav-link:hover {
            background-color: #f1f5f9;
            color: var(--muhsoft-brand-800);
        }

            .nav-link:hover::after,
            .nav-link.is-active::after {
                transform: scaleX(1);
            }

        .nav-link.is-active {
            background-color: var(--muhsoft-brand-50);
            color: var(--muhsoft-brand-800);
        }

        .nav-link[aria-expanded="true"] {
            background-color: var(--muhsoft-brand-50);
            color: var(--muhsoft-brand-800);
        }

            .nav-link[aria-expanded="true"]::after {
                transform: scaleX(1);
            }
}

/* ==========================================================
   PRODUCT DROPDOWN
========================================================== */

@layer components {
    .dropdown-menu {
        position: absolute;
        top: calc(100% + 0.75rem);
        left: 50%;
        z-index: 60;
        width: min(26.25rem, calc(100vw - 2rem));
        visibility: hidden;
        overflow: hidden;
        border: 1px solid #e2e8f0;
        border-radius: 1rem;
        background-color: #ffffff;
        opacity: 0;
        box-shadow: var(--muhsoft-shadow-lg);
        transform: translate(-50%, 0.5rem);
        pointer-events: none;
        transition: opacity var(--muhsoft-transition), transform var(--muhsoft-transition), visibility var(--muhsoft-transition);
    }

        .dropdown-menu::before {
            position: absolute;
            top: -0.375rem;
            left: 50%;
            width: 0.75rem;
            height: 0.75rem;
            content: "";
            border-top: 1px solid #e2e8f0;
            border-left: 1px solid #e2e8f0;
            background-color: #ffffff;
            transform: translateX(-50%) rotate(45deg);
        }

        .dropdown-menu.is-open {
            visibility: visible;
            opacity: 1;
            transform: translate(-50%, 0);
            pointer-events: auto;
        }

    .dropdown-card {
        position: relative;
        display: flex;
        align-items: flex-start;
        gap: 1rem;
        border-radius: 0.875rem;
        padding: 1rem;
        color: #334155;
        transition: background-color var(--muhsoft-transition), color var(--muhsoft-transition), transform var(--muhsoft-transition);
    }

        .dropdown-card:hover {
            background-color: var(--muhsoft-brand-50);
            color: var(--muhsoft-brand-900);
            transform: translateX(0.125rem);
        }

        .dropdown-card strong {
            display: block;
            color: #0f172a;
            font-size: 0.875rem;
            font-weight: 700;
            line-height: 1.35rem;
        }

        .dropdown-card small {
            display: block;
            margin-top: 0.25rem;
            color: #64748b;
            font-size: 0.75rem;
            line-height: 1.2rem;
        }

    .dropdown-icon {
        display: inline-flex;
        width: 2.75rem;
        height: 2.75rem;
        flex: 0 0 2.75rem;
        align-items: center;
        justify-content: center;
        border: 1px solid var(--muhsoft-brand-100);
        border-radius: 0.75rem;
        background-color: var(--muhsoft-brand-50);
        color: var(--muhsoft-brand-700);
        transition: background-color var(--muhsoft-transition), color var(--muhsoft-transition), transform var(--muhsoft-transition);
    }

    .dropdown-card:hover .dropdown-icon {
        background-color: var(--muhsoft-brand-700);
        color: #ffffff;
        transform: scale(1.04);
    }

    .dropdown-icon svg {
        width: 1.5rem;
        height: 1.5rem;
    }
}

/* ==========================================================
   BUTTONS
========================================================== */

@layer components {
    .button {
        display: inline-flex;
        min-height: 2.75rem;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        border: 1px solid transparent;
        border-radius: 0.75rem;
        padding: 0.625rem 1.25rem;
        font-size: 0.875rem;
        font-weight: 700;
        line-height: 1.25rem;
        white-space: nowrap;
        cursor: pointer;
        transition: background-color var(--muhsoft-transition), border-color var(--muhsoft-transition), color var(--muhsoft-transition), box-shadow var(--muhsoft-transition), transform var(--muhsoft-transition);
    }

        .button:hover {
            transform: translateY(-0.125rem);
        }

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

    .button-primary {
        border-color: var(--muhsoft-brand-800);
        background-color: var(--muhsoft-brand-800);
        color: #ffffff;
        box-shadow: 0 8px 20px rgb(32 59 68 / 0.16), 0 2px 6px rgb(32 59 68 / 0.1);
    }

        .button-primary:hover {
            border-color: var(--muhsoft-brand-950);
            background-color: var(--muhsoft-brand-950);
            color: #ffffff;
            box-shadow: 0 14px 30px rgb(16 38 46 / 0.22), 0 3px 8px rgb(16 38 46 / 0.12);
        }

    .button-secondary {
        border-color: #cbd5e1;
        background-color: #ffffff;
        color: #334155;
        box-shadow: var(--muhsoft-shadow-sm);
    }

        .button-secondary:hover {
            border-color: var(--muhsoft-brand-300);
            background-color: var(--muhsoft-brand-50);
            color: var(--muhsoft-brand-800);
        }

    .button-ghost {
        border-color: transparent;
        background-color: transparent;
        color: #475569;
    }

        .button-ghost:hover {
            background-color: #f1f5f9;
            color: var(--muhsoft-brand-800);
        }

    .button-accent {
        border-color: var(--muhsoft-accent-400);
        background-color: var(--muhsoft-accent-400);
        color: var(--muhsoft-brand-950);
    }

        .button-accent:hover {
            border-color: var(--muhsoft-accent-300);
            background-color: var(--muhsoft-accent-300);
            color: var(--muhsoft-brand-950);
        }
}

/* ==========================================================
   MOBILE MENU BUTTON
========================================================== */

@layer components {
    .mobile-menu-button {
        display: inline-flex;
        width: 2.75rem;
        height: 2.75rem;
        flex: 0 0 2.75rem;
        align-items: center;
        justify-content: center;
        border: 1px solid #e2e8f0;
        border-radius: 0.75rem;
        background-color: #ffffff;
        color: #334155;
        box-shadow: var(--muhsoft-shadow-sm);
        cursor: pointer;
        transition: background-color var(--muhsoft-transition), border-color var(--muhsoft-transition), color var(--muhsoft-transition), box-shadow var(--muhsoft-transition);
    }

        .mobile-menu-button:hover {
            border-color: #cbd5e1;
            background-color: #f8fafc;
            color: var(--muhsoft-brand-800);
        }

        .mobile-menu-button[aria-expanded="true"] {
            border-color: var(--muhsoft-brand-200);
            background-color: var(--muhsoft-brand-50);
            color: var(--muhsoft-brand-800);
        }
}

/* ==========================================================
   MOBILE NAVIGATION
========================================================== */

@layer components {
    .mobile-menu {
        position: absolute;
        top: 100%;
        right: 0;
        left: 0;
        max-height: calc(100dvh - var(--muhsoft-header-height));
        overflow-y: auto;
        border-top: 1px solid #e2e8f0;
        background-color: rgb(255 255 255 / 0.985);
        box-shadow: var(--muhsoft-shadow-lg);
        -webkit-backdrop-filter: blur(18px);
        backdrop-filter: blur(18px);
        overscroll-behavior: contain;
    }

    .mobile-nav-link {
        display: flex;
        min-height: 3rem;
        align-items: center;
        border-radius: 0.75rem;
        padding: 0.75rem 1rem;
        color: #334155;
        font-size: 1rem;
        font-weight: 650;
        line-height: 1.5rem;
        transition: background-color var(--muhsoft-transition), color var(--muhsoft-transition);
    }

        .mobile-nav-link:hover,
        .mobile-nav-link.is-active {
            background-color: var(--muhsoft-brand-50);
            color: var(--muhsoft-brand-800);
        }

        .mobile-nav-link[aria-expanded="true"] {
            background-color: var(--muhsoft-brand-50);
            color: var(--muhsoft-brand-800);
        }

    .mobile-subnav-link {
        display: block;
        border-radius: 0.75rem;
        padding: 0.625rem 1rem;
        color: #64748b;
        font-size: 0.875rem;
        font-weight: 550;
        line-height: 1.35rem;
        transition: background-color var(--muhsoft-transition), color var(--muhsoft-transition), transform var(--muhsoft-transition);
    }

        .mobile-subnav-link:hover {
            background-color: #f1f5f9;
            color: var(--muhsoft-brand-800);
            transform: translateX(0.125rem);
        }
}

/* ==========================================================
   MAIN CONTENT
========================================================== */

@layer components {
    .page-container {
        width: 100%;
        max-width: 80rem;
        margin-right: auto;
        margin-left: auto;
        padding-right: 1rem;
        padding-left: 1rem;
    }

    .page-section {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }

    .page-heading {
        color: #0f172a;
        font-size: clamp(2rem, 4vw, 3.75rem);
        font-weight: 800;
        line-height: 1.08;
        letter-spacing: -0.035em;
        text-wrap: balance;
    }

    .section-heading {
        color: #0f172a;
        font-size: clamp(1.75rem, 3vw, 2.75rem);
        font-weight: 750;
        line-height: 1.15;
        letter-spacing: -0.025em;
        text-wrap: balance;
    }

    .section-description {
        max-width: 44rem;
        margin-top: 1rem;
        color: #64748b;
        font-size: 1.0625rem;
        line-height: 1.8;
    }

    .eyebrow {
        color: var(--muhsoft-accent-700);
        font-size: 0.75rem;
        font-weight: 800;
        line-height: 1rem;
        letter-spacing: 0.16em;
        text-transform: uppercase;
    }
}

/* ==========================================================
   CARDS
========================================================== */

@layer components {
    .content-card {
        border: 1px solid #e2e8f0;
        border-radius: 1rem;
        background-color: #ffffff;
        box-shadow: var(--muhsoft-shadow-sm);
        transition: border-color var(--muhsoft-transition), box-shadow var(--muhsoft-transition), transform var(--muhsoft-transition);
    }

        .content-card:hover {
            border-color: var(--muhsoft-brand-200);
            box-shadow: var(--muhsoft-shadow-md);
            transform: translateY(-0.25rem);
        }

    .product-card {
        display: flex;
        height: 100%;
        flex-direction: column;
        overflow: hidden;
        border: 1px solid #e2e8f0;
        border-radius: 1.125rem;
        background-color: #ffffff;
        box-shadow: var(--muhsoft-shadow-sm);
        transition: border-color var(--muhsoft-transition), box-shadow var(--muhsoft-transition), transform var(--muhsoft-transition);
    }

        .product-card:hover {
            border-color: var(--muhsoft-brand-200);
            box-shadow: var(--muhsoft-shadow-lg);
            transform: translateY(-0.375rem);
        }

    .product-card-icon {
        display: inline-flex;
        width: 3rem;
        height: 3rem;
        align-items: center;
        justify-content: center;
        border-radius: 0.875rem;
        background-color: var(--muhsoft-brand-50);
        color: var(--muhsoft-brand-700);
    }

        .product-card-icon svg {
            width: 1.625rem;
            height: 1.625rem;
        }
}

/* ==========================================================
   FORMS
========================================================== */

@layer components {
    .form-label {
        display: block;
        margin-bottom: 0.5rem;
        color: #334155;
        font-size: 0.875rem;
        font-weight: 650;
    }

    .form-input,
    .form-select,
    .form-textarea {
        display: block;
        width: 100%;
        border: 1px solid #cbd5e1;
        border-radius: 0.75rem;
        background-color: #ffffff;
        padding: 0.75rem 0.875rem;
        color: #0f172a;
        font-size: 0.9375rem;
        line-height: 1.5rem;
        box-shadow: 0 1px 2px rgb(15 23 42 / 0.03);
        transition: border-color var(--muhsoft-transition), box-shadow var(--muhsoft-transition), background-color var(--muhsoft-transition);
    }

        .form-input::placeholder,
        .form-textarea::placeholder {
            color: #94a3b8;
        }

        .form-input:hover,
        .form-select:hover,
        .form-textarea:hover {
            border-color: #94a3b8;
        }

        .form-input:focus,
        .form-select:focus,
        .form-textarea:focus {
            border-color: var(--muhsoft-brand-500);
            outline: 0;
            box-shadow: 0 0 0 3px rgb(80 139 151 / 0.15), 0 1px 2px rgb(15 23 42 / 0.03);
        }

    .form-textarea {
        min-height: 8rem;
        resize: vertical;
    }

    .form-help {
        margin-top: 0.375rem;
        color: #64748b;
        font-size: 0.75rem;
        line-height: 1.2rem;
    }

    .form-error {
        margin-top: 0.375rem;
        color: #dc2626;
        font-size: 0.75rem;
        line-height: 1.2rem;
    }
}

/* ==========================================================
   FOOTER
========================================================== */

@layer components {
    .site-footer {
        position: relative;
        overflow: hidden;
        background: radial-gradient( circle at 10% 10%, rgb(80 139 151 / 0.14), transparent 32rem ), radial-gradient( circle at 90% 25%, rgb(159 189 41 / 0.08), transparent 25rem ), var(--muhsoft-brand-950);
        color: #cbd5e1;
    }

    .footer-heading {
        color: #ffffff;
        font-size: 0.75rem;
        font-weight: 750;
        line-height: 1rem;
        letter-spacing: 0.12em;
        text-transform: uppercase;
    }

    .footer-links {
        margin-top: 1.25rem;
    }

        .footer-links > li + li {
            margin-top: 0.75rem;
        }

        .footer-links a {
            display: inline-flex;
            color: #94a3b8;
            font-size: 0.875rem;
            line-height: 1.4rem;
            transition: color var(--muhsoft-transition), transform var(--muhsoft-transition);
        }

            .footer-links a:hover {
                color: var(--muhsoft-accent-400);
                transform: translateX(0.125rem);
            }

    .footer-bottom-link {
        color: #64748b;
        transition: color var(--muhsoft-transition);
    }

        .footer-bottom-link:hover {
            color: #ffffff;
        }

    .social-link {
        display: inline-flex;
        width: 2.5rem;
        height: 2.5rem;
        align-items: center;
        justify-content: center;
        border: 1px solid rgb(255 255 255 / 0.12);
        border-radius: 0.75rem;
        background-color: rgb(255 255 255 / 0.025);
        color: #94a3b8;
        transition: background-color var(--muhsoft-transition), border-color var(--muhsoft-transition), color var(--muhsoft-transition), transform var(--muhsoft-transition);
    }

        .social-link:hover {
            border-color: var(--muhsoft-accent-400);
            background-color: var(--muhsoft-accent-400);
            color: var(--muhsoft-brand-950);
            transform: translateY(-0.1875rem);
        }

        .social-link svg {
            width: 1rem;
            height: 1rem;
        }
}

/* ==========================================================
   BACK TO TOP
========================================================== */

@layer components {
    .back-to-top {
        position: fixed;
        right: 1.25rem;
        bottom: 1.25rem;
        z-index: 40;
        display: inline-flex;
        width: 2.75rem;
        height: 2.75rem;
        visibility: hidden;
        align-items: center;
        justify-content: center;
        border: 1px solid rgb(255 255 255 / 0.12);
        border-radius: 0.75rem;
        background-color: var(--muhsoft-brand-800);
        color: #ffffff;
        opacity: 0;
        box-shadow: 0 16px 35px rgb(15 23 42 / 0.22), 0 4px 12px rgb(15 23 42 / 0.12);
        transform: translateY(1rem);
        cursor: pointer;
        transition: visibility var(--muhsoft-transition), opacity var(--muhsoft-transition), transform var(--muhsoft-transition), background-color var(--muhsoft-transition);
    }

        .back-to-top:hover {
            background-color: var(--muhsoft-brand-950);
            transform: translateY(-0.125rem);
        }

        .back-to-top.is-visible {
            visibility: visible;
            opacity: 1;
            transform: translateY(0);
        }
}

/* ==========================================================
   ASP.NET WEBFORMS
========================================================== */

@layer components {
    .validation-summary-errors {
        margin-bottom: 1rem;
        border: 1px solid #fecaca;
        border-radius: 0.75rem;
        background-color: #fef2f2;
        padding: 1rem;
        color: #991b1b;
        font-size: 0.875rem;
        line-height: 1.5rem;
    }

        .validation-summary-errors ul {
            margin-top: 0.5rem;
            padding-left: 1.25rem;
            list-style: disc;
        }

    .field-validation-error {
        display: block;
        margin-top: 0.375rem;
        color: #dc2626;
        font-size: 0.75rem;
    }

    .input-validation-error {
        border-color: #ef4444 !important;
        background-color: #fef2f2 !important;
    }
}

/* ==========================================================
   UTILITIES
========================================================== */

@layer utilities {
    .h-18 {
        height: 4.5rem;
    }

    .text-balance {
        text-wrap: balance;
    }

    .content-auto {
        content-visibility: auto;
        contain-intrinsic-size: 1px 800px;
    }

    .brand-gradient {
        background: linear-gradient( 135deg, var(--muhsoft-brand-950) 0%, var(--muhsoft-brand-800) 58%, var(--muhsoft-brand-700) 100% );
    }

    .accent-gradient {
        background: linear-gradient( 135deg, var(--muhsoft-accent-300), var(--muhsoft-accent-500) );
    }
}

/* ==========================================================
   RESPONSIVE
========================================================== */

@media (min-width: 640px) {
    .page-container {
        padding-right: 1.5rem;
        padding-left: 1.5rem;
    }

    .page-section {
        padding-top: 5rem;
        padding-bottom: 5rem;
    }

    .back-to-top {
        right: 1.75rem;
        bottom: 1.75rem;
    }
}

@media (min-width: 1024px) {
    .page-container {
        padding-right: 2rem;
        padding-left: 2rem;
    }

    .page-section {
        padding-top: 6rem;
        padding-bottom: 6rem;
    }

    .mobile-menu {
        max-height: calc( 100dvh - var(--muhsoft-header-height-lg) );
    }
}

@media (max-width: 1023px) {
    .site-header {
        background-color: rgb(255 255 255 / 0.98);
    }

    .dropdown-menu {
        display: none;
    }
}

@media (max-width: 639px) {
    .button {
        min-height: 2.875rem;
    }

    .page-section {
        padding-top: 3.5rem;
        padding-bottom: 3.5rem;
    }

    .page-heading {
        font-size: 2.25rem;
    }

    .section-heading {
        font-size: 1.875rem;
    }
}

/* ==========================================================
   REDUCED MOTION
========================================================== */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ==========================================================
   PRINT
========================================================== */

@media print {
    .site-header,
    .site-footer,
    .back-to-top,
    .skip-link,
    .mobile-menu {
        display: none !important;
    }

    body {
        background: #ffffff !important;
        color: #000000 !important;
    }

    main {
        width: 100% !important;
        max-width: none !important;
    }

    a {
        color: #000000 !important;
        text-decoration: none !important;
    }
}