/* ==========================================================================
   WyoHS Mega Navigation  (rendered by [wyohs_mega_nav])
   Bare-bones framework: structure + hover behaviour only. Restyle freely.
   Sizes use em (relative to the nav font-size) because the BB theme sets
   html font-size to 62.5%, which makes rem values unpredictable.
   All colours / spacing are custom properties: override on .wyohs-mega or
   on a per-item modifier (.wyohs-mega__item--about-us etc.).
   ========================================================================== */

.wyohs-mega {
	--mega-text:        #1a1a1a;
	--mega-font:        'Special Gothic Condensed One', 'Arial Narrow', sans-serif;  /* level 1 + level 2 */
	--mega-tracking:    2px;                 /* letter-spacing for level 1 + level 2 */
	--mega-top-size:    1.35em;              /* condensed faces read small: bump top links */
	--mega-heading-size: 1.2em;
	--mega-link-pad:    1.25em 1.25em;     /* top-bar link padding */
	--mega-gap:         1em;                /* space between top-bar items */
	--mega-min-width:   48em;               /* panels are at least this wide (nav grows to match) */
	--mega-panel-bg:    #f3f3f3;             /* fallback panel tint */
	--mega-panel-pad:   1.75em 2em 2em;
	--mega-col-gap:     2.5em;
	--mega-z:           1000;
	--mega-transition:  .15s ease;

	position: relative;                       /* panels anchor to the nav box */
	width: max-content;                       /* nav box hugs its items... */
	min-width: min(100%, var(--mega-min-width)); /* ...but stays wide enough for multi-column panels */
	max-width: 100%;
	margin-left: auto;                        /* sits at the right edge of its column */
	font-family: inherit;
	color: var(--mega-text);
}

.wyohs-mega ul { list-style: none; margin: 0; padding: 0; }
.wyohs-mega a  { color: inherit; text-decoration: none; }
.wyohs-mega__links a:hover,
.wyohs-mega__links a:focus-visible,
.wyohs-mega__heading:hover,
.wyohs-mega__heading:focus-visible { text-decoration: underline; }

/* Per-item panel tints (from the nav mockup). Change or delete at will. */
.wyohs-mega__item--about-us { --mega-panel-bg: #f2d9b8; }
.wyohs-mega__item--learn    { --mega-panel-bg: #fbedc4; }
.wyohs-mega__item--explore  { --mega-panel-bg: #c7d9f7; }
.wyohs-mega__item--support  { --mega-panel-bg: #e2ecb2; }

/* ---------- top bar ---------------------------------------------------- */
.wyohs-mega__top {
	display: flex;
	align-items: stretch;
	justify-content: flex-end;
	gap: var(--mega-gap);
}
.wyohs-mega__item { position: static; }           /* so panels span the nav */
.wyohs-mega__item--simple { position: relative; }  /* single-column panels hug their item */

.wyohs-mega__toplink {
	display: block;
	padding: var(--mega-link-pad);
	font-family: var(--mega-font);
	font-size: var(--mega-top-size);
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: var(--mega-tracking);
	line-height: 1;
	white-space: nowrap;
	transition: background-color var(--mega-transition);
}

/* ---------- panel ------------------------------------------------------ */
.wyohs-mega__panel {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: var(--mega-z);
	background: var(--mega-panel-bg);
	padding: var(--mega-panel-pad);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: opacity var(--mega-transition), transform var(--mega-transition), visibility 0s linear .15s;
}
.wyohs-mega__panel--simple {
	left: auto;
	right: 0;
	min-width: 16em;
}

.wyohs-mega__cols {
	display: grid;
	grid-template-columns: repeat(var(--mega-cols, 3), minmax(0, 1fr));
	gap: var(--mega-col-gap);
}
.wyohs-mega__panel--simple .wyohs-mega__cols { grid-template-columns: 1fr; }

.wyohs-mega__heading {
	display: block;
	margin: 0 0 .6em;
	font-family: var(--mega-font);
	font-size: var(--mega-heading-size);
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: var(--mega-tracking);
}
.wyohs-mega__links li a {
	display: block;
	padding: .3em 0;
}

/* ---------- open states ------------------------------------------------ */
/* JS toggles .is-open (click / touch / keyboard). Hover only on devices that hover. */
.wyohs-mega__item.is-open > .wyohs-mega__panel,
.wyohs-mega__item:focus-within > .wyohs-mega__panel {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition-delay: 0s;
}
.wyohs-mega__item.is-open > .wyohs-mega__toplink,
.wyohs-mega__item:focus-within > .wyohs-mega__toplink {
	background: var(--mega-panel-bg);
}
@media (hover: hover) {
	.wyohs-mega__item:hover > .wyohs-mega__panel {
		opacity: 1;
		visibility: visible;
		transform: none;
		transition-delay: 0s;
	}
	.wyohs-mega__item:hover > .wyohs-mega__toplink {
		background: var(--mega-panel-bg);
	}
}

/* ---------- the bar the panel drops from -------------------------------
   The nav is one HTML module inside a Beaver Builder column, and it wore the
   builder's module margins: 20px above, and below it whatever slack the
   taller logo column left over. So the nav box was shorter than the bar it
   sits in, and both symptoms followed from that one fact -- the lit item
   stopped short of the bar's top and bottom edges, and the panel, which is
   positioned top:100% against .wyohs-mega, opened part-way up the bar with a
   band of page colour showing between the two.

   One fix for both: make the nav exactly as tall as the header row. The
   column becomes a flex column, the module drops its margins and grows to
   fill it, and each top link becomes a full-height flex box centring its own
   text. The lit item now runs the full depth of the bar and the panel opens
   flush with its lower edge, with nothing between them.

   Height only. width:max-content, min-width and margin-left:auto on
   .wyohs-mega are untouched, so the panel keeps the measure it had.

   Desktop only: below 960px the nav is a drawer and none of this applies.

   Written with :has() against .wyohs-mega rather than the module's
   fl-node-* id, so rebuilding the header row in the builder cannot silently
   undo it. */
@media (min-width: 960px) {

	.fl-col-content:has(> .fl-module > .wyohs-mega) {
		display: flex;
		flex-direction: column;
	}

	.fl-module:has(> .wyohs-mega) {
		flex: 1 1 auto;
		min-height: 0;
		margin: 0;
	}

	/* Two jobs. height fills the bar; min-height keeps the bar from
	   collapsing onto the type now that the link's own box no longer sets it.
	   116px is not a taste number: it is the height the nav module used to
	   produce on its own -- 21.6px of line, 27px of link padding above and
	   below, and the builder's 20px module margins on top of that. At the top
	   of the page the logo is 104px and the bar is 144px, so this does
	   nothing. Once the header shrinks on scroll the logo drops to 50px, and
	   without a floor here the bar would follow it down to 60px and the logo
	   would sit with five pixels of air. */
	.wyohs-mega {
		height: 100%;
		min-height: 116px;
	}

	.wyohs-mega__top { height: 100%; }

	.wyohs-mega__item {
		display: flex;
		align-items: stretch;
	}

	/* The padding stays exactly as it was: it is what the bar's floor above
	   is measured from, and it is still the height of a link on a bar that
	   has nothing taller in it. All this adds is the stretch, so the link
	   grows past its padding to whatever the bar is and centres its own
	   text inside. */
	.wyohs-mega__toplink {
		display: flex;
		align-items: center;
	}
}

/* ---------- mobile toggle ---------------------------------------------- */
.wyohs-mega__toggle {
	display: none;
	align-items: center;
	gap: .5em;
	background: none;
	border: 1px solid currentColor;
	border-radius: 4px;
	padding: .5em .75em;
	font: inherit;
	font-weight: 700;
	text-transform: uppercase;
	color: inherit;
	cursor: pointer;
}
.wyohs-mega__toggle-bars { display: inline-flex; flex-direction: column; gap: 3px; }
.wyohs-mega__toggle-bars span { display: block; width: 18px; height: 2px; background: currentColor; }

@media (max-width: 959px) {
	/* ----- mobile: hamburger + full-screen takeover ----- */
	.wyohs-mega { width: auto; min-width: 0; margin-left: auto; position: static; display: flex; justify-content: flex-end; }
	.wyohs-mega__toggle {
		display: inline-flex;
		position: relative;
		z-index: 10001;                    /* stays above the takeover panel so it can close it */
		border: 0;                         /* no box around the button */
		padding: .6em .4em;
		background: none;
		margin-left: auto;
		margin-right: -.4em;  /* cancels the tap padding so the icon edge sits on the gutter */
	}
	.wyohs-mega__toggle-label { display: none; }   /* icon only */
	.wyohs-mega__toggle-bars { gap: 5px; }
	.wyohs-mega__toggle-bars span { width: 26px; height: 2px; transition: transform .25s ease, opacity .2s ease; transform-origin: center; }
	/* hamburger -> X when open */
	.wyohs-mega.is-open .wyohs-mega__toggle { color: #fff; text-shadow: none; }
	.wyohs-mega.is-open .wyohs-mega__toggle-bars span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
	.wyohs-mega.is-open .wyohs-mega__toggle-bars span:nth-child(2) { opacity: 0; }
	.wyohs-mega.is-open .wyohs-mega__toggle-bars span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

	/* the menu itself: fixed, full viewport, dark brand blue */
	.wyohs-mega .wyohs-mega__top {
		display: none;
		position: fixed;
		inset: 0;
		z-index: 10000;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		margin: 0;
		padding: var(--mega-mobile-top, 84px) var(--mega-mobile-gutter, 6vw) 6vh;
		justify-content: flex-start;   /* clears the header row */
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		background: var(--mega-mobile-bg, #1b3a5c);
		color: var(--mega-mobile-text, #fff);
	}
	.wyohs-mega.is-open .wyohs-mega__top { display: flex; }
	/* The desktop rule right-aligns the row. Once the axis turns vertical that
	   same flex-end pins the stack to the bottom, so an opening panel grows
	   upward and pushes the earlier items off screen. Start at the top and let
	   the items keep their natural height; the panel then opens downward from
	   the item that was tapped and the overlay scrolls. */
	.wyohs-mega .wyohs-mega__top > li { flex: 0 0 auto; }
	.wyohs-mega__item,
	.wyohs-mega__item--simple { position: static; border-bottom: 1px solid rgba(255,255,255,.12); }
	.wyohs-mega .wyohs-mega__top a.wyohs-mega__toplink,
	.wyohs-mega__toplink {
		padding: .7em 0;
		font-size: 2.2em;
		color: var(--mega-mobile-text, #fff) !important;
		text-shadow: none !important;
		white-space: normal;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	/* chevron hint on items that open a panel */
	.wyohs-mega__item.has-panel > .wyohs-mega__toplink::after {
		content: '';
		width: .5em; height: .5em;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: rotate(45deg);
		transition: transform .2s ease;
		flex: none;
		margin-left: 1em;
	}
	.wyohs-mega__item.is-open > .wyohs-mega__toplink::after { transform: rotate(-135deg); }
	.wyohs-mega__item.is-open > .wyohs-mega__toplink,
	.wyohs-mega__item:hover > .wyohs-mega__toplink,
	.wyohs-mega__item:focus-within > .wyohs-mega__toplink { background: transparent; }

	.wyohs-mega__panel,
	.wyohs-mega__panel--simple {
		position: static;
		display: none;
		min-width: 0;
		opacity: 1;
		visibility: visible;
		transform: none;
		transition: none;
		padding: 0 0 1.2em;
		background: transparent;              /* per-item tints are a desktop thing */
		color: var(--mega-mobile-text, #fff);
	}
	.wyohs-mega__item.is-open > .wyohs-mega__panel { display: block; }
	.wyohs-mega__cols,
	.wyohs-mega__panel--simple .wyohs-mega__cols { grid-template-columns: 1fr; gap: 1em; }
	.wyohs-mega .wyohs-mega__col a.wyohs-mega__heading,
	.wyohs-mega__heading { margin: .6em 0 .3em; font-size: 1.3em; color: var(--mega-mobile-accent, #f6d7b3); }
	.wyohs-mega__links li a { padding: .35em 0; font-size: 1.15em; }
}
/* body scroll lock while the mobile menu is open (class set by mega-nav.js) */
html.wyohs-mega-open, html.wyohs-mega-open body { overflow: hidden; }

.wyohs-mega__error { color: #b00; font-size: .875em; }

/* ==========================================================================
   Utility bar nav  (rendered by [wyohs_utility_nav])  Store / Donate / Contact / Search
   Lives in the slim top row of the Themer header, beside the social icons.
   ========================================================================== */
.wyohs-utility {
	--utility-color:    #F6D7B3;
	--utility-hover:    #ffffff;
	--utility-gap:      1.75em;
	--utility-font:     'Special Gothic Condensed One', 'Arial Narrow', sans-serif;
	--utility-size:     1.1em;
	--utility-tracking: 1.5px;
	font-family: var(--utility-font);
	font-size: var(--utility-size);
	letter-spacing: var(--utility-tracking);
	text-transform: uppercase;
	line-height: 1;
}
.wyohs-utility__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: var(--utility-gap);
}
.wyohs-utility__list a {
	color: var(--utility-color);
	text-decoration: none;
	transition: color .15s ease;
}
.wyohs-utility__list a:hover,
.wyohs-utility__list a:focus-visible { color: var(--utility-hover); text-decoration: underline; }
@media (max-width: 767px) {
	.wyohs-utility__list { justify-content: center; flex-wrap: wrap; gap: 1em 1.25em; }
}


/* Pin the nav em scale to 16px so changes to Beaver Builder's global body text size
   (Global Styles > Text) do not resize the header navigation. */
.wyohs-mega, .wyohs-utility { font-size: 16px; }