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


/*=============================
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;
}

/* 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;
}

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;
	}

}

.contains{
	container-type: inline-size;
}

.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;
	}
	
}

.d-flex{
	display: flex;
}

.gapped{
	gap: var(--gap);
}

.gapped-compactly{
	gap: var(--gap-small);
}

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

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

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

.contented ul{
	margin-block: 0;
}

.contented li{
	max-width: 64ch;
}

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

/*=============================
  Alignment
=============================*/
.j_centre{
	justify-content: center;
}
.j_start{
	justify-content: start;
}
.j_end{
	justify-content: end;
}


/*=============================
  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,
.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;
}