/* Header: top bar, main bar, primary menu, search panel, brand line, mobile nav panel. */

.skip-link:focus {
	position: fixed !important;
	top: 8px;
	left: 8px;
	z-index: 1000;
	width: auto;
	height: auto;
	padding: 10px 16px;
	clip: auto;
	background: var(--tmp-ink);
	color: #fff;
	border-radius: 8px;
}

.tmp-header { position: relative; z-index: 50; background: var(--tmp-card); }
.tmp-header--sticky { position: sticky; top: 0; }
.admin-bar .tmp-header--sticky { top: 46px; }
@media (min-width: 783px) { .admin-bar .tmp-header--sticky { top: 32px; } }

.tmp-topbar { display: none; background: var(--tmp-ink); color: #fff; font-size: 14px; }
@media (min-width: 1024px) { .tmp-topbar { display: block; } }
.tmp-topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 38px; }
.tmp-topbar__date { display: inline-flex; align-items: center; gap: 6px; color: var(--tmp-on-dark-muted); }
.tmp-topbar .tmp-social { margin-left: auto; }
.tmp-header.is-compact .tmp-topbar { display: none; }

.tmp-header__inner { display: flex; align-items: center; gap: 12px; min-height: 56px; }
@media (min-width: 1024px) { .tmp-header__inner { min-height: 72px; gap: 24px; } }
.tmp-header.is-compact .tmp-header__inner { min-height: 56px; }

.tmp-logo { flex: 1; display: flex; justify-content: center; min-width: 0; }
@media (min-width: 1024px) { .tmp-logo { flex: none; justify-content: flex-start; } }
.tmp-logo img, .tmp-logo .custom-logo { width: auto; max-height: 40px; }
@media (min-width: 1024px) { .tmp-logo img, .tmp-logo .custom-logo { max-height: 52px; } }
.tmp-header.is-compact .tmp-logo img { max-height: 38px; }
.tmp-logo__text { color: var(--tmp-ink); font-size: 22px; font-weight: 700; line-height: 1.4; text-decoration: none; }

.tmp-header__actions { display: flex; align-items: center; gap: 4px; }
@media (min-width: 1024px) { .tmp-menu-btn { display: none; } }

/* Primary menu (desktop) */
.tmp-primary { display: none; flex: 1; }
@media (min-width: 1024px) { .tmp-primary { display: block; } }
.tmp-primary__menu { display: flex; flex-wrap: wrap; gap: 2px; margin: 0; padding: 0; list-style: none; }
.tmp-primary__menu > li { position: relative; }
.tmp-primary__menu a {
	display: flex;
	align-items: center;
	min-height: 44px;
	padding: 0 12px;
	border-radius: 8px;
	color: var(--tmp-ink);
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
}
.tmp-primary__menu a:hover,
.tmp-primary__menu .current-menu-item > a { color: var(--tmp-brand-blue); background: var(--tmp-tint-blue); }
.tmp-primary__menu .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 220px;
	margin: 0;
	padding: 8px;
	list-style: none;
	background: var(--tmp-card);
	border: 1px solid var(--tmp-border);
	border-radius: var(--tmp-radius);
	box-shadow: 0 12px 24px rgba(11, 27, 51, .08);
	opacity: 0;
	visibility: hidden;
	transform: translateY(4px);
	transition: opacity .15s, transform .15s, visibility .15s;
}
.tmp-primary__menu li:hover > .sub-menu,
.tmp-primary__menu li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; }

/* Search panel */
.tmp-search-panel { padding: 12px 0; border-top: 1px solid var(--tmp-border); background: var(--tmp-card); }

.tmp-brandline { height: 3px; background: var(--tmp-gradient); }

/* Mobile/tablet nav panel (native <dialog>) */
.tmp-nav-panel {
	width: min(86vw, 360px);
	max-width: none;
	height: 100%;
	max-height: none;
	margin: 0;
	padding: 0 0 24px;
	border: 0;
	background: var(--tmp-card);
	color: var(--tmp-text);
	overflow-y: auto;
}
.tmp-nav-panel::backdrop { background: rgba(11, 27, 51, .45); }
.tmp-nav-panel__head { display: flex; align-items: center; justify-content: space-between; padding: 8px 8px 8px var(--tmp-gutter); border-bottom: 3px solid; border-image: var(--tmp-gradient) 1; }
.tmp-nav-panel__title { color: var(--tmp-ink); font-weight: 700; }
.tmp-nav-panel__menu, .tmp-nav-panel__menu .sub-menu { margin: 0; padding: 0; list-style: none; }
.tmp-nav-panel__menu a {
	display: flex;
	align-items: center;
	min-height: 48px;
	padding: 0 var(--tmp-gutter);
	border-bottom: 1px solid var(--tmp-border);
	color: var(--tmp-ink);
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
}
.tmp-nav-panel__menu .sub-menu a { padding-left: calc(var(--tmp-gutter) * 2); font-weight: 400; }
.tmp-nav-panel .tmp-lang-switcher, .tmp-nav-panel .tmp-social { padding: 16px var(--tmp-gutter) 0; }
