/*
|--------------------------------------------------------------------------
| MKGO - Cancellation Policy
|--------------------------------------------------------------------------
|
| File:
| /assets/css/pages/cancellations.css
|
| Page-specific styling for:
|
| /pages/cancellations.php
|
| Base policy styling belongs in:
|
| /assets/css/pages/policy.css
|
*/


/*
|--------------------------------------------------------------------------
| Cancellation Hero
|--------------------------------------------------------------------------
*/

.cancellation-policy-page
.policy-hero {
    position: relative;

    overflow: hidden;

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


.cancellation-policy-page
.policy-hero::after {
    content: "";

    position: absolute;

    top: -170px;
    right: -170px;

    width: 430px;
    height: 430px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(15, 23, 42, 0.055) 0%,
            rgba(15, 23, 42, 0) 70%
        );

    pointer-events: none;
}


.cancellation-policy-page
.policy-hero
.site-container {
    position: relative;

    z-index: 1;
}


/*
|--------------------------------------------------------------------------
| Cancellation Eyebrow
|--------------------------------------------------------------------------
*/

.cancellation-policy-page
.policy-hero
.page-eyebrow::before {
    content: "";

    display: inline-block;

    width: 7px;
    height: 7px;

    margin-right: 8px;

    border-radius: 50%;

    background: #0f172a;
}


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

.cancellation-policy-page
.policy-document {
    position: relative;
}


/*
|--------------------------------------------------------------------------
| Cancellation Policy Section Headings
|--------------------------------------------------------------------------
*/

.cancellation-policy-page
.policy-content h2 {
    position: relative;

    padding-left: 17px;
}


.cancellation-policy-page
.policy-content h2::before {
    content: "";

    position: absolute;

    top: 0.22em;
    bottom: 0.22em;
    left: 0;

    width: 3px;

    border-radius: 999px;

    background: #0f172a;
}


/*
|--------------------------------------------------------------------------
| Important / Notice Blocks
|--------------------------------------------------------------------------
|
| These work automatically if managed policy HTML contains classes such as:
|
| <div class="policy-notice">...</div>
| <div class="policy-warning">...</div>
| <div class="policy-important">...</div>
|
*/

.cancellation-policy-page
.policy-content
.policy-notice,

.cancellation-policy-page
.policy-content
.policy-warning,

.cancellation-policy-page
.policy-content
.policy-important {
    margin:
        24px
        0;

    padding:
        18px
        20px;

    border:
        1px solid
        #e2e8f0;

    border-left:
        4px solid
        #0f172a;

    border-radius:
        0
        12px
        12px
        0;

    background: #f8fafc;
}


.cancellation-policy-page
.policy-content
.policy-notice > :last-child,

.cancellation-policy-page
.policy-content
.policy-warning > :last-child,

.cancellation-policy-page
.policy-content
.policy-important > :last-child {
    margin-bottom: 0;
}


/*
|--------------------------------------------------------------------------
| Cancellation Charge / Fee Values
|--------------------------------------------------------------------------
|
| Optional managed policy HTML:
|
| <span class="cancellation-fee">R...</span>
|
*/

.cancellation-policy-page
.policy-content
.cancellation-fee {
    display: inline-flex;
    align-items: center;

    padding:
        3px
        8px;

    border-radius: 6px;

    background: #f1f5f9;

    color: #0f172a;

    font-weight: 800;

    white-space: nowrap;
}


/*
|--------------------------------------------------------------------------
| Cancellation Timing
|--------------------------------------------------------------------------
|
| Optional managed policy HTML:
|
| <span class="cancellation-time">...</span>
|
*/

.cancellation-policy-page
.policy-content
.cancellation-time {
    color: #334155;

    font-weight: 750;
}


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

.cancellation-policy-page
.policy-content ul li,

.cancellation-policy-page
.policy-content ol li {
    padding-left: 5px;
}


/*
|--------------------------------------------------------------------------
| Policy Table
|--------------------------------------------------------------------------
*/

.cancellation-policy-page
.policy-content table {
    border-radius: 10px;

    overflow: hidden;
}


.cancellation-policy-page
.policy-content th {
    color: #0f172a;
}


/*
|--------------------------------------------------------------------------
| Sidebar Active Cancellation Policy
|--------------------------------------------------------------------------
*/

.cancellation-policy-page
.policy-navigation
a[aria-current="page"] {
    position: relative;

    padding-left: 17px;
}


.cancellation-policy-page
.policy-navigation
a[aria-current="page"]::before {
    content: "";

    position: absolute;

    top: 50%;
    left: 8px;

    width: 4px;
    height: 4px;

    border-radius: 50%;

    background: currentColor;

    transform:
        translateY(-50%);
}


/*
|--------------------------------------------------------------------------
| JS Section Highlight
|--------------------------------------------------------------------------
*/

.cancellation-policy-page
.policy-content
[data-policy-section] {
    scroll-margin-top: 120px;
}


.cancellation-policy-page
.policy-content
[data-policy-section].is-policy-section-active {
    position: relative;
}


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

@media (max-width: 640px) {

    .cancellation-policy-page
    .policy-hero::after {
        top: -130px;
        right: -190px;

        width: 350px;
        height: 350px;
    }


    .cancellation-policy-page
    .policy-content h2 {
        padding-left: 14px;
    }


    .cancellation-policy-page
    .policy-content
    .policy-notice,

    .cancellation-policy-page
    .policy-content
    .policy-warning,

    .cancellation-policy-page
    .policy-content
    .policy-important {
        padding:
            16px
            17px;
    }

}


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

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

    .cancellation-policy-page
    .policy-content
    [data-policy-section] {
        scroll-behavior: auto;
    }

}