/* MSP Additions */

/* This removes the shapes in the background */
img[src="/img/shape-1.svg"],
img[src="/img/shape-2.svg"],
img[src="/img/shape-3.svg"] { 
	display: none !important; 
}

/* Makes links in event description readable and removes annoying background */
.event-description a {
	background-color: #ffffff00 !important;
  	color: var(--link) !important;
}

/* Removes unnecessary banner above your upcoming events */

.bg-mbz-yellow-alt-100 { 
	background-color: #ffffff00 !important;
	/*display: none !important;*/
}



/* === Custom CSS for floor.tips === */

/* TODO: 

- Btn:Hover: --secondary

* in-text:
  - Link:  --secondary
  - Link: white

- datetime-container: Paddin top/bund 

* Pop-up and Modals
  - Publish
  - By <name>

*/

/* Floor.tips palette */

:root {
  --primary: #dde809; 
  --secondary: #C1CB00;
  --tertiary: #798000;
  --blackish: #231f20;
  --greyish: #aaa;
  
  --nav-bg: var(--blackish);
  --main-bg: var(--blackish);
  
  --card-bg: var(--blackish);
  --card-edge: var(--secondary);
    
  --text: #eee;
  --link: var(--primary);
  --mute: var(--greyish);
  
  --btn-bg: black;
  --btn-text: var(--primary);
  --btn-mute: var(--greyish);
  
  --tags: var(--secondary);  
}

/* Dark  mode */
/*
@media (prefers-color-scheme: dark) {
  :root {
    --main-bg: var(--blackish);
    --card-bg: #231f20;
    --text: #fff;
    --mute: #999;    
  }
}
*/



/* Resets */ 

* { box-shadow: none !important; }

.btn,
.input,
.mbz-card,
.rounded-md,
.rounded-lg,
.notification {
  border-radius:  0;
}


.text-gray-500, .text-gray-600,
span:is(.dark .dark\:text-gray-200),
p:is(.dark .dark\:text-gray-200)
{
  color: var(--greyish);
}

/* Hide */

main > section:first-of-type,
main > section:first-of-type > div:first-of-type {
  margin-top: 0rem;
}

#short-search,
#search-anchor {
  display: none;
}

/* Navigation */

#navbar {
  background-color: var(--nav-bg);
  padding-bottom: 1rem;
  border-bottom: var(--tertiary) 1px solid;
}

#navbar a,
#navbar a:visited,
#navbar button {
  color: var(--link);
}

#navbar a.border-b {
  border: none;
} 

#navbar a.border-b:hover,
#navbar button.hover\:bg-zinc-100:hover {
  /*color: black;*/
  background-color: var(--blackish);
}

#navbar button.focus\:ring-gray-200:focus {
  --tw-ring-color: var(--tertiary);
}

#mobile-menu-2 {
  margin: auto;
}

#navbar ul li a span.absolute.right-0.text-xs {
  display: none;
}

/* Main */

main {
  background-color: var(--main-bg);
}

main,
.text-gray-900,
.text-violet-title,
.text-violet-3 {
  color: var(--text);
}

main a,
main a:visited {
  color: var(--secondary);
}

.btn,
button:is(.dark .btn-text) {
  background-color: var(--btn-bg);
  color: var(--btn-text);
}

.btn-text {
  text-decoration: none;
}

.btn:hover,
button:is(.dark .btn-text):hover {
  background-color: var(--btn-text);
  color: var(--btn-bg);
}

a.btn {
  background-color: initial;
}

section > div {
  margin-top: 2rem;
}

.mb-2 {
  margin-bottom: 1rem;
}

/* Event card */

.mbz-card figure div.absolute {
  display: none; /* hide tags */
}

.mbz-card,
:is(.dark .mbz-card) {
  margin-top: 0.5rem;
  /*padding: 0.3rem;*/
  border-top: var(--card-edge) 4px solid;
  /*border-radius: 0;*/
  background-color: var(--card-bg);
  /*color: var(--mute);*/
  padding-top: 0.2rem;
}

.mbz-card:hover,
:is(.dark :is(.dark .mbz-card):hover) {
  background-color: var(--card-bg);
}

.mbz-card span,
:is(.dark .mbz-card) span {
  color: var(--greyish); 
}

.mbz-card .text-violet-3, .text-violet-title {
  color: var(--text); 
}

div.datetime-container[data-v-734fd47b] {
  /*padding: 0.5rem 0;  TODO*/
} 

div.datetime-container .datetime-container-header[data-v-734fd47b],
div.starttime-container[data-v-16bfa768],
.datetime-container-content, 
.starttime-container,
.starttime-container:is(.dark .dark\:text-white),
.starttime-container:is(.dark .dark\:bg-gray-700) {
  background-color: black;
  color: var(--text);
}

.mbz-card .clock-icon svg,
.mbz-card time {
  color: var(--text);
}



/* tags 

.bg-purple-3 {
  background-color: var(--secondary);
  color: wheat;
  display: none;
}
*/

/* Event page */

.bg-white,
.bg-white:is(.dark .dark\:bg-zinc-700),
.bg-white:is(.dark .dark\:bg-mbz-purple) {
  background-color: var(--card-bg);
}


section.event-description h2.text-2xl,
aside h2,
h2:is(.dark .dark\:text-white) {
  color: var(--mute);
  text-transform: uppercase;
  font-weight: bold;
  font-size: 0.8rem;
}

aside.max-w-screen-sm {
  /*max-width: 100%;*/
}

a > h2#comments {
  color: var(--mute);
}


.addressDescription {
  font-weight: bold;
}

.prose,
.prose :where(h3):not(:where([class~="not-prose"], [class~="not-prose"] *)),
.prose :where(strong):not(:where([class~="not-prose"], [class~="not-prose"] *)),
.prose :where(h4):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
  color: var(--text);
}


.dark:bg-mbz-purple {
  background-color: var(--blackish);
}

/* Banners */

.notification-info {
  color: var(--text);
  background-color: var(--blackish);
  border: thin solid var(--secondary);
}

/* Footer */

/*
footer {
  border-top: var(--tertiary) 1px solid;
  padding-top: 1rem;
}
*/

footer ul {
  margin-top: 3rem;
}


footer.bg-violet-2 {
  background-color: var(--nav-bg);
}

footer .text-yellow-1 {
  color: var(--mute);
}

footer .decoration-yellow-1 {
  text-decoration-color: var(--primary);
  color: var(--primary);
}