/* --------------------------------------------------
     
___________            __          
\_   _____/___   _____/  |_  ______
 |    __)/  _ \ /    \   __\/  ___/
 |     \(  <_> )   |  \  |  \___ \ 
 \___  / \____/|___|  /__| /____  >
     \/             \/          \/ 

  -------------------------------------------------- */


@font-face {
    font-family: 'Agrandir';
    src: url('agrandir-regular-webfont.woff2') format('woff2'),
         url('agrandir-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'Agrandir';
    src: url('agrandir-textbold-webfont.woff2') format('woff2'),
         url('agrandir-textbold-webfont.woff') format('woff');
    font-weight: bold;
    font-style: normal;

}





/* --------------------------------------------------

____   ____            .__      ___.   .__                 
\   \ /   /____ _______|__|____ \_ |__ |  |   ____   ______
 \   Y   /\__  \\_  __ \  \__  \ | __ \|  | _/ __ \ /  ___/
  \     /  / __ \|  | \/  |/ __ \| \_\ \  |_\  ___/ \___ \ 
   \___/  (____  /__|  |__(____  /___  /____/\___  >____  >
               \/              \/    \/          \/     \/ 

  -------------------------------------------------- */

:root {
  --header-height: 3rem;

  --color-petrol: #005f6a;

  --color-cream: #f0f3bd;
  --color-cream-light: #f0f3bd;

  --default-max-width: 38rem;
  --default-padding: 1rem;
  --default-vertical-spacing: calc(4 * var(--default-padding));

  --font-head: 'Agrandir', Helvetica, Arial, sans-serif;
  --font-body: 'Agrandir', Helvetica, Arial, sans-serif;
}

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

  :root {
    --default-padding: 2rem;
  }

}




/* --------------------------------------------------

__________        __    __                        
\______   \__ ___/  |__/  |_  ____   ____   ______
 |    |  _/  |  \   __\   __\/  _ \ /    \ /  ___/
 |    |   \  |  /|  |  |  | (  <_> )   |  \\___ \ 
 |______  /____/ |__|  |__|  \____/|___|  /____  >
        \/                              \/     \/ 

  -------------------------------------------------- */

.buttonset {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  list-style: none;
}

.button,
.wp-block-buttons .wp-block-button__link,
#sb_instagram #sbi_load .sbi_load_btn {
  background-color: var(--color-cream);
  border-radius:0;
  color: black;
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .5rem .8rem;
  border: 2px solid var(--color-cream);
  text-decoration: none;
  font-size: .8rem;
  line-height: 1rem;
  font-weight: bold;
  cursor: pointer;
}

.button:hover,
.wp-block-buttons .wp-block-button__link:hover,
#sb_instagram #sbi_load .sbi_load_btn:hover {
  background-color: var(--color-cream-light);
}

.button-inverse {
  background: transparent;
  border-color: var(--color-cream);
  color: var(--color-cream);
}

.button-inverse:hover {
  border-color: white;
  color: white;
}

.button-icon {
  width: 1.1rem;
}

.button-icon svg {
  display: block;
  width: 100%;
  height: auto;
  color: inherit;
}

.button-icon path,
.button-icon rect {
  stroke-width: 2;
  stroke: currentColor;
}

.button-label {
  font-weight:600;
}



/*

__________.__                 __       _________ __          .__          
\______   \  |   ____   ____ |  | __  /   _____//  |_ ___.__.|  |   ____  
 |    |  _/  |  /  _ \_/ ___\|  |/ /  \_____  \\   __<   |  ||  | _/ __ \ 
 |    |   \  |_(  <_> )  \___|    <   /        \|  |  \___  ||  |_\  ___/ 
 |______  /____/\____/ \___  >__|_ \ /_______  /|__|  / ____||____/\___  >
        \/                 \/     \/         \/       \/               \/ 

*/

.hero-illustration > img {
  height:35vmax;
  max-height: 30rem;
  width:auto;
}

.wp-block-column {
  padding:var(--default-padding);
  max-width:var(--default-max-width);
}

.wp-block-paragraph,
.wp-block-heading,
.wp-block-list,
.wp-block-quote,
.wp-block-accordion,
.wp-block-post-title,
.embed-privacy-opt-out  {
  max-width:var(--default-max-width);
  margin-left:auto;
  margin-right:auto;
}

main > .wp-block-paragraph,
main > .wp-block-heading,
.embed-privacy-opt-out {
  padding-left:var(--default-padding);
  padding-right:var(--default-padding);
}

.wp-block-separator {
  border-top:2px solid black;
  margin:2rem 0;
}

.wp-block-quote,
.wp-block-list {
  padding:0 var(--default-padding);
}

  .wp-block-quote p {
    font-style:italic;
    background:var(--color-pink);
    border:2px solid black;
    box-shadow: 3px 3px 0 #333;
    padding:1rem;
  }

  .wp-block-quote cite {
    font-size:.8rem;
    font-weight:bold;
    text-align: right;
  }

    .wp-block-quote cite:before {
      content:'\2014';
      padding-right:.5rem;
    }

    .wp-block-list > li {
      padding:.25rem 0;
      margin-left:1rem;
    }

/* Accordion */

.wp-block-accordion-heading {
  font-size:.8rem;
  font-weight:700;
  display:inline;
  position:relative;
  z-index:2;
}

  .wp-block-accordion-heading button {
    background-color:var(--color-blue);
    padding:.5rem .8rem;
    border:2px solid black;
    box-shadow:3px 3px 0 #333;
    width:unset;
    margin:0 auto;
  }

  .wp-block-accordion-heading button:hover
  /*.wp-block-accordion-item.is-open button */{
    background-color:white;
  }

  .wp-block-accordion-heading button:hover .wp-block-accordion-heading__toggle-title {
    text-decoration: none;
  }

    .wp-block-accordion-heading__toggle-icon {
      display:none;
    }

    .wp-block-accordion-item.is-open .wp-block-accordion-panel {
      background-color:#c2edff;
      padding:var(--default-padding);
      font-size:90%;
      padding: calc(2 * var(--default-padding)) var(--default-padding) var(--default-padding);
      transform:translateY(calc(-.5 * var(--default-padding)));
      border:2px solid black;
    }


/* Media & Text */

.wp-block-media-text {
  max-width: calc(2 * var(--default-max-width));
  margin: 2rem auto;
  border: 2px solid black;
  box-shadow: 3px 3px 0 #333;
}

  .wp-block-media-text>.wp-block-media-text__content {
    padding: var(--default-padding);
  }


/* Latest Posts */

.wp-block-latest-posts.wp-block-latest-posts__list {
  max-width: var(--default-max-width);
  margin:0 auto;
}

  .wp-block-latest-posts.wp-block-latest-posts__list li {
    border: 2px solid black;
    box-shadow: 3px 3px 0 #333;
  }

  .wp-block-latest-posts__featured-image img {
    aspect-ratio: 2.2;
    object-fit: cover;
  }

  .wp-block-latest-posts__post-title {
    display:block;
    font-weight:900;
    font-size:1.5rem;
    padding:2rem var(--default-padding) 0;
    text-decoration: none;
  }

  .wp-block-latest-posts__post-date {
    padding:0 var(--default-padding);
    font-size:.8rem;
  }

  .wp-block-latest-posts__post-excerpt {
    padding:var(--default-padding);
    font-size:.9rem;
  }

  .wp-block-latest-posts__read-more {
    display:table;
    background-color:var(--color-blue);
    padding: .5rem .8rem;
    border: 2px solid black;
    box-shadow:3px 3px 0 #333;
    text-decoration: none;
    font-size: .8rem;
    line-height: 1rem;
    font-weight: bold;
    cursor: pointer;
    margin-top:1rem;
  }

  .wp-block-latest-posts__read-more:hover {
    background-color:white;
  }



/* Image Block */

.wp-block-image {
  text-align:center;
}

.wp-block-image.aligncenter {
  display:block;
}



/* Image Gallery Block */

.wp-block-gallery.has-nested-images figure.wp-block-image img {
  aspect-ratio: 1; /* squared size thumbnails */ 
}
.wp-block-gallery.has-nested-images figure.wp-block-image {
  flex-grow: 0; /* width fix */ 
}

/* Editor Page Title */

.wp-block-post-title.editor-post-title {
  font-family:'Courier',monospace;
  font-weight:normal;
  font-size:1.5rem;
  border-bottom:1px solid #dddddd;
  margin:0;
  max-width:unset;
  padding:0 2rem 2rem;
}


/* YouTube Embed (Privacy Plugin) */

.embed-privacy-container {
  text-align: center;
}


/* WP Forms */

.wpforms-block {
  max-width:var(--default-max-width);
  margin:0 auto;
  
  background:var(--color-lavender) !important;
  padding:var(--default-padding) !important;
  border:2px solid black !important;
  box-shadow: 3px 3px 0 #333 !important;
}


/* Smash Balloon Instagram Feed */

.sbi_item {
  border:2px solid black;
  box-shadow: 3px 3px 0 #333 !important;

}


/* Image Gallery */

.wp-block-gallery {
  padding:var(--default-padding);
  border-top:2px solid black;
  border-bottom:2px solid black;
  background:var(--color-blue);
  margin-bottom:0;
}

  .wp-block-gallery .wp-block-image {
    border:2px solid black;
    box-shadow: 3px 3px 0 #333 !important;

  }