/*
 * AAS site — WPCodeBox snippet (CSS, site-wide).
 * The look of what aas-site.php writes: the song filters and search, the
 * heart, the comments, the Fluent Forms forms, the 404 page, the ring of
 * words around the home page cover, and the GeneratePress parts the blocks
 * can't reach (back-to-top button, phone menu, focus rings). Everything else is styled in GenerateBlocks.
 *
 * Colors and sizes are the design tokens (GenerateBlocks > Design > Design
 * Tokens), so they match the rest of the site.
 */

/* ── GeneratePress parts ─────────────────────────────────────────────── */

/* Back to top: a round white button with a shadow, clear on any background. */
a.generate-back-to-top {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid rgb(255 255 255 / 0.2);
	border-radius: var(--radius-pill);
	background: var(--ink);
	color: var(--on-dark);
	box-shadow: var(--shadow-pop);
	transition: var(--ease);
}

a.generate-back-to-top:hover,
a.generate-back-to-top:focus-visible {
	border-color: var(--accent);
	background: var(--accent);
	color: var(--on-dark);
}

/* GeneratePress nudges its icons down by .125em; here it sits dead centre. */
a.generate-back-to-top .gp-icon {
	display: flex;
}

a.generate-back-to-top .gp-icon svg {
	top: 0;
}

/* Full-width bands are 100vw wide, which counts the scrollbar too; clip
   keeps that from scrolling the page sideways (and, unlike hidden, keeps
   sticky parts working). Jump links stop below the sticky bar. */
html,
body {
	overflow-x: clip;
}

html {
	scroll-padding-top: 72px;
}

/* Links don't get an underline on hover (GeneratePress adds one); their
   color changes instead. Links inside running text stay underlined. */
a:hover,
a:focus {
	text-decoration: none;
}

/* One focus ring for keyboard users: brown on light, white on the dark heroes. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

:where(.aas-dark, .aas-dark-header .site-header, .slideout-navigation) :where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline-color: var(--on-dark);
}

/* Menu links on the light header: brown on hover, like every link. */
.main-navigation .main-nav > ul > li > a:hover,
.main-navigation .main-nav > ul > li[class*="current-menu-"] > a {
	color: var(--accent);
}

/* The phone menu (GeneratePress off-canvas panel), menu 1 from 2026-10-28:
 * dark like the heroes, the close button top right, big page names with a
 * round arrow. The "Phone menu" element after the links adds the logo, the
 * faint monogram, the newest song and the icons. */
:root {
	--gp-slideout-width: min(100vw, 440px);
}

#generate-slideout-menu {
	height: 100dvh;
	background: var(--dark);
	color: var(--on-dark);
}

#generate-slideout-menu .inside-navigation {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	min-height: 100%;
	box-sizing: border-box;
	padding: 28px 24px 34px;
	overflow: hidden;
}

#generate-slideout-menu button.slideout-exit {
	position: absolute;
	top: 24px;
	right: 24px;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--on-dark-line);
	border-radius: 50%;
	background: var(--on-dark-fill);
	color: var(--on-dark);
	font-size: 16px;
	transition: var(--ease);
}

@media (hover: hover) {
	#generate-slideout-menu button.slideout-exit:hover {
		border-color: var(--on-dark);
		background: rgb(255 255 255 / 0.24);
	}
}

#generate-slideout-menu .main-nav {
	position: relative;
	z-index: 1;
	margin: 84px 0 36px;
}

#generate-slideout-menu .main-nav ul,
#generate-slideout-menu .main-nav ul li {
	background: transparent;
}

#generate-slideout-menu .main-nav ul li a {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	padding: 14px 0;
	border-bottom: 1px solid rgb(255 255 255 / 0.14);
	background: transparent;
	color: var(--on-dark);
	text-decoration: none;
	font-size: var(--text-4xl);
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -0.04em;
	transition: var(--ease);
}

#generate-slideout-menu .main-nav ul li a::after {
	content: "";
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	box-sizing: border-box;
	border: 1px solid rgb(255 255 255 / 0.3);
	border-radius: 50%;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E") center / 18px no-repeat;
	transition: var(--ease);
}

#generate-slideout-menu .main-nav ul li a:is(:hover, :focus),
#generate-slideout-menu .main-nav ul li[class*="current-menu-"] > a {
	background: transparent;
	color: var(--cream);
}

#generate-slideout-menu .main-nav ul li a:is(:hover, :focus)::after,
#generate-slideout-menu .main-nav ul li[class*="current-menu-"] > a::after {
	border-color: var(--on-dark);
	background: var(--on-dark) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1410' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E") center / 18px no-repeat;
}

/* ── Filters and search on the songs pages ([aas_filters]) ───────────── */

.aas-filters {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	margin-top: 16px;
}

.aas-filter-pills {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
}

.aas-filter-pills a {
	display: inline-flex;
	align-items: center;
	height: 34px;
	padding: 0 16px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: #ffffff;
	color: var(--ink);
	font-size: var(--text-sm);
	font-weight: 500;
	text-decoration: none;
	transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.aas-filter-pills a:hover {
	border-color: var(--gold);
	color: var(--accent);
}

.aas-filter-pills a[aria-current] {
	border-color: var(--ink);
	background: var(--ink);
	color: #ffffff;
}

.aas-find input {
	width: min(360px, 80vw);
	height: 38px;
	box-sizing: border-box;
	padding: 0 16px 0 38px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: #ffffff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666666' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 14px center / 16px;
	color: var(--ink);
	font: inherit;
	font-size: var(--text-sm);
	transition: border-color 0.15s, box-shadow 0.15s;
}

.aas-find input:hover {
	border-color: var(--gold);
}

.aas-find input:focus {
	outline: none;
	border-color: var(--gold);
	box-shadow: 0 0 0 3px var(--cream-fill);
}

.aas-find-none {
	margin: 0;
	color: var(--ink-muted);
	font-size: var(--text-sm);
}

/* ── The heart under each song ([aas_reactions]) ─────────────────────── */

.aas-heart {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: var(--control);
	padding: 0 16px;
	border: 1px solid var(--line);
	border-radius: var(--radius-pill);
	background: var(--ground);
	color: var(--ink);
	font: inherit;
	font-size: var(--text-sm);
	font-weight: 500;
	cursor: pointer;
	transition: background-color 0.15s, border-color 0.15s, color 0.15s, transform 0.2s;
}

/* GeneratePress fills every button brown on hover; the heart stays light. */
.aas-heart:is(:hover, :focus) {
	border-color: var(--gold);
	background: var(--cream-fill);
	color: var(--accent);
	transform: translateY(-1px);
}

.aas-heart-icon {
	width: 16px;
	height: 16px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M12 20s-7-4.4-9.2-9A5 5 0 0 1 12 6a5 5 0 0 1 9.2 5C19 15.6 12 20 12 20z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M12 20s-7-4.4-9.2-9A5 5 0 0 1 12 6a5 5 0 0 1 9.2 5C19 15.6 12 20 12 20z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.aas-heart-count:empty {
	display: none;
}

/* Loved: filled heart. Clicking again takes it back. */
.aas-heart[aria-pressed="true"] {
	border-color: var(--cream);
	background: var(--cream-fill);
	color: var(--accent);
}

.aas-heart[aria-pressed="true"]:is(:hover, :focus) {
	border-color: var(--gold);
}

.aas-heart.is-busy {
	cursor: progress;
}

.aas-heart[aria-pressed="true"] .aas-heart-icon {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 20s-7-4.4-9.2-9A5 5 0 0 1 12 6a5 5 0 0 1 9.2 5C19 15.6 12 20 12 20z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 20s-7-4.4-9.2-9A5 5 0 0 1 12 6a5 5 0 0 1 9.2 5C19 15.6 12 20 12 20z'/%3E%3C/svg%3E");
}

/* ── Comments ([aas_comments]) ───────────────────────────────────────── */

/* One quiet list: a letter, the name and date, the words. No boxes. */
.aas-comments {
	text-align: left;
}

/* "2 comments", a small label over the list, under the box. */
.aas-comments-title {
	margin: 32px 0 4px;
	color: var(--ink-muted);
	font-size: var(--text-sm);
	font-weight: 500;
	letter-spacing: 0;
}

.aas-comment-list {
	margin: 0;
}

.aas-comment {
	display: grid;
	grid-template-columns: 32px minmax(0, 1fr);
	column-gap: 12px;
	padding: 14px 0;
	border-top: 1px solid var(--line);
}

.aas-comment {
	padding: 16px 0;
}

/* A reply sits under its comment, a little in. */
.aas-comment .aas-comment {
	grid-column: 2;
	margin-top: 12px;
	padding: 12px 0 0;
}

.aas-comment-letter {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--cream-fill);
	color: var(--accent-text);
	font-size: var(--text-sm);
	font-weight: 600;
}

.bypostauthor > .aas-comment-letter {
	background: var(--accent);
	color: var(--on-dark);
}

.aas-comment-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: 8px;
	margin: 0;
	color: var(--ink-muted);
	font-size: var(--text-xs);
}

.aas-comment-name {
	color: var(--ink);
	font-size: var(--text-sm);
	font-weight: 600;
}

.aas-comment-wait {
	padding: 1px 8px;
	border-radius: var(--radius-pill);
	background: var(--cream-fill);
	color: var(--accent-text);
}

.aas-comment-text p {
	margin: 4px 0 0;
	color: var(--ink-soft);
	font-size: var(--text-md);
	line-height: 1.55;
}

.aas-comment-reply {
	margin: 4px 0 0 -10px;
	font-size: var(--text-sm);
}

.aas-comment-reply a {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	padding: 0 10px;
	border-radius: var(--radius-pill);
	color: var(--accent);
	font-weight: 500;
	transition: var(--ease);
}

.aas-comment-reply a:is(:hover, :focus) {
	background: var(--cream-fill);
	color: var(--accent);
}

/* The form: one line until it's used, then the name, email and Send. */
.aas-reply-title {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
}

.aas-comment .aas-reply-title {
	position: static;
	width: auto;
	height: auto;
	clip: auto;
	margin: 12px 0 8px;
	font-size: var(--text-sm);
	font-weight: 600;
}

.aas-comment .aas-reply-title small {
	margin-left: 8px;
	font-size: var(--text-xs);
}

.aas-comment-form {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 0;
}

.aas-comment-form > p {
	margin: 0;
}

.aas-comment-form .comment-form-comment {
	order: 0;
	flex: 1 1 100%;
}

.aas-comment-form .comment-form-author,
.aas-comment-form .comment-form-email {
	order: 1;
	flex: 1 1 200px;
}

.aas-comment-form .logged-in-as {
	order: 2;
	flex: 1 1 auto;
}

.aas-comment-form .form-submit {
	order: 2;
	margin-left: auto;
}

.aas-comment-form .aas-comment-note {
	order: 3;
	flex: 1 1 100%;
}

.aas-comments .aas-comment-form input {
	height: 44px;
	padding: 0 18px;
	border-radius: 22px;
}

.aas-comments .aas-comment-form textarea {
	display: block;
	min-height: 48px;
	padding: 12px 18px;
	border-radius: 24px;
	background: var(--cream-soft);
	line-height: 1.4;
	resize: none;
	transition: var(--ease), min-height 0.2s;
}

.aas-comment-form.is-open textarea,
.aas-comment-form:focus-within textarea {
	min-height: 112px;
	border-radius: 16px;
	background: var(--ground);
	resize: vertical;
}

.aas-comment-form:not(.is-open):not(:focus-within) > p:not(.comment-form-comment) {
	display: none;
}

.aas-comments .logged-in-as,
.aas-comment-note {
	color: var(--ink-muted);
	font-size: var(--text-xs);
}

.aas-comments textarea,
.aas-comments input[type="text"],
.aas-comments input[type="email"],
.aas-comments input[type="url"],
.aas-form input[type="text"],
.aas-form input[type="email"],
.aas-form select,
.aas-form textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 10px 14px;
	border: 1px solid var(--line);
	border-radius: 12px;
	background: #ffffff;
	color: var(--ink);
	font: inherit;
	font-size: var(--text-md);
	transition: border-color 0.15s, box-shadow 0.15s;
}

.aas-comments textarea:hover,
.aas-comments input:hover,
.aas-form input:hover,
.aas-form select:hover,
.aas-form textarea:hover {
	border-color: var(--gold);
}

.aas-comments textarea:focus,
.aas-comments input:focus,
.aas-form input:focus,
.aas-form select:focus,
.aas-form textarea:focus {
	outline: none;
	border-color: var(--gold);
	box-shadow: 0 0 0 3px var(--cream-fill);
}

.aas-comments .form-submit .submit,
.aas-form .ff-btn-submit,
.aas-contact button[type="submit"] {
	height: var(--control);
	padding: 0 20px;
	border: 0;
	border-radius: 999px;
	background: var(--ink);
	color: #ffffff;
	font: inherit;
	font-size: var(--text-sm);
	font-weight: 500;
	cursor: pointer;
	transition: background-color 0.15s;
}

.aas-comments .form-submit .submit:is(:hover, :focus),
.aas-form .ff-btn-submit:is(:hover, :focus),
.aas-contact button[type="submit"]:is(:hover, :focus) {
	background: var(--accent);
	color: var(--on-dark);
}

/* ── Forms (Fluent Forms) ────────────────────────────────────────────── */

.aas-form .ff-el-group {
	margin-bottom: 14px;
}

.aas-form .ff-el-input--label label {
	font-size: var(--text-sm);
	font-weight: 500;
}

/* The newsletter form sits on the dark box: one row, white on dark. */
.aas-form--newsletter .fluentform form {
	display: flex;
	gap: 6px;
	width: 100%;
	max-width: 420px;
	margin: 0 auto;
}

.aas-form--newsletter .ff-el-group {
	flex: 1 1 auto;
	margin: 0;
}

.aas-form--newsletter .ff-el-input--label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
}

.aas-form--newsletter input[type="email"] {
	height: var(--control);
	border-color: rgb(255 255 255 / 0.3);
	border-radius: 999px;
	background: rgb(255 255 255 / 0.12);
	color: #ffffff;
}

.aas-form--newsletter input[type="email"]::placeholder {
	color: rgb(255 255 255 / 0.7);
}

.aas-form--newsletter .ff-btn-submit {
	background: #ffffff;
	color: var(--ink);
}

.aas-form--newsletter .ff-btn-submit:hover {
	background: var(--cream, #f3e6c8);
	color: var(--ink);
}

.aas-form--newsletter .ff-el-group.ff_submit_btn_wrapper {
	flex: 0 0 auto;
}

.aas-form--newsletter .ff-message-success {
	border: 0;
	background: none;
	color: #ffffff;
	box-shadow: none;
}

/* The built-in contact form, used until a form plugin is set up. */

.aas-contact .aas-field {
	margin: 0 0 14px;
}

.aas-contact label {
	display: block;
	margin-bottom: 6px;
	font-size: var(--text-sm);
	font-weight: 500;
}

.aas-field--trap {
	position: absolute;
	left: -9999px;
}

.aas-form-done,
.aas-form-error {
	margin: 0 0 14px;
	padding: 14px 16px;
	border-radius: 12px;
	font-size: var(--text-sm);
}

.aas-form-done {
	background: #ffffff;
	color: var(--accent);
	font-weight: 500;
}

.aas-form-error {
	background: #fdecea;
	color: #8a1f11;
}

/* ── 404: the Gallery design replaces GeneratePress's own message ────── */

.error404 .site-main > .inside-article,
.error404 .site-main > .no-results {
	display: none;
}

/* The broken record on the 404 page turns slowly; the notes drift up. */

@keyframes aas-404-spin {
	to {
		transform: rotate(360deg);
	}
}

@keyframes aas-404-float {
	0%, 100% {
		opacity: 0.35;
		translate: 0 6px;
	}
	50% {
		opacity: 1;
		translate: 0 -6px;
	}
}

.aas-404-disc {
	animation: aas-404-spin 18s linear infinite;
}

.aas-404-note {
	animation: aas-404-float 4s ease-in-out infinite;
	animation-delay: var(--d);
}

@media (prefers-reduced-motion: reduce) {
	.aas-404-disc,
	.aas-404-note {
		animation: none;
	}
}

/* ── Browsers that can't blur ────────────────────────────────────────── */

/* Internet Explorer and Opera Mini would show the enlarged cover sharp
   behind the title. They get the plain dark hero colour instead. (IE skips
   @supports completely, so the cover is hidden first and shown inside it.) */
.aas-blur {
	visibility: hidden;
}

@supports (filter: blur(1px)) {
	.aas-blur {
		visibility: visible;
	}
}

/* ── The ring of words around the home page cover ([aas_ring]) ───────── */

/* The SVG fills the box around the cover; the words sit just outside the
   cover's edge, in cream, spaced out to fill the square. */
.aas-ring {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
	pointer-events: none;
}

.aas-ring text {
	fill: var(--cream);
	font-family: inherit;
	font-size: 21px;
	font-weight: 500;
}