/*  ARGUMENTS.CSS */

/* VARIABLES */
:root {
  --blue-base: #182339;

  --intro-dark: #233a67;
  --back-decor-intro: #22345b;
  --blue-preface: #0f1114;

  --green-dark: #06422d;
  --green-dark-two: #214c4f;
  --green-preface: #214c4f;
  --green-bright: #0b7b54;
  --green-bright-two: #2c8c69;
  --back-decor-green: #34A77D;

  --red-darker: #421006;
  --red-dark: #59170a;
  --red-bright: #b62a10;
  --red-preface: #b62a10;
  --back-decor-red: #ee5959;

  --footnotes-gray: #595959;
  --ref-gray: #6b6b6b;
  --ref-footnotes-gray: #757575;
  --ref-bubble-gray: #dcdcdc;
  --lighter-gray: #ececf0;
  --bubble-background: #fff;

  --bubble-link: #192392;
  --bubble-link-hover: #0b30f3;

  --main-font: "fut", "Roboto", sans-serif;
  --condensed-font: "Fut-cond", "Roboto Condensed", sans-serif;

  --width-padding: calc(2vw - 10px);
  --dark-gray: #666666;
  /* Added missing variable used in .footnotes:before */
  --ref-sources-gray: #757575;
  /* Added missing variable used in ref.footnotes */
}

@font-face {
  font-display: swap;
  font-family: 'Fut';
  font-style: normal;
  font-weight: 400;
  src: local('Fut'), local('Fut'),
    url(/fonts/fut.woff) format('woff');
}

@font-face {
  font-display: swap;
  font-family: 'Fut-cond';
  font-style: normal;
  font-weight: 400;
  src: local('fut-condensed'), local('fut-condensed'),
    url(/fonts/fut-condensed.woff2) format('woff2');
}

.sidebar-nav {
  /* For preparation */
  position: absolute;
  top: 0;
  width: clamp(320px, 100vw, 350px);
  margin: 0;
  padding-bottom: 200px;
}

.arguments-page-sidebar {
  background: #182339;
}

.arguments-page-brand {
  font-size: 1.6em;
  margin: 45px 0 0 auto;
  display: block;
  background: #0f1624;
  border-radius: 0 147px 0 0;
}

/*  CUSTOM INLINE TAGS   */
#left-pane {
  background: #182339 !important;
}

ref {
  color: var(--ref-gray);
}

ref.bubble {
  color: var(--ref-bubble-gray);
}

ref.footnotes {
  color: var(--ref-sources-gray);
}

ind {
  padding-left: 8px;
  display: block;
}

evid {
  display: block;
}

/* ARGUMENTS PAGE */
.arguments-page {
  background-color: #182339;
  padding: 100px calc(50vw - 450px) 100px clamp(7px, calc(22vw - 50px), calc(15vw - 72px));
  z-index: 0;
  /* This is required for some reason to keep the Intro H2 clickable */
  position: relative;
  font-size: calc(1.5rem + .05vw);
  font-weight: 400;
}

.arguments-page ul {
  padding: 0;
}

/* TITLE */
.page-title {
  color: white;
  width: 100%;
  padding: 75px 10px;
  margin: 0;
  font-size: calc(3.5rem + 1vw);
  text-align: center;
  font-family: "Fut-cond";
  font-weight: bold;
}

/* Donation Arguments Box */
#donation-appeal {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 98%;
  border-radius: 20px;
  background-color: #21b37d;
  color: white;
  padding: 20px 50px;
  margin: 1%;
  box-shadow: 0 8px 10px rgba(3, 4, 5, .8);
  z-index: 1000;
}

#close-appeal {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: red;
  color: white;
  border: none;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  z-index: 1000;
}

#close-appeal::before, #close-appeal::after {
  content: '';
  position: absolute;
  cursor: pointer;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 2px;
  background-color: white;
  transform-origin: center;
}

#close-appeal::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

#close-appeal::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

#close-appeal:hover {
  background-color: darkred;
}

/* PREFACE DIV */
.opener {
  top: -50px;
}

.points-preface-div {
  display: block;
  list-style: none;
  font-size: clamp(4rem, 16vw, 6rem);
  font-style: italic;
  font-family: var(--condensed-font);
  margin: 90px 25px 0px 0px;
  padding: 20px 20px 10px 50px;
  right: 20px;
  width: calc(10vw + 700px);
  text-align: left;
  left: -20px;
  height: calc(72px + 4vw);
  position: relative;
  color: #c8c8c8;
  z-index: -10;
  font-weight: bold;
}

.intro.points-preface-div {
  background-image: linear-gradient(104deg, #182339 0%, #182339 4%, hsl(220deg 48% 29%) 17%, hsl(220deg 48% 30%) 25%, #18233900 100%);
}

.green.points-preface-div {
  background-image: linear-gradient(104deg, #182339 0%, #182339 4%, var(--green-preface) 17%, var(--green-preface) 25%, #18233900 100%);
}

.red.points-preface-div {
  background-image: linear-gradient(to right, #182339 0%, #523140 17%, #523140 25%, #18233900 100%);
}

/* ARGUMENTS CONTAINER */
.bubble-container {
  position: relative;
}

.bubbles_intro_container {
  background-image: linear-gradient(to right, #4d4d4d 0, transparent 7px);
}

.bubbles_intro_container a:focus {
  outline: 0;
}

/* ACCORDION / BUBBLES */
.point-li {
  padding: 0;
  list-style-type: none;
}

/* ACCORDION-HEADER */
.accordion-header, .accordion-header-intro {
  color: #b6bfcf;
  font-weight: 300;
  font-size: calc(2rem + .8vw);
  font-family: "fut-cond";
  margin-left: clamp(25px, 3vw, 50px);
  margin-top: 18px;
  margin-bottom: -2px;
  display: block;
  text-indent: -23px;
  padding: 14px 4px 10px 15px;
  cursor: pointer;
  position: relative;
  z-index: 6;
}

.active>.accordion-header, .active>.accordion-header-intro {
  text-align: center;
  padding: 12px 25px 5px 25px;
  margin-top: 140px;
  margin-right: 2vw;
}

.active>.accordion-header-intro {
  color: var(--intro-dark);
}

.active>.accordion-header.green {
  color: var(--green-bright);
}

.active>.accordion-header.red {
  color: var(--red-bright);
}

.back-decor {
  max-width: 98%;
  width: 100vw;
  border-radius: 100px;
  height: 350px !important;
  position: absolute;
  z-index: -2;
  top: -100px;
}

.back-decor.blue {
  background: linear-gradient(180deg, var(--back-decor-intro) 0%, #182339 99.99%);
}

.back-decor.green {
  background: linear-gradient(180deg, var(--back-decor-green) 0%, #182339 99.99%);
}

.back-decor.red {
  background: linear-gradient(180deg, var(--back-decor-red) 0%, #182339 99.99%);
}

/* BUBBLE */
.bubble {
  font-family: var(--main-font);
  position: relative;
  background-color: var(--bubble-background);
  padding: calc(125px + 2vw) calc(25px + var(--width-padding)) calc(5px + var(--width-padding)) calc(25px + var(--width-padding));
  margin: calc(-35px - 1vw) calc(15px + 1vw) 50px calc(15px + 1vw);
  border-radius: 20px;
  line-height: 2.4rem;
  z-index: 0;
}

.green.bubble {
  color: var(--green-dark);
}

.red.bubble {
  color: var(--red-darker);
}

.bubble a {
  color: var(--bubble-link);
  text-decoration: underline;
}

.bubble a:hover {
  color: var(--bubble-link-hover);
}

.bubble ul {
  -webkit-padding-start: 0;
  padding-inline-start: 0;
  list-style-type: square;
  list-style-position: inside;
  text-indent: -23px;
}

.bubble li {
  padding: 2px 0px 8px 27px;
}

.bubble p+ul {
  margin-top: -5px;
}

.bubble sup {
  font-weight: 700;
  color: #4e4e4e;
}

.bubble blockquote {
  padding: 10px 1vw;
}

.green blockquote {
  border-left: 8px solid #34a77d26;
}

.red blockquote {
  border-left: 8px solid #ee595926;
}

.bubble:before {
  content: '';
  position: absolute;
  border-color: transparent #fff;
  height: 20px;
  width: 30px;
  display: block;
  transform: translateY(-50%);
  bottom: auto;
  border-style: solid;
  border-width: 28px 29px 28px 0;
  left: -22px;
  top: 65px;
}

.bubble img {
  width: clamp(100px, 57%, 150px);
  max-height: 150px;
  margin-left: auto;
  margin-right: auto;
  margin-top: -10px;
  margin-bottom: calc(25px + 2vw);
  display: block;
}

.intro.bubble img {
  -webkit-filter: brightness(.45) hue-rotate(-160deg) opacity(0.9);
  filter: brightness(.45) hue-rotate(-160deg) opacity(0.9);
}

.green.bubble img {
  -webkit-filter: hue-rotate(173deg) saturate(0.6) brightness(1.5);
  filter: hue-rotate(173deg) saturate(0.6) brightness(1.5);
}

.red.bubble img {
  -webkit-filter: brightness(.75) opacity(.7);
  filter: brightness(.75) opacity(.7);
}

.intro.bubble {
  color: #0b2f54;
}

.intro.bubble:before {
  content: none;
}

.green.bubble:before {
  border-color: transparent #fff;
}

.red.bubble:before {
  border-color: transparent #fff;
}

.bubble:after {
  content: '';
  clear: both;
  display: table;
}

/* BUBBLE RESPONSE */
.response {
  color: #2f3849 !important;
  background-color: var(--lighter-gray);
  padding: 20px 20px 8px 20px;
  box-shadow: 0px 2px 11px #00000059;
  margin-top: 30px;
  margin-right: calc(-20px - var(--width-padding));
  margin-bottom: calc(-55px - .8vw);
  margin-left: calc(-20px - var(--width-padding));
  left: -28px;
  z-index: 5;
}

/* Red responses (inside green bubbles) */
.green .response {
  color: var(--red-dark) !important;
  background-color: #f6ecec;
  box-shadow: 0px 2px 11px rgba(182, 42, 16, 0.3);
  border-left: 4px solid rgba(182, 42, 16, 0.2);
}

/* Green responses (inside red bubbles) */
.red .response {
  color: var(--green-dark-two) !important;
  background-color: #deeae7;
  box-shadow: 0px 2px 11px rgba(11, 123, 84, 0.3);
  border-left: 4px solid rgba(11, 123, 84, 0.2);
}

.response:before {
  content: '';
  position: absolute;
  border-color: transparent var(--lighter-gray) !important;
  height: 20px;
  width: 30px;
  display: block;
  inset: 30px auto auto -25px;
  border-style: solid;
  border-width: 22px 23px 22px 0;
  -webkit-filter: drop-shadow(-4px 2px 2px #0000003d);
  filter: drop-shadow(-4px 2px 2px #0000003d);
}

/* Red response arrow (inside green bubbles) */
.green .response:before {
  -webkit-filter: drop-shadow(-4px 2px 2px rgba(182, 42, 16, 0.2));
  filter: drop-shadow(-4px 2px 2px rgba(182, 42, 16, 0.2));
}

/* Green response arrow (inside red bubbles) */
.red .response:before {
  -webkit-filter: drop-shadow(-4px 2px 2px rgba(11, 123, 84, 0.2));
  filter: drop-shadow(-4px 2px 2px rgba(11, 123, 84, 0.2));
}

.response blockquote {
  border-left: 8px solid hsl(240deg 12% 83%);
  text-indent: 0;
}

/* Red response blockquotes (inside green bubbles) */
.green .response blockquote {
  border-left: 8px solid rgba(182, 42, 16, 0.1);
}

/* Green response blockquotes (inside red bubbles) */
.red .response blockquote {
  border-left: 8px solid rgba(11, 123, 84, 0.1);
}

/* FOOTNOTES */
.footnotes {
  color: var(--footnotes-gray);
  font-family: arial;
  background-color: var(--lighter-gray);
  background: linear-gradient(0deg, var(--lighter-gray) 0%, var(--lighter-gray) 95%, #ffffff00 100%);
  font-size: 1.4rem;
  margin: calc(-15px - 2vw);
  margin-top: 20px;
  line-height: 2rem;
  padding: 75px calc(5px + 1vw) calc(10px + 1vw) calc(10px + 1vw);
  list-style-position: inside;
  position: relative;
  border-radius: 20px;
  text-indent: 0px;
  z-index: -1;
}

.footnotes.intro {
  padding-top: 30px;
  margin-top: 20px;
}

.footnotes~.response:before {
  content: none;
}

.intro>.footnotes:before {
  content: none;
}

.footnotes a {
  text-decoration: underline;
  color: #69488a;
}

.footnotes ol {
  list-style-position: inside;
  padding: 0;
}

.footnotes ul {
  list-style-position: inside;
  padding: 0;
  list-style-type: square;
}

.footnotes li {
  padding: 0;
  text-indent: 0;
}

.footnotes ul ul, ol ul {
  list-style-position: inside;
}

.footnotes ol ol, ul ol {
  list-style-position: inside;
}

.footnotes li li {
  padding-left: 2rem;
}

.footnotes blockquote {
  font-size: inherit;
  border-left: 12px solid rgba(0, 0, 0, 0.04) !important;
  margin-left: 0.8vw;
  list-style-position: inside !important;
  margin-bottom: 3px;
  padding: 0px;
}

.footnotes li blockquote li {
  padding-left: 0rem;
}

/* MEDIA QUERIES */
@media (min-width: 690px) {
  #site-wrapper {
    padding-left: 350px;
  }

  #site-wrapper.untoggled {
    padding-left: 0;
  }

  #site-wrapper.untoggled #left-pane {
    width: 0;
  }

  #site-wrapper.untoggled #right-pane {
    position: relative;
    margin-right: 0;
  }

  #left-pane {
    width: clamp(320px, 100vw, 350px);
  }
}