/* ============================================================
   Accessibility Fixes
   - Reflow at 320-460px viewport (WCAG 1.4.10)
   - Portrait orientation (WCAG 1.3.4)
   - 200% zoom overlap prevention (WCAG 1.4.4)
   - Text-spacing tolerance (WCAG 1.4.12)
   ============================================================ */

/* --- Text-spacing tolerance (ANG-17168) ---
   Ensure containers don't clip text when users apply custom spacing */
.div-block-slide,
.paragraph-slide.cc-gray,
.h3-copy,
.strategy-descriptions,
.description-paragraph,
.paragraph-6,
.paragraph-3,
.heading-7 {
  overflow: visible;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

.slider-2 .w-slider-mask {
  overflow: hidden;
}

/* --- Long URLs and text: prevent overflow from unbreakable strings --- */
.text-block-12,
.text-block-12 a,
.text-footer-credits,
.points,
.paragraph,
.paragraph-3,
.paragraph-6,
.description-paragraph {
  overflow-wrap: break-word;
  word-break: break-word;
}

.text-block-12 a {
  word-break: break-all;
}

/* --- Disclosure tables: scrollable wrapper (ANG-17272, ANG-18061) ---
   WCAG allows horizontal scroll WITHIN a data table container.
   Wrap tables so they scroll internally, not the whole page. */
.features-table {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.disclosure-table {
  min-width: 500px;
  width: 100%;
}

/* --- Footer: fix overflow: scroll masking (all pages) --- */
.footer {
  overflow: hidden;
  overflow-x: hidden;
}

.image-7 {
  max-width: 100%;
  height: auto;
}

/* --- 200% zoom fix (ANG-17179, ANG-17619) ---
   Prevent carousel/offerings text overlapping with controls */
@media screen and (max-width: 960px) {
  .slider-2 {
    max-width: calc(100% - 1em);
  }

  .slide-nav-2 {
    position: relative;
    clear: both;
    margin-top: 0.25em;
  }

  .div-block-slide {
    padding-bottom: 2em;
  }

  .offerings-layout .strategy-container,
  .offerings-layout .w-layout-blockcontainer {
    max-width: 100%;
    overflow-wrap: break-word;
  }

  .heading-7 {
    word-break: break-word;
  }
}

/* =================================================================
   REFLOW FIXES: 320-460px gap
   The webflow CSS has breakpoints at 479px and 320px but the
   320-460px range is where most mobile devices sit. These rules
   target the specific elements that overflow in this range.
   ================================================================= */

/* --- Navigation logo: cap width between 321-479px (all pages) ---
   Logo is 317px wide + nav padding 30px each side = overflows at <377px */
@media screen and (max-width: 479px) {
  .image-5 {
    max-width: 200px;
  }

  .navigation {
    padding-left: 10px;
    padding-right: 10px;
  }

  .navigation-container {
    height: 55px;
  }
}

/* --- Privacy Policy: heading margin-left:100px overflows (ANG-17366) ---
   The inline <style> sets margin-left:100px; font-size:42px on .heading.
   Override with !important since inline <style> has same specificity. */
@media screen and (max-width: 479px) {
  .heading {
    font-size: 1.5rem !important;
    margin-left: 0.5em !important;
    margin-right: 0.5em !important;
  }

  .points {
    text-indent: -1.5em;
    margin-left: 1.5em;
    font-size: 0.8125rem;
  }

  .text-block-6 {
    margin-left: 0.5em;
    margin-right: 0.5em;
  }
}

/* --- Offerings: question-block min-width:250px overflows (ANG-17197) --- */
@media screen and (max-width: 479px) {
  .question-block {
    min-width: unset !important;
    width: 100%;
    flex: 1 1 100%;
  }

  .pms-overview-container {
    flex-direction: column;
  }

  .strategy-descriptions {
    width: 100%;
    min-width: unset;
  }
}

/* --- Disclosure pages: buttons and layout (ANG-17272) --- */
@media screen and (max-width: 479px) {
  .container-5 {
    flex-direction: column;
    padding: 0 0.5em;
  }

  .container-6 {
    flex-direction: column;
    padding-left: 0;
    gap: 0.5em;
  }

  .button-3, .button-4 {
    max-width: 100%;
    white-space: normal;
    text-align: center;
  }

  .heading-15,
  .heading-16,
  .heading-17 {
    font-size: 1.125rem;
    padding-left: 0.5em;
    padding-right: 0.5em;
  }

  .features-table {
    padding: 0 0.25em;
  }

  .text-block-12 {
    padding-left: 0.5em;
    padding-right: 0.5em;
  }
}

/* --- Footer at mobile: full width columns (all pages) --- */
@media screen and (max-width: 479px) {
  .footer {
    padding-left: 10px;
    padding-right: 10px;
  }

  .footer-column {
    width: 100%;
  }

  .footer-links-list {
    width: 100%;
    padding: 0;
  }

  .text-footer-credits {
    font-size: 0.625rem;
    line-height: 1.3;
    word-break: break-word;
  }
}

/* --- PMS Calculator at mobile (ANG-18084) --- */
@media screen and (max-width: 479px) {
  .input-container {
    flex-direction: column;
    gap: 10px;
  }

  .input-group {
    flex: 1 1 100%;
  }

  .table-scroll-wrapper {
    max-width: 100%;
  }

  .disclaimer {
    font-size: 0.75rem;
    padding: 0 0.5em;
  }
}

/* --- Homepage carousel and hero at mobile --- */
@media screen and (max-width: 479px) {
  .h2 {
    font-size: 0.875rem;
    line-height: 1.4;
    padding: 0.5em;
    margin-left: 0;
    margin-right: 0;
  }
}

/* =================================================================
   PORTRAIT ORIENTATION FIXES
   (ANG-17971, ANG-18061, ANG-18093, ANG-18084, ANG-21010)
   ================================================================= */
@media screen and (orientation: portrait) {
  .section-2 {
    max-width: 100%;
  }

  .container-7 {
    flex-direction: column;
  }

  .slider-2 {
    max-width: calc(100% - 1em);
  }

  /* Offerings */
  .offerings-layout {
    grid-template-columns: 1fr;
  }

  .offerings-layout .offerings-btn {
    width: 100%;
    max-width: none;
  }

  .heading-7 {
    max-width: 100%;
    word-break: break-word;
  }

  .pms-overview-container {
    flex-wrap: wrap;
  }

  .question-block {
    min-width: unset;
    flex: 1 1 100%;
  }

  .pms-details-container {
    flex-wrap: wrap;
  }

  .strategy-descriptions {
    width: 100%;
    min-width: unset;
  }

  /* Disclosures */
  .container-5 {
    flex-wrap: wrap;
  }

  .container-6 {
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .disclosure-table {
    width: 100%;
    table-layout: auto;
  }

  .text-block-12 {
    overflow-wrap: break-word;
    word-break: break-word;
  }

  .text-block-12 a {
    word-break: break-all;
  }

  /* Footer */
  .footer-column {
    width: 100%;
  }

  .footer-links-list {
    width: 100%;
  }

  .text-footer-credits {
    word-break: break-word;
  }
}

@media screen and (orientation: portrait) and (max-width: 767px) {
  .slider-2 {
    max-width: calc(100% - 0.5em);
  }

  .container-8 {
    margin-left: 0;
  }

  .h3-copy.cc-header {
    font-size: 2rem;
    padding-top: 60px;
    padding-bottom: 20px;
  }
}

/* =================================================================
   STRUCTURAL RESETS
   ================================================================= */

/* --- Footer links list reset for ul/li structure --- */
.footer-links-list ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: contents;
}

.footer-links-list ul li {
  display: block;
}

/* --- Skip to content link styling --- */
.skip-to-content {
  position: absolute;
  top: -100%;
  left: 0;
  z-index: 10000;
  background: #100955;
  color: #fff;
  padding: 0.75em 1.5em;
  font-size: 1rem;
  text-decoration: none;
  border-radius: 0 0 4px 0;
}

.skip-to-content:focus {
  top: 0;
}

/* --- Nav list reset (for pages using ul/li nav) --- */
.nav-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0;
}

.nav-menu ul li {
  display: inline-block;
}

@media screen and (max-width: 991px) {
  .nav-menu ul {
    flex-direction: column;
    width: 100%;
  }

  .nav-menu ul li {
    display: block;
    width: 100%;
    text-align: center;
  }
}