/*
 Claro has some not so nice visual Drupalizms we circumvent here including
  - some more rhythm
  - some more tightness for complex applications
  - some visual inline sync with contrib modules
  - repair wrong usage of margin and padding in conjunction with nested elements
*/

:root {
  --font-size-base: 0.889rem;
  /* ~14px */
  --space-xl: 1.5rem;
  /* 1.5 * 16px = 24px */
  --space-l: 1rem;
  /* 1 * 16px = 16px */
  --space-m: 0.75rem;
  /* 0.75 * 16px = 12px */
  --space-s: 0.5rem;
  /* 0.5 * 16px = 8px */
  --space-xs: 0.25rem;
  /* 0.25 * 16px = 4px */
  --input-border-color: #ddd !important;
  --button-border-radius-size: 4px !important;
  --color-absolutezero: #2860e0 /* #3563ac */;
  --button-bg-color: transparent;
  --dropbutton-toggle-size: 1.8rem !important;
  --dropbutton-spacing-size: var(--space-s);
}

/* @TODO needs to be in the reset of JASS  */
html,body{position:relative;height:100%}

/* In Drupal elements.css and normalize.css interfere under circumstance
   in way that hr element gets invisible */
hr {
  border-top: 1px solid !important;

}

/* In Drupal core/assets/vendor/normalize-css/normalize.css in line 95
   the font weight for <strong> and <b> is set to "bolder", which is rendering
   not with all font families and not in all environments well to be
   distinguishable enough to look bold. So for example with CK editor text.
   We reset this to be really bold for CK editor text edit areas and elsewhere.
   @internal @url: procedure (mission): drupal-core-normalize-uses-incompatible-bolder
   */
b, strong, .ck-content b, .ck-content strong {
  font-weight: bold !important;
}

/* Drupal CK editor sub CSS rules render code blocks visibly well but Claro not.
   We copy from .ck-editor pre to look similar in edit and view mode
   for those who do not want to install a code syntax highlighting module.
   @TODO Note: seems pre is mistakenly defined in Claro notifications.css (issue?)

   Additionally we care about inline code look and feel similar to blocks.
   So we split original pre declarations into 2 declaration groups.
*/
pre code, p code {
  background: hsla(220,100%,90%,.2);
  color: #346 !important;
  direction: ltr;
  font-style: normal;
  font-size: 90%;
  padding-left: 0.3em;
  padding-right: 0.3em;
}
pre code {
  min-width: 200px;
  border-radius: 4px;
  border: 1px solid #def;
  padding: 1.2em;
  tab-size: 2;
  text-align: left;
  line-height: 130%;
  white-space: pre-wrap;
  /* Remove weird line by line look of code blocks */
  display: inline-block;
}

.dropbutton__item:first-of-type > * {
  font-weight: 200;
}

.content-header {
  box-shadow: inset 0 -30px 16px -28px #e7e7f7;
}

/*
@media screen and (min-width: 38em) {
  .page-content {
    margin-top: 2rem;
  }
}
NOTE: this is wrong usage of margin. It should be padding from the parent element.
*/
@media screen and (min-width: 38em) {
  .page-content {
    margin-top: 0 !important;
    padding-top: 1rem;
  }
}

a, .link {
  text-decoration: none !important;
}

#edit-actions:not(.views-exposed-form__item) {
  position: fixed;
  bottom: 0;
  box-shadow: 0 -5px 5px whitesmoke;
  display: block !important;
  width: 100%;
  z-index: 99;
  left: 0px;
  padding: 10px 10px 10px 50px;
  margin: 0 !important;
  border: 0 none !important;
  background-color: white;
}
