@use 'design-system' as *;

.policyPage {
    margin-top: $spacing-size-12;
    margin-bottom: calc($spacing-size-12 * 4);

    nav {
        margin-top: $spacing-size-8;
        margin-bottom: $spacing-size-8;
    }

    nav li:not(:last-child) {
        margin-bottom: $spacing-size-1;
    }

    hr {
        margin-bottom: $spacing-size-2;
    }

    @media screen and (min-width: $breakpoint-policy-page-extra-large) {
        header {
            display: flex;
            gap: $spacing-size-8;
        }

        nav {
            display: inline-block;
            order: -1;
        }

        nav li:not(:last-child) {
            margin-bottom: $spacing-size-2;
            line-height: var(--text-lh-tight);
        }
    }
}

.introduction {
    margin-top: $spacing-size-8;
}

.policyList ol {
    counter-reset: policy-count;

    list-style: none;
    padding-left: 0;

    > li {
        counter-increment: policy-count;
        margin-bottom: $spacing-size-12;
    }

    li > h3:first-child:before {
        content: counter(policy-count, decimal) '. ';
        font-weight: var(--text-regular);
    }

    li::marker {
        font-size: var(--text-fs-xl);
    }

    @media screen and (min-width: $breakpoint-policy-page-extra-large) {
        list-style: decimal;
        padding-left: unset;

        li h3::before {
            display: none;
        }
    }
}

.settingsButton {
    margin-bottom: $spacing-size-4;
}

// Overrides for OneTrust 3rd party styles on cookies page
// =======================================================
:global(.ot-sdk-cookie-policy) {
    * {
        font-family: var(--text-font-family) !important;
        font-size: var(--text-fs-base) !important;
        line-height: var(--line-height) !important;
        font-weight: var(--text-regular) !important;
        color: var(--color-text-primary) !important;
        background-color: unset !important;
    }

    h3,
    h4 {
        font-weight: var(--text-bold) !important;
        margin-bottom: 0.5rem !important;
    }

    table {
        margin-bottom: 16px !important;
        border-collapse: collapse !important;
        border-radius: 0 !important;
        border: none !important;
        border-bottom: 1px solid var(--color-border-primary) !important;
        border-top: 1px solid var(--color-border-primary) !important;
    }

    thead,
    tr:nth-child(even) {
        background-color: var(--table-odd-row-background-color) !important;
    }

    thead {
        font-weight: var(--text-bold) !important;
    }

    tr {
        border-top: 1px solid var(--color-border-primary) !important;
    }

    th,
    td {
        padding: 8px 16px !important;
        background-color: transparent !important;
        border-right: none !important;
        border-bottom: none !important;
    }

    a {
        color: var(--color-link) !important;
    }

    a:hover {
        color: var(--color-link-hover) !important;
    }
}

:global(.ot-sdk-show-settings) {
    appearance: none !important;
    display: inline-block;
    font-size: var(--text-fs-base) !important;
    padding: 0.5em 1em !important;
    letter-spacing: 0.025em !important;
    border-radius: var(--radius-sm) !important;
    background-color: var(--color-button-primary-bg) !important;
    color: var(--color-button-primary-fg) !important;
    border: none !important;
    transition: background-color 0.25s ease-in-out !important;

    &:not(:disabled) {
        cursor: pointer !important;
    }

    &:hover {
        background-color: var(--color-button-primary-bg-hover) !important;
    }

    &:active {
        background-color: var(--color-button-primary-bg-active) !important;
        transition: background-color 0.125s ease-in-out !important;
    }
}
// End OneTrust overrides
