/**
 * Danceable UI
 * 1. Design tokens (taken from the Elementor kit, post ID 5)
 * 2. Site-wide social top bar
 * 3. Blog archive
 * 4. Single post re-skin (Elementor template 1243)
 */

/* ---------------------------------------------------------------------------
 * 1. Tokens
 * ------------------------------------------------------------------------ */

:root {
	--dnc-primary: #ff5c3b;
	--dnc-secondary: #fcb0ab;
	--dnc-accent: #9c60ff;
	--dnc-ink: #1c1c1f;
	--dnc-ink-soft: #55555c;
	--dnc-bg: #f7f7f5;
	--dnc-surface: #ffffff;
	--dnc-line: #e7e5e0;
	--dnc-dark: #111926;
	--dnc-dark-deep: #110f35;

	/* Same stacks the Elementor kit applies to the rest of the site. */
	--dnc-font-head: "Satoshi", Sans-serif;
	--dnc-font-body: "Inter", Sans-serif;

	--dnc-radius: 8px;
	--dnc-radius-lg: 16px;
	--dnc-shell: 1200px;
}

/* ---------------------------------------------------------------------------
 * 2. Top bar
 * ------------------------------------------------------------------------ */

.dnc-topbar {
	background-color: var(--dnc-dark);
	color: #fff;
	font-family: var(--dnc-font-body);
	font-size: 13px;
	line-height: 1;
	position: relative;
	z-index: 100;
}

.dnc-topbar__inner {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 12px 24px;
	justify-content: center;
	margin: 0 auto;
	max-width: var(--dnc-shell);
	min-height: 40px;
	padding: 8px 20px;
	width: 100%;
}

.dnc-topbar__contact {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	justify-content: center;
	list-style: none;
	margin: 0;
	padding: 0;
}

.dnc-topbar__contact a {
	color: rgba(255, 255, 255, 0.78);
	text-decoration: none;
	transition: color 0.18s ease;
}

.dnc-topbar__contact a:hover,
.dnc-topbar__contact a:focus-visible {
	color: #fff;
}

.dnc-topbar__social {
	align-items: center;
	display: flex;
	gap: 8px;
}

.dnc-topbar__social-link {
	align-items: center;
	background-color: var(--dnc-dark-deep);
	border-radius: 6px;
	color: #fff;
	display: inline-flex;
	height: 28px;
	justify-content: center;
	text-decoration: none;
	transition: background-color 0.18s ease, transform 0.18s ease;
	width: 28px;
}

.dnc-topbar__social-link svg {
	fill: currentColor;
	display: block;
}

.dnc-topbar__social-link:hover,
.dnc-topbar__social-link:focus-visible {
	background-color: var(--dnc-primary);
	color: #fff;
	transform: translateY(-1px);
}

.dnc-topbar__social-link:focus-visible {
	outline: 2px solid var(--dnc-secondary);
	outline-offset: 2px;
}

@media (max-width: 767px) {
	.dnc-topbar__inner {
		gap: 10px;
	}

	.dnc-topbar__contact {
		width: 100%;
	}
}

/* ---------------------------------------------------------------------------
 * 3. Blog archive
 * ------------------------------------------------------------------------ */

/* Hello Elementor caps main with
   `body:not([class*=elementor-page-]) .site-main { max-width: 1140px }`.
   This selector outranks it so the hero and CTA can run full-bleed; the
   sections manage their own width via .dnc-shell. */
body.dnc-blog .dnc-blog-main.site-main {
	background-color: var(--dnc-bg);
	color: var(--dnc-ink);
	font-family: var(--dnc-font-body);
	margin: 0;
	max-width: none;
	padding: 0;
	width: 100%;
}

.dnc-shell {
	margin: 0 auto;
	max-width: var(--dnc-shell);
	padding: 0 20px;
	width: 100%;
}

/* Hero ---------------------------------------------------------------- */

.dnc-hero {
	background:
		radial-gradient(120% 120% at 50% 0%, rgba(252, 176, 171, 0.35) 0%, rgba(247, 247, 245, 0) 62%),
		var(--dnc-bg);
	padding: 64px 0 40px;
	text-align: center;
}

.dnc-hero__eyebrow {
	color: var(--dnc-primary);
	font-family: var(--dnc-font-body);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.12em;
	margin: 0 0 14px;
	text-transform: uppercase;
}

.dnc-hero__title {
	color: var(--dnc-ink);
	font-family: var(--dnc-font-head);
	font-size: clamp(2rem, 1.35rem + 2.6vw, 3.25rem);
	font-weight: 700;
	line-height: 1.15;
	margin: 0 auto;
	max-width: 18ch;
}

.dnc-hero__description {
	color: var(--dnc-ink-soft);
	font-size: 1.0625rem;
	line-height: 1.65;
	margin: 18px auto 0;
	max-width: 62ch;
}

.dnc-hero__description p:last-child {
	margin-bottom: 0;
}

/* Category pills ------------------------------------------------------ */

.dnc-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
	margin-top: 28px;
}

.dnc-pill {
	background-color: var(--dnc-surface);
	border: 1px solid var(--dnc-line);
	border-radius: 999px;
	color: var(--dnc-ink);
	font-size: 0.875rem;
	font-weight: 500;
	padding: 8px 18px;
	text-decoration: none;
	transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.dnc-pill:hover,
.dnc-pill:focus-visible {
	border-color: var(--dnc-primary);
	color: var(--dnc-primary);
}

.dnc-pill.is-active {
	background-color: var(--dnc-ink);
	border-color: var(--dnc-ink);
	color: #fff;
}

/* Card grid ----------------------------------------------------------- */

.dnc-grid {
	display: grid;
	gap: 28px;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	padding: 48px 0 8px;
}

.dnc-card {
	background-color: var(--dnc-surface);
	border: 1px solid var(--dnc-line);
	border-radius: var(--dnc-radius-lg);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.dnc-card:hover {
	border-color: rgba(255, 92, 59, 0.4);
	box-shadow: 0 18px 40px -24px rgba(28, 28, 31, 0.45);
	transform: translateY(-3px);
}

.dnc-card__media {
	aspect-ratio: 16 / 9;
	background-color: #f1efea;
	display: block;
	overflow: hidden;
	position: relative;
}

.dnc-card__media img {
	display: block;
	height: 100%;
	object-fit: cover;
	transition: transform 0.35s ease;
	width: 100%;
}

.dnc-card:hover .dnc-card__media img {
	transform: scale(1.03);
}

.dnc-card__media-fallback {
	align-items: center;
	background: linear-gradient(135deg, var(--dnc-secondary) 0%, var(--dnc-primary) 100%);
	color: #fff;
	display: flex;
	font-family: var(--dnc-font-head);
	font-size: 1.5rem;
	font-weight: 700;
	height: 100%;
	justify-content: center;
	letter-spacing: -0.01em;
	width: 100%;
}

.dnc-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 12px;
	padding: 24px;
}

.dnc-card__tag {
	align-self: flex-start;
	background-color: rgba(255, 92, 59, 0.1);
	border-radius: 999px;
	color: var(--dnc-primary);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	padding: 5px 12px;
	text-transform: uppercase;
}

.dnc-card__title {
	font-family: var(--dnc-font-head);
	font-size: 1.3125rem;
	font-weight: 700;
	line-height: 1.3;
	margin: 0;
}

.dnc-card__title a {
	color: var(--dnc-ink);
	text-decoration: none;
}

.dnc-card__title a:hover,
.dnc-card__title a:focus-visible {
	color: var(--dnc-primary);
}

.dnc-card__excerpt {
	color: var(--dnc-ink-soft);
	font-size: 0.9375rem;
	line-height: 1.6;
	margin: 0;
}

.dnc-card__meta {
	align-items: center;
	border-top: 1px solid var(--dnc-line);
	color: var(--dnc-ink-soft);
	display: flex;
	font-size: 0.8125rem;
	gap: 12px;
	justify-content: space-between;
	margin-top: auto;
	padding-top: 16px;
}

.dnc-card__more {
	color: var(--dnc-primary);
	font-weight: 600;
}

/* Pagination ---------------------------------------------------------- */

.dnc-blog-main .pagination,
.dnc-blog-main .navigation.pagination {
	padding: 40px 0 8px;
}

.dnc-blog-main .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
}

.dnc-blog-main .page-numbers {
	background-color: var(--dnc-surface);
	border: 1px solid var(--dnc-line);
	border-radius: var(--dnc-radius);
	color: var(--dnc-ink);
	display: inline-flex;
	font-size: 0.9375rem;
	min-width: 40px;
	padding: 9px 14px;
	place-content: center;
	text-decoration: none;
}

.dnc-blog-main .page-numbers:hover {
	border-color: var(--dnc-primary);
	color: var(--dnc-primary);
}

.dnc-blog-main .page-numbers.current {
	background-color: var(--dnc-ink);
	border-color: var(--dnc-ink);
	color: #fff;
}

/* Empty state --------------------------------------------------------- */

.dnc-empty {
	margin: 0 auto;
	max-width: 46ch;
	padding: 72px 0;
	text-align: center;
}

.dnc-empty h2 {
	font-family: var(--dnc-font-head);
	font-weight: 700;
	margin: 0 0 12px;
}

.dnc-empty p {
	color: var(--dnc-ink-soft);
	margin: 0 0 24px;
}

/* Buttons ------------------------------------------------------------- */

.dnc-button {
	background-color: var(--dnc-primary);
	border: 0;
	border-radius: var(--dnc-radius);
	color: #fff;
	display: inline-block;
	font-family: var(--dnc-font-body);
	font-size: 0.9375rem;
	font-weight: 600;
	padding: 13px 26px;
	text-decoration: none;
	transition: filter 0.18s ease, transform 0.18s ease;
}

.dnc-button:hover,
.dnc-button:focus-visible {
	color: #fff;
	filter: brightness(0.94);
	transform: translateY(-1px);
}

.dnc-button--accent {
	background-color: var(--dnc-accent);
}

/* Closing CTA --------------------------------------------------------- */

.dnc-cta {
	margin-top: 64px;
	padding: 0 0 72px;
}

.dnc-cta__inner {
	background:
		radial-gradient(90% 140% at 100% 0%, rgba(156, 96, 255, 0.16) 0%, rgba(255, 92, 59, 0.1) 55%, rgba(255, 255, 255, 0) 100%),
		var(--dnc-surface);
	border: 1px solid var(--dnc-line);
	border-radius: 24px;
	max-width: var(--dnc-shell);
	padding: 56px 32px;
	text-align: center;
}

.dnc-cta__title {
	font-family: var(--dnc-font-head);
	font-size: clamp(1.5rem, 1.15rem + 1.4vw, 2.125rem);
	font-weight: 700;
	line-height: 1.25;
	margin: 0 auto;
	max-width: 24ch;
}

.dnc-cta__text {
	color: var(--dnc-ink-soft);
	margin: 16px auto 28px;
	max-width: 56ch;
}

.dnc-cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	justify-content: center;
}

@media (max-width: 767px) {
	.dnc-hero {
		padding: 40px 0 28px;
	}

	.dnc-grid {
		gap: 20px;
		grid-template-columns: 1fr;
		padding-top: 32px;
	}

	.dnc-cta__inner {
		padding: 40px 20px;
	}
}

/* ---------------------------------------------------------------------------
 * 4. Single post re-skin
 *
 * The Elementor single-post template (ID 1243) came from an imported kit and
 * still carries its own Poppins / #1C244B typography. These rules put it back
 * on the site's stacks and colours. !important is needed because Elementor
 * writes per-element rules of equal specificity into post-1243.css.
 * ------------------------------------------------------------------------ */

.dnc-blog-single {
	background-color: var(--dnc-bg);
}

.dnc-blog-single .elementor-heading-title,
.dnc-blog-single .elementor-widget-theme-post-title .elementor-heading-title,
.dnc-blog-single .elementor-widget-theme-post-content h1,
.dnc-blog-single .elementor-widget-theme-post-content h2,
.dnc-blog-single .elementor-widget-theme-post-content h3,
.dnc-blog-single .elementor-widget-theme-post-content h4,
.dnc-blog-single .elementor-widget-theme-post-content h5,
.dnc-blog-single .elementor-widget-theme-post-content h6 {
	color: var(--dnc-ink) !important;
	font-family: var(--dnc-font-head) !important;
	font-weight: 700 !important;
}

/* Post title: cap the imported 65px and keep it fluid. */
.dnc-blog-single .elementor-widget-theme-post-title .elementor-heading-title {
	font-size: clamp(2rem, 1.2rem + 3.2vw, 3.5rem) !important;
	letter-spacing: -0.015em;
	line-height: 1.12 !important;
}

/* Body copy: site font, left aligned, comfortable measure. */
.dnc-blog-single .elementor-widget-theme-post-content,
.dnc-blog-single .elementor-widget-theme-post-excerpt {
	color: var(--dnc-ink) !important;
	font-family: var(--dnc-font-body) !important;
}

.dnc-blog-single .elementor-widget-theme-post-content p,
.dnc-blog-single .elementor-widget-theme-post-content li,
.dnc-blog-single .elementor-widget-theme-post-excerpt p {
	color: var(--dnc-ink) !important;
	font-family: var(--dnc-font-body) !important;
	font-size: 1.0625rem !important;
	letter-spacing: normal !important;
	line-height: 1.75 !important;
	text-align: left !important;
}

.dnc-blog-single .elementor-widget-theme-post-content > .elementor-widget-container,
.dnc-blog-single .elementor-widget-theme-post-excerpt > .elementor-widget-container {
	margin-inline: auto;
	/* A fixed measure, not ch: the excerpt and body run at different font
	   sizes, so ch units would give them different widths and misalign them. */
	max-width: 46rem;
}

/* The excerpt widget renders bare text (no <p>) and the imported kit styles it
   as capitalised 22px Poppins. Re-cast it as a standfirst. */
.dnc-blog-single .elementor-widget-theme-post-excerpt > .elementor-widget-container {
	border-left: 3px solid var(--dnc-primary);
	color: var(--dnc-ink-soft) !important;
	font-family: var(--dnc-font-body) !important;
	font-size: 1.1875rem !important;
	font-weight: 400 !important;
	line-height: 1.6 !important;
	padding-left: 18px;
	text-transform: none !important;
}

.dnc-blog-single .elementor-widget-theme-post-content h2 {
	font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2rem) !important;
	margin-top: 2em;
}

.dnc-blog-single .elementor-widget-theme-post-content h3 {
	font-size: 1.25rem !important;
	margin-top: 1.6em;
}

.dnc-blog-single .elementor-widget-theme-post-content a {
	color: var(--dnc-primary) !important;
	text-decoration-color: rgba(255, 92, 59, 0.4);
	text-underline-offset: 3px;
}

.dnc-blog-single .elementor-widget-theme-post-content img {
	border-radius: var(--dnc-radius-lg);
}

.dnc-blog-single .elementor-widget-theme-post-content blockquote {
	border-left: 3px solid var(--dnc-primary);
	color: var(--dnc-ink-soft);
	font-style: normal;
	margin: 2em 0;
	padding: 4px 0 4px 20px;
}

/* Post meta (date / author). */
.dnc-blog-single .elementor-widget-post-info .elementor-icon-list-text,
.dnc-blog-single .elementor-widget-post-info .elementor-icon-list-item,
.dnc-blog-single .elementor-widget-post-info a {
	color: var(--dnc-ink-soft) !important;
	font-family: var(--dnc-font-body) !important;
	font-size: 0.9375rem !important;
}

.dnc-blog-single .elementor-widget-post-info .elementor-icon-list-icon i,
.dnc-blog-single .elementor-widget-post-info .elementor-icon-list-icon svg {
	color: var(--dnc-primary) !important;
	fill: var(--dnc-primary) !important;
}

/* Post navigation + share + related. */
.dnc-blog-single .elementor-post-navigation,
.dnc-blog-single .elementor-post-navigation__prev,
.dnc-blog-single .elementor-post-navigation__next {
	font-family: var(--dnc-font-body) !important;
}

.dnc-blog-single .elementor-post-navigation a {
	color: var(--dnc-ink) !important;
}

.dnc-blog-single .elementor-post-navigation a:hover {
	color: var(--dnc-primary) !important;
}

/* Share row. */
.dnc-blog-single .elementor-widget-share-buttons .elementor-share-btn {
	border-radius: var(--dnc-radius) !important;
}

/* The share widget colours its icons through Elementor's own custom property,
   which the template sets to the pale secondary pink. Override the property,
   not the fill, and match the template's specificity so this wins. */
.dnc-blog-single .elementor-widget.elementor-widget-share-buttons {
	--e-share-buttons-secondary-color: var(--dnc-ink-soft);
}

.dnc-blog-single .elementor-widget.elementor-widget-share-buttons .elementor-share-btn:hover {
	--e-share-buttons-secondary-color: var(--dnc-primary);
}

/* Previous / next links. */
.dnc-blog-single .elementor-post-navigation a,
.dnc-blog-single .elementor-post-navigation span {
	font-style: normal !important;
	font-weight: 600;
	text-decoration: none !important;
}

/* ---------------------------------------------------------------------------
 * 5. Elementor post lists
 *
 * Covers the resource hubs (Resources, Instructor / Student Resource Center,
 * classic skin) and the Related Posts block on single posts (cards skin).
 * Both ship unbranded — bare underlined magenta links, thumbnails cropping
 * off-frame — so they get the same card treatment as the blog archive.
 * Elementor writes per-element rules of equal specificity, so the overrides
 * need !important or a longer selector.
 * ------------------------------------------------------------------------ */

.dnc-resources .elementor-widget-posts .elementor-posts-container,
.dnc-blog-single .elementor-widget-posts .elementor-posts-container {
	align-items: stretch;
}

.dnc-resources .elementor-widget-posts .elementor-post,
.dnc-blog-single .elementor-widget-posts .elementor-post {
	background-color: var(--dnc-surface);
	border: 1px solid var(--dnc-line);
	border-radius: var(--dnc-radius-lg);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.dnc-resources .elementor-widget-posts .elementor-post:hover,
.dnc-blog-single .elementor-widget-posts .elementor-post:hover {
	border-color: rgba(255, 92, 59, 0.4);
	box-shadow: 0 18px 40px -24px rgba(28, 28, 31, 0.45);
	transform: translateY(-3px);
}

/* Thumbnail: fixed 16/9 crop. Elementor centres the image with
   translate(-50%, -50%), so the 50% offsets have to stay. */
.dnc-resources .elementor-widget-posts .elementor-post__thumbnail__link,
.dnc-blog-single .elementor-widget-posts .elementor-post__thumbnail__link {
	display: block;
	margin: 0 !important;
	width: 100%;
}

.dnc-resources .elementor-widget-posts .elementor-post__thumbnail,
.dnc-blog-single .elementor-widget-posts .elementor-post__thumbnail {
	aspect-ratio: 16 / 9;
	background-color: #f1efea;
	overflow: hidden;
	padding-bottom: 0 !important;
	position: relative;
}

.dnc-resources .elementor-widget-posts .elementor-post__thumbnail img,
.dnc-blog-single .elementor-widget-posts .elementor-post__thumbnail img {
	height: 100% !important;
	left: 50% !important;
	object-fit: cover;
	position: absolute !important;
	top: 50% !important;
	transform: translate(-50%, -50%) !important;
	transition: transform 0.35s ease;
	width: 100% !important;
}

.dnc-resources .elementor-widget-posts .elementor-post:hover .elementor-post__thumbnail img,
.dnc-blog-single .elementor-widget-posts .elementor-post:hover .elementor-post__thumbnail img {
	transform: translate(-50%, -50%) scale(1.03) !important;
}

.dnc-resources .elementor-widget-posts .elementor-post__text,
.dnc-blog-single .elementor-widget-posts .elementor-post__text {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 12px;
	margin: 0 !important;
	/* Elementor writes per-element padding for this widget at a higher
	   specificity than a three-class selector, hence !important. */
	padding: 24px !important;
}

.dnc-resources .elementor-widget-posts .elementor-post__title,
.dnc-blog-single .elementor-widget-posts .elementor-post__title {
	font-family: var(--dnc-font-head) !important;
	font-size: 1.3125rem !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
	margin: 0 !important;
}

.dnc-resources .elementor-widget-posts .elementor-post__title a,
.dnc-blog-single .elementor-widget-posts .elementor-post__title a {
	color: var(--dnc-ink) !important;
	text-decoration: none !important;
	transition: color 0.18s ease;
}

.dnc-resources .elementor-widget-posts .elementor-post__title a:hover,
.dnc-blog-single .elementor-widget-posts .elementor-post__title a:hover,
.dnc-resources .elementor-widget-posts .elementor-post__title a:focus-visible,
.dnc-blog-single .elementor-widget-posts .elementor-post__title a:focus-visible {
	color: var(--dnc-primary) !important;
}

.dnc-resources .elementor-widget-posts .elementor-post__excerpt,
.dnc-blog-single .elementor-widget-posts .elementor-post__excerpt {
	margin: 0 !important;
}

.dnc-resources .elementor-widget-posts .elementor-post__excerpt p,
.dnc-blog-single .elementor-widget-posts .elementor-post__excerpt p {
	color: var(--dnc-ink-soft) !important;
	font-family: var(--dnc-font-body) !important;
	font-size: 0.9375rem !important;
	line-height: 1.6 !important;
	margin: 0 !important;
}

.dnc-resources .elementor-widget-posts .elementor-post__read-more,
.dnc-blog-single .elementor-widget-posts .elementor-post__read-more {
	/* Elementor ships `align-self: flex-start` on this link, which shrink-wraps
	   it inside the flex column and would leave the divider text-width. */
	align-self: stretch !important;
	border-top: 1px solid var(--dnc-line);
	display: block !important;
	/* The cards skin renders this link italic. */
	font-style: normal !important;
	margin-bottom: 0 !important;
	color: var(--dnc-primary) !important;
	font-family: var(--dnc-font-body) !important;
	font-size: 0.8125rem !important;
	font-weight: 600 !important;
	margin-top: auto !important;
	padding-top: 16px;
	text-decoration: none !important;
}

.dnc-resources .elementor-widget-posts .elementor-post__read-more:hover,
.dnc-blog-single .elementor-widget-posts .elementor-post__read-more:hover {
	color: var(--dnc-ink) !important;
}

.dnc-resources .elementor-widget-posts .elementor-post__meta-data,
.dnc-blog-single .elementor-widget-posts .elementor-post__meta-data {
	color: var(--dnc-ink-soft) !important;
	font-family: var(--dnc-font-body) !important;
	font-size: 0.8125rem !important;
	margin: 0 !important;
}

/* The cards skin (Related Posts) nests an extra wrapper inside .elementor-post.
   Neutralise its own chrome so the outer card is the only visible surface. */
.dnc-blog-single .elementor-widget-posts .elementor-post__card {
	background-color: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	display: flex;
	flex: 1;
	flex-direction: column;
	margin: 0;
	overflow: visible;
}

.dnc-blog-single .elementor-widget-posts .elementor-post__meta-data {
	border: 0;
	padding: 0 24px;
}