:root {
    --bl-primary-color: yellow;
    --bl-secondary-color: #0D5C63;
    --bl-tertiary-color: #948afc;
    --bl-tertiary-color-subtle: #948afc7e;
    --bl-quaternary-color: #FFACE4;
    --bl-quaternary-color-subtle: #FFACE47e;
    --bl-quinary-color: #1A1B41;
    --bl-dark-purple: rgba(75, 0, 130, 1);
    --bl-glowing-pink: rgb(172, 255, 202);
    
    --bl-exciting-bg-img: linear-gradient(90deg, var(--bl-tertiary-color), var(--bl-quaternary-color));
}

a { 
    color: inherit;
} 

a:hover {
    color: #FFACE4;
    text-decoration: underline;
}


body {
    font-family: "Georgia";
}

body::before { 
    display: block; 
    content: ''; 
    height: 56px;
}

.bl-primary-color {
    color: var(--bl-primary-color);
}

.bl-primary-color-bg {
    background-color: var(--bl-primary-color);
}

.bl-tertiary-color {
    color: var(--bl-tertiary-color);
}

.bl-tertiary-color-subtle {
    color: var(--bl-tertiary-color-subtle);
}

.bl-tertiary-color-bg {
    background-color: var(--bl-tertiary-color);
}

.bl-tertiary-color-subtle-bg {
    background-color: var(--bl-tertiary-color-subtle);
}

.bl-quaternary-color {
    color: var(--bl-quaternary-color);
}

.bl-quaternary-color-bg {
    background-color: var(--bl-quaternary-color);
}

.bl-quaternary-color-subtle-bg {
    background-color: var(--bl-quaternary-color-subtle);
}

.bl-section {
    background-color: var(--primary-bl-color);
}

html, body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
  }
  
  /* Style the footer */
  footer {
    margin-top: auto;
    width: 100%;
    padding-top: 1rem;
    padding-bottom: 0rem;
    color: black;
    background-color: rgba(211, 211, 211, 0.363);
  }

  .home-section {
    background-color: var(--bl-quaternary-color);
    background-image: var(--bl-exciting-bg-img);
  }

  .bl-intro-background {
    /* background-color: var(--bl-quaternary-color);
    background-image: var(--bl-exciting-bg-img); */
    color: var(--bl-tertiary-color);
    border-top: 1px solid white;
    /* box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.05); */
  }
  
.text-extra-small {
    font-size: 1rem; /* Adjust as needed */
}

.card-header {
    background-image: var(--bl-tertiary-color-subtle);
}

.card {
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1); 
}

/* Custom BeginnerLuft Button Styles */
.btn-bl-primary {
    color: var(--bl-quinary-color);
    background-color: transparent;
    border: 2px solid var(--bl-tertiary-color);
    border-radius: 8px;
    font-weight: 600;
    padding: 0.5rem 1.25rem;
    transition: all 0.3s ease;
}

.btn-bl-primary:hover {
    color: white;
    background-color: var(--bl-tertiary-color);
    border-color: var(--bl-tertiary-color);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(148, 138, 252, 0.3);
}

.btn-bl-primary:focus {
    color: white;
    background-color: var(--bl-tertiary-color);
    border-color: var(--bl-tertiary-color);
    box-shadow: 0 0 0 0.2rem rgba(148, 138, 252, 0.25);
}

.btn-bl-primary:active {
    color: white;
    background-color: var(--bl-tertiary-color);
    border-color: var(--bl-tertiary-color);
    transform: translateY(0);
}

/* Small variant */
.btn-bl-primary.btn-sm {
    padding: 0.375rem 1rem;
    font-size: 0.875rem;
}

nav, .chart {
    background-color: var(--bl-quaternary-color);
    background-image: var(--bl-exciting-bg-img);
}

/* Breadcrumbs — quiet by design.
   The `nav` rule above paints the brand gradient, which is right for the
   navbar and wrong for a breadcrumb trail: it is orientation, not a banner. */
nav.bl-breadcrumb {
    background-color: transparent;
    background-image: none;
}

nav.bl-breadcrumb a {
    color: var(--bs-secondary-color);
}

nav.bl-breadcrumb a:hover {
    color: var(--bl-tertiary-color);
}

/* Context links (breadcrumb strips, meta rows): they carry the colour of the
   text around them and only announce themselves on hover. The !important is
   there to beat text-body-secondary, which is itself !important. */
.bl-context-link:hover {
    color: var(--bl-tertiary-color) !important;
    text-decoration: underline !important;
}

/* The navbar's open-Sonderfälle counter.

   It used to wear Bootstrap's .bg-danger, and page stylesheets are free to
   redefine that: coachings.css washes every .badge.bg-danger down to a pastel
   #f8d7da, so the same count rendered bright red on the Sonderfälle page and
   faded on the four pages that link that file. The counter owns its colour
   here instead, out of reach of any page-level .badge rule. */
.bl-nav-count {
    background-color: var(--bs-danger);
    color: #fff;
}

/* Who is responsible — a filled pill so it reads before the prose does. */
.bl-assignee-badge {
    background-color: var(--bl-tertiary-color-subtle);
    color: var(--bl-quinary-color);
}

/* Small avatar circle for comment threads — the card-sized
   .bl-avatar-circle in components/avatars.css is too heavy for a discussion. */
.bl-avatar-sm {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 0.8rem;
    font-weight: 600;
}

/* User-entered text: keep the author's line breaks, break long words rather
   than letting a German compound push the layout sideways on a phone. */
.bl-prewrap {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.global-faq {
  --bs-accordion-active-bg: var(--bl-tertiary-color-subtle);
} 

.custom-faq {
  --bs-accordion-active-bg: var(--bl-quaternary-color-subtle);
}

.participant-accordion {
    --bs-accordion-active-bg: var(--bl-quaternary-color-subtle);
}

summary {
    cursor: pointer;
    padding: 8px;
    background-color: var(--bl-quaternary-color);
    background-image: var(--bl-exciting-bg-img);
    border-radius: 8px;
    height: 60px;
    font-weight: bold;
    color: white;
    display: flex; /* Make it a flex container */
    align-items: center; /* Vertically center the content */
}


/* Border and spacing for details */
details {
    margin-bottom: 20px;
}

.coaching-list:hover {
    background-color: rgba(128, 128, 128, 0.049);
    border-radius: 8px;
}

.fixed-card {
    width: 330px;
}

.rounded-bottom-corners {
    border-bottom-left-radius: 30% 50px;
    border-bottom-right-radius: 30% 50px;
}

.rounded-top-corners {
    border-top-left-radius: 30% 50px;
    border-top-right-radius: 30% 50px;
}

.double-underline {
    text-decoration-line: underline;
    text-decoration-style: double;
    text-decoration-thickness: 3px;
    text-underline-offset: 10px;
}

.vertical-text {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}

.tooltip .tooltip-inner {
    background-color: white;
    color: black;
    border: 3px solid var(--bl-tertiary-color);
    text-align: left;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

.tooltip-trigger:hover {
    color: #FFACE4;
    text-decoration: underline;
    cursor: pointer;
}

.tooltip.show {
    opacity: 1;
}

.bold-label ~ label {
    font-weight: bold;
}

.nav-item .dropdown-menu {
    max-height: 50vh; /* Adjust this value as needed */
    overflow-y: auto;
}