/* =====================================================================
   NSFWRating — Kolet chrome fixes (2026-08-05)
   Loads LAST. Two classes of bug this file exists to kill:
   1. Kadence paints every <button> with the global button colour, which
      turned the nav items, the promo close X, the search icon and the
      mobile burger into magenta blobs on inner pages.
   2. The theme ships its own back-to-top button (#aihub-top) and the
      Kolet chrome ships .totop — two buttons stacked in the corner.
   ===================================================================== */

/* ---------- 1. Header / promo / footer controls ---------- */
.promo button,
.hdr button,
.ftr button {
  background: none;
  border: 0;
  box-shadow: none;
  min-height: 0;
  font-family: var(--k-sans, "Plus Jakarta Sans", sans-serif);
}

.nav > a,
.nav__b {
  background: transparent !important;
  color: rgba(255, 255, 255, 0.88) !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 10px !important;
  padding: 10px 13px !important;
  min-height: 0 !important;
  font-weight: 600 !important;
}
.nav > a:hover,
.nav__b:hover,
.nav__b[aria-expanded="true"] {
  background: rgba(255, 255, 255, 0.11) !important;
  color: #fff !important;
}

.icb,
.brg {
  background: rgba(255, 255, 255, 0.11) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 50% !important;
  box-shadow: none !important;
  min-height: 0 !important;
}

.promo__x {
  background: transparent !important;
  color: inherit !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 50% !important;
  width: 30px !important;
  height: 30px !important;
  min-height: 0 !important;
  padding: 0 !important;
}

.hdr__cmp {
  background: rgba(255, 255, 255, 0.11) !important;
  color: #fff !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* The one button in the header that IS meant to be magenta */
.hdr .btn--pink,
.hdr a.btn--pink,
.promo .btn--white {
  border: 0 !important;
  box-shadow: none !important;
}
.hdr .btn--pink,
.hdr a.btn--pink {
  background: var(--k-pink, #F92FBB) !important;
  color: #fff !important;
}
.promo .btn--white {
  background: #fff !important;
  color: var(--k-black, #0A0A0A) !important;
}

/* Mega-menu panels sit on white, so their links must not inherit the
   header's white-on-black colouring. */
.mm a,
.mm h4,
.mm p {
  color: var(--k-black, #0A0A0A) !important;
}
.mm a:hover { color: var(--k-pink-2, #D40F9C) !important; }
.mm__l { color: rgba(10, 10, 10, 0.5) !important; }

/* ---------- 2. Exactly one back-to-top button ---------- */
#aihub-top,
.aihub-top {
  display: none !important;
}

/* ---------- 3. Compare tray sits above the footer, not over it ---------- */
.aihub-tray {
  background: #fff !important;
  border-top: 1.5px solid var(--k-black, #0A0A0A) !important;
  color: var(--k-black, #0A0A0A) !important;
}

/* ===== AIHUB_MOBILE_HARDENING =========================================
   Horizontal overflow on phones traced to grids declared as repeat(N, 1fr)
   with no small-screen breakpoint. '1fr' means minmax(auto, 1fr), so a
   track can grow to its content's min-content width - the homepage's
   .lists cards forced 451px inside a 396px viewport, which pushed the
   document to 469px and left the white gutter on the right.
   Pin the tracks and collapse to one column on phones.
===================================================================== */
.lists { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lst { min-width: 0; }

@media (max-width: 760px) {
  .lists { grid-template-columns: minmax(0, 1fr); }
}

/* Nothing fixed to a corner may sit outside the viewport on a phone. */
@media (max-width: 760px) {
  .totop { right: 12px !important; bottom: 12px !important; }
  .aihub-tray { max-width: calc(100vw - 20px) !important; }
}

/* Safety net: no media or embed may exceed its column. */
img, video, iframe, canvas, svg { max-width: 100%; }
table { max-width: 100%; }

/* ===== AIHUB_SMALL_PHONE ==============================================
   iPhone SE class devices (320-360px). Two problems measured there:
   1. The header's logo + actions did not fit, overflowing by ~53px.
   2. Filter chips (32px) and the directory Reset link (18px) were below
      a comfortable touch target.
===================================================================== */
@media (max-width: 420px) {
  .hdr__in { gap: 8px !important; }
  .hdr__end { gap: 6px !important; }
  .hdr__lg, .hdr__logo { font-size: 1rem !important; }
  .hdr__cmp { padding-left: 8px !important; padding-right: 8px !important; }
  .hdr__cmp span:not(:first-child) { display: none; }   /* keep the icon, drop the count text */
}

/* Comfortable touch targets on phones. */
@media (max-width: 760px) {
  .nsr-dir-chip,
  .nsrcat-chip,
  .nsrlist-chip,
  .nsr-cmp-chip { min-height: 40px !important; }
  .nsr-dir-reset { min-height: 32px; padding: 6px 10px; }
  .aihub-tray__chip { min-height: 40px !important; }
  .btn, .nsrt-btn, .nsrcat-btn, .nsrlist-btn, .nsr-cmp-btn { min-height: 40px; }
}

/* ===== AIHUB_HEADER_320 ===============================================
   At 320px the brand lockup measures 207px and the action cluster 114px,
   which cannot both fit. Inner pages happened to clip it, the homepage
   did not, so only the homepage showed the 43px gutter. Shrink the brand
   and let it truncate instead of pushing the burger off-screen.
===================================================================== */
@media (max-width: 430px) {
  .hdr__in { min-width: 0; }
  .hdr__in > a:first-child,
  .hdr__brand,
  .hdr__lg {
    min-width: 0;
    font-size: 0.95rem !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .hdr__end { flex: 0 0 auto; }
}
@media (max-width: 360px) {
  .hdr__in > a:first-child,
  .hdr__brand,
  .hdr__lg { font-size: 0.85rem !important; }
  .icb { width: 36px !important; }
}

/* ===== AIHUB_BRAND_SHRINK =============================================
   The header brand is <a class="brand"> and measures 207px even at the
   reduced font size, so brand + actions exceeded a 320px screen and the
   burger was pushed off the right edge. Let it shrink and truncate.
===================================================================== */
@media (max-width: 430px) {
  .hdr__in .brand {
    min-width: 0;
    flex: 0 1 auto;
    overflow: hidden;
    white-space: nowrap;
    gap: 6px;
  }
  .hdr__in .brand > span:last-child { overflow: hidden; text-overflow: ellipsis; }
  .hdr__in .hdr__end { flex: 0 0 auto; }
}
@media (max-width: 360px) {
  /* Drop the 18+ pill from the lockup; the age notice still sits in the
     promo bar and the footer, so nothing is lost. */
  .hdr__in .brand .pill,
  .hdr__in .brand .badge,
  .hdr__in .brand .age { display: none !important; }
}

/* ===== AIHUB_HOME_CLIP ================================================
   The header lockup is a few px wider than a 320px screen on every page,
   but only the homepage lacked a clipping wrapper, so only the homepage
   showed the white gutter. overflow-x: clip contains it without creating
   a scroll container (so position: sticky keeps working).
===================================================================== */
body.home #wrapper,
body.home #inner-wrap,
body.blog #wrapper,
body.front-page #wrapper { overflow-x: clip; }

/* ===== AIHUB_ROOT_CLIP ================================================
   overflow-x on <body> PROPAGATES to the viewport instead of clipping the
   body's own content, so 'body{overflow-x:hidden}' never contained the
   header row. Put it on the root instead. 'clip' rather than 'hidden' so
   no scroll container is created and position: sticky keeps working.
===================================================================== */
html { overflow-x: clip; }

/* ===== AIHUB_BRAND_MAXW ===============================================
   Cap the brand so the action cluster always fits: the icons + burger
   need ~130px, so the lockup may take the rest and truncate.
===================================================================== */
@media (max-width: 430px) {
  .hdr__in .brand { max-width: calc(100% - 140px) !important; }
  .hdr__in .brand > * { min-width: 0; }
  .hdr__in .brand span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* ===== AIHUB_LST_LAYOUT ===============================================
   .lst is a flex row: <b>title</b> + <span>description</span>. The span
   defaults to min-width:auto so it refuses to shrink, took 204px of a
   345px row, and starved the title down to 23-87px - which then wrapped
   one letter per line. Let the DESCRIPTION shrink, never the title, and
   stack the two on phones so the title always gets a full line.
===================================================================== */
.lst b { min-width: 0; overflow-wrap: normal; word-break: normal; }
.lst > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 860px) {
  .lst { flex-direction: column; align-items: flex-start; gap: 6px; }
  .lst b { flex: 0 0 auto; width: 100%; }
  .lst > span { flex: 0 0 auto; width: 100%; white-space: normal; }
}

/* ===== AIHUB_PROMO_MOBILE =============================================
   The announcement bar wrapped into three stacked rows and stood 153px
   tall on a 396px screen - a third of the first view before any content.
   Its close button also measured 0px wide, so it could not be dismissed
   on a phone. Compact it to ~2 rows and restore a real tap target.
===================================================================== */
@media (max-width: 760px) {
  .promo__in {
    gap: 8px !important;
    row-gap: 6px !important;
    padding: 7px 10px !important;
    justify-content: center;
  }
  .promo__t {
    font-size: 12px !important;
    line-height: 1.35 !important;
    margin: 0 !important;
  }
  .promo .btn {
    min-height: 34px !important;
    padding: 6px 12px !important;
    font-size: 12px !important;
  }
  .promo__age { flex: 0 0 auto; }
  /* The dismiss control collapsed to 0px - give it a real target. */
  .promo__x {
    flex: 0 0 auto !important;
    width: 32px !important;
    height: 32px !important;
    display: grid !important;
    place-items: center;
  }
}
@media (max-width: 420px) {
  .promo__t { font-size: 11.5px !important; }
}

@media (max-width: 760px) {
  .promo__ver { display: none; }   /* keep the announcement to two lines */
}

/* AIHUB_PT_STACK - the homepage privacy table is 700px wide inside a ~284px
   scroller on phones, so three columns sit off-screen. Below 700px the header
   row becomes a row of sort chips and each body row becomes a card, so nothing
   is hidden and the sort controls survive. */
@media (max-width:700px){
  .ptwrap{overflow:visible}
  .pt{display:block;width:100%;min-width:0;border-collapse:collapse}
  .pt thead{display:block;margin-bottom:6px}
  .pt thead tr{display:flex;flex-wrap:wrap;gap:6px;border:0}
  .pt thead th{display:block;width:auto;padding:0;border:0;background:transparent}
  .pt thead th:nth-child(4),.pt thead th:nth-child(5){display:none}
  .pt thead th button{display:inline-flex;align-items:center;gap:4px;padding:6px 10px;
    border:1px solid var(--line,#e8ddcd);border-radius:999px;background:#fff;
    font-size:12px;font-weight:800;line-height:1;min-height:32px}
  .pt tbody{display:block}
  .pt tbody tr{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px;
    padding:14px 0;border-bottom:1px solid var(--line,#e8ddcd)}
  .pt tbody tr:last-child{border-bottom:0}
  .pt tbody td{display:block;width:auto;padding:0;border:0;font-size:14px;min-width:0}
  .pt tbody td:nth-child(1){flex:0 0 auto;font-weight:900;opacity:.55}
  .pt tbody td:nth-child(2){flex:1 1 auto;min-width:0;font-weight:900;font-size:16px}
  .pt tbody td:nth-child(3){flex:0 0 auto;font-weight:800}
  .pt tbody td:nth-child(4){flex:1 1 100%;min-width:0;overflow-wrap:break-word}
  .pt tbody td:nth-child(5){flex:1 1 100%}
  .pt tbody td:nth-child(3)::before{content:'Privacy ';opacity:.55;font-weight:700}
  .pt tbody td:nth-child(4)::before{content:'Pricing: ';opacity:.55;font-weight:700}
}

/* AIHUB_PT_STACK2 - AIHUB_PT_STACK zeroed the cell padding, so rows sat flush
   against .ptwrap's rounded 24px card edge, and the rank digits inherited both
   a 0.34 alpha colour AND an extra .55 opacity (~1.5:1 contrast). */
@media (max-width:700px){
  .ptwrap{padding:6px 16px}
  .pt thead{padding:6px 0 2px}
  .pt tbody td:nth-child(1){opacity:1;color:#6b6b70;font-size:13px}
  .pt tbody td:nth-child(2){font-size:16px;line-height:1.25}
  .pt tbody td:nth-child(3){font-weight:800;color:#2b262a}
  .pt tbody td:nth-child(4){color:#4a4a50;line-height:1.45;margin-top:2px}
  .pt tbody td:nth-child(3)::before,
  .pt tbody td:nth-child(4)::before{opacity:1;color:#6b6b70;font-weight:700}
  .pt tbody tr{padding:13px 0;row-gap:4px}
  .pt tbody tr:first-child{padding-top:4px}
}

/* AIHUB_PT_RANK - the rank ordinal used rgba(10,10,10,.34) (~2.3:1 on white),
   too faint to read at any width. Kept visually subdued but legible. */
.pt .pt__r,.pt tbody td:first-child{color:#6f6f75}

/* AIHUB_FULLBLEED_ALL - Kadence caps main.wrap at 1240px with 52px side
   padding. Every redesigned page draws full-width coloured bands (dark heroes,
   CTA banners), so on a 1920px screen those bands stopped at 1136px and floated
   in a cream void. Each redesign has its own self-constraining container
   (1180-1200px), so releasing the theme wrapper is safe: bands go edge to edge,
   text stays centred at the same measure. Scoped with :has() so ordinary posts
   and pages keep the boxed 1240px layout. */
body.aihub-deal-page main.wrap,
body.aihub-best-page main.wrap,
body.aihub-cmphub-page main.wrap,
body.aihub-method-page main.wrap,
body:has(.nsrm-page) main.wrap,
body:has(.nsrd-page) main.wrap,
body:has(.nsrbm-page) main.wrap,
body:has(.nsra-page) main.wrap,
body:has(.nsrart-page) main.wrap,
body:has(.nsrdeal-hero) main.wrap,
body:has(.nsrt-main) main.wrap,
body:has(.nsr-dir-main) main.wrap,
body:has(.nsrcat-hero) main.wrap,
body:has(.nsr-cmp-container) main.wrap,
body:has(.nsrlist-hero) main.wrap,
body:has(.nsrcmp-page) main.wrap{
  max-width:none;
  width:100%;
  margin-left:0;
  margin-right:0;
  padding-left:0;
  padding-right:0;
}

/* AIHUB_FORM_BTN_CONTRAST - Kadence form submit buttons render white text on
   the brand pink (#F92FBB) at 3.41:1. Every other pink button in the design
   system uses #111 (about 6:1); match it so the primary action on the contact,
   report, submit and advertise forms is legible. */
.kb-adv-form-submit-button,
.kb-forms-submit,
button.kb-button.kt-button,
.kb-adv-form-submit-button .kt-btn-inner-text,
.kb-forms-submit .kt-btn-inner-text,
button.kb-button.kt-button .kt-btn-inner-text{color:#111}