/**
 * GC Theme — News by Region: global bits
 *
 * Loaded on every page. Styles the region links in the header top bar
 * (after the editorial menu), the same links in the mobile drawer, and
 * the region label next to the published date on articles.
 *
 * Markup comes from inc/gc-regions.php (gc_region_top_bar(),
 * gc_region_drawer_links(), gc_region_post_label()).
 *
 * @package GC_Theme
 */

/* ── Top bar: the editorial menu and the region links share one row.
   Region links use exactly the editorial-menu look (uppercase, 11px,
   muted) and sit on the right, next to the social icons. ── */
.top-bar-nav {
	display: flex;
	align-items: center;
	gap: 24px;
	min-width: 0;
	flex: 1;
}

.top-bar-nav > ul {
	flex-shrink: 0;
}

.gc-region-bar {
	display: flex;
	align-items: center;
	gap: 22px;
	margin-left: auto;
	padding-right: 28px;
	min-width: 0;
	align-self: stretch;
	overflow-x: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.gc-region-bar::-webkit-scrollbar {
	display: none;
}

.gc-region-bar__sep {
	display: none;
}

.gc-region-bar a {
	font-family: 'Inter', sans-serif;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--gc-text-muted);
	text-decoration: none;
	white-space: nowrap;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	height: 100%;
	padding-top: 3px; /* uppercase Inter sits high in its box: optical centring */
	transition: color 0.15s;
}

.gc-region-bar a:hover,
.gc-region-bar a.is-active {
	color: var(--gc-primary);
}

.gc-region-bar__label {
	font-size: 10px;
	color: var(--gc-navy) !important;
}

.gc-region-bar__label:hover,
.gc-region-bar__label.is-active {
	color: var(--gc-primary) !important;
}

/* Editorial menu links: same vertical centring as the region links. */
.top-bar-nav > ul {
	align-self: stretch;
}

.top-bar-nav > ul li {
	display: flex;
	align-items: center;
	height: 100%;
}

.top-bar-nav > ul li a {
	line-height: 1;
	display: inline-block;
	padding-top: 3px; /* same optical centring as the region links */
}

/* Keep the social icons from being squeezed when the row is tight. */
.header-top-bar .header-social-icons {
	flex-shrink: 0;
}

@media (max-width: 1280px) {
	.top-bar-nav {
		gap: 18px;
	}
	.gc-region-bar {
		gap: 16px;
		padding-right: 18px;
	}
}

/* ── Mobile drawer: collapsible "News by Region" under the editorial links,
   same look as the other secondary items, chevron like the iHub item ── */
.gc-region-drawer {
	margin: 0;
	padding: 0;
}

.gc-region-drawer__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	list-style: none;
	cursor: pointer;
	padding: 10px 20px;
	font-family: 'Inter', sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--gc-text-muted);
	transition: color 0.2s;
}

.gc-region-drawer__toggle::-webkit-details-marker {
	display: none;
}

.gc-region-drawer__toggle:hover {
	color: var(--gc-primary);
}

.gc-region-drawer__chevron {
	display: inline-block;
	font-size: 20px;
	line-height: 1;
	color: var(--gc-text-faint);
	transition: transform 0.2s;
}

.gc-region-drawer__chevron svg {
	display: none;
}

.gc-region-drawer__chevron::before {
	content: '›';
}

.gc-region-drawer[open] .gc-region-drawer__chevron {
	transform: rotate(90deg);
}

.gc-region-drawer ul {
	list-style: none;
	margin: 0;
	padding: 4px 0 6px;
	background: var(--gc-bg-soft);
}

.gc-region-drawer ul li a {
	display: block;
	padding: 10px 20px 10px 36px;
	font-family: 'Inter', sans-serif;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	color: var(--gc-text-muted);
	text-decoration: none;
}

.gc-region-drawer ul li a:hover {
	color: var(--gc-primary);
}

.gc-region-drawer ul li a.gc-region-drawer__all {
	color: var(--gc-primary-dark);
	font-weight: 600;
}

/* ── Article meta: "Published on … · Europe" ── */
.gc-single-region-sep {
	color: var(--gc-text-faint);
	margin: 0 2px;
}

.gc-single-region {
	color: var(--gc-primary-dark) !important;
	font-weight: 600;
	text-decoration: none !important;
}

.gc-single-region:hover {
	text-decoration: underline !important;
}