/*
 * The cookie banner and preferences panel (inc/measurement.php, assets/js/consent.js).
 *
 * Built on the tokens like components.css. Navy text on white (15.04:1); Accept all and Reject
 * all share one style, navy with white text, so neither is the easy one; Choose cookies is the
 * outlined button beside them. Buttons are bold capitals in a rounded square, as the brand guide
 * asks. Focus is the site's one navy and white ring (refinements.css section 6), not restyled here.
 */

.bh-consent {
    position: fixed;
    z-index: 1050;
    right: var(--bh-space-4);
    bottom: var(--bh-space-4);
    left: var(--bh-space-4);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--bh-space-4) var(--bh-space-8);
    align-items: center;
    max-width: 1100px;
    margin: 0 auto;
    padding: var(--bh-space-5) var(--bh-space-6);
    border-top: 6px solid var(--bh-blue);
    border-radius: var(--bh-radius-md);
    background: var(--bh-white);
    box-shadow: var(--bh-shadow-md), 0 0 0 1px var(--bh-line);
    color: var(--bh-on-white);
    font-family: var(--bh-font);
}

.bh-consent[hidden] {
    display: none;
}

.bh-consent__title,
.bh-consent-panel__title {
    margin: 0 0 var(--bh-space-2);
    color: var(--bh-navy);
    font-family: var(--bh-font);
    font-size: var(--bh-text-sm);
    font-weight: var(--bh-weight-bold);
    letter-spacing: 0.03em;
    line-height: var(--bh-leading-tight);
    text-transform: uppercase;
}

.bh-consent__text,
.bh-consent-panel__intro,
.bh-consent-panel__text {
    margin: 0;
    color: var(--bh-navy);
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-medium);
    line-height: var(--bh-leading-body);
}

.bh-consent a,
.bh-consent-panel a {
    color: var(--bh-blue-text);
    font-weight: var(--bh-weight-semibold);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.bh-consent a:hover,
.bh-consent-panel a:hover {
    color: var(--bh-navy);
}

.bh-consent__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bh-space-3);
    justify-content: flex-end;
}

.bh-consent__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 9.5rem;
    min-height: 48px;
    margin: 0;
    padding: 0 var(--bh-space-5);
    border: 2px solid var(--bh-navy);
    border-radius: 6px;
    font-family: var(--bh-font);
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-bold);
    letter-spacing: 0.05em;
    line-height: 1.2;
    text-align: center;
    text-transform: uppercase;
    cursor: pointer;
}

.bh-consent__btn--choice {
    background: var(--bh-navy);
    color: var(--bh-on-navy);
}

.bh-consent__btn--choice:hover {
    background: var(--bh-blue);
    color: var(--bh-on-blue);
}

.bh-consent__btn--more {
    background: var(--bh-white);
    color: var(--bh-on-white);
}

.bh-consent__btn--more:hover {
    background: var(--bh-surface-2);
}

/* ---- The preferences panel ------------------------------------------------------------ */

.bh-consent-panel {
    width: min(36rem, calc(100vw - 2 * var(--bh-space-4)));
    max-height: calc(100vh - 2 * var(--bh-space-4));
    max-height: calc(100dvh - 2 * var(--bh-space-4));
    margin: auto;
    padding: var(--bh-space-6);
    overflow: auto;
    border: 0;
    border-top: 6px solid var(--bh-blue);
    border-radius: var(--bh-radius-md);
    background: var(--bh-white);
    box-shadow: var(--bh-shadow-md);
    color: var(--bh-on-white);
    font-family: var(--bh-font);
}

/* Ballyhass Navy, written out: ::backdrop did not inherit the page's custom properties before Chrome 122. */
.bh-consent-panel::backdrop {
    background: rgba(33, 39, 47, 0.7);
}

.bh-consent-panel__head {
    display: flex;
    gap: var(--bh-space-4);
    align-items: flex-start;
    justify-content: space-between;
}

.bh-consent-panel__title {
    margin-top: var(--bh-space-3);
    font-size: var(--bh-text-md);
}

/* Focus is put on the heading so a screen reader starts at the top. It is not a control, so no ring. */
.bh-consent-panel__title:focus {
    outline: none;
}

.bh-consent-panel__close {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: var(--bh-target-comfortable);
    height: var(--bh-target-comfortable);
    margin: calc(-1 * var(--bh-space-2)) calc(-1 * var(--bh-space-2)) 0 0;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--bh-navy);
    font-size: var(--bh-text-xl);
    line-height: 1;
    cursor: pointer;
}

.bh-consent-panel__close:hover {
    background: var(--bh-surface-2);
}

.bh-consent-panel__categories {
    min-width: 0;
    margin: var(--bh-space-5) 0;
    padding: 0;
    border: 0;
}

.bh-consent-panel__category {
    padding: var(--bh-space-4) 0;
    border-top: 1px solid var(--bh-line);
}

.bh-consent-panel__category:last-child {
    border-bottom: 1px solid var(--bh-line);
}

.bh-consent-panel__control {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bh-space-3);
    align-items: center;
    margin-bottom: var(--bh-space-2);
}

.bh-consent-panel__control input {
    width: 24px;
    height: 24px;
    margin: 0;
    accent-color: var(--bh-navy);
    cursor: pointer;
}

.bh-consent-panel__control input:disabled {
    cursor: default;
}

/* A category nothing uses has its name and no tick box (comment 11931271, point 6). */
.bh-consent-panel__label,
.bh-consent-panel__control label {
    margin: 0;
    color: var(--bh-navy);
    font-size: var(--bh-text-sm);
    font-weight: var(--bh-weight-bold);
    cursor: pointer;
}

.bh-consent-panel__always {
    padding: 2px var(--bh-space-2);
    border-radius: var(--bh-radius-none);
    background: var(--bh-navy);
    color: var(--bh-yellow);
    font-size: var(--bh-text-2xs);
    font-weight: var(--bh-weight-bold);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.bh-consent-panel__label {
    cursor: default;
}

.bh-consent-panel__unused {
    display: block;
    margin-top: var(--bh-space-1);
    color: var(--bh-muted);
}

.bh-consent-panel__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bh-space-3);
}

.bh-consent-panel__actions .bh-consent__btn {
    flex: 1 1 auto;
    white-space: nowrap;
}

/* ---- Phones -------------------------------------------------------------------------- */

@media (max-width: 767.98px) {
    .bh-consent {
        right: var(--bh-space-2);
        bottom: var(--bh-space-2);
        left: var(--bh-space-2);
        grid-template-columns: minmax(0, 1fr);
        gap: var(--bh-space-3);
        padding: var(--bh-space-4);
    }

    .bh-consent__actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .bh-consent__btn {
        min-width: 0;
        padding: 0 var(--bh-space-3);
    }

    .bh-consent__btn--more {
        grid-column: 1 / -1;
    }

    .bh-consent-panel {
        padding: var(--bh-space-5) var(--bh-space-4);
    }

    /* Save on its own row, Accept all and Reject all side by side and the same size under it.
       Left to wrap, Reject all took a row of its own and came out twice the width of Accept all. */
    .bh-consent-panel__actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .bh-consent-panel__actions .bh-consent__btn {
        min-width: 0;
        padding: 0 var(--bh-space-3);
    }

    .bh-consent-panel__actions .bh-consent__btn--more {
        grid-column: 1 / -1;
    }
}