/**
 * Millco Base CSS.
 * and definitions.
 */

:root {

	--theme: #D67428;
	--accent: hsla(15, 100%, 47%, 1);

	--dark: hsl(0, 0%, 0%);
	--dark-grey: #262626;
	--grey-mid: hsl(0, 0%, 25%);
	--grey-light: hsl(0, 0%, 50%);
	--inactive: #C4C7CC;

	--dark-transparent: hsla(0, 0%, 0%, 0.85);
	--tint: hsla(0, 0%, 0%, 0.85);

	--grey-very-light: #EBEBEB;
	--pale: #fff;
	--white: #FFFFFF;
	--off-white: #F2F3F0;

	--grey: #C4C8D0;

	--blue: #2BDFE2;
	--green: #32DB54;
	--orange: hsl(29, 100%, 50%);
	--pink: #EF209C;
	--red: #E62A2A;
	--teal: #2BDFE2;
	--yellow: #D1E119;

	--transition: all 0.3s ease-in-out;

	--text-light: 200;
	--text-regular: 800;
	--strong: 800;
	--heavy: 800;

	--shadow: 0px 16px 20px 0px rgba(0, 0, 0, 0.50);

	--aside-width: 260px;
	--footer-height: 276px;

	--heading-font: 'Source Sans 3', Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", Georgia, serif;

	--font-sans: 'Source Sans 3', system, -apple-system, ".SFNSText-Regular", "San Francisco", "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", sans-serif;

	--font-serif: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", Georgia, serif;

	--font-condensed: Impact, Haettenschweiler, "Franklin Gothic Bold", Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", sans-serif;

	/*=============================
	Fluid Type sizes from
	https://utopia.fyi/
	=============================*/

	/* @link https://utopia.fyi/type/calculator?c=320,16,1.333,1240,24,1.333,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12

	--step--2: clamp(0.56rem, 0.46rem + 0.49vw, 0.84rem);
	--step--1: clamp(0.75rem, 0.62rem + 0.65vw, 1.13rem);
	--step-0: clamp(1.00rem, 0.83rem + 0.87vw, 1.50rem);
	--step-05: clamp(1.00rem, 1rem + 1.0vw, 1.75rem);
	--step-1: clamp(1.33rem, 1.10rem + 1.16vw, 2.00rem);
	--step-2: clamp(1.78rem, 1.47rem + 1.55vw, 2.67rem);
	--step-3: clamp(2.37rem, 1.96rem + 2.06vw, 3.55rem);
	--step-4: clamp(3.16rem, 2.61rem + 2.75vw, 4.74rem);
	--step-5: clamp(4.21rem, 3.48rem + 3.66vw, 6.31rem); */

		/* @link https://utopia.fyi/type/calculator?c=360,16,1.2,1600,20,1.2,6,2,1280&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

		--step--2: clamp(0.6944rem, 0.644rem + 0.224vw, 0.8681rem);
		--step--1: clamp(0.8333rem, 0.7728rem + 0.2688vw, 1.0417rem);
		--step-0: clamp(1rem, 0.9274rem + 0.3226vw, 1.25rem);
		--step-1: clamp(1.2rem, 1.1129rem + 0.3871vw, 1.5rem);
		--step-2: clamp(1.44rem, 1.3355rem + 0.4645vw, 1.8rem);
		--step-3: clamp(1.728rem, 1.6026rem + 0.5574vw, 2.16rem);
		--step-4: clamp(2.0736rem, 1.9231rem + 0.6689vw, 2.592rem);
		--step-5: clamp(2.4883rem, 2.3077rem + 0.8027vw, 3.1104rem);
		--step-6: clamp(2.986rem, 2.7693rem + 0.9632vw, 3.7325rem);
	


	/* Current (v5.0) Boostrap breakpoints are 
		X-Small 	None 	<576px
		Small 	sm 	≥576px
		Medium 	md 	≥768px
		Large 	lg 	≥992px
		Extra large 	xl 	≥1200px
		Extra extra large 	xxl 	≥1400px
	*/

	--gap: 0.75rem;
	--gap-small: 0.5rem;
}

@media (min-width: 768px) {
	:root {
		--gap: 1rem;
		--gap-small: 0.75rem;
	}
}

@media (min-width: 992px) {
	:root {
		--gap: 2rem;
		--gap-small: 1rem;
	}
}


/*=============================
Reset from
https://andy-bell.co.uk/a-more-modern-css-reset/
=============================*/

/* Box sizing rules */

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

/* Prevent font size inflation */
html {
	-moz-text-size-adjust: none;
	-webkit-text-size-adjust: none;
	text-size-adjust: none;
	scrollbar-color: var(--accent) var(--dark); /* Two valid colours.
	The first applies to the thumb of the scrollbar, the second to the track. */
}

/* Remove default margin in favour of better control in authored CSS */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
	margin: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
	list-style: none;
}

/* Set core body defaults */
body {
	min-height: 100vh;
	line-height: 1.5;
}

/* Set shorter line heights on headings and interactive elements */
h1,
h2,
h3,
h4,
button,
input,
label {
	line-height: 1.1;
}

/* Balance text wrapping on headings */
:is(h1, h2, h3, h4, .text-balance) {
	text-wrap: balance;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
	text-decoration-skip-ink: auto;
	color: currentColor;
	text-decoration: underline;
	text-decoration-line: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.25em;
}

/* Make images easier to work with */
img,
picture {
	height: auto;
	max-width: 100%;
	display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
	font: inherit;
}

/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
	min-height: 10em;
}

/* Anything that has been anchored to should have extra scroll margin */
:target {
	scroll-margin-block: 5ex;
}

/*=============================
  Link
=============================*/
a {
	color: var(--blue);
	transition: var(--transition);
}

a:hover {
	cursor: pointer;
	color: var(--theme);
	transition: var(--transition);
}


/*=============================
  Img
=============================*/
figure {
	margin: 0;
	margin-bottom: 1rem;
	display: inline-flex;
	flex-direction: column;
	width: fit-content;
}

figure img,
svg {
	vertical-align: bottom;
	/* get rid of space for descender */
}

figcaption {
	background-color: white;
	color: var(--dark);
	padding: 0.5rem;
	font-size: 0.875rem;
}

/*=============================
  Components
=============================*/

.alert {
	display: inline-block;
	margin: auto;
	padding: 0.5rem;
	padding-left: 28px;
	border: 2px solid hsl(349, 100%, 95%);
	background-color: hsl(349, 100%, 63%);
	color: white;
	border-radius: 0.5rem;
	position: relative;
	;
}

.alert::before {
	content: '!';
	color: hsl(349, 100%, 63%);
	background-color: white;
	width: 16px;
	height: 16px;
	position: absolute;
	top: 11px;
	left: 6px;
	font-weight: 700;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}


.edit-link {
	position: fixed;
	width: 40px;
	top: 120px;
	bottom: auto;
	right: 0;
	border: 2px solid #ccc;
	background-color: var(--theme);
	padding: 4px;
	color: white;
	text-decoration: none;
	border-top-left-radius: 8px;
	border-bottom-left-radius: 8px;
	box-shadow: 2px 2px 4px #666;
	font-size: 0.9rem;

}

.edit-link:hover {
	background-color: #ccc;
	color: var(--dark);
}


/*=============================
  Grid
=============================*/

.grid {
	display: grid;
	gap: var(--gap);
}

.grid_small_1-1 {
	grid-template-columns: 1fr 1fr;
}

@media(min-width: 992px) {

	.grid_1-1 {
		grid-template-columns: 1fr 1fr;
	}

	.grid_2-1 {
		grid-template-columns: 2fr 1fr;
	}

	.grid_1-1-1 {
		grid-template-columns: 1fr 1fr 1fr;
	}

}



.guttered {
	display: grid;
	grid-template-columns: 16px 1fr 16px;
	gap: var(--gap);
	width: 100%;
	max-width: 1900px;
	margin-inline: auto;
}

.always_guttered{
	display: grid;
	grid-template-columns: 80px 1fr 80px;
	gap: var(--gap);
	width: 100%;
}

@media(min-width: 768px ){
	.guttered {
		grid-template-columns: 80px 1fr 80px;
	}
	
}

/*=============================
  Contented
=============================*/

.contented {
	display: flex;
	flex-direction: column;
	gap: var(--gap-small);
}

.contented p{
	max-width: 60ch;
}

/*=============================
  Divider
=============================*/
hr {
	border: 0;
	height: 1px;
	background: var(--accent);
	margin: 1rem 0;
}

/*=============================
  Padding and margins
=============================*/

.p-0 {
	padding: 0 !important;
}

.p-1 {
	padding: 1rem;
}

.pl-1 {
	padding-left: 1rem;
}

.pr-1 {
	padding-right: 1rem;
}

.pt-1 {
	padding-top: 1rem;
}

.pb-1 {
	padding-bottom: 1rem;
}

.p-2,
.p_2 {
	padding: 2rem;
}

.pl-2 {
	padding-left: 2rem;
}

.pr-2 {
	padding-right: 2rem;
}

.pt-2 {
	padding-top: 2rem;
}

.pb-2 {
	padding-bottom: 2rem;
}

.p-4 {
	padding: 4rem;
}

.pl-4 {
	padding-left: 4rem;
}

.pr-4 {
	padding-right: 4rem;
}

.pt-4 {
	padding-top: 4rem;
}

.pb-4 {
	padding-bottom: 4rem;
}

.m-auto {
	margin-left: auto;
	margin-right: auto;
}

.m-0 {
	margin: 0rem;
}

.ml-0 {
	margin-left: 0rem;
}

.mr-0 {
	margin-right: 0rem;
}

.mt-0 {
	margin-top: 0rem;
}

.mb-0 {
	margin-bottom: 0rem;
}

.m-1 {
	margin: 1rem;
}

.ml-1 {
	margin-left: 1rem;
}

.mr-1 {
	margin-right: 1rem;
}

.mt-1 {
	margin-top: 1rem;
}

.mb-1 {
	margin-bottom: 1rem;
}

.m-2 {
	margin: 2rem;
}

.ml-2 {
	margin-left: 2rem;
}

.mr-2 {
	margin-right: 2rem;
}

.mt-2 {
	margin-top: 2rem;
}

.mb-2 {
	margin-bottom: 2rem;
}

.m-4 {
	margin: 4rem;
}

.ml-4 {
	margin-left: 4rem;
}

.mr-4 {
	margin-right: 4rem;
}

.mt-4 {
	margin-top: 4rem;
}

.mb-4 {
	margin-bottom: 4rem;
}

.mt-auto {
	margin: auto;
}

@media screen and (min-width: 768px) {
	.p-lg-0 {
		padding: 0;
	}
}

.pt-gap {
	padding-top: var(--gap);
}


/*=============================
  Accessibility
=============================*/
.sr_only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border-width: 0;
	color: black !important;
	background-color: white !important;
}


/*=============================
  Tables
=============================*/

.table_wrapper {
	max-width: 100%;
	overflow-x: auto;
}

.table_wrapper>table {
	min-width: 360px;
}

table {
	width: 100%;
	border-collapse: collapse;
	margin: 1rem 0 2rem 0;
}

/* Zebra striping */
tr:nth-of-type(odd) {
	background: var(--grey-very-light);
	color: var(--dark)
}

td,
th {
	padding: 6px;
	border: 1px solid #ccc;
	text-align: left;
	font-size: 0.875rem;
}

th {
	background: black;
	color: var(--accent);
	font-weight: bold;
	text-transform: uppercase;
}

/*=============================
  External links
  https://css-irl.info/styling-external-links-with-attribute-selectors/
=============================*/

.contented a[href^='http'] {
	padding-right: 1em;
}

.contented a[href^='http']::after {
	position: absolute;
	content: '';
	display: inline-block;
	width: 0.75em;
	height: 0.75em;
	margin-left: 0.25em;
	background-size: 100%;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewbox='0 0 12.2 12.2' width='14' height='14'%3E%3Cpath d='M5.7 0v1.5h4L4.5 6.7l1 1.1 5.3-5.2v3.9h1.4V0z'/%3E%3Cpath fill='none' d='M3.4 6.7l3-2.9H1.5v7h7V5.9l-3 2.9z'/%3E%3Cpath d='M8.5 5.9v4.9h-7v-7h4.9l1.5-1.6H0v10h10V4.4z'/%3E%3C/svg%3E");
	transform: translateY(0.25em);
}

a.no_external_link {
	padding-right: revert;
}

a.no_external_link::after {
	display: none;
}