/* =========================================================
   UDS PATHOLOGY
   Custom Styles
========================================================= */


/* ---------------------------------------------------------
   BASE
--------------------------------------------------------- */

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
}


/* ---------------------------------------------------------
   NAVIGATION
--------------------------------------------------------- */

.nav-link {
    position: relative;
    font-size: 0.875rem;
    font-weight: 600;
    color: #475569;
    transition: color 0.2s ease;
}

.nav-link:hover {
    color: #0284c7;
}

.nav-link.active {
    color: #0284c7;
}


/* ---------------------------------------------------------
   MOBILE MENU
--------------------------------------------------------- */

.mobile-link {
    display: block;
    border-radius: 0.75rem;
    padding: 0.75rem 1rem;
    font-weight: 600;
    color: #334155;
    transition: all 0.2s ease;
}

.mobile-link:hover {
    background: #f0f9ff;
    color: #0284c7;
}


/* ---------------------------------------------------------
   TRUST ITEMS
--------------------------------------------------------- */

.trust-item {
    font-size: 0.72rem;
    line-height: 1.2rem;
    font-weight: 700;
    color: #475569;
}


/* ---------------------------------------------------------
   FEATURE CARDS
--------------------------------------------------------- */

.feature-card {
    display: flex;
    align-items: center;
    gap: 1rem;

    border: 1px solid #e2e8f0;
    border-radius: 1.25rem;

    padding: 1.25rem;

    background: #ffffff;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}

.feature-card:hover {
    transform: translateY(-3px);

    border-color: #bae6fd;

    box-shadow:
        0 15px 40px rgba(8, 47, 73, 0.07);
}


.icon-box {
    display: flex;

    height: 2.75rem;
    width: 2.75rem;

    flex-shrink: 0;

    align-items: center;
    justify-content: center;

    border-radius: 1rem;

    background: #e0f2fe;

    color: #0284c7;

    font-weight: 800;
}


/* ---------------------------------------------------------
   SECTION TYPOGRAPHY
--------------------------------------------------------- */

.section-kicker {
    font-size: 0.72rem;

    font-weight: 800;

    letter-spacing: 0.18em;

    color: #0284c7;
}


.section-title {
    margin-top: 0.75rem;

    font-size: 2rem;

    line-height: 1.15;

    font-weight: 800;

    letter-spacing: -0.025em;

    color: #082f49;
}


.section-copy {
    margin-top: 0.75rem;

    color: #64748b;

    line-height: 1.75rem;
}


/* ---------------------------------------------------------
   TEST CARDS
--------------------------------------------------------- */

.test-card {
    display: block;

    border: 1px solid #e2e8f0;

    border-radius: 1.5rem;

    padding: 1.5rem;

    background: #ffffff;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}


.test-card:hover {
    transform: translateY(-5px);

    border-color: #bae6fd;

    box-shadow:
        0 20px 60px rgba(8, 47, 73, 0.08);
}


/* ---------------------------------------------------------
   WHY UDS CARDS
--------------------------------------------------------- */

.why-card {
    border: 1px solid #e2e8f0;

    border-radius: 1.5rem;

    padding: 1.5rem;

    background: #ffffff;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}


.why-card:hover {
    transform: translateY(-4px);

    box-shadow:
        0 20px 50px rgba(8, 47, 73, 0.07);
}


.why-card h3 {
    margin-top: 1rem;

    font-size: 1.05rem;

    font-weight: 800;

    color: #082f49;
}


.why-card p {
    margin-top: 0.5rem;

    font-size: 0.875rem;

    line-height: 1.5rem;

    color: #64748b;
}


.why-number {
    font-size: 0.75rem;

    font-weight: 800;

    color: #0284c7;
}


/* ---------------------------------------------------------
   BOOKING FORM
--------------------------------------------------------- */

.form-input {
    width: 100%;

    border: 1px solid #e2e8f0;

    border-radius: 0.9rem;

    padding: 0.85rem 1rem;

    outline: none;

    background: #ffffff;

    font-size: 0.875rem;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}


.form-input:focus {
    border-color: #38bdf8;

    box-shadow:
        0 0 0 3px rgba(56, 189, 248, 0.12);
}


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


/* ---------------------------------------------------------
   FAQ
--------------------------------------------------------- */

.faq {
    border: 1px solid #e2e8f0;

    border-radius: 1rem;

    background: #ffffff;

    padding: 1rem 1.25rem;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}


.faq:hover {
    border-color: #bae6fd;

    box-shadow:
        0 10px 30px rgba(8, 47, 73, 0.05);
}


.faq summary {
    cursor: pointer;

    list-style: none;

    font-weight: 700;

    color: #082f49;
}


.faq summary::-webkit-details-marker {
    display: none;
}


.faq summary::after {
    content: '+';

    float: right;

    font-size: 1.25rem;

    font-weight: 500;

    color: #0284c7;

    transition: transform 0.2s ease;
}


.faq[open] summary::after {
    content: '−';
}


.faq p {
    margin-top: 0.75rem;

    font-size: 0.875rem;

    line-height: 1.6rem;

    color: #64748b;
}


/* ---------------------------------------------------------
   HERO MEDICAL GRID
--------------------------------------------------------- */

.medical-grid {
    width: 100%;

    height: 100%;

    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.25) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.25) 1px,
            transparent 1px
        );

    background-size: 32px 32px;
}


/* ---------------------------------------------------------
   FLOATING HERO EFFECT
--------------------------------------------------------- */

.hero-float {
    animation: heroFloat 6s ease-in-out infinite;
}


@keyframes heroFloat {

    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }

    100% {
        transform: translateY(0);
    }

}


/* ---------------------------------------------------------
   BUTTON MICRO INTERACTION
--------------------------------------------------------- */

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


button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid rgba(56, 189, 248, 0.25);

    outline-offset: 2px;
}


/* ---------------------------------------------------------
   MOBILE BOTTOM BAR
--------------------------------------------------------- */

.mobile-action {
    padding: 0.9rem 0.5rem;

    text-align: center;

    font-size: 0.75rem;

    font-weight: 800;
}


/* ---------------------------------------------------------
   IMAGE DEFAULTS
--------------------------------------------------------- */

img {
    max-width: 100%;

    height: auto;

    display: block;
}


/* ---------------------------------------------------------
   SELECTION
--------------------------------------------------------- */

::selection {
    background: #bae6fd;

    color: #082f49;
}


/* ---------------------------------------------------------
   SCROLLBAR
--------------------------------------------------------- */

::-webkit-scrollbar {
    width: 8px;
}


::-webkit-scrollbar-track {
    background: #f8fafc;
}


::-webkit-scrollbar-thumb {
    background: #7dd3fc;

    border-radius: 999px;
}


::-webkit-scrollbar-thumb:hover {
    background: #38bdf8;
}


/* ---------------------------------------------------------
   RESPONSIVE TYPOGRAPHY
--------------------------------------------------------- */

@media (min-width: 1024px) {

    .section-title {
        font-size: 2.5rem;
    }

}


/* ---------------------------------------------------------
   TABLET
--------------------------------------------------------- */

@media (max-width: 1023px) {

    .hero-float {
        animation: none;
    }

}


/* ---------------------------------------------------------
   MOBILE
--------------------------------------------------------- */

@media (max-width: 640px) {

    .section-title {
        font-size: 1.85rem;
    }


    .section-kicker {
        font-size: 0.65rem;

        letter-spacing: 0.15em;
    }


    .feature-card {
        padding: 1rem;
    }


    .test-card {
        padding: 1.25rem;
    }


    .why-card {
        padding: 1.25rem;
    }

}


/* ---------------------------------------------------------
   ACCESSIBILITY
--------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }


    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;

        animation-iteration-count: 1 !important;

        transition-duration: 0.01ms !important;
    }

}