/*
// VARIABLES
*/

:root {

    --container-max: 80ch;

    --tan: #f1ebe6;
    --gray900: #09151f;

	--lightBlue: #d1e0f0;
	--blue: #336699;
	--darkBlue: #1A436B;
	--lightGreen: #d9e9d8;
	--green: #4d8547;
	--darkGreen: #275C21;
	--lightRed: #eed3d6;
	--red: #a23e48;
	--darkRed: #78232B;


}


/*
// COLOURS
*/

[data-colour="blue"] {
	--colour: var(--blue);
	--lightColour: var(--lightBlue);
	--darkColour: var(--darkBlue);
}

[data-colour="green"] {
	--colour: var(--green);
	--lightColour: var(--lightGreen);
	--darkColour: var(--darkGreen);
}

[data-colour="red"] {
	--colour: var(--red);
	--lightColour: var(--lightRed);
	--darkColour: var(--darkRed);
}



/*
// UNIVERSAL BOX-SIZING
*/

html {
	box-sizing: border-box;
}

*,
*:before,
*:after {
	box-sizing: inherit;
}



/*
// CONTAINER CHILDREN MARGINS
*/

:is(section, div, ul, ol) > *:first-child {
	margin-top: 0 !important;
}

:is(section, div, ul, ol) > *:last-child {
	margin-bottom: 0 !important;
}


/*
// HTML & BODY
*/

html {
	margin: 0;
	padding: 0;
	height: 100%;
	scroll-behavior: smooth;
}

body {
    width: 100%;
    margin: 0;
    padding: 0;  
}


/*
// TYPOGRAPHY
*/

html {
	font-family: 'Public Sans', sans-serif;
	color: var(--gray900);
	font-size: 18px;
	font-weight: 500;
	line-height: 1.5;
}

h1 {
	font-size: 3rem;
	font-weight: 900;
	line-height: 1;
	margin: 0 0 0.75rem;
    letter-spacing: -0.05ch;
    text-transform: uppercase;
}

h2 {
	font-size: 1.75rem;
	font-weight: 800;
	line-height: 1;
	margin: 1.5rem 0;
    letter-spacing: -0.025ch;
    text-transform: uppercase;
}

h3 {
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.2;
	margin: 1.5rem 0 1rem;
    letter-spacing: -0.025ch;
}

h4 {
	font-size: 1rem;
	font-weight: 800;
	line-height: 1.2;
	margin: 1.5rem 0 1rem;
	text-transform: uppercase;
	letter-spacing: -0.025ch;
}

p {
	font-size: 1rem;
	margin: 0 0 1rem;
	word-break: break-word;
	hyphens: auto;
}


/*
// TYPOGRAPHY
// -- FLUID TYPE
*/

.fluid-type {
	--fluid-type-min-size: 1;
	--fluid-type-max-size: 2;
	--fluid-type-min-screen: 20;
	--fluid-type-max-screen: 88;

	font-size: calc(
		(var(--fluid-type-min-size) * 1rem) 
		+ (var(--fluid-type-max-size) - var(--fluid-type-min-size)) 
		* (100vw - (var(--fluid-type-min-screen) * 1rem)) 
		/ (var(--fluid-type-max-screen) - var(--fluid-type-min-screen))
	);
}

h1.fluid-type {
	--fluid-type-min-size: 2.5;
	--fluid-type-max-size: 3;
}

h2.fluid-type {
	--fluid-type-min-size: 1.5;
	--fluid-type-max-size: 1.75;
}

h3.fluid-type {
	--fluid-type-min-size: 1.25;
	--fluid-type-max-size: 1.5;
}


/*
// TYPOGRAPHY
// -- LISTS
*/

ul,
ol {
	margin: 0 0 1rem;
	padding-left: 2rem;
	word-break: break-word;
	hyphens: auto;
}

ul.checkmarks li::marker {
	content: '✔   ';
}

ul > ul,
ul > ol,
ol > ol,
ol > ul {
	margin: 0;
}

li > ul,
li > ol {
	margin: 0.5rem 0 0;
}

ol > ul {
	list-style-type: disc;
}

ol > ol {
	list-style-type: lower-latin;
}

ol > li,
ol > p {
	padding-left: 0.25rem;
}

li,
ul p,
ol p {
	margin: 0 0 0.5rem;
}


/*
// TYPOGRAPHY
// -- CHARACTER STYLES
*/

strong {
	font-weight: 800;
}

em {
	padding-right: 2px;
}



/*
// LINKS
*/

a {
	cursor: pointer;
	transition: all 0.1s ease;
	font-weight: 700;
	color: inherit;
}

a:hover {
	text-decoration: none;
}


/*
// BUTTONS 
*/

button {
	cursor: pointer;
	color: inherit;
}


/*
// HEADER
*/

header {
	display: grid;
	place-content: center;
	grid-template-columns: min(100% - 3rem, var(--container-max, 60ch));
	grid-template-rows: auto;
    width: 100%;
	min-height: 16rem;
    background-color: var(--tan);
	background-image: url(../images/pattern_tools.svg);
	background-repeat: repeat;
	background-size: 40rem;
	background-position: center;
	background-blend-mode: multiply;
	padding: clamp(1rem, 5%, 3rem) 0;
}

header h1 {

	margin: 0;
}

header h1 span {
	color: var(--red);
}



/*
// MAIN
*/

main > section.full {
	display: grid;
	place-content: center;
	grid-template-columns: min(100% - 3rem, var(--container-max, 60ch));
    width: 100%;    
}

main > section.margin {
	width: min(100% - 3rem, var(--container-max, 60ch));
	margin-inline: auto;
}

section.nbtap {
	background-color: var(--blue);
	margin: 0 0 2rem;
	color: white;
}

section.nbtap > div {
	display: grid;
	place-content: center;
	column-gap: 2rem;
	align-items: center;
	grid-template-columns: 1fr 10rem;
	grid-template-rows: 2rem auto auto 2rem;
	grid-template-areas: 
	". logo"
	"header logo"
	"description logo"
	". logo";
}

section.nbtap .logo-group {
	grid-area: logo;
	display: grid;
	place-content: center;

	padding: 0 1.5rem;
	background-color: white;
	height: 100%;
	max-width: 100%;
	position: relative;
}

section.nbtap .logo-group::before,
section.nbtap .logo-group::after {
	content: "";
	position: absolute;
	left: 0;
	width: 0;
	border-left: 5rem solid transparent;
	border-right: 5rem solid transparent;
}

section.nbtap .logo-group::before {
	top: -3rem;
	border-bottom: 3rem solid white;
}

section.nbtap .logo-group::after {
	bottom: -3rem;
	border-top: 3rem solid white;
}

section.nbtap .logo-group img {
	width: 6rem;
}

section.nbtap h2 {
	grid-area: header;

	margin: 0 0 0.5rem;
}

section.nbtap p {
	grid-area: description;

	margin: 0;
}


/*
// MAIN
// -- STEPS
*/

[data-accordion-group] {
    --borderWidth: 4px;
}

[data-accordion-group]  h2 {
	display: flex;
	flex-flow: row;
	justify-content: space-between;
	align-items: end;
    padding: 2.5rem 0 1rem 2rem;
    margin: 0;
    border-bottom: var(--borderWidth) solid var(--colour);
}

[data-accordion-group] h2 > span {
	--fluid-type-min-size: 1;
	--fluid-type-max-size: 1.25;

	font-weight: 600;
}

[data-accordion-group] .step-group {
	display: grid;
	column-gap: 1rem;
	grid-template-columns: 4rem 1fr;
	grid-template-rows: auto auto 1fr;
	grid-template-areas: 
	"icon toggle"
	"icon panel"
	". panel";

	position: relative;
	padding: 2rem 0 0 2rem;
}

[data-accordion-group] .step-group::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0; 
    width: var(--borderWidth);
    height: 100%;
    background-color: var(--colour);
	z-index: 0;
}

[data-accordion-group] .step-group::after {
    content: "";
    position: absolute;
	top: 3.5rem;
    left: calc(-1 * ((1rem - var(--borderWidth)) / 2));
    width: 1rem;
    height: 1rem;
    background-color: white;
    border: var(--borderWidth) solid var(--colour);
    border-radius: 10rem;
	z-index: 1;
}

[data-accordion-group] .step-group:last-of-type::before {
    height: 4rem;
}


/*
// MAIN
// -- STEPS
// -- -- TOGGLE
*/

[data-accordion] {
	grid-area: toggle;

    margin: 0;
	z-index: 2;
}

[data-accordion] button {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;

	padding: 1rem 3.5rem 1rem 1rem;
    margin: 0;
	width: 100%;
	height: 100%;
	background-color: transparent;
	border: none;
	border-radius: 0.25rem;
    font-weight: inherit;
	text-align: left;
}

[data-accordion] button:is(:hover, :focus-visible, [aria-expanded="true"]) {
    background-color: var(--lightColour);
}

[data-accordion] button[aria-expanded="true"] {
	border-radius: 0.25rem 0.25rem 0 0;
}


/* Creates the line of the (+) and (-) */

[data-accordion] button::before,
[data-accordion] button::after {
	content: "";
	display: block;
	height: 1.5rem;
	width: 3px;
	background: var(--colour);
	position: absolute;
	right: 1.5rem;
	top: auto;
	transition: transform 0.2s ease-out, opacity 0.1s ease;
	z-index: 1;
	opacity: 0;
}

[data-accordion] button::before{
	transform: rotate(90deg);
}

[data-accordion] button[aria-expanded="true"]::after{
	transform: rotate(-90deg);
}

[data-accordion] button:is(:hover, :focus-visible)::before,
[data-accordion] button:is(:hover, :focus-visible)::after {
	opacity: 1;
}

[data-accordion-group] .step-group img.icon.step {
	grid-area: icon;

    width: 4rem;
}

[data-accordion-group] .panel {
	grid-area: panel;

	padding: 0 1rem 1rem 1rem;
	background-color: var(--lightColour);
	border-radius: 0 0 0.25rem 0.25rem;
	z-index: 2;
}

[data-accordion]:last-of-type + .panel {
    border-left-color: transparent;

}

[data-accordion-group] .callout {
    background-color: white;
    padding: 1rem;
    border-radius: 0.25rem;
}




/*
// FOOTER
*/

footer {
	display: grid;
	place-content: center;
	grid-template-columns: min(100% - 3rem, var(--container-max, 60ch));
	gap: 1rem;
    width: 100%;
	margin: clamp(3rem, 10%, 6rem) 0 0;
	padding: clamp(2rem, 5%, 3rem) 0;
	background-color: var(--gray900);
}

footer img {
	width: 10rem;
}

footer p.copyright {
	font-size: 0.875rem;
	color: white;
	margin: 0;
	text-align: center;
}


/*
// MOBILE NAV
*/

nav.mobile {
	display: none;
	flex-flow: row nowrap;
	align-items: center;
	justify-content: space-between;
	position: sticky;
	bottom: 0;
	width: 100%;
	z-index: 100;
	border-top: 3px solid white;
	
}

nav.mobile a {
	padding: 1rem;
	font-size: 1.125rem;
	font-weight: 800;
	text-transform: uppercase;
	text-decoration: none;
	letter-spacing: -0.025ch;
	flex-grow: 1;
	text-align: center;
	color: white;
	background-color: var(--colour);
	border-bottom: 6px solid var(--darkColour);
}


/*
// MISC
*/

img {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 0 auto;
}

img.inline {
	display: inline;
	vertical-align: middle;
}

video {
	display: block;
	width: 100%;
	height: auto;
}

.embed {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	height: 0;
}

.embed iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

audio {
  width: 100%;
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    /* IE10+ CSS styles go here */
	audio {
	max-height: 40px;
	}
}

hr {
	border-style: solid;
	border-width: 1px;
	border-color: var(--corundum);
}

.shadow {
	box-shadow: 0 0 0.75rem var(--corundum);
}

.screen-reader-only {
	position: absolute;
	width: 1px;
	clip: rect(0 0 0 0);
	overflow: hidden;
	white-space: nowrap;
}



/*
// RESPONSIVE
*/

@media only screen
	and (max-width: 720px) {

		html {
			font-size: 14px;
		}

		section.nbtap {
			background-color: var(--blue);
			margin: 0;
			color: white;
		}

		section.nbtap > div {
			grid-template-columns: 1fr 8rem;
		}

		section.nbtap .logo-group {
			padding: 1.5rem;
			height: auto;
			max-width: 100%;
			border-radius: 100rem;
		}
		
		section.nbtap .logo-group::before,
		section.nbtap .logo-group::after {
			content: none;
		}

		section.nbtap .logo-group img {
			width: 4rem;
		}

		[data-accordion-group] h2 {
			margin-left: 1rem;
			padding-left: 0;
		}

		[data-accordion-group] .step-group {
			column-gap: 1rem;
			grid-template-columns: 1fr;
			grid-template-rows: auto auto 1fr;
			grid-template-areas: 
			"icon"
			"toggle"
			"panel";

			padding: 1rem 0 0;
		}

		[data-accordion-group] .step-group::before {
			left: 1rem;
		}
		
		[data-accordion-group] .step-group::after {
			left: calc((-1 * ((1rem - var(--borderWidth)) / 2)) + 1rem )
		}

		[data-accordion-group] .icon.step {
			margin: 0 0 1rem 3rem;
		}

		[data-accordion] button {
			background-color: var(--lightColour);
		}

		nav.mobile {
			display: flex;
		}


}

@media only screen
	and (max-width: 1024px) {



}


/*
// TOUCH SCREENS
*/

@media (hover: none) {

	[data-accordion] button {
		background-color: var(--lightColour) !important;
	}

	[data-accordion] button::before,
	[data-accordion] button::after {
		opacity: 1 !important;
	}

}