@import url('https://fonts.googleapis.com/css2?family=Lexend+Exa:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;700&display=swap');

:root {
	--font-lexend: 'Lexend Exa', sans-serif;
	--font-geist: 'Geist', sans-serif;
	--gty-admin-primary-color: #1D2327;
	--gty-admin-accent-color: #2271B1;
	--gty-admin-app-bg-color: #E6E6E6;
	--gty-admin-header-bg-color: #F7F9FA;
	--gty-space-1: 0.25rem; /* 4px */
	--gty-space-2: 0.5rem;  /* 8px */
	--gty-space-3: 0.75rem; /* 12px */
	--gty-space-4: 1rem;    /* 16px */
	--gty-space-8: 2rem;    /* 32px */
  --gty-space-16: 4rem;    /* 64px */
}

.font-lexend {
	font-family: var(--font-lexend);
}

.font-geist {
	font-family: var(--font-geist);
}

/**
 * Menu Styles
 * Component: Menu.js
 * BEM: .gty-admin-header, .gty-admin-header__*
 */
.gty-admin-header {
	font-family: var(--font-lexend);
	background-color: var(--gty-admin-header-bg-color);
	box-shadow: 0 1px 2px 0 rgba(0,0,0,0.03);
	border-bottom: 1px solid #e5e7eb;
	padding-top: var(--gty-space-4);
	padding-bottom: var(--gty-space-4);
	position: sticky;
	top: 32px;
	z-index: 100;
	transition: background-color 1s;
}

/* Semi-transparent header background while actively scrolling */
.gty-admin-header--scrolling {
	background-color: rgba(247, 249, 250, 0.7); /* matches --gty-admin-header-bg-color with alpha */
	backdrop-filter: blur(2px);
}

@media (max-width: 782px) {
	.gty-admin-header {
		top: 46px;
	}
}

.gty-admin-header__container {
	max-width: 80rem;
	margin: 0 auto;
	padding-left: var(--gty-space-8);
	padding-right: var(--gty-space-8);
}

.gty-admin-header__row {
	display: flex;
	align-items: center;
	gap: var(--gty-space-8);
	height: auto;
	justify-content: flex-start;
}

.gty-admin-header__right {
	margin-left: auto;
	display: flex;
	align-items: center;
    gap: var(--gty-space-4);
}

.gty-admin-header__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	background: none;
	border: none;
	cursor: pointer;
	transition: background 0.2s;
}

.gty-admin-header__icon-svg {
	fill: none;
	stroke: var(--gty-admin-primary-color);
}

.gty-admin-header__brand {
	display: flex;
	align-items: center;
}

.gty-admin-header__title {
	font-family: var(--font-lexend);
	font-size: 1.25rem;
	font-weight: 800;
	color: var(--gty-admin-primary-color);
	letter-spacing: 0.05em;
}

.gty-admin-header-menu {
	display: flex;
	gap: var(--gty-space-4);
}

.gty-admin-header-menu__link {
	align-items: center;
	font-size: 0.925rem;
	font-weight: 800;
	color: var(--gty-admin-primary-color);
	text-decoration: none;
	transition: color 0.2s, border-color 0.2s;
}

.gty-admin-header__link--active {
	color: var(--gty-admin-primary-color);
}
/**
 * WordPress Admin Style Overrides for App Links
 * Use .gty-admin-link on any link that should not inherit WP admin link/hover/active styles.
 * This is reusable for all admin app links, including menu and logo.
 */
.gty-admin-link,
.gty-admin-link:active,
.gty-admin-link:focus,
.gty-admin-link:visited {
	box-shadow: none !important;
	outline: none !important;
	border: none !important;
	border-radius: 0 !important;
	background: none !important;
	text-decoration: none !important;
	color: var(--gty-admin-primary-color) !important;
	transition: none !important;
	padding: 0 !important;
}
.gty-admin-link:hover {
	color: var(--gty-admin-primary-color) !important;
	background: none !important;
	border: none !important;
	text-decoration: none !important;
}

/**
 * Nav Overflow Menu Styles
 * Component: NavOverflowMenu.js
 * BEM: .gty-admin-nav-overflow, .gty-admin-nav-overflow__*
 */
.gty-admin-nav-overflow {
	position: relative;
	display: flex;
	align-items: center;
}

.gty-admin-nav-overflow__trigger {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--gty-space-1) var(--gty-space-2);
	background: none;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	color: var(--gty-admin-primary-color);
	transition: background-color 0.15s;
}

.gty-admin-nav-overflow__trigger:hover {
	background-color: rgba(0, 0, 0, 0.05);
}

.gty-admin-nav-overflow__trigger--active {
	background-color: rgba(0, 0, 0, 0.08);
}

.gty-admin-nav-overflow__dropdown {
	position: absolute;
	top: calc(100% + var(--gty-space-2));
	left: 50%;
	transform: translateX(-50%);
	min-width: 160px;
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 6px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	z-index: 200;
	padding: var(--gty-space-1) 0;
}

.gty-admin-nav-overflow__item {
	display: block;
	padding: var(--gty-space-2) var(--gty-space-3);
	font-family: var(--font-lexend);
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--gty-admin-primary-color);
	text-decoration: none;
	transition: background-color 0.15s;
	white-space: nowrap;
}

.gty-admin-nav-overflow__item:hover,
.gty-admin-nav-overflow__item:focus {
	background-color: #f5f5f5;
	color: var(--gty-admin-primary-color);
	text-decoration: none;
}

.gty-admin-nav-overflow__item--active {
	background-color: rgba(34, 113, 177, 0.1);
	color: var(--gty-admin-accent-color);
}
