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

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

a.currentcolour{
  color: currentColor;
}

/* 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: 14px;
  font-weight: 600;
  line-height: 120%; /* 16.8px */
  text-wrap: balance;
}

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

.alert {
		display: inline-flex;
		margin: auto;
		padding: 0.5rem var(--gap);

		background-color: var(--yellow);
		position: relative;
		text-transform: uppercase;
		font-weight: var(--heavy);
		text-align: center;
}

.alert::after {
  content: ' ';
	display: block;
	height:24px;
	width:24px;
	margin-left: 1rem;
	background: url('/site/assets/images/icons/warning.svg') no-repeat;
	background-size: contain;
}


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

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

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

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

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

/* /**
Grid based on ch 
https://techhub.iodigital.com/articles/going-beyond-pixels-and-rems-in-css/relative-length-units-based-on-font?ref=sidebar
.... ah which does NOT work well on Safaru...
*/
.gridch {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280, 100%), 1fr));
  gap: var(--gap);
}

@media(min-width: 576px ){


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

@media(min-width: 768px ){

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

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

}

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

@media(min-width: 992px) {

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

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

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

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

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

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


}

/*=============================
  flex defaults
=============================*/

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

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

/*=============================
  Divider
=============================*/
hr {
  border: 0;
  height: 1px;
  background: var(--pale-dark, #CCC9BC);
  margin: 1rem 0;
}

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

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

.p-1 {
  padding: var(--gap);
}

.pl-1 {
  padding-left: var(--gap);
}

.pr-1 {
  padding-right: var(--gap);
}

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

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

.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: var(--gap);
}

.ml-1 {
  margin-left: var(--gap);
}

.mr-1 {
  margin-right: var(--gap);
}

.mt-1 {
  margin-top: var(--gap);
}

.mb-1 {
  margin-bottom: var(--gap);
}

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


.w-100{
  width: 100%;
}

/*=============================
  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: var(--gap) 0 calc(var(--gap) * 2) 0;
}

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

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

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

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

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

a:not([class])[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;
}



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


details {
	/* inline-size: 50ch;
   */
   inline-size: 100%;
   transition: content-visibility 0.68s allow-discrete, opacity 0.68s, block-size 0.68s;
   
	@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;
	}
  }


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



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

.contented {
	display: flex;
	flex-direction: column;
	gap: var(--gap-mid);
	font-variant-ligatures: common-ligatures;
}

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

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

.contented>* {
	margin-block: 0;
}

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

.contented ul,
.contented ol{
	margin-block: 0;
	padding-inline-start: 1.25rem;
}

.contented li{
	max-width: 64ch;
	margin-bottom: 1rem;
}

.contented li:last-child{
	margin-bottom: 0;
}