/* Colors
Bold Coral:  #F26553
Links/darker coral: #B3433B
Red: #D92D20
Blue: #2F80ED;
Text: #171415
Grey Text: #727272
Light grey: #E0E0E0
*/

/* Visually hidden */
.visually-hidden,
.sr-only {
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    width: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
}

.visually-hidden.focus-visible:focus {
    clip: unset;
    clip-path: none;
    height: auto;
    width: auto;
    margin: 0;
    overflow: visible;
    position: static !important;
    margin-bottom: 1.6rem;
}

/* Full screen width */
.breakout {
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

/* Link styles */
a.dark-link {
    color:#171415;
    text-decoration: none;
}

a.dark-link.underline {
    text-decoration: underline;
}

a.dark-serif-link {
    color:#171415;
    font-family: "abril_textbold", 'Times', 'Times New Roman', serif;
    text-decoration: none;
}

a.dark-link:hover,
a.dark-link:active,
a.dark-link:focus,
a.dark-serif-link:hover,
a.dark-serif-link:active,
a.dark-serif-link:focus {
    color: #A34039;
    text-decoration: underline;
}

a.serif-large {
    font-size: 2.4rem;
    font-family: 'abril_textbold', 'Times', 'Times New Roman', serif;
}

a.sans-upper {
    font-size: 1.85rem;
    text-transform: uppercase;
    letter-spacing: 3px;
    text-decoration: none;
}

a.sans-upper:hover,
a.sans-upper:active,
a.sans-upper:focus {
    text-decoration: underline;
}

a.coral,
a.coral-md,
a.coral-lg {
    color: #D85849;
    font-weight: 700;
}

a.coral-md {
    font-size: 1.85rem;
}

a.coral-lg {
    font-size: 2.4rem;
}

a.coral:link,
a.coral:visited,
a.coral-lg:link,
a.coral-lg:visited {
    text-decoration: none;
}

a.coral:hover,
a.coral:active,
a.coral:focus,
a.coral-lg:hover,
a.coral-lg:active,
a.coral-lg:focus {
    text-decoration: underline;
}

a.coral-dark {
    color: #B3433B;
}

a.red-dark {
    color: #A34039;
}

a.arrow-right span.link-text {
    margin-right: 8px;    
}

a.arrow-right svg {
    transform: translateY(0.15em);
}

a.arrow-right:hover,
a.arrow-right:focus,
a.arrow-right:active {
    text-decoration: none;
}

a.arrow-right:hover span.link-text,
a.arrow-right:focus span.link-text,
a.arrow-right:active span.link-text {
    text-decoration: underline;
}

a.arrow-right-red-lg {
    background: url(../../images/arrow--right--red.svg) no-repeat right center;
    padding-right: 25px;
    white-space: nowrap;
}

a.arrow-right-red-sm {
    background: url(../../images/arrow--right--red--sm.svg) no-repeat right center;
    padding-right: 25px;
    white-space: nowrap;
}

a.wrap-link {
    display: inline-block;
}

a.file-icon-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #F9FAFB;
    border-radius: 8px;
    border: 1px solid #D0D5DD;
    border-left: 10px solid #A34039;
    padding: 10px;
    padding-left: 14px;
}

a.file-icon-link svg {
    margin-left: 16px;
}

a.file-icon-link.file-icon-link--var1 {
    display: inline-flex;
    background-color: #fff;
    border-color: #A34039;
    border-left-width: 1px;
    padding: 10px 20px;
    font-weight: 500;
}

a.dark-line-sandwich {
    border-top: 2px solid #171415;
    border-bottom: 2px solid #171415;
    font-weight: bold;
    padding: 8px 12px;
    text-decoration: none;
}

a.dark-line-sandwich:hover,
a.dark-line-sandwich:active,
a.dark-line-sandwich:focus {
    text-decoration: underline;
}

a.dark-line-sandwich.arrow-right-red-sm {
    padding-right: 44px;
    background-position: center right 12px;
}

/* Text styles */
.sans {
    font-family: "proxima-nova", Arial, Helvetica, sans-serif;
}

.upper {
    text-transform: uppercase;
}

.strong {
    font-weight: bold;
}

.inline {
    display: inline;
}

p.cta-link {
    margin-top: 3rem;
    margin-bottom: 0;
}

p.meta-detail {
    font-size: 1.85rem;
    margin-bottom: 0.25rem;
}

.grey-text {
    color: #727272;
}

.coral {
    color: #F26553;
}

.red--dark {
    color: #A34039;
}

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

.serif-text {
    font-family: "abril_textregular", 'Times', 'Times New Roman', serif;
}

.serif-text-bold {
    font-family: "abril_textbold", 'Times', 'Times New Roman', serif;
}

.bold-black {
    font-weight: 700;
    color: #171415;
}

.subtitle {
    font-size: 0.9em;
}

.text-sm {
    font-size: 1.6rem;
}

.text-md {
    font-size: 1.85rem;
}

.text-lg {
    font-size: 2.4rem;
}

.intro-text,
.intro-text--large {
    font-family: "abril_textregular", 'Times', 'Times New Roman', serif;
    font-size: 2.2rem;
}

.intro-text.sans,
.intro-text--large.sans {
    font-family: "proxima-nova", Arial, Helvetica, sans-serif;
}

.intro-text--large {
    text-align: center;
    margin-bottom: 24px;
    max-width: 58ch;
}

@media all and (min-width: 1100px) {
    .intro-text {
        font-size: 2.6rem;
    }

    .intro-text--large {
        font-size: 3.2rem;
        margin-bottom: 44px;
    }
}

h2 + .intro-text {
    margin-top: -15px;
}

/* Lists */

ul.checkmark-list li {
    list-style-image: url(../../images/checkmark--circle.svg); 
}

/* Margins */
.no-margin {
    margin: 0;
}

.margin--top-2rem {
    margin-top: 2rem;
}

.margin--top {
    margin-top: 3rem;
}

.margin--bottom {
    margin-bottom: 3rem;
}

p.margin-half {
    margin-bottom: 0.2em;
}

p.no-margin {
    margin-bottom: 0;
}

.margin-bottom--3 {
    margin-bottom: 30px;
}

.margin-bottom--40 {
    margin-bottom: 40px;
}

.margin-bottom--50 {
    margin-bottom: 50px;
}

.margin-bottom--9 {
    margin-bottom: 90px;
}

/* Borders */
.lt-grey-border {
    padding-top: 24px;
    border-top: 1px solid #EAECF0;
}

.teaser--border-bottom:not(:last-child) {
    border-bottom: 4px solid #171415;
    padding-bottom: 2.5rem;
}

.dark-line-sandwich {
    border-top: 4px solid #171415;
    border-bottom: 4px solid #171415;
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.dark-line--bottom {
    border-bottom: 4px solid #171415;
    padding-bottom: 6%;
}

/* Images */
.image-background--full {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

/* Coloured regions */
.region--white-text,
.regon--dark {
    color: #fff;
}

.region--white-text a,
.region--white-text h2,
.region--white-text h3,
.region--white-text h4,
.region--white-text h5,
.region--white-text h6,
.region--dark a,
.region--dark h2,
.region--dark h3,
.region--dark h4,
.region--dark h5,
.region--dark h6,
.region--dark label  {
    color: #fff;
}

.region--white-text a:focus,
.region--white-text a.button:focus,
.region--white-text button:focus,
.region--white-text input:focus,
.region--white-text select:focus,
.region--white-text textarea:focus,
.region--white-text area:focus,
.region--dark a:focus,
.region--dark a.button:focus,
.region--dark button:focus,
.region--dark input:focus,
.region--dark select:focus,
.region--dark textarea:focus,
.region--dark area:focus {
  outline-color: #fff;
}

.region--dark {
    background-color: #171415;
}

.region--dark a:hover,
.region--dark a:active,
.region--dark a:focus {
    color:#D85849;
}

.region--dark a.button--solid:hover,
.region--dark a.button--solid:active,
.region--dark a.button--solid:focus {
    background-color:white;
    color: #171415;
    border-color:white;
}

.region--dark a.button--ghost {
    border-color: #fff;
    color: #fff;
}

.region--coral {
    background-color:#D85849;
}

.region--coral-dark {
    background-color: #B3433B;
}

.region--red-dark {
    background-color:#A34039;
}

.region--grey-light {
    background-color: #F9FAFB;
    padding: 20px;
    
}

/* Flex layout */
.flex-layout {
    display: flex;
    flex-wrap: wrap;
}

.flex--50 > * {
    flex: 0 0 50%;
}

.flex-text {
    flex: 1;
}

/* Grid layout */
.image-text--teaser {
    display: grid;
    grid-template-columns: max-content 1fr;
    grid-gap: 30px;
    margin-bottom: 30px;
}

.grid--half {
    display: grid;
    grid-gap: 30px;
}

@media all and (min-width: 950px) {
    .grid--half {
        grid-template-columns: 1fr 1fr;
    }
}

/* Hide text for anons from logged-in users */

body.user-logged-in a[href*="/user/login"],
body.user-logged-in .for-anonymous-user {
    display: none;
}

/* "Pill"-style and badge-style tags */
.badge--red {
    background-color: #FFF5F4;
    border-radius: 16px;
    color: #B3433B;
    font-weight: 700;
    font-size: 1.6rem;
    padding: 0.1rem 1.2rem;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-family: "proxima-nova", Arial, Helvetica, sans-serif;
}

.tag--square,
.tag--pill {
    display: inline-flex;
    align-items: center;
    line-height: 1.5;
    font-weight: bold;
    font-size: 1.85rem;
    color: #553E5B;
}

.tag--pill.text-sm {
    font-size: 1.6rem;
}

.tag--pill {
    border-radius: 1em;
    padding: 0.25em 0.75em;
}

.tag--square {
    border-radius: 8px;
    padding: 0.8rem 1rem;
}

.tag--outline {
    border: 1px solid #666549;
}

.tag--pill svg {
    margin-right: 0.6rem;
}

.content-type--article {
    color:#B3433B;
}

.tag--solid {
    background-color: #E0E0E0;
}

.tag--solid.content-type--article {
    background-color: #FCD8D4;
}

.tag--outline.content-type--article {
    border-color: #B3433B;
}

.content-type--audio {
    color:#666549;
}

.tag--solid.content-type--audio {
    background-color: #E9E8D8;
}

.tag--outline.content-type--audio {
    border-color: #666549;
}

.content-type--video {
    color:#553E5B;
}

.tag--solid.content-type--video {
    background-color: #E5D5E8;
}

.tag--outline.content-type--video {
    border-color: #553E5B;
}

.content-type--podcast {
    color: #416482;
}

.tag--solid.content-type--podcast {
    background-color: #D5E4F1;
}

.tag--outline.content-type--podcast {
    border-color: #416482;
}

.tag--solid.program-type--online {
    background-color: #F3FAFF;
}

.tag--solid.program-type--live {
    background-color: #FDF3FF;
}

/* Card-type things */
.image-text--overlay {
    position: relative;
    z-index: 1;
}

.image-text--overlay .card--image,
.image-text--overlay img {
    border-radius: 8px;
}

.image-text--overlay .image-overlay {
    position: absolute;
    width: 88%;
}

.image-text--overlay .image-overlay--bottom {
    left: 0;
    bottom: 0;
    border-radius: 0 8px 0 8px;
}

.border-radius,
.border-radius--8 {
    border-radius: 8px;
}

.icon--inline {
    display: flex;
    align-items: center;
    gap: 7px;
}

.icon--inline > svg {
    flex: 0 0 auto;
}