/** Navbar **/

#main-navbar {
    position: fixed;
    bottom: 0;
    width: 100%;
    max-width: 100vw;
    z-index: 200;
    background: rgb(var(--grey1));
    font-weight: 500;
    font-family: "Fira Sans", Helvetica, Arial, sans-serif!important;
    position: sticky;
    top: 0px;
}

#main-navbar ul {
    margin: 0;
    list-style: none;
    padding: 0;
}

@media screen and (min-width: 992px)
{
    #main-navbar ul {
        padding-inline: 0.5rem;
    }    
}

#main-navbar li a {
    color: rgb(var(--grey6));
    display: block;
    padding: 10px 15px;
    line-height: 20px;
}
#main-navbar li a:visited {
    color: rgb(var(--grey6));
}
#main-navbar li:hover a,
#main-navbar li.current a,
#main-navbar li a:focus {
    color: rgb(var(--grey1));
}

@media (min-width: 768px){
    #main-navbar ul {
        display: flex;
    }
    #main-navbar li a {
        padding: 15px;
    }
}

.btn, #main-navbar .btn {
    color: rgb(var(--grey6));
    background-color: rgb(var(--red2));
    color: rgb(var(--grey6));
    background-color: rgb(var(--red2));
    display: inline-block;
    margin-bottom: 0;
    font-weight: 700;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
    padding: 6px 12px;
    border: none;
    border-radius: 4px;
    margin: 9px 0.2rem;
}
.btn:hover,
.btn:focus,
#main-navbar .btn:hover,
#main-navbar .btn:focus {
    color: rgb(var(--grey6));
    background: rgb(var(--red1));
}
#main-navbar #login-tab .btn {
    background: rgb(var(--grey6));
    color: rgb(var(--grey1));
}
#main-navbar #login-tab .btn:hover,
#main-navbar #login-tab .btn:focus {
    background: rgb(var(--grey5));
}
#publish-tab a {
    color: rgb(var(--grey6)) !important;
}

#main-navbar #indy-logo img {
    height: 34px;
    width: 34px;
    margin: 8px;
}
#main-navbar #menu-collapse ul:nth-child(2) {
    position: absolute;
    right: 0;
}
#main-navbar #menu-collapse ul:nth-child(2) li {
    margin-left: 0.5em;
}
#main-navbar #menu-collapse ul:nth-child(2) li a {
    padding: 0;
}
#main-navbar #menu-collapse ul:nth-child(2) li a button {
    font-weight: 700 !important;
}

#main-navbar #menu-collapse ul {
    padding-bottom: 50px;
}
@media (min-width: 768px){
    #main-navbar #menu-collapse ul {
        padding-bottom: 0px;
    }
}

/* Couleurs par tab */
#indy-logo:hover a img {
  filter: invert(1);
}
#main-navbar li:not(#publish-tab):not(#login-tab):hover,
#main-navbar li:not(#publish-tab):not(#login-tab):active,
#main-navbar li:not(#publish-tab):not(#login-tab).current {
    background: rgb(var(--grey6));
}
#main-navbar #local-tab:hover,
#main-navbar #local-tab:active,
#main-navbar #local-tab.current,
#main-navbar #podcast-tab:hover,
#main-navbar #podcast-tab:active,
#main-navbar #podcast-tab.current,
#main-navbar #tumble-tab:hover,
#main-navbar #tumble-tab:active,
#main-navbar #tumble-tab.current {
    background: rgb(var(--maj4)) !important;
}
#main-navbar #events-tab:hover,
#main-navbar #events-tab:active,
#main-navbar #events-tab.current,
#main-navbar #groups-tab:hover,
#main-navbar #groups-tab:active,
#main-navbar #groups-tab.current,
#main-navbar #tags-tab:hover,
#main-navbar #tags-tab:active,
#main-navbar #tags-tab.current,
#main-navbar #zines-tab:hover,
#main-navbar #zines-tab:active,
#main-navbar #zines-tab.current,
#main-navbar #elsewhere-tab:hover,
#main-navbar #elsewhere-tab:active,
#main-navbar #elsewhere-tab.current {
    background: rgb(var(--yel3)) !important;
}
#main-navbar #global-tab:hover,
#main-navbar #global-tab:active,
#main-navbar #global-tab.current {
    background: rgb(var(--red4)) !important;
}

/* Navbar header */
/* Boutons ronds visible que sur smartphone/tablet */

.navbar-header {
    padding: 2px 6px;
    display: flex;
}
@media (min-width: 992px) {
    .navbar-header {
        display: none;
        padding: 0px 0px;
    }
}

.navbar-header > * {
    display: flex;
    margin: 0.3em 0.2em;
    padding: 5px 5px;
    border-radius: 20px;
    background: black;
    width: 42px;
    height: 42px;
    border: none;
}

.navbar-header a:hover,
.navbar-header a:focus,
.navbar-header a:active {
    background: rgb(var(--grey6));
}

.navbar-header a img {
    width: 25px;
    height: 25px;
    margin: auto;
    filter: invert(100%);
    display: inline;
}
.navbar-header a:hover img,
.navbar-header a:focus img,
.navbar-header a:active img {
    filter: invert(0%);
    display: inline;
}

/* Publier */
.navbar-header .publish-btn {
    border: 2px solid white;
    background: rgb(var(--red2));
}

.navbar-header .publish-btn img {
    filter: invert(100%);
    padding: 1px;
}
.navbar-header .publish-btn:hover img,
.navbar-header .publish-btn:focus img,
.navbar-header .publish-btn:active img {
    filter: invert(0%);
}

/* Hamburger */
.navbar-header .hamburger {
    border-radius: 2px;
    display: inline-block;
}
.navbar-header .hamburger:hover,
.navbar-header .hamburger:active {
    background: rgb(var(--grey6));
}
.navbar-header .hamburger img {
    width: 100%;
    filter: brightness(1000%);
}
.navbar-header .hamburger:hover img,
.navbar-header .hamburger:active img {
    filter: brightness(1000%) invert(100%);
}

/** Foldable content **/

input[type=checkbox].toggle {
    display: none;
}    

.collapsible-content {
    max-height: 0px;
    overflow-x: scroll;
    visibility: hidden;
}    

.toggle:checked + div.collapsible-content,
.toggle:checked + h2 + div.collapsible-content {
    visibility: initial;
    max-height: unset;
    margin-bottom: 0px; /* 0px to disable animation/transition */
}    

.toggle:checked + #menu-collapse.collapsible-content,
.toggle:checked + h2 + #menu-collapse.collapsible-content{
    max-height: 50vh;
}    

/* Flèches de dépliage des blocks */

.toggle + h2 .toggler {
    transform: rotate(90deg);
}
.toggle:checked + h2 .toggler {
    transform: rotate(0deg) !important;
}

label {
    cursor: pointer;
    height: min-content;
}

nav .toggler:not(:active) {
    animation: rotate 0.3s;
}

.block .toggler:active {
    animation: open 0.5s;
}
.block .toggler:not(:active) {
    animation: close 0.5s;
}

/* Main nav bar */
@media (min-width: 768px){
    #main-navbar .collapsible-content {
        visibility: initial;
        max-height: unset;
        overflow: unset;
        margin-bottom: 0 !important;
    }
    
    .mask {
        display: none;
    }
    
    #main-navbar .toggler {
        display: none;
    }
}