/* =========================================================
   OXFORD HOME SCHOOLING
   KS3 COURSE SWITCHER
   Shared component stylesheet
   Version: 1.0.1

   Used on:
   - KS3 year-specific WooCommerce course products
   - KS3 subject hub pages (/course/.../)
   ========================================================= */

/* =========================================================
   KS3 COURSE NAVIGATION
   ========================================================= */


/* Outer Divi section */

.ohs-ks3-switcher-band {
    padding: 20px 0 24px !important;
    background: #f1f7eb;
}


/*
 * Make the navigation row match the width used by the
 * main subject-page content rather than Divi's narrower default.
 */


.ohs-ks3-switcher-band > .et_pb_row,
.ohs-ks3-switcher-band .et_pb_row {
    width: 100% !important;
    max-width: 1280px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Component */

.ohs-ks3-course-switcher {
    width: 100%;
}


/* Intro */

.ohs-ks3-course-switcher-intro {
    margin-bottom: 12px;
}


/* Match our normal section-eyebrow treatment */

.ohs-ks3-course-switcher-intro .ohs-section-eyebrow {
    margin: 0 0 5px;

    color: #2f7d32;

    font-size: 11px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}


.ohs-ks3-course-switcher-intro h2 {
    margin: 0 0 5px;
}


.ohs-ks3-course-switcher-intro > p:last-child {
    margin: 0;

    max-width: 760px;

    color: #40545a;
}


/* Navigation container */

.ohs-ks3-course-switcher-nav {
    overflow: hidden;

    background: #ffffff;

    border: 1px solid #bfd3b2;
    border-radius: 9px;

    box-shadow: 0 4px 14px rgba(15, 60, 69, 0.05);
}


/* Individual navigation rows */

.ohs-ks3-course-switcher-nav-row {
    display: grid;
    grid-template-columns: 165px minmax(0, 1fr);

    gap: 14px;
    align-items: center;

    padding: 11px 14px;
}


.ohs-ks3-course-switcher-nav-row +
.ohs-ks3-course-switcher-nav-row {
    border-top: 1px solid #dce7d6;
}


/* Row heading */

.ohs-ks3-course-switcher-heading {
    display: flex;
    flex-direction: column;

    gap: 1px;
}


.ohs-ks3-course-switcher-label {
    color: #2f7d32;

    font-size: 11px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}


.ohs-ks3-course-switcher-heading strong {
    color: #0f3d49;

    font-size: 14px;
    font-weight: 700;
    line-height: 1.25;
}


/* Link group */

.ohs-ks3-course-switcher-links {
    display: flex;
    flex-wrap: wrap;

    gap: 7px;

    align-items: center;
}


/* Individual destinations */

.ohs-ks3-course-switcher-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 34px;
    padding: 6px 13px;

    background: #ffffff;

    border: 1px solid #91b27d;
    border-radius: 6px;

    color: #123f4a;

    font-size: 13px;
    font-weight: 700;
    line-height: 1.15;

    text-decoration: none;

    transition:
        background-color 0.16s ease,
        border-color 0.16s ease,
        color 0.16s ease;
}


/* Hover */

a.ohs-ks3-course-switcher-link:hover {
    background: #eef6e9;
    border-color: #4f9034;

    color: #123f4a;

    text-decoration: none;
}


/* Keyboard focus */

a.ohs-ks3-course-switcher-link:focus-visible {
    outline: 3px solid rgba(79, 144, 52, 0.24);
    outline-offset: 2px;
}


/* Current course */

.ohs-ks3-course-switcher-link.is-current {
    background: #2f7d32;
    border-color: #2f7d32;

    color: #ffffff;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 980px) {

    .ohs-ks3-switcher-band .et_pb_row.ohs-ks3-switcher-row {
        width: 90% !important;
    }

    .ohs-ks3-course-switcher-nav-row {
        grid-template-columns: 145px minmax(0, 1fr);
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .ohs-ks3-switcher-band {
        padding: 16px 0 20px !important;
    }

    .ohs-ks3-switcher-band .et_pb_row.ohs-ks3-switcher-row {
        width: 92% !important;
    }

    .ohs-ks3-course-switcher-intro {
        margin-bottom: 10px;
    }

    .ohs-ks3-course-switcher-nav-row {
        grid-template-columns: 1fr;

        gap: 8px;

        padding: 12px;
    }

    .ohs-ks3-course-switcher-links {
        gap: 6px;
    }

    .ohs-ks3-course-switcher-link {
        min-height: 36px;
        padding: 7px 11px;
    }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .ohs-ks3-course-switcher-links {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Year navigation: always keep Years 7, 8 and 9 together */
    .ohs-ks3-course-switcher-nav-row:first-child
    .ohs-ks3-course-switcher-links {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .ohs-ks3-course-switcher-link {
        width: 100%;
        padding-left: 8px;
        padding-right: 8px;
    }

}


/* =========================================================
   COURSE HUB INTEGRATION

   IMPORTANT:
   Do not resize the containing Divi section or row here.
   A course template may keep several modules inside the same
   Divi section/row. Changing that ancestor therefore changes
   the width of the hero, course cards and every later block.

   Instead, centre only the switcher itself and allow it to
   expand beyond Divi's normal row width when necessary.
   ========================================================= */

body.single-course .ohs-ks3-course-switcher {
    position: relative;
    left: 50%;

    width: min(94vw, 1280px);
    max-width: none;

    margin: 0;
    padding: 28px 0 30px;

    transform: translateX(-50%);

    box-sizing: border-box;
}

body.single-course .ohs-ks3-course-switcher-intro h2 {
    margin: 0 0 7px !important;
    color: #103b46 !important;
    font-size: clamp(24px, 2.2vw, 30px) !important;
    font-weight: 700 !important;
    line-height: 1.18 !important;
}

body.single-course .ohs-ks3-course-switcher-intro > p:last-child {
    max-width: 820px;
    color: #40545a;
    font-size: 15px;
    line-height: 1.55;
}

@media (max-width: 980px) {
    body.single-course .ohs-ks3-course-switcher {
        width: 90vw;
    }
}

@media (max-width: 767px) {
    body.single-course .ohs-ks3-course-switcher {
        width: 92vw;
        padding: 22px 0 24px;
    }
}