/* ============================================================
   NAVBAR.CSS
   Navigation bar social icons and icon sizing.
   Depends on: core.css (colour variables)
   Breakpoint rules for .site-nav live in responsive.css, not here.
   ============================================================ */

/* NAV SOCIAL ICONS */
ul.nav-social
{
	list-style: none;
	display: flex;
	margin: auto;
}

.site-nav .nav-social
{
	margin: 0;
}

ul.nav-social a
{
	text-decoration: none !important;
}

.social-icon
{
	height: 30px;
	width: 30px;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #fff;
	font-size: 14px;
	border-radius: 7px;
	margin-right: 11px;
	cursor: pointer;
}

	.social-icon:hover .icon-svg
	{
		color: #000000 !important;
	}

.social-email
{
	background-color: var(--color-social-email);
}

.social-facebook
{
	background-color: var(--color-social-facebook);
}

.social-phone
{
	background-color: var(--color-social-phone);
}
/* END NAV SOCIAL ICONS */


/* INLINE SVG ICON SIZING
   Shared by navbar social icons, footer back-to-top, and Contacts page icons. */
.icon-svg
{
	width: 1em;
	height: 1em;
	font-size: 16px;
	vertical-align: -0.125em;
	flex-shrink: 0;
}

.icon-svg-2x
{
	font-size: 2em;
}

.icon-svg-required
{
	font-size: 10px;
	color: var(--color-required);
}
/* END INLINE SVG ICON SIZING */


/* SITE NAV (full rebuild — see Responsive.css for breakpoint rules)
   Structural principle: .nav-bar is ALWAYS a normal-flow, single-row
   element (brand + links-wrap + controls) using ordinary flexbox.
   Its height/layout can never be affected by anything else, because
   .nav-links-wrap becomes position:absolute on mobile (see
   Responsive.css) — completely removed from .nav-bar's flow. Opening
   the mobile dropdown is therefore structurally incapable of moving
   the logo or icons, regardless of how tall the link list is.
   Toggle behaviour uses Bootstrap's native collapse component
   (already loaded, CSP-compliant) rather than custom JS. */
.site-nav
{
	position: relative;
	background: var(--driftwood);
	border-bottom: 1px solid rgba(184,147,90,0.25);
	font-family: 'KarlaUI', sans-serif;
}

	.site-nav .nav-bar
	{
		max-width: 1560px;
		margin: 0 auto;
		padding: 1.25rem 1.5rem;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1.5rem;
	}

	.site-nav .nav-links-wrap
	{
		flex: 1;
	}

	.site-nav .nav-controls
	{
		display: flex;
		align-items: center;
		gap: 1.5rem;
		flex-shrink: 0;
	}

	.site-nav .brand
	{
		display: inline-flex;
		align-items: center;
		background: var(--pebble);
		padding: 0.75rem 1.4rem;
		border-radius: var(--radius-pebble-sm);
		box-shadow: 0 8px 18px rgba(0,0,0,0.25);
		flex-shrink: 0;
	}

		.site-nav .brand img
		{
			height: 46px;
			display: block;
		}

	.site-nav .nav-links
	{
		gap: 1.4rem;
		list-style: none;
		margin: 0;
		padding: 0;
		flex-wrap: wrap;
	}

		.site-nav .nav-links a
		{
			text-decoration: none;
			font-size: 0.95rem;
			font-weight: 700;
			letter-spacing: 0.02em;
			color: var(--pebble);
			padding-bottom: 4px;
			border-bottom: 1px solid transparent;
			transition: border-color 0.2s ease;
		}

			.site-nav .nav-links a:hover,
			.site-nav .nav-links a:focus-visible,
			.site-nav .nav-links a.active
			{
				border-bottom-color: var(--gold-light);
			}

			.site-nav .nav-links a:focus-visible
			{
				outline: 2px solid var(--gold-light);
				outline-offset: 3px;
			}

	.site-nav .nav-toggle
	{
		display: none;
		background: none;
		border: 1px solid var(--pebble);
		color: var(--pebble);
		border-radius: 6px;
		padding: 0.4rem 0.7rem;
		font-size: 0.9rem;
		cursor: pointer;
		font-family: inherit;
	}
/* END SITE NAV */