/* CCS Styling Rules to adapt styling to BW */


/* Declare some basic colours */
:root{
    /* BW Colours */
    --bw-grey-95: #2a2623;
    --bw-white: #fff;
    --bw-color-background-accent: #FFFC00;
    --bw-color-foreground-primary: var(--bw-grey-95);
    --bw-color-background-subtle: #F4F3F1;
    --bw-color-border-focus: #6E0BCC;
    --bw-color-background-primary: var(--bw-white);
    --bw-background-emphasis: var(--bw-grey-95);
    --bw-foreground-on-emphasis: var(--bw-white);
    --bw-color-border-primary: #524942;
    --bw-color-border-subtle: #CBC6BD;
    --bw-border-emphasis: var(--bw-grey-95);

    /* overrriding RLP colors */
    --rlp-red: var(--bw-color-foreground-primary);
    --rlp-gray-dark: var(--bw-color-foreground-primary);
    --rlp-gray-light: var(--bw-color-background-subtle);

}

@font-face {
    font-family: "BaWue Sans";
    src: url(/files/fonts/BaWueSansWeb-Bold.woff) format("woff"),
         url(/files/fonts/BaWueSansWeb-Bold.woff2) format("woff2");
    font-style: normal;
    font-weight: 700;
    font-display:swap
}

@font-face {
    font-family: "BaWue Sans";
    src: url(/files/fonts/BaWueSansWeb-BoldItalic.woff) format("woff"),
         url(/files/fonts/BaWueSansWeb-BoldItalic.woff2) format("woff2");
    font-style: italic;
    font-weight: 700;
    font-display:swap
}

@font-face {
    font-family: "BaWue Sans";
    src: url(/files/fonts/BaWueSansWeb-SemiBold.woff) format("woff"),
         url(/files/fonts/BaWueSansWeb-SemiBold.woff2) format("woff2");
    font-style: normal;
    font-weight: 600;
    font-display:swap
}

@font-face {
    font-family: "BaWue Sans";
    src: url(/files/fonts/BaWueSansWeb-SemiBoldItalic.woff) format("woff"),
         url(/files/fonts/BaWueSansWeb-SemiBoldItalic.woff2) format("woff2");
    font-style: italic;
    font-weight: 600;
    font-display:swap
}

@font-face {
    font-family: "BaWue Sans";
    src: url(/files/fonts/BaWueSansWeb-Regular.woff) format("woff"),
         url(/files/fonts/BaWueSansWeb-Regular.woff2) format("woff2");
    font-style: normal;
    font-weight: 400;
    font-display:swap
}

@font-face {
    font-family: "BaWue Sans";
    src: url(/files/fonts/BaWueSansWeb-RegularItalic.woff) format("woff"),
         url(/files/fonts/BaWueSansWeb-RegularItalic.woff2) format("woff2");
    font-style: italic;
    font-weight: 400;
    font-display:swap
}

@font-face {
    font-family: "BaWue Serif";
    src: url(/files/fonts/BaWueSerifWeb-Bold.woff) format("woff"),
         url(/files/fonts/BaWueSerifWeb-Bold.woff2) format("woff2");
    font-style: normal;
    font-weight: 700;
    font-display:swap
}

@font-face {
    font-family: "BaWue Serif";
    src: url(/files/fonts/BaWueSerifWeb-Regular.woff) format("woff"),
         url(/files/fonts/BaWueSerifWeb-Regular.woff2) format("woff2");
    font-style: normal;
    font-weight: 400;
    font-display:swap
}

body{
    font-family: BaWue Sans, Arial;
    color: var(--bw-color-foreground-primary);
    margin-bottom: 0;
    display: flex;  /* use the flex model for sticky footer with variable height*/
    min-height: 100vh;
    flex-direction: column;
}

/* style public headings in serif */
.heading-serif {
    font-family: BaWue Serif, serif;
}

/* adapt spacing for sticky footer with flexible height */
div#main{
    flex: 1;
}

.alert{
    margin-bottom: 1rem !important;
}

/* link styling */
a{
    border-bottom: 1px solid var(--bw-color-border-primary, #524942)
}

a:hover{
    text-decoration: none;
    color: var(--bw-color-foreground-primary);
    background: var(--bw-color-background-accent);
    border-bottom: 2px solid var(--bw-color-border-primary, #524942)
}

a.text-decoration-none{
    border-bottom: none;
}

/* Override focus of form fields */
.form-control:focus, input[type=search]:focus{
    outline: none;
    border-color: var(--bw-color-border-focus);
    box-shadow: 0 0 3px var(--bw-color-border-focus);
    -moz-box-shadow: 0 0 3px var(--bw-color-border-focus);
    -webkit-box-shadow: 0 0 3px var(--bw-color-border-focus);
}



/* Footer - relativ position with varibale height */
.footer{
    position: inherit;
    height: auto;
    line-height: normal;
    background-color: var(--bw-background-emphasis);
    color: var(--bw-foreground-on-emphasis);
}


.footer-link a{
    color: var(--bw-foreground-on-emphasis);
    border-bottom: none;
}

.footer-link a:hover{
    background-color: transparent;
    border-bottom: 1px solid var(--bw-foreground-on-emphasis)
}

/* styling accend header */

.header-accent{
    background-color: var(--bw-color-background-accent);
    padding: .5rem 1rem;
}

.header-logo img{
    height: 2.5rem;
}

.header-logo, .header-logo:hover, .header-brand a, .header-brand a:hover{
    border: none;
}

.header-accent .navbar{
    background-color: inherit;
    border-bottom: none;
}

.header-accent .nav-btn:hover, .nav-btn:focus{
    background-color: inherit !important;
    border-bottom: 2px solid var(--bw-color-border-primary, #524942);
}

.header-brand{
    font-size: 1.75rem;
}

span.header-brand {
    font-weight: 600;
    font-style: italic;
    font-variant: small-caps;
}

/* Styling Navbar */

.navbar{
    background-color: var(--bw-color-background-primary);
    border-bottom: 1px solid var(--bw-color-border-subtle);
}

.nav-btn{
    color: var(--bw-color-foreground-primary);
    border-bottom: 2px solid transparent;
    padding: 0.5rem;
}
.nav-btn:hover, .nav-btn:focus{
    color: var(--bw-color-foreground-primary);
    background-color: white;
    border-bottom: 2px solid var(--bw-color-border-primary, #524942);
}

.navbar-light .navbar-nav .nav-link{
    color: var(--bw-color-foreground-primary);
    border-bottom: 2px solid transparent;
}

.navbar-nav .nav-item {
    margin-right: 1rem;
}

.navbar-light .navbar-nav .nav-link:hover{
    color: var(--bw-color-foreground-primary);
    background-color: white;
    border-bottom: 2px solid var(--bw-color-border-primary, #524942)
}

.navbar-light .navbar-toggler-icon{
    background-image: url('/static/root/images/bw-bars-three-menu-line.svg');
}

.nav-brand {
    border-bottom: none;
}

.nav-brand:hover{
    /*border-bottom: none;*/
    background-color: white;
}

.dropdown-item:hover {
    border-bottom: none;
    background-color: var(--bw-color-background-subtle);
}

/* Button Style */
.btn-default{
    color: white;
    background-color: var(--bw-color-foreground-primary);
    border-radius: 3px;
}

.btn-default:hover, .btn-outline-default:hover{
    color: var(--bw-color-foreground-primary);
    background-color: var(--bw-color-background-accent);
    border: 1px solid var(--bw-color-border-primary);
    box-shadow: none;
}

.btn-outline-default{
    color: var(--bw-color-foreground-primary);
    border: 1px solid var(--bw-color-border-primary);
}

a:has(button){
    border-bottom: none;
}

a:has(button):hover{
    background-color: inherit;
    border: inherit;
}

/* override box on overview page */
.qs-box{
    background-color: var(--bw-color-background-accent);
    color: var(--bw-color-foreground-primary);
}

/* override card styling */
.rlp-r{
    background-color: var(--bw-color-background-subtle);
    color: var(--bw-color-foreground-primary);
}

/* override styling required */
.label-required{
    color: red;
}

/* override styling select lists */
.select2-results__option--highlighted{
    background-color: var(--bw-color-background-subtle) !important;
}

.select2-results__option--highlighted[aria-selected]{
    color: var(--bw-color-foreground-primary) !important;
}

/* styling cards on public landing page */
.card-icon {
    background-color: var(--bw-color-background-accent);
    width: 4rem;
    height: 4rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 3px;
    font-size: 1.5rem;
}

/* styling accordion on public pages */

.accordion > .card{
    border-top: 1px solid var(--bw-border-emphasis);
    border-radius: 0;
    border-right: none;
    border-left: none;
    font-size: 1rem;
}

.accordion > .card:hover{
    box-shadow: none;
}

.accordion > .card:first-child{
    border-radius: 0;
    border-top: 1px solid var(--bw-border-emphasis);
}

.accordion > .card:last-child{
    border-radius: 0;
    border-bottom: 1px solid var(--bw-border-emphasis);
}

.accordion > .card > .card-header{
    background-color: var(--bw-color-background-subtle);
    border: none;
}

.accordion > .card > .card-header.collapsed{
    background-color: var(--bw-white);
}

.accordion_heading{
    font-size: 1rem;
    font-weight: bold;
}

/* overwrite styling of higlightings in tables etc. */
.table-primary, .table-primary > td, .table-primary > th{
    background-color: var(--bw-color-background-accent);
}

.table-primary tbody+tbody, .table-primary td, .table-primary th, .table-primary thead th{
    border-top: none;
}

.table-hover .table-primary:hover, .table-hover .table-primary:hover>td, .table-hover .table-primary:hover>th{
    background-color: rgba(0,0,0,.075);
}



/* overwrite styling of badges and icons in card headers */
.card-header .badge-light{
    background-color: var(--bw-color-background-accent);
    vertical-align: text-bottom;
}

/* overwrite additional icon for card headings */
.card-header  i.text-primary{
    font-size: 75%; /* similar to badge size */
    color: var(--bw-color-foreground-primary) !important;
}

/* styles for "Leichte Sprache" */
.leichte-sprache, .leichte-sprache p{
    line-height: 1.75;
    font-size: 1.15rem;
}

/*
Extends css for django autocomplete light (dal)
No other approach worked to get the autocomplete fields to full width of parent containers
*/
.select2{
    width: 100% !important;
}

small {
    font-weight: normal;
}

.svg-icon {
  display: inline-block;
  width: 1.15em;
  height: 1.15em;
  vertical-align: -0.25em;
  overflow: visible;
}

.svg-icon.white {
  filter: brightness(0) invert(1);
}
.svg-icon.allwhite {
  filter: brightness(0) invert(1);
}

button:hover .svg-icon.white {
  filter: none;
}

.svg-icon.white:hover {
  filter: none;
}