/* =====================================================================
   Neda eCampus - the cookie consent banner and its settings dialog.
   Paired with assets/neda-consent.js. Moodle loads both files from here.

   Neda design rules (Neda_Design_Rules.md):
   - buttons 35px, 8px corners, bold labels; hover and :focus-visible are
     ONE appearance - cherry fill, white label, no ring (§5);
   - Accept all and Reject all are the SAME button, side by side: neither
     may be easier to see than the other. "Choose cookies" and "Save my
     choices" are the secondary button: lime light, 2px black edge;
   - the banner and the dialog are boxes, not controls: 12px corners, a
     white plate with elevation, and no coloured strip on any edge;
   - every typeface goes through var(--neda-font), so the RTL languages
     take the Naskh face (neda-rtl.css §6).
   Every rule is scoped under the component's own classes and an id, so
   neither the theme nor Moove's Bootstrap can reach in, and the
   component reaches nothing outside itself.
   ===================================================================== */

#neda-consent,
#neda-consent-dialog,
.neda-consent-sr {
    --nc-cherry: #D7263D;
    --nc-lime: #C4C40E;
    --nc-lime-light: #F1F3D6;
    --nc-black: #000000;
    --nc-white: #FFFFFF;
    --nc-edge: rgba(0, 0, 0, 0.45);
    --nc-hairline: rgba(0, 0, 0, 0.12);
    --nc-elevation: 0 10px 34px rgba(0, 0, 0, 0.22), 0 2px 8px rgba(0, 0, 0, 0.10);
    --nc-font: var(--neda-font, "Atkinson Hyperlegible Next", Candara, "Segoe UI", system-ui, sans-serif);
}

#neda-consent[hidden],
#neda-consent-dialog .neda-consent-recorded[hidden] { display: none !important; }

/* ---- The banner: a card at the foot of the window -------------------- */

#neda-consent {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 100000;          /* over the theme header (9999) and Moodle's drawers */
    box-sizing: border-box;
    padding: 0 16px 16px;
    pointer-events: none;     /* the empty gutter around the card lets clicks through */
    font-family: var(--nc-font);
}

#neda-consent .neda-consent-card {
    pointer-events: auto;
    box-sizing: border-box;
    max-width: 760px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    margin: 0 auto;
    padding: 20px 24px;
    background: var(--nc-white);
    color: var(--nc-black);
    border-radius: 12px;
    box-shadow: var(--nc-elevation);
    text-align: start;
}

/* ---- Type, shared by the banner and the dialog ----------------------- */

#neda-consent .neda-consent-title,
#neda-consent-dialog .neda-consent-title {
    margin: 0 0 8px;
    padding: 0;
    font-family: var(--nc-font);
    font-size: 20px;
    line-height: 1.3;
    font-weight: 700;
    color: var(--nc-black);
    letter-spacing: normal;
    text-transform: none;
}

#neda-consent .neda-consent-text,
#neda-consent-dialog .neda-consent-text,
#neda-consent-dialog .neda-consent-cat-text,
#neda-consent-dialog .neda-consent-recorded {
    margin: 0 0 10px;
    font-family: var(--nc-font);
    font-size: 15px;
    line-height: 1.55;
    font-weight: 400;
    color: var(--nc-black);
}

#neda-consent .neda-consent-links,
#neda-consent-dialog .neda-consent-links {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 18px;
    margin: 0 0 16px;
    font-family: var(--nc-font);
    font-size: 15px;
    line-height: 1.5;
}

/* Links: black, underlined; cherry and a thicker line under the pointer,
   the cherry ring on keyboard focus (§2c, §8). */
#neda-consent .neda-consent-links a,
#neda-consent-dialog .neda-consent-links a {
    color: var(--nc-black);
    text-decoration: underline;
    text-underline-offset: 2px;
    font-weight: 400;
}

#neda-consent .neda-consent-links a:hover,
#neda-consent-dialog .neda-consent-links a:hover {
    color: var(--nc-cherry);
    text-decoration-thickness: 2px;
}

#neda-consent .neda-consent-links a:focus-visible,
#neda-consent-dialog .neda-consent-links a:focus-visible {
    outline: 3px solid var(--nc-cherry);
    outline-offset: 2px;
    border-radius: 4px;
}

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

#neda-consent .neda-consent-actions,
#neda-consent-dialog .neda-consent-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

#neda-consent .neda-consent-btn,
#neda-consent-dialog .neda-consent-btn {
    box-sizing: border-box;
    flex: 1 1 0;
    min-width: max-content;
    height: 35px;
    min-height: 35px;
    margin: 0;
    padding: 0 18px;
    border: 2px solid transparent;
    border-radius: 8px;
    background-clip: padding-box;
    font-family: var(--nc-font);
    font-size: 14px;
    line-height: 1;
    font-weight: 700;
    color: var(--nc-black);
    white-space: nowrap;
    cursor: pointer;
    box-shadow: none;
    text-transform: none;
    letter-spacing: normal;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

/* Accept all and Reject all: one style, so neither is the easier choice. */
#neda-consent .neda-consent-btn--primary,
#neda-consent-dialog .neda-consent-btn--primary {
    background-color: var(--nc-lime);
    border-color: var(--nc-lime);
}

#neda-consent .neda-consent-btn--secondary,
#neda-consent-dialog .neda-consent-btn--secondary {
    background-color: var(--nc-lime-light);
    border-color: var(--nc-black);
}

#neda-consent .neda-consent-btn:hover,
#neda-consent .neda-consent-btn:focus-visible,
#neda-consent-dialog .neda-consent-btn:hover,
#neda-consent-dialog .neda-consent-btn:focus-visible {
    background-color: var(--nc-cherry);
    border-color: var(--nc-cherry);
    color: var(--nc-white);
    outline: none;
}

/* ---- The settings dialog -------------------------------------------- */

#neda-consent-dialog {
    box-sizing: border-box;
    width: min(640px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    margin: auto;
    padding: 24px;
    border: 0;
    border-radius: 12px;
    background: var(--nc-white);
    color: var(--nc-black);
    box-shadow: var(--nc-elevation);
    font-family: var(--nc-font);
    text-align: start;
}

#neda-consent-dialog::backdrop { background: rgba(0, 0, 0, 0.45); }

#neda-consent-dialog .neda-consent-dialog-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

/* The close X: an icon-only control, so a 44px target; it rings, it is
   not filled (it carries no label to invert). */
#neda-consent-dialog .neda-consent-close {
    flex: 0 0 auto;
    box-sizing: border-box;
    width: 44px;
    height: 44px;
    margin: -10px 0 0;
    margin-inline-end: -10px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--nc-black);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

#neda-consent-dialog .neda-consent-close-x {
    position: relative;
    width: 18px;
    height: 18px;
}

#neda-consent-dialog .neda-consent-close-x::before,
#neda-consent-dialog .neda-consent-close-x::after {
    content: "";
    position: absolute;
    top: 8px;
    left: -1px;
    width: 20px;
    height: 2px;
    background: currentColor;
    transform: rotate(45deg);
}

#neda-consent-dialog .neda-consent-close-x::after { transform: rotate(-45deg); }

#neda-consent-dialog .neda-consent-close:hover { color: var(--nc-cherry); }

#neda-consent-dialog .neda-consent-close:focus-visible {
    outline: 3px solid var(--nc-cherry);
    outline-offset: -3px;
}

#neda-consent-dialog .neda-consent-cats {
    margin: 6px 0 12px;
    border-top: 1px solid var(--nc-hairline);
}

#neda-consent-dialog .neda-consent-cat {
    padding: 14px 0 4px;
    border-bottom: 1px solid var(--nc-hairline);
}

#neda-consent-dialog .neda-consent-cat-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

#neda-consent-dialog .neda-consent-cat-title {
    margin: 0;
    font-family: var(--nc-font);
    font-size: 16px;
    line-height: 1.3;
    font-weight: 700;
    color: var(--nc-black);
    cursor: pointer;
}

#neda-consent-dialog .neda-consent-always {
    margin-inline-start: auto;
    font-size: 14px;
    font-weight: 700;
    color: var(--nc-black);
}

/* Tick boxes: Professional Blue when ticked (as on Moodle, §43), the
   cherry ring on keyboard focus. Native, so a screen reader announces
   "checkbox, checked" without help. */
#neda-consent-dialog .neda-consent-cat input[type="checkbox"] {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin: 0;
    accent-color: #2F80ED;
    cursor: pointer;
}

#neda-consent-dialog .neda-consent-cat input[type="checkbox"]:disabled { cursor: not-allowed; }

#neda-consent-dialog .neda-consent-cat input[type="checkbox"]:focus-visible {
    outline: 3px solid var(--nc-cherry);
    outline-offset: 2px;
}

/* ---- Announcements, for screen readers only -------------------------- */

.neda-consent-sr {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* ---- "Cookie settings" in the footer's policy row -------------------- */

/* A button (it opens a dialog, it goes nowhere) dressed as its neighbours,
   the footer's links: white, underlined, 13px, lime under the pointer, the
   cherry ring on keyboard focus. The same on eCampus and Moodle. */
.neda-footer .neda-consent-footer-link {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    font-family: inherit;
    font-size: 13px;
    line-height: 1.2;
    font-weight: 400;
    color: #FFFFFF;
    opacity: 0.82;
    text-decoration: underline;
    cursor: pointer;
    transition: color 0.15s ease;
}

.neda-footer .neda-consent-footer-link:hover,
.neda-footer .neda-consent-footer-link:focus-visible {
    color: #C4C40E;
    opacity: 1;
}

.neda-footer .neda-consent-footer-link:focus-visible {
    outline: 3px solid #D7263D;
    outline-offset: 3px;
    border-radius: 8px;
}

/* ---- The accessibility widget's button, above the banner -------------- */

/* open-accessibility pins its button to the same bottom corner, at
   z-index 1000000, over the banner's last button on a phone. It is lifted
   by the banner's height (set by the script) while the banner is open, so
   both stay reachable. */
html.neda-consent-open .open-accessibility-widget-wrapper.position-bottom-right,
html.neda-consent-open .open-accessibility-widget-wrapper.position-bottom-left {
    bottom: var(--neda-consent-h, 20px) !important;
}

/* ---- A phone ----------------------------------------------------------- */

@media (max-width: 600px) {
    #neda-consent { padding: 0 8px 8px; }

    #neda-consent .neda-consent-card { padding: 16px; }

    #neda-consent .neda-consent-title,
    #neda-consent-dialog .neda-consent-title { font-size: 18px; }

    #neda-consent .neda-consent-text { font-size: 14px; }

    /* One button per row, full width: still the same size as each other.
       A label too long for a phone (Sorani "Save my choices", or a
       visitor's own text spacing) wraps inside its button rather than
       spilling out; every label that fits keeps the 35px button. */
    #neda-consent .neda-consent-btn,
    #neda-consent-dialog .neda-consent-btn {
        flex: 1 1 100%;
        min-width: 0;
        height: auto;
        padding-block: 6px;
        line-height: 1.25;
        white-space: normal;
    }

    #neda-consent-dialog { padding: 18px; }
}

/* ---- A short window: a phone on its side, or 400% zoom ---------------- */

/* A card floating over the foot of a window this short would cover most of
   it, and a focused control could hide behind it (WCAG 2.4.11). Here it
   flows instead: first in the document, so at the top of the page, with
   nothing covered and no scroll box of its own. The script reserves no
   space while it is not floating. */
@media (max-height: 480px) {
    #neda-consent {
        position: static;
        padding: 8px;
        pointer-events: auto;
    }

    #neda-consent .neda-consent-card {
        max-width: none;
        max-height: none;
        overflow: visible;
    }
}

/* The card's own cap, on browsers that know the dynamic viewport. */
@supports (height: 100dvh) {
    #neda-consent .neda-consent-card,
    #neda-consent-dialog { max-height: calc(100dvh - 32px); }
}

/* ---- Windows contrast themes ------------------------------------------ */

/* The system replaces every colour, so the cherry fill that marks a focused
   button is gone: draw a real outline in the system's text colour, and
   keep the drawn X visible. */
@media (forced-colors: active) {
    #neda-consent .neda-consent-card,
    #neda-consent-dialog { border: 2px solid CanvasText; }

    #neda-consent .neda-consent-btn,
    #neda-consent-dialog .neda-consent-btn { border-color: ButtonText; }

    #neda-consent .neda-consent-btn:focus-visible,
    #neda-consent-dialog .neda-consent-btn:focus-visible,
    #neda-consent-dialog .neda-consent-close:focus-visible,
    .neda-footer .neda-consent-footer-link:focus-visible {
        outline: 3px solid CanvasText !important;
        outline-offset: 2px;
    }

    #neda-consent-dialog .neda-consent-close-x::before,
    #neda-consent-dialog .neda-consent-close-x::after {
        forced-color-adjust: none;
        background: ButtonText;
    }
}

@media (prefers-reduced-motion: reduce) {
    #neda-consent .neda-consent-btn,
    #neda-consent-dialog .neda-consent-btn,
    .neda-footer .neda-consent-footer-link { transition: none; }
}