/* -----------------------------
   Brand fonts
----------------------------- */

/*@font-face {
    font-family: 'Segoe UI';
    src: url('../Fonts/Collidge-Regular.otf') format('opentype');
}

@font-face {
    font-family: 'Segoe UI';
    src: url('../Fonts/Collidge-RegularOutline.otf') format('truetype');
}

@font-face {
    font-family: 'Segoe UI';
    src: url('../Fonts/BebasNeue-regular.ttf') format('truetype');
}*/

/* -----------------------------
   Brand tokens
----------------------------- */

:root {
    --ms-blue: #0067B8;
    --ms-yellow: #FFB900;
    --ms-red: #D83B01;
    --ms-green: #80CC28;
    --ms-green-dark: #042D22;
    --ms-orange: #FE4B11;
    --page-bg: #F2F2F2;
    /* Scrollbar tokens (for future use) */
    --txp-scrollbar-track: #e5e5f0;
    --txp-scrollbar-thumb: #000E7A;
}

/* -----------------------------
   Global typography
----------------------------- */

html,
body {
    font-family: "Segoe UI", system-ui, sans-serif;
    font-weight: 400; /* Regular */
    color: black;
    background-color: #ffffff;
}

h1,
h2,
h3,
h4,
h5 {
    font-family: "Segoe UI", system-ui, sans-serif;
    font-weight: 300; /* Light by default for headings unless overridden */
    color: black;
    margin-top: 0;
}

/* HERO / PAGE TITLE */
h1 {
    /* min, fluid, max */
    font-size: clamp(3rem, 7vw, 4.5rem);
    font-weight: 700;
}

/* Section title */
h2 {
    font-size: clamp(2.4rem, 5vw, 3.2rem);
    font-weight: 600;
}

/* Sub-section title */
h3 {
    font-size: clamp(2rem, 3.6vw, 2.6rem);
    font-weight: 400;
}

/* Small heading */
h4 {
    font-size: clamp(1.6rem, 2.6vw, 2rem);
    font-weight: 400;
}

/* Label / micro heading */
h5 {
    font-size: clamp(1.3rem, 2vw, 1.6rem);
    font-weight: 300;
}

h1:focus {
    outline: none;
}

/* Regular body copy */
p {
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 1rem;
}

/* -----------------------------
   Links & buttons
----------------------------- */

a {
    text-decoration: none;
    color: inherit;
}

button {
    border: inherit;
}

/* -----------------------------
   Layout helpers
----------------------------- */

.nav-group {
    position: relative;
}

.nav-dropdown {
    display: none;
}

.nav-group:hover .nav-dropdown {
    display: block;
}

/* the bridge */
.nav-group::after {
    content: "";
    position: absolute;
    left: 0;
    top: 100%;
    height: 16px; /* match your gap (mt-4 ≈ 16px) */
    width: 100%;
}

/* default large padding (your current py-12 equivalent) */
.nav-menu {
    padding-top: 3rem;
    padding-bottom: 3rem;
    transition: padding 200ms ease;
}

/* compact when scrolled */
.header--scrolled .nav-menu {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

.nav-link {
    font-size: 0.875rem;
    color: #000;
}

    .nav-link:hover {
        color: var(--ms-blue);
    }

/* -----------------------------
   Forms & validation
----------------------------- */

.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--mtw-teal);
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
    font-size: 0.85rem;
}

/* Checkboxes with slightly darker border */
.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

/* Form labels & floating controls */
form label {
    font-size: clamp(0.5rem, 2.5vw, 0.8rem);
}

.form-floating > .form-control,
.form-floating > .form-control-plaintext,
.form-floating > .form-select {
    font-size: clamp(1rem, 3.2vw, 1.5rem);
}

.form-floating > .form-select {
    padding-top: 0.6rem;
}

/* Radzen input radius variables */
.rz-datepicker,
rz-inputtext {
    --rz-border-radius: 0.5rem;
    --rz-input-border-radius: 0.5rem;
}

/* -----------------------------
   Animation utilities
----------------------------- */

@keyframes fade-in-up {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in-up {
    animation: fade-in-up 0.8s ease-out forwards;
}

/* -----------------------------
   Text utilities
----------------------------- */

.truncate {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.line-clamp-2-style {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* -----------------------------
   Blazor error boundary
----------------------------- */

.blazor-error-boundary {
    background: var(--mtw-navy-dark);
    padding: 1rem 1rem 1rem 3.7rem;
    color: #ffffff;
    position: relative;
}

    .blazor-error-boundary::before {
        content: "!";
        position: absolute;
        left: 1.2rem;
        top: 50%;
        transform: translateY(-50%);
        width: 1.9rem;
        height: 1.9rem;
        border-radius: 50%;
        border: 2px solid #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: 'BebasNeue', Helvetica, Arial, sans-serif;
        letter-spacing: 0.15em;
        font-size: 1.1rem;
    }

    .blazor-error-boundary::after {
        content: "An error has occurred.";
        font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
        text-transform: none;
        letter-spacing: 0;
    }

/* -----------------------------
   Brand imagery helpers
----------------------------- */

.brandimage {
    height: 40px;
}

.powerbyimage {
    height: 60px;
}

/* -----------------------------
   Radzen dialog tweaks
----------------------------- */

.rz-dialog .rz-dialog-content {
    padding-top: 0.75rem;
    padding-bottom: 1rem;
}

.rz-dialog .rz-dialog-titlebar {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--mtw-grey-mid);
    background-color: #ffffff;
    color: var(--mtw-navy);
    font-family: 'BebasNeue', Helvetica, Arial, sans-serif;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

/* -----------------------------
   Blazor reconnect modal
----------------------------- */

#components-reconnect-modal {
    display: none !important;
}

/* Base slider */
input.distance-slider[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    background: transparent;
    height: 32px; /* click area */
    position: relative;
    padding: 0;
    border: none;
}

    /* TRACK (Chrome/Edge/Safari) */
    input.distance-slider[type="range"]::-webkit-slider-runnable-track {
        height: 15px;
        border-radius: 9999px;
        background: var(--ms-yellow);
        position: relative;
    }

    /* VERTICAL TICKS � grow DOWN from bottom of bar, skip first position */
    input.distance-slider[type="range"]::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        /* bottom of track = 50% + 7.5px (half of 15px)
       start ticks just below that so they grow DOWN */
        top: calc(50% + 7.5px);
        height: 6px; /* tick height going downward */

        pointer-events: none;
        /* 12 positions (5..60 step 5) so 11 intervals */
        background-image: repeating-linear-gradient( to right, black 0 1px, transparent 1px calc(100% / 11) );
        /* shift one full interval so we don't draw a tick at the far left
       (first visible tick roughly 10 miles) */
        background-position-x: calc(100% / 11);
        background-repeat: repeat-x;
    }

    /* THUMB (Chrome/Edge/Safari) */
    input.distance-slider[type="range"]::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 22px;
        height: 22px;
        border-radius: 9999px;
        background: var(--ms-blue); /* solid blue */
        border: none;
        box-shadow: 0 0 0 3px var(--page-bg); /* subtle halo vs yellow */
        cursor: grab;
        /* center thumb vertically on 15px track */
        margin-top: calc((15px / 2) - 11px);
    }

    /* FIREFOX equivalents */
    input.distance-slider[type="range"]::-moz-range-track {
        height: 15px;
        border-radius: 9999px;
        background: var(--ms-yellow);
    }

    input.distance-slider[type="range"]::-moz-range-progress {
        background: transparent;
    }

    input.distance-slider[type="range"]::-moz-range-thumb {
        width: 22px;
        height: 22px;
        border-radius: 9999px;
        background: var(--ms-blue);
        border: none;
        box-shadow: 0 0 0 3px var(--page-bg);
        cursor: grab;
    }

/* ---------- SWConnector opportunity cards ---------- */
/* Scope everything to this site only via .swc-opps */

.swc-opps  {
    background: var(--page-bg, #f4f4f4);
}

    /* Grid layout for cards: 1 / 2 / 3 columns */
    .swc-opps .grid {
        display: grid;
        grid-template-columns: 1fr; /* mobile: 1 column */
        row-gap: 2.5rem;
        column-gap: 2rem;
    }

@media (min-width: 768px) { /* md: 2 columns */
    .swc-opps .grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) { /* lg: 3 columns */
    .swc-opps .grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Base card styling */
.swc-opps article, .opp-carousel article {
    position: relative;
    border: none;
    border-radius: 1.75rem;
    padding: 2.5rem 2.25rem 4.25rem; /* extra space for bottom bar */
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.08);
    background: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

    /* Only cards with class 'closing-soon' get the pill */
    .swc-opps article.closing-soon::before, .opp-carousel article.closing-soon::before {
        content: "Closing Soon";
        position: absolute;
        top: -1.2rem;
        right: 2rem;
        transform: translateY(-50%);
        padding: 0.5rem 1.5rem;
        border-radius: 1.25rem 1.25rem 0 0;
        background: #00C896;
        color: #ffffff;
        font-weight: 700;
        font-size: 0.9rem;
    }

    /* Reorder inner layout:
       - logo block (was right column) at the top
       - text block underneath
    */
    .swc-opps article > div:last-child, 
    .opp-carousel article > div:last-child {
        order: 1; /* logo + button wrapper */
        width: 100% !important;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1.25rem;
    }

    .swc-opps article > div:first-child, 
    .opp-carousel article > div:first-child{
        order: 2; /* text + meta */
        width: 100%;
        text-align: center;
    }

    /* Logo area */
    .swc-opps article > div:last-child > div:first-child, 
    .opp-carousel article > div:last-child > div:first-child{
        background: transparent;
        height: auto;
        min-height: 80px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 9999px;
    }

    /* Main title */
    .swc-opps article header h3,
    .opp-carousel article header h3 {
        margin-top: 1.5rem;
        font-size: 1.4rem;
        font-weight: 700;
        color: #003b3f;
    }

    /* Employer line */
    .swc-opps article header p,
    .opp-carousel article header p{
        margin-top: 0.75rem;
        font-size: 1rem;
        font-weight: 600;
        color: #003b3f;
    }

    /* Description block � let Tailwind keep it as a grid, just nudge spacing */
    .swc-opps article dl,.opp-carousel article dl {
        margin-top: 1.25rem;
    }

        /* Hide the small labels (Sector:, Employment type:, etc.) */
        .swc-opps article dl dt,.opp-carousel article dl dt {
            display: none;
        }

        /* Default tag pills (sector, type, location etc.) */
        .swc-opps article dl dd,
        .opp-carousel article dl dd{
            display: inline-block;
            padding: 0.35rem 0.9rem;
            border-radius: 9999px;
            background: #e7f5f2;
            font-size: 0.75rem;
            color: #003b3f;
        }

    /* Bottom "Apply now" bar � repurpose the existing button */
    .swc-opps article > div:last-child button,
    .opp-carousel article > div:last-child button{
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        border-radius: 0 0 1.75rem 1.75rem;
        background: #1a1a1a !important;
        color: #ffffff !important;
        padding: 1rem 1.5rem;
        text-transform: none;
        font-size: 1.1rem;
        font-weight: 700;
        justify-content: center;
        box-shadow: none;
        border: none;
    }

    /* On hover, subtle lift */
    .swc-opps article:hover,
    .opp-carousel article > div:last-child button{
        transform: translateY(-2px);
        box-shadow: 0 24px 50px rgba(0, 0, 0, 0.12);
        transition: box-shadow 0.2s ease, transform 0.2s ease;
    }

/* ---------- Posted / Closing pills inside the same DL ---------- */

/* Base pill styling (used for posted/closing) */
.swc-opps .opp-pill,
.opp-carousel .opp-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.9rem; /* match green pills */
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    margin-bottom: 0.25rem;
}

/* Red variant matching the design */
.swc-opps .opp-pill--red,
.opp-carousel .opp-pill--red {
    background: #FFE0DC; /* pale red background */
    color: #B5463B; /* darker red text */
}

/* Ensure DD with opp-pill doesn�t pick up extra stuff from the generic dd rule */
.swc-opps article dl dd.opp-pill,
.opp-carousel article dl dd.opp-pill{
    margin: 0; /* kill default dd margin */
}

/* ----- SWConnector opportunity detail: accordion card + buttons ----- */

.swc-opp-detail .opp-accordion-card {
    background: var(--page-bg, #f4f4f4);
    border-radius: 1.5rem;
}

/* space between accordion items */
.swc-opp-detail .opp-accordion__item + .opp-accordion__item {
    margin-top: 0.5rem;
}

/* header rows � white, rounded, subtle shadow */
.swc-opp-detail .opp-accordion__toggle {
    background: #ffffff;
    color: #1f2933; /* dark grey */
    border-radius: 9999px;
    border: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
    text-align: left;
}

/* icon colour */
.swc-opp-detail .opp-accordion__icon {
    font-size: 1.3rem;
    color: #373746;
}

/* drop-down panel � white, sits directly under header */
.swc-opp-detail .opp-accordion__panel {
    background: #ffffff;
    border-radius: 0 0 1rem 1rem;
    border: none;
    margin-top: 0.25rem;
}

/* secondary "Apply now" pill button under accordions */
.swc-opp-detail .swc-apply-pill {
    background: var(--ms-yellow, #FFC300);
    color: #000000;
    padding: 0.8rem 1.9rem;
    border-radius: 9999px;
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    border: none;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}

    .swc-opp-detail .swc-apply-pill:hover {
        filter: brightness(0.97);
    }

    .swc-opp-detail .swc-apply-pill img {
        width: 1rem;
        height: 1rem;
        object-fit: contain;
    }

/* =========================================
   Microsoft Learn cards
   ========================================= */

.learning-holder .learn-card-wrapper {
    padding: 0 0.75rem;
}

/* Main card */
.learning-holder .ms-learn-card {
    position: relative;
    width: 100%;
    background: #ffffff;
    border-radius: 1.75rem;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.08);
    padding: 2.5rem 2.25rem 4.25rem; /* extra bottom space for CTA bar */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Title + summary */
.learning-holder .ms-learn-card__title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #003b3f;
    line-height: 1.25;
    margin: 0 0 1.25rem;
}

.learning-holder .ms-learn-card__summary {
    max-width: 32rem;
    margin: 0 auto;
    font-size: 0.95rem;
    line-height: 1.6;
    color: #003b3f;
}

/* Meta layout */
.learning-holder .ms-learn-card__meta {
    width: 100%;
    margin-top: 0.5rem;
}

.learning-holder .ms-learn-card__row {
    margin-bottom: 1.25rem;
    text-align: left;
}

.learning-holder .ms-learn-card__label {
    display: block;
    font-weight: 700;
    color: #003b3f;
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
}

.learning-holder .ms-learn-card__pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Base pill */
.learning-holder .ms-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.01rem 0.8rem;
  border-radius: 9999px;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
  max-height: 1.5rem;
}

/* Colour variants to match design */
.learning-holder .ms-pill--level {
    background: #FBD1C5; /* soft peach */
    color: #743327;
}

.learning-holder .ms-pill--product {
    background: #CAE0F5; /* pale blue */
    color: #11436B;
}

.learning-holder .ms-pill--role {
    background: #FBE3A0; /* pale yellow */
    color: #7A4E07;
}

/* CTA bar at bottom */
.learning-holder .ms-learn-card__cta {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3.3rem;
    border-radius: 0 0 1.75rem 1.75rem;
    background: #1A1A1A;
    color: #ffffff;
    font-weight: 700;
    font-size: 1.15rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    text-transform: none;
}

    .learning-holder .ms-learn-card__cta:hover {
        background: #000000;
    }

/* --- Opportunity carousel card (matches yellow tile design) --- */
.opp-carousel-card {
    height: 100%;
}

.opp-carousel-card__link {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border: 4px solid var(--ms-yellow, #FFC000);
    border-radius: 24px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 18px 40px rgba(0,0,0,0.08);
}

.opp-carousel-card__title {
    margin: 0;
    padding: 18px 18px 10px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #0b0b0b;
    font-size: 1.05rem;
    line-height: 1.15;
}

.opp-carousel-card__list {
    list-style: none;
    margin: 0;
    padding: 0 18px 18px;
    display: grid;
    gap: 10px;
}

.opp-carousel-card__item {
    display: grid;
    grid-template-columns: 20px 1fr;
    align-items: center;
    column-gap: 12px;
}

.opp-carousel-card__icon {
    width: 20px;
    height: 20px;
    background: none;
    border: none;
    border-radius: 0;
    display: block;
}

    .opp-carousel-card__icon img {
        width: 18px;
        height: 18px;
        object-fit: contain;
        display: block;
        opacity: 0.9;
    }

.opp-carousel-card__text {
    font-size: 0.95rem;
    color: #222;
    line-height: 1.3;
    text-align: left;
}

.opp-carousel-card__cta {
    margin-top: auto;
    background: var(--ms-yellow, #FFC000);
    height: 34px;
    display: grid;
    place-items: center;
}

.opp-carousel-card__cta-arrow {
    width: 26px;
    height: 26px;
    object-fit: contain;
}

/* optional: hover */
.opp-carousel-card__link:hover {
    transform: translateY(-2px);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    box-shadow: 0 24px 50px rgba(0,0,0,0.12);
}

/*============================================ Adviser Resources ============================================*/
.adviser-resource-downloads {
    background-color: #ddd;
    border-radius: 5px;
}

.timing-header {
    background-color: #ddd;
}

.timing-row {
    border-bottom: 1px solid #bbb;
}


.btn-black {
    background-color: #000 !important;
    color: #fff !important;
}

    .btn-black:hover {
        color: #fff !important;
    }

.btn-white {
    background-color: #fff !important;
    border: 1px solid #000;
    color: #000 !important;
}
.curriculumbuttons .btn-secondary {
  font-size: clamp(1.2em, 3vw, 1.4em);
  background-color: var(--primary-color) !important;
}