/* ==========================================================================
   Site notifications (inc/notifications.php): announcement bar, front page
   hero card and popup. Uses the flexible.css tokens and components.
   ========================================================================== */

/* Animatable so the bar (and everything offset by it) collapses smoothly. */
@property --announce-h {
	syntax: '<length>';
	inherits: true;
	initial-value: 0px;
}

/* --------------------------------------------------------------------------
   Announcement bar
   Its height is reserved in CSS from the first paint (body.has-announce is
   set server-side), so it never pushes the page down after load. The fixed
   header sits below it and slides up to the top as the bar scrolls away
   (--djp-scroll is set by js/notifications.js).
   -------------------------------------------------------------------------- */

body.has-announce {
	--announce-h: 44px;
	transition: --announce-h .35s ease;
}
@media (max-width: 600px) {
	body.has-announce { --announce-h: 60px; } /* room for two lines */
}
html.djp-off-bar body.has-announce,
body.has-announce.announce-closed { --announce-h: 0px; }

body.has-announce header.site-header { top: max(0px, calc(var(--announce-h) - var(--djp-scroll, 0px))); }
body.has-announce.site-header-offset { padding-top: calc(var(--site-header-h) + var(--announce-h)); }
body.has-announce.site-header-overlay { padding-top: var(--announce-h); }
body.has-announce.home .flex-hero {
	min-height: calc(100vh - var(--announce-h));
	min-height: calc(100svh - var(--announce-h));
}

.djp-announce {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1001;
	display: flex;
	align-items: center;
	justify-content: center;
	height: var(--announce-h);
	padding: 0 56px;
	overflow: hidden;
	background: var(--flex-purple-dark, #32234a);
	color: #fff;
	font-family: var(--flex-font, 'Open Sans', sans-serif);
	font-size: 14px;
	line-height: 1.4;
	-webkit-font-smoothing: antialiased;
}
html.djp-off-bar .djp-announce,
.djp-announce[hidden] { display: none; }

.djp-announce__text {
	display: -webkit-box;
	margin: 0;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	color: #ebe5f0;
	text-align: center;
}
.djp-announce .djp-announce__link {
	margin-left: 10px;
	color: #fff;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-color: rgba(255, 255, 255, .45);
	white-space: nowrap;
}
.djp-announce .djp-announce__link:hover { text-decoration-color: #fff; color: #fff; }

.djp-announce__close,
.djp-hero-card__close,
.djp-popup__close {
	position: absolute;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	font-family: inherit;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	transition: background .2s ease, color .2s ease;
}
.djp-announce__close {
	top: 50%;
	right: 10px;
	transform: translateY(-50%);
	color: #ebe5f0;
}
.djp-announce__close:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.djp-announce__close:focus-visible,
.djp-announce__link:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

@media (max-width: 600px) {
	.djp-announce { padding: 0 48px 0 16px; font-size: 13px; justify-content: flex-start; }
	.djp-announce__text { text-align: left; }
	.djp-announce__link { margin-left: 6px; }
}

/* --------------------------------------------------------------------------
   Hero card (front page hero, in the page flow)
   -------------------------------------------------------------------------- */

.flex-hero--has-notice {
	flex-direction: column;
	justify-content: flex-end;
	align-items: stretch;
}
.flex-hero--has-notice .flex-hero__inner { padding-bottom: 28px; }

.djp-hero-card {
	position: relative;
	z-index: 1;
	align-self: flex-start;
	width: calc(100% - 48px);
	max-width: 400px;
	margin: 0 24px 32px;
	padding: 22px 52px 24px 24px;
	border-radius: 3px;
	background: #fff;
	box-shadow: 0 12px 32px rgba(31, 29, 31, .22);
	color: var(--flex-text, #3a3a3a);
	transition: opacity .3s ease, transform .3s ease;
}
html.djp-off-hero .djp-hero-card,
.djp-hero-card[hidden] { display: none; }
.djp-hero-card.is-dismissed { opacity: 0; transform: translateY(8px); }

.djp-hero-card__label {
	margin: 0 0 8px;
	color: var(--flex-purple, #4e306c);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 2.5px;
	text-transform: uppercase;
}
.djp-hero-card__heading {
	margin: 0 0 6px;
	color: var(--flex-text, #3a3a3a);
	font-size: 20px;
	font-weight: 600;
	line-height: 1.3;
}
.djp-hero-card__text {
	margin: 0 0 14px;
	color: var(--flex-muted, #7a7580);
	font-size: 14.5px;
	line-height: 1.55;
}
.djp-hero-card__link {
	color: var(--flex-purple, #4e306c);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .5px;
	text-decoration: none;
}
.djp-hero-card__link:hover { text-decoration: underline; }
.djp-hero-card__link:focus-visible { outline: 2px solid var(--flex-purple, #4e306c); outline-offset: 3px; }

.djp-hero-card__close {
	top: 10px;
	right: 10px;
	color: var(--flex-muted, #7a7580);
}
.djp-hero-card__close:hover { background: var(--flex-tint, #f4f1f7); color: var(--flex-text, #3a3a3a); }
.djp-hero-card__close:focus-visible,
.djp-popup__close:focus-visible { outline: 2px solid var(--flex-purple, #4e306c); outline-offset: 1px; }

/* Desktop: right edge lines up with the header's "Get in touch" button
   (the header has 48px side padding), bottom edge with the bottom of the
   last line of hero text (its bottom margin is removed so the hero's 52px
   bottom padding is the shared baseline). */
@media (min-width: 1024px) {
	.flex-hero--has-notice .flex-hero__inner { padding-bottom: 52px; }
	.flex-hero--has-notice .flex-hero__inner > :last-child { margin-bottom: 0; }
	.flex-hero--has-notice .flex-hero__heading { max-width: calc(100% - 420px); }
	.djp-hero-card {
		position: absolute;
		right: 48px;
		bottom: 56px; /* 52px + the text's half-leading, so it meets the glyphs, not the line box */
		width: 360px;
		margin: 0;
	}
}

/* --------------------------------------------------------------------------
   Popup: a smaller version of the front page "The way we think…" media +
   text section (image, eyebrow, light heading, muted copy, solid button).
   Bottom-right card on desktop, bottom sheet on mobile. No overlay.
   -------------------------------------------------------------------------- */

.djp-popup {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 1100;
	width: 380px;
	max-width: calc(100vw - 48px);
	max-height: calc(100vh - 48px);
	overflow: auto;
	overscroll-behavior: contain;
	border-radius: 3px;
	background: #fff;
	box-shadow: 0 24px 60px rgba(31, 29, 31, .24), 0 2px 8px rgba(31, 29, 31, .08);
	color: var(--flex-text, #3a3a3a);
	font-family: var(--flex-font, 'Open Sans', sans-serif);
	-webkit-font-smoothing: antialiased;
	opacity: 0;
	transform: translateY(24px);
	transition: opacity .3s ease, transform .45s cubic-bezier(.2, .7, .2, 1);
}
.djp-popup[hidden] { display: none; }
.djp-popup.is-open { opacity: 1; transform: none; }

.djp-popup__media img {
	display: block;
	width: 100%;
	height: 190px;
	object-fit: cover;
	object-position: center 30%;
	border-radius: 3px 3px 0 0;
}

.djp-popup__copy { padding: 26px 28px 28px; }
.djp-popup .djp-popup__label { margin-bottom: 10px; font-size: 12px; }
.djp-popup .djp-popup__heading {
	margin: 0 0 12px;
	font-size: 24px;
	line-height: 1.3;
}
.djp-popup__text {
	margin: 0 0 22px;
	color: var(--flex-muted, #7a7580);
	font-size: 15px;
	line-height: 1.6;
}
.djp-popup__btn:focus-visible { outline: 2px solid var(--flex-purple, #4e306c); outline-offset: 3px; }

.djp-popup__close {
	top: 10px;
	right: 10px;
	z-index: 1;
	background: rgba(255, 255, 255, .92);
	color: var(--flex-text, #3a3a3a);
	box-shadow: 0 1px 4px rgba(31, 29, 31, .15);
}
.djp-popup__close:hover { background: #fff; color: var(--flex-purple, #4e306c); }

.djp-popup-live {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

@media (max-width: 600px) {
	.djp-popup {
		right: 0;
		bottom: 0;
		left: 0;
		width: 100%;
		max-width: none;
		max-height: 80vh;
		border-radius: 14px 14px 0 0;
		transform: translateY(100%);
	}
	.djp-popup__media img { height: 150px; border-radius: 14px 14px 0 0; }
	.djp-popup__copy { padding: 22px 20px 24px; }
	.djp-popup .djp-popup__heading { font-size: 22px; }
	.djp-popup__btn { display: block; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
	body.has-announce,
	.djp-hero-card,
	.djp-popup { transition: none; }
	.djp-popup { transform: none; }
}