/* smartPR Klaro overrides — loads after klaro-default.css to win cascade ties.
   Token remap from the landing project (sma_landingpages/app/assets/css/klaro.css):
     lime   → --color-accent (Sky Blue #B9D6F1 — the brand's primary "go" CTA,
              reads as the accept button; Lime Green would clash with the
              blog's newsletter cell that already uses Lime as a positive
              signal — duplicating it here would dilute the meaning)
     surface → --color-page (white on comms, black on tech, etc.)
     link    → --color-accent (body links on white use Espresso per the
              style guide, but inside the Klaro modal the brand's neutral
              "go" token is Sky Blue — see notes below)
   Per AGENTS.md: no border-radius anywhere on Wagtail. Per landing-project
   gotchas: button-nesting selector is .cn-buttons (NOT .cn-ok — Klaro
   wraps buttons in two divs and the older class is just the wrapper);
   autofocus ring suppression; z-index above the sticky header. */

.klaro {
    --font-family: var(--font-sans, 'Poppins', Arial, sans-serif);
    --title-font-family: var(--font-sans, 'Poppins', Arial, sans-serif);
    --font-size: 14px;
    --border-style: solid;
    --border-width: 1px;
    --border-radius: 0;
    --green1: #AFE059;
    --green2: #AFE059;
    --white2: var(--color-page);
    --light1: var(--color-ink);
    --light2: var(--color-edge);
    --dark1: var(--color-page);
    --dark2: var(--color-edge);
    --dark3: #666;
    --button-text-color: var(--color-ink);
    --white1: #fff;
}

/* Banner — sit above the sticky frosted header (z-30 in includes/header.html)
   and the fixed frame (z-10). Use z-50 to cover all site chrome. */
.klaro .cookie-notice:not(.cookie-modal-notice) {
    background-color: var(--color-page) !important;
    color: var(--color-ink) !important;
    border: 0 !important;
    border-radius: 0.5rem 0.5rem 0 0 !important;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
    outline: none !important;
    z-index: 50;
}

@media (min-width: 1024px) {
    .klaro .cookie-notice:not(.cookie-modal-notice) {
        left: 0;
        right: 0;
        bottom: 0;
        max-width: none;
    }
}

/* Layout: text on top, buttons side-by-side below.
   Container matches the hero: max-w-7xl (80rem) + px-4 min-[80rem]:px-10. */
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-width: 80rem;
    margin: 0 auto;
    padding: 2rem 1rem !important;
}

@media (min-width: 80rem) {
    .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body {
        padding: 2rem 2.5rem !important;
    }
}

.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body > p {
    margin: 0 !important;
    color: var(--color-ink);
    font-size: 0.9rem;
    line-height: 1.6;
    max-width: 48rem;
}

/* Button row — .cn-ok is Klaro's outer container, .cn-buttons holds the
   actual buttons. Both need flex row so buttons sit side-by-side. */
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-ok,
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-buttons {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    justify-content: flex-start !important;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 0 !important;
}

.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-ok .cm-btn,
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-buttons .cm-btn {
    flex: 0 0 auto;
}

/* "Lassen Sie mich wählen" link — styled like footer links, not a button.
   --color-link (#623E21 brown) for contrast on white, NOT --color-accent
   (Sky Blue #B9D6F1 — ~1.3:1 contrast, invisible). Matches the landing
   project's klaro.css which uses --color-link for all consent links. */
.klaro .cookie-notice .cn-learn-more {
    color: var(--color-link) !important;
    text-decoration: underline;
    font-size: 0.875rem;
}
.klaro .cookie-notice .cn-learn-more:hover {
    opacity: 0.7;
}

/* Buttons — match hero button language: py-3 px-4 sm:px-6, text-sm,
   tracking-wide, duration-300 transition, square corners. */
.klaro .cm-btn {
    border-radius: 0;
    border: 1px solid transparent;
    padding: 0.75rem 1.5rem !important;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    cursor: pointer;
    transition: background-color 0.3s, border-color 0.3s, color 0.3s, opacity 0.3s;
}

.klaro .cookie-notice .cm-btn.cm-btn-success,
.klaro .cookie-modal .cm-btn.cm-btn-success {
    background-color: #AFE059 !important;
    color: var(--color-ink) !important;
    border-color: #AFE059 !important;
}
.klaro .cookie-notice .cm-btn.cm-btn-success:hover,
.klaro .cookie-modal .cm-btn.cm-btn-success:hover {
    opacity: 0.9;
}
.klaro .cookie-notice .cm-btn.cm-btn-danger,
.klaro .cookie-modal .cm-btn.cm-btn-danger {
    background-color: var(--color-error) !important;
    color: #fff !important;
    border-color: var(--color-error) !important;
}
.klaro .cookie-notice .cm-btn.cm-btn-danger:hover,
.klaro .cookie-modal .cm-btn.cm-btn-danger:hover {
    opacity: 0.9;
}
.klaro .cookie-notice .cm-btn.cm-btn-info,
.klaro .cookie-modal .cm-btn.cm-btn-info {
    background-color: transparent !important;
    color: var(--color-espresso) !important;
    border-color: var(--color-edge) !important;
}
.klaro .cookie-notice .cm-btn.cm-btn-info:hover,
.klaro .cookie-modal .cm-btn.cm-btn-info:hover {
    border-color: var(--color-espresso) !important;
}

/* Modal — aligned with the banner: rounded corners (0.5rem), matching
   inner padding (2rem 1rem mobile, 2rem 2.5rem >=80rem), max-w-7xl. */
.klaro .cookie-modal .cm-modal.cm-klaro {
    background-color: var(--color-page) !important;
    color: var(--color-ink) !important;
    border: 1px solid var(--color-edge) !important;
    border-radius: 0.5rem !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    max-width: 80rem !important;
    z-index: 60;
}
.klaro .cookie-modal .cm-modal .cm-header {
    border-bottom: 1px solid var(--color-edge);
    padding: 2rem 1rem !important;
}
.klaro .cookie-modal .cm-modal .cm-header h1,
.klaro .cookie-modal .cm-modal .cm-header h1.title {
    color: var(--color-ink);
    font-size: 1.25rem;
    font-weight: 600;
}
.klaro .cookie-modal .cm-modal .cm-header .hide svg {
    stroke: var(--color-ink);
}
.klaro .cookie-modal .cm-modal .cm-body {
    padding: 2rem 1rem !important;
}
.klaro .cookie-modal .cm-modal .cm-footer {
    border-top: 1px solid var(--color-edge);
    padding: 1.5rem 1rem !important;
}
@media (min-width: 80rem) {
    .klaro .cookie-modal .cm-modal .cm-header,
    .klaro .cookie-modal .cm-modal .cm-body,
    .klaro .cookie-modal .cm-modal .cm-footer {
        padding-left: 2.5rem !important;
        padding-right: 2.5rem !important;
    }
}
.klaro .cookie-modal .cm-modal .cm-footer .cm-powered-by a {
    color: var(--color-espresso);
}

/* Text + links */
.klaro .cm-title,
.klaro .cm-list-title {
    color: var(--color-ink);
    font-weight: 600;
}
.klaro .cm-list-description {
    color: #666;
}
.klaro .cm-link,
.klaro .cookie-notice a,
.klaro .cookie-modal a {
    color: var(--color-link) !important;
    text-decoration: underline;
}

/* Toggles (square, no shadow) */
.klaro .cookie-modal .cm-list-label .slider,
.klaro .cookie-modal .cm-list-label .slider::before,
.klaro .cookie-modal .cm-list-label .slider.round,
.klaro .cookie-modal .cm-list-label .slider.round::before {
    border-radius: 0 !important;
}
.klaro .cookie-modal .cm-list-label .slider {
    box-shadow: none;
}