/* ==========================================================================
   poorhousebar.com — shared stylesheet (money page + homepage mirror + EEAT)
   Every page links THIS file so the chrome cannot drift.

   Identity derives from the legacy Poor House Bar site (Fort Lauderdale dive
   bar, est. 1995): near-black surfaces, the Righteous display face, and the
   blue that --cta is built from.
   ========================================================================== */

:root {
  /* surfaces */
  --bone:        #f5f0e6;
  --bone-deep:   #ebe3d4;
  --ink:         #141414;
  --ink-soft:    #1c1a19;
  --ink-line:    #2b2825;
  --body:        #2a2724;
  --muted:       #6b635a;

  /* primary accent — brass. ranks, bonuses, ribbons, rules, stars. */
  --brass:       #c08b2e;
  --brass-lift:  #d9a445;
  --brass-wash:  #f6ecd6;

  /* ⛔ RESERVED CTA COLOUR — hard rule 19.
     The complement of --brass, and authentically the legacy site's own blue
     (#507de5). It appears on CTA BUTTONS ONLY: never on a heading, rank,
     bonus figure, ribbon, link, border, chip or icon. If you are about to use
     --cta on anything that is not a .tab-cta / .btn, you are breaking the rule. */
  --cta:         #2b6bf5;
  --cta-dark:    #1d54d1;
  --cta-ring:    rgba(43,107,245,.34);

  --radius:      3px;
  --shadow:      0 1px 0 rgba(20,20,20,.06), 0 6px 18px -10px rgba(20,20,20,.28);

  --display: "Righteous", "Barlow Condensed", system-ui, sans-serif;
  --label:   "Josefin Sans", system-ui, sans-serif;
  --text:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

/* defensive: an oversized image must never widen the page (this caused a real overflow) */
img { max-width: 100%; }

body {
  margin: 0;
  background: var(--bone);
  color: var(--body);
  font: 16px/1.62 var(--text);
  overflow-x: hidden;
}

.wrap { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 20px; }

a { color: var(--ink); text-decoration-color: var(--brass); text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }

/* ---------- masthead (light bone, non-sticky — hard rule 7) ---------- */
.masthead {
  background: var(--bone);
  border-bottom: 1px solid var(--bone-deep);
  position: static;
}
.masthead-in { display: flex; align-items: center; gap: 22px;
               padding-top: 6px; padding-bottom: 6px; }  /* NOT the shorthand: it would wipe .wrap gutters */
.brand { display: block; flex: 0 1 auto; min-width: 0; }
.brand img { display: block; height: 104px; width: auto; }
.nav { margin-left: auto; display: flex; align-items: center; gap: 17px; }
.nav a {
  font: 600 12px/1 var(--label);
  letter-spacing: .055em;
  white-space: nowrap;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
}
.nav a:hover { color: var(--brass); }
.nav-toggle { display: none; }

/* ---------- hero (compact for BOTH views so the toplist clears the fold) ---------- */
.hero { background: var(--ink); color: var(--bone); padding: 20px 0 24px; }
.hero h1 {
  font: 400 40px/1.1 var(--display);
  margin: 0 0 10px;
  letter-spacing: .005em;
}
.hero .lede { margin: 0; max-width: 62ch; font-size: 16.5px; color: #d8d0c2; }

/* byline: a structured row, never a compressed dot-run (hard rule 17) */
.byline { display: flex; align-items: center; gap: 13px; margin-top: 14px; }
.byline img { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--brass); }
.byline-txt { font: 400 13px/1.45 var(--text); color: #c9c1b4; }
.byline-txt .who { display: block; font: 600 14px/1.3 var(--text); color: var(--bone); }
.byline-txt .who a { color: var(--bone); text-decoration-color: var(--brass); }
.byline-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 3px; }

/* ---------- section furniture ---------- */
main section { padding: 30px 0 4px; }
h2 {
  font: 400 30px/1.18 var(--display);
  color: var(--ink);
  margin: 0 0 6px;
  letter-spacing: .005em;
}
h3 { font: 600 19px/1.3 var(--text); color: var(--ink); margin: 26px 0 8px; }
.rule { height: 2px; background: var(--brass); width: 54px; margin: 0 0 18px; }
p { margin: 0 0 15px; }

/* ==========================================================================
   THE TOPLIST — "bar tab" cards.
   Dive-bar DNA: each row reads like a tab/receipt. The bonus sits in the
   highest-hierarchy slot, right-aligned like the total on a bill, with the
   wagering terms as receipt small-print underneath.
   ========================================================================== */
.tabs { display: flex; flex-direction: column; gap: 12px; margin: 16px 0 0; }

.tab {
  position: relative;
  display: grid;
  grid-template-columns: 58px 168px minmax(0, 1fr) 286px 182px;
  align-items: center;
  gap: 20px;
  background: #fff;
  border: 1px solid var(--bone-deep);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px 20px 16px 0;
}
.tab--top { border-color: var(--brass); box-shadow: 0 0 0 1px var(--brass), var(--shadow); }

/* notched brass rank plate on the left edge — the tab's "stub" */
.tab-rank {
  align-self: stretch;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--ink);
  color: var(--brass-lift);
  font: 400 25px/1 var(--display);
  border-radius: var(--radius) 0 0 var(--radius);
  clip-path: polygon(0 0, 100% 0, calc(100% - 9px) 50%, 100% 100%, 0 100%);
  padding-right: 8px;
}
.tab--top .tab-rank { background: var(--brass); color: var(--ink); }
.tab--top .tab-bonus { border-top-width: 4px; background: #f9efd8; }
.tab--top .tab-bonus .amt { font-size: 41px; }
.tab-rank small {
  display: block;
  font: 600 8.5px/1 var(--label);
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: .72;
  margin-bottom: 3px;
}

/* logo always on a white chip (hard rule 12) */
.tab-logo {
  display: flex; align-items: center; justify-content: center;
  background: #fff;
  border: 1px solid var(--bone-deep);
  border-radius: var(--radius);
  height: 62px;
  padding: 8px 12px;
}
.tab-logo img { max-width: 100%; max-height: 44px; width: auto; height: auto; display: block; }

.tab-id .name { font: 600 17.5px/1.25 var(--text); color: var(--ink); margin: 0 0 5px; }
.tab-id .name a { color: var(--ink); text-decoration: none; }
.tab-id .name a:hover { text-decoration: underline; text-decoration-color: var(--brass); }
.stars { color: var(--brass); font-size: 13px; letter-spacing: 1.5px; }
.score { font: 600 12.5px/1 var(--text); color: var(--muted); margin-left: 7px; }
.pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.pill {
  font: 600 10.5px/1 var(--label);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #7a6a45;
  background: var(--brass-wash);
  border: 1px solid #e6d5ae;
  border-radius: 2px;
  padding: 5px 8px;
}
.tab-award {
  display: inline-block;
  font: 600 10.5px/1 var(--label);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--brass);
  padding: 5px 9px;
  border-radius: 2px;
  margin-bottom: 7px;
}

/* the bonus block — the eye-catcher (hard rule 6) */
.tab-bonus {
  background: var(--brass-wash);
  border: 1px solid #e2cfa4;
  border-top: 3px solid var(--brass);
  border-radius: var(--radius);
  padding: 12px 16px 13px;
  text-align: center;
}
.tab-bonus .cap {
  font: 600 11px/1 var(--label);
  letter-spacing: .19em;
  text-transform: uppercase;
  color: #8a7440;
  display: block;
  margin-bottom: 9px;
}
.tab-bonus .amt {
  font: 400 36px/1.04 var(--display);
  color: #a66f14;
  display: block;
  letter-spacing: .005em;
  text-decoration: none;
}
.tab-bonus .amt:hover { text-decoration: underline; text-decoration-color: var(--brass); }
.tab-logo a { display: block; line-height: 0; }
.tab-bonus .sub { display: block; font: 600 13.5px/1.35 var(--text); color: #5c5344; margin-top: 7px; }
.tab-bonus .terms {
  display: block;
  font: 400 11.5px/1.45 var(--text);
  color: #7b7160;
  margin-top: 9px;
  border-top: 1px solid #e2cfa4;
  padding-top: 8px;
}

/* ---------- the CTA — a punched drink-ticket shape, reserved colour only ---------- */
.tab-cta { text-align: center; }
.ticket {
  position: relative;
  display: block;
  width: 100%;
  background: var(--cta);
  color: #fff;
  font: 600 14px/1 var(--label);
  letter-spacing: .13em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 15px 12px;
  border: 0;
  cursor: pointer;
  /* notched corners = the ticket stub; this is the site's CTA silhouette */
  clip-path: polygon(9px 0, calc(100% - 9px) 0, 100% 9px, 100% calc(100% - 9px),
                     calc(100% - 9px) 100%, 9px 100%, 0 calc(100% - 9px), 0 9px);
  transition: background .14s ease, transform .14s ease;
}
.ticket:hover { background: var(--cta-dark); transform: translateY(-1px); }
.ticket:focus-visible { outline: 3px solid var(--cta-ring); outline-offset: 3px; }
.ticket--lg { font-size: 15px; padding: 17px 14px; }
.tab-cta .fine {
  display: block;
  font: 400 10.5px/1.4 var(--text);
  color: var(--muted);
  margin-top: 8px;
}

/* ---------- footer ---------- */
.foot { background: var(--ink-soft); color: #b3aa9c; margin-top: 52px; padding: 34px 0 26px; }
.foot img.mark { height: 88px; width: auto; max-width: 100%; object-fit: contain;
                 object-position: left; display: block; margin-bottom: 16px; }
.foot a { color: #d8d0c2; }
.foot-nav { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 0 0 20px; padding: 0; list-style: none; }
.foot-nav a { font: 600 12px/1 var(--label); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; }
.foot small { display: block; font-size: 12.5px; line-height: 1.6; }
/* the affiliate / #ad disclosure lives HERE, at the very bottom — never above a heading (hard rule 5) */
.disclosure { border-top: 1px solid var(--ink-line); margin-top: 20px; padding-top: 16px; font-size: 12px; color: #948b7d; }

/* ==========================================================================
   MOBILE — same content, reflowed. No display:none on real content (rule 2).
   Cards centre, CTA goes full width (rule 7).
   ========================================================================== */
@media (max-width: 1040px) {
  .foot img.mark { height: 62px; }
  .nav { display: none; }
  .nav.open { display: flex; }
  .nav-toggle {
    display: block; margin-left: auto; background: none; border: 1px solid var(--ink);
    border-radius: 2px; padding: 7px 9px; font: 600 11px/1 var(--label);
    letter-spacing: .07em; text-transform: uppercase; cursor: pointer; color: var(--ink);
    flex: 0 0 auto;
  }
  .masthead-in { flex-wrap: wrap; padding-top: 6px; padding-bottom: 6px; gap: 10px; }
  .nav.open {
    flex-basis: 100%; flex-direction: column; align-items: flex-start;
    gap: 0; border-top: 1px solid var(--bone-deep); margin-top: 12px; padding-top: 4px;
  }
  .nav.open a { padding: 12px 0; width: 100%; border-bottom: 1px solid var(--bone-deep); }

  /* width-driven on mobile so it scales down rather than crowding the nav control */
  .brand img { height: auto; width: 250px; max-width: 100%; }
  /* compact the hero for BOTH views so the toplist clears the fold on mobile too.
     This is compaction, NOT hiding: every element still renders (hard rule 2). */
  .hero { padding: 9px 0 12px; }
  .hero h1 { font-size: 24px; margin-bottom: 6px; line-height: 1.12; }
  .hero .lede { font-size: 15px; line-height: 1.5; }
  .byline { margin-top: 10px; gap: 10px; }
  .byline img { width: 38px; height: 38px; }
  .byline-txt { font-size: 12px; line-height: 1.38; }
  .byline-txt .who { font-size: 13.5px; }
  .byline-meta { gap: 2px 10px; margin-top: 2px; }
  main section { padding: 14px 0 4px; }
  h2 { font-size: 22px; }
  .rule { margin-bottom: 9px; }
  .tabs { margin-top: 14px; gap: 10px; }

  .tab {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 0 0 11px;
    text-align: center;
    justify-items: center;
  }
  .tab-rank {
    width: 100%;
    flex-direction: row; gap: 7px;
    padding: 4px 0; margin-bottom: 7px;
    border-radius: var(--radius) var(--radius) 0 0;
    clip-path: none;
    font-size: 17px;
  }
  .tab-rank small { margin: 0; }
  .tab-logo { border: 0; height: auto; padding: 0 0 2px; }
  .tab-logo img { max-height: 32px; }
  .pills { justify-content: center; margin-top: 5px; }
  .tab-award { margin-bottom: 5px; }
  .tab-id .name { margin-bottom: 3px; font-size: 16.5px; }
  /* bonus stays ABOVE the CTA and below the identity — the order that tested best */
  .tab-bonus {
    margin: 11px 14px 0;
    padding: 10px 14px 11px;
    width: calc(100% - 28px);
  }
  .tab-bonus .amt { font-size: 34px; }
  .tab--top .tab-bonus .amt { font-size: 37px; }
  .tab-cta { width: calc(100% - 36px); margin: 9px 18px 0; }
}

@media (max-width: 420px) {
  .hero h1 { font-size: 24px; }
  .tab-bonus, .tab-cta { margin-left: 12px; margin-right: 12px; width: calc(100% - 24px); }
}

/* ==========================================================================
   Body components: comparison tables, reviews, pros/cons, steps, FAQ, author
   ========================================================================== */

/* wide content scrolls inside its own container; the page body never scrolls sideways */
.tscroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 18px 0 24px; }
table.cmp { width: 100%; min-width: 620px; border-collapse: collapse; background: #fff; font-size: 14.5px; }
table.cmp caption {
  caption-side: bottom; text-align: left; font-size: 12.5px; color: var(--muted);
  padding: 9px 2px 0; line-height: 1.5;
}
table.cmp th {
  text-align: left; background: var(--ink); color: var(--bone);
  font: 600 11.5px/1.3 var(--label); letter-spacing: .09em; text-transform: uppercase;
  padding: 11px 12px;
}
table.cmp td { padding: 11px 12px; border-bottom: 1px solid var(--bone-deep); vertical-align: top; }
table.cmp tbody tr:nth-child(odd) td { background: #fdfcf8; }
table.cmp td:first-child { font-weight: 600; color: var(--ink); }

/* ---------- featured reviews ---------- */
.rev { border-top: 2px solid var(--brass); padding-top: 22px; margin-top: 34px; }
.rev h3 { margin-top: 0; font-size: 20px; }
.rev-top { display: flex; gap: 26px; align-items: center; margin: 0 0 18px; flex-wrap: wrap; }
.rev-chip {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid var(--bone-deep); border-radius: var(--radius);
  width: 170px; height: 74px; padding: 10px 14px;
}
.rev-chip img { max-width: 100%; max-height: 50px; width: auto; height: auto; display: block; }
.dims { flex: 1 1 320px; margin: 0; padding: 0; list-style: none; min-width: 280px; }
.dims li { display: grid; grid-template-columns: 152px 1fr 34px; align-items: center; gap: 11px; margin-bottom: 6px; }
.dims .dim { font: 600 11.5px/1.3 var(--label); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.dims .bar { background: var(--bone-deep); height: 7px; border-radius: 4px; overflow: hidden; }
.dims .bar i { display: block; height: 100%; background: var(--brass); }
.dims .dsc { font: 600 13px/1 var(--text); color: var(--ink); text-align: right; }

/* pros / cons — typographic marks in the brand palette, no emoji (hard rule 17) */
.pc { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 20px 0 22px; }
.pc-col { background: #fff; border: 1px solid var(--bone-deep); border-radius: var(--radius); padding: 15px 18px; }
.pc-col h4 {
  margin: 0 0 9px; font: 600 11.5px/1 var(--label); letter-spacing: .11em;
  text-transform: uppercase; color: var(--muted);
}
.pc-col ul { margin: 0; padding: 0; list-style: none; }
.pc-col li { position: relative; padding-left: 20px; margin-bottom: 7px; font-size: 14.5px; }
.pc-col li::before { position: absolute; left: 0; top: 0; font-weight: 700; }
.pc-pro { border-top: 3px solid var(--brass); }
.pc-pro li::before { content: "+"; color: var(--brass); }
.pc-con { border-top: 3px solid #8d8578; }
.pc-con li::before { content: "\2013"; color: #8d8578; }
.rev-cta { max-width: 340px; }

/* ---------- ordered steps ---------- */
ol.steps { counter-reset: s; list-style: none; margin: 18px 0 24px; padding: 0; }
ol.steps li {
  counter-increment: s; position: relative; padding: 0 0 14px 46px; margin: 0;
  border-left: 1px solid var(--bone-deep); padding-top: 2px;
}
ol.steps li:last-child { border-left-color: transparent; padding-bottom: 0; }
ol.steps li::before {
  content: counter(s); position: absolute; left: -15px; top: 0;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--ink); color: var(--brass-lift);
  font: 400 15px/30px var(--display); text-align: center;
}

/* ---------- FAQ ---------- */
.qa { border-bottom: 1px solid var(--bone-deep); padding: 15px 0; }
.qa:last-child { border-bottom: 0; }
.qa h3 { margin: 0 0 7px; font-size: 17px; }
.qa p { margin: 0; }

/* ---------- author box ---------- */
.abox { display: flex; gap: 26px; align-items: flex-start; background: #fff;
        border: 1px solid var(--bone-deep); border-left: 3px solid var(--brass);
        border-radius: var(--radius); padding: 24px 26px; margin: 30px 0 6px; }
.abox img { flex: 0 0 auto; width: 118px; height: 118px; border-radius: 50%; object-fit: cover; }
.abox h2 { font-size: 22px; }
.abox p { margin: 0; }

@media (max-width: 860px) {
  .pc { grid-template-columns: 1fr; gap: 14px; }
  .rev-top { gap: 16px; }
  .rev-chip { width: 140px; height: 62px; }
  .dims li { grid-template-columns: 128px 1fr 30px; gap: 9px; }
  .rev-cta { max-width: none; }
  .abox { flex-direction: column; align-items: center; text-align: center; gap: 16px; padding: 20px; }
  .abox img { width: 96px; height: 96px; }
  ol.steps li { padding-left: 40px; }
}