/**
 * Millco Base CSS.
 * Definitions now live in a separate file.
 */

/*=============================
  Base Styles
=============================*/
* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;

  scrollbar-color: var(--accent) var(--theme); /* Two valid colours.
  The first applies to the thumb of the scrollbar, the second to the track. */
}

body {
  font-size: 100%;
  line-height: 1.4;
  color: var(--dark);
  font-weight: 400;
  font-family: var(--font-sans);
  scroll-behavior: smooth;
  position: relative;
}

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

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

/*=============================
  List
=============================*/
ul,
ol {
  margin-top: 0;
  margin-bottom: 16px;
  padding-left: 0;
  list-style-position: inside;
}

ul li,
ol li {
  margin-bottom: 16px;
}

ul li:last-child,
ol li:last-child {
  margin-bottom: 0;
}

ul ul,
ol ul,
ul ol,
ol ol {
  margin-left: 1rem;
}

/*=============================
  Image
=============================*/
img {
  margin-top: 0;
  max-width: 100%;
  height: auto;
}

.img-fluid {
  display: inline-block;
  max-width: 100%;
  height: auto;
}

.img-full-width {
  display: inline-block;
  width: 100%;
  height: auto;
}

figure {
  margin: 0;
  margin-bottom: 1rem;
}

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

figcaption {
  color: var(--neutralA);
  padding: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.4;
}

/*=============================
  media
=============================*/

video{
	max-width: 100%;
	height: auto;
}

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


/** 
Alerts - dismissable without JS (cool ... probably). 
from https://codepen.io/rlemon/pen/krxjpB
 **/

 .alert{
  position: relative;
 }

.alert .inner {
  display: block;
  padding: 1rem 3rem 1rem 1.5rem;
  margin: 1rem;
  border-radius: 1rem;
  border: 1px solid rgb(180, 180, 180);
  background-color: rgb(212, 212, 212);
}

.alert .close {
	position: absolute;
  top:0.5rem;
  right:  1.5rem;
	cursor: pointer;
	display: flex;
	width: 24px;
	height: 24px;
	align-items: center;
	justify-content: center;
  border:2px solid black;
	border-radius: 50%;
}

.alert .inner,
.alert .close {
  color: rgb(88, 88, 88);
}

.alert input {
  display: none;
}

.alert input:checked~* {
  animation-name: dismiss, hide;
  animation-duration: 300ms;
  animation-iteration-count: 1;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
  animation-delay: 0s, 100ms;
}

.alert.error .inner {
  border: 1px solid rgb(238, 211, 215);
  background-color: rgb(242, 222, 222);
}

.alert.error .inner,
.alert.error .close {
  color: rgb(185, 74, 72);
  border-color: rgb(185, 74, 72);
}

.alert.success .inner {
  border: 1px solid rgb(214, 233, 198);
  background-color: rgb(223, 240, 216);
}

.alert.success .inner,
.alert.success .close {
  color: #3a773c;
  border-color: #3a773c;
}

.alert.info .inner {
  border: 1px solid rgb(188, 232, 241);
  background-color: rgb(217, 237, 247);
}

.alert.info .inner,
.alert.info .close {
  color: rgb(58, 135, 173);
  border-color: rgb(58, 135, 173);
}

.alert.warning .inner {
  border: 1px solid rgb(251, 226, 213);
  background-color: rgb(252, 248, 227);
}

.alert.warning .inner,
.alert.warning .close {
  color: rgb(192, 152, 83);
  border-color: rgb(192, 152, 83);
}

@keyframes dismiss {
  0% {
    opacity: 1;
  }

  90%,
  100% {
    opacity: 0;
    font-size: 0.1px;
    transform: scale(0);
  }
}

@keyframes hide {
  100% {
    height: 0px;
    width: 0px;
    overflow: hidden;
    margin: 0px;
    padding: 0px;
    border: 0px;
  }
}

.box {
  margin-bottom: 16px;
  padding-top: 16px;
  padding-right: 16px;
  padding-left: 16px;
  border: 1px solid #a7a7a7;
  border-radius: 2px;
}

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

}

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


/*=============================
  Code
=============================*/
pre {
  margin-top: 0;
  margin-bottom: 16px;
}

pre code {
  display: block;
  padding: 16px;
  white-space: pre-wrap;
  word-wrap: break-word;
}

code {
  padding: 2px;
  white-space: nowrap;
  background: #e7e7e7;
  border: 1px solid #d7d7d7;
  border-radius: 2px;
  font-family: "Consolas", "Monaco", "Menlo", monospace;
}

/*=============================
  Fills
=============================*/

.fill-dark {
  fill: var(--dark);
}

.fill-pale {
  fill: var(--pale);
}

.fill-theme {
  fill: var(--theme);
}

.fill-none {
  fill: none;
}

.fill-white {
  fill: white;
}

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

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

.pl-0 {
	padding-left: 0;
  }
  
.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 {
  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 !important;
}

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

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


/*=============================
  Display and hidden
=============================*/

.d_flex{
  display: flex;
}

.justify_end{
  justify-content: end;
}

.justify_center,
.justify_centre{
  justify-content: center;
}


.nobile {
  display: none;
}



@media screen and (min-width: 768px) {

  .nobile {
    display: flex;
  }

  .mobile_only{
    display: none !important;
  }

}



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

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

.grid {
	display: grid;
	gap: 1rem;
}

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

}

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

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


/*=============================
  Accessibility
=============================*/
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  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;
}

/* Zebra striping */
.table_striped tr:nth-of-type(odd) {
  background: var(--neutralB2);
  color: var(--dark)
}

td,
th {
  padding: var(--gap-small);
  border-bottom: 1px solid var(--neutralB);
  text-align: left;
}

th {
  font-weight: bold;
}

/* Might as well use transitions */
@view-transition {
	navigation: auto;
  }

/* Animation for dialogs
from: https://nerdy.dev/6-css-snippets-every-front-end-developer-should-know-in-2025#transition-a-dialog
*/

/* enable transitions, allow-discrete, define timing */
[popover], dialog, ::backdrop {
	transition: display 1s allow-discrete, overlay 1s allow-discrete, opacity 1s;
	opacity: 0;
  }
  
  /* ON STAGE */
  :popover-open,
  :popover-open::backdrop,
  [open],
  [open]::backdrop {
	opacity: 1;
  }
  
  /* OFF STAGE */
  /* starting-style for pre-positioning (enter stage from here) */
  @starting-style {
	:popover-open,
	:popover-open::backdrop,
	[open],
	[open]::backdrop {
	  opacity: 0;
	}
  }
  
  
  



/**
Toggle switch adapted from
https://codepen.io/alvarotrigo/pen/abVPyaJ
*/

.toggle_item{
	display: inline-flex;
	align-items: center;
	gap:8px;
}

.toggle{
	display: inline-flex;
}

.toggle input[type=checkbox]{
  height: 0;
  width: 0;
  visibility: hidden;
}

.toggle label {
  cursor: pointer;
  text-indent: -9999px;
  width: 36px;
  height: 20px;
  background: white;
  display: block;
  border:2px solid var(--theme);
  border-radius: 10px;
  position: relative;
}

.toggle label:after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  background: var(--theme);
  border-radius: 50%;
  transition: 0.3s;
}

.toggle input:checked + label {
  background: var(--active);
  border-color:var(--active);
}

.toggle input:checked + label:after {
  left: calc(100% - 2px);
  transform: translateX(-100%);
  background:white;
}

.toggle label:active:after {
  width: 16px;
}


/* 
Natch - our toggles should be buttons not checkboxes.
redone, leaning on code from https://kittygiraudel.com/2021/04/05/an-accessible-toggle/
 */

.switch {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	position: relative;
	cursor: pointer;
	gap: 1ch;
	color: var(--secondaryA);
  }
  
  button.switch {
	border: 0;
	padding: 0;
	background-color: transparent;
	font: inherit;
  }
  
  .switcher{ cursor: pointer;
	text-indent: -9999px;
	width: 36px;
	height: 20px;
	background: white;
	display: block;
	border:2px solid var(--theme);
	border-radius: 10px;
	position: relative;
  }  

  .switcher:after {
	content: '';
	position: absolute;
	top: 2px;
	left: 2px;
	width: 12px;
	height: 12px;
	background: var(--theme);
	border-radius: 50%;
	transition: 0.3s;
  }
    
  .switch[aria-pressed="true"] .switcher{
	background: var(--active);
	border-color:var(--active);
  }
  
  .switch[aria-pressed="true"] .switcher::after {
		left: calc(100% - 2px);
		transform: translateX(-100%);
		background:white;
	}


	summary{
		cursor: pointer;
		padding: 4px;

	}

	summary:hover{

		background-color: var(--grey-very-light);
	}