/* TMA Notification Bar
 * Brand colors: background #ffd140 (yellow), text #121b46 (navy)
 * Font: Roboto (assumes Roboto is already loaded by the site; see README)
 */

.tma-notification-bar {
	--tma-nb-bg: #ffd140;
	--tma-nb-text: #121b46;

	box-sizing: border-box;
	width: 100%;
	background-color: var(--tma-nb-bg);
	color: var(--tma-nb-text);
	font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
	/* Fixed and stacked above the header, so both stay pinned to the
	   viewport together while scrolling — no gap ever opens between
	   them. `top` defaults to 0 here but is set by JS to match wherever
	   the header naturally starts (0, or lower if stacked below a
	   logged-in WordPress admin bar), so the bar stacks correctly above
	   it either way. z-index sits just above a typical Divi header
	   (commonly ~99999) but below WordPress's own admin bar (~99999–
	   110000) so the admin bar, if present, still renders on top. */
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100000;
	overflow: hidden;
	max-height: 0;
	opacity: 0;
	transition: max-height 0.35s ease, opacity 0.25s ease, top 0.35s ease;
}

.tma-notification-bar.is-visible {
	opacity: 1;
	/* max-height is set inline by JS to the bar's real height so the
	   reveal/collapse animates smoothly regardless of content length. */
}

.tma-notification-bar * {
	box-sizing: border-box;
}

.tma-notification-bar__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 12px 20px;
	max-width: 90%;
	margin: 0 auto;
	padding: 14px 0 14px 20px; /* left gutter matches other site content; right clears the close button */
	text-align: left;
}

.tma-notification-bar__icon {
	width: 24px;
	height: 24px;
	flex-shrink: 0;
	object-fit: contain;
}

.tma-notification-bar__message {
	font-size: 16px;
	line-height: 1.5;
	color: var(--tma-nb-text);
}

.tma-notification-bar__message p {
	margin: 0;
	color: inherit;
	font-size: inherit;
}

.tma-notification-bar__message a {
	color: var(--tma-nb-text);
	text-decoration: underline;
}

/* Matches the site's real button styling exactly (copied from the live
   button's own CSS), rather than inheriting Divi's .et_pb_button class —
   fully self-contained, and every property is !important so nothing
   from Divi's own (often broad, element-level) button/link CSS can leak
   through and partially override it. */
.tma-notification-bar__button {
	flex-shrink: 0 !important;
	white-space: nowrap !important;
	display: inline-flex !important;
	align-items: center !important;
	text-decoration: none !important;
	cursor: pointer !important;

	opacity: 1 !important;
	font-family: 'Roboto', Helvetica, Arial, Lucida, sans-serif !important;
	font-weight: 700 !important;
	font-size: 16px !important;
	letter-spacing: 2px !important;
	color: #ffffff !important;
	background-color: #121b46 !important;
	padding-top: 6px !important;
	padding-right: 17px !important;
	padding-bottom: 6px !important;
	padding-left: 17px !important;
	border-width: 0px !important;
	border-style: solid !important;
	border-radius: 50px !important;
	box-shadow: none !important;
	transition: all .3s !important;
	text-transform:uppercase
}

.tma-notification-bar__button:hover,
.tma-notification-bar__button:focus-visible {
	    color: #121b46 !important;
    background-color: #5987da !important;

}

/* Icon after the button text, via Divi's own icon font. Content is set
   per icon choice below — content: none removes it (and its margin)
   entirely for the "None" option. */
.tma-notification-bar__button::after {
	font-family: ETmodules !important;
	font-weight: 400 !important;
	font-size: 15px !important;
	margin-left: 8px !important;
	line-height: 1 !important;
}

.tma-notification-bar__button--icon-heart::after     { content: '\e030' !important; }
.tma-notification-bar__button--icon-arrow::after      { content: '\24' !important; }
.tma-notification-bar__button--icon-calendar::after   { content: '\e023' !important; }
.tma-notification-bar__button--icon-linkedin::after   { content: '\e0cb' !important; }
.tma-notification-bar__button--icon-caution::after    { content: '\73' !important; }
.tma-notification-bar__button--icon-gift::after       { content: '\e008' !important; }
.tma-notification-bar__button--icon-download::after   { content: '\e004' !important; }
.tma-notification-bar__button--icon-none::after       { content: none !important; margin-left: 0 !important; }

.tma-notification-bar__close {
	position: absolute;
	top: 50%;
	right: 16px;
	transform: translateY(-50%);
	background: transparent;
	border: none;
	padding: 8px;
	margin: 0;
	cursor: pointer;
	color: var(--tma-nb-text);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0.7;
	transition: opacity 0.15s ease;
}

.tma-notification-bar__close:hover,
.tma-notification-bar__close:focus-visible {
	opacity: 1;
}

.tma-notification-bar__close:focus-visible {
	outline: 2px solid var(--tma-nb-text);
	outline-offset: 2px;
}

@media (max-width: 600px) {
	.tma-notification-bar__inner {
		padding: 12px 0 12px 16px;
		gap: 8px 14px;
	}

	.tma-notification-bar__message {
		font-size: 13.5px;
	}

	.tma-notification-bar__close {
		right: 10px;
	}
}