/*
 Theme Name:  BlueStampTravel
 Theme URI:    https://www.bluestamptravel.com
 Description:  Standalone WordPress theme for Blue Stamp Travel
 Author:       Blue Stamp Travel
 Author URI:   https://www.bluestamptravel.com
 Version:      3.0.0
 Text Domain:  bluestamptravel
*/

/* Baseline reset (previously supplied by Divi parent CSS) */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    line-height: 1.7;
}

/* Global link colour — previously Divi Customizer `a { color: #da291c }` */
a {
    color: var(--red);
    text-decoration: none;
}

a:hover,
a:focus {
    text-decoration: none;
}

/* Content links only — avoid overriding white header/footer/button text on hover */
main a:not(.button):not(.cta):hover,
main a:not(.button):not(.cta):focus {
    color: var(--orange);
}

ul,
ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

img {
    max-width: 100%;
    height: auto;
}

/* Base Typography */
body p, 
body ul, 
body ul li, 
body ol, 
body ol li {
    font-size: 1.1em;
    font-weight: 300;
    color: var(--body-colour);
    padding-bottom: 0;
    font-size: 1.1rem;
    font-weight: 400;
}

/* Reset base margins */
body p, 
body ul, 
body ol,
body h1,
body h2,
body h3,
body h4,
body h5,
body h6 {
    margin: 0;
}

body main p, 
body main ul, 
body main ol,
body main h1,
body main h2,
body main h3,
body main h4,
body main h5,
body main h6 {
    display: block;
    width: 100%;
    float: left;
    clear: both;
}

body main p:after,
body main ul:after,
body main ol:after,
body main h1:after,
body main h2:after,
body main h3:after,
body main h4:after,
body main h5:after,
body main h6:after {
    content: "";
    display: table;
    clear: both;
}

/* Add spacing between elements */
body p + p,
body ul + p,
body ol + p,
body p + ul,
body p + ol,
body ul + ul,
body ul + ol,
body ol + ul,
body ol + ol {
    margin-top: 1em;
}

/* Add spacing between paragraphs and headers */
body p + h1,
body p + h2,
body p + h3,
body p + h4,
body p + h5,
body p + h6,
body h1 + p,
body h2 + p,
body h3 + p,
body h4 + p,
body h5 + p,
body h6 + p, 
body h1 + h2,
body h1 + h3,
body h1 + h4,
body h1 + h5,
body h1 + h6,
body h2 + h3,
body h2 + h4,
body h2 + h5,
body h2 + h6,
body h3 + h4,
body h3 + h5,
body h3 + h6,
body h4 + h5,
body h4 + h6,
body h5 + h6,
body h6 + h1,
body h6 + h2,
body h6 + h3,
body h6 + h4,
body h6 + h5,
body ul + h1,
body ul + h2,
body ul + h3,
body ul + h4,
body ul + h5,
body ul + h6 {
    margin-top: 1em;
}

/* Add spacing after headers */
body h1 + p,
body h2 + p,
body h3 + p,
body h4 + p,
body h5 + p,
body h6 + p,
body h1 + h2,
body h1 + h3,
body h1 + h4,
body h1 + h5,
body h1 + h6,
body h2 + h3,
body h2 + h4,
body h2 + h5,
body h2 + h6,
body h3 + h4,
body h3 + h5,
body h3 + h6,
body h4 + h5,
body h4 + h6,
body h5 + h6, 
body h1 + ul,
body h1 + ol,
body h2 + ul,
body h2 + ol,
body h3 + ul,
body h3 + ol,
body h4 + ul,
body h4 + ol,
body h5 + ul,
body h5 + ol,
body h6 + ul,
body h6 + ol, 
body ul + h1,
body ul + h2,
body ul + h3,
body ul + h4,
body ul + h5,
body ul + h6 {
    margin-top: 0.5em;
}

/* Add spacing between list items */
body ul li, 
body ol li {
    margin-bottom: 0.5em;
}

/* Remove margin from last list item */
body ul li:last-child,
body ol li:last-child {
    margin-bottom: 0;
}

/* Section titles — previously Divi Customizer `h1–h6 { color: #da291c }` */
h1 {
    font-weight: 300;
    color: var(--red);
}

h2 {
    font-weight: 300;
    font-size: 2.5rem;
    color: var(--red);
}

h3 {
    font-size: 1.7rem;
    font-weight:300;
    color: var(--dark-blue);
}

h4 {
    font-size: 1.5rem;
    font-weight: 300;
    color: var(--red);
}

/* Base Typography
----------------------------------------- */
p, ul, ul li, ol, ol li {
    font-size: 1.1em;
    font-weight: 300;
    color: var(--body-colour);
}

ul li, ol li {
    padding-bottom: 10px;
}

ul li:last-of-type, ol li:last-of-type {
    margin-bottom: 0;
}

/* Section Layouts
----------------------------------------- */
section {
    padding: 4em 0;
}

section.light-background {
    background-color: #f8f8f8;
}

section.dark-background {
    background-color: var(--body-colour);
}

section.dark-background p, 
section.dark-background h2,
section.dark-background h3, 
section.dark-background h4 {
    color: #fff;
}

.no-padding-bottom {
    padding-bottom: 0 !important;
}

.no-padding-top {
    padding-top: 0 !important;
}   

/* Card Image Carousel
----------------------------------------- */
.card-image-carousel {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
}

.card-image-slides {
    display: flex;
    transition: transform 0.3s ease-in-out;
    height: 100%;
    width: 100%;
}

.card-image-slide {
    min-width: 100%;
    width: 100%;
    flex: 0 0 100%;
    height: 100%;
    position: relative;
}

.card-image-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}

.card-nav-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 2;
    transition: background-color 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-nav-arrow:hover {
    background: rgba(0, 0, 0, 0.8);
}

.card-nav-arrow.prev {
    left: 10px;
}

.card-nav-arrow.next {
    right: 10px;
}

/* Card Layout Styles
----------------------------------------- */
.card-container {
    padding: 2em 0;
}

.card-container:first-of-type {
    padding-top: 0;
}

.card-container:last-of-type {
    padding-bottom: 0;
}

.card-container .frame {
    display: flex;
    gap: 2em;
    align-items: center;
    justify-content: space-between;
}

/* Default layout (image on right) */
.card-container .card-image-container {
    width: 40%;
    flex-shrink: 0;
    aspect-ratio: 4/3;
}

.card-container .card-content {
    width: 55%;
    flex-shrink: 0;
}

/* Alternating layout */
.card-section-minimalist-2024 .card-container:nth-child(even) .frame {
    flex-direction: row-reverse;
}

.content-box.true-size-images .image-gallery {
    width: 100%;
    height: auto;
}

.true-size-images .card-container img.card-image, .true-size-images.image-gallery img {
    width: 100%;
    height: auto;
    max-height: 90vh;
    object-fit: contain;
}

.card-video-wrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
    height: 0;
    overflow: hidden;
    width: 100%;
}

.card-video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Table Styles
----------------------------------------- */
.table-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Table base styles */
table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    margin-bottom: 1em;
    min-width: 100%;
}

/* Header cells */
table th {
    background: #f5f5f5;
    font-weight: 600;
    padding: 12px 15px;
    text-align: left;
    border: 1px solid #ddd;
    white-space: nowrap;
    text-align: center;
    color: var(--body-colour);
}

/* Regular cells */
table td {
    padding: 12px 15px;
    border: 1px solid #ddd;
    white-space: nowrap;
    color: var(--body-colour);
}

/* Price cells */
table td:not(:first-child) {
    text-align: center;
}

/* Location/Course column */
table td:first-child {
    font-weight: 500;
    min-width: 150px;
}

/* Price columns - minimum width */
table td:not(:first-child) {
    min-width: 100px;
}

/* Empty cells */
table td:empty {
    background: #f9f9f9;
}

/* Price formatting */
table td[data-price],
table td:not(:first-child) {
    font-family: var(--body-font-family)!important;
    white-space: pre-wrap;
}

/* Hover effect */
table tr:hover {
    background-color: rgba(0, 0, 0, 0.02);
}

table a, .text-body-only table a {
    color: var(--white);
}

table a:hover, .text-body-only table a:hover {
    background-color: var(--orange);
    color: var(--red);
}

/* Special text handling */
table td[data-label="Please Enquire"],
table td:contains("Please Enquire") {
    color: #e74c3c;
    font-weight: 500;
}

.text-align-left, .text-align-left p, .text-align-left h1, .text-align-left h2, .text-align-left h3, .text-align-left h4, .text-align-left h5, .text-align-left h6, .text-align-left ul, .text-align-left ol, .text-align-left table, .text-align-left td, .text-align-left th {
    text-align: left!important;
}

/* FAQ Section
----------------------------------------- */
.faq-section .frame {
    display: flex;
    flex-direction: row!important;
    align-items: stretch;
    flex-wrap: wrap;
    justify-content: space-between;
}

.faq-group.faq-group--full-width {
    width: 100%;
    max-width: 100%;
}

.faq-group {
    margin-bottom: 3em;
    border-bottom: 1px solid var(--red);
    padding-bottom: 2em;
    width:47%;
}

/*
.faq-group:last-child {
    margin-bottom: 0;
    border-bottom: none;
    padding-bottom: 0;
}
*/  

.faq-title {
    color: var(--dark-blue);
    font-size: 2em;
    margin-bottom: .5em;
    font-weight: 500;
}

.faq-item {
    border: 1px solid #e0e0e0;
    margin-bottom: 0.5em;
    border-radius: 4px;
    width: 100%;
    display: inline-block;
}

.faq-question {
    padding: 1.25em 2em;
    background: #fff;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    text-align: left;
    border: none;
    transition: background-color 0.3s ease;
}

.faq-question:hover, .faq-item:hover .faq-answer, .faq-item:hover .faq-question {
    background-color: #f8f8f8;
}

.faq-question h3 {
    margin: 0!important;
    font-size: 1.5em!important;
    font-weight: 300!important;
    color: var(--body-colour)!important;
    padding-right: 2em!important;
    padding-bottom: 0!important;
}

.faq-question .icon {
    width: 20px;
    height: 20px;
    position: relative;
    flex-shrink: 0;
}

.faq-question .icon::before,
.faq-question .icon::after {
    content: '';
    position: absolute;
    background-color: var(--body-colour);
    transition: transform 0.3s ease-in-out;
}

.faq-question .icon::before {
    width: 2px;
    height: 20px;
    left: 50%;
    transform: translateX(-50%);
}

.faq-question .icon::after {
    width: 20px;
    height: 2px;
    top: 50%;
    transform: translateY(-50%);
}

.faq-question.active .icon::before {
    transform: translateX(-50%) rotate(90deg);
}

.faq-answer {
    padding: 1.25em;
    padding-top: 0;
    background-color: #fff;
    float: left;
}

.faq-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.expand-all-btn {
    background-color: var(--dark-blue);
    border: 1px solid var(--dark-blue);
    border-radius: 10px;
    padding: 8px 16px;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.3s;
    color: var(--white);
    width: 200px;
}

.expand-all-btn:hover {
    background-color: var(--light-blue);
}

.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-top: 1em;
}

.answer-content {
    padding-top: 0;
    display: block;
    float: left;
}

/* Large Carousel
----------------------------------------- */
.carousel-container {
    position: relative;
    overflow: hidden;
}

.carousel {
    display: flex;
    transition: transform 0.5s ease-in-out;
    will-change: transform;
}

.large-carousel img.header-section-image {
    position: absolute;
    bottom: 0;
    right: 0;
    height: 100%;
    max-width: none;
    width: auto;
}

@media screen and (min-width: 1400px) {
    .large-carousel img.header-section-image {
        right: 0%;
        bottom: 0%;
        height: 100%;
        transform: none;
    }
}

.carousel-static {
    width: 100%;
    position: absolute;
    bottom: 5em;
    left: 0;
    z-index: 2;
}

.carousel-slide {
    position: relative;
    min-width: 100%;
    height: 50vh;
    min-height: 500px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #fff;
    text-align: center;
    padding: 20px;
    overflow: hidden;
}

/* Carousel Background & Images */
.carousel-slide .gradient-background {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 2;
    background: linear-gradient(90deg, 
        rgba(0, 0, 0, 0.8) 0%,
        rgba(0, 0, 0, 0.6) 30%,
        rgba(0, 0, 0, 0.3) 70%,
        rgba(0, 0, 0, 0) 100%
    );
}

.carousel-slide img.carousel-background-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    object-fit: cover;
    object-position: center;
    transform: none;
}

img.header-section-image {
    position: absolute;
    bottom: -20%;
    right: -7%;
    height: 100%;
    max-width: 100%;
    rotate: 0deg;
    z-index: 2;
}

/* Carousel Content */
.carousel-container .wrapper {
    position: relative;
    z-index: 2;
    width: 1600px;
    margin: 0 auto;
    float: none;
    max-width: 100%;
}

.carousel-slide .carousel-content {
    display: flex;
    flex-direction: column;
    width: 750px;
    max-width: 100%;
    margin: 0 auto;
    text-align: left;
    border-radius: 20px;
    float: left;
    padding: 0!important;
}

.page-template-template-blogs-php .carousel-slide .carousel-content {
    padding: 2em!important;
}

.carousel-slide .carousel-content hr {
    display: inline-block;
    background: var(--red);
    border: 1px solid var(--red);
    width: 60%;
    float: left;
    margin: 1.5em 0 .5em 0;
}

.carousel-slide .carousel-content h1 {
    font-size: 2rem;
    font-weight: 100!important;
    margin: 0;
    line-height: 1em;
    margin-bottom: 0!important;
    color: #fff;
}

.carousel-slide .carousel-content h1 .main-header {
    font-weight: 500;
    margin-top: .25em;
    display: inline-block;
    font-size: 3rem;
    line-height: 1em;
}

.carousel-slide .carousel-content h2.carousel-heading {
    font-size: 2rem;
    font-weight: 100!important;
    margin: 0;
    line-height: 1em;
    margin-bottom: 0!important;
    color: #fff;
}

.carousel-slide .carousel-content h2.carousel-heading .main-header {
    font-weight: 500;
    margin-top: .25em;
    display: inline-block;
    font-size: 3rem;
    line-height: 1em;
}

/* CTA Container */
.carousel-slide .carousel-content .cta-container {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    margin-top: 1em;
    justify-content: flex-start;
}

.carousel-slide .carousel-content .cta-container .user-type-prompt {
    font-size: 2.25rem;
    margin-top: 0;
    margin-bottom: 0;
    padding-right: 1em;
    font-weight: 500;
}

.carousel-slide .carousel-content .cta-container a:first-of-type {
    margin-right: 1em;
}

.carousel-slide .carousel-content .cta-container a:nth-of-type(2) {
    background-color: var(--orange);
}

/* Navigation Elements */
.carousel-dots {
    display: flex;
}

.carousel-dots .dot {
    height: 15px;
    width: 15px;
    margin: 0 5px;
    border: 2px solid white;
    border-radius: 50%;
    display: inline-block;
    cursor: pointer;
    background-color: transparent;
    transition: background-color 0.3s ease;
}

.carousel-dots .dot.active {
    background-color: white;
}

.carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 2rem;
    color: white;
    opacity: .7;
    padding: 10px;
    cursor: pointer;
    z-index: 10;
    transition: background-color 0.3s ease;
    background: none;
    border: none;
}

.carousel-arrow:hover {
    opacity: 1;
}

.carousel-arrow-left {
    left: 1em;
}

.carousel-arrow-right {
    right: 1em;
}

/* Button Styles */
.button {
    font-weight: 500;
    padding: .5rem 1.5rem;
    background-color: var(--red);
    color: var(--white);
    border-radius: 10px;
    transition: .5s;
}

.button:hover {
    background-color: var(--orange);
}

/* Header Banner
----------------------------------------- */
.header-banner {
    position: relative;
    width: 100%;
    max-width: 100%;
    padding: 120px 0;
    background-color: #003876;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    overflow: hidden;
}

/* LCP image: discoverable in HTML with fetchpriority=high */
.header-banner__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
    pointer-events: none;
    display: block;
    margin: 0;
}

.header-banner__back-link {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    margin-bottom: 1em;
    color: #fff;
    font-size: 0.95em;
    font-weight: 500;
    text-decoration: none;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
    transition: opacity 0.2s ease;
}

.header-banner__back-link:hover {
    color: #fff;
    opacity: 0.85;
    text-decoration: none;
}

.header-banner .cta-button-container {
    position: relative;
    z-index: 2;
    margin-top: 1em;
}

.header-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1;
}

body .header-banner .frame {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding-right: 20%!important;
}

.header-banner hr {
    color: var(--red);
    background: var(--red);
    height: 1px;
    width: 60%;
    float: left;
    z-index: 2;
    position: relative;
    margin-left: 0;
}

.header-banner h1 {
    color: #fff;
    text-align: left;
    font-size: 2.5em;
    font-weight: 600;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    position: relative;
    z-index: 2;
    border-bottom: 2px solid var(--red);
    padding-bottom: .25em;
    margin-bottom: .25em;
    padding-right: 1em;
    margin-top: 0;
}

.header-banner p {
    color: #fff;
    text-align: left;
    margin: 0;
    font-size: 1.2em;
    font-weight: 400;
    position: relative;
    z-index: 2;
}

.header-banner p.sub-title {
    font-size: 2rem;
    font-weight: 300 !important;
    margin: 0;
    line-height: 1em;
    margin-bottom: 0.5em  !important;
    color: #fff;
}

img.header-section-image {
    position: absolute;
    bottom: -20%;
    right: 0;
    height: 140%;
    max-width: 2000px;
}

@media screen and (min-width: 1200px) {
    body .header-banner .frame {
        padding-right: 20%!important;
    }

    .header-banner h1,
    .header-banner p.sub-title {
        max-width: 65%;
    }

    .carousel-slide .carousel-content {
        width: 55%;
        max-width: 550px;
    }
}

body:not(.et-tb) #main-content .header-banner .container,
body:not(.et-tb-has-header) #main-content .header-banner .container {
    position: relative;
    z-index: 2;
    border-bottom: 0!important;
}

/* Course Tags in Header */
.header-banner .course-tags,
.header-banner .header-course-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 3.5em;
    width: 100%;
    position: relative;
    z-index: 2;
}

.header-banner .tag {
    padding: 6px 16px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    line-height: 1.5;
    transition: all 0.3s ease;
    text-transform: none;
    display: inline-block;
    opacity: 0.8;
    text-decoration: none;
}

.header-banner .tag:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    opacity: 1;
}

.header-banner a.tag.attraction-tag,
.header-banner .tag.attraction-tag,
.header-banner .attraction-tag,
.header-banner a.attraction-tag {
    background: var(--red, #dc3545) !important;
    background-color: var(--red, #dc3545) !important;
    color: var(--white, #fff) !important;
}

.header-banner a.tag.accommodation-tag,
.header-banner .tag.accommodation-tag,
.header-banner .accommodation-tag,
.header-banner a.accommodation-tag {
    background: var(--red, #dc3545) !important;
    background-color: var(--red, #dc3545) !important;
    color: var(--white, #fff) !important;
}

.header-banner a.tag.age-tag,
.header-banner .tag.age-tag,
.header-banner .age-tag,
.header-banner a.age-tag {
    background: var(--orange, #ff6b35) !important;
    background-color: var(--orange, #ff6b35) !important;
    color: var(--white, #fff) !important;
}

.header-banner a.tag.subject-tag,
.header-banner .tag.subject-tag,
.header-banner .subject-tag,
.header-banner a.subject-tag {
    background: var(--light-blue, #2c7fff) !important;
    background-color: var(--light-blue, #2c7fff) !important;
    color: var(--white, #fff) !important;
}

.header-banner a.tag.city-tag,
.header-banner .tag.city-tag,
.header-banner .city-tag,
.header-banner a.city-tag {
    background: #0097b2 !important;
    background-color: #0097b2 !important;
    color: var(--white, #fff) !important;
}

.header-banner a.tag.country-tag,
.header-banner .tag.country-tag,
.header-banner .country-tag,
.header-banner a.country-tag {
    background: var(--dark-blue, #003876) !important;
    background-color: var(--dark-blue, #003876) !important;
    color: var(--white, #fff) !important;
}

.header-banner a.tag.course-type-tag,
.header-banner .tag.course-type-tag,
.header-banner .course-type-tag,
.header-banner a.course-type-tag {
    background: var(--light-blue, #2c7fff) !important;
    background-color: var(--light-blue, #2c7fff) !important;
    color: var(--white, #fff) !important;
}

.header-banner a.tag.language-tag,
.header-banner .tag.language-tag,
.header-banner .language-tag,
.header-banner a.language-tag {
    background: #4e5a73 !important;
    background-color: #4e5a73 !important;
    color: var(--white, #fff) !important;
}

.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-top: 1em;
    display: block;
    width: 100%;
}

.classroom-resources {
    width: 100%;
}

/* Category Styling */
.resource-category {
    margin-bottom: 4em;
    padding: 2em;
    background: #f8f8f8;
    border-radius: 12px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.resource-category h2 {
    font-size: 2em;
    margin-bottom: 0.5em;
    color: #333;
    border-bottom: 2px solid var(--red);
    padding-bottom: 0.5em;
}

.resource-category p {
    color: #666;
    margin-bottom: 2em;
    font-size: 1.1em;
    line-height: 1.6;
}

/* Ensure resource items stay in a consistent grid */
.classroom-resources .grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
    align-items: start;
    justify-content: center;
}

/* Ensure resource items don't stretch */
.resource-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-width: 250px;
    max-width: 280px;
    margin: 0 auto;
    background: #fff;
}

#resources-list {
    padding: 3em 0;
}

/* Fix carousel width inside resource items */
.cr-resource-carousel {
    width: 100%;
    max-width: 250px;
    overflow: hidden;
    position: relative;
    margin: 0 auto;
    /* A4 proportions (1:√2) at 250px width gives us ~354px height */
    height: 254px;
    background: #f8f8f8; /* Optional: adds background to empty space */
}

/* Page count badge styling */
.page-count-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: var(--red);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: bold;
    z-index: 5;
}

/* Ensure carousel images are properly constrained */
.cr-resource-carousel img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    object-fit: contain;
}

.cr-resource-carousel .cr-carousel-slide {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    opacity: 0;
    position: absolute;
    transition: opacity 0.3s ease-in-out;
}

.cr-carousel-slide.active {
    opacity: 1;
    position: relative;
}

/* Ensure carousel wrapper works properly */
.cr-carousel-inner {
    position: relative;
    width: 100%;
    height: 100%;
}

/* Fix navigation buttons */
.cr-carousel-prev,
.cr-carousel-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 5px 10px;
    cursor: pointer;
    font-size: 18px;
    z-index: 10;
}

.cr-carousel-prev {
    left: 5px;
}

.cr-carousel-next {
    right: 5px;
}

.resource-item h3 {
    font-size: 1.2em;
    color: #333;
    margin: 0;
    line-height: 1.2;
    padding: 1em 1em .5em 1em;
}

.resource-item p {
    color: #666;
    font-size: 0.9em;
    line-height: 1.5;
    margin-top: auto;
    padding-top: 1em;
}

/* Filters Section */
.filters {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5em 2em;
    background: #fff;
    margin-bottom: 3em;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    border: 1px solid #e0e0e0;
}

.filter {
    flex: 1;
    margin: 0 10px;
}

.filter:first-child {
    margin-left: 0;
}

.filter:last-child {
    margin-right: 0;
}

.filters select {
    width: 100%;
    padding: 0.5em 1em;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 0.95em;
    color: #444;
    background: #fff;
    cursor: pointer;
    transition: border-color 0.2s ease;
}

.filters select:hover {
    border-color: #999;
}

.filters label {
    font-weight: 600;
    color: #444;
    margin-bottom: .5em;
    display: block;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .filters {
        flex-wrap: wrap;
    }
    
    .filter {
        flex: 1 1 calc(33.333% - 20px);
        margin: 10px;
    }
    
    .classroom-resources .grid {
        grid-template-columns: repeat(3, minmax(200px, 300px));
    }
}

@media (max-width: 900px) {
    .filter {
        flex: 1 1 calc(50% - 20px);
    }
    
    .classroom-resources .grid {
        grid-template-columns: repeat(2, minmax(200px, 300px));
    }
}

@media (max-width: 600px) {
    .filters {
        flex-direction: column;
    }
    
    .filter {
        flex: 1 1 100%;
        margin: 5px 0;
    }
    
    .classroom-resources .grid {
        grid-template-columns: repeat(1, minmax(200px, 300px));
    }
}

.footer-accreditations {
    padding-top:0!important;
    padding-bottom:4rem!important;
}

.filters input[type="text"] {
    width: 100%;
    padding: 0.5em 1em;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 0.95em;
    color: #444;
    background: #fff;
    transition: border-color 0.2s ease;
}

.filters input[type="text"]:focus {
    border-color: #999;
    outline: none;
}

.filters input[type="text"]::placeholder {
    color: #999;
}

/* Video resource styling */
.resource-item.video-resource {
    width: 100%;
    flex-grow: 0;
}

.video-wrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
    height: 0;
    overflow: hidden;
    margin-bottom: 15px;
    width: 100%;
}

.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Adjust grid for video items */
.classroom-resources .grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 25px;
}

.classroom-resources .grid .video-resource {
    grid-column: span 2; /* Make videos take up more space */
    max-width: 500px;
}

.classroom-resources .resource-items.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
    align-items: stretch;
}

.classroom-resources .resource-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-width: 200px;
    max-width: 250px;
    padding: .5em;
}

.cr-resource-carousel {
    width: 100%;
    max-width: 250px;
    overflow: hidden;
    position: relative;
    margin: 0 auto;
    /* A4 proportions (1:√2) at 250px width gives us ~354px height */
    height: 254px;
    background: #f8f8f8; /* Optional: adds background to empty space */
}

/* Page count badge styling */
.page-count-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: var(--red);
    color: white;
    padding: 0 4px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: bold;
    z-index: 5;
}

@media (max-width: 768px) {
    .resource-item.video-resource {
        width: 100%;
    }
}

@media (max-width: 1200px) {
    .classroom-resources .grid {
        grid-template-columns: repeat(3, minmax(250px, 1fr));
    }
}

@media (max-width: 900px) {
    .classroom-resources .grid {
        grid-template-columns: repeat(2, minmax(250px, 1fr));
    }
}

@media (max-width: 600px) {
    .classroom-resources .grid {
        grid-template-columns: repeat(1, minmax(250px, 1fr));
    }
}

/* Update the subcategory group CSS */
.subcategory-group {
    background-color: #f9f9f9;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 20px;
    border-left: 4px solid;
    grid-column: 1 / -1; /* Make it span all columns */
    width: 100%;
}

.subcategory-items.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
    margin-top: 15px;
}

.subcategory-group h4 {
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 1.3em;
    color: #444;
}

/* Pastel color variations for subcategories */
.subcategory-group:nth-of-type(5n+1) {
    background-color: #f8f4fc; /* Light lavender */
    border-left-color: #d4bfea;
}

.subcategory-group:nth-of-type(5n+2) {
    background-color: #f4f9fc; /* Light blue */
    border-left-color: #b8dcf5;
}

.subcategory-group:nth-of-type(5n+3) {
    background-color: #fcf8f4; /* Light peach */
    border-left-color: #f5d4b8;
}

.subcategory-group:nth-of-type(5n+4) {
    background-color: #f4fcf8; /* Light mint */
    border-left-color: #b8f5d4;
}

.subcategory-group:nth-of-type(5n+5) {
    background-color: #fcf4f8; /* Light pink */
    border-left-color: #f5b8d4;
}

/* Media Queries
----------------------------------------- */
@media screen and (max-width: 1600px) {
    /* Keep banner full-bleed; horizontal inset comes from inner .frame only
       so title/copy align with the rest of the site's .frame content. */
    .header-banner {
        padding: 120px 0;
    }

    .carousel-dots {
        padding-left: 2em;
    }

    .wrapper, .frame, .wrapper-ultra-wide, .wrapper-wide {
        padding-left: 2em!important;
        padding-right: 2em!important;
    }

    /* Banner copy uses padding-right: 20% for layout; keep left inset matching .frame */
    body .header-banner .frame {
        padding-left: 2em !important;
    }
}

@media screen and (max-width: 1400px) {
    section { 
        padding: 4em 2em;
    }

    .carousel-slide .wrapper {
        width: 95%;
        max-width: 1200px;
    }

    img.header-section-image {
        right: -15%;
    }
}

@media screen and (max-width: 1200px) {
    .carousel-slide .carousel-content {
        width: 600px;
    }

    .carousel-slide .carousel-content h1 .main-header {
        font-size: 2.5rem;
    }

    .carousel-slide .carousel-content h2.carousel-heading .main-header {
        font-size: 2.5rem;
    }

    img.header-section-image {
        right: -25%;
    }
}

@media screen and (max-width: 991px) {
    .carousel-slide {
        height: 60vh;
        min-height: 400px;
    }

    .carousel-slide .carousel-content {
        width: 100%;
    }

    .carousel-slide .carousel-content h1 {
        font-size: 1.75rem;
    }

    .carousel-slide .carousel-content h1 .main-header {
        font-size: 2rem;
    }

    .carousel-slide .carousel-content h2.carousel-heading {
        font-size: 1.75rem;
    }

    .carousel-slide .carousel-content h2.carousel-heading .main-header {
        font-size: 2rem;
    }

    .carousel-slide .carousel-content .cta-container {
        flex-direction: column;
        align-items: center;
    }

    .carousel-slide .carousel-content .cta-container .user-type-prompt {
        font-size: 1.75rem;
        padding-right: 0;
        margin-bottom: 1em;
        text-align: center;
    }

    img.header-section-image {
        display: none;
    }

    .carousel-static {
        bottom: 2em;
    }

    .carousel-dots {
        width: 100%;
        justify-content: center;
        margin-left: 0;
        padding-left: 0;
    }

    .column-section .frame {
        padding-left: 0!important;
        padding-right: 0!important;
    }
}

@media screen and (max-width: 768px) {
    .carousel-slide {
        height: 50vh;
        min-height: 350px;
        padding: 15px;
    }

    .carousel-slide .gradient-background {
        background: linear-gradient(180deg, 
            rgba(0, 0, 0, 0.8) 0%,
            rgba(0, 0, 0, 0.6) 50%,
            rgba(0, 0, 0, 0.3) 100%
        );
    }

    .carousel-slide .carousel-content {
        text-align: center;
    }

    .carousel-slide .carousel-content hr {
        width: 80%;
        float: none;
        margin: 1em auto;
    }

    .carousel-dots .dot {
        height: 12px;
        width: 12px;
    }

    .carousel-arrow {
        font-size: 1.5rem;
    }

    .carousel-arrow-left {
        left: 0.5em;
    }

    .carousel-arrow-right {
        right: 0.5em;
    }
}

@media screen and (max-width: 480px) {
    .carousel-slide {
        min-height: 300px;
        padding: 10px;
    }

    .carousel-slide .carousel-content h1 {
        font-size: 1.5rem;
    }

    .carousel-slide .carousel-content h1 .main-header {
        font-size: 1.75rem;
    }

    .carousel-slide .carousel-content h2.carousel-heading {
        font-size: 1.5rem;
    }

    .carousel-slide .carousel-content h2.carousel-heading .main-header {
        font-size: 1.75rem;
    }

    .carousel-slide .carousel-content .cta-container .user-type-prompt {
        font-size: 1.5rem;
    }

    .carousel-dots .dot {
        height: 10px;
        width: 10px;
        margin: 0 3px;
    }

    .button {
        padding: .4rem 1.2rem;
        font-size: 0.9rem;
    }
}

/* Image container styles */
.card-container .card-image-container {
    display: flex;
    align-items: center;    
    justify-content: center;
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    height: 100%;
}

.card-container .card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Content spacing */
.card-container .card-content {
    padding: 1em 0;
}

.card-container .card-content > * {
    margin: 0;
}

.card-container .card-content > * + * {
    margin-top: 0.5em;
}

.card-container .card-content h3 {
    color: var(--dark-blue);
    font-size: 2em;
}

.card-container .card-content h4 {
    opacity: 1;
    color: var(--red);
    font-weight: 300;
}

.card-container .card-content ul,
.card-container .card-content ol {
    margin-bottom: 0;
    padding-left: 1.5em;
}

.card-container .card-content li {
    margin-bottom: 0.25em;
    padding-bottom: 0;
}

.card-container .card-content li:last-child {
    margin-bottom: 0;
}

.card-container .card-content li > ul,
.card-container .card-content li > ol {
    margin-top: 0.25em;
    margin-bottom: 0;
    padding-left: 1em;
}

/* CTA Banner
----------------------------------------- */
.cta-banner {
    background: var(--dark-blue);
    color: #fff;
    padding: .5em 0;
}

.cta-banner .wrapper-ultra-wide {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1600px;
    margin: 0 auto;
}

.cta-banner .wrapper-ultra-wide .point {
    font-size: 1rem;
}

.cta-banner .wrapper-ultra-wide .point a {
    color: #fff;
}

.cta-banner .wrapper-ultra-wide .point i {
    margin-right: .5em;
}

/* Fix text wrapping around images */
.content-box {
    overflow: visible;
}

.content-box img.alignright {
    float: right;
    margin: 0 0 1em 1em;
}

.content-box img.alignleft {
    float: left;
    margin: 0 1em 1em 0;
}

.content-box img.aligncenter {
    float: none;
    display: block;
    margin: 1em auto;
    max-width: 100%;
}

/* Allow text wrapping in content boxes */
.content-box p, 
.content-box h1,
.content-box h2,
.content-box h3,
.content-box h4,
.content-box h5,
.content-box h6 {
    margin: 0;
    padding: 0;
    line-height: 1.2;
}

/* Proper list styling */
.content-box ul,
.content-box ol {
    display: block;
    margin: 1em 0;
    padding-left: 2em;
    clear: both;
    width: 100%;
}

.content-box ul {
    list-style-type: disc !important;
}

.content-box ol {
    list-style-type: decimal !important;
}

.content-box ul li,
.content-box ol li {
    display: list-item !important;
    margin: 0.5em 0;
    list-style-type: inherit !important;
}

/* Create a new block formatting context */
.content-box {
    display: flow-root;
}
/* ----------------------------------------- */
.multi-column-section {
    display: flex;
    flex-direction: column;
    flex: 1;
    width: 100%;
}

.multi-column-section h2 {
    text-align: left;
    font-size: 2.5em;
    margin-bottom: .5em;
}

.multi-column-section h3 {
    color: var(--dark-blue);
    margin-top: 0;
    margin-bottom: 0em!important;
    font-size: 2em;
    text-align: center;
    width: 100%;
}

/* Blue Gradient Variant */
.multi-column-section.blue-gradient {
    position: relative;
}

.multi-column-section.blue-gradient::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #00395c;
    opacity: 0.75;
    z-index: 1;
}

.multi-column-section.blue-gradient h2, 
.multi-column-section.blue-gradient p, 
.multi-column-section.blue-gradient h3 {
    color: #fff;
}

.multi-column-section.blue-gradient .cta a {
    background: #2c7fff;
}

/* Column Layout */
.multi-column-section .columns {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    gap: 30px; /* Use gap instead of margins for consistent spacing */
}

.multi-column-section .column {
    flex: 1; /* Allow columns to grow */
    min-width: 300px; /* Minimum width before wrapping */
    /* Keep existing box styling */
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    border: 1px solid #e0e0e0;
    padding: 40px;
    display: flex;
    flex-direction: column;
}

.multi-column-section .column p:last-of-type {
    margin-bottom: 1em!important;
}

.multi-column-section .cta {
    margin-top: auto!important;
}

/* Three columns layout */
.three-columns.multi-column-section .column {
    flex-basis: calc(33.33% - 20px); /* Base size for three columns */
}

/* Four columns layout */
.four-columns.multi-column-section .column {
    flex-basis: calc(25% - 22.5px); /* Base size for four columns */
}

/* Responsive breakpoints */
@media (max-width: 1180px) {
    .multi-column-section .column,
    .three-columns.multi-column-section .column,
    .four-columns.multi-column-section .column {
        flex-basis: calc(50% - 15px); /* Two columns on medium screens */
    }
}

@media (max-width: 767px) {
    .multi-column-section .column,
    .three-columns.multi-column-section .column,
    .four-columns.multi-column-section .column {
        flex-basis: 100%; /* Full width on mobile */
    }
}

/* Large Images Variant */
.large-images .column-images {
    position: relative;
    width: 100%;
    height: 300px;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 2em;
}

.large-images .column-images img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 100%;
    min-height: 100%;
    width: 100%;
    height: 100%;
    max-width: none;
    z-index: 1;
    object-fit: cover;
}

/* Utility Classes */
.text-align-center .column h1, 
.text-align-center .column h2, 
.text-align-center .column h3, 
.text-align-center .column h4, 
.text-align-center .column h5, 
.text-align-center .column p {
    text-align: center;
}

.frame.flexbox {
    display: flex;
}

.bit-1.flexbox {
    display: flex;
    flex: 1;
    height: 100%;
}

.multi-column-section .wrapper-wide {
    z-index: 2;
    position: relative;
}

.multi-column-section .columns .column img[class*="wp-image"],
.multi-column-section .columns .column-inner img[class*="wp-image"] {
    height: auto;
    width: auto;
    max-height: 100%;
    max-width: 100%;
}

/* Target both non-wp-image images and images with a specific class */
.multi-column-section .columns .column img:not([class*="wp-image"]) {
    max-height:200px;
    margin: 0 auto 1em auto;
    float:none;
    display: block;
    width: auto;
}

.multi-column-section .cta {
    display: block;
    margin-top: 1em;
    float: left; 
    width: 100%;
    text-align: center;
}

.multi-column-section .cta a {
    display: inline-block;
    width: auto;
    float: none;
}

@keyframes scroll {
    from {
        transform: translateX(var(--start-offset));
    }
    to {
        transform: translateX(calc(var(--start-offset) - 50%));
    }
}

/* Media Queries
----------------------------------------- */
@media screen and (max-width: 1200px) {
    .card-container .frame {
        gap: 1.5em;
    }
    
    .card-container .card-image-container {
        width: 45%;
    }
    
    .card-container .card-content {
        width: 55%;
    }

    .cta-banner .wrapper-ultra-wide {
        max-width: 95%;
        padding: 0 1em;
    }
}

@media screen and (max-width: 991px) {
    .card-container {
        padding: 2em 0;
    }

    .card-container .frame {
        flex-direction: column !important; /* Override alternating layout */
        gap: 1.5em;
    }

    .card-container .card-image-container {
        width: 100%;
        aspect-ratio: 16/9; /* Wider aspect ratio for mobile */
        order: -1; /* Always show image first */
    }

    .card-container .card-content {
        width: 100%;
        padding: 0;
    }

    .logo-carousel-section {
        padding: 3em 0;
    }
    
    .logo-image {
        max-height: 80px;
    }

    .cta-banner .wrapper-ultra-wide {
        flex-wrap: wrap;
        gap: 0.5em;
        justify-content: center;
        text-align: center;
    }

    .cta-banner .wrapper-ultra-wide .point {
        width: 100%;
    }

    .downloads-table {
        font-size: 0.9em;
    }

    .downloads-table .category-header {
        font-size: 22px;
    }

    .frame.flexbox, .column-section .frame {
        padding-left: 0!important;
        padding-right: 0!important;
    }

    .text-body-only div, .text-body-only span {
        float: left;
    }

    .wrapper, .frame, .wrapper-ultra-wide, .wrapper-wide {
        padding-left: 1.5em!important;
        padding-right: 1.5em!important;
    }

    .faq-group {
        width: 100%;
    }

    footer .bit-75, footer .bit-4 {
        width: 100%;
    }
}

@media screen and (max-width: 768px) {
    .table-wrapper {
        margin: 1em -15px;
        padding: 0 15px;
        border-radius: 0;
    }
    
    table {
        font-size: 14px;
    }
    
    table th,
    table td {
        padding: 8px 10px;
        text-align: center;
    }

    .faq-title {
        font-size: 1.5em;
    }

    .faq-question h3 {
        font-size: 1em;
    }

    .logo-carousel-section {
        padding: 2em 0;
    }
    
    .logo-image {
        max-height: 60px;
    }
    
    .logo-track {
        gap: 2em;
    }

    .cta-banner {
        padding: 1em 0;
    }

    .cta-banner .wrapper-ultra-wide .point {
        font-size: 0.9rem;
    }

    .filters {
        flex-direction: column;
        padding: 1.5em;
    }

    .filters select {
        width: 100%;
        margin-right: 0;
    }

    .filters h3 {
        text-align: center;
    }

    .downloads-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .downloads-table .category-header {
        font-size: 20px;
    }

    .downloads-section .button {
        float: none;
        width: 100%;
        margin-top: 1em;
    }

    .multi-column-section .columns { 
        flex-direction: column;
        flex-wrap: nowrap;
    }

    .header-banner {
        padding: 120px 2em;
    }
    
    .header-banner h1 {
        font-size: 2em;
    }

    img.header-section-image {
        max-width: 200px;
        opacity: 0.5;
    }

    body .header-banner .frame {
        padding-right: 0!important;
    }

    .header-banner .course-tags,
    .header-banner .header-course-tags {
        gap: 6px;
        margin-top: 1em;
    }

    .header-banner .tag {
        padding: 5px 12px;
        font-size: 11px;
    }

    .bit-1.flexbox {
        display: block;
        float: left; 
        width: 100%;
    }
}

@media screen and (max-width: 480px) {
    .card-container {
        padding: 1em 0;
    }

    .card-container .card-image-container {
        aspect-ratio: 4/3; /* Return to square-ish ratio on mobile */
    }

    .cta-banner .wrapper-ultra-wide {
        gap: 1em;
    }

    .cta-banner .wrapper-ultra-wide .point {
        font-size: 0.85rem;
    }

    .downloads-table td,
    .downloads-table th {
        padding: 10px;
    }

    .downloads-table .category-header {
        font-size: 18px;
    }

    .filters {
        padding: 1em;
    }

    .filters select {
        font-size: 14px;
    }

    .header-banner h1 {
        font-size: 1.75em;
    }

    .header-banner .course-tags,
    .header-banner .header-course-tags {
        gap: 5px;
        margin-top: 0.75em;
    }

    .header-banner .tag {
        padding: 4px 10px;
        font-size: 10px;
        border-radius: 10px;
    }

    img.header-section-image {
        max-width: 150px;
    }
}

/* Column Section Layout
----------------------------------------- */
.acf-map {
    width: 100%;
    height: 400px;
}

.acf-map img {
    max-width: inherit !important;
}

.column-section {
    display: flex; 
    flex-direction: row; 
    justify-content: space-between;
    gap: 2em;
}

.column-section .left-side-content {
    width: 60%;
    flex: 0 0 60%;
    display: flex;
    flex-direction: column;
}

.column-section .right-side-content {
    width: 38%;
    flex: 0 0 38%;
    display: flex;
    flex-direction: column;
}

.column-section .content-box {
    width: 100%;
    padding: 2em;
    background: #fff;
    margin-bottom: 1.75em;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    border: 1px solid #e0e0e0;
    overflow: hidden;
}

/* Red Background Variant */
.column-section .content-box.red-background-textarea {
    background: var(--red);
}

.column-section .content-box.dark-blue-background-textarea {
    background: var(--dark-blue);
}

.column-section .content-box.light-blue-background-textarea {
    background: var(--light-blue);
}

.column-section .content-box.red-background-textarea a, .column-section .content-box.dark-blue-background-textarea a, .column-section .content-box.light-blue-background-textarea a,
.column-section .content-box.red-background-textarea p, .column-section .content-box.dark-blue-background-textarea p, .column-section .content-box.light-blue-background-textarea p,
.column-section .content-box.red-background-textarea h2, .column-section .content-box.dark-blue-background-textarea h2, .column-section .content-box.light-blue-background-textarea h2,
.column-section .content-box.red-background-textarea h3, .column-section .content-box.dark-blue-background-textarea h3, .column-section .content-box.light-blue-background-textarea h3,
.column-section .content-box.red-background-textarea h4, .column-section .content-box.dark-blue-background-textarea h4, .column-section .content-box.light-blue-background-textarea h4,
.column-section .content-box.red-background-textarea h5, .column-section .content-box.dark-blue-background-textarea h5, .column-section .content-box.light-blue-background-textarea h5,
.column-section .content-box.red-background-textarea h6, .column-section .content-box.dark-blue-background-textarea h6, .column-section .content-box.light-blue-background-textarea h6 {
    color: var(--white)!important;
}

.column-section .content-box.red-background-textarea .button, .column-section .content-box.dark-blue-background-textarea .button, .column-section .content-box.light-blue-background-textarea .button    {
    background-color: var(--white);
    color: var(--red);
}

.column-section .content-box.red-background-textarea a, .column-section .content-box.dark-blue-background-textarea a, .column-section .content-box.light-blue-background-textarea a {
    font-weight: 700;
}

/* Quote accent — previously Divi `blockquote { border-left: 5px solid; … }` */
blockquote {
    float: left;
    width: 100%;
    margin: 20px 0 30px;
    padding-left: 20px;
    border-left: 5px solid var(--dark-blue);
    box-sizing: border-box;
}

blockquote p {
    padding-bottom: 0;
}

.column-section .content-box.red-background-textarea blockquote, .column-section .content-box.dark-blue-background-textarea blockquote, .column-section .content-box.light-blue-background-textarea blockquote {
    border-color: var(--white);
    display: block;
    float: left;
    padding: 1em;
}

/* Image Gallery */
.true-size-images .image-gallery-slides, .true-size-images .image-gallery-slide {
    height: auto;
}

.true-size-images .image-gallery-slides {
    align-items: flex-start;
    overflow: visible;
}

.true-size-images .image-gallery-slide {
    position: relative;
}

.image-gallery.true-size-images .image-gallery-slide {
    height: 100%;
}

.image-gallery.true-size-images .image-gallery-slide img {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

.content-box .image-gallery {
    position: relative;
    overflow: hidden;
    width: 100%;
    border-radius: 8px;
    height: 400px;
}

.content-box .image-gallery.true-size-images {
    height: auto;
}

.image-gallery-slides {
    display: flex;
    transition: transform 0.3s ease-in-out;
    height: 100%;
    width: 100%;
}

.image-gallery-slide {
    min-width: 100%;
    width: 100%;
    flex: 0 0 100%;
    height: 100%;
    position: relative;
}

.image-gallery-slide img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Alt text banner for gallery images */
.image-gallery-slide .image-alt-banner {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 12px 16px;
    font-size: 14px;
    line-height: 1.4;
    z-index: 1;
    opacity: 0;
    transform: translateY(100%);
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: none;
}

.image-gallery-slide:hover .image-alt-banner,
.image-gallery-slide:focus-within .image-alt-banner,
.image-gallery.show-captions .image-alt-banner {
    opacity: 1;
    transform: translateY(0);
}

/* Alt text banner for lightbox images */
.lightbox-slide {
    position: relative;
}

.lightbox-slide .image-alt-banner {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 12px 16px;
    font-size: 14px;
    line-height: 1.4;
    z-index: 10;
}

.content-box .button {
    margin-top: .25em;
    margin-bottom: 0;
}

/* Gallery Navigation */
.gallery-nav-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 2;
    transition: background-color 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gallery-nav-arrow:hover {
    background: rgba(0, 0, 0, 0.8);
}

.gallery-nav-arrow.prev {
    left: 10px;
}

.gallery-nav-arrow.next {
    right: 10px;
}

/* YouTube Video Container */
.youtube-video {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}

.youtube-video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Media Queries
----------------------------------------- */
@media screen and (max-width: 1200px) {
    .column-section {
        gap: 1.5em;
    }
    
    .column-section .left-side-content {
        width: 55%;
        flex: 0 0 50%;
    }
    
    .column-section .right-side-content {
        width: 43%;
        flex: 0 0 43%;
    }
    
    .column-section .content-box {
        padding: 1.5em;
    }
}

@media screen and (max-width: 991px) {
    .column-section {
        flex-direction: column;
        gap: 1em;
        width: 100%;
    }
    
    .column-section .left-side-content,
    .column-section .right-side-content {
        width: 100%;
    }
    
    .content-box .image-gallery {
        height: 350px;
    }
    
    .acf-map {
        height: 350px;
    }
}

@media screen and (max-width: 768px) {
    .column-section .content-box {
        padding: 1.25em;
        margin-bottom: 1em;
    }
    
    .content-box .image-gallery {
        height: 300px;
    }
    
    .acf-map {
        height: 300px;
    }
    
    .column-section table {
        white-space: nowrap;
    }
    
    .column-section .table-wrapper {
        border: 1px solid #ddd;
        border-radius: 4px;
        margin: 0 -15px;
        padding: 0 15px;
    }
    
    .gallery-nav-arrow {
        width: 35px;
        height: 35px;
    }
}

@media screen and (max-width: 480px) {
    .column-section .content-box {
        padding: 1em;
    }
    
    .content-box .image-gallery {
        height: 250px;
    }
    
    .acf-map {
        height: 250px;
    }
    
    .gallery-nav-arrow {
        width: 30px;
        height: 30px;
    }
}

/* Footer Styles
----------------------------------------- */
body #main-footer.footer-copyright {
    background-color: var(--dark-blue);
    color: var(--white);
    padding: 5rem 0;
}

body #et-footer-nav {
    background-color: var(--body-colour);
    padding: 15px 0;
}

body #et-footer-nav a {
    color: var(--white);
    text-decoration: none;
    transition: opacity 0.3s ease;
}

body #et-footer-nav a:hover {
    opacity: 0.7;
}

body #et-footer-nav .frame {
    display: flex;
    flex-direction: row;
    align-items: center; 
    justify-content: space-between;
    color: var(--white);
    font-size: 15px;
}

/* Previously provided by Divi footer.css */
body #et-footer-nav .bottom-nav {
    list-style: none;
    margin: 0;
    padding: 0;
}

body #et-footer-nav .bottom-nav li {
    display: inline-block;
    font-weight: 600;
    font-size: 14px;
    padding-right: 22px;
    padding-bottom: 0;
    margin: 0;
}

body #et-footer-nav .bottom-nav li:last-child {
    padding-right: 0;
}

body #et-footer-nav .copyright {
    white-space: nowrap;
}

.megamenu-header {
    width: 100%;
    transition: all 0.3s ease;
}

.mega-menu-sub-items {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1rem;
}

footer .mega-menu-content-footer {
    display: flex;
    flex-direction: column;
    flex: 0 0 25%;
    width: 25%;
    margin-bottom: 2rem;
    box-sizing: border-box;
    padding-right: 2rem;
}

footer .mega-menu-grid {
    display: flex !important;
    flex-wrap: nowrap;
    align-items: flex-start;
    width: 100%;
    padding: 0;
    gap: 0;
}

footer .footer-countries-wrapper {
    flex: 0 0 75%;
    width: 75%;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    box-sizing: border-box;
}

footer .footer-destinations-header {
    flex: 0 0 100%;
    width: 100%;
    margin-bottom: 1.2rem;
}

footer .footer-country {
    flex: 0 0 33.33%;
    width: 33.33%;
    display: flex;
    flex-direction: column;
    margin-bottom: 6px;
    padding-right: 2rem;
    box-sizing: border-box;
}

footer .bit-75 {
    width: 75%;
}

footer .bit-4 {
    width: 25%;
    text-align: right;
}

footer .footer-logo {
    width: max-content;
    max-height: 100px;
    width: auto;
}

footer .footer-contact-details p {
    font-size: 1rem;
    line-height: 1.25rem;
    color: var(--white);
}

footer .footer-contact-details {
    font-size: 0.9rem;
    line-height: 1rem;
}

footer .footer-contact-details a {
    color: var(--white);
    font-weight: 700;
    margin-bottom: 0.25rem;
    display: block;
    float: left;
    width: 100%;
}

footer .social-links {
    display: flex;
    flex-direction: row;
    gap: 1em;
    width: 100%;
    margin-top: 3em;
    justify-content: flex-end;
}

footer .social-links a {
    color: var(--white);
    font-size: 1.25rem;
    width: auto;
}

footer .mega-menu-cities {
    padding: .5rem 0;
}

footer ul.mega-menu-wrapper li.menu-item,
footer .strapline-header-inner .top-nav-menu li {
    padding: .69rem 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

ul.mega-menu-wrapper li.menu-item,
.strapline-header-inner .top-nav-menu li {
    margin-bottom: 0 !important;
}

footer .mega-menu-cities a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: opacity 0.3s ease;
    color: var(--white);
    width: 100%;
    font-weight: 400;
}

header .mega-menu-grid, nav .mega-menu-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    color: var(--white);
}

.country-header {
    color: var(--white);
    font-size: 1.4rem;
    font-weight: 700;
    padding-bottom: .75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    margin-bottom: .5em;
}

.footer-country-toggle {
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    user-select: none;
    font-size: 1rem;
    font-weight: 400;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding: .7rem 0;
    margin-bottom: 0;
}

.footer-country-toggle:hover {
    opacity: 0.8;
}

.footer-country-arrow {
    font-size: 0.8rem;
    transition: transform 0.25s ease;
    display: inline-block;
    transform: rotate(0deg);
    opacity: 0.7;
}

.footer-country-toggle.footer-country-open .footer-country-arrow {
    transform: rotate(90deg);
}

.mega-menu-cities {
    display: flex;
    flex-direction: column;
    gap: 0;
    list-style: none;
    margin-bottom: 0;
    padding-left: 0;
}

.city-menu {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.city-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.25rem 0;
    cursor: pointer;
    transition: opacity 0.3s ease;
}

.city-header:hover {
    opacity: 0.8;
}

.city-name {
    font-weight: 400;
    font-size: 1rem;
}

.toggle-icon {
    font-size: 0.8rem;
    transition: transform 0.3s ease;
}

.city-menu.active .toggle-icon {
    transform: rotate(90deg);
}

.city-courses {
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.5rem 0 1rem 1rem;
    display:none; 
}

.city-menu.active .city-courses {
    display: flex;
}

.city-courses a {
    color: var(--white);
    text-decoration: none;
    font-size: 0.9rem;
    opacity: 0.8;
    transition: opacity 0.3s ease;
    width: 100%;
    display: block;
    padding-top: 0;
}

.city-courses a:last-of-type {
    border-bottom: none;
}

.city-courses a:hover {
    opacity: 1;
}

.footer-accreditations {
    padding: 3rem 0;
}

.footer-accreditations .flex {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2rem;
}

.footer-accreditations img {
    height: 80px;
    width: auto;
}

@media (max-width: 1440px) {
    #main-footer.footer-copyright {
        padding: 5rem 2rem;
    }
}

@media (max-width: 980px) {
    .mega-menu-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    footer .frame {
        flex-direction: column-reverse;
    }

    footer .bit-75 {
        width: 100%;
        text-align: left !important;
    }

    footer .bit-4 {
        width: 100%;
        text-align: center !important;
    }

    footer .social-links {
        justify-content: center;
    }

    footer .footer-contact-details {
        margin-bottom: 2rem;
    }

    footer .mega-menu-grid {
        flex-direction: column !important;
    }

    footer .mega-menu-content-footer {
        flex: 0 0 100%;
        width: 100%;
        padding-right: 0;
    }

    footer .footer-countries-wrapper {
        flex: 0 0 100%;
        width: 100%;
    }

    footer .footer-country {
        flex: 0 0 50%;
        width: 50%;
    }

    footer .footer-destinations-header {
        margin-bottom: 1rem;
    }

    footer .mega-menu-cities a {
        justify-content: flex-start;
    }

    #et-footer-nav .frame {
        flex-direction: column;
        gap: 0.75rem;
        padding: 1rem 0;
        text-align: center;
    }

    #et-footer-nav .bottom-nav {
        text-align: center;
    }

    #et-footer-nav .bottom-nav li {
        padding-right: 14px;
    }

    #footer-info, .bottom-nav {
        padding-top: 0;
    }

    .city-header {
        justify-content: flex-start;
    }

    .city-name {
        margin-right: 0.5rem;
    }

    .city-courses {
        padding: 1rem 0;
    }

    .footer-accreditations img {
        height: 50px;
        width: auto;
    }
}

@media (max-width: 767px) {
    .mega-menu-grid {
        grid-template-columns: 1fr;
    }

    footer .footer-country {
        flex: 0 0 100%;
        width: 100%;
        padding-right: 0;
    }
}

/* WordPress Core Image Alignment Classes - Refined Fix */
.entry-content img.alignright,
.entry-content .alignright {
    float: right !important;
    margin: 0 0 1em 1em !important;
}

.entry-content img.alignleft,
.entry-content .alignleft {
    float: left !important;
    margin: 0 1em 1em 0 !important;
}

.entry-content img.aligncenter,
.entry-content .aligncenter {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    float: none !important;
}

/* Minimal fix for text wrapping around images */
.content-box .text-only:after,
.content-box .red-background-textarea:after {
    content: "";
    display: block;
    clear: both;
}

/* Ensure images in content boxes display properly */
.content-box img {
    max-width: 100%;
    height: auto;
}

/* WordPress Block Editor Alignment Classes */
.entry-content .wp-block-image.aligncenter,
.entry-content .wp-block-image .aligncenter {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    float: none !important;
}

.entry-content .wp-block-image.alignleft,
.entry-content .wp-block-image .alignleft {
    float: left !important;
    margin: 0 1em 1em 0 !important;
}

.entry-content .wp-block-image.alignright,
.entry-content .wp-block-image .alignright {
    float: right !important;
    margin: 0 0 1em 1em !important;
}

/* Full Width and Wide Width Blocks */
.entry-content .alignfull {
    margin-left: calc(-100vw / 2 + 100% / 2) !important;
    margin-right: calc(-100vw / 2 + 100% / 2) !important;
    max-width: 100vw !important;
    width: 100vw !important;
}

.entry-content .alignwide {
    margin-left: -10% !important;
    margin-right: -10% !important;
    max-width: 120% !important;
    width: 120% !important;
}

/* Caption Alignment */
.entry-content .wp-caption.aligncenter {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
}

.entry-content .wp-caption.alignleft {
    float: left !important;
    margin: 0 1em 1em 0 !important;
    text-align: left !important;
}

.entry-content .wp-caption.alignright {
    float: right !important;
    margin: 0 0 1em 1em !important;
    text-align: right !important;
}

/* Text Alignment Classes */
.entry-content .has-text-align-center,
.entry-content .text-center {
    text-align: center !important;
}

.entry-content .has-text-align-left,
.entry-content .text-left {
    text-align: left !important;
}

.entry-content .has-text-align-right,
.entry-content .text-right {
    text-align: right !important;
}

/* Media & Text Block Alignment */
.entry-content .wp-block-media-text.alignwide,
.entry-content .wp-block-media-text.alignfull {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Fix for card-section content layout */
.card-section-minimalist-2024.general-content {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.content-box {
    overflow: visible;
}

.content-box img:not(.card-image):not(.carousel-background-image):not(.header-section-image) {
    height: auto;
    margin: 0 1em 1em 0;
    float: left;
}

.content-box img.alignright {
    float: right;
    margin: 0 0 1em 1em;
}

.content-box img.alignleft {
    float: left;
    margin: 0 1em 1em 0;
}

.content-box img.aligncenter {
    float: none;
    display: block;
    margin: 1em auto;
    max-width: 100%;
}

/* Allow text wrapping in content boxes */
.content-box p, 
.content-box h1,
.content-box h2,
.content-box h3,
.content-box h4,
.content-box h5,
.content-box h6 {
    margin: 0;
    padding: 0;
    line-height: 1.5;
}

/* Create a new block formatting context */
.content-box {
    display: flow-root;
}

/* Three Columns Override */
.three-columns.multi-column-section .columns {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.three-columns.multi-column-section .column {
    width: 31%; /* Slightly less than 33.33% to account for margins */
    margin-bottom: 30px;
}

/* Four-column layout */
.four-columns.multi-column-section .columns {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.four-columns.multi-column-section .column {
    width: 23%; /* Slightly less than 25% to account for margins */
    margin-bottom: 30px;
}

/* Responsive breakpoints */
@media (max-width: 980px) {
    /* Three columns becomes two columns */
    .three-columns.multi-column-section .column {
        width: 48% !important;
    }
    
    /* Four columns becomes two columns */
    .four-columns.multi-column-section .column {
        width: 48% !important;
    }
}

@media (max-width: 767px) {
    /* All multi-column layouts become single column */
    .three-columns.multi-column-section .column,
    .four-columns.multi-column-section .column {
        width: 100% !important;
    }
}

/* Content spacing: keep a simple vertical rhythm and no trailing gap */
.content-box > div > * {
    margin: 0;
    padding: 0;
}

.content-box > div > * + * {
    margin-top: 0.5em;
}

.content-box .text-only {
    padding: 0;
}

.content-box ul,
.content-box ol {
    padding-left: 1.5em;
    margin-bottom: 0;
}

.content-box ul li,
.content-box ol li {
    margin-bottom: 0.25em;
    padding-bottom: 0;
}

.content-box ul li:last-child,
.content-box ol li:last-child {
    margin-bottom: 0;
}

.content-box ul li ul,
.content-box ol li ol,
.content-box ul li ol,
.content-box ol li ul {
    padding-left: 1em;
    margin-top: 0.25em;
    margin-bottom: 0;
}

/* Remove trailing space from rich text containers */
.card-container .card-content > :last-child,
.content-box > :last-child,
.content-box > div > :last-child,
.content-box .text-only > :last-child {
    margin-bottom: 0 !important;
}

/* Plain text flow inside frame containers */
.frame > h1,
.frame > h2,
.frame > h3,
.frame > h4,
.frame > h5,
.frame > h6,
.frame > p,
.frame > ul,
.frame > ol {
    margin: 0;
}

/* Body copy rhythm */
.frame > p + p,
.frame > ul + p,
.frame > ol + p,
.frame > ul + ul,
.frame > ul + ol,
.frame > ol + ul,
.frame > ol + ol {
    margin-top: 0.5em;
}

/* Lists should sit clearly below the line introducing them */
.frame > p + ul,
.frame > p + ol {
    margin-top: 0.65em;
}

/* Section headers: more space above than below */
.frame > p + h1,
.frame > p + h2,
.frame > p + h3,
.frame > ul + h1,
.frame > ul + h2,
.frame > ul + h3,
.frame > ol + h1,
.frame > ol + h2,
.frame > ol + h3 {
    margin-top: 1.2em;
}

/* Subheaders: moderate break above, tight below */
.frame > p + h4,
.frame > p + h5,
.frame > p + h6,
.frame > ul + h4,
.frame > ul + h5,
.frame > ul + h6,
.frame > ol + h4,
.frame > ol + h5,
.frame > ol + h6 {
    margin-top: 0.8em;
}

.frame > h1 + p,
.frame > h1 + ul,
.frame > h1 + ol,
.frame > h2 + p,
.frame > h2 + ul,
.frame > h2 + ol,
.frame > h3 + p,
.frame > h3 + ul,
.frame > h3 + ol {
    margin-top: 0.3em;
}

.frame > h4 + p,
.frame > h4 + ul,
.frame > h4 + ol,
.frame > h5 + p,
.frame > h5 + ul,
.frame > h5 + ol,
.frame > h6 + p,
.frame > h6 + ul,
.frame > h6 + ol {
    margin-top: 0.2em;
}

.frame > h1 + h2,
.frame > h2 + h3,
.frame > h3 + h4 {
    margin-top: 0.4em;
}

.frame > ul,
.frame > ol {
    padding-left: 1.5em;
}

.frame > ul li,
.frame > ol li {
    margin: 0;
    padding: 0;
}

.frame > ul li + li,
.frame > ol li + li {
    margin-top: 0.35em;
}

/* ==========================================================================
   Course Summary Pills
   ========================================================================== */

.course-summary-section {
    padding-top: 1.5em;
    padding-bottom: 1.5em;
}

.course-summary-pills {
    display: grid;
    gap: 14px;
    width: 100%;
}

/* Split-content columns: 3 per row */
.course-summary-pills--split {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Other Sections full-width: evenly fill width, max 9 per row (cols set via --course-pill-cols) */
.course-summary-pills--full {
    grid-template-columns: repeat(var(--course-pill-cols, 9), minmax(0, 1fr));
}

.column-section .content-box.no-padding .course-summary-pills {
    margin: 0;
}

.course-pill {
    display: flex;
    flex-direction: column;
    border-radius: 6px;
    overflow: hidden;
    min-height: 88px;
    box-shadow: 0 1px 2px rgba(54, 67, 90, 0.08);
}

.course-pill__header {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 12px 10px;
    font-weight: 700;
    font-size: 15px;
    line-height: 1.25;
    color: #ffffff;
    flex: 1 1 auto;
}

.course-pill__body {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 12px 10px;
    font-weight: 600;
    font-size: 15px;
    line-height: 1.3;
    background: #eef3f8;
    flex: 1 1 auto;
}

.course-summary-pills--full .course-pill__header,
.course-summary-pills--full .course-pill__body {
    font-size: 13px;
    padding: 10px 6px;
}

.course-pill--slate .course-pill__header { background-color: #36435a; }
.course-pill--slate .course-pill__body { color: #36435a; }

.course-pill--grey .course-pill__header { background-color: #8a94a6; }
.course-pill--grey .course-pill__body { color: #8a94a6; }

.course-pill--teal .course-pill__header { background-color: #1a9db5; }
.course-pill--teal .course-pill__body { color: #1a9db5; }

.course-pill--light-teal .course-pill__header { background-color: #4bbfd0; }
.course-pill--light-teal .course-pill__body { color: #4bbfd0; }

.course-pill--amber .course-pill__header { background-color: #f5a623; }
.course-pill--amber .course-pill__body { color: #f5a623; }

.course-pill--blue .course-pill__header { background-color: #015eb7; }
.course-pill--blue .course-pill__body { color: #015eb7; }

.course-pill--light-blue .course-pill__header { background-color: #7bacd5; }
.course-pill--light-blue .course-pill__body { color: #7bacd5; }

.course-pill--maroon .course-pill__header { background-color: #8f2d2d; }
.course-pill--maroon .course-pill__body { color: #8f2d2d; }

.course-pill--red .course-pill__header { background-color: #e03b2f; }
.course-pill--red .course-pill__body { color: #e03b2f; }

@media (max-width: 980px) {
    .course-summary-pills--split {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .course-summary-pills--full {
        grid-template-columns: repeat(min(3, var(--course-pill-cols, 3)), minmax(0, 1fr));
    }

    .course-summary-pills--full .course-pill__header,
    .course-summary-pills--full .course-pill__body {
        font-size: 14px;
        padding: 10px 8px;
    }
}

@media (max-width: 560px) {
    .course-summary-pills--split {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .course-summary-pills--full {
        grid-template-columns: repeat(min(2, var(--course-pill-cols, 2)), minmax(0, 1fr));
        gap: 10px;
    }

    .course-pill__header,
    .course-pill__body {
        font-size: 13px;
        padding: 10px 8px;
    }
}

/* 404 — Stampie recovery page (white, flows into accreditations)
----------------------------------------- */
.error-404 {
    float: none;
    clear: both;
    width: 100%;
}

.error-404__hero {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: min(58vh, 560px);
    padding: 3.5rem 1.25rem 2.5rem;
    background:
        radial-gradient(circle at 50% 0%, rgba(123, 172, 213, 0.22), transparent 55%),
        linear-gradient(180deg, #f7fafc 0%, #ffffff 55%, #ffffff 100%);
    box-sizing: border-box;
}

.error-404__panel {
    float: none !important;
    clear: both;
    width: 100%;
    max-width: 40rem;
    margin: 0 auto;
    text-align: center;
}

.error-404__panel,
.error-404__panel * {
    float: none !important;
}

.error-404__panel > * {
    display: block;
    width: auto;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    clear: none;
}

.error-404__stampie {
    display: block;
    width: min(220px, 46vw);
    height: auto;
    margin: 0 auto 1.25rem;
    animation: error-404-stampie-bob 3.2s ease-in-out infinite;
}

@keyframes error-404-stampie-bob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

@media (prefers-reduced-motion: reduce) {
    .error-404__stampie {
        animation: none;
    }
}

.error-404__eyebrow {
    margin: 0 0 0.65rem;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--dark-blue);
    opacity: 0.7;
}

.error-404 h1,
.error-404__panel h1 {
    margin: 0 0 0.9rem;
    font-size: clamp(1.85rem, 4.5vw, 2.65rem);
    font-weight: 300;
    line-height: 1.2;
    color: var(--red) !important;
}

.error-404__lead {
    margin: 0 auto 1.85rem;
    max-width: 32rem;
    font-size: 1.1rem;
    line-height: 1.65;
    color: var(--body-colour) !important;
}

.error-404__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    justify-content: center;
    align-items: center;
    margin: 0 0 2rem;
}

.error-404__actions .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    min-width: 11.5rem;
    float: none !important;
}

.error-404__btn-primary {
    background-color: var(--red) !important;
    color: var(--white) !important;
    border: 2px solid var(--red);
}

.error-404__btn-primary:hover,
.error-404__btn-primary:focus {
    background-color: var(--orange) !important;
    border-color: var(--orange);
    color: var(--white) !important;
    opacity: 1;
}

.error-404__btn-secondary {
    background-color: transparent !important;
    border: 2px solid var(--dark-blue);
    color: var(--dark-blue) !important;
}

.error-404__btn-secondary:hover,
.error-404__btn-secondary:focus {
    background-color: var(--dark-blue) !important;
    border-color: var(--dark-blue);
    color: var(--white) !important;
    opacity: 1;
}

.error-404__links {
    padding-top: 1.35rem;
    border-top: 1px solid rgba(1, 94, 183, 0.14);
}

.error-404__links-label {
    margin: 0 0 0.85rem;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--dark-blue) !important;
    opacity: 0.7;
}

.error-404__links ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    justify-content: center;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
}

.error-404__links li {
    margin: 0;
    padding: 0;
    width: auto;
}

.error-404__links a {
    display: inline-block;
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    background: rgba(1, 94, 183, 0.06);
    border: 1px solid rgba(1, 94, 183, 0.16);
    color: var(--dark-blue) !important;
    font-size: 0.95rem;
    font-weight: 500;
    transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.error-404__links a:hover,
.error-404__links a:focus {
    background: rgba(218, 42, 28, 0.08);
    border-color: var(--red);
    color: var(--red) !important;
}

/* Keep accreditation logos as a continuous white band into the blue footer */
body.error404 .footer-accreditations {
    background: #ffffff;
    padding: 1.5rem 0 2.5rem !important;
}

body.error404 .footer-accreditations .frame {
    justify-content: center;
}

@media (max-width: 600px) {
    .error-404__hero {
        min-height: auto;
        padding: 2.5rem 1rem 2rem;
    }

    .error-404__stampie {
        width: min(180px, 52vw);
    }

    .error-404__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .error-404__actions .button {
        width: 100%;
        min-width: 0;
    }
}