:root {
	--dark-color1: #000000;
	--dark-color1-lighter: #2c2c2c;
	--light-color1: #ffffff;
	--light-color1-darker: #bcbcbc;
	--minimal-margin: 20px;
	--content-padding: 60px;
	--content-padding-hor: 60px;
	--content-padding-ver: 80px;
	--heading-over-image-amt: -100px;

	/* Mobile */
	--content-padding-mob: 20px;
	--content-padding-hor-mob: 20px;
	--content-padding-ver-mob: 40px;
}

html {
	box-sizing: border-box;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	background-color: var(--dark-color1);
	font-size: 10px;
	font-weight: 100;
}

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

body {

}

h1,
h2,
h3,
h4,
h5 {
	color: var(--light-color1);
}

a {
	color: var(--light-color1-darker);
	text-decoration: none;
}

a:hover {
	color: var(--light-color1);
}

a.active-language {
	text-decoration: underline;
}

.language-font {
	font-size: 0.9rem;
	margin-left: 5px;
	/* color: rgba(188, 188, 188, 0.1); */
}

#language-sep {
	color: rgba(188, 188, 188, 0.1);
}

.language-font:hover {
	color: rgba(188, 188, 188, 1);
}

.language-menu {
	display: flex;

	justify-content: center;
}

.language-small-menu {
	display: flex;
	justify-content: center;
}

.language-small-menu>a {
	margin-right: 1rem;
	margin-left: 1rem;
	line-height: 0.7rem;
}

.container {
	display: grid;
	grid-template-columns: auto 1200px auto;
	grid-template-rows: .2fr .1fr minmax(1fr, auto) 1fr 1fr;
	grid-template-areas:
		"header header header"
		"sidebar-left hor-line sidebar-right"
		"sidebar-left nav sidebar-right"
		"sidebar-left content sidebar-right"
		"footer footer footer";

}

@media (max-width: 1200px) {
	.container {
		grid-template-columns: 20px 1fr 20px;
	}
}

@media (max-width: 768px) {
	.container {
		grid-template-columns: 20px 1fr 20px;
	}
}

.sidebar {
	background-color: var(--dark-color1);
}

.sidebar-left {
	grid-area: sidebar-left;
}

.sidebar-right {
	grid-area: sidebar-right;
}

.header {
	grid-area: header;
	display: grid;
	justify-items: center;
	gap: 30px;
	background-color: var(--dark-color1);
	margin-top: var(--minimal-margin);
	min-height: 10vh;
}

#hr-style-one { color: #fff; border: 0; height: 1px; background: #000; background-image: linear-gradient(to right, #333, #ccc, #333); }

.header-image {
	height: 15vh;
	width: auto;
	/* style-uikit.css resets every img to
	     aspect-ratio: attr(width)/attr(height); object-fit: cover
	   so a width/height attribute pair that disagrees with the file crops the
	   logo instead of letterboxing it. The templates now emit the rendition's
	   real dimensions, which makes the box correct on its own - this is the
	   backstop, because a logo should never be cropped. */
	object-fit: contain;
}

#hr-style-two { margin-bottom: var(--minimal-margin); grid-area: hor-line; border: 0; height: 1px; background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(255, 255, 255, 0.5), rgba(0, 0, 0, 0)); }

@media (max-width: 978px) {
	.header-image {
		max-width: 60vw;
	}

	.menu {
		display: none;
	}

	.mobile {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
}

nav {
	grid-area: nav;
}

.nav-active > a {
	color: var(--light-color1);
}

@media (min-width: 979px) {
	.menu {
		display: flex;
		/* wrapping is the safety valve: one menu item too many now costs a
		   second row instead of running off the end of the bar */
		flex-wrap: wrap;
		align-items: center;
		font-size: 1em;
		justify-content: center;
		background-color: var(--dark-color1-lighter);
		/* the old fixed 70px per item is what made the bar overflow; the gap
		   gives items room when there is room and gives it back when there is not */
		column-gap: clamp(24px, 4.5vw, 70px);
		row-gap: 8px;
		margin: 0px;
		min-height: 60px;
		padding: 10px 0;
	}
		.mobile {
		display: none;
	}
}

.menu li {
	text-transform: uppercase;
	list-style: none;
	color: var(--light-color1);
}

.front-grid-system {
	grid-area: content;
	display: grid;
	background-color:  var(--light-color1);
	grid-template-columns: 1fr;
	/* grid-template-rows: 0.5fr 0.05fr 0.5fr; */
}

/* @media screen and (max-width: 768px) { */
/* 	.front-grid-system { */
/* 		/1* grid-template-rows: 0.2fr 0.01fr 0.5fr;	*/ */
/* 	} */
/* } */

.image-container {
	display: flex;
	height: 400px;
	margin-bottom: -20px;
	background-color: var(--dark-color1);
}

@media (min-width: 768px) {
	.image-container-single {
		grid-column: 1 / 4;
		justify-content: center;
	}

	.image-container-double-left {
		/* width: 35vw; */
		grid-column: span 1;
		/* justify-content: end; */
	}

	.image-container-double-right {
		grid-column: span 2;
		justify-content: end;
	}

}

.middle-container {
	display: flex;
	max-height: 10px;
}

#mid-container-back {
	background-color: var(--dark-color1-lighter);
}

.f-image {
	/* `width: 100%` here was immediately overridden by a second `width: 100vw`.
	   That declaration never actually took effect - style-uikit.css caps every
	   img at max-width: 100%, so the used width clamped back to the container
	   either way. Dropped as dead weight rather than as a fix; behaviour is
	   unchanged. (The rendered box measures ~1.144x this width at every
	   viewport - that is the uk-animation-kenburns scale transform, not overflow.) */
	width: 100%;
	height: 100%;
	min-height: 30vh;
	max-height: 80vh;
	-o-object-fit: cover;
    object-fit: cover;
}

.f-header {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: .7rem;
	margin: 0;
	font-size: 20px;
}

.f-news-box {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	/*grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));*/
	grid-template-rows: 1fr;
}

.newsletter-box {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 200px;
}

@media screen and (max-width: 768px) {
	.header {
		display: flex;
		height: 1vh;
		padding: var(--content-padding);
		justify-content: center;
		margin-top: 0px;
	}

	.header-image {
		height: 10vh;
	}

	#header-homelink {
		align-self: center;
	}

	div.menu {
		margin-bottom: var(--minimal-margin);
		padding: 0;
	}

	#hr-style-two {
		display: none;
	}


	.f-news-box {
		grid-template-columns: 1fr;
		grid-template-rows: 1fr 1fr 1fr;
	}
}
@media screen and (max-width: 768px) {
	.header-image {
		height: 10vh;
		padding-left: calc(var(--content-padding)/2);
	}
	h1.header-title {
		display: none;
	}
}

.f-image-box {
	/*width: 100%;*/
	height: 100%;
	min-height: 400px;
	max-height: 400px;
	-o-object-fit: cover;
    object-fit: cover;
}

footer {
	grid-area: footer;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: .5fr 1fr 0.2fr;
	grid-template-areas: "footer-upperleft footer-uppermiddle footer-upperright"
						 "footer-left footer-middle footer-right"
						 "footer-bottomleft footer-bottommiddle footer-bottomright";
	background-color: var(--dark-color1);
}

footer div {
	justify-self: center;
	align-self: center;
}

.footer-dev {
	grid-area: footer-right;
	margin-top: 120px;
	font-size: small;
}

.footer-image {
	grid-area: footer-middle;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.footer-image> a > img {
	height: 15rem;
}

.footer-image > p {
	font-size: 1rem;
	display: flex;
	justify-content: center;
}

.footer-address {
	grid-area: footer-left;
}

.footer-social {
	grid-area: footer-right;
	display: grid;
	grid-template-columns: 2fr 1fr;
	font-size: 3em;
}

@media screen and (max-width: 768px) {
	footer {
		grid-template-columns: 1fr;
		grid-template-rows: auto auto auto auto;
		grid-template-areas: "footer-social"
							 "footer-address"
							 "footer-image"
							 "footer-dev";
		row-gap: 2rem;
		padding: 2rem 0;
	}

	footer div p {
		text-align: center;
	}

	.footer-social {
		grid-area: footer-social;
	}

	.footer-address {
		grid-area: footer-address;
	}

	.footer-image {
		grid-area: footer-image;
	}

	.footer-dev {
		grid-area: footer-dev;
		margin-top: 0;
	}
}

/* Page specific */

.page-specific {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr;
}

.page-specific-image {
	/* display: grid; */
}

.page-specific-title {
	padding-top: var(--content-padding);
	/*padding-bottom: var(--content-padding);*/
}

.page-specific h1 {
	/* The title sits in .page-specific, which is OUTSIDE the centred 900px
	   column (so the hero image stays full-bleed). A flat 60px therefore lands
	   the title 150px left of the body text, which is indented by the column's
	   own centring offset PLUS .block-container's 60px. Re-add that offset here
	   so both start on the same line; it collapses to 0 once the page column is
	   narrower than 900px and the two agree again on their own. */
	padding-left: calc(max(0px, (100% - 900px) / 2) + var(--content-padding));
	margin: 0;
}

/* Wagtail blocks */

.block-container {
	padding: var(--content-padding-ver) var(--content-padding-hor) var(--content-padding-ver) var(--content-padding-hor);
	background-color: white;
	/*background-image: linear-gradient( white,  white, white, white, white, white, white, lightgrey, grey);*/
	color: var(--dark-color1);
}

.block-heading {
	font-size: 4rem;
}

.block-paragraph p {
	font-size: 1rem;
}

.block-paragraph h2 {font-size: 4rem; color:var(--dark-color1);}
.block-paragraph h3 {font-size: 3rem; color:var(--dark-color1);}
.block-paragraph h4 {font-size: 2rem; color:var(--dark-color1);}

.event_label {
    position: relative;
    padding: 0;
    margin-top: -150px;
    z-index: 1;
}


@media (max-width: 768px) {
	.block-container {
		/* Horizontal padding tracks the 10vw inset of the .page-specific-title
		   card below, so the body text starts on the card's left edge instead of
		   near it - this was a hand-fitted 80px, which only matched 10vw at the
		   very top of the band. Vertical was 20px, i.e. TIGHTER than the 40px the
		   narrower <=450px band uses; stepped to the same 40px so the ladder from
		   80px desktop down runs one way. */
		padding: var(--content-padding-ver-mob) 10vw;
	}

	.page-specific {
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: 1fr 0.2fr;
	}

	.page-specific img {
		grid-column: 1 / 3;
		grid-row: 1 / 3;
		overflow: hidden;
	}

	.f-image {
		/* The hero's height comes from its aspect ratio at the column width, so
		   the narrower the screen the shorter it gets - a phone always bottoms
		   out on the min-height floor. At 30vh that made the hero fill 86% of a
		   desktop screen but only 34% of a phone's. Raised so it keeps a
		   comparable presence; object-fit: cover takes the extra height out of
		   the sides, so a very wide photo is centre-cropped more on mobile. */
		min-height: 50vh;
	}

	.page-specific-title {
		margin-left: 10vw;
		margin-right: 10vw;
		margin-top: var(--heading-over-image-amt);
		background-color: var(--light-color1);
		padding-top: 35px;
		padding-bottom: 0;
		z-index: 1;
	}

	.page-specific h1 {
		margin: 0;
		/* The card is already inset 10vw; the base rule's own 60px on top of that
		   pushed the title in past the body text. The card supplies the gutter. */
		padding-left: 0;
	}

	/* COPYRIGHT notice overlay on image */

	.page-specific .copyright {
		grid-column: 1;
		grid-row: 1;
		z-index: 999;
		opacity: 0;
		/*
		duration | timing-function | delay |
		iteration-count | direction | fill-mode | play-state | name */
		animation-name: copyright-slide;
		animation-delay: 2s;
		animation-duration: 3s;
		animation-fill-mode: forwards;
		/*background: linear-gradient(transparent,transparent,transparent,transparent, black);*/
	}

	.page-specific .copyright p {
		color: var(--dark-color1);
		text-transform: uppercase;
		/* The min-width: 768px twin of this rule plates the credit in white; this
		   one was missing that single line, so below 768px the dark text sat
		   straight on the photo and was unreadable over a light image. */
		background-color: var(--light-color1);
		padding: 5px;
	}

	@keyframes copyright-slide {
		0% {
			font-size: 0px;
		}

		90% {
			font-size: 0px;
		}

		100% {
			margin-left: 0px;
			opacity: 1;
			font-size: inherit;
		}
	}
}

@media (min-width: 768px) {
	.page-specific .copyright {
		grid-column: 2;
		grid-row: 2;
		z-index: 999;
		opacity: 0;
		align-self: end;
		/*background: linear-gradient(transparent,transparent,transparent,transparent, black);*/
		animation-name: copyright-slide;
		animation-duration: 1s;
		animation-delay: 2s;
		animation-fill-mode: forwards;
	}

	.page-specific .copyright p {
		color: var(--dark-color1);
		text-transform: uppercase;
		background-color: var(--light-color1);
		padding: 5px;
	}

	@keyframes copyright-slide {
		0% {
			margin-left: 400px;
			font-size: 0px;
		}

		90% {
			font-size: 0px;
		}

		100% {
			margin-left: 0px;
			opacity: 1;
			font-size: inherit;
		}
	}
}

@media screen and (max-width: 450px){
	.block-container {
		padding: var(--content-padding-ver-mob) var(--content-padding-hor-mob) var(--content-padding-ver-mob) var(--content-padding-hor-mob);
	}

	.page-specific-title {
		margin-left: 0px;
		margin-right: 0px
	}

	.page-specific h1 {
		padding: var(--content-padding-ver-mob) var(--content-padding-hor-mob) var(--content-padding-ver-mob) var(--content-padding-hor-mob);
	}
}


.return-link {
	padding: var(--content-padding-hor);
}

/* The return link sits in the same column as .block-container, so it has to
   step its gutter down on the same breakpoints - otherwise it keeps the full
   60px and drifts right of the body text (60px of padding on a 320px box at
   the narrow end). Declared after the media blocks above, so it needs its own.
   Mirrors .block-container's horizontal values exactly. */
@media (max-width: 768px) {
	.return-link {
		padding: var(--content-padding-hor) 10vw;
	}
}

@media screen and (max-width: 450px) {
	.return-link {
		padding: var(--content-padding-hor) var(--content-padding-hor-mob);
	}
}

/* FORM */

.pab-form input,
.pab-form textarea {
	background-color: var(--light-color1);
}

.pab-form input:focus,
.pab-form textarea:focus {
	background-color: var(--light-color1);
}

/* PDF canvas */
#the-document {
    margin-right: auto;
    margin-left: auto;
    display: block;
}

/*
 * RichTextField
 * Formatting
 *
*/

.richtext-image.full-width {
    width: 100%;
}

.richtext-image.right {
    float: right;
    margin-left: var(--minimal-margin);
    margin-bottom: var(--minimal-margin);
    margin-top: var(--minimal-margin);
}

.richtext-image.left {
    float: left;
    margin-right: var(--minimal-margin);
    margin-bottom: var(--minimal-margin);
    margin-top: var(--minimal-margin);
}


/* ==========================================================================
   Carousel - a black theatre band that breaks out of the article column
   ========================================================================== */

/* Safety net for the break-out below: nothing escapes the 1200px page column. */
.front-grid-system {
	overflow-x: clip;
}

/*
 * structure.html uses `uk-container-small`, which is only a UIkit *size*
 * modifier (max-width: 900px) - the centring lives on the base `uk-container`
 * class it never applies, so the article column sat flush against the left of
 * the 1200px page column. Centring it is what lets the band below sit square
 * on the page.
 */
.front-grid-system > .uk-container-small {
	/* In grid, auto margins suppress the default `stretch`, so the column would
	   size to fit-content (capped at 900px) and its width would track the length
	   of the text inside it - the same article measured 767px in the news index
	   and 236px on its own page. `width: 100%` restores the fill so the column
	   is a stable 900px everywhere. */
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}

.pab-carousel {
	--page-column: 1200px;
	--page-gutter: 0px;
	--bleed: min(100vw - 2 * var(--page-gutter), var(--page-column));
	width: var(--bleed);
	max-width: none;
	/* <figure> carries UA and UIkit margins - state all four ourselves so the
	   band's position never depends on which stylesheet loaded last. */
	margin: 0 0 0 calc(50% - var(--bleed) / 2);
	/* Inset so a full-height picture sits inside the black, not flush against
	   the white block above it. */
	padding: 28px 0 26px;
	background-color: var(--dark-color1);
	color: var(--light-color1);
}

/* Below 1200px .container switches to `20px 1fr 20px` - respect those gutters. */
@media (max-width: 1200px) {
	.pab-carousel {
		--page-gutter: 20px;
	}
}

.pab-carousel .uk-slideshow-items > li {
	background-color: var(--dark-color1);
}

/*
 * Picture on top, caption underneath, both inside the slide's own box. This
 * sits on an inner element on purpose - putting `display: grid` on the <li>
 * would out-specify UIkit's `:not(.uk-active) { display: none }` and paint
 * every slide at once.
 */
.pab-carousel__frame {
	display: grid;
	grid-template-rows: 1fr auto;
	height: 100%;
}

.pab-carousel__link {
	display: block;
	min-height: 0;
}

.pab-carousel__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
}

/* Caption sits under the picture, inside the band - it never covers the photo. */
.pab-carousel__caption {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 6px 24px;
	min-height: 56px;
	padding: 14px var(--content-padding-hor);
}

.pab-carousel__caption p {
	margin: 0;
	font-size: 15px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.92);
}

.pab-carousel__credit {
	font-size: 11px;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.45);
	white-space: nowrap;
}

.pab-carousel__footer {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 24px;
	padding: 4px var(--content-padding-hor) 0;
}

.pab-carousel__counter {
	font-size: 11px;
	letter-spacing: 0.12em;
	font-variant-numeric: tabular-nums;
	color: rgba(255, 255, 255, 0.5);
}

/* Slidenav + dotnav read as grey-on-grey by default; brighten them for black. */
.pab-carousel .uk-slidenav {
	padding: 12px 16px;
	color: rgba(255, 255, 255, 0.6);
}

.pab-carousel .uk-slidenav:hover,
.pab-carousel .uk-slidenav:focus {
	color: var(--light-color1);
}

.pab-carousel .uk-slidenav:focus-visible,
.pab-carousel .uk-dotnav > * > :focus-visible {
	outline: 2px solid var(--light-color1);
	outline-offset: 3px;
}

.pab-carousel .uk-dotnav > * > * {
	border-color: rgba(255, 255, 255, 0.45);
}

.pab-carousel .uk-dotnav > .uk-active > * {
	background-color: var(--light-color1);
	border-color: var(--light-color1);
}

@media (max-width: 768px) {
	.pab-carousel__caption,
	.pab-carousel__footer {
		padding-left: var(--content-padding-hor-mob);
		padding-right: var(--content-padding-hor-mob);
	}
}

@media (prefers-reduced-motion: reduce) {
	.pab-carousel *,
	.pab-carousel *::before,
	.pab-carousel *::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}

/* Per-slide caption background, chosen by the editor on the slide itself */
.carousel-paragraph.dark-background p {
	background: rgba(0, 0, 0, 0.75);
	padding: 4px 8px;
	color: rgba(255, 255, 255, 0.95);
}

.carousel-paragraph.light-background p {
	background: rgba(255, 255, 255, 0.70);
	padding: 4px 8px;
	color: rgba(0, 0, 0, 0.95);
}

/* "Searching..." status on the search forms, revealed by search.js on submit */
.search-status {
	display: none;
	align-items: center;
	gap: 8px;
	justify-content: center;
	padding-top: 12px;
	opacity: 0.7;
}

.uk-search.is-searching .search-status {
	display: flex;
}

.uk-search.is-searching .uk-search-input {
	opacity: 0.5;
}

.search-status-text {
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-size: 0.8rem;
}

/*
 * Calendar block (schedule-x). It sits on the white .block-container, so the
 * theme is the site's black-on-white rather than schedule-x's purple.
 *
 * The break-out is not cosmetic: schedule-x falls back to its narrow
 * month-agenda view once the calendar element is under ~700px, and
 * structure.html's article column is 545px - so the month grid could never
 * appear on a desktop. Widen to the page column the way .pab-carousel does.
 * Below that width the agenda view is the better UI anyway.
 */
.pab-calendar {
	--page-column: 1200px;
	--page-gutter: 0px;
	--bleed: min(100vw - 2 * var(--page-gutter), var(--page-column));
	width: var(--bleed);
	max-width: none;
	margin-left: calc(50% - var(--bleed) / 2);
	/* Breaking out of .block-container also breaks out of its padding, so the
	   calendar would otherwise sit flush against the blocks above and below.
	   Vertical room always; the side inset waits for a wide enough viewport,
	   below which --page-gutter is already holding it off the edges.
	   box-sizing is border-box, so this comes out of the width. */
	padding: 40px 0;

	--sx-color-primary: var(--dark-color1);
	--sx-color-on-primary: var(--light-color1);
	--sx-color-primary-container: var(--dark-color1);
	--sx-color-on-primary-container: var(--light-color1);
	--sx-color-surface: var(--light-color1);
	--sx-color-surface-container: #f2f2f2;
	--sx-color-surface-container-low: #f7f7f7;
	--sx-color-surface-container-high: #ebebeb;
	--sx-color-background: var(--light-color1);
	--sx-color-on-background: var(--dark-color1);
	--sx-color-on-surface: var(--dark-color1);
	--sx-color-outline: #767676;
	--sx-color-outline-variant: #d8d8d8;
	--sx-internal-color-text: var(--dark-color1);
	--sx-rounding-small: 0;
	--sx-rounding-extra-small: 0;
	color: var(--dark-color1);
}

/* Below 1200px .container switches to `20px 1fr 20px` - respect those gutters. */
@media (max-width: 1200px) {
	.pab-calendar {
		--page-gutter: 20px;
	}
}

/*
 * Side inset, so the calendar lines up with the text column instead of running
 * wider than it. Held back to wide viewports on purpose: schedule-x drops to
 * its narrow agenda view once the element is under ~700px, and taking 120px off
 * a bleed of `100vw - 40px` would cross that line on a small laptop.
 */
@media (min-width: 1000px) {
	.pab-calendar {
		padding-left: var(--content-padding-hor);
		padding-right: var(--content-padding-hor);
	}
}

.pab-calendar__grid {
	height: 640px;
}

.pab-calendar .sx__calendar {
	border: 1px solid var(--dark-color1);
}

.pab-calendar .sx__calendar-header {
	border-bottom: 1px solid var(--dark-color1);
}

.pab-calendar .sx__month-grid-day__header-day-name,
.pab-calendar .sx__month-agenda-day__header-day-name {
	letter-spacing: 0.12em;
	color: var(--dark-color1);
	opacity: 0.55;
}

/* Every event links to the page its date came from */
.pab-calendar .sx__month-grid-event,
.pab-calendar .sx__month-agenda-event,
.pab-calendar .sx__date-grid-event {
	cursor: pointer;
	border-radius: 0;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: 11px;
}

.pab-calendar .sx__month-grid-event:hover,
.pab-calendar .sx__month-agenda-event:hover {
	opacity: 0.75;
}

.pab-calendar .sx__month-grid-event:focus-visible,
.pab-calendar .sx__month-agenda-event:focus-visible {
	outline: 2px solid var(--dark-color1);
	outline-offset: 2px;
}

.pab-calendar__legend {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	list-style: none;
	padding: 0;
	margin: 16px 0 0 0;
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.pab-calendar__swatch {
	display: inline-block;
	width: 12px;
	height: 12px;
	margin-right: 8px;
	vertical-align: -1px;
	border: 1px solid var(--dark-color1);
}

.pab-calendar__swatch--news {
	background-color: var(--dark-color1);
}

.pab-calendar__swatch--projects {
	background-color: var(--light-color1-darker);
}

.pab-calendar__fallback {
	list-style: none;
	padding: 0;
}

.pab-calendar__fallback-date {
	font-variant-numeric: tabular-nums;
	margin-right: 12px;
	opacity: 0.6;
}

@media (max-width: 768px) {
	.pab-calendar {
		padding-top: var(--content-padding-ver-mob);
		padding-bottom: var(--content-padding-ver-mob);
	}

	.pab-calendar__grid {
		height: 520px;
	}
}