/* ==========================================================================
   Consent banner skin (includes/consent.php + Common/consent/consent.js)
   on top of cookieconsent 3.1.0's own CSS (vendor/).
   Follows Docu/website-ui-guidelines.md - values are copied from the site,
   not invented:
   - card    = .calmodal__dialog (white, 16px radius, modal shadow)
   - overlay = .calmodal__overlay (rgba(2,10,24,.72) + 4px blur)
   - buttons = .btn geometry (50px, 16px/500, 12px radius). First layer,
               left to right: Reject all (.btn--outline) · Choose (.btn--outline)
               · Accept all (primary .btn fill) - same size and font
   - title   = dialog title (--text-lg / 600 / --scheme-ink); the click-to-load
               notices (Calendly, chat) use the same .adp-cc-title / -text
   - colours = the --scheme-* / --color-* tokens, so it follows data-scheme
   Blocking: until a choice is made the first layer is a centred modal and
   consent.js makes everything behind it inert (html.adp-cc-locked). On
   /policy/ and /imprint/ it stays a non-blocking card bottom left.
   Layer: above .calmodal (3000), below the Section Manager (9998) and the
   preview gate (99999).
   ========================================================================== */

#cc-main {
    --cc-z-index: 5000;
    --cc-font-family: var(--font-primary);
    --cc-modal-border-radius: 16px;
    --cc-btn-border-radius: 12px;
    --cc-modal-margin: 24px;
    --cc-bg: #FFFFFF;
    --cc-primary-color: var(--scheme-ink);
    --cc-secondary-color: color-mix(in srgb, var(--scheme-ink) 78%, #FFFFFF);
    --cc-link-color: var(--color-primary);
    /* both button kinds look the same: .btn--outline */
    --cc-btn-primary-bg: transparent;
    --cc-btn-primary-color: var(--color-primary);
    --cc-btn-primary-border-color: var(--color-primary);
    --cc-btn-primary-hover-bg: var(--color-primary);
    --cc-btn-primary-hover-color: #FFFFFF;
    --cc-btn-primary-hover-border-color: var(--color-primary);
    --cc-btn-secondary-bg: transparent;
    --cc-btn-secondary-color: var(--color-primary);
    --cc-btn-secondary-border-color: var(--color-primary);
    --cc-btn-secondary-hover-bg: var(--color-primary);
    --cc-btn-secondary-hover-color: #FFFFFF;
    --cc-btn-secondary-hover-border-color: var(--color-primary);
    --cc-separator-border-color: var(--color-border-light);
    --cc-toggle-on-bg: var(--color-primary);
    --cc-toggle-off-bg: #8A93A6;
    --cc-toggle-readonly-bg: color-mix(in srgb, var(--color-primary) 35%, #FFFFFF);
    --cc-cookie-category-block-bg: var(--color-bg-light);
    --cc-cookie-category-block-border: var(--color-border-light);
    --cc-cookie-category-block-hover-bg: color-mix(in srgb, var(--scheme-navy) 5%, #FFFFFF);
    --cc-cookie-category-block-hover-border: var(--color-border-light);
    --cc-cookie-category-expanded-block-bg: #FFFFFF;
    --cc-cookie-category-expanded-block-hover-bg: #FFFFFF;
    --cc-footer-bg: var(--color-bg-light);
    --cc-footer-color: var(--cc-secondary-color);
    --cc-footer-border-color: var(--color-border-light);
    --cc-overlay-bg: rgba(2, 10, 24, 0.72);           /* = .calmodal__overlay */
    font-family: var(--font-primary);
}

/* ---------- blocking: overlay with blur, nothing scrolls behind ---------- */
.disable--interaction #cc-main .cm-wrapper::before,
#cc-main .pm-overlay {
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
html.adp-cc-locked,
html.adp-cc-locked body { overflow: hidden !important; }

/* ---------- shared type: banner, settings, click-to-load notices ---------- */
#cc-main .cm__title,
#cc-main .pm__title,
.adp-cc-title {
    margin: 0;
    font-family: var(--font-primary);
    font-size: var(--text-lg);
    font-weight: var(--font-weight-semibold);
    line-height: var(--leading-tight);
    letter-spacing: normal;
    color: var(--scheme-ink);
}

#cc-main .cm__desc,
.adp-cc-text {
    margin: 0;
    font-family: var(--font-primary);
    font-size: 14px;
    font-weight: var(--font-weight-regular);
    line-height: var(--leading-normal);
    color: color-mix(in srgb, var(--scheme-ink) 78%, #FFFFFF);
}
.adp-cc-text a { color: var(--color-primary); }

/* ---------- first layer: the card ---------- */
#cc-main .cm {
    max-width: 400px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);      /* = .calmodal__dialog */
    overflow: hidden;
}

/* Scout on a light band - the banner and the Calendly notice share it */
#cc-main .adp-cc-art,
.adp-cc-art {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    height: 188px;
    padding: 12px 16px 0;
    background:
        radial-gradient(120% 90% at 50% 100%, rgba(var(--color-primary-rgb), 0.10), transparent 70%),
        var(--color-bg-light);
    border-bottom: 1px solid var(--color-border-light);
}
#cc-main .adp-cc-art img,
.adp-cc-art img {
    display: block;
    width: auto;
    height: 176px;
    max-width: 100%;
    object-fit: contain;
}

#cc-main .cm__body { padding-top: 4px; }

/* policy / imprint: the card must leave the text readable - no illustration */
html.adp-cc-open-page #cc-main .adp-cc-art { display: none; }
html.adp-cc-open-page #cc-main .cm__body { padding-top: var(--space-sm); }

/* three equal buttons in one row, same size, same style */
#cc-main .cm__btns {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-sm);
}
#cc-main .cm__btn-group { display: contents; }

/* vendor buttons get the .btn + .btn--outline geometry (styles3.css section 7) */
#cc-main .cm__btn,
#cc-main .pm__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 50px;
    min-height: 0;
    margin: 0 !important;
    padding: 10px 12px;
    font-family: var(--font-primary);
    font-size: var(--text-md);
    font-weight: var(--font-weight-medium);
    line-height: 19.5px;
    white-space: nowrap;
    border: 2px solid var(--color-primary);
    border-radius: 12px;
    background: transparent;
    color: var(--color-primary);
    transition: background var(--transition-fast), color var(--transition-fast);
}
#cc-main .cm__btn:hover,
#cc-main .pm__btn:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #FFFFFF;
}

/* "Accept all" on the first layer = the site's primary button (.btn: --btn-bg
   fill, --btn-fg text, the main CTA of the active scheme). Reject all and
   Choose stay .btn--outline: same size and font, full-contrast blue (5.7:1),
   never faded. */
#cc-main .cm__btn[data-role="all"] {
    background: var(--btn-bg);
    border-color: transparent;
    color: var(--btn-fg);
    transition: opacity var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-base);
}
#cc-main .cm__btn[data-role="all"]:hover {
    background: var(--btn-bg);
    border-color: transparent;
    color: var(--btn-fg);
    opacity: 0.9;
    transform: translateY(-1px);
    box-shadow: 0 4px 20px rgba(var(--btn-glow-rgb), 0.3);
}

/* inline "all details" link in the text */
#cc-main .cm__desc a.adp-cc-details {
    color: var(--color-primary);
    font-weight: var(--font-weight-medium);
    text-decoration: underline;
    text-underline-offset: 2px;
}

#cc-main .cm__btn:focus-visible,
#cc-main .pm__btn:focus-visible,
#cc-main .pm__close-btn:focus-visible,
#cc-main a:focus-visible,
.adp-cc-btns .btn:focus-visible,
.adp-chat__btn:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
}

#cc-main .cm__footer,
#cc-main .cm__link { font-size: var(--text-sm); }
#cc-main .cm__links { display: flex; gap: var(--space-md); }

/* ---------- second layer: settings ---------- */
#cc-main .pm { box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45); }
#cc-main .pm__section-title { font-weight: var(--font-weight-semibold); }
#cc-main .pm__section-desc,
#cc-main .pm__section-desc p { font-size: 14px; line-height: var(--leading-normal); }
#cc-main .pm__btn-group { gap: var(--space-sm); }
#cc-main .pm__footer { gap: var(--space-sm); }
#cc-main .pm__btn { width: auto; padding: 10px 24px; }
/* Accept all / Reject all: same width side by side */
#cc-main .pm__btn-group:first-child {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
#cc-main .pm__btn-group:first-child .pm__btn { width: 100%; }
/* close = the round .calmodal__close */
#cc-main .pm__close-btn {
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 50%;
    background: rgba(7, 20, 55, 0.08);
}
#cc-main .pm__close-btn:hover { background: rgba(7, 20, 55, 0.16); }
#cc-main .pm__close-btn svg { stroke: var(--scheme-ink); }

#cc-main .adp-cc-what { margin-top: 10px; }
#cc-main .adp-cc-what summary {
    cursor: pointer;
    font-weight: var(--font-weight-medium);
    color: var(--color-primary);
    width: fit-content;
}
#cc-main .adp-cc-what p { margin-top: 6px; }

/* ---------- toast after a decision ---------- */
.adp-cc-toast {
    position: fixed;
    left: 24px;
    bottom: 24px;
    z-index: 5001;
    max-width: min(360px, calc(100vw - 32px));
    padding: 12px 16px;
    border-radius: 12px;
    background: var(--scheme-ink);
    color: #FFFFFF;
    font-family: var(--font-primary);
    font-size: 14px;
    line-height: var(--leading-normal);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
    transition: opacity var(--transition-base), transform var(--transition-base);
}
.adp-cc-toast.is-on { opacity: 1; transform: none; }

/* ---------- shared bits of the click-to-load notices ---------- */
/* real .btn .btn--outline buttons; equal columns, label on one line */
.adp-cc-btns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-sm);
    margin-top: var(--space-lg);
}
.adp-cc-btns .btn {
    width: 100%;
    max-width: none;
    padding: 10px 16px;
    white-space: nowrap;
}

.adp-cc-remember {
    display: flex;
    gap: var(--space-sm);
    align-items: flex-start;
    margin-top: var(--space-md);
    font-size: var(--text-sm);
    line-height: 1.4;
    color: color-mix(in srgb, var(--scheme-ink) 78%, #FFFFFF);
    cursor: pointer;
}
.adp-cc-remember input { margin-top: 2px; width: 16px; height: 16px; flex: none; accent-color: var(--color-primary); }

/* Calendly notice: the booking modal shrinks to a compact card around it
   (consent.js toggles .adp-gate-host on .calmodal__dialog) */
.calmodal__dialog.adp-gate-host {
    width: min(480px, 100%);
    height: auto;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
}
.calmodal__dialog.adp-gate-host .calmodal__body { height: auto; }
.adp-gate { font-family: var(--font-primary); }
.adp-gate .adp-cc-art { height: 176px; }
.adp-gate .adp-cc-art img { height: 164px; }
.adp-gate__body { padding: var(--space-lg) var(--space-xl) var(--space-xl); }
.adp-gate .adp-cc-title { margin-bottom: var(--space-sm); }

/* ---------- chat launcher (stands in for Pipedrive's bubble) ---------- */
.adp-chat {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 600;                 /* above .back-to-top (500), below modals */
    font-family: var(--font-primary);
}
.adp-chat[hidden] { display: none; }
.adp-chat__btn {
    width: 56px;
    height: 56px;
    border: none;
    border-radius: 50%;
    background: var(--btn-bg);
    color: var(--btn-fg);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(0, 36, 89, 0.28);
}
.adp-chat__btn:hover { box-shadow: 0 6px 24px rgba(var(--btn-glow-rgb), 0.4); }
.adp-chat__pop {
    position: absolute;
    right: 0;
    bottom: 68px;
    width: min(360px, calc(100vw - 32px));
    padding: var(--space-lg);
    background: #FFFFFF;
    border-radius: 16px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
    color: var(--scheme-ink);
}
.adp-chat__pop[hidden] { display: none; }
.adp-chat__pop .adp-cc-title { margin-bottom: var(--space-sm); }
.adp-chat__alt { display: inline-block; margin-top: var(--space-md); font-size: var(--text-sm); color: var(--color-primary); }

/* the consent layers own the screen while they are open */
html.show--consent .adp-chat,
html.show--preferences .adp-chat { display: none; }

/* ---------- phones ---------- */
@media screen and (max-width: 640px) {
    #cc-main { --cc-modal-margin: 16px; }
    #cc-main .cm { max-width: none; }
    #cc-main .adp-cc-art { height: 84px; padding-top: 6px; }
    #cc-main .adp-cc-art img { height: 76px; }
    #cc-main .cm__body { padding-top: 0; }
    /* vendor stacks the buttons; keep the one equal row */
    #cc-main .cm__btns { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); }
    #cc-main .cm__btn-group { display: contents !important; }
    #cc-main .cm__btns .cm__btn,
    #cc-main .cm__btns .cm__btn + .cm__btn { margin: 0 !important; }
    .adp-cc-toast { left: 16px; bottom: 16px; }
    .adp-chat { right: 16px; bottom: 16px; }

    /* the Calendly notice stays a centred card (the calendar itself goes full screen) */
    .calmodal__dialog.adp-gate-host {
        width: calc(100% - 32px);
        height: auto;
        max-height: calc(100vh - 32px);
        border-radius: 16px;
    }
    .adp-gate .adp-cc-art { height: 120px; }
    .adp-gate .adp-cc-art img { height: 110px; }
    .adp-gate__body { padding: var(--space-lg); }
}

/* small phones: bottom sheet with a smaller Scout (the text refers to him),
   still blocking. 110 px tall = ~149 px wide = the 150px in the img sizes. */
@media screen and (max-width: 480px) {
    #cc-main .adp-cc-art { height: 118px; padding-top: 8px; }
    #cc-main .adp-cc-art img { height: 110px; }
    #cc-main .cm.cm--middle {
        top: auto;
        bottom: var(--cc-modal-margin);
        transform: translateY(1.6em);
    }
    html.show--consent #cc-main .cc--anim .cm.cm--middle { transform: none; }
    #cc-main .cm__btn { padding: 10px 6px; }
    .adp-cc-btns { grid-template-columns: 1fr; }
}

/* short phones (e.g. 320 x 568): smaller Scout so the sheet still fits */
@media screen and (max-width: 480px) and (max-height: 700px) {
    #cc-main .adp-cc-art { height: 84px; padding-top: 6px; }
    #cc-main .adp-cc-art img { height: 78px; }
}

/* narrower than 375 px "Accept all" no longer fits a third of the row: stack */
@media screen and (max-width: 374px) {
    #cc-main .cm__btns { grid-template-columns: 1fr !important; }
    #cc-main .cm__btn[data-role="all"] { order: -1; }    /* stacked: Accept on top */
}

@media (prefers-reduced-motion: reduce) {
    .adp-cc-toast { transition: none; }
}