/* ──────────────────────────────────────────────────────────────────────
   VennBoard brand override for the Guides app.

   The Guides templates still load the old product's compiled stylesheet
   (dist/style.min.css, shipped with the acquisition). It is minified and
   shared, so rather than rewrite it this sheet loads after it and restates
   only what is needed to bring the app onto the vennboard.com identity:
   palette, type, button metrics and the full-bleed gradient bands.

   Palette is navy and white, matching the main site — no gold, and none of
   the old theme's Bootstrap blue (#0d6efd), yellow (#f1c40f), indigo
   (#2d2ed4) or magenta (#e24997).
────────────────────────────────────────────────────────────────────── */

:root {
  --vb-navy: #0d1b3e;
  --vb-navy-mid: #152552;
  --vb-navy-light: #1e3370;
  --vb-white: #ffffff;
  --vb-mist: #f4f6fa;
  --vb-line: #e1e6ef;
  --vb-ink: #1a2235;
  --vb-muted: #5e6b7d;
  --vb-radius: 0.375rem;
  --vb-font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --vb-font-body: 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ── Type: same two faces as vennboard.com ─────────────────────────────
   The old theme set Poppins on body and on most components individually,
   so body alone does not inherit far enough — the component selectors
   below are the ones that actually carry text on a guide page. */
body,
.classy-navbar,
.classynav ul li a,
.btn,
button,
input,
select,
textarea,
p, li, td, th, span, div, blockquote,
.single-blog-post .post-meta a,
.footer-bottom-area,
.single-footer-widget {
  font-family: var(--vb-font-body);
}
h1, h2, h3, h4, h5, h6,
.section-heading h3,
.cta-content h3,
.welcome-text-area h2 {
  font-family: var(--vb-font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* ── Brand lockup ──────────────────────────────────────────────────────
   The old logo was 89×29. The VennBoard lockup is ~5.5:1, so the width
   attribute still on the <img> would squash it — let height drive. */
.navbar-brand img,
.nav-brand img,
.classy-navbar .nav-brand img {
  height: 30px !important;
  width: auto !important;
  max-width: none;
}

/* ── Buttons: the metrics from vennboard.com's .btn ───────────────────── */
.btn,
.btn-primary,
.btn-dark {
  padding: 0.75rem 1.4rem;
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1;
  border-radius: var(--vb-radius);
  border: 1px solid transparent;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn-primary,
.btn-primary:focus {
  background-color: var(--vb-navy) !important;
  border-color: var(--vb-navy) !important;
  color: var(--vb-white) !important;
}
.btn-primary:hover {
  background-color: var(--vb-navy-light) !important;
  border-color: var(--vb-navy-light) !important;
  color: var(--vb-white) !important;
}
/* The outline partner — stated in navy because it only sits on white here. */
.btn-dark,
.btn-dark:focus {
  background-color: transparent !important;
  border: 1.5px solid var(--vb-navy) !important;
  color: var(--vb-navy) !important;
}
.btn-dark:hover {
  background-color: var(--vb-navy) !important;
  color: var(--vb-white) !important;
}

/* ── The full-bleed bands ──────────────────────────────────────────────
   These were `background: linear-gradient(to right, #e24997, #2d2ed4)` —
   a magenta-to-indigo wash. A background-color override alone loses to the
   gradient, which is a background-image, so both have to be restated. */
.cta-area,
.welcome-area,
.video-area,
.hero-chattogram.welcome-area,
.hero-sylhet.welcome-area,
.hero-dhaka.welcome-area,
.hero-barishal.welcome-area {
  background-image: none !important;
  background-color: var(--vb-navy) !important;
  color: var(--vb-white);
}
.cta-area h1, .cta-area h2, .cta-area h3, .cta-area h4, .cta-area p,
.welcome-area h1, .welcome-area h2, .welcome-area h3, .welcome-area p {
  color: var(--vb-white) !important;
}
/* On navy, the filled button inverts the way it does on the main site. */
.cta-area .btn-primary,
.welcome-area .btn-primary,
.video-area .btn-primary {
  background-color: var(--vb-white) !important;
  border-color: var(--vb-white) !important;
  color: var(--vb-navy) !important;
}
.cta-area .btn-primary:hover,
.welcome-area .btn-primary:hover,
.video-area .btn-primary:hover {
  background-color: #c9d5e8 !important;
  border-color: #c9d5e8 !important;
  color: var(--vb-navy) !important;
}
.cta-area .btn-dark,
.welcome-area .btn-dark {
  border-color: rgba(255,255,255,0.55) !important;
  color: var(--vb-white) !important;
}
.cta-area .btn-dark:hover,
.welcome-area .btn-dark:hover {
  background-color: rgba(255,255,255,0.12) !important;
  border-color: var(--vb-white) !important;
}
/* The decorative rule under section headings carried the same gradient. */
.section-heading .line,
.line {
  background-image: none !important;
  background-color: var(--vb-navy) !important;
}

/* ── Nav and in-page links (were Bootstrap blue) ───────────────────── */
.classy-nav-container a:hover,
.classy-nav-container a:focus,
.classy-nav-container .classy-navbar .classynav ul li:hover > a,
.single-blog-post .post-meta a:hover,
.single-blog-post .post-meta a:focus,
.footer-bottom-area .copywrite-text a:hover,
.footer-bottom-area .copywrite-text a:focus,
.section-heading h3 span,
.single-blog-post .post-date {
  color: var(--vb-navy) !important;
}

/* ── Dark surfaces: the same roles invert to white ─────────────────── */
.night-mode-wrapper { background-color: var(--vb-navy) !important; }
.single-footer-widget .footer-menu li a:hover,
.single-footer-widget .footer-menu li a:focus,
.footer-bottom-area .social-btn-group a:hover,
.footer-bottom-area .social-btn-group a:focus,
[data-theme="dark"] .header-area .classynav ul li a:hover,
[data-theme="dark"] .header-area .classynav ul li a:focus,
[data-theme="dark"] .header-area .classynav ul li ul li a:hover,
[data-theme="dark"] .header-area .classynav ul li ul li a:focus,
[data-theme="dark"] .header-area .classynav ul li:hover > a {
  color: var(--vb-white) !important;
}

/* ── Anything still painting a retired accent ──────────────────────── */
.bg-warning { background-color: var(--vb-navy) !important; color: var(--vb-white) !important; }
.text-primary { color: var(--vb-navy) !important; }
.bg-primary { background-color: var(--vb-navy) !important; }

/* ── Links ─────────────────────────────────────────────────────────────
   The theme sheet @imports Bootstrap, which sets a { color:#0d6efd }.
   Nothing in the old theme overrode it for body copy, so every in-article
   link and the byline rendered Bootstrap blue. Default to navy, then let
   links on a navy ground invert — otherwise they vanish into it. */
a { color: var(--vb-navy); }
a:hover, a:focus { color: var(--vb-navy-light); }
.single-blog-post .post-date a,
.single-blog-post .post-meta a { color: var(--vb-navy); }

.cta-area a,
.welcome-area a,
.video-area a,
.footer-area a,
.footer-bottom-area a,
.single-footer-widget a,
.night-mode-wrapper a { color: var(--vb-white); }
.cta-area a:hover,
.welcome-area a:hover,
.footer-bottom-area a:hover,
.single-footer-widget a:hover { color: var(--vb-white); opacity: .85; }

/* ── Tinted bands ──────────────────────────────────────────────────────
   .bg-gray was #faf5ff, a lavender tint left over from the old palette.
   The main site's alternate band is a cool mist, so use that. */
.bg-gray { background-color: var(--vb-mist) !important; }
.bg-light { background-color: var(--vb-mist) !important; }

/* Body copy: the theme sets Poppins on body and the article container, so
   the article's own text needs naming rather than relying on inheritance. */
.single-blog-post,
.single-blog-post p,
.single-blog-post li,
.single-blog-post span,
.blog-content, .blog-content p, .blog-content li {
  font-family: var(--vb-font-body);
}
.single-blog-post h1, .single-blog-post h2,
.single-blog-post h3, .single-blog-post h4 {
  font-family: var(--vb-font-display);
}

/* ── Link legibility ───────────────────────────────────────────────────
   Retiring the Bootstrap blue made every link navy — the same weight and
   near-enough the same colour as the body text, so links stopped reading
   as links. Colour alone was doing the work before and no longer can, so
   content links are underlined and set slightly heavier. The underline is
   offset and thin so it does not muddy descenders.

   Scoped to running copy: nav items, buttons and card tiles are already
   obviously interactive and would look cluttered underlined. */
.single-blog-post p a,
.single-blog-post li a,
.single-blog-post td a,
.blog-content a,
.main-content p a,
.post-meta p a,
article a:not(.btn) {
  color: var(--vb-navy);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(13, 27, 62, 0.35);
}
.single-blog-post p a:hover,
.single-blog-post li a:hover,
.blog-content a:hover,
.main-content p a:hover,
.post-meta p a:hover,
article a:not(.btn):hover {
  color: var(--vb-navy-light);
  text-decoration-color: currentColor;
}

/* The card "Learn more" affordance — an arrow link, not body copy. */
.single-work-step a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.9rem;
  font-weight: 600;
  color: var(--vb-navy);
  text-decoration: none;
  border-bottom: 2px solid var(--vb-navy);
  padding-bottom: 2px;
  line-height: 1.2;
}
.single-work-step a:hover { color: var(--vb-navy-light); border-bottom-color: var(--vb-navy-light); }

/* ── The three feature cards ───────────────────────────────────────────
   They had no edge of their own, so they read as loose text on white. */
.single-work-step {
  background: var(--vb-white);
  border: 1px solid var(--vb-line);
  border-radius: 10px;
  height: 100%;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.single-work-step:hover {
  border-color: var(--vb-navy);
  box-shadow: 0 12px 30px rgba(13, 27, 62, .08);
  transform: translateY(-2px);
}
.single-work-step h2 { color: var(--vb-navy); font-size: 1.9rem; margin-bottom: .75rem; }
.single-work-step h5 {
  font-family: var(--vb-font-display);
  font-size: 1.35rem; font-weight: 600; color: var(--vb-navy); margin-bottom: .5rem;
}
.single-work-step p { color: var(--vb-muted); margin-bottom: 0; }
/* The old theme flipped one card to a filled "active" state in the old
   accent; on this palette that reads as a selected state it does not have. */
.single-work-step.active { background: var(--vb-white); }

/* ── Library index ─────────────────────────────────────────────────────
   The landing page previously linked to seven things in total, two of its
   three cards going nowhere at all. This lists the actual library. */
.vb-library { background: var(--vb-mist); padding: 5rem 0; }
.vb-library__head { max-width: 46rem; margin: 0 auto 2.75rem; text-align: center; }
.vb-eyebrow {
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--vb-navy); margin-bottom: .6rem;
}
.vb-library__head h2 {
  font-family: var(--vb-font-display); font-weight: 600;
  font-size: clamp(1.9rem, 4vw, 2.6rem); color: var(--vb-navy); margin-bottom: .6rem;
}
.vb-library__lede { color: var(--vb-muted); font-size: 1.05rem; margin: 0; }

.vb-topics {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.vb-topic {
  display: block; padding: 1.4rem 1.5rem;
  background: var(--vb-white);
  border: 1px solid var(--vb-line);
  border-left: 3px solid var(--vb-navy);
  border-radius: 8px;
  text-decoration: none;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.vb-topic:hover {
  border-color: var(--vb-navy); border-left-color: var(--vb-navy);
  box-shadow: 0 12px 28px rgba(13, 27, 62, .09);
  transform: translateY(-2px);
}
.vb-topic__count {
  display: block;
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: 1.6rem; font-variant-numeric: tabular-nums;
  color: var(--vb-navy); line-height: 1;
}
.vb-topic__name {
  display: block; margin-top: .45rem;
  font-family: var(--vb-font-display); font-size: 1.3rem; font-weight: 600;
  color: var(--vb-navy); line-height: 1.2;
}
.vb-topic__desc {
  display: block; margin-top: .35rem;
  font-size: .92rem; line-height: 1.45; color: var(--vb-muted);
}
@media (max-width: 575px) { .vb-library { padding: 3.25rem 0; } }

/* ══════════════════════════════════════════════════════════════════════
   Topic landing pages (/topics, /topics/{category}, /topics/{cat}/{sub})

   These routes used to render a theme demo page with lorem ipsum in it.
   They now list the real library, so they need their own type and spacing
   rather than borrowing the article template's.
══════════════════════════════════════════════════════════════════════ */
.vb-topic-hero {
  background: var(--vb-navy);
  color: var(--vb-white);
  padding: 4.5rem 0 4rem;
}
.vb-topic-hero h1 {
  font-family: var(--vb-font-display);
  font-weight: 600;
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  line-height: 1.08;
  color: var(--vb-white);
  margin: 0 0 .75rem;
}
.vb-topic-hero .vb-eyebrow { color: rgba(255,255,255,.72); margin-bottom: .75rem; }
.vb-topic-hero__lede {
  color: rgba(255,255,255,.88);
  font-size: 1.1rem; line-height: 1.6; max-width: 46rem; margin: 0;
}

/* Breadcrumbs — the only way back up from a deep topic page. */
.vb-crumbs {
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: .76rem; letter-spacing: .04em;
  margin-bottom: 1.5rem; color: rgba(255,255,255,.6);
}
.vb-crumbs a { color: rgba(255,255,255,.82); text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.3); }
.vb-crumbs a:hover { color: var(--vb-white); border-bottom-color: var(--vb-white); }
.vb-crumbs span[aria-hidden] { margin: 0 .55rem; opacity: .45; }
.vb-crumbs__here { color: var(--vb-white); }

.vb-listing { background: var(--vb-mist); padding: 4rem 0 5rem; }
.vb-group + .vb-group { margin-top: 3rem; }
.vb-group__head {
  display: flex; align-items: baseline; gap: .9rem;
  border-bottom: 2px solid var(--vb-navy);
  padding-bottom: .55rem; margin-bottom: 1.25rem;
}
.vb-group__head h2 {
  font-family: var(--vb-font-display); font-weight: 600;
  font-size: 1.65rem; color: var(--vb-navy); margin: 0;
}
.vb-group__count {
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: .8rem; color: var(--vb-muted); margin-left: auto;
  font-variant-numeric: tabular-nums;
}

.vb-posts { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.vb-post a {
  display: block;
  background: var(--vb-white);
  border: 1px solid var(--vb-line);
  border-left: 3px solid transparent;
  border-radius: 8px;
  padding: 1rem 1.2rem;
  text-decoration: none;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.vb-post a:hover {
  border-color: var(--vb-line);
  border-left-color: var(--vb-navy);
  box-shadow: 0 10px 24px rgba(13,27,62,.08);
  transform: translateX(2px);
}
.vb-post__title {
  display: block;
  font-family: var(--vb-font-display);
  font-size: 1.2rem; font-weight: 600; line-height: 1.25;
  color: var(--vb-navy);
}
.vb-post__desc {
  display: block; margin-top: .3rem;
  font-size: .92rem; line-height: 1.5; color: var(--vb-muted);
}
@media (max-width: 575px) {
  .vb-topic-hero { padding: 3rem 0 2.75rem; }
  .vb-listing { padding: 2.75rem 0 3.5rem; }
}

/* ── Listing bullets ───────────────────────────────────────────────────
   header.blade.php carries an inline <style> for article prose that sets
   `ul li { list-style: inside; list-style-type: disc; padding-left: 2em }`.
   It is written for body copy inside a guide, but it applies to every list
   on the page — including these cards, which were showing a stray disc and
   a 2em indent above each one. Being inline it loads after this sheet, so
   the class selectors below (0,1,1) outrank its element selectors (0,0,2)
   and win regardless of order. */
.vb-posts,
.vb-topics {
  list-style: none;
  margin: 0;
  padding: 0;
}
.vb-posts li,
.vb-posts > .vb-post,
.vb-topics li {
  list-style: none;
  list-style-type: none;
  padding-left: 0;
  padding-top: 0;
  padding-bottom: 0;
  margin: 0;
}
.vb-posts li::marker,
.vb-topics li::marker { content: none; }

/* ── Fixed header ──────────────────────────────────────────────────────
   .header-area is `position:fixed; background-color:transparent`, so it
   floats over whatever is beneath it. That was survivable while every page
   opened on a light band, but the topic pages open on a navy hero — and a
   navy-outlined Login button on navy is invisible.

   Giving the bar its own white ground means the lockup and both buttons
   always sit on a known colour, and it matches vennboard.com's own header. */
.header-area {
  background-color: var(--vb-white) !important;
  border-bottom: 1px solid var(--vb-line);
}
.header-area .classy-nav-container { background-color: transparent !important; }
.header-area .classynav ul li a { color: var(--vb-ink); }
.header-area .classynav ul li a:hover { color: var(--vb-navy); }
/* The hero sits under a ~76px fixed bar; keep its content clear of it. */
.vb-topic-hero { padding-top: 7.5rem; }

/* ── Footer legal links ────────────────────────────────────────────────
   Privacy Policy / Terms of Use sit on the dark footer (#151e2e). Nothing
   in the theme styles :visited, so once followed they fell back to the
   navy from the global `a` rule and disappeared into the background.
   Declaring :link and :visited explicitly keeps both states identical —
   the only reliable way to stop a visited link restyling itself — and the
   underline means they read as links without relying on colour alone. */
.footer-bottom-area a,
.footer-bottom-area a:link,
.footer-bottom-area a:visited,
.footer-bottom-area .copywrite-text a,
.footer-bottom-area .copywrite-text a:link,
.footer-bottom-area .copywrite-text a:visited,
.single-footer-widget a,
.single-footer-widget a:link,
.single-footer-widget a:visited {
  color: #cfd8e8;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(207, 216, 232, .45);
}
.footer-bottom-area a:hover,
.footer-bottom-area .copywrite-text a:hover,
.single-footer-widget a:hover {
  color: var(--vb-white);
  text-decoration-color: var(--vb-white);
  opacity: 1;
}

/* ── Section jump links on topic pages ─────────────────────────────── */
.vb-jump {
  display: flex; flex-wrap: wrap; gap: .5rem;
  margin-top: 1.75rem; padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,.18);
}
.vb-jump__label {
  flex: 1 0 100%;
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: .7rem; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255,255,255,.6); margin-bottom: .2rem;
}
.vb-jump a,
.vb-jump a:link,
.vb-jump a:visited {
  display: inline-flex; align-items: baseline; gap: .4rem;
  padding: .4rem .75rem;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 999px;
  font-size: .88rem; line-height: 1.2;
  color: var(--vb-white); text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease;
}
.vb-jump a:hover { background: rgba(255,255,255,.12); border-color: var(--vb-white); }
.vb-jump a span {
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: .72rem; color: rgba(255,255,255,.65); font-variant-numeric: tabular-nums;
}
/* Anchor targets clear the fixed header when jumped to. */
.vb-group { scroll-margin-top: 6.5rem; }

/* ── Credit-card rate accuracy notice ──────────────────────────────────
   The rate and fee figures on the 192 card reviews carry no capture date
   and spot-check as materially stale. The notice has to read as a caveat
   on the numbers below it, not as decoration, so it sits on a tinted band
   with a rule rather than inline with the body copy. */
.vb-rate-notice {
  background: var(--vb-mist);
  border-left: 3px solid var(--vb-navy);
  padding: 1rem 1.15rem;
  margin: 1.5rem 0;
  border-radius: 4px;
}
.vb-rate-notice p { margin: 0; font-size: .94rem; line-height: 1.55; color: var(--vb-ink); }

/* ── Optional editorial intro above a listing ──────────────────────────
   Used where a listing page needs to say something before the list — the
   single-father grants page, where the eligibility question has to be
   answered before the state guides make sense. Measured column, because
   this is prose rather than an index. */
.vb-intro { padding: 3.25rem 0 0; }
.vb-intro .container > * { max-width: 46rem; }
.vb-intro h2 {
  font-family: var(--vb-font-display); font-weight: 600;
  font-size: clamp(1.4rem, 2.6vw, 1.8rem); color: var(--vb-navy);
  margin: 2rem 0 .7rem;
}
.vb-intro h2:first-child { margin-top: 0; }
.vb-intro p { color: var(--vb-ink); line-height: 1.65; margin-bottom: 1rem; }
.vb-intro ul { margin: 0 0 1.25rem; padding-left: 1.1rem; }
.vb-intro ul li { list-style: disc; margin-bottom: .45rem; line-height: 1.6; padding-left: .2rem; }
.vb-intro ul li::marker { content: '•  '; color: var(--vb-navy); }
.vb-intro__note {
  background: var(--vb-mist); border-left: 3px solid var(--vb-navy);
  padding: 1rem 1.15rem; border-radius: 4px; margin: 1.5rem 0;
}
.vb-intro__note p:last-child { margin-bottom: 0; }