/**
 * Theme Name: Imperial 3Rs
 * Template:   twentytwentyfour
 */

:root {
    /* Colours */
    --accent: #40E0D0;

    /* @link https://utopia.fyi/type/calculator?c=320,18,1.2,1240,20,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
    --step--2: clamp(0.7813rem, 0.7747rem + 0.0326vi, 0.8rem);
    --step--1: clamp(0.9375rem, 0.9158rem + 0.1087vi, 1rem);
    --step-0: clamp(1.125rem, 1.0815rem + 0.2174vi, 1.25rem);
    --step-1: clamp(1.35rem, 1.2761rem + 0.3696vi, 1.5625rem);
    --step-2: clamp(1.62rem, 1.5041rem + 0.5793vi, 1.9531rem);
    --step-3: clamp(1.944rem, 1.771rem + 0.8651vi, 2.4414rem);
    --step-4: clamp(2.3328rem, 2.0827rem + 1.2504vi, 3.0518rem);
    --step-5: clamp(2.7994rem, 2.4462rem + 1.7658vi, 3.8147rem);

    /* @link https://utopia.fyi/space/calculator?c=320,18,1.2,1240,20,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
    --space-3xs: clamp(0.3125rem, 0.3125rem + 0vi, 0.3125rem);
    --space-2xs: clamp(0.5625rem, 0.5408rem + 0.1087vi, 0.625rem);
    --space-xs: clamp(0.875rem, 0.8533rem + 0.1087vi, 0.9375rem);
    --space-s: clamp(1.125rem, 1.0815rem + 0.2174vi, 1.25rem);
    --space-m: clamp(1.6875rem, 1.6223rem + 0.3261vi, 1.875rem);
    --space-l: clamp(2.25rem, 2.163rem + 0.4348vi, 2.5rem);
    --space-xl: clamp(3.375rem, 3.2446rem + 0.6522vi, 3.75rem);
    --space-2xl: clamp(4.5rem, 4.3261rem + 0.8696vi, 5rem);
    --space-3xl: clamp(6.75rem, 6.4891rem + 1.3043vi, 7.5rem);

    /* One-up pairs */
    --space-3xs-2xs: clamp(0.3125rem, 0.2038rem + 0.5435vi, 0.625rem);
    --space-2xs-xs: clamp(0.5625rem, 0.4321rem + 0.6522vi, 0.9375rem);
    --space-xs-s: clamp(0.875rem, 0.7446rem + 0.6522vi, 1.25rem);
    --space-s-m: clamp(1.125rem, 0.8641rem + 1.3043vi, 1.875rem);
    --space-m-l: clamp(1.6875rem, 1.4049rem + 1.413vi, 2.5rem);
    --space-l-xl: clamp(2.25rem, 1.7283rem + 2.6087vi, 3.75rem);
    --space-xl-2xl: clamp(3.375rem, 2.8098rem + 2.8261vi, 5rem);
    --space-2xl-3xl: clamp(4.5rem, 3.4565rem + 5.2174vi, 7.5rem);

    /* Custom pairs */
    --space-s-l: clamp(1.125rem, 0.6467rem + 2.3913vi, 2.5rem);
}

/* Adjust Inter to look more on brand */
body {
    font-feature-settings: 'cv05' on, 'cv08' on, 'cv10' on;
}

/* Add custom background used on homepage */
body.custom-background {
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.4) 100%),
                url("https://3rshub.imperial.ac.uk/wp-content/uploads/2024/05/Kidney-Slice.jpg");
    background-position: center top;
    background-size: cover;
    background-attachment: fixed;
}

/* Navigation styling */
@media screen and (min-width: 675px) {
    nav.wp-block-navigation {
        width: 100%;
    }
    ul.wp-block-navigation__container {
        gap: 0;
        width: 100%;
    }
    ul.wp-block-navigation__container > li.wp-block-navigation-item {
        border-bottom: 2px solid var(--accent);
        border-top: 2px solid var(--accent);
        box-sizing: border-box;
        flex-grow: 1;
        justify-content: center;
        height: 100%;
        padding-block: var(--space-xs);
        padding-inline: var(--space-2xs);
    }
    ul.wp-block-navigation__container > li.wp-block-navigation-item + li.wp-block-navigation-item {
        border-left: 2px solid var(--accent);
    }
    button.wp-block-navigation-item__content {
        padding-block: 0;
    }

    .wp-block-navigation__submenu-container {
        width: 100% !important;
    }
    .wp-block-navigation-item__content {
        justify-content: center;
    }
    .wp-block-navigation .wp-block-navigation__submenu-icon {
        height: 1em;
        width: 1em;
    }
    .wp-block-navigation-item.open-on-click .wp-block-navigation-submenu__toggle {
        padding-right: 1.5em;
    }
    .wp-block-navigation-item.open-on-click .wp-block-navigation-submenu__toggle+.wp-block-navigation__submenu-icon {
        margin-left: -1em;
    }
}
@media screen and (min-width: 980px) {
    ul.wp-block-navigation__container > li.wp-block-navigation-item {
        flex-basis: 20%;
    }
}

.wp-block-navigation__responsive-container-close,
.wp-block-navigation__responsive-container-open {
    align-items: center;
    display: flex;
    gap: 0.5em;
}
.wp-block-navigation__responsive-container-close::before {
    content: 'Close';
}
.wp-block-navigation__responsive-container-open::after {
    content: 'Menu';
}
.wp-block-navigation__responsive-container-close svg,
.wp-block-navigation__responsive-container-open svg {
    height: 32px;
    width: 32px;
}

/* Use Utopia for column gaps */
.wp-block-columns {
    column-gap: var(--space-m-l) !important;
}

/* Animations for lazy loaded images */
img[data-lazy-type="image"] {
    transition: transform 0.25s, opacity 0.25s;
}
img[data-lazy-type="image"].lazy-hidden {
    transform: translateY(50px);
    opacity: 0;
}
img[data-lazy-type="image"].lazy-loaded {
    transform: translateY(0);
    opacity: 1;
}

/* Footer styling */
footer .has-text-align-right {
    max-width: unset;

    @media screen and (max-width: 767px) {
        text-align: left;
    }
}
.footer-legal-list {
    @media screen and (max-width: 767px) {
        align-items: unset !important;
        flex-direction: column;
        gap: 0.5rem;
        justify-content: unset;
    }
}

/* Custom element styles and overrides */
body .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) .theme-tag {
    margin-left: 0 !important;
    width: min-content;
}

.custom-banner__inner {
    @media screen and (max-width: 781px) {
        margin-bottom: 0 !important;
    }
    @media screen and (min-width: 782px) {
        margin-inline-end: var(--space-xl) !important;
        max-width: 550px;
    }
}

.wp-block-quote {
    border-radius: 0;
}
.wp-block-quote p {
    font-style: normal !important;
}
.wp-block-quote cite {
    font-weight: bold;
}

.wp-block-columns h1.wp-block-post-title {
    position: sticky;
    top: var(--space-l-xl);
}

.archive .wp-block-post-featured-image {
    aspect-ratio: 4 / 3 !important;
    padding-bottom: 0 !important;
}
.wp-block-post-featured-image img {
    border-radius: 0 !important;
}