@charset "UTF-8";

/* #region Fonts */
/* Custom child template fonts (local) — editchordsheetsonline.com. Moved here from customfont.css
   (2026-10-22): as Template Style › Advanced › Font Scheme, Cassiopeia preloads that file, and
   pages that do not use it (the Setlists app) gave a "preloaded but not used" warning. Font
   Scheme is now "None"; a font file is only downloaded when a page uses it.
   Files: media/templates/site/cassiopeia_r2h/fonts/ (Google Fonts, latin subset, variable
   weight). Hosted locally: no visitor data goes to Google (GDPR). */

/* Schibsted Grotesk — headings (variable 400–900) */
@font-face {
  font-display: swap;
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 400 900;
  src: url('../fonts/schibsted-grotesk.woff2') format('woff2');
}

/* Figtree — body text (variable 300–900) */
@font-face {
  font-display: swap;
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 300 900;
  src: url('../fonts/figtree.woff2') format('woff2');
}

/* JetBrains Mono — chord symbols and notation source (variable 100–800) */
@font-face {
  font-display: swap;
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  src: url('../fonts/jetbrains-mono.woff2') format('woff2');
}

/* Kalam 700 — hand-lettered chords in the chart mockups (.cs-chart-hand, .cs-bar) */
@font-face {
  font-display: swap;
  font-family: 'Kalam';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/kalam-700.woff2') format('woff2');
}

:root {
  --cassiopeia-font-family-headings: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --cassiopeia-font-weight-headings: 700;
  --cassiopeia-font-family-body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --cassiopeia-font-weight-normal: 400;
}

/* #endregion Fonts */

/* #region Template Colors */
/* Palette: editchordsheetsonline.com design ("Chord Sheet Design System", 2026-10-14).
   The --cs-* tokens are the source; the legacy template variables below map onto them.
   Previous green palette (rgb(118, 193, 68)) is in the backup of 2026-10-14. */
:root {
  /* --- Design tokens --- */
  --cs-surface: #ffffff;
  --cs-surface-alt: #f3f5f7;
  --cs-border: #dde3e8;
  --cs-ink: #16212b;
  --cs-ink-muted: #55626f;
  --cs-primary: #0e5e68;
  --cs-primary-rgb: 14, 94, 104;
  --cs-primary-hover: #0a4850;
  --cs-primary-soft: #e2f0f1;
  --cs-chord: #9c520a;
  --cs-chord-soft: #fdefd9;
  --cs-chord-bright: #f2b544;
  --cs-inverse: #12262e;
  --cs-on-inverse: #ffffff;
  --cs-on-inverse-muted: #b4c3ca;
  --cs-primary-on-inverse: #5fc3c9;
  --cs-success: #1e7a45;
  --cs-danger: #b42318;

  /* --- Template variables --- */
  --cassiopeia-color-primary: var(--cs-primary);
  --cassiopeia-color-link: var(--cs-primary);
  --cassiopeia-color-hover: var(--cs-primary-hover);

  --link-color: var(--cs-primary);
  --link-color-rgb: var(--cs-primary-rgb);
  --link-hover-color: var(--cs-primary-hover);
  --link-hover-color-rgb: 10, 72, 80;

  --nav-bg: var(--cs-surface);
  --nav-color: var(--cs-ink);
  --nav-color-hover: var(--cs-primary);
  --nav-color-bottom-border: var(--cs-primary);

  --header-border-bottom: 1px solid var(--cs-border);

  --nav-oc-bg: var(--cs-surface);
  --nav-oc-color: var(--cs-ink);
  --nav-oc-color-hover: var(--cs-primary);

  --nav-dropdown-bg: var(--cs-surface);
  --nav-dropdown-color: var(--cs-ink);
  --nav-dropdown-color-hover: var(--cs-primary);

  --primary: var(--cs-primary);
  --primary-rgb: var(--cs-primary-rgb);
  --primary-hover-color: var(--cs-primary-hover);

  --secondary: var(--cs-ink-muted);
  --secondary-rgb: 85, 98, 111;
  --secondary-hover-color: color-mix(in lab, var(--secondary) 80%, black);

  --success: var(--cs-success);
  --success-rgb: 30, 122, 69;
  --success-hover-color: color-mix(in lab, var(--success) 80%, black);

  --warning: var(--cs-chord-bright);
  --warning-rgb: 242, 181, 68;
  --warning-hover-color: color-mix(in lab, var(--warning) 80%, black);

  --danger: var(--cs-danger);
  --danger-rgb: 180, 35, 24;
  --danger-hover-color: color-mix(in lab, var(--danger) 80%, black);

  --info: var(--cs-primary-on-inverse);
  --info-rgb: 95, 195, 201;
  --info-hover-color: color-mix(in lab, var(--info) 80%, black);

  --light: var(--cs-surface-alt);
  --light-rgb: 243, 245, 247;
  --light-hover-color: color-mix(in lab, var(--light) 90%, black);

  --dark: var(--cs-inverse);
  --dark-rgb: 18, 38, 46;
  --dark-hover-color: color-mix(in lab, var(--dark) 80%, white);

  --heading-color: var(--cs-ink);

  /* Border radius (design: 6 / 10 / 16px) */
  --border-radius: 10px;
  --border-radius-sm: 6px;
  --border-radius-lg: 16px;
  --border-radius-xl: 16px;
  --border-radius-xxl: 2rem;
  --border-radius-2xl: var(--border-radius-xxl);

  --content-width: 1320px;
}

/* #endregion Template Colors */

/* #region Template Cassiopeia Grid */
/* ------------------------------------------------------------------ */
/* Set prefered grid width, number of columns and the gutter width. Make sure to multiply the grid template areas to match the number of columns 1320px is the default content with of the Cassiopeia template */
@supports (display: grid) {
  .site-grid {
    --number-of-columns: 4;
    --gutterwidth: 2rem;
    --gutterwidth-total: calc((var(--number-of-columns) - 1) * var(--gutterwidth));
    --lanewidth: calc((var(--content-width, 1320px) - var(--gutterwidth-total)) / var(--number-of-columns));
    grid-template-columns: [full-start] minmax(0, 1fr) [main-start] minmax(0, 10rem) minmax(0, 10rem) minmax(0, 20rem) minmax(0, 33.5rem) [main-end] minmax(0, 1fr) [full-end];
    grid-template-areas: ".banner banner banner banner." ".top-a top-a top-a top-a." ".top-fullwidth top-fullwidth top-fullwidth top-fullwidth." ".top-b top-b top-b top-b." ".comp comp comp comp." ".side-r side-r side-r side-r." ".side-l side-l side-l side-l." ".bot-a bot-a bot-a bot-a." ".bottom-fullwidth bottom-fullwidth bottom-fullwidth bottom-fullwidth." ".bot-b bot-b bot-b bot-b.";
    grid-template-columns: [full-start] minmax(0, 1fr) [main-start] repeat(var(--number-of-columns), minmax(0, var(--lanewidth))) [main-end] minmax(0, 1fr) [full-end];
    grid-gap: 0 var(--gutterwidth);
  }

  @media (width >=992px) {
    .site-grid {
      grid-template-areas:
        ".banner banner banner banner."
        ".top-a top-a top-a top-a."
        ".top-fullwidth top-fullwidth top-fullwidth top-fullwidth."
        ".top-b top-b top-b top-b."
        ".side-l comp comp side-r."
        ".bot-a bot-a bot-a bot-a."
        ".bottom-fullwidth bottom-fullwidth bottom-fullwidth bottom-fullwidth."
        ".bot-b bot-b bot-b bot-b.";
    }
  }
}

.container-top-fullwidth {
  grid-area: top-fullwidth;
}

.container-bottom-fullwidth {
  grid-area: bottom-fullwidth;
}

/* Fix 2026-10-14: the areas top-fullwidth and bottom-fullwidth were not part of
   Cassiopeia's grid-template-areas, so both positions ended up in implicit rows
   (bottom-fullwidth rendered above the content). Full-width rows span all 6 columns. */
.site-grid {
  grid-template-areas:
    ". banner banner banner banner ."
    ". top-a top-a top-a top-a ."
    "top-fullwidth top-fullwidth top-fullwidth top-fullwidth top-fullwidth top-fullwidth"
    ". top-b top-b top-b top-b ."
    ". comp comp comp comp ."
    ". side-r side-r side-r side-r ."
    ". side-l side-l side-l side-l ."
    ". bot-a bot-a bot-a bot-a ."
    "bottom-fullwidth bottom-fullwidth bottom-fullwidth bottom-fullwidth bottom-fullwidth bottom-fullwidth"
    ". bot-b bot-b bot-b bot-b .";
}

@media (width >=992px) {
  .site-grid {
    grid-template-areas:
      ". banner banner banner banner ."
      ". top-a top-a top-a top-a ."
      "top-fullwidth top-fullwidth top-fullwidth top-fullwidth top-fullwidth top-fullwidth"
      ". top-b top-b top-b top-b ."
      ". side-l comp comp side-r ."
      ". bot-a bot-a bot-a bot-a ."
      "bottom-fullwidth bottom-fullwidth bottom-fullwidth bottom-fullwidth bottom-fullwidth bottom-fullwidth"
      ". bot-b bot-b bot-b bot-b .";
  }
}

.container-banner {
  margin: 0;
}

/* #endregion Template Cassiopeia Grid */

/* #region Template CSS Grid */
/* ------------------------------------------------------------------ */
/* Reset bootstrap container width */
.container,
.container-fluid,
.container-xxl,
.container-xl,
.container-lg,
.container-md,
.container-sm {
  padding-inline: 0;
  max-width: unset;
}

.container-xxl {
  width: min(100% - var(--gutter-x) * 2, 1600px);
}

.container-xl {
  width: min(100% - var(--gutter-x) * 2, 1400px);
}

.container {
  width: min(100% - var(--gutter-x) * 2, var(--content-width, 1320px));
}

.container-0 {
  width: min(100%, var(--content-width, 1320px));
}

.container-lg {
  width: min(100% - var(--gutter-x) * 2, 992px);
}

.container-md {
  width: min(100% - var(--gutter-x) * 2, 768px);
}

.container-sm {
  width: min(100% - var(--gutter-x) * 2, 576px);
}

.container-fluid {
  max-width: calc(100% - var(--gutter-x) * 2);
}

/* ------------------------------------------------------------------ */
/* Add CSS grid for flexible column layout */
.container-top-a,
.container-top-b,
.container-bottom-a,
.container-bottom-b,
.grid {
  display: grid;
  grid-template-rows: repeat(var(--rows, 1), 1fr);
  grid-template-columns: repeat(var(--columns, 12), 1fr);
  gap: var(--gap, 1em);
}

.grid > *,
.container-top-a > *,
.container-top-b > *,
.container-bottom-a > *,
.container-bottom-b > * {
  grid-column: auto/span 12;
}

.g-col-1 {
  grid-column: auto/span 1;
}

.g-col-2 {
  grid-column: auto/span 2;
}

.g-col-3 {
  grid-column: auto/span 3;
}

.g-col-4 {
  grid-column: auto/span 4;
}

.g-col-5 {
  grid-column: auto/span 5;
}

.g-col-6 {
  grid-column: auto/span 6;
}

.g-col-7 {
  grid-column: auto/span 7;
}

.g-col-8 {
  grid-column: auto/span 8;
}

.g-col-9 {
  grid-column: auto/span 9;
}

.g-col-10 {
  grid-column: auto/span 10;
}

.g-col-11 {
  grid-column: auto/span 11;
}

.g-col-12 {
  grid-column: auto/span 12;
}

.g-start-1 {
  grid-column-start: 1;
}

.g-start-2 {
  grid-column-start: 2;
}

.g-start-3 {
  grid-column-start: 3;
}

.g-start-4 {
  grid-column-start: 4;
}

.g-start-5 {
  grid-column-start: 5;
}

.g-start-6 {
  grid-column-start: 6;
}

.g-start-7 {
  grid-column-start: 7;
}

.g-start-8 {
  grid-column-start: 8;
}

.g-start-9 {
  grid-column-start: 9;
}

.g-start-10 {
  grid-column-start: 10;
}

.g-start-11 {
  grid-column-start: 11;
}

@media (min-width: 576px) {
  .g-col-sm-1 {
    grid-column: auto/span 1;
  }

  .g-col-sm-2 {
    grid-column: auto/span 2;
  }

  .g-col-sm-3 {
    grid-column: auto/span 3;
  }

  .g-col-sm-4 {
    grid-column: auto/span 4;
  }

  .g-col-sm-5 {
    grid-column: auto/span 5;
  }

  .g-col-sm-6 {
    grid-column: auto/span 6;
  }

  .g-col-sm-7 {
    grid-column: auto/span 7;
  }

  .g-col-sm-8 {
    grid-column: auto/span 8;
  }

  .g-col-sm-9 {
    grid-column: auto/span 9;
  }

  .g-col-sm-10 {
    grid-column: auto/span 10;
  }

  .g-col-sm-11 {
    grid-column: auto/span 11;
  }

  .g-col-sm-12 {
    grid-column: auto/span 12;
  }

  .g-start-sm-1 {
    grid-column-start: 1;
  }

  .g-start-sm-2 {
    grid-column-start: 2;
  }

  .g-start-sm-3 {
    grid-column-start: 3;
  }

  .g-start-sm-4 {
    grid-column-start: 4;
  }

  .g-start-sm-5 {
    grid-column-start: 5;
  }

  .g-start-sm-6 {
    grid-column-start: 6;
  }

  .g-start-sm-7 {
    grid-column-start: 7;
  }

  .g-start-sm-8 {
    grid-column-start: 8;
  }

  .g-start-sm-9 {
    grid-column-start: 9;
  }

  .g-start-sm-10 {
    grid-column-start: 10;
  }

  .g-start-sm-11 {
    grid-column-start: 11;
  }
}

@media (min-width: 768px) {
  .g-col-md-1 {
    grid-column: auto/span 1;
  }

  .g-col-md-2 {
    grid-column: auto/span 2;
  }

  .g-col-md-3 {
    grid-column: auto/span 3;
  }

  .g-col-md-4 {
    grid-column: auto/span 4;
  }

  .g-col-md-5 {
    grid-column: auto/span 5;
  }

  .g-col-md-6 {
    grid-column: auto/span 6;
  }

  .g-col-md-7 {
    grid-column: auto/span 7;
  }

  .g-col-md-8 {
    grid-column: auto/span 8;
  }

  .g-col-md-9 {
    grid-column: auto/span 9;
  }

  .g-col-md-10 {
    grid-column: auto/span 10;
  }

  .g-col-md-11 {
    grid-column: auto/span 11;
  }

  .g-col-md-12 {
    grid-column: auto/span 12;
  }

  .g-start-md-1 {
    grid-column-start: 1;
  }

  .g-start-md-2 {
    grid-column-start: 2;
  }

  .g-start-md-3 {
    grid-column-start: 3;
  }

  .g-start-md-4 {
    grid-column-start: 4;
  }

  .g-start-md-5 {
    grid-column-start: 5;
  }

  .g-start-md-6 {
    grid-column-start: 6;
  }

  .g-start-md-7 {
    grid-column-start: 7;
  }

  .g-start-md-8 {
    grid-column-start: 8;
  }

  .g-start-md-9 {
    grid-column-start: 9;
  }

  .g-start-md-10 {
    grid-column-start: 10;
  }

  .g-start-md-11 {
    grid-column-start: 11;
  }
}

@media (min-width: 992px) {
  .g-col-lg-1 {
    grid-column: auto/span 1;
  }

  .g-col-lg-2 {
    grid-column: auto/span 2;
  }

  .g-col-lg-3 {
    grid-column: auto/span 3;
  }

  .g-col-lg-4 {
    grid-column: auto/span 4;
  }

  .g-col-lg-5 {
    grid-column: auto/span 5;
  }

  .g-col-lg-6 {
    grid-column: auto/span 6;
  }

  .g-col-lg-7 {
    grid-column: auto/span 7;
  }

  .g-col-lg-8 {
    grid-column: auto/span 8;
  }

  .g-col-lg-9 {
    grid-column: auto/span 9;
  }

  .g-col-lg-10 {
    grid-column: auto/span 10;
  }

  .g-col-lg-11 {
    grid-column: auto/span 11;
  }

  .g-col-lg-12 {
    grid-column: auto/span 12;
  }

  .g-start-lg-1 {
    grid-column-start: 1;
  }

  .g-start-lg-2 {
    grid-column-start: 2;
  }

  .g-start-lg-3 {
    grid-column-start: 3;
  }

  .g-start-lg-4 {
    grid-column-start: 4;
  }

  .g-start-lg-5 {
    grid-column-start: 5;
  }

  .g-start-lg-6 {
    grid-column-start: 6;
  }

  .g-start-lg-7 {
    grid-column-start: 7;
  }

  .g-start-lg-8 {
    grid-column-start: 8;
  }

  .g-start-lg-9 {
    grid-column-start: 9;
  }

  .g-start-lg-10 {
    grid-column-start: 10;
  }

  .g-start-lg-11 {
    grid-column-start: 11;
  }
}

@media (min-width: 1200px) {
  .g-col-xl-1 {
    grid-column: auto/span 1;
  }

  .g-col-xl-2 {
    grid-column: auto/span 2;
  }

  .g-col-xl-3 {
    grid-column: auto/span 3;
  }

  .g-col-xl-4 {
    grid-column: auto/span 4;
  }

  .g-col-xl-5 {
    grid-column: auto/span 5;
  }

  .g-col-xl-6 {
    grid-column: auto/span 6;
  }

  .g-col-xl-7 {
    grid-column: auto/span 7;
  }

  .g-col-xl-8 {
    grid-column: auto/span 8;
  }

  .g-col-xl-9 {
    grid-column: auto/span 9;
  }

  .g-col-xl-10 {
    grid-column: auto/span 10;
  }

  .g-col-xl-11 {
    grid-column: auto/span 11;
  }

  .g-col-xl-12 {
    grid-column: auto/span 12;
  }

  .g-start-xl-1 {
    grid-column-start: 1;
  }

  .g-start-xl-2 {
    grid-column-start: 2;
  }

  .g-start-xl-3 {
    grid-column-start: 3;
  }

  .g-start-xl-4 {
    grid-column-start: 4;
  }

  .g-start-xl-5 {
    grid-column-start: 5;
  }

  .g-start-xl-6 {
    grid-column-start: 6;
  }

  .g-start-xl-7 {
    grid-column-start: 7;
  }

  .g-start-xl-8 {
    grid-column-start: 8;
  }

  .g-start-xl-9 {
    grid-column-start: 9;
  }

  .g-start-xl-10 {
    grid-column-start: 10;
  }

  .g-start-xl-11 {
    grid-column-start: 11;
  }
}

@media (min-width: 1400px) {
  .g-col-xxl-1 {
    grid-column: auto/span 1;
  }

  .g-col-xxl-2 {
    grid-column: auto/span 2;
  }

  .g-col-xxl-3 {
    grid-column: auto/span 3;
  }

  .g-col-xxl-4 {
    grid-column: auto/span 4;
  }

  .g-col-xxl-5 {
    grid-column: auto/span 5;
  }

  .g-col-xxl-6 {
    grid-column: auto/span 6;
  }

  .g-col-xxl-7 {
    grid-column: auto/span 7;
  }

  .g-col-xxl-8 {
    grid-column: auto/span 8;
  }

  .g-col-xxl-9 {
    grid-column: auto/span 9;
  }

  .g-col-xxl-10 {
    grid-column: auto/span 10;
  }

  .g-col-xxl-11 {
    grid-column: auto/span 11;
  }

  .g-col-xxl-12 {
    grid-column: auto/span 12;
  }

  .g-start-xxl-1 {
    grid-column-start: 1;
  }

  .g-start-xxl-2 {
    grid-column-start: 2;
  }

  .g-start-xxl-3 {
    grid-column-start: 3;
  }

  .g-start-xxl-4 {
    grid-column-start: 4;
  }

  .g-start-xxl-5 {
    grid-column-start: 5;
  }

  .g-start-xxl-6 {
    grid-column-start: 6;
  }

  .g-start-xxl-7 {
    grid-column-start: 7;
  }

  .g-start-xxl-8 {
    grid-column-start: 8;
  }

  .g-start-xxl-9 {
    grid-column-start: 9;
  }

  .g-start-xxl-10 {
    grid-column-start: 10;
  }

  .g-start-xxl-11 {
    grid-column-start: 11;
  }
}

/* #endregion Template CSS Grid */

/* #region Template Heading & Menu */
/* ------------------------------------------------------------------ */
/* Styling menu in the header */
.container-header-above {
  z-index: 1040;
}

.container-header {
  padding-block: 0.25rem;
  min-height: 72px;
  z-index: 1039;
  overflow-x: clip;
  box-shadow: unset;
  border-bottom: var(--header-border-bottom, 0);
}

/* Animate navbar */
.container-header {
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

/* When on top add a shadow */
.container-header.navbar-shadow {
  box-shadow: 0 1px 6px 0 rgba(32, 33, 36, 0.28);
}

/* Hide navbar */
.container-header.navbar-hidden {
  transform: translateY(-100%);
  box-shadow: none;
}

.metismenu.mod-menu .metismenu-item {
  padding: 0.5em;
}

/* remove height/padding when empty */
.container-header:not(.container-topbar, .grid-child) {
  padding-block: 0;
  min-height: auto;
}

.container-header .container-search {
  margin-top: 0;
}

@media (width <=767.98px) {
  .container-header .container-nav .container-search {
    margin-top: 0;
  }
}

@media (width <=991.98px) {
  .container-header {
    position: sticky !important;
  }
}

.container-header .container-nav {
  color: var(--white);
  padding-bottom: 0.5em;
}

.container-header nav.navbar {
  flex-grow: 1;
}

/* Align menu items right */
@media (width >=992px) {
  /* .navbar > .offcanvas > .offcanvas-body > ul.mod-menu {
    justify-content: center;
  } */

  .container-header .metismenu.mod-menu .metismenu-item > ul {
    right: 1.5rem;
  }
}

/* ------------------------------------------------------------------ */
/* Style the template brand logo */
.container-header .grid-child.container-nav {
  width: min(100% - 1rem, var(--content-width, 1320px));
  padding-inline: 0;
}

.container-header .navbar-brand {
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.25;
  font-size: unset;
  margin: -.5rem 1rem 0 0;
  padding: 0;
}

.container-header .navbar-brand .brand-logo img {
  width: 100%;
  max-height: 1.75rem;
}

@media (width <=1200px) {
  .container-header .navbar-brand .brand-logo img {
    max-width: 10rem;
  }
}

.container-header .navbar-brand a {
  text-decoration: none;
  font-weight: bold;
  font-size: 1.5rem;
  display: block;
}

.container-header .navbar-brand .site-description {
  font-weight: bold;
  text-wrap: nowrap;
}

@media (width > 992px) {
  .metismenu > .metismenu-item > ul {
    max-height: 90vh;
    overflow-y: auto;
  }
}

/* ------------------------------------------------------------------ */
/* Menu colors */
.metismenu.mod-menu .metismenu-item {
  font-size: 1rem;
}

.container-header {
  background: var(--nav-bg);
  color: var(--nav-color);
}

.container-header .navbar-brand a {
  color: var(--nav-color);
}

.container-header .navbar-brand .site-description {
  color: var(--nav-color);
}

.container-header .navbar > .offcanvas {
  background-color: var(--nav-oc-bg);
  color: var(--nav-oc-color);
}

.container-header .metismenu.mod-menu > li.level-1 > a,
.container-header .metismenu.mod-menu > li.level-1 > button,
.container-header .metismenu.mod-menu > li.level-1 > span {
  /* text-transform: uppercase; */
  color: var(--nav-color);
  font-weight: 700;
}

.container-header .metismenu.mod-menu li.level-1 > .mm-toggler {
  transition: all 0.3s ease-out;
  color: var(--nav-color);
}

.container-header .metismenu.mod-menu > li.level-1.active > a,
.container-header .metismenu.mod-menu > li.level-1.active > .mm-toggler {
  text-decoration: none;
  color: var(--nav-color-hover);
}

.container-header .metismenu.mod-menu > li.level-1 > a:hover,
.container-header .metismenu.mod-menu > li.level-1 > .mm-toggler:hover {
  text-decoration: none;
  color: var(--nav-color-hover);
}

.container-header .metismenu.mod-menu .parent > ul {
  background-color: var(--nav-dropdown-bg);
  color: var(--nav-dropdown-color);
}

.container-header .metismenu.mod-menu .parent > ul li {
  padding: 0.5em 1.5rem;
}

.container-header .metismenu.mod-menu ul .metismenu-item > a,
.container-header .metismenu.mod-menu ul .metismenu-item > .mm-toggler {
  text-decoration: none;
  color: var(--nav-dropdown-color);
  text-underline-offset: 0.25rem;
}

.container-header .metismenu.mod-menu ul .metismenu-item.active > a,
.container-header .metismenu.mod-menu ul .metismenu-item.active > .mm-toggler {
  text-decoration: underline;
  color: var(--nav-dropdown-color-hover);
  text-underline-offset: 0.25rem;
}

.container-header .metismenu.mod-menu ul .metismenu-item > a:hover,
.container-header .metismenu.mod-menu ul .metismenu-item > .mm-toggler:hover {
  text-decoration: underline;
  color: var(--nav-dropdown-color-hover);
  text-underline-offset: 0.25rem;
}

.container-header .metismenu.mod-menu > .metismenu-item > a {
  line-height: 2;
}

.container-header .metismenu.mod-menu .mm-collapse > li.parent > ul {
  left: -0.5rem;
}

.container-header .metismenu > li > a:hover:after,
.container-header .metismenu > li > button:hover:before,
.container-header .metismenu > li.active > a:after,
.container-header .metismenu > li.active > button:before {
  background: var(--nav-color-bottom-border);
}

/* Fix wrapping of carret of long sub items in menu */
.metismenu.mod-menu .metismenu-item .metismenu-item > a {
  flex: 1 1 0%;
  min-width: 0;
  padding-inline-end: 1.5rem;
}

/* ------------------------------------------------------------------ */
/* Menu mobile toggler */
.container-header .navbar-toggler {
  color: var(--nav-color);
  border: 1px solid var(--nav-color);
}

.mobile-menu-toggler-icon {
  width: 30px;
  height: 20px;
  position: relative;
  margin: 0px;
}

.mobile-menu-toggler-icon span {
  display: block;
  position: absolute;
  height: 2px;
  width: 100%;
  left: 0;
  background: currentColor;
}

.mobile-menu-toggler-icon span:nth-child(1) {
  top: 0px;
}

.mobile-menu-toggler-icon span:nth-child(2) {
  top: 10px;
  width: 80%;
}

.mobile-menu-toggler-icon span:nth-child(3) {
  top: 20px;
}

.metismenu.mod-menu .metismenu-item > a:focus,
.metismenu.mod-menu .metismenu-item > button:focus {
  z-index: 10001;
}

.btn-close-modal {
  color: var(--nav-oc-color);
}

/* ------------------------------------------------------------------ */
/* Style dropdown on offcanvas mobile */
@media (max-width: 991.98px) {
  .metismenu.mod-menu .metismenu-item > ul {
    position: relative;
    width: 100%;
    box-shadow: none;
  }
}

/* ------------------------------------------------------------------ */
/* Chevron down with Font Awesome */
.metismenu.mod-menu .mm-toggler:after {
  border: none;
  width: auto;
  height: auto;
  vertical-align: top;
  margin-left: 6px;
  content: "\f078";
  font-family: "Font Awesome 6 Free";
  display: inline-block;
  font-weight: bold;
}

/* ------------------------------------------------------------------ */
/* Uppercase first items only */
/* .container-header .metismenu > li > a,
.container-header .metismenu > li > button {
  text-transform: uppercase;
} */

.container-search {
  display: flex;
  align-items: center;
}

.dropdown-menu.mm-collapse.show {
  display: block !important;
}

.dropdown-menu.mm-collapse.show > * {
  display: block !important;
}

/* ------------------------------------------------------------------ */
/* If menu collpase breakpoint is set to xxl/1400px on the "nav" element in menu-offcanvas.php */
/* use this to fix sub menu collapse in the offcanvas */
/*
@media (width >=992px) {
  .container-header .mod-menu {
    flex-direction: column;
    justify-content: start;
  }
}

@media (width >=1400px) {
  .container-header .mod-menu {
    flex-direction: row;
    justify-content: end;
  }
}

@media (width < 1400px) {
  .mod-menu.mod-menu_dropdown-metismenu.metismenu.mod-list {
    display: unset;
  }

  .metismenu.mod-menu .metismenu-item.parent {
    display: block;
  }

  .metismenu.mod-menu .metismenu-item>ul {
    position: relative;
    right: 0;
    width: 100%;
  }

  .metismenu.mod-menu .metismenu-item:not(.level-1)>ul,
  .metismenu.mod-menu .metismenu-item:not(.level-2)>ul {
    margin-top: 0.5rem;
  }
}
*/
.container-header .mod-menu-dropdown a {
  color: var(--nav-color) !important;
  text-decoration: none;
}

.container-header .mod-menu-dropdown a:hover,
.container-header .mod-menu-dropdown a:focus {
  color: var(--nav-color-hover) !important;
}

/* #endregion Template Heading & Menu */

/* #region Template Typography */
h1,
.h1 {
  font-size: calc(1.15rem + 1.5vw);
}

@media (width >=1200px) {

  h1,
  .h1 {
    font-size: 2rem;
  }
}

h2,
.h2 {
  font-size: calc(1.225rem + 0.9vw);
}

@media (width >=1200px) {

  h2,
  .h2 {
    font-size: 1.75rem;
  }
}

h3,
.h3 {
  font-size: calc(1.25rem + 0.6vw);
}

@media (width >=1200px) {

  h3,
  .h3 {
    font-size: 1.5rem;
  }
}

h4,
.h4 {
  font-size: calc(1.25rem + 0.3vw);
}

@media (width >=1200px) {

  h4,
  .h4 {
    font-size: 1.4rem;
  }
}

h5,
.h5 {
  font-size: 1.25rem;
}

h6,
.h6 {
  font-size: 1rem;
}

/* #endregion Template Typography */

/* #region Template Buttons */
.btn-primary {
  --btn-color: var(--white);
  --btn-bg: var(--cassiopeia-color-primary);
  --btn-border-color: var(--cassiopeia-color-primary);
  --btn-hover-color: var(--white);
  --btn-hover-bg: var(--cassiopeia-color-hover);
  --btn-hover-border-color: var(--cassiopeia-color-hover);
  --btn-active-color: var(--white);
  --btn-active-bg: var(--cassiopeia-color-hover);
  --btn-active-border-color: var(--cassiopeia-color-hover);
  --btn-disabled-color: var(--white);
  --btn-disabled-bg: var(--cassiopeia-color-primary);
  --btn-disabled-border-color: var(--cassiopeia-color-primary);
}

.btn-outline-primary {
  --btn-color: var(--cassiopeia-color-primary);
  --btn-border-color: var(--cassiopeia-color-primary);
  --btn-hover-color: var(--white);
  --btn-hover-bg: var(--cassiopeia-color-primary);
  --btn-hover-border-color: var(--cassiopeia-color-primary);
  --btn-active-color: var(--white);
  --btn-active-bg: var(--cassiopeia-color-primary);
  --btn-active-border-color: var(--cassiopeia-color-primary);
  --btn-disabled-color: var(--cassiopeia-color-primary);
  --btn-disabled-border-color: var(--cassiopeia-color-primary);
}

.btn-outline-secondary {
  --btn-color: var(--secondary);
  --btn-border-color: var(--secondary);
  --btn-hover-color: var(--white);
  --btn-hover-bg: var(--secondary);
  --btn-hover-border-color: var(--secondary);
  --btn-active-color: var(--white);
  --btn-active-bg: var(--secondary);
  --btn-active-border-color: var(--secondary);
  --btn-disabled-color: var(--secondary);
  --btn-disabled-border-color: var(--secondary);
}

.btn-success {
  --btn-color: var(--white);
  --btn-bg: var(--success);
  --btn-border-color: var(--success);
  --btn-hover-color: var(--white);
  --btn-hover-bg: var(--success-hover-color);
  --btn-hover-border-color: var(--success-hover-color);
  --btn-active-color: var(--white);
  --btn-active-bg: var(--success-hover-color);
  --btn-active-border-color: var(--success-hover-color);
  --btn-disabled-color: var(--white);
  --btn-disabled-bg: var(--success);
  --btn-disabled-border-color: var(--success);
}

.btn-outline-success {
  --btn-color: var(--success);
  --btn-border-color: var(--success);
  --btn-hover-color: var(--white);
  --btn-hover-bg: var(--success);
  --btn-hover-border-color: var(--success);
  --btn-active-color: var(--white);
  --btn-active-bg: var(--success);
  --btn-active-border-color: var(--success);
  --btn-disabled-color: var(--success);
  --btn-disabled-border-color: var(--success);
}

.btn-danger {
  --btn-color: var(--white);
  --btn-bg: var(--danger);
  --btn-border-color: var(--danger);
  --btn-hover-color: var(--white);
  --btn-hover-bg: var(--danger-hover-color);
  --btn-hover-border-color: var(--danger-hover-color);
  --btn-active-color: var(--white);
  --btn-active-bg: var(--danger-hover-color);
  --btn-active-border-color: var(--danger-hover-color);
  --btn-disabled-color: var(--white);
  --btn-disabled-bg: var(--danger);
  --btn-disabled-border-color: var(--danger);
}

.btn-outline-danger {
  --btn-color: var(--danger);
  --btn-border-color: var(--danger);
  --btn-hover-color: var(--white);
  --btn-hover-bg: var(--danger);
  --btn-hover-border-color: var(--danger);
  --btn-active-color: var(--white);
  --btn-active-bg: var(--danger);
  --btn-active-border-color: var(--danger);
  --btn-disabled-color: var(--danger);
  --btn-disabled-border-color: var(--danger);
}

.btn-warning {
  --btn-color: var(--white);
  --btn-bg: var(--warning);
  --btn-border-color: var(--warning);
  --btn-hover-color: var(--white);
  --btn-hover-bg: var(--warning-hover-color);
  --btn-hover-border-color: var(--warning-hover-color);
  --btn-active-color: var(--white);
  --btn-active-bg: var(--warning-hover-color);
  --btn-active-border-color: var(--warning-hover-color);
  --btn-disabled-color: var(--white);
  --btn-disabled-bg: var(--warning);
  --btn-disabled-border-color: var(--warning);
}

.btn-outline-warning {
  --btn-color: var(--warning);
  --btn-border-color: var(--warning);
  --btn-hover-color: var(--white);
  --btn-hover-bg: var(--warning);
  --btn-hover-border-color: var(--warning);
  --btn-active-color: var(--white);
  --btn-active-bg: var(--warning);
  --btn-active-border-color: var(--warning);
  --btn-disabled-color: var(--warning);
  --btn-disabled-border-color: var(--warning);
}

.btn-info {
  --btn-color: var(--white);
  --btn-bg: var(--info);
  --btn-border-color: var(--info);
  --btn-hover-color: var(--white);
  --btn-hover-bg: var(--info-hover-color);
  --btn-hover-border-color: var(--info-hover-color);
  --btn-active-color: var(--white);
  --btn-active-bg: var(--info-hover-color);
  --btn-active-border-color: var(--info-hover-color);
  --btn-disabled-color: var(--white);
  --btn-disabled-bg: var(--info);
  --btn-disabled-border-color: var(--info);
}

.btn-outline-info {
  --btn-color: var(--info);
  --btn-border-color: var(--info);
  --btn-hover-color: var(--white);
  --btn-hover-bg: var(--info);
  --btn-hover-border-color: var(--info);
  --btn-active-color: var(--white);
  --btn-active-bg: var(--info);
  --btn-active-border-color: var(--info);
  --btn-disabled-color: var(--info);
  --btn-disabled-border-color: var(--info);
}

.btn-light {
  --btn-color: var(--dark);
  --btn-bg: var(--light);
  --btn-border-color: var(--light);
  --btn-hover-color: var(--dark);
  --btn-hover-bg: var(--light-hover-color);
  --btn-hover-border-color: var(--light-hover-color);
  --btn-active-color: var(--dark);
  --btn-active-bg: var(--light-hover-color);
  --btn-active-border-color: var(--light-hover-color);
  --btn-disabled-color: var(--dark);
  --btn-disabled-bg: var(--light);
  --btn-disabled-border-color: var(--light);
}

.btn-outline-light {
  --btn-color: var(--light);
  --btn-border-color: var(--light);
  --btn-hover-color: var(--dark);
  --btn-hover-bg: var(--light);
  --btn-hover-border-color: var(--light);
  --btn-active-color: var(--dark);
  --btn-active-bg: var(--light);
  --btn-active-border-color: var(--light);
  --btn-disabled-color: var(--light);
  --btn-disabled-border-color: var(--light);
}

.btn-dark {
  --btn-color: var(--white);
  --btn-bg: var(--dark);
  --btn-border-color: var(--dark);
  --btn-hover-color: var(--white);
  --btn-hover-bg: var(--dark-hover-color);
  --btn-hover-border-color: var(--dark-hover-color);
  --btn-active-color: var(--white);
  --btn-active-bg: var(--dark-hover-color);
  --btn-active-border-color: var(--dark-hover-color);
  --btn-disabled-color: var(--white);
  --btn-disabled-bg: var(--dark);
  --btn-disabled-border-color: var(--dark);
}

.btn-outline-dark {
  --btn-color: var(--dark);
  --btn-border-color: var(--dark);
  --btn-hover-color: var(--white);
  --btn-hover-bg: var(--dark);
  --btn-hover-border-color: var(--dark);
  --btn-active-color: var(--white);
  --btn-active-bg: var(--dark);
  --btn-active-border-color: var(--dark);
  --btn-disabled-color: var(--dark);
  --btn-disabled-border-color: var(--dark);
}

/* #endregion Template Buttons */

/* #region Template Design */
/* .container-component > *,
.container-sidebar-left > *,
.container-sidebar-right > * {
  margin-bottom: 2rem;
} */

/* Remove underline from links */
a.btn:hover,
a.btn:focus {
  text-decoration: none !important;
}

/* Add link hover animation color */
a:not(.btn) {
  transition: color 0.3s ease;
}

.r2h-module {
  position: relative;
}

.fields-container {
  list-style-type: none;
  padding: 0;
  margin-bottom: 1rem;
}

.fields-container .field-label,
.fields-container .field-value {
  display: block;
}

.pagination {
  --pagination-color: var(--link-color);
  --pagination-bg: var(--body-bg);
  --pagination-border-color: var(--border-color);
  --pagination-hover-color: var(--link-hover-color);
  --pagination-hover-bg: var(--tertiary-bg);
  --pagination-hover-border-color: var(--border-color);
  --pagination-focus-color: var(--link-hover-color);
  --pagination-focus-bg: var(--secondary-bg);
  --pagination-focus-box-shadow: 0 0 0 .25rem rgba(var(--primary-rgb), 0.25);
  --pagination-active-color: #fff;
  --pagination-active-bg: var(--link-color);
  --pagination-active-border-color: var(--link-color);
  --pagination-disabled-color: var(--secondary-color);
  --pagination-disabled-bg: var(--secondary-bg);
  --pagination-disabled-border-color: var(--border-color);
}

.active.page-item .page-link:hover,
.active.page-item .page-link:focus {
  color: var(--white);
}

.com-content-category-blog__navigation {
  display: flex;
  flex-direction: column;
}

.com-content-category-blog__navigation p {
  margin-bottom: 0;
  padding-bottom: 0;
}

/* Media Breakpoint 992px */
@media (min-width: 992px) {
  .com-content-category-blog__navigation {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: space-between;
  }

  .com-content-category-blog__navigation p {
    margin-bottom: 1.5rem;
  }
}

iframe,
video {
  max-width: 100% !important;
  height: auto !important;
}

iframe[src*=embed],
iframe[src*=youtube],
iframe[src*="youtu.be"],
iframe[src*=".mp4"],
video[src*=".mp4"],
iframe[src*=vimeo],
video[src*=vimeo] {
  aspect-ratio: 16/9;
}

.text-white *:not(.btn) {
  color: var(--white) !important;
}

hr:not(.mce-item-readmore) {
  border: 0;
  height: 2px;
  max-width: 80%;
  margin-inline: auto;
  margin-bottom: 2rem;
  background-image: linear-gradient(to right, rgba(var(--primary-rgb), 0), rgba(var(--primary-rgb), 0.75), rgba(var(--primary-rgb), 0));
}

.page-header {
  margin-bottom: 1.5rem;
}

[class^="text-bg-"] a:not([class^="btn"]):not([class*=" btn"]),
[class*=" text-bg-"] a:not([class^="btn"]):not([class*=" btn"]) {
  color: currentColor;
}

[class^="text-bg-"] a:not([class^="btn"]):not([class*=" btn"]):hover,
[class^="text-bg-"] a:not([class^="btn"]):not([class*=" btn"]):focus,
[class*=" text-bg-"] a:not([class^="btn"]):not([class*=" btn"]):hover,
[class*=" text-bg-"] a:not([class^="btn"]):not([class*=" btn"]):focus {
  color: color-mix(in lab, currentColor 85%, black);
}

/* #endregion Template Design */

/* #region Template Footer */
/* ------------------------------------------------------------------ */
/* Footer */
.footer {
  background: none;
  background-image: none;
  color: var(--gray-400);
  --heading-color: var(--gray-600);
}

.container-footer {
  margin-top: 0;
  background: var(--dark);
}

.footer-top-wrapper {
  padding-top: 5rem;
  padding-bottom: 5rem;
}

.footer-bottom-wrapper {
  background-color: var(--black);
}

.footer a:not(.btn),
.footer .btn-link {
  color: currentColor;
}

.footer a:not(.btn):hover,
.footer a:not(.btn):focus,
.footer .btn-link:hover,
.footer .btn-link:focus {
  color: var(--link-hover-color);
}

/* #endregion Template Footer */

/* #region Com Content Category Blog */
/* ------------------------------------------------------------------ */
/* Default content category blog layout */
.article-info dd {
  margin: 0;
  font-size: 0.85em;
}

.blog-item h2.item-title,
.blog-item .page-header h2 {
  font-size: 1.5rem;
  font-weight: 400;
}

.blog-item h2.item-title a:hover,
.blog-item .page-header a:hover {
  text-decoration: underline;
}

.mod-articlesnews__item .newsflash-title {
  font-size: 1.12rem;
}

.blog-item .item-image img {
  aspect-ratio: 3/2;
  -o-object-fit: cover;
  object-fit: cover;
  width: 100%;
  border-radius: var(--border-radius);
}

/* Menu item class voor articles category blog layout: overlay-bloglayout */
.overlay-bloglayout .blog-item {
  position: relative;
}

.overlay-bloglayout .blog-item:after {
  z-index: 1;
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(var(--primary-rgb), 0.6);
  opacity: 0;
  transition: opacity 0.25s ease-in;
}

.overlay-bloglayout .blog-item p {
  display: none;
}

.overlay-bloglayout .blog-item .item-image {
  margin: 0;
}

.overlay-bloglayout .blog-item .item-image img {
  aspect-ratio: 1/1;
  filter: grayscale(100%);
}

.overlay-bloglayout .blog-item .item-image a:after {
  z-index: 3;
  content: "";
  position: absolute;
  inset: 0;
}

.overlay-bloglayout .blog-item .item-content {
  position: absolute;
  width: 100%;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%);
  opacity: 1;
  min-height: 120px;
  bottom: 0;
  color: var(--white);
  z-index: 2;
  transition: padding 0.25s ease-in;
  padding: 1rem;
}

.overlay-bloglayout .blog-item:hover:after {
  opacity: 1;
}

.overlay-bloglayout .blog-item:hover .item-content {
  padding-bottom: 50px;
}

.overlay-bloglayout .blog-item .text-muted {
  color: var(--white) !important;
}

.overlay-bloglayout .blog-item a {
  color: var(--white);
}

/* #endregion Com Content Category Blog */

/* #region Com Users */
/* ------------------------------------------------------------------ */
/* Login & Registration page */
.com-users-login,
.com-users-registration {
  max-width: 600px;
  margin-inline: auto;
  margin-bottom: 3rem;
}

/* #endregion Com Users */

/* #region Mod Finder */
/* ------------------------------------------------------------------ */
/* Module mod-finder__search */
.mod-finder .awesomplete {
  width: 100% !important;
}

.mod-finder .awesomplete > input {
  max-width: unset;
  border-width: 3px;
  border-color: var(--primary);
  color: var(--black);
}

.mod-finder .input-group .awesomplete input:focus {
  border-color: var(--primary);
  background-color: var(--gray-100);
  box-shadow: none;
}

.mod-finder .awesomplete > ul {
  background: var(--white);
}

/* #endregion Mod Finder */

/* #region Mod Breadcrumbs */
/* ------------------------------------------------------------------ */
/* Breadcrumbs */
.breadcrumb {
  background: none;
  font-size: 0.85rem;
  padding-inline: 0 !important;
  border-bottom: 1px dotted var(--gray-300);
}

.breadcrumb .icon-location {
  color: var(--primary);
  margin-inline-end: 0.25rem;
}

/* #endregion Mod Breadcrumbs */

/* #region Mod Articles */
.mod-articles-item-content p:last-of-type {
  display: inline;
}

/* #endregion Mod Articles */

/* #region Template Utilities */
.site-grid {
  container-type: inline-size;
}

.breakout-fluid {
  position: relative;
  margin-inline: calc(-50vw + 50%);
  max-width: 100vw;
  margin-inline: calc(-50cqw + 50%);
  max-width: 100cqw;
  display: block !important;
}

.breakout-fluid:after {
  content: "";
  display: block;
  clear: both;
}

.breakout-container {
  position: relative;
  margin-inline: calc(-50vw + 50%);
  max-width: 100vw;
  margin-inline: calc(-50cqw + 50%);
  max-width: 100cqw;
  padding-inline: 1rem;
}

.breakout-container > * {
  width: 100%;
  max-width: var(--content-width);
  margin: auto;
}

/* ------------------------------------------------------------------ */
/* Utility / Helper Classes */
/* Helper class makes element 1/1 ratio for images or other elements */
.aspect-ratio-1-1,
.aspect-ratio-1-1 img {
  aspect-ratio: 1/1;
  -o-object-fit: cover;
  object-fit: cover;
}

/* Helper class makes element 2/1 ratio for images or other elements */
.aspect-ratio-2-1,
.aspect-ratio-2-1 img {
  aspect-ratio: 2/1;
  -o-object-fit: cover;
  object-fit: cover;
}

/* Helper class makes element 3/1 ratio for images or other elements */
.aspect-ratio-3-1,
.aspect-ratio-3-1 img {
  aspect-ratio: 3/1;
  -o-object-fit: cover;
  object-fit: cover;
}

/* Helper class makes element 3/2 ratio for images or other elements */
.aspect-ratio-3-2,
.aspect-ratio-3-2 img {
  aspect-ratio: 3/2;
  -o-object-fit: cover;
  object-fit: cover;
}

/* Helper class makes element 4/3 ratio for images or other elements */
.aspect-ratio-4-3,
.aspect-ratio-4-3 img {
  aspect-ratio: 4/3;
  -o-object-fit: cover;
  object-fit: cover;
}

/* Helper class makes element 16/9 ratio for images or other elements */
.aspect-ratio-16-9,
.aspect-ratio-16-9 img {
  aspect-ratio: 16/9;
  -o-object-fit: cover;
  object-fit: cover;
}

/*
Menu item class: center-article-title (center the first heading on the article layout page)
Menu item class: center-blog-title (center the first heading title on the featured of blog layout page)
Values can be combined on blog layout to make sure articles also have centered titles
*/
.center-article-title .com-content-article > .page-header:nth-of-type(1),
.center-blog-title .blog-featured > .page-header:nth-of-type(1),
.center-blog-title .com-content-category-blog > .page-header:nth-of-type(1) {
  text-align: center;
  margin-block: 2rem 3rem;
}

.center-menu-article-title .com-content-article .page-header {
  text-align: center;
  margin-block: 2rem 3rem;
}

/* Make all p tags margin: 0 */
.ap-0 p {
  margin: 0;
}

/* Make last p tag margin: 0 */
.lp-0 p:last-child {
  margin: 0;
}

.mw-50ch {
  max-width: 50ch;
}

.mw-70ch {
  max-width: 70ch;
}

.mw-90ch {
  max-width: 90ch;
}

.mw-110ch {
  max-width: 110ch;
}

.text-bg-lighter {
  color: #000 !important;
  background-color: var(--gray-200) !important;
}

.text-bg-white {
  color: var(--body-color) !important;
  background-color: var(--white) !important;
}

.heading-underline {
  position: relative;
  padding-bottom: 2rem;
  text-align: center;
}

.heading-underline:after {
  content: "";
  display: block;
  margin-inline: auto;
  margin-top: 1.5rem;
  width: 5rem;
  height: 3px;

  background: var(--cs-primary);
}

.outline-none {
  box-shadow: none;
  outline: 0;
}

.outline-none:focus {
  box-shadow: none;
  outline: 0;
}

.fa-squared {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--border-radius-sm);
  position: relative;
  padding: 1.25em;
  text-align: center;
}

.fa-squared:before {
  width: 1.25em;
  position: absolute;
}

.fa-rounded {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999999px;
  position: relative;
  padding: 1.25em;
  text-align: center;
}

.fa-rounded:before {
  width: 1.25em;
  position: absolute;
}

.small-content.com_osmembership.view-register .container-component {
  max-width: 850px;
  margin-inline: auto;
}

/* Make single articles more readable 750px wide */
.small-content.view-article:not(.has-sidebar-right, .has-sidebar-left) .container-component {
  max-width: 850px;
  margin-inline: auto;
}

.small-content.view-article:not(.has-sidebar-right, .has-sidebar-left) main {
  margin-top: 2rem;
}

.image-gradient {
  position: relative;
  display: block;
}

.image-gradient:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 70%;
  /* Create a gradient that goes from a dark semi-transparent color at the bottom to transparent at the top */
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
  pointer-events: none;
  /* Ensures the overlay doesn't block interactions */
}

.currentColor {
  color: currentColor;
}

.currentColorAll {
  color: currentColor !important;
}

.underline:after {
  content: "";
  display: block;
  border-bottom: 5px solid var(--dark);
  margin-bottom: 2rem !important;
  width: 5rem;
  padding-top: 1rem;
  transition-duration: 0.3s;
}

.blockquote {
  border-left: 4px solid var(--primary);
  padding-left: 1rem;
  font-style: italic;
  line-height: 1.6;
  margin: 2rem 0 0 1rem;
  max-width: 60%;
  padding: 1rem;
  position: relative;
}

.blockquote strong,
.blockquote b {
  display: block;
  font-style: normal;
  font-size: 1rem;
  padding-top: 1rem;
}

.blockquote strong::before,
.blockquote b::before {
  content: "— ";
}

/* #endregion Template Utilities */

/* #region Template Margin & Padding */
:root {
  --spacer6: 5rem;
}

.m-6 {
  margin: var(--spacer6) !important;
}

.mx-6 {
  margin-left: var(--spacer6) !important;
  margin-right: var(--spacer6) !important;
}

.my-6 {
  margin-top: var(--spacer6) !important;
  margin-bottom: var(--spacer6) !important;
}

.mt-6 {
  margin-top: var(--spacer6) !important;
}

.me-6 {
  margin-right: var(--spacer6) !important;
}

.mb-6 {
  margin-bottom: var(--spacer6) !important;
}

.ms-6 {
  margin-left: var(--spacer6) !important;
}

.p-6 {
  padding: var(--spacer6) !important;
}

.px-6 {
  padding-left: var(--spacer6) !important;
  padding-right: var(--spacer6) !important;
}

.py-6 {
  padding-top: var(--spacer6) !important;
  padding-bottom: var(--spacer6) !important;
}

.pt-6 {
  padding-top: var(--spacer6) !important;
}

.pe-6 {
  padding-right: var(--spacer6) !important;
}

.pb-6 {
  padding-bottom: var(--spacer6) !important;
}

.ps-6 {
  padding-left: var(--spacer6) !important;
}

@media (min-width: 576px) {
  .m-sm-6 {
    margin: var(--spacer6) !important;
  }

  .mx-sm-6 {
    margin-left: var(--spacer6) !important;
    margin-right: var(--spacer6) !important;
  }

  .my-sm-6 {
    margin-top: var(--spacer6) !important;
    margin-bottom: var(--spacer6) !important;
  }

  .mt-sm-6 {
    margin-top: var(--spacer6) !important;
  }

  .me-sm-6 {
    margin-right: var(--spacer6) !important;
  }

  .mb-sm-6 {
    margin-bottom: var(--spacer6) !important;
  }

  .ms-sm-6 {
    margin-left: var(--spacer6) !important;
  }

  .p-sm-6 {
    padding: var(--spacer6) !important;
  }

  .px-sm-6 {
    padding-left: var(--spacer6) !important;
    padding-right: var(--spacer6) !important;
  }

  .py-sm-6 {
    padding-top: var(--spacer6) !important;
    padding-bottom: var(--spacer6) !important;
  }

  .pt-sm-6 {
    padding-top: var(--spacer6) !important;
  }

  .pe-sm-6 {
    padding-right: var(--spacer6) !important;
  }

  .pb-sm-6 {
    padding-bottom: var(--spacer6) !important;
  }

  .ps-sm-6 {
    padding-left: var(--spacer6) !important;
  }
}

@media (min-width: 768px) {
  .m-md-6 {
    margin: var(--spacer6) !important;
  }

  .mx-md-6 {
    margin-left: var(--spacer6) !important;
    margin-right: var(--spacer6) !important;
  }

  .my-md-6 {
    margin-top: var(--spacer6) !important;
    margin-bottom: var(--spacer6) !important;
  }

  .mt-md-6 {
    margin-top: var(--spacer6) !important;
  }

  .me-md-6 {
    margin-right: var(--spacer6) !important;
  }

  .mb-md-6 {
    margin-bottom: var(--spacer6) !important;
  }

  .ms-md-6 {
    margin-left: var(--spacer6) !important;
  }

  .p-md-6 {
    padding: var(--spacer6) !important;
  }

  .px-md-6 {
    padding-left: var(--spacer6) !important;
    padding-right: var(--spacer6) !important;
  }

  .py-md-6 {
    padding-top: var(--spacer6) !important;
    padding-bottom: var(--spacer6) !important;
  }

  .pt-md-6 {
    padding-top: var(--spacer6) !important;
  }

  .pe-md-6 {
    padding-right: var(--spacer6) !important;
  }

  .pb-md-6 {
    padding-bottom: var(--spacer6) !important;
  }

  .ps-md-6 {
    padding-left: var(--spacer6) !important;
  }
}

@media (min-width: 992px) {
  .m-lg-6 {
    margin: var(--spacer6) !important;
  }

  .mx-lg-6 {
    margin-left: var(--spacer6) !important;
    margin-right: var(--spacer6) !important;
  }

  .my-lg-6 {
    margin-top: var(--spacer6) !important;
    margin-bottom: var(--spacer6) !important;
  }

  .mt-lg-6 {
    margin-top: var(--spacer6) !important;
  }

  .me-lg-6 {
    margin-right: var(--spacer6) !important;
  }

  .mb-lg-6 {
    margin-bottom: var(--spacer6) !important;
  }

  .ms-lg-6 {
    margin-left: var(--spacer6) !important;
  }

  .p-lg-6 {
    padding: var(--spacer6) !important;
  }

  .px-lg-6 {
    padding-left: var(--spacer6) !important;
    padding-right: var(--spacer6) !important;
  }

  .py-lg-6 {
    padding-top: var(--spacer6) !important;
    padding-bottom: var(--spacer6) !important;
  }

  .pt-lg-6 {
    padding-top: var(--spacer6) !important;
  }

  .pe-lg-6 {
    padding-right: var(--spacer6) !important;
  }

  .pb-lg-6 {
    padding-bottom: var(--spacer6) !important;
  }

  .ps-lg-6 {
    padding-left: var(--spacer6) !important;
  }
}

@media (min-width: 1200px) {
  .m-xl-6 {
    margin: var(--spacer6) !important;
  }

  .mx-xl-6 {
    margin-left: var(--spacer6) !important;
    margin-right: var(--spacer6) !important;
  }

  .my-xl-6 {
    margin-top: var(--spacer6) !important;
    margin-bottom: var(--spacer6) !important;
  }

  .mt-xl-6 {
    margin-top: var(--spacer6) !important;
  }

  .me-xl-6 {
    margin-right: var(--spacer6) !important;
  }

  .mb-xl-6 {
    margin-bottom: var(--spacer6) !important;
  }

  .ms-xl-6 {
    margin-left: var(--spacer6) !important;
  }

  .p-xl-6 {
    padding: var(--spacer6) !important;
  }

  .px-xl-6 {
    padding-left: var(--spacer6) !important;
    padding-right: var(--spacer6) !important;
  }

  .py-xl-6 {
    padding-top: var(--spacer6) !important;
    padding-bottom: var(--spacer6) !important;
  }

  .pt-xl-6 {
    padding-top: var(--spacer6) !important;
  }

  .pe-xl-6 {
    padding-right: var(--spacer6) !important;
  }

  .pb-xl-6 {
    padding-bottom: var(--spacer6) !important;
  }

  .ps-xl-6 {
    padding-left: var(--spacer6) !important;
  }
}

@media (min-width: 1400px) {
  .m-xxl-6 {
    margin: var(--spacer6) !important;
  }

  .mx-xxl-6 {
    margin-left: var(--spacer6) !important;
    margin-right: var(--spacer6) !important;
  }

  .my-xxl-6 {
    margin-top: var(--spacer6) !important;
    margin-bottom: var(--spacer6) !important;
  }

  .mt-xxl-6 {
    margin-top: var(--spacer6) !important;
  }

  .me-xxl-6 {
    margin-right: var(--spacer6) !important;
  }

  .mb-xxl-6 {
    margin-bottom: var(--spacer6) !important;
  }

  .ms-xxl-6 {
    margin-left: var(--spacer6) !important;
  }

  .p-xxl-6 {
    padding: var(--spacer6) !important;
  }

  .px-xxl-6 {
    padding-left: var(--spacer6) !important;
    padding-right: var(--spacer6) !important;
  }

  .py-xxl-6 {
    padding-top: var(--spacer6) !important;
    padding-bottom: var(--spacer6) !important;
  }

  .pt-xxl-6 {
    padding-top: var(--spacer6) !important;
  }

  .pe-xxl-6 {
    padding-right: var(--spacer6) !important;
  }

  .pb-xxl-6 {
    padding-bottom: var(--spacer6) !important;
  }

  .ps-xxl-6 {
    padding-left: var(--spacer6) !important;
  }
}

/* #endregion Template Margin & Padding */

/* #region Template Utilities Animations */
/* ----------------------------------------------
 * Generated by Animista on 2023-5-1 16:42:24
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info.
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */
/**
 * ----------------------------------------
 * animation bounce
 * ----------------------------------------
 */
.bounce-up-down {
  animation: bounce 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite alternate-reverse both;
}

@keyframes bounce {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(-20px);
  }
}

/**
 * ----------------------------------------
 * animation slide-in-bottom
 * ----------------------------------------
 */
.slide-in-bottom {
  animation: slide-in-bottom 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.5s both;
}

@keyframes slide-in-bottom {
  0% {
    transform: translateY(1000px);
    opacity: 0;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

/**
 * ----------------------------------------
 * animation fade-in-bottom
 * ----------------------------------------
 */
.fade-in-bottom {
  animation: fade-in-bottom 1s cubic-bezier(0.39, 0.575, 0.565, 1) 0.75s both;
}

@keyframes fade-in-bottom {
  0% {
    transform: translateY(50px);
    opacity: 0;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

/* #endregion Template Utilities Animations */

/* #region Summary styling voor TinyMCE summery accordion */
summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--primary);
  color: var(--white);
  padding: .75rem 1rem;
  border-radius: .375rem;
}

details[open] summary {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

details[open] > *:not(summary) {
  background-color: #f0f0f0;
  padding: 1rem;
}

summary::after {
  content: "+";
  font-weight: bold;
}

details[open] summary::after {
  content: "–";
}

summary::-webkit-details-marker {
  display: none;
}

summary {
  list-style: none;
}

/* #endregion Template Utilities Animations */

/* #region Chord Sheet design (editchordsheetsonline.com) */
/* ==========================================================================
   Added 2026-10-14. Source: Claude Design "Chord Sheet Website" + "Chord Sheet
   Design System". Documentation: templates/cassiopeia_r2h/resources/editchordsheets-design.md

   Note: Cassiopeia (Joomla 6) compiles Bootstrap WITHOUT the "bs-" prefix, so the
   variables are --btn-bg, --body-color … (the design system's user.css used --bs-*).
   Colour tokens (--cs-*) live in the region "Template Colors" at the top of this file.
   Fonts come from css/customfont.css (Template Style › Font Scheme).
   ========================================================================== */

:root {
  --cs-font-display: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --cs-font-body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --cs-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --cs-font-hand: "Kalam", "Segoe Print", "Comic Sans MS", cursive;

  --cs-radius-sm: 6px;
  --cs-radius-md: 10px;
  --cs-radius-lg: 16px;
  --cs-radius-pill: 999px;

  --cs-space-section-sm: 4rem;
  --cs-space-section: 6rem;
  --cs-measure: 40rem;

  --cs-shadow-sm: 0 1px 2px rgba(22, 33, 43, .06), 0 1px 3px rgba(22, 33, 43, .08);
  --cs-shadow-lg: 0 24px 48px -12px rgba(22, 33, 43, .18);

  /* Bootstrap (unprefixed in Cassiopeia) */
  --body-font-family: var(--cs-font-body);
  --body-font-size: 1.0625rem;
  --body-line-height: 1.65;
  --body-color: var(--cs-ink);
  --body-color-rgb: 22, 33, 43;
  --body-bg: var(--cs-surface);
  --emphasis-color: var(--cs-ink);
  --secondary-color: var(--cs-ink-muted);
  --tertiary-bg: var(--cs-surface-alt);
  --border-color: var(--cs-border);
  --font-monospace: var(--cs-font-mono);
  --focus-ring-color: rgba(var(--cs-primary-rgb), .35);
}

/* --- Base typography ------------------------------------------------------ */
body {
  font-family: var(--cs-font-body);
  color: var(--cs-ink);
  background-color: var(--cs-surface);
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
.h1,
.h2,
.h3,
.h4 {
  font-family: var(--cs-font-display);
  color: inherit;
  text-wrap: balance;
}

h1,
.h1 {
  font-size: clamp(2.25rem, 1.6rem + 2.2vw, 2.75rem);
  line-height: 1.18;
  font-weight: 700;
  letter-spacing: -.02em;
}

h2,
.h2 {
  font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.25rem);
  line-height: 1.22;
  font-weight: 700;
  letter-spacing: -.015em;
}

h3,
.h3 {
  font-size: 1.5rem;
  line-height: 1.33;
  font-weight: 600;
  letter-spacing: -.01em;
}

h4,
.h4 {
  font-size: 1.1875rem;
  line-height: 1.47;
  font-weight: 600;
}

p {
  text-wrap: pretty;
}

.lead,
.cs-lead {
  font-size: 1.25rem;
  line-height: 1.6;
  font-weight: 400;
  color: var(--cs-ink-muted);
}

.cs-small {
  font-size: .875rem;
  line-height: 1.57;
}

code,
kbd,
pre {
  font-family: var(--cs-font-mono);
}

.cs-display {
  font-family: var(--cs-font-display);
  font-size: clamp(2.5rem, 1.7rem + 3.2vw, 3.5rem);
  line-height: 1.07;
  font-weight: 700;
  letter-spacing: -.02em;
  text-wrap: balance;
}

.cs-eyebrow {
  display: block;
  margin-bottom: .5rem;
  font-family: var(--cs-font-body);
  font-size: .8125rem;
  line-height: 1.23;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cs-primary);
}

.cs-muted {
  color: var(--cs-block-muted, var(--cs-ink-muted));
}

/* --- Buttons ---------------------------------------------------------------- */
.btn {
  --btn-font-family: var(--cs-font-body);
  --btn-font-weight: 600;
  --btn-padding-x: 1.25rem;
  --btn-padding-y: .625rem;
  --btn-border-radius: var(--cs-radius-md);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
}

.btn-lg {
  --btn-padding-x: 1.5rem;
  --btn-padding-y: .8125rem;
  --btn-font-size: 1.0625rem;
  --btn-border-radius: var(--cs-radius-md);
  min-height: 52px;
}

.btn-primary {
  --btn-color: #fff;
  --btn-bg: var(--cs-primary);
  --btn-border-color: var(--cs-primary);
  --btn-hover-color: #fff;
  --btn-hover-bg: var(--cs-primary-hover);
  --btn-hover-border-color: var(--cs-primary-hover);
  --btn-active-color: #fff;
  --btn-active-bg: var(--cs-primary-hover);
  --btn-active-border-color: var(--cs-primary-hover);
  --btn-focus-shadow-rgb: var(--cs-primary-rgb);
}

.btn-outline-primary {
  --btn-color: var(--cs-primary);
  --btn-bg: transparent;
  --btn-border-color: var(--cs-border);
  --btn-hover-color: var(--cs-primary-hover);
  --btn-hover-bg: var(--cs-primary-soft);
  --btn-hover-border-color: var(--cs-primary);
  --btn-active-color: var(--cs-primary-hover);
  --btn-active-bg: var(--cs-primary-soft);
  --btn-active-border-color: var(--cs-primary);
}

.btn-light {
  --btn-color: var(--cs-inverse);
  --btn-bg: #fff;
  --btn-border-color: #fff;
  --btn-hover-color: var(--cs-inverse);
  --btn-hover-bg: var(--cs-primary-soft);
  --btn-hover-border-color: var(--cs-primary-soft);
  --btn-active-color: var(--cs-inverse);
  --btn-active-bg: var(--cs-primary-soft);
  --btn-active-border-color: var(--cs-primary-soft);
}

.btn-link {
  --btn-color: var(--cs-primary);
  --btn-hover-color: var(--cs-primary-hover);
  padding-inline: 0;
  text-decoration: none;
  font-weight: 600;
}

.btn-link:hover {
  text-decoration: underline;
}

.cs-block--inverse .btn-link {
  --btn-color: var(--cs-primary-on-inverse);
  --btn-hover-color: #fff;
}

.cs-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}

.cs-buttons--after {
  margin-top: 3rem;
}

/* --- Header: brand tile, menu, "Open the editor" (position menu-right) ------ */
.container-header {
  background-color: var(--cs-surface);
  color: var(--cs-ink);
}

.container-header .brand-logo {
  display: inline-flex;
  align-items: center;
  gap: .625rem;
  color: var(--cs-ink);
  text-decoration: none;
}

.cs-logo-tile {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background-color: var(--cs-primary);
  color: #fff;
  font-family: var(--cs-font-hand);
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1;
}

.cs-logo-text {
  font-family: var(--cs-font-display);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: -.01em;
  color: var(--cs-ink);
}

/* Menu: links and dropdown headings (e.g. "Account") look the same; level-1 keeps the
   template style (uppercase, 700). The open dropdown heading gets the active colour. */
.container-header .metismenu.mod-menu > li.level-1 > a,
.container-header .metismenu.mod-menu > li.level-1 > button,
.container-header .metismenu.mod-menu > li.level-1 > span {
  font-family: var(--cs-font-body);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 2;
}

.container-header .metismenu.mod-menu > li.level-1 > button {
  padding: 0;
  border: 0;
  background: none;
}

/* Cassiopeia draws a dotted outline on every :focus (also after a mouse click); keyboard only */
.container-header .metismenu.mod-menu .metismenu-item > button:focus:not(:focus-visible),
.container-header .metismenu.mod-menu .metismenu-item > a:focus:not(:focus-visible) {
  outline: 0;
}

.container-header .metismenu.mod-menu > li.level-1 > button[aria-expanded="true"],
.container-header .metismenu.mod-menu > li.level-1.active > a,
.container-header .metismenu.mod-menu > li.level-1 > a[aria-current="page"] {
  color: var(--cs-primary);
}

/* Dropdown panel (desktop).
   Metismenu animates the height of the <ul> to 0 (.mm-collapsing). The panel therefore has
   NO padding or border of its own (with border-box they would stay visible at height 0 and
   the panel would jump at the end); the inner space sits on the items, the edge is a shadow ring. */
@media (width >=992px) {
  .container-header .metismenu.mod-menu > li.level-1 > ul {
    min-width: 12rem;
    padding: 0;
    border: 0;
    border-radius: var(--cs-radius-md);
    background-color: var(--cs-surface);
    box-shadow: 0 0 0 1px var(--cs-border), var(--cs-shadow-sm);
  }

  .container-header .metismenu.mod-menu > li.level-1 > ul > li {
    padding-inline: .375rem;
  }

  .container-header .metismenu.mod-menu > li.level-1 > ul > li:first-child {
    padding-top: .375rem;
  }

  .container-header .metismenu.mod-menu > li.level-1 > ul > li:last-child {
    padding-bottom: .375rem;
  }
}

.container-header .metismenu.mod-menu .parent > ul li {
  padding: 0;
}

.container-header .metismenu.mod-menu ul .metismenu-item > a,
.container-header .metismenu.mod-menu ul .metismenu-item > .mm-toggler {
  display: block;
  padding: .5rem .75rem;
  border-radius: var(--cs-radius-sm);
  font-family: var(--cs-font-body);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--cs-ink);
  text-decoration: none;
}

.container-header .metismenu.mod-menu ul .metismenu-item > a:hover,
.container-header .metismenu.mod-menu ul .metismenu-item > a:focus-visible,
.container-header .metismenu.mod-menu ul .metismenu-item > .mm-toggler:hover {
  background-color: var(--cs-surface-alt);
  color: var(--cs-primary);
  text-decoration: none;
}

.container-header .metismenu.mod-menu ul .metismenu-item.active > a,
.container-header .metismenu.mod-menu ul .metismenu-item > a[aria-current="page"] {
  color: var(--cs-primary);
  text-decoration: none;
}

.container-header .menu-extra .btn {
  min-height: 40px;
  --btn-padding-y: .5rem;
  --btn-padding-x: 1rem;
  white-space: nowrap;
}

.container-header .menu-extra .r2h-module,
.container-header .menu-extra .module-content__wrapper,
.container-header .menu-extra p {
  margin: 0;
}

/* --- Footer (position footer, layout cs-footer) ------------------------------ */
.container-footer {
  background-color: var(--cs-inverse);
  color: var(--cs-on-inverse-muted);
}

.container-footer .footer-bottom-wrapper {
  background-color: transparent;
}

.container-footer .container-footer-bottom {
  display: block;
}

.cs-footer {
  padding-block: 3rem 2rem;
  font-size: .9375rem;
}

.cs-footer h4 {
  margin-bottom: .75rem;
  font-family: var(--cs-font-body);
  font-size: .8125rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cs-on-inverse-muted);
}

.cs-footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: .5rem;
}

.cs-footer a:not(.btn) {
  color: var(--cs-on-inverse);
  text-decoration: none;
}

.cs-footer a:not(.btn):hover,
.cs-footer a:not(.btn):focus {
  color: var(--cs-primary-on-inverse);
  text-decoration: underline;
}

.cs-footer__brand {
  display: flex;
  align-items: center;
  gap: .625rem;
  margin-bottom: .75rem;
  font-family: var(--cs-font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--cs-on-inverse);
}

.cs-footer__brand + p {
  max-width: 20rem;
}

/* Template logo (inlined SVG) recoloured for the dark footer: petrol → white, white (tile text) → inverse */
.cs-footer__logo {
  display: block;
  width: 220px;
  max-width: 100%;
}

.cs-footer__logo svg {
  display: block;
  width: 100%;
  height: auto;
}

.cs-footer__logo svg [style*="fill:#0e5e68"] {
  fill: var(--cs-on-inverse) !important;
}

.cs-footer__logo svg [style*="fill:#fff"] {
  fill: var(--cs-inverse) !important;
}

.cs-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .5rem;
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, .14);
  font-size: .875rem;
  color: var(--cs-on-inverse-muted);
}

/* --- Blocks ------------------------------------------------------------------ *
   Each horizontal block: <section class="cs-block [variant]"><div class="container">…
   In a full-width position (top-fullwidth / bottom-fullwidth) the background runs
   edge to edge; in a grid position the border-image does the same.            */
.cs-block {
  --cs-block-bg: var(--cs-surface);
  --cs-block-fg: var(--cs-ink);
  --cs-block-muted: var(--cs-ink-muted);
  position: relative;
  padding-block: var(--cs-space-section-sm);
  background-color: var(--cs-block-bg);
  border-image: linear-gradient(var(--cs-block-bg) 0 0) fill 0 / 0 / 0 100vmax;
  color: var(--cs-block-fg);
}

@media (width >=992px) {
  .cs-block {
    padding-block: var(--cs-space-section);
  }
}

.cs-block--alt {
  --cs-block-bg: var(--cs-surface-alt);
}

.cs-block--tight {
  padding-block: var(--cs-space-section-sm) !important;
}

.cs-block--inverse {
  --cs-block-bg: var(--cs-inverse);
  --cs-block-fg: var(--cs-on-inverse);
  --cs-block-muted: var(--cs-on-inverse-muted);
}

.cs-block--inverse a:not(.btn) {
  color: var(--cs-primary-on-inverse);
}

.cs-block--inverse .cs-eyebrow {
  color: var(--cs-primary-on-inverse);
}

.cs-block .lead,
.cs-block .cs-lead {
  color: var(--cs-block-muted);
}

.cs-block > .container > :last-child,
.cs-block .row > [class*="col"] > :last-child {
  margin-bottom: 0;
}

/* Home: hide the empty component area (featured view without articles), unless there is a system message */
.cs-home .container-component:not(:has(#system-message-container > *, .blog-featured > *)) {
  display: none;
}

/* Rows with .g-5 have -1.5rem side margins and this template removes the .container
   padding, so at some widths a row sticks out a few px (horizontal scrollbar). */
.container-top-fullwidth,
.container-bottom-fullwidth {
  overflow-x: clip;
}

/* r2h module wrapper: no gaps between stacked blocks */
.container-top-fullwidth > .r2h-module,
.container-bottom-fullwidth > .r2h-module {
  margin: 0;
}

.container-component > .r2h-module:has(> .module-content__wrapper > .cs-block) {
  margin-bottom: 0;
}

.cs-section-head {
  max-width: var(--cs-measure);
  margin-bottom: 3rem;
}

.cs-section-head--center {
  margin-inline: auto;
  text-align: center;
}

.cs-section-head > :last-child {
  margin-bottom: 0;
}

.cs-section-head h2 {
  margin-bottom: 1rem;
}

.cs-icon-tile {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: var(--cs-radius-md);
  background-color: var(--cs-primary-soft);
  color: var(--cs-primary);
  flex: none;
}

.cs-icon-tile svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cs-card {
  height: 100%;
  padding: 1.5rem;
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius-lg);
  background-color: var(--cs-surface);
  color: var(--cs-ink);
}

/* Hero */
.cs-hero {
  padding-block: 5rem 6rem;
}

.cs-hero .cs-display {
  margin-bottom: 1.25rem;
}

.cs-hero .lead {
  max-width: 34rem;
  margin-bottom: 2rem;
}

.cs-hero__note {
  margin-top: 1rem;
  font-size: .875rem;
  color: var(--cs-block-muted);
}

/* Strip */
.cs-strip {
  padding-block: 1.625rem !important;
}

.cs-strip__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .875rem 2.5rem;
}

.cs-strip__label,
.cs-strip__label p {
  margin: 0;
  font-size: .875rem;
  font-weight: 600;
  color: var(--cs-block-muted);
}

.cs-strip__items {
  display: flex;
  flex-wrap: wrap;
  gap: .625rem 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--cs-font-mono);
  font-size: .875rem;
  font-weight: 500;
}

/* Feature grid */
.cs-feature {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.cs-feature h3 {
  margin: 0;
  font-size: 1.1875rem;
  line-height: 1.47;
}

.cs-feature p {
  margin: 0;
  color: var(--cs-block-muted);
}

/* Split */
.cs-split .cs-buttons {
  margin-top: 1.75rem;
}

/* Steps */
.cs-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: cs-step;
}

.cs-step {
  counter-increment: cs-step;
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

.cs-step::before {
  content: counter(cs-step);
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--cs-radius-pill);
  background-color: var(--cs-primary);
  color: #fff;
  font-family: var(--cs-font-display);
  font-weight: 700;
  font-size: 1.0625rem;
}

.cs-step h3 {
  margin: 0;
  font-size: 1.1875rem;
  line-height: 1.47;
}

.cs-step p {
  margin: 0;
  color: var(--cs-block-muted);
}

/* FAQ — resets the global summary/details styling of this template */
.cs-faq {
  max-width: 48rem;
  border-top: 1px solid var(--cs-border);
}

.cs-faq details {
  border-bottom: 1px solid var(--cs-border);
}

.cs-faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  min-height: 44px;
  padding: 1.125rem 0;
  border-radius: 0;
  background-color: transparent;
  color: var(--cs-block-fg, var(--cs-ink));
  cursor: pointer;
  list-style: none;
  font-family: var(--cs-font-display);
  font-size: 1.1875rem;
  font-weight: 600;
}

.cs-faq summary::-webkit-details-marker {
  display: none;
}

.cs-faq summary::after,
.cs-faq details[open] summary::after {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--cs-primary);
  border-bottom: 2px solid var(--cs-primary);
  transform: rotate(45deg) translateY(-3px);
  transition: transform .2s ease;
}

.cs-faq details[open] summary::after {
  transform: rotate(-135deg) translateY(-3px);
}

.cs-faq details[open] > *:not(summary),
.cs-faq details > div {
  padding: 0 0 1.25rem;
  background-color: transparent;
  color: var(--cs-block-muted, var(--cs-ink-muted));
  max-width: 42rem;
}

.cs-faq details > div > :last-child {
  margin-bottom: 0;
}

/* CTA band */
.cs-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.cs-cta__text {
  max-width: 40rem;
}

.cs-cta h2 {
  margin: 0 0 .5rem;
}

.cs-cta p {
  margin: 0;
  color: var(--cs-block-muted);
}

/* --- Block image (Module › Image) in cs-hero and cs-split ---------------------- */
.cs-media {
  overflow: hidden;
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius-lg);
  background-color: var(--cs-surface);
  box-shadow: var(--cs-shadow-lg);
}

.cs-media img {
  display: block;
  width: 100%;
  height: auto;
}

/* --- Article pages ------------------------------------------------------------ */
.com-content-article__body h2 {
  margin-top: 2.5rem;
}

.com-content-article__body h3 {
  margin-top: 2rem;
}

.cs-table-wrap {
  overflow-x: auto;
  margin-bottom: 1.5rem;
}

.cs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .9375rem;
}

.cs-table th,
.cs-table td {
  padding: .625rem .75rem;
  border-bottom: 1px solid var(--cs-border);
  text-align: left;
  vertical-align: top;
}

.cs-table th {
  font-size: .75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cs-ink-muted);
}

.cs-table td:first-child {
  white-space: nowrap;
}

/* undo the template's ".com_content tr:first-child td" header styling (TinyMCE tables) */
.com_content .cs-table tr:first-child td {
  background-color: transparent !important;
  color: inherit !important;
}

.cs-table code,
.cs-code {
  font-family: var(--cs-font-mono);
  font-size: .875rem;
  color: var(--cs-ink);
}

code[class*=language-],
pre[class*=language-] {
  margin: 0 0 1.5rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius-lg);
  background-color: var(--cs-surface-alt);
  font-family: var(--cs-font-mono);
  font-size: .875rem;
  line-height: 1.6;
  white-space: pre;
  overflow-x: auto;
}

/* round photo with a caption (About page, Custom module in sidebar-right) */
.cs-avatar-card {
  margin: 0 0 1.5rem;
  text-align: center;
}

.cs-avatar {
  display: block;
  width: min(100%, 240px);
  height: auto;
  aspect-ratio: 1;
  margin: 0 auto .75rem;
  border: 4px solid #f1f1f1;
  border-radius: 50%;
  box-shadow: var(--cs-shadow-lg);
  object-fit: cover;
  object-position: 50% 30%;
}

.cs-avatar-card figcaption {
  font-size: .875rem;
  line-height: 1.5;
  color: var(--cs-ink-muted);
}

.cs-avatar-card figcaption strong {
  font-size: 1rem;
  color: var(--cs-ink);
}

/* a section reached with an anchor (On this page menu) keeps some room above its heading */
.com-content-article__body [id] {
  scroll-margin-top: 24px;
}

/* Screenshot in an article (Help): framed, links to the full-size image */
.cs-figure {
  margin: 1.5rem 0 2rem;
}

.cs-figure a,
.cs-figure > img {
  display: block;
}

.cs-figure img {
  width: 100%;
  height: auto;
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius-md);
  box-shadow: var(--cs-shadow-sm);
}

/* small screenshots (a panel, a menu, a dialog) at their own size, never enlarged */
/* (the width comes from an inline style with the width of the file, so the room is reserved
   before the lazy image has loaded and anchors on the page land in the right place) */
.cs-figure--narrow img {
  max-width: 100%;
}

/* "Pro" / "Free" label after a heading */
.com-content-article__body :is(h2, h3) .badge {
  margin-left: .25rem;
  font-size: .5em;
  vertical-align: middle;
}

/* tables with text in every column (privacy, cookies): the first column wraps too */
.cs-table--wrap td:first-child {
  white-space: normal;
}

/* Phones: no table to scroll sideways. Every row becomes a block: the code (or the first
   column) on top over the full width, the explanation below it. The headings are only read
   out; in tables with more columns every cell shows its heading as a label (data-label, set
   by the content script). The Free / Pro comparison stays a table: it fits and needs its ✓ columns. */
@media (max-width: 600px) {
  .cs-table-wrap {
    overflow-x: visible;
  }

  .cs-table:not(.cs-compare),
  .cs-table:not(.cs-compare) tbody,
  .cs-table:not(.cs-compare) tr,
  .cs-table:not(.cs-compare) td {
    display: block;
    width: 100%;
  }

  .cs-table:not(.cs-compare) thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .cs-table:not(.cs-compare) tr {
    padding: .7rem 0;
    border-bottom: 1px solid var(--cs-border);
  }

  .cs-table:not(.cs-compare) td {
    padding: 0;
    border: 0;
  }

  .cs-table:not(.cs-compare) td:first-child {
    margin-bottom: .3rem;
    white-space: normal;
  }

  /* long code ("| C | G | @empty | @empty |b") wraps instead of running off the screen */
  .cs-table:not(.cs-compare) td:first-child code {
    overflow-wrap: anywhere;
  }

  .cs-table--wrap td:first-child {
    font-weight: 600;
  }

  .cs-table--wrap td[data-label]:not(:first-child)::before {
    content: attr(data-label) ": ";
    font-weight: 600;
    color: var(--cs-ink-muted);
  }

  .cs-table--wrap td:not(:first-child) + td {
    margin-top: .2rem;
  }
}

.cs-figure figcaption {
  margin-top: .5rem;
  font-size: .875rem;
  color: var(--cs-ink-muted);
}

/* Pricing: two plans side by side (one column on small screens) */
.cs-plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1.5rem;
  margin: 2rem 0;
}

/* three plans in one row (band plans) from tablet width */
@media (min-width: 768px) {
  .cs-plans--3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* a card that starts with a heading (tiles of the help overview) */
.com-content-article__body .cs-card > :first-child {
  margin-top: 0;
}

.com-content-article__body .cs-card > :last-child {
  margin-bottom: 0;
}

.cs-plan {
  display: flex;
  flex-direction: column;
  padding: 1.75rem 1.5rem;
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius-lg);
  background-color: var(--cs-surface);
}

.cs-plan--pro {
  border: 2px solid var(--cs-primary);
  box-shadow: var(--cs-shadow-lg);
}

.com-content-article__body .cs-plan h2 {
  margin: 0 0 .25rem;
}

.cs-plan__price {
  margin: .5rem 0 0;
  font-family: var(--cs-font-display);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--cs-ink);
}

.cs-plan__note {
  margin: 0 0 1.25rem;
  font-size: .875rem;
  color: var(--cs-ink-muted);
}

.cs-plan ul {
  flex: 1 1 auto;
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
}

.cs-plan li {
  position: relative;
  padding: .375rem 0 .375rem 1.75rem;
  border-bottom: 1px solid var(--cs-border);
}

.cs-plan li::before {
  content: "✓";
  position: absolute;
  left: .25rem;
  font-weight: 700;
  color: var(--cs-primary);
}

.cs-plan li.cs-plan__muted {
  color: var(--cs-ink-muted);
}

.cs-plan li.cs-plan__muted::before {
  content: "–";
  color: var(--cs-ink-muted);
}

/* Comparison table: centred yes / no columns */
.cs-compare td:not(:first-child),
.cs-compare th:not(:first-child) {
  width: 6.5rem;
  text-align: center;
}

.cs-compare td:first-child {
  white-space: normal;
}

.cs-yes {
  font-weight: 700;
  color: var(--cs-primary);
}

.cs-no {
  color: var(--cs-ink-muted);
}

@media (prefers-reduced-motion: reduce) {
  .cs-faq summary::after {
    transition: none;
  }
}

/* #endregion Chord Sheet design (editchordsheetsonline.com) */

/** Custom class to style the Sticky menu for better visibility and accessibility */
.sticky-menu {
  position: sticky;
  top: 2rem;
  z-index: 1000;
}

.sticky-menu li {
  padding: 0;
}

.container-header .mod-menu {
  color: var(--body-color);
}

.menu-extra .mod-menu {
  font-weight: 700;
}

.container-header .mod-menu a,
.container-header .mod-menu button {
  font-weight: 700;
}

.container-header .mod-menu .parent > ul {
  border: 1px solid RGB(221, 227, 232);
  padding: 1rem;
  margin-top: .85rem;
}

/* user profile layout */
#member-profile {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-areas:
    "loginform passkey"
    "buttons passkey"
    "multifactor passkey";
  gap: 1rem;
}

#member-profile > fieldset:nth-of-type(1) {
  grid-area: loginform;
  margin-bottom: 0;
}

#member-profile > fieldset:nth-of-type(2) {
  grid-area: passkey;
  background-color: #f8f8f8;
  padding: 1rem;
  border-radius: .5rem;
  border: 1px solid var(--primary);
}

#member-profile > fieldset:nth-of-type(3) {
  grid-area: multifactor;
  background-color: #f8f8f8;
  padding: 1rem;
  border-radius: .5rem;
  border: 1px solid var(--primary);
}

#member-profile > .com-users-profile__edit-submit {
  grid-area: buttons;
}

@media (max-width: 768px) {
  #member-profile {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "loginform" "passkey" "multifactor" "buttons";
  }
}

.com-users-profile__edit {
  max-width: 900px;
  margin: 0 auto;
}

.com-users-profile__edit .control-group {
  margin: 1em 0 0;
}

.container-header .mod-menu > li + li {
  margin-left: 0;
}

/* Extra menu buttons (e.g. Account): on small screens only the Font Awesome icon.
   The label is a bare text node, so the button gets font-size 0 and the icon its size
   back; screen readers still read the label. */
@media (width < 1200px) {
  .menu-extra .hide-text {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    min-width: 44px;
    font-size: 0;
  }

  .menu-extra .hide-text > [class*="fa-"] {
    padding: 0 !important;
    font-size: 1rem;
    line-height: 1;
  }
}

.container-component,
.container-sidebar-right,
.container-sidebar-left {
  margin-block: 3rem;
}

/* Thank-you page after "Create account" (/create-account?layout=complete): the text and its
   heading come from the module "Thank you message" (chrome r2h_complete); Joomla's own page
   heading "Create account" below it is hidden there */
.com_users.view-registration.layout-complete .com-users-registration-complete > h1 {
  display: none;
}

.form-check-input {
  border: var(--border-width) solid rgb(206, 212, 218);
}