/* purgecss start ignore */
/*! Notes...

    Author: Jay George
    Author URI: https://jaygeorge.co.uk

    ABOUT THIS CSS
    ===================================================
    - Only edit filename.css, then process with Codekit to output into prod/

*/




/* GROUP GENERAL / ACCESSIBILITY / FOCUS
=================================================== */
.flickity-button:focus {
    box-shadow: 0 0 0 5px var(--colour-red);
}




/* GROUP COMPONENTS / CAROUSEL
=================================================== */
/* HTML Example...

    e.g. section.c-carousel-wrapper <-- used to control background colour and spacing
        .c-carousel
            .c-carousel-cell
                .c-carousel-cell__image
                .c-carousel-cell__title e.g. 'Berlinda Campbell'
                .c-carousel-cell__sub e.g. 'Joint Managing Director'

*/

/* Modifiers...

    .c-carousel-wrapper--plain <-- e.g. /team
    .c-carousel-wrapper--with-carousel-nav <-- compressed in consideration of .o-carousel-nav being at the top of the slide
        .c-carousel-cell--grayscale <-- black and white e.g. /team

*/
/* GROUP COMPONENTS / CAROUSEL / LAYOUT
=================================================== */
.c-carousel-cell {
    width: 90%;
    /* Make sure people with a long name like Belinda shows on mobile */
    min-height: 30rem;
    margin-right: 10px;
    /* background: var(--colour-black-off); */
}

.c-carousel-cell img {
    width: 100%;
}

.flickity-page-dots {
    bottom: -5em;
}

.c-carousel-cell--background {
    background-size: 100%;
    background-repeat: no-repeat;
    height: 100%;
}

.c-carousel-cell__title {
    /* Needed for link hover effect */
    display: inline-block;
}

.c-carousel-cell:not(.is-selected) .c-carousel-cell__image:not(.flickity-lazyloaded) ~ * {
    /* Hide the title until the image is loaded else it is absolutely positioned */
    display: none;
}

/* Custom */
@media (min-width: 1250px) {
    .c-carousel-cell {
        width: 55%;
    }
}
/* GROUP COMPONENTS / CAROUSEL / SPACING
=================================================== */
.c-carousel-wrapper {
    padding-block-start: var(--spacing-vh-m);
    padding-block-end: var(--spacing-vh-m);
}

.c-carousel-cell__title {
    padding-block-start: var(--spacing-l);
    padding-block-end: 0;
    margin-block-end: var(--spacing-s);
}

.c-carousel-cell__sub {
    padding-block-start: 0;
}

/* Custom */
@media (min-width: 1280px) {
    .c-carousel-cell {
        margin-inline-end: var(--spacing-l);
    }
}

.c-carousel-wrapper--with-carousel-nav {
    padding-block-start: 0;
    padding-block-end: var(--spacing-l-4);
}

/* --mq-text-bump-2-after */
@media (min-width: 1800px) {
    .c-carousel-wrapper--with-carousel-nav {
        /* Decrease */
        padding-block-end: var(--spacing-l-3);
    }
}
/* GROUP COMPONENTS / CAROUSEL / DECORATION / (CROSS POLLINATED)
=================================================== */
.c-carousel-wrapper {
    background: white;
}

.c-carousel-cell {
    text-align: center;
}

.c-carousel-cell__image {
    display: block;
    max-height: 100%;
    margin: 0 auto;
    max-width: 100%;
    opacity: 0;
    -webkit-transition: opacity 0.4s;
            transition: opacity 0.4s;
}

/* fade in lazy loaded image */
.c-carousel-cell__image.flickity-lazyloaded,
.c-carousel-cell__image.flickity-lazyerror {
    opacity: 1;
}

.flickity-page-dots .dot {
    background: white;
}

/* Removed later in the design */
/* .c-carousel-cell.is-selected::before {
    --border-inset: 2em;
    content: "";
    position: absolute;
    top: calc(var(--border-inset) / 2);
    left: calc(var(--border-inset) / 2);
    width: calc(100% - var(--border-inset) - 2px);
    height: calc(100% - var(--border-inset) - 2px);
    border: 1px solid white;
}

.c-carousel-wrapper--plain .c-carousel-cell.is-selected::before {
    content: initial;
} */

/* .c-carousel-cell__title {
    color: white;
} */

.c-carousel-cell__sub {
    color: var(--colour-red);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-s);
    font-size: var(--font-size-s);
}

.c-carousel-cell a {
    text-decoration: none;
}

.c-carousel-cell--grayscale img {
    filter: grayscale(100%);
}
/* GROUP COMPONENTS / CAROUSEL / DECORATION / BUTTONS
=================================================== */
.flickity-button,
.flickity-button:hover {
    background: none;
}

.flickity-button-icon {
    color: white;
}

.c-carousel .flickity-button-icon {
    /* color: var(--colour-navy); */
    color: var(--colour-red);
}




/* GROUP COMPONENTS / CAROUSEL BANNER
=================================================== */
/* HTML Example...

    .c-carousel-banner.js__flickityCarouselMain
        .c-carousel-banner-cell
            .c-carousel-banner-cell__image

    .c-carousel-banner.c-carousel-banner-nav
        .c-carousel-banner-cell
            Hooten And The Lady
        .c-carousel-banner-cell
            .c-carousel-banner__title <-- used in the updated carousel design
                Dickensian

*/
/* GROUP COMPONENTS / CAROUSEL BANNER / LAYOUT
=================================================== */
.c-carousel-banner-container {
    position: relative;
}

.c-carousel-banner-cell {
    width: 100%;
    /* height: 200px; */
    counter-increment: carousel-cell;
}

.c-carousel-banner-nav .c-carousel-banner-cell {
    /* height: 80px; */
    width: initial;
    padding: 2em;
}

/* Custom */
@media (min-width: 500px) {
    .c-carousel-banner-nav .c-carousel-banner-cell {
        padding: 2em var(--spacing-l-1);
    }
}

.c-carousel-banner-nav {
    position: absolute;
    width: 100%;
    bottom: 0;
    z-index: 1;
}

.c-carousel-banner__title {
    position: absolute;
    bottom: var(--spacing-m);
    left: 50%;
    transform: translateX(-50%);
}
/* GROUP COMPONENTS / CAROUSEL BANNER / SPACING
=================================================== */
/* .c-carousel-banner {
    margin-bottom: 40px;
} */

/* .c-carousel-banner-cell {
    margin-right: 10px;
} */
/* GROUP COMPONENTS / CAROUSEL BANNER / DECORATION
=================================================== */
.c-carousel-banner-container {
    background: var(--colour-navy);
}
/* .c-carousel-banner-nav {
    background: linear-gradient(to top, var(--colour-navy),transparent 100%);
} */
.c-carousel-banner:not(.c-carousel-banner-nav) {
    background: var(--colour-black-off);
}

.c-carousel-banner-nav .c-carousel-banner-cell {
    color: white;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-m);
    opacity: 0.5;
    font-weight: var(--font-family-main-weight-strong);
    text-shadow: var(--text-shadow);
}

.c-carousel-banner__title {
    font-size: var(--font-size-m);
    line-height: var(--font-size-m-line-height);
    font-weight: var(--font-family-main-weight-strong);
    text-align: center;
    color: white;
    text-shadow: var(--text-shadow-light);
}

.c-carousel-banner img {
    /* Otherwise images are washed out */
    filter: contrast(107%) saturate(1.01) brightness(1.03);
}

/* .c-hero-image--hue-cover-radial .o-snap-scroll__item {
    opacity: 0.6;
} */

/* Override the built in fade plugin with a slower transition */
@keyframes fade {
    from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
.c-carousel-banner-cell.is-selected {
    animation-timing-function: cubic-bezier(.55, 0, .1, 1);
    animation-name: fade;
    animation-duration: 2s;
    animation-fill-mode: both;
}

.c-carousel-banner-nav .c-carousel-banner-cell.is-nav-selected {
    opacity: 1;
}
/* Used to get rid of tranisitons on the slider nav that make the production names floaty and 'chug' when moving through the slides */
.js--removeAOS .c-carousel-banner-nav .c-carousel-banner-cell[data-aos^=custom-zoom][data-aos^=custom-zoom].aos-animate {
    transition: initial;
}

.c-carousel-banner-nav .c-carousel-banner-cell:before {
    font-size: 50px;
    line-height: 80px;
}

/* cell number */
/* .c-carousel-banner-cell:before {
    display: block;
    text-align: center;
    content: counter(carousel-cell);
    line-height: 200px;
    font-size: 80px;
    color: white;
} */



/* GROUP OBJECTS / CAROUSEL NAV
=================================================== */
/* Notes...

	- Used for Flickity asnavfor https://flickity.metafizzy.co/options.html#asnavfor

*/
/* HTML Example...

    ul.o-carousel-nav.c-carousel-nav
      li
        <a href="#_1leadership">Directors</a>

*/
/* Modifiers...

    - Used in conjunction with the component CAROUSEL NAV (.c-carousel-nav)

*/
/* GROUP OBJECTS / CAROUSEL NAV / LAYOUT
=================================================== */
/* ul*/
.o-carousel-nav {
    display: flex;
    /* Comment this back on when we can support gap */
    /* gap: var(--spacing-l-4); */
    
    /* Basically .o-snap-scroll */
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;

    scroll-snap-type: x mandatory;
    scroll-snap-points-x: repeat(100%);

    -webkit-scroll-snap-destination: 50% 50%;
}

/* No gap support) */
.o-carousel-nav > *:not(:last-child) {
    margin-inline-end: var(--spacing-l-4);
}

.o-carousel-nav li {
    /* Basically .o-snap-scroll__item */
    position: relative;
    display: inline-block;

    scroll-snap-align: center;
}

/* Custom */
@media (min-width: 1024px) {
    .o-carousel-nav {
        justify-content: center;
    }
}
/* GROUP OBJECTS / CAROUSEL NAV / DECORATION
=================================================== */
/* ul*/
.o-carousel-nav {
    list-style: none;
}


/* GROUP COMPONENTS / CAROUSEL NAV
=================================================== */
/* GROUP COMPONENTS / CAROUSEL NAV / SPACING
=================================================== */
.c-carousel-nav {
    padding-inline-start: var(--spacing-l);
    padding-inline-end: var(--spacing-l);
    padding-block-start: var(--spacing-l);
    padding-block-end: var(--spacing-l-4);
}
/* GROUP COMPONENTS / CAROUSEL NAV / DECORATION
=================================================== */
.c-carousel-nav a {
    text-decoration: none;
    font-weight: var(--font-family-main-weight-strong);
    opacity: 0.4;
}

/* Because the team is always highlighted? */
.c-carousel-nav li:first-child a {
    opacity: 1;
}

/* Hover state for iOS */
.c-carousel-nav a:hover,
.c-carousel-nav a:focus {
    opacity: 1;
    border: 0;
    outline: none;
}
/* purgecss end ignore */