/* =============================================================
   EMPLOYERS.CSS
   Heart of Yorkshire — Employer Services Microsite
   Bootstrap 5 overrides, employer brand tokens & components
   ============================================================= */


/* -------------------------------------------------------------
   SITE TOKENS
   ------------------------------------------------------------- */

:root {
    /* Brand palette */
    --employers-color-primary:   #00454b;  /* mid teal */
    --employers-color-secondary: #d7a700;  /* gold */
    --employers-color-dark:      #003031;  /* dark teal */
    --employers-color-light:     #65989f;  /* light teal */
    --employers-color-muted:     #99b1b1;  /* sage — section backgrounds */
    --employers-color-white:     #ffffff;
    --employers-color-black:     #000000;
    --employers-color-grey:      #bbbbbb;
    --employers-color-mid-grey:  #666666;    

    /* Bootstrap token overrides */
    --bs-primary:        var(--employers-color-primary);
    --bs-secondary:      var(--employers-color-secondary);
    --bs-primary-rgb:    0, 69, 75;    /* #00454b */
    --bs-secondary-rgb:  215, 167, 0;  /* #d7a700 */

    /* Border radius */
    --bs-border-radius:    0.375rem;
    --bs-border-radius-lg: 0.5rem;

    /* Transition */
    --employers-transition: all 0.25s ease;
}


/* -------------------------------------------------------------
   BASE LINK STYLES
   ------------------------------------------------------------- */

a {
    color: var(--employers-color-primary);
    text-decoration: none;
    transition: var(--employers-transition); }

a:hover {
    color: var(--employers-color-black);
    text-decoration: none;
    transition: var(--employers-transition); }
    
.bg-primary-gradient-t-b div p a,
.bg-primary-gradient-r-l div p a,
.bg-primary-gradient div p a {
    color: #fff; }

.bg-primary-gradient-t-b div p a:hover ,
.bg-primary-gradient-r-l div p a:hover ,
.bg-primary-gradient div p a:hover  {
    color: var(--employers-color-secondary); }


/* -------------------------------------------------------------
   BUTTONS
   ------------------------------------------------------------- */

.btn {
    font-family: "CaustenRound-ExtraBold";
    letter-spacing: 0.04em;
    text-transform: uppercase;
    transition: var(--employers-transition);
    font-size: 14px;
    padding: 6px 20px 8px 20px;
    border-radius: 0; }

.btn-primary {
    background-color: var(--employers-color-primary);
    color: var(--employers-color-secondary);
    border-color: var(--employers-color-primary); }

.btn-primary:hover {
    background-color: var(--employers-color-white);
    color: var(--employers-color-secondary);
    border-color: var(--employers-color-white); }

.btn-secondary {
    background-color: var(--employers-color-secondary);
    color: var(--employers-color-primary);
    border-color: var(--employers-color-secondary); }

.btn-secondary:hover {
    background-color: var(--employers-color-white);
    color: var(--employers-color-primary);
    border-color: var(--employers-color-white); }

/* Outlined white — for use on dark/teal backgrounds */
.btn-reverse {
    background-color: transparent;
    color: var(--employers-color-white);
    border: 2px solid var(--employers-color-white); }

.btn-reverse:hover,
.btn-reverse:focus {
    background-color: var(--employers-color-white);
    color: var(--employers-color-primary);
    border-color: var(--employers-color-white); }

/* Outlined gold — for use on dark/teal backgrounds */
.btn-reverse-secondary {
    background-color: transparent;
    color: var(--employers-color-secondary);
    border: 2px solid var(--employers-color-mid-grey); }

.btn-reverse-secondary:hover,
.btn-reverse-secondary:focus {
    background-color: var(--employers-color-secondary);
    color: var(--employers-color-black);
    border-color: var(--employers-color-secondary); }


/* -------------------------------------------------------------
   COLOUR UTILITIES — bg-, text-, border-
   ------------------------------------------------------------- */

/* Background colours */
.bg-employer-primary   { background-color: var(--employers-color-primary) !important; }
.bg-employer-secondary { background-color: var(--employers-color-secondary) !important; }
.bg-employer-dark      { background-color: var(--employers-color-dark) !important; }
.bg-employer-light     { background-color: var(--employers-color-light) !important; }
.bg-employer-muted     { background-color: var(--employers-color-muted) !important; }
.bg-employer-white     { background-color: var(--employers-color-white) !important; }
.bg-employer-black     { background-color: var(--employers-color-black) !important; }
.bg-employer-grey      { background-color: var(--employers-color-grey) !important; }
.bg-employer-mid-grey   { background-color: var(--employers-color-mid-grey) !important; }

/* Gradient backgrounds */

.bg-primary-gradient-l-r {
    background: linear-gradient(
        to right,
        #001a1b 0%,
        #011b1c 40%,
        #003a3b 70%,
        #003e3f 85%,
        #003c3d 100%
    ) !important; }

.bg-primary-gradient-t-b {
    background: linear-gradient(
        to bottom,
        #001a1a 0%,
        #003031 50%,
        #003031 100%
    ) !important; }

/* Text colours */
.text-hoy-pink,
.text-employer-primary   { color: var(--employers-color-primary) !important; }
.text-employer-secondary { color: var(--employers-color-secondary) !important; }
.text-employer-dark      { color: var(--employers-color-dark) !important; }
.text-employer-light     { color: var(--employers-color-light) !important; }
.text-employer-muted     { color: var(--employers-color-muted) !important; }
.text-employer-white     { color: var(--employers-color-white) !important; }
.text-employer-black     { color: var(--employers-color-black) !important; }
.text-employer-grey      { color: var(--employers-color-grey) !important; }
.text-secondary,.text-employer-mid-grey { color: var(--employers-color-mid-grey) !important; }

/* Border colours */
.border-employer-primary   { border-color: var(--employers-color-primary) !important; }
.border-employer-secondary { border-color: var(--employers-color-secondary) !important; }
.border-employer-dark      { border-color: var(--employers-color-dark) !important; }
.border-employer-light     { border-color: var(--employers-color-light) !important; }
.border-employer-grey      { border-color: var(--employers-color-grey) !important; }


/* -------------------------------------------------------------
   HEADER
   ------------------------------------------------------------- */

.header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000; }

.header.active {
    position: fixed;
    top: -35px;
    right: 0;
    left: 0;
    z-index: 1000;
    height: 115px; }

/* Rainbow stripe */
.header:before {
    content: "";
    height: 5px;
    display: block;
    width: 100%;
    background: linear-gradient(90deg, #e43318 0%, #ee760f 16%, #fbd93a 33%, #82bd46 50%, #3ca5d1 70%, #753187 85%, #dd475c 100%); }


/* -------------------------------------------------------------
   UTILITY MENU
   ------------------------------------------------------------- */

.header-utility-menu {
    width: 100%;
    background-color: #222;
    border-bottom: 2px solid #000;
    height: 30px; }

.utility-menu-back-link {
    font-size: 12px;
    line-height: 28px;
    text-transform: uppercase;
    font-family: "CaustenRound-ExtraBold";
    color: #aaa; }

.utility-menu-back-link:hover {
    color: #fff; }

.utility-menu-back-link::before {
    content: '';
    display: inline-block;
    width: 22px;
    height: 20px;
    margin-top: -2px;
    background-image: url('/_images/_logos/ico-hoy-001.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    vertical-align: middle;
    margin-right: 8px; }

ul.header-utility-links {
    margin: 0;
    padding: 0;
    text-align: left;
    float: right;
    height: 30px; }

.header-utility-links li {
    display: inline-block;
    list-style-type: none;
    padding: 0; }

.header-utility-links li a {
    font-family: "CaustenRound-ExtraBold";
    text-transform: uppercase;
    color: #aaa;
    font-size: 12px;
    line-height: 28px;
    text-decoration: none;
    margin-left: 8px;
    transition: all 180ms ease-out; }

.header-utility-links li button {
    font-family: "CaustenRound-Bold";
    text-transform: uppercase;
    color: #aaa;
    font-size: 13px;
    line-height: 30px;
    padding: 0;
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
    transition: all 180ms ease-out; }

.header-utility-links li a:hover,
.header-utility-links li button:hover {
    color: #fff;
    transition: all 180ms ease-out; }

/* Hide utility links on mobile */
@media (max-width: 575px) {
    ul.header-utility-links { display: none; } }

@media only screen and (max-width: 991px) {
    .header-utility-links { display: none; } }


/* -------------------------------------------------------------
   REGION / COLLEGE SWITCHER DROPDOWN
   ------------------------------------------------------------- */

.region {
    position: relative;
    display: inline-flex;
    align-items: center; }

.region-link {
    font-family: "CaustenRound-Bold";
    text-transform: uppercase;
    color: #aaa;
    font-size: 13px;
    line-height: 30px;
    text-decoration: none;
    transition: all 180ms ease-out; }

.region-toggle {
    background: none;
    border: 0;
    padding: 0 0.25rem;
    margin-top: -5px;
    cursor: pointer;
    color: inherit; }

.region-link .fa-caret-large-down,
.region-toggle .fa-caret-large-down { color: #999; }

.region-link:hover .fa-caret-large-down,
.region-toggle:hover .fa-caret-large-down { color: #fff; }

.region-toggle[aria-expanded="true"] .fa-caret-large-down {
    transform: rotate(180deg); }

header.active .region-link:hover .fa-caret-large-down,
header.active .region-toggle:hover .fa-caret-large-down { color: #000 !important; }

/* Dropdown panel */
.region-content {
    display: none;
    position: absolute;
    background-color: #262626;
    min-width: 220px;
    z-index: 1001;
    padding: 12px 0 12px 20px;
    left: -54px;
    top: 31px;
    border-radius: 8px;
    list-style: none;
    margin: 0; }

.region:hover .region-content { display: block; }

.region-content a {
    font-family: "CaustenRound-Bold";
    font-size: 12px;
    line-height: 16px;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    padding: 5px 0 6px 0;
    color: #ccc;
    text-decoration: none;
    display: block; }

.region-content a:hover { color: #fff; }

/* College logo icons */
.region-cc {
    background-image: url("/_images/_logos/ico-cc-002.png");
    background-repeat: no-repeat;
    background-size: 23px 20px;
    background-position: center left;
    padding-left: 32px; }

.region-sc {
    background-image: url("/_images/_logos/ico-sc-002.png");
    background-repeat: no-repeat;
    background-size: 23px 20px;
    background-position: center left;
    padding-left: 32px; }

.region-wc {
    background-image: url("/_images/_logos/ico-wc-002.png");
    background-repeat: no-repeat;
    background-size: 23px 20px;
    background-position: center left;
    padding-left: 32px; }

/* Hide desktop region in mobile nav (handled by pushy) */
@media (min-width: 992px) {
    .mm-region { display: none !important; } }


/* -------------------------------------------------------------
   MAIN MENU
   ------------------------------------------------------------- */

.main-menu {
    position: relative;
    width: 100%;
    height: 80px;
    border-top: 1px solid #fff;
    border-bottom: 2px solid #f2f2f2;
    background: linear-gradient(
        to bottom,
        rgb(195, 195, 195) 0%,
        #ffffff 35%,
        #ffffff 100%
    ); }

.header-logo {
    width: 270px;
    display: block;
    position: absolute;
    left: 50%;
    top: 16px;
    margin-left: -135px;
    z-index: 1000;
    transition: all 180ms ease-out; }

@media (max-width: 1199px) {
    .header-logo {
        left: 0;
        margin-left: calc(var(--bs-gutter-x) * .45); } }

@media (max-width: 1199px) {
    header nav { display: none; } }

header nav {
    position: absolute;
    top: 20px;
    left: calc(var(--bs-gutter-x) * .5);
    right: calc(var(--bs-gutter-x) * .5); }

#globalheader {
    margin: 0;
    padding: 0;
    display: block; }

#globalnav {
    padding: 0;
    margin: 0;
    transition: all 180ms ease-out; }

#globalnav li {
    display: inline-block;
    list-style-type: none; }

#globalnav li#gn-home a,
#globalnav li#gn-recruit a,
#globalnav li#gn-develop a,
#globalnav li#gn-funding a,
#globalnav li#gn-partnerships a,
#globalnav li#gn-news a,
#globalnav li#gn-casestudies a,
#globalnav li#gn-contact a {
    font-family: "CaustenRound-ExtraBold", serif;
    font-size: 18px;
    font-weight: normal;
    line-height: 1;
    letter-spacing: -0.025rem;
    color: #666;
    text-decoration: none;
    display: block;
    padding: 10px 0;
    transition: all 180ms ease-out; }

/* Slightly smaller nav text on mid-range desktops */
@media (min-width: 992px) and (max-width: 1400px) {
    #globalnav li#gn-home a,
    #globalnav li#gn-recruit a,
    #globalnav li#gn-develop a,
    #globalnav li#gn-funding a,
    #globalnav li#gn-partnerships a,
    #globalnav li#gn-news a,
    #globalnav li#gn-casestudies a,
    #globalnav li#gn-contact a { font-size: 16px; } }

.mm-right { float: right; }

/* Left nav items */
#globalnav li#gn-home a,
#globalnav li#gn-recruit a,
#globalnav li#gn-develop a,
#globalnav li#gn-funding a {
    margin-left: 0;
    margin-right: 12px; }

/* Right nav items */
#globalnav li#gn-partnerships a,
#globalnav li#gn-news a,
#globalnav li#gn-casestudies a,
#globalnav li#gn-contact a {
    margin-left: 12px;
    margin-right: 0; }

/* Hover states */
#globalheader li#gn-home a:hover,
#globalheader li#gn-recruit a:hover,
#globalheader li#gn-develop a:hover,
#globalheader li#gn-funding a:hover,
#globalheader li#gn-partnerships a:hover,
#globalheader li#gn-news a:hover,
#globalheader li#gn-casestudies a:hover,
#globalheader li#gn-contact a:hover {
    color: #000;
    text-decoration: none;
    transition: all 180ms ease-out; }

/* Active / current page states */
#globalheader.home header #globalnav li#gn-home a,
#globalheader.recruit header #globalnav li#gn-recruit a,
#globalheader.develop header #globalnav li#gn-develop a,
#globalheader.funding header #globalnav li#gn-funding a,
#globalheader.partnerships header #globalnav li#gn-partnerships a,
#globalheader.news header #globalnav li#gn-news a,
#globalheader.casestudies header #globalnav li#gn-casestudies a,
#globalheader.contact header #globalnav li#gn-contact a {
    color: #000;
    text-decoration: none;
    transition: all 180ms ease-out; }

/* Pressed states */
#globalnav li#gn-home a:active,
#globalnav li#gn-recruit a:active,
#globalnav li#gn-develop a:active,
#globalnav li#gn-funding a:active,
#globalnav li#gn-partnerships a:active,
#globalnav li#gn-news a:active,
#globalnav li#gn-casestudies a:active,
#globalnav li#gn-book a:active,
#globalnav li#gn-contact a:active {
    color: #999;
    text-decoration: none;
    transition: all 180ms ease-out; }


/* -------------------------------------------------------------
   RESPONSIVE NAV (hamburger)
   ------------------------------------------------------------- */

.responsive-menu {
    top: 23px;
    right: 25px;
    opacity: 1;
    height: 30px;
    width: 30px;
    position: absolute;
    transition: all 180ms ease-in; }

.responsive-menu:hover { opacity: 1; }

@media (min-width: 1200px) {
    .responsive-menu { display: none; } }

.responsive-menu-btn {
    background-image: url("/_employers/_images/_common/c-menu-resp-open.gif");
    background-repeat: no-repeat;
    background-size: contain;
    background-color: transparent;
    height: 0;
    width: 30px;
    overflow: hidden;
    padding: 30px 0 0 0;
    border: none;
    text-decoration: none;
    display: inline-block;
    cursor: pointer;
    margin: 0; }

nav.pushy .site-overlay {
    background-image: url("/_employers/_images/_common/c-menu-resp-close.gif");
    background-repeat: no-repeat;
    background-size: contain;
    background-color: transparent;
    width: 30px;
    height: 30px;
    display: block;
    cursor: pointer;
    position: absolute;
    top: 25px;
    left: 20px; }


/* -------------------------------------------------------------
   PUSHY — OFF-CANVAS MOBILE MENU
   ------------------------------------------------------------- */

.pushy {
    position: fixed;
    height: 100%;
    width: 500px;
    top: 0;
    z-index: 9999;
    background: #fff;
    overflow: auto;
    box-shadow: 0px 0px 17px 0px rgba(0,0,0,0.2);
    -webkit-overflow-scrolling: touch; }

.pushy-contacts {
    position: absolute;
    bottom: 30px;
    left: 20px; }

.pushy p {
    font-family: "CaustenRound-Bold";
    font-weight: 500;
    color: #666; }

.pushy p a { color: #333; }
.pushy p a:hover { color: #000; }

.pushy ul {
    margin: 0 0 150px 20px;
    padding: 0;
    list-style: none; }

.pushy ul li {
    margin: 0;
    padding: 5px 0; }

.pushy ul li a {
    font-family: "CaustenRound-Bold";
    font-weight: 500;
    font-size: 1.2em;
    line-height: 1.2;
    color: #222;
    display: block;
    text-decoration: none; }

.pushy ul li a:hover { color: #000; }

.pushy.pushy-left  { left: 0; }
.pushy.pushy-right { right: 0; }

.pushy-content { visibility: hidden; }

/* Menu movement */
.pushy-left {
    transform: translate3d(-500px, 0, 0); }

.pushy-open-left #container,
.pushy-open-left .push {
    transform: translate3d(500px, 0, 0); }

.pushy-right {
    transform: translate3d(500px, 0, 0); }

.pushy-open-right #container,
.pushy-open-right .push {
    transform: translate3d(-500px, 0, 0); }

.pushy-open-left .pushy,
.pushy-open-right .pushy {
    transform: translate3d(0, 0, 0); }

.pushy-open-left .pushy-content,
.pushy-open-right .pushy-content {
    visibility: visible; }

@media (max-width: 575px) {
    .pushy { width: 300px; }

    .pushy-left { transform: translate3d(-300px, 0, 0); }

    .pushy-open-left #container,
    .pushy-open-left .push { transform: translate3d(300px, 0, 0); }

    .pushy-right { transform: translate3d(300px, 0, 0); }

    .pushy-open-right #container,
    .pushy-open-right .push { transform: translate3d(-300px, 0, 0); } }

#container,
.pushy,
.push { transition: transform 0.2s cubic-bezier(0.16, 0.68, 0.43, 0.99); }

.pushy-content { transition: visibility 0.2s cubic-bezier(0.16, 0.68, 0.43, 0.99); }

/* Overlay */
.site-overlay { display: none; }

.pushy-open-left .site-overlay,
.pushy-open-right .site-overlay {
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 9998;
    background-color: rgba(0, 0, 0, 0.5);
    animation: fade 500ms; }

@keyframes fade {
    0%   { opacity: 0; }
    100% { opacity: 1; } }


/* -------------------------------------------------------------
   FOOTER
   ------------------------------------------------------------- */

.footer {
    background-color: #111;
    border-top: 4px solid #080808;
    padding: 80px 0 60px 0;
    color: #999; }

.footer p {
    font-size: 0.9rem;
    font-family: "CaustenRound-Bold"; }

.footer p strong {
    color: #ccc;
    font-family: "CaustenRound-ExtraBold"; }
    
.footer a { color: #ccc; }

.footer-site-links-title a {
    font-family: "CaustenRound-ExtraBold";
    color: #999 !important; }

.footer-site-links-title a:hover { color: #fff !important; }

.footer-site-links {
    margin: 0 0 20px 0; 
    padding: 0; }

.footer-site-links li {
    display: block; 
    line-height: 1.2;
    list-style-type: none;
    margin-bottom: 7px; }
    
.footer-site-links li a {
    font-family: "CaustenRound-SemiBold";
    color: #ccc; }
    
.footer-site-links li a:hover { color: #fff; }

.copyright-container {
    border-top: 1px solid #222;
    padding-top: 60px; }
    
.copyright-container p {
    font-size: 0.8rem;
    color: #999; }
    
.copyright-container p a {
    font-size: 0.8rem;
    color: #999; }
    
.copyright-container p a:hover {
    color: #fff; }
  
.copyright-date {
    padding-top: 14px; }
    
.footer-socials {
    margin: 0; 
    padding: 0; }

.footer-socials li {
    color: #999; 
    font-size: 1.25rem;
    display: inline-block; 
    line-height: 1.2;
    list-style-type: none;
    margin: 10px 20px 0 0; }

.footer-socials li a {
    color: #999; }

.footer-socials li a:hover {
    color: #fff; }
    
/* -------------------------------------------------------------
   LAYOUT
   ------------------------------------------------------------- */

main { margin-top: 115px; }

/* -------------------------------------------------------------
   HERO
   ------------------------------------------------------------- */

.home-hero,
.home-hero-image,
.home-hero-banner { height: 700px; width: 100%; overflow: hidden; }

.home-hero-image {
    background-size: cover;
    background-position: center center; }

.hero-subtitle {
    color: #bbb;
    font-family: "CaustenRound-Bold";
    line-height: 1.25;
    font-size: 1.75rem;
    text-shadow: 0 2px 4px rgba(0,0,0,0.6);
    margin: 0 0 10px -2px;
    display: block; }

.hero-title {
    color: #fff;
    font-family: "CaustenRound-Black";
    letter-spacing: -0.02em;
    line-height: 1;
    font-size: calc(2.5rem + 1.5vw);
    text-shadow: 0 2px 4px rgba(0,0,0,0.6);
    margin: 0 0 0 -4px;
    display: block; }

.hero-title a       { color: #fff; }
.hero-title a:hover { color: #fff; }

.home-hero-banner p { line-height: 1.3 !important; }

@media (max-width: 991px) {
    .home-hero-banner {
        background-image: linear-gradient(rgba(0,0,0,0) 40%, rgba(0,0,0,0.8) 100%);
        padding-bottom: 120px; }
    .home-course-search-box { min-height: 100px; margin: -30px 0 0 0; } }

@media (min-width: 992px) {
    .home-hero-banner {
        background-image: linear-gradient(rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 30%); }
    .home-course-search-box { min-height: 100px; margin: -68px 0 0 0; } }

.home-gradient {
    background-image: linear-gradient(rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 70%), url("/_images/_common/bg-stripes-001.svg");
    background-size: 20px; }


/* -------------------------------------------------------------
   HERO PHOTO GRID — duotone/monotone effect
   Wrapper background colour bleeds through greyscale image
   via mix-blend-mode: luminosity to create the teal tint
   ------------------------------------------------------------- */

.swiper-slide {
    position: relative;
    overflow: hidden;
    background-color: #003a3b; }

.swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(100%) brightness(0.75) contrast(1.1);
    mix-blend-mode: luminosity;
    opacity: 0.85; }


/* -------------------------------------------------------------
   CARD CAROUSEL (Slick)
   ------------------------------------------------------------- */

.slider-card-container {
    margin: 0 -0.75rem 70px -0.75rem; }

.slick-slide .slider-card {
    background-color: #fff;
    border: 1px solid #ccc;
    margin: 0 0.75rem;
    position: relative;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); }

body.bg-dark .slick-slide .slider-card a:hover { color: #fff; }

.slider-card-content {
    padding: 0 25px 15px 25px;
    margin-top: -15px;
    z-index: 10;
    position: relative;}

.slider-card-image {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 20px 20px 0 0; 
    padding: 4px;
    z-index: 5}

.slider-card-image-square      { aspect-ratio: 1 / 1; }
.slider-card-image-portrait    { aspect-ratio: 4 / 4; }
.slider-card-image-landscape   { aspect-ratio: 16 / 9; }
.slider-card-image-wide        { aspect-ratio: 21 / 9; }
.slider-card-image-photo       { aspect-ratio: 4 / 3; }

.slider-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block; }

/* Fade image into white card body */
.slider-card-image::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40%;
    background: linear-gradient(
        to bottom,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,0.85) 70%,
        rgba(255,255,255,1) 100%
    ); }

/* Equal-height Slick rows */
.slick-track { display: flex !important; align-items: stretch !important; }
.slick-slide  { height: inherit !important; }

.slider-card-container .slick-slide > div           { height: 100%; }
.slider-card-container .slick-slide > div > div     { height: 100%; padding-bottom: 10px; }
.slider-card-container .slick-slide > div .slider-card { height: 100%; }

/*  Career Picker
–––––––––––––––––––––––––––––––––––––––––––––––––– */ 

.career-picker-section {
    padding: 3.5rem 0 4rem;
    position: relative;
    overflow: hidden; }
  
.career-picker-section > .container { position: relative; z-index: 1; }

.career-picker-section .eyebrow {
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.75rem;
    color: var(--employers-color-primary);
    margin-bottom: 0.6rem; }
    
.career-picker-section h2 {
    color: var(--bs-hoy-pink);
    font-size: clamp(1.75rem, 3vw, 2.4rem);
    letter-spacing: -0.01em; }
    
.career-picker-section .lead {
    color: var(--employers-color-light);
    font-size: 1.05rem;
    max-width: 640px; }

.career-picker {
    background: #fff;
    border-radius: 16px;
    padding: 1.75rem;
    box-shadow: 0 12px 40px rgba(13,44,91,0.06);
    margin-top: 2rem; }

.career-picker .step + .step.shown { margin: 1.5rem 0 0 0; }

.career-picker .step-label {
    display: flex; align-items: center; gap: 0.6rem;
    font-size: 1rem;
    font-family: "CaustenRound-SemiBold";
    color: var(--employers-color-light);
    margin-bottom: 1rem; }
  
.career-picker .step-num {
    width: 26px; 
    height: 26px;
    background: var(--employers-color-primary);
    color: #fff;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-family: "CaustenRound-ExtraBold";
    font-size: 0.9rem; }
  
.career-picker .step-num.active { background: var(--employers-color-primary); }

.career-picker .group-select {
    width: 100%;
    padding: 0.85rem 1rem;
    border: 2px solid #ced4da;
    border-radius: 10px;
    background: #fff;
    font-size: 1rem;
    color: #000;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath fill='%230d2c5b' d='M7 10L2 5h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    cursor: pointer;
    transition: border-color 0.15s ease; }
  
.career-picker .group-select:focus {
    outline: none;
    border-color: #86b7fe;
    box-shadow: 0 0 0 4px rgba(0,169,157,0.12); }
    
.career-picker .group-select optgroup {
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.8rem; }

.career-picker .career-chips {
    display: flex; flex-wrap: wrap; gap: 0.5rem;
    min-height: 40px; }
  
.career-picker .career-chip {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.4rem 0.95rem 0.5rem 0.95rem;
    border: 0;
    background: rgba(var(--employers-color-primary-rgb), 0.25);
    border-radius: 999px;
    font-size: 0.92rem;
    font-family: "CaustenRound-Bold";
    color: #000;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap; }
  
.career-picker .career-chip:hover {
    background: var(--employers-color-dark);
    color: #fff;}
  
.career-picker .career-chip.active {
    background: var(--employers-color-primary);
    color: #fff; }
  
.career-picker .career-chip .chip-count {
    font-size: 0.75rem;
    opacity: 0.65; }
  
.career-picker .career-chip.active .chip-count { opacity: 0.85; }

.career-picker .career-chips-placeholder {
    color: var(--employers-color-light);
    font-style: italic;
    font-size: 0.95rem;
    padding: 0.5rem 0; }

.career-picker .results-header {
    display: flex; justify-content: space-between; align-items: flex-end;
    flex-wrap: wrap; gap: 0.75rem;
    padding-bottom: 0.75rem; }
  
.career-picker .results-header h3 {
    color: var(--employers-color-primary);
    margin: 0;
    font-family: "CaustenRound-SemiBold";
    font-size: 1.5rem; }
  
.career-picker .results-meta {
    font-size: 1rem;
    font-family: "CaustenRound-SemiBold";
    color: var(--employers-color-light); }
  
.career-picker .results-meta strong { 
    font-family: "CaustenRound-Bold";
    color: var(--employers-color-primary); }

.career-picker .slider-card-container {
    margin: 0 -0.65rem 80px -0.75rem;
    padding-right: 2px; }
    
.career-picker .slider-card h4 {
  color: var(--employers-color-primary);
  font-size: 1.15rem;
  margin: 0 0 0.6rem;
  line-height: 1.3;}

.career-picker .slider-card .course-meta {
  display: flex; gap: 0.4rem; flex-wrap: wrap;
  margin-bottom: 0.65rem; }


.career-picker .slider-card .course-location {
  font-size: 0.85rem;
  color: var(--employers-color-light);
  display: flex; align-items: center; gap: 0.4rem;
  margin-bottom: 0.5rem; }

.career-picker .slider-card .course-cta {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.9rem;
  color: var(--employers-color-primary);
  text-decoration: none; }

.career-picker .slider-card .course-cta:hover { text-decoration: underline; }

.career-picker .empty-state {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--employer-light);
  background: #fff;
  border: 1px solid #ccc; }

.career-picker .empty-state i {
  font-size: 3rem;
  color: var(--employer-light);
  margin-bottom: 1rem; }

.career-picker .step-reveal {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.4s ease, opacity 0.3s ease 0.1s, margin 0.4s ease;
  margin-top: 0; }

.career-picker .step-reveal.shown {
  max-height: 2000px;
  opacity: 1; }

/* Fix Slick overflow clipping the rightmost card */
.career-picker .slick-slide,
.career-picker .slick-slide > div,
.career-picker .slick-slide > div > div {
    box-sizing: border-box; }
    
/* Container has no default bottom padding - shrinks to fit cards naturally */
.career-picker .slider-card-container {
  margin-bottom: 0;
  padding-bottom: 0;
  position: relative; }

/* When arrows are present, push them below the cards
   and give the container room to contain them */
.career-picker .slider-card-container .slick-arrow {
  bottom: -25px; }
  
.career-picker .slider-card-container:has(.slick-arrow) {
  padding-bottom: 75px; }

@media (max-width: 575.98px) {
  .career-picker { padding: 1.25rem; }
  .career-picker .results-header h3 { font-size: 1.25rem; }
}