@import './tailwind.css';

* { box-sizing: border-box; }

.ve-component {
  /* clear: both; */
  z-index: 2;
  position: relative;
}

ve-media-card {
  height: 100%;
}

.manifest-popup {
  border: 1px solid #555;
  background-color: white;
  width: 350px;
  max-height: 500px;
  overflow-y: scroll;
  border-radius: 6px;
  padding: 4px;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
}

main > p:first-of-type {
  padding-top: 24px;
}

.markdown-section h1,
.markdown-section h2,
.markdown-section h3,
.markdown-section h4,
.markdown-section h5,
.markdown-section h6 {
  line-height: 1.2;
}

main > section,
main > p {
  padding: 0 1rem;
}

.right {
  float: right;
  top: 0;
  width: calc(50% - 12px);
}

.visible {
  visibility: visible;
  opacity: 1;
  transition: opacity .5s linear;
}
.hidden {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s .5s, opacity .5s linear;
}

#juncture section {
  display: flow-root;
  position: relative;
}

#juncture > section {
  margin-top: 2rem;
}

#juncture > section > section,
#juncture > section > section > section {
  margin-top: 2rem;
}

#juncture > section > section > section > section,
#juncture > section > section > section > section > section,
#juncture > section > section > section > section > section > section {
  margin-top: 1rem;
  padding-top: 0;
}

#juncture section > h1,
#juncture section > h2,
#juncture section > h3,
#juncture section > h4,
#juncture section > h5,
#juncture section > h6 {
  padding-top: 0;
  margin-top: unset;
  margin-bottom: 1.5rem;
  padding-bottom: 0;
}

#juncture section ol,
#juncture section ul  {
  padding: 0.5em 0.5em 0.5em 1.4em;
}

#juncture section li > p {
  margin: 0;
}

body {
  font-family: Roboto, sans-serif;
  margin: 0;
  background-color: white;
}

.clear { clear: both; }

#juncture section.sticky {
  position: sticky;
  top: 0;
  z-index: 3;
  background-color: white;
  padding-top: 6px;
}

ve-footer ul {
  display: none;
}


#juncture section {
  background-color: inherit;
}

#juncture .section1,
#juncture .section2 {
  width: 100%;
  clear: both;
  background-color: inherit;
}

.noclear {
  clear: none;
}

.drop-shadow {
  box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
}

.hide {
  display: none;
}

/* Used for placing left vertical bar on active paragraphs */
.show-active p {
  border-left: 8px solid transparent;
}
.show-active p.active {
  border-left: 4px solid #ccc;
  padding-left: 4px;
}

ve-header > ul {
  display: none;
}

ve-footer {
  clear: both;
}

main {
  background-color: inherit;
}

/*
Provide anchor offset for fixed headed
Source - https://www.wikitechy.com/tutorials/javascript/offsetting-an-html-anchor-to-adjust-for-fixed-header
*/
:target:before {
  content: "";
  display: block;
  height: 80px; /* fixed header height*/
  margin: 32px 0 0; /* negative fixed header height */
}

section.no-offset:target:before {
  display: none;
}

#juncture section.footnote {
  font-size: 80%;
  margin-top: 1rem;
}

.ve-component.sticky + div.footnote, 
.ve-component.sticky ~ div.footnote {
  width: 100%;
}

/***************** layout start *****************/

/* Mobile Devices */
@media (max-width: 480px) {

  #juncture {
    font-size: 1.2rem;
    line-height: 1.3;
    padding: 0 0 40vh 0;
  }
  #juncture h1{ font-size:1.5em; }
  #juncture h2{ font-size:1.4em; }
  #juncture h3{ font-size:1.3em; }

  #juncture > section {
    padding: 0 6px;
  }

  p {
    /* text-align: justify; */
  }

  #juncture section.sticky.right {
    display: none;
  }

}

/* Larger Devices */
@media (min-width: 481px) {

  body {
    margin: 0 2rem;
  }

  #juncture {
    font-size: 1.3rem;
    line-height: 1.4;
    padding: 0;
    max-width: 1200px;
    /* padding: 0 34px; */
    margin: auto;
  }

  .ve-component {
    z-index: 2;
  }

  .ve-component[grid] {
    z-index: 3;
  }

  ve-map.full {
    padding-bottom: 12px;
  }

  /*
  .full {
    width: 100%;
    margin: auto;
    margin-bottom: 12px;
  }

  .left, .right {
    width: 50%;
  }

  .right {
    float: right;
    margin-left: 12px;
  }

  .left {
    float: left;
    margin-right: 6px;
  }
  */

  .right {
    margin-left: 12px;
  }

  .left {
    margin-right: 12px;
  }
  
  .sticky.right + section, 
  .sticky.right ~ section,
  .sticky.right + div, 
  .sticky.right ~ div,
  .sticky.right + p, 
  .sticky.right ~ p,
  .sticky.right + ol, 
  .sticky.right ~ ol
  .sticky.right + ul, 
  .sticky.right ~ ul,
  .sticky.right + blockquote, 
  .sticky.right ~ blockquote {
    width: 50%;
    margin-left: 0;
    padding-right: 9px;
  }

  .ve-component.sticky.left + section, 
  .ve-component.sticky.left ~ section,
  .ve-component.sticky.left + div, 
  .ve-component.sticky.left ~ div,
  .ve-component.sticky.left + p, 
  .ve-component.sticky.left ~ p,
  .ve-component.sticky.left + ol, 
  .ve-component.sticky.left ~ ol
  .ve-component.sticky.left + ul, 
  .ve-component.sticky.left ~ ul,
  .ve-component.sticky.left + blockquote, 
  .ve-component.sticky.left ~ blockquote {
    margin-left: 50%;
    padding-left: 9px;
  }
  
  .ve-component.sticky + section, 
  .ve-component.sticky ~ section,
  #juncture section.sticky + section, 
  #juncture section.sticky ~ section {
    clear: none;
  }

  .ve-component.sticky.left.text-left + section, 
  .ve-component.sticky.left.text-left ~ section {
    margin-left: 0;
  }

  /*
  .ve-component.sticky.left.text-left + section, 
  .ve-component.sticky.left.text-left ~ section,
  */

  .ve-component.sticky.left.text-left + div, 
  .ve-component.sticky.left.text-left ~ div,
  .ve-component.sticky.left.text-left + p, 
  .ve-component.sticky.left.text-left ~ p,
  .ve-component.sticky.left.text-left + ol, 
  .ve-component.sticky.left.text-left ~ ol
  .ve-component.sticky.left.text-left + ul, 
  .ve-component.sticky.left.text-left ~ ul,
  .ve-component.sticky.left.text-left + blockquote, 
  .ve-component.sticky.left.text-left ~ blockquote {
    width: 50%;
    margin-left: 0;
    padding-right: 9px;
  }

  .ve-component.sticky.right.text-right + section, 
  .ve-component.sticky.right.text-right ~ section,
  .ve-component.sticky.right.text-right + div, 
  .ve-component.sticky.right.text-right ~ div,
  .ve-component.sticky.right.text-right + p, 
  .ve-component.sticky.right.text-right ~ p,
  .ve-component.sticky.right.text-right + ol, 
  .ve-component.sticky.right.text-right ~ ol
  .ve-component.sticky.right.text-right + ul, 
  .ve-component.sticky.right.text-right ~ ul,
  .ve-component.sticky.right.text-right + blockquote, 
  .ve-component.sticky.right.text-right ~ blockquote {
    margin-left: 50%;
    padding-left: 9px;
  }
}

/***************** tabs start *****************/

#juncture .tabs {
  /* height: 100%; */
}

#juncture section.tab {
  height: calc(100% - 84px);
  overflow-y: scroll;
  border: 1px solid #ccc;
}

#juncture .tabs label {
  margin-bottom: 0;
}

#juncture input { display: none; }
#juncture input + label { display: inline-block }
#juncture input ~ .tab { visibility: hidden }
#juncture #tab1:checked ~ .tab.content1,
#juncture #tab2:checked ~ .tab.content2,
#juncture #tab3:checked ~ .tab.content3,
#juncture #tab4:checked ~ .tab.content4,
#juncture #tab5:checked ~ .tab.content5,
#juncture #tab6:checked ~ .tab.content6 {
  visibility: visible;
}
#juncture input + label {
  border: 1px solid #999;
  background: #EEE;
  padding: 4px 12px;
  border-radius: 4px 4px 0 0;
  position: relative;
  top: 1px;
  cursor: pointer;
}
#juncture input:checked + label {
  background: #FFF;
  border-bottom: 1px solid white;
  z-index: 2;
}
#juncture input ~ .tab {
  border-top: 1px solid #999;
  padding: 12px;
}
#juncture h1 {margin-bottom: 32px;}

#juncture .tab { 
  position: absolute;
  visibility: hidden;
  width: 100%;
  height: 100%;
  padding: 1rem 0;
}
#juncture .tab p {
  /* height: 100%; */
}
/***************** tabs end *****************/


/***************** cards start *****************/
#juncture .cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(265px, 1fr) );
  grid-auto-rows: 1fr;
  row-gap: 2rem;
  column-gap: 2rem;
  /* margin-bottom: 48px; */
}
#juncture .cards.wrapper {
  /* padding: 2rem; */
  margin-top: 0;
}

#juncture .cards.wrapper > section {
  padding: 0;
}

#juncture .card {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto 1fr 0px;
  border-radius: 4px;
  padding: 0;
  border: 1px solid #ddd;
  border-radius: 6px;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
}

#juncture .card p {
  border: none;
}

#juncture .card-image {  /* image */
  grid-area: 1 / 1 / 2 / 2;
  width: 100%;
  height: 300px;
}

#juncture .card-title {  /* title */
  grid-area: 2 / 1 / 3 / 2;
  font-weight: bold;
  font-size: 1.5rem;
  line-height: 1;
  padding: 1.3rem .5rem .2rem .5rem;
  text-decoration: none;
}

#juncture .card-metadata {  /* metadata list */
  grid-area: 3 / 1 / 4 / 2;
  list-style: none;
  padding: .4rem .5rem;
  margin: 0;
  font-size: 1.1rem;
  font-weight: bold;
  max-height: 260px;
  overflow-y: scroll;
}

#juncture .card-abstract{  /* abstract */
  grid-area: 4 / 1 / 5 / 2;
  align-self: flex-start;
  min-height: 110px;
  line-height: 1.4;
  font-size: 0.9em;
  padding: .5rem .5rem 0 .5rem;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  margin: 0 0 .5rem 0;
  -webkit-line-clamp: 12;
}

.clamp5 {
  -webkit-line-clamp: 5;
}
/***************** cards end *****************/


/***************** hero start *****************/
#juncture .hero {
  display: flex;
  flex-direction: column;
  height: 400px;
  margin-top: 0;
}

#juncture .hero-text {
  color: white;
  text-align: center;
  font-size: 2.5rem;
  max-width: 60%;
  margin: auto;
  font-family: Georgia;
  hyphens: unset;
}

#juncture .cta {
  background-color: #FFE55A;
  border-radius: 50px;
  font-family: Roboto;
  font-size: 2rem;
  padding: 16px 72px;
  margin: auto;
  margin-top: 0;
  text-align: center;
}

@media (max-width: 480px) { /* mobile */
  #juncture .hero-text {
    font-size: 2rem;
    max-width: 80%;
  }
  #juncture .cta {
    font-size: 1.5rem;
    padding: 12px 60px;
  }
}

/***************** hero end *****************/

/***************** markdown start *****************/

mark {
  cursor: pointer;
  background: unset;
  border-bottom: 1px solid #ccc;
  color: #444;
}
mark:hover {
  border-bottom: 2px solid #444;
  background: #eee;
}
mark::after {
  color: #aaa;
  font-size: 50%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
  top: -.3em;
  padding-left: 2px;
  padding-right: 4px;
}

mark.anno::after,
mark.zoomto::after {
  content: "🔎";
}

mark.play::after {
  content: "▶";
}

/*
mark[qid]:after {
  content: "ⓘ";
  font-size: .8rem;
  color:black;
}
*/

mark.flyto::after {
  content: "✈";
  font-size: 120%;
  top: 0;
}

#juncture a { color: #0645ad; text-decoration:none;}
#juncture a:visited{ color: #0b0080; }
#juncture a:hover{ color: #06e; }
#juncture a:active{ color:#faa700; }
#juncture a:focus{ outline: thin dotted; }
#juncture a:hover, #juncture a:active{ outline: 0; }

::-moz-selection{background:rgba(255,255,0,0.3);color:#000}
::selection{background:rgba(255,255,0,0.3);color:#000}

#juncture a::-moz-selection{background:rgba(255,255,0,0.3);color:#0645ad}
#juncture a::selection{background:rgba(255,255,0,0.3);color:#0645ad}

#juncture p,
#juncture li {
  line-height: 1.4;
  color: #444;

  /* These are technically the same, but use both */
  overflow-wrap: break-word;
  word-wrap: break-word;

  -ms-word-break: break-all;
  /* This is the dangerous one in WebKit, as it breaks things wherever */
  word-break: break-all;
  /* Instead use this non-standard one: */
  word-break: break-word;

  /* Adds a hyphen where the word breaks, if supported (No Blink) */
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
}

#juncture p {
  margin: 0 0 1rem 0;
}

#juncture img {
  max-width:100%;
}

#juncture h1,
#juncture h2,
#juncture h3,
#juncture h4,
#juncture h5,
#juncture h6 {
  font-weight:500;
  color:#444;
  line-height:1em;
}
#juncture h4,
#juncture h5
#juncture h6{ font-weight: 500; }
#juncture h1{ font-size:1.8em; }
#juncture h2{ font-size:1.6em; }
#juncture h3{ font-size:1.5em; }
#juncture h4{ font-size:1.2em; }
#juncture h5{ font-size:1em; }
#juncture h6{ font-size:0.9em; }

#juncture blockquote {
  color:#666666;
  margin:0;
  padding-left: 1em;
  border-left: 0.5em #EEE solid;
}
#juncture hr { display: block; height: 2px; border: 0; border-top: 1px solid #aaa;border-bottom: 1px solid #eee; margin: 1em 0; padding: 0; }
#juncture pre,
#juncture code,
#juncture kbd,
#juncture samp { color: #990000; background-color:#eee; padding: 0 0px; font-family: monospace, monospace; _font-family: 'courier new', monospace; font-size: 1em; }
#juncture pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }

#juncture b,
#juncture strong { font-weight: bold; }

#juncture dfn { font-style: italic; }

#juncture ins { background: #ff9; color: #000; text-decoration: none; }

/* mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; } */

#juncture sub,
#juncture sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
#juncture sup { top: -0.5em; }
#juncture sub { bottom: -0.25em; }

#juncture ul,
#juncture ol { 
  /* margin: 1em 0; */
  margin: 0;
  padding: 0 0 0 2em; 
}
#juncture li p:last-child { margin:0 }
#juncture dd { margin: 0 0 0 2em; }

#juncture img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }

#juncture table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
}
#juncture th { border-bottom: 1px solid black; }
#juncture td { vertical-align: top; }

#juncture table { 

  border:1px solid #555;
}
#juncture td, #juncture th {
  border:1px solid #555;
  padding: 8px;
  line-height: 1.2;
}
#juncture th {
  background-color:#E2F0F7;
  font-weight:bold;
  text-align:center;
}

/***************** markdown end *****************/