/* -----------------------------------------------------------------------
   Breadcrumb eyebrow
   Sits above the H1 in every interior page hero. Markup comes from
   /inc/breadcrumb.php, which prepends it to any heading module carrying
   the class wyohs-hero__title--page.

   Deliberately inline rather than flex, so the trail follows whatever
   text-align the hero module already has instead of overriding it.
   ----------------------------------------------------------------------- */

.wyohs-crumbs {
	font-family: var(--wyohs-display, 'Special Gothic Condensed One', 'Arial Narrow', sans-serif);
	font-size: 18px;
	line-height: 1.35;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--wyohs-sand, #d2a56c);
	margin: 0 0 20px;
}

.wyohs-crumbs__link,
.wyohs-crumbs__link:visited {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color .15s ease;
}

.wyohs-crumbs__link:hover,
.wyohs-crumbs__link:focus-visible {
	color: inherit;
	border-bottom-color: currentColor;
}

.wyohs-crumbs__sep {
	margin: 0 9px;
	opacity: .55;
}

/* The trail renders as a sibling of the hero heading rather than inside it,
   so it inherits the column's alignment, not the heading's. The modifier is
   written by /inc/breadcrumb.php from the heading module's own align setting;
   the .wyohs-hero rule below is the backstop for a hero that has none. Both
   carry two classes, so the modifier wins on source order. */

.wyohs-hero .wyohs-crumbs {
	text-align: center;
}

.wyohs-crumbs.wyohs-crumbs--left   { text-align: left; }
.wyohs-crumbs.wyohs-crumbs--center { text-align: center; }
.wyohs-crumbs.wyohs-crumbs--right  { text-align: right; }

/* Opt-in modifier for the day one of these lands on a cream row, where sand
   goes thin. Add wyohs-crumbs--light in Advanced > Class on that module. */
.wyohs-crumbs--light {
	color: var(--wyohs-navy, #1b3a5c);
}

@media (max-width: 640px) {

	.wyohs-crumbs {
		font-size: 15px;
		letter-spacing: 1.6px;
		margin-bottom: 14px;
	}

	.wyohs-crumbs__sep {
		margin: 0 6px;
	}
}

/* -----------------------------------------------------------------------
   One line on hover, not two

   The border-bottom above is the hover mark. The Beaver Builder theme skin
   also carries a bare `a:hover { text-decoration: underline }`, and at
   (0,1,1) that beats the (0,1,0) rule for .wyohs-crumbs__link, so every
   crumb drew the theme's underline hard against the baseline as well as
   the border a few pixels below it. Stating text-decoration on the hover
   and focus states is what settles it.

   Site-wide, not scoped to any one hero: the same collision was on every
   interior page's breadcrumb, it was simply easier to see on the events
   hero where the sand sits on navy.
   ----------------------------------------------------------------------- */
.wyohs-crumbs__link:hover,
.wyohs-crumbs__link:focus,
.wyohs-crumbs__link:focus-visible {
	text-decoration: none;
}