/*
 * Don Pablo – additions for Joomla 6
 * Everything that is new compared to the ported Warp stylesheet (template.css) lives here.
 */

/* Layout
----------------------------------------------------------------------------------------------------*/

/* Replaces the Warp JS that stretched the background to the document height */
#page-bg > div { min-height: 100vh; }

/* Utility class used by Joomla core layouts */
.visually-hidden {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* Menu
----------------------------------------------------------------------------------------------------*/

/* Keyboard access to the drop-down */
.menu-dropdown li:focus-within .dropdown { display: block; }

.menu-dropdown a:focus-visible,
.menu-line a:focus-visible,
.menu-toggle:focus-visible {
	outline: 2px solid #aa0000;
	outline-offset: 2px;
}

/* Bar on top of the active / hovered item, positioned by template.js */
#menu .fancy {
	display: block;
	visibility: hidden;
	transition: left .3s cubic-bezier(.65, 0, .35, 1), width .3s cubic-bezier(.65, 0, .35, 1);
}

@media (prefers-reduced-motion: reduce) {
	#menu .fancy { transition: none; }
}

.menu-toggle { display: none; }

/* Only Phones: logo + menu button, menu opens as a list (replaces the Warp select menu) */
@media (max-width: 767px) {

	#header { text-align: center; }

	#logo {
		display: inline-block;
		float: none;
		margin: 10px auto 0;
	}

	#logo img {
		max-width: 100%;
		height: auto;
	}

	.menu-toggle {
		display: flex;
		align-items: center;
		gap: 10px;
		margin: 10px auto 0;
		padding: 8px 16px;
		border: 0;
		border-radius: 3px;
		background: #aa0000;
		color: #fff;
		font: inherit;
		font-size: 16px;
		line-height: 20px;
		cursor: pointer;
	}

	.menu-toggle-icon,
	.menu-toggle-icon::before,
	.menu-toggle-icon::after {
		display: block;
		width: 18px;
		height: 2px;
		background: currentColor;
		transition: transform .2s;
	}

	.menu-toggle-icon { position: relative; }

	.menu-toggle-icon::before,
	.menu-toggle-icon::after {
		content: "";
		position: absolute;
		left: 0;
	}

	.menu-toggle-icon::before { top: -6px; }
	.menu-toggle-icon::after { top: 6px; }

	.menu-open .menu-toggle-icon { background: transparent; }
	.menu-open .menu-toggle-icon::before { transform: translateY(6px) rotate(45deg); }
	.menu-open .menu-toggle-icon::after { transform: translateY(-6px) rotate(-45deg); }

	.menu-open #menu {
		display: block;
		float: none;
		margin: 10px 0 0;
		text-align: left;
	}

	.menu-open #menu .menu-dropdown {
		float: none;
		margin: 0;
		background: #fff;
		box-shadow: 0 2px 7px rgba(0,0,0,0.15);
	}

	.menu-open #menu li.level1 {
		float: none;
		margin: 0;
		padding: 0;
		border-top: 1px solid #eee;
		background: none;
	}

	.menu-open #menu li.level1:first-child { border-top: 0; }

	.menu-open #menu .level1,
	.menu-open #menu .level1 > span { float: none; }

	.menu-open #menu a.level1 { display: block; }

	.menu-open #menu a.level1 > span {
		display: block;
		height: auto;
		padding: 10px 15px;
		line-height: 24px;
	}

	.menu-open #menu .current > a.level1 { color: #aa0000; }

	/* Sub items are always visible */
	.menu-open #menu .dropdown {
		display: block;
		position: static;
		width: auto !important;
	}

	.menu-open #menu .dropdown-bg > div {
		margin: 0;
		padding: 0 0 5px 15px;
		background: none;
		box-shadow: none;
	}

	.menu-open #menu li.level2 {
		margin: 0;
		border: 0;
	}

	.menu-open #menu ul.level2 a,
	.menu-open #menu ul.level2 span { color: #777; }

	.menu-open #menu ul.level2 a > span {
		padding: 6px 15px;
		line-height: 22px;
	}

	.menu-open #menu ul.level2 a.current,
	.menu-open #menu ul.level2 a.current > span { color: #aa0000; background: none; }

}

/* Gallery (replaces Widgetkit gallery "wall")
----------------------------------------------------------------------------------------------------*/

.dp-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
	gap: 10px;
	margin: 0 0 18px 0;
}

.dp-gallery--square { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }

.dp-gallery a {
	display: block;
	overflow: hidden;
	aspect-ratio: 17 / 10;
	background: #eee;
}

.dp-gallery--square a { aspect-ratio: 1; }

.dp-gallery img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	transition: transform .4s ease-out;
}

.dp-gallery a:hover img,
.dp-gallery a:focus-visible img { transform: scale(1.1); }

@media (max-width: 479px) {
	.dp-gallery,
	.dp-gallery--square { grid-template-columns: repeat(2, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
	.dp-gallery img { transition: none; }
}

/* Lightbox: brand color for controls */
.glightbox-clean .gclose,
.glightbox-clean .gnext,
.glightbox-clean .gprev { background-color: rgba(170, 0, 0, 0.75); }

/* Joomla core output
----------------------------------------------------------------------------------------------------*/

#system-message-container:empty { display: none; }

#system-message-container { margin: 0 0 20px 0; }

#system .com-users-login,
#system .com-users-logout { max-width: 400px; }

#system .control-group { margin-bottom: 12px; }

#system .control-label label { display: block; margin-bottom: 3px; }

#system .form-control,
#system input[type="text"],
#system input[type="email"],
#system input[type="password"] {
	box-sizing: border-box;
	width: 100%;
	max-width: 400px;
	padding: 6px 8px;
	border: 1px solid #ccc;
	border-radius: 3px;
	font: inherit;
}

#system .input-group {
	display: flex;
	max-width: 400px;
}

#system .input-group .form-control {
	flex: 1;
	border-radius: 3px 0 0 3px;
}

#system .input-group .btn {
	padding: 6px 12px;
	border-radius: 0 3px 3px 0;
}

#system .com-users-login__options {
	margin: 15px 0 0 0;
	padding: 0;
	list-style: none;
}

#system .btn,
#system button[type="submit"] {
	padding: 6px 16px;
	border: 0;
	border-radius: 3px;
	background: #aa0000;
	color: #fff;
	font: inherit;
	cursor: pointer;
}

#system .btn:hover,
#system button[type="submit"]:hover { background: #880000; }