/******************************************************************************
 *          Component styles for W3C Community Group specifications
 *
 * Original styles by Studio 24, from
 * w3c/cg-program spec-mockups/v13/assets/cg-spec.css.
 *
 * This sheet only *consumes* custom properties; they are declared in base.css
 * (light) and dark.css (dark). Load order matters:
 *   base.css, cg-spec.css, dark.css
 *
 ******************************************************************************/

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

/* 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 {
  display: inline-block;
  vertical-align: middle;
  background-color: var(--link--button--bg);
  color: var(--link--button--text);
  border: solid 2px var(--link--button--border);
  text-decoration: none;
  padding: 10px;
  border-radius: 5px;
  &:visited {
    color: var(--link--button--text);
  }
  &:active,
  &:hover {
    background-color: var(--link--button--bg--hover);
    color: var(--link--button--text--hover);
    border-color: var(--link--button--border--hover);
  }
}
/* display many buttons */
.links--button {
  display: flex;
  flex-flow: row wrap;
  gap: 1rem;
  margin-block-start: 1rem;
}
/* inverted button colours */
.link--button--inverted,
.link--button--inverted:visited {
  background-color: var(--link--button--text);
  color: var(--link--button--bg);
}

/* A list with no marker and no indent */
.clean-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Inline status 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: 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: var(--tocsidebar-link-visited-text);
        text-decoration-color: var(--tocsidebar-link-visited-underline);
    }
    .toc a:hover, .toc a:active {
        background-color: var(--tocsidebar-link-hover-bg);
    }
}

/* Style default .box class */
.box {
  background-color: var(--box-bg);
  color: var(--box-text);
  margin-block: 2em;
  padding: 20px;
  page-break-inside: avoid;
  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);
  color: var(--box-text--head);
}
.box--head:first-of-type {
  margin-top: 0;
}
/* Restricted to real links -- the metadata script leaves an <a> without an href
   when it has no URL to offer, and that must not read as interactive. */
.box--head a:where([href]) {
  color: var(--box-link-text--head);
  text-decoration-color: var(--box-link-underline--head);
}
/* .box--head a:where([href]):visited,  */
.box--head a:where([href]):hover, .box--head a:where([href]):focus, .box--head a:where([href]):active {
  color: var(--box-link-text--head);
}
/* Outranks both the head box links above and base.css's a[href] */
.box--head .link--button {
  color: var(--link--button--text);
  &:active,
  &:hover {
    color: var(--link--button--text--hover);
  }
}
.box--head hr {
  color: var(--box-border--head);
}
.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);
  th, tr, td {
    border: 2px solid var(--box-table-border--head); 
  }
  th {
    background-color: var(--box-table-th-bg--head);
  }
}

/* Usage guidance / header icons */
.box--head .icon {
  color: var(--icon--head);
}

/* red - warning notice */
.box--warning {
  background-color: var(--box-bg--warning);
}

/* Neutral information notice */
.box--information {
  background-color: var(--box-bg--info);
  color: var(--text);
  a {
    color: inherit;
  }
  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);
  }
}

/* Status metadata that js/cg-metadata.js could not supply. Nothing in the
   document claims to be current status, so a region it cannot build says so
   rather than sitting empty, and a value the collectors do not have is marked
   in place rather than dropped. Both inherit their colour: they appear on the
   head box, inside the information boxes, and on the page background. Italic
   rather than a lighter colour, so the contrast is not reduced. */
.cg-metadata-unavailable,
.cg-metadata-missing {
  color: inherit;
  font-style: italic;
}

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



/* ---- BETA -------------------------------------------------------------- *
 * Temporary notice
 * ------------------------------------------------------------------------ */
#beta-feedback-notice {
  background-color: var(--warning-bg);
  color: var(--warning-text);
  border-radius: var(--box-radius);
  font-size: 90%;
  margin: 0 0 1rem;
  padding: 0.6em 1em;
}
#beta-feedback-notice a,
.cg-incubation-warning a {
  color: inherit;
  text-decoration-thickness: 1px;
}

/* Incubation warning, added by cg-fixup.js on top of base.css's
   .outdated-warning: orange instead of maroon. */
.cg-incubation-warning {
  background: var(--warning-bg);
  box-shadow: 0 0 1em;
}
.cg-incubation-warning,
.cg-incubation-warning button {
  color: var(--warning-text);
}
/* Keep the text clear of the hide button on the right and of the fixed
   #toc-nav on the left, which matters once the text wraps. */
.cg-incubation-warning.outdated-collapsed {
  box-sizing: border-box;
  padding: 0 3.5em;
}

/* PRINT STYLES */
@media print {
  html {
    scroll-padding-top: auto;
  }
  /* BETA: see above. */
  #beta-feedback-notice,
  .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;
  }
}