body {
    font-family: 'Inria Serif', serif;
    font-size: 1.125rem;
    /* Establishes a stacking context so the negative z-index curves below
       paint above body's own background instead of being hidden behind it. */
    position: relative;
    z-index: 0;
}

/* Replace Bootstrap's default primary blue. Utilities like .bg-primary,
   .text-primary and .border-primary read --bs-primary-rgb directly, but
   .btn-primary/.btn-outline-primary bake their own colours into local
   variables at build time, so those need overriding separately. */
:root {
    --bs-primary: #095098;
    --bs-primary-rgb: 9, 80, 152;
    --bs-link-color: #095098;
    --bs-link-color-rgb: 9, 80, 152;
    --bs-link-hover-color: #073c72;
    --bs-link-hover-color-rgb: 7, 60, 114;
}

.btn-primary {
    --bs-btn-bg: #095098;
    --bs-btn-border-color: #095098;
    --bs-btn-hover-bg: #084481;
    --bs-btn-hover-border-color: #084481;
    --bs-btn-active-bg: #073c72;
    --bs-btn-active-border-color: #073c72;
    --bs-btn-disabled-bg: #095098;
    --bs-btn-disabled-border-color: #095098;
    --bs-btn-focus-shadow-rgb: 9, 80, 152;
}

.btn-outline-primary {
    --bs-btn-color: #095098;
    --bs-btn-border-color: #095098;
    --bs-btn-hover-bg: #095098;
    --bs-btn-hover-border-color: #095098;
    --bs-btn-active-bg: #095098;
    --bs-btn-active-border-color: #095098;
    --bs-btn-disabled-color: #095098;
    --bs-btn-disabled-border-color: #095098;
    --bs-btn-focus-shadow-rgb: 9, 80, 152;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-weight: 700;
}

header .btn,
.further-reading-links .btn {
    --bs-btn-border-radius: 0;
}

.further-reading {
    border-top: 1px solid #FF7762;
    margin-top: 3rem;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

.contact-card {
    --bs-card-border-radius: 0;
    --bs-card-border-color: #FF7762;
    transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
}

.contact-card:hover {
    background-color: #FF7762;
    color: #fff;
}

.contact-card .card-body {
    display: flex;
    align-items: center;
    justify-content: center;
}

.h1 strong {
    color: #FF7762;
}

.link-arrow::before {
    content: '\2192\FE0E';
    display: inline-block;
    margin-right: 0.5em;
}

.link-arrow-up-right::after {
    content: '\2197\FE0E';
    display: inline-block;
    margin-left: 0.5em;
}

/* Decorative background curves, sat behind all page content as background
   images so they don't affect page height. Fixed to the viewport so they
   always fill its height. Positioned here as a starting point - move/resize
   as needed. */
.bg-curve {
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100vh;
    background-repeat: no-repeat;
    background-size: auto 100%;
    pointer-events: none;
}

.bg-curve--green {
    width: 115%;
    background-image: url('/assets/layout/bg-curve-green.svg');
    background-position: top right;
}

.bg-curve--pink {
    background-image: url('/assets/layout/bg-curve-pink.svg');
    background-position: top left;
}

/* Percentage margins resolve against the containing block's width (even for
   margin-top), so this pulls the copy up by 10% of the container's width. */
.body--overlap {
    margin-top: -25%;
    position: relative;
}

/* Lock .container-lg at 960px once past the lg breakpoint, instead of
   Bootstrap's default of growing further at the xl and xxl breakpoints. */
@media (min-width: 1200px) {
    .container-lg {
        max-width: 960px;
    }
}

@media (min-width: 1400px) {
    .container-lg {
        max-width: 960px;
    }
}