/* === Section rhythm === */
.rates-intro,
.rates-consider,
.rates-mortgage-types,
.rates-fixed-floating,
.adviser-cta,
.article-cards-cta {
  padding-block: var(--section-pad-block);
}

/* === Intro === */
.rates-intro {
  text-align: center;
}

/* === What to consider === */
.rates-consider {
  background-color: #f5f5f5;
}

.rates-consider .heading-accent {
  padding-inline-start: 30px;
}

/* === Rates table section — card-like with shadow, overlaps adjacent sections === */
.rates-section {
  position: relative;
  z-index: 10;
  margin-block: -50px;
}

.rates-section .center {
  max-width: 1100px;
  background: #fff;
  padding: 30px;
  box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.1);
  border-radius: 8px;
}

/* === Rates table === */
.rates-table-scroll {
  overflow-x: auto;
  max-width: 100%;
}

.rates-table table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #ddd;
  /* WP sets the table to 0.9 of body text, and our body follows the same
     16/18px curve — so one em value matches it at every width */
  font-size: 0.9em;
}

.rates-table table td,
.rates-table table th {
  text-align: center;
  padding: 7px;
  border: none;
}

.rates-table table td {
  vertical-align: middle;
}

.rates-table table th {
  background-color: #002b3a;
  color: #fff;
  width: 15%;
  min-width: 8rem;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg%20stroke=%22currentColor%22%20fill=%22currentColor%22%20stroke-width=%220%22%20viewBox=%220%200%20320%20512%22%20height=%22200px%22%20width=%22200px%22%20xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath%20d=%22M137.4%2041.4c12.5-12.5%2032.8-12.5%2045.3%200l128%20128c9.2%209.2%2011.9%2022.9%206.9%2034.9s-16.6%2019.8-29.6%2019.8H32c-12.9%200-24.6-7.8-29.6-19.8s-2.2-25.7%206.9-34.9l128-128zm0%20429.3l-128-128c-9.2-9.2-11.9-22.9-6.9-34.9s16.6-19.8%2029.6-19.8H288c12.9%200%2024.6%207.8%2029.6%2019.8s2.2%2025.7-6.9%2034.9l-128%20128c-12.5%2012.5-32.8%2012.5-45.3%200z%22%20%20style=%22fill:white;%22%3E%3C/path%3E%3C/svg%3E%0A");
  background-repeat: no-repeat;
  background-position: center right;
  background-size: 15px 15px;
}

.rates-table table th.rates-sort-asc {
  background-image: url("data:image/svg+xml,%3Csvg%20stroke-width=%220%22%20viewBox=%220%200%20320%20512%22%20height=%22200px%22%20width=%22200px%22%20xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath%20d=%22M279%20224H41c-21.4%200-32.1-25.9-17-41L143%2064c9.4-9.4%2024.6-9.4%2033.9%200l119%20119c15.2%2015.1%204.5%2041-16.9%2041z%22%20style=%22fill:white;%22%3E%3C/path%3E%3C/svg%3E");
}

.rates-table table th.rates-sort-desc {
  background-image: url("data:image/svg+xml,%3Csvg%20stroke=%22currentColor%22%20fill=%22currentColor%22%20stroke-width=%220%22%20viewBox=%220%200%20320%20512%22%20height=%22200px%22%20width=%22200px%22%20xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath%20d=%22M182.6%20470.6c-12.5%2012.5-32.8%2012.5-45.3%200l-128-128c-9.2-9.2-11.9-22.9-6.9-34.9s16.6-19.8%2029.6-19.8H288c12.9%200%2024.6%207.8%2029.6%2019.8s2.2%2025.7-6.9%2034.9l-128%20128z%22%20style=%22fill:white;%22%3E%3C/path%3E%3C/svg%3E");
}

.rates-th-lender {
  width: 10%;
  min-width: 5rem;
  cursor: default;
  background-image: none !important;
}

/* The 8rem min-width below is meant for the rate columns; on the lender column
   it added 48px of table width for no content — WP caps it at the logo's
   width plus its padding. */
.rates-table table th:first-child {
  min-width: 5rem;
}

.rates-td-lender {
  text-align: left;
}

.rates-td-lender img {
  max-width: 86px;
  height: auto;
}

/* Alternating rows */
.rates-table tbody tr:nth-child(odd) {
  background-color: #fff;
}

.rates-table tbody tr:nth-child(even) {
  background-color: #f9f9f9;
}

.rates-table tbody tr:hover {
  background-color: #f3f3f3;
}

/* Row classes for CLJS-managed striping (after sort/filter) */
.rates-row-odd {
  background-color: #fff;
}

.rates-row-even {
  background-color: #f9f9f9;
}

/* === Tabs === */
.rates-tabs {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  overflow-x: auto;
  margin-block-end: 0;
}

.rates-tab {
  box-sizing: border-box;
  border: 1px solid #fff;
  border-bottom: none;
  padding: 25px;
  font-weight: bold;
  color: #002b3a;
  border-top-right-radius: 0.6em;
  border-top-left-radius: 0.6em;
  cursor: pointer;
  white-space: nowrap;
  background: none;
  font-size: inherit;
  font-family: inherit;
}

.rates-tab.active {
  border-color: #e3e3e3;
  color: #aa4e87;
}

/* === Disclaimer === */
.rates-disclaimer {
  font-size: 0.8rem;
  color: #777;
  margin-block-start: 1rem;
  line-height: 1.4;
}


/* === Icon list sections (mortgage types, fixed vs floating) === */
.rates-mortgage-types h2,
.rates-fixed-floating h2 {
  border-inline-start: 3px solid var(--color-teal, #00a5b5);
  padding-inline-start: 0.75rem;
}

.rates-mortgage-types img,
.rates-fixed-floating img {
  float: right;
  width: 40%;
  margin-inline-start: 2rem;
  margin-block-end: 1rem;
  border-radius: 8px;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

.rates-mortgage-types ul,
.rates-fixed-floating ul {
  list-style: none;
  padding: 0;
}

.rates-mortgage-types li,
.rates-fixed-floating li {
  padding-inline-start: 2em;
  position: relative;
  margin-block-end: 2rem;
}

.rates-mortgage-types li::before,
.rates-fixed-floating li::before {
  content: "\203A";
  position: absolute;
  left: 0;
  top: -0.7ex;
  color: var(--color-teal, #00a5b5);
  font-weight: bold;
  font-size: 2em;
  line-height: 1;
}

.rates-mortgage-types li h4,
.rates-fixed-floating li h4 {
  margin-block: 0 0.25rem;
}

.rates-mortgage-types li h5,
.rates-fixed-floating li h5 {
  color: var(--color-teal, #00a5b5);
}

.rates-mortgage-types li p,
.rates-fixed-floating li p {
  color: #666;
}

/* === Responsive === */
@media (max-width: 1024px) {
  .rates-tabs {
    justify-content: flex-start;
  }

  .rates-consider .heading-accent {
    padding-inline-start: 20px;
  }

  .rates-section {
    margin-block: -30px;
    padding-inline: 10px;
  }

  /* The card's padding stacks with the section's, so a flat 30px cost 60px of
     visible table at phone widths — two rate columns on WP, one here. WP steps
     it down as the viewport narrows; these match its values. */
  .rates-section .center {
    padding-block: 20px 10px;
    padding-inline: 20px;
  }

  /* Same logo files as WP, but it renders them at 66px until desktop. At 86px
     the row was 79px against WP's 57px, costing about a third of the lenders
     visible per screen. */
  .rates-td-lender img {
    max-width: 66px;
  }
}

@media (max-width: 767px) {
  .rates-consider .heading-accent {
    padding-inline-start: 10px;
  }

  .rates-section {
    margin-block: -10px;
  }

  .rates-mortgage-types img,
  .rates-fixed-floating img {
    float: none;
    width: 100%;
    margin-inline-start: 0;
    aspect-ratio: auto;
  }

}

/* 767, not 768: Elementor's mobile breakpoint, and where WP switches the rates
   card to its tightest padding. At exactly 768 WP is still on tablet values. */
@media (max-width: 767px) {
  .rates-section .center {
    padding-block: 10px 0;
    padding-inline: 10px;
  }
}