/******************** NET BACKGROUND ********************/
/* The net hangs from the top of the page. Where it ends and how it falls away
   on the diagonal is drawn into the artwork, so it is placed once, at the top,
   and scaled to the width it was drawn at. */
body {
  min-height: 100vh;
  position: relative;
  z-index: 0;
}

body::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
@media (max-width: 650px) {
  body::before {
    background-image: url("../assets/img/net-diagonal-mobile.svg");
    background-size: 70% auto;
  }
}
@media (min-width: 650px) and (max-width: 1079px) {
  body::before {
    background-image: url("../assets/img/net-diagonal-tablet.svg");
    background-size: 50% auto;
  }
}
@media (min-width: 1080px) {
  body::before {
    background-image: url("../assets/img/net-diagonal-desktop.svg");
    background-size: 60% auto;
  }
}
body::before {
  background-repeat: no-repeat;
  background-position: top right;
}

[dir=rtl] body::before {
  transform: scaleX(-1);
}

body:has(.english.is-selected) span[lang=en] {
  display: inline;
}
body:has(.english.is-selected) span[lang=ar] {
  display: none;
}

body:has(.arabic.is-selected) span[lang=en] {
  display: none;
}
body:has(.arabic.is-selected) span[lang=ar] {
  display: inline;
}

/******************** HEADING ********************/
header {
  display: flex;
  justify-content: space-between;
  padding-bottom: 16px;
}
header.regular-spacing {
  margin-top: 0;
  padding-top: 32px;
}
@media (max-width: 759px) {
  header {
    flex-direction: column;
  }
  header .navs {
    flex-direction: column;
  }
  header .navs span {
    display: none;
  }
}

.headings {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
@media (max-width: 759px) {
  .headings {
    padding-bottom: 22px;
  }
}
.headings a.project-title {
  color: var(--green);
  font-family: "Libre Franklin", sans-serif;
  font-weight: 700;
  font-size: 19px;
  line-height: 26px;
  letter-spacing: 18%;
  text-transform: uppercase;
  margin: 0;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.3s ease-in-out;
}
.headings a.project-title:hover {
  opacity: 0.8;
}
.headings .project-subtitle {
  font-family: "Georgia", serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 24px;
  margin: 0;
}

/******************** MARTYR INFO ********************/
@media (min-width: 1080px) {
  main {
    display: flex;
    justify-content: space-between;
  }
}

.martyr-images-desktop {
  display: flex;
  gap: 20px;
  flex-direction: column;
  padding-top: 64px;
}
@media (max-width: 1079px) {
  .martyr-images-desktop {
    display: none;
  }
}

body:has(.english.is-selected) .martyr-images-desktop {
  padding-right: 32px;
}

body:has(.arabic.is-selected) .martyr-images-desktop {
  padding-left: 32px;
}

.label {
  font-family: "Libre Franklin", sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 12px;
  letter-spacing: 10%;
  text-transform: uppercase;
}

.label:lang(ar) {
  font-size: 18px;
}

.martyr-top {
  display: flex;
  flex-direction: column;
  padding-bottom: 64px;
}
@media (min-width: 1080px) {
  .martyr-top {
    flex-direction: column;
  }
}
.martyr-top .detail {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.martyr-top .info {
  font-family: "Georgia", serif;
  font-weight: 400;
  font-size: 22px;
  line-height: 100%;
}
.martyr-top .martyr-bio {
  padding-bottom: 36px;
}

.martyr-info {
  display: flex;
  max-width: 820px;
  width: 100%;
  justify-content: space-between;
}
@media (max-width: 759px) {
  .martyr-info {
    flex-direction: column;
  }
}

.martyr-details {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.martyr-images-mobile-wrapper {
  position: relative;
}
.martyr-images-mobile-wrapper .martyr-images-mobile {
  display: flex;
  gap: 20px;
  width: calc(100vw - 32px);
  padding-right: 32px;
  overflow: scroll;
}
.martyr-images-mobile-wrapper .martyr-images-mobile::-webkit-scrollbar {
  display: none;
}
.martyr-images-mobile-wrapper .martyr-images-gradient {
  position: absolute;
  top: 0;
  left: 100%;
  width: 32px;
  height: 100%;
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, var(--background-color) 100%);
}
@media (min-width: 1080px) {
  .martyr-images-mobile-wrapper {
    display: none;
  }
}

.martyr-images-mobile-wrapper:lang(ar) .martyr-images-mobile {
  padding-right: 0;
  padding-left: 32px;
}
.martyr-images-mobile-wrapper:lang(ar) .martyr-images-gradient {
  left: -32px;
  background: linear-gradient(to left, rgba(255, 255, 255, 0) 0%, var(--background-color) 100%);
}

.martyr-image {
  display: block;
}
@media (max-width: 1079px) {
  .martyr-image {
    height: 200px;
  }
}
@media (min-width: 1080px) {
  .martyr-image {
    width: 390px;
    height: auto;
  }
}

/******************** TESTIMONY ********************/
.testimony {
  padding-bottom: 64px;
}

/******************** TESTIMONY HEADER ********************/
/* Who is speaking and their player stay put while you read. Sticky rather than
   fixed, so each one lets go at the end of its own testimony. */
.testimony-header {
  position: sticky;
  top: 0;
  z-index: 2;
  /* Runs into the gutters so the background covers what scrolls under it */
  margin-inline: -32px;
  margin-top: 48px;
  margin-bottom: 16px;
  padding: 16px 32px 24px;
  background-color: var(--background-color);
}

/******************** TESTIMONY INFO ********************/
.testimony-info {
  font-style: italic;
}
.testimony-info.after {
  margin-top: 32px;
}

/******************** CONTRIBUTOR INFO ********************/
.contributor-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.contributor-info .speaker-name {
  font-family: "Georgia", serif;
  font-weight: 400;
  font-size: 34px;
  line-height: 100%;
}
.contributor-info {
  /* This element shares CSS with the audio elapsed time, so it is defined in the audio player section below */
}
.contributor-info .date-submitted {
  margin-top: 2px;
}

/******************** AUDIO PLAYER ********************/
.audio-player {
  --track-height: 8px;
  --thumb-height: 22px;
  margin-top: 16px;
}

.audio-elapsed,
.date-submitted {
  font-family: "Libre Franklin", sans-serif;
  font-weight: 500;
  font-size: 13px;
  line-height: 13px;
  letter-spacing: 0.05em;
  font-variant-numeric: tabular-nums;
  opacity: 0.7;
  margin-bottom: 10px;
}

.audio-controls {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 820px;
  direction: ltr;
}

/* Play/pause, drawn as the waveform mark */
.audio-toggle {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.audio-toggle .audio-waveform,
.audio-toggle .audio-play,
.audio-toggle .audio-pause {
  width: 20px;
  height: 24px;
  fill: var(--green);
  transition: opacity 0.2s ease-in-out;
}
.audio-toggle .audio-waveform {
  width: 34px;
  margin-left: 6px;
}
.audio-toggle:hover .audio-waveform, .audio-toggle:hover .audio-play, .audio-toggle:hover .audio-pause {
  opacity: 0.8;
}

/* Show only the label and icon for the current state, so the button reads correctly to
   screen readers and the language toggle still translates both */
.audio-player[data-state=playing] .audio-label-play,
.audio-player[data-state=playing] .audio-play,
.audio-player[data-state=paused] .audio-label-pause,
.audio-player[data-state=paused] .audio-pause {
  display: none;
}

/* Animate the waveform bars up and down when audio is playing */
.audio-player[data-state=playing] .audio-waveform rect {
  animation: waveform 0.5s linear infinite;
  transform-origin: center;
}

.audio-player[data-state=playing] .audio-waveform rect:nth-child(1) {
  animation-delay: 0s;
}

.audio-player[data-state=playing] .audio-waveform rect:nth-child(5) {
  animation-delay: 0.1s;
}

.audio-player[data-state=playing] .audio-waveform rect:nth-child(4) {
  animation-delay: 0.2s;
}

.audio-player[data-state=playing] .audio-waveform rect:nth-child(2) {
  animation-delay: 0.3s;
}

.audio-player[data-state=playing] .audio-waveform rect:nth-child(6) {
  animation-delay: 0.4s;
}

.audio-player[data-state=playing] .audio-waveform rect:nth-child(3) {
  animation-delay: 0.5s;
}

@keyframes waveform {
  0% {
    transform: scaleY(1);
  }
  50% {
    transform: scaleY(0.5);
  }
  100% {
    transform: scaleY(1);
  }
}
.audio-scrubber {
  flex: 1;
  min-width: 0;
  height: var(--thumb-height);
  margin: 0;
  padding: 0;
  background: none;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}
.audio-scrubber::-webkit-slider-runnable-track {
  height: var(--track-height);
  border-radius: calc(var(--track-height) / 2);
  background: var(--text-color);
}
.audio-scrubber::-moz-range-track {
  height: var(--track-height);
  border-radius: calc(var(--track-height) / 2);
  background: var(--text-color);
}
.audio-scrubber::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 10px;
  height: var(--thumb-height);
  border: 0;
  border-radius: 3px;
  background: var(--green);
  /* Centre the thumb on the track */
  margin-top: calc((var(--track-height) - var(--thumb-height)) / 2);
}
.audio-scrubber::-moz-range-thumb {
  width: 10px;
  height: var(--thumb-height);
  border: 0;
  border-radius: 3px;
  background: var(--green);
}
.audio-scrubber:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 4px;
  border-radius: 2px;
}

.audio-replay {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--green);
  cursor: pointer;
  transition: opacity 0.2s ease-in-out;
}
.audio-replay svg {
  width: 20px;
  height: 20px;
  fill: var(--background-color);
}
.audio-replay:hover {
  opacity: 0.8;
}

/******************** TRANSCRIPT ********************/
/* A closed transcript shows its opening lines, so the page reads as a list of
   who spoke rather than a wall of text or a row of anonymous buttons */
.transcript-details {
  /* Five lines of the 32px transcript leading; the script reads it back */
  --transcript-peek: 160px;
  display: flex;
  /* Puts the control under the lines it reveals; summary has to lead in the DOM */
  flex-direction: column-reverse;
  align-items: flex-start;
  gap: 16px;
}

.transcript-details::details-content {
  /* Max rather than a fixed height, so a short transcript leaves no dead space */
  max-block-size: var(--transcript-peek);
  overflow: hidden;
  /* Overrides the UA's hidden, which would leave nothing to preview */
  content-visibility: visible;
  /* Fades the cropped text out rather than cutting it mid-line */
  mask-image: linear-gradient(to bottom, #000 45%, transparent);
}

/* Opens in one step: a transcript is thousands of pixels tall, so a height
   animation would be a long slide past text nobody is reading yet */
.transcript-details[open]::details-content,
.transcript-details[data-fits]::details-content {
  max-block-size: none;
  mask-image: none;
}

/* A transcript that was never cropped has nothing to reveal */
.transcript-details[data-fits] > summary {
  display: none;
}

.transcript-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  /* Drops the disclosure triangle in Firefox; inline-flex covers the rest */
  list-style: none;
  font-family: "Libre Franklin", sans-serif;
  font-weight: 500;
  font-size: 13px;
  line-height: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--green);
  transition: opacity 0.2s ease-in-out;
}
.transcript-toggle::-webkit-details-marker {
  display: none;
}
.transcript-toggle:hover {
  opacity: 0.8;
}
.transcript-toggle:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 4px;
  border-radius: 2px;
}
.transcript-toggle .transcript-toggle-caret {
  width: 12px;
  height: 8px;
  fill: none;
  stroke: var(--green);
  stroke-width: 2;
  stroke-linecap: round;
  transition: transform 0.2s ease-in-out;
}

.transcript-details[open] .transcript-toggle-caret {
  transform: rotate(180deg);
}
.transcript-details[open] .transcript-toggle-expand {
  display: none;
}

.transcript-details:not([open]) .transcript-toggle-collapse {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .transcript-toggle-caret {
    transition: none;
  }
}
.transcript-paragraph {
  margin: 0 0 32px;
}
.transcript-paragraph:last-child {
  margin-bottom: 0;
}

/* Where the paragraph starts in the audio, on its own line above it. A button
   so the keyboard can jump too, stripped back to read as plain text. */
.transcript-timestamp {
  display: block;
  padding: 0;
  border: 0;
  background: none;
  text-align: inherit;
  cursor: pointer;
  font-family: "Libre Franklin", sans-serif;
  font-weight: 500;
  font-size: 13px;
  line-height: 13px;
  letter-spacing: 0.05em;
  font-variant-numeric: tabular-nums;
  color: var(--grey);
  margin-bottom: 8px;
}
.transcript-timestamp:hover {
  color: var(--green);
}
.transcript-timestamp:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Every line seeks the audio to its own timecode */
.transcript-line {
  cursor: pointer;
}
.transcript-line:hover {
  color: var(--green);
}

.highlight {
  color: var(--green);
}

/* A transcript that is text-only has no audio to seek, so it is not interactive */
.transcript.text-only-true {
  pointer-events: none;
}

/******************** ABOUT PAGE ********************/
@media (max-width: 759px) {
  .about-page {
    margin-top: 96px;
  }
}

.dot-sprite {
  display: inline-block;
  width: 25px;
  height: 25px;
  background-image: url("../assets/img/dots.svg");
  background-size: 850px;
}

.dot-0 {
  background-position: 0px 0px;
}

.dot-1 {
  background-position: 25px 0px;
}

.dot-2 {
  background-position: 50px 0px;
}

.dot-3 {
  background-position: 75px 0px;
}

.dot-4 {
  background-position: 100px 0px;
}

.dot-5 {
  background-position: 125px 0px;
}

.dot-6 {
  background-position: 150px 0px;
}

.dot-7 {
  background-position: 175px 0px;
}

.dot-8 {
  background-position: 200px 0px;
}

.dot-9 {
  background-position: 225px 0px;
}

.dot-10 {
  background-position: 250px 0px;
}

.dot-11 {
  background-position: 275px 0px;
}

.dot-12 {
  background-position: 300px 0px;
}

.dot-13 {
  background-position: 325px 0px;
}

.dot-14 {
  background-position: 350px 0px;
}

.dot-15 {
  background-position: 375px 0px;
}

.dot-16 {
  background-position: 400px 0px;
}

.dot-17 {
  background-position: 425px 0px;
}

.dot-18 {
  background-position: 450px 0px;
}

.dot-19 {
  background-position: 475px 0px;
}

.dot-20 {
  background-position: 500px 0px;
}

.dot-21 {
  background-position: 525px 0px;
}

.dot-22 {
  background-position: 550px 0px;
}

.dot-23 {
  background-position: 575px 0px;
}

.dot-24 {
  background-position: 600px 0px;
}

.dot-25 {
  background-position: 625px 0px;
}

.dot-26 {
  background-position: 650px 0px;
}

.dot-27 {
  background-position: 675px 0px;
}

.dot-28 {
  background-position: 700px 0px;
}

.dot-29 {
  background-position: 725px 0px;
}

.dot-30 {
  background-position: 750px 0px;
}

.dot-31 {
  background-position: 775px 0px;
}

.dot-32 {
  background-position: 800px 0px;
}

.dot-33 {
  background-position: 825px 0px;
}