/* ETG Justice sub-nav. Scoped under .etg-justice. Colours match the microsite (navy #122135, red #E32027). */
.etg-justice { --etgj-navy: #122135; --etgj-red: #E32027; --etgj-sticky-offset: 56px; }
.etg-justice .etgj-subnav { position: sticky; top: 0; z-index: 900; background: var(--etgj-navy); color: #fff; font-family: "Maven Pro", "Open Sans", Arial, sans-serif; box-shadow: 0 2px 8px rgba(0,0,0,.25); }
.etg-justice .etgj-subnav__inner { max-width: 1190px; margin: 0 auto; padding: 0 20px; display: flex; align-items: center; min-height: 56px; }
.etg-justice .etgj-subnav__toggle { display: none; background: none; border: 0; color: #fff; font: inherit; font-weight: 600; padding: 16px 0; cursor: pointer; }
.etg-justice .etgj-subnav__toggle::before { content: ""; display: inline-block; width: 18px; height: 2px; background: #fff; box-shadow: 0 -6px 0 #fff, 0 6px 0 #fff; margin-right: 12px; vertical-align: middle; }
.etg-justice .etgj-subnav__list, .etg-justice .etgj-subnav .etgj-subnav__sub { list-style: none; margin: 0; padding: 0; }
.etg-justice .etgj-subnav__list { display: flex; align-items: stretch; gap: 4px; flex: 1; }
.etg-justice .etgj-subnav__item { position: relative; display: flex; align-items: center; }
.etg-justice .etgj-subnav__item > a { display: block; padding: 18px 14px; color: #fff; text-decoration: none; font-weight: 600; font-size: 14px; letter-spacing: .04em; text-transform: uppercase; line-height: 20px; }
.etg-justice .etgj-subnav__item.is-home > a { color: var(--etgj-red); font-weight: 800; padding-left: 0; }
.etg-justice .etgj-subnav__item > a:hover, .etg-justice .etgj-subnav__item.is-active > a { color: #fff; box-shadow: inset 0 -3px 0 var(--etgj-red); }
.etg-justice .etgj-subnav__more { background: none; border: 0; color: #fff; width: 22px; height: 22px; padding: 0; margin-left: -8px; cursor: pointer; position: relative; }
.etg-justice .etgj-subnav__more::after { content: ""; position: absolute; left: 7px; top: 6px; width: 7px; height: 7px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg); }
.etg-justice .etgj-subnav .etgj-subnav__sub { position: absolute; top: 100%; left: 0; min-width: 260px; background: #fff; color: var(--etgj-navy); padding: 8px 0; box-shadow: 0 10px 30px rgba(0,0,0,.2); display: none; z-index: 5; }
.etg-justice .etgj-subnav .etgj-subnav__item:hover > .etgj-subnav__sub, .etg-justice .etgj-subnav .etgj-subnav__item:focus-within > .etgj-subnav__sub, .etg-justice .etgj-subnav .etgj-subnav__item.is-expanded > .etgj-subnav__sub { display: block; }
.etg-justice .etgj-subnav .etgj-subnav__sub a { display: block; padding: 10px 18px; color: var(--etgj-navy); text-decoration: none; font-size: 14px; font-weight: 600; line-height: 1.3; }
.etg-justice .etgj-subnav .etgj-subnav__sub a small { display: block; font-weight: 400; font-size: 12px; opacity: .75; margin-top: 2px; }
.etg-justice .etgj-subnav .etgj-subnav__sub a:hover, .etg-justice .etgj-subnav .etgj-subnav__sub li.is-active a { background: #f2f3f6; color: var(--etgj-red); }
/* Anchor targets land below the sticky bar. */
.etg-justice [id] { scroll-margin-top: var(--etgj-sticky-offset); }
/* Divi hid its own tooltip source elements; tippy re-parents them, so show them only inside the popper. */
.etg-justice .dsm_image_hotspot_tooltip { display: none; }
.etg-justice .tippy-popper .dsm_image_hotspot_tooltip { display: block; }
@media (max-width: 980px) {
	.etg-justice .etgj-subnav__inner { display: block; }
	.etg-justice .etgj-subnav__toggle { display: flex; align-items: center; width: 100%; text-align: left; }
	.etg-justice .etgj-subnav__list { display: none; flex-direction: column; width: 100%; padding-bottom: 8px; gap: 0; }
	.etg-justice .etgj-subnav.is-open .etgj-subnav__list { display: flex; }
	.etg-justice .etgj-subnav__item { flex-wrap: wrap; }
	.etg-justice .etgj-subnav__item > a { padding: 12px 0; flex: 1; }
	.etg-justice .etgj-subnav__item > a:hover, .etg-justice .etgj-subnav__item.is-active > a { box-shadow: none; color: var(--etgj-red); }
	.etg-justice .etgj-subnav__more { margin-left: auto; width: 44px; height: 44px; }
	.etg-justice .etgj-subnav__more::after { left: 18px; top: 16px; }
	.etg-justice .etgj-subnav .etgj-subnav__sub { position: static; width: 100%; box-shadow: none; background: rgba(255,255,255,.06); padding: 4px 0 8px; }
	.etg-justice .etgj-subnav .etgj-subnav__item:hover > .etgj-subnav__sub, .etg-justice .etgj-subnav .etgj-subnav__item:focus-within > .etgj-subnav__sub { display: none; }
	.etg-justice .etgj-subnav .etgj-subnav__item.is-expanded > .etgj-subnav__sub { display: block; }
	.etg-justice .etgj-subnav .etgj-subnav__sub a { color: #fff; padding: 8px 16px; }
	.etg-justice .etgj-subnav .etgj-subnav__sub a:hover, .etg-justice .etgj-subnav .etgj-subnav__sub li.is-active a { background: none; color: var(--etgj-red); }
}

/* Wrapper stand-ins for what Divi's #page-container and body used to provide. */
.etg-justice .etgj-body { position: relative; overflow: hidden; }
/* Divi's .et_pb_with_border{position:relative} loads after Supreme's hotspot rule here, unlike on the microsite. Restore the pins. */
.etg-justice .etgj-body .dsm_image_hotspots_child.et_pb_with_border,
.etg-justice .etgj-body .dsm_image_hotspots_child { position: absolute; }

/* Divi padded the page top on mobile to clear its own fixed header; there is no Divi header here. */
@media (max-width: 980px) { .etg-justice .etgj-body.etgj-body { padding-top: 0; } }

/* Phones: every Justice hero was a 100vh block with its content centred in the middle. Standardised to a short, top-aligned hero so the headline and button sit in the first screen on every page. */
@media (max-width: 767px) {
	.etg-justice .etgj-body div.et_pb_section.et_pb_section_0 { min-height: 0 !important; height: auto !important; padding-top: 40px !important; padding-bottom: 48px !important; }
	.etg-justice .etgj-body .et_pb_section_0 .et_pb_row_0.et_pb_row { position: static !important; top: auto !important; left: auto !important; transform: none !important; margin: 0 auto !important; height: auto !important; min-height: 0 !important; max-height: none !important; }
}

/* Hub hero on phones: text first, then the cart image below it, and no 100vh spacer so the button sits above the fold.
   The image is the microsite's own mobile hero (1920x1080) shown at 2x width so the cart fills the phone; a navy fade hides its top edge. */
@media (max-width: 767px) {
	.etg-justice.etgj-page-home .etgj-body div.et_pb_section.et_pb_section_0 {
		min-height: 0 !important; height: auto !important; padding: 32px 0 96vw !important;
		background-image: linear-gradient(to bottom, #122135 0, #122135 calc(100% - 100vw), rgba(18,33,53,0) calc(100% - 82vw)), url(../uploads/2022/11/1FlexVideo-Cart-Mobile-Courtroom-Video.png) !important;
		background-size: 100% 100%, 200% auto !important; background-position: 0 0, right bottom !important; background-repeat: no-repeat, no-repeat !important;
	}
	.etg-justice.etgj-page-home .etgj-body .et_pb_section_0 .et_pb_row_0.et_pb_row { position: static !important; transform: none !important; width: 90% !important; margin: 0 auto !important; }
	.etg-justice.etgj-page-home .etgj-body .et_pb_section_0 .et_pb_row_0 .et_pb_column_1 { display: none; }
}

/* Divi "module link" option: the whole card was a JS-driven click target on the microsite. Here it is a real link wrapping the module content. */
.etg-justice .etgj-module-link, .etg-justice .etgj-module-link:hover { display: block; color: inherit; text-decoration: none; }