/*
 Theme Name:   Media Street Bootstrap Child
 Theme URI:    http://sky-blue-aero.test
 Description:  Child theme for Media Street Bootstrap theme - Sky Blue Aero
 Author:       Media Street Ltd
 Author URI:   https://www.media-street.co.uk
 Template:     mediastreet-bootstrap
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  mediastreet-bootstrap-child
*/

/* ==========================================================================
   Custom styles go below this line
   ========================================================================== */


/* ==========================================================================
   TABLE OF CONTENTS
   --------------------------------------------------------------------------
   Sections are grouped A-H below and appear in this order. Jump by searching
   a group banner (e.g. "GROUP D") or a section title.

   A. BASE & TOKENS       typography . colours . buttons . global links . utilities
   B. LAYOUT              header . mobile menu . footer
   C. HOMEPAGE            hero video . intro . whats-new . logo sliders . gallery . CTA . courses slider nav
   D. COURSES             course card . course header . course sidebar . single-course content . archive grid
   E. NEWS & BLOG         single post (news) . blog post (parent) . sticky sidebar
   F. FORMS & CONTACT     enquiry form . contact split + icon inputs
   G. COMPONENTS & PAGES  breadcrumbs . sitemap . team cards . sticky contact . airline support . 404
   H. OVERRIDES (LAST)    header & footer no-underline
   ========================================================================== */

/* ##########################################################################
   GROUP A  .  BASE & TOKENS
   ########################################################################## */

/* ==========================================================================
   Typography - Roboto (Google Fonts)
   No BS equivalent: global font-family/weight reset across all elements
   ========================================================================== */

body,
h1, h2, h3, h4, h5, h6,
p, a, span, li, td, th,
label, input, textarea, select, button {
    font-family: "Roboto", sans-serif;
    font-weight: 400;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
}

p {
    font-size: 17px;
    font-weight: 400;
}

/* Last paragraph in any container drops its bottom margin */
p:last-child {
    margin-bottom: 0;
}

/* ==========================================================================
   Brand Colors
   No BS equivalent: custom properties for brand palette not in Bootstrap
   ========================================================================== */

:root {
    scrollbar-gutter: stable;
    --blue: rgb(62, 168, 238);
    --blue-hover: rgb(45, 150, 220);
    /* Lighter sky-blue for small text on the dark-navy bar (course-card eyebrow/icons) —
       --blue is only ~3.9:1 on --darkblue (fails AA); this lifts it to ~5:1. */
    --blue-light: rgb(124, 199, 245);
    --darkblue: rgb(47, 65, 96);
    --white: rgb(255, 255, 255);
    --grey: #ebebeb;
    --yellow: rgb(255, 193, 7);
    --header-height: 103px;

    /* Course header block (single-course.php → pe-course-header) */
    --course-header-bg: var(--darkblue);
    --course-header-stripe: rgba(62, 168, 238, 0.08);
}

/* ==========================================================================
   Button
   No BS equivalent: custom brand colour variant not in Bootstrap palette
   ========================================================================== */

.btn.btn-brand {
    background-color: var(--blue);
    border: 2px solid var(--blue);
    color: var(--white);
    border-radius: 0.25rem;
}
.btn.btn-brand:hover,
.btn.btn-brand:focus {
    background-color: var(--darkblue);
    border-color: var(--darkblue);
    color: var(--white);
    text-decoration: none;
}

/* ==========================================================================
   Global link styling
   (underline: client request 2026-06-04 · colour/weight: 2026-06-09)
   Every link is underlined (except .btn-styled buttons) AND gets a default
   brand-link look: sky-blue + bold at rest, dark-blue on hover — so ANY link
   added anywhere reads as a styled link, matching the homepage links.

   The colour/weight default is a BARE `a` selector (specificity 0,0,1) ON
   PURPOSE: it sits BELOW every class-based link rule, so any component that
   sets its own link colour or weight (buttons, nav, footer, cards, breadcrumbs,
   article links, …) automatically overrides it without per-component guards.
   Only links with no other styling fall through to the brand default.
   The underline stays on `a:not(.btn)` with !important to beat the many
   per-component `text-decoration: none` rules further down this stylesheet.
   ========================================================================== */
a {
    color: var(--blue);
    font-weight: 700;
}
a:not(.btn) {
    text-decoration: underline !important;
}
/* Dark-blue hover. Placed BEFORE the dark-background link rules below
   (footer, .bg-blue sub-footer) so those keep their lighter hover and
   text stays visible on dark sections. */
a:not(.btn):hover,
a:not(.btn):focus {
    color: var(--darkblue) !important;
}
/* Heading-wrapped links stay part of the heading — never the brand blue/bold.
   `inherit` (specificity 0,0,2 > bare `a`) hands colour & weight back to the
   heading; a link that sets its own colour (e.g. .text-darkblue !important on
   the news-card titles) still wins. Mirrors the no-underline policy for
   heading links below. */
:is(h1, h2, h3, h4, h5, h6) a {
    color: inherit;
    font-weight: inherit;
}
/* Title links (blog/news card headings, any heading-wrapped link) and the
   course-card "View Course Details" button-link stay clean — no underline. */
:is(h1, h2, h3, h4, h5, h6) a:not(.btn),
a.course-card__btn,
.contact-split__info a,
.pe-breadcrumbs .breadcrumb-item a,
.pe-course-header__crumbs a,
a.pe-course-sidebar__nav-link {
    text-decoration: none !important;
}
/* Breadcrumb + course-sidebar nav links hover light blue (not the global
   dark-blue hover). */
.pe-breadcrumbs .breadcrumb-item a:hover,
.pe-breadcrumbs .breadcrumb-item a:focus,
.pe-course-header__crumbs a:hover,
.pe-course-header__crumbs a:focus,
a.pe-course-sidebar__nav-link:hover,
a.pe-course-sidebar__nav-link:focus {
    color: var(--blue) !important;
    text-decoration: none !important;
}
/* Never let the global link rules above touch the WP admin bar (shows on the
   logged-in front-end). #wpadminbar has higher specificity than a:not(.btn),
   so !important here is enough to hand its links back to core's own styling. */
#wpadminbar a,
#wpadminbar a:hover,
#wpadminbar a:focus,
#wpadminbar .ab-item,
#wpadminbar .ab-item:hover,
#wpadminbar .ab-item:focus {
    text-decoration: none !important;
    color: inherit !important;
}
/* Site chrome sets its OWN link colour (so the bare-`a` brand colour above
   never reaches it via specificity) but mostly leaves font-weight unset —
   without this the bold brand default would bleed in. Pin these to normal
   weight. (Their colour + underline handling lives in their own sections /
   the LAST override block.) */
.header-custom a,
#mobileMenu a,
.footer-soft a,
.pe-breadcrumbs .breadcrumb-item a,
.pe-course-header__crumbs a,
a.pe-course-sidebar__nav-link,
.sitemap__col a,
.contact-split__info a,
.pe-cta-banner__content a {
    font-weight: 400;
}

/* ==========================================================================
   Utility Classes
   No BS equivalent: brand colour utilities not in Bootstrap palette
   ========================================================================== */

.bg-blue { background-color: var(--blue) !important; }
.bg-darkblue { background-color: var(--darkblue) !important; }
.bg-grey { background-color: var(--grey) !important; }
.text-blue { color: var(--blue) !important; }
.text-darkblue { color: var(--darkblue) !important; }
.border-blue { border-color: var(--blue) !important; }
.border-darkblue { border-color: var(--darkblue) !important; }
.text-yellow { color: var(--yellow) !important; }


/* ##########################################################################
   GROUP B  .  LAYOUT
   ########################################################################## */

/* ==========================================================================
   Header
   No BS equivalent: animated underlines (::after), hover transitions, custom
   font-sizes, clip-path angled corners, SVG border, dropdown animations
   ========================================================================== */

/* Desktop nav — flex alignment now via BS classes (align-items-center gap-2 on menu_class) */
/* Desktop nav links — uppercase with animated underline (top-level only) */
.header-custom .nav:not(.mobile-nav) > .nav-item > .nav-link {
    color: var(--darkblue) !important;
    font-size: 0.95rem;
    font-weight: 400;
    position: relative;
    padding: 0.5rem 0.85rem;
    transition: color 0.25s ease, background 0.25s ease;
    border-radius: 0.25rem;
}
.header-custom .nav:not(.mobile-nav) > .nav-item > .nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 1px;
    background: var(--blue);
    border-radius: 0;
    transform: scaleX(0);
    transition: transform 0.3s ease;
}
/* Hover + dropdown open */
.header-custom .nav:not(.mobile-nav) > .nav-item > .nav-link:hover::after,
.header-custom .nav:not(.mobile-nav) > .nav-item > .nav-link:focus::after,
.header-custom .nav:not(.mobile-nav) > .nav-item.dropdown:hover > .nav-link::after {
    transform: scaleX(1);
}
.header-custom .nav:not(.mobile-nav) > .nav-item > .nav-link:hover,
.header-custom .nav:not(.mobile-nav) > .nav-item > .nav-link:focus {
    color: var(--blue) !important;
    background: rgba(62, 168, 238, 0.08);
}
/* Active page — same as hover: blue tint bg + underline */
.header-custom .nav:not(.mobile-nav) > .nav-item.active > .nav-link,
.header-custom .nav:not(.mobile-nav) > .nav-item.current-menu-item > .nav-link,
.header-custom .nav:not(.mobile-nav) > .nav-item.current-menu-ancestor > .nav-link,
.header-custom .nav:not(.mobile-nav) > .nav-item.current-menu-parent > .nav-link {
    color: var(--blue) !important;
    background: rgba(62, 168, 238, 0.08);
}
.header-custom .nav:not(.mobile-nav) > .nav-item.active > .nav-link::after,
.header-custom .nav:not(.mobile-nav) > .nav-item.current-menu-item > .nav-link::after,
.header-custom .nav:not(.mobile-nav) > .nav-item.current-menu-ancestor > .nav-link::after,
.header-custom .nav:not(.mobile-nav) > .nav-item.current-menu-parent > .nav-link::after {
    transform: scaleX(1);
}

/* Nav chevron (dropdown indicator) */
.nav-chevron {
    font-size: 0.85rem;
    margin-left: 0.4rem;
    transition: transform 0.3s ease;
}
.header-custom .nav:not(.mobile-nav) > .nav-item.dropdown:hover > .nav-link .nav-chevron {
    transform: rotate(180deg);
}

/* Desktop contact links */
.header-contact-link {
    gap: 0.6rem;
    color: var(--darkblue) !important;
    transition: color 0.25s ease;
}
.header-contact-link:hover {
    color: var(--blue) !important;
}
.header-contact-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--blue);
    font-size: 1.15rem;
    flex-shrink: 0;
    transition: color 0.25s ease;
}
.header-contact-link:hover .header-contact-icon {
    color: var(--darkblue);
}
.header-contact-text {
    line-height: 1.2;
}
.header-contact-label {
    font-size: 0.75rem;
    color: var(--blue);
    font-weight: 400;
    text-transform: uppercase;
}
.header-contact-value {
    font-size: 1rem;
    font-weight: 400;
    color: var(--darkblue);
    transition: color 0.25s ease;
}
.header-contact-link:hover .header-contact-value {
    color: var(--blue);
}
.header-contact-divider {
    width: 2px;
    height: 36px;
    background: rgba(47, 65, 96, 0.15);
    margin: 0 1rem;
    display: inline-block;
    vertical-align: middle;
}

.header-custom a.text-darkblue:hover,
.header-custom a.text-darkblue:focus {
    color: var(--blue) !important;
}

/* Logo */
.header-logo {
    max-height: 80px;
    height: auto;
    width: auto;
}
@media (max-width: 991.98px) {
    .header-logo {
        max-height: 67px;
    }
}
@media (max-width: 599.98px) {
    .header-logo {
        max-height: 55px;
    }
}

/* Mobile contact – labels always visible, values from 770px up */
@media (max-width: 769.98px) {
    .header-mobile-contact .header-contact-value {
        display: none;
    }
    .header-mobile-contact .header-contact-divider {
        height: 26px;
        margin: 0 0.5rem;
    }
    .header-mobile-contact .mobile-menu-toggle {
        margin-left: 0.5rem;
    }
}
.header-mobile-contact .header-contact-label {
    font-size: 0.75rem;
}
@media (max-width: 400px) {
    .header-mobile-contact .header-contact-label {
        display: none;
    }
    .header-mobile-contact .header-contact-text {
        display: none;
    }
    .header-mobile-contact .header-contact-divider {
        display: none;
    }
    .header-contact-link.text-decoration-none {
        display: inline !important;
        align-items: unset !important;
        padding-right: 0 !important;
    }
}
.header-mobile-contact .header-contact-icon {
    font-size: 1.15rem;
}
@media (min-width: 992px) and (max-width: 1299.98px) {
    .header-mobile-contact .header-contact-value {
        font-size: 0.95rem;
    }
    .header-mobile-contact .header-contact-divider {
        height: 34px;
        margin: 0 0.75rem;
    }
}

/* Desktop header layout (1300px+) */
@media (min-width: 1300px) {
    .header-desktop-nav { display: block !important; }
    .header-desktop-contact { display: flex !important; }
    .header-mobile-contact { display: none !important; }
    .header-logo-col { flex: 0 0 auto; width: 16.6667%; text-align: center !important; }
    #mobileMenu { display: none !important; }
}


/* On the homepage (video) and inner pages with a widescreen banner, pull the
   hero up behind the sticky header (desktop only). */
@media (min-width: 1300px) {
    body.home .header-custom.sticky-top,
    body.has-page-banner .header-custom.sticky-top {
        background: transparent !important;
    }
    body.home .header-custom.sticky-top::after,
    body.has-page-banner .header-custom.sticky-top::after {
        content: '';
        position: absolute;
        inset: 0;
        background: #fff;
        z-index: -1;
    }
    body.home .header-custom.sticky-top + * {
        margin-top: calc(-1 * var(--header-height, 0px));
    }
    /* Same treatment for the course header striped banner */
    body.single-course .pe-course-header .pe-course-header__banner {
        margin-top: calc(-1 * var(--header-height, 0px));
        padding-top: calc(var(--header-height, 103px) + 1.5rem);
    }
    /* …and for the generic striped page header (pe-page-header) on inner pages */
    body.has-page-banner .header-custom.sticky-top + .pe-page-header .pe-course-header__banner {
        margin-top: calc(-1 * var(--header-height, 0px));
        padding-top: calc(var(--header-height, 103px) + 1.5rem);
    }
}

/* Hide angled SVG border below 1701px (straight Bootstrap border shows instead) */
@media (max-width: 1700px) {
    .header-bottom {
        display: none !important;
    }
}

/* Header angled corners (wide desktop only, 1701px+)
   Uses max()/min() so the inset is always at least 12% from each side,
   keeping the angle consistent across all desktop widths. At wide
   viewports the natural container gap takes over (it exceeds 12%). */
@media (min-width: 1701px) {
    .header-custom {
        background: transparent !important;
        border-bottom: 0 !important;
    }
    /* White fill layer */
    .header-custom::after {
        content: '';
        position: absolute;
        inset: 0;
        background: #fff;
        clip-path: polygon(
            0 0,
            100% 0,
            min(calc((100% + 1320px) / 2), 88%) 100%,
            max(calc((100% - 1320px) / 2), 12%) 100%
        );
        z-index: -1;
    }
}

/* Header bottom border SVG (desktop) */
.header-bottom {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: visible;
}
.header-border-line,
.hero-stroke {
    stroke: var(--blue);
    stroke-width: 4;
    vector-effect: non-scaling-stroke;
    stroke-linejoin: round;
    fill: none;
}

/* Dropdown on hover (desktop only) */
.header-custom .nav:not(.mobile-nav) .dropdown:hover > .dropdown-menu {
    display: block;
    margin-top: 0;
}
.header-custom .dropdown-menu {
    background: var(--darkblue);
    border: none;
    border-radius: 0;
    padding: 0;
    min-width: 240px;
    width: max-content;
    max-width: min(460px, 90vw);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25), 0 2px 8px rgba(0, 0, 0, 0.15);
    animation: dropdownFade 0.25s ease;
}
@keyframes dropdownFade {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.header-custom .dropdown-menu .nav-link,
.header-custom .dropdown-menu a {
    color: rgba(255, 255, 255, 0.7) !important;
    padding: 0.6rem 1.4rem;
    transition: color 0.2s ease, background 0.2s ease;
    text-transform: none;
    font-size: 0.9rem;
    display: block;
    position: relative;
    white-space: nowrap;
}
.header-custom .dropdown-menu .nav-link::after {
    display: none;
}
.header-custom .dropdown-menu .nav-link::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 1.4rem;
    right: 1.4rem;
    height: 1px;
    background: var(--blue);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}
.header-custom .dropdown-menu .nav-link:hover::before {
    transform: scaleX(1);
}
.header-custom .dropdown-menu .nav-link:hover,
.header-custom .dropdown-menu a:hover {
    color: var(--blue) !important;
    background: rgba(62, 168, 238, 0.06);
}

/* ==========================================================================
   Mobile Menu
   No BS equivalent: fixed slide-in panel, custom animations/transitions,
   backdrop blur, custom scrollbar, ::before active accent and icons
   ========================================================================== */

/* --- Panel (Bootstrap Offcanvas — slide/backdrop/visibility handled by BS) --- */
#mobileMenu.offcanvas {
    --bs-offcanvas-width: min(85vw, 400px);
    --bs-offcanvas-bg: var(--darkblue);
    --bs-offcanvas-color: #fff;
}
#mobileMenu .offcanvas-header { padding-bottom: 0; }
/* Custom scrollbar on the scrollable body */
#mobileMenu .offcanvas-body { scrollbar-width: thin; scrollbar-color: rgba(62,168,238,0.3) transparent; }
#mobileMenu .offcanvas-body::-webkit-scrollbar { width: 4px; }
#mobileMenu .offcanvas-body::-webkit-scrollbar-track { background: transparent; }
#mobileMenu .offcanvas-body::-webkit-scrollbar-thumb { background: rgba(62, 168, 238, 0.3); border-radius: 2px; }
#mobileMenu .offcanvas-body::-webkit-scrollbar-thumb:hover { background: rgba(62, 168, 238, 0.5); }

/* --- Toggle button --- */
.mobile-menu-toggle {
    color: var(--darkblue);
    background: rgba(62, 168, 238, 0.08);
    border-radius: 0.25rem;
    padding: 0.35rem 0.5rem !important;
    transition: color 0.25s ease, background 0.25s ease;
}
.mobile-menu-toggle:hover,
.mobile-menu-toggle:focus,
.mobile-menu-toggle[aria-expanded="true"] {
    color: var(--blue);
    background: rgba(62, 168, 238, 0.15);
}
.mobile-menu-toggle i { display: inline-block; width: 2rem; height: 2rem; line-height: 2rem; text-align: center; font-size: 2rem; }

/* --- Nav items --- padding-top now via BS class (pt-0 on menu_class) */
.mobile-nav .nav-item { border: none; position: relative; }
.mobile-nav > .nav-item + .nav-item { border-top: 1px solid rgba(255,255,255,0.07); }

/* Top-level links – uppercase, light weight, letter-spaced (matches desktop nav) */
.mobile-nav > .nav-item > .nav-link,
.mobile-nav > .nav-item > .mobile-nav-row > .nav-link {
    color: rgba(255,255,255,0.9) !important;
    padding: 1rem 1.5rem;
    font-weight: 400;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: color 0.25s ease, background-color 0.25s ease;
}

/* Hover */
.mobile-nav > .nav-item > .nav-link:hover,
.mobile-nav > .nav-item > .mobile-nav-row > .nav-link:hover {
    color: var(--blue) !important;
    background-color: rgba(62, 168, 238, 0.1);
}

/* Active / current page – blue left border accent */
.mobile-nav > .nav-item.active::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--blue);
    border-radius: 0 2px 2px 0;
}
.mobile-nav > .nav-item.active > .nav-link,
.mobile-nav > .nav-item.active > .mobile-nav-row > .nav-link {
    color: var(--blue) !important;
}

/* Nav row for items with children */
.mobile-nav .mobile-nav-row { display: flex; align-items: stretch; }
.mobile-nav .mobile-nav-row .nav-link { flex: 1; }

/* --- Submenu toggle --- */
.mobile-submenu-toggle {
    background: none;
    border: none;
    border-left: 1px solid rgba(255,255,255,0.07);
    padding: 1rem 1.5rem;
    color: rgba(255,255,255,0.35);
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: color 0.25s ease, background-color 0.25s ease;
}
.mobile-submenu-toggle:hover {
    color: var(--blue);
    background-color: rgba(62, 168, 238, 0.1);
}
.mobile-submenu-toggle[aria-expanded="true"] {
    color: var(--blue);
    background-color: rgba(62, 168, 238, 0.06);
}
.mobile-submenu-toggle i { transition: transform 0.3s ease; font-size: 0.85rem; }
.mobile-submenu-toggle[aria-expanded="true"] i { transform: rotate(180deg); }

/* --- Submenus (show/hide handled by Bootstrap Collapse) --- */
.mobile-nav .mobile-submenu {
    list-style: none;
    padding: 0;
    margin: 0;
    background: rgba(0,0,0,0.2);
    border-top: 1px solid rgba(62, 168, 238, 0.12);
}

/* Submenu links */
.mobile-nav .mobile-submenu .nav-link {
    padding: 0.75rem 1.5rem 0.75rem 1.75rem;
    font-size: 0.88rem;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0.3px;
    color: rgba(255,255,255,0.7) !important;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    transition: color 0.25s ease, background-color 0.25s ease;
}
.mobile-nav .mobile-submenu > .nav-item > .nav-link::before,
.mobile-nav .mobile-submenu > .nav-item > .mobile-nav-row > .nav-link::before {
    content: '\f6b9';
    font-family: 'bootstrap-icons';
    font-size: 0.6rem;
    color: var(--blue);
    flex-shrink: 0;
    opacity: 0.4;
    transition: opacity 0.25s ease, transform 0.25s ease;
}
.mobile-nav .mobile-submenu .nav-link:hover::before {
    opacity: 1;
    transform: translateX(3px);
}
.mobile-nav .mobile-submenu .nav-link:hover {
    color: var(--blue) !important;
    background-color: rgba(62, 168, 238, 0.08);
}

/* Deeper nesting */
.mobile-nav .mobile-submenu .mobile-submenu {
    background: rgba(0,0,0,0.15);
    border-top: 1px solid rgba(62, 168, 238, 0.08);
}
.mobile-nav .mobile-submenu .mobile-submenu .nav-link {
    padding-left: 2.75rem;
    font-size: 0.83rem;
    color: rgba(255,255,255,0.55) !important;
}

/* --- Contact links at bottom --- */
#mobileMenu .mobile-contact-links {
    border-top: 1px solid rgba(62, 168, 238, 0.15);
    margin-top: 0;
    background: rgba(0,0,0,0.15);
    padding: 1.25rem 1.5rem !important;
}
#mobileMenu .mobile-contact-links a {
    transition: color 0.25s ease;
    font-size: 0.9rem;
    font-weight: 400;
    letter-spacing: 0.3px;
}
#mobileMenu .mobile-contact-links a:hover { color: var(--blue) !important; }
#mobileMenu .mobile-contact-links i.bi {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(62, 168, 238, 0.15);
    font-size: 0.85rem;
    margin-right: 0.75rem !important;
    flex-shrink: 0;
    transition: background 0.25s ease;
}
#mobileMenu .mobile-contact-links a:hover i.bi {
    background: rgba(62, 168, 238, 0.3);
}

/* ==========================================================================
   Footer — "Blue Top Border": navy footer (bg-darkblue), 4px sky-blue top rule
   (border-top border-4 border-blue), blue chips with a yellow glyph, Head Office
   + Get In Touch right-aligned with the heading chip mirrored right.
   ==========================================================================
   Bootstrap does ALL of it in pe-footer-custom.php — background, text colour,
   border, opacity, line-height (lh-lg), flex, spacing & responsive alignment.
   The few rules below are the ONLY things BS has no utility for: fixed chip /
   social-badge pixel sizes, the heading letter-spacing, hover colours, and the
   13px sub-footer. */
.footer-soft a {
    text-decoration: none !important;
}

/* Heading: BS has no letter-spacing utility; size bumped a touch above h5 default */
.footer-soft__heading {
    font-size: 1.1rem;
    letter-spacing: 0.5px;
}

/* Fixed circle sizes (BS rounds & centres them; colours via bg-blue/text-yellow/bg-white utils) */
.footer-soft__chip {
    width: 34px;
    height: 34px;
    font-size: 0.95rem;
    background-color: rgb(62 168 238 / 10%) !important;
}
.footer-soft__social-icon {
    width: 38px;
    height: 38px;
    font-size: 1rem;
    color: #fff !important;
    transition: color 0.2s ease, background-color 0.25s;
}

/* Bootstrap Icons set `.bi::before { vertical-align: -.125em }` to sit on a text
   baseline, which nudges the glyph slightly low inside a flex-centred circle.
   Making the <i> its own flex box neutralises vertical-align so the glyph is
   dead-centre in every chip / social circle. */
.footer-soft__chip i,
.footer-soft__social-icon i {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* Main footer links: white by default, light-blue on hover (BS has no link-colour
   utility that overrides the default <a> blue, nor a hover-colour utility) */
.footer-soft .footer-link,
.footer-soft__contact a {
    color: #fff !important;
    transition: color 0.2s ease;
}
.footer-soft .footer-link:hover,
.footer-soft .footer-link:focus,
.footer-soft__contact a:hover,
.footer-soft__contact a:focus {
    color: var(--blue-light) !important;
}
/* Social icons: white glyph, circle fills blue on hover (glyph stays white) */
.footer-soft__social-icon:hover,
.footer-soft__social-icon:focus {
    background-color: var(--blue) !important;
    color: #fff !important;
}

/* Sub-footer: all links AND text share the muted 50% white (the "subtle" tone) */
.footer-soft__sub,
.footer-soft__sub a {
    color: rgba(255, 255, 255, 0.5) !important;
    transition: color 0.2s ease;
}
.footer-soft__sub a:hover,
.footer-soft__sub a:focus {
    color: var(--blue-light) !important;
}

/* Sub-footer 13px (no BS step between .small 14px and smaller) */
.footer-soft__sub {
    font-size: 13px;
}
.footer-soft__credit a {
    text-underline-offset: 2px;
}
/* Media Street credit link: brand blue at rest, underline only on hover
   (reverses the previous always-underlined dim-white). The descendant selector
   is needed to outrank `.footer-soft__sub a { color: ... !important }` above. */
.footer-soft__sub .footer-soft__credit-link {
    color: var(--blue-light) !important;
}
.footer-soft__credit-link:hover,
.footer-soft__credit-link:focus {
    text-decoration: underline !important;
}

/* Below 576px the columns stack full-width; the default 12px container gutter
   leaves the left-aligned text jammed against the screen edge. Add a comfortable
   side gutter so it lines up nearer the page body inset (left-aligned, not centred). */
@media (max-width: 575.98px) {
    .footer-soft .container {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}


/* ##########################################################################
   GROUP C  .  HOMEPAGE
   ########################################################################## */

/* ==========================================================================
   Widescreen Video (Full Screen Height)
   No BS equivalent: custom vh heights, full-bleed video object-fit, SVG hero shape
   ========================================================================== */

.pe-video {
    height: 50vh;
}
@media (min-width: 1300px) {
    .pe-video {
        height: 82vh;
    }
}
.pe-video .video-widescreen {
    height: 100%;
    overflow: hidden;
}
.pe-video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* Hero image: base layer, in flow, defines the section size (the only layer on mobile) */
.pe-video .video-poster-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* Video overlays the image on desktop once loaded; transparent (so image shows) on mobile */
.pe-video video.video-bg {
    position: absolute;
    top: 0;
    left: 0;
}
.pe-video .video-content {
    /* Darker overlay (was 0.5) to mask 720p softness and lift text contrast */
    background: rgb(47 65 96 / 78%);
}
.pe-video .hero-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: clamp(80px, 11vw, 120px);
    pointer-events: none;
}
@media (min-width: 1300px) {
    .pe-video .hero-bottom {
        height: clamp(150px, 16vw, 350px);
    }
}
.pe-video .hero-bottom svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* ==========================================================================
   Homepage Intro
   No BS equivalent: line-height 1.8, WYSIWYG link styling, cursor pointer
   ========================================================================== */

/* colour now via BS class (text-darkblue on element) */
.homepage-intro__text {
    line-height: 1.8;
}

.homepage-intro__text p:last-child {
    margin-bottom: 0;
}

.homepage-intro__text a {
    color: var(--blue);
    font-weight: 700;
    text-decoration: none;
}

.homepage-intro__text a:hover {
    text-decoration: underline;
}

/* colour, font-weight, text-decoration now via BS classes on element */
.homepage-intro__toggle {
    cursor: pointer;
}

.homepage-intro__toggle:hover {
    text-decoration: underline;
}

/* Drop the my-4 vertical margin on mobile (keeps the py-5 padding) */
@media (max-width: 575.98px) {
    .homepage-intro.my-4 {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
}

/* ==========================================================================
   What's New — soft rounded cards + floating pill date (stacked day/month)
   No BS equivalent: hover lift/shadow, image scale, absolutely-positioned
   date pill, fixed-ratio cover image
   ========================================================================== */

/* Mobile: show only the first news post on the homepage */
@media (max-width: 767.98px) {
    .whats-new__col:nth-child(n+2) {
        display: none;
    }
    /* Drop the my-4 vertical margin on mobile (keeps the py-5 padding) */
    .whats-new.my-4 {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
}

/* Tablet (iPad): 2-up grid (col-md-6) — show only 2 posts so the 3rd
   isn't stranded alone on a second row */
@media (min-width: 768px) and (max-width: 991.98px) {
    .whats-new__col:nth-child(n+3) {
        display: none;
    }
}

.whats-new__card {
    background: #fff;
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(47, 65, 96, 0.1);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.whats-new__card:hover {
    box-shadow: 0 12px 30px rgba(47, 65, 96, 0.18) !important;
}
.whats-new__card-img {
    height: 190px;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.whats-new__card:hover .whats-new__card-img {
    transform: scale(1.04);
}
.whats-new__eyebrow {
    color: var(--blue);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-size: 0.72rem;
}
/* View All News — polished pill CTA with sliding arrow */
.whats-new__viewall {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.6rem 1.6rem;
    border-radius: 50rem;
    letter-spacing: 0.3px;
    box-shadow: 0 4px 14px rgba(62, 168, 238, 0.35);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.25s ease;
}
.whats-new__viewall:hover {
    box-shadow: 0 9px 22px rgba(47, 65, 96, 0.3);
}
.whats-new__viewall i {
    transition: transform 0.2s ease;
}
.whats-new__viewall:hover i {
    transform: translateX(5px);
}
.whats-new__card-title {
    font-size: 1.2rem;
    line-height: 1.3;
    letter-spacing: -0.01em;
}
.whats-new__post-link {
    transition: color 0.2s ease;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.whats-new__post-link:hover {
    color: var(--blue) !important;
}
.whats-new__card-meta {
    color: #7a879c;
}

/* Floating pill date — stacked day over month, top-left of the image */
.whats-new__date-pill {
    position: absolute;
    top: 1.25rem;
    right: 0;
    background: #fff;
    color: var(--darkblue);
    text-align: center;
    padding: 0.5rem 0.7rem;
    line-height: 1;
    border-radius: 10px 0 0 10px;
    border-right: 4px solid var(--yellow);
    box-shadow: -3px 2px 10px rgba(0, 0, 0, 0.15);
    z-index: 2;
}
.whats-new__date-day {
    display: block;
    font-size: 1.2rem;
    font-weight: 700;
}
.whats-new__date-month {
    display: block;
    font-size: 0.58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--blue);
    margin-top: 0.1rem;
}

@media (max-width: 991.98px) {
    .whats-new__card h5 {
        font-size: 1rem;
    }
}

/* ==========================================================================
   Logo Sliders (Pilot Graduates & Certifications)
   No BS equivalent: carousel-specific max-heights and overflow overrides
   ========================================================================== */

/* overflow: hidden now via BS class (overflow-hidden on section element) */
.pilot-graduates .glide__track,
.pilot-graduates .glide__slides { overflow: visible !important; }
.pilot-graduates__logo { max-height: 50px; width: auto !important; }
/* Intro sentence under the heading (ACF option graduate_intro).
   No BS utility for an arbitrary max-width, so the measure is set here.
   960px, NOT 820px: the default sentence measures 840px at 17px Roboto 400
   (browser-measured), so 820px pushed it onto two lines. 960px less the
   32px of ps-3/pe-3 padding leaves 928px of text width, i.e. ~88px of
   headroom, and it still wraps normally on narrow viewports. */
.pilot-graduates__intro { max-width: 960px; line-height: 1.8; }
/* Contact page only — drop the section's top padding (py-5 my-4 → pb-5 my-4) */
.page-id-657 .pilot-graduates { padding-top: 0 !important; }
.certifications .glide__slide { padding: 10px 0; min-width: 0; }
.certifications__logo { max-width: 100%; max-height: 80px; height: auto; min-width: 0; }
@media (max-width: 767px) {
    /* Drop the container's vertical margin (my-4) on mobile. */
    .certifications .container.my-4 { margin-top: 0 !important; margin-bottom: 0 !important; }
}

/* ==========================================================================
   Gallery
   No BS equivalent: staggered slide animation, lightbox overlay with
   slide transitions, image hover scale, aspect-ratio 4/3
   ========================================================================== */

/* Staggered vertical rhythm — every other slide nudged down */
.pe-gallery .glide__slides {
    align-items: flex-start;
}
.pe-gallery .glide__slide {
    cursor: pointer;
    transition: transform 0.4s ease;
}
.pe-gallery .glide__slide:nth-child(even) {
    transform: translateY(24px);
}

/* Image wrapper with overflow hidden + blue accent border */
.pe-gallery__image-wrap {
    position: relative;
    overflow: hidden;
    border-radius: 0.375rem;
    border-bottom: 3px solid var(--blue);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    transition: box-shadow 0.4s ease, transform 0.4s ease;
}
.pe-gallery__item:hover .pe-gallery__image-wrap {
    box-shadow: 0 12px 36px rgba(62, 168, 238, 0.25), 0 4px 20px rgba(0, 0, 0, 0.3);
}

.pe-gallery__item img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform 0.5s ease;
    display: block;
}
.pe-gallery__item:hover img {
    transform: scale(1.08);
}

/* Remove stagger on mobile — less space to play with */
@media (max-width: 767.98px) {
    .pe-gallery .glide__slide:nth-child(even) {
        transform: translateY(0);
    }
}

/* Lightbox */
.pe-gallery-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.pe-gallery-lightbox.active {
    opacity: 1;
    visibility: visible;
}
.pe-gallery-lightbox__content {
    max-width: 90vw;
    max-height: 90vh;
    text-align: center;
    transform: scale(0.95);
    transition: transform 0.3s ease, opacity 0.3s ease;
}
.pe-gallery-lightbox.active .pe-gallery-lightbox__content {
    transform: scale(1);
}

/* Slide animations for prev/next navigation */
@keyframes slideOutLeft {
    from { transform: translateX(0); opacity: 1; }
    to   { transform: translateX(-60px); opacity: 0; }
}
@keyframes slideOutRight {
    from { transform: translateX(0); opacity: 1; }
    to   { transform: translateX(60px); opacity: 0; }
}
@keyframes slideInRight {
    from { transform: translateX(60px); opacity: 0; }
    to   { transform: translateX(0); opacity: 1; }
}
@keyframes slideInLeft {
    from { transform: translateX(-60px); opacity: 0; }
    to   { transform: translateX(0); opacity: 1; }
}
.pe-gallery-lightbox__content.slide-out-left {
    animation: slideOutLeft 0.25s ease-in forwards;
}
.pe-gallery-lightbox__content.slide-out-right {
    animation: slideOutRight 0.25s ease-in forwards;
}
.pe-gallery-lightbox__content.slide-in-right {
    animation: slideInRight 0.3s ease-out forwards;
}
.pe-gallery-lightbox__content.slide-in-left {
    animation: slideInLeft 0.3s ease-out forwards;
}

.pe-gallery-lightbox__img {
    max-width: 85vw;
    max-height: 70vh;
    object-fit: contain;
    border-radius: 0.25rem;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);
}
.pe-gallery-lightbox__footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    margin-top: 1rem;
}
.pe-gallery-lightbox__caption {
    color: var(--white);
    font-size: 0.95rem;
    font-weight: 400;
    margin: 0;
}
.pe-gallery-lightbox__description {
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.85rem;
    margin: 0;
    max-width: 600px;
    line-height: 1.5;
}
.pe-gallery-lightbox__counter {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.8rem;
}
.pe-gallery-lightbox__close,
.pe-gallery-lightbox__prev,
.pe-gallery-lightbox__next {
    position: absolute;
    background-color: var(--blue);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.pe-gallery-lightbox__close {
    top: 1.25rem;
    right: 1.25rem;
    width: 44px;
    height: 44px;
    font-size: 1.15rem;
    line-height: 1;
}
.pe-gallery-lightbox__close:hover {
    background-color: var(--darkblue);
    transform: scale(1.1);
}
.pe-gallery-lightbox__prev,
.pe-gallery-lightbox__next {
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    font-size: 1.25rem;
    line-height: 1;
}
.pe-gallery-lightbox__prev:hover,
.pe-gallery-lightbox__next:hover {
    background-color: var(--darkblue);
    transform: translateY(-50%) scale(1.1);
}
.pe-gallery-lightbox__prev { left: 1.25rem; }
.pe-gallery-lightbox__next { right: 1.25rem; }
@media (max-width: 767.98px) {
    .pe-gallery-lightbox__img {
        max-width: 95vw;
        max-height: 60vh;
    }
    .pe-gallery-lightbox__close {
        top: 0.75rem;
        right: 0.75rem;
        width: 38px;
        height: 38px;
        font-size: 1rem;
    }
    .pe-gallery-lightbox__prev,
    .pe-gallery-lightbox__next {
        width: 40px;
        height: 40px;
        font-size: 1.1rem;
    }
    .pe-gallery-lightbox__prev { left: 0.5rem; }
    .pe-gallery-lightbox__next { right: 0.5rem; }
}

/* ==========================================================================
   CTA Banner
   No BS equivalent: watermark positioning, radial glow, custom link
   border-bottom, brand-specific button hover override
   ========================================================================== */

.pe-cta-banner {
    position: relative;
    overflow: hidden;
    border-bottom: 4px solid var(--blue);
}

/* Paper plane watermark */
.pe-cta-banner__watermark {
    position: absolute;
    right: -5%;
    top: 50%;
    transform: translateY(-50%) rotate(-8deg);
    width: clamp(250px, 40vw, 550px);
    opacity: 0.04;
    pointer-events: none;
}

/* Radial glow behind content */
.pe-cta-banner__glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(62, 168, 238, 0.08) 0%, transparent 70%);
    pointer-events: none;
}

.pe-cta-banner__content {
    line-height: 1.8;
    max-width: 800px;
}

/* Copy links on the navy band: white at rest, --blue-light on hover.
   The global `a:not(.btn):hover` sets `--darkblue !important`, which IS this
   band's background, so without `!important` here the links turn invisible on
   hover. `:focus` is listed too (the global rule covers focus as well).
   Same white → --blue-light pattern as the footer links.
   No `text-decoration` reset: the sitewide underline policy wins regardless. */
.pe-cta-banner__content a {
    color: var(--white);
    transition: color 0.2s ease;
}

.pe-cta-banner__content a:hover,
.pe-cta-banner__content a:focus {
    color: var(--blue-light) !important;
}
.pe-cta-banner .btn.btn-brand:hover,
.pe-cta-banner .btn.btn-brand:focus {
    background-color: var(--grey);
    border-color: var(--grey);
    color: var(--darkblue);
}


/* ==========================================================================
   Courses Slider — Navigation (Homepage)
   No BS equivalent: circular icon buttons with colour transitions
   ========================================================================== */

.pe-courses .glide_courses {
    position: relative;
}
/* Slider sits in a .container so the 2 visible cards match the /courses/
   archive col-md-6 width exactly. Let the track overflow visibly so the
   neighbouring courses bleed into the page gutters as a peek; clip the
   section so that bleed doesn't create a horizontal scrollbar. */
.pe-courses {
    overflow-x: clip;
}
.pe-courses .glide__track {
    overflow: visible;
}
@media (max-width: 767px) {
    .pe-courses .glide__track {
        overflow: hidden;
    }
    /* Grid cards stack to one column on mobile (col-md-6); drop the mb-4 on the
       last card so there's no dead gap before the section button. */
    .pe-courses .row > .col-md-6:last-child {
        margin-bottom: 0 !important;
    }
    /* Drop the section's top margin on mobile (mt-4 on the grid layout). */
    .pe-courses.mt-4 {
        margin-top: 0 !important;
    }
}
.pe-courses .glide__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}
/* Pin the arrows hard against the page (viewport) edges, not in toward the
   centre. The slider sits in a centred .container, so the distance from the
   viewport edge to the slider edge is the gutter = (100vw - 100%) / 2 — the
   container's 12px padding cancels out. Offset by that, then nudge 10px in so
   the circle isn't flush to the screen edge. .pe-courses has overflow-x: clip,
   which absorbs any scrollbar-width overflow. */
.pe-courses .glide__arrow--left  { left:  calc(-1 * (100vw - 100%) / 2 + 10px); }
.pe-courses .glide__arrow--right { right: calc(-1 * (100vw - 100%) / 2 + 10px); }
.pe-courses .glide__arrow i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    background-color: var(--blue);
    color: #fff;
    font-size: 1rem;
    transition: background-color 0.2s ease;
}
.pe-courses .glide__arrow:hover i {
    background-color: var(--darkblue);
}


/* ##########################################################################
   GROUP D  .  COURSES
   ########################################################################## */

/* ==========================================================================
   Course Card (shared — archive + homepage slider)
   No BS equivalent: expanding-drawer reveal over a full-bleed photo.
   ========================================================================== */

/* ===== Course cards (promo boxes) — expanding-drawer contents reveal =====
   Default: photo + a solid navy bar (eyebrow + title), optional Featured star.
   Hover/focus: the navy bar grows upward and a drawer of the course's
   sections (ACF "Course Sections" repeater) animates open below the title. */
.course-card-wrap {
    display: block;
    border-radius: 0.6rem;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(47, 65, 96, 0.18);
    text-decoration: none;
    color: var(--white);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.course-card-wrap:hover,
.course-card-wrap:focus {
    text-decoration: none;
    color: var(--white);
}
.course-card {
    position: relative;
    width: 100%;
    height: 330px;
    overflow: hidden;
}

/* Full-bleed background photo */
.course-card__image {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-color: var(--darkblue);
}

/* Featured marker — minimal floating gold star, top-right */
.course-card__featured {
    position: absolute;
    top: 14px;
    right: 16px;
    color: var(--yellow);
    font-size: 1.5rem;
    line-height: 1;
    z-index: 4;
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.5));
}

/* Default state: eyebrow + title in a solid navy bar over the photo.
   On hover the bar grows upward and a drawer of course sections opens. */
.course-card__title {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    background: var(--darkblue);
    padding: 16px 20px;
    transition: background 0.6s ease, color 0.6s ease;
}
.course-card__eyebrow {
    display: block;
    font-size: 0.7rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--blue-light);
    font-weight: 700;
    margin-bottom: 0.3rem;
    transition: color 0.6s ease;
}
.course-card__name {
    margin: 0;
    font-size: 1.18rem;
    font-weight: 700;
    color: var(--white);
    transition: color 0.6s ease;
}

/* Hover/focus: bar flips to a warm cream panel — navy text + yellow accents.
   Fixes the low-contrast white-on-darkblue once the drawer expands. */
.course-card-wrap:hover .course-card__title,
.course-card-wrap:focus-within .course-card__title,
.glide_courses.is-feature-intro .glide__slides .course-card-wrap--feature .course-card__title {
    background: #ffffff;
}
.course-card-wrap:hover .course-card__name,
.course-card-wrap:focus-within .course-card__name,
.glide_courses.is-feature-intro .glide__slides .course-card-wrap--feature .course-card__name {
    color: var(--darkblue);
}
.course-card-wrap:hover .course-card__eyebrow,
.course-card-wrap:focus-within .course-card__eyebrow,
.glide_courses.is-feature-intro .glide__slides .course-card-wrap--feature .course-card__eyebrow {
    color: #c79a14;
}

/* Hover drawer: the course's own sections, revealed below the title.
   max-height + opacity animate open; the navy bar grows upward to fit
   (the bar is bottom-anchored, so the eyebrow/title never get clipped). */
.course-card__drawer {
    list-style: none;
    margin: 0;
    padding: 0;
    /* Two columns — sections render 2-up (2 then 2) */
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 1rem;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    font-size: 0.86rem;
    border-top: 1px solid rgba(255, 255, 255, 0);
    transition: max-height 0.8s cubic-bezier(0.16, 0.84, 0.44, 1),
                opacity 0.55s ease,
                margin-top 0.7s ease,
                padding-top 0.7s ease,
                border-top-color 0.55s ease,
                color 0.6s ease;
}
.course-card-wrap:hover .course-card__drawer,
.course-card-wrap:focus-within .course-card__drawer,
.glide_courses.is-feature-intro .glide__slides .course-card-wrap--feature .course-card__drawer {
    max-height: 220px;
    opacity: 1;
    margin-top: 0.9rem;
    padding-top: 0.9rem;
    /* Cream panel: navy-tinted text + hairline rule */
    color: #3a4256;
    border-top-color: rgba(47, 65, 96, 0.14);
}
.course-card__drawer li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.3rem 0;
    line-height: 1.3;
}
.course-card__drawer li i {
    flex-shrink: 0;
    color: var(--blue-light);
    font-size: 0.95rem;
    transition: color 0.6s ease;
}
.course-card-wrap:hover .course-card__drawer li i,
.course-card-wrap:focus-within .course-card__drawer li i,
.glide_courses.is-feature-intro .glide__slides .course-card-wrap--feature .course-card__drawer li i {
    color: var(--blue);
}

/* "View Course Details" button — full-width strip at the bottom of the navy
   bar (the only link on the card). Hidden at rest; revealed on hover with the
   drawer. Negative L/R/bottom margins bleed it to the card edges (the bar's
   16px/20px padding); card overflow:hidden clips the corners. */
.course-card__btn {
    display: block;
    /* Sides bleed to the card edges; bottom bleed is added on reveal only —
       at rest the button must contribute 0 height so the resting bar stays
       vertically balanced (16px above the eyebrow == 16px below the title). */
    margin: 0 -20px 0;
    text-align: center;
    background: var(--yellow);
    color: var(--darkblue);
    font-weight: 600;
    font-size: 0.85rem;
    /* Vertical padding is 0 at rest and restored on reveal — max-height alone
       can't clip an element below its own padding, so the 12px top/bottom
       padding would otherwise leak 24px into the resting bar and unbalance it. */
    padding: 0 16px;
    text-decoration: none;
    box-sizing: border-box;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.7s cubic-bezier(0.16, 0.84, 0.44, 1),
                opacity 0.55s ease,
                margin-top 0.7s ease,
                margin-bottom 0.7s ease,
                padding 0.7s ease,
                background 0.2s ease,
                color 0.2s ease;
}
.course-card-wrap:hover .course-card__btn,
.course-card-wrap:focus-within .course-card__btn,
.glide_courses.is-feature-intro .glide__slides .course-card-wrap--feature .course-card__btn {
    max-height: 60px;
    opacity: 1;
    margin-top: 0.9rem;
    margin-bottom: -16px; /* bleed to the card's bottom edge once revealed */
    padding: 12px 16px;
}
/* Button's own hover — yellow flips to brand blue for click feedback */
.course-card__btn:hover,
.course-card__btn:focus {
    background: var(--blue);
    color: var(--white);
}
/* Touch devices have no hover — keep the button visible so the card is usable */
@media (hover: none) {
    .course-card__btn {
        max-height: 60px;
        opacity: 1;
        margin-top: 0.9rem;
        margin-bottom: -16px;
        padding: 12px 16px;
    }
}

/* Courses intro content — WYSIWYG text styling */
.pe-courses__content {
    color: var(--darkblue);
    line-height: 1.8;
}
.pe-courses__content a {
    color: var(--blue) !important;
    font-weight: 700;
    text-decoration: none;
}

.pe-courses__content a:hover {
    text-decoration: underline;
}

/* ==========================================================================
   Course Header (pe-course-header)
   Breadcrumb, dark striped banner with meta line, white content card.
   Sits above the info cards row on single-course.php.
   No BS equivalent: striped gradient background, letter-spaced uppercase
   micro-type, custom eyebrow + flush card relationship.
   ========================================================================== */

.pe-course-header {
    background: #fff;
}

/* Dark striped banner (replaces the widescreen hero) */
.pe-course-header__banner {
    position: relative;
    min-height: 260px;
    display: flex;
    align-items: flex-start;
    padding: 2.5rem 0;
    background-color: var(--course-header-bg);
    background-image: repeating-linear-gradient(
        45deg,
        transparent 0,
        transparent 10px,
        var(--course-header-stripe) 10px,
        var(--course-header-stripe) 20px
    );
    border-bottom: 4px solid var(--blue);
}

/* Breadcrumb — sits inside the banner on a dark background */
.pe-course-header__crumbs {
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.85rem;
    letter-spacing: 0.02em;
    line-height: 1.4;
}
.pe-course-header__crumbs a {
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    transition: color 0.2s ease;
}
.pe-course-header__crumbs a:hover,
.pe-course-header__crumbs a:focus {
    color: var(--blue);
    text-decoration: none;
}
.pe-course-header__crumbs-sep {
    margin: 0 0.5em;
    color: var(--blue);
}
.pe-course-header__crumbs [aria-current="page"] {
    color: #fff;
    font-weight: 500;
}

/* White content card — overlaps the bottom of the striped banner */
.pe-course-header__card-wrap {
    margin-top: -6rem;
    position: relative;
    z-index: 20;
    padding-bottom: 2.5rem;
}

/* Featured image alongside the enquiry form — Bootstrap handles
   w-100 / h-100 / object-fit-cover; one rule covers the mobile case
   where the stacked column has no height to anchor h-100 to. */
.single-course__enquiry-img {
    min-height: 240px;
}
.pe-course-header__card {
    background: #fff;
    padding: 2.5rem 2rem;
    border-radius: 2px;
    position: relative;
}

.pe-course-header__badge {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    background: #2d3e5f;
    color: #fff;
    font-size: 0.9rem;
    font-weight: 500;
    padding: 7px 16px;
    border-radius: 24px;
    z-index: 4;
    line-height: 1;
}
.pe-course-header__badge i {
    color: #ffc107;
    font-size: 1rem;
}

.pe-course-header__eyebrow {
    color: var(--blue);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.75rem;
    font-weight: 700;
    margin: 0 0 1rem;
    line-height: 1.4;
}

.pe-course-header__title {
    font-size: clamp(2rem, 5.2vw, 3.25rem);
    line-height: 1.08;
    font-weight: 700;
    color: var(--darkblue);
    margin: 0 0 1.25rem;
}

.pe-course-header__lead,
.pe-course-header__lead p {
    font-size: 1rem;
    line-height: 1.65;
    color: var(--darkblue);
}
.pe-course-header__lead p {
    margin: 0 0 0.75rem;
}
.pe-course-header__lead p:last-child {
    margin-bottom: 0;
}
.pe-course-header__lead a {
    color: var(--blue);
    font-weight: 700;
    text-decoration: none;
}
.pe-course-header__lead a:hover,
.pe-course-header__lead a:focus {
    text-decoration: underline;
}

/* Responsive */
@media (max-width: 767.98px) {
    .pe-course-header__banner {
        min-height: 180px;
        padding: 2rem 0;
    }
    .pe-course-header__card {
        padding: 1.75rem 1.25rem;
    }
    .pe-course-header__title {
        margin-bottom: 1rem;
    }
}

/* Tablet/laptop band (768–1299px): the banner doesn't tuck behind the
   sticky header yet (that only happens at ≥1300px), so the full 260px stripe
   sitting below a tall header reads as oversized. Trim the min-height here. */
@media (min-width: 768px) and (max-width: 1299.98px) {
    .pe-course-header__banner {
        min-height: 185px;
    }
}

/* ==========================================================================
   Course Sidebar
   Three stacked blocks on dark navy; sticky on lg+ with scrollspy nav.
   ========================================================================== */

.pe-course-sidebar {
    border-radius: 0.25rem;
    overflow: hidden;
    font-size: 0.9rem;
}
.pe-course-sidebar__block {
    padding: 24px 28px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.pe-course-sidebar__block:first-child {
    border-top: 0;
}
.pe-course-sidebar__enquire {
    margin-top: 1rem;
}

.pe-course-sidebar__eyebrow {
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 600;
}

/* Document ID */
.pe-course-sidebar__docid {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.9rem;
    letter-spacing: 0.05em;
    color: #fff;
    word-break: break-all;
}

/* On This Page — numbered anchor nav */
.pe-course-sidebar__nav-item {
    margin-bottom: 2px;
}
.pe-course-sidebar__nav-link {
    color: rgba(255, 255, 255, 0.85);
    padding: 6px 10px 6px 10px;
    border-left: 2px solid transparent;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
    line-height: 1.4;
}
.pe-course-sidebar__nav-link:hover,
.pe-course-sidebar__nav-link:focus {
    color: var(--blue);
    text-decoration: none;
}
.pe-course-sidebar__nav-link.is-active {
    color: var(--blue);
    border-left-color: var(--blue);
    font-weight: 600;
    background: rgba(62, 168, 238, 0.08);
}
.pe-course-sidebar__nav-num {
    font-variant-numeric: tabular-nums;
    opacity: 0.75;
    font-size: 0.8rem;
    min-width: 22px;
}
.pe-course-sidebar__nav-dot {
    margin: 0 8px;
    opacity: 0.45;
}
.pe-course-sidebar__nav-label {
    flex: 1;
}

/* What You Will Learn — tick list in sidebar */
.pe-course-sidebar__learn-item {
    padding: 6px 0;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.9);
}
.pe-course-sidebar__learn-item + .pe-course-sidebar__learn-item {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.pe-course-sidebar__learn-item .bi {
    margin-top: 4px;
}

/* Quick Facts — key/value rows */
.pe-course-sidebar__fact {
    padding: 10px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.pe-course-sidebar__fact:first-child {
    border-top: 0;
    padding-top: 0;
}
.pe-course-sidebar__fact-label {
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.55);
    font-weight: 500;
}
.pe-course-sidebar__fact-value {
    font-weight: 600;
    color: #fff;
}

/* Sticky behaviour — overrides the generic .single-course__sidebar-sticky
   padding so the sidebar pins flush under the header on lg+. */
@media (min-width: 992px) {
    .single-course__sidebar-sticky:has(> .pe-course-sidebar) {
        padding-top: 0;
    }
    .pe-course-sidebar {
        transition: transform 0.12s ease-out;
    }
}

/* Below lg the layout collapses to one column — the "Course Contents"
   scrollspy nav makes no sense stacked, so hide it. The enquire button
   (.pe-course-sidebar__enquire, a separate sibling) pins to the bottom of
   the viewport as a sticky CTA bar. */
@media (max-width: 991.98px) {
    .pe-course-sidebar {
        display: none;
    }
    .pe-course-sidebar__enquire {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1030;
        margin-top: 0;
        padding: 0.75rem 1rem;
        padding-bottom: calc(0.75rem + env(safe-area-inset-bottom));
        background: #fff;
        box-shadow: 0 -4px 16px rgba(47, 65, 96, 0.15);
        transition: transform 0.3s ease, opacity 0.3s ease;
    }
    /* Slide the fixed CTA out of view once the footer scrolls into view so it
       never covers the sub-footer details (JS toggles .is-tucked, see
       single-course.php). */
    .pe-course-sidebar__enquire.is-tucked {
        transform: translateY(100%);
        opacity: 0;
        pointer-events: none;
    }
}

/* ==========================================================================
   Single Course - Content (info cards, sections, list markers, CTAs)
   No BS equivalent: alternating tinted sections, depth-coded list markers,
   section accent bars, the outline-brand button. (Previously filed under
   Homepage Intro with no banner of its own.)
   ========================================================================== */

.single-course__info-icon {
    font-size: 1.5rem;
    line-height: 1;
}

.single-course__info-label {
    font-size: 0.7rem;
    letter-spacing: 0.5px;
    line-height: 1.1;
}

.single-course__info-value {
    font-size: 0.95rem;
    line-height: 1.25;
}


.single-course__features-list li {
    line-height: 1.5;
}

/* Two-column wrapper: all course content (Overview → CTA) + sticky sidebar.
   Stacks on mobile; sidebar sticks beside the whole main column on lg+. */
.single-course__page {
    background: #fff;
}
.single-course__sidebar-col {
    position: relative;
}
@media (min-width: 992px) {
    .single-course__sidebar-sticky {
        position: sticky;
        z-index: 1;
        top: calc(var(--header-height) + 3rem);
    }
}

/* Alternating light-blue background on even child sections (flipped) */
.single-course__sections-wrap > .single-course__section:nth-child(even) {
    background: #eaf4fc8f;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    border-radius: .5rem;
}

/* On mobile the white (odd) sections also need side padding so their text
   isn't flush to the screen edge — match the tinted sections' inset. */
@media (max-width: 991.98px) {
    .single-course__sections-wrap > .single-course__section {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

/* Inline links inside child course sections — brand dark blue, bold, underlined */
.single-course__section-body a {
    color: var(--darkblue);
    font-weight: 700;
    text-decoration: underline;
}
.single-course__section-body a:hover,
.single-course__section-body a:focus {
    color: var(--blue);
    text-decoration: underline;
}

/* Section heading — short blue accent bar under each section title */
.single-course__section > h2 {
    position: relative;
    padding-bottom: .65rem;
}
.single-course__section > h2::after {
    content: "";
    display: block;
    width: 48px;
    height: 3px;
    margin-top: .65rem;
    background: var(--blue);
    border-radius: 2px;
}

/* Section body — readable copy.
   Course sections lean heavily on lists (the SFI/TRI entry requirements
   nest up to 3 levels), so style them for clear hierarchy. */
.single-course__section-body p {
    line-height: 1.8;
    margin-bottom: 1.1rem;
}
.single-course__section-body p:last-child {
    margin-bottom: 0;
}

/* Depth-coded list markers — SHARED by course section bodies and single-post
   articles (rules were byte-identical; grouped here so there's one source of
   truth). Course sections add a 3rd-level marker the post body never needs. */
.single-course__section-body ul,
.single-post__article ul {
    list-style: none;
    margin: 0 0 1.1rem;
    padding-left: 0;
}
.single-course__section-body ul:last-child,
.single-post__article ul:last-child {
    margin-bottom: 0;
}
.single-course__section-body li,
.single-post__article li {
    position: relative;
    padding-left: 1.6rem;
    margin-bottom: .6rem;
    line-height: 1.65;
}
.single-course__section-body li:last-child,
.single-post__article li:last-child {
    margin-bottom: 0;
}
/* Level 1 — filled blue dot */
.single-course__section-body li::before,
.single-post__article ul li::before {
    content: "";
    position: absolute;
    left: .2rem;
    top: .62em;
    width: 7px;
    height: 7px;
    background: var(--blue);
    border-radius: 50%;
    transform: translateY(-50%);
}
/* Nested lists — indent + lighter hollow marker */
.single-course__section-body ul ul,
.single-post__article ul ul {
    margin: .6rem 0 .25rem;
    padding-left: .35rem;
}
.single-course__section-body ul ul li::before,
.single-post__article ul ul li::before {
    background: transparent;
    border: 1.5px solid var(--blue);
}
/* Level 3 (course sections only) — small darkblue dash */
.single-course__section-body ul ul ul li::before {
    border: 0;
    border-radius: 1px;
    background: var(--darkblue);
    opacity: .55;
    width: 9px;
    height: 2px;
    top: .8em;
}

/* Section CTA button row */
.single-course__section-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-top: 1.5rem;
}

/* Darkblue-outlined secondary button for light-bg sections */
.btn.btn-outline-brand {
    background: transparent;
    color: var(--darkblue);
    border: 2px solid var(--darkblue);
}
.btn.btn-outline-brand:hover,
.btn.btn-outline-brand:focus {
    background: var(--darkblue);
    color: #fff;
    border-color: var(--darkblue);
}

/* ==========================================================================
   Courses Archive — Grid
   No BS equivalent: CSS Grid with auto-fill/minmax pattern
   ========================================================================== */

.courses-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1.5rem;
}


/* ##########################################################################
   GROUP E  .  NEWS & BLOG
   ########################################################################## */

/* ==========================================================================
   Single Post (News) — broad full-width article
   Mirrors the single-course content typography but in one centred,
   comfortably-wide reading column (no course sidebar / sections).
   ========================================================================== */
.single-post__inner {
    max-width: 860px;
}

/* Article body — same readable copy + custom list markers as course sections */
.single-post__article {
    font-size: 1.0625rem;
}
.single-post__article p {
    line-height: 1.8;
    margin-bottom: 1.1rem;
}
.single-post__article p:last-child {
    margin-bottom: 0;
}

/* Headings inside the article — short blue accent bar (matches course h2) */
.single-post__article h2 {
    position: relative;
    margin-top: 2.25rem;
    margin-bottom: 1.25rem;
    padding-bottom: .65rem;
    font-weight: 700;
    color: var(--darkblue);
}
.single-post__article h2::after {
    content: "";
    display: block;
    width: 48px;
    height: 3px;
    margin-top: .65rem;
    background: var(--blue);
    border-radius: 2px;
}
.single-post__article h3 {
    margin-top: 1.75rem;
    margin-bottom: 1rem;
    font-weight: 700;
    color: var(--darkblue);
}
.single-post__article > *:first-child {
    margin-top: 0;
}

/* Images / embeds sit full width of the reading column */
.single-post__article img {
    max-width: 100%;
    height: auto;
    border-radius: .5rem;
}
.single-post__article figure {
    margin: 1.5rem 0;
}

/* Lists — depth-coded markers shared with course sections; see the
   "Depth-coded list markers — SHARED" block under Single Course above. */

/* Inline links — brand dark blue, bold, underlined (matches course body) */
.single-post__article a {
    color: var(--darkblue);
    font-weight: 700;
    text-decoration: underline;
}
.single-post__article a:hover,
.single-post__article a:focus {
    color: var(--blue);
}

/* Published-date chip — echoes the news-card date pill (yellow accent edge) */
.single-post__date {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    background: #fff;
    border-left: 4px solid var(--yellow);
    border-radius: 0 8px 8px 0;
    box-shadow: 0 2px 10px rgba(47, 65, 96, 0.08);
    padding: 0.5rem 0.95rem 0.5rem 0.8rem;
}
.single-post__date-day {
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1;
    color: var(--blue);
}
.single-post__date-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}
.single-post__date-label {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--blue);
}
.single-post__date-full {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--darkblue);
}

/* Meta + category links under the article */
.single-post__meta a {
    color: var(--darkblue);
    text-decoration: none;
    font-weight: 600;
}
.single-post__meta a:hover,
.single-post__meta a:focus {
    color: var(--blue);
    text-decoration: underline;
}

/* Share this article — round brand icon buttons */
.single-post__share-label {
    letter-spacing: 1px;
}
.single-post__share-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--darkblue);
    color: #fff;
    font-size: 1.05rem;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .2s ease, transform .2s ease;
}
.single-post__share-icon:hover,
.single-post__share-icon:focus {
    background: var(--blue);
    color: #fff;
    transform: translateY(-2px);
}

/* FAQs — right-hand accordion beside the article
   (v2 Option 7: white cards on the soft-blue tint panel, numbered, blue left accent) */
.single-post__faqs-sticky {
    position: sticky;
    top: calc(var(--header-height, 90px) + 1.5rem);
}
.single-post__faqs {
    background: #eaf4fc;
    padding: 1.5rem;
    border-radius: 0.5rem;
}
.single-post__faqs-accordion .accordion-item {
    border: 0;
    border-left: 4px solid #d7d7d7;
    border-radius: 0.5rem;
    overflow: hidden;
    background: #fff;
    padding: .85rem 1rem;
    margin-bottom: .85rem;
    box-shadow: 0 2px 8px rgba(47, 65, 96, .05);
}
.single-post__faqs-accordion .accordion-item:last-child {
    margin-bottom: 0;
}
/* Left accent turns blue on the open card */
.single-post__faqs-accordion .accordion-item:has(.accordion-button:not(.collapsed)) {
    border-left-color: var(--blue);
}
.single-post__faqs-accordion .accordion-button {
    padding: 0;
    background: transparent;
    box-shadow: none;
    font-weight: 700;
    color: var(--darkblue);
    display: flex;
    gap: .6rem;
    align-items: baseline;
}
.single-post__faqs-accordion .accordion-button:not(.collapsed) {
    color: var(--darkblue);
    background: transparent;
}
/* No chevron/plus — Option 7 has no toggle icon */
.single-post__faqs-accordion .accordion-button::after {
    display: none;
}
.single-post__faqs-accordion .accordion-button:focus {
    border-color: transparent;
    box-shadow: none;
}
.single-post__faq-num {
    flex: none;
    color: var(--blue);
    font-size: .8rem;
    font-weight: 700;
}
.single-post__faqs-accordion .accordion-body {
    padding: .5rem 0 0;
    color: #5a6b80;
    line-height: 1.7;
}
.single-post__faqs-accordion .accordion-body a {
    color: var(--darkblue);
    font-weight: 700;
    text-decoration: underline;
}
.single-post__faqs-accordion .accordion-body a:hover,
.single-post__faqs-accordion .accordion-body a:focus {
    color: var(--blue);
}
@media (max-width: 991.98px) {
    /* Below the article on smaller screens */
    .single-post__faqs-sticky {
        position: static;
    }
    .single-post__faqs {
        margin-top: 1.5rem;
    }
}

/* Mobile: extra side padding so the article/FAQs don't touch the screen edges
   (default container gutter is only 12px, too tight for body copy) */
@media (max-width: 575.98px) {
    .single-post__body .container {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }
    /* Drop the my-4 vertical margin on mobile */
    .single-post__body.my-4 {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
    /* Smaller share icons on mobile */
    .single-post__share-icon {
        width: 32px;
        height: 32px;
        font-size: 0.85rem;
    }
    /* Drop the meta-row top padding on mobile */
    .single-post__meta.pt-4 {
        padding-top: 0 !important;
    }
    /* Breathing room above the share/back actions on mobile (pt-3) */
    .single-post__actions {
        padding-top: 1rem;
    }
}

/* ==========================================================================
   Blog Post (single.php) — inherited from parent theme
   No BS equivalent: parent theme template (no HTML access); WYSIWYG content
   styling for links, headings, and line-height
   ========================================================================== */

.blog_article h1 {
    color: var(--darkblue);
}

.blog_article {
    color: var(--darkblue);
    line-height: 1.8;
}

.blog_article a {
    color: var(--blue);
    transition: color 0.2s ease;
}

.blog_article a:hover {
    color: var(--darkblue);
}

/* ==========================================================================
   Sticky Sidebar (news archive + single post)
   No BS equivalent: Bootstrap has .sticky-top but it pins under nothing by
   default; we offset by the header + a comfortable gap, and only activate
   at lg+ to avoid sticky overlap on mobile.
   ========================================================================== */

.sticky-sidebar {
    position: static;
}

@media (min-width: 992px) {
    .sticky-sidebar {
        position: sticky;
        top: calc(var(--header-height, 103px) + 1rem);
        max-height: calc(100vh - var(--header-height, 103px) - 2rem);
        overflow-y: auto;
        scrollbar-width: thin;
        scrollbar-color: var(--blue) transparent;
    }
}

.pe-enquiry-form__box--sidebar h2 {
    font-size: 1.25rem;
}

/* Stack fields full-width inside the narrow sticky sidebar so labels
   and inputs don't sit side-by-side. Overrides Formidable's half/third
   width classes + any inline grid rules. */
.pe-enquiry-form__box--sidebar .frm_form_field,
.pe-enquiry-form__box--sidebar .frm_half,
.pe-enquiry-form__box--sidebar .frm_third,
.pe-enquiry-form__box--sidebar .frm_two_thirds,
.pe-enquiry-form__box--sidebar .frm_fourth,
.pe-enquiry-form__box--sidebar .frm_three_fourths {
    width: 100% !important;
    float: none !important;
    clear: both !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}
.pe-enquiry-form__box--sidebar .frm_form_fields > fieldset,
.pe-enquiry-form__box--sidebar .frm_fields_container {
    display: block !important;
}

/* Vertical spacing between fields + labels in the sidebar form.
   Tightened from 1rem → 0.375rem (16px → 6px) so the narrow sidebar
   form reads as a compact stack rather than floating apart. */
.pe-enquiry-form__box--sidebar .frm_form_field {
    margin-bottom: 0.375rem !important;
    padding-bottom: 0 !important;
}
/* Formidable defaults .frm_submit to margin-top:24px — too big against the
   tightened 6px field rhythm. Trim it to 0.75rem so the CTA still reads
   as separated from the inputs without the oversized gap. Sidebar only. */
.pe-enquiry-form__box--sidebar .frm_submit {
    margin-top: 0.75rem !important;
}
/* The form uses placeholders, so Formidable hides labels with
   visibility:hidden — but that keeps each label's ~21px box in the layout,
   reserving empty space above every field. Collapse them with display:none
   in the sidebar so the fields stack tightly. Placeholders still name each
   field, so nothing visible is lost. */
.pe-enquiry-form__box--sidebar .frm_primary_label,
.pe-enquiry-form__box--sidebar label.frm_primary_label,
.pe-enquiry-form__box--sidebar .frm_form_field > label {
    display: none !important;
}
.pe-enquiry-form__box--sidebar .frm_description {
    margin-top: 0.15rem !important;
}

/* The two-up pairing rule below (.pe-enquiry-form__shortcode #frm_field_1/3/7/8)
   would otherwise keep those four fields side-by-side in the narrow sidebar.
   Add the sidebar box class so this rule carries two classes + one ID — higher
   specificity than the pairing rule's one class + one ID — forcing a single column. */
.pe-enquiry-form__box--sidebar .pe-enquiry-form__shortcode #frm_field_1_container,
.pe-enquiry-form__box--sidebar .pe-enquiry-form__shortcode #frm_field_3_container,
.pe-enquiry-form__box--sidebar .pe-enquiry-form__shortcode #frm_field_7_container,
.pe-enquiry-form__box--sidebar .pe-enquiry-form__shortcode #frm_field_8_container {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    clear: both !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}


/* ##########################################################################
   GROUP F  .  FORMS & CONTACT
   ########################################################################## */

/* ==========================================================================
   Enquiry Form — Formidable field styling (Bootstrap-like)
   Scoped to the form wrapper so it styles every place the enquiry form
   appears (full-width section + course-page sidebar variant).
   ========================================================================== */

/* On the full-width section variant a single column would stretch the
   inputs uncomfortably wide — keep the stacked form to a readable width. */
.pe-enquiry-form__box:not(.pe-enquiry-form__box--sidebar) .pe-enquiry-form__shortcode {
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
}

/* Strip Formidable's fieldset chrome + visually hide the screen-reader legend */
.pe-enquiry-form__shortcode fieldset {
    border: 0;
    padding: 0;
    margin: 0;
    min-width: 0;
}
.pe-enquiry-form__shortcode .frm_screen_reader {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Hide the anti-spam honeypot field (the "leave this blank" box) */
.pe-enquiry-form__shortcode .frm_verify {
    display: none !important;
}
.pe-enquiry-form__shortcode div:has(> .frm_verify) {
    display: none !important;
}

/* Stack every field full-width — never sit two fields side-by-side.
   Overrides Formidable's half/third/fourth grid classes + inline widths
   so the form reads as a single clean column in every context. */
.pe-enquiry-form__shortcode .frm_form_field,
.pe-enquiry-form__shortcode .frm_half,
.pe-enquiry-form__shortcode .frm_third,
.pe-enquiry-form__shortcode .frm_two_thirds,
.pe-enquiry-form__shortcode .frm_fourth,
.pe-enquiry-form__shortcode .frm_three_fourths,
.pe-enquiry-form__shortcode .frm_sixth,
.pe-enquiry-form__shortcode .frm_seventh,
.pe-enquiry-form__shortcode .frm_eighth {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    clear: both !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}
.pe-enquiry-form__shortcode .frm_form_fields > fieldset,
.pe-enquiry-form__shortcode .frm_fields_container {
    display: block !important;
}

/* Pair fields two-up: Name (1) + Email (3), then Phone (7) + Course (8).
   Overrides the full-width stack above for these four containers only;
   Message (5) + submit stay full width (general rule's clear:both handles
   the drop below the floats). Keyed to the same #frm_field_{id}_container
   IDs as the icon-input styling — if form 1 is rebuilt, update these too. */
@media (min-width: 576px) {
    .pe-enquiry-form__shortcode #frm_field_1_container,
    .pe-enquiry-form__shortcode #frm_field_3_container,
    .pe-enquiry-form__shortcode #frm_field_7_container,
    .pe-enquiry-form__shortcode #frm_field_8_container {
        width: calc(50% - 0.55rem) !important;
        max-width: calc(50% - 0.55rem) !important;
        float: left !important;
        clear: none !important;
    }
    .pe-enquiry-form__shortcode #frm_field_1_container,
    .pe-enquiry-form__shortcode #frm_field_7_container {
        clear: left !important;
        margin-right: 1.1rem !important;
    }
}

/* Field spacing — gap between each field/row. !important because Formidable's
   own stylesheet (.with_frm_style .frm_form_field { margin-bottom:10px }) has
   equal specificity and loads later, so without it the real gap collapsed to
   10px regardless of this value. 1.5rem (24px) matches the submit-button gap
   so the whole form keeps one even vertical rhythm. */
.pe-enquiry-form__shortcode .frm_form_field {
    margin-bottom: 1.5rem !important;
}

/* Labels */
.pe-enquiry-form__shortcode .frm_primary_label {
    display: block;
    color: var(--darkblue);
    font-weight: 600;
    font-size: 0.9rem;
    margin: 0 0 0.4rem;
    line-height: 1.3;
}
/* Required asterisk (Formidable ships the span empty — add the star) */
.pe-enquiry-form__shortcode .frm_required {
    color: var(--blue);
    font-weight: 700;
    margin-left: 2px;
}
.pe-enquiry-form__shortcode .frm_required::after {
    content: "*";
}
/* Tighter spacing on mobile, where every field is full-width (stacked col-100):
   smaller label gap AND smaller gap between the stacked fields themselves. */
@media (max-width: 575.98px) {
    .pe-enquiry-form__shortcode .frm_primary_label {
        margin-bottom: 0.2rem;
    }
    .pe-enquiry-form__shortcode .frm_form_field {
        margin-bottom: 0.6rem !important; /* beat the !important base rule above */
    }
}

/* Hidden-label fields (Formidable "label position: hidden", placeholder-driven):
   Formidable only sets visibility:hidden, so the label STILL reserves its full
   height + margin + padding — ~30px of empty space stacked above every input,
   which is what was bloating the gap between fields. Collapse it to a zero-
   footprint screen-reader-only label so the gap is just the field margin, while
   the label text stays available to assistive tech. */
.pe-enquiry-form__shortcode .frm_hidden_container .frm_primary_label {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Inputs, textarea, select */
.pe-enquiry-form__shortcode input[type="text"],
.pe-enquiry-form__shortcode input[type="email"],
.pe-enquiry-form__shortcode input[type="tel"],
.pe-enquiry-form__shortcode input[type="url"],
.pe-enquiry-form__shortcode input[type="number"],
.pe-enquiry-form__shortcode textarea,
.pe-enquiry-form__shortcode select {
    display: block;
    width: 100%;
    padding: 0.65rem 0.9rem;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--darkblue);
    background-color: #fff;
    border: 1px solid #ccd2da;
    border-radius: 0.25rem;
    box-shadow: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    -webkit-appearance: none;
    appearance: none;
}
.pe-enquiry-form__shortcode textarea {
    min-height: 130px;
    resize: vertical;
}
.pe-enquiry-form__shortcode ::placeholder {
    color: #9aa3ad;
    opacity: 1;
}

/* Focus state — brand-blue ring */
.pe-enquiry-form__shortcode input:focus,
.pe-enquiry-form__shortcode textarea:focus,
.pe-enquiry-form__shortcode select:focus {
    outline: none;
    border-color: var(--blue);
    box-shadow: 0 0 0 0.2rem rgba(62, 168, 238, 0.25);
}

/* Validation states */
.pe-enquiry-form__shortcode .frm_blank_field input,
.pe-enquiry-form__shortcode .frm_blank_field textarea,
.pe-enquiry-form__shortcode .frm_blank_field select {
    border-color: #dc3545;
}
.pe-enquiry-form__shortcode .frm_error {
    color: #dc3545;
    font-size: 0.825rem;
    margin-top: 0.25rem;
}
.pe-enquiry-form__shortcode .frm_error_style {
    background: #f8d7da;
    color: #842029;
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
}
.pe-enquiry-form__shortcode .frm_message {
    background: #d1e7dd;
    color: #0f5132;
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
}

/* Submit button — "Navy · Yellow Accent" (design 2).
   Full-width navy button with a yellow bottom-accent border and a yellow
   paper-plane icon (added via ::after as an inline-SVG data URI, matching the
   icon-in-input pattern below — kept out of Formidable's submit_html so it
   can't be sanitised away). The button keeps `frm_button_submit w-100 fw-bold`
   in Formidable → Customize HTML; everything visual lives here. !important is
   needed to beat Formidable's own .with_frm_style button rules. No hover rise —
   hover swaps the navy fill to brand blue (keeps the yellow accent) + a soft
   shadow, so the state change is clearly visible without any movement. */
.pe-enquiry-form__shortcode .frm_button_submit {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    width: 100%;
    background-color: var(--darkblue) !important;
    color: #fff !important;
    border: none !important;
    border-bottom: 3px solid var(--yellow) !important;
    border-radius: 0.4rem !important;
    padding: 0.85rem 1.5rem !important;
    font-size: 1.05rem !important;
    font-weight: 400 !important;
    letter-spacing: 0.3px;
    text-transform: none !important;
    transition: box-shadow 0.25s ease, background-color 0.25s ease;
}
.pe-enquiry-form__shortcode .frm_button_submit::after {
    content: "";
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M15 1L7 9M15 1l-5 14-3-6-6-3 14-5z' stroke='%23ffc107' stroke-width='1.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}
.pe-enquiry-form__shortcode .frm_button_submit:hover,
.pe-enquiry-form__shortcode .frm_button_submit:focus {
    background-color: var(--blue) !important;
    box-shadow: 0 8px 22px rgba(47, 65, 96, 0.28);
}

/* Kill trailing space below the submit button (Formidable adds a fieldset
   padding-bottom + button/wrapper margin-bottom) so the gap under the button
   matches the gap above the form inside the white panel. */
.pe-enquiry-form__shortcode fieldset {
    padding-bottom: 0 !important;
}
.pe-enquiry-form__shortcode .frm_button_submit {
    margin-bottom: 0 !important;
}
.pe-enquiry-form__shortcode .frm_form_field:has(.frm_submit) {
    margin-bottom: 0 !important;
}

/* Consent checkbox (field 10) — box aligned with the label text, with a nicer
   Privacy Policy link. The checkbox is positioned absolutely so the text + link
   stay in normal inline flow (flex/gap would space the words from the link). */
.pe-enquiry-form__shortcode #frm_field_10_container .frm_checkbox label {
    display: block;
    position: relative;
    margin: 0;
    padding-left: 1.85rem;
    font-size: 0.9rem;
    line-height: 1.5;
    cursor: pointer;
}
.pe-enquiry-form__shortcode #frm_field_10_container input[type="checkbox"] {
    position: absolute;
    left: 0;
    top: 0.1em;
    width: 1.15rem;
    height: 1.15rem;
    margin: 0;
    accent-color: var(--blue);
    cursor: pointer;
}
.pe-enquiry-form__shortcode #frm_field_10_container a {
    color: var(--blue);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color 0.15s ease;
}
.pe-enquiry-form__shortcode #frm_field_10_container a:hover,
.pe-enquiry-form__shortcode #frm_field_10_container a:focus {
    color: var(--darkblue);
}

/* ==========================================================================
   Contact — Split Panel (Option 4) + Icon Inputs (Option 5)
   Layout is Bootstrap grid/utilities in page-contact-us.php; this block only
   covers what BS can't: the dark panel stripe motif, the circular detail
   icons, and the SVG icon-in-input treatment on the Formidable fields.
   Field-input base styling is inherited from .pe-enquiry-form__shortcode above.
   ========================================================================== */

.contact-split { background: #fff; }

/* Courses archive + all single course pages — restore the section's top padding (pb-5 my-4 → py-5 my-4) */
.post-type-archive-course .contact-split-section,
.single-course .contact-split-section { padding-top: 3rem !important; }

/* Anchor jump (#enquire / #enquire-form) — stop clear of the sticky header.
   The course sidebar button targets #enquire-form so it lands on the form
   itself, not the dark striped info panel above it. */
.contact-split-section,
.contact-split__form { scroll-margin-top: calc(var(--header-height, 103px) + 2rem); }

/* Drop the mt-4 top margin on mobile */
@media (max-width: 767.98px) {
    .contact-split-section.mt-4 { margin-top: 0 !important; }
}

/* Intro is a WYSIWYG (Global Settings) — strip its inner <p> margins so the
   wrapper's .mb-4 controls spacing (no double gap). */
.contact-split__intro > :last-child { margin-bottom: 0; }

/* Dark info panel — diagonal stripe motif (echoes the page-header banner) */
.contact-split__info { position: relative; overflow: hidden; }
.contact-split__info::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(-45deg, rgba(255, 255, 255, .04) 0 14px, transparent 14px 28px);
    pointer-events: none;
}
.contact-split__info > * { position: relative; z-index: 1; }

/* Circular icon chip beside each contact detail */
.contact-split__detail-icon {
    width: 46px;
    height: 46px;
    font-size: 1.2rem;
    background: rgba(62, 168, 238, .18);
    color: var(--blue);
}
.contact-split__info a.text-white:hover { color: var(--blue) !important; }

/* Social round buttons */
.contact-split__social a {
    width: 40px;
    height: 40px;
    border: 1px solid rgba(255, 255, 255, .25);
    color: #fff;
    transition: background-color .2s, border-color .2s;
}
.contact-split__social a:hover {
    background: var(--blue);
    border-color: var(--blue);
}

/* --- Icon inputs (Option 5): SVG glyph inside each Formidable field ---
   Scoped to .pe-enquiry-form__shortcode so EVERY enquiry form on the site gets
   the icon treatment (contact page, course pages, homepage, news sidebars). */
.pe-enquiry-form__shortcode input[type="text"],
.pe-enquiry-form__shortcode input[type="email"],
.pe-enquiry-form__shortcode input[type="tel"],
.pe-enquiry-form__shortcode input[type="number"],
.pe-enquiry-form__shortcode input[type="url"],
.pe-enquiry-form__shortcode select,
.pe-enquiry-form__shortcode textarea {
    padding-left: 2.9rem;
    background-repeat: no-repeat;
    background-position: left 1rem center;
    background-size: 1.05rem 1.05rem;
}
.pe-enquiry-form__shortcode textarea {
    background-position: left 1rem top 0.85rem;
}

/* Per-field glyphs — IDs map to Formidable form 1 fields:
   1 = Name, 3 = Email, 7 = Phone, 8 = Course of Interest (select), 5 = Message. */
.pe-enquiry-form__shortcode #frm_field_1_container input {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%233ea8ee'%3E%3Cpath d='M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0Zm4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4Zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10Z'/%3E%3C/svg%3E");
}
.pe-enquiry-form__shortcode #frm_field_3_container input {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%233ea8ee'%3E%3Cpath d='M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4Zm2-1a1 1 0 0 0-1 1v.217l7 4.2 7-4.2V4a1 1 0 0 0-1-1H2Zm13 2.383-4.708 2.825L15 11.105V5.383Zm-.034 6.876-5.64-3.471L8 9.583l-1.326-.795-5.64 3.47A1 1 0 0 0 2 13h12a1 1 0 0 0 .966-.741ZM1 11.105l4.708-2.897L1 5.383v5.722Z'/%3E%3C/svg%3E");
}
.pe-enquiry-form__shortcode #frm_field_7_container input {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%233ea8ee'%3E%3Cpath d='M3.654 1.328a.678.678 0 0 0-1.015-.063L1.605 2.3c-.483.484-.661 1.169-.45 1.77a17.568 17.568 0 0 0 4.168 6.608 17.569 17.569 0 0 0 6.608 4.168c.601.211 1.286.033 1.77-.45l1.034-1.034a.678.678 0 0 0-.063-1.015l-2.307-1.794a.678.678 0 0 0-.58-.122l-2.19.547a1.745 1.745 0 0 1-1.657-.459L5.482 8.062a1.745 1.745 0 0 1-.46-1.657l.548-2.19a.678.678 0 0 0-.122-.58L3.654 1.328zM1.884.511a1.745 1.745 0 0 1 2.612.163L6.29 2.98c.329.423.445.974.315 1.494l-.547 2.19a.678.678 0 0 0 .178.643l2.457 2.457a.678.678 0 0 0 .644.178l2.189-.547a1.745 1.745 0 0 1 1.494.315l2.306 1.794c.829.645.905 1.87.163 2.611l-1.034 1.034c-.74.74-1.846 1.065-2.877.702a18.634 18.634 0 0 1-7.01-4.42 18.634 18.634 0 0 1-4.42-7.009c-.362-1.03-.037-2.137.703-2.877L1.885.511z'/%3E%3C/svg%3E");
}
.pe-enquiry-form__shortcode #frm_field_5_container textarea {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%233ea8ee'%3E%3Cpath d='M14 1a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H4.414A2 2 0 0 0 3 11.586l-2 2V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v12.793a.5.5 0 0 0 .854.353l2.853-2.853A1 1 0 0 1 4.414 12H14a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z'/%3E%3Cpath d='M3 3.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zM3 6a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9A.5.5 0 0 1 3 6zm0 2.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

/* Course of Interest — mortarboard glyph (left) + custom chevron (right) */
.pe-enquiry-form__shortcode #frm_field_8_container select {
    padding-right: 2.6rem;
    /* Pin line-height to 24px (matches the 16px inputs) so the box keeps the
       same ~47px height as the text fields even while the placeholder option
       shrinks the text to 14px. Without this the content-driven height drops to
       ~44px and the field reads as smaller than its neighbours (and would jump
       back up 3px the moment a course is picked). */
    line-height: 1.5rem;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%233ea8ee'%3E%3Cpath d='M8.211 2.047a.5.5 0 0 0-.422 0l-7.5 3.5a.5.5 0 0 0 .025.917l7.5 3a.5.5 0 0 0 .372 0L14 7.14V13a1 1 0 0 0-1 1v2h3v-2a1 1 0 0 0-1-1V6.739l.686-.275a.5.5 0 0 0 .025-.917l-7.5-3.5ZM8 8.46 1.758 5.965 8 3.052l6.242 2.913L8 8.46Z'/%3E%3Cpath d='M4.176 9.032a.5.5 0 0 0-.656.327l-.5 1.7a.5.5 0 0 0 .294.605l4.5 1.8a.5.5 0 0 0 .372 0l4.5-1.8a.5.5 0 0 0 .294-.605l-.5-1.7a.5.5 0 0 0-.656-.327L8 10.466 4.176 9.032Zm-.068 1.873.22-.748 3.496 1.311a.5.5 0 0 0 .352 0l3.496-1.311.22.748L8 12.46l-3.892-1.556Z'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%239aa3ad'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
    background-repeat: no-repeat, no-repeat;
    background-position: left 1rem center, right 1rem center;
    background-size: 1.05rem 1.05rem, 0.8rem 0.8rem;
}
/* Match the "Course of Interest" placeholder to the text-field ::placeholder grey.
   A <select> ignores ::placeholder, so Formidable's JS colours the unselected
   dropdown using the --text-color-disabled CSS var (default #667085 — darker than
   our #9aa3ad input placeholders). Override that var here: getComputedStyle (which
   the JS reads) resolves to this value, so the dropdown prompt matches the inputs.
   Once a real course is picked, Formidable swaps in --text-color (the dark value). */
.pe-enquiry-form__shortcode .with_frm_style {
    --text-color-disabled: #9aa3ad;
}
/* …and match the placeholder SIZE too. The input ::placeholder renders at 14px
   (Formidable field font size) while the select shows 16px. Shrink the dropdown to
   14px only while the placeholder option is selected; once a real course is picked
   the :has() no longer matches and it reverts to 1rem like the typed input text. */
.pe-enquiry-form__shortcode #frm_field_8_container select:has(option[value=""]:checked) {
    font-size: 0.875rem;
}


/* ##########################################################################
   GROUP G  .  COMPONENTS & PAGES
   ########################################################################## */

/* ==========================================================================
   Breadcrumbs — subtle strip beneath the header on pages without a banner
   ========================================================================== */
.pe-breadcrumbs .breadcrumb {
    font-size: 0.8125rem;
}
.pe-breadcrumbs .breadcrumb-item,
.pe-breadcrumbs .breadcrumb-item a {
    color: #8a8a8a;
    text-decoration: none;
}
.pe-breadcrumbs .breadcrumb-item a:hover,
.pe-breadcrumbs .breadcrumb-item a:focus {
    color: var(--blue);
    text-decoration: none;
}
.pe-breadcrumbs .breadcrumb-item + .breadcrumb-item::before {
    color: #c6c6c6;
}
.pe-breadcrumbs .breadcrumb-item.active {
    color: #6c6c6c;
}

/* ==========================================================================
   Sitemap
   No BS equivalent: bullet replacement via icons already inline, no extra CSS
   ========================================================================== */

.sitemap__col a,
.sitemap__col a:hover,
.sitemap__col a:focus {
    text-decoration: none !important;
}

.sitemap__list a:hover {
    color: var(--blue) !important;
}

/* ==========================================================================
   Team Cards
   No BS equivalent: hover lift animation on custom card pattern
   ========================================================================== */

.team-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.team-card:hover {
    box-shadow: 0 8px 30px rgba(47, 65, 96, 0.18) !important;
}
/* Client asked for smaller photos (were full card width, ~400px square) —
   now a centred circular headshot. .ratio-1x1 keeps it square at this width. */
.team-card__image-wrap {
    width: 200px;
    max-width: 60%;
    flex-shrink: 0;
}

/* Read-more "pill" — only on small screens, where cards stack full width.
   md+ shows the full bio with no toggle. Soft rounded chip, centered;
   the "Read more"/"Read less" label swaps on the .is-expanded class. */
.team-card__toggle {
    display: none;
}
.team-card__toggle-less {
    display: none;
}
@media (max-width: 767.98px) {
    .team-card__bio {
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        overflow: hidden;
        margin-bottom: 0;
    }
    .team-card.is-expanded .team-card__bio {
        -webkit-line-clamp: unset;
        overflow: visible;
    }
    .team-card__toggle {
        display: inline-flex;
        align-items: center;
        gap: 0.3rem;
        align-self: center;
        margin-top: 1rem;
        padding: 0.4rem 1rem;
        border: none;
        border-radius: 2rem;
        background: rgba(62, 168, 238, 0.12);
        color: var(--blue);
        font-family: inherit;
        font-weight: 500;
        font-size: 0.9rem;
        line-height: 1;
        cursor: pointer;
        transition: background 0.2s ease, color 0.2s ease;
    }
    .team-card__toggle:hover {
        background: var(--blue);
        color: #fff;
    }
    .team-card__toggle .bi {
        font-size: 1rem;
    }
    .team-card.is-expanded .team-card__toggle-more {
        display: none;
    }
    .team-card.is-expanded .team-card__toggle-less {
        display: inline;
    }
    /* Closing block needs breathing room on mobile only — desktop spacing
       is handled by mt-md-5 pt-md-4, so md+ is left untouched. */
    .meet-team__closing {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }
}

/* ==========================================================================
   Sticky Contact Buttons — Yellow Accent Lift (Right Side)  [Design 5]
   No BS equivalent: fixed circular FABs that lift on hover with a detached
   yellow-accent label flag sliding out to the left. Email = navy, Phone = blue.
   ========================================================================== */

.sticky-contact {
    position: fixed;
    top: 35%;
    right: 16px;
    z-index: 1030;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1rem;
}
.sticky-contact__btn {
    display: flex;
    align-items: center;
    position: relative;
}
.sticky-contact__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--darkblue);
    color: #fff;
    font-size: 1.25rem;
    line-height: 1;
    flex-shrink: 0;
    box-shadow: 0 6px 18px rgba(47, 65, 96, 0.35);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    z-index: 2;
}
.sticky-contact__btn:nth-child(2) .sticky-contact__icon {
    background: var(--blue);
}
.sticky-contact__icon i {
    display: block;
    line-height: 1;
}
.sticky-contact__btn:hover .sticky-contact__icon {
    box-shadow: 0 10px 22px rgba(47, 65, 96, 0.4);
}
.sticky-contact__label {
    position: absolute;
    right: 60px;
    display: flex;
    align-items: center;
    height: 36px;
    padding: 0 1rem;
    border-radius: 8px;
    background: var(--yellow);
    color: var(--darkblue);
    font-size: 0.8rem;
    font-weight: 700;
    white-space: nowrap;
    opacity: 0;
    transform: translateX(10px);
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.3s ease;
    z-index: 1;
}
.sticky-contact__btn:hover .sticky-contact__label {
    opacity: 1;
    transform: translateX(0);
}
@media (max-width: 1299.98px) {
    .sticky-contact {
        display: none !important;
    }
}

/* ==========================================================================
   Airline Support — service cards
   No BS equivalent: card hover lift, accent top border, circular icon chip
   ========================================================================== */
.airline-services__card {
    border: 1px solid var(--grey);
    border-top: 3px solid var(--blue);
    border-radius: 0.25rem;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.airline-services__card:hover {
    box-shadow: 0 0.75rem 1.5rem rgba(47, 65, 96, 0.12);
}
.airline-services__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 50%;
    background: var(--blue);
    color: #fff;
    font-size: 1.5rem;
    line-height: 1;
}
.airline-services__body :last-child {
    margin-bottom: 0;
}

/* ==========================================================================
   Airline Support — CTA buttons (navy band + translucent link rows)
   No BS equivalent: glassy link rows, arrow hover-slide, solid accent row
   ========================================================================== */
.airline-buttons__band {
    border-radius: 0.5rem;
}
.airline-buttons__text {
    opacity: 0.85;
}
.airline-buttons__text :last-child {
    margin-bottom: 0;
}
.airline-buttons__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-decoration: none;
    padding: 1rem 1.1rem;
    border-radius: 0.4rem;
    font-weight: 500;
    color: #fff;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.18);
    transition: background 0.18s ease, border-color 0.18s ease, padding 0.18s ease;
}
.airline-buttons__row .bi-arrow-right {
    color: var(--blue);
    transition: transform 0.18s ease, color 0.18s ease;
}
.airline-buttons__row:hover {
    background: var(--blue);
    border-color: var(--blue);
    padding-left: 1.5rem;
}
.airline-buttons__row:hover .bi-arrow-right {
    color: #fff;
    transform: translateX(5px);
}
.airline-buttons__row.is-primary {
    background: var(--blue);
    border-color: var(--blue);
}
.airline-buttons__row.is-primary .bi-arrow-right {
    color: #fff;
}
/* Never underline these button rows — overrides the global a:not(.btn)
   underline rule (equal specificity, placed later so this wins). */
a.airline-buttons__row {
    text-decoration: none !important;
}

/* ==========================================================================
   404 Page
   No BS equivalent: parent theme template (no HTML access); custom 4rem padding
   ========================================================================== */

#content h2 {
    color: var(--darkblue);
    text-align: center;
    padding: 4rem 0;
}



/* ##########################################################################
   GROUP H  .  OVERRIDES (LAST)
   ########################################################################## */

/* ==========================================================================
   Header & footer — never underline links (client request 2026-06-04)
   Placed LAST so it overrides every earlier per-component rule, including
   the global underline and the .sub-footer-credit underline above.
   ========================================================================== */
.header-custom a,
#mobileMenu a,
.footer-custom a,
.sub-footer a {
    text-decoration: none !important;
}