/*
Theme Name: Jorvik Dance Child
Theme URI: https://jorvikdance.com
Description: SEO-optimised child theme for Jorvik Dance. Built for Elementor page editing on Hello Elementor parent theme.
Author: Jorvik Dance
Template: hello-elementor
Version: 1.4.8
Text Domain: jorvik-dance-child
*/

:root {
	--jd-primary: var(--e-global-color-primary, #bf83ae);
	--jd-primary-dark: #9a5f87;
	--jd-secondary: var(--e-global-color-secondary, #f4ddeb);
	--jd-text: var(--e-global-color-text, #7a7a7a);
	--jd-text-body: var(--e-global-color-text, #7a7a7a);
	--jd-text-muted: #949494;
	--jd-heading-h2: var(--e-global-color-text, #7a7a7a);
	--jd-bg: #f9f5ec;
	--jd-surface: #ffffff;
	--jd-accent: var(--e-global-color-accent, #82c88c);
	--jd-radius: 12px;
	--jd-shadow: 0 8px 24px rgba(44, 44, 44, 0.08);
	--jd-font-display: "Playfair Display", Georgia, serif;
	--jd-font-heading: "Roboto", "Segoe UI", sans-serif;
	--jd-font-body: "Source Sans 3", "Segoe UI", sans-serif;
}

body {
	color: var(--jd-text);
	background-color: var(--jd-bg);
	font-family: var(--jd-font-body);
	line-height: 1.65;
}

h1:not(.elementor-heading-title),
h3:not(.elementor-heading-title),
h4:not(.elementor-heading-title),
.page-header .entry-title {
	color: var(--jd-primary);
	font-family: var(--jd-font-heading);
	line-height: 1.25;
}

/* Font only on .jd-heading wrapper — no colour (avoids blocking Elementor inheritance). */
.jd-heading {
	font-family: var(--jd-font-heading);
	line-height: 1.25;
}

.elementor-widget-heading .elementor-heading-title {
	font-family: var(--jd-font-heading);
	line-height: 1.25;
}

h1.elementor-heading-title,
.elementor-widget-heading h1.elementor-heading-title {
	margin-bottom: 1rem;
	margin-top: 0;
}

h2:not(.elementor-heading-title):not(.elementor-image-box-title) {
	color: var(--jd-heading-h2);
	font-family: var(--jd-font-heading);
	line-height: 1.25;
}

h2.elementor-image-box-title,
.elementor-image-box-title {
	font-family: var(--jd-font-heading);
	line-height: 1.25;
}

h2.elementor-image-box-title a,
.elementor-image-box-title a,
.elementor-widget-image-box h2 a {
	color: inherit;
	text-decoration: none;
}

.elementor-image-box-description {
	color: var(--jd-text-body);
}

p,
.elementor-widget-text-editor p {
	color: var(--jd-text-body);
}

.jd-skip-link {
	position: absolute;
	left: -9999px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.jd-skip-link:focus {
	left: 1rem;
	top: 1rem;
	width: auto;
	height: auto;
	padding: 0.75rem 1rem;
	background: var(--jd-primary);
	color: #fff;
	z-index: 100000;
	border-radius: 6px;
	text-decoration: none;
}

.jd-cta {
	display: inline-block;
	padding: 0.85rem 1.5rem;
	background: var(--jd-primary);
	color: #fff !important;
	border-radius: 999px;
	text-decoration: none;
	font-weight: 600;
	transition: background 0.2s ease, transform 0.2s ease;
}

.jd-cta:hover,
.jd-cta:focus {
	background: var(--jd-primary-dark);
	transform: translateY(-1px);
}

.jd-card {
	background: var(--jd-surface);
	border-radius: var(--jd-radius);
	box-shadow: var(--jd-shadow);
	overflow: hidden;
}

.jd-card img {
	width: 100%;
	height: auto;
	display: block;
}

.jd-breadcrumb {
	font-size: 0.9rem;
	color: var(--jd-text-muted);
	margin-bottom: 1rem;
}

.jd-breadcrumb a {
	color: var(--jd-primary);
	text-decoration: none;
}

.jd-main-content .page-content,
.jd-main-content .elementor {
	width: 100%;
}

.jd-page-entry {
	width: 100%;
}

.jd-section {
	padding: 4rem 0;
}

/* Alternating bands: default sections use page cream; --alt sections use white. */
.jd-section--alt {
	background-color: var(--jd-surface);
}

.elementor-section.jd-section:not(.jd-section--alt) {
	background-color: transparent !important;
}

.elementor-section.jd-section--alt {
	background-color: var(--jd-surface) !important;
}

/*
 * Silver Swans (and similar) may embed page content via an Elementor Template
 * widget inside a boxed flex container — section bands must span the viewport
 * like direct page sections on Home and Contact.
 */
.jd-main-content .elementor-widget-template .elementor-section.elementor-top-section.jd-section:not(.jd-section--alt),
.jd-main-content .elementor-widget-template .elementor-section.elementor-top-section.jd-section--alt {
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	max-width: 100vw;
	width: 100vw;
}

.jd-tagline {
	font-size: 1.25rem;
	color: var(--jd-accent);
	font-weight: 600;
	text-align: center;
}

.jd-contact-block a {
	color: var(--jd-primary);
	font-weight: 600;
}

@media (max-width: 767px) {
	.jd-section {
		padding: 2.5rem 0;
	}
}