/* Cookie Policy Page Styles */

.cookie-policy-page {
    background-color: var(--color-ivory-linen);
}

.cookie-policy-section {
    padding-block: var(--space-3xl);
}

.cookie-policy-section__inner {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-pad-mobile);
}

.cookie-policy-section__inner--narrow {
    max-width: 720px;
}

.cookie-policy-section__inner--wide {
    max-width: 900px;
}

/* Introduction Section */
.cookie-policy-intro {
    padding-block-start: var(--space-4xl);
}

.cookie-policy-intro__inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
    max-width: 720px;
    margin-inline: auto;
    padding-inline: var(--container-pad-mobile);
}

.cookie-policy-intro__content {
    max-width: 720px;
}

.cookie-policy-intro__lead {
    font-size: var(--text-body-large);
    line-height: var(--leading-body-large);
    color: var(--color-obsidian-black);
    margin-block-end: var(--space-md);
    max-width: 65ch;
}

.cookie-policy-intro__detail {
    color: var(--color-warm-slate);
    max-width: 65ch;
}

.cookie-policy-effective-card {
    align-self: flex-start;
    padding: var(--space-lg);
    background-color: var(--color-ceramic-white);
    border: var(--border-light);
    border-radius: var(--radius-default);
    max-width: 100%;
}

.cookie-policy-effective-card__label {
    margin-block-end: var(--space-xs);
    color: var(--color-warm-slate);
}

.cookie-policy-effective-card__date {
    font-family: var(--font-heading);
    font-size: var(--text-h3);
    line-height: var(--leading-h3);
    font-weight: 600;
    color: var(--color-obsidian-black);
}

/* What Are Cookies Section */
.cookie-policy-what-are .cookie-policy-section__inner {
    max-width: 720px;
}

.cookie-policy-what-are p {
    max-width: 65ch;
}

.cookie-policy-what-are__list {
    margin-block-start: var(--space-lg);
    max-width: 65ch;
}

.cookie-policy-what-are__list li {
    margin-block-end: var(--space-sm);
}

/* Cookie Categories Section */
.cookie-policy-category-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-lg);
    margin-block-start: var(--space-xl);
}

.cookie-policy-category-card {
    min-width: 0;
    padding: var(--space-xl);
    background-color: var(--color-ceramic-white);
    border: var(--border-light);
    border-radius: var(--radius-default);
}

.cookie-policy-category-card h3 {
    margin-block-end: var(--space-md);
}

.cookie-policy-category-card p {
    max-width: 55ch;
    color: var(--color-warm-slate);
    margin-block-end: var(--space-sm);
}

.cookie-policy-category-card p:last-child {
    margin-block-end: 0;
}

/* Specific Cookies Section */
.cookie-policy-specific .cookie-policy-section__inner {
    max-width: 900px;
}

.cookie-policy-specific > .cookie-policy-section__inner > p {
    max-width: 65ch;
}

.cookie-policy-table-wrapper {
    overflow-x: auto;
    margin-block-start: var(--space-xl);
    border: var(--border-light);
    border-radius: var(--radius-default);
    background-color: var(--color-ceramic-white);
}

.cookie-policy-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 600px;
}

.cookie-policy-table th,
.cookie-policy-table td {
    padding: var(--space-md) var(--space-lg);
    text-align: start;
    border-block-end: 1px solid var(--color-soft-champagne);
    font-size: var(--text-small);
    line-height: var(--leading-small);
}

.cookie-policy-table thead th {
    background-color: var(--color-alabaster-pearl);
    color: var(--color-obsidian-black);
    font-weight: 600;
    text-transform: uppercase;
    font-size: var(--text-caption);
    letter-spacing: var(--tracking-caption);
}

.cookie-policy-table tbody th {
    font-weight: 600;
    color: var(--color-obsidian-black);
}

.cookie-policy-table tbody td {
    color: var(--color-warm-slate);
}

.cookie-policy-table tbody tr:last-child th,
.cookie-policy-table tbody tr:last-child td {
    border-block-end: none;
}

.cookie-policy-specific__note {
    margin-block-start: var(--space-md);
}

/* Managing Cookies Section */
.cookie-policy-managing .cookie-policy-section__inner {
    max-width: 720px;
}

.cookie-policy-managing p {
    max-width: 60ch;
}

.cookie-policy-steps {
    list-style: none !important;
    counter-reset: cookie-step;
    margin-block: var(--space-lg);
    max-width: 60ch;
}

.cookie-policy-steps li {
    counter-increment: cookie-step;
    position: relative;
    padding-inline-start: var(--space-2xl);
    margin-block-end: var(--space-md);
    color: var(--color-warm-slate);
}

.cookie-policy-steps li::before {
    content: counter(cookie-step);
    position: absolute;
    left: 0;
    top: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-brushed-gold);
    color: var(--color-ivory-linen);
    font-size: var(--text-small);
    font-weight: 600;
    border-radius: var(--radius-small);
}

.cookie-policy-optout {
    margin-block-start: var(--space-xl);
    padding: var(--space-xl);
    background-color: var(--color-alabaster-pearl);
    border: var(--border-light);
    border-radius: var(--radius-default);
}

.cookie-policy-optout h3 {
    margin-block-end: var(--space-md);
}

.cookie-policy-optout p {
    max-width: 60ch;
    color: var(--color-warm-slate);
    margin-block-end: var(--space-sm);
}

.cookie-policy-optout p:last-child {
    margin-block-end: 0;
}

/* Changes Section */
.cookie-policy-changes .cookie-policy-section__inner {
    max-width: 720px;
}

.cookie-policy-changes p {
    max-width: 65ch;
}

.cookie-policy-changes__date {
    margin-block-start: var(--space-md);
}

/* Contact Section */
.cookie-policy-contact .cookie-policy-section__inner {
    max-width: 720px;
}

.cookie-policy-contact-card {
    margin-block-start: var(--space-xl);
    padding: var(--space-xl);
    background-color: var(--color-ceramic-white);
    border: var(--border-light);
    border-radius: var(--radius-default);
    max-width: 600px;
}

.cookie-policy-contact-list {
    list-style: none !important;
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    margin-block-end: 0;
}

.cookie-policy-contact-list li {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.cookie-policy-contact-list__label {
    color: var(--color-warm-slate);
}

.cookie-policy-contact-list__value {
    color: var(--color-obsidian-black);
    margin-block-end: 0;
    max-width: 60ch;
}

.cookie-policy-contact-list a {
    max-width: 60ch;
}

/* Responsive */
@media (min-width: 768px) {
    .cookie-policy-section__inner {
        padding-inline: var(--container-pad-desktop);
    }

    .cookie-policy-intro__inner {
        padding-inline: var(--container-pad-desktop);
    }

    .cookie-policy-category-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-xl);
    }
}

@media (max-width: 767px) {
    .cookie-policy-section {
        padding-block: var(--space-2xl);
    }

    .cookie-policy-intro {
        padding-block-start: var(--space-3xl);
    }

    .cookie-policy-intro__inner {
        padding-inline: var(--container-pad-mobile);
    }

    .cookie-policy-category-grid {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }

    .cookie-policy-category-card {
        padding: var(--space-lg);
    }

    .cookie-policy-table-wrapper {
        margin-inline: calc(-1 * var(--container-pad-mobile));
        border-radius: 0;
        border-inline: none;
    }

    .cookie-policy-table {
        min-width: 480px;
    }

    .cookie-policy-contact-card {
        padding: var(--space-lg);
    }
}

@media (max-width: 480px) {
    .cookie-policy-intro__lead,
    .cookie-policy-intro__detail,
    .cookie-policy-what-are p,
    .cookie-policy-managing p,
    .cookie-policy-changes p,
    .cookie-policy-contact-list__value,
    .cookie-policy-contact-list a {
        max-width: 100%;
    }

    .cookie-policy-effective-card {
        width: 100%;
    }

    .cookie-policy-table-wrapper {
        margin-inline: calc(-1 * var(--container-pad-mobile));
    }
}