/*
    Shared cookie consent banner.

    Deliberately framework-independent: no Bootstrap or Tailwind class names anywhere in the
    partial or here. Sites in this estate use both, and several use neither for public pages, so a
    platform component that borrowed a framework's classes would render unstyled on the sites that
    do not ship it. Everything the banner needs is defined below.

    Colours come from custom properties so a site can theme the banner by overriding four values
    rather than fighting specificity. The defaults follow the visitor's colour scheme.

    Deliberately NOT a hardcoded light background. PeaProtein's banner used Bootstrap's bg-white,
    which is set with !important and stays #fff in every scheme, while its text colours came from
    the site's dark palette. The heading landed at 1.05:1 and Decline at 2.26:1, leaving Accept as
    the only readable control. See PeaProtein#43.
*/

.cookie-consent {
    --bb-cookie-bg: #ffffff;
    --bb-cookie-fg: #1f2328;
    --bb-cookie-muted: #4a5057;
    --bb-cookie-border: #c9ced4;
    --bb-cookie-accent: #0b5ed7;
    --bb-cookie-accent-fg: #ffffff;

    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: 1080;
    padding: 1rem;
    background-color: var(--bb-cookie-bg);
    color: var(--bb-cookie-fg);
    border-block-start: 2px solid var(--bb-cookie-accent);
    box-shadow: 0 -0.25rem 0.75rem rgb(0 0 0 / 18%);
    font-size: 0.9375rem;
    line-height: 1.5;
}

/* Dark defaults by preference, then by whichever attribute the host site toggles. Both Bootstrap's
   data-bs-theme and the plainer data-theme are in use across the estate, so both are honoured. */
@media (prefers-color-scheme: dark) {
    .cookie-consent {
        --bb-cookie-bg: #1c2128;
        --bb-cookie-fg: #e6e8ea;
        --bb-cookie-muted: #b0b6bd;
        --bb-cookie-border: #444c56;
        --bb-cookie-accent: #4d8ff0;
        --bb-cookie-accent-fg: #10141a;
    }
}

:root[data-bs-theme="dark"] .cookie-consent,
:root[data-theme="dark"] .cookie-consent {
    --bb-cookie-bg: #1c2128;
    --bb-cookie-fg: #e6e8ea;
    --bb-cookie-muted: #b0b6bd;
    --bb-cookie-border: #444c56;
    --bb-cookie-accent: #4d8ff0;
    --bb-cookie-accent-fg: #10141a;
}

/* A site forcing light while the OS is dark must win over the media query above. */
:root[data-bs-theme="light"] .cookie-consent,
:root[data-theme="light"] .cookie-consent {
    --bb-cookie-bg: #ffffff;
    --bb-cookie-fg: #1f2328;
    --bb-cookie-muted: #4a5057;
    --bb-cookie-border: #c9ced4;
    --bb-cookie-accent: #0b5ed7;
    --bb-cookie-accent-fg: #ffffff;
}

.cookie-consent__inner {
    max-width: 72rem;
    margin-inline: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
}

.cookie-consent__message {
    flex: 1 1 22rem;
    min-width: 0;
}

.cookie-consent__heading {
    margin: 0 0 0.25rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--bb-cookie-fg);
}

.cookie-consent__text {
    margin: 0;
    color: var(--bb-cookie-muted);
}

.cookie-consent a {
    color: var(--bb-cookie-accent);
    text-decoration: underline;
}

.cookie-consent__categories {
    border: 0;
    margin: 0.625rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
}

/*
   Visually hidden rather than absent: the checkboxes need a group label announced before them, but
   sighted users already have the heading and body text above for context.

   The same treatment applies to the region's heading when a site supplies its own wording through
   the content slot. The h2 has to stay in the document because the section's aria-labelledby points
   at it, but the site's own copy provides the visible heading, so showing both would duplicate it.
*/
.cookie-consent__legend,
.cookie-consent__hidden-label {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.cookie-consent__category {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--bb-cookie-fg);
}

/*
    Pixels, not rem, for the two dimensions that are accessibility floors rather than design sizes.

    A platform component inherits the host's root font size, and those differ across the estate:
    KnightsTour sets 14px, so anything expressed in rem lands 12.5% short of its intended value
    there while being correct on a 16px site. A floor that quietly varies per site is not a floor.
    WCAG states target size in CSS pixels, so px is also the more faithful expression of the rule.

    Typography and spacing stay in rem on purpose: those should scale with the host's type scale
    and with a user's own font-size preference. Because these are minimums rather than fixed sizes,
    a control still grows past them when the text inside it grows.
*/
.cookie-consent__category input {
    /* 24x24 is the WCAG 2.2 minimum target; the box is 16 and the label padding supplies the rest. */
    inline-size: 16px;
    block-size: 16px;
    accent-color: var(--bb-cookie-accent);
    margin: 4px;
}

.cookie-consent__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    flex: 0 1 auto;
}

/*
    Accept and decline are each their own form, so their choice travels as a hidden field rather
    than as the submit button's name/value. The wrappers are made transparent to the layout here so
    the three controls still sit in one row. See the partial for why it is shaped this way.

    display:flex on the form rather than display:contents: contents has a history of removing the
    element from the accessibility tree, and a form is not something to risk that on.
*/
.cookie-consent__actions form {
    display: flex;
    margin: 0;
}

.cookie-consent__message form {
    margin: 0;
}

/*
    Accept and decline share one button style on purpose. Making refusal look secondary is the
    dark pattern Buckbury#174 is about, and consent that is harder to refuse than to give is not
    freely given. Only "Save my choices" is visually quieter, and that is a third path rather than
    the decline route.
*/
.cookie-consent__button {
    font: inherit;
    padding: 0.5rem 1rem;
    /* Pixels: a floor, not a design size. See the note on the checkbox above. */
    min-block-size: 44px;
    border-radius: 0.375rem;
    border: 2px solid var(--bb-cookie-accent);
    background-color: var(--bb-cookie-accent);
    color: var(--bb-cookie-accent-fg);
    cursor: pointer;
}

.cookie-consent__button:hover {
    filter: brightness(1.08);
}

.cookie-consent__button:focus-visible {
    outline: 3px solid var(--bb-cookie-fg);
    outline-offset: 2px;
}

.cookie-consent__button--quiet {
    background-color: transparent;
    color: var(--bb-cookie-fg);
    border-color: var(--bb-cookie-border);
}

@media (max-width: 34rem) {
    .cookie-consent__actions {
        inline-size: 100%;
    }

    .cookie-consent__actions form,
    .cookie-consent__button {
        flex: 1 1 100%;
    }

    .cookie-consent__actions form .cookie-consent__button {
        inline-size: 100%;
    }
}