/*
Theme Name: Twenty25 ncvp
Template: twentytwentyfive
*/

/* Change font throughout */
body {
	font-family: "Comic Sans MS", "Comic Neue", sans-serif;
}

/* Stop top of header hitting edge of screen */
header {
	margin-block-start: 1.3rem !important;
}

/* Reduce gap between menu and page title */
main {
	margin-top: 0px !important;
}

div.wp-block-group {
	padding-top: 0 !important;
	padding-bottom: 0;
}

h1.wp-block-query-title,
h1.wp-block-heading,
h1.wp-block-post-title {
	text-transform: uppercase;
	font-size: large;
	font-weight: 800;
}

.entry-content + p,
h1.wp-block-heading + p,
.entry-content {
	font-size: medium;
}

/* Fix poor mobile rendering with very long lines. anywhere means anywhere in the url string */
a {
	overflow-wrap: anywhere;
}

@media screen and (max-width: 768px) {
	/* Quite a good general reduction on mobile */
	.entry-content {
		font-size: small;
	}
}

/*********************/
/* Classic galleries */
/*********************/

/* Works in desktop and mobile */

/* Base Gallery Container */
.gallery {
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
	margin: 2rem 0;
	justify-content: center;
}

/* Individual Gallery Item */
.gallery-item {
	display: inline-block;
	text-align: center;
	vertical-align: top;
	margin: 0;
	flex-grow: 1;
}

/* Fix Column Layouts (Shortcode attribute: columns="X") */
.gallery-columns-1 .gallery-item { width: 100%; }
.gallery-columns-2 .gallery-item { width: calc(50% - 15px); }
.gallery-columns-3 .gallery-item { width: calc(33.33% - 15px); }
.gallery-columns-4 .gallery-item { width: calc(25% - 15px); }
.gallery-columns-5 .gallery-item { width: calc(20% - 15px); }

/* Ensure Images are Responsive */
.gallery-item img {
	max-width: 100%;
	height: auto;
	display: block;
}

/* Caption Styling */
.gallery-caption {
	font-size: 0.8rem;
	margin-top: 5px;
	color: #666;
}

/************/
/* Textflow */
/************/

/* I can't fix images floating to right or left of screen in classic pages */

/************************/
/* Images with captions */
/************************/

/* Put the thumbnail caption below the image. The bottom of the image is still blurred */
figure.wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
	color: #000;
	background: none;
	margin-top: 0.2em;
	position: relative;
	text-shadow: none;
}

/* Remove blur effect from image captions. This also clears up bottom of thumbnail */
.wp-block-gallery.has-nested-images figure.wp-block-image:has(figcaption)::before {
	display: none;
}