/*
Theme Name: Canada Slot Guide
Description: Theme for Canada Slot Guide (CA / en-CA). Canadian palette - boreal navy ink, maple red for action, prairie wheat gold for emphasis and a glacier blue accent - on a birch off-white page. Allowed blocks only: headings, text, tables, lists, pros/cons, full-width image, author quote.
Version: 1.0.0
Author: WP-generator
Text Domain: wpgen
*/

/* Nunito Sans, variable, self-hosted. Two files cover every weight from 300 to 800. */
@font-face {
  font-family: "Nunito Sans";
  src: url("assets/fonts/nunito-var.woff2") format("woff2-variations"),
       url("assets/fonts/nunito-var.woff2") format("woff2");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Nunito Sans";
  src: url("assets/fonts/nunito-var-italic.woff2") format("woff2-variations"),
       url("assets/fonts/nunito-var-italic.woff2") format("woff2");
  font-weight: 300 800;
  font-style: italic;
  font-display: swap;
}

:root {
  /* Canadian palette with fixed jobs: navy ink = structure, maple red = action
     and links, wheat gold = emphasis, glacier blue = the one cold accent.
     They never swap roles. */
  --ink: #101F33;
  --ink-2: #172C48;
  --ink-3: #21405F;
  --hero: linear-gradient(148deg, #1D3A5C 0%, #142744 52%, #0B1626 100%);
  --gold: #E2A32B;
  --gold-deep: #A8761A;
  --action: #C8102E;
  --action-strong: #9A0B23;
  --glacier: #2E7FA6;

  --font: "Nunito Sans", "Avenir Next", "Segoe UI", system-ui, -apple-system, Helvetica, Arial, sans-serif;
  --text: #1A2430;
  --muted: #5F6C7B;
  --line: #DCE1E8;
  --line-soft: #EDF1F5;
  --card: #ffffff;
  --page: #F6F4F0;
  --tone: #FAF8F5;
  --pos: #E8F2EC;
  --pos-line: #1E7A4C;
  --neg: #FBEBEC;
  --neg-line: #C8102E;

  --radius: 14px;
  --radius-lg: 22px;
  --width: 1180px;

  /* Icon for the note box: the site mascot.
     The path MUST be absolute: the browser resolves url() inside a custom
     property relative to the file where the property is USED, not declared. */
  --note-icon: url('/wp-content/themes/wpgen-CA/assets/mascot.svg');
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--page);
  color: var(--text);
  font: 400 18px/1.66 var(--font);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-weight: 800; letter-spacing: -.35px; }

img { max-width: 100%; height: auto; }
a { color: var(--action); }

.csg-container { max-width: var(--width); margin: 0 auto; padding: 0 22px; }

/* ---------------- header ---------------- */

.csg-header { background: var(--ink); }

/* Logo sits on the left and the nav below it: a centred wordmark is what every
   competitor does, and the brand should not look borrowed. */
.csg-header-rule {
  position: relative;
  display: flex;
  align-items: center;
  padding: 15px 0;
}

.csg-burger {
  display: none;
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  padding: 11px 9px;
  background: none;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 8px;
  cursor: pointer;
}
.csg-burger span {
  display: block;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: transform .22s ease, opacity .18s ease;
}
.csg-burger span + span { margin-top: 5px; }
.csg-burger:hover { border-color: var(--gold); }
.csg-burger:hover span { background: var(--gold); }
/* open state: the three bars fold into a cross */
.csg-burger.csg-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.csg-burger.csg-open span:nth-child(2) { opacity: 0; }
.csg-burger.csg-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.csg-brand { display: flex; align-items: center; gap: 13px; text-decoration: none; }
.csg-brand-icon {
  width: 48px; height: 48px; flex: 0 0 48px;
  border-radius: 12px;
  background: #fff;
  border: 2px solid var(--gold);
  padding: 3px;
  display: flex; align-items: center; justify-content: center;
}
.csg-brand-icon img { width: 100%; height: 100%; object-fit: contain; display: block; }

.csg-brand-txt { display: block; line-height: 1; }
.csg-brand-txt .csg-brand-l1 {
  display: block; color: #9FBAAA; font-size: 12px; font-weight: 700;
  letter-spacing: 2.6px; margin-right: -2.6px; text-transform: uppercase;
  margin-bottom: 5px;
}
/* Wordmark: "Canada" solid white, "Slot Guide" light gold, one line, no italics. */
.csg-brand-txt .csg-brand-l2 { display: block; font-size: 26px; font-weight: 800; letter-spacing: -.6px; }
.csg-brand-txt .csg-brand-l2 b { color: #fff; font-weight: 500; }
.csg-brand-txt .csg-brand-l2 i { color: var(--gold); font-weight: 800; font-style: normal; }

/* The nav carries no accent stripe of its own: the flag already runs along the
   bottom of the hero, and a second one here made the header read as two bands. */
.csg-menu {
  border-top: 1px solid rgba(255, 255, 255, .09);
}
.csg-menu ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 2px; }
.csg-menu a {
  display: block; color: #CFE0D4; text-decoration: none; font-size: 15px; font-weight: 600;
  padding: 13px 14px;
}
.csg-menu a:hover { color: #fff; }
.csg-menu .current-menu-item > a { color: var(--gold); }

/* Dropdown: opens on click (assets/nav.js), never on hover. */
.csg-menu li { position: relative; }

/* Metrics copied from `.csg-menu a`: otherwise the item with a caret sits lower
   than its neighbours and the whole row shifts. */
.csg-menu-button {
  display: flex; align-items: center; gap: 7px;
  background: none; border: 0; cursor: pointer;
  color: #CFE0D4; font: 600 15px/1.66 var(--font);
  padding: 13px 14px;
}
.csg-menu-button:hover, .menu-item-has-children.csg-open > .csg-menu-button { color: #fff; }

.csg-menu-caret {
  width: 7px; height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .18s ease;
}
/* The caret belongs to its own toggle: a descendant selector would flip every
   caret inside an open dropdown as well. */
.menu-item-has-children.csg-open > .csg-menu-button .csg-menu-caret { transform: rotate(-135deg) translate(-2px, -2px); }

.csg-menu .sub-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 30;
  min-width: 236px;
  margin: 0;
  padding: 7px 0;
  list-style: none;
  background: var(--ink-2);
  border: 1px solid var(--ink-3);
  border-radius: 0 0 10px 10px;
  box-shadow: 0 16px 32px rgba(0, 0, 0, .4);
}
.menu-item-has-children.csg-open > .sub-menu { display: block; }

.csg-menu .sub-menu a {
  padding: 10px 16px;
  font-size: 14.5px;
  font-weight: 500;
  white-space: nowrap;
}
.csg-menu .sub-menu a:hover { background: var(--ink-3); color: var(--gold); }

/* ---------------- menu on narrow screens ---------------- */

@media (max-width: 900px) {
  .csg-burger { display: block; }

  /* The panel is opened by the button; closed, it takes up no space at all. */
  .csg-menu {
    display: none;
    max-height: calc(100vh - 86px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .csg-menu.csg-open { display: block; animation: csg-expand .22s ease-out; }

  .csg-menu ul { display: block; }
  .csg-menu li { position: static; border-bottom: 1px solid rgba(255, 255, 255, .07); }
  .csg-menu li:last-child { border-bottom: 0; }
  .csg-menu a, .csg-menu .csg-menu-button { display: block; width: 100%; padding: 14px 4px; font-size: 16px; text-align: left; }
  .csg-menu .csg-menu-button { display: flex; justify-content: space-between; }
  .csg-menu .current-menu-item > a { color: var(--gold); }

  /* Inside the panel the submenu expands in place, without absolute positioning. */
  .csg-menu .sub-menu {
    position: static;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: rgba(0, 0, 0, .25);
    margin: 0 -22px;
    padding: 4px 22px 8px;
  }
  .csg-menu .sub-menu a { padding: 11px 12px; font-size: 15px; }

  /* While the menu is open the page underneath does not scroll. */
  body.csg-menu-locked { overflow: hidden; }
}

@keyframes csg-expand {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

/* ---------------- hero ---------------- */

.csg-hero { position: relative; overflow: hidden; background: var(--hero); color: #fff; padding: 34px 0 44px; }
.csg-hero .csg-container { position: relative; z-index: 2; }

/* Mascot on the right of the first screen.
   Three rules keep it from reading as "someone peeking round a corner": it sits
   entirely inside the dark area, fades out downwards through a mask, and has
   almost no contrast. This is background, not illustration. */
.csg-hero::before {
  content: "";
  position: absolute;
  right: 40px;
  bottom: 26px;
  width: 236px;
  height: 236px;
  background: url("assets/mascot.svg") no-repeat center / contain;
  opacity: .09;
  transform: rotate(4deg);
  -webkit-mask-image: linear-gradient(to bottom, #000 58%, rgba(0, 0, 0, .25) 90%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 58%, rgba(0, 0, 0, .25) 90%, transparent 100%);
  z-index: 1;
  pointer-events: none;
  animation: csg-mascot-enter 1s ease-out both;
}
/* On an author page the portrait stands on the right: two faces side by side is one too many. */
.csg-hero-author::before { display: none; }

@keyframes csg-mascot-enter {
  from { opacity: 0; transform: translate(18px, 10px) rotate(12deg); }
  to   { opacity: .09; transform: rotate(4deg); }
}

/* Flat two-tone baseline instead of a diagonal cut: a straight edge is easier
   to read and does not eat 60px of vertical space on a phone. */
.csg-hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 7px;
  background: linear-gradient(90deg, var(--action) 0 38%, var(--gold) 38% 72%, var(--glacier) 72%);
  pointer-events: none;
}

.csg-hero .csg-crumbs { font-size: 14px; color: #8FA89A; margin-bottom: 18px; }
.csg-hero .csg-crumbs a { color: #8FA89A; text-decoration: none; }
.csg-hero .csg-crumbs a:hover { color: var(--gold); }

.csg-hero-flat .csg-hero-grid { grid-template-columns: 1fr; }
.csg-hero-flat h1 { max-width: 22ch; }
.csg-hero-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 30px; align-items: center; }
.csg-hero h1 {
  font-size: clamp(30px, 4.5vw, 46px);
  line-height: 1.08; margin: 0 0 16px; font-weight: 800; letter-spacing: -1px;
}
.csg-hero p.csg-lead { max-width: 64ch; font-size: clamp(16px, 1.35vw, 19px); font-weight: 400; color: #DDEBE0; margin: 0 0 22px; }
.csg-hero p.csg-lead strong { color: #fff; font-weight: 700; }
.csg-hero-image { border-radius: var(--radius-lg); overflow: hidden; }

.csg-shortcuts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 26px; }
.csg-shortcuts-item {
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .13);
  border-radius: var(--radius); padding: 16px 12px; text-align: center;
  color: #fff; text-decoration: none; font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .5px;
}
.csg-shortcuts-item:hover { background: rgba(255, 255, 255, .11); border-color: var(--gold); }
.csg-shortcuts-item .csg-shortcuts-icon { display: block; font-size: 24px; margin-bottom: 8px; }

/* ---------------- author blocks ---------------- */

.csg-byline { display: flex; flex-wrap: wrap; gap: 26px; align-items: center; margin-top: 22px; }
.csg-byline .csg-byline-person { display: flex; align-items: center; gap: 11px; }
.csg-byline img, .csg-author img {
  border-radius: 50%; background: var(--ink-3); object-fit: cover; flex: 0 0 auto;
}
.csg-byline img { width: 42px; height: 42px; border: 2px solid rgba(239, 180, 26, .45); }
.csg-author img { width: 74px; height: 74px; }
.csg-byline .csg-byline-meta { font-size: 13.5px; line-height: 1.4; color: #E6F0E8; }
.csg-byline .csg-byline-meta .csg-byline-role { color: #8FA89A; }
.csg-byline .csg-byline-meta a { color: #fff; font-weight: 700; text-decoration: none; }
.csg-byline .csg-byline-meta a:hover { color: var(--gold); }

.csg-author {
  position: relative;
  overflow: hidden;
  background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--gold);
  border-radius: var(--radius);
  padding: 24px; display: flex; gap: 18px; align-items: flex-start; margin: 34px 0;
}
/* The same mascot as in the hero, only fainter: the author card stops being a
   blank rectangle and rhymes with the first screen. */
.csg-author::after {
  content: "";
  position: absolute;
  right: -18px;
  bottom: -26px;
  width: 168px;
  height: 168px;
  background: url("assets/mascot.svg") no-repeat center / contain;
  opacity: .06;
  transform: rotate(6deg);
  -webkit-mask-image: linear-gradient(to bottom, #000 50%, transparent 92%);
          mask-image: linear-gradient(to bottom, #000 50%, transparent 92%);
  pointer-events: none;
}
@media (max-width: 640px) {
  /* In a narrow card the mascot eats the space the text needs. */
  .csg-author::after { display: none; }
}
.csg-author > * { position: relative; z-index: 1; }
.csg-author .csg-author-body { flex: 1; }
.csg-author h2 { margin: 0 0 6px; font-size: 20px; padding-left: 0; border-left: 0; }
.csg-author .csg-byline-role { color: var(--muted); font-size: 14px; margin: 0 0 10px; }
.csg-author p { margin: 0 0 10px; }
.csg-author .csg-author-link { font-weight: 700; text-decoration: none; }
.csg-author .csg-author-link:hover { text-decoration: underline; }

/* Pull quote: gold rule on top, not a left border — the quote reads as a
   separate voice in the text rather than as an indented aside.
   Two selectors on purpose: .csg-quote is what wpgen_author_quote() prints,
   while a quote written in the page text arrives from the block converter as a
   plain blockquote.wp-block-quote and has to get the same treatment. */
.csg-quote,
.csg-text blockquote {
  border: 0;
  border-top: 3px solid var(--gold);
  background: var(--tone);
  border-radius: 0 0 var(--radius) var(--radius);
  padding: 20px 24px; margin: 30px 0; font-size: 19px; font-style: italic; color: #172B3D;
}
.csg-text blockquote p { margin: 0; }
.csg-text blockquote p + p { margin-top: 12px; }
.csg-quote footer, .csg-text blockquote footer, .csg-text blockquote cite {
  display: flex; align-items: center; gap: 12px;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line);
  font-size: 14px; font-style: normal; color: var(--muted);
}

/* The author signs every quote: a small round portrait plus name and role, so a
   pull quote never reads as an anonymous voice. */
.csg-quote-photo {
  width: 48px; height: 48px; flex: 0 0 48px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--card);
  box-shadow: 0 0 0 1px var(--line);
}
.csg-quote-who { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.csg-quote-who b { color: var(--text); font-weight: 700; font-size: 14.5px; }
.csg-quote-who span { font-size: 13px; color: var(--muted); }

@media (max-width: 560px) {
  .csg-quote-photo { width: 40px; height: 40px; flex-basis: 40px; }
  .csg-quote-who span { font-size: 12.5px; }
}

/* ---------------- content ---------------- */

.csg-body { padding: 30px 0 10px; }
.csg-panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px 32px; }

/* H2 with a gold bar to its left instead of an underline: the section starts at
   a visible edge, which also survives being read at a glance on a phone. */
.csg-text h2 {
  font-size: 27px; margin: 38px 0 14px; letter-spacing: -.5px;
  padding-left: 16px; border-left: 5px solid var(--gold);
  line-height: 1.22;
}
.csg-text h3 { font-size: 21px; margin: 28px 0 10px; }
.csg-text h2:first-child, .csg-text h3:first-child { margin-top: 0; }
.csg-text p { margin: 0 0 17px; }
.csg-text > *:first-child { margin-top: 0; }
.csg-text > *:last-child { margin-bottom: 0; }
.csg-text figure.wp-block-table { margin: 0 0 24px; overflow-x: auto; }
.csg-text figure.wp-block-table table { margin: 0; }
.csg-text ul.wp-block-list, .csg-text ol.wp-block-list { margin: 0 0 18px; padding-left: 22px; }
.csg-text ul, .csg-text ol { margin: 0 0 18px; padding-left: 22px; }
.csg-text li { margin-bottom: 8px; }
.csg-text li::marker { color: var(--gold-deep); font-weight: 700; }

/* Table with an ink header row: the first row is a label strip, not another
   shaded cell, so a wide comparison stays readable while scrolling sideways. */
.csg-text table { width: 100%; border-collapse: collapse; margin: 0 0 24px; font-size: 16px; }
.csg-text th, .csg-text td { border: 1px solid var(--line); padding: 12px 14px; text-align: left; }
.csg-text th { background: var(--ink); color: #fff; font-weight: 700; border-color: var(--ink); }
.csg-text tr:nth-child(even) td { background: var(--tone); }

/* Images in the text share the radius of the cards and tables:
   .csg-figure is the classic editor, .wp-block-image is Gutenberg. */
.csg-text figure.csg-figure,
.csg-text figure.wp-block-image { margin: 30px 0; }
.csg-text figure.csg-figure img,
.csg-text figure.wp-block-image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  box-shadow: 0 8px 20px rgba(23, 20, 15, .09);
  transition: box-shadow .25s ease, transform .25s ease;
}
.csg-text figure.csg-figure img:hover,
.csg-text figure.wp-block-image img:hover {
  box-shadow: 0 14px 30px rgba(23, 20, 15, .17);
  transform: translateY(-2px);
}
.csg-balance { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 26px 0; }
.csg-balance > div { border-radius: var(--radius); padding: 18px 20px; }
.csg-balance .csg-pro { background: var(--pos); border: 1px solid var(--pos-line); }
.csg-balance .csg-con { background: var(--neg); border: 1px solid var(--neg-line); }
.csg-balance h3 { margin: 0 0 10px; font-size: 17px; }
.csg-balance .csg-pro h3 { color: #1E7A4C; }
.csg-balance .csg-con h3 { color: #C8102E; }
.csg-balance ul { margin: 0; padding-left: 20px; }

.csg-faq h3 { font-size: 19px; margin: 22px 0 8px; }
.csg-faq p { margin: 0 0 14px; }

/* Accordion: H3 + paragraph in the content are turned into a clickable block by the script. */
.csg-faq-item {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  margin-bottom: 10px;
  overflow: hidden;
}
.csg-faq-item.csg-open { border-color: var(--gold); box-shadow: 0 2px 12px rgba(23, 20, 15, .07); }

.csg-faq-button {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  background: none;
  border: 0;
  padding: 16px 18px;
  font: 800 17px/1.4 var(--font);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.csg-faq-button:hover { background: var(--tone); }
.csg-faq-button-txt { flex: 1; }

.csg-faq-icon {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  position: relative;
  border-radius: 7px;
  background: var(--line-soft);
  transition: transform .18s ease, background .18s ease;
}
.csg-faq-icon::before, .csg-faq-icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 11px;
  height: 2px;
  margin: -1px 0 0 -5.5px;
  background: var(--ink);
  border-radius: 2px;
}
.csg-faq-icon::after { transform: rotate(90deg); transition: opacity .18s ease; }
.csg-faq-item.csg-open .csg-faq-icon { background: var(--gold); }
.csg-faq-item.csg-open .csg-faq-icon::after { opacity: 0; }

.csg-faq-answer { display: none; padding: 0 18px 16px; }
.csg-faq-item.csg-open .csg-faq-answer { display: block; }
.csg-faq-answer p { margin: 0 0 10px; }
.csg-faq-answer p:last-child { margin-bottom: 0; }

/* ---------------- footer ---------------- */

.csg-footer { background: var(--ink); color: #BFD3C6; margin-top: 44px; padding: 36px 0 26px; font-size: 15px; }
/* Four columns: brand, sections, editorial and legal, outside help. The header
   menu is deliberately short, so the footer is what gives full access. */
.csg-footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 30px; }
.csg-footer h4 { color: var(--gold); font-size: 14px; margin: 0 0 13px; text-transform: uppercase; letter-spacing: 1px; }
.csg-footer ul { list-style: none; margin: 0; padding: 0; }
.csg-footer li { margin-bottom: 8px; }
.csg-footer a { color: #BFD3C6; text-decoration: none; }
.csg-footer a:hover { color: var(--gold); }
.csg-footer-note { border-top: 1px solid var(--ink-3); margin-top: 28px; padding-top: 18px; font-size: 13px; color: #7E958A; }
.csg-age {
  display: inline-block; border: 2px solid var(--gold); color: var(--gold); border-radius: 50%;
  width: 36px; height: 36px; line-height: 32px; text-align: center;
  font-weight: 800; font-size: 12px; margin-right: 10px; vertical-align: middle;
}

/* ---------------- responsive ---------------- */

@media (max-width: 980px) {
  .csg-hero { padding: 24px 0 34px; }
  /* On a tablet the mascot shrinks: at full size it takes over the first screen. */
  .csg-hero::before { width: 168px; height: 168px; right: 16px; bottom: 20px; opacity: .08; }
  .csg-hero-grid { grid-template-columns: 1fr; gap: 22px; }
  .csg-hero-image { order: 2; max-width: 440px; margin: 0 auto; width: 100%; }
  .csg-shortcuts { grid-template-columns: repeat(2, 1fr); margin-top: 22px; }
  .csg-shortcuts-item { padding: 14px 10px; font-size: 12px; }
  .csg-footer-grid { grid-template-columns: 1fr 1fr; }
  .csg-hero-flat h1 { max-width: none; }
}

@media (max-width: 640px) {
  body { font-size: 17px; }
  .csg-container { padding: 0 16px; }

  .csg-hero-image { max-width: 340px; }
  .csg-hero p.csg-lead { font-size: 16px; }
  /* On a phone the text takes the full width: a decorative mascot only gets in the way. */
  .csg-hero::before { display: none; }
  .csg-byline { gap: 14px; margin-top: 18px; }
  .csg-byline .csg-byline-person { flex: 1 1 100%; }

  .csg-body { padding: 22px 0 6px; }
  .csg-panel { padding: 20px 16px; }
  .csg-text h2 { font-size: 22px; margin: 28px 0 10px; padding-left: 12px; border-left-width: 4px; }
  .csg-text h3 { font-size: 19px; }
  .csg-balance { grid-template-columns: 1fr; }
  .csg-author { flex-direction: column; }
  .csg-footer-grid { grid-template-columns: 1fr; }
  .csg-text table { display: block; overflow-x: auto; }
}

/* ---------------- author profile pages ---------------- */

.csg-profile {
  display: flex; gap: 24px; align-items: flex-start;
  background: var(--tone); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px 26px; margin: 0 0 28px;
}
.csg-profile img {
  width: 160px; height: 160px; border-radius: 50%;
  object-fit: cover; background: var(--ink-3); flex: 0 0 auto;
  border: 4px solid #fff; box-shadow: 0 6px 18px rgba(23, 20, 15, .12);
}
.csg-profile .csg-author-body { flex: 1; min-width: 0; }
.csg-profile .csg-byline-role { font-size: 16px; font-weight: 600; color: var(--text); margin: 0 0 14px; }
.csg-profile ul.csg-profile-info { list-style: none; margin: 0; padding: 0; font-size: 15px; }
.csg-profile ul.csg-profile-info li {
  padding: 8px 0; border-top: 1px solid var(--line); margin: 0;
  display: flex; gap: 10px; flex-wrap: wrap;
}
.csg-profile ul.csg-profile-info li:first-child { border-top: 0; padding-top: 0; }
.csg-profile ul.csg-profile-info strong { flex: 0 0 210px; color: var(--muted); font-weight: 600; }

.csg-profile.csg-profile-mini { margin: 0 0 18px; padding: 20px 22px; }
.csg-profile.csg-profile-mini img { width: 120px; height: 120px; }
.csg-profile.csg-profile-mini h3 { margin: 0 0 4px; font-size: 20px; }
.csg-profile.csg-profile-mini h3 a { text-decoration: none; }
.csg-profile.csg-profile-mini .csg-byline-role { font-size: 14px; color: var(--muted); font-weight: 600; margin: 0 0 10px; }
.csg-profile.csg-profile-mini p { margin: 0 0 10px; }
.csg-profile.csg-profile-mini .csg-author-link { font-weight: 700; text-decoration: none; }

/* ---------------- self-assessment test ---------------- */

.csg-selftest { margin: 26px 0 32px; }
.csg-selftest-app {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--tone); padding: 26px 28px;
}
.csg-selftest-head h3 { margin: 0 0 4px; font-size: 20px; }
.csg-selftest-progress { margin: 0 0 18px; font-size: 14px; color: var(--muted); }

/* The separator is drawn with ::before rather than border-top: a legend with
   display:flex stops "breaking" the fieldset border and the rule runs through the text. */
.csg-selftest-question { border: 0; margin: 0; padding: 0 0 4px; }
.csg-selftest-question + .csg-selftest-question::before {
  content: ""; display: block; height: 1px; background: var(--line); margin: 18px 0;
}
.csg-selftest-question legend { display: flex; gap: 10px; padding: 0; margin-bottom: 12px; float: left; width: 100%; }
.csg-selftest-question .csg-selftest-options { clear: both; }
.csg-selftest-question legend .csg-selftest-num {
  flex: 0 0 26px; height: 26px; border-radius: 8px; background: var(--line-soft);
  color: var(--muted); font-size: 14px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.csg-selftest-question.csg-selftest-done legend .csg-selftest-num { background: var(--gold); color: var(--ink); }
.csg-selftest-question legend .csg-selftest-txt { font-weight: 600; }

.csg-selftest-question .csg-selftest-options { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.csg-selftest-question .csg-selftest-options input { position: absolute; opacity: 0; width: 0; height: 0; }
.csg-selftest-question .csg-selftest-options label {
  display: block; text-align: center; cursor: pointer; user-select: none;
  border: 1px solid var(--line); border-radius: 8px; background: #fff;
  padding: 10px 8px; font-size: 14px; line-height: 1.3;
}
.csg-selftest-question .csg-selftest-options label:hover { border-color: var(--action); }
.csg-selftest-question .csg-selftest-options input:checked + label {
  background: var(--action); border-color: var(--action); color: #fff; font-weight: 600;
}
.csg-selftest-question .csg-selftest-options input:focus-visible + label { outline: 2px solid var(--gold); outline-offset: 2px; }

.csg-selftest-submit, .csg-selftest-retake {
  margin-top: 20px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--action); color: #fff; font-family: inherit;
  font-size: 16px; font-weight: 800; padding: 13px 26px;
}
.csg-selftest-submit:hover:enabled, .csg-selftest-retake:hover { background: var(--action-strong); }
.csg-selftest-submit:disabled { background: #D3E0D6; color: #7E958A; cursor: not-allowed; }
.csg-selftest-note { margin: 12px 0 0; font-size: 13.5px; color: var(--muted); }

.csg-selftest-result { display: none; }
.csg-selftest-result.csg-selftest-visible { display: block; margin-top: 26px; padding-top: 24px; border-top: 2px solid var(--line); }
.csg-selftest-badge { display: flex; flex-direction: column; gap: 2px; padding: 14px 18px; border-radius: var(--radius); color: #fff; }
.csg-selftest-badge .csg-selftest-badge-title { font-size: 21px; font-weight: 800; }
.csg-selftest-badge .csg-selftest-badge-score { font-size: 14px; opacity: .92; }
.csg-selftest-badge.csg-n0 { background: #1E7A4C; }
.csg-selftest-badge.csg-n1 { background: #7CA33F; }
.csg-selftest-badge.csg-n2 { background: #D08A1E; }
.csg-selftest-badge.csg-n3 { background: var(--action); }

.csg-selftest-scale-wrap { margin: 18px 0 6px; }
.csg-selftest-scale { width: 100%; height: auto; display: block; }
.csg-selftest-scale .csg-selftest-g-score { font-family: var(--font); font-size: 21px; font-weight: 800; fill: var(--ink); }
.csg-selftest-scale .csg-selftest-g-band { font-family: var(--font); font-size: 13px; fill: #4B6055; }
.csg-selftest-scale .csg-selftest-g-axis { font-family: var(--font); font-size: 12.5px; fill: #7E958A; }

.csg-selftest-intro { margin: 6px 0 18px; }
.csg-selftest-parts { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 0 0 12px; }
.csg-selftest-part .csg-selftest-part-head { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; margin-bottom: 6px; }
.csg-selftest-part .csg-selftest-part-label { color: var(--muted); }
.csg-selftest-part .csg-selftest-part-value { font-weight: 700; }
.csg-selftest-part .csg-selftest-part-track { height: 12px; border-radius: 6px; background: var(--line-soft); overflow: hidden; }
.csg-selftest-part .csg-selftest-part-fill { height: 100%; border-radius: 6px; }
.csg-selftest-parts-note { font-size: 15px; color: var(--muted); margin: 0 0 20px; }
.csg-selftest-result h4 { font-size: 18px; margin: 0 0 10px; }
.csg-selftest-actions { margin: 0 0 18px; padding-left: 22px; }
.csg-selftest-actions li { margin-bottom: 8px; }
.csg-selftest-note { font-size: 14px; color: var(--muted); margin: 0; }

@media (max-width: 640px) {
  .csg-profile { flex-direction: column; padding: 18px 16px; }
  .csg-profile img { width: 120px; height: 120px; }
  .csg-profile ul.csg-profile-info li { display: block; }
  .csg-profile ul.csg-profile-info strong { display: block; flex: none; }

  .csg-selftest-app { padding: 18px 14px; }
  .csg-selftest-question .csg-selftest-options { grid-template-columns: 1fr 1fr; }
  .csg-selftest-submit, .csg-selftest-retake { width: 100%; }
  .csg-selftest-parts { grid-template-columns: 1fr; }
  /* The svg scales with its viewBox, so on a narrow screen the labels have to
     grow in user units, otherwise they become unreadable. */
  .csg-selftest-scale .csg-selftest-g-score { font-size: 30px; }
  .csg-selftest-scale .csg-selftest-g-band { font-size: 19px; }
  .csg-selftest-scale .csg-selftest-g-axis { font-size: 17px; }
  .csg-selftest-part .csg-selftest-part-head { display: block; }
  .csg-selftest-part .csg-selftest-part-value { display: block; margin-top: 2px; }
}

/* ---------- "Hoe wij testen": the site-wide method block ----------
   Three layout variants, chosen per site (config key: test_flow).
   The colours come from the variables, so the block always wears the palette
   of the domain it runs on instead of dragging a foreign one along.        */

.csg-method { margin: 32px 0 0; padding: 26px 0 0; border-top: 1px solid var(--line); }
.csg-method-title { font-size: 22px; margin: 0 0 6px; letter-spacing: -.4px; }
.csg-method-intro { color: var(--muted); font-size: 16px; margin: 0 0 22px; max-width: 78ch; }
.csg-method-more { margin: 18px 0 0; font-size: 15px; }
.csg-method-icon { width: 24px; height: 24px; display: block; }

/* --- "rail" variant: four steps on a shared line --- */

.csg-method-track .csg-method-steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
}
.csg-method-track .csg-method-step { position: relative; padding: 0 14px; text-align: center; margin: 0; }
.csg-method-track .csg-method-step::before {
  content: ""; position: absolute; top: 27px; left: 0; right: 50%;
  border-top: 2px solid var(--line);
}
.csg-method-track .csg-method-step::after {
  content: ""; position: absolute; top: 27px; left: 50%; right: 0;
  border-top: 2px solid var(--line);
}
.csg-method-track .csg-method-step:first-child::before,
.csg-method-track .csg-method-step:last-child::after { display: none; }
.csg-method-track .csg-method-disc {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center;
  width: 54px; height: 54px; border-radius: 16px;
  background: var(--ink); color: #fff;
}
/* White on gold misses the minimum contrast ratio, so that icon is dark. */
.csg-method-track .csg-step-timer .csg-method-disc { background: var(--gold); color: var(--ink); }
.csg-method-track .csg-method-num {
  position: absolute; right: -6px; bottom: -6px;
  width: 22px; height: 22px; border-radius: 7px;
  background: #fff; color: var(--ink);
  border: 2px solid var(--line);
  font-size: 12px; font-weight: 800; line-height: 18px; text-align: center;
}
.csg-method-track .csg-method-body { display: block; margin-top: 13px; }
.csg-method-track .csg-method-step-title { display: block; font-size: 16px; line-height: 1.3; }
.csg-method-track .csg-method-note { display: block; color: var(--muted); font-size: 14px; line-height: 1.45; margin-top: 4px; }
.csg-method-track .csg-method-detail { display: block; font-size: 14px; line-height: 1.5; margin-top: 8px; text-align: left; }

/* --- "tiles" variant: four dense tiles, no connecting line --- */

.csg-method-blocks .csg-method-steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
}
.csg-method-blocks .csg-method-step {
  position: relative; overflow: hidden; margin: 0;
  padding: 16px 16px 18px;
  background: var(--ink); color: #fff; border-radius: var(--radius);
}
.csg-method-blocks .csg-step-timer { background: linear-gradient(158deg, var(--ink-3) 0%, var(--ink) 70%); }
.csg-method-blocks .csg-method-disc { display: block; color: var(--gold); }
.csg-method-blocks .csg-method-num {
  position: absolute; right: 10px; top: 2px;
  font-size: 44px; font-weight: 800; line-height: 1;
  color: #fff; opacity: .12;
}
.csg-method-blocks .csg-method-body { display: block; margin-top: 12px; }
.csg-method-blocks .csg-method-step-title { display: block; font-size: 16px; line-height: 1.3; }
.csg-method-blocks .csg-method-note { display: block; color: #A9C2B4; font-size: 14px; line-height: 1.45; margin-top: 4px; }
.csg-method-blocks .csg-method-detail { display: block; color: #DDEBE0; font-size: 14px; line-height: 1.5; margin-top: 8px; }

/* --- "stopwatch" variant: one solid SVG, labels inside the drawing --- */

.csg-method-figure { margin: 0; }
.csg-method-svg { width: 100%; height: auto; display: block; }
.csg-method-svg-v { display: none; }

@media (max-width: 860px) {
  .csg-method-track .csg-method-steps, .csg-method-blocks .csg-method-steps { grid-template-columns: 1fr 1fr; }
  .csg-method-track .csg-method-step { padding-bottom: 20px; }
  .csg-method-track .csg-method-step:nth-child(2)::after,
  .csg-method-track .csg-method-step:nth-child(3)::before { display: none; }
}
@media (max-width: 560px) {
  .csg-method-track .csg-method-steps, .csg-method-blocks .csg-method-steps { grid-template-columns: 1fr; }
  .csg-method-track .csg-method-step { display: flex; gap: 14px; text-align: left; padding: 0 0 18px; }
  .csg-method-track .csg-method-step::before, .csg-method-track .csg-method-step::after { display: none; }
  .csg-method-track .csg-method-step:not(:last-child) .csg-method-disc::after {
    content: ""; position: absolute; left: 50%; top: 54px; height: 34px;
    border-left: 2px solid var(--line);
  }
  .csg-method-track .csg-method-disc { flex: 0 0 54px; }
  .csg-method-track .csg-method-body { margin-top: 2px; }
  .csg-method-svg-h { display: none; }
  .csg-method-svg-v { display: block; }
}

/* The "waar het misliep" box: a short log of what went wrong inside a review.
   The icon is the site mascot, set through --note-icon, because every domain
   has its own. No JS: this is a static block that must behave identically
   across dozens of domains. */
.csg-meta {
  position: relative;
  border: 1px solid var(--line);
  border-left: 4px solid var(--action);
  border-radius: var(--radius);
  background: var(--tone);
  padding: 16px 18px 14px 62px;
  margin: 24px 0;
}
.csg-meta::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 16px;
  width: 30px;
  height: 30px;
  background: var(--note-icon, none) center/contain no-repeat;
  opacity: .95;
}
.csg-meta h4 {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 800;
  color: var(--text);
}
.csg-meta p { margin: 0 0 10px; }
.csg-meta p:last-child { margin-bottom: 0; }

@media (max-width: 640px) {
  .csg-meta { padding: 14px 14px 12px 14px; }
  .csg-meta::before { position: static; display: block; margin-bottom: 8px; }
}

/* Index of child pages on a hub. Rendered by the theme, so the styles live
   here: the mechanism is shared, the contents differ per site. */
.csg-toc { margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--line); }
.csg-toc h2 { margin: 0 0 14px; }
.csg-toc ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 28px; }
.csg-toc li { line-height: 1.5; }
.csg-toc a { font-weight: 700; text-decoration: none; }
.csg-toc a:hover { text-decoration: underline; }
.csg-toc span { display: block; color: var(--muted); font-size: 15px; }
@media (max-width: 720px) { .csg-toc ul { grid-template-columns: 1fr; } }

/* Hub page that is nothing but a list of articles (wpgen_listing_hub) */
.csg-listing { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.csg-listing-item { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; display: flex; flex-direction: column; gap: 8px; }
.csg-listing-kicker { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--action); }
.csg-listing-title { font-size: 20px; font-weight: 800; line-height: 1.3; text-decoration: none; color: var(--text); }
.csg-listing-title:hover { color: var(--action); }
.csg-listing-txt { margin: 0; color: var(--muted); line-height: 1.55; }
.csg-listing-footer { margin-top: auto; padding-top: 10px; display: flex; gap: 16px; color: var(--muted); font-size: 14px; }
.csg-listing-empty { color: var(--muted); margin: 0; }
@media (max-width: 720px) { .csg-listing { grid-template-columns: 1fr; } }
/* On a listing hub the outer card is redundant: the article cards are the content. */
.csg-text:has(> .csg-listing), .csg-text:has(> .csg-listing-empty) { background: none; border: 0; padding: 0; }

/* ---------------- disclaimer under the byline ---------------- */

.csg-note {
  margin: 20px 0 0;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, .14);
  font-size: 13px;
  line-height: 1.55;
  color: #9FB6A8;
  max-width: 82ch;
}
.csg-note-age {
  display: inline-block;
  margin-right: 7px;
  padding: 1px 8px;
  border: 1px solid var(--gold);
  border-radius: 6px;
  color: var(--gold);
  font-weight: 800;
  font-size: 12px;
}

/* ---------------- portrait on the author page ---------------- */

.csg-hero-author .csg-container { position: relative; }
.csg-portrait {
  position: absolute; right: 0; top: 46px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.csg-portrait img {
  width: 190px; height: 190px; border-radius: 50%; object-fit: cover;
  border: 4px solid rgba(239, 180, 26, .4);
  box-shadow: 0 14px 34px rgba(10, 8, 6, .5);
}
.csg-portrait .csg-portrait-city { font-size: 13px; color: #8FA89A; letter-spacing: .3px; }
.csg-hero-author h1, .csg-hero-author p.csg-lead { max-width: 30ch; }

@media (max-width: 900px) {
  .csg-portrait { position: static; align-items: flex-start; margin-top: 18px; }
  .csg-portrait img { width: 128px; height: 128px; }
  .csg-hero-author h1, .csg-hero-author p.csg-lead { max-width: none; }
}

/* ---------------- trust badge strip above the footer ---------------- */

/* The strip sits flush against the footer: the footer's own top margin would
   otherwise leave a light gap and the strip would float on its own. */
.csg-badges + .csg-footer { margin-top: 0; }

.csg-badges { background: var(--tone); border-top: 1px solid var(--line); padding: 22px 0; }
.csg-badges ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
}
.csg-badges a, .csg-badges .csg-badge-static {
  display: flex; align-items: center; gap: 11px;
  min-width: 184px; padding: 11px 16px; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); text-decoration: none; color: var(--ink);
}
.csg-badges a:hover { border-color: var(--action); }
.csg-badges a:hover .csg-badge-icon { color: var(--action); }
.csg-badges .csg-badge-icon { flex: 0 0 auto; color: var(--gold-deep); }
.csg-badges .csg-badge-txt { display: flex; flex-direction: column; min-width: 0; }
.csg-badges .csg-badge-name { font-weight: 800; font-size: 15px; letter-spacing: .3px; line-height: 1.2; }
.csg-badges .csg-badge-note { font-size: 12px; color: var(--muted); margin-top: 2px; }

@media (max-width: 720px) {
  .csg-badges { padding: 14px 0; }
  .csg-badges a, .csg-badges .csg-badge-static { min-width: calc(50% - 5px); padding: 9px 12px; }
  .csg-badges .csg-badge-note { font-size: 11px; }
}

/* ---------------- in-content CTA banner and explanatory schemes ---------------- */

.csg-band { display: block; margin: 32px 0; }
.csg-band img {
  display: block; width: 100%; height: auto; border-radius: var(--radius-lg);
  box-shadow: 0 12px 28px rgba(23, 20, 15, .15);
}
.csg-band--light img { box-shadow: 0 10px 24px rgba(23, 20, 15, .09); }

.csg-scheme { margin: 30px 0; }
.csg-scheme img { display: block; width: 100%; height: auto; border-radius: var(--radius-lg); }

@media (max-width: 640px) {
  .csg-band { margin: 22px 0; }
  .csg-band img { border-radius: var(--radius); }
  .csg-scheme { margin: 20px 0; }
}

/* Eight top-level items do not fit a row at 15px with 14px padding, so the
   desktop header packs a little tighter. Submenus stay comfortable. */
@media (min-width: 981px) {
  .csg-menu a, .csg-menu .csg-menu-button { font-size: 14.5px; padding: 12px 11px; }
  .csg-menu .sub-menu a { font-size: 14px; padding: 9px 16px; }
}

/* ---------------- motion: hover and entrance ----------------
   One rule: animation signals that something is clickable and never gets in the
   way of reading. So everything is short (0.2-0.3 s) and nothing shifts layout. */

.csg-brand-icon img { transition: transform .3s ease; }
.csg-brand:hover .csg-brand-icon img { transform: rotate(-6deg) scale(1.06); }

.csg-menu a, .csg-menu .csg-menu-button { transition: color .18s ease, background .18s ease; }

.csg-text a { transition: color .18s ease; }
.csg-text p a { text-underline-offset: 3px; }
.csg-text p a:hover { color: var(--action-strong); }

/* Cards: a slight lift and shadow, the border picks up the accent. */
.csg-listing-item, .csg-badges a, .csg-author {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.csg-listing-item:hover {
  transform: translateY(-3px);
  border-color: var(--gold);
  box-shadow: 0 10px 26px rgba(23, 20, 15, .09);
}
.csg-badges a:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(23, 20, 15, .09); }

.csg-band img { transition: transform .25s ease, box-shadow .25s ease; }
.csg-band:hover img { transform: translateY(-3px); box-shadow: 0 18px 36px rgba(23, 20, 15, .2); }

.csg-text tbody tr { transition: background .18s ease; }
.csg-text tbody tr:hover td { background: #EEF2F7; }

.csg-method-track .csg-method-disc { transition: transform .22s ease, box-shadow .22s ease; }
.csg-method-track .csg-method-step:hover .csg-method-disc {
  transform: translateY(-3px);
  box-shadow: 0 8px 18px rgba(23, 20, 15, .22);
}

.csg-faq-button { transition: background .18s ease; }
.csg-faq-item { transition: border-color .2s ease, box-shadow .2s ease; }

/* The first screen appears with a minimal shift: heading, lead and byline. */
.csg-hero h1,
.csg-hero p.csg-lead,
.csg-hero .csg-byline { animation: csg-enter .55s ease-out both; }
.csg-hero p.csg-lead { animation-delay: .08s; }
.csg-hero .csg-byline { animation-delay: .16s; }

@keyframes csg-enter {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* Whoever turned animations off in their system does not see them here either. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .csg-hero h1, .csg-hero p.csg-lead, .csg-hero .csg-byline { opacity: 1; transform: none; }
  .csg-hero::before { opacity: .09; transform: rotate(4deg); }
}

/* ================= brand layer: Canada Slot Guide =================
   Everything that makes this theme its own brand rather than a repaint:
   the maple chevron, the pine-ridge rule under the header and the shapes
   the header, headings and cards are cut from. Kept in one block so the
   brand can be lifted out without touching the layout above. */

/* Header: navy plate, red rule under the brand row. */
.csg-header { background: var(--ink); }
.csg-header-rule { border-bottom: 1px solid rgba(255, 255, 255, .06); }
.csg-brand-icon {
  border-radius: 0;
  border: 0;
  background: none;
  width: 52px; height: 52px; flex: 0 0 52px;
  padding: 0;
}
.csg-brand-txt .csg-brand-l2 b { color: #fff; font-weight: 800; }
.csg-brand-txt .csg-brand-l2 i { color: var(--gold); font-weight: 300; font-style: normal; }
.csg-brand-txt .csg-brand-l2 { letter-spacing: -.4px; }

/* Pine ridge: a sawtooth rule under the header, drawn as a background
   instead of an image file. */
.csg-header::after {
  content: "";
  display: block;
  height: 9px;
  background: var(--action);
  -webkit-mask-image: linear-gradient(135deg, #000 50%, transparent 50%),
                      linear-gradient(225deg, #000 50%, transparent 50%);
          mask-image: linear-gradient(135deg, #000 50%, transparent 50%),
                      linear-gradient(225deg, #000 50%, transparent 50%);
  -webkit-mask-size: 18px 9px; mask-size: 18px 9px;
  -webkit-mask-position: 0 0, 9px 0; mask-position: 0 0, 9px 0;
  -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x;
  opacity: .85;
}

/* Hero: two quiet chevrons on the navy, so the first screen reads Canadian
   without a single flag graphic. Decorative only, never under the text. */
.csg-hero { background: var(--hero); }
.csg-hero .csg-container::before,
.csg-hero .csg-container::after {
  content: "";
  position: absolute;
  right: 24px;
  top: 34px;
  width: 210px; height: 210px;
  border-top: 2px solid rgba(226, 163, 43, .20);
  border-right: 2px solid rgba(226, 163, 43, .20);
  transform: rotate(45deg);
  pointer-events: none;
  z-index: 0;
}
.csg-hero .csg-container::after {
  right: 74px; top: 86px;
  width: 120px; height: 120px;
  border-top-color: rgba(200, 16, 46, .30);
  border-right-color: rgba(200, 16, 46, .30);
}
@media (max-width: 1080px) { .csg-hero .csg-container::before, .csg-hero .csg-container::after { display: none; } }

/* Headings: a red bar with a gold tip instead of a plain rule. */
.csg-text h2 {
  border-left: 0;
  padding-left: 0;
  position: relative;
  padding-top: 16px;
}
.csg-text h2::before {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 56px; height: 5px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--action) 0 60%, var(--gold) 60%);
}
.csg-text h3 { color: #1B3350; }

/* Cards and tables: softer corners, navy header row, no borrowed ink. */
.csg-panel { border-radius: var(--radius-lg); }
.csg-text th { background: var(--ink-2); border-color: var(--ink-2); }
.csg-text tbody tr:hover td { background: #EEF2F7; }
.csg-text li::marker { color: var(--action); }

/* Quote: gold rule on top kept, the body sits on a cool tint. */
.csg-quote, .csg-text blockquote { background: #EDF3F7; color: #172B3D; border-top-color: var(--gold); }
.csg-text blockquote { color: #172B3D; }

/* Buttons and accents inherited from the self-test and the offers table. */
.csg-selftest-submit, .csg-selftest-retake { background: var(--action); }
.csg-selftest-submit:hover:enabled, .csg-selftest-retake:hover { background: var(--action-strong); }
.csg-selftest-question .csg-selftest-options input:checked + label { background: var(--action); border-color: var(--action); }
.csg-selftest-question .csg-selftest-options label:hover { border-color: var(--action); }
.csg-selftest-badge.csg-n3 { background: var(--neg-line); }

/* Age badge in the footer: a maple chevron plate, cut with clip-path so the
   label stays upright (a rotate() would turn the text with the box). */
.csg-age {
  border: 0;
  border-radius: 0;
  background: var(--gold);
  color: var(--ink);
  clip-path: polygon(50% 0, 100% 34%, 100% 100%, 0 100%, 0 34%);
  width: 48px; height: 40px; line-height: 44px;
  font-size: 12px;
  margin-right: 12px;
}

/* Trust strip: red hover. */
.csg-badges a:hover { border-color: var(--action); }
.csg-badges a:hover .csg-badge-icon { color: var(--action); }
.csg-listing-kicker { color: var(--action); }
.csg-listing-title:hover { color: var(--action); }
.csg-listing-item:hover { border-color: var(--action); }

/* ---------------- third menu level ----------------
   The header carries the whole page tree, so a dropdown can itself hold a
   dropdown. On desktop the third level flies out sideways; on the phone panel
   it simply indents, because there is no sideways to fly to. */

.csg-menu .sub-menu .menu-item-has-children > .csg-menu-button {
  width: 100%;
  justify-content: space-between;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 500;
}
.csg-menu .sub-menu .csg-menu-caret { flex: 0 0 auto; }

@media (min-width: 901px) {
  .csg-menu .sub-menu .sub-menu {
    top: -7px;
    left: 100%;
    border-radius: 10px;
    margin-left: 2px;
  }
  /* A flyout that would run off the right edge opens to the left instead. */
  .csg-menu > .csg-container > ul > li:nth-last-child(-n+4) .sub-menu .sub-menu {
    left: auto;
    right: 100%;
    margin: 0 2px 0 0;
  }
  .csg-menu .sub-menu .menu-item-has-children.csg-open > .csg-menu-button { background: var(--ink-3); color: var(--gold); }
}

@media (max-width: 900px) {
  .csg-menu .sub-menu .sub-menu {
    margin: 0;
    padding: 0 0 4px 14px;
    background: none;
    border-left: 2px solid rgba(255, 255, 255, .12);
  }
  .csg-menu .sub-menu .sub-menu a { padding: 10px 12px; font-size: 14.5px; }
  .csg-menu .sub-menu .menu-item-has-children > .csg-menu-button { padding: 11px 12px; font-size: 15px; }
}