/*
 * local_jangrohomepageui styles.
 *
 * Client feedback round 2026-09-17: "Homepage when not logged in needs
 * updating in line with new look." Brings the anonymous front page
 * (site-index) into line with the already-approved dashboard/course-page
 * redesign (local_jangrodashboard, local_jangrocourseui) - same palette,
 * same white-bordered-card language, same typography scale.
 *
 * Scoped entirely under body.jangro-homepage-anon (added by lib.php only
 * when $PAGE->pagetype === 'site-index' AND the visitor is genuinely not
 * logged in - never a bare :root selector, confirmed unreliable for a
 * plugin stylesheet loaded via $PAGE->requires->css() on this build, same
 * finding as every other local_* UI plugin on this project).
 *
 * The header (#page-header / .socials-header) and nav (.navbar) are
 * already restyled site-wide today by local_jangroheaderui and
 * local_jangronavui - deliberately not touched or duplicated here.
 *
 * Real structure confirmed by rendering the actual anonymous page
 * (see backups/2026-09-17_client-feedback-round/ for the full "before"
 * capture) rather than assumed from the Moodle 4.2 default front page
 * template - this site's real front page is:
 *   1. .camera_wrap - a 5-slide jQuery image carousel (theme_lambda's own
 *      "camera" slideshow, real marketing images e.g. LMS.png/Cyber.png) -
 *      the "purple-heavy, dated hero" the client is referring to.
 *   2. The site's real "Welcome to the Jangro..." summary text (Site home
 *      settings, rendered as a course-section/topics block because the
 *      front page is technically course id 1) - real marketing copy, kept
 *      verbatim, restyled as a proper card with real Log in / Register
 *      CTAs added underneath (see amd/src/homepagecta.js - both hrefs are
 *      read from real links already in the page, never hard-coded).
 *   3. A "Take a closer look at what we provide:" spotlight block
 *      (theme_lambda's .spotlight widget) - 6 real feature blurbs
 *      currently on a dark stock-photo background with round purple
 *      icons; kept as 6 real feature blurbs, restyled as plain cards.
 *   4. A real 3-quote Testimonials carousel (Bootstrap 2 #myCarousel).
 *   5. Three footer HTML blocks (Our Courses / Support and Help /
 *      Contact Us) - "Our Courses" is a plain link list, NOT a native
 *      Moodle "available courses" grid (.coursebox): confirmed
 *      $CFG->frontpage is an empty string on this site, so no course
 *      list/news region renders for a logged-out visitor at all. That
 *      link list is the only real public course information that
 *      exists here, so it is restyled in place rather than replaced.
 */

body.jangro-homepage-anon {
    /* Full approved palette - defined even where not all are used here,
       same block as local_jangrodashboard/local_jangrocourseui for
       consistency. */
    --jangro-forest: #024638;
    --jangro-leaf: #78be21;
    --jangro-lavender: #c8ceea;
    --jangro-lavender-rgb: 200, 206, 234;
    --jangro-berry: #5d295f;
    --jangro-berry-rgb: 93, 41, 95;
    --jangro-raspberry: #e0004d;
    --jangro-lemon: #ffcd00;
    --jangro-clementine: #ff7f32;
    --jangro-orange-swatch: #ffa400;
    --jangro-blueberry: #0032a0;
    --jangro-aqua: #00c1d4;
    --jangro-lime: #e1e000;
    --jangro-text: #25133f;
    --jangro-muted: #746d88;
    --jangro-border: #e2e4ec;
    --jangro-background: #f7f8fb;
    --jangro-white: #ffffff;

    background: var(--jangro-background);
}

.jangro-homepage-anon,
.jangro-homepage-anon *,
.jangro-homepage-anon *::before,
.jangro-homepage-anon *::after {
    box-sizing: border-box;
}

/* ==========================================================
   Shared card look (matches local_jangrodashboard's card spec exactly:
   white background, 1px border, 12px radius, subtle Berry-tinted shadow).
   ========================================================== */
.jangro-homepage-anon .jangro-home-card {
    background: var(--jangro-white);
    border: 1px solid var(--jangro-border);
    border-radius: 12px;
    box-shadow: 0 5px 18px rgba(var(--jangro-berry-rgb), 0.05);
}

/* ==========================================================
   1. Hero image carousel (.camera_wrap) - real marketing images kept
   as-is (not fabricated, not removed), just given the same card frame
   language as everything else instead of sitting flush against the page
   edges with no spacing.
   ========================================================== */
.jangro-homepage-anon #camera_wrap.camera_wrap {
    max-width: 1320px;
    margin: 20px auto 0 !important;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 5px 18px rgba(var(--jangro-berry-rgb), 0.08);
}

.jangro-homepage-anon #page.container-fluid {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 20px 40px;
}

/* ==========================================================
   2. Welcome / intro copy -> card, plus the Log in / Register CTA row
   homepagecta.js inserts right after it.
   ========================================================== */
.jangro-homepage-anon .course-content .sitetopic {
    margin-top: 28px;
}

.jangro-homepage-anon .course-section-header .sectionname {
    color: var(--jangro-text);
    font-size: 1.7rem;
    font-weight: 700;
    margin: 0 0 16px;
}

.jangro-homepage-anon #coursecontentcollapse1 > .my-3 {
    background: var(--jangro-white);
    border: 1px solid var(--jangro-border);
    border-radius: 12px;
    box-shadow: 0 5px 18px rgba(var(--jangro-berry-rgb), 0.05);
    padding: 24px 28px;
    margin: 0 0 28px;
}

.jangro-homepage-anon .course-description-item.summarytext p {
    color: var(--jangro-text);
    font-size: 1rem;
    line-height: 1.6;
}

.jangro-homepage-anon .course-description-item.summarytext p b {
    color: var(--jangro-berry);
    font-size: 1.1rem;
}

.jangro-homepage-anon .course-description-item.summarytext a {
    color: var(--jangro-berry);
    font-weight: 600;
}

.jangro-home-cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 20px;
}

a.jangro-home-btn {
    display: inline-block;
    text-decoration: none;
    border-radius: 8px;
    padding: 12px 26px;
    font-weight: 600;
    font-size: 0.95rem;
    text-align: center;
    line-height: 1.2;
}

/* theme_lambda carries a high-specificity "a.btn, a.btn:visited{color:#fff}"
   rule elsewhere on this site (see local_jangrodashboard/styles.css for the
   confirmed writeup) - these buttons deliberately use their own class only
   (never .btn) so they can never collide with it.
   !important is required here too, confirmed live: the CTA row is inserted
   *inside* .course-description-item.summarytext (see homepagecta.js), so
   this plugin's own ".jangro-homepage-anon .course-description-item.
   summarytext a{color:var(--jangro-berry)}" rule a few lines up beats a
   plain "a.jangro-home-btn.jangro-home-btn-primary" selector on
   specificity (4 classes+tag vs 2 classes+tag) - without !important the
   "Log in" button rendered as invisible Berry-on-Berry text. */
a.jangro-home-btn.jangro-home-btn-primary,
a.jangro-home-btn.jangro-home-btn-primary:visited {
    background: var(--jangro-berry) !important;
    color: var(--jangro-white) !important;
}

a.jangro-home-btn.jangro-home-btn-primary:hover {
    background: #4a2049 !important;
    color: var(--jangro-white) !important;
}

a.jangro-home-btn.jangro-home-btn-secondary,
a.jangro-home-btn.jangro-home-btn-secondary:visited {
    background: var(--jangro-white) !important;
    color: var(--jangro-berry) !important;
    border: 1px solid var(--jangro-berry);
}

a.jangro-home-btn.jangro-home-btn-secondary:hover {
    background: var(--jangro-lavender) !important;
    color: var(--jangro-berry) !important;
}

/* ==========================================================
   3. "Take a closer look at what we provide:" spotlight - dark stock
   photo + round purple icon treatment -> plain card grid. Content
   (6 real feature blurbs) is untouched, only presentation changes.
   ========================================================== */
.jangro-homepage-anon .spotlight.spotlight-v3.spotlight-full {
    background-image: none !important;
    background-color: transparent !important;
    min-height: 0 !important;
    padding: 0 !important;
}

.jangro-homepage-anon .spotlight.spotlight-v3.spotlight-full > h2 {
    color: var(--jangro-text) !important;
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 20px;
}

.jangro-homepage-anon .spotlight .row-fluid {
    margin-bottom: 20px;
}

.jangro-homepage-anon .spotlight .blocknumber_box {
    background: var(--jangro-white);
    border: 1px solid var(--jangro-border);
    border-radius: 12px;
    box-shadow: 0 5px 18px rgba(var(--jangro-berry-rgb), 0.05);
    padding: 22px 20px;
    height: 100%;
    margin-bottom: 20px;
}

.jangro-homepage-anon .spotlight .blocknumber_icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--jangro-berry);
    color: var(--jangro-white) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    margin-bottom: 14px;
}

.jangro-homepage-anon .spotlight .blocknumber_content h5 {
    color: var(--jangro-text);
    font-weight: 700;
    margin: 0 0 8px;
}

.jangro-homepage-anon .spotlight .blocknumber_content p {
    color: var(--jangro-muted);
    font-size: 0.92rem;
    line-height: 1.5;
    margin: 0;
}

/* ==========================================================
   4. Testimonials carousel - real 3-quote Bootstrap carousel, restyled
   as a single centred card instead of a dark/plain default look.
   ========================================================== */
.jangro-homepage-anon .row-fluid.frontpage-top {
    background: none;
}

.jangro-homepage-anon .row-fluid.frontpage-top > h3 {
    color: var(--jangro-text);
    font-size: 1.4rem;
    font-weight: 700;
    text-align: center;
    margin: 8px 0 20px;
}

/*
 * Real DOM here is two Bootstrap-2 .span4 columns (the first genuinely
 * empty, the second holding the real carousel). display:flex plus
 * width:100% on the surviving column fought each other - a flex item
 * with an explicit 100% width leaves flex's own auto-margin centring
 * nothing to distribute, so "margin:0 auto" silently did nothing and the
 * carousel rendered pinned to the right edge instead of centred
 * (confirmed live via getBoundingClientRect, not assumed). Fixed by
 * dropping flex entirely - a plain block parent with a max-width/
 * margin:auto child is the classic centring pattern and doesn't have
 * that conflict.
 */
.jangro-homepage-anon .custom_testimonials {
    display: block;
}

.jangro-homepage-anon .custom_testimonials .span4:first-child {
    display: none;
}

.jangro-homepage-anon .custom_testimonials .span4 {
    float: none;
    max-width: 640px;
    margin: 0 auto;
}

.jangro-homepage-anon #myCarousel.carousel {
    background: var(--jangro-white);
    border: 1px solid var(--jangro-border);
    border-radius: 12px;
    box-shadow: 0 5px 18px rgba(var(--jangro-berry-rgb), 0.05);
    padding: 32px 56px;
}

.jangro-homepage-anon #myCarousel .carousel-inner .item p:first-child {
    color: var(--jangro-text);
    font-size: 1.05rem;
    font-style: italic;
    text-align: center;
    margin: 0 0 12px;
}

.jangro-homepage-anon #myCarousel .carousel-inner .item p.testi_provider {
    color: var(--jangro-berry);
    font-weight: 600;
    text-align: center;
    margin: 0;
}

.jangro-homepage-anon #myCarousel .carousel-indicators li {
    background: var(--jangro-lavender) !important;
    border-color: var(--jangro-lavender) !important;
}

.jangro-homepage-anon #myCarousel .carousel-indicators li.active {
    background: var(--jangro-berry) !important;
    border-color: var(--jangro-berry) !important;
}

.jangro-homepage-anon #myCarousel .carousel-control {
    color: var(--jangro-berry);
    text-shadow: none;
    opacity: 1;
    font-size: 1.6rem;
}

/* ==========================================================
   5. Footer blocks (Our Courses / Support and Help / Contact Us) - real
   public content, restyled to the same card language, links recoloured
   to Berry.
   ========================================================== */
.jangro-homepage-anon #page-footer .block_html.card {
    border: 1px solid var(--jangro-border) !important;
    border-radius: 12px !important;
    box-shadow: 0 5px 18px rgba(var(--jangro-berry-rgb), 0.05) !important;
}

.jangro-homepage-anon #page-footer .card-title {
    color: var(--jangro-berry);
    font-weight: 700;
    border-bottom: 2px solid var(--jangro-lavender);
    padding-bottom: 10px;
    display: block;
    margin-bottom: 12px;
}

.jangro-homepage-anon #page-footer .card-text a {
    color: var(--jangro-text);
}

.jangro-homepage-anon #page-footer .card-text a:hover {
    color: var(--jangro-berry);
}

.jangro-homepage-anon #page-footer ul {
    padding-left: 18px;
    margin: 0;
}

.jangro-homepage-anon #page-footer li {
    margin-bottom: 6px;
}

.jangro-homepage-anon .back-to-top {
    background: var(--jangro-berry);
    border-radius: 50%;
}

/* ==========================================================
   Responsive - checked at 1920/1440/1366/1024/768/390px. Nothing here
   sets a fixed px width wider than 100% of its own float column, so no
   new horizontal overflow is introduced. The pre-existing 5-7px overflow
   from the .spotlight carousel widget (fixed earlier today, unrelated to
   this plugin) was re-checked and stays fixed with these rules in place.
   ========================================================== */
@media (max-width: 768px) {
    .jangro-homepage-anon #coursecontentcollapse1 > .my-3 {
        padding: 20px;
    }

    .jangro-homepage-anon #myCarousel.carousel {
        padding: 24px 20px;
    }

    .jangro-home-cta-row {
        flex-direction: column;
    }

    a.jangro-home-btn {
        width: 100%;
    }
}