/*
 * Highland Dance ABQ — extra styles that theme.json can't express.
 * Most are opt-in block styles the owner can switch in the editor (Block → Styles).
 */

/* ---------- Tartan ---------- */
/* The Highland Dance ABQ tartan ("Classic Dress"), generated by tools/make_tartan.py.
 * Thin strips are positioned through the blue/turquoise block of the sett
 * (rows 44–86px at this scale) so they read as tartan rather than white. */
:root {
	--hda-tartan-img: url("../images/tartan.png");
	--hda-tartan: var(--hda-tartan-img) 0 0 / 266px 266px repeat;
}

/* Band under the header and above the footer. */
.hda-tartan-stripe {
	height: 40px;
	background: var(--hda-tartan-img) 0 -45px / 266px 266px repeat;
	box-shadow: inset 0 -1px 0 rgb(0 0 0 / 0.06), inset 0 1px 0 rgb(0 0 0 / 0.06);
}

/* Block style "Tartan band": tartan strip along the top and bottom of a section. */
.wp-block-group.is-style-hda-tartan-band {
	position: relative;
	padding-top: calc(var(--wp--preset--spacing--60) + 24px);
	padding-bottom: calc(var(--wp--preset--spacing--60) + 24px);
}

.wp-block-group.is-style-hda-tartan-band::before,
.wp-block-group.is-style-hda-tartan-band::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	height: 24px;
	background: var(--hda-tartan-img) 0 -53px / 266px 266px repeat;
}

.wp-block-group.is-style-hda-tartan-band::before {
	top: 0;
}

.wp-block-group.is-style-hda-tartan-band::after {
	bottom: 0;
}

/* When a tartan-band section is the last thing on a page, drop its bottom band:
 * the footer's own tartan band takes over. */
.wp-block-post-content > .wp-block-group.is-style-hda-tartan-band:last-child {
	padding-bottom: var(--wp--preset--spacing--60);
}

.wp-block-post-content > .wp-block-group.is-style-hda-tartan-band:last-child::after {
	display: none;
}

/* Block style "Tartan background": the whole section in tartan (put a Card inside for text). */
.wp-block-group.is-style-hda-tartan-bg {
	background: var(--hda-tartan);
}

/* ---------- Header navigation buttons ---------- */
.wp-block-navigation .hda-nav-cta > .wp-block-navigation-item__content {
	background: var(--wp--preset--color--orange);
	color: var(--wp--preset--color--base);
	border-radius: 999px;
	padding: 0.5em 1.1em;
	font-weight: 800;
}

.wp-block-navigation .hda-nav-cta > .wp-block-navigation-item__content:hover {
	background: var(--wp--preset--color--blue);
	color: var(--wp--preset--color--base);
}

.wp-block-navigation .hda-nav-portal > .wp-block-navigation-item__content {
	border: 2px solid var(--wp--preset--color--turquoise);
	border-radius: 999px;
	padding: 0.4em 1em;
}

/* ---------- Image styles ---------- */
.wp-block-image.is-style-hda-rounded img,
.wp-block-image.is-style-hda-playful img,
.wp-block-image.is-style-hda-playful-orange img {
	border-radius: 28px;
}

.wp-block-image.is-style-hda-playful img {
	box-shadow: 14px 14px 0 var(--wp--preset--color--turquoise);
}

.wp-block-image.is-style-hda-playful-orange img {
	box-shadow: -14px 14px 0 var(--wp--preset--color--orange);
}

.wp-block-image.is-style-hda-playful,
.wp-block-image.is-style-hda-playful-orange {
	margin-bottom: 14px;
	margin-right: 14px;
}

.wp-block-image.is-style-hda-playful-orange {
	margin-right: 0;
	margin-left: 14px;
}

/* ---------- Cards ---------- */
.is-style-hda-card {
	position: relative;
	overflow: hidden;
	background: var(--wp--preset--color--base);
	border-radius: 28px;
	padding: calc(var(--wp--preset--spacing--40) + 14px) var(--wp--preset--spacing--40) var(--wp--preset--spacing--40);
	box-shadow: 0 10px 30px rgb(38 40 99 / 0.08);
}

/* Tartan strip across the top of each card. */
.is-style-hda-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 14px;
	background: var(--hda-tartan-img) 0 -58px / 266px 266px repeat;
}

.is-style-hda-card .wp-block-image img {
	border-radius: 20px;
}

/* Keep card buttons at the bottom so a row of cards lines up. */
.wp-block-column.is-style-hda-card {
	display: flex;
	flex-direction: column;
}

.wp-block-column.is-style-hda-card > .wp-block-buttons {
	margin-top: auto;
	padding-top: var(--wp--preset--spacing--30);
}

/* ---------- Text styles ---------- */
.is-style-hda-kicker {
	font-size: 0.95rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--orange-text);
}

.has-blue-background-color .is-style-hda-kicker,
.has-orange-background-color .is-style-hda-kicker {
	color: var(--wp--preset--color--turquoise);
}

.has-orange-background-color .is-style-hda-kicker {
	color: var(--wp--preset--color--base);
}

.wp-block-heading.is-style-hda-squiggle::after {
	content: "";
	display: block;
	width: 120px;
	max-width: 40%;
	height: 12px;
	margin-top: 0.35em;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='12' viewBox='0 0 40 12'%3E%3Cpath d='M0 6 Q10 0 20 6 T40 6' fill='none' stroke='%23CE5D35' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x left center / 40px 12px;
}

.wp-block-heading.has-text-align-center.is-style-hda-squiggle::after {
	margin-left: auto;
	margin-right: auto;
}

/* ---------- Hero ---------- */
.hda-hero {
	background-color: var(--wp--preset--color--turquoise-light);
}

.hda-hero .wp-block-image.is-style-hda-playful img {
	transform: rotate(2deg);
}

/* ---------- Testimonial ---------- */
.hda-testimonial .wp-block-quote {
	position: relative;
	padding: 0;
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	color: var(--wp--preset--color--blue);
}

.hda-testimonial .wp-block-quote::before {
	content: "\201C";
	display: block;
	font-size: 6rem;
	line-height: 0.6;
	color: var(--wp--preset--color--orange);
	font-family: var(--wp--preset--font-family--heading);
}

.hda-testimonial .wp-block-quote cite {
	display: block;
	margin-top: 1em;
	font-size: var(--wp--preset--font-size--medium);
	font-style: normal;
	font-weight: 800;
	color: var(--wp--preset--color--orange-text);
}

/* ---------- Logos ---------- */
.hda-header-logo img {
	max-width: min(250px, 60vw);
	height: auto;
}

/* The logo has dark blue lettering, so in the blue footer it sits on a white badge. */
.hda-footer-logo img {
	background: var(--wp--preset--color--base);
	padding: 12px;
	border-radius: 20px;
	box-sizing: border-box;
}

/* ---------- Footer ---------- */
/* No gap between the page content and the footer's tartan band. */
.wp-site-blocks > footer.wp-block-template-part {
	margin-block-start: 0;
}

.hda-footer .wp-block-navigation {
	gap: 0.4em;
}

/* ---------- Misc ---------- */
.hda-meta {
	color: var(--wp--preset--color--orange-text);
	font-weight: 800;
	font-size: var(--wp--preset--font-size--small);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

/* ---------- Classes page ---------- */
.hda-class-list {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--50);
	margin-top: var(--wp--preset--spacing--50);
}

/* Days, times and tuition box inside each class card. */
.hda-details {
	background: var(--wp--preset--color--turquoise-light);
	border-radius: 20px;
	padding: var(--wp--preset--spacing--40);
}

.hda-details p {
	margin: 0;
}

.hda-details p + p {
	margin-top: var(--wp--preset--spacing--30);
}

.hda-details strong {
	color: var(--wp--preset--color--blue);
	font-size: 0.85em;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* Table style "Class schedule". */
.wp-block-table.is-style-hda-schedule {
	margin: var(--wp--preset--spacing--40) 0;
	border-radius: 24px;
	overflow-x: auto;
	box-shadow: 0 10px 30px rgb(38 40 99 / 0.08);
	background: var(--wp--preset--color--base);
}

.wp-block-table.is-style-hda-schedule table {
	border-collapse: collapse;
	min-width: 560px;
}

.wp-block-table.is-style-hda-schedule th,
.wp-block-table.is-style-hda-schedule td {
	border: 0;
	padding: 0.9em 1.1em;
	text-align: left;
	vertical-align: top;
}

.wp-block-table.is-style-hda-schedule thead th {
	background: var(--wp--preset--color--blue);
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.05em;
}

.wp-block-table.is-style-hda-schedule tbody tr:nth-child(even) {
	background: var(--wp--preset--color--turquoise-light);
}

.wp-block-table.is-style-hda-schedule td:first-child {
	font-weight: 800;
	white-space: nowrap;
}

.wp-block-table.is-style-hda-schedule figcaption {
	margin: 0;
	padding: 0.8em 1.1em;
	text-align: left;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contrast);
}

/* Session date lists. */
.wp-block-list.hda-dates {
	list-style: none;
	padding: 0;
	margin: 0;
	text-align: center;
}

.wp-block-list.hda-dates li {
	padding: 0.55em 0;
	font-weight: 700;
	color: var(--wp--preset--color--blue);
}

.wp-block-list.hda-dates li + li {
	border-top: 2px dashed var(--wp--preset--color--turquoise);
}

.wp-block-list.hda-dates em {
	font-weight: 400;
	color: var(--wp--preset--color--orange-text);
}

/* Map. */
.hda-map {
	border-radius: 28px;
	overflow: hidden;
	box-shadow: 14px 14px 0 var(--wp--preset--color--turquoise);
	aspect-ratio: 4 / 3;
}

.hda-map iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Jump links land below the header. */
[id] {
	scroll-margin-top: 24px;
}

/* Class name + toggle: description opens/closes with the +/− button. */
.wp-block-details.hda-class-toggle {
	margin-top: 0.2em;
}

.wp-block-details.hda-class-toggle > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.6em;
	list-style: none;
	cursor: pointer;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 700;
	line-height: 1.15;
	color: var(--wp--preset--color--blue);
}

.wp-block-details.hda-class-toggle > summary::-webkit-details-marker {
	display: none;
}

.wp-block-details.hda-class-toggle > summary::after {
	content: "+";
	flex: none;
	display: grid;
	place-items: center;
	width: 1.4em;
	height: 1.4em;
	border-radius: 50%;
	background: var(--wp--preset--color--orange);
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.75em;
	font-weight: 800;
	line-height: 1;
	transition: transform 0.2s ease, background-color 0.2s ease;
}

.wp-block-details.hda-class-toggle[open] > summary::after {
	content: "−";
	background: var(--wp--preset--color--blue);
}

.wp-block-details.hda-class-toggle > summary:hover::after,
.wp-block-details.hda-class-toggle > summary:focus-visible::after {
	transform: scale(1.1);
}

.wp-block-details.hda-class-toggle > summary:focus-visible {
	outline: 3px solid var(--wp--preset--color--turquoise);
	outline-offset: 4px;
	border-radius: 8px;
}

.wp-block-details.hda-class-toggle > :not(summary) {
	margin-top: var(--wp--preset--spacing--30);
}

/* ---------- Landing pages ---------- */
.hda-stack > * + * {
	margin-top: var(--wp--preset--spacing--40);
}

.hda-narrow {
	max-width: 640px;
	margin-left: auto;
	margin-right: auto;
}

/* FAQ: question rows that open with +/−. */
.hda-faq-list {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
}

.hda-faq-list > .wp-block-details {
	width: 100%;
	box-sizing: border-box;
}

.wp-block-details.hda-faq {
	background: var(--wp--preset--color--base);
	border: 2px solid var(--wp--preset--color--turquoise-light);
	border-radius: 20px;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	box-shadow: 0 6px 20px rgb(38 40 99 / 0.06);
}

.wp-block-details.hda-faq > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.8em;
	list-style: none;
	cursor: pointer;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	color: var(--wp--preset--color--blue);
}

.wp-block-details.hda-faq > summary::-webkit-details-marker {
	display: none;
}

.wp-block-details.hda-faq > summary::after {
	content: "+";
	flex: none;
	display: grid;
	place-items: center;
	width: 1.5em;
	height: 1.5em;
	border-radius: 50%;
	background: var(--wp--preset--color--orange);
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.8em;
	font-weight: 800;
	line-height: 1;
}

.wp-block-details.hda-faq[open] > summary::after {
	content: "−";
	background: var(--wp--preset--color--blue);
}

.wp-block-details.hda-faq > summary:focus-visible {
	outline: 3px solid var(--wp--preset--color--turquoise);
	outline-offset: 4px;
	border-radius: 8px;
}

.wp-block-details.hda-faq > :not(summary) {
	margin-top: var(--wp--preset--spacing--20);
}

/* ---------- Forms (Formspree) ---------- */
.hda-form {
	display: grid;
	gap: var(--wp--preset--spacing--30);
}

.hda-form p {
	margin: 0;
}

.hda-field label,
.hda-checks legend {
	display: block;
	margin-bottom: 0.3em;
	font-weight: 800;
	color: var(--wp--preset--color--blue);
}

.hda-req {
	color: var(--wp--preset--color--orange-text);
}

.hda-hint {
	font-weight: 400;
	font-size: 0.9em;
	color: var(--wp--preset--color--contrast);
}

.hda-form input[type="text"],
.hda-form input[type="email"],
.hda-form input[type="tel"],
.hda-form textarea,
.hda-form select {
	width: 100%;
	box-sizing: border-box;
	padding: 0.7em 0.9em;
	border: 2px solid var(--wp--preset--color--turquoise);
	border-radius: 14px;
	background: var(--wp--preset--color--base);
	font: inherit;
	color: var(--wp--preset--color--contrast);
}

.hda-form input:focus,
.hda-form textarea:focus,
.hda-form select:focus {
	outline: 3px solid var(--wp--preset--color--orange);
	outline-offset: 1px;
	border-color: var(--wp--preset--color--blue);
}

.hda-checks {
	border: 0;
	padding: 0;
	margin: 0;
}

.hda-checks label {
	display: flex;
	align-items: center;
	gap: 0.6em;
	margin: 0.35em 0;
	font-weight: 400;
	color: var(--wp--preset--color--contrast);
	cursor: pointer;
}

.hda-checks input[type="checkbox"] {
	width: 1.25em;
	height: 1.25em;
	accent-color: var(--wp--preset--color--orange);
}

.hda-field-group {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--30);
	border-radius: 16px;
	background: var(--wp--preset--color--turquoise-light);
}

.hda-field-group[hidden] {
	display: none;
}

.hda-form__hp {
	position: absolute;
	left: -9999px;
}

.hda-form button[disabled] {
	opacity: 0.6;
	cursor: wait;
}

.hda-form__status:empty {
	display: none;
}

.hda-form__status {
	font-weight: 700;
}

.hda-form__status.is-success {
	padding: 0.8em 1em;
	border-radius: 14px;
	background: var(--wp--preset--color--turquoise-light);
	color: var(--wp--preset--color--blue);
}

.hda-form__status.is-error {
	color: var(--wp--preset--color--orange-text);
}

.hda-fieldset {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	border: 0;
	padding: 0;
	margin: 0;
}

.hda-fieldset > legend {
	margin-bottom: 0.4em;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	color: var(--wp--preset--color--blue);
}

.hda-checks input[type="radio"] {
	width: 1.25em;
	height: 1.25em;
	flex: none;
	accent-color: var(--wp--preset--color--orange);
}

.hda-checks label {
	align-items: flex-start;
}

.hda-checks label input {
	margin-top: 0.25em;
}

.hda-subhead {
	margin: 0.6em 0 0.1em;
	font-size: 0.85em;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--orange-text);
}

.hda-form input[type="date"] {
	width: 100%;
	box-sizing: border-box;
	padding: 0.7em 0.9em;
	border: 2px solid var(--wp--preset--color--turquoise);
	border-radius: 14px;
	background: var(--wp--preset--color--base);
	font: inherit;
	color: var(--wp--preset--color--contrast);
}

/* ---------- Blog ---------- */
.hda-post-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	min-width: 0;
	box-sizing: border-box;
	overflow-wrap: break-word;
}

.hda-post-card > * + * {
	margin-top: var(--wp--preset--spacing--20);
}

.hda-post-card .wp-block-post-featured-image {
	margin-bottom: var(--wp--preset--spacing--20);
}

/* Show the whole featured image (no top/bottom crop) in a matching 4:3 frame. */
.hda-post-card .wp-block-post-featured-image {
	overflow: hidden;
	border-radius: 20px;
	background: var(--wp--preset--color--turquoise-light);
}

.hda-post-card .wp-block-post-featured-image img {
	object-fit: contain !important;
	border-radius: 0;
}

.hda-post-card .wp-block-post-title a {
	color: var(--wp--preset--color--blue);
	text-decoration: none;
}

.hda-post-card .wp-block-post-title a:hover {
	color: var(--wp--preset--color--orange-text);
}

.hda-post-card .wp-block-post-excerpt {
	display: flex;
	flex-direction: column;
	flex: 1;
}

.hda-post-card .wp-block-post-excerpt__more-text {
	margin-top: auto;
	padding-top: var(--wp--preset--spacing--20);
	font-weight: 800;
}

.hda-blog .wp-block-post-template {
	gap: var(--wp--preset--spacing--40);
}

.hda-blog .wp-block-query-pagination {
	margin-top: var(--wp--preset--spacing--50);
	gap: 0.5em;
	font-weight: 800;
}

.hda-blog .wp-block-query-pagination a,
.hda-blog .wp-block-query-pagination .current {
	display: inline-grid;
	place-items: center;
	min-width: 2.4em;
	height: 2.4em;
	padding: 0 0.8em;
	border-radius: 999px;
	text-decoration: none;
}

.hda-blog .wp-block-query-pagination a {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--blue);
}

.hda-blog .wp-block-query-pagination a:hover {
	background: var(--wp--preset--color--blue);
	color: var(--wp--preset--color--base);
}

.hda-blog .wp-block-query-pagination .current {
	background: var(--wp--preset--color--orange);
	color: var(--wp--preset--color--base);
}

/* Single post: featured image shown whole, rounded. */
.hda-post-image img {
	border-radius: 28px;
}

.hda-post-nav a {
	font-weight: 800;
}

/* Blog posts, desktop only: tall (portrait) images and videos 30% smaller, centered. */
@media (min-width: 782px) {
	.hda-post-article .hda-portrait {
		width: 100%;
		max-width: calc(var(--wp--style--global--content-size, 760px) * 0.7) !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}

	.hda-post-article .hda-portrait img,
	.hda-post-article .hda-portrait video,
	.hda-post-article .hda-portrait iframe {
		width: 100%;
		height: auto;
	}

	.hda-post-article .wp-block-embed.hda-portrait iframe {
		aspect-ratio: 9 / 16;
	}
}