/* Cookie Policy page styles */

.cookie-policy-page {
    background-color: var(--surface-page);
    color: var(--text-primary);
    padding-block-end: var(--space-9);
}

.cookie-policy-page .section-label {
    display: block;
    margin-block-end: var(--space-3);
}

/* Hero */
.cookie-policy-hero {
    background-color: var(--surface-felt);
    border-block-end: var(--border-divider);
    padding-block: var(--space-8) var(--space-7);
}

.cookie-policy-hero__inner {
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-padding-mobile);
}

.cookie-policy-hero h1 {
    font-size: var(--text-display-l);
    line-height: var(--leading-display-l);
    letter-spacing: var(--tracking-display);
    margin-block-end: var(--space-4);
    color: var(--text-primary);
}

.cookie-policy-hero__effective {
    font-size: var(--text-body-m);
    color: var(--text-secondary);
    margin-block-end: 0;
}

/* Content container */
.cookie-policy-content {
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-padding-mobile);
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    padding-block-start: var(--space-8);
}

/* Section base */
.cookie-policy-section {
    width: 100%;
}

.cookie-policy-section__inner {
    width: 100%;
}

/* Introduction section - card */
.cookie-policy-section--intro .cookie-policy-section__inner {
    background-color: var(--surface-elevated);
    border: var(--border-brass);
    border-radius: var(--radius-2);
    padding: var(--space-6);
    max-width: 720px;
    margin-inline: auto;
}

.cookie-policy-section--intro h2 {
    font-size: var(--text-heading-2);
    line-height: var(--leading-heading-2);
    margin-block-end: var(--space-4);
}

.cookie-policy-section--intro p {
    max-width: 65ch;
    margin-block-end: var(--space-4);
}

.cookie-policy-section--intro ul {
    max-width: 65ch;
    margin-block-end: 0;
    padding-inline-start: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.cookie-policy-section--intro li {
    color: var(--text-primary);
    line-height: var(--leading-body-m);
}

/* What Are Cookies section */
.cookie-policy-section--what .cookie-policy-section__inner {
    max-width: 800px;
    margin-inline: 0;
    border-block-start: var(--border-divider);
    padding-block-start: var(--space-6);
}

.cookie-policy-section--what h2 {
    font-size: var(--text-heading-2);
    line-height: var(--leading-heading-2);
    margin-block-end: var(--space-4);
}

.cookie-policy-section--what p {
    max-width: 70ch;
    margin-block-end: var(--space-4);
}

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

/* Types of Cookies section */
.cookie-policy-section--types .cookie-policy-section__inner {
    max-width: 800px;
    margin-inline: auto;
}

.cookie-policy-section--types h2 {
    font-size: var(--text-heading-2);
    line-height: var(--leading-heading-2);
    margin-block-end: var(--space-5);
}

.cookie-policy-cards {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.cookie-policy-card {
    background-color: var(--surface-elevated);
    border: var(--border-brass);
    border-radius: var(--radius-2);
    padding: var(--space-5);
    transition: border-color var(--transition-hover), box-shadow var(--transition-hover), transform var(--transition-hover);
}

.cookie-policy-card:hover {
    border-color: var(--color-brass-500);
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-2px);
}

.cookie-policy-card h3 {
    font-size: var(--text-heading-3);
    line-height: var(--leading-heading-3);
    margin-block-end: var(--space-3);
}

.cookie-policy-card p {
    max-width: 65ch;
    margin-block-end: var(--space-4);
}

.cookie-policy-card ul {
    max-width: 65ch;
    margin-block-end: 0;
    padding-inline-start: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.cookie-policy-card li {
    color: var(--text-primary);
    line-height: var(--leading-body-m);
}

/* How We Use Cookies section */
.cookie-policy-section--how .cookie-policy-section__inner {
    max-width: 800px;
    margin-inline: 0;
    border-inline-start: 4px solid var(--color-felt-900);
    padding-inline-start: var(--space-5);
}

.cookie-policy-section--how h2 {
    font-size: var(--text-heading-2);
    line-height: var(--leading-heading-2);
    margin-block-end: var(--space-4);
}

.cookie-policy-section--how p {
    max-width: 70ch;
    margin-block-end: var(--space-4);
}

.cookie-policy-section--how ul {
    max-width: 70ch;
    margin-block-end: 0;
    padding-inline-start: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.cookie-policy-section--how li {
    color: var(--text-primary);
    line-height: var(--leading-body-m);
}

/* Managing Cookies section */
.cookie-policy-section--managing .cookie-policy-section__inner {
    background-color: var(--surface-elevated);
    border: var(--border-brass);
    border-radius: var(--radius-2);
    padding: var(--space-6);
    max-width: 720px;
    margin-inline: auto;
}

.cookie-policy-section--managing h2 {
    font-size: var(--text-heading-2);
    line-height: var(--leading-heading-2);
    margin-block-end: var(--space-4);
}

.cookie-policy-section--managing p {
    max-width: 65ch;
    margin-block-end: var(--space-4);
}

.cookie-policy-section--managing ol {
    max-width: 65ch;
    margin-block-end: var(--space-4);
    padding-inline-start: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.cookie-policy-section--managing li {
    color: var(--text-primary);
    line-height: var(--leading-body-m);
}

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

/* Changes to This Policy section */
.cookie-policy-section--changes .cookie-policy-section__inner {
    max-width: 800px;
    margin-inline: 0;
    border-block-start: var(--border-divider);
    padding-block-start: var(--space-6);
}

.cookie-policy-section--changes h2 {
    font-size: var(--text-heading-2);
    line-height: var(--leading-heading-2);
    margin-block-end: var(--space-4);
}

.cookie-policy-section--changes p {
    max-width: 70ch;
    margin-block-end: var(--space-4);
}

.cookie-policy-section--changes ul {
    max-width: 70ch;
    margin-block-end: var(--space-4);
    padding-inline-start: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.cookie-policy-section--changes li {
    color: var(--text-primary);
    line-height: var(--leading-body-m);
}

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

/* Contact Us section */
.cookie-policy-section--contact .cookie-policy-section__inner {
    background-color: var(--surface-elevated);
    border: var(--border-brass);
    border-radius: var(--radius-2);
    padding: var(--space-6);
    max-width: 720px;
    margin-inline: auto;
}

.cookie-policy-section--contact h2 {
    font-size: var(--text-heading-2);
    line-height: var(--leading-heading-2);
    margin-block-end: var(--space-4);
}

.cookie-policy-section--contact p {
    max-width: 65ch;
    margin-block-end: var(--space-4);
}

.cookie-policy-contact-list {
    list-style: none;
    padding-inline-start: 0;
    margin-block-end: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.cookie-policy-contact-list li {
    color: var(--text-primary);
    line-height: var(--leading-body-m);
}

.cookie-policy-contact-list a {
    color: var(--text-accent);
    text-decoration: none;
    transition: text-decoration-color var(--transition-hover);
    text-decoration-color: transparent;
    text-underline-offset: 3px;
}

.cookie-policy-contact-list a:hover {
    text-decoration: underline;
    text-decoration-color: var(--color-brass-500);
    text-decoration-thickness: 1px;
}

/* Tablet and desktop adjustments */
@media (min-width: 768px) {
    .cookie-policy-hero__inner,
    .cookie-policy-content {
        padding-inline: var(--container-padding-desktop);
    }

    .cookie-policy-hero {
        padding-block: var(--space-9) var(--space-8);
    }

    .cookie-policy-content {
        gap: var(--space-9);
        padding-block-start: var(--space-9);
    }

    .cookie-policy-section--intro .cookie-policy-section__inner,
    .cookie-policy-section--managing .cookie-policy-section__inner,
    .cookie-policy-section--contact .cookie-policy-section__inner {
        padding: var(--space-7);
    }

    .cookie-policy-section--types .cookie-policy-section__inner {
        max-width: 800px;
        margin-inline: auto;
    }

    .cookie-policy-cards {
        flex-direction: column;
        gap: var(--space-5);
    }
}

@media (max-width: 767px) {
    .cookie-policy-hero h1 {
        font-size: var(--text-heading-1);
        line-height: var(--leading-heading-1);
    }

    .cookie-policy-section--intro .cookie-policy-section__inner,
    .cookie-policy-section--managing .cookie-policy-section__inner,
    .cookie-policy-section--contact .cookie-policy-section__inner {
        padding: var(--space-5);
    }

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

    .cookie-policy-section--what .cookie-policy-section__inner,
    .cookie-policy-section--how .cookie-policy-section__inner,
    .cookie-policy-section--changes .cookie-policy-section__inner {
        max-width: 100%;
    }

    .cookie-policy-section--how .cookie-policy-section__inner {
        padding-inline-start: var(--space-4);
    }
}

@media (prefers-reduced-motion: reduce) {
    .cookie-policy-card {
        transition: none;
    }
}