/* Styling for the server-rendered pages: guides, country coverage, shares.
 *
 * Loaded ONLY on those pages, so it costs the app nothing. It leans on the
 * variables hoostle.css already defines, which is why these pages look like the
 * product rather than like a blog somebody bolted on. If a token is missing the
 * fallback after each var() keeps the page readable rather than unstyled. */

.prose-page {
  background: var(--cream, #FFFCF5);
  color: var(--ink, #33291D);
}

/* ---- the header -------------------------------------------------------- *
 *
 * Three things had to be fixed here, all of them caused by the same thing: the
 * app's header is built out of <button> elements, and this one is built out of
 * <a> elements, so it was picking up browser defaults that nothing in the app
 * ever encounters.
 *
 * 1. UNDERLINES. hoostle.css sets `a { color: inherit }` and stops there, which
 *    left every link in this header with the default underline, including the
 *    wordmark, so the logo read as "Hoostle" with a stray rule under it.
 *
 * 2. THE BLUR. .topbar is translucent with a 14px backdrop-filter, which is
 *    right on the app, where cards and an owl slide under it. On a page that is
 *    a single column of text, the effect is prose smearing under the header as
 *    you scroll, which looks like a rendering fault rather than a material. A
 *    flat, opaque bar with a hairline under it is what these pages want.
 *
 * 3. THE MARK. Given a size, since the owl is now inline SVG rather than an
 *    empty div waiting for script that never arrives.
 */
.prose-page .topbar {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: var(--cream, #FFFCF5);
}
/* Decoration only. Colour is deliberately NOT set here: this selector would
   outrank the .btn rules below and repaint the honey call-to-action's label. */
.prose-page .topbar a,
.prose-page .topbar a:hover { text-decoration: none; }
.prose-page .brand { color: var(--ink, #33291D); }
.prose-page .brand .mark { width: 38px; height: 38px; display: block; flex: none; }
.prose-page .brand .name span { color: var(--honey, #E8A33D); }

/* Buttons are anchors on these pages, so `.prose a { color: teal }` was winning
   on specificity and painting the call-to-action's label a cold blue on a honey
   pill. Restated here at a specificity that beats it, per variant. */
.prose-page .btn,
.prose .btn { color: #fff; text-decoration: none; font-weight: 600; }
.prose-page .btn.ghost,
.prose-page .btn.quiet,
.prose .btn.ghost { color: var(--ink, #33291D); }
.prose-page .btn:hover,
.prose .btn:hover { text-decoration: none; }

.prose {
  max-width: 720px;
  margin: 0 auto;
  padding: 28px 22px 72px;
  font-size: 1.05rem;
  line-height: 1.72;
}

.prose h1 {
  font-family: var(--display, Georgia, serif);
  font-size: clamp(1.9rem, 5vw, 2.7rem);
  line-height: 1.16;
  font-weight: 700;
  margin: 8px 0 16px;
  letter-spacing: -0.01em;
}

.prose h2 {
  font-family: var(--display, Georgia, serif);
  font-size: clamp(1.25rem, 3vw, 1.5rem);
  font-weight: 600;
  line-height: 1.3;
  margin: 42px 0 12px;
}

.prose p { margin: 0 0 18px; color: var(--ink-2, #4A3D2E); }

.prose .lede {
  font-size: 1.18rem;
  line-height: 1.6;
  color: var(--ink-2, #4A3D2E);
  margin-bottom: 30px;
}

.prose .note { font-size: 0.92rem; color: var(--ink-3, #6B5B49); }

.prose a { color: var(--teal, #1E7C88); text-decoration: none; font-weight: 600; }
.prose a:hover { text-decoration: underline; }

/* ---- breadcrumbs ------------------------------------------------------- */
.crumbs {
  font-size: 0.86rem;
  color: var(--ink-3, #6B5B49);
  margin-bottom: 18px;
}
.crumbs a { font-weight: 500; }
.crumbs .sep { opacity: 0.5; margin: 0 2px; }
.crumbs [aria-current] { color: var(--ink-3, #6B5B49); }

/* ---- the guide hub ----------------------------------------------------- */
.cards { display: grid; gap: 14px; margin: 28px 0 8px; }

.pcard {
  display: block;
  padding: 20px 22px;
  border: 1px solid var(--line, #EFE4D2);
  border-radius: 14px;
  background: #fff;
  font-weight: inherit !important;
  color: inherit !important;
  transition: border-color .15s ease, transform .15s ease;
}
.pcard:hover { border-color: var(--honey, #E8A33D); transform: translateY(-1px); text-decoration: none !important; }
.pcard h2 { margin: 0 0 6px; font-size: 1.12rem; line-height: 1.35; }
.pcard p { margin: 0; font-size: 0.95rem; color: var(--ink-3, #6B5B49); }

/* ---- live country numbers ---------------------------------------------- */
.statrow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin: 26px 0 10px;
}
.stat {
  padding: 16px 14px;
  border: 1px solid var(--line, #EFE4D2);
  border-radius: 12px;
  background: #fff;
  text-align: center;
}
.stat b {
  display: block;
  font-family: var(--display, Georgia, serif);
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1.1;
}
.stat span { display: block; margin-top: 5px; font-size: 0.82rem; color: var(--ink-3, #6B5B49); line-height: 1.35; }

.checks { list-style: none; padding: 0; margin: 14px 0 22px; }
.checks li { padding: 7px 0; border-bottom: 1px dashed var(--line, #EFE4D2); font-size: 0.98rem; }
.checks .yes { font-weight: 600; }
.checks .no { color: var(--ink-3, #6B5B49); }

.samples { list-style: none; padding: 0; margin: 14px 0 22px; }
.samples li {
  padding: 11px 0;
  border-bottom: 1px dashed var(--line, #EFE4D2);
  font-size: 0.95rem;
  line-height: 1.5;
}
.samples .tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--teal, #1E7C88);
  margin-right: 7px;
}
.samples .age { color: var(--ink-3, #6B5B49); font-size: 0.84rem; white-space: nowrap; }

/* The country directory. Columns, so ninety-four names stay scannable rather
   than becoming the wall of links that marks a page as an SEO doorway. */
.countries {
  list-style: none;
  padding: 0;
  margin: 10px 0 26px;
  columns: 3 150px;
  column-gap: 20px;
}
.countries li { padding: 4px 0; break-inside: avoid; font-size: 0.96rem; }

/* ---- share pages -------------------------------------------------------- */
.sharecard {
  border: 1px solid var(--line, #EFE4D2);
  border-radius: 16px;
  background: #fff;
  padding: 26px 24px;
  margin-bottom: 26px;
}
.sharecard h1 { margin-top: 6px; font-size: clamp(1.5rem, 4vw, 2rem); }
.rcpt-strip {
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--teal, #1E7C88);
}
.pillrow { display: flex; gap: 8px; flex-wrap: wrap; margin: 18px 0 8px; }
.withheld {
  margin-top: 24px;
  padding: 16px 18px;
  border-radius: 12px;
  background: var(--cream-2, #FBF5EA);
  border: 1px solid var(--line, #EFE4D2);
}
.withheld p { font-size: 0.94rem; margin-bottom: 8px; }
.withheld p:last-child { margin-bottom: 0; color: var(--ink-3, #6B5B49); }

/* ---- the one call to action -------------------------------------------- */
.cta-strip {
  margin: 44px 0 10px;
  padding: 30px 26px;
  border-radius: 16px;
  background: var(--cream-2, #FBF5EA);
  border: 1px solid var(--line, #EFE4D2);
  text-align: center;
}
.cta-strip h2 { margin: 0 0 8px; }
.cta-strip p { margin: 0 auto 20px; max-width: 460px; color: var(--ink-3, #6B5B49); font-size: 0.98rem; }

.related { margin-top: 40px; }
.related ul { margin: 8px 0 0; padding-left: 20px; }
.related li { padding: 5px 0; }

/* ---- footer ------------------------------------------------------------- */
.prose-page .footer { max-width: 720px; margin: 0 auto; padding: 34px 22px 56px; }
.foot-brand { font-family: var(--display, Georgia, serif); font-weight: 600; font-size: 1.05rem; color: var(--ink-2, #4A3D2E); }
.foot-links { margin: 12px 0 6px; font-size: 0.92rem; }
.foot-links a { color: var(--ink-3, #6B5B49); text-decoration: none; }
.foot-links a:hover { text-decoration: underline; }
.prose-page .disc { font-size: 0.78rem; line-height: 1.6; color: var(--ink-3, #6B5B49); margin-top: 10px; }

@media (max-width: 560px) {
  .prose { font-size: 1.02rem; padding: 20px 18px 60px; }
  .countries { columns: 2 120px; }
}