/* ==========================================================================
   Utilities
   ========================================================================== */

/* Standard screen-reader-only utility - Joomla core markup uses this class
   in several places (language switcher, blog category heading, the
   password-visibility toggle) expecting Bootstrap to supply it; this
   template doesn't load Bootstrap on the front end, so without this the
   text was rendering fully visible instead of hidden. */
.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* ==========================================================================
   Links & buttons
   ========================================================================== */

a {
	color: var(--pi-color-link);
	transition: color var(--pi-transition-fast);
}

a:hover,
a:focus {
	color: var(--pi-color-accent);
}

.pi-btn,
.btn,
.button,
button,
input.btn {
	display: inline-block;
	border: none;
	border-radius: var(--pi-radius-sm);
	background: var(--pi-color-primary);
	color: #ffffff;
	padding: 7px 14px;
	font-family: var(--pi-font-family);
	transition: background var(--pi-transition-fast);
}

/* Same resting/hover colours as the top menu (see .pi-nav__menu below) -
   primary by default, secondary on hover/focus - kept consistent across
   every button in the template. */
.pi-btn:hover,
.pi-btn:focus,
.btn:hover,
.btn:focus,
.button:hover,
.button:focus {
	background: var(--pi-color-secondary);
	color: #ffffff;
}

/* Secondary/outline variant - for a button that should sit next to a
   primary one (e.g. Reset beside Send) without competing with it. */
.pi-btn--ghost {
	background: transparent;
	color: var(--pi-color-primary);
	border: 1px solid var(--pi-color-border);
}

.pi-btn--ghost:hover,
.pi-btn--ghost:focus {
	background: var(--pi-color-background);
	color: var(--pi-color-secondary);
	border-color: var(--pi-color-secondary);
}

.pi-readmore a {
	font-weight: normal;
}

/* ==========================================================================
   Logo (text fallback)
   ========================================================================== */

/* Shown instead of the logo <img> wherever the backend's "Logo image" param
   is left empty (header, error page, offline page) - site font/primary
   colour, so an unconfigured logo still reads as an intentional design
   choice rather than a missing image. */
.pi-logo-text {
	display: inline-block;
	font-family: var(--pi-font-family);
	font-size: 1.75rem;
	font-weight: 700;
	line-height: 1;
	color: var(--pi-color-primary);
	transition: color .3s ease;
}

/* ==========================================================================
   Headings
   ========================================================================== */

h1 {
	background: var(--pi-color-primary);
	background-image: linear-gradient(to right, var(--pi-color-primary), var(--pi-color-secondary));
	border-radius: var(--pi-radius-md);
	color: #ffffff;
	text-align: center;
	font-weight: bold;
	font-size: 1.125rem;
	line-height: 45px;
	padding-inline: var(--pi-space-4);
	text-shadow: 1px 1px black;
}

/* h1 keeps its original boxed/branded treatment untouched. h2-h6 use a
   lighter, left-aligned treatment instead of repeating that same box, with
   colour (progressively lighter shades of blue, h2 darkest through h6
   lightest) doing most of the work to show rank, backed up by a
   descending size/weight/spacing scale. All colours are pulled from
   --pi-color-primary/secondary/link/accent - the same custom properties
   the backend's Colours tab already writes into - so a site owner's colour
   choices apply here automatically; h5/h6 blend two of those via
   color-mix() rather than needing a whole extra backend field for one more
   shade. */
h2 {
	color: var(--pi-color-primary);
	text-align: left;
	font-weight: bold;
	font-size: 1.0625rem;
	line-height: 1.3;
	border-bottom: 3px solid var(--pi-color-primary);
	margin-block: var(--pi-space-6) var(--pi-space-4);
	padding-block-end: var(--pi-space-2);
}

h3 {
	color: var(--pi-color-secondary);
	text-align: left;
	font-weight: bold;
	font-size: 1rem;
	line-height: 1.3;
	border-bottom: 2px solid var(--pi-color-secondary);
	margin-block: var(--pi-space-5) var(--pi-space-3);
	padding-block-end: var(--pi-space-1);
}

h4 {
	color: var(--pi-color-link);
	text-align: left;
	font-weight: bold;
	font-size: .9375rem;
	line-height: 1.35;
	margin-block: var(--pi-space-4) var(--pi-space-2);
}

h5 {
	color: color-mix(in srgb, var(--pi-color-link) 55%, var(--pi-color-accent) 45%);
	text-align: left;
	font-weight: 600;
	font-size: .875rem;
	line-height: 1.4;
	margin-block: var(--pi-space-3) var(--pi-space-2);
}

h6 {
	color: color-mix(in srgb, var(--pi-color-link) 35%, var(--pi-color-accent) 65%);
	text-align: left;
	font-weight: 600;
	font-size: .75rem;
	line-height: 1.4;
	text-transform: uppercase;
	letter-spacing: .04em;
	margin-block: var(--pi-space-2) var(--pi-space-1);
}

h6 a {
	font-weight: 600;
}

/* ==========================================================================
   Navigation menu
   ========================================================================== */

.pi-nav__menu ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.pi-nav__menu > ul > li > a {
	display: inline-block;
	color: #888888;
	font-family: var(--pi-font-family-nav);
	font-size: .875rem;
	text-transform: uppercase;
	letter-spacing: -.5px;
	padding: var(--pi-space-4);
	margin: var(--pi-space-1);
	border-radius: var(--pi-radius-md);
}

.pi-nav__menu > ul > li:hover > a,
.pi-nav__menu > ul > li > a:focus {
	background: var(--pi-color-secondary);
	color: #ffffff;
}

.pi-nav__menu > ul > li.current > a,
.pi-nav__menu > ul > li.active > a {
	background: var(--pi-color-primary);
	color: #ffffff;
}

.pi-nav__menu li ul {
	position: absolute;
	background: #ffffff;
	border: 1px solid #d9d9d9;
	min-width: 200px;
	padding-block: var(--pi-space-5);
	flex-direction: column;
	z-index: 10;
}

.pi-nav__menu li li a {
	display: block;
	color: #555555;
	padding: var(--pi-space-2) var(--pi-space-4);
	border-block: 1px solid #ffffff;
}

.pi-nav__menu li li:hover a,
.pi-nav__menu li li a:focus {
	background: #f7f7f7;
	border-color: #ededed;
	color: #252525;
}

@media (max-width: 767px) {
	.pi-nav__menu ul,
	.pi-nav__menu li ul {
		flex-direction: column;
		align-items: stretch;
		position: static;
		border: none;
	}
}

/* ==========================================================================
   Language switcher (template override - see html/mod_languages/default.php)
   ========================================================================== */

.pi-lang {
	--pi-lang-icon-size: 20px;
	display: flex;
	align-items: center;
	gap: var(--pi-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.pi-lang__link {
	display: flex;
	align-items: center;
	padding: var(--pi-space-1);
}

.pi-lang__icon {
	display: block;
	height: var(--pi-lang-icon-size);
	width: auto;
	border: none;
	transition: height var(--pi-transition-fast);
}

/* No background here on purpose - only the icon grows to mark the active
   language. */
.pi-lang__item--active .pi-lang__icon {
	height: calc(var(--pi-lang-icon-size) * 1.3);
}

.pi-lang__label {
	font-size: .875rem;
	font-weight: 600;
}

/* ==========================================================================
   Pagination
   ========================================================================== */

.pagination .page-link,
ul.pagination li a,
ul.pagination li span {
	border: 1px solid var(--pi-color-highlight);
	color: var(--pi-color-highlight);
	border-radius: var(--pi-radius-sm);
}

.pagination .page-item.active .page-link,
.pagination .page-link:hover,
.pagination .page-link:focus {
	background: var(--pi-color-highlight);
	border-color: var(--pi-color-highlight);
	color: #ffffff;
	font-weight: bold;
}

.pagination .page-item.disabled .page-link {
	opacity: .7;
}

/* ==========================================================================
   Tags & badges
   ========================================================================== */

.tags a {
	display: inline-block;
	background: var(--pi-color-highlight);
	color: #ffffff;
	border-radius: var(--pi-radius-sm);
	padding: 2px var(--pi-space-2);
	font-size: .8125rem;
}

/* ==========================================================================
   Module chrome
   ========================================================================== */

.pi-module {
	margin-bottom: var(--pi-space-5);
}

.pi-module__title {
	margin-bottom: var(--pi-space-3);
}

/* ==========================================================================
   Blog / article cards
   ========================================================================== */

.pi-article-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pi-space-5);
}

.pi-article-list--columns-2,
.pi-article-list--columns-3,
.pi-article-list--columns-4 {
	display: block;
	column-gap: var(--pi-space-5);
}

.pi-article-list--columns-2 { columns: 2; }
.pi-article-list--columns-3 { columns: 3; }
.pi-article-list--columns-4 { columns: 4; }

@media (max-width: 767px) {
	.pi-article-list--columns-2,
	.pi-article-list--columns-3,
	.pi-article-list--columns-4 {
		columns: 1;
	}
}

.pi-article-card {
	display: flex;
	flex-direction: column;
	flex: 1 1 300px;
	break-inside: avoid;
	margin-bottom: var(--pi-space-5);
}

.pi-article-card__body {
	flex: 1;
	display: flex;
	flex-direction: column;
}

.pi-article-card .pi-readmore {
	margin-top: auto;
}

.pi-article-details {
	list-style: none;
	color: var(--pi-color-muted);
	font-size: .875rem;
	display: flex;
	flex-direction: column;
	gap: var(--pi-space-1);
	padding: 0;
	margin: var(--pi-space-3) 0;
}

.pi-article-details--horizontal {
	flex-direction: row;
	flex-wrap: wrap;
	gap: var(--pi-space-4);
}

.pi-article-tools {
	text-align: end;
}

/* ==========================================================================
   Back-to-top button (progressive enhancement - hidden until js/scroll-top.js
   reveals it after the page has been scrolled down a bit)
   ========================================================================== */

.pi-scroll-top {
	position: fixed;
	inset-inline-end: var(--pi-space-5);
	/* Stays clear of the cookie-consent banner while it's showing -
	   js/scroll-top.js keeps --pi-consent-banner-clearance in sync with its
	   real height (0px once dismissed). */
	inset-block-end: calc(var(--pi-space-5) + var(--pi-consent-banner-clearance, 0px));
	z-index: 200;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 2px solid #ffffff;
	border-radius: 50%;
	background: var(--pi-color-primary);
	color: #ffffff;
	/* Stronger than --pi-shadow-card - the button sits over all sorts of
	   backgrounds (including the dark footer, close in colour to its own
	   navy background), so it needs to read clearly against any of them. */
	box-shadow: 0 4px 14px rgba(0, 0, 0, .4);
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: background var(--pi-transition-fast), opacity var(--pi-transition-base), transform var(--pi-transition-base), inset-block-end var(--pi-transition-base), visibility 0s linear var(--pi-transition-base);
}

/* Same resting/hover colours as every other button (see .pi-btn above) -
   primary by default, secondary on hover/focus. */
.pi-scroll-top:hover,
.pi-scroll-top:focus-visible {
	background: var(--pi-color-secondary);
}

.pi-scroll-top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition: background var(--pi-transition-fast), opacity var(--pi-transition-base), transform var(--pi-transition-base);
}

.pi-scroll-top svg {
	width: 22px;
	height: 22px;
}

@media print {
	.pi-header,
	.pi-footer,
	.pi-scroll-top {
		display: none !important;
	}
}

/* ==========================================================================
   Offline / maintenance page
   ========================================================================== */

.pi-offline {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--pi-color-primary);
	background-image: linear-gradient(to right, var(--pi-color-primary), var(--pi-color-secondary));
	padding: var(--pi-space-5);
}

.pi-offline__card {
	width: 100%;
	max-width: 420px;
	background: #ffffff;
	border-radius: var(--pi-radius-lg);
	box-shadow: var(--pi-shadow-card-hover);
	padding: var(--pi-space-6);
}

.pi-offline__header {
	text-align: center;
	margin-bottom: var(--pi-space-5);
}

.pi-offline__header img {
	max-width: 220px;
	margin-inline: auto;
}