body {
    font-family: 'Inter', sans-serif;
    font-size: 1.4rem;
    background-color: #495FB1;
    color: #fff;
    /* Bootstrap default is 1.5; this is read by many components, not just body. */
    --bs-body-line-height: 1.25;
    line-height: 1.25;
    /* 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: #FCBAC0;
    --bs-link-color-rgb: 252, 186, 192;
    --bs-link-hover-color: #d69ea3;
    --bs-link-hover-color-rgb: 214, 158, 163;
    /* Many Bootstrap components (cards, dropdowns, etc.) read this variable
       directly rather than inheriting body's own color, so it needs setting
       here too for text to be white throughout. */
    --bs-body-color: #fff;
    --bs-body-color-rgb: 255, 255, 255;
}

.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;
}

a {
    text-decoration: none;
    border-bottom: 2px solid currentColor;
}

a:has(img) {
    border-bottom: none;
}

.fw-black {
    font-weight: 900;
}

/* Doubles the homepage headline and intro. Bootstrap's own .h1 rule fluidly
   scales from 1.375rem+1.5vw up to a 2.5rem cap at 1200px, so this doubles
   both the fluid formula and the cap. .intro has no explicit size elsewhere
   (it just inherits body's 1.125rem), so this simply sets it to double that. */
.page-title {
    font-size: calc(2.75rem + 3vw);
    line-height: 0.9;
}

@media (max-width: 575.98px) {
    .page-title {
        font-size: calc(2.25rem + 3vw);
    }
}

@media (min-width: 1200px) {
    .page-title {
        font-size: 5rem;
    }
}

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

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: #D5606B;
}

.body {
    color: rgba(255, 255, 255, 0.75);
}

.body h1,
.body h2,
.body h3,
.body h4,
.body h5,
.body h6 {
    color: #fff;
}

/* Pill-shaped "View Pathways" button, with a circular end-cap bulging above
   and below the pill - built from a positioned pill plus an absolutely
   positioned circle overlapping its right edge, both in the same background
   colour so they read as one continuous shape. */
.pathways-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    background-color: #FCBAC0;
    color: #D5606B;
    border-radius: 999px;
    padding: 0.85rem 1.75rem 0.85rem 1.75rem;
    /* Matches .pathways-btn__icon's right offset below - the icon is
       absolutely positioned so it doesn't contribute to this box's own
       width, and without this the bulge throws off text-align:center on
       the wrapping <p>, since only the pill itself gets centered. */
    margin-right: 2.5rem;
    font-weight: 900;
    font-size: 1.25rem;
    text-decoration: none;
    border-bottom: none;
}

.pathways-btn__text {
    position: relative;
    z-index: 1;
}

.pathways-btn__icon {
    position: absolute;
    top: 0;
    bottom: 0;
    right: -2.5rem;
    height: 100%;
    aspect-ratio: 1;
    border-radius: 50%;
    background-color: #FCBAC0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    overflow: hidden;
}

/* Colour wipe: a plain rectangle (no border-radius of its own) that scales
   in from the left on hover - .pathways-btn__icon's own overflow:hidden and
   border-radius:50% clip it to the circle, but the wipe's moving edge stays
   a straight vertical line rather than following the circle's curve. */
.pathways-btn__icon::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: #fff;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.25s ease-in-out;
}

.pathways-btn:hover .pathways-btn__icon::before {
    transform: scaleX(1);
}

.pathways-btn__icon img {
    position: relative;
    z-index: 1;
    width: 2.25rem;
    height: auto;
}

.site-footer {
    background-color: rgba(20, 32, 75, 0.6);
    border-top-left-radius: 3rem;
    border-top-right-radius: 3rem;
}

@media (max-width: 575.98px) {
    .site-footer {
        font-size: 1rem;
    }
}

.footer-links {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem 3rem;
}

@media (min-width: 768px) {
    .footer-links {
        grid-template-columns: repeat(3, 1fr);
    }
}

.site-footer a {
    color: #fff;
    border-bottom: none;
}

.site-footer address,
.site-footer address a,
.footer-copyright {
    color: #B7C5F5;
}

/* Sits at full height (201x84 aspect ratio), anchored to the bottom of
   .container-lg then shifted down by 50% of its own height via transform -
   so exactly half of it bleeds below the container's bottom edge. It's
   .container-lg's own overflow:hidden (set in the twig) that then clips it,
   giving the look of the graphic being cut off by the page's true edge,
   rather than being neatly contained in a pre-shortened box. */
.footer-logo-crop {
    position: absolute;
    left: 0;
    bottom: 0;
    transform: translateY(50%);
    width: 100%;
    aspect-ratio: 201 / 84;
    z-index: 0;
}

/* float-logo.svg is a single solid fill, so it's applied as a mask over a
   plain background-colour - this recolours it to an exact hex value, which
   a CSS filter on the image couldn't reliably achieve. */
.footer-logo-crop__img {
    display: block;
    width: 100%;
    aspect-ratio: 201 / 84;
    background-color: #36457D;
    -webkit-mask-image: url('/assets/layout/float-logo.svg');
    mask-image: url('/assets/layout/float-logo.svg');
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

/* Positioned (not just later in the DOM) so it paints above the
   absolutely-positioned .footer-logo-crop, which would otherwise render on
   top of plain in-flow content regardless of DOM order. */
.footer-content {
    position: relative;
    z-index: 1;
}

.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 {
    /* Shifted up and right (margin-top/margin-left), so the box is grown by
       the same amounts on those sides to keep full viewport coverage -
       otherwise the shift leaves an uncovered gap at the bottom/left. */

    height: calc(100vh + 10vh);
    margin-top: -10vh;
    background-image: url('/assets/layout/bg-curve-green-cropped.svg');
    background-position: top center;
    /* Increases the rendered size by 200% (i.e. 3x the base auto-100% size). */
    background-size: auto 100%;
}

/* 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;
    }
}