/**
 * NeedWebHosting – Scorecard / Comparison Table CSS (v1.1.0)
 * Contained responsive scoring table with internal horizontal scroll,
 * compact row heights, sticky provider column, zebra striping, and
 * mobile/tablet breakpoints.
 */

/* =======================================================
3. SCORING SECTION — CONTAIN EVERYTHING
======================================================= */

/*

* The scoring section must be allowed to shrink
* inside the Joomla content area.
  */
  #nwh-scoring {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;

/*

* Prevent a wide child table from creating
* horizontal overflow on the entire page.
  */
  overflow: hidden !important;
  }

/* =======================================================
4. TABLE SCROLL CONTAINER
======================================================= */

/*

* THIS is the horizontal-scroll area.

* The page stays at normal width.

* Only the scoring table scrolls horizontally.
  */
  #nwh-scoring .nwh-table-scroll {
  display: block !important;

width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;

overflow-x: auto !important;
overflow-y: visible !important;

position: relative !important;

/*

* Smooth scrolling on phones/tablets.
  */
  -webkit-overflow-scrolling: touch !important;

/*

* Prevent the table from causing a second
* horizontal scrollbar on the page.
  */
  overscroll-behavior-x: contain !important;
  }

/* =======================================================
5. SCORING TABLE
======================================================= */

/*

* The table is allowed to be wider than the viewport,
* but ONLY inside .nwh-table-scroll.
  */
  #nwh-scoring table.nwh-score-table {
  width: max-content !important;
  min-width: 100% !important;

/*

* Prevent browser auto-sizing from creating
* unnecessarily large cells.
  */
  table-layout: auto !important;

border-collapse: collapse !important;
}

/* =======================================================
6. COMPACT TABLE ROWS
======================================================= */

/*

* Main fix for the excessive row height.
  */
  #nwh-scoring table.nwh-score-table th,
  #nwh-scoring table.nwh-score-table td {
  padding: 5px 7px !important;

height: 32px !important;
min-height: 32px !important;

line-height: 1.2 !important;

vertical-align: middle !important;

font-size: 12px !important;
}

/*

* Header cells can be slightly taller because
* they contain the category labels.
  */
  #nwh-scoring table.nwh-score-table thead th {
  padding: 6px 7px !important;

line-height: 1.15 !important;
vertical-align: middle !important;

white-space: nowrap !important;
}

/* =======================================================
7. STICKY PROVIDER HEADER
======================================================= */

#nwh-scoring table.nwh-score-table thead th.nwh-provider-h {
position: sticky !important;
left: 0 !important;

z-index: 10 !important;

background-color: #1F4E79 !important;

min-width: 140px !important;
width: 140px !important;

padding-left: 8px !important;

text-align: left !important;

white-space: nowrap !important;

/*

* Gives the frozen column a subtle separation
* from horizontally scrolling content.
  */
  box-shadow: 2px 0 3px rgba(0, 0, 0, 0.08) !important;
  }

/* =======================================================
8. STICKY PROVIDER BODY CELLS
======================================================= */

#nwh-scoring table.nwh-score-table tbody td.nwh-provider {
position: sticky !important;
left: 0 !important;

z-index: 5 !important;

min-width: 140px !important;
width: 140px !important;

padding-left: 8px !important;

text-align: left !important;

font-weight: 600 !important;

white-space: nowrap !important;

border-right: 1px solid #cbd5e1 !important;

box-shadow: 2px 0 3px rgba(0, 0, 0, 0.08) !important;
}

/* =======================================================
9. PRESERVE ZEBRA STRIPING
======================================================= */

#nwh-scoring table.nwh-score-table tbody tr.nwh-even td.nwh-provider {
position: sticky !important;
left: 0 !important;

z-index: 5 !important;

background-color: #edf4fb !important;
}

#nwh-scoring table.nwh-score-table tbody tr.nwh-odd td.nwh-provider {
position: sticky !important;
left: 0 !important;

z-index: 5 !important;

background-color: #ffffff !important;
}

/* =======================================================
10. HOVER STATE
======================================================= */

#nwh-scoring table.nwh-score-table tbody tr:hover td.nwh-provider {
position: sticky !important;
left: 0 !important;

z-index: 5 !important;

background-color: #e0e7ff !important;

filter: none !important;
}

/* =======================================================
11. PREVENT LONG CONTENT FROM BLOWING OUT CELLS
======================================================= */

#nwh-scoring table.nwh-score-table td {
overflow: hidden !important;
}

/*

* Long text columns should wrap rather than force
* the entire table to become unnecessarily wide.
*
* Remove this section if you prefer absolutely
* no wrapping anywhere in the scoring table.
  */
  #nwh-scoring table.nwh-score-table td {
  overflow-wrap: break-word !important;
  word-break: normal !important;
  }

/* =======================================================
12. KEEP PROVIDER NAMES ON ONE LINE
======================================================= */

#nwh-scoring table.nwh-score-table td.nwh-provider,
#nwh-scoring table.nwh-score-table th.nwh-provider-h {
white-space: nowrap !important;

overflow: hidden !important;
text-overflow: ellipsis !important;
}

/* =======================================================
13. PAGE-LEVEL OVERFLOW PROTECTION
======================================================= */

/*

* Safety net: a wide scoring table must NEVER create
* horizontal scrolling across the entire Joomla page.
  */
  html,
  body {
  max-width: 100%;
  overflow-x: hidden;
  }

/* =======================================================
14. TABLET
======================================================= */

@media (max-width: 1024px) {

#nwh-scoring table.nwh-score-table th,
#nwh-scoring table.nwh-score-table td {
padding: 5px 6px !important;
font-size: 11.5px !important;
}

}

/* =======================================================
15. MOBILE
======================================================= */

@media (max-width: 768px) {

#nwh-scoring table.nwh-score-table th,
#nwh-scoring table.nwh-score-table td {
padding: 4px 6px !important;

```
height: 29px !important;
min-height: 29px !important;

font-size: 11px !important;

line-height: 1.15 !important;
```

}

#nwh-scoring table.nwh-score-table thead th {
padding: 5px 6px !important;
}

/*

* Slightly narrower frozen provider column
* on phones.
  */
  #nwh-scoring table.nwh-score-table thead th.nwh-provider-h,
  #nwh-scoring table.nwh-score-table tbody td.nwh-provider {
  min-width: 120px !important;
  width: 120px !important;
  }

}

/* =======================================================
16. VERY SMALL PHONES
======================================================= */

@media (max-width: 480px) {

#nwh-scoring table.nwh-score-table thead th.nwh-provider-h,
#nwh-scoring table.nwh-score-table tbody td.nwh-provider {
min-width: 110px !important;
width: 110px !important;
}

#nwh-scoring table.nwh-score-table th,
#nwh-scoring table.nwh-score-table td {
padding: 4px 5px !important;
font-size: 10.5px !important;
}

.hv-review .hv-copy {
  max-width: none !important;
  width: 100% !important;
}


@media (max-width: 991.98px) {
  .has-sidebar-left .nwh-sidebar-left,
  .nwh-sidebar-left {
    display: none !important;
  }
  .nwh-main-grid {
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .nwh-content,
  .nwh-container {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }
}


/* Bluehost review: responsive audit badge */
.hv-review .hv-audit-badge {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.5rem 1.25rem;
  border: 1px solid #bfdbfe;
  border-radius: 1.25rem;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  box-sizing: border-box;
}
.hv-review .hv-audit-badge__date {
  padding-left: 0.55rem;
  border-left: 1px solid #bfdbfe;
  color: #059669;
}
@media (max-width: 767px) {
  .hv-review .hv-audit-badge {
    flex-direction: column;
    gap: 0.25rem;
  }
  .hv-review .hv-audit-badge__date {
    padding-left: 0;
    border-left: 0;
  }
}