/* 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, also Sticky Header */
	scroll-margin-top: 4rem;
}

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

:root {
	--body-font-color: #222222; /* set this and use currentColor elsewhere */
	--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; /* Claude AI suggested #005fcc */
}
html {
  scroll-behavior: smooth; /* Notes: Scroll Behavior */
  scroll-padding-top: 2rem;
  scroll-padding-bottom: 2rem;
}
body {
	background-color: #ffffff;
	color: var(--body-font-color);
	display: grid;
	font: 100%/150% Arial, Helvetica, sans-serif;
	grid-template: auto 1fr auto / 1fr;
	grid-template-areas: 
		"header"
		"main"
		"footer";
	min-height: 100vh; /*sticky footer, also for rows in grid template: auto 1fr auto */
}
header, .main-layout, footer {
	padding: 0 1rem;
}
/* ====================== BASE STYLES / TYPOGRAPHY ===================== */

a {
	text-decoration-line: underline; /* required to declare thickness */
	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;
}
a[target="_blank"]:not(.icon)::after { /* Notes: Background Image After External Link */
		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;
	padding: 2rem 0 0.5rem; /* if adjusting this, see grid items with no h2 in Utilities */
}
h3 {
	font-size: 1.1rem;
	padding: 1rem 0 0;
}
p { 
	padding: 0.5rem 0; 
}
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 ============================ */

.u-break-url { /* Notes: Break URL */
	word-break: break-all; 
}

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


.icon { /* for social media */
	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-bottom: 0.4rem;
	padding-top: 0.4rem;
}
.is-bulleted-list {
	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 */
	padding-left: 0;
}
.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-bottom: 2px solid transparent;
	}
	& a, & a.is-current-page {
		display: block;
		min-height: 24px; /* WCAG 2.2 min target size 24 x 24 px */
		min-width: 24px;
		padding: 0.1rem 0.5rem;
	}
	& a.is-current-page {
		border-color: var(--site-link-visited);
		color: var(--site-current);
	}
	& 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.is-page-disabled {
		cursor: default;
  		pointer-events: none; /* Prevents clicking */
	}
}
.print-note {
	font-style: italic;
	margin-top: 1rem;
}
.note {
	font-style: italic;
}
.has-qr-code {
	margin-top: 1.25rem;
}
.has-qr-code div {
	max-width: 10rem;
}
.has-qr-code img {
	border: 1px solid currentColor;
}
.status-404-403 {
	padding-top: 1.75rem;
	font: 1.3rem  Monaco, "Courier New", monospace;
}

/* ========================= HEADER ========================= */

header { /* need to design this for small screen size */
    align-items: center;
	border-bottom: 1px solid var(--body-font-color);
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	grid-area: header;
	justify-content: center; /*centers header items*/
	padding-top: 0.5rem; /* left and right padding have been set in BASE LAYOUT */
	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)
}
.main-nav {  /* for mobile apply margin top to the links, remove it at break. maybe make a full border? */
	font-size: 1.3rem;
	& ul {
		display: flex; /* Notes: Nav Horizontal Centered Wraps */
		flex-wrap: wrap; /* Notes: Nav Horizontal Centered Wraps */
		justify-content: space-around; /* Notes: Nav Horizontal Centered Wraps */
	}
	& a {
		display: block;
		padding: 0.2rem 0.4rem;
		margin-top: 4px;
		min-height: 24px; /* WCAG 2.2 min target area 24 x 24 px */
		text-decoration: none;
		border-bottom: 2px solid transparent; /* white partially obscures focus outline */
		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.is-current {
		border-bottom-color: var(--body-font-color);
		color: var(--site-current);
	}
}
a.is-disabled { /* for nav, banner, sitemap. Pagination has its own */
		cursor: default;
  		pointer-events: none; /* Prevents clicking */
	}
.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;
		color: #222222; /* #212b32;  #0b0c0c;  Gov UK Design System focus colors */
		background-color: #ffeb3b; /* uk.ogv #ffdd00; */
		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 {
		 width: 100%; /* 100% will fill the width of the container */
	}
}
.has-artwork figure {
	margin-top: 0;
	padding-top: 0;
	padding-bottom: 5rem;
}
.has-artwork figure:last-of-type {
		padding-bottom: 2rem;
}
.has-artwork img {
width: 100%;
max-width: 1000px;
max-height: 95vh; /* previously 850px; also max-height: 90dvh; Dynamic viewport height - excludes mobile browser UI. max-height: 90svh; Small viewport height - includes mobile browser UI */
object-fit: contain; /* Key: prevents stretching */
object-position: left top; /* or 'left', 'right', etc. */
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";
}
.item1 { grid-area: item1; }
.item2 { grid-area: item2; }
.item3 { grid-area: item3; }
.item4 { grid-area: item4; } /* these are applied only if grid item exists */

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

footer {
	border-top: 1px solid var(--body-font-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);
	}
}
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) {
	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; }
	.has-artwork figure { padding-bottom: 12rem; }
	.has-artwork figure:last-of-type { padding-bottom: 4rem; }
}
@media only screen and (width >= 900px) {
	.main-layout { 
		column-gap: 2.5rem; 
		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"
		"item4 item3";
	}
	.main-layout--two-items {
		grid-template: auto / 1fr 1fr;
		grid-template-areas: 
		"item1 item2";
	}
	.main-layout--one-item { /*could use not */
		column-gap: 0; 
		grid-template: 1fr / 1fr;
		grid-template-areas: "item1";
	}
	.main-layout--home .item2 { padding-top: 6.5rem; } /* 2 columns, grid items with no h2 */
	.main-layout--home .item3 { padding-top: 3rem; }
	.main-nav ul li:not(:last-child) a {
  		margin-right: 0.5rem;
	}
	.main-layout--about .item4 { padding-top: 3rem; }
}
@media only screen and (width >= 1200px) {
    .main-layout {
		column-gap: 4rem; 
        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;
	}
	header, footer { 
		padding-left: calc(((100vw - 1200px) / 2) + 0.9rem); /* + 0.9rem leaves a margin at the break and lines up with 1rem margin of .main-layout, see Global Variables & Base Layout section */
	} 
}