/*
 * DokterIN header styling for the Site Builder header (Templates > Header,
 * post: "Header - Indonesia"), built with Elementor's own Site Logo, Nav
 * Menu and Button widgets. CSS only - no widget/structure changes here.
 *
 * Selectors deliberately avoid the auto-generated per-element IDs Elementor
 * assigns (e.g. .elementor-element-5c4601e) since those change if the
 * template is rebuilt. Instead they target the widgets' own stable classes,
 * and use :has() to find the one row section that actually holds the logo
 * + nav + button (the template also has empty spacer sections above/below
 * it that must NOT get the pill/background treatment).
 */

:root {
	--dokterin-navy: #142850;
	--dokterin-pink: #ec1c74;
	--dokterin-blue: #136fd8; /* navbar link hover, button border / hover */
	--dokterin-blue-soft-bg: #eaf2ff;
	--dokterin-btn-text: #1a75bb; /* Login/Daftar + Hubungi Kami text */
	--dokterin-text: #1f2937;
}

/* The template has two empty spacer-widget sections, one above and one
 * below the actual header row (sections 1749bcf50 and 4f4a1e07) - remove
 * the blank space they add. */
.elementor-47 .elementor-element-1749bcf50,
.elementor-47 .elementor-element-4f4a1e07,
.elementor-48 .elementor-element-1749bcf50,
.elementor-48 .elementor-element-4f4a1e07 {
	display: none !important;
}

/* The outer top-level section that wraps the header row (5c4601e) has its
 * own 70px top/bottom padding setting - remove it too. */
.elementor-47 .elementor-element-5c4601e,
.elementor-48 .elementor-element-5c4601e {
	padding: 0 !important;
}

/* The outer top-level section that wraps the header row below has
 * Elementor's own "boxed" content width (~1140px default), which would
 * otherwise cap how wide the inner row (and its max-width, further down)
 * is allowed to actually become. */
.elementor-top-section:has( .tmpcoder-nav-menu-container ) > .elementor-container {
	max-width: none !important;
}

/* The header row: the inner section that actually contains the logo + nav */
.elementor-inner-section:has(.tmpcoder-nav-menu-container) {
	position: sticky;
	top: 12px;
	z-index: 999;
	max-width: 1540px;
	margin: 16px auto 0;
	padding: 0 !important;
	border: none !important;
	border-radius: 1rem !important;
	background: #fff !important;
	box-shadow: 0 10px 30px rgba( 20, 40, 80, 0.12 );
}

.elementor-inner-section:has(.tmpcoder-nav-menu-container) > .elementor-container {
	max-width: none !important;
	background: #fff;
	border-radius: 1rem;
	padding: 6px 12px;
}

/* Logo */
.tmpcoder-site-logo img {
	max-height: 32px;
	width: auto;
}

/* Elementor's default column-gap style pads every populated column's inner
 * wrap by 10px 20px (logo, nav and button columns all get it) - scoped to
 * just this header (.elementor-47) so it doesn't affect anything else. */
/* .elementor-47 .elementor-column-gap-default > .elementor-column > .elementor-element-populated {
	padding: 6px 8px;
} */

/* The nav menu's own "flex-wrap: nowrap" below needs its full content
 * width, which otherwise flex-shrinks the logo/button columns down to
 * near-zero. Keep those two sized to their content and let the nav column
 * take the remaining space instead. */
.elementor-column:has( > .elementor-widget-wrap .tmpcoder-site-logo ) {
	flex: 0 0 auto !important;
	width: auto !important;
	margin-right: 82px;
}

.elementor-column:has( > .elementor-widget-wrap .tmpcoder-button ) {
	flex: 0 0 auto !important;
	width: auto !important;
	min-width: 165px !important;
}

.elementor-column:has( > .elementor-widget-wrap .tmpcoder-button ) > .elementor-widget-wrap {
	display: flex !important;
	align-items: center;
	gap: 8px;
	flex-wrap: nowrap;
}

/* Elementor hardcodes this button instance's wrap to max-width: 140px,
 * which is narrower than "Login/Daftar" set on one line (white-space:
 * nowrap below), causing it to visually overflow its column. */
.tmpcoder-button-wrap {
	max-width: none !important;
}

.elementor-column:has( > .elementor-widget-wrap .tmpcoder-nav-menu-container ) {
	min-width: 0 !important;
	width: 100% !important;
}

.elementor-column-gap-default>.elementor-column>.elementor-element-populated {
    padding: 10px 20px 10px 20px !important;
}

/* Three parts: brand | navigation | language switcher. The columns carry
 * the CSS classes dokterin-header-brand-col / -nav-col / -lang-col (set in
 * both header templates). Brand and switcher size to their content, the
 * navigation takes the space in between. */
.elementor-inner-section .elementor-column.dokterin-header-brand-col,
.elementor-inner-section .elementor-column.dokterin-header-lang-col {
	flex: 0 0 auto !important;
	width: auto !important;
	min-width: 0 !important;
}

.elementor-inner-section .elementor-column.dokterin-header-brand-col {
	margin-right: 40px;
}

.elementor-inner-section .elementor-column.dokterin-header-nav-col {
	flex: 1 1 auto !important;
	width: auto !important;
	min-width: 0 !important;
}

.elementor-inner-section .elementor-column.dokterin-header-lang-col > .elementor-widget-wrap {
	justify-content: flex-end;
}

/* One row at every width (Elementor lets columns wrap under 1024px). */
.elementor-inner-section:has( .dokterin-header-nav-col ) > .elementor-container {
	flex-wrap: nowrap !important;
	align-items: center;
}

/* The Nav Menu widget's "Show On: Tablet" switches to the hamburger at
 * <= 1024px, but the full menu (8 items + language switcher) needs ~1200px.
 * Extend the hamburger to <= 1199px, with the same rules Sastra's menu.css
 * uses for its tablet breakpoint. */
@media ( min-width: 1025px ) and ( max-width: 1199px ) {

	.tmpcoder-nav-menu-bp-tablet > .elementor-widget-container > nav.tmpcoder-nav-menu-container {
		display: none !important;
	}

	.tmpcoder-nav-menu-bp-tablet > .elementor-widget-container > nav.tmpcoder-mobile-nav-menu-container {
		display: block !important;
	}
}

/* 1200-1280px: tighten the desktop menu so every item fits. */
@media ( min-width: 1200px ) and ( max-width: 1280px ) {

	.elementor-inner-section .elementor-column.dokterin-header-brand-col {
		margin-right: 8px;
	}

	.tmpcoder-nav-menu {
		gap: 2px;
	}

	.tmpcoder-nav-menu .tmpcoder-menu-item {
		padding: 6px 6px !important;
		font-size: 12.5px !important;
	}

	.tmpcoder-nav-menu li.dokterin-menu-login,
	.tmpcoder-nav-menu li.dokterin-menu-contact {
		margin-left: 4px;
	}

	.tmpcoder-nav-menu li.dokterin-menu-login > .tmpcoder-menu-item,
	.tmpcoder-nav-menu li.dokterin-menu-contact > .tmpcoder-menu-item {
		padding: 8px 12px !important;
	}

	.elementor-inner-section .elementor-column.dokterin-header-brand-col > .elementor-widget-wrap,
	.elementor-inner-section .elementor-column.dokterin-header-nav-col > .elementor-widget-wrap,
	.elementor-inner-section .elementor-column.dokterin-header-lang-col > .elementor-widget-wrap {
		padding-left: 10px !important;
		padding-right: 10px !important;
	}
}

@media ( max-width: 1199px ) {

	/* Hamburger widths: logo, language switcher, then the hamburger -
	 * same order as the open mobile menu's top bar. */
	.elementor-inner-section .elementor-column.dokterin-header-brand-col {
		order: 1;
		flex: 1 1 auto !important;
		margin-right: 0;
	}

	.elementor-inner-section .elementor-column.dokterin-header-lang-col {
		order: 2;
	}

	.elementor-inner-section .elementor-column.dokterin-header-nav-col {
		order: 3;
		flex: 0 0 auto !important;
	}

	.elementor-inner-section .elementor-column.dokterin-header-lang-col > .elementor-widget-wrap,
	.elementor-inner-section .elementor-column.dokterin-header-nav-col > .elementor-widget-wrap {
		padding-left: 6px !important;
		padding-right: 6px !important;
	}
}

/* Nav menu */
.tmpcoder-nav-menu-container {
	width: 100%;
	min-width: 0;
	overflow-x: auto;
	scrollbar-width: none;
}

.tmpcoder-nav-menu-container::-webkit-scrollbar {
	display: none;
}

.tmpcoder-nav-menu {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Navigation sits on the right, next to the language switcher (the free
 * space goes between the logo and the menu). width: max-content + auto left
 * margin instead of justify-content: flex-end, so if the menu is ever wider
 * than its column it still scrolls from the first item instead of hiding it. */
.dokterin-header-nav-col .tmpcoder-nav-menu {
	width: max-content;
	margin-left: auto !important;
}

/* Elementor generates a per-instance rule (.elementor-47
 * .elementor-element-5e6e3617 ... .tmpcoder-menu-item) from the widget's
 * own padding setting: 23px/12px - much bigger than it looks, since it
 * stacks with the gap above. !important overrides it regardless of that
 * rule's higher specificity. */
.tmpcoder-nav-menu .tmpcoder-menu-item {
	font-size: 13px !important;
	font-weight: 500;
	color: var( --dokterin-text );
	white-space: nowrap;
	padding: 6px 8px !important;
	transition: color 0.2s ease;
}

.tmpcoder-nav-menu li:not( .lang-item ) > .tmpcoder-menu-item:hover,
.tmpcoder-nav-menu li:not( .lang-item ) > .tmpcoder-menu-item:focus {
	color: var( --dokterin-blue ) !important; /* beats the widget's own "hover color" rule */
}

/* Language switcher as a Polylang menu item (no longer used - the switcher
 * is its own header column, widget "Language Switcher (Dokterin)"). Kept so
 * a switcher item re-added to a menu still looks right. */
.tmpcoder-nav-menu li.lang-item {
	margin-left: 6px;
}

.tmpcoder-nav-menu li.lang-item.lang-item-first {
	margin-left: 6px;
	padding-left: 6px;
	border-left: 1px solid #e7e9ee;
}

.tmpcoder-nav-menu li.lang-item {
	flex-shrink: 0;
}

.tmpcoder-nav-menu li.lang-item > .tmpcoder-menu-item {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	padding: 0;
	opacity: 0.45;
	transition: opacity 0.2s ease;
}

.tmpcoder-nav-menu li.lang-item.current-lang > .tmpcoder-menu-item,
.tmpcoder-nav-menu li.lang-item > .tmpcoder-menu-item:hover {
	opacity: 1;
}

.tmpcoder-nav-menu li.lang-item img {
	width: 20px !important;
	height: 14px !important;
	flex-shrink: 0;
	border-radius: 2px;
}

/* "Login/Daftar" / "Login/Register" and "Hubungi Kami" / "Contact Us" - the
 * button widgets were removed from the Elementor design and replaced with
 * plain menu items (with real /login and WhatsApp links). Style them as
 * rounded boxes (10px) here so they look like buttons, not text links. The
 * items carry the CSS classes "dokterin-menu-login" / "dokterin-menu-contact"
 * (Appearance > Menus > CSS Classes) in both the ID and EN menus. */
.tmpcoder-nav-menu li.dokterin-menu-login,
.tmpcoder-nav-menu li.dokterin-menu-contact {
	margin-left: 10px;
	flex-shrink: 0;
}

.tmpcoder-nav-menu li.dokterin-menu-login > .tmpcoder-menu-item,
.tmpcoder-nav-menu li.dokterin-menu-contact > .tmpcoder-menu-item {
	border: 1px solid var( --dokterin-blue-soft-bg ) !important;
	border-radius: 10px !important;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
	font-weight: 600 !important;
	padding: 8px 18px !important;
	white-space: nowrap;
}

.tmpcoder-nav-menu li.dokterin-menu-login > .tmpcoder-menu-item {
	color: var( --dokterin-btn-text ) !important;
}

.tmpcoder-nav-menu li.dokterin-menu-contact > .tmpcoder-menu-item {
	background: var( --dokterin-blue-soft-bg );
	color: var( --dokterin-btn-text ) !important;
}

/* Hover (both buttons): light blue background, text stays blue. */
.tmpcoder-nav-menu li.dokterin-menu-login > .tmpcoder-menu-item:hover,
.tmpcoder-nav-menu li.dokterin-menu-login > .tmpcoder-menu-item:focus-visible,
.tmpcoder-nav-menu li.dokterin-menu-contact > .tmpcoder-menu-item:hover,
.tmpcoder-nav-menu li.dokterin-menu-contact > .tmpcoder-menu-item:focus-visible {
	background: var( --dokterin-blue-soft-bg ) !important;
	color: var( --dokterin-btn-text ) !important;
}

/* Buttons (Login/Daftar, and any duplicate added later e.g. Hubungi Kami) */
.tmpcoder-button {
	border-radius: 999px !important;
	border-color: var( --dokterin-blue ) !important;
	background-color: transparent !important;
	padding: 8px 10px !important;
	white-space: nowrap;
}

.tmpcoder-button .tmpcoder-button-text {
	color: var( --dokterin-blue ) !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	white-space: nowrap;
}

.tmpcoder-button:hover {
	background-color: var( --dokterin-blue ) !important;
}

.tmpcoder-button:hover .tmpcoder-button-text {
	color: #fff !important;
}

/* "Hubungi Kami" - the duplicated button widget (Elementor element id
 * 7bc0f40) - gets the soft filled style instead of the outline one above. */
.elementor-element-7bc0f40 .tmpcoder-button {
	background-color: var( --dokterin-blue-soft-bg ) !important;
	border-color: transparent !important;
}

.elementor-element-7bc0f40 .tmpcoder-button:hover {
	background-color: var( --dokterin-blue ) !important;
}

/* Mobile nav toggle icon */
.tmpcoder-mobile-toggle-line {
	background: var( --dokterin-text );
}

@media ( max-width: 1024px ) {

	.elementor-inner-section:has(.tmpcoder-nav-menu-container) {
		top: 0;
	}

	.tmpcoder-nav-menu li.lang-item.lang-item-first {
		margin-left: 0;
		padding-left: 0;
		border-left: none;
	}
}

@media ( max-width: 600px ) {

	.elementor-inner-section:has(.tmpcoder-nav-menu-container) {
		margin: 12px;
		border-radius: 28px !important;
	}

	.elementor-inner-section:has(.tmpcoder-nav-menu-container) > .elementor-container {
		border-radius: 25px;
	}
}