/* =============================================================================
   HEADER
   Site header: logo, hamburger toggle (mobile), primary nav.
   Mobile-first: nav collapses into a dropdown panel under 768px.
   ========================================================================== */

.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background-color: var(--color-surface);
	border-bottom: 1px solid var(--color-border);
}

.site-header__inner {
	position: relative;
	max-width: var(--container-width);
	margin: 0 auto;
	padding: 12px var(--container-padding);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
}

/* --- Logo --- */

.site-logo {
	line-height: 0;
}

.site-logo__image {
	height: 78px;
	width: auto;
}

/* --- Hamburger toggle (mobile only) --- */

.menu-toggle {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px;
	width: 40px;
	height: 40px;
	flex-shrink: 0;
}

.menu-toggle__bar {
	display: block;
	width: 22px;
	height: 2px;
	background-color: var(--color-text);
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(2) {
	opacity: 0;
}

.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/* --- Nav (mobile: collapsible panel) --- */

.site-nav {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	background-color: var(--color-surface);
	border-bottom: 1px solid var(--color-border);
	box-shadow: var(--shadow-md);
}

.site-nav.is-open {
	display: block;
}

.site-nav__list {
	display: flex;
	flex-direction: column;
	padding: 8px var(--container-padding) 16px;
}

.site-nav__list a {
	display: block;
	padding: 12px 0;
	color: var(--color-text-muted);
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: var(--font-size-md);
	letter-spacing: 0.01em;
	border-bottom: 1px solid var(--color-border);
}

.site-nav__list li:last-child a {
	border-bottom: 0;
}

.site-nav__list a:hover,
.site-nav__list a:focus {
	color: var(--color-secondary);
}

.site-nav__list .current-menu-item > a {
	color: var(--color-accent);
}

/* WP adds current-menu-parent/current-menu-ancestor to a top-level item (e.g.
   "My Hands") when the active page is one of its sub-menu items (e.g.
   "Tournament") rather than the top-level link itself - keep that top-level item
   highlighted too, not just the exact matching sub-item. */
.site-nav__list .current-menu-parent > a,
.site-nav__list .current-menu-ancestor > a {
	color: var(--color-accent);
}

/* --- Dropdown submenus (e.g. Hands > Tournament/Cash/Spin) --- */
/* Mobile: nested, always-visible indented list under the parent item. */

.site-nav__list .sub-menu {
	padding-left: var(--space-4);
}

.site-nav__list .sub-menu a {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	font-size: var(--font-size-sm);
	color: var(--color-text-faint);
}

/* Hand-type icons, prefixed onto the sub-menu links by matching the URL suffix
   (works for both /my-hands/tournament and /seen-hands/tournament without
   needing a custom nav walker or per-item markup). mask-image + background-color
   (rather than an <img>/background-image) so the icon tints with currentColor,
   including on :hover/:focus and when the parent's current-menu-item class kicks
   in above - no icon assets to keep in sync with the theme palette. */
.site-nav__list .sub-menu a::before {
	content: "";
	display: block;
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	/* Small optical correction against align-items: center - see git history if
	   this needs re-tuning; couldn't be verified pixel-for-pixel locally since
	   this dev sandbox can't reach Google Fonts to render the real
	   --font-heading (Rajdhani), so it was corrected from live user feedback
	   instead of a local screenshot. */
	margin-top: -1px;
	background-color: currentColor;
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
	-webkit-mask-size: contain;
}

.site-nav__list .sub-menu a[href$="/tournament"]::before {
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M7%204h10v3a5%205%200%200%201-10%200V4z'/%3E%3Cpath%20d='M7%205H4.5A1.5%201.5%200%200%200%203%206.5v.5a4%204%200%200%200%204%204'/%3E%3Cpath%20d='M17%205h2.5A1.5%201.5%200%200%201%2021%206.5v.5a4%204%200%200%201-4%204'/%3E%3Cpath%20d='M12%2012v5'/%3E%3Cpath%20d='M9%2020h6'/%3E%3Cpath%20d='M9.5%2017h5l.5%203h-6z'/%3E%3C/svg%3E");
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M7%204h10v3a5%205%200%200%201-10%200V4z'/%3E%3Cpath%20d='M7%205H4.5A1.5%201.5%200%200%200%203%206.5v.5a4%204%200%200%200%204%204'/%3E%3Cpath%20d='M17%205h2.5A1.5%201.5%200%200%201%2021%206.5v.5a4%204%200%200%201-4%204'/%3E%3Cpath%20d='M12%2012v5'/%3E%3Cpath%20d='M9%2020h6'/%3E%3Cpath%20d='M9.5%2017h5l.5%203h-6z'/%3E%3C/svg%3E");
}

.site-nav__list .sub-menu a[href$="/cash"]::before {
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='9'/%3E%3Cpath%20d='M12%206v12'/%3E%3Cpath%20d='M15%209.5c0-1.4-1.3-2.5-3-2.5s-3%201.1-3%202.5%201.3%202%203%202.5%203%201.1%203%202.5-1.3%202.5-3%202.5-3-1.1-3-2.5'/%3E%3C/svg%3E");
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='9'/%3E%3Cpath%20d='M12%206v12'/%3E%3Cpath%20d='M15%209.5c0-1.4-1.3-2.5-3-2.5s-3%201.1-3%202.5%201.3%202%203%202.5%203%201.1%203%202.5-1.3%202.5-3%202.5-3-1.1-3-2.5'/%3E%3C/svg%3E");
}

.site-nav__list .sub-menu a[href$="/spin"]::before {
	/* Slot machine (body + reel-display window + side lever) - tried rendering
	   literal "777" text in the display window first, but at this icon's actual
	   ~16px render size it came out as an illegible smudge (fine, legible at
	   preview sizes like 96px+); simplified to plain reel dividers, which read
	   clearly at the size this actually ships at. */
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='3'%20y='6'%20width='15'%20height='14'%20rx='2'/%3E%3Crect%20x='5.5'%20y='9'%20width='10'%20height='5'%20rx='0.5'/%3E%3Cpath%20d='M8.8%209v5'/%3E%3Cpath%20d='M12.2%209v5'/%3E%3Cpath%20d='M18%208v9'/%3E%3Ccircle%20cx='18'%20cy='6.5'%20r='1.5'/%3E%3C/svg%3E");
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='3'%20y='6'%20width='15'%20height='14'%20rx='2'/%3E%3Crect%20x='5.5'%20y='9'%20width='10'%20height='5'%20rx='0.5'/%3E%3Cpath%20d='M8.8%209v5'/%3E%3Cpath%20d='M12.2%209v5'/%3E%3Cpath%20d='M18%208v9'/%3E%3Ccircle%20cx='18'%20cy='6.5'%20r='1.5'/%3E%3C/svg%3E");
}

/* --- Desktop --- */

@media (min-width: 768px) {
	.menu-toggle {
		display: none;
	}

	.site-nav {
		display: block;
		position: static;
		background: none;
		border: 0;
		box-shadow: none;
	}

	.site-nav__list {
		flex-direction: row;
		align-items: center;
		gap: 40px;
		padding: 0;
	}

	.site-nav__list a {
		padding: 0;
		font-size: var(--font-size-base);
		border-bottom: 0;
	}

	/* Dropdown: hidden until the parent item is hovered or focused. */

	.site-nav__list .menu-item-has-children {
		position: relative;
	}

	.site-nav__list .sub-menu {
		/* opacity/visibility rather than display: none/block - display can't be
		   transitioned (it's not interpolable), so it'd make the fade below a
		   no-op. Transitioning visibility alongside opacity, at the same
		   duration, is the standard way to still get a hard cutoff for
		   pointer/focus interaction when hidden: the browser flips visibility to
		   hidden only once the transition finishes (on the way out), but flips it
		   to visible immediately (on the way in). */
		opacity: 0;
		visibility: hidden;
		position: absolute;
		top: 100%;
		left: 0;
		min-width: 180px;
		/* No margin-top: the gap between the parent li and this box would be a
		   dead zone the mouse has to cross, breaking :hover before it arrives. */
		padding: var(--space-4) 0 var(--space-2);
		background-color: var(--color-surface);
		border: 1px solid var(--color-border);
		border-radius: var(--radius-md);
		box-shadow: var(--shadow-md);
		z-index: 10;
		transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
	}

	.site-nav__list .menu-item-has-children:hover .sub-menu,
	.site-nav__list .menu-item-has-children:focus-within .sub-menu {
		opacity: 1;
		visibility: visible;
	}

	.site-nav__list .sub-menu a {
		display: flex;
		align-items: center;
		gap: var(--space-2);
		padding: var(--space-2) var(--space-4);
		font-size: var(--font-size-sm);
		color: var(--color-text-muted);
	}

	.site-nav__list .sub-menu a:hover,
	.site-nav__list .sub-menu a:focus {
		color: var(--color-secondary);
	}

	/* Same specificity as .sub-menu a above (both .site-nav__list + one more
	   class + a), so without the extra .current-menu-item class here this loses
	   to the plain color: var(--color-text-muted) rule via source order and the
	   active sub-item never looks active at desktop width. */
	.site-nav__list .sub-menu .current-menu-item > a {
		color: var(--color-accent);
	}
}