/**
 * Full-page background: blue-green gold halls, matched to the header.
 *
 * Front page and inner pages share one painting.
 * The unwatermarked original sits in this images folder under a non-public name.
 * Revert via functions.php enqueue or set --cube-page-bg-image: none below.
 */

body {
	--cube-page-bg-image: url('images/music-blog-bg-blue-green-gold-halls-watermark.jpg?v=10');
	/* Light wash only — keep the mineral blue-green readable under the header. */
	--cube-page-bg-overlay-top: rgba(248, 248, 248, 0.12);
	--cube-page-bg-overlay-bottom: rgba(232, 238, 236, 0.2);
	--cube-page-bg-position: center center;

	background-color: #163e62;
	background-image:
		linear-gradient(
			var(--cube-page-bg-overlay-top),
			var(--cube-page-bg-overlay-bottom)
		),
		var(--cube-page-bg-image);
	background-size: cover, cover;
	background-position: center center, var(--cube-page-bg-position);
	background-attachment: fixed;
	background-repeat: no-repeat;
}

body.cube-sunrise-bg {
	--cube-page-bg-image: url('images/music-blog-bg-blue-green-gold-halls-watermark.jpg?v=10');
}

#masthead {
	/* F · azurite to malachite, gold lettering. */
	background-color: #163e62;
	background-image: linear-gradient(90deg, #163e62 0%, #1a6a56 48%, #163e62 100%);
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	box-shadow: inset 0 -2px 0 rgba(232, 196, 106, 0.8);
}

#masthead .site-title a {
	color: #f6e2a8;
}

#masthead .site-title a:hover,
#masthead .site-title a:focus {
	color: #fff4d2;
}

#masthead .site-description {
	color: rgba(246, 226, 168, 0.82);
}

#masthead .site-description:before,
#masthead .site-description:after {
	background-color: rgba(246, 226, 168, 0.82);
}

/* Hollow key-fret (回紋) in the side margins. The title stays in a clear center. */
.site-branding {
	position: relative;
	padding: 15px 0;
}

.site-branding::before,
.site-branding::after {
	content: "";
	position: absolute;
	top: 50%;
	width: 167px;
	height: 34px;
	transform: translateY(-50%);
	background-color: rgba(246, 220, 150, 0.92);
	-webkit-mask-image: url("images/music-blog-header-key-fret.svg?v=1");
	mask-image: url("images/music-blog-header-key-fret.svg?v=1");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
	pointer-events: none;
}

.site-branding::before {
	left: max(24px, calc(50% - 363px));
}

.site-branding::after {
	right: max(24px, calc(50% - 363px));
	transform: translateY(-50%) scaleX(-1);
}

@media screen and (max-width: 759px) {
	.site-branding::before,
	.site-branding::after {
		display: none;
	}
}

#secondary .widget_block {
	background-color: rgba(255, 255, 255, 0.92);
}

.blog-post-item,
.single-page-wrapper .entry-content,
.single .blog-post-item .entry-footer,
#comments ol.comment-list article {
	background-color: rgba(255, 255, 255, 0.96);
}

#colophon {
	background-color: rgba(29, 32, 36, 0.96);
}

@media screen and (max-width: 1023px) {
	body {
		background-attachment: scroll;
	}
}

@media (prefers-reduced-motion: reduce) {
	body {
		background-attachment: scroll;
	}
}

/*
 * Cube Blog style.css draws outline: medium dotted #000 on :focus.
 * A mouse click leaves :focus, so titles, tags, and buttons keep a dotted box.
 * The theme sidebar stylesheet tried to clear it, but its selector list includes
 * :-moz-focusring, which makes the whole rule invalid in other browsers.
 */
a:focus,
button:focus,
button:active,
input[type="button"]:focus,
input[type="button"]:active,
input[type="reset"]:focus,
input[type="reset"]:active,
input[type="submit"]:focus,
input[type="submit"]:active,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
select:focus,
textarea:focus,
.btn:focus,
.reply a:focus,
.wp-block-search__button:focus {
	outline: none;
}

/*
 * Search titles and the empty-result note sit on the hall painting.
 * Black headings and the theme's gray body text disappear into the blue-green.
 */
body.search-results .site-main > .page-header .page-title,
body.search-no-results .site-main > .page-header .page-title,
body.search-no-results .no-results .page-title {
	color: #fff6e4;
	text-shadow: 0 1px 2px rgba(10, 32, 40, 0.65);
}

body.search-no-results .no-results .page-content p {
	color: #fffaf3;
	text-shadow: 0 1px 2px rgba(10, 32, 40, 0.55);
}

/* Empty-result glass matches the sidebar Search button: white mark on #f37e7e. */
body.search-no-results .no-results .search-form .search-submit {
	background-color: #f37e7e;
	color: #fff;
	border: 1px solid #f37e7e;
	padding: 8px 12px;
	line-height: 1;
}

body.search-no-results .no-results .search-form .search-submit svg {
	display: block;
	width: 18px;
	height: 18px;
	fill: #fff;
}

body.search-no-results .no-results .search-form .search-submit svg path {
	fill: #fff;
}

body.search-no-results .no-results .search-form .search-submit:hover,
body.search-no-results .no-results .search-form .search-submit:focus,
body.search-no-results .no-results .search-form .search-submit:active {
	background-color: #444;
	color: #fff;
	border-color: #444;
	outline: none;
}

body.search-no-results .no-results .search-form .search-submit:hover svg,
body.search-no-results .no-results .search-form .search-submit:hover svg path,
body.search-no-results .no-results .search-form .search-submit:focus svg,
body.search-no-results .no-results .search-form .search-submit:focus svg path {
	fill: #fff;
}