/* ==========================================================================
   TABLE OF CONTENTS
   1.  Variables (single :root)
   2.  Bootstrap 5 overrides
   3.  Base, layout, header / navigation / menus
   4.  Sponsoring / Supporters Club redesign
   5.  Side menus, anchors, TinyMCE accordion
   6.  Legacy 2017/2018 pages (home, sponsors, partners)
   7.  Accessibility (links, colours)
   8.  Joomla theme (brand, Cassiopeia hero, timeline, languages, shooting stars)
   ========================================================================== */


/* ==========================================================================
   1. VARIABLES
   ========================================================================== */
:root {
  /* Sponsoring / light theme */
  --ink: #14233f;
  --ink-soft: #1c3f66;
  --ink-2: #414f6b;
  --paper: #faf6ef;
  --paper-dim: #f1ead9;
  --paper-line: rgba(20, 35, 63, 0.12);
  --ember: #bd3d0e;
  --ember-dark: #96320b;
  --leaf: #2e9e6e;
  --sky: #2e6da4;
  --gold: #f2b134;
  --bronze: #a5672e;
  --silver: #647383;
  --platinum: #5f7285;
  --diamond: #127a9c;
  --line-dark: rgba(250, 246, 239, 0.16);
  --radius: 14px;
  --wrap: 1320px;
  --mono: 'IBM Plex Mono', monospace;
  --bg-radial-ink: radial-gradient(120% 140% at 50% -10%, #232a45 0%, var(--ink) 55%, #0f1322 100%);

  /* Menus */
  --dropdown-bg: var(--bs-body-bg);
  --dropdown-link-active-color: #0f151d;
  --menu-active-bg: #1a3867;

  /* Joomla colours (brand guidelines) */
  --joomla-green: #7ac143;
  --joomla-orange: #f9a541;
  --joomla-red: #f44321;
  --joomla-blue: #5091cd;

  --joomla-secondary-blue: #75bee9;
  --joomla-secondary-orange: #fec34d;
  --joomla-secondary-red: #f27042;
  --joomla-secondary-green: #89c764;

  --joomla-tertiary-1: #25304f;
  --joomla-tertiary-2: #4076a2;
  --joomla-tertiary-3: #2383c6;
  --joomla-tertiary-4: #91c5ea;

  --joomla-neutral-1: #433e42;
  --joomla-neutral-2: #999999;
  --joomla-neutral-3: #c3c3c3;
  --joomla-neutral-4: #ececec;

  --joomla-blue-dark: var(--joomla-tertiary-1);
  --joomla-body-color: var(--joomla-neutral-4);
  --joomla-body-bg: var(--joomla-tertiary-1);
  --joomla-accent-color: var(--joomla-secondary-orange);

  --j-border-radius: 0;
  --j-btn-border-radius: 0;

  /* Variants for text on white backgrounds */
  --joomla-blue-text: #3478B6;
  --joomla-orange-text: #CC7E22; /* large text only */
  --joomla-red-text: #D62C0B;
  --joomla-green-text: #6BA33E;  /* large text only */

  /* JTimeline */
  --jtimeline-primary: inherit;
  --jtimeline-secondary: var(--joomla-neutral-4);
  --jtimeline-accent: var(--joomla-orange);
  --jtimeline-joomla-svg: url(/images/svgs/brand-on-blue.svg);

  --joomla-bg-light: var(--joomla-neutral-4);
  --joomla-bg-white: #fff;

  --j-px-20: 20px;

  /* Portal header */
  --j-navbar-active-color: #fff;
  --j-nav-link-color: rgba(255, 255, 255, .75);
  --j-nav-link-hover-color: #fff;
  --j-navbar-nav-link-padding-x: .625rem;
  --j-btn-focus-shadow-rgb: 49, 132, 253;
  --j-btn-focus-box-shadow-inset: inset 0 0 0 0.25rem rgba(var(--j-btn-focus-shadow-rgb), .7);
}

@media (prefers-color-scheme: dark) {
  :root {
    --dropdown-bg: #0f151d;
    --dropdown-link-active-color: var(--paper);
  }
}


/* ==========================================================================
   2. BOOTSTRAP 5 OVERRIDES
   Rules that only restyle Bootstrap 5 classes or variables, site-wide.
   This file must load after Bootstrap's CSS.
   (The mega-menu / header rules that depend on source order stay in
   section 3: .navbar a.dropdown-item, the mobile overlay, etc.)
   ========================================================================== */

/* --- Theme variables --- */
body {
  --bs-body-color: var(--ink);
  --bs-body-bg: var(--paper);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bs-highlight-color: #000;
  }
  body:not(.itemid-1710), :not(.itemid-1710) .body {
    --bs-body-color: var(--paper);
    --bs-body-bg: #1a222d;
  }
}

/* --- Containers and grid --- */
/* Single definition for the whole site, aligned on the Bootstrap 5
   breakpoints (replaces the former wrap class). */
:root {
  --container-pad: 1.5rem;
}
@media (max-width: 575.98px) {
  :root { --container-pad: 20px; }
}
.container {
  width: 100%;
  max-width: none; /* cancels Bootstrap's 540px step (576–767px) */
  padding-inline: var(--container-pad);
  margin-inline: auto;
}
@media (min-width: 768px)  { .container { max-width: 720px; } }
@media (min-width: 992px)  { .container { max-width: 960px; } }
@media (min-width: 1200px) { .container { max-width: 1140px; } }
@media (min-width: 1400px) { .container { max-width: 1320px; } }

.container-fluid > .row {
  --bs-gutter-x: 0;
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  .flex-lg-row {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .container-lg, .container-md, .container-sm {
    max-width: 100%;
  }
}

/* Link style */
:root, [data-bs-theme="light"] {
  --bs-link-color-rgb: 0,47,167;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bs-link-color-rgb: 165,200,255;
  }
}
/* Base link style */
/*
a:link {
  color: #002fa7;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color 0.15s ease-in-out, text-decoration-color 0.15s ease-in-out;
}
*/

/* Visited state */
/*
a:visited {
  color: #52008f;
}
*/

/* Hover state (mouse users) */
/*
a:hover {
  color: #001959;
  text-decoration-thickness: 2px;
}
*/

/* Focus state (keyboard/accessibility navigation) */
/*
a:focus-visible {
  color: #002fa7;
  outline: 2px solid #002fa7;
  outline-offset: 3px;
  border-radius: 2px;
}
*/

/* Active state (the exact moment of the click) */
/*
a:active {
  color: #001959;
}
*/

.lead {
  font-weight: 400;
}

/* --- Buttons --- */
/*
.btn-primary {
  --bs-btn-color: #000;
  --bs-btn-bg: #ffc107;
  --bs-btn-border-color: #ffc107;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: rgb(255, 202.3, 44.2);
  --bs-btn-hover-border-color: rgb(255, 199.2, 31.8);
  --bs-btn-focus-shadow-rgb: 217, 164, 6;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: rgb(255, 205.4, 56.6);
  --bs-btn-active-border-color: rgb(255, 199.2, 31.8);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
  --bs-btn-disabled-color: #000;
  --bs-btn-disabled-bg: #ffc107;
  --bs-btn-disabled-border-color: #ffc107;
}

.btn-outline-primary {
  --bs-btn-color: #2f6da7;
  --bs-btn-border-color: #2f6da7;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #ffc107;
  --bs-btn-hover-border-color: #ffc107;
  --bs-btn-focus-shadow-rgb: 255, 193, 7;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #ffc107;
  --bs-btn-active-border-color: #ffc107;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
  --bs-btn-disabled-color: #ffc107;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #ffc107;
  --bs-gradient: none;
}

.btn-primary,
.btn-outline-primary {
  padding-left: 1rem;
  padding-right: 1rem;
  font-weight: 500;
  border-radius: 50rem;
}

@media (prefers-color-scheme: dark) {
  .btn-outline-primary {
    --bs-btn-color: #91c5ea;
    --bs-btn-border-color: #91c5ea;
  }
}
*/

/* --- Navbar and dropdowns --- */
.navbar-toggler {
  color: var(--bs-body-color);
}

.navbar-nav .dropdown-menu {
  position: absolute;
  max-height: calc(100vh - 4rem);
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--dropdown-bg);
  border-radius: .375rem;
}

.navbar a:not(.btn) {
  font-weight: 500;
  color: #dee2e6;
  text-decoration: none;
}
.navbar a:not(.btn):focus,
.navbar a:not(.btn):hover {
  color: #fff;
  text-decoration: none;
}

.dropdown-item {
  padding: .5rem 1.5rem;
}
.dropdown-item:focus,
.dropdown-item:hover {
  background-color: var(--paper-dim);
}
.dropdown-menu {
  border: var(--bs-dropdown-border-width) solid var(--bs-border-color);
}
@media (min-width: 992px) {
  .dropdown-menu {
    padding-bottom: .875rem;
  }
}

/* --- Breadcrumb --- */
.breadcrumb {
  background-color: transparent;
  padding: 8px 15px 8px 0;
}

/* --- Tables --- */
@media (max-width: 320px) {
  .table th,
  .table td {
    padding: 4px;
  }
}


/* ==========================================================================
   3. BASE, LAYOUT, HEADER / NAVIGATION
   ========================================================================== */
@media (min-width: 576px) {
  html {
    /* Prevents vertical rubber-banding at the page boundaries */
    overscroll-behavior-y: none;
  }
}

body {
  margin: 0;
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.body {
  padding-top: 0;
  overscroll-behavior: none;
}

.body > .container {
  padding-top: 2.5rem;
}

/* Only target raw URLs, wrap to prevent long URLs from overflowing their containers. */
a[href^="http"],
a[href^="www"] {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.container-xxxl {
  max-width: 1520px;
  width: 100%;
  margin: 0 auto;
}

.com-content-article.item-page {
  font-size: 1.125rem;
}

.footer {
  margin-top: 0;
  padding-top: 36px;
}

footer {
  font-size: 1rem;
}

/* --- Sub-navigation bar --- */
.moduletable._menu {
  width: 100%;
}
.subnav-wrapper .subnav a:not(.btn):focus-visible {
  outline: unset;
  box-shadow: 0 0 0 .25rem rgba(117, 190, 233, .5);
  border-radius: .25rem;
}
.subnav-wrapper .subnav button:focus-visible {
  outline: .25rem solid rgb(117 190 233 / 0.5);
  border-radius: .25rem;
  box-shadow: none;
}
.subnav-wrapper .subnav {
  --bs-navbar-color: var(--ink);
  color: #fff;
  background-color: #1a3867;
  background-image: none;
  box-shadow: 0 1px 3px rgba(0,0,0,.4), 0 0 1px rgba(0,0,0,.2), 0 1px 0 #2f89d3 inset, 0 -1px 0 #368ad8 inset;
}
.subnav-wrapper .subnav .container-xxxl {
  padding: 0 .5rem;
}
.subnav-wrapper .subnav .navbar {
  --bs-navbar-padding-x: .5rem;
  --bs-navbar-padding-y: .5rem;
  --bs-navbar-color: var(--ink);
}
.subnav-wrapper .subnav .navbar ul {
  padding: 0;
}
.subnav-wrapper .subnav .navbar a:not(.navbar-brand) {
  padding: .5rem .75rem;
}
.subnav-wrapper .subnav .navbar a:hover,
.mod-finder-modal__toggle:hover .mod-finder-button-label {
  color: var(--paper);
  text-decoration: underline;
  text-decoration-color: #f9a541;
  text-decoration-thickness: 3px;
  text-underline-offset: 4px;
}
.subnav .navbar .navbar-toggler {
  width: 48px;
  height: 44px;
  padding: var(--bs-navbar-toggler-padding-y) var(--bs-navbar-toggler-padding-x);
  font-size: var(--bs-navbar-toggler-font-size);
  line-height: 1;
  color: #dee2e6;
  background-color: transparent;
  border: var(--bs-border-width) solid transparent;
  border-radius: .5rem;
  transition: var(--bs-navbar-toggler-transition);
}
.subnav .navbar .navbar-toggler:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, .5);
}
.subnav .navbar .navbar-toggler:focus {
  box-shadow: 0 0 0 1px;
}
.subnav .navbar .navbar-toggler:focus-visible {
  box-shadow: none;
}

/* --- Main menu --- */
@media (min-width: 768px) and (max-width: 991.98px) {
  .navigation #mega-menu .navbar-nav > li > button {
    --bs-btn-font-size: 1rem;
  }
}

.navigation #mega-menu .navbar-nav > li {
  border-right: 1px solid #1e3b63;
  box-shadow: 1px 0 0 #1e3b63 inset, -1px 0 0 rgba(0,0,0,.4) inset;
}

/* Hamburger icon: only the colour is overridden. The glyph itself comes from
   Joomla's icon font (.icon-menu::before). Do NOT set an empty content here,
   it hides the icon. If you used a custom glyph, set it with an escape,
   e.g. content: "\f0c9"; */
.navbar-toggler .icon-menu::before {
  color: #fff;
}

#primaryMenu.navbar .navbar-nav {
  margin: 0;
  padding: 0;
  flex-direction: row;
}
.navigation #mega-menu #nav-joomla .navbar-expand-md .navbar-nav {
  flex-direction: row;
}
#primaryMenu,
.navigation #mega-menu #nav-joomla {
  margin: 0;
  padding: 0;
}
#nav-joomla .navbar-nav > li > button {
  --bs-btn-font-size: 1rem;
}

#primaryMenu a.nav-link {
  padding: .75rem 1.4375rem .75rem .75rem;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
  border: 1px solid transparent;
}
#primaryMenu a.nav-link:focus {
  border: 1px solid #fff;
}
#primaryMenu a.nav-link:hover,
#nav-joomla li:not(.nav-header, .dropdown-col):focus,
#nav-joomla li:not(.nav-header, .dropdown-col):hover {
  background-color: rgba(250, 246, 239, .08);
}
#primaryMenu a .icon-download {
  padding-right: .5rem;
  font-size: 1rem;
  text-decoration: none !important;
}
#primaryMenu a.btn.btn-primary,
#primaryMenu a.btn.btn-outline-primary {
  text-wrap: nowrap;
  margin: 0 .5rem 0 .75rem;
}

.navigation #mega-menu .navbar-nav > li > button {
  --bs-btn-padding-y: .75rem;
  font-weight: 500;
  color: #dee2e6;
}
.navigation #mega-menu .navbar-nav > li:first-child > button.btn {
  padding-left: 1.1875rem;
}
.navigation #mega-menu .navbar-nav > li > button:hover {
  color: var(--paper);
}
.navigation #mega-menu .navbar-nav > li.current > button {
  color: #fff;
  background: var(--menu-active-bg);
}

.metismenu.mod-menu.jorg-sitemenu .metismenu-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: .5rem .75rem;
  font-size: 1.125rem;
  line-height: 1.5;
}

/* --- Dropdowns --- */
.dropdown-item-home {
  font-weight: inherit;
}
.dropdown-item.nav-header:hover {
  background: transparent;
}
.dropdown-fullscreen-close {
  display: none;
  -webkit-appearance: none;
  appearance: none;
}

.navbar a.dropdown-item {
  color: var(--ink);
  text-decoration: none;
}
.navbar a.dropdown-item:not(.btn):focus,
.navbar a.dropdown-item:not(.btn):hover {
  color: var(--ink);
}

.navigation .nav-header {
  padding: .5rem .75rem;
  font-family: 'IBM Plex Mono', monospace;
  font-size: .875rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: inherit;
  line-height: 1.6;
  color: var(--ember);
}

/* Desktop */
@media (min-width: 992px) {
  #primaryMenu.navbar {
    overflow: visible;
  }
  .dropdown-menu.show.dropdown-menu-cols {
    display: grid;
    grid-template-columns: repeat(2, minmax(270px, 2fr));
    gap: 0;
  }
  .dropdown-menu-cols .dropdown-col-full {
    grid-column: 1 / -1;
  }
  .dropdown-menu-cols .dropdown-col {
    border-left: none;
    padding-left: 0;
  }
  .dropdown-menu-cols .dropdown-col li a {
    text-wrap: wrap;
  }
  .dropdown-menu-cols .dropdown-col ~ .dropdown-col {
    border-left: 1px solid var(--bs-dropdown-divider-bg);
  }
  .dropdown-menu-cols .dropdown-divider {
    margin: .5rem;
  }
  .dropdown-item-home {
    font-weight: 600;
  }
  .metismenu.mod-menu.jorg-sitemenu .metismenu-item {
    padding: 0;
    font-size: 1rem;
  }
}

/* Mobile: scrollable bar + open menu as a full-screen overlay.
   The menu is moved to be a direct child of <body> by the JS. */
@media (max-width: 991.98px) {
  #mega-menu {
    overflow-x: hidden;
    width: 100%;
  }
  #primaryMenu.navbar {
    overflow-x: scroll;
    scrollbar-width: none;
    margin: 0;
    padding: 0;
    flex-wrap: nowrap !important;
  }

  /* Separator between groups (replaces the columns' left border) */
  body > .dropdown-menu-cols.show .dropdown-col:not(:first-child) {
    margin-top: .5rem;
    padding-top: .5rem;
    border-top: 1px solid var(--bs-dropdown-divider-bg);
  }

  .dropdown-item:focus,
  .dropdown-item:hover {
    border-radius: .5rem;
  }
  .dropdown-toggle::after {
    display: none;
  }

  body > .dropdown-menu.show {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    max-height: none;
    margin: 0;
    padding: 1rem;
    border: 0;
    border-radius: 0;
    overflow-y: auto;
    z-index: 3000;
    color: var(--ink);
    background: var(--paper);
    display: flex;
    flex-direction: column;
  }
  body > .dropdown-menu.show .dropdown-header {
    --bs-dropdown-header-color: var(--ink);
    padding: 0 0 .5rem;
  }
  body > .dropdown-menu.show .dropdown-header .icon-joomla {
    width: 2rem;
    text-align: center;
  }
  body > .dropdown-menu.show .dropdown-item {
    font-size: 1.125rem;
    padding: .5rem .75rem .5rem 2.25rem;
    text-wrap: wrap;
  }
  body > .dropdown-menu.show .dropdown-item:active {
    color: var(--dropdown-link-active-color);
  }
  body > .dropdown-menu.show .dropdown-item.nav-header {
    padding-left: 1.125rem;
    font-family: 'IBM Plex Mono', monospace;
    letter-spacing: .14em;
    font-size: 1rem;
    font-weight: 500;
    color: var(--ember);
  }

  body > .dropdown-menu.show .dropdown-fullscreen-close {
    align-self: flex-end;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    font-size: 1.75rem;
    line-height: 1;
    width: 44px;   /* min. touch target (WCAG 2.5.5) */
    height: 44px;
    margin-bottom: .5rem;
    cursor: pointer;
    color: inherit;
  }
  body > .dropdown-menu.show .dropdown-fullscreen-close:focus {
    outline: none;
    box-shadow: none;
  }
  body > .dropdown-menu.show .dropdown-fullscreen-close.show-focus-ring:focus {
    outline: 2px solid currentColor;
    outline-offset: 2px;
  }

  /* Prevents the page from scrolling behind the overlay */
  body.dropdown-fullscreen-open {
    overflow: hidden;
  }

  @media (prefers-color-scheme: dark) {
    body > .dropdown-menu.show {
      color: var(--paper);
      background: var(--dropdown-bg);
    }
    body > .dropdown-menu.show .dropdown-header {
      --bs-dropdown-header-color: var(--paper);
    }
    body > .dropdown-menu.show .dropdown-item {
      color: var(--paper);
    }
    body > .dropdown-menu.show .dropdown-item.nav-header {
      color: var(--gold);
    }
  }
}

/* Dark mode (global) */
@media (prefers-color-scheme: dark) {
  .navbar a.dropdown-item {
    color: var(--paper);
  }
  .navbar a.dropdown-item:not(.btn):focus,
  .navbar a.dropdown-item:not(.btn):hover {
    color: #fff;
  }
  .dropdown-item:not(.nav-header):focus,
  .dropdown-item:not(.nav-header):hover {
    color: var(--paper);
    background-color: rgba(250, 246, 239, .08);
  }
  .navigation .nav-header {
    color: var(--gold);
  }
  .awesomplete > ul {
    background: linear-gradient(to bottom right, #212529, #1c2127);
    border: 1px solid #495057;
  }
  .awesomplete > ul::before {
    background: #212529;
  }
}

/* --- Sticky wrapper + shrink on scroll --- */
.subnav-wrapper {
  position: sticky;
  top: 0;
  z-index: 999; /* stays below Bootstrap dropdowns (--bs-dropdown-zindex: 1000) */
  background: var(--bs-body-bg, #fff);
  transition: box-shadow .3s ease;
}
.subnav-wrapper .mod-finder-container {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: .5rem;
  margin-top: 14px;
  transition: height .3s ease;
}

@media (min-width: 576px) {
  .subnav-wrapper .navbar {
    transition: padding .3s ease;
  }
  .subnav-wrapper .navbar-brand img {
    height: 46px;
    width: auto;
    transition: height .3s ease;
  }
  .subnav-wrapper .mod-finder-container {
    height: 72px;
    align-items: center;
    margin-top: 0;
  }

  .subnav-wrapper.is-shrunk {
    box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
  }
  .subnav-wrapper.is-shrunk .navbar {
    padding-top: 0;
    padding-bottom: 0;
  }
  .subnav-wrapper.is-shrunk .navbar-brand img {
    height: 32px;
    margin-top: -5px;
  }
  .subnav-wrapper.is-shrunk .mod-finder-container {
    height: 44px;
  }
  .subnav-wrapper.is-shrunk .subnav .navbar .navbar-toggler:not(:focus-visible) {
    border-radius: 0;
  }
}

@media (min-width: 576px) and (prefers-reduced-motion: reduce) {
  .subnav-wrapper,
  .subnav-wrapper .navbar,
  .subnav-wrapper .navbar-brand img {
    transition: none;
  }
}

@media (max-width: 991.98px) {
  .subnav-wrapper .subnav .navbar ul {
    padding-bottom: 1rem;
  }
}


/* ==========================================================================
   4. SPONSORING / SUPPORTERS CLUB REDESIGN
   ========================================================================== */
.itemid-1710 .body {
  background: var(--paper);
  color: var(--ink);
}

/* Same vertical padding for every redesigned section.
   :where() keeps the specificity at 0, so a block can still override it
   (see .hero and .how-sponsoring). */
:where(.hero, .leader, .ledger, .packages, .supporters-club, .how, .sponsors, .partners, .cta-band, .why:has(.why-grid)) {
  padding: 80px 0 96px;
}
@media (min-width: 992px) {
  :where(.hero, .leader, .ledger, .packages, .supporters-club, .how, .sponsors, .partners, .cta-band, .why:has(.why-grid)) {
    padding: 96px 0 120px;
  }
}

.eyebrow {
  font-family: 'IBM Plex Mono', monospace;
  letter-spacing: .14em;
  font-size: 1rem;
  font-weight: 500;
}

/* Generic element styles (images, headings, links, buttons, selection…)
   are limited to the redesigned blocks listed below, so they don't leak
   site-wide. Add any new redesigned block to this list. */
:is(.hero, .leader, .ledger, .packages, .supporters-club, .how, .sponsors, .partners, .cta-band, .section-head, .why-grid) {
  & img {
    max-width: 100%;
    display: block;
  }
  & h1,
  & h2,
  & h3 {
    font-family: 'Space Grotesk', 'Manrope', sans-serif;
    margin: 0;
    letter-spacing: -.01em;
  }
  & a:not(.btn) {
    color: inherit;
  }
  & blockquote {
    padding-left: 0;
    border-left: none;
  }

  & button,
  & .btn {
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 1.125rem;
    border-radius: 999px;
    padding: 15px;
    border: 2px solid transparent;
    cursor: pointer;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
  }
  @media (min-width: 992px) {
    & button,
    & .btn {
      padding: 15px 30px;
    }
  }
/*
  & .btn-primary {
    box-shadow: 0 6px 18px rgba(249, 165, 45, .28);
  }
  & .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(249, 165, 45, .38);
  }
*/
  & .btn-accent {
    background: #ffc107;
    color: #000;
    border-color: #ffc107;
    box-shadow: 0 6px 18px rgba(249, 165, 45, .28);
  }
  & .btn-accent:hover {
    background: rgb(255, 202.3, 44.2);
    border-color: rgb(255, 199.2, 31.8);
    box-shadow: 0 10px 26px rgba(249, 165, 45, .38);
    transform: translateY(-2px);
  }

  & .btn-ghost-dark {
    background: transparent;
    color: var(--paper);
    border-color: rgba(250, 246, 239, .45);
  }
  & .btn-ghost-dark:hover {
    background: rgba(250, 246, 239, .08);
    border-color: rgba(250, 246, 239, .4);
    transform: translateY(-2px);
  }

  & .btn-ghost-light {
    background: transparent;
    color: var(--ink);
    border-color: var(--paper-line);
  }
  & .btn-ghost-light:hover {
    background: var(--ink);
    color: var(--paper);
    border-color: var(--ink);
    transform: translateY(-2px);
  }

  & a:focus-visible,
  & button:focus-visible {
    outline: 2px solid var(--paper);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px var(--ink);
    border-radius: 4px;
  }

  & ::selection {
    background: var(--ink);
    color: var(--paper);
  }

  @media (prefers-reduced-motion: reduce) {
    & * {
      animation-duration: .001ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: .001ms !important;
      scroll-behavior: auto !important;
    }
  }
}

/* Selection colour on dark blocks */
.hero ::selection,
.cta-band ::selection,
.badge-preview ::selection {
  background: var(--gold);
  color: var(--ink);
}

/* ---------- HERO ---------- */
.hero {
  position: relative;
  background: var(--bg-radial-ink);
  color: var(--paper);
  overflow: hidden;
  padding-top: 48px;
}
@media (min-width: 576px) {
  .hero {
    padding-top: 96px;
  }
}
.hero .container {
  position: relative;
  z-index: 2;
}
.hero-inner {
  max-width: 768px;
}
.hero .eyebrow {
  color: var(--gold);
  margin-bottom: 22px;
}
.hero h1 {
  font-size: clamp(38px, 5.4vw, 68px);
  font-weight: 600;
  line-height: 1.04;
  color: #fff;
}
.hero h1 em {
  font-style: italic;
  color: var(--gold);
  font-weight: 500;
}
.hero p.lede {
  font-size: 1.25rem;
  color: rgba(250, 246, 239, .78);
  max-width: 720px;
  margin: 26px 0 40px;
}
.hero-ctas {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.hero-assurance {
  font-size: 1rem;
  color: rgba(250, 246, 239, .72);
  margin: 18px 0 0;
}

.hero-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px 32px;
  margin-top: 76px;
  padding-top: 32px;
  border-top: 1px solid var(--line-dark);
  max-width: 760px;
}
.corporate-sponsorship .hero-stats {
  grid-template-columns: repeat(3, 1fr);
}
.hero-stats div strong {
  display: block;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.875rem;
  color: #fff;
  font-weight: 600;
}
.hero-stats div span {
  display: block;
  font-size: 1.125rem;
  color: rgba(250, 246, 239, .72);
}

@media (max-width: 767.98px) {
  .hero-stats {
    grid-template-columns: repeat(2, 1fr);
  }
  .corporate-sponsorship .hero-stats {
    grid-template-columns: 1fr;
  }
}

/* ---------- LEADERSHIP MESSAGE ---------- */
.leader {
  background: var(--paper);
  border-bottom: 1px solid var(--paper-line);
}
.leader .container {
  border-left: 3px solid var(--sky);
  padding-left: 40px;
  max-width: 820px;
}
.leader .eyebrow {
  color: var(--ember);
  margin-bottom: 18px;
  display: block;
}

.leader-quote,
.ledger-quote {
  font-family: 'Space Grotesk', sans-serif;
  font-style: italic;
  font-weight: 500;
  line-height: 1.35;
  margin: 0;
  font-size: clamp(22px, 3vw, 32px);
  color: var(--ink);
}
.leader-quote cite,
.ledger-quote cite {
  display: block;
  margin-top: 18px;
  font-family: 'IBM Plex Mono', monospace;
  font-style: normal;
  font-size: .875rem;
  color: var(--ink-2);
}

/* ---------- LEDGER (where the funds go) ---------- */
.ledger {
  background: var(--ink);
  color: var(--paper);
  position: relative;
}
.ledger .container {
  display: grid;
  grid-template-columns: .9fr 1.4fr;
  gap: 60px;
  align-items: start;
}
.ledger h2 {
  color: #fff;
  font-size: clamp(26px, 3.2vw, 36px);
  font-weight: 600;
  line-height: 1.15;
}
.ledger .eyebrow {
  color: var(--gold);
  margin-bottom: 16px;
}
.ledger p:not(.eyebrow) {
  color: rgba(250, 246, 239, .72);
  margin-top: 1.25rem;
  font-size: 1.25rem;
}
.ledger-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 40px;
  border-top: 1px solid var(--line-dark);
}
.ledger-list div {
  display: flex;
  gap: 14px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line-dark);
  font-size: 1.0625rem;
  color: rgba(250, 246, 239, .88);
}
.ledger-list div::before {
  content: "✓";
  color: #34a878;
  font-weight: 600;
  flex: none;
}
.ledger-quote {
  grid-column: 1 / -1;
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid var(--line-dark);
  font-size: clamp(20px, 2.6vw, 26px);
  color: #fff;
  max-width: 640px;
}
.ledger-quote cite {
  color: rgba(250, 246, 239, .72);
}

/* ---------- PACKAGES ---------- */
.tier-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.tier-card {
  position: relative;
  border-radius: var(--radius);
  padding: 30px 26px 34px;
  border: 1px solid var(--paper-line);
  background: #fff;
  display: flex;
  flex-direction: column;
  transition: transform .2s ease, box-shadow .2s ease;
}
.tier-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 48px rgba(21, 26, 46, .1);
}
.tier-recommend {
  position: absolute;
  top: 0;
  right: 22px;
  transform: translateY(-50%);
  background: var(--ember);
  color: #fff;
  font-family: 'IBM Plex Mono', monospace;
  font-size: .875rem;
  letter-spacing: .06em;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 999px;
}
.tier-note {
  text-align: center;
  margin: 20px 0 0;
  font-size: 1rem;
  color: var(--ink-2);
}
.tier-tag {
  font-family: 'IBM Plex Mono', monospace;
  font-size: .875rem;
  letter-spacing: .12em;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 999px;
  display: inline-block;
  margin-bottom: 1.25rem;
  width: fit-content;
}
.tier-price {
  font-family: sans-serif;
  font-size: 2.5rem;
  font-weight: 600;
  margin-bottom: .25rem;
}
.tier-price span {
  font-family: 'Manrope', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink-2);
}
.tier-card ul {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  font-size: 1.125rem;
  color: var(--ink-2);
  flex: 1;
}
.tier-card li {
  padding: 9px 0;
  border-top: 1px solid var(--paper-line);
}
.tier-card li:first-child {
  border-top: none;
}

.tier-bronze .tier-tag   { background: #f4e3d3; color: #8a4b1c; }
.tier-silver .tier-tag   { background: #e9ebee; color: #5a6472; }
.tier-gold .tier-tag     { background: #faedcd; color: #8a6414; }
.tier-platinum {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.tier-platinum .tier-price        { color: #fff; }
.tier-platinum .tier-price span   { color: rgba(250, 246, 239, .6); }
.tier-platinum .tier-tag          { background: var(--gold); color: #3a2a05; }
.tier-platinum ul                 { color: rgba(250, 246, 239, .75); }
.tier-platinum li                 { border-top: 1px solid var(--line-dark); }
.tier-platinum:hover              { box-shadow: 0 22px 48px rgba(21, 26, 46, .35); }

.community-band {
  margin-top: 22px;
  border-radius: var(--radius);
  background: linear-gradient(120deg, #eaf4ee, #f1ead9 65%);
  border: 1px solid var(--paper-line);
  padding: 34px 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
}
.community-band h3 {
  font-size: 1.375rem;
  font-weight: 600;
  margin-bottom: .375rem;
  color: var(--ink);
}
.community-band p {
  margin: 0;
  color: var(--ink-2);
  font-size: 1.125rem;
  max-width: 720px;
}
.community-price {
  font-family: sans-serif;
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--ember);
  white-space: nowrap;
}

/* ---------- WHY JOIN ---------- */
.why {
  margin-bottom: 0 !important; /* avoids a clash with .where (legacy sponsor page) */
}

.section-head {
  max-width: 720px;
  margin-bottom: 64px;
}
.section-head .eyebrow {
  color: var(--ember);
  margin-bottom: .875rem;
}
.section-head h2 {
  font-size: clamp(28px, 3.6vw, 42px);
  font-weight: 600;
  color: var(--ink);
}
.section-head p:not(.eyebrow) {
  margin-top: 16px;
  color: var(--ink-2);
  font-size: 1.25rem;
}

.why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  position: relative;
}
.why-card {
  background: #fff;
  border: 1px solid var(--paper-line);
  border-radius: var(--radius);
  padding: 36px 30px;
  position: relative;
  transition: transform .2s ease, box-shadow .2s ease;
}
.why-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(21, 26, 46, .08);
}
.why-node {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
  color: #fff;
}
.why-node svg {
  width: 21px;
  height: 21px;
}
.why-card:nth-child(1) .why-node { background: var(--ink-soft); }
.why-card:nth-child(2) .why-node { background: var(--ember); }
.why-card:nth-child(3) .why-node { background: var(--bronze); }
.why-card h3 {
  font-size: 1.375rem;
  font-weight: 600;
  margin-bottom: 10px;
  color: var(--ink);
}
.why-card p {
  color: var(--ink-2);
  font-size: 1.125rem;
  margin: 0;
}

/* ---------- SUPPORTERS CLUB ---------- */
.supporters-club {
  background: linear-gradient(180deg, #fff 0%, var(--paper-dim) 100%);
  border-top: 1px solid var(--paper-line);
  border-bottom: 1px solid var(--paper-line);
}
.sc-head {
  max-width: 680px;
  margin-bottom: 20px;
}
.sc-flag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: .875rem;
  letter-spacing: .1em;
  font-weight: 600;
  color: #fff;
  background: var(--ink);
  padding: 6px 13px;
  border-radius: 999px;
  margin-bottom: 20px;
}
.sc-head h2 {
  font-size: clamp(26px, 3.4vw, 38px);
  font-weight: 600;
  color: var(--ink);
}
.sc-head p {
  margin-top: 16px;
  color: var(--ink-2);
  font-size: 1.125rem;
  max-width: 600px;
}
.sc-anchor {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink-2);
}
.sc-layout {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 56px;
  margin-top: 56px;
  align-items: start;
}
.sc-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.sc-col-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: .875rem;
  font-weight: 600;
  color: var(--ink-2);
  margin-bottom: 1.125rem;
  display: block;
}
.sc-tier {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 0;
  border-top: 1px solid var(--paper-line);
}
.sc-tier:first-of-type {
  border-top: none;
}
.sc-tier-name {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 1.25rem;
}
.sc-tier-perk {
  margin: 5px 0 0 22px;
  font-size: 1rem;
  font-weight: 400;
  color: var(--ink-2);
  line-height: 1.4;
}
.sc-swatch {
  width: 12px;
  height: 12px;
  border-radius: 4px;
  flex: none;
  background: var(--ink-2);
}
.sc-swatch--bronze   { background: var(--bronze); }
.sc-swatch--silver   { background: var(--silver); }
.sc-swatch--gold     { background: var(--gold); }
.sc-swatch--platinum { background: var(--platinum); }
.sc-swatch--diamond  { background: var(--diamond); }
.sc-tier-price {
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 600;
  font-size: 1.125rem;
  color: var(--ink-2);
  padding-top: .175rem;
  white-space: nowrap;
}

.sc-social-proof {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink-2);
  margin: 14px 0 0;
}
/* ⚠ Inactive: the green dot only shows if .sc-social-proof is
   display:flex (with align-items:center; gap:8px). */
.sc-social-proof::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--leaf);
  flex: none;
}

.badge-preview {
  background: var(--ink);
  border-radius: 18px;
  padding: 36px 30px;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 18px;
}
.badge-seal {
  width: 96px;
  height: 96px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gold);
  border-radius: 50%;
  padding: 5px;
}
.badge-seal::after {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: var(--ink);
}
.badge-seal span {
  position: relative;
  z-index: 2;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: .875rem;
}
.badge-preview .lvl {
  font-family: 'IBM Plex Mono', monospace;
  letter-spacing: .12em;
  font-size: 1.125rem;
  color: var(--gold);
  font-weight: 600;
}
.badge-preview p {
  margin: 0;
  font-size: 1rem;
  color: rgba(250, 246, 239, .75);
  max-width: 280px;
}

.sc-notes {
  margin-top: 2.5rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
.sc-note {
  font-size: 1rem;
  color: var(--ink-2);
  padding-left: 18px;
  border-left: 2px solid var(--gold);
}
.sc-note strong {
  display: block;
  color: var(--ink);
  font-size: 1.25rem;
  margin-bottom: 4px;
}

/* ---------- HOW IT WORKS ---------- */
.how-sponsoring {
  padding-top: 0;
}
.how-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-block: 1px solid var(--paper-line);
}
.how-step {
  padding: 34px 30px;
  border-left: 1px solid var(--paper-line);
}
.how-step:first-child {
  border-left: none;
}
.how-step .num {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 1rem;
  color: var(--ember);
  font-weight: 600;
  margin-bottom: 12px;
  display: block;
}
.how-step h3 {
  font-size: 1.375rem;
  font-weight: 700;
  margin-bottom: .5rem;
  font-family: 'Manrope', sans-serif;
  color: var(--ink);
}
.how-step p {
  margin: 0;
  color: var(--ink-2);
  font-size: 1.125rem;
}

/* ---------- CURRENT SPONSORS ---------- */
.sponsors {
  background: var(--paper-dim);
}
.sponsors .section-head {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
.sponsors .section-head .eyebrow {
  justify-content: center;
  display: flex;
}
.sponsor-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.sponsor-card {
  background: #fff;
  border: 1px solid var(--paper-line);
  border-radius: 12px;
  padding: 26px 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 150px;
  justify-content: space-between;
}
.sponsor-tier {
  font-family: 'IBM Plex Mono', monospace;
  font-size: .875rem;
  letter-spacing: .1em;
  font-weight: 600;
  color: var(--ink-2);
}
.sponsor-tier.platinum { color: var(--platinum); }
.sponsor-tier.gold     { color: #8a6414; }
.sponsor-tier.bronze   { color: #8a4b1c; }
.logo-mark {
  font-family: 'Manrope', sans-serif;
  font-weight: 800;
  font-size: 1.25rem;
  display: flex;
  align-items: center;
  gap: 9px;
}
.logo-dot {
  width: 11px;
  height: 11px;
  border-radius: 3px;
  display: inline-block;
  flex: none;
  background: var(--ink-2);
}
.logo-dot--platinum { background: var(--platinum); }
.logo-dot--gold     { background: var(--gold); }
.logo-dot--bronze   { background: var(--bronze); }
.logo-sub {
  font-size: .875rem;
  letter-spacing: .08em;
  color: var(--ink-2);
  font-weight: 600;
}

/* ---------- PARTNERS (filterable) ---------- */
.partners-layout {
  display: grid;
  grid-template-columns: 210px 1fr;
  gap: 56px;
  align-items: start;
}
.partner-filter {
  position: sticky;
  top: 128px;
}
.partner-filter .label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: .75rem;
  letter-spacing: .1em;
  font-weight: 600;
  color: var(--ink-2);
  margin-bottom: 14px;
  display: block;
}
.partner-filter ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.partner-filter button {
  all: unset;
  cursor: pointer;
  font-family: 'Manrope', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink-2);
  padding: 10px 14px;
  border-radius: 8px;
  display: block;
  width: 100%;
  transition: background .15s ease, color .15s ease;
}
.partner-filter button:hover {
  background: var(--paper-dim);
  color: var(--ink);
}
.partner-filter button.active {
  background: var(--ink);
  color: #fff;
}
.partner-filter button:focus-visible {
  outline: 2px solid var(--paper);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--ink);
}

.partner-group {
  margin-bottom: 52px;
}
.partner-group:last-child {
  margin-bottom: 0;
}
.partner-group h3 {
  font-size: 1.375rem;
  font-weight: 600;
  margin-bottom: 1.375rem;
  color: var(--ink);
}
.partner-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.partner-card {
  background: #fff;
  border: 1px solid var(--paper-line);
  border-radius: var(--radius);
  padding: 26px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform .18s ease, box-shadow .18s ease;
}
.partner-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 34px rgba(21, 26, 46, .08);
}
.partner-tag {
  align-self: flex-start;
  font-family: 'IBM Plex Mono', monospace;
  font-size: .875rem;
  letter-spacing: .08em;
  font-weight: 600;
  color: var(--ink-2);
  background: var(--paper-dim);
  padding: 5px 11px;
  border-radius: 999px;
}
.partner-logo {
  font-family: 'Manrope', sans-serif;
  font-weight: 800;
  font-size: 1.375rem;
  display: flex;
  align-items: center;
  gap: 9px;
}
.partner-card p {
  margin: 0;
  font-size: 1rem;
  color: var(--ink-2);
  flex: 1;
}
.partner-card .btn-small {
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  text-align: center;
  padding: .625rem .5rem;
  border-radius: 2rem;
  border: 1.5px solid var(--paper-line);
  text-decoration: none;
  color: var(--ink);
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.partner-card .btn-small:hover {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
.partner-card.become-placeholder {
  background: transparent;
  border: 1.5px dashed var(--paper-line);
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--ink-2);
  min-height: 150px;
  gap: 6px;
}
.partner-card.become-placeholder a {
  text-decoration: none;
  font-size: .9375rem;
  font-weight: 600;
  color: var(--ink-2);
}
.partner-card.become-placeholder a:hover {
  color: var(--ember);
}
.partner-card.become-placeholder .plus {
  font-family: sans-serif;
  font-size: 1.5rem;
  color: var(--ember);
}

/* ---------- CTA BAND ---------- */
.cta-band {
  position: relative;
  text-align: center;
  color: #fff;
  background: var(--bg-radial-ink);
  overflow: hidden;
}
.cta-band .inner {
  position: relative;
  max-width: 560px;
  margin: 0 auto;
  z-index: 2;
}
.cta-band h2 {
  margin-bottom: 1.125rem;
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 600;
}
.cta-band p:not(.hero-assurance) {
  margin-bottom: 2.25rem;
  font-size: 1.25rem;
  color: rgba(250, 246, 239, .75);
}

/* ---------- FOOTER ---------- */
.support-joomla-footer {
  padding: 40px 32px;
  text-align: center;
  color: var(--ink-2);
  font-size: 1rem;
  background: var(--paper);
}
.support-joomla-footer a {
  color: var(--ember);
  font-weight: 600;
  text-decoration: none;
}
.support-joomla-footer a:hover {
  text-decoration: underline;
}

/* ---------- RESPONSIVE (single set of breakpoints) ---------- */
@media (max-width: 991.98px) {
  .why-grid,
  .how-grid,
  .sc-layout,
  .ledger-list,
  .ledger .container {
    grid-template-columns: 1fr;
  }
  .ledger .container {
    gap: 32px;
  }
  .tier-grid,
  .sponsor-grid,
  .partner-grid {
    grid-template-columns: 1fr 1fr;
  }
  .how-step {
    border-left: none;
    border-top: 1px solid var(--paper-line);
  }
  .how-step:first-child {
    border-top: none;
  }

  .partners-layout {
    grid-template-columns: 1fr;
  }
  .partner-filter {
    position: static;
    margin-inline: calc(-1 * var(--container-pad));
    /* The filter is a grid item: it must be a scroll container itself
       (min-width: auto => 0), otherwise the nowrap buttons stretch the
       grid track and the whole page overflows instead of the filter. */
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .partner-filter .label {
    padding-left: var(--container-pad);
  }
  .partner-filter ul {
    flex-direction: row;
    gap: .5rem;
    padding-inline: var(--container-pad);
    overflow-x: auto;
    scrollbar-width: none;
  }
  .partner-filter button {
    width: auto;
    white-space: nowrap;
  }
}

@media (max-width: 575.98px) {
  .leader .container {
    padding-left: 22px;
  }
  .hero-ctas {
    flex-direction: column;
    align-items: stretch;
  }
  .hero-stats {
    gap: 24px 20px;
  }
  .tier-grid,
  .sponsor-grid,
  .partner-grid,
  .sc-cols {
    grid-template-columns: 1fr;
  }
  .community-band {
    flex-direction: column;
    align-items: flex-start;
  }
}

/** END - Sponsoring / Supporters Club */


/* ==========================================================================
   5. SIDE MENUS, ANCHORS, TINYMCE ACCORDION
   ========================================================================== */
.mod-list .deeper a.nav-link {
  display: inline-block;
  width: calc(100% - 44px);
  border-right: none;
}
.mod-list .deeper .mod-menu__toggle-sub {
  display: inline-flex;
  width: 44px;
}
.mod-list li.deeper {
  border-right: var(--bs-nav-tabs-border-width) solid var(--bs-nav-tabs-border-color);
}

/* Scroll to anchor */
:root [id] {
  scroll-margin-top: 92px;
}

body:not(.itemid-1710) h2:not(:first-child):not(:is(.hero, .leader, .ledger, .packages, .supporters-club, .how, .sponsors, .partners, .cta-band, .section-head, .why-grid) *) {
  margin-top: 2rem;
}

/* Article image width */
.left.item-image {
  padding-right: 0;
}

/*
   Details TinyMCE accordion
   Added by Cyril Reze - 10 September 2026
*/
details.mce-accordion {
  --bs-accordion-color: var(--bs-body-color);
  --bs-accordion-bg: var(--bs-body-bg);
  --bs-accordion-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out, border-radius .15s ease;
  --bs-accordion-border-color: var(--bs-border-color);
  --bs-accordion-border-width: var(--bs-border-width);
  --bs-accordion-border-radius: var(--bs-border-radius);
  --bs-accordion-inner-border-radius: calc(var(--bs-border-radius) - (var(--bs-border-width)));
  --bs-accordion-btn-padding-x: 1.25rem;
  --bs-accordion-btn-padding-y: 1rem;
  --bs-accordion-btn-color: var(--bs-body-color);
  --bs-accordion-btn-bg: var(--bs-accordion-bg);
  --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23212529' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e");
  --bs-accordion-btn-icon-width: 1.25rem;
  --bs-accordion-btn-icon-transform: rotate(-180deg);
  --bs-accordion-btn-icon-transition: transform .2s ease-in-out;
  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='rgb%285.2, 44, 101.2%29' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e");
  --bs-accordion-btn-focus-box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25);
  --bs-accordion-body-padding-x: 1.25rem;
  --bs-accordion-body-padding-y: 1rem;
  --bs-accordion-active-color: var(--bs-primary-text-emphasis);
  --bs-accordion-active-bg: var(--bs-primary-bg-subtle);
  padding: var(--bs-accordion-body-padding-y) var(--bs-accordion-body-padding-x) 0;
  color: var(--bs-accordion-color);
  background-color: var(--bs-accordion-bg);
  border: var(--bs-accordion-border-width) solid var(--bs-accordion-border-color);
  overflow: visible; /* keeps the box-shadow from being clipped when closed */
}
details.mce-accordion summary {
  position: relative;
  display: flex;
  align-items: center;
  width: calc(100% + var(--bs-accordion-body-padding-x) + var(--bs-accordion-body-padding-x));
  margin: calc(-1 * var(--bs-accordion-body-padding-y)) calc(-1 * var(--bs-accordion-body-padding-x)) 0 calc(-1 * var(--bs-accordion-body-padding-x));
  padding: var(--bs-accordion-body-padding-y) var(--bs-accordion-body-padding-x);
  font-size: 1rem;
  font-weight: bold;
  color: var(--bs-accordion-btn-color);
  text-align: left;
  background-color: var(--bs-accordion-btn-bg);
  border: 0;
  overflow-anchor: none;
}
details.mce-accordion summary::after {
  flex-shrink: 0;
  width: var(--bs-accordion-btn-icon-width);
  height: var(--bs-accordion-btn-icon-width);
  margin-left: auto;
  content: "";
  background-image: var(--bs-accordion-btn-icon);
  background-repeat: no-repeat;
  background-size: var(--bs-accordion-btn-icon-width);
}
details.mce-accordion summary:hover {
  z-index: 2;
}
details.mce-accordion summary:focus,
details.mce-accordion[open] > summary:focus {
  z-index: 3;
  outline: 0;
  box-shadow: var(--bs-accordion-btn-focus-box-shadow);
}
details.mce-accordion[open] {
  padding-bottom: var(--bs-accordion-body-padding-y);
}
details.mce-accordion[open] > summary {
  margin-bottom: var(--bs-accordion-body-padding-y);
  color: var(--bs-accordion-active-color);
  background-color: var(--bs-accordion-active-bg);
  box-shadow: inset 0 calc(-1 * var(--bs-accordion-border-width)) 0 var(--bs-accordion-border-color);
}
details.mce-accordion[open] > summary::after {
  background-image: var(--bs-accordion-btn-active-icon);
  transform: var(--bs-accordion-btn-icon-transform);
}
details + details.mce-accordion:not(:first-of-type) {
  border-top: 0;
}

@media (prefers-reduced-motion: no-preference) {
  details.mce-accordion summary {
    transition: var(--bs-accordion-transition), margin .25s ease-in;
  }
  details.mce-accordion[open] > summary {
    transition: var(--bs-accordion-transition), margin .25s ease-out;
  }
  details.mce-accordion summary::after {
    transition: var(--bs-accordion-btn-icon-transition);
  }
  details.mce-accordion::details-content {
    display: block;
    opacity: 0;
    transition: opacity .5s ease, display .5s ease;
    transition-behavior: allow-discrete;
  }
  details.mce-accordion[open]::details-content {
    opacity: 1;
  }
}

@media (prefers-color-scheme: dark) {
  details.mce-accordion summary::after {
    --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='rgb%28109.8, 168, 253.8%29'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='rgb%28109.8, 168, 253.8%29'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  }
}


/* ==========================================================================
   6. LEGACY 2017 / 2018 PAGES
   ========================================================================== */

/* Prevents a brief horizontal scrollbar (shooting stars) */
body.itemid-122 {
  overflow-x: hidden;
}

/* ---------- Hosting Sponsors 2018 ---------- */
.bloghsponsors .featured {
  border: 2px solid #1b63a2;
  background: #fff;
  border-radius: 0;
}
.bloghsponsors .badge {
  font-size: 1em;
  padding: 12px;
}
.bloghsponsors span.label {
  display: block;
}
.bloghsponsors span.label-success {
  background: #1b63a2;
  padding: 12px;
  font-size: 12px;
  margin-bottom: 16px;
}
.bloghsponsors .item .page-header {
  border-bottom: 0;
  margin-bottom: 0;
}
.bloghsponsors .pull-left.item-image img {
  max-width: 250px;
}
.bloghsponsors .featured img {
  margin: 0 auto 24px;
  display: block;
}
.hsponsor-title {
  padding: 0 0 24px;
}
.hsponsor-title,
.bloghsponsors .item a {
  font-size: 1.2em;
  line-height: 1.2;
}
.bloghsponsors .item a {
  font-weight: 700;
  display: block;
  text-align: right;
}
.bloghsponsors .items-row {
  padding: 8px 0;
}

/* ---------- Home 2018 ---------- */
.who .col-md-6:last-child {
  transform: translateY(30%);
}
.oursponsors img {
  width: 80%;
  max-width: 100%;
  transform: scale(1);
  transition: all .2s ease-in 0s;
}
.oursponsors img:hover {
  filter: none;
  transform: scale(1.1);
}
.oursponsors img.member.crowdin,
.oursponsors img.member.elasticemail,
.oursponsors img.member.scalahosting {
  filter: grayscale(1) opacity(.7);
}
.oursponsors img.member.crowdin:hover,
.oursponsors img.member.elasticemail:hover,
.oursponsors img.member.scalahosting:hover {
  filter: opacity(1);
}
@media (prefers-color-scheme: dark) {
  .oursponsors img.member.crowdin {
    filter: grayscale(1) invert(1) opacity(.5);
  }
  .oursponsors img.member.crowdin:hover {
    filter: grayscale(1) invert(1) opacity(1);
  }
  .oursponsors img.member.elasticemail {
    filter: grayscale(1) opacity(1);
  }
  .oursponsors img.member.scalahosting {
    filter: grayscale(1) opacity(.7);
  }
  .oursponsors img.member.elasticemail:hover,
  .oursponsors img.member.scalahosting:hover {
    filter: none;
  }
}

.numbers-box a {
  color: #fff;
  text-decoration: none;
}
.numbers-box a:hover {
  text-decoration: none;
}
.numbers-box a .numbers-info {
  opacity: 1;
}
.numbers-box a:hover .numbers-info {
  opacity: .7;
}
.numbers-box .text-lowercase {
  color: #fff;
  opacity: 1;
}
.numbers-box a:hover .text-lowercase {
  text-decoration: underline;
}

/* Partners page: anchors */
.anchors:target {
  margin-top: -85px;
  padding-top: 85px;
}

/* ---------- Home redesign ---------- */
.itemid-366 #content {
  display: none;
}
.error.itemid-122 #content,
.error.itemid-366 #content {
  display: inherit;
}

.event img,
.announcements img,
.newsflash-image img,
.effects img {
  box-shadow: 0 5px 15px -10px rgba(0, 0, 0, 1);
  max-width: 100%;
  height: auto;
}

/* Buttons */
.features .btn,
.whyjoomla .btn,
.feedshp .btn,
.showcase .btn,
.who .btn,
.joomlabirthday20 .btn {
  margin: 10px 0 20px;
}
.oursponsors .btn,
.newsletter .btn {
  margin: 0;
}

/* ---------- Hero ---------- */
.moduletable.topbanner {
  background-image: url("../../../../../images/homepage/brand-navy-on-transparent.svg");
  background-repeat: no-repeat;
  background-position: center 70%;
  background-size: cover;
  background-color: #25304f;
}
.topbanner .container {
  padding-bottom: 50px;
  padding-top: 50px;
  background-color: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
}
.hero-overlay {
  background-color: rgba(37, 48, 79, .3);
  background-image:
    radial-gradient(ellipse at right top, transparent 80%, #012c5a 97%),
    radial-gradient(ellipse at left top, transparent 80%, #0b1b35 97%),
    linear-gradient(to top, #062448 28%, transparent 42%);
  background-repeat: no-repeat;
  margin-bottom: -24px;
}

.hero-heading {
  animation: fadeInUp 1.5s both;
  color: #fff;
  margin: 0 auto 80px;
  max-width: 800px;
  text-shadow: 1px 1px 1px #192136;
  font-size: 20px;
  font-weight: normal;
  line-height: 1.38462;
}
.hero-heading h1,
.hero-heading h2 {
  color: #fff;
  margin-bottom: 25px;
  font-size: 53px;
  font-weight: normal;
  line-height: 1.13208;
}
.hero-heading .btn {
  text-shadow: none !important;
}

.hero-teaser > div {
  transform: translateY(0);
  transition: transform .3s ease;
}
.hero-teaser > div:hover {
  transform: translateY(-10px);
}
.hero-teaser > div:hover article {
  box-shadow: 0 0 30px #0d111c;
}
.hero-teaser article {
  background: var(--bs-body-bg);
  border-radius: 2px;
  margin-bottom: 15px;
  transition: all .2s ease-in 0s;
  padding-top: 30px;
}
.hero-teaser .hero-teaser-title {
  margin: 1.75rem 0;
}
.hero-teaser .hero-teaser-body {
  min-height: 80px;
  padding: 0 25px;
  font-size: 14px;
}
.hero-teaser footer {
  font-size: 20px;
}
.hero-teaser footer a {
  background: #5091cd;
  border-bottom-left-radius: 2px;
  border-bottom-right-radius: 2px;
  color: #000;
  display: block;
  padding: 20px 30px;
  text-decoration: none;
}
.hero-teaser > div:first-child footer a {
  background: #89c764;
}
.hero-teaser > div:last-child footer a {
  background: #f27042;
}
.hero-teaser > div:first-child .icon-circled,
.icon-circled-additional-secondary-olive {
  background: #89c764;
}
.hero-teaser .icon-circled,
.icon-circled-primary {
  background: #5091cd;
  color: #fff;
}
.hero-teaser > div:last-child .icon-circled,
.icon-circled-secondary-orange {
  background: #f27042;
  color: #fff;
}

.fadeInUp {
  animation: fadeInUp 1s both;
}
@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.fade-in {
  opacity: 0;
  animation: fadeIn 1s ease-in forwards;
}

/* Round icons */
.icon-circled-sm {
  font-size: 23px;
  height: 45px;
  line-height: 45px;
  width: 45px;
}
.topbanner .icon-circled-sm .svg-icon {
  height: 24px;
  margin: -2px 1px 0 0;
  width: 24px;
  line-height: 24px;
}
.icon-circled .svg-icon {
  height: 50px;
  margin: -8px 2px 0 0;
  width: 50px;
  line-height: 50px;
}
.svg-icon {
  display: inline-block;
  fill: currentcolor;
  vertical-align: middle;
  text-shadow: none;
}

/* ---------- Announcements ---------- */
.moduletable.announcements {
  padding: 50px 0 30px;
  background: #1b63a2;
  color: #fff;
}
.moduletable.announcements h3 a {
  color: #eee;
}
.newsflash-item:not(:last-child) {
  margin-bottom: 10px;
}
.newsflash-item .readmore {
  margin-top: 10px;
}

/* ---------- Why Joomla ---------- */
.moduletable.whyjoomla {
  padding: 30px 0;
}
.whyjoomla .col-md-6:first-child {
  position: relative;
  transform: translateY(15%);
}

/* ---------- Features ---------- */
body:not(.itemid-1710) .features h2,
body:not(.itemid-1710) .why:not(:has(.why-grid)) h2 {
  margin-bottom: 50px;
  font-size: 30px;
}
.features h2 {
  color: #25304f;
}
.feature {
  padding: 15px 0;
  text-shadow: 1px 1px 1px #0d111c;
}
.feature .icon-circled {
  margin-bottom: 20px;
  transform: scale(1);
  transition: all .2s ease-in 0s;
}
.feature .icon-circled img:hover,
.feature .icon-circled:hover {
  box-shadow: 0 0 30px #0d111c;
  transform: scale(1.15);
}
.moduletable.features {
  background: #ececec;
  padding: 50px 0 30px;
}
.icon-circled-lg {
  font-size: 50px;
  height: 100px;
  line-height: 100px;
  width: 100px;
}
.icon-circled {
  border-radius: 50%;
  display: inline-block;
  overflow: hidden;
}
.features .feature {
  padding: 15px 0;
  text-shadow: 1px 1px 1px var(--bs-body-bg);
  color: #25304f;
  font-size: 14px;
}
.icon-circled-secondary-yellow             { background: #fec34d; }
.icon-circled-additional-secondary-green   { background: #50af8c; }
.icon-circled-additional-secondary-scarlet { background: #ee5256; }
.icon-circled-secondary-blue               { background: #75bee9; }
.icon-circled-additional-secondary-red     { background: #e97575; }
.icon-circled-additional-secondary-purple  { background: #8564c7; }
.icon-circled-additional-secondary-orange  { background: #f27042; }

/* ---------- News / events ---------- */
.moduletable.feedshp {
  --bs-heading-color: #333;
  color: #333;
  background: linear-gradient(to right, #ececec 0%, #ececec 50%, var(--bs-body-bg) 51%, var(--bs-body-bg) 100%);
}
.moduletable.feedshp .news {
  background: #ececec;
  --bs-heading-color: #333;
  color: #333;
}
.moduletable.feedshp .events {
  --bs-heading-color: var(--bs-body-color);
  background: var(--bs-body-bg);
  color: var(--bs-body-color);
}
.moduletable.feedshp .event {
  margin-left: 20px;
  padding: 0 20px 20px;
}
.feedshp .news,
.feedshp .events {
  padding-top: 50px;
  padding-bottom: 20px;
  display: flex;
  flex-direction: column;
}
.moduletable.feedshp .contribute {
  border-top: 1px dotted #ddd;
  margin-left: 20px;
  padding: 20px 20px 0;
}
.feedshp .news h3 {
  border-bottom: 1px dotted #bbb;
  padding-bottom: 5px;
}
.feedshp .news h4 {
  margin-bottom: 0;
  font-size: 1rem;
  font-weight: 600;
}
.feedshp .news .moduletable:not(:last-child),
.feedshp .news .feed-item:not(:last-child) {
  margin-bottom: 10px;
}

/* ---------- Numbers ---------- */
.numbers .numbers-box {
  color: #fff;
  height: 265px;
  position: relative;
}
.numbers .numbers-img,
.numbers .numbers-overlay {
  height: 100%;
  width: 100%;
}
.info .announcements .announcement-title a,
.info .events a,
.info h2,
.who-is-using h2 {
  color: #433e42;
}
.numbers .numbers-text {
  height: 56%;
  bottom: 20px;
  font-size: 18px;
  font-weight: normal;
  left: 20px;
  line-height: 24px;
  position: absolute;
  text-transform: uppercase;
}
.numbers .number {
  font-size: 4rem;
  display: block;
}
.numbers .number sup {
  font-size: 1.75rem;
  left: -.3em;
  top: -.8em;
}
.numbers .numbers-img {
  background-size: cover;
}
.numbers .extensions .numbers-text,
.numbers .installations .numbers-text,
.numbers .support .numbers-text {
  right: 20px;
  left: auto;
}
.numbers .installations { background: #D2430F; }
.numbers .installations .numbers-overlay { background-color: rgba(242, 112, 66, .55); }
.numbers .installations .numbers-img { background: url("../../../../../images/homepage/numbers/installations-bg.jpg") no-repeat center center; }

.numbers .extensions { background: #357ABB; }
.numbers .extensions .numbers-overlay { background-color: rgba(80, 145, 205, .55); }
.numbers .extensions .numbers-img { background: url("../../../../../images/homepage/numbers/extensions-bg.jpg") no-repeat center center; }

.numbers .support { background: #3B8168; }
.numbers .support .numbers-overlay { background-color: rgba(80, 175, 140, .55); }
.numbers .support .numbers-img { background: url("../../../../../images/homepage/numbers/support-bg.jpg") no-repeat center center; }

.numbers .volunteers { background: #13294a; }
.numbers .volunteers .numbers-overlay { background-color: rgba(137, 199, 100, .55); }
.numbers .volunteers .numbers-img { background: url("../../../../../images/homepage/numbers/volunteers-bg.jpg") no-repeat center center; }

.numbers .development { background: #8564c7; }
.numbers .development .numbers-overlay { background-color: rgba(133, 100, 199, .55); }
.numbers .development .numbers-img { background: url("../../../../../images/homepage/numbers/development-bg.jpg") no-repeat center center; }

.numbers .languages { background: #DE3535; }
.numbers .languages .numbers-overlay { background-color: rgba(233, 117, 117, .55); }
.numbers .languages .numbers-img { background: url("../../../../../images/homepage/numbers/languages-bg.jpg") no-repeat center center; }

/* ---------- Showcase / newsletter ---------- */
.moduletable.showcase,
.moduletable.newsletter {
  background: #1b63a2;
  padding: 1.25rem 0;
  color: #fff;
}
.moduletable.who,
.moduletable.oursponsors {
  padding-top: 50px;
  padding-bottom: 30px;
}
.effects figure {
  margin: 40px;
}
.newsletter {
  margin-top: 15px;
}
.newsletter input#user_name,
.newsletter input#user_email {
  font-family: "Open Sans", sans-serif;
  font-size: 16px;
  border-top: 0;
  border-left: 0;
  border-right: 0;
  border-bottom: 1px dotted #aaa;
  box-shadow: none;
  margin-right: 40px;
  border-radius: 0;
  padding-top: 20px;
}

/* ---------- AcyMailing ---------- */
.acyreceive input {
  float: left;
  margin-right: 5px;
}
.acy input {
  width: 90%;
}
.acyconsent input[type="checkbox"] {
  float: left;
  margin-right: 10px;
  margin-top: 2px;
}

/* ---------- Benefits / Features 2018 ---------- */
.itemid-195 .accordion-group {
  border-radius: 0;
}
.itemid-195 .accordion-group h4 {
  margin: 0;
  padding: 12px 0;
}
.itemid-195 .accordion-group h4:hover {
  background: #eee;
}
.itemid-195 .accordion-group h4 a:hover,
.itemid-195 .accordion-group h4 a:focus {
  text-decoration: none;
}

/* ---------- Video ---------- */
.video-container {
  position: relative;
  padding-bottom: 1%;
  overflow: hidden;
  margin-top: 15px;
}
.video-container iframe {
  max-width: 100%;
}
.moduletable.announcements .col-md-6.video-container {
  padding: 0 15px;
  text-align: center;
}

/* ---------- Miscellaneous (Sandra) ---------- */
img.member {
  filter: grayscale(1);
}
@media (prefers-color-scheme: dark) {
  img.member.crowdin {
    filter: grayscale(1) invert(.8) opacity(.8);
  }
}
img.pull-right {
  margin: 2px 0 5px 5px;
}
img.pull-left {
  margin: 2px 5px 5px 0;
}

/* News */
.blog .img_caption {
  width: auto !important;
}
.blog img {
  margin-bottom: 10px;
}
dt.article-info-term {
  display: none;
}
dd.category-name,
dd.create,
dd.modified {
  margin-left: 0;
}

/* Media contact */
.contact {
  padding-top: 1em;
}
.contact h1 {
  border-bottom: 1px solid #eee;
  padding-bottom: 15px;
}
.contact h3 {
  display: none;
}

/* ---------- SPONSOR (2018) ---------- */
.itemid-366 .features {
  margin: 40px -20px;
}
.itemid-366 .why h2,
.itemid-366 .where h2,
.itemid-366 .pack h2 {
  font-size: 26px;
  border-bottom: 1px dotted #bbb;
  padding-bottom: 10px;
  text-align: center;
}
.itemid-514 .rsform-checkbox {
  margin-right: 1rem;
}
.topbanner.sponsor-home {
  background-image: url("../../../../../images/sponsor/sponsorbackground.jpg");
  background-repeat: no-repeat;
  background-position: 70% 100%;
  background-size: cover;
  text-align: center;
  height: 386px;
  margin: -10px -20px 0;
}
.sponsor-home .intro {
  padding: 80px 0 0;
  text-align: center;
}
.sponsor-home .intro h1 {
  color: #fff;
  font-size: 4em;
  line-height: .9em;
  margin-bottom: 20px;
  text-shadow: 0 2px 4px #000;
  text-transform: uppercase;
}
.sponsor-home .intro h2 {
  color: #fff;
  font-size: 2em;
  font-weight: 300;
  margin-bottom: 50px;
  margin-top: 20px;
  text-shadow: 0 2px 4px #000;
  padding: 0;
}
.heart {
  margin-bottom: -3em;
  margin-top: -5em;
}

/* Sponsor buttons */
.btnbluesponsor,
.btntranssponsor,
.btngreensponsor {
  border-radius: 5px;
  color: #fff;
  font-size: 22px;
  margin: 10px;
  padding: 15px 50px;
  text-decoration: none;
  display: inline-block;
}
.btnbluesponsor  { background: #1b63a2; }
.btntranssponsor { border: 1px solid #5091cd; }
.btngreensponsor { background: #198754; }
.btnbluesponsor:hover,
.btntranssponsor:hover {
  background: #0b5ed7;
  text-decoration: none;
}
.btngreensponsor:hover {
  background-color: #157347;
}

.where ul li {
  list-style-type: none;
  font-size: 1rem;
  line-height: 30px;
}
.where .icon-checkmark {
  padding-right: 10px;
}
.where {
  background: #242f4e;
  color: #fff;
  padding: 40px 0;
  margin-bottom: 50px;
}
.where .left {
  padding-left: 16.6667%;
}

/* Packages */
.pack h4 {
  border-radius: calc(var(--pack-border-radius) - var(--pack-border-width));
  color: #fff;
  font-size: 1.75em;
  margin-bottom: 15px;
  margin-top: 0;
  padding: 20px;
  text-transform: uppercase;
  text-align: center;
  line-height: 20px;
}
.pack .platinum h4 { background: #686868; }
.pack .gold h4     { background: #b78840; }
.pack .silver h4   { background: #a4a4a4; color: #000; }
.pack .bronze h4   { background: #996633; }
.pack .community h4 {
  border-bottom: 1px solid var(--bs-secondary);
  color: inherit;
}
.pack .col-md-4 .pack-item,
.pack .col-md-3 .pack-item {
  --pack-border-width: 1px;
  --pack-border-radius: 5px;
  border: var(--pack-border-width) solid var(--bs-secondary);
  border-radius: var(--pack-border-radius);
  padding-bottom: 20px;
  height: 100%;
}
.pack .col-md-3 {
  margin-bottom: 10px;
}
.pack h3 {
  font-size: 1.75em;
  font-weight: 300;
  margin: 50px 0 30px;
  text-transform: uppercase;
  text-align: center;
}
.pack p {
  font-size: 24px;
  margin-bottom: 15px;
  text-align: center;
}

/* Disclaimer */
.disclaimer {
  border-top: 1px solid #5091cd;
  font-size: .75rem;
  font-style: italic;
  margin: 75px 0 0;
  padding: 40px 10%;
}

/* Start an application */
.help {
  background-image: url("../../../../../images/sponsor/sponsorbackground.jpg");
  background-repeat: no-repeat;
  background-position: 70% 100%;
  background-size: cover;
  color: #fff;
  text-align: center;
  margin: 0 -20px;
}
.help .sponsor-text,
.help-article .sponsor-text {
  padding: 100px 0 120px;
}
.help h3,
.help-article h3 {
  font-size: 2em;
  font-weight: 300;
  margin-bottom: 20px;
  margin-top: 20px;
}

/* Application process */
.sponsor-process h3 {
  background: url("../../../../../images/sponsor/hex.png") no-repeat center center;
  padding: 55px 50px;
  margin: 30px 0;
  font-size: 2.35em;
}
.sponsor-process p {
  max-width: 85%;
  margin: 0 auto 10px;
}
.sponsor-process .col-md-3 h3::after {
  content: '>';
  display: inline-block;
  position: absolute;
  padding-left: 10%;
}
.sponsor-process .col-md-3:last-child h3::after {
  content: '';
}

/* Current sponsors page */
h2.global {
  background: url("../../../../../images/sponsor/global.png") no-repeat center center;
  height: 140px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 3rem;
}
h2.community {
  background: url("../../../../../images/sponsor/community.png") no-repeat center center;
  margin-bottom: 60px;
  padding-top: 100px;
  text-align: center;
}
.global-sponsor {
  border: 1px solid #5091cd;
  margin: 3rem 0;
  padding: 1.25rem;
  font-size: 1.1rem;
}
.global-sponsor ul li {
  font-size: 1rem;
  line-height: 30px;
}
.global-sponsor .btn {
  margin-left: 1.25rem;
}

/* Sponsor submenu */
.submenu {
  background-color: #1b63a2;
  margin: 0 -20px 40px;
}
.submenu ul {
  margin-left: 2.5rem;
}
.submenu ul li {
  line-height: 3rem;
  font-size: .75rem;
  text-transform: uppercase;
}
.submenu ul li a {
  --bs-nav-link-color: #fff;
  --bs-nav-link-hover-color: #fff;
  --bs-nav-link-padding-x: .625rem;
  --bs-nav-link-padding-y: 0;
}
.submenu ul li a:focus,
.submenu ul li a:hover,
.submenu ul li.active {
  background-color: #5091cd;
}
.submenu ul li a:focus,
.submenu ul li a:hover,
.submenu ul li.active a {
  color: #000;
}

/* Sponsor RSForm */
.sponsor-application {
  width: 60%;
  margin: 0 auto;
}
.sponsor-application .rsform-block {
  margin: 15px 0;
}
.sponsor-application .rsform-block.rsform-block-package {
  margin-bottom: 1.5rem;
}
.sponsor-application h2 {
  border-bottom: 1px solid #5091cd;
  margin: 2rem auto;
  padding: 1rem 0;
  text-transform: uppercase;
}
.sponsor-application input[type="text"],
.sponsor-application select {
  width: 60%;
}
.form2LinesLayout .formField label {
  float: left;
  text-align: left;
  width: 30%;
}
.form2LinesLayout .rsform-block-message label {
  width: auto;
}
/* Consent: auto-width label, error on a new line */
.form2LinesLayout .formField.rsform-block-requestconsent label {
  width: auto;
}
.form2LinesLayout .formField.rsform-block-requestconsent .form-check-inline {
  width: 100%;
}
.com_rsform .formError,
.com_rsform .formRed {
  color: var(--bs-danger);
}
.com_rsform .rsform-block-hcaptcha .formBody {
  float: none;
}

/* ---------- RESPONSIVE (legacy) ---------- */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .pack .col-md-4 {
    min-height: 290px;
  }
  .who .col-md-6:last-child {
    transform: translateY(15%);
  }
}

@media (max-width: 991.98px) {
  .sitelock {
    text-align: center;
  }
  .sitelock .pull-right {
    float: none;
    margin: 10px;
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .submenu ul li {
    text-transform: none;
  }
  .sponsor-application {
    width: 80%;
  }
  .pack .col-md-4 {
    min-height: 320px;
  }
  .where .left {
    padding-left: 0;
  }
  .hero-teaser footer a {
    padding: 20px 10px;
  }
  .hero-teaser .hero-teaser-title {
    font-size: 22px;
  }
  .hero-teaser .hero-teaser-body {
    min-height: 95px;
  }
  .whyjoomla .col-md-6:first-child {
    transform: translateY(10%);
  }
  .numbers .numbers-text {
    font-size: 14px;
    line-height: 20px;
    left: 15px;
  }
  .numbers .number {
    font-size: 40px;
  }
  .numbers .numbers-box {
    height: 180px;
  }
  .numbers .extensions .numbers-text,
  .numbers .installations .numbers-text,
  .numbers .support .numbers-text {
    right: 15px;
  }
  .who .col-md-6:last-child {
    transform: translateY(7%);
  }
}

@media (max-width: 767.98px) {
  .btnbluesponsor,
  .btntranssponsor,
  .btngreensponsor {
    padding: 15px;
  }
  .pack .col-md-4 {
    margin: 10px 0;
    min-height: auto;
  }
  .pack .col-md-3 {
    min-height: 200px;
  }
  .where {
    padding: 10px 0;
  }
  .where .left {
    padding-left: 0;
  }
  .where ul {
    margin: 0;
  }
  .where ul li {
    font-size: .75rem;
  }
  .sponsor-process .col-md-3 h3::after {
    display: none;
  }

  .hero-heading h1,
  .hero-heading h2 {
    font-size: 43px;
  }
  .hero-teaser article {
    padding-top: 0;
  }
  .hero-teaser .hero-teaser-body {
    min-height: auto;
  }
  .hero-teaser .hero-teaser-title {
    margin: 18px 0;
  }
  .whyjoomla .col-md-6:first-child {
    transform: none;
  }
  .video-container {
    text-align: center;
  }
  .moduletable.feedshp .contribute,
  .moduletable.feedshp .event {
    margin: 0;
    padding: 10px 0;
  }
  .feedshp .events {
    padding-top: 20px;
  }
  .numbers .extensions .numbers-text,
  .numbers .installations .numbers-text,
  .numbers .support .numbers-text {
    right: 0;
    left: 20px;
  }
  .numbers .numbers-box {
    height: 220px;
  }
  .newsletter .text-right,
  .showcase .text-right {
    text-align: center;
    margin-top: 10px;
  }
  .moduletable.newsletter,
  .moduletable.showcase {
    text-align: center;
  }
  .newsletter input#user_name,
  .newsletter input#user_email {
    margin-right: 20px;
  }
  .who .col-md-6:last-child {
    transform: translateY(0);
  }
  .oursponsors img {
    max-width: 200px;
  }
  .header > .container {
    padding: .25rem; /* header announcement */
  }
}

@media (min-width: 576px) and (max-width: 767.98px) {
  .sponsor-application {
    width: 100%;
  }
  .sponsor-application textarea {
    width: 90%;
  }
  .form2LinesLayout .formField label {
    font-size: 100%;
    width: 25%;
  }
  .sponsor-home .intro {
    padding: 55px 0 0;
  }
  .heart {
    display: none;
  }
}

@media (max-width: 575.98px) {
  .topbanner.sponsor-home {
    display: none;
  }
  .submenu {
    margin: 0 calc(-1 * var(--bs-gutter-x)) 40px;
  }
  .submenu ul {
    margin: 0 var(--bs-gutter-x);
  }
  .submenu ul li {
    line-height: 2.25rem;
    text-transform: none;
  }
  .sponsor-application {
    width: 100%;
  }
  .sponsor-application input[type="text"],
  .sponsor-application select,
  .sponsor-application textarea,
  #package {
    width: 90%;
    margin: 0;
  }
  .form2LinesLayout .formField label {
    float: none;
    width: 100%;
  }
  .sponsor-application .btngreensponsor {
    font-size: 14px;
    font-weight: bold;
    padding: 15px 7px;
  }

  .hero-heading h1,
  .hero-heading h2 {
    font-size: 33px;
  }
  .hero-heading p {
    display: none;
  }
  .hero-heading {
    margin-bottom: 40px;
  }
  .hero-heading .btn {
    width: 100%;
  }
  .topbanner .container {
    padding-bottom: 40px;
    padding-top: 40px;
  }
  .hero-teaser footer a {
    padding: 20px 10px;
  }
  .who p {
    width: auto;
  }
  .numbers .numbers-text {
    height: 70%;
  }
  .whyjoomla .btn,
  .features .btn,
  .readmore .btn,
  .newsflash .btn,
  .newsfeed .btn,
  .events .btn,
  .showcase .btn,
  .newsletter .btn,
  .contribute .btn {
    width: 100%;
  }
  /* Hides the download and launch buttons on the home page */
  .itemid-122 .header .col-md-5 {
    display: none;
  }
}

@media (max-width: 320px) {
  img.pull-right,
  img.pull-left {
    float: none;
    margin: 5px;
  }
  .feedshp img.pull-left {
    float: left;
  }
  .numbers .number {
    font-size: 45px;
  }
  .numbers .numbers-text {
    font-size: 15px;
  }
}

.header .page-title a {
  font-family: 'Source Sans Pro', sans-serif;
}

/* ---------- Joomla 20 years banner ---------- */
.moduletable.topbanner.joomlabirthday20 {
  background-image: url("../../../../../images/homepage/20YearsJoomla_site-hero-banner_2.svg");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  background-color: #25304f;
}
@media (min-width: 1920px) {
  .moduletable.topbanner.joomlabirthday20 {
    background-position: center 40%;
  }
}
.joomlabirthday20 .hero-heading {
  padding-top: 300px;
  margin-bottom: 0;
}
.joomlabirthday20 .container {
  padding-bottom: 0;
}


/* ==========================================================================
   7. ACCESSIBILITY (Cyril)
   ========================================================================== */
.feed-link a,
.event a:not(.btn) {
  color: #2f6da7;
}
.feed-link a:hover,
.event a:not(.btn):hover {
  color: #23517b;
}
.feed-link a:visited,
.event a:not(.btn):visited {
  color: #792D80;
  text-decoration-color: hotpink;
}
.event .text-muted,
.feed-posted {
  color: #595c5f;
}

@media (prefers-color-scheme: dark) {
  .moduletable.features {
    background: #25304f;
  }
  .features h2,
  .features .feature {
    color: #ececec;
  }
  .moduletable.feedshp {
    --bs-heading-color: #333;
    color: #333;
    background: linear-gradient(to right, #25304f 0%, #25304f 50%, var(--bs-body-bg) 51%, var(--bs-body-bg) 100%);
  }
  .moduletable.feedshp .news {
    background: #25304f;
    --bs-heading-color: #ececec;
    color: #ececec;
  }
  .feed-link a,
  .event a:not(.btn) {
    color: var(--bs-link-color);
  }
  .feed-link a:hover,
  .event a:not(.btn):hover {
    color: #7CACDA;
  }
  .feed-link a:visited,
  .event a:not(.btn):visited {
    color: #C677CF;
    text-decoration-color: hotpink;
  }
  .event .text-muted,
  .feed-posted {
    color: #c3c3c3;
  }
}

/* Joomla round icons (Cyril) */
[class*="j-icon-circle"] {
  display: flex;
  align-items: center;
  border-radius: 50%;
  transform: scale(1);
  transition: all .2s ease-in 0s;
}
[class*="j-icon-circle"]:hover {
  box-shadow: 0 0 30px #0d111c;
  transform: scale(1.15);
}
.j-icon-circle-0 { width: 7.5rem;   height: 7.5rem;   padding: 1.75rem;   font-size: 4rem; }
.j-icon-circle-1 { width: 6.5rem;   height: 6.5rem;   padding: 1.25rem;   font-size: 3.25rem; }
.j-icon-circle-2 { width: 5.625rem; height: 5.625rem; padding: 1.3125rem; font-size: 3rem; }
.j-icon-circle-3 { width: 3.75rem;  height: 3.75rem;  padding: .875rem;   font-size: 2rem; }
.j-icon-circle-4 { width: 2.8rem;   height: 2.8rem;   padding: .65rem;    font-size: 1.5rem; }
.j-icon-circle-5 { width: 2.35rem;  height: 2.35rem;  padding: .55rem;    font-size: 1.25rem; }
.j-icon-circle-6 { width: 1.875rem; height: 1.875rem; padding: .4375rem;  font-size: 1rem; }


/* ==========================================================================
   8. JOOMLA THEME (brand, Cassiopeia hero, timeline, languages, shooting stars)
   ========================================================================== */

/* Hero Cassiopeia */
.container-joomla-banner {
  background-repeat: no-repeat;
  background-position: center 0;
  background-size: 700px;
  background-color: var(--joomla-blue-dark);
  background-attachment: inherit !important;
  background-blend-mode: soft-light;
}
.joomla-banner {
  padding-top: 80px;
  padding-bottom: 120px;
}
.joomla-cassiopeia-gradient {
  background:
    radial-gradient(circle 8px at 16% 13.7%, white 1px, #b2d1fc 1px, transparent),
    radial-gradient(circle 8px at 31.5% 56.3%, white 1px, #b2d1fc 1px, transparent),
    radial-gradient(circle 8px at 50% 51%, white 1px, #b2d1fc 1px, transparent),
    radial-gradient(circle 8px at 63% 95%, white 1px, #b2d1fc 1px, transparent),
    radial-gradient(circle 8px at 82% 58%, white 1px, #b2d1fc 1px, transparent),
    linear-gradient(5deg, rgba(37, 48, 79, .8) 0%, rgba(37, 48, 79, .3) 30%, transparent 50%),
    linear-gradient(0deg, rgba(37, 48, 79, 1), rgba(0, 0, 0, .2) 27%, transparent 60%),
    linear-gradient(160deg, rgba(0, 0, 0, .5) 8%, rgba(37, 48, 79, .5) 25%, rgba(64, 118, 162, .5) 40%, rgba(249, 165, 65, .7) 57%, rgba(37, 48, 79, .5) 100%),
    radial-gradient(circle 4px at 10% 44%, white 1px, #b2d1fc 1px, transparent),
    radial-gradient(circle 4px at 20% 37%, white 1px, #b2d1fc 1px, transparent),
    radial-gradient(circle 4px at 45% 13%, white 1px, #b2d1fc 1px, transparent),
    radial-gradient(circle 4px at 80% 29%, white 1px, #b2d1fc 1px, transparent),
    radial-gradient(circle 4px at 60% 60%, white 1px, #b2d1fc 1px, transparent),
    radial-gradient(circle 4px at 90% 68%, white 1px, #b2d1fc 1px, transparent);
}
@media (min-width: 768px) {
  .joomla-cassiopeia-gradient {
    animation: fadeIn 2s ease;
  }
}

.container-header {
  box-shadow: 0 2px 4px -2px var(--joomla-blue-dark);
}

/* Brand colours */
.j-accent-color {
  color: var(--joomla-accent-color);
}
.j-color-tertiary-1 {
  color: var(--joomla-blue-dark);
}
.j-bg-primary-green  { background-color: var(--joomla-green) !important; }
.j-bg-primary-orange { background-color: var(--joomla-orange) !important; }
.j-bg-primary-blue   { background-color: var(--joomla-blue) !important; }
.j-bg-primary-red    { background-color: var(--joomla-red) !important; }
.j-bg-tertiary-1 {
  color: var(--joomla-body-color);
  background-color: var(--joomla-body-bg);
}
.j-bg-light {
  background: var(--joomla-bg-light) !important;
  color: var(--joomla-blue-dark) !important;
}
.j-bg-white {
  background: var(--joomla-bg-white) !important;
  color: var(--joomla-blue-dark) !important;
}
.j-body-bg {
  background: var(--body-bg) !important;
  color: var(--body-color) !important;
}

/* Theme buttons */
.j-btn-primary {
  padding: .6rem;
  font-size: var(--body-font-size);
}
.j-btn-lg-primary {
  width: 100%;
  padding: .6rem;
  font-size: var(--body-font-size);
}
.j-btn-primary,
.j-btn-lg-primary {
  font-weight: 600;
  background-color: var(--joomla-secondary-orange);
  color: var(--joomla-blue-dark);
  border-color: var(--joomla-secondary-orange);
  border-radius: var(--j-btn-border-radius);
}
.j-btn-primary:hover,
.j-btn-primary:active,
.j-btn-lg-primary:hover,
.j-btn-lg-primary:active {
  color: var(--joomla-body-color);
  background-color: var(--joomla-body-bg) !important;
  border-color: var(--joomla-secondary-orange);
}
.j-btn-primary:focus-visible,
.j-btn-lg-primary:focus-visible {
  color: var(--joomla-body-color);
  background-color: var(--joomla-body-bg);
  border-color: var(--joomla-secondary-orange);
  box-shadow: var(--j-btn-focus-box-shadow-inset);
}
@media (min-width: 576px) {
  .j-btn-lg-primary {
    width: auto;
    padding: .75rem 2rem;
    font-size: calc(var(--body-font-size) * 1.25);
  }
}

/* Flex column width ("Get Started" section) */
.flex-even {
  flex: 1;
}

/* Feature box */
div[class*='j-feature-colour'] {
  background-color: #f8f8f8;
  color: var(--joomla-blue-dark);
  border: none;
  border-radius: var(--j-border-radius);
}
div[class*='j-feature-colour'] .j-highlight {
  background-color: transparent;
  background: linear-gradient(90deg, var(--joomla-secondary-orange) 50%, rgba(255, 255, 255, 0) 50%);
  background-size: 200% 100%;
  background-position: 100% 0;
  transition: background-position .5s, font-weight .5s, color .5s;
  transition-timing-function: cubic-bezier(.165, .84, .44, 1);
}
div[class*='j-feature-colour']:hover .j-highlight {
  background-position: 0 0;
  font-weight: 400;
  color: #000;
}
@keyframes highlight {
  0%   { background-position: 100% 0; }
  100% { background-position: 0 0; }
}

/* "Corners" effect */
.j-corner {
  position: relative;
}
.j-corner::after {
  --corner-size: 10px;
  --border-width: 2px;
  --full-width: calc(var(--corner-size) + var(--border-width));
  content: "";
  position: absolute;
  inset: -2px;
  margin: auto;
  clip-path: polygon(0px var(--full-width), var(--border-width) var(--full-width), var(--border-width) var(--border-width), var(--full-width) var(--border-width), var(--full-width) 0px, 0px 0px, 0px 100%, 100% 100%, 100% 0px, calc(100% - var(--full-width)) 0px, calc(100% - var(--full-width)) var(--border-width), calc(100% - var(--border-width)) var(--border-width), calc(100% - var(--border-width)) var(--full-width), 100% var(--full-width), 100% calc(100% - var(--full-width)), calc(100% - var(--border-width)) calc(100% - var(--full-width)), calc(100% - var(--border-width)) calc(100% - var(--border-width)), calc(100% - var(--full-width)) calc(100% - var(--border-width)), calc(100% - var(--full-width)) 100%, var(--full-width) 100%, var(--full-width) calc(100% - var(--border-width)), var(--border-width) calc(100% - var(--border-width)), var(--border-width) calc(100% - var(--full-width)), 0px calc(100% - var(--full-width)), 0px var(--full-width));
}

/* Link to anchor */
a[href*="#"].j-corner::after {
  content: "";
  position: absolute;
  inset: -2px;
  margin: auto;
  top: 25%;
  bottom: 25%;
  left: 25%;
  right: 25%;
  background: none;
  opacity: 0;
  transition: inset 300ms ease-in, clip-path 300ms ease-in, opacity 300ms ease-in, background 300ms ease-in;
}
a[href*="#"].j-corner:hover::after {
  content: "";
  inset: 0;
  top: -2px;
  bottom: -2px;
  left: -2px;
  right: -2px;
  background: linear-gradient(45deg,
    var(--joomla-blue) 0 10%,
    var(--joomla-green) 10% 50%,
    var(--joomla-red) 50% 90%,
    var(--joomla-orange) 90% 100%);
  opacity: 1;
  transition: inset 300ms ease-out, clip-path 300ms ease-out, opacity 300ms ease-out, background 300ms ease-out;
}

/* Link without anchor */
.j-corner:not([href*="#"])::after {
  content: "";
  position: absolute;
  inset: -2px;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: transparent;
  transition: inset 300ms ease-in, clip-path 300ms ease-in, background-color 300ms ease-in;
}
.j-corner:not([href*="#"]):hover::after {
  inset: 0;
  top: -12px;
  bottom: -12px;
  left: -12px;
  right: -12px;
  background-color: currentColor;
  transition: inset 300ms ease-out, clip-path 300ms ease-out, background-color 300ms ease-out;
}

/* Corner colours */
.j-feature-colour-green.j-corner:hover::after  { background-color: var(--joomla-green); }
.j-feature-colour-blue:hover.j-corner::after   { background-color: var(--joomla-blue); }
.j-feature-colour-orange:hover.j-corner::after { background-color: var(--joomla-orange); }
.j-feature-colour-red:hover.j-corner::after    { background-color: var(--joomla-red); }

/* Highlight the :target */
:target.j-highlight-text,
:target + .j-highlight-text,
:target > .j-highlight-text {
  margin: .5rem -.25rem;
  padding: .25rem;
  background-color: rgba(137, 199, 100, .75);
  color: #000;
  font-weight: 500;
  border-radius: .25rem;
}
:target.j-highlight-text::after,
:target + .j-highlight-text::after,
:target > .j-highlight-text::after {
  content: "#";
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  width: 2.25rem;
  height: 2.25rem;
  padding-top: .25rem;
  text-align: center;
  font-size: 1.25rem;
  font-weight: 600;
  background: none;
  color: var(--joomla-green);
  border-radius: 50%;
}

/* ---------- Timeline ---------- */
.jtimeline {
  position: relative;
  margin: -30px auto 0;
  padding: 60px 0 80px;
}
.jtimeline h2 {
  width: auto !important;
  color: var(--jtimeline-accent);
}

/* Vertical line */
.jtimeline::before {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  top: -18px;
  bottom: 0;
  left: 50%;
  margin-left: -10px;
  background-color: var(--jtimeline-accent);
  border-radius: 50%;
  z-index: 1;
}
.jtimeline::after {
  content: '';
  position: absolute;
  width: 6px;
  background-color: var(--jtimeline-accent);
  top: 0;
  bottom: 100px;
  left: 50%;
  margin-left: -3px;
}

.jtimeline .container.left {
  margin: 0 0 -50px;
  padding: 10px 60px 10px 0;
  position: relative;
  background-color: inherit;
  width: 50%;
}
.jtimeline .container.right {
  margin: 0 0 -50px;
  padding: 10px 0 10px 60px;
  position: relative;
  background-color: inherit;
  width: 50%;
}

/* Dots on the timeline */
.jtimeline .container.left::after,
.jtimeline .container.right::after {
  content: var(--jtimeline-joomla-svg);
  position: absolute;
  width: 40px;
  height: 40px;
  padding: 0;
  background-color: var(--jtimeline-accent);
  border: 4px solid var(--jtimeline-secondary);
  top: 9px;
  border-radius: 50%;
  z-index: 1;
}
.jtimeline .container.left::after {
  right: -20px;
}
.jtimeline .container.right::after {
  left: -20px;
}

.jtimeline .left {
  left: 0;
}
.jtimeline .right {
  left: 50%;
}

/* Arrows */
.jtimeline .left::before,
.jtimeline .right::before {
  content: " ";
  height: 0;
  position: absolute;
  top: 27px;
  width: 0;
  z-index: 1;
  border: medium solid var(--jtimeline-secondary);
  border-width: 0 60px 5px 0;
}
.jtimeline .left::before {
  right: 0;
}
.jtimeline .right::before {
  left: 0;
}

/* Fix the circle on the right side */
.jtimeline .right::after {
  left: 18px;
}

.jtimeline .content {
  padding: 20px 10px 10px;
  position: relative;
  border-radius: var(--j-border-radius);
  margin-top: -21px;
}

.jtimeline > .timelinefooter::before {
  content: " ";
  height: 180px;
  position: absolute;
  width: 0;
  z-index: 1;
  right: 0;
  border-left: 6px dashed var(--jtimeline-accent);
  bottom: 0;
  left: 50%;
  margin-left: -3px;
}

@media (min-width: 992px) {
  .jtimeline .container.left {
    padding-left: 30px;
  }
  .jtimeline .container.right {
    padding-right: 30px;
  }
  .jtimeline .content {
    padding: 20px 30px;
  }
}

@media (max-width: 767.98px) {
  .jtimeline {
    margin: -30px -20px 0;
    padding: 60px 0 100px 10px;
  }
  /* Timeline on the left */
  .jtimeline::before,
  .jtimeline::after,
  .jtimeline > .timelinefooter::before {
    left: 28px;
  }
  .jtimeline .container {
    width: 100%;
    padding-left: 70px;
    padding-right: 25px;
  }
  /* All arrows point left */
  .jtimeline .container::before {
    left: 30px;
    border-width: 0 30px 5px 0;
  }
  /* All circles at the same position */
  .jtimeline .container.left::after,
  .jtimeline .container.right::after {
    left: -2px;
  }
  /* Right-hand blocks behave like left-hand ones */
  .jtimeline .right {
    left: 0;
  }
  .jtimeline .container.left,
  .jtimeline .container.right {
    width: 100%;
    margin: 0 0 50px;
    padding: 10px 10px 10px 60px;
  }
}

/* Extended timeline J6.1 */
.jtimeline details summary > .btn {
  margin-right: 1.175em;
  margin-left: .375em;
}
.jtimeline details[open] summary ~ * {
  animation: sweep .5s ease-in-out;
}
@keyframes sweep {
  0%   { opacity: 0; transform: translateY(-10px); }
  100% { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .jtimeline details[open] summary ~ * {
    animation: fadeIn .5s ease-in-out;
  }
}

/* ---------- Language switcher ---------- */
div.mod-languages ul.lang-block li {
  padding: 0;
  font-size: .875rem;
}
div.mod-languages li {
  margin: 0;
}
div.mod-languages a {
  display: inline-block;
  width: 100%;
  padding: .375rem .75rem;
  color: var(--joomla-blue-dark) !important;
}
div.mod-languages li:hover a {
  color: #fff;
}
div.mod-languages ul.lang-block li:hover {
  color: #fff;
  background-color: var(--joomla-blue-dark);
  border-radius: var(--dropdown-border-radius);
}
.mod-languages__select {
  padding-top: 0;
  padding-bottom: 2rem;
}
@media (max-width: 991.98px) {
  .mod-languages__select {
    padding-top: 0;
  }
}
@media (max-width: 767.98px) {
  .mod-languages {
    margin: 0 auto;
  }
  .mod-languages__select {
    padding-top: 0;
    padding-bottom: 2rem;
  }
}

/* ---------- Shooting stars ---------- */
.shooting-star {
  position: absolute;
  width: 100px;
  height: 2px;
  background: linear-gradient(240deg, white, transparent);
  animation: shoot 2s 1 ease-in;
}
.shooting-star:nth-child(1) { top: -275px; left: 0;      animation-delay: 3s; }
.shooting-star:nth-child(2) { top: -200px; left: -100px; animation-delay: 6s; }
.shooting-star:nth-child(3) { top: -400px; left: 0;      animation-delay: 7s; }
.shooting-star:nth-child(4) { top: -150px; left: -100px; animation-delay: 10s; }
.shooting-star:nth-child(5) { top: -350px; left: -100px; animation-delay: 13s; }
.shooting-star:nth-child(6) { top: -275px; left: -100px; animation-delay: 18s; }

@keyframes shoot {
  0% {
    transform: translateX(0) translateY(800px) rotate(-8deg);
    opacity: 1;
  }
  100% {
    transform: translateX(1500px) translateY(600px) rotate(-8deg);
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .shooting-star {
    display: none;
  }
}