/* =====================================================================
   NEDA eCAMPUS - SHARED FOOTER
   One stylesheet, used verbatim by WordPress, Moodle/Moove and Open edX.
   Nothing in here is platform-specific: it is all scoped under
   .neda-footer, so it cannot collide with a host theme, and it needs no
   icon font (every glyph is inline SVG in the markup).

   PALETTE - the strict eight only. Every soft edge is a transparent
   Black / White / Cyan, never a new hue.
     Cyan   #0EC4C5    Lime  #C4C40E    Cherry #D7263D
     Black  #000000    White #FFFFFF
   The two network colours (LinkedIn blue, WhatsApp green) are
   third-party brand marks, deliberately kept - a decision already made
   for the Moodle footer.

   CONTRAST, on a black surface:
     body + headings  white
     links            white -> LIME on hover (lime is legal as TEXT only
                      on a dark surface; on white it is 1.9:1)
     contact icons    CYAN fill + BLACK glyph (9:1). Never a white glyph
                      on cyan - that is 2.3:1, the worst pair in the set.
                      Hover flips to cherry + white (5.9:1).

   THE GLOSS
     rgba(0,0,0,0.8) + backdrop-filter blur(10px) - the same veil the
     header uses when scrolled, at 80% instead of the header's 70%.
   ===================================================================== */

/* ---- Host footer suppression --------------------------------------- *
   Each platform ships its own footer; ours replaces it. All three
   selectors live here together so this file stays byte-identical on
   every property - a selector for a platform you are not on simply
   matches nothing.

   Scoped to a body class the host sets only when our footer is actually
   printed, so a half-deployed install can never leave a page with NO
   footer at all.

     WordPress  footer.wp-block-template-part  (the block theme part;
                the header is header.wp-block-template-part, untouched)
     Moodle     #page-footer                   (Moove's own bar)
     Open edX   .wrapper-footer / #footer-openedx
   ---------------------------------------------------------------- */
.neda-has-footer footer.wp-block-template-part,
.neda-has-footer #page-footer,
.neda-has-footer .wrapper-footer,
.neda-has-footer #footer-openedx {
    display: none !important;
}

.neda-footer {
    --nf-cyan:   #0EC4C5;
    --nf-lime:   #C4C40E;
    --nf-cherry: #D7263D;
    --nf-white:  #FFFFFF;
    --nf-black:  #000000;
    --nf-radius: 10px;
    --nf-ease:   0.15s ease;
    --nf-max:    1200px;

    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding: 40px 50px 0;
    /* 80% black + blur: the header's scrolled veil, one notch darker. */
    background-color: rgba(0, 0, 0, 0.8);
    -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
    color: var(--nf-white);
    font-family: Candara, "Segoe UI", Calibri, Arial, sans-serif;
    font-size: 15px;
    line-height: 1.6;
}

.neda-footer *,
.neda-footer *::before,
.neda-footer *::after { box-sizing: inherit; }

/* Visually hidden, still read aloud. Every icon link carries one of
   these, because a bare glyph names nothing to a screen reader. Not
   display:none and not visibility:hidden - both remove it from the
   accessibility tree, which is the entire point of having it. */
.neda-footer .neda-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    white-space: nowrap;
    border: 0;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
}

/* A host theme that has already coloured its own footer must not leak
   through. Kept to text elements so it cannot fight the icon buttons. */
.neda-footer :is(p, h2, h3, h4, span, li, dd, dt) { color: var(--nf-white); }

/* Three columns: brand | site menu | contact + social on the RIGHT.
   `auto` on the last track lets the icon column shrink to its content
   so the menu gets the slack, which is what keeps the social block
   pinned to the right edge instead of floating in from it. */
.neda-footer-inner {
    max-width: var(--nf-max);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 2fr) auto;
    gap: 40px;
    align-items: start;
}

/* ---- Brand column -------------------------------------------------- */

.neda-footer-logo {
    display: block;
    height: auto;
    max-width: 190px;
    margin: 0 0 18px;
}

.neda-footer-about {
    margin: 0;
    max-width: 46ch;   /* a comfortable measure, not the full column */
    font-size: 15px;
}

/* ---- Site menu ----------------------------------------------------- *
   The header's menu, flattened. A footer is the wrong place for real
   dropdowns - there is no room to open one and nothing to hover on a
   phone - so each top-level item becomes a column heading and the items
   that live inside its dropdown are simply listed underneath. Everything
   the menu contains is reachable in one click, which is the point.

   A top-level item with no children (About Us) is a heading that is
   itself a link, and gets no list.                                     */

.neda-footer-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 26px 34px;
}

.neda-footer-nav-col { min-width: 130px; }

.neda-footer-nav-heading {
    margin: 0 0 10px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
}

/* The heading is a link too, but it should not read as one of the child
   links - no underline until it is actually interacted with. */
.neda-footer a.neda-footer-nav-heading-link {
    text-decoration: none;
}
.neda-footer a.neda-footer-nav-heading-link:hover,
.neda-footer a.neda-footer-nav-heading-link:focus-visible {
    text-decoration: underline;
}

.neda-footer-nav-col ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.neda-footer-nav-col li { margin: 0 0 7px; }

.neda-footer-nav-col li:last-child { margin-bottom: 0; }

.neda-footer-nav-col a { font-size: 14px; }

/* ---- Contact / Follow column --------------------------------------- */

/* Pinned to the right edge of the footer measure. Reset to the left at
   the stacked breakpoint, where "right" stops meaning anything. */
.neda-footer-connect { text-align: right; }
.neda-footer-connect .neda-footer-icons { justify-content: flex-end; }

.neda-footer-title {
    margin: 0 0 12px;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--nf-white);
}

.neda-footer-group + .neda-footer-group { margin-top: 26px; }

.neda-footer-icons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.neda-footer-icons li { margin: 0; }

/* The 10px control rule: a square with 10px corners, never a circle. */
.neda-footer-icons a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--nf-radius);
    text-decoration: none;
    transition: background-color var(--nf-ease),
                color var(--nf-ease),
                transform var(--nf-ease);
}

.neda-footer-icons svg {
    width: 19px;
    height: 19px;
    display: block;
    fill: currentColor;   /* the glyph follows the link's colour */
}

/* Contact: cyan fill, BLACK glyph. Cherry + white on hover. */
.neda-footer-contact-icons a {
    background-color: var(--nf-cyan);
    color: var(--nf-black);
}
.neda-footer-contact-icons a:hover,
.neda-footer-contact-icons a:focus-visible {
    background-color: var(--nf-cherry);
    color: var(--nf-white);
}

/* Follow: the networks keep their own marks; only the glyph colour is
   chosen for contrast. White on LinkedIn blue (4.6:1); BLACK on
   WhatsApp green, which is far too light for a white glyph (2.2:1). */
.neda-footer-social a.neda-footer-linkedin {
    background-color: #0077B5;
    color: var(--nf-white);
}
.neda-footer-social a.neda-footer-whatsapp {
    background-color: #25D366;
    color: var(--nf-black);
}
.neda-footer-social a:hover,
.neda-footer-social a:focus-visible { transform: scale(1.08); }

/* ---- Pay with ------------------------------------------------------ */

.neda-footer-pay {
    max-width: var(--nf-max);
    margin: 32px auto 0;
    padding: 18px 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    /* Hairlines are transparent WHITE here, not a new grey. */
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.neda-footer-pay-label {
    margin: 0;
    font-weight: 700;
    font-size: 15px;
    white-space: nowrap;
}

.neda-footer-pay-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Card marks sit on their own white tile - the schemes' own guidelines
   all require a light backing, and on an 80% black veil they would
   otherwise be unreadable. */
.neda-footer-pay-list li {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    min-width: 48px;
    padding: 0 10px;
    border-radius: 6px;
    background-color: var(--nf-white);
}

.neda-footer-pay-list svg { display: block; height: 18px; width: auto; }

/* ---- Host links row ------------------------------------------------ *
   Empty and invisible unless the host puts something in it.

   This exists for Moodle. Its native footer carries Policies, Data
   retention summary and Get the mobile app - the first two are
   GDPR-required and Moodle generates them with a live policy versionid
   and returnurl, so they can NEVER be hard-coded into this markup.
   The Moodle script MOVES the real anchors in here before hiding
   #page-footer, so the links keep working and keep updating.

   :empty means WordPress and Open edX, which have nothing to move,
   render no stray divider.                                            */

.neda-footer-links {
    max-width: var(--nf-max);
    margin: 0 auto;
    padding: 16px 0 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 26px;
    font-size: 14px;
}

.neda-footer-links:empty { display: none; }

.neda-footer-links a { white-space: nowrap; }

/* ---- "Powered by" attribution -------------------------------------- *
   Open edX only. Its stock template carries "Please leave this link and
   use one of the logos provided", and the Open edX marks are a
   condition of the platform's branding terms, so the Tutor and Open edX
   logos are relocated into our footer rather than dropped. Absent on
   WordPress and Moodle, where these rules simply match nothing.

   The logos are colour marks on a black veil, so they get a white tile
   the same way the payment marks do.                                  */

.neda-footer-powered {
    max-width: var(--nf-max);
    margin: 0 auto;
    padding: 14px 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 13px;
}

.neda-footer-powered a {
    display: inline-flex;
    align-items: center;
    padding: 5px 9px;
    border-radius: 6px;
    background-color: var(--nf-white);
}

.neda-footer-powered img { display: block; height: 20px; width: auto; }

/* ---- Copyright ----------------------------------------------------- */

.neda-footer-copy {
    max-width: var(--nf-max);
    margin: 0 auto;
    padding: 18px 0 24px;
    text-align: center;
    font-size: 14px;
}

/* ---- Links --------------------------------------------------------- */

.neda-footer a:not(.neda-footer-icons a) {
    color: var(--nf-white);
    text-decoration: underline;   /* the underline is what says "link" */
    transition: color var(--nf-ease);
}
.neda-footer a:not(.neda-footer-icons a):hover,
.neda-footer a:not(.neda-footer-icons a):focus-visible {
    color: var(--nf-lime);
}

/* Focus must be legible on the RESTING surface, which here is black -
   so cyan, not lime, and never only a colour change. */
.neda-footer a:focus-visible {
    outline: 3px solid var(--nf-cyan);
    outline-offset: 3px;
    border-radius: var(--nf-radius);
}

/* ---- Reveal-on-scroll ---------------------------------------------- *
   PROGRESSIVE ENHANCEMENT, and the order matters:

   With no JS the footer is an ordinary static footer at the end of the
   document - correct on every platform, covering nothing.

   The script adds .neda-footer--fixed only once it has measured the
   footer and reserved the same height at the bottom of the page, so the
   footer can lift out of the flow without the last paragraph jumping.
   It then adds .is-neda-shown when the end of the page comes into view.
   A failure at any point leaves a working static footer.               */

.neda-footer--fixed {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
    transform: translateY(100%);
    transition: transform 0.35s ease;
    will-change: transform;
}

.neda-footer--fixed.is-neda-shown { transform: translateY(0); }

/* ---- Responsive ---------------------------------------------------- */

/* Brand keeps its own column; menu and social share the second. */
@media (max-width: 1100px) and (min-width: 861px) {
    .neda-footer-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); }
    .neda-footer-connect { grid-column: 2; text-align: left; }
    .neda-footer-connect .neda-footer-icons { justify-content: flex-start; }
}

@media (max-width: 860px) {
    .neda-footer { padding: 32px 24px 0; }
    .neda-footer-inner { grid-template-columns: 1fr; gap: 28px; }
    .neda-footer-about { max-width: none; }
    /* Stacked: nothing is "on the right" any more. */
    .neda-footer-connect { text-align: left; }
    .neda-footer-connect .neda-footer-icons { justify-content: flex-start; }
    .neda-footer-nav { gap: 22px 28px; }
}

@media (max-width: 560px) {
    .neda-footer-pay { justify-content: center; }
    .neda-footer-copy { padding-bottom: 20px; }
}

/* A fixed footer on a short screen can eat the page. Below this it
   stays static, which is also the kinder mobile behaviour. */
@media (max-height: 520px) {
    .neda-footer--fixed {
        position: static;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .neda-footer--fixed { transition: none; }
    .neda-footer-icons a { transition: none; }
    .neda-footer-social a:hover,
    .neda-footer-social a:focus-visible { transform: none; }
}