/*
|--------------------------------------------------------------------------
| MKGO - Public Policy Pages
|--------------------------------------------------------------------------
|
| File:
| /assets/css/pages/policy.css
|
| Used by:
|
| /pages/terms.php
| /pages/privacy.php
| /pages/refunds.php
| /pages/cancellations.php
| /pages/safety.php
|
*/


/*
|--------------------------------------------------------------------------
| Policy Main
|--------------------------------------------------------------------------
*/

.policy-main {
    width: 100%;

    background: #ffffff;
}


/*
|--------------------------------------------------------------------------
| Policy Hero
|--------------------------------------------------------------------------
*/

.policy-hero {
    position: relative;

    padding:
        72px
        0
        64px;

    border-bottom:
        1px solid
        #e2e8f0;

    background:
        linear-gradient(
            180deg,
            #f8fafc 0%,
            #ffffff 100%
        );
}


.policy-hero-content {
    width: 100%;
    max-width: 820px;
}


.policy-hero .page-eyebrow {
    display: inline-flex;
    align-items: center;

    margin:
        0
        0
        16px;

    color: #64748b;

    font-size: 0.78rem;
    font-weight: 800;

    line-height: 1.4;

    text-transform: uppercase;
    letter-spacing: 0.1em;
}


.policy-hero h1 {
    max-width: 760px;

    margin: 0;

    color: #0f172a;

    font-size:
        clamp(
            2.25rem,
            5vw,
            4rem
        );

    font-weight: 800;

    line-height: 1.06;

    letter-spacing: -0.045em;
}


.policy-hero-description {
    max-width: 720px;

    margin:
        20px
        0
        0;

    color: #64748b;

    font-size: 1rem;

    line-height: 1.75;
}


/*
|--------------------------------------------------------------------------
| Policy Metadata
|--------------------------------------------------------------------------
*/

.policy-meta {
    display: flex;
    align-items: center;

    flex-wrap: wrap;

    gap:
        9px
        12px;

    margin-top: 25px;

    color: #64748b;

    font-size: 0.82rem;

    line-height: 1.5;
}


.policy-meta-item {
    display: inline-flex;
    align-items: center;

    gap: 6px;
}


.policy-meta-label {
    color: #94a3b8;
}


.policy-meta-item strong {
    color: #334155;

    font-weight: 700;
}


.policy-meta-separator {
    color: #cbd5e1;
}


/*
|--------------------------------------------------------------------------
| Policy Section
|--------------------------------------------------------------------------
*/

.policy-section {
    padding:
        64px
        0
        88px;

    background: #ffffff;
}


/*
|--------------------------------------------------------------------------
| Policy Layout
|--------------------------------------------------------------------------
*/

.policy-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        290px;

    align-items: start;

    gap: 48px;
}


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

.policy-document {
    min-width: 0;

    padding:
        38px
        42px;

    border:
        1px solid
        #e2e8f0;

    border-radius: 20px;

    background: #ffffff;

    box-shadow:
        0 10px 35px
        rgba(15, 23, 42, 0.045);
}


/*
|--------------------------------------------------------------------------
| Policy Content
|--------------------------------------------------------------------------
*/

.policy-content {
    width: 100%;

    color: #475569;

    font-size: 0.96rem;

    line-height: 1.8;

    overflow-wrap: break-word;
}


/*
|--------------------------------------------------------------------------
| Policy Headings
|--------------------------------------------------------------------------
*/

.policy-content h1,
.policy-content h2,
.policy-content h3,
.policy-content h4,
.policy-content h5,
.policy-content h6 {
    color: #0f172a;

    font-weight: 800;

    line-height: 1.3;

    letter-spacing: -0.02em;

    scroll-margin-top: 110px;
}


.policy-content h1 {
    margin:
        0
        0
        24px;

    font-size: 1.75rem;
}


.policy-content h2 {
    margin:
        38px
        0
        14px;

    padding-top: 4px;

    font-size: 1.35rem;
}


.policy-content h3 {
    margin:
        30px
        0
        12px;

    font-size: 1.1rem;
}


.policy-content h4 {
    margin:
        25px
        0
        10px;

    font-size: 1rem;
}


.policy-content h5,
.policy-content h6 {
    margin:
        22px
        0
        9px;

    font-size: 0.94rem;
}


/*
|--------------------------------------------------------------------------
| First Policy Heading
|--------------------------------------------------------------------------
*/

.policy-content > h1:first-child,
.policy-content > h2:first-child,
.policy-content > h3:first-child {
    margin-top: 0;
}


/*
|--------------------------------------------------------------------------
| Policy Paragraphs
|--------------------------------------------------------------------------
*/

.policy-content p {
    margin:
        0
        0
        18px;
}


.policy-content p:last-child {
    margin-bottom: 0;
}


/*
|--------------------------------------------------------------------------
| Policy Lists
|--------------------------------------------------------------------------
*/

.policy-content ul,
.policy-content ol {
    margin:
        0
        0
        22px;

    padding-left: 24px;
}


.policy-content li {
    margin-bottom: 9px;

    padding-left: 3px;
}


.policy-content li:last-child {
    margin-bottom: 0;
}


.policy-content li::marker {
    color: #64748b;

    font-weight: 700;
}


/*
|--------------------------------------------------------------------------
| Policy Links
|--------------------------------------------------------------------------
*/

.policy-content a {
    color: #0f172a;

    font-weight: 700;

    text-decoration: underline;

    text-decoration-color: #94a3b8;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;

    transition:
        color 0.15s ease,
        text-decoration-color 0.15s ease;
}


.policy-content a:hover {
    color: #020617;

    text-decoration-color: #0f172a;
}


.policy-content a:focus-visible {
    outline:
        2px solid
        #0f172a;

    outline-offset: 3px;

    border-radius: 2px;
}


/*
|--------------------------------------------------------------------------
| Policy Strong / Emphasis
|--------------------------------------------------------------------------
*/

.policy-content strong,
.policy-content b {
    color: #334155;

    font-weight: 800;
}


.policy-content em,
.policy-content i {
    color: #475569;
}


/*
|--------------------------------------------------------------------------
| Policy Horizontal Rule
|--------------------------------------------------------------------------
*/

.policy-content hr {
    height: 1px;

    margin:
        34px
        0;

    border: 0;

    background: #e2e8f0;
}


/*
|--------------------------------------------------------------------------
| Policy Blockquote
|--------------------------------------------------------------------------
*/

.policy-content blockquote {
    margin:
        24px
        0;

    padding:
        18px
        20px;

    border-left:
        4px solid
        #0f172a;

    border-radius:
        0
        10px
        10px
        0;

    background: #f8fafc;

    color: #475569;
}


.policy-content blockquote p:last-child {
    margin-bottom: 0;
}


/*
|--------------------------------------------------------------------------
| Policy Tables
|--------------------------------------------------------------------------
*/

.policy-content table {
    width: 100%;

    margin:
        26px
        0;

    border-collapse: collapse;

    border:
        1px solid
        #e2e8f0;

    font-size: 0.9rem;
}


.policy-content th,
.policy-content td {
    padding:
        12px
        14px;

    border:
        1px solid
        #e2e8f0;

    text-align: left;
    vertical-align: top;
}


.policy-content th {
    background: #f8fafc;

    color: #334155;

    font-weight: 800;
}


/*
|--------------------------------------------------------------------------
| Policy Code / Technical Values
|--------------------------------------------------------------------------
*/

.policy-content code {
    padding:
        2px
        6px;

    border-radius: 5px;

    background: #f1f5f9;

    color: #334155;

    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        monospace;

    font-size: 0.88em;
}


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

.policy-content img {
    display: block;

    max-width: 100%;
    height: auto;

    margin:
        24px
        0;

    border-radius: 12px;
}


/*
|--------------------------------------------------------------------------
| Policy Sidebar
|--------------------------------------------------------------------------
*/

.policy-sidebar {
    position: sticky;

    top: 100px;

    display: grid;

    gap: 18px;

    min-width: 0;
}


/*
|--------------------------------------------------------------------------
| Policy Sidebar Card
|--------------------------------------------------------------------------
*/

.policy-sidebar-card {
    padding: 22px;

    border:
        1px solid
        #e2e8f0;

    border-radius: 16px;

    background: #ffffff;

    box-shadow:
        0 6px 24px
        rgba(15, 23, 42, 0.035);
}


.policy-sidebar-card h2 {
    margin:
        0
        0
        14px;

    color: #0f172a;

    font-size: 0.95rem;
    font-weight: 800;

    line-height: 1.4;
}


.policy-sidebar-card p {
    margin:
        0
        0
        14px;

    color: #64748b;

    font-size: 0.84rem;

    line-height: 1.65;
}


/*
|--------------------------------------------------------------------------
| Policy Navigation
|--------------------------------------------------------------------------
*/

.policy-navigation {
    display: grid;

    gap: 4px;
}


.policy-navigation a {
    position: relative;

    display: block;

    padding:
        10px
        11px;

    border-radius: 9px;

    color: #64748b;

    font-size: 0.84rem;
    font-weight: 650;

    line-height: 1.4;

    text-decoration: none;

    transition:
        background-color 0.15s ease,
        color 0.15s ease,
        transform 0.15s ease;
}


.policy-navigation a:hover {
    background: #f8fafc;

    color: #0f172a;
}


.policy-navigation a.active,
.policy-navigation a[aria-current="page"] {
    background: #0f172a;

    color: #ffffff;
}


.policy-navigation a:focus-visible {
    outline:
        2px solid
        #0f172a;

    outline-offset: 2px;
}


/*
|--------------------------------------------------------------------------
| Policy Unavailable
|--------------------------------------------------------------------------
*/

.policy-unavailable {
    padding:
        34px;

    border:
        1px dashed
        #cbd5e1;

    border-radius: 16px;

    background: #f8fafc;

    text-align: center;
}


.policy-unavailable h2 {
    margin:
        0
        0
        10px;

    color: #0f172a;

    font-size: 1.25rem;
    font-weight: 800;

    line-height: 1.3;
}


.policy-unavailable p {
    max-width: 540px;

    margin:
        0
        auto
        22px;

    color: #64748b;

    line-height: 1.7;
}


/*
|--------------------------------------------------------------------------
| Terms Page
|--------------------------------------------------------------------------
*/

.terms-policy-page
.policy-hero {
    background:
        linear-gradient(
            180deg,
            #f8fafc 0%,
            #ffffff 100%
        );
}


/*
|--------------------------------------------------------------------------
| Privacy Page
|--------------------------------------------------------------------------
*/

.privacy-policy-page
.policy-hero {
    background:
        linear-gradient(
            180deg,
            #f8fafc 0%,
            #ffffff 100%
        );
}


/*
|--------------------------------------------------------------------------
| Refund Page
|--------------------------------------------------------------------------
*/

.refund-policy-page
.policy-hero {
    background:
        linear-gradient(
            180deg,
            #f8fafc 0%,
            #ffffff 100%
        );
}


/*
|--------------------------------------------------------------------------
| Cancellation Page
|--------------------------------------------------------------------------
*/

.cancellation-policy-page
.policy-hero {
    background:
        linear-gradient(
            180deg,
            #f8fafc 0%,
            #ffffff 100%
        );
}


/*
|--------------------------------------------------------------------------
| Safety Page
|--------------------------------------------------------------------------
*/

.safety-policy-page
.policy-hero {
    background:
        linear-gradient(
            180deg,
            #f8fafc 0%,
            #ffffff 100%
        );
}


/*
|--------------------------------------------------------------------------
| Tablet
|--------------------------------------------------------------------------
*/

@media (max-width: 992px) {

    .policy-hero {
        padding:
            58px
            0
            52px;
    }


    .policy-section {
        padding:
            52px
            0
            72px;
    }


    .policy-layout {
        grid-template-columns: 1fr;

        gap: 28px;
    }


    .policy-sidebar {
        position: static;

        top: auto;

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        order: -1;
    }

}


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

@media (max-width: 640px) {

    .policy-hero {
        padding:
            44px
            0
            40px;
    }


    .policy-hero h1 {
        font-size:
            clamp(
                2rem,
                10vw,
                2.75rem
            );
    }


    .policy-hero-description {
        margin-top: 16px;

        font-size: 0.94rem;
    }


    .policy-meta {
        align-items: flex-start;
        flex-direction: column;

        gap: 6px;

        margin-top: 20px;
    }


    .policy-meta-separator {
        display: none;
    }


    .policy-section {
        padding:
            34px
            0
            56px;
    }


    .policy-layout {
        gap: 22px;
    }


    .policy-document {
        padding:
            26px
            21px;

        border-radius: 16px;
    }


    .policy-content {
        font-size: 0.92rem;

        line-height: 1.75;
    }


    .policy-content h1 {
        font-size: 1.5rem;
    }


    .policy-content h2 {
        margin-top: 32px;

        font-size: 1.2rem;
    }


    .policy-content h3 {
        font-size: 1.05rem;
    }


    .policy-sidebar {
        grid-template-columns: 1fr;
    }


    .policy-sidebar-card {
        padding: 19px;
    }


    .policy-unavailable {
        padding:
            26px
            20px;
    }


    /*
    |--------------------------------------------------------------------------
    | Wide Policy Content
    |--------------------------------------------------------------------------
    */

    .policy-content table {
        display: block;

        max-width: 100%;

        overflow-x: auto;

        white-space: nowrap;
    }

}


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

@media (max-width: 420px) {

    .policy-document {
        padding:
            22px
            17px;
    }


    .policy-content ul,
    .policy-content ol {
        padding-left: 20px;
    }


    .policy-sidebar-card {
        padding: 17px;
    }

}


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

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

    .policy-content a,
    .policy-navigation a {
        transition: none;
    }

}