/* css for andrewhick.com */

html {
	font-size: 100%;
	/* this sets the size of 1rem which is around 12pt or 16px */
}

:root { /* shared variables */
	/* Default colour scheme */
	--text-main-colour: #222;
	--text-higher-contrast-colour: #111;
	--text-highest-contrast-colour: #000;
	--text-error-colour: #900;
	--background-colour: #fcf9f6;
	--background-menu-colour: #ddd;
	--background-table-colour: #fff;
	--heading-default-colour: #024;
	--link-main-colour: #724;
	--link-visited-colour: #403;
	--font-body: "Georgia","Gill Sans","Helvetica","Arial",sans-serif;
	--font-sans: "Helvetica","Arial",sans-serif;
	--font-heading-old: "Futura","Century Gothic","Gill Sans","Helvetica","Arial",sans-serif;
	
	/* WCAG lines with 16px thickness, based on 40px thick lines in the WCAG map */
	/* See https://css-tricks.com/stripes-css/ for how gradients work */
	--wcag-blue-line: linear-gradient(90deg, #36d 0px, #36d 16px);
	--wcag-red-line: linear-gradient(90deg, #903 0px, #903 4px, #fff 4px, #fff 6px, #903 6px, #903 10px,  #fff 10px, #fff 12px, #903 12px, #903 16px
	);
	--wcag-yellow-line: linear-gradient(90deg, #222 0px, #222 2px, #dd0 2px, #dd0 14px, #222 14px, #222 16px);
	--wcag-black-line: linear-gradient(90deg, #fff 0px, #fff 2px, #222 2px, #222 14px, #fff 14px, #fff 16px);
	--wcag-green-line: linear-gradient(90deg, #180 0px, #180 7px, #fff 7px, #fff 9px, #180 9px, #180 16px);
	--wcag-cyan-line: linear-gradient(90deg, #000 0px, #000 2px, #0df 2px, #0df 7px, #000 7px, #000 9px, #0df 9px, #0df 14px, #000 14px, #000 16px);
	--wcag-fuchsia-line: linear-gradient(90deg, #f6c 0px, #f6c 4px, #000 4px, #000 6px, #f6c 6px, #f6c 10px, #000 10px, #000 12px, #f6c 12px, #f6c 16px);
	--wcag-orange-line: linear-gradient(90deg, #fff 0px, #fff 2px, #e60 2px, #e60 6px, #fff 6px, #fff 10px, #e60 10px, #e60 14px, #fff 14px, #fff 16px);
}

[colour-mode="dark"] { /* experimental for colour switcher */
	--text-main-colour: #ddd;
	--text-higher-contrast-colour: #eee;
	--text-highest-contrast-colour: #fff;
	--text-error-colour: #f99;
	--background-colour: #003;
	--background-menu-colour: #225;
	--background-table-colour: #000;
	--heading-default-colour: #dd1;
	--link-main-colour: #6ff;
	--link-visited-colour: #5ee;
}

[colour-mode="light"] { /* experimental for colour switcher */
	--text-main-colour: #222;
	--text-higher-contrast-colour: #111;
	--text-highest-contrast-colour: #000;
	--text-error-colour: #900;
	--background-colour: #fcf9f6;
	--background-menu-colour: #ddd;
	--background-table-colour: #fff;
	--heading-default-colour: #024;
	--link-main-colour: #724;
	--link-visited-colour: #403;
}

[colour-mode="c64"] { /* commodore 64, low contrast */
	--text-main-colour: #B19DFF;
	--text-higher-contrast-colour: #ccf;
	--text-highest-contrast-colour: #fff;
	--text-error-colour: #900;
	--background-colour: #6952F9;
	--background-menu-colour: #76f;
	--background-table-colour: #54e;
	--heading-default-colour: #ccf;
	--link-main-colour: #fff;
	--link-visited-colour: #ccf;
}

/* .everything { experimental for colour switcher - maybe remove now?
	color: var(--text-main-colour);
	background-color: var(--background-colour);
	display: block;
} */

body {
	color: var(--text-main-colour);
	background-color: var(--background-colour);
	font-size: 1.2rem;
	font-family: var(--font-body);
	font-weight: normal;
	line-height: 1.5;
	/* accent-color: var(--heading-default-colour); sets custom checked style for radios, unsupported in Safari though */
	display: block;
  margin: auto; /* setting auto centres it horizontally */
  border: 0;
	box-sizing: border-box;
	scroll-behavior: smooth;
	overflow-wrap: break-word; /* allows long words like accessibility to reflow */
}

/* universal styles */
.bold {font-weight: bold;}
.black {color: #000;}
.white {color: #fff;}
.border {border: 2px solid #000;}
.noborder {border: 0px;}
.light-mode {background: #fcf9f6; color: #222; padding: 4px;}
.dark-mode {background: #003; color: #ddd; padding: 4px;}
.c64-mode {background: #6952f9; color: #fff; padding: 4px;} /* border-radius: 0.25rem; */

.inline {display: inline;}

/* page by page colours */
/* some background colours have low contrast so check contrast before using them for UI components*/
.purple-bg {background-color: #627;} /* purple for accessibility, palatinate */
.sunflower-bg {background-color: #db0;} /* sunflower yellow for art */
.magenta-bg {background-color: #f0f;} /* was 85e for colour, just a bright colour for now */
.workblue-bg {background-color: #26c;} /* cv (gds hospital blue), light version is 69f*/
.japanred-bg {background-color: #b02;} /* design - japan */
.tuscangreen-bg {background-color: #8b1;} /* maps (tuscan green) */
.forestgreen-bg {background-color: #074;} /* photos - road signs and nature */
.neonblue-bg {background-color: #33f;} /* games (sonic) */
.rosepink-bg {background-color: #d7a;} /* puzzles (1st puzzle is pink) */

.orange {color: #b41;} /* used on maps page */

:focus {
	/* thanks to https://craftcms.com/blog/custom-focus-indicators-with-css-variables for 2 colour effect */
	outline-style: solid;
  outline-color: transparent;
  box-shadow: 0 0 0 2px #fff,
              0 0 0 5px #c25;
	border-radius: 4px;
}

::selection {
  background: #000;
	color: #ff6;
}

span.blob { /* for palette blobs */
	display: block;
	margin: auto; /* centres it horizontally */
	width: 70px;
	height: 70px;
	border-radius: 50%;
}
span.bigswatch { /* for h1s */
	border: 2px solid var(--text-highest-contrast-colour);
	display: inline-block;
	vertical-align: middle;
	width: 4rem;
	height: 4rem;
	border-radius: 50%;
}
span.swatch { /* for colour chart table */
	display: inline-block;
	vertical-align: middle;
	width: 50px;
	height: 50px;
	border-radius: 50%;
}
span.midswatch { /* for contrast values */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 1px 0.5rem 1px 1px;
	font-size: 1.5rem;
	min-width: 32px;
	min-height: 32px;
	border-radius: 50%;
}
span.miniswatch { /* for menus */
	display: inline-block;
	vertical-align: middle;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	border: 1px solid var(--text-highest-contrast-colour);
}
span.baseline { /* for base colour in colour chart table */
	display: inline-block;
	vertical-align: middle;
	width: 8px;
	height: 50px;
}

main {
	margin: auto;
	padding: 4px 16px; /* 1st value is top and bottom, 2nd value is left and right */
	max-width: 800px;
}
 
/* div { main point of default div is to keep things within central area but it may not be needed */
div.imglink {
	display: fit-content;
}

div.bottom {
	max-width: 100%;
	color: var(--text-highest-contrast-colour);
	background-color: var(--background-menu-colour);
	vertical-align: middle;
	padding: 4px 16px;
}
div.intro { /* for intro text at the top of a page */
	color: var(--text-higher-contrast-colour);
}
div.menu {
	background: inherit;
	color: var(--text-higher-contrast-colour);
	margin: auto;
	max-width: 800px;
	padding: 0px 16px;
	border-radius: 0px;
	font-family: var(--font-sans);
	font-size: 1rem;
}
div.palette { /* used on design page for blobs */
	display: inline-block;
	text-align: center;
	font-size: 1.4rem;
	padding: 10px;
	min-width: 13%;
	max-width: 18%;
	color: var(--text-highest-contrast-colour);
	font-family: "Garamond","Georgia",serif;
	font-style: italic;
}
div.separator {
	padding: 0rem 1rem;
	height: 1rem;
}
div.submenu { /* used within pages, make background same as hr */
	background-color: var(--background-menu-colour);
	margin: auto;
	max-width: 800px;
	padding: 8px 16px;
	font-family: var(--font-sans);
	font-size: 1rem;
}
div.table { /* Used for table-style views and vertically centering text on design page */
	max-width: 770px;
	display: table;
	padding: 0px;
}
div.top1 { /* container for menu at top of page */
	max-width: 100%;
	background-color: var(--background-menu-colour);
	vertical-align: middle;
	padding: 4px 0px;
	box-shadow: 0px 4px #aaa;
}

.menu-left {
	display: inline-block;
	padding: 4px 0px;
	max-width: 75%;
}

.menu-right {
	float: right;
	padding: 0px;
	text-align: right;
	max-width: 20%;
}

div.error {
	margin: 0px;
	padding: 0px;
	max-width: 100%;
	background:inherit;
	color: var(--text-error-colour);
	font-weight: bold;
}
div.nostyle {
	margin: 0px;
	padding: 0px;
	max-width: 100%;
	background: inherit;
}

h1, h2, h3, h4 {
	color: var(--heading-default-colour);
	font-family: var(--font-sans);
	font-weight: bold;
}

h1 {
	display: inline;
	font-size: 4rem;
	max-width: 100%; /* is this needed? */
}
h2 {
	display: inline;
	font-size: 2.5rem;
}
h3 {
	margin: 1rem 0rem;
	font-size: 1.75rem;
	font-weight: normal;
}
h3.wcag {
	padding-left: 4px;
	font-weight: bold;
}
h4 {
	margin: 1rem 0rem;
	font-size: 1.5rem;
	font-weight: normal;
}

hr { /* mainly to separate h2 sections */
	background-color: #024;
	width: 100%;
	max-width: 800px;
	height: 4px;
	animation-name: hrwiden;
	animation-duration: 1s;
	border: none;
	margin-left: 0px;
	/* box-shadow: 4px 0px #000; optional addon to give hr better contrast although not essential for 1.4.11 */
}

hr.sub { /* to separate h3s within a single div */
	/* background-color: #777; */
	height: 2px;
	/* box-shadow: 2px 0px #000; */
}

p.palette {
	display: block;
	margin: 20px auto 0px auto;
}
p.centered {
	text-align: center;
}
p.inline {
	display: inline;
}

a:link		{color: var(--link-main-colour);}
a:visited	{color: var(--link-visited-colour);}
a:hover		{text-decoration-thickness: 0.2rem;}
a:active	{color:#c03; text-decoration-thickness: 0.2rem;}
a.highlight {
	color: var(--background-colour); /* was #fff */
	background-color: var(--text-highest-contrast-colour); /* was #724 */
	padding: 4px;
	border-radius: 0.5rem;
}
a.image { /* used for links containing images, to make focus indicator surround image */
	display: inline-block;
}
a.midswatch { /* used for links next to swatches to ensure spacing is appropriate */
	margin: 0rem 0.3rem;
}
.skip-link { /* stolen from https://css-tricks.com/how-to-create-a-skip-to-content-link/ */
  background: var(--background-table-colour);
  left: 5%;
  padding: 4px;
  position: absolute;
  transform: translateY(-100%);
}
.skip-link:focus {
  transform: translateY(0%);
}

/* TODO - think I need to add a surrounding element like div with fit-content to each img link. if that works I can delete this class */
/* this is currently janky */
/* a:focus img { 
	outline: 4px solid #c30;
	border-radius: 6px;
	display: inline-block;
} */

img {
	/* border-width: 0 none; */
	max-width: 100%;
	/* max-height: 100%; */
	padding: 0px;
	border-radius: 6px;
	border: 2px solid #888;
}
img.mainlogo { /* for face logo */
	margin-left: auto;
  margin-right: auto;
	padding: 0px;
	border: 0px;
	max-height: 100px;
	width: auto; /* stops it stretching */
	height: auto;
	display: inline-block;
	vertical-align: text-bottom;
}
img.minilogo { /* for logo at top of page */
	max-height: 32px;
	margin: 2px 0.3rem 2px 2px;
	vertical-align: middle;
	border: 0px;
}
img.inline {
	display: inline;
	height: auto; /* might not need this? */
	max-width: 100%;
}
img.centered {
	display: block;
  margin-left: auto;
  margin-right: auto;
	max-width: 100%;
}
img.thumb {
	display: inline;
	max-width: 11%;
	padding: 0px;
	border-radius: 50%; /* 50% makes it circular */
}
img.thumb:hover {
	border:2px solid #336;
}

table {
	font-size: 1rem;
	padding: 2px;
	width: 100%;
	vertical-align: middle;
	text-align: left;
	border-collapse: collapse;
	background-color: var(--background-table-colour);
}

td, th {
	border: 2px solid #888;
	padding: 4px 2px 2px 4px;
}

table.contrast {
	background-color: inherit;
	border-spacing: 4px;
	margin: 6px 2px;
	border-collapse: separate;
}

td.contrast, th.contrast {
	border-radius: 8px;
	border: none;
}

th.contrast {
	font-weight: normal;
	color: var(--text-highest-contrast-colour);
}

td.colcode { width: 25%; }
td.colname { width: 35%; }
td.colinfo { width: 40%; }

input {
	/* border: none; */
	border: 4px solid #333;
	border-radius: 4px;
	padding: 4px;
	background-color: var(--background-menu-colour);
	font-size: 1.2rem;
	color: var(--text-highest-contrast-colour);
}

/* suggested approach from https://moderncss.dev/pure-css-custom-styled-radio-buttons/ */
input[type="radio"] {
	width: 1.15em;
  height: 1.15em;
	color: var(--text-higher-contrast-colour);
  appearance: none;
  background-color: var(--background-table-colour);
  margin: 0px 8px 0px 0px;
  font: inherit;
  border: 0.15em solid var(--text-higher-contrast-colour);
  border-radius: 50%;
	/* transform: translateY(0.125em); moves it down a bit */
	display: inline-grid;
  place-content: center;
}

input[type="radio"]::before {
  content: "";
  width: 0.65em;
  height: 0.65em;
  border-radius: 50%;
  transform: scale(0);
  transition: 120ms transform ease-in-out;
  box-shadow: inset 1em 1em var(--text-higher-contrast-colour);
}

input[type="radio"]:checked::before {
  transform: scale(1);
}

button {
	background-color: var(--heading-default-colour);
  border: none;
	margin: 4px;
	padding: 4px;
	border-radius: 4px;
  color: var(--background-menu-colour);
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 1rem;
	box-shadow: 0px 4px #000;
}

button.top { /* back to top button */
	position: fixed;
	/* z-index: 99; */
	background-color: #990;
	color: #222;
	bottom: 40px;
	right: 10px;
}

ul.contrast {
	list-style-type: none;
	margin: 0px;
	padding: 0px;
}

li.contrast { /* used to vertically align text next to mid swatches */
	display: flex;
	align-items: center;
	margin: 2px;
}

dt {font-weight: bold;}

dd {
	margin: 0.5rem 0rem 1rem 2rem;
}

summary {
	margin: 8px;
	color: var(--link-visited-colour);
	text-decoration: underline;
}

canvas {
	padding-left: 0;
	padding-right: 0;
	border: 0 none;
	margin-left: auto;
	margin-right: auto;
	display: block;
	image-rendering: pixelated;
}

fieldset {
	border-color: var(--heading-default-colour);
	border-radius: 6px;
	display: inline-block;
	/* vertical-align: baseline; */
}

.subtitle { /* to complement h1 */
	margin: 0px;
	font-family: var(--font-sans);
	font-size: 2rem;
	color:var(--text-higher-contrast-colour);
}

.slide {
	font-family: var(--font-sans);
	margin: 16px 0px 0px 0px;
	border: 8px solid #27b;
	padding: 8px 16px 8px 16px;
	background-color: var(--background-table-colour);
}

.govuk-visually-hidden { /* borrowed from gov.uk :) */
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	-webkit-clip-path: inset(50%) !important;
	clip-path: inset(50%) !important;
	border: 0 !important;
	white-space: nowrap !important;
}

/* WCAG map styles */
/* colours for the WCAG map */
.wcag-black {background-color: #222; color:#fff;} /* for code & labels on the wcag map */
.wcag-blue {background-color: #36d; color: #fff;}
.wcag-yellow {background-color: #dd0; color:#000;} /* for sensory */
.wcag-fuchsia {background-color: #f6c; color:#000;} /* NEW for whole site */
.wcag-green {background-color: #180; color:#fff;} /* NEW for forms */
.wcag-red {background-color: #903; color:#fff;} /* for zoom and legibility */
.wcag-cyan {background-color: #0df; color:#000;} /* for gestures */
.wcag-orange {border: 4px solid #e60; background-color: #fff; color: #000;} /* for wording */
.wcag-new {background-color: #0f6; color: #060; border-radius: 0.25rem; padding: 2px;}

.wcag-line-left { /* for left hand border of entire wcag sections */
	border-style: solid;
	border-width: 20px;
	border-width: 0px 0px 0px 16px;
	padding: 0px 0px 0px 8px;
	border-image-slice: 16;
	border-image-width: 0px 0px 0px 16px;
}

span.wcag-a {background-color: #fff; color: #039; border-radius: 0.25em; padding: 2px; font-weight: bold;}
span.wcag-aa {background-color: #36c; color: #fff; border-radius: 0.25em; padding: 2px;}
span.wcag-aaa {background-color: #000; color: #6ff; border-radius: 0.25em; padding: 2px;}

.line-blue {border-image-source: var(--wcag-blue-line);}
.line-red {border-image-source: var(--wcag-red-line);}
.line-yellow {border-image-source: var(--wcag-yellow-line);}
.line-black {border-image-source: var(--wcag-black-line);}
.line-fuchsia {border-image-source: var(--wcag-fuchsia-line);}
.line-green {border-image-source: var(--wcag-green-line);}
.line-cyan {border-image-source: var(--wcag-cyan-line);}
.line-orange {border-image-source: var(--wcag-orange-line);}

/* interchange (ic) box backgrounds */
.ic-blue {background: var(--wcag-blue-line);}
.ic-red {background: var(--wcag-red-line);}
.ic-yellow {background: var(--wcag-yellow-line);}
.ic-black {background: var(--wcag-black-line);}
.ic-fuchsia {background: var(--wcag-fuchsia-line);}
.ic-green {background: var(--wcag-green-line);}
.ic-cyan {background: var(--wcag-cyan-line);}
.ic-orange {background: var(--wcag-orange-line);}

span.wcagswatch { /* for wcag line interchanges  */
	display: inline-block;
	vertical-align: middle;
	width: 16px;
	height: 20px;
}

@media only screen and (min-device-width : 320px) and (max-device-width : 900px) {
	img, canvas, body { max-width: 100%; } /* took a while to work this out */
	h1 { font-size: 3rem; }
	img.mainlogo { max-height: 64px; }
	span.swatch { width: 40px; height: 40px; }
}
/* see https://davidwalsh.name/image-max-width
and http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
*/

@media (prefers-reduced-motion) {
	hr {animation-duration: 0s;}
}

code {
	color: inherit;
	font-size: inherit;
	/* Set the following to be the same as body if you don't want it to be courier */
	font-family: inherit;
}

code.fixed {
	color: inherit;
	font-family: "Courier", fixed;
}

@keyframes hrwiden {
	from {width: 0px;}
	to {width: 100%;}
}