/**
 * SJFF corrective stylesheet
 * ---------------------------------------------------------------------------
 * Fixes systemic CSS and spacing defects without changing the site's design.
 *
 * Guiding rule: DESKTOP MUST RENDER AS IT DOES TODAY. Every fluid value is
 * anchored so its maximum equals the current desktop measurement. Only the
 * broken small-screen end moves.
 *
 * Elementor exposes its global colors and typography as CSS custom properties
 * on .elementor-kit-6541, so systemic corrections are made by redefining those
 * variables rather than by fighting per-element specificity. Elements with
 * hardcoded values are handled individually in section 6.
 *
 * NOT addressed here (cannot be fixed from CSS, tracked separately):
 *   - Homepage text baked into JPEGs with empty alt attributes
 *   - Six Elementor breakpoints, two of them 20px apart
 *   - container_width_mobile set to 787px (typo for 767)
 *   - Semantic heading levels (H2 used for small labels)
 */

/* ==========================================================================
   1. Tokens
   ========================================================================== */

:root {
	/* Spacing scale on a 4px base. Replaces the 17 ad-hoc values in use. */
	--sjff-sp-1: 0.25rem;   /*  4px */
	--sjff-sp-2: 0.5rem;    /*  8px */
	--sjff-sp-3: 0.75rem;   /* 12px */
	--sjff-sp-4: 1rem;      /* 16px */
	--sjff-sp-5: 1.5rem;    /* 24px */
	--sjff-sp-6: 2rem;      /* 32px */
	--sjff-sp-7: 3rem;      /* 48px */
	--sjff-sp-8: 4rem;      /* 64px */
	--sjff-sp-9: 6rem;      /* 96px */

	/* Minimum breathing room between content and the screen edge. */
	--sjff-gutter: clamp(1.25rem, 4vw, 2.5rem);

	/* The single gutter used on small screens, applied at exactly one level
	   so nested containers cannot compound it. */
	--sjff-gutter-sm: 1.25rem; /* 20px */
}

/* ==========================================================================
   2. Brand colour consolidation

   The palette carried two near-identical versions of each brand blue. The
   SJFF-branded values are authoritative; the strays are retired by pointing
   the global variables at them. Visually imperceptible, but it means every
   element bound to a global now resolves to one canonical colour.

     primary  #005681 -> #025780   (SJFF blue)
     accent   #00A4E4 -> #03A5E6   (SJFF light blue)
   ========================================================================== */

.elementor-kit-6541 {
	--e-global-color-primary: #025780;
	--e-global-color-accent: #03A5E6;
}

/* ==========================================================================
   3. Fluid typography

   The defect: headings carried a single fixed size at every viewport. The
   films archive rendered its H1 at 65px on a 375px phone.

   Each clamp() below tops out at the current desktop size, so wide screens are
   unchanged; only narrow screens scale down.

   H2 is deliberately left at its 20px uppercase label treatment - it is used
   across the site for compact link titles, not section headings.
   ========================================================================== */

.elementor-kit-6541 h1,
h1.elementor-heading-title {
	font-size: clamp(1.875rem, 1.15rem + 3vw, 2.625rem); /* 30 -> 42px */
	line-height: 1.2;
}

.elementor-kit-6541 h3,
h3.elementor-heading-title {
	font-size: clamp(1.375rem, 1.1rem + 1.15vw, 1.8125rem); /* 22 -> 29px */
	line-height: 1.25;
}

.elementor-kit-6541 h4,
h4.elementor-heading-title {
	font-size: clamp(1.125rem, 1rem + 0.5vw, 1.5rem); /* 18 -> 24px */
	line-height: 1.3; /* was 1.0 - lines collided on wrap */
}

/*
 * Per-widget typography overrides generate selectors of roughly (0,4,0)
 * specificity, which the rules above cannot reach. Rather than escalate
 * everywhere, headings are capped only where the damage occurs: narrow
 * viewports. Desktop keeps whatever the page author set, including the
 * intentional 65px hero on the films archive.
 */
@media (max-width: 880px) {
	.elementor-widget-heading h1.elementor-heading-title {
		font-size: clamp(1.875rem, 6.5vw, 2.625rem) !important;
		line-height: 1.2 !important;
	}

	.elementor-widget-heading h3.elementor-heading-title {
		font-size: clamp(1.375rem, 4.5vw, 1.8125rem) !important;
		line-height: 1.25 !important;
	}

	.elementor-widget-heading h4.elementor-heading-title {
		font-size: clamp(1.125rem, 3.5vw, 1.5rem) !important;
		line-height: 1.3 !important;
	}
}

/* ==========================================================================
   4. Body copy readability

   Body line-height was 1.3em, tight enough to impede sustained reading. 1.55
   is the smallest value that comfortably clears Poppins' ascenders and
   descenders. This makes text blocks taller - an intentional, visible change.
   ========================================================================== */

.elementor-kit-6541 {
	--e-global-typography-text-line-height: 1.55em;
}

.elementor-widget-text-editor,
.elementor-widget-text-editor p,
.elementor-widget-theme-post-content p {
	line-height: 1.55;
}

.elementor-widget-text-editor p:not(:last-child) {
	margin-bottom: var(--sjff-sp-5);
}

/* ==========================================================================
   5. Small-screen layout

   Two defects: content ran flush to the screen edge in places, and elsewhere
   top-level containers were inset far enough to squeeze copy into a ~25
   character measure (comfortable reading is 45-75).
   ========================================================================== */

/*
 * The site mixes both Elementor layout generations: newer pages use flexbox
 * containers (.e-con), older ones use sections and columns. Both are handled.
 *
 * Measured on the About page at 375px, three nested layers each contributed
 * their own horizontal padding - 32px + 35.2px + 10px per side, consuming
 * 154px, or 41% of the screen, and squeezing copy to a 25 character measure.
 *
 * The fix collapses those to a SINGLE gutter applied at one level.
 */
@media (max-width: 767px) {
	/* Theme wrapper: let sections span edge to edge so their backgrounds do,
	   too. The gutter is reintroduced once, further in. */
	.page-content {
		padding-inline: 0;
	}

	/* Legacy section/column structure. */
	main .elementor-section.elementor-top-section {
		padding-inline: 0 !important;
	}

	main .elementor-section > .elementor-container {
		padding-inline: var(--sjff-gutter-sm);
		max-width: 100%;
	}

	main .elementor-column > .elementor-widget-wrap {
		padding-inline: 0;
	}

	/* Flexbox container structure. */
	main .elementor > .e-con {
		padding-inline: 0;
	}

	main .elementor > .e-con > .e-con-inner,
	main .elementor > .e-con:not(:has(> .e-con-inner)) {
		padding-inline: var(--sjff-gutter-sm);
	}

	main .e-con > .e-con-inner {
		width: 100%;
		max-width: 100%;
	}

	/* container_width_mobile is set to 787px in the Kit - a typo for the 767
	   default. It surfaces as a max-width on inner containers, so it is
	   neutralised here rather than left to constrain narrow layouts. */
	main .elementor-container,
	main .e-con-inner {
		max-width: 100%;
	}
}

/* ==========================================================================
   5a. Gap between the header and page content

   The theme reserves 90px above and below <main>. Combined with the header's
   own trailing space that left a conspicuous empty strip under the banner -
   reported on both phone and desktop - and another before the footer.

   Reduced at every width, not just on mobile. 24px still separates the
   banner from the content without reading as a hole in the page; phones get
   12px via the small-screen block further down.
   ========================================================================== */

body main.site-main {
	margin-block: var(--sjff-sp-5) !important;
}

/* ==========================================================================
   5a2. Desktop header density

   At 1440 the header is 403px: a 280px banner image, then a 63px controls row
   and a 60px nav row - each of which is only 43px and 40px of actual content
   wrapped in 10px of padding top and bottom.

   Trimming that padding recovers 24px without touching the banner or moving
   anything horizontally. The banner itself is a single 1439x331 JPEG holding
   the logo, crowd photo and tagline, so its height follows its aspect ratio;
   shrinking it further is a branding decision rather than a spacing fix.
   ========================================================================== */

@media (min-width: 1221px) {
	header.elementor-location-header .elementor-element-498d77e,
	header.elementor-location-header .elementor-element-e4a70ce {
		padding-block: var(--sjff-sp-1) !important;
	}

	/* Cap the banner at 220px. width:auto preserves the 1439:331 aspect
	   ratio, so it scales to roughly 955px wide and stays centred by the
	   widget's own text-align rather than being cropped. */
	header.elementor-location-header .elementor-element-e45a43a img {
		max-height: 220px;
		width: auto;
	}

	/*
	 * Tie the Sign In / CART / HELP row to the content width.
	 *
	 * It is a three-column grid stretched across the full viewport, so on a
	 * wide monitor HELP drifts out to the screen edge, far from the banner
	 * and menu it belongs with, while an empty stray element occupies the
	 * entire first column. Capping and centring the row keeps the controls
	 * grouped with the rest of the header at any window size.
	 *
	 * 1200px matches the site's container width, so this lines up with the
	 * page content below rather than introducing a new measurement.
	 */
	header.elementor-location-header .elementor-element-498d77e {
		display: flex !important;
		justify-content: flex-end;
		align-items: center;
		gap: var(--sjff-sp-4);
		max-width: 1200px;
		margin-inline: auto !important;
	}

	header.elementor-location-header .elementor-element-498d77e > * {
		width: auto !important;
		flex: 0 0 auto;
	}
}

/* ==========================================================================
   5b. Header overflow guard

   A top-level header container carries a hardcoded margin-left of 51px while
   also being full width. Below the tablet breakpoint that pushes its right
   edge 51px past the viewport, making the entire page scroll horizontally.

   Horizontal margins on full-width header containers serve no purpose on
   narrow screens, so they are cleared. Desktop, where the offset does not
   overflow, is left alone.
   ========================================================================== */

@media (max-width: 1220px) {
	header.elementor-location-header > .e-con,
	header.elementor-location-header > .elementor-section {
		margin-inline: 0 !important;
		max-width: 100%;
	}
}

/* ==========================================================================
   5c. Mobile header reconstruction

   The header is built from a container with min-height:335px holding a 101px
   logo, plus sibling containers using margin-top:-188px and -114px to pull
   themselves back up into the resulting void. Those offsets are hand-tuned to
   desktop; on a phone the void reopens and the controls scatter across it -
   the hamburger ends up stranded at the far left, clipped by the viewport,
   with several hundred pixels of white space below the logo.

   Verified on an iPhone 16 Pro Max and a Galaxy Note 5.

   Element IDs are targeted deliberately. The offsets are specific to this
   header template, and a blanket rule zeroing every margin in the header
   would flatten intentional spacing along with the broken values.
   ========================================================================== */

/*
 * Now scoped to Elementor's own 1220px breakpoint, where these broken values
 * actually begin.
 *
 * An earlier attempt at 1220px was reverted because collapsing the min-height
 * pushed the menu toggle off-screen to left:-395. That was a symptom of the
 * toggle escaping its 0x0 parent, which is now fixed at the source by
 * overriding the nav-menu--stretch geometry. Retested at 900px: the header
 * drops from 335px to 95px and the toggle holds at left:20, on-screen.
 *
 * This matters beyond tablets - a phone in landscape sits around 900px, which
 * is exactly where the uncollapsed void was still showing.
 */
@media (max-width: 1220px) {
	/* Collapse the artificial void. */
	header.elementor-location-header > .e-con {
		min-height: 0 !important;
	}

	/* Undo the compensating offsets that only made sense against it. */
	header.elementor-location-header .elementor-element-498d77e {
		margin-top: 0 !important;
	}

	/*
	 * Give the toggle's container a real height.
	 *
	 * It is flex-direction:column-reverse, so the vertical axis is the MAIN
	 * axis. With the container's height at 0 its flex children shrink to zero
	 * along it: the widget computed to height:0 while its own child rendered
	 * 81px and spilled out the bottom - over whatever followed the header.
	 * That is the black rule cutting through the hamburger box, reported in
	 * landscape on both an iPhone and a Note.
	 *
	 * height:auto lets the container size to its content so the header
	 * accounts for the toggle instead of letting it hang below.
	 *
	 * This rule previously existed only below 880px, which is exactly why
	 * portrait was fine and landscape was not.
	 */
	header.elementor-location-header .elementor-element-e4a70ce {
		height: auto !important;
		min-height: 0 !important;
		/*
		 * Elementor gives this container margin-top:24px and
		 * margin-bottom:-37px in the tablet range - another hand-tuned
		 * negative offset from the original authoring. The negative bottom
		 * margin pulls the header's computed height in by 37px, so the 81px
		 * toggle ends at 321 while the header ends at 284 and the black rule
		 * below cuts straight through the hamburger. Both are cleared; the
		 * header centres its row on its own.
		 */
		margin-block: 0 !important;
	}

	header.elementor-location-header .elementor-element-e4a70ce .elementor-widget-container {
		margin-top: 0 !important;
	}
}

@media (max-width: 880px) {


	/*
	 * The controls row is a three-column grid that allots Sign In only 147px,
	 * so "Sign In" wraps to two lines and inflates the row to 89px for what
	 * is a single line of text. Switching to a flex row lets each control
	 * size to its content and keeps them on one line.
	 */
	header.elementor-location-header .elementor-element-498d77e {
		display: flex !important;
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: space-between;
		gap: var(--sjff-sp-3);
		padding-inline: var(--sjff-gutter-sm);
	}

	header.elementor-location-header .elementor-element-498d77e > * {
		width: auto !important;
		flex: 0 0 auto;
	}

	header.elementor-location-header .elementor-element-df2df9d,
	header.elementor-location-header .elementor-element-df2df9d a {
		white-space: nowrap;
	}

	/*
	 * Compact the two control rows.
	 *
	 * The Sign In row reserved 89px for a single line of text, and the menu
	 * toggle sat in its own 55px row beneath it - together reading as an
	 * empty band between the banner and the page content.
	 *
	 * Deliberately done by reducing heights rather than by pulling the rows
	 * together with a negative margin. Hand-tuned negative offsets are what
	 * broke this header in the first place, and one keyed to another row's
	 * height would break again the moment either changed.
	 */
	header.elementor-location-header .elementor-element-498d77e,
	header.elementor-location-header .elementor-element-df2df9d,
	header.elementor-location-header .elementor-element-e4a70ce {
		min-height: 0 !important;
	}

	header.elementor-location-header .elementor-element-df2df9d .elementor-widget-container {
		padding-block: 0;
	}

	header.elementor-location-header .elementor-element-e4a70ce {
		padding-block: 0 !important;
	}
}

/* --------------------------------------------------------------------------
   Menu toggle placement, 0-1220px

   Reported in iPhone landscape (956px), where the toggle appeared as a large
   dark shape half off the left edge.

   Mechanism: the nav widget carries elementor-nav-menu--stretch, whose script
   computes a breakout width and negative offset from the parent's geometry.
   The parent collapses to 0 width and is centred by align-self, so the
   calculation produced a 898px inner container at left:-427, with the 81px
   toggle centred inside it at left:-19 - clipped by the viewport.

   Overriding the stretch geometry rather than the widget's width is what
   works; earlier attempts at the widget level left the inner container's
   computed offset untouched and pushed the toggle further off-screen.

   Applies across the whole sub-1220px range because that is where Elementor
   switches this menu to its toggle, and the defect exists throughout.
   -------------------------------------------------------------------------- */

@media (max-width: 1220px) {
	/*
	 * The toggle lives in its own full-width container below the Sign In /
	 * CART / HELP row, so it occupied an entire row on its own with nothing
	 * beside it - reading as an empty band under the banner.
	 *
	 * Making the header itself a wrapping flex container lets the logo take a
	 * full row while the toggle and the controls share the next one. No
	 * negative margins and no measurements keyed to another element's height,
	 * so nothing here breaks if either row's contents change.
	 */
	header.elementor-location-header {
		display: flex !important;
		flex-wrap: wrap;
		align-items: center;
	}

	header.elementor-location-header > .elementor-element-e45a43a {
		flex: 0 0 100%;
	}

	header.elementor-location-header > .elementor-element-e4a70ce {
		flex: 0 0 auto;
		order: 1;
		width: auto !important;
	}

	/* Zero flex-basis so the controls shrink to share the line rather than
	   forcing the toggle onto a row of its own. */
	header.elementor-location-header > .elementor-element-498d77e {
		flex: 1 1 0;
		order: 2;
		min-width: 0;
	}

	/*
	 * Neutralise Elementor's sticky on the nav toggle.
	 *
	 * The widget has sticky enabled for tablet and mobile. In practice it
	 * pins to top:0 and never releases: after scrolling down and back up the
	 * toggle stays fixed over the SJFF logo. Ordering the sticky spacer
	 * within the flex header was tried first and did not release it.
	 *
	 * Elementor applies the sticky geometry as inline styles, which author
	 * !important overrides, so the widget stays in normal flow and the
	 * spacer is removed so it leaves no gap behind.
	 *
	 * This removes a feature rather than repairing it. A sticky menu is
	 * worth having, but it should be the whole header, configured in
	 * Elementor - not a lone hamburger pinned over the logo.
	 */
	header.elementor-location-header .elementor-element-68075e3.elementor-sticky,
	header.elementor-location-header .elementor-element-68075e3.elementor-sticky--active,
	header.elementor-location-header .elementor-element-68075e3.elementor-sticky--effects {
		position: relative !important;
		top: auto !important;
		bottom: auto !important;
		left: auto !important;
		right: auto !important;
		width: auto !important;
		z-index: auto !important;
		transform: none !important;
	}

	header.elementor-location-header .elementor-sticky__spacer {
		display: none !important;
	}

	header.elementor-location-header .elementor-element-e4a70ce {
		min-height: 0 !important;
		padding-inline: var(--sjff-gutter-sm) 0;
	}

	header.elementor-location-header .elementor-element-68075e3 {
		width: auto !important;
		height: auto !important;
		align-self: flex-start !important;
	}

	header.elementor-location-header .elementor-element-68075e3 > .elementor-widget-container {
		width: auto !important;
		left: auto !important;
		margin-left: 0 !important;
		align-items: flex-start !important;
	}

	/*
	 * Keep the close X clickable when the menu is open.
	 *
	 * The open dropdown was anchored level with the toggle rather than below
	 * it, so the first menu item ("HOME") painted directly over the X. The
	 * icon swap was never the problem - eicon-close does switch to
	 * display:block.
	 *
	 * top:100% drops the panel below the toggle so they no longer occupy the
	 * same space, and the toggle is lifted well clear of the dropdown's own
	 * stacking context - z-index:501 was not enough, since the dropdown
	 * establishes one of its own.
	 */
	header.elementor-location-header .elementor-element-68075e3 {
		position: relative;
	}

	header.elementor-location-header .elementor-element-68075e3 .elementor-menu-toggle {
		position: relative;
		z-index: 9999;
	}

	/*
	 * Move page content down out from under the open menu.
	 *
	 * The panel is absolutely positioned by Elementor, so it covers whatever
	 * sits below the header. Putting it into normal flow with CSS alone was
	 * tried and reverted - it inflated the closed header from 156px to 240px
	 * and displaced the toggle, because the panel lives inside the narrow
	 * toggle container.
	 *
	 * sjff-menu-push.js measures the panel when it opens and publishes its
	 * height here, so the padding matches the menu exactly rather than
	 * relying on a hardcoded guess that would break if menu items change.
	 * Falls back to 0 with JavaScript unavailable, leaving today's overlay.
	 */
	main.site-main {
		padding-top: var(--sjff-menu-push, 0px);
		transition: padding-top 0.25s ease;
	}

	@media (prefers-reduced-motion: reduce) {
		main.site-main {
			transition: none;
		}
	}

	/*
	 * Scoped to .elementor-nav-menu__container - the single mobile panel that
	 * is a direct child of the widget container.
	 *
	 * The class .elementor-nav-menu--dropdown alone also matches every
	 * sub-menu inside the menu (five of them here), so an earlier version of
	 * this rule was repositioning those too and would have broken submenu
	 * placement across the site.
	 *
	 * Elementor opens the panel with its own paired max-height rules keyed to
	 * .elementor-active; nothing here touches that.
	 */
	/*
	 * Offset the panel to the toggle's measured height.
	 *
	 * sjff-menu-push.js measures the toggle and publishes --sjff-toggle-h, so
	 * the panel sits exactly below it whatever the toggle's size.
	 *
	 * The FALLBACK must never be 100%. That percentage resolves against the
	 * menu widget, which measures 0 at some widths, collapsing the offset to
	 * zero - the panel then opens level with the toggle, the first menu item
	 * lands on the close X, and the panel covers the Sign In / CART / HELP
	 * row beside it. That is the exact failure David hit at ~1120px while the
	 * same page at ~717px was fine, with no caching involved.
	 *
	 * Pixel fallbacks per breakpoint instead: 55px below Elementor's tablet
	 * breakpoint, 81px above it, matching the toggle's rendered size in each
	 * range. Wrong by a few pixels beats collapsing to zero.
	 */
	/*
	 * Matched on the widget CLASS, not a widget id. The id differs between
	 * header templates, so an id-based selector silently matches nothing on
	 * some pages - which is why several attempts at this appeared to change
	 * nothing at all.
	 *
	 * --sjff-panel-top is the measured gap from the panel's offset parent down
	 * to the bottom of the toggle. 55px fallback is the toggle's height below
	 * Elementor's tablet breakpoint. Never 100% - see below.
	 */
	header .elementor-widget-nav-menu > .elementor-widget-container > .elementor-nav-menu--dropdown.elementor-nav-menu__container {
		top: var(--sjff-panel-top, 55px) !important;
		z-index: 500;
	}
}

/*
 * Landscape phones and tablets: reserve room at the top of the open panel so
 * the first menu item cannot sit under the close X.
 *
 * top:100% resolves against the widget, and in this range the panel still
 * renders level with the toggle rather than below it - "HOME" landed directly
 * on the X. Padding inside the panel clears the toggle no matter where the
 * panel's top edge ends up, which the offset alone did not guarantee.
 *
 * Portrait is excluded: the panel already clears the toggle there, and this
 * padding would only add a gap.
 *
 * 88px covers the 81px toggle in this range plus a little breathing room.
 */

/*
 * Above Elementor's tablet breakpoint the toggle renders at 81px, so the
 * fallback changes with it. Only the fallback differs - the measured value
 * still wins whenever the script has run.
 */
@media (min-width: 768px) and (max-width: 1220px) {
	header .elementor-widget-nav-menu > .elementor-widget-container > .elementor-nav-menu--dropdown.elementor-nav-menu__container {
		top: var(--sjff-panel-top, 81px) !important;
	}
}

/* --------------------------------------------------------------------------
   Dead space above page content

   The first content block carries margin-top:100px, which on a phone reads as
   the page having failed to load. Desktop keeps it.
   -------------------------------------------------------------------------- */

/*
 * The first content block carries margin-top:100px. It collapses with the
 * margin on <main> so the larger wins, putting 100px of nothing between the
 * banner and the page. Confirmed present on desktop as well as mobile, so
 * this applies at every width.
 *
 * The 10px inner padding and the inline-block baseline gap under images are
 * cleared too; individually small, but they sit on top of everything else in
 * exactly the strip that reads as empty.
 */
main .elementor > .e-con:first-child,
main .elementor > .elementor-section:first-child {
	margin-top: 0 !important;
}

main .elementor > *:first-child > .e-con-inner {
	padding-top: 0 !important;
}

/*
 * Removes the few pixels of baseline descender space under images.
 *
 * vertical-align, not display:block - block left-aligns the image and breaks
 * the widget's text-align centring, which shifted the divider rule on the
 * homepage off-centre and truncated it on desktop.
 */
main .elementor-widget-image img {
	vertical-align: middle;
}

@media (max-width: 880px) {

	body main.site-main {
		margin-block: var(--sjff-sp-3) !important;
	}
}

/* ==========================================================================
   5d. Wide tables

   The 2021 feature films archive renders a 963px table into a 375px viewport,
   overflowing by 618px and letting the entire page scroll sideways. Tables
   scroll within their own bounds instead.
   ========================================================================== */

@media (max-width: 880px) {
	main table {
		display: block;
		width: 100%;
		max-width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
}

/* ==========================================================================
   6. Fixed-height spacers

   200 spacer widgets are in use. A spacer set to 90px on desktop stays 90px on
   a phone, where it reads as a gap in the page. Heights are proportionally
   reduced on small screens; desktop is untouched.
   ========================================================================== */

@media (max-width: 767px) {
	.elementor-widget-spacer .elementor-spacer {
		max-height: var(--sjff-sp-7); /* 48px ceiling */
	}
}

@media (max-width: 480px) {
	.elementor-widget-spacer .elementor-spacer {
		max-height: var(--sjff-sp-6); /* 32px ceiling */
	}
}

/* Dividers (380 in use) carry their own margins on top of spacers, which
   compounds the gaps. Normalised to the scale. */
.elementor-widget-divider {
	--divider-border-width: 1px;
}

@media (max-width: 767px) {
	.elementor-widget-divider {
		margin-block: var(--sjff-sp-4);
	}
}

/* ==========================================================================
   6b. Unbreakable strings

   Raw URLs pasted as link text cannot wrap at default settings. One such link
   on the In the News page measured 466px against a 375px viewport, forcing
   130px of horizontal scroll across the whole page.

   Applied to editorial content only - navigation and buttons are excluded, as
   breaking a menu label mid-word would look like a defect.
   ========================================================================== */

/* Applied at the widget-container level because the offending links are not
   always inside a paragraph - the one measured sat in a bare div within an
   HTML widget, which narrower selectors did not reach. overflow-wrap only
   breaks a word that would otherwise overflow, so normal prose is unaffected. */
main .elementor-widget-container,
main .elementor-widget-container a,
main p,
main li,
main dd,
main td {
	overflow-wrap: break-word;
}

/* Flex and grid children default to min-width:auto, which prevents them from
   shrinking below their content and is the other common source of horizontal
   overflow in Elementor layouts. */
main .elementor-widget,
main .e-con > .e-con-inner > .elementor-widget {
	min-width: 0;
}

/* ==========================================================================
   6c. Account controls

   Sign In and CART rendered as plain 17.6px text links beside HELP's solid
   button, so the three read as unrelated items rather than one set.

   They take HELP's geometry - 20px, weight 600, uppercase, 5px padding, 3px
   radius - in SJFF primary blue rather than its gold, so the set is
   consistent while HELP stays visually distinct as the help affordance.

   Styling only; no markup or behaviour is touched, since these anchors are
   Elevent's sign-in and cart entry points.
   ========================================================================== */

header .account-header a,
header #elevent-signin-container a,
header #elevent-signout-container a {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	/* 7px vertical brings these to HELP's 40px height rather than 35px. */
	padding: 7px 12px;
	border-radius: 3px;
	background: var(--e-global-color-primary, #025780);
	color: #fff !important;
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.4;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
}

header .account-header a:hover,
header .account-header a:focus-visible,
header #elevent-signin-container a:hover,
header #elevent-signout-container a:hover {
	background: var(--e-global-color-accent, #03A5E6);
}

/* The account row is a flex container; keep its two states from collapsing
   into each other now that the children are inline-flex. */
header .account-header {
	align-items: center;
	gap: var(--sjff-sp-2);
}

/*
 * Desktop only: centre Sign In / CART on the page, leaving HELP where it is.
 *
 * Taken out of flow and centred against the header rather than within the
 * controls row, since that row is capped at 1200px and right-aligned -
 * centring inside it would not be page centre. The row is set to static so
 * the header becomes the containing block.
 *
 * top stays at auto, so the buttons keep their static vertical position and
 * remain on the same line as HELP, which is untouched at the right-hand end.
 *
 * Mobile is deliberately excluded - the phone layout is as David wants it.
 */
@media (min-width: 1221px) {
	header.elementor-location-header {
		position: relative;
	}

	header.elementor-location-header .elementor-element-498d77e {
		position: static;
	}

	header.elementor-location-header .elementor-element-df2df9d {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		z-index: 2;
	}
}

/*
 * Scale the account buttons down on small screens.
 *
 * At desktop size they pushed HELP past the right edge of a 397px viewport
 * (right:462) because the controls row is flex-wrap:nowrap there - the extra
 * padding and uppercase text simply did not fit alongside the menu toggle.
 * min-width:0 lets the row's children shrink rather than force overflow.
 */
@media (max-width: 880px) {
	header .account-header a,
	header #elevent-signin-container a,
	header #elevent-signout-container a {
		font-size: 0.8125rem;
		padding: 4px 8px;
		gap: 0.25em;
	}

	header .account-header {
		gap: var(--sjff-sp-1);
		min-width: 0;
	}

	header.elementor-location-header .elementor-element-498d77e > * {
		min-width: 0;
	}
}

/*
 * Narrowest phones. At 375px the toggle, both account buttons and HELP still
 * exceeded the 320px of usable width between the gutters, pushing HELP 27px
 * past the edge. HELP shrinks here too - it is the only remaining item with
 * room to give without dropping below a usable tap target.
 */
@media (max-width: 420px) {
	header .account-header a,
	header #elevent-signin-container a,
	header #elevent-signout-container a {
		font-size: 0.75rem;
		padding: 4px 6px;
	}

	header.elementor-location-header .elementor-element-7bc5c89 .elementor-button {
		font-size: 0.875rem;
		padding: 5px 8px;
	}

	header.elementor-location-header .elementor-element-498d77e {
		gap: var(--sjff-sp-2);
	}
}

/* ==========================================================================
   6d. Footer alignment

   The footer spanned 1355px hard against the left edge while the header and
   page content sit in a centred 1200px column, so nothing lined up. Matched
   to that column and centred.
   ========================================================================== */

footer.elementor-location-footer .elementor-section > .elementor-container,
footer.elementor-location-footer > .e-con > .e-con-inner {
	max-width: 1200px;
	margin-inline: auto;
}

footer.elementor-location-footer,
footer.elementor-location-footer .elementor-widget-text-editor,
footer.elementor-location-footer .elementor-widget-heading,
footer.elementor-location-footer .elementor-widget-icon-list .elementor-icon-list-items {
	text-align: center;
}

footer.elementor-location-footer .elementor-icon-list-items {
	justify-content: center;
}

/*
 * Each footer widget was only 192-345px wide and pinned to the left of the
 * column, so text-align:center merely centred text inside a narrow box - the
 * blocks themselves sat 417-494px left of the footer's centre. Giving the
 * widgets the full column width lets their centring actually take effect.
 */
footer.elementor-location-footer .elementor-widget {
	width: 100% !important;
	max-width: 100% !important;
}

/*
 * The address and phone blocks carry style="text-align: left" written
 * directly into the content in the Elementor editor. Inline styles outrank
 * ordinary rules, which is why every other footer element centred and these
 * two did not. !important is the only way to reach them from a stylesheet -
 * the alternative is editing the content itself, which is a database change.
 */
footer.elementor-location-footer .elementor-widget-text-editor p,
footer.elementor-location-footer .elementor-widget-text-editor div,
footer.elementor-location-footer .elementor-widget-text-editor span,
footer.elementor-location-footer .elementor-widget-heading .elementor-heading-title {
	text-align: center !important;
}

footer.elementor-location-footer .elementor-widget-social-icons .elementor-social-icons-wrapper,
footer.elementor-location-footer .elementor-widget-icon-list .elementor-icon-list-items {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

/*
 * Centre each glyph inside its coloured tile.
 *
 * The tiles already carried align-items and justify-content:center, but the
 * link computed to display:inline-block, where both are inert - so every
 * 25px glyph sat 12px up and 12px left of centre, jammed into the tile's
 * top-left corner. inline-flex is what Elementor expects here and makes the
 * centring it already declared actually apply.
 */
footer.elementor-location-footer .elementor-social-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* The tiles are 50px with a 25px glyph; a little breathing room between them
   reads better than the default 5px once they are properly centred. */
footer.elementor-location-footer .elementor-social-icons-wrapper {
	gap: var(--sjff-sp-2);
}

/* ==========================================================================
   6e. Sticky header menu legibility

   When Elementor pins the nav to the top of the viewport, every layer of it -
   the widget, the nav container, the list and the links - is transparent, so
   page content scrolls straight through the menu and neither is readable.
   Reported in a split-screen desktop window, where the horizontal bar is
   showing and the sticky is active.

   Deliberately keyed to .elementor-sticky--active rather than a width, since
   the sticky engages on device ranges rather than a single breakpoint, and
   the styling should follow the state wherever it happens.

   The widget is narrower than the viewport (1365 of 1385), so a plain
   background leaves transparent slivers at both edges. The bar is therefore
   painted by a pseudo-element spanning 100vw behind the links.

   NOT the box-shadow-spread plus clip-path trick, which was tried and
   reverted: clip-path clips descendants, so it cut the submenu dropdowns off
   just below the bar. A pseudo-element bleeds just as wide and clips nothing.
   ========================================================================== */

header.elementor-location-header .elementor-widget-nav-menu.elementor-sticky--active {
	z-index: 999;
}

header.elementor-location-header .elementor-widget-nav-menu.elementor-sticky--active::before {
	content: "";
	position: absolute;
	inset-block: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 100vw;
	background-color: #fff;
	box-shadow: 0 3px 12px rgba(0, 0, 0, 0.18);
	z-index: -1;
}

/*
 * Give submenus their own surface while the bar is stuck.
 *
 * The bar's backdrop only covers the bar itself, so a submenu opening below
 * it hangs over page content. Elementor paints a background on the hovered
 * item only, leaving the rest transparent - so a four-item submenu appears to
 * be a single strip, which is what "cut off" looked like on screen.
 *
 * No clipping ancestor was found: every ancestor measured overflow:visible
 * with no max-height, so the items were rendering, just invisibly.
 */
header.elementor-location-header .elementor-widget-nav-menu.elementor-sticky--active .sub-menu {
	z-index: 1000;
	/* SJFF blue, not white: the items' text is white, so a white panel would
	   have hidden all four rather than the three that were already invisible.
	   Blue is what the hovered item was already painting, so this simply
	   extends the intended treatment to the whole panel. */
	background-color: var(--e-global-color-primary, #025780);
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
	/* Elementor sets an inline min-width; let long labels size the panel
	   rather than wrapping or overflowing the viewport. */
	width: max-content;
	max-width: min(90vw, 24rem);
}

header.elementor-location-header .elementor-widget-nav-menu.elementor-sticky--active .sub-menu .elementor-sub-item {
	white-space: normal;
}

/* A little breathing room so the links do not sit flush against the top of
   the screen once the bar is solid. */
header.elementor-location-header .elementor-widget-nav-menu.elementor-sticky--active > .elementor-widget-container {
	padding-block: var(--sjff-sp-2);
}

/* ==========================================================================
   7. Third-party guards

   Elevent renders ticketing and streaming markup inline (no iframe) and ships
   its own stylesheet. Nothing above should reach into it - these rules make
   that explicit so future edits do not regress a purchase flow.
   ========================================================================== */

[id^="elevent-"] *,
[class*="elevent"] * {
	line-height: revert;
}

[id^="elevent-"] .elementor-spacer,
[class*="elevent"] .elementor-spacer {
	max-height: none;
}

/* ==========================================================================
   8. Accessibility

   Focus outlines are suppressed by the theme reset in places. A visible focus
   ring is required for keyboard navigation.
   ========================================================================== */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid var(--e-global-color-accent, #03A5E6);
	outline-offset: 2px;
}

@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;
	}
}