@import "menu.css";
@import "sidebar.css";
@import "pages.css";
@import "featured.css";
@import "gallery.css";
@import "forms.css";
:root {
  --offset-x: 0.25rem;
  --offset-y: 0.25rem;
  --blur-radius: 0.25rem;
  --spread-radius: 0;
  --box-shadow: var(--offset-x) var(--offset-x) var(--blur-radius) black;
  --text-shadow: 0 0 1em var(--primary-color-light);
  --control-size: 24px;
  --normal-spacing: 1rem;
  --small-spacing: 0.80901699437rem;
  --smaller-spacing: calc(var(--normal-spacing) - var(--small-spacing));
  --page-margin: 1em;
  --page-width: 800px;
  --background-image: url(/static/Anthemis-tinctoria-light.jpg);
  --loading-image: url(/static/loading-dna3.svg);
  --background-color: white;
  --modal-background: #000000d8;
  --primary-border-size: 2pt;
  --primary-border: 2pt inset var(--primary-color-dark);
  --footer-height: 2em;

  --font-size: 12pt;
  --font-family: "Roboto", "Arial", sans-serif;
  --font: var(--font-size) var(--font-family);
  font: var(--font);
  --header-font-size: 24pt;
  --header-font-family: "Raleway", "Arial", sans-serif;
  --header-font: var(--header-font-size) var(--header-font-family);

  --primary-color-light:   white;
  --primary-color:         grey;
  --primary-color-dark:    black;

  --secondary-color-light: #7f7fff;
  --secondary-color:       #0000FF;
  --secondary-color-dark:  #00007f;

  --action-color-light:    hsl(  75deg 100% 85% );
  --action-color-bright:   hsl(62deg 100% 65%);
  --action-color:          hsl( 15deg  61% 25% / 75%);
  --action-color:          #672c19;
  --action-color-active:   hsl( 15deg  61% 25% / 100%);
  --action-color-dark:     hsl( 15deg  61% 10% / 100%);
  --action-color-current:  hsl(  0deg  61% 48% );

  --border-width: 0.15rem;
  --border-radius: 0.42rem;
  --border-radius-small: 0.2rem;
  --border: var(--border-width) solid black;
  --gradient: linear-gradient(3deg, #2c621e 0%, #2c621e 33.5%, var(--primary-color) 120%);
}
.development .active.page {
  background: #ff000017;
}
.loading {
  width: -webkit-fill-available;
  height: 4em;
  margin: var(--normal-spacing);
}
.canOpen::before {
  content: "\227B ";
  margin-right: 0.5rem;
}
.canOpen:hover::before {
  content: "\22CE ";
  color: var(--action-color-current);
}
.canOpen.open::before {
  content: "\22CE ";
}
.canOpen.open:hover::before {
  color: var(--action-color-current);
  content: "\227B ";
}
.canClick {
  cursor: pointer;
}
.canZoom {
  cursor: zoom-in;
}
.button {
  display: block;
  border-radius: 0.25em;
}
.button:hover {
  background-color: var(--primary-color-active);
}
/* controls - start */
/* .control.active .icon .foreground {
  fill: var(--action-color-light);
}
.control.active .icon .background {
  fill: var(--action-color);
}
.control.active .icon:hover .foreground {
  fill: var(--action-color-dark);
}
.control.active .icon:hover .background {
  fill: var(--action-color-light);
}
.control .icon .foreground {
  fill: var(--action-color);
}
.control .icon .background {
  fill: var(--action-color-light);
}
.control .icon:hover .foreground {
  fill: var(--action-color-bright);
}
.control .icon:hover .background {
  fill: var(--action-color);
} */
/* control - stop */
body {
  background-color: var(--background-color);
}
@media only screen and (max-width: 600px) {
  body {
    margin-top: var(--header-height);
  }
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--header-font-family);
}
figure[id] {
  margin: 0;
  padding: 0;
  background: var(--primary-color);
}
.icon {
  margin: 0;
  width: var(--control-size);
  height: var(--control-size);
}
.icon svg,
.icon img {
  width: inherit;
  height: inherit;
  max-width: 100%;
  max-height: 100%;
}

/* header - start */
#header {
/*   -webkit-box-shadow: var(--box-shadow);
  box-shadow: var(--box-shadow);
*/
  background-color: var(--primary-color);
  background: var(--gradient);
}
#header a .icon .foreground {
  fill: var(--action-color);
}
#header a .icon .background {
  fill: transparent;
}
#header a.active .icon .foreground {
  fill: var(--action-color-light);
}
#header a .icon:hover .foreground {
  fill: var(--action-color-bright);
}
#header a.active .icon:hover .background {
  fill: transparent;
}
/* header - stop */

#lightbox {
  background: var(--background-color);
}

/* footer - start */
footer a {
  color: var(--action-color-light);
  cursor: pointer;
  font-weight: bold;
}
footer a.active,
footer a:focus,
footer a:hover {
  color: var(--action-color);
}
#footer {
  -webkit-box-shadow: var(--box-shadow);
  box-shadow: var(--box-shadow);
  background-color: var(--primary-color);
  background: linear-gradient(15deg, #2c621e 0%, #2c621e 62.5%, var(--primary-color) 100%);
  background: var(--gradient);
  padding: 0;
}
#footer .content {
  white-space: nowrap;
  font-size: 0.8rem;
}
#footer a {
  text-decoration: inherit;
}
/* home - product */
/* should probably generate this dynamically */
#product a {
  display: inherit;
}
#product img {
  height: var(--header-height);
  vertical-align: bottom;
  border-bottom-left-radius: var(--border-radius);
}
#product h1 {
  display: none;
  font-family: serif;
  font-size: 180%;
  margin: 0;
  padding: 0;
  white-space: nowrap;
}

#top:empty,
#bottom:empty,
#left:empty,
#right:empty {
  display: none;
}
#references > ul,
#list > ol {
  column-count: auto;
  column-width: 18em;
  display: block;
}
#list li > a ~ p {
  display: none;
}
#list .sep {
  font-size: 1.5em;
  color: var(--action-color-light);
  background: var(--gradient);
  padding-left: 0.5em;
}
#list > ol > li {
  padding-left: 0.5em;
  padding-right: 0.5em;
}
::selection {
  background-color: var(--action-color-bright);
}
.xc {
  display: none;
}
article,
.group,
.modal,
section,
form {
  padding: 0;
  margin: 0;
}
form.span,
form.block {
  display: block;
}
.block.match {
  border: var(--border);
  padding: 1em;
  height: 8em;
  overflow: hidden;
}
.block.match > .main > figure {
  display: none;
}
.block.match > .main > figure:first-of-type {
  display: block;
}
.block.match > .main > figure.featured {
  display: block;
}
.block.match > .main > figure > img {
  width: 80px;
  height: 80px;
}
.gallery.active main section {
  display: block;
}
.gallery > .main > .page.active > .main > figure {
  display: block;
}
.block.match > header {
  padding-bottom: 1em;
}
.gallery > .main > .page.active {
  display: grid;
  grid-template-rows: auto auto auto;
  grid-template-columns: auto auto;
}
.gallery > .main > .page.active > header {
  grid-row: 1 / 2;
  grid-column: 1 / 2;
}
.gallery > .main > .page.active > p {
  grid-row: 2 / 3;
  grid-column: 1 / 2;
}
.gallery > .main > .page.active > figure {
  grid-row: 3 / 4;
  grid-column: 1 / span 3;
}
.gallery > .main > .page.active > figure.featured {
  grid-row: 1 / span 3;
  grid-column: 2 / 3;
}
.page.match.active {
  display: block;
}
.match > p {
  margin: 0;
  padding: 0;
}
article.page,
article.block {
  background: var(--background-color);
}
:root {
  --thumb-width: 160px;
  --thumb-height: 160px;
}
.xal > figure img[data-ss='thumb'] {
  border-radius: var(--border-radius);
}
.xal > figure img {
  border-radius: var(--border-radius);
  width: var(--thumb-width);
  height: var(--thumb-height);
  object-fit: cover;
  background-color: #adadad;
  background-color: rgba(0, 0, 0, 0.42);
}
.xal > figure figcaption {
  display: none;
  background: var(--primary-color);
  padding: 0.5em;
}
.xal > figure {
  cursor: zoom-in;
}
figure.featured {
  cursor: pointer;
}
/*
.figures figure.featured figcaption {
  display: block;
}
.figures figure.featured figcaption {
  width: var(--thumb-width);
}
*/
.xal > figure:hover,
figure.featured:hover {
  opacity: 75%;
}
img[data-s]:focus {
  opacity: 0%;
}
.gallery > header > form > p {
  width: auto;
}
#gallery [id] > p.dx {
  white-space: pre-line;
  margin-top: 0;
}
.modal {
  border: var(--border);
  padding: var(--normal-spacing);
  box-shadow: var(--box-shadow);
}
.modal > header h2 {
  margin: 0;
  margin-bottom: 1em;
}
.main > .modal.block > .main {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1em;
}
.modal.block figcaption {
  display: none;
}
.modal.xc {
  display: none;
}
#gallery_info.modal .container {
  max-height: calc(100vh - var(--header-height) - var(--footer-height));
  overflow-y: scroll;
  width: var(--page-width);
}
#gallery > header form {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}
#gallery > header form > p {
  display: inline;
  width: auto;
  margin: 0;
  padding: 0;
}
/* gallery - stop */

.link,
[data-h] {
  cursor: pointer;
}
[data-h]:hover {
  filter: brightness(1.1);
}
div[data-h]:hover {
  filter: brightness(1.1);
  filter: brightness(1.1) drop-shadow(var(--box-shadow));
}

/* blocks - start */
.blocks a .icon {
  float: right;
  transform: scale(1.75);
}
.blocks a .icon svg .background {
  fill: var(--action-color-light);
  opacity: 68%;
}
.blocks a .icon svg .foreground {
  fill: var(--action-color);
}
.blocks a:hover .icon svg .foreground {
  fill: var(--action-color-bright);
}



/* blocks - stop */

/* lightbox - start */
#lightbox {
  background: black;
}
#lightbox a .icon svg .background {
  fill: var(--action-color-light);
  opacity: 68%;
}
#lightbox a .icon svg .foreground {
  fill: var(--action-color);
}
#lightbox a:hover .icon svg .foreground {
  fill: var(--action-color-bright);
}
/*
.lightbox .icon {
  background: var(--modal-background);
  border-radius: calc(3.14em / 2);
}
*/
#lightbox figcaption {
  background: var(--primary-color);
  padding: 0.5em;
}
/* lightbox - stop */

/* TO DO: make this a type of menu */
a:active,
a:hover,
a:focus,
.link:active,
.link:hover,
.link:focus {
  color: var(--action-color-active);
  border-color: var(--action-color-active);
}
main a[target=_blank] {
  background: transparent url('/static/link_external.svg') center right no-repeat;
  padding-right: 1.25em;
  background-size: 1em;
}
main a[href^=mailto] {
  background: transparent url('/static/link_mail.svg') center right no-repeat;
  padding-right: 1.2em;
  background-size: 1em;
}
main > article > header a .icon .foreground {
  fill: var(--action-color-light);
}
main > article > header a .icon .background {
  fill: transparent;
}
main > article > header a.active .icon .foreground {
  fill: var(--action-color-light);
}
main > article > header a .icon:hover .foreground {
  fill: var(--action-color-bright);
}
main > article > header a.active .icon:hover .background {
  fill: transparent;
}
main > article > header nav a .icon .foreground {
  fill: var(--action-color);
}
main > article#home {
  padding-top: var(--normal-spacing);
}
main > article#home > header {
  display: none;
}
main {
  margin-top: var(--header-height);
  margin-bottom: var(--footer-height);
  margin-left: 1em;
  margin-right: 1em;
  padding-bottom: calc(var(--footer-height) + var(--normal-spacing));
}
main ul {
  padding-left: var(--normal-spacing);
}
.page > header {
  background: linear-gradient(3deg, hsl(15deg 61% 35%) 0%, hsl(15deg 61% 30%) 33.5%, var(--action-color-active) 120%);
  color: var(--primary-color-light);
  /* padding-left: var(--normal-spacing);
  padding-right: var(--normal-spacing);
  margin-left: -1em;
  margin-right: -1em; */
  padding: 0;
  margin-left: -1em;
  margin-right: -1em;
  border-bottom: var(--primary-border);
  border-left: var(--primary-border);
  border-right: var(--primary-border);
}
main > * > header > nav {
  padding: 0.5em;
  background: var(--primary-color-light);
  line-height: 200%;
}
main > [id] > header > h2 {
  font-size: 1.1em;
  margin: 0;
  line-height: 2em;
  padding-left: 1em;
  padding-right: 1em;
}
.block.match > header > h2 {
  margin: 0;
  line-height: normal;
  font-size: 1em;
}
.image.match {
  margin: 0;
  margin-bottom: 1em;
  padding: 0;
}
figure[data-ss='thumb'] {
  width: 100px;
  height: 100px;
}
header {
  font-family: var(--header-font-family);
}
/*
.gallery[data-initial="A"] > .active[data-l^="A"],
.gallery[data-initial="B"] > .active[data-l^="B"],
.gallery[data-initial="B"] > .active[data-l^="B"],
.gallery[data-initial="B"] > .active[data-l^="B"],
.gallery[data-initial="B"] > .active[data-l^="B"],
.gallery[data-initial="B"] > .active[data-l^="B"],
.gallery[data-initial="B"] > .active[data-l^="B"],
.gallery[data-initial="B"] > .active[data-l^="B"],
.gallery[data-initial="B"] > .active[data-l^="B"],
.gallery[data-initial="B"] > .active[data-l^="B"],
.gallery[data-initial="B"] > .active[data-l^="B"],
.gallery[data-initial="B"] > .active[data-l^="B"],
.gallery[data-initial="B"] > .active[data-l^="B"],
.gallery[data-initial="B"] > .active[data-l^="B"],
.gallery[data-initial="B"] > .active[data-l^="B"],
.gallery[data-initial="B"] > .active[data-l^="B"],
.gallery[data-initial="B"] > .active[data-l^="B"],
.gallery[data-initial="B"] > .active[data-l^="B"],
.gallery[data-initial="B"] > .active[data-l^="B"],
.gallery[data-initial="B"] > .active[data-l^="B"],
.gallery[data-initial="B"] > .active[data-l^="B"],
.gallery[data-initial="B"] > .active[data-l^="B"],
.gallery[data-initial="B"] > .active[data-l^="B"],
.gallery[data-initial="B"] > .active[data-l^="B"],
.gallery[data-initial="B"] > .active[data-l^="B"],
.gallery[data-initial="B"] > .active[data-l^="B"] {
  font-size: 5rem;
}
*/
#editorjs {
  background-color: #fff0f0;
  border: 1pt solid black;
}