/* =========================================================
   G Golf Ireland — Header
   - Fixed to viewport on every page.
   - On the homepage: transparent over the hero, light text/logo.
   - On scroll OR on every other page: solid cream/white, dark text.
   - The .gg-header--scrolled class is toggled by gg-interactions.js.
   ========================================================= */

.gg-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	padding: 18px 0;
	background: transparent;
	transition: background-color 0.35s ease,
	            box-shadow 0.35s ease,
	            padding 0.3s ease;
}

.gg-header__inner {
	align-items: center;
	padding-left: 32px;
	padding-right: 32px;
}

.gg-header__logo img {
	max-height: 52px;
	width: auto;
	transition: filter 0.3s ease, max-height 0.3s ease;
}

/* HOMEPAGE (transparent state) — swap to the white-on-transparent logo asset.
   Using `content:` on the img replaces the rendered pixels while preserving
   the WP site-logo block, the link wrapper, alt text, and sizing. */
body.home .gg-header:not(.gg-header--scrolled) .gg-header__logo img {
	content: url('/wp-content/uploads/2026/05/G-Golf-Ireland-2024-WHITE.webp');
}

.gg-header__nav {
	gap: 32px;
}

.gg-header__nav .wp-block-navigation-item__content {
	color: var(--gg-ink);
	font-family: var(--gg-font-sans);
	font-size: 0.78rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	transition: color 0.25s ease;
}

/* On homepage transparent state: light text */
body.home .gg-header:not(.gg-header--scrolled) .gg-header__nav .wp-block-navigation-item__content {
	color: var(--gg-cream);
}

.gg-header__nav .wp-block-navigation-item__content:hover,
.gg-header__nav .current-menu-item .wp-block-navigation-item__content {
	color: var(--gg-gold);
}

/* =========================================================
   Submenus (dropdowns)
   - WP block navigation outputs:
       .wp-block-navigation-item.has-child         (the parent li)
       .wp-block-navigation__submenu-icon          (chevron)
       .wp-block-navigation__submenu-container     (the dropdown ul)
   - We style the panel + force hover-open on desktop.
   ========================================================= */
.gg-header__nav .wp-block-navigation-item.has-child {
	position: relative;
}
.gg-header__nav .wp-block-navigation__submenu-icon {
	color: currentColor;
	margin-left: 4px;
	transition: transform 0.25s ease;
}
.gg-header__nav .wp-block-navigation-item.has-child:hover > .wp-block-navigation__submenu-icon,
.gg-header__nav .wp-block-navigation-item.has-child:focus-within > .wp-block-navigation__submenu-icon {
	transform: rotate(180deg);
	color: var(--gg-gold);
}
.gg-header__nav .wp-block-navigation__submenu-container {
	min-width: 240px;
	padding: 12px 0 !important;
	margin-top: 14px !important;
	background: var(--gg-cream) !important;
	border: 0 !important;
	border-top: 2px solid var(--gg-gold) !important;
	border-radius: 0 !important;
	box-shadow: 0 18px 40px rgba(10, 35, 28, 0.14),
	            0 1px 0 rgba(61, 61, 53, 0.06);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s ease;
	pointer-events: none;
	display: flex !important;
	flex-direction: column !important;
}
/* Hover-open + keyboard focus-open on desktop */
@media (min-width: 782px) {
	.gg-header__nav .wp-block-navigation-item.has-child:hover > .wp-block-navigation__submenu-container,
	.gg-header__nav .wp-block-navigation-item.has-child:focus-within > .wp-block-navigation__submenu-container,
	.gg-header__nav .wp-block-navigation__submenu-container.is-open,
	/* WP "Open on click" mode — also show on hover/focus of the parent button */
	.gg-header__nav .wp-block-navigation-item.open-on-click:hover > .wp-block-navigation__submenu-container,
	.gg-header__nav .wp-block-navigation-item.open-on-click:focus-within > .wp-block-navigation__submenu-container,
	/* WP also exposes aria-expanded on the button when clicked */
	.gg-header__nav .wp-block-navigation-item button[aria-expanded="true"] ~ .wp-block-navigation__submenu-container,
	.gg-header__nav .wp-block-navigation-item button[aria-expanded="true"] + .wp-block-navigation__submenu-container {
		opacity: 1 !important;
		visibility: visible !important;
		transform: translateY(0) !important;
		pointer-events: auto !important;
	}
	/* Invisible bridge so the cursor can move from the parent link onto the
	   dropdown panel without crossing dead space (which would close it). */
	.gg-header__nav .wp-block-navigation-item.has-child::after {
		content: "";
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		height: 14px;
	}
}
/* Submenu link styling */
.gg-header__nav .wp-block-navigation__submenu-container .wp-block-navigation-item {
	display: block;
	width: 100%;
}
.gg-header__nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	display: block !important;
	color: var(--gg-ink) !important;
	font-size: 0.72rem !important;
	letter-spacing: 0.14em !important;
	padding: 10px 22px !important;
	border-left: 2px solid transparent;
	transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.gg-header__nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.gg-header__nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus {
	color: var(--gg-gold) !important;
	background: rgba(184, 154, 92, 0.06);
	border-left-color: var(--gg-gold);
}
/* Nested (3rd-level) submenu — flyout to the side */
@media (min-width: 782px) {
	.gg-header__nav .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
		top: -12px !important;
		left: 100% !important;
		margin-top: 0 !important;
		border-top: 0 !important;
		border-left: 2px solid var(--gg-gold) !important;
	}
}

/* CTA-styled nav link */
.gg-nav__cta .wp-block-navigation-item__content {
	border: 1px solid var(--gg-gold);
	padding: 10px 22px;
	transition: all 0.25s ease;
}
body.home .gg-header:not(.gg-header--scrolled) .gg-nav__cta .wp-block-navigation-item__content {
	border-color: rgba(250, 250, 246, 0.55);
}
.gg-nav__cta .wp-block-navigation-item__content:hover {
	background: var(--gg-gold);
	border-color: var(--gg-gold);
	color: var(--gg-cream) !important;
}

/* Brochure link — small download icon prefix */
.gg-nav__brochure .wp-block-navigation-item__content {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.gg-nav__brochure .wp-block-navigation-item__content::before {
	content: "";
	display: inline-block;
	width: 12px;
	height: 14px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/><polyline points='7 10 12 15 17 10'/><line x1='12' y1='15' x2='12' y2='3'/></svg>") center / contain no-repeat;
	        mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/><polyline points='7 10 12 15 17 10'/><line x1='12' y1='15' x2='12' y2='3'/></svg>") center / contain no-repeat;
	transform: translateY(1px);
}

/* SOLID STATE (scrolled OR non-home page) */
.gg-header--scrolled,
body:not(.home) .gg-header {
	background: var(--gg-cream);
	box-shadow: 0 1px 0 rgba(61, 61, 53, 0.08),
	            0 8px 30px rgba(10, 35, 28, 0.06);
	padding: 12px 0;
}
.gg-header--scrolled .gg-header__logo img,
body:not(.home) .gg-header__logo img {
	filter: none;
	max-height: 44px;
}

/* Push non-home page content below fixed header so it isn't covered.
   Hero covers (full-bleed image heroes) sit BEHIND on home, so no padding.
   For other pages we add a top spacer matching header height. */
body:not(.home) .wp-site-blocks > main,
body:not(.home) main.wp-block-group {
	padding-top: 78px;
}

@media (max-width: 781px) {
	.gg-header__inner { padding-left: 20px; padding-right: 20px; }
	.gg-header__nav { gap: 16px; }
	.gg-header__nav .wp-block-navigation-item__content { font-size: 0.72rem; }
	body:not(.home) .wp-site-blocks > main,
	body:not(.home) main.wp-block-group { padding-top: 64px; }

	/* ---------------------------------------------------------------
	   Mobile menu (overlay/popover opened by the hamburger button)
	   - Force a solid cream background regardless of homepage state
	     so the menu is always legible (cream-on-cream bug fix).
	   - Add real padding inside the panel.
	   - Left-align and stack items full-width.
	   --------------------------------------------------------------- */
	.gg-header__nav .wp-block-navigation__responsive-container.is-menu-open {
		background: var(--gg-cream) !important;
		color: var(--gg-ink) !important;
		padding: 80px 28px 40px !important;
		box-sizing: border-box;
		overflow-x: hidden;
		max-width: 100vw;
	}
	.gg-header__nav .wp-block-navigation__responsive-container.is-menu-open *,
	.gg-header__nav .wp-block-navigation__responsive-container.is-menu-open *::before,
	.gg-header__nav .wp-block-navigation__responsive-container.is-menu-open *::after {
		box-sizing: border-box;
	}
	.gg-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
		width: 100%;
		justify-content: flex-start !important;
		align-items: stretch !important;
	}
	.gg-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
	.gg-header__nav .wp-block-navigation__responsive-container.is-menu-open ul.wp-block-navigation__container {
		display: flex !important;
		flex-direction: column !important;
		align-items: stretch !important;
		justify-content: flex-start !important;
		gap: 4px !important;
		width: 100%;
	}
	.gg-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
		display: block !important;
		width: 100%;
		text-align: left !important;
		border-bottom: 1px solid rgba(61, 61, 53, 0.08);
	}
	.gg-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
		display: block !important;
		color: var(--gg-ink) !important;
		font-size: 1rem !important;
		letter-spacing: 0.16em !important;
		padding: 18px 4px !important;
		width: 100%;
	}
	.gg-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover {
		color: var(--gg-gold) !important;
	}
	/* Contact CTA inside open mobile menu — keep its bordered look but full-width.
	   box-sizing prevents border + padding from pushing the button past the
	   panel's inner width (which would cause a horizontal scroll). */
	.gg-header__nav .wp-block-navigation__responsive-container.is-menu-open .gg-nav__cta {
		box-sizing: border-box;
		max-width: 100%;
	}
	.gg-header__nav .wp-block-navigation__responsive-container.is-menu-open .gg-nav__cta .wp-block-navigation-item__content {
		box-sizing: border-box;
		border: 1px solid var(--gg-gold) !important;
		text-align: center !important;
		margin-top: 16px;
		padding: 16px 22px !important;
		max-width: 100%;
	}
	/* Close (X) button — make it visible against cream */
	.gg-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close,
	.gg-header__nav .wp-block-navigation__responsive-container-close {
		color: var(--gg-ink) !important;
		top: 20px !important;
		right: 20px !important;
	}
	/* Hamburger toggle (closed state) — must always be visible.
	   Force ink color so it doesn't disappear on cream-scrolled state,
	   and cream on the transparent homepage state. */
	.gg-header__nav .wp-block-navigation__responsive-container-open {
		color: var(--gg-ink);
	}
	body.home .gg-header:not(.gg-header--scrolled) .gg-header__nav .wp-block-navigation__responsive-container-open {
		color: var(--gg-cream);
	}

	/* ---- Mobile submenus (accordion-style inside open menu) ---- */
	.gg-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
		position: static !important;
		min-width: 0 !important;
		margin: 0 0 8px 0 !important;
		padding: 0 0 8px 16px !important;
		background: transparent !important;
		border: 0 !important;
		border-left: 2px solid rgba(184, 154, 92, 0.4) !important;
		box-shadow: none !important;
		opacity: 1 !important;
		visibility: visible !important;
		transform: none !important;
		pointer-events: auto !important;
		display: block !important;
	}
	.gg-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		font-size: 0.85rem !important;
		padding: 12px 4px !important;
		letter-spacing: 0.12em !important;
	}
	.gg-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item {
		border-bottom: 0 !important;
	}
}