/* =====================================================================
   Bingo Hideout — modern refinements, loaded AFTER the theme's screen.css.
   The original theme is left untouched; everything here is an override layer.
   The theme sizes type in em off a 10px body (font-size:62.5%), which reads
   small on modern screens. We use rem (root ≈ 16px) to avoid em compounding
   and to set a consistent, larger type + spacing scale.
   ===================================================================== */

:root {
  /* Type scale (rem, root ≈ 16px) */
  --bh-fs-sm: 0.9375rem;    /* 15px — meta, captions */
  --bh-fs-body: 1.0625rem;  /* 17px — reading text */
  --bh-fs-lead: 1.1875rem;  /* 19px — intros / lead paragraphs */
  --bh-fs-h1: 2.25rem;      /* 36px */
  --bh-fs-h2: 1.625rem;     /* 26px */
  --bh-fs-h3: 1.3125rem;    /* 21px */
  --bh-fs-h4: 1.125rem;     /* 18px */
  --bh-lh-body: 1.7;
  --bh-lh-heading: 1.25;

  /* Spacing scale */
  --bh-space-1: 0.5rem;
  --bh-space-2: 1rem;
  --bh-space-3: 1.5rem;
  --bh-space-4: 2rem;
  --bh-space-5: 3rem;

  /* Ink / brand (text greys nudged darker for AA contrast) */
  --bh-ink: #2c3a3b;        /* body text */
  --bh-ink-soft: #526466;   /* muted text / meta (≈4.6:1 on #fbfbfb) */
  --bh-teal: #37494a;
  --bh-pink: #e9609f;
  --bh-accent: #5dc7c0;
}

/* ---------------------------------------------------------------------
   1. Reading text — bump the theme's 14px body copy to a modern size in
      the contexts where people actually read. Element `*{font-size:1em}`
      resets in the theme stop this from compounding into nested nodes.
   --------------------------------------------------------------------- */
/* Only bump plain reading paragraphs. The theme's styled paragraphs carry a class
   (.scheme-a bonus figures, .link-a/.link buttons, CTAs) and rely on their own em-based
   sizing + absolute positioning, so we must leave those alone. */
#content p:not([class]),
#featured p:not([class]),
.module-a p:not([class]),
.news-a p:not([class]),
.news-b p:not([class]) {
  font-size: var(--bh-fs-body);
  line-height: var(--bh-lh-body);
}

/* Lead / intro paragraphs a touch larger */
#featured .toppara,
#featured > p:first-of-type {
  font-size: var(--bh-fs-lead);
  line-height: 1.6;
}

body,
button,
input,
option,
select,
textarea {
  color: var(--bh-ink);
}

/* ---------------------------------------------------------------------
   2. Single post / page articles — full modern hierarchy + rhythm.
   --------------------------------------------------------------------- */
.prose {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}
.prose .heading-a h1,
.prose > h1 {
  font-size: var(--bh-fs-h1);
  line-height: var(--bh-lh-heading);
  color: var(--bh-teal);
  margin-bottom: var(--bh-space-2);
}
.prose h2 {
  font-size: var(--bh-fs-h2);
  line-height: var(--bh-lh-heading);
  color: var(--bh-teal);
  margin: var(--bh-space-4) 0 var(--bh-space-2);
}
.prose h3 {
  font-size: var(--bh-fs-h3);
  line-height: var(--bh-lh-heading);
  color: var(--bh-teal);
  margin: var(--bh-space-3) 0 var(--bh-space-1);
}
.prose h4,
.prose h5,
.prose h6 {
  font-size: var(--bh-fs-h4);
  line-height: var(--bh-lh-heading);
  color: var(--bh-teal);
  margin: var(--bh-space-3) 0 var(--bh-space-1);
}
.prose p {
  margin-bottom: var(--bh-space-3);
}
.prose ul,
.prose ol {
  margin: 0 0 var(--bh-space-3);
  padding-left: 1.4em;
}
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { margin-bottom: 0.4em; }
.prose a {
  color: var(--bh-pink);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.prose a:hover { text-decoration: none; }
.prose blockquote {
  margin: var(--bh-space-3) 0;
  padding: var(--bh-space-1) var(--bh-space-3);
  border-left: 4px solid var(--bh-accent);
  color: var(--bh-ink-soft);
  font-style: italic;
}

/* ---------------------------------------------------------------------
   3. Byline (author + date) — replaces the bare, poorly formatted date.
   --------------------------------------------------------------------- */
.byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bh-space-1) var(--bh-space-2);
  margin: 0 0 var(--bh-space-4);
  padding-bottom: var(--bh-space-2);
  border-bottom: 1px solid #e3e9e9;
  font-size: var(--bh-fs-sm);
  color: var(--bh-ink-soft);
  list-style: none;
}
.byline .byline-author { font-weight: 600; color: var(--bh-teal); }
.byline li { font-size: var(--bh-fs-sm); }
.byline .sep { color: #b9c4c4; }

/* "Last updated" line on info/legal pages */
.page-updated {
  margin: 0 0 var(--bh-space-4);
  font-size: var(--bh-fs-sm);
  color: var(--bh-ink-soft);
}

/* Search page (rendered inside .prose, so selectors are scoped to beat .prose list/link rules) */
.search-page-form { display: flex; gap: var(--bh-space-2); margin-bottom: var(--bh-space-3); }
.search-page-form input {
  flex: 1; min-width: 0; padding: 0.7rem 1rem;
  font-size: var(--bh-fs-body); border: 1px solid #cdd8d8; border-radius: 6px;
}
.search-page-form button {
  padding: 0.7rem 1.4rem; border: 0; border-radius: 6px;
  background: var(--bh-pink); color: #fff; font-size: var(--bh-fs-body); cursor: pointer;
}
.search-status { color: var(--bh-ink-soft); margin-bottom: var(--bh-space-3); }
.prose ul.search-results { list-style: none; margin: 0; padding: 0; }
.prose .search-results li { margin: 0 0 var(--bh-space-2); }
.prose .search-results a {
  display: block; padding: var(--bh-space-2) var(--bh-space-3);
  border: 1px solid #e3e9e9; border-radius: 8px;
  text-decoration: none; color: var(--bh-ink);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.prose .search-results a:hover { border-color: var(--bh-accent); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06); }
.search-kind {
  display: inline-block; font-size: 0.72rem; text-transform: uppercase;
  letter-spacing: 0.03em; color: var(--bh-pink); font-weight: 600;
}
.search-title { display: block; font-size: 1.2rem; color: var(--bh-teal); font-weight: 600; }
.search-snippet { display: block; font-size: var(--bh-fs-sm); color: var(--bh-ink-soft); margin-top: 3px; }

/* ---------------------------------------------------------------------
   4. Article figures — images, alignment, captions.
   --------------------------------------------------------------------- */
.prose img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
}
/* Inline images that carry an alignment (float them with text wrapping around) */
.prose p img[align="left"], .prose img.alignleft {
  float: left; max-width: 45%; margin: 0.3rem var(--bh-space-3) var(--bh-space-2) 0;
}
.prose p img[align="right"], .prose img.alignright {
  float: right; max-width: 45%; margin: 0.3rem 0 var(--bh-space-2) var(--bh-space-3);
}
/* Contain floats so they don't spill past the article */
.prose::after { content: ""; display: block; clear: both; }
.prose figure {
  margin: var(--bh-space-4) 0;
  text-align: center;
}
.prose figure img { display: block; margin: 0 auto; }
.prose figure.align-left {
  float: left;
  margin: 0.3rem var(--bh-space-3) var(--bh-space-2) 0;
  max-width: 45%;
}
.prose figure.align-right {
  float: right;
  margin: 0.3rem 0 var(--bh-space-2) var(--bh-space-3);
  max-width: 45%;
}
.prose figcaption {
  margin-top: var(--bh-space-1);
  font-size: var(--bh-fs-sm);
  color: var(--bh-ink-soft);
  font-style: italic;
}

/* Legacy table-based author blocks (about page): image block + text below */
.prose table { width: 100%; border-collapse: collapse; margin-bottom: var(--bh-space-3); }
.prose td { vertical-align: top; padding: 0 var(--bh-space-3) var(--bh-space-3) 0; }
.prose td img { display: block; margin: 0 0 var(--bh-space-2); }

/* ---------------------------------------------------------------------
   5. Cards / listings — nudge small text up, keep the grid intact.
   --------------------------------------------------------------------- */
.news-b article h2,
.news-b article h2 a,
.news-b article h3 { font-size: 1.5rem; }
.news-b .link a { font-size: var(--bh-fs-body); }
/* Enlarged bonus figure on the new/free-sites cards (was a per-page inline style). */
.news-b:not(.a) .scheme-a span span { font-size: 1.84694656489em; }

/* Review index grid (.news-b.a): the theme floats cards at 33% width, which staggers when
   cards have different heights (some sites have no bonus line). Use CSS grid so rows stay
   aligned and every card stretches to the row's height. */
.news-b.a { display: grid; grid-template-columns: repeat(3, 1fr); }
.news-b.a article { float: none !important; width: auto !important; height: auto !important; }
.news-b.a .link { margin-top: auto; } /* push the "… Review" link to the card bottom */
.news-b.a article { display: flex; flex-direction: column; }
.news-b.a article > header { flex: 0 0 auto; }
@media (max-width: 1000px) { .news-b.a { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .news-b.a { grid-template-columns: 1fr; } }

/* Section headings that sit on the light background — improve contrast */
.news-b h1, .news-b h2, .news-b h3, .news-b h4,
.module-a > header h2 { color: var(--bh-teal); }

/* Blog news listing (/bingo-news): consistent heading + a lighter byline per item */
.news-a article h2 { font-size: 1.5rem; line-height: var(--bh-lh-heading); margin-bottom: 0.5rem; }
.news-a article h2 a { color: var(--bh-teal); }
.news-a .byline { margin: 0 0 var(--bh-space-2); padding-bottom: 0; border-bottom: 0; }
.news-a figure img { width: 220px; height: 122px; object-fit: cover; border-radius: 4px; }

/* ---------------------------------------------------------------------
   6. Nav hover/active underline — sits under the text (not at the header
      edge) and is inset to text width so items read as distinct marks.
   --------------------------------------------------------------------- */
#nav > ul > li > a::before {
  left: 9px;
  right: 9px;
  bottom: 27px;
  opacity: 0;
  transition: opacity 0.15s ease-in-out, bottom 0.15s ease-in-out;
}
#nav > ul > li:last-child > a::before { right: 0; }
#nav > ul > li > a:hover::before,
#nav > ul > li.active > a::before,
#nav > ul > li.current-menu-item > a::before {
  bottom: 31px;
  opacity: 1;
}

/* ---------------------------------------------------------------------
   7. The theme's JS injects the mobile dropdown (#mobile) on every viewport;
      collapsed, its box-shadow paints a faint full-width grey line at the
      header's bottom edge. Only render it when the menu is actually open.
   --------------------------------------------------------------------- */
html:not(.menu-active) #mobile { display: none; }