/*** ----- adjust colours for UoY branding colour pallette */

:root {
    --md-primary-fg-color: #001E82;
    --md-accent-fg-color: #3C0032;
    --md-code-hl-function-color--light: #a846b91a;
    --md-admonition-essential: #00C2DE; 
    --md-admonition-essential--light: #00C2DE1a;
    --md-admonition-recommended: #78BF26;
    --md-admonition-recommended--light: #78BF261a;
    --md-admonition-principle: #E31A82;
    --md-admonition-principle--light: #E31A821a;
    --md-admonition-casestudy: #FD5000;
    --md-admonition-casestudy--light: #FD50001a;
    --md-admonition-ai: #7e56c2;
    --md-admonition-ai--light: #7e56c21a;
}

.md-nav__item .md-nav__link--active {
    color: var(--md-accent-fg-color);
    font-weight: bold;
}

/*** ----- Remove Announcement banner margin */
.md-banner__inner {
    margin: 0;
}

/*** -----General element styling */
#customlogo {
    text-align: right;
    height: 50px;
    width: auto;
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Roboto Condensed", "Inter", sans-serif;
}

.md-typeset h1, .md-typeset h2 {
    font-weight: 500;
}

.md-typeset h1 {
    color: var(--md-accent-fg-color)
}

.md-typeset h4 {
    font-size: 1.15em;
}

a {
    text-decoration: underline;
}

nav a {
    text-decoration: none;
}

.md-typeset a {
    padding: 0.15em;
    color: var(--md-accent-fg-color);
}

.md-typeset .md-button.toggle {
    color: var(--md-accent-fg-color);
}

.md-typeset a:focus,
.md-typeset a:hover,
.md-typeset .md-button.toggle:focus,
.md-typeset .md-button.toggle:hover {
    background-color: var(--md-accent-fg-color);
    color: var(--md-accent-bg-color);
}

.md-typeset .admonition, .md-typeset details, .md-typeset details * {
    font-size: inherit;
}

img {
    max-width: 100%;
}

/*** --- 2 columns flex layout */
/* Details: one column expands to fit, the other has a fixed width */
.flexcols {
    display: flex;
    flex-wrap: wrap;
}

/* default: columns equally distributed */
.flexcols > * {
    flex: 1;
    min-width: 150px;
    margin-right: 10px;
}

/* 65% width: col65 expands x2 more than other column */
.flexcols>.col65 {
    flex: 2;
    min-width: 300px;
}

/* 75% width: col75 expands x3 more than other column */
.flexcols>.col75 {
    flex: 3;
    min-width: 300px;
}

/*** ----- grid cards styling */

/* default -> hide bullets in lists inside card */
.grid.cards ul li {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

/* override -> show bullets in lists inside card */
.grid.cards.show-bullets>ul>li>ul>li {
    list-style-type: disc;
    margin-left: 1.25em;
}

.grid.cards hr {
    border-bottom: 0.05rem solid var(--md-accent-fg-color)
}

/* Centre an image (add img within <p class="centre-image">) */
.grid.cards ul li p.centre-image {
    text-align: center;
}

/*** ---- images & figures */

/* centre images: put image inside the div*/
div.centered-image {
    display: flex;
    justify-content: center;
}

/* remove margins from figure*/
figure.no-margin,
figure.no-margin>p {
    margin: 0;
}

/*** ----- tabbed content styling */

/* box containing tabbed content */
.md-typeset .tabbed-set {
    border-radius: 0.5rem;
    background: var(--md-code-bg-color);
    padding: 0.5rem;
}
    /* tab */
    .md-typeset .tabbed-labels>label {
        border-radius: 0.5rem 0.5rem 0 0;
        margin-right: 0.1rem;
        background: var(--md-default-bg-color);
        color: var(--md-default-fg-color);
    }

        /* link/text within tab */
        .md-typeset .tabbed-labels>label a {
            text-decoration: none;
            border-radius: 0.5rem 0.5rem 0 0;
        }

        .md-typeset .tabbed-labels>label>[href]:first-child {
            background: var(--md-default-bg-color);
            color: var(--md-default-fg-color);
        }
        
        .md-typeset .tabbed-labels>label>[href]:first-child:hover,
        .md-typeset .tabbed-labels>label>[href]:first-child:focus {
            background: var(--md-default-fg-color);
            color: var(--md-default-bg-color);
        }
            
    /* content area for a specific tab     */
    .md-typeset .tabbed-content {
        padding: 0.5rem;
    }

/*** Custom admonitions (colour variables at top)*/

/* Site design principles: essential */
:root {
    --md-admonition-icon--essential: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M1 12C1 5.925 5.925 1 12 1s11 4.925 11 11-4.925 11-11 11S1 18.075 1 12zm16.28-2.72a.75.75 0 0 0-1.06-1.06l-5.97 5.97-2.47-2.47a.75.75 0 0 0-1.06 1.06l3 3a.75.75 0 0 0 1.06 0l6.5-6.5z"/></svg>')
}
.md-typeset .admonition.essential,
.md-typeset details.essential {
border-color: var(--md-admonition-essential);
/* var(--md-code-hl-string-color); */
}
.md-typeset .essential > .admonition-title,
.md-typeset .essential > summary {
background-color: var(--md-admonition-essential--light);
/* var(--md-typeset-ins-color); */
}
.md-typeset .essential > .admonition-title::before,
.md-typeset .essential > summary::before {
background-color: var(--md-admonition-essential);
-webkit-mask-image: var(--md-admonition-icon--essential);
        mask-image: var(--md-admonition-icon--essential);
}

/* Site design principles: recommended */
:root {
    --md-admonition-icon--recommended: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M17.28 9.28a.75.75 0 0 0-1.06-1.06l-5.97 5.97-2.47-2.47a.75.75 0 0 0-1.06 1.06l3 3a.75.75 0 0 0 1.06 0l6.5-6.5z"/><path fill-rule="evenodd" d="M12 1C5.925 1 1 5.925 1 12s4.925 11 11 11 11-4.925 11-11S18.075 1 12 1zM2.5 12a9.5 9.5 0 1 1 19 0 9.5 9.5 0 0 1-19 0z"/></svg>')
 }
.md-typeset .admonition.recommended,
.md-typeset details.recommended {
    border-color:  var(--md-admonition-recommended);
    /* var(--md-code-hl-keyword-color); */
}
.md-typeset .recommended > .admonition-title,
.md-typeset .recommended > summary {
    background-color: var(--md-admonition-recommended--light);
    /* var(--md-code-hl-color--light); */
}
.md-typeset .recommended > .admonition-title::before,
.md-typeset .recommended > summary::before {
    background-color: var(--md-admonition-recommended);
    -webkit-mask-image: var(--md-admonition-icon--recommended);
            mask-image: var(--md-admonition-icon--recommended);
}

/* Site design principles: principles box for guides pages */
:root {
    --md-admonition-icon--principle: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M16.36 14c.08-.66.14-1.32.14-2 0-.68-.06-1.34-.14-2h3.38c.16.64.26 1.31.26 2s-.1 1.36-.26 2m-5.15 5.56c.6-1.11 1.06-2.31 1.38-3.56h2.95a8.03 8.03 0 0 1-4.33 3.56M14.34 14H9.66c-.1-.66-.16-1.32-.16-2 0-.68.06-1.35.16-2h4.68c.09.65.16 1.32.16 2 0 .68-.07 1.34-.16 2M12 19.96c-.83-1.2-1.5-2.53-1.91-3.96h3.82c-.41 1.43-1.08 2.76-1.91 3.96M8 8H5.08A7.923 7.923 0 0 1 9.4 4.44C8.8 5.55 8.35 6.75 8 8m-2.92 8H8c.35 1.25.8 2.45 1.4 3.56A8.008 8.008 0 0 1 5.08 16m-.82-2C4.1 13.36 4 12.69 4 12s.1-1.36.26-2h3.38c-.08.66-.14 1.32-.14 2 0 .68.06 1.34.14 2M12 4.03c.83 1.2 1.5 2.54 1.91 3.97h-3.82c.41-1.43 1.08-2.77 1.91-3.97M18.92 8h-2.95a15.65 15.65 0 0 0-1.38-3.56c1.84.63 3.37 1.9 4.33 3.56M12 2C6.47 2 2 6.5 2 12a10 10 0 0 0 10 10 10 10 0 0 0 10-10A10 10 0 0 0 12 2Z"/></svg>')
}
.md-typeset .admonition.principle,
.md-typeset details.principle {
border-color:  var(--md-admonition-principle);
/* var(--md-code-hl-function-color) */
}
.md-typeset .principle > .admonition-title,
.md-typeset .principle > summary {
background-color: var(--md-admonition-principle--light);
/* var(--md-code-hl-function-color--light) */
}
.md-typeset .principle > .admonition-title::before,
.md-typeset .principle > summary::before {
background-color: var(--md-admonition-principle);
-webkit-mask-image: var(--md-admonition-icon--principle);
        mask-image: var(--md-admonition-icon--principle);
}

/* Case studies: box for content pages */

:root {
    --md-admonition-icon--case-study: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9 5a4 4 0 0 1 4 4 4 4 0 0 1-4 4 4 4 0 0 1-4-4 4 4 0 0 1 4-4m0 10c2.67 0 8 1.34 8 4v2H1v-2c0-2.66 5.33-4 8-4m7.76-9.64c2.02 2.2 2.02 5.25 0 7.27l-1.68-1.69c.84-1.18.84-2.71 0-3.89l1.68-1.69M20.07 2c3.93 4.05 3.9 10.11 0 14l-1.63-1.63c2.77-3.18 2.77-7.72 0-10.74L20.07 2Z"/></svg>')
}
.md-typeset .admonition.case-study,
.md-typeset details.case-study {
border-color: var(--md-admonition-casestudy);
}
.md-typeset .case-study > .admonition-title,
.md-typeset .case-study > summary {
background-color: var(--md-admonition-casestudy--light);
}
.md-typeset .case-study > .admonition-title::before,
.md-typeset .case-study > summary::before {
background-color:var(--md-admonition-casestudy);
-webkit-mask-image: var(--md-admonition-icon--case-study);
        mask-image: var(--md-admonition-icon--case-study);
}

/* AI: box for content pages */

:root {
    --md-admonition-icon--ai: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>robot</title><path d="M12,2A2,2 0 0,1 14,4C14,4.74 13.6,5.39 13,5.73V7H14A7,7 0 0,1 21,14H22A1,1 0 0,1 23,15V18A1,1 0 0,1 22,19H21V20A2,2 0 0,1 19,22H5A2,2 0 0,1 3,20V19H2A1,1 0 0,1 1,18V15A1,1 0 0,1 2,14H3A7,7 0 0,1 10,7H11V5.73C10.4,5.39 10,4.74 10,4A2,2 0 0,1 12,2M7.5,13A2.5,2.5 0 0,0 5,15.5A2.5,2.5 0 0,0 7.5,18A2.5,2.5 0 0,0 10,15.5A2.5,2.5 0 0,0 7.5,13M16.5,13A2.5,2.5 0 0,0 14,15.5A2.5,2.5 0 0,0 16.5,18A2.5,2.5 0 0,0 19,15.5A2.5,2.5 0 0,0 16.5,13Z" /></svg>')
}
.md-typeset .admonition.ai,
.md-typeset details.ai {
border-color: var(--md-admonition-ai);
}
.md-typeset .ai > .admonition-title,
.md-typeset .ai > summary {
background-color: var(--md-admonition-ai--light);
}
.md-typeset .ai > .admonition-title::before,
.md-typeset .ai > summary::before {
background-color:var(--md-admonition-ai);
-webkit-mask-image: var(--md-admonition-icon--ai);
        mask-image: var(--md-admonition-icon--ai);
}