/**
 * Millco Base CSS.
 */


/*=============================
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(--theme) var(--grey-very-light);
	/* 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
but not inputs now */
h1,
h2,
h3,
h4,
button,
label {
	line-height: 1.1;
	text-box: trim-both cap alphabetic;
}

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

/* A elements that don't have a class get default styles */
a:not([class]) {
	text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img,
picture {
	max-width: 100%;
	height: auto;
	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: 5em;
}

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

/* oooh can we use view transitions yet? */
@view-transition {
	navigation: auto;
}

/*=============================
  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;
	width: fit-content;
}

figure img {
	display: block;
}

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

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


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

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

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

.gapped_compactly,
.gapped_small {
	gap: var(--gap-small);
}

.gapped_tiny {
	gap: 0.25rem;
}

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

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

/* if we have a grid in a card then we keep it when the card is at least 320px wide */
@container (min-width: 320px) {
	.card .grid_1-1 {
		grid-template-columns: 1fr 1fr;
	}
	.card .grid_1-2 {
		grid-template-columns: 1fr 2fr;
	}
}

@container (min-width: 992px) {


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

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

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

	.grid_3-1 {
		grid-template-columns: 3fr 1fr;
	}

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

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

}



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

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

.padded_gap {
	padding: var(--gap);
}

.padded_bottom_gap {
	padding-bottom: var(--gap);
}

.padded_block_gap {
	padding-block: var(--gap);
}

.mt_1 {
	margin-top: 1rem;
}

.pt_0 {
	padding-top: 0;
}

.pb_0 {
	padding-bottom: 0;
}

.d_flex,
.d-flex {
	display: flex;
}

.d_flex_column,
.flex_column {
	display: flex;
	flex-direction: column;
}

.align_items_center {
	align-items: center;
}

.justify_content_between {
	justify-content: space-between;
}

.justify_content_end {
	justify-content: flex-end;
}

.justify_end{
	display: flex;
	justify-content: flex-end;
}

.ms-auto {
	margin-left: auto;
}


.max_width_800 {
	max-width: 800px;
}

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



/*=============================
	Details tweaks from eBay MIND
   https://ebay.gitbook.io/mindpatterns/disclosure/details
   but then made nice
  =============================*/

details.details {
	display: block;
	animation: animateDown 0.2s linear forwards;
}

/* Remove details marker for non-webkit */
details.details summary {
	display: flex;
	gap: var(--gap-small);
	align-items: center;
	cursor: pointer;
	border: 1px solid var(--dark-grey);
	border-radius: 0.25rem;
	margin-bottom: var(--gap-small);
	padding: 0.5rem;
	transition: var(--transition);
}

details.details summary:hover {
	background-color: var(--grey-very-light);
	transition: var(--transition);
}

/* Remove details marker for non-webkit */
details.details summary::-webkit-details-marker {
	display: none
}

/* Custom details marker for closed state */
details.details summary::before {
	content: "\025B8";
	display: flex;
	align-items: center;
	justify-content: center;
	transform-origin: center;
	color: var(--accent);
	width: 1.2em;
	height: 1.2em;
	transition: var(--transition);
	line-height: 1;
}

/* Custom details marker for open state */
details.details[open] summary::before {
	/* content: "\025BE"; */
	rotate: 90deg;
	transition: var(--transition);
}

.details_content {
	animation: animateDown 0.2s linear forwards;
	padding: 0 var(--gap);
	background-color: var(var(--grey-very-light));
}

@keyframes animateDown {
	0% {
		opacity: 0;
		transform: translatey(-15px);
	}

	100% {
		opacity: 1;
		transform: translatey(0);
	}
}

/*=============================
	Details animation from
	https://nerdy.dev/open-and-close-transitions-for-the-details-element
	not good on FF yet.
	=============================*/

details {
	/* I can't remember what I put this in for. */
	/* inline-size: 50ch; */

	@media (prefers-reduced-motion: no-preference) {
		interpolate-size: allow-keywords;
	}

	&::details-content {
		opacity: 0;
		block-size: 0;
		overflow-y: clip;
		transition: content-visibility 0.68s allow-discrete, opacity 0.68s, block-size 0.68s;
	}

	&[open]::details-content {
		opacity: 1;
		block-size: auto;
	}
}


.htmx-swapping{
	opacity: 0.5;
	transition: opacity 0.3s ease-in-out;
}

.htmx-added{
	opacity: 1;
	transition: opacity 1s ease-in-out;
}

.fade-in {
	opacity: 1;
	animation-name: fadeInOpacity;
	animation-iteration-count: 1;
	animation-timing-function: ease-in;
	animation-duration: 0.2s;
}

@keyframes fadeInOpacity {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}