/**
 * 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;
}

/* Theme global styles target bare elements (":root :where(p)") and would
   recolour or resize the text inside a notice. Everything inherits from
   the notice itself instead. */
.d9notice p,
.d9notice li,
.d9notice strong,
.d9notice em,
.d9notice span {
	color: inherit;
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
}

.d9notice .d9notice__headline {
	color: inherit;
}

.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 {
	/* Side padding of the card: at least the set's horizontal padding, or
	   more so the content stays within the content width on wide screens.
	   Percentages resolve where the property is used (the card). */
	--d9notice-side: max(var(--d9notice-padding-x, 16px), calc((100% - var(--d9notice-max-width, 100%)) / 2));

	position: relative;
	width: auto;

	/* An inset bar floats with a gap on all sides; the section paints that
	   gap so it can carry a colour of its own (the "frame"). */
	padding: var(--d9notice-margin, 0);
	background: var(--d9notice-frame, transparent);
	z-index: var(--d9notice-z-index, 99990);
}

/* The card: surface, edges, corners and shadow live on the inner box,
   which always spans the section so a full width bar stays full width. */
.d9notice--bar .d9notice__inner {
	position: relative;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--d9notice-gap, 16px);
	padding: var(--d9notice-padding-y, 12px) var(--d9notice-side);
	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);
	text-align: var(--d9notice-text-align, center);
}

/* 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 .d9notice__inner {
	border-top: var(--d9notice-rail, 0 solid transparent);
	border-bottom: var(--d9notice-edge, 0 solid transparent);
}

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

.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));
}

/* The close button never takes part in the flex flow: as a flex item a
   long message would push it onto its own row below the text. It is
   positioned absolutely at the right edge of the bar instead. The default
   "corner" position centres it on the first text line, so a single-line
   bar still reads as centred; "middle" centres it on the whole bar. */
.d9notice__close {
	position: absolute;
	top: max(0px, calc(var(--d9notice-padding-y, 12px) + (var(--d9notice-line-height, 1.5) * var(--d9notice-font-size, 15px) - var(--d9notice-close-size, 36px)) / 2));
	right: max(4px, calc(var(--d9notice-padding-x, 16px) - 8px));
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--d9notice-close-size, 36px);
	height: var(--d9notice-close-size, 36px);
	padding: 0;
	border: 0;
	border-radius: 4px;
	background: transparent;
	color: var(--d9notice-close-color, currentColor);
	cursor: pointer;
}

.d9notice__close svg {
	width: calc(var(--d9notice-close-size, 36px) * 0.44);
	height: calc(var(--d9notice-close-size, 36px) * 0.44);
}

.d9notice__close:hover {
	opacity: 0.8;
}

.d9notice--bar.d9notice--close-middle .d9notice__close {
	top: 50%;
	transform: translateY(-50%);
}

/* Circle style: a translucent disc in the button colour behind the icon,
   so it works on every palette without a second colour. */
.d9notice--close-circle .d9notice__close {
	border-radius: 50%;
}

.d9notice--close-circle .d9notice__close::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: currentcolor;
	opacity: 0.12;
}

.d9notice--close-circle .d9notice__close:hover::before {
	opacity: 0.2;
}

.d9notice--close-circle .d9notice__close svg {
	position: relative;
}

/* Reserve room for the close button. Centred bars pad both sides equally
   so the text stays centred within the bar. */
.d9notice--bar.d9notice--dismissible .d9notice__inner {
	min-height: var(--d9notice-close-size, 36px);
	padding-right: calc(var(--d9notice-side) + var(--d9notice-close-size, 36px));
}

.d9notice--bar.d9notice--dismissible.d9notice--align-center .d9notice__inner {
	padding-left: calc(var(--d9notice-side) + var(--d9notice-close-size, 36px));
}

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

/* 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: calc(var(--d9notice-close-size, 36px) + 8px);
	height: calc(var(--d9notice-close-size, 36px) + 8px);
	transform: none;
}

/* Keep the first line of a dismissible card clear of the close button. */
.d9notice--fullscreen.d9notice--dismissible .d9notice__dialog {
	padding-right: max(calc(var(--d9notice-padding-x, 16px) * 2), calc(var(--d9notice-close-size, 36px) + 24px));
	padding-left: max(calc(var(--d9notice-padding-x, 16px) * 2), calc(var(--d9notice-close-size, 36px) + 24px));
}

.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;
	}

	.d9notice--bar.d9notice--dismissible .d9notice__inner {
		padding-right: calc(var(--d9notice-close-size, 36px) + 8px);
		padding-left: calc(var(--d9notice-close-size, 36px) + 8px);
	}

	.d9notice__actions {
		justify-content: center;
	}

	.d9notice__close {
		right: 4px;
	}

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

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