/* =========================================================
   NEDA eCAMPUS — COURSE TYPES
   v1.0 (2026-08-03)

   Loaded by neda-ecampus-ui on the five course-type pages only.
   Paired with src/CourseTypes.php, which holds the single table
   of colour, hero and tagline per type and injects the markup
   these rules style.

   ONE COLOUR PER TYPE

     Audio Pro     Cherry Red        #D7263D
     Live Class    Royal Purple      #6A4C93
     Flex Learn    Primary Cyan      #0EC4C5
     Skill Bites   Professional Blue #2F80ED
     Quest Lab     Golden Yellow     #F2B705

   Each icon was already drawn in one of the eight brand
   colours, so the page tint is an ALPHA of that same colour —
   never a new hue, and the strict palette rule survives.

   WHERE THE COLOUR IS ALLOWED TO GO
     Fills, accent bars, borders, washes.
   WHERE IT IS NOT
     Text. Cyan on white is 2.6:1 and Golden Yellow is 1.9:1,
     both far below the 4.5:1 minimum, so every label on these
     pages is BLACK regardless of type. The colour identifies
     the page; it never has to be read.
   ========================================================= */


/* =========================================================
   1. THE HERO

   The theme already prints the page title inside a full-width
   band at the top of these pages. That band becomes the hero
   rather than being hidden and replaced: PHP wraps the title in
   .neda-ct-hero-inner and adds the tagline and the icon, and
   the rules below turn it into a photograph with a veil.

   The 40% black veil is a pseudo-element rather than a second
   background layer, so the photograph can keep `cover` sizing
   without the veil being scaled with it.
   ========================================================= */

/* The page gutter.
   MEASURED off the main element rather than assumed: it is
   clamp(30px, 5vw, 50px) — 30px up to 600px wide, then 5vw, capped
   at 50px from 1024px up. Note this is NOT the header's gutter,
   which floors at 15px; matching the header here would have left
   the hero title 15px inboard of the body copy on every phone. */
body.neda-course-type {
    --neda-ct-gutter: clamp(30px, 5vw, 50px);
}

/* Strip the band's own light background and padding — the hero
   inside it brings its own. :has() is only used for this tidy-up,
   so a browser without it still shows a correct hero, just inside
   a padded light band. */
body.neda-course-type main > .wp-block-group:has(> .neda-ct-hero-inner) {
    padding: 0 !important;
    background: none !important;
}

.neda-ct-hero-inner {
    position: relative;
    isolation: isolate;

    /* The title sits LOW in the frame, not centred in it: the
       photographs all have their subject in the upper two thirds,
       and a centred title landed on top of it. flex-end plus a
       generous bottom padding gives the picture room to be a
       picture and still leaves the words on solid dark ground. */
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    min-height: clamp(340px, 44vw, 560px);
    padding: clamp(40px, 6vw, 80px) var(--neda-ct-gutter) clamp(36px, 4.5vw, 64px);
    overflow: hidden;

    background-color: #000000;
    background-image: var(--neda-ct-hero);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    /* Undo the constrained-layout cap WordPress puts on every child
       of an .is-layout-constrained group, so the hero runs edge to
       edge like the band it replaced. Same rule that once capped the
       injected VANTA layer at 1200px inside a full-bleed section. */
    max-width: none !important;
    margin: 0 !important;
}

/* The veil. 40% black, as briefed. */
.neda-ct-hero-inner::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-color: rgba(0, 0, 0, 0.4);
    pointer-events: none;
}

/* The per-type colour wash was REMOVED on 2026-08-03: the five pages
   now follow the front page's palette instead of each carrying its
   own hue. The 40% black veil is the only thing over the photograph. */

/* The words sit on the same 1200px measure as everything else on
   the site, so the title starts on the same line as the logo above
   it rather than floating in from the edge. */
.neda-ct-hero-text {
    width: 100%;
    max-width: 1200px;
    margin-inline: auto;
    text-align: start;
}

/* The title is the theme's own h1 block; only its colour and
   alignment change. Its clamp() sizing is left alone. */
body.neda-course-type .neda-ct-hero-inner .wp-block-post-title {
    margin: 0 !important;
    color: #FFFFFF !important;
    text-align: start !important;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45);
}

.neda-ct-tagline {
    margin: 14px 0 0 !important;
    color: #FFFFFF !important;
    font-size: clamp(16px, 1.15vw, 20px);
    font-weight: 600;
    line-height: 1.5;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
}

/* The hero icon was REMOVED on 2026-08-03. A 148px disc floating on
   the photograph competed with the title instead of supporting it.
   The icons stay on the front-page cards (section 4), where they sit
   on the edge of the photograph and read as a label. */


/* =========================================================
   2. THE PAGE BODY

   Measured copy, and the "Designed for" answer lifted out of
   the paragraph flow into something you can find by scanning.
   ========================================================= */

/* ---- The measure -----------------------------------------
   The page template wraps post content in a WHITE CARD capped at
   the theme's content size — 720px, with a 1px border and 30px of
   side padding — sitting on a light band. That card, not the post
   content, is what squeezed these pages into a 658px column while
   the front page breathes at 1200px, and its border is the thin
   line that appeared down the left of the copy.

   The card is opened to the front page's 1200px measure and its
   chrome removed, so the content sits on the band the way front-page
   sections sit on the page. Everything inside then has room, and the
   courses section fills the full measure instead of a third of it. */

/* The card spans the whole of main's content box now, NOT 1200px.
   That is what lets the courses section reach the window edge: from
   inside the card, cancelling the page gutter is a single exact
   negative margin, with no viewport units and so no scrollbar
   overshoot. The 1200px measure moves down to the children that
   actually want it. */
body.neda-course-type
main > .wp-block-group > .wp-block-group.has-white-background-color {
    max-width: none !important;
    background-color: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding-inline: 0 !important;
    padding-block: 0 !important;
}

/* The band and the card each brought their own top padding — 60px and
   30px — which stacked into ~90px of nothing between the hero and the
   search bar. Both are zeroed; the search bar's own margin is the only
   spacing above it now, and the band keeps its padding at the bottom
   so the courses section is not flush against the footer. */
body.neda-course-type main > .wp-block-group:not(:has(> .neda-ct-hero-inner)) {
    padding-top: 0 !important;
}

body.neda-course-type .entry-content {
    max-width: none !important;
}

/* The intro is a DESCENDANT, not a direct child: the editor wraps the
   copy in a group, and the grid is built inside that group so the
   wrapper is never split. That group is itself capped at the theme's
   content size, which squeezed the two columns to ~560px — so it is
   uncapped here too. */
body.neda-course-type .entry-content > .wp-block-group:has(.neda-ct-intro) {
    max-width: none !important;
}

body.neda-course-type .entry-content .neda-ct-intro,
body.neda-course-type .entry-content > form.wp-block-search,
body.neda-course-type .entry-content > h2,
body.neda-course-type .entry-content > h3,
body.neda-course-type .entry-content > ul,
body.neda-course-type .entry-content > ol {
    width: 100%;
    max-width: 1200px;
    margin-inline: auto;
    box-sizing: border-box;
}

/* The search bar under the hero.
   Section 17 of neda-header.css carries every rule that gives it its
   shape - the 384px cap, the end alignment, the RTL mirroring - and
   that block is shared verbatim between the front page and these
   pages, so the two cannot drift apart. The only difference is here:
   the page gutter has already been applied by the card, so the bar
   must not subtract it a second time. */
body.neda-course-type .entry-content > form.wp-block-search {
    width: 100% !important;
    margin-block: clamp(20px, 3vw, 36px) 0 !important;
}

/* ---- Prose and the box, side by side ---------------------
   The two blocks used to stack, which left a very wide measure
   for the copy and an even wider one for the box. As two
   columns the prose gets a readable line length and the box
   reads as an aside rather than as another paragraph.

   `align-items: start` keeps the box at the top of its column
   instead of stretching it to match the prose. */

/* The white panel.
   It sits behind the intro ONLY — the prose and the box together —
   rather than washing the whole band, so the animated background
   stays visible around it and the copy still has a plain surface
   to be read on. The "Designed for" box then sits on top of this
   panel rather than directly on the animation. */

.neda-ct-intro {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    align-items: start;
    gap: clamp(28px, 4vw, 56px);
    margin-block: clamp(32px, 4.5vw, 64px);

    padding: clamp(28px, 3.5vw, 52px);
    background-color: #FFFFFF;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    box-sizing: border-box;
}

/* One column on anything narrower than a small laptop: two
   columns of prose on a tablet would be about 40 characters
   each, which is worse than stacking. */
@media (max-width: 899px) {
    .neda-ct-intro {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }
}

.neda-ct-intro__text > p {
    font-size: clamp(16px, 1.05vw, 18px);
    line-height: 1.75;
    color: #000000;
}

/* First paragraph reads as a standfirst. */
.neda-ct-intro__text > p:first-of-type {
    margin-top: 0;
    font-size: clamp(18px, 1.35vw, 23px);
    font-weight: 600;
    line-height: 1.55;
}

.neda-ct-intro__text > p:last-of-type {
    margin-bottom: 0;
}

/* The courses section runs edge to edge.
   With the card no longer capped at 1200px, the only thing between
   this block and the window is main's own gutter, so one negative
   margin cancels it exactly. No 100vw: that includes the scrollbar
   and would overhang the page by ~15px. */

body.neda-course-type .entry-content > .alignfull {
    width: auto;
    max-width: none;
    margin-inline: calc(-1 * var(--neda-ct-gutter));
}

/* ---- The "Designed for" box ------------------------------
   Tinted with the type's colour and edged with it, but the
   label and the copy stay black: see the contrast note at the
   top of this file. color-mix keeps the tint honest — it is
   literally the brand colour at 8% over white — and the plain
   colour above it is the fallback for anything that cannot do
   color-mix. */

/* The front page's card surface, not a per-type tint: pale cyan at
   rest, pale lime on hover — exactly the two surfaces the "Why
   Choose" cards use in section 13 of neda-header.css. No border and
   no shadow; on the white panel the tint alone separates it. */
.neda-ct-designed-for {
    margin: 0;
    padding: clamp(20px, 2.4vw, 28px) clamp(20px, 2.6vw, 32px);
    border: 0;
    border-radius: 12px;
    background-color: #ECF9F8;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

/* Pale lime and a slight lift on hover — the same move the front
   page's "Why Choose" cards make, at a smaller scale because this
   box is bigger than they are. */
.neda-ct-designed-for:hover {
    background-color: #F1F3D6;
    transform: scale(1.02);
}

@media (prefers-reduced-motion: reduce) {
    .neda-ct-designed-for {
        transition: none;
    }

    .neda-ct-designed-for:hover {
        transform: none;
    }
}

.neda-ct-designed-for__label {
    margin: 0 0 6px !important;
    max-width: none !important;
    color: #000000 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.neda-ct-designed-for__body {
    margin: 0 !important;
    max-width: none !important;
    color: #000000 !important;
    font-size: clamp(16px, 1.05vw, 18px) !important;
    font-weight: 400 !important;
    line-height: 1.7 !important;
}


/* =========================================================
   3. THE COURSES SECTION

   The theme's "Popular Courses" pattern, brought into the Neda
   card language: 12px corners, no hairline border, a soft
   shadow that deepens on hover, and the section itself washed
   with the type's colour so it belongs to this page.
   ========================================================= */

/* The front page's own section surface, the same pale lime the
   Ecosystem band uses — no longer a per-type tint. */
body.neda-course-type .entry-content > .wp-block-group.has-bg-light-background-color {
    background-color: #F8F9EA !important;
    padding-block: clamp(48px, 6vw, 80px) !important;
}

/* ---- The cyan copy ---------------------------------------
   Same defect as the front-page feature cards: the theme resolves
   its own `text-gray` preset to Primary Cyan, so course titles,
   instructor names, ratings and levels were all rendering in cyan
   on white — 2.6:1, and the reason the section looked unfinished
   next to the front page. Forced black, exactly as section 13 of
   neda-header.css does for the "Why Choose" cards. */

body.neda-course-type
.entry-content
.wp-block-group.has-bg-light-background-color
:is(p, h2, h3, h4, h5, h6, li, span, a) {
    color: #000000 !important;
}

/* The section's own eyebrow pill keeps its shape, just not its
   unreadable colour. */
body.neda-course-type
.entry-content
.wp-block-group.has-bg-light-background-color
svg {
    fill: currentColor;
}

body.neda-course-type
.entry-content
.wp-block-columns
> .wp-block-column.has-white-background-color {
    border: 0 !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    overflow: hidden;
}

body.neda-course-type
.entry-content
.wp-block-columns
> .wp-block-column.has-white-background-color:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.14);
}

/* The course thumbnails square off against the new corner. */
body.neda-course-type
.entry-content
.wp-block-columns
> .wp-block-column.has-white-background-color img {
    border-radius: 0 !important;
}

@media (prefers-reduced-motion: reduce) {
    body.neda-course-type
    .entry-content
    .wp-block-columns
    > .wp-block-column.has-white-background-color {
        transition: none;
    }

    body.neda-course-type
    .entry-content
    .wp-block-columns
    > .wp-block-column.has-white-background-color:hover {
        transform: none;
    }
}


/* ---- The Buy Now buttons ---------------------------------
   The pattern ships them as lime OUTLINE buttons, and the label
   is wrapped in a `mark` carrying `has-primary-color` — which is
   Primary Lime. Once the button took a lime fill the label was
   lime on lime: not merely low-contrast but INVISIBLE, which is
   what the empty-looking buttons in the reference were.

   A mark carries its own colour that no rule on the link can
   reach, so it is targeted directly here — the same trap as the
   second hero button on the front page.

   House rule: lime fill, black bold label, cherry with white on
   hover, 10px corners. */

body.neda-course-type
.entry-content
.wp-block-group.has-bg-light-background-color
.wp-block-button__link mark {
    background-color: transparent !important;
    color: #000000 !important;
    font-weight: 700 !important;
}

body.neda-course-type
.entry-content
.wp-block-group.has-bg-light-background-color
.wp-block-button__link:hover mark,
body.neda-course-type
.entry-content
.wp-block-group.has-bg-light-background-color
.wp-block-button__link:focus-visible mark {
    color: #FFFFFF !important;
}

body.neda-course-type
.entry-content
.wp-block-group.has-bg-light-background-color
.wp-block-button__link {
    background-color: #C4C40E !important;
    border: 0 !important;
    border-radius: var(--nh-radius, 10px) !important;
    color: #000000 !important;
    font-weight: 700 !important;
    padding: 12px 26px !important;
    transition: background-color 0.15s ease, color 0.15s ease;
}

body.neda-course-type
.entry-content
.wp-block-group.has-bg-light-background-color
.wp-block-button__link:hover,
body.neda-course-type
.entry-content
.wp-block-group.has-bg-light-background-color
.wp-block-button__link:focus-visible {
    background-color: #D7263D !important;
    color: #FFFFFF !important;
}


/* =========================================================
   4. THE ANIMATED BACKGROUND

   The same VANTA.NET network as the Moodle site and the
   Keycloak login — cyan lines on white, canvas faded to 50% —
   mounted behind the band that holds the page body and the
   courses section. assets/neda-vanta.js finds that band from
   the content and adds .neda-ct-vanta-section to it.

   Every rule here is inert until the script applies that class,
   so a blocked or failed script leaves the band exactly as it
   is: reduced-motion, no WebGL and any init error all fall back
   silently.
   ========================================================= */

.neda-ct-vanta-section {
    position: relative;
    isolation: isolate;
}

#ne-vanta-ct {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;   /* every click and scroll goes to the content */
    background: #FFFFFF;    /* solid white behind the faded canvas */

    /* The band is .is-layout-constrained, and WordPress caps EVERY child
       of such a group at the content size and auto-centres it — including
       an absolutely positioned injected layer. Both halves of that rule
       are undone so the layer spans the band edge to edge. */
    max-width: none !important;
    margin: 0 !important;
}

/* Fade the lines to ~50%, exactly as on Moodle. VANTA.NET has no
   line-opacity option, so the canvas itself is faded — and because the
   layer behind it is the same white the canvas paints, the fill stays
   solid white while only the cyan lines drop to half. */
#ne-vanta-ct canvas {
    opacity: 0.5 !important;
}

/* Lift the real content above the layer. */
.neda-ct-vanta-section > *:not(#ne-vanta-ct) {
    position: relative;
    z-index: 1;
}

/* The band's own tint would sit on top of the animation, so it steps
   aside and lets the effect be the background. The courses section
   inside keeps its own tint, which is what carries the type colour. */
.neda-ct-vanta-section {
    background-color: transparent !important;
}


/* =========================================================
   5. REMOVED — the front-page card badges

   The five icons used to sit as white discs on the edge of each
   ecosystem card photograph. Removed 2026-08-03 at the user's
   request, together with the PHP that tagged the cards. This
   file no longer loads on the front page at all.

   `git log -- assets/neda-course-types.css` has the rules if
   they are ever wanted back.
   ========================================================= */

   The same five icons, as white discs straddling the line
   where each card's photograph meets its white body, exactly
   the arrangement in the reference images.

   The disc is a background on a pseudo-element, not an img,
   because it is decorative: the card's own title names the
   type immediately beside it, and a second announcement would
   only make a screen reader say "Audio Pro" twice.

   data-neda-ct is written by PHP from the card's heading text,
   not from its position, so the icons survive someone
   reordering the cards in the Site Editor.
   ========================================================= */