/* ------------------------------------------------------------------
   Cookie consent, in Minet's own values.

   The package is token-driven: it paints everything from a handful of CSS
   custom properties on :root. So this file OVERRIDES THOSE rather than
   out-specifying its selectors — which survives a package update, where a
   pile of `.cookie-consent-root button` rules would not.

   Every value resolves against brand/minet-tokens.css — including the RGB
   triple, which lives there as --minet-red-action-rgb precisely so it is not
   written out by hand here and left to drift (skill: minet-brand).

   Loaded AFTER the package's own stylesheet so these definitions win.
   ------------------------------------------------------------------ */

:root {
    /* The primary action. --minet-red-action is the token that exists because
       white text sits on it: 4.87:1, which passes AA. --minet-red is the
       identity red and fails at 4.38:1, so it must never end up behind a
       label. */
    --cc-button-bg-color: var(--minet-red-action);
    --cc-button-text-color: var(--minet-white);

    /* The package composites its buttons as rgba(--cc-button-bg-color-rgb, .8).
       At 80% the red washes out over white and takes the contrast with it, so
       the opacity goes to 1 and the triple points at the same brand value. */
    --cc-button-bg-color-rgb: var(--minet-red-action-rgb);
    --cc-button-bg-opacity: 1;

    --cc-card-bg-color: var(--minet-white);
    --cc-card-text-color: var(--minet-ink);
}

.cookie-consent-root {
    font-family: var(--font-body);
    color: var(--minet-text);
}

.cookie-consent-container,
.cookie-preferences-modal-content {
    background: var(--minet-white);
    border-top: 3px solid var(--minet-red);
    border-radius: 0;
    box-shadow: 0 -2px 16px rgb(0 0 0 / 12%);
}

.cookie-consent-content-title,
.cookie-preferences-modal-title {
    font-family: var(--font-display);
    font-size: var(--fs-h3);
    color: var(--minet-ink);
}

.cookie-consent-content-description,
.cookie-consent-content-description p {
    font-size: var(--fs-small);
    line-height: 1.5;
    color: var(--minet-text);
}

/* Accept and reject are the SAME size, weight and position. */
.cookie-consent-root button {
    font-family: var(--font-body);
    font-size: var(--fs-small);
    font-weight: 600;
    border-radius: var(--radius);
    padding: var(--space-3) var(--space-6);
    min-height: 44px;
    cursor: pointer;
}


/*
 * Reject is OUTLINED, not filled — and the same size, in the same place, one
 * click away, exactly like accept. Equally easy is the requirement; identical
 * is not, and two red buttons side by side just make the choice harder to read.
 *
 * Two class selectors, because the package paints both buttons through
 * `.cookie-consent-button-container button` and a single class would lose to it.
 */
.cookie-consent-button-container .cookie-consent-reject,
.cookie-consent-button-container .preferences-btn {
    background: transparent;
    border: 1px solid var(--minet-black);
    color: var(--minet-ink);
}
.cookie-consent-button-container .cookie-consent-reject:hover,
.cookie-consent-button-container .preferences-btn:hover {
    border-color: var(--minet-red-action);
    color: var(--minet-red-action);
}

/* The package's own accept button keeps its white border; ours takes the fill's
   colour so the edge does not read as a second outline on white. */
.cookie-consent-button-container .cookie-consent-accept {
    border: 1px solid var(--minet-red-action);
}
.cookie-consent-button-container .cookie-consent-accept:hover {
    background: var(--minet-red-hover);
    border-color: var(--minet-red-hover);
}

.cookie-consent-link,
.cookie-consent-root a {
    color: var(--minet-red-action);
    font-size: var(--fs-legal);
    text-underline-offset: 2px;
}

.cookie-consent-root :focus-visible,
.cookie-preferences-modal :focus-visible {
    outline: 2px solid var(--minet-red-action);
    outline-offset: 2px;
}

.cookie-category-title { font-weight: 700; color: var(--minet-ink); }
.cookie-category-description { font-size: var(--fs-small); color: var(--minet-muted); }