/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/* end of reset */

/* GENERAL REFERENCE

FONTS
Header font: Spectral
Body font: Lato

CONTENTS
1. General styling - body
2. Headings typography - h1, h2
3. General links
4. Navbar - inc. main navbar
5. Header - inc. home link logo & BG image
6. Main for each page
7. Footer - inc. opening times, bottom nav & copyright
8. Media queries

*/

/* --------------------
1. START OF STYLING
-------------------- */

/* CUSTOM CSS COLOURS */
:root {
    --default: #000;
    --body-bg-links: #88291a;
    --main-bg: #f9f5e6;
    --headings: #0d4f0d;
    --border-outline: 3px solid #cc8c35;
    --highlight: #f0c480;
    --shadow: 5px 5px 3px #bbb8ac;
}

body {
    box-sizing: border-box;
    background-color: var(--body-bg-links);
    background: url(images/illustrations/creamtile.gif) top left repeat-x;
    background-color: var(--body-bg-links);
    font-family: Lato, Arial, Helvetica, 'Gill Sans', Optima, sans-serif;
    color: var(--default);
    font-size: 1.3em;
    line-height: 1.4;
}

/* --------------------
2. HEADINGS TYPOGRAPHY
-------------------- */
h1, h2, .about figcaption {
    font-family: Spectral, Palatino, Baskerville, Georgia, 'Times New Roman', Times, serif;
    line-height: 1.1;
    font-weight: 600;
    color: var(--headings);
}

h1 {
    font-size: 2em;
    font-size: calc(2em + 2.5vw);
}

h2 {
    font-size: 1.3em;
    font-size: calc(1.3em + 1vw);
}

header h2 {
    padding: 0.5em 0;
}

/* --------------------
    3. GENERAL LINKS
-------------------- */
/* adding a transition speed */
a:link, a:visited {
    color: var(--body-bg-links);
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
}

/* background colour for address and main links */
address a:hover, main a:hover, footer a:hover {
    background-color: var(--highlight);
}

a:hover {
    color: var(--default);
}

a:active, a:focus {
	color: #e10404;
}

/* --------------------
    4. NAVBAR
-------------------- */
/* positioning the skipnav */	
.skip {	
    position: absolute;	
    top: 0px;
}
	
    
/* container for Primary nav and contact details */
body div:first-child {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: var(--main-bg);
    padding: 1em 0.5em;
}

/* address container for just the contact details */
div address {
    padding: 1.2em 0 0 1em;
    font-size: 0.8em;
}

/* style the menu */
/* hamburger menu adapted from https://code-boxx.com/simple-responsive-pure-css-hamburger-menu/ */
nav label {
    color: var(--body-bg-links);
    font-size: 1.3em;
    text-decoration: underline;
}

/* hide the checkbox */
#menu {
    display: none;
}

/* keep the nav items hidden on mobile view */
nav[aria-label="Primary"] ul { 
    display: none;
}

/* display the Primary nav items when menu is clicked, including php smartnav li */
nav[aria-label="Primary"] input:checked ~ ul {
    display: block;
}

nav[aria-label="Primary"] input:checked ~ ul li {
    margin: 1.2em 0 0;
}

/* hide the illustrated icons when menu is clicked  */
nav[aria-label="Primary"] ul li a:link img, nav[aria-label="Primary"] ul li a:visited img,
nav[aria-label="Primary"] ul li img {
    display: none;  
}

/* this transform also applies to Home main illustrated icons */
ul li a:link:hover, ul li a:visited:hover {
    transform: scale(1.2);
}

/* --------------------
     5. HEADER
-------------------- */
/* - - - - Header with tile background - - - -  */
header {
    background-image: url(images/illustrations/transparenttile.png);
    background-size: cover;
    background-color: var(--main-bg);
    text-align: center;
    padding: 1em;
    border-top: var(--border-outline);
}

/* Clickable Jenkins' logo that links to homepage */
header img {
    width: 40%;
    height: auto;
}

header div {
    margin: 1.2em 0;
}

/* greeting */
header p {
    font-weight: 600;
    color: #88291a;
    background-color: var(--highlight);
    margin: 1.3em 0;
    padding: 0.4em;
    border-radius: 25px;
}

/* --------------------
        6. MAIN
-------------------- */
main {
    width: 90%;
    max-width: 1200px;
    background-color: var(--main-bg);
    margin: 2em auto;
    padding: 1em 0;
    outline: var(--border-outline);
}

/* - - - -  MAIN TEXT ALIGNMENT FOR ALL PAGES - - - - */
main > h2, .contact section h2, .accessibility main ul {
    width: 75%;
    margin: 1.5em auto 0;
}

main > p, section > p, section address {
    width: 75%;
    margin: 1.5em auto;
}

main > h2 + p {
    margin-top: 1em;
}

/* - - - - HOME, ABOUT, CONTACT MAP & CONTACT MAIN IMAGES - - - - */
main > img, iframe {
    display: block;
    width: 75%;
    height: auto;
    margin: 1.5em auto;
}

/* - - - - HOME, PRODUCTS, ABOUT, & COMMUNITY FIGURE GALLERIES - - - - */
figure {
    width: 75%;
    margin: 2em auto;
}

figure h2, figure p, .about figcaption {
    margin: 0.4em 0;
}

figure img {
    width: 100%; 
    height: auto;
}

/* - - - - PRODUCTS ETHICS CARD & COMMUNITY EVENTS CAPTIONS - - - - */
.products figcaption:last-of-type, .community figcaption {
    margin-bottom: 1em;
}

/* - - - - HOME PAGE - - - -  */
/* styling the News and Articles */

/* All articles */
.home figure {
    box-shadow: var(--shadow);
    padding: 1em;
}

/* News article */
.home figure:first-of-type {
    background-color: var(--highlight);
}

/* Gamekeeper and Recipe articles */
.home figure:nth-of-type(2) h2, .home figure:nth-of-type(3) h2 {
    color: var(--highlight);
} 

.home figure:nth-of-type(2) p, .home figure:nth-of-type(3) p {
    color: var(--main-bg);
}

/* Gamekeeper article */
.home figure:nth-of-type(2) {
    background-color: var(--body-bg-links);
}

/* Recipe article */
.home figure:nth-of-type(3) {
    background-color: var(--headings);
}

/* List of Links with illustrations */
.home main ul {
    width: 75%;
    margin: 1.5em auto;
}

.home main ul li a:link, .home main ul li a:visited {
    display: block;
    padding: 1em;
    text-align: center;
}

.home main ul li a:link img, .home main ul li a:visited img {
    display: block;
    width: 50%;
    height: auto;
    margin: 0 auto;
    padding-bottom: 0.5em;
}

/* - - - - PRODUCTS PAGE - - - -  */
/* adding card effect to product figures */
.products figure {
    background-color: #fffdf3;
    box-shadow: var(--shadow);
    padding: 1em;
}

/* ethics card */
.products figure:last-of-type {
    background-color: var(--highlight);
}

/* - - - - ABOUT PAGE - - - -  */
/* Our Team gallery */
.about figure img {
    border-radius: 50%;
    width: 60%;
}

/* center-aligning Team gallery captions */
.about figure {
    text-align: center;
}

/* - - - - COMMUNITY PAGE - - - -  */
/* adding top border to events figures, also applies to Contact sections */
.community figure, .contact section {
    border-top: var(--border-outline);
}

/* event times */
.community h2 + p {
    font-weight: 600;
}

/* - - - - CONTACT PAGE - - - -  */
/* aligning Contact hours table */
.contact main table {
    width: 75%;
}

/* positioning section icons */
section h2:before {
    width: 1.2em;
    padding-right: 0.3em;
    display: inline-block;
}

section:nth-of-type(1) h2:before {
    content: url(images/icons/map-icon.svg);
}

section:nth-of-type(2) h2:before {
    content: url(images/icons/clock-icon.svg);
}

section:nth-of-type(3) h2:before {
    content: url(images/icons/contact-icon.svg);
}

section:nth-of-type(4) h2:before {
    content: url(images/icons/events-icon.svg);
}

/* - - - - ACCESSIBILITY PAGE - - - -  */
/* Styling for the Information About Our Website's Accessibility section */
.accessibility main ul {
    width: 65%;
}

.accessibility main ul li {
    padding: 0.5em 0;
    list-style-type: disc;
}

 /* - - - - ERROR PAGE - - - -  */
.error main {
    text-align: center;
}

.error main p, .error ul {
    margin: 1.5em auto;
    width: 75%;
}

.error main p {
    text-align: left;
}

.error ul {
    text-align: left;
    display: inline-block;
}

.error ul li {
    margin: 1em;
}

/* --------------------
        7. FOOTER
-------------------- */
footer {
    background-image: url(images/illustrations/transparenttile.png);
    background-size: cover;
    background-color: var(--main-bg);
    padding: 1em;
}

footer p {
    margin-top: 10px;
}

/* table opening times (also used in Contact Page) */
table {
    margin: 1em auto;
    text-align: left;
}

table caption {
    font-size: 1.2em;
    margin-bottom: 1em;
}

table caption {
    color: var(--headings);
}

table caption, td:first-of-type {
    font-weight: 600;
}

td {
    padding: 0.5em;
}

/* footer nav */
footer nav ul {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    font-weight: 600;
    margin-top: 1em;
  }

footer nav ul li {
    padding: 0.7em;
  }

/* copyright & coursework link */
footer p {
    font-size: 0.8em;
    text-align: center;
    padding: 1em 0 0.2em;
  }

/* --------------------
    8. MEDIA QUERIES
-------------------- */
/* = = = = 700px = = = = */
@media (min-width: 700px) {

    /* adding Flex to the Header */
    header {
        display: flex;
        justify-content: center;
    }

    header img {
        width: 60%;
    }

    header div, h1 {
        align-self: center;
    }

    /* Adding Flex to the Home illustrated links & About profile images */
    .home main ul, .about main div {
        display: flex;
        align-items: baseline;
    }

    /* placing the Home illustrated links */
    .home main ul {
        grid-area: 4 / 1 / 5 / 3;
    } 

    /* aligning the About profile images */
    .about main div {
    margin: 0 5em;
    }
}

/* = = = = 750px = = = = */
@media (min-width: 750px) {

    /* repositioning the skipnav */
    .skip, .skip:focus, .skip:active {
        display: block;
        position: absolute; 
        top: 0px;
        left: 0px;
    }   

    /* hiding menu label in Primary nav */
    nav label { 
        display: none; 
    }

    /* ensuring flex nav appears regardless of menu checkbox state */
    nav[aria-label="Primary"] input:checked ~ ul {
        display: flex;
        flex-direction: row;
        align-items: baseline;
    }

    nav[aria-label="Primary"] input:empty ~ ul {
        display: flex;
        flex-direction: row;
        align-items: baseline;
    }

    /* stacking the Primary nav list contents, including php smartnav li */
    nav[aria-label="Primary"] ul li a:link, nav[aria-label="Primary"] ul li a:visited,
    nav[aria-label="Primary"] ul li  {
        display: block;
        font-size: 1.1em;
        text-align: center;
        text-decoration: none;
    }

    nav[aria-label="Primary"] ul li a:link img, nav[aria-label="Primary"] ul li a:visited img,
    nav[aria-label="Primary"] ul li img {
        display: block;
        margin: 0 auto;
        width: 30%;
        height: auto;
        padding: 0.4em;
    }

    /* realigning the address next to the Primary nav */
    address {
        align-self: center;
    }
}

/* = = = = 800px = = = =  */
@media (min-width: 800px) {

    /* 2 col grid setup for Home, Contact page, & Product page */
    .home main, .products main div, .contact main {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        margin: 2em auto;
    }

    /* reducing the width of the second two Home articles */
    .home figure:nth-of-type(2), .home figure:nth-of-type(3) {
        width: 65%;
    }

    /* placing the Home news article */
     .home figure:first-of-type {
        grid-area: 2 / 1 / 3 / 3;
    }
     
    /* setting Product card width */
    .products main div {
        width: 80%;
    }

    /* placing the Products ethics card */
    .products figure:last-of-type {
        grid-area: 4 / 1 / 5 / 3;
    } 

    /* vertically aligning the Home and Contact intro paragraphs */
    .home main > p, .contact main > p {
        align-self: center;
    }
 
    /* aligning the Home news figure, Products ethics card & Community event captions/imgs side by side */
    .home figure:first-of-type, .products figure:last-of-type, .community figure {
        display: flex;
        gap: 1em;
        align-items: center;
    }

    /* adjusting the Products ethics card image width */
    .products figure:last-of-type img {
        width: 50%;
        align-self: flex-end;
    }

    /* adjusting the Product ethics card caption width */
    .products figure:last-of-type figcaption {
        max-width: 50%;
    }

    /* adjusting the margin and widths of Community event images */
    .community figure img {
        margin-top: 1em;
        width: 50%;
    }

    /* adjusting the Community event widths */
    .community figcaption {
        width: 70%;
    }

    /* changing size and position of Error page image */
    .error main {
        position: relative;
    }

    .error main img {
        width: 20%;
        position: absolute;
        top: 40px;
        right: 20px;
    }
}

/* = = = = 1200px = = = =  */
@media (min-width: 1200px) {
    /* 3 col Grid setup for Product page */
    .products main div {
        grid-template-columns: repeat(3, 1fr);
    }

    /* replacing the Products ethics card */
    .products figure:last-of-type {
        grid-area: 3 / 1 / 4 / 4;
    } 
}