/* === Global Fixes === */
html, body {
  max-width: 100%;
  overflow-x: hidden;
  box-sizing: border-box;
}

*, *::before, *::after {
  box-sizing: inherit;
@media (max-width: 1024px) {
  .section#tab-video.active,
  .nsaw-tab-panel#tab-video.active {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
  }
  .section#tab-video.active > .image-col-nsaw,
  .nsaw-tab-panel#tab-video.active > .image-col-nsaw {
    order: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 0 1rem !important;
  }
  .section#tab-video.active > .text-col-nsaw,
  .nsaw-tab-panel#tab-video.active > .text-col-nsaw {
    order: 2 !important;
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    padding: 0 1rem !important;
  }
  .section#tab-video.active .video-wrapper-nsaw,
  .nsaw-tab-panel#tab-video.active .video-wrapper-nsaw {
    display: block !important;
    order: 1 !important;
    width: 100% !important;
    max-width: 1200px !important;
    margin: 0.5rem auto 1.5rem auto !important;
    padding-bottom: 56.25% !important;
  }
}
}

/* === Global Container Safeguards === */
.container,
.row-flex-nsaw {
  max-width: 100%;
  overflow-x: hidden;
  position: relative;
  width: 100%;
}

/* === Hide all rows by default; show only when .active class present === */
.row-flex-nsaw {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 2.5rem;
  box-sizing: border-box;
  overflow-x: hidden;
}

/* Show active rows */
.row-flex-nsaw.active {
  display: flex;
}

/* Responsive layout: stack on small screens, side-by-side on desktop */
@media (max-width: 1024px) {
  .row-flex-nsaw.active,
  .flex-md-row-reverse.active {
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 2.5rem;
  }

  /* Narrow: image and text full-width stacked */
  .row-flex-nsaw.active > .image-col-nsaw,
  .row-flex-nsaw.active > .text-col-nsaw,
  .flex-md-row-reverse.active > .image-col-nsaw,
  .flex-md-row-reverse.active > .text-col-nsaw {
    width: 98% !important;
    max-width: none !important;
    display: flex !important;
    justify-content: center;
    order: unset !important;
    margin: 0 auto;
    padding: 0;
  }

  .row-flex-nsaw.active > .image-col-nsaw,
  .flex-md-row-reverse.active > .image-col-nsaw {
    order: 1 !important;
  }

  .row-flex-nsaw.active > .text-col-nsaw,
  .flex-md-row-reverse.active > .text-col-nsaw {
    order: 2 !important;
    align-items: center;
    margin-top: 0 !important;
    padding: 0 1rem;
  }
}

@media (min-width: 1025px) {
  /* Desktop/tablet: side-by-side layout */
  .row-flex-nsaw.active,
  .flex-md-row-reverse.active {
    flex-direction: row;
    align-items: center; /* vertically center columns */
    gap: 1rem; /* tighten gap between image and content */
    margin-bottom: 2.5rem;
  }

  .row-flex-nsaw.active > .image-col-nsaw,
  .flex-md-row-reverse.active > .image-col-nsaw {
    width: 45%;
    max-width: 45%;
    display: flex;
    justify-content: center;
    align-items: center; /* center image vertically */
    margin: 0;
    padding: 0;
  }

  .row-flex-nsaw.active > .text-col-nsaw,
  .flex-md-row-reverse.active > .text-col-nsaw {
    width: 55%;
    max-width: 55%;
    display: flex;
    align-items: center; /* vertically center card */
    padding: 0 1rem; /* bring content closer to image */
    margin: 0;
  }

  /* Desktop: keep overlay card beside the image without overlapping it */
  .row-flex-nsaw.active > .text-col-nsaw .overlay-card-nsaw {
    margin: 0; /* remove negative overlap on desktop */
    max-width: 100%;
    text-align: left; /* align copy to the left for desktop */
    padding: 2.25rem; /* keep generous padding */
    box-shadow: 0 1rem 2rem rgba(239,62,66,0.18);
    position: relative;
    transform: none;
  }

  /* Ensure image column aligns visually with the overlay card height */
  .row-flex-nsaw.active > .image-col-nsaw {
    align-items: center;
    padding: 0 1rem 0 0;
  }

  /* Alternating order: even rows place image on the right */
  .row-flex-nsaw.active:nth-child(even) > .image-col-nsaw {
    order: 2;
  }
  .row-flex-nsaw.active:nth-child(even) > .text-col-nsaw {
    order: 1;
  }

  /* Enforce desktop flex layout explicitly to avoid stacking caused by
     competing rules or accidental display overrides from templates. */
  .nsaw-shell .row-flex-nsaw.active,
  .nsaw-shell .section.active {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important; /* keep columns top-aligned and equal height */
    gap: 1rem !important;
  }

  /* Ensure overlay-card doesn't overlap the image on desktop */
  .nsaw-shell .overlay-container-fix .overlay-card-nsaw,
  .nsaw-shell .row-flex-nsaw.active > .text-col-nsaw .overlay-card-nsaw {
    margin: 0 !important;
    transform: none !important;
    position: relative !important;
  }

  /* Make overlay card sit naturally inside text column */
  .overlay-card-nsaw {
    margin: 1.25rem auto 0; /* add more top breathing room on desktop */
  }

  /* Make image fill its column with a widescreen aspect */
  .image-section-nsaw {
    width: 100%;
    max-width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    border-radius: 1rem;
  }
}

/* Image styling with 95% width */
.image-section-nsaw {
  width: 50%;
  max-width: 70%;
  height: auto;
  aspect-ratio: 1 / 1;
  background-size: cover;
  background-position: center;
  border-radius: 1rem;
  box-shadow: 0 0.25rem 1rem rgba(0,0,0,0.15);
  object-fit: cover;
}

/* Desktop: ensure the image column centers content and images are centered
   horizontally with a consistent small top gap. Override earlier width hints
   so images visually align in the middle of the column. */
.image-col-nsaw {
  display: flex !important;
  justify-content: center !important;
  align-items: flex-start !important;
}
.image-col-nsaw .image-section-nsaw {
  display: block !important;
  margin: 0.5rem auto 0 auto !important; /* consistent top gap for most tabs */
  max-width: 70% !important; /* keep within a comfortable column width */
  width: 100% !important; /* ensure the element fills the image column so aspect-ratio produces visible height */
}

/* Larger images on wider viewports */
@media (min-width: 1025px) {
  .image-col-nsaw .image-section-nsaw {
    max-width: 90% !important; /* let image occupy more of the column */
    max-height: 540px !important; /* allow taller visible media */
    width: 100% !important;
  }
}

@media (min-width: 1400px) {
  .image-col-nsaw .image-section-nsaw {
    max-width: 100% !important; /* full column width on very large screens */
    max-height: 720px !important;
  }
}

/* Tab 1 uses a tighter top gap (less vertical space above the image) */
#tab1 .image-section-nsaw {
  margin-top: 0 !important;
  
  /* Mobile override: make images larger and more prominent on small viewports */
  .image-col-nsaw .image-section-nsaw {
    max-width: 100% !important;
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    max-height: 520px !important;
    margin-top: 0.5rem !important;
  }
}

/* Align specific tab images: tab7 bottom-aligned; others top-aligned */
#tab7 .image-section-nsaw {
  background-position: bottom center !important;
  background-size: cover !important;
}

#tab8 .image-section-nsaw,
#tab9 .image-section-nsaw,
#tab12 .image-section-nsaw {
  background-position: top center !important;
  background-size: cover !important;
}

/* Overlay card defaults: show navy overlay by default; navy-origin cards
   (marked with `card-dark-nsaw`) will flip to beige. */
.overlay-card-nsaw {
  background-color: #132230; /* navy by default */
  color: #f1f5f9;
  border-radius: 1rem;
  box-shadow: 0 1rem 2rem rgba(239, 62, 66, 0.2);
  padding: 2rem;
  width: 100%;
  max-width: 95%;
  text-align: center;
  margin: -3rem auto 0 auto;
  aspect-ratio: unset;
  position: relative;
  z-index: 3;
}

/* Navy-origin marker now indicates the overlay should be beige. */
.overlay-card-nsaw.card-dark-nsaw,
.card-dark-nsaw {
  background-color: #F1E8DC; /* beige */
  color: #111;
  border-radius: 1rem;
  box-shadow: 0 1rem 2rem rgba(239, 62, 66, 0.2);
}

/* Button contrast for overlays */
.overlay-card-nsaw .btn,
.overlay-card-nsaw a.btn {
  border-color: #f1f5f9;
  color: #f1f5f9;
}

.overlay-card-nsaw .btn:hover,
.overlay-card-nsaw a.btn:hover {
  background-color: #f1f5f9;
  color: #132230;
}

.overlay-card-nsaw.card-dark-nsaw .btn,
.overlay-card-nsaw.card-dark-nsaw a.btn,
.card-dark-nsaw .btn,
.card-dark-nsaw a.btn {
  border-color: #111;
  color: #111;
}

.overlay-card-nsaw.card-dark-nsaw .btn:hover,
.overlay-card-nsaw.card-dark-nsaw a.btn:hover,
.card-dark-nsaw .btn:hover,
.card-dark-nsaw a.btn:hover {
  background-color: #111;
  color: #F1E8DC;
}

/* Alternate row background colors for visible rows */
.row-flex-nsaw.active:nth-child(odd) {
  background-color: #132230; /* Navy */
  padding: 2rem 0;
  border-radius: 1rem;
}

.row-flex-nsaw.active:nth-child(even) {
  background-color: #F1E8DC; /* swapped: content uses beige */
  padding: 2rem 0;
  border-radius: 1rem;
  color: #111;
}

.row-flex-nsaw.active:nth-child(odd) .overlay-card-nsaw {
  /* Row background is navy; show beige overlay on top */
  background-color: #F1E8DC;
  color: #111;
  box-shadow: 0 1rem 2rem rgba(239, 62, 66, 0.18), 0 1rem 2rem rgba(19, 34, 48, 0.36);
}

.row-flex-nsaw.active:nth-child(even) .overlay-card-nsaw {
  /* Row background is beige; show navy overlay on top */
  background-color: #132230;
  color: #f1f5f9;
  box-shadow: 0 1rem 2rem rgba(239, 62, 66, 0.2);
}

/* Ensure buttons in cards adjust colors according to the swapped backgrounds */
/* Odd rows: row background is navy, overlay is beige -> buttons should be dark */
.row-flex-nsaw.active:nth-child(odd) .btn {
  border-color: #111;
  color: #111;
}
.row-flex-nsaw.active:nth-child(odd) .btn:hover {
  background-color: #111;
  color: #F1E8DC;
}

/* Even rows: row background is beige, overlay is navy -> buttons should be light */
.row-flex-nsaw.active:nth-child(even) .btn {
  border-color: #f1f5f9;
  color: #f1f5f9;
}
.row-flex-nsaw.active:nth-child(even) .btn:hover {
  background-color: #f1f5f9;
  color: #132230;
}

/* === Safari/Apple Specific Fix (Force stacking order) === */
@supports (-webkit-touch-callout: none) {
  .image-col-nsaw {
    order: 1 !important;
  }
  .text-col-nsaw {
    order: 2 !important;
  }
}

/* === Other Unchanged Styles from Your Code === */
.eventDetails, .eventTitle, .padding-top-xl, .row.padding-top-xl {
  display: none !important;
}

.mainImage {
  padding-top: 5px;
  padding-bottom: 15px;
}

.globalFooter {
  background: #122231;
}

.globalFooter-input {
  background-color: #333333;
}

/* Small-screen: increase button padding and spacing inside overlay cards */
@media (max-width: 1024px) {
  .overlay-card-nsaw .btn {
    display: inline-block !important;
    padding: 0.75rem 1.25rem !important;
    margin: 0.6rem auto !important;
    min-width: 180px !important;
    box-sizing: border-box !important;
  }

  .overlay-card-nsaw .btn.btn-sm {
    padding: 0.5rem 0.9rem !important;
    min-width: 140px !important;
  }

  /* Stack multiple buttons vertically and center them */
  .overlay-card-nsaw .btn + .btn {
    display: block !important;
    margin-left: 0 !important;
    margin-top: 0.6rem !important;
  }

  /* If there are inline groups, make them stack on small screens */
  .overlay-card-nsaw .btn-group,
  .overlay-card-nsaw .btn-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.6rem !important;
    align-items: center !important;
    width: 100%;
  }

  /* Make overlay cards respect an edge gap on small screens so they don't
     span the full viewport width and to match carousel behavior. */
  .overlay-card-nsaw {
    box-sizing: border-box;
    width: calc(100% - 1rem);
    max-width: calc(100% - 1rem);
    margin: 0 auto; /* remove extra vertical gap */
    padding-left: 0.2rem;
    padding-right: 0.2rem;
  }

  /* Allow card buttons to wrap and shrink to avoid overflowing their panel */
  .overlay-card-nsaw .btn,
  .overlay-card-nsaw a.btn {
    min-width: 0 !important;
    display: inline-flex !important;
    white-space: normal !important;
    max-width: 100% !important;
    padding: 0.55rem 0.9rem !important;
    box-sizing: border-box !important;
    word-break: break-word !important;
    align-self: center !important;
  }

  /* Small button variant -- allow it to shrink too */
  .overlay-card-nsaw .btn.btn-sm {
    min-width: 0 !important;
    padding: 0.45rem 0.7rem !important;
  }

  /* Ensure text columns also respect the same edge gap so content and cards
     don't touch the viewport edge on small screens. */
  .text-col-nsaw {
    box-sizing: border-box;
    width: calc(100% - 1rem);
    max-width: calc(100% - 1rem);
    margin: 0 auto; /* remove extra vertical gap */
    padding-left: 0.15rem;
    padding-right: 0.15rem;
  }

  /* Ensure overlap containers (wrappers around the overlay card) also
     respect the small-screen edge gap so the visual card doesn't touch
     the viewport edges when stacked. */
  .overlap-container-nsaw {
    box-sizing: border-box;
    width: calc(100% - 1rem);
    max-width: calc(100% - 1rem);
    margin: 0 auto; /* remove extra vertical gap */
    padding-left: 0.15rem;
    padding-right: 0.15rem;
  }
}

/* Tighter edge gap on very small devices */
@media (max-width: 420px) {
  .overlay-card-nsaw {
    width: calc(100% - 0.6rem);
    max-width: calc(100% - 0.6rem);
    padding-left: 0.2rem;
    padding-right: 0.2rem;
  }
  .text-col-nsaw {
    width: calc(100% - 0.6rem);
    max-width: calc(100% - 0.6rem);
    padding-left: 0.15rem;
    padding-right: 0.15rem;
  }
  .overlap-container-nsaw {
    width: calc(100% - 0.6rem);
    max-width: calc(100% - 0.6rem);
    padding-left: 0.15rem;
    padding-right: 0.15rem;
  }
}

.givingToolbar-toolbar,
.flyoutNav {
  background: #122231;
}

/* === Video Styling === */
.video-wrapper-nsaw {
  position: relative;
  width: 100%;
  max-width: 1920px;
  margin: 1rem auto 5rem auto;
  height: 0;
  padding-bottom: 56.25%;
  border-radius: 1rem;
  overflow: hidden;
  animation: shadowPulse 6s infinite alternate ease-in-out;
}

.video-wrapper-nsaw iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* Ensure the video container is only visible when its panel is active */
.nsaw-tab-panel:not(.active) .video-wrapper-nsaw,
.nsaw-tab-panel:not(.active) .video-wrapper-nsaw iframe {
  display: none !important;
}

/* Ensure the video heading/intro only shows with the video panel */
.nsaw-tab-panel:not(.active) .video-intro {
  display: none !important;
}

/* Reduce vertical gap between the nav buttons and the content for all panels
   except the content in #tab1 (preserve original spacing there). */
.nsaw-tab-panel:not(#tab1) {
  padding-top: 0.25rem !important;
  margin-top: 0 !important;
}

@keyframes shadowPulse {
  0%   { box-shadow: 0 1rem 2rem rgba(30, 41, 59, 0.6); }
  50%  { box-shadow: 0 1rem 2rem rgba(220, 38, 38, 0.6); }
  100% { box-shadow: 0 1rem 2rem rgba(30, 41, 59, 0.6); }
}

/* === Territorial Priorities Panel === */
.tp-panel {
  border-radius: 1rem;
  box-shadow: 0 1rem 2rem rgba(239, 62, 66, 0.2);
  padding: 3rem;
}

.panel-content {
  max-height: 110px;
  overflow: hidden;
  transition: max-height 0.9s ease;
}

input[type="checkbox"] {
  display: none;
}

input[type="checkbox"]:checked + .panel-content {
  max-height: 1000px;
  opacity: 1;
  transform: scaleY(1);
  transition: max-height 1s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.9s ease,
              transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.view-more-label {
  display: block;
  color: navy;
  cursor: pointer;
  margin-top: 10px;
  text-decoration: underline;
}

/* === Pill Tabs === */
.nsaw-tab-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin: 0 auto 2rem auto;
  padding: 0 1rem;
}

.nsaw-tab-button {
  background-color: #132230;
  color: white;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 9999px;
  cursor: pointer;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.nsaw-tab-button.active {
  background-color: #EF3E42;
  color: #fff;
}

.nsaw-tab-panel {
  /* Keep tab panels present in the DOM for e-readers and AT.
     We'll visually hide inactive panels off-screen rather than using
     `display: none` which removes them from many accessibility parsers. */
  display: block;
  animation: fadeIn 0.6s ease;
  align-items: flex-start;
  justify-content: center;
  padding-top: 1rem;
  padding-bottom: 1rem;
  position: relative;
}

.nsaw-tab-panel.active {
  display: flex;
  position: relative;
}

/* Visually hide inactive tab panels by moving them off-screen. This
   preserves the content in the DOM so e-readers and accessibility tools
   can still access it while keeping the visual layout uncluttered. */
.nsaw-tab-panel:not(.active) {
  /* SR-only hiding: keep panels in DOM for screen readers/e-readers
     while preventing layout overflow. */
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Constrain and modernize image presentation to avoid elongation */
.image-section-nsaw {
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 420px;
  background-size: cover;
  background-position: center;
  border-radius: 1rem;
}

/* Ensure image column centers the media horizontally and all sections
   use a consistent top margin so images align the same across tabs. */
.image-col-nsaw {
  display: flex;
  justify-content: center; /* center horizontally */
  align-items: flex-start; /* keep image top-aligned inside column */
}

.image-col-nsaw .image-section-nsaw {
  margin-left: auto;
  margin-right: auto;
  margin-top: 1rem; /* consistent top gap across all sections */
}

/* For the video and other sections that may have been forced to full-width,
   ensure the image remains centered within its column on larger viewports. */
@media (min-width: 1025px) {
  .row-flex-nsaw.active > .image-col-nsaw,
  .section.active > .image-col-nsaw {
    justify-content: center;
  }
}

/* Compatibility: mirror important tab-content selectors for .section
   (we replaced .tab-content with .section in the markup). This keeps
   the original video layout and visibility rules working. */
.section {
  display: block;
  animation: fadeIn 0.6s ease;
  align-items: flex-start;
  justify-content: center;
  padding-top: 1rem;
  padding-bottom: 1rem;
  position: relative;
}
.section.active {
  display: flex;
  position: relative;
}

/* Hide video wrapper and intro when a section is not active (accessibility-preserving) */
.section:not(.active) .video-wrapper-nsaw,
.section:not(.active) .video-wrapper-nsaw iframe {
  display: none !important;
}
.section:not(.active) .video-intro {
  display: none !important;
}

/* Preserve reduced top padding for non-first sections */
.section:not(#tab1) {
  padding-top: 0.25rem !important;
  margin-top: 0 !important;
}

/* Video-specific layout when video section is active: stack media first */
.section#tab-video.active {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
}
.section#tab-video.active > .image-col-nsaw {
  width: 100% !important;
  max-width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 0 1rem !important;
  order: 1 !important; /* ensure video sits above heading/text */
}
.section#tab-video.active > .text-col-nsaw {
  width: 100% !important;
  order: 2 !important;
  max-width: 100% !important;
  display: block !important;
  padding: 0 1rem !important;
}
.section#tab-video.active .video-wrapper-nsaw {
  max-width: 1200px;
  width: 100%;
  box-sizing: border-box;
  margin: 0.5rem auto 1.5rem auto;
  padding-bottom: 56.25%; /* 16:9 */
  display: block;
  order: 1 !important; /* keep the media at the top of the stacked flow */
}
.section#tab-video.active .video-wrapper-nsaw iframe {
  display: block !important;
  margin: 0 auto !important;
  width: 100% !important;
  height: 100% !important;
}
.section#tab-video.active .video-intro {
  margin-bottom: 1rem;
  text-align: center;
  order: 2 !important; /* intro follows the video */
  width: 100% !important;
  max-width: 900px !important;
  margin: 0 0 1rem 0 !important;
  text-align: center !important;
}

/* --- Explicit mobile ordering: ensure video-intro sits under video even when
   the intro markup appears before the iframe in the DOM. --- */
@media (max-width: 1024px) {
  .section#tab-video.active > .image-col-nsaw,
  .nsaw-tab-panel#tab-video.active > .image-col-nsaw {
    display: flex !important;
    flex-direction: column !important; /* stack video-wrapper then intro */
    align-items: center !important;
  }

  .section#tab-video.active .video-wrapper-nsaw,
  .nsaw-tab-panel#tab-video.active .video-wrapper-nsaw {
    order: 1 !important;
    width: 100% !important;
  }

  .section#tab-video.active .video-intro,
  .nsaw-tab-panel#tab-video.active .video-intro {
    order: 2 !important;
    width: 100% !important;
  }
}

/* --- Desktop: enforce explicit left/right column ordering to avoid nth-child
   surprises from other sibling elements (nav, panels). These rules override
   any alternating nth-child rules so each row consistently shows image + text. */
@media (min-width: 1025px) {
  .row-flex-nsaw.active > .image-col-nsaw { order: 1 !important; }
  .row-flex-nsaw.active > .text-col-nsaw  { order: 2 !important; }

  /* If a row needs to flip the columns, add `flex-md-row-reverse` to the row.
     That class continues to work, but explicit orders here provide a predictable baseline. */
  .flex-md-row-reverse.active > .image-col-nsaw { order: 2 !important; }
  .flex-md-row-reverse.active > .text-col-nsaw  { order: 1 !important; }

  /* Ensure image and text column widths are enforced after order resets */
  .row-flex-nsaw.active > .image-col-nsaw,
  .flex-md-row-reverse.active > .image-col-nsaw {
    width: 45% !important;
    max-width: 45% !important;
  }
  .row-flex-nsaw.active > .text-col-nsaw,
  .flex-md-row-reverse.active > .text-col-nsaw {
    width: 55% !important;
    max-width: 55% !important;
  }

  /* Explicitly apply two-column layout for tab1..tab12 on desktop. This
     ensures those sections render side-by-side regardless of DOM ordering
     or other template styles. */
  .section#tab1.active,
  .section#tab2.active,
  .section#tab3.active,
  .section#tab4.active,
  .section#tab5.active,
  .section#tab6.active,
  .section#tab7.active,
  .section#tab8.active,
  .section#tab9.active,
  .section#tab10.active,
  .section#tab11.active,
  .section#tab12.active {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 1rem !important;
  }

  .section#tab1.active > .image-col-nsaw,
  .section#tab2.active > .image-col-nsaw,
  .section#tab3.active > .image-col-nsaw,
  .section#tab4.active > .image-col-nsaw,
  .section#tab5.active > .image-col-nsaw,
  .section#tab6.active > .image-col-nsaw,
  .section#tab7.active > .image-col-nsaw,
  .section#tab8.active > .image-col-nsaw,
  .section#tab9.active > .image-col-nsaw,
  .section#tab10.active > .image-col-nsaw,
  .section#tab11.active > .image-col-nsaw,
  .section#tab12.active > .image-col-nsaw {
    width: 45% !important;
    max-width: 45% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
  }

  .section#tab1.active > .text-col-nsaw,
  .section#tab2.active > .text-col-nsaw,
  .section#tab3.active > .text-col-nsaw,
  .section#tab4.active > .text-col-nsaw,
  .section#tab5.active > .text-col-nsaw,
  .section#tab6.active > .text-col-nsaw,
  .section#tab7.active > .text-col-nsaw,
  .section#tab8.active > .text-col-nsaw,
  .section#tab9.active > .text-col-nsaw,
  .section#tab10.active > .text-col-nsaw,
  .section#tab11.active > .text-col-nsaw,
  .section#tab12.active > .text-col-nsaw {
    width: 55% !important;
    max-width: 55% !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 1rem !important;
  }

  /* Add breathing room above the overlay card for these sections on desktop */
  .section#tab1.active > .text-col-nsaw .overlay-card-nsaw,
  .section#tab2.active > .text-col-nsaw .overlay-card-nsaw,
  .section#tab3.active > .text-col-nsaw .overlay-card-nsaw,
  .section#tab4.active > .text-col-nsaw .overlay-card-nsaw,
  .section#tab5.active > .text-col-nsaw .overlay-card-nsaw,
  .section#tab6.active > .text-col-nsaw .overlay-card-nsaw,
  .section#tab7.active > .text-col-nsaw .overlay-card-nsaw,
  .section#tab8.active > .text-col-nsaw .overlay-card-nsaw,
  .section#tab9.active > .text-col-nsaw .overlay-card-nsaw,
  .section#tab10.active > .text-col-nsaw .overlay-card-nsaw,
  .section#tab11.active > .text-col-nsaw .overlay-card-nsaw,
  .section#tab12.active > .text-col-nsaw .overlay-card-nsaw {
    margin-top: 2rem !important;
  }
}

/* Make cards flow naturally (no internal scrolling) */
.overlay-card-nsaw {
  margin: 0;
  max-height: none;
  overflow: visible;
  padding: 1.5rem;
  width: 100%;
  max-width: 100%;
}

/* Reduce video wrapper vertical footprint */
.video-wrapper-nsaw {
  margin: 0.5rem auto 1.5rem auto;
  padding-bottom: 56.25%;
}

/* Ensure the wrapper establishes positioning for the absolutely-positioned iframe
   so the wrapper's padding-bottom produces the visible video box and content after
   the wrapper (like the Introduction button) sits below it. */
.video-wrapper-nsaw {
  position: relative;
  height: 0; /* height created by padding-bottom */
  overflow: hidden;
}

.nsaw-tab-panel#tab-video.active {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
}
.nsaw-tab-panel#tab-video.active > .image-col-nsaw {
  width: 100% !important;
  max-width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 0 1rem !important;
  order: 1 !important; /* ensure video sits above heading/text */
}
.nsaw-tab-panel#tab-video.active > .text-col-nsaw {
  width: 100% !important;
  order: 2 !important;
  max-width: 100% !important;
  display: block !important;
  padding: 0 1rem !important;
}
.nsaw-tab-panel#tab-video.active .video-wrapper-nsaw {
  max-width: 1200px;
  width: 100%;
  box-sizing: border-box;
  margin: 0.5rem auto 1.5rem auto;
  padding-bottom: 56.25%; /* 16:9 */
  display: block;
  order: 1 !important; /* keep the media at the top of the stacked flow */
}
.nsaw-tab-panel#tab-video.active .video-wrapper-nsaw iframe {
  display: block !important;
  margin: 0 auto !important;
  width: 100% !important;
  height: 100% !important;
}
.nsaw-tab-panel#tab-video.active .video-intro {
  margin-bottom: 1rem;
  text-align: center;
  order: 2 !important; /* intro follows the video */
  width: 100% !important;
  max-width: 900px !important;
  margin: 0 0 1rem 0 !important;
  text-align: center !important;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(15px); }
  to   { opacity: 1; transform: translateY(0); }
}

.tab-buttons-wrapper {
  margin-top: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: auto;
  -ms-overflow-style: auto;
  position: sticky;
  top: 0;
  z-index: 1; /* ensure site header/flyouts can appear above the tabs */
  background: #fff;
  box-shadow: 0 2px 8px rgba(30,41,59,0.06);
}

/* Make horizontal panning explicit for touch devices and hint draggable behavior */
.tab-buttons-wrapper,
.tab-buttons {
  touch-action: pan-x; /* allow horizontal touch scrolling */
  -ms-touch-action: pan-x;
}

.tab-buttons {
  cursor: grab; /* hint that the row can be dragged */
}

.tabs-shell,
.nsaw-shell {
  --tab-bg: #F5F6F2; /* swapped: tabs now use the light color */
  background: var(--tab-bg);
  position: relative;
  padding: 1.25rem 1rem 1.25rem 1rem; /* reduce bottom padding to tighten space */
  border-radius: 1rem;
  margin-bottom: 1rem;
}

.nsaw-shell .tab-buttons-wrapper,
.tabs-shell .tab-buttons-wrapper {
  background: transparent;
  box-shadow: none;
}

/* Section nav: keep non-active .section elements in the DOM but visually hidden
   for accessibility parity. Active section receives normal flow. */
.section:not(.active) {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.section.active { display: flex !important; position: relative !important; }
.section-nav a.active, .section-nav a:hover { text-decoration: none; }

/* Mobile: replace pill nav with a compact dropdown to save vertical space */
.mobile-select {
  display: none;
}

@media (max-width: 768px) {
  .section-nav .nsaw-tab-button,
  .section-nav .tab-button {
    display: none !important;
  }
  .section-nav .mobile-select {
    display: block !important;
    width: 100% !important;
    max-width: 640px !important;
    margin: 0.25rem auto !important;
    padding: 0.5rem 0.75rem !important;
    border-radius: 9999px !important;
    background: #132230 !important;
    color: #fff !important;
    font-weight: 600 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    text-align: center;
    /* add a chevron to indicate it's a dropdown */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><polyline points='6 9 12 15 18 9' stroke='%23fff' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 1.25rem 1.25rem;
    padding-right: 2.25rem !important;
    cursor: pointer;
  }
  .section-nav .mobile-select option {
    color: #fff !important;
    background: #132230 !important;
    text-align: center;
  }
  /* Ensure the highlighted/selected option is readable */
  .section-nav .mobile-select option:checked,
  .section-nav .mobile-select option[selected] {
    background: #EF3E42 !important;
    color: #fff !important;
  }
}

.tab-buttons-wrapper::-webkit-scrollbar {
  height: 10px;
}

.tab-buttons::-webkit-scrollbar {
  height: 10px;
}

.tab-buttons::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.18);
  border-radius: 8px;
}

  .btn.btn-outline-dark {
    border: 1px solid #132230;
    color: #132230;
  }

/* Ensure the Friends tab image shows the top of the photo */
#tab3 .image-section-nsaw {
  background-position: top center !important;
}

/* Add outer padding on the image side so photos aren't flush to the viewport edge */
@media (min-width: 768px) {
  /* Odd rows: image on the left, add left padding */
  .row-flex-nsaw.active:nth-child(odd) > .image-col-nsaw {
    padding-left: 2rem;
    padding-right: 0.5rem;
  }

  /* Even rows: image on the right, add right padding */
  .row-flex-nsaw.active:nth-child(even) > .image-col-nsaw {
    padding-right: 2rem;
    padding-left: 0.5rem;
  }

  /* Ensure the image itself still fills its column but respects the padding */
  .row-flex-nsaw.active > .image-col-nsaw .image-section-nsaw {
    width: 100%;
    height: auto;
    max-height: 420px;
    border-radius: 1rem;
  }
}

/* Override adjustments: remove extra nav bottom margin and ensure symmetric top padding */
.nsaw-tab-buttons,
.tab-buttons {
  margin-bottom: 0 !important;
}

.nsaw-tab-panel,
.tab-content {
  padding-top: 1rem !important; /* match bottom padding */
}

.nsaw-tab-panel:not(#tab1),
.tab-content:not(#tab1) {
  padding-top: 1rem !important; /* ensure reduced-margin rule doesn't make top padding asymmetric */
  margin-top: 0 !important;
}

/* Mobile: keep tabs on a single row and allow horizontal scroll (force no-wrap) */
@media (max-width: 1024px) {
  .tab-buttons {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    gap: 0.5rem !important;
    padding: 0.5rem !important;
    white-space: nowrap !important;
    justify-content: flex-start !important;
  }

  .tab-buttons::-webkit-scrollbar {
    display: none;
  }

  .nsaw-tab-button,
  .tab-button {
    flex: 0 0 auto !important;
    min-width: 10rem !important; /* ensure pill stays tappable */
    padding: 0.6rem 1rem !important;
    white-space: nowrap !important;
  }

  /* Ensure sticky wrapper doesn't clip the scrolling */
  .tab-buttons-wrapper {
    overflow-x: auto !important;
  }
}

/* Remove side margins/padding from the page container on narrow viewports
   so the layout can use the full viewport width (mobile edge-to-edge). */
@media (max-width: 1024px) {
  .container {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Make the video larger on narrow viewports so media is more prominent.
   Increase the wrapper aspect (taller) and allow a larger max-width. */
@media (max-width: 768px) {
  .tab-content#tab-video.active .video-wrapper-nsaw {
    padding-bottom: 70% !important; /* taller than 16:9 for better presence */
    max-width: calc(100% - 1rem) !important;
    width: calc(100% - 1rem) !important;
    min-height: 260px !important;
    margin: 0.8rem auto !important;
    border-radius: 1rem !important;
    box-shadow: 0 1rem 2rem rgba(30,41,59,0.25) !important;
  }

  .tab-content#tab-video.active .video-wrapper-nsaw iframe {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }

  /* Ensure the surrounding columns collapse to single-column sizing */
  .tab-content#tab-video.active > .image-col-nsaw,
  .tab-content#tab-video.active > .text-col-nsaw {
    width: calc(100% - 1rem) !important;
    max-width: calc(100% - 1rem) !important;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }
}

/* Strong mobile override: ensure the video tab stacks to a single column
   (media first, then intro/text) on narrow viewports. This counters any
   competing desktop rules and forces full-width columns for the video tab. */
@media (max-width: 1024px) {
  .tab-content#tab-video.active {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 0.75rem !important;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }

  .tab-content#tab-video.active > .image-col-nsaw,
  .tab-content#tab-video.active > .text-col-nsaw {
    width: calc(100% - 1rem) !important;
    max-width: calc(100% - 1rem) !important;
    display: block !important;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
    order: unset !important;
  }

  .tab-content#tab-video.active > .image-col-nsaw {
    order: 1 !important; /* video/media first */
  }
  .tab-content#tab-video.active > .text-col-nsaw {
    order: 2 !important; /* intro/text follows */
  }

  .tab-content#tab-video.active .video-wrapper-nsaw {
    order: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0.5rem auto !important;
    padding-bottom: 56.25% !important;
    display: block !important;
  }

  .tab-content#tab-video.active .video-intro {
    order: 2 !important;
    width: calc(100% - 1rem) !important;
    max-width: calc(100% - 1rem) !important;
  }
}

/* Mobile-only card carousel: split long overlay-card content into horizontally-scrollable panels */
@media (max-width: 1024px) {
  .card-carousel {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* reduce horizontal padding so the carousel fits better on narrow viewports */
    padding: 0.5rem 0.5rem 0.9rem 0.5rem;
    align-items: stretch;
    /* when snapping, ensure the start aligns after the left padding */
    scroll-padding-left: 0.5rem;
  }

  .card-panel {
    /* slightly larger minimum width so panels feel less narrow */
    flex: 0 0 70%;
    min-width: 70%;
    box-sizing: border-box;
    background: inherit;
    border-radius: 1rem;
    padding: 1.25rem;
    box-shadow: 0 0.5rem 1.25rem rgba(0,0,0,0.08);
    color: inherit;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    /* ensure panels don't get clipped vertically inside small viewports */
    min-height: 6rem;
  }

  /* snap panels into place for a cleaner swipe experience */
  .card-carousel {
    scroll-snap-type: x mandatory;
  }
  .card-panel {
    scroll-snap-align: start;
  }

  .card-panel h4,
  .card-panel p {
    margin: 0 0 0.75rem 0;
  }

  /* Ensure buttons inside panels expand sensibly */
  .card-panel .btn {
    width: auto;
    min-width: 0;
    align-self: center;
    padding: 0.7rem 1.1rem;
  }

  /* Show a subtle gradient hint on carousel edges */
  .card-carousel::before,
  .card-carousel::after {
    content: '';
    position: sticky;
    pointer-events: none;
    height: 100%;
    width: 2.5rem;
    top: 0;
    z-index: 1;
  }

  .card-carousel::before {
    left: 0;
    background: linear-gradient(90deg, rgba(245,246,242,1) 0%, rgba(245,246,242,0) 100%);
  }

  .card-carousel::after {
    right: 0;
    background: linear-gradient(270deg, rgba(245,246,242,1) 0%, rgba(245,246,242,0) 100%);
  }

  /* Shrink panels further on very small viewports so they don't feel too wide */
  @media (max-width: 420px) {
    .card-carousel {
      gap: 0.5rem;
      padding: 0.45rem 0.45rem 0.85rem 0.45rem;
      scroll-padding-left: 0.45rem;
    }
    .card-panel {
      /* Wider panels on small phones so the card reads comfortably */
      flex: 0 0 85%;
      min-width: 85%;
      padding: 1rem;
    }
  }

/* Mobile-only carousel: show on small screens, hide on desktop */
@media (max-width: 1024px) {
  .card-carousel-mobile { display:flex; gap:0.75rem; overflow-x:auto; -webkit-overflow-scrolling: touch; padding:0.5rem; }
  .card-carousel-mobile .card-panel { scroll-snap-align: start; }
  .desktop-only { display:none !important; }
}
@media (min-width: 1025px) {
  .card-carousel-mobile { display:none !important; }
  .desktop-only { display:block !important; }
}

/* Dark/navy variant for generated carousels (mobile-specific classname or general) */
.card-carousel-mobile.card-dark-mobile .card-panel,
.card-carousel.card-dark-mobile .card-panel {
  background-color: #132230 !important;
  color: #f1f5f9 !important;
}
.card-carousel-mobile.card-dark-mobile .card-panel .btn,
.card-carousel.card-dark-mobile .card-panel .btn,
.card-carousel-mobile.card-dark-mobile .card-panel a.btn,
.card-carousel.card-dark-mobile .card-panel a.btn {
  border-color: #f1f5f9 !important;
  color: #f1f5f9 !important;
}
.card-carousel-mobile.card-dark-mobile .card-panel .btn:hover,
.card-carousel.card-dark-mobile .card-panel .btn:hover,
.card-carousel-mobile.card-dark-mobile .card-panel a.btn:hover,
.card-carousel.card-dark-mobile .card-panel a.btn:hover {
  background-color: #f1f5f9 !important;
  color: #132230 !important;
}

/* Force high-contrast text for all descendants inside dark mobile panels */
/* Force high-contrast text for all descendants inside dark carousels */
.card-carousel-mobile.card-dark-mobile .card-panel,
.card-carousel.card-dark-mobile .card-panel,
.card-carousel-mobile.card-dark-mobile .card-panel h1,
.card-carousel.card-dark-mobile .card-panel h1,
.card-carousel-mobile.card-dark-mobile .card-panel h2,
.card-carousel.card-dark-mobile .card-panel h2,
.card-carousel-mobile.card-dark-mobile .card-panel h3,
.card-carousel.card-dark-mobile .card-panel h3,
.card-carousel-mobile.card-dark-mobile .card-panel h4,
.card-carousel.card-dark-mobile .card-panel h4,
.card-carousel-mobile.card-dark-mobile .card-panel h5,
.card-carousel.card-dark-mobile .card-panel h5,
.card-carousel-mobile.card-dark-mobile .card-panel p,
.card-carousel.card-dark-mobile .card-panel p,
.card-carousel-mobile.card-dark-mobile .card-panel span,
.card-carousel.card-dark-mobile .card-panel span,
.card-carousel-mobile.card-dark-mobile .card-panel a,
.card-carousel.card-dark-mobile .card-panel a,
.card-carousel-mobile.card-dark-mobile .card-panel strong,
.card-carousel.card-dark-mobile .card-panel strong,
.card-carousel-mobile.card-dark-mobile .card-panel em,
.card-carousel.card-dark-mobile .card-panel em {
  color: #f1f5f9 !important;
  opacity: 1 !important;
}

/* Mobile override: for dark/navy source cards, use a light card (#FFF3CD)
   with dark text on mobile so content is readable on small screens. */
@media (max-width: 1024px) {
  /* Default: on mobile, swap themes — make all generated panels use the
     navy background by default (this applies to beige-origin cards). */
  .card-carousel .card-panel {
    background-color: #132230 !important;
    color: #f1f5f9 !important;
  }
  .card-carousel .card-panel .btn,
  .card-carousel .card-panel a.btn {
    border-color: #f1f5f9 !important;
    color: #f1f5f9 !important;
    background: transparent !important;
  }
  .card-carousel .card-panel .btn:hover,
  .card-carousel .card-panel a.btn:hover {
    background-color: #f1f5f9 !important;
    color: #132230 !important;
  }

  /* But carousels that originated from navy cards (marked with
     `card-dark-mobile`) should instead use the beige card background. */
  .card-carousel.card-dark-mobile .card-panel {
    background-color: #F1E8DC !important;
    color: #111 !important;
  }
  .card-carousel.card-dark-mobile .card-panel h1,
  .card-carousel.card-dark-mobile .card-panel h2,
  .card-carousel.card-dark-mobile .card-panel h3,
  .card-carousel.card-dark-mobile .card-panel h4,
  .card-carousel.card-dark-mobile .card-panel h5,
  .card-carousel.card-dark-mobile .card-panel p,
  .card-carousel.card-dark-mobile .card-panel span,
  .card-carousel.card-dark-mobile .card-panel a,
  .card-carousel.card-dark-mobile .card-panel strong,
  .card-carousel.card-dark-mobile .card-panel em {
    color: #111 !important;
    opacity: 1 !important;
  }
  .card-carousel.card-dark-mobile .card-panel .btn,
  .card-carousel.card-dark-mobile .card-panel a.btn {
    border-color: #111 !important;
    color: #111 !important;
    background: transparent !important;
  }
  .card-carousel.card-dark-mobile .card-panel .btn:hover,
  .card-carousel.card-dark-mobile .card-panel a.btn:hover {
    background-color: #111 !important;
    color: #F1E8DC !important;
  }
}

/* Mobile: add lateral breathing room for images so they don't touch edges */
@media (max-width: 1024px) {
  .image-section-nsaw {
    margin-left: 1rem !important;
    margin-right: 1rem !important;
    max-width: calc(100% - 2rem) !important;
  }
}

/* Mobile compacting: reduce padding/margins so content has more horizontal space */
@media (max-width: 1024px) {
  .tabs-shell {
    padding: 0.6rem 0.5rem !important;
    margin-bottom: 0.6rem !important;
    border-radius: 0.8rem !important;
  }

  .tab-content {
    padding-top: 0.5rem !important;
    padding-left: 0.4rem !important;
    padding-right: 0.4rem !important;
  }

  .overlay-card-nsaw {
    padding: 1rem !important;
    width: calc(100% - 0.6rem) !important;
    max-width: calc(100% - 0.6rem) !important;
    margin: 0.25rem auto 0 auto !important;
  }

  .card-panel {
    padding: 0.9rem !important;
  }

  .image-section-nsaw {
    margin-left: 0.5rem !important;
    margin-right: 0.5rem !important;
    max-width: calc(100% - 1rem) !important;
  }

  .text-col-nsaw,
  .overlap-container-nsaw {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
    width: calc(100% - 0.6rem) !important;
    max-width: calc(100% - 0.6rem) !important;
  }

  /* Slightly reduce tab button padding to free space while keeping tappable area */
  .tab-button {
    padding: 0.45rem 0.85rem !important;
    min-width: 9rem !important;
  }
}

  /* Strong override: ensure buttons inside overlay cards and generated
     panels are block-level and centered on small screens, overriding
     Bootstrap display utilities (which use !important). */
  .overlay-card-nsaw .btn,
  .overlay-card-nsaw a.btn,
  .card-panel .btn,
  .card-panel a.btn {
    display: block !important;
    margin: 0.6rem auto 0 !important;
    min-width: 0 !important;
    text-align: center !important;
  }

  /* Keep small variant compact but centered */
  .overlay-card-nsaw .btn.btn-sm,
  .card-panel a.btn.btn-sm {
    display: inline-block !important;
    margin: 0.4rem auto 0 !important;
  }

  @media (max-width: 360px) {
    .card-carousel {
      gap: 0.4rem;
      padding: 0.35rem 0.35rem 0.7rem 0.35rem;
      scroll-padding-left: 0.35rem;
    }
    .card-panel {
      /* Extra-wide panels on the smallest screens for better readability */
      flex: 0 0 90%;
      min-width: 90%;
      padding: 0.85rem;
    }
  }

  /* Make the "Read the Introduction" button inside the video intro use
     black text and a black border so it reads clearly. Use !important to
     override mobile/utility button rules. */
  .video-intro button[data-tab="tab1"],
  .video-intro .btn[data-tab="tab1"] {
    color: #000 !important;
    border-color: #000 !important;
    background: transparent !important;
  }
  .video-intro button[data-tab="tab1"]:hover,
  .video-intro .btn[data-tab="tab1"]:hover {
    background: #000 !important;
    color: #fff !important;
  }

  /* Desktop-specific override: ensure the video-intro 'Read the Introduction'
     button is black on larger viewports where other button utilities may win. */
  @media (min-width: 1025px) {
    .tabs-shell .tab-content#tab-video .video-intro button[data-tab="tab1"],
    .tabs-shell .tab-content#tab-video .video-intro .btn[data-tab="tab1"],
    .tab-content#tab-video .video-intro button[data-tab="tab1"],
    .tab-content#tab-video .video-intro .btn[data-tab="tab1"],
    .video-intro button[data-tab="tab1"],
    .video-intro .btn[data-tab="tab1"] {
      color: #000 !important;
      border-color: #000 !important;
      background: transparent !important;
    }

    .tabs-shell .tab-content#tab-video .video-intro button[data-tab="tab1"]:hover,
    .tabs-shell .tab-content#tab-video .video-intro .btn[data-tab="tab1"]:hover,
    .tab-content#tab-video .video-intro button[data-tab="tab1"]:hover,
    .tab-content#tab-video .video-intro .btn[data-tab="tab1"]:hover,
    .video-intro button[data-tab="tab1"]:hover,
    .video-intro .btn[data-tab="tab1"]:hover {
      background: #000 !important;
      color: #fff !important;
    }
  }
}

/* Styles moved from inline <style> in Test-1.html to improve separation
   of concerns and ensure all styles live in the stylesheet. These rules
   center action buttons inside overlay cards and card panels. */
.overlay-card-nsaw .btn,
.overlay-card-nsaw a.btn,
.card-panel .btn,
.card-panel a.btn {
  display: block;
  margin: 0.6rem auto 0;
  width: auto;
}

.overlay-card-nsaw a.btn.btn-sm,
.card-panel a.btn.btn-sm {
  display: inline-block;
  margin: 0.4rem auto 0;
}

/* Ensure header dropdowns remain interactive even if utility class 'pe-none' is present
   (some templates add 'pe-none' to keep menus inert until open). Also keep dropdowns
   above the sticky tab strip by giving them a high stacking context. */
.dropdown-menu,
.dropdown-menu.pe-none {
  pointer-events: auto !important;
  z-index: 3000 !important;
}

/* Mobile/full-page nav should be above other content when active */
#navMenu {
  z-index: 3000;
}

/* Ensure site header / nav sit above content overlays and tab panels */
header, .site-header, .navbar, .nav, .flyoutNav {
  z-index: 3500 !important;
  position: relative;
}

/* If a template adds 'pe-none' to header containers, allow pointer events */
.site-header.pe-none, header.pe-none, .navbar.pe-none, .flyoutNav.pe-none {
  pointer-events: auto !important;
}

/* Make the tabs-shell non-blocking so page header/flyouts can receive clicks.
   Interactive elements inside the shell remain clickable via explicit override. */
.tabs-shell,
.nsaw-shell {
  pointer-events: none;
}

.tabs-shell .tab-buttons,
.nsaw-shell .nsaw-tab-buttons,
.tabs-shell .tab-button,
.nsaw-shell .nsaw-tab-button,
.tabs-shell .tab-buttons-wrapper,
.nsaw-shell .tab-buttons-wrapper,
.tabs-shell .overlay-card-nsaw,
.nsaw-shell .overlay-card-nsaw,
.tabs-shell .overlay-card-nsaw a,
.nsaw-shell .overlay-card-nsaw a,
.tabs-shell .overlay-card-nsaw button,
.nsaw-shell .overlay-card-nsaw button,
.tabs-shell .card-panel,
.nsaw-shell .card-panel,
.tabs-shell .card-panel a,
.nsaw-shell .card-panel a,
.tabs-shell .card-panel button,
.nsaw-shell .card-panel button {
  pointer-events: auto;
}

/* Ensure video container and iframe are interactable even though .tabs-shell
   uses pointer-events:none to avoid blocking header flyouts. */
.tabs-shell .video-wrapper-nsaw,
.nsaw-shell .video-wrapper-nsaw,
.tabs-shell .video-wrapper-nsaw iframe,
.nsaw-shell .video-wrapper-nsaw iframe,
.tabs-shell .image-col-nsaw,
.nsaw-shell .image-col-nsaw,
.tabs-shell .image-section-nsaw,
.nsaw-shell .image-section-nsaw {
  pointer-events: auto !important;
}

/* Small top margin for overlay text cards to give breathing room above them */
.tabs-shell .overlay-card-nsaw,
.nsaw-shell .overlay-card-nsaw {
  margin-top: 1rem !important;
}

@media (max-width: 1024px) {
  .tabs-shell .overlay-card-nsaw,
  .nsaw-shell .overlay-card-nsaw {
    margin-top: 0.5rem !important;
  }
}

/* Show the dropdown on all screen sizes (dropdown-only navigation) */
.section-nav .mobile-select {
  display: block !important;
  width: 100% !important;
  max-width: 640px !important;
  margin: 0.25rem auto !important;
  padding: 0.5rem 0.75rem !important;
  border-radius: 9999px !important;
  background: #132230 !important;
  color: #fff !important;
  font-weight: 600 !important;
  -webkit-appearance: none !important;
  appearance: none !important;
    text-align: center;
    /* chevron indicator for the select */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><polyline points='6 9 12 15 18 9' stroke='%23fff' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 1.25rem 1.25rem;
    padding-right: 2.25rem !important;
    cursor: pointer;
}
.section-nav .mobile-select option {
  color: #fff !important;
  background: #132230 !important;
  text-align: center;
}
.section-nav .mobile-select option:checked,
.section-nav .mobile-select option[selected] {
  background: #EF3E42 !important;
  color: #fff !important;
}

/* Desktop: make image column match the text card height and center the image
   so the visual weight is balanced. This forces equal-height columns and
   prevents the overlay card from visually overlapping the image. */
@media (min-width: 1025px) {
  .row-flex-nsaw.active,
  .nsaw-shell .section.active {
    align-items: stretch !important; /* make columns equal-height */
  }

  .row-flex-nsaw.active > .image-col-nsaw,
  .row-flex-nsaw.active > .text-col-nsaw,
  .flex-md-row-reverse.active > .image-col-nsaw,
  .flex-md-row-reverse.active > .text-col-nsaw {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    padding: 1rem !important;
    box-sizing: border-box !important;
  }

  /* Let the image element grow to fill the column height and crop via cover */
  .row-flex-nsaw.active > .image-col-nsaw .image-section-nsaw,
  .flex-md-row-reverse.active > .image-col-nsaw .image-section-nsaw {
    flex: 1 1 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    background-size: cover !important;
    background-position: center !important;
  }

  /* Ensure overlay card doesn't use negative margins that cause overlap */
  .row-flex-nsaw.active > .text-col-nsaw .overlay-card-nsaw,
  .row-flex-nsaw.active .overlay-card-nsaw {
    margin: 0 !important;
    transform: none !important;
    position: relative !important;
  }

  /* Tighten image padding so the image visually matches the card sizing */
  .row-flex-nsaw.active > .image-col-nsaw {
    padding-top: 1.25rem !important;
    padding-bottom: 1.25rem !important;
  }
}

/* Ensure the video intro's CTA (and similar inline CTAs) receive pointer events */
.tabs-shell .video-intro a,
.tabs-shell .video-intro button,
.tabs-shell .video-intro [data-tab] {
  pointer-events: auto;
}

/* --- Tab controls: JS-driven selection using a single <select> control --- */
/* Hide non-active sections by default; show the active section via .active */
.nsaw-shell .section { display: none; }
.nsaw-shell .section.active { display: flex !important; flex-direction: column !important; }

/* Keep a small styling surface for potential JS-set button states */
.nsaw-tab-button { cursor: pointer; display: inline-block; padding: 0.35rem 0.75rem; border-radius: 999px; border: 1px solid #000; background: transparent; margin: 0.15rem; }
.nsaw-tab-button[aria-pressed="true"], .nsaw-tab-button.active { background: #000; color: #fff; }

/* If legacy dropdown/pill rules remain elsewhere, they won't interfere — we rely on .section.active now. */