/*
    Website.css

    Styles used on all pages in the site
*/


body {
    font-family: var(--text-font-family);
    line-height: 1.5;
}

/*
    List of common website banner sizes https://www.freewebheaders.com/website-header-sizes/
    Forum post on setting the padding to the ratio of the height to the width of the image
    https://generatepress.com/forums/topic/header-same-height-of-background-image/
*/

/*  Using a 1 cell grid to overlap the background image and the header text
*/

header {
    --background-colour: hsl(  var(--colour-1-hue), 
                               var(--colour-1-saturation), 
                               calc( var(--colour-1-lightness) + 12% ) );

    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    
    padding: 0;
    /* not actually used but needed for Accessiblity checking */
    background-color: var(--background-colour);

    font-family: var(--header-font-family);
}

h1, h2, h3, h4 {
    font-family: var(--header-font-family);
}

#HeaderBackground {
    background-color: var(--background-colour);

    /* Picture was taken by Becky Blue and used with permission */
    background-image: url("../Images/MacLab-1280x267.jpg");
    background-size: cover;
    padding-top: 21%;

    background-blend-mode: multiply;
    /* position: relative; */
    
    grid-area: 1 / 1 / 1 /1;
}

#HeaderText {
    grid-area: 1 / 1 / 1 / 1;

    color: white;
    padding: 2em;
}

.ExternalLink {
    vertical-align: super;
    font-size: small;
}

.TwoColumnGrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.ThreeColumnGrid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

.ThreeColumnGrid > div {
    padding-right: 1em;
}

a {
    color: black;
}

footer {
    padding: 2em;

    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}