/*
 * DokterIN custom header styles.
 */

:root {
	--dokterin-navy: #142850;
	--dokterin-pink: #ec1c74;
	--dokterin-blue: #2f6fed;
	--dokterin-blue-soft-bg: #eaf2ff;
	--dokterin-text: #1f2937;
	--dokterin-border: #e7e9ee;
}

.dokterin-header-wrap {
	max-width: 1320px;
	margin: 16px auto 0;
	position: sticky;
	top: 0;
	z-index: 999;
}

header.dokterin-header {
	background: #fff;
	border: none;
	border-radius: 1rem;
	box-shadow: 0 10px 30px rgba( 20, 40, 80, 0.08 );
	padding: 0;
}

.dokterin-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 14px 21px;
}

/* Logo */
.dokterin-logo a {
	display: flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
}

.dokterin-logo-mark svg {
	display: block;
	width: 34px;
	height: 34px;
}

.dokterin-logo-text {
	font-size: 22px;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
}

.dokterin-logo-dark {
	color: var(--dokterin-navy);
}

.dokterin-logo-accent {
	color: var(--dokterin-pink);
}

/* Nav
 * The theme's own header CSS (.site-branding / nav.site-navigation) ships
 * fixed 30%/70% widths and a wrapping flex menu designed for its default
 * header markup. We reuse those classes for JS/mobile-toggle compatibility,
 * so the conflicting rules are neutralized here with !important.
 */
body .tmpcoder-site-header .site-branding {
	width: auto !important;
}

body .tmpcoder-site-header nav.site-navigation {
	width: auto !important;
}

.dokterin-nav {
	flex: 1 1 auto;
	display: flex;
	justify-content: center;
	min-width: 0;
}

.dokterin-nav ul.menu {
	display: flex;
	align-items: center;
	flex-wrap: nowrap !important;
	gap: 24px;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
}

.dokterin-nav ul.menu > li {
	margin: 0 !important;
	padding: 0 !important;
}

.dokterin-nav ul.menu > li > a {
	display: block !important;
	padding: 0 !important;
	font-size: 15px;
	font-weight: 500;
	color: var(--dokterin-text);
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.2s ease;
}

.dokterin-nav ul.menu > li > a:hover,
.dokterin-nav ul.menu > li > a:focus {
	color: var(--dokterin-pink);
}

/* Header actions: buttons + language switch */
.dokterin-header-actions {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-shrink: 0;
}

.dokterin-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	padding: 10px 20px;
	border-radius: 999px;
	transition: all 0.2s ease;
}

.dokterin-btn-outline {
	color: var(--dokterin-blue);
	border: 1.5px solid var(--dokterin-blue);
	background: transparent;
}

.dokterin-btn-outline:hover {
	background: var(--dokterin-blue);
	color: #fff;
}

.dokterin-btn-soft {
	color: var(--dokterin-blue);
	background: var(--dokterin-blue-soft-bg);
	border: 1.5px solid transparent;
}

.dokterin-btn-soft:hover {
	background: var(--dokterin-blue);
	color: #fff;
}

.dokterin-btn .dashicons {
	font-size: 16px;
	width: 16px;
	height: 16px;
}

/* Language switcher (Polylang) */
.dokterin-lang-switch {
	display: flex;
	align-items: center;
}

.dokterin-lang-switch ul.polylang-language-switcher,
.dokterin-lang-switch ul {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 4px 10px;
	list-style: none;
	background: #f3f5f8;
	border-radius: 999px;
}

.dokterin-lang-switch li {
	display: flex;
	align-items: center;
}

.dokterin-lang-switch a {
	display: flex;
	align-items: center;
	opacity: 0.45;
	transition: opacity 0.2s ease;
}

.dokterin-lang-switch li.lang-item-current a,
.dokterin-lang-switch a:hover {
	opacity: 1;
}

.dokterin-lang-switch img {
	width: 20px;
	height: auto;
	border-radius: 2px;
}

/* Mobile toggle button (hidden on desktop, theme JS toggles visibility) */
.dokterin-nav .wp-mobile-toggle-wrap {
	display: none;
}

@media ( max-width: 1024px ) {

	.dokterin-header-inner {
		flex-wrap: wrap;
		padding: 14px 21px;
	}

	.dokterin-nav {
		order: 3;
		flex: 0 0 100%;
		justify-content: flex-start;
	}

	.dokterin-nav .wp-mobile-toggle-wrap {
		display: inline-flex;
		flex-direction: column;
		gap: 4px;
		cursor: pointer;
		margin-right: 12px;
	}

	.dokterin-nav .wp-mobile-toggle-line {
		display: block;
		width: 22px;
		height: 2px;
		background: var(--dokterin-text);
	}

	.dokterin-nav .toggle-text-close {
		display: none;
	}

	.dokterin-nav ul.menu {
		display: none;
		flex-direction: column;
		align-items: flex-start;
		gap: 14px;
		width: 100%;
		padding: 16px 0 4px;
	}

	.dokterin-header-actions {
		flex-wrap: wrap;
		gap: 10px;
	}
}

@media ( max-width: 600px ) {

	.dokterin-header-wrap {
		margin: 12px;
	}

	.dokterin-header-inner {
		padding: 14px 21px;
	}

	.dokterin-logo-text {
		font-size: 18px;
	}

	.dokterin-header-actions {
		order: 2;
		flex: 1 1 100%;
		justify-content: flex-start;
		margin-top: 10px;
	}

	.dokterin-nav {
		order: 3;
	}

	.dokterin-btn {
		padding: 8px 14px;
		font-size: 13px;
	}
}