/* ============================================================================
   w52_consent — banner styling.

   Ships with neutral defaults and inherits the site's font. Projects adapt
   the look by overriding the custom properties, e.g.:

     #w52-consent-banner {
         --w52c-accent: var(--brand-primary);
         --w52c-heading-color: var(--brand-dark);
         --w52c-backdrop: rgb(0 0 0 / 0.5);
     }

   "Accept all" and "Required only" share one button style on purpose:
   both options must be equally prominent on the first layer (GDPR,
   no dark patterns).

   The banner is a native <dialog> shown with showModal(): it lives in the
   browser's top layer, the page behind it is inert and gets the backdrop.
   The rules below turn the UA's centered dialog box into a bottom sheet.
   ========================================================================= */

.w52-consent {
    --w52c-background: #ffffff;
    --w52c-text: #1f1f1f;
    --w52c-heading-color: #1f1f1f;
    --w52c-heading-font: inherit;
    --w52c-accent: #767676;
    --w52c-border: #c8c8c8;
    --w52c-table-head: #f0f0f0;
    --w52c-shadow: 0 -4px 24px rgb(0 0 0 / 0.25);
    --w52c-backdrop: rgb(0 0 0 / 0.3);
    --w52c-max-width: 1650px;
    --w52c-gutter: clamp(20px, 5vw, 64px);
    --w52c-font-size-small: 0.875rem;
    --w52c-target-min: 44px;

    position: fixed;
    inset-inline: 0;
    inset-block-start: auto;
    inset-block-end: 0;
    z-index: 60; /* only relevant for the non-modal fallback without showModal() */
    margin: 0;
    inline-size: 100%;
    max-inline-size: none;
    max-block-size: 85dvh;
    overflow-y: auto;
    padding: 20px var(--w52c-gutter) 24px;
    border: 0;
    border-block-start: 4px solid var(--w52c-accent);
    background: var(--w52c-background);
    color: var(--w52c-text);
    box-shadow: var(--w52c-shadow);
}
/* Closed dialog — also keeps the markup invisible in browsers without
   <dialog> support and without JavaScript. */
.w52-consent:not([open]) { display: none; }
.w52-consent::backdrop { background: var(--w52c-backdrop, rgb(0 0 0 / 0.3)); }

.w52-consent__box {
    max-inline-size: var(--w52c-max-width);
    margin-inline: auto;
    display: grid;
    gap: 16px;
}
/* Grid children may shrink so the cookie tables scroll internally instead
   of pushing the banner beyond the viewport */
.w52-consent__box > * { min-inline-size: 0; }
@media (min-width: 900px) {
    .w52-consent__box {
        grid-template-columns: 1fr 1fr;
        column-gap: 40px;
        align-items: start;
    }
    .w52-consent__title,
    .w52-consent__intro,
    .w52-consent__actions { grid-column: 1 / -1; }
}

.w52-consent__title {
    margin: 0;
    font-family: var(--w52c-heading-font);
    font-size: 1.375rem;
    font-weight: 900;
    text-transform: uppercase;
    color: var(--w52c-heading-color);
}
.w52-consent__title:focus { outline: none; }
.w52-consent__intro {
    margin: 0;
    font-size: var(--w52c-font-size-small);
    line-height: 1.6;
}
.w52-consent__intro a {
    color: inherit;
    text-decoration: underline;
}

.w52-consent__head {
    display: flex;
    align-items: center;
    gap: 8px;
}
.w52-consent__switch {
    inline-size: 20px;
    block-size: 20px;
    margin: 0;
    accent-color: var(--w52c-accent);
}
.w52-consent__switch:not(:disabled) { cursor: pointer; }
.w52-consent__label {
    font-weight: 700;
    color: var(--w52c-heading-color);
}
.w52-consent__switch:not(:disabled) + .w52-consent__label { cursor: pointer; }

.w52-consent__details { margin-block-start: 8px; }
.w52-consent__details summary {
    inline-size: fit-content;
    font-size: var(--w52c-font-size-small);
    font-weight: 700;
    color: var(--w52c-heading-color);
    text-decoration: underline;
    cursor: pointer;
}
.w52-consent__table {
    margin-block-start: 8px;
    overflow-x: auto;
}
.w52-consent__table table {
    inline-size: 100%;
    border-collapse: collapse;
    font-size: var(--w52c-font-size-small);
    line-height: 1.5;
}
.w52-consent__table th,
.w52-consent__table td {
    padding: 8px 12px;
    border: 1px solid var(--w52c-border);
    text-align: start;
    vertical-align: top;
}
.w52-consent__table th {
    background: var(--w52c-table-head);
    color: var(--w52c-heading-color);
}
.w52-consent__table td:first-child { white-space: nowrap; }

.w52-consent__actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.w52-consent__button {
    min-block-size: var(--w52c-target-min);
    padding-inline: 24px;
    border: 2px solid var(--w52c-heading-color);
    background: var(--w52c-background);
    color: var(--w52c-heading-color);
    font: inherit;
    font-size: var(--w52c-font-size-small);
    font-weight: 700;
    cursor: pointer;
}
.w52-consent__button:hover {
    background: var(--w52c-heading-color);
    color: var(--w52c-background);
}
.w52-consent__button:focus-visible {
    outline: 2px solid var(--w52c-accent);
    outline-offset: 2px;
}