/**
* Stylesheet for Basic Templates (upgrading to gutenberg).
*/

/* defining the theme colours for style.css */
:root {
  /* Custom colors: naming convention matches gutenberg colour pallette */
  --color-theme-default: #272625;
  --color-theme-white: #ffffff;
  --color-theme-black: #000000;
  --color-theme-light: #f5f5f5;
  --color-theme-medium-light: #e7e5e3;
  --color-theme-medium: #b2b2b2;
  --color-theme-dark: #24292c;
  --color-theme-primary: #153768;
  --color-theme-secondary: #007abd;
  --color-theme-secondary-light: #b3d0e9;
  --color-theme-tertiary: #f7941d;

  /* breakpoints: same as bootstrap breakpoints */
  --breakpoint-xl-width: 79.875rem;
  --breakpoint-lg-width: 960px;
  --breakpoint-md-width: 720px;
  --breakpoint-sm-width: 540px;
}
html,
body {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.25;

  /*overflow-x: hidden; /* note: this cannot be used with sticky navbar */
  font-style: normal;
  color: var(--color-theme-default);
  background: var(--color-theme-light);
}
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* headings */
.template-wrapper h1,
.template-wrapper .h1,
.template-wrapper h2,
.template-wrapper .h2,
.template-wrapper h3,
.template-wrapper .h3,
.template-wrapper h4,
.template-wrapper .h4,
.template-wrapper h5,
.template-wrapper .h5,
.template-wrapper h6,
.template-wrapper .h6 {
  margin-bottom: 1rem;
  font-weight: 700;
}
.template-wrapper p {
  margin-bottom: 1rem;
}

/* ----------------------------------------------------------
 * GUTENBERG required theme support
 * see: /page-templates/gutenberg-theme-support.php
 *-----------------------------------------------------------*/
/* setting breakpoints
-------------------------------------------------------------*/
.alignfull > .wp-block-group__inner-container,
.alignfull > .wp-block-cover__inner-container,
.wp-block-cover.has-custom-content-position.has-custom-content-position.alignfull
  .wp-block-cover__inner-container {
  width: 100%;
  padding-right: 1rem;
  padding-left: 1rem;
  margin-right: auto;
  margin-left: auto;
}
@media (min-width: 576px) {
  .alignfull > .wp-block-group__inner-container,
  .alignfull > .wp-block-cover__inner-container,
  .wp-block-cover.has-custom-content-position.has-custom-content-position.alignfull
    .wp-block-cover__inner-container {
    max-width: 100%;
  }
}
@media (min-width: 768px) {
  .alignfull > .wp-block-group__inner-container,
  .alignfull > .wp-block-cover__inner-container,
  .wp-block-cover.has-custom-content-position.has-custom-content-position.alignfull
    .wp-block-cover__inner-container {
    max-width: var(--breakpoint-md-width);
  }
}
@media (min-width: 992px) {
  .alignfull > .wp-block-group__inner-container,
  .alignfull > .wp-block-cover__inner-container,
  .wp-block-cover.has-custom-content-position.has-custom-content-position.alignfull
    .wp-block-cover__inner-container {
    max-width: var(--breakpoint-lg-width);
  }
}
@media (min-width: 1200px) {
  .alignfull > .wp-block-group__inner-container,
  .alignfull > .wp-block-cover__inner-container,
  .wp-block-cover.has-custom-content-position.has-custom-content-position.alignfull
    .wp-block-cover__inner-container {
    max-width: var(--breakpoint-xl-width);
  }
}

/* Alignment
-------------------------------------------------------------*/
.alignwide:not(.wp-block-media-text) {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}
.alignfull {
  width: 100vw;
  margin-left: calc(-100vw / 2 + 100% / 2);
  margin-right: calc(-100vw / 2 + 100% / 2);
}
.alignfull .blocks-gallery-grid,
.alignfull .wp-block-gallery {
  width: 100%;
}
.aligncenter {
  text-align: center;
}
/* 
   * alignwide breakpoints = half the margin of main
   * calc( (breakpoint - main padding) + (viewport - breakpoint) / 2 
  */
@media (min-width: 576px) {
  .alignwide:not(.wp-block-media-text) {
    width: calc(
      (var(--breakpoint-sm-width) - 2rem) + (100vw - var(--breakpoint-sm-width)) /
        2
    );
    margin-left: calc(-1 * ((100vw - var(--breakpoint-sm-width)) / 4));
    margin-right: calc(-1 * ((100vw - var(--breakpoint-sm-width)) / 4));
  }
}
@media (min-width: 768px) {
  .alignwide:not(.wp-block-media-text) {
    width: calc(
      (var(--breakpoint-md-width) - 2rem) + (100vw - var(--breakpoint-md-width)) /
        2
    );
    margin-left: calc(-1 * ((100vw - var(--breakpoint-md-width)) / 4));
    margin-right: calc(-1 * ((100vw - var(--breakpoint-md-width)) / 4));
  }
}
@media (min-width: 992px) {
  .alignwide:not(.wp-block-media-text) {
    width: calc(
      (var(--breakpoint-lg-width) - 2rem) + (100vw - var(--breakpoint-lg-width)) /
        2
    );
    margin-left: calc(-1 * ((100vw - var(--breakpoint-lg-width)) / 4));
    margin-right: calc(-1 * ((100vw - var(--breakpoint-lg-width)) / 4));
  }
}
@media (min-width: 1200px) {
  .alignwide:not(.wp-block-media-text) {
    width: calc(
      (var(--breakpoint-xl-width) - 2rem) + (100vw - var(--breakpoint-xl-width)) /
        2
    );
    margin-left: calc(-1 * ((100vw - var(--breakpoint-xl-width)) / 4));
    margin-right: calc(-1 * ((100vw - var(--breakpoint-xl-width)) / 4));
  }
}

.template-wrapper-index {
  margin-top: 9.1875rem; /* header/nav spacing */
}

/* padding/margins/spacing adjustments 
 *-----------------------------------------------------------*/
.pb-0 {
  padding-bottom: 0 !important;
}
.w-60 {
  width: 60%;
}
@media (max-width: 778px) {
  .w-60 {
    width: 100%;
  }
}

/* specific block adjustments */
.wp-block-group__inner-container > .wp-block-columns:last-of-type {
  margin-bottom: 0;
}
.wp-block-group:where(.has-background) {
  padding: 2rem 2.375rem;
}