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

:root {

  --theme: #E19E38;

  --accent: #EADFA5;
  --primary-mustard: #E19E38;
  --navy: #0A1C2B;
  
  --secondary-yellow: #EADFA5;
  --secondary-blue: #7DAAB2;

  --dark: hsl(0, 0%, 5%);
  --dark-grey: #141414;
  --grey-mid: hsl(0, 0%, 25%);
  --grey-light: hsl(0, 0%, 50%);

  --grey-very-light: #EBEBEB;
  --pale: #FFFBE9;
  --black: #000;
  --white: #ffffff;

  --grey: #C4C8D0;

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

  /* Modern Font Stacks */

  /* System */
  /* font-family: system, -apple-system, ".SFNSText-Regular", "San Francisco", "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", sans-serif; */

  /* Times New Roman-based serif */
  /* font-family: Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif; */

  /* A modern Georgia-based serif */
  /* font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", Georgia, serif; */

  /*A more traditional Garamond-based serif */
  /* font-family: "Palatino Linotype", Palatino, Palladio, "URW Palladio L", "Book Antiqua", Baskerville, "Bookman Old Style", "Bitstream Charter", "Nimbus Roman No9 L", Garamond, "Apple Garamond", "ITC Garamond Narrow", "New Century Schoolbook", "Century Schoolbook", "Century Schoolbook L", Georgia, serif; */

  /*The Helvetica/Arial-based sans serif */
  /* font-family: Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif; */

  /*The Verdana-based sans serif */
  /* font-family: Corbel, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", Verdana, "Verdana Ref", sans-serif; */

  /*The Trebuchet-based sans serif */
  /* font-family: "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif; */

  /*The heavier "Impact" sans serif */
  /* font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", sans-serif; */

  /*The monospace */
  /* font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace; */

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

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

  --font-serif: 'Quattrocento', 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(0.875rem, 0.83rem + 0.87vw, 1.25rem);
  --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);


/* 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;
  scroll-behavior: smooth;
}

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

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



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


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

@container (min-width: 700px) {
	.grid_1-1 {
		grid-template-columns: 1fr 1fr;
	  }
	
	
	  .grid_1-1-1 {
		grid-template-columns: 1fr 1fr;
	  }
	
}

@container (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;
	  }
	
}

/*=============================
  Divider
=============================*/
hr {
  border: 0;
  height: 2px;
  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 {
  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;
}


.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(even) {
  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: white;
  font-weight: bold;
  text-transform: uppercase;
}


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


.bg_white a[href^='http']::after {
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='0D0D0D' d='M19 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h6v2H5v12h12v-6zM13 3v2h4.586l-7.793 7.793l1.414 1.414L19 6.414V11h2V3z'/%3E%3C/svg%3E");
	transform: translateY(0.25em);
  }



a.no_external_link{
  padding-right: revert;
}

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

audio::-webkit-media-controls-panel{
	background-color: var(--violet);
}
/* audio::-webkit-media-controls-mute-button
audio::-webkit-media-controls-play-button
audio::-webkit-media-controls-timeline-container
audio::-webkit-media-controls-current-time-display
audio::-webkit-media-controls-time-remaining-display
audio::-webkit-media-controls-timeline
audio::-webkit-media-controls-volume-slider-container
audio::-webkit-media-controls-volume-slider
audio::-webkit-media-controls-seek-back-button
audio::-webkit-media-controls-seek-forward-button
audio::-webkit-media-controls-fullscreen-button
audio::-webkit-media-controls-rewind-button
audio::-webkit-media-controls-return-to-realtime-button
audio::-webkit-media-controls-toggle-closed-captions-button */


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


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