/*
 * 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-nav-bg: #555;
	--move-nav-active: #444;
	--move-body-bg: #fff;
	--move-text: #444;
	--move-heading: #63797f;
	--move-accent: #498399;
	--move-link: #4455bb;
	--move-link-hover: #5566ff;
}

[data-section="news"] {
	--move-nav-active: #dd6900;
	--move-heading: #844b35;
	--move-accent: #dd6900;
}
[data-section="music"] {
	--move-nav-active: #cd1269;
	--move-heading: #773355;
	--move-accent: #cd1269;
}
[data-section="artists"] {
	--move-nav-active: #2ba477;
	--move-heading: #486b5f;
	--move-accent: #2ba477;
}
[data-section="services"] {
	--move-nav-active: #669900;
	--move-heading: #61704c;
	--move-accent: #669900;
}
[data-section="about"] {
	--move-nav-active: #a312cc;
	--move-heading: #774488;
	--move-accent: #a312cc;
}
[data-section="studio"] {
	--move-body-bg: #2d2726;
	--move-text: #cec9c6;
	--move-heading: #7e9164;
	--move-accent: #7e9164;
	--move-link: #99aadd;
	--move-link-hover: #aabbee;
}

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

body {
	font-family: "Montserrat", -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                    */
/* --------------------------------------------------------------------------- */

.brand-strip .container-fluid,
.move-navbar .container-fluid,
.subnav-bar .container-fluid,
#container,
.move-footer .container-fluid {
	max-width: 70em;
	margin-left: auto;
	margin-right: auto;
	padding-left: 1rem;
	padding-right: 1rem;
}

@media (min-width: 576px) {
	.brand-strip .container-fluid,
	.move-navbar .container-fluid,
	.subnav-bar .container-fluid,
	#container,
	.move-footer .container-fluid {
		padding-left: 1.5rem;
		padding-right: 1.5rem;
	}
}

/* Smaller text on mobile: scale root so all rem-based sizes follow */
@media (max-width: 767px) {
	html {
		font-size: 85%;
	}
}
@media (max-width: 500px) {
	html {
		font-size: 80%;
	}
}

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

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

#content strong {
	font-weight: 600;
}

#content h2 {
	font-family: "Lexend", sans-serif;
	font-weight: 400;
	font-size: 4rem;
	letter-spacing: -0.03em;
	line-height: 1.1;
	margin: 0.75rem 0;
	color: var(--move-heading);
}
#content h2.short { font-size: 4.5rem; }
#content h2.long { font-size: 3.5rem; }
#content h2.longer { font-size: 3.5rem; }
#content h2.longest { font-size: 3rem; }

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

#content h4 {
	font-family: "Lexend", sans-serif;
	font-weight: 400;
	color: var(--move-accent);
}
#content h4 a {
	color: inherit;
	text-decoration: none;
}
#content h4 a:hover {
	text-decoration: underline;
}

#content div.standfirst p {
	font-size: 1.25rem;
	line-height: 1.35;
	color: var(--move-heading);
	margin: 0.75rem 0;
}
#content div.smaller-standfirst p {
	font-size: 1.1rem;
	margin: 0.9em 0;
	color: #222;
}

#content p {
	margin: 0.9em 0;
}

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

#content div.wrappable {
	clear: none !important;
}

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

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

/* Content cards (Bootstrap card used in content templates) */
#content .content-item,
#content .card.content-item {
	margin-bottom: 1.5rem;
	border: 1px solid #aaa;
	box-shadow: 2px 2px 12px #ddd;
	border-radius: 0.9rem;
	overflow: hidden;
}
#content .content-item .card-body h4,
#content .card.content-item .card-body h4 {
	font-size: 1.1rem;
	margin: 0 0 0.25rem;
}
#content .content-item .card-body h4 a,
#content .card.content-item .card-body h4 a {
	color: var(--move-accent);
}
#content .content-item .card-body p,
#content .card.content-item .card-body p {
	margin: 0 0 0.25rem;
	font-size: 0.9375rem;
}
#content .content-item .card-img-top,
#content .card.content-item .card-img-top {
	border-bottom: 1px solid #e6e6e6;
}

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

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

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

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

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

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

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

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

.brand-strip {
	background: #f8f9fa;
	border-bottom: 1px solid #dee2e6;
	padding-top: 0.65rem;
	padding-bottom: 0.65rem;
}
.brand-strip .navbar-brand {
	font-family: "Lexend", sans-serif;
	font-weight: 500;
	font-size: 1.5rem;
	color: #333;
	text-decoration: none;
}
.brand-strip .navbar-brand:hover {
	color: #000;
}
.brand-strip .tagline {
	font-size: 0.875rem;
}

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

.move-navbar {
	background: linear-gradient(to right, #95256D, #C56215) !important;
}
.move-navbar .navbar-brand {
	font-family: "Lexend", sans-serif;
	font-weight: 500;
	color: #fff !important;
}
.move-navbar .navbar-brand:hover {
	color: #fff !important;
}
.move-navbar .nav-link {
	color: rgba(255, 255, 255, 0.9) !important;
	font-weight: 500;
}
.move-navbar .nav-link:hover {
	color: #fff !important;
}
.move-navbar .nav-link.active {
	background-color: rgba(255, 255, 255, 0.2);
	color: #fff !important;
	border-radius: 0.25rem;
}

/* Section-specific active nav item (data-section drives accent) */
[data-section="news"] .move-navbar .nav-item.news .nav-link.active,
[data-section="music"] .move-navbar .nav-item.music .nav-link.active,
[data-section="artists"] .move-navbar .nav-item.artists .nav-link.active,
[data-section="studio"] .move-navbar .nav-item.studio .nav-link.active,
[data-section="services"] .move-navbar .nav-item.services .nav-link.active,
[data-section="about"] .move-navbar .nav-item.about .nav-link.active {
	background-color: rgba(255, 255, 255, 0.2);
}

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

.subnav-bar {
	background-color: #e9ecef;
	border-bottom: 1px solid #dee2e6;
}
.subnav-bar .navbar-nav {
	flex-direction: row;
	flex-wrap: wrap;
	gap: 0.25rem;
}
.subnav-bar .nav-link {
	color: #495057;
	padding: 0.5rem 0.75rem;
	border-radius: 0.25rem;
}
.subnav-bar .nav-link:hover {
	background-color: #dee2e6;
	color: #212529;
}
.subnav-bar .nav-link.active {
	background-color: var(--move-accent);
	color: #fff !important;
}

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

.move-footer {
	background-color: #555;
	color: #ccc;
	margin-top: 2rem;
	padding-top: 2rem;
}
.move-footer a {
	color: #ccc;
	text-decoration: none;
	border-bottom: 1px dashed #999;
}
.move-footer a:hover {
	color: #fff;
	border-bottom-color: transparent;
}
.move-footer .footer-heading {
	font-family: "Lexend", sans-serif;
	font-size: 1.1rem;
	font-weight: 500;
	color: #ddd;
	border-bottom: 1px solid #666;
	margin: 0 0 0.75rem;
	padding-bottom: 0.5rem;
}
.move-footer .footer-contact .row {
	margin-left: 0;
	margin-right: 0;
}
.move-footer .footer-contact .row + .row {
	margin-top: 0.35rem;
}
.move-footer .footer-contact dt {
	font-weight: 600;
	margin: 0 !important;
	padding: 0;
}
.move-footer .footer-contact dd {
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 0;
	padding: 0;
}
.move-footer .border-top {
	border-color: #666 !important;
}
.move-footer .text-muted {
	color: #afa8aa !important;
}

/* --------------------------------------------------------------------------- */
/* Studio section overrides                                                    */
/* --------------------------------------------------------------------------- */

body.studio .brand-strip {
	background: #3d3635;
	border-color: #403634;
}
body.studio .brand-strip .navbar-brand,
body.studio .brand-strip .tagline {
	color: #fff;
}
body.studio .brand-strip .tagline {
	color: #fff;
}
body.studio .move-footer {
	background-color: #262221;
}

body.studio #strap1 {
	background: url(/skin/studio-piano.jpg) no-repeat center;
	background-size: 1210px 400px;
	width: 100%;
	height: 400px;
	border-radius: 0.5em 0.5em 0 0;
}
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 150dpi) {
	body.studio #strap1 {
		background-image: url(/skin/studio-piano@2x.jpg);
	}
}
body.studio #strap2 {
	background: url(/skin/studio-colour.jpg) no-repeat center;
	width: 100%;
	height: 250px;
}