/*html, body {
    margin: 0;
    padding: 0;
    width: 100%;
}*/

html {
	scroll-padding-top: 136px;
}

/* Cralls trying out hover state */
.wp-block-button__link:hover {
        background-color: #80d779;
	color: #1A1919;
}

/* a bit funky but the theme has the height set to 100% and that's just How CSS Priority Works
 * it also won't display as sticky in the editor but it works fine for users */
body {
	height: fit-content !important;
}

/* because of the above solution to sticky headers, we need to use viewports to guarantee minimum page height */
.wp-site-blocks  {
	min-height: 100vh;
}

@container header scroll-state(stuck: top) {
	background: #000000;
}

/* change this to update only parent links in navbar that have dropdown items but not dropdown items themselves */
.wp-block-navigation-item.has-normal-font-size.has-child:not(.wp-block-navigation__submenu-container li),
.has-normal-font-size.wp-block-navigation-item.wp-block-navigation-link:not(.wp-block-navigation__submenu-container li) {
  color: white;
}

/* methinks wordpress just does not like you using block-level custom css on their menus */
/* change this hex color to update background hover color for a dropdown menu item */
.wp-block-navigation__submenu-container li:hover {
	background-color: #80d779;
}

/* Custom effects for post-rollup otter blocks - BT */


.post-rollup .o-posts-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}

.post-rollup .o-posts-grid-post {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* Make inner content overlay the square */
.post-rollup .o-posts-grid-post > * {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0.75rem;
  color: #fff;
  text-align: center;
  background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 60%);
}

/* Clamp text to avoid overflow */
.post-rollup .o-posts-grid-post .o-posts-grid-post__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* make post rollup titles easier to read */
.post-rollup h5 {
   text-shadow:
       0 2px 4px rgba(0,0,0,0.6),
    /* multi-direction 1px outline */
    1px 0 0 #000,
    -1px 0 0 #000,
    0 1px 0 #000,
    0 -1px 0 #000,
    1px 1px 0 #000,
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000;
}

.wp-block-cover__inner-container h2 {
	text-shadow: 5px 5px 10px #000;
}