/**
 * Site Notification Component Styles
 */

/* Modal Container */
.site-notification {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0.5rem;
	opacity: 0;
	transition: opacity 0.3s ease;
	overflow-y: auto;
}

.site-notification--open {
	opacity: 1;
}

.site-notification[hidden] {
	display: none;
}

/* Modal Backdrop */
.site-notification__backdrop {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.60);
}

/* Modal Dialog */
.site-notification__dialog {
	position: relative;
	background: var(--color-white, #ffffff);
	border-radius: 1.125rem;
	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
	max-width: 90%;
	width: 100%;
	max-height: calc(100vh - 1rem);
	overflow-y: auto;
	z-index: 1;
}

/* Close Button */
.site-notification__close {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
	line-height: 0;
}

.site-notification__close svg {
	width: 2.25rem;
	height: 2.25rem;
	display: block;
}

/* Modal Content */
.site-notification__content {
	padding: 0.875rem 1.75rem 1.75rem;
	max-height:75vh;
}

/* Headline */
.site-notification__headline {
	color: var(--color-dark-gray, #333);
	text-align: left;
	font-family: var(--font-heading-family);
	font-size: 1.25rem;
	font-weight: 500;
	line-height: 1.625rem;
	letter-spacing: -0.0275rem;
	margin: 0;
}

/* Description */
.site-notification__description {
	color: var(--color-dark-gray, #333);
	font-family: var(--font-body-family);
	font-size: 0.9375rem;
	font-weight: 400;
	line-height: 1.5625rem;
	letter-spacing: -0.01875rem;
	text-align: left;
	margin: 0;
}

.site-notification__text-content {
	display: inline;
	
}

/* Read More Button */
.site-notification__read-more {
	color: var(--color-brand, #320C20);
	font-family: var(--font-body-family);
	font-size: 0.9375rem;
	font-weight: 400;
	line-height: 1.5625rem;
	letter-spacing: -0.01875rem;
	text-decoration-line: underline;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	display: inline;
}

.site-notification__read-more[hidden] {
	display: none;
}

/* ===== Brand Transition Section ===== */
.brand-transition {
	display: flex;
	gap: 4rem;
	margin-bottom: 0;
}

.brand-transition__logo {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

/* Arrow Container */
.brand-transition__arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.brand-transition__arrow svg {
	display: block;
	width: auto;
	height: auto;
}

/* Desktop Arrow (horizontal) */
.arrow-desktop {
	display: inline-block;
}

/* Mobile Arrow (vertical) - hidden by default */
.arrow-mobile {
	display: none;
}

/* ===== Divider Line ===== */
.brand-divider {
	max-width: 34.5rem;
	height: 1px;
	background-color: #D9D9D9;
	margin: 1.625rem auto 1.625rem 0;
}

/* ===== Mobile Responsive (max-width: 767px) ===== */
@media (width <= 767px) {
	.brand-transition {
		flex-direction: column;
		gap: 0.25rem;
	}

	/* Hide desktop arrow, show mobile arrow */
	.arrow-desktop {
		display: none;
	}

	.arrow-mobile {
		display: inline-block;
	}

	/* Adjust logo sizes for mobile */
	.brand-transition__logo svg {
		max-height: 66px;
	}

	.brand-transition__logo:last-child svg {
		max-height: 37px;
    margin-top: 1.25rem;
	}

	/* Adjust divider spacing for mobile */
	.brand-divider {
		margin: 1.5625rem auto;
	}
}

/* Desktop & Tablet (>= 768px) */
@media (width >=768px) {
	.site-notification {
		padding: 1rem;
	}

	.site-notification__dialog {
		min-width: 46.063rem;
		min-height: 26.188rem;
		max-width: 37.5rem;
		max-height: calc(100vh - 2rem);
	}

	.site-notification__close {
		top: 1rem;
		right: 1rem;
	}

	.site-notification__content {
		padding: 2.75rem 5.9375rem 3.5rem 3.625rem;
	}

	.site-notification__inner {
		padding-left: 0.75rem;
	}

	.site-notification__headline {
		line-height: 1.5;
		font-size:22px;
	}
}