/* ===========================================================================
   Rainbow Coders - cookie consent banner
   ---------------------------------------------------------------------------
   A separate stylesheet rather than an addition to site.css, so the consent
   UI can be loaded only on the pages that need it and can be reasoned about
   on its own.

   Every colour, size and spacing value below reads a CSS custom property set
   by ConsentService::styleVariables() on the #rc-consent element itself. The
   fallbacks in var() are what a browser sees if that attribute is ever
   missing, so the banner is legible even then.

   Note on class names: nothing here is called "cookie-banner", "cookie-notice"
   or "consent-banner". The popular annoyance filter lists ship cosmetic rules
   that hide those exact class names outright, which would leave a large share
   of visitors with no way to give or withdraw consent at all.
   ========================================================================= */

.rc-consent {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    /* The wrapper covers the viewport so its children can be anchored to any
       corner, but it must never intercept a click meant for the page. */
    pointer-events: none;
    font-family: var(--rc-cc-font, inherit);
    font-size: var(--rc-cc-font-size, 15px);
    line-height: 1.55;
}

/* The hidden attribute has to beat the flex and grid display values below,
   exactly as it does in site.css and for the same reason. */
.rc-consent [hidden] { display: none !important; }

.rc-consent-overlay {
    position: fixed;
    inset: 0;
    background: var(--rc-cc-overlay, rgba(15, 23, 42, .55));
    pointer-events: auto;
    animation: rc-consent-fade .2s ease;
}

/* --- The banner itself -------------------------------------------------- */

.rc-consent-panel {
    position: fixed;
    box-sizing: border-box;
    width: min(var(--rc-cc-max-width, 440px), calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    padding: var(--rc-cc-padding, 24px);
    background: var(--rc-cc-bg, #fff);
    color: var(--rc-cc-text, #334155);
    border: var(--rc-cc-border-width, 1px) solid var(--rc-cc-border, #e2e8f0);
    border-radius: var(--rc-cc-radius, 16px);
    box-shadow: var(--rc-cc-shadow, 0 12px 30px -8px rgba(15, 23, 42, .35));
    pointer-events: auto;
    animation: rc-consent-rise .25s cubic-bezier(.16, 1, .3, 1);
}

/* Nine anchor points, applied to the panel rather than the wrapper. */
.rc-consent-at-top-left      .rc-consent-panel { top: 16px; left: 16px; }
.rc-consent-at-top-centre    .rc-consent-panel { top: 16px; left: 50%; transform: translateX(-50%); }
.rc-consent-at-top-right     .rc-consent-panel { top: 16px; right: 16px; }
.rc-consent-at-centre-left   .rc-consent-panel { top: 50%; left: 16px; transform: translateY(-50%); }
.rc-consent-at-centre        .rc-consent-panel { top: 50%; left: 50%; transform: translate(-50%, -50%); }
.rc-consent-at-centre-right  .rc-consent-panel { top: 50%; right: 16px; transform: translateY(-50%); }
.rc-consent-at-bottom-left   .rc-consent-panel { bottom: 16px; left: 16px; }
.rc-consent-at-bottom-centre .rc-consent-panel { bottom: 16px; left: 50%; transform: translateX(-50%); }
.rc-consent-at-bottom-right  .rc-consent-panel { bottom: 16px; right: 16px; }

/* Bar layout spans the full width and hugs whichever edge is nearest. */
.rc-consent-bar .rc-consent-panel {
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    transform: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 24px;
}
.rc-consent-bar[class*="rc-consent-at-top"] .rc-consent-panel    { top: 0; bottom: auto; transform: none; }
.rc-consent-bar[class*="rc-consent-at-bottom"] .rc-consent-panel,
.rc-consent-bar[class*="rc-consent-at-centre"] .rc-consent-panel { bottom: 0; top: auto; transform: none; }
.rc-consent-bar .rc-consent-text { flex: 1 1 340px; min-width: 0; }
.rc-consent-bar .rc-consent-actions { margin-top: 0; }

/* --- Typography --------------------------------------------------------- */

.rc-consent-title {
    margin: 0 0 8px;
    font-size: var(--rc-cc-title-size, 20px);
    font-weight: var(--rc-cc-title-weight, 700);
    line-height: 1.25;
    color: var(--rc-cc-title, #0f172a);
}

.rc-consent-text p { margin: 0 0 10px; }
.rc-consent-text p:last-child { margin-bottom: 0; }
.rc-consent-text a { color: var(--rc-cc-link, #004DFF); text-decoration: underline; }

.rc-consent-links { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 10px; font-size: .92em; }

/* --- Buttons ------------------------------------------------------------ */

.rc-consent-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }

.rc-consent-btn {
    appearance: none;
    cursor: pointer;
    font: inherit;
    font-size: var(--rc-cc-btn-size, 15px);
    font-weight: var(--rc-cc-btn-weight, 600);
    line-height: 1.2;
    padding: var(--rc-cc-btn-padding, 11px 18px);
    border-style: solid;
    border-width: var(--rc-cc-btn-border, 1px);
    border-radius: var(--rc-cc-btn-radius, 999px);
    transition: filter .15s ease, transform .05s ease;
}
.rc-consent-btn:hover { filter: brightness(.93); }
.rc-consent-btn:active { transform: translateY(1px); }
.rc-consent-btn:focus-visible { outline: 3px solid var(--rc-cc-link, #004DFF); outline-offset: 2px; }

.rc-consent-btn-accept { background: var(--rc-cc-accept-bg); color: var(--rc-cc-accept-text); border-color: var(--rc-cc-accept-border); }
.rc-consent-btn-reject { background: var(--rc-cc-reject-bg); color: var(--rc-cc-reject-text); border-color: var(--rc-cc-reject-border); }
.rc-consent-btn-prefs  { background: var(--rc-cc-prefs-bg);  color: var(--rc-cc-prefs-text);  border-color: var(--rc-cc-prefs-border); }
.rc-consent-btn-save   { background: var(--rc-cc-save-bg);   color: var(--rc-cc-save-text);   border-color: var(--rc-cc-save-border); }

.rc-consent-close {
    position: absolute;
    top: 10px;
    right: 12px;
    background: none;
    border: 0;
    padding: 4px 8px;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    color: var(--rc-cc-title, #0f172a);
    opacity: .6;
}
.rc-consent-close:hover { opacity: 1; }
.rc-consent-close:focus-visible { outline: 3px solid var(--rc-cc-link, #004DFF); outline-offset: 2px; }

/* --- Preferences dialogue ----------------------------------------------- */

.rc-consent-prefs {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: var(--rc-cc-overlay, rgba(15, 23, 42, .55));
    pointer-events: auto;
    z-index: 1;
}

.rc-consent-prefs-inner {
    position: relative;
    box-sizing: border-box;
    /* The plugin's width. Wider than this and the descriptions run to a
       line length nobody reads. */
    width: min(560px, calc(100vw - 32px));
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    padding: var(--rc-cc-padding, 24px);
    background: var(--rc-cc-bg, #fff);
    color: var(--rc-cc-text, #334155);
    border-radius: var(--rc-cc-radius, 16px);
    box-shadow: var(--rc-cc-shadow, 0 12px 30px -8px rgba(15, 23, 42, .35));
    animation: rc-consent-rise .25s cubic-bezier(.16, 1, .3, 1);
}

/* Room reserved on the right so a long title never slides under the close. */
.rc-consent-prefs-head { padding-right: 36px; }
.rc-consent-prefs-head .rc-consent-close { top: 0; right: 0; }

.rc-consent-categories { list-style: none; margin: 16px 0 0; padding: 0; }

.rc-consent-category { padding: 14px 0; border-bottom: 1px solid var(--rc-cc-border, #e2e8f0); }
.rc-consent-category:last-child { border-bottom: 0; }

/* The buttons need room under them. Sitting them on the panel edge makes the
   last one look clipped and leaves nothing to press on a touch screen without
   catching the edge of the panel. */
.rc-consent-prefs .rc-consent-actions { margin-top: 18px; padding-bottom: 4px; }
.rc-consent-category-row { display: flex; align-items: center; gap: 12px; }
.rc-consent-category-label { font-weight: 600; color: var(--rc-cc-title, #0f172a); cursor: pointer; }
.rc-consent-always { display: inline-block; margin-left: 8px; font-size: .8em; font-weight: 500; opacity: .65; }
.rc-consent-category-desc { margin: 8px 0 0 56px; font-size: .92em; color: var(--rc-cc-desc, #64748b); }
.rc-consent-category-desc p { margin: 0 0 6px; }
.rc-consent-category-desc p:last-child { margin-bottom: 0; }

/* --- Toggle switch ------------------------------------------------------ */

.rc-consent-switch { position: relative; display: inline-block; flex: 0 0 auto; width: 44px; height: 24px; }
.rc-consent-toggle { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.rc-consent-toggle:disabled { cursor: not-allowed; }

.rc-consent-slider {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: var(--rc-cc-toggle-off, #cbd5e1);
    transition: background .2s ease;
}
.rc-consent-slider::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--rc-cc-toggle-knob, #fff);
    transition: transform .2s ease;
}
.rc-consent-toggle:checked + .rc-consent-slider { background: var(--rc-cc-toggle-on, #008026); }
.rc-consent-toggle:checked + .rc-consent-slider::before { transform: translateX(20px); }
.rc-consent-toggle:disabled + .rc-consent-slider { opacity: .55; }
.rc-consent-toggle:focus-visible + .rc-consent-slider { outline: 3px solid var(--rc-cc-link, #004DFF); outline-offset: 3px; }

/* --- The permanent reopen control --------------------------------------- */

.rc-consent-tab {
    position: fixed;
    bottom: 0;
    right: 18px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border: 0;
    border-radius: 10px 10px 0 0;
    background: var(--rc-cc-tab-bg, #0f172a);
    color: var(--rc-cc-tab-text, #fff);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    pointer-events: auto;
    box-shadow: 0 -2px 16px rgba(15, 23, 42, .22);
    transition: transform .15s ease, filter .15s ease;
}
.rc-consent-tab:hover { filter: brightness(1.15); transform: translateY(-2px); }
.rc-consent-tab:focus-visible { outline: 3px solid var(--rc-cc-tab-text, #fff); outline-offset: -5px; }

.rc-consent-tab-icon {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    border: 2px solid currentColor;
    border-radius: 50%;
    position: relative;
}
.rc-consent-tab-icon::after {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: currentColor;
}

/* --- Animation ---------------------------------------------------------- */

@keyframes rc-consent-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes rc-consent-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* Centred layouts already sit under a transform, so a second one on the
   keyframe would fight it. They fade instead. */
.rc-consent-at-centre .rc-consent-panel,
.rc-consent-at-centre-left .rc-consent-panel,
.rc-consent-at-centre-right .rc-consent-panel,
.rc-consent-at-top-centre .rc-consent-panel,
.rc-consent-at-bottom-centre .rc-consent-panel { animation-name: rc-consent-fade; }

@media (prefers-reduced-motion: reduce) {
    .rc-consent-panel,
    .rc-consent-prefs-inner,
    .rc-consent-overlay { animation: none; }
    .rc-consent-tab:hover { transform: none; }
}

/* --- Small screens ------------------------------------------------------ */

@media (max-width: 600px) {
    .rc-consent-panel {
        width: auto;
        max-width: none;
        left: 12px;
        right: 12px;
    }
    /* Horizontal centring is meaningless once the panel spans the width, and
       leaving the transform in place pushes it half off the screen. */
    .rc-consent-at-top-left .rc-consent-panel,
    .rc-consent-at-top-centre .rc-consent-panel,
    .rc-consent-at-top-right .rc-consent-panel { top: 12px; bottom: auto; transform: none; }
    .rc-consent-at-bottom-left .rc-consent-panel,
    .rc-consent-at-bottom-centre .rc-consent-panel,
    .rc-consent-at-bottom-right .rc-consent-panel { bottom: 12px; top: auto; transform: none; }
    .rc-consent-at-centre-left .rc-consent-panel,
    .rc-consent-at-centre .rc-consent-panel,
    .rc-consent-at-centre-right .rc-consent-panel { top: 50%; bottom: auto; transform: translateY(-50%); }

    .rc-consent-actions .rc-consent-btn { flex: 1 1 auto; }
    .rc-consent-category-desc { margin-left: 0; }
    .rc-consent-prefs-inner { padding: 18px; }
    .rc-consent-tab-text { display: none; }
    .rc-consent-tab { right: 12px; padding: 11px; border-radius: 50% 50% 0 0; }
}

/* The two policy links in the banner are navigation rather than prose, and a
   default blue underline on a tinted panel reads as an afterthought. They
   keep the banner's own link colour, which an administrator controls, and
   gain their underline on hover and focus rather than wearing it always. */
.rc-consent a,
.rc-consent .rc-policy-link {
    color: var(--rc-link, currentColor);
    font-weight: 700;
    text-decoration: none;
    text-underline-offset: 3px;
}
.rc-consent a:hover,
.rc-consent a:focus-visible {
    text-decoration: underline;
}