/* Root variables for colour palette and fonts */
:root {
    --primary-dark: #2f6690;      /* dark blue for nav bar and headings */
    --primary-light: #eaf3fb;     /* light blue for backgrounds */
    --secondary-green: #b7e36d;   /* soft green accent */
    --accent-yellow: #ffd230;     /* warm yellow accent */
    --accent-orange: #f06430;     /* bright orange for calls to action */
    --text-dark: #333333;         /* dark gray for body text */
    /* User-provided watercolor splash pattern */
    --background-pattern: url('assets/user-pattern.png');
    /* Control the width of the left side of the hero section so subsequent sections can align with it */
    /* The width of the hero overlay panel; used to align subsequent sections */
    --hero-left-width: 42%;
    --container-width: 1200px;
}

body {
    margin: 0;
    font-family: 'Poppins', sans-serif;
    color: var(--text-dark);
    background: #fff;
    line-height: 1.6;
    /* Prevent horizontal scrolling */
    overflow-x: hidden;
}

/* Prevent horizontal scrolling on the root html element as well */
html {
    overflow-x: hidden;
}

/* Navigation bar */
.nav {
    background: var(--primary-dark);
    color: #fff;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.nav-container {
    max-width: var(--container-width);
    margin: 0 auto;
    display: flex;
    align-items: center;
    /* Remove space-between so we can centre the nav links and align the logo and action buttons */
    padding: 1rem 1.5rem;
}

/* Assign flexible widths to each part of the nav bar.  The logo occupies the left third,
   the navigation links occupy the middle, and the action buttons occupy the right. */
.nav-container .logo {
    flex: 1;
    display: flex;
    align-items: center;
}

.nav-container .nav-links {
    /* Give the nav links a bit more breathing room to the right so the
       action buttons don't appear too far away.  We also shift the
       entire group slightly right using margin‑left. */
    flex: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2.5rem;
    margin-left: 1rem;
}

.nav-container .nav-actions {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.75rem;
}

.logo-text {
    font-family: 'Baloo 2', cursive;
    font-size: 2rem;
    color: var(--secondary-green);
    /* Add a small margin so the primary nav links don't sit directly next to the logo */
    margin-right: 2rem;
    /* Remove underline for the logo text by default */
    text-decoration: none;
}

/* Ensure the logo text inherits the same hover interaction as links */
.logo-text:hover {
    /* Keep the logo looking consistent on hover without changing its colour
       and remove any underline */
    text-decoration: none;
    color: var(--secondary-green);
}

/* Navigation links container (left side of the nav bar) */
.nav-links {
    display: flex;
    align-items: center;
}

/* Base styling for navigation links */
.nav-links a {
    /* Remove the right margin to rely on the gap defined in the container */
    margin-right: 0;
    /* Use warm yellow as the default colour for nav links as seen in the reference */
    color: var(--accent-yellow);
    /* Remove underlines by default */
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease, font-weight 0.2s ease, text-decoration 0.2s ease;
}

/* On hover, highlight navigation links in warm yellow and make them bold */
.nav-links a:hover {
    /* On hover, shift to orange and emphasise with bold weight, still no underline */
    color: var(--accent-orange);
    font-weight: 600;
    text-decoration: none;
}

/* Active nav link styling */
.nav-links a.active {
    color: var(--secondary-green);
    font-weight: 600;
}

/* Container for action buttons (right side of the nav bar) */
.nav-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* Base style for nav action buttons */
.nav-btn {
    display: inline-block;
    padding: 0.5rem 1rem;
    border-radius: 999px;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    font-size: 0.9rem;
}

/* Log in button: outlined style similar to the secondary button in the hero */
/* Log in button: match the style of the primary hero button. Default orange with white text;
   on hover, switch to soft green with dark text. */
.login-btn {
    /* Outline style: green border, no fill */
    background: transparent;
    color: var(--secondary-green);
    border: 2px solid var(--secondary-green);
}

.login-btn:hover {
    /* On hover, fill with green and switch text to the dark nav bar colour */
    background: var(--secondary-green);
    border-color: var(--secondary-green);
    color: var(--primary-dark);
}

/* Report a Tip button in nav: green by default, turns orange on hover */
.report-btn {
    /* Outline style: orange border, no fill */
    background: transparent;
    color: var(--accent-orange);
    border: 2px solid var(--accent-orange);
}

.report-btn:hover {
    /* On hover, fill with orange and use white text */
    background: var(--accent-orange);
    border-color: var(--accent-orange);
    color: #fff;
}

/* Buttons */
.btn {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    border-radius: 999px;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.btn.primary {
    background: var(--accent-orange);
    color: #fff;
}

.btn.primary:hover {
    /* On hover, switch the primary button to the soft green accent so the text doesn't blend with the background */
    background: var(--secondary-green);
    color: var(--primary-dark);
}

.btn.secondary {
    border: 2px solid var(--accent-orange);
    color: var(--accent-orange);
    background: transparent;
}

.btn.secondary:hover {
    /* On hover, switch the secondary button to the soft green accent for a subtle highlight */
    background: var(--secondary-green);
    border-color: var(--secondary-green);
    color: var(--primary-dark);
}

/* Outline button that starts green and shifts to orange on hover (used for See How It Works and Contact Our Team) */
.btn-green-orange {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    border-radius: 999px;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    border: 2px solid var(--secondary-green);
    color: var(--secondary-green);
    background: transparent;
    font-size: 1rem;
}

/* Darker green outline variant for contact buttons on light backgrounds.  It
   still turns orange with white text when hovered. */
.btn-green-orange.contact-btn {
    border-color: var(--primary-dark);
    color: var(--primary-dark);
}

.btn-green-orange.contact-btn:hover {
    background: var(--accent-orange);
    border-color: var(--accent-orange);
    color: #fff;
}

.btn-green-orange:hover {
    background: var(--accent-orange);
    border-color: var(--accent-orange);
    color: #fff;
}

/* Reset hero overlay styles.  These were used in an earlier design and are no longer applied.
   See the new hero, hero-left and hero-right rules below for the updated layout. */

/* Section base styling */
section {
    width: 100%;
    padding: 4rem 1rem;
    /* Each section becomes a new stacking context so that backgrounds and content don't overlap across sections */
    position: relative;
    isolation: isolate;
}

.section-inner {
    max-width: var(--container-width);
    margin: 0 auto;
}

/* Student experience section */
.student-experience {
    /* Use a very light blue backdrop so the feature cards blend into the section */
    background: var(--primary-light);
    /* Provide equal top and bottom spacing so this section doesn't sit flush against its neighbours */
    padding: 4rem 1rem;
    /* Eliminate top margin so any spacing comes from padding rather than gaps */
    margin-top: 0;
}

/* Align the content of student-experience and how-cta sections with the right edge of the hero overlay. */
/* Align the student experience and how/cta sections with the left margin of the page.  We no longer offset
   these sections by the width of the hero panel. */
/* On larger screens, give the inner wrappers full width and padding so their content
   aligns with the hero overlay.  The Student Experience and how/CTA sections no
   longer constrain themselves to the container width but instead span the page. */
.student-experience .section-inner {
    width: 100%;
    max-width: var(--container-width);
    /* centre the content by auto margins to create equal space on the left and right */
    margin-left: auto;
    margin-right: auto;
    padding-left: 3rem;
    padding-right: 3rem;
}

.how-cta-section .how-cta-inner {
    width: 100%;
    max-width: var(--container-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: 3rem;
    padding-right: 3rem;
}

@media (max-width: 900px) {
    .student-experience .section-inner,
    .how-cta-section .how-cta-inner {
        margin-left: 0;
        max-width: var(--container-width);
    }
}

.student-experience h2 {
    font-size: 2rem;
    color: var(--primary-dark);
    margin-top: 0;
    margin-bottom: 1rem;
}

.student-experience p {
    font-size: 1rem;
    margin-bottom: 1.5rem;
}

.student-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.5rem 1rem;
    margin-bottom: 1rem;
}

.student-item {
    position: relative;
    padding-left: 1.5rem;
    font-weight: 500;
}

.student-item::before {
    content: '';
    position: absolute;
    top: 0.4rem;
    left: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-orange);
}

.student-note {
    font-weight: 600;
    margin-top: 1.5rem;
}

/* Info carousel styling */
.info-carousel {
    background: var(--primary-light);
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    /* Reduce vertical padding to minimise white space */
    padding: 2rem 0;
    /* Hide overflow so only one slide is visible at a time */
    overflow: hidden;
}

.info-slider {
    display: flex;
    transition: transform 0.6s ease;
    /* Remove horizontal padding so slides align flush with the edges */
    padding: 0;
}

.info-slide {
    /* Display four cards in a flexible row.  Each slide still occupies the full width of the slider. */
    display: flex;
    flex: 0 0 100%;
    max-width: 100%;
    padding: 2rem 3rem;
    box-sizing: border-box;
    justify-content: space-between;
    gap: 1.5rem;
}

.carousel-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1rem;
    /* Give each item a card-like appearance */
    background: #ffffff;
    border-radius: 16px;
    padding: 1rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    /* Each card should take up equal space within the slide */
    flex: 1;
}

.icon-container {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    /* Use a white background for icon circles when sitting on coloured cards */
    background: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

.icon-container img {
    max-width: 40px;
    max-height: 40px;
    display: block;
}

.carousel-content h3 {
    margin: 0;
    font-size: 1.25rem;
    color: var(--primary-dark);
}

.carousel-content p {
    margin-top: 0.5rem;
    font-size: 0.95rem;
    color: var(--text-dark);
}

.carousel-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1rem;
    gap: 1rem;
}

.carousel-prev,
.carousel-next {
    background: transparent;
    border: 2px solid var(--accent-orange);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    color: var(--accent-orange);
    font-size: 1.5rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.carousel-prev:hover,
.carousel-next:hover {
    background: var(--accent-orange);
    color: #fff;
}

.carousel-indicators {
    display: flex;
    gap: 0.5rem;
}

.indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(0,0,0,0.2);
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.indicator.active {
    background: var(--accent-orange);
}

/* How it works section; use pattern background swapped with CTA in earlier revisions */
.how-it-works {
    background-image: linear-gradient(rgba(255,255,255,0.85), rgba(255,255,255,0.85)), var(--background-pattern);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.how-it-works h2 {
    color: var(--primary-dark);
    font-size: 2rem;
    margin-bottom: 1rem;
}

.how-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 0.75rem 1rem;
}

.how-item {
    position: relative;
    padding-left: 1.5rem;
    font-weight: 500;
}

.how-item::before {
    content: '';
    position: absolute;
    top: 0.4rem;
    left: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-orange);
}

.how-note {
    font-weight: 600;
    margin-top: 1.5rem;
}

/* CTA section uses pattern as well to stand out */
.cta-section {
    background-image: linear-gradient(rgba(255,255,255,0.85), rgba(255,255,255,0.85)), var(--background-pattern);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    text-align: center;
    padding-bottom: 3rem;
}

.cta-section h2 {
    font-size: 2rem;
    color: var(--primary-dark);
    margin-bottom: 1rem;
}

.cta-section p {
    margin-bottom: 2rem;
}

.cta-buttons a {
    margin: 0.5rem;
}

/* Combined how/CTA section */
.how-cta-section {
    /* Remove the pattern; use a clean white background so content stands out */
    background: #ffffff;
    padding: 4rem 0;
    border-top: 1px solid rgba(0,0,0,0.1);
    border-bottom: 1px solid rgba(0,0,0,0.1);
}

.how-cta-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 4rem;
    row-gap: 2rem;
    align-items: flex-start;
}

/* Columns inside the how/CTA section are now equally sized by the grid layout. */
.how-column, .cta-column {
    /* In grid layout, columns are automatically sized. No flex needed. */
}

.how-column h2,
.cta-column h2 {
    font-size: 1.75rem;
    color: var(--primary-dark);
    margin-top: 0;
}

.how-list {
    list-style: none;
    padding: 0;
    margin: 1rem 0;
}

.how-list li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.how-list li::before {
    content: '';
    position: absolute;
    top: 0.4rem;
    left: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-orange);
}

.how-cta-inner .cta-buttons {
    margin-top: 2rem;
}

/* Vertical divider between columns */
.how-cta-inner .cta-column {
    border-left: 1px solid rgba(0,0,0,0.1);
    padding-left: 2rem;
}

@media (max-width: 900px) {
    .how-cta-inner {
        flex-direction: column;
    }
    .how-cta-inner .cta-column {
        border-left: none;
        padding-left: 0;
        margin-top: 2rem;
    }

    /* On smaller screens, allow carousel slides to wrap into fewer columns */
    .info-slide {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    }
}

/* Footer */
.footer {
    /* Use a slightly different dark shade to visually separate the footer from
       the preceding section.  This still stays within the brand palette. */
    background: #0e4e6f;
    color: #fff;
    text-align: center;
    padding: 1.5rem;
    font-size: 0.875rem;
}

/* ===================================================== */
/* Customisations for revised homepage and courses pages  */
/* ===================================================== */

/* Make the feature cards sit on a very light blue backdrop so they feel connected to
   the surrounding section.  Use dark text inside for better readability. */
.features .feature-item {
    /* Use white cards on the pale blue background of the section */
    background: #ffffff;
    color: var(--primary-dark);
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    flex: 1;
}

.features .feature-item h3,
.features .feature-item p {
    color: var(--primary-dark);
}

.features .feature-item a.learn-more {
    color: var(--accent-orange);
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s ease;
}

.features .feature-item a.learn-more:hover {
    color: var(--secondary-green);
}

/* Align the video section heading to the left and adjust its margins.  These
   overrides should appear after the default .video-title declaration. */
.video-section .video-title {
    text-align: left;
    margin-left: 3rem;
    margin-right: 0;
    margin-bottom: 1rem;
}

/* Shrink the All Voices section to occupy less vertical space */
.all-voices {
    padding: 4rem 1rem;
    min-height: 200px;
}

/* ----------------------------------------------------- */
/* Styles for the Student Courses page                   */
/* ----------------------------------------------------- */

/* Hero section on the courses page */
.courses-hero {
    background: var(--primary-light);
    padding: 4rem 1rem;
    text-align: center;
}

/* New layout for the refreshed Student Courses page */
.courses-overview {
    background: #ffffff;
    padding: 4rem 1rem;
}

/* Grid container for the overview section.  Two columns on large screens,
   collapsing into one on narrower screens. */
.courses-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    max-width: var(--container-width);
    margin: 0 auto;
    padding-left: 3rem;
    padding-right: 3rem;
}

@media (max-width: 900px) {
    .courses-container {
        grid-template-columns: 1fr;
    }
}

.courses-left h1.courses-title {
    font-size: 2.5rem;
    margin: 0 0 0.5rem;
    color: var(--primary-dark);
}

.courses-left h3.courses-subtitle {
    font-size: 1.25rem;
    font-weight: 500;
    margin: 0;
    color: var(--primary-dark);
}

.courses-left h4.courses-tagline {
    font-size: 1rem;
    font-weight: 600;
    margin-top: 0.5rem;
    margin-bottom: 2rem;
    color: var(--primary-dark);
}

.courses-heading {
    font-size: 1.5rem;
    margin-top: 0;
    margin-bottom: 1rem;
    color: var(--primary-dark);
}

.courses-intro {
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 1rem;
    color: var(--text-dark);
}

.courses-includes h3 {
    margin-top: 2rem;
    margin-bottom: 0.5rem;
    font-size: 1.25rem;
    color: var(--primary-dark);
}

.courses-includes ul {
    list-style: none;
    padding-left: 0;
    margin: 0 0 1rem;
}

.courses-includes ul li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0.5rem;
    line-height: 1.5;
}

.courses-includes ul li::before {
    content: '';
    position: absolute;
    top: 0.5rem;
    left: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-orange);
}

.courses-image-wrapper {
    position: relative;
    /* Restrict the width of the course illustration so it doesn’t dominate the layout.  On large screens it maxes out at 400px and centers itself; on smaller screens it can expand up to 100% width. */
    width: 100%;
    max-width: 400px;
    margin: 0 auto 2rem;
    overflow: hidden;
    /* Use generous border radius to echo the graphic shapes */
    border-radius: 24px;
}

.courses-image-wrapper img {
    width: 100%;
    height: auto;
    display: block;
}

/* Create coloured abstract shapes behind the image using pseudo-elements */
.courses-image-wrapper::before,
.courses-image-wrapper::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    z-index: -1;
}

.courses-image-wrapper::before {
    width: 80%;
    height: 80%;
    background: var(--secondary-green);
    top: -20%;
    left: -10%;
}

.courses-image-wrapper::after {
    width: 70%;
    height: 70%;
    background: var(--accent-yellow);
    bottom: -15%;
    right: -10%;
}

.courses-topics-box {
    background: var(--primary-light);
    border-radius: 16px;
    padding: 1.5rem;
    /* Increase the top margin so the topics list aligns vertically with
       the end of the "Each Course Includes" section on the left.  This
       extra spacing ensures the topics sit above the horizontal hairline
       at a similar distance as the content on the left. */
    margin-top: 3rem;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

.courses-topics-box h3 {
    margin-top: 0;
    margin-bottom: 1rem;
    font-size: 1.25rem;
    color: var(--primary-dark);
}

.courses-topics-box ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.courses-topics-box ul li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0.5rem;
    line-height: 1.5;
}

.courses-topics-box ul li::before {
    content: '';
    position: absolute;
    top: 0.5rem;
    left: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--secondary-green);
}

/* Bottom section styling */
.courses-bottom {
    background: #ffffff;
    padding: 3rem 1rem;
    border-top: 1px solid rgba(0,0,0,0.1);
}

.courses-bottom-container {
    max-width: var(--container-width);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    padding-left: 3rem;
    padding-right: 3rem;
}

@media (max-width: 900px) {
    .courses-bottom-container {
        grid-template-columns: 1fr;
    }
}

.courses-why h3,
.courses-learn-more h3 {
    margin-top: 0;
    font-size: 1.5rem;
    color: var(--primary-dark);
}

.courses-why p,
.courses-learn-more p {
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 1rem;
}

/* Vertical divider between the two columns on larger screens */
.courses-bottom-container > div + div {
    border-left: 1px solid rgba(0,0,0,0.1);
    padding-left: 2rem;
}

@media (max-width: 900px) {
    .courses-bottom-container > div + div {
        border-left: none;
        padding-left: 0;
        margin-top: 2rem;
        border-top: 1px solid rgba(0,0,0,0.1);
        padding-top: 2rem;
    }
}

.courses-hero h1 {
    font-size: 2.5rem;
    color: var(--primary-dark);
    margin: 0 0 0.5rem;
}

.courses-hero p {
    font-size: 1.25rem;
    color: var(--primary-dark);
    margin: 0.25rem 0;
}

/* Shared section styling for the courses page */
.courses-section {
    background: #ffffff;
    padding: 3rem 1rem;
}

.courses-section .section-inner {
    max-width: var(--container-width);
    margin: 0 auto;
    padding-left: 3rem;
    padding-right: 3rem;
}

.courses-section h2 {
    font-size: 2rem;
    color: var(--primary-dark);
    margin-top: 0;
}

.courses-section p {
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 1rem;
}

/* Custom bullet list for topics on the courses page */
.courses-section ul {
    list-style: none;
    padding-left: 0;
    margin: 1rem 0;
}

.courses-section ul li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0.5rem;
    line-height: 1.5;
}

.courses-section ul li::before {
    content: '';
    position: absolute;
    top: 0.5rem;
    left: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-orange);
}

/* Layout for the list of courses */
.courses-courses-list {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1rem;
}

.courses-courses-list .course-card {
    flex: 1 1 calc(50% - 1rem);
    background: var(--primary-light);
    padding: 1.5rem;
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.courses-courses-list .course-card h3 {
    margin-top: 0;
    color: var(--primary-dark);
    margin-bottom: 0.5rem;
}

.courses-courses-list .course-card p {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.4;
    color: var(--text-dark);
}

/* Contact box at the end of courses page */
.courses-contact {
    background: var(--primary-light);
    padding: 2rem;
    border-radius: 12px;
    text-align: center;
    margin-top: 2rem;
}

.courses-contact a {
    color: var(--accent-orange);
    font-weight: 600;
    text-decoration: none;
}
.courses-contact a:hover {
    color: var(--accent-yellow);
    text-decoration: underline;
}

/* ------------------------------------------------------------------ */
/* Alternate layout examples                                           */
/* The following classes style the optional layouts requested: a full  */
/* width hero banner with centered content, an angled section with     */
/* diagonal edges, and a responsive grid showing all benefits at once. */
/* ------------------------------------------------------------------ */
.alt-example {
    width: 100%;
    position: relative;
}

/* Full‑bleed hero alternative */
.hero-alt {
    height: 60vh;
    min-height: 400px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-align: center;
    background-color: #123456; /* fallback colour */
}

.hero-alt-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
}

.hero-alt-content {
    max-width: 700px;
    padding: 0 1rem;
}

.hero-alt-content h2 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.hero-alt-content p {
    font-size: 1.125rem;
    margin-bottom: 2rem;
}

/* Angled section using clip-path for diagonal edges */
.angled-section {
    background: var(--primary-light);
    padding: 4rem 1rem;
    /* Create diagonal top and bottom edges */
    clip-path: polygon(0% 5%, 100% 0%, 100% 95%, 0% 100%);
    display: flex;
    justify-content: center;
}

.angled-section .angled-inner {
    max-width: var(--container-width);
    text-align: center;
}

.angled-section h2 {
    color: var(--primary-dark);
    font-size: 2rem;
    margin-bottom: 1rem;
}

.angled-section p {
    font-size: 1.125rem;
    margin: 0 auto;
    max-width: 600px;
}

/* Benefits grid alternative */
.benefits-grid {
    background: var(--primary-light);
    padding: 4rem 1rem;
    text-align: center;
}

.benefits-grid h2 {
    color: var(--primary-dark);
    font-size: 2rem;
    margin-bottom: 2rem;
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    max-width: var(--container-width);
    margin: 0 auto;
}

.grid-item {
    background: #ffffff;
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1rem;
}

.grid-item h3 {
    margin: 0;
    font-size: 1.25rem;
    color: var(--primary-dark);
}

.grid-item p {
    font-size: 0.95rem;
    color: var(--text-dark);
}

/* Responsive tweaks */
@media (max-width: 900px) {
    .hero-overlay {
        width: 60%;
        padding: 2rem;
    }
    .hero-overlay h1 {
        font-size: 2rem;
    }
    .nav-container {
        flex-direction: column;
        align-items: flex-start;
    }
    .nav-links {
        margin-top: 1rem;
        flex-wrap: wrap;
    }
    .nav-actions {
        margin-top: 1rem;
    }
}

/* --------------------------------------------------------------------
   Custom feature cards, video playlist and final call-to-action styles
   -------------------------------------------------------------------- */

/* Features grid within the student-experience section */
.features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

/* Reset legacy blue feature card styles; feature cards are now white and defined under
   `.features .feature-item` above. */
.learn-more {
    font-weight: 600;
    /* Use the warm yellow for the call‑to‑action link so it remains legible
       against the blue card background */
    color: var(--accent-yellow);
    text-decoration: none;
    transition: color 0.2s ease;
    /* Push the link to the bottom of the card for consistent alignment */
    margin-top: auto;
}

/*
   ------------------------------------------------------------------
   Products page layout for editions comparison and additional products
   ------------------------------------------------------------------
*/

/* Container for the editions comparison section */
.product-editions {
    background: #fff;
    margin-top: 2rem;
    padding: 2rem 0;
}

/* Wrapper to arrange the comparison table and illustration side by side */
.product-editions .editions-wrapper {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 2rem;
}

/* Comparison table wrapper (left side of the section) */
.product-editions .comparison-table-wrapper {
    flex: 1;
}

/* Comparison table styling */
.product-editions .comparison-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1.5rem;
}

.product-editions .comparison-table th,
.product-editions .comparison-table td {
    padding: 0.75rem 1rem;
    text-align: center;
    font-size: 0.9rem;
    border-bottom: 1px solid #ccc;
}

/* Header row styling */
.product-editions .comparison-table thead th {
    font-weight: 600;
    background: var(--primary-light);
    color: var(--primary-dark);
}

/* Leftmost column aligns text to the left and takes up more space */
.product-editions .comparison-table th:first-child,
.product-editions .comparison-table td:first-child {
    text-align: left;
    width: 40%;
}

/* Vertical hairlines for table columns (except last) */
.product-editions .comparison-table th:not(:last-child),
.product-editions .comparison-table td:not(:last-child) {
    border-right: 1px solid #ccc;
}

/* Zebra striping for table rows */
.product-editions .comparison-table tbody tr:nth-child(even) {
    background: var(--primary-light);
}

/* Illustration container (right side) */
/* The features column (right side) appears alongside the comparison table */
.product-editions .comparison-features {
    flex: 1;
    padding-left: 2rem;
    border-left: 1px solid #ccc;
    display: flex;
    flex-direction: column;
}

.product-editions .comparison-features h3 {
    margin-top: 0;
    margin-bottom: 0.75rem;
    color: var(--primary-dark);
    font-size: 1.25rem;
}

.product-editions .comparison-features .features-list {
    list-style: disc;
    margin: 0;
    padding-left: 1.25rem;
    color: var(--text-dark);
}

.product-editions .comparison-features .features-list li {
    margin-bottom: 0.5rem;
}

.product-editions .comparison-features .features-list li::marker {
    color: var(--accent-orange);
}

/* Features list under the comparison table */
.product-editions .features-list {
    list-style: disc;
    margin: 1rem 0 0 1.25rem;
    padding: 0;
    color: var(--text-dark);
}

.product-editions .features-list li {
    margin-bottom: 0.5rem;
}

.product-editions .features-list li::marker {
    color: var(--accent-orange);
}

/* Responsive behaviour: stack comparison table and image vertically on small screens */
@media (max-width: 900px) {
    .product-editions .editions-wrapper {
        flex-direction: column;
    }
    .product-editions .comparison-features {
        border-left: none;
        padding-left: 0;
        margin-top: 2rem;
    }
}

/* Additional products section */
.additional-products {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    margin-top: 2rem;
    background: var(--primary-light);
    padding: 2rem;
    border-radius: 0.5rem;
}

/* ------------------------------------------------------------------
   Custom tweaks for Products and About pages (post‑layout refinements)
   ------------------------------------------------------------------ */

/* Ensure all headings within the products page use the primary dark blue colour
   to match the design of other pages. Without this rule, headings defaulted
   to dark grey and looked less cohesive. */
.products-section h1,
.products-section h2,
.products-section h3 {
    color: var(--primary-dark);
}

/* Align the comparison features list with the comparison table.  Without
   additional top margin, the "All Editions Include" column appeared
   slightly higher than the top of the comparison table, creating a step
   effect.  Adding a small margin shifts the entire column down so the
   headings and first row align visually. */
.product-editions .comparison-features {
    margin-top: 1rem;
}

/* Provide breathing space below the first additional item on the left side
   of the additional products section.  This spacing separates the YouOkay
   button from the "Staff Reporting" heading to avoid visual crowding. */
.additional-layout .additional-left .additional-item:first-of-type {
    margin-bottom: 1.5rem;
}

/* Center the image in the right column of the additional products section.
   This rule reaffirms centering alignment on both axes to ensure that the
   tinted map sits gracefully within its container on all viewport widths. */
.additional-layout .additional-right {
    justify-content: center;
    align-items: center;
}

.additional-products .additional-item {
    flex: 1;
}

.additional-products .additional-item:not(:last-child) {
    /* Add a thin vertical divider between items */
    border-right: 1px solid #ccc;
    padding-right: 1.5rem;
}

.additional-products .additional-item:not(:first-child) {
    padding-left: 1.5rem;
}

.additional-products .additional-item h3 {
    margin-top: 0;
    margin-bottom: 0.75rem;
    color: var(--primary-dark);
    font-size: 1.25rem;
}

.additional-products .additional-item p {
    margin-top: 0;
    margin-bottom: 1rem;
    color: var(--text-dark);
    font-size: 0.95rem;
}

/* Stacked layout for additional products on small screens */
@media (max-width: 900px) {
    .additional-products {
        flex-direction: column;
        padding: 2rem 1rem;
    }
    .additional-products .additional-item:not(:last-child) {
        border-right: none;
        border-bottom: 1px solid #ccc;
        padding-right: 0;
        padding-bottom: 1.5rem;
        margin-bottom: 1.5rem;
    }
    .additional-products .additional-item:not(:first-child) {
        padding-left: 0;
    }
}

/*
   ------------------------------------------------------------------
   New layout for the products page (summaries, additional block and CTA)
   ------------------------------------------------------------------
*/

/* Summaries section for Standard, Pro, Pro Plus editions */
.edition-summaries {
    display: flex;
    gap: 2rem;
    margin: 2rem 0;
}

.edition-summaries .edition-summary {
    flex: 1;
    background: var(--primary-light);
    border-radius: 8px;
    padding: 1.5rem;
    text-align: center;
}

.edition-summaries .edition-summary h3 {
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-size: 1.25rem;
    color: var(--primary-dark);
}

.edition-summaries .edition-summary p {
    margin: 0;
    font-size: 0.95rem;
    color: var(--text-dark);
}

/* Additional block containing product summaries and map */
.product-additional-block {
    background: var(--primary-light);
    padding: 2rem 0;
    /* Remove the extra top margin so the light‑blue section touches the
       preceding white section without showing a white band across the page. */
    margin-top: 0;
}

.additional-layout {
    display: flex;
    gap: 2rem;
    max-width: var(--container-width);
    margin: 0 auto;
    align-items: flex-start;
}

.additional-layout .additional-left,
.additional-layout .additional-right {
    flex: 1;
}

.additional-layout .additional-left {
    padding-right: 1.5rem;
    border-right: 1px solid #ccc;
}

.additional-layout .additional-right {
    padding-left: 1.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.additional-layout .additional-right img {
    max-width: 100%;
    height: auto;
    display: block;
}

.additional-layout .additional-left h2 {
    margin-top: 0;
    margin-bottom: 1rem;
    color: var(--primary-dark);
    font-size: 1.5rem;
}

.additional-layout .additional-left .additional-item h3 {
    margin-top: 0;
    margin-bottom: 0.75rem;
    color: var(--primary-dark);
    font-size: 1.25rem;
}

.additional-layout .additional-left .additional-item p {
    margin-top: 0;
    margin-bottom: 1rem;
    color: var(--text-dark);
    font-size: 0.95rem;
}

/* Responsive: stack map and text on small screens */
@media (max-width: 900px) {
    .edition-summaries {
        flex-direction: column;
    }
    .additional-layout {
        flex-direction: column;
        padding: 0 1rem;
    }
    .additional-layout .additional-left {
        border-right: none;
        padding-right: 0;
        border-bottom: 1px solid #ccc;
        padding-bottom: 1.5rem;
        margin-bottom: 1.5rem;
    }
    .additional-layout .additional-right {
        padding-left: 0;
    }
}

/* Final call-to-action area */
.products-cta {
    background: var(--primary-dark);
    color: #fff;
    text-align: center;
    padding: 3rem 1rem;
    margin-top: 0;
}

.products-cta h2 {
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-size: 1.75rem;
    color: #fff;
}

.products-cta p {
    margin-top: 0;
    margin-bottom: 1.5rem;
    font-size: 1rem;
    color: #fff;
}
.learn-more:hover {
    color: var(--primary-dark);
    text-decoration: underline;
}

/* Video section styling */
.video-section {
    background: var(--primary-dark);
    color: #fff;
    padding: 4rem 0;
}

/* Section heading for the video carousel */
.video-title {
    font-size: 2rem;
    /* On the dark background of the video section, make the title white for contrast */
    color: #ffffff;
    /* Align the title to the left so it lines up with the playlist and feels unified */
    text-align: left;
    /* Position the heading away from the very edge to match the overall page margins */
    margin: 0 0 1rem 3rem;
}

.video-inner {
    max-width: var(--container-width);
    margin: 0 auto;
    display: flex;
    gap: 2rem;
    align-items: flex-start;
    flex-wrap: wrap;
}

.video-playlist {
    flex: 1;
    min-width: 250px;
}

.video-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.video-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* Increase the left padding slightly to give the play icon more room and
       separate the bullet from the first letter of each title */
    padding: 0.75rem 1rem 0.75rem 2.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    cursor: pointer;
    font-size: 0.95rem;
    transition: background 0.2s ease, color 0.2s ease;
    position: relative;
}

.video-item:first-child {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.video-item:hover,
.video-item.active {
    background: rgba(255, 255, 255, 0.1);
}

/* Play icon indicator on each video list item */
.video-item::before {
    content: '';
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.5);
    display: inline-block;
    position: absolute;
    /* Nudge the play indicator slightly to the right to maintain consistent
       spacing after increasing the list item's left padding */
    left: 1.25rem;
    top: 50%;
    transform: translateY(-50%);
}

/* Highlight the play icon when the item is active */
.video-item.active::before {
    background: var(--secondary-green);
    border-color: var(--secondary-green);
}

.video-item .duration {
    margin-left: 1rem;
    font-size: 0.85rem;
    opacity: 0.8;
}

.video-player {
    flex: 2;
    min-width: 350px;
}

.video-player video {
    width: 100%;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* All Voices section styling */
.all-voices {
    position: relative;
    overflow: hidden;
    /* Allow the section to size itself based on its content */
    height: auto;
    /* Reduce the minimum height so this final section doesn’t dominate the page */
    min-height: 200px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    /* Dark blue background consistent with the brand */
    background: var(--primary-dark);
    /* Tighten the vertical padding to shrink the section visually */
    padding: 4rem 1rem;
    /* Reserve space for the top divider by adding relative positioning.
       A decorative triangle will be inserted via a ::before pseudo element
       to separate this section from the section above. */
}

/* Decorative diagonal divider at the top of the final section.  It uses the
   soft green accent colour and a clip‑path to create a triangular shape
   that slopes down from left to right, echoing the reference design. */
.all-voices::before {
    content: '';
    position: absolute;
    top: -50px;
    left: 0;
    width: 100%;
    height: 50px;
    background: var(--secondary-green);
    clip-path: polygon(0 100%, 100% 0, 100% 100%);
    z-index: 1;
}

.all-voices-content {
    position: relative;
    z-index: 2;
    max-width: 700px;
    padding: 2rem;
}

.all-voices h2 {
    margin: 0 0 1rem;
    font-size: 2.5rem;
    font-weight: 700;
}

.all-voices p {
    margin-bottom: 2rem;
    font-size: 1rem;
}

.all-voices-video {
    display: none;
}

/* ----------------------------------------------------- */
/* New hero layout: split copy and video panels          */
/* ----------------------------------------------------- */
/* The hero uses flex to create two columns. The background colour is
   slightly lighter than the nav bar to create a visible divide between
   the two elements. */
.hero {
    display: flex;
    align-items: stretch;
    /* Use a slightly lighter blue than the nav bar to create contrast.  This
       colour matches the reference screenshot where the hero panel is a shade
       lighter than the dark navigation bar. */
    background: #407eb3;
    padding: 0;
    height: 65vh;
    min-height: 450px;
    overflow: hidden;
}

/* Left panel: copy */
.hero-left {
    /* Allocate slightly less width to the text column than before so the video
       occupies more space, matching the reference proportion.  The left
       column now occupies roughly 40% of the hero while the right column
       takes the remaining 60%. */
    flex: 0 0 40%;
    max-width: 40%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 4rem 3rem;
    box-sizing: border-box;
    color: #fff;
}

.hero-left h1 {
    margin: 0 0 1rem;
    font-size: 2.75rem;
    line-height: 1.2;
    font-weight: 700;
}

.hero-left p {
    margin-bottom: 2rem;
    max-width: 500px;
    font-size: 1rem;
    line-height: 1.5;
    color: #fff;
}

.hero-left .hero-buttons a {
    margin-right: 1rem;
}

/* Right panel: video */
.hero-right {
    flex: 1;
    /* The video column takes up the remaining space (roughly 60%) */
    max-width: 60%;
    position: relative;
    overflow: hidden;
}

.hero-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 900px) {
    .hero {
        flex-direction: column;
        height: auto;
    }
    .hero-left, .hero-right {
        flex: none;
        max-width: 100%;
    }
    .hero-left {
        padding: 2rem 1.5rem;
    }
    .hero-left h1 {
        font-size: 2rem;
    }
    .hero-left p {
        max-width: none;
    }
}

/* --------------------------------------------------------------------------- */
/* About Page Custom Styles                                                    */
/* These styles are specific to the about.html page and add structured layout  */
/* including a hero, timeline, mission, support, evolution and call‑to‑action  */
/* sections.  They are designed to complement the existing design system by    */
/* reusing established colours, typography and spacing variables.              */
/* --------------------------------------------------------------------------- */

/* Hero / Title section: soft blue background with centered content */
.about-hero {
    background: var(--primary-light);
    padding: 4rem 1rem;
    text-align: center;
}
.about-hero h1 {
    margin: 0 0 1rem;
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--primary-dark);
}
.about-hero p {
    margin: 0 auto;
    max-width: 700px;
    font-size: 1.125rem;
    line-height: 1.5;
    color: var(--text-dark);
}

/* Timeline section: three horizontal cards */
.timeline-section {
    background: #fff;
    padding: 4rem 1rem;
}
.timeline-list {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    max-width: var(--container-width);
    margin: 0 auto;
}
.timeline-item {
    flex: 1 1 30%;
    background: var(--primary-light);
    padding: 2rem;
    border-radius: 0.5rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.timeline-item h3 {
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--primary-dark);
}
.timeline-item p {
    margin: 0;
    color: var(--text-dark);
    font-size: 0.95rem;
    line-height: 1.5;
}

/* Mission section: side by side text and image */
.mission-section {
    background: var(--primary-light);
    padding: 4rem 1rem;
}
.mission-inner {
    display: flex;
    flex-wrap: wrap;
    gap: 3rem;
    max-width: var(--container-width);
    margin: 0 auto;
    align-items: center;
}
.mission-text {
    flex: 1 1 50%;
    color: var(--text-dark);
}
.mission-text h2 {
    margin-top: 0;
    margin-bottom: 1rem;
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary-dark);
}
.mission-text p {
    margin-bottom: 1rem;
    font-size: 1rem;
    line-height: 1.5;
}
.mission-image {
    flex: 1 1 50%;
}
.mission-image img {
    width: 100%;
    height: auto;
    border-radius: 1rem;
    object-fit: cover;
}

/* Support section: list of services with an optional header image */
.support-section {
    background: #fff;
    padding: 4rem 1rem;
}
.support-inner {
    max-width: var(--container-width);
    margin: 0 auto;
}
.support-inner h2 {
    text-align: center;
    margin: 0 0 1.5rem;
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary-dark);
}
.support-image {
    text-align: center;
    margin-bottom: 2rem;
}
.support-image img {
    max-width: 120px;
    height: auto;
}
.support-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 2rem;
}
.support-list li {
    background: var(--primary-light);
    padding: 1.5rem;
    border-radius: 0.5rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--text-dark);
}
.support-list li a {
    color: var(--primary-dark);
    text-decoration: underline;
}

/* Evolution section: simple list on soft blue background */
.evolution-section {
    background: var(--primary-light);
    padding: 4rem 1rem;
}
.evolution-inner {
    max-width: var(--container-width);
    margin: 0 auto;
    text-align: center;
}
.evolution-inner h2 {
    margin-top: 0;
    margin-bottom: 1rem;
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary-dark);
}
.evolution-inner p {
    margin-bottom: 2rem;
    font-size: 1rem;
    color: var(--text-dark);
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}
.evolution-list {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    max-width: 800px;
    text-align: left;
}
.evolution-list li {
    position: relative;
    margin-bottom: 1rem;
    padding-left: 1.25rem;
    font-size: 0.95rem;
    color: var(--text-dark);
    line-height: 1.5;
}
.evolution-list li::before {
    content: '\2022';
    position: absolute;
    left: 0;
    top: 0.1rem;
    color: var(--accent-orange);
    font-weight: 700;
}

/* Call to action section for the about page */
.about-cta {
    background: var(--primary-dark);
    color: #fff;
    text-align: center;
    padding: 4rem 1rem;
}
.about-cta h2 {
    margin-top: 0;
    margin-bottom: 1rem;
    font-size: 2rem;
    font-weight: 700;
}
.about-cta p {
    margin-bottom: 2rem;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    font-size: 1rem;
    line-height: 1.5;
}
.about-cta a.btn {
    color: var(--primary-dark);
    background: var(--secondary-green);
    padding: 0.75rem 1.5rem;
    border-radius: 999px;
    font-weight: 600;
}
.about-cta a.btn:hover {
    background: var(--accent-yellow);
    color: var(--primary-dark);
}

/* Responsive adjustments for the about page */
@media (max-width: 900px) {
    .timeline-list {
        flex-direction: column;
    }
    .timeline-item {
        flex: 1 1 100%;
    }
    .mission-inner {
        flex-direction: column;
    }
    .mission-image, .mission-text {
        flex: 1 1 100%;
    }
    .support-list {
        grid-template-columns: 1fr;
    }
}

/*
 * Modular About Sections
 * These rules style the simplified about page layout. Each section
 * presents content in a two‑column format with text and image,
 * alternating backgrounds to subtly separate ideas. A thin hairline
 * divider appears between successive sections. The layout collapses
 * gracefully on smaller screens.
 */
.about-modular {
    padding: 4rem 1rem;
    background: #fff;
}

/* Alternate background for every other modular section */
.about-modular.about-alt {
    background: var(--primary-light);
}

/* Hairline divider between modular sections */
.about-modular + .about-modular {
    /* Remove the hairline divider between modular sections on the About page.
       A faint grey line was previously added here to separate sections, but
       this created visual clutter and looked like an unintended rule.  We
       explicitly override the border to none so there are no horizontal lines
       between the "Our Beginnings" and "Looking Out for Students" sections. */
    border-top: none;
}

.about-modular .inner {
    max-width: var(--container-width);
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 3rem;
    align-items: center;
}

.about-modular .text {
    /*
     * Split the available width evenly minus half the gap so that two
     * columns plus the gap fit within the container on wide screens.
     */
    flex: 1 1 calc(50% - 1.5rem);
}

.about-modular .text h2 {
    margin-top: 0;
    margin-bottom: 1rem;
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary-dark);
}

.about-modular .text p {
    margin-bottom: 1rem;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text-dark);
}

.about-modular .image {
    flex: 1 1 calc(50% - 1.5rem);
    text-align: center;
}

.about-modular .image img {
    width: 100%;
    height: auto;
    border-radius: 1rem;
    object-fit: cover;
}

@media (max-width: 900px) {
    .about-modular .inner {
        flex-direction: column;
    }
    .about-modular .text, .about-modular .image {
        flex: 1 1 100%;
    }
}

/* =============================================
 * Contact Page
 * --------------------------------------------*/

/* Contact hero section: introduces the contact page with a soft background */
.contact-hero {
    padding: 4rem 1rem;
    background: var(--primary-light);
}

.contact-hero .section-inner {
    max-width: var(--container-width);
    margin: 0 auto;
    text-align: center;
}

.contact-hero h1 {
    margin: 0 0 1rem;
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--primary-dark);
}

.contact-hero p {
    margin: 0 auto;
    max-width: 600px;
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--text-dark);
}

/* Contact details section: holds phone, email and note */
.contact-details {
    padding: 3rem 1rem 4rem;
    background: #fff;
}

.contact-details .section-inner {
    max-width: var(--container-width);
    margin: 0 auto;
    text-align: center;
}

.contact-list {
    list-style: none;
    padding: 0;
    margin: 2rem auto;
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--text-dark);
}

.contact-list li + li {
    margin-top: 0.5rem;
}

.contact-list a {
    color: var(--primary-dark);
    text-decoration: underline;
}

.contact-note {
    margin-top: 1.5rem;
    font-style: italic;
    color: var(--text-dark);
}

/* ==================================
   Team page styles
   ================================== */
/* Hero section for the team page */
.team-hero {
    background: var(--primary-light);
    padding: 4rem 0;
    text-align: center;
}
.team-hero h1 {
    font-size: 2.5rem;
    color: var(--primary-dark);
    margin-bottom: 1rem;
}
.team-hero p {
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Alternate section background used across team sections */
.section-alt {
    background: var(--primary-light);
}

/* Staff grid layout */
.staff-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}
.staff-card {
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    padding: 1.5rem;
    text-align: left;
}
.staff-card h3 {
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-size: 1.25rem;
    color: var(--primary-dark);
}
.staff-card .role {
    font-weight: 600;
    color: var(--primary-dark);
    margin-bottom: 0.5rem;
}
.staff-card p {
    margin: 0;
    line-height: 1.4;
}

/* Staff photo styling */
.staff-photo {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 1rem;
    border: 3px solid var(--accent-orange);
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.staff-card {
    text-align: center;
}

.staff-card p:last-child {
    text-align: left;
}


/* Advisory board list formatting */
.board-section {
    background: #ffffff;
    padding: 4rem 0;
}
.board-section h2 {
    margin-top: 0;
}
.board-list {
    list-style: none;
    padding: 0;
    margin: 2rem 0 0;
    column-count: 2;
    column-gap: 2rem;
}
.board-list li {
    margin-bottom: 0.75rem;
    line-height: 1.4;
}

/* Partners section styles */
.partners-section {
    padding: 4rem 0;
}
.partners-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}
.partner-card {
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    padding: 1.5rem;
    text-align: left;
}
.partner-card h3 {
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-size: 1.2rem;
    color: var(--primary-dark);
}
.partner-card p {
    margin: 0;
    line-height: 1.4;
}

/* =============================================
   CONTACT PAGE FORM STYLES
   ============================================= */

.contact-form-container {
    max-width: 600px;
    margin: 3rem auto 0;
    padding: 2rem;
    background: var(--primary-light);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.contact-form-container h2 {
    margin-top: 0;
    margin-bottom: 0.5rem;
    color: var(--primary-dark);
    font-size: 1.5rem;
    text-align: center;
}

.contact-form-container .form-prompt {
    text-align: center;
    margin-bottom: 1.5rem;
    color: var(--text-dark);
}

.contact-form .form-group {
    margin-bottom: 1rem;
}

.contact-form .form-row {
    display: flex;
    gap: 1rem;
}

.contact-form .form-row .form-group {
    flex: 1;
}

.contact-form label {
    display: block;
    margin-bottom: 0.25rem;
    font-weight: 500;
    color: var(--primary-dark);
}

.contact-form label .required {
    color: var(--accent-orange);
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-family: inherit;
    font-size: 1rem;
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.contact-form input:focus,
.contact-form textarea:focus {
    outline: none;
    border-color: var(--primary-dark);
    box-shadow: 0 0 0 3px rgba(47, 102, 144, 0.1);
}

.contact-form textarea {
    resize: vertical;
    min-height: 100px;
}

.contact-form .form-hint {
    font-size: 0.875rem;
    color: #666;
    margin-top: -0.5rem;
    margin-bottom: 1rem;
}

.contact-form button[type="submit"] {
    width: 100%;
    margin-top: 1rem;
    padding: 0.875rem 1.5rem;
    border: none;
    border-radius: 999px;
    background: var(--accent-orange);
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.1s ease;
}

.contact-form button[type="submit"]:hover {
    background: var(--secondary-green);
    color: var(--primary-dark);
}

.contact-form button[type="submit"]:active {
    transform: scale(0.98);
}

/* Responsive adjustments for contact form */
@media (max-width: 600px) {
    .contact-form .form-row {
        flex-direction: column;
        gap: 0;
    }

    .contact-form-container {
        padding: 1.5rem;
        margin-left: 1rem;
        margin-right: 1rem;
    }
}


/* =============================================
   Mobile Navigation & Hamburger Menu
   ============================================= */

/* Hamburger menu button - hidden on desktop */
.hamburger {
    display: none;
    flex-direction: column;
    justify-content: space-around;
    width: 30px;
    height: 24px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 1001;
}

.hamburger span {
    width: 100%;
    height: 3px;
    background: var(--accent-yellow);
    border-radius: 2px;
    transition: all 0.3s ease;
}

/* Hamburger animation when menu is open */
.hamburger.active span:nth-child(1) {
    transform: rotate(45deg) translate(6px, 6px);
}

.hamburger.active span:nth-child(2) {
    opacity: 0;
}

.hamburger.active span:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
}

/* =============================================
   Mobile Responsive Styles (768px and below)
   ============================================= */

@media (max-width: 768px) {
    /* Show hamburger menu */
    .hamburger {
        display: flex;
    }

    /* Navigation container adjustments */
    .nav-container {
        flex-wrap: wrap;
        justify-content: space-between;
        padding: 1rem;
    }

    .nav-container .logo {
        flex: 0 0 auto;
    }

    /* Hide desktop nav links and actions by default */
    .nav-links,
    .nav-actions {
        display: none;
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        margin-top: 1rem;
        padding-top: 1rem;
        border-top: 1px solid rgba(255, 255, 255, 0.2);
    }

    /* Show nav when menu is active */
    .nav-links.active,
    .nav-actions.active {
        display: flex;
    }

    .nav-links a {
        padding: 0.75rem 0;
        width: 100%;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .nav-actions {
        padding-top: 0.5rem;
        border-top: none;
        gap: 0.75rem;
    }

    .nav-actions a {
        width: 100%;
        text-align: center;
    }

    /* Hero section mobile */
    .hero {
        flex-direction: column;
        height: auto;
        min-height: auto;
        padding-left: 0;
    }

    .hero-left,
    .hero-right {
        flex: none;
        max-width: 100%;
        width: 100%;
    }

    .hero-left {
        padding: 2rem 1.5rem;
        order: 1;
    }

    .hero-left h1 {
        font-size: 1.75rem;
        line-height: 1.3;
    }

    .hero-left p {
        font-size: 0.95rem;
        max-width: none;
    }

    .hero-buttons {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }

    .hero-buttons a {
        text-align: center;
        margin-right: 0;
    }

    .hero-right {
        order: 2;
        margin-right: 0;
        height: 200px;
    }

    /* Features grid mobile */
    .features {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    /* Section padding adjustments */
    section {
        padding: 3rem 1rem;
    }

    .student-experience .section-inner,
    .how-cta-section .how-cta-inner {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    /* How/CTA section mobile */
    .how-cta-inner {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .how-cta-inner .cta-column {
        border-left: none;
        padding-left: 0;
        border-top: 1px solid rgba(0, 0, 0, 0.1);
        padding-top: 2rem;
    }

    /* Video section mobile */
    .video-inner {
        flex-direction: column;
    }

    .video-playlist,
    .video-player {
        min-width: 100%;
        width: 100%;
    }

    .video-title {
        margin-left: 1rem;
        font-size: 1.5rem;
    }

    /* Info carousel mobile */
    .info-slide {
        flex-direction: column;
        padding: 1.5rem 1rem;
        gap: 1rem;
    }

    .carousel-item {
        width: 100%;
    }

    /* All voices section */
    .all-voices h2 {
        font-size: 1.75rem;
    }

    .all-voices-content {
        padding: 1.5rem;
    }

    /* Footer mobile */
    .footer {
        padding: 1.5rem 1rem;
        font-size: 0.8rem;
    }

    /* About page mobile */
    .about-hero h1 {
        font-size: 2rem;
    }

    .about-modular .inner {
        flex-direction: column;
        gap: 2rem;
    }

    .about-modular .text,
    .about-modular .image {
        flex: 1 1 100%;
    }

    /* Team page mobile */
    .team-hero h1 {
        font-size: 2rem;
    }

    .staff-grid {
        grid-template-columns: 1fr;
    }

    .board-list {
        column-count: 1;
    }

    /* Contact page mobile */
    .contact-hero h1 {
        font-size: 2rem;
    }

    /* Courses page mobile */
    .courses-container {
        grid-template-columns: 1fr;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .courses-left h1.courses-title {
        font-size: 2rem;
    }

    .courses-bottom-container {
        grid-template-columns: 1fr;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    /* Products page mobile */
    .edition-summaries {
        flex-direction: column;
    }

    .product-editions .editions-wrapper {
        flex-direction: column;
    }

    .product-editions .comparison-features {
        border-left: none;
        padding-left: 0;
        margin-top: 2rem;
    }

    /* Buttons - larger touch targets */
    .btn,
    .btn-green-orange,
    .nav-btn {
        padding: 0.875rem 1.5rem;
        font-size: 1rem;
    }
}

/* =============================================
   Extra Small Screen Styles (480px and below)
   ============================================= */

@media (max-width: 480px) {
    /* Logo sizing */
    .logo-text {
        font-size: 1.5rem;
    }

    /* Hero adjustments */
    .hero-left {
        padding: 1.5rem 1rem;
    }

    .hero-left h1 {
        font-size: 1.5rem;
    }

    .hero-left p {
        font-size: 0.9rem;
        margin-bottom: 1.5rem;
    }

    .hero-right {
        height: 180px;
    }

    /* Section headings */
    .student-experience h2,
    .how-column h2,
    .cta-column h2,
    .video-title {
        font-size: 1.35rem;
    }

    /* Feature cards */
    .features .feature-item {
        padding: 1.25rem;
    }

    .features .feature-item h3 {
        font-size: 1.1rem;
    }

    /* All voices */
    .all-voices h2 {
        font-size: 1.5rem;
    }

    .all-voices p {
        font-size: 0.9rem;
    }

    /* About page */
    .about-hero h1 {
        font-size: 1.75rem;
    }

    .about-modular .text h2 {
        font-size: 1.5rem;
    }

    /* Contact form */
    .contact-form-container {
        padding: 1.25rem;
        margin-left: 0.5rem;
        margin-right: 0.5rem;
    }

    /* Video section */
    .video-item {
        font-size: 0.85rem;
        padding: 0.6rem 1rem 0.6rem 2.5rem;
    }

    /* Staff cards */
    .staff-photo {
        width: 120px;
        height: 120px;
    }

    /* CTA buttons stacking */
    .cta-buttons {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }

    .cta-buttons a {
        margin: 0;
        width: 100%;
        text-align: center;
    }
}

/* =============================================
   Very Small Screen Styles (375px and below)
   ============================================= */

@media (max-width: 375px) {
    .logo-text {
        font-size: 1.35rem;
    }

    .hero-left h1 {
        font-size: 1.35rem;
    }

    .nav-container {
        padding: 0.75rem;
    }

    section {
        padding: 2rem 0.75rem;
    }

    .btn,
    .btn-green-orange,
    .nav-btn {
        padding: 0.75rem 1.25rem;
        font-size: 0.9rem;
    }
}