/* ==========================================================================
   Mr MoneyJar: hub page styles
   File:     mmj-hubs-v1.css
   Version:  1.13  (27 Sept 2026)
   Used on:  /savings, /investing, /inheritance, /buying-a-house,
             /managing-debt, /insurance

   HOW IT WORKS
   - This file holds the rules shared by all six hub pages. It is linked
     once from Duda's site-wide header.
   - Colours are NOT set here. Each hub page sets its own colours in its
     page Header HTML, inside a <style> block:
         :root {
           --hub-base; --hub-light; --hub-deep; --hub-deepest;
           --hub-wash; --hub-text-small; --hub-on-base;
         }
     Values for each hub: hub-build-reference-table-v1.md
   - Every var() below has a fallback colour, so nothing breaks on a page
     that doesn't set the variables.

   CONVENTIONS
   - All classes start with "mmj-" so they never clash with Duda's own.
   - Selectors start with "body" to outrank Duda's default styles.
   - !important is used only where Duda's own widget styles win otherwise
     (list padding, section background, table widget). Each one is noted.
   - This is a .css file: no <style> tags in here (they break the first
     rule).

   CHANGELOG
   1.13 27 Sept 2026  Hero found automatically (section containing the
                      "On this page" card); mmj-hero class no longer needed.
   1.12 27 Sept 2026  Hero background and H1/intro colour now come from
                      the page variables (mmj-hero, --hub-on-base), so
                      duplicated hubs need no manual colour changes.
   1.11 27 Sept 2026  Added the review block (mmj-review), section 11.
   1.10 27 Sept 2026  Fix: text made bold in Duda was being forced back
                      to regular by the typography rules (section 0).
   1.9  27 Sept 2026  Table matched to the mockup: smaller header text,
                      regular-weight cells, no white lines in the header row.
   1.8  27 Sept 2026  Added hub page typography (section 0) to bring
                      Duda's larger theme text down to the mockup sizes.
   1.7  27 Sept 2026  Added the stronger tint (mmj-light) for the
                      "Keep going" section, in section 5.
   1.6  27 Sept 2026  Added the FAQ accordion (mmj-faq), section 10.
   1.5  27 Sept 2026  Added the dark band (mmj-band) and stat tile
                      (mmj-stat), section 9.
   1.4  27 Sept 2026  Added pros and cons panels (mmj-pc), section 8.
   1.3  27 Sept 2026  Card links: override Duda's red underlined theme
                      link style with the hub Deep colour.
   1.2  26 Sept 2026  Added scenario cards (mmj-card), section 7.
   1.1  26 Sept 2026  Tidied and commented. Added focus styles for
                      keyboard users, explicit hover colours on links and
                      buttons, and the comparison table (mmj-table).
   1.0  25 Sept 2026  Breadcrumb, eyebrow, hero buttons, "On this page"
                      card, tinted section (mmj-wash).
   ========================================================================== */


/* --------------------------------------------------------------------------
   0. HUB PAGE TYPOGRAPHY
   Duda's site theme sets paragraphs at 18px light and H3s at 25px, which
   reads large on the hub pages. These rules bring the native Duda text
   blocks down to the mockup sizes, on hub pages only.
   "body:has(.mmj-otp)" = any page with the "On this page" card, i.e. the
   six hubs, so the rest of the site keeps the theme sizes.
   Only Duda text blocks (.dmNewParagraph) are affected; our HTML widgets,
   the table and the FAQ accordion have their own sizes further down.
   This section sits first so component rules below win where they differ
   (cards, pros/cons, stat tile).
   -------------------------------------------------------------------------- */
body:has(.mmj-otp) .dmNewParagraph h2,
body:has(.mmj-otp) .dmNewParagraph h2 > span {
  font-size: 30px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.01em;
}
body:has(.mmj-otp) .dmNewParagraph h3,
body:has(.mmj-otp) .dmNewParagraph h3 > span {
  font-size: 19px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
}
body:has(.mmj-otp) .dmNewParagraph p,
body:has(.mmj-otp) .dmNewParagraph p > span,
body:has(.mmj-otp) .dmNewParagraph li {
  font-size: 16px !important;
  line-height: 1.6 !important;
}
body:has(.mmj-otp) .dmNewParagraph p,
body:has(.mmj-otp) .dmNewParagraph p > span:not([style*="font-weight"]),
body:has(.mmj-otp) .dmNewParagraph li {
  font-weight: 400 !important;      /* theme is 300, too light at this size.
                                       Spans Duda has made bold (inline
                                       font-weight) are left alone. */
}
/* Hero intro paragraph (the column that holds the H1) stays larger */
body:has(.mmj-otp) .flex-element.group:has(> .widget-wrapper h1) .dmNewParagraph p,
body:has(.mmj-otp) .flex-element.group:has(> .widget-wrapper h1) .dmNewParagraph p > span {
  font-size: 18px !important;
}


/* --------------------------------------------------------------------------
   0b. HERO SECTION COLOURS
   The hero is found automatically: it is the only Duda section that
   contains the "On this page" card (.mmj-otp), so no class is needed.
   Its background becomes the hub's Base colour and the H1 + intro text
   take --hub-on-base (#252A36 dark on light hubs, #FFFFFF on Inheritance,
   Managing debt and Insurance). Set both in each page's :root block.
   Duda paints the section background on its inner .grid, hence that
   selector.
   -------------------------------------------------------------------------- */
body section.flex-element.section:has(.mmj-otp) > .flex-element.grid {
  background-color: var(--hub-base, #74D2E7) !important;
}
body section.flex-element.section:has(.mmj-otp) .dmNewParagraph h1,
body section.flex-element.section:has(.mmj-otp) .dmNewParagraph h1 *,
body section.flex-element.section:has(.mmj-otp) .dmNewParagraph p,
body section.flex-element.section:has(.mmj-otp) .dmNewParagraph p * {
  color: var(--hub-on-base, #252A36) !important;
}


/* --------------------------------------------------------------------------
   1. HERO: BREADCRUMB
   HTML widget: <nav class="mmj-crumbs"> Home › [Hub] </nav>
   Small and quiet. Colour follows --hub-text-small (dark on light hubs,
   white on the dark hubs).
   -------------------------------------------------------------------------- */
body .mmj-crumbs {
  font-family: inherit;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--hub-text-small, #252A36);
  opacity: 0.85;              /* set once here; links inherit, so no double fade */
  margin: 0 0 22px;
}
body .mmj-crumbs a,
body .mmj-crumbs a:hover {
  color: inherit;
}
body .mmj-crumbs a {
  text-decoration: none;
}
body .mmj-crumbs a:hover {
  text-decoration: underline;
}
body .mmj-crumbs-sep {        /* the › between crumbs */
  opacity: 0.6;
  margin: 0 6px;
}


/* --------------------------------------------------------------------------
   2. HERO: EYEBROW
   HTML widget (same one as the breadcrumb):
   <p class="mmj-eyebrow">Financial education hub</p>
   Gap to the H1 below comes from Duda's heading spacing, so margin is 0.
   -------------------------------------------------------------------------- */
body .mmj-eyebrow {
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--hub-text-small, #252A36);
  margin: 0;
}


/* --------------------------------------------------------------------------
   3. HERO: BUTTONS
   HTML widget: <div class="mmj-btns"> with two <a class="mmj-btn ...">
   Primary: black on every hub (links to the hub's calculator).
   Secondary: outline in --hub-text-small (links to #faq).
   -------------------------------------------------------------------------- */
body .mmj-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}
body .mmj-btn {
  display: inline-block;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  padding: 14px 24px;
  border-radius: 8px;
  border: 2px solid transparent;
}
body .mmj-btn-primary,
body .mmj-btn-primary:hover {
  color: #FFFFFF;             /* restated on hover so Duda's link hover colour can't take over */
  text-decoration: none;
}
body .mmj-btn-primary {
  background: #252A36;        /* Factual Black */
}
body .mmj-btn-primary:hover {
  background: #000000;
}
body .mmj-btn-secondary,
body .mmj-btn-secondary:hover {
  color: var(--hub-text-small, #252A36);
  text-decoration: none;
}
body .mmj-btn-secondary {
  background: transparent;
  border-color: var(--hub-text-small, #252A36);
}
body .mmj-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.25);
}
/* Keyboard focus: white ring plus dark ring, visible on every hub colour */
body .mmj-btn:focus-visible,
body .mmj-crumbs a:focus-visible,
body .mmj-otp a:focus-visible {
  outline: 2px solid #FFFFFF;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px #252A36;
}


/* --------------------------------------------------------------------------
   4. HERO: "ON THIS PAGE" CARD
   HTML widget in the right-hand hero column:
   <nav class="mmj-otp"><p class="mmj-otp-title">…</p><ol>…</ol></nav>
   Title is a <p>, not a heading, to keep the H1 > H2 order clean.
   Title uses --hub-deepest on every hub (white would vanish on the
   translucent card).
   -------------------------------------------------------------------------- */
body .mmj-otp {
  background: rgba(255, 255, 255, 0.55);
  border-radius: 14px;
  padding: 22px 24px;
  font-family: inherit;
}
body .mmj-otp-title {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--hub-deepest, #252A36);
}
body .mmj-otp ol {
  margin: 0;
  padding: 0 0 0 20px !important;   /* !important: Duda resets list padding */
  font-size: 15px;
  line-height: 1.9;
  color: #252A36;
}
body .mmj-otp a,
body .mmj-otp a:hover {
  color: #252A36;
  text-decoration: none;
}
body .mmj-otp a {
  border-bottom: 1px solid rgba(37, 42, 54, 0.35);
}
body .mmj-otp a:hover {
  border-bottom-color: #252A36;
}


/* --------------------------------------------------------------------------
   5. TINTED SECTIONS
   Add CSS class "mmj-wash" to a Duda section (… > Add CSS Class Name).
   Sections alternate white and this 25% tint of the hub colour.
   -------------------------------------------------------------------------- */
body .mmj-wash {
  background-color: var(--hub-wash, #FFFFFF) !important;  /* !important: Duda sets section backgrounds itself */
}
/* Stronger tint for the "Keep going" section (section 9 on the page):
   add CSS class "mmj-light" to that Duda section instead of mmj-wash. */
body .mmj-light {
  background-color: var(--hub-light, #FFFFFF) !important;
}


/* --------------------------------------------------------------------------
   6. COMPARISON TABLE (section 3)
   Duda Table widget with CSS class "mmj-table". Rotimi edits the content
   in Duda's Table Content panel; this only handles the look.
   Duda's structure: .mmj-table > .dmTable > .table-wrapper > table
   The wrapper already scrolls sideways; min-width keeps columns readable
   on mobile instead of squashing them.
   !important throughout: the widget's own design settings are applied
   with stronger selectors than ours.
   -------------------------------------------------------------------------- */
body .mmj-table .table-wrapper {
  background: #FFFFFF;
  border: 1px solid #E4E2E4;
  border-radius: 12px;
  overflow-x: auto;
}
body .mmj-table table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-family: inherit;
  font-size: 15px;
  line-height: 1.5;
}
body .mmj-table tr {
  background: #FFFFFF !important;   /* removes Duda's grey zebra stripes */
}
body .mmj-table tr:first-child {
  background: var(--hub-light, #E4E2E4) !important;  /* fills the gaps between header cells */
}
body .mmj-table th {
  text-align: left;
  background: var(--hub-light, #E4E2E4) !important;  /* header row in the hub's Light tone */
  color: #252A36 !important;
  font-size: 13px !important;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 12px 16px !important;
  border: 0 !important;
}
body .mmj-table td {
  background: transparent !important;
  color: #6B6F7B !important;        /* muted body text */
  font-size: 14.5px !important;
  font-weight: 400 !important;      /* theme is 300 */
  padding: 14px 16px !important;
  border: 0 !important;
  border-top: 1px solid #E4E2E4 !important;
  vertical-align: top;
}
body .mmj-table td:first-child {  /* account type column */
  color: #252A36 !important;
  font-weight: 700 !important;
}


/* --------------------------------------------------------------------------
   7. SCENARIO CARDS (section 4, "Which type is right for me?")
   Add CSS class "mmj-card" to each Duda box (group) in the 2 x 2 grid.
   Inside each: an H3 text block and a paragraph, both native Duda so
   Rotimi can edit them. The "specific goal" card also carries a link to
   the hub's calculator.
   Top border in the hub's Base colour gives each card the hub identity.
   -------------------------------------------------------------------------- */
body .mmj-card {
  background: #FFFFFF;
  border: 1px solid #E4E2E4;
  border-top: 4px solid var(--hub-base, #E4E2E4);
  border-radius: 12px;
  padding: 22px 24px !important;    /* !important: Duda sets box padding itself */
  box-sizing: border-box;
}
body .mmj-wash .mmj-card {          /* on a tinted section the grey edge isn't needed */
  border-color: transparent;
  border-top-color: var(--hub-base, #E4E2E4);
}
body .mmj-card h3 {
  margin: 0 0 8px;
}
body .mmj-card p {
  margin: 0;
}
body .mmj-card .dmNewParagraph p,
body .mmj-card .dmNewParagraph p > span {  /* smaller, muted card text */
  font-size: 15px !important;
  color: #6B6F7B !important;
}
/* !important: Duda's theme link style (red, underlined) otherwise wins */
body .mmj-card a,
body .mmj-card a:visited {
  color: var(--hub-deep, #252A36) !important;   /* Deep is the link colour on white */
  font-weight: 700;
  text-decoration: none !important;
}
body .mmj-card a:hover {
  color: var(--hub-deepest, #252A36) !important;
  text-decoration: underline !important;
}


/* --------------------------------------------------------------------------
   8. PROS AND CONS PANELS (section 5)
   Two Duda boxes side by side, classes:
     left:  "mmj-pc mmj-pc-pros"      right: "mmj-pc mmj-pc-cons"
   Inside each: an H3 text block ("Pros" / "Cons") and a text block with a
   bulleted list (Duda's list button, not the List widget). Rotimi edits
   the list text as normal.
   The H3 becomes a full-width Deepest bar; bullets become tick / cross
   icon squares in Deepest.
   !important throughout: Duda sets box padding, widget widths, heading
   colour and its own custom bullet (li::before "•" with a -24px indent).
   -------------------------------------------------------------------------- */
body .mmj-pc {
  background: #FFFFFF;
  border-radius: 12px;
  overflow: hidden;                 /* clips the header bar to the rounded corners */
  padding: 0 !important;
  gap: 0 !important;
}
body .mmj-pc > .widget-wrapper {    /* let the header bar and list run full width */
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}
body .mmj-pc h3 {
  margin: 0 !important;
  padding: 14px 20px !important;
  background: var(--hub-deepest, #252A36);
  font-size: 17px !important;
  line-height: 1.3;
}
body .mmj-pc h3,
body .mmj-pc h3 * {
  color: #FFFFFF !important;
}
body .mmj-pc .dmNewParagraph h3,
body .mmj-pc .dmNewParagraph h3 > span {  /* beats section 0's 19px */
  font-size: 17px !important;
}
body .mmj-pc .dmNewParagraph li {
  font-size: 15px !important;
}
body .mmj-pc ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 12px 20px 18px !important;
}
body .mmj-pc li {
  display: flex !important;
  gap: 12px;
  align-items: flex-start;
  padding: 8px 0 !important;
  margin: 0 !important;
  font-size: 15px;
  line-height: 1.5;
}
body .mmj-pc li,
body .mmj-pc li * {
  text-indent: 0 !important;        /* cancels Duda's hanging-bullet indent */
}
body .mmj-pc li > * {
  margin-left: 0 !important;
}
body .mmj-pc li::before {           /* replaces Duda's bullet with an icon square */
  content: "" !important;
  flex: none;
  position: static !important;
  width: 26px;
  height: 26px;
  margin: 0 !important;
  border-radius: 5px;
  background-color: var(--hub-deepest, #252A36);
  background-position: center;
  background-size: 16px;
  background-repeat: no-repeat;
}
body .mmj-pc-pros li::before {      /* white tick */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
}
body .mmj-pc-cons li::before {      /* white cross */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
}


/* --------------------------------------------------------------------------
   9. DARK BAND + STAT TILE (section 7, "Is my money safe?")
   Add CSS class "mmj-band" to the Duda section: full-width Deepest
   background, white text. Used for the trust / safety message.
   Inside it, a Duda box with class "mmj-stat" holds one text block with
   two lines: the figure (first line, big) and its label (second line,
   small). Saving: "£XX,XXX" until Rotimi confirms the FSCS figure.
   !important: Duda sets section backgrounds, text colours and box sizing.
   -------------------------------------------------------------------------- */
body .mmj-band {
  background-color: var(--hub-deepest, #252A36) !important;
}
body .mmj-band h1, body .mmj-band h1 *,
body .mmj-band h2, body .mmj-band h2 *,
body .mmj-band h3, body .mmj-band h3 * {
  color: #FFFFFF !important;
}
body .mmj-band p, body .mmj-band p *,
body .mmj-band li, body .mmj-band li * {
  color: rgba(255, 255, 255, 0.88) !important;   /* body text slightly softer than headings */
}
body .mmj-band a, body .mmj-band a * {
  color: #FFFFFF !important;
  text-decoration: underline !important;
}
body .mmj-stat {                    /* shrink to fit its text, not full column width */
  flex: 0 0 auto !important;
  align-self: flex-start !important;
  width: auto !important;
  max-width: 100%;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 14px 18px !important;
  margin-top: 8px;
}
body .mmj-stat > .widget-wrapper {
  width: auto !important;
  margin: 0 !important;
}
body .mmj-stat p {
  margin: 0 !important;
}
body .mmj-stat p:first-child,
body .mmj-stat p:first-child * {    /* the figure */
  font-size: 28px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  color: #FFFFFF !important;
}
body .mmj-stat p:last-child,
body .mmj-stat p:last-child * {     /* the label */
  font-size: 13px !important;
  line-height: 1.4 !important;
}


/* --------------------------------------------------------------------------
   10. FAQ ACCORDION (section 8)
   Duda Accordion widget with CSS class "mmj-faq", in a section with the
   anchor "faq" (the hero's "Read the FAQs" button jumps here).
   Questions become Deepest bars with white text and a white chevron;
   answers sit on white below. Answers are in the page HTML even when
   closed, so search engines can read them.
   Duda's accordion uses auto-generated class names that can change, so
   these rules target its structure instead:
     ul > li > [question row] + [answer panel]
   !important throughout: the widget's own styles are applied inline /
   with stronger selectors.
   -------------------------------------------------------------------------- */
body .mmj-faq ul {
  display: flex !important;
  flex-direction: column;
  gap: 10px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
body .mmj-faq li {
  background: #FFFFFF !important;
  border: 0 !important;
  border-radius: 10px !important;
  overflow: hidden !important;      /* rounds the question bar's corners */
  margin: 0 !important;
}
body .mmj-faq li > div:first-child {                /* question row */
  background: var(--hub-deepest, #252A36) !important;
  border: 0 !important;
  padding: 16px 20px !important;
  align-items: center;
  cursor: pointer;
}
body .mmj-faq li > div:first-child h3,
body .mmj-faq li > div:first-child h3 * {           /* question text */
  color: #FFFFFF !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  margin: 0 !important;
}
body .mmj-faq li > div:first-child > div:last-child {  /* chevron box: drop Duda's black square */
  background: transparent !important;
  border: 0 !important;
}
body .mmj-faq li > div:first-child svg,
body .mmj-faq li > div:first-child svg * {          /* white chevron */
  fill: #FFFFFF !important;
  color: #FFFFFF !important;
}
body .mmj-faq li > div:last-child,
body .mmj-faq li > div:last-child * {               /* answer panel */
  background: transparent !important;
  color: #252A36 !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
}


/* --------------------------------------------------------------------------
   11. REVIEW BLOCK (last section, above the newsletter)
   Duda section with classes "mmj-wash mmj-review". One text block:
     line 1  Page last reviewed: [date]      (label bold in Duda)
     line 2  Written by: Rotimi Merriman-Johnson  (link to /about)
     line 3+ small grey note (e.g. the no-commission line, Rotimi's wording)
   Links here are dark and underlined, not the site's red.
   -------------------------------------------------------------------------- */
body .mmj-review .dmNewParagraph p {
  margin: 0 0 8px !important;
}
body .mmj-review .dmNewParagraph p:last-child {
  margin-bottom: 0 !important;
}
body .mmj-review a,
body .mmj-review a * {
  color: #252A36 !important;
  text-decoration: underline !important;
}
body .mmj-review a:hover {
  color: #000000 !important;
}
body .mmj-review .dmNewParagraph p:nth-child(n+3),
body .mmj-review .dmNewParagraph p:nth-child(n+3) > span {   /* the small note */
  font-size: 13.5px !important;
  color: #6B6F7B !important;
}
body .mmj-review .dmNewParagraph p:nth-child(3) {
  margin-top: 12px !important;
}