@import url("https://use.typekit.net/phh1jyf.css");

:root {
    /* Coracle grey */
    --mantis-coconut-milk: #F2F4F6;
    --mantis-blanched-almond: #F0EADF;

    /* Coracle blacks */
    --mantis-blueberry-jam-07: #1A2B4A12;
    --mantis-blueberry-jam-09: #1A2B4A17;
    --mantis-blueberry-jam-12: #1A2B4A1E;
    --mantis-blueberry-jam-30: #1A2B4A4C;
    --mantis-blueberry-jam-60: #1A2B4A99;
    --mantis-blueberry-jam-80: #1A2B4ACC;
    --mantis-blueberry-jam-90: #1A2B4AE6;
    --mantis-blueberry-jam: #1A2B4AFF;
    
    /* Coracle whites */
    --mantis-white-00: #FFFFFF00;
    --mantis-white-10: #FFFFFF19;
    --mantis-white-20: #FFFFFF33;
    --mantis-white-30: #FFFFFF4C;
    --mantis-white-40: #FFFFFF66;
    --mantis-white-60: #FFFFFF99;
    --mantis-white-80: #FFFFFFCC;
    --mantis-white: #FFFFFF;
    
    /* Coracle reds */
    --mantis-cooked-rhubarb: #FF675A;
    --mantis-carrot: #FF3C2B;
    --mantis-smoked-paprika: #ED1D24;
    
    /* Coracle blues */
    --mantis-blue-spirulina: #0042C6;
    --mantis-blue-margarita: #C7F1FD;
    
    /* Coracle greens */
    --mantis-broccoli: #075507;
    --mantis-seasalt-ice-cream: #10e2bf;
    --mantis-cucumber-melon: #97e49f;
    --mantis-cucumber: #72d17c;
    --mantis-kiwi: #51ba51;
    --mantis-honeydew-sorbet: #cbf0cf;
    
    /* Coracle yellows */
    --mantis-edible-gold: #695F06;
    --mantis-lemon-tart: #ffe70f;
    --mantis-english-mustard: #ebd400;
    --mantis-salted-butter: #fdf291;
    --mantis-salted-butter-30: #fdf2914c;
}

body {
    background: white;
    color: var(--mantis-blueberry-jam);
    font-family: proxima-nova, Arial, sans-serif;
    font-size: 18px;
    font-weight: 400;
    font-style: normal;
    font-stretch: normal;
}

header h1, main h1 {
    font-weight: 700;
    font-size: 1.8rem;
}

header h2, main h2 {
    font-weight: 700;
    font-size: 1.6rem;
}

header h3, main h3 {
    font-weight: 700;
    font-size: 1.4rem;
}

h4, h5, h6 {
    font-weight: 600;
    font-size: 1.2rem;
}

header a, main a {
    cursor: pointer;
    font-weight: 700;
    color: var(--mantis-blueberry-jam);
}

#main-header {
    margin: 20px auto 0 auto;
}

.logo {
    background-image: url("logo.png");
    height: 60px;
    width: 198px;
}

#main-nav a {
    color: var(--mantis-blueberry-jam);
}

.breadcrumb {
    background-color: var(--mantis-cooked-rhubarb);
    color: white;
}

.breadcrumb a {
    color: white;
}

.mediabox {
    background-color: var(--mantis-blanched-almond);
}

.vaguely_turqie {
    background-color: var(--mantis-blanched-almond);
}

/* Buttons... From Dice Toolkit */


/* .btn-like isn't bootstrap... */
.btn,
.btn-like {
    --bs-btn-font-weight: 500;
    /* border-radius is arbitrarily large */
    border-radius: 44px;
    padding: 8px 16px 8px 16px;

    font-size: 18px;
    letter-spacing: 0.5px;
    text-decoration: none;
    white-space: nowrap;

    display: inline-flex;
    justify-content: center;
    align-items: center;
}

/* Match the size of any remaining bootstrap icons to mantis ones */
.btn .bi {
    font-size: 1.25rem;
}

.btn-small {
    padding: 4px 16px;
}

.btn-big {
    padding: 11px 24px;

    font-size: 1.125rem;
    font-weight: 600;
}

.btn-toolbar .btn {
    margin-top: 2px;
}

.btn:active {
    text-decoration: none;
}

.btn:focus-visible {
    color: var(--bs-btn-focus-color);
    box-shadow: 0 0 0 3px var(--bs-btn-focus-shadow-rgb);
    border-color: var(--bs-btn-focus-border-color);
    background-color: var(--bs-btn-focus-bg);
}

.btn-check:checked + .btn:focus-visible,
.btn.active:focus-visible,
.btn.show:focus-visible,
.btn:first-child:active:focus-visible,
:not(.btn-check) + .btn:active:focus-visible {
    background-color: var(--bs-btn-active-bg);
    box-shadow: 0 0 0 3px var(--bs-btn-focus-shadow-rgb);
}

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--mantis-cooked-rhubarb);
    --bs-btn-border-color: transparent;

    --bs-btn-hover-color: white;
    --bs-btn-hover-bg: var(--mantis-carrot);
    --bs-btn-hover-border-color: transparent;

    --bs-btn-active-color: white;
    --bs-btn-active-bg: var(--mantis-smoked-paprika);
    --bs-btn-active-border-color: transparent;
    --bs-btn-active-shadow-rgb: none;

    --bs-btn-focus-color: #fff;
    --bs-btn-focus-bg: var(--mantis-cooked-rhubarb);
    --bs-btn-focus-border-color: white;
    --bs-btn-focus-shadow-rgb: var(--mantis-cooked-rhubarb);

    --bs-btn-disabled-color: var(--mantis-blueberry-jam-80);
    --bs-btn-disabled-bg: var(--mantis-blueberry-jam-12);
    --bs-btn-disabled-border-color: transparent;
}

.btn-secondary {
    --bs-btn-color: var(--mantis-blueberry-jam);
    --bs-btn-bg: var(--mantis-blueberry-jam-07);
    --bs-btn-border-color: transparent;

    --bs-btn-hover-color: var(--mantis-blueberry-jam);
    --bs-btn-hover-bg: var(--mantis-blueberry-jam-09);
    --bs-btn-hover-border-color: transparent;

    --bs-btn-active-color: var(--mantis-blueberry-jam);
    --bs-btn-active-bg: var(--mantis-blueberry-jam-12);
    --bs-btn-active-border-color: transparent;
    --bs-btn-active-shadow-rgb: none;

    --bs-btn-focus-color: var(--mantis-cooked-rhubarb);
    --bs-btn-focus-bg: var(--mantis-coconut-milk);
    --bs-btn-focus-border-color: var(--mantis-coconut-milk);
    --bs-btn-focus-shadow-rgb: var(--mantis-cooked-rhubarb);

    --bs-btn-disabled-color: var(--mantis-blueberry-jam-60);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--mantis-blueberry-jam-12);

    --bs-btn-font-weight: 400;
}

/* Badges */
.badge {
    --bs-badge-color: var(--mantis-blueberry-jam);
    --bs-badge-padding-x: 16px;
    --bs-badge-padding-y: 5px;
    --bs-badge-font-weight: normal;
    --bs-badge-font-size: 1rem;
    line-height: 1.25;
    font-weight: inherit;
}
.badge.bg-primary {
    --bs-badge-color: white;
}