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

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

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

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

@font-face {
    font-family: 'LeagueGothic';
    src: url('../Fonts/LeagueGothic-Regular.ttf') format('truetype');
}


@font-face {
    font-family: 'LeagueSpartan';
    src: url('../Fonts/LeagueSpartan-Regular.ttf') format('truetype');
}

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

:root {
    --mtw-navy: #000E7A;
    --mtw-navy-dark: #00095a;
    --mtw-teal: #26e0ff;
    --mtw-sky: #0088c7;
    --mtw-pink: #ff2d87;
    --mtw-grey-light: #f7f7f9;
    --mtw-grey-mid: #d1d1dc;
    --mtw-text-body: #001b5e;
    /* Scrollbar tokens (for future use) */
    --txp-scrollbar-track: #e5e5f0;
    --txp-scrollbar-thumb: #000E7A;
}

/* -----------------------------
   Global typography
----------------------------- */
* {
    letter-spacing: unset!important;
}

html,
body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    color: var(--mtw-text-body);
    background-color: #ffffff;
     letter-spacing: unset!important;
}

h1,
h2,
h3,
h4,
h5 {
    font-family: LeagueGothic, Helvetica, Arial, sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--mtw-navy);
    margin-top: 0;
    font-weight: unset !important;
}

h1 {
    font-size: clamp(2.5rem, 3.4vw, 3.8rem);
}

h2 {
    font-size: clamp(2rem, 2.6vw, 3rem);
}

h3 {
    font-size: clamp(1.6rem, 2vw, 2.4rem);
}

h4 {
    font-size: 1.3rem;
}

h5 {
    font-size: 1.1rem;
}

h1:focus {
    outline: none;
}

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

/* Scoped list styling used in rich content blocks */
.details ul {
    padding-left: 1.5rem !important;
    list-style-type: disc !important;
    margin-block: 1rem;
}

.details ol {
    padding-left: 1.5rem !important;
    list-style-type: decimal !important;
    margin-block: 1rem;
}

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

a,
button {
    font-family: 'LeagueGothic', Helvetica, Arial, sans-serif;
    letter-spacing: 0.75px;
    font-weight: unset;
}

a,
.btn-link {
    color: var(--mtw-navy);
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 500;
    font-size: 0.85rem;
}

    a:hover,
    a:focus,
    .btn-link:hover,
    .btn-link:focus {
        color: var(--mtw-pink);
        text-decoration: none;
    }

/* Primary button – hot pink CTA */
.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.85rem 3rem;
    border-radius: 0;
    text-transform: uppercase;
    font-family: 'LeagueGothic', Helvetica, Arial, sans-serif;
    font-weight: 500;
    letter-spacing: 0.25em;
    font-size: 0.9rem;
    color: #ffffff;
    background-color: var(--mtw-pink);
    border: 2px solid var(--mtw-pink);
}

    /* HOVER: cyan block with white text – as per design */
    .btn-primary:hover,
    .btn-primary:focus {
        color: #ffffff;
        background-color: var(--mtw-teal);
        border-color: var(--mtw-teal);
    }

/* Secondary button – white default (e.g. “Apply today”) */
.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.85rem 3rem;
    border-radius: 0;
    text-transform: uppercase;
    font-family: 'LeagueGothic', Helvetica, Arial, sans-serif;
    font-weight: 500;
    letter-spacing: 0.25em;
    font-size: 0.9rem;
    background-color: #ffffff;
    color: var(--mtw-navy);
    border: 2px solid #ffffff;
}

    /* Same hover treatment: cyan with white text */
    .btn-secondary:hover,
    .btn-secondary:focus {
        background-color: var(--mtw-teal);
        border-color: var(--mtw-teal);
        color: #ffffff;
    }

/* Generic focus ring */
.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
    box-shadow: 0 0 0 0.12rem #ffffff, 0 0 0 0.28rem var(--mtw-teal);
    outline: none;
}

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

/* Content padding (header is now static, so keep this light) */
.content {
    padding-top: 2rem;
}

.opp-hero__title--loading {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.5rem; /* keeps the hero height stable */
}

.opp-title-spinner {
    width: 32px;
    height: 32px;
    display: block;
}

.opp-title-spinner__fallback {
    font-size: 0.9rem;
    color: #ffffff;
}


/* -----------------------------
   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: 'LeagueGothic', 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: 'LeagueGothic', Helvetica, Arial, sans-serif;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

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

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

/* -----------------------------
   All other custom CSS for site pages and modules
----------------------------- */
/* =========================================================
   Exeter hero search (home page)
   ========================================================= */

/* If you already declared LeagueGothic elsewhere, keep that and
   just ensure the font-family below matches. */
@font-face {
    font-family: 'LeagueGothic';
    src: url('../Fonts/LeagueGothic-Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

.hero-search {
    position: relative;
    height: 550px; /* fixed height as requested */
    width: 100%;
    overflow: hidden;
}

.hero-search__image {
    position: absolute;
    inset: 0;
    z-index: 1;
}

    .hero-search__image::after {
        content: '';
        position: absolute;
        inset: 0;
        background: rgba(1, 34, 61, 0.55);
        z-index: 1;
    }

    .hero-search__image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center center;
    }


.hero-search__content {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding-inline: 1.5rem;
    text-align: center;
}

/* Cyan hero triangle overlay */
.hero-search__triangle {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    /* a bit wider than needed so the diagonal always covers enough width */
    width: 70%;
    background-color: rgba(92, 225, 230, 0.8); /* #5CE1E6 at 80% opacity */
    /* Right-angle at bottom-left, diagonal from top-left to ~60% along bottom */
    clip-path: polygon(0 0, 0 100%, 30% 100%);
    pointer-events: none;
    z-index: 2;
}


/* Title: bigger LeagueGothic in white */
.hero-search__title {
    font-family: 'LeagueGothic', 'BebasNeue', Helvetica, Arial, sans-serif;
    color: #ffffff;
    text-transform: uppercase;
    font-size: 5.3rem; /* bigger than before */
    line-height: 1;
}

@media (max-width: 1024px) {
    .hero-search__title {
        font-size: 4rem;
    }
}

@media (max-width: 640px) {
    .hero-search__title {
        font-size: 3rem;
    }
}
/* ===========================
   Hero filter bar (matches design)
   =========================== */

.hero-filter-wrapper {
    position: relative;
    margin-top: -70px; /* overlap hero image */
    z-index: 5;
}

.hero-filter {
    background-color: #000E7A;
    color: #ffffff;
    padding: 1.75rem 1.8rem 2.1rem;
}

/* Top row: "Filter" + reset link */
.hero-filter__top-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.2rem;
}

.hero-filter__label {
    font-family: 'LeagueGothic', Helvetica, Arial, sans-serif;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.hero-filter__reset {
    font-family: 'LeagueGothic', Helvetica, Arial, sans-serif;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    background: transparent;
    border: 0;
    color: #ffffff;
    padding: 0;
    cursor: pointer;
}

    .hero-filter__reset:hover {
        text-decoration: underline;
    }

/* Pill grid */
.hero-filter__grid {
    display: grid;
    grid-template-columns: 1.2fr 1.2fr 1.2fr 1.7fr auto;
    gap: 0.75rem;
    align-items: stretch;
}

@media (max-width: 1024px) {
    .hero-filter__grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 640px) {
    .hero-filter__grid {
        grid-template-columns: 1fr;
    }
}

/* Base pill (employer / sector / location) */
.hero-filter__pill {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.05rem 1.7rem;
    background-color: #ffffff;
    color: #000E7A;
    border: none;
    cursor: pointer;
    font-family: 'LeagueGothic', Helvetica, Arial, sans-serif;
    font-size: 1.05rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

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

.hero-filter__pill-icon {
    margin-left: 1.4rem;
    flex-shrink: 0;
    font-size: 1.6rem;
    line-height: 1;
    color: #26E0FF; /* cyan chevron */
}

/* Invisible overlay controls */
.hero-filter__select {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

/* Postcode pill – force input to blend into pill */
.hero-postcode-pill input,
.hero-postcode-pill input[type="text"] {
    background: transparent !important;
    background-color: transparent !important;
    color: #000E7A !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

.hero-postcode-pill input:-webkit-autofill,
.hero-postcode-pill input:-webkit-autofill:hover,
.hero-postcode-pill input:-webkit-autofill:focus {
    -webkit-text-fill-color: #000E7A !important;
    -webkit-box-shadow: 0 0 0px 1000px #ffffff inset !important;
    background-color: transparent !important;
}

/* Keyword pill */
.hero-filter__pill--input {
    padding: 0; /* let the input control spacing */
}

.hero-filter__input {
    width: 100%;
    height: 100%;
    padding: 1.05rem 1.7rem;
    border: 1px solid #d6d6e0;
    outline: none;
    background-color: #ffffff;
    font-family: 'LeagueGothic', Helvetica, Arial, sans-serif;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #000E7A;
}

    .hero-filter__input::placeholder {
        color: #9b9bb5;
    }

/* Search button (pink square with icon) */
.hero-filter__search-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-inline: 1.8rem;
    background-color: #FF2D87;
    border: none;
    cursor: pointer;
    color: #ffffff;
}

.hero-filter__search-icon {
    font-size: 1.8rem;
    line-height: 1;
}

/* Better vertical sizing on smaller screens */
@media (max-width: 1024px) {
    .hero-filter__search-btn {
        padding-block: 0.9rem;
    }
}

/* =========================================================
   OPPORTUNITY DETAILS – HERO + JOB SUMMARY
   ====================================================== */


.opp-subheading,
.opp-accordion__label {
    font-family: 'LeagueSpartan', Helvetica, Arial, sans-serif;
    font-weight: 700;
}

/* optional: keep them feeling tight & crisp */
.opp-subheading {
    letter-spacing: 0.01em;
}

.opp-wrapper {
    background: #ffffff;
}

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

.opp-hero {
    display: flex;
    position: relative;
    background: #000E7A;
    color: #ffffff;
    /* Height tuned to feel like the Figma hero band */
    padding: 3.25rem 0 3.5rem;
    min-height: 450px;
    overflow: hidden;
    /* Sits underneath the summary card in the stack */
    z-index: 0;
}

/* content sits centered above the shapes */
.opp-hero__inner {
    position: relative;
    z-index: 2;
    text-align: center;
    /* vertically centre breadcrumb + label + title */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* breadcrumb */
.opp-hero__breadcrumb {
    margin: 0 0 0.6rem;
    font-size: 0.8rem;
}

    .opp-hero__breadcrumb a {
        color: #ffffff;
        text-decoration: none;
    }

        .opp-hero__breadcrumb a:hover,
        .opp-hero__breadcrumb a:focus {
            text-decoration: underline;
        }

.opp-hero__breadcrumb-sep {
    margin: 0 0.25rem;
}

.opp-hero__breadcrumb-current {
    color: #FF2D87;
}

/* “VACANCY TITLE” label */
.opp-hero__label {
    font-family: 'LeagueGothic','BebasNeue',Helvetica,Arial,sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 1rem;
    color: #26E0FF;
    margin-bottom: 0.5rem;
}

/* main job title */
.opp-hero__title {
    font-family: 'LeagueGothic','BebasNeue',Helvetica,Arial,sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: clamp(2.8rem, 4.4vw, 4rem);
    line-height: 1.05;
    margin: 0;
    color: #ffffff;
}

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

.opp-hero__triangle-left,
.opp-hero__triangle-right {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 35%; /* tweak if you want them a bit wider/narrower */
    pointer-events: none;
    /* under the summary card, but above the hero background */
    z-index: 1;
}

/* Left pink triangle – your version */
.opp-hero__triangle-left {
    left: 0;
    background: #FF2D87;
    /* vertical edge on the left, slant running down towards 20% of the width */
    clip-path: polygon(0 40%, 0 100%, 40% 100%);
}

/* Right cyan triangle – mirror of the left */
.opp-hero__triangle-right {
    right: 0;
    background: #5CE1E6;
    /* vertical edge on the right, slant running up towards 60% of the width */
    clip-path: polygon(60% 0, 100% 0, 100% 60%);
}

.register-hero > .opp-hero__triangle-left,
.register-hero > .opp-hero__triangle-right {
    z-index: 0;
}

.register-hero > .relative.z-10 {
    z-index: 10;
}


/* ---------------- JOB SUMMARY PANEL ---------------- */

.opp-summary {
    background: #ffffff;
}

/* This is the cyan “card” that overlaps the hero */
.opp-summary__inner {
    position: relative;
    z-index: 2; /* sits above hero + triangles */

    background: #008FCC;
    margin: -3.25rem auto 0; /* controls how far it overlaps into the hero */
    padding: 2.6rem 2.2rem 3rem;
    color: #ffffff;
}

/* “JOB SUMMARY” heading */
.opp-summary__heading {
    font-family: 'LeagueGothic','BebasNeue',Helvetica,Arial,sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 2.4rem;
    margin: 0 0 2rem;
    color: white;
}

/* 3 columns on desktop */
.opp-summary__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem 4rem;
}

.opp-summary__col {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}


.opp-summary__item {
    position: relative;
    display: flex;
    align-items: center;
}

    /* Material chevron bullet */
    .opp-summary__ite {
        content: "chevron_right"; /* Material ligature */
        font-family: "Material Symbols Outlined"; /* use the icon font */
        font-size: 30px; /* icon size */
        font-variation-settings: "FILL" 0, "wght" 600, "GRAD" 0, "opsz" 24;
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%); /* vertically centre */
        color: #5CE1E6; /* your cyan */
        line-height: 1;
    }

    /* label */
    .opp-summary__item dt {
        font-family: 'LeagueGothic','BebasNeue',Helvetica,Arial,sans-serif;
        text-transform: uppercase;
        letter-spacing: 0.18em;
        font-size: 24px;
        margin-bottom: 0.15rem;
        font-weight: unset;

    }

    /* value */
    .opp-summary__item dd {
    margin: 0;
    font-size: 1.2rem;
    margin-left: 0.5rem;
    }

/* ---------------- RESPONSIVE ---------------- */

@media (max-width: 1024px) {
    .opp-hero {
        padding: 2.5rem 0 3rem;
        min-height: 240px;
    }

    .opp-summary__inner {
        margin-top: -2.5rem; /* slightly less overlap on tablets */
    }
}

@media (max-width: 640px) {
    .opp-hero {
        padding: 2.25rem 0 2.5rem;
        min-height: 210px;
    }

    .opp-hero__triangle-left,
    .opp-hero__triangle-right {
        width: 80%;
    }

    .opp-summary__inner {
        margin-top: 0; /* on mobile let it sit under the hero */
        padding-inline: 1.5rem;
    }

    .opp-summary__grid {
        grid-template-columns: 1fr;
    }
}



/* =========================================================
   END - OPPORTUNITY DETAILS – HERO + JOB SUMMARY - END
   ====================================================== */