/**
 * Custom Header Styles
 *
 * Astra Child Theme
 *
 * File:
 * assets/css/header.css
 *
 * This file controls:
 * - Header layout
 * - WordPress logo
 * - Site title
 * - Site description
 * - WordPress navigation menu
 * - Dropdown menus
 * - Search button
 * - Theme button
 * - Mobile menu
 * - Search panel
 * - Responsive layout
 * - Dark mode
 */


/* =========================================================
   1. HEADER VARIABLES
========================================================= */

:root {

	--header-background: #ffffff;

	--header-text: #172033;

	--header-text-muted: #687386;

	--header-primary: #173f8a;

	--header-primary-hover: #0f2f6b;

	--header-border: rgba(23, 32, 51, 0.10);

	--header-hover-background: rgba(23, 63, 138, 0.07);

	--header-active-background: rgba(23, 63, 138, 0.09);

	--header-shadow:
		0 10px 35px rgba(15, 31, 56, 0.08);

	--header-dropdown-shadow:
		0 18px 45px rgba(15, 31, 56, 0.12);

	--header-radius: 18px;

	--header-button-radius: 12px;

	--header-transition:
		0.25s ease;

	--header-container-width: 1200px;

}


/* =========================================================
   2. HEADER
========================================================= */

.site-header {

	position: relative;

	width: 100%;

	padding: 16px 20px;

	background: transparent;

	z-index: 9999;

}


/* =========================================================
   3. HEADER INNER CONTAINER
========================================================= */

.site-header-inner {

	width: min(
		var(--header-container-width),
		100%
	);

	margin: 0 auto;

	padding: 12px 18px;

	display: flex;

	align-items: center;

	justify-content: space-between;

	gap: 24px;

	background: var(--header-background);

	border: 1px solid var(--header-border);

	border-radius: var(--header-radius);

	box-shadow: var(--header-shadow);

}


/* =========================================================
   4. SITE BRANDING
========================================================= */

.site-branding {

	display: flex;

	align-items: center;

	gap: 12px;

	min-width: 0;

	flex-shrink: 0;

}


/* =========================================================
   5. SITE LOGO
========================================================= */

.site-logo {

	display: flex;

	align-items: center;

	justify-content: center;

	flex-shrink: 0;

}


.site-logo a {

	display: flex;

	align-items: center;

	justify-content: center;

	text-decoration: none;

}


.site-logo img {

	display: block;

	width: auto;

	max-width: 58px;

	max-height: 58px;

	object-fit: contain;

	transition:
		transform var(--header-transition);

}


.site-logo a:hover img {

	transform: scale(1.04);

}


/* =========================================================
   6. SITE IDENTITY
========================================================= */

.site-identity {

	min-width: 0;

}


/* =========================================================
   7. SITE TITLE
========================================================= */

.site-title {

	margin: 0;

	padding: 0;

	font-size: 20px;

	line-height: 1.15;

	font-weight: 700;

	letter-spacing: -0.02em;

}


.site-title a {

	color: var(--header-text);

	text-decoration: none;

	transition:
		color var(--header-transition),
		opacity var(--header-transition);

}


.site-title a:hover {

	color: var(--header-primary);

}


/* =========================================================
   8. SITE DESCRIPTION / TAGLINE
========================================================= */

.site-description {

	margin: 4px 0 0;

	padding: 0;

	color: var(--header-text-muted);

	font-size: 11px;

	line-height: 1.35;

	font-weight: 500;

	white-space: nowrap;

	overflow: hidden;

	text-overflow: ellipsis;

	max-width: 260px;

}


/* =========================================================
   9. PRIMARY NAVIGATION
========================================================= */

.primary-navigation {

	display: flex;

	align-items: center;

	justify-content: center;

	flex: 1;

	min-width: 0;

}


/* =========================================================
   10. PRIMARY MENU
========================================================= */

.primary-menu {

	display: flex;

	align-items: center;

	justify-content: center;

	gap: 4px;

	margin: 0;

	padding: 0;

	list-style: none;

}


/* =========================================================
   11. MENU ITEMS
========================================================= */

.primary-menu > li {

	position: relative;

	margin: 0;

	padding: 0;

	list-style: none;

}


/* =========================================================
   12. MENU LINKS
========================================================= */

.primary-menu > li > a {

	display: flex;

	align-items: center;

	justify-content: center;

	min-height: 42px;

	padding: 9px 15px;

	border-radius: var(--header-button-radius);

	color: var(--header-text);

	font-size: 14px;

	font-weight: 600;

	line-height: 1;

	text-decoration: none;

	white-space: nowrap;

	transition:
		color var(--header-transition),
		background-color var(--header-transition),
		transform var(--header-transition);

}


/* =========================================================
   13. MENU HOVER
========================================================= */

.primary-menu > li > a:hover {

	color: var(--header-primary);

	background: var(--header-hover-background);

	transform: translateY(-1px);

}


/* =========================================================
   14. CURRENT MENU ITEM
========================================================= */

.primary-menu > li.current-menu-item > a,

.primary-menu > li.current-menu-ancestor > a,

.primary-menu > li.current_page_item > a,

.primary-menu > li.current_page_ancestor > a {

	color: var(--header-primary);

	background: var(--header-active-background);

}


/* =========================================================
   15. FOCUS STATE
========================================================= */

.primary-menu a:focus-visible,

.header-action:focus-visible,

.mobile-menu-toggle:focus-visible {

	outline: 3px solid rgba(23, 63, 138, 0.25);

	outline-offset: 2px;

}


/* =========================================================
   16. SUBMENU
========================================================= */

.primary-menu .sub-menu {

	position: absolute;

	top: calc(100% + 10px);

	left: 0;

	min-width: 210px;

	margin: 0;

	padding: 8px;

	list-style: none;

	background: var(--header-background);

	border: 1px solid var(--header-border);

	border-radius: 14px;

	box-shadow: var(--header-dropdown-shadow);

	opacity: 0;

	visibility: hidden;

	transform: translateY(8px);

	transition:
		opacity var(--header-transition),
		visibility var(--header-transition),
		transform var(--header-transition);

	z-index: 10000;

}


/* =========================================================
   17. SHOW SUBMENU
========================================================= */

.primary-menu li:hover > .sub-menu,

.primary-menu li:focus-within > .sub-menu {

	opacity: 1;

	visibility: visible;

	transform: translateY(0);

}


/* =========================================================
   18. SUBMENU ITEMS
========================================================= */

.primary-menu .sub-menu li {

	margin: 0;

	padding: 0;

	list-style: none;

}


/* =========================================================
   19. SUBMENU LINKS
========================================================= */

.primary-menu .sub-menu a {

	display: block;

	width: 100%;

	padding: 11px 13px;

	border-radius: 9px;

	color: var(--header-text);

	font-size: 13px;

	font-weight: 500;

	line-height: 1.4;

	text-decoration: none;

	transition:
		color var(--header-transition),
		background-color var(--header-transition);

}


/* =========================================================
   20. SUBMENU HOVER
========================================================= */

.primary-menu .sub-menu a:hover {

	color: var(--header-primary);

	background: var(--header-hover-background);

}


/* =========================================================
   21. HEADER ACTIONS
========================================================= */

.header-actions {

	display: flex;

	align-items: center;

	gap: 7px;

	flex-shrink: 0;

}


/* =========================================================
   22. HEADER ACTION BUTTON
========================================================= */

.header-action {

	width: 42px;

	height: 42px;

	display: inline-flex;

	align-items: center;

	justify-content: center;

	padding: 0;

	border: 1px solid var(--header-border);

	border-radius: var(--header-button-radius);

	background: transparent;

	color: var(--header-text);

	cursor: pointer;

	transition:
		color var(--header-transition),
		background-color var(--header-transition),
		border-color var(--header-transition),
		transform var(--header-transition);

}


/* =========================================================
   23. ACTION BUTTON HOVER
========================================================= */

.header-action:hover {

	color: var(--header-primary);

	background: var(--header-hover-background);

	border-color: rgba(23, 63, 138, 0.15);

	transform: translateY(-1px);

}


/* =========================================================
   24. SEARCH ICON
========================================================= */

.search-icon {

	display: inline-flex;

	align-items: center;

	justify-content: center;

	font-size: 25px;

	line-height: 1;

	transform: rotate(-20deg);

}


/* =========================================================
   25. THEME ICON
========================================================= */

.theme-icon {

	display: inline-flex;

	align-items: center;

	justify-content: center;

	font-size: 19px;

	line-height: 1;

}


/* =========================================================
   26. MOBILE MENU BUTTON
========================================================= */

.mobile-menu-toggle {

	display: none;

	width: 42px;

	height: 42px;

	padding: 9px;

	border: 1px solid var(--header-border);

	border-radius: var(--header-button-radius);

	background: transparent;

	cursor: pointer;

	flex-direction: column;

	align-items: center;

	justify-content: center;

	gap: 5px;

}


/* =========================================================
   27. MOBILE MENU LINES
========================================================= */

.mobile-menu-toggle span {

	display: block;

	width: 20px;

	height: 2px;

	border-radius: 2px;

	background: var(--header-text);

	transition:
		transform var(--header-transition),
		opacity var(--header-transition);

}


/* =========================================================
   28. MOBILE MENU ACTIVE STATE
========================================================= */

.mobile-menu-toggle.is-active span:nth-child(1) {

	transform: translateY(7px) rotate(45deg);

}


.mobile-menu-toggle.is-active span:nth-child(2) {

	opacity: 0;

}


.mobile-menu-toggle.is-active span:nth-child(3) {

	transform: translateY(-7px) rotate(-45deg);

}


/* =========================================================
   29. SEARCH PANEL
========================================================= */

.header-search {

	width: 100%;

	padding: 10px 20px 0;

}


.header-search-inner {

	width: min(
		var(--header-container-width),
		100%
	);

	margin: 0 auto;

	padding: 18px;

	background: var(--header-background);

	border: 1px solid var(--header-border);

	border-radius: 16px;

	box-shadow: var(--header-shadow);

}


/* =========================================================
   30. SEARCH FORM
========================================================= */

.header-search-inner form {

	display: flex;

	align-items: center;

	gap: 10px;

	margin: 0;

}


/* =========================================================
   31. SEARCH LABEL
========================================================= */

.header-search-inner label {

	flex: 1;

	margin: 0;

}


/* =========================================================
   32. SEARCH INPUT
========================================================= */

.header-search-inner input[type="search"] {

	width: 100%;

	min-height: 44px;

	padding: 10px 14px;

	border: 1px solid var(--header-border);

	border-radius: 10px;

	background: transparent;

	color: var(--header-text);

	font-size: 14px;

	outline: none;

	transition:
		border-color var(--header-transition),
		box-shadow var(--header-transition);

}


.header-search-inner input[type="search"]:focus {

	border-color: var(--header-primary);

	box-shadow:
		0 0 0 3px rgba(23, 63, 138, 0.08);

}


/* =========================================================
   33. SEARCH SUBMIT BUTTON
========================================================= */

.header-search-inner input[type="submit"] {

	min-height: 44px;

	padding: 10px 18px;

	border: 0;

	border-radius: 10px;

	background: var(--header-primary);

	color: #ffffff;

	font-size: 14px;

	font-weight: 600;

	cursor: pointer;

	transition:
		background-color var(--header-transition),
		transform var(--header-transition);

}


.header-search-inner input[type="submit"]:hover {

	background: var(--header-primary-hover);

	transform: translateY(-1px);

}


/* =========================================================
   34. DARK MODE
========================================================= */

html.budania-dark-mode {

	--header-background: #111827;

	--header-text: #f3f4f6;

	--header-text-muted: #9ca3af;

	--header-border: rgba(255, 255, 255, 0.10);

	--header-hover-background: rgba(255, 255, 255, 0.07);

	--header-active-background: rgba(255, 255, 255, 0.09);

	--header-shadow:
		0 10px 35px rgba(0, 0, 0, 0.25);

	--header-dropdown-shadow:
		0 18px 45px rgba(0, 0, 0, 0.35);

}


/* =========================================================
   35. DARK MODE - BODY
========================================================= */

html.budania-dark-mode body {

	background: #0f172a;

}


/* =========================================================
   36. DARK MODE - SEARCH
========================================================= */

html.budania-dark-mode
.header-search-inner {

	background: var(--header-background);

}


/* =========================================================
   37. DARK MODE - SUBMENU
========================================================= */

html.budania-dark-mode
.primary-menu .sub-menu {

	background: var(--header-background);

}


/* =========================================================
   38. SCREEN READER
========================================================= */

.screen-reader-text {

	position: absolute;

	width: 1px;

	height: 1px;

	padding: 0;

	margin: -1px;

	overflow: hidden;

	clip: rect(0, 0, 0, 0);

	white-space: nowrap;

	border: 0;

}


/* =========================================================
   39. SCREEN READER FOCUS
========================================================= */

.screen-reader-text:focus {

	position: fixed;

	top: 10px;

	left: 10px;

	z-index: 999999;

	width: auto;

	height: auto;

	padding: 12px 16px;

	margin: 0;

	overflow: visible;

	clip: auto;

	white-space: normal;

	background: var(--header-background);

	color: var(--header-text);

	border-radius: 8px;

	box-shadow:
		0 5px 20px rgba(0, 0, 0, 0.15);

}


/* =========================================================
   40. TABLET
========================================================= */

@media (max-width: 1024px) {

	.site-header {

		padding: 12px 15px;

	}


	.site-header-inner {

		padding: 10px 14px;

		gap: 15px;

	}


	.primary-menu > li > a {

		padding-left: 10px;

		padding-right: 10px;

		font-size: 13px;

	}


	.site-description {

		display: none;

	}

}


/* =========================================================
   41. MOBILE
========================================================= */

@media (max-width: 768px) {

	.site-header {

		padding: 10px 12px;

	}


	.site-header-inner {

		padding: 10px 12px;

		border-radius: 15px;

	}


	.site-branding {

		flex: 1;

	}


	.site-logo img {

		max-width: 48px;

		max-height: 48px;

	}


	.site-title {

		font-size: 17px;

	}


	.primary-navigation {

		position: absolute;

		top: calc(100% + 8px);

		left: 12px;

		right: 12px;

		display: none;

		padding: 10px;

		background: var(--header-background);

		border: 1px solid var(--header-border);

		border-radius: 15px;

		box-shadow: var(--header-shadow);

	}


	.primary-navigation.is-open {

		display: block;

	}


	.primary-menu {

		flex-direction: column;

		align-items: stretch;

		justify-content: flex-start;

		gap: 3px;

	}


	.primary-menu > li {

		width: 100%;

	}


	.primary-menu > li > a {

		justify-content: flex-start;

		width: 100%;

		min-height: 44px;

		padding: 12px 13px;

	}


	.primary-menu .sub-menu {

		position: static;

		display: none;

		min-width: 0;

		margin: 4px 0 4px 10px;

		padding: 4px;

		box-shadow: none;

		opacity: 1;

		visibility: visible;

		transform: none;

	}


	.primary-menu li:hover > .sub-menu,

	.primary-menu li:focus-within > .sub-menu {

		display: block;

	}


	.mobile-menu-toggle {

		display: flex;

	}


	.header-actions {

		gap: 5px;

	}


	.header-action,

	.mobile-menu-toggle {

		width: 38px;

		height: 38px;

	}


	.header-search {

		padding-left: 12px;

		padding-right: 12px;

	}

}


/* =========================================================
   42. SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

	.site-header {

		padding: 8px;

	}


	.site-header-inner {

		padding: 8px 10px;

	}


	.site-logo img {

		max-width: 42px;

		max-height: 42px;

	}


	.site-title {

		font-size: 16px;

	}


	.header-actions {

		gap: 4px;

	}


	.header-search-inner form {

		flex-direction: column;

		align-items: stretch;

	}


	.header-search-inner input[type="submit"] {

		width: 100%;

	}


}


/* =========================================================
   43. REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

	.site-header *,
	.site-header *::before,
	.site-header *::after {

		transition: none !important;

		animation: none !important;

		scroll-behavior: auto !important;

	}

}