/* cookie-banner.css
 * Styles for the Pillar & Post cookie consent banner.
 * Positioned bottom-right on all sites.
 * Uses CSS variables so tenant branding applies automatically.
 * Falls back to neutral colours when brand variables are not defined.
 */

#pp-cookie-banner {
    position: fixed;
    bottom: 1.25rem;
    right: 1.25rem;
    z-index: 1050;
    background: #ffffff;
    border: 1px solid #e1e8ed;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    padding: 1rem 1.1rem;
    max-width: 300px;
    width: calc(100vw - 2.5rem);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.pp-cookie-text {
    font-size: 0.8rem;
    line-height: 1.5;
    color: #526C88;
    margin: 0;
}

/* The banner paints its own white background, so its link cannot take a tenant
   colour: --brand-primary is a light cream on some tenants and near-white on
   others, which renders the cookie-policy link invisible. Fixed colour, chosen
   to sit with .pp-cookie-text's #526C88 above and clear AA on white. */
.pp-cookie-link {
    color: #2E5C8A;
    text-decoration: underline;
    text-underline-offset: 2px;
    white-space: nowrap;
}

.pp-cookie-link:hover {
    color: #0A2540;
}

.pp-cookie-actions {
    display: flex;
    gap: 0.5rem;
}

.pp-cookie-btn {
    flex: 1;
    padding: 0.4rem 0.6rem;
    font-size: 0.8rem;
    font-weight: 600;
    border-radius: 4px;
    border: 1px solid transparent;
    cursor: pointer;
    line-height: 1.4;
}

/* Accept and Decline look the same, so declining is as easy to see as
   accepting (ICO guidance on cookie consent). Both take the tenant's brand
   colour as the fill, and their text colour from --brand-hero-text rather than
   hardcoded white: that variable is computed server-side as "readable against
   --brand-primary", so a tenant with a pale primary gets dark text. */
.pp-cookie-btn-accept,
.pp-cookie-btn-decline {
    background-color: var(--brand-primary, var(--primary-color, #0A2540));
    color: var(--brand-hero-text, #ffffff);
    border-color: var(--brand-primary, var(--primary-color, #0A2540));
}

.pp-cookie-btn-accept:hover,
.pp-cookie-btn-decline:hover {
    opacity: 0.88;
}