/* ========================================
   SLAG BRAND - MOBILE OPTIMIZED CSS
   Colors: #242D7B (Navy) | #E32730 (Red)
   ======================================== */ 


/* ----------------------------------------
   DESKTOP: HERO SECTION WRAPPER
   The outer container holding the hero background image.
   Affects: the full-width banner image section at the top of the page (all pages).
   ---------------------------------------- */
.c411-home-hero {
    position: relative;
    min-height: 450px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important; background: none;
    overflow: hidden;
}

/* DESKTOP: Dark navy gradient overlay on top of the hero background image.
   Affects: the colour tint over the hero photo (desktop only).
   Change the rgba values to adjust darkness/colour of the overlay. */
.c411-home-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    background: linear-gradient(135deg, rgba(36, 45, 123, 0.75), rgba(36, 45, 123, 0.65));
    background: linear-gradient(110deg, rgb(36, 45, 123) 57%, rgba(36, 45, 123, 0.35) 57.2%);
}

/* DESKTOP: Inner content container inside the hero (holds the headline text).
   Affects: padding and max-width of the text area inside the hero banner. */
.c411-c-ctnr {
    position: relative;
    z-index: 2;
    padding: 60px 40px;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

/* DESKTOP: Hero headline/slogan text (h1 or h2 with class c411-c-slogan).
   Affects: the main headline text on ALL hero banners (desktop).
   NOTE: On mobile this is overridden further down in the @media block. */
.c411-c-slogan {
    color: white;
    font-size: 2rem !important;
    font-weight: 700;
    text-shadow: 0 3px 12px rgba(0, 0, 0, 0.5);
    max-width: 31ch !important;
    max-width: 50% !important;
    text-align: left;
    margin: 0;
    z-index: 9999;
}

/* DESKTOP: Sub-headline specifically when it's an h2 (smaller, lighter weight).
   Affects: the secondary line below the main hero headline (desktop). */
h2.c411-c-slogan {
    font-size: 1.25rem !important;
    /* max-width: inherit !important; */
    font-weight: normal !important;
    line-height: 1.4 !important;
}

/* Spacing for line breaks inside the hero headline text. */
.c411-c-slogan br {
    display: block;
    margin-bottom: 10px;
}

/* DESKTOP: Wrapper around the h1 + h2 hero headlines.
   Affects: vertical spacing between the main headline and sub-headline. */
.c411-home-hero-taglines {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}


/* ----------------------------------------
   LANDING PAGE CONTENT SECTIONS
   Affects: pages using the .c411-landingpage class (program/landing pages).
   ---------------------------------------- */

/* h2 headings on landing pages — navy blue colour. */
.c411-landingpage h2 {
    color: #242D7B;
}

/* Benefits section card container (rounded, spaced). */
.c411-landingpage .c411-landingpage-benefits {
    border-radius: 2rem;
    margin: 2rem 0 4rem;
}

.c411-landingpage .c411-landingpage-benefits>ul {
    gap: 2rem;
}

.c411-landingpage .c411-landingpage-benefits>ul>li {
    padding: 1rem 1.5rem;
}

/* Nested bullet list inside benefits cards (no default list styling). */
.c411-landingpage-benefits ul ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

/* Individual benefit bullet items — grey text. */
.c411-landingpage-benefits ul ul li {
    list-style: none;
    position: relative;
    padding-left: 28px;
    margin-bottom: 12px;
    font-size: 0.95rem;
    line-height: 1.5;
    color: #4b5563;
}

/* Red checkmark icon before each benefit bullet item. */
.c411-landingpage-benefits ul ul li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 2px;
    color: #E32730;
    font-weight: 700;
    font-size: 1.1rem;
}

.c411-landingpage-benefits ul ul li:last-child {
    margin-bottom: 0;
}

/* Hero inside a home-hero-container: image fits (contain) and sits to the right. */
.c411-home-hero-container .c411-home-hero {
    background-size: contain !important;
    background-position: right center !important;
}


/* ----------------------------------------
   DESKTOP ONLY (min-width: 769px)
   ---------------------------------------- */
@media (min-width: 769px) {
    /* On desktop, background image sits on .c411-home-hero, not .c411-c-ctnr. */
    .c411-home-hero {
        background-size: cover;
        background-position: center;
    }

    /* On desktop, strip any background image/colour from the inner content container
       (background is handled by the outer .c411-home-hero instead). */
    .c411-c-ctnr {
        background-image: none !important;
        background-color: transparent !important;
    }
}


/* ----------------------------------------
   TABLET ONLY (769px – 1024px)
   ---------------------------------------- */
@media (min-width: 769px) and (max-width: 1024px) {
    /* Slightly taller hero on tablet. */
    .c411-home-hero {
        min-height: 480px;
    }

    /* Slightly larger headline on tablet. */
    .c411-c-slogan {
        font-size: 2.2rem;
    }
}


/* ========================================
   MOBILE ONLY (max-width: 768px)
   All rules below only apply on phones/small screens.
   ======================================== */
@media (max-width: 768px) {

    /* Default h2 size and weight on mobile (all pages).
       Does NOT set colour here — colour is handled below by context. */
    h2 {
        font-size: 1.4rem;
        margin-bottom: 12px;
        font-weight: 600;
        line-height: 1.2;
    }

    /* h2 colour = navy blue on mobile.
       Applies to: h2 inside .c411-landingpage, and any h2 that is NOT itself a .c411-c-slogan.
       This ensures regular content headings are dark/readable on white backgrounds.
       NOTE: Hero slogans (.c411-c-slogan) have their own colour rules further below. */
    .c411-landingpage h2,
    :not(.c411-c-slogan) > h2 {
        color: #242D7B;
    }

    /* Default h3 size and weight on mobile. */
    h3 {
        font-size: 1.1rem;
        margin-bottom: 8px;
        font-weight: 600;
    }

    /* h3 colour = navy blue on mobile (same logic as h2 above). */
    .c411-landingpage h3,
    :not(.c411-c-slogan) > h3 {
        color: #242D7B;
    }

    /* Body paragraph text — grey, comfortable line height. */
    p {
        font-size: 1rem;
        line-height: 1.6;
        color: #4b5563;
    }

    /* Space between content sections on mobile. */
    section {
        margin-bottom: 48px;
    }


    /* ----------------------------------------
       MOBILE: FEATURES & BENEFITS LISTS
       Affects: the feature/benefit card grids on landing pages.
       ---------------------------------------- */
    .c411-landingpage-features ul,
    .c411-landingpage-benefits ul {
        display: flex;
        flex-direction: column;
    }

    .c411-landingpage-features ul li,
    .c411-landingpage-benefits ul li {
        width: 100%;
    }

    /* Features list: stacked cards with red left border. */
    .c411-landingpage-features ul {
        display: grid;
        gap: 20px;
        padding: 0;
        margin: 0;
    }

    .c411-landingpage-features ul>li {
        list-style: none;
        background: #f8f9fa;
        border-radius: 12px;
        padding: 20px;
        border-left: 4px solid #E32730;
        box-shadow: 0 2px 8px rgba(36, 45, 123, 0.08);
    }

    /* Feature card headings — navy. */
    .c411-landingpage-features h3 {
        font-size: 1.1rem;
        font-weight: 600;
        margin-bottom: 8px;
        color: #242D7B;
    }

    .c411-landingpage-features p {
        font-size: 0.95rem;
        line-height: 1.5;
        margin: 0;
        color: #4b5563;
    }

    /* Benefits list: white cards with shadow and border. */
    .c411-landingpage-benefits>ul {
        display: grid;
        gap: 20px;
        padding: 0;
        margin: 0;
    }

    .c411-landingpage-benefits>ul>li {
        list-style: none;
        background: #ffffff;
        border-radius: 12px;
        padding: 20px;
        box-shadow: 0 4px 12px rgba(36, 45, 123, 0.1);
        border: 1px solid #e5e7eb;
    }

    /* Benefit card headings — navy. */
    .c411-landingpage-benefits h3 {
        font-size: 1.1rem;
        font-weight: 600;
        margin-bottom: 12px;
        color: #242D7B;
    }

    /* Landing page h2 override: slightly larger and left-aligned on mobile. */
    .c411-landingpage h2 {
        font-size: 1.5rem !important;
        text-align: left !important;
    }


    /* ----------------------------------------
       MOBILE: HERO SECTION RESTRUCTURE
       On mobile the hero is rebuilt differently from desktop:
       - Background image moves from .c411-home-hero to .c411-c-ctnr
       - .c411-home-hero becomes a transparent shell
       - .c411-c-ctnr becomes the visible image container with its own overlay
       ---------------------------------------- */

    /* Strip background from outer hero wrapper on mobile (image moves to .c411-c-ctnr). */
    .c411-home-hero {
        background-image: none !important;
        background-color: transparent !important;
        min-height: 400px !important;
        flex-direction: column;
    }

    /* Remove the desktop overlay (::before) from .c411-home-hero on mobile. */
    .c411-home-hero::before {
        content: none !important;
        display: none !important;
    }

    /* On mobile, .c411-c-ctnr becomes the hero image container.
       It receives the background image via an inline style set by WordPress.
       Affects: the size and layout of the hero image area on mobile. */
    .c411-c-ctnr {
        position: relative !important;
        background-size: cover !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
        min-height: 400px !important;
        min-height: 40vh !important;
        padding-bottom: 3rem !important;
        display: flex !important;
        align-items: center !important;
        align-items: start !important;
        justify-content: center !important;
    }

    /* Semi-transparent navy overlay on top of the mobile hero image.
       Affects: how dark the tint over the background photo appears on mobile.
       Change the rgba opacity values (0.1 and 0.5) to make the overlay lighter or darker. */
    .c411-c-ctnr::before {
        content: '' !important;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100% !important;
        height: 100% !important;
        background: linear-gradient(180deg, rgba(36, 45, 123, 0.1), rgba(36, 45, 123, 0.5));
        z-index: 99;
    }


    /* ----------------------------------------
       MOBILE: HERO HEADLINE TEXT COLOUR
       Controls what colour the headline (h1/h2 with class c411-c-slogan) appears.

       DEFAULT: navy blue (#242D7B) — readable on light/white backgrounds.
       This applies to pages like Abbotsford (photo background) and any
       white-background pages using this template.

       EXCEPTION: Ontario hero pages use white text (see rule below)
       because their background is a solid dark navy colour.

       To add another page type that needs white text, add its container
       class to the exception rule below (same pattern as c411-ontario-hero-v2-static).
       ---------------------------------------- */

    /* DEFAULT: all hero slogans = navy blue on mobile. */
    .c411-c-slogan {
        position: relative !important;
        z-index: 100 !important;
        font-size: 1.75rem !important;
        max-width: 100% !important;
        text-align: left !important;
        margin: 0 !important;
        line-height: 1.2 !important;
        text-shadow: none;
        color: #242D7B !important;
    }

    /* EXCEPTION: Ontario-style hero pages have a dark navy background,
       so the headline needs to be white to be visible.
       Affects: pages using the Ontario hero template (e.g. studentloansandgrants.com homepage). */
    .c411-ontario-hero-v2-static .c411-c-slogan {
        color: #fff !important;
    }

    /* Padding around the taglines (h1 + h2) inside the mobile hero. */
    .c411-home-hero-taglines {
        padding: 1rem;
    }

    /* Benefits section: extend to full width (negative margin) on mobile. */
    .c411-landingpage .c411-landingpage-benefits {
        margin: 2rem -1.5rem 3rem !important; 
    }
}