@import "da-fonts.css";

*:root, button, input, select, textarea, pre {
  --label-width: 10em;
  --field-width: 32.75em;
  --field-padding:.33em;
  --form-background-color: var(--yellow) !important;
  
  --field-width-split-left:9.5em;
  --field-width-left: 25.65em;
  --field-width-center: 12em;
  --field-width-right: 12.5em;
  --field-border-color: var(--yellow);
  --field-border-color-required: black;
  --field-line-thickness: var(--line-hair);
  

/*  --line-thick: .0cm;
  --line-medium: .0cm;
  --line-thin: .0cm;
*/  
  --line-thick: 12pt;
  --line-medium: .2cm;
  --line-thin: .1cm;
  --line-hair: .05cm;
  
/*  --yellow: #fac901;*/
  --yellow: #ffe116;
  --yellow-rgb: 255, 225, 22;
  
/*  --blue: #225095;*/
/*  --blue: #2b65b7;*/
  --blue: #3773c2;
  
/*  --red: #dd0100;*/
  --red: #c31a17;

--khaki: #f7ecbf;  
  --aqua: #66b5bc;
  --purple:purple;
  --light-blue: #def;
  --orange:ff5500;
  --green: green;
  
  --headerbar-height:70px;
  --header__background: white;
  --navbar-width: 250px;
  --navbar-width-widescreen: 260px;
  --nav__background: #888;
  --navigation__sub-background: var(--blue);
  --main-button__background: var(--green);
  --main-button__text: white;
  --main-button__border: black;
  --main-content__title-background: var(--red);
  --nav-button__background: #0099ff;
  --footer__background: var(--blue);
  --footer__text : white;
  --footer__min-height: 1em;
  --footer__max-height: 2em;
  --pre__text: var(--red);
  --main-h1__background: var(--red);
  --main-h1__text:#fff;
  --main-page-margins: 8.5vw;
  --page-margin-left: var(--main-page-margins, 1cm);
  
  --border-radius:0;
  
  --heading-font: "Iosevka Web", sans-serif;
  font-family:var(--heading-font);
  font-stretch:expanded;
  --select-field-with-value__background-color : #fff;

}
/* SET FONT FAMILY ON ALL non-body-text elements */
header, nav, h1, button, label, input {
  font-family:var(--heading-font);
  font-stretch:expanded;
}

p, h1, h2, h3, h4, h5, nav, dl, div.author, .caption, ul, .box-title {
  font-family: "Iosevka Etoile Web","Iosevka Web", sans-serif;
}
.section-title {
  color: var(--blue);
}
.response h3 {
  color:inherit;
}
h4 {
  font-style:normal;
}
h5 {
  font-size:10pt;
}
.box-title,
.caption {
  color: var(--blue);
  font-size:.75rem;
}
.box-title {
  break-after:avoid;
}
pre, code {
  font-family: "Iosevka Etoile Web","Iosevka Web", monospace;
}
p.code,  
p + code, 
div.p + code, 
div.section > div.code {
  margin: 1em 0;
  display:block;
  text-indent:0;
}
.p pre {
  overflow-wrap:break-word;
}
.p + pre {
    margin: .5em 0;
    padding:0;
    display:inline-block;
}
.boxed-text.panel + .p,
pre + .p {
  text-indent:0;
}

code + code {
  margin:0 0;
}
code + div.p {
  margin-top: 1em;
}
/* FRAME ELEMENTS */
body.select {
  grid-template-areas: 
        '. header-menu header header'
        '. menu main main'
        '. menu footer footer';
    grid-template-columns: 1fr var(--navbar-width) 1500px 1fr;
    grid-template-rows: var(--headerbar-height) 1fr 65px;
}
body.article p {
  font-family:'Noto sans', sans-serif;
  font-size:1.1em;
  line-height:1.75em;
  max-width:initial;
}

.jb-logo {
  padding-top:2.5%;
    border-left: solid var(--line-medium) black;
    height:100%;
}

.jb-logo img,
.jb-logo svg {
  height:95%;
  width: inherit;
}
.svg-menu-toggle {
  fill: var(--red);
}
body > header {
    border-right: solid var(--line-medium) black;
}

header .header-page-title, header .header-page-label {
  font-family: "Iosevka Web", sans-serif;
  font-style:normal;
  font-weight:500;
  color: var(--blue);
}
header .header-page-title {
  font-size:35pt;
}
header .header-page-title * {
  animation: all 2.5s;
  display:inline-block;
  margin:0;
}
.container header
, .container footer {
  color:white;
  line-height:2.5em;
  height:3.5em;
}
@media screen {
  .letter- {
    min-width:.3em;
  }
  /* character styling for the banner */
  .letter-l {
    font-feature-settings: "ss12" on;
  }
  .letter-r {
   font-feature-settings: "cv11" on, "cv05" on, "cv10" on, "cv86" on, "VXBF" on,
                             "cv14" on, "cv51" on, "VXAF" on, "cv97" on, "cv60" on,
                             "cv21" on, "cv36" on, "cv45" on, "cv32" on;
  }
  .letter-v {
    font-feature-settings: "ss20" on;
  }
  .letter-m {
    font-feature-settings: "ss12" on;
  }
  footer {
    border-right:solid var(--line-medium) black;
    padding-left:var(--page-margin-left);
    font-family:var(--heading-font);
    line-height:1.5;
  }
  footer fieldset legend {
    color:var(--footer__text);
    margin-bottom:.5em;
  }
  #filtered-count {
      color:var(--lichtblauw);
  }
  main {
      border-right: solid var(--line-medium) black;
      border-bottom: solid var(--line-medium) black;
      background-color: #fbfbfb;
      overflow-x:hidden;
  }
  main > div.main-page {
    padding: 0 var(--page-margin-left) 1cm;
    padding-left:var(--page-margin-left);
  }
  main > div.main-page {
    height: auto; /* fix for scrolling problem introduced in prd.css */
  }
  #modal-container {
    padding:0; /* avoid the vertical whitespace added by a general rule in jb-grid.css */
  }
  h1.title {
    padding-left:var(--page-margin-left);
  }
  .main-page h1
  {
    margin: 0 calc(0px - var(--main-page-margins) ) 1cm;
    margin-left: calc(0px - var(--page-margin-left) );
    padding-left:var(--page-margin-left);
    border-top: solid var(--line-medium) black;
    border-bottom: solid var(--line-medium) black;
  }
  .main-page > div.author {
    font-size:1.2em;
    margin-bottom:2em;
    background-color:transparent;
  }
  div.author .contrib {
    font-size:1.2em;
  }
  main > h1 {
    font-weight:500;
    position:sticky;
    top:0;
    z-index:2;
    border-top: solid var(--line-medium) black;
    border-bottom: solid var(--line-medium) black;
    padding-left: var(--page-margin-left);
    font-size:1.4em;
    margin-bottom:1cm;
  }
  h2.subtitle {
    margin:-1.75em calc(0px - var(--main-page-margins) - .55em) 2em calc(0px - var(--page-margin-left));
    padding: 1.75rem var(--main-page-margins) 1.25rem var(--page-margin-left);
    background-color:var(--light-blue);
    border-bottom:solid black var(--line-thin);
  }
  h3 {
    margin-top:2em;
    margin-bottom:1em;
    color:var(--red);
  }
  h2 + h3 {
    margin-top:0;
  }
  
}
/*  PAGE ELEMENTS */

p {
  line-height:var(--text-line-height) ;
}

/*  NAV PANEL */
nav {
  font-style:normal;
	font-stretch: expanded;
  border-right:solid var(--line-thick) black;
  border-top: solid var(--line-medium) black;
  border-left: solid var(--line-medium) black;
  padding-top:0;
  z-index:3;
}
nav ul {
  margin-top:0;
  font-weight:400;
}
nav > ul > li {
  line-height:1.75em;
  font-size:1.1em;
  background-color:#444;
  padding:0;
}
nav > ul > li {
  border-bottom: solid var(--line-thin) black;
}
nav ul ul li {
  border-bottom: solid var(--line-thin) black;
  border-right: solid var(--line-thin) black;
}
nav ul ul li:first-child {
  border-top: solid var(--line-thin) black;
}
nav ul ul {
  border-left: solid var(--line-thick) black;
  padding:0;
}

nav ul ul li a {
  padding: .25em 0;
  text-indent:0;
  margin-left:.5em;
}
.main-page a {
  text-decoration:underline;  
}
.mini-ror-icon a {
  text-decoration:none;
}
#status-updates {
  background-color:inherit;
}
nav a[href] {
  color:white;
}
nav a[href]:hover {
  transition: all .25s;
  color:inherit;
  border:none;
  outline:none;
}
/* 
nav a[href]:focus {
  background-color: var(--yellow);
  color:var(--blue);
  transition: all .25s;
  outline:none;
}
*/
nav  li[selected] {
  background-color: var(--yellow);
}
nav li[selected] > a[href]
{
  color: var(--red);
}
nav li:hover {
  background-color: var(--khaki);
}
nav li:hover > a {  
  color: black;
}

nav li:hover > a:hover {
  background-color:inherit;
}
nav li:hover a[aria-haspopup=true]:after {
  font-weight: bold;
  color:var(--red);
}
nav a[aria-haspopup=true]:after {
    content: "›";
    padding-left: .7em;
    font-family: inherit;
    font-size:1.1em;
}

nav form button {
  outline: solid black var(--line-medium);
}



/* FORM ELEMENTS */
.main-page > form, div.box {
  border:solid var(--line-hair) black;
  position:relative;
  padding: 1.2em;
}
.main-page > form, .main-page > .xforms-group, .main-page > xforms-group , .main-page > form > div.field-container, div.box {
  background-color: var(--yellow);
  border-radius: var(--border-radius);
  max-width:55em;
}
div.details.form.blocks-grid {
  flex-direction: column;
}
.result-data-group .details.form fieldset {
  background-color:#f9f9f9;
}
fieldset + fieldset, div.box {
  margin-top: 1.5em;
}

main > button,
main xforms-group button,
.main-page > form > button {
  margin-top:2em;
  height:3em;
  padding:.5em 1em;
  text-transform:none;
  font-weight:400;
  font-size:1.1em;
  letter-spacing:.01em;
    outline: solid var(--line-hair) black;
}
button:hover {
  box-shadow:none;
  outline: solid var(--line-thin) black;
}
button.view-details {
  padding:.25em .5em;
  }
button.icon {
  height:auto;
  padding:.25em;
}
header button.icon {
  background-color: inherit;
  margin-top:0 !important;
  color:var(--yellow);
}
#my-timezone {
  background-color:#eee;
  color:black;
  font-weight:normal;
  font-size:.9em;
  text-transform:initial;  
  letter-spacing:initial;
}
#my-timezone.i {
  font-style:italic;
  outline:none;
}
#my-timezone.i:hover,
#my-timezone:focus {
  outline:none;
  box-shadow:none;
}
tr.rowcount div {
  display:block;
}
.xforms-value {
  padding: var(--field-padding);
}
span.value {
  display:inline-block;
/*  margin-bottom:1em;*/
}
input.xforms-value, form input[type=text], form input[type=email] {
  width: var(--field-width);
}
/*  use outline instead of border */
input, select, textarea,
*[contenteditable], select[onchange], fieldset.report select, fieldset.report input, input[onchange], input[oninput], input[onkeyup], input[form], input[data-mode='form'], select[data-mode='form'] {
  border:none;
  outline: solid var(--line-hair) var(--field-border-color);
}
*:focus, input:focus, select:focus {
  outline: solid var(--line-thin) var(--blue);
  border:none;
}
header a:focus {
  outline:none;
}
a:focus .header-page-title {
  color: purple;
}
summary:focus {
  outline:none;
}
.xforms-required .xforms-value:focus {
  outline: solid var(--line-thin) var(--blue);
}
.xforms-required .xforms-value {
  border:none;
  outline: solid var(--line-hair) var(--blue);
}
.xforms-invalid .xforms-value {
  border:none;
  outline: solid var(--line-hair) var(--red);
}

legend {
  margin-bottom:1em;
  font-size:1.1em;
}
div[contenteditable] {
  background-color:white;
}

div.html-area, div.text-area, textarea {
  width:42.25em;
}

/*  SPECIFIC PAGE TWEAKS */

.da-sister-conferences,
.da-sponsors {
  display:grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  grid-row-gap:2em;
  grid-column-gap:2em;
}
.da-sister-conferences img,
.da-sponsors img {
  width:95%;
}
jb-combo-select {
  font-family: var(--heading-font);
}
/*  MEDIA QUERIES */

@media screen and (max-width:1000px) {
  textarea, input {
    max-width: calc( 100vw - 410px);
  }
}
@media screen and (max-width:800px) {
  body, body.select {
      grid-template-areas:
          'header logo'
          'main main'
          'footer footer';
      grid-template-columns: 1fr 20mm;
  }
  .jb-logo {
    grid-area:logo;
    display:block;
    border-left:none;
  }
  nav ul > li {
    line-height:inherit;
    border:none;
    }
  nav, main, header, footer {
    border:none;
  }
  header .header-page-label {
    display:none;
  }
  header .header-page-title {
    font-size:30pt;
    display:inline-block;
  }
  .hamburger {
    padding-top:.5em;
  }
  textarea, input {
    max-width: calc( 100vw - 180px);
  }
}
@media screen and (max-width:600px) {
  *:root {
  --headerbar-height:50px;
  --line-thin:1.5pt;
  --line-hair:.75pt;
  }
  body, body.select {
    grid-template-columns: 1fr 18mm;
  }
  .jb-logo {
    padding-top:.15em;
  }
  
  .hamburger {
    padding:.1em .35rem 0 1.5rem;
  }
  header .header-page-title {
    font-size: 6vw;
  }
  .main-page {
    padding:1.5rem;
  }
  main > div.main-page {
    padding: .5cm 1.5rem 1cm;
}
h1.title, main > h1 {
    padding: 1.25rem 1.5rem;
    margin-bottom:0;
  }
  h2.subtitle {
    margin-top: -1.5rem;
  }
  form {
    border:none !important;
  }
  textarea, input {
    max-width: calc( 100vw - 135px);
  }
  .da-sponsors,
  .da-sister-conferences {
    display:block;
  }
  .da-sponsors p,
  .da-sister-conferences p {
    margin-bottom: 2em;
  }
  .da-program div.row {
    margin-left:0 !important;
  }
}

@media screen and (max-width:400px) {
  header .header-page-title {
    font-size: 5.5vw;
  }
}

@media screen and ( min-width:1000px ) {
  :root {
    --font-size: calc(10pt + ( 50vw - 500px) / 100 );
    --page-margin-left:  calc(1cm + ( 10vw - 100px)  );
  }
}
@media screen and ( min-width:1500px ) 
{
  :root {
    --font-size:12.5pt;
    --page-margin-left:2cm;
  }
  body {
      --navbar-width: var(--navbar-width-widescreen);
      grid-template-areas: '. header-menu header .'
            '. menu main right'
            '. menu footer bottom-right';
      grid-template-columns:1fr var(--navbar-width) 8fr 2fr;
      grid-template-rows:var(--headerbar-height) 1fr minmax(var(--footer__min-height),var(--footer__max-height));
      background-color:#aaa;
  }
}

@media screen and ( min-width:1750px ) {
  body {
      grid-template-areas: '. header-menu header .'
            '. menu main right'
            '. menu footer bottom-right';
      grid-template-columns:1fr var(--navbar-width) 1200px 1fr;
      grid-template-rows:var(--headerbar-height) 1fr minmax( var(--footer__min-height), var(--footer__max-height));
      background-color:#aaa;
  }
}

@media print {
  main {
    border: none;
  }
  .jb-logo {
    display:none;
  }
}