/*

The intent of this file is to provide custom styles for the project page of the master plan 2026.
If possible, the vast majority of the project level css should be set in here.
The intent is to refrain from using editor page-level css or project-level css.

*/

/* Import Aeonik Bold font */
/* @font-face {
    font-family: 'Aeonik';
    src: url('/assets/fonts/aeonik/AeonikTRIAL-Bold.otf');
    font-weight: 700;
} */

/* Import DM Sans Google font */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');


/* Apply DM Sans to body text */
.ca-body {
    font-family: "DM Sans", sans-serif;
}

.ca-body .fa { font-family: var(--fa-style-family,"Font Awesome 6 Pro") }

h1, h2, h3, h4 {
    font-family: "DM Sans", sans-serif;
    font-weight: 700;
}

.navbar-nav .nav-item {
    border-bottom: 3px solid #f5f5f5;
}

.navbar-nav .nav-item.active-item {
    border-bottom: 3px solid #29abe3;
}

.nav-item  a {
    font-weight: 400;
    padding: 0.5rem 0.75rem;
    line-height: 1rem;
}

.navbar-nav .nav-item.active-item a {
    font-weight: 400;
    color: #234093;
}

.dropdown-menu .dropdown-item.active-item {
    background-color: #f8f9fa;
    font-weight: 600;
}

.project-hero .container {
    padding: 0;
}

.project-hero .hero-shape {
    background-color: #0d2440;
    padding: 3rem;
    border-radius: 2rem 0 0 2rem;
}

.project-hero .hero-shape::after {
    content: "";
    position: absolute;
    top: 0;
    right: -90px;
    width: 200px;
    height: 100%;
    background-color: #0d2440;
    border-radius: 0 2rem 3rem 0;
    z-index: 0;
    transform: skew(20.00008deg, 0deg);
}

.project-hero .hero-shape > * {
    position: relative;
    z-index: 1;
}

.ca-component.btn {
    padding: 0.5rem 0.75rem;
    border-radius: 2rem;
}

/* buttons within highlight cards need resizing */
.highlight-cards .ca-component.btn {
    padding: 0.6rem 1.5rem;
    border-radius: 2rem;
}

.ca-headernav .header-title .ca-paragraph p {
    font-size: 1rem;
    font-weight: 700;
}

.key-point p {
    font-size: 2.5rem;
    font-weight: 600;
    line-height: 1.2;
}

.highlight-card.card-body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.highlight-cards .ca-card {
    border-radius: 2rem;
}

.highlight-cards img,
.highlight-cards .card-thumbnail {
    border-radius: 2rem 2rem 0 0;
}

.restrict-width-short {
    max-width: 650px;
}

.restrict-width-long {
    max-width: 850px;
}

.home-hero-buttons {
    z-index: 1;
    position: relative;
}

.hero-vid-section {
    padding: 0;
}

.hero-video-col img {
    border-radius: 2rem;
}

/* Home page benefits section */
.benefits-section {
    padding-top: 56px;
}
.benefits-section .ca-paragraph {
    margin: 0;
}

/* form adjustments */
.ca-formbutton.btn.special {
    background-color: var(--ca-secondary-colour) !important;
    color: #f8f9fa !important; 
}
.ca-formbutton.btn.special:hover {
    color: #cbd3da!important;
    filter: brightness(1.2) contrast(1.1);
}

/* Hero BAC media shape experiment */
.ca-columns[data-ca-columns="2"]>.ca-column.hero-video-col {
    flex: 0 0 100%;!important;
    max-width: unset;
    width: 100%;
}

.hero-video-shape {
    width: 100%;
    overflow: hidden;
    border-radius: 2rem;
    padding: 0;
    min-height: 330px;
}

.hero-video-shape .ca-media-wrapper {
    transform: rotate(5.00008deg) skew(5.00008deg, 0deg) scale(1.00382, 0.99619);
    margin-bottom: -1.5rem;
    top: -24px;
    position: relative;
    z-index: 1;
    translate: none;
    rotate: none;
    scale: none;
    opacity: 1;
    visibility: inherit;
    overflow: hidden;
    border-radius: 2rem;
}

.hero-video-shape .ca-media-wrapper img {
    transform: skew(0deg, 356deg);
    scale: 115%;
}


/* AoC catch-all, as can be removed from all pages */
.aoc-section {
    display: none;
}


@media (min-width: 576px) { }


@media (min-width: 768px) { }


@media (max-width: 991px) { 
    .hero-video {
        padding-top: 48px;
    }

    .project-hero .hero-shape::after {
        display: none;

    }

    .project-hero .hero-shape {
        border-radius: 2rem;
    }
}

@media (min-width: 992px) { 
    .hero-video {
        justify-content: right;
        position: absolute;
        top: -246px
    }

    .ca-columns[data-ca-columns="2"]>.ca-column.hero-video-col {
        width: 50%;
        max-width: 50%;
    }

 }


@media (min-width: 1200px) {
    .hero-video {
        justify-content: right;
        position: absolute;
        top: -272px;
        width: 100%;
    }

    
 }


@media (min-width: 1400px) { }