/* CSS vars */
:root {
  /*colours*/
  --motif-green: #5bb75b;
  --motif-gold: #e2ca83;
  --motif-blue: cornflowerblue;
  --motif-red: darkred;
  /*screen sizes (based on Bulma)*/
  /* THESE ARE HERE largely for reference purposes - they can't be used in @media queries */
  --mobile-max: 768px;
  --tablet-min: 769px;
  --tablet-max: 1023px;
  --desktop-min: 1024px;
  --desktop-max: 1215px;
  --widescreen-min: 1216px;
  --widescreen-max: 1407px;
  --fullhd-min: 1408px;
}



/* Motif classes */

.motif-text-left {
  text-align: left;
}

.motif-text-center {
  text-align: center;
}

.motif-text-right {
  text-align: right;
}

.motif-text-justify {
  text-align: justify;
}


/* To apply TinyMCE style in front end */
.align_center {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.align_left {
  text-align: left;
}

.align_right {
  text-align: right;
}
/* Merge above with previous? */


figure {
  /* figure for image that has a caption */
  display: table;
  margin: 1em 0;
}

figure figcaption {
  /* display caption text below image contained to image width */
  display: table-caption;
  caption-side: bottom;
  font-size: 13px;
  line-height: 1.4em;
  margin-top: 5px;
  color: #777;
}

@media only screen and (max-width: 767px) {
  /* common PW mobile layout adjustments for widths under 768px */

  .align_left, .align_right, .align_center {
    /* display images in center rather than aligned */
    display: block;
    float: none;
    margin: 1em auto;
    max-width: 100%;
  }

  figure,
  figure figcaption {
    /* let figcaption display as wide as needed below image */
    display: block;
    text-align: center;
  }
}

/* To prevent edit links appearing at the bottom of the grid in a 'grid-area' type of sub-layout and place them just above their container
Note that: Absolute positioning relative to a container only works if the container has position:relative, otherwise it will be relative to the page.
(The container is given the tailwind 'relative' class by MotifBlockPage:renderItem() if it has a grid area) */
.relative .motif-sublayout.motif-edit {
  position:absolute;
  top: -18px;
}

/*
    Background image for mobile
      - If the device is a mobile, the background image will be fixed
      Used in conjunction with js to keep it fixed when scrolling
 */
@media (hover: none) {
  .fix-background {
    background-attachment: initial;
  }
}