/**
 * @file
 * Container SDC styles.
 *
 * Width rules also live in css/layout/layout.css (global library) so
 * .container classes work theme-wide. Duplicated here so the SDC is
 * self-contained when Canvas attaches only the component library.
 *
 * FND-2 (DONI-542) — THE CONTAINER RULE LIVES IN css/base/variables.css.
 * Default max-width is --page-width (1368px); horizontal padding is
 * --gutter-fluid, which needs no media query.
 *
 * 🔴 THE FALLBACKS MATTER HERE MORE THAN ANYWHERE. This copy is what
 * Canvas uses when it attaches the component library alone, so if
 * base/variables.css is absent these literals are what renders. They
 * used to say 1440px and 84px while the global copy said 1368px and
 * 84px — the same class name resolving to two different widths
 * depending on which stylesheet loaded. Keep them in step.
 */

.container {
  width: 100%;
  max-width: var(--page-width, 1368px);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gutter-fluid, 24px);
  padding-right: var(--gutter-fluid, 24px);
  box-sizing: border-box;
}

.container--has-bg-image {
  background-image: var(--container-bg-image);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: var(--container-bg-position);
}

.container--has-bg-image.container--bg-faded {
  background-image:
    linear-gradient(
      rgb(255 255 255 / var(--container-bg-overlay-opacity)),
      rgb(255 255 255 / var(--container-bg-overlay-opacity))
    ),
    var(--container-bg-image);
}

.box-shadow {
  border-radius: 24px;
  background: var(--White, #FFF);
  box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.12);
}

/* Width: narrow — 864px content width, same gutter either side */
.container--narrow {
  max-width: calc(var(--container-narrow-max-width, 864px) + var(--gutter-fluid, 24px) * 2);
}

/* Width: 796px content width, same gutter either side */
.max-width-800  {
  /* max-width: 800px; */
  max-width: calc(796px + var(--gutter-fluid, 24px) * 2);
}

.box-shadow {
  border-radius: 24px;
  background: var(--White, #FFF);
  box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.12);
}

/* Width: full */
.container--full {
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
}

@media (max-width: 767px) {
  .container.container--full.container-inline-spacing {
    padding-left: 24px;
    padding-right: 24px;
  }
}

/* Column stack for slot children (e.g. accordions) when gap is set. */
.container--stack {
  display: flex;
  flex-direction: column;
}

.container--gap-4  { gap: var(--gap-size-xs); }
.container--gap-8  { gap: var(--gap-size-sm); }
.container--gap-16 { gap: var(--gap-size-md); }
.container--gap-24 { gap: var(--gap-size-lg); }
.container--gap-32 { gap: var(--gap-size-xl); }
.container--gap-48 { gap: var(--gap-size-2xl); }
.container--gap-64 { gap: 4rem; }

/* Desktop padding */
.container--pt-8   { padding-top: var(--padding-size-xs); }
.container--pt-16  { padding-top: var(--padding-size-sm); }
.container--pt-20  { padding-top: var(--padding-size-md); }
.container--pt-32  { padding-top: var(--padding-size-lg); }
.container--pt-40  { padding-top: var(--space-2xl); }
.container--pt-48  { padding-top: var(--padding-size-xl); }
.container--pt-64  { padding-top: var(--padding-size-2xl); }
.container--pt-80  { padding-top: var(--padding-size-3xl); }
.container--pt-96  { padding-top: var(--padding-size-4xl); }
.container--pt-128 { padding-top: var(--padding-size-5xl); }

.container--pb-8   { padding-bottom: var(--padding-size-xs); }
.container--pb-16  { padding-bottom: var(--padding-size-sm); }
.container--pb-20  { padding-bottom: var(--padding-size-md); }
.container--pb-32  { padding-bottom: var(--padding-size-lg); }
.container--pb-40  { padding-bottom: var(--space-2xl); }
.container--pb-48  { padding-bottom: var(--padding-size-xl); }
.container--pb-64  { padding-bottom: var(--padding-size-2xl); }
.container--pb-80  { padding-bottom: var(--padding-size-3xl); }
.container--pb-96  { padding-bottom: var(--padding-size-4xl); }
.container--pb-128 { padding-bottom: var(--padding-size-5xl); }

/* Desktop margin */
.container--mt-8   { margin-top: var(--padding-size-xs); }
.container--mt-16  { margin-top: var(--padding-size-sm); }
.container--mt-20  { margin-top: var(--padding-size-md); }
.container--mt-32  { margin-top: var(--padding-size-lg); }
.container--mt-40  { margin-top: var(--space-2xl); }
.container--mt-48  { margin-top: var(--padding-size-xl); }
.container--mt-64  { margin-top: var(--padding-size-2xl); }
.container--mt-80  { margin-top: var(--padding-size-3xl); }
.container--mt-96  { margin-top: var(--padding-size-4xl); }
.container--mt-128 { margin-top: var(--padding-size-5xl); }

.container--mb-8   { margin-bottom: var(--padding-size-xs); }
.container--mb-16  { margin-bottom: var(--padding-size-sm); }
.container--mb-20  { margin-bottom: var(--padding-size-md); }
.container--mb-32  { margin-bottom: var(--padding-size-lg); }
.container--mb-40  { margin-bottom: var(--space-2xl); }
.container--mb-48  { margin-bottom: var(--padding-size-xl); }
.container--mb-64  { margin-bottom: var(--padding-size-2xl); }
.container--mb-80  { margin-bottom: var(--padding-size-3xl); }
.container--mb-96  { margin-bottom: var(--padding-size-4xl); }
.container--mb-128 { margin-bottom: var(--padding-size-5xl); }

/* The 769–1024 tablet and ≤768 mobile GUTTER overrides were removed by
 * FND-2. --gutter-fluid already floors at 24px, so the mobile step was
 * a no-op restating it, and the 48px tablet step made content width
 * non-monotonic — it SHRANK by 48px crossing 768->769 and by 72px
 * crossing 1024->1025. See css/base/variables.css for the evaluated
 * table. The mobile spacing props below are unrelated and stay. */

/* Mobile: spacing prop overrides */
@media (max-width: 767px) {

  .container--has-bg-image {
    background-image: var(--container-bg-image-mobile, var(--container-bg-image));
    background-position: var(--container-bg-position-mobile, var(--container-bg-position));
  }

  .container--has-bg-image.container--bg-faded {
    background-image:
      linear-gradient(
        rgb(255 255 255 / var(--container-bg-overlay-opacity)),
        rgb(255 255 255 / var(--container-bg-overlay-opacity))
      ),
      var(--container-bg-image-mobile, var(--container-bg-image));
  }


  .container--mobile-gap-0  { gap: 0; }
  .container--mobile-gap-4  { gap: var(--gap-size-xs); }
  .container--mobile-gap-8  { gap: var(--gap-size-sm); }
  .container--mobile-gap-16 { gap: var(--gap-size-md); }
  .container--mobile-gap-24 { gap: var(--gap-size-lg); }
  .container--mobile-gap-32 { gap: var(--gap-size-xl); }
  .container--mobile-gap-48 { gap: var(--gap-size-2xl); }
  .container--mobile-gap-64 { gap: 4rem; }

  .container--mobile-pt-0   { padding-top: 0; }
  .container--mobile-pt-8   { padding-top: var(--padding-size-xs); }
  .container--mobile-pt-16  { padding-top: var(--padding-size-sm); }
  .container--mobile-pt-20  { padding-top: var(--padding-size-md); }
  .container--mobile-pt-32  { padding-top: var(--padding-size-lg); }
  .container--mobile-pt-40  { padding-top: var(--space-2xl); }
  .container--mobile-pt-48  { padding-top: var(--padding-size-xl); }
  .container--mobile-pt-64  { padding-top: var(--padding-size-2xl); }
  .container--mobile-pt-80  { padding-top: var(--padding-size-3xl); }
  .container--mobile-pt-96  { padding-top: var(--padding-size-4xl); }
  .container--mobile-pt-128 { padding-top: var(--padding-size-5xl); }

  .container--mobile-pb-0   { padding-bottom: 0; }
  .container--mobile-pb-8   { padding-bottom: var(--padding-size-xs); }
  .container--mobile-pb-16  { padding-bottom: var(--padding-size-sm); }
  .container--mobile-pb-20  { padding-bottom: var(--padding-size-md); }
  .container--mobile-pb-32  { padding-bottom: var(--padding-size-lg); }
  .container--mobile-pb-40  { padding-bottom: var(--space-2xl); }
  .container--mobile-pb-48  { padding-bottom: var(--padding-size-xl); }
  .container--mobile-pb-64  { padding-bottom: var(--padding-size-2xl); }
  .container--mobile-pb-80  { padding-bottom: var(--padding-size-3xl); }
  .container--mobile-pb-96  { padding-bottom: var(--padding-size-4xl); }
  .container--mobile-pb-128 { padding-bottom: var(--padding-size-5xl); }

  .container--mobile-mt-0   { margin-top: 0; }
  .container--mobile-mt-8   { margin-top: var(--padding-size-xs); }
  .container--mobile-mt-16  { margin-top: var(--padding-size-sm); }
  .container--mobile-mt-20  { margin-top: var(--padding-size-md); }
  .container--mobile-mt-32  { margin-top: var(--padding-size-lg); }
  .container--mobile-mt-40  { margin-top: var(--space-2xl); }
  .container--mobile-mt-48  { margin-top: var(--padding-size-xl); }
  .container--mobile-mt-64  { margin-top: var(--padding-size-2xl); }
  .container--mobile-mt-80  { margin-top: var(--padding-size-3xl); }
  .container--mobile-mt-96  { margin-top: var(--padding-size-4xl); }
  .container--mobile-mt-128 { margin-top: var(--padding-size-5xl); }

  .container--mobile-mb-0   { margin-bottom: 0; }
  .container--mobile-mb-8   { margin-bottom: var(--padding-size-xs); }
  .container--mobile-mb-16  { margin-bottom: var(--padding-size-sm); }
  .container--mobile-mb-20  { margin-bottom: var(--padding-size-md); }
  .container--mobile-mb-32  { margin-bottom: var(--padding-size-lg); }
  .container--mobile-mb-40  { margin-bottom: var(--space-2xl); }
  .container--mobile-mb-48  { margin-bottom: var(--padding-size-xl); }
  .container--mobile-mb-64  { margin-bottom: var(--padding-size-2xl); }
  .container--mobile-mb-80  { margin-bottom: var(--padding-size-3xl); }
  .container--mobile-mb-96  { margin-bottom: var(--padding-size-4xl); }
  .container--mobile-mb-128 { margin-bottom: var(--padding-size-5xl); }

}

.site-map-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.site-map-container > .text-wysiwyg h1 {
  color: var(--color-dark-coral, #c94808);
  font-family: var(--font-tilt-neon);
  font-size: 52px;
  line-height: 60px;
  margin: 0;
  font-weight: 400;
}

.site-map-container > .container {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  padding: var(--space-4xl);
  background: var(--color-white, #fff);
  border-radius: var(--radius-2xl);
}

.site-map-container > .container > nav + .text-wysiwyg {
  margin-top: calc(var(--space-2xl) - var(--space-lg));
}

.site-map-container > .container > .text-wysiwyg p {
  color: var(--color-charcol, #1d2d3a);
  font-family: var(--font-tilt-neon);
  font-size: 32px;
  line-height: normal;
}

.site-map-container nav ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-map-container nav li {
  margin: 0;
  line-height: normal;
}

.site-map-container nav li.sitemap-hide {
  display: none;
}

.site-map-container nav ul ul {
  margin-top: var(--space-lg);
  padding-left: var(--space-2xl);
}

.site-map-container nav a,
.site-map-container nav span {
  color: var(--color-dark-coral, #c94808);
  font-size: 20px;
}

.site-map-container nav a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
}

.event-cards-background-image.container--has-bg-image {
  overflow: hidden;
  background-color: var(--color-white);
  background-repeat: no-repeat;
  background-size: 120% auto;
  --container-bg-position: center bottom;
  --container-bg-position-mobile: center bottom;
  --container-bg-image-mobile: var(--container-bg-image);
  background-position: center bottom;
}

.container-background-right-image.container--has-bg-image {
  overflow: hidden;
  background-color: var(--color-white);
  background-repeat: no-repeat;
  background-size: min(3000px, 70vw) auto;
  --container-bg-position: right bottom;
  --container-bg-position-mobile: -30.4vw bottom;
  background-position: var(--container-bg-position);
}

.container-background-right-image.container--has-bg-image:not(
  :has(.tabs__tab:nth-of-type(2).tabs__tab--selected)
) {
  background-image: none;
}

.container-background-right-image.container--has-bg-image.container--bg-faded:not(
  :has(.tabs__tab:nth-of-type(2).tabs__tab--selected)
) {
  background-image: none;
}

.event-cards-background-image.container--has-bg-image:has(
  .events-layout--has-empty-copy
):not(:has(.event-card)) {
  background-image: none;
  background-color: transparent;
}

.container-background-right-image.container--has-bg-image:has(
  .tabs__panel:not(.tabs__panel--hidden) .events-layout--has-empty-copy
):not(
  :has(.tabs__panel:not(.tabs__panel--hidden) .event-card)
) {
  --container-bg-position: right bottom -250px;
  background-position: right bottom -250px;
  background-image: var(--container-bg-image);
}

.container-bottom-right-background-image.container--has-bg-image {
  overflow: hidden;
  background-color: var(--color-white);
  background-repeat: no-repeat;
  background-size: min(3000px, 45vw) auto;
  --container-bg-position: right bottom -40px;
  --container-bg-position-mobile: right bottom;
  background-position: var(--container-bg-position);
}

.container-content-layer {
  position: relative;
  z-index: 2;
}

@media (max-width: 768px) {
  .site-map-container > .text-wysiwyg h1 {
    font-size: 36px;
    line-height: 1.25;
  }

  .site-map-container > .container {
    padding: var(--space-lg);
  }
  
   .event-cards-background-image.container--has-bg-image {
    inline-size: 100vw;
    max-inline-size: 100vw;
    margin-inline: calc(50% - 50vw);
    padding-right: 24px;
    padding-left: 24px;
    background-size: 1900px auto;
    --container-bg-position-mobile: center bottom;
    --container-bg-image-mobile: var(--container-bg-image);
    background-position: center bottom;
  }

  .container-background-right-image.container--has-bg-image {
    inline-size: 100vw;
    max-inline-size: 100vw;
    margin-inline: calc(50% - 50vw);
    background-size: min(480px, 130vw) auto;
  }

  .container-bottom-right-background-image.container--has-bg-image {
    background-image: none;
  }

  .container-background-right-image.container--has-bg-image:not(
    :has(.tabs__tab:nth-of-type(2).tabs__tab--selected)
  ),
  .container-background-right-image.container--has-bg-image.container--bg-faded:not(
    :has(.tabs__tab:nth-of-type(2).tabs__tab--selected)
  ) {
    background-image: none;
  }

  .event-cards-background-image.container--has-bg-image:has(
    .events-layout--has-empty-copy
  ):not(:has(.event-card)) {
    background-image: none;
    background-color: transparent;
  }

  .container-background-right-image.container--has-bg-image:has(
    .tabs__panel:not(.tabs__panel--hidden) .events-layout--has-empty-copy
  ):not(
    :has(.tabs__panel:not(.tabs__panel--hidden) .event-card)
  ) {
    --container-bg-position: right bottom -120px;
    --container-bg-position-mobile: right bottom -120px;
    background-position: right bottom -120px;
    background-image: var(--container-bg-image-mobile, var(--container-bg-image));
  }

}