/*
 * RSC Wunstorf – look & feel carried over from the old Purity III theme "rscwunstorf"
 * (templates/purity_iii/css/custom.css + less/themes/rscwunstorf).
 */

:root {
  --rsc-green: #6bb844;
  --rsc-green-dark: #60a53d;
  --rsc-blue: #20458b;
  --rsc-text: #444;
  --rsc-muted: #666;
  --rsc-light: #f7f7f7;
  --rsc-border: #eee;

  --cassiopeia-color-primary: var(--rsc-green);
  --cassiopeia-color-link: var(--rsc-blue);
  --cassiopeia-color-hover: var(--rsc-blue);
  --link-color: var(--rsc-blue);
  --link-color-rgb: 32, 69, 139;
  --link-hover-color: var(--rsc-blue);
  --link-hover-color-rgb: 32, 69, 139;

  --body-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --body-font-size: 16px;
  --body-line-height: 1.42857;
  --body-color: var(--rsc-text);
  --cassiopeia-font-family-body: var(--body-font-family);
  --cassiopeia-font-family-headings: var(--body-font-family);
  --cassiopeia-font-weight-headings: 500;

  /* Width of the old Purity III container: header image and content share it */
  --rsc-width: 1140px;
}

/* Content grid, header bar and footer use the same width as the team photo */
@supports (display: grid) {
  .site-grid {
    column-gap: 40px;
    grid-template-columns: [full-start] minmax(0, 1fr) [main-start] repeat(4, minmax(0, calc((var(--rsc-width) - 120px) / 4))) [main-end] minmax(0, 1fr) [full-end];
  }
}

.grid-child {
  max-width: var(--rsc-width);
}

/* Below the full width the outer gap doubles as page margin: 20px like the old theme */
@media (max-width: 1219.98px) {
  .site-grid {
    column-gap: 20px;
  }
}

body {
  color: var(--rsc-text);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--body-font-family);
  font-weight: 500;
  line-height: 1.1;
}

h1 {
  font-size: 28px;
}

/* Links in running text are underlined, bold on hover */
main p a {
  text-decoration: underline;
}

main p a:hover {
  font-weight: bold;
}

/* ---------------------------------------------------------------- Header */

.container-header {
  background: var(--rsc-green);
  box-shadow: inset 0 -1px 0 var(--rsc-green-dark);
}

.container-header .header-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 2rem;
  padding: 0;
}

.container-header .navbar-brand {
  padding: 5px 0;
  margin: 0;
  font-size: 1rem;
}

.container-header .brand-logo img {
  display: block;
  height: 90px;
  width: auto;
  padding: 5px;
}

.container-header .container-nav {
  flex: 1 1 auto;
  align-self: stretch;
  display: flex;
  align-items: flex-end;
  padding: 0;
}

.container-header .mod-menu {
  flex: 1 1 auto;
}

.container-header .metismenu.mod-menu .metismenu-item {
  font-size: 20px;
  text-transform: uppercase;
  padding: 0 .9rem 1.1rem;
}

.container-header .metismenu.mod-menu .metismenu-item > a,
.container-header .metismenu.mod-menu .metismenu-item > button {
  color: #fdfefd;
}

.container-header .metismenu.mod-menu > .metismenu-item.active > a,
.container-header .metismenu.mod-menu > .metismenu-item > a:hover {
  color: #fff;
  text-decoration: none;
}

/* White underline for the active top-level item, like the old theme */
.container-header .metismenu.mod-menu > .metismenu-item.active > a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  background: #fff;
}

.container-header .metismenu.mod-menu > .metismenu-item > a {
  position: relative;
}

/* Dropdown (Veranstaltungen) */
.container-header .metismenu.mod-menu .metismenu-item > ul {
  background: #fff;
  text-transform: none;
}

.container-header .metismenu.mod-menu .metismenu-item > ul .metismenu-item {
  font-size: 16px;
  padding: .5rem 1rem;
}

.container-header .metismenu.mod-menu .metismenu-item > ul .metismenu-item > a {
  color: var(--rsc-text);
}

.container-header .metismenu.mod-menu .metismenu-item > ul .metismenu-item > a:hover {
  color: var(--rsc-blue);
}

/* Mobile menu toggle */
.container-header .navbar-toggler {
  color: #fff;
  border-color: rgba(255, 255, 255, .6);
  margin: 0 0 0 auto;
}

@media (max-width: 991.98px) {
  .container-header .brand-logo img {
    height: 65px;
  }

  .container-header .container-nav {
    align-items: center;
  }

  .container-header .metismenu.mod-menu .metismenu-item {
    padding: .5rem 1rem;
  }

  .container-header .metismenu.mod-menu > .metismenu-item.active > a::after {
    display: none;
  }
}

/* -------------------------------------------------------------- Masthead */

.masthead {
  background: var(--rsc-light);
}

.masthead-image {
  position: relative;
  max-width: calc(var(--rsc-width) + 40px);
  aspect-ratio: 1180 / 260;
  margin: 0 auto;
  background: url("../../../../../images/headers/ctf-team-header.jpg") no-repeat top center / contain;
}

.masthead .site-description {
  position: absolute;
  left: 30%;
  bottom: 2px;
  margin: 0;
  color: #fff;
  font-size: 16px;
  font-weight: 300;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}

@media (max-width: 1199.98px) {
  .masthead .site-description {
    display: none;
  }
}

@media (max-width: 991.98px) {
  .masthead-image {
    aspect-ratio: auto;
    height: 60px;
    background-image: url("../../../../../images/headers/ctf-team-header-middle.png");
  }
}

@media (max-width: 580px) {
  .masthead-image {
    height: 55px;
    background-image: url("../../../../../images/headers/ctf-team-header-small.png");
  }
}

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

.site-grid {
  margin-top: 1.5rem;
}

.page-header {
  border-bottom: 1px solid var(--rsc-border);
  padding-bottom: 20px;
  margin-bottom: 20px;
}

.blog-featured .item-title,
.blog .item-title,
.com-content-article .page-header h1,
.com-content-article .page-header h2 {
  font-size: 24px;
}

.blog-featured .item-title a,
.blog .item-title a {
  color: var(--rsc-blue);
  text-decoration: none;
}

.blog-items .blog-item,
.blog-featured .blog-item {
  margin-bottom: 25px;
}

.article-info {
  font-size: 14px;
}

/* "Weiterlesen" as a small bordered button on the right */
.readmore {
  text-align: right;
}

.readmore .btn {
  font-size: 14px;
  color: #333;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 6px 12px;
}

.readmore .btn:hover {
  background: #e6e6e6;
  border-color: #adadad;
  color: #333;
}

@media (max-width: 767.98px) {
  main .page-header {
    display: none;
  }
}

/* --------------------------------------------------------------- Sidebar */

/* Flat modules instead of Cassiopeia's cards */
.container-sidebar-right .card {
  background: transparent;
  border: 0;
  margin-top: 0;
  margin-bottom: 40px;
}

/* Cassiopeia adds 1em above the first and between modules; the old theme only had 40px below */
.container-sidebar-right > .card:first-child,
.container-sidebar-right > * + * {
  margin-top: 0;
}

.container-sidebar-right .card-header {
  background: transparent;
  border: 0;
  padding: 0;
  margin-bottom: 20px;
  font-size: 18px;
  font-weight: bold;
  color: var(--rsc-text);
}

.container-sidebar-right .card-body {
  padding: 0;
}

/* Latest forum posts */
.klatest-subject a {
  font-size: 16px !important;
  font-weight: bold;
}

.klatest-posttime {
  font-size: 12px !important;
}

.klatest-more {
  text-align: right;
}

/* Login module */
#login-form .form-check,
#login-form ul a {
  font-size: 14px;
}

/* ----------------------------------------------------------------- Forum */

#kunena.layout #kwho,
#kunena.layout #kstats {
  display: none;
}

/* ---------------------------------------------------------------- Footer */

.container-footer {
  background: var(--rsc-light);
  color: var(--rsc-muted);
  border-top: 1px solid var(--rsc-border);
  margin-top: 2rem;
}

.container-footer .grid-child {
  padding: 40px 0 60px;
}

.rsc-footer {
  display: grid;
  grid-template-columns: 1fr minmax(180px, 23%);
  gap: 20px 30px;
  width: 100%;
  font-size: 14px;
}

.rsc-footer a {
  color: var(--rsc-blue);
}

.rsc-footer .sponsors h3 {
  margin-top: 0;
  font-size: 16px;
}

.rsc-footer .sponsors a {
  display: inline-block;
  margin: 0 30px 20px 0;
}

.rsc-footer .sponsors img {
  max-width: 100%;
  height: auto;
}

.rsc-footer .shortlinks h4 {
  margin-top: 0;
  font-size: 16px;
}

.rsc-footer small {
  display: block;
  margin-bottom: 12px;
  font-size: 14px;
}

.rsc-footer .shortlinks small::before {
  content: "\f206"; /* bicycle */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  padding-right: 6px;
  color: var(--rsc-green);
}

.rsc-footer .copyright {
  grid-column: 1 / -1;
}

.rsc-footer .copyright small {
  font-size: 12px;
  margin-bottom: 5px;
}

@media (max-width: 767.98px) {
  .rsc-footer {
    grid-template-columns: 1fr;
  }

  .rsc-footer .sponsors h3 {
    display: none;
  }

  .rsc-footer .sponsors a {
    display: block;
    text-align: center;
    margin: 20px 0 0;
  }
}

/* Intro images float left of the intro text (set in the blog item overrides) */
.blog-item .item-content::after {
  content: "";
  display: table;
  clear: both;
}

.blog-item .item-image {
  float: left;
  max-width: 40%;
  margin: 0 20px 10px 0;
}

.blog-item .item-image.float-end,
.blog-item .item-image.right {
  float: right;
  margin: 0 0 10px 20px;
}

/* Pagination in club colours */
.pagination {
  --pagination-color: var(--rsc-blue);
  --pagination-hover-color: var(--rsc-blue);
  --pagination-active-bg: var(--rsc-green);
  --pagination-active-border-color: var(--rsc-green);
}

/* Collapsible main menu: hamburger on small screens */
.container-header .container-nav .navbar-toggler {
  margin: 0 0 0 auto;
}

.container-header .navbar-toggler .icon-menu {
  color: #fff;
  font-size: 1.5rem;
}

@media (max-width: 991.98px) {
  .container-header .container-nav {
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .container-header .container-nav .navbar-collapse {
    flex-basis: 100%;
  }

  .container-header .metismenu.mod-menu .metismenu-item {
    font-size: 18px;
    border-top: 1px solid var(--rsc-green-dark);
  }
}

/* Keep blog items inside the viewport on phones (long words, wide images) */
.blog-items > * {
  min-width: 0;
}

main img {
  max-width: 100%;
  height: auto;
}

/* Article titles in category blogs: blue, not underlined */
.blog-item .item-title a,
.blog-item .page-header a {
  color: var(--rsc-blue);
  text-decoration: none;
  font-size: 24px;
}

.blog-item .page-header {
  border: 0;
  padding: 0;
  margin-bottom: 10px;
}

.pagination {
  flex-wrap: wrap;
}

/* Mobile: the opened menu folds out below the green bar, full width */
@media (max-width: 991.98px) {
  .container-header .header-bar {
    position: relative;
    flex-wrap: nowrap;
  }

  .container-header .container-nav {
    align-self: center;
    position: static;
  }

  .container-header .container-nav .navbar {
    position: static;
    justify-content: flex-end;
  }

  .container-header .container-nav .navbar-collapse {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding: 0 1rem .5rem;
    background: var(--rsc-green);
    border-bottom: 1px solid var(--rsc-green-dark);
  }
}

.container-header .metismenu.mod-menu .metismenu-item > ul .metismenu-item {
  text-transform: none;
}

/* ----------------------------------------------------- Article pages */
/* Spacing measured on the old Purity III article page */

.site-grid {
  margin-top: 40px;
}

.container-component > main {
  margin-top: 0;
}

.page-header h1 {
  margin: 0;
  line-height: 28px;
}

.com-content-article .page-header {
  padding-bottom: 20px;
  margin-bottom: 20px;
}

/* Article title: second page-header, no rule below, blue like the old linked titles */
.com-content-article .page-header + .page-header,
.com-content-article > .page-header:only-of-type {
  border: 0;
  padding: 0;
  margin-bottom: 20px;
}

.com-content-article .page-header h2 {
  font-size: 28px;
  margin: 0;
  color: var(--rsc-blue);
}

.com-content-article .page-header + .page-header {
  margin-bottom: 10px;
}

/* Author and date in one gray line */
.article-info {
  font-size: 14px;
  line-height: 25px;
  color: #999;
  margin: 0 0 40px;
}

.article-info dd {
  display: inline-block;
  margin: 0 10px 0 0;
}

.blog-item .article-info {
  margin-bottom: 15px;
}

/* Full-text image beside the text with 20px gap */
.com-content-article .item-image {
  float: left;
  max-width: 100%;
  margin: 0 20px 10px 0;
}

.com-content-article .item-image.right {
  float: right;
  margin: 0 0 10px 20px;
}

.com-content-article__body p {
  margin-bottom: 10px;
}

.com-content-article__body h1,
.com-content-article__body h2,
.com-content-article__body h3 {
  margin: 20px 0 10px;
}

/* Section headings start below a floated image instead of squeezing next to it */
.com-content-article__body h1,
.com-content-article__body h2 {
  clear: both;
}

.com-content-article__body h1 {
  font-size: 28px;
}

.com-content-article__body h2 {
  font-size: 35px;
}

.com-content-article__body .table th,
.com-content-article__body .table td {
  padding: 8px;
}

/* Side margin for header and footer below the full width (kept last so it wins over the padding resets above) */
@media (max-width: 1219.98px) {
  .container-header .header-bar,
  .container-footer .grid-child {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* Blog lists (home page, categories): spacing measured on the old site */
.blog-items {
  row-gap: 0;
}

.blog-items > .blog-item {
  margin: 25px 0 20px;
}

/* The old theme collapsed the heading's 20px with the first item's 25px */
.blog-items > .blog-item:first-child {
  margin-top: 5px;
}

.blog-item .item-title,
.blog-item .page-header {
  margin: 0 0 20px;
}

.blog-item .item-content > p {
  margin-bottom: 10px;
}

.blog-item .readmore {
  margin: 30px 0 0;
}

/* Category blogs (Verein, Beiträge, ...): values measured on the old site */
.com-content-category-blog .category-desc {
  margin-bottom: 35px;
}

.com-content-category-blog .category-desc p {
  margin-bottom: 10px;
}

.com-content-category-blog .blog-items > .blog-item {
  margin: 0 0 20px;
}

.com-content-category-blog .blog-item .page-header {
  margin-bottom: 10px;
}

.com-content-category-blog .blog-item .article-info {
  margin-bottom: 20px;
}

.com-content-category-blog .blog-item .readmore {
  margin-top: 20px;
}

.blog-item .page-header h2 {
  margin: 0;
  font-size: 24px;
}

.com-content-category-blog .category-desc {
  margin-bottom: 45px;
}

/* "Weiterlesen" starts below a floated intro image, as in the old theme */
.blog-item .readmore {
  clear: both;
}

.blog-item .item-image {
  margin-bottom: 0;
}

/* When "Weiterlesen" clears the image, the gap comes from the image's bottom margin */
.blog-item .item-image {
  margin-bottom: 20px;
}

.com-content-category-blog .blog-item .item-image {
  margin-bottom: 20px;
}

.blog-item .item-content > .readmore {
  margin-bottom: 0;
}

.readmore .btn {
  line-height: 20px;
}

/* Tables with a fixed width from the editor scroll sideways on phones */
@media (max-width: 767.98px) {
  .com-content-article__body table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
  }
}