/* Genova Go Club — custom styles layered on top of the HTML5UP Editorial theme */

/* Menu header: title on the left, language picker on the top-right */
#menu .menu-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1em;
}
/* Underline belongs under the title only, not the language buttons. The theme
   normally underlines header.major's :last-child (now the language list), so we
   move the underline onto the title and remove it from the language list. */
#menu .menu-header h2 {
	margin-bottom: 0;
	border-bottom: solid 3px #f56a6a;
	display: inline-block;
	padding: 0 0.75em 0.5em 0;
}
#menu .menu-header > .lang-menu {
	border-bottom: 0;
	margin: 0;
	padding: 0;
}

/* Language selection — horizontal buttons beside the menu title */
#menu .lang-menu {
	display: flex;
	flex-direction: row;
	gap: 0.4em;
	list-style: none;
	margin: 0;
	padding: 0;
}
#menu .lang-menu li {
	padding: 0;
	border: 0;
	margin: 0;
}
#menu .lang-menu .lang-switch,
#menu .lang-menu .lang-current {
	display: inline-block;
	border: solid 1px rgba(144, 150, 154, 0.35);
	border-radius: 0.35em;
	font-size: 0.7em;
	font-weight: 700;
	letter-spacing: 0.05em;
	line-height: 1;
	padding: 0.5em 0.7em;
	text-decoration: none;
}
#menu .lang-menu .lang-current {
	background: #f56a6a;
	border-color: #f56a6a;
	color: #ffffff;
}

#menu .menu-list {
	margin-top: 1.2em;
}

/* Push the "Genova Go Club" contact block to the bottom of the sidebar */
#sidebar > .inner {
	display: flex;
	flex-direction: column;
	min-height: 100%;
}
#sidebar > .inner > .sidebar-brand {
	margin-top: auto;
}

#sidebar > .inner > * {
    border-bottom: 0px;
}

/* On large screens, make the sidebar behave like it does on small devices:
   a fixed, full-height panel that only scrolls internally when the menu is
   taller than the viewport (instead of scrolling with the page). The hamburger
   toggle is fixed too, so it stays visible while scrolling. */
@media screen and (min-width: 1281px) {
	#sidebar {
		position: fixed;
		top: 0;
		left: 0;
		height: 100%;
		z-index: 10000;
		box-shadow: 0 0 5em 0 rgba(0, 0, 0, 0.175);
	}
	#sidebar.inactive {
		box-shadow: none;
	}
	#sidebar > .inner {
		/* !important overrides the theme's scroll-lock JS, which otherwise
		   pins .inner with inline position/top on desktop. */
		position: absolute !important;
		top: 0 !important;
		left: 0;
		height: 100%;
		overflow-x: hidden;
		overflow-y: auto;
	}
	#sidebar .toggle {
		position: fixed;
		top: 0;
	}
	#sidebar.inactive .toggle {
		left: 0;
	}
}

/* Honeypot anti-spam field — visually hidden but present in the DOM */
.hp-field {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Flash status message */
.banner-status {
	background: #f0fff4;
	border: solid 2px #48c774;
	color: #2f855a;
	border-radius: 0.375em;
	margin: 2em 0 0 0;
	padding: 1em 1.5em;
}

/* Validation error box */
.form-errors {
	background: #fff5f5;
	border: solid 2px #f56a6a;
	border-radius: 0.375em;
	margin: 0 0 2em 0;
	padding: 1em 1.5em;
}
.form-errors ul {
	list-style: disc;
	margin: 0;
	padding-left: 1.25em;
}
.form-errors li {
	padding-left: 0.25em;
}

/* Registration block spacing */
.registration {
	margin-top: 2em;
}
.registration .hp-field label {
	margin: 0;
}

/* Collapsible registration form, shown above the registered-players list */
.registration-form {
	margin-bottom: 3em;
	border: solid 2px rgba(210, 215, 217, 0.75);
	border-radius: 0.375em;
}
.registration-form > summary {
	cursor: pointer;
	list-style: none;
	padding: 1em 1.5em;
	font-family: "Roboto Slab", serif;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	font-size: 0.9em;
}
.registration-form > summary::-webkit-details-marker {
	display: none;
}
.registration-form > summary::after {
	content: '\f067'; /* plus */
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	float: right;
	color: #f56a6a;
}
.registration-form[open] > summary::after {
	content: '\f068'; /* minus */
}
.registration-form[open] > summary {
	border-bottom: solid 2px rgba(210, 215, 217, 0.75);
}
.registration-form-body {
	padding: 1.5em;
}

/* Two-column page text on desktop (matches the theme's own "large" breakpoint). */
@media screen and (min-width: 981px) {
	.page-content {
		column-count: 2;
		column-gap: 3em;
	}
	.page-content h1,
	.page-content h2,
	.page-content h3,
	.page-content h4,
	.page-content img,
	.page-content .image {
		break-inside: avoid;
	}
	.page-content h1,
	.page-content h2,
	.page-content h3,
	.page-content h4 {
		break-after: avoid;
	}
}

/* Per-file progress list on the public photo upload page */
.upload-queue {
	list-style: none;
	margin: 1.5em 0 0 0;
	padding: 0;
}
.upload-queue-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1em;
	padding: 0.6em 0;
	border-bottom: solid 1px rgba(210, 215, 217, 0.75);
}
.upload-queue-name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.upload-queue-status {
	flex-shrink: 0;
	font-size: 0.8em;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: #7f888f;
}
.upload-queue-item.is-done .upload-queue-status {
	color: #2f855a;
}
.upload-queue-item.is-failed .upload-queue-status {
	color: #f56a6a;
}

/* ---------------------------------------------------------------------
   Page photo gallery
   4 square photos per row on desktop, 1 per row on mobile.
   --------------------------------------------------------------------- */
.gallery {
	margin: 3em 0 0 0;
}
.gallery-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 1.5em;
	list-style: none;
	margin: 0;
	padding: 0;
}
.gallery-item {
	padding: 0;
	margin: 0;
}
.gallery-image {
	display: block;
	border-bottom: 0; /* the theme underlines inline links */
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: 0.375em;
}
.gallery-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.gallery.is-bordered .gallery-image {
	border: solid 2px rgba(210, 215, 217, 0.75);
	padding: 0.35em;
	background: #ffffff;
}
/* "Contain" mode: show the whole photo, centered, letterboxed rather than
   cropped to fill the square. The letterbox background only makes sense
   alongside the border/card treatment — with no border, leave it transparent. */
.gallery.is-contain.is-bordered .gallery-image {
	background-color: #f5f6f7;
}
.gallery.is-contain .gallery-image img {
	object-fit: contain;
}
a.gallery-image {
	cursor: zoom-in;
	transition: opacity 0.2s ease;
}
a.gallery-image:hover {
	opacity: 0.85;
}
.gallery-caption {
	text-align: center;
	font-size: 0.8em;
	margin: 0.75em 0 0 0;
	line-height: 1.4;
}

/* Tablet: two per row; mobile: one per row. */
@media screen and (max-width: 980px) {
	.gallery-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}
@media screen and (max-width: 736px) {
	.gallery-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* Lightbox shown when an enlargeable gallery photo is clicked */
.gallery-lightbox {
	position: fixed;
	inset: 0;
	z-index: 20000;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(31, 36, 40, 0.9);
	padding: 2em;
	cursor: zoom-out;
}
.gallery-lightbox img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	border-radius: 0.375em;
	box-shadow: 0 0 4em rgba(0, 0, 0, 0.5);
}
.gallery-lightbox-caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 1.25em;
	text-align: center;
	color: #ffffff;
	font-size: 0.9em;
	padding: 0 2em;
}
.gallery-lightbox-nav {
	/* Reset the theme's generic button styling (padding, box-shadow, forced
	   color, etc.) so the fixed width/height below actually renders as a
	   circle rather than a padded, red-tinted oval. */
	box-sizing: border-box;
	padding: 0;
	box-shadow: none;
	text-transform: none;
	letter-spacing: normal;
	font-family: inherit;

	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 3em;
	height: 3em;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.15);
	color: #ffffff !important;
	font-size: 1.25em;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.2s ease;
}
.gallery-lightbox-nav:hover {
	background: rgba(255, 255, 255, 0.3);
}
.gallery-lightbox-prev {
	left: 1em;
}
.gallery-lightbox-next {
	right: 1em;
}
@media screen and (max-width: 736px) {
	.gallery-lightbox-nav {
		width: 2.5em;
		height: 2.5em;
		font-size: 1em;
	}
	.gallery-lightbox-prev {
		left: 0.5em;
	}
	.gallery-lightbox-next {
		right: 0.5em;
	}
}