/**
 * @file
 * Subtheme specific CSS.
 */

html,
body{
  height:100%;
  margin: 0;
  padding: 0;
}

img {
  max-width:100%;
  height:auto;
}

body {
  color:#555;
  font-size:0.9rem;
  scroll-behavior: smooth;
  scroll-snap-type: y proximity;
}

h2 {
  font-size:1.7em;
  opacity: 0.95;
  text-shadow: 2px 2px 6px rgba(51,51,51,0.4);
  transition:all ease-in-out 2s;
  transition-property: font-size, letter-spacing;
}

p a {
  text-decoration:underline;
}
p a.btn {
  text-decoration:none;
}

header,
a.navbar-brand,
#CollapsingNavbar nav.menu--main{
  transition-property: opacity, background;
  transition-duration: 1s;
  transition-timing-function: ease-in-out;
}

#navbar-main {
  padding:0;
  align-items: flex-start;
}

.navbar-brand {
  font-family: Monteserrat;
}
.site-name-unstruck .navbar-brand {
  font-family: 'samarkannormal';
}

.navbar-light .navbar-toggler{
  border:none;
}
button:focus{
  outline:0;
}

.scrolled header {
  opacity:0.1;
  background: rgba(255,255,255,0.42);
} 
header:hover{
  opacity:1;
  background: rgba(255,255,255,0.75);
}

#CollapsingNavbar nav.menu--main,
a.navbar-brand/*,
.site-name-slogan*/ {
  background: rgba(255,255,255,0.42);
  padding:2px 6px;
}
a.navbar-brand:hover,
.site-name-slogan:hover,
#CollapsingNavbar nav.menu--main:hover{
  background: rgba(255,255,255,0.75);
}
a.navbar-brand {
  font-size: 1.4rem;
  padding: .25rem 1rem;
}
.site-name-slogan{
  color:#555;
  font-size: 1.3rem;
  padding: .25rem 1rem;
}

header:hover #CollapsingNavbar nav.menu--main,
header:hover a.navbar-brand,
header:hover .site-name-slogan,
.scrolled #CollapsingNavbar nav.menu--main,
.scrolled a.navbar-brand,
.scrolled .site-name-slogan {
  background: transparent;
}
.navbar-expand-lg .navbar-nav .nav-link {
  padding-right: 0.8rem;
  padding-left: 0.8rem;
  padding: .25rem 1rem;
}

/** MAIN CONTENT REGION **/

#content {
  background-image: url(/sites/unstruck.ca/files/styles/full_width_background/public/2019-07/adventure-balance-balanced-7640.jpg);
  background-attachment: fixed;
  background-repeat:no-repeat;
  background-size: cover;
  background-position: center;
}

#content nav.tabs {
  background:rgba(255,255,255,0.95);
  margin:0;
  border:0;
}
.nav-tabs .nav-link,
.nav-tabs .nav-link.active{
  border-radius:0;
}
#content.col {
  padding: 0;
}
.path-frontpage.node--type-page #content{
  padding: 35% 0 0;
  padding-top: 45vh;
}
.node--type-article #content,
.node--type-event #content{
  padding: 4em 0 8em;
  text-align: justify;
}
#content a {
  color: #222;
  letter-spacing:2px;
  font-weight: bold;
}
#content a:hover,
#content a:visited {
  color: #444;
}

.node--type-webform .block-system-main-block,
.node--type-page .block-system-main-block {
  padding: 6em 0;
  background:rgba(255,255,255,0.95);
}

.block-system-main-block > .content article .node__content .field .field__item > .row,
.block-system-main-block > .content article .node__content .field--name-body > .row {
  margin:0;
}


/** COMMON (front page) VIEW SETTINGS **/

.block-views-blockschedule-block-1,
.block-views-blockblog-block-block-1{
  background-repeat:no-repeat;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  scroll-snap-align: start;
}
.block-views .content {
  padding: 4em 0;
  background-color: rgba(244,239,235,1.000);
}
.block-views h2 {
  padding: 2em 0;
  color:#f4efeb;
}

/** Schedule / Upcoming Events VIEW **/
.block-views-blockschedule-block-1 {
  background-image: url(/sites/unstruck.ca/files/2019-07/feet-fitness.jpg);
}

.block-views-blockschedule-block-1 .content{
 padding: 3em 0 4em;
}
.view-id-schedule .view-header .container{
  display:flex;
  justify-content: space-between;
}

.view-id-schedule .events-list {
  padding: 1em 0 0;
}
.view-id-schedule .events-list h3{
  font-size:1.5rem;
  font-family: futura-condensedmedium;
  padding: 0.5em;
  background: rgba(255,255,255,0.1);
  border-top: 2px solid rgba(0,0,0,0.1);
  border-bottom: 2px solid rgba(0,0,0,0.1);
}

.view-id-schedule .events-list ul {
  padding:0 1em;
}
.view-id-schedule .events-list ul li {
  font-family: futura-medium;
  font-size: 1.2rem;
  list-style:none;
}

.view-id-schedule .end-time {
  padding: 0 2em 0 0;
}
.view-id-schedule .views-field-field-teacher {
  flex-basis: 100%;
  color:#777;
  font-size: 0.9rem;
}
 
.view-id-schedule .pagination {
  justify-content: center;
}
.view-id-schedule .pagination .page-link{
  background:transparent;
  border:0;
}
.view-id-schedule .pagination span.page-link{
  cursor: auto;
  color:#777;
}
/** BLOG VIEW **/

.block-views-blockblog-block-block-1{
  background-image: url(/sites/unstruck.ca/files/2019-07/stacked_rocks.jpg);
}


.view-blog-block .news-list {
  margin:auto;
}

.view-blog-block ul{
  list-style: none;
  padding:0;
  text-align: center;
}
/*
.view-blog-block{
  margin-bottom:30px;
}
*/
.view-blog-block .col-md-4 .views-field-title {
  padding: 0.75em 0;
  font-size: 1.2em;
}

/** CALENDAR VIEW **/

.path-calendar .views-element-container {
  padding: 0;
}

.view-calendar {
  /*margin: 100px 0;*/
  background:rgba(255,255,255,0.5);
  background-color: rgba(51,51,51,0.4);
}
.view-calendar .view-content.row {
  margin:0;
}

#calendar {
  color: #f4efeb
}

#calendar {
  padding: 1em;
  border-radius: 4px;
}
#calendar h2,
#calendar a,
#calendar a:visited,
#calendar a:hover {
  color: #f7faf1;
}

.fc-unthemed td.fc-today {
  background-color: rgba(244,239,235,1.000);
  background-color: rgba(51,51,51,0.4);
}
.fc-unthemed .fc-list-heading td {
  background-color: #333;
}

.fc-unthemed tr.fc-list-item:hover td{
  background-color: rgba(51,51,51,0.4);
}

.fc-day-grid-event .fc-content {
  white-space: normal;
}


.path-contact .block-system-main-block,
.node--type-article .block-system-main-block,
.node--type-event .block-system-main-block {
  background-color: rgba(51,51,51,0.65);
  background:rgba(255,255,255,0.95);
  padding: 1em;
}

/** EVENT (CONTENT TYPE) STYLING **/
.node--type-event #content {
  background-image: url(/sites/unstruck.ca/files/2019-07/feet-fitness.jpg);
  background-attachment: fixed;
  background-repeat:no-repeat;
  color: #f4efeb;
}

h1.title{
  font-size: 2.4em;
  padding: 1.5em 0;
  text-shadow: 2px 2px 6px rgba(51,51,51,0.65);
  color: #f4efeb;
  text-align: left;
}

.node--type-story h1.title {
  display:none;
}

.node--type-event .block-system-main-block {
  background-color: rgba(51,51,51,0.65);
}

.node--type-event .block-system-main-block .node__content .field{
  position:relative;
}
.node--type-event .block-system-main-block .node .field--type-image {
  float: none;
  margin: 1em auto;
  text-align:center;
}

.node--type-event #content a{
  color:#ffffff;
}

.node--type-event #content nav.tabs {
  background-color: rgba(51,51,51,0.4);
}
.node--type-event .nav-tabs .nav-link.active{
  background-color:transparent;
}

.node--type-event .block-system-main-block .field--name-field-start-date,
.node--type-event .block-system-main-block .field--name-field-end-date{
  display:inline-block;
}

.node--type-event .block-system-main-block .field--name-field-end-date::before {
  content: " - ";
}

.node--type-event .block-system-main-block .node__content{
  padding:0 40px;
}

.node--type-event .block-system-main-block .field--name-a::before,
.node--type-event .block-system-main-block .field--name-field-teacher::before,
.node--type-event .block-system-main-block .field--name-field-price::before,
.node--type-event .block-system-main-block .field--name-field-start-date::before,
.node--type-event .block-system-main-block .field--name-field-location .address::before,
.node--type-event .block-system-main-block .field--name-body::before,
.node--type-event .block-system-main-block ul li:before{
  font-family:"Font Awesome 5 Free";
  font-weight:900;
  position:absolute;
  left:-40px;
}
.node--type-event .block-system-main-block .field--name-field-location .address::before{
  padding: 0 13px 0 0;
}

.node--type-event .block-system-main-block .field--name-field-start-date::before {
  content: "\f017";
  left:-42px;
}
.node--type-event .block-system-main-block .field--name-field-location .address::before {
  content: "\f3c5";
}
.node--type-event .block-system-main-block .field--name-body::before {
  content: "\f46d";
}
.node--type-event .block-system-main-block .field--name-field-teacher::before {
  content: "\f51c";
  content: "\f1ae";
}
.node--type-event .block-system-main-block .field--name-field-price::before {
  content: "\f155";
  left:-36px;
}
 
.node--type-event .block-system-main-block .field--name-field-location p{
  margin-bottom:0
}
.node--type-event .address-map-link{
  display:block;
  margin-bottom: 1em;
  font-size:1.1rem;
}
.node--type-event .address-map-link:hover{
  text-decoration: none;
}
.node--type-event .address-map-link::before {
  font-family:"Font Awesome 5 Free";
  font-weight:900;
  content: "\f0c1";
  padding: 0 0.5em 0 0;
}

.node--type-event .block-system-main-block ul {
  list-style: none;
}
.node--type-event .block-system-main-block ul li:before{
  content: "\f0a4";
  content: "\f069";
  left:0px;
}

/**CONTACT PAGE **/
#contact-message-feedback-form {
  transition:width 1s ease-in-out;
  padding: 4em 0;
}


.node__content {
  font-size: 1.3em;
  line-height:1.6em;
  margin:0;
}

.node__content img.align-left {
  padding: 0 1em 1em 0;
}

.node__content ol {
  overflow: auto;
}

.d-inline-block.align-top.site-name-slogan  {
  display:none!important;
}

#CollapsingNavbar {
  justify-content: flex-end;
}


textarea.form-control,
input.form-text.form-control,
input.form-email.form-control{
  background-color:rgba(255,255,255,0.95);
  background-color: rgba(244,239,235,.95);
}

.i18n-en .block-language ul li.en,
.i18n-fr .block-language ul li.fr,
.block-language .is-active{
  display:none;
}

#block-views-block-blog-block-block-1 ul{
  list-style: none;
  padding:0;
  margin:0;
}

#block-views-block-blog-block-block-1 .col-md-4 .views-field-title {
  padding: 1em 0;
  font-size: 1.1em;
}


/** MISC **/

.caption > figcaption {
  background-color: rgba(51,51,51,0.55);
  border-bottom-left-radius: 4px;
  border-bottom-right-radius:  4px;
  padding: 0.5em;
  font-family: futura-medium;
}

.info-grid .row div{
  text-align:center;
  padding-bottom: 2em;
}
.info-grid .row div i{ 
  font-size:4em;
  padding: 0.25em 0 ;
}

.btn-primary {
  background-color:#00a86b;
  border-color:#00a86b;
}

.site-footer {
	background-color: #333;
	padding: 0;
}

.site-footer .block h2{
  text-align:center;
}

.site-footer section.region {
  width: 25%;
  margin: 0;
}

.site-footer__bottom .block {
  margin:0
}

.site-footer__bottom .row {
  justify-content: space-between
}

form .col-auto{
  padding:0;
}

#main .section {
  min-height: 500px;
}

.block-language ul li{
  list-style: none;
}

#navbar-top ul li{
  display:inline;
  list-style:none;
  padding: 3px 10px;
}

#block-languageswitcher ul.links li.is-active{
  display:none;
}

.language-switcher-language-url ul.links li a {
    padding: .5rem  0 .5rem 1rem;
    display: inline-block;
}

.site-footer__bottom {
  margin:0;
  border:0;
}

/** SANTIH / CHAKRA CONCEPT **/
.story {
  color: #ffaf1a;
  background-size:cover;
  background-position: center;
  background-attachment: fixed;
  background-image: url(/sites/unstruck.ca/files/2019-07/tree-on-dock.jpg);
  min-height:100vh;
  align-items: center;
  padding: 20% 0;
}


.story p {
  text-align:justify;
}
.story p,
.story ul {
  background-color: rgba(51,51,51,0.55);
  border-radius: 4px;
  padding: 0.5em 1em;
  width:auto;
  display:inline-block;
}
.field__item:nth-child(even) .story,
.story.right {
  text-align:right;
}
.field__item:nth-child(even) .sory p,
.field__item:nth-child(even) .story ul,
.story.right p,
.story.right ul{
  margin:0 0 0 auto;
}

#content .story a{
  color: #f7faf1;
}

.story ul li{
  list-style:none;
}

.off-white-text {
  color: #f4efeb;
}
.purple-text {
  color: #d499ff;
}
.pink-text {
  color: #fdbcf1;
}
.green-text {
  color:#a7cd7e;
}
.blue-text{
  color:#74c9df;
}
.orange-text{
  color:#ffaf1a;
}
.red-text {
  color: #ff4d4d;
}
.yellow-text {
  color: #f2e819;
}
.beige-text {
  color: #fce4a8;
}
.gray-text{
  color: #f1eee9;
}

@supports (-webkit-overflow-scrolling: touch){
  /* CSS specific to iOS devices */ 

  .block-views-blockschedule-block-1,
  .block-views-blockblog-block-block-1,
  #content,
  .story {
    background-attachment: scroll;
  }
  .path-frontpage #content {
    background-size:contain;
    background-position: unset;
  }
}
.field--name-field-story-page > .field__item{
  scroll-snap-align: center;
}

/** DEVICES THAT CANNOT HOVER - TOUCHSCREENS **/
@media (hover: none) {

  /*.field--name-field-story-page
  body.node--type-story {
    scroll-snap-type: y proximity;
    overflow:scroll;
    height: 100vh;
    scroll-behavior: smooth;
  }
  */
  
}

@media only screen and (min-width:320px ){
  h2 {
    font-size:1.8em;
  }
}

@media only screen and (min-width:380px ){
  h2 {
    font-size:2em;
  }
}

@media only screen and (min-width:480px ){
  h2 {
    font-size:2.2em;
  }
}

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

  .d-inline-block.align-top.site-name-slogan  {
    display:inline-block!important;
  }
  h2 {
    font-size:2.4em;
  }

  .story p,
  .story ul {
    max-width: 84%;
  }
}
@media only screen and (min-width:768px ){

  body {
    font-size:1.1rem;
  }
  h1.title{
    font-size: 3em;
  }
  h2 {
    font-size:2.8em;
  }

  .story {
    padding: 4% 0;
  }

  #contact-message-feedback-form .form-type-textfield,
  #contact-message-feedback-form .form-type-email{
    width:49%;
    display:inline-block;
  }

  #contact-message-feedback-form .form-type-textfield:first-child{
    margin-right:1%;
  }

  .view-blog-block ul{
    text-align: left;
  }
}

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

  body {
    font-size:1.2rem;
  }
  
  header{
    position: fixed;
    top: 0px;
    left: 0px;
    height: auto;
    z-index: 5;
    width: 100%;
  }
  
  .toolbar-horizontal header{
    position: relative;
  }
  #CollapsingNavbar nav.menu--main,
  a.navbar-brand,
  .site-name-slogan {
    border-bottom-left-radius: 5px;
  }

  #CollapsingNavbar nav.menu--main,
  a.navbar-brand,
  .site-name-slogan {
    border-bottom-right-radius: 5px;
  }
  h1.title{
    font-size: 3.5em;
  }
  #content {
    padding-top:4%;
  }
  .path-frontpage.node--type-page #content{
    padding-top: 50vh;
  }
  .node--type-event .block-system-main-block .node .field--type-image {
    float: right;
    margin: 0.3em 0 1em 1em;
  }
  /*
  .path-contact .block-system-main-block{
    margin: 55px 0 4em;
  }
  */
  .story h2 {
    letter-spacing: 2px;
    font-size:3em;
  }
  .story p,
  .story ul {
    max-width: 75%;
  }
}
@media only screen and (min-width:1080px ){

  body {
    font-size:1.3rem;
  }
  h2 {
    letter-spacing: 4px;
    font-size:3.2em;
  }
}
@media only screen and (min-width:1180px ){

  h2 {
    letter-spacing: 8px;
    font-size:3.4em;
  }
}
@media only screen and (min-width:1280px ){

  body {
    font-size:1.4rem;
  }

  h2 {
    letter-spacing: 12px;
    font-size:3.5em;
  }
}
@media only screen and (min-width:1380px ){

  body {
    font-size:1.5rem;
  }
  .story h2 {
    letter-spacing: 18px;
    font-size:3.6em;
  }
}
@media only screen and (min-width:1480px ){

  body {
    font-size:1.6rem;
  }
  h2 {
    font-size:3.7em;
    letter-spacing: 20px;
  }
}