/*
 * WordPress layer.
 *
 * Everything here is written for this theme. It extends the ported design to
 * the elements WordPress produces that the original Joomla site never emitted
 * (blocks, captions, galleries, pagination, comments), so that a page or post
 * created in the editor comes out looking like the rest of the site.
 */

/* ---------------------------------------------------------------
   Type stacks
   The licensed kits are loaded first and win. These variables name
   the same stacks the design uses, for the rules added below.
   --------------------------------------------------------------- */

:root {
	--ab-display: din-condensed, "Oswald", "Barlow Condensed", "Arial Narrow", sans-serif;
	--ab-text: 'DIN Next LT W01 Light', "Barlow", "Helvetica Neue", Helvetica, Arial, sans-serif;
	--ab-text-medium: 'DIN Next LT W01 Medium', "Barlow", "Helvetica Neue", Helvetica, Arial, sans-serif;
	--ab-text-italic: 'DIN Next LT W01 Italic', "Barlow", "Helvetica Neue", Helvetica, Arial, sans-serif;
	--ab-rule: #000;
}

/* ---------------------------------------------------------------
   Accessibility
   --------------------------------------------------------------- */

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: #fff;
	clip: auto !important;
	clip-path: none;
	color: #000;
	display: block;
	font-size: 16px;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

a:focus-visible,
button:focus-visible {
	outline: 2px solid #000;
	outline-offset: 2px;
}

/* ---------------------------------------------------------------
   Editor content: match the site's article typography
   The design styles .item-page.static p only; these carry the same
   treatment across the other elements the block editor can produce.
   --------------------------------------------------------------- */

.entry-content ul,
.entry-content ol,
.entry-content dl,
.entry-content table {
	font-family: var(--ab-text);
	font-size: 20px;
	line-height: 28px;
	color: #000;
	font-weight: normal;
}

.entry-content ul,
.entry-content ol {
	margin: 0 0 18px;
	padding-left: 22px;
}

.entry-content li {
	margin-bottom: 4px;
}

.entry-content strong,
.entry-content b {
	font-family: var(--ab-text-medium);
	font-weight: normal;
}

.entry-content em,
.entry-content i {
	font-family: var(--ab-text-italic);
	font-style: normal;
	font-weight: normal;
}

.entry-content a {
	color: #000;
	text-decoration: underline;
}

.entry-content a:hover {
	text-decoration: none;
}

.entry-content blockquote {
	border-left: 1px solid var(--ab-rule);
	padding: 0 0 12px 15px;
	margin: 0 0 18px;
	font-size: inherit;
}

.entry-content blockquote p:last-child {
	margin-bottom: 0;
}

.entry-content table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 18px;
}

.entry-content th,
.entry-content td {
	border-bottom: 1px solid var(--ab-rule);
	padding: 6px 8px;
	text-align: left;
	vertical-align: top;
}

.entry-content th {
	font-family: var(--ab-text-medium);
	font-weight: normal;
}

.entry-content code,
.entry-content pre {
	font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
	font-size: 15px;
}

.entry-content pre {
	overflow-x: auto;
	padding: 12px;
	border: 1px solid var(--ab-rule);
	margin-bottom: 18px;
}

.entry-content hr,
.entry-content .wp-block-separator {
	border: 0;
	border-top: 1px solid var(--ab-rule);
	margin: 5px 0;
	height: 0;
}

/* ---------------------------------------------------------------
   Images, captions, galleries
   --------------------------------------------------------------- */

.entry-content img {
	max-width: 100%;
	height: auto;
}

.entry-content figure {
	margin: 0 0 18px;
	max-width: 100%;
}

.entry-content figcaption,
.wp-caption-text {
	font-family: var(--ab-text);
	font-size: 15px;
	line-height: 20px;
	color: #000;
	margin-top: 6px;
}

.alignleft {
	float: left;
	margin: 0 20px 12px 0;
	max-width: 50%;
}

.alignright {
	float: right;
	margin: 0 0 12px 20px;
	max-width: 50%;
}

.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.alignwide,
.alignfull {
	max-width: 100%;
}

.entry-content .wp-block-gallery {
	margin-bottom: 18px;
}

/* Keep embeds inside the column. */
.entry-content iframe,
.entry-content embed,
.entry-content object,
.entry-content video {
	max-width: 100%;
}

.entry-content .wp-block-embed__wrapper {
	position: relative;
}

.entry-content .wp-embed-aspect-16-9 .wp-block-embed__wrapper {
	padding-top: 56.25%;
}

.entry-content .wp-embed-aspect-16-9 .wp-block-embed__wrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* Clear floats at the end of an article. */
.entry-content::after {
	content: "";
	display: table;
	clear: both;
}

/* ---------------------------------------------------------------
   Pagination and post navigation
   --------------------------------------------------------------- */

.pagination,
.navigation.pagination,
.post-navigation {
	clear: both;
	padding: 24px 0 40px;
	font-family: var(--ab-display);
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: 22px;
}

.navigation.pagination .nav-links,
.post-navigation .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	align-items: baseline;
}

.post-navigation .nav-links {
	justify-content: space-between;
}

.navigation a,
.post-navigation a {
	color: #000;
	text-decoration: none;
}

.navigation a:hover,
.post-navigation a:hover {
	color: #fff;
	background-color: #000;
}

.navigation .page-numbers.current {
	color: #fff;
	background-color: #000;
	padding: 0 6px;
}

/* ---------------------------------------------------------------
   Back-to-top: only once the page has been scrolled
   --------------------------------------------------------------- */

#totop {
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
}

#totop.is-visible {
	opacity: 1;
	pointer-events: auto;
}

/* ---------------------------------------------------------------
   Comments
   --------------------------------------------------------------- */

.comments-area {
	clear: both;
	padding-top: 24px;
	font-family: var(--ab-text);
}

.comments-area .comment-list {
	list-style: none;
	padding: 0;
}

.comments-area input[type="text"],
.comments-area input[type="email"],
.comments-area input[type="url"],
.comments-area textarea {
	width: 100%;
	max-width: 100%;
	border: 1px solid var(--ab-rule);
	padding: 6px 8px;
	font-family: var(--ab-text);
}

/* ---------------------------------------------------------------
   Admin bar offset
   --------------------------------------------------------------- */

body.admin-bar #totop {
	margin-top: 32px;
}

/* ---------------------------------------------------------------
   Reduced motion
   The menu unfold and the slideshow cross-fade are decorative, so
   they are dropped for viewers who ask for less movement.
   --------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

	.collapsing {
		transition: none;
	}

	.carousel.carousel-fade .item,
	.carousel .item,
	.image-backdrop,
	#totop {
		transition: none;
	}
}

/* -------------------------------------------------------------------------
 * Slideshow arrow fallback
 *
 * The design sets the carousel arrows as the letters "G" and "g" in Monotype's
 * licensed "Zapf Essentials W05 Arrows One" dingbat face. If that kit does not
 * load, the letters render literally and the slideshow shows a G and a g.
 * theme.js adds .no-zapf-arrows when the face is unavailable; then suppress the
 * letter and draw a chevron of the same weight in its place.
 * ---------------------------------------------------------------------- */

.no-zapf-arrows .carousel-control .icon-prev::before,
.no-zapf-arrows .carousel-control .icon-next::before {
	content: '';
	display: block;
	width: 0.42em;
	height: 0.42em;
	border-style: solid;
	border-width: 0.07em 0.07em 0 0;
	border-color: currentColor;
}

.no-zapf-arrows .carousel-control .icon-prev::before {
	transform: rotate(-135deg);
}

.no-zapf-arrows .carousel-control .icon-next::before {
	transform: rotate(45deg);
	margin-left: 0;
}

/* The letter glyphs sat on a text baseline; the drawn arrows do not, so give
   them their own box and centre it on the control. */
.no-zapf-arrows .carousel-control .icon-prev,
.no-zapf-arrows .carousel-control .icon-next {
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

/* -------------------------------------------------------------------------
 * Previous/next pager chevrons
 *
 * The old site drew these with FontAwesome 3, which is not part of the
 * rebuild - the design only ever used it for these two glyphs, so they are
 * drawn here instead of carrying a whole icon font for them.
 * ---------------------------------------------------------------------- */

.pager.pagenav .icon-chevron-left,
.pager.pagenav .icon-chevron-right {
	display: inline-block;
	width: 0.42em;
	height: 0.42em;
	border-style: solid;
	border-width: 0.09em 0.09em 0 0;
	border-color: currentColor;
	vertical-align: baseline;
	position: relative;
	top: -0.06em;
}

.pager.pagenav .icon-chevron-left {
	transform: rotate(-135deg);
	margin-right: 0.15em;
}

.pager.pagenav .icon-chevron-right {
	transform: rotate(45deg);
	margin-left: 0.15em;
}