/* === PAGE HERO === */
header {
    max-width: 100%;
    margin-bottom: 32px;
	padding: 25px 0;

	color: white;
	background-color: var(--main-colour);
	background:
		linear-gradient(var(--main-colour-transparent), var(--main-colour-transparent)),
		url('../imgs/Strikers.jpg') no-repeat fixed center / cover;

    display: flex;
    flex-flow: row wrap;
    justify-content: center;
	align-items: center;
    flex-shrink: 0;
	column-gap: 25px;
	row-gap: 12px;
}

.quote-column {
	display: flex;
	flex-flow: column nowrap;
	align-items: center;
	row-gap: 12px;

	margin: 0 auto;
}

header > a {
	margin-left: 16px;
}

header > h1 {
	font-size: 50px;
}

header img {
    height: 100px;
}

header .quote {
	max-width: 600px;
	min-width: 400px;
}

header .quote img {
	width: 32px;
	height: 32px;
}

header .citation {
	font-weight: bold;
	font-size: 20px;
	text-align: right;
	margin-right: 60px;
	margin-bottom: 0;
}

header > .flex-row {
	width: 800px;

	justify-content: center;
	align-items: center;
	row-gap: 10px;
}

@media (min-width: 767px) {
	header.debs {
		background-color: var(--main-colour);
		background: 
			url('../imgs/Debs_cutout.webp') no-repeat bottom right / contain,
			linear-gradient(var(--main-colour-transparent), var(--main-colour-transparent)),
			url('../imgs/Strikers.jpg') no-repeat fixed center / cover;
	}

	.quote-column > * {
		margin-right: calc(max(0px, (1470px - 100vw) / 2));
	}

	header > .flex-row {
		justify-content: flex-start;
	}
}


/* === FOOTER === */
@font-face {
	font-family: "Modules";
	src: url('../fonts/modules.ttf');
}

footer {
    min-height: 10em;
    padding: 16px 16px 0;
    margin-top: 48px;

    text-align: center;

    color: white;
    background-color: var(--main-colour);
	background:
		linear-gradient(var(--main-colour-transparent), var(--main-colour-transparent)),
		url('../imgs/Strikers.jpg') no-repeat fixed center / cover;
}

footer a:link, footer a:visited {
    color: white;
	text-decoration: none;
	transition: color 0.2s ease-out;
}

footer a:hover {
	color: var(--red);
}

footer a:link svg, footer a:visited svg {
	fill: white;
	transition: fill 0.2s ease-out;
}

footer a:hover svg {
	fill: var(--red);
}

footer .soc-med-links {
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	column-gap: 16px;

	font-family: "Modules";
	font-size: 24px;
}



/* === HEADER MENU === */
nav {
	width: 100%;
	position: sticky;
	top: 0;
	z-index: 1000;

	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	column-gap: 10px;

	font-family: "work-sans", sans-serif;
	color: black;
	background-color: var(--base);
	text-transform: uppercase;
	font-weight: bold;

	padding: 6px 0;
}

nav .line {
	height: 0;
    flex-grow: 1;
    border: 3px solid black;
    align-self: center;
	margin-left: 15px;
}

nav.scrolled {
	filter: drop-shadow(0 0.15em 0.5em var(--main-colour));
}

#top-links, #top-buttons {
    display: flex;
    flex-flow: row wrap;
    column-gap: 5px;
}

#top-links {
    column-gap: 15px;
}

#top-buttons {
    margin-right: 15px;
}

nav a {
    color: black;
    text-decoration: none;
	transition: color 0.2s ease-out;
}

#top-links a:hover {
    color: var(--red);
}

#top-buttons a {
    border: 2px solid black;
    width: 128px;
    padding: 5px;
    text-align: center;
    transition: color 0.2s ease-out, border 0.2s ease-out;
}

#top-buttons a:hover {
    color: var(--red);
	border-color: var(--red);
}

#hamburger {
    display: none;
}

@media (max-width: 766px) {
    #top-links {
        display: none;
        order: 2;
    }

    #top-buttons {
        display: none;
        order: 3;
    }

    #hamburger {
        display: flex;
        flex-flow: row nowrap;
        column-gap: 5px;
        align-items: center;
        align-self: flex-end;

        color: black;
        margin-right: 24px;
        border: 2px solid black;
        padding: 6px 10px;
        cursor: pointer;

        font-weight: bold;
        font-size: 18px;

        order: 1;
    }

    #hamburger p {
        margin: 0;
        line-height: 1;
    }

    #hamburger > p:last-child {
        font-size: 26px;
    }

    nav {
        transition: background-color 0.2s linear;
    }

    nav.active {
        height: 100%;
        background-color: var(--base);

        flex-flow: column nowrap;
        justify-content: flex-start;
        align-items: center;
        row-gap: 12px;
    }

    nav.active #top-links, nav.active #top-buttons {
        display: flex;
        flex-flow: column nowrap;
        width: 90%;
        max-width: 400px;
        margin: 0;
        padding: 0;
        row-gap: 12px;

        font-size: 24px;
        text-align: center;
    }

    nav.active #top-links a, nav.active #top-buttons a {
        width: 100%;
        padding: 8px;
        border: 2px solid black;
        transition: color var(--anim-time) ease-out, background-color var(--anim-time) ease-out;
    }

	nav.active .line {
		display: none;
	}
}