/* Theme + layout for vanilla-cookieconsent (static/css/vendor/cookieconsent.css)
   to match Travim's dark palette, and for the footer "Cookie settings" link. */

.cc--darkmode {
    --cc-bg: rgba(0, 0, 0, .75);
    --cc-primary-color: #ffffff;
    --cc-secondary-color: rgba(255, 255, 255, .8);
    --cc-btn-primary-bg: var(--sun, #ffc24b);
    --cc-btn-primary-color: var(--on-accent, #2b1a04);
    --cc-btn-primary-border-color: var(--sun, #ffc24b);
    --cc-btn-primary-hover-bg: var(--sand, #ffe1a8);
    --cc-btn-primary-hover-color: var(--on-accent, #2b1a04);
    --cc-btn-primary-hover-border-color: var(--sand, #ffe1a8);
    --cc-btn-secondary-bg: rgba(255, 233, 205, .1);
    --cc-btn-secondary-color: var(--text, #fdf4e8);
    --cc-btn-secondary-border-color: var(--line-strong, rgba(255, 233, 205, .22));
    --cc-btn-secondary-hover-bg: rgba(255, 233, 205, .18);
    --cc-btn-secondary-hover-color: var(--text, #fdf4e8);
    --cc-btn-secondary-hover-border-color: var(--line-strong, rgba(255, 233, 205, .22));
    --cc-separator-border-color: var(--line, rgba(255, 233, 205, .12));
    --cc-toggle-on-bg: var(--sea, #46b7e8);
    --cc-toggle-off-bg: rgba(255, 233, 205, .18);
    --cc-toggle-readonly-bg: rgba(255, 233, 205, .1);
    --cc-overlay-bg: rgba(3, 10, 22, .72);
    --cc-cookie-category-block-bg: rgba(255, 233, 205, .04);
    --cc-cookie-category-block-border: var(--line, rgba(255, 233, 205, .12));
    --cc-cookie-category-expanded-block-bg: rgba(255, 233, 205, .04);
    --cc-modal-border-radius: var(--radius, 20px);
    --cc-btn-border-radius: var(--radius-xs, 10px);
    --cc-font-family: var(--font, "Plus Jakarta Sans", system-ui, sans-serif);
    --cc-shadow: var(--shadow, 0 22px 50px -18px rgba(3, 10, 22, .82));
}

#cc-main a { color: var(--sea, #46b7e8); }

/* Full-width bar, edge to edge, with a shadow cast upward so it reads as
   sitting above the page rather than a floating card. Content stays
   readable by centering inside the site's shell width. One line of text +
   buttons on desktop; text wraps to two lines with buttons dropping to
   their own row on narrow viewports. */
#cc-main .cm {
    border-radius: 0;
    padding: 0;
    box-shadow: 0 -16px 32px -12px rgba(3, 10, 22, .55);
}

#cc-main .cm__body {
    max-width: var(--shell, 1180px);
    margin: 0 auto;
    padding: 16px 24px;
    gap: 20px;
    align-items: center;
}

/* The vendor styles leave room for a title above the description
   (padding-top on .cm__texts, padding-bottom on .cm__desc) — with the
   title hidden below, that stray padding pushed the text down and off
   center against the buttons. Zero it out so .cm__body's align-items:
   center actually centers it. */
#cc-main .cm__texts { margin: 0; padding: 0; }

#cc-main .cm__title { display: none; }

#cc-main .cm__desc {
    font-size: 15.5px;
    line-height: 1.4;
    max-height: calc(1.4em * 2);
    overflow: hidden;
    padding: 0;
    /* Beats `#cc-main .cm__title+.cm__desc{margin-top:1.1em}` (higher
       specificity: 1 id + 2 classes vs. 1 id + 1 class here), which left a
       gap sized for the now-hidden title and threw off vertical centering. */
    margin: 0 !important;
}

/* The library's "bar inline" layout stacks the Accept/Reject group above
   the Manage group by default (two rows), via `#cc-main .cm--bar.cm--inline
   .cm__btns{flex-direction:column}` — same specificity as a plain
   `#cc-main .cm__btns` rule (1 id + 3 vs 1 id + 1 class) plus more classes,
   so it wins on specificity alone; !important forces one row at every
   width instead. The max-width:640px block below only needs to retune
   spacing, since this already covers the layout direction everywhere. */
#cc-main .cm__btns {
    flex: 0 0 auto;
    flex-direction: row !important;
    align-items: center;
    gap: 8px;
    max-width: none;
}

#cc-main .cm__btn-group {
    display: flex;
    flex-direction: row !important;
    gap: 8px;
}

#cc-main .cm__btn-group + .cm__btn-group { margin: 0 !important; }

/* `.cm--bar .cm__btn{min-width:120px;padding-left:2em;padding-right:2em}`
   (1 id + 2 classes) outranks a plain `#cc-main .cm__btn` rule and forces
   every button, including Manage, to the same fixed 120px+ width —
   !important on both properties everywhere they're set below. */
#cc-main .cm__btn {
    padding: 8px 16px !important;
    font-size: 13.5px;
    min-width: 0 !important;
}

/* The "Manage" button is a secondary, lower-emphasis action next to the
   equal-weight Accept/Reject pair — keep it narrower than them. */
#cc-main .cm__btn--secondary { flex: 0 0 auto; padding: 8px 14px !important; }

@media (min-width: 641px) {
    #cc-main .cm__desc {
        max-height: 1.4em;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
}

@media (max-width: 640px) {
    /* The vendor's own mobile block sets `#cc-main .cm__body{padding:0
       !important}` and pushes horizontal padding onto .cm__desc/.cm__btns
       individually instead — fight both with !important and put all
       spacing back on .cm__body so it's consistent and easy to read. */
    #cc-main .cm__body {
        flex-direction: column !important;
        align-items: stretch;
        padding: 20px 20px 22px !important;
        gap: 16px;
    }

    #cc-main .cm__desc {
        font-size: 16.5px;
        line-height: 1.45;
        max-height: calc(1.45em * 2);
        padding: 0 !important;
    }

    /* The library's own mobile styles stack the two button groups, then
       stack the buttons inside each group (three rows total), all with
       !important. Override back to one row, Accept/Reject sharing the
       space and Manage kept compact — and give every button the same
       height so they line up regardless of their different padding. */
    #cc-main .cm__btns {
        flex-direction: row !important;
        align-items: stretch;
        gap: 8px;
        border-top: none !important;
        padding: 0 !important;
    }

    #cc-main .cm__btn-group {
        flex-direction: row !important;
        align-items: stretch;
        gap: 8px;
    }

    #cc-main .cm__btn-group:first-child { flex: 1 1 auto; }
    #cc-main .cm__btn-group:last-child { flex: 0 0 auto; }

    #cc-main .cm__btn-group + .cm__btn-group { margin: 0 !important; }

    /* Vendor mobile rule `.cm__btn+.cm__btn{margin:.375rem 0 0!important}`
       (meant to stack buttons vertically) was pushing Reject 6px down from
       Accept even after their heights matched. */
    #cc-main .cm__btn + .cm__btn { margin: 0 !important; }

    /* `min-height` alone let Accept and Manage get stretched taller by
       their flex ancestors while Reject — same class, same rules — stayed
       pinned to the literal minimum, an inconsistent stretch result across
       siblings. A fixed `height` sidesteps that ambiguity entirely. */
    #cc-main .cm__btn {
        flex: 1 1 auto !important;
        padding: 10px 8px !important;
        font-size: 14px;
        height: 46px !important;
        box-sizing: border-box !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
    }

    #cc-main .cm__btn--secondary {
        flex: 0 0 auto !important;
        padding: 10px 16px !important;
        font-size: 13.5px;
    }
}

/* Footer "Cookie settings" trigger — a plain button styled like the other
   footer links, reopening the preferences modal. */
.footer-cookie-link {
    display: block;
    margin-top: 8px;
    padding: 0;
    background: none;
    border: none;
    color: var(--muted);
    font: inherit;
    font-size: 14.5px;
    text-align: left;
    cursor: pointer;
}

.footer-cookie-link:hover { color: var(--text); }