:root {
    /* Colors */
    --text-clr: #2a2829;
    --link-clr: #0368c9;

    /* Typography */
    --font-size-base: 1.6rem;
    --font-size-h1: 3.6rem;
    --font-size-h2: 2.4rem;
    --line-height-base: 2.4rem;
    --line-height-h1: 44px;
    --line-height-h2: 32px;

    /* Spacing */
    --spacing-xs: 1.6rem;
    --spacing-md: 2rem;
    --spacing-lg: 3.2rem;
    --spacing-xl: 4.8rem;

    /* Container */
    --container-max-width: 74.5rem;
}

/* Base styles */
.cookie-statement-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

body .layout main .cookie-statement-container * {
    margin: 0;
}

/* Typography */
body .layout main .cookie-statement-container h1 {
    font-size: var(--font-size-h1);
    line-height: var(--line-height-h1);
    color: var(--text-clr);
    font-weight: 600;
    text-align: left;
}

body .layout main .cookie-statement-container h2 {
    font-size: var(--font-size-h2);
    line-height: var(--line-height-h2);
    color: var(--text-clr);
    font-weight: 600;
    text-align: left;
}

.cookie-statement-container p {
    color: var(--text-clr);
    font-size: var(--font-size-base);
    font-weight: 400;
    line-height: var(--line-height-base);
}

/* Links */
.cookie-statement-container a, .cookie-statement-container a:visited {
    color: var(--link-clr);
    text-decoration: none;
    transition: color 0.2s ease;
}

.cookie-statement-container a:hover,
.cookie-statement-container a:focus {
    color: color-mix(in srgb, var(--link-clr) 80%, black);
    /* text-decoration: underline; */
}

/* Layout */
.content-section {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.section-wrapper {
    padding: var(--spacing-xl) var(--spacing-md);
}

.content-wrapper {
    max-width: var(--container-max-width);
    margin-inline: auto;
    width: 100%;
}

/* Link wrapper specific styles */
.cookie-statement-container .link-wrapper {
    color: var(--link-clr);
    font-size: var(--font-size-base);
    font-weight: 600;
    line-height: var(--line-height-base);
    cursor: pointer;
    border: none;
}

.cookie-statement-container .link-wrapper .cookie-pref-link {
    all: unset;
    cursor: pointer;
    color: var(--link-clr);
    transition: color 0.2s ease;
}

.cookie-statement-container .link-wrapper .cookie-pref-link:hover,
.cookie-statement-container .link-wrapper .cookie-pref-link:focus {
    color: color-mix(in srgb, var(--link-clr) 80%, black);
    /* text-decoration: underline; */
}

/* Responsive adjustments */
@media screen and (max-width: 768px) {
    :root {
        --font-size-h1: 2.8rem;
        --font-size-h2: 2rem;
        --spacing-xl: 3.2rem;
    }

    .section-wrapper {
        padding: var(--spacing-xl) var(--spacing-xs);
    }
}