/* Reskin Base Styles - Vancity Blog */

/* Agenda fonts — redeclare with relative paths to override the production absolute URLs
   baked into the bundled style.css @font-face declarations */
@font-face {
  font-family: "Agenda-Regular";
  src:
    url("./fonts/Agenda-Regular.woff") format("woff"),
    url("./fonts/Agenda-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Agenda-Medium";
  src:
    url("./fonts/Agenda-Medium.woff") format("woff"),
    url("./fonts/Agenda-Medium.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Agenda-Semibold";
  src:
    url("./fonts/Agenda-Semibold.woff") format("woff"),
    url("./fonts/Agenda-Semibold.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Agenda-Bold";
  src:
    url("./fonts/Agenda-Bold.woff") format("woff"),
    url("./fonts/Agenda-Bold.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Season VF Trial - variable font */
@font-face {
  font-family: "Season VF Trial";
  src:
    url("./fonts/SeasonCollectionVF.woff2") format("woff2"),
    url("./fonts/SeasonCollectionVF.woff") format("woff");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Season VF TRIAL";
  src:
    url("./fonts/SeasonCollectionVF.woff2") format("woff2"),
    url("./fonts/SeasonCollectionVF.woff") format("woff");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

/* CSS Variables for Design System */
:root {
  /* Font-variation-settings helpers — CSS vars inherit, font-variation-settings
     does not. Setting --fvs-serf on a parent (e.g. h1) means any child that
     also uses var(--fvs-serf) in its font-variation-settings will pick up the
     correct value via normal CSS inheritance. */
  --fvs-wght: 500;
  --fvs-serf: 0;

  /* Colors */
  --color-primary: #e71843 !important;
  --color-secondary: #00c6c7;
  --color-accent: #c2bc00;
  --color-black: #000000;
  --color-white: #ffffff;
  --color-gray-light: #f8f7fa;
  --color-gray-medium: #e7e6eb;

  /* Typography */
  --font-family-serif: "Season VF Trial", "Season VF TRIAL", serif, sans-serif;
  --font-family-sans: "Season VF Trial", "Season VF TRIAL", sans-serif;
  --font-family-agenda: "Agenda-Regular", Arial, sans-serif;
  --font-family-agenda-medium: "Agenda-Medium", Arial, sans-serif;
  --font-family-agenda-semibold: "Agenda-Semibold", Arial, sans-serif;
  --font-family-agenda-bold: "Agenda-Bold", Arial, sans-serif;

  /* Season Font - Text Size Variables */
  --text-6xl: 32px;
  --text-6xl--line-height: 48px;
  --text-7xl: 38px;
  --text-7xl--line-height: 57px;
  --text-8xl: 44px;
  --text-8xl--line-height: 66px;
  --text-9xl: 48px;
  --text-9xl--line-height: 58px;

  /* Season Font - Font Weight Variables */
  --font-weight-normal: 550;
  --font-weight-medium: 500;
  --font-weight-semibold: 650;
  --font-weight-bold: 900;
  --font-weight-extrabold: 900;
  --font-weight-black: 900;

  /* Legacy Font Sizes */
  --font-size-h1: 38px;
  --font-size-h2: 32px;
  --font-size-h3: 22px;
  --font-size-h4: 22px;
  --font-size-body: 16px;
  --font-size-caption: 16px;

  /* Line Heights */
  --line-height-h1: 1.2;
  --line-height-h2: 1.2;
  --line-height-h3: 1.25;
  --line-height-h4: 1.25;
  --line-height-body: 1.5;
  --line-height-caption: 1.5;

  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-xxl: 48px;

  /* Border Radius */
  --border-radius-sm: 12px;
  --border-radius-md: 20px;
  --border-radius-lg: 999px;
}

/* =============================================================================
   Sitewide Typography
   ============================================================================= */

/* Override bundled html { font-size: 62.5% } so rem = 16px (not 10px).
   Otherwise prose 1.125rem/1.25rem compute to 11.25px/12.5px or 15px from 1.5rem. */
html {
  font-size: 16px !important;
}

/* Body — Season VF Trial sans mode.
   Sets the default custom-property values that all descendants inherit. */
body {
  --fvs-wght: 500;
  --fvs-serf: 0;
  font-family: "Season VF Trial", "Season VF TRIAL", sans-serif !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
  font-variation-settings:
    "wght" var(--fvs-wght),
    "SERF" var(--fvs-serf) !important;
  background-color: #ffffff !important;
  color: #000000 !important;
}

/* Headings — serif mode.
   Setting --fvs-serf: 100 here means any child element that also uses
   var(--fvs-serf) in its font-variation-settings will inherit serif. */
h1,
h2,
h3,
h4,
h5,
h6 {
  --fvs-serf: 100;
  --fvs-wght: 900;
  font-family: "Season VF Trial", "Season VF TRIAL", serif !important;
  font-variation-settings:
    "wght" var(--fvs-wght),
    "SERF" var(--fvs-serf) !important;
  color: #000000 !important;
}
h1 {
  font-size: 38px !important;
  line-height: 1.2em !important;
}
h2 {
  font-size: 32px !important;
  line-height: 1.2em !important;
}
h3 {
  font-size: 22px !important;
  line-height: 1.25em !important;
}
h4,
h5,
h6 {
  font-size: 22px !important;
  line-height: 1.25em !important;
}

/* All inline/text elements — use CSS vars so they pick up the serif context
   from any heading ancestor automatically. */
p,
li,
td,
th,
label,
caption,
figcaption,
input,
select,
textarea,
button,
nav a,
a {
  font-family: "Season VF Trial", "Season VF TRIAL", sans-serif !important;
  font-variation-settings:
    "wght" var(--fvs-wght),
    "SERF" var(--fvs-serf);
}

/* Article body copy — explicitly sans (excluded from prose-managed entries) */
article:not(.prose) p,
.entry:not(.prose) p {
  font-family: "Season VF Trial", "Season VF TRIAL", sans-serif !important;
  font-size: 16px !important;
  line-height: 1.67 !important;
  font-variation-settings:
    "wght" var(--fvs-wght),
    "SERF" 0 !important;
}

/* Section / page titles — serif */
.section-title,
.page-title {
  --fvs-serf: 100;
  --fvs-wght: 900;
  font-family: "Season VF Trial", "Season VF TRIAL", serif !important;
  font-variation-settings:
    "wght" var(--fvs-wght),
    "SERF" var(--fvs-serf) !important;
}

/* =============================================================================
   Support-matching font sizes sitewide (body 16px, h1 38px, h2 32px, h3 22px)
   ============================================================================= */

/* Override bundled em-based sizes: listing headings only (prose handles single/page entries) */
article:not(.prose) h1,
.single-post article:not(.prose) h1 {
  font-size: var(--font-size-h1) !important; /* 38px */
}
/* Article cards (listing): slightly smaller titles */
#infinite-scroll-container article:not(.featured) h1 {
  font-size: 20px !important;
  line-height: 1.35 !important;
}
article:not(.prose) h2,
.single-post article:not(.prose) h2,
#infinite-scroll-container article h2 {
  font-size: var(--font-size-h2) !important; /* 32px */
}
article:not(.prose) h3,
article:not(.prose) h4,
.single-post article:not(.prose) h3,
.single-post article:not(.prose) h4 {
  font-size: var(--font-size-h3) !important; /* 22px */
}

/* Section category / archive titles */
.section-category .section-category-header h1,
.section-category .section-category-header h2 {
  font-size: var(--font-size-h2) !important; /* 32px */
}
.section-category .section-category-header p {
  font-size: var(--font-size-body) !important; /* 16px */
}

/* Page template titles */
.page .page-title {
  font-size: var(--font-size-h2) !important; /* 32px */
}
.page article h3 {
  font-size: var(--font-size-h3) !important; /* 22px */
}
.page article:not(.prose) p,
.page article:not(.prose) ol li,
.page article:not(.prose) ul li {
  font-size: var(--font-size-body) !important; /* 16px */
}

/* Header "Now reading" */
header[role="banner"] .now-reading {
  font-size: var(--font-size-body) !important; /* 16px */
}

/* Subscribe / newsletter forms */
.subscribe-container label,
.subscribe-container p {
  font-size: var(--font-size-body) !important;
}
.subscribe-container small {
  font-size: var(--font-size-caption) !important; /* 16px min */ /* 14px */
}

/* Sidebar widgets */
.sidebar .widget,
.sidebar .widget-title,
.sidebar .trending h3,
.sidebar .newsletter label,
.sidebar .newsletter p {
  font-size: var(--font-size-body) !important;
}
.sidebar .widget-title,
.sidebar .trending h3 {
  font-size: var(--font-size-h3) !important; /* 22px */
}

/* Featured article hero headline (home)
   Must target the <a> inside h1 too — the global "a" rule sets SERF:0
   which wins over the h1's font-variation-settings because font-variation-settings
   is not inherited; each element needs its own declaration. */
article.featured header h1 {
  --fvs-serf: 100;
  --fvs-wght: 900;
  font-family: "Season VF Trial", "Season VF TRIAL", serif !important;
  font-size: var(--font-size-h1) !important;
  font-variation-settings:
    "wght" var(--fvs-wght),
    "SERF" var(--fvs-serf) !important;
}
/* The <a> inside h1 inherits --fvs-serf: 100 from the h1 via CSS var inheritance */
article.featured header h1 a {
  font-variation-settings:
    "wght" var(--fvs-wght),
    "SERF" var(--fvs-serf) !important;
}
article.featured header h2.subtitle,
article.featured header .post-categories,
article.featured header p {
  font-family: "Season VF Trial", "Season VF TRIAL", sans-serif !important;
}

/* Captions, bylines, meta — Support caption size */
figcaption,
.author-bio,
.author-bio p,
.reading-estimative,
.post-categories a,
.entry .post-categories {
  font-size: var(--font-size-caption) !important; /* 16px min */ /* 14px */
}
blockquote {
  font-size: var(--font-size-body) !important; /* 16px */
}
.entry.prose blockquote {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 0 10px;
}
/* Remove Tailwind prose open/close-quote so we don't double-quote (content may already have " ") */
.entry.prose blockquote p:first-of-type::before,
.entry.prose blockquote p:last-of-type::after {
  content: none !important;
  display: none !important;
}

/* Quote share buttons: Twitter → X icon */
blockquote .quote-share-buttons a.twitter-quote-btn {
  background-image: url("./img/icon-x-black.svg") !important;
  background-position: center !important;
  background-size: contain !important;
}

/* =============================================================================
   Sitewide Background Colors
   ============================================================================= */

/* Reading progress bar: bottom of screen, twice as tall (4px) */
.reading-progress {
  background: transparent;
  top: auto !important;
  bottom: 0 !important;
  height: 4px !important;
}

/* =============================================================================
   Header reset — neutralize ALL bundled header.css rules
   ============================================================================= */

/* Fix white line — body margin & header top */
html,
body {
  margin: 0 !important;
  padding: 0 !important;
}

/* Strip everything off <header> — gradient lives on inner div */
header[role="banner"] {
  background: transparent !important;
  border: none !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  top: 0 !important;
}

/* Logo — old header.css: .logo{width:100%;max-width:174px}
   and .logo-container a{height:65px;line-height:100px;width:174px} */
header[role="banner"] img.logo {
  height: 40px !important;
  width: 124px !important;
  max-width: none !important;
  max-height: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
}

/* Responsive show/hide.
   "hidden" class is unusable — bundled base.css has .hidden{display:none!important} */
.hdr-tagline {
  display: none;
  font-family: "Season VF Trial", "Season VF TRIAL", sans-serif !important;
  font-weight: 600 !important;
  font-size: 21px !important;
}
@media (min-width: 1024px) {
  .hdr-tagline {
    display: inline !important;
  }
}
/* Slightly smaller between 1024px and 1399px */
@media (min-width: 1024px) and (max-width: 1399px) {
  .hdr-tagline {
    font-size: 17px !important;
  }
}
.hdr-nav {
  display: flex;
  align-items: center;
}
@media (max-width: 1023px) {
  .hdr-nav {
    display: none !important;
  }
}
.hdr-hamburger {
  display: none !important;
}
@media (max-width: 1023px) {
  .hdr-hamburger {
    display: flex !important;
  }
}
/* Override bundled header.css which hides .header-mobile-only above 880px */
@media (min-width: 1024px) {
  .header-mobile-only {
    display: none !important;
  }
}
@media (max-width: 1023px) {
  .header-mobile-only {
    display: block !important;
  }
}

/* =============================================================================
   Mobile nav panel — full-screen overlay with brand gradient
   ============================================================================= */
.mobile-nav-panel {
  background: linear-gradient(180deg, #e71843 0%, #bb1234 100%) !important;
  position: fixed !important;
  top: 0 !important;
  left: -100% !important;
  width: 100% !important;
  height: 100vh !important;
  z-index: 9999 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  padding: 72px 32px 40px !important;
  overflow-y: auto !important;
  transition: left 0.35s ease !important;
  box-sizing: border-box !important;
}
.mobile-nav-panel.open {
  left: 0 !important;
}
/* Nuke any bundled nav/div backgrounds inside the panel */
.mobile-nav-panel *,
.mobile-nav-panel nav,
.mobile-nav-panel ul,
.mobile-nav-panel li {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border-color: transparent !important;
  float: none !important;
}

/* Close button */
.mobile-nav-close {
  position: absolute !important;
  top: 16px !important;
  left: 16px !important;
  background: transparent !important;
  border: none !important;
  padding: 4px !important;
  cursor: pointer !important;
  border-radius: 9999px !important;
  transition: background-color 0.2s !important;
  line-height: 0 !important;
  width: 48px !important;
  height: 48px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.mobile-nav-close:hover {
  background-color: rgba(255, 255, 255, 0.2) !important;
}
.mobile-nav-close svg {
  width: 32px !important;
  height: 32px !important;
  display: block !important;
}

/* Logo + tagline */
.mobile-nav-logo {
  text-align: center !important;
  margin-bottom: 32px !important;
  background: transparent !important;
}
.mobile-nav-logo a {
  display: inline-block !important;
  background: transparent !important;
}
.mobile-nav-logo img.logo {
  height: 72px !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 auto 8px !important;
  display: block !important;
}
.mobile-nav-tagline {
  color: rgba(255, 255, 255, 0.8) !important;
  font-family: "Season VF Trial", "Season VF TRIAL", sans-serif !important;
  font-size: 16px !important;
  display: block !important;
  text-align: center !important;
  background: transparent !important;
}

/* Main nav links
   Use header[role="banner"] .header-mobile-only prefix to beat the
   bundled header.css rule:
   header[role="banner"] .header-mobile-only nav a { font-size:2.4em!important; padding:20px 0!important } */
header[role="banner"] .header-mobile-only .mobile-nav-links {
  width: 100% !important;
  text-align: center !important;
  margin-bottom: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  float: none !important;
  border: none !important;
}
header[role="banner"] .header-mobile-only .mobile-menu-list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}
header[role="banner"] .header-mobile-only .mobile-menu-list > li {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  float: none !important;
}
header[role="banner"] .header-mobile-only .mobile-menu-list > li > a {
  color: #ffffff !important;
  font-family: "Season VF Trial", "Season VF TRIAL", sans-serif !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  display: block !important;
  padding: 7px 0 !important;
  text-align: center !important;
  letter-spacing: normal !important;
  margin: 0 !important;
  background: none !important;
  border: none !important;
  line-height: 1.3 !important;
  font-variation-settings:
    "wght" 700,
    "SERF" 0 !important;
}
header[role="banner"] .header-mobile-only .mobile-menu-list > li > a:hover {
  opacity: 0.8 !important;
}

/* Footer-bottom-menu inside mobile nav */
header[role="banner"] .header-mobile-only .mobile-nav-bottom-links {
  width: 100% !important;
  text-align: center !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  border: none !important;
  background: transparent !important;
  float: none !important;
}
header[role="banner"] .header-mobile-only .mobile-bottom-menu-list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  background: transparent !important;
}
header[role="banner"] .header-mobile-only .mobile-bottom-menu-list > li {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  float: none !important;
}
header[role="banner"] .header-mobile-only .mobile-bottom-menu-list > li > a {
  color: #ffffff !important;
  font-family: "Season VF Trial", "Season VF TRIAL", sans-serif !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  display: block !important;
  padding: 7px 0 !important;
  text-align: center !important;
  letter-spacing: normal !important;
  margin: 0 !important;
  background: none !important;
  border: none !important;
  line-height: 1.3 !important;
  font-variation-settings:
    "wght" 700,
    "SERF" 0 !important;
}
header[role="banner"] .header-mobile-only .mobile-bottom-menu-list > li > a:hover {
  opacity: 0.8 !important;
}

/* Suppress the bundled overlay-mobile when our full-screen mobile nav is open.
   The JS adds html.no-scroll when the menu opens; overlay z-index (1050)
   would otherwise sit above the header (z-index 1001). */
html.no-scroll .overlay-mobile {
  display: none !important;
}

/* Footer area inside mobile nav */
.mobile-nav-footer {
  margin-top: auto;
  text-align: center;
  width: 100%;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  float: none !important;
}
.mobile-nav-footer .social {
  display: flex !important;
  justify-content: center;
  gap: 16px !important;
  list-style: none !important;
  margin: 0 auto 20px !important;
  padding: 0 !important;
  float: none !important;
  max-width: none !important;
}
.mobile-nav-footer .social li {
  float: none !important;
  width: auto !important;
  margin: 0 !important;
}
.mobile-nav-footer .social li a {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  border: none !important;
  background-color: transparent !important;
  background-size: 18px 18px !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  font-size: 0 !important;
  text-indent: -9999px !important;
  overflow: hidden !important;
  filter: brightness(0) invert(1);
  transition: all 0.3s;
  padding: 0 !important;
  margin: 0 !important;
}
.mobile-nav-footer .social li a:hover {
  background-color: rgba(255, 255, 255, 0.25) !important;
  transform: scale(1.1);
}
.mobile-nav-footer .social li.facebook a {
  background-image: url("./img/icon-facebook-black.svg") !important;
}
.mobile-nav-footer .social li.twitter a,
.mobile-nav-footer .social li.x a {
  background-image: url("./img/icon-x-black.svg") !important;
  background-size: 18px 18px !important;
}
.mobile-nav-footer .social li.instagram a {
  background-image: url("./img/icon-instagram-black.svg") !important;
}
.mobile-nav-footer .social li.youtube a {
  background-image: url("./img/icon-youtube-black.svg") !important;
}
.mobile-nav-footer .social li.linkedin a {
  background-image: url("./img/icon-linkedin-black.svg") !important;
  background-size: 22px 22px !important;
}
.mobile-nav-footer .social li.tiktok a {
  background-image: url("./img/icon-tiktok-black.svg") !important;
  background-size: 18px 18px !important;
}
.mobile-nav-footer .social li a span {
  display: none !important;
}

.mobile-nav-copyright {
  color: rgba(255, 255, 255, 0.6) !important;
  font-size: 16px !important;
  font-family: "Season VF Trial", "Season VF TRIAL", sans-serif !important;
  margin: 0 !important;
}

/* Nav menu — horizontal row.
   Must override: header[role="banner"] nav:not(.share) a:not(.search)
   {color:#222;font-size:1.8em;margin:0 40px 0 0;font-family:Agenda-Semibold...}
   and: header[role="banner"] nav li{display:inline-block}
   and: header[role="banner"] nav{text-align:right;line-height:...} */
header[role="banner"] nav.hdr-nav {
  text-align: left !important;
  line-height: normal !important;
  float: none !important;
}
header[role="banner"] .hdr-menu {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 28px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
header[role="banner"] .hdr-menu > li {
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: normal !important;
}
header[role="banner"] nav.hdr-nav a,
header[role="banner"] .hdr-menu > li > a {
  color: #ffffff !important;
  font-size: 16px !important;
  font-family: "Season VF Trial", "Season VF TRIAL", sans-serif !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: inline !important;
  letter-spacing: normal !important;
  line-height: normal !important;
  position: static !important;
  float: none !important;
}
header[role="banner"] .hdr-menu > li > a:hover {
  opacity: 0.9;
}
header[role="banner"] .hdr-menu > li > a.subscribe_a {
  background-color: rgba(255, 255, 255, 0.2) !important;
  border: 1px solid rgba(255, 255, 255, 0.8) !important;
  border-radius: 9999px !important;
  padding: 8px 20px !important;
  font-size: 16px !important;
}
header[role="banner"] .hdr-menu a.search,
header[role="banner"] .hdr-menu a.ir {
  display: none !important;
}
/* Slightly smaller nav text between 1024px and 1399px */
@media (min-width: 1024px) and (max-width: 1399px) {
  header[role="banner"] nav.hdr-nav a,
  header[role="banner"] .hdr-menu > li > a {
    font-size: 14.5px !important;
  }
  header[role="banner"] .hdr-menu {
    gap: 20px !important;
  }
}

/* Search button — <button> so "header a.search" CSS won't match */
header[role="banner"] button.search {
  background: transparent !important;
  border: none !important;
  outline: none !important;
  padding: 8px !important;
  margin: 0 !important;
  border-radius: 9999px;
  cursor: pointer;
  line-height: 0;
  transition: background-color 0.2s;
}
header[role="banner"] button.search:hover {
  background-color: rgba(255, 255, 255, 0.25) !important;
}

/* =============================================================================
   Footer reset — bundled style.css sets position:fixed, display:none on mobile.
   Also resets element colors because bundled CSS sets h4/p/a colors explicitly.
   ============================================================================= */
footer[role="contentinfo"] {
  position: static !important;
  bottom: auto !important;
  min-height: 0 !important;
  z-index: auto !important;
  background-color: #111111 !important;
  display: block !important;
  border-top: none !important;
  color: #ffffff !important;
  padding-bottom: 0 !important;
}

/* Footer responsive
   ≥1120px: 3 columns (Search | Explore | Read more), bottom row left/right
   <1120px: Search+Explore share row 1, Read more full-width row 2; bottom row centered
   ≤900px:  Everything stacked; top section left-aligned, bottom row stacked and centered
   Text: left-aligned for all content except copyright row (centered)
*/
@media (max-width: 1119px) {
  footer[role="contentinfo"] .footer-top-grid {
    grid-template-columns: 1fr 1fr !important;
    display: grid !important;
  }
  footer[role="contentinfo"] .footer-top-grid .footer-read-more-col {
    grid-column: 1 / -1 !important;
  }
  footer[role="contentinfo"] .footer-bottom-row {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
  }
}
@media (max-width: 899px) {
  footer[role="contentinfo"] .footer-top-grid {
    grid-template-columns: 1fr !important;
  }
  footer[role="contentinfo"] .footer-top-grid .footer-read-more-col {
    grid-column: 1 !important;
  }
  footer[role="contentinfo"] .footer-bottom-row {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
  }
}
@media (min-width: 1120px) {
  footer[role="contentinfo"] .footer-top-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  footer[role="contentinfo"] .footer-top-grid .footer-read-more-col {
    grid-column: auto !important;
  }
  footer[role="contentinfo"] .footer-bottom-row {
    justify-content: space-between !important;
  }
}

/* Left-align all footer top section content (titles, links) */
footer[role="contentinfo"] .footer-top-grid .footer-col-title,
footer[role="contentinfo"] .footer-top-grid .footer-search-col,
footer[role="contentinfo"] .footer-top-grid .footer-explore-col,
footer[role="contentinfo"] .footer-top-grid .footer-read-more-col,
footer[role="contentinfo"] .footer-top-grid a,
footer[role="contentinfo"] .footer-top-grid ul {
  text-align: left !important;
}
footer[role="contentinfo"] h1,
footer[role="contentinfo"] h2,
footer[role="contentinfo"] h3,
footer[role="contentinfo"] h4,
footer[role="contentinfo"] h5,
footer[role="contentinfo"] h6,
footer[role="contentinfo"] p,
footer[role="contentinfo"] span {
  color: #ffffff;
}

/* =============================================================================
   Footer menus & components
   ============================================================================= */

/* Column title — inherits --fvs-serf: 100 from the h4 rule above */
footer[role="contentinfo"] .footer-col-title {
  --fvs-wght: 900;
  --fvs-serf: 100;
  font-size: 22px !important;
  font-family: "Season VF Trial", "Season VF TRIAL", serif !important;
  font-variation-settings:
    "wght" var(--fvs-wght),
    "SERF" var(--fvs-serf) !important;
  margin: 0 0 18px 0 !important;
  line-height: 1.4 !important;
  color: #ffffff !important;
}

/* Search button in footer */
footer[role="contentinfo"] a.footer-search-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  background: #ffffff !important;
  color: #000000 !important;
  border: none !important;
  border-radius: 9999px !important;
  padding: 12px 24px 12px 18px !important;
  height: 48px !important;
  width: 300px !important;
  max-width: 100% !important;
  font-size: 16px !important;
  font-family: "Season VF Trial", "Season VF TRIAL", sans-serif !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: background-color 0.3s !important;
  position: static !important;
  float: none !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
}
footer[role="contentinfo"] a.footer-search-btn:hover {
  background: #c8c7cc !important;
  color: #000000 !important;
}
footer[role="contentinfo"] a.footer-search-btn span {
  color: #000000 !important;
  font-size: 16px !important;
  font-family: "Season VF Trial", "Season VF TRIAL", sans-serif !important;
  font-weight: 600 !important;
  display: inline !important;
  visibility: visible !important;
  opacity: 1 !important;
}
footer[role="contentinfo"] .footer-search-icon {
  display: flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
  color: #000000 !important;
}
@media (max-width: 767px) {
  footer[role="contentinfo"] a.footer-search-btn {
    width: 260px !important;
  }
}

/* Vertical footer menu — items stacked one per row.
   Bundled footer.css: footer li{display:inline-block}, footer ul.menu li::after{content:'|'}.
   Target Explore column and the menu ul by class so we beat those rules. */
footer[role="contentinfo"] .footer-explore-col ul,
footer[role="contentinfo"] .footer-explore-menu,
footer[role="contentinfo"] .footer-explore-col .footer-links {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  float: none !important;
}
footer[role="contentinfo"] .footer-explore-col li,
footer[role="contentinfo"] .footer-explore-menu li {
  display: block !important;
  float: none !important;
  width: 100% !important;
  margin: 0 0 10px 0 !important;
  padding: 0 !important;
}
footer[role="contentinfo"] .footer-explore-col li:last-child,
footer[role="contentinfo"] .footer-explore-menu li:last-child {
  margin-bottom: 0 !important;
}
/* Remove the bundled | pipe — bundled uses #menu-footer-menu and footer ul.menu li::after */
footer[role="contentinfo"] #menu-footer-menu li::after,
footer[role="contentinfo"] #menu-footer-menu li::before,
footer[role="contentinfo"] .footer-explore-col li::after,
footer[role="contentinfo"] .footer-explore-col li::before,
footer[role="contentinfo"] .footer-explore-menu li::after,
footer[role="contentinfo"] .footer-explore-menu li::before {
  content: none !important;
  display: none !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 0 !important;
}
/* Force block layout — bundled footer li, footer ul { display: inline-block; float: left } */
footer[role="contentinfo"] #menu-footer-menu,
footer[role="contentinfo"] #menu-footer-menu li {
  display: block !important;
  float: none !important;
  width: 100% !important;
}
footer[role="contentinfo"] div.footer-explore-col ul.menu.footer-explore-menu,
footer[role="contentinfo"] div.footer-explore-col ul.footer-explore-menu {
  display: block !important;
  float: none !important;
}
footer[role="contentinfo"] div.footer-explore-col ul.menu.footer-explore-menu li,
footer[role="contentinfo"] div.footer-explore-col ul.footer-explore-menu li {
  display: block !important;
  float: none !important;
  width: 100% !important;
}
footer[role="contentinfo"] .footer-explore-col a,
footer[role="contentinfo"] .footer-explore-menu a {
  color: #ffffff !important;
  font-size: 16px !important;
  font-family: "Season VF Trial", "Season VF TRIAL", sans-serif !important;
  font-weight: 400 !important;
  font-variation-settings:
    "wght" 400,
    "SERF" 0 !important;
  text-decoration: none !important;
  display: block !important;
  line-height: 1.5 !important;
}
footer[role="contentinfo"] .footer-explore-col a:hover,
footer[role="contentinfo"] .footer-explore-menu a:hover {
  text-decoration: underline !important;
  color: #ffffff !important;
}

/* Footer third column: Read more about... — two columns, stacked */
footer[role="contentinfo"] .footer-read-more-col {
  margin: 0;
  padding: 0;
}
footer[role="contentinfo"] .footer-read-more-list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 0 24px;
  float: none !important;
}
footer[role="contentinfo"] .footer-read-more-list li {
  display: block !important;
  float: none !important;
  margin: 0 0 10px 0 !important;
  padding: 0 !important;
}
footer[role="contentinfo"] .footer-read-more-list li::after,
footer[role="contentinfo"] .footer-read-more-list li::before {
  content: none !important;
  display: none !important;
}
footer[role="contentinfo"] .footer-read-more-list a {
  color: #ffffff !important;
  font-size: 16px !important;
  font-family: "Season VF Trial", "Season VF TRIAL", sans-serif !important;
  font-weight: 400 !important;
  font-variation-settings:
    "wght" 400,
    "SERF" 0 !important;
  text-decoration: none !important;
  display: block !important;
  line-height: 1.5 !important;
}
footer[role="contentinfo"] .footer-read-more-list a:hover {
  text-decoration: underline !important;
  color: #ffffff !important;
}

/* Copyright */
footer[role="contentinfo"] .footer-copyright {
  font-size: 16px !important;
  line-height: 20px !important;
  font-family: "Season VF Trial", "Season VF TRIAL", sans-serif !important;
  font-weight: 400 !important;
  font-variation-settings:
    "wght" 400,
    "SERF" 0 !important;
  color: #ffffff !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Bottom links with | separators */
/* Group copyright + policy links with gap and pipe between them */
footer[role="contentinfo"] .footer-bottom-left {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 0 12px !important;
}
footer[role="contentinfo"] .footer-bottom-left .footer-bottom-nav::before {
  content: "|" !important;
  color: #ffffff !important;
  font-size: 16px !important;
  margin-right: 12px !important;
}
footer[role="contentinfo"] .footer-bottom-left .footer-copyright {
  margin: 0 !important;
}
footer[role="contentinfo"] .footer-bottom-left .footer-bottom-nav {
  display: inline-flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
}

footer[role="contentinfo"] .footer-bottom-links {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 0 !important;
}
footer[role="contentinfo"] .footer-bottom-links li {
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
}
footer[role="contentinfo"] .footer-bottom-links li:not(:last-child)::after {
  content: "|" !important;
  margin: 0 12px !important;
  color: #ffffff !important;
  font-size: 16px !important;
}
footer[role="contentinfo"] .footer-bottom-links a {
  color: #ffffff !important;
  font-size: 16px !important;
  font-family: "Season VF Trial", "Season VF TRIAL", sans-serif !important;
  font-weight: 400 !important;
  font-variation-settings:
    "wght" 400,
    "SERF" 0 !important;
  line-height: 20px !important;
  text-decoration: underline !important;
}
footer[role="contentinfo"] .footer-bottom-links a:hover {
  opacity: 0.8 !important;
}

/* Below 625px: center footer bottom; copyright one line, menu on next line, no pipes */
@media (max-width: 624px) {
  footer[role="contentinfo"] .footer-bottom-row {
    align-items: center !important;
    text-align: center !important;
  }
  footer[role="contentinfo"] .footer-bottom-left {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 8px !important;
  }
  footer[role="contentinfo"] .footer-bottom-left .footer-bottom-nav::before {
    content: none !important;
    display: none !important;
  }
  footer[role="contentinfo"] .footer-bottom-links li::after {
    content: none !important;
    display: none !important;
    margin: 0 !important;
  }
  footer[role="contentinfo"] .footer-bottom-links {
    justify-content: center !important;
    gap: 12px !important;
  }
  footer[role="contentinfo"] .footer-copyright {
    text-align: center !important;
  }
}

/* Vancity wordmark — full-width black band below footer content */
footer[role="contentinfo"] .footer-wordmark {
  margin-top: 48px !important;
  background-color: #111111 !important;
  margin-left: -24px !important;
  margin-right: -24px !important;
  padding: 20px 0 !important;
}
footer[role="contentinfo"] .footer-wordmark svg {
  width: 100% !important;
  height: auto !important;
  display: block !important;
}

/* Footer social row alignment */
footer[role="contentinfo"] .footer-social {
  display: flex !important;
  align-items: center !important;
}

/* =============================================================================
   Footer social icons — background images + hover
   ============================================================================= */
footer[role="contentinfo"] .social {
  display: flex;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}
footer[role="contentinfo"] .social li {
  margin: 0;
  padding: 0;
}
footer[role="contentinfo"] .social li a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-right: 1rem;
  border-radius: 50%;
  border: none;
  background-color: transparent;
  background-size: 18px 18px;
  background-position: center;
  background-repeat: no-repeat;
  font-size: 0;
  text-indent: -9999px;
  overflow: hidden;
  transition: all 0.3s;
  /* Solid white icon shapes (black SVG inverted to white) */
  filter: brightness(0) invert(1);
}
footer[role="contentinfo"] .social li:last-child a {
  margin-right: 0;
}
footer[role="contentinfo"] .social li a:hover {
  background-color: #ffffff;
  transform: scale(1.1);
  filter: none;
}
footer[role="contentinfo"] .social li.facebook a {
  background-image: url("./img/icon-facebook-black.svg");
}
footer[role="contentinfo"] .social li.twitter a,
footer[role="contentinfo"] .social li.x a {
  background-image: url("./img/icon-x-black.svg") !important;
}
footer[role="contentinfo"] .social li.instagram a {
  background-image: url("./img/icon-instagram-black.svg");
}
footer[role="contentinfo"] .social li.youtube a {
  background-image: url("./img/icon-youtube-black.svg");
}
/* LinkedIn SVG has a larger 60×60 viewBox with more internal whitespace — needs bigger size */
footer[role="contentinfo"] .social li.linkedin a {
  background-image: url("./img/icon-linkedin-black.svg");
  background-size: 22px 22px;
}
footer[role="contentinfo"] .social li.tiktok a {
  background-image: url("./img/icon-tiktok-black.svg") !important;
}
footer[role="contentinfo"] .social li a span {
  display: none;
}

.article-wrapper {
  background: var(--color-gray-light) !important;
}

/* =============================================================================
   Article cards (listing): 3 per line, gray background, rounded corners
   ============================================================================= */
/* Sidebar "Most read" widget — cap at 5 items (PHP may still output more from WPP) */
.sidebar .trending.widget .wpp-list li:nth-child(n + 6) {
  display: none !important;
}
.sidebar .trending.widget .wpp-list li:nth-child(5) {
  border-bottom: none;
}
.sidebar .trending.widget {
  padding: 20px 0;
}
.sidebar .trending.widget .widget-title {
  font-family: "Season VF Trial", "Season VF TRIAL", sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: #111111 !important;
  margin-bottom: 14px !important;
}
.sidebar .trending.widget .widget-title span {
  display: none;
}
.sidebar .wpp-list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.sidebar .wpp-list li {
  padding: 12px 0 !important;
  border-bottom: 1px solid #e7e6eb;
  display: block !important;
}
.sidebar .wpp-list li:last-child {
  border-bottom: none;
}
.sidebar .wpp-list .wpp-category,
.sidebar .wpp-list .wpp-category a {
  font-family: "Season VF Trial", "Season VF TRIAL", sans-serif !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--color-primary) !important;
  text-transform: capitalize !important;
  letter-spacing: 0.05em !important;
  text-decoration: none !important;
}
.sidebar .wpp-list .entry-title {
  margin: 4px 0 0 !important;
  font-size: 16px !important;
  line-height: 1.4 !important;
}
.sidebar .wpp-list .entry-title a {
  font-family: var(--font-family-serif) !important;
  color: #222 !important;
  text-decoration: none !important;
  font-weight: 600 !important;
}
.sidebar .wpp-list .entry-title a:hover {
  color: var(--color-primary) !important;
}

/* Related posts sidebar widget — matches "Most read" visual style */
.sidebar .related-posts-sidebar.widget {
  padding: 20px 0;
}
.sidebar .related-posts-sidebar.widget .widget-title {
  font-family: "Season VF Trial", "Season VF TRIAL", sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: #111111 !important;
  margin-bottom: 14px !important;
}
.sidebar .related-posts-sidebar.widget .widget-title span {
  display: none;
}
/* rp4wp output inside the related posts sidebar widget */
.sidebar .related-posts-sidebar .rp4wp-related-posts > h3,
.sidebar .related-posts-sidebar .rp4wp-related-posts .show-love {
  display: none !important;
}
.sidebar .related-posts-sidebar .rp4wp-related-posts ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border-top: 3px solid var(--color-primary) !important;
}
.sidebar .related-posts-sidebar .rp4wp-related-posts ul li {
  padding: 12px 0 !important;
  border-bottom: 1px solid #e7e6eb !important;
  display: block !important;
}
.sidebar .related-posts-sidebar .rp4wp-related-posts ul li:last-child {
  border-bottom: none !important;
}
/* Hide image */
.sidebar .related-posts-sidebar .rp4wp-related-post-image {
  display: none !important;
}
/* Category label — matches .wpp-category */
.sidebar .related-posts-sidebar .rp4wp-post-categories,
.sidebar .related-posts-sidebar .rp4wp-post-categories a {
  font-family: "Season VF Trial", "Season VF TRIAL", sans-serif !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--color-primary) !important;
  text-transform: capitalize !important;
  letter-spacing: 0.05em !important;
  text-decoration: none !important;
  display: block !important;
  margin: 0 !important;
}
/* Title link — matches .entry-title a */
.sidebar .related-posts-sidebar .rp4wp-related-post-content > a {
  font-family: var(--font-family-serif) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #222 !important;
  text-decoration: none !important;
  line-height: 1.4 !important;
  display: block !important;
  margin-top: 4px !important;
}
.sidebar .related-posts-sidebar .rp4wp-related-post-content > a:hover {
  color: var(--color-primary) !important;
}
/* Hide excerpt if enabled in plugin settings */
.sidebar .related-posts-sidebar .rp4wp-related-post-content > p {
  display: none !important;
}

/* Single post: show footer + header — bundled style.css hides them with display:none */
body.single-post footer[role="contentinfo"] {
  display: block !important;
}
body.single-post header[role="banner"] {
  display: block !important;
}

/* Remove gray background from single post/page content wrapper */
.single-post .article-wrapper,
.page .article-wrapper {
  background: transparent !important;
}

/* Category & tag archive top spacing */
body.category .main-content,
body.tag .main-content {
  margin-top: 9rem !important;
}

/* Most Read / Trending section */
#trending.section-category,
#trending {
  margin-top: 0 !important;
}
#trending .section-category-header {
  text-align: center !important;
  width: 100% !important;
  margin-left: 0 !important;
  float: none !important;
}
#trending .section-title {
  font-size: var(--font-size-h1) !important;
  text-align: center !important;
  display: block !important;
}
/* Let slick manage layout — only apply visual card styling */
#trending .slick-slider article {
  background: #ffffff !important;
  border-radius: 12px !important;
  border: 1px solid #e5e7eb !important;
  overflow: hidden !important;
  transition: background 300ms ease;
}
#trending .slick-slider article .figure {
  border-radius: 12px 12px 0 0 !important;
  overflow: hidden !important;
}
#trending .slick-slider article header {
  background-color: #ffffff !important;
  border-radius: 0 0 12px 12px !important;
  padding: 16px 20px !important;
  transition: background 300ms ease;
}
#trending .slick-slider article h1 {
  font-size: 19px !important;
  line-height: 1.35 !important;
  transition: color 300ms ease;
}
#trending .slick-slider article .post-categories li:not(:last-child)::after {
  content: "\00B7" !important;
  font-size: 0.6em !important;
  padding: 0 6px !important;
}

/* Center (active) trending card — pink background, white text */
#trending .slick-center article {
  background: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
}
#trending .slick-center article header {
  background-color: var(--color-primary) !important;
}
#trending .slick-center article h1,
#trending .slick-center article h1 a,
#trending .slick-center article .post-categories,
#trending .slick-center article .post-categories a,
#trending .slick-center article .author,
#trending .slick-center article .author a,
#trending .slick-center article .reading-estimative {
  color: #ffffff !important;
}
/* Non-center visible cards — white, slightly dimmed (filter avoids warm background bleed) */
#trending .slick-slide:not(.slick-center) article {
  background: #ffffff !important;
  filter: brightness(0.82) saturate(0);
  transition: filter 300ms ease;
}
#trending .slick-slide:not(.slick-center) article header {
  background-color: #ffffff !important;
}
#trending .slick-slide:not(.slick-center):hover article {
  filter: brightness(1) saturate(1);
}

/* Pagination */
.pagination-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 40px 24px 60px;
}
.pagination-label {
  font-family: "Season VF Trial", "Season VF TRIAL", sans-serif;
  font-size: 16px;
  color: #666;
  letter-spacing: 0.02em;
}
.pagination-buttons {
  display: flex;
  align-items: center;
  gap: 16px;
}
.pagination-btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  background: #f0f0f0;
  border-radius: 999px;
  padding: 10px 22px 10px 14px;
  text-decoration: none !important;
  font-family: "Season VF Trial", "Season VF TRIAL", sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #222 !important;
  transition:
    background 200ms ease,
    color 200ms ease;
  border: none;
}
.pagination-btn--next {
  padding: 10px 14px 10px 22px;
}
.pagination-btn:hover {
  background: var(--color-primary);
  color: #fff !important;
}
.pagination-btn__circle {
  width: 40px;
  height: 40px;
  background: #e7e6eb;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition:
    background 200ms ease,
    color 200ms ease;
  color: #222;
}
.pagination-btn:hover .pagination-btn__circle {
  background: rgba(255, 255, 255, 0.25);
  color: #fff;
}

/* Article card listing: smaller bullet separator */
#infinite-scroll-container article.card-article .post-categories li:not(:last-child)::after {
  content: "\00B7" !important;
  font-size: 0.6em !important;
  padding: 0 6px !important;
}

/* Article Cards Grid */
#infinite-scroll-container .container {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 32px !important;
  float: none !important;
  width: 100% !important;
  max-width: 1480px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-top: 6rem !important;
  padding: 0 24px 24px !important;
  box-sizing: border-box !important;
}
#infinite-scroll-container article.card-article {
  float: none !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  background: #f9fafb !important;
  border-radius: 12px !important;
  border: 1px solid #e5e7eb !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}
#infinite-scroll-container article.card-article .figure {
  flex-shrink: 0;
  overflow: hidden !important;
  border-radius: 12px 12px 0 0 !important;
}
#infinite-scroll-container article.card-article .figure figure,
#infinite-scroll-container article.card-article .figure figure img {
  width: 100% !important;
  display: block !important;
}
/* Card images 15% taller (aspect 16:9 → 16:(9*1.15) ≈ 16:10.35) */
#infinite-scroll-container article.card-article .figure figure {
  aspect-ratio: 16 / 10.35 !important;
}
#infinite-scroll-container article.card-article .figure figure img {
  object-fit: cover !important;
  height: 100% !important;
}
#infinite-scroll-container article.card-article header {
  background-color: #f9fafb !important;
  padding: 16px 20px !important;
  flex-grow: 1;
}
#infinite-scroll-container article.card-article h1 {
  font-size: 20px !important;
  line-height: 1.35 !important;
}
#infinite-scroll-container article.card-article .author,
#infinite-scroll-container article.card-article .author a,
#trending article .author,
#trending article .author a {
  font-size: var(--font-size-caption) !important; /* 16px min */
  font-family: "Season VF Trial", "Season VF TRIAL", sans-serif !important;
  font-weight: 400 !important;
}
@media only screen and (max-width: 899px) {
  #infinite-scroll-container .container {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media only screen and (max-width: 599px) {
  #infinite-scroll-container .container {
    grid-template-columns: 1fr !important;
  }
}

/* =============================================================================
   Sitewide Primary Color: #d83023 / #ee3124 → #e71843
   ============================================================================= */

/* Article content links */
.single-post .entry a {
  color: var(--color-primary) !important;
}
.single-post .entry a:not(.no-hover):hover,
.single-post .entry u {
  border-bottom-color: var(--color-primary) !important;
  text-shadow:
    #fff 0.5px 0.5px,
    #fff -0.5px 0.5px,
    #fff 1px 1px,
    #fff -1px 1px,
    #fff 1.5px 1.5px,
    #fff -1.5px 1.5px,
    #fff 2px 2px,
    #fff -2px 2px,
    #fff 0 0.5px,
    #fff 0 1px,
    #fff 0 1.5px,
    #fff 0 2px !important;
}

/* Reading progress bar — fill height of container */
.reading-progress-bar {
  background-color: var(--color-primary) !important;
  height: 100% !important;
}

/* Featured article hero */
article.featured,
article.featured header {
  background: var(--color-primary) !important;
}

/* Single post hero */
.single-post article.post .figure-header-container,
.single-post article.post .figure-header-container header {
  background: var(--color-primary) !important;
}
.single-post article.post .figure-header-container.playing-video,
.single-post article.post .figure-header-container.playing-video header {
  background: #000 !important;
}

/* Figure ::before — primary-color left border technique */
@media only screen and (min-width: 768px) {
  article.featured .figure,
  .single-post article.post .figure-header-container .figure {
    border-radius: 40px 0 0 40px !important;
    overflow: hidden !important;
    position: relative !important;
  }

  article.featured .figure::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    border-left: 2000px solid var(--color-primary) !important;
    margin-left: -2000px !important;
    z-index: 2 !important;
    pointer-events: none !important;
    background: transparent !important;
    filter: none !important;
    width: auto !important;
  }

  .single-post article.post .figure-header-container .figure::before {
    content: none !important;
  }
}

/* Hero: 10% taller, min-height to prevent collapse, max-height cap, delicate divider */
article.featured,
.single-post article.post .figure-header-container {
  min-height: 440px !important;
  max-height: 750px !important;
  overflow: hidden !important;
}
@media only screen and (min-width: 768px) {
  article.featured {
    min-height: 484px !important; /* ~10% taller base */
  }
  .single-post article.post .figure-header-container {
    min-height: 484px !important;
  }
}

/* Hero image fills available height — keep in flow so .figure doesn’t collapse */
article.featured .figure,
.single-post article.post .figure-header-container .figure {
  display: block !important;
  height: 100% !important;
  min-height: 100% !important;
  position: relative !important;
  align-self: stretch !important;
  overflow: hidden !important;
}
@media only screen and (min-width: 768px) {
  article.featured .figure,
  .single-post article.post .figure-header-container .figure {
    min-height: 484px !important;
  }
}
article.featured .figure figure,
.single-post article.post .figure-header-container .figure figure {
  margin: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}
article.featured .figure img,
article.featured .figure figure img,
.single-post article.post .figure-header-container .figure img,
.single-post article.post .figure-header-container .figure figure img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
}
/* Desktop only: fixed min-height so hero image doesn’t collapse; on mobile (< 900px) no min-height for natural aspect ratio */
@media only screen and (min-width: 900px) {
  article.featured .figure figure,
  .single-post article.post .figure-header-container .figure figure {
    min-height: 484px !important;
  }
  article.featured .figure img,
  article.featured .figure figure img,
  .single-post article.post .figure-header-container .figure img,
  .single-post article.post .figure-header-container .figure figure img {
    min-height: 484px !important;
  }
}

/* Below 900px: hide the decorative divider on featured hero */
@media only screen and (max-width: 899px) {
  article.featured .figure::before {
    content: none !important;
    display: none !important;
  }
}

/* Hero category divider (Life Stages • Money Matters): small delicate bullet */
article.featured header .post-categories li:not(:last-child)::after,
.single-post .figure-header-container header .post-categories li:not(:last-child)::after {
  content: "\00B7" !important;
  font-size: 0.5em !important;
  padding: 0 8px !important;
  opacity: 0.9;
}

/* Hero post-categories: bold, 6px margin-bottom, Inter */
article.featured header .post-categories,
.single-post .figure-header-container header .post-categories {
  font-weight: 700 !important;
  margin-bottom: 6px !important;
  font-family: "Season VF Trial", "Season VF TRIAL", sans-serif !important;
}
article.featured header .post-categories a,
.single-post .figure-header-container header .post-categories a {
  font-weight: 700 !important;
  font-family: "Season VF Trial", "Season VF TRIAL", sans-serif !important;
}
/* Hero author / read time: Inter */
article.featured header .header-content p,
article.featured header .author,
article.featured header .author a,
article.featured header .reading-estimative,
.single-post .figure-header-container header .header-content p,
.single-post .figure-header-container header .author,
.single-post .figure-header-container header .author a,
.single-post .figure-header-container header .reading-estimative {
  font-family: "Season VF Trial", "Season VF TRIAL", sans-serif !important;
}
/* Inner post hero: left-align categories, title, author, date (bundled single.css centers) */
.single-post article.post .figure-header-container header {
  text-align: left !important;
}
.single-post article.post .figure-header-container header .header-content,
.single-post article.post .figure-header-container header .header-content > *,
.single-post article.post .figure-header-container header .post-categories,
.single-post article.post .figure-header-container header .post-categories li,
.single-post article.post .figure-header-container header p,
.single-post article.post .figure-header-container header time {
  text-align: left !important;
}

/* Hero title: black on all sizes, hover stays black (match bundled article.post so we beat .header-content > * { color: #fff }) */
article.featured header h1,
article.featured header h1 a,
.single-post .figure-header-container header h1,
.single-post .figure-header-container header .header-content h1,
.single-post article.post .figure-header-container header h1,
.single-post article.post .figure-header-container header .header-content h1 {
  color: #000000 !important;
  font-variation-settings: "wght" 900, "SERF" 100 !important;
  text-wrap: balance !important;
  transition: color 200ms ease !important;
}
article.featured header h1 a:hover,
.single-post .figure-header-container header h1:hover,
.single-post .figure-header-container header .header-content h1:hover,
.single-post article.post .figure-header-container header h1:hover,
.single-post article.post .figure-header-container header .header-content h1:hover {
  color: #000000 !important;
}

/* Hero clock icon: white on all sizes */
article.featured header .reading-estimative::before,
.single-post .figure-header-container header .reading-estimative::before {
  content: url("./img/icon-clock-white.svg") !important;
}

/* At 900px: hero stacks — image first, content second */
@media only screen and (max-width: 899px) {
  article.featured {
    display: flex !important;
    flex-direction: column !important;
  }
  article.featured .figure {
    order: 1 !important;
    width: 100% !important;
    float: none !important;
    min-height: unset !important;
  }
  article.featured .figure figure,
  article.featured .figure img {
    min-height: unset !important;
    object-position: center center !important;
  }
  .single-post article.post .figure-header-container .figure img,
  .single-post article.post .figure-header-container .figure figure img {
    object-position: center center !important;
  }
  article.featured header {
    order: 2 !important;
    width: 100% !important;
    background: var(--color-primary) !important;
    padding: 2em 3% !important;
    position: relative !important;
    height: auto !important;
  }
  article.featured header .header-content {
    margin-top: 0 !important;
    padding: 0 !important;
  }
  /* Keep hero text white on mobile — title (h1) is black, rest white */
  article.featured header .header-content > *,
  article.featured header .post-categories,
  article.featured header .post-categories a,
  article.featured header .post-categories li,
  article.featured header p,
  article.featured header .author,
  article.featured header .author a,
  article.featured header .reading-estimative {
    color: #ffffff !important;
  }
  article.featured header h1,
  article.featured header h1 a {
    color: #000000 !important;
  }
  .single-post article.post .figure-header-container {
    display: flex !important;
    flex-direction: column !important;
    min-height: unset !important;
    max-height: none !important;
    height: auto !important;
  }
  .single-post article.post .figure-header-container .figure {
    order: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    float: none !important;
    min-height: 0 !important;
    height: auto !important;
    align-self: stretch !important;
  }
  .single-post article.post .figure-header-container .figure figure,
  .single-post article.post .figure-header-container .figure img {
    min-height: unset !important;
    height: auto !important;
  }
  .single-post article.post .figure-header-container header {
    order: 2 !important;
    width: 100% !important;
    padding: 2em 3% !important;
    background: var(--color-primary) !important;
  }
  .single-post .figure-header-container header .header-content > *,
  .single-post .figure-header-container header .post-categories,
  .single-post .figure-header-container header .post-categories a,
  .single-post .figure-header-container header .post-categories li,
  .single-post .figure-header-container header p,
  .single-post .figure-header-container header .author,
  .single-post .figure-header-container header .author a {
    color: #ffffff !important;
  }
  .single-post .figure-header-container header h1,
  .single-post .figure-header-container header .header-content h1,
  .single-post article.post .figure-header-container header h1,
  .single-post article.post .figure-header-container header .header-content h1 {
    color: #000000 !important;
  }
}

/* Mobile: left-align post title and metadata (author • date) in .article-wrapper */
@media (max-width: 899px) {
  .single-post .article-wrapper header.visible-xs,
  .single-post .article-wrapper header.visible-xs .post-categories,
  .single-post .article-wrapper header.visible-xs h1,
  .single-post .article-wrapper header.visible-xs p,
  .single-post .article-wrapper header.visible-xs .author,
  .single-post .article-wrapper header.visible-xs .author a,
  .single-post .article-wrapper header.visible-xs time {
    text-align: left !important;
  }
}

.section-category.section-category-trending article:not(.slick-current) {
  opacity: 0.7 !important;
}

/* Section category sliders: triangle/overlay on .figure::before */
.section-category.section-category-video article:not(.slick-current) .figure::before,
.section-category.section-category-trending article:not(.slick-current) .figure::before,
.section-category.section-category-cartoon article:not(.slick-current) .figure::before {
  background: #3333 !important;
  content: "";
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  z-index: 9;
  width: 100%;
}

/* Sidebar trending top border */
.sidebar .trending ul {
  border-top-color: var(--color-primary) !important;
}

/* Dashed dividers using primary */
.related-posts-after-content .wp-container,
.author-bio,
.page-subscribe .newsletter-subscribe-bottom {
  background-image: linear-gradient(to right, #fff 40%, var(--color-primary) 20%) !important;
}

/* RSSC related articles top border */
.single-post article .rssc .rssc-list > li {
  border-top-color: var(--color-primary) !important;
}

/* VMP box */
.single-post article .vmp {
  border-color: var(--color-primary) !important;
}
.single-post article .vmp-content .btn {
  color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
}
.single-post article .vmp-content .btn:hover {
  background: var(--color-primary) !important;
}

/* Buttons / CTAs */
.button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
  color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
}
.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover {
  color: #ffffff !important;
  background-color: var(--color-primary) !important;
}
.button.button-red {
  background-color: var(--color-primary) !important;
}

/* Subscribe form button */
.subscribe-container button[type="submit"] {
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
}
.subscribe-container button[type="submit"]:hover {
  background-color: #bb1234 !important;
}

/* Subscribe radio checked */
.subscribe-container input[type="radio"]:checked + label::after {
  background-color: var(--color-primary) !important;
}

/* Tooltip icon */
.subscribe-container .tooltip-icon {
  background-color: var(--color-primary) !important;
}

/* Newsletter unsubscribe submit */
#form-newsletter-unsubscribe input[type="submit"] {
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: #ffffff !important;
}
#form-newsletter-unsubscribe input[type="submit"]:hover {
  background-color: #ffffff !important;
  color: var(--color-primary) !important;
}

/* Form input borders */
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
select,
textarea {
  border-color: var(--color-primary) !important;
}

/* Search form bottom border */
header[role="banner"] .search-container input[type="text"] {
  border-bottom-color: var(--color-primary) !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
}

/* Article read more button */
article .read-more:hover {
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
}

/* Social share on single posts */
.single-post article .social a {
  color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
}
.single-post article .social a:hover {
  background: var(--color-primary) !important;
}

/* Was this helpful block */
.single-post .helpful-block-content .wth-submit,
.single-post .helpful-block-content ul li a {
  color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
}
.single-post .helpful-block-content .wth-submit:hover,
.single-post .helpful-block-content ul li a:hover {
  background: var(--color-primary) !important;
  color: #ffffff !important;
}

/* Post suggestion search border */
.post-suggestion-container form input[type="text"] {
  border-bottom-color: var(--color-primary) !important;
}

/* Related topics (tags) — smaller than bundled 2em */
.single-post .tags,
.single-post .tags a {
  font-size: var(--font-size-body) !important;
  font-weight: 500 !important;
}
#tags a:hover,
.single-post .tags a:hover {
  color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
}

/* Category hover on listing */
article:not(.featured) .post-categories a:hover {
  color: var(--color-primary) !important;
}

/* Article h1 hover */
article h1:hover {
  color: var(--color-primary) !important;
}

/* Twitter share button color (keeping platform color) stays blue */

/* Pagination */
.nav-next,
.nav-previous {
  color: var(--color-primary) !important;
}

/* .red utility */
.red {
  color: var(--color-primary) !important;
}

body {
  margin-bottom: 0 !important;
}

/* Hero pages: square bottom until scroll — removes white gap between header and hero */
body.has-hero-header:not(.header-scrolled) header[role="banner"] .bg-gradient-primary {
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}
body.has-hero-header header[role="banner"] .bg-gradient-primary {
  transition:
    border-bottom-left-radius 0.4s ease,
    border-bottom-right-radius 0.4s ease;
}

main[role="main"] {
  padding-top: 0 !important;
}
/* Below 1400px the fixed header needs a little breathing room */
@media (max-width: 1399px) {
  body main[role="main"],
  main[role="main"] {
    padding-top: 80px !important;
  }
}
/* Desktop (1400px+): 80px band above hero — pink→white vertical blend with header; hidden below 1400px (main padding-top 80px instead) */
.hero-gradient-spacer {
  display: none;
}
@media (min-width: 1400px) {
  .hero-gradient-spacer {
    display: block;
    width: 100%;
    height: 80px;
    flex-shrink: 0;
    pointer-events: none;
    /* Same horizontal pink as header, with vertical fade to white */
    background-image:
      linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.35) 45%, #ffffff 100%),
      linear-gradient(90deg, #e71843 0%, #e71843 79.69%, #ed5071 89.62%, #f4a1b3 100%);
    background-color: #ffffff;
  }
}

/* =============================================================================
   Migrated from WP Customize Additional CSS
   ============================================================================= */

/* Subscribe container inside header — hide by default, prevent white line bleed */
header[role="banner"] .subscribe-container {
  top: -159px;
  display: none;
  background: transparent;
  min-height: 0;
  border: none;
}
header[role="banner"] .subscribe-container.open {
  display: block;
}

/* Subscribe button — updated to current primary color */
.subscribe-container button {
  background: var(--color-primary);
  color: white;
}
.subscribe-container button:hover {
  background: transparent;
  color: var(--color-primary);
}

/* Hide AddThis share on listing pages */
.share.addthis_toolbox.on-listing {
  display: none !important;
}

/* Hide ad units */
.ad-why-not-both {
  display: none;
}
body.category .ad-container-loop,
body.tag .ad-container-loop {
  display: none;
}

/* Author bio layout */
.author-bio {
  display: flex;
  flex-wrap: wrap;
}
.author-bio div {
  width: 100%;
  text-align: center;
  margin: auto;
  padding: 0 !important;
}
.author-bio div img {
  margin: auto;
  margin-bottom: 20px;
}
/* Team Vancity signature block: header logo on pink gradient, round */
.author-bio-team-logo {
  width: 120px;
  height: 120px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: linear-gradient(90deg, #e71843 0%, #e71843 79.69%, #ed5071 89.62%, #f4a1b3 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
}
.author-bio-team-logo-img {
  width: 100%;
  height: auto;
  max-width: 80px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}
/* Custom PNG logo (e.g. GoodMoneyStaff) — no filter, use as-is */
.author-bio-team-logo-custom .author-bio-team-logo-img {
  filter: none;
}
.author-bio div p {
  margin: auto;
  text-align: left;
}
.author-bio .author-bio-name-link {
  color: inherit;
  text-decoration: underline;
  cursor: pointer;
}
.author-bio .author-bio-name-link:hover {
  text-decoration-thickness: 2px;
}

/* Author bio social: X icon (replacing Twitter) + left-align "Follow @..." to match icon */
.author-bio .social-links {
  text-align: left;
}
.author-bio .social-links li {
  text-align: left;
  margin-left: 0;
}
.author-bio .social-links a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.author-bio .social-links .twitter,
.author-bio .social-links .x {
  float: none !important;
  display: inline-block !important;
  width: 20px !important;
  height: 20px !important;
  margin: 0 !important;
  background: url("./img/icon-x-black.svg") no-repeat center !important;
  background-size: contain !important;
  vertical-align: middle !important;
}

/* Blog CTA button */
#blog-button {
  width: 300px;
  margin: auto;
  padding: 1em;
  border: 3px solid #000;
  border-radius: 6px;
  background-color: #000;
  color: #f8f4e7;
  font-size: 18px;
  line-height: 20px;
  font-weight: 700;
  text-align: center;
}
#blog-button:hover,
#blog-button:focus {
  border-color: var(--color-primary);
  background-color: var(--color-primary);
  color: #f8f4e7;
  text-shadow: none;
}
@media screen and (max-width: 767px) {
  #blog-button {
    width: 100%;
    min-width: 0;
  }
}

/* MaxButtons plugin font */
.maxbutton .mb-text {
  font-family: "Sharp Grotesk", sans-serif !important;
}

/* Hide search link if it appears inside a nav <ul> as an <a> */
nav ul a.search.ir {
  display: none;
}

/* Prose headings — always full serif weight, balanced wrap */
.prose :where(h1, h2, h3, h4):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-variation-settings: "wght" 900, "SERF" 100 !important;
  text-wrap: balance !important;
}

/* =============================================================================
   Prose size overrides — 18px mobile, 20px desktop (accessibility / readability).
   ============================================================================= */
.entry.prose p,
.entry.prose li,
.entry.prose ul li,
.entry.prose ol li {
  font-size: 1.125rem !important;
  line-height: 1.7778 !important;
}
@media (min-width: 768px) {
  .entry.prose p,
  .entry.prose li,
  .entry.prose ul li,
  .entry.prose ol li {
    font-size: 1.25rem !important;
    line-height: 1.8 !important;
  }
}

/* Hide helpful block widget content */
.helpful-block-content {
  display: none !important;
}

/* =============================================================================
   Post content tables (Gutenberg wp-block-table + classic editor)
   ============================================================================= */
.single-post .entry table,
.single-post .entry .wp-block-table table,
.single-post .entry figure.wp-block-table table {
  width: 100% !important;
  border-collapse: collapse !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
  margin: 0 !important;
}

/* Scrollable wrapper so wide tables don't break layout on small screens */
.single-post .entry .wp-block-table,
.single-post .entry figure.wp-block-table {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  display: block !important;
  width: 100% !important;
  margin: 1.5em 0 !important;
}

.single-post .entry table td,
.single-post .entry table th {
  padding: 12px 16px !important;
  text-align: left !important;
  vertical-align: top !important;
  border: 1px solid #e5e7eb !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
  min-width: 120px !important;
}

/* Respect Gutenberg's has-text-align-center on cells */
.single-post .entry table td.has-text-align-center,
.single-post .entry table th.has-text-align-center {
  text-align: center !important;
}

/* Header row: slightly bolder */
.single-post .entry table tr:first-child td,
.single-post .entry table thead td,
.single-post .entry table thead th,
.single-post .entry table th {
  font-weight: 600 !important;
  background-color: rgba(0, 0, 0, 0.04) !important;
}

/* Zebra rows for readability */
.single-post .entry table tbody tr:nth-child(even) td {
  background-color: rgba(0, 0, 0, 0.02) !important;
}

/* Preserve inline background-color from has-background tables */
.single-post .entry table.has-background,
.single-post .entry .wp-block-table table.has-background {
  background-color: inherit !important;
}