/**
   * @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;

  /* Used for absolute positioning width
   * of the navigation menu.
   */
  --navigtaion-expanded: 265px;
  --navigtaion-collapsed: 73px;

  /* 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);


  /* Zeplin Colour Vars */
  --clay-c-97-b-13: #c97b13;
  --forest-013023: #013023;
  --night-forest-002118: #002118;
  --straw-peach-fd-9898: #fd9898;
  --mid-cream-efeae-0: #efeae0;
  --mid-cream-eee4cf: #eee4cf;
  --light-cream-f-4-f-4-ea: #f4f4ea;
  --gradient-e-9-e-9-e-9: #e9e9e9;
  --chalk-f-9-f-9-f-9: #f9f9f9;
  --color-gray-2: #c2d1d9;
  --color-gray-1: #424b5a;
  --color-gray-3: #f2f5f7;
  --card: #fff;
  --charcoal: #101010;

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

  --heading-font: 'Cormorant Garamond', serif;

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

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

  /* Layout */
  --block-overlap-height: 45px;

  /* 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;
}

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

.page-node-type-layout .layout-container .dark {
  background: rgba(255,255,255,0);
}

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


.pinned-sticky .demo-icon {
  font-size: 1.8em;
  color: #186fae;
}

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 2em;
}

.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"
 */
.page-node-type-food article,
.page-node-type-recipe article,
.page-node-type-article article,
.page-node-type-page article,
.view-frontpage article:not(.node--type-layout, .node--view-mode-teaser-carousel),
/*.views-element-container,*/
.view-frontpage article:not(.node--type-layout) .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:not(.node--type-layout),
  /*.views-element-container,*/
  article:not(.node--type-layout) .views-element-container,
  .contact-form {
    max-width: 80%;
  }
}

@media only screen and (min-width: 1336px) {
  article:not(.node--type-layout),
  /*.views-element-container,*/
  article:not(.node--type-layout) .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;
}

/* This turns off everywhere, specifically for this site the Layout Builder UI check boxes are hidden by it.
   todo: find which checkbox it was for
.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 */
}