/*
Theme Name:   Balera
Description:  Balera School of Ballroom Dance — child theme of Kadence.
Template:     kadence
Version:      1.0.0
Text Domain:  balera
*/

/* Palette, fonts and header/footer layout are Kadence defaults set in functions.php.
   This file only adds what Kadence has no option for. */

:root {
	--balera-gold: #B8925A;
	--balera-radius: 2px;
}

/* Headings: the display serif reads better slightly tighter */
h1, h2, h3, .entry-title {
	letter-spacing: -0.01em;
}

/* Small uppercase label above headings: <p class="balera-eyebrow"> */
.balera-eyebrow {
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--balera-gold);
	margin-bottom: 0.5rem;
}

/* Thin gold rule used under section headings: <hr class="is-style-balera-rule"> */
.wp-block-separator.is-style-balera-rule {
	width: 64px;
	border: 0;
	border-top: 2px solid var(--balera-gold);
	margin-left: auto;
	margin-right: auto;
	opacity: 1;
}

/* Buttons */
.wp-block-button__link,
.button,
.header-button {
	border-radius: var(--balera-radius);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-size: 0.85rem;
	font-weight: 600;
}
.header-button {
	white-space: nowrap;
}

/* Outline buttons on dark sections: the default burgundy outline vanishes on ink.
   :not(.has-text-color) matches Kadence's own selector weight so this wins. */
.has-theme-palette-3-background-color .wp-block-button.is-style-outline > .wp-block-button__link:not(.has-text-color) {
	color: var(--global-palette8);
	border-color: var(--global-palette8);
}
.has-theme-palette-3-background-color .wp-block-button.is-style-outline > .wp-block-button__link:not(.has-text-color):hover {
	color: var(--global-palette3);
	background: var(--global-palette8);
}

/* Social icons (top bar, mobile menu, footer): bare ivory glyphs instead of filled tiles */
.header-social-wrap .social-button,
.header-mobile-social-wrap .social-button,
.footer-social-wrap .social-button {
	background: transparent;
	border: 1px solid rgba(247, 243, 238, 0.35);
	color: var(--global-palette8);
}
.header-social-wrap .social-button:hover,
.header-mobile-social-wrap .social-button:hover,
.footer-social-wrap .social-button:hover {
	color: var(--balera-gold);
	border-color: var(--balera-gold);
}
/* The mobile popup menu is light, so its icons need ink */
.header-mobile-social-wrap .social-button {
	color: var(--global-palette3);
	border-color: var(--global-palette7);
}

/* Top bar: dark strip with phone/email and social icons */
.site-top-header-wrap .site-header-row-container-inner {
	background: var(--global-palette3);
}
.site-top-header-wrap,
.site-top-header-wrap a {
	color: var(--global-palette8);
	font-size: 0.85rem;
}
.site-top-header-wrap a:hover {
	color: var(--balera-gold);
}
.site-top-header-wrap .header-html p {
	margin: 0;
}

/* Sticky header gets a hairline once it detaches */
.item-is-fixed .site-main-header-inner-wrap {
	box-shadow: 0 1px 0 rgba(26, 23, 20, 0.08);
}

/* Cards (team members, services, locations, prices) */
.balera-card {
	background: var(--global-palette9);
	border: 1px solid var(--global-palette7);
	border-radius: var(--balera-radius);
	height: 100%;
}
/* Dark cards (the Cup on Competitions): the light border reads as a halo on ink */
.balera-card.has-background {
	border-color: transparent;
}
.balera-card img {
	border-radius: var(--balera-radius);
}
/* Portraits: uniform crop regardless of the uploaded photo's proportions */
.balera-card .wp-block-column:first-child .wp-block-image img {
	aspect-ratio: 4 / 5;
	object-fit: cover;
	width: 100%;
	max-height: 420px;
}
/* Photo rows in cards (Shop): every photo full width with the same crop. Without this the
   portrait rule above crops only the first photo. Square, or 2:3 for dresses on a stand. */
.balera-card .balera-photo-row .wp-block-column .wp-block-image img {
	aspect-ratio: 1;
	object-fit: cover;
	width: 100%;
	max-height: none;
}
.balera-card .balera-photo-row-tall .wp-block-column .wp-block-image img {
	aspect-ratio: 2 / 3;
}

/* Price rows: "1 lesson ........ $130" */
.balera-price-row {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	border-bottom: 1px dashed var(--global-palette7);
	padding: 0.6rem 0;
	margin: 0;
}
.balera-price-row strong {
	color: var(--global-palette1);
	white-space: nowrap;
}

/* Home hero photo: portrait crop so any upload keeps the hero's height in check */
.balera-hero-photo img {
	aspect-ratio: 4 / 5;
	object-fit: cover;
	width: 100%;
	max-height: 620px;
	border-radius: var(--balera-radius);
}

/* Home studio blocks and location cards: one crop per slot for both studios' photos
   (Newton's is a 900x350 panorama, Southborough's 3:2) */
.balera-feature-photo img {
	aspect-ratio: 3 / 2;
	object-fit: cover;
	width: 100%;
	border-radius: var(--balera-radius);
}
.balera-card-photo img {
	aspect-ratio: 16 / 7;
	object-fit: cover;
	width: 100%;
}

/* Visiting coaches: uniform square portraits from mixed-size 2013-2024 photos */
.balera-coaches .wp-block-image img {
	aspect-ratio: 1;
	object-fit: cover;
	object-position: top;
	width: 100%;
	border-radius: var(--balera-radius);
}
.balera-coaches h3 {
	font-size: 1.35rem;
	margin-top: 0.75rem;
}

/* Galleries: core grows the leftover photo(s) of the last row to full width,
   which blows a single portrait up to banner size. Keep every tile the same. */
.wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) {
	flex-grow: 0;
}

/* Zelle QR code: scannable but not dominant */
.balera-qr img {
	max-width: 220px;
	margin: 0 auto;
	display: block;
}

/* Wide banner photos */
.balera-banner img {
	width: 100%;
	max-height: 380px;
	object-fit: cover;
	border-radius: var(--balera-radius);
}

/* Map on the contact page */
.balera-map iframe {
	width: 100%;
	height: 420px;
	border: 0;
	margin-top: 2rem;
	border-radius: var(--balera-radius);
}

/* News cards (home Query Loop) */
.wp-block-post-template .wp-block-post-featured-image img {
	border-radius: var(--balera-radius);
}
.wp-block-post-template .wp-block-post-title {
	font-size: 1.5rem;
	margin-top: 1rem;
}
.wp-block-post-template .wp-block-post-title a {
	text-decoration: none;
}
.wp-block-post-template .wp-block-post-date {
	font-size: 0.85rem;
	color: var(--global-palette6);
}

/* Forms (Fluent Forms): theme colors instead of the plugin's blue defaults */
.fluentform .ff-el-input--label label {
	font-weight: 600;
	font-size: 0.9rem;
	color: var(--global-palette3);
}
.fluentform .ff-el-form-control {
	border: 1px solid var(--global-palette7);
	border-radius: var(--balera-radius);
	background: var(--global-palette9);
	padding: 0.7rem 0.9rem;
	font-size: 1rem;
}
.fluentform .ff-el-form-control:focus {
	border-color: var(--global-palette1);
	box-shadow: 0 0 0 3px rgba(122, 31, 43, 0.12);
}
.fluentform .ff-btn-submit {
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-weight: 600;
	font-size: 0.85rem;
	padding: 0.85rem 1.6rem;
}
.ff-message-success {
	border: 1px solid var(--global-palette7);
	background: var(--global-palette8);
	border-radius: var(--balera-radius);
}

/* Google Calendar embed: month grid on desktop, agenda list on phones */
.balera-calendar {
	margin-top: 2rem;
}
.balera-calendar iframe {
	width: 100%;
	height: 720px;
	border: 1px solid var(--global-palette7);
	border-radius: var(--balera-radius);
	background: var(--global-palette9);
}
.balera-calendar .balera-calendar-agenda {
	display: none;
}
@media (max-width: 767px) {
	.balera-calendar .balera-calendar-month {
		display: none;
	}
	.balera-calendar .balera-calendar-agenda {
		display: block;
		height: 560px;
	}
}

/* Footer: dark, with the light logo. Global heading/link colors are ink and
   burgundy, which disappear on the ink footer, so everything is re-colored here. */
.site-footer .footer-widget-area h2,
.site-footer .footer-widget-area h3 {
	color: var(--global-palette9);
	font-size: 1.4rem;
}
.site-footer .footer-widget-area,
.site-footer .footer-widget-area p,
.site-footer .footer-widget-area li {
	color: var(--global-palette7);
}
.site-footer .footer-widget-area a {
	color: var(--global-palette8);
	text-decoration: none;
}
.site-footer .footer-widget-area a:hover {
	color: var(--balera-gold);
}
.site-footer .footer-widget-area ul,
.site-footer .footer-widget-area ul.wp-block-list {
	list-style: none;
	padding-left: 0;
	margin-left: 0;
}
.site-footer .footer-widget-area li {
	margin-bottom: 0.35rem;
}
.site-footer .site-bottom-footer-wrap,
.site-footer .footer-html {
	color: var(--global-palette6);
	font-size: 0.85rem;
}
.site-footer .site-bottom-footer-wrap .site-footer-row-container-inner {
	border-top: 1px solid rgba(247, 243, 238, 0.12);
}
.site-footer .balera-footer-logo {
	max-width: 200px;
	height: auto;
	margin-bottom: 1rem;
}