/*
 * BubblePug site styles.
 *
 * Layout rules that WordPress generated inline for each page, plus the small
 * amount of CSS needed to replace the original jQuery behaviour (Nivo slider
 * fade, sticky menu, FitVids) with plain CSS and assets/js/site.js.
 */

/* ---------------------------------------------------------------------------
 * Footer widget area (originally inline in <head>)
 * ------------------------------------------------------------------------- */
#footer-widgets .widget { width: 100%; }
@media screen and (max-width: 640px) {
	#footer-widgets .widget { width: auto; float: none; }
}

/* ---------------------------------------------------------------------------
 * Page Builder layouts (originally inline per page)
 * ------------------------------------------------------------------------- */

/* Home (layout 18) */
#pgc-18-0-0 { width: 100%; }
#pl-18 .so-panel { margin-bottom: 35px; }
#pl-18 .so-panel:last-child { margin-bottom: 0; }

/* Contact Us (layout 136) */
#pgc-136-0-0 { width: 100%; }
#pl-136 .so-panel { margin-bottom: 35px; }
#pl-136 .so-panel:last-child { margin-bottom: 0; }
/* The original page used a run of empty paragraphs to push the footer down */
#pl-136 { min-height: 300px; }

/* Penguin Splat (layout 32) */
#pgc-32-0-0 { width: calc(12.857% - (0.871430397043 * 30px)); }
#pgc-32-0-1 { width: calc(87.143% - (0.128569602957 * 30px)); }
#pgc-32-1-0,
#pgc-32-3-0 { width: 100%; }
#pgc-32-2-0,
#pgc-32-2-1 { width: calc(50% - (0.5 * 30px)); }
#pgc-32-4-0 { width: calc(38.5683% - (0.614317425083 * 30px)); }
#pgc-32-4-1 { width: calc(61.4317% - (0.385682574917 * 30px)); }
#pg-32-0,
#pg-32-1,
#pg-32-2,
#pg-32-3,
#pl-32 .so-panel { margin-bottom: 35px; }
#pl-32 .so-panel:last-child { margin-bottom: 0; }

@media (max-width: 780px) {
	.panel-grid.panel-no-style { flex-direction: column; }
	#pl-18 .panel-grid-cell,
	#pl-32 .panel-grid-cell,
	#pl-136 .panel-grid-cell { width: 100%; margin-right: 0; padding: 0; }
	#pgc-32-0-0,
	#pgc-32-2-0,
	#pgc-32-4-0 { margin-bottom: 35px; }
}

/* ---------------------------------------------------------------------------
 * Sticky menu (replaces the theme's jQuery clone-and-fix approach)
 * ------------------------------------------------------------------------- */

/* "clip" rather than "hidden" so the wrapper doesn't stop sticky positioning */
.layout-full #page-wrapper { overflow: clip; }

@media (min-width: 681px) {
	header#masthead {
		position: sticky;
		top: 0;
		z-index: 998;
	}
	header#masthead.is-stuck .main-navigation {
		box-shadow: 0 2px 1px rgba(0, 0, 0, 0.15);
	}
}

/* ---------------------------------------------------------------------------
 * Slider (replaces jQuery Nivo Slider; keeps the MetaSlider default skin)
 * ------------------------------------------------------------------------- */
.metaslider .theme-default .nivoSlider .slide {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--fade, 600ms) ease, visibility 0s linear var(--fade, 600ms);
	z-index: 1;
}
/* The first slide stays in normal flow so it sets the slider's height */
.metaslider .theme-default .nivoSlider .slide:first-child { position: relative; }
.metaslider .theme-default .nivoSlider .slide.is-active {
	opacity: 1;
	visibility: visible;
	transition: opacity var(--fade, 600ms) ease, visibility 0s;
	z-index: 2;
}
.metaslider .theme-default .nivoSlider .slide img {
	position: static;
	display: block;
	width: 100%;
	height: auto;
}
.metaslider .theme-default .nivo-directionNav a:focus-visible { opacity: 1; }

/* ---------------------------------------------------------------------------
 * Responsive YouTube embed (replaces FitVids / YouTube Responsive plugin)
 * ------------------------------------------------------------------------- */
.video-embed iframe {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	border: 0;
}