/*
Theme Name: Brushwork
Theme URI: https://example.com/brushwork
Author: Michael Reed
Description: A periwinkle, grid-lined block theme inspired by the MML-01 cover for a working musician. Includes a Shows calendar with bulk monthly entry, a Discography with Bandcamp embeds, and News.
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 7.4
Version: 1.2.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: brushwork
Tags: full-site-editing, block-patterns, dark, one-column, custom-colors
*/

/* Small refinements that theme.json can't express. */

html { scroll-behavior: smooth; }

body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

::selection { background: var(--wp--preset--color--ink); color: var(--wp--preset--color--paper); }

/* The cover's soft periwinkle-to-lavender wash behind every page. */
body { background: var(--wp--preset--gradient--cover-wash); background-color: var(--wp--preset--color--periwinkle); }
@media (min-width: 782px) { body { background-attachment: fixed; } }

a { text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

:where(.wp-site-blocks) > * { margin-block-start: 0; }

/* Fraunces: wide, low-contrast wedge serifs for headings (opsz 72);
   high-contrast black italic caps for the name, labels and numbers (opsz 144). */
h1, h2, h3, h4, h5, h6, .wp-block-post-title, .bw-shows__month {
	font-variation-settings: "opsz" 72, "SOFT" 0, "WONK" 0;
}
.wp-block-site-title { font-variation-settings: "opsz" 144; word-spacing: 0.12em; }


/* Header */
.bw-header { border-bottom: 1px solid var(--wp--preset--color--line); }
.bw-header .wp-block-site-title a { text-decoration: none; }
.bw-header .wp-block-navigation a:hover { text-decoration: underline; text-decoration-thickness: 2px; }

/* Eyebrow labels */
.bw-eyebrow {
	font-family: var(--wp--preset--font-family--display);
	font-variation-settings: "opsz" 144;
	font-style: italic;
	font-weight: 900;
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.01em;
	word-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
}

/* Hero */
.bw-hero { padding-left: 0 !important; padding-right: 0 !important; }
.bw-hero .wp-block-cover__inner-container { padding-left: var(--wp--style--root--padding-left); padding-right: var(--wp--style--root--padding-right); box-sizing: border-box; }
.bw-hero { position: relative; border-bottom: 1px solid var(--wp--preset--color--line); overflow: hidden; }
.bw-hero .wp-block-cover__inner-container { width: 100% !important; max-width: none; margin: 0 !important; position: relative; z-index: 3; }
.bw-hero .wp-block-cover__inner-container > * { max-width: var(--wp--style--global--wide-size); margin-left: auto !important; margin-right: auto !important; }
/* Let the page's fixed wash show through so the hero blends seamlessly; an added photo still covers it. */
.bw-hero > .has-cover-wash-gradient-background { background: transparent !important; }
.bw-hero h1 { color: var(--wp--preset--color--paper); }
/* Thin black grid lines and the three tick marks from the MML-01 cover. */
.bw-hero::before, .bw-hero::after { content: "" !important; display: block; position: absolute; z-index: 2; pointer-events: none; }
.bw-hero::after {
	right: 12%; bottom: 0; width: 9rem; height: 6.5rem;
	background:
		linear-gradient(var(--wp--preset--color--line), var(--wp--preset--color--line)) 0 0 / 1px 100% no-repeat,
		linear-gradient(var(--wp--preset--color--line), var(--wp--preset--color--line)) 50% 0 / 1px 100% no-repeat,
		linear-gradient(var(--wp--preset--color--line), var(--wp--preset--color--line)) 100% 0 / 1px 100% no-repeat;
}
@media (min-width: 900px) {
	.bw-hero::before { top: 0; bottom: 0; left: 64%; width: 1px; background: var(--wp--preset--color--line); }
}
@media (max-width: 600px) { .bw-hero::after { display: none; } }

/* Section bands separated by grid lines instead of dark fills. */
.bw-band { border-top: 1px solid var(--wp--preset--color--line); border-bottom: 1px solid var(--wp--preset--color--line); }

/* Image style "Framed": white mat like the photo on the cover. */
.is-style-bw-frame img, .bw-frame img { border: 6px solid var(--wp--preset--color--paper); }
.bw-hero h1 { line-height: 0.86; margin-top: .5rem; }
.bw-hero p:not(.bw-eyebrow) { box-sizing: border-box; padding-right: max(0px, calc(min(100%, var(--wp--style--global--wide-size)) - 36rem)); }

/* Titles that link shouldn't look like body links */
.wp-block-site-title a, .wp-block-post-title a { text-decoration: none; }
.wp-block-post-title a:hover { text-decoration: underline; text-decoration-thickness: 2px; }

/* Discography grid */
.bw-disco .wp-block-post-featured-image img { aspect-ratio: 1; object-fit: cover; transition: transform .4s ease; }
.bw-disco .wp-block-post-featured-image { overflow: hidden; }
.bw-disco .wp-block-post:hover .wp-block-post-featured-image img { transform: scale(1.03); }
.bw-disco .wp-block-post-title a { text-decoration: none; }
.bw-cover-fallback { aspect-ratio: 1; background: var(--wp--preset--color--lavender); }

/* News cards */
.bw-news .wp-block-post-title a { text-decoration: none; }

/* Release meta list */
.bw-release-meta p { margin: 0; }
.bw-release-meta p:empty { display: none; }

/* Streaming link buttons */
.bw-listen { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.5rem; }
.bw-listen a {
	border: 1px solid var(--wp--preset--color--line);
	padding: .55rem 1rem; font-size: var(--wp--preset--font-size--small);
	text-decoration: none; letter-spacing: .08em; text-transform: uppercase;
	color: var(--wp--preset--color--ink);
}
.bw-listen a:hover { background: var(--wp--preset--color--ink); border-color: var(--wp--preset--color--ink); color: var(--wp--preset--color--paper); }

/* Embeds */
.bw-bandcamp iframe, .bw-embed iframe { display: block; width: 100%; border: 0; }

/* ===== Shows calendar ===== */
.bw-shows { --bw-gap: clamp(1rem, 3vw, 2rem); }
.bw-shows__month {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--large);
	text-transform: lowercase; letter-spacing: .005em;
	color: var(--wp--preset--color--accent);
	margin: 2.5rem 0 .25rem; font-weight: 700;
}
.bw-shows__month:first-child { margin-top: 0; }
.bw-shows__list { list-style: none; margin: 0; padding: 0; }
.bw-show {
	display: grid;
	grid-template-columns: 5.5rem 1fr auto;
	align-items: center; gap: var(--bw-gap);
	padding: 1.15rem 0;
	border-top: 1px solid var(--wp--preset--color--line);
}
.bw-show:last-child { border-bottom: 1px solid var(--wp--preset--color--line); }
.bw-show__date { font-family: var(--wp--preset--font-family--display); line-height: .9; text-transform: uppercase; }
.bw-show__day { font-style: italic; font-variation-settings: "opsz" 144; letter-spacing: -0.03em; }
.bw-show__dow { display: block; margin-bottom: .35rem; font-size: .8rem; letter-spacing: .15em; color: var(--wp--preset--color--muted); font-family: var(--wp--preset--font-family--body); }
.bw-show__day { display: block; font-size: 2.6rem; font-weight: 900; }
.bw-show__venue { font-size: var(--wp--preset--font-size--medium); font-weight: 600; margin: 0; }
.bw-show__where { color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--small); margin: .2rem 0 0; }
.bw-show__note { font-size: var(--wp--preset--font-size--small); margin: .35rem 0 0; color: var(--wp--preset--color--ink); opacity: .8; }
.bw-btn {
	display: inline-block; white-space: nowrap;
	padding: .65rem 1.15rem; font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: .16em; text-transform: uppercase; font-weight: 600; text-decoration: none;
	background: var(--wp--preset--color--accent); color: var(--wp--preset--color--paper);
}
.bw-btn:hover { background: var(--wp--preset--color--paper); color: var(--wp--preset--color--ink); }
.bw-btn--ghost { background: transparent; color: var(--wp--preset--color--muted); border: 1px solid var(--wp--preset--color--line); }
.bw-badge { font-size: var(--wp--preset--font-size--x-small); letter-spacing: .14em; text-transform: uppercase; color: var(--wp--preset--color--signal); font-weight: 700; }
.bw-shows__empty { color: var(--wp--preset--color--muted); padding: 1.5rem 0; border-top: 1px solid var(--wp--preset--color--line); border-bottom: 1px solid var(--wp--preset--color--line); }
.bw-shows--past .bw-show { opacity: .72; }
.bw-shows--past .bw-show__day { font-size: 1.8rem; }

@media (max-width: 600px) {
	.bw-show { grid-template-columns: 4.6rem 1fr; }
	.bw-show__dow { font-size: .68rem; white-space: nowrap; letter-spacing: .1em; }
	.bw-show__cta { grid-column: 2; justify-self: start; }
	.bw-show__day { font-size: 2rem; }
}