/* ==================================================================
   Cookie consent – theme overrides
   Loaded after cookieconsent.min.css (see functions.php).
   Uses the library's CSS custom properties where possible so the
   banner follows the theme instead of fighting it with !important.
   ================================================================== */

/* ==================================================================
   PALETTE – neutral black / white. Adjust here, everything follows.
   ================================================================== */
:root {
    --cookie-surface: #fff;        /* modal background */
    --cookie-text: #111;           /* headings, body text, primary buttons */
    --cookie-text-muted: #555;     /* descriptions, table body */
    --cookie-accent: #111;         /* primary buttons, active toggles, badge */
    --cookie-accent-hover: #333;
    --cookie-on-accent: #fff;      /* text on the accent colour */
    --cookie-radius: 0.25rem;      /* modal corners */
    --cookie-btn-radius: 0.25rem;  /* buttons and badge */

    /* legacy aliases kept for older theme CSS */
    --cookie-light-100: var(--cookie-surface);
    --cookie-dark-100: var(--cookie-text);
    --cookie-second-100: var(--cookie-accent);
    --cookie-second-200: var(--cookie-accent-hover);
}

/* ---------- Library tokens – light only ----------
   The banner deliberately ignores the OS dark-mode setting because the
   website has no dark theme. */
#cc-main {
    color-scheme: light;
    --cc-font-family: inherit;
    --cc-modal-border-radius: var(--cookie-radius);
    --cc-btn-border-radius: var(--cookie-btn-radius);
    --cc-modal-transition-duration: .25s;

    --cc-bg: var(--cookie-surface);
    --cc-primary-color: var(--cookie-text);
    --cc-secondary-color: var(--cookie-text-muted);

    /* Accept + reject share the same weight (equalWeightButtons),
       so the primary token styles BOTH buttons. */
    --cc-btn-primary-bg: var(--cookie-accent);
    --cc-btn-primary-color: var(--cookie-on-accent);
    --cc-btn-primary-border-color: var(--cookie-accent);
    --cc-btn-primary-hover-bg: var(--cookie-accent-hover);
    --cc-btn-primary-hover-color: var(--cookie-on-accent);
    --cc-btn-primary-hover-border-color: var(--cookie-accent-hover);

    /* "Einstellungen", "Auswahl speichern", close icon */
    --cc-btn-secondary-bg: #f2f2f2;
    --cc-btn-secondary-color: var(--cookie-text);
    --cc-btn-secondary-border-color: #f2f2f2;
    --cc-btn-secondary-hover-bg: #e3e3e3;
    --cc-btn-secondary-hover-color: var(--cookie-text);
    --cc-btn-secondary-hover-border-color: #e3e3e3;

    --cc-toggle-on-bg: var(--cookie-accent);
    --cc-toggle-on-knob-bg: var(--cookie-surface);
    --cc-toggle-off-bg: #c8c8c8;
    --cc-toggle-off-knob-bg: var(--cookie-surface);
    --cc-toggle-readonly-bg: #9a9a9a;
    --cc-toggle-readonly-knob-bg: var(--cookie-surface);

    --cc-separator-border-color: #e8e8e8;
    --cc-cookie-category-block-bg: #f6f6f6;
    --cc-cookie-category-block-border: #f6f6f6;
    --cc-cookie-category-block-hover-bg: #ececec;
    --cc-cookie-category-block-hover-border: #ececec;
    --cc-cookie-category-expanded-block-bg: transparent;
    --cc-cookie-category-expanded-block-hover-bg: #f6f6f6;

    --cc-footer-bg: #f7f7f7;
    --cc-footer-border-color: #eaeaea;
    --cc-overlay-bg: rgba(0, 0, 0, .5);
}

/* Keyboard focus must be visible (WCAG 2.4.7) */
#cc-main .cm__btn:focus-visible,
#cc-main .pm__btn:focus-visible,
#cc-main .pm__close-btn:focus-visible,
#cc-main .cc__link:focus-visible {
    outline: 3px solid var(--cookie-accent);
    outline-offset: 2px;
}

/* Preferences: "Always active" badge next to the necessary category */
#cc-main .pm__badge {
    display: inline-block;
    margin-left: .5rem;
    padding: .1rem .5rem;
    font-size: .7em;
    font-weight: 600;
    border-radius: var(--cookie-btn-radius);
    background: #e8e8e8;
    color: var(--cookie-text);
    vertical-align: middle;
}

/* Cookie tables: keep all columns inside the modal instead of clipping */
#cc-main .pm__section-desc-wrapper {
    overflow-x: auto;
}
#cc-main .pm__section-table {
    table-layout: fixed;
}
#cc-main .pm__table-th,
#cc-main .pm__table-td {
    overflow-wrap: anywhere;
    vertical-align: top;
}
#cc-main .pm__table-th:nth-child(1),
#cc-main .pm__table-td:nth-child(1) { width: 24%; }
#cc-main .pm__table-th:nth-child(2),
#cc-main .pm__table-td:nth-child(2) { width: 20%; }
#cc-main .pm__table-th:nth-child(4),
#cc-main .pm__table-td:nth-child(4) { width: 14%; }

/* ---------- Re-open button (markup: button.html, printed in wp_footer) ---------- */
.cookie-consent-btn-container button {
    position: fixed;
    bottom: .75rem;
    left: 1rem;
    z-index: 2147483000; /* below #cc-main (2147483647) */
    width: 3rem;
    height: 3rem;
    padding: .6rem;
    border: 1px solid rgba(0, 0, 0, .1);
    border-radius: 50%;
    background: var(--cookie-light-100);
    color: var(--cookie-dark-100);
    fill: currentColor;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .2);
    cursor: pointer;
    transition: transform .2s ease;
}
.cookie-consent-btn-container button:hover,
.cookie-consent-btn-container button:focus-visible {
    transform: scale(1.06);
    outline: 3px solid var(--cookie-accent);
    outline-offset: 2px;
}
.cookie-consent-btn-container svg {
    width: 100%;
    height: 100%;
    display: block;
}
/* Hide while a modal is open so it does not overlap the dialog */
.show--consent .cookie-consent-btn-container,
.show--preferences .cookie-consent-btn-container {
    visibility: hidden;
}

/* ---------- Consent-gated embeds ---------- */
.cc-embed {
    position: relative;
    overflow: hidden;
    border-radius: inherit;
}
.cc-embed > iframe {
    display: block;
    width: 100%;
    border: 0;
}
/* 16:9 default when no explicit height given */
.cc-embed:not(.cc-embed--map):not(.cc-embed--calendly) > iframe {
    aspect-ratio: 16 / 9;
    height: auto; /* beats a height="315" attribute on pasted embeds */
}
.cc-embed--map > iframe {
    min-height: 400px;
}
/* Vertical YouTube Shorts */
.cc-embed--short > iframe {
    aspect-ratio: 9 / 16;
    max-width: 420px;
    margin: 0 auto;
}
/* Calendly inline widget needs a fixed height, no aspect ratio */
.cc-embed--calendly > iframe {
    aspect-ratio: auto;
    height: 700px;
}
.cc-embed--calendly .cc-embed__overlay {
    background-color: #f2f2f2;
}

.cc-embed__overlay {
    display: none;
    position: absolute;
    inset: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 1.5rem;
    text-align: center;
    color: var(--cookie-dark-100);
    background-color: #999;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-blend-mode: luminosity;
    z-index: 1;
}
/* Class set server-side and by JS; :has() is the progressive fallback */
.cc-embed--blocked .cc-embed__overlay,
.cc-embed:has(> iframe[data-src]) .cc-embed__overlay {
    display: flex;
}
.cc-embed__overlay p {
    margin: 0;
    max-width: 44ch;
    font-size: .9rem;
    font-weight: 400;
    text-wrap: balance;
}
.cc-embed__overlay .cc-embed__headline {
    font-size: 1.05rem;
    font-weight: 700;
}
.cc-embed__overlay small {
    font-size: .8rem;
    font-weight: 400;
    opacity: .85;
}
.cc-embed__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem;
}
.cc-embed__btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .75rem 1.5rem;
    border: 2px solid var(--cookie-accent);
    border-radius: var(--cookie-btn-radius);
    background: var(--cookie-accent);
    color: var(--cookie-on-accent);
    font: inherit;
    font-size: .9rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .2);
    transition: background-color .2s, border-color .2s;
}
.cc-embed__btn:hover {
    background: var(--cookie-accent-hover);
    border-color: var(--cookie-accent-hover);
}
.cc-embed__btn:focus-visible {
    outline: 3px solid var(--cookie-surface);
    outline-offset: 2px;
}
.cc-embed__btn--ghost {
    background: transparent;
    color: var(--cookie-text);
    border-color: var(--cookie-text);
    box-shadow: none;
}
.cc-embed__btn--ghost:hover {
    background: rgba(255, 255, 255, .35);
    border-color: var(--cookie-text);
}

/* Legacy class names kept as aliases during migration */
.googlemap { position: relative; }
.googlemap:has(iframe[data-src]) .googlemap-overlay { display: flex; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    #cc-main { --cc-modal-transition-duration: 0s; }
    .cookie-consent-btn-container button,
    .cc-embed__btn { transition: none; }
}