/**
Styles from Studio 24
 */

/* Hide visually only - remains available to Assistive Technology */
.visuallyhidden {
  block-size: 1px;
  border: 0;
  clip-path: inset(50%);
  inline-size: 1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
}

.float--r {
  float: right;
}

html {
  scroll-behavior: smooth;
  /* Default scroll-padding for space above an anchor link on scroll */
  scroll-padding-top: 3rem;
}

#cg-logo {
  padding: 0;
  margin:0;
  align-items: center;
  display: flex;
  gap: 10px;
  margin-block-end: 1em;
}
        
.pattern-bg {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'%3E%3Cdefs%3E%3Cpattern id='p' width='22' height='22' patternUnits='userSpaceOnUse'%3E%3Cpath d='M 22 0 L 0 0 0 22' fill='none' stroke='%2372aed7' stroke-width='3'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='22' height='22' fill='none'/%3E%3Crect width='22' height='22' fill='url(%23p)' opacity='0.05'/%3E%3C/svg%3E");
  background-repeat: repeat;
}

/* Set background colour for CG Reports */
body {
  background-color: var(--bg);
}

/* Add a bit of space between bottom of link text and the underline */
a[href] {
  text-underline-offset: 0.2em;
}

.link--button, 
&:visited {
  display: inline-block;
  vertical-align: middle;
  color: var(--link--button--text);  
  background-color: var(--link--button--bg);  
  text-decoration: none;
  padding: 10px; 
  border-radius: 5px; 
/* s24 v13 */
border: solid 2px #005a9c;

  &:active,
  &:hover
  {
    background-color: var(--link--button--bg--hover);
    border-color: #002a56;
  }
}
/* display many buttons */
.links--button {
  display: flex;
  flex-flow: row wrap;
  gap: 1rem;
  margin-block-start: 1rem;
}
/* inverted button colours */
.link--button--inverted {
  background-color: white;
  color: black !important;  
}

/* Inline satus tag */
.link--button--tag {
  font-size: 60%; 
  padding:4px 8px; 
}


/* Table of contents: CG colours for sidebar version */
body.toc-sidebar {
    #toc  {
      background-color: var(--tocsidebar-bg);
    }
    .toc a {
        color: white;
        text-decoration-color: #76d1fe;
      /* s24 v13 */
      color: var(--tocsidebar-link-text);
      text-decoration-color: var(--tocsidebar-link-underline);

        padding: 0.25em;
    }
    /* a:visited, a:hover, a:focus, a:active */
    .toc a:visited {
        color: #bfe6ff;
    /* s24 v13 */
    color: var(--tocsidebar-link-visited-text);
    text-decoration-color: var(--tocsidebar-link-visited-underline);
        
    }
    .toc a:hover, .toc a:active {
        background-color: #161616;
      /* s24 v13 */
      background-color: var(--bg);
    }
}

/* Style default .box class */
.box {
  background-color: var(--box-bg);
  color: var(--box-text);
  margin-block: 2em;
  padding: 20px;
  page-break-inside: avoid;
  border-radius: var(--box-radius);
}
.box > *:first-child {
  margin-block-start: 0
}
.box > *:last-child {
  margin-block-end: 0
}
/* no top margin for the first box on the page */
.box:first-of-type {
  margin-block-start: 0; 
}
/* Less margins for consecutive boxes and those following responsive tables */
.box + .box, .table-wrap + .box {
  margin-block-start: 1rem;
}

/* Usage guidance table uses these styles */
.box table {
  background-color: var(--box-table-bg);
  color: var(--box-table-text);
  border-collapse: collapse;
  inline-size: 100%;
  margin-bottom: 1rem;
  caption {
    margin-top: 0.75rem;
    margin-bottom: 0.5rem;
  }
  th, tr, td {
    border: 2px solid var(--box-table-border); 
    vertical-align: middle;
    padding: 0.75em;
  }
  th {
    background-color: var(--box-table-th-bg);
  }
}

.box td p {
  margin: 0;
}

.box td p + p {
  margin-block-start: .5em
}
.box caption {
  text-align: left;
  font-size: 115%;
  font-style: normal;
  border: none;
  margin-bottom: 0.1em;
}

/* Colours for different .box variants */
/* Blue header box */
.box--head {
  background-color: var(--box-bg--head);
  border-color: var(--box-border--head);
/* s24 v13 */
/* color: var(--box-text--head); */
}
.box--head:first-of-type {
  margin-top: 0;
}
.box--head a {
  color: var(--box-link-text--head);
  text-decoration-color: var(--box-link-text-underline--head);
}

.box--head .link--button {
  color: var(--link--button-text);
  background-color: var(--link--button-bg);
  border-color: var(--link--button-border);
  &:hover {
    color: var(--link--button-text--hover);
    background-color: var(--link--button-bg--hover);
    border-color: var(--link--button-border--hover);
  }
}

/* .box--head a:visited,  */
.box--head a:hover, .box--head a:focus, .box--head a:active {
  color: var(--box-link-text--head);
}
.box--head hr {
  color: var(--box-border--head);
}
/* .box--head h1, .box--head h2, .box--head h3 {
  color: var(--box-text--head);
/* s24 v13 */
color: var(--text);
} */
.box--head h1 {
  font-size: 210%;
  margin-bottom: 0.25em;
}
.box--head h1 + h2 {
  font-size: 105%;
  line-height: 1.5;
}
.box--head h2 + h3 {
  margin-top: 1rem;
}
.box--head table {
  background-color: var(--box-table-bg--head);
  color: var(--box-table-text--head);
  border: solid 2px var(--box-table-border--head);
/* s24 v13 */
   /* caption {
    color: var(--box-text--head);
  } */

  th, tr, td {
    border: 2px solid var(--box-table-border--head); 
  }
  th {
    background-color: var(--box-table-th-bg--head);
  }
}

/* red - warning notice */
.box--warning {
  background-color: var(--box-bg--warning);
}
.box--warning *,
.box--warning a
 {
/* s24 v13 */
/* color: white; */
  
}  

/* Neutral information notice */
.box--information {
  background-color: var(--box-bg--info);
  color: white;
/* s24 v13 */
color: var(--text);
h2 {
  /* color: var(--text); */
}
a {
  color: inherit;
  /* &:visited, &:hover, &:focus, &:active {
    color: #002a56;
    text-decoration: #002a56;
  } */
}

  h2 a {
    text-decoration-thickness: 1px;
  }
}

/* Neutral information notice - alt color */
/* .box--information-alt {
  background-color: var(--bg);
  color: var(--text);
  h2 {
    color: var(--heading-text);
    text-decoration-thickness: 1px;
  }
  a, a:hover, a:active, a:visited  {
    color: var(--a-normal-text);
    text-decoration-color: var(--text);
  }
} */

/* Responsive (scrolling) table styles */
@media screen {
  .table-wrap {
    overflow: auto;
  }
}

/* Icons */
.icon {
  width: 1em;
  position: relative;
  top: 0.15em;
}
.icon--before {
  padding-right: 0.5em;
}



/* Progress indicator */
.progress-list {
  /* first remove any list styles */
  list-style: none;
  margin: 0;
  padding: 0;

  :where(ul, ol, li) {
      margin: 0;
      padding: 0;
  }

  margin-block-end: 20px;

	@media screen and (min-width: 51em) {
		display: flex;
		flex-wrap: wrap;
    justify-content: center;
	}
}

/* Reset base <ol> styles */
.progress-list ::marker {
	content: ''!important;
}

.progress-list li {
	position: relative;
  /* connecting lines */
	&::after {
		background-color: var(--progress-lines);
		block-size: 13px;
		content: '';
		inline-size: 3px;
		inset-block-end: -16px;
		inset-inline-start: 23px; 
		position: absolute;

		@media screen and (min-width: 51em) {
			block-size: 3px;
			inline-size: 100%;
			inset-block: 32px auto;
			inset-inline-start: 50%;

      z-index: 0;
		}
	}

	+ li {
		margin-block-start: 20px;

		@media screen and (min-width: 51em) {
			margin-block-start: 0;
		}
	}
}


.progress-list li.complete {
	&::after {
		background-color: var(--progress-lines);
	}
}


.progress-list li:last-child {
	&::after {
		display: none;
	}
}


.progress-step__inner {
	align-items: center;
	display: flex;

	@media screen and (min-width: 51em) {
		flex-direction: column;
		padding-block-start: 10px;
		text-align: center;
	}

	> a {

		padding: 10px;

		@media screen and (min-width: 51em) {
			inline-size: 150px;
		}
	}
}

.progress-step__marker {
	align-items: center;
	background-color: var(--box-bg--head);
	block-size: 44px;
	border: solid 3px var(--progress-lines);
	border-radius: 50%;
	display: flex;
	inline-size: 44px;
	justify-content: center;

  z-index: 1;

	@media screen and (min-width: 51em) {
		box-shadow: 0 0 0 10px var(--box-bg--head);
	}
}


.progress-step__marker.complete {
	background-color: var(--progress-complete);
	border-color: var(--progress-lines);
	color: white;
	position: relative;

	&::before,
	&::after {
		background-color: var(--progress-complete);
		content: '';
		position: absolute;
	}

	&::before {
		block-size: 44px;
		border-radius: 50%;
		inline-size: 44px;
		inset-block-start: 0;
		inset-inline-start: 0;
	}

	&::after {
		block-size: 9px;
		border: solid;
		border-block-start-color: transparent;
		border-width: 0 0 3px 3px;
		inline-size: 18px;
		inset-block-start: 13px;
		inset-inline-start: 10px;
		transform: rotate(-45deg);
	}
}

/* description list in a grid - used for editors */
dl.grid {
  @supports (grid-row-start: auto) {
		display: grid;
    gap: 0.75rem 0.5rem;
    grid-template-columns: fit-content(50%);

		dt, dd {
      line-height: 1.5;
		}
   
		dd {
      grid-column-start: 2;
      margin: 0;
		}

    dd + dt,
    dt + dd,
    dd + dd {
        margin-block-start: 0;
    }
	}
}



/* PRINT STYLES */
@media print {
  html {
    scroll-padding-top: none;
  }
  #announcement-bar {
    position: relative;
    box-shadow: none;
  }
  #announcement-dismiss,
  .progress-list {
    display: none !important;
  }
  .box > *,
  .box a,
  .box--head > *,
  .box--head a,
  .box--information > *,
  .box--information a,
  caption,
  li, 
  strong
  {
    color: black !important;
    padding:0;
  }
}