/**
 * Public-facing styles for Estland Top Bar
 *
 * @package    EstlandTopBar
 * @subpackage EstlandTopBar/public
 */

/* Ensure admin bar buttons are not affected by top bar or theme button styles */
/* Protect all admin bar form elements and buttons from theme/plugin styles */
#wpadminbar .adminbar-button,
#wpadminbar input[type="submit"].adminbar-button,
#wpadminbar input[type="submit"],
#wpadminbar button.adminbar-button,
#wpadminbar button,
#wpadminbar input.adminbar-input,
#wpadminbar input[type="text"],
#wpadminbar input[type="search"] {
	/* Reset any inherited styles from theme or plugin */
	display: inline-block !important;
	vertical-align: baseline !important;
	flex-shrink: initial !important;
	flex-grow: initial !important;
	flex-basis: initial !important;
	align-items: initial !important;
	justify-content: initial !important;
	text-align: initial !important;
	width: auto !important;
	height: auto !important;
	min-width: initial !important;
	min-height: initial !important;
	max-width: initial !important;
	max-height: initial !important;
	margin: 0 !important;
	padding: 0 8px !important;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !important;
	font-size: 11px !important;
	font-weight: normal !important;
	line-height: 2 !important;
	text-decoration: none !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	cursor: pointer !important;
	border-radius: 3px !important;
	box-shadow: none !important;
	transition: background 0.05s ease-in-out !important;
	opacity: 1 !important;
	transform: none !important;
	position: static !important;
	top: auto !important;
	right: auto !important;
	bottom: auto !important;
	left: auto !important;
}

/* Specific styles for admin bar submit buttons */
#wpadminbar .adminbar-button,
#wpadminbar input[type="submit"].adminbar-button,
#wpadminbar input[type="submit"] {
	background: #0073aa !important;
	border: 1px solid #0073aa !important;
	color: #fff !important;
}

#wpadminbar .adminbar-button:hover,
#wpadminbar input[type="submit"].adminbar-button:hover,
#wpadminbar input[type="submit"]:hover,
#wpadminbar .adminbar-button:focus,
#wpadminbar input[type="submit"].adminbar-button:focus,
#wpadminbar input[type="submit"]:focus {
	background: #005a87 !important;
	border-color: #005a87 !important;
	color: #fff !important;
	opacity: 1 !important;
}

/* Ensure admin bar search input is not affected */
#wpadminbar #adminbarsearch,
#wpadminbar #adminbarsearch input[type="text"],
#wpadminbar #adminbarsearch input[type="search"] {
	background: #23282d !important;
	border: 1px solid #32373c !important;
	color: #a7aaad !important;
	padding: 0 8px !important;
	font-size: 13px !important;
	line-height: 2.15384615 !important;
	height: 24px !important;
	border-radius: 3px !important;
	box-shadow: none !important;
}

/* Prevent any Enfold avia-button styles from affecting admin bar */
#wpadminbar .avia-button,
#wpadminbar .avia-button *,
#wpadminbar a.avia-button,
#wpadminbar button.avia-button,
#wpadminbar input.avia-button {
	/* Reset all Enfold button styles */
	display: inline-block !important;
	background: #0073aa !important;
	border: 1px solid #0073aa !important;
	color: #fff !important;
	padding: 0 8px !important;
	font-size: 11px !important;
	line-height: 2 !important;
	text-decoration: none !important;
	cursor: pointer !important;
	border-radius: 3px !important;
	box-shadow: none !important;
	margin: 0 !important;
	width: auto !important;
	height: auto !important;
	min-width: initial !important;
	min-height: initial !important;
}

.esttb-top-bar {
	position: fixed;
	left: 0;
	right: 0;
	width: 100%;
	padding: 0;
	margin: 0;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	transition: transform 0.3s ease-in-out;
	z-index: 1000; /* Lower z-index to not cover menus */
}

/* Ensure mobile menus appear below the top bar and above other content */
/* When top bar is active, push mobile menu down */
.esttb-has-top-bar .avia-mobile-menu,
.esttb-has-top-bar .mobile_menu_toggle,
.esttb-has-top-bar .avia-mobile,
.esttb-has-top-bar .mobile_menu,
.esttb-has-top-bar .avia-menu-mobile,
.esttb-has-top-bar .mobile-menu,
.esttb-has-top-bar .mobile-menu-container,
.esttb-has-top-bar .mobile-menu-wrapper,
.esttb-has-top-bar header .avia-mobile-menu,
.esttb-has-top-bar header .mobile_menu_toggle,
.esttb-has-top-bar header .avia-mobile,
.esttb-has-top-bar header .mobile_menu,
.esttb-has-top-bar header .avia-menu-mobile,
.esttb-has-top-bar header .mobile-menu,
.esttb-has-top-bar header .mobile-menu-container,
.esttb-has-top-bar header .mobile-menu-wrapper,
.esttb-has-top-bar .header .avia-mobile-menu,
.esttb-has-top-bar .header .mobile_menu_toggle,
.esttb-has-top-bar .header .avia-mobile,
.esttb-has-top-bar .header .mobile_menu,
.esttb-has-top-bar .header .avia-menu-mobile,
.esttb-has-top-bar .header .mobile-menu,
.esttb-has-top-bar .header .mobile-menu-container,
.esttb-has-top-bar .header .mobile-menu-wrapper {
	z-index: 10001 !important; /* Higher than top bar (1000) to ensure mobile menu appears above */
}

/* Mobile menu adjustments - only apply on mobile viewports (below 783px) */
@media screen and (max-width: 782px) {
	/* Target Enfold's mobile menu overlay - adjust top position only */
	/* Enfold uses .av-burger-overlay-scroll for scrolling, not .av-burger-overlay */
	body.esttb-has-top-bar .av-burger-overlay {
		top: 30px !important;
		margin-top: 0 !important;
		/* Don't override transform or overflow - let Enfold handle scrolling */
	}
	
	/* Adjust the scroll container height to account for top bar */
	/* Enfold sets .av-burger-overlay-scroll height to window.innerHeight via JavaScript */
	/* We'll override it with JavaScript, but set a fallback max-height here */
	/* Don't override overflow - let Enfold handle all scrolling behavior */
	body.esttb-has-top-bar .av-burger-overlay .av-burger-overlay-scroll {
		max-height: calc(100vh - 30px) !important;
	}
}

/* Ensure mobile menu overlay/backdrop appears above top bar */
.esttb-has-top-bar .avia-mobile-menu-overlay,
.esttb-has-top-bar .mobile-menu-overlay,
.esttb-has-top-bar .mobile-menu-backdrop,
.esttb-has-top-bar .avia-mobile-menu-backdrop {
	z-index: 10000 !important; /* Just above top bar but below menu */
	margin-top: 85px !important; /* Push overlay down too */
}

.esttb-top-bar.esttb-position-top {
	top: 0;
}

/* Account for WordPress admin bar when logged in */
.admin-bar .esttb-top-bar.esttb-position-top {
	top: 32px !important; /* Default admin bar height - use !important to override inline styles */
}

@media screen and (max-width: 782px) {
	.admin-bar .esttb-top-bar.esttb-position-top {
		top: 46px !important; /* Mobile admin bar height */
	}
}

.esttb-top-bar.esttb-position-bottom {
	bottom: 0;
}

.esttb-top-bar.esttb-hidden {
	transform: translateY(-100%);
}

.esttb-top-bar.esttb-position-bottom.esttb-hidden {
	transform: translateY(100%);
}

#esttb-top-bar .esttb-container {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0.857em 1.429em; /* 12px 20px based on 14px base */
	padding-right: 3.5em; /* Extra padding for dismiss button */
	max-width: 100%;
	margin: 0 auto;
	position: relative;
}

#esttb-top-bar .esttb-content {
	width: 100%;
	text-align: center;
	font-size: 0.875rem; /* 14px */
	line-height: 1.5;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 1.5em;
}

#esttb-top-bar .esttb-content p {
	margin: 0;
	padding: 0;
	display: inline;
}

/* Style links within the announcement message - scoped to top bar only */
#esttb-top-bar .esttb-content a:not(.avia-button) {
	color: inherit;
	text-decoration: underline;
	transition: opacity 0.2s ease;
}

#esttb-top-bar .esttb-content a:not(.avia-button):hover {
	opacity: 0.8;
}

/* Enfold button styling within top bar - scoped to top bar only */
/* Let Enfold's default styles apply - custom CSS can override when needed */
#esttb-top-bar .esttb-content .avia-button {
	display: inline-block;
	vertical-align: middle;
	flex-shrink: 0;
}

#esttb-top-bar .esttb-content .avia-button .avia_iconbox_title {
	display: inline-block;
}

/* Prevent Enfold button styles from affecting header search and other site buttons */
/* Note: Enfold theme's .avia-button styles are global, but we ensure our plugin
   doesn't contribute to affecting buttons outside the top bar by scoping all
   our styles to #esttb-top-bar */

/* Specifically protect header search button from inheriting Enfold .avia-button styles */
/* Target search-related buttons in headers that might have .avia-button class */
header input[type="submit"].avia-button:not(#esttb-top-bar input),
.header input[type="submit"].avia-button:not(#esttb-top-bar input),
.site-header input[type="submit"].avia-button:not(#esttb-top-bar input),
.avia_header input[type="submit"].avia-button:not(#esttb-top-bar input),
header button.avia-button:not(#esttb-top-bar button),
.header button.avia-button:not(#esttb-top-bar button),
.avia_header button.avia-button:not(#esttb-top-bar button),
/* Also target by common search button classes/IDs */
#header_searchsubmit.avia-button:not(#esttb-top-bar #header_searchsubmit),
.header_searchsubmit.avia-button:not(#esttb-top-bar .header_searchsubmit),
.search-submit.avia-button:not(#esttb-top-bar .search-submit),
input.search-submit.avia-button:not(#esttb-top-bar input.search-submit) {
	/* Override Enfold .avia-button styles for header search buttons */
	/* Reset to default button appearance */
	display: inline-block !important;
	vertical-align: baseline !important;
	background: transparent !important;
	border: none !important;
	padding: 0 !important;
	margin: 0 !important;
	font-size: inherit !important;
	line-height: inherit !important;
	color: inherit !important;
	cursor: pointer !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	text-decoration: none !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	opacity: 1 !important;
	transform: none !important;
	position: static !important;
	width: auto !important;
	height: auto !important;
	min-width: initial !important;
	min-height: initial !important;
	max-width: initial !important;
	max-height: initial !important;
	flex-shrink: initial !important;
	flex-grow: initial !important;
	flex-basis: initial !important;
	align-items: initial !important;
	justify-content: initial !important;
}

#esttb-top-bar .esttb-dismiss {
	background: transparent;
	border: none;
	color: inherit;
	font-size: 1.714em; /* 24px relative to 14px base */
	line-height: 1;
	cursor: pointer;
	padding: 0;
	position: absolute;
	right: 0.714em; /* 10px relative to 14px base */
	top: 50%;
	transform: translateY(-50%);
	width: 2.143em; /* 30px relative to 14px base */
	height: 2.143em; /* 30px relative to 14px base */
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0.7;
	transition: opacity 0.2s ease;
	flex-shrink: 0;
}

#esttb-top-bar .esttb-dismiss:hover {
	opacity: 1;
}

#esttb-top-bar .esttb-dismiss:focus {
	outline: 0.143em solid currentColor; /* 2px relative to 14px base */
	outline-offset: 0.143em; /* 2px relative to 14px base */
}

/* Enfold theme compatibility - push content down */
/* Padding will be set dynamically by JavaScript via body.esttb-top-bar-active */

/* Ensure smooth transition when bar appears/disappears */
body {
	transition: padding-top 0.3s ease-in-out, padding-bottom 0.3s ease-in-out;
}

/* Fix: Remove any header margin/padding that might cause gap when admin bar is present */
.admin-bar body.esttb-has-top-bar header,
.admin-bar body.esttb-has-top-bar .header,
.admin-bar body.esttb-has-top-bar .site-header,
.admin-bar body.esttb-has-top-bar .avia_header {
	margin-top: 0 !important;
	padding-top: 0 !important;
}

/* Ensure first content element after top bar has no top margin */
.admin-bar body.esttb-has-top-bar > *:not(#wpadminbar):not(#esttb-top-bar) {
	margin-top: 0 !important;
}

/* More aggressive: Remove margin from all direct children of body when admin bar is present */
.admin-bar body.esttb-has-top-bar > * {
	margin-top: 0 !important;
}

/* But allow the top bar itself to have its positioning */
.admin-bar body.esttb-has-top-bar > #esttb-top-bar {
	margin-top: 0 !important;
}

/* Ensure header wrappers also have no margin on first child */
.admin-bar body.esttb-has-top-bar header > *:first-child,
.admin-bar body.esttb-has-top-bar .header > *:first-child,
.admin-bar body.esttb-has-top-bar .site-header > *:first-child,
.admin-bar body.esttb-has-top-bar .avia_header > *:first-child {
	margin-top: 0 !important;
	padding-top: 0 !important;
}

/* Fix: WordPress adds margin-top: 32px to html when admin bar is present - override it */
/* This is critical - WordPress admin bar adds margin to html which creates the gap */
/* Use highest specificity to ensure this overrides WordPress styles */
html.admin-bar,
.admin-bar html {
	margin-top: 0 !important;
	padding-top: 0 !important;
}

/* Also ensure body has no margin that could create gap */
.admin-bar body {
	margin-top: 0 !important;
}

/* Force remove margin from body's first child element (usually header or wrapper) */
.admin-bar body.esttb-has-top-bar > *:first-of-type:not(#wpadminbar):not(#esttb-top-bar) {
	margin-top: 0 !important;
	padding-top: 0 !important;
}

/* Ensure header and wrappers don't have positioning that creates gap */
.admin-bar body.esttb-has-top-bar header,
.admin-bar body.esttb-has-top-bar .header,
.admin-bar body.esttb-has-top-bar .site-header,
.admin-bar body.esttb-has-top-bar .avia_header {
	position: relative !important;
	top: 0 !important;
	margin-top: 0 !important;
	padding-top: 0 !important;
}

/* Ensure any wrapper divs also have no margin */
.admin-bar body.esttb-has-top-bar > div:not(#wpadminbar):not(#esttb-top-bar) {
	margin-top: 0 !important;
	padding-top: 0 !important;
}

/* Ensure body padding pushes content correctly - no margin conflicts */
.admin-bar body.esttb-has-top-bar {
	margin-top: 0 !important;
	/* Padding will be set by JavaScript via inline style */
}

/* WordPress may add styles to #page or main wrapper - ensure they don't create gaps */
.admin-bar body.esttb-has-top-bar #page,
.admin-bar body.esttb-has-top-bar .site-wrapper,
.admin-bar body.esttb-has-top-bar .wrapper,
.admin-bar body.esttb-has-top-bar main {
	margin-top: 0 !important;
	padding-top: 0 !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
	#esttb-top-bar .esttb-container {
		padding: 0.714em 1.071em; /* 10px 15px relative to 14px base */
		padding-right: 2.857em; /* Extra padding for dismiss button on mobile */
		flex-wrap: wrap;
	}

	#esttb-top-bar .esttb-content {
		font-size: 0.813rem; /* 13px */
		width: 100%;
		margin-bottom: 0.357em; /* 5px relative to 14px base */
		flex-direction: column;
		gap: 1em;
	}

	#esttb-top-bar .esttb-dismiss {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		right: 0.357em; /* 5px relative to 14px base */
		margin: 0;
	}

	#esttb-top-bar .esttb-content .avia-button {
		display: block;
		width: auto;
	}
}