/**
   * @file
   * Overall specifications for Bartik.
   */

:root {
  /* Header height set because it is fixed and need to
   * adjust login and logout top margins.
   */
  --header-height: 11em;

  /* Prefers Color Scheme : Light
   * Backgrounds
   */
  --html-background: linear-gradient(180deg, #FCDDAB 0%, #FFFDF9 100%);
  --layout-container: linear-gradient(180deg, #FCDDAB 0%, #FFFDF9 100%);
  --block-system-main-block: hsla(0, 0%, 100%, 0.90);

  /* Typography */
  --body-color: #4e534c; /*#121213;*/
  --heading-colour: #4e534c;
  --global-a: #4e534c;

  /* Elements */
  --tags: #072CEB;

  /* Brand Colours */
  --brand-purple: #4e534c;

  /* Icon Fonts */
  --twitter: #0d4e64;
  --codepen: #000000;
}

* {
  box-sizing: border-box;
}
html {
  height: 100%;
  background-color: var(--html-background);
}
body {
  min-height: 100%;
  /*word-wrap: break-word;*/
  font-size: 100%;
  color: var(--body-color);
  font-family: 'Ubuntu', sans-serif;
  line-height: 2;
  font-weight: lighter;
}
/* This is the wrapper for content
 * <header> <admin> <main> <footer> are children
 * It is the page.html.twig
 */
.layout-container {
  background: var(--layout-container);
  overflow: hidden;
}

.layout-container .dark {
  background: rgba(255,255,255,0.73);
}

.path-frontpage .layout-container .dark {
  background: rgba(255,255,255,0);
}



/* Inside .layout-container */

/*
header a {
    color: white;
}

ul.menu a.is-active {
    color:white;
}
 */

header {
  display: flex;
  flex-wrap: wrap;
  /* font-size: 2em; */
  /* Below was taken from style css */
  /* height: var(--header-height); */
  color: white;
  z-index: 1;
  position: fixed;
  width: 100%;
  /* Rin */
  height: 8em;
  font-size: 1em;
}

header nav,
header .branding {
  margin: auto 0;
}

header .branding {
  display: block;
  font-size: 2rem;
}
header .branding ul {
  margin: 0 0 0 0; /*TODO: Top needs to be set at 0 */
  list-style: none;
}
header .branding ul li {
  padding-top: 0.2em; /* added to even up core menu.css*/
}
header a {
  text-decoration-line: none;
  color: var(--brand-purple);
}

header a:hover {
  text-decoration-line: none;
  color: var(--brand-purple);
  cursor: pointer;
  border-bottom: none;
}
/* TODO: move this to a new file */
header nav {
  /* height: 6em; removed for mobile overflow scroll bar TODO: work out if needed */
  overflow-x: auto;
  overflow-y: hidden;

  /* margin: 0; */
  /* padding: 0 0; TODO: don't need to set to 0 */
}

header nav ul.menu {
  margin-left: revert;
  padding: revert;
}

@media only screen and (min-width: 768px) {
  header nav,
  header .branding {
    padding: 0;
  }
}
header nav ul {
  margin: 0;
  display: flex;
  list-style: none;
}
header nav ul li.menu-item { /* .menu-item is drupal menu.css */
  margin-right: 2em;
}

@media only screen and (min-width: 800px) {

  header .branding ul {
    margin: 0 2em 0 0;
    list-style: none;
  }

  header nav ul li.menu-item { /* .menu-item is drupal menu.css */
    /*  margin-right: 2.5em remove so 2em is keep maybe nice to fix this later based on number of icon in the menu and width of desktop */
  }
}
header nav ul li.menu-item:last-child { /* .menu-item is drupal menu.css */
  float: right; /* TODO: not working with flex items, for mobile not needed */
  padding: 0.2em 1em 0 0; /* add padding-right for mobile overflow scroll nav to move oof right edge */
}
header nav ul li.icon {
  /*flex-basis: 100px;*/
}
header nav ul li a {
  padding: 0 0 0 0;
}
header nav ul li a span {
  font-size: .35em;
  display: block;
  position: relative;
  top: -1em;
}

/*header a span {
    display: none;
}*/

header .codepen a {
  color: var(--codepen);
}

header .dribble a {
  color: hsl(328, 100%, 54%);
}

header .twitter a {
  color: var(--twitter);
}

header li {
  position: relative;
}
/*
header li:hover, header li:active {
  transform: rotateZ(23deg);
}



article {
    margin-top: 2em;
}*/
.pinned-sticky .demo-icon {
  font-size: 1.8em;
  color: #186fae;
}

/*
@media only screen and (min-width: 2474px) {

  header {
    display: revert;
    width: 12rem;
  }
  header nav {
    width: 12rem;
    overflow-x: hidden;
  }
  header nav ul {
    display: revert;
  }
  header li {
    width: 12rem;
  }
  header nav ul li.menu-item:last-child {
    float: none;
  }

  /* In style.css todo: no longer needed as flex-direction is now default from out set.
  .view-content {
   flex-direction: revert;
  }
 /
}
*/
main {
  padding-top: var(--header-height);
}

/* Inside <main> todo: check this is needed
.block-system-main-block {
  background: var(--block-system-main-block);
}
*/
/* Frontpage & Section Frontpage (taxonomy) override */
.path-frontpage .block-system-main-block,
.path-taxonomy .block-system-main-block {
  background: none;
}
.path-frontpage .node__content {
  max-width: 885px;
  margin: 0 auto;
}

/* Regions Inside layout container */
.region-highlighted {
  max-width: 90%;
  margin: 0 auto;
}
/* Moved form style.css */
.region-highlighted { /* not needed if set on a parent div */
  /* padding-top: 200px; */
}

@media only screen and (min-width: 567px) {
  .region-highlighted {
    max-width: 80%;
  }
}
/* Inside <main>
.region-content {
  max-width: 80%;
  margin: 0 auto;
}
.block-core,
article
*/
/* Todo: need better explanation
 * This below is specific to dkcom theme as we want to only make the content areas 80%
 */
.layout-content > .region-content > div, /* Todo: this target all div inside: blocks for title, edit, mailer sign up etc */
.region-footer-bottom, /* > div, */
#user-login-form,
#user-register-form,
#user-pass {
  max-width: 90%;
  margin: 0 auto 5.5em;
}
.region-footer > div {
  padding-top: 5.5em;
  padding-bottom: 5.5em;
  margin: 0 auto 0;
}
#block-dkcom-page-title {

}
#user-login-form,
#user-register-form,
#user-pass {
  padding-top: 2em;
  padding-bottom: 2em;
}

.region-footer-bottom {
  display: flex;
  justify-content: space-between;
}


@media only screen and (min-width: 567px) {
  .layout-content > .region-content > div,
  .region-footer-bottom,  /* > div, */
  #user-login-form,
  #user-register-form,
  #user-pass {
    max-width: 80%;
  }
}

@media only screen and (min-width: 1336px) {
  .layout-content > .region-content > div,
  .region-footer-bottom, /* > div, */
  #user-login-form,
  #user-register-form,
  #user-pass {
    max-width: 1236px;
  }
}


/* #block-dkcom-content
 * .block-system-main-block
 *
 * This overrides the .layout-content > .region-content > div
 * This is done so layout of individual elements aren't constrained by the the out layout
 */
#block-dkcom-content {
  max-width: 100%;
  /* if no content then contextual edit does show */
  min-height: 10rem;
  margin-bottom: 0;
}
/* :last over ride .layout-content > .region-content > div */
.block-system-main-block  {   /* article is inside the region .block-system-main-block */
  margin-bottom: 0;
}

/* Contact form #id is specific to each individual contact form
 #contact-message-NAME-OF-FORM-form
 *class="contact-message-product-enquiry-form contact-message-form contact-form"
 *class="contact-message-feedback-form contact-message-form contact-form"
 */
article,
.views-element-container,
.contact-form {
  max-width: 90%;
  padding-top: 1em;      /* Vertical Rhythm Todo: remove article top padding-top: 1em; */
  padding-bottom: 2em;   /* in the code editor */
  margin: 0 auto 0;
}

@media only screen and (min-width: 567px) {
  article,
  .views-element-container,
  .contact-form {
    max-width: 80%;
  }
}

@media only screen and (min-width: 1336px) {
  article,
  .views-element-container,
  .contact-form {
    max-width: 1236px;
  }
}

/* Below are inner HTML of #block-dkcom-content */

/* Form */
/* button - not needed to style as actions are not button and it effects toolbar #12 */


input, optgroup, select, textarea {
  box-sizing: border-box;
  height: 33px;
  width: 100%;
  border: 1px solid #979797;
  border-radius: 3px;
  background-color: #FFFFFF;
  /*font-family: 'Open Sans',sans-serif;*/
  font-family: Arial,Helvetica,sans-serif;
  padding: 0.8em 1em;
}
@media only screen and (min-width: 768px) {
  input, optgroup, select, textarea,
  .contact-form input {
    width: 20rem;
  }
}
textarea {
  height: revert;
}
#edit-submit,
#edit-preview {
  background-color: #F96216 !important;
  border-color: #F96216;
  border-style: solid;
  border-width: 1px;
  border-radius: 4px;
  box-shadow: none;
  color: #ffffff !important;
  cursor: pointer;
  /*font-family: 'Open Sans',Arial,Helvetica,sans-serif;*/
  font-family: Arial,Helvetica,sans-serif;
  font-size: 16px !important;
  font-weight: 700;
  line-height: 20px;
  margin: 0 !important;
  padding: 10px !important;
  height: auto;
  /*text-align: left;
  width: 15em;*/
}
label.js-form-required.form-required {
  width: 12em;
  display: block;
}
/*
.contact-form input {
  /*width: 20em; em will make the width base on the font-size
  width: 20rem;
}*/
.contact-form .form-textarea-wrapper textarea {
  max-width: 40em;
}

.js-form-type-checkbox {
  display: none;
}


/* end external CSS */

/* Comments */
#comment-form label {
  display: block;
}
#comment-form .filter-wrapper {
  /*background-color: #ffffff;*/
}
#edit-comment-body-0-format-help {
  display: none;
}
#edit-comment-body-wrapper {
  max-width: 885px;
}

#comment-form .tips {
  padding-left: revert;
}

/* :not(pre) > code, */
/* Using Responsive Type
 * Code Tag Module

article h3 code,
article p code ,*/
article * code,
article :not(div) code,
article :not(pre) code{
  background: #fff;
  color: #0e0e0e;
  font-size: calc(.75em + .1vw);
  line-height: calc(1.5em + .2vw) !important;
  padding: 0 .2725em;
  display: inline-block;
  border-radius: .3em;
}
/* Code Snippets article <pre></pre> */
article pre {
  overflow: revert;
}
article pre code {
  font-size: calc(.9em + .1vw);
  background-color: #2d2d2d;
  resize: both;
  border-radius: .5em;
  padding: 1em;
  max-width: 1680px;
}

.hljs-deletion {
  color: #b04e57;
  background: #f9d7da;
}

.hljs-addition {
  color: #5d6c52;
  background: #cef9af;
}
/* article <div></div> */
article div {
  /* currently this is inline and user for code rendering of HTML & CSS examples */
}
/* article Media CK Editor Styles needs to match p
 * Todo: remove article top padding-top: 1em;
 */

/* article.media control all Media view modes
 * article.media--view-mode-media-article-full-width-1000w-
 * article.media--view-mode-default */

article.media {   /* other classes  align-left media media--type-image */
  /* width: 100%; Todo: remove after the article image settings/sizes are decided and documented but this should be set in Media view mode/ image style */
  max-width: 100%;
  padding-bottom: 0;
}
/* Captioned Media elements are wrapper in figure and have a right & left margin set to 40px by default */
figure {
  margin: 1em 0;
}
.caption > figcaption {
  font-style: italic;
}

/* Logged in adjustment for admin */
.user-logged-in .region-highlighted {
  padding-top: var(--header-height);
}
.user-logged-in .region-highlighted .messages {
  margin-bottom: 2em; /*4 x 8pt*/
}
.user-logged-in main {
  padding-top: 0;
}

/*
@media (prefers-color-scheme: dark) {

  :root {
    /* Prefers Color Scheme : Dark /
    --body-color: #c0c0c0;
    --html-background: #dfedf2; /* #676565; /
    --block-system-main-block: hsla(0, 0%, 0%, 0.5);

    /* Typography /
    --heading-colour: #c5eab7;
    --global-a: white;

    /* Elements /
    --tags: #c0cafe;

    /* Brand Colours /
    --brand-purple: #dcdcfa;

    /* Icon Fonts /
    --twitter: lightblue;
    --codepen: white;

  }
*/
/* this needs to be after the initial declaration
  h1 > span {
    background: hsla(0, 0%, 0%, 0.65);
    mix-blend-mode: normal;  / #000000 /
  }
*/

  /* Extra Layer added to overlay /
  .layout-container .dark {
    background-color: rgba(0, 0, 0, 0.65); /*#87BC7F; rgba(0,0,0,0.85);  rgba(135, 188, 127, 0.9),*
  } */
  /*.block-system-main-block {
    background: hsla(0, 0%, 0%, 0.5);
  }*/


  /* Admin /
  /* Logged in adjustment for admin /
  .messages a {
    color: revert;
  }
  /* This looked okay
  .path-node .region-content {
      background-color: #1b1b1b;
  }
  /

  nav .tabs a {
    color: white;
  }
  nav .tabs a:hover, nav .tabs .is-active a {
    color: black;
  }
  .node--unpublished {
    background-color: #ff09091c;
  }


  input, optgroup, select, textarea {
    color: #0b1022;
  }


}
*/

table, td, th {
  border: 1px solid #E5E5E5;
  font-size: .85rem;
}

td, th {
  padding: 8px;
  border-width: 0 1px 1px 0;
}

@media only screen and (min-width: 768px) {
  table {
    font-size: 1rem;
  }
}

/* temp fixes */
body:not(.path-contact) #block-dkcom-page-title {
  display:none;
}

/* turnstile */
fieldset.captcha-type-challenge--turnstile {
  max-width: 40em;
  border: 0 solid #c0c0c0;
  margin: 0 2px;
  padding: 0;
}
legend.captcha__title {
  visibility: hidden; /* Check accessibility */
}