/* ===== Cookie Policy Page Styles ===== */

.cookie-policy-page {
    display: flex;
    flex-direction: column;
    gap: var(--space-64);
    padding-block: var(--space-96) var(--space-64);
}

@media (max-width: 640px) {
    .cookie-policy-page {
        gap: var(--space-48);
        padding-block: var(--space-64) var(--space-48);
    }
}

/* Hero */
.cookie-hero {
    width: 100%;
}

.cookie-hero__inner {
    max-width: 800px;
    margin-inline: auto;
    padding-inline: var(--container-padding-mobile);
    text-align: left;
}

@media (min-width: 641px) {
    .cookie-hero__inner {
        padding-inline: var(--container-padding-desktop);
    }
}

.cookie-hero .eyebrow {
    margin-block-end: var(--space-12);
}

.cookie-hero h1 {
    font-size: var(--text-h1-size);
    line-height: var(--text-h1-line-height);
    letter-spacing: var(--text-h1-tracking);
    margin-block-end: var(--space-24);
    max-width: 24ch;
    overflow-wrap: break-word;
}

.cookie-hero__lead {
    font-size: var(--text-body-large-size);
    line-height: var(--text-body-large-line-height);
    letter-spacing: var(--text-body-large-tracking);
    color: var(--color-text-secondary);
    max-width: 68ch;
    margin-block-end: 0;
}

/* Age Notice */
.cookie-age-notice {
    width: 100%;
}

.cookie-age-notice__card {
    max-width: 800px;
    margin-inline: auto;
    padding: var(--space-24);
    background-color: var(--color-surface);
    border: 1px solid var(--color-danger);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
    padding-inline: var(--container-padding-mobile);
}

@media (min-width: 641px) {
    .cookie-age-notice__card {
        padding: var(--space-32);
        padding-inline: var(--space-32);
    }
}

.cookie-age-notice__label {
    font-size: var(--text-caption-size);
    line-height: var(--text-caption-line-height);
    letter-spacing: var(--text-caption-tracking);
    text-transform: uppercase;
    font-weight: 500;
    color: var(--color-danger);
    margin-block-end: 0;
}

.cookie-age-notice__title {
    font-size: var(--text-h3-size);
    line-height: var(--text-h3-line-height);
    letter-spacing: var(--text-h3-tracking);
    margin-block-end: 0;
}

.cookie-age-notice__text {
    font-size: var(--text-small-size);
    line-height: var(--text-small-line-height);
    letter-spacing: var(--text-small-tracking);
    color: var(--color-text-secondary);
    max-width: 68ch;
    margin-block-end: 0;
}

/* General Sections */
.cookie-section {
    width: 100%;
}

.cookie-section__inner {
    max-width: 800px;
    margin-inline: auto;
    padding-inline: var(--container-padding-mobile);
    text-align: left;
}

@media (min-width: 641px) {
    .cookie-section__inner {
        padding-inline: var(--container-padding-desktop);
    }
}

.cookie-section h2 {
    font-size: var(--text-h2-size);
    line-height: var(--text-h2-line-height);
    letter-spacing: var(--text-h2-tracking);
    margin-block-end: var(--space-16);
    padding-block-end: var(--space-12);
    border-block-end: 1px solid var(--color-border-gold);
    max-width: 24ch;
    overflow-wrap: break-word;
}

.cookie-section p {
    max-width: 68ch;
    margin-block-end: var(--space-16);
}

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

/* Cookie Type Blocks */
.cookie-type-block {
    padding-block: var(--space-24);
    border-block-end: 1px solid var(--color-border-subtle);
}

.cookie-type-block:first-of-type {
    padding-block-start: 0;
}

.cookie-type-block:last-of-type {
    border-block-end: none;
    padding-block-end: 0;
}

.cookie-type-block h3 {
    font-size: var(--text-h3-size);
    line-height: var(--text-h3-line-height);
    letter-spacing: var(--text-h3-tracking);
    margin-block-end: var(--space-12);
}

.cookie-type-block p {
    max-width: 68ch;
    margin-block-end: var(--space-12);
}

/* Lists */
.cookie-list {
    list-style: none;
    margin-block-end: 0;
    padding-inline-start: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

.cookie-list li {
    position: relative;
    padding-inline-start: var(--space-24);
    color: var(--color-text-secondary);
    max-width: 68ch;
}

.cookie-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.6em;
    width: 6px;
    height: 6px;
    background-color: var(--color-accent-amber);
    border-radius: 50%;
}

/* Effective Date */
.cookie-effective-date {
    display: inline-block;
    font-size: var(--text-small-size);
    line-height: var(--text-small-line-height);
    letter-spacing: var(--text-small-tracking);
    color: var(--color-text-secondary);
    border-inline-start: 1px solid var(--color-border-gold);
    padding-inline-start: var(--space-16);
    margin-block-start: var(--space-8);
    margin-block-end: 0;
}

/* Contact Card */
.cookie-contact-card {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border-gold);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    padding: var(--space-24);
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
    margin-block-start: var(--space-16);
}

@media (min-width: 641px) {
    .cookie-contact-card {
        padding: var(--space-32);
    }
}

.cookie-contact-card__line {
    margin-block-end: 0;
    color: var(--color-text-primary);
    max-width: 68ch;
}

.cookie-contact-card a {
    color: var(--color-text-primary);
    text-decoration: none;
    transition: color 140ms ease-out, text-decoration-color 140ms ease-out;
}

.cookie-contact-card a:hover {
    color: var(--color-accent-amber);
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-color: var(--color-accent-amber);
}

.cookie-contact-card a:focus-visible {
    outline: none;
    border: 1px solid var(--color-border-gold);
    box-shadow: 0 0 0 2px rgba(217, 142, 58, 0.4);
    border-radius: var(--radius-button);
    padding: var(--space-4) var(--space-8);
    margin: calc(-1 * var(--space-4)) calc(-1 * var(--space-8));
}

/* Responsive adjustments */
@media (max-width: 640px) {
    .cookie-hero h1 {
        font-size: var(--text-h1-size);
    }

    .cookie-hero__lead {
        font-size: var(--text-body-size);
    }

    .cookie-age-notice__card {
        padding: var(--space-24);
    }

    .cookie-section h2 {
        font-size: var(--text-h2-size);
    }
}

@media (prefers-reduced-motion: reduce) {
    .cookie-contact-card a,
    .cookie-contact-card a:hover {
        transition: none;
    }
}