/* Notes references HTML CCS Website Notes txt file. */

/* ========================= RESET / NORMALIZE ========================= */

* {
	/* Notes: Reset Selector */
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

ul {
	list-style-type: none;
}

[id] {
	/* Notes: Focus Not Obscured */
	scroll-margin-top: 4rem;
}

/* =================== GLOBAL VARIABLES & BASE LAYOUT =================== */

:root {
	--body-font-color: #222222;
	/* link states: (LoVe HAte) link visited hover (focus) active */
	--border-color: #666666;
	--page-link: #005ea2;
	--page-hover-focus: #1a4480;
	--page-active: #162e51;
	--page-visited: #54278f;
	--site-link-visited: #222222;
	--site-hover-focus: #005ea2;
	--site-active: #162e51;
	--site-current: #005ea2;
	--focus-outline: #005fcc;
}

html {
	/* scroll-behavior must be applied to html element */
	scroll-behavior: smooth;
	scroll-padding-top: 2rem;
	scroll-padding-bottom: 2rem;
}

body {
	background-color: #ffffff;
	color: var(--body-font-color);
	display: grid;
	/* font-size / line-height */
	font: 100%/150% Arial, Helvetica, sans-serif;
	grid-template: auto 1fr auto / 1fr;
	grid-template-areas:
		"header"
		"main"
		"footer";
	/*min-height for rows in grid-template: auto 1fr auto */
	min-height: 100vh;
}

body>header,
.main-layout,
body>footer {
	padding: 0 1rem;
}

/* ====================== BASE STYLES / TYPOGRAPHY ===================== */

a {
	/* required to declare thickness */
	text-decoration-line: underline;
	text-decoration-thickness: 1px;
}

a:link {
	color: var(--page-link);
}

a:visited {
	color: var(--page-visited);
}

a:hover,
a:focus {
	color: var(--page-hover-focus);
	text-decoration-thickness: 2px;
}

a:active {
	color: var(--page-active);
	text-decoration-thickness: 2px;
}

/* Notes: Selecting External Links With An Attribute Selector */
a[target="_blank"]:not(.icon)::after {
	background-image: url(../graphics/new-window.svg);
	background-repeat: no-repeat;
	background-size: 0.8rem 0.8rem;
	content: "";
	display: inline-block;
	height: 0.8rem;
	margin-left: 0.2rem;
	width: 0.8rem;
}

figcaption {
	display: block;
	font-size: 1rem;
}

figure {
	padding-bottom: 1.5rem;
	padding-top: 2rem;
}

:focus {
	outline: 2px solid var(--focus-outline);
	outline-offset: 2px;
}

h1 {
	font-size: 1.6rem;
	padding-top: 2rem;
}

h2 {
	font-size: 1.3rem;
	/* if adjusting this, see grid items with no h2 in @media only screen and (width >=900px) */
	padding: 2rem 0 0.5rem;
}

h3 {
	font-size: 1.1rem;
	padding: 1rem 0 0.5rem;
}

p {
	padding: 0.5rem 0;
	text-wrap: pretty;
}

sup {
	bottom: 0.4rem;
	/* Notes: Sup - Line Height */
	left: 0.1rem;
	font-size: 85%;
	/* Notes: Sup - Line Height */
	position: relative;
	/* Notes: Sup - Line Height */
	vertical-align: bottom;
	/* Notes: Sup - Line Height */
	padding-right: 0.2rem;
}

/* ============================ UTILITIES ============================ */

.break-url {
	/* Used on CV. Notes: Break URL */
	word-break: break-all;
}

/* ============================ COMPONENTS ============================ */

.icon {
	/* for social media icons */
	display: inline-block;
	/* needed for margin */
	margin-top: 1.25rem;

	& img {
		height: 1.5rem;
		width: 1.5rem;
		min-height: 24px;
		min-width: 24px;
		transition: transform 0.2s ease, opacity 0.2s ease;
	}

	&:hover img,
	&:focus img {
		opacity: 0.7;
		/* on white approx. #646464 */
		transform: scale(1.1);
	}

	&:active img {
		transform: scale(0.95);
	}
}

main ul {
	padding-left: 1.5rem;
}

main li {
	padding-top: 0.4rem;
	padding-bottom: 0.4rem;
}

.bulleted {
	list-style-type: disc;

	& li {
		padding-top: 0.8rem;
		padding-bottom: 0;
	}

	&>li:first-child {
		padding-top: 0.5rem;
	}

	& ul {
		list-style-type: circle;
	}
}

.bibliography {
	/* class for ul, for citation references not CV */
	padding-left: 0;
}

/* link to current page, sitemap, pagination. Main keeps it from affecting nav and footer. */
main [aria-current="page"]:link,
main [aria-current="page"]:visited {
	text-decoration-line: none;
}

main [aria-current="page"]:hover,
main [aria-current="page"]:focus,
main [aria-current="page"]:active {
	text-decoration-line: underline;
}

main .pagination [aria-current="page"] {
	text-decoration: none;
}

.pagination {
	font-size: 1.2rem;
	padding: 1rem 0 5rem 0;

	& ul {
		display: flex;
		margin: 0;
		padding: 0;
	}

	& li {
		margin: 0 0.3rem 0 0;
		padding: 0;
	}

	& a {
		text-decoration: none;
		border-top: 2px solid transparent;
		border-bottom: 2px solid transparent;
	}

	& a,
	& a[aria-current="page"] {
		display: block;
		/* WCAG 2.2 min target size 24 x 24 px */
		min-height: 24px;
		min-width: 24px;
		padding: 0.1rem 0.5rem;
	}

	& a:link,
	& a:visited {
		color: var(--site-link-visited);
	}

	& a:hover,
	& a:focus,
	& a:active {
		border-color: var(--site-link-visited);
		color: var(--site-hover-focus);
	}

	& a:active {
		color: var(--site-active);
	}

	& a[aria-current="page"] {
		border-bottom-color: var(--site-link-visited);
		color: var(--site-current);
	}
}

blockquote {
	border-left: 2px solid #ccc;
	margin: 1.5rem 0.5rem 0.5rem 0;
	padding-left: 2rem;
}

.blockquote-citation {
	padding-left: 2.2rem;
	margin-bottom: 0.6rem;
}

.note {
	font-style: italic;
	margin-top: 1rem;
}

.status-404-403 {
	/* error pages */
	padding-top: 1.75rem;
	font: 1.3rem Monaco, "Courier New", monospace;
}


.contact-form {
	margin-bottom: 1.5rem;
}

.contact-form input {
	width: 100%;
	padding: 0.5rem 0.5rem;
	font-family: inherit;
	font-size: inherit;
	border: 1px solid var(--border-color); /*#a3a3a3;*/
	border-radius: 5px;
}

.contact-form label {
	display: block;
	margin-top: 1.2rem;
	margin-bottom: 0.2rem;
	font-size: 1.1rem;
}

.contact-form textarea {
	width: 100%;
	height: 250px;
	max-height: 400px;
	resize: vertical;
	margin-bottom: 0.2rem;
	padding: 0.2rem;
	font-family: inherit;
	font-size: inherit;
	border: 1px solid var(--border-color);
	border-radius: 5px;
}

.contact-form button {
	display: block;
	font-family: inherit;
	font-size: inherit;
	padding: 0.25rem;
	margin: 0.2rem 0 0.5rem 0;
	border: 1px solid var(--border-color);
	color: var(--body-font-color);
	background-color: #e9e6e6;
	border-radius: 5px;
	transition: transform 0.2s ease, opacity 0.2s ease;

	&:hover,
	&:focus {
		opacity: 0.7;
		transform: scale(1.05);
	}

	&:active {
		opacity: 1;
		transform: scale(0.95);
	}
}

/* contact form */
[name="website"] {
	position: absolute; 
	left: -9999px;
}
/* ========================= HEADER ========================= */

body>header {
	/* need to design this for small screen size */
	align-items: center;
	border-bottom: 1px solid var(--border-color);
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	grid-area: header;
	/*centers header items*/
	justify-content: center;
	/* left and right padding have been set in BASE LAYOUT */
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
}

a.banner {
	border-bottom: 2px solid transparent;
	border-top: 2px solid transparent;
	color: var(--body-font-color);
	font-size: 1.5rem;
	text-decoration: none;
	display: block;
	padding: 0.2rem 0;
}

a:link.banner,
a:visited.banner {
	color: var(--site-link-visited);
}

a:hover.banner,
a:focus.banner,
a:active.banner {
	border-color: var(--body-font-color);
	color: var(--site-hover-focus);
}

a:active.banner {
	color: var(--site-active)
}

/* current page indicator for homepage banner */
a.banner[aria-current="page"] {
	border-bottom-color: var(--body-font-color);
}

.main-nav {
	/* for mobile apply margin top to the links, remove it at break. */
	font-size: 1.3rem;

	& ul {
		/* Notes: Nav Horizontal Centered Wraps */
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
	}

	& a {
		display: block;
		padding: 0.2rem 0.4rem;
		margin-top: 4px;
		/* WCAG 2.2 min target area 24 x 24 px */
		min-height: 24px;
		text-decoration: none;
		/* a white border partially obscures focus outline */
		border-bottom: 2px solid transparent;
		border-top: 2px solid transparent;
	}

	& ul li:not(:last-child) a {
		margin-right: 0.4rem;
	}

	& a:link,
	& a:visited {
		color: var(--site-link-visited);
	}

	& a:hover,
	& a:focus {
		border-color: var(--body-font-color);
		color: var(--site-hover-focus);
	}

	& a:active {
		border-color: var(--body-font-color);
		color: var(--site-active);
	}

	& a[aria-current="page"] {
		border-bottom-color: var(--body-font-color);
		color: var(--site-current);
	}
}

.skip-nav {
	position: fixed;
	top: -170%;
	left: 0.5rem;
	padding: 0.1rem 0.2rem;
	font-size: 1.1rem;
	font-weight: bold;
	z-index: 1000;

	&:focus {
		top: 0.5rem;
		/* #212b32;  #0b0c0c;  Gov UK Design System focus colors. uk.gov #ffdd00; */
		color: #222222;
		background-color: #ffeb3b;
		text-decoration-thickness: 2px;
	}
}

/* ========================= MAIN ========================= */

.main-layout {
	/* base + modifier structure. Notes: Grid Layout. */
	display: grid;
	grid-area: main;
	grid-template: repeat(4, auto) / 1fr;
	/* Notes: Rows Columns */
	grid-template-areas:
		"item1"
		"item2"
		"item3"
		"item4";
	padding-top: 1rem;
	padding-bottom: 3rem;

	& img {
		/* 100% will fill the width of the container */
		width: 100%;
	}

}

/* .artwork is for the <main> grid item div in Work section */
.artwork figure {
	margin-top: 0;
	padding-top: 0;
	padding-bottom: 5rem;
}

.artwork figure:last-of-type {
	padding-bottom: 2rem;
}

.artwork img {
	width: 100%;
	max-width: 1000px;
	/* Limit height to 95% of the viewport. dvh/svh are mobile viewport units. */
	max-height: 95vh;
	/* Scale image to fit while preserving aspect ratio */
	object-fit: contain;
	object-position: left top;
	height: auto;
}

.main-layout--home {
	grid-template-areas:
		"item1"
		"item2"
		"item4"
		"item3";
}

.main-layout--two-items {
	grid-template: auto 1fr / 1fr;
	grid-template-areas:
		"item1"
		"item2";
}

.main-layout--one-item {
	grid-template: 1fr / 1fr;
	grid-template-areas: "item1";
}

/* these are applied only if grid item exists */
.item1 {
	grid-area: item1;
}

.item2 {
	grid-area: item2;
}

.item3 {
	grid-area: item3;
}

.item4 {
	grid-area: item4;
}

/* ========================= FOOTER ========================= */

body>footer {
	border-top: 1px solid var(--border-color);
	grid-area: footer;
	padding-bottom: 0.5rem;
	padding-top: 0.5rem;

	& a:link,
	& a:visited {
		color: var(--site-link-visited);
	}

	& a:hover,
	& a:focus {
		color: var(--site-hover-focus);
	}

	& a:active {
		color: var(--site-active);
	}

	/* current page indication for footer links */
	& [aria-current="page"]:link,
	& [aria-current="page"]:visited {
		text-decoration-line: none;
	}

	& [aria-current="page"]:hover,
	& [aria-current="page"]:focus,
	& [aria-current="page"]:active {
		text-decoration-line: underline;
	}
}

body>footer>ul {
	display: flex;
	flex-wrap: wrap;
	padding: 0.3rem 0;

	& li {
		padding-right: 1.25rem;
	}

	& li:last-child {
		padding-right: 0;
	}
}

/* ========================= MEDIA QUERIES ========================= */

@media only screen and (width >=604px) {
	body>header {
		align-items: center;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		padding-top: 0.7rem;
	}

	.main-nav {
		margin-left: 1rem;
	}

	.main-nav a {
		margin-top: 0;
	}

	.main-layout {
		padding-bottom: 6rem;
	}

	/* .artwork is for the <main> grid item div in Work section */
	.artwork figure {
		padding-bottom: 12rem;
	}

	.artwork figure:last-of-type {
		padding-bottom: 4rem;
	}
}

@media only screen and (width >=900px) {
	.main-layout {
		column-gap: 2.5rem;
		/* 2 rows with height based on content, and 2 columns of equal-width */
		grid-template: repeat(2, auto) / repeat(2, 1fr);
		/* Notes: Rows Columns */
		grid-template-areas:
			"item1 item2"
			"item3 item4";
		padding-top: 1.5rem;
	}

	.main-layout--about {
		grid-template-areas:
			"item1 item2"
			"item3 item4";
	}

	.main-layout--two-items {
		grid-template: auto / 1fr 1fr;
		grid-template-areas:
			"item1 item2";
	}

	.main-layout--one-item {
		column-gap: 0;
		grid-template: 1fr / 1fr;
		grid-template-areas: "item1";
	}

	/* if no h2, it needs padding. Grid item is in 1st row, 2nd column */
	.main-layout--home .item2 {
		padding-top: 6.5rem;
	}

	/* if no h2, it needs padding. Grid item is in 2nd row, 1st column */
	.main-layout--home .item3,
	.main-layout--about .item3 {
		padding-top: 3rem;
	}

	.main-nav ul li:not(:last-child) a {
		margin-right: 0.5rem;
	}

}

@media only screen and (width >=1200px) {
	.main-layout {
		column-gap: 5rem;
		max-width: 1200px;
		min-width: 1200px;
		margin: 0 auto;
		/*padding-left: calc(((100vw - 1200px) / 2) + 1rem);
		padding-right: calc(((100vw - 1200px) / 2) + 1rem);*/
	}

	.main-layout--one-item {
		column-gap: 0;
	}

	body>header,
	body>footer {
		/* + 0.9rem adds a margin at the break, and lines up with 1rem margin of .main-layout, see Global Variables & Base Layout section */
		padding-left: calc(((100vw - 1200px) / 2) + 0.9rem);
	}
}