/*
Theme Name: SVB Buch Theme
Theme URI: https://svb-buch.local
Author: Carola
Description: Custom Theme für SVB - Buch e.V.
Version: 1.1
*/

/* --------------------------------------------------
BASE
-------------------------------------------------- */

html, body {
  height: 100%;
}

/* min-height 100vh here better than 100% to keep equal position of fixed height for gradient wrapper working */
body {
  min-height: 100vh;
  margin: 0;
  display: flex;
  flex-direction: column;
  background: #dfe6de;
}
  
/* --------------------------------------------------
TYPOGRAPHY
-------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-variation-settings: "wdth" 100;
}

.flex-auto {
  flex: 0 0 auto;
}

.h-250 { height: 250px; }
@media (min-width: 768px) {
  .h-md-250 { height: 250px; }
}

  
/* --------------------------------------------------
LAYOUT WRAPPERS
-------------------------------------------------- */

/* three wrappers combining bg specified height for grad, unspecified for image, and sticky footer */

.wrapper-bg27-grad {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(to bottom, #a2b2a2 0%,#769675 9%,#3e703e 24%,#7e9b7d 41%,#d2e2d0 76%,#dfe6de 100%);
  height: 1600px;
  /* good grad-room fixed height of 1600px to equal previous non-fixed position as per startpage */
}
.wrapper-bg27-image {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: url(images/bg-main/bg-honeycomb_1920x1080_c01c_hexas-without-bg.png) no-repeat top center;
}
/* flexbox content-wrapper ensures sticky footer */
.content-wrapper {
  display: flex;
  flex-direction: column;
}
/* Innen-Abstände von äußeren Seitenrand */
.content-inner {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

/* due to not yet working sticky foooter */
.page-bottom-spacer {
  padding-bottom: 340px;
}

/* --------------------------------------------------
NAVBAR
-------------------------------------------------- */
  
.navbar-custom {
  background-color: #f8f9fa;
}


/* --------------------------------------------------
WORDPRESS MENU / NAVBAR
-------------------------------------------------- */
.navbar-nav {
  align-items: center;
}

.navbar-nav > li {
  position: relative;
}

.navbar-nav > li > a {
  display: block;
  padding: 0.5rem 1rem;
  color: rgba(0, 0, 0, 0.9);
  text-decoration: none;
  font-weight: 500;
}

.navbar-nav > li.current-menu-item > a,
.navbar-nav > li.current_page_item > a,
.navbar-nav > li.current-menu-parent > a,
.navbar-nav > li.current-page-ancestor > a {
  color: #000;
  text-decoration: underline;
  text-underline-offset: 0.35em;
}

.navbar-nav .menu-item-has-children > a::after {
  content: " ▼";
  font-size: 0.7em;
  vertical-align: middle;
}

.navbar-nav .dropdown-menu {
    left: 50%;
    transform: translateX(-50%);
}

.dropdown-item:active,
.dropdown-item:focus {
    background-color: #3c8c55;
    color: #fff;
}

/* mobile */
@media (max-width: 767px) {
  .navbar-nav {
    align-items: stretch;
  }

  .navbar-nav > li > a {
    padding: 0.75rem 0;
  }

  .navbar-nav .menu-item-has-children > a::after {
    content: "";
  }
  
  .navbar-nav .dropdown-menu {
    position: static;
    display: none;
    min-width: auto;
    padding-left: 0;
    border: 1px solid rgba(0, 0, 0, 0.15);
    background: #fff;
    border-radius: 0.375rem;
    transform: none;
    margin-top: 0.25rem;
    margin-bottom: 0.5rem;
  }

  .navbar-nav .dropdown-menu.show {
    display: block;
  }

  .navbar-nav .dropdown-menu .dropdown-item:hover {
    background-color: #f8f9fa;
  }
}

/* --------------------------------------------------
BACKGROUND UTILITIES
-------------------------------------------------- */

.bg-cdd8cd { background-color:#cdd8cd; }
.bg-e6ede6 { background-color:#e6ede6; }
.bg-e1ede4 { background-color:#e1ede4; }
.bg-ededed { background-color:#ededed; }

.container-bg-light {
  background-color:#f8f9fa;
}

/* --------------------------------------------------
HEADER
-------------------------------------------------- */
.header-logo-title {
  font-family: "Roboto", sans-serif;
  font-size: 2.125rem;
  margin-left: 0.5em;
}

@media screen and (max-width: 767px){
  .header-logo-title {
    font-size: 1.5em;
    padding-top: .5rem !important;
    }
}

/* --------------------------------------------------
HEADER HERO
-------------------------------------------------- */
/* header standard hero und sportarten heroes */

.header-hero .row {
  margin-bottom: 0;
}

.hero-image-wrapper {
  position: relative;
  background-color: #e6ede6;
  min-height: 260px;
}

.hero-image {
    width: 100%;
    height: 260px;
    object-fit: cover;
    object-position: center;
    display: block;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;

  display: flex;
  align-items: center;
}

.hero-title-wrapper {
  padding-left: 3rem;
}

.hero-title {
  color: rgba(255,255,255,0.8);
  margin: 0;
  font-weight: 300;
  line-height: 1.15;
  font-size: 3.6rem;
}


/* mobile hero elements - title */

@media (max-width: 992px) {

  .hero-title {
    font-size: 3.1rem;
  }

}

@media (max-width: 768px) {

  .hero-title-wrapper {
    padding-left: 1.5rem;
  }

  .hero-title {
    font-size:  2.6rem;
  }

}

@media (max-width: 576px) {

  .hero-title {
    font-size: 2.1rem;
  }

}

/* media queries hero */
@media (max-width: 768px) {

  .hero-image-wrapper {
    min-height: 140px;
    overflow: hidden;
  }

  .hero-image {
    height: 160px;
  }

  .hero-overlay .p-4 {
    padding: 1rem !important;
  }

  .hero-overlay .my-5 {
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
  }

}

/* Leichtathletik */
.header-sportart-la-style-02 h1 {
  color: rgba(255, 255, 255, 0.8);
  -webkit-text-fill-color: rgba(255, 255, 255, 0.8);
  text-shadow:
   -1px -1px 0 rgba(132, 49, 49, 0.4),  
    1px -1px 0 rgba(132, 49, 49, 0.4),
    -1px 1px 0 rgba(132, 49, 49, 0.4),
     1px 1px 0 rgba(132, 49, 49, 0.4);
}

/* header blog */
.blog-header-logo.mt-6 {
  margin-top: 0.65rem !important;
}

.blog-header-logo:hover {
  text-decoration: none;
}


/* --------------------------------------------------
HEADER IMAGES (Sportarten)
-------------------------------------------------- */
.bg-body-secondary {
  min-height: 260px;
}

/* Hero title backgrounds for single posts */
.hero-title-bg-light {
  display: inline-block;
  background-color: rgba(0, 0, 0, 0.4);
  color: rgba(255,255,255,1);
}

.hero-title-bg-dark {
  display: inline-block;
  background-color: rgba(0, 0, 0, 0.7);
  color: rgba(255,255,255,1);
}

.bg-header-floorlines {
  background-image: url("images/header-images/header-image_floorlines.svg");
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; /* Resize the background image to cover the entire container */
} 


/* --------------------------------------------------
WORDPRESS CONTENT IMAGES
-------------------------------------------------- */

.alignleft,
.wp-block-image.alignleft {
  float: left;
  margin-right: 1.5rem;
  margin-bottom: 1rem;
}

.alignright,
.wp-block-image.alignright {
  float: right;
  margin-left: 1.5rem;
  margin-bottom: 1rem;
}

.wp-block-image img,
figure img {
  max-width: 100%;
  height: auto;
  border-radius: 0.375rem;
}

.wp-caption,
.wp-block-image figcaption,
.figure-caption {
  font-size: 0.9rem;
  color: #666;
  margin-top: 0.5rem;
}

/* --------------------------------------------------
MAIN
-------------------------------------------------- */

/* CONTENT TYPOGRAPHY */
.page-main h3 {
    margin-top: 3rem;
    margin-bottom: 1rem;
}

/* responsive images in content areas */
main img,
.entry-content img,
.wp-block-image img {
  max-width: 100%;
  height: auto;
  border-radius: 0.375rem;
}

/* adding section break, after floats - positionierte Bilder sind "floats" */
.content-section {
  clear: both;
}

main hr {
  margin-top: 3rem;
  margin-bottom: 3rem;
  opacity: 0.3;
}

/* --------------------------------------------------
STANDARD TABLES
-------------------------------------------------- */

main table {
  width: 100%;
  margin-bottom: 2rem;
  border-collapse: collapse;
  hyphens: auto;
}

main th,
main td {
  padding: 0.75rem;
  border: 1px solid #666;
  text-align: left;
}

main th {
  background-color: #efefef;
}

main table caption {
  caption-side: top;
  font-weight: bold;
  color: #444;
  margin-bottom: 0.5rem;
}

/* --------------------------------------------------
TRAINING SCHEDULE TABLES
-------------------------------------------------- */

table.table-training tbody tr:nth-child(even) {
  background-color: #ffffff;
}

table.table-training tbody tr:nth-child(odd) {
  background-color: rgb(237, 237, 237);
}

table.table-training th {
  background-color: rgb(116, 159, 117);
  color: white;
}

table.table-training td {
  border-color: #cfd8cf;
}

table.table-training {
  width: 100%;
  table-layout: fixed;
}
table.table-training th:nth-child(1),
table.table-training td:nth-child(1) {
  width: 30%;
}
table.table-training th:nth-child(2),
table.table-training td:nth-child(2) {
  width: 25%;
}
table.table-training th:nth-child(3),
table.table-training td:nth-child(3) {
  width: 30%;
}
table.table-training th:nth-child(4),
table.table-training td:nth-child(4) {
  width: 15%;
}

/* --------------------------------------------------
TABELLE VORSTAND
-------------------------------------------------- */

table.table-vorstand {
  margin-left: 50px;
  border: none;
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.2;
}

table.table-vorstand td,
table.table-vorstand th {
  border: none;
  background: transparent;
  padding: 0.5rem 2rem 0.5rem 0;
}

table.table-vorstand td:first-child {
  width: 45%;
}


/* --------------------------------------------------
Seite DOWNLOADS - SATZUNG, GESCHÄFTSORDNUNG etc.
-------------------------------------------------- */

main .download-section:first-of-type {
  margin-top: 3rem;
}
.download-section hr {
  margin-top: 2rem;
}

.download-item {
  margin-bottom: 1rem;
}

.download-line {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.download-title:link,
.download-title:visited,
.download-title:active {
  font-size: 1.25rem;
  color: #245233;
  text-decoration: none;
  font-weight: 600;
}

.download-title:hover {
  color: #4444af;
  text-decoration: underline;
}

.download-icon {
  margin-left: 2rem;
}

.download-icon img {
  width: 40px;
  height: 40px;
  position: relative;
  top: 2px;
}

.download-date {
  margin-top: 1rem;
}


/* --------------------------------------------------
BLOG / AKTUELLES / Styling
-------------------------------------------------- */

.post-category {
  color: #245233;   /* evtl. vereinheitlichen mit sidebar-widget zu #3c8c55 oder umgekehrt */
  font-weight: 600;
  letter-spacing: 0.02em;
}

.h-md-250 {
  min-height: 250px;
}

main .shadow-sm {
  background-color: rgb(237, 237, 237);
  border: 1px solid rgb(180, 180, 180);
}

main .shadow-sm:hover {
  border-color: rgb(130, 130, 130);
}

main .shadow-sm h3 {
  line-height: 1.2;
}

main .shadow-sm p {
  margin-top: 0.5rem;
}

main .shadow-sm .text-body-secondary {
  margin-top: 0.5rem;
  margin-bottom: 0.75rem;
}

/* Pagination */
.blog-pagination {
  margin-bottom: 4rem;
}
/* --------------------------------------------------
BLOG CARDS
-------------------------------------------------- */

.blog-card {
  background-color: #f1f1ef;
  border: 1px solid #b7b7b0;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  min-height: 250px;
}

.blog-card img {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  object-fit: cover;
  width: 200px;
  height: 250px;
}

/* ==================================================
   BLOG CARDS RESPONSIVE
================================================== */

/* Tablet */
@media (max-width: 1199px) {

  .blog-card-image-wrap {
    display: flex !important;
    align-items: center;
    padding: 12px;
  }

  .blog-card img,
  .blog-thumb img,
  img.blog-thumb {
    width: 130px;
    height: 165px;
    border-radius: 6px;
  }

}

/* Kleine Tablets / große Phones */
@media (max-width: 767px) {

  .blog-card-image-wrap {
    display: flex !important;
    align-items: center;
    padding: 10px;
  }

  .blog-card img,
  .blog-thumb img,
  img.blog-thumb {
    width: 110px;
    height: 140px;
    border-radius: 6px;
  }

}

/* Sehr kleine Phones */
@media (max-width: 540px) {

  .blog-card-image-wrap {
    display: none !important;
  }

}
/* ende blog cards mobile */

.blog-card-title {
  line-height: 1.15;
  margin-top: 0.25rem;
  margin-bottom: 0.5rem;
}

.blog-card-title a {
  color: #111;
}

.blog-card-title a:hover {
  color: #245233;
}

.blog-date {
  font-size: 1rem;
  color: rgb(90, 90, 90);
}

.blog-teaser {
  font-size: 1.15rem;
  line-height: 1.5;
  margin-top: 1rem;
}

main .shadow-sm {
  background-color: rgb(237, 237, 237);
  border: 1px solid rgb(185, 185, 185);
  padding: 0;
}

main .shadow-sm .p-4 {
  padding: 2rem !important;
}

.blog-post-divider {
  margin-top: 1rem;
  margin-bottom: 1.5rem;
  border: 0;
  border-top: 1px solid #b3bab6;
}

/* --------------------------------------------------
SIDEBAR
-------------------------------------------------- */

.sidebar-wrapper-sticky {
  position: sticky;
  top: 2rem;
}

/* gleiche Höhe mit Inhalt links in Main, unterhalb Überschrift */
.sidebar {
  padding-top: 7rem;
  padding-bottom: 2rem;
}

.sidebar-box .wp-block-group__inner-container {
    padding: 0 !important;
}

.sidebar-box {
    padding: 1.5rem 1.5rem 1.75rem 1.5rem;
    margin-bottom: 1.5rem;
    background-color: #ededed;
    border: 1px solid #3c8c55;
    border-radius: 0.375rem;
}

.sidebar-box p:last-child {
    padding-bottom: 0.25rem;
}

/* relevant bei Verwendung von Gutenberg Block Editor */
.sidebar-box .wp-block-heading {
    font-style: italic;
    padding-bottom: 1rem;
    border-bottom: 1px solid #B3BAB6;
}
.sidebar-box .wp-block-heading ~ * {
    margin-top: 1rem;
}

.sidebar-box {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

.sidebar-box a {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* relevanter bei Verwendung vom Classic Widgets */
.sidebar-title {
    font-style: italic;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #B3BAB6;
}
.sidebar-title ~ * {
    margin-top: 1rem;
}

/* Sidebar Absatz-Abstände */
.sidebar-box p {
    margin-bottom: 0;
}
.sidebar-box p:empty {
    margin-bottom: 1rem;
}

.sidebar-box ul {
    padding-left: 1.25rem;
    list-style-type: square;
}

.sidebar-box ul li::marker {
    color: #333333;
}

.sidebar-box ul a {
    color: #245233;
    text-decoration: none;
}

.sidebar-box ul a:hover {
    color: #3c8c55;
    text-decoration: underline;
}

/* Bilder in Sidebar-Widgets immer responsiv halten */
.sidebar-box img {
    max-width: 100%;
    height: auto;
    display: block;
}
.sidebar-box {
    overflow: hidden;
}

.sidebar-widget {
  margin-bottom: 2rem;
  padding: 1.75rem;
  background-color: rgb(237, 237, 237);
  border: 1px solid #3c8c55; /* gutes Gruen, wie post-category #245233, aber dunkel - heller aus Entwurf: #3c8c55 */
  border-radius: 0.5rem;
  overflow: hidden;
}

.sidebar-widget-title {
  margin-top: 0;
  margin-bottom: 1.25rem;
  padding-bottom: 0.75rem;
  font-size: 1.75rem;
  font-style: italic;
  line-height: 1.2;
  border-bottom: 1px solid #B3BAB6;
}

.sidebar-widget ul {
  margin: 0;
  padding-left: 1.25rem;
}

.sidebar-widget li {
  margin-bottom: 0.5rem;
}

.sidebar-widget a {
  color: #1e1e1e;
  text-decoration: none;
}

.sidebar-widget a:hover {
  color: #245233;
  text-decoration: underline;
}

.single-sidebar-fix {
  padding-top: 0.5rem;
}

/* Suchformular */

.sidebar-widget .wp-block-search,
.sidebar-widget .search-form {
  display: flex;
  gap: 0.5rem;
}

.sidebar-widget input[type="search"] {
  width: 100%;
  padding: 0.5rem 0.75rem;

  border: 1px solid rgb(185, 185, 185);
  border-radius: 0.375rem;

  background: #fff;
}

.sidebar-widget input[type="submit"] {
  padding: 0.5rem 0.9rem;

  border: 1px solid rgb(140, 140, 140);
  border-radius: 0.375rem;

  background: #efefef;
}

.sidebar-widget input[type="submit"]:hover {
  background: #e2e2e2;
}

/* --------------------------------------------------
MOBIL - Media Queries Sidebat
-------------------------------------------------- */

@media (max-width: 767px) {

  .sidebar-sticky {
    position: static;
  }

}

/* kleinere Laptops / Tablets quer */
@media (max-width: 1200px) {
  .sidebar {
    padding-top: 5.5rem;
  }
}

@media (max-width: 991px) {
  .sidebar {
    margin-top: 2rem;
    padding-top: 0;
  }
}

/* Tablet hochkant / kleiner */
@media (max-width: 768px) {
  .sidebar {
    padding-top: 2rem;
  }
}

/* Smartphone */
@media (max-width: 576px) {
  .sidebar {
    padding-top: 1rem;
  }
}

/* --------------------------------------------------
BORDERS
-------------------------------------------------- */

/* Main page side borders - containers */
.border-sides-7f8288 {
  border-left: 1px solid rgb(127, 130, 136);
  border-right: 1px solid rgb(127, 130, 136);
}

/* header and footer borders */
.border-top-7f8288 {
  border-top: 1px solid rgb(127, 130, 136);
}
.border-bottom-7f8288 {
  border-bottom: 1px solid rgb(127, 130, 136);
}

/* more borders in standard container grey */
.border-sides-7f8288 {
  border-right:  1px solid rgb(127, 130, 136);
  border-left:  1px solid rgb(127, 130, 136);
}
.border-sides-all-7f8288 {
  border: 1px solid rgb(127, 130, 136);
}

/* Full border variant */
.border-sides-all-7f8288 {
  border: 1px solid rgb(127, 130, 136);
}

/* soft colour like logo-green */
.border-sides-all-3c8c55 {
  border: 1px solid rgb(60, 140, 85);
}

/* standard light grey borders */
.border-top-adadad {
  border-top: 1px solid rgb(173, 173, 173);
}

.border-bottom-adadad {
  border-bottom: 1px solid rgb(173, 173, 173);
}

.border-top-bottom-adadad {
  border-top: 1px solid rgb(173, 173, 173);
  border-bottom: 1px solid rgb(173, 173, 173);
}

/* subtle custom top border */
.border-top-custom {
  border-top: 1px solid #B3BAB6;
}


/* --------------------------------------------------
COMPONENTS
-------------------------------------------------- */

/* shadow left and right */
.box-shadow-left-right {
  box-shadow: 6px 0 4px -4px #999, -6px 0 4px -4px #999; 
}

/* info boxes */
.bg-infobox-grey {
  background-color: rgb(229, 229, 229);
}

.infobox-bg-green {
  background: rgba(96, 145, 98, 0.4);
}

.infobox-bg-ccd5c6 {
  background: rgba(204, 213, 198, 0.5);
}

.infobox-bg-logo-green {
  background: rgba(0, 161, 56, 1.0);
}

.infobox h4 {
  color: #a13a45;
}

/* Eventuell noch benötigt für allgemeine Download-Links (nicht Download-Seite)? */
/* download link styles */
.download-link a:link, .download-link a:visited, .download-link a:active {
  background-color: none;
  color: #2a663e;
  text-decoration: none;
  display: inline-block;
  }

.download-link a:hover {
  color: #4444af;
  text-decoration: underline;
  }


/* --------------------------------------------------
ACCORDION
-------------------------------------------------- */

/* Accordion Kraftsport */
.accordion-kraftsport {
  border: 1px solid rgb(96, 145, 98);
  border-radius: 8px;
  overflow: hidden;
}

.accordion-kraftsport .accordion-item {
  border: none;
  margin-bottom: 0;
}

.accordion-kraftsport .accordion-item + .accordion-item {
  border-top: 1px solid rgba(96, 145, 98, 0.4);
}

.accordion-kraftsport .accordion-button {
  font-weight: 500;
  color: #2a663e;
  background-color: #e1ede4;
  box-shadow: none;
  border-radius: 0;
}

.accordion-kraftsport .accordion-button:not(.collapsed) {
  background-color: rgba(96, 145, 98, 0.2);
  color: #1f4f2f;
}

.accordion-kraftsport .accordion-button:focus {
  box-shadow: none;
}

.accordion-kraftsport .accordion-body {
  background-color: #e6ede6;
  border-top: 1px solid rgba(96, 145, 98, 0.3);
}

/* Nur oberstes und unterstes Element abrunden */

.accordion-kraftsport .accordion-item:first-child .accordion-button {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

.accordion-kraftsport .accordion-item:last-child .accordion-collapse {
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  overflow: hidden;
}
  
/* --------------------------------------------------
FOOTER
-------------------------------------------------- */
/* footer */

.footer {
  flex-shrink: 0;
}

/* --------------------------------------------------
MEDIA QUERIES
-------------------------------------------------- */