/*
 * Move Records – Bootstrap 5 custom styles
 * Load after Bootstrap. Replaces style-screen.css for root site.
 */

/* --------------------------------------------------------------------------- */
/* Variables (section colours – Bootstrap-native via custom properties)       */
/* --------------------------------------------------------------------------- */

:root {
	--move-body-bg: #fff;
	--move-nav-bg: #555;
	--move-subnav-bg: #e9ecef;
	--move-subnav-active: #444;
	--move-text: #444;
	--move-link: #5151c1;
	--move-link-hover: #3333b2;
	--move-heading: #63797f;
	--move-accent: #444;
}
[data-section="music"] {
}
[data-section="artists"] {
}
[data-section="about"] {
}

/* --------------------------------------------------------------------------- */
/* Base                                                                        */
/* --------------------------------------------------------------------------- */

body {
	font-family: "Raleway", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 1.1rem;
	line-height: 1.6;
	color: var(--move-text);
	background-color: var(--move-body-bg);
	margin: 0;
}

/* --------------------------------------------------------------------------- */
/* Site-wide max-width (75em) – header, nav, content, footer                    */
/* --------------------------------------------------------------------------- */

header > .container-fluid,
nav > .container-fluid,
section > .container-fluid,
main > .container-fluid,
footer > .container-fluid {
	max-width: 70em;
	margin-left: auto;
	margin-right: auto;
	padding-left: 1rem;
	padding-right: 1rem;
}

@media (min-width: 576px) {
	header > .container-fluid,
	nav > .container-fluid,
	section > .container-fluid,
	main > .container-fluid,
	footer > .container-fluid {
		padding-left: 1.5rem;
		padding-right: 1.5rem;
	}
}


/* --------------------------------------------------------------------------- */
/* Brand strip (logo + tagline above nav)                                       */
/* --------------------------------------------------------------------------- */

header {
	padding-top: 0.65rem;
	padding-bottom: 0.65rem;
	background: #ccccff;
	color: #3333b2;
}
header .navbar-brand,
header .navbar-brand:hover {
	color: #3333b2;
}
header .brand-name {
	font-family: "Poiret One", sans-serif;
	font-size: 2.5rem;
	line-height: 1.1;
}
header .tagline {
	color: #3333b2;
	font-size: 1rem;
	cursor: default;
	font-style: italic;
}






/* --------------------------------------------------------------------------- */
/* Main navbar                                                                 */
/* --------------------------------------------------------------------------- */

.move-navbar {
	background: #3333b2 !important;
}
.move-navbar .navbar-brand {
	font-family: "Raleway", sans-serif; /* previously a headline font */
	font-weight: 500;
	color: #ccccff !important;
}
.move-navbar .navbar-brand:hover {
	color: #ccccff !important;
}
.move-navbar .nav-link {
	color: #ccccff !important;
	font-weight: 500;
}
.move-navbar .nav-link:hover {
	color: #fff !important;
}
.move-navbar .nav-link.active {
	background-color: rgba(204, 204, 255, 0.2);
	color: #ccccff !important;
	border-radius: 0.25rem;
}
.move-navbar .navbar-nav.nav-links {
	flex-wrap: wrap;
	gap: 0.25rem 0.5rem;
	margin-bottom: 0;
	margin-right: 0;
}
.move-navbar .nav-link {
	padding: 0.5rem 0.5rem;
}
.move-navbar .form-control {
	padding: 0.2rem 0.5rem;
}
.move-navbar .btn-outline-light {
	color: #ccccff;
	border-color: #ccccff;
}
.move-navbar .btn-outline-light:hover {
	color: #3333b2;
	background-color: #ccccff;
	border-color: #ccccff;
}

/* --------------------------------------------------------------------------- */
/* Subnav bar                                                                  */
/* --------------------------------------------------------------------------- */

.subnav-bar {
	background-color: #ccccff;
}
.subnav-bar .navbar-nav {
	flex-direction: row;
	flex-wrap: wrap;
	gap: 0.25rem;
}
.subnav-bar .nav-link {
	color: #3333b2;
	padding: 0.5rem 0.75rem;
	border-radius: 0.25rem;
}
.subnav-bar .nav-link:hover {
	background-color: rgba(51, 51, 178, 0.1);
	color: #3333b2;
}
.subnav-bar .nav-link.active {
	background-color: #3333b2;
	color: #ccccff !important;
}

/* --------------------------------------------------------------------------- */
/* Home page promotional bar                                                   */
/* --------------------------------------------------------------------------- */

section.about {
	background: none;
	margin-top: 1px;
	padding: 1.5rem 0;
}
section.about .container-fluid::after {
	content: "";
	display: table;
	clear: both;
}
section.about .welcome-logo {
	float: left;
	width: 8rem;
	aspect-ratio: 2084 / 3750;
	margin: 0 1.25rem 0.75rem 0;
	background-color: #3333b2;
	-webkit-mask: url(/skin/logo/tp.svg) center / contain no-repeat;
	mask: url(/skin/logo/tp.svg) center / contain no-repeat;
}
section.about h1,
section.about h2 {
	font-weight: 400;
	font-size: 3rem;
	line-height: 1.1;
}
section.about h1 {
	font-family: "Raleway", sans-serif; /* previously a headline font */
}
section.about h2 {
	font-family: "Poiret One", sans-serif;
}
section.about .card.content-item {
	border: none !important;
	box-shadow: none;
}
section.about a,
section.about a:visited {
	color: var(--move-link);
}
section.about a:hover,
section.about a:active {
	color: var(--move-link-hover);
}

/* --------------------------------------------------------------------------- */
/* Footer                                                                      */
/* --------------------------------------------------------------------------- */

footer {
	background: #ccccff !important;
	color: #3333b2;
	margin-top: 2rem;
	padding-top: 2rem;
}
footer .container-fluid > div {
	font-size: 0.9rem;
}
footer a {
	color: #3333b2;
	text-decoration: none;
}
footer a:hover {
	color: #222280;
	border-bottom-color: transparent;
}
footer .footer-heading {
	font-family: "Raleway", sans-serif; /* previously a headline font */
	font-size: 1.1rem;
	font-weight: 500;
	color: #3333b2;
	border-bottom: 1px solid #3333b233;
	margin: 0 0 0.75rem;
	padding-bottom: 0.5rem;
}
footer .footer-contact .row {
	margin-left: 0;
	margin-right: 0;
}
footer .footer-contact .row + .row {
	margin-top: 0.35rem;
}
footer .footer-contact dt {
	font-weight: 600;
	margin: 0 !important;
	padding: 0;
}
footer .footer-contact dd {
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 0;
	padding: 0;
}
footer .border-top {
	border-color: #3333b233 !important;
}
footer .text-muted {
	color: #3333b2 !important;
}

/* Catalogue page: 3 columns when sidebar narrows the results area */
@media (min-width: 992px) {
	.catalogue-results .row > [class*="col-"] {
		flex: 0 0 33.3%;
		max-width: 33.3%;
	}
}

/*
 * Max rows: cap visible items to 1 or 2 rows per breakpoint.
 * Assumes children use col-6 / col-sm-4 / col-lg-3 (2 / 3 / 4 per row).
 * Uses :nth-of-type() so only column divs are counted (ignores text nodes from CFML/whitespace).
 */
.row-max-1 > div:nth-of-type(n+3) {
	display: none;
}
.row-max-2 > div:nth-of-type(n+5) {
	display: none;
}
@media (min-width: 576px) {
	.row-max-1 > div:nth-of-type(n+3) {
		display: block;
	}
	.row-max-1 > div:nth-of-type(n+4) {
		display: none;
	}
	.row-max-2 > div:nth-of-type(n+5) {
		display: block;
	}
	.row-max-2 > div:nth-of-type(n+7) {
		display: none;
	}
}
@media (min-width: 992px) {
	.row-max-1 > div:nth-of-type(n+4) {
		display: block;
	}
	.row-max-1 > div:nth-of-type(n+5) {
		display: none;
	}
	.row-max-2 > div:nth-of-type(n+7) {
		display: block;
	}
}

/* --------------------------------------------------------------------------- */
/* Content area – typography and legacy classes (until templates use cards)     */
/* --------------------------------------------------------------------------- */

main {
	margin: 1.5rem 0;
	min-height: 30em;
}

b, strong {
	font-weight: 600;
}

main .photo-credit {
	font-size: 0.6rem;
	color: #0006;
}

main h1,
main h2 {
	font-weight: 400;
	font-size: 4rem;
	line-height: 1.1;
	margin: 0.75rem 0;
	color: var(--move-heading);
}
main h1 {
	font-family: "Raleway", sans-serif; /* previously a headline font */
}
main h2 {
	font-family: "Poiret One", sans-serif;
}
main h1.short, main h2.short { font-size: 4.5rem; }
main h1.long, main h2.long { font-size: 3.5rem; }
main h1.longer, main h2.longer { font-size: 3.5rem; }
main h1.longest, main h2.longest { font-size: 3rem; } 

main h3 {
	font-family: "Raleway", sans-serif; /* previously a headline font */
	font-weight: 500;
	font-size: 2.2rem;
	color: var(--move-accent);
	margin-top: 1.5rem;
	margin-bottom: 0.7rem;
	/*
	border-top: 2px dashed #ccc;
	padding-top: 0.3em;
	*/
}

main h4 {
	font-family: "Raleway", sans-serif; /* previously a headline font */
	font-weight: 400;
	color: var(--move-accent);
}
main h4 a {
	color: inherit;
	text-decoration: none;
}
main h4 a:hover {
	text-decoration: underline;
}

main div.standfirst p {
	font-size: 1.5rem;
	font-weight: 350;
	line-height: 1.35;
	color: var(--move-heading);
	margin: 0.75rem 0;
	font-size: 1.4rem;
}
main div.smaller-standfirst p {
	font-size: 1.3rem;
	font-weight: 300;
	margin: 0.9em 0;
	color: var(--move-heading);
}

main p {
	margin: 0.9em 0;
}

main a:link,
main a:visited {
	color: var(--move-link);
}
main a:hover,
main a:active {
	color: var(--move-link-hover);
}

main div.wrappable {
	clear: none !important;
}

/* Columns (legacy) */
main div.columns {
	column-width: 21em;
	column-gap: 1.5em;
	clear: both;
}
main div.columns.twocolumn {
	column-width: 30em;
	column-gap: 1.5em;
}
main div.columns div.item {
	display: inline-block;
	width: 100%;
}
main div.columns div.item h4,
main div.columns div.item p {
	margin: 0 0 0.25em;
}

/* Item (legacy – until replaced by .content-item / card) */
main div.item {
	clear: left;
	margin: 1rem 0;
	padding: 0;
}
main div.item.divided {
	border-top: 2px dashed #ddd;
	margin-top: 1rem;
	padding-top: 1rem;
}
main div.item h4 {
	margin: 0 0 0 142px;
}
main div.item p {
	margin: 0 0 0 145px;
}
main div.item ul {
	margin: 0.3em 0 0.4em 145px;
}
main div.item.small h4,
main div.item.small p,
main div.item.small ul {
	margin-left: 90px !important;
}
main div.item div.graphic {
	float: left;
}
main div.item div.graphic img {
	margin: 5px 12px 15px 0;
	border: 4px solid #e6e6e6;
	padding: 2px;
}

/* Content cards (Bootstrap card used in content templates) */
body .card {
	border: none;
}
body .content-item,
body .card.content-item {
	overflow: hidden;
}
/* Spacing below cards that contain an audio player */
body .card.content-item:has(.disc-card-mini-player) {
	margin-bottom: 0.5rem;
}
body .content-item .card-body h4,
body .card.content-item .card-body h4 {
	font-size: 1.1rem;
	margin: 0 0 0.25rem;
}
body .content-item .card-body h4 a,
body .card.content-item .card-body h4 a {
	color: var(--move-accent);
}
main .content-item .card-body p,
main .card.content-item .card-body p {
	margin: 0 0 0.25rem;
	font-size: 0.9375rem;
}
main .content-item .card-img-top,
main .card.content-item .card-img-top {
	border-bottom: 1px solid #e6e6e6;
}

/* Artist cards: circular image */
main .card.artistCard > a,
main .card.artistCard > div.card-img-top {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	overflow: hidden;
	border-bottom: none;
}
main .card.artistCard .card-img-top.img-fluid,
main .card.artistCard > a .img-fluid,
main .card.artistCard img.card-img-top {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 35%;
	border: none;
}

/* Ensemble cards: variable aspect-ratio, circular image */
main .card.ensembleCard > a,
main .card.ensembleCard > div.card-img-top {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	overflow: hidden;
	border-bottom: none;
	background: none;
}

main .card.ensembleCard .card-img-top.img-fluid,
main .card.ensembleCard > a .img-fluid,
main .card.ensembleCard img.card-img-top {
	width: 100%;
	height: 100%;
	max-width: 100%;
	max-height: 100%;
	object-fit: cover;
	border-radius: 1em;
	border: none;
	display: block;
}

/* Disc cards: rounded image with border */
main .card.discCard img.card-img-top,
main .card.discCard > a .img-fluid {
	border: 1px solid gray;
	padding: 0;
	border-radius: 0.5em;
}

/* Disc cards: rounded image with border */
main .card.discCardMini img.card-img-top,
main .card.discCardMini > a .img-fluid {
	border: 0;
	padding: 0;
	border-radius: 0;
	border-bottom: 1px solid #bbb;
}
main .card.discCardMini.content-item {
	border-radius: 0.4rem;
}

/* Disc card mini audio player */
.disc-card-mini-player {
	margin-bottom: -0.2rem;
}
.disc-card-mini-player .btn-link {
	color: var(--bs-body-color, #212529);
	text-decoration: none;
}
.disc-card-mini-player .btn-link:hover {
	color: var(--bs-primary, #0d6efd);
}
.disc-card-mini-player.dcp-playing .dcp-icon-play {
	display: none !important;
}
.disc-card-mini-player.dcp-playing .dcp-icon-pause {
	display: inline !important;
}
.disc-card-mini-player:not(.dcp-playing) .dcp-icon-play {
	display: inline;
}
.disc-card-mini-player:not(.dcp-playing) .dcp-icon-pause {
	display: none !important;
}

main .content-item .list-group-item,
main .card.content-item .list-group-item {
	border-left: 0;
	border-right: 0;
	padding: 0.25rem 0.75rem;
	font-size: 0.875rem;
}

main .content-item-thumb {
	max-height: 72px;
	width: auto;
}

/* Track listing (disc page) */
main div.tracklist p,
main div.tracklist li.solo {
	margin: 0.3em 0 0 0 !important;
	padding: 0.3em 0 0 0;
	border-top: 1px dashed #ddd;
}
main div.tracklist a,
main div.tracklist em,
main div.tracklist small,
main div.tracklist var {
	margin-left: 0.5em;
}
main div.tracklist small {
	color: #888;
}
main div.tracklist var {
	font: 12px monospace;
	font-style: normal;
}

/* Details list */
main dl.details {
	font-size: 0.8125rem;
	float: left;
	width: 38em;
	margin: 1em 0;
	padding: 0;
	border-bottom: 1px dashed #ddd;
}
main dl.details dt {
	clear: left;
	float: left;
	width: 12em;
	margin: 0;
	padding: 4px 0.24em;
	border-top: 1px dashed #ddd;
	font-weight: bold;
}
main dl.details dd {
	float: left;
	width: 25em;
	margin: 0;
	padding: 4px 0.24em;
	border-top: 1px dashed #ddd;
}

main #adminlink {
	position: fixed;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	z-index: 1060;
	font-weight: bold;
}

main #adminlink a:link,
main #adminlink a:visited {
	background-color: #d4145a;
	color: white;
	padding: 2px 4px;
	font-weight: bold;
	font-size: 0.6875rem;
}

/* floated cover / booklet / portrait / image aside */
.feature-image img {
	border-radius: 1em;
	/* box-shadow: 0px 2px 30px #0003; */
	/* border: 0.7px solid #0005; */
}
.feature-article img {
	border-radius: 0.5em;
}
.feature-artist img {
	border-radius: 1.2em;
}
.feature-disc img {
	border-radius: 0.5em;
	border: 0.7px solid #0005;
}







/* Smaller text on mobile: scale root so all rem-based sizes follow */
/* At the bottom of the CSS file so they override other font sizes */
@media (max-width: 767px) {
	html {
		font-size: 90%;
	}
	main h1, main h2 {
		font-size: 3rem;
	}
}
@media (max-width: 500px) {
	.move-navbar {
		font-size: 85%;
	}
	.move-navbar .nav-link {
		padding: 0.5rem 0.2rem !important;
	}
	main h1, main h2 {
		font-size: 2.7rem;
	}
	main h1.short, main h2.short { font-size: 3rem; }
	main h1.long, main h2.long { font-size: 2.4rem; }
	main h1.longer, main h2.longer { font-size: 2.4rem; }
	main h1.longest, main h2.longest { font-size: 2rem; } 
}