/* =========================================================
   NEDA eCAMPUS — FRONT-PAGE HERO SLIDER
   Front page only, enqueued by src/HeroSlider.php.

   Six slides in one frame: the editor's own hero group is
   slide 1, untouched apart from a class on its opening tag;
   slides 2–6 are the five course types, each built at render
   time from the same table the type pages use. The stylesheet
   does three things:

     1. stacks the slides in one grid cell, so the frame is as
        tall as the tallest slide and no height is ever measured
        by script;
     2. lays a 40% black veil over every slide, photograph
        included — the course-type hero pattern, replacing the
        30% the front page used to carry on its own;
     3. draws the controls the script adds — previous, next,
        pause and the dots — none of which exist without it.

   NO SCRIPT: only the first slide is shown, static, which is
   exactly what the page was before the slider existed.

   Everything positional is logical (inset-inline-*, margin-
   inline-*), so RTL mirrors with no second rule; the two
   rotated chevron glyphs are flipped by neda-rtl.css section 2,
   alongside the front-section arrows they copy.
   ========================================================= */

.neda-hero-slider {
    --nhs-cyan:   #0EC4C5;
    --nhs-lime:   #C4C40E;
    --nhs-cherry: #D7263D;
    --nhs-black:  #000000;
    --nhs-white:  #FFFFFF;
    --nhs-radius: 10px;
    --nhs-fade:   0.4s;   /* was 0.6s: the handover is part of the 3s, so a slow one ate it */
    --nhs-ease:   0.15s ease;

    position: relative;
    isolation: isolate;
    width: 100%;
    max-width: none !important;
    margin: 0 !important;
    overflow: hidden;
}

/* ---- 1. The stack ----------------------------------------
   One grid cell, every slide in it. The frame takes the height
   of the tallest slide; the shorter ones centre their content
   inside it. */
.neda-hero-slider__track {
    display: grid;
}

.neda-hero-slide {
    grid-area: 1 / 1;
    position: relative;
    isolation: isolate;
    width: 100%;
    max-width: none !important;
    margin: 0 !important;
    box-sizing: border-box;
    background-color: var(--nhs-black);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* ---- 2. The veil. 40% black, on every slide. -------------
   A pseudo-element rather than a second background layer, so
   the photograph keeps `cover` sizing without the veil being
   scaled with it. The slide's children are lifted above it. */
.neda-hero-slide::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-color: rgba(0, 0, 0, 0.4);
    pointer-events: none;
}

.neda-hero-slide > * {
    position: relative;
    z-index: 1;
}

/* ---- Showing one slide at a time --------------------------
   Before the script has run, the first slide alone is visible.
   Once it has (`is-neda-ready`), every slide is in the stack at
   zero opacity and the active one fades up. `visibility` rides
   along, delayed by the fade, so an inactive slide's links are
   out of the tab order and the accessibility tree the moment
   it has gone, and never before it has arrived. */
.neda-hero-slider:not(.is-neda-ready) .neda-hero-slide:not(:first-child) {
    display: none;
}

.neda-hero-slider.is-neda-ready .neda-hero-slide {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity var(--nhs-fade) ease,
        visibility 0s linear var(--nhs-fade);
}

.neda-hero-slider.is-neda-ready .neda-hero-slide.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity var(--nhs-fade) ease;
    z-index: 1;
}

/* ---- The type slides --------------------------------------
   Padding, measure and type sizes copied from the editor's
   hero group, so the six slides read as one hero. The clamp()
   values are the ones the editor set on that group's heading
   and paragraph, verified against the live markup 2026-09-03. */
/* ---- The frame's height ----------------------------------
   Shortened 2026-09-04 by request. The editor's group carries
   120px/100px of vertical padding inline and its heading another
   two spacing units; those are the only things that made the hero
   ~700px tall on a laptop, so they are trimmed here rather than
   in the Site Editor - the block stays the editor's. The bottom
   keeps enough room for the dots (22px + 44px) to sit clear of
   the buttons. */
.neda-hero-slider .neda-hero-slide--editor {
    /* The content sits LOWER in the frame (user, 2026-09-04): more room
       above, the minimum below that still keeps the buttons clear of the
       dots (22px + 44px + 10px). */
    padding-top: clamp(72px, 9vw, 132px) !important;
    padding-bottom: 76px !important;
}

/* The headline a step smaller than the editor's clamp (36.9-68px), and
   the paragraph a fixed 16px rather than 14-20px (user, 2026-09-04).
   Both are !important because the editor wrote them as inline styles. */
.neda-hero-slider .neda-hero-slide--editor > .wp-block-heading {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    font-size: clamp(32px, 1.75rem + 2.2vw, 56px) !important;
}

.neda-hero-slider .neda-hero-slide--editor > p {
    font-size: 16px !important;
}

.neda-hero-slider .neda-hero-slide--editor > .wp-block-buttons {
    margin-bottom: 0 !important;
}

/* ---- The type slides: a card on the END side ---------------
   The copy sits in a white card at 70% - "glossy": a light blur
   of the photograph behind it, a highlight across its top half
   and a deep soft shadow so it stands off the picture. It is
   pushed to the inline END of the frame (the right in LTR, the
   left in RTL - flex follows writing direction, §7b) and clears
   the next-arrow by the slide's own inline padding. Black text,
   no text-shadow: the card is the contrast now, not the veil. */
.neda-hero-slide--type {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: clamp(40px, 5vw, 64px) clamp(72px, 8vw, 110px) 84px;
    color: var(--nhs-black);
    text-align: start;
}

.neda-hero-slide__inner {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 560px;
    /* ONE size for all five cards (user, 2026-09-04): tall enough for the
       longest copy (Flex Learn's three-line intro, Quest Lab's badge) so
       the card never changes height between slides, and the button is
       pushed to the same spot at the bottom by its auto margin. Shorter
       copy leaves a little air above the button, which is intended. */
    min-block-size: 340px;
    margin-inline: 0;
    padding: 28px 32px 28px;
    border-radius: 16px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.7);
    -webkit-backdrop-filter: blur(10px) saturate(120%);
    backdrop-filter: blur(10px) saturate(120%);
    box-shadow:
        0 22px 48px rgba(0, 0, 0, 0.30),
        0 4px 12px rgba(0, 0, 0, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

/* The gloss: a highlight that fades out across the top half. It
   is a layer under the text, so the words keep their full black. */
.neda-hero-slide__inner::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 55%;
    z-index: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.65), rgba(255, 255, 255, 0));
    pointer-events: none;
}

.neda-hero-slide__inner > * {
    position: relative;
    z-index: 1;
}

.neda-hero-slide__title {
    margin: 0 0 8px !important;
    padding: 0 !important;
    color: var(--nhs-black) !important;
    font-size: clamp(28px, 1.4rem + 1.4vw, 42px) !important;
    font-weight: 600 !important;
    line-height: 1.15 !important;
    letter-spacing: 0.5px !important;   /* 1px on 2026-09-06, halved 2026-09-07 */
    text-align: start !important;
    text-shadow: none;
}

/* A status label above the title - Quest Lab's "Coming up next".
   A lime pill with black text, the house label treatment; it sits
   inside the h2 so the heading reads as one phrase, and is a block
   so it takes its own line above the title text. */
.neda-hero-slide__badge {
    display: inline-block;
    margin: 0 0 12px;
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--nhs-lime);
    color: var(--nhs-black);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.02em;
    text-shadow: none;
}

.neda-hero-slide__title-text {
    display: block;
}

.neda-hero-slide__tagline {
    margin: 0 0 12px !important;
    color: var(--nhs-black) !important;
    font-size: clamp(16px, 0.95rem + 0.3vw, 19px);
    font-weight: 600;
    line-height: 1.4;
    text-shadow: none;
}

.neda-hero-slide__intro {
    max-width: none;
    margin: 0 0 20px !important;
    color: var(--nhs-black) !important;
    font-size: clamp(15px, 0.9rem + 0.25vw, 17px);
    line-height: 1.6;
    text-shadow: none;
}

/* The button: cyan fill, BLACK text at rest, cherry with white
   text on hover — the house button rule, and the same pair the
   editor's "Start Learning Free" resolves to in neda-header.css
   section 12. The 10px radius and 14/28 padding are that
   button's own. */
.neda-hero-slide__actions {
    display: flex;
    justify-content: flex-start;
    /* Pinned to the card's bottom whatever the copy above it measures. */
    margin: auto 0 0 !important;
}

.neda-hero-slide__btn,
.neda-hero-slider .neda-hero-slide__btn.wp-block-button__link {
    display: inline-block;
    /* The standard Neda button, to the pixel (user, 2026-09-06): the same
       declarations as the header's Log In -- 11px/20px padding, 14px bold,
       10px corners, lime with black text, no shadow -- so this and Log In
       measure the same 46px. A shadow and a larger size had made it read as
       a different, lighter button; the fill was identical all along. It
       stands out by being the only button on the slide. Cherry with white
       on hover, as every button. */
    /* Log In is an inline-flex box held at the header's control height,
       --nh-control, which the owner took to 40px on 2026-09-07 and then
       adopted platform-wide; the same here, in a literal because that token
       lives on the header. Inline-block at this padding measured 36px. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 8px 20px;
    border: 0;
    border-radius: var(--nhs-radius);
    background-color: var(--nhs-lime) !important;
    color: var(--nhs-black) !important;
    font-size: 14px;
    font-weight: 700;
    line-height: 14px;
    text-decoration: none;
    box-shadow: none;
    transition: background-color var(--nhs-ease), color var(--nhs-ease);
}

.neda-hero-slider .neda-hero-slide__btn.wp-block-button__link:hover,
.neda-hero-slider .neda-hero-slide__btn.wp-block-button__link:focus-visible {
    background-color: var(--nhs-cherry) !important;
    color: var(--nhs-white) !important;
}

/* ---- 3. The controls --------------------------------------
   All added by the script. Previous and next sit at the frame's
   vertical centre on the inline edges; the pause button and the
   dots sit together along the bottom. Every control is a 44px
   target, on a lime disc with a black glyph, cherry on hover,
   per the house button rule. */
.neda-hero-slider__nav {
    position: absolute;
    top: calc(50% - 22px);
    z-index: 3;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: var(--nhs-radius);
    background: var(--nhs-lime);
    color: var(--nhs-black);
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    transition: background-color var(--nhs-ease), color var(--nhs-ease);
}

.neda-hero-slider__nav--prev { inset-inline-start: clamp(10px, 2vw, 24px); }
.neda-hero-slider__nav--next { inset-inline-end: clamp(10px, 2vw, 24px); }

.neda-hero-slider__nav:hover,
.neda-hero-slider__nav:active {
    background: var(--nhs-cherry);
    color: var(--nhs-white);
}

/* The chevron, drawn rather than imaged — the same glyph the
   front-section arrows use, so the two cannot drift apart. The
   3px is optical centring; logical, so it follows the flip in
   RTL. */
.neda-hero-slider__nav span {
    width: 11px;
    height: 11px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
}

.neda-hero-slider__nav--prev span { transform: rotate(135deg); margin-inline-start: 3px; }
.neda-hero-slider__nav--next span { transform: rotate(-45deg); margin-inline-end: 3px; }

/* The bar along the bottom: pause/play, then one dot per slide. */
.neda-hero-slider__bar {
    position: absolute;
    inset-inline: 0;
    bottom: 22px;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 10px;
    pointer-events: none;
}

.neda-hero-slider__bar > * {
    pointer-events: auto;
}

.neda-hero-slider__toggle {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: var(--nhs-radius);
    background: var(--nhs-lime);
    color: var(--nhs-black);
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    transition: background-color var(--nhs-ease), color var(--nhs-ease);
}

/* The pause button is NOT SHOWN (removed from view 2026-09-04 by
   request). It is kept in the page for keyboard and screen-reader
   users - WCAG 2.2.2 needs a way to stop content that moves on its
   own, and hover only pauses for a pointer - so it is clipped to
   nothing until it receives keyboard focus, when it appears in its
   place at the start of the bar. Pointer users never see it. */
.neda-hero-slider__toggle:not(:focus-visible) {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    box-shadow: none;
}

.neda-hero-slider__toggle:hover,
.neda-hero-slider__toggle:active {
    background: var(--nhs-cherry);
    color: var(--nhs-white);
}

/* Two glyphs, drawn: a pause (two bars) and a play (a triangle).
   Whichever is not current is display:none, so the button's
   accessible name and its picture always agree. */
.neda-hero-slider__toggle span {
    display: block;
}

.neda-hero-slider__toggle .neda-hero-slider__glyph--pause {
    width: 12px;
    height: 14px;
    border-inline: 4px solid currentColor;
    box-sizing: border-box;
}

.neda-hero-slider__toggle .neda-hero-slider__glyph--play {
    width: 0;
    height: 0;
    border-block: 8px solid transparent;
    border-inline-start: 13px solid currentColor;
    margin-inline-start: 3px;
}

.neda-hero-slider__toggle[aria-pressed="false"] .neda-hero-slider__glyph--play,
.neda-hero-slider__toggle[aria-pressed="true"] .neda-hero-slider__glyph--pause {
    display: none;
}

/* The dots. A list of buttons, one per slide; the current one is
   the filled, wider pill. The whole button is the 44px target,
   the pill inside it is what is seen. */
.neda-hero-slider__dots {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
    column-gap: 2px;
}

.neda-hero-slider__dot {
    display: grid;
    place-items: center;
    width: 28px;
    height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.neda-hero-slider__dot span {
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.55);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
    transition: width var(--nhs-ease), background-color var(--nhs-ease);
}

.neda-hero-slider__dot:hover span {
    background: var(--nhs-white);
}

.neda-hero-slider__dot[aria-current="true"] span {
    width: 26px;
    background: var(--nhs-lime);
}

/* The cherry ring comes from neda-focus.css sitewide. Only the
   offset is restated here so the ring clears the lime disc. */
.neda-hero-slider__nav:focus-visible,
.neda-hero-slider__toggle:focus-visible,
.neda-hero-slider__dot:focus-visible {
    outline-offset: 2px;
}

/* ---- Phones -----------------------------------------------
   The arrows go: at 375px they sat on top of the intro text.
   Swipe, the dots and the arrow keys remain, which is how the
   front-section carousels behave at this width too. The type
   slides lose some of the top padding the editor's group
   carries, which on a narrow screen is mostly empty. */
@media (max-width: 700px) {
    .neda-hero-slider__nav {
        display: none;
    }

    /* No arrows to clear, so the card takes the full width and the
       slide's gutter drops back to the page's own. */
    .neda-hero-slide--type {
        padding: 40px var(--wp--preset--spacing--50, 24px) 84px;
    }

    .neda-hero-slide__inner {
        max-width: none;
        padding: 22px 22px 24px;
    }

    .neda-hero-slider__bar {
        bottom: 16px;
    }
}

/* ---- Reduced motion -----------------------------------------
   Nothing moves: the fade is cut, and the script reads the same
   query and does not start the timer. Slides still change on
   request. */
@media (prefers-reduced-motion: reduce) {
    .neda-hero-slider.is-neda-ready .neda-hero-slide,
    .neda-hero-slider.is-neda-ready .neda-hero-slide.is-active,
    .neda-hero-slider__nav,
    .neda-hero-slider__toggle,
    .neda-hero-slider__dot span,
    .neda-hero-slider .neda-hero-slide__btn.wp-block-button__link {
        transition: none;
    }
}

/* =========================================================================
   IT SLIDES, IT DOES NOT FADE                               (user, 2026-09-06)

   The slides were stacked in one grid cell and cross-faded, so a slide
   appeared where the last one had been. They are a row now, laid side by
   side, and the TRACK moves: the active index is handed to CSS as
   --nhs-i and the row translates by that many screen widths. The old
   opacity and visibility rules are overridden here rather than deleted, so
   the pre-script state above -- first slide only, no flex -- still holds
   until the script runs.

   `overflow: hidden` on the frame is what makes it a window rather than a
   very wide page.
   ========================================================================= */

.neda-hero-slider.is-neda-ready {
    overflow: hidden;
}

.neda-hero-slider.is-neda-ready .neda-hero-slider__track {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    will-change: transform;
    transform: translateX(calc(var(--nhs-i, 0) * -100%));
    transition: transform var(--nhs-fade) cubic-bezier(.4, 0, .2, 1);
}

/* The row runs the other way when the page does, so the movement follows
   the reading direction instead of fighting it. */
[dir="rtl"] .neda-hero-slider.is-neda-ready .neda-hero-slider__track {
    transform: translateX(calc(var(--nhs-i, 0) * 100%));
}

.neda-hero-slider.is-neda-ready .neda-hero-slide,
.neda-hero-slider.is-neda-ready .neda-hero-slide.is-active {
    grid-area: auto;
    flex: 0 0 100%;
    min-inline-size: 100%;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: none;
    z-index: auto;
}

@media (prefers-reduced-motion: reduce) {
    .neda-hero-slider.is-neda-ready .neda-hero-slider__track { transition: none; }
}

/* The hero's own bold runs take the same one pixel as the rest of the
   site; the slide title is an h2, but a two-class component rule outranks
   the sitewide one. */
/* The slide's button is out of this list and standard instead (user,
   2026-09-07); the title and the kicker keep half of what they had. */
.neda-hero-slider :is(
    .neda-hero-slide__title,
    .neda-hero-slide__kicker
) {
    letter-spacing: 0.5px;
}

.neda-hero-slider .neda-hero-slide__btn { letter-spacing: normal; }