/*
Theme Name: ericville25
Author: eric@ericwittke.com
File: subnavigation.css
Description: Styling for secondary headers, breadcrumbs, and hero images.
*/

/* * -------------------------------------------------------------------------
 * Secondary Navigation Bar (Breadcrumbs)
 * -------------------------------------------------------------------------
 */

.secondary-nav {
	width: 100%;
	/* !important used to override global container max-width if set elsewhere */
	max-width: unset !important;
	
	padding: var(--space-m) 0;
	
	/* * FLAG: Negative Margin Hack
	 * This pulls the nav up by --space-xl (50px). 
	 * Likely counteracting the top padding of .main or .content in basetags.css.
	 * This is fragile; if global padding changes, this breaks.
	 */
	margin: calc(-1 * var(--space-xl)) 0 var(--space-m) 0;
	
	background: var(--color-accent-dark);
	border-bottom: 5px solid var(--color-accent);
	
	font-size: var(--font-size-s);
	color: var(--color-bg);
}

/* Inner Container */

.secondary-nav ul {
	display: flex;
	flex-wrap: wrap;
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 0 var(--page-gutter-s);
	list-style: none;
	transition: padding var(--motion-fast) ease;
}

@media (min-width: 700px) {
	.secondary-nav ul {
		padding: 0 var(--page-gutter-l);
	}
}

/* --container-max-with-gutter */
@media (min-width: 940px) {
	.secondary-nav ul {
		padding: 0;
	}
}

/* * -------------------------------------------------------------------------
 * List Items (Breadcrumbs)
 * -------------------------------------------------------------------------
 */

.secondary-nav ul li {
	position: relative;
	margin: 0;
	padding: 0;
}

/* Divider Arrow (➔) */
.secondary-nav ul li:not(:first-child)::before {
	content: "\2794";
	opacity: 0.3;
	padding: 0 var(--space-s); /* Apply spacing to both sides for balance */
	display: inline-block;
}

/* Links */
.secondary-nav ul li a {
	display: inline-block;
	color: var(--color-bg);
	text-decoration: none;
	border: 0;
	opacity: 1;
	transition: opacity var(--motion-fast);
}

.secondary-nav ul li a:hover {
	opacity: 0.7; /* Added visual feedback */
}