/**
 * Desk9 Notice Planner – frontend styles.
 *
 * All colors/spacings come from CSS custom properties that are generated
 * from validated settings. The font family is inherited from the theme.
 */

.d9notice {
	box-sizing: border-box;
	font-family: inherit;
	font-size: var(--d9notice-font-size, 15px);
	font-weight: var(--d9notice-font-weight, 400);
	line-height: var(--d9notice-line-height, 1.5);
	color: var(--d9notice-color, #fff);
}

.d9notice *,
.d9notice *::before,
.d9notice *::after {
	box-sizing: inherit;
}

.d9notice a {
	color: var(--d9notice-link-color, currentColor);
	text-decoration: underline;
}

.d9notice a:focus-visible,
.d9notice button:focus-visible {
	outline: 2px solid currentcolor;
	outline-offset: 2px;
}

.d9notice p {
	margin: 0 0 0.5em;
}

.d9notice p:last-child {
	margin-bottom: 0;
}

.d9notice ul,
.d9notice ol {
	margin: 0 0 0.5em;
	padding-left: 1.4em;
	text-align: left;
}

/* ------------------------------------------------------------------ */

/* Announcement bar                                                     */

/* ------------------------------------------------------------------ */

.d9notice--bar {
	position: relative;
	width: auto;
	margin: var(--d9notice-margin, 0);
	background: var(--d9notice-surface, var(--d9notice-background, #1d4ed8));
	border: var(--d9notice-outline, 0 solid transparent);
	border-radius: var(--d9notice-border-radius, 0);
	box-shadow: var(--d9notice-shadow, none);
	z-index: var(--d9notice-z-index, 99990);
}

/* The accent rail sits on the edge that faces the page content, the
   hairline on the opposite one, so a bar reads the same top or bottom. */
.d9notice--bar.d9notice--top {
	border-top: var(--d9notice-rail, 0 solid transparent);
	border-bottom: var(--d9notice-edge, 0 solid transparent);
}

.d9notice--bar.d9notice--bottom {
	border-top: var(--d9notice-edge, 0 solid transparent);
	border-bottom: var(--d9notice-rail, 0 solid transparent);
}

.d9notice--bar .d9notice__inner {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--d9notice-gap, 16px);
	max-width: var(--d9notice-max-width, none);
	margin: 0 auto;
	padding: var(--d9notice-padding-y, 12px) var(--d9notice-padding-x, 16px);
	text-align: var(--d9notice-text-align, center);
}

.d9notice--align-left .d9notice__inner {
	justify-content: flex-start;
}

.d9notice--align-center .d9notice__inner {
	justify-content: center;
}

.d9notice--align-right .d9notice__inner {
	justify-content: flex-end;
}

/* Status dot: only style sets that define one switch it on. */
.d9notice--has-dot .d9notice__inner::before {
	content: "";
	flex: 0 0 auto;
	align-self: center;
	width: var(--d9notice-dot-size, 8px);
	height: var(--d9notice-dot-size, 8px);
	border-radius: 50%;
	background: var(--d9notice-dot, transparent);
}

/* Behaviors */

.d9notice--sticky {
	position: sticky;
}

.d9notice--sticky.d9notice--top {
	top: 0;
}

.d9notice--sticky.d9notice--bottom {
	bottom: 0;
}

.d9notice--fixed {
	position: fixed;
	left: 0;
	right: 0;
}

.d9notice--fixed.d9notice--top {
	top: var(--d9notice-offset-top, 0);
}

.d9notice--fixed.d9notice--bottom {
	bottom: var(--d9notice-offset-bottom, 0);
}

/* Without JavaScript, fixed bars fall back to the normal document flow so
   they can never cover content that the visitor cannot un-cover. */
html:not(.d9notice-js) .d9notice--fixed {
	position: relative;
	top: auto;
	bottom: auto;
}

/* Push content: JS measures the bar height into these properties. */
body.d9notice-push-top {
	padding-top: var(--d9notice-push-top, 0);
}

body.d9notice-push-bottom {
	padding-bottom: var(--d9notice-push-bottom, 0);
}

/* Admin bar offsets for logged-in users. */
body.admin-bar .d9notice--fixed.d9notice--top,
body.admin-bar .d9notice--sticky.d9notice--top {
	top: calc(var(--d9notice-offset-top, 0px) + 32px);
}

@media screen and (max-width: 782px) {
	body.admin-bar .d9notice--fixed.d9notice--top,
	body.admin-bar .d9notice--sticky.d9notice--top {
		top: calc(var(--d9notice-offset-top, 0px) + 46px);
	}
}

/* Bar content pieces */

.d9notice__media {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
}

.d9notice__image {
	display: block;
	width: var(--d9notice-image-size, 32px);
	height: var(--d9notice-image-size, 32px);
	max-width: 100%;
	object-fit: contain;
	border-radius: 2px;
}

.d9notice--image-top .d9notice__inner {
	flex-direction: column;
}

.d9notice--image-right .d9notice__media {
	order: 3;
}

.d9notice__body {
	flex: 1 1 auto;
	min-width: 0;
}

.d9notice__headline {
	margin: 0 0 0.15em;
	font-size: 1.05em;
	font-weight: var(--d9notice-headline-weight, 700);
	line-height: 1.3;
	color: inherit;
}

.d9notice__message {
	overflow-wrap: break-word;
}

.d9notice__actions {
	display: flex;
	flex: 0 0 auto;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	justify-content: var(--d9notice-button-align, center);
}

/* Buttons are anchors, so these rules are scoped with .d9notice to outrank
   the ".d9notice a" link rule above. Without the extra class the buttons
   inherit the link colour and end up unreadable on their own background. */
.d9notice .d9notice__button {
	display: inline-block;
	padding: 0.45em 1em;
	border: 0 solid transparent;
	border-radius: var(--d9notice-button-radius, 4px);
	box-shadow: var(--d9notice-button-shadow, none);
	font-size: 0.95em;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.d9notice .d9notice__button:hover,
.d9notice .d9notice__button:focus-visible {
	text-decoration: none;
}

.d9notice .d9notice__button--primary {
	background: var(--d9notice-button-background, #fff);
	color: var(--d9notice-button-color, #1d4ed8);
}

.d9notice .d9notice__button--primary:hover,
.d9notice .d9notice__button--primary:focus-visible {
	background: var(--d9notice-button-hover-background, var(--d9notice-button-background, #fff));
	color: var(--d9notice-button-hover-color, var(--d9notice-button-color, #1d4ed8));
}

.d9notice .d9notice__button--secondary {
	background: var(--d9notice-button2-background, transparent);
	color: var(--d9notice-button2-color, currentColor);
	border: var(--d9notice-button2-border, 0 solid transparent);
}

.d9notice .d9notice__button--secondary:hover,
.d9notice .d9notice__button--secondary:focus-visible {
	background: var(--d9notice-button2-hover-background, var(--d9notice-button2-background, transparent));
	color: var(--d9notice-button2-hover-color, var(--d9notice-button2-color, currentColor));
}

.d9notice__close {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	margin-left: auto;
	padding: 0;
	border: 0;
	border-radius: 4px;
	background: transparent;
	color: var(--d9notice-close-color, currentColor);
	cursor: pointer;
}

.d9notice__close:hover {
	opacity: 0.8;
}

.d9notice--bar.d9notice--align-center .d9notice__close {
	margin-left: 0;
}

/* ------------------------------------------------------------------ */

/* Fullscreen notice                                                    */

/* ------------------------------------------------------------------ */

.d9notice--fullscreen {
	position: fixed;
	inset: 0;
	display: flex;
	justify-content: center;
	overflow-y: auto;
	padding: 24px;
	z-index: var(--d9notice-z-index, 99990);
}

.d9notice--fullscreen.d9notice--valign-top {
	align-items: flex-start;
}

.d9notice--fullscreen.d9notice--valign-center {
	align-items: center;
}

.d9notice--fullscreen.d9notice--valign-bottom {
	align-items: flex-end;
}

.d9notice__overlay {
	position: fixed;
	inset: 0;
	background: var(--d9notice-overlay-color, rgb(17 24 39 / 80%));
}

.d9notice__dialog {
	position: relative;
	width: 100%;
	max-width: var(--d9notice-max-width, 640px);
	max-height: calc(100vh - 48px);
	overflow-y: auto;
	margin: auto 0;
	padding: calc(var(--d9notice-padding-y, 12px) * 2) calc(var(--d9notice-padding-x, 16px) * 2);
	background: var(--d9notice-surface, var(--d9notice-background, #1d4ed8));
	border: var(--d9notice-outline, 0 solid transparent);
	border-left: var(--d9notice-rail, var(--d9notice-outline, 0 solid transparent));
	border-radius: var(--d9notice-border-radius, 8px);
	text-align: var(--d9notice-text-align, center);
	box-shadow: var(--d9notice-shadow, 0 10px 40px rgb(0 0 0 / 30%));
}

.d9notice--fullscreen .d9notice__close {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 44px;
	height: 44px;
}

.d9notice--fullscreen .d9notice__media {
	justify-content: center;
	margin-bottom: var(--d9notice-gap, 16px);
}

.d9notice--fullscreen .d9notice__headline {
	font-size: 1.4em;
	margin-bottom: 0.4em;
}

.d9notice--fullscreen .d9notice__actions {
	margin-top: calc(var(--d9notice-gap, 16px) * 1.25);
	justify-content: var(--d9notice-button-align, center);
}

body.d9notice-scroll-lock {
	overflow: hidden;
}

/* ------------------------------------------------------------------ */

/* Animations (respect prefers-reduced-motion)                          */

/* ------------------------------------------------------------------ */

@keyframes d9notice-fade {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes d9notice-slide-down {
	from {
		transform: translateY(-12px);
		opacity: 0;
	}

	to {
		transform: translateY(0);
		opacity: 1;
	}
}

@keyframes d9notice-slide-up {
	from {
		transform: translateY(12px);
		opacity: 0;
	}

	to {
		transform: translateY(0);
		opacity: 1;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.d9notice--animate-fade {
		animation: d9notice-fade 0.3s ease both;
	}

	.d9notice--animate-slide.d9notice--top,
	.d9notice--animate-slide.d9notice--fullscreen {
		animation: d9notice-slide-down 0.3s ease both;
	}

	.d9notice--animate-slide.d9notice--bottom {
		animation: d9notice-slide-up 0.3s ease both;
	}
}

/* Dismissed state (set by JS before removal). */
.d9notice--dismissed {
	display: none;
}

/* ------------------------------------------------------------------ */

/* Small screens                                                        */

/* ------------------------------------------------------------------ */

@media (max-width: 600px) {
	.d9notice--bar .d9notice__inner {
		flex-direction: column;
		align-items: stretch;
		text-align: center;
		padding-right: 44px;
	}

	.d9notice__actions {
		justify-content: center;
	}

	.d9notice__close {
		position: absolute;
		top: 4px;
		right: 4px;
		margin-left: 0;
	}

	.d9notice--fullscreen {
		padding: 12px;
	}

	.d9notice__dialog {
		max-height: calc(100vh - 24px);
	}
}