/************************************************************
 * Container & Font
 ************************************************************/
.iofp-exact-wrapper {
  max-width: var(--iofp-max-width, 1400px);
  margin: 0 auto;
  font-family: 'Raleway', sans-serif;
  color: #000;
}

/************************************************************
 * Filter Bar
 ************************************************************/
.iofp-filter-bar { margin-bottom: 30px; text-align: left; }
.iofp-filter-label { font-size: 16px; margin-bottom: 8px; color: #000; font-weight: 600; }

.iofp-filter-tabs { display: flex; justify-content: flex-start; border-bottom: 1px solid #017db9; }
.iofp-filter-tab {
  display: inline-block;
  padding: 14px 24px;
  text-decoration: none;
  font-size: 16px;
  white-space: nowrap;
  border-right: 1px solid #017db9;
  color: #000;
  transition: background 0.3s, color 0.3s;
}
.iofp-filter-tab:last-child { border-right: none; }
.iofp-filter-tab.active { background: #017db9; color: #fff; }
.iofp-filter-tab:hover:not(.active) { background: #f5f5f5; color: #000; }
.iofp-filter-tab.active, .iofp-filter-tab.active:hover { background: #017db9; color: #fff; }

.iofp-filter-scroll-hint { display:none; margin-top:4px; font-size:16px; text-align:center; color:#000; }
.iofp-filter-scroll-hint-arrow { display:inline-block; margin-left:4px; animation: iofpSwipeArrowMove 1s ease-in-out infinite; }
@keyframes iofpSwipeArrowMove { 0%{transform:translateX(0)} 50%{transform:translateX(6px)} 100%{transform:translateX(0)} }
.iofp-exact-wrapper.tabs-scrolled .iofp-filter-scroll-hint { display:none !important; }

/************************************************************
 * Project Item Layout
 ************************************************************/
.iofp-exact-item { background:#f2f9ff; margin-bottom:30px; }
.iofp-exact-row { display:flex; flex-wrap:nowrap; align-items:stretch; border-top:1px solid #017db9; text-align:left; }

.iofp-exact-left { width:60%; display:flex; flex-direction:column; background:#f2f9ff; }
.iofp-exact-header {
  display:flex; align-items:flex-start; justify-content:space-between;
  padding: 20px 20px; background:#f2f9ff; border-bottom:1px solid #017db9;
}
.iofp-exact-eyebrow{
  font-size: var(--iofp-featured-size, 14px);
  font-weight: var(--iofp-featured-weight, 600);
  margin-bottom:6px;
  color:#000;
}
.iofp-exact-title { font-size: var(--iofp-title-size, 28px); margin:0; font-weight: var(--iofp-title-weight, 400); color:#000; text-align:left; }

.iofp-exact-arrow a {
  display:inline-block; width:50px; height:50px; background:#017db9; color:#fff;
  font-size:24px; line-height:50px; text-align:center; text-decoration:none;
  border-radius:3px; transition:background .3s;
}
.iofp-exact-arrow a:hover { background:#005f8c; }

.iofp-exact-table { width:100%; border-collapse:collapse; color:#000; }
.iofp-exact-table th {
  font-size: var(--iofp-th-size, 14px);

  white-space:nowrap; width:150px; text-transform:none; font-weight: var(--iofp-header-weight, 700);
  border-bottom:1px solid #017db9; padding:15px 20px; background:#f2f9ff; color:#000; text-align:left;
}
.iofp-exact-table td {
  font-size: var(--iofp-td-size, 15px);

  border-bottom:1px solid #017db9; padding:15px 20px; background:#f2f9ff;
  vertical-align:top; color:#000; text-align:left;
  font-weight: var(--iofp-value-weight, 400);
}
.iofp-exact-table td.iofp-rich{ font-size: var(--iofp-quote-size, 15px);  line-height:1.6;   font-weight: var(--iofp-quote-weight, 400);
}
.iofp-exact-table td.iofp-rich blockquote{ margin:0; padding-left:14px; border-left:3px solid #017db9; }

.iofp-exact-right { width:40%; background:#ddd; display:flex; align-items:stretch; justify-content:flex-start; }
.iofp-exact-right img { width:100%; height:100%; object-fit:cover; display:block; }

/************************************************************
 * Responsive
 ************************************************************/
@media (max-width: 992px){
  .iofp-exact-row{ flex-direction:column; }
  .iofp-exact-left, .iofp-exact-right{ width:100%; }
  .iofp-exact-right{ height:auto; }
}
@media (max-width: 768px){
  .iofp-filter-tabs{ overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .iofp-filter-tabs::-webkit-scrollbar{ display:none; }
  .iofp-filter-tab{ flex:0 0 auto; }
  .iofp-filter-scroll-hint{ display:block; }
}


/* Font size controls */
.iofp-exact-table{ font-size: var(--iofp-table-size, 16px); }

@media (max-width: 768px){
  .iofp-exact-eyebrow{ font-size: var(--iofp-featured-size-m, 13px); }
  .iofp-exact-title{ font-size: var(--iofp-title-size-m, 24px); }
  .iofp-exact-table th{ font-size: var(--iofp-th-size-m, 13px); }
  .iofp-exact-table td{ font-size: var(--iofp-td-size-m, 14px); }
  .iofp-row-rich .iofp-rich{ font-size: var(--iofp-quote-size-m, 14px); }
}



/* ============================= */
/* Mobile readability fixes       */
/* ============================= */
@media (max-width: 768px){
  /* Give the value column room; stop ultra-narrow right column wrapping letter-by-letter */
  .project-exact-table{ table-layout: fixed; width:100%; }
  .project-exact-table th{ width: 44% !important; }
  .project-exact-table td{
    width: 56% !important;
    text-align: left !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    hyphens: auto;
  }

  /* Slightly tighter header padding so left alignment feels consistent on mobile */
  .project-exact-header{ padding-left: 20px !important; padding-right: 20px !important; }
  .project-exact-title{ font-size: 26px !important; line-height: 1.15; }

  /* Arrow button scale */
  .project-exact-arrow a{ width: 46px; height: 46px; line-height: 46px; font-size: 22px; }
}



/* ===== Mobile table readability fix (prevents letter-by-letter wrapping) ===== */
@media (max-width: 768px){
  /* Ensure two-column layout stays readable */
  .project-exact-table{
    table-layout: fixed !important;
    width: 100% !important;
  }
  .project-exact-table th{
    width: 38% !important;
    white-space: normal !important;
    vertical-align: top !important;
  }
  .project-exact-table td{
    width: 62% !important;
    text-align: left !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important; /* wrap long tokens safely */
  }
}


/* ============================= */
/* Mobile table readability (carousel slides) */
/* Applies to ALL slides, not just the first */
/* ============================= */
@media (max-width: 768px){
  .iofp-carousel .project-exact-table,
  .iofp-slide .project-exact-table,
  .project-exact-item .project-exact-table{
    table-layout: fixed !important;
    width: 100% !important;
  }

  .iofp-carousel .project-exact-table th,
  .iofp-slide .project-exact-table th,
  .project-exact-item .project-exact-table th{
    width: 44% !important;
  }

  .iofp-carousel .project-exact-table td,
  .iofp-slide .project-exact-table td,
  .project-exact-item .project-exact-table td{
    width: 56% !important;
    text-align: left !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important; /* stronger than break-word */
    hyphens: manual !important;
  }
}



/* === Mobile table wrapping: force consistent behaviour on ALL slides === */
@media (max-width: 768px){
  /* Ensure table columns stay stable */
  .iofp-carousel .project-exact-table,
  .iofp-slide .project-exact-table,
  .project-exact-item .project-exact-table{
    width: 100% !important;
    table-layout: fixed !important;
  }

  .iofp-carousel .project-exact-table th,
  .iofp-slide .project-exact-table th,
  .project-exact-item .project-exact-table th{
    width: 38% !important;
  }

  .iofp-carousel .project-exact-table td,
  .iofp-slide .project-exact-table td,
  .project-exact-item .project-exact-table td{
    width: 62% !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important; /* prevents letter-by-letter */
    hyphens: auto !important;
    text-align: left !important;
  }

  /* Some themes set word-break on nested tags; override them too */
  .iofp-carousel .project-exact-table td *,
  .iofp-slide .project-exact-table td *,
  .project-exact-item .project-exact-table td *{
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
    hyphens: auto !important;
  }
}


/* === Mobile 2-column wrap fix (force table-cells) === */
@media (max-width: 992px){
  #iofp-exact-list .iofp-exact-table{
    width: 100% !important;
    table-layout: fixed !important;
    border-collapse: collapse !important;
  }

  /* Some themes/Elementor mobile CSS turns table cells into blocks; force table-cell */
  #iofp-exact-list .iofp-exact-table th,
  #iofp-exact-list .iofp-exact-table td{
    display: table-cell !important;
    float: none !important;
    clear: none !important;
  }

  #iofp-exact-list .iofp-exact-table th{ width: 40% !important; vertical-align: top !important; }
  #iofp-exact-list .iofp-exact-table td{ width: 60% !important; vertical-align: top !important; }

  /* Wrap by words, not letter-by-letter */
  #iofp-exact-list .iofp-exact-table td,
  #iofp-exact-list .iofp-exact-table td *{
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
  }

  /* Long URLs */
  #iofp-exact-list .iofp-exact-table td a{
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    max-width: 100% !important;
    display: inline-block !important;
  }
}