/* ==========================================================================
   LOGO: base styling + mobile tweaks
   ========================================================================== */
.navbar-brand.logo {
	display: block;
	width: 188px;
	height: 80px; /* Adjust as needed */
	background-image: url('/images/logo-forest.png');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	margin-top: 5px;
}

@media (max-width: 970px) {
	.navbar-brand.logo {
		margin-top: 20px;
		height: 42px;
		margin-left: -20px;
	}
}

/* Swap logo to lime variant on dark-themed headers */
body.theme-forest .navbar-brand.logo,
body.theme-aqua   .navbar-brand.logo {
	background-image: url('/images/logo-lime.png');
}

/* ==========================================================================
   BASE NAV + TOGGLER
   ========================================================================== */

nav {
	z-index: 10;
}

/* Hamburger (mobile) */
.navbar-toggler {
	border: none;
	font-size: 1.8rem;
	cursor: pointer;
	color: white;
	z-index: 20;
	margin-top: 10px;
	margin-right: 20px;
}

.navbar-toggler-icon {
	background-image: url("data:image/svg+xml;charset=UTF8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%23DAFF75' stroke-width='3' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

.navbar-toggler:hover .navbar-toggler-icon {
	background-image: url("data:image/svg+xml;charset=UTF8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%23B5E843' stroke-width='3' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

/* Primary nav: base typography & spacing */
.navbar-nav .nav-link {
	font-family: 'Stratos Regular', sans-serif;
	font-weight: 700;               /* strong labels on primary nav */
	font-size: 1.2em;
	padding: 15px 18px !important;  /* spacing */
}

/* Hover: use "active" colour from theme */
.navbar-nav .nav-link:hover {
	color: var(--nav-link-color-active) !important;
}

/* Position logo visually */
.navbar-brand {
	margin-left: 75px;
}

/* Underline bar under primary nav (desktop) */
@media (min-width: 970px) {
	.navbar-nav::after {
		content: '';
		position: absolute;
		z-index: 1;               /* above background, below text */
		top: 76px;
		left: 0;
		height: 6px;
		width: calc(100% - 190px); /* adjust for logo space */
		margin-left: 190px;
		background-color: var(--nav-underline-color);
	}
}

/* ==========================================================================
   MOBILE: fix navbar to top on small screens
   ========================================================================== */

@media (max-width: 970px) {
	#hero-container { padding-top: 0px; }
	.navbar-brand { margin-left:0px; }
	.navbar-brand .img-fluid { max-height:60px !important; }
}

@media (max-width: 767.98px) {
	.navbar {
		position: fixed !important;
		background-color: var(--forest);
		top: 0; left: 0; width: 100%;
		z-index: 1030;
		padding-bottom: 30px;
	}
	.navbar-brand.logo {
		background-image: url('/images/logo-lime.png');
	}
	/* prevent home hero from hiding under fixed nav */
	body.page-home {
		padding-top: 103px;
	}
}

/* ==========================================================================
   DESKTOP NAV WRAPPER (legacy helpers)
   ========================================================================== */

#nav-desktop ul {
	display: flex;
	gap: 20px;
	list-style: none;
	padding: 0;
	margin: 0;
}

#nav-desktop .nav-link {
	font-weight: bold;
	font-size: 1.2em;
}

/* Generic hover (kept for any stray .nav-link) */
.nav-link:hover {
	color: var(--nav-link-color-active) !important;
}

/* Reset + font smoothing */
.nav-item a { color: inherit; font-family:"Stratos Medium" !important; }

body,
.navbar-nav .nav-link,
.key-point span,
.footer-links,
.testimonial-author,
h1,h2,h3,h4,h5 {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

.key-point span,
.footer-links a,
.testimonial-author,
h2,h3,h4,h5 {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	font-weight: 400;
	letter-spacing: -0.015em;
}

@supports (-webkit-touch-callout: none) {
	h1 { letter-spacing: -0.065em !important; font-feature-settings: "kern" 1; }
	h2 { letter-spacing: -0.065em !important; font-feature-settings: "kern" 1; }
}

/* ==========================================================================
   THEME VARIABLES
   - Default / no theme        : behaves like "stone"
   - .theme-stone              : light header, dark text, FOREST underline
   - .theme-forest / .theme-aqua: dark header, white text, LIME underline
   - .subnav-black             : force child-nav links to black
   ========================================================================== */

/* Default (no explicit theme-*) – treat as stone/light */
:root {
	--nav-link-color-default: #222;      /* primary nav default */
	--nav-link-color-active:  #7ac721;   /* primary nav active / hover */

	--subnav-link-color-default: #222;   /* child nav default */
	--subnav-link-color-active:  #7ac721;/* child nav active / hover */

	/* underline default = forest (stone pages) */
	--nav-underline-color: var(--forest);
}

/* Stone theme: light header, forest underline */
body.theme-stone {
	--nav-link-color-default: #222;
	--nav-link-color-active:  #7ac721;

	--subnav-link-color-default: #222;
	--subnav-link-color-active:  #7ac721;

	--nav-underline-color: var(--forest);
}

/* Forest theme: dark header, LIME underline */
body.theme-forest {
	--nav-link-color-default: #fff;
	--nav-link-color-active:  #7ac721;

	--subnav-link-color-default: #fff;
	--subnav-link-color-active:  #fff;

	--nav-underline-color: var(--lime);
}

/* Aqua theme: dark/aqua header, LIME underline */
body.theme-aqua {
	--nav-link-color-default: #fff;
	--nav-link-color-active:  #7ac721;

	--subnav-link-color-default: #fff;
	--subnav-link-color-active:  #fff;

	--nav-underline-color: var(--lime);
}

/* Modifier: force only the child nav to black (if needed on a specific page) */
body.subnav-black {
	--subnav-link-color-default: #111;
	--subnav-link-color-active:  #111;
}

/* ==========================================================================
   APPLY VARIABLES: default & active states
   ========================================================================== */

/* Primary nav: default colour from variables */
.navbar-nav .nav-link {
	color: var(--nav-link-color-default) !important;
}

/* Primary nav: ACTIVE item by page slug
   (page slug chooses WHICH item; theme chooses WHAT colour) */
body.page-home       .nav-item-home      > .nav-link,
body.page-broadband  .nav-item-broadband > .nav-link,
body.page-purpose    .nav-item-purpose   > .nav-link,
body.page-people     .nav-item-people    > .nav-link,
body.page-contact    .nav-item-contact   > .nav-link {
	color: var(--nav-link-color-active) !important;
}

/* Child nav: default + hover/active colours (desktop only) */
@media (min-width: 970px) {
	.has-subnav { position: relative; }

	.has-subnav > .child-nav a {
		color: var(--subnav-link-color-default) !important;
		font-family: 'Stratos Light', sans-serif !important;
		font-weight: 100;
		font-size: 1.2em;
		text-decoration: none;
	}

	.has-subnav > .child-nav a:hover,
	.has-subnav > .child-nav a:focus {
		color: var(--subnav-link-color-active) !important;
		text-decoration: underline;
	}
}

/* Child nav: ACTIVE item examples for real child pages
   (add more for other routes as needed) */
body.page-collective .nav-item-people > .child-nav a[href="/collective"] {
	color: var(--subnav-link-color-active) !important;
	font-weight: 500;
	text-decoration: none;
}

body.page-status .nav-item-contact > .child-nav a[href^="https://status.brightonfibre.com"] {
	color: var(--subnav-link-color-active) !important;
	font-weight: 500;
	text-decoration: none;
}

/* Mobile: force primary nav links to white on the fixed dark bar */
@media (max-width: 970px) {
	.navbar-nav .nav-link {
		color: white !important;
	        margin-left: 9px;
	}
}

/* ==========================================================================
   CHILD SUBNAV LAYOUT & BEHAVIOUR (CSS-only dropdown)
   ========================================================================== */
@media (min-width: 970px) {
	.has-subnav { position: relative; }

	/* Hover bridge: prevents flicker when moving towards the submenu */
	.has-subnav::after {
		content: "";
		position: absolute;
		left: 0; right: 0;
		top: 100%;
		height: 80px;                  /* covers the gap down to the submenu */
	}

	.has-subnav > .child-nav {
		position: absolute;
		list-style: none;
		margin: 0;
		padding: 0;

		/* Align left edge to the parent link’s left padding (default 18px).
		   Override per-item with: .has-subnav{ --subnav-left: 20px; } if needed. */
		left: var(--subnav-left, 18px);
		top: 73px;                     /* requested drop distance */

		display: flex;
		gap: 24px;
		z-index: 2;

		/* Show/Hide with fade and delayed vanish on mouse out */
		opacity: 0;
		visibility: hidden;
		transition: opacity 1s ease, visibility 0s linear 1s;
	}

	/* Visible while parent OR submenu is hovered/focused */
	.has-subnav:hover > .child-nav,
	.has-subnav:focus-within > .child-nav,
	.has-subnav > .child-nav:hover {
		opacity: 1;
		visibility: visible;
		transition: opacity 150ms ease, visibility 0s;
	}
}

/* Hide subnavs on mobile/tablet entirely */
@media (max-width: 969.98px) {
	.has-subnav > .child-nav {
		display: none !important;
	}
}