/* ==========================================================================
   Peak Music and Dance — theme extensions
   Upload to: wp-content/themes/crafto-child/pmd-theme-extensions.css

   Part 1  Transparent header over the page banner
   Part 2  Banner sizing on transparent pages
   Part 3  Single post sidebar

   How the header works, so the selectors make sense:

   Crafto's nav is already position:fixed;top:0 at all times, and the page
   title banner already starts at y=0 underneath it. The banner is not below
   the header, it is behind it. The only reason you don't see that today is
   that the nav's inner Elementor container is painted solid white.

   On scroll, crafto's main.js adds .sticky to header.site-header and then
   .sticky-active shortly after. Crafto's own theme-header.css already
   repaints the bar white and swaps .default-logo out for .alt-logo at that
   point. So none of the scrolled state needs writing. Everything below only
   describes the un-scrolled state, hence :not(.sticky) throughout.

   Note: there is a ~300ms window where .sticky is on but .sticky-active is
   not. Scoping to :not(.sticky-active) would keep white menu text painted
   over white content while the bar slides in, which flashes on every scroll.
   ========================================================================== */


/* ==========================================================================
   PART 1 — TRANSPARENT HEADER
   Applies only to pages with the "Transparent header" toggle switched on.
   ========================================================================== */

/* --- The bar itself ------------------------------------------------------ */

body.pmd-transparent-header header#masthead:not(.sticky) nav.navbar > .elementor > .elementor-element {
	background-color: transparent;
	box-shadow: none;
}

body.pmd-transparent-header header#masthead:not(.sticky) nav.navbar {
	box-shadow: none;
}

/* --- Menu links ---------------------------------------------------------- */

body.pmd-transparent-header header#masthead:not(.sticky) .navbar-nav > li > a,
body.pmd-transparent-header header#masthead:not(.sticky) .navbar-nav li .nav-link,
body.pmd-transparent-header header#masthead:not(.sticky) .navbar-nav > li > .dropdown-toggle,
body.pmd-transparent-header header#masthead:not(.sticky) .navbar-nav > li > a i,
body.pmd-transparent-header header#masthead:not(.sticky) .navbar-nav > li > a svg {
	color: #fff;
	fill: #fff;
}

/* Keep the active/current page readable rather than fully white on white */
body.pmd-transparent-header header#masthead:not(.sticky) .navbar-nav > li.current-menu-item > a {
	color: rgba(255, 255, 255, 0.75);
}

body.pmd-transparent-header header#masthead:not(.sticky) .navbar-nav > li > a:hover {
	color: rgba(255, 255, 255, 0.7);
}

/* Dropdown panels keep their own white background, so their links stay dark.
   Without this they inherit the white above and vanish. */
body.pmd-transparent-header header#masthead:not(.sticky) .navbar-nav .sub-menu a,
body.pmd-transparent-header header#masthead:not(.sticky) .dropdown-menu a,
body.pmd-transparent-header header#masthead:not(.sticky) .megamenu-content a {
	color: #232323;
	fill: #232323;
}

/* --- Social icons -------------------------------------------------------- */

body.pmd-transparent-header header#masthead:not(.sticky) .social-icons-wrapper ul li a.elementor-icon,
body.pmd-transparent-header header#masthead:not(.sticky) .social-icons-wrapper ul li a.elementor-icon i,
body.pmd-transparent-header header#masthead:not(.sticky) .social-icons-wrapper ul li a.elementor-icon svg {
	color: #fff;
	fill: #fff;
}

body.pmd-transparent-header header#masthead:not(.sticky) .social-icons-wrapper ul li a.elementor-icon:hover,
body.pmd-transparent-header header#masthead:not(.sticky) .social-icons-wrapper ul li a.elementor-icon:hover i,
body.pmd-transparent-header header#masthead:not(.sticky) .social-icons-wrapper ul li a.elementor-icon:hover svg {
	color: rgba(255, 255, 255, 0.7);
	fill: rgba(255, 255, 255, 0.7);
}

/* --- Call to action button ----------------------------------------------
   The red "Contact" pill becomes a white outlined button on the transparent
   state, and fills solid white on hover. If you'd rather keep it red so it
   still shouts, delete this block — the red reads fine on a darkened photo.
   ------------------------------------------------------------------------ */

body.pmd-transparent-header header#masthead:not(.sticky) .navbar-nav > li.CTA-btn > a {
	background-color: transparent;
	border: 2px solid #fff;
	color: #fff;
}

body.pmd-transparent-header header#masthead:not(.sticky) .navbar-nav > li.CTA-btn > a:hover {
	background-color: #fff;
	border-color: #fff;
	color: #232323;
}

/* --- Mobile hamburger ---------------------------------------------------- */

body.pmd-transparent-header header#masthead:not(.sticky) .navbar-toggler-line {
	background-color: #fff;
}

/* When the mobile menu is actually open the panel is white, so put the text
   back to dark or the whole menu reads as blank. */
body.pmd-transparent-header header#masthead:not(.sticky) .navbar-collapse.show .navbar-nav > li > a,
body.pmd-transparent-header header#masthead:not(.sticky) .navbar-collapse.collapsing .navbar-nav > li > a,
body.pmd-transparent-header header#masthead:not(.sticky) .navbar-collapse.show .navbar-nav li .nav-link {
	color: #232323;
}

/* --- Logo swap -----------------------------------------------------------
   Crafto shows .default-logo at rest and .alt-logo once .sticky-active is on.
   So: set the Site Logo widget's main logo to the WHITE png and its sticky
   logo to the existing BLACK png, and the swap is already correct on
   transparent pages with no CSS at all.

   The rule below covers the other half of that deal: on every page that has
   NOT opted in, force the black .alt-logo to show at rest too, otherwise a
   white logo would sit on the white bar and disappear.
   ------------------------------------------------------------------------ */

body:not(.pmd-transparent-header) header .navbar-brand .default-logo {
	visibility: hidden;
	opacity: 0;
	width: 0;
}

body:not(.pmd-transparent-header) header .navbar-brand .alt-logo {
	visibility: visible;
	opacity: 1;
	width: auto;
}

/* --- Mobile logo -----------------------------------------------------------
   Below 991px crafto forces .mobile-logo visible and hides .default-logo and
   .alt-logo, all with !important, and it does NOT make an exception for the
   sticky state. So on phones the logo never swaps.

   That is why the mobile slot stays the BLACK logo: it has to stay readable
   once the bar turns white on scroll. The rule below covers the other half,
   swapping the white logo in before any scrolling on a transparent page.
   ------------------------------------------------------------------------ */

@media (max-width: 991px) {

	body.pmd-transparent-header header#masthead:not(.sticky) .navbar-brand .default-logo {
		visibility: visible !important;
		opacity: 1 !important;
		width: auto !important;
	}

	body.pmd-transparent-header header#masthead:not(.sticky) .navbar-brand .mobile-logo {
		visibility: hidden !important;
		opacity: 0 !important;
		width: 0 !important;
	}
}


/* ==========================================================================
   PART 2 — BANNER ON TRANSPARENT PAGES
   The header overlays the top ~100px of the banner, so the title needs to
   clear it. The background image itself is set inline per page from ACF.
   ========================================================================== */

body.pmd-transparent-header .crafto-main-title-wrapper .crafto-main-title-wrap {
	position: relative;
}

body.pmd-transparent-header .crafto-main-title-wrapper .main-title-inner {
	padding-top: 190px;
}

@media (max-width: 1199px) {
	body.pmd-transparent-header .crafto-main-title-wrapper .main-title-inner {
		padding-top: 170px;
	}
}

@media (max-width: 991px) {
	body.pmd-transparent-header .crafto-main-title-wrapper .main-title-inner {
		padding-top: 150px;
	}
}

@media (max-width: 767px) {
	body.pmd-transparent-header .crafto-main-title-wrapper .main-title-inner {
		padding-top: 130px;
	}
}

/* Photos need a little text shadow to stay legible where the image is busy,
   on top of the ACF darkening slider. */
body.pmd-has-banner-image .crafto-main-title-wrap .crafto-main-title,
body.pmd-has-banner-image .crafto-main-title-wrap .crafto-main-subtitle {
	text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
}


/* ==========================================================================
   PART 3 — SINGLE POST SIDEBAR

   STATUS: partly superseded. Read before installing.

   Written when the rail held five block widgets: Search, Recent Posts,
   Recent Comments, Archives, Categories. It has since been rebuilt into a
   promo card (image, h4, h5, paragraph, button) pointing at the adult
   lessons page, and Search is gone.

   What that means for this section:
     - The search / recent posts / categories rules below no longer match
       anything. They are dead but harmless, and become live again the moment
       any of those blocks is added back.
     - The widget title rule IS still live, which is why it is now scoped with
       :has() so it cannot restyle the promo card. See the note on it below.

   The layout recommendation argues for dropping the sidebar from single posts
   altogether. If that is accepted, this whole part becomes moot.

   The underlying problem it solves is still real either way: block widgets
   render their titles as a bare .wp-block-heading and inherit the theme's
   full heading typography, which is why they rendered about three times the
   body size.
   ========================================================================== */

/* --- Widget titles -------------------------------------------------------
   Scoped to widgets that actually contain one of the list blocks below,
   rather than every .wp-block-heading in the rail.

   This matters: the sidebar has since been rebuilt into a promo card made of
   an image, an h4, an h5, a paragraph and a button. A blanket heading rule
   would put a 20px size and a rule line under that card's headings, which is
   not what a promo card wants. The :has() test keeps this rule off anything
   that isn't a search / recent posts / categories / archives widget.
   ------------------------------------------------------------------------ */

.widget_block:has(.wp-block-search, .wp-block-latest-posts, .wp-block-categories-list, .wp-block-archives-list) .wp-block-heading {
	font-size: 20px;
	line-height: 28px;
	font-weight: 600;
	letter-spacing: 0;
	color: #232323;
	margin: 0 0 18px;
	padding-bottom: 12px;
	border-bottom: 1px solid #e4e4e4;
}

.widget_block + .widget_block {
	margin-top: 40px;
}

/* --- Search -------------------------------------------------------------- */

.widget_block .wp-block-search__inside-wrapper {
	border: 1px solid #e4e4e4;
	border-radius: 6px;
	overflow: hidden;
	background: #fff;
}

.widget_block .wp-block-search__input {
	border: 0;
	padding: 12px 16px;
	font-size: 15px;
	background: transparent;
}

.widget_block .wp-block-search__input:focus {
	outline: 0;
}

.widget_block .wp-block-search__button {
	border: 0;
	border-radius: 0;
	margin: 0;
	padding: 12px 20px;
	font-size: 14px;
	font-weight: 600;
	background-color: #e42320;
	color: #fff;
	cursor: pointer;
	transition: background-color 0.3s ease-in-out;
}

.widget_block .wp-block-search__button:hover {
	background-color: #232323;
}

/* --- Recent posts --------------------------------------------------------
   Assumes "Display featured image" and "Display post date" are switched on in
   the block settings — see INSTALL.md. Degrades to a clean text list if not.
   ------------------------------------------------------------------------ */

.widget_block .wp-block-latest-posts__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.widget_block .wp-block-latest-posts__list > li {
	display: grid;
	grid-template-columns: 74px 1fr;
	grid-column-gap: 14px;
	align-items: start;
	padding: 0 0 18px;
	margin: 0 0 18px;
	border-bottom: 1px solid #f0f0f0;
}

.widget_block .wp-block-latest-posts__list > li:last-child {
	border-bottom: 0;
	padding-bottom: 0;
	margin-bottom: 0;
}

/* No thumbnail on a post: let the text use the full width instead of
   leaving an empty 74px column. */
.widget_block .wp-block-latest-posts__list > li:not(:has(.wp-block-latest-posts__featured-image)) {
	grid-template-columns: 1fr;
}

.widget_block .wp-block-latest-posts__featured-image {
	grid-row: span 2;
	margin: 0;
}

.widget_block .wp-block-latest-posts__featured-image a,
.widget_block .wp-block-latest-posts__featured-image img {
	display: block;
	width: 74px;
	height: 74px;
	object-fit: cover;
	border-radius: 6px;
}

.widget_block .wp-block-latest-posts__list > li > a,
.widget_block .wp-block-latest-posts__post-title {
	display: block;
	font-size: 15px;
	line-height: 22px;
	font-weight: 600;
	color: #232323;
	transition: color 0.3s ease-in-out;
}

.widget_block .wp-block-latest-posts__list > li > a:hover,
.widget_block .wp-block-latest-posts__post-title:hover {
	color: #e42320;
}

.widget_block .wp-block-latest-posts__post-date {
	display: block;
	margin-top: 5px;
	font-size: 13px;
	line-height: 18px;
	color: #8b8b8b;
}

.widget_block .wp-block-latest-posts__post-excerpt {
	margin-top: 6px;
	font-size: 14px;
	line-height: 21px;
	color: #6f6f6f;
}

/* --- Categories ---------------------------------------------------------- */

.widget_block .wp-block-categories-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.widget_block .wp-block-categories-list li {
	padding: 0;
	margin: 0;
	border-bottom: 1px solid #f0f0f0;
}

.widget_block .wp-block-categories-list li:last-child {
	border-bottom: 0;
}

.widget_block .wp-block-categories-list li a {
	display: block;
	padding: 11px 0;
	font-size: 15px;
	line-height: 22px;
	color: #4f4f4f;
	transition: color 0.3s ease-in-out, padding-left 0.3s ease-in-out;
}

.widget_block .wp-block-categories-list li a:hover {
	color: #e42320;
	padding-left: 6px;
}


/* ==========================================================================
   PART 4 — SINGLE POST FIXES

   Three faults on the single post layout, all from block/theme defaults that
   were never styled: unstyled blue links sitting on the purple meta bar, a
   grey H1, and a Gutenberg button block rendering as a plain inline link.
   ========================================================================== */

/* --- Meta bar links -------------------------------------------------------
   The author and category links render at the browser default blue
   (rgb(41,70,243)) on crafto's purple #53326B bar. Unreadable, and it is the
   first thing under the header.
   ------------------------------------------------------------------------ */

body.single-post .crafto-single-post-meta a {
	color: #fff;
	text-decoration: none;
	transition: opacity 0.3s ease-in-out;
}

body.single-post .crafto-single-post-meta a:hover {
	color: #fff;
	opacity: 0.75;
	text-decoration: underline;
}

/* --- Post title -----------------------------------------------------------
   Was inheriting the #716F70 body grey, so the headline carried no more
   weight than the paragraph under it. Black, single posts only, per request.
   ------------------------------------------------------------------------ */

body.single-post h1.single-post-title {
	color: #000;
}

/* --- Sidebar button -------------------------------------------------------
   The "Experience Peak for Just $25" block button computes to display:inline
   with default blue text, so it reads as a stray link rather than the offer
   it is. Restyled to match the header Contact button exactly: #ED1C24,
   10px radius, 15px/20px padding, 16px/500.

   Scoped to .widget rather than to single posts so it stays consistent
   anywhere the sidebar appears.
   ------------------------------------------------------------------------ */

.widget .wp-block-button__link,
.widget .wp-element-button {
	display: inline-block;
	background-color: #ED1C24;
	color: #fff;
	border: 0;
	border-radius: 10px;
	padding: 15px 20px;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.35;
	text-align: center;
	text-decoration: none;
	transition: background-color 0.3s ease-in-out;
}

.widget .wp-block-button__link:hover,
.widget .wp-element-button:hover {
	background-color: #232323;
	color: #fff;
}


/* ==========================================================================
   PART 5 - WHITE LOGO ON ANY TRANSPARENT PAGE

   The transparent state and the white logo were controlled in two different
   places: the CSS below reacts to the body class, but the logo image comes
   from whichever header template Crafto renders. Turn transparency on for a
   page still using the default header 2250 and you get a black logo on a dark
   photo.

   This decouples them. On any transparent page, before scrolling, the at-rest
   logo is swapped to the white PNG regardless of template. Both files are
   1000x325, so the swap is dimensionally identical and nothing shifts.

   On pages using the dedicated transparent header the source is already the
   white PNG, so this simply re-points it at the same file and is a no-op.

   The mobile case is already covered: the 991px block above shows
   .default-logo at rest on transparent pages, and it inherits this swap.
   ========================================================================== */

body.pmd-transparent-header header#masthead:not(.sticky) .navbar-brand .default-logo {
	content: url('https://www.peakmusicanddance.com/wp-content/uploads/2026/07/PeakMusicAndDanceWhiteLogo.png');
}


/* ==========================================================================
   PART 6 - CLASS SCHEDULE

   Styling for the Class Schedule Elementor widget. Rows collapse to a stacked
   card on narrow screens rather than shrinking a three column grid, because
   the day/time and the studio name are the two things people scan for and
   they stop being readable once squeezed.
   ========================================================================== */

.pmd-schedule {
	--pmd-red: #ED1C24;
	--pmd-ink: #232323;
	--pmd-muted: #716F70;
	--pmd-line: #e6e6e6;
}

.pmd-schedule__filters {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 16px;
	margin: 0 0 26px;
	padding: 0 0 20px;
	border-bottom: 1px solid var(--pmd-line);
}

.pmd-schedule__filter {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 200px;
}

.pmd-schedule__filter > span {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--pmd-muted);
}

.pmd-schedule__filter select {
	appearance: none;
	-webkit-appearance: none;
	width: 100%;
	padding: 11px 38px 11px 14px;
	border: 1px solid var(--pmd-line);
	border-radius: 8px;
	background-color: #fff;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23716F70' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	font-size: 15px;
	color: var(--pmd-ink);
	cursor: pointer;
}

.pmd-schedule__filter select:focus {
	outline: 0;
	border-color: var(--pmd-red);
}

.pmd-schedule__count {
	margin: 0 0 2px auto;
	font-size: 14px;
	color: var(--pmd-muted);
}

.pmd-schedule__list {
	display: flex;
	flex-direction: column;
}

.pmd-schedule__item {
	display: grid;
	grid-template-columns: 1fr 230px 150px;
	grid-column-gap: 24px;
	align-items: center;
	padding: 22px 0;
	border-bottom: 1px solid var(--pmd-line);
}

.pmd-schedule__item[hidden] {
	display: none;
}

.pmd-schedule__name {
	margin: 0 0 6px;
	font-size: 19px;
	line-height: 26px;
	font-weight: 600;
	color: var(--pmd-ink);
}

.pmd-schedule__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 14px;
	margin: 0;
	font-size: 14px;
	color: var(--pmd-muted);
}

.pmd-schedule__tutor {
	font-weight: 600;
	color: var(--pmd-ink);
}

.pmd-schedule__desc {
	margin: 10px 0 0;
	font-size: 14px;
	line-height: 22px;
	color: var(--pmd-muted);
	max-width: 62ch;
}

.pmd-schedule__when {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.pmd-schedule__days {
	font-size: 15px;
	font-weight: 600;
	color: var(--pmd-ink);
}

.pmd-schedule__where {
	font-size: 13px;
	line-height: 19px;
	color: var(--pmd-muted);
}

.pmd-schedule__action {
	text-align: right;
}

.pmd-schedule__button {
	display: inline-block;
	padding: 13px 24px;
	border: 0;
	border-radius: 10px;
	background-color: var(--pmd-red);
	color: #fff;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.3s ease-in-out, transform 0.15s ease-in-out;
}

.pmd-schedule__button:hover,
.pmd-schedule__button:focus {
	background-color: var(--pmd-ink);
	color: #fff;
	transform: translateY(-1px);
}

.pmd-schedule__none,
.pmd-schedule--empty p {
	margin: 26px 0 0;
	padding: 22px;
	border: 1px dashed var(--pmd-line);
	border-radius: 10px;
	text-align: center;
	color: var(--pmd-muted);
}

@media (max-width: 991px) {

	.pmd-schedule__item {
		grid-template-columns: 1fr 190px;
		grid-row-gap: 16px;
	}

	.pmd-schedule__action {
		grid-column: 1 / -1;
		text-align: left;
	}
}

@media (max-width: 600px) {

	.pmd-schedule__filters {
		flex-direction: column;
		align-items: stretch;
	}

	.pmd-schedule__count {
		margin: 0;
	}

	.pmd-schedule__item {
		grid-template-columns: 1fr;
		grid-row-gap: 12px;
		padding: 20px 0;
	}

	.pmd-schedule__when {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 4px 12px;
	}

	.pmd-schedule__button {
		display: block;
		width: 100%;
	}
}


/* --- Schedule heading -----------------------------------------------------
   Mirrors the eyebrow-plus-title pattern used elsewhere on the site (the red
   uppercase kicker over a large heading, as on the Music Programs page).

   The crafto wrapper classes in the markup pull in the theme's font family,
   since crafto scopes that to .elementor-widget-crafto-heading. Size, colour
   and spacing are set here because a widget we register ourselves has no per
   element Elementor CSS generated for it.
   ------------------------------------------------------------------------ */

.pmd-schedule__heading {
	margin: 0 0 30px;
	text-align: center;
}

.pmd-schedule__heading .elementor-widget-container {
	margin: 0;
}

.pmd-schedule__eyebrow .crafto-heading {
	display: block;
	margin: 0 0 10px;
	font-size: 13px;
	line-height: 20px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--pmd-red, #ED1C24);
}

.pmd-schedule__title .crafto-heading {
	margin: 0;
	font-size: 38px;
	line-height: 46px;
	font-weight: 500;
	color: var(--pmd-ink, #232323);
}

@media (max-width: 991px) {
	.pmd-schedule__title .crafto-heading {
		font-size: 32px;
		line-height: 40px;
	}
}

@media (max-width: 600px) {

	.pmd-schedule__heading {
		margin-bottom: 22px;
	}

	.pmd-schedule__title .crafto-heading {
		font-size: 27px;
		line-height: 34px;
	}
}


/* --- Adults only switch ---------------------------------------------------
   A real sliding switch rather than a checkbox, per request. The input stays
   in the DOM and focusable (clipped, not display:none) so it still works from
   the keyboard and for screen readers. The label text swaps between "All ages"
   and "Adults only" so the current state reads as a statement rather than
   something you have to infer from a knob position.
   ------------------------------------------------------------------------ */

.pmd-schedule__toggle {
	display: flex;
	align-items: center;
	min-height: 44px;
}

.pmd-schedule__switch {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
	user-select: none;
}

.pmd-schedule__switch input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.pmd-schedule__slider {
	position: relative;
	flex: 0 0 auto;
	width: 46px;
	height: 26px;
	border-radius: 26px;
	background-color: #cfcfcf;
	transition: background-color 0.25s ease-in-out;
}

.pmd-schedule__slider::after {
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background-color: #fff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
	transition: transform 0.25s ease-in-out;
}

.pmd-schedule__switch input:checked + .pmd-schedule__slider {
	background-color: var(--pmd-red, #ED1C24);
}

.pmd-schedule__switch input:checked + .pmd-schedule__slider::after {
	transform: translateX(20px);
}

.pmd-schedule__switch input:focus-visible + .pmd-schedule__slider {
	outline: 2px solid var(--pmd-red, #ED1C24);
	outline-offset: 3px;
}

.pmd-schedule__switch-label {
	font-size: 15px;
	font-weight: 600;
	color: var(--pmd-ink, #232323);
	white-space: nowrap;
}

@media (max-width: 600px) {

	.pmd-schedule__toggle {
		min-height: 0;
		padding-top: 4px;
	}
}


/* --- Filter row alignment -------------------------------------------------
   The theme puts margin-bottom:15px on selects, so with align-items:flex-end
   the select's box ended 15px above the bottom of its own column and the
   switch beside it sat 19px lower than the select's centre line.

   Removing that margin makes every column end at the same place, then giving
   the switch and the count the select's own vertical padding (11px) plus its
   30px line-height reproduces the select's box height, so all four line up
   through the middle without hardcoding a pixel height.
   ------------------------------------------------------------------------ */

.pmd-schedule__filter select {
	margin-bottom: 0;
}

.pmd-schedule__toggle {
	display: flex;
	align-items: center;
	min-height: 0;
	padding: 11px 0;
}

.pmd-schedule__count {
	margin: 0 0 0 auto;
	padding: 11px 0;
	line-height: 30px;
}

@media (max-width: 600px) {

	.pmd-schedule__toggle {
		padding: 4px 0 0;
	}

	.pmd-schedule__count {
		padding: 0;
		line-height: 1.5;
	}
}


/* =========================================================================
   PMD PAGE HERO
   Append to pmd-theme-extensions.css.

   Rules of the road for this block, since the thing it replaces broke by
   ignoring all of them:

   - No fixed heights. min-height only, so the section grows if the text does.
   - No absolute positioning on anything that holds text.
   - Every size that matters is a clamp(), so there is no breakpoint where
     something jumps or collides. The two media queries below change layout,
     never size.
   - Nothing may exceed 100% width, so the page can never scroll sideways.
   ========================================================================= */

.pmd-hero {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
	max-width: 100%;
	overflow: hidden;
	box-sizing: border-box;
	background-color: #241033;
	isolation: isolate;
}

/* Height is a floor, never a ceiling. svh keeps phone browser chrome from
   cropping it; the vh value is the fallback for anything that lacks svh. */
.pmd-hero--short  { min-height: clamp(260px, 46vh, 420px);  min-height: clamp(260px, 46svh, 420px); }
.pmd-hero--medium { min-height: clamp(340px, 68vh, 620px);  min-height: clamp(340px, 68svh, 620px); }
.pmd-hero--tall   { min-height: clamp(420px, 86vh, 780px);  min-height: clamp(420px, 86svh, 780px); }

/* ---- background ------------------------------------------------------- */

.pmd-hero__media,
.pmd-hero__scrim {
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
}

.pmd-hero__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.pmd-hero--focus-left  .pmd-hero__img { object-position: 20% center; }
.pmd-hero--focus-center .pmd-hero__img { object-position: 50% center; }
.pmd-hero--focus-right .pmd-hero__img { object-position: 80% center; }

/* Flat wash for the whole image plus a stronger gradient on the text side,
   so the left column stays readable without flattening the photo. */
.pmd-hero__scrim {
	background:
		linear-gradient(
			to right,
			rgba(20, 8, 30, calc(var(--pmd-hero-overlay, 0.55) + 0.18)) 0%,
			rgba(20, 8, 30, var(--pmd-hero-overlay, 0.55)) 55%,
			rgba(20, 8, 30, calc(var(--pmd-hero-overlay, 0.55) * 0.7)) 100%
		);
}

.pmd-hero--no-image {
	background-image: linear-gradient(135deg, #3a1b52 0%, #241033 60%, #4a1220 100%);
}

/* ---- layout ----------------------------------------------------------- */

.pmd-hero__inner {
	width: 100%;
	max-width: 1300px;
	margin-inline: auto;
	padding-inline: clamp(20px, 5vw, 60px);
	padding-block: clamp(48px, 8vw, 96px);
	box-sizing: border-box;
}

.pmd-hero__content {
	max-width: 46rem;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: clamp(14px, 2.2vw, 26px);
}

/* ---- type ------------------------------------------------------------- */

.pmd-hero__eyebrow {
	margin: 0;
	color: #ff8a7a;
	font-size: clamp(0.72rem, 0.62rem + 0.5vw, 0.9rem);
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	line-height: 1.4;
}

.pmd-hero__heading {
	margin: 0;
	color: #fff;
	font-size: clamp(1.85rem, 1.05rem + 3.6vw, 3.4rem);
	line-height: 1.1;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: -0.005em;
	text-wrap: balance;
}

.pmd-hero__text {
	margin: 0;
	color: rgba(255, 255, 255, 0.92);
	font-size: clamp(0.98rem, 0.9rem + 0.42vw, 1.14rem);
	line-height: 1.65;
	max-width: 40rem;
	text-wrap: pretty;
}

/* ---- buttons ---------------------------------------------------------- */

.pmd-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(10px, 1.4vw, 16px);
	width: 100%;
	margin-top: clamp(4px, 1vw, 12px);
}

.pmd-hero__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: clamp(12px, 1.5vw, 16px) clamp(20px, 2.6vw, 34px);
	border-radius: 999px;
	border: 2px solid transparent;
	font-size: clamp(0.82rem, 0.76rem + 0.3vw, 0.95rem);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.pmd-hero__btn--solid {
	background-color: #5b2d80;
	border-color: #5b2d80;
	color: #fff;
}

.pmd-hero__btn--solid:hover,
.pmd-hero__btn--solid:focus-visible {
	background-color: #74399f;
	border-color: #74399f;
	color: #fff;
}

.pmd-hero__btn--outline {
	background-color: transparent;
	border-color: rgba(255, 255, 255, 0.75);
	color: #fff;
}

.pmd-hero__btn--outline:hover,
.pmd-hero__btn--outline:focus-visible {
	background-color: #fff;
	border-color: #fff;
	color: #241033;
}

.pmd-hero__btn:hover { transform: translateY(-2px); }

.pmd-hero__btn:focus-visible {
	outline: 3px solid #ffb3a6;
	outline-offset: 3px;
}

/* ---- layout shifts, not size shifts ----------------------------------- */

/* Tablet and down: the photo has much less room, so lean the wash harder
   across the whole width rather than only the text side. */
@media (max-width: 900px) {
	.pmd-hero__scrim {
		background:
			linear-gradient(
				to bottom,
				rgba(20, 8, 30, calc(var(--pmd-hero-overlay, 0.55) + 0.10)) 0%,
				rgba(20, 8, 30, calc(var(--pmd-hero-overlay, 0.55) + 0.16)) 100%
			);
	}

	.pmd-hero__content { max-width: 100%; }
}

/* Phone: buttons go full width and stack. This is the case the old slider
   got wrong, so it is stated explicitly rather than left to wrapping. */
@media (max-width: 560px) {
	.pmd-hero__actions {
		flex-direction: column;
		align-items: stretch;
	}

	.pmd-hero__btn {
		width: 100%;
		padding-inline: 16px;
	}
}

/* ---- Crafto's own page title is redundant when the hero carries the H1 -- */

body.pmd-has-hero .page-title-section,
body.pmd-has-hero .crafto-page-title,
body.pmd-has-hero .page-title-wrapper {
	display: none !important;
}

@media (prefers-reduced-motion: reduce) {
	.pmd-hero__btn {
		transition: none;
	}
	.pmd-hero__btn:hover {
		transform: none;
	}
}


/* --- hero corrections, applied after first live check --------------------
   1. z-index:-1 on the media put it behind the section's own background
      colour, so the photo never showed. Stack it forward instead and keep a
      solid colour only when there is no image.
   2. Crafto's heading rules out-specify a single class, so the hero text
      colours have to be stated with the section in the selector.
   ---------------------------------------------------------------------- */

.pmd-hero { background-color: transparent; }
.pmd-hero.pmd-hero--no-image { background-color: #241033; }

.pmd-hero .pmd-hero__media,
.pmd-hero .pmd-hero__scrim { z-index: 0; }
.pmd-hero .pmd-hero__inner { position: relative; z-index: 1; }

.pmd-hero .pmd-hero__heading { color: #fff; }
.pmd-hero .pmd-hero__text { color: rgba(255,255,255,0.92); }
.pmd-hero .pmd-hero__eyebrow { color: #ff8a7a; }
.pmd-hero .pmd-hero__btn--solid { color: #fff; }
.pmd-hero .pmd-hero__btn--outline { color: #fff; }
.pmd-hero .pmd-hero__btn--outline:hover,
.pmd-hero .pmd-hero__btn--outline:focus-visible { color: #241033; }

/* three buttons should sit on one row on a roomy screen */
.pmd-hero__content { max-width: 54rem; }


/* --- clearance under the transparent header ------------------------------
   With the transparent header the nav sits on top of the hero rather than
   above it, so the hero has to reserve room for it or the H1 tucks under the
   logo. Scales with the viewport like everything else here.
   ---------------------------------------------------------------------- */

body.pmd-transparent-header .pmd-hero .pmd-hero__inner {
	padding-top: clamp(110px, 13vw, 170px);
}

/* Keep three buttons on one row wherever there is honestly room for them,
   and let them shrink before they wrap. */
.pmd-hero__actions { flex-wrap: wrap; }
.pmd-hero__btn { flex: 0 1 auto; min-width: 0; }

@media (min-width: 561px) and (max-width: 1100px) {
	.pmd-hero__btn { padding-inline: clamp(14px, 2vw, 24px); letter-spacing: 0.04em; }
}


/* =========================================================================
   MOBILE HEADER CORRECTION

   Measured at 390px rather than assumed. Three things were wrong in the
   first attempt:

   1. Crafto does not honour the transparent header below 991px. The nav
      paints solid white, so the hero began under a disconnected white band.
   2. The logo actually rendering at that width is .default-logo, not
      .mobile-logo, which measures 0x0. The swap targeted the wrong element.
   3. Because of 1 and 2, the white hamburger lines ended up white on white
      and the toggle vanished.

   This makes the mobile header behave like the desktop one: transparent and
   sitting over the hero, white logo and white lines, turning into the solid
   white bar with the colour logo as soon as it goes sticky.
   ========================================================================= */

@media (max-width: 991px) {

	/* undo the wrong target from the first pass */
	body.pmd-transparent-header header .navbar:not(.sticky) .mobile-logo { content: normal; }

	/* lift the bar over the hero instead of stacking above it */
	body.pmd-transparent-header header .navbar:not(.sticky) {
		position: absolute;
		top: 0; left: 0; right: 0;
		z-index: 20;
		background-color: transparent !important;
		box-shadow: none;
	}

	body.pmd-transparent-header header { position: relative; z-index: 20; }

	/* the logo that actually renders at this width */
	body.pmd-transparent-header header .navbar:not(.sticky) .default-logo {
		content: url("https://www.peakmusicanddance.com/wp-content/uploads/2026/07/PeakMusicAndDanceWhiteLogo.png");
	}

	body.pmd-transparent-header header .navbar.sticky .default-logo { content: normal; }

	/* hamburger: white over the hero, dark once the bar turns white */
	.navbar-toggler-line { background-color: #241033; }
	body.pmd-transparent-header header .navbar:not(.sticky) .navbar-toggler-line { background-color: #fff; }
	body.pmd-transparent-header header .navbar.sticky .navbar-toggler-line { background-color: #241033; }

	/* the open panel must clear the bar it hangs from */
	body.pmd-transparent-header header .navbar:not(.sticky) .navbar-collapse {
		margin-top: 6px;
	}
}




/* --- heading weight ------------------------------------------------------
   Crafto out-specifies a single class on headings, the same way it did on the
   colour, so the 900 weight has to be stated with the section in the selector.
   --------------------------------------------------------------------- */

.pmd-hero .pmd-hero__heading,
body .pmd-hero h1.pmd-hero__heading {
	font-weight: 900 !important;
	color: #fff !important;
}


/* --- the white bar above the hero ---------------------------------------
   Measured, not guessed: body carries padding-top:53px with a white
   background, the room Crafto reserves for the static header. Once the nav
   is lifted to position:absolute that padding stays behind as a white band
   above the hero. Only reclaimed on pages using the transparent header, so
   every other page keeps its normal spacing.
   --------------------------------------------------------------------- */

@media (max-width: 991px) {
	body.pmd-transparent-header.pmd-has-hero { padding-top: 0 !important; }
}

/* =========================================================================
   MOBILE: WHITE BAR, BANNER CENTRING, TITLE SIZES

   The white bar was body{padding-top:53px}, the room Crafto reserves for the
   static header. The earlier fix was scoped to .pmd-has-hero, so it only
   cleared the home page. Every transparent header page had it.
   ========================================================================= */

@media (max-width: 991px) {

	body.pmd-transparent-header { padding-top: 0 !important; }

	/* the banner has to clear the header itself now, and its text centres */
	body.pmd-transparent-header .page-title-section {
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		min-height: 52vh;
		padding-top: clamp(96px, 24vw, 140px) !important;
		padding-bottom: clamp(36px, 10vw, 64px) !important;
		text-align: center !important;
	}

	body.pmd-transparent-header .page-title-section > *,
	body.pmd-transparent-header .page-title-section .container,
	body.pmd-transparent-header .page-title-section .row {
		width: 100%;
		text-align: center !important;
		justify-content: center !important;
	}

	body.pmd-transparent-header .page-title-section h1,
	body.pmd-transparent-header .page-title-section h2,
	body.pmd-transparent-header .page-title-section p,
	body.pmd-transparent-header .page-title-section span {
		text-align: center !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}

	/* --- title sizes ------------------------------------------------- */
	/* Headings were set for desktop and carried straight down. Capped here
	   with clamp so they still scale, just within sane bounds. */

	h1, .h1 { font-size: clamp(1.55rem, 1.05rem + 2.3vw, 2.05rem) !important; line-height: 1.18 !important; }
	h2, .h2 { font-size: clamp(1.32rem, 0.95rem + 1.8vw, 1.7rem) !important;  line-height: 1.22 !important; }
	h3, .h3 { font-size: clamp(1.14rem, 0.9rem + 1.2vw, 1.4rem) !important;   line-height: 1.28 !important; }
	h4, .h4 { font-size: clamp(1.04rem, 0.9rem + 0.7vw, 1.2rem) !important;   line-height: 1.32 !important; }

	/* the hero keeps its own scale, it was built for this already */
	.pmd-hero .pmd-hero__heading { font-size: clamp(1.85rem, 1.05rem + 3.6vw, 3.4rem) !important; line-height: 1.1 !important; }
}

/* --- banner centring ------------------------------------------------------
   The banner is .crafto-main-title-wrap, not .page-title-section. Its inner
   column already centres, but the transparent header covers the top ~55px of
   it, so the text read high. Reserving that room and giving the block real
   height puts the text in the optical centre.
   --------------------------------------------------------------------- */

@media (max-width: 991px) {
	body.pmd-transparent-header .crafto-main-title-wrap {
		display: flex !important;
		align-items: center !important;
		min-height: 48vh;
		padding-top: clamp(88px, 22vw, 128px) !important;
		padding-bottom: clamp(36px, 11vw, 60px) !important;
	}

	body.pmd-transparent-header .crafto-main-title-wrap .title-container { width: 100%; }

	body.pmd-transparent-header .crafto-main-title-wrap .title-inner-c { text-align: center !important; align-items: center !important; }

	body.pmd-transparent-header .crafto-main-title-wrap h1,
	body.pmd-transparent-header .crafto-main-title-wrap h2,
	body.pmd-transparent-header .crafto-main-title-wrap p,
	body.pmd-transparent-header .crafto-main-title-wrap span {
		text-align: center !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}
}

/* ---------- Footer legal links ----------
   Appended to the copyright heading in the Footer theme builder template so
   the privacy policy and the text message terms are reachable from every
   page, which is what a carrier reviewer looks for during A2P registration.
   The column is narrow, so the pair sits on its own line and each link is
   kept unbroken rather than wrapping mid phrase. ---------- */
.pmd-footer-legal{ display:block; margin-top:6px; font-size:.85em; line-height:1.6; }
.pmd-footer-legal a{ white-space:nowrap; }

/* ---------- Keyboard and piano lessons page ----------
   Scoped to .page-id-6164 so nothing here can leak onto another page.
   Brand colours are the same ones the landing template samples:
   purple #53326B, red #ED1C24, ink #1B1418.
   ---------------------------------------------------------------- */
.page-id-6164 .pmd-kb-grid{
  display:grid; gap:24px; margin:34px 0 10px;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
}
.page-id-6164 .pmd-kb-card{
  background:#fff; border:1px solid #e6e0ec; border-top:4px solid #53326B;
  border-radius:10px; padding:28px 26px 26px;
  box-shadow:0 8px 26px rgba(27,20,24,.06);
  display:flex; flex-direction:column;
}
.page-id-6164 .pmd-kb-card h3{
  margin:0 0 6px; font-size:23px; line-height:1.25; color:#1B1418;
}
.page-id-6164 .pmd-kb-who{
  margin:0 0 14px; font-size:12px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:#ED1C24;
}
.page-id-6164 .pmd-kb-blurb{ margin:0 0 18px; color:#5a5262; font-size:15.5px; line-height:1.62; }
.page-id-6164 ul.pmd-kb-meta{
  list-style:none; margin:0 0 22px; padding:18px 0 0; border-top:1px solid #efeaf3;
  display:flex; flex-direction:column; gap:9px;
}
.page-id-6164 ul.pmd-kb-meta li{
  margin:0; padding:0; font-size:15px; color:#1B1418; display:flex; gap:12px; align-items:baseline;
}
.page-id-6164 ul.pmd-kb-meta li::before{ content:none; }
.page-id-6164 ul.pmd-kb-meta li span{
  flex:0 0 52px; font-size:11px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:#8b8397;
}
.page-id-6164 .pmd-kb-btn{
  display:inline-block; margin-top:auto; text-align:center;
  padding:14px 26px; border-radius:999px;
  font-weight:700; font-size:15px; letter-spacing:.01em; text-decoration:none;
  background:#53326B; color:#fff !important; border:2px solid #53326B;
  transition:background .15s ease, color .15s ease, transform .15s ease;
}
.page-id-6164 .pmd-kb-btn:hover{ background:#3B2350; border-color:#3B2350; transform:translateY(-1px); }
.page-id-6164 .pmd-kb-cta{ margin:30px 0 0; display:flex; flex-wrap:wrap; gap:14px; }
.page-id-6164 .pmd-kb-btn--primary{ background:#ED1C24; border-color:#ED1C24; }
.page-id-6164 .pmd-kb-btn--primary:hover{ background:#B4141A; border-color:#B4141A; }
.page-id-6164 .pmd-kb-btn--ghost{
  background:transparent; border-color:#53326B; color:#53326B !important;
}
.page-id-6164 .pmd-kb-btn--ghost:hover{ background:#53326B; color:#fff !important; }
@media (max-width:600px){
  .page-id-6164 .pmd-kb-card{ padding:24px 20px; }
  .page-id-6164 .pmd-kb-cta .pmd-kb-btn{ width:100%; }
}