/* ============================================
   Cookie consent banner (Views/Shared/_CookieConsent.cshtml, js/cookieConsent.js)
   ============================================
   A card in the bottom-left corner, a sheet from the bottom edge on a phone. It uses the site tokens from public.css and
   the .dash-card look: white, a 1px #d0d0d0 border, a 14px radius. Accept Required and Accept All are the same size, weight and
   color on purpose: declining the optional cookies has to be as easy as accepting them. The green on a switch is state (allowed), not decoration. */

.cc {
    position: fixed;
    z-index: 1040;                         /* over the navbar (1030-1033), under a modal dialog, which is in the top layer */
    left: 1.25rem;
    bottom: 1.25rem;
    width: min(27rem, calc(100vw - 2.5rem));
    font-family: 'Work Sans', system-ui, sans-serif;
    color: var(--vg-dark, #282a28);
}

/* An author display value would beat the hidden attribute, and the script hides and shows these. */
.cc[hidden],
.cc [hidden] {
    display: none !important;
}

.cc-card {
    background: #fff;
    border: 1px solid #d0d0d0;
    border-radius: 14px;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.18);
    padding: 1.1rem 1.25rem 1.15rem;
    max-height: calc(100vh - 2.5rem);
    max-height: calc(100dvh - 2.5rem);
    overflow-y: auto;
}

.cc-title {
    margin: 0 0 0.4rem;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
}

.cc-text {
    margin: 0 0 0.9rem;
    font-size: 0.85rem;
    line-height: 1.5;
    color: #3c403d;
}

.cc-text a {
    color: var(--vg-accent, #5E625F);
    text-decoration: underline;
}

/* The three groups: Required (always on), Analytics, Session Recordings */
.cc-details {
    margin: 0 0 1rem;
    border-top: 1px solid #e3e5e3;
}

.cc-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid #e3e5e3;
}

.cc-row-title {
    display: block;
    margin: 0 0 0.15rem;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
}

.cc-row-help {
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.45;
    color: #4a4e4b;
}

/* A switch is a real checkbox, so it works with a keyboard and a screen reader. The off track is darker than a pale grey
   so the control's edge reads against the white card (3:1). */
.cc-switch {
    -webkit-appearance: none;
    appearance: none;
    flex: none;
    position: relative;
    width: 2.5rem;
    height: 1.4rem;
    margin: 0.1rem 0 0;
    border: 0;
    border-radius: 999px;
    background: #8d918e;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.cc-switch::before {
    content: '';
    position: absolute;
    top: 0.2rem;
    left: 0.2rem;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background: #fff;
    transition: transform 0.15s ease;
}

.cc-switch:checked {
    background: var(--vg-success, #2a7a2a);
}

.cc-switch:checked::before {
    transform: translateX(1.1rem);
}

.cc-switch:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.cc-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.cc-btn {
    flex: 1 1 0;
    min-width: 9.2rem;                     /* the same for both and wide enough for the longer label, so they stay equal and
                                              the row wraps rather than the text spilling out of a button */
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--vg-accent, #5E625F);
    border-radius: 3px;
    background: var(--vg-accent, #5E625F);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

/* In the details, Save Choices is the one action that finishes the job, so it has its own row under the other two. */
.cc-btn[data-cc="save"] {
    flex: 1 0 100%;
}

.cc-btn:hover {
    background: var(--vg-accent-hover, #4a4e4b);
    border-color: var(--vg-accent-hover, #4a4e4b);
}

.cc-link {
    padding: 0.4rem 0.25rem;
    border: 0;
    background: none;
    color: var(--vg-accent, #5E625F);
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}

.cc-link:hover {
    color: var(--vg-accent-hover, #4a4e4b);
}

.cc-btn:focus-visible,
.cc-link:focus-visible,
.cc-switch:focus-visible,
.cc-text a:focus-visible {
    outline: 2px solid var(--vg-dark, #282a28);
    outline-offset: 2px;
}

/* The Cookie Policy's settings section is where the footer link goes without script (/cookie-policy#cookie-settings), and a
   link to it can be shared: keep its heading clear of the fixed navbar and the banners above it. */
#cookie-settings {
    scroll-margin-top: 12rem;
}

@media (max-width: 575.98px) {
    /* on a phone the banner is a sheet from the bottom edge, like the contact dialog */
    .cc {
        left: 0;
        right: 0;
        bottom: 0;
        width: auto;
    }

    .cc-card {
        padding-bottom: calc(1.15rem + env(safe-area-inset-bottom, 0px));
        border-width: 1px 0 0;
        border-radius: 14px 14px 0 0;
        max-height: 85vh;
        max-height: 85dvh;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cc-switch,
    .cc-switch::before,
    .cc-btn {
        transition: none;
    }
}

@media print {
    .cc {
        display: none;
    }
}