/*
|--------------------------------------------------------------------------
| MKGO - Public Header
|--------------------------------------------------------------------------
|
| File:
| /assets/css/components/header.css
|
| Shared styles related to the public document shell and accessibility.
|
| Navigation-specific styles belong in:
| /assets/css/components/navbar.css
|
*/


/*
|--------------------------------------------------------------------------
| Document
|--------------------------------------------------------------------------
*/

html {
    scroll-behavior: smooth;
    scroll-padding-top: 92px;
}


body.public-page {
    min-height: 100vh;

    margin: 0;

    background: #ffffff;
    color: #0f172a;
}


/*
|--------------------------------------------------------------------------
| Main Content
|--------------------------------------------------------------------------
*/

body.public-page #main-content {
    position: relative;

    display: block;

    width: 100%;
}


/*
|--------------------------------------------------------------------------
| Skip Link
|--------------------------------------------------------------------------
*/

.skip-link {
    position: fixed;

    top: 12px;
    left: 12px;

    z-index: 10000;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 42px;

    padding:
        10px
        16px;

    border:
        1px solid
        rgba(255, 255, 255, 0.25);

    border-radius: 8px;

    background: #0f172a;
    color: #ffffff;

    box-shadow:
        0 12px 30px
        rgba(15, 23, 42, 0.22);

    font-size: 0.82rem;
    font-weight: 750;
    line-height: 1;

    text-decoration: none;

    opacity: 0;

    pointer-events: none;

    transform:
        translateY(-150%);

    transition:
        opacity 0.18s ease,
        transform 0.18s ease;
}


.skip-link:focus,
.skip-link:focus-visible {
    opacity: 1;

    pointer-events: auto;

    transform:
        translateY(0);

    outline:
        3px solid
        rgba(255, 255, 255, 0.85);

    outline-offset: 3px;
}


/*
|--------------------------------------------------------------------------
| Anchor Targets
|--------------------------------------------------------------------------
|
| Helps headings/sections remain visible below the sticky public navbar.
|
*/

body.public-page
:where(
    section[id],
    article[id],
    div[id],
    h1[id],
    h2[id],
    h3[id],
    h4[id]
) {
    scroll-margin-top: 100px;
}


/*
|--------------------------------------------------------------------------
| Keyboard Focus
|--------------------------------------------------------------------------
|
| Shared components can provide more specific focus styles. This acts as a
| sensible public-site fallback.
|
*/

body.public-page
:where(
    a,
    button,
    input,
    select,
    textarea,
    summary,
    [tabindex]
):focus-visible {
    outline:
        2px solid
        #0f172a;

    outline-offset: 3px;
}


/*
|--------------------------------------------------------------------------
| Images
|--------------------------------------------------------------------------
*/

body.public-page img {
    max-width: 100%;
}


/*
|--------------------------------------------------------------------------
| Selection
|--------------------------------------------------------------------------
*/

body.public-page ::selection {
    background: #0f172a;
    color: #ffffff;
}


/*
|--------------------------------------------------------------------------
| Mobile
|--------------------------------------------------------------------------
*/

@media (max-width: 760px) {

    html {
        scroll-padding-top: 78px;
    }


    body.public-page
    :where(
        section[id],
        article[id],
        div[id],
        h1[id],
        h2[id],
        h3[id],
        h4[id]
    ) {
        scroll-margin-top: 86px;
    }


    .skip-link {
        top: 8px;
        left: 8px;

        max-width:
            calc(100vw - 16px);
    }

}


/*
|--------------------------------------------------------------------------
| Reduced Motion
|--------------------------------------------------------------------------
*/

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

    html {
        scroll-behavior: auto;
    }


    .skip-link {
        transition: none;
    }

}