/*
 * Brand skin for the older Elementor-built pages (Magic Tour, Corporate Event Magicians, Media…).
 * Their content stays as built; this only restyles colours, type and buttons to match the new site.
 * !important is needed because Elementor writes each widget's colours with very specific selectors.
 */
body.jj-skin, body.jj-skin.elementor-page { background: var(--black) !important; }

/* Blog and post grids */
body.jj-skin .elementor-post__card { background: var(--panel) !important; border-radius: 0 !important; box-shadow: none !important; }
body.jj-skin .elementor-post__title, body.jj-skin .elementor-post__title a { font-family: var(--display) !important; text-transform: uppercase; font-weight: 400 !important; color: var(--cream) !important; text-decoration: none !important; font-size: 22px !important; line-height: 1.05 !important; }
body.jj-skin .elementor-post__meta-data, body.jj-skin .elementor-post__card .elementor-post__meta-data * { color: var(--faint) !important; border-color: var(--line) !important; }
body.jj-skin .elementor-post__read-more { color: var(--cream) !important; text-decoration: none !important; font-size: 12px !important; font-weight: 500 !important; letter-spacing: .3em; text-transform: uppercase; border-bottom: 2px solid var(--burgundy); }
body.jj-skin .elementor-post__badge { background: var(--burgundy) !important; border-radius: 0 !important; }

/* Panels: no white or pale blocks; keep background photos */
body.jj-skin .elementor-section,
body.jj-skin .e-con,
body.jj-skin .elementor-column,
body.jj-skin .elementor-widget-wrap,
body.jj-skin .elementor-widget-container { background-color: transparent !important; }
body.jj-skin [data-settings*='"background_background":"gradient"'] { background-image: none !important; }
body.jj-skin .elementor-background-overlay { background-color: var(--black) !important; opacity: .55 !important; background-image: none !important; }
body.jj-skin .elementor-section.elementor-section-boxed > .elementor-container { max-width: var(--max) !important; }
body.jj-skin .elementor-top-section { border-top: 1px solid var(--line); }
body.jj-skin .elementor-top-section:first-child { border-top: 0; }

/* Type */
body.jj-skin .elementor,
body.jj-skin .elementor p,
body.jj-skin .elementor li,
body.jj-skin .elementor-widget-text-editor,
body.jj-skin .elementor-widget-text-editor *,
body.jj-skin .elementor-image-box-description,
body.jj-skin .elementor-counter-title,
body.jj-skin .elementor-testimonial-content { font-family: var(--body) !important; color: var(--muted) !important; font-weight: 300 !important; line-height: 1.65 !important; letter-spacing: 0 !important; }
body.jj-skin .elementor-widget-text-editor strong,
body.jj-skin .elementor-widget-text-editor b { color: var(--cream) !important; font-weight: 500 !important; }
body.jj-skin .elementor-widget-text-editor a,
body.jj-skin .elementor a:not(.elementor-button) { color: var(--cream) !important; text-decoration: underline; text-decoration-color: var(--burgundy); text-underline-offset: 4px; }

body.jj-skin .elementor-heading-title,
body.jj-skin .elementor-image-box-title,
body.jj-skin .elementor h1, body.jj-skin .elementor h2, body.jj-skin .elementor h3 { font-family: var(--display) !important; font-weight: 400 !important; text-transform: uppercase !important; color: var(--cream) !important; letter-spacing: .01em !important; line-height: 1 !important; }
body.jj-skin h1.elementor-heading-title { font-size: clamp(36px, 4.4vw, 64px) !important; }
body.jj-skin h2.elementor-heading-title { font-size: clamp(30px, 3.4vw, 48px) !important; }
body.jj-skin .elementor-image-box-title { font-size: 22px !important; }

/* Buttons */
body.jj-skin .elementor-button,
body.jj-skin .elementor-field-type-submit button,
body.jj-skin .elementor-form button[type="submit"] { background: var(--burgundy-ink) !important; background-image: none !important; color: var(--cream) !important; fill: var(--cream) !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; font-family: var(--body) !important; font-weight: 500 !important; font-size: 13px !important; letter-spacing: .3em !important; text-transform: uppercase !important; padding: 18px 28px !important; }
body.jj-skin .elementor-button * { color: var(--cream) !important; fill: var(--cream) !important; }
body.jj-skin .elementor-button:hover { opacity: .85; }

/* Cards, quotes, stars, numbers, icons */
body.jj-skin .elementor-image-box-wrapper,
body.jj-skin .elementor-testimonial-wrapper { border-top: 3px solid var(--burgundy); padding-top: 20px; }
body.jj-skin .elementor-star-rating i:before,
body.jj-skin .elementor-star-full:before,
body.jj-skin .elementor-star-rating i { color: var(--burgundy) !important; }
body.jj-skin .elementor-counter-number-wrapper { font-family: var(--display) !important; color: var(--cream) !important; font-weight: 400 !important; }
body.jj-skin .elementor-icon, body.jj-skin .elementor-icon i, body.jj-skin .elementor-icon svg { color: var(--burgundy) !important; fill: var(--burgundy) !important; }
body.jj-skin .elementor-divider-separator { border-color: var(--line) !important; }
body.jj-skin .elementor-widget-image img { border-radius: 0 !important; box-shadow: none !important; }

/* Forms */
body.jj-skin .elementor-field-label { font-family: var(--body) !important; color: var(--cream) !important; font-size: 12px !important; font-weight: 500 !important; letter-spacing: .3em !important; text-transform: uppercase !important; }
body.jj-skin .elementor-field-textual,
body.jj-skin .elementor-field-group input,
body.jj-skin .elementor-field-group textarea,
body.jj-skin .elementor-field-group select { background: transparent !important; border: 0 !important; border-bottom: 1px solid rgba(244, 241, 236, .4) !important; border-radius: 0 !important; color: var(--cream) !important; font-family: var(--body) !important; font-size: 17px !important; padding: 10px 0 !important; min-height: 44px; }
body.jj-skin .elementor-field-group ::placeholder { color: rgba(244, 241, 236, .5) !important; }
body.jj-skin .elementor-field-group select option { color: var(--black); }

/* Accordions / toggles */
body.jj-skin .elementor-tab-title, body.jj-skin .elementor-tab-title a { color: var(--cream) !important; font-family: var(--body) !important; font-weight: 500 !important; }
body.jj-skin .elementor-tab-content { color: var(--muted) !important; border-color: var(--line) !important; }
body.jj-skin .elementor-accordion-item, body.jj-skin .elementor-toggle-item { border-color: var(--line) !important; }

/* Animated headlines (e.g. "The latest goss") */
body.jj-skin .elementor-headline, body.jj-skin .elementor-headline * { font-family: var(--display) !important; text-transform: uppercase; font-weight: 400 !important; color: var(--cream) !important; -webkit-text-fill-color: currentColor !important; background: none !important; }
body.jj-skin .elementor-headline-dynamic-text { color: var(--burgundy) !important; }

/* Sizing, spacing and reading width (these pages were built with long SEO headings and paragraphs) */
body.jj-skin .elementor-top-section,
body.jj-skin .e-con.e-parent { padding-top: clamp(48px, 6vw, 96px) !important; padding-bottom: clamp(48px, 6vw, 96px) !important; }
body.jj-skin .elementor-widget:not(:last-child) { margin-bottom: 24px !important; }
body.jj-skin h1.elementor-heading-title { font-size: clamp(32px, 3.4vw, 52px) !important; line-height: 1 !important; max-width: 18em; margin-left: auto !important; margin-right: auto !important; }
body.jj-skin h2.elementor-heading-title { font-size: clamp(28px, 2.8vw, 42px) !important; }
body.jj-skin h3.elementor-heading-title, body.jj-skin h4.elementor-heading-title { font-size: clamp(22px, 2vw, 28px) !important; }
body.jj-skin .elementor-widget-heading { max-width: 900px; margin-left: auto; margin-right: auto; }

body.jj-skin .elementor-widget-text-editor { max-width: 720px; margin-left: auto !important; margin-right: auto !important; text-align: left !important; }
body.jj-skin .elementor-widget-text-editor,
body.jj-skin .elementor-widget-text-editor p,
body.jj-skin .elementor-widget-text-editor li,
body.jj-skin .elementor-widget-text-editor span { font-size: 17px !important; line-height: 1.7 !important; text-transform: none !important; text-align: left !important; }
body.jj-skin .elementor-widget-text-editor p { margin: 0 0 1em !important; }
body.jj-skin .elementor-widget-text-editor p:last-child { margin-bottom: 0 !important; }
body.jj-skin .elementor-widget-text-editor strong,
body.jj-skin .elementor-widget-text-editor b { font-weight: 400 !important; }
body.jj-skin .elementor-widget-text-editor h2, body.jj-skin .elementor-widget-text-editor h3 { font-size: clamp(22px, 2vw, 28px) !important; margin: 1.2em 0 .5em !important; text-align: left !important; }
body.jj-skin .elementor-widget-text-editor ul, body.jj-skin .elementor-widget-text-editor ol { padding-left: 1.2em; }
body.jj-skin .elementor-widget-button { text-align: center; }

@media (max-width: 760px) {
	body.jj-skin .elementor-top-section, body.jj-skin .e-con.e-parent { padding-left: 20px !important; padding-right: 20px !important; }
	body.jj-skin .elementor-widget-text-editor, body.jj-skin .elementor-widget-text-editor p { font-size: 16px !important; }
}

/* One reading column: headings, text and buttons share the same left edge */
body.jj-skin .elementor-widget-heading,
body.jj-skin .elementor-widget-button,
body.jj-skin .elementor-widget-text-editor { max-width: 720px !important; margin-left: auto !important; margin-right: auto !important; width: 100%; }
body.jj-skin .elementor-widget-heading .elementor-heading-title { text-align: left !important; max-width: none; margin-left: 0 !important; }
body.jj-skin .elementor-widget-button .elementor-button-wrapper,
body.jj-skin .elementor-widget-button { text-align: left !important; }
body.jj-skin .elementor-widget-button .elementor-button-wrapper { display: block !important; justify-content: flex-start !important; }
body.jj-skin .elementor-widget-text-editor h1,
body.jj-skin .elementor-widget-text-editor h2,
body.jj-skin .elementor-widget-text-editor h3,
body.jj-skin .elementor-widget-text-editor h4 { font-family: var(--display) !important; font-weight: 400 !important; text-transform: uppercase !important; color: var(--cream) !important; letter-spacing: .01em !important; line-height: 1.05 !important; }

/* Side-by-side sections: keep pictures off the screen edge and line their top up with the text */
body.jj-skin .elementor-top-section { padding-left: var(--gutter) !important; padding-right: var(--gutter) !important; }
body.jj-skin .elementor-top-section > .elementor-container { align-items: flex-start !important; }
body.jj-skin .elementor-top-section .elementor-column > .elementor-widget-wrap { align-content: flex-start !important; align-items: flex-start !important; padding-left: clamp(12px, 1.5vw, 24px) !important; padding-right: clamp(12px, 1.5vw, 24px) !important; }
body.jj-skin .elementor-widget-button .elementor-widget-container { padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; }
body.jj-skin .elementor-widget-button { width: 100% !important; max-width: 720px !important; }

/* Enquiry forms: same centred column as the text, with their heading centred above */
body.jj-skin .elementor-widget-form { max-width: 720px !important; width: 100%; margin-left: auto !important; margin-right: auto !important; }
body.jj-skin .elementor-widget-heading:has(+ .elementor-widget-form) .elementor-heading-title { text-align: center !important; }

/* Breathing room around videos, pictures and forms so text blocks don't run into them */
body.jj-skin .elementor-widget.elementor-widget-video,
body.jj-skin .elementor-widget.elementor-widget-image,
body.jj-skin .elementor-widget.elementor-widget-form { margin-top: clamp(40px, 5vw, 72px) !important; margin-bottom: clamp(40px, 5vw, 72px) !important; }

/* Heading blocks that were set to use a paragraph or div tag still look like headings */
body.jj-skin .elementor .elementor-heading-title { font-family: var(--display) !important; font-weight: 400 !important; text-transform: uppercase !important; color: var(--cream) !important; letter-spacing: .01em !important; line-height: 1 !important; }
body.jj-skin .elementor p.elementor-heading-title,
body.jj-skin .elementor div.elementor-heading-title,
body.jj-skin .elementor span.elementor-heading-title { font-size: clamp(28px, 2.8vw, 42px) !important; }

/* Stat counters: centred number and label */
body.jj-skin .elementor-widget-counter { margin-left: auto !important; margin-right: auto !important; text-align: center !important; }
body.jj-skin .elementor-counter { align-items: center !important; justify-content: center !important; text-align: center !important; }
body.jj-skin .elementor-counter-number-wrapper { justify-content: center !important; font-size: clamp(48px, 5vw, 80px) !important; line-height: 1 !important; }
body.jj-skin .elementor-counter-title { justify-content: center !important; text-align: center !important; width: 100%; font-size: 13px !important; font-weight: 500 !important; letter-spacing: .3em !important; text-transform: uppercase !important; color: var(--cream) !important; }
body.jj-skin .elementor-top-section:has(.elementor-widget-counter) > .elementor-container { max-width: 900px !important; }

/* Highlight colours pasted into text (white boxes behind links and words) */
body.jj-skin .elementor-widget-text-editor *,
body.jj-skin .elementor-widget-text-editor { background-color: transparent !important; background-image: none !important; }
body.jj-skin .elementor-widget-text-editor a { word-break: break-word; }

/* A picture that starts its column lines up with the top of the text beside it */
body.jj-skin .elementor-widget-wrap > .elementor-widget.elementor-widget-image:first-child,
body.jj-skin .elementor-widget-wrap > .elementor-widget.elementor-widget-video:first-child { margin-top: 0 !important; }

/* Tour pages: drop the orange texture layer that sits behind the whole page */
body.jj-skin .e-con[data-settings*='"position":"absolute"'][data-settings*='"sticky":"top"'] { background-image: none !important; }

/* ---------- Search landing pages (body.jj-landing): tighter type, photos beside text, less scrolling ---------- */
body.jj-landing .elementor-top-section { padding-top: clamp(40px, 5vw, 80px) !important; padding-bottom: clamp(40px, 5vw, 80px) !important; }
body.jj-landing .elementor-widget-text-editor,
body.jj-landing .elementor-widget-text-editor p,
body.jj-landing .elementor-widget-text-editor li,
body.jj-landing .elementor-widget-text-editor span { font-size: 15px !important; line-height: 1.65 !important; }
body.jj-landing .elementor-widget-text-editor p { margin-bottom: .8em !important; }
body.jj-landing h2.elementor-heading-title,
body.jj-landing .elementor p.elementor-heading-title,
body.jj-landing .elementor div.elementor-heading-title { font-size: clamp(24px, 2.4vw, 36px) !important; }
body.jj-landing h1.elementor-heading-title { font-size: clamp(30px, 3vw, 46px) !important; }

/* A section with text and a picture: text on one side, picture on the other (alternating), picture stays in view */
body.jj-landing .elementor-top-section .elementor-widget-wrap:has(> .elementor-widget-text-editor):has(> .elementor-widget-image) {
	display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(32px, 5vw, 80px); align-items: start; max-width: 1180px; margin: 0 auto;
}
body.jj-landing .elementor-top-section .elementor-widget-wrap:has(> .elementor-widget-text-editor):has(> .elementor-widget-image) > .elementor-widget { grid-column: 1; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; }
body.jj-landing .elementor-top-section .elementor-widget-wrap:has(> .elementor-widget-text-editor):has(> .elementor-widget-image) > .elementor-widget-image { grid-column: 2; grid-row: 1 / span 12; margin: 0 !important; position: sticky; top: 24px; }
body.jj-landing .elementor-top-section:nth-child(even) .elementor-widget-wrap:has(> .elementor-widget-text-editor):has(> .elementor-widget-image) > .elementor-widget { grid-column: 2; }
body.jj-landing .elementor-top-section:nth-child(even) .elementor-widget-wrap:has(> .elementor-widget-text-editor):has(> .elementor-widget-image) > .elementor-widget-image { grid-column: 1; }
body.jj-landing .elementor-widget-wrap:has(> .elementor-widget-text-editor):has(> .elementor-widget-image) > .elementor-widget-image img { width: 100% !important; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }

/* Long text with no picture beside it: two columns on wide screens */
@media (min-width: 1024px) {
	body.jj-landing .elementor-widget-wrap:not(:has(> .elementor-widget-image)) > .elementor-widget-text-editor:has(p:nth-of-type(4)) { max-width: 1080px !important; columns: 2; column-gap: 56px; }
	body.jj-landing .elementor-widget-wrap:not(:has(> .elementor-widget-image)) > .elementor-widget-text-editor:has(p:nth-of-type(4)) p { break-inside: avoid; }
	body.jj-landing .elementor-widget-wrap:not(:has(> .elementor-widget-image)):has(> .elementor-widget-text-editor p:nth-of-type(4)) > .elementor-widget-heading,
	body.jj-landing .elementor-widget-wrap:not(:has(> .elementor-widget-image)):has(> .elementor-widget-text-editor p:nth-of-type(4)) > .elementor-widget-button { max-width: 1080px !important; }
}

/* Phones: picture straight after the heading, so the text is broken up */
@media (max-width: 760px) {
	body.jj-landing .elementor-top-section .elementor-widget-wrap:has(> .elementor-widget-text-editor):has(> .elementor-widget-image) { display: flex !important; flex-direction: column; }
	body.jj-landing .elementor-widget-wrap:has(> .elementor-widget-text-editor):has(> .elementor-widget-image) > .elementor-widget { order: 2; width: 100%; }
	body.jj-landing .elementor-widget-wrap:has(> .elementor-widget-text-editor):has(> .elementor-widget-image) > .elementor-widget-heading:first-child { order: 0; }
	body.jj-landing .elementor-widget-wrap:has(> .elementor-widget-text-editor):has(> .elementor-widget-image) > .elementor-widget-image { order: 1; position: static; margin: 4px 0 20px !important; }
	body.jj-landing .elementor-widget-wrap:has(> .elementor-widget-text-editor):has(> .elementor-widget-image) > .elementor-widget-image img { aspect-ratio: 3 / 2; }
}

/* Testimonials: compact cards; on phones a row you swipe through instead of three full-screen cards */
body.jj-landing .elementor-top-section:has(.elementor-widget-star-rating) .elementor-widget { margin-bottom: 10px !important; }
body.jj-landing .elementor-top-section:has(.elementor-widget-star-rating) .elementor-widget-image-box .elementor-image-box-img:empty,
body.jj-landing .elementor-top-section:has(.elementor-widget-star-rating) .elementor-widget-image-box .elementor-image-box-img:not(:has(img)) { display: none !important; }
body.jj-landing .elementor-top-section:has(.elementor-widget-star-rating) .elementor-image-box-wrapper { margin: 0 !important; }
body.jj-landing .elementor-top-section:has(.elementor-widget-star-rating) .elementor-image-box-description { margin: 0 !important; }
body.jj-landing .elementor-top-section:has(.elementor-widget-star-rating) .elementor-widget > .elementor-widget-container { margin: 0 !important; padding: 0 !important; }
body.jj-landing .elementor-top-section:has(.elementor-widget-star-rating) .elementor-image-box-wrapper { padding-top: 8px !important; }
body.jj-landing .elementor-top-section:has(.elementor-widget-star-rating) .elementor-image-box-title { margin-bottom: 4px !important; }
body.jj-landing .elementor-top-section:has(.elementor-widget-star-rating) .elementor-star-rating { font-size: 16px !important; line-height: 1 !important; }
body.jj-landing .elementor-top-section:has(.elementor-widget-star-rating) .elementor-column > .elementor-widget-wrap { padding-top: 20px !important; padding-bottom: 20px !important; }
@media (max-width: 760px) {
	body.jj-landing .elementor-top-section:has(.elementor-widget-star-rating) > .elementor-container { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; padding-bottom: 8px; scrollbar-width: none; }
	body.jj-landing .elementor-top-section:has(.elementor-widget-star-rating) > .elementor-container::-webkit-scrollbar { display: none; }
	body.jj-landing .elementor-top-section:has(.elementor-widget-star-rating) > .elementor-container > .elementor-column { flex: 0 0 80% !important; width: 80% !important; max-width: 80% !important; scroll-snap-align: start; margin: 0 !important; }
	body.jj-landing .elementor-top-section:has(.elementor-widget-star-rating) { padding-right: 0 !important; }
}
body.jj-landing .elementor-top-section:has(.elementor-widget-star-rating) .elementor-widget-text-editor,
body.jj-landing .elementor-top-section:has(.elementor-widget-star-rating) .elementor-widget-text-editor p { text-align: center !important; }
