/*
Theme Name: DJ Don Child
Theme URI: https://utahdiscjockey.com/
Description: Child theme for Don Woodbury Productions, based on Kadence. Defines the brand color palette and any site-specific overrides.
Author: Don Woodbury Productions
Author URI: https://utahdiscjockey.com/
Template: kadence
Version: 1.0.0
Text Domain: dj-don-child
*/

/* =========================================================================
   Brand fonts — self-hosted Futura BT family
   Files in /wp-content/uploads/fonts/. We register the whole family under
   each of the two name variants the brand spec uses ("Futura Lt BT" and
   "Futura Bk BT") so font-weight resolves to the actual cut instead of
   faux-bolding the Light file.

   font-display: swap — text shows immediately with the system fallback,
   then re-renders when the woff2 lands. Avoids FOIT.
   ========================================================================= */

@font-face {
	font-family: "Futura Lt BT";
	src: url("/wp-content/uploads/fonts/FuturaBT-Light.woff2") format("woff2"),
	     url("/wp-content/uploads/fonts/FuturaBT-Light.woff")  format("woff");
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Futura Lt BT";
	src: url("/wp-content/uploads/fonts/FuturaBT-Book.woff2") format("woff2"),
	     url("/wp-content/uploads/fonts/FuturaBT-Book.woff")  format("woff");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Futura Lt BT";
	src: url("/wp-content/uploads/fonts/FuturaBT-Medium.woff2") format("woff2"),
	     url("/wp-content/uploads/fonts/FuturaBT-Medium.woff")  format("woff");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Futura Lt BT";
	src: url("/wp-content/uploads/fonts/Futura-Bold.woff2") format("woff2"),
	     url("/wp-content/uploads/fonts/Futura-Bold.woff")  format("woff");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Futura Lt BT";
	src: url("/wp-content/uploads/fonts/Futura-Black-Bold.woff2") format("woff2"),
	     url("/wp-content/uploads/fonts/Futura-Black-Bold.woff")  format("woff");
	font-weight: 800;
	font-style: normal;
	font-display: swap;
}

/* Same family registered under the body-spec name "Futura Bk BT" */
@font-face {
	font-family: "Futura Bk BT";
	src: url("/wp-content/uploads/fonts/FuturaBT-Light.woff2") format("woff2"),
	     url("/wp-content/uploads/fonts/FuturaBT-Light.woff")  format("woff");
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Futura Bk BT";
	src: url("/wp-content/uploads/fonts/FuturaBT-Book.woff2") format("woff2"),
	     url("/wp-content/uploads/fonts/FuturaBT-Book.woff")  format("woff");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Futura Bk BT";
	src: url("/wp-content/uploads/fonts/FuturaBT-Medium.woff2") format("woff2"),
	     url("/wp-content/uploads/fonts/FuturaBT-Medium.woff")  format("woff");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Futura Bk BT";
	src: url("/wp-content/uploads/fonts/Futura-Bold.woff2") format("woff2"),
	     url("/wp-content/uploads/fonts/Futura-Bold.woff")  format("woff");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Futura Bk BT";
	src: url("/wp-content/uploads/fonts/Futura-Black-Bold.woff2") format("woff2"),
	     url("/wp-content/uploads/fonts/Futura-Black-Bold.woff")  format("woff");
	font-weight: 800;
	font-style: normal;
	font-display: swap;
}

/* =========================================================================
   Brand typography spec — provided by owner (Tailwind-derived)
   font-family: "Futura Lt BT" / "Futura Bk BT" — both registered above
   with weight-aware @font-face declarations.

   Add new heading specs (more variants, button, etc.) following the
   same pattern as the h2/h3 blocks below.
   ========================================================================= */

/* --- body font (applies broadly so list items and form fields match p) --- */
body,
.wp-site-blocks {
	font-family: "Futura Bk BT", "Futura", "Trebuchet MS", system-ui, -apple-system, sans-serif;
}

/* --- p --- */
p {
	font-family: inherit;
	font-size: 19px;
	letter-spacing: normal;
	line-height: 1.75rem;       /* 28px */
	margin: 0 0 1em 0;
	padding: 0;
	border: none;
}
@media (min-width: 1600px) { p { font-size: 21px; line-height: 34px; } }
@media (min-width: 1900px) { p { font-size: 26px; line-height: 42px; } }
@media (min-width: 2400px) { p { font-size: 2.25rem; line-height: 60px; } }   /* text-4xl = 36px */
@media (max-width:  999px) { p { font-size: 1rem;   line-height: 1.75rem; } } /* text-base = 16px */
@media (max-width:  767px) { p { font-size: 15px;   line-height: 1.75rem; } }
@media (max-width:  479px) { p { font-size: 0.875rem; line-height: 1.75rem; } } /* text-sm = 14px */

/* --- shared heading family (applies to h1-h6 once, then individual specs override size/weight) --- */
h1, h2, h3, h4, h5, h6 {
	color: #000000;
	font-family: "Futura Lt BT", "Futura", "Trebuchet MS", system-ui, -apple-system, sans-serif;
	font-feature-settings: "lnum";
	font-variant-numeric: lining-nums;
	padding: 0;
	border: none;
}

/* --- h1 + h2 (h1 styled identically to h2 per owner direction) --- */
h1, h2 {
	font-size: 45px;
	font-weight: normal;         /* 400 — resolves to FuturaBT-Book */
	letter-spacing: 0;
	line-height: 1.25;           /* leading-tight */
	margin: 15px 0 30px 0;
}
@media (min-width: 2400px) { h1, h2 { font-size: 3.75rem; } }                   /* text-6xl = 60px */
@media (max-width: 1199px) { h1, h2 { font-size: 42px; margin-bottom: 17px; } }
@media (max-width:  999px) { h1, h2 { font-size: 35px; margin-bottom: 0.5rem; } }
@media (max-width:  767px) {
	h1, h2     { text-align: center; }
	h1 br, h2 br  { display: none; }
}
@media (max-width:  639px) { h1, h2 { font-size: 28px; margin-bottom: 0.875rem; } }
@media (max-width:  479px) { h1, h2 { font-size: 21px; margin-bottom: 0.875rem; } }

/* --- h3 --- */
h3 {
	font-size: 1.875rem;         /* text-3xl = 30px */
	font-weight: 700;            /* font-bold — resolves to Futura-Bold */
	letter-spacing: 1px;
	line-height: 1.25;           /* leading-tight */
	text-transform: uppercase;
	margin: 0.625rem 0 35px 0;   /* mt-2.5 / mb-[35px] */
}

/* --- h4, h5, h6 (defined for parity; share heading family from h1-h6 block above) --- */
h4 {
	font-size: 1.375rem;         /* 22px */
	font-weight: 700;
	letter-spacing: 0.5px;
	line-height: 1.3;
	margin: 0.5rem 0 0.75rem 0;
}
h5 {
	font-size: 1.125rem;         /* 18px */
	font-weight: 700;
	letter-spacing: 0.5px;
	line-height: 1.3;
	margin: 0.5rem 0 0.5rem 0;
}
h6 {
	font-size: 1rem;             /* 16px */
	font-weight: 700;
	letter-spacing: 0.5px;
	line-height: 1.3;
	margin: 0.5rem 0 0.5rem 0;
	text-transform: uppercase;
}
@media (min-width: 1900px) { h3 { font-size: 2.5rem;  margin: 1.25rem 0; } }    /* 40px */
@media (min-width: 2400px) { h3 { font-size: 3.25rem; margin: 1.875rem 0; } }   /* 52px */
@media (max-width: 1199px) { h3 { font-size: 1.625rem; } }                       /* 26px */
@media (max-width:  639px) { h3 { font-size: 1.4375rem; } }                      /* 23px */
@media (max-width:  479px) { h3 { font-size: 1rem; margin: 5px 0 12px 0; } }     /* 16px */

/* --- strong (inline emphasis) --- */
strong {
	color: #db2777;             /* tailwind pink-600 */
	font-weight: 700;           /* font-bold */
}

/*
 * Carve-out: preserve inherited text color when <strong> appears on dark
 * backgrounds. Tailwind pink-600 fails WCAG AA against the dark-purple CTA
 * panel (3.56:1) and against the dark hero overlay. Inheriting the
 * surrounding text color (typically white) keeps the bold weight as the
 * emphasis cue without sacrificing contrast.
 */
.udj-reserve-purple strong,
.has-white-color strong,
.wp-block-cover strong,
[class*="has-black-background"] strong {
	color: inherit;
}

/* --- a (body-prose links) ---
   Scoped to anchors inside <p>, <li>, <address> within <main> so it doesn't
   override Kadence header/footer nav, button-styled anchors, custom CTAs,
   form fields, or my custom-styled anchors (.udj-contact-info__link,
   .udj-social__link, .udj-call-btn). Class-specificity on those custom
   anchors (0,1,0) beats this element-only selector (0,0,3) automatically.

   Tweaks vs. the literal owner spec:
   - font-size: inherit (was 25px). 25px would render LARGER than 19px body
     text and visually break inline links inside paragraphs. Standalone
     featured links opt into the original scale via .is-featured-link.
   - outline:0 dropped — replaced with :focus-visible 2px outline so
     keyboard users always see focus (WCAG 2.4.7).
   - underline removed only on :hover and mouse :focus per spec; keyboard
     :focus-visible keeps a visible outline so focus is never invisible.
   - display:block at 1900px dropped — would have forced every inline link
     onto its own row, breaking body copy. */
main p a,
main li a,
main address a {
	color: #db2777;             /* tailwind pink-600 */
	font-size: inherit;
	line-height: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: color 0.15s linear, text-decoration-color 0.15s linear;
}

main p a:hover,
main li a:hover,
main address a:hover {
	text-decoration: none;
}

/* Keyboard focus — visible outline + no underline */
main p a:focus-visible,
main li a:focus-visible,
main address a:focus-visible {
	outline: 2px solid #000000;
	outline-offset: 3px;
	text-decoration: none;
}

/* Mouse focus — no outline, no underline (matches the spec's :focus rule) */
main p a:focus:not(:focus-visible),
main li a:focus:not(:focus-visible),
main address a:focus:not(:focus-visible) {
	outline: none;
	text-decoration: none;
}

/* Dark-background carve-out — pink-600 fails AA on dark surfaces */
.udj-reserve-purple a,
.has-white-color a,
.wp-block-cover a,
[class*="has-black-background"] a {
	color: inherit;
}

/* --- .is-featured-link — opt into the original spec's larger standalone-link scale ---
   For standalone CTA-style links that should pop visually (not inline body text). */
.is-featured-link {
	font-size: 25px;
	line-height: 1.75rem;
}
@media (min-width: 1600px) { .is-featured-link { line-height: 34px; } }
@media (min-width: 1900px) { .is-featured-link { font-size: 32px; line-height: 42px; } }
@media (min-width: 2400px) { .is-featured-link { font-size: 42px; line-height: 60px; } }
@media (max-width:  639px) { .is-featured-link { font-size: 22px; } }
@media (max-width:  479px) { .is-featured-link { font-size: 1.25rem; line-height: 1.75rem; } }

/* TODO: button typography spec — add when owner provides it. */

/* =========================================================================
   Primary navigation — uppercase text + pipe separators between items.
   Selectors match Kadence's inline header CSS chain
   (`.main-navigation .primary-menu-container > ul > li.menu-item > a`)
   so our rules win on specificity instead of getting clobbered.
   ========================================================================= */

.main-navigation .primary-menu-container > ul > li.menu-item > a {
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding-left: 1.5rem;
	padding-right: 1.5rem;
}

/* Hover + keyboard focus — brand pink. Matches Kadence's selector specificity
 * so it overrides their inline `--global-palette-highlight` rule. */
.main-navigation .primary-menu-container > ul > li.menu-item > a:hover,
.main-navigation .primary-menu-container > ul > li.menu-item > a:focus-visible {
	color: #d1357a;
}

@media (min-width: 768px) {
	/* Spread the menu out across the full header-nav cell AND center it
	 * vertically. The full chain (nav -> primary-menu-container -> ul) gets
	 * height:100% and flex-center so the menu sits in the middle of the
	 * header row regardless of header padding. */
	.main-navigation {
		display: flex;
		align-items: center;
		height: 100%;
		width: 100%;
	}
	.main-navigation .primary-menu-container {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
	}
	.main-navigation .primary-menu-container > ul {
		width: 100%;
		display: flex;
		justify-content: space-evenly;   /* equal gaps including edges — keeps EPK from drifting */
		align-items: center;
		margin: 0;
	}

	/* Pipe separator — absolutely positioned on the right edge of each <li>
	 * so it's guaranteed centered vertically with the link text regardless
	 * of line-height/font-baseline rendering. Each <li> is the positioning
	 * context. */
	.main-navigation .primary-menu-container > ul > li.menu-item {
		position: relative;
	}
	.main-navigation .primary-menu-container > ul > li.menu-item:not(:last-child)::after {
		content: "";
		position: absolute;
		right: -0.25rem;
		top: 50%;
		transform: translateY(-50%);
		width: 1px;
		height: 1em;
		background: #ffffff;
		pointer-events: none;
	}
}

/* =========================================================================
   Kadence content wrapper background — flat white for all pages
   ========================================================================= */

.entry-content-wrap {
	background: #ffffff;
}

/* Homepage only — drop the top padding so the hero sits flush under the header.
 * `body.home` is WP's standard front-page class; `body.page-id-4` is a fallback
 * matching our specific Home page record. */
body.home .entry-content-wrap,
body.page-id-4 .entry-content-wrap {
	padding-top: 0;
}

/* =========================================================================
   Global focus indicators
   Site-wide visible focus on every interactive element. Buttons on dark
   backgrounds (hero overlay, repeated CTA panels) get a dual-ring so the
   indicator is visible on both light and dark surfaces.
   ========================================================================= */

:focus-visible {
	outline: 2px solid #000000;
	outline-offset: 2px;
}

.wp-block-button__link:focus-visible,
.udj-call-btn:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 3px;
	box-shadow: 0 0 0 5px #000000;
}

/* =========================================================================
   Reduced motion
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* =========================================================================
   Home page — kicker text + headline-styled paragraph
   The repeated CTA panel uses a paragraph styled to look like the H2 from
   panel #1 so the heading outline isn't duplicated.
   ========================================================================= */

.udj-kicker {
	margin-bottom: 0.25rem;
	color: #595959;
	font-style: italic;
}

.udj-headline-styled {
	margin-top: 0;
	margin-bottom: 1.5rem;
}

/* =========================================================================
   Custom call-now link/button (hero, CTA panels)
   Inline SVG phone icon + "Call Now" label. Visible label is the marketing
   text; aria-label="Call DJ Don at 801-928-0701" overrides the accessible
   name for screen readers and gives the phone number context.
   ========================================================================= */

.udj-call-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.85rem 1.6rem;
	background: #000000;
	color: #ffffff;
	text-decoration: none;
	font-weight: 500;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	border-radius: 2px;
	transition: background-color 0.2s ease;
}

.udj-call-btn:hover,
.udj-call-btn:focus-visible {
	background: #cd2653;
	color: #ffffff;
}

.udj-call-btn svg {
	flex-shrink: 0;
}

/* =========================================================================
   Service grid — heading link styling
   Pattern 1 from the a11y guide: only the H3 is the link, not the whole
   card. Underline by default to clear WCAG 1.4.1 (color-not-only).
   ========================================================================= */

.udj-service-card-title a {
	color: #000000;
	text-decoration: underline;
	text-underline-offset: 4px;
}

.udj-service-card-title a:hover,
.udj-service-card-title a:focus-visible {
	color: #b81e69;
	text-decoration-color: #b81e69;
}

/* =========================================================================
   Repeated CTA panel — visual continuity with the first instance
   ========================================================================= */

.udj-reserve-cta--repeat {
	border-top: 1px solid #ededed;
	max-width: 1400px;
	margin-left: auto;
	margin-right: auto;
}

/* Override the inline 58.33/41.67 flex-basis on each column so the panel
 * splits 50/50. !important needed because each column's inline style on the
 * page sets its own flex-basis. */
.udj-reserve-cta--repeat > .wp-block-column {
	flex-basis: 50% !important;
}

/* Right column of the repeated CTA panel — DJ event photo background.
 * The inline `background-color:#2d1046` on each page stays as fallback so
 * white text is never on a transparent surface if the image fails to load.
 * 60% deep-purple overlay keeps the image's vibe while clearing AA for
 * white text against any pixel region (~11:1 measured against the brightest
 * areas of the underlying photo). Applies site-wide everywhere this class
 * is used. */
.udj-reserve-purple {
	background-image:
		linear-gradient(rgba(45, 16, 70, 0.6), rgba(45, 16, 70, 0.6)),
		url('/wp-content/uploads/2026/05/download.png');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

/* =========================================================================
   Service grid — equal column heights on desktop
   ========================================================================= */

@media (min-width: 768px) {
	.udj-service-grid > .wp-block-column {
		display: flex;
		flex-direction: column;
	}

	.udj-service-grid .wp-block-image {
		margin-bottom: 1rem;
	}
}

/* =========================================================================
   Screen-reader-only utility (used for visually-hidden h3 in social nav, etc.)
   Standard "sr-only" recipe — element occupies 1px box, no visual impact,
   still announced by assistive tech.
   ========================================================================= */

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	-webkit-clip-path: inset(50%);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background: #ffffff;
	clip: auto !important;
	-webkit-clip-path: none;
	clip-path: none;
	color: #000000;
	display: block;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* =========================================================================
   Contact page — REDESIGN (per owner mockup, 2026-05-03)
   Top: dark form section (#1a1a1a) with white text and pink Submit button.
   Bottom: 4-card row on light background.
   ========================================================================= */

/* --- Top section: dark form panel --- */
.udj-contact-form-block {
	background: #1a1a1a;
	color: #ffffff;
	padding: 4rem 1.5rem 5rem;
}

.udj-contact-form-block .udj-form-heading {
	color: #ffffff;
	margin-top: 0;
	margin-bottom: 2.5rem;
}

/* Reset Fluent Forms input visuals to match the dark mockup. White ~17:1 on
 * #1a1a1a; field borders use #9ca3af for >= 3:1 (WCAG 1.4.11). */
.udj-contact-form-block .ff_form_wrap,
.udj-contact-form-block .ff_form_wrap form {
	color: #ffffff;
}

.udj-contact-form-block .ff-el-input--label label {
	color: #ffffff;
	font-family: "Futura Bk BT", "Futura", "Trebuchet MS", system-ui, sans-serif;
	font-size: 0.95rem;
	font-weight: 400;
	letter-spacing: 0.02em;
	margin-bottom: 0.4rem;
}

.udj-contact-form-block .ff-el-form-control,
.udj-contact-form-block input[type="text"],
.udj-contact-form-block input[type="email"],
.udj-contact-form-block input[type="tel"],
.udj-contact-form-block input[type="date"],
.udj-contact-form-block textarea {
	background: transparent;
	color: #ffffff;
	border: 1px solid #9ca3af;            /* 3:1 against #1a1a1a */
	border-radius: 2px;
	padding: 1.05rem 1rem;
	font-family: "Futura Bk BT", "Futura", "Trebuchet MS", system-ui, sans-serif;
	font-size: 17px;
	width: 100%;
	min-height: 56px;                     /* generous touch target */
	box-shadow: none;
}

.udj-contact-form-block input::placeholder,
.udj-contact-form-block textarea::placeholder {
	color: #cbd5e1;                       /* placeholder >= 4.5:1 against #1a1a1a */
	opacity: 1;
}

.udj-contact-form-block input:focus-visible,
.udj-contact-form-block textarea:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 2px;
	border-color: #ffffff;
}

/* 2-column field grid on desktop, single column on mobile. The Fluent Forms
 * default container layout puts each row as a flex-row of fields; we override
 * that to a 2-column grid where the textarea spans both. */
@media (min-width: 768px) {
	.udj-contact-form-block .ff-t-container,
	.udj-contact-form-block .ff_form_wrap form > .ff-el-group:not(.ff_submit_btn_wrapper) {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 1.25rem 1.5rem;
	}
	.udj-contact-form-block .ff-el-group .ff-t-cell {
		grid-column: auto;
	}
	/* Textarea (Message) field spans both columns */
	.udj-contact-form-block .ff-el-group:has(textarea),
	.udj-contact-form-block .ff_form_wrap form > .ff-el-group:nth-last-child(2) {
		grid-template-columns: 1fr;
	}
	.udj-contact-form-block .ff-el-group:has(textarea) .ff-t-cell,
	.udj-contact-form-block .ff_form_wrap form > .ff-el-group:nth-last-child(2) .ff-t-cell {
		grid-column: 1 / -1;
	}
}

/* Submit button: pink with white text, centered */
.udj-contact-form-block .ff_btn_style,
.udj-contact-form-block .wpf_has_custom_css.ff-btn-submit,
.udj-contact-form-block button[type="submit"] {
	background: #d1357a;
	color: #ffffff;
	border: 0;
	border-radius: 2px;
	padding: 1.05rem 3rem;
	font-family: "Futura Lt BT", "Futura", "Trebuchet MS", system-ui, sans-serif;
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	min-height: 52px;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.udj-contact-form-block .ff_btn_style:hover,
.udj-contact-form-block button[type="submit"]:hover {
	background: #cd2653;
	color: #ffffff;
}

.udj-contact-form-block .ff_btn_style:focus-visible,
.udj-contact-form-block button[type="submit"]:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 3px;
	box-shadow: 0 0 0 5px #1a1a1a;
}

.udj-contact-form-block .ff-el-group.ff_submit_btn_wrapper,
.udj-contact-form-block .ff-el-form-bottom {
	text-align: center;
	margin-top: 1.25rem;
}

/* --- Bottom section: cards on textured light bg --- */
.udj-contact-info-block {
	background: #f5f5f5;
	background-image: linear-gradient(135deg, #f5f5f5 0%, #f0eef0 50%, #f5f5f5 100%);
	padding: 4rem 1.5rem 5rem;
}

.udj-contact-info-block .udj-info-heading {
	color: #000000;
	margin-bottom: 3rem;
	max-width: 900px;
	margin-left: auto;
	margin-right: auto;
}

.udj-contact-info-block .udj-info-heading strong {
	color: #db2777;            /* tailwind pink-600 */
	font-weight: inherit;      /* keep H2 weight visually */
}

/* 4-card grid */
.udj-contact-cards {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1.25rem;
	max-width: 1280px;
	margin-left: auto;
	margin-right: auto;
}

@media (max-width: 1023px) {
	.udj-contact-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 599px) {
	.udj-contact-cards { grid-template-columns: 1fr; }
}

.udj-card {
	position: relative;
	background: #ffffff;
	padding: 1.75rem 1.25rem 2rem;
	border-bottom: 4px solid #d1357a;
	text-align: center;
	min-height: 170px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.5rem;
}

.udj-card address {
	font-style: normal;
	margin: 0;
	display: contents;
}

.udj-card__title {
	color: #000000;
	font-family: "Futura Lt BT", "Futura", "Trebuchet MS", system-ui, sans-serif;
	font-weight: 700;
	font-size: 1.25rem;
	letter-spacing: 0.02em;
	margin: 0;
}

.udj-card__body {
	color: #000000;
	margin: 0;
	font-size: 1rem;
	line-height: 1.5;
}

.udj-card__link {
	color: #b81e69;            /* darkened brand pink for AA on white */
	text-decoration: none;
	font-weight: 500;
}

.udj-card__link:hover,
.udj-card__link:focus-visible {
	color: #cd2653;
	text-decoration: underline;
}

.udj-card__link:focus-visible {
	outline: 2px solid #000000;
	outline-offset: 3px;
}

/* Card 4 — social icons inside card */
.udj-card__social {
	list-style: none;
	margin: 0.25rem 0 0 0;
	padding: 0;
	display: flex;
	justify-content: center;
	gap: 0.75rem;
}

.udj-card__social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 4px;
	background: transparent;
	color: #d1357a;
	border-bottom: 2px solid #d1357a;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.udj-card__social-link:hover {
	background: #d1357a;
	color: #ffffff;
}

.udj-card__social-link:focus-visible {
	outline: 2px solid #000000;
	outline-offset: 3px;
}

.udj-card__social-link svg { display: block; }

/* =========================================================================
   Karaoke page — hero video, video thumbnails, testimonial
   ========================================================================= */

.udj-hero-video {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0;
}

.udj-hero-video video {
	display: block;
	width: 100%;
	height: auto;
	background: #000000;
}

/* 3-column thumbnail grid for karaoke video links */
.udj-video-thumbs {
	list-style: none;
	margin: 2.5rem auto 0;
	padding: 0;
	max-width: 1100px;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.25rem;
}

@media (max-width: 767px) {
	.udj-video-thumbs { grid-template-columns: 1fr; }
}

.udj-video-thumb {
	display: block;
	position: relative;
	overflow: hidden;
	border-radius: 4px;
	background: #000000;
	transition: transform 0.2s ease;
}

.udj-video-thumb img {
	display: block;
	width: 100%;
	height: auto;
	transition: opacity 0.2s ease;
}

.udj-video-thumb:hover img,
.udj-video-thumb:focus-visible img {
	opacity: 0.8;
}

.udj-video-thumb:focus-visible {
	outline: 3px solid #d1357a;
	outline-offset: 3px;
}

/* Play-icon overlay so users see "this is a video", not just an image */
.udj-video-thumb::after {
	content: "";
	position: absolute;
	top: 50%; left: 50%;
	width: 64px; height: 64px;
	transform: translate(-50%, -50%);
	background: rgba(0,0,0,0.55);
	border-radius: 50%;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: 56% 50%;
	background-size: 32px 32px;
	pointer-events: none;
}

/* Testimonial grid — used when there are multiple testimonials per page */
.udj-testimonial-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2rem;
	max-width: 1200px;
	margin: 2rem auto 0;
}

@media (max-width: 767px) {
	.udj-testimonial-grid { grid-template-columns: 1fr; gap: 1.5rem; }
}

.udj-testimonial-grid .udj-testimonial {
	margin: 0;
	max-width: none;
}

.udj-testimonial__tag {
	display: block;
	color: #b81e69;
	font-size: 0.85rem;
	margin-top: 0.15rem;
	letter-spacing: 0.02em;
}

/* Testimonial blockquote (single) */
.udj-testimonial {
	margin: 2rem auto 0;
	max-width: 760px;
	border-left: 4px solid #d1357a;
	padding: 0.5rem 0 0.5rem 1.5rem;
	background: transparent;
	font-style: normal;
}

.udj-testimonial p {
	font-size: 1.15rem;
	line-height: 1.7;
	color: #2d2d2d;
	margin: 0 0 1rem 0;
}

.udj-testimonial__attr {
	font-style: normal;
	color: #595959;
	font-size: 0.95rem;
}

.udj-testimonial__name {
	color: #0a0000;
	font-weight: 600;
}

/* =========================================================================
   Weddings — top intro (2-column: video left desktop, text right)
   Source order is text-first for SEO/SR; visual reorder via grid-template-areas.
   ========================================================================= */

.udj-weddings-top {
	padding: 4rem 1.5rem;
	max-width: 1280px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-areas: "video text";
	gap: 3rem;
	align-items: start;       /* video and text both top-aligned */
}

@media (max-width: 899px) {
	.udj-weddings-top {
		grid-template-columns: 1fr;
		grid-template-areas: "text" "video";
		gap: 2rem;
	}
}

.udj-weddings-top__text  { grid-area: text; }
.udj-weddings-top__video,
.udj-weddings-top__media { grid-area: video; }   /* __media is a semantic alias for image-based pages (e.g. About) */

.udj-weddings-top__video video,
.udj-weddings-top__video img,
.udj-weddings-top__media img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 4px;
	background: #000000;
}

/* =========================================================================
   Single-slide carousel — testimonials
   APG single-slide pattern. Manual only. Inactive slides use [hidden].
   ========================================================================= */

.udj-carousel--single {
	background-color: #1a1a1a;        /* fallback if inline bg-image fails to load (preserves text contrast) */
	background-size: cover;
	background-position: center;
	color: #ffffff;
	padding: 4rem 1.5rem 5rem;
}

.udj-carousel--single .udj-carousel__layout {
	max-width: 1280px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1.2fr;
	gap: 3rem;
	align-items: center;
}

@media (max-width: 899px) {
	.udj-carousel--single .udj-carousel__layout {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}
}

.udj-carousel__heading {
	color: #ffffff;
}

.udj-carousel__eyebrow {
	color: #db2777;
	font-weight: 700;
	letter-spacing: 0.06em;
	font-size: 1.1rem;
	margin: 0 0 0.75rem 0;
}

.udj-carousel__title {
	color: #ffffff;
	margin: 0;
}

.udj-carousel__stage {
	position: relative;
	display: flex;
	align-items: stretch;
	gap: 1rem;
}

.udj-carousel__btn {
	flex-shrink: 0;
	background: transparent;
	border: 0;
	color: #d1357a;
	cursor: pointer;
	padding: 0.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	border-radius: 4px;
}

.udj-carousel__btn svg { display: block; width: 28px; height: 28px; }

.udj-carousel__btn:hover { color: #ffffff; }

.udj-carousel__btn:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 3px;
}

.udj-carousel__btn[disabled] {
	color: #595959;
	cursor: not-allowed;
}

.udj-carousel__slides {
	flex: 1;
	background: rgba(0, 0, 0, 0.55);
	border-left: 4px solid #d1357a;
	border-right: 4px solid #d1357a;
	padding: 2rem 2.5rem;
	min-height: 240px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.udj-carousel__slide blockquote {
	margin: 0;
	border: 0;
	padding: 0;
	background: transparent;
}

.udj-carousel__slide blockquote p {
	color: #ffffff;
	font-size: 1.05rem;
	line-height: 1.65;
	margin: 0 0 1rem 0;
}

.udj-carousel__slide blockquote footer {
	color: #f0c0d4;
	font-size: 0.95rem;
	font-style: normal;
}

/* About page — "Experience Matters" body, sits inside the same edge-to-edge
 * dark section pattern as testimonials but with paragraph content instead
 * of a carousel. Uses .udj-carousel--single wrapper for consistent bg/padding. */
.udj-experience-body p {
	color: #ffffff;
	font-size: 1.05rem;
	line-height: 1.7;
	margin: 0 0 1.25rem 0;
}

.udj-experience-body p:last-child { margin-bottom: 0; }

/* =========================================================================
   Track carousel — gallery
   Horizontal scroll-snap track with 3 visible at desktop. Prev/next page
   one image at a time. No "slide N of M" semantics.
   ========================================================================= */

.udj-gallery-carousel {
	padding: 4rem 1.5rem 5rem;
	max-width: 1400px;
	margin: 0 auto;
}

.udj-gallery-carousel__heading {
	text-align: center;
	margin: 0 auto 2.5rem;
}

.udj-gallery-carousel__heading strong {
	color: #d1357a;
	font-weight: inherit; /* keep h2 weight */
}

.udj-gallery-carousel__stage {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.udj-gallery-carousel__btn {
	flex-shrink: 0;
	background: transparent;
	border: 0;
	color: #d1357a;
	cursor: pointer;
	padding: 0.5rem;
	min-width: 44px;
	min-height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 4px;
}

.udj-gallery-carousel__btn svg { display: block; width: 28px; height: 28px; }

.udj-gallery-carousel__btn:hover { color: #cd2653; }

.udj-gallery-carousel__btn:focus-visible {
	outline: 2px solid #000000;
	outline-offset: 3px;
}

.udj-gallery-carousel__btn[disabled] {
	color: #cccccc;
	cursor: not-allowed;
}

.udj-gallery-carousel__track {
	flex: 1;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - 2 * 1rem) / 3);
	gap: 1rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	list-style: none;
	margin: 0;
	padding: 0;
	scrollbar-width: thin;
}

@media (max-width: 999px) {
	.udj-gallery-carousel__track {
		grid-auto-columns: calc((100% - 1rem) / 2);
	}
}

@media (max-width: 599px) {
	.udj-gallery-carousel__track {
		grid-auto-columns: 100%;
	}
}

.udj-gallery-carousel__track:focus-visible {
	outline: 2px solid #000000;
	outline-offset: 3px;
}

.udj-gallery-carousel__track > li {
	scroll-snap-align: start;
	margin: 0;
}

.udj-gallery-carousel__track img {
	display: block;
	width: 100%;
	height: 320px;
	object-fit: cover;
	border-radius: 2px;
}

@media (max-width: 599px) {
	.udj-gallery-carousel__track img { height: 260px; }
}

/* =========================================================================
   Weddings page — pricing tier cards
   ========================================================================= */

.udj-packages-section {
	padding: 4rem 1.5rem 5rem;
	background: #ffffff;
	max-width: 100%;
}

.udj-packages-heading {
	text-align: center;
	margin: 0 auto 3rem;
}

.udj-packages-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2rem;
	max-width: 1200px;
	margin: 0 auto;
}

@media (max-width: 899px) {
	.udj-packages-grid { grid-template-columns: 1fr; }
}

.udj-package {
	margin: 0;
	background: #f5f5f5;
	padding: 2.5rem 2rem;
	border-radius: 4px;
	border-top: 6px solid #d1357a;
	display: flex;
	flex-direction: column;
}

.udj-package--upgrade {
	background: #2d1046;
	color: #ffffff;
	border-top-color: #ffffff;
}

.udj-package h3 {
	margin: 0 !important;
	font-size: 1.875rem;
	letter-spacing: 0.02em;
}

.udj-package--upgrade h3 { color: #ffffff; }

.udj-package__price {
	font-size: 1.25rem;
	font-weight: 600;
	margin: 0 0 1.5rem 0;
	color: #d1357a;
}

.udj-package--upgrade .udj-package__price {
	color: #ffffff;
}

.udj-package__note {
	font-size: 0.95rem;
	font-style: italic;
	margin: 0 0 1.5rem 0;
	opacity: 0.9;
}

.udj-package__category {
	font-weight: 700;
	margin: 1.5rem 0 0 0 !important;  /* override Kadence/parent <p> margin */
	font-size: 1.05rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #595959;
}

.udj-package--upgrade .udj-package__category { color: #f0c0d4; }

.udj-package ul {
	list-style: disc;
	margin: 0 0 20px 1.25rem;    /* keep left indent for bullet alignment, add bottom space */
	padding: 0;
}

.udj-package li {
	margin: 0.4rem 0;
	line-height: 1.5;
}

.udj-package__cta {
	display: inline-block;
	align-self: flex-start;
	margin-top: 2rem;
	padding: 0.85rem 1.75rem;
	background: #d1357a;
	color: #ffffff;
	text-decoration: none;
	font-weight: 600;
	letter-spacing: 0.04em;
	border-radius: 2px;
	transition: background-color 0.2s ease;
}

.udj-package--upgrade .udj-package__cta {
	background: #ffffff;
	color: #2d1046;
}

.udj-package__cta:hover,
.udj-package__cta:focus-visible {
	background: #cd2653;
	color: #ffffff;
}

.udj-package--upgrade .udj-package__cta:hover,
.udj-package--upgrade .udj-package__cta:focus-visible {
	background: #f0c0d4;
	color: #2d1046;
}

.udj-package__cta:focus-visible {
	outline: 2px solid #000000;
	outline-offset: 3px;
}

.udj-package--upgrade .udj-package__cta:focus-visible {
	outline-color: #ffffff;
}

/* =========================================================================
   EPK page — press photo grid + logo download cards + tech rider
   ========================================================================= */

.udj-press-photos {
	list-style: none;
	margin: 2rem 0 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.5rem;
}

@media (max-width: 999px) { .udj-press-photos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .udj-press-photos { grid-template-columns: 1fr; } }

.udj-press-photos > li { margin: 0; padding: 0; }

.udj-press-photos figure {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	background: #ffffff;
	padding: 0.75rem;
	border-radius: 4px;
}

.udj-press-photos figure > a:first-child {
	display: block;
	overflow: hidden;
	border-radius: 2px;
}

.udj-press-photos img {
	display: block;
	width: 100%;
	height: 280px;
	object-fit: cover;
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.udj-press-photos figure > a:hover img,
.udj-press-photos figure > a:focus-visible img {
	opacity: 0.85;
	transform: scale(1.02);
}

.udj-press-photos figure > a:focus-visible {
	outline: 2px solid #d1357a;
	outline-offset: 2px;
}

.udj-press-photos figcaption a {
	display: inline-block;
	color: #b81e69;
	font-weight: 600;
	text-decoration: none;
	font-size: 0.95rem;
}

.udj-press-photos figcaption a:hover,
.udj-press-photos figcaption a:focus-visible {
	color: #cd2653;
	text-decoration: underline;
}

.udj-press-photos figcaption a:focus-visible {
	outline: 2px solid #000000;
	outline-offset: 2px;
}

/* Logo download cards */
.udj-logo-cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 2rem;
	margin: 2rem auto 0;
	max-width: 1200px;
}

@media (max-width: 899px) { .udj-logo-cards { grid-template-columns: 1fr; gap: 1.5rem; } }

.udj-logo-card {
	margin: 0;
	background: #f5f5f5;
	padding: 2rem 1.5rem;
	border-radius: 4px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
}

.udj-logo-card img {
	max-width: 240px;
	height: auto;
	display: block;
}

.udj-logo-card figcaption { width: 100%; }

.udj-logo-card h3 {
	margin: 0 0 1rem 0 !important;
	font-size: 1.25rem;
	text-transform: none;
	letter-spacing: 0;
}

.udj-logo-card__downloads {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.udj-logo-card__downloads a {
	display: inline-block;
	padding: 0.6rem 1rem;
	background: #ffffff;
	border: 1px solid #d1357a;
	color: #b81e69;
	font-weight: 500;
	text-decoration: none;
	border-radius: 2px;
	font-size: 0.95rem;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.udj-logo-card__downloads a:hover,
.udj-logo-card__downloads a:focus-visible {
	background: #d1357a;
	color: #ffffff;
	text-decoration: none;
}

.udj-logo-card__downloads a:focus-visible {
	outline: 2px solid #000000;
	outline-offset: 2px;
}

/* Technical rider — readable spacing for the long ordered list */
.udj-tech-rider {
	max-width: 720px;
	margin: 2rem auto 0;
	padding-left: 1.5rem;
}

.udj-tech-rider li {
	padding-left: 0.5rem;
	margin-bottom: 1rem;
	line-height: 1.6;
}

/* Photo gallery — Core Gallery block, slight focus polish */
.udj-karaoke-gallery .wp-block-gallery {
	margin: 2rem auto 0;
	max-width: 1280px;
}

.udj-karaoke-gallery .wp-block-image img {
	border-radius: 4px;
}

.udj-karaoke-gallery .wp-block-image:focus-within {
	outline: 2px solid #000000;
	outline-offset: 3px;
}

/* =========================================================================
   Contact page — LEGACY info list styles (kept in case other pages use)
   ========================================================================= */

.udj-contact-info {
	font-style: normal;
	margin: 0;
}

.udj-contact-info__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.udj-contact-info__list > li {
	margin: 0 0 1.5rem 0;
	padding: 0;
}

.udj-contact-info__list > li:last-child {
	margin-bottom: 0;
}

.udj-contact-info__label {
	display: block;
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #595959;
	margin-bottom: 0.25rem;
}

.udj-contact-info__value {
	display: block;
	color: #0a0000;
	font-size: 1rem;
}

.udj-contact-info__link {
	color: #b81e69;
	text-decoration: underline;
	text-underline-offset: 3px;
	font-size: 1.05rem;
	font-weight: 500;
}

.udj-contact-info__link:hover,
.udj-contact-info__link:focus-visible {
	color: #cd2653;
}

/* =========================================================================
   Contact page — social icon links
   Icon-only <a> with proper accessible names via aria-label.
   Generous tap target (>= 44x44 per WCAG 2.5.5).
   ========================================================================= */

.udj-social {
	margin-top: 2rem;
}

.udj-social__list {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 0;
	padding: 0;
}

.udj-social__list > li {
	margin: 0;
	padding: 0;
}

.udj-social__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: #cd2653;
	color: #ffffff;
	text-decoration: none;
	transition: background-color 0.2s ease, transform 0.15s ease;
}

.udj-social__link:hover {
	background: #b81e69;
	color: #ffffff;
	transform: translateY(-1px);
}

.udj-social__link:focus-visible {
	outline: 2px solid #000000;
	outline-offset: 3px;
	background: #b81e69;
}

.udj-social__link svg {
	display: block;
}

/* =========================================================================
   Contact page — responsive layout (form first on mobile)
   ========================================================================= */

@media (max-width: 767px) {
	.udj-contact-page > .wp-block-column {
		flex-basis: 100% !important;
	}

	.udj-contact-info-section {
		margin-top: 2.5rem;
		padding-top: 2rem;
		border-top: 1px solid #ededed;
	}
}