/*
Theme Name: C19 Tapestry
Theme URI: 
Author: Alastair Mogford
Author URI: 
Description: 
Version: 
License: 
License URI: 
Tags: 
Text Domain: c19tapestry
*/

*, 
*::before,
*::after {
    box-sizing: border-box;
}

/* Use the :root section below to set variables for repeated use through the rest of the CSS */
:root{    
    --color-blue-lighter: #d9dbf1; 
    --color-blue-light: #bfc3e7;
    --color-blue-dark: #333fb2; 
    --color-blue-darker: #121847;

    --color-blue-primary: #000F9F; 
    --color-blue-verydark: #0d1132;

    --color-grey-lighter: #F2F2F2;
    --color-grey-light: #e5e5e5;
    --color-grey-mid: #cccccc;
    --color-grey: #666666;
    --color-grey-dark: #333333;

    --color-pink-lighter: #f8e7e9;    
    --color-pink-light: #f0cfd3;
    --color-pink-mid: #e9b8bd;
    --color-pink-mid-2: #f193a7;
    --color-pink: #DA8891;
    --color-pink-primary: #ed7891;


    --gradient: radial-gradient(circle at 90% 10%, #1b3667, #173063, #132b5f, #10255a, #0d2055, #0a1b50, #08164b, #061245, #040e3f, #020a39, #010732, #00042b);


}

/* #15365b */

html{
    font-size: 16px;
    scroll-behavior: smooth;
    font-family: "proxima-nova", system-ui, helvetica, arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    line-height: 1.2;
}



body{
    margin: 0;
    padding: 0;
    background-color: white;
}


main{
    background-color: white;
    /* margin-top: 5rem; */
}

.debug-message{
    background-color: hsl(0, 100%, 90%);
    border: 1px solid hsl(0, 100%, 75%);
    padding: 2rem;
    border-radius: 0.5rem;
    margin-block: 4rem;
}

.debug-message > *{
    margin-block: 1rem;
}



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

footer{
    /* background: var(--gradient); */
    background-color: var(--color-blue-darker);
    color: white;
    padding-block: 1rem;
}

footer > .wrapper{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem;
}

footer a:focus{
    outline-color: var(--color-pink-primary);
}

footer ul{
    list-style: none;
    padding: 0;
}

.footer-nav a{
    text-decoration: none;
    color: inherit;
}
.footer-nav a:hover, .footer-nav a:focus{
    text-decoration: underline;
}

.footer-logo{
    width: 10em;
    height: fit-content;
}


.c19-inquiry{
    display: grid;
    justify-content: flex-end;
    grid-template-columns: 1fr 10rem;
    justify-items: end;
    align-items: center;
    gap: 1rem;
}


@media (max-width: 780px) {
    .footer-logo{
        width: 5rem;    
    }
    .c19-inquiry{
        grid-template-columns: 1fr 5rem;
    }
}

@media (max-width: 380px) {
    footer > .wrapper{
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

/* ----------------- SITEWIDE ----------------- */




.wrapper{
    max-width: 64rem;
    margin-inline: auto;
    padding: 1rem;
}

.visually-hidden{
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

.skip-to-content{
    position: absolute;
    left: 1rem;
    padding: 0.5rem;
    border-radius: 0.5rem;
    background-color: white;
    border: 2px solid var(--color-pink-primary);
    box-shadow: 0 0 1rem rgba(0,0,0,0.2); 
    text-decoration: none;
    transform: translateY(-6rem);
    transition: transform 100ms ease-in-out;
}
.skip-to-content:focus{
    transform: translateY(0);
    outline-color: var(--color-pink-primary);
}





/* -------------- LINKS -------------- */

a{
    color: var(--color-blue-primary);
    text-decoration: underline;
}

a:focus{
    outline-color: var(--color-blue-primary);
    outline-style: solid;
    outline-width: 3px;
    
}

a.link-block{
    display: block;
}


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


header{
    background-color: var(--color-blue-darker);
    /* background: var(--gradient); */
    color: white;
    padding-block: 1rem;
}

.header-contents > .logo{
    margin: 0;
    padding: 0;
    display: block;
}

a.logo:focus{
    outline-color: var(--color-pink-primary);
}

.logo-img{
    height: 8rem;
    width: auto;
}


.header-contents a{ 
    color: white;
    text-decoration: none;
}

.tagline{
    margin-top: 1rem;
    margin-bottom: 0;
    font-weight: 600;
    font-size: 2rem;
}

.homepage-intro{
    /* background-color: var(--color-blue-darker); */
    /* background-color: #15365b; */
    background-color: white;
    /* color: white; */
    color: var(--color-blue-darker);
    font-size: 1.5rem;
    line-height: 1.6;
    font-weight: 300;
}

.intro-1{
    font-size: 2rem;
}


@media (max-width: 780px) {
    .logo-img{
        height: 5rem;
    }
    h2.tagline{
        font-size: 1.5rem;
    }
    .homepage-intro{
        font-size: 1rem;
    }
    .intro-1{
        font-size: 1.5rem;
    }
}

@media (max-width: 480px) {
    .logo-img{
        height: 4rem;
    }
}


.menu-toggle {
    padding: 1em;
    background: transparent;
    border: 0;
    cursor: pointer;
    text-align: right;
  }
  

.visible{
    display: block;
}

/* Desktop */
@media (min-width: 1024px) {
    .header-contents{
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
    }    
    .nav-and-search{
        display: flex;
        align-items: center;
        gap: 1rem;
    }

    .menu-toggle{display: none;}

    .navbar ul {
        list-style: none;
        padding: 0;
        display: flex;
        gap: 1rem;
    }
}

/* Tablet/mobile */
@media (max-width: 1024px) {

    .header-contents {
        display: grid;
        grid-template-columns: 1fr 4rem;
    }
    .nav-and-search{
        grid-column: 1 / 3;
    }
    
    .nav-and-search {
        /* overflow: hidden; */
        width: 100%;
        display: none;
    }
    .navbar ul {
        list-style: none;
        padding: 0;
        display: grid;
        gap: 1rem;
    }
}

.navbar a:focus{
    outline-color: var(--color-pink-primary);
}


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

.hamburger,
.hamburger::before,
.hamburger::after {
  content: "";
  display: block;
  background: white;
  height: 4px;
  width: 32px;
  border-radius: 4px;
  transition: all ease-in-out 200ms;
}

.hamburger::before {
  transform: translateY(-8px);
}

.hamburger::after {
  transform: translateY(4px);
}

[aria-expanded="true"] .hamburger {
  transform: rotate(45deg);
}

[aria-expanded="true"] .hamburger::before {
  opacity: 0;
}

[aria-expanded="true"] .hamburger::after {
  transform: translateY(-3px) rotate(-90deg);
}


/* ----------------- LANGUAGE SWITCHER ----------------- */


/* 
@media (max-width: 1024px) {
    .trp-language-switcher .trp-ls-shortcode-current-language{
        width: 100% !important;
    }
} */


.trp-language-switcher > *{
    width: 100% !important;
}


/* ----------------- FORMATTING ----------------- */


h1{
    font-size: 3rem;
    margin-block: 3rem;
}
h2{
    font-size: 2.25rem;
    margin-block: 2.25rem;
}
h3{
    font-size: 1.8rem;
    margin-block: 1.8rem;
}
h4{
    font-size: 1.5rem;
    margin-block: 1.5rem;
}
h5{
    font-size: 1.33rem;
    margin-block: 1.5rem;
}
h6{
    font-size: 1.2rem;
    margin-block: 1.5rem;
}

p, ul, ol{
    line-height: 1.5;
}




/* ----------------- MAIN PAGE ----------------- */



hr.seperator{
    margin-block: 3rem;
    border: 4px solid var(--color-blue-light);
}

@media (min-width: 560px) {
    .toggle-list, 
    .toggle-carousel { 
        display: none; 
    }
}

@media (max-width: 560px) {
    .toggle-banner, 
    .toggle-carousel { 
        display: none; 
    }

    .view-options{
        display: none;
    }

}

 

.view-options{
    font-size: 1.25rem;
    font-weight: bold;
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.view-options label{
    margin-right: 0.5rem;
}
.view-options select{
    font: inherit;
    font-weight: 400;
    padding: 0.25rem 0.5rem;
}





/* CAROUSEL LAYOUT */

.layout-carousel{
    margin-bottom: 4rem;
}


.layout-carousel .panel-block{
    padding: 0.5rem 0.5rem 1rem 0.5rem;
    min-height: 100%;
}

.carousel-block-height{
    height: 100%;
}

.layout-carousel .panel-frame{
    background-color: var(--color-grey-light);
    padding: 1rem;
    width: 100%;
    height: 100%;
    box-shadow: 0rem 0rem 0.5rem 0px rgb(0,0,0,0.25);
    border: 1px solid var(--color-grey-mid);
}

.layout-carousel .panel-image{
    width: 19.6rem;
    height: 28rem;
    display: block;
}

.layout-carousel .panel-info{
    margin: 1.5rem 0 0.75rem 0;
    width: 19.6rem;    
}

.layout-carousel h2{
    margin-top: 0;
    margin-bottom: 1rem;
    font-size: 2rem;
    color: var(--color-blue-primary);

}

.layout-carousel .panel-info-desc{
    font-size: 1rem;
}

.layout-carousel .explore{
    display: block;
    margin-top: 2rem;
}
.layout-carousel a{
    text-decoration: inherit;
}



/* LIST LAYOUT */

.layout-list{
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}


.layout-list a{
    text-decoration: inherit;
    color: inherit;
}

.layout-list .panel-block{
    padding: 0;
    display: grid;
    grid-template-columns: 22rem 1fr;
    gap: 2rem;
    align-items: start;
}

.layout-list .panel-frame{
    background-color: var(--color-grey-light);
    padding: 1rem;
    width: 100%;
    box-shadow: 0rem 0rem 0.5rem 0px rgb(0,0,0,0.25);
    border: 1px solid var(--color-grey-mid);
    margin-inline: auto;
}

@media (max-width: 780px) {
    .layout-list .panel-block{
        grid-template-columns: 1fr 2fr;
    }
}
@media (max-width: 560px) {
    .layout-list .panel-block{
        grid-template-columns: 1fr 1.5fr;
    }
    .layout-list .panel-frame{
        padding: 0.5rem;
    }
}
@media (max-width: 480px) {
    .layout-list .panel-block{
        grid-template-columns: 1fr;
    }
}

.layout-list .panel-image{
    max-height: 100%;
    max-width: 100%;
    display: block;
    margin-inline: auto;
}

.layout-list h2{
    margin-top: 0;
}

.layout-list .explore{
    display: block;
    margin-block: 2rem;
}



/* BANNER BANNER */

.layout-banner{
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}


.layout-banner a.banner-wide-image{
    text-decoration: inherit;
    color: inherit;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.layout-banner .panel-block{
    opacity: 0;
    padding: 1rem 6rem 1rem 2rem;
    display: grid;
    grid-template-columns: 22rem 1fr;
    gap: 2rem;
    align-items: center;
}

@media (max-width: 780px) {
    .layout-banner .panel-block{
        padding: 1rem 3rem 1rem 2rem;
        grid-template-columns: 1fr 2fr;
    }    
}

@media (max-width: 560px) {
    .layout-banner .panel-block{
        padding: 1rem 1rem 1rem 1rem;
        grid-template-columns: 1fr 2fr;
        gap: 1.5rem;

        /* remove hover effect on mobile */
        opacity: 1; 
        background-color: rgb(255,255,255,0.9);    
    }    
}

.layout-banner a.banner-wide-image:hover .panel-block,
.layout-banner a.banner-wide-image:focus .panel-block{
    opacity: 1; 
    background-color: rgb(255,255,255,0.9);
}

.layout-banner .panel-frame{
    background-color: var(--color-grey-light);
    padding: 1rem;
    max-height: 22rem;
    max-width: 15.4rem;
    box-shadow: 0rem 0rem 0.5rem 0px rgb(0,0,0,0.25);
    border: 1px solid var(--color-grey-mid);
    margin-inline: auto;
    transition: 200ms;
}
@media (max-width: 560px) {
    .layout-banner .panel-frame{
        padding: 0.5rem;
    }    
}

.layout-banner .panel-image{
    max-height: 22rem;
    max-width: 100%;
    display: block;
    margin-inline: auto;
}

.layout-banner h2{
    margin-top: 0;
    color: var(--color-blue-primary);
    margin-bottom: 1rem;
}

.layout-banner .panel-info-desc p:last-child{
    margin-bottom: 0;
}




/* ----------------- SINGLE PAGES ----------------- */



.wp-block-embed__wrapper{
    float: none;
    clear: both;
    width: 100%;
    position: relative;
    padding-bottom: 56.25%;
    /* padding-top: 25px; */
    height: 0;

}
.wp-block-embed__wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}



.page-title-strap{
    margin-top: 1rem;
    margin-bottom: 2rem;
}

.page-desc-strap{
    margin-top: 1rem;
    
}

.page-desc-info-strap{
    margin-top: 2rem;
    margin-bottom: 2rem;
    font-size: 1.25rem;
    line-height: 1.6;
}

.page-title-strap h1{
    color: var(--color-blue-primary);
    font-size: 3rem;
    margin: 0;
}

.page-desc-strap h2{
    color: var(--color-blue-primary);
    font-size: 2rem;
    margin-top: 0;
    margin-bottom: 2rem;
}

@media (max-width: 480px) {
    .page-title-strap h1{
        font-size: 2rem;
    }
    .page-desc-info-strap{
        font-size: 1rem;
    }
}

section.tapestry{
    background-color: var(--color-grey-light);
}

section.description{
    display: grid;
    justify-items: start;
}


/* OpenSeaDragron interactive panel */

#openseadragon1{
    background-color: white;
    /* border: 1px solid var(--color-blue-primary) */
    height: 600px;
    width: 100%;
}

@media (max-width: 480px) {
    #openseadragon1{
        height: 400px;
    }
}

#toolbarDiv{
    margin-bottom: 0.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.toolbar-button {
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;

  line-height: 1.5rem;
  padding: 0.5rem 0.6rem 0.5rem 2.6rem;
  background-color: var(--color-blue-primary);
  font-weight: 700;
  color: white;

  background-position-x: 0.5em;
  background-position-y: center;
  background-repeat: no-repeat;
  background-size: 1.5em;
}

.toolbar-button:hover{
    background-color: var(--color-blue-dark);
}

.toolbar-button:focus{
    background-color: var(--color-blue-dark);
    outline-color: var(--color-pink-primary);
}




button#zoom-in{
    background-image: url(images/icons/icon_zoom-in.svg);
}
button#zoom-out{
    background-image: url(images/icons/icon_zoom-out.svg);
}
button#home{
    background-image: url(images/icons/icon_reset-zoom.svg);
}
button#full-page{
    background-image: url(images/icons/icon_full-screen.svg);
}
button.close,
button.audio-close{
    background-image: url(images/icons/icon_close.svg);
}
#audio{
    background-image: url(images/icons/icon_audio.svg);
    display: inline-block;
}
 

h2.section-heading-with-line{
    margin-bottom: 1rem;
    padding-top: 2rem;
    position: relative;
    font-size: 2rem;
    color: var(--color-blue-primary);
}

h2.section-heading-with-line::before{
    content: '';
    width: 8rem;
    height: 2px;
    background-color: var(--color-blue-primary);
    display: block;
    position: absolute;
    top: 0;
}


h2.top-padding{
    margin-top: 2.25rem;
}

h2.top-padding-none{
    margin-top: 0;
}


/* audio */

.audio-section{
    display: none;
}

.audio-grid{
    border: 4px solid var(--color-blue-primary);
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 2rem;
    background-color: white;
}

.audio-grid > *{
    padding: 1rem;
}

@media (max-width: 780px) {
    .audio-grid{
        grid-template-columns: 1fr;
        gap: 0;
    }
}

/* Thumbnails */

.thumbnails-grid{
    display: grid;
    gap: 2rem;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 2rem;
}

img.thumbnail-img{
    width: 100%;
    height: auto;
}

.thumbnail{
    position: relative;
    cursor: pointer;
}

.thumbnail:hover .expand-thumbnail-button{
    transform: scale(1.1); 
}

button.expand-thumbnail-button{

    padding: 0;
    margin: 0;
    border: none;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;

    position: absolute;
    top: 1rem;
    right: 1rem;

    background-color: var(--color-blue-primary);
    color: white;
    width: 3rem; 
    height: 3rem;
    z-index: 2;

    background-position: center;
    background-repeat: no-repeat;
    background-size: 2rem;

    background-image: url(images/icons/icon_pointer.svg);

}


button.expand-thumbnail-button:focus{
    outline-color: var(--color-pink-primary);
}




.more-details{
    display: none;
    background-color: var(--color-blue-lighter);
    padding: 2rem;
    position: relative;
    margin-top: 3rem;
}

.more-details::before{
    content: '';
    background-color: var(--color-blue-lighter);
    /* background-color: red; */
    clip-path: polygon(50% 25%, 0% 100%, 100% 100%);
    width: 2rem;
    height: 2rem;
    position: absolute;
    top: -2rem;
}

#more-details-1::before{
    left: calc( (100% - 5rem) / 6);
}
#more-details-2::before{
    left: calc( 50% - 1rem) ;
}
#more-details-3::before{
    right: calc( (100% - 5rem) / 6);
}


.more-details h3{
    margin-top: 0;
    max-width: calc(100% - 7rem);
}
.more-details p:last-child{
    margin-bottom: 0;
}

.more-details button{
    position: absolute;
    top: 1rem;
    right: 1rem;
}

.unselected{
    opacity: 0.3;
} 


@media (max-width: 660px) {
    .thumbnails-grid{
        gap: 1rem;
    }
    button.expand-thumbnail-button{
        top: 0.5rem;
        right: 0.5rem;
        width: 2rem; 
        height: 2rem;    
        background-size: 1.33rem;
    
    }
    .more-details{
        padding: 1rem;
    }    
}


/* artist */

section.artist{
    margin-top: 4rem;
    display: grid;
    grid-template-columns: 1fr 3fr;
    gap: 3rem;
}

img.artist-image{
    width: 100%;
    height: auto;
    filter: saturate(0);
}

h3.artist-name{
    margin-top: 0;
}

.artist-image-container-mobile{
    display: none;
}

@media (max-width: 480px) {
    section.artist{
        grid-template-columns: 1fr;
    }
    .artist-image-container{
        display: none;       
    }
    .artist-image-container-mobile{
        display: block;
        float: right;
        max-width: 8rem;
        padding: 1.5rem 0 1rem 1rem;
    }
}

/* video */

section.video,
section.video-rev{
    margin-top: 3rem;
    display: grid;
    gap: 3rem;
}

section.video{
    grid-template-columns: 2fr 1fr;
}
section.video-rev{
    grid-template-columns: 1fr 2fr;
}

section.video-rev > .video-info-container{
    order: -1;
}

@media (max-width: 780px) {
    section.video,
    section.video-rev{
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    section.video > .video-info-container{
        order: -1;
    }
}


.video-result-16x9{
    width: 100%;
    position: relative;
    padding-bottom: 56.25%;
}
.featured-video{
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;  
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
  
}
.video-result-16x9-overlay{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    display: grid;
    background: rgb(0,0,0);
    background: -moz-linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.9) 100%);
    background: -webkit-linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.9) 100%);
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.9) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000",endColorstr="#000000",GradientType=1);
}

.video-result-16x9:hover .featured-video-play-button,
.video-result-16x9:focus .featured-video-play-button{
    transform: scale(1.1);
}

.featured-video-play-button{
    font-size: 18px;
    margin: auto;
    width: 8em;
    height: 6em;
    box-shadow: 0 0 1em rgba(0,0,0,0.2);
    background-color: var(--color-blue-primary);
}

.play-icon{
    background-color: white;
    clip-path: polygon(100% 50%, 20% 0, 20% 100%);
    width: 2.5rem;
    height: 2.5rem;
    margin: 2.25rem auto;
}



/* quotes */

section.quotes,
section.full-width-quotes {
    margin-top: 3rem;
}

.quotes-container{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem 5rem;
    padding: 2rem;
    align-items: start;
}

.full-width-quotes-container{
    padding: 2rem;
}

.full-width-quotes-container .quote{
    margin-bottom: 2rem;
}

.quote{
    padding-inline: 4rem;
    position: relative;
}

.quote::before, .quote::after{
    content: '';
    position: absolute;
    width: 3rem;
    height: 3rem;
    background-repeat: no-repeat;
    background-size: 3rem;
    background-position: center;
    opacity: 0.25;    
}

.quote::before{
    background-image: url(images/icons/icon_quote-open.svg);
    top: 0;
    left: 0;
}
.quote::after{
    background-image: url(images/icons/icon_quote-close.svg);
    bottom: 1rem;
    right: 0;
}

.quote blockquote{
    margin: 0;
    color: var(--color-blue-primary);
    font-size: 1.25rem;
}

.quote a{
    color: inherit;
}

@media (max-width: 780px) {
    .quotes-container{
        gap: 2rem;
        padding: 1rem;
    }
    .quote{
        padding-inline: 3rem;
    }    
    .quote::before, .quote::after{
        width: 2.5rem;
        height: 2.5rem;
        background-repeat: no-repeat;
        background-size: 2.5rem;    
    }
    .quote blockquote{
        font-size: 1rem;
    }
}

@media (max-width: 660px) {
    .quotes-container{
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .quotes-container{
        padding: 0rem !important;
    }
}



/* -------------- NEXT / PREV -------------- */

section.next-prev{
    background-color: var(--color-blue-light);
    margin-top: 4rem;
}

section.next-prev .wrapper{
    padding-block: 3rem;
}

section.next-prev .nav-links{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem;
}

.nav-previous a, .nav-next a{
    display: flex;
    gap: 1rem;
    align-items: center;
    text-decoration: none;
}

.nav-previous{
    display: inline-grid;
    justify-items: start;
}

.nav-next{
    display: inline-grid;
    justify-items: end;
    text-align: right;
}

.nav-previous a::before, 
.nav-next a::after{
    content: '';
    width: 4rem;
    height: 4rem;
    background-size: 4rem;
    background-position: center;
    background-repeat: no-repeat;
}
.nav-previous a::before{
    background-image: url(images/icons/icon_arrow-prev.svg);
}
.nav-next a::after{
    background-image: url(images/icons/icon_arrow-next.svg);
}

.nav-panel-title{
    font-size: 1.25rem;
    font-weight: 700;
}

@media (max-width: 480px) {
    .nav-previous a::before, 
    .nav-next a::after{
        width: 2rem;
        height: 2rem;
        background-size: 2rem;
        min-width: 2rem;
        }
}

/* -------------- COOKIE BAR ADJUSTMENTS -------------- */





.cta-blue a,
.cta-pink a,
.cta-grey a{
    text-decoration: none;
    display: inline-block;
}


/* Background colour */
.cta-pink   a{  
    background-color: var(--color-pink-mid);
    color: var(--color-blue-primary);
    border-bottom-color: var(--color-pink-primary); 
}
.cta-blue   a{  
    background-color: var(--color-blue-light); 
    color: var(--color-blue-primary); 
    border-bottom-color: var(--color-blue-primary); 
}
.cta-grey   a{  
    background-color: var(--color-grey-mid); 
    color: var(--color-blue-primary); 
    border-bottom-color: var(--color-grey-dark); 
}

/* Hover colours */
.cta-pink a:hover, .cta-pink a:focus{    
    background-color: var(--color-pink-light); 
    border-bottom-color: var(--color-pink-mid-2); 
}
.cta-blue a:hover, .cta-blue a:focus{    
    background-color: var(--color-blue-lighter); 
    border-bottom-color: var(--color-blue-dark); 
}
.cta-grey a:hover, .cta-grey a:focus{    
    background-color: var(--color-grey-light); 
    border-bottom-color: var(--color-grey); 
}



/* Icon positioning */
.cta-icon-pre a{
    padding: 0.5rem 0.6rem 0.4rem 2.5rem;
    background-repeat: no-repeat;
    background-size: 1.3em;
    background-position: 0.5em center;
}
.cta-icon-post a{
    padding: 0.5rem 2.5rem 0.4rem 0.6rem;
    background-repeat: no-repeat;
    background-size: 1.3em;
    background-position: calc(100% - 0.5em) center;
}

.cta-icon-arrow-left        a{ background-image: url("images/icons/icon_arrow-prev.svg"); }
.cta-icon-arrow-right        a{ background-image: url("images/icons/icon_arrow-next.svg"); }
.cta-icon-arrow-up        a{ background-image: url("images/icons/icon_arrow-up.svg"); }
.cta-icon-arrow-down        a{ background-image: url("images/icons/icon_arrow-down.svg"); }
.cta-icon-calendar          a{ background-image: url("images/icons/icon_calendar.svg"); }
.cta-icon-clock             a{ background-image: url("images/icons/icon_clock.svg"); }
.cta-icon-comment             a{ background-image: url("images/icons/icon_comment.svg"); }
.cta-icon-cross             a{ background-image: url("images/icons/icon_cross.svg"); }
.cta-icon-document          a{ background-image: url("images/icons/icon_document.svg"); }
.cta-icon-email             a{ background-image: url("images/icons/icon_email.svg"); }
.cta-icon-external          a{ background-image: url("images/icons/icon_external.svg"); }
.cta-icon-location          a{ background-image: url("images/icons/icon_location.svg"); }
.cta-icon-minus          a{ background-image: url("images/icons/icon_minus.svg"); }
.cta-icon-no-entry          a{ background-image: url("images/icons/icon_no-entry.svg"); }
.cta-icon-phone            a{ background-image: url("images/icons/icon_phone.svg"); }
.cta-icon-plus            a{ background-image: url("images/icons/icon_plus.svg"); }
.cta-icon-search            a{ background-image: url("images/icons/icon_search.svg"); }
.cta-icon-tick            a{ background-image: url("images/icons/icon_tick.svg"); }






/* About page */

.article-contents{
    font-size: 1.25rem;
    margin-bottom: 4rem;
}

.article-contents p{
    max-width: 660px;
}