/*

Theme Name: PERMA
Author: Zadro Web
Author URI: https://zadroweb.com
Description: Craft CMS Theme based on Bootstrap 5
Version: 2.0

*/


:root {
  --theme-color: #017EA7; /* blue */
  --theme-color-cta: #ed7323; /* orange */
  --border-radius: 0.45rem;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
header,
footer {flex: 0 0 auto;}
.content {flex: 1 0 auto;}

section,
.section {padding-top: 40px;padding-bottom: 40px;}
@media (min-width: 767px) {
  section,
  .section {padding-top: 60px;padding-bottom: 60px;}
}

a {color: var(--theme-color);text-decoration: none;}
a:hover {color: var(--theme-color-cta);}
h1, h2, h3, h4, h5, h6 {}
.btn {}

.grid-container {
    width: 100%;
    display: grid;
    grid-gap: 20px;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-flow: dense;
}

.text-theme {color: var(--theme-color);}
.text-cta {color: var(--theme-color-cta);}

.bg-theme {background-color: var(--theme-color);}
.bg-cta {background-color: var(--theme-color-cta);}

a.bg-theme:hover {background-color: var(--theme-color-cta);}
a.bg-cta:hover {background-color: var(--theme-color);}

.btn,
.card,
.form-control,
.input-group > .form-control,
.input-group > .btn,
.form-control.custom-select {border-radius: var(--border-radius);}
.form-label {margin-bottom: 0.2rem;margin-left: 0.1rem;font-weight: bold;font-size: 0.9rem;}

.card-header:first-child {border-radius: var(--border-radius) var(--border-radius) 0 0;}
.card-footer:last-child {border-radius: 0 0 var(--border-radius) var(--border-radius);}

.card-header.border-none {border:0;}

.card-body p:last-of-type {margin-bottom: 0;}

.accordion-button {
  color: var(--theme-color);
  cursor: pointer;
}
.accordion-button:focus {
  z-index: 3;
  border: none;
  outline: 0;
  box-shadow: none;
}
.accordion-button:not(.collapsed) {
  color: var(--theme-color-cta);
  background-color: white;
  box-shadow: none;
}

.table {margin: 1rem 0 2.5rem;}
.table ul {padding-left: 1rem;}

.btn {}
.btn:focus {box-shadow: none;}
.btn-theme,
.btn-theme:focus {
  background-color: var(--theme-color);
  border-color: var(--theme-color);
}
.btn-theme:hover {
  background-color: var(--theme-color-cta);
  border-color: var(--theme-color-cta);
}
.btn-cta,
.btn-cta:focus {
  background-color: var(--theme-color-cta);
  border-color: var(--theme-color-cta);
}
.btn-cta:hover {
  background-color: var(--theme-color);
  border-color: var(--theme-color);
}

.featured-button {transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;}
.featured-heading {font-size: 1.5rem;margin-bottom: 0;}

/* Navigation */


/*
.admin-bar .navbar,
.admin-bar .offcanvas-collapse.open,
.admin-bar .modal { margin-top: 32px !important; }
@media screen and ( max-width: 782px ) {
  .admin-bar .navbar,
  .admin-bar .offcanvas-collapse.open,
  .admin-bar .modal { margin-top: 46px !important; }
}
*/

.banner-nav {
  background-color: var(--theme-color);
  color: white;
}


.navbar .navbar-brand img {max-width: 160px;height: auto;position: relative;z-index: -1;}
.navbar .nav-link {font-size: 1.1rem;}
@media (min-width: 767px) {
  .navbar .navbar-brand img {max-width: 280px;}
}


.event {margin-bottom: 1rem;}
.event:last-of-type {margin-bottom: 0;}
.event-item {
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 0.25rem;
  background-color: rgba(0, 0, 0, 0.55);
  color: #fff;
}
a:hover .event-item {background-color: var(--theme-color);}
.event-item .month,
.event-item .day {line-height: 1.1;font-weight: bold;}
.event-item .month {font-size: 0.8rem;}
.event-item .day {font-size: 1.3rem;}
.event-item-heading {font-size: 1.15rem;line-height: 1;}

ul.quick-links {}
ul.quick-links li {margin-bottom: 0.15rem;}
ul.quick-links li:before{
  margin-right: 10px;
  margin-bottom: -3px;
  color: var(--theme-color-cta);
  display: inline-block;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: 'Font Awesome 5 Free';
  content:"\f101";
}


.page-files .fas {font-size: 1.35rem;}
.page-files > li {margin-bottom: 0.6rem;vertical-align: middle;}
.page-files > li:last-of-type {margin-bottom: 0;}


.entry-content h2 {
  color: var(--theme-color-cta);
  border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
  margin-top: 1.25rem;
}
.entry-content h3 {color: var(--theme-color);}

/* Aligns and Captions - WP */
/*
.aligncenter {margin-left: auto; margin-right: auto; text-align: center;}
.post img.alignleft,
.post img.alignright,
.post img.aligncenter,
.wp-caption {padding:4px;border:1px solid #eee;}
.alignleft {float: left; }
img.alignleft,
.wp-caption.alignleft {margin: 10px 25px 15px 0;}
.alignright {float: right; }
img.alignright,
.wp-caption.alignright {margin: 10px 0 15px 25px;}
.wp-caption.aligncenter,
img.aligncenter {display: block;}
.wp-caption {text-align:center;max-width:100%;}
.wp-caption-text {padding-top:7px;padding-bottom:4px;font-size: 0.9em!important;}
*/

/* Aligns and Captions */
figure.image {position:relative;display:table;}
figure img {display: table-cell;max-width: 100%;height: auto;}
.image-style-align-left {float: left; margin-right: 0.75rem;}
.image-style-align-right {float: right; margin-left: 0.75rem;}
.image-style-align-center {margin: 0.75rem auto;display: block;}
figure figcaption {
  display: table-caption;
  caption-side: bottom;
  font-size: 0.8rem;
  padding: 0.65rem;
  background-color:#f3f5f6;
}


/* Autocomplete on Files/Masonry */
.autocomplete {position: relative;}
.autocomplete-items {
  position: absolute;
  z-index: 99;
  /*position the autocomplete items to be the same width as the container:*/
  top: 100%;
  left: 0;
  right: 0;
}
.autocomplete-items > a {
  cursor: pointer;
  background-color: white;
  color: inherit;
}
/*when hovering an item:*/
.autocomplete-items > a:hover {
  background-color: var(--theme-color);
  color: white;
}
.autocomplete-item.active {
  background-color: #f0f0f0; /* Light grey background for active item */
}
.autocomplete .icon-inside {
  position: absolute;
  right: 10px;
  top: calc(50% - 13px);
  pointer-events: none;
  font-size: 1.125rem;
  color: #aaa;
  z-index: 100;
  font-size: 1.2rem;
}


.page-link {color: var(--theme-color);}
.page-link:hover {color: var(--theme-color-cta);}
.page-item.active .page-link {
  background-color: var(--theme-color);
  border-color: var(--theme-color);
}


.footer {font-size: 0.95rem;background-color: rgba(0, 0, 0, 0.03);}
/*
.footer a:not(.btn) {color:  var(--bs-body-color);}
.footer a:not(.btn):hover {text-decoration: underline;}
*/


.footer-menu {padding-left:0;margin-bottom: 0;}
.footer-menu > li {font-weight:bold;margin-bottom: 1rem;}
.footer-menu > li:last-of-type {margin-bottom: 0;}
.footer-menu .sub-menu {padding-left:0;list-style: none;}
.footer-menu .sub-menu li {font-weight:normal;margin-top:5px;}

.footer address,
.footer address p {margin-bottom: 0!important;}


/* not used on final */

.hero-heading {color: var(--theme-color-cta);}
.hero-img {opacity: 0.8;}

.feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: 1rem;
  font-size: 1.5rem;
  color: #fff;
}

.icon-link {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  text-decoration: none;
}
.icon-link > .fas {
  margin-top: 0.125rem;
  margin-left: 0.25rem;
  transition: transform .25s ease-in-out;
  fill: currentColor;
}
.icon-link:hover > .fas {
  transform: translate(0.25rem);
}


figure.table {
  overflow-x: auto;
}
figure.table table {
  width: 100%;
  margin: 1rem 0;
  vertical-align: top;
  border-color: var(--bs-table-border-color);
}
figure.table th,
figure.table td {
  padding: 0.5rem;
  vertical-align: top;
  border-top: 1px solid var(--bs-table-border-color);
}
figure.table thead th {
  vertical-align: bottom;
  border-bottom: 2px solid var(--bs-table-border-color);
  border-top: none;
}
figure.table tbody + tbody {
  border-top: 2px solid var(--bs-table-border-color);
}



.navbar .sub-menu {
  position: absolute;
  z-index: 1000;
  padding: 0;
  margin-top: 10px;
  list-style: none;
  text-align: left;
  background: white;
  border-radius: 0.25rem;
  box-shadow: 0 0 4px rgba(0,0,0,0.2);
  border: 1px solid rgba(0,0,0,.125);
  box-sizing: border-box;
  visibility: hidden;
  opacity: 0;
  transition: max-height 0.3s ease-out, opacity 0.3s ease-in, margin 0.3s ease-out;
  width: 260px;
}
.navbar .sub-menu li {display: block;padding-right: 0.25rem;padding-left: 0.25rem;}
.navbar .sub-menu a {font-size: 0.95rem;}
.navbar .sub-menu a:hover {}
.navbar li:hover > .sub-menu {margin-top: 0;visibility: visible;opacity: 1;}
.navbar .sub-menu .sub-menu {transition-property: none;}
.navbar .sub-menu li:hover > .sub-menu {left: 230px;margin-top: -40px;}

.navbar {padding:30px 0;background:white;transition: background-color 0.33s ease-in-out, border-color 0.33s ease;}
.navbar .nav-item {height:100%;}

.navbar .navbar-nav .fas {font-size:1.2rem;}
.navbar .navbar-nav .nav-link.active {color: var(--theme-color);}

/* 
 * Responsive Menu
 * Match breakpoint with navbar-expand-{sm,md,xl,xxl}
 * sm  575px
 * md  767px
 * lg  991px
 * xl  1199px
 * xxl 1399px
 */
@media (max-width: 991px) {

  .offcanvas-collapse {
    z-index: 1001;
    position: fixed;
    top: 0; /* set in script.js */
    bottom: 0;
    left: 100%;
    width: 300px; /* 100% or 287px for smaller canvas */
    padding-right: 1rem;
    padding-left: 1rem;
    padding-top: 2.75rem;
    overflow-y: auto;
    visibility: hidden;
    background-color: white;
    transition: transform .3s ease-in-out, visibility .3s ease-in-out;
  }
  .offcanvas-collapse.open {
    visibility: visible;
    transform: translateX(-100%);
  }

  .close-icon {
    display: flex;
    justify-content: center;
    position: absolute;
    top: 0.75rem;
    left: 1rem;
    width: 22px;
    height: 22px;
    cursor: pointer;
    z-index: 1001;
    background: #999;
  }
  .close-icon:before,
  .close-icon:after {
    content: "";
    position: absolute;
    width: 13px;
    height: 2px;
    top: 50%;
    background: white;
    transform: translateY(-50%) rotate(45deg);
    transition: transform 0.5s ease;
  }
  .close-icon:after {transform: translateY(-50%) rotate(-45deg);}
  .close-icon:hover,
  .close-icon:focus {background:var(--theme-color);}

  .navbar {} /* change navbar bg on mobile */
  .navbar .navbar-nav > li + li {border-top: 1px solid #dee2e6;}
  .navbar .navbar-nav a:hover {}
  .navbar .dropdown-toggle:after {display: none;}
  .navbar .navbar-toggler:focus {box-shadow: none;}

  /* toggler icon */
  .navbar .navbar-toggler {outline:0;padding:0;font-size:1rem;}

  /* offcanvas overlay */
  .navbar .navbar-toggler.open:before {
    z-index: -1;
    content: "";
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(17,17,17,0.5);
    opacity:1;
    transition: opacity ease-in-out 0.2s;
  } 
  .navbar .navbar-toggler:before {width:0px;opacity:0;}

  .navbar li .sub-menu {overflow: hidden;margin-top: 0!important;opacity: 1;display: block;visibility: visible;max-height: 0;transition: none;width: 100%;}
  .navbar .sub-menu li .sub-menu {left: 15px!important;}
  .navbar .sub-menu li:first-child > a {}
  .navbar .sub-menu li:last-child > a {}

  .navbar li .sub-menu.active {
    max-height: 36rem;
    position: relative;
    z-index: 999;
    box-shadow: none;
    transition: max-height 1s ease-in-out;
  }
  .navbar li .sub-menu:not(.active) {
    position: relative;
    box-shadow: none;
    max-height: 0;
    transition: max-height 0.5s ease-out;
  }

  .navbar .sub-menu {border: none;}
  .navbar .sub-menu a {padding-left: 0.8em;}
  .navbar .sub-menu a:hover {}

  .navbar .has-subnav {position: relative;}
  .navbar .has-subnav .toggle-link {
    display: flex;
    justify-content: center;
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    height: 40px;
    cursor: pointer;
    z-index: 1001;
  }
  .navbar .has-subnav .toggle-link:before,
  .navbar .has-subnav .toggle-link:after {
    content: "";
    position: absolute;
    width: 14px;
    height: 2px;
    top: 50%;
    background: var(--theme-color);
    transform: translateY(-50%) rotate(0);
    transition: transform 0.5s ease;
  }
  .navbar .has-subnav .toggle-link:not(.active):after {
    transform: translateY(-50%) rotate(270deg);
  }

}


.nav-search .search-toggle {
  position: relative;
  display: inline-block;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  color: var(--theme-color);
  background-color: transparent;
  border: 1px solid transparent;
  padding: 0.25rem 0.75rem;
  z-index: 21;
}
.nav-search .search-toggle:before {
  display: inline-block;
  font-style: normal;
  font-weight: 900;
  font-size: 1.2rem;
  text-align: center;
  width: 1.25rem;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: 'Font Awesome 5 Free';
  content: "\f002";
}
.nav-search.active .search-toggle:before {
  display:inline-block;
  font-style: normal;
  font-weight: 900;
  font-size: 1.2rem;
  text-align: center;
  width: 1.25rem;
  color: var(--bs-secondary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: 'Font Awesome 5 Free';
  content: "\f00d";
}
.nav-search .search-toggle:hover {
  color: var(--theme-color-cta);
}

.search-field.form-control {
  -webkit-appearance: auto;
  -moz-appearance: auto;
  appearance: auto;
  box-shadow: none;
}

.nav-search form {
  position: absolute;
  left: -99999px;
  pointer-events: none;
  visibility: hidden;
  transition: opacity 200ms ease-in-out;
  opacity: 0;
  top: 0;
  bottom: 0;
  z-index: 20;
  background: white; /* change to navbar bg color */
}
.nav-search.active form {
  left: 0;
  right: 2.5rem;
  pointer-events: auto;
  visibility: visible;
  opacity: 1;
}
.nav-search form .input-group {
  top: 50%;
  transform: translateY(-50%);
}

/* match offcanvas.css */
@media (max-width: 575px) {
  .nav-search.active form {
    padding-right: 0.75rem;
    padding-left: 0.75rem;
  }
}
@media (max-width: 991px) {
  .nav-search.active form {
    right: 6.575rem;
  }
}